/* ============================================================
   S1GNAL · modo barra — identidad Origin One
   ------------------------------------------------------------
   La voz vive en el marco de la página, no encima. Una barra en
   el borde inferior, siempre presente, que crece hacia arriba
   cuando hay conversación. Portada de la barra que estrenó
   S1gnal Dental; aquí viste el ámbar CRT de S1GNAL, que ya es
   la superficie oscura del motor — la rampa de LED no se toca.

   Se carga DESPUÉS de signal-widget.css y sólo actúa cuando el
   panel tiene la clase `as-bar`.
   ============================================================ */

.signal-panel.as-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto; max-width: none;
  height: auto; max-height: 33.333svh;

  display: flex;
  flex-direction: column;

  /* Superficie de la barra: la propia del motor. El CRT negro ES la
     identidad de S1GNAL, así que aquí no hay rampa que corregir. */
  --bar-ink: var(--sg-black);
  --bar-line: var(--sg-line);
  --bar-text: var(--sg-phosphor);
  --bar-soft: var(--sg-steel);

  background: var(--bar-ink);
  color: var(--bar-text);
  border: 0;
  border-top: 2px solid var(--sg-amber);
  border-radius: 0;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .45);
  transform-origin: bottom left;
}

.signal-panel.as-bar::before { display: none; }

/* Fuera del reposo: cabecera, chips y aviso no viven en la barra. */
.signal-panel.as-bar .panel-head,
.signal-panel.as-bar .chips,
.signal-panel.as-bar .notice { display: none; }

/* El CTA vive al final de la conversación: sólo se ve cuando la zona crece —
   ya hubo un turno, ya hay interés que cerrar. En reposo la barra no vende. */
.signal-panel.as-bar .panel-cta {
  margin: 0 28px 16px;
  height: auto;
  padding: 10px 0;
}

/* ---------- Zona que crece ---------- */
/* Nada de 0fr → 1fr: dentro de un flex de altura automática, 1fr resuelve
   contra el espacio disponible — que es cero — y la zona nunca abre. Se anima
   max-height, que sí funciona sin altura definida en el padre. */
.signal-panel.as-bar .sg-grow {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.2, .9, .3, 1);
}
.signal-panel.as-bar.has-talk .sg-grow { max-height: var(--grow-h, 33.333svh); }
.signal-panel.as-bar .sg-grow-inner { min-height: 0; }

.signal-panel.as-bar .conversation {
  height: auto;
  flex: 0 1 auto;
  padding: 26px 28px 10px;
  max-height: 20svh;
  overflow-y: auto;
  background: none;
  border: 0;
}
.signal-panel.as-bar .conversation .user-line {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--bar-text);
}
.signal-panel.as-bar .conversation .user-line b {
  display: block;
  font-family: var(--sg-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--bar-soft);
  font-weight: 500;
  margin-bottom: 4px;
}
.signal-panel.as-bar .conversation .speaker {
  font-family: var(--sg-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--sg-amber);
  margin-bottom: 4px;
}
.signal-panel.as-bar .conversation .message {
  margin: 0;
  padding-left: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--bar-text);
}

/* ---------- La fila ---------- */
/* Rejilla de tres columnas: invitación · ranura · acciones. Con los laterales
   al mismo peso (1fr) la ranura cae en el centro real de la barra.
   112 px de alto = altura del segmento × 4, la misma razón del segmento. */
.signal-panel.as-bar .sg-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  height: 112px;
  flex: 0 0 auto;
}
.signal-panel.as-bar .sg-hint {
  grid-area: 1 / 1;
  justify-self: stretch;
  min-width: 0;
  text-align: right;
  margin: 0;
  font-size: 16px;
  color: var(--bar-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.signal-panel.as-bar .sg-hint b { color: var(--bar-text); font-weight: 600; }
.signal-panel.as-bar .sg-hint-touch { display: none; }
@media (hover: none) {
  .signal-panel.as-bar .sg-hint-lead,
  .signal-panel.as-bar .sg-hint-key { display: none; }
  .signal-panel.as-bar .sg-hint-touch { display: inline; }
}
.signal-panel.as-bar.has-talk .sg-hint,
.signal-panel.as-bar.is-writing .sg-hint { display: none; }

/* La tecla vive dentro de la frase: pista de lectura, no cuarto botón. */
.signal-panel.as-bar .sg-kbd {
  display: inline-block;
  margin: 0 2px;
  padding: 2px 7px;
  font-family: var(--sg-mono);
  font-size: 10px; letter-spacing: .08em;
  line-height: 1.5;
  color: var(--bar-text);
  background: rgba(232, 228, 216, .08);
  border: 1px solid var(--bar-line);
  border-radius: 5px;
  white-space: nowrap;
}
.signal-panel.as-bar.is-writing .sg-kbd { display: none; }

/* Campo de texto: micrófono bloqueado, lugar ruidoso o preferencia. */
.signal-panel.as-bar .sg-write {
  grid-area: 1 / 1; justify-self: stretch;
  min-width: 0; display: none; align-items: center;
}
.signal-panel.as-bar.is-writing .sg-write { display: flex; }
.signal-panel.as-bar .sg-write input {
  flex: 1; min-width: 0; height: 38px;
  padding: 0 14px;
  border: 1px solid var(--bar-line);
  border-radius: 8px;
  background: rgba(232, 228, 216, .06);
  color: var(--bar-text);
  font-family: var(--sg-text);
  font-size: 16px;
}
.signal-panel.as-bar .sg-write input::placeholder { color: var(--bar-soft); }
.signal-panel.as-bar .sg-write input:focus-visible {
  outline: 2px solid var(--sg-amber); outline-offset: 1px;
}
/* Único control con relleno: mientras se escribe, preguntar ES la acción. */
.signal-panel.as-bar .sg-send {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  margin-left: 8px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--sg-amber);
  color: var(--sg-black);
  cursor: pointer;
  transition: filter .14s ease;
}
.signal-panel.as-bar .sg-send:hover { filter: brightness(1.15); }
.signal-panel.as-bar .sg-send:focus-visible {
  outline: 2px solid var(--sg-amber); outline-offset: 2px;
}

/* ---------- La ranura ----------
 * El protagonista: el símbolo de la marca en movimiento. Segmento 7 × 28
 * (razón 1:4, la del instrumento) con 4 px de aire; 35 segmentos = 381 px.
 * Es además el botón de hablar: padding vertical hasta 44 px de área táctil. */
.signal-panel.as-bar {
  --sg-led-w: 7px;
  --sg-led-h: 28px;
  --sg-led-gap: 4px;
  --sg-led-span: 381px;
}
.signal-panel.as-bar .reactor-wrap {
  grid-area: 1 / 2;
  flex: 0 0 auto;
  box-sizing: content-box;
  padding: calc((44px - var(--sg-led-h)) / 2) 0;
  width: var(--sg-led-span); height: var(--sg-led-h);
  border: 0;
  background: none;
  cursor: pointer;
}
.signal-panel.as-bar .reactor-wrap:focus-visible {
  outline: 2px solid var(--sg-amber);
  outline-offset: 4px;
  border-radius: 6px;
}
.signal-panel.as-bar .reactor {
  height: var(--sg-led-h); border: 0; background: none; padding: 0;
  box-shadow: none;
}
.signal-panel.as-bar .reactor .axis,
.signal-panel.as-bar .reactor-state { display: none; }
.signal-panel.as-bar .reactor::before,
.signal-panel.as-bar .reactor::after { display: none; }

.signal-panel.as-bar .voice-pixels {
  position: static;
  inset: auto;
  margin: 0;
  height: var(--sg-led-h);
  gap: var(--sg-led-gap);
  align-items: center;
}
.signal-panel.as-bar .voice-pixels i {
  flex: 0 0 var(--sg-led-w);
  width: var(--sg-led-w);
  height: var(--sg-led-h);
  border-radius: 2px;
}
/* El segmento sólo cambia de color, nunca de forma ni de alto: se enciende
   con luz, no con estirones. */
.signal-panel.as-bar.is-igniting .voice-pixels i {
  animation-name: sg-ignite-luz;
}
@keyframes sg-ignite-luz {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Acciones: iconos callados ---------- */
.signal-panel.as-bar .sg-actions {
  grid-area: 1 / 3;
  justify-self: end;
  display: flex; align-items: center;
}
.signal-panel.as-bar .control-zone {
  flex: 0 0 auto;
  margin: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0; border: 0; height: auto;
}
.signal-panel.as-bar .voice-control { flex-direction: row; gap: 0; align-items: center; }
.signal-panel.as-bar .voice-label { display: none; }
.signal-panel.as-bar .talk { display: none; }
@media (hover: none) {
  .signal-panel.as-bar .talk { display: grid; width: 42px; height: 42px; }
}
.signal-panel.as-bar #interrupt { display: none; }
.signal-panel.as-bar.is-answering #interrupt { display: grid; }

.signal-panel.as-bar .utility,
.signal-panel.as-bar .sg-close {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--bar-soft);
  cursor: pointer;
  transition: color .14s ease, background-color .14s ease;
}
.signal-panel.as-bar .utility:hover,
.signal-panel.as-bar .sg-close:hover {
  color: var(--bar-text);
  background: rgba(232, 228, 216, .08);
}
.signal-panel.as-bar .utility:focus-visible,
.signal-panel.as-bar .sg-close:focus-visible {
  outline: 2px solid var(--sg-amber); outline-offset: 2px;
}
.signal-panel.as-bar .sg-close {
  position: relative;
  margin-left: 20px;
}
.signal-panel.as-bar .sg-close::before {
  content: "";
  position: absolute; left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 18px;
  background: var(--bar-line);
}

/* Mientras se sostiene, la barra entera se enciende. */
.signal-panel.as-bar.is-holding { border-top-color: var(--sg-hot); }
.signal-panel.as-bar.is-holding .sg-hint { color: var(--bar-text); }

/* La píldora crece a lo ancho hasta ser la barra. */
.signal-panel.as-bar.is-morphing { border-radius: 999px; }
.signal-panel.as-bar.is-open.is-morphing { border-radius: 0; }

/* ---------- Escalones: misma razón 1:4, otra escala ---------- */
@media (max-width: 1100px) {
  .signal-panel.as-bar {
    --sg-led-w: 5px;
    --sg-led-h: 20px;
    --sg-led-gap: 3px;
    --sg-led-span: 277px;
  }
  .signal-panel.as-bar .sg-row { height: 80px; gap: 22px; }
  .signal-panel.as-bar .sg-hint-lead { display: none; }
}

@media (max-width: 720px) {
  .signal-panel.as-bar .sg-row {
    display: flex;
    justify-content: space-between;
    height: 72px; padding: 0 16px; gap: 12px;
  }
  /* La invitación larga competía con la ranura y acababa truncada. En móvil
     la cápsula ya dijo HABLAR; la ranura recibe foco y conserva su etiqueta. */
  .signal-panel.as-bar .sg-hint { display: none !important; }
  .signal-panel.as-bar .sg-write { flex: 1; min-width: 0; }
  .signal-panel.as-bar .sg-actions { margin-left: auto; }
  .signal-panel.as-bar {
    --sg-led-w: 3px;
    --sg-led-h: 12px;
    --sg-led-gap: 2px;
    --sg-led-span: 173px;
  }
  .signal-panel.as-bar .conversation { padding: 16px 16px 6px; max-height: 18svh; }
  .signal-panel.as-bar .panel-cta { margin: 0 16px 12px; }
}