/* ===== Hub flotante de Jeims (esfera + panel) ===== */

/* esfera abajo a la derecha — transparente en reposo, sólida activa */
.hub-orb{ position:fixed; bottom:20px; right:20px; z-index:60; width:62px; height:62px; border-radius:50%;
  border:1px solid var(--jx-line, rgba(47,107,240,.3)); background:var(--surface); padding:0; cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.18); opacity:.5; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .25s ease, transform .2s ease, box-shadow .25s ease; }
.hub-orb:hover{ opacity:1; transform:translateY(-2px); }
.hub-orb.active{ opacity:1; box-shadow:0 0 0 3px var(--jx-soft, rgba(47,107,240,.14)), 0 10px 30px rgba(47,107,240,.32); }
.hub-orb .aicore{ width:100%; height:100%; }
.hub-orb-live{ position:absolute; top:5px; right:5px; width:10px; height:10px; border-radius:50%;
  background:#34d399; box-shadow:0 0 0 3px var(--surface); animation:hubpulse 1.2s ease-in-out infinite; }
@keyframes hubpulse{ 50%{ opacity:.35 } }

/* panel */
.hub-panel{ position:fixed; bottom:96px; right:20px; z-index:70; width:440px; max-width:calc(100vw - 40px);
  height:min(660px, calc(100vh - 130px)); background:var(--surface); border:1px solid var(--border);
  border-radius:18px; box-shadow:0 20px 54px rgba(0,0,0,.30); display:flex; flex-direction:column; overflow:hidden;
  animation:hubrise .2s cubic-bezier(.2,.8,.2,1) both; }
/* el Playground (con su flujo) necesita aire: panel ancho y alto, como la vista real del sistema */
.hub-panel.wide{ width:min(900px, calc(100vw - 40px)); height:min(740px, calc(100vh - 110px)); }
@keyframes hubrise{ from{ transform:translateY(12px); opacity:0 } to{ transform:none; opacity:1 } }

.hub-head{ display:flex; align-items:center; gap:8px; padding:10px 10px 10px 14px; border-bottom:1px solid var(--border); }
.hub-tabs{ display:flex; gap:4px; flex:1; min-width:0; }
.hub-tab{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:var(--text-3); font-family:var(--font-body); font-weight:600; font-size:12.5px; cursor:pointer; }
.hub-tab svg{ width:15px; height:15px; }
.hub-tab:hover{ background:var(--surface-inset); color:var(--text); }
.hub-tab.on{ background:var(--jx-soft, rgba(47,107,240,.1)); color:var(--jx-ink, #2F6BF0); }
.hub-x{ width:30px; height:30px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text-3);
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.hub-x:hover{ background:var(--surface-inset); color:var(--text); }
.hub-x svg{ width:16px; height:16px; }
.hub-tabbody{ flex:1; min-height:0; display:flex; flex-direction:column; }

/* chat tab — calmo, aire entre mensajes; el mensaje propio va LIGERO (tinte suave, no azul macizo) */
.hub-chat{ flex:1; min-height:0; display:flex; flex-direction:column; }
.hub-msgs{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:16px; display:flex; flex-direction:column; gap:14px; }
.hub-empty{ margin:auto; max-width:250px; text-align:center; color:var(--text-3); font-size:13px; line-height:1.6; }
.hub-msg{ display:flex; max-width:100%; }
.hub-msg.user{ justify-content:flex-end; }
.hub-bubble{ max-width:78%; box-sizing:border-box; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.5;
  color:var(--text); overflow-wrap:anywhere; word-break:break-word; }
.hub-msg.user .hub-bubble{ background:var(--jx-soft, rgba(47,107,240,.10)); color:var(--text);
  border:1px solid var(--jx-line, rgba(47,107,240,.18)); border-bottom-right-radius:5px; }
.hub-msg.assistant .hub-bubble{ background:var(--surface-inset); border-bottom-left-radius:5px; }
.hub-bubble .ja-p{ margin:0 0 8px; } .hub-bubble .ja-p:last-child{ margin-bottom:0; }
.hub-bubble .ja-ul{ margin:0 0 8px; padding-left:18px; } .hub-bubble .ja-li{ margin:3px 0; }
.hub-bubble strong{ font-weight:650; }
.hub-bubble code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--surface); padding:1px 5px; border-radius:6px; }
.hub-cur{ display:inline-block; width:2px; height:1em; vertical-align:-2px; margin-left:2px; background:var(--jx, #2F6BF0); animation:jxblink 1s steps(1) infinite; }
.hub-composer{ display:flex; align-items:center; gap:8px; padding:12px; border-top:1px solid var(--border); }
.hub-composer input{ flex:1; min-width:0; border:1px solid var(--border); border-radius:10px; padding:9px 12px; font-size:14px;
  background:var(--surface); color:var(--text); outline:none; }
.hub-composer input:focus{ border-color:var(--jx-line, rgba(47,107,240,.4)); }

/* avisos tab */
.hub-notifs{ flex:1; overflow-y:auto; padding:8px 12px; }
.hub-notif{ display:flex; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border); }
.hub-notif:last-child{ border-bottom:none; }
.hn-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; background:var(--text-3); flex:none; }
.hn-dot.run{ background:var(--jx, #2F6BF0); }
.hn-dot.ok, .hn-dot.approved{ background:#34d399; }
.hn-dot.error, .hn-dot.rejected{ background:#f87171; }
.hn-dot.pending{ background:#fbbf24; }
.hn-body{ min-width:0; flex:1; }
.hn-top{ display:flex; gap:8px; align-items:baseline; }
.hn-top b{ font-size:13px; color:var(--text); font-weight:650; text-transform:capitalize; }
.hn-when{ font-size:11px; color:var(--text-3); margin-left:auto; flex:none; }
.hn-label{ font-size:12px; color:var(--text-2); margin-top:1px; line-height:1.4; }
.hub-notif.actionable{ background:var(--surface-inset); border-radius:10px; padding:9px 10px; margin:4px 0; border-bottom:none; }
.hn-dot.auto{ background:#34d399; }
.hn-reason{ font-size:12px; color:var(--text-2); margin-top:4px; font-style:italic; line-height:1.4; }
.hn-learned{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--jx-ink, #2F6BF0); margin-top:5px;
  background:var(--jx-soft, rgba(47,107,240,.1)); padding:3px 8px; border-radius:7px; line-height:1.35; }
.hn-learned svg{ width:12px; height:12px; flex:none; }
.hn-actions{ display:flex; gap:6px; margin-top:8px; }
.hn-ask{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.hn-ask input{ flex:1; min-width:140px; border:1px solid var(--border); border-radius:9px; padding:7px 10px; font-size:12.5px;
  background:var(--surface); color:var(--text); outline:none; }
.hn-ask input:focus{ border-color:var(--jx-line, rgba(47,107,240,.4)); }
.jx-mini.ghost{ background:transparent; color:var(--text-3); border-color:transparent; }
.jx-mini.ghost:hover{ background:var(--surface-inset); color:var(--text); }

/* nivel de autonomía del equipo (la puerta de calidad) — bajo las pestañas */
.hub-levelbar{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--border);
  background:var(--surface-inset); }
.hlb-label{ font-size:11px; font-weight:650; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; flex:none; }
.hlb-seg{ display:flex; gap:2px; padding:2px; border-radius:9px; background:var(--surface); border:1px solid var(--border); flex:1; min-width:0; }
.hlb-opt{ flex:1; padding:5px 6px; border-radius:7px; border:none; background:transparent; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:11.5px; color:var(--text-3); white-space:nowrap; }
.hlb-opt:hover{ color:var(--text); }
.hlb-opt.on{ background:var(--jx-soft, rgba(47,107,240,.12)); color:var(--jx-ink, #2F6BF0); }

/* badge de no-leídas en la esfera + punto en la pestaña Avisos */
.hub-orb-badge{ position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:#f87171; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--surface); }
.hub-tab-dot{ width:6px; height:6px; border-radius:50%; background:#f87171; margin-left:1px; }

/* playground tab — la VISTA real (flujo + hilo), con su estilo del sistema, en panel amplio que scrollea */
.hub-pg{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:18px; }

@media (max-width:560px){
  .hub-panel, .hub-panel.wide{ width:calc(100vw - 24px); right:12px; bottom:86px; }
  .hub-orb{ bottom:16px; right:16px; }
}