/* ============================================================================
   J.A.R.V.I.S. · Paleta v3, temas e afinações herdadas
   ----------------------------------------------------------------------------
   ATENÇÃO: é aqui que vive o SEGUNDO :root, o que MANDA na paleta (vem depois
   do de base). Foi por causa dele que o material de vidro andou a ser desfeito
   sem se dar por isso — se mexeres no vidro, é aqui.
   ========================================================================== */

/* ============================================================
   JARVIS OS v7.16 — PASSE DE DESIGN (a assinatura é o reator)
   O âmbar do reator passa a ser a VOZ do Jarvis em toda a UI
   (bolhas dele, micro, anéis, brasas); o ciano fica a estrutura
   e a voz do utilizador. Expandido = ponte de comando;
   compacto = cockpit. Papel de parede personalizável.
   ============================================================ */

/* ---- Papel de parede (Definições → Aspeto) ---- */
#wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}
body::before { z-index: 1; } /* grelha/orbes por CIMA do wallpaper (textura + leitura) */
#wallpaper.wp-img { opacity: 0.44; filter: saturate(1.05); }
#wallpaper.wp-nebula {
  background:
    radial-gradient(58% 48% at 50% 30%, rgba(160, 107, 255, 0.17), transparent 70%),
    radial-gradient(40% 36% at 18% 82%, rgba(201, 167, 255, 0.07), transparent 70%),
    radial-gradient(46% 42% at 84% 76%, rgba(63, 220, 255, 0.08), transparent 70%);
}
#wallpaper.wp-stark {
  background:
    radial-gradient(55% 48% at 50% 42%, rgba(63, 220, 255, 0.13), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 42%, rgba(63, 220, 255, 0.045) 0deg 1deg, transparent 1deg 30deg);
}
#wallpaper.wp-deep {
  background:
    radial-gradient(70% 55% at 50% 8%, rgba(37, 99, 235, 0.15), transparent 75%),
    radial-gradient(1.6px 1.6px at 32px 44px, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1.2px 1.2px at 150px 120px, rgba(255, 235, 200, 0.35), transparent 100%),
    radial-gradient(1px 1px at 90px 200px, rgba(180, 230, 255, 0.3), transparent 100%);
  background-size: auto, 260px 220px, 300px 260px, 240px 240px;
}

/* ---- Brasa + ANEL ORBITAL do reator (a peça central respira) ---- */
.reactor-ring { position: absolute; inset: -16%; pointer-events: none; }
.reactor-ring::before {
  content: "";
  position: absolute;
  inset: -70%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(160, 107, 255, 0.15), rgba(160, 107, 255, 0.05) 45%, transparent 72%);
}
.reactor-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(180, 124, 255, 0) 0deg 9deg, rgba(180, 124, 255, 0.55) 9deg 10.4deg);
  -webkit-mask: radial-gradient(circle, transparent 62.5%, #000 63.5%, #000 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 62.5%, #000 63.5%, #000 66%, transparent 67%);
  animation: ringSpin 30s linear infinite;
  opacity: 0.55;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* ---- Identidade v4: o JARVIS fala em vidro, tu falas em violeta ---- */
.msg.jarvis {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.msg.jarvis::before {
  border-top-color: var(--amber);
  border-left-color: var(--amber);
  filter: drop-shadow(0 0 4px var(--amber-glow));
}
.msg.jarvis.streaming::after { color: var(--amber); }
.msg.jarvis .who { color: rgba(200, 246, 255, 0.7); }
.msg.jarvis .who::before { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
.msg.user {
  background: linear-gradient(150deg, rgba(160, 107, 255, 0.34), rgba(227, 100, 216, 0.20));
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 12px 32px rgba(160, 107, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.msg.user::before {
  border-top-color: var(--cyan);
  border-right-color: var(--cyan);
  filter: drop-shadow(0 0 4px var(--cyan-glow));
}
.msg.user .who::before { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); }

/* ---- Energia nos controlos: o micro é o reator em botão ---- */
.mic-btn {
  border-color: rgba(180, 124, 255, 0.55);
  color: #d6b8ff;
  box-shadow: 0 0 22px rgba(160, 107, 255, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.mic-btn:hover { box-shadow: 0 0 34px rgba(160, 107, 255, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.status::before { background: var(--amber); box-shadow: 0 0 8px var(--amber-glow); }
.hint { color: rgba(255, 209, 150, 0.62); border-color: rgba(180, 124, 255, 0.16); }
.dock-app:hover { box-shadow: 0 10px 24px rgba(160, 107, 255, 0.26); }
.dock-app .run-dot { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
.tray-chip.on { color: var(--amber); border-color: rgba(180, 124, 255, 0.35); }

/* ---- Moldura do visor: cantos maiores, âmbar+ciano em diagonal ---- */
.app::after {
  opacity: 0.5;
  background:
    linear-gradient(var(--amber) 0 0) left 0 top 0 / 30px 1.5px,
    linear-gradient(var(--amber) 0 0) left 0 top 0 / 1.5px 30px,
    linear-gradient(var(--cyan) 0 0) right 0 top 0 / 30px 1.5px,
    linear-gradient(var(--cyan) 0 0) right 0 top 0 / 1.5px 30px,
    linear-gradient(var(--cyan) 0 0) left 0 bottom 0 / 30px 1.5px,
    linear-gradient(var(--cyan) 0 0) left 0 bottom 0 / 1.5px 30px,
    linear-gradient(var(--amber) 0 0) right 0 bottom 0 / 30px 1.5px,
    linear-gradient(var(--amber) 0 0) right 0 bottom 0 / 1.5px 30px;
  background-repeat: no-repeat;
}

/* ---- EXPANDIDO (≥1280px): ponte de comando ---- */
@media (min-width: 1280px) {
  /* telemetria FUI encostada às margens — o centro respira */
  .flank-left { left: clamp(26px, 3.5vw, 70px); }
  .flank-right { right: clamp(26px, 3.5vw, 70px); }
  /* muda a VARIÁVEL (não só a largura), senão o cálculo da posição usava o
     valor antigo e os painéis voltavam a encostar-se à conversa */
  .hud-flank { --flank-w: clamp(170px, 15vw, 240px); width: var(--flank-w); }
  /* trilhos verticais a ancorar o layout nas margens */
  .app::before {
    content: "";
    position: fixed;
    top: 14%;
    bottom: 14%;
    left: 15px;
    width: 1px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(126, 222, 255, 0.22) 18% 82%, transparent);
    box-shadow: calc(100vw - 31px) 0 0 rgba(126, 222, 255, 0.22);
  }
  .chat { max-width: 920px; }
  .msg { max-width: 78%; font-size: 15.5px; }
}

/* ---- COMPACTO (telemóvel): cockpit ---- */
@media (max-width: 480px) {
  .msg { max-width: 92%; padding: 10px 13px; }
  .chat { padding-left: 10px; padding-right: 10px; gap: 10px; }
  .reactor-ring::after { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .reactor-ring::after { animation: none !important; }
}

/* ============================================================
   JARVIS OS v7.16b — RONDA 2 (feedback do dono: «melhora as
   cores, mais user friendly»): paleta mais rica e luminosa,
   bolhas sólidas e legíveis, rótulos nos controlos, compacto
   arrumado (topo limpo, dock que cabe sempre).
   ============================================================ */

/* Paleta: fundo com profundidade (índigo → negro).
   ATENÇÃO (30 jul 2026): este :root vem DEPOIS do do topo e é o que MANDA. Foi
   aqui que o material de vidro andou a ser desfeito sem eu dar por isso — eu
   afinava as variáveis lá em cima e este bloco repunha um azul-escuro opaco.
   Medi-o por fim: dentro do painel 13,33,71 e fora 30,27,70, ou seja, película
   nenhuma. Se voltares a mexer no vidro, é AQUI. */
:root {
  --glass: var(--grao), linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055) 48%, rgba(255, 255, 255, 0.085));
  --glass-strong: var(--grao), linear-gradient(155deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.09) 46%, rgba(255, 255, 255, 0.13));
  --edge: rgba(255, 255, 255, 0.28);
  --edge-strong: rgba(255, 255, 255, 0.44);
  --text: #f0f9ff;
  --text-dim: #93b9cf;
}
html, body {
  background:
    radial-gradient(120% 85% at 50% -12%, #0d1a2e 0%, #081120 44%, #08061a 100%) fixed;
  /* COR SÓLIDA por baixo do gradiente: sem isto o shorthand acima punha o
     background-color a transparente, e no iPhone (PWA) a zona do home indicator
     ficava BRANCA. Esta cor sela a safe-area em toda a app, não só na música. */
  background-color: #08061a;
}

/* Leitura em primeiro lugar: texto maior, mais respiro — e VIDRO (v4).
   O JARVIS fala em vidro claro; tu falas no violeta da casa. Este bloco é o que
   manda (vem depois dos outros), por isso é aqui que a identidade se define. */
.msg { font-size: 15.5px; line-height: 1.58; border-radius: var(--r-lg); padding: 13px 17px; }
.msg.jarvis {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f7f5ff;
  box-shadow: var(--glass-shadow);
}
.msg.user {
  /* Violeta TRANSLÚCIDO: o fundo tem de se ver através dele. Sólido era tinta,
     não vidro. */
  background: linear-gradient(150deg, rgba(190, 140, 255, 0.26), rgba(236, 72, 153, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: 0 16px 40px rgba(120, 60, 200, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.msg .who { font-size: 9.5px; }
.msg.trace { background: rgba(255, 255, 255, 0.05); }

/* Controlos amigáveis: rótulos por baixo dos botões (em ecrãs com espaço). */
.hud-bottom .round-btn { position: relative; }
@media (min-width: 700px) {
  .hud-bottom { padding: 11px 22px 20px; gap: 24px; }
  .hud-bottom .round-btn[data-lbl]::after {
    content: attr(data-lbl);
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-dim);
    white-space: nowrap;
    pointer-events: none;
  }
}
/* Botões com mais vida: gradiente de vidro e resposta ao toque. */
.round-btn {
  background: linear-gradient(180deg, rgba(63, 220, 255, 0.10), rgba(63, 220, 255, 0.03));
  border-color: rgba(140, 226, 255, 0.28);
}
.mic-btn { background: linear-gradient(180deg, rgba(180, 124, 255, 0.14), rgba(160, 107, 255, 0.04)); }

/* COMPACTO arrumado: topo limpo e dock que cabe SEMPRE. */
@media (max-width: 520px) {
  .sys-tray { display: none; }
  .hud-top { padding: 10px 12px 8px; }
  .logo { font-size: 14px; letter-spacing: 4px; }
  .clock { font-size: 19px; }
  .dateline { font-size: 8px; letter-spacing: 1.4px; }
  .hud-bottom { gap: calc(9px * var(--dock-scale)); padding: calc(8px * var(--dock-scale)) calc(12px * var(--dock-scale)); }
  .round-btn { width: calc(42px * var(--dock-scale)); height: calc(42px * var(--dock-scale)); font-size: calc(16px * var(--dock-scale)); }
  .dock-apps { gap: 6px; }
  .dock-apps:not(:empty) { padding: 0 7px; }
  .dock-apps .dock-app:nth-child(n+3) { display: none; } /* 2 apps no dock estreito */
  .dock-app { width: 34px; height: 34px; font-size: 17px; }
}
/* Compacto: cabeçalho sem transbordo — só relógio (a data vive no expandido). */
@media (max-width: 520px) {
  .hud-right { flex-shrink: 0; text-align: right; }
  .dateline { display: none; }
  .clock { font-size: 18px; }
  .status { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   JARVIS OS v7.16c — TEMAS sincronizados + painéis com dados
   vivos no expandido (ref. dashboards de comando) + cabeçalho
   compacto sem transbordo. Tudo flui pelas variáveis: trocar
   o data-theme no <html> muda a paleta INTEIRA em harmonia.
   ============================================================ */

/* ---- Painéis de dados nos flancos (≥1280px, preenchem a largura) ---- */
.flank-data { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.flank-data:empty { display: none; }
.fd-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 1.2px;
  border-bottom: 1px solid rgba(126, 222, 255, 0.08);
  padding-bottom: 4px;
}
.fd-row span { color: var(--text-dim); flex-shrink: 0; }
.fd-row b { font-weight: 500; color: var(--cyan-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flank-right .fd-row { flex-direction: row-reverse; }

/* ---- TEMAS ---- */
/* Muito escuro: OLED, brasas mais vivas por contraste. */
:root[data-theme="black"] {
  --glass: var(--grao), linear-gradient(155deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.09) 48%, rgba(255, 255, 255, 0.13));
  --glass-strong: var(--grao), linear-gradient(155deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0.2));
  --edge: rgba(255, 255, 255, 0.24);
  --edge-strong: rgba(255, 255, 255, 0.4);
}
:root[data-theme="black"] html, :root[data-theme="black"] body {
  background: radial-gradient(110% 70% at 50% -10%, #050a13 0%, #02050a 50%, #000 100%) fixed;
}
/* Médio: azul-aço mais claro, vidro mais luminoso. */
:root[data-theme="medio"] {
  --glass: var(--grao), linear-gradient(155deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.18) 48%, rgba(255, 255, 255, 0.22));
  --glass-strong: var(--grao), linear-gradient(155deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.24) 46%, rgba(255, 255, 255, 0.3));
  --edge: rgba(255, 255, 255, 0.38);
  --edge-strong: rgba(255, 255, 255, 0.55);
  --text: #f4fbff;
  --text-dim: #a9c8da;
}
:root[data-theme="medio"] html, :root[data-theme="medio"] body {
  background: radial-gradient(120% 85% at 50% -12%, #1a3050 0%, #10223c 46%, #081426 100%) fixed;
}
/* Claro: dia — texto escuro, vidro branco, acentos a afundar para ler bem. */
:root[data-theme="claro"] {
  --bg: #e9f1f8;
  --glass: var(--grao), linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
  --glass-strong: var(--grao), linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.8));
  --edge: rgba(16, 86, 122, 0.22);
  --edge-strong: rgba(16, 86, 122, 0.42);
  --cyan: #0e7fae;
  --cyan-hi: #0b5f84;
  --cyan-dim: #3b8bab;
  --cyan-glow: rgba(14, 127, 174, 0.28);
  --amber: #c96f12;
  --amber-glow: rgba(201, 111, 18, 0.28);
  --gold: #b8860b;
  --gold-glow: rgba(184, 134, 11, 0.3);
  --text: #12242f;
  --text-dim: #48697c;
}
:root[data-theme="claro"] html, :root[data-theme="claro"] body {
  background: radial-gradient(120% 85% at 50% -12%, #f6fafd 0%, #e7eff7 50%, #d8e5ef 100%) fixed;
}
:root[data-theme="claro"] body::before { opacity: 0.45; }
:root[data-theme="claro"] body::after {
  background: radial-gradient(120% 90% at 50% 45%, transparent 66%, rgba(140, 170, 195, 0.25) 100%);
}
:root[data-theme="claro"] .logo { background: linear-gradient(180deg, #14425c 0%, #0e7fae 70%); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="claro"] .msg.jarvis {
  background: linear-gradient(180deg, rgba(255, 190, 110, 0.28), rgba(255, 248, 238, 0.9));
  border-color: rgba(180, 110, 30, 0.4);
  color: #3c2a12;
}
:root[data-theme="claro"] .msg.user {
  background: linear-gradient(180deg, rgba(120, 210, 245, 0.30), rgba(238, 249, 255, 0.9));
  border-color: rgba(14, 127, 174, 0.38);
  color: #0f2a3a;
}
:root[data-theme="claro"] .msg.trace { background: rgba(255, 255, 255, 0.5); color: #48697c; }
:root[data-theme="claro"] .hint { background: rgba(255, 255, 255, 0.6); color: #8a5a20; }
:root[data-theme="claro"] .tray-chip { background: rgba(255, 255, 255, 0.5); color: #48697c; }
:root[data-theme="claro"] .round-btn { background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(230, 244, 252, 0.6)); }
:root[data-theme="claro"] .mic-btn { background: linear-gradient(180deg, rgba(255, 240, 220, 0.9), rgba(255, 228, 190, 0.55)); color: #9a5a10; }
:root[data-theme="claro"] .os-launcher { background: rgba(238, 246, 252, 0.82); }
:root[data-theme="claro"] .os-hint { color: #48697c; }
:root[data-theme="claro"] #wallpaper.wp-img { opacity: 0.3; }
:root[data-theme="claro"] .reactor-zone { background: linear-gradient(180deg, rgba(240, 248, 253, 0.4), rgba(240, 248, 253, 0.15) 70%, transparent); }

/* ---- Compacto: cabeçalho estanque (o relógio aparece SEMPRE) ---- */
@media (max-width: 520px) {
  .hud-top { gap: 10px; }
  .hud-left { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .hud-right { flex: 0 0 auto; }
  .app:has(> .mini-toggle:not(.hidden)) .hud-right { padding-right: 34px; }
}
/* Compacto: o relógio é ANCORADO ao canto (imune ao que o flex do cabeçalho
   fizer — visto em teste: a linha tinha largura mínima oculta e empurrava o
   relógio para fora do ecrã em larguras <500px). */
@media (max-width: 520px) {
  .hud-top { position: relative; }
  .hud-right { position: absolute; top: 12px; right: 14px; padding-right: 0 !important; }
  .app:has(> .mini-toggle:not(.hidden)) .hud-right { right: 44px; }
}
/* Painéis laterais INTERATIVOS (pedido do dono) + texto menos centrado no
   ecrã largo: a coluna de leitura usa a largura entre os painéis. */
.flank-data { pointer-events: auto; }
.fd-link {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(126, 222, 255, 0.08);
  font: inherit;
  cursor: pointer;
  text-align: inherit;
  width: 100%;
}
.fd-link:hover b { color: var(--amber); }
.fd-acts { display: flex; gap: 5px; margin-top: 7px; pointer-events: auto; flex-wrap: wrap; }
.flank-right .fd-acts { justify-content: flex-end; }
.fd-btn {
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 8px;
  border: 1px solid var(--edge);
  background: rgba(63, 220, 255, 0.06);
  color: var(--cyan-hi);
  font-size: 11px;
  cursor: pointer;
}
.fd-btn:hover { border-color: rgba(180, 124, 255, 0.5); color: var(--amber); }
@media (min-width: 1280px) {
  .chat { max-width: min(1240px, calc(100vw - 620px)); }
  .msg { max-width: 74%; }
}
/* Slider de volume do painel (acompanha ao vivo; envio suavizado). */
.fd-vol {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(180, 124, 255, 0.55), rgba(63, 220, 255, 0.35));
  outline: none;
  cursor: pointer;
  pointer-events: auto;
}
.fd-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--amber);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 8px var(--amber-glow);
}

/* ============================================================
   JARVIS MUSIC — o visual da app de música mudou-se para um
   ficheiro próprio: css/music.css. Estava espalhada por uma
   dúzia de blocos aqui, camada sobre camada de remendos, e era
   isso que a fazia parecer «presa por arames» (sobretudo no
   iPhone). Não voltar a acrescentar regras .mu-* a este ficheiro.
   ============================================================ */

/* Jarvis OS — fixar apps no dock (pin/unpin) + arrastar do launcher */
.os-app { position: relative; }
/* Estrela de fixar: SEMPRE VISÍVEL e com alvo grande. Antes tinha opacity:0 e
   só aparecia com o rato em cima — num ecrã de toque era invisível e do
   tamanho de um alfinete, daí "não consigo dar pin a uma app". */
.os-pin {
  position: absolute; top: 2px; right: 2px;
  width: 34px; height: 34px;                  /* alvo de toque a sério */
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; cursor: pointer;
  opacity: 0.55; transition: opacity 0.12s, transform 0.12s, color 0.12s;
  color: var(--text-dim);
  border-radius: 50%;
}
.os-app:hover .os-pin { opacity: 0.9; }
.os-pin.on { opacity: 1; color: var(--amber); text-shadow: 0 0 10px rgba(160, 107, 255, 0.5); }
.os-pin:hover { transform: scale(1.15); opacity: 1; background: rgba(255, 255, 255, 0.08); }
.os-pin:active { transform: scale(0.92); }
.dock-apps.drag-over { outline: 1.5px dashed var(--amber); outline-offset: 3px; border-radius: 12px; }