/* ============================================================
   WhatsApp Messenger · MG.tech Auditoria e Contabilidade
   Identidade MG.tech: chama vermelho→azul, ciano #0EA5E9,
   grafite #0F172A, Plus Jakarta Sans. Tokens via lumia-theme.
   ============================================================ */

@import url('/whatsapp/assets/lumia-theme.css');

/* Mapeamento de tokens Lumia pras variáveis usadas pelo /whatsapp/ */
:root {
  --bg:           var(--lm-bg-soft);
  --surface:     var(--lm-bg);
  --surface-2:   var(--lm-bg-raised);
  --border:      var(--lm-line);
  --border-strong: var(--lm-line-strong);
  --text:        var(--lm-ink);
  --text-soft:   var(--lm-ink-dim);
  --accent:      var(--lm);
  --accent-soft: var(--lm-soft);
  --success:     var(--lm-success);
  --warn:        var(--lm-warn);
  --danger:      var(--lm-danger);
  --shadow-sm:   var(--lm-sh-sm);
  --shadow-md:   var(--lm-sh-md);
  --radius:      var(--lm-r-lg);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family: var(--lm-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--lm-ink);
  background: var(--lm-bg-soft);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01", "ss03";
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:transparent;color:inherit}
input,textarea,select{font:inherit;color:inherit}

/* ====== Layout shell ====== */
.shell{display:flex;height:100vh;overflow:hidden}

aside.side{
  width:96px;
  background: var(--lm-bg);
  border-right: 1px solid var(--lm-line);
  display:flex;flex-direction:column;align-items:center;
  padding:18px 8px;gap:6px;
  flex-shrink:0;
  overflow-y:auto;
}
aside.side .logo{
  width:52px;height:52px;
  border-radius:16px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg,#1F2937 0%,#0F172A 100%);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  box-shadow:
    0 10px 26px -10px rgba(239,68,68,.45),
    0 6px 18px -8px rgba(14,165,233,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;overflow:hidden;
}
aside.side .logo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background: linear-gradient(135deg,#EF4444 0%,#A855F7 50%,#0EA5E9 100%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
          mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.7;
}
aside.side .logo svg{position:relative;z-index:1;width:30px;height:30px}
aside.side .nav{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:4px}
aside.side .nav a.nav-item{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 4px 9px;border-radius:12px;
  color: var(--lm-ink-faint);
  font-size:10px;text-align:center;line-height:1.1;font-weight:500;letter-spacing:.005em;
  transition: color 180ms var(--lm-ease), background 180ms var(--lm-ease), transform 200ms var(--lm-ease);
  text-decoration:none;
  isolation:isolate;
}
aside.side .nav a.nav-item .ico{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;
  transition: transform 220ms var(--lm-ease), background 180ms var(--lm-ease);
}
aside.side .nav a.nav-item .ico svg{width:22px;height:22px;display:block}
aside.side .nav a.nav-item .nav-dot{
  position:absolute;left:-10px;top:50%;transform:translateY(-50%) scaleY(.3);
  width:3px;height:26px;border-radius:3px;
  background: linear-gradient(180deg,#EF4444 0%, #A855F7 50%, #0EA5E9 100%);
  opacity:0;transition: opacity 200ms var(--lm-ease), transform 220ms var(--lm-ease);
  pointer-events:none;
}
aside.side .nav a.nav-item:hover{
  color: var(--lm-deep);
  background: var(--lm-softer);
}
aside.side .nav a.nav-item:hover .ico{transform: translateY(-1px)}
aside.side .nav a.nav-item:active .ico{transform: scale(.94)}
aside.side .nav a.nav-item.active{
  color: var(--lm-darker);
  background: linear-gradient(180deg, var(--lm-softer) 0%, var(--lm-soft) 100%);
  font-weight:700;
}
aside.side .nav a.nav-item.active .ico{
  background: #fff;
  box-shadow:
    0 1px 0 rgba(15,23,42,.04),
    0 6px 14px -6px rgba(14,165,233,.35);
  color: var(--lm-deep);
}
aside.side .nav a.nav-item.active .nav-dot{
  opacity:1;transform: translateY(-50%) scaleY(1);
}
/* CTA Pareamento — destaque MG.tech (chama vermelho→azul) */
aside.side .pareamento-icon{
  margin-top:auto;margin-bottom:4px;
  padding:12px 4px 10px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;
  font-size:10px;font-weight:700;letter-spacing:.01em;line-height:1.1;
  color: var(--lm-ink);
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(239,68,68,.10) 0%, rgba(239,68,68,0) 60%),
    radial-gradient(120% 120% at 80% 100%, rgba(14,165,233,.12) 0%, rgba(14,165,233,0) 60%),
    var(--lm-bg);
  border:1px solid var(--lm-line);
  box-shadow:
    0 1px 0 rgba(15,23,42,.02),
    0 8px 18px -10px rgba(239,68,68,.18),
    0 6px 14px -10px rgba(14,165,233,.18);
  transition: transform 200ms var(--lm-ease), box-shadow 200ms var(--lm-ease), border-color 200ms var(--lm-ease);
  position:relative;overflow:hidden;
}
aside.side .pareamento-icon::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background: linear-gradient(90deg,#EF4444 0%,#A855F7 50%,#0EA5E9 100%);
  opacity:.85;
}
aside.side .pareamento-icon .ico{
  width:32px;height:32px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,#0F172A 0%,#1F2937 100%);
  color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px -4px rgba(15,23,42,.5);
}
aside.side .pareamento-icon .ico svg{width:20px;height:20px}
aside.side .pareamento-icon:hover{
  transform: translateY(-2px);
  border-color: var(--lm-line-strong);
  box-shadow:
    0 1px 0 rgba(15,23,42,.04),
    0 14px 28px -12px rgba(239,68,68,.30),
    0 10px 22px -12px rgba(14,165,233,.30);
}
aside.side .pareamento-icon.active{
  border-color:transparent;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(239,68,68,.18) 0%, rgba(239,68,68,0) 60%),
    radial-gradient(120% 120% at 80% 100%, rgba(14,165,233,.20) 0%, rgba(14,165,233,0) 60%),
    var(--lm-bg);
  box-shadow:
    0 0 0 1px rgba(239,68,68,.25),
    0 14px 28px -12px rgba(239,68,68,.35);
}

/* ====== Top bar ====== */
header.topbar{
  height:64px;background: var(--lm-bg);
  border-bottom: 1px solid var(--lm-line);
  display:flex;align-items:center;padding:0 22px 0 18px;gap:18px;
  flex-shrink:0;
}
/* Wordmark MG.tech · WhatsApp Messenger */
header.topbar .brand-mgtech{
  display:inline-flex;align-items:center;gap:14px;
  padding:6px 14px 6px 8px;
  border-radius: var(--lm-r-lg);
  text-decoration:none;
  transition: background 160ms var(--lm-ease), box-shadow 160ms var(--lm-ease);
}
header.topbar .brand-mgtech:hover{background: var(--lm-bg-soft);box-shadow: var(--lm-sh-sm)}
header.topbar .brand-mgtech .brand-logo{
  height:36px;width:auto;display:block;
  filter: drop-shadow(0 1px 0 rgba(15,23,42,.04));
  flex-shrink:0;
}
header.topbar .brand-mgtech .brand-divider{
  width:1px;height:28px;
  background: linear-gradient(180deg, transparent 0%, var(--lm-line-strong) 50%, transparent 100%);
}
header.topbar .brand-mgtech .brand-tool{
  display:inline-flex;flex-direction:column;line-height:1.1;gap:2px;
}
header.topbar .brand-mgtech .brand-tool-eyebrow{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color: var(--lm-ink-faint);
}
header.topbar .brand-mgtech .brand-tool-name{
  font-size:13.5px;font-weight:700;color: var(--lm-ink);letter-spacing:-.01em;
}
header.topbar h1{
  font-size:13px;font-weight:600;letter-spacing:.02em;margin:0;
  flex:1;color:var(--lm-ink-dim);text-transform:uppercase;
  position:relative;padding-left:14px;
}
header.topbar h1::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;
  background: linear-gradient(135deg,#EF4444,#0EA5E9);
}
header.topbar .pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius: var(--lm-r-pill);
  font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
}
.pill.active{background: var(--lm-success-soft);color:#065F46}
.pill.inactive{background: var(--lm-warn-soft);color:#92400E}
header.topbar .user{display:flex;align-items:center;gap:8px;font-size:13px;color: var(--lm-ink-dim)}

/* ====== Content ====== */
main.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.content{flex:1;overflow:auto;padding:28px 32px}
.content.flush{padding:0}

/* ====== Cards ====== */
.card{
  background: var(--lm-bg);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-lg);
  box-shadow: var(--lm-sh-sm);
  padding: 20px;
}
.card h2{font-size:15px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
.card .desc{font-size:12px;color: var(--lm-ink-dim);margin:0 0 14px}

.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ====== Stat tile ====== */
.stat{display:flex;align-items:center;gap:14px;padding:18px}
.stat .icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background: var(--lm-soft);color: var(--lm-deep);
}
.stat .num{font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.stat .label{font-size:12px;color: var(--lm-ink-dim)}

/* ====== Buttons (Lumia style) ====== */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding: 8px 14px;
  border-radius: var(--lm-r);
  border: 1px solid var(--lm-line);
  background: var(--lm-bg);
  color: var(--lm-ink-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms var(--lm-ease);
  text-decoration: none;
}
.btn:hover{border-color: var(--lm-line-strong);color: var(--lm-ink);background: var(--lm-bg-soft)}
.btn.primary{background: var(--lm);color:#fff;border-color: var(--lm)}
.btn.primary:hover{background: var(--lm-deep);border-color: var(--lm-deep)}
.btn.ghost{border-color: transparent;background:transparent}
.btn.ghost:hover{background: var(--lm-bg-raised)}
.btn.subtle{background: var(--lm-bg-raised);color: var(--lm-ink)}
.btn.danger{color: var(--lm-danger);border-color: var(--lm-danger-soft);background:transparent}
.btn.danger:hover{background: var(--lm-danger-soft);color: var(--lm-danger);border-color: var(--lm-danger)}

/* ====== Tabs ====== */
.tabs{display:flex;gap:4px;border-bottom: 1px solid var(--lm-line);margin-bottom:18px}
.tabs button{
  padding: 10px 18px;
  font-size:13px;font-weight:600;
  color: var(--lm-ink-dim);
  border-bottom: 2px solid transparent;
  transition: all 160ms var(--lm-ease);
}
.tabs button.active{color: var(--lm-deep);border-color: var(--lm)}
.tabs button:hover{color: var(--lm-ink)}

/* ====== List items ====== */
.list-item{
  display:flex;align-items:center;gap:14px;
  padding: 14px 18px;
  border-radius: var(--lm-r);
  border: 1px solid var(--lm-line);
  background: var(--lm-bg);
  cursor:pointer;
  transition: all 160ms var(--lm-ease);
}
.list-item:hover{border-color: var(--lm);box-shadow: var(--lm-sh-sm)}
.list-item .avatar{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background: var(--lm-soft);color: var(--lm-deep);font-weight:700;
  flex-shrink:0;
}
.list-item .info{flex:1;min-width:0}
.list-item .info .name{font-weight:600;font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .info .meta{font-size:12px;color: var(--lm-ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .badge{
  background: var(--lm);color:#fff;border-radius: var(--lm-r-pill);
  padding: 2px 8px;font-size:11px;font-weight:600;
}

/* ====== Tables ====== */
table.data{
  width:100%;border-collapse:collapse;
  background: var(--lm-bg);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-lg);overflow:hidden;
  box-shadow: var(--lm-sh-sm);
}
table.data th, table.data td{
  padding: 12px 16px;text-align:left;
  border-bottom: 1px solid var(--lm-line-soft);
  font-size:13px;
}
table.data th{
  background: var(--lm-bg-soft);
  font-weight:600;color: var(--lm-ink-dim);
  text-transform:uppercase;font-size:11px;letter-spacing:.04em;
}
table.data tr:last-child td{border-bottom:0}
table.data tr:hover td{background: var(--lm-bg-soft)}

/* ====== Forms ====== */
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-row label{
  font-size:11px;font-weight:600;
  color: var(--lm-ink-dim);
  text-transform:uppercase;letter-spacing:.04em;
}
.form-row input, .form-row textarea, .form-row select{
  width:100%;padding: 10px 12px;
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r);
  background: var(--lm-bg);
  font-size:13px;
  transition: all 160ms var(--lm-ease);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:none;
  border-color: var(--lm);
  box-shadow: var(--lm-sh-glow);
}
.form-row textarea{min-height:120px;resize:vertical;font-family:inherit}

/* ====== Empty / loading ====== */
.empty{text-align:center;padding: 60px 20px;color: var(--lm-ink-dim)}
.empty .icon{font-size:48px;margin-bottom:12px;opacity:.4}

/* ====== Alert ====== */
.alert{
  padding: 12px 16px;
  border-radius: var(--lm-r);
  font-size:13px;
  border: 1px solid var(--lm-line);
  background: var(--lm-bg-soft);
  margin-bottom:16px;
}
.alert.warn{background: var(--lm-warn-soft);border-color: #FCD34D;color:#78350F}
.alert.info{background: var(--lm-soft);border-color: var(--lm-glow);color: var(--lm-darker)}
.alert.danger{background: var(--lm-danger-soft);border-color:#FCA5A5;color:#991B1B}
.alert.success{background: var(--lm-success-soft);border-color:#6EE7B7;color:#065F46}

/* ====== Settings tile grid ====== */
.settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.settings-tile{
  background: var(--lm-bg);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-lg);
  padding: 24px 18px;
  text-align:center;cursor:pointer;
  transition: all 200ms var(--lm-ease);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;
  color: var(--lm-ink);
}
.settings-tile:hover{
  border-color: var(--lm);
  transform: translateY(-2px);
  box-shadow: var(--lm-sh-md);
}
.settings-tile .glyph{font-size:36px}
.settings-tile img{width:48px;height:48px;object-fit:contain;opacity:.7;transition: opacity 160ms var(--lm-ease)}
.settings-tile:hover img{opacity:1}
.settings-tile h3{font-size:13px;margin:0;font-weight:600;letter-spacing:-.01em}

/* ====== Modal (Lumia style) ====== */
.modal-bg{
  position:fixed;inset:0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display:none;align-items:center;justify-content:center;
  padding: 20px;
}
.modal-bg.show{display:flex;animation: lm-fade 180ms var(--lm-ease)}
.modal-box{
  background: var(--lm-bg);
  border-radius: var(--lm-r-lg);
  max-width: 600px;width:90%;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow: var(--lm-sh-xl);
  animation: lm-slide-up 240ms var(--lm-ease);
}
.modal-head{
  padding: 18px 22px;
  border-bottom: 1px solid var(--lm-line-soft);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-head h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.modal-body{padding: 22px;overflow:auto;flex:1}
.modal-foot{
  padding: 14px 22px;
  border-top: 1px solid var(--lm-line-soft);
  background: var(--lm-bg-soft);
  display:flex;gap:8px;justify-content:flex-end;
}

/* ====== Spinner ====== */
.spinner{
  width:32px;height:32px;
  border: 3px solid var(--lm-line);
  border-top-color: var(--lm);
  border-radius:50%;
  animation: spin 0.8s linear infinite;
  margin: 40px auto;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ====== Responsive ====== */
@media(max-width:900px){
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-3{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  header.topbar .brand-mgtech .brand-tool{display:none}
  header.topbar .brand-mgtech .brand-divider{display:none}
}
@media(max-width:600px){
  /* Mobile-first: sidebar vira bottom nav, chat ocupa tela toda.
     Usa 100dvh pra acomodar barra dinâmica do iOS Safari/Chrome Android. */
  html,body{height:100dvh}
  .shell{flex-direction:column;height:100dvh}
  aside.side{
    position:fixed;bottom:0;left:0;right:0;width:100%;height:60px;
    flex-direction:row;justify-content:flex-start;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
    border-top:1px solid var(--lm-line);border-right:0;border-top-color:var(--lm-line-strong);
    z-index:100;background:var(--lm-bg);overflow-x:auto;overflow-y:hidden;
    box-shadow:0 -6px 18px -10px rgba(15,23,42,.12);
    scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  aside.side::-webkit-scrollbar{display:none}
  aside.side .logo{display:none}
  aside.side .nav{flex-direction:row;gap:2px;flex:0 0 auto;margin:0;align-items:stretch}
  aside.side .nav-item,
  aside.side .pareamento-icon{
    flex:0 0 auto;min-width:64px;padding:5px 8px;gap:3px;
    flex-direction:column;font-size:10px;border-radius:10px;
    justify-content:center;align-items:center;text-align:center;
    scroll-snap-align:start;
  }
  aside.side .nav-item .ico,
  aside.side .pareamento-icon .ico{width:24px;height:24px}
  aside.side .nav-item .ico svg,
  aside.side .pareamento-icon .ico svg{width:22px;height:22px}
  aside.side .nav-item .nav-label,
  aside.side .pareamento-icon .nav-label{font-size:10px;line-height:1.1;font-weight:600;letter-spacing:.005em;white-space:nowrap}
  aside.side .nav-item .nav-dot{display:none}
  aside.side .nav-item.active{
    background:linear-gradient(180deg, rgba(239,68,68,.06), rgba(14,165,233,.06));
    color:var(--lm-deep);
  }
  aside.side .nav-item.active .ico{color:var(--lm-deep)}
  aside.side .pareamento-icon{margin:0 4px 0 4px;background:transparent;border:1px solid var(--lm-line)}
  aside.side .pareamento-icon::before{display:none}

  main.main{padding-bottom:calc(60px + env(safe-area-inset-bottom));min-height:100dvh}
  header.topbar{padding:0 10px;gap:6px;height:48px;position:sticky;top:0;z-index:50}
  header.topbar .brand-mgtech{padding:2px 4px;gap:4px}
  header.topbar .brand-mgtech .brand-logo{height:24px;width:auto}
  header.topbar h1{font-size:11px;padding-left:6px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
  header.topbar .pill{font-size:10px;padding:3px 8px;white-space:nowrap}
  header.topbar .user{display:none}

  /* Chat: layout single-column, mensagens full-width */
  .chat-layout{grid-template-columns:1fr;height:calc(100dvh - 48px - 60px - env(safe-area-inset-bottom))}
  .chat-left{
    border-right:0;border-bottom:0;
    height:100%;max-height:none;
  }
  .chat-left .topbar-tabs{padding:8px 6px 0}
  .chat-left .topbar-tabs .tabs button{padding:7px 4px;font-size:11px;gap:3px}
  .chat-left .topbar-tabs .tabs button .badge{font-size:9px;padding:1px 4px}
  .chat-left .search{padding:8px 10px}
  .chat-left .search input{font-size:14px;padding:10px 12px}
  .chat-list .item{padding:10px 12px;gap:10px}
  .chat-list .item .ava{width:44px;height:44px;font-size:13px}
  .chat-list .item .meta .nm{font-size:14px}
  .chat-list .item .meta .lst{font-size:12px}
  .chat-left.hide-on-mobile{display:none}
  .chat-pane.hide-on-mobile{display:none}
  .chat-pane{height:100%}
  .chat-pane .head{padding:8px 10px;gap:8px}
  .chat-pane .head .ava{width:36px;height:36px;font-size:13px}
  .chat-pane .head .nm{font-size:14px}
  .chat-pane .head .ph{font-size:11.5px}
  .chat-pane .head .stats{display:none}
  .chat-pane .actions{padding:6px 10px;gap:5px}
  .chat-pane .actions .pill{padding:6px 10px;font-size:12px;min-height:34px}
  .chat-pane .actions .badge-status{font-size:10px;padding:3px 8px}
  .chat-pane .actions .timer{font-size:11px;padding:3px 8px}
  .messages{padding:12px 10px;gap:6px}
  .msg{max-width:85%;font-size:14px;padding:7px 10px}
  .msg.media-img img,.msg.media-vid video{max-width:240px;max-height:280px}
  .msg.media-doc{min-width:200px}
  .composer{padding:8px 10px;gap:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .composer textarea{font-size:16px;padding:10px 14px;min-height:42px}
  .composer .attach,.composer .send{width:42px;height:42px}

  /* Grid genérico — cards de stats em 2 colunas ficam mais legíveis que 1 */
  .grid.cols-4, .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid.cols-2, .settings-grid{grid-template-columns:1fr}
  .content{padding:12px}
  .stat .value{font-size:18px}
  .btn,button.btn{min-height:44px;font-size:14px}
  input[type=text],input[type=password],input[type=search],input[type=email],input[type=tel],textarea,select{font-size:16px}

  /* Tabelas em telas pequenas — overflow horizontal sem quebrar layout */
  table{font-size:12px}
  table.data,table.r,.drilldown table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  table.data td,table.data th,table.r td,table.r th,.drilldown table td,.drilldown table th{white-space:nowrap}

  /* Modal full-width-ish */
  .lm-modal{width:96%;max-width:none;padding:18px 16px;border-radius:14px}
  .lightbox img{max-width:96vw;max-height:96vh}

  /* Funcionarios — summary 4 cards vira 2 colunas */
  .summary{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}

  /* Transmissão — stats 4 cols vira 2 */
  .stats{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:380px){
  aside.side .nav-item,
  aside.side .pareamento-icon{min-width:54px;padding:4px 6px}
  aside.side .nav-item .nav-label,
  aside.side .pareamento-icon .nav-label{font-size:9px}
  .chat-left .topbar-tabs .tabs button{font-size:10px;padding:6px 3px}
  .chat-list .item .ava{width:40px;height:40px}
  .msg.media-img img,.msg.media-vid video{max-width:200px;max-height:240px}
}