/* ============================================================
   STARSEED · ASTRAURA (Exocórtex global) — estilos
   Mismo lenguaje del agente del Café (cristal líquido + nouveau)
   elevado: orbe-símbolo, morfología orgánica, tarjetas de enlace.
   Prefijo .ssx- para no colisionar con .ssa- del Café.
   ============================================================ */

/* ---------- Botón flotante (orbe) ----------
   El orbe se ancla a UNA de las 4 esquinas (clases .corner-*). Las variables
   --ssx-fab-x / --ssx-fab-y las escribe JS durante el arrastre para posicionar
   el orbe con transform; al soltar, snap a la esquina más cercana. */
.ssx-fab{
  position:fixed; right:22px; bottom:22px; z-index:1200;
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; cursor:grab; border:0;
  touch-action:none; -webkit-user-select:none; user-select:none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.22), transparent 42%),
    conic-gradient(from 210deg, #9FE870, #6FE6D6, #7FB8FF, #C9A8FF, #FFC247, #FF8A5C, #9FE870);
  box-shadow:0 10px 34px rgba(0,0,0,.45), 0 0 26px rgba(159,232,112,.35);
  transition:transform .35s var(--ease-elastic), border-radius .6s var(--ease-organic), box-shadow .3s, left .34s var(--ease-glide,cubic-bezier(.16,1,.3,1)), right .34s var(--ease-glide,cubic-bezier(.16,1,.3,1)), top .34s var(--ease-glide,cubic-bezier(.16,1,.3,1)), bottom .34s var(--ease-glide,cubic-bezier(.16,1,.3,1));
  animation:ssx-breathe var(--breath,5.6s) var(--ease-soft,ease-in-out) infinite;
}
/* Anclaje por esquinas (posición persistida en localStorage). */
.ssx-fab.corner-br{ right:22px; bottom:22px; left:auto; top:auto; }
.ssx-fab.corner-bl{ left:22px; bottom:22px; right:auto; top:auto; }
.ssx-fab.corner-tr{ right:22px; top:calc(env(safe-area-inset-top,0px) + 18px); left:auto; bottom:auto; }
.ssx-fab.corner-tl{ left:22px; top:calc(env(safe-area-inset-top,0px) + 18px); right:auto; bottom:auto; }
/* Mientras se arrastra: sigue el puntero (posición absoluta vía JS) sin animación
   de transición para que no “persiga” al dedo, y con feedback de agarre. */
.ssx-fab.dragging{ cursor:grabbing; transition:none; animation:none; z-index:1300;
  left:var(--ssx-fab-x); top:var(--ssx-fab-y); right:auto; bottom:auto;
  transform:scale(1.08); box-shadow:0 20px 52px rgba(0,0,0,.55), 0 0 44px rgba(201,168,255,.55); }
/* Estado hablando/escuchando en el propio orbe (feedback ambiental). */
.ssx-fab.speaking{ box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb, var(--ambar,#F6A21E) 60%, transparent); }
/* Escuchando (Aurora activa por tap): halo verde ANIMADO que late para
   dejar claro que el micrófono está encendido; se apaga al parar. */
.ssx-fab.hearing{ box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb, var(--neon-lime,#9FE870) 60%, transparent); animation:ssx-hearing-halo 1.4s ease-in-out infinite; }
.ssx-fab.hearing .ping{ border-color:color-mix(in srgb, var(--neon-lime,#9FE870) 85%, transparent); animation-duration:1.6s; }
@keyframes ssx-hearing-halo{
  0%,100%{ box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 22px 0 color-mix(in srgb, var(--neon-lime,#9FE870) 55%, transparent); }
  50%{ box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 44px 10px color-mix(in srgb, var(--neon-lime,#9FE870) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce){ .ssx-fab.hearing{ animation:none; } }
.ssx-fab:hover{ transform:translateY(-4px) scale(1.06); border-radius:46% 54% 52% 48% / 52% 46% 54% 48%; box-shadow:0 16px 44px rgba(0,0,0,.5), 0 0 38px rgba(201,168,255,.5); }
.ssx-fab:active{ transform:scale(.96); }
.ssx-fab .core{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #16210f, #0d130e 70%);
  border:1px solid rgba(255,255,255,.25);
}
.ssx-fab .core img{ width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 0 6px rgba(159,232,112,.6)); }
.ssx-fab .ping{ position:absolute; inset:-4px; border-radius:inherit; border:1.5px solid rgba(159,232,112,.45); animation:ssx-ping 3.2s var(--ease-organic,ease-out) infinite; pointer-events:none; }
@keyframes ssx-ping{ 0%{transform:scale(.9);opacity:.9} 70%{transform:scale(1.35);opacity:0} 100%{opacity:0} }
@keyframes ssx-breathe{ 0%,100%{filter:saturate(1) brightness(1)} 50%{filter:saturate(1.15) brightness(1.07)} }
.ssx-fab .lbl{
  position:absolute; right:74px; top:50%; transform:translateY(-50%) translateX(8px);
  white-space:nowrap; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink,#eef3e6); background:var(--glass-strong,rgba(28,40,28,.8)); border:1px solid var(--stroke,rgba(159,232,112,.2));
  padding:7px 12px; border-radius:999px; opacity:0; pointer-events:none; transition:.3s var(--ease-soft);
  backdrop-filter:blur(12px);
}
.ssx-fab:hover .lbl{ opacity:1; transform:translateY(-50%) translateX(0); }
/* Si el orbe se ancla a la izquierda, la etiqueta aparece a su derecha. */
.ssx-fab.corner-bl .lbl, .ssx-fab.corner-tl .lbl{ right:auto; left:74px; transform:translateY(-50%) translateX(-8px); }
.ssx-fab.corner-bl:hover .lbl, .ssx-fab.corner-tl:hover .lbl{ transform:translateY(-50%) translateX(0); }
/* Oculta la etiqueta mientras se arrastra para no estorbar. */
.ssx-fab.dragging .lbl{ opacity:0 !important; }

/* ---------- Capa + panel ----------
   El panel se ANCLA abajo (junto al orbe) y crece hacia arriba, pero su altura
   queda SIEMPRE limitada por la ventana visible menos el área segura superior
   (notch / barra de estado). Usamos 100dvh (viewport dinámico → respeta el
   teclado en móvil) con respaldo a 100vh. Así nunca se recorta por arriba; el
   historial (.ssx-body) hace scroll interno. */
.ssx-wrap{ position:fixed; inset:0; z-index:1210; pointer-events:none; }
.ssx-scrim{ position:absolute; inset:0; background:radial-gradient(120% 90% at 80% 100%, rgba(12,19,14,.30), rgba(6,9,7,.52)); backdrop-filter:blur(6px) saturate(1.05); -webkit-backdrop-filter:blur(6px) saturate(1.05); opacity:0; transition:opacity .35s var(--ease-soft,ease); }
.ssx-wrap.open .ssx-scrim{ opacity:1; pointer-events:auto; }
.ssx-panel{
  --ssx-gap-bottom:98px;
  --ssx-safe-top:calc(env(safe-area-inset-top, 0px) + 14px);
  position:absolute; right:22px; bottom:var(--ssx-gap-bottom);
  width:min(432px, calc(100vw - 32px));
  height:680px;
  max-height:calc(100vh - var(--ssx-gap-bottom) - var(--ssx-safe-top));
  max-height:calc(100dvh - var(--ssx-gap-bottom) - var(--ssx-safe-top));
  display:flex; flex-direction:column; overflow:hidden; pointer-events:none; visibility:hidden;
  background:
    radial-gradient(140% 80% at 18% -8%, color-mix(in srgb, var(--neon-lime,#9FE870) 16%, transparent), transparent 60%),
    radial-gradient(150% 90% at 110% 0%, color-mix(in srgb, var(--neon-lav,#C9A8FF) 15%, transparent), transparent 55%),
    linear-gradient(180deg, var(--glass-strong,rgba(26,38,28,.90)), var(--glass,rgba(17,26,19,.86)));
  border:1px solid var(--stroke,rgba(159,232,112,.24)); border-radius:28px;
  box-shadow:0 36px 90px rgba(0,0,0,.58), 0 6px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(159,232,112,.04);
  backdrop-filter:blur(30px) saturate(1.3); -webkit-backdrop-filter:blur(30px) saturate(1.3);
  transform:translateY(26px) scale(.965); opacity:0; transform-origin:bottom right;
  transition:transform .42s var(--ease-glide, cubic-bezier(.16,1,.3,1)), opacity .32s ease;
}
/* filo de luz superior (aurora) */
.ssx-panel::before{ content:""; position:absolute; inset:0 0 auto; height:2px; border-radius:28px 28px 0 0;
  background:linear-gradient(90deg, transparent, var(--neon-lime,#9FE870), var(--neon-cyan,#6FE6D6), var(--neon-lav,#C9A8FF), transparent); opacity:.7; pointer-events:none; }
.ssx-wrap.open .ssx-panel{ transform:none; opacity:1; pointer-events:auto; visibility:visible; }

/* En pantallas pequeñas anclamos por ARRIBA y por ABAJO a la vez: el borde
   superior se fija bajo el área segura y nunca puede salirse de la pantalla. */
@media (max-width:560px){
  .ssx-panel{
    --ssx-gap-bottom:84px;
    right:10px; left:10px; width:auto; height:auto;
    top:max(12px, var(--ssx-safe-top));
    max-height:none;
    border-radius:24px;
    transform-origin:bottom center;
  }
}
/* Viewports muy bajos (apaisado / ventanas reducidas): margen mínimo y todo el
   contenido accesible por scroll interno. */
@media (max-height:560px){
  .ssx-panel{ --ssx-gap-bottom:76px; top:max(8px, var(--ssx-safe-top)); max-height:none; }
}

/* ---------- Cabecera ---------- */
.ssx-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 15px 13px; flex:none;
  border-bottom:1px solid var(--stroke-soft,rgba(255,255,255,.09));
  background:linear-gradient(120deg, color-mix(in srgb, var(--neon-lime,#9FE870) 12%, transparent), color-mix(in srgb, var(--neon-cyan,#6FE6D6) 7%, transparent) 48%, color-mix(in srgb, var(--neon-lav,#C9A8FF) 12%, transparent));
  position:relative; z-index:2; }
.ssx-id{ display:flex; align-items:center; gap:12px; min-width:0; }
.ssx-orb{ width:40px; height:40px; border-radius:50%; flex:none; position:relative; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 35% 30%, #1f2e16, #0b110c); border:1px solid var(--stroke,rgba(159,232,112,.34)); box-shadow:0 0 18px rgba(159,232,112,.4), inset 0 0 10px rgba(0,0,0,.4); }
.ssx-orb::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--neon-cyan,#6FE6D6) 45%, transparent); opacity:0; animation:ssx-haloPulse 3.4s var(--ease-soft,ease-in-out) infinite; pointer-events:none; }
@keyframes ssx-haloPulse{ 0%,100%{ transform:scale(.96); opacity:.0 } 45%{ transform:scale(1.12); opacity:.5 } }
.ssx-orb img{ width:74%; height:74%; object-fit:contain; filter:drop-shadow(0 0 5px rgba(159,232,112,.55)); }
.ssx-id .ssx-meta{ min-width:0; }
.ssx-id b{ font-family:var(--serif,serif); font-size:16.5px; display:block; line-height:1.05; letter-spacing:.01em; }
.ssx-id small{ font-size:10px; color:var(--ink-mute,#7e8a74); font-family:var(--mono,monospace); letter-spacing:.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:5px; margin-top:2px; }
.ssx-id small::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--neon-lime,#9FE870); box-shadow:0 0 8px var(--neon-lime,#9FE870); animation:ssx-live 2.4s ease-in-out infinite; }
@keyframes ssx-live{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
.ssx-head .acts{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.ssx-ico{ width:33px; height:33px; border-radius:11px; display:grid; place-items:center; background:var(--glass,rgba(28,40,28,.46)); border:1px solid var(--stroke-soft,rgba(255,255,255,.09)); color:var(--ink-soft,#aeb9a4); font-size:14px; cursor:pointer; transition:transform .16s var(--ease-soft,ease), background .18s, border-color .18s, color .18s; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ssx-ico:hover{ color:var(--ink,#eef3e6); transform:translateY(-1.5px); background:color-mix(in srgb, var(--neon-lime,#9FE870) 14%, var(--glass,rgba(28,40,28,.46))); border-color:var(--stroke,rgba(159,232,112,.4)); box-shadow:0 5px 16px rgba(0,0,0,.3); }
.ssx-ico:active{ transform:scale(.93); }

/* ---------- Mensajes ---------- */
.ssx-body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:18px 15px 16px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--neon-lime,#9FE870) 35%, transparent) transparent; }
.ssx-body::-webkit-scrollbar{ width:8px; }
.ssx-body::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--neon-lime,#9FE870) 26%, transparent); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.ssx-body::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--neon-cyan,#6FE6D6) 40%, transparent); background-clip:padding-box; }
.ssx-msg{ max-width:86%; padding:11px 15px; border-radius:20px; font-size:13.5px; line-height:1.58; animation:ssx-in .38s var(--ease-glide) both; word-wrap:break-word; }
.ssx-msg.user{ align-self:flex-end; background:linear-gradient(135deg, color-mix(in srgb, var(--ambar,#F6A21E) 82%, transparent), color-mix(in srgb, var(--terracota,#C05C3B) 88%, transparent)); color:#fff; border-bottom-right-radius:7px; box-shadow:0 8px 22px rgba(192,92,59,.34), inset 0 1px 0 rgba(255,255,255,.18); }
.ssx-msg.bot{ align-self:flex-start; background:linear-gradient(180deg, color-mix(in srgb, var(--glass-strong,rgba(34,48,34,.62)) 92%, transparent), var(--glass,rgba(24,36,26,.58))); border:1px solid var(--stroke-soft,rgba(255,255,255,.1)); border-bottom-left-radius:7px; color:var(--ink,#eef3e6); box-shadow:0 4px 16px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06); }
.ssx-msg.bot p{ margin:0 0 6px; } .ssx-msg.bot p:last-child{ margin:0; }
.ssx-msg.bot ul{ margin:4px 0 6px 18px; } .ssx-msg.bot li{ margin:3px 0; }
.ssx-msg.bot a{ color:var(--neon-cyan,#6FE6D6); text-decoration:underline; text-underline-offset:2px; }
.ssx-msg.sys{ align-self:center; font-size:11px; color:var(--ink-mute,#7e8a74); background:none; padding:2px 8px; font-family:var(--mono); }
@keyframes ssx-in{ from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none} }

/* typing */
.ssx-typing{ display:inline-flex; gap:5px; padding:13px 16px; }
.ssx-typing i{ width:7px; height:7px; border-radius:50%; background:var(--neon-lime,#9FE870); animation:ssx-dot 1.2s infinite; }
.ssx-typing i:nth-child(2){ animation-delay:.18s; background:var(--neon-cyan,#6FE6D6); }
.ssx-typing i:nth-child(3){ animation-delay:.36s; background:var(--neon-lav,#C9A8FF); }
@keyframes ssx-dot{ 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-5px); opacity:1 } }

/* ---------- Tarjetas de enlace/archivo ---------- */
.ssx-cards{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.ssx-card{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:14px; background:var(--glass-strong,rgba(34,48,34,.6));
  border:1px solid var(--stroke,rgba(159,232,112,.18)); transition:.2s var(--ease-soft); text-decoration:none !important; }
.ssx-card:hover{ transform:translateX(3px); border-color:color-mix(in srgb, var(--neon-cyan,#6FE6D6) 55%, transparent); box-shadow:0 8px 22px rgba(0,0,0,.3); }
.ssx-card .ci{ width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; font-size:15px; background:color-mix(in srgb, var(--neon-lime,#9FE870) 14%, transparent); }
.ssx-card .ct{ flex:1; min-width:0; }
.ssx-card .ct b{ font-size:12.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink,#eef3e6); }
.ssx-card .ct span{ font-size:10.5px; color:var(--ink-mute,#7e8a74); font-family:var(--mono); }
.ssx-card .go{ font-size:13px; color:var(--neon-cyan,#6FE6D6); flex:none; }

/* ---------- Chips + input ---------- */
.ssx-foot{ flex:none; padding:11px 13px calc(13px + env(safe-area-inset-bottom, 0px)); position:relative; z-index:2;
  border-top:1px solid var(--stroke-soft,rgba(255,255,255,.09)); display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-0,#0d130e) 22%, transparent));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
/* línea de luz tenue sobre el pie */
.ssx-foot::before{ content:""; position:absolute; left:13px; right:13px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--neon-lime,#9FE870) 45%, transparent), transparent); opacity:.6; }
/* Chips: en una sola fila con desplazamiento horizontal para no empujar el alto. */
.ssx-chips{ display:flex; gap:7px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; mask-image:linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 14px), transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 14px), transparent); }
.ssx-chips::-webkit-scrollbar{ display:none; }
.ssx-chip{ flex:none; scroll-snap-align:start; white-space:nowrap; font-size:11.5px; padding:7px 12px; border-radius:999px; background:var(--glass,rgba(28,40,28,.5)); border:1px solid var(--stroke,rgba(159,232,112,.22)); color:var(--ink-soft,#aeb9a4); cursor:pointer; transition:transform .16s var(--ease-soft,ease), color .18s, border-color .18s, background .18s; }
.ssx-chip:hover{ color:#0d130e; border-color:transparent; background:linear-gradient(120deg, var(--neon-lime,#9FE870), var(--neon-cyan,#6FE6D6)); transform:translateY(-1.5px); box-shadow:0 6px 16px color-mix(in srgb, var(--neon-lime,#9FE870) 30%, transparent); }
.ssx-chip:active{ transform:scale(.95); }

/* ---------- Barra de reproducción de voz (Aurora) en la ventana de chat ----------
   Controles play/pausa/parar + ⏮/⏭ para leer las respuestas por frases. Se muestra
   siempre; refleja el estado del transporte (aparece “activa” cuando Aurora habla). */
.ssx-transport{ display:flex; align-items:center; gap:6px; padding:6px; border-radius:16px;
  background:color-mix(in srgb, var(--bg-0,#0d130e) 60%, transparent); border:1px solid var(--stroke-soft,rgba(255,255,255,.08)); }
.ssx-transport.active{ border-color:color-mix(in srgb, var(--ambar,#F6A21E) 45%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--ambar,#F6A21E) 12%, transparent); }
.ssx-tbtn{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:11px; cursor:pointer;
  background:var(--glass,rgba(28,40,28,.5)); border:1px solid var(--stroke-soft,rgba(255,255,255,.08)); color:var(--ink-soft,#aeb9a4);
  font-size:14px; transition:transform .15s var(--ease-soft,ease), background .18s, color .18s, border-color .18s; }
.ssx-tbtn:hover{ color:var(--ink,#eef3e6); background:color-mix(in srgb, var(--neon-lime,#9FE870) 14%, var(--glass,rgba(28,40,28,.5))); border-color:var(--stroke,rgba(159,232,112,.4)); transform:translateY(-1px); }
.ssx-tbtn:active{ transform:scale(.92); }
.ssx-tbtn.play{ color:#0d130e; background:linear-gradient(120deg, var(--neon-lime,#9FE870), var(--neon-cyan,#6FE6D6)); border-color:transparent; }
.ssx-tbtn.mic.on{ color:#0d130e; background:linear-gradient(135deg,var(--neon-lime,#9FE870),#7FB8FF); border-color:transparent; animation:aurora-pulse 1.4s ease-in-out infinite; }
.ssx-tstate{ flex:1 1 auto; min-width:0; font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute,#7e8a74); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; }

/* ---------- Accesos a todos los sistemas StarSeed (fila discreta) ---------- */
.ssx-sys{ display:flex; gap:7px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 14px), transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 14px), transparent); }
.ssx-sys::-webkit-scrollbar{ display:none; }
.ssx-syschip{ flex:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:11px; padding:6px 11px; border-radius:999px;
  background:var(--glass,rgba(28,40,28,.5)); border:1px solid var(--stroke-soft,rgba(255,255,255,.1)); color:var(--ink-soft,#aeb9a4);
  text-decoration:none !important; cursor:pointer; transition:transform .16s var(--ease-soft,ease), color .18s, border-color .18s, background .18s; }
.ssx-syschip .si{ font-size:12.5px; line-height:1; }
.ssx-syschip:hover{ color:#0d130e; border-color:transparent; background:linear-gradient(120deg, var(--neon-lav,#C9A8FF), var(--neon-cyan,#6FE6D6)); transform:translateY(-1.5px); box-shadow:0 6px 16px color-mix(in srgb, var(--neon-lav,#C9A8FF) 26%, transparent); }
.ssx-syschip:active{ transform:scale(.95); }
.ssx-inputrow{ display:flex; gap:9px; align-items:flex-end; padding:5px; border-radius:20px;
  background:color-mix(in srgb, var(--bg-0,#0d130e) 72%, transparent); border:1px solid var(--stroke-soft,rgba(255,255,255,.08));
  transition:border-color .2s, box-shadow .2s; }
.ssx-inputrow:focus-within{ border-color:color-mix(in srgb, var(--neon-lime,#9FE870) 55%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--neon-lime,#9FE870) 15%, transparent), inset 0 1px 0 rgba(255,255,255,.05); }
.ssx-input{ flex:1; resize:none; max-height:130px; padding:9px 6px 9px 11px; border-radius:14px; font-family:var(--sans,sans-serif); font-size:13.5px;
  background:transparent; color:var(--ink,#eef3e6); border:0; outline:none; transition:.2s; line-height:1.45; }
.ssx-input::placeholder{ color:var(--ink-mute,#7e8a74); }
.ssx-send{ width:42px; height:42px; border-radius:14px; flex:none; display:grid; place-items:center; font-size:15px; color:#fff; cursor:pointer; border:0;
  background:var(--grad-solar,linear-gradient(120deg,#F6A21E,#C05C3B)); box-shadow:0 7px 18px rgba(246,162,30,.4), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .2s var(--ease-elastic,cubic-bezier(.5,1.6,.4,1)), filter .2s; }
.ssx-send:hover{ transform:translateY(-2px) scale(1.05); filter:brightness(1.07); } .ssx-send:active{ transform:scale(.95); } .ssx-send:disabled{ opacity:.45; transform:none; box-shadow:none; cursor:not-allowed; }

/* ---------- Ajustes ---------- */
.ssx-settings{ position:absolute; inset:0; z-index:3; background:linear-gradient(180deg, var(--glass-strong,rgba(20,30,20,.97)), var(--bg-0,#0d130e)); padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  transform:translateY(100%); transition:transform .42s var(--ease-glide); border-radius:inherit; }
.ssx-settings.open{ transform:none; }
.ssx-settings h4{ font-family:var(--serif); font-size:17px; margin:0 0 4px; }
.ssx-settings .hint{ font-size:11.5px; color:var(--ink-mute); margin-bottom:14px; }
.ssx-set{ margin-bottom:14px; }
.ssx-set label{ font-size:11px; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-bottom:6px; }
.ssx-set input, .ssx-set select, .ssx-set textarea{ width:100%; padding:10px 12px; border-radius:12px; background:var(--bg-0,#0d130e); border:1px solid var(--stroke,rgba(159,232,112,.2)); color:var(--ink,#eef3e6); font-size:13px; font-family:var(--sans); }
.ssx-set input:focus, .ssx-set select:focus, .ssx-set textarea:focus{ border-color:var(--neon-lime); outline:none; }
.ssx-set .row{ display:flex; gap:8px; }
.ssx-save{ width:100%; padding:12px; border-radius:14px; font-weight:700; color:#fff; background:var(--grad-musgo,linear-gradient(135deg,#2D4A22,#5C7A4A)); margin-top:6px; transition:.2s; }
.ssx-save:hover{ filter:brightness(1.12); }
.ssx-mini-note{ font-size:11px; color:var(--ink-mute); margin-top:10px; line-height:1.5; }

@media (prefers-reduced-motion: reduce){
  .ssx-fab, .ssx-fab .ping, .ssx-orb::after, .ssx-id small::before, .ssx-tbtn.mic.on{ animation:none }
  .ssx-panel{ transition:opacity .2s ease } .ssx-msg{ animation:none }
  .ssx-fab{ transition:left .2s ease, right .2s ease, top .2s ease, bottom .2s ease }
}