:root{
  /* SUPPLIER identity: «ЛАТУНЬ» — заимствовано из vendor-portal Design Lab (тема d3
     в финальном виде Ивана: чёрная база d3b=black + приглушені статуси, р.16/19/31):
     нейтральный чёрный графит, песочно-золотой металл (#c9a06a/#d9b075), кремовый
     текст #ece7dc, тёплые hairlines rgba(226,201,158,*). Клієнти лишаються tg-синіми.
     Диагональная штриховка тёплым — «шліфований метал». */
  /* warmth lives ONLY in the primary text + brass accents/bubbles; secondary text,
     hairlines and the chat pattern stay NEUTRAL — an all-beige cast read as «наложен
     фильтр» (Ivan). Portal gets away with warm secondaries because it's card-dense;
     a chat is text-dense, so the muted tones dominate the canvas. */
  --bg:#0b0b0d; --bg2:#111114; --bg3:#1a1a21; --bg-active:#3d2f1a; --line:#1c1c22;
  --txt:#ece7dc; --muted:#a4a4a8; --muted2:#76767c;
  --accent:#c9a06a; --accent2:#d9b075; --gold:#d9b075;
  --in:#141419; --out:#35291a; --out-auto:#1d1d24; --avatar:#232329;
  --ok:#8fae94; --warn:#d9b075; --bad:#c78d7d;
  --hub:#7c5cff; --vp:#2ec2a8;
  --pattern-ink:255,255,255;   /* rgb-триплет: чернила ОСИ текстур (тёплые темы переопределяют) */
  --chat-pattern:repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 16px);
  --chat-pattern-size:auto;
}

/* ── THEMES — переключатель (палитра в шапке), localStorage('supTheme'), дефолт без
   атрибута = «Латунь · чорна» (:root выше). Значения перенесены из vendor-portal
   Design Lab: d3 (тёплый графит), v1 «Поглиблення», v2 «Чорнило». Каждая тема —
   ТОЛЬКО переменные; компоненты полностью var-driven. meta theme-color синхронизирует
   app.js (THEMES map) — тайтлбар PWA следует теме. */
:root[data-theme="latun-warm"]{
  --bg:#101117; --bg2:#15161d; --bg3:#1d1f2b; --bg-active:#3f3019; --line:#20212b;
  --txt:#ece7dc; --muted:#b3ab9b; --muted2:#7d7768;
  --in:#171821; --out:#3a2d19; --out-auto:#20222c; --avatar:#272935;
  --pattern-ink:226,201,158;
  --chat-pattern:repeating-linear-gradient(135deg, rgba(226,201,158,.018) 0 2px, transparent 2px 16px);
  --chat-pattern-size:auto;
}
:root[data-theme="v1"]{
  --bg:#0a0f1d; --bg2:#0d1526; --bg3:#182338; --bg-active:#1d4436; --line:#1b2438;
  --txt:#f1f5f9; --muted:#94a3b8; --muted2:#64748b;
  --accent:#10b981; --accent2:#34d399; --gold:#e0b34a;
  --in:#121a2e; --out:#155243; --out-auto:#111d33; --avatar:#1c2740;
  --ok:#34d399; --warn:#e0a24a; --bad:#e06c6c;
  --chat-pattern:radial-gradient(circle at 50% 50%, rgba(255,255,255,.02) 0 1px, transparent 1px);
  --chat-pattern-size:24px 24px;
}
:root[data-theme="v2"]{
  --bg:#05070e; --bg2:#090d18; --bg3:#121a2c; --bg-active:#1b2a45; --line:#131a2a;
  --txt:#e8edf4; --muted:#8b98ab; --muted2:#66718a;
  --accent:#10b981; --accent2:#34d399; --gold:#d9b25a;
  --in:#0d1424; --out:#182741; --out-auto:#0f1728; --avatar:#141d31;
  --ok:#34d399; --warn:#e0a24a; --bad:#e06c6c;
  --chat-pattern:none;
}
/* Стандартна (tg-синя) — исходная Telegram-dark палитра supplier-чата, та же гамма,
   что у клиентского приложения; --out-auto = родной стальной #22303e, аватарки
   нейтральный navy (урок «полутона» сохранён и здесь). */
:root[data-theme="tg"]{
  --bg:#0e1621; --bg2:#17212b; --bg3:#202b36; --bg-active:#2b5278; --line:#101921;
  --txt:#ffffff; --muted:#7d8e9b; --muted2:#6d7f8c;
  --accent:#5288c1; --accent2:#6ab3f3; --gold:#d9b25a;
  --in:#182533; --out:#2b5278; --out-auto:#22303e; --avatar:#243447;
  --ok:#4fae4e; --warn:#e0a24a; --bad:#e06c6c;
  --chat-pattern:radial-gradient(circle at 50% 50%, rgba(255,255,255,.02) 0 1px, transparent 1px);
  --chat-pattern-size:24px 24px;
}
/* Slate Grey v2 — по референсам Ивана: сланец сам по себе монохромен и глохнет, он
   живёт В ПАРЕ с цветом. База = сланцевая лестница (#333B44→#778899, затемнена под
   чат), партнёры: ОЛИВА в интерактиве (#6B8E23/#99a72b семья), ГЛУБОКИЙ ЧИРОК в своих
   пузырях и активной комнате (#1f5a6e), морская зелень #8FBC8F в ok. Янтарь — только
   звёздам/деньгам. */
:root[data-theme="slate"]{
  --bg:#0f1216; --bg2:#151a20; --bg3:#1e252d; --bg-active:#1f4a5c; --line:#20272f;
  --txt:#e8ecf1; --muted:#94a2b0; --muted2:#6b7885;
  --accent:#94a94f; --accent2:#b9cb72; --gold:#d9b25a;
  --in:#171d24; --out:#1d4553; --out-auto:#1b222a; --avatar:#242d36;
  --ok:#8fbc8f; --warn:#d8a35c; --bad:#c98383;
  --chat-pattern:repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 16px);
  --chat-pattern-size:auto;
}

/* ── TEXTURES — независимая ось (data-texture): любая текстура × любая тема; '' = «Як
   тема». Чернила — rgb-триплет --pattern-ink темы. Блоки ПОСЛЕ тем — текстура побеждает. */
:root[data-texture="none"]{ --chat-pattern:none }
:root[data-texture="dots"]{ --chat-pattern:radial-gradient(circle at 50% 50%, rgba(var(--pattern-ink),.02) 0 1px, transparent 1px); --chat-pattern-size:24px 24px; --chat-pattern-pos:0 0 }
:root[data-texture="stripes"]{ --chat-pattern:repeating-linear-gradient(135deg, rgba(var(--pattern-ink),.015) 0 2px, transparent 2px 16px); --chat-pattern-size:auto; --chat-pattern-pos:0 0 }
:root[data-texture="stripes-r"]{ --chat-pattern:repeating-linear-gradient(45deg, rgba(var(--pattern-ink),.015) 0 2px, transparent 2px 16px); --chat-pattern-size:auto; --chat-pattern-pos:0 0 }
:root[data-texture="grid"]{ --chat-pattern:repeating-linear-gradient(45deg, rgba(var(--pattern-ink),.009) 0 1.5px, transparent 1.5px 16px),repeating-linear-gradient(135deg, rgba(var(--pattern-ink),.009) 0 1.5px, transparent 1.5px 16px); --chat-pattern-size:auto; --chat-pattern-pos:0 0 }
:root[data-texture="waffle"]{ --chat-pattern:repeating-linear-gradient(0deg, rgba(var(--pattern-ink),.008) 0 1px, transparent 1px 18px),repeating-linear-gradient(90deg, rgba(var(--pattern-ink),.008) 0 1px, transparent 1px 18px); --chat-pattern-size:auto; --chat-pattern-pos:0 0 }
:root[data-texture="scale"]{ --chat-pattern:radial-gradient(circle at 100% 50%, transparent 20%, rgba(var(--pattern-ink),.013) 21% 34%, transparent 35%),radial-gradient(circle at 0% 50%, transparent 20%, rgba(var(--pattern-ink),.013) 21% 34%, transparent 35%); --chat-pattern-size:36px 72px, 36px 72px; --chat-pattern-pos:0 0, 18px 36px }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,textarea{font:inherit;color:inherit}
a{color:var(--accent2)}
/* themed scrollbars (buyer parity); #roomList/#thread — FADING: thumb visible only while
   scrolling (JS toggles .scrolling; @property makes the color var animatable → smooth fade) */
@property --sbc { syntax: '<color>'; inherits: false; initial-value: transparent; }
#roomList::-webkit-scrollbar,#thread::-webkit-scrollbar,.modal-subs::-webkit-scrollbar,.modal-thread::-webkit-scrollbar,#composer textarea::-webkit-scrollbar{width:8px}
.modal-subs::-webkit-scrollbar-thumb,.modal-thread::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
#roomList,#thread{--sbc:transparent;transition:--sbc .6s ease .1s}
#roomList.scrolling,#thread.scrolling{--sbc:rgba(255,255,255,.22);transition:--sbc .12s ease}
#roomList::-webkit-scrollbar-thumb,#thread::-webkit-scrollbar-thumb{background:var(--sbc);border-radius:4px}
/* composer textarea: scrollbar FULLY hidden (no arrows, no thumb) — still wheel-scrollable */
*::-webkit-scrollbar-button{display:none !important;width:0 !important;height:0 !important}
#composer textarea{scrollbar-width:none;overflow-y:auto}
#composer textarea::-webkit-scrollbar{width:0 !important;height:0 !important;display:none !important}

#app{display:flex;height:100vh;overflow:hidden}

/* ---- sidebar ---- */
#sidebar{width:min(360px,32vw);min-width:300px;display:flex;flex-direction:column;background:var(--bg2)}
#sidebar header{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.brand{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand .title{font-weight:600;font-size:17px}
.brand-actions{display:flex;align-items:center;gap:7px;min-width:0}
.brand .me{color:var(--muted);font-size:12px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.searchrow{display:flex;gap:6px}
.searchrow input{flex:1;background:var(--bg);border:1px solid transparent;border-radius:18px;padding:8px 14px;color:var(--txt);outline:none}
.searchrow input:focus{border-color:var(--accent)}
.searchrow input::placeholder{color:var(--muted2)}
.filters{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.filters .spacer{flex:1}
.icon-btn{background:transparent;border:none;color:var(--muted);font-size:15px;padding:5px 7px;border-radius:6px;line-height:1}
.icon-btn:hover{background:var(--bg3);color:var(--txt)}
.conn-dot{width:9px;height:9px;border-radius:50%;background:var(--muted2);flex:none;transition:background .2s}
.conn-dot.status-on{background:var(--ok)} .conn-dot.status-off{background:var(--bad)}
/* unresolved filter as a buyer-style pill toggle (was a raw checkbox) */
.filter-toggle{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer}
.filter-toggle:hover{color:var(--muted);border-color:rgba(255,255,255,.2)}
/* active state deliberately QUIET (Ivan: тумблер не должен акцентировать внимание) —
   neutral raise, no theme-accent fill; reads the same in every theme */
.filter-toggle.active{background:rgba(255,255,255,.07);color:var(--txt);border-color:rgba(255,255,255,.22)}
.filter-toggle i{font-size:11px}

#roomList{flex:1;min-height:0;overflow-y:auto}
.room{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.02);min-width:0}
.room:hover{background:var(--bg3)}
.room.active{background:var(--bg-active)}
.room.active .room-preview,.room.active .room-time,.room.active .room-order{color:rgba(255,255,255,.72)}
/* avatar = vendor initial on a NEUTRAL disc + a tiny corner Hub/VP chip. Was
   background:var(--accent) — a full accent-coloured circle per photo-less room massed
   the theme hue over the whole list («всё желтовато-песочное/синее» — Ivan). */
.room-thumb{position:relative;width:48px;height:48px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--avatar)}
/* avatar = flat disc with the vendor initial; the product photo (when present) covers it (buyer parity) */
.avatar-initial{font-size:20px;font-weight:600}
.room-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* товаров в комнате (>1) — угловой бейдж на аватарке; визуал из buyer-чата (.thumb-count) */
.thumb-count{position:absolute;bottom:-1px;right:-1px;min-width:15px;height:15px;padding:0 3px;box-sizing:border-box;border-radius:8px;background:rgba(10,10,13,.85);color:rgba(255,255,255,.85);font-size:10px;font-weight:600;line-height:15px;text-align:center;box-shadow:0 0 0 1.5px rgba(255,255,255,.12)}
.room-main{flex:1;min-width:0}
.room-top,.room-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
.room-name{font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-order{color:var(--muted2);font-weight:400;font-size:12.5px}
.room-time{color:var(--muted2);font-size:12px;flex:none}
.room-preview{color:var(--muted);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.room.unread .room-name{font-weight:700}
/* unread = clean green dot (supplier unread is boolean; a fake-count pill reads worse than buyer's counted badge) */
.room .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.room-meta-r{display:inline-flex;align-items:center;gap:5px;flex:none}
.room-resolved-tick{color:var(--ok);font-size:11px;display:inline-flex}
/* resolved rooms: dim the TEXT block only — the old whole-row opacity let the theme
   background bleed through white product photos («будто цветофильтр над фото» — Ivan);
   photos stay crisp, text recedes */
.room.resolved .room-main{opacity:.6}
.room.resolved:hover .room-main,.room.resolved.active .room-main{opacity:1}
/* divider between the unresolved block and the resolved block (sort = unresolved-first) */
.room-group-gap{height:auto;margin:16px 14px 6px;padding-top:9px;text-align:center;border-top:1px solid var(--border,rgba(128,128,128,.4));font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted,#8a8a8a)}
.room-group-gap::after{content:'вирішені'}
/* cold-contact (no history yet) — surfaced by an order-number search */
.room.virtual .room-preview{font-style:italic;color:var(--muted2)}
.room.virtual .room-thumb{opacity:.85}

/* ---- main ---- */
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#main .head{padding:10px 16px;min-height:56px;display:flex;flex-direction:column;align-items:stretch;gap:6px;background:var(--bg2);position:relative}
#main .head .head-row{display:flex;align-items:center;gap:12px;min-height:34px}
/* order review stars in the head (mirrors buyer chat) */
.hi-stars{font-size:13px;letter-spacing:1px;flex:none;white-space:nowrap}
.hi-stars.rv-bad{color:#e06c6c}.hi-stars.rv-mid{color:#e0a24a}.hi-stars.rv-good{color:#e0b34a}
.hi-prod.clickable,.sub-name.clickable{cursor:pointer}
.hi-prod.clickable:hover,.sub-name.clickable:hover{color:var(--accent2);text-decoration:underline}
/* send + resolve button + post-send resolve prompt */
.send-btn.send-resolve{background:transparent;color:var(--ok)}
.send-btn.send-resolve:hover{background:rgba(143,174,148,.14);color:#b9d8bd}
.modal-foot .send.send-resolve{background:transparent;border:1px solid var(--ok);color:var(--ok)}
.modal-foot .send.send-resolve:hover:not(:disabled){background:rgba(143,174,148,.14)}
.resolve-prompt{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.resolve-prompt .rp-yes{display:inline-flex;align-items:center;gap:5px;background:var(--ok);color:#121b13;border:none;border-radius:8px;padding:5px 12px;font-weight:600;cursor:pointer;font-size:12px}
.resolve-prompt .rp-no{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--muted);border-radius:8px;padding:5px 12px;cursor:pointer;font-size:12px}
.resolve-prompt .rp-no:hover{color:#cdd6dd}
.hi-resolve-meta{font-size:11px;color:var(--muted);white-space:nowrap;flex:none}
.room-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:13px}
.ms-status{margin-left:6px;font-size:10px;font-weight:600;padding:1px 6px;border-radius:5px;vertical-align:middle}
.lightbox{position:fixed;inset:0;z-index:10060;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.lightbox .lb-close{position:fixed;top:16px;right:20px;background:rgba(255,255,255,.12);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer}
.lightbox .lb-close:hover{background:rgba(255,255,255,.22)}
.msg.msg-hl{border-radius:9px;animation:msgHl 2.2s ease}
@keyframes msgHl{0%,55%{box-shadow:0 0 0 2px var(--gold)}100%{box-shadow:0 0 0 0 transparent}}
/* contact panel */
.contact-bar{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.06);padding-top:6px}
.cb-phones{display:flex;flex-direction:column;gap:3px;flex:1;min-width:200px}
.cb-phone{display:flex;align-items:center;gap:8px}
.cb-num{font-size:13px;color:#cdd6dd;white-space:nowrap;cursor:pointer}
.cb-num:hover{color:var(--gold)}
.cb-name{font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-pills{display:flex;gap:2px;margin-left:auto;flex:none}
.cb-act{width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none;color:var(--muted);transition:.12s}
.cb-act:hover{background:rgba(255,255,255,.07)}
.cb-act.call{color:#10b981}.cb-act.on-vb{color:#7360f2}.cb-act.on-tg{color:#2aabee}.cb-act.on-wa{color:#25d366}
.cb-side{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap}
.cb-attach{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.cb-attach input{accent-color:var(--accent);cursor:pointer}
.cb-copyinfo{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:5px;border-radius:6px;line-height:1}
.cb-copyinfo:hover{background:rgba(255,255,255,.07);color:#cdd6dd}
.cb-hubber{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#2aabee;background:rgba(42,171,238,.12);border-radius:8px;padding:5px 10px;text-decoration:none;white-space:nowrap}
.cb-hubber:hover{background:rgba(42,171,238,.22)}
/* contacts dropdown (click the vendor name) */
.hi-vendor-caret{font-size:11px;color:var(--muted);margin-left:2px}
.contacts-pop{position:absolute;top:calc(100% - 2px);left:12px;z-index:60;display:none;min-width:340px;max-width:min(520px,90vw);background:var(--bg2);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.5);padding:10px;max-height:70vh;overflow:auto}
.contacts-pop.open{display:block}
.cd-info{display:flex;flex-direction:column;gap:5px;padding:4px 6px 10px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:8px}
.cd-i{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:#cdd6dd;padding:3px 6px;border-radius:6px}
.cd-i:hover{background:rgba(255,255,255,.04)}
.cd-i i{width:15px;color:var(--muted);margin-top:2px;flex:none}
.cd-phones{display:flex;flex-direction:column;gap:1px}
.cd-phone{display:flex;align-items:center;gap:10px;padding:3px 6px;border-radius:7px}
.cd-phone:hover{background:rgba(255,255,255,.03)}
.cd-acts{display:flex;gap:2px;flex:none}                       /* LEFT, fixed slots → columns align */
.cb-act.empty{pointer-events:none}                            /* blank spacer keeps messenger columns aligned */
.cd-num{font-size:13.5px;color:#cdd6dd;white-space:nowrap;cursor:pointer;flex:none;min-width:130px;letter-spacing:.2px}
.cd-num.copyable{border-bottom:none}                          /* no dashed underline in the panel */
.cd-num:hover{color:var(--gold)}
.cd-name{font-size:12px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── call-success % per phone: 3 styles switched by .cd-phones[data-pctstyle] (bar|fill|chip) ── */
.cd-phone{position:relative;overflow:hidden}
.cd-phone.pct-hi{--pctc:#5f9e73}.cd-phone.pct-mid{--pctc:#bf9a52}.cd-phone.pct-lo{--pctc:#c2716a}.cd-phone.pct-na{--pctc:var(--muted)}
.cd-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--pctc);opacity:0;pointer-events:none;z-index:0}
.cd-phone>:not(.cd-fill){position:relative;z-index:1}
.cd-pct{flex:none;font-size:10px;font-weight:400;color:var(--muted);opacity:.8;white-space:nowrap;min-width:30px;text-align:right}
.cd-phone.pct-na .cd-pct{opacity:.4}
.cd-phones[data-pctstyle=fill] .cd-fill{opacity:.1}
.cd-phones[data-pctstyle=bar] .cd-phone.has-pct{box-shadow:inset 0 -2px 0 rgba(128,128,128,.1)}
.cd-phones[data-pctstyle=bar] .cd-fill{top:auto;height:2px;bottom:0;opacity:.55}
.cd-pctstyle{align-self:flex-start;margin:5px 0 1px 6px;padding:2px 9px;font-size:11px;background:var(--bg3);border:1px solid var(--line);border-radius:9px;color:var(--muted);cursor:pointer}
.cd-pctstyle:hover{color:var(--txt)}
/* vendor links (comment shown, URL hidden) */
.cd-links{display:flex;flex-direction:column;gap:2px;padding:6px 6px 2px}
.cd-link{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--accent2);text-decoration:none}
.cd-link:hover{text-decoration:underline}
.cd-link i{color:var(--muted);font-size:11px}
/* structured delivery/payment tree (vendor_audit справочник) */
.cd-del{display:flex;flex-direction:column;gap:8px;padding:2px 6px}
.cd-del-row{display:flex;flex-direction:column;gap:4px}
.cd-del-svc{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#e6edf3}
.cd-del-logo{width:18px;height:18px;object-fit:contain;flex:none;border-radius:3px}
.cd-del-logo.ph{display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.cd-del-logo.ph i{font-size:13px}
.cd-del-name{flex:1;min-width:0}
.cd-pays{display:flex;flex-wrap:wrap;gap:4px;padding-left:26px}
.cd-pay{font-size:11px;color:#b9c2cb;background:var(--bg3);border-radius:6px;padding:2px 8px}
.cd-del-city{padding-left:26px;display:flex;flex-direction:column;gap:3px}
.cd-del-loc{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.cd-del-loc i{font-size:10px}
.cd-del-city .cd-pays{padding-left:16px}
/* TTN analytics (lazy) */
.cd-analytics-box{margin-top:8px}
.cd-an-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.an-col{background:var(--bg3);border-radius:8px;padding:8px 10px}
.an-title{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.an-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#cdd6dd;padding:1px 0}
.an-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-val{flex:none;color:var(--accent2);font-weight:600}
.an-pct{color:var(--muted);font-weight:400;margin-left:4px}
.cd-an-empty{color:var(--muted);font-size:12px;padding:10px}
.cd-attach-row{padding:8px 6px 2px}
.cd-attach-row .cb-attach{font-size:12px;color:var(--muted)}
.cd-actions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 6px 2px;border-top:1px solid rgba(255,255,255,.06);margin-top:8px}
.cd-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:8px;background:var(--bg3);color:#cdd6dd;border:none;cursor:pointer;text-decoration:none}
.cd-btn:hover{filter:brightness(1.25)}
.cd-btn.cb-hubber{color:#2aabee;background:rgba(42,171,238,.12)}
/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(10px);background:linear-gradient(180deg,#2b7fff,#1f6feb);color:#fff;padding:12px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.30);font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:10005;box-shadow:0 14px 44px rgba(0,0,0,.6),0 0 0 4px rgba(43,127,255,.25);max-width:90vw;white-space:normal;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* responsive head: narrow window → info wraps to 2 rows, contact panel stacks */
@media (max-width:820px){
  #main .head .head-row{flex-wrap:wrap}
  .hi-vendor{max-width:60%}
  .contact-bar{flex-direction:column;gap:8px}
  .cb-side{width:100%}
}
#main .head .head-main{min-width:0;flex:1}
#main .head .head-title-row{display:flex;align-items:center;gap:10px;min-width:0}
#main .head .vendor{font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
#main .head .vendor:hover{color:var(--accent2);text-decoration:underline}
#main .head .head-chan{flex:none;font-size:11px;font-weight:600;color:var(--muted);background:var(--bg3);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:2px 7px;line-height:1.4;letter-spacing:.02em}
#main .head .head-chan.chan-vp{color:#7fe0cf} #main .head .head-chan.chan-hub{color:#b9a4ff}
.head-chan-ico{height:17px;width:auto;flex:none;opacity:.92;border-radius:3px}
#main .head .sub{color:var(--muted);font-size:12px;margin-top:2px}
#main .head .spacer{flex:1}
.btn{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:6px 12px;color:var(--txt)}
.btn:hover{border-color:var(--accent)}
.btn.gold{border-color:var(--gold);color:var(--gold)}
/* resolve toggle styled as buyer's pill (green when resolved) */
#resolveBtn{flex:none;align-self:center;display:inline-flex;align-items:center;gap:6px;background:var(--bg3);color:var(--muted);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:6px 13px;font-size:12px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
#resolveBtn:hover{color:var(--txt);background:var(--bg-active)}
#resolveBtn.is-resolved{background:rgba(143,174,148,.16);color:#aacdaf;border-color:rgba(143,174,148,.32)}
#resolveBtn.is-resolved:hover{background:rgba(143,174,148,.26);color:#c2ddc6}
.ctxbar{padding:7px 16px;border-bottom:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;gap:6px;font-size:13px;flex:none}
.ctxbar:empty{display:none}
.ctxbar b{color:var(--txt);font-weight:600}
/* buyer .thread-context rows */
.ctx-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctx-order{color:var(--accent2);font-weight:600;cursor:pointer;text-decoration:none}
.ctx-order:hover{text-decoration:underline}
.ctx-status{font-size:11px;font-weight:600;padding:2px 9px;border-radius:9px}
.ctx-status.st-good{background:rgba(143,174,148,.18);color:#aacdaf}
.ctx-status.st-warn{background:rgba(186,117,23,.20);color:#e0a64a}
.ctx-status.st-bad{background:rgba(224,108,108,.18);color:#e88a8a}
.ctx-sep{color:var(--muted2)}
.ctx-product{gap:8px}
.ctx-thumb{width:30px;height:30px;border-radius:5px;object-fit:cover;flex:none}
.ctx-prod-name{color:#cdd6dd;font-size:13px;min-width:60px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-prod-name.plain{cursor:default}
.ctx-more-products{font-size:12px;color:var(--accent2);flex:none}

/* dots need the 24px cell; repeating-linear stripes must NOT be tiled (fixed size clips
   diagonals into cells → seams) — striped themes set --chat-pattern-size:auto */
#thread{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 10px;display:flex;flex-direction:column;gap:3px;background:var(--bg);background-image:var(--chat-pattern);background-size:var(--chat-pattern-size,24px 24px);background-position:var(--chat-pattern-pos,0 0)}
.daysep{align-self:center;color:var(--muted);font-size:12px;background:rgba(0,0,0,.35);padding:4px 12px;border-radius:12px;margin:10px 0}
.msg{max-width:min(560px,75%);padding:7px 10px 6px;border-radius:12px;position:relative;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,.3);line-height:1.35}
.msg.in{align-self:flex-start;background:var(--in);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--out);border-bottom-right-radius:4px}
.msg .who{font-size:11px;color:var(--accent2);font-weight:600;margin-bottom:3px;opacity:.85}
/* incoming author keeps the accent colour too (buyer renders all author names in the accent — no in/out split) */
/* automated Bagspace notice (delivery_promo, breakdown_notice, prompay_*, np_*, ...) vs a
   manager-typed reply: neutral panel tone per theme (was hardcoded steel-navy #22303e —
   a cold leftover Ivan caught in the Latun pass), recedes next to the manager's --out */
.msg.out.auto{background:var(--out-auto)}
.auto-tag{font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--warn);background:rgba(224,162,74,.16);border-radius:4px;padding:0 5px;margin-left:6px}
.msg .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.msg .chip{font-size:10px;color:var(--muted);background:rgba(255,255,255,.06);border-radius:5px;padding:1px 6px}
.msg .foot{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:3px;font-size:11px;color:var(--muted)}
.msg .foot-l{display:inline-flex;align-items:center;min-width:0}
.msg .foot-r{display:inline-flex;align-items:center;gap:6px;flex:none}
.msg .foot-sub{font-size:10px;color:var(--muted);background:rgba(255,255,255,.06);border-radius:5px;padding:1px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.msg.out .foot-sub{background:rgba(255,255,255,.12)}
.msg.out .foot{color:rgba(255,255,255,.6)}
.msg .stat.queued{color:var(--warn)} .msg .stat.sent{color:#5fd0ff}
.msg .reply-btn{font-size:10.5px;color:var(--accent2);cursor:pointer;opacity:0;transition:opacity .1s}
.msg:hover .reply-btn{opacity:1}
.copyable{cursor:pointer;border-bottom:1px dashed var(--muted2)}
.copyable:hover{color:var(--gold);border-color:var(--gold)}
.msg img.att{max-width:240px;max-height:240px;border-radius:8px;display:block;margin-top:6px}
/* file attachment card (non-image): icon tile + name + ext/action, theme-var driven */
.msg .att-file{display:flex;align-items:center;gap:10px;margin-top:6px;padding:8px 10px;max-width:290px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px;
  text-decoration:none;color:var(--txt);transition:background .12s,border-color .12s}
.msg.out .att-file{background:rgba(255,255,255,.07)}
.msg .att-file:hover{background:rgba(255,255,255,.11);border-color:var(--accent2)}
.att-file .af-ic{flex:0 0 auto;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  font-size:17px;background:rgba(255,255,255,.06);color:var(--muted)}
.att-file .af-b{min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.att-file .af-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.att-file .af-sub{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.att-file .af-dl{flex:0 0 auto;margin-left:auto;color:var(--muted2);font-size:12px;transition:color .12s}
.att-file:hover .af-dl{color:var(--accent2)}
/* per-type icon accents (conventional file colours, readable on the dark canvas) */
.att-file.ft-pdf .af-ic{color:#e5544b;background:rgba(229,84,75,.15)}
.att-file.ft-word .af-ic{color:#4b8bf5;background:rgba(75,139,245,.15)}
.att-file.ft-excel .af-ic{color:#3aa76d;background:rgba(58,167,109,.15)}
.att-file.ft-ppt .af-ic{color:#e07b39;background:rgba(224,123,57,.15)}
.att-file.ft-zip .af-ic{color:#c9a227;background:rgba(201,162,39,.15)}
.att-file.ft-media .af-ic{color:#9b6cff;background:rgba(155,108,255,.15)}

/* composer */
#composer{border-top:1px solid var(--line);padding:8px 14px;background:var(--bg2);display:flex;flex-direction:column;gap:8px}
.target-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.target-row select{background:var(--bg3);border:1px solid var(--line);border-radius:7px;padding:5px 8px;color:var(--txt);max-width:60%}
.target-row .picked{color:var(--gold)}
.compose-row{display:flex;gap:8px;align-items:flex-end}
#composer textarea{flex:1;resize:none;max-height:140px;background:var(--bg);border:1px solid transparent;border-radius:18px;padding:10px 14px;color:var(--txt);line-height:1.35;outline:none}
#composer textarea:focus{border-color:var(--accent)}
#composer textarea::placeholder{color:var(--muted2)}
/* text send button (used by the multi-product modal) */
.send{background:var(--accent);border:none;border-radius:10px;padding:0 18px;height:40px;color:#fff;font-weight:600}
.send:hover{background:var(--accent2)} .send:disabled{opacity:.5;cursor:default}
/* circular paper-plane send (composer) — buyer parity */
.send-btn{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.send-btn:hover{background:var(--accent2)} .send-btn:disabled{opacity:.5;cursor:default}
.canned{display:flex;flex-wrap:wrap;gap:6px}
.canned button{background:var(--bg3);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--muted)}
.canned button:hover{color:var(--txt);border-color:var(--accent)}

.empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted2)}

/* login overlay */
#login{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:50}
#login .card{width:min(360px,90vw);background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:40px 34px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.4)}
#login .login-logo{font-size:52px;line-height:1}
#login h1{font-size:22px;margin:14px 0 18px}
#login button{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#fff;border-radius:10px;padding:12px 16px;font-weight:600;font-size:15px;transition:background .15s}
#login button:hover{background:var(--accent2)}
.g-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#4285f4;font-weight:800}
.hidden{display:none!important}
.status-off{color:var(--bad)} .status-on{color:var(--ok)}

/* in-app iframe modal (order / vendor CRM page) — buyer .modal-card pattern, own classes so it never clashes with the send modal */
.imodal-overlay{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s ease}
.imodal-overlay.open{opacity:1}
.imodal-card{display:flex;flex-direction:column;width:97vw;height:96vh;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.imodal-head{flex:none;display:flex;align-items:center;gap:10px;height:46px;padding:0 10px 0 16px;background:#141a24;border-bottom:1px solid rgba(255,255,255,.08)}
.imodal-title{flex:1;min-width:0;color:#e8edf4;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imodal-frame{flex:1;width:100%;border:none;background:#fff}
.imodal-ctl{flex:none;width:32px;height:32px;border-radius:8px;border:none;background:rgba(255,255,255,.08);color:#e8edf4;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:15px;transition:background .12s}
.imodal-ctl:hover{background:rgba(255,255,255,.18)}

/* send-target modal */
.modal-overlay{position:fixed;inset:0;background:rgba(8,10,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:60}
/* ── «Уся взаємодія з постачальником» — timeline-модалка ── */
.vtl-overlay{position:fixed;inset:0;background:rgba(8,10,14,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:3vh 16px;z-index:70}
.vtl-card{width:min(1080px,96vw);height:94vh;max-height:94vh;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.55);overflow:hidden}
.vtl-filters{display:flex;gap:6px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--line);flex:none}
.vtl-fchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px;border-radius:11px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;white-space:nowrap}
.vtl-fchip>i{font-size:10px}
.vtl-fchip.on{color:var(--txt);border-color:var(--accent2);background:var(--bg3)}
.vtl-fchip:not(.on){opacity:.55;text-decoration:line-through}
.vtl-feed .vtl-hidden{display:none}
.vtl-mark{background:#f5c518;color:#111;border-radius:2px;padding:0 1px;font-weight:600}
/* пошук у шапці фільтрів */
.vtl-search-wrap{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:3px 6px 3px 10px}
.vtl-search-wrap:focus-within{border-color:var(--accent2)}
.vtl-search-wrap>i{font-size:11px;color:var(--muted2)}
.vtl-search{background:transparent;border:none;outline:none;color:var(--txt);font-size:12px;width:160px}
.vtl-search::placeholder{color:var(--muted2)}
.vtl-search::-webkit-search-cancel-button{display:none}
.vtl-search-x{border:none;background:transparent;color:var(--muted2);cursor:pointer;font-size:12px;padding:2px 4px;line-height:1}
.vtl-search-x:hover{color:var(--txt)}
/* підтипи системних сповіщень */
.vtl-subfilters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 16px;border-bottom:1px solid var(--line);flex:none;background:var(--bg)}
.vtl-subfilters.vtl-sub-off{display:none}
.vtl-sub-lbl{font-size:11px;color:var(--muted2);margin-right:2px;display:inline-flex;align-items:center;gap:5px}
.vtl-sub-lbl i{font-size:10px}
.vtl-schip{font-size:11px;padding:3px 10px;border-radius:11px;border:1px solid var(--line);background:var(--bg2);color:var(--muted);cursor:pointer}
.vtl-schip.on{color:var(--txt);border-color:var(--accent2);background:var(--bg3)}
.vtl-schip:not(.on){opacity:.5;text-decoration:line-through}
/* плашка замовлення над бульбашкою */
.vtl-order-thumb,.vtl-order-ic{width:32px;height:32px;border-radius:7px;flex:none}
.vtl-order-thumb{object-fit:cover;background:var(--bg3)}
.vtl-order-ic{display:inline-flex;align-items:center;justify-content:center;background:var(--bg3);color:var(--muted2)}
.vtl-order-txt{display:inline-flex;align-items:baseline;gap:7px;min-width:0}
.vtl-order-num{color:var(--accent2);font-weight:600;flex:none;font-variant-numeric:tabular-nums}
.vtl-order-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* підпис-рядок замовлення (стиль рядка боковой панелі: товар зверху, №знизу) */
.vtl-caprow{display:inline-flex;align-items:center;gap:9px;max-width:100%;margin-bottom:5px;padding:4px 12px 4px 4px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;cursor:pointer;overflow:hidden}
.vtl-caprow:hover{border-color:var(--accent2);background:var(--bg3)}
.vtl-caprow:hover .vtl-cap-nm{color:var(--accent2)}
.vtl-cap-thumb{width:38px;height:38px;border-radius:9px;object-fit:cover;flex:none;background:var(--bg3)}
.vtl-cap-ph{display:inline-flex;align-items:center;justify-content:center;color:var(--muted2);font-size:15px}
.vtl-cap-txt{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.25}
.vtl-cap-nm{font-size:12.5px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vtl-cap-sub{font-size:10.5px;color:var(--muted2);font-variant-numeric:tabular-nums}
/* авто-summary по скролу: порожній плейсхолдер не займає місця, індикатор завантаження */
.vtl-call-sum:empty{display:none}
.vtl-sum-load{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted2);font-style:italic}
.vtl-call-acts{display:flex;gap:7px;margin-top:7px}
.vtl-call-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 11px;border-radius:9px;border:1px solid var(--line);background:var(--bg3);color:var(--txt);cursor:pointer}
.vtl-call-btn:hover{border-color:var(--accent2);color:var(--accent2)}
.vtl-call-btn i{font-size:11px}
/* аудіоплеєр дзвінка (порт з buyer, змінні перекладені на supplier-палітру) */
.aplayer{display:flex;align-items:center;gap:6px;margin-top:8px;padding:5px 8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;min-width:280px}
.ap-btn{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--muted);border:none;border-radius:6px;font-size:12px;cursor:pointer}
.ap-btn:hover{background:var(--bg3);color:var(--txt)}
.ap-play{color:var(--accent2);font-size:13px}
.ap-speed{width:auto;padding:0 7px;font-size:11px;font-weight:600;border:1px solid var(--line)}
.ap-bar{flex:1 1 auto;height:5px;min-width:70px;background:var(--bg3);border-radius:3px;cursor:pointer;overflow:hidden}
.ap-fill{height:100%;width:0;background:var(--accent2);border-radius:3px}
.ap-time{flex:0 0 auto;color:var(--muted2);font-size:11px;font-variant-numeric:tabular-nums}
/* ── транскрипт дзвінка (караоке + оглавление), над timeline-модалкою ── */
.ctr-ov{position:fixed;inset:0;background:rgba(8,10,14,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;z-index:80}
.ctr-card{width:min(1000px,96vw);height:90vh;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden}
.ctr-head{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.ctr-title{font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:7px;flex:none}
.ctr-title i{color:var(--accent2)}
.ctr-player-slot{flex:1;min-width:120px;display:flex}
.ctr-player-slot .aplayer{width:100%;margin-top:0}
.ctr-note{color:var(--muted2);font-size:12px;align-self:center}
.ctr-search{width:180px;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:5px 9px;font-size:12px}
.ctr-close{flex:none;width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:var(--muted);font-size:15px;cursor:pointer}
.ctr-close:hover{background:var(--bg3);color:var(--txt)}
.ctr-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:0}
.ctr-main{overflow-y:auto;padding:16px 18px}
.ctr-loading{color:var(--muted2);text-align:center;padding:40px}
.ctr-pause{text-align:center;font-size:11px;color:var(--muted2);margin:10px 0}
.ctr-row{margin:8px 0;display:flex}
.ctr-row.mgr{justify-content:flex-end}
.ctr-bubble{max-width:82%;background:var(--in);border-radius:12px;padding:8px 12px}
.ctr-row.mgr .ctr-bubble{background:var(--out)}
.ctr-row.ctr-hit .ctr-bubble{box-shadow:0 0 0 1px var(--accent2)}
.ctr-row.ctr-hit-now .ctr-bubble{box-shadow:0 0 0 2px var(--accent2)}
.ctr-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.ctr-who{font-size:11.5px;font-weight:600;color:var(--accent2)}
/* мова репліки — прихований бейдж, проявляється лише при наведенні на репліку */
.ctr-lang{font-size:9px;color:var(--muted2);border:1px solid var(--line);border-radius:5px;padding:0 4px;opacity:0;transition:opacity .12s}
.ctr-row:hover .ctr-lang{opacity:1}
.ctr-time{font-size:11px;color:var(--muted2);text-decoration:none;margin-left:auto}
.ctr-time:hover{color:var(--accent2)}
.ctr-text{font-size:13.5px;line-height:1.6;color:var(--txt)}
.ctr-w{text-decoration:none;color:inherit;border-radius:3px}
.ctr-w.future{color:var(--muted)}
.ctr-w.past{color:var(--txt)}
.ctr-w.active{color:var(--txt);background:color-mix(in srgb,var(--accent2) 30%,transparent)}
.ctr-w.plain{cursor:pointer}
.ctr-side{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.ctr-side-h{flex:none;padding:11px 14px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:8px}
.ctr-side-title{flex:1;min-width:0}
.ctr-regen{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted2);opacity:.6;border-radius:6px;cursor:pointer;font-size:12px;transition:opacity .12s,color .12s,background .12s}
.ctr-regen:hover{opacity:1;color:var(--accent2);background:var(--bg3)}
.ctr-regen:disabled{opacity:.4;cursor:default}
.ctr-side-b{flex:1;overflow-y:auto;padding:12px 14px}
.ctr-sum-dim{color:var(--muted2);font-size:12.5px}
.ctr-sum-intro{font-size:12.5px;line-height:1.55;color:var(--muted);white-space:pre-wrap;margin-bottom:12px}
.ctr-toc{display:flex;flex-direction:column;gap:4px}
.ctr-toc-item{display:flex;gap:8px;text-decoration:none;padding:5px 7px;border-radius:8px;border-left:2px solid transparent}
.ctr-toc-item:hover{background:var(--bg3)}
.ctr-toc-item.active{background:var(--bg3);border-left-color:var(--accent2)}
.ctr-toc-t{flex:none;font-size:11px;color:var(--accent2);font-variant-numeric:tabular-nums}
.ctr-toc-l{font-size:12.5px;color:var(--txt);line-height:1.35}
@media(max-width:820px){.ctr-body{grid-template-columns:1fr}.ctr-side{display:none}}
.vtl-head{display:flex;align-items:center;gap:8px 10px;flex-wrap:nowrap;padding:9px 14px;border-bottom:1px solid var(--line);flex:none}
.vtl-head-r{display:inline-flex;align-items:center;gap:8px;flex:none}
.vtl-title{font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:7px;flex:0 1 auto;min-width:0;max-width:30%}
.vtl-title i{color:var(--accent2)}
.vtl-title-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* всі фільтри/пошук/вид у ОДИН ряд заголовка (Иван 2026-07-14) */
.vtl-ctrls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.vtl-sys-wrap{position:relative;display:inline-flex}
.vtl-sys-caret{font-size:9px;margin-left:4px;opacity:.6;padding:0 1px}
.vtl-fchip-sys:hover .vtl-sys-caret{opacity:1}
.vtl-sys-off .vtl-sys-caret{opacity:.22}
.vtl-subpop{position:absolute;top:calc(100% + 5px);left:0;z-index:20;display:flex;flex-direction:column;gap:5px;min-width:134px;padding:9px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.vtl-subpop[hidden]{display:none}
.vtl-subpop-h{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2)}
.vtl-subpop .vtl-schip{text-align:left}
.vtl-dates{display:inline-flex;align-items:center;gap:5px;color:var(--muted2);font-size:12px}
.vtl-dates input[type=date]{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:3px 6px;font-size:12px;color-scheme:dark}
.vtl-close{flex:none;width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:var(--muted);font-size:15px;cursor:pointer}
.vtl-close:hover{background:var(--bg3);color:var(--txt)}
.vtl-body{flex:1;overflow-y:auto;padding:14px 16px;min-height:0;background:var(--bg);position:relative}
/* згорнутий пошук під датапікером, розкривається по кліку */
.vtl-searchbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;width:fit-content;margin:0 0 4px auto;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:2px}
.vtl-searchbar.open{border-color:var(--accent2);padding-right:4px}
.vtl-search-toggle{border:none;background:transparent;color:var(--muted);cursor:pointer;width:30px;height:30px;border-radius:50%;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.vtl-search-toggle:hover{color:var(--txt)}
.vtl-searchbar .vtl-search{width:0;border:none;background:transparent;outline:none;color:var(--txt);font-size:12.5px;padding:0;transition:width .18s ease}
.vtl-searchbar.open .vtl-search{width:210px;padding:0 4px}
.vtl-search::placeholder{color:var(--muted2)}
.vtl-search::-webkit-search-cancel-button{display:none}
.vtl-search-x{border:none;background:transparent;color:var(--muted2);cursor:pointer;font-size:12px;padding:2px 4px;line-height:1;flex:none}
.vtl-search-x:hover{color:var(--txt)}
.vtl-daysep{align-self:center;text-align:center;font-size:11px;color:var(--muted2);background:var(--bg3);width:fit-content;margin:12px auto 8px;padding:2px 12px;border-radius:10px}
.vtl-row{display:flex;flex-direction:column;margin:8px 0;max-width:82%}
.vtl-row.out{margin-left:auto;align-items:flex-end}
.vtl-row.in{margin-right:auto;align-items:flex-start}
.vtl-order{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:3px 11px 3px 3px;margin-bottom:4px;cursor:pointer;max-width:100%;overflow:hidden}
.vtl-order:hover{border-color:var(--accent2);background:var(--bg3)}
.vtl-order:hover .vtl-order-nm{color:var(--txt)}
.vtl-bubble{background:var(--in);border:1px solid transparent;border-radius:12px;padding:7px 11px;font-size:13px;line-height:1.45;color:var(--txt);word-break:break-word;position:relative}
.vtl-row.in .vtl-bubble{border-color:var(--line)}
.vtl-row.out .vtl-bubble{background:var(--out)}
.vtl-bubble .vtl-time{font-size:10px;color:var(--muted2);margin-left:8px;float:right;position:relative;top:4px}
.vtl-bubble.cap-spine{border-top-left-radius:5px;border-bottom-left-radius:5px}
.vtl-who{font-size:10.5px;color:var(--muted2);margin-top:2px}
/* ЄДИНА карточка повідомлення у стилі рядка сайдбара (режим «Плашка») — Иван 2026-07-14 */
.vtl-mcard{display:flex;align-items:flex-start;gap:10px;max-width:100%;padding:8px 11px;border-radius:14px;background:var(--in);border:1px solid var(--line)}
.vtl-row.out .vtl-mcard{background:var(--out);border-color:transparent}
.vtl-mcard[data-prom]{cursor:pointer}
.vtl-mcard[data-prom]:hover{border-color:var(--accent2)}
.vtl-mc-thumb{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none;background:var(--bg3)}
.vtl-mc-thumb.vtl-cap-ph{display:inline-flex;align-items:center;justify-content:center;color:var(--muted2);font-size:15px}
.vtl-mc-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.vtl-mc-h{display:flex;align-items:baseline;gap:8px}
.vtl-mc-nm{font-size:12.5px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vtl-mcard[data-prom]:hover .vtl-mc-nm{color:var(--accent2)}
.vtl-mc-nm.vtl-mc-dim{font-weight:500;color:var(--muted)}
.vtl-mc-h .vtl-time{margin-left:auto;flex:none;font-size:10px;color:var(--muted2);position:static;float:none;top:auto}
.vtl-mc-tx{font-size:13px;color:var(--txt);line-height:1.45;word-break:break-word}
.vtl-mc-who{font-size:10px;color:var(--muted2);text-align:right;margin-top:1px}
.vtl-mcard-noord{gap:0}
/* вибір виду підпису замовлення */
.vtl-cap{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted2)}
.vtl-cap>i{font-size:10px}
.vtl-cap-sel{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:3px 6px;font-size:11px;cursor:pointer}
.vtl-cap-sel:focus{outline:none;border-color:var(--accent2)}
/* заголовок-роздільник серії (режими Заголовок / +колір) */
.vtl-ghead{display:inline-flex;align-items:center;gap:9px;margin:12px auto 5px 0;padding:4px 12px 4px 4px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;width:fit-content;max-width:100%;cursor:pointer;overflow:hidden}
.vtl-ghead:hover{border-color:var(--accent2)}
.vtl-ghead-col{padding-left:9px}
.vtl-ghead-col .vtl-order-nm{color:var(--txt)}
.vtl-ghead .vtl-order-thumb,.vtl-ghead .vtl-order-ic{width:26px;height:26px}
.vtl-ghead .vtl-order-num{font-size:11.5px}
.vtl-ghead .vtl-order-nm{font-size:11.5px;color:var(--txt)}
/* компактний кольоровий тег серії (режим Колір) */
.vtl-tag{display:inline-flex;align-items:center;gap:6px;margin:10px auto 3px 0;font-size:10.5px;cursor:pointer;width:fit-content;max-width:100%;overflow:hidden}
.vtl-tag .vtl-order-nm{color:var(--muted)}
.vtl-tag:hover .vtl-order-nm{color:var(--txt)}
.vtl-dot{width:8px;height:8px;border-radius:50%;flex:none}
/* підвал під бульбашкою (режим Підвал) */
.vtl-foot{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;color:var(--muted2);margin-top:3px;cursor:pointer;max-width:100%;overflow:hidden}
.vtl-foot .vtl-order-num{font-size:9.5px}
.vtl-foot .vtl-order-nm{color:var(--muted2);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vtl-foot:hover .vtl-order-nm{color:var(--txt)}
.vtl-call{display:flex;align-items:flex-start;gap:10px;background:var(--bg2);border:1px solid color-mix(in srgb,var(--accent2) 30%,var(--line));border-radius:12px;padding:9px 12px;margin:10px auto;max-width:66%;position:relative}
/* ↻ перегенерація стислого змісту — приглушена кутова іконка (проявляється при наведенні на картку) */
.vtl-call-regen{position:absolute;right:7px;bottom:7px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted2);opacity:.3;border-radius:6px;cursor:pointer;font-size:11px;transition:opacity .12s,color .12s,background .12s}
.vtl-call:hover .vtl-call-regen{opacity:.62}
.vtl-call-regen:hover{opacity:1;color:var(--accent2);background:var(--bg3)}
.vtl-call-regen:disabled{opacity:.3;cursor:default;color:var(--muted2);background:transparent}
.vtl-call-ico{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--bg3);display:inline-flex;align-items:center;justify-content:center;font-size:14px;margin-top:1px;color:var(--accent2)}
.call-in .vtl-call-ico{color:#5dcaa5}
.call-missed .vtl-call-ico{color:#ef5350}
.vtl-call-arrow{position:absolute;right:-3px;bottom:-3px;font-size:8px;width:15px;height:15px;border-radius:50%;background:var(--bg2);display:inline-flex;align-items:center;justify-content:center}
.vtl-call-main{flex:1;min-width:0}
.vtl-call-l1{font-size:13px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.vtl-call-dir{font-weight:600}
.call-in .vtl-call-dir{color:#5dcaa5}
.vtl-dim{color:var(--muted)}
.vtl-call-dur{color:var(--muted)}
.vtl-call-op{color:var(--accent2);font-size:11.5px}
.vtl-call-t{margin-left:auto;flex:none}
.vtl-call-sum{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.vtl-chk{color:var(--ok);font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;text-decoration:none;padding:0 1px}
.vtl-chk:hover{text-decoration:underline;filter:brightness(1.15)}
.vtl-call .vtl-time{font-size:10.5px;color:var(--muted2);flex:none}
.vtl-more{text-align:center;color:var(--muted2);font-size:12px;padding:10px}
.modal{width:min(1180px,96vw);height:min(820px,92vh);background:var(--bg2);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.modal-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600}
.mh-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layout-toggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.layout-toggle button{padding:4px 11px;font-size:15px;color:var(--muted);background:var(--bg3);line-height:1}
.layout-toggle button.active{background:var(--accent2);color:#fff}
.modal-body{flex:1;display:flex;min-height:0}
.modal-subs{width:300px;min-width:260px;border-right:1px solid var(--line);overflow-y:auto;background:var(--bg)}
.modal-sub{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:10px;align-items:center}
.modal-sub:hover{background:var(--bg3)}
.modal-sub.active{background:rgba(95,224,122,.10);box-shadow:inset 3px 0 0 #5fe07a}
.modal-sub img{width:42px;height:42px;border-radius:8px;object-fit:cover;flex:none;background:var(--bg3)}
.modal-sub .ms-body{min-width:0}
.modal-sub .ms-label{font-size:11px;color:var(--gold)}
.modal-sub .ms-name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-detail{flex:1;display:flex;flex-direction:column;min-width:0}
.prodcard{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:center}
.prodcard img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--bg3);flex:none}
.prodcard .pc-name{font-weight:600}
.prodcard .pc-meta{color:var(--muted);font-size:12.5px;margin-top:3px;display:flex;gap:12px;flex-wrap:wrap}
.prodcard .pc-price{color:var(--gold);font-weight:600}
.instock{color:var(--ok)} .nostock{color:var(--bad)}
.modal-thread{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:7px;background:var(--bg)}
.modal-thread .empty{margin:auto;color:var(--muted2)}
.modal-foot{border-top:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:12px}
.modal-foot .modal-msg{flex:1;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-foot .send{height:40px;padding:0 18px}
/* tabs layout variant — sub-orders as a horizontal browser-style strip on top */
.modal-body.layout-tabs{flex-direction:column}
.modal-body.layout-tabs .modal-subs{width:auto;min-width:0;border-right:none;border-bottom:1px solid var(--line);display:flex;overflow-x:auto;overflow-y:hidden;flex:none}
.modal-body.layout-tabs .modal-sub{border-bottom:none;border-right:1px solid var(--line);width:230px;min-width:230px;max-width:230px;flex:none;align-items:flex-start}
.modal-body.layout-tabs .modal-sub.active{background:rgba(95,224,122,.10);box-shadow:inset 0 -3px 0 #5fe07a}
.modal-body.layout-tabs .modal-sub img{width:34px;height:34px}
.modal-body.layout-tabs .modal-sub .ms-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
/* product card line order: №sub-order / status / name + qty / price */
.prodcard .pc-suborder{font-weight:600;color:var(--gold);font-size:13px}
.prodcard .pc-status{margin-top:2px;font-size:12.5px}
.prodcard .pc-name{margin-top:3px}
.prodcard .pc-qty{color:var(--muted);font-weight:400}
.prodcard .pc-price{margin-top:3px}

/* ============ compact order head (one line: vendor · order · status · product) ============ */
#roomHead.head{gap:10px}
.head-info{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow:hidden}
.hi-vendor{font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;flex:none;max-width:32%;overflow:hidden;text-overflow:ellipsis}
.hi-vendor:hover{color:var(--accent2);text-decoration:underline}
.hi-order{color:var(--accent2);font-weight:600;font-size:13px;text-decoration:none;cursor:pointer;flex:none}
.hi-order:hover{text-decoration:underline}
/* site-launcher badges (head · chevron) — compact pill with the site number */
.hi-site,.co-site{flex:none;display:inline-block;font-weight:600;color:var(--muted);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:5px;cursor:pointer;
  letter-spacing:.02em;transition:color .12s,border-color .12s}
.hi-site{font-size:11px;padding:1px 7px}
.co-site{font-size:10px;padding:0 5px;margin-left:5px}
.hi-site:hover,.co-site:hover{color:var(--accent2);border-color:var(--accent2)}
.hi-status{font-size:11px;font-weight:600;padding:2px 8px;border-radius:9px;flex:none;white-space:nowrap}
.hi-status.st-good{background:rgba(143,174,148,.18);color:#aacdaf}
.hi-status.st-warn{background:rgba(186,117,23,.20);color:#e0a64a}
.hi-status.st-bad{background:rgba(224,108,108,.18);color:#e88a8a}
.hi-status.st-neutral{background:var(--bg3);color:var(--muted)}
.hi-status.st-diff{background:rgba(224,162,74,.20);color:#e0a64a;border:1px solid rgba(224,162,74,.45)}
.hi-thumb{width:28px;height:28px;border-radius:5px;object-fit:cover;flex:none;background:var(--bg3)}
.hi-prod{color:#cdd6dd;font-size:13px;min-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-qty{color:var(--muted);font-size:12.5px;flex:none}
.hi-price{color:var(--gold);font-weight:600;font-size:12.5px;flex:none}
.hi-chev{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:4px 11px;font-size:12.5px;color:var(--accent2);flex:none;cursor:pointer}
.hi-chev:hover{border-color:var(--accent)}
.hi-chev i{transition:transform .15s} .hi-chev.open i{transform:rotate(180deg)}
.head-actions{display:flex;align-items:center;gap:8px;flex:none}
.hi-client{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:5px 11px;font-size:12px;color:var(--accent2);cursor:pointer;white-space:nowrap}
.hi-client:hover{border-color:var(--accent)}
.hi-client.disabled{color:var(--muted2);cursor:default;opacity:.6}
.resolve-pill{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--bg3);color:var(--muted);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:6px 13px;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.resolve-pill:hover{color:var(--txt);background:var(--bg-active)}
.resolve-pill.is-resolved{background:rgba(143,174,148,.16);color:#aacdaf;border-color:rgba(143,174,148,.32)}
.resolve-pill.is-resolved:hover{background:rgba(143,174,148,.26);color:#c2ddc6}

/* ---- sub-order list (chevron-expanded) ---- */
.sublist{background:var(--bg2);border-bottom:1px solid var(--line);max-height:240px;overflow-y:auto}
.sub-item{display:flex;align-items:center;gap:10px;padding:7px 16px;border-bottom:1px solid rgba(255,255,255,.04)}
.sub-item.muted{opacity:.5}
.sub-thumb{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:none;background:var(--bg3);display:inline-block}
.sub-body{flex:1;min-width:0}
.sub-name{font-size:13px;color:#cdd6dd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-meta{font-size:11.5px;color:var(--muted2);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sub-label{color:var(--gold)}
.sub-eye{flex:none;width:30px;height:30px;border-radius:8px;color:var(--muted);background:transparent;border:1px solid var(--line);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sub-eye:hover{color:var(--txt);border-color:var(--accent)}
.sub-eye.off{color:var(--bad)}

/* ---- unread badge in sidebar title ---- */
.unread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ok);color:#fff;font-size:11px;font-weight:600;vertical-align:middle;margin-right:5px}

/* ---- right-click context menu ---- */
.ctx-menu{position:fixed;z-index:10050;min-width:200px;padding:5px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.ctx-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;color:var(--txt);font-size:13px;cursor:pointer;white-space:nowrap}
.ctx-item:hover{background:var(--bg3)}
.ctx-item i{width:15px;color:var(--muted)}
.ctx-info{display:flex;align-items:center;gap:10px;padding:7px 12px;color:var(--muted);font-size:12px;white-space:nowrap;cursor:default}
.ctx-info i{width:15px}
/* повідомлення, з якого відкрито меню «Достукатись іншим каналом» */
.msg.reach-src{box-shadow:0 0 0 2px #f5c518,0 0 10px rgba(245,197,24,.45);transition:box-shadow .12s ease}

/* ---- gamification toast ---- */
.game-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.24);opacity:0;pointer-events:none;z-index:9998;transition:opacity .28s ease}
.game-backdrop.show{opacity:1}
.game-toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(14px) scale(.94);display:flex;align-items:center;gap:15px;max-width:88vw;background:var(--bg2);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:15px 24px;box-shadow:0 18px 54px rgba(0,0,0,.6);opacity:0;pointer-events:none;z-index:9999;transition:opacity .28s ease,transform .28s cubic-bezier(.2,1.4,.4,1)}
.game-toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.game-toast .gt-emoji{font-size:38px;line-height:1}
.game-toast .gt-title{font-weight:700;font-size:18px}
.game-toast .gt-sub{font-size:13px;color:var(--muted);margin-top:3px}
.game-toast .gt-dur-line{margin-top:4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.game-toast .gt-dur{font-size:26px;font-weight:800;color:#5fe07a;line-height:1}
.game-toast .gt-dur-label{font-size:13px;color:var(--muted)}
.game-toast.tier-fire{border-color:rgba(106,179,243,.55)}
.game-toast.tier-resolve{border-color:rgba(143,174,148,.55)}

/* ---- metrics panel ---- */
.stats-card{width:min(460px,96vw);max-height:84vh;overflow-y:auto;background:var(--bg2);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
/* wide two-pane layout + interactive daily chart (sx-*, port of the buyer chart) */
.stats-card.xl{width:min(1080px,96vw)}
.stats-card.fs{width:98vw;max-height:96vh}
.stats-card.fs .stats-left{display:none}
.stats-card.fs .stats-grid{grid-template-columns:1fr}
.stats-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:920px){.stats-grid{grid-template-columns:1fr}}
.stats-right{min-width:0}
.stats-right .stats-sep{margin-top:0}
.sx-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.sx-presets{display:inline-flex;background:var(--bg);border-radius:10px;padding:2px}
.sx-preset{background:transparent;border:none;color:var(--muted);font-size:12px;font-weight:600;padding:4px 10px;border-radius:8px;cursor:pointer}
.sx-preset.active{background:var(--bg-active);color:var(--txt)}
.sx-dates{display:inline-flex;align-items:center;gap:5px;margin-left:auto;color:var(--muted2);font-size:12px}
.sx-dates input[type=date]{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:3px 6px;font-size:12px;color-scheme:dark}
.sx-expand{background:var(--bg);border:1px solid var(--line);color:var(--muted);border-radius:8px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;flex:none}
.sx-expand:hover{color:var(--txt);border-color:var(--accent2)}
.sx-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sx-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 10px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;user-select:none}
.sx-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c,#888);flex:none}
.sx-chip.on{color:var(--txt);border-color:color-mix(in srgb,var(--c,#888) 55%,transparent)}
.sx-chip:not(.on){opacity:.5}
.sx-chip:not(.on) .dot{background:color-mix(in srgb,var(--c,#888) 40%,transparent)}
.sx-wrap{position:relative;background:var(--bg);border-radius:12px;padding:6px 2px 2px}
.sx-wrap svg{display:block;width:100%;height:auto}
.sx-wkend{fill:color-mix(in srgb,var(--txt) 6%,transparent)}
.sx-grid-line{stroke:color-mix(in srgb,var(--txt) 10%,transparent);stroke-width:1}
.sx-bar{fill:#4a9df2;opacity:.82}
.sx-ax{font-size:10px;fill:var(--muted2)}
.sx-ax.we{fill:color-mix(in srgb,var(--bad) 65%,var(--muted2))}
.sx-ax-r{fill:#efb043;opacity:.85}
.sx-cross{stroke:color-mix(in srgb,var(--txt) 35%,transparent);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.sx-tip{position:absolute;z-index:5;pointer-events:none;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:9px 12px 10px;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);min-width:200px;display:none}
.sx-tip .tt-d{font-weight:700;margin-bottom:2px}
.sx-tip .tt-sub{color:var(--muted2);font-size:10.5px;margin-bottom:7px}
.sx-tip .tt-tbl{border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:100%}
.sx-tip .tt-tbl th,.sx-tip .tt-tbl td{padding:3px 6px;white-space:nowrap;text-align:left}
.sx-tip .tt-tbl th{color:var(--muted2);font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding-bottom:4px}
.sx-tip .tt-tbl td:first-child{padding:3px 2px 3px 5px}
.sx-tip .tt-tbl tr.zeb td{background:color-mix(in srgb,var(--txt) 6%,transparent)}
.sx-tip .tt-tbl tr.zeb td:first-child{border-radius:6px 0 0 6px}
.sx-tip .tt-tbl tr.zeb td:last-child{border-radius:0 6px 6px 0}
.sx-tip .tt-lb{color:var(--muted)}
.sx-tip .tt-num{text-align:right !important}
.sx-tip .tt-v{font-weight:700;color:var(--txt)}
.sx-tip .tt-vx{font-weight:600;color:var(--muted)}
.sx-tip .tt-b{color:var(--muted2);font-size:11px}
.sx-tip .tt-dl{font-size:11px}
.sx-tip .tt-x{opacity:.8;font-size:11.5px}
.sx-tip .tt-good{color:#42c98a}
.sx-tip .tt-bad{color:#ef5350}
.sx-tip .tt-flat{color:var(--muted2)}
.sx-tip .tt-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.sx-corr{margin-top:8px;font-size:11.5px;color:var(--muted2)}
.sx-corr b{color:var(--muted)}
.sx-loading,.sx-err{padding:40px 10px;text-align:center;color:var(--muted2);font-size:13px}
.stats-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.stats-title{font-size:15px;font-weight:600;flex:1}
.stats-body{padding:14px}
.stats-actions{display:flex;justify-content:flex-end;margin-bottom:10px}
.stats-bulk-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--txt);font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
.stats-bulk-btn:hover{background:var(--bg3);border-color:var(--accent2);color:var(--accent2)}
.stats-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.stat-card{background:var(--bg);border-radius:10px;padding:12px 8px;text-align:center}
.stat-val{font-size:22px;font-weight:700;color:var(--txt)}
.stat-lbl{font-size:11px;color:var(--muted2);margin-top:2px}
.stat-x{font-size:10px;color:var(--muted2);margin-top:3px;opacity:.85}
.stats-cards.c4{grid-template-columns:repeat(4,1fr)}
.stats-cards.c4 .stat-val{font-size:19px}
.stat-card.speed-resp{box-shadow:inset 0 0 0 1px rgba(95,208,255,.28)}
.stat-card.speed-reso{box-shadow:inset 0 0 0 1px rgba(143,174,148,.32)}
.stat-card.speed-rate{box-shadow:inset 0 0 0 1px rgba(217,176,117,.32)}
.stats-note{font-size:10.5px;color:var(--muted2);margin:-4px 0 10px;line-height:1.35}
.stats-range{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:2px;margin-bottom:10px}
.stats-range-btn{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;padding:5px 14px;border-radius:7px;cursor:pointer}
.stats-range-btn.on{background:var(--bg3);color:var(--accent2)}
.vchart{display:flex;align-items:flex-end;gap:4px;padding:6px 2px 0;margin-bottom:4px}
.vbar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.vbar-area{height:84px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.vbar{width:66%;max-width:18px;background:linear-gradient(var(--accent2),var(--accent));border-radius:3px 3px 0 0;min-height:3px}
.vbar-lbl{font-size:9px;color:var(--muted2);margin-top:4px}
.stats-sep{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 6px}
.stats-lb{display:flex;flex-direction:column;gap:3px}
.stats-lb-row{display:flex;align-items:center;gap:10px;padding:5px 0}
.stats-rank{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--bg);background:#3a352b}
.stats-rank.r1{background:#e3b341} .stats-rank.r2{background:#b9c2cc} .stats-rank.r3{background:#c08457}
.stats-lb-name{font-size:13px;color:var(--txt);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats-lb-val{font-size:12px;color:var(--muted);white-space:nowrap}
.stats-foot{padding:10px 2px 0;color:var(--muted2);font-size:11px}

/* ---- attach preview chip ---- */
.attach-preview{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 6px}
.attach-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:5px 10px;font-size:12.5px;color:var(--txt);max-width:100%}
.attach-chip i{color:var(--muted)}
.attach-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0 2px}
.attach-x:hover{color:var(--bad)}
/* multi-image composer preview (parity with buyer chat): thumbnails + click-zoom + remove */
.attach-chip-img{position:relative;padding:0;background:none;border:none}
.attach-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px;cursor:pointer;display:block;border:1px solid rgba(255,255,255,.12)}
.attach-chip-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-chip-icon{color:var(--muted);font-size:13px}
.attach-chip-remove{background:rgba(0,0,0,.4);border:none;color:#fff;cursor:pointer;font-size:11px;line-height:1;border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none}
.attach-chip-remove:hover{background:var(--bad)}
.attach-chip-img .attach-chip-remove{position:absolute;top:-6px;right:-6px}
.attach-chip.uploading{opacity:.55}
.attach-btn{font-size:18px;color:var(--muted);align-self:flex-end;padding:9px 6px;background:none;border:none;cursor:pointer}
.attach-btn:hover{color:var(--txt)}

/* ── client's other orders with this supplier (head chevron) ── */
.head-corders{border-top:1px solid rgba(255,255,255,.06);padding-top:4px}
.co-toggle{background:none;border:none;color:var(--accent2);font-size:12.5px;cursor:pointer;padding:3px 0;display:inline-flex;align-items:center;gap:7px}
.co-toggle:hover{text-decoration:underline}
.co-caret{font-size:10px;transition:transform .15s ease}
.head-corders.open .co-caret{transform:rotate(180deg)}
.co-list{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px}
.co-row{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;cursor:pointer}
.co-row:hover{background:var(--bg3)}
.co-chan{width:14px;height:14px;flex:none;border-radius:3px}
.co-num{color:var(--accent2);font-weight:600;font-size:12.5px;flex:none}
.co-items{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.co-item{display:inline-flex;align-items:center;gap:6px;min-width:0}
.co-thumb{width:20px;height:20px;border-radius:4px;object-fit:cover;flex:none}
.co-name{font-size:12.5px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
.co-qty,.co-price{font-size:12px;color:var(--muted);flex:none;white-space:nowrap}
.co-same{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:6px;padding:1px 5px;flex:none}
.co-empty{color:var(--muted);font-size:12.5px;padding:4px 8px}
@media (max-width:900px){.co-name{max-width:180px}}

/* ── handoff bar: https deep-link opened in a plain browser tab (e.g. default-browser
   Firefox from Telegram) → offer to reopen in the installed PWA via web+promsupplier ── */
.handoff-bar{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:400;display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid rgba(255,255,255,.14);border-top:none;border-radius:0 0 12px 12px;padding:8px 14px;font-size:13px;color:var(--txt);box-shadow:0 6px 18px rgba(0,0,0,.35);max-width:94vw}
.handoff-bar>i{color:var(--accent2);font-size:13px}
.handoff-bar .ho-open{background:var(--accent);border:none;color:#fff;border-radius:8px;padding:5px 12px;cursor:pointer;font-size:12.5px;flex:none}
.handoff-bar .ho-open:hover{filter:brightness(1.15)}
.handoff-bar .ho-always{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12px;cursor:pointer;flex:none}
.handoff-bar .ho-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px;flex:none}
.handoff-bar .ho-close:hover{color:var(--txt)}
/* quiet screen shown in the leftover tab after the handoff fired (when window.close()
   is refused) — a duplicate chat fighting for attention was the complaint */
.handoff-cover{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;align-items:center;justify-content:center}
.handoff-cover .hc-card{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--muted);font-size:14px}
.handoff-cover .hc-card i{font-size:28px;color:var(--accent2)}
.handoff-cover .hc-stay{background:none;border:1px solid rgba(255,255,255,.18);color:var(--txt);border-radius:9px;padding:7px 14px;cursor:pointer;font-size:13px}
.handoff-cover .hc-stay:hover{border-color:rgba(255,255,255,.35)}

/* ── review click-menu (stars popover): текст/теги/лінки/тікет ── */
.hi-stars.rv-click{cursor:pointer}
.hi-stars.rv-click:hover{filter:brightness(1.25)}
.review-pop{position:fixed;z-index:90;width:380px;max-width:94vw;background:var(--bg3);border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.5);padding:12px}
.review-pop .rv-head{display:flex;align-items:center;gap:8px;min-width:0}
.review-pop .rv-author{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-pop .rv-when{color:var(--muted2);font-size:11.5px;margin-left:auto;flex:none}
.review-pop .rv-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.review-pop .rv-chip{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:8px;background:rgba(255,255,255,.08);color:var(--muted)}
.review-pop .rv-chip.ok{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)}
.review-pop .rv-chip.bad{background:color-mix(in srgb, var(--bad) 14%, transparent);color:var(--bad)}
.review-pop .rv-chip.warn{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn)}
.review-pop .rv-text{margin-top:9px;font-size:13px;line-height:1.5;max-height:180px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}
.review-pop .rv-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.review-pop .rv-tag{font-size:11px;padding:1px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.14);color:var(--muted)}
.review-pop .rv-dim{color:var(--muted2);font-size:12px}
.review-pop .rv-mod{margin-top:7px;max-height:70px;overflow-y:auto}
.review-pop .rv-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.review-pop .rv-act{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.14);color:var(--txt);background:none;cursor:pointer;text-decoration:none}
.review-pop .rv-act:hover{background:rgba(255,255,255,.07)}
.review-pop .rv-act.rv-fix{border-color:color-mix(in srgb, var(--accent) 55%, transparent);color:var(--accent2)}
.review-pop .rv-act.rv-closed{opacity:.6;text-decoration:line-through}

/* ── payment badge (orders.evopay_status): «Оплачено» ok/warn, «Повернено» back ── */
.pay-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:9px;font-size:10.5px;font-weight:700;letter-spacing:.2px;flex:none;line-height:1.5}
.pay-badge.ok{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)}
.pay-badge.warn{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn)}
.pay-badge.back{background:color-mix(in srgb, var(--bad) 14%, transparent);color:var(--bad)}

/* ── theme switcher popover (palette icon in the header) ── */
#sidebar header{position:relative}   /* anchor for .theme-pop */
.theme-pop{position:absolute;top:40px;right:8px;z-index:80;background:var(--bg3);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.5);padding:6px;min-width:210px}
.theme-pop .tp-title{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted2);padding:4px 8px 6px}
.theme-pop .tp-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 8px;border-radius:8px;font-size:13px;color:var(--txt);cursor:pointer;background:none;border:none}
.theme-pop .tp-item:hover{background:rgba(255,255,255,.06)}
.theme-pop .tp-item.active{background:var(--bg-active)}
.theme-pop .tp-sw{width:22px;height:22px;border-radius:6px;flex:none;border:1px solid rgba(255,255,255,.18)}
.theme-pop .tp-item .fa-check{margin-left:auto;font-size:11px;color:var(--accent2)}
.theme-pop .tp-sep{margin-top:6px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.theme-pop .tp-sw.tex{background-color:var(--bg)}
.theme-pop .tp-sw.tex-dots{background-image:radial-gradient(circle at 50% 50%, rgba(255,255,255,.4) 0 .8px, transparent .8px);background-size:6px 6px}
.theme-pop .tp-sw.tex-stripes{background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.32) 0 1px, transparent 1px 5px)}
.theme-pop .tp-sw.tex-stripes-r{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.32) 0 1px, transparent 1px 5px)}
.theme-pop .tp-sw.tex-grid{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 1px, transparent 1px 5px),repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 1px, transparent 1px 5px)}
.theme-pop .tp-sw.tex-waffle{background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px 6px),repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 6px)}
.theme-pop .tp-sw.tex-scale{background-image:radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21% 34%, transparent 35%),radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21% 34%, transparent 35%);background-size:10px 20px;background-position:0 0, 5px 10px}

/* «усі в CRM» next to the client-orders chevron — opens orders.php by phone (all at once) */
.co-head{display:flex;align-items:center;gap:10px}
.co-crm{background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--muted);border-radius:12px;padding:2px 9px;font-size:11.5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;flex:none;margin-left:auto}
.co-crm:hover{color:var(--accent2);border-color:var(--accent)}
.co-crm i{font-size:10px}

/* інлайн-аудіоплеєр у бульбашці повідомлення (переюз .aplayer зі в'ю транскрипта дзвінка) —
   даємо стиснутись усередині вузької бульбашки, замість фіксованих 280px */
.msg .aplayer{min-width:0;max-width:100%;margin-top:6px}
.msg.out .aplayer{background:var(--bubble-out,var(--bg));}


/* крапка стану кабінету МІЖ логотипом і назвою постачальника (Іван: не перекривати лого):
   зелена = кабінет активний (прочитає), сіра = кабінету немає (не прочитає) */
.head-cab-dot{width:7px;height:7px;border-radius:50%;flex:none;margin:0 2px 0 1px;
  background:var(--muted2,#7b8794);opacity:.5}
.head-cab-dot.on{background:#5cc98a;opacity:1}