/* «Корабль»: язык прототипа Лагуны (посадочный талон, моно-подписи, синий системы, малиновый директора).
   Компьютер: тёмная боковая панель + светлое поле карточек. Телефон: экран на всю ширину + тёмное нижнее меню. */
:root {
  --bg: #ECEFF4; --card: #fff; --ink: #0E1A33; --mut: #5B6880; --dim: #9AA6BA; --line: #EEF1F6; --line2: #DCE2EA; --soft: #F5F7FA;
  --c: oklch(0.48 0.2 265); --c2: oklch(0.62 0.17 265); --c-bg: #EEF1FB; --c-t: oklch(0.48 0.2 265 / .1);
  --s: oklch(0.58 0.21 355); --s-d: oklch(0.52 0.21 355); --s-t: oklch(0.58 0.21 355 / .1);
  --g: oklch(0.62 0.17 155); --g-d: oklch(0.45 0.13 155); --g-t: oklch(0.62 0.17 155 / .12);
  --r: oklch(0.6 0.2 28); --r-d: oklch(0.52 0.2 28); --r-t: oklch(0.6 0.2 28 / .1);
  --y: oklch(0.78 0.14 75); --y-t: oklch(0.78 0.14 75 / .16);
  --sans: Onest, system-ui, -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --e: cubic-bezier(.22,1,.36,1); --sp: cubic-bezier(.32,1.12,.5,1);
  --sh: 0 1px 2px rgba(14,26,51,.06);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.4 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
/* Свои стрелки у списков: системная прилипает к краю */
select { appearance: none; -webkit-appearance: none; background-color: #fff; background-repeat: no-repeat;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
         background-size: 11px 7px; background-position: right 12px center; }
:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: 8px; }
.mono { font-family: var(--mono); }
.k { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.lbl { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.muted { color: var(--mut); }
.error { color: var(--r-d); }
.inline { display: inline; }
.press { transition: transform .25s var(--e); }
.press:active { transform: scale(.97); }
@keyframes rise { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes bubIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* pills, avatars, buttons */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; font: 500 10.5px var(--mono); letter-spacing: .04em; white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-c { background: var(--c-t); color: var(--c); } .p-s { background: var(--s-t); color: var(--s-d); }
.p-g { background: var(--g-t); color: var(--g-d); } .p-r { background: var(--r-t); color: var(--r-d); }
.p-m { background: #EEF1F6; color: var(--mut); } .p-y { background: var(--y-t); color: oklch(0.5 0.12 70); }
.av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; background: var(--c-bg); color: var(--c); }
.av.sm { width: 30px; height: 30px; font-size: 12px; }
.btn { height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; font-weight: 600; font-size: 14.5px; background: var(--c); color: #fff; transition: transform .25s var(--e), opacity .2s; }
.btn:active { transform: scale(.97); }
.btn.s { background: var(--s); }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: var(--sh); }
.btn.sm { height: 34px; border-radius: 11px; font-size: 13px; padding: 0 12px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { color: var(--c); font-weight: 500; }
.card { background: var(--card); border-radius: 22px; box-shadow: var(--sh); }
.field, .inp, select.sel { border: 1px solid var(--line2); background-color: #fff; border-radius: 14px; padding: 10px 14px; outline: none; width: 100%; }
.field:focus, .inp:focus, select.sel:focus { border-color: var(--c2); }

/* ── вход ── */
body.login { display: grid; place-items: center; min-height: 100dvh; padding: 16px; background: radial-gradient(ellipse at 50% 0%, #F2F4F8, #D3D9E2 75%); }
.login-card { width: 100%; max-width: 380px; padding: 28px 24px 24px; animation: rise .6s var(--e) both; }
.login-card .logo { margin-bottom: 18px; }
.login-card h1 { margin: 6px 0 18px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.login-card label { display: block; margin-bottom: 14px; }
.login-card label span { display: block; margin-bottom: 6px; }
.login-card .btn { width: 100%; height: 48px; margin-top: 4px; }

/* ── логотип ── */
.logo { display: flex; align-items: center; gap: 10px; }
.logo .m { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--c); display: grid; place-items: center; }
.logo b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.logo b span { opacity: .55; font-weight: 500; }
.logo small { display: block; font: 500 9.5px var(--mono); letter-spacing: .1em; opacity: .55; margin-top: 1px; }

/* ── каркас: боковая панель + основное поле ── */
body.app { height: 100dvh; overflow: hidden; }
.shell { display: flex; height: 100dvh; }
.side { flex: none; width: 240px; height: 100%; background: var(--ink); color: #fff; padding: 20px 12px 14px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.side .cap { font: 500 9.5px var(--mono); letter-spacing: .12em; opacity: .45; padding: 0 8px 6px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 13px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.62); transition: background .3s, color .3s; }
.side nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side nav a.on { background: var(--c); color: #fff; }
.side nav svg { width: 20px; height: 20px; flex: none; }
.side nav .bd { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--s); color: #fff; font: 600 10.5px var(--sans); display: grid; place-items: center; }
.side .me { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.07); }
.side .me .row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side .me .av { width: 32px; height: 32px; font-size: 13px; background: rgba(255,255,255,.12); color: #fff; }
.side .me b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.side .me small { display: block; font-size: 11px; opacity: .55; }
.side .me .out { margin-left: auto; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.side .me .out:hover { color: #fff; }

/* статус «на месте / отошла» */
/* Статус раздачи: три различимых состояния (зелёный «Принимаю заявки», жёлтый «Перерыв», серый «Не в сети»). */
.st-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: #E3E8EF; color: var(--mut); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background .3s, color .3s; }
.st-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.st-chip[data-status="free"] { background: var(--g-t); color: var(--g-d); }
.st-chip[data-status="free"] i { background: var(--g); box-shadow: 0 0 0 3px var(--g-t); }
.st-chip[data-status="away"] { background: var(--y-t); color: oklch(0.5 0.12 75); }
.st-chip[data-status="away"] i { background: var(--y); }
.st-chip[data-status="offline"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dim); }
.st-chip:hover { filter: brightness(.97); }
.status-toggle { display: grid; grid-template-columns: 1fr 1fr; background: #E3E8EF; border-radius: 13px; padding: 3px; height: 44px; }
.status-toggle button { font-size: 13.5px; font-weight: 600; color: var(--mut); border-radius: 10px; transition: color .3s, background .3s; }
.status-toggle[data-status="free"] [data-set="free"] { background: var(--g); color: #fff; }
.status-toggle[data-status="away"] [data-set="away"] { background: #fff; color: oklch(0.5 0.12 75); box-shadow: 0 1px 3px rgba(14,26,51,.12); }
/* Полоса над списком заявок: статус не «Принимаю заявки» — заявки не приходят. */
.take-off { flex: none; display: flex; align-items: center; gap: 12px; margin: 0 24px 10px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--y-t); box-shadow: inset 0 0 0 1px oklch(0.78 0.14 75 / .35); }
.take-off[hidden] { display: none; }
.take-off > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.take-off b { font-size: 14px; font-weight: 600; }
.take-off small { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.take-off .btn { margin-left: auto; flex: none; }
/* Подвкладки раздела (_subnav.html): один вид вкладок .seg над содержимым страницы. */
.subnav { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 24px 12px; min-width: 0; }
.subnav .seg { margin: 0; flex: 0 1 auto; min-width: 0; grid-auto-columns: minmax(max-content, 1fr); }
.subnav .seg a { padding: 0 16px; gap: 6px; display: flex; align-items: center; justify-content: center; }
.subnav-act { margin-left: auto; flex: none; }
.subnav ~ .split .new-btn { display: none; }   /* «+ Заявка» уже в строке раздела */
.bd { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--s); color: #fff; font: 600 10.5px/18px var(--sans); font-style: normal; text-align: center; }
.bd[hidden] { display: none; }
.tg-state { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 12.5px; font-weight: 600; color: #fff; transition: background .3s; }
.tg-state svg { width: 18px; height: 18px; flex: none; }
a.tg-state:hover { background: rgba(255,255,255,.14); }
.tg-state.on { background: transparent; color: rgba(255,255,255,.62); font-weight: 500; padding: 0 8px; }
.tg-state.on svg { color: var(--g); }
.tg-hint { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--c); color: #fff; }
.tg-hint b { font-size: 13.5px; font-weight: 600; }
.tg-hint span { font-size: 12px; opacity: .8; line-height: 1.4; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.topline { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 24px; }
.topline .crumb { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }
.topline .crumb .lbl { color: var(--mut); }
.topline .clock { margin-left: auto; }

/* ── полоса предложений заявки ── */
.offers { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 0 24px; }
.offers:empty { display: none; }
.offer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 20px; background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(14,26,51,.18); animation: slideDown .5s var(--e) both; }
.offer .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--s); box-shadow: 0 0 0 4px oklch(0.58 0.21 355 / .25); animation: pulse 1.6s ease-in-out infinite; }
.offer .t { min-width: 0; }
.offer .t b { display: block; font-size: 15px; font-weight: 600; }
.offer .t small { display: block; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 2px; }
.offer .left { font: 600 18px var(--mono); font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 10px; background: rgba(255,255,255,.1); }
.offer .left.late { background: var(--s); }
.offer .actions { margin-left: auto; display: flex; gap: 8px; }
.offer .take { height: 40px; padding: 0 18px; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 600; }
.offer .decline { height: 40px; padding: 0 14px; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-weight: 500; }

/* ── переписки: две колонки ── */
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 0; }
.list-col { min-height: 0; display: flex; flex-direction: column; padding: 4px 16px 16px 24px; overflow: hidden; }
.list-col .head { padding: 4px 4px 12px; }
/* На телефоне раздел и «+ Заявка» уже в подвкладках сверху: заголовок списка не повторяем */
@media (max-width: 900px) { .list-col .head { display: none; } }
.list-col h1 { margin: 2px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #E3E8EF; border-radius: 13px; padding: 3px; height: 40px; margin-bottom: 10px; }
.seg a { display: grid; place-items: center; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--mut); transition: color .3s, background .3s; white-space: nowrap; padding: 0 6px; }
.seg a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(14,26,51,.12); }
.search { position: relative; margin-bottom: 12px; }
.search input { border: 0; border-radius: 14px; background: #fff; box-shadow: var(--sh); padding: 11px 14px 11px 38px; width: 100%; outline: none; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--dim); }
#list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
#list::-webkit-scrollbar { display: none; }
.list { background: var(--card); border-radius: 22px; box-shadow: var(--sh); overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); transition: background .2s; animation: rise .45s var(--e) both; }
.li:first-child { border-top: 0; }
.settled .li, .settled .bubble { animation: none; }
.li:hover { background: var(--soft); }
.li.active { background: var(--c-bg); }
.li .grow { flex: 1; min-width: 0; }
.li .top { display: flex; align-items: baseline; gap: 8px; }
.li .top b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .top time { flex: none; font: 400 10.5px var(--mono); color: var(--mut); }
.li .last { margin-top: 2px; font-size: 13px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.wait { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font: 600 10.5px var(--mono); background: var(--g-t); color: var(--g-d); }
.wait.late { background: var(--r-t); color: var(--r-d); }
.empty { margin: auto; padding: 32px 20px; text-align: center; color: var(--mut); font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.list .empty { margin: 0; }

/* каналы */
.ch-whatsapp { background: var(--g-t); color: var(--g-d); }
.ch-instagram { background: var(--s-t); color: var(--s-d); }
.ch-telegram, .ch-tg_user { background: var(--c-t); color: var(--c); }
.ch-max, .ch-max_bot { background: oklch(0.55 0.2 300 / .12); color: oklch(0.45 0.2 300); }

/* ── окно переписки ── */
.conv-col { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid rgba(14,26,51,.06); background: var(--bg); }
.conv-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(236,239,244,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(14,26,51,.06); }
.conv-head .back { display: none; width: 36px; height: 36px; border-radius: 12px; place-items: center; color: var(--c); }
.conv-head .t { flex: 1; min-width: 0; }
.conv-head .t b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-head .t small { display: block; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-meta { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.conv-meta .owner { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.conv-meta select { border: 1px solid var(--line2); border-radius: 11px; padding: 5px 26px 5px 8px; font-size: 12.5px; background-color: #fff; background-position: right 9px center; }
.conv-meta .dir select { font: 500 11px var(--mono); letter-spacing: .04em; border-radius: 11px; height: 26px; padding: 0 24px 0 8px; background-color: var(--c-bg); background-position: right 8px center; border-color: transparent; color: var(--c); }
.contact { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--ink); }
.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 6px; background: #E3E8EF; scrollbar-width: none; }
.messages::-webkit-scrollbar { display: none; }
.messages > * { flex-shrink: 0; }
.msg { max-width: 78%; display: flex; flex-direction: column; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.bubble { padding: 8px 12px 6px; border-radius: 18px; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 1px rgba(14,26,51,.05); animation: bubIn .4s var(--e) both; }
.msg.in .bubble { background: #fff; border-bottom-left-radius: 6px; }
.msg.out .bubble { background: var(--c); color: #fff; border-bottom-right-radius: 6px; }
.msg.auto .bubble { background: #fff; color: var(--mut); border: 1px dashed var(--line2); }
.msg.note .bubble { background: var(--y-t); color: var(--ink); }
.msg-meta { margin: 3px 6px 2px; font: 400 10px var(--mono); color: var(--mut); }
.msg-meta .err { color: var(--r-d); }
.window-note { flex: none; margin: 0; padding: 8px 14px; font-size: 12.5px; background: var(--y-t); color: oklch(0.45 0.12 70); }
.window-note:empty { display: none; }
/* B2: окно ответа канала закрывается (за 2 часа) — в диалоге и в списке */
.window-note.closing { background: var(--r-t); color: var(--r-d); font-weight: 600; }
.li.win-soon { box-shadow: inset 3px 0 0 var(--r-d); }
.win { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font: 600 10.5px var(--mono); background: var(--r-t); color: var(--r-d); }
.win.closed { background: var(--soft); color: var(--mut); }
/* I2: бот отключён / нет права / окно закрыто — поле ввода выключено, причина над ним */
.composer-block { flex: none; margin: 0; padding: 10px 14px; font-size: 13px; line-height: 1.4; background: var(--r-t); color: var(--r-d); }
.composer textarea:disabled { opacity: .55; cursor: not-allowed; }
.msg-meta form.retry { display: inline; margin-left: 6px; }
.composer { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(236,239,244,.96); border-top: 1px solid rgba(14,26,51,.06); }
.composer textarea { flex: 1; min-height: 42px; max-height: 140px; border-radius: 21px; background: #fff; border: 1px solid var(--line2); padding: 10px 14px; font-size: 15px; line-height: 1.35; resize: none; outline: none; }
.composer textarea:focus { border-color: var(--c2); }
.composer button { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; transition: transform .25s var(--sp), opacity .2s; }
.composer button:active { transform: scale(.88); }
.composer button:disabled { opacity: .35; }
.pick { margin: auto; text-align: center; color: var(--mut); font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* ── команда ── */
.page { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 24px 40px; }
.page h1 { margin: 2px 0 6px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.page .lead { max-width: 760px; font-size: 14px; color: var(--mut); margin: 0 0 18px; }
.h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 18px 4px 10px; }
.h2 b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.people .li { flex-wrap: wrap; animation: none; }
.people .li:hover { background: transparent; }
.person { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; }
.person b { display: block; font-size: 15px; font-weight: 600; }
.person small { display: block; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); margin-top: 2px; }
.person .on-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); margin-right: 5px; vertical-align: 1px; }
.person .on-dot.on { background: var(--g); }
.pform { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pform label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mut); }
.pform .num { width: 64px; border: 1px solid var(--line2); border-radius: 10px; padding: 6px 8px; }
.pform select { border: 1px solid var(--line2); border-radius: 10px; padding: 6px 26px 6px 8px; background-color: #fff; background-position: right 9px center; }
.stat { text-align: right; min-width: 70px; }
.stat b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat small { font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.skills-wrap { overflow-x: auto; }
.skills { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.skills th, .skills td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
.skills thead th { border-top: 0; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.skills td:first-child { font-weight: 600; }
.skill { border: 0; border-radius: 11px; padding: 5px 8px; font: 500 11px var(--mono); background: #EEF1F6; color: var(--mut); }
.skill.att-not_takes { background: var(--r-t); color: var(--r-d); }
.skill.att-top { background: var(--g-t); color: var(--g-d); }
.skill.att-last_resort { background: var(--y-t); color: oklch(0.5 0.12 70); }

/* ── новое обращение (B5) ── */
.head .new-btn { margin-top: 8px; }
.flash { margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--g-t); color: var(--g-d); font-size: 13.5px; }
.new-form { max-width: 560px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.new-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mut); }
.new-form .field, .new-form .sel { font-size: 16px; color: var(--ink); }
.new-form .sel { padding-right: 40px; background-position: right 16px center; }
.new-form label.chk { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; }
.new-form label.chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--c); flex: none; }
.new-form textarea { resize: vertical; }
.new-form .err { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--r-t); color: var(--r-d); font-size: 13.5px; }
.new-form .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ── нижнее меню (телефон) ── */
.tabbar { display: none; }

@media (max-width: 900px) {
  .side { display: none; }
  .topline { padding: calc(env(safe-area-inset-top) + 10px) 16px 6px; }
  .offers { padding: 0 12px; }
  .offer .actions { width: 100%; }
  .offer .take, .offer .decline { flex: 1; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .list-col { padding: 0 12px 96px; }
  .conv-col { display: none; border-left: 0; }
  body.has-conv .list-col, body.has-conv .topline, body.has-conv .tabbar { display: none; }
  body.has-conv .conv-col { display: flex; }
  .conv-head .back { display: grid; }
  body.has-conv .offers { padding: calc(env(safe-area-inset-top) + 6px) 8px 6px; background: var(--bg); }
  body.has-conv .offer:not(:first-child) { display: none; }
  body.has-conv .offer { padding: 8px 10px; border-radius: 16px; gap: 10px; flex-wrap: nowrap; }
  body.has-conv .offer .t small { display: none; }
  body.has-conv .offer .t b { font-size: 13.5px; white-space: nowrap; }
  body.has-conv .offer .left { font-size: 14px; padding: 2px 8px; }
  body.has-conv .offer .actions { width: auto; }
  body.has-conv .offer .take { height: 34px; padding: 0 12px; }
  body.has-conv .offer .decline { display: none; }
  .msg { max-width: 86%; }
  .page { padding: 0 12px 110px; }
  .tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 8px); height: 64px; border-radius: 24px; background: rgba(14,26,51,.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; align-items: center; gap: 2px; padding: 0 6px; z-index: 30; box-shadow: 0 12px 30px rgba(14,26,51,.28); }
  /* Не больше пяти пунктов, пятый «Ещё»: всё помещается, вбок не прокручивается. */
  .tabbar > a, .tabbar > button { position: relative; flex: 1 1 0; min-width: 0; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 18px; color: rgba(255,255,255,.55); font-size: 10.5px; font-weight: 600; transition: color .25s, background .25s; }
  .tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .tabbar .on { color: #fff; background: rgba(255,255,255,.12); }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar .bd { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; padding: 0 4px; box-shadow: 0 0 0 2px rgba(14,26,51,.94); }
  .tabbar .st-dot { position: absolute; top: 4px; left: calc(50% + 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0 2px rgba(14,26,51,.94); }
  .tabbar .st-dot[data-status="free"] { background: var(--g); }
  .tabbar .st-dot[data-status="away"] { background: var(--y); }
  .subnav { padding: 0 12px 10px; gap: 8px; }
  .subnav .seg { flex: 1 1 auto; grid-auto-columns: minmax(0, 1fr); }
  .subnav .seg a { padding: 0 6px; }
  .take-off { margin: 0 12px 10px; }
  body.has-conv .subnav, body.has-conv .take-off { display: none; }
  .topline .crumb, .topline > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topline .clock { display: none; }
  .people .stat { text-align: left; }
  .new-form { padding: 16px; }
  .new-form .actions .btn { flex: 1; }
}

/* карточка клиента (E1–E3) */
.conv-head .card-link { margin-left: auto; }
.client-head { display: flex; gap: 14px; align-items: center; margin: 6px 0 14px; }
.client-head h1 { margin: 0 0 6px; }
.client-head .tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.client-form { padding: 14px; margin-top: 14px; }
.client-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.client-form .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.client-form label { display: flex; flex-direction: column; gap: 4px; }
.client .family .pform, .client .add-member { flex-wrap: wrap; }
.client .add-member { display: flex; gap: 8px; padding: 10px; margin-top: 8px; align-items: center; }
.client .li small { display: block; }
/* B9: диалоги клиента из разных каналов, подсказка о возможном дубле */
.dialogs { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.dialogs a { font: 500 11px var(--mono); letter-spacing: .04em; padding: 4px 9px; border-radius: 10px; background: var(--soft); color: var(--mut); }
.dialogs a.on { background: var(--c-t); color: var(--c); }
.dedup-hint { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px; background: var(--y-t); font-size: 13px; border-bottom: 1px solid var(--line); }
.dedup-hint > span:first-child { flex: 1; min-width: 200px; }
/* B10: просрочка первого ответа, шаблоны */
.sla-late { background: var(--y-t); color: oklch(0.5 0.12 75); }
.sla-late.lvl2 { background: var(--r-t); color: var(--r-d); }
.tpl-bar { flex: none; padding: 6px 10px 0; background: rgba(236,239,244,.96); }
.tpl-bar select { border: 1px solid var(--line2); border-radius: 11px; padding: 5px 26px 5px 8px; font-size: 12.5px; background-color: #fff; background-position: right 9px center; max-width: 100%; }
.tpl-list .li { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tpl-list .li:last-child { border-bottom: 0; }
.tpl-form { display: grid; gap: 8px; }
.tpl-form .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.tpl-form input[name=name] { flex: 1; min-width: 200px; border: 1px solid var(--line2); border-radius: 11px; padding: 7px 10px; }
.tpl-form textarea { width: 100%; min-height: 70px; border: 1px solid var(--line2); border-radius: 12px; padding: 9px 11px; resize: vertical; }
.tpl-form select, .tpl-form .num { border: 1px solid var(--line2); border-radius: 11px; padding: 6px 8px; font-size: 12.5px; background-color: #fff; }
.tpl-form select { padding-right: 26px; background-position: right 9px center; }
.tpl-form .num { width: 64px; }

/* I10: вход с кодом */
.totp-qr { display: grid; place-items: center; margin: 4px 0 12px; }
.totp-qr img, .totp-qr svg { width: 196px; height: 196px; border-radius: 14px; border: 1px solid var(--line2); }
.totp-open { display: none; }
.totp-manual { margin: 0 0 12px; font-size: 14px; color: var(--mut); }
.totp-manual summary { cursor: pointer; color: var(--c); font-weight: 500; }
@media (hover: none) and (pointer: coarse) { .totp-open { display: flex; margin-bottom: 12px; } }
.totp-secret code, .recovery-codes code { font-size: 15px; letter-spacing: .06em; user-select: all; }
.recovery-codes { columns: 2; padding-left: 18px; margin: 10px 0 16px; }
/* B7: вложения в ленте и скрепка в композере */
.att-bubble { display: flex; flex-direction: column; gap: 6px; padding: 6px; white-space: normal; }
.att { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.att-img { display: block; max-width: 280px; max-height: 320px; border-radius: 13px; object-fit: cover; background: var(--soft); }
.att-video { display: block; max-width: 300px; max-height: 360px; border-radius: 13px; background: #000; }
.att-audio { width: 260px; max-width: 100%; height: 40px; }
.att-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; background: var(--soft); color: var(--ink); font-weight: 500; text-decoration: none; word-break: break-all; }
.msg.out .att-file { background: rgba(255,255,255,.18); color: #fff; }
.att-doc { background: var(--y-t); color: var(--ink); }
.att-note { padding: 4px 6px; font-size: 13px; color: var(--mut); }
.msg.out .att-note { color: rgba(255,255,255,.85); }
.att-note.err { color: var(--r-d); }
.att-caption { padding: 0 6px 2px; white-space: pre-wrap; }
.att-mark button { padding: 0 6px; font: 400 10.5px var(--mono); color: var(--mut); background: none; text-decoration: underline; cursor: pointer; }
.msg.out .att-mark button { color: rgba(255,255,255,.8); }
.composer .attach { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--mut); cursor: pointer; }
.composer .attach.on { color: var(--c); background: var(--c-t); }

/* ── лист «Ещё» (телефон): остальные разделы, статус раздачи, уведомления, выход ── */
div.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
div.sheet[hidden] { display: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(14,26,51,.38); animation: fadeIn .25s var(--e) both; }
.sheet-card { position: relative; width: 100%; max-height: 86dvh; overflow-y: auto; background: var(--bg); border-radius: 26px 26px 0 0; padding: 8px 14px calc(env(safe-area-inset-bottom) + 16px); display: flex; flex-direction: column; gap: 12px; animation: sheetUp .35s var(--e) both; box-shadow: 0 -12px 30px rgba(14,26,51,.18); }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line2); margin: 2px auto 2px; }
.sheet-me { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.sheet-me .av { width: 38px; height: 38px; font-size: 14px; background: var(--c-t); color: var(--c); }
.sheet-me b { display: block; font-size: 15px; font-weight: 600; }
.sheet-me small { display: block; font-size: 12px; color: var(--mut); }
.sheet-me .x { margin-left: auto; width: 36px; height: 36px; border-radius: 12px; background: #fff; font-size: 22px; line-height: 1; color: var(--mut); }
.sheet-st { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 18px; padding: 12px; box-shadow: var(--sh); }
.sheet-nav { display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 4px; box-shadow: var(--sh); }
.sheet-nav a, .sheet-nav button { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 12px; border-radius: 14px; font-size: 15px; font-weight: 500; text-align: left; }
.sheet-nav a.on { background: var(--c-t); color: var(--c); font-weight: 600; }
.sheet-nav [hidden] { display: none; }
.sheet-nav svg { width: 20px; height: 20px; color: var(--mut); flex: none; }
.sheet-nav a.on svg { color: var(--c); }
.sheet-nav form { display: block; }
.sheet-nav form button { color: var(--r-d); }
.sheet-nav form button svg { color: var(--r-d); }
body.sheet-open { overflow: hidden; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 901px) { .sheet { display: none !important; } }