/* ============================================================================
   J.A.R.V.I.S. · Chassis: layout, cabeçalho, reator e telemetria
   ----------------------------------------------------------------------------
   A moldura do sistema — a barra de cima, o orbe ao centro e os painéis de
   estado que hoje vivem no pé da coluna de conversas.
   ========================================================================== */

/* ===== Layout ===== */
.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding-top: var(--safe-top);
}
/* Cantos de HUD: SAÍRAM no redesenho v4. Uma moldura de visor à volta de tudo
   era ruído permanente e brigava com o vidro. Se um dia voltarem, que seja como
   opção, não como omissão. */
.app::after {
  content: none;
  position: fixed;
  inset: calc(6px + var(--safe-top) * 0.4) 6px calc(6px + var(--safe-bottom) * 0.4);
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
  background:
    linear-gradient(var(--cyan) 0 0) left 0 top 0 / 22px 1.5px,
    linear-gradient(var(--cyan) 0 0) left 0 top 0 / 1.5px 22px,
    linear-gradient(var(--cyan) 0 0) right 0 top 0 / 22px 1.5px,
    linear-gradient(var(--cyan) 0 0) right 0 top 0 / 1.5px 22px,
    linear-gradient(var(--cyan) 0 0) left 0 bottom 0 / 22px 1.5px,
    linear-gradient(var(--cyan) 0 0) left 0 bottom 0 / 1.5px 22px,
    linear-gradient(var(--cyan) 0 0) right 0 bottom 0 / 22px 1.5px,
    linear-gradient(var(--cyan) 0 0) right 0 bottom 0 / 1.5px 22px;
  background-repeat: no-repeat;
}

.hud-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 20px 10px;
  /* VIDRO SEMI-FOSCO NA BARRA (pedido do dono, 25 jul 2026): o painel de vidro
     era a faixa do reator, que ficava POR CIMA da conversa e tapava o texto.
     Agora o vidro é só esta barra e o reator vive aqui, ao centro. */
  z-index: 6;
  min-height: 104px;
  /* VIDRO FOSCO A SÉRIO. O `backdrop-filter` sozinho não se via: no topo da página
     não há conteúdo por trás para desfocar (a conversa fica abaixo), e o dono
     dizia-o — "a barra superior não está glass fosco". O aspeto de vidro tem de
     vir da SUPERFÍCIE: película clara translúcida + brilho na aresta de cima +
     fio de luz em baixo. O blur fica para quando algo passa por trás (janelas,
     player, teclado). */
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),          /* aresta de luz, como vidro */
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 18px 44px rgba(4, 2, 16, 0.35);
}
:root[data-theme="claro"] .hud-top {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5)),
    linear-gradient(180deg, rgba(63, 220, 255, 0.10), rgba(63, 220, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px rgba(10, 30, 50, 0.10);
}
/* O reator ao CENTRO da barra, sem empurrar a hora nem o logótipo. */
.reactor-slot {
  position: absolute;
  left: 50%;
  /* O canvas da esfera é 1,5x a caixa do reator (js/reactor.js) e cresce para os
     dois lados: o topo tem de deixar essa margem, senão a esfera sai cortada. */
  top: 17px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;             /* só o reator recebe toques */
}
.reactor-slot .reactor { pointer-events: auto; }
.reactor-slot .reactor {
  width: 64px;
  height: 64px;
  margin: 0;
  flex: 0 0 auto;
}
.reactor-slot .hint { margin: 0; font-size: 9px; opacity: 0.5; white-space: nowrap; }
/* Linha-fio com gradiente sob o cabeçalho (separador de HUD) + ponto de
   varrimento a percorrer a linha (radar sweep, ref. dashboards FUI). */
.hud-top::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(184, 243, 255, 0.9) 45%, var(--cyan) 50%, rgba(184, 243, 255, 0.9) 55%, transparent) no-repeat,
    linear-gradient(90deg, transparent, rgba(126, 222, 255, 0.35) 22%, rgba(126, 222, 255, 0.35) 78%, transparent);
  background-size: 90px 100%, 100% 100%;
  animation: headScan 7s linear infinite;
}
@keyframes headScan {
  0% { background-position: -90px 0, 0 0; }
  100% { background-position: calc(100% + 90px) 0, 0 0; }
}
/* Colchetes a emoldurar o logo: SAÍRAM no redesenho v4 (mesma razão dos outros
   suportes de canto — ruído de cockpit por cima de uma interface de vidro). */
.hud-left { position: relative; padding: 4px 2px 2px 2px; }
.hud-left::before,
.hud-left::after {
  content: none;
  position: absolute;
  width: 12px; height: 12px;
  opacity: 0.55;
}
.hud-left::before { top: 0; left: 0; border-top: 1.5px solid var(--cyan); border-left: 1.5px solid var(--cyan); }
.hud-left::after { bottom: 0; left: 0; border-bottom: 1.5px solid var(--cyan); border-left: 1.5px solid var(--cyan); }
.logo {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 5px;
  font-weight: 600;
  background: linear-gradient(180deg, #eafcff 0%, var(--cyan) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(63, 220, 255, 0.4));
}
.status {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Ponto de estado vivo — pulsa suave quando em linha, dourado quando ativo. */
.status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
  animation: statusPulse 2.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes statusPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.status.active { color: var(--gold); text-shadow: 0 0 8px var(--gold-glow); }
.status.active::before { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); animation-duration: 0.9s; }
.hud-right { text-align: right; }
/* No Mac o botão de miniatura ◱ vive no canto sup. direito — o relógio ganha
   folga para não ficar por baixo dele (no iOS o botão está .hidden). */
.app:has(> .mini-toggle:not(.hidden)) .hud-right { padding-right: 40px; }
.clock {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 500;
  color: var(--cyan-hi);
  text-shadow: 0 0 14px var(--cyan-glow);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.dateline {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  margin-top: 4px;
  text-transform: uppercase;
}

/* ===== Reator ===== */
.reactor-zone {
  position: relative;          /* âncora dos painéis de telemetria laterais */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  height: 0;                   /* o reator subiu para a barra: isto já não ocupa espaço */
  flex-shrink: 0;
  z-index: 3;
}
/* fio de luz a rematar a base do vidro (agora na barra) */
.hud-top::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 222, 255, 0.18) 30%, rgba(126, 222, 255, 0.18) 70%, transparent);
}

/* ===== Telemetria decorativa (FUI) a ladear o reator =====
   Puro enfeite (aria-hidden, sem toques) inspirado nos dashboards Jarvis:
   barras, linhas de dados e um dial a rodar. Só em ecrãs largos (Mac). */
.hud-flank {
  /* v4: a telemetria decorativa passa a SUSSURRO. Continua lá (dá vida ao ecrã
     largo) mas deixa de competir com a conversa — que é o que importa. */
  opacity: 0.42;
  transition: opacity 0.25s;
  position: fixed;
  /* Ancorado abaixo do cabeçalho e a crescer PARA BAIXO (com scroll se preciso)
     — antes centrava e, com muitas linhas (A TOCAR/A TRANSMITIR/FOCO/VOLUME…),
     fugia para cima e cortava-se (queixa 2026-07-24). */
  top: 124px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
  --flank-w: clamp(150px, 18vw, 210px);
  width: var(--flank-w);
  display: none;               /* liga no @media de ecrã largo */
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  font-family: var(--font-mono);
  color: var(--text-dim);
  opacity: 0.85;
  scrollbar-width: none;
}
.hud-flank::-webkit-scrollbar { display: none; }
.flank-data { pointer-events: auto; }
/* FORA da conversa, nunca por cima dela. A conversa tem 860px (430 de cada lado
   do centro); antes os flancos começavam a 340px do centro e INVADIAM o texto
   por ~130px de cada lado — era o texto escrito por baixo dos painéis. Agora a
   borda interior do painel encosta a 450px do centro, com o painel para fora. */
.flank-left { left: max(10px, calc(50% - 450px - var(--flank-w, 210px))); align-items: flex-start; }
.flank-right { right: max(10px, calc(50% - 450px - var(--flank-w, 210px))); align-items: flex-end; text-align: right; }
.flank-title {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--cyan);
  opacity: 0.8;
  padding-bottom: 4px;
  position: relative;
}
.flank-title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(63, 220, 255, 0.5), transparent);
}
.flank-right .flank-title::after { background: linear-gradient(270deg, rgba(63, 220, 255, 0.5), transparent); }
/* Equalizador: barras a respirar com atrasos diferentes. */
.flank-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.flank-bars i {
  width: 4px;
  background: linear-gradient(180deg, var(--cyan), rgba(63, 220, 255, 0.15));
  border-radius: 1px;
  height: 30%;
  animation: eq 1.6s ease-in-out infinite;
  opacity: 0.75;
}
.flank-bars i:nth-child(2n) { animation-duration: 1.1s; }
.flank-bars i:nth-child(3n) { animation-duration: 2.1s; background: linear-gradient(180deg, var(--gold), rgba(201, 167, 255, 0.12)); opacity: 0.5; }
.flank-bars i:nth-child(2) { animation-delay: 0.15s; } .flank-bars i:nth-child(3) { animation-delay: 0.3s; }
.flank-bars i:nth-child(4) { animation-delay: 0.45s; } .flank-bars i:nth-child(5) { animation-delay: 0.6s; }
.flank-bars i:nth-child(6) { animation-delay: 0.75s; } .flank-bars i:nth-child(7) { animation-delay: 0.9s; }
.flank-bars i:nth-child(8) { animation-delay: 1.05s; } .flank-bars i:nth-child(9) { animation-delay: 1.2s; }
.flank-bars i:nth-child(10) { animation-delay: 1.35s; } .flank-bars i:nth-child(11) { animation-delay: 1.5s; }
.flank-bars i:nth-child(12) { animation-delay: 1.65s; }
@keyframes eq {
  0%, 100% { height: 24%; }
  50% { height: 92%; }
}
/* Linhas de dados PWR/MEM/NET com nível a oscilar. */
.flank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.flank-row .fl-line {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(63, 220, 255, 0.12);
  overflow: hidden;
}
.flank-row .fl-line::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan), rgba(184, 243, 255, 0.9));
  transform-origin: left;
  animation: level 4s ease-in-out infinite;
}
.flank-row .l1::before { animation-duration: 5s; }
.flank-row .l2::before { animation-duration: 3.4s; animation-delay: 0.8s; }
.flank-row .l3::before { animation-duration: 4.4s; animation-delay: 1.6s; background: linear-gradient(90deg, var(--gold), rgba(255, 232, 190, 0.9)); }
@keyframes level {
  0%, 100% { transform: scaleX(0.55); }
  40% { transform: scaleX(0.9); }
  70% { transform: scaleX(0.7); }
}
.flank-foot {
  font-size: 8.5px;
  letter-spacing: 2px;
  color: var(--cyan-dim);
}
/* Dial circular a rodar (bússola/radar). */
.flank-dial {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(63, 220, 255, 0.25);
}
.flank-dial::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cyan) 0 40deg, transparent 40deg 200deg, rgba(63, 220, 255, 0.4) 200deg 235deg, transparent 235deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2px));
  mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2px));
  animation: spin 5s linear infinite;
}
.flank-dial::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px dashed rgba(201, 167, 255, 0.4);
  animation: spin 12s linear infinite reverse;
}
.flank-dial i {
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
  animation: statusPulse 2s ease-in-out infinite;
}
/* Forma de onda: riscas finas com alturas alternadas. */
.flank-wave { display: flex; align-items: center; gap: 2px; height: 16px; }
.flank-wave i {
  width: 2px;
  height: 30%;
  background: rgba(63, 220, 255, 0.55);
  animation: eq 1.3s ease-in-out infinite;
}
.flank-wave i:nth-child(2n) { animation-delay: 0.2s; height: 60%; }
.flank-wave i:nth-child(3n) { animation-delay: 0.4s; height: 45%; }
.flank-wave i:nth-child(5n) { animation-delay: 0.6s; background: rgba(201, 167, 255, 0.5); }
/* Só há painéis laterais quando SOBRA mesmo espaço ao lado da conversa
   (860px) — 760px não chegava e eles acabavam por cima do texto. */
@media (min-width: 1300px) {
  .hud-flank { display: flex; }
}
/* (as regras de ecrã baixo vivem no FIM do ficheiro — têm de vir depois das
   regras base do .chat, senão são anuladas por ordem de cascata) */
.reactor {
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease-out;
  /* O TAMANHO vive numa só regra (.reactor-slot .reactor, no fim do ficheiro):
     o reator passou a morar na barra do topo, com medida fixa por ecrã. As
     regras antigas — incluindo o "recolher" com `:has()`, que por ter mais
     especificidade ganhava sempre — davam-lhe 111px e a esfera (que o canvas
     desenha a 1,5x) transbordava a barra para cima da conversa. */
}
.reactor:active { transform: scale(0.96); }
/* Miras cardeais fixas fora da esfera (crosshair de HUD). */
.reactor::before {
  content: "";
  position: absolute;
  inset: -13%;
  pointer-events: none;
  opacity: 0.45;
  background:
    linear-gradient(var(--amber) 0 0) top center / 1.5px 8px,
    linear-gradient(var(--amber) 0 0) bottom center / 1.5px 8px,
    linear-gradient(var(--amber) 0 0) left center / 8px 1.5px,
    linear-gradient(var(--amber) 0 0) right center / 8px 1.5px;
  background-repeat: no-repeat;
}
/* Moldura quadrada do reator: SAIU no redesenho v4 — o orbe respira melhor sem
   uma caixa de instrumento à volta, e era o que fazia o topo parecer um cockpit
   em vez de vidro. */
.reactor::after {
  content: none;
  position: absolute;
  inset: -22%;
  pointer-events: none;
  border: 1px solid rgba(160, 107, 255, 0.14);
  background:
    linear-gradient(rgba(255, 186, 110, 0.7) 0 0) left top / 13px 1.5px,
    linear-gradient(rgba(255, 186, 110, 0.7) 0 0) left top / 1.5px 13px,
    linear-gradient(rgba(255, 186, 110, 0.7) 0 0) right top / 13px 1.5px,
    linear-gradient(rgba(255, 186, 110, 0.7) 0 0) right top / 1.5px 13px,
    linear-gradient(rgba(255, 186, 110, 0.7) 0 0) left bottom / 13px 1.5px,
    linear-gradient(rgba(255, 186, 110, 0.7) 0 0) left bottom / 1.5px 13px,
    linear-gradient(rgba(255, 186, 110, 0.7) 0 0) right bottom / 13px 1.5px,
    linear-gradient(rgba(255, 186, 110, 0.7) 0 0) right bottom / 1.5px 13px;
  background-repeat: no-repeat;
  opacity: 0.6;
}
/* O canvas da esfera de partículas (criado pelo js/reactor.js) — com folga
   à volta do reator para o halo e para pontos salientes. */
.reactor-canvas {
  position: absolute;
  left: -25%; top: -25%;
  width: 150%;
  height: 150%;
  pointer-events: none;
  /* As partículas da cauda exterior chegam à borda do canvas (que sangra 25%
     para fora do reator) e atropelavam a pílula de estado e o texto por baixo
     — este véu radial fá-las esvair-se organicamente antes de lá chegarem. */
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, 0.55) 78%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, 0.55) 78%, transparent 96%);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Os ESTADOS do reator (idle/sentinel/listening/thinking/speaking) são
   desenhados pelo js/reactor.js no canvas — cor, velocidade e pulso da
   esfera de partículas mudam com a className que o app.js define. */

.hint {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 5px 14px;
  border: 1px solid rgba(126, 222, 255, 0.12);
  border-radius: 999px;
  /* Vidro fosco: a pílula vive dentro da zona de sangria do canvas do reator
     — fundo escurecido + blur para o texto ler-se sempre por cima do halo. */
  background: rgba(5, 12, 24, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 1;
}