/* Mobile UX Fixes - Load after main style.css */

/* Fix 1: Remove duplicate sticky positioning and resolve scroll conflicts */
#compose-bar {
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}

/* Fix 2: Allow touch scrolling */
main {
  touch-action: auto;
  -webkit-touch-callout: none;
  overscroll-behavior-y: contain;
}

/* Fix 3: Increase tap targets to 44px minimum (Apple HIG) */
#compose-input {
  min-height: 44px;
  font-size: 16px;
  padding: 10px 12px;
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
}

#compose-bar .btn,
#compose-bar button {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

#compose-form {
  flex-wrap: wrap;
  align-items: stretch;
}

/* Fix 4: Ensure taskq clicks work */
.taskq-card,
.tq-card,
.task-card {
  pointer-events: auto;
  z-index: auto;
}

.tq-item button,
.tq-item a,
.task-item button {
  min-height: 44px;
  touch-action: manipulation;
}

/* Fix 5: Mobile layout */
@media (max-width: 760px) {
  #compose-form {
    flex-direction: column;
    gap: 10px;
  }

  #compose-input,
  #compose-bar .btn.primary {
    width: 100%;
  }

  #compose-bar {
    padding: 12px 16px;
  }

  main {
    padding: 12px 16px calc(var(--bn-h) + env(safe-area-inset-bottom, 0px) + 20px);
    gap: 12px;
  }

  .card {
    padding: 12px 14px;
  }

  /* Reduce animation overhead on mobile */
  @media (prefers-reduced-motion: no-preference) {
    body { --animation-duration: 0.15s; }
  }

  /* Ensure modal/overlay doesn't block clicks */
  #modal-root {
    pointer-events: auto;
  }

  #modal-root > div:not(:last-child) {
    pointer-events: none;
  }

  /* Disable tap highlight delay */
  button, a, input, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Prevent double-tap zoom on mobile inputs */
input, button, textarea, select {
  touch-action: manipulation;
}

/* ══ MOBILE SCALE-UP v3 — Jun 2026 ═════════════════════════════════════════
   16px base, 13px floor para texto secundário, 12px floor absoluto.
   Cobre todos os elementos que ficavam em 10-11px no desktop.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Base: 14px → 16px */
  body {
    font-size: 16px;
    line-height: 1.55;
  }

  /* Cabeçalhos de card */
  .card h2 {
    font-size: 14px !important;
    letter-spacing: 0.06em;
  }

  /* ── Floor geral: 10-11px → 13px ── */
  .muted,
  .lbl,
  .plan-lbl,
  .plan-pct,
  .tq-host,
  .tq-time,
  .tq-model,
  .tq-duration,
  .fleet-meta,
  .hier-row .meta,
  .hier-row .pid,
  .mgr-log-row,
  .agent-meta,
  .ct-row,
  .session-row,
  .sync-row {
    font-size: 13px !important;
  }

  /* Rótulos de secção lateral e grupo */
  .group-title { font-size: 16px; }
  .sb-item { font-size: 15px; padding: 14px 18px; }
  .sb-group-label { font-size: 12px; padding: 14px 18px 5px; }

  /* Frota: chips de máquina */
  .fleet-name { font-size: 15px; }

  /* Barra de navegação inferior */
  .bn-item span:not(.bn-ico) {
    font-size: 12px !important;
    font-weight: 600;
  }

  /* Botões com touch target mínimo 44px */
  .btn,
  button:not(.bn-item):not(.sb-item):not(.card-drag-handle):not(.iib-close):not(.nos-btn-later) {
    min-height: 44px;
    font-size: 15px;
  }

  /* Cards: mais respiração */
  .card {
    padding: 16px 18px;
    gap: 14px;
  }

  /* ── Overview KPIs ── */
  .overview-kpi .lbl { font-size: 12px !important; letter-spacing: 0.04em; }
  .overview-kpi .val { font-size: 26px !important; }
  .overview-kpi .meta { font-size: 13px !important; }
  .overview-kpi { padding: 14px 16px; }

  /* ── KPI chips (mac tiles) ── */
  .kpi .label { font-size: 12px !important; }
  .kpi .value { font-size: 20px !important; }

  /* ── Bot toggle cards ── */
  .bot-toggle-name { font-size: 15px !important; }
  .bot-toggle-sub {
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.4;
  }
  .bot-toggle-status { font-size: 12px !important; }
  .bot-extra-tag { font-size: 12px !important; }
  .bot-toggle-row { padding: 12px 14px !important; gap: 10px; }
  .bot-toggles-list { gap: 12px !important; }

  /* ── Queue counts ── */
  .queue-counts .c .l { font-size: 12px !important; }
  .queue-counts .c .n { font-size: 26px !important; }

  /* ── Live KPIs ── */
  .live-kpi .lbl { font-size: 12px !important; }
  .live-kpi .val { font-size: 22px !important; }
  .live-kpi .sub { font-size: 12px !important; }

  /* ── Usage KPIs ── */
  .usage-kpi .lbl { font-size: 12px !important; }
  .usage-kpi .val { font-size: 24px !important; }

  /* ── Sugestões ── */
  .suggestion { font-size: 15px; }
  .suggestion .text span { font-size: 13px !important; }
  .suggestion button { font-size: 13px !important; min-height: 44px; }

  /* ── Taskq tabs count badge ── */
  .taskq-tab .tab-count { font-size: 12px !important; }
  .taskq-tab { font-size: 14px !important; min-height: 46px !important; }

  /* ── Bot card actions ── */
  .bot-card .actions button { font-size: 12px !important; min-height: 38px; }

  /* ── Session & event rows ── */
  .session-row .id { font-size: 13px !important; }
  .session-row .meta { font-size: 13px !important; }
  .ev .sev { font-size: 12px !important; }
  .ev .when { font-size: 13px !important; }
  .qi .when { font-size: 13px !important; }
  .daemon .host, .worker .host { font-size: 13px !important; }

  /* ── Mac alias e meta na frota ── */
  .mac-tile .alias { font-size: 13px !important; }
  .mac-tile .meta { font-size: 13px !important; }

  /* ── Bot arch cards ── */
  .bot-card .label { font-size: 12px !important; }
  .bot-card .role-text { font-size: 13px !important; }
  .bot-card .pid { font-size: 12px !important; }
  .bot-card .conn { font-size: 12px !important; }
  .arch-legend { font-size: 13px !important; }

  /* ── Task source badge ── */
  .tq-attach-badge { font-size: 13px !important; }

  /* ── Compose toast ── */
  #compose-toast { font-size: 14px !important; }
}

/* ── Telemóvel pequeno (<= 640px) ── */
@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Título das tarefas na fila */

  /* Tabs da fila de tarefas */
  .taskq-tab { font-size: 14px !important; min-height: 48px !important; }
  .taskq-tab .tab-icon { font-size: 16px; }

  /* Botões de ação da tarefa */
  .tq-mini { min-height: 48px !important; min-width: 48px !important; }

  /* Inputs maiores */
  .taskq-form input#taskq-input { font-size: 17px; }

  /* Header */
  header h1 { font-size: 18px !important; }

  /* Secção de bots telegram */
  .tg-card .name { font-size: 16px; }
  .tg-card .username { font-size: 14px; }

  /* Hierarquia */
  .hier-row .title { font-size: 15px; }

  /* tq-time/duration que v34 bumped mas ainda podem ser pequenos */
  .tq-time,
  .tq-duration { font-size: 13px !important; }
  .tq-model { font-size: 12px !important; }
  .tq-source-badge { font-size: 12px !important; }
  .mac-tile .alias, .mac-tile .meta { font-size: 13px !important; }

  /* Tornar secção de bots menos densa */
  .bot-toggle-row { padding: 14px 14px !important; }
  .bot-toggle-name { font-size: 16px !important; }
  .bot-toggle-sub { font-size: 13px !important; }

  /* Mais espaço nos cards de estado geral */
  .overview-kpi .val { font-size: 28px !important; }
  .overview-kpi .lbl { font-size: 12px !important; }
  .overview-kpi .meta { font-size: 13px !important; }
}

/* ── Melhorias mobile v4 ─────────────────────────────────────────── */

/* Garantir que texto em células de tabela não fica demasiado pequeno */
@media (max-width: 640px) {
  .ct-row, .session-row, .sync-row { font-size: 13px !important; overflow-x: auto; }
  .ct-row { min-width: 0; }

  /* task queue: títulos legíveis */
  .tq-txt { font-size: 15px !important; line-height: 1.4 !important; }
  .tq-host { font-size: 12px !important; }

  /* card h2 (títulos de secção) um pouco maiores no telemóvel */
  .card h2 { font-size: 13px !important; }
  .section-head h2 { font-size: 15px !important; }

  /* Swipe hint nos itens da bottom nav — mostra ← → debaixo */
  #bottomnav { position: relative; }
}

/* Prevenir overflow horizontal (evita scroll lateral acidental) */
/* CAUSA RAIZ do "scroll não funciona com o dedo" (iOS Safari, #268):
   overflow-x:hidden em html/body FORÇA o overflow-y (visible) a computar como
   `auto` (regra CSS: se um eixo é hidden e o outro visible, o visible vira auto).
   Isso torna o <html> um scroll-container interno — e o iOS Safari NÃO faz
   scroll por toque de um container interno, só do viewport (overflow:visible).
   Por isso só scrollava em "modo computador" (≤900px não aplica).
   Solução: `overflow-x: clip` corta o overflow horizontal SEM criar
   scroll-container, mantendo overflow-y:visible → scroll nativo do dedo volta. */
@media (max-width: 900px) {
  html { overflow-x: clip; }
  main { overflow-x: clip; }

  /* Tabelas densas → scroll horizontal contido, sem afetar swipe entre vistas */
  [data-scrollable] { touch-action: pan-y; overflow-x: auto; }

  /* Containers de dados compactos: permitir scroll horizontal sem activar swipe nav */
  .ct-breakdowns, .ct-list, .usage-charts { overflow-x: auto; touch-action: pan-y; }
}

/* SCROLL FIX iOS Safari: #compose-bar com position:sticky ao lado de header
   (ambos top:0) causa conflito no scroll container do iOS.
   Em mobile, compose-bar flui com a página normalmente. */
@media (max-width: 900px) {
  #compose-bar {
    position: relative !important;
    top: auto !important;
  }
}

/* ══ MOBILE SCALE-UP v5 — Jun 2026 ═════════════════════════════════════════
   Elementos que ainda ficavam pequenos porque style.css era carregado depois.
   Agora mobile-fixes.css vem DEPOIS de style.css — estes !important ganham.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* ── KPI meta (sub-texto dos cartões de estado geral) ── */
  .overview-kpi .meta { font-size: 13px !important; line-height: 1.4 !important; }
  .overview-kpi .lbl  { font-size: 12px !important; }

  /* ── Veredictos de saúde (ex: "2 críticos") ── */
  .vd-txt { font-size: 14px !important; }

  /* ── Badge de bots offline (usa ID para ganhar ao seletor ID no style.css) ── */
  #bots-offline-badge, .bots-offline-badge { font-size: 13px !important; padding: 3px 10px !important; }

  /* ── Timestamp no header ("actualizado 14:xx") ── */
  header .stamp { font-size: 13px !important; }

  /* ── Texto de alerta nas actions ── */
  .overview-action span { font-size: 13px !important; }

  /* ── Meta de sessões, eventos e sync ── */
  .session-row .meta { font-size: 13px !important; }
  .tg-card .meta { font-size: 13px !important; }
  .pnl-kpi .meta { font-size: 13px !important; }

  /* ── Hierarquia de processos ── */
  .hier-row .meta  { font-size: 13px !important; }
  .hier-row .title { font-size: 15px !important; }

  /* ── Mensagens de bot ── */
  .bot-msg-row .body .meta { font-size: 13px !important; }

  /* ── Secção de capacidades (product.html / nav) ── */
  .cap-title { font-size: 14px !important; }
  .cap-item  { font-size: 14px !important; }
}

/* ══ TASKQ FORM MOBILE FIX v1 — Jun 2026 ═══════════════════════════════
   Problema: input encolhia para 0 porque .taskq-actions-strip tem flex-shrink:0
   e o conjunto de botões era largo demais para caber ao lado do input.
   Solução: em mobile, input ocupa linha própria, botões ficam na linha seguinte.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Input + strip em coluna dentro de taskq-main-row */
  .taskq-main-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Input ocupa linha inteira */
  .taskq-main-row #taskq-input,
  .taskq-main-row input#taskq-input {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-height: 54px !important;
    font-size: 16px !important;
    padding: 14px 16px !important;
    order: 1 !important;
    box-sizing: border-box !important;
  }

  /* Strip de botões ocupa a segunda linha, distribui botões uniformemente */
  .taskq-actions-strip {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    order: 2 !important;
  }

  /* Botões de ícone (⚙ 📎 ⏰): fixed size, centralizados */
  .taskq-actions-strip .btn:not(#taskq-submit-btn) {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Botão submit ocupa o resto */
  #taskq-submit-btn {
    flex: 1 1 auto !important;
    min-height: 48px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 0 16px !important;
  }
}

/* ══ TASKQ CARD MOBILE v36 — Jun 2026 ═════════════════════════════════════
   No card de tarefa em mobile o título (.tq-txt) renderizava ABAIXO da faixa
   de botões de acção (order:99 vs order:1) — lia-se a acção antes de saber
   qual era a tarefa. Agora a ordem é: [ícone · host · badges] → [título] →
   [botões]. Mais natural e os botões continuam todos visíveis (já fazem wrap).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .tq-task-head .tq-txt    { order: 1 !important; }
  .tq-task-head .tq-actions { order: 2 !important; }
}