/* ═══════════════════════════════════════════════════════════════════════
   MYDESK — CAMADA MOBILE DO APP
   ═══════════════════════════════════════════════════════════════════════
   Carregado DEPOIS do main.css, e inteiramente dentro de uma media query:
   acima do ponto de corte este arquivo não existe para o navegador. Nada
   aqui pode alterar o desktop.

   Por que um arquivo separado: o mobile que existia estava espremido numa
   única linha de 5 mil caracteres no meio do main.css, e era ele que
   produzia a barra em três fileiras. Misturar mais regras ali seria
   impossível de ler e de desfazer.

   O que muda em relação ao que havia:

   1. A barra de ferramentas não quebra mais em fileiras. Ela vira uma
      barra fina com logo, workspace e nada mais; as ações vão para uma
      navegação inferior (ao alcance do polegar) e para uma folha "Mais".
   2. As notas saem de position:fixed. Elas guardam coordenadas de
      desktop — x perto de 800px numa tela de 390 — e por isso o quadro
      aparecia vazio: as notas existiam fora da tela. No celular elas
      viram uma lista em coluna.
   3. Todo painel flutuante (chat, clientes, amigos, eventos, fundo,
      workspaces) vira tela cheia. Painel de 320px posicionado com
      coordenadas de desktop não cabe em lugar nenhum aqui.
   4. A chamada de vídeo ocupa a tela toda, com um botão de minimizar que
      a transforma numa janelinha que se arrasta com o dedo.

   Áreas seguras do iPhone (notch e barra inferior do Safari) entram via
   env(safe-area-inset-*) — sem isso a navegação inferior fica embaixo da
   barra do navegador e não dá para tocar.
   ═══════════════════════════════════════════════════════════════════════ */

/* Elementos criados pelo mobile.js não aparecem no desktop. */
#mb-nav, #mb-sheet-bg, #mb-topbar-extra { display: none; }

@media (max-width: 860px) {

  :root {
    --mb-nav-h:  62px;   /* altura da navegação inferior, sem a área segura */
    --mb-top-h:  52px;   /* altura da barra superior */
    --mb-safe-b: env(safe-area-inset-bottom, 0px);
    --mb-safe-t: env(safe-area-inset-top, 0px);
  }

  html, body { overscroll-behavior-y: none; }

  /* ═══ 1. BARRA SUPERIOR ═══════════════════════════════════════════
     Era 'flex-wrap:wrap' com dezesseis botões, o que dava três fileiras
     e comia um quarto da tela. Agora é uma faixa fina e fixa. */
  #toolbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: auto !important;
    min-height: var(--mb-top-h);
    padding: calc(6px + var(--mb-safe-t)) 12px 6px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    z-index: 1500;
    background: rgba(13, 13, 13, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  /* Tudo que virou navegação inferior ou item da folha "Mais" sai daqui.
     Os botões continuam no DOM, com os mesmos ids e os mesmos ouvintes —
     a navegação apenas dispara o clique deles. Nada foi reimplementado. */
  #toolbar .t-sep,
  #toolbar .t-spacer,
  #toolbar .t-count,
  #toolbar #btn-new,
  #toolbar #btn-shuffle,
  #toolbar #btn-clear,
  #toolbar #btn-restore,
  #toolbar #btn-wallpaper,
  #toolbar #btn-crm-view,
  #toolbar #btn-events,
  #toolbar #btn-social,
  #toolbar #btn-invite,
  #toolbar #lofi-btn,
  #toolbar #my-status-btn,
  #toolbar #btn-admin,
  #toolbar #btn-exit { display: none !important; }

  .t-logo { margin-right: 0; }
  .t-logo img { height: 26px !important; width: auto; }

  #t-pill-ws {
    max-width: none !important;
    flex: 1 1 auto; min-width: 0;
    font-size: .74rem !important;
    padding: 5px 10px !important;
  }
  #t-user-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* O selo de Premium e o distintivo do workspace compartilhado ficam:
     são estado, não ação, e a pessoa precisa vê-los o tempo todo. */
  .t-premium-badge { flex-shrink: 0; font-size: .66rem !important; padding: 3px 9px !important; }
  #ws-toolbar-btn { flex-shrink: 0; }
  #ws-toolbar-btn .ws-active-badge { font-size: .64rem !important; max-width: 128px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ═══ 2. NAVEGAÇÃO INFERIOR ══════════════════════════════════════
     Polegar alcança a base da tela; o topo, não. As cinco ações que a
     pessoa mais usa moram aqui. */
  #mb-nav {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1700;
    padding-bottom: var(--mb-safe-b);
    background: rgba(13, 13, 13, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .mb-nav-btn {
    flex: 1 1 0; min-width: 0;
    height: var(--mb-nav-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; padding: 0;
    color: rgba(240, 240, 240, .5);
    font-family: 'Inter', sans-serif; font-size: .6rem; font-weight: 500;
    cursor: pointer; position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-nav-btn svg { width: 21px; height: 21px; stroke-width: 1.9; }
  .mb-nav-btn .mb-lbl { line-height: 1; white-space: nowrap; }
  .mb-nav-btn.active { color: #a5b4fc; }
  .mb-nav-btn:active { background: rgba(255, 255, 255, .05); }

  /* Ação principal em destaque — é o que a pessoa abre o app para fazer. */
  .mb-nav-btn.mb-primary { color: #fff; }
  .mb-nav-btn.mb-primary .mb-ico {
    width: 40px; height: 28px; border-radius: 9px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .45);
  }
  .mb-nav-btn.mb-primary svg { width: 18px; height: 18px; stroke-width: 2.6; }

  .mb-badge {
    position: absolute; top: 6px; left: 50%; margin-left: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px; background: #ef4444; border: 2px solid #0d0d0d;
    color: #fff; font-size: .56rem; font-weight: 700; line-height: 12px;
    display: none; align-items: center; justify-content: center;
  }
  .mb-badge.on { display: flex; }

  /* ═══ 3. FOLHA "MAIS" ════════════════════════════════════════════ */
  #mb-sheet-bg {
    display: none; position: fixed; inset: 0; z-index: 1750;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  }
  #mb-sheet-bg.open { display: block; }
  #mb-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #121218;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 8px 12px calc(16px + var(--mb-safe-b));
    max-height: 82vh; overflow-y: auto;
    animation: mbSheetUp .22s cubic-bezier(.16, 1, .3, 1) both;
  }
  @keyframes mbSheetUp { from { transform: translateY(100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { #mb-sheet { animation: none; } }

  .mb-grip { width: 38px; height: 4px; border-radius: 3px;
    background: rgba(255, 255, 255, .18); margin: 4px auto 12px; }
  .mb-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mb-sheet-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    padding: 15px 6px; border-radius: 14px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .07);
    color: rgba(240, 240, 240, .78);
    font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 500;
    cursor: pointer; text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-sheet-item:active { background: rgba(255, 255, 255, .1); }
  .mb-sheet-item svg { width: 19px; height: 19px; stroke-width: 1.9; }
  .mb-sheet-item.danger { color: #fca5a5; border-color: rgba(239, 68, 68, .22); }

  /* ═══ 4. QUADRO E NOTAS ══════════════════════════════════════════
     A nota é position:fixed com left/top guardados do desktop. Numa tela
     de 390px, um x de 800 põe a nota fora da tela — era por isso que o
     quadro parecia vazio mesmo com três notas. Em coluna, as coordenadas
     deixam de importar. */
  #board {
    padding: calc(var(--mb-top-h) + var(--mb-safe-t) + 12px) 12px
             calc(var(--mb-nav-h) + var(--mb-safe-b) + 24px) !important;
    gap: 12px !important;
    align-items: stretch !important;
    -webkit-overflow-scrolling: touch;
  }

  .note {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important; top: auto !important;
    z-index: auto !important;
    transform: none !important;
    flex-shrink: 0;
  }
  /* Arrastar nota não move nada aqui (ela está em fluxo), então o gesto
     fica livre para rolar a lista em vez de brigar com ela. */
  .note, .note * { touch-action: pan-y; }
  .note.dragging { transform: none !important; box-shadow: 0 6px 28px rgba(0, 0, 0, .55) !important; }

  /* Pastas viram cartões de largura cheia, na mesma coluna das notas. */
  .stack-wrap {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    left: auto !important; top: auto !important;
  }
  .stack-header { padding: 11px 12px !important; }
  .stack-header-title { font-size: .84rem !important; }

  /* Alvos de toque: 24px de área clicável não se acerta com o dedo. */
  .n-btn, .n-color-btn, .stack-toggle-btn, .stack-header-color-dot {
    min-width: 34px; min-height: 34px;
  }
  .n-title { font-size: .9rem; }
  .n-text  { font-size: .8rem; }

  /* ═══ 5. PAINÉIS EM TELA CHEIA ═══════════════════════════════════
     Todos nasceram como janelas flutuantes de 260 a 360px, ancoradas em
     coordenadas de desktop. No celular viram tela cheia. */
  #social-panel, #events-panel, #wp-panel, #pw-panel {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: none !important;
    height: 100% !important; max-height: none !important;
    transform: none !important;
    border: none !important; border-radius: 0 !important;
    padding-top: calc(var(--mb-safe-t) + 10px) !important;
    padding-bottom: calc(var(--mb-safe-b) + 16px) !important;
    z-index: 1800 !important;
    overflow-y: auto !important;
    display: none;
  }
  #social-panel.open, #events-panel.open, #wp-panel.open, #pw-panel.open,
  #social-panel.visible, #wp-panel.visible { display: flex !important; flex-direction: column; }
  #events-panel.open, #wp-panel.open, #pw-panel.open { display: block !important; }

  .sp-header { padding: 14px 16px 12px !important; }
  .sp-body { padding: 12px !important; }

  /* Botão de fechar grande, no topo — sem ele a folha vira armadilha:
     no celular não existe "clicar fora" confiável. */
  .mb-close {
    position: sticky; top: 0; float: right;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff; font-size: 1rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5; margin: 0 0 4px 8px;
    -webkit-tap-highlight-color: transparent;
  }

  /* ═══ 6. CLIENTES (CRM) ══════════════════════════════════════════
     Vinha como painel solto e sobrava fundo de tela por baixo. */
  #crm-view.visible {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1450;
    background: #0a0a0a;
    padding-top: calc(var(--mb-top-h) + var(--mb-safe-t)) !important;
    padding-bottom: calc(var(--mb-nav-h) + var(--mb-safe-b)) !important;
  }
  .cdash-hero { padding: 18px 16px 60px !important; }
  .cdash-hero-title { font-size: 1.15rem !important; }
  .cdash-kpis { grid-template-columns: 1fr !important; padding: 0 14px; }
  .cdash-kpi-num { font-size: 1.35rem !important; }
  .cdash-search { font-size: .85rem; }

  /* ═══ 7. CHAT ════════════════════════════════════════════════════ */
  .chat-win {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    border: none !important; border-radius: 0 !important;
    z-index: 1900 !important;
    padding-top: var(--mb-safe-t);
  }
  .chat-win.minimized { height: 100% !important; }
  .chat-header { padding: 12px 14px !important; }
  .chat-msgs { padding: 12px !important; }
  .chat-msg { max-width: 88% !important; }
  .chat-input-row {
    padding: 10px 12px calc(10px + var(--mb-safe-b)) !important;
    background: #111;
  }
  /* 16px é o limite abaixo do qual o Safari do iPhone dá zoom sozinho ao
     focar o campo — e depois deixa a página torta. */
  .chat-inp, .sp-add-inp, .pw-add-inp, .a-inp, input[type="text"], input[type="email"],
  input[type="password"], input[type="search"], textarea { font-size: 16px !important; }
  .chat-file-btn, .chat-send { width: 38px !important; height: 38px !important; }

  /* ═══ 8. VIDEOCHAMADA ════════════════════════════════════════════
     Era um cartão de 340x260 fixo no canto, por cima do chat, e o arraste
     só escutava mousedown — no toque não havia como tirá-lo do lugar.
     Aqui ele ocupa a tela toda; quem quiser continuar vendo o chat usa o
     botão de minimizar, e aí a janelinha se arrasta com o dedo. */
  #call-overlay {
    inset: 0 !important;
    left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    border-radius: 0 !important; border: none !important;
    resize: none !important;
    z-index: 2000 !important;
    padding-top: var(--mb-safe-t);
  }
  #call-overlay .call-header { padding: 12px 14px !important; cursor: default; }
  #call-overlay .call-grid { padding: 10px !important; gap: 10px !important; align-content: center; }
  #call-overlay .call-tile { width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; }
  #call-overlay .call-grid.has-focus .call-tile { width: 78px !important; height: 104px !important; aspect-ratio: auto; }
  #call-overlay .call-grid.has-focus .call-tile.focused { width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; }
  #call-overlay .call-controls {
    gap: 16px !important;
    padding: 14px 10px calc(16px + var(--mb-safe-b)) !important;
  }
  #call-overlay .call-ctrl-btn { width: 52px !important; height: 52px !important; font-size: 1.15rem !important; }

  /* Minimizada: janelinha arrastável. inset volta a ser automático para o
     left/top que o arraste escreve valerem de fato. */
  #call-overlay.mb-min {
    inset: auto !important;
    width: 150px !important; height: 200px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .7) !important;
    padding-top: 0;
    overflow: hidden;
    touch-action: none;   /* o dedo arrasta a janela, não rola a página */
  }
  #call-overlay.mb-min .call-title,
  #call-overlay.mb-min .call-wave,
  #call-overlay.mb-min .call-timer { display: none !important; }
  #call-overlay.mb-min .call-header { padding: 6px 8px !important; cursor: grab; }
  #call-overlay.mb-min .call-grid { padding: 4px !important; }
  #call-overlay.mb-min .call-tile { aspect-ratio: auto; height: 100% !important; }
  #call-overlay.mb-min .call-controls { gap: 6px !important; padding: 6px !important; }
  #call-overlay.mb-min .call-ctrl-btn { width: 30px !important; height: 30px !important; font-size: .72rem !important; }
  #call-overlay.mb-min .call-ctrl-btn:not(.leave):not(#call-btn-min) { display: none; }

  #call-btn-min { position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .18);
    color: #fff; font-size: .9rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
  #call-overlay.mb-min #call-btn-min { position: static; width: 30px; height: 30px; }

  /* ═══ 9. MODAIS E SOBREPOSIÇÕES ══════════════════════════════════ */
  .modal-bg { align-items: flex-end !important; }
  .modal {
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 16px calc(24px + var(--mb-safe-b)) !important;
    max-height: 90vh !important;
  }
  .admin-overlay .admin-panel {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    border-radius: 0 !important;
    padding-top: var(--mb-safe-t);
  }
  .admin-table { font-size: .7rem; }
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Avisos empilhados não podem cobrir a navegação inferior. */
  #chat-notif-stack {
    left: 10px !important; right: 10px !important;
    bottom: calc(var(--mb-nav-h) + var(--mb-safe-b) + 10px) !important;
    top: auto !important;
  }
  #toast { bottom: calc(var(--mb-nav-h) + var(--mb-safe-b) + 12px) !important; }

  .support-fab { bottom: calc(var(--mb-nav-h) + var(--mb-safe-b) + 12px) !important; }
}

/* Celulares pequenos (iPhone SE e afins) */
@media (max-width: 380px) {
  .mb-nav-btn { font-size: .55rem; }
  .mb-nav-btn svg { width: 19px; height: 19px; }
  .mb-sheet-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Telefone deitado: a tela fica baixa demais para barra + navegação. */
@media (max-width: 860px) and (max-height: 460px) and (orientation: landscape) {
  #mb-nav { --mb-nav-h: 48px; }
  .mb-nav-btn .mb-lbl { display: none; }
  #toolbar { min-height: 44px; }
}