/* ============================================================================
   J.A.R.V.I.S. · Redesenho v4 «vidro»
   ----------------------------------------------------------------------------
   A camada mais recente: material de vidro em todo o lado, palco com a coluna
   de conversas, ecrã inicial com o reator em grande e a barra de baixo nova.
   REGRA: código novo entra no ficheiro do SEU domínio, não aqui.
   ========================================================================== */

/* (O bloco «vidro em todo o sistema» que existia aqui foi para a lista
   canónica do base.css — deixou de haver !important a martelar as outras.) */

/* Barra de escrita: um painel de vidro suspenso, não uma caixa opaca. */
.input-bar, .composer, .text-bar {
  background: var(--glass);
  border: 1px solid var(--edge);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--glass-shadow);
}
/* Botões redondos do sistema: vidro com aresta, e a aresta acende ao toque. */
.round-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: background 0.16s, border-color 0.16s, transform 0.12s;
}
.round-btn:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.34); }
.round-btn:active { transform: scale(0.94); }

/* ============================================================================
   FASE 2 DO REDESENHO — palco: coluna de conversas + ecrã inicial
   ----------------------------------------------------------------------------
   Ideia: painéis de vidro suspensos (as referências holográficas que ele mandou).
   A coluna é a das apps de IA que ele usa; o ecrã inicial é o reator em grande
   com a caixa de escrever por baixo. Nada aqui inventa elementos: o reator e a
   caixa MUDAM-SE de sítio (ver atualizaHero no app.js).
   ========================================================================== */
.stage { flex: 1; display: flex; min-height: 0; position: relative; z-index: 1; }
.stage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; position: relative; }

/* ---- Coluna das conversas ---- */
.conv-rail {
  width: 264px; flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0;
  margin: 10px 0 10px 12px;
  padding: 12px 10px;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--edge);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--glass-shadow);
  transition: width 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), padding 0.22s;
}
.conv-rail.enc { width: 62px; padding-left: 8px; padding-right: 8px; }
.conv-rail.enc .rail-new span { display: none; }
.conv-rail.enc .rail-toggle svg { transform: rotate(180deg); }
.rail-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rail-new {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, rgba(160, 107, 255, 0.5), rgba(227, 100, 216, 0.34));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: filter 0.14s, transform 0.12s;
}
.rail-new:hover { filter: brightness(1.15); }
.rail-new:active { transform: scale(0.97); }
.rail-new svg { flex-shrink: 0; }
.rail-toggle {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--edge); background: rgba(255, 255, 255, 0.06); color: var(--text-dim);
}
.rail-toggle:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }
.rail-toggle svg { transition: transform 0.22s; }
.rail-list { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
.rail-list::-webkit-scrollbar { width: 4px; }
.rail-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
.rail-vazio { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; padding: 10px 8px; opacity: 0.8; }
.rail-item {
  display: flex; align-items: center; gap: 2px; border-radius: 12px; padding: 2px 4px 2px 2px;
  transition: background 0.12s;
}
.rail-item:hover { background: rgba(255, 255, 255, 0.07); }
.rail-item.on { background: rgba(160, 107, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.rail-item-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: none; border: none; cursor: pointer; color: var(--text); font: inherit; padding: 8px 8px;
}
.rail-t { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-d { font-size: 10.5px; color: var(--text-dim); }
.rail-pin, .rail-x {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--text-dim); opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.rail-item:hover .rail-pin, .rail-item:hover .rail-x, .rail-item.on .rail-pin { opacity: 0.75; }
.rail-item.fav .rail-pin { opacity: 1; color: var(--violet-hi); }
.rail-pin:hover, .rail-x:hover { opacity: 1 !important; color: #fff; background: rgba(255, 255, 255, 0.12); }
.rail-x:hover { color: #ff8fa3; }

/* ---- Ecrã inicial: o reator em grande + a caixa de escrever ---- */
.hero {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  padding: 20px clamp(16px, 5vw, 60px) 10px;
  animation: fadeIn 0.3s ease-out;
}
.hero.hidden { display: none; }
.hero-slot { display: flex; align-items: center; justify-content: center; }
/* O reator dentro do herói é o MESMO elemento — só muda de tamanho. */
.hero-slot .reactor { width: min(38vh, 300px) !important; height: min(38vh, 300px) !important; }
.hero-say { text-align: center; }
.hero-tit {
  font-size: clamp(24px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.6px; line-height: 1.15;
  background: linear-gradient(100deg, #ffffff, #d9c8ff 60%, #9fe8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { margin-top: 7px; font-size: 14.5px; color: var(--text-dim); }
.hero-compose { width: min(760px, 100%); }
/* A caixa de escrever, quando vive no herói, deixa de ser fixa ao fundo. */
.text-bar.no-hero {
  position: static !important;
  width: 100%; max-width: none;
  margin: 0; border-radius: var(--r-lg);
}
/* Enquanto o ecrã inicial está à vista, a conversa (vazia) não ocupa espaço. */
body.em-inicio .chat { display: none; }
body.em-inicio .hud-flank { display: none !important; }

/* ---- Barra de baixo: uma peça só, com nomes sempre legíveis ---- */
.hud-bottom .round-btn[data-lbl]::after { opacity: 0.85; }
@media (max-width: 699px) {
  /* No telemóvel os nomes também aparecem — era aqui que a barra ficava «às três
     pancadas»: seis símbolos sem legenda nenhuma. */
  .hud-bottom { padding: 10px 16px 20px; gap: 14px; }
  .hud-bottom .round-btn { position: relative; }
  .hud-bottom .round-btn[data-lbl]::after {
    content: attr(data-lbl);
    position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    font-size: 8px; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--text-dim); white-space: nowrap; pointer-events: none;
  }
}

/* ---- Telemóvel: a coluna passa a gaveta ---- */
@media (max-width: 860px) {
  .conv-rail {
    position: fixed; left: 10px; top: calc(96px + var(--safe-top));
    bottom: calc(104px + var(--safe-bottom)); z-index: 40; width: 74vw; max-width: 300px;
    margin: 0; transform: translateX(calc(-100% - 16px)); transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .conv-rail.aberta { transform: none; }
  /* encolhida no telemóvel = fechada (não há espaço para meio-termo) */
  .conv-rail.enc { width: 74vw; }
  body.em-inicio .hero { padding-bottom: 30px; }
  .hero-slot .reactor { width: min(30vh, 220px) !important; height: min(30vh, 220px) !important; }
}
/* Botão que abre a gaveta das conversas — só onde a coluna não cabe ao lado. */
.rail-open {
  display: none; width: 34px; height: 34px; border-radius: 11px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center; margin-right: 8px; flex-shrink: 0;
  border: 1px solid var(--edge); background: rgba(255, 255, 255, 0.07); color: var(--text);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.rail-open:hover { background: rgba(255, 255, 255, 0.14); }
@media (max-width: 860px) {
  .rail-open { display: inline-flex; grid-area: btn; margin-right: 0; }
  /* O ☰ à esquerda, e o nome POR CIMA do estado (não ao lado). Em linha, num
     ecrã de 390px, saía "J.A.… EM LINH…" — ilegível dos dois lados. */
  .hud-left {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'btn logo' 'btn status';
    align-items: center; column-gap: 9px; row-gap: 1px;
  }
  .hud-left .logo { grid-area: logo; }
  .hud-left .status { grid-area: status; }
}
/* No ecrã inicial a caixa de escrever não precisa de ✕ (não há nada a fechar) e
   a dica do reator fica por baixo dele, não no cabeçalho. */
.text-bar.no-hero #closeText { display: none; }
.hero-slot { flex-direction: column; gap: 10px; }
.hero-slot .hint { font-size: 11px; letter-spacing: 1.4px; opacity: 0.55; }

/* ============================================================================
   BARRA DE BAIXO v4.2 — a correção do "está tudo em cima umas das outras".
   O erro: os nomes eram ::after posicionados FORA do botão (top: 100%), por isso
   caíam para fora da barra e ficavam cortados pelo fundo da janela. Agora o nome
   vive DENTRO do botão, que passa a ser uma pilha ícone+nome. A barra cresce com
   eles em vez de os deixar pendurados.
   ========================================================================== */
.hud-bottom {
  gap: calc(6px * var(--dock-scale));
  padding: calc(10px * var(--dock-scale)) calc(14px * var(--dock-scale));
  margin-bottom: calc(14px + var(--safe-bottom));
  border-radius: 28px;
  align-items: stretch;
}
.hud-bottom .round-btn {
  width: auto !important; height: auto !important;
  min-width: calc(64px * var(--dock-scale));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: calc(9px * var(--dock-scale)) 8px calc(7px * var(--dock-scale));
  border-radius: 18px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-dim);
}
.hud-bottom .round-btn svg { display: block; }
.hud-bottom .round-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}
/* O nome DENTRO do botão (era ::after posicionado por fora — a causa do corte). */
.hud-bottom .round-btn[data-lbl]::after {
  content: attr(data-lbl);
  position: static; transform: none; top: auto; left: auto;
  font-family: var(--font-ui);
  font-size: calc(9.5px * var(--dock-scale));
  font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: inherit; opacity: 0.75; white-space: nowrap; pointer-events: none;
}
/* O micro é o herói da barra: maior, redondo, e alinhado com os outros. */
.hud-bottom .mic-btn {
  align-self: center;
  width: calc(58px * var(--dock-scale)) !important;
  height: calc(58px * var(--dock-scale)) !important;
  margin: 0 calc(4px * var(--dock-scale));
}
/* Apps do dock: alinhadas com o resto, sem saltar de tamanho. */
.hud-bottom .dock-apps { align-items: center; gap: 6px; }
@media (max-width: 699px) {
  .hud-bottom { gap: 2px; padding: 8px 10px; }
  .hud-bottom .round-btn { min-width: 56px; padding: 8px 4px 6px; }
  .hud-bottom .round-btn[data-lbl]::after { font-size: 8.5px; }
}

/* ---- Telemetria dentro da coluna (ver o move no app.js) ------------------- */
.rail-foot { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.rail-foot:empty { display: none; }
.conv-rail.enc .rail-foot { display: none; }
/* Dentro da coluna a telemetria deixa de ser fixa e passa a caber na largura. */
.rail-foot .hud-flank {
  position: static !important;
  display: flex !important;
  width: auto !important; max-width: none; max-height: none;
  top: auto !important; left: auto; right: auto;
  opacity: 0.6;
  padding: 10px 10px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  font-size: 9.5px;
}
.rail-foot .hud-flank:hover { opacity: 0.95; }
/* No ecrã inicial não há telemetria: o herói é o reator e mais nada. */
body.em-inicio .rail-foot { display: none; }

/* O grão repete-se em azulejo; a película estica. Sem isto o ruído esticava e
   virava manchas em vez de textura. */
.conv-rail, .hud-bottom, .hud-top, .msg, .jos-power-menu, .jos-setup-box,
.os-launcher, .ws-win, .notas-box, .mu-prompt-box, .text-bar, .rail-foot .hud-flank {
  /* O grão repete-se em azulejo; a película estica. NADA de background-blend-mode
     aqui: com `overlay` o ruído comia a película branca e o vidro voltava a ser
     só transparência (medido a 30 jul: dentro do painel 13,33,71 vs fora
     30,27,70 — ou seja, película nenhuma). */
  background-size: 160px 160px, cover;
}

/* ---- Coluna ENCOLHIDA: pré-visualização das conversas, não um tubo vazio ----
   Ela continua a mostrar tudo — só troca o título pela INICIAL, como o Mail e o
   Finder fazem quando a coluna aperta. Continua tocável e continua a marcar a
   conversa aberta e as favoritas. */
.rail-ini {
  display: none; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 12px;
  align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(150deg, rgba(160, 107, 255, 0.55), rgba(227, 100, 216, 0.4));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.rail-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.conv-rail.enc .rail-item-main { justify-content: center; padding: 6px 0; flex-direction: row; }
.conv-rail.enc .rail-ini { display: inline-flex; }
.conv-rail.enc .rail-txt,
.conv-rail.enc .rail-pin,
.conv-rail.enc .rail-x { display: none; }
.conv-rail.enc .rail-item { justify-content: center; padding: 2px; }
.conv-rail.enc .rail-item.on .rail-ini { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.5); }
.conv-rail.enc .rail-item.fav .rail-ini::after {
  content: "★"; position: absolute; margin: -22px 0 0 24px; font-size: 10px; color: var(--violet-hi);
}
.conv-rail.enc .rail-item.fav .rail-ini { position: relative; }
.conv-rail.enc .rail-list { gap: 6px; }
.conv-rail.enc .rail-vazio { display: none; }

/* Botões DENTRO do dock não levam vidro próprio: dois `backdrop-filter`
   empilhados voltam a filtrar um fundo já filtrado e davam caixas claras por
   baixo dos ícones (com os nomes a desaparecer lá dentro). */
.hud-bottom .round-btn,
.hud-bottom .dock-app {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hud-bottom .round-btn[data-lbl]::after { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }

/* ---- Coluna ENCOLHIDA: os dois botões do topo empilham-se --------------------
   Lado a lado não cabiam em 62px e a seta ficava MEIA FORA da coluna (visto na
   captura dele). Encolhida, o ＋ fica em cima e a seta por baixo, ambos dentro. */
.conv-rail.enc .rail-top { flex-direction: column; gap: 6px; align-items: center; }
.conv-rail.enc .rail-new {
  width: 40px; min-width: 0; flex: 0 0 auto; height: 40px; padding: 0; border-radius: 14px;
}
.conv-rail.enc .rail-toggle { margin: 0; }

/* ============================================================================
   FASE 2 · APPS — a mesma linguagem em todo o lado
   As superfícies das apps (notas, launcher, janelas do workspace, teclado no
   ecrã, painéis do sistema) partilham o material e os raios do resto. Nomes de
   classe intactos: muda o aspeto, não o que fazem.
   ========================================================================== */
/* (superfícies: ver a lista canónica no base.css) */
/* Ícones das apps: pastilhas de vidro com aresta, iguais em toda a interface. */
.os-app, .dock-app {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: background 0.14s, border-color 0.14s, transform 0.12s;
}
.os-app:hover, .dock-app:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.os-app:active, .dock-app:active { transform: scale(0.95); }
/* Barra de título das janelas do workspace: vidro, não uma faixa opaca. */
.ws-head {
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
/* Itens de menu do sistema: alvos maiores e realce de vidro. */
.jos-power-item {
  border-radius: 13px;
  transition: background 0.12s;
}
.jos-power-item:hover { background: rgba(255, 255, 255, 0.12); }
/* Botões primários/secundários dos diálogos, na linguagem da casa. */
.jos-btn-pri {
  background: linear-gradient(135deg, rgba(160, 107, 255, 0.9), rgba(227, 100, 216, 0.75)) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.jos-btn-sec {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--text) !important;
}