/* LA Пʼєць — адмінка. Дві теми: light (Precision Enterprise) / dark (Signal Pulse). */
:root, [data-theme="light"] {
  --bg:#f8fafc; --surface:#fff; --surface-2:#f1f5f9; --surface-3:#e2e8f0; --border:#e2e8f0; --border-strong:#cbd5e1;
  --text:#0f172a; --muted:#64748b; --primary:#2563eb; --primary-hover:#1d4ed8; --on-primary:#fff;
  --accent-soft:#dbeafe; --accent-text:#1d4ed8; --shadow:0 1px 3px rgba(15,23,42,.08); --shadow-lg:0 12px 32px rgba(15,23,42,.14);
  --bubble-in:#fff; --bubble-out:#2563eb; --bubble-out-text:#fff; --scrim:rgba(15,23,42,.45);
  --green:#059669; --green-bg:#ecfdf5; --amber:#d97706; --amber-bg:#fffbeb; --rose:#dc2626; --rose-bg:#fef2f2;
  --sky:#0284c7; --sky-bg:#f0f9ff; --violet:#7c3aed; --violet-bg:#f5f3ff; --muted-bg:#f1f5f9;
}
[data-theme="dark"] {
  --bg:#131313; --surface:#1c1b1b; --surface-2:#2a2a2a; --surface-3:#353534; --border:#2f2e2e; --border-strong:#454443;
  --text:#e5e2e1; --muted:#a09d9a; --primary:#fee400; --primary-hover:#ffee4d; --on-primary:#201c00;
  --accent-soft:rgba(254,228,0,.12); --accent-text:#fee400; --shadow:0 1px 3px rgba(0,0,0,.5); --shadow-lg:0 12px 32px rgba(0,0,0,.6);
  --bubble-in:#2a2a2a; --bubble-out:#fee400; --bubble-out-text:#201c00; --scrim:rgba(0,0,0,.6);
  --green:#4edea3; --green-bg:rgba(78,222,163,.12); --amber:#fbbf24; --amber-bg:rgba(251,191,36,.12); --rose:#fb7185; --rose-bg:rgba(251,113,133,.14);
  --sky:#38bdf8; --sky-bg:rgba(56,189,248,.12); --violet:#a78bfa; --violet-bg:rgba(167,139,250,.14); --muted-bg:#2a2a2a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.45 Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);transition:background .25s,color .25s}
h1,h2,h3,h4,p{margin:0}
h1{font-size:24px;line-height:32px;letter-spacing:-.02em;font-weight:700}
h2{font-size:18px;font-weight:600}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.muted{color:var(--muted)} .small{font-size:12px} .mono{font-family:ui-monospace,monospace;font-size:12px}
time,.stat b,.count,.badge{font-variant-numeric:tabular-nums}
.mi{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;user-select:none;vertical-align:middle;flex:none}

/* shell */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:8px;padding:16px 12px;background:var(--surface);border-right:1px solid var(--border);z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.brand-mark{width:38px;height:38px;border-radius:10px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:800;letter-spacing:-.02em;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15} .brand-text small{color:var(--muted);font-size:11px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;color:var(--muted);font-weight:500;position:relative;transition:background .15s,color .15s,transform .15s}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.is-on{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.nav a.is-on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
.badge{margin-left:auto;background:var(--rose);color:#fff;border-radius:99px;font-size:11px;font-weight:700;font-style:normal;padding:1px 7px;animation:pop .3s}
.sidebar-foot{margin-top:auto}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;height:60px;display:flex;align-items:center;gap:12px;padding:0 24px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.spacer{flex:1}
.presence{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:99px;background:var(--surface)}
.presence select{border:0;background:none;outline:0;font-weight:600;cursor:pointer}
.presence select option{background:var(--surface);color:var(--text)}
.live{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--amber);transition:background .3s}
.live.is-on i{background:var(--green);box-shadow:0 0 0 0 var(--green);animation:pulse 2s infinite}
.role-pill{padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent-text)}
.user{display:flex;align-items:center;gap:8px}
.user-name{font-weight:600}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);font-weight:700;font-size:12px;flex:none}
.view{padding:24px;max-width:1440px;width:100%;margin:0 auto;outline:0;animation:view-in .22s ease both}
.view.is-leaving{animation:view-out .12s ease both}
.only-mobile{display:none}
.scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(3px);z-index:25;animation:fade .2s}

/* primitives */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:8px;border:1px solid transparent;font-weight:600;white-space:nowrap;transition:transform .12s,background .15s,box-shadow .15s,opacity .15s}
.btn:active{transform:scale(.97)} .btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--primary);color:var(--on-primary)} .btn-primary:hover:not(:disabled){background:var(--primary-hover);box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 40%,transparent)}
.btn-ghost{background:var(--surface-2);border-color:var(--border-strong)} .btn-ghost:hover:not(:disabled){background:var(--surface-3)}
.btn-danger{background:var(--rose-bg);color:var(--rose);border-color:color-mix(in srgb,var(--rose) 35%,transparent)}
.btn-lg{min-height:48px;font-size:15px;width:100%} .btn-block{width:100%}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:8px;border:0;background:none;color:var(--muted);transition:background .15s,color .15s}
.icon-btn:hover{background:var(--surface-2);color:var(--text)} .icon-btn.danger:hover{color:var(--rose)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:600;width:100%}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;font-size:11px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.pill-green{background:var(--green-bg);color:var(--green)} .pill-amber{background:var(--amber-bg);color:var(--amber)} .pill-rose{background:var(--rose-bg);color:var(--rose)}
.pill-sky{background:var(--sky-bg);color:var(--sky)} .pill-violet{background:var(--violet-bg);color:var(--violet)} .pill-muted{background:var(--muted-bg);color:var(--muted)} .pill-accent{background:var(--accent-soft);color:var(--accent-text)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.dot-online{background:var(--green)} .dot-break{background:var(--amber)} .dot-offline{background:var(--muted)}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-bottom:4px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .field>span{font-size:12px;font-weight:600;color:var(--muted)}
.input{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--muted);transition:border-color .15s,box-shadow .15s}
.input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.input input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--text);height:42px}
.field select,.field textarea{border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);padding:10px 12px;outline:0;min-height:44px;color:var(--text)}
.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.form-error{color:var(--rose);background:var(--rose-bg);border-radius:8px;padding:10px 12px;margin:0 0 12px;font-size:13px;animation:shake .3s}
.empty{display:grid;place-items:center;gap:8px;padding:56px 16px;text-align:center;color:var(--muted)} .empty .mi{font-size:40px;opacity:.6}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px} .stats-3{grid-template-columns:repeat(3,1fr)}
.stat{padding:18px;display:flex;flex-direction:column;gap:6px;transition:transform .2s,box-shadow .2s} .stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat-label{font-size:12px;font-weight:600;color:var(--muted)} .stat b{font-size:32px;line-height:1.1;letter-spacing:-.02em}
.stat small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px} .stat small .mi{font-size:16px}
.stat-warn b{color:var(--amber)}
.stat b.bump{animation:bump .4s}
.toolbar{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:16px;flex-wrap:wrap}
.tabs{display:flex;gap:4px;padding:3px;background:var(--surface-2);border-radius:8px;overflow:auto;max-width:100%}
.tab{border:0;background:none;padding:7px 12px;border-radius:6px;color:var(--muted);font-weight:600;white-space:nowrap;transition:background .15s,color .15s}
.tab.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.count{font-style:normal;background:var(--accent-soft);color:var(--accent-text);border-radius:99px;padding:0 6px;font-size:11px} .count-rose{background:var(--rose-bg);color:var(--rose)}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;padding:0 12px;min-height:40px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--muted)}
.search:focus-within{border-color:var(--primary)} .search input{flex:1;border:0;background:none;outline:0;color:var(--text);height:38px}

/* chat list */
.rows{display:flex;flex-direction:column;gap:12px;transition:opacity .15s} .rows.is-loading{opacity:.55}
.chat-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px;border-left:4px solid var(--border-strong);transition:transform .18s,box-shadow .18s,border-color .2s;animation:row-in .28s both}
.chat-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.chat-row.tone-amber{border-left-color:var(--amber)} .chat-row.tone-green{border-left-color:var(--green)} .chat-row.is-unread{border-left-color:var(--rose)}
.chat-row.is-new{animation:flash 1.6s}
.ava{position:relative;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);font-weight:800;flex:none}
.ava-anon{background:var(--violet-bg);color:var(--violet)} .ava-dot{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--rose);border:2px solid var(--surface)}
.row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .row-head h3{font-size:16px;font-weight:700}
.row-preview{margin:4px 0 6px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center} .row-meta .mi{font-size:15px;margin-right:2px}
.pager{display:flex;align-items:center;justify-content:space-between;padding:8px 4px;flex-wrap:wrap;gap:8px}
.pager-btns{display:flex;gap:4px} .pager-btn{min-width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--surface);transition:background .15s} .pager-btn.is-on{background:var(--primary);color:var(--on-primary);border-color:var(--primary);font-weight:700}

/* dialog */
.dialog-head{justify-content:flex-start;align-items:center} .dialog-head h1{font-size:20px} .dialog-head .pill{margin-left:auto}
.dialog-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.dialog-grid.with-transfer{grid-template-columns:300px minmax(0,1fr) 320px}
.side-client{padding:16px;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto}
.client-top{display:flex;gap:12px;align-items:center;margin-bottom:12px} .client-top div:last-child{display:flex;flex-direction:column}
.facts{margin:0;display:grid;gap:10px} .facts div{display:flex;justify-content:space-between;gap:10px;font-size:13px} .facts dt{color:var(--muted)} .facts dd{margin:0;font-weight:600;text-align:right}
.note{margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--amber-bg);color:var(--text)} .note b{font-size:12px;color:var(--amber)} .note p{margin-top:2px;font-size:13px}
.side-title{margin:18px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.history{list-style:none;margin:0;padding:0;display:grid;gap:8px} .history a{display:block;padding:10px;border:1px solid var(--border);border-radius:8px;transition:background .15s} .history a:hover{background:var(--surface-2)}
.history p{margin:4px 0 2px;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .history time{font-size:11px;color:var(--muted)}
.chat-pane{display:flex;flex-direction:column;height:calc(100vh - 160px);min-height:480px}
.chat-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.chat-actions{display:flex;gap:8px}
.messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;background:var(--bg)}
.msg{display:flex;flex-direction:column;max-width:78%;animation:msg-in .22s both}
.msg-who{font-size:12px;font-weight:600;margin-bottom:3px;color:var(--muted)} .msg-who time{font-weight:400;margin-left:4px}
.bubble{padding:10px 14px;border-radius:14px;background:var(--bubble-in);border:1px solid var(--border);overflow-wrap:anywhere;font-size:15px;line-height:22px}
.msg-in{align-self:flex-start} .msg-in .bubble{border-top-left-radius:4px}
.msg-out{align-self:flex-end;align-items:flex-end} .msg-out .bubble{background:var(--bubble-out);color:var(--bubble-out-text);border-color:transparent;border-top-right-radius:4px}
.ticks{font-size:11px;color:var(--muted);margin-top:2px;letter-spacing:-3px} .ticks.is-read{color:var(--green)}
.msg-system{align-self:center;max-width:90%;flex-direction:row;gap:8px;align-items:center;font-size:12px;color:var(--muted);background:var(--surface-2);border-radius:99px;padding:6px 14px;text-align:center}
.msg-system[data-kind="wait_notice"],.msg-system[data-kind="idle_warning"]{background:var(--amber-bg);color:var(--amber)}
.msg-system[data-kind="closed"]{background:var(--rose-bg);color:var(--rose)}
.msg-system time{opacity:.7}
.closed-note{display:flex;gap:8px;align-items:center;justify-content:center;padding:12px;border-top:1px solid var(--border);color:var(--muted);background:var(--surface-2);font-size:13px}
.composer{display:flex;gap:10px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--border)}
.composer textarea{flex:1;resize:none;max-height:140px;border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;background:var(--surface);outline:0;line-height:20px;min-height:44px}
.composer textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.transfer-pane{padding:16px;position:sticky;top:76px;animation:slide-in .22s both}
.transfer-pane header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.op-list{display:grid;gap:8px;margin:12px 0}
.op{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}
.op:hover{background:var(--surface-2)} .op.is-on{border-color:var(--primary);background:var(--accent-soft)} .op.is-off{opacity:.5}
.op input{accent-color:var(--primary)} .op small{display:block;color:var(--muted)}

/* operators / profile */
.table-card{overflow:auto} .table{width:100%;border-collapse:collapse;min-width:760px}
.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle} .table tr:last-child td{border-bottom:0} .table tbody tr{transition:background .15s} .table tbody tr:hover{background:var(--surface-2)}
.who{display:flex;gap:10px;align-items:center} .who div{display:flex;flex-direction:column} .t-actions{text-align:right;white-space:nowrap}
.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start} .form-card{padding:20px} .form-card h2{margin-bottom:14px}
.seg{display:inline-flex;padding:3px;background:var(--surface-2);border-radius:8px;gap:2px} .seg button{display:flex;gap:6px;align-items:center;border:0;background:none;padding:8px 14px;border-radius:6px;color:var(--muted);font-weight:600}
.seg button.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.radio-list{display:grid;gap:10px;margin-top:12px} .radio{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}
.radio:has(input:checked){border-color:var(--primary);background:var(--accent-soft)} .radio input{accent-color:var(--primary)} .radio span{display:flex;flex-direction:column}
.modal{border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);padding:0;width:min(440px,calc(100vw - 32px));box-shadow:var(--shadow-lg)}
.modal::backdrop{background:var(--scrim);backdrop-filter:blur(3px)} .modal[open]{animation:pop .2s}
.modal-body{padding:20px} .modal-body header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .modal-body footer{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

/* toasts */
.toasts{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:60;max-width:calc(100vw - 32px)}
.toast{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);animation:slide-up .25s both;cursor:pointer;max-width:360px}
.toast.is-err{border-color:var(--rose)} .toast.is-ok{border-color:var(--green)} .toast .mi{color:var(--accent-text)} .toast.is-out{animation:fade-out .2s both}
.skeleton{height:84px;border-radius:12px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:shimmer 1.2s infinite}

/* login */
.login-body{background:radial-gradient(900px 400px at 50% -10%,var(--accent-soft),transparent),var(--bg)}
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px}
.login-top{display:flex;gap:12px;align-items:center}
.login-card{width:min(440px,100%);padding:32px;animation:pop .35s both} .login-card h1{font-size:30px;margin:14px 0 6px;font-weight:800} .login-card .muted{margin-bottom:22px}
.login-card .btn{margin-top:4px} .hint{display:flex;gap:8px;align-items:flex-start;margin-top:20px;padding:12px;border:1px solid var(--border);border-radius:10px;color:var(--muted);font-size:12px}

/* motion */
@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes view-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes row-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes msg-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slide-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes slide-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}} @keyframes fade-out{to{opacity:0;transform:translateX(12px)}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes bump{40%{transform:scale(1.15)}}
@keyframes flash{0%,60%{box-shadow:0 0 0 2px var(--primary)}100%{box-shadow:var(--shadow)}}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes shimmer{to{background-position:-200% 0}} @keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* responsive */
@media (max-width:1180px){.dialog-grid.with-transfer{grid-template-columns:300px minmax(0,1fr)} .transfer-pane{position:fixed;right:0;top:0;bottom:0;width:min(360px,100vw);z-index:40;border-radius:0;overflow:auto}}
@media (max-width:1024px){.stats{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} .dialog-grid{grid-template-columns:1fr} .side-client{position:static;max-height:none} .chat-pane{height:calc(100vh - 120px)}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr} .only-mobile{display:inline-grid}
  .sidebar{position:fixed;inset:0 auto 0 0;width:270px;transform:translateX(-100%);transition:transform .25s;box-shadow:var(--shadow-lg)} .sidebar.is-open{transform:none}
  .topbar{padding:0 12px} .user-name,.live span{display:none} .view{padding:16px 12px 24px}
  .chat-row{grid-template-columns:auto 1fr} .row-actions{grid-column:1/-1} .row-actions .btn{width:100%}
  .msg{max-width:90%} h1{font-size:22px}
}
@media (max-width:520px){.stats,.stats-3{grid-template-columns:1fr 1fr} .stat b{font-size:26px} .chat-actions .btn span{display:none} .chat-actions .btn{padding:0 12px}}

/* смужка завантаження при AJAX-навігації */
body.is-loading::after{content:"";position:fixed;left:0;top:0;height:3px;width:40%;background:var(--primary);z-index:100;border-radius:0 3px 3px 0;animation:load-bar 1.1s ease-in-out infinite}
@keyframes load-bar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* швидкі відповіді */
.composer{position:relative}
.slash-menu{position:absolute;left:16px;right:16px;bottom:calc(100% - 4px);max-height:260px;overflow-y:auto;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:15;animation:pop .14s}
.slash-item{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:baseline;width:100%;text-align:left;border:0;background:none;padding:9px 10px;border-radius:8px;color:var(--text);transition:background .1s}
.slash-item b{color:var(--accent-text);font-family:ui-monospace,monospace;font-size:13px}
.slash-item span{font-weight:600} .slash-item small{grid-column:2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slash-item:hover,.slash-item.is-on{background:var(--accent-soft)}
code{background:var(--surface-2);padding:1px 6px;border-radius:6px;font-size:.9em}
.tpl-body{max-width:420px;color:var(--muted)}

/* логотип (картинка оператора з віджета) */
.brand-logo{width:40px;height:40px;border-radius:50%;flex:none;display:block;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.brand-logo-lg{width:56px;height:56px}

.quick-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--accent-text);transition:background .15s,transform .12s}
.quick-btn:hover{background:var(--accent-soft)} .quick-btn:active{transform:scale(.95)}

/* оператори: картка в чаті, фільтр, підсвітка «надсилає» */
.op-ava{position:relative;transition:background .25s,color .25s,box-shadow .25s}
.op-ava-sm{width:22px;height:22px;font-size:9px;margin-right:6px}
.op-ava-lg{width:46px;height:46px;font-size:15px;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--border-strong)}
.op-ava.is-sending{background:var(--green);color:#04210f;box-shadow:0 0 0 3px var(--green-bg),0 0 0 7px color-mix(in srgb,var(--green) 40%,transparent);animation:op-send 1.9s ease-out}
@keyframes op-send{0%{transform:scale(1)}14%{transform:scale(1.2)}100%{transform:scale(1)}}
.op-card{display:flex;align-items:center;gap:12px;min-width:0}
.op-card{margin-left:6px}
.op-card-text{display:grid;grid-template-columns:auto auto;column-gap:8px;row-gap:1px;align-items:center;justify-items:start;min-width:0}
.op-card-text small{grid-column:1/-1}
.op-card small{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.op-card b{font-size:15px;line-height:1.2}
.op-card.is-empty .op-ava{background:var(--surface-3);color:var(--muted)}
.op-filter{display:flex;align-items:center;gap:6px;padding:0 10px;min-height:40px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--muted)}
.op-filter select{border:0;background:none;outline:0;color:var(--text);font-weight:600;min-height:38px;cursor:pointer;max-width:230px}
.op-filter select option{background:var(--surface);color:var(--text)}
.row-op{display:inline-flex;align-items:center}
@media (prefers-reduced-motion:reduce){.op-ava.is-sending{animation:none}}

/* зміна сьогодні */
.shift-actions{display:flex;gap:8px;flex-wrap:wrap}
.shift-sum{display:flex;align-items:center;gap:8px;padding:14px 18px;margin-bottom:14px;flex-wrap:wrap}
.shift-list{display:grid;gap:10px}
.shift-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:14px;align-items:center;padding:14px 18px;cursor:pointer;border-left:4px solid var(--border-strong);transition:border-color .2s,background .2s,transform .15s}
.shift-row:hover{transform:translateY(-1px)} .shift-row.is-on{border-left-color:var(--green);background:color-mix(in srgb,var(--green) 6%,var(--surface))}
.shift-who{display:flex;flex-direction:column;min-width:0} .shift-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shift-load{color:var(--muted);font-size:13px;white-space:nowrap}
.switch{display:inline-flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap;cursor:pointer}
.switch input{position:absolute;opacity:0;pointer-events:none} .switch em{font-style:normal;font-size:13px}
.switch i{position:relative;width:46px;height:26px;border-radius:99px;background:var(--surface-3);border:1px solid var(--border-strong);transition:background .2s}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
.switch input:checked + i{background:var(--green);border-color:transparent} .switch input:checked + i::after{transform:translateX(20px)}
.switch input:focus-visible + i{outline:2px solid var(--primary);outline-offset:2px}
@media (max-width:760px){.shift-row{grid-template-columns:auto 1fr auto}.shift-row .pill,.shift-row .shift-load{grid-column:2}.shift-row .switch{grid-column:3;grid-row:1}}

/* компактна шапка чату: кнопки менші, при нестачі місця — лише іконки */
.chat-pane{container-type:inline-size;container-name:chatpane}
.chat-bar{flex-wrap:wrap;gap:8px 12px;padding:10px 14px}
.chat-bar .op-card{flex:1 1 200px;min-width:0}
.op-card b{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-actions{flex:0 0 auto;gap:6px}
.chat-actions .btn{min-height:34px;padding:0 11px;font-size:13px;gap:6px;border-radius:8px}
.chat-actions .btn .mi{font-size:18px}
@container chatpane (max-width: 760px){
  .chat-actions .btn span:not(.mi){display:none}
  .chat-actions .btn{padding:0 10px}
}

/* згортання лівого меню (комп'ютер) */
.shell{transition:grid-template-columns .22s ease}
.sidebar{overflow:hidden;transition:padding .22s}
.sidebar-collapsed .shell{grid-template-columns:72px 1fr}
.sidebar-collapsed .sidebar{padding:16px 10px}
.sidebar-collapsed .brand{justify-content:center;padding:4px 0 16px}
.sidebar-collapsed .brand-text,.sidebar-collapsed .nav a span:not(.mi),.sidebar-collapsed .sidebar-foot span:not(.mi){display:none}
.sidebar-collapsed .nav a{justify-content:center;padding:12px 0}
.sidebar-collapsed .nav a.is-on::before{left:-10px}
.sidebar-collapsed .nav .badge{position:absolute;top:4px;right:6px;margin:0;padding:0 5px;font-size:10px}
.sidebar-collapsed .sidebar-foot .chip{justify-content:center;padding:0}
@media (max-width:860px){
  .sidebar-collapsed .shell{grid-template-columns:1fr}
  .sidebar-collapsed .sidebar{padding:16px 12px}
  .sidebar-collapsed .brand-text,.sidebar-collapsed .nav a span:not(.mi),.sidebar-collapsed .sidebar-foot span:not(.mi){display:revert}
  .sidebar-collapsed .nav a{justify-content:flex-start;padding:11px 12px}
}

/* жива черга в шапці діалогу */
.queue-strip{flex:1;min-width:0;display:flex;align-items:center;gap:10px;margin:0 16px;padding:6px 10px;border:1px dashed var(--border-strong);border-radius:12px;background:color-mix(in srgb,var(--amber) 6%,transparent)}
.queue-strip.is-empty{background:none}
.qs-label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--amber);white-space:nowrap}
.qs-label .mi{font-size:17px} .qs-label b{background:var(--amber);color:#111;border-radius:99px;padding:0 7px;font-size:11px}
.queue-strip.is-empty .qs-label{color:var(--muted)} .queue-strip.is-empty .qs-label b{background:var(--surface-3);color:var(--muted)}
.qs-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:2px 0;min-width:0}
.qs-pill{display:inline-flex;align-items:center;gap:7px;flex:none;padding:6px 12px;border-radius:99px;background:var(--surface);border:1px solid var(--amber);color:var(--text);font-size:12px;transition:background .15s,transform .12s,border-color .2s;animation:pop .25s}
.qs-pill:hover{background:var(--accent-soft);transform:translateY(-1px)} .qs-pill:active{transform:scale(.96)}
.qs-pill b{font-weight:700;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qs-pill span{color:var(--muted)} .qs-pill time{font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.qs-pill.is-new{animation:qs-in .5s} .qs-pill.is-late{border-color:var(--rose)} .qs-pill.is-late time{color:var(--rose)} .qs-pill.is-late .dot{background:var(--rose)}
.qs-pill.is-out{opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s;pointer-events:none}
.qs-empty{color:var(--muted);font-size:12px;white-space:nowrap}
@keyframes qs-in{0%{transform:translateY(-8px) scale(.9);opacity:0;box-shadow:0 0 0 0 var(--amber)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--amber) 30%,transparent)}100%{transform:none;opacity:1;box-shadow:none}}
@media (max-width:860px){.queue-strip{order:5;flex-basis:100%;margin:8px 0 0}}