/* ============================================================
   GloxPin — design system + shell (liquid glass)
   ============================================================ */

/* ---- Tokens ---------------------------------------------- */
/* Base CÁLIDA (29/07) — portada tal cual de la landing oficial GLOX AI.
   El negro no es azul-gris: es negro con undertone plum (#0f0a0d) y los
   blancos del vidrio están tintados en cálido (255,246,242 / 255,240,234).
   Esa diferencia mínima es TODA la diferencia entre "app apagada y fría"
   y "app viva". Los alphas son los que ya tenía la app — solo cambia el
   tinte del blanco, no la transparencia. */
:root {
  --bg: #0f0a0d;
  --ink: #f8f2ef;
  --ink-dim: rgba(248, 242, 239, .62);
  --ink-faint: rgba(248, 242, 239, .38);

  --glass: rgba(255, 246, 242, .07);
  --glass-strong: rgba(255, 246, 242, .11);
  --edge: rgba(255, 240, 234, .14);
  --edge-hi: rgba(255, 240, 234, .28);

  /* Estado ESTÁTICO inicial = violeta GLOX. A partir de acá manda el
     paletteCycle de 22s (ver más abajo): estos valores son el fallback
     para navegadores sin @property y el punto 0% del ciclo. */
  --accent: #ab8dff;
  --accent-2: #e6c2ff;
  --accent-deep: #9a5cf0;
  --accent-soft: rgba(170, 130, 255, .17);
  --accent-glow: rgba(185, 120, 240, .46);
  --bubble-me: rgba(171, 141, 255, .22);

  --blob-1: #6e3a80;
  --blob-2: #4a3a86;
  --blob-3: #93395f;
  --blob-op: .55;

  --danger: #ff6b7d;
  --ok: #57d9a3;

  --radius-card: 22px;
  --radius-panel: 28px;
  --radius-pill: 999px;

  --font-sans: -apple-system, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", monospace;

  --ease: cubic-bezier(.2, .8, .2, 1);

  --list-w: 380px;
  --rail-w: 76px;
  --tabbar-h: 64px;
}

/* La burbuja propia sigue al acento sola: donde hay color-mix la derivamos
   del --accent vivo (así cicla), y donde no, queda el violeta estático de
   arriba. Un solo token, cero JS. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --bubble-me: color-mix(in srgb, var(--accent) 24%, transparent); }
}

/* Vibe "Vivo": el ciclo de paleta ya pisa cualquier --accent/--blob que
   declaremos acá (una animación gana siempre sobre las declaraciones
   normales), así que overridearlos sería código muerto. Lo único que
   distingue a Vivo hoy es la INTENSIDAD del ambiente. */
html[data-vibe="vivo"] {
  --blob-op: .62;
}

/* ---- Ciclo de paleta (29/07) ------------------------------
   Ciclo calcado de la landing gloxai; kill-switch: html.no-paletteanim.
   Registramos los colores con @property para que INTERPOLEN de verdad
   (sin @property un custom property es un string y el navegador salta
   de tono en tono, en escalones feos). Lo ÚNICO que se anima es el
   COLOR de unas variables: los blobs siguen siendo radial-gradient
   estáticos, sin filter, sin reflow — el costo por frame es pintar,
   no recalcular los backdrop-filter. */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #ab8dff; }
@property --accent-2 { syntax: '<color>'; inherits: true; initial-value: #e6c2ff; }
@property --accent-deep { syntax: '<color>'; inherits: true; initial-value: #9a5cf0; }
@property --accent-soft { syntax: '<color>'; inherits: true; initial-value: rgba(170, 130, 255, .17); }
@property --accent-glow { syntax: '<color>'; inherits: true; initial-value: rgba(185, 120, 240, .46); }
@property --blob-1 { syntax: '<color>'; inherits: true; initial-value: #6e3a80; }
@property --blob-2 { syntax: '<color>'; inherits: true; initial-value: #4a3a86; }
@property --blob-3 { syntax: '<color>'; inherits: true; initial-value: #93395f; }

:root { animation: paletteCycle 22s ease-in-out infinite; }

@keyframes paletteCycle {
  0%, 100% { /* violeta */    --accent: #ab8dff; --accent-2: #e6c2ff; --accent-deep: #9a5cf0; --accent-soft: rgba(170, 130, 255, .17); --accent-glow: rgba(185, 120, 240, .46); --blob-1: #6e3a80; --blob-2: #4a3a86; --blob-3: #93395f; }
  10%      { /* fucsia */     --accent: #f47ce0; --accent-2: #ffc6f2; --accent-deep: #c94db8; --accent-soft: rgba(230, 110, 210, .17); --accent-glow: rgba(240, 100, 205, .46); --blob-1: #8f3574; --blob-2: #6e3a80; --blob-3: #a03b52; }
  20%      { /* coral */      --accent: #ff8ea6; --accent-2: #ffccd6; --accent-deep: #e05270; --accent-soft: rgba(255, 140, 165, .17); --accent-glow: rgba(255, 115, 145, .46); --blob-1: #a03b52; --blob-2: #8f3574; --blob-3: #a06636; }
  30%      { /* naranja */    --accent: #ff9d6b; --accent-2: #ffd0ae; --accent-deep: #e56a2a; --accent-soft: rgba(255, 150, 90, .17); --accent-glow: rgba(255, 130, 70, .46); --blob-1: #a0522e; --blob-2: #a03b52; --blob-3: #8a6a2e; }
  40%      { /* dorado */     --accent: #ffc46b; --accent-2: #ffe3ac; --accent-deep: #e59a1a; --accent-soft: rgba(255, 190, 90, .17); --accent-glow: rgba(255, 175, 70, .46); --blob-1: #a06636; --blob-2: #8a6a2e; --blob-3: #4a7e2e; }
  50%      { /* verde lima */ --accent: #9be070; --accent-2: #d8ffb8; --accent-deep: #5fb03a; --accent-soft: rgba(150, 220, 110, .16); --accent-glow: rgba(130, 220, 90, .42); --blob-1: #4a7e2e; --blob-2: #6a8a2e; --blob-3: #a06636; }
  60%      { /* esmeralda */  --accent: #4fe0a0; --accent-2: #b8ffe0; --accent-deep: #23b06a; --accent-soft: rgba(80, 220, 160, .16); --accent-glow: rgba(70, 220, 150, .42); --blob-1: #2e7e5a; --blob-2: #4a7e2e; --blob-3: #1e5a68; }
  70%      { /* turquesa */   --accent: #4fe0d8; --accent-2: #b8fff4; --accent-deep: #23a6b0; --accent-soft: rgba(80, 220, 215, .16); --accent-glow: rgba(70, 215, 220, .42); --blob-1: #1e5a68; --blob-2: #2e7e5a; --blob-3: #26417e; }
  80%      { /* cian */       --accent: #5cc8ff; --accent-2: #bfe8ff; --accent-deep: #2385ea; --accent-soft: rgba(90, 200, 255, .16); --accent-glow: rgba(70, 180, 255, .42); --blob-1: #26417e; --blob-2: #1e5a68; --blob-3: #4a3a86; }
  90%      { /* índigo */     --accent: #8b9cff; --accent-2: #cdd4ff; --accent-deep: #6a6cff; --accent-soft: rgba(139, 156, 255, .16); --accent-glow: rgba(120, 130, 255, .44); --blob-1: #4a3a86; --blob-2: #26417e; --blob-3: #8f3574; }
}

/* Guardas OBLIGATORIAS del ciclo: quien pidió menos movimiento no lo ve, y
   sin @property (js/app.js pone la clase) queda el violeta estático — mil
   veces mejor que ver los colores saltar en escalones. */
@media (prefers-reduced-motion: reduce) {
  :root { animation: none; }
}
html.no-paletteanim { animation: none !important; }

/* ---- Reset ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

button { font-family: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
::selection { background: var(--accent-soft); }

:focus-visible {
  outline: 2px solid var(--edge-hi);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* ---- Ambient blobs --------------------------------------- */
.amb {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Blobs como gradientes radiales pre-difuminados: mismo look que blur(90px)
   pero costo de render ~0 — un blur animado detrás de superficies con
   backdrop-filter obliga a recalcular TODOS los vidrios en cada frame y
   congela la app en GPUs débiles o render por software. NO volver a filter. */
.amb i {
  position: absolute;
  display: block;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  opacity: var(--blob-op);
}
.amb i:nth-child(1) { background: radial-gradient(closest-side, var(--blob-1) 0%, transparent 72%); top: -200px; left: -170px; }
.amb i:nth-child(2) { background: radial-gradient(closest-side, var(--blob-2) 0%, transparent 72%); bottom: -240px; right: -190px; }
.amb i:nth-child(3) { background: radial-gradient(closest-side, var(--blob-3) 0%, transparent 72%); top: 36%; left: 38%; }

/* ---- App shell ------------------------------------------- */
#app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "main" "tab";
}

#pane-list {
  grid-area: list;
  display: none;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
#pane-main {
  grid-area: main;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
#tabbar { grid-area: tab; }

/* ---- Tabbar (mobile: bottom bar) ------------------------- */
#tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-top: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-dim);
  padding: 6px 4px;
  border-radius: 14px;
  transition: color .2s var(--ease), transform .12s var(--ease), background .2s var(--ease);
}
.tab svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.tab-label { font-size: 11px; letter-spacing: .01em; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent); }
.tab:active { transform: scale(.94); }
.tab:focus-visible { outline: 2px solid var(--edge-hi); outline-offset: 2px; }

#app.tabbar-hidden #tabbar { display: none; }

@media (max-width: 899px) {
  #app.tabbar-hidden {
    grid-template-rows: 1fr;
    grid-template-areas: "main";
  }
}

/* ---- Desktop layout (>= 900px) --------------------------- */
@media (min-width: 900px) {
  #app {
    grid-template-columns: var(--rail-w) var(--list-w) 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "tab list main";
  }
  #pane-list {
    display: block;
    border-right: 1px solid var(--edge);
    background: rgba(255, 255, 255, .02);
  }
  #tabbar {
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    width: var(--rail-w);
    padding: 18px 10px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 0;
    border-right: 1px solid var(--edge);
  }
  .tab {
    flex: 0 0 auto;
    width: 100%;
    padding: 12px 4px;
    border-radius: 16px;
  }
  .tab-label { font-size: 10px; }
  /* Glow tecnológico #2: el tab activo del rail se enciende con el acento
     del momento. Sombra fija; solo el color de la variable cicla. */
  .tab.active { background: var(--accent-soft); box-shadow: 0 0 24px -8px var(--accent-glow); }

  #app.tabbar-hidden {
    grid-template-columns: 0 var(--list-w) 1fr;
  }

  /* Full-screen routes (onboarding, call): main pane takes over */
  #app.route-solo {
    grid-template-columns: 0 0 1fr;
  }
  #app.route-solo #pane-list { display: none; }
}

/* ---- Glass utilities ------------------------------------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--edge);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  border-radius: var(--radius-card);
}
.glass-strong {
  background: var(--glass-strong);
  border: 1px solid var(--edge-hi);
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  border-radius: var(--radius-card);
}

/* ⭐ Signature effect: a frosted panel that opens */
.sheet {
  background: var(--glass-strong);
  border: 1px solid var(--edge);
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    0 24px 60px rgba(0, 0, 0, .42);
  border-radius: var(--radius-panel);
  animation: sheet-in .28s var(--ease) both;
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Pills & buttons ------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--edge);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.pill:hover { background: var(--glass-strong); border-color: var(--edge-hi); }
.pill:active { transform: scale(.97); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--edge);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease), filter .2s var(--ease);
}
.btn:hover { background: var(--glass-strong); border-color: var(--edge-hi); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--edge-hi); outline-offset: 2px; }

.btn-primary {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.btn-primary:hover { filter: brightness(1.12); }

.btn-danger {
  background: rgba(255, 107, 125, .16);
  border-color: rgba(255, 107, 125, .5);
}
.btn-danger:hover { filter: brightness(1.12); }

/* ---- Avatar ---------------------------------------------- */
.avatar {
  --sz: 44px;
  width: var(--sz);
  height: var(--sz);
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--edge-hi);
  color: var(--ink);
  font-weight: 600;
  font-size: calc(var(--sz) * .36);
  letter-spacing: .02em;
  overflow: visible;
  position: relative;
}

/* ---- Badge ----------------------------------------------- */
.badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .badge { animation: badge-pop .3s var(--ease) both; }
}
@keyframes badge-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---- Toast ----------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  max-width: min(90vw, 420px);
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--edge-hi);
  color: var(--ink);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 16px 40px rgba(0, 0, 0, .4);
  font-size: 14px;
  text-align: center;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) {
  .toast { bottom: 24px; }
}

/* ---- Screen stubs (foundation placeholders) -------------- */
.stub-wrap {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
}
.stub-wrap--list { padding: 16px; }

.screen-stub {
  width: min(100%, 420px);
  padding: 34px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.stub-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
}
.stub-title {
  font-size: 24px;
  font-weight: 650;
  margin: 6px 0 0;
  line-height: 1.15;
}
.stub-sub {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}
.stub-pin {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: .06em;
  color: var(--ink);
  margin: 0;
}
.stub-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- Reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .amb i, .sheet, .badge { animation: none !important; }
}

/* ---- Badge de solicitudes en el tabbar (18/07) ------------- */
.tab { position: relative; }
.tab-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 0 var(--accent-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .tab-badge:not([hidden]) { animation: badge-pulse 1.6s var(--ease) 6; }
}
@keyframes badge-pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (min-width: 900px) {
  .tab-badge { right: 8px; top: 6px; }
}

/* ---- Lenguaje "fantasma" (18/07 tarde, D en 00 §12.5) -------
   Aparecer/desaparecer desde el desenfoque. SIEMPRE one-shot
   (jamás infinito — lección de performance). */
.ghost-in { animation: ghost-in .38s var(--ease) both; }
@keyframes ghost-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(8px) scale(.985); }
  60% { filter: blur(2px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
.ghost-out { animation: ghost-out .3s var(--ease) both; pointer-events: none; }
@keyframes ghost-out {
  from { opacity: 1; filter: blur(0); transform: scale(1); }
  to { opacity: 0; filter: blur(12px); transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .ghost-in, .ghost-out { animation: none !important; }
}

/* ---- Capa ESPACIAL (18/07 tarde — feedback de Alexis) ------
   Mas profundidad, menos "cuadrado". Todo estatico (perf). */
/* --accent-2 ya vive arriba con los demás tokens (entra al ciclo de paleta);
   acá queda solo el degradé, que al referenciar las variables animadas cicla
   solo. El override de Vivo se fue: la animación lo pisaba igual. */
:root {
  --grad-accent: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* Wash de fondo: antes eran dos azules fríos. Ahora plum + vino, la misma
   temperatura del --bg. Se dejan FIJOS a propósito: el movimiento de color
   lo ponen los blobs .amb (que sí ciclan) y dos washes ciclando encima
   además de los blobs terminaba lavando el negro. */
body {
  background:
    radial-gradient(130% 90% at 75% -10%, rgba(154, 92, 240, .13) 0%, transparent 55%),
    radial-gradient(100% 80% at 10% 110%, rgba(147, 57, 95, .10) 0%, transparent 55%),
    var(--bg);
}

/* ---- Grano de película (29/07, calcado de la landing) --------
   Un ruido SVG inline al 5% en overlay: es lo que le saca el plástico a
   los degradés y le da la textura "tecnológica". Costo ~0 — se pinta una
   sola vez, no se anima nunca y no toca ningún backdrop-filter.
   z-index 310 porque acá el techo es el #aurora (300): el grano va
   arriba de TODO, incluidos modales y hojas. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 310;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Glow tecnológico #1: el botón primario tira la luz del acento vivo, así
   que el halo cambia de color junto con el ciclo. Sombra ESTÁTICA (nunca
   animada): lo único que se mueve es el color de la variable. */
.btn-primary {
  background: var(--grad-accent) !important;
  color: var(--bg) !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 4px 18px -6px var(--accent-glow);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 26px -6px var(--accent-glow); }

.pill:hover, .btn:hover { border-color: var(--edge-hi); }

#pane-list { border-right-color: rgba(255, 255, 255, .08); }

.avatar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 14px -6px rgba(0, 0, 0, .5); }

/* ---- AURORA "GloxPin está trabajando" (estilo Gemini) ----------
   Anillo iridiscente que envuelve la app SOLO mientras hay
   actividad (Kai pensando, traduccion, envios). El disco conic
   se pinta UNA vez y se rota por transform (capa compuesta,
   barato); vive arriba del vidrio asi que no invalida ningun
   backdrop-filter. Acotado por JS — jamas queda girando solo. */
#aurora {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease);
  overflow: hidden;
}
#aurora.on { opacity: .5; }
.aurora-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200vmax;
  height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(122, 217, 255, .55), rgba(167, 139, 250, .5), rgba(255, 122, 217, .45),
    rgba(87, 217, 163, .5), rgba(255, 209, 122, .4), rgba(122, 217, 255, .55));
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 88%);
  mask: radial-gradient(closest-side, transparent 58%, #000 88%);
  mix-blend-mode: screen;
}
#aurora.on .aurora-disc { animation: aurora-spin 5.5s linear infinite; }
@keyframes aurora-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #aurora.on .aurora-disc { animation: none; }
  #aurora.on { opacity: .3; }
}

/* ---- Disolucion de mensajes (estilo Telegram) -------------- */
.dissolve {
  animation: dissolve .55s var(--ease) both;
  pointer-events: none;
}
@keyframes dissolve {
  0% { opacity: 1; filter: blur(0); transform: scale(1); }
  35% { opacity: .92; filter: blur(2px); transform: scale(1.045); }
  100% { opacity: 0; filter: blur(18px); transform: scale(1.14) translateY(-12px); }
}
.spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  animation: spark-fly .62s var(--ease) both;
}
@keyframes spark-fly {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx, 24px), var(--dy, -34px)) scale(.15); }
}
@media (prefers-reduced-motion: reduce) {
  .dissolve { animation: ghost-out .2s both; }
  .spark { display: none; }
}

/* ---- Sello DEMO (30/07) --------------------------------------
   La maqueta y la app real se parecen demasiado: este sello evita
   que alguien crea que su cuenta de demo es real. */
#demo-flag {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px calc(6px + env(safe-area-inset-top, 0px));
  background: rgba(255, 200, 87, .16);
  border-bottom: 1px solid rgba(255, 200, 87, .38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffd98a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}
#demo-flag a { color: #ffd98a; text-decoration: underline; text-underline-offset: 2px; }
body.has-demo-flag #app { padding-top: 30px; }