/* ============================================================
   XYGOX · REDEALS AI — SISTEMA DE DISEÑO v3 "INTELLIGENCE CORE"
   Identidad: inteligencia serena, precisa, luz + profundidad física.
   5 temas: Oscuro, Medianoche, Claro, Sepia, Océano.
   Todas las clases y nombres de variable existentes se conservan
   para no romper ninguna referencia de JavaScript.
   ============================================================ */
:root, html[data-theme="dark"] {
    --bg-main:#07070B; --bg-panel:#0D0E14; --bg-elevated:#15161F; --bg-glass:rgba(13,14,20,.70);
    --border-color:rgba(255,255,255,.08); --border-hover:rgba(255,255,255,.18);
    --text-main:#F3F4F7; --text-muted:#9C9FAC; --text-faint:#61636F;
    --accent:#7C8CFF; --accent-2:#3FE3C8; --accent-soft:rgba(124,140,255,.14);
    --shadow:rgba(0,0,0,.5); --danger:#F87171; --success:#34D399; --warning:#FBBF24;
    --radius-sm:10px; --radius-md:14px; --radius-lg:20px;
}
html[data-theme="midnight"] {
    --bg-main:#03050D; --bg-panel:#070B18; --bg-elevated:#0D1324; --bg-glass:rgba(7,11,24,.74);
    --border-color:rgba(130,150,255,.11); --border-hover:rgba(130,150,255,.26);
    --text-main:#E9ECFB; --text-muted:#8B90BE; --text-faint:#565A82;
    --accent:#8B9BFF; --accent-2:#5CE1FF; --accent-soft:rgba(139,155,255,.15);
}
html[data-theme="light"], html[data-theme="sepia"] { }
html[data-theme="light"] {
    --bg-main:#F8F9FC; --bg-panel:#FFFFFF; --bg-elevated:#F0F2F7; --bg-glass:rgba(255,255,255,.82);
    --border-color:rgba(15,18,32,.09); --border-hover:rgba(15,18,32,.2);
    --text-main:#12131A; --text-muted:#585C6B; --text-faint:#989CAA;
    --accent:#4F5FE0; --accent-2:#0E9E8A; --accent-soft:rgba(79,95,224,.10); --shadow:rgba(20,25,55,.14);
    --danger:#DC2626; --success:#059669; --warning:#D97706;
}
html[data-theme="sepia"] {
    --bg-main:#F6F0E3; --bg-panel:#FFFDF8; --bg-elevated:#EFE5D2; --bg-glass:rgba(255,253,248,.88);
    --border-color:rgba(90,70,40,.15); --border-hover:rgba(90,70,40,.32);
    --text-main:#2B2216; --text-muted:#6C5D47; --text-faint:#A0917A;
    --accent:#AD6E22; --accent-2:#7C8F3E; --accent-soft:rgba(173,110,34,.13); --shadow:rgba(90,70,40,.2);
    --danger:#C0392B; --success:#4C7A3D; --warning:#B8790A;
}
html[data-theme="ocean"] {
    --bg-main:#03110F; --bg-panel:#061B18; --bg-elevated:#0B2723; --bg-glass:rgba(6,27,24,.76);
    --border-color:rgba(80,220,200,.11); --border-hover:rgba(80,220,200,.28);
    --text-main:#E7F6F1; --text-muted:#87B9AF; --text-faint:#517C73;
    --accent:#33D6BE; --accent-2:#6FA8FF; --accent-soft:rgba(51,214,190,.14);
}
html[data-theme="dark"], html[data-theme="midnight"], html[data-theme="ocean"] { color-scheme: dark; }
html[data-theme="light"], html[data-theme="sepia"] { color-scheme: light; }

/* Tokens de profundidad derivados (se recalculan solos si el usuario cambia --accent) */
:root {
    --depth-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 16px -10px var(--shadow);
    --depth-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 40px -16px var(--shadow);
    --depth-3: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 70px -20px var(--shadow);
    --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 30px -8px color-mix(in srgb, var(--accent) 45%, transparent);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.22,1.12,.36,1);
    --dur-fast: .16s;
    --dur-med: .32s;
    --dur-slow: .6s;
}

*, *::before, *::after { box-sizing:border-box; }
html { font-size: calc(16px * var(--font-scale, 1)); scroll-behavior: smooth; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg-main); color:var(--text-main); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; transition:background-color .4s ease, color .4s ease; letter-spacing:-0.006em; }
h1,h2,h3,h4,.font-jakarta { font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-0.012em; }
code,pre,.font-mono { font-family:'JetBrains Mono',monospace; }
.no-scroll { overflow:hidden; }
.danger-c { --danger:#F87171; }
html[data-theme="light"] .danger-c, html[data-theme="sepia"] .danger-c { --danger:#DC2626; }
button { transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-spring); }
button:active { transform: scale(.965); }
a { transition: color .18s ease, opacity .18s ease; }

/* --- Fondo ambiente vivo pero discretísimo: aurora + grano + malla de puntos --- */
.ambient { position:fixed; inset:0; z-index:-2; pointer-events:none;
    background: radial-gradient(1200px 680px at 84% -12%, var(--accent-soft), transparent 60%),
                radial-gradient(900px 620px at -12% 108%, var(--accent-soft), transparent 55%),
                radial-gradient(700px 500px at 50% 50%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 70%);
    opacity:.9; transition:opacity .5s ease; }
.ambient::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.4;
    background-image:radial-gradient(var(--border-color) 1px, transparent 1px); background-size:34px 34px;
    -webkit-mask-image:radial-gradient(1000px 700px at 50% 0%, #000, transparent 75%); mask-image:radial-gradient(1000px 700px at 50% 0%, #000, transparent 75%); }
.ambient::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.025; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* --- Aurora animada para loader/hero (GPU friendly) --- */
.aurora { position:fixed; inset:-20%; z-index:-1; pointer-events:none; opacity:.6;
    background:
      radial-gradient(38% 42% at 20% 28%, var(--accent-soft), transparent 70%),
      radial-gradient(34% 40% at 78% 64%, var(--accent-soft), transparent 70%),
      radial-gradient(30% 34% at 55% 15%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
      radial-gradient(26% 30% at 40% 80%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 70%);
    filter: saturate(1.2); animation: auroraShift 24s ease-in-out infinite alternate; }
@keyframes auroraShift { from { transform: translate3d(-2%,-1%,0) scale(1); } to { transform: translate3d(2%,2%,0) scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .aurora { animation:none; } }

/* ============ Componentes base ============ */
.glass { background:var(--bg-glass); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); border:1px solid var(--border-color); }
.card { background:var(--bg-panel); border:1px solid var(--border-color); border-radius:var(--radius-md); box-shadow:var(--depth-1); transition:border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), background-color var(--dur-med) ease; position:relative; }
.card-hover { cursor:pointer; }
.card-hover:hover { border-color:var(--border-hover); transform:translateY(-4px) scale(1.006); box-shadow:var(--depth-3); }
.card-hover:active { transform:translateY(-1px) scale(.995); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; border-radius:var(--radius-sm); transition:all var(--dur-med) var(--ease-spring); cursor:pointer; letter-spacing:-0.005em; position:relative; }
.btn-accent { background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 94%, white 10%), color-mix(in srgb, var(--accent) 80%, black 12%)); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent); position:relative; overflow:hidden; isolation:isolate; }
.btn-accent::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%); background-size:220% 100%; background-position:120% 0; transition:background-position .7s var(--ease-out); pointer-events:none; }
.btn-accent:hover::before { background-position:-20% 0; }
html[data-theme="sepia"] .btn-accent, html[data-theme="light"] .btn-accent { color:#fff; }
.btn-accent:hover { filter:brightness(1.09); box-shadow:0 1px 0 rgba(255,255,255,.26) inset, 0 14px 34px -8px color-mix(in srgb, var(--accent) 65%, transparent); transform:translateY(-1.5px); }
.btn-accent:active { transform:translateY(0) scale(.965); }
.btn-ghost { color:var(--text-main); border:1px solid var(--border-color); background:var(--bg-panel); }
.btn-ghost:hover { border-color:var(--border-hover); background:var(--bg-elevated); transform:translateY(-1px); }
.btn-ghost:active { transform:translateY(0) scale(.97); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

.field { background:var(--bg-elevated); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:.75rem 1rem; width:100%; font-size:.9rem; transition:border-color var(--dur-fast) ease, box-shadow var(--dur-med) var(--ease-out), background-color var(--dur-fast) ease; color:var(--text-main); }
.field::placeholder { color:var(--text-faint); }
.field:hover { border-color:var(--border-hover); }
.field:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.field-error { border-color:var(--danger) !important; }
.field-error:focus { box-shadow:0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent) !important; }
.field-msg { font-size:.75rem; color:var(--danger); min-height:1.05rem; margin-top:.3rem; }

.toggle { position:relative; width:42px; height:24px; flex-shrink:0; cursor:pointer; display:inline-block; }
.toggle input { position:absolute; opacity:0; }
.toggle .track { position:absolute; inset:0; border-radius:99px; background:var(--bg-elevated); border:1px solid var(--border-color); transition:.28s var(--ease-out); }
.toggle .knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:99px; background:var(--text-faint); transition:.28s var(--ease-spring); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.toggle input:checked ~ .track { background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent-2) 20%)); border-color:transparent; box-shadow:0 0 12px -2px var(--accent-soft); }
.toggle input:checked ~ .knob { transform:translateX(18px); background:#fff; }
.toggle:hover .track { border-color:var(--border-hover); }

* { scrollbar-width:thin; scrollbar-color:var(--text-faint) transparent; }
*::-webkit-scrollbar { width:6px; height:6px; }
*::-webkit-scrollbar-thumb { background:var(--text-faint); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
*::-webkit-scrollbar-track { background:transparent; }

/* ============ Animaciones ============ */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
.fade-in-up { animation:fadeUp .6s var(--ease-out) both; }
@keyframes scaleIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
.scale-in { animation:scaleIn .32s var(--ease-spring) both; }
@keyframes msgIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.msg-in { animation:msgIn .45s var(--ease-out) both; }
@keyframes appMain { from{opacity:0;transform:translateY(14px) scale(.985)} to{opacity:1;transform:none} }
.app-enter-main { animation:appMain .55s var(--ease-out) both; }
@keyframes appSide { from{transform:translateX(-28px);opacity:0} to{transform:none;opacity:1} }
@media (min-width:768px) {
  .app-enter-side { animation:appSide .55s var(--ease-out) both; }
}
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.float-y { animation:floatY 5.5s ease-in-out infinite; }
@keyframes logoPulse { 0%,100%{filter:drop-shadow(0 0 12px var(--accent-soft))} 50%{filter:drop-shadow(0 0 32px var(--accent-soft))} }
.logo-pulse { animation:logoPulse 2.8s ease-in-out infinite; }
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(220%)} }
@keyframes blink { 50% { opacity:0; } }
.caret::after { content:'▍'; margin-left:2px; color:var(--accent); animation:blink 1s step-end infinite; }
.tdot { width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:inline-block;margin:0 2px;animation:tb 1.2s infinite ease-in-out both; box-shadow:0 0 8px -1px var(--accent-soft); }
.tdot:nth-child(2){animation-delay:.15s} .tdot:nth-child(3){animation-delay:.3s}
@keyframes tb { 0%,80%,100%{transform:scale(.5);opacity:.4} 40%{transform:scale(1);opacity:1} }
@media (prefers-reduced-motion: reduce), html.rm *, html.rm *::before, html.rm *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }

.grad-steel { background:linear-gradient(100deg, var(--accent) 0%, #EAF1FC 45%, var(--accent) 90%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:sheen 7s linear infinite; }
html[data-theme="light"] .grad-steel, html[data-theme="sepia"] .grad-steel { background:linear-gradient(100deg, color-mix(in srgb, var(--accent) 60%, black 15%), var(--accent) 50%, color-mix(in srgb, var(--accent) 60%, black 15%)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; }
@keyframes sheen { to { background-position:200% center; } }

.rv { opacity:0; transform:translateY(28px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.rv.on { opacity:1; transform:none; }

.scene-3d { perspective:1400px; }
.tilt { transform-style:preserve-3d; transition:transform .4s var(--ease-out); will-change:transform; }
.tilt .layer-1 { transform:translateZ(34px); } .tilt .layer-2 { transform:translateZ(60px); } .tilt .layer-3 { transform:translateZ(88px); }

.marquee { overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:flex; gap:1rem; width:max-content; animation:mq 46s linear infinite; }
.marquee-track.rev { animation-direction:reverse; animation-duration:54s; }
@keyframes mq { to { transform:translateX(-50%); } }

/* Partículas suaves (CSS puro, pocas, baratas) */
.particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.particles i { position:absolute; bottom:-10px; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.16; animation:rise linear infinite; box-shadow:0 0 6px var(--accent-soft); }
@keyframes rise { to { transform:translateY(-105vh); opacity:0; } }

/* ============ Núcleo de inteligencia (halo del logo, empty state, loader) ============ */
.core-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
.core-halo { position:absolute; inset:-46px; border-radius:50%; pointer-events:none; z-index:0;
    background:radial-gradient(closest-side, var(--accent-soft), transparent 72%);
    filter:blur(2px); animation:coreBreathe 4.2s ease-in-out infinite; }
@keyframes coreBreathe { 0%,100%{ transform:scale(.94); opacity:.75 } 50%{ transform:scale(1.06); opacity:1 } }
.core-ring { position:absolute; border-radius:50%; pointer-events:none; z-index:0; border:1px solid var(--border-hover); opacity:.55; }
.core-ring--1 { inset:-18px; animation:coreSpin 16s linear infinite; border-style:dashed; opacity:.35; }
.core-ring--2 { inset:-32px; animation:coreSpin 26s linear infinite reverse; }
@keyframes coreSpin { to { transform:rotate(360deg); } }
.core-wrap img, .core-wrap svg { position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce) { .core-halo, .core-ring--1, .core-ring--2 { animation:none; } }

/* ============ Composer — luz recorriendo el borde ============
   Técnica: la "luz" es un anillo obtenido con mask-composite (no con
   overflow:hidden), así los menús del composer NUNCA quedan recortados. */
@property --cangle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.composer-shell { position:relative; display:flow-root; border-radius:var(--radius-lg); box-shadow:var(--depth-2); transition:box-shadow var(--dur-slow) ease; }
.composer-shell__spin { position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
    padding:1.4px;
    background: conic-gradient(from var(--cangle,0deg),
        transparent 0deg, transparent 268deg,
        color-mix(in srgb, var(--accent) 85%, transparent) 300deg,
        var(--accent-2) 328deg,
        transparent 356deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: composerSpin 7s linear infinite;
    opacity:.55; transition:opacity .5s ease; }
.composer-shell:focus-within .composer-shell__spin { opacity:1; animation-duration:4.5s; }
.composer-shell:focus-within { box-shadow:0 30px 70px -22px var(--accent-soft), var(--depth-2); }
.composer-shell:hover:not(:focus-within) .composer-shell__spin { opacity:.75; }
@keyframes composerSpin { to { --cangle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .composer-shell__spin { animation:none; opacity:.55; }
    .composer-shell:focus-within .composer-shell__spin { opacity:.8; }
}
.composer-inner { position:relative; z-index:1; margin:1.4px; border-radius:calc(var(--radius-lg) - 1.4px); background:var(--bg-panel); transition:background-color var(--dur-med) ease; }
html.rm .composer-shell__spin { animation:none !important; }

/* Markdown */
.markdown-body { line-height:1.7; font-size:.925rem; }
.markdown-body p { margin-bottom:.75rem; } .markdown-body p:last-child { margin-bottom:0; }
.markdown-body ul,.markdown-body ol { margin:.5rem 0 .8rem 1.4rem; }
.markdown-body ul { list-style:disc; } .markdown-body ol { list-style:decimal; }
.markdown-body li { margin-bottom:.3rem; }
.markdown-body li::marker { color:var(--accent); }
.markdown-body h1,.markdown-body h2,.markdown-body h3 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; letter-spacing:-0.01em; margin:1.1rem 0 .55rem; }
.markdown-body h1:first-child,.markdown-body h2:first-child,.markdown-body h3:first-child { margin-top:0; }
.markdown-body strong { font-weight:700; color:var(--text-main); }
.markdown-body code { background:var(--bg-elevated); padding:.15rem .45rem; border-radius:6px; font-size:.85em; border:1px solid var(--border-color); }
.markdown-body pre { background:var(--bg-elevated); padding:1rem 1.1rem; border-radius:var(--radius-sm); overflow-x:auto; border:1px solid var(--border-color); margin-bottom:.9rem; box-shadow:0 1px 0 rgba(255,255,255,.02) inset; }
.markdown-body pre code { background:none; border:none; padding:0; line-height:1.6; }
.markdown-body blockquote { border-left:3px solid var(--accent); padding:.2rem 0 .2rem .9rem; color:var(--text-muted); margin:.8rem 0; }
.markdown-body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; font-weight:500; }
.markdown-body a:hover { opacity:.8; }
.markdown-body table { border-collapse:separate; border-spacing:0; margin:.8rem 0; font-size:.85rem; width:100%; border:1px solid var(--border-color); border-radius:var(--radius-sm); overflow:hidden; }
.markdown-body th,.markdown-body td { border-bottom:1px solid var(--border-color); border-right:1px solid var(--border-color); padding:.5rem .8rem; }
.markdown-body th:last-child,.markdown-body td:last-child { border-right:none; }
.markdown-body tr:last-child td { border-bottom:none; }
.markdown-body th { background:var(--bg-elevated); font-weight:700; text-align:left; }
.markdown-body hr { border:none; border-top:1px solid var(--border-color); margin:1rem 0; }

/* Dropdowns generosos */
.dd { position:relative; }
.dd-btn { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border-color); background:var(--bg-elevated); color:var(--text-main); border-radius:var(--radius-sm); padding:.5rem .85rem; font-size:.83rem; font-weight:500; cursor:pointer; transition:border-color .2s, background-color .2s; min-width:130px; justify-content:space-between; }
.dd-btn:hover { border-color:var(--border-hover); }
.dd-menu { position:absolute; top:calc(100% + 10px); left:0; z-index:90; min-width:230px; border-radius:var(--radius-md); padding:.55rem; box-shadow:0 30px 70px -16px var(--shadow), 0 0 0 1px var(--border-color); background:var(--bg-glass); backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6); border:1px solid var(--border-color); animation:ddIn .2s var(--ease-spring) both; transform-origin:top left; }
@keyframes ddIn { from{opacity:0;transform:translateY(-8px) scale(.95)} to{opacity:1;transform:none} }
.dd-item { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; padding:.62rem .8rem; border-radius:9px; font-size:.85rem; color:var(--text-main); cursor:pointer; transition:background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.dd-item:hover { background:var(--accent-soft); color:var(--accent); transform:translateX(2px); }
.dd-title { font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--text-faint); padding:.55rem .8rem .4rem; }

/* Vistas + fondo de chat */
.view { display:none; } .view.active { display:flex; }
/* Móvil: alturas reales (dvh), sin fugas horizontales, menús que no desbordan */
#appView { height:100vh; height:100dvh; }
 #authScreen { height:100vh; height:100dvh; }
body { overflow-x:hidden; }
html { -webkit-text-size-adjust:100%; }
.dd-menu { max-width:calc(100vw - 1.25rem); }
#inputArea { padding-bottom:calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
#sidebar { padding-bottom:env(safe-area-inset-bottom, 0px); }
main.wp-grid { position:relative; }
main.wp-grid::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-image:radial-gradient(var(--border-hover) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 80%, transparent); mask-image:linear-gradient(180deg, transparent, #000 30%, #000 80%, transparent); }
.wp-glow #chatContainer { background:radial-gradient(640px 340px at 50% 0%, var(--accent-soft), transparent 70%); }
.bubble-flat .assistant-bubble { border:none !important; background:transparent !important; padding:4px 0 !important; }
.chat-narrow { max-width:48rem !important; } .chat-wide { max-width:56rem !important; }
html.hc { --text-muted:color-mix(in srgb, var(--text-main) 72%, var(--bg-main)); --text-faint:color-mix(in srgb, var(--text-main) 55%, var(--bg-main)); --border-color:rgba(160,175,210,.35); }

/* ============ Pulido adicional de interfaz ============ */
@media (min-width:768px) { #sidebar { position:relative; } }
#sidebar::after { content:''; position:absolute; top:0; right:-1px; bottom:0; width:1px; pointer-events:none;
    background:linear-gradient(180deg, transparent, var(--border-hover) 20%, var(--border-hover) 80%, transparent); opacity:.6; }
#sidebar > div, #sidebar aside { scrollbar-gutter:stable; }
#secPinned, #secFolders, #secRecent { transition:border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }
#secPinned:hover, #secFolders:hover, #secRecent:hover { border-color:var(--border-hover); }
#pinnedList > div, #recentList > div, #foldersList > div { transition:background-color var(--dur-fast) ease, box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
#pinnedList > div:hover, #recentList > div:hover, #foldersList > .group:hover { transform:translateX(1px); }
header.glass { z-index:20; }
.assistant-bubble { transition:box-shadow .25s ease, transform .25s ease; }
.assistant-bubble:hover { box-shadow:var(--depth-2); }
img[src="logo.png"] { -webkit-user-drag:none; user-select:none; }
::selection { background:var(--accent-soft); color:var(--text-main); }

/* Botón enviar: elevación + glow al hover, recuperación elástica al pulsar */
#sendBtn { transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out), filter var(--dur-fast) ease; }
#sendBtn:hover { transform:translateY(-2px); filter:brightness(1.1); box-shadow:0 1px 0 rgba(255,255,255,.26) inset, 0 16px 30px -10px color-mix(in srgb, var(--accent) 65%, transparent); }
#sendBtn:active { transform:translateY(0) scale(.9); }

/* Píldora de modelo y botones del composer: leve elevación al hover */
#modelPill, #userInput ~ div button { transition:transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
#modelPill:hover { border-color:var(--border-hover) !important; color:var(--text-main) !important; transform:translateY(-1px); }

/* Sombra ligera y foco elegante para el título del chat en edición */
#chatTitleInput:focus { box-shadow:0 0 0 3px var(--accent-soft); }

/* Toasts: entrada desde abajo con leve escala + blur; salida controlada por Tailwind .hidden */
#toast { transform-origin:bottom center; box-shadow:var(--depth-3); }
#toast:not(.hidden) { animation:toastIn .38s var(--ease-spring) both; }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,14px) scale(.94); filter:blur(3px); } to { opacity:1; transform:translate(-50%,0) scale(1); filter:blur(0); } }

/* Modales: overlay + panel con misma coreografía de entrada en todo el sistema */
.view.active > .absolute.inset-0 { animation:overlayIn .3s ease both; }
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }

/* Loader: anillo giratorio sutil detrás del logo */
#loader .core-ring--1, #loader .core-ring--2 { border-color:var(--border-hover); }