/* ===================================================================
   DIGITALVET — camada MOBILE / PWA
   Tudo isolado atrás de @media (max-width: 768px): o desktop não muda.
   Complementa (não substitui) o style.css.
   =================================================================== */

/* Shell usa a altura DINÂMICA da viewport: não fica atrás da barra do
   navegador no celular. Em telas que não suportam dvh, cai no 100vh do
   style.css automaticamente. */
.app { height: 100dvh; }

/* Controles injetados pelo mobile.js ficam ocultos no desktop. */
.nav-toggle, .nav-backdrop, .chat-back { display: none; }

@media (max-width: 768px) {

  /* ---------------- Inputs: 16px mata o zoom automático do iOS -------- */
  input, textarea, select,
  .search, .composer-input, .login-field input { font-size: 16px !important; }

  /* ---------------- Topbar compacta + safe-area (notch) -------------- */
  .topbar {
    height: calc(54px + env(safe-area-inset-top));
    flex-basis: calc(54px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 10px 0; gap: 8px;
  }
  .topbar-head { min-width: 0; flex: 1; }
  .page-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-sub { display: none; }
  .title-row { gap: 8px; }
  .title-row .conn-pill { position: static; margin: 0 0 0 6px; padding: 5px 9px; font-size: 12px; gap: 0; }
  .title-row .conn-pill span:not(.dot) { display: none; } /* só a bolinha de status */
  .title-row .conn-pill .dot { width: 12px; height: 12px; }
  .topbar-actions { gap: 7px; }
  .icon-btn { width: 40px; height: 40px; font-size: 17px; }
  #theme-toggle { width: 40px; height: 40px; font-size: 19px; }
  .topbar-center, .topbar-user, .user-meta, .logout-btn { display: none; } /* nome/email/sair vão pro drawer */

  /* botão hambúrguer (injetado) */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text); font-size: 21px; cursor: pointer;
  }
  .nav-toggle:active { background: var(--surface-3); }

  /* ---------------- Sidebar vira drawer off-canvas ------------------ */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    width: 82vw; max-width: 300px; flex-basis: auto;
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 0 46px rgba(0,0,0,.55); overflow-y: auto; overscroll-behavior: contain;
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .brand-text, .nav-item span { display: inline; }        /* rótulos voltam no drawer */
  .nav-item { padding: 14px 14px; font-size: 15.5px; }     /* alvos de toque maiores */
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity .28s;
  }
  .app.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* ---------------- Configurações: cabe na largura do celular ------- */
  .cfg-card { padding: 16px; }
  .cfg-logo-row { gap: 14px; }
  /* grade de horários empilha (dia / aberto / horários) p/ não cortar */
  .ar-day { grid-template-columns: 1fr; gap: 7px; }
  .ar-day-times { justify-content: flex-start; flex-wrap: wrap; }
  .ar-cooldown input, .ar-delay input { width: 84px; }

  /* ---------------- Views: menos respiro lateral -------------------- */
  .view { padding: 14px; }
  #view-kanban { padding: 14px 0 14px 14px; }
  .overview-row { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---------------- Chat: UM painel por vez (lista OU conversa) ------ */
  .chat-list { width: 100%; flex: 1 1 auto; border-right: 0; }
  .chat-main { display: none; }
  .chat-view.mobile-thread .chat-list { display: none; }
  .chat-view.mobile-thread .chat-main { display: flex; flex: 1 1 auto; }
  .messages { padding: 14px 12px; }
  .bubble { max-width: 86%; }
  .bubble-img, .bubble-video { max-width: min(72vw, 260px); }
  .chat-header { padding: 10px 12px; gap: 9px; }
  .chat-header .chat-rename { padding: 8px 10px; }        /* alvo de toque */
  .composer { padding: 9px 9px calc(9px + env(safe-area-inset-bottom)); gap: 7px; }
  .composer-emoji, .composer-send, .composer-sc, .composer-attach { width: 44px; height: 44px; flex: 0 0 auto; }
  .emoji-popup { left: 8px; right: 8px; width: auto; }
  /* botão VOLTAR no header do chat (injetado) */
  .chat-back {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
  }
  /* apagar mensagem: sempre acessível no toque (não depende de hover) */
  .bubble .msg-del { opacity: .9; pointer-events: auto; }
  .bubble.out .msg-del { left: -30px; } .bubble.in .msg-del { right: -30px; }

  /* ---------------- Kanban: rolagem horizontal com "snap" ----------- */
  .kanban { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-right: 14px; }
  .kcol { flex: 0 0 84vw; min-width: 84vw; scroll-snap-align: center; }

  /* ---------------- Tabelas largas rolam sozinhas ------------------- */
  .perf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------------- Evita pull-to-refresh recarregar o app ---------- */
  .messages, .conversations, .kcol-body, .contact-detail, .view { overscroll-behavior: contain; }
}

/* Telas bem estreitas: KPIs em 1 coluna */
@media (max-width: 430px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
}