/* =====================================================================
   ATENDIMENTO VSM 2.0 — camada visual nova (26/09/2026)
   Carregada DEPOIS de style.css. Só aparência: nenhum id/classe do app.js
   muda. Base = protótipo aprovado pelo Dr. (navy + dourado, papel claro).
   ===================================================================== */
:root{
  --navy:#0E273F; --navy2:#153453; --navy3:#1C4468;
  --gold:#C0A15A; --gold1:#8C713F; --gold2:#F3E3B7; --gold-soft:#FBF6EA;
  --bg:#F4F2EC; --panel:#FFFFFF; --panel2:#FAF8F3;
  --ink:#1F2733; --muted:#68727F; --soft:#98A2AE;
  --line:#E6E0D2; --line2:#F0EBDF;
  --ok:#1E7A4B; --ok-bg:#E3F3E9; --warn:#9A6B12; --warn-bg:#FBF0D6; --bad:#B3261E; --bad-bg:#F9E3E1; --info:#1F5FA8; --info-bg:#E3ECF8;
  --wa-out:#0E273F;
  --shadow:0 6px 24px rgba(14,39,63,.08);
}
body{background:var(--bg);color:var(--ink)}

/* ---------- Barra do topo ---------- */
.app{grid-template-rows:62px 1fr}
header{height:62px;background:linear-gradient(135deg,var(--navy),var(--navy2));border-bottom:3px solid var(--gold);border-image:none;
  box-shadow:none;gap:14px;padding:0 20px;min-width:0}
header>*{flex-shrink:0}
header .logo-img{height:38px;filter:none}
header .prod{border-left:0;padding-left:0;display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
header .prod .brand-name{font-family:'Cinzel',Georgia,serif;font-size:15px;letter-spacing:1px;color:var(--gold2);font-weight:700}
header .prod small{display:block;font-size:11px;color:#C6D0DB;margin-top:2px;font-weight:500}
.hnav{display:flex;gap:4px;margin-left:8px;flex-shrink:1;min-width:0;overflow:hidden}
.hnav .hn{background:transparent;border:0;color:#D6DEE8;padding:8px 12px;border-radius:9px;font-weight:600;font-size:13px;
  display:flex;gap:7px;align-items:center;cursor:pointer;font-family:inherit;white-space:nowrap;transition:.15s}
.hnav .hn.on{background:rgba(255,255,255,.12);color:#fff}
.hnav .hn:hover{background:rgba(255,255,255,.08)}
.hnav .hn.soon{color:#8FA0B3;cursor:not-allowed}
.hnav .hn.soon:hover{background:transparent}
.hnav .hn .hn-n{background:var(--gold);color:var(--navy);font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:99px}
.hnav .hn .hn-n:empty{display:none}
.hnav .hn .soon-tag{font-size:9px;letter-spacing:.6px;text-transform:uppercase;background:rgba(255,255,255,.08);color:#8FA0B3;padding:1px 5px;border-radius:4px}
header .conn{margin-left:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:6px 12px;border-radius:10px;font-size:12px;color:#C6D0DB;white-space:nowrap}
header .dot{background:#9AA7B4}
header .dot.on{background:#5FCB8E;box-shadow:0 0 0 3px rgba(95,203,142,.25)}
header .dot.off{background:#F08C84;box-shadow:0 0 0 3px rgba(240,140,132,.25)}
header .right{margin-left:0;gap:8px}
#reports-btn{display:none !important} /* substituído pelo item "Painel" da navegação */
.hbtn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:7px 12px}
.hbtn.gear{width:36px;height:36px;padding:0}
.hbtn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.hme{border-left:1px solid rgba(255,255,255,.14);padding-left:12px}
.hme .ava{background-color:var(--gold);color:var(--navy);font-weight:800}
.hme .rl{color:#9DB2C8}
.hmenu{top:60px;right:20px;border-radius:12px;border-color:var(--line);box-shadow:var(--shadow)}
.hmenu .mi:hover{background:var(--gold-soft)}
@media (max-width:1500px){header .prod small{display:none}}
@media (max-width:1280px){#conn-txt{display:none}header .conn{padding:6px 8px}}
@media (max-width:1100px){.hnav .hn.soon{display:none}}

/* ---------- Coluna de conversas ---------- */
.grid{grid-template-columns:330px 1fr;height:calc(100vh - 62px)}
.col-list{background:var(--panel);border-right:1px solid var(--line)}
.list-head{padding:14px 14px 6px}
.list-title{font-size:15px;font-weight:800;color:var(--ink)}
.list-title .i{color:var(--gold1)}
.seg{background:transparent;padding:0;gap:6px;margin-top:10px}
.segb{flex:0 0 auto;border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:4px 11px;font-size:12px;color:var(--muted)}
.segb.on{background:var(--navy);border-color:var(--navy);color:#fff}
.segb:not(.on):hover{background:var(--panel2)}
.search{margin:10px 14px 8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--soft)}
.search input{color:var(--ink)}
.newconv-btn{margin:0 14px 10px;padding:9px;border:1.5px dashed var(--gold);background:transparent;color:var(--navy);border-radius:10px;text-align:center;font-size:13px}
.newconv-btn:hover{background:var(--gold-soft);border-style:dashed}
.rail-h{color:var(--gold1);font-size:10.5px;padding:12px 14px 6px}
.rail-h .cnt{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.tabs.mini .tab{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:99px;font-weight:600}
.tabs.mini .tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.tabs.mini .tab:not(.on):hover{background:var(--panel2)}
.conv{padding:11px 14px;border-left:0;border-bottom:1px solid var(--line2);align-items:flex-start;gap:10px}
.conv:hover{background:var(--panel2)}
.conv.open{background:var(--panel2);box-shadow:inset 3px 0 0 var(--gold);border-left:0}
.conv .ava{width:44px;height:44px;font-size:14px;background-color:var(--navy);color:#fff}
.conv .nome{font-size:13.5px;font-weight:700;color:var(--ink)}
.conv .hora{color:var(--soft);font-size:11px}
.conv .prev{color:var(--muted);font-size:12.5px;margin-top:2px}
.conv .meta{margin-top:5px;gap:5px;flex-wrap:wrap}
.conv .ctag{font-size:10px;font-weight:700;border-radius:6px;padding:2px 7px;line-height:1.5;letter-spacing:.2px}
.conv .badge{background:var(--gold);color:var(--navy);font-weight:800;border-radius:99px;font-size:11px}
.conv .open-pill{background:var(--ok-bg);color:var(--ok);border:0;font-size:10px;padding:2px 7px;border-radius:6px}
.slachip{border-radius:6px}
.slachip.ok{background:var(--ok-bg);color:var(--ok)}
.slachip.warn{background:var(--warn-bg);color:var(--warn)}
.slachip.crit{background:var(--bad-bg);color:var(--bad)}
.fupchip{background:var(--info-bg);color:var(--info);border-radius:6px}
.fupchip.due{background:var(--bad-bg);color:var(--bad)}
.rail-scroll::-webkit-scrollbar,.msgs::-webkit-scrollbar,.drawer-body::-webkit-scrollbar,.deck::-webkit-scrollbar{width:8px;height:10px}
.rail-scroll::-webkit-scrollbar-thumb,.msgs::-webkit-scrollbar-thumb,.drawer-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.deck::-webkit-scrollbar-thumb{background:var(--gold);border-radius:8px}
.deck::-webkit-scrollbar-track{background:var(--panel2)}
/* grupos internos */
.g:hover{background:var(--panel2)}
.g.sel{background:var(--panel2);border-left-color:var(--gold)}
.g-ic{background:var(--navy);color:var(--gold2);border-radius:11px}
.g-nm{color:var(--ink);font-weight:700}
.g-badge{background:var(--gold);color:var(--navy)}
.rail-new{background:transparent;border-color:var(--gold);color:var(--navy)}
.rail-new:hover{background:var(--gold-soft)}

/* ---------- Deck (várias conversas lado a lado) ---------- */
.deck{background:var(--bg)}
.panel{background:var(--bg);border-right:1px solid var(--line);min-width:360px;max-width:760px}
.panel-head{background:var(--panel);border-bottom:1px solid var(--line);padding:11px 16px;gap:12px}
.panel-head .ava{width:40px;height:40px;font-size:14px;background-color:var(--navy);color:#fff}
.panel-head .nome{font-size:14.5px;color:var(--ink)}
.panel-head .sub{color:var(--muted);font-size:12px}
.icon-btn{border-radius:9px;border-color:var(--line);color:var(--muted);width:32px;height:32px}
.icon-btn:hover{background:var(--panel2);border-color:var(--gold);color:var(--navy)}
.icon-btn.close:hover{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.assign-row{background:var(--panel2);border-bottom:1px solid var(--line);padding:6px 16px;font-size:11.5px}
.assign-who{color:var(--muted)}
.assign-who.mine{color:var(--ok)}
.abtn{border-color:var(--line);color:var(--ink);background:var(--panel);border-radius:8px;padding:4px 10px}
.abtn:hover{background:var(--panel2);border-color:var(--gold)}
.abtn.ghost{color:var(--soft)}
.msgs{padding:18px 18px 10px;background-image:none;background:var(--bg)}
.bubble{max-width:68%;padding:9px 12px 7px;border-radius:14px;font-size:13.5px;box-shadow:0 1px 2px rgba(0,0,0,.06);margin-bottom:12px}
.in{background:var(--panel);border-bottom-left-radius:4px;border-top-left-radius:14px}
.out{background:var(--navy);color:#fff;border-bottom-right-radius:4px;border-top-right-radius:14px}
.bubble .t{color:var(--soft);font-size:10.5px;margin-top:4px}
.out .t{color:#C9D3DE}
.bubble .t .ck.read{color:var(--gold2)}
.out .doc{color:#fff}
.out a.msg-link{color:#fff}
.bubble.call{background:var(--panel2);border:1px dashed var(--line);color:var(--muted)}
.bubble.call .call-txt{color:var(--muted)}
.bubble .reaction{border-color:var(--line)}
.evt span{background:var(--panel);border:1px solid var(--line);color:var(--muted);box-shadow:none;border-radius:99px;font-size:11px;padding:3px 10px}
.note-card{background:var(--warn-bg);border:1px dashed var(--warn);color:var(--ink);border-radius:12px;max-width:68%;margin:8px 0 12px auto}
.note-card .nlabel{color:var(--warn);letter-spacing:.4px;text-transform:uppercase;font-size:10.5px}
.note-card .ntime{color:var(--warn)}
.adcard{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:10px;margin:8px 0 12px 0}
.adcard .adtxt b{color:var(--ok);font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.fwd-btn{background:var(--navy);width:26px;height:26px;top:-8px;right:8px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.in .fwd-btn{right:auto;left:8px}
.compose{background:var(--panel);border-top:1px solid var(--line);padding:10px 14px;gap:8px}
.compose .attach{width:38px;height:38px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.compose .attach:hover{background:var(--panel2);border-color:var(--gold)}
.compose .attach .i{color:var(--muted)}
.compose input[type=text]{border-radius:12px;background:var(--panel2);padding:11px 14px;font-size:13.5px}
.compose input[type=text]:focus{border-color:var(--gold);background:var(--panel)}
.compose .send{width:42px;height:42px;border-radius:12px;background:var(--navy);box-shadow:none}
.compose .send:hover{background:var(--navy2)}
.compose .send .i{color:#fff}
.note-toggle.on{background:var(--warn-bg);border-color:var(--warn)}
.compose-input-note{background:var(--warn-bg) !important;border-color:var(--warn) !important}
.qr-menu,.fup-menu,.call-menu,.transfer-menu,.tag-menu,.int-new-menu,.fwd-menu{border-color:var(--line);box-shadow:var(--shadow);border-radius:12px}
.qr-menu .qitem .qs{color:var(--gold1)}
.m-back{background:var(--panel2);border:1px solid var(--line)}

/* deck vazio / boas-vindas (agora sobre fundo claro) */
.deck-empty{color:var(--muted)}
.deck-empty .big{color:var(--ink)}
.deck-empty .sm{color:var(--muted)}
.wcard{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--gold);box-shadow:var(--shadow);border-radius:14px}
.wcard .wlogo{background:var(--navy);box-shadow:none}
.wcard h2{color:var(--navy)}
.wcard p{color:var(--muted)}
.wstat{background:var(--panel2);border:1px solid var(--line);border-radius:12px}
.wstat .n{color:var(--navy);font-family:'Cinzel',Georgia,serif;font-weight:700}
.wstat .n.amber{color:var(--warn)}.wstat .n.green{color:var(--ok)}.wstat .n.red{color:var(--bad)}
.wstat .l{color:var(--muted)}
.whint{color:var(--soft)}

/* chat interno / Íris */
.int-msgs{background:var(--bg)}
.ibubble{border-color:var(--line);border-radius:14px}
.ibubble.out{background:var(--navy)}
.ibubble .iwho{color:var(--gold1)}
.ibubble.out .iwho{color:var(--gold2)}
.int-panel .int-head{background:linear-gradient(120deg,var(--navy),var(--navy2))}

/* ---------- Ficha do contato (drawer) ---------- */
.drawer{width:340px;box-shadow:-12px 0 40px rgba(14,39,63,.18)}
.drawer-head{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:22px 18px 20px}
.drawer-head .ava.big{border:3px solid var(--gold);background-color:var(--navy3)}
.ficha-nome{font-size:16px}
.ficha-phone{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;color:#C6D0DB}
.drawer-body{padding:14px 18px;background:var(--panel2)}
.ficha-row{border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.ficha-row b{color:var(--ink)}
.stage-sel{border-color:var(--line);background:var(--panel);color:var(--ink);border-radius:9px}
.obs-label{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold1);margin:16px 0 8px}
.obs-label .i{color:var(--gold1)}
.obs-hint{text-transform:none;letter-spacing:0;color:var(--soft)}
#obs-text{background:var(--panel);border-color:var(--line);color:var(--ink);border-radius:10px}
#obs-text:focus{border-color:var(--gold)}
#obs-save{background:var(--navy);border-radius:9px}
.tag-add{border-color:var(--gold);color:var(--navy);background:var(--panel)}
.tag-chip{border-radius:6px;font-size:10.5px}

/* ---------- Modais ---------- */
.modal-wrap{background:rgba(10,20,35,.55)}
.modal{border-radius:14px;border-top:4px solid var(--gold);box-shadow:var(--shadow);padding:16px 20px 18px}
.modal-head{margin-bottom:10px}
.modal-head b{font-size:15px;color:var(--ink)}
.modal-x{background:transparent;color:var(--muted);font-size:15px}
.modal-x:hover{color:var(--bad)}
.modal-sub{color:var(--gold1);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;border-top-color:var(--line)}
.team-form input,.team-form select,.team-form textarea{background:var(--panel2);border-color:var(--line);border-radius:9px}
.team-form input:focus,.team-form textarea:focus{border-color:var(--gold);background:var(--panel)}
.team-form button,#bot-save,.ted-save,.btn-primary,.tag-new button{background:var(--navy);color:#fff;border-radius:9px}
.rep-periods{background:var(--panel2);border:1px solid var(--line)}
.rep-periods button.on{background:var(--navy)}
.rcard{border-radius:12px;border-color:var(--line)}
.rcard h4{color:var(--gold1);letter-spacing:1px}
.rkpi{font-family:'Cinzel',Georgia,serif;font-weight:700}
.rb{background:var(--gold)}
.rb.alt{background:var(--navy)}
.toast{background:var(--navy);border-left:4px solid var(--gold);border-radius:10px}

/* ---------- Login ---------- */
.auth-brand::after{background:var(--gold)}
.brand-title{color:var(--gold2)}
.brand-line{background:var(--gold)}
.form-hi{font-family:'Cinzel',Georgia,serif;font-weight:700;color:var(--navy);font-size:22px}
.field .inp{border-radius:10px;background:var(--panel2)}
.field .inp:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(192,161,90,.18);background:#fff}
.forgot{color:var(--gold1)}

/* ---------- Celular ---------- */
@media (max-width:820px){
  .app{grid-template-rows:56px 1fr}
  header{height:56px;padding:0 12px;gap:8px}
  .grid{height:calc(100vh - 56px)}
  .hnav{display:none}
  header .prod{display:none}
  .drawer{width:100vw}
}

/* cabeçalho das seções da lista: uma linha só */
.rail-h>span{white-space:nowrap}
.rail-h .tabs.mini{gap:3px}
.rail-h .tabs.mini .tab{padding:3px 8px;font-size:10px}