/* ============================================================================
   J.A.R.V.I.S. · RESPIRAR — o ritmo da barra de baixo e dos painéis do sistema
   ----------------------------------------------------------------------------
   Queixa dele, 17 ago 2026: «o menu de baixo onde tem energia, sistema, teclado,
   luminosidade, apps, teclado local para escrever e as apps música e notas está
   uma porcaria, tudo super compactado e sem respirar nem bonito».

   Tinha razão, e não era gosto — era medida. O que estava:
     · botões laterais da barra a 32×32 px (intent.css) — o mínimo tocável é 44;
     · 6 px entre eles, e a barra com gap 2 px e padding 8×10 em ecrã pequeno;
     · itens do menu Energia/Sistema com 11 px de padding: ~41 px de alvo;
     · chips do tabuleiro com letra de 9 px.
   Alvos abaixo do mínimo e espaçamento a metade, em cima de um ecrã que se usa
   com o DEDO.

   PORQUE É UM FICHEIRO NOVO, E NÃO uma correção nos outros: o mesmo botão é
   definido em cinco ficheiros (dock.css, os.css, apps.css, v4.css, intent.css),
   cada um a apertar um pouco mais o que o anterior tinha feito. Ir corrigir os
   cinco era mexer em regras que servem outros ecrãs e arriscar estragar o que
   está bem. Isto entra DEPOIS de todos e define o ritmo num só sítio — um sítio
   que se lê de uma vez e se desfaz de uma vez.

   O RITMO: uma escala só, em passos de 4, e um alvo mínimo que respeita o dedo.
   Nada aqui inventa cores — o vidro, o ciano e o âmbar são os da casa.
   ========================================================================== */

:root {
  /* Alvo mínimo para o dedo. 44 px é o piso aceite; no Jarvis OS (tablet, dedo
     sempre) sobe para 48, porque lá não há rato para compensar a pontaria. */
  --tap: 44px;
  --tap-sm: 38px;          /* só para o que é secundário e nunca urgente */
  /* Escala de espaço, em passos de 4. Usar SEMPRE estes — foi a mistura de
     2, 5, 6, 7, 9, 11 e 14 px que produziu a sensação de aperto. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
}
html[data-host="jarvisos"], body.intent-os {
  --tap: 48px;
  --tap-sm: 42px;
}

/* ===== 1 · A BARRA DE BAIXO ================================================
   O rodapé é a coisa mais tocada de toda a interface. Passa a ter ar em volta
   dos botões e entre eles, e os alvos deixam de ser menores do que a ponta do
   dedo que os procura. */
/* A ESPECIFICIDADE TEM DE BATER A DO intent.css, que usa
   `body.intent-os .hud-bottom.intent-dock` (três classes) — com `.hud-bottom`
   sozinho isto não pegava, e eu só o soube porque MEDI: a barra continuava com
   10px 16px 12px. Vem daqui a lição de não confiar na ordem dos ficheiros. */
.hud-bottom,
body.intent-os .hud-bottom.intent-dock {
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  margin-bottom: calc(var(--s4) + var(--safe-bottom));
  border-radius: 26px;          /* pílula com ombros, não um comprimido */
  align-items: stretch;
}
/* O TAMANHO NÃO SE DEFINE COM width/height AQUI, e isto é a parte que me
   escapou à primeira: o v4.css declara `width: auto !important; height: auto
   !important` nestes botões, e `!important` ganha a qualquer especificidade,
   venha o ficheiro depois ou não. Medi-o em vez de o supor — o botão dava 64×20.
   Portanto trabalha-se COM esse desenho (pílula que cresce com o conteúdo):
   `min-width` e `min-height` não estão travados e são o que garante o alvo. */
.hud-bottom .round-btn,
body.intent-os .dock-side .round-btn,
body.intent-os .intent-dock > .round-btn {
  min-width: calc(var(--tap) * 1.7 * var(--dock-scale));   /* cabe o nome sem cortar */
  min-height: calc(var(--tap) * var(--dock-scale));
  border-radius: 16px;
  padding: var(--s2) var(--s3) calc(var(--s2) - 1px);
  gap: var(--s1);
}
.dock-side,
body.intent-os .dock-side {
  gap: var(--s2);
  padding-bottom: 0;
  align-items: stretch;
}
/* AS ETIQUETAS, QUE ERA O QUE FALTAVA DE VERDADE. O nome só existia em ecrãs
   abaixo de 699 px (media query do v4.css) — no tablet dele eram seis símbolos
   iguais, sem uma palavra, e o intent.css ainda os escondia de todo. Passam a
   estar SEMPRE, e legíveis: 8 px era letra que se adivinha. */
.hud-bottom .round-btn[data-lbl]::after {
  content: attr(data-lbl);
  display: block;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.72;
  white-space: nowrap;
  pointer-events: none;
}
.hud-bottom .round-btn:hover[data-lbl]::after,
.hud-bottom .round-btn.on[data-lbl]::after { opacity: 1; }
/* No telemóvel o v4 punha a etiqueta em posição absoluta por baixo do botão, o
   que a fazia sair da barra. Aqui ela é parte do botão, e a barra cresce com ela. */
@media (max-width: 699px) {
  .hud-bottom .round-btn[data-lbl]::after { position: static; transform: none; top: auto; left: auto; }
}
/* As apps fixadas estavam entre DUAS réguas verticais, o que fechava a barra
   como uma gaiola. Fica uma só, e com ar dos dois lados. */
.hud-bottom .dock-apps { gap: var(--s2); align-items: center; padding-bottom: 0; }
.hud-bottom .dock-apps:not(:empty) {
  padding: 0 var(--s4);
  border-left: 1px solid var(--edge);
  border-right: none;
  margin-left: var(--s1);
}
.dock-app {
  width: calc(var(--tap-sm) * var(--dock-scale));
  height: calc(var(--tap-sm) * var(--dock-scale));
  border-radius: 14px;
}
/* Em ecrã estreito aperta-se um passo, não três: o dedo é o mesmo. */
/* No telemóvel os botões laterais estão escondidos por desenho (o intent.css
   esconde o .dock-side abaixo de 900 px), por isso aqui NÃO se lhes mexe no
   tamanho — a primeira versão disto punha-lhes min-width:0 e padding:0, e isso
   esmagava os botões que o Jarvis OS injeta na barra, que esses aparecem. */
@media (max-width: 699px) {
  .hud-bottom,
  body.intent-os .hud-bottom.intent-dock {
    gap: var(--s2);
    padding: var(--s3) var(--s4) calc(var(--s3) + var(--safe-bottom));
  }
  .hud-bottom .round-btn[data-lbl]::after { font-size: 9.5px; }
  .hud-bottom .dock-apps:not(:empty) { padding: 0 var(--s3); }
}

/* ===== 2 · A CAIXA DE ESCREVER =============================================
   O «teclado local para escrever» da queixa dele. A caixa e os três botões
   passam a ter a mesma altura e o mesmo raio — é o desalinhamento entre eles
   que fazia a linha parecer remendada. */
.text-bar {
  gap: var(--s3);
  padding: var(--s4) var(--s4) calc(var(--s4) + var(--safe-bottom));
  border-radius: 24px 24px 0 0;
}
.text-bar textarea,
.text-bar input {
  border-radius: 16px;
  padding: var(--s3) var(--s4);
  min-height: var(--tap);
}
.text-bar button,
.text-bar .bar-icon {
  width: var(--tap);
  height: var(--tap);
  border-radius: 16px;
}
.attach-tray { gap: var(--s2); }
.attach-chip { padding: var(--s1) var(--s2); border-radius: 12px; font-size: 12.5px; }

/* ===== 3 · MENUS DO SISTEMA (Energia, Sistema, Luminosidade) ===============
   São listas que se tocam com o dedo, uma vez, muitas vezes às escuras e com
   pressa. Cada linha passa a ter 48 px de alvo e ar entre elas — antes eram
   41 px encostadas umas às outras, e errar a linha do «Desligar» custa caro. */
.jos-power-menu {
  min-width: 246px;
  padding: var(--s2);
  gap: var(--s1);
  border-radius: 20px;
}
.jos-power-item {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 1.3;
}
.jos-power-sep { margin: var(--s2) var(--s3); }
/* Uma escolha que não se desfaz não deve estar à mesma distância do dedo que
   «mostrar o teclado»: o vermelho aparece ao aproximar, e o alvo é o mesmo. */
#josPower:hover, .jos-power-item.perigo:hover { color: #ff8b8b; }

/* ===== 4 · TABULEIRO DE SISTEMA (topo) =====================================
   Letra de 9 px é letra que ele não lê — e o que está aqui é justamente o que
   ele quer saber de relance (rede, bateria, versão). */
.tray-chip {
  font-size: 11px;
  letter-spacing: 0.8px;
  padding: var(--s1) var(--s3);
  min-height: 26px;
  display: inline-flex;
  align-items: center;
}
.sys-tray { gap: var(--s2); margin-top: var(--s2); }

/* ===== 5 · LAUNCHER DAS APPS (⊞ Apps, Música, Notas) =======================
   Este já respirava melhor; o que faltava era hierarquia — o título, a grelha
   e a explicação estavam todos ao mesmo peso, e por isso nada guiava o olho. */
.os-launcher { gap: var(--s5); padding: var(--s5) var(--s4); }
.os-launcher-head {
  gap: var(--s4);
  font-size: 12px;
  letter-spacing: 3.4px;
  opacity: 0.75;                /* é uma etiqueta de secção, não o herói */
  text-transform: uppercase;
}
.os-grid {
  grid-template-columns: repeat(auto-fit, 104px);
  gap: var(--s5) var(--s4);
  padding: var(--s2);
  max-height: 60vh;
}
.os-app { gap: var(--s3); font-size: 12.5px; }
.os-app-icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  font-size: 36px;
}
.os-app-name { max-width: 104px; line-height: 1.3; }
.os-hint { font-size: 13px; line-height: 1.6; max-width: min(560px, 84vw); }

/* ===== 6 · A GRELHA DE APLICAÇÕES NATIVAS ==================================
   A que o botão ⊞ Apps do dock nativo abre. Mesmo ritmo do launcher, para as
   duas grelhas não parecerem de sistemas diferentes. */
.apps-grelha { gap: var(--s4); padding: var(--s5) clamp(var(--s4), 4vw, var(--s6)) var(--s6); }
.apps-lista { gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.app-tile { gap: var(--s3); padding: var(--s4) var(--s2); min-height: 124px; border-radius: 18px; }
.apps-instalar { gap: var(--s3); }
.apps-nome { min-height: var(--tap); border-radius: 16px; padding: var(--s3) var(--s4); }
.apps-instalar .ghost-btn { min-height: var(--tap); padding: 0 var(--s5); border-radius: 16px; }

/* ===== 7 · O DOCK DAS JANELAS ABERTAS ===================================== */
.ws-dock { gap: var(--s2); padding: var(--s2) var(--s3); border-radius: 18px; }
.ws-chip { padding: var(--s2) var(--s3); border-radius: 12px; font-size: 12.5px; min-height: 34px; }

/* ===== 8 · O QUE FLUTUA POR CIMA DA BARRA ==================================
   Parar e os controlos do player estavam calculados sobre a altura antiga da
   barra. Com a barra mais alta ficavam a tocá-la — sobem o mesmo que ela cresceu. */
.stop-btn, .mpv-ctrl, .ws-dock {
  bottom: calc((var(--tap) + 52px) * var(--dock-scale) + var(--safe-bottom));
}
.stop-btn { padding: var(--s3) var(--s5); border-radius: 999px; }
.mpv-ctrl { gap: var(--s2); padding: var(--s2) var(--s3); }
.mpv-ctrl-bt { width: var(--tap-sm); height: var(--tap-sm); }

/* ===== 9 · AFINAÇÃO DEPOIS DE VER (não de calcular) ========================
   Com o ritmo posto, fotografei a barra. Três coisas estavam feias, e nenhuma
   delas se via nos números:
     · os ícones de 18 px flutuavam dentro de um botão de 72 — pareciam pequenos
       e mal centrados, não confiantes;
     · o azulejo das apps fixadas (música, notas) tinha metade da altura dos
       botões ao lado, e nada os alinhava;
     · a régua vertical à esquerda ficava sozinha, do tamanho da barra toda,
       como um resto de outra coisa.
   Uma altura só manda em tudo — a da caixa de escrever, que é o elemento
   dominante — e o resto alinha-se a ela. */
.hud-bottom .round-btn svg { width: 22px; height: 22px; }
.hud-bottom .round-btn {
  padding: var(--s2) var(--s4) var(--s2);
  gap: var(--s1);
  justify-content: center;
}
/* As apps fixadas passam a ter a MESMA altura dos botões, com o ícone centrado —
   deixam de parecer um selo colado ao canto. */
.hud-bottom .dock-app {
  width: auto;
  min-width: calc(var(--tap) * 1.15 * var(--dock-scale));
  height: auto;
  min-height: calc(var(--tap) * var(--dock-scale));
  align-self: stretch;
  border-radius: 16px;
  font-size: 23px;
}
/* A régua deixa de atravessar a barra de cima a baixo: fica à altura do conteúdo
   e com opacidade de sussurro. Separa sem cortar. */
.hud-bottom .dock-apps:not(:empty) {
  border-left: none;
  padding: 0 var(--s3) 0 0;
  margin: 0 var(--s1) 0 0;
  position: relative;
}
.hud-bottom .dock-apps:not(:empty)::after {
  content: "";
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 52%;
  background: var(--edge);
}
/* A caixa de escrever manda na altura, e os botões ao lado alinham-se a ela.
   Sem isto cada um crescia por sua conta e a linha ficava aos degraus. */
body.intent-os .hud-bottom.intent-dock > * { align-self: stretch; }
body.intent-os .hud-bottom.intent-dock .text-bar-row { align-items: center; }

/* O botão «Preciso de uma página para…» esticava de ponta a ponta e lia-se como
   uma faixa, não como algo em que se toca. Vi-o na fotografia, não no código.
   Volta a ser um botão: largura do conteúdo, pílula, e ar em volta. */
.os-launcher .ghost-btn,
#criarInterface {
  width: auto;
  align-self: center;
  min-height: var(--tap);
  padding: 0 var(--s5);
  border-radius: 999px;
  font-size: 14.5px;
}

/* ===== 10 · TELEMÓVEL: O CAMPO PRECISA DE LARGURA ==========================
   DEFEITO QUE EU PRÓPRIO FIZ, e que só vi na fotografia: ao dar ar aos botões
   roubei largura ao campo de escrever, e a 414 px o "Diz o que precisas…"
   passou a partir em duas linhas dentro de uma caixa de UMA linha — texto
   cortado ao meio. O ar é para sobrar espaço, não para o comer.
   Num ecrã estreito quem manda é o campo: os botões à volta encolhem um passo e
   as apps fixadas saem da barra (estão a um toque no ⊞ Apps). */
@media (max-width: 520px) {
  /* Especificidade a bater a do intent.css (`body.intent-os .dock-apps`), senão
     isto não pega — foi o mesmo tropeção de há pouco, e desta vez fui ver. */
  .hud-bottom .dock-apps,
  body.intent-os .dock-apps,
  body.intent-os .hud-bottom.intent-dock .dock-apps { display: none; }
  .text-bar { gap: var(--s2); padding: var(--s3) var(--s3) calc(var(--s3) + var(--safe-bottom)); }
  .text-bar textarea,
  .text-bar input { padding: var(--s2) var(--s3); font-size: 15.5px; }
  .text-bar button,
  .text-bar .bar-icon { width: 40px; height: 40px; border-radius: 13px; }
  .text-bar .bar-icon svg { width: 17px; height: 17px; }
}
/* E a caixa nunca corta o que tem dentro: cresce em vez de esconder. */
.text-bar textarea { overflow-y: auto; }
.text-bar textarea::placeholder { white-space: nowrap; text-overflow: ellipsis; }