/* JARVIS Online · layout responsivo (Online First, 27/10/2026).
   UMA só base de interface e de dados: o que muda por tela/orientação é APENAS o arranjo (grade, navegação, alturas).
   Largura:   < 641 px  celular (vertical): coluna única + dock inferior por toque
              641–1023  tablet/notebook estreito: barra superior, grade de 2 colunas quando cabe
              >= 1024   PC/notebook (horizontal): menu lateral fixo + painéis lado a lado
   Orientação: celular deitado (altura baixa) compacta o topo e o dock.
   Sem estilos inline (CSP style-src 'self'). */

main { max-width: 1500px; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.grade { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.grade > .card { margin-bottom: 0; min-width: 0; }
.list li span, .chat p, .result, code { overflow-wrap: anywhere; }
.result { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }
input:not([type=checkbox]):not([type=radio]), select, textarea { max-width: 100%; }
select { width: 100%; }
textarea { display: block; width: 100%; margin-top: .25rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #000d14; color: var(--fg); font: inherit; resize: vertical; }
.hist { list-style: none; margin: .3rem 0 0; padding: 0 0 0 .8rem; border-left: 2px dashed var(--line); width: 100%; font-size: .78rem; color: var(--muted); }
.top nav button { min-height: 40px; }
.passos { list-style: none; margin: .4rem 0 0; padding: 0 0 0 .8rem; border-left: 2px solid var(--line); width: 100%; }
.passos li { border: 0; padding: .25rem 0; font-size: .85rem; }
.estado { font-size: .72rem; letter-spacing: .5px; text-transform: uppercase; padding: .05rem .45rem; border: 1px solid var(--borda); border-radius: 999px; color: var(--muted); }
.estado.ok { color: var(--ok); border-color: var(--ok); } .estado.aguardando { color: var(--ambar); border-color: var(--ambar); }
.estado.erro { color: var(--err); border-color: var(--err); } .estado.simulado { color: #000; background: var(--ambar); border-color: var(--ambar); font-weight: 700; }
#nova-versao { padding: .6rem .8rem; border-radius: 8px; border: 1px solid var(--ambar); background: var(--card); }

/* ---------- tablet / notebook estreito ---------- */
@media (min-width: 641px) {
  main { padding-top: 1.2rem; }
  .top nav { flex-wrap: wrap; }
  .g-agentes, .g-operacoes { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .g-missoes { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); }
}

/* ---------- PC / notebook (horizontal): menu lateral + painéis lado a lado ---------- */
@media (min-width: 1024px) {
  body { padding-left: 232px; }
  .top { position: fixed; top: 0; left: 0; bottom: 0; width: 232px; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
         padding: 1.2rem .8rem; gap: .5rem; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--line); z-index: 6; }
  .top strong { font-size: 1.15rem; }
  .top nav { margin: .8rem 0 0; flex-direction: column; flex-wrap: nowrap; border-radius: 16px; padding: .5rem; gap: .2rem; }
  .top nav[hidden] { display: none; }
  .top nav button { width: 100%; text-align: left; padding: .6rem .8rem; font-size: .78rem; }
  main { padding: 1.5rem 2rem 2rem; }
  .g-painel { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
  .g-painel .hud { grid-column: 1; grid-row: 1 / span 3; width: 100%; max-width: 300px; }
  .g-painel > .card { grid-column: 2; }
  .g-conversas { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
  .g-conversas .chat { max-height: none; height: calc(100vh - 330px); min-height: 280px; }
  .g-operacoes { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
  #v-crm, #v-seguranca, #v-admin { max-width: 980px; }
}
@media (min-width: 1024px) and (max-height: 640px) { .g-conversas .chat { height: 46vh; } }

/* ---------- celular (vertical): toque, dock inferior, sem rolagem lateral ---------- */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  main { padding-left: max(.6rem, env(safe-area-inset-left)); padding-right: max(.6rem, env(safe-area-inset-right)); padding-bottom: calc(5.8rem + env(safe-area-inset-bottom)); }
  .top nav { justify-content: flex-start; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .top nav button { min-height: 44px; min-width: 44px; flex: 0 0 auto; padding-left: .75rem; padding-right: .75rem; scroll-snap-align: center; }   /* sem encolher: botões que encolhem se sobrepõem e o toque cai no vizinho */
  button, .list li button { min-height: 44px; }
  input, select, textarea { font-size: 16px; }              /* evita o zoom automático do iPhone ao focar */
  .row { flex-direction: column; align-items: stretch; }
  .chat { max-height: 52dvh; }
  .list li { align-items: flex-start; }
  .grade { gap: .7rem; }
}

/* ---------- celular deitado / altura baixa ---------- */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
  .hud { width: min(28vh, 120px); margin: .2rem auto .4rem; }
  .top { padding: .4rem .8rem; }
  main { padding-bottom: 4.2rem; }
  .chat { max-height: 40vh; }
}
@media (display-mode: standalone) { .top { padding-top: max(.8rem, env(safe-area-inset-top)); } }

.top nav button.ativa { color: var(--acc); box-shadow: inset 0 0 0 1px var(--borda); background: rgba(0,212,255,.08); }

/* ---------- Central de comando ---------- */
.g-central { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.g-central > div { min-width: 0; }
.chips { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .1rem; }
.chips li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: .4rem 0; font-size: .88rem; }
.chip-rotulo { color: var(--muted); }
.ferramenta { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; margin: .5rem 0; background: var(--bg); }
.ferramenta > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; min-height: 44px; }
.ferramenta > summary > span:first-child { font-weight: 600; flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.ferramenta .motivo { color: var(--err); }
.ferramenta form { margin-top: .4rem; }
.ferramenta textarea, .ferramenta input[type=text] { width: 100%; box-sizing: border-box; }
@media (min-width: 1024px) { .g-central { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); } }
.aprovador-bridge { flex: 1 1 100%; display: grid; gap: .4rem; min-width: 0; }
.aprovador-bridge p { margin: 0; }
.aprovador-bridge input { width: 100%; box-sizing: border-box; }