/* === ARAUNAH COMMAND — Mobile Layer (iPhone PWA) ===
   Carregado depois do command.css. Não altera paleta/tipografia/cores
   (CLAUDE.md hard rule). Só recompõe layout, density e touch targets.
   Cobre <=768px (phone) e ajustes finos <=480px (small phone).
*/

/* ---------- TABLET / PHONE BREAKPOINT ---------- */
@media (max-width: 768px) {

  /* Body: garante zero overflow horizontal e respira safe-area iOS */
  body {
    overflow-x: hidden;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* HEADER — compacta clock/theme/push, mantém logo */
  #header {
    height: 48px;
    padding: 0 10px;
    gap: 6px;
  }
  .hdr-left { gap: 6px; flex: 1; min-width: 0; }
  .hdr-right { gap: 6px; flex-shrink: 0; }
  .logo { font-size: 13px; letter-spacing: 2px; }
  .logo-tag { display: none; } /* economia de espaço */
  .theme-bar { display: none; } /* esconde paleta/light, raro em mobile */
  .clock { display: none; }
  #header .btn,
  #header .btn.s {
    min-width: 44px;
    min-height: 36px;
    font-size: 11px;
    padding: 6px 10px;
  }

  /* SIDEBAR — vira drawer top com scroll horizontal compacto.
     A regra antiga em command.css já fez isso, mas reforçamos
     touch targets e padding pra iPhone. */
  #sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px;
    gap: 4px;
    border-right: none;
    border-bottom: 1px solid var(--br);
    /* esconde scrollbar mas mantém scroll */
    scrollbar-width: none;
  }
  #sidebar::-webkit-scrollbar { display: none; }
  .sb {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 11px;
    white-space: nowrap;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .sb.active {
    border-left: none;
    border-bottom: 2px solid var(--g);
    border-radius: 6px 6px 0 0;
  }

  /* MAIN — full width, padding reduzido */
  .layout { flex-direction: column; }
  #main {
    flex: 1;
    padding: 10px;
    max-height: none;
    width: 100%;
  }

  /* GRIDS — tudo 1 coluna por padrão; .g4 vira 2x2 pra KPIs ficarem densos */
  .g2, .g3 { grid-template-columns: 1fr; gap: 8px; }
  .g4 { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* CARDS — padding reduzido ~30% */
  .card { padding: 10px; }
  .ch { font-size: 9px; margin-bottom: 8px; padding-bottom: 5px; }

  /* MÉTRICAS — números menores que TV mas legíveis */
  .mv { font-size: 22px; }
  .ml { font-size: 8px; }
  .ms { font-size: 9px; }
  .ag-kpi .mv { font-size: 18px; }

  /* TIPOGRAFIA TV-grande → mobile */
  .tb h2 { font-size: 15px; }
  .tb { flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

  /* BOTÕES — touch target Apple HIG mínimo 44x44 (relaxado pra .s 36px) */
  .btn {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .btn.s {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 11px;
  }
  .btn.ico { min-width: 36px; min-height: 36px; }

  /* INPUTS — 16px evita zoom do iOS no foco */
  .inp, .ci, input, textarea, select {
    font-size: 16px !important;
    min-height: 40px;
  }
  .inp.is { font-size: 14px !important; min-height: 32px; }
  .ta { min-height: 80px; }

  /* PAINEL V2 — Agentes grid 1 coluna, orb menor */
  .ag-grid, .ag-grid-pro, .ag-grid-full {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ag-card-pro { padding: 12px; }
  .ag-card-pro .ag-icon,
  .ag-card-pro .ag-icon[style] {
    /* o JS força 56x56 inline; em mobile força 40x40 */
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }
  .ag-card-pro .ag-icon svg { width: 100% !important; height: 100% !important; }
  .ag-name { font-size: 13px; gap: 6px; }
  .ag-desc { font-size: 11px; }
  .ag-card-top { gap: 8px; }
  .ag-row { flex-wrap: wrap; gap: 6px; padding: 6px 0; }
  .ag-stats { font-size: 10px; }
  .ag-skill { font-size: 8px; padding: 2px 6px; }
  .ag-status { font-size: 10px; padding: 4px 10px; min-height: 24px; }

  /* HISTÓRICO / RUNS / TIMELINE — tabela vira lista de cards stacked */
  .tbl {
    display: block;
    width: 100%;
  }
  .tbl thead { display: none; }
  .tbl tbody, .tbl tr { display: block; width: 100%; }
  .tbl tr {
    background: var(--b1);
    border: 1px solid var(--br);
    border-radius: 6px;
    margin-bottom: 6px;
    padding: 8px 10px;
  }
  .tbl tr.stale { border-left: 2px solid var(--y); }
  .tbl td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: none;
    font-size: 12px;
    gap: 8px;
  }
  .tbl td::before {
    content: attr(data-label);
    font-size: 9px;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
  }
  .tbl tr:hover td { background: transparent; }

  /* TIMELINE row — stack vertical, sem cortar info */
  .tl-row {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    background: var(--b2);
    border-radius: 5px;
    margin-bottom: 4px;
  }
  .tl-icon { width: 22px; font-size: 16px; }
  .tl-agent { min-width: 0; flex: 1; font-size: 11px; }
  .tl-time { min-width: 0; font-size: 10px; color: var(--t2); }
  .tl-size { min-width: 0; font-size: 10px; }
  .tl-sum {
    width: 100%;
    white-space: normal;
    font-size: 10px;
    color: var(--t1);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tl-bar { width: 100%; max-width: none; }

  /* CRONS — listagem vertical */
  .cron-st { font-size: 10px; padding: 3px 8px; }

  /* APROVAÇÕES / ANOMALIAS / AVALIAÇÕES — cards stacked */
  .adv-list { gap: 8px; }
  .adv-card { padding: 10px; }
  .adv-card-h { font-size: 12px; }
  .adv-card-d { font-size: 11px; }
  .adv-card-a { flex-wrap: wrap; gap: 6px; }
  .adv-card-a .btn { flex: 1; min-width: 100px; }

  /* PROMPTS — tabs stack vertical */
  .tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 11px;
    min-height: 40px;
  }

  /* MENSAGENS A2A — indentação reduzida */
  .nia-msg-bubble { max-width: 95%; font-size: 11px; padding: 7px 10px; }
  .nia-grid { grid-template-columns: 1fr; gap: 6px; }
  .nia-card { padding: 8px 10px; }

  /* SETTINGS — form 1 coluna */
  #s-settings .g2,
  #s-settings .g3,
  #s-settings .g4 { grid-template-columns: 1fr; }
  #s-settings .fg { margin-bottom: 12px; }

  /* MODAIS — full-screen no mobile */
  .modal { align-items: flex-end; padding: 0; }
  .modal-c {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 10px 10px 0 0;
    margin: 0;
  }
  .modal-lg { max-width: 100%; }
  .modal-h { padding: 14px; position: sticky; top: 0; background: var(--b1); z-index: 2; }
  .modal-h h3 { font-size: 14px; }
  .modal-b { padding: 12px; }
  .modal-b .g2,
  .modal-b .g3,
  .modal-b .g4 { grid-template-columns: 1fr; gap: 8px; }
  .x-btn { font-size: 24px; min-width: 44px; min-height: 44px; }
  .ma { flex-direction: column-reverse; gap: 8px; }
  .ma .btn { width: 100%; }
  #am-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
    border-radius: 10px !important;
  }

  /* HEATMAP — cell um pouco maior pra tap */
  .heatmap-cell { width: 12px; height: 12px; }
  .heatmap-label { width: 24px; font-size: 8px; }

  /* SL (scroll list) — dá mais altura e respiração */
  .sl-item { padding: 8px; font-size: 12px; }

  /* AGENT MAP / NEURAL MAP — canvas em scroll horizontal natural */
  .nm-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  #nm-canvas { height: 55vh !important; }
  #nm-info {
    max-height: 35vh !important;
    overflow-y: auto;
  }
  #nm-toolbar {
    gap: 4px !important;
    flex-wrap: wrap;
  }
  #nm-toolbar .btn.s {
    padding: 6px 8px !important;
    font-size: 10px !important;
    min-height: 32px;
  }
  #nm-toolbar input { width: 120px !important; min-height: 36px; }

  /* NEURAL IA — chat ocupa tela inteira em mobile */
  .nia-layout {
    grid-template-columns: 1fr;
    height: auto;
    gap: 8px;
  }
  .nia-right { min-height: 360px; }
  .nia-chat-msgs { padding: 8px; }
  .nia-input-bar { padding: 8px; }

  /* NAV FAB (já existe, só ajusta tamanho touch) */
  .nav-fab-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .nav-fab-menu .nfm-item {
    padding: 12px 14px;
    font-size: 13px;
    min-height: 44px;
  }

  /* === FAB MAESTRO + SEARCH (novos) ===
     Posicionados pra não conflitar com:
     - Time-Travel: bottom:14px right:14px (já existe)
     - Nav-FAB: top:12px right:12px
     Layout: Maestro acima do Time-Travel; Search bottom-left.
  */
  #fab-maestro {
    position: fixed;
    right: 14px;
    bottom: 64px;          /* acima do Time-Travel */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--g);
    color: var(--b0);
    border: none;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    z-index: 9997;
    box-shadow: 0 4px 16px rgba(46,204,113,.45);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #fab-search {
    position: fixed;
    left: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(15,26,18,.92);
    color: var(--g);
    border: 1px solid var(--g);
    font-size: 20px;
    cursor: pointer;
    z-index: 9997;
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* SEARCH GLOBAL OVERLAY — ajusta width em mobile (overlay é injetado por JS) */
  #search-global-overlay > div {
    width: 96vw !important;
    max-width: 96vw !important;
  }
  #search-global-overlay { padding-top: 6vh !important; }

  /* MAESTRO section — input full width + quick buttons wrap */
  #s-maestro .tb { flex-direction: column; align-items: flex-start; }
  #s-maestro input { width: 100%; }
  #s-maestro .btn { flex: 1; }

  /* MENU FAB — esconde, usamos sidebar drawer (sidebar agora top horizontal funciona OK) */
  /* mantemos nav-fab pro fullscreen mode, só ajusta touch */

  /* TOASTS — não cobrir notch */
  #toasts {
    top: calc(env(safe-area-inset-top) + 56px);
    right: 10px;
    left: 10px;
  }
  .toast { max-width: none; font-size: 12px; padding: 10px 14px; }

  /* KBD overlay (atalhos) — em mobile irrelevante mas se aparecer, full-width */
  #kbd-overlay { width: 90vw; min-width: 0; }

  /* CHAT panel (lithi removido mas FAB CSS fica genérico) */
  .cp { width: calc(100% - 20px); right: 10px; bottom: 70px; height: 60vh; }

  /* SCROLLBAR mais visível em mobile (toque) */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
}

/* ---------- SMALL PHONE (<=480px, iPhone SE/mini) ---------- */
@media (max-width: 480px) {
  .g4 { grid-template-columns: 1fr 1fr; gap: 6px; }
  .mv { font-size: 18px; }
  .ag-kpi .mv { font-size: 16px; }
  .tb h2 { font-size: 14px; }
  .card { padding: 8px; }
  #main { padding: 8px; }
  .ag-card-pro { padding: 10px; }
}

/* ---------- LANDSCAPE PHONE — header não pode comer toda tela ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  #header { height: 40px; }
  #sidebar { padding: 4px 6px; }
  .sb { min-height: 32px; padding: 6px 10px; }
  #main { padding: 8px; }
}