/* Modo Live: pantalla completa dentro de la barra lateral (estilo Gemini Live). Solo existe en la barra lateral. */
.cb-full #live-btn,.cb-full .live-overlay{display:none!important}
.live-overlay{position:fixed;inset:0;z-index:9999;background:#0d0f14;color:#f4f5f7;display:none;flex-direction:column;overflow:hidden;font-family:inherit;gap:0}
.live-overlay.show{display:flex}
.live-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:12px;color:#9aa0ab;position:relative;z-index:2}
.live-tag{display:flex;align-items:center;gap:7px;color:#f4f5f7;font-weight:600;font-size:14px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--agent,#3ddc84);box-shadow:0 0 8px var(--agent,#3ddc84);animation:live-blink 1.6s infinite}
@keyframes live-blink{50%{opacity:.3}}
.live-screen-tag{display:none;align-items:center;gap:6px;background:#ea4335;color:#fff;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600}
.live-overlay.screen-on .live-screen-tag{display:flex}
.live-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:static;min-height:0}
.live-halo{position:absolute;left:-30%;right:-30%;bottom:-140px;height:460px;filter:blur(50px);opacity:.8;pointer-events:none;z-index:0;background:radial-gradient(closest-side at 20% 55%,#4285f4,transparent),radial-gradient(closest-side at 42% 70%,#ea4335,transparent),radial-gradient(closest-side at 62% 50%,#fbbc04,transparent),radial-gradient(closest-side at 82% 65%,#34a853,transparent);animation:live-drift 7s ease-in-out infinite;transition:opacity .4s;will-change:transform}
@keyframes live-drift{50%{transform:translateX(8%) scale(1.08)}}
.live-overlay[data-phase="speaking"] .live-halo{opacity:.9;animation-duration:2.2s}
.live-overlay[data-phase="thinking"] .live-halo{opacity:.65;animation-duration:3s}
.live-overlay[data-phase="paused"] .live-halo{opacity:.12}
.live-mascot{width:160px;height:130px;position:relative;z-index:1}
.live-state{font-size:13px;color:#9aa0ab;min-height:16px;position:relative;z-index:1}
.live-caption{min-height:48px;max-height:28vh;overflow:hidden;padding:0 16px;text-align:center;font-size:16px;line-height:1.4;position:relative;z-index:1}
.live-bar{display:flex;justify-content:center;gap:14px;align-items:flex-start;padding:14px 12px 20px;position:relative;z-index:2;background:transparent}
.live-col{display:flex;flex-direction:column;align-items:center;width:72px}
.live-btn{width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.1);backdrop-filter:blur(12px);color:#f4f5f7;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s,background .2s}
.live-btn:active{transform:scale(.94)}
.live-btn.on{background:#fff;color:#111}
.live-btn.end{background:#ea4335;border-color:transparent;color:#fff}
.live-lbl{font-size:11px;color:#c4c7ce;margin-top:6px;text-align:center;line-height:1.2;white-space:normal}
@media (prefers-reduced-motion:reduce){.live-halo,.live-dot{animation:none}}

/* Voice Selector Modal */
@keyframes fadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.voice-selector-modal{position:absolute;inset:0;background:rgba(5,6,15,.55);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;z-index:10;padding:16px;animation:fadeIn .3s}
.voice-selector-content{width:100%;max-width:340px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.voice-selector-content h2{margin:0 0 4px;font-size:19px;color:#f4f5f7}
.voice-selector-content p{margin:0 0 16px;font-size:12.5px;color:#9aa0ab}
.vs-grid{display:grid;gap:8px}
.vs-opt{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#f4f5f7;cursor:pointer;font:inherit;transition:background .2s,border-color .2s}
.vs-opt span{font-size:12px;color:#9aa0ab}
.vs-opt:hover{background:rgba(255,255,255,.09)}
.vs-opt.on{border-color:#a78bfa;background:rgba(167,139,250,.16)}
.vs-ok{width:100%;margin-top:14px;padding:12px;border:0;border-radius:14px;background:linear-gradient(135deg,#a78bfa,#f26b21);color:#fff;font:inherit;font-weight:600;cursor:pointer}

/* Imagen creada en Live: se abre en grande con acciones en la esquina */
.live-img { position: absolute; inset: 64px 16px 120px; z-index: 5; display: flex; align-items: center; justify-content: center; min-height: 0; animation: live-img-in .35s cubic-bezier(.16,1,.3,1) both; }
.live-img img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.55); object-fit: contain; background: #111; }
.live-img-bar { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.live-img-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(15,16,24,.82); color: #f4f5f7; font: 600 12.5px/1 inherit; cursor: pointer; transition: background .2s, transform .12s; }
.live-img-btn:hover { background: rgba(40,40,58,.95); }
.live-img-btn:active { transform: scale(.95); }
@keyframes live-img-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 380px) { .live-img-btn span { display: none; } }
@media (prefers-reduced-motion: reduce) { .live-img { animation: none; } }
.live-img { background: rgba(13,15,20,.6); border-radius: 18px; }
.live-img-frame { position: relative; display: inline-flex; max-width: 100%; }
.live-img-frame img { max-width: calc(100vw - 32px); max-height: calc(100vh - 200px); }
.live-img-frame .live-img-bar { top: 10px; right: 10px; }

/* Imagen dentro del escenario: nube arriba, imagen en medio, lo que dice la IA debajo */
.live-overlay .live-img { position: relative; inset: auto; z-index: 1; background: none; border-radius: 0; width: auto; max-width: calc(100% - 32px); flex: none; }
.live-overlay.has-img .live-stage { justify-content: flex-start; padding-top: 4px; gap: 12px; overflow-y: auto; }
.live-overlay.has-img .live-mascot { width: 104px; height: 86px; transition: width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1); }
.live-mascot { transition: width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1); }
.live-overlay .live-img-frame img { max-width: 100%; max-height: min(38vh, 320px); }
.live-overlay.has-img .live-caption { max-height: 22vh; overflow-y: auto; }

/* Sin barras de desplazamiento: la escena está fija y la imagen se ajusta al espacio disponible */
.live-overlay, .live-overlay * { scrollbar-width: none; }
.live-overlay::-webkit-scrollbar, .live-overlay *::-webkit-scrollbar { display: none; width: 0; height: 0; }
.live-overlay .live-stage, .live-overlay.has-img .live-stage { overflow: hidden; min-height: 0; justify-content: center; }
.live-overlay .live-img-frame img { max-width: min(calc(100vw - 48px), 320px); max-height: min(34vh, 300px); width: auto; height: auto; }
.live-overlay .live-caption, .live-overlay.has-img .live-caption { overflow: hidden; max-height: 64px; }
.live-overlay .live-img { inset: auto; }
.live-art { position: relative; width: min(calc(100% - 24px), 380px); max-height: 34vh; overflow: hidden; margin: 6px auto 0; border-radius: 16px; background: rgba(20,20,28,.85); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; }
.live-art-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.live-art-title { font-size: 13px; font-weight: 600; color: #ecebf5; }
.live-art > :not(.live-art-bar) { overflow: auto; max-height: calc(34vh - 44px); }

/* Documentos, hojas y tablas dentro de Live: mismo estilo oscuro y limpio que el chat */
.live-art, .live-art .doc-card, .live-art .code-card { background: #15151e !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.live-art table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; color: #e4e4ee; background: transparent; }
.live-art th { background: #1d1d2a; color: #c4b5fd; font-weight: 600; text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.live-art td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.05); }
.live-art tr:last-child td { border-bottom: 0; }
.live-art .doc-card-head { padding: 10px 12px; font-size: 13px; color: #ecebf5; }
.live-art .doc-card-acts { display: flex; gap: 6px; padding: 8px 10px; flex-wrap: wrap; }
.live-art .doc-card-btn { border-radius: 999px !important; font-size: 12px; padding: 6px 12px; }
.live-art .code-frame { background: #fff; }

/* Tarjeta de documento en Live: completa, sin cortes, con aire y movimiento suave */
.live-art { width: min(calc(100% - 28px), 400px); max-height: none; overflow: visible; margin: 10px auto 0; border-radius: 20px !important; background: linear-gradient(180deg, rgba(38,36,58,.94), rgba(22,22,32,.96)) !important; border: 1px solid rgba(167,139,250,.18) !important; box-shadow: 0 18px 40px rgba(0,0,0,.45) !important; animation: live-art-in .45s cubic-bezier(.16,1,.3,1) both; }
.live-art .live-art-bar { padding: 12px 14px 10px 16px; }
.live-art .live-art-title { font-size: 14px; letter-spacing: -.01em; }
.live-art .doc-card-head, .live-art .doc-card-acts { padding: 10px 14px; }
.live-art .doc-card-acts { padding-bottom: 14px; gap: 8px; }
.live-art .doc-card-btn { padding: 7px 13px !important; }
.live-art .code-pre, .live-art table { max-height: 34vh; overflow: auto; }
@keyframes live-art-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes live-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.live-overlay[data-phase="listening"] .live-caption::after, .live-overlay[data-phase="speaking"] .live-state::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #a78bfa; animation: live-wave 1.1s ease-in-out infinite; }
.live-art .doc-preview { margin: 4px 14px; max-height: 32vh; }

/* Subtítulos palabra por palabra en Live */
.live-word { display: inline-block; opacity: 0; transform: translateY(4px); animation: live-word-in .32s cubic-bezier(.16,1,.3,1) forwards; white-space: pre; }
@keyframes live-word-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .live-word { animation: none; opacity: 1; transform: none; } }

/* Video de YouTube dentro de Live */
.live-yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.live-yt { padding-bottom: 0; }

/* ---------- Modo especialista ---------- */
.live-mode-btn { margin-left: auto; margin-right: 8px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #f4f5f7; font: 600 12px/1 inherit; cursor: pointer; backdrop-filter: blur(10px); }
.live-mode-btn:hover { background: rgba(255,255,255,.14); }
.live-spec-tools { display: none; justify-content: center; gap: 8px; padding: 0 16px; position: relative; z-index: 2; }
.live-overlay[data-mode="calm"] .live-spec-tools { display: flex; }
.live-spec-tools button { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; font: 600 13px/1 inherit; cursor: pointer; }
.live-breathe-btn { background: rgba(100,210,255,.18); color: #bfefff; }
.live-help-btn { background: rgba(255,69,58,.2); color: #ffb4ae; }

/* Ambiente de calma: colores suaves y movimiento lento (para ansiedad, tristeza, depresión) */
.live-overlay[data-mode="calm"] { background: radial-gradient(120% 80% at 50% 0%, #0f2a3a, #0a1520 55%, #070d14); }
.live-overlay[data-mode="calm"] .live-halo { background: radial-gradient(closest-side at 30% 60%, #64d2ff, transparent), radial-gradient(closest-side at 70% 40%, #8e9cff, transparent), radial-gradient(closest-side at 50% 50%, #5ad1b4, transparent); opacity: .45; animation-duration: 12s; filter: blur(60px); }
.live-overlay[data-mode="calm"][data-phase="speaking"] .live-halo { opacity: .6; animation-duration: 9s; }
.live-overlay[data-mode="calm"] .live-caption { font-size: 18px; line-height: 1.6; color: #e6f6ff; }
.live-overlay[data-mode="calm"] .live-btn.end { background: rgba(255,255,255,.14); }
.live-overlay[data-mode="calm"] .live-dot, .live-overlay[data-mode="spec"] .live-dot { animation-duration: 3s; }

/* Hojas (elegir especialista, ayuda) */
.live-sheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.45); animation: fadeIn .25s; }
.live-sheet-box { width: 100%; max-width: 460px; max-height: 85%; overflow-y: auto; padding: 16px 16px 22px; border-radius: 22px 22px 0 0; background: rgba(28,28,32,.97); border: 1px solid rgba(255,255,255,.08); color: #f4f5f7; }
.live-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.live-sheet-head b { font-size: 18px; }
.live-sheet-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 18px; cursor: pointer; }
.live-sheet-p { margin: 0 0 12px; color: #a8aab6; font-size: 13px; line-height: 1.5; }
.live-spec { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.live-spec:hover { background: rgba(255,255,255,.09); }
.live-spec.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.live-spec-av { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; font-weight: 700; color: #fff; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000)); }
.live-spec-t { display: grid; gap: 2px; }
.live-spec-t small { color: #a8aab6; font-size: 12.5px; }
.live-spec.normal { justify-content: center; color: #9ecbff; }
.live-help-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; margin-bottom: 6px; border-radius: 14px; background: rgba(255,255,255,.05); color: #f4f5f7; text-decoration: none; }
.live-help-row b { color: #ff9f97; font-size: 16px; }

/* Respiración guiada */
.live-breathe { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; align-content: center; gap: 28px; background: radial-gradient(circle, rgba(15,42,58,.92), rgba(7,13,20,.97)); animation: fadeIn .4s; }
.live-breathe-c { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9f1ff, #64d2ff 45%, #2a7fa8); box-shadow: 0 0 60px rgba(100,210,255,.45); transform: scale(.7); transition: transform 4s ease-in-out; }
.live-breathe-c.in { transform: scale(1.6); transition-duration: 4s; }
.live-breathe-c.hold { transform: scale(1.6); box-shadow: 0 0 90px rgba(100,210,255,.7); }
.live-breathe-c.out { transform: scale(.7); transition-duration: 8s; }
.live-breathe-l { font-size: 20px; color: #e6f6ff; text-align: center; padding: 0 20px; }
.live-breathe-stop { height: 38px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: 600 14px/1 inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .live-breathe-c { transition: none; } }