/* ==========================================================================================
   Template MOBILE do Gestor de Agentes (≤ 820px). Mesma identidade (Inter, vermelho Contajul, azul-marinho, slate),
   redesenhado para o polegar: barra superior com voltar/título/ações, barra inferior de navegação, folhas
   deslizantes no lugar de menus e janelas, tabelas em cartões e chat em tela cheia. No desktop nada disso aparece.
   ========================================================================================== */
.m-top,.m-tabs,.m-strip,.m-only{display:none}
.m-sheet[hidden],.m-only[hidden],[data-instalar][hidden]{display:none!important}

@media (max-width: 820px), (max-height: 500px) and (max-width: 1000px) and (pointer: coarse) {
  :root{--m-top:56px;--m-tabs:62px;--sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);--sa-r:env(safe-area-inset-right,0px)}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:15px;overscroll-behavior-y:none}
  body.has-mshell{padding-top:calc(var(--m-top) + var(--sa-t));padding-bottom:calc(var(--m-tabs) + var(--sa-b))}
  .m-only{display:block}.d-only{display:none!important}
  input,select,textarea,.input,.select{font-size:16px!important}          /* evita o zoom automático do iOS */
  button,a,.btn{touch-action:manipulation}

  /* ---------- esconde o shell de desktop ---------- */
  .has-mshell .sidebar,.has-mshell .header{display:none!important}
  .has-mshell .app-shell{min-height:0}

  /* ---------- barra superior ---------- */
  .m-top{display:block;position:fixed;top:0;left:0;right:0;z-index:60;padding:var(--sa-t) var(--sa-r) 0 var(--sa-l);
    background:linear-gradient(180deg,#0E1B38,#101F3D);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 18px rgba(2,6,23,.18)}
  .m-top-in{height:var(--m-top);display:flex;align-items:center;gap:.4rem;padding:0 .55rem 0 .45rem}
  .m-brand{display:grid;place-items:center;width:40px;height:40px}
  .m-brand img{width:30px;height:30px;border-radius:8px;background:#fff;padding:2px}
  .m-ico{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:#fff;text-decoration:none;font-size:1.15rem;cursor:pointer}
  .m-ico:active{background:rgba(255,255,255,.12)}
  .m-svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .m-title{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-title>*{min-width:0}
  .m-title .pill{flex-shrink:0}
  .m-title .agent-mark{flex-shrink:0}
  .m-title-sub{display:block;font-size:.7rem;font-weight:500;color:#94a3b8;margin-top:1px}
  .m-avatar{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;margin-left:.15rem;border:2px solid rgba(255,255,255,.85);border-radius:50%;background:#D01820;color:#fff;font:700 .85rem/1 Inter,system-ui,sans-serif;cursor:pointer}

  /* ---------- barra inferior (navegação) ---------- */
  .m-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:0 var(--sa-r) var(--sa-b) var(--sa-l);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
    border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(15,23,42,.06)}
  .m-tabs>a,.m-tabs>button{position:relative;height:var(--m-tabs);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:0;background:none;color:var(--slate-500);text-decoration:none;font:600 .68rem/1 Inter,system-ui,sans-serif;cursor:pointer}
  .m-tabs .m-svg{width:24px;height:24px}
  .m-tabs .on{color:var(--brand-600)}
  .m-tabs .on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--brand-600)}
  .m-tabs>*:active{background:var(--slate-100)}
  .dark .m-tabs{background:rgba(15,23,42,.94)}

  /* ---------- faixa de ações da página (ações do cabeçalho do desktop) ---------- */
  .m-strip{display:flex;gap:.5rem;align-items:center;overflow-x:auto;padding:.8rem .9rem 0;scrollbar-width:none}
  .m-strip::-webkit-scrollbar{display:none}
  .m-strip>*{flex-shrink:0}
  .m-strip .btn{min-height:40px}

  /* ---------- conteúdo ---------- */
  .main{padding:.9rem .85rem 1.4rem!important}
  .page{max-width:none}
  .space-y>*+*{margin-top:.85rem}
  .card{border-radius:1rem}
  .p-6{padding:1.1rem}.p-8{padding:1.25rem}
  .btn{min-height:44px;border-radius:.7rem}
  .btn-sm{min-height:38px}
  .callout{font-size:.85rem}
  .grid.md-grid-3,.grid.md-grid-4{grid-template-columns:1fr 1fr!important;gap:.6rem!important}
  .kpi{padding:.85rem}
  .kpi .text-2xl{font-size:1.25rem}
  .md-split{grid-template-columns:1fr!important}
  h1,h2,h3{overflow-wrap:anywhere}

  /* ---------- tabelas viram cartões (JS marca .m-stack e os rótulos) ---------- */
  table.m-stack,table.m-stack tbody,table.m-stack tr,table.m-stack td{display:block;width:100%}
  table.m-stack thead{display:none}
  table.m-stack tr{margin:0 0 .6rem;padding:.65rem .8rem;border:1px solid var(--line);border-radius:.85rem;background:var(--surface);box-shadow:0 1px 2px rgba(15,23,42,.04)}
  table.m-stack td{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;padding:.32rem 0!important;border:0!important;text-align:right!important;font-size:.86rem}
  table.m-stack td::before{content:attr(data-label);flex:0 0 auto;max-width:42%;color:var(--slate-500);font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:left;padding-top:.15rem}
  table.m-stack td[data-label=""]::before{display:none}
  table.m-stack td:first-child{font-weight:600;text-align:left!important;justify-content:flex-start}
  table.m-stack td:first-child::before{display:none}
  table.m-stack td>*{max-width:100%}
  table.m-stack td input,table.m-stack td select{max-width:60%;text-align:left}
  .card:has(>table.m-stack),.card:has(>div>table.m-stack){background:transparent;border:0;box-shadow:none;overflow:visible!important}
  .empty-row{text-align:center!important}

  /* ---------- janelas (modais) viram folhas que sobem de baixo ---------- */
  .modal-wrap{align-items:flex-end!important;padding:0!important}
  .modal-wrap .modal{max-width:none!important;width:100%;max-height:92dvh;border-radius:1.25rem 1.25rem 0 0!important;padding-bottom:var(--sa-b);animation:mSheetIn .26s cubic-bezier(.2,.9,.3,1)}
  .modal-wrap .modal.lg{max-width:none!important}
  .modal-head{position:sticky;top:0;z-index:1;background:var(--surface)}
  .modal-foot{position:sticky;bottom:0;background:var(--surface)}
  .fgrid,.agent-checks,.vis-list{grid-template-columns:1fr!important}
  .fgrid .full{grid-column:auto!important}

  /* ---------- folhas (sheets) do template mobile ---------- */
  .m-sheet{position:fixed;inset:0;z-index:95;display:block}
  .m-sheet-bg{position:absolute;inset:0;background:rgba(2,6,23,.5);opacity:0;transition:opacity .22s}
  .m-sheet.open .m-sheet-bg{opacity:1}
  .m-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
    padding:.35rem calc(1rem + var(--sa-r)) calc(1.1rem + var(--sa-b)) calc(1rem + var(--sa-l));background:var(--surface);border-radius:1.4rem 1.4rem 0 0;
    box-shadow:0 -20px 50px rgba(2,6,23,.3);transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.9,.3,1)}
  .m-sheet.open .m-sheet-panel{transform:none}
  .m-grab{width:44px;height:5px;margin:.35rem auto .9rem;border-radius:999px;background:var(--slate-300);cursor:grab}
  .m-sheet-title{margin:0 0 .7rem;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500)}
  .m-agent{display:flex;align-items:center;gap:.85rem;padding:.8rem .7rem;margin:0 -.3rem .2rem;border-radius:.9rem;text-decoration:none;color:var(--ink)}
  .m-agent:active{background:var(--slate-100)}
  .m-agent b{display:block;font-size:1rem}.m-agent small{display:block;font-size:.78rem;color:var(--slate-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-agent .agent-mark{width:2.6rem;height:2.6rem;font-size:1.05rem;border-radius:.8rem}
  .m-chev{color:var(--slate-400);font-size:1.4rem}
  .m-link-sub{display:block;text-align:center;margin:.6rem 0 .2rem;padding:.6rem;font-size:.85rem;font-weight:600;color:var(--brand-600);text-decoration:none}
  .m-user{display:flex;align-items:center;gap:.8rem;padding:.2rem .1rem .9rem;margin-bottom:.3rem;border-bottom:1px solid var(--line)}
  .m-user-av{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:#D01820;color:#fff;font-weight:800;font-size:1.15rem;flex-shrink:0}
  .m-user b{display:block;font-size:1rem}.m-user small{display:block;font-size:.78rem;color:var(--slate-500)}
  .m-group{margin:1rem 0 .5rem;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-400)}
  .m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
  .m-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-height:4.6rem;padding:.6rem .3rem;border:1px solid var(--line);border-radius:.9rem;
    background:var(--slate-50);color:var(--ink);text-decoration:none;font-size:.74rem;font-weight:600;text-align:center;line-height:1.2}
  .m-grid a span{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.6rem;background:var(--surface);color:var(--navy-600);font-size:1rem;box-shadow:0 1px 2px rgba(15,23,42,.08)}
  .m-grid a:active{border-color:var(--brand-600)}
  .dark .m-grid a{background:#0f1a30}.dark .m-grid a span{background:#111c33;color:#93c5fd}
  .m-list{display:flex;flex-direction:column}
  .m-list form{margin:0}
  .m-list a,.m-list button{display:flex;align-items:center;gap:.8rem;width:100%;min-height:50px;padding:.55rem .35rem;border:0;border-bottom:1px solid var(--line-soft,var(--line));background:none;
    color:var(--ink);text-decoration:none;font:500 .95rem Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
  .m-list span{display:grid;place-items:center;width:2rem;color:var(--slate-500);font-size:1.05rem}
  .m-list .m-danger{color:var(--brand-600)}.m-list .m-danger span{color:var(--brand-600)}
  .m-ver{margin:1rem 0 0;text-align:center;font-size:.7rem;color:var(--slate-400)}
  .m-steps{margin:0 0 .8rem;padding-left:1.2rem;line-height:1.7}
  .m-hint{font-size:.85rem;color:var(--slate-500)}
  .m-ios-share{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:.35rem;background:var(--slate-100);color:#2563eb}
  body.m-sheet-aberta{overflow:hidden}

  /* ---------- avisos (toasts) acima da barra inferior ---------- */
  #toasts{left:.75rem!important;right:.75rem!important;bottom:calc(var(--m-tabs) + var(--sa-b) + .6rem)!important}
  .m-chat #toasts{bottom:calc(6.5rem + var(--sa-b))!important}
  .toast{width:100%}

  /* ---------- Início ---------- */
  .agent-grid{display:flex!important;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -.85rem;padding:.1rem .85rem .4rem;scrollbar-width:none}
  .agent-grid::-webkit-scrollbar{display:none}
  .agent-grid .agent-card{flex:0 0 82%;scroll-snap-align:start}
  .agent-grid .agent-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .m-convs{display:flex;flex-direction:column;gap:.5rem}
  .m-conv{display:flex;align-items:center;gap:.75rem;padding:.75rem .85rem;border:1px solid var(--line);border-radius:.9rem;background:var(--surface);text-decoration:none;color:var(--ink)}
  .m-conv:active{background:var(--slate-50)}
  .m-conv .agent-mark{width:2.3rem;height:2.3rem;font-size:.9rem;border-radius:.7rem;flex-shrink:0}
  .m-conv b{display:block;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-conv small{display:block;margin-top:.1rem;font-size:.74rem;color:var(--slate-500)}
  .m-conv-st{flex-shrink:0;text-align:right;font-size:.7rem;color:var(--slate-400)}
  .m-sec-t{display:flex;justify-content:space-between;align-items:baseline;margin:1.2rem 0 .55rem;font-size:.95rem;font-weight:700}
  .m-sec-t small{font-size:.72rem;font-weight:500;color:var(--slate-500)}
  .m-empty{padding:1rem;text-align:center;font-size:.85rem;color:var(--slate-500);border:1px dashed var(--line);border-radius:.9rem}

  .m-install{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;border-radius:1rem;color:#fff;cursor:pointer;
    background:radial-gradient(18rem 8rem at 0% 0%,rgba(208,24,32,.4),transparent 60%),linear-gradient(135deg,#0E1B38,#1B3A75)}
  .m-install img{border-radius:12px;background:#fff;flex-shrink:0}
  .m-install b{display:block;font-size:.95rem}.m-install small{display:block;font-size:.76rem;color:#cbd5e1}

  /* ---------- Chat em tela cheia ---------- */
  body.m-chat.has-mshell{padding-bottom:0}
  .m-chat .m-tabs{display:none}
  .m-chat .main{padding:0!important}
  .m-chat .chat-layout{grid-template-columns:1fr!important;height:calc(var(--app-h,100dvh) - var(--m-top) - var(--sa-t))!important}
  .m-chat .chat-side{display:none!important}
  .m-chat .thread{padding:1rem .8rem .6rem}
  .m-chat .msg{font-size:.94rem}
  .m-chat .msg-foot{flex-wrap:wrap;row-gap:.2rem}
  .m-chat .msg-foot .meta{width:100%;margin-left:0}
  .m-chat .composer{padding:.5rem .6rem calc(.55rem + var(--sa-b));border-top:1px solid var(--line);background:var(--surface)}
  .m-chat .composer-box{border-radius:1.1rem}
  .m-chat .composer .hint{display:none}
  .m-chat .tool-btn{font-size:.8rem;padding:.45rem .5rem}
  .m-chat .notice{padding:.65rem .85rem;font-size:.82rem}
  .m-chat .notice .btn{min-height:38px}
  .m-chat .shortcuts{grid-template-columns:1fr!important}
  .m-chat .greeting{padding:1rem}
  .m-chat .table-wrap{margin-left:-.2rem;margin-right:-.2rem}
  .m-chat .chat-panel{position:fixed!important;top:calc(var(--m-top) + var(--sa-t))!important;bottom:0;left:0;right:0;width:100%!important;max-width:none;z-index:70;
    padding-bottom:calc(1rem + var(--sa-b));transform:translateY(102%)!important;transition:transform .28s cubic-bezier(.2,.9,.3,1)!important;border-radius:1.1rem 1.1rem 0 0;box-shadow:0 -20px 50px rgba(2,6,23,.3)!important}
  body.m-chat.panel-open .chat-panel{transform:none!important}
  .m-chat .panel-close{display:grid!important}
  .m-chat .form-actions{bottom:calc(-1rem - var(--sa-b))}
  .m-chat .fields{grid-template-columns:1fr!important}
  .m-chat .field.col-2{grid-column:auto!important}
  .m-chat-hist .side-item{display:flex;align-items:center;gap:.6rem;padding:.75rem .5rem;border-radius:.7rem;text-decoration:none;color:var(--ink);font-size:.92rem}
  .m-chat-hist .side-item.active{background:var(--slate-100);font-weight:600}
  .m-chat-hist .side-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--slate-300);flex-shrink:0}.m-chat-hist .side-dot.on{background:var(--emerald-600)}
  .m-chat-hist small{margin-left:auto;color:var(--slate-400);font-size:.72rem}

  /* ---------- Manual ---------- */
  .man-page{grid-template-columns:1fr!important}
  .man-hero{padding:1.25rem!important;border-radius:1rem}
  .man-hero h2{font-size:1.3rem!important}
  .man-hero-stat{display:none}
  .man-grid{grid-template-columns:1fr!important}
  .man-title h2{font-size:1.15rem}
  .mp{border-radius:.8rem}
  .mp-ctrl{gap:.15rem;padding:.4rem .45rem}
  .mp-b{min-width:2.4rem;height:2.4rem}
  .man-sec,.man-doc-head{padding:1rem!important}
  .man-sec-head h3{font-size:.98rem}
  .man-list .man-step{padding:.55rem .2rem}
  .man-aside .man-busca-res,.man-busca-res{width:auto!important;left:0!important;right:0!important}
  .m-busca-top{margin-bottom:.2rem}
  .man-nav{grid-template-columns:1fr!important}

  /* ---------- Usuários, perfil e gestão ---------- */
  .toolbar{display:grid!important;grid-template-columns:1fr 1fr;gap:.5rem!important}
  .toolbar>input,.toolbar>.seg{grid-column:1/-1;width:100%!important;min-width:0!important}
  .toolbar>select{width:100%!important}
  .toolbar .seg{display:grid;grid-template-columns:1fr 1fr;margin-left:0!important}
  .toolbar>.label{grid-column:1/-1;margin:0!important}
  .toolbar>#periodo{grid-column:1/-1;width:100%!important}
  .toolbar>#custom{grid-column:1/-1}.toolbar>#custom .input{flex:1;width:auto!important;min-width:0}
  .toolbar>.text-xs.muted{display:none}
  .toolbar>span[style*="margin-left:auto"]{grid-column:1/-1;margin-left:0!important}
  .toolbar>span[style*="margin-left:auto"]>.btn{flex:1}
  .toolbar>.btn{width:100%}
  .user-grid{grid-template-columns:1fr!important}
  .ustats{grid-template-columns:repeat(3,1fr)}
  .kpi-grid{grid-template-columns:1fr 1fr!important}
  .chart-grid{grid-template-columns:1fr!important}
  .profile-head{flex-wrap:wrap}
  .saldo-grid{grid-template-columns:1fr!important}
  .saldo-grid>div+div{border-left:0!important;padding-left:0!important;border-top:1px solid var(--line);padding-top:.8rem}
  .ref-item>summary{flex-wrap:wrap;gap:.5rem}
  .seg{max-width:100%;overflow-x:auto}
  .action-item{min-height:56px}

  /* ---------- Login ---------- */
  .auth-split{display:block!important;min-height:100dvh;background:#101F3D}
  .auth-hero{display:flex!important;flex-direction:column;justify-content:flex-end;min-height:34dvh;padding:calc(1.6rem + var(--sa-t)) 1.4rem 3.4rem!important;
    background:radial-gradient(30rem 16rem at 0% 0%,rgba(208,24,32,.35),transparent 60%),radial-gradient(30rem 16rem at 100% 100%,rgba(37,99,235,.3),transparent 60%),#101F3D!important}
  .auth-hero h2{font-size:1.45rem!important;line-height:1.25}
  .auth-hero .auth-hero-foot,.auth-hero p.muted{display:none}
  .auth-form{display:block!important;padding:0 1rem calc(1.5rem + var(--sa-b))!important;background:transparent!important}
  .auth-form .card{margin-top:-2rem;padding:1.4rem!important;border-radius:1.25rem;box-shadow:0 20px 50px rgba(2,6,23,.35)}
  .auth-form .card>img{display:none!important}
}

/* tablet em pé/deitado: desktop compacto (sidebar recolhível continua) */
@media (min-width: 821px) and (max-width: 1100px) {
  .main{padding:1.25rem}
}

/* app instalado (standalone) no celular: sem seleção acidental e sem "puxar para atualizar" */
@media (display-mode: standalone) and (max-width: 820px), (display-mode: standalone) and (max-height: 500px) and (pointer: coarse) {
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea,[contenteditable],.md,.bubble,.msg,.man-doc-intro,.man-list,.m-copiavel{-webkit-user-select:text;user-select:text}
}

@keyframes mSheetIn{from{transform:translateY(100%)}to{transform:none}}

/* celular grande / tablet em pé: aproveita a largura */
@media (min-width: 600px) and (max-width: 820px) {
  .user-grid,.man-grid{grid-template-columns:1fr 1fr!important}
  .agent-grid .agent-card{flex-basis:46%!important}
  .kpi-grid{grid-template-columns:repeat(3,1fr)!important}
  .m-grid{grid-template-columns:repeat(4,1fr)!important}
  .m-sheet-panel{left:50%!important;right:auto!important;width:min(560px,100%);margin-left:calc(min(560px,100%) / -2)}
}