/* Savi · clean work tool. Dark first, light theme, brand colour recolours the accent and tints the neutrals. Chats look like WhatsApp. */
:root{
  /* neutrals (JS re-tints these from the business colour; these are the Savi-green defaults) */
  --bg:#080b0a; --bg-2:#0e1310; --panel:#111714; --panel-solid:#111714; --raise:#171f1b; --line:#1f2a24; --line-2:#182019;
  --ink:#eaf1ec; --ink-2:#b6c3bb; --ink-3:#7b8a82;
  /* brand accent (JS overrides from the business colour) */
  --accent:#25d366; --accent-2:#1fb457; --mint:#6ef5c0; --accent-soft:#0f2a1b; --on-accent:#04120a;
  /* semantic: never change with the brand */
  --ok:#25d366; --ok-ink:#6ef5c0; --ok-soft:#0f2a1b; --warn:#ffc46b; --warn-soft:#2b220f; --bad:#ff7b6b; --bad-soft:#33130f; --info:#7fb4ff; --info-soft:#0f1f33;
  --gold:var(--warn); --red:var(--bad); --blue:var(--info); --gold-soft:var(--warn-soft); --red-soft:var(--bad-soft); --blue-soft:var(--info-soft);
  /* WhatsApp chat palette (fixed, per theme) */
  --wa-wall:#0b141a; --wa-panel:#111b21; --wa-bar:#202c33; --wa-in:#202c33; --wa-out:#005c4b; --wa-ink:#e9edef; --wa-muted:#8696a0; --wa-hover:#202c33; --wa-active:#2a3942; --wa-input:#2a3942; --wa-green:#00a884; --wa-tick:#53bdeb; --wa-chip:#182229; --wa-line:#222d34; --wa-pattern-opacity:.06;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:14px; --r-s:9px; --nav:236px; --shadow:0 12px 34px -20px rgba(0,0,0,.85); --ring:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);
}
:root[data-theme="light"]{
  --bg:#f3f6f4; --bg-2:#ffffff; --panel:#ffffff; --panel-solid:#ffffff; --raise:#eef2ef; --line:#dbe3de; --line-2:#e9eeeb;
  --ink:#0f1a15; --ink-2:#3f4c46; --ink-3:#6f7d76;
  --accent:#12925a; --accent-2:#0f7d4c; --mint:#0d7a4a; --accent-soft:#e1f4e9; --on-accent:#ffffff;
  --ok:#12925a; --ok-ink:#0d7a4a; --ok-soft:#e1f4e9; --warn:#a86a10; --warn-soft:#fbf0d9; --bad:#b3382a; --bad-soft:#fbe7e3; --info:#2d6fd6; --info-soft:#e6efff;
  --wa-wall:#efeae2; --wa-panel:#ffffff; --wa-bar:#f0f2f5; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-ink:#111b21; --wa-muted:#667781; --wa-hover:#f5f6f6; --wa-active:#f0f2f5; --wa-input:#ffffff; --wa-green:#00a884; --wa-tick:#53bdeb; --wa-chip:#ffffff; --wa-line:#e9edef; --wa-pattern-opacity:.22;
  --shadow:0 12px 34px -24px rgba(15,26,21,.35);
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--mint)} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--accent);color:var(--on-accent)}
.mono{font-family:var(--mono)} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} .dim{color:var(--ink-3)} .dim2{color:var(--ink-2)} .small{font-size:12px} .xs{font-size:11px}
.hidden{display:none!important}
/* boot */
.boot{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.boot-mark{width:52px;height:52px;display:block;animation:pulse 1.6s infinite}
.boot-text{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-size:12px}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
/* shell */
.shell{display:grid;grid-template-columns:var(--nav) 1fr;min-height:100vh}
.nav{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:var(--bg-2);display:flex;flex-direction:column;padding:16px 12px;gap:3px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.brand .mark{width:30px;height:30px;display:block;flex:none}
.brand .name{font-weight:800;letter-spacing:-.02em;font-size:18px;line-height:1.1}
.brand .tenant{font-size:11px;color:var(--ink-3);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;margin-top:2px}
.nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:14px}
.nav a:hover{background:var(--raise);color:var(--ink)} .nav a.active{background:var(--accent-soft);color:var(--mint);box-shadow:inset 3px 0 0 var(--accent)} .nav a svg{width:18px;height:18px;flex:none}
.nav .badge{margin-left:auto;font-family:var(--mono);font-size:11px;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:1px 7px;font-weight:600}
.nav .section{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:16px 12px 6px}
.nav .spacer{flex:1} .nav .user{padding:12px 10px 4px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);display:flex;flex-direction:column;gap:6px}
.nav .user b{color:var(--ink-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 26px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg-2) 86%,transparent);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5;min-height:58px}
.topbar h1{font-size:19px;margin:0;font-weight:700;letter-spacing:-.02em} .topbar .grow{flex:1}
.content{padding:24px 26px 70px;min-width:0}
@media (max-width:920px){
  .shell{grid-template-columns:1fr}
  .nav{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;border-right:0;border-top:1px solid var(--line);padding:6px;gap:0;overflow-x:auto;z-index:20}
  .nav .brand,.nav .spacer,.nav .user,.nav .section,.nav a span.label{display:none} .nav a{flex:1;justify-content:center;padding:10px 6px;box-shadow:none} .nav .badge{position:absolute;margin:0;transform:translate(10px,-10px)}
  .content{padding:14px 12px 90px} .topbar{padding:10px 12px}
}
/* controls */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--raise);color:var(--ink);cursor:pointer;font-weight:500;line-height:1.2;white-space:nowrap;transition:background .12s,border-color .12s,transform .08s}
.btn:hover{border-color:var(--ink-3)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 70%,transparent)} .btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)} .btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2);box-shadow:none} .btn.ghost:hover{background:var(--raise)}
.btn.sm{padding:5px 10px;font-size:12px} .btn svg{width:15px;height:15px}
.input,select.input,textarea.input{width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);outline:none;transition:border-color .12s,box-shadow .12s}
.input:focus{border-color:var(--accent);box-shadow:var(--ring)} textarea.input{min-height:80px;resize:vertical} select.input{appearance:auto}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} .field label{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .row.between{justify-content:space-between} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)} .card h3{margin:0 0 10px;font-size:15px;letter-spacing:-.01em;font-weight:700} .card.pad0{padding:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)} .kpi .v{font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums} .kpi .l{font-size:13px;color:var(--ink-2);margin-top:6px} .kpi .d{font-size:12px;color:var(--mint);margin-top:4px}
.kpi.click{cursor:pointer;transition:border-color .12s,transform .1s} .kpi.click:hover{border-color:var(--accent);transform:translateY(-1px)}
.pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap;background:var(--raise)}
.pill.green{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent} .pill.gold{background:var(--warn-soft);color:var(--warn);border-color:transparent} .pill.red{background:var(--bad-soft);color:var(--bad);border-color:transparent} .pill.blue{background:var(--info-soft);color:var(--info);border-color:transparent}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:6px;background:var(--raise);border:1px solid var(--line);color:var(--ink-2);margin:1px 3px 1px 0}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)} table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:middle} th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;background:var(--bg-2);position:sticky;top:0}
tr:last-child td{border-bottom:0} tr.click{cursor:pointer} tr.click:hover td{background:var(--raise)} td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.empty{padding:40px;text-align:center;color:var(--ink-3)} .empty b{display:block;color:var(--ink-2);margin-bottom:4px;font-weight:600}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto} .tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;color:var(--ink-3);cursor:pointer;font-weight:500;white-space:nowrap;margin-bottom:-1px} .tabs button:hover{color:var(--ink)} .tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:100} .toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);max-width:360px;font-size:13px} .toast.err{border-left-color:var(--bad)} .toast.warn{border-left-color:var(--warn)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px} .modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:min(560px,100%);max-height:92vh;overflow:auto;box-shadow:var(--shadow)} .modal.wide{width:min(900px,100%)}
.modal .mh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)} .modal .mh h3{margin:0;font-size:16px} .modal .mb{padding:20px} .modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line)}
.help{font-size:12px;color:var(--ink-3);margin-top:4px} code{font-family:var(--mono);font-size:12px;background:var(--raise);padding:1px 5px;border-radius:5px} pre{font-family:var(--mono);font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--raise);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--ink-2);flex:none;font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--ink-3)} .dot.green{background:var(--ok)} .dot.gold{background:var(--warn)} .dot.red{background:var(--bad)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--bg)} .seg button{border:0;background:transparent;color:var(--ink-2);padding:5px 12px;border-radius:999px;cursor:pointer;font-size:12.5px;font-weight:500} .seg button.active{background:var(--accent-soft);color:var(--mint)}
.lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px} .linecard{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.wstep{display:flex;align-items:center;gap:10px;font-weight:700;margin:16px 0 10px;padding-top:14px;border-top:1px solid var(--line-2)} .wstep:first-child{border-top:0;padding-top:0;margin-top:0}
.wstep .n{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--mint);display:inline-grid;place-items:center;font-family:var(--mono);font-size:11px;flex:none}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0} .swatch:hover{border-color:var(--ink)}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px} .switch input{width:38px;height:22px;appearance:none;background:var(--line);border-radius:999px;position:relative;cursor:pointer;margin:0;transition:background .15s} .switch input::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ink-3);transition:.15s} .switch input:checked{background:var(--accent)} .switch input:checked::after{left:18px;background:var(--on-accent)}
.switch.savi{font-weight:600} .switch.small{font-size:12px;color:var(--ink-2)}
/* charts */
.chart{width:100%;height:190px;display:block} .chart text{font-family:var(--mono);font-size:10px;fill:var(--ink-3)} .legend{display:flex;gap:14px;font-size:12px;color:var(--ink-3);flex-wrap:wrap} .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(60% 40% at 50% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--bg)}
.login .box{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)} .login h1{margin:0 0 4px;font-size:22px;letter-spacing:-.02em} .login .sub{color:var(--ink-3);margin-bottom:18px;font-size:13px}
.steps{display:flex;gap:6px;margin-bottom:14px} .steps span{flex:1;height:3px;border-radius:2px;background:var(--line)} .steps span.on{background:var(--accent)}
.progress{height:8px;border-radius:999px;background:var(--line);overflow:hidden} .progress i{display:block;height:100%;background:var(--accent)}
.dropzone{border:1px dashed var(--line);border-radius:var(--r);padding:20px;text-align:center;color:var(--ink-3);cursor:pointer} .dropzone:hover{border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================ Chats: WhatsApp Web look ============================================================ */
.content.fill{padding:0;height:calc(100dvh - 58px);overflow:hidden}
.inbox{display:grid;grid-template-columns:360px 1fr 320px;height:100%;min-height:0;overflow:hidden;background:var(--wa-panel);color:var(--wa-ink)}
.inbox .list{border-right:1px solid var(--wa-line);display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--wa-panel)}
.inbox .list .views{display:flex;gap:6px;padding:10px 12px 6px;flex-wrap:wrap} .inbox .list .views button{border:1px solid transparent;background:var(--wa-bar);color:var(--wa-muted);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer;font-weight:500} .inbox .list .views button.active{background:color-mix(in srgb,var(--wa-green) 22%,var(--wa-bar));color:var(--wa-green)}
.inbox .list .search{padding:6px 12px 8px;border-bottom:1px solid var(--wa-line)} .inbox .list .search .input{border-radius:999px;background:var(--wa-bar);border-color:transparent;color:var(--wa-ink);padding:8px 14px} .inbox .list .search .input::placeholder{color:var(--wa-muted)} .inbox .list .search select.input{width:auto} .inbox .list .items{overflow-y:auto;flex:1;min-height:0}
.conv{display:flex;gap:12px;padding:10px 14px;cursor:pointer;align-items:center;min-height:72px} .conv:hover{background:var(--wa-hover)} .conv.active{background:var(--wa-active)}
.conv .avatar{width:49px;height:49px;font-size:15px;background:var(--wa-bar);color:var(--wa-muted)}
.conv .meta{min-width:0;flex:1;border-bottom:1px solid var(--wa-line);padding:4px 0;align-self:stretch;display:flex;flex-direction:column;justify-content:center} .conv:last-child .meta{border-bottom:0}
.conv .name{display:flex;justify-content:space-between;gap:8px;font-weight:500;font-size:16px;color:var(--wa-ink)} .conv .name .t{font-family:var(--sans);font-size:12px;color:var(--wa-muted);font-weight:400;flex:none}
.conv .prev{color:var(--wa-muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .conv .chips{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.conv .chips .pill{background:transparent;border-color:var(--wa-line);color:var(--wa-muted);font-family:var(--sans);font-size:11px;padding:1px 8px} .conv .chips .pill.gold{background:var(--warn-soft);color:var(--warn);border-color:transparent} .conv .chips .pill.green{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent} .conv .chips .pill.red{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.conv .unread{background:var(--wa-green);color:#fff;font-family:var(--sans);font-size:11px;border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px;font-weight:600}
.thread{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--wa-wall);position:relative}
.thread::before{content:'';position:absolute;inset:0;opacity:var(--wa-pattern-opacity);pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%238696a0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='30' cy='34' r='9'/><path d='M62 24l10 10-10 10-10-10z'/><path d='M120 22c8-6 18-6 26 0'/><path d='M170 30h20M180 20v20'/><circle cx='196' cy='84' r='6'/><path d='M22 96c10 6 20 6 30 0'/><path d='M90 80l8 14h-16z'/><path d='M140 96a8 8 0 1 0 16 0a8 8 0 1 0-16 0'/><path d='M40 150h22M40 158h14'/><path d='M100 140c6 8 14 8 20 0'/><circle cx='170' cy='150' r='10'/><path d='M60 196l12 12M72 196l-12 12'/><path d='M130 192a10 6 0 1 0 20 0a10 6 0 1 0-20 0'/><path d='M190 190v18M181 199h18'/></svg>")}
.thread > *{position:relative}
.thread .th{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--wa-bar);border-bottom:1px solid var(--wa-line);flex-wrap:wrap;min-height:60px} .thread .th h2{margin:0;font-size:16px;font-weight:500;color:var(--wa-ink)} .thread .th .grow{flex:1} .thread .th .back{display:none} .thread .th .who h2{margin:0} .thread .th .who{min-width:0} .thread .th .who .dim{color:var(--wa-muted)}
.thread .th .avatar{width:40px;height:40px;background:var(--wa-active);color:var(--wa-muted)} .thread .th .input{background:var(--wa-input);border-color:transparent;color:var(--wa-ink)} .thread .th .btn{background:transparent;border-color:transparent;color:var(--wa-muted)} .thread .th .btn:hover{background:var(--wa-active);color:var(--wa-ink)} .thread .th .switch{color:var(--wa-ink)}
.thread .msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 8% 10px;display:flex;flex-direction:column;gap:3px}
.thread .msgs > :first-child{margin-top:auto}
.thread-empty{margin:auto;max-width:380px;color:var(--wa-muted)} .thread-empty b{color:var(--wa-ink);font-size:20px;font-weight:400}
.msg{position:relative;max-width:min(65%,560px);padding:6px 8px 7px 9px;border-radius:8px;font-size:14.2px;line-height:1.35;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px .5px rgba(0,0,0,.13);color:var(--wa-ink)}
.msg.in{align-self:flex-start;background:var(--wa-in);border-top-left-radius:0;margin-top:8px} .msg.out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:0;margin-top:8px}
.msg.in + .msg.in,.msg.out + .msg.out{margin-top:2px;border-top-left-radius:8px;border-top-right-radius:8px}
.msg.in::before,.msg.out::before{content:'';position:absolute;top:0;width:0;height:0;border-top:10px solid var(--wa-in);border-left:8px solid transparent;left:-8px}
.msg.out::before{border-top-color:var(--wa-out);border-left:0;border-right:8px solid transparent;left:auto;right:-8px}
.msg.in + .msg.in::before,.msg.out + .msg.out::before{display:none}
.msg .who{font-size:12.5px;color:var(--wa-green);font-weight:500;margin-bottom:2px;font-family:var(--sans)} .msg.out .who{color:var(--wa-muted)}
.msg .m{float:right;display:flex;gap:4px;align-items:center;font-family:var(--sans);font-size:11px;color:var(--wa-muted);margin:8px -2px -5px 10px;line-height:1} .msg .tick{font-size:12px;letter-spacing:-2px;color:var(--wa-muted)} .msg .tick.read{color:var(--wa-tick)} .msg .tick.fail{color:var(--bad);letter-spacing:0}
.msg.held{background:var(--warn-soft);border:1px dashed var(--warn);color:var(--ink)} .msg.held::before{display:none} .msg.failed{border:1px solid color-mix(in srgb,var(--bad) 50%,transparent)}
.msg img,.msg video{max-width:100%;border-radius:6px;display:block;margin-top:4px} .msg .file{display:inline-block;margin-top:4px;font-size:12px;color:var(--wa-tick)}
.daysep{align-self:center;font-family:var(--sans);font-size:12px;color:var(--wa-muted);padding:5px 12px;background:var(--wa-chip);border-radius:8px;margin:12px 0 6px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.composer{background:var(--wa-bar);padding:8px 14px 10px;display:flex;flex-direction:column;gap:6px}
.composer .line{display:flex;gap:10px;align-items:flex-end} .composer .line > div{flex:1}
.composer textarea{min-height:44px;max-height:180px;border-radius:12px;background:var(--wa-input);border-color:transparent;color:var(--wa-ink);padding:11px 14px} .composer textarea::placeholder{color:var(--wa-muted)} .composer textarea:focus{box-shadow:none;border-color:transparent}
.composer .send{width:44px;height:44px;border-radius:50%;background:var(--wa-green);border:0;color:#fff;display:inline-grid;place-items:center;cursor:pointer;flex:none;padding:0} .composer .send svg{width:20px;height:20px} .composer .send:disabled{opacity:.5}
.composer .bar{display:flex;gap:4px;align-items:center;flex-wrap:wrap} .composer .bar .grow{flex:1} .composer .bar .btn{background:transparent;border-color:transparent;color:var(--wa-muted)} .composer .bar .btn:hover{background:var(--wa-active);color:var(--wa-ink)} .composer .bar .switch{color:var(--wa-muted)}
.window{font-family:var(--sans);font-size:11px;padding:3px 9px;border-radius:999px} .window.open{background:var(--ok-soft);color:var(--ok-ink)} .window.closed{background:var(--warn-soft);color:var(--warn)}
.heldbox{border:1px solid var(--warn);background:var(--warn-soft);border-radius:12px;padding:12px 14px;margin:0 8% 10px;color:var(--ink)} .heldbox .t{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);margin-bottom:6px} .heldbox .draft{white-space:pre-wrap;font-size:13.5px;margin:6px 0;background:color-mix(in srgb,var(--bg) 60%,transparent);padding:8px 10px;border-radius:8px} .heldbox .reason{font-size:12.5px;color:var(--ink-2)}
.side{border-left:1px solid var(--wa-line);overflow-y:auto;min-height:0;padding:16px;display:flex;flex-direction:column;gap:16px;background:var(--wa-panel);color:var(--wa-ink)}
.side h4{margin:0 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wa-muted);font-family:var(--mono)} .kv{display:grid;grid-template-columns:110px 1fr;gap:5px 10px;font-size:13px} .kv div:nth-child(odd){color:var(--wa-muted)} .side .btn{color:var(--wa-muted);border-color:transparent;background:transparent} .side .btn:hover{background:var(--wa-active)} .side a{color:var(--wa-tick)} .side .tag{background:var(--wa-bar);border-color:var(--wa-line);color:var(--wa-ink)}
.qr-pop{position:absolute;bottom:100%;left:0;right:0;background:var(--wa-bar);border:1px solid var(--wa-line);border-radius:12px;max-height:220px;overflow:auto;box-shadow:var(--shadow);z-index:3;margin-bottom:6px} .qr-pop div{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--wa-ink)} .qr-pop div:hover{background:var(--wa-active)} .qr-pop b{font-family:var(--mono);color:var(--wa-green);font-weight:500;margin-right:8px}
@media (max-width:1100px){.inbox{grid-template-columns:320px 1fr}.side{display:none}.inbox.show-side .side{display:flex;position:fixed;right:0;top:0;bottom:0;width:320px;z-index:30;box-shadow:var(--shadow)}}
@media (max-width:920px){.content.fill{height:calc(100dvh - 58px - 58px)} .inbox{grid-template-columns:1fr} .inbox .list{display:flex} .inbox.thread-open .list{display:none} .inbox .thread{display:none} .inbox.thread-open .thread{display:flex} .thread .th .back{display:inline-flex} .thread .msgs{padding:12px 12px 8px} .msg{max-width:85%} .heldbox{margin:0 12px 10px}}
.inbox .list.updating .views::after{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--wa-green);margin-left:auto;align-self:center;animation:pulse 1s infinite}