/* OLYMP CRM — стили приложения. Разделы пронумерованы. */

/* 1. Токены */
:root {
  --brand: #7360f2;
  --brand-600: #5f4be0;
  --brand-50: #f1effe;
  --brand-100: #e5e0fd;
  --ink: #16131f;
  --ink-2: #45414f;
  --muted: #7d7889;
  --line: #e9e7ef;
  --bg: #f6f5fa;
  --card: #fff;
  --ok: #16a34a;
  --ok-50: #e9f7ee;
  --warn: #d97706;
  --warn-50: #fdf3e2;
  --hot: #dc2626;
  --hot-50: #fdecec;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(22, 19, 31, .05), 0 4px 16px rgba(22, 19, 31, .05);
  --shadow-lg: 0 16px 48px rgba(22, 19, 31, .18);
  --top: 58px;
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --head: "Golos Text", system-ui, sans-serif;
}

/* 1а. Тёмная тема — свои значения, переключатель в шапке */
:root[data-theme="dark"] {
  --brand: #8b7bff;
  --brand-600: #a397ff;
  --brand-50: #24203f;
  --brand-100: #322c5a;
  --ink: #ecebf5;
  --ink-2: #c5c2d6;
  --muted: #8e8aa3;
  --line: #2b2840;
  --bg: #141221;
  --card: #1c1a2c;
  --ok-50: #16301f;
  --warn-50: #3a2a12;
  --hot-50: #3a1a1c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--bg); }
:root[data-theme="dark"] .topbar, :root[data-theme="dark"] .inbox-list, :root[data-theme="dark"] .chat-head,
:root[data-theme="dark"] .composer, :root[data-theme="dark"] .inbox-card, :root[data-theme="dark"] .modal,
:root[data-theme="dark"] .msg-in, :root[data-theme="dark"] .deal, :root[data-theme="dark"] .task,
:root[data-theme="dark"] .user-pop, :root[data-theme="dark"] .auth-card, :root[data-theme="dark"] .suggest-card { background: var(--card); color: var(--ink); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea,
:root[data-theme="dark"] .btn-ghost, :root[data-theme="dark"] .chip, :root[data-theme="dark"] .search,
:root[data-theme="dark"] .sq-btn, :root[data-theme="dark"] .card-act, :root[data-theme="dark"] .later-btn { background: #23203a; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
:root[data-theme="dark"] .inbox-chat, :root[data-theme="dark"] .col { background: #17152a; }
:root[data-theme="dark"] .day-sep span { background: var(--card); }

/* 2. Основа */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.45 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 750; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
p { margin: 0 0 10px; }
code { background: var(--brand-50); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.ic { width: 20px; height: 20px; flex: none; }
.boot { display: grid; place-items: center; min-height: 100vh; color: var(--muted); }
.loading { padding: 32px; text-align: center; color: var(--muted); }
.only-mobile { display: none !important; }
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.plain { margin: 0; padding-left: 18px; }
.err { color: var(--hot); }

/* 3. Кнопки и поля */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .15s, border-color .15s; }
.btn .ic { width: 18px; height: 18px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-600); }
.btn-ghost { background: var(--card); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brand-100); background: var(--brand-50); }
.btn-danger { background: var(--hot); color: #fff; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--brand-50); color: var(--brand-600); }
.link { border: 0; background: none; color: var(--brand-600); cursor: pointer; padding: 0; font-weight: 600; }
.link:hover { text-decoration: underline; }
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea, .field-inline input, .field-inline select, .card-form textarea, .form textarea, .stage-row input, .stage-row select, .task-add input, .hours input,
.scn-step > select, .scn-action select, .scn-action input, .bot-btn input, .bot-btn select, .form > input {
  height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; outline: none; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.field textarea, .card-form textarea, .form textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 64px; }
.field input:focus, .field select:focus, .field textarea:focus, .field-inline input:focus, .field-inline select:focus, .card-form textarea:focus, .form textarea:focus, .stage-row input:focus, .task-add input:focus,
.scn-step > select:focus, .scn-action select:focus, .scn-action input:focus, .bot-btn input:focus, .bot-btn select:focus, .form > input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.field-err { color: var(--hot); font-size: 12.5px; }
.check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: 13.5px; }
.check input { margin: 2px 0 0; accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.checks { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-left: 4px; }
.select-sm { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; max-width: 200px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); }
.search input { border: 0; outline: none; flex: 1; min-width: 0; background: transparent; color: var(--ink); }
.search .ic { width: 18px; height: 18px; }
.search-sm { height: 34px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip i { font-style: normal; opacity: .75; }
.tag { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--brand-50); color: var(--brand-600); font-size: 11.5px; font-weight: 600; font-style: normal; line-height: 19px; vertical-align: 1px; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; font-style: normal; margin-left: auto; }

/* 4. Значки каналов и аватары */
.ch-badge { display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 5px; border-radius: 6px; font-size: 10px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.ch-widget { background: var(--brand); }
.ch-telegram { background: #2aa3df; }
.ch-max { background: #6a3df0; }
.ch-whatsapp { background: #1fae54; }
.ch-vk { background: #2f76e0; }
.ch-avito { background: #111; }
.ch-cian { background: #0468ff; }
.ch-instagram { background: linear-gradient(45deg, #f9a43a, #e1306c, #8a3ab9); }
.ch-demo { background: #9a96a6; }
.avatar { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-100); color: var(--brand-600); font-weight: 700; font-size: 15px; flex: none; }
.avatar .ch-badge { position: absolute; right: -6px; bottom: -3px; border: 2px solid #fff; height: 20px; }
.avatar-lg { width: 52px; height: 52px; font-size: 18px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-xs { width: 22px; height: 22px; font-size: 10px; }

/* 5. Вход */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 20% -10%, var(--brand-100), transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 28px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; }
.auth-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--ink); text-decoration: none !important; }
.logo-mark { width: 32px; height: 32px; flex: none; }
.auth-switch { text-align: center; margin: 0; }
.auth-note { font-size: 12.5px; text-align: center; margin: 0; }

/* 6. Каркас: шапка с вкладками */
.shell { display: grid; grid-template-rows: var(--top) 1fr; height: 100vh; height: 100dvh; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 0 18px; background: #fff; border-bottom: 1px solid var(--line); min-width: 0; }
.brand { display: flex; align-items: baseline; gap: 6px; color: var(--ink); text-decoration: none !important; flex: none; }
.brand .logo-mark { width: 32px; height: 32px; align-self: center; margin-right: 4px; }
.brand b { font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.brand span { font-size: 12px; font-weight: 700; color: #2563eb; letter-spacing: .08em; }
:root[data-theme="dark"] .brand span { color: #6ea2ff; }
.top-status { display: flex; gap: 6px; flex: none; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; background: var(--bg); color: var(--ink-2); font-size: 12px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.status-chip i { width: 7px; height: 7px; border-radius: 50%; background: #b9b5c6; }
.status-chip.ok i { background: var(--ok); }
.status-chip.accent { background: var(--brand-50); color: var(--brand-600); }
.status-chip.accent i, .status-chip.warn i { display: none; }
.status-chip.warn { background: var(--warn-50); color: var(--warn); }
.tabs-top { display: flex; align-items: stretch; align-self: stretch; gap: 2px; margin: 0 auto; min-width: 0; }
.tab-top { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 12px; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.tab-top .ic { width: 18px; height: 18px; opacity: .75; }
.tab-top::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.tab-top:hover { color: var(--ink); }
.tab-top.active { color: var(--brand-600); }
.tab-top.active .ic { opacity: 1; }
.tab-top.active::after { background: var(--brand); }
.tab-short { display: none; }
.tab-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hot); color: #fff; font-size: 10.5px; font-weight: 700; font-style: normal; display: grid; place-items: center; }
.tab-count[hidden] { display: none; }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sq-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.sq-btn .ic { width: 18px; height: 18px; }
.sq-btn:hover { border-color: var(--brand-100); color: var(--brand-600); }
.connect-btn .ic { width: 16px; height: 16px; }
.me-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; display: grid; place-items: center; flex: none; }
.me-btn-lg { width: 44px; height: 44px; font-size: 15px; }
.screen { overflow: auto; min-height: 0; }
.screen-chat { overflow: hidden; }
.demo-float { position: fixed; right: 20px; bottom: 20px; z-index: 30; height: 40px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--ink); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: var(--shadow-lg); }
.demo-float:hover { background: var(--hot); }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.help-grid h4 { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 14px; margin-bottom: 4px; }
.help-grid p { color: var(--ink-2); font-size: 13.5px; margin: 0; }
.user-pop { position: fixed; right: 14px; top: calc(var(--top) + 6px); z-index: 50; width: 280px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; }
.user-pop-head { padding: 8px 10px 12px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 13px; }
.user-pop-head > div { display: flex; flex-direction: column; min-width: 0; }
.user-pop-head span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.role-pill { align-self: flex-start; font-style: normal; font-size: 11px; font-weight: 700; color: var(--brand-600); background: var(--brand-50); padding: 1px 8px; border-radius: 6px; margin-top: 3px; }
.user-pop a, .user-pop button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.user-pop a:hover, .user-pop button:hover { background: var(--bg); }

/* 7. Страницы */
.page { padding: 24px 28px 40px; max-width: 1100px; display: flex; flex-direction: column; gap: 16px; }
.page-wide { max-width: none; }
.page-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 48px 24px; color: var(--ink-2); height: 100%; }
.empty p { max-width: 420px; color: var(--muted); }
.empty.small { padding: 32px 18px; height: auto; }
.empty .btn { margin-top: 4px; }
.empty-ic { width: 64px; height: 64px; border-radius: 20px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; }
.empty-ic .ic { width: 30px; height: 30px; }
.table-wrap { overflow-x: auto; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel .table-wrap { box-shadow: none; border: 1px solid var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr[data-contact] { cursor: pointer; }
.table tbody tr[data-contact]:hover { background: var(--bg); }
.cell-name { display: flex; align-items: center; gap: 10px; }
.cell-name small { margin-left: 6px; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.kv span { color: var(--muted); }
.kv b { text-align: right; font-weight: 600; }

/* 8. Окно чатов */
.inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr) 320px; height: 100%; min-height: 0; }
.inbox-list, .inbox-chat, .inbox-card { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.inbox-list { background: #fff; border-right: 1px solid var(--line); }
.list-head { padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.dialogs { overflow-y: auto; flex: 1; }
.dlg { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #f2f1f6; color: var(--ink); text-decoration: none !important; }
.dlg:hover { background: var(--bg); }
.dlg.active { background: var(--brand-50); }
.dlg-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dlg-top { display: flex; gap: 8px; align-items: baseline; }
.dlg-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dlg.unread .dlg-top b { font-weight: 800; }
.dlg-top time { font-size: 12px; color: var(--muted); flex: none; }
.dlg-preview { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg.unread .dlg-preview { color: var(--ink-2); }
.dlg-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; min-height: 20px; }
.who { font-size: 12px; color: var(--ink-2); }
.wait { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.wait .ic { width: 14px; height: 14px; }
.wait-ok { background: var(--ok-50); color: var(--ok); }
.wait-warn { background: var(--warn-50); color: var(--warn); }
.wait-hot { background: var(--hot-50); color: var(--hot); }
.risk { font-size: 12px; font-weight: 600; color: var(--hot); }
.risk-высокий { color: var(--hot); }
.risk-средний { color: var(--warn); }
.risk-низкий, .risk-нет { color: var(--ok); }

.inbox-chat { background: var(--bg); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); min-height: 64px; }
.chat-who { display: flex; align-items: center; gap: 12px; border: 0; background: none; cursor: pointer; text-align: left; min-width: 150px; flex: 1 1 auto; padding: 0; }
.chat-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.chat-who b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-who small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-tools { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 8px; flex: 0 1 auto; }
.chat-tools .select-sm { max-width: 150px; }
.demo-bar { padding: 8px 16px; background: var(--brand-50); font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--brand-100); }
.demo-bar.warn { background: var(--warn-50); border-color: #f5dfb8; }
.feed { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.day-sep { text-align: center; margin: 10px 0 4px; }
.day-sep span { background: #fff; padding: 3px 10px; border-radius: 10px; font-size: 12px; color: var(--muted); box-shadow: var(--shadow); }
.msg { max-width: min(560px, 78%); padding: 8px 12px 6px; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(22, 19, 31, .05); display: flex; flex-direction: column; gap: 4px; }
.msg-in { align-self: flex-start; border-bottom-left-radius: 5px; }
.msg-out { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.msg-out a { color: #fff; text-decoration: underline; }
.msg-note { align-self: flex-end; background: #fff7e0; border: 1px dashed #edcf7c; border-bottom-right-radius: 5px; }
.msg-author { font-size: 11.5px; font-weight: 700; opacity: .75; }
.msg-text { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; }
.msg-meta { align-self: flex-end; display: flex; align-items: center; gap: 3px; font-size: 11px; opacity: .7; }
.msg-meta .st { width: 14px; height: 14px; }
.msg-fail { font-size: 12px; background: var(--hot-50); color: var(--hot); padding: 4px 8px; border-radius: 8px; }
/* файл загружается: превью сразу, полоса загрузки, потом «отправляем в мессенджер» */
.msg-up { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.msg-up .up-thumb { display: block; max-width: 240px; max-height: 260px; border-radius: 10px; object-fit: cover; opacity: .75; }
.msg-up-failed .up-thumb { opacity: .45; filter: grayscale(.6); }
.up-file { display: flex; align-items: center; gap: 8px; font-weight: 600; overflow-wrap: anywhere; }
.up-file .ic { flex: none; width: 18px; height: 18px; }
.up-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; }
.up-bar { flex: 1 0 100%; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .28); }
.up-bar i { display: block; height: 100%; border-radius: 4px; background: #fff; transition: width .2s ease; }
.up-bar-wait i { background: linear-gradient(90deg, rgba(255, 255, 255, .35) 0 30%, #fff 50%, rgba(255, 255, 255, .35) 70%) 0 0 / 200% 100%; animation: up-wait 1.1s linear infinite; }
@keyframes up-wait { to { background-position: -200% 0; } }
.up-label { flex: 1; opacity: .9; }
.msg-up .up-cancel { color: #fff; opacity: .85; font-size: 12px; }
.msg-out .msg-fail .link { color: var(--hot); }
.transcript { font-size: 13px; padding: 6px 8px; border-radius: 8px; background: rgba(115, 96, 242, .08); }
.msg-out .transcript { background: rgba(255, 255, 255, .15); }
.att { display: flex; align-items: center; gap: 8px; }
.att-voice audio { height: 34px; max-width: 240px; }
.att-img img { max-width: 260px; max-height: 260px; border-radius: 10px; display: block; }
.att-file { padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .04); color: inherit; }
.suggest { padding: 0 16px; }
.suggest[hidden] { display: none; }
.suggest-card { background: #fff; border: 1px solid var(--brand-100); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow); }
.suggest-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--brand-600); }
.suggest-head .icon-btn { margin-left: auto; width: 28px; height: 28px; }
.suggest-text { font-size: 14.5px; color: var(--ink); }
.suggest-why { font-size: 12.5px; color: var(--muted); }
.suggest-actions { display: flex; gap: 8px; }
.suggest-head a.icon-btn { color: var(--muted); }
.suggest-head a.icon-btn + .icon-btn { margin-left: 0; }
.suggest-learned { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; padding: 6px 10px; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); font-size: 12.5px; }
.suggest-learned .ic { flex: none; width: 15px; height: 15px; }
.suggest-learned span { flex: 1; min-width: 0; }
.suggest-fix { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.suggest-fix-row { display: flex; gap: 8px; }
.suggest-fix input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: 500 13.5px/1 Inter, 'Golos Text', sans-serif; outline: 0; }
.suggest-fix input:focus { border-color: var(--brand-100); box-shadow: 0 0 0 3px var(--brand-50); }
.suggest-fix .btn .ic { width: 15px; height: 15px; }
.suggest-remember { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.loading-line { color: var(--brand-600); display: flex; gap: 8px; align-items: center; }
.composer { background: #fff; border-top: 1px solid var(--line); padding: 8px 12px 12px; }
.composer.note-mode { background: #fffbef; }
.composer-tools { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.tool { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tool .ic { width: 17px; height: 17px; }
.tool:hover { background: var(--bg); }
.tool:disabled { opacity: .5; }
.tool-ai { color: var(--brand-600); background: var(--brand-50); }
.tool-ai:hover { background: var(--brand-100); }
.tool-note { margin-left: auto; }
.tool-note input { accent-color: #c99a14; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer-row textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 42px; max-height: 200px; outline: none; background: #fff; }
.composer-row textarea:focus { border-color: var(--brand); }
.send { width: 42px; height: 42px; border-radius: 12px; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.send:disabled { opacity: .5; }

.inbox-card { background: #fff; border-left: 1px solid var(--line); overflow-y: auto; }
.card-pad { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card-top { display: flex; align-items: center; gap: 12px; }
.card-top h3 { font-size: 16px; }
.card-top .muted { font-size: 12.5px; }
.card-form { display: flex; flex-direction: column; gap: 6px; }
.field-inline { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 8px; font-size: 13px; }
.field-inline > span { color: var(--muted); }
.field-inline input, .field-inline select { height: 34px; border-color: transparent; background: var(--bg); }
.card-sec { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.card-sec h4 { display: flex; justify-content: space-between; align-items: baseline; }
.mini-dlg { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--ink); font-size: 13px; text-decoration: none !important; }
.mini-dlg > span:not(.brand-ic) { flex: 1; }
.mini-dlg time { font-size: 12px; color: var(--muted); }
.mini-dlg:hover, .mini-dlg.active { background: var(--brand-50); }
.deal-title { font-weight: 700; color: var(--ink); }
.quotes { display: flex; flex-direction: column; gap: 4px; }
.quotes q { display: block; font-size: 13px; padding: 6px 10px; border-radius: 8px; quotes: "«" "»"; }
.quotes.bad q { background: var(--hot-50); }
.quotes.good q { background: var(--ok-50); }
.errors { font-size: 13px; background: var(--warn-50); padding: 8px 10px; border-radius: 8px; }
.errors ul { margin: 4px 0 0; padding-left: 18px; }
.task-row { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.task-row input { accent-color: var(--brand); margin-top: 2px; }
.task-row small { display: block; color: var(--muted); }
.task-row.done span { text-decoration: line-through; color: var(--muted); }
.task-add { display: flex; gap: 6px; }
.task-add input { height: 34px; font-size: 13px; }
.tpl-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.tpl { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.tpl:hover { border-color: var(--brand); background: var(--brand-50); }
.tpl span { color: var(--muted); font-size: 13px; white-space: pre-wrap; }

/* 8а. Окно чатов: избранное, рабочие, отложенные, шаблоны по «/», отчёт исправлений, теги */
.star-mark { color: #f2b400; font-style: normal; }
.tag-muted { background: var(--bg); color: var(--muted); }
.star-btn { font-size: 18px; color: #c9c5d3; }
.star-btn.on { color: #f2b400; }
.later-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.msg-scheduled { background: #fff; color: var(--ink); border: 1.5px dashed var(--brand-100); opacity: .92; }
.msg-scheduled .msg-meta { opacity: 1; color: var(--muted); }
.fix-report { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 16px 8px; padding: 8px 12px; background: var(--ok-50); border-radius: 10px; font-size: 13px; color: var(--ink-2); }
.fix-report[hidden] { display: none; }
.fix-report .ic { color: var(--ok); width: 16px; height: 16px; }
.fix-report s { color: var(--muted); }
.fix-report .link { margin-left: auto; }
.slash { margin: 0 16px 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 260px; overflow: auto; padding: 4px; }
.slash[hidden] { display: none; }
.slash-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.slash-item span { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slash-item.on, .slash-item:hover { background: var(--brand-50); }
.slash-empty { padding: 10px; color: var(--muted); font-size: 13px; }
.card-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.card-act { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 11.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.card-act i { font-style: normal; font-size: 16px; line-height: 1; color: var(--muted); }
.card-act.on { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-600); }
.card-act.on i { color: var(--brand); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; }
.tag-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; font-size: 14px; line-height: 1; opacity: .6; }
.tag-input { border: 1px dashed var(--line); border-radius: 6px; height: 22px; padding: 0 8px; font-size: 12px; width: 84px; outline: none; background: transparent; }
.tag-input:focus { border-color: var(--brand); width: 140px; }
.preview-bubble { align-self: flex-start; max-width: 420px; background: var(--brand); color: #fff; padding: 8px 12px; border-radius: 14px 14px 14px 4px; font-size: 13.5px; white-space: pre-wrap; }
.preview-bubble[hidden] { display: none; }
.wait-muted { background: var(--bg); color: var(--ink-2); }

/* 8б. Окно: меню сообщения, цитаты, реакции, удалённое, перевод, файлы, голосовые, эмодзи */
.msg { position: relative; }
.msg-menu-btn { position: absolute; top: 4px; right: -30px; width: 26px; height: 26px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.msg-out .msg-menu-btn { right: auto; left: -30px; }
.msg:hover .msg-menu-btn, .msg-menu-btn:focus { opacity: 1; }
.msg-menu-btn:hover { background: var(--brand-50); color: var(--brand-600); }
.msg-quote { display: flex; flex-direction: column; padding: 4px 8px; border-left: 3px solid var(--brand); background: rgba(115, 96, 242, .08); border-radius: 6px; font-size: 12.5px; max-width: 100%; }
.msg-out .msg-quote { border-left-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .15); }
.msg-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.msg-tr { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.msg-tr i { font-style: normal; font-weight: 700; color: var(--brand-600); text-transform: uppercase; letter-spacing: .04em; }
.msg-out .msg-tr i, .msg-out .msg-tr .link { color: #fff; }
.msg-removed { background: #f2f1f6 !important; color: var(--muted) !important; }
.msg-removed .msg-text { text-decoration: line-through; }
.msg-removed-note { font-size: 11.5px; color: var(--hot); font-weight: 600; }
.msg-reacts { display: flex; gap: 4px; flex-wrap: wrap; }
.msg-reacts span { background: rgba(0, 0, 0, .05); border-radius: 10px; padding: 0 6px; font-size: 13px; line-height: 20px; }
.msg-out .msg-reacts span { background: rgba(255, 255, 255, .2); }
.msg-pop { position: fixed; z-index: 120; width: 230px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; }
.msg-pop > button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--ink); }
.msg-pop > button:hover { background: var(--bg); }
.msg-pop > button.danger { color: var(--hot); }
/* Разметка сообщений — как в WhatsApp и Telegram: цитата, код, скрытый текст */
.msg-text blockquote { margin: 4px 0; padding: 2px 10px; border-left: 3px solid var(--brand); background: rgba(115, 96, 242, .08); border-radius: 4px; }
.msg-out .msg-text blockquote { border-left-color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .14); }
.msg-text code, .msg-text pre { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .92em; background: rgba(15, 23, 42, .07); border-radius: 4px; }
.msg-text code { padding: 1px 4px; }
.msg-text pre { margin: 4px 0; padding: 6px 8px; white-space: pre-wrap; }
.msg-out .msg-text code, .msg-out .msg-text pre { background: rgba(255, 255, 255, .16); }
.fmt-spoiler { background: currentColor; border-radius: 3px; cursor: pointer; transition: background .2s; }
.fmt-spoiler.open { background: rgba(115, 96, 242, .14); }
.msg-out .fmt-spoiler.open { background: rgba(255, 255, 255, .18); }
/* Меню форматирования поля ответа (правая кнопка по выделенному тексту) */
.fmt-pop { width: 250px; }
.fmt-pop > button { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fmt-pop > button small { color: var(--muted); font-size: 11.5px; }
.fmt-pop-head { padding: 6px 10px 4px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fmt-pop-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.fmt-pop .fmt-i-bold span { font-weight: 700; }
.fmt-pop .fmt-i-italic span { font-style: italic; }
.fmt-pop .fmt-i-strike span { text-decoration: line-through; }
.fmt-pop .fmt-i-code span { font-family: ui-monospace, Consolas, monospace; }
.msg-pop-reacts { display: flex; justify-content: space-between; padding: 4px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.msg-pop-reacts button { border: 0; background: none; font-size: 18px; cursor: pointer; border-radius: 8px; width: 26px; height: 30px; padding: 0; }
.msg-pop-reacts button:hover { background: var(--bg); transform: scale(1.15); }
.translate-bar { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 6px 12px; background: var(--brand-50); border-radius: 10px; font-size: 12.5px; color: var(--ink-2); }
.translate-bar .ic { width: 16px; height: 16px; color: var(--brand); }
.reply-bar { display: flex; align-items: center; gap: 10px; margin: 0 16px 8px; padding: 6px 8px 6px 12px; border-left: 3px solid var(--brand); background: #fff; border-radius: 8px; box-shadow: var(--shadow); }
.reply-bar[hidden] { display: none; }
.reply-bar > div { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 12.5px; }
.reply-bar span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emoji-pop { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin: 0 16px 8px auto; width: 300px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); }
.emoji-pop[hidden] { display: none; }
.emoji-pop button { border: 0; background: none; font-size: 20px; height: 34px; border-radius: 8px; cursor: pointer; }
.emoji-pop button:hover { background: var(--bg); }
.attach-btn { width: 42px; height: 42px; cursor: pointer; }
.input-wrap { position: relative; flex: 1; display: flex; min-width: 0; }
.input-wrap textarea { flex: 1; padding-right: 40px; }
.emoji-btn { position: absolute; right: 4px; bottom: 4px; font-size: 18px; color: var(--muted); }
.mic-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.rec-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--hot-50); font-size: 13px; }
.rec-bar[hidden] { display: none; }
.rec-bar .btn { margin-left: auto; }
.rec-bar .btn + .btn { margin-left: 0; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hot); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.review-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-person { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mini-person span:nth-child(2) { flex: 1; }
.mini-person .icon-btn { width: 26px; height: 26px; }
.card-sec h4 .link { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.merge-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.merge-item { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.merge-item:hover { border-color: var(--brand); background: var(--brand-50); }
.merge-item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.merge-item small { color: var(--muted); }

/* 8в. WhatsApp: QR, «Написать первым», статусы */
.list-head-row { display: flex; gap: 8px; }
.list-head-row .search { flex: 1; }
.list-head-row .sq-btn { width: 38px; height: 38px; flex: none; }
.qr-box { display: grid; place-items: center; min-height: 280px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.qr-box img { width: 264px; height: 264px; image-rendering: pixelated; }
/* Автоматизация: метка «бот» в списке, кнопки бота в сообщении, согласие на рассылки */
.tag-bot { background: var(--brand-50); color: var(--brand-600); }
.msg-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.msg-buttons span { border: 1px solid currentColor; border-radius: 12px; padding: 1px 8px; font-size: 12px; opacity: .8; }
.consent-check { margin-top: 10px; }
/* Кабинет → Автоматизации и Рассылки */
.scn { align-items: flex-start; }
.scn.off > div:not(.row-acts) { opacity: .55; }
.scn .switch { margin-top: 2px; }
.scn-k { font-weight: 700; color: var(--ink-2); }
.row-acts, .rule > .row-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.preset { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.preset:hover { border-color: var(--brand); }
.preset span { font-size: 12.5px; color: var(--muted); }
.scn-form { gap: 14px; }
.scn-step { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.scn-step legend { font-weight: 700; padding: 0 6px; }
.scn-action { display: grid; grid-template-columns: 200px 1fr auto; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.scn-action-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.scn-action-body textarea, .scn-action-body input, .scn-action-body select { width: 100%; }
.chk-row { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bot-btn { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 8px; margin-bottom: 8px; }
.log { display: flex; flex-direction: column; max-height: 60vh; overflow: auto; }
.log-row { display: grid; grid-template-columns: 170px 1fr 1.4fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.bc-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.bc-stats > div { display: flex; flex-direction: column; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bg); flex: 1 1 140px; max-width: 260px; }
.bc-stats b { font-size: 22px; }
.bc-stats span { font-size: 12.5px; color: var(--muted); }
.bc-bar { height: 6px; border-radius: 3px; background: var(--bg); margin-top: 6px; overflow: hidden; }
.bc-bar i { display: block; height: 100%; background: var(--brand); }
.bc-preview { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); }
.status-bc-sending, .status-bc-scheduled { background: var(--warn-50); color: var(--warn); }
.status-bc-done { background: var(--ok-50); color: var(--ok); }
@media (max-width: 760px) {
  .log-row { grid-template-columns: 1fr; gap: 2px; }
  .scn-action { grid-template-columns: 1fr auto; }
  .scn-action > select { grid-column: 1; grid-row: 1; }
  .scn-action > [data-action-del] { grid-column: 2; grid-row: 1; }
  .scn-action > .scn-action-body { grid-column: 1 / -1; grid-row: 2; }
  .bot-btn { grid-template-columns: 1fr 1fr auto; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .bot-btn [data-k=label] { grid-column: 1 / 3; grid-row: 1; }
  .bot-btn [data-bot-btn-del] { grid-column: 3; grid-row: 1; }
  .bot-btn [data-k=tag] { grid-column: 1; grid-row: 2; }
  .bot-btn [data-k=user] { grid-column: 2 / 4; grid-row: 2; }
  .rule:has(.row-acts) { flex-wrap: wrap; }
  .rule > .row-acts { flex: 1 0 100%; justify-content: flex-end; flex-wrap: wrap; }
}
/* Облачный пароль Telegram вместо QR: окно в цветах темы, не белое */
.qr-box:has(.qr-password) { background: var(--card); place-items: stretch; }
.qr-password { display: grid; gap: 10px; align-content: center; max-width: 340px; width: 100%; margin: 0 auto; }
.qr-password p { margin: 0; }
.status-qr { background: var(--brand-50); color: var(--brand-600); }
.st-read { color: #7fe3ff; }
.msg-in .st-read { color: var(--brand); }

/* 9. Сделки (канбан) */
.screen-deals { overflow: hidden; display: flex; flex-direction: column; }
.screen-deals .page { height: 100%; min-height: 0; padding-bottom: 16px; }
.board { display: flex; gap: 12px; overflow-x: auto; flex: 1; min-height: 0; padding-bottom: 8px; align-items: stretch; }
.col { flex: 0 0 272px; display: flex; flex-direction: column; background: #efedf5; border-radius: var(--radius); min-height: 0; }
.col-head { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 2px; border-top: 4px solid var(--stage, var(--brand)); border-radius: var(--radius) var(--radius) 0 0; }
.col-head span { font-size: 12px; color: var(--muted); }
.col-body { flex: 1; overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 0 0 var(--radius) var(--radius); transition: background .15s; }
.col-body.drop-over { background: var(--brand-100); }
.col-empty { text-align: center; color: var(--muted); font-size: 12.5px; padding: 18px 0; border: 1.5px dashed #d8d4e4; border-radius: 10px; }
.deal { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none !important; cursor: grab; }
.deal:hover { box-shadow: 0 0 0 2px var(--brand-100), var(--shadow); }
.deal.dragging { opacity: .5; }
.deal .muted { font-size: 12.5px; }
.deal-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.deal-sum { font-weight: 700; flex: 1; }
.deal-foot time { font-size: 12px; color: var(--muted); }
.deal-view { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.deal-form { display: flex; flex-direction: column; gap: 10px; }
.deal-log { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.events li { padding: 8px 10px; border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.events small { color: var(--muted); }
.ev-note { background: #fff7e0 !important; }
.ev-stage { background: var(--brand-50) !important; }

/* 10. Задачи */
.tasks { display: flex; flex-direction: column; gap: 8px; }
.task { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.task input { accent-color: var(--brand); width: 18px; height: 18px; margin-top: 1px; flex: none; }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-main p { margin: 0; color: var(--ink-2); font-size: 13px; }
.task.overdue { box-shadow: inset 3px 0 0 var(--hot), var(--shadow); }
.task.done { opacity: .6; }
.task.done b { text-decoration: line-through; }

/* 11. Дашборд */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kpi b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.kpi small { font-size: 12px; color: var(--muted); }
.kpi-hot { box-shadow: inset 0 3px 0 var(--hot), var(--shadow); }
.dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.wait-list, .risky { display: flex; flex-direction: column; gap: 4px; }
.wait-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none !important; }
.wait-row:hover { background: var(--bg); }
.wait-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wait-name small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 8px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.bar i { width: 100%; max-width: 28px; background: var(--brand); border-radius: 6px 6px 2px 2px; min-height: 3px; }
.bar span { font-size: 10.5px; color: var(--muted); }
.by-channel { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.risky-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg); color: var(--ink); text-decoration: none !important; }
.risky-row p { margin: 0; color: var(--ink-2); font-size: 13px; }

/* 12. Настройки */
.settings { max-width: 1100px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 10px 12px; color: var(--ink-2); font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none !important; }
.tab.active { color: var(--brand-600); border-color: var(--brand); }
.settings-body { display: flex; flex-direction: column; gap: 16px; }
.hours { display: flex; flex-direction: column; gap: 8px; }
.hours-row { display: flex; align-items: center; gap: 10px; }
.hours-row .check { width: 56px; }
.hours input[type=time] { width: 120px; height: 36px; }
.ch-list { display: flex; flex-direction: column; gap: 6px; }
.ch-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ch-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ch-main small { color: var(--muted); }
.status { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--bg); color: var(--ink-2); }
.status-active { background: var(--ok-50); color: var(--ok); }
.status-error { background: var(--hot-50); color: var(--hot); }
.status-connecting { background: var(--warn-50); color: var(--warn); }
.connect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.connect { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.connect p { color: var(--muted); font-size: 13px; flex: 1; }
.connect-soon { background: #fbfbfd; }
.soon { font-size: 12px; color: var(--muted); font-weight: 600; }
.steps { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.code { background: #16131f; color: #e9e6ff; padding: 12px 14px; border-radius: 10px; font-size: 12.5px; white-space: pre-wrap; word-break: break-all; margin: 8px 0; }
.lock-note { display: flex; gap: 8px; align-items: center; background: var(--warn-50); padding: 8px 12px; border-radius: 10px; font-size: 13px; }
.stages { display: flex; flex-direction: column; gap: 6px; }
.stage-row { display: grid; grid-template-columns: 40px 1fr 130px 34px; gap: 8px; align-items: center; }
.stage-row input[type=color] { padding: 2px; height: 36px; }
.stage-row input, .stage-row select { height: 36px; }
.rules, .lib { display: flex; flex-direction: column; gap: 8px; }
.rule, .lib-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.rule > div, .lib-item > div { flex: 1; min-width: 0; }
.rule p, .lib-item p { margin: 2px 0 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.plan-card { position: relative; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.plan-card ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.plan-popular { box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.plan-current { background: var(--brand-50); }
.plan-flag { position: absolute; top: -10px; right: 14px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.plan-price b { font-size: 24px; font-weight: 800; }

/* 12а. Общие для новых экранов: сегменты, сравнения, полосы */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: #e9e7f1; }
.seg-btn { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg-btn.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(22, 19, 31, .12); }
.seg-wide { display: flex; }
.seg-wide .seg-btn { flex: 1; }
.seg-sm .seg-btn { height: 26px; padding: 0 10px; font-size: 12.5px; }
:root[data-theme="dark"] .seg { background: #23203a; }
:root[data-theme="dark"] .seg-btn.on { background: var(--brand); color: #fff; }
.cmp { font-size: 12px; color: var(--muted); }
.cmp-good { color: var(--ok); }
.cmp-bad { color: var(--hot); }
.num-good { color: var(--ok); }
.num-bad { color: var(--hot); }
.dot-label { display: inline-flex; align-items: center; gap: 6px; }
.dot-label i, .tk-group i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-hot { background: var(--hot); }
.dot-muted { background: #b9b5c6; }
.row-link { cursor: pointer; }
.row-link:hover { background: var(--bg); }
.tag-hot { background: var(--hot-50); color: var(--hot); }
.stack-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--bg); gap: 2px; }
.stack-bar i { display: block; height: 100%; }
.sp-1, .legend .sp-1 { background: #22a06b; }
.sp-2, .legend .sp-2 { background: #7fc8a0; }
.sp-3, .legend .sp-3 { background: #f0a43a; }
.sp-4, .legend .sp-4 { background: #e05252; }
.rc-1, .legend .rc-1 { background: #22a06b; }
.rc-2, .legend .rc-2 { background: #c9c6d6; }
.rc-3, .legend .rc-3 { background: #e05252; }
.legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.legend-3 { grid-template-columns: repeat(3, 1fr); }
.legend div { display: flex; flex-direction: column; gap: 2px; }
.legend span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.legend span i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend b { font-size: 18px; font-weight: 800; }
/* Аналитика: отделы в дереве, маленькая полоса скорости в таблице */
.mini-bar { display: flex; width: 120px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg); gap: 1px; }
.mini-bar i { display: block; height: 100%; }
.tree-dept { margin-top: 6px; }
.tree-cap { margin: 10px 0 2px; padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.an-export .ic { width: 16px; height: 16px; }
.person-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 4px; border-radius: 16px; background: var(--bg); font-size: 13px; font-weight: 600; margin-left: auto; }
.ai-box { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.ai-box > b { display: flex; align-items: center; gap: 6px; color: var(--brand-600); font-size: 13.5px; }
.ai-box .ic { width: 16px; height: 16px; }
.ai-box p { margin: 0; }

/* 12б. Аналитика */
.an { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.an-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.an-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); flex: 1; min-height: 0; }
.an-tree { border-right: 1px solid var(--line); padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; background: #fff; }
:root[data-theme="dark"] .an-tree { background: var(--card); }
.tree-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 10px; cursor: pointer; position: relative; color: var(--ink); }
.tree-item:hover { background: var(--bg); }
.tree-item.on { background: var(--brand-50); }
.tree-item > span:last-of-type, .tree-item > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.tree-item b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item small { color: var(--muted); font-size: 12px; }
.tree-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.tree-ico .ic { width: 18px; height: 18px; }
.tree-sub { padding-left: 14px; margin-left: 14px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.tree-alert { margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px; background: var(--hot); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; display: grid; place-items: center; padding: 0 6px; }
.an-main { overflow-y: auto; padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 16px; }
.an-head { display: flex; align-items: center; gap: 14px; }
.an-head h1 { font-size: 24px; }
.an-head p { margin: 0; }
.an-badge { width: 52px; height: 52px; border-radius: 14px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; }
.an-badge .ic { width: 26px; height: 26px; }
.an-export { margin-left: auto; }
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.an-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.verdict .panel-head h3 { display: flex; align-items: center; gap: 6px; color: var(--brand-600); }
.verdict .ic { width: 18px; height: 18px; }
.verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.verdict-grid h4 { margin-bottom: 4px; }

/* 12в. Задачи */
.tk { display: grid; grid-template-columns: 440px minmax(0, 1fr); height: 100%; min-height: 0; }
.tk-list { border-right: 1px solid var(--line); padding: 18px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: #fff; }
:root[data-theme="dark"] .tk-list { background: var(--card); }
.tk-head { display: flex; align-items: baseline; gap: 10px; }
.tk-head h1 { font-size: 22px; }
.tk-add { margin-left: auto; align-self: center; }
.tk-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tk-count { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.tk-count b { font-size: 22px; font-weight: 800; line-height: 1.2; }
.tk-count span { font-size: 12.5px; color: var(--muted); }
.tk-hot b { color: var(--hot); }
.tk-warn b { color: var(--warn); }
.tk-brand b { color: var(--brand-600); }
.tk-items { display: flex; flex-direction: column; gap: 8px; }
.tk-group { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13.5px; }
.tk-group span { color: var(--muted); font-weight: 600; }
.tk-group small { color: var(--muted); }
.tk-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; background: #fff; }
:root[data-theme="dark"] .tk-card { background: var(--card); }
.tk-card:hover { border-color: var(--brand-100); }
.tk-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.tk-card.done { opacity: .65; }
.tk-card.done .tk-title { text-decoration: line-through; }
.tk-card p { margin: 0; color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-card-top { display: flex; align-items: center; gap: 10px; }
.tk-card-top .avatar .ch-badge { height: 16px; min-width: 22px; font-size: 8.5px; }
.tk-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tk-who b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-who small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-title { font-size: 14px; }
.tk-check { position: relative; width: 24px; height: 24px; flex: none; cursor: pointer; }
.tk-check input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tk-check span { position: absolute; inset: 0; border: 1.5px solid var(--line); border-radius: 7px; background: #fff; }
.tk-check input:checked + span { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--brand); }
.tk-detail { overflow-y: auto; padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 14px; background: var(--bg); }
.tk-main h2 { font-size: 22px; font-weight: 800; }
.tk-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tk-people { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.tk-feed { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; padding: 10px; border-radius: 12px; background: var(--bg); }
.tk-reply { display: flex; flex-direction: column; gap: 8px; }
.tk-reply textarea { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical; outline: none; }
.tk-reply textarea:focus { border-color: var(--brand); }
.tk-back { align-self: flex-start; }

/* 12г. Дашборд */
.page-dash { max-width: 1360px; margin: 0 auto; width: 100%; }
.page-dash .page-head .seg { margin-left: 4px; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi-pair { flex-direction: row; gap: 0; padding: 0; }
.kpi-pair > div { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-pair > div + div { border-left: 1px solid var(--line); }
.dash-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-side { position: sticky; top: 0; }
.bar-name { display: flex; align-items: center; }
.tk-chat { gap: 12px; }
.tk-open .tk-card.on { border-color: var(--brand); }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quote-card { border-radius: 12px; padding: 12px 14px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; border-left: 3px solid transparent; }
.quote-card q { quotes: "«" "»"; font-size: 14px; }
.qc-bad { border-left-color: var(--hot); }
.qc-good { border-left-color: var(--ok); }
.qc-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.qc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bar-rows, .topic-rows { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 52px 1fr 30px 64px; align-items: center; gap: 10px; font-size: 13px; }
.bar-row small { text-align: right; }
.bar-track { display: block; height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.topic-row { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.topic-row > div { display: flex; align-items: baseline; gap: 8px; }
.topic-row > div span { flex: 1; }
.topic-row small { font-size: 12px; font-weight: 700; }

/* 12д. Кабинет */
.co-card { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.co-ava { width: 48px; height: 48px; border-radius: 14px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none; }
.co-main { flex: 1; min-width: 0; }
.co-main h1 { font-size: 20px; }
.co-main p { margin: 2px 0 0; font-size: 13px; }
.co-plan { font-size: 12px; font-weight: 700; color: var(--brand-600); background: var(--brand-50); padding: 4px 12px; border-radius: 999px; text-decoration: none !important; white-space: nowrap; }
.co-plan.warn { color: var(--warn); background: var(--warn-50); }
.settings-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* 12е. Кабинет: общие, сотрудники, профиль, виджет */
.settings-aside { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.switch-row > span { display: flex; flex-direction: column; gap: 2px; }
.switch-row small { font-size: 12.5px; }
.switch { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 12px; background: #d7d4e2; position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(18px); }
.explain h4 { margin-bottom: 4px; }
.timeline { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.timeline li { display: grid; grid-template-columns: 70px 10px 1fr; gap: 8px; align-items: start; font-size: 13.5px; }
.timeline time { font-weight: 700; font-size: 13px; }
.timeline i { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; }
.team { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.team-side { display: flex; flex-direction: column; gap: 16px; }
.seats { gap: 6px; }
.seats-num { display: flex; align-items: baseline; gap: 6px; font-size: 15px; }
.seats-num b { font-size: 30px; font-weight: 800; line-height: 1; }
.seats-num .tag { margin-left: auto; }
.seats-bar { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.seats-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.seats .btn { align-self: flex-start; }
.deps { gap: 4px; }
.deps h4 { margin-bottom: 6px; }
.dep-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: left; }
.dep-item:hover { background: var(--bg); }
.dep-item.on { background: var(--brand-50); color: var(--brand-600); }
.dep-item b { font-weight: 600; color: var(--muted); }
.dep-new { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1.5px dashed var(--line); border-radius: 10px; background: none; color: var(--brand-600); font-weight: 600; font-size: 13.5px; cursor: pointer; margin: 4px 0; }
.dep-new .ic { width: 16px; height: 16px; }
.team-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.team-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-head h3 { margin-right: auto; font-size: 18px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.person { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.person-off { opacity: .6; }
.person-top { display: flex; align-items: center; gap: 12px; }
.avatar-img { object-fit: cover; padding: 0; }
.person-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.person-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-name small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-kv { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; margin: 0; font-size: 13.5px; }
.person-kv dt { color: var(--muted); }
.person-kv dd { margin: 0; }
.person-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.danger-row { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--hot-50); }
.link-danger { color: var(--hot); align-self: flex-start; }
.pic-row { display: flex; align-items: center; gap: 14px; }
.pic-row > div { display: flex; flex-direction: column; gap: 2px; }
.pic { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-100); color: var(--brand-600); font-weight: 800; font-size: 22px; display: grid; place-items: center; object-fit: cover; flex: none; }
.pic-square { border-radius: 16px; }
.pic-pick { cursor: pointer; font-size: 13.5px; }
.co-kv { grid-template-columns: 140px 1fr; }
.code-inline { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; background: var(--brand-50); color: var(--brand-600); padding: 1px 8px; border-radius: 6px; }
.danger-zone { border: 1px solid #f3c9c9; }
.danger-zone summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; color: var(--hot); }
.danger-zone summary::-webkit-details-marker { display: none; }
.danger-body { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.danger-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.danger-item p { margin: 2px 0 0; }
.wg { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.wg-form .grid-2 { gap: 10px; }
.wg-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; }
.wg-preview { margin-top: 4px; }
.wgp-site { position: relative; height: 360px; border-radius: 14px; background: repeating-linear-gradient(0deg, #f4f3f9 0 22px, #efedf6 22px 23px); overflow: hidden; border: 1px solid var(--line); }
.wgp-off .wgp-window { opacity: .35; }
.wgp-window { position: absolute; width: 230px; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(22, 19, 31, .2); overflow: hidden; font-size: 12px; }
.wgp-head { color: #fff; font-weight: 700; padding: 10px 12px; font-size: 13px; }
.wgp-feed { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #f6f5fb; min-height: 120px; }
.wgp-msg { align-self: flex-start; background: #fff; padding: 6px 9px; border-radius: 10px; max-width: 85%; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.wgp-in { align-self: flex-end; color: #fff; }
.wgp-input { padding: 8px 10px; color: var(--muted); border-top: 1px solid var(--line); }
.wgp-btn { position: absolute; height: 48px; min-width: 48px; padding: 0 14px; border-radius: 24px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 13px; box-shadow: 0 6px 16px rgba(22, 19, 31, .25); }
.wgp-btn .ic { width: 22px; height: 22px; }
.wgp-own { position: absolute; right: 12px; bottom: 12px; font-size: 12px; color: var(--muted); background: #fff; padding: 4px 10px; border-radius: 8px; }
.wgp-note { position: absolute; left: 12px; top: 12px; font-size: 12px; font-weight: 600; color: var(--hot); background: #fff; padding: 4px 10px; border-radius: 8px; }

/* 13. Окна и уведомления */
.modal-back { position: fixed; inset: 0; background: rgba(22, 19, 31, .45); z-index: 100; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal { background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; animation: rise .18s ease-out; }
.modal-wide { max-width: 820px; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 8px; }
.modal-head h2 { flex: 1; font-size: 17px; }
.modal-body { padding: 8px 18px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13.5px; box-shadow: var(--shadow-lg); max-width: min(480px, calc(100vw - 32px)); animation: rise .2s ease-out; transition: opacity .4s, transform .4s; }
.toast-error { background: var(--hot); }
.toast-out { opacity: 0; transform: translateY(8px); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* 14. Средние экраны: карточка клиента уходит под кнопку */
@media (max-width: 1280px) {
  .inbox { grid-template-columns: 320px minmax(0, 1fr); }
  .inbox-card { display: none; }
  .inbox[data-pane="card"] .inbox-card { display: flex; position: fixed; right: 0; top: 0; bottom: 0; width: 360px; z-index: 40; box-shadow: var(--shadow-lg); }
  .inbox[data-pane="card"] .inbox-card .only-mobile { display: inline-grid !important; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 15. Телефон: нижнее меню, экраны по шагам */
@media (max-width: 768px) {
  .only-mobile { display: inline-grid !important; }
  h1 { font-size: 20px; }
  :root { --top: 52px; }
  .shell { grid-template-rows: var(--top) 1fr 58px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .top-status, .connect-btn, [data-help] { display: none; }
  .brand b { font-size: 15px; }
  .tabs-top { grid-row: 3; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); margin: 0; background: #fff; border-top: 1px solid var(--line); justify-content: space-around; gap: 0; }
  :root[data-theme="dark"] .tabs-top { background: var(--card); }
  .tab-top { flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 0; font-size: 10.5px; }
  .tab-top .ic { width: 21px; height: 21px; }
  .tab-top::after { top: 0; bottom: auto; border-radius: 0 0 3px 3px; left: 25%; right: 25%; }
  .tab-full { display: none; }
  .tab-short { display: inline; }
  .tab-count { position: absolute; top: 5px; left: calc(50% + 6px); }
  .screen { grid-row: 2; }
  .demo-float { display: none; }
  .btn.only-mobile { display: inline-flex !important; }
  .chat-tools .wait { display: none; }
  .help-grid { grid-template-columns: 1fr; }
  .tk { grid-template-columns: 1fr; }
  .tk-detail { display: none; padding: 14px 16px 24px; }
  .tk-open .tk-list { display: none; }
  .tk-open .tk-detail { display: flex; }
  .an-body { grid-template-columns: 1fr; }
  .an-tree { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .an-tree .tree-sub { flex-direction: row; border-left: 0; margin-left: 0; padding-left: 0; }
  .an-tree .tree-item { width: auto; flex: none; }
  .an-main { padding: 16px 16px 24px; }
  .an-kpis, .dash-kpis { grid-template-columns: 1fr 1fr; }
  .an-two, .dash-main, .quote-grid, .verdict-grid, .settings-two { grid-template-columns: 1fr; }
  .dash-side { position: static; }
  .co-card { flex-wrap: wrap; }
  .settings-aside, .team, .wg { grid-template-columns: 1fr; }
  .wg-side { position: static; }
  .danger-item { flex-direction: column; align-items: flex-start; }
  .page { padding: 16px 16px 24px; }
  .page-tools { margin-left: 0; width: 100%; }
  .inbox { grid-template-columns: 1fr; }
  .inbox-chat, .inbox-card { display: none; }
  .inbox[data-pane="chat"] .inbox-list, .inbox[data-pane="card"] .inbox-list { display: none; }
  .inbox[data-pane="chat"] .inbox-chat { display: flex; }
  .inbox[data-pane="card"] .inbox-card { display: flex; position: static; width: auto; box-shadow: none; border: 0; }
  .chat-head { padding: 8px 10px; gap: 8px; }
  .chat-tools .select-sm, .chat-tools .btn { display: none; }
  .avatar { width: 40px; height: 40px; }
  .feed { padding: 12px; }
  .msg { max-width: 86%; }
  .tool span { display: none; }
  .later-btn, .attach-btn { display: none; }
  .msg-menu-btn { opacity: 1; position: static; align-self: flex-end; width: 22px; height: 18px; font-size: 14px; margin-bottom: -6px; }
  .review-grid { grid-template-columns: 1fr; }
  .emoji-pop { width: auto; margin-left: 16px; }
  .tool-ai span { display: inline; }
  .composer { padding: 6px 8px 8px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi b { font-size: 22px; }
  .dash-grid, .deal-view, .grid-2 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .col { flex-basis: 84vw; }
  .user-pop { left: 16px; right: 16px; width: auto; bottom: 72px; }
  .stage-row { grid-template-columns: 36px 1fr 100px 34px; }
}


/* 16. Рабочий кабинет: пропорции и поверхности по образцу Корта. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root { --brand: #4038d6; --brand-600: #352cb7; --brand-50: #f0edfd; --brand-100: #e2def8; --ink: #171923; --ink-2: #4b4d5a; --muted: #7b7d8b; --line: #e1dfeb; --bg: #efeef6; --card: #fff; --radius: 16px; --top: 60px; --font: 'Golos Text', Inter, system-ui, sans-serif; --head: Inter, 'Golos Text', system-ui, sans-serif; --shadow: 0 1px 2px #27213b05; }
:root[data-theme="dark"] { --brand: #9b91ff; --brand-600: #b2aaff; --brand-50: #29243f; --brand-100: #3d365b; --ink: #eeedf6; --ink-2: #c3c0d2; --muted: #9590a7; --line: #302c41; --bg: #15131f; --card: #1e1b2b; }
body { font-size: 14px; line-height: 1.5; }
button, .btn, .tab, .chip { font-family: Inter, 'Golos Text', sans-serif; }
h1, h2, h3 { font-family: var(--head); letter-spacing: -.025em; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.topbar { padding: 0 16px; gap: 12px; background: var(--card); }
.topbar .brand { align-items: center; gap: 4px; }
.topbar .brand b { font-size: 15px; letter-spacing: -.02em; }
.topbar .brand span { font-size: 11px; }
.topbar .brand .logo-mark { width: 30px; height: 30px; }
.status-chip { height: 30px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font: 600 11px/1 Inter, sans-serif; padding-inline: 10px; }
.status-chip.accent { border-color: #d7d1f0; }
.tabs-top { align-self: center; align-items: center; height: 40px; padding: 4px; border-radius: 12px; background: #f4f3f8; flex: none; }
.tab-top { height: 32px; padding: 0 10px; border-radius: 9px; gap: 6px; font-size: 13px; font-weight: 550; }
.tab-top::after { display: none; }
.tab-top .ic { display: none; }
.tab-top.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 5px #17132b14; }
.tab-top:hover { background: #eae7f3; }
.tab-count { background: #f3dfe2; color: #b6354a; font-size: 10px; min-width: 17px; height: 17px; }
.top-actions { gap: 7px; }
.sq-btn { width: 34px; height: 34px; border-radius: 10px; background: var(--card); }
.sq-btn .ic { width: 17px; height: 17px; }
.connect-btn { height: 36px; padding-inline: 12px; font-size: 12px; }
.me-btn { width: 34px; height: 34px; background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100); }
.mobile-more { display: none; }
.inbox { grid-template-columns: 340px minmax(0, 1fr) 300px; }
.inbox-list, .inbox-card, .chat-head { background: var(--card); }
.list-head { padding: 12px 12px 14px; gap: 12px; }
.inbox-list-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.search { height: 40px; background: #f4f3f9; border-color: transparent; border-radius: 12px; }
.search input { font-size: 13px; }
.list-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; }
.chip { color: #595665; background: var(--card); font-size: 12px; height: 30px; padding-inline: 12px; }
.chip.active { color: var(--brand-600); background: var(--brand-50); border-color: #c5bce9; }
.inbox-filter { flex: none; }
.inbox-filter summary { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; list-style: none; cursor: pointer; color: var(--muted); }
.inbox-filter summary::-webkit-details-marker { display: none; }
.inbox-filter.has-filter summary, .inbox-filter[open] summary { background: var(--brand-50); color: var(--brand); border-color: var(--brand-100); }
.inbox-filter-menu { position: absolute; z-index: 15; right: 0; top: calc(100% + 8px); padding: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); width: 220px; display: flex; flex-direction: column; gap: 3px; }
.inbox-filter-menu .chip { border: 0; border-radius: 9px; text-align: left; height: 36px; }
.dlg { margin: 3px 6px; padding: 10px; min-height: 66px; border: 1px solid transparent; border-radius: 13px; gap: 12px; }
.dlg:hover { background: var(--bg); }
.dlg.active { background: var(--brand-50); border-color: #cec6ed; }
.dlg-top b { font-family: Inter, sans-serif; font-size: 13px; }
.dlg-top time { font-size: 11px; }
.dlg-preview { font-size: 12.5px; }
.dlg-meta { min-height: 0; gap: 5px; }
.dlg { position: relative; }
.dlg-meta { flex-wrap: nowrap; padding-right: 22px; }
.dlg-meta .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-size: 10px; }
.dlg-meta .badge { position: absolute; right: 10px; top: 35px; width: 18px; min-width: 18px; height: 18px; font-size: 10px; padding: 0; }
.dlg-preview { padding-right: 20px; }
.dlg-meta .wait { font-size: 10px; height: 19px; padding-inline: 6px; }
.avatar { width: 43px; height: 43px; background: #eee7f6; color: #67528e; font: 700 14px/1 Inter, sans-serif; }
.dlg:nth-child(6n+1) .avatar { background: #f0efd8; color: #6d6c32; }
.dlg:nth-child(6n+2) .avatar { background: #f3dfe4; color: #884351; }
.dlg:nth-child(6n+3) .avatar { background: #deebf5; color: #426780; }
.dlg:nth-child(6n+4) .avatar { background: #e8def5; color: #6c4388; }
.dlg:nth-child(6n+5) .avatar { background: #e9e4fb; color: #514379; }
.ch-badge { min-width: 21px; height: 17px; padding-inline: 4px; font-size: 9px; border-radius: 5px; }
.avatar .ch-badge { right: -3px; bottom: -2px; height: 17px; min-width: 17px; padding-inline: 2px; }
.inbox-chat { background-color: #f8f7fc; background-image: radial-gradient(#ddd9ed80 .8px, transparent .8px); background-size: 24px 24px; }
.chat-head { min-height: 65px; padding: 10px 18px; }
.chat-who .avatar { width: 43px; height: 43px; }
.chat-who b { font-family: Inter, sans-serif; font-size: 14px; }
.chat-tools { gap: 5px; }
.chat-tools { flex-wrap: nowrap; }
.review-label { display: inline; }
.chat-overflow { position: relative; }
.chat-overflow > summary { list-style: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); background: var(--card); font-size: 20px; cursor: pointer; }
.chat-overflow > summary::-webkit-details-marker { display: none; }
.chat-overflow-menu { position: absolute; z-index: 35; right: 0; top: calc(100% + 8px); width: 235px; padding: 12px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-lg); }
.chat-overflow-menu label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.chat-overflow .select-sm { display: block; max-width: none; width: 100%; }
.chat-overflow-menu .btn { display: inline-flex; width: 100%; justify-content: flex-start; }
.chat-tools .select-sm { font-size: 12px; }
.chat-tools .btn { height: 32px; padding-inline: 10px; font-size: 11px; }
.wait { border-radius: 999px; border: 1px solid transparent; font-size: 11px; }
.wait-hot { background: #faeeef; color: #bb3e43; border-color: #ebc7ca; }
.feed { padding: 20px 24px; gap: 8px; }
.day-sep span { border: 1px solid var(--line); box-shadow: none; border-radius: 999px; font-size: 11px; background: var(--card); }
.msg { max-width: min(560px, 82%); padding: 9px 12px 7px; border: 1px solid #ebe8f2; border-radius: 17px; box-shadow: 0 1px 2px #24203305; font-size: 14px; line-height: 1.5; }
.msg-in { background: var(--card); border-bottom-left-radius: 5px; }
.msg-out { background: #4936da; color: #fff; border-color: #4936da; border-bottom-right-radius: 5px; }
.msg-note { background: #fff8e4; border-color: #e8d59c; }
.msg-meta, .msg-author { font-size: 10.5px; }
.msg-text { line-height: 1.5; }
.composer { background: transparent; border-top: 0; padding: 0 18px 16px; }
.composer.note-mode { border-radius: 14px; background: #fff9e7; }
.composer-tools { gap: 5px; margin-bottom: 8px; }
.tool { border: 1px solid var(--line); background: var(--card); height: 29px; border-radius: 999px; padding-inline: 10px; font-size: 11.5px; }
.tool-ai { background: var(--brand-50); border-color: #cbc2e9; }
.tool-note { border: 0; background: transparent; }
.input-wrap textarea, .composer-row textarea { border-radius: 24px; background: var(--card); padding: 12px 40px 12px 16px; font-size: 13px; box-shadow: 0 2px 8px #211c3610; }
.input-wrap .emoji-btn { bottom: 6px; right: 6px; }
.composer-row { gap: 6px; align-items: center; }
.send { width: 44px; height: 44px; border-radius: 50%; }
.later-btn, .mic-btn { width: 34px; height: 34px; border: 0; background: transparent; }
.inbox-card .card-pad { padding: 18px 16px; gap: 14px; }
.card-sec { padding: 15px 16px; }
.card-sec h4 { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.card-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.card-act { padding: 8px 4px; font-size: 10px; background: var(--bg); border: 0; }
.field-inline input, .field-inline select { font-size: 12px; border-radius: 9px; }
.panel, .kpi, .table-wrap, .person, .co-card, .plan-card { border: 1px solid var(--line); box-shadow: none; background: var(--card); }
.panel { border-radius: 16px; padding: 18px; }
.page { padding: 26px 28px 40px; }
.page-dash { max-width: 1440px; }
.page-dash .page-head h1 { font-size: 20px; }
.dash-main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; }
.dash-kpis { gap: 12px; margin-bottom: 16px; }
.kpi { padding: 16px; min-height: 108px; }
.kpi span { font: 400 12px/1.4 Inter, sans-serif; }
.kpi b { font: 750 30px/1.2 Inter, sans-serif; letter-spacing: -.035em; }
.kpi-pair { padding: 0; }
.kpi-pair > div { padding: 16px; }
.kpi-hot { box-shadow: inset 0 2px 0 var(--hot); }
.seg { background: #f5f3fa; padding: 4px; border-radius: 12px; }
.seg-btn { font-family: Inter, sans-serif; font-size: 12px; font-weight: 550; border-radius: 8px; }
.seg-btn.on { box-shadow: 0 1px 5px #211a3521; }
.quote-card { border: 1px solid var(--line); background: #f8f7fc; border-radius: 13px; }
.table th { font-size: 11px; font-weight: 500; }
.table td { font-size: 12.5px; }
.settings { max-width: 1250px; margin-inline: auto; width: 100%; }
.settings > .tabs { padding: 5px; gap: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.settings > .tabs .tab { border: 0; border-radius: 10px; padding: 9px 12px; font-size: 12px; }
.settings > .tabs .tab.active { background: var(--brand-50); color: var(--brand-600); }
.co-card { border-radius: 18px; padding: 20px; }
.co-main h1 { font-size: 21px; }
.co-ava { border-radius: 14px; background: var(--brand-50); color: var(--brand-600); }
.settings-body { gap: 18px; min-width: 0; }
.settings-aside > *, .settings-two > * { min-width: 0; }
.settings .form > .btn { align-self: flex-start; }
.settings > .tabs { scroll-padding-inline: 12px; }
.an-tree { background: #f8f7fc; }
.an-head > div { min-width: 0; }
.an-head h1 { overflow-wrap: anywhere; }
.an-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.an-main > *, .an-two > *, .verdict-grid > * { min-width: 0; }
.people { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.connect-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.person-kv dd { min-width: 0; overflow-wrap: anywhere; }
.col { background: #e9e6f2; border: 1px solid var(--line); }
.deal { border: 1px solid var(--line); }
.plan-price { margin-top: 10px; }
.plan-popular { border-color: var(--brand); }
.connect-soon { background: #f8f7fc; }
.modal-head { padding: 18px 20px 10px; }
.modal-body { padding: 10px 20px 20px; min-height: 0; }
.modal-foot { padding: 14px 20px 18px; flex-wrap: wrap; }
.modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-head [data-close] { flex: none; }
.field > span { overflow-wrap: anywhere; }
.wgp-window { max-width: calc(100% - 40px); }
.task, .deal, .col, .connect { border-radius: 14px; }
.auth { background: radial-gradient(ellipse at 25% 0, #ddd7fa88, transparent 55%), var(--bg); }
.auth-card { max-width: 420px; border: 1px solid var(--line); box-shadow: 0 18px 70px -38px #211a3566; border-radius: 22px; padding: 30px; }
.auth-card h1 { font: 750 26px/1.2 Inter, sans-serif; }
.auth-card .btn-primary { height: 43px; border-radius: 12px; }
.auth-card .field input { background: var(--bg); border-color: transparent; height: 44px; }
.demo-float { height: 36px; border-radius: 999px; font-size: 11px; box-shadow: none; background: var(--hot); opacity: .9; }
.user-pop { padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 20px; }
.mobile-section-list { display: grid; gap: 6px; }
.mobile-section-list a { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); text-decoration: none; }
.mobile-section-list a > span:first-of-type { flex: 1; }
.mobile-section-list a:hover { background: var(--brand-50); }
:root[data-theme="dark"] .tabs-top, :root[data-theme="dark"] .search { background: #252133; }
:root[data-theme="dark"] .inbox-chat { background-color: #171423; background-image: radial-gradient(#544c7180 .7px, transparent .7px); }
:root[data-theme="dark"] .msg { border-color: var(--line); }
:root[data-theme="dark"] .msg-out { background: #5744d4; color: #fff; }
:root[data-theme="dark"] .quote-card { background: var(--bg); }
:root[data-theme="dark"] .tab-top:hover { background: #30293f; }
:root[data-theme="dark"] .chip.active { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-100); }
:root[data-theme="dark"] .auth-card .field input { background: var(--bg); }
:root[data-theme="dark"] .connect-soon, :root[data-theme="dark"] .col { background: var(--bg); }
@media (max-width: 1480px) { .topbar .brand b, .topbar .brand > span { display: none; } }
@media (min-width: 1100px) {
  .inbox-card { display: flex; }
  .inbox[data-pane="card"] .inbox-card { position: static; width: auto; box-shadow: none; }
  .inbox:not(:has([data-card] > *)) { grid-template-columns: 340px minmax(0, 1fr); }
  .inbox:not(:has([data-card] > *)) .inbox-card { display: none; }
}
@media (max-width: 1279px) {
  .inbox { grid-template-columns: 310px minmax(0, 1fr) 280px; }
  .inbox-card { display: flex; }
  .top-status .status-chip:first-child { display: none; }
  .topbar { gap: 10px; padding-inline: 12px; }
  .tab-top { padding-inline: 8px; font-size: 12px; }
  .connect-btn > span { display: none; }
  .connect-btn { padding-inline: 9px; }
}
@media (max-width: 1099px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .inbox-card { display: none; }
  .dash-main { grid-template-columns: 1fr; }
  .top-status { display: none; }
  .topbar { gap: 8px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg { grid-template-columns: minmax(0, 1fr); }
  .wg-side { position: static; }
}
@media (max-width: 768px) {
  :root { --top: 58px; }
  .shell { grid-template-rows: var(--top) minmax(0, 1fr) calc(84px + env(safe-area-inset-bottom)); }
  .topbar { justify-content: space-between; padding-inline: 14px; }
  .topbar .brand b, .topbar .brand > span { display: inline; }
  .topbar .brand b { font-size: 15px; }
  .top-actions { gap: 6px; }
  .tabs-top { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; height: 62px; padding: 5px; margin: 0 auto; max-width: 420px; border: 1px solid var(--line); border-radius: 28px; background: var(--card); box-shadow: 0 8px 28px #29223e24; gap: 3px; align-self: auto; }
  .tab-top { height: 50px; font-size: 10px; border-radius: 22px; padding: 0 6px; }
  .tab-top .ic { display: block; width: 20px; height: 20px; }
  .tab-top.active { background: var(--brand-50); color: var(--brand-600); box-shadow: none; }
  .mobile-secondary { display: none; }
  .mobile-more { display: flex; border: 0; background: transparent; color: var(--ink-2); font-family: Inter, sans-serif; cursor: pointer; }
  .tab-count { position: absolute; top: 4px; left: calc(50% + 6px); }
  .inbox { grid-template-columns: 1fr; }
  .inbox-card { display: none; }
  .inbox[data-pane="card"] .inbox-card { display: flex; }
  .list-head { padding: 12px; }
  .inbox-list-title { position: static; width: auto; height: auto; clip-path: none; font-size: 20px; }
  .dlg { margin-inline: 4px; }
  .chat-head { min-height: 60px; gap: 7px; padding: 8px; }
  .chat-who { min-width: 0; }
  .chat-who .avatar { width: 34px; height: 34px; }
  .chat-tools { flex-wrap: nowrap; gap: 2px; }
  .chat-tools .icon-btn { width: 28px; height: 30px; }
  .chat-tools > [data-review-modal] { display: inline-flex; width: 28px; height: 30px; padding: 0; justify-content: center; }
  .chat-tools .rm-wrap > [data-remind-menu] { display: inline-flex; width: 28px; height: 30px; padding: 0; justify-content: center; }
  .rm-pop { position: fixed; top: calc(var(--top) + 64px); left: 12px; right: 12px; width: auto; }
  .review-label { display: none; }
  .feed { padding: 12px; }
  .msg { max-width: 88%; font-size: 14px; }
  .composer { padding: 4px 8px 10px; }
  .composer-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tool { flex: none; font-size: 10.5px; padding-inline: 8px; }
  .tool .ic { width: 14px; height: 14px; }
  .tool-note { margin-left: 0; }
  .attach-btn { display: inline-grid; width: 28px; }
  .composer-row { gap: 4px; }
  .mic-btn { width: 28px; height: 34px; }
  .send { width: 38px; height: 38px; }
  .composer-row textarea { min-height: 40px; padding: 10px 32px 10px 12px; font-size: 13px; }
  .page { padding: 18px 14px 26px; }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { min-height: 100px; padding: 13px; }
  .kpi b { font-size: 26px; }
  .kpi-pair { padding: 0; }
  .kpi-pair > div { padding: 12px 8px; }
  .page-dash .page-tools { width: auto; margin-left: auto; }
  .page-dash .page-tools .btn { font-size: 11px; padding-inline: 10px; }
  .panel { padding: 15px; }
  .panel-head { flex-wrap: wrap; }
  .settings > .tabs { flex-wrap: nowrap; }
  .an-head { flex-wrap: wrap; gap: 10px; }
  .an-head > div { flex: 1 0 calc(100% - 62px); }
  .an-head h1 { font-size: 21px; }
  .an-export { margin-left: 62px; }
  .an-two, .plans { grid-template-columns: minmax(0, 1fr); }
  .an-bar { padding: 12px 14px; gap: 8px; }
  .an-bar > .seg { max-width: 100%; overflow-x: auto; }
  .an-tree { flex: none; padding: 10px; }
  .an-tree .tree-item { max-width: 240px; }
  .an-tree .tree-sub { flex: none; }
  .an-body { grid-template-rows: auto minmax(0, 1fr); }
  .team-main { grid-row: 1; }
  .team-head h3 { width: 100%; }
  .team-head .search { flex: 1; min-width: 0; }
  .stage-row { grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
  .stage-row input[type=color] { grid-column: 1; grid-row: 1; }
  .stage-row input:not([type=color]) { grid-column: 2; grid-row: 1; min-width: 0; }
  .stage-row select { grid-column: 2 / 4; grid-row: 2; min-width: 0; }
  .stage-row .icon-btn { grid-column: 3; grid-row: 1; width: 30px; }
  .co-kv { grid-template-columns: 1fr; gap: 5px; }
  .co-kv dd + dt { margin-top: 8px; }
  .pic-row > div { min-width: 0; overflow-wrap: anywhere; }
  .person-top { flex-wrap: wrap; }
  .person-name { flex-basis: calc(100% - 60px); }
  .person-foot { flex-wrap: wrap; }
  .modal-back { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px); }
  .modal-body { padding-inline: 16px; }
  .settings-aside, .settings-two { grid-template-columns: minmax(0, 1fr); }
  .hours-row { gap: 7px; }
  .hours-row .check { width: 42px; flex: none; }
  .hours input[type=time] { min-width: 0; width: 100%; flex: 1; padding-inline: 7px; }
  .co-card { gap: 12px; padding: 18px; }
  .co-main { flex-basis: calc(100% - 70px); }
  .co-main h1 { font-size: 19px; }
  .user-pop { top: 64px; bottom: auto; max-height: calc(100dvh - 156px); overflow-y: auto; }
  .mobile-section-modal { align-self: end; margin-bottom: calc(82px + env(safe-area-inset-bottom)); max-width: 440px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* 17. Добавление и настройка каналов */
.modal-back { grid-template-columns: minmax(0, 1fr); }
.modal { min-width: 0; justify-self: center; }
.modal-back:has(.channel-manager) { backdrop-filter: blur(4px); }
.channel-manager { width: min(1120px, calc(100vw - 40px)); max-width: 1120px; height: min(760px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); border-radius: 20px; overflow: hidden; }
.channel-manager .modal-head { padding: 14px 24px; min-height: 66px; flex: none; border-bottom: 1px solid var(--line); }
.channel-manager .modal-head h2 { font-size: 23px; font-weight: 750; }
.cm-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.channel-manager .modal-head [data-close] { border: 1px solid var(--line); width: 40px; height: 40px; border-radius: 12px; }
.channel-manager .modal-body { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.cm-layout { display: grid; grid-template-columns: 38% minmax(0, 1fr); flex: 1; min-height: 0; }
.cm-sidebar { min-width: 0; min-height: 0; background: #f8f7fc; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.cm-sidebar-body { min-height: 0; flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.cm-sidebar-body > * { flex: none; }
.cm-connected { display: grid; gap: 10px; }
.cm-connected > p { font-size: 13px; margin: 0; }
.cm-label { font: 600 11px/1.4 Inter, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .065em; margin: 0; }
.cm-connected-list { display: grid; gap: 6px; max-height: 120px; overflow: auto; scrollbar-width: thin; }
.cm-account { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 9px; color: var(--ink); cursor: pointer; text-align: left; }
.cm-account > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cm-account b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.cm-account small { font-size: 11px; color: var(--muted); }
.cm-account.on { border-color: var(--brand); background: var(--brand-50); }
.cm-state { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
.cm-state.ok { background: var(--ok); }
.cm-note { font-size: 13px; line-height: 1.6; padding: 14px; border-radius: 13px; background: #f0eef8; color: var(--ink-2); margin: 0; }
.cm-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.cm-choice { display: flex; align-items: center; gap: 10px; padding: 7px 9px; min-height: 44px; border: 1px solid #d5d0e8; border-radius: 12px; background: var(--card); text-align: left; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 550; }
.cm-choice:hover { border-color: var(--brand); }
.cm-choice.on { border-color: #9181ff; background: var(--brand-50); color: var(--brand-600); }
.cm-badge { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--channel, var(--brand)); color: #fff; font: 750 15px/1 Inter, sans-serif; letter-spacing: -.05em; }
.cm-badge svg { width: 20px; height: 20px; }
.cm-choice[data-provider=instagram] .cm-badge { background: linear-gradient(35deg, #ffb42d, #ff3969 55%, #9a38cd); }
.cm-privacy { margin: 0; padding: 14px 16px; flex: none; border-top: 1px solid var(--line); display: flex; gap: 9px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.cm-privacy .ic { width: 16px; height: 16px; margin-top: 2px; }
.cm-main { min-width: 0; min-height: 0; overflow-y: auto; padding: 24px 28px; scrollbar-width: thin; }
.cm-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cm-title > .cm-badge { width: 54px; height: 54px; border-radius: 17px; font-size: 24px; }
.cm-title > div { min-width: 0; }
.cm-title h2 { font-size: 24px; line-height: 1.2; font-weight: 750; overflow-wrap: anywhere; }
.cm-title p { margin: 4px 0 0; font-size: 13px; }
.cm-current { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; margin-bottom: 18px; border-radius: 12px; background: var(--bg); }
.cm-current b { flex: 1; min-width: 100px; font-size: 13px; overflow-wrap: anywhere; }
.cm-current .link { font-size: 11px; }
.cm-form { display: flex; flex-direction: column; gap: 14px; }
.cm-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cm-field-grid > .field { min-width: 0; }
.cm-field-grid > .field:only-child { grid-column: 1 / -1; }
.cm-form > [data-login-step]:empty, .cm-form > [data-widget-result]:empty { display: none; }
.cm-form input[type=color] { max-width: 120px; padding: 4px; }
.cm-credentials { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; }
.cm-credentials[open] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-credentials summary { cursor: pointer; font-size: 12px; font-weight: 600; grid-column: 1 / -1; }
.cm-credentials > p, .cm-credentials > .field:last-child { grid-column: 1 / -1; margin: 0; }
.cm-credentials .field { min-width: 0; }
.cm-form small { font-size: 11px; line-height: 1.5; }
.cm-methods { align-self: flex-start; border: 1px solid var(--line); }
.cm-methods .seg-btn { height: 34px; }
.cm-methods .on { background: var(--brand); color: #fff; }
.cm-flow { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: start; gap: 22px; }
.cm-auth { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #f9f8fc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.cm-auth-qr { min-height: 268px; }
.cm-auth > small { text-align: center; }
.cm-auth .btn { max-width: 100%; height: auto; min-height: 42px; padding-block: 9px; white-space: normal; text-align: center; }
.cm-qr { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.cm-qr:empty { display: none; }
.cm-qr p { font-size: 12px; color: var(--muted); }
/* QR — крупно и без сглаживания: ужатый до 192px код размывался, и телефон его не читал */
.cm-qr img { width: 100%; max-width: 264px; height: auto; background: #fff; padding: 14px; border-radius: 8px; image-rendering: pixelated; }
.cm-qr-icon .ic { width: 60px; height: 60px; color: #b3abc9; stroke-width: 1.1; }
.cm-instructions ol { list-style: none; padding: 0; display: grid; gap: 14px; margin: 12px 0 16px; }
.cm-instructions li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.cm-instructions li > span { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-100); color: var(--brand-600); font-weight: 650; }
.cm-instructions li p { margin: 2px 0 0; }
.cm-instructions > .link { display: inline-block; margin-bottom: 14px; font-size: 12px; }
.cm-error { padding: 10px; border: 1px solid #ecc3c6; border-radius: 10px; background: var(--hot-50); color: var(--hot); font-size: 12px; overflow-wrap: anywhere; }
.cm-error[hidden] { display: none; }
.cm-challenge { padding: 18px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.cm-challenge .btn { justify-self: start; }
.cm-pair-code { font: 750 28px/1.5 Inter, sans-serif; letter-spacing: .15em; color: var(--brand-600); }
.cm-success { color: var(--ok); }
.cm-success .ic { width: 60px; height: 60px; }
.cm-footnote { margin-top: 10px; }
:root[data-theme=dark] .cm-sidebar, :root[data-theme=dark] .cm-auth, :root[data-theme=dark] .cm-note { background: var(--bg); }
@media (min-width: 851px) and (max-height: 760px) { .cm-sidebar-body { gap: 10px; padding: 14px; } .cm-account { padding: 7px; } .cm-connected-list { max-height: 116px; } .cm-choice { min-height: 42px; padding-block: 5px; } .cm-privacy { padding: 10px 14px; } .cm-main { padding: 20px 24px; } .cm-title { margin-bottom: 16px; } .cm-title > .cm-badge { width: 48px; height: 48px; } .cm-title h2 { font-size: 22px; } .cm-auth-qr { min-height: 248px; } .cm-instructions .cm-note { padding: 12px; font-size: 12px; } }
@media (min-width: 851px) and (max-width: 1099px) { .cm-layout { grid-template-columns: 37% minmax(0, 1fr); } .cm-main { padding: 20px; } .cm-flow { gap: 16px; } .cm-choice { gap: 7px; font-size: 12px; } .cm-choice .cm-badge { width: 28px; height: 28px; } }
@media (max-width: 850px) {
  .channel-manager { width: calc(100vw - 20px); max-width: calc(100vw - 20px); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .channel-manager .modal-head { padding: 14px 16px; }
  .channel-manager .modal-head h2 { font-size: 20px; }
  .channel-manager .modal-head [data-close] { width: 34px; height: 34px; }
  .channel-manager .modal-body { overflow: auto; }
  .cm-layout { display: flex; flex-direction: column; height: auto; flex: none; }
  .cm-sidebar { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .cm-sidebar-body { overflow: visible; padding: 14px; gap: 10px; }
  .cm-sidebar > .cm-note, .cm-privacy { display: none; }
  .cm-choices { display: flex; overflow-x: auto; padding-bottom: 5px; scroll-padding-inline: 8px; }
  .cm-choice { flex: none; padding: 7px 10px; min-height: 42px; font-size: 12px; }
  .cm-choice .cm-badge { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
  .cm-connected-list { max-height: 112px; }
  .cm-main { overflow: visible; padding: 20px 16px; }
  .cm-title { gap: 10px; margin-bottom: 18px; }
  .cm-title h2 { font-size: 21px; }
  .cm-title > .cm-badge { width: 42px; height: 42px; border-radius: 13px; font-size: 19px; }
  .cm-title p { font-size: 12px; }
  .cm-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cm-credentials[open] { grid-template-columns: minmax(0, 1fr); }
  .cm-methods { max-width: 100%; }
  .cm-methods .seg-btn { padding-inline: 9px; font-size: 11px; }
  .cm-auth-qr { min-height: 230px; }
  .cm-auth { padding: 16px; }
  .cm-account { padding: 7px; }
  .cm-count { font-size: 10px; }
  .ch-row { flex-wrap: wrap; }
  .ch-row .ch-main { flex-basis: calc(100% - 50px); }
}

/* 18. Knowledge library and website widget editor */
.settings:has(.knowledge-page), .settings:has(.widget-editor) { max-width: 1480px; }
.settings:has(.knowledge-page) > .co-card, .settings:has(.widget-editor) > .co-card { display: none; }
.knowledge-page, .widget-editor { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.kb-profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.kb-profile { display: flex; flex-direction: column; gap: 12px; padding: 22px; box-shadow: 0 2px 3px #27213b06; border-color: #d5d0e9; }
.kb-profile h3 { margin: 0; font-size: 20px; letter-spacing: -.5px; }
.kb-profile > p { margin: -7px 0 0; line-height: 1.5; font-size: 13px; min-height: 38px; }
.kb-profile textarea { width: 100%; min-height: 218px; border: 1px solid #d2cce9; border-radius: 12px; padding: 16px; background: var(--bg); color: var(--ink); font: inherit; line-height: 1.6; resize: vertical; }
.kb-profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.kb-profile-actions > .btn { margin-left: auto; }
.kb-upload { border: 1px dashed #b5a9ef; color: var(--brand-600); padding: 9px 13px; border-radius: 9px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; white-space: nowrap; }
.kb-upload:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.kb-upload input { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
.kb-library { background: var(--brand-50); border: 1px solid #b9abff; border-radius: 18px; padding: 24px; }
.kb-library-head { display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.kb-library-head h3 { margin: 0; font-size: 18px; }
.kb-library-head h3 span { margin-left: 8px; font-weight: 400; white-space: nowrap; }
.kb-toggle { display: flex; align-items: center; gap: 12px; white-space: nowrap; color: var(--brand-600); font-size: 13px; font-weight: 600; }
.kb-library > p { max-width: 800px; font-size: 14px; line-height: 1.65; margin: 12px 0 0; }
.kb-doc-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.kb-doc { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.kb-doc-open { display: flex; align-items: flex-start; gap: 13px; padding: 16px; text-align: left; border: 0; background: none; color: var(--ink); width: 100%; flex: 1; }
.kb-doc-open:hover { background: var(--bg); }
.kb-doc-open b { font-size: 13px; font-weight: 600; line-height: 1.4; display: block; overflow-wrap: anywhere; }
.kb-doc-open small { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; }
.kb-file { display: grid; place-items: end start; width: 29px; height: 36px; flex-shrink: 0; color: var(--brand); font-size: 9px; font-weight: 750; border: 1px solid #b9b0dc; border-radius: 5px; padding: 3px; background: var(--brand-50); }
.kb-doc-actions { display: flex; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 9px 16px; }
.kb-doc-actions button { font-size: 11px; }
.kb-custom .panel-head { align-items: flex-start; flex-wrap: wrap; }
.kb-custom .panel-head p { margin: 8px 0 0; font-size: 13px; }
.kb-reader { line-height: 1.75; font-size: 14px; max-width: 780px; margin: auto; overflow-wrap: anywhere; }
.kb-reader h2 { font-size: 24px; line-height: 1.3; }.kb-reader h3 { font-size: 17px; margin: 25px 0 8px; }.kb-reader h4 { font-size: 15px; margin: 20px 0 8px; }
.kb-reader p { margin: 8px 0; white-space: pre-wrap; }.kb-reader .kb-bullet { padding-left: 14px; }
.we-install { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
.we-status { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.we-status i { width: 8px; height: 8px; background: var(--ok); border-radius: 50%; }
.we-install code { min-width: 180px; flex: 1; overflow-x: auto; white-space: nowrap; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 11px; background: var(--bg); }
.we-install .link { font-size: 13px; white-space: nowrap; }.we-picker { max-width: 360px; }
.we-layout { display: grid; grid-template-columns: minmax(310px, .85fr) minmax(0,1.55fr); gap: 18px; align-items: start; }
.we-form { padding: 0; overflow: hidden; }
.we-tabs { display: flex; border-bottom: 1px solid var(--line); }
.we-tabs button { flex: 1; padding: 16px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.we-tabs [aria-selected=true] { color: var(--ink); border-color: var(--brand); }
.we-fields { padding: 20px; margin: 0; border: 0; min-width: 0; }
.we-fields section:not([hidden]) { display: flex; flex-direction: column; gap: 23px; }
.we-fields .field { gap: 9px; }.we-fields .field > span { font-size: 13px; font-weight: 600; }
.we-fields input:not([type=checkbox]):not([type=color]),.we-fields textarea,.we-fields select { background: var(--bg); padding: 12px; border-radius: 11px; min-width: 0; width: 100%; border-color: #d2cce9; font-size: 14px; }
.we-fields textarea { line-height: 1.5; }.we-fields .grid-2 { gap: 12px; }.we-fields .switch-row { gap: 14px; align-items: flex-start; }.we-fields .switch-row b { font-size: 13px; }.we-fields .switch-row small { line-height: 1.6; margin-top: 5px; font-size: 12px; }
.we-fields .switch { flex-shrink: 0; }
.we-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; background: var(--bg); border-top: 1px solid var(--line); align-items: center; }
.we-actions > span { margin-right: auto; font-size: 10px; max-width: 130px; }
.we-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.we-swatches > button { width: 28px; height: 28px; border-radius: 50%; background: var(--swatch); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--line); }
.we-swatches > button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--brand); }
.we-custom { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }.we-custom input { width: 31px; height: 31px; border: 0; padding: 0; background: none; }
.we-preview { padding: 0; overflow: hidden; min-width: 0; position: sticky; top: 16px; }
.we-toolbar { padding: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); }
.we-toolbar > span { margin-left: auto; font-size: 11px; }
.we-segment { padding: 3px; display: flex; border: 1px solid var(--line); background: var(--bg); border-radius: 11px; }
.we-segment button { border: 0; border-radius: 8px; padding: 7px 10px; font-size: 12px; color: var(--ink-2); background: none; white-space: nowrap; }
.we-segment [aria-pressed=true] { background: #4038d6; color: #fff; font-weight: 600; }
.we-canvas { position: relative; height: 700px; min-width: 0; background: var(--card); margin: auto; width: 100%; transition: width .18s; overflow: hidden; }
.we-canvas.we-phone { width: min(100%,360px); border-inline: 1px solid var(--line); }
.we-browser { height: 56px; display: flex; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); font-size: 14px; }.we-browser span { color: var(--line); letter-spacing: 6px; }
.we-skeleton { padding: 30px 25px; display: flex; flex-direction: column; gap: 14px; }.we-skeleton i { display: block; height: 21px; width: 70%; border-radius: 9px; background: var(--bg); }.we-skeleton > i:nth-child(2) { width: 55%; }.we-skeleton > i:nth-child(3) { width: 90%; height: 9px; margin-top: 10px; }.we-skeleton > div { display: flex; gap: 12px; margin-top: 30px; }.we-skeleton > div i { width: 33%; height: 120px; }
.we-preview-note { position: absolute; top: 65px; left: 16px; color: var(--brand-600); background: var(--brand-50); font-size: 11px; border-radius: 8px; padding: 7px; pointer-events: none; }.we-preview-note:empty { display: none; }
.we-test { display: block; padding: 13px 16px; border-top: 1px solid var(--line); font-size: 12px; }
.we-instructions { padding-left: 24px; line-height: 1.8; }
:root[data-theme=dark] .kb-profile textarea, :root[data-theme=dark] .we-fields input, :root[data-theme=dark] .we-fields textarea, :root[data-theme=dark] .we-fields select { border-color: var(--line); }
@media(min-width:1500px) { .settings:has(.knowledge-page), .settings:has(.widget-editor) { padding-top: 18px; } }
@media(max-width:1150px) { .kb-doc-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.we-layout { grid-template-columns: minmax(290px, .85fr) minmax(0,1fr); }.we-toolbar > span { width: 100%; } }
@media(max-width:850px) { .kb-profile-grid { grid-template-columns: minmax(0,1fr); }.kb-doc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.we-layout { grid-template-columns: minmax(0,1fr); }.we-preview { position: static; }.we-form .we-fields section:not([hidden]) { gap: 18px; }.we-actions > span { max-width: none; } }
@media(max-width:550px) { .kb-profile, .kb-library { padding: 18px; }.kb-profile h3 { font-size: 18px; }.kb-profile > p { min-height: 0; }.kb-library-head { flex-wrap: wrap; gap: 14px; }.kb-library-head h3 span { display: block; margin: 5px 0 0; }.kb-doc-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }.kb-doc-open { align-items: center; }.kb-profile-actions { gap: 10px; }.kb-profile-actions > .btn { margin-left: 0; }.kb-custom .row-gap { flex-wrap: wrap; }.we-install { padding: 14px; }.we-install code { order: 2; min-width: 0; flex-basis: 100%; }.we-install > .btn { margin-left: auto; }.we-install > .link { order: 3; }.we-toolbar { gap: 10px; }.we-segment { flex: 1; }.we-segment button { flex: 1; padding-inline: 6px; font-size: 11px; }.we-toolbar > span { margin: 0; }.we-canvas { height: 690px; }.we-fields { padding: 18px; }.we-actions { padding: 12px; flex-wrap: wrap; }.we-actions > span { flex-basis: 100%; }.we-fields .grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.we-install { flex-direction: row; }
.we-options { display: flex; padding: 4px; gap: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 11px; flex-wrap: wrap; }
.we-options button { flex: 1; min-width: fit-content; background: none; border: 0; border-radius: 8px; padding: 8px 9px; font-size: 12px; color: var(--ink-2); }
.we-options button[aria-pressed=true] { background: #4038d6; color: #fff; font-weight: 600; }

.screen:has(.knowledge-page), .screen:has(.widget-editor) { position: relative; }
.kb-profile, .kb-upload { position: relative; }

/* ---------- Клиенты: категории по активности, сводка покупок ---------- */
.tag-ok { background: var(--ok-50); color: var(--ok); }
.tag-warn { background: var(--warn-50); color: var(--warn); }
.act-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.contacts-chips { margin-bottom: 12px; flex-wrap: wrap; overflow: visible; }
.cell-sub { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.client-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.client-sum div { background: var(--bg); border-radius: 10px; padding: 8px; min-width: 0; }
.client-sum span { display: block; color: var(--muted); font-size: 11.5px; }
.client-sum b { display: block; font-size: 13px; line-height: 1.3; }
.retention { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 768px) {
  .retention { grid-template-columns: repeat(2, 1fr); }
  .client-sum { grid-template-columns: repeat(2, 1fr); }
}

/* ——— Привязка мессенджера в профиле (экран входа — login.css, как на портале) ——— */
.ml-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 4px 0 0; }
.ml-list { display: grid; gap: 8px; }
.ml-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ml-item:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-50); }
.ml-item:disabled { cursor: default; }
.ml-item:disabled b { color: var(--muted); }
.ml-item-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.ml-item-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ml-item-info small { color: var(--muted); font-size: 12px; }
.ml-item-go { font-size: 22px; color: var(--muted); }
.ml-wait { display: flex; flex-direction: column; gap: 14px; }
.ml-wait-logo { width: 56px; height: 56px; border-radius: 16px; }
.ml-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ml-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ml-steps li span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); font-weight: 700; font-size: 13px; }
.ml-open { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.ml-wait-telegram .ml-open { background: #229ed9; border-color: #229ed9; }
.ml-wait-max .ml-open { background: linear-gradient(90deg, #3a8bff, #8a3dff); border-color: transparent; }
.ml-wait-whatsapp .ml-open { background: #25d366; border-color: #25d366; }
.ml-status { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.ml-status > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ml-status small { color: var(--muted); font-size: 12px; }
.ml-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); animation: ml-pulse 1.4s ease-in-out infinite; }
.ml-dot.is-off { background: var(--muted); animation: none; }
@keyframes ml-pulse { 50% { opacity: .35; transform: scale(.8); } }
.ml-restart { align-self: center; }
.ml-profile { display: flex; flex-direction: column; gap: 10px; }
.ml-linked { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ml-linked li { display: flex; align-items: center; gap: 10px; }
.ml-linked img { width: 28px; height: 28px; border-radius: 8px; }

/* ——— Проверка подключённого аккаунта: радар, шаги, галочка линией ——— */
.cm-check { --cm-c: var(--brand); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; width: 100%; }
.cm-radar { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.cm-radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cm-c); opacity: 0; animation: cm-ping 1.8s cubic-bezier(.2, .6, .3, 1) infinite; }
.cm-radar span:nth-child(2) { animation-delay: .6s; }
.cm-radar span:nth-child(3) { animation-delay: 1.2s; }
.cm-radar b { position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--cm-c); color: #fff; font-size: 24px; font-weight: 800; box-shadow: 0 10px 30px -10px var(--cm-c); animation: cm-beat 1.8s ease-in-out infinite; }
@keyframes cm-ping { 0% { transform: scale(.45); opacity: .55; } 100% { transform: scale(1); opacity: 0; } }
@keyframes cm-beat { 50% { transform: scale(1.06); } }
.cm-check-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; text-align: left; font-size: 13px; color: var(--muted); }
.cm-check-steps li { display: flex; align-items: center; gap: 9px; transition: color .25s; }
.cm-check-steps li::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; transition: all .25s; }
.cm-check-steps li.run { color: var(--ink); }
.cm-check-steps li.run::before { border-color: var(--cm-c); border-right-color: transparent; animation: cm-spin .7s linear infinite; }
.cm-check-steps li.ok { color: var(--ink); }
.cm-check-steps li.ok::before { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cm-check-steps li.bad { color: var(--hot); }
.cm-check-steps li.bad::before { border-color: var(--hot); background: var(--hot); }
@keyframes cm-spin { to { transform: rotate(360deg); } }
.cm-check-mark { width: 76px; height: 76px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cm-check-mark circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: cm-draw .55s ease-out forwards; }
.cm-check-mark path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: cm-draw .35s .45s ease-out forwards; }
.cm-check-ok .cm-check-mark { stroke: var(--ok); }
.cm-check-ok .cm-check-mark circle { fill: var(--ok-50); }
.cm-check-bad .cm-check-mark { stroke: var(--hot); animation: cm-shake .4s .8s; }
.cm-check-ok b, .cm-check-bad b { font-size: 16px; animation: cm-rise .35s .55s both; }
.cm-check-ok small, .cm-check-bad small { animation: cm-rise .35s .7s both; }
@keyframes cm-draw { to { stroke-dashoffset: 0; } }
@keyframes cm-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes cm-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .cm-radar span, .cm-radar b, .cm-check-steps li.run::before { animation: none; }
  .cm-check-mark circle, .cm-check-mark path { animation: none; stroke-dashoffset: 0; }
}

/* ——— Старые переписки: подгрузка вверху чата ——— */
.feed-older { align-self: center; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 4px 12px; border-radius: 999px; opacity: .55; }
.feed-older span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); }
.feed-older.on { opacity: 1; background: var(--brand-50); }
.feed-older.on span { animation: cm-spin .7s linear infinite; }

/* ——— Инфографика загрузки старых переписок (history-card.js) ——— */
.hc { --hc-c: var(--brand); display: flex; gap: 16px; align-items: flex-start; padding: 16px; margin: -4px 0 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, var(--brand-50), var(--card) 70%); }
.hc-done { --hc-c: var(--ok); background: linear-gradient(135deg, var(--ok-50), var(--card) 70%); }
.hc-wait { --hc-c: #e8a317; background: linear-gradient(135deg, #fff5df, var(--card) 70%); }
.hc-ring { position: relative; flex: none; width: 72px; height: 72px; display: grid; place-items: center; }
.hc-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hc-ring circle { fill: none; stroke-width: 6; }
.hc-ring-bg { stroke: var(--line); }
.hc-ring-fg { stroke: var(--hc-c); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.3, .7, .3, 1); }
.hc-ring-run .hc-ring-fg { animation: hc-glow 1.8s ease-in-out infinite; }
.hc-ring > b { position: relative; font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.hc-ok { width: 26px; height: 26px; fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hc-glow { 50% { opacity: .55; } }
.hc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.hc-title { font-size: 15px; color: var(--ink); }
.hc-sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.hc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.hc-tiles > div { padding: 9px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-tiles b { font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-tiles b small { font-size: 12px; font-weight: 600; color: var(--muted); }
.hc-tiles span { font-size: 11.5px; color: var(--muted); }
.hc-split { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line); margin-top: 6px; }
.hc-split i { display: block; height: 100%; transition: width .6s ease; }
.hc-priv { background: var(--hc-c); }
.hc-grp { background: #f4a340; }
.hc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.hc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hc-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.hc-warn { color: #b7791f; }
.hc .link { align-self: flex-start; font-size: 13px; margin-top: 2px; }
/* над списком переписок — коротко, по нажатию — подробности в окне канала */
.hc-slot { display: grid; gap: 8px; padding: 0 16px; }
.hc-slot:empty { display: none; }
.hc-compact { width: 100%; margin: 0 0 8px; padding: 10px 12px; gap: 12px; align-items: center; cursor: pointer; font: inherit; color: inherit; }
.hc-compact:hover { border-color: var(--hc-c); }
.hc-compact .hc-ring { width: 44px; height: 44px; }
.hc-compact .hc-ring > b { font-size: 11px; }
.hc-compact .hc-ok { width: 18px; height: 18px; }
.hc-compact .hc-title { font-size: 13px; }
.hc-compact .hc-sub { font-size: 11.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
:root[data-theme="dark"] .hc-wait { background: linear-gradient(135deg, #3a2f17, var(--card) 70%); }
@media (max-width: 560px) { .hc { flex-direction: column; align-items: center; } .hc-body { width: 100%; } .hc-compact { flex-direction: row; } }
@media (prefers-reduced-motion: reduce) { .hc-ring-run .hc-ring-fg { animation: none; } }

/* ——— Профиль человека в мессенджере (фото, имя в профиле и в книге, «о себе») ——— */
.avatar > .avatar-img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.mp { display: grid; gap: 10px; margin: 2px 0 12px; }
.mp-item { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); display: grid; gap: 8px; }
.mp-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mp-head .avatar { width: 40px; height: 40px; font-size: 13px; }
.mp-who { display: flex; flex-direction: column; min-width: 0; }
.mp-who b { font-size: 14px; overflow-wrap: anywhere; }
.mp-who small { font-size: 12px; color: var(--muted); }
.mp-who a { color: var(--brand-600); }
.mp-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font: 700 10.5px/17px Inter, sans-serif; font-style: normal; background: var(--brand-50); color: var(--brand-600); vertical-align: 1px; }
.mp-ok { background: #e3f1ff; color: #2481cc; }
.mp-premium { background: #f1e8ff; color: #8a4cf5; }
.mp-bad { background: #fdeaea; color: var(--hot); }
.mp-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12.5px; }
.mp-kv dt { color: var(--muted); }
.mp-kv dd { margin: 0; overflow-wrap: anywhere; }
.mp-about { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 12.5px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.mp-links { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-link { padding: 3px 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand-600); font-size: 12px; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-link-telegram { background: #e3f3fc; color: #1b8ccc; }
.mp-link-email { background: var(--ok-50); color: var(--ok); }
.mp-time { font-size: 11px; }
.mp-refresh { justify-self: start; font-size: 12.5px; }

/* ——— Фирменные значки каналов (core.js brandIcon) ——— */
.brand-ic { position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle; }
.brand-ic > img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: inherit; }
.brand-ic > b { font: 800 9px/1 Inter, sans-serif; color: #fff; }
/* у OLX в картинке белые поля — показываем только сам значок */
.brand-olx > img { object-fit: cover; clip-path: inset(15% round 22%); transform: scale(1.42); }
.brand-widget > img, .brand-demo > img { object-fit: cover; }
.brand-bot { position: absolute; right: -3px; bottom: -3px; width: 48%; height: 48%; min-width: 9px; min-height: 9px; display: grid; place-items: center; border-radius: 50%; background: #2b2a33; color: #fff; border: 1.5px solid var(--card); }
.brand-bot svg { width: 72%; height: 72%; }
/* маленький — в списках и таблицах */
.brand-ic.ch-badge { width: 18px; height: 18px; min-width: 0; padding: 0; background: none; border: 0; border-radius: 5px; }
/* в углу аватара — кружок с белой обводкой */
.avatar .brand-ic.ch-badge { position: absolute; right: -4px; bottom: -3px; width: 19px; height: 19px; padding: 0; min-width: 0; border: 2px solid var(--card); border-radius: 50%; background: var(--card); }
.avatar .brand-ic.ch-badge > img { object-fit: cover; border-radius: 50%; }
.avatar .brand-olx.ch-badge > img { clip-path: inset(15% round 50%); }
/* в окне подключения и на карточках каналов */
.brand-ic.cm-badge { width: 34px; height: 34px; background: none; border-radius: 10px; }
.cm-title > .brand-ic.cm-badge { width: 54px; height: 54px; border-radius: 16px; }
.cm-radar .brand-ic.cm-radar-ico { position: relative; width: 56px; height: 56px; border-radius: 16px; animation: cm-beat 1.8s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .18)); }
@media (max-width: 850px) { .cm-choice .brand-ic.cm-badge { width: 28px; height: 28px; border-radius: 8px; } .cm-title > .brand-ic.cm-badge { width: 44px; height: 44px; border-radius: 13px; } }
@media (prefers-reduced-motion: reduce) { .cm-radar .brand-ic.cm-radar-ico { animation: none; } }
.cm-olx { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.cm-olx p { margin: 2px 0 0; }
.cm-olx-redirect code { word-break: break-all; }
@media (max-width: 560px) { .cm-olx { grid-template-columns: auto 1fr; } .cm-olx .btn { grid-column: 1 / -1; } }

/* Фильтры над списком переписок: четыре чипа влезают в колонку 320–340px */
.list-filter-row .chips { gap: 4px; }
.list-filter-row .chips .chip { padding-inline: 7px; }

/* ——— Боковое меню (как у Telemetr): колонка иконок 68px, по наведению раскрывается поверх экрана ——— */
.shell { grid-template-columns: 68px minmax(0, 1fr); }
.shell > .topbar { grid-column: 1 / -1; grid-row: 1; }
.shell > .screen { grid-column: 2; grid-row: 2; }
.side { position: relative; grid-column: 1; grid-row: 2; z-index: 30; min-height: 0; }
.side-panel { position: absolute; top: 0; bottom: 0; left: 0; width: 68px; display: flex; flex-direction: column; gap: 2px; padding: 10px; overflow: hidden auto; scrollbar-width: none; background: var(--card); border-right: 1px solid var(--line); transition: width .22s ease, box-shadow .22s ease; }
.side-panel::-webkit-scrollbar { display: none; }
.side:hover .side-panel, .side:has(:focus-visible) .side-panel { width: 272px; box-shadow: 0 12px 34px #29223e26; }
.side-link { position: relative; display: flex; align-items: center; gap: 12px; flex: none; width: 100%; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 14px/1 Inter, 'Golos Text', sans-serif; white-space: nowrap; text-align: left; cursor: pointer; text-decoration: none !important; }
.side-link .ic { flex: none; width: 20px; height: 20px; }
.side-link > span { opacity: 0; transition: opacity .15s ease; overflow: hidden; text-overflow: ellipsis; }
.side:hover .side-link > span, .side:has(:focus-visible) .side-link > span { opacity: 1; transition-delay: .06s; }
.side-link:hover { background: var(--bg); color: var(--ink); }
.side-link.active { background: var(--brand-50); color: var(--brand-600); }
.side-head { color: var(--ink); font-weight: 700; }
.side-arrow { margin-left: auto; width: 14px !important; height: 14px !important; color: var(--muted); opacity: 0; transition: transform .2s ease, opacity .15s ease; }
.side:hover .side-arrow, .side:has(:focus-visible) .side-arrow { opacity: 1; }
.side-group.closed .side-arrow { transform: rotate(-90deg); }
.side-group.closed .side-items { display: none; }
.side-items { display: flex; flex-direction: column; gap: 2px; }
.side-pinned + .side-group, .side-group + .side-group { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.side-count { position: absolute; top: 3px; left: 29px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--hot); color: #fff; font: 700 10px/17px Inter, sans-serif; font-style: normal; text-align: center; }
.side-count[hidden] { display: none; }
@media (min-width: 769px) { .tabs-top { display: none; } .top-actions { margin-left: auto; } }
@media (max-width: 768px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell > .screen { grid-column: 1; }
  .side { display: none; }
}
@media (prefers-reduced-motion: reduce) { .side-panel, .side-link > span, .side-arrow { transition: none; } }

/* ——— Шапка: поиск, «Написать первым», «на что обратить внимание», мессенджеры ——— */
.top-search { position: relative; flex: 0 1 300px; min-width: 150px; }
.ts-field { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 11px; border: 1px solid transparent; border-radius: 10px; background: var(--bg); color: var(--muted); cursor: text; }
.ts-field:focus-within { border-color: var(--brand-100); background: var(--card); box-shadow: 0 0 0 3px var(--brand-50); }
.ts-field .ic { flex: none; width: 17px; height: 17px; }
.ts-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: 500 13px/1 Inter, 'Golos Text', sans-serif; }
.ts-field input::-webkit-search-cancel-button { display: none; }
.ts-field kbd { flex: none; min-width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); font: 600 11px/18px Inter, sans-serif; text-align: center; }
.ts-field:focus-within kbd { display: none; }
.ts-drop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: max(100%, 420px); max-height: min(70vh, 560px); overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-lg); }
.ts-drop[hidden] { display: none; }
.ts-drop h6 { margin: 8px 10px 4px; color: var(--muted); font: 700 10.5px/1.4 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.ts-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; color: var(--ink); text-decoration: none !important; }
.ts-item:hover, .ts-item.cur { background: var(--bg); }
.ts-item .avatar { flex: none; position: relative; }
.ts-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ts-main b { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-item .badge { margin-left: 0; }
.ts-empty { margin: 0; padding: 14px; color: var(--muted); font-size: 13px; }
.top-write { flex: none; }

.top-attention { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.top-attention .att { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 12.5px/1 Inter, 'Golos Text', sans-serif; white-space: nowrap; cursor: pointer; text-decoration: none !important; transition: border-color .15s ease, transform .15s ease; }
.top-attention .att:hover { border-color: var(--brand-100); transform: translateY(-1px); }
.top-attention .att .ic { flex: none; width: 16px; height: 16px; }
.top-attention .att b { font-weight: 800; }
.top-attention .att-hot { border-color: transparent; background: var(--hot-50); color: var(--hot); }
.top-attention .att-warn { border-color: transparent; background: var(--warn-50); color: var(--warn); }
.top-attention .att-brand { border-color: transparent; background: var(--brand-50); color: var(--brand-600); }
.top-attention .att-ok { border-color: transparent; background: var(--ok-50); color: var(--ok); cursor: default; }
.top-attention .att-ok:hover { transform: none; }
.top-attention .att-wait.att-hot .ic { animation: att-pulse 1.6s ease-in-out infinite; }
@keyframes att-pulse { 50% { transform: scale(1.18); } }
.top-attention .att-ch { padding-inline: 8px; }
.top-attention .att-ch small { color: var(--muted); font-size: 11px; font-weight: 700; }
.top-attention .att-logos { display: flex; align-items: center; }
.top-attention .att-logo { position: relative; display: block; margin-left: -4px; }
.top-attention .att-logo:first-child { margin-left: 0; }
.top-attention .att-logo .att-ic { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.top-attention .att-logo .att-ic > img { border-radius: 50%; object-fit: cover; }
.top-attention .att-hot .att-logo .att-ic { box-shadow: 0 0 0 2px var(--hot-50); }
.top-attention .att-logo::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; border: 1.5px solid var(--card); border-radius: 50%; background: var(--ok); }
.top-attention .att-logo.bad::after { background: var(--hot); }

@media (max-width: 1599px) { .top-attention .att:not(.att-wait):not(.att-ch):not(.att-ok) .att-t { display: none; } }
@media (max-width: 1279px) { .top-attention .att .att-t { display: none; } .top-search { flex-basis: 220px; } }
@media (max-width: 1099px) { .top-search { flex: 0 1 180px; min-width: 120px; } .ts-field kbd { display: none; } }
@media (max-width: 768px) {
  .top-search, .top-write, .att-ch, .att-ok { display: none; }
  .top-attention { flex: 0 1 auto; gap: 4px; }
  .top-attention .att { height: 30px; padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) { .att-wait.att-hot .ic { animation: none; } .top-attention .att { transition: none; } }

/* ——— Поиск по всему OLYMP: круглое поле с меткой Ctrl K, разделы и действия в выдаче ——— */
.ts-field { border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 0 5px 0 13px; }
.ts-field kbd { min-width: 0; height: 24px; padding: 0 9px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font: 700 11px/24px Inter, sans-serif; letter-spacing: .02em; }
.ts-cmd { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ts-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--brand-50); color: var(--brand-600); }
.ts-ic .ic { width: 17px; height: 17px; }
.ts-ic.hot { background: var(--hot-50); color: var(--hot); }
.ts-go { margin-left: auto; color: var(--muted); opacity: 0; transition: opacity .12s ease; }
.ts-item:hover .ts-go, .ts-item.cur .ts-go { opacity: 1; }
.ts-hint { margin: 6px 10px 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* ——— Панель «Все разделы» ——— */
.top-launch { position: relative; flex: none; }
.top-launch [data-launcher][aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.launcher { position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; width: min(720px, calc(100vw - 120px)); max-height: min(78vh, 640px); overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-lg); }
.launcher[hidden] { display: none; }
.ln-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ln-head h3 { margin: 0; font-size: 17px; }
.ln-head kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; font: 600 11px/1.4 Inter, sans-serif; }
.ln-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 20px; }
.ln-group h4 { margin: 0 0 8px; color: var(--muted); font: 700 10.5px/1.4 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.ln-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ln-tile { display: flex; align-items: center; gap: 10px; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 13.5px; text-decoration: none !important; transition: border-color .15s ease, background .15s ease; }
.ln-tile:hover { border-color: var(--brand-100); background: var(--brand-50); }
.ln-tile b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-ic { flex: none; display: grid; place-items: center; color: var(--ink-2); }
.ln-ic .ic { width: 18px; height: 18px; }
.ln-tile:hover .ln-ic { color: var(--brand-600); }
.ln-go { color: var(--muted); transition: transform .15s ease; }
.ln-tile:hover .ln-go { transform: translateX(2px); color: var(--brand-600); }
@media (max-width: 1099px) { .ln-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .top-launch { display: none; } }

/* ——— Задачи: цвета периодов ——— */
.tone-hot { --tone: var(--hot); --tone-50: var(--hot-50); }
.tone-warn { --tone: var(--warn); --tone-50: var(--warn-50); }
.tone-brand { --tone: var(--brand); --tone-50: var(--brand-50); }
.tone-ok { --tone: var(--ok); --tone-50: var(--ok-50); }
.tone-muted { --tone: #b9b5c6; --tone-50: var(--bg); }

/* Круглая галочка «выполнено» */
.tq-check { position: relative; display: inline-block; flex: none; width: 20px; height: 20px; cursor: pointer; }
.tq-check input { position: absolute; z-index: 1; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tq-check span { position: absolute; inset: 0; border: 1.6px solid #c9c5d4; border-radius: 50%; background: var(--card); transition: border-color .15s ease, background-color .15s ease; }
.tq-check:hover span { border-color: var(--ok); }
.tq-check input:checked + span { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Тип задачи — цветной значок */
.tq-kind { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.tq-kind .ic { width: 16px; height: 16px; }
.k-task { background: var(--brand-50); color: var(--brand-600); }
.k-call { background: rgba(22, 163, 74, .12); color: #16a34a; }
.k-meeting { background: rgba(217, 119, 6, .13); color: #d97706; }
.k-message { background: rgba(37, 99, 235, .12); color: #2563eb; }

/* ——— Страница задач ——— */
.tq { height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); gap: 12px; padding: 18px 22px 0; background: var(--bg); }
.tq-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tq-h { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.tq-h h1 { margin: 0; font: 800 24px/1.2 var(--head); }
.tq-search { display: flex; align-items: center; gap: 8px; width: 260px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); }
.tq-search .ic { flex: none; width: 16px; height: 16px; }
.tq-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 500 13.5px/1 Inter, 'Golos Text', sans-serif; }
.tq-search:focus-within { border-color: var(--brand-100); box-shadow: 0 0 0 3px var(--brand-50); }
.tq-views, .tq-scopes { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tq-views button, .tq-scope { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font: 600 13px/1 Inter, 'Golos Text', sans-serif; cursor: pointer; white-space: nowrap; }
.tq-views .ic { width: 16px; height: 16px; }
.tq-views button.on { background: var(--brand-50); color: var(--brand-600); }
.tq-scope i { padding: 2px 6px; border-radius: 99px; background: var(--bg); color: var(--muted); font: 700 11px/1.2 Inter, sans-serif; font-style: normal; }
.tq-scope.on { background: var(--brand); color: #fff; }
.tq-scope.on i { background: rgba(255, 255, 255, .2); color: #fff; }
.tq-new { height: 38px; border-radius: 12px; }
.tq-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tq-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px 12px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.tq-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone); }
.tq-stat:hover { transform: translateY(-1px); }
.tq-stat b { font: 800 26px/1.1 var(--head); }
.tq-stat span { color: var(--muted); font-size: 12.5px; }
.tq-stat.tone-hot b { color: var(--hot); }
.tq-stat.tone-warn b { color: var(--warn); }
.tq-stat.tone-brand b { color: var(--brand-600); }
.tq-stat.on { border-color: var(--tone); box-shadow: 0 0 0 3px var(--tone-50); }
.tq-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tq-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.tq-kf { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 12.5px/1 Inter, 'Golos Text', sans-serif; cursor: pointer; }
.tq-kf .ic { width: 15px; height: 15px; }
.tq-kf.on { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand-600); }
.tq-quick { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--brand); }
.tq-quick:focus-within { border-color: var(--brand-100); box-shadow: 0 0 0 3px var(--brand-50); }
.tq-quick > .ic { flex: none; width: 18px; height: 18px; }
.tq-quick input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 500 14.5px/1 Inter, 'Golos Text', sans-serif; }
.tq-quick-hint { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand-600); font: 600 12px/1 Inter, sans-serif; white-space: nowrap; }
.tq-quick-hint[hidden] { display: none; }
.tq-quick-hint .ic { width: 14px; height: 14px; }
.tq-body { min-height: 0; display: grid; grid-template-columns: minmax(380px, 4fr) minmax(0, 5fr); gap: 16px; }
.tq-items, .tq-detail { min-height: 0; overflow-y: auto; padding-bottom: 24px; display: flex; flex-direction: column; }
.tq-items { gap: 6px; }
.tq-detail { gap: 12px; }
.tq[data-view="board"] .tq-body { grid-template-columns: minmax(0, 1fr); }
.tq[data-view="board"] .tq-detail { display: none; }
.tq-back { display: none; align-self: flex-start; }
.tq-group { display: flex; align-items: center; gap: 8px; margin: 8px 2px 2px; font-size: 13px; }
.tq-group i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.tq-group span { color: var(--muted); font-weight: 600; }
.tq-rows { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tq-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 16px; border-top: 1px solid var(--line); cursor: pointer; outline: none; }
.tq-row:first-child { border-top: 0; }
.tq-row:hover, .tq-row:focus-visible { background: var(--bg); }
.tq-row::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; }
.tq-row.b-overdue::before { background: var(--hot); }
.tq-row.b-today::before { background: var(--warn); }
.tq-row.on { background: var(--brand-50); }
.tq-row.done .tq-row-main b { color: var(--muted); text-decoration: line-through; }
.tq-row-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tq-row-main b { display: flex; align-items: center; gap: 5px; overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.tq-row-main small, .tq-card small { display: flex; align-items: center; gap: 8px; overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; }
.tq-fire { display: inline-grid; flex: none; color: var(--hot); font-style: normal; }
.tq-fire .ic { width: 15px; height: 15px; }
.tq-client { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 600; }
.tq-client .brand-ic { width: 14px; height: 14px; }
.tq-cl, .tq-deal { display: inline-flex; align-items: center; gap: 3px; }
.tq-cl .ic, .tq-deal .ic { width: 13px; height: 13px; }
.tq-cl.ok { color: var(--ok); }
.tq-due { flex: none; color: var(--ink-2); font: 600 12.5px/1 Inter, sans-serif; white-space: nowrap; }
.tq-due.hot { color: var(--hot); }
.tq-due.warn { color: var(--warn); }
.tq-none { margin-top: 40px; }

/* Доска по срокам — перетаскивание меняет срок */
.tq-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; height: 100%; overflow-x: auto; }
.tq-col { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: background-color .15s ease, border-color .15s ease; }
.tq-col > header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 3px solid var(--tone); font-size: 13.5px; }
.tq-col > header i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.tq-col > header span { margin-left: auto; color: var(--muted); font-weight: 700; }
.tq-col.focus { box-shadow: 0 0 0 3px var(--tone-50); }
.tq-col.over { border-color: var(--brand-100); background: var(--brand-50); }
.tq-col-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.tq-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(22, 19, 31, .04); cursor: grab; transition: border-color .15s ease, transform .15s ease; outline: none; }
.tq-card:hover, .tq-card:focus-visible { border-color: var(--brand-100); transform: translateY(-1px); }
.tq-card.drag { opacity: .45; }
.tq-card.hi { border-left: 3px solid var(--hot); }
.tq-card-top { display: flex; align-items: center; gap: 8px; }
.tq-card-top .tq-kind { width: 24px; height: 24px; border-radius: 7px; }
.tq-card-top .tq-kind .ic { width: 14px; height: 14px; }
.tq-card-top .tq-check { margin-left: auto; }
.tq-card b { display: flex; gap: 4px; font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.tq-card small { flex-wrap: wrap; font-size: 11.5px; white-space: normal; }
.tq-card footer { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; }
.tq-col-add { display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 34px; border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--muted); font: 600 12.5px/1 Inter, sans-serif; cursor: pointer; }
.tq-col-add:hover { border-color: var(--brand-100); color: var(--brand-600); }
.tq-col-add .ic { width: 14px; height: 14px; }
.tq-col-empty { margin: 12px 0; color: var(--muted); font-size: 12.5px; text-align: center; }

/* Выбранная задача */
.tq-d { display: flex; flex-direction: column; gap: 14px; }
.tq-d-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tq-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--bg); color: var(--ink-2); font: 600 12px/1 Inter, sans-serif; }
.tq-pill .ic { width: 13px; height: 13px; }
.tq-pill.tone-hot, .tq-pill.tone-warn, .tq-pill.tone-brand, .tq-pill.tone-ok { background: var(--tone-50); color: var(--tone); }
.tq-d-actions { display: flex; gap: 4px; margin-left: auto; }
.tq-d h2 { margin: 0; font: 800 22px/1.3 var(--head); }
.tq-d-text { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tq-d-text a { color: var(--brand-600); }
.tq-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.tq-props > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tq-props dt { color: var(--muted); font: 700 10.5px/1.3 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.tq-props dd { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 13.5px; }
.tq-props dd .muted { font-size: 12px; }
.tq-d-check { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.tq-d-item { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.tq-d-item.done { color: var(--muted); text-decoration: line-through; }
.tq-d-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.tq-move { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.tq-move button { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 12px/1 Inter, sans-serif; cursor: pointer; }
.tq-move button:hover { border-color: var(--brand-100); color: var(--brand-600); }
.tq-empty { flex: 1; height: auto; min-height: 320px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.te-check h4, .tq-d-check h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.te-check h4 .ic, .tq-d-check h4 .ic { width: 17px; height: 17px; color: var(--muted); }
.te-check h4 span, .tq-d-check h4 span { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 600; }
.te-bar { height: 5px; overflow: hidden; border-radius: 99px; background: var(--bg); }
.te-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ok); transition: width .2s ease; }

/* ——— Панель задачи (как в Битрикс24): справа на всю высоту ——— */
.te-wrap { position: fixed; z-index: 90; inset: 0; }
.te-back { position: absolute; inset: 0; background: rgba(22, 19, 31, .32); opacity: 0; transition: opacity .2s ease; }
.te { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(880px, 100vw); background: var(--card); box-shadow: -20px 0 60px rgba(22, 19, 31, .18); opacity: 0; transform: translateX(40px); transition: transform .22s ease, opacity .22s ease; }
.te-wrap.on .te-back { opacity: 1; }
.te-wrap.on .te { opacity: 1; transform: none; }
.te-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.te-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.te-kind { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 13px/1 Inter, 'Golos Text', sans-serif; cursor: pointer; }
.te-kind .ic { width: 16px; height: 16px; }
.te-kind.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.te-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; flex: 1; min-height: 0; overflow: hidden; }
.te-main { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 22px 26px 30px; }
.te-title { overflow: hidden; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 750 24px/1.3 var(--head); resize: none; }
.te-title::placeholder { color: #b9b5c6; }
.te-details { min-height: 110px; overflow: hidden; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; outline: 0; background: var(--bg); color: var(--ink); font: 400 14.5px/1.55 var(--font); resize: none; }
.te-details:focus { border-color: var(--brand-100); background: var(--card); box-shadow: 0 0 0 3px var(--brand-50); }
.te-check { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.te-items { display: flex; flex-direction: column; gap: 2px; }
.te-item { display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 8px; }
.te-item:hover { background: var(--bg); }
.te-item-text { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 14px/1.4 var(--font); }
.te-item.done .te-item-text { color: var(--muted); text-decoration: line-through; }
.te-item .icon-btn { opacity: 0; }
.te-item:hover .icon-btn, .te-item:focus-within .icon-btn { opacity: 1; }
.te-add { padding: 9px 12px; border: 1px dashed var(--line); border-radius: 10px; outline: 0; background: none; color: var(--ink); font: 14px/1.4 var(--font); }
.te-add:focus { border-style: solid; border-color: var(--brand); }
.te-side { display: flex; flex-direction: column; gap: 18px; overflow-y: auto; padding: 20px; border-left: 1px solid var(--line); background: var(--bg); }
.te-field { display: flex; flex-direction: column; gap: 8px; }
.te-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 700 11px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.te-label .ic { width: 14px; height: 14px; }
.te-due { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.te-due b { font-size: 17px; font-weight: 750; }
.te-due small { color: var(--muted); font-size: 12.5px; }
.te-due.hot b { color: var(--hot); }
.te-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.te-chip { height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 12.5px/1 Inter, 'Golos Text', sans-serif; cursor: pointer; }
.te-chip:hover { border-color: var(--brand-100); }
.te-chip.on { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand-600); }
.te-when { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 6px; }
.te-when input, .te-side select, .te-find input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--card); color: var(--ink); font: 14px/1 var(--font); }
.te-when input:focus, .te-side select:focus, .te-find input:focus { border-color: var(--brand); }
.te-people { display: flex; flex-wrap: wrap; gap: 6px; }
.te-person { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 12.5px/1 Inter, sans-serif; cursor: pointer; }
.te-person.on { border-color: var(--brand); background: var(--brand-50); color: var(--brand-600); }
.te-client { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.te-client b { flex: 1; min-width: 0; overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.te-find { position: relative; }
.te-found { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-lg); }
.te-found[hidden] { display: none; }
.te-found .muted { margin: 8px; }
.te-found-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.te-found-row:hover { background: var(--bg); }
.te-found-row > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.te-found-row b { font-size: 13px; }
.te-found-row small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.te-flag { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; }
.te-flag input { display: none; }
.te-flag .ic { flex: none; width: 20px; height: 20px; color: var(--muted); }
.te-flag span { display: flex; flex-direction: column; gap: 2px; }
.te-flag b { font-size: 13.5px; }
.te-flag small { color: var(--muted); font-size: 12px; }
.te-flag.on { border-color: transparent; background: var(--hot-50); }
.te-flag.on .ic { color: var(--hot); }
.te-meta { margin: 0; color: var(--muted); font-size: 12px; }
.te-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.te-keys { color: var(--muted); font-size: 12px; }
.te-keys kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; font: 600 11px/1.4 Inter, sans-serif; }
.te-del { margin-left: auto; color: var(--hot); }
.te-del .ic { width: 16px; height: 16px; }

@media (max-width: 1279px) { .tq-search { width: 200px; } .tq-views span { display: none; } }
@media (max-width: 1099px) {
  .tq-body { grid-template-columns: minmax(0, 1fr); }
  .tq-detail { display: none; }
  .tq-open .tq-items, .tq-open .tq-stats, .tq-open .tq-quick, .tq-open .tq-bar { display: none; }
  .tq-open .tq-detail { display: flex; }
  .tq-open .tq-back { display: inline-flex; }
}
@media (max-width: 768px) {
  .tq { padding: 12px 12px 0; gap: 10px; }
  .tq-search { order: 5; width: 100%; }
  .tq-new span, .tq-quick .btn, .tq-row .avatar, .tq-kf span { display: none; }
  .tq-stats { display: flex; overflow-x: auto; scrollbar-width: none; }
  .tq-stat { flex: 0 0 120px; }
  .tq-props { grid-template-columns: minmax(0, 1fr); }
  .te-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .te-main, .te-side { overflow: visible; }
  .te-side { border-left: 0; border-top: 1px solid var(--line); }
  .te-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) { .te, .te-back, .tq-card, .tq-stat { transition: none; } }

/* ——— Задачи: сводка сверху, страница прокручивается, список и задача — на высоту экрана ——— */
.tq { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 16px; }
.tq-body { flex: none; height: calc(100vh - var(--top) - 24px); height: calc(100dvh - var(--top) - 24px); min-height: 480px; }
.tq-dash { display: flex; flex-direction: column; gap: 10px; }
.tq-dash:empty { display: none; }
.tq-dash-head { display: flex; align-items: baseline; gap: 10px; }
.tq-dash-head h2 { margin: 0; font: 750 15px/1.2 var(--head); }
.tq-dash-head .muted { font-size: 12.5px; }
.tq-dash-head .link { margin-left: auto; font-size: 12.5px; }
.tq-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tq-stat-t { color: var(--ink-2); font-size: 12.5px; font-weight: 650; }
.tq-stat small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.tq-stat.zero b { color: var(--muted) !important; }
.tq-panels { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tq-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.tq-panel h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13.5px; }
.tq-panel h3 .ic { width: 16px; height: 16px; color: var(--muted); }
.tq-focus h3 .ic { color: var(--hot); }
.tq-panel h3 span { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 600; }
.tq-calm { display: flex; align-items: center; gap: 8px; margin: auto 0; padding: 12px; border-radius: 12px; background: var(--ok-50); color: var(--ok); font-size: 13px; }
.tq-calm .ic { flex: none; width: 18px; height: 18px; }
.tq-fl { display: flex; flex-direction: column; gap: 2px; }
.tq-fl-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tq-fl-row:hover { background: var(--bg); }
.tq-fl-row .tq-kind { width: 26px; height: 26px; border-radius: 8px; }
.tq-fl-row .tq-kind .ic { width: 14px; height: 14px; }
.tq-fl-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.tq-fl-main b { display: flex; align-items: center; gap: 4px; overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.tq-fl-main small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.tq-fl-tag { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--bg); color: var(--ink-2); font: 650 11.5px/1.2 Inter, sans-serif; white-space: nowrap; }
.tq-fl-tag.hot { background: var(--hot-50); color: var(--hot); }
.tq-fl-tag.warn { background: var(--warn-50); color: var(--warn); }
.tq-load { display: flex; flex-direction: column; gap: 4px; }
.tq-load-row { display: grid; grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 4px 6px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tq-load-row:hover, .tq-load-row.on { background: var(--bg); }
.tq-load-row.on { box-shadow: inset 0 0 0 1px var(--brand-100); }
.tq-load-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tq-load-name b { overflow: hidden; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tq-load-name .tq-kind { width: 22px; height: 22px; border-radius: 7px; }
.tq-load-name .tq-kind .ic { width: 13px; height: 13px; }
.tq-load-track { display: block; height: 10px; }
.tq-load-bar { display: flex; height: 100%; overflow: hidden; border-radius: 99px; gap: 2px; }
.tq-load-bar i, .tq-legend i { display: block; background: var(--brand-100); }
.tq-load-bar i { height: 100%; }
.tq-load-bar i.hot, .tq-legend i.hot { background: var(--hot); }
.tq-load-bar i.warn, .tq-legend i.warn { background: var(--warn); }
.tq-load-n { display: flex; align-items: baseline; gap: 6px; font-size: 13px; white-space: nowrap; }
.tq-load-n em { color: var(--hot); font-size: 11px; font-style: normal; font-weight: 650; }
.tq-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; color: var(--muted); font-size: 11.5px; }
.tq-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tq-legend i { width: 8px; height: 8px; border-radius: 2px; }
.tq-legend-sep { margin-left: auto; }
.tq-week-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tq-week-n { display: flex; flex-direction: column; }
.tq-week-n b { font: 800 30px/1 var(--head); }
.tq-week-n small { color: var(--muted); font-size: 12px; }
.tq-ring { --c: var(--ok); position: relative; display: grid; place-items: center; align-content: center; width: 66px; height: 66px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--bg) 0); }
.tq-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--card); }
.tq-ring > * { position: relative; }
.tq-ring span { font: 800 15px/1 var(--head); }
.tq-ring small { color: var(--muted); font-size: 9.5px; }
.tq-ring.warn { --c: var(--warn); }
.tq-ring.hot { --c: var(--hot); }
.tq-ring.none { --c: var(--line); }
.tq-week-facts { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12px; }
.tq-week-facts span { display: inline-flex; align-items: center; gap: 4px; }
.tq-week-facts .ic { width: 14px; height: 14px; }
.tq-week-facts b { color: var(--ink); }
.tq-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 6px; height: 74px; }
.tq-bars span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; }
.tq-bars i { display: block; width: 100%; max-width: 22px; border-radius: 6px 6px 3px 3px; background: var(--brand-100); }
.tq-bars span.today i { background: var(--brand); }
.tq-bars em { color: var(--ink-2); font-size: 10.5px; font-style: normal; font-weight: 700; }
.tq-bars small { color: var(--muted); font-size: 10.5px; }
.tq-filters { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--brand-50); color: var(--ink-2); font-size: 13px; }
.tq-filters .link { margin-left: auto; }

/* Учёт времени */
.tq-tm { display: inline-flex; align-items: center; gap: 3px; }
.tq-tm .ic { width: 13px; height: 13px; }
.tq-tm b { font-weight: 600; }
.tq-tm.live { color: var(--ok); }
.tq-tm.over { color: var(--hot); }
.tq-time { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.tq-time-head { display: flex; align-items: baseline; gap: 8px; }
.tq-time-head h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.tq-time-head h4 .ic { width: 17px; height: 17px; color: var(--muted); }
.tq-time-sum { margin-left: auto; font-size: 13px; }
.tq-time-sum b { font: 800 17px/1 var(--head); }
.tq-time-sum.over b { color: var(--hot); }
.te-bar.over i { background: var(--hot); }
.tq-time-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tq-timer-on { border: 1px solid transparent; background: var(--ok-50); color: var(--ok); font-variant-numeric: tabular-nums; }
.tq-rec { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ok); animation: tq-rec 1.2s ease-in-out infinite; }
@keyframes tq-rec { 50% { opacity: .3; } }
.tq-add { display: flex; gap: 4px; }
.tq-add button { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 12px/1 Inter, sans-serif; cursor: pointer; }
.tq-add button:hover { border-color: var(--brand-100); color: var(--brand-600); }
.tq-cycle { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ok); font-size: 13px; }
.tq-cycle .ic { width: 16px; height: 16px; }

@media (max-width: 1279px) { .tq-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tq-week { grid-column: 1 / -1; } }
@media (max-width: 1099px) { .tq-body { height: auto; min-height: 0; } .tq-items, .tq-detail { overflow: visible; } }
@media (max-width: 768px) {
  .tq-kpis { display: flex; overflow-x: auto; scrollbar-width: none; }
  .tq-kpis .tq-stat { flex: 0 0 140px; }
  .tq-panels { grid-template-columns: minmax(0, 1fr); }
  .tq-load-row { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) { .tq-rec { animation: none; } }
@media (max-width: 1099px) { .tq-open .tq-dash { display: none; } }
.brand-g { background: #3bb54a; color: #fff; font: 800 8px/1 Inter, sans-serif; font-style: normal; }
.cm-keep { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; }
.cm-keep input { margin-top: 3px; flex: none; }
.cm-keep span { display: flex; flex-direction: column; gap: 2px; }
.cm-keep b { font-size: 13.5px; }
.cm-keep small { color: var(--muted); font-size: 12px; line-height: 1.4; }
/* Что показывать из аккаунта Telegram: папки и группы */
.cm-filter { display: grid; gap: 10px; padding: 14px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cm-filter .cm-label { margin: 0; }
.cm-filter > p { margin: 0; }
.cm-filter-modes { display: flex; flex-wrap: wrap; justify-self: start; max-width: 100%; }
.cm-filter-modes .seg-btn { flex: 1 1 auto; }
.cm-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.cm-folder { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.cm-folder:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.cm-folder input { margin-top: 3px; flex: none; }
.cm-folder span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cm-folder b { font-size: 13px; overflow-wrap: anywhere; }
.cm-folder i { font-style: normal; }
.cm-folder small { color: var(--muted); font-size: 11.5px; }
.cm-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.att-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.att-nospace { padding: 2px 8px; border-radius: 999px; background: var(--warn-50); color: var(--warn); font-size: 11.5px; font-weight: 600; text-decoration: none !important; }

/* ——— Хранилище файлов переписки (Интеграции) ——— */
.st-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-top: 4px; }
.st-meter { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.st-meter-top { display: flex; align-items: baseline; gap: 8px; }
.st-meter-top b { font: 800 24px/1 var(--head); }
.st-meter-top span { color: var(--muted); font-size: 13px; }
.st-bar { height: 10px; overflow: hidden; border-radius: 99px; background: var(--bg); }
.st-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ok); transition: width .3s ease; }
.st-meter.tone-warn .st-bar i { background: var(--warn); }
.st-meter.tone-hot .st-bar i { background: var(--hot); }
.st-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.st-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); font-size: 12.5px; }
.st-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-counts > div { display: flex; flex-direction: column; justify-content: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.st-counts b { font: 800 20px/1.1 var(--head); }
.st-counts span { color: var(--muted); font-size: 12px; }
.st-counts .hot b { color: var(--hot); }
.st-warn { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--hot-50); color: var(--hot); font-size: 13px; }
.st-warn .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.st-sub { margin: 18px 0 10px; font-size: 14px; }
.st-cloud .st-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; font: 800 13px/1 Inter, sans-serif; }
.st-cloud.on { border-color: var(--brand-100); background: var(--brand-50); }
.st-packs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.st-pack { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.st-pack b { font-size: 15px; }
.st-pack span { margin-left: auto; color: var(--muted); font-size: 13px; }
.st-pack:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
@media (max-width: 860px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }

/* ——— Переключатель проектов в шапке ——— */
.proj { position: relative; flex: none; }
.proj-btn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; max-width: 220px; }
.proj-btn:hover, .proj-btn[aria-expanded="true"] { border-color: var(--brand-100); background: var(--brand-50); }
.proj-btn > .ic { flex: none; width: 14px; height: 14px; color: var(--muted); }
.proj-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; overflow: hidden; border-radius: 9px; color: #fff; font: 800 12px/1 Inter, sans-serif; }
.proj-av img { width: 100%; height: 100%; object-fit: cover; }
.proj-name { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.15; }
.proj-name small { color: var(--muted); font-size: 10.5px; }
.proj-name b { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.proj-menu { position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; width: 320px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-lg); }
.proj-menu[hidden] { display: none; }
.proj-head { margin: 6px 10px 6px; color: var(--muted); font: 700 10.5px/1.4 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.proj-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.proj-item:hover { background: var(--bg); }
.proj-item.on { background: var(--brand-50); }
.proj-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.proj-info b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.proj-info small { color: var(--muted); font-size: 11.5px; }
.proj-wait { padding: 1px 7px; border-radius: 99px; background: var(--hot-50); color: var(--hot); font: 700 11px/1.5 Inter, sans-serif; font-style: normal; }
.proj-check { flex: none; width: 16px; height: 16px; color: var(--brand-600); }
.proj-hint { margin: 6px 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.proj-new { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 38px; margin-top: 4px; border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--brand-600); font: 600 13px/1 Inter, sans-serif; cursor: pointer; }
.proj-new:hover { border-color: var(--brand-100); background: var(--brand-50); }
.proj-new .ic { width: 15px; height: 15px; }
@media (max-width: 1279px) { .proj-name small { display: none; } .proj-btn { max-width: 170px; } }
@media (max-width: 768px) { .proj-name { display: none; } .proj-btn { padding-right: 6px; } .proj-menu { position: fixed; top: calc(var(--top) + 6px); left: 12px; right: 12px; width: auto; } }
.te-hint { color: var(--muted); font-size: 12px; line-height: 1.4; }
.te-hint.warn { color: var(--warn); }

/* ——— «Напомнить» в шапке чата ——— */
.rm-wrap { position: relative; }
.rm-pop { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: 290px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-lg); }
.rm-pop[hidden] { display: none; }
.rm-head { margin: 6px 10px; color: var(--muted); font: 700 10.5px/1.4 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.rm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 600 13px/1.2 Inter, 'Golos Text', sans-serif; text-align: left; cursor: pointer; }
.rm-item:hover { background: var(--bg); }
.rm-item .ic { flex: none; width: 16px; height: 16px; color: var(--brand-600); }
.rm-item small { margin-left: auto; color: var(--muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.rm-more { margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; color: var(--brand-600); }

/* ——— Вложения в чате: фото, видео, документы открываются в окне просмотра ——— */
button.att { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: zoom-in; }
.att-img img { transition: transform .15s ease, filter .15s ease; }
.att-img:hover img { filter: brightness(.95); transform: scale(1.01); }
.att-video { position: relative; display: block; overflow: hidden; border-radius: 10px; background: #000; cursor: pointer; }
.att-video video { display: block; max-width: 260px; max-height: 260px; opacity: .9; }
.att-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.att-play .ic { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
button.att-file { display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 300px; padding: 8px 12px 8px 8px; border-radius: 12px; background: rgba(0, 0, 0, .05); cursor: pointer; }
button.att-file:hover { background: rgba(0, 0, 0, .08); }
.msg-out button.att-file { background: rgba(255, 255, 255, .16); }
.att-file-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); }
.att-file-ic .ic { width: 18px; height: 18px; }
.att-pdf .att-file-ic { background: #fdecec; color: #dc2626; }
.att-file-ic b { font: 800 10.5px/1 Inter, sans-serif; letter-spacing: .02em; }
.att-file-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.att-file-main b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.att-file-main small { opacity: .7; font-size: 11.5px; }

/* ——— Окно просмотра ——— */
body.mv-open { overflow: hidden; }
.mv { position: fixed; z-index: 120; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: #0c0a14; color: #fff; opacity: 0; transition: opacity .18s ease; }
.mv.on { opacity: 1; }
.mv-top { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 12px 18px; } /* длинное имя файла не раздвигает окно шире экрана */
.mv-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mv-info b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.mv-info span { color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.mv-actions { display: flex; gap: 6px; }
.mv-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; text-decoration: none !important; transition: background .15s ease; }
.mv-btn:hover { background: rgba(255, 255, 255, .18); }
.mv-btn .ic { width: 19px; height: 19px; }
.mv-stage { display: grid; place-items: center; min-height: 0; padding: 0 72px 12px; overflow: hidden; }
.mv-stage.zoomed { overflow: auto; place-items: start center; }
.mv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: zoom-in; user-select: none; }
.mv-img.zoom { max-width: none; max-height: none; cursor: zoom-out; }
.mv-stage-image { position: relative; touch-action: none; } /* щипок увеличивает фото, а не всю страницу */
/* фото целиком в окне по ширине и высоте: рамка = вся область, картинка вписана (проценты высоты в сетке телефонные браузеры не считают) */
.mv-stage-image:not(.zoomed) .mv-img { position: absolute; top: 0; left: var(--mv-side, 72px); width: calc(100% - 2 * var(--mv-side, 72px)); height: calc(100% - var(--mv-bottom, 12px)); max-width: none; max-height: none; border-radius: 0; }
.mv-video { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; outline: none; }
.mv-stage-pdf { place-items: stretch; }
.mv-pdf { width: 100%; height: 100%; border: 0; border-radius: 10px; background: #fff; }
.mv-file { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 44px; border-radius: 20px; background: rgba(255, 255, 255, .06); text-align: center; }
.mv-file b { max-width: 360px; overflow-wrap: anywhere; font-size: 16px; }
.mv-file span { color: rgba(255, 255, 255, .6); font-size: 13px; }
.mv-file-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: rgba(255, 255, 255, .1); }
.mv-file-ic .ic { width: 34px; height: 34px; }
.mv-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background .15s ease; }
.mv-nav:hover { background: rgba(255, 255, 255, .22); }
.mv-nav .ic { width: 22px; height: 22px; }
.mv-prev { left: 14px; }
.mv-next { right: 14px; }
.mv-next .ic { transform: rotate(180deg); }
.mv-strip { display: flex; justify-content: safe center; gap: 6px; padding: 10px 18px 16px; overflow-x: auto; scrollbar-width: none; }
.mv-strip::-webkit-scrollbar { display: none; }
.mv-thumb { position: relative; flex: none; width: 56px; height: 56px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, .08); cursor: pointer; opacity: .55; transition: opacity .15s ease, border-color .15s ease; }
.mv-thumb:hover { opacity: .85; }
.mv-thumb.on { border-color: #fff; opacity: 1; }
.mv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mv-thumb-ic { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; }
.mv-thumb-ic .ic { width: 20px; height: 20px; }
.mv-thumb-ic b { font: 800 10px/1 Inter, sans-serif; }
.mv-thumb-ic.mv-pdf { background: rgba(220, 38, 38, .4); }
.mv-thumb-ic.mv-pdf .ic { display: none; }

/* ——— Медиа и файлы (галерея диалога) ——— */
.mg-wrap { position: fixed; z-index: 90; inset: 0; }
.mg-back { position: absolute; inset: 0; background: rgba(22, 19, 31, .32); opacity: 0; transition: opacity .18s ease; }
.mg { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(560px, 100vw); background: var(--card); box-shadow: -20px 0 60px rgba(22, 19, 31, .18); transform: translateX(30px); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.mg-wrap.on .mg-back { opacity: 1; }
.mg-wrap.on .mg { transform: none; opacity: 1; }
.mg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.mg-head h3 { margin: 0 0 2px; font-size: 17px; }
.mg-head .muted { font-size: 12.5px; }
.mg-tabs { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--line); }
.mg-tabs button { padding: 8px 12px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 600 13px/1 Inter, 'Golos Text', sans-serif; cursor: pointer; }
.mg-tabs button.on { border-bottom-color: var(--brand); color: var(--ink); }
.mg-tabs i { color: var(--muted); font-style: normal; font-size: 11.5px; }
.mg-body { flex: 1; overflow-y: auto; padding: 4px 16px 24px; }
.mg-month { margin: 14px 2px 8px; color: var(--muted); font: 700 11px/1.4 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px; }
.mg-cell { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: var(--bg); cursor: zoom-in; }
.mg-cell img, .mg-cell video { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.mg-cell:hover img, .mg-cell:hover video { transform: scale(1.04); }
.mg-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.mg-play .ic { width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
.mg-list { display: flex; flex-direction: column; gap: 2px; }
.mg-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mg-row:hover { background: var(--bg); }
.mg-row-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); }
.mg-row-ic.mv-pdf { background: #fdecec; color: #dc2626; }
.mg-row-ic b { font: 800 10.5px/1 Inter, sans-serif; }
.mg-row-ic .ic { width: 18px; height: 18px; }
.mg-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mg-row-main b { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mg-row-main small { color: var(--muted); font-size: 12px; }
.mg-empty { margin: 40px 0; color: var(--muted); text-align: center; }
@media (max-width: 768px) {
  .mv-stage { padding: 0 8px 8px; --mv-side: 8px; --mv-bottom: 8px; }
  .mv-nav { display: none; }
  .mv-top { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .mv, .mg, .mg-back { transition: none; } }
/* значок мессенджера никогда не растягивается в строке списка */
.brand-ic.brand-ic { flex: none; }
.mini-dlg .brand-ic.ch-badge { width: 20px; height: 20px; border-radius: 6px; }
.card-sec h4 .link { flex: none; white-space: nowrap; }

/* ——— Телефон: нижнее меню из матового стекла, экран под ним без подложки ——— */
@media (max-width: 768px) {
  :root { --navpad: calc(92px + env(safe-area-inset-bottom)); }
  .shell { grid-template-rows: var(--top) minmax(0, 1fr); }
  .shell > .screen { grid-row: 2; }
  /* контент уходит под стекло; прокрутка заканчивается над меню */
  .screen:not(.screen-chat):not(.screen-tasks) { padding-bottom: var(--navpad); }
  .dialogs, .tq { padding-bottom: var(--navpad); }
  .tabs-top {
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 10px 34px rgba(41, 34, 62, .18), inset 0 1px 0 rgba(255, 255, 255, .7);
  }
  :root[data-theme="dark"] .tabs-top { background: rgba(28, 26, 44, .55); border-color: rgba(255, 255, 255, .09); box-shadow: 0 10px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }
  .tab-top.active { background: rgba(115, 96, 242, .14); }
  .tab-top.active, .mobile-more.active { color: var(--brand-600); }
  /* внутри открытого чата меню прячем, как в Telegram, — чтобы не закрывало поле ответа */
  .shell:has(.inbox[data-pane="chat"]) .tabs-top, .shell:has(.inbox[data-pane="card"]) .tabs-top { display: none; }
  .shell:has(.inbox[data-pane="chat"]) .dialogs { padding-bottom: 0; }

  /* «Ещё»: шторка со всеми разделами */
  .mm-sheet { max-height: calc(100dvh - var(--top) - var(--navpad) - 12px); }
  .mm-sheet .modal-body { gap: 12px; }
  .mm-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--muted); font: 500 14px/1 Inter, 'Golos Text', sans-serif; text-align: left; }
  .mm-search .ic { width: 18px; height: 18px; }
  .mm-proj { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; text-align: left; }
  .mm-proj > span:not(.proj-av) { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
  .mm-proj small { color: var(--muted); font-size: 11px; }
  .mm-proj b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .mm-proj em { color: var(--brand-600); font-size: 12.5px; font-style: normal; font-weight: 600; }
  .mm-group h4 { margin: 4px 2px 8px; color: var(--muted); font: 700 10.5px/1.4 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
  .mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mm-tile { display: flex; align-items: center; gap: 10px; min-width: 0; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); color: var(--ink); font: 600 13px/1.2 Inter, 'Golos Text', sans-serif; text-align: left; text-decoration: none !important; }
  .mm-tile:active { background: var(--brand-50); }
  .mm-tile .ic { flex: none; width: 18px; height: 18px; color: var(--brand-600); }
  .mm-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* поиск из «Ещё» — поле шапки поверх экрана */
  .top-search.mm-search-open { display: block !important; position: fixed; z-index: 80; top: 8px; left: 12px; right: 12px; flex: none; }
  .top-search.mm-search-open .ts-field { height: 44px; box-shadow: var(--shadow-lg); }
  .top-search.mm-search-open .ts-drop { width: 100%; max-height: calc(100dvh - 80px); }
}
.proj-av { flex: none; }
@media (max-width: 768px) {
  .shell { height: var(--vvh, 100dvh); }
  /* поле ответа ровно над клавиатурой и над полосой жестов */
  .composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .composer-row { align-items: center; }
}
.att-voice { flex-direction: column; align-items: stretch; gap: 4px; }
.att-voice-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.att-voice-row audio { flex: 1; min-width: 0; }
.att-totext { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 2px 4px; border: 0; background: none; color: var(--brand-600); font: 600 12px/1.3 Inter, 'Golos Text', sans-serif; white-space: nowrap; cursor: pointer; }
.att-totext .ic { width: 13px; height: 13px; }
.msg-out .att-totext { color: inherit; opacity: .85; }
@media (max-width: 768px) {
  /* шапка телефона: логотип, «на что обратить внимание», профиль; проект, тема и уведомления — в «Ещё» */
  .topbar .proj, .topbar [data-theme-toggle], .topbar [data-notify-toggle], .topbar [data-help] { display: none; }
  .topbar { gap: 8px; }
  .top-attention { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
  .mm-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 380px) { .topbar .brand b, .topbar .brand > span { display: none; } }
@media (max-width: 768px) {
  /* заголовок и поиск сворачиваются при прокрутке списка вниз, фильтры остаются */
  .list-head .inbox-list-title, .list-head .list-head-row { max-height: 120px; overflow: hidden; transition: max-height .25s ease, opacity .2s ease, margin .25s ease; }
  .list-head.head-hidden .inbox-list-title, .list-head.head-hidden .list-head-row { max-height: 0; opacity: 0; margin: 0; }
  .list-head.head-hidden { gap: 0; padding-top: 8px; padding-bottom: 8px; }
  .list-head { transition: padding .25s ease, gap .25s ease; }
}

/* ——— Новое сообщение: стеклянное окно по центру ——— */
.ip-wrap { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(20, 16, 36, .18); opacity: 0; transition: opacity .2s ease; }
.ip-wrap.on { opacity: 1; }
.ip-wrap.out { opacity: 0; }
.ip { position: relative; display: flex; flex-direction: column; gap: 12px; width: min(400px, 100%); padding: 20px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 26px;
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 24px 70px rgba(41, 34, 62, .28), inset 0 1px 0 rgba(255, 255, 255, .7); color: var(--ink);
  transform: translateY(14px) scale(.96); transition: transform .25s cubic-bezier(.2, .9, .3, 1.2), opacity .2s ease; }
.ip-wrap.on .ip { transform: none; }
.ip-wrap.out .ip { transform: translateY(10px) scale(.96); opacity: 0; }
:root[data-theme="dark"] .ip { background: rgba(30, 27, 48, .62); border-color: rgba(255, 255, 255, .1); box-shadow: 0 24px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); }
.ip-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: var(--ink-2); cursor: pointer; }
.ip-x:hover { background: rgba(0, 0, 0, .12); }
.ip-x .ic { width: 16px; height: 16px; }
.ip-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 99px; background: rgba(115, 96, 242, .14); color: var(--brand-600); font: 700 11.5px/1.2 Inter, sans-serif; }
.ip-tag .ic { width: 14px; height: 14px; }
.ip-tag i { padding: 0 6px; border-radius: 99px; background: var(--brand); color: #fff; font-style: normal; }
.ip-who { display: flex; align-items: center; gap: 12px; padding-right: 30px; }
.ip-av { width: 48px; height: 48px; font-size: 16px; }
.ip-name { display: flex; flex-direction: column; min-width: 0; }
.ip-name b { overflow: hidden; font-size: 17px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.ip-name small { color: var(--muted); font-size: 12.5px; }
.ip-text { margin: 0; padding: 12px 14px; border-radius: 16px 16px 16px 6px; background: rgba(255, 255, 255, .7); color: var(--ink); font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-theme="dark"] .ip-text { background: rgba(255, 255, 255, .07); }
.ip-more { margin: -4px 2px 0; color: var(--muted); font-size: 12.5px; }
.ip-actions { display: flex; gap: 8px; }
.ip-actions .btn { flex: 1; height: 42px; border-radius: 14px; }
.ip-foot { display: flex; justify-content: space-between; gap: 8px; }
.ip-foot button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: none; color: var(--muted); font: 500 12px/1.3 Inter, sans-serif; cursor: pointer; }
.ip-foot button:hover { color: var(--ink-2); }
.ip-foot .ic { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .ip, .ip-wrap { transition: none; } }

/* ——— Переписки: «Мессенджеры и период» ——— */
.chip-view { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; border-color: var(--brand-100); background: var(--brand-50); color: var(--brand-600); }
.chip-view .ic { width: 14px; height: 14px; }
.view-bar { display: flex; align-items: center; gap: 4px; min-width: 0; }
.view-bar[hidden] { display: none; }
.view-pill { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 12px; border: 1px solid var(--brand-100); border-radius: 999px; background: var(--brand-50); color: var(--brand-600); font: 600 12.5px/1 Inter, 'Golos Text', sans-serif; cursor: pointer; }
.view-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-pill .ic { flex: none; width: 14px; height: 14px; }
.view-x { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.view-x:hover { background: var(--bg); color: var(--ink); }
.view-x .ic { width: 14px; height: 14px; }
.vw-modal { max-width: 460px; }
.vw { display: flex; flex-direction: column; gap: 10px; }
.vw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; }
.vw-head h4 { margin: 0; font-size: 14px; }
.vw-head span, .vw-head small { font-size: 12px; color: var(--muted); }
.vw-channels { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.vw-ch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.vw-ch:has(input:checked) { border-color: var(--brand-100); background: var(--brand-50); }
.vw-ch input { position: absolute; opacity: 0; pointer-events: none; }
.vw-ch .brand-ic.ch-badge { width: 26px; height: 26px; border-radius: 8px; }
.vw-ch span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vw-ch b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.vw-ch small { color: var(--muted); font-size: 11.5px; }
.vw-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: #d9d6e3; transition: background .2s ease; }
.vw-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s ease; }
.vw-ch:has(input:checked) .vw-switch { background: var(--brand); }
.vw-ch:has(input:checked) .vw-switch::after { transform: translateX(16px); }
.vw-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.vw-period { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 12.5px/1 Inter, 'Golos Text', sans-serif; cursor: pointer; }
.vw-period.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.vw-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; transition: opacity .2s ease; }
.vw-dates.off { opacity: .45; pointer-events: none; }
.vw-dates label { display: flex; flex-direction: column; gap: 4px; }
.vw-dates span { color: var(--muted); font-size: 12px; font-weight: 600; }
.vw-dates input { height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: 14px/1 var(--font); outline: none; }
.vw-dates input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }

/* ——— Смахнуть чат → «Ответ не нужен» ——— */
.dlg-swipe { position: relative; border-radius: 14px; }
.dlg-swipe::before { content: '✓  Ответ не нужен'; position: absolute; inset: 2px 4px; display: flex; align-items: center; justify-content: flex-start; padding: 0 22px; border-radius: 14px; background: rgba(22, 163, 74, .14); color: var(--ok); font: 700 13.5px/1 Inter, 'Golos Text', sans-serif; opacity: 0; transition: opacity .15s ease, background .15s ease; }
.dlg-swipe[data-side="right"]::before { justify-content: flex-end; }
.dlg-swipe:has(.dlg[style*="translateX"])::before { opacity: 1; }
.dlg-swipe.ready::before { background: var(--ok); color: #fff; }
.dlg-swipe > .dlg { position: relative; z-index: 1; background: var(--card); transition: transform .25s cubic-bezier(.2, .9, .3, 1.1); touch-action: pan-y; }
/* окно подтверждения — в стиле окна «Новое сообщение» */
.ip.nr { align-items: center; text-align: center; }
.nr-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(22, 163, 74, .14); color: var(--ok); }
.nr-ic .ic { width: 28px; height: 28px; }
.ip.nr h3 { margin: 0; font-size: 19px; }
.nr-text { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.nr-last { align-self: stretch; text-align: left; -webkit-line-clamp: 3; }
.nr-note { margin: 0; color: var(--muted); font-size: 12px; }
.ip.nr .ip-actions { align-self: stretch; }

/* ——— Окно «Уведомления» ——— */
.nt-modal { max-width: 480px; }
.nt { display: flex; flex-direction: column; gap: 10px; }
.nt-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.nt-card > b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.nt-card > b .ic { width: 17px; height: 17px; }
.nt-card small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.nt-card .btn { align-self: flex-start; }
.nt-ok { border-color: transparent; background: var(--ok-50); }
.nt-ok > b { color: var(--ok); }
.nt-warn { border-color: transparent; background: var(--warn-50); }
.nt-warn > b { color: var(--warn); }
.nt-warn ol { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.nt-key { display: inline-block; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); font-size: 12px; }
.nt-row { display: flex; align-items: center; gap: 12px; }
.nt-ladder ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.nt-ladder li { display: flex; align-items: baseline; gap: 10px; }
.nt-ladder li i { flex: none; width: 52px; padding: 2px 0; border-radius: 99px; background: var(--brand-50); color: var(--brand-600); font: 700 11.5px/1.4 Inter, sans-serif; font-style: normal; text-align: center; }
.nt-ladder li:nth-child(3) i { background: var(--warn-50); color: var(--warn); }
.nt-ladder li:nth-child(4) i { background: var(--hot-50); color: var(--hot); }
.nt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-chip { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 12.5px/1 Inter, 'Golos Text', sans-serif; cursor: pointer; }
.nt-chip:hover { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand-600); }
.top-attention .att-busy { border-color: transparent; background: var(--warn-50); color: var(--warn); }
/* Звонок в Telegram с номера компании */
.nt-card > b .nt-tg { width: 18px; height: 18px; border-radius: 50%; }
.nt-qr { display: grid; place-items: center; min-height: 200px; padding: 8px; border-radius: 14px; background: #fff; }
.nt-qr img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.nt-input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; }
.nt-card small.nt-err { color: var(--hot); }
.nt-caller { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--brand-50); }
.nt-caller > span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.nt-caller small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-good { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 13.5px; font-weight: 600; }
.nt-good .ic { width: 16px; height: 16px; }
.nt-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: nt; font-size: 13px; color: var(--ink-2); }
.nt-steps li { display: flex; align-items: baseline; gap: 10px; counter-increment: nt; }
.nt-steps li::before { content: counter(nt); flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); font: 700 11px/1 Inter, sans-serif; }
.nt-steps li.done::before { content: '✓'; background: var(--ok-50); color: var(--ok); }
.nt-steps li.done > span { color: var(--muted); }
.nt-code { padding: 1px 8px; border-radius: 7px; background: var(--brand-50); color: var(--brand-600); font: 800 14px/1.4 Inter, sans-serif; letter-spacing: .08em; user-select: all; }
.nt-team summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.nt-team ul { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.nt-team li { display: flex; justify-content: space-between; gap: 10px; }
.nt-team li i { color: var(--muted); font-style: normal; font-size: 12px; }
.nt-team li i.ok { color: var(--ok); }
.nt-team li i.half { color: var(--warn); }
.nt-reply { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--warn-50); font-size: 13px; }
.nt-reply .nt-chip { display: inline-flex; align-items: center; text-decoration: none; }
/* Задача «Вам звонили — отпишитесь»: ответ номеру для звонков в одно нажатие */
.tq-callreply { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--brand-50); font-size: 13px; }
.tq-callreply:empty { display: none; }
.tq-cr-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tq-cr { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--brand-100); border-radius: 999px; background: var(--card); color: var(--brand-600); font: 600 12.5px/1 Inter, 'Golos Text', sans-serif; text-decoration: none; }
.tq-cr:hover { background: var(--brand-600); color: #fff; }
.tq-auto-close { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.tq-auto-close .ic { width: 15px; height: 15px; }

/* ——— «Звонок»: клиент ждёт 20 минут ——— */
.ip.rg { align-items: center; text-align: center; }
.ip.rg h3 { margin: 0; font-size: 20px; }
.rg-pulse { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin: 4px 0; }
.rg-pulse::before, .rg-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(220, 38, 38, .18); animation: rg-wave 1.6s ease-out infinite; }
.rg-pulse::after { animation-delay: .8s; }
.rg-pulse .ip-av { position: relative; width: 60px; height: 60px; font-size: 20px; }
@keyframes rg-wave { from { transform: scale(.75); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.rg-tag { align-self: center; background: rgba(220, 38, 38, .12); color: var(--hot); }
.rg-who { font-size: 13px; color: var(--ink-2); }
.rg-none { color: var(--hot); }
.rg-said { display: flex; flex-direction: column; gap: 6px; align-self: stretch; margin: 2px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .6); list-style: none; text-align: left; }
.rg-said li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.4; }
.rg-said time { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rg-said span { overflow-wrap: anywhere; }
:root[data-theme="dark"] .rg-said { background: rgba(255, 255, 255, .06); }
.ip.rg .ip-text { align-self: stretch; text-align: left; -webkit-line-clamp: 3; }
.ip.rg .ip-actions { align-self: stretch; }
.rg-snooze, .rg-busy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.rg-snooze button { height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .6); color: var(--ink-2); font: 600 12.5px/1 Inter, sans-serif; cursor: pointer; }
.rg-busy .nt-chip { height: 28px; padding: 0 10px; font-size: 12px; background: rgba(255, 255, 255, .45); }
@media (prefers-reduced-motion: reduce) { .rg-pulse::before, .rg-pulse::after { animation: none; } }

/* ——— OLYMP AI: робот-помощник — кнопка, панель, кнопка в нижнем меню телефона ——— */
.as-orb { position: fixed; right: 18px; bottom: calc(14px + var(--orb-lift, 0px)); z-index: 60; display: grid; place-items: center; width: 116px; height: 124px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: transform .25s, bottom .25s; -webkit-tap-highlight-color: transparent; }
/* голова робота: мимику меняет assistant.js, свечение — по форме головы */
.ai-head { display: block; width: 100%; height: 100%; }
.ai-head img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(37, 99, 235, .28)); transition: filter .15s; -webkit-user-drag: none; user-select: none; }
:is(.as-orb, .as-tab, .as-panel):is(.listening, .speaking) .ai-head img { filter: drop-shadow(0 0 calc(3px + var(--lvl, 0) * 12px) rgba(59, 120, 255, .85)); }
:is(.as-orb, .as-tab, .as-panel).thinking .ai-head { animation: ai-bob 1.2s ease-in-out infinite; }
/* живой: голова чуть парит */
.as-tab-orb .ai-head, .as-orb .ai-head, .as-mini .ai-head { animation: ai-float 3.4s ease-in-out infinite; }
@keyframes ai-float { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-3px) rotate(-2deg); } 65% { transform: translateY(1px) rotate(2deg); } }
/* компьютер: на кнопке робот целиком, анимацией */
.as-orb .ai-head { display: none; }
.ai-body { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(37, 99, 235, .25)); -webkit-user-drag: none; user-select: none; }
/* реплика над роботом: точки «печатает», текст набирается и стирается */
.as-say { position: fixed; right: 30px; bottom: calc(148px + var(--orb-lift, 0px)); z-index: 60; display: flex; align-items: flex-start; gap: 6px; max-width: 260px; min-height: 22px; padding: 11px 12px 11px 15px; border: 1px solid rgba(115, 96, 242, .18); border-radius: 18px 18px 6px 18px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 34px rgba(41, 34, 62, .16); color: var(--ink); font: 600 14px/1.4 Inter, 'Golos Text', sans-serif; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px) scale(.96); transform-origin: bottom right; transition: opacity .25s, transform .25s; }
.as-say.on { opacity: 1; pointer-events: auto; transform: none; }
.as-say [data-say] { flex: 1; min-height: 20px; }
.as-say [data-say]:not(:empty)::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #2563eb; animation: as-caret .9s steps(1) infinite; }
.as-say-x { flex: none; margin: -4px -4px 0 0; padding: 0 4px; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.as-dots { display: inline-flex; gap: 4px; padding: 6px 0; }
.as-dots i { width: 6px; height: 6px; border-radius: 50%; background: #2563eb; animation: as-dot 1s ease-in-out infinite; }
.as-dots i:nth-child(2) { animation-delay: .15s; }
.as-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes as-caret { 50% { opacity: 0; } }
:root[data-theme="dark"] .as-say { border-color: rgba(255, 255, 255, .1); background: rgba(30, 27, 48, .92); }
/* появление: метеорит → всплеск → голова выглядывает и озирается → робот вылезает целиком */
.as-meteor, .as-splash { position: absolute; left: 50%; bottom: 18px; pointer-events: none; opacity: 0; }
.as-meteor { width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(#fff 30%, #8db8ff 60%, rgba(59, 120, 255, 0) 72%); box-shadow: 0 0 22px 8px rgba(80, 140, 255, .75); }
.as-meteor::before { content: ''; position: absolute; top: 50%; right: 8px; width: 180px; height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(to left, rgba(190, 215, 255, .95), rgba(59, 120, 255, 0)); transform: rotate(38deg); transform-origin: right center; }
.as-splash { width: 120px; height: 40px; margin-left: -60px; bottom: -4px; border-radius: 50%; border: 3px solid rgba(110, 162, 255, .9); box-shadow: 0 0 24px rgba(59, 120, 255, .8), inset 0 0 18px rgba(150, 190, 255, .7); }
.as-orb.arrive { clip-path: inset(-100vh -100vw 0 -100vw); } /* вылезает из-под нижнего края */
.as-orb.arrive .as-meteor { animation: as-meteor 5.6s linear both; }
.as-orb.arrive .as-splash { animation: as-splash 5.6s ease-out both; }
.as-orb.arrive .ai-body { animation: as-rise 5.6s both; }
.as-orb.arrive .ai-head { display: block; position: absolute; left: 24%; bottom: 0; width: 52%; height: auto; animation: as-peek 5.6s both; }
.as-orb.arrive .ai-head img { height: auto; }
@keyframes as-meteor { 0% { opacity: 0; transform: translate(-48vw, -70vh) scale(.5); } 3% { opacity: 1; } 24% { opacity: 1; transform: translate(0, 0) scale(1.15); animation-timing-function: ease-out; } 27%, 100% { opacity: 0; transform: translate(0, 0) scale(2.2); } }
@keyframes as-splash { 0%, 23% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; transform: scale(.5); } 38% { opacity: 0; transform: scale(2.8); } 100% { opacity: 0; } }
@keyframes as-peek {
  0%, 33% { transform: translateY(140%); }
  42% { transform: translateY(38%); animation-timing-function: ease-in-out; }
  50% { transform: translateY(38%) rotate(-16deg) translateX(-6px); }
  60% { transform: translateY(38%) rotate(16deg) translateX(6px); }
  67% { transform: translateY(32%) rotate(0); }
  72% { transform: translateY(38%); }
  79%, 100% { transform: translateY(140%); }
}
@keyframes as-rise { 0%, 76% { transform: translateY(118%); } 90% { transform: translateY(-7%); animation-timing-function: ease-in-out; } 94% { transform: translateY(2%); } 100% { transform: none; } }
@keyframes ai-bob { 50% { transform: translateY(-3px) rotate(-3deg); } }
.as-orb:hover { transform: scale(1.06); }
.as-orb.open { transform: scale(.86); }
.as-orb:active, .as-tab:active .as-tab-orb { transform: scale(.92); }
/* ответ готов, а панель закрыта — синяя точка */
.as-ready { position: absolute; top: 2px; right: 0; width: 14px; height: 14px; border: 2px solid var(--bg); border-radius: 50%; background: #2563eb; transform: scale(0); transition: transform .2s; pointer-events: none; }
.ready .as-ready { transform: scale(1); }
.as-sound .as-mute { display: none; }
.as-sound.off { color: var(--muted); }
.as-sound.off .as-wave { display: none; }
.as-sound.off .as-mute { display: inline; }
/* в чатах робот и облачко поднимаются вместе, чтобы не закрывать кнопку отправки */
:root:has([data-composer]) { --orb-lift: 90px; }

.as-panel { position: fixed; right: 24px; bottom: 148px; z-index: 61; display: flex; flex-direction: column; width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100vh - 180px)); border: 1px solid rgba(255, 255, 255, .6); border-radius: 24px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 24px 60px rgba(41, 34, 62, .24); opacity: 0; pointer-events: none; transform: translateY(14px) scale(.98); transform-origin: bottom right; transition: opacity .2s, transform .2s; }
.as-panel.on { opacity: 1; pointer-events: auto; transform: none; }
:root:has([data-composer]) .as-panel { bottom: 228px; height: min(600px, calc(100vh - 262px)); }
/* окно помощника открыто — робот внизу не дублирует его, а окно занимает почти всю высоту экрана */
@media (min-width: 769px) {
  .as-orb.open { opacity: 0; pointer-events: none; transform: scale(.6); }
  .as-panel, :root:has([data-composer]) .as-panel { bottom: 20px; height: min(860px, calc(100dvh - 100px)); }
}
:root[data-theme="dark"] .as-panel { border-color: rgba(255, 255, 255, .09); background: rgba(28, 26, 44, .86); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.as-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 16px; border-bottom: 1px solid var(--line); }
.as-head > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.as-head small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.as-mini { position: relative; flex: none; width: 38px; height: 34px; }
.as-feed { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.as-hello { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: auto 0; text-align: center; }
@media (max-width: 768px) { .as-hello-orb, .ai-anim { height: 150px; } .as-hello { margin-top: 0; } }
.as-hello p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.as-hello-orb { display: grid; place-items: center; height: 160px; margin-bottom: 2px; }
.ai-anim { display: block; height: 160px; width: auto; filter: drop-shadow(0 10px 22px rgba(37, 99, 235, .18)); }
.as-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 8px; }
.as-chip { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: 600 12.5px/1.3 Inter, 'Golos Text', sans-serif; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.as-chip span { flex: 1; }
.as-chip > .ic { flex: none; width: 16px; height: 16px; color: var(--muted); transform: rotate(-90deg); }
.as-chip-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; }
.as-chip-ic .ic { width: 18px; height: 18px; }
.as-chip-ic.tone-violet { background: rgba(115, 96, 242, .12); color: #6a55e8; }
.as-chip-ic.tone-blue { background: rgba(37, 99, 235, .1); color: #2563eb; }
.as-chip-ic.tone-green { background: rgba(32, 201, 100, .12); color: #16a34a; }
.as-chip-ic.tone-indigo { background: rgba(67, 56, 202, .1); color: #4338ca; }
.as-head small.live { color: var(--brand-600); font-weight: 600; }
.as-chip:hover { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand-600); }
.as-msg { max-width: 88%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.as-me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--brand-600); color: #fff; }
.as-me .ic { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.as-bot { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(41, 34, 62, .06); }
.as-wait { display: inline-flex; align-items: center; gap: 4px; }
.as-wait .ai-think { width: 46px; height: 49px; margin: -6px 6px -6px -4px; }
.as-wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-600); animation: as-dot 1s ease-in-out infinite; }
.as-wait i:nth-child(2) { animation-delay: .15s; }
.as-wait i:nth-child(3) { animation-delay: .3s; }
.as-wait span { margin-left: 6px; color: var(--muted); font-size: 13px; }
@keyframes as-dot { 50% { opacity: .25; transform: translateY(-3px); } }
.as-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.as-list > small { padding: 2px 6px 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.as-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.as-row:hover { background: var(--brand-50); }
.as-row > .ic { flex: none; width: 16px; height: 16px; color: var(--muted); }
.as-row > span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.as-row b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.as-row small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.as-hot { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--hot-50); color: var(--hot); font-size: 11px; font-style: normal; font-weight: 700; }
.as-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--brand-100); border-radius: 16px; background: var(--card); }
.as-card > small { color: var(--brand-600); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.as-task-title { font-size: 15px; }
.as-task-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--ink-2); font-size: 12.5px; }
.as-task-meta span { display: inline-flex; align-items: center; gap: 5px; }
.as-task-meta .ic { width: 14px; height: 14px; color: var(--muted); }
.as-task-details { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.as-task-check { display: flex; flex-direction: column; gap: 3px; margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.as-card-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.as-card-act small { color: var(--muted); font-size: 12px; }
.as-draft { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.45; resize: vertical; }
.as-done { flex-direction: row; align-items: center; border-color: transparent; background: var(--ok-50); }
.as-done > .ic { width: 18px; height: 18px; color: var(--ok); }
.as-done > span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.as-done small { overflow: hidden; color: var(--ink-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.as-open { align-self: flex-start; }
.as-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.as-input textarea { flex: 1; min-height: 40px; max-height: 140px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.35; resize: none; }
.as-mic, .as-send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; touch-action: none; }
.as-mic { background: var(--brand-50); color: var(--brand-600); transition: box-shadow .08s, background .2s; }
.as-panel.listening .as-mic { background: var(--hot); color: #fff; box-shadow: 0 0 0 calc(4px + var(--lvl, 0) * 12px) rgba(220, 38, 38, .2); }
.as-send { background: var(--brand-600); color: #fff; }
.as-mic .ic, .as-send .ic { width: 18px; height: 18px; }
.as-tab { display: none; }
@media (prefers-reduced-motion: reduce) { .ai-head, .as-wait i, .as-dots i { animation: none !important; } }

@media (max-width: 768px) {
  /* телефон: шар — в нижнем меню; отдельный шар — только в открытом чате, где меню спрятано */
  .as-orb { display: none; }
  :root:has(.inbox[data-pane="chat"]) .as-orb { display: grid; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  .as-orb .ai-body { display: none; }
  .as-orb .ai-head { display: block; }
  /* реплика — над кнопкой в нижнем меню */
  .as-say, :root:has([data-composer]) .as-say { right: auto; left: calc(50% - 130px); bottom: calc(84px + env(safe-area-inset-bottom)); width: 260px; max-width: none; box-sizing: border-box; border-radius: 18px; transform-origin: bottom center; }
  .as-tab { display: grid; place-items: center; flex: none; min-width: 64px; padding: 0; border: 0; outline: 0; box-shadow: none !important; background: transparent !important; -webkit-tap-highlight-color: transparent; appearance: none; }
  .as-tab::after, .as-tab:focus, .as-tab:focus-visible { outline: 0; background: transparent; }
  .as-tab-orb { position: relative; display: grid; place-items: center; width: 50px; height: 44px; transition: transform .2s; }
  .as-panel { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; height: min(86dvh, calc(var(--vvh, 100dvh) - 70px)); transform: translateY(30px); transform-origin: bottom center; }
  :root:has([data-composer]) .as-panel { bottom: calc(8px + env(safe-area-inset-bottom)); height: min(78dvh, calc(var(--vvh, 100dvh) - 70px)); }
  .as-input textarea { font-size: 16px; } /* iPhone не увеличивает страницу при вводе */
}

/* Окно чатов без открытой переписки: сводка на сейчас и быстрые действия (Esc закрывает переписку) */
.ih { width: 100%; height: 100%; box-sizing: border-box; padding: 32px 40px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; }
.ih-head h2 { font-size: 24px; margin: 0 0 4px; }
.ih-head p { margin: 0; color: var(--muted); }
.ih-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ih-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, transform .15s; }
.ih-tile:hover { border-color: var(--brand-100); transform: translateY(-1px); }
.ih-tile b { font-size: 26px; line-height: 1.1; }
.ih-tile span { font-size: 13px; color: var(--ink-2); }
.ih-tile small { font-size: 12px; color: var(--muted); }
.ih-tile.zero b { color: var(--muted); }
.ih-tile.ih-hot { background: var(--hot-50); border-color: transparent; }
.ih-tile.ih-hot b, .ih-tile.ih-hot small { color: var(--hot); }
.ih-tile.ih-warn { background: var(--warn-50); border-color: transparent; }
.ih-tile.ih-warn b { color: var(--warn); }
.ih-tile.ih-ok b { color: var(--ok); }
.ih-tile.ih-brand b { color: var(--brand); }
.ih-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.ih-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 14px 16px; }
.ih-box h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin: 0 0 10px; }
.ih-box h3 a { font-size: 12px; font-weight: 600; color: var(--brand); text-decoration: none; }
.ih-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ih-tasks button { width: 100%; display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; margin: 0 -8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ih-tasks button:hover { background: var(--bg); }
.ih-task-t { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ih-tasks small { font-size: 12px; color: var(--muted); }
.ih-tasks small.late { color: var(--hot); }
.ih-stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ih-stats dt { font-size: 12px; color: var(--muted); }
.ih-stats dd { margin: 0; font-size: 20px; font-weight: 700; }
.ih-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding-top: 4px; }
.ih-actions button { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 104px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.ih-actions button > span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); transition: background .15s; }
.ih-actions button:hover > span { background: var(--brand-100); }
.ih-hint { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
.ih-hint kbd { font: inherit; font-weight: 700; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); }

/* Тихий просмотр чата по долгому нажатию */
.dlg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ip.pk { width: min(440px, 100%); }
.pk-feed { display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 420px); overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.pk-msg { display: flex; flex-direction: column; gap: 2px; max-width: 85%; padding: 8px 12px; border-radius: 16px 16px 16px 6px; background: rgba(255, 255, 255, .75); font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.pk-msg.out { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: rgba(115, 96, 242, .16); }
.pk-msg time { align-self: flex-end; color: var(--muted); font-size: 11px; }
:root[data-theme="dark"] .pk-msg { background: rgba(255, 255, 255, .07); }
:root[data-theme="dark"] .pk-msg.out { background: rgba(115, 96, 242, .28); }
.pk-note { margin: 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.pk-wrap { background: rgba(20, 16, 36, .42); }
.ip.pk { background: rgba(255, 255, 255, .96); }
:root[data-theme="dark"] .ip.pk { background: rgba(30, 27, 48, .97); }
.pk-msg { background: #f1f0f6; }
.ip.pk { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ——— Плашка «Установите приложение» (PWA) ——— */
.pwa { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "art title title" "art text text" "chips chips go"; align-items: center; gap: 3px 12px; max-width: 420px; margin: 0 auto; padding: 14px 12px 12px 14px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 22px; background: linear-gradient(150deg, rgba(255, 255, 255, .78), rgba(248, 246, 255, .62)); -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); box-shadow: 0 18px 44px rgba(41, 34, 62, .18), 0 2px 6px rgba(41, 34, 62, .06), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(115, 96, 242, .07); color: var(--ink); opacity: 0; transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .3, 1.15); }
/* стекло: мягкие цветные блики по углам и блеск, который один раз пробегает по плашке после появления */
.pwa::before, .pwa::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.pwa::before { background: radial-gradient(120% 90% at 0% 0%, rgba(108, 92, 255, .16), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(64, 150, 255, .12), transparent 60%); }
.pwa::after { z-index: 3; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 48%, transparent 60%) 140% 0 / 260% 100% no-repeat; opacity: 0; }
.pwa.on { opacity: 1; animation: pwa-drop .95s cubic-bezier(.25, .85, .3, 1) backwards; }
.pwa.on::after { animation: pwa-shine 1s ease .75s; }
.pwa.on > * { animation: pwa-fill .4s ease .5s backwards; }
.pwa.on.away { opacity: 0; transform: translateY(16px); pointer-events: none; }
/* появление каплей: капля выскакивает снизу из робота в нижнем меню, подлетает и растекается в плашку */
@keyframes pwa-drop {
  0% { opacity: 0; transform: translateY(78px); clip-path: inset(calc(100% - 26px) calc(50% - 13px) 0 calc(50% - 13px) round 13px); }
  30% { opacity: 1; transform: translateY(-10px); clip-path: inset(calc(100% - 30px) calc(50% - 15px) 0 calc(50% - 15px) round 15px); }
  55% { transform: translateY(2px); clip-path: inset(8% 28% 0 28% round 34px); }
  78% { transform: translateY(-2px); clip-path: inset(0 -1% 0 -1% round 22px); }
  100% { transform: none; clip-path: inset(0 round 22px); }
}
@keyframes pwa-fill { from { opacity: 0; transform: translateY(6px); } }
@keyframes pwa-shine { 0% { opacity: 1; background-position: 140% 0; } 100% { opacity: 1; background-position: -40% 0; } }
.pwa-art { grid-area: art; position: relative; width: 56px; height: 56px; align-self: start; perspective: 240px; }
/* значок с роботом: робот выезжает из-за значка вправо и выходит на передний план, значок отворачивается
   в 3D, как дверца; робот оглядывается и прячется обратно, значок пружинит на место. Цикл — 8 секунд */
.pwa-icon { position: relative; z-index: 1; display: block; width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 6px 14px rgba(30, 22, 90, .25); transform-origin: 0 50%; animation: pwa-door 8s cubic-bezier(.3, .8, .3, 1) 2s infinite; }
.pwa-bot { position: absolute; z-index: 0; left: 11px; top: 11px; width: 34px; height: 34px; object-fit: contain; opacity: 0; filter: drop-shadow(0 3px 5px rgba(30, 20, 120, .3)); animation: pwa-peek 8s cubic-bezier(.3, .8, .3, 1) 2s infinite; }
@keyframes pwa-door {
  0%, 10% { transform: none; box-shadow: 0 6px 14px rgba(30, 22, 90, .25); }
  17% { transform: translateX(-4px) rotateY(34deg) scale(.92); box-shadow: -4px 6px 12px rgba(30, 22, 90, .2); }
  22%, 40% { transform: translateX(-6px) rotateY(28deg) scale(.9); box-shadow: -4px 6px 12px rgba(30, 22, 90, .2); }
  47% { transform: translateX(1px) rotateY(-7deg) scale(1.02); }
  52% { transform: rotateY(3deg); }
  56%, 100% { transform: none; box-shadow: 0 6px 14px rgba(30, 22, 90, .25); }
}
@keyframes pwa-peek {
  0%, 10% { z-index: 0; opacity: 0; transform: translate(0, 0) scale(.7); }
  15% { z-index: 0; opacity: 1; transform: translate(24px, -6px) scale(.95) rotate(10deg); filter: drop-shadow(0 3px 5px rgba(30, 20, 120, .3)); }
  19% { z-index: 2; transform: translate(10px, 9px) scale(1.32) rotate(-4deg); filter: drop-shadow(0 10px 10px rgba(30, 20, 120, .35)); }
  23% { transform: translate(10px, 6px) scale(1.3) rotate(0); }
  27% { transform: translate(8px, 7px) scale(1.3) rotate(-14deg); }
  32% { transform: translate(12px, 7px) scale(1.3) rotate(12deg); }
  36% { transform: translate(10px, 4px) scale(1.34) rotate(0); }
  40% { z-index: 2; transform: translate(10px, 7px) scale(1.3); filter: drop-shadow(0 10px 10px rgba(30, 20, 120, .35)); }
  44% { z-index: 2; opacity: 1; transform: translate(24px, -6px) scale(.95) rotate(8deg); }
  45% { z-index: 0; }
  52%, 100% { z-index: 0; opacity: 0; transform: translate(0, 0) scale(.7); filter: drop-shadow(0 3px 5px rgba(30, 20, 120, .3)); }
}
.pwa-title { grid-area: title; padding-right: 26px; font: 750 16px/1.25 Inter, 'Golos Text', sans-serif; letter-spacing: -.01em; }
.pwa-text { grid-area: text; color: #66627e; font-size: 13px; line-height: 1.38; text-wrap: balance; }
.pwa-chips { grid-area: chips; display: flex; gap: 6px; min-width: 0; margin-top: 10px; }
.pwa-chips span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 30px; padding: 0 10px 0 8px; overflow: hidden; border: 1px solid rgba(115, 96, 242, .14); border-radius: 10px; background: rgba(255, 255, 255, .55); color: #4b4768; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pwa-chips svg { flex: none; width: 14px; height: 14px; color: #6c5cff; }
.pwa-go { grid-area: go; height: 40px; margin-top: 10px; padding: 0 18px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #6c5cff, #4a3fe0); color: #fff; font: 700 14.5px/1 Inter, 'Golos Text', sans-serif; box-shadow: 0 8px 18px rgba(74, 63, 224, .32), inset 0 1px 0 rgba(255, 255, 255, .25); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease; }
.pwa-go:active { transform: scale(.96); }
.pwa-x { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #a3a0b8; cursor: pointer; }
.pwa-x:hover { background: rgba(115, 96, 242, .08); }
.pwa-x .ic { width: 15px; height: 15px; }
/* «Установка…» и «Установлено» — плашка ужимается в строку */
.pwa.pwa-state { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.pwa-st { display: flex; flex-direction: column; gap: 2px; }
.pwa-st b { font: 700 15px/1.25 Inter, 'Golos Text', sans-serif; }
.pwa-st small { color: var(--muted); font-size: 12.5px; }
.pwa-spin { flex: none; width: 34px; height: 34px; border: 3px solid rgba(108, 92, 255, .15); border-top-color: #6c5cff; border-radius: 50%; animation: pwa-spin .8s linear infinite; }
@keyframes pwa-spin { to { transform: rotate(360deg); } }
.pwa-ok { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #22c55e; color: #fff; box-shadow: 0 6px 14px rgba(34, 197, 94, .35); animation: pwa-pop .4s cubic-bezier(.2, .9, .3, 1.4); }
.pwa-ok svg { width: 20px; height: 20px; }
@keyframes pwa-pop { from { transform: scale(.4); opacity: 0; } }
:root[data-theme="dark"] .pwa { border-color: rgba(255, 255, 255, .1); background: linear-gradient(150deg, rgba(40, 36, 66, .82), rgba(28, 25, 48, .72)); box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .pwa-text { color: #a9a5c4; }
:root[data-theme="dark"] .pwa::after { background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .18) 48%, transparent 60%); }
:root[data-theme="dark"] .pwa-chips span { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #c9c5e0; }
@media (min-width: 769px) { .pwa { left: 24px; right: auto; bottom: 24px; width: 400px; margin: 0; } }
@media (max-width: 370px) { .pwa-chips svg { display: none; } .pwa-chips span { padding: 0 9px; } }
@media (prefers-reduced-motion: reduce) { .pwa, .pwa.on, .pwa.on > *, .pwa.on::after { animation: none; transition: opacity .2s; } .pwa-bot, .pwa-icon { animation: none; } }
.pwa-guide-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(115, 96, 242, .1), rgba(64, 120, 255, .06)); }
.pwa-guide-head img { width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 6px 14px rgba(64, 56, 214, .25); }
.pwa-guide-head span { display: flex; flex-direction: column; gap: 2px; }
.pwa-guide-head small { color: var(--muted); }
.pwa-guide ol { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: pwa; }
.pwa-guide li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.35; }
.pwa-step-ic { display: grid; place-items: center; flex: none; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 12px; background: #f1efff; color: #4a3fd6; }
.pwa-step-ic svg { width: 21px; height: 21px; }
.pwa-step-add { color: #0a84ff; font-size: 12.5px; }
:root[data-theme="dark"] .pwa-step-ic { background: rgba(140, 125, 255, .16); color: #b7adff; }
/* iPhone: стрелка на «Поделиться» в Safari */
.pwa-coach { position: fixed; z-index: 130; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 14px calc(84px + env(safe-area-inset-bottom)); background: rgba(14, 11, 30, .62); opacity: 0; transition: opacity .25s ease; }
.pwa-coach.on { opacity: 1; }
.pwa-coach.at-top { justify-content: flex-start; padding: calc(78px + env(safe-area-inset-top)) 14px 16px; }
.pwa-coach-card { width: 100%; max-width: 420px; margin: 0 auto; padding: 16px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transform: translateY(16px); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.pwa-coach.at-top .pwa-coach-card { transform: translateY(-16px); }
.pwa-coach.on .pwa-coach-card { transform: none; }
.pwa-coach-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pwa-coach-head img { width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 6px 14px rgba(64, 56, 214, .25); }
.pwa-coach-head span { display: flex; flex-direction: column; gap: 2px; }
.pwa-coach-head b { font: 800 16px/1.2 Inter, 'Golos Text', sans-serif; }
.pwa-coach-head small { color: var(--muted); font-size: 12.5px; }
.pwa-coach ol { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.pwa-coach li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; font-size: 14.5px; line-height: 1.3; animation: pwa-step 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
.pwa-coach li i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #6c5cff, #4038d6); color: #fff; font: 800 12px/1 Inter, sans-serif; font-style: normal; }
@keyframes pwa-step { 0%, 22% { background: rgba(115, 96, 242, .12); } 30%, 100% { background: transparent; } }
.pwa-key { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0 2px; vertical-align: middle; border-radius: 8px; background: #eef2ff; color: #0a84ff; }
.pwa-key svg { width: 17px; height: 17px; }
.pwa-coach-ok { width: 100%; height: 44px; border: 0; border-radius: 14px; background: #f1efff; color: #4a3fd6; font: 700 15px/1 Inter, 'Golos Text', sans-serif; cursor: pointer; }
.pwa-arrow { position: fixed; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%; background: linear-gradient(135deg, #6c5cff, #4038d6); color: #fff; box-shadow: 0 0 0 8px rgba(115, 96, 242, .25), 0 12px 26px rgba(64, 56, 214, .5); animation: pwa-point 1.1s ease-in-out infinite; }
.pwa-arrow svg { width: 26px; height: 26px; }
.pwa-coach.at-right .pwa-arrow { left: auto; right: 14px; margin-left: 0; }
.pwa-coach.at-top .pwa-arrow { top: calc(10px + env(safe-area-inset-top)); bottom: auto; left: auto; right: 14px; margin-left: 0; transform: rotate(180deg); animation-name: pwa-point-up; }
@keyframes pwa-point { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes pwa-point-up { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
:root[data-theme="dark"] .pwa-coach-card { background: #1e1b30; }
:root[data-theme="dark"] .pwa-key, :root[data-theme="dark"] .pwa-coach-ok { background: rgba(140, 125, 255, .16); color: #b7adff; }
@media (prefers-reduced-motion: reduce) { .pwa-coach li, .pwa-arrow { animation: none; } }

/* ——— Групповые чаты: кто пишет — фото, имя своим цветом, @логин ——— */
.msg-g { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: min(610px, 88%); }
.msg-g .msg { max-width: 100%; }
.msg-g:not(.msg-g-first) .msg { border-top-left-radius: 6px; }
.msg-g-ava { flex: none; width: 32px; height: 32px; }
.msg-g-ava img, .msg-g-ava i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: hsl(var(--hue, 262) 62% 56%); color: #fff; font: 700 12px/1 Inter, 'Golos Text', sans-serif; font-style: normal; }
.msg-sender { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 1.25; }
.msg-sender b { overflow: hidden; color: hsl(var(--hue, 262) 58% 44%); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.msg-sender span { flex: none; color: var(--muted); font-size: 11.5px; }
:root[data-theme="dark"] .msg-sender b { color: hsl(var(--hue, 262) 70% 70%); }
@media (max-width: 768px) { .msg-g { max-width: 92%; } .msg-g-ava, .msg-g-ava img, .msg-g-ava i { width: 28px; height: 28px; } }
.msg-g-ava.tap, .msg-sender b[data-sender] { cursor: pointer; }
.msg-sender b[data-sender]:hover { text-decoration: underline; }

/* Карточка группы — как в Telegram: фото, число участников, описание, участники с ролями */
.gc { display: flex; flex-direction: column; gap: 12px; }
.gc-top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 4px; text-align: center; }
.gc-top h3 { margin: 6px 0 0; font-size: 18px; }
.gc-photo { width: 92px; height: 92px; }
.gc-photo img, .gc-photo i { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #7a6bff, #4038d6); color: #fff; font: 700 30px/1 Inter, 'Golos Text', sans-serif; font-style: normal; box-shadow: 0 8px 22px rgba(64, 56, 214, .22); }
.gc-box { padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.gc-about { margin: 0 0 4px; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.gc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gc-wait { margin: 8px 0; }
.gc-member { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; }
.gc-member:last-of-type { border-bottom: 0; }
.gc-member:hover { background: rgba(115, 96, 242, .05); }
.gc-ava, .gc-ava img, .gc-ava i { flex: none; width: 40px; height: 40px; }
.gc-ava img, .gc-ava i { display: grid; place-items: center; border-radius: 50%; object-fit: cover; background: hsl(var(--hue, 262) 62% 56%); color: #fff; font: 700 14px/1 Inter, 'Golos Text', sans-serif; font-style: normal; }
.gc-who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gc-who b { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gc-who small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.gc-who small.gc-online { color: #2f80ed; }
.gc-role { flex: none; padding: 3px 8px; border-radius: 8px; background: rgba(115, 96, 242, .1); color: #5a4be0; font-size: 11.5px; font-weight: 600; }
.gc-role-creator { background: rgba(34, 197, 94, .12); color: #15803d; }
/* Профиль участника */
.sp { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.sp h3 { margin: 8px 0 0; font-size: 19px; }
.sp-photo img, .sp-photo i { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: hsl(var(--hue, 262) 62% 56%); color: #fff; font: 700 36px/1 Inter, 'Golos Text', sans-serif; font-style: normal; box-shadow: 0 10px 26px rgba(30, 22, 90, .2); }
.sp .sp-kv { align-self: stretch; margin-top: 10px; text-align: left; }
.sp .mp-about { align-self: stretch; text-align: left; }
.sp-write { align-self: stretch; margin-top: 10px; justify-content: center; }

/* Ряд мессенджеров над списком переписок: круглые значки каналов, как истории в мессенджерах */
.ch-rail { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; padding: 6px 8px 2px; scroll-padding-inline: 8px; }
.ch-rail::-webkit-scrollbar { display: none; }
.ch-rail[hidden] { display: none; }
/* не влезли все — правый край тает: видно, что ряд листается */
.ch-rail.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.chr { flex: none; width: 54px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit; }
.chr small { max-width: 52px; font-size: 10.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chr-ic { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s, transform .15s; }
.chr-ic .brand-ic.chr-brand { width: 28px; height: 28px; border-radius: 50%; }
.chr-all { color: var(--brand); background: var(--brand-50); }
.chr-all svg { width: 18px; height: 18px; }
.chr:hover .chr-ic { transform: translateY(-1px); box-shadow: 0 0 0 1.5px var(--brand-100); }
.chr.on { color: var(--ink); }
.chr.on small { font-weight: 600; }
.chr.on .chr-ic { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--brand); }
.chr.bad .chr-ic { box-shadow: 0 0 0 1.5px var(--hot); }
.chr.bad.on .chr-ic { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--hot); }
.chr-n, .chr-bad { position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--brand); color: #fff; font: 700 10px/17px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.chr-bad { right: auto; left: -6px; background: var(--hot); }

/* Фото сотрудника в шапке и в меню профиля */
.me-btn { overflow: hidden; padding: 0; }
.me-btn > .me-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ——— Шапка без тесноты: счётчики значками с подсказкой, плюс «Создать», пробный период — плашкой ——— */
.top-attention { overflow: visible; gap: 4px; }
.att-hold { position: relative; display: inline-flex; flex: none; }
.top-attention .att.att-i { position: relative; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 11px; gap: 0; }
.top-attention .att.att-i .ic { width: 18px; height: 18px; }
.top-attention .att.att-calm { color: var(--ink-2); }
.att-n { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--card); border-radius: 9px; background: var(--brand); color: #fff;
  font: 800 10px/14px Inter, sans-serif; font-style: normal; text-align: center; box-sizing: border-box; }
.att-hot .att-n { background: var(--hot); }
.att-warn .att-n { background: var(--warn); }
.att-calm .att-n { background: var(--ink-2); }
/* часы горят: кто-то ждёт дольше нормы — мягкое свечение и пульс; при наведении пульс чаще */
.top-attention .att-wait.att-hot { animation: att-glow 2.2s ease-out infinite; }
.top-attention .att-wait.att-hot .ic { animation: att-pulse 1.6s ease-in-out infinite; }
.top-attention .att-wait.att-hot:hover .ic { animation-duration: .8s; }
@keyframes att-glow { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .32); } 70%, 100% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); } }
.att-pop { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 60; width: 270px; padding: 12px; border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: var(--shadow-lg); color: var(--ink); font: 500 13px/1.4 Inter, "Golos Text", sans-serif; text-align: left;
  opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity .16s, transform .16s, visibility 0s .16s; }
.att-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.att-hold:hover .att-pop, .att-hold:focus-within .att-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .08s; }
.att-pop-t { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 750; }
.att-pop p { margin: 0; color: var(--ink-2); }
.att-pop-row { display: flex; align-items: center; gap: 8px; margin: 0 -6px; padding: 6px; border-radius: 9px; color: var(--ink); text-decoration: none !important; }
.att-pop-row:hover { background: var(--bg); }
.att-pop-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-pop-row i { flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.att-pop-row i.lvl-hot { color: var(--hot); }
.att-pop-row i.lvl-warn { color: var(--warn); }
.att-pop-ic { flex: none; width: 18px; height: 18px; }
.att-pop-rest { display: block; padding: 4px 0 0; color: var(--muted); font-size: 12px; }
.att-pop-more { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--brand-600); font-weight: 650; text-decoration: none !important; }

/* Плюс «Создать»: круглая кнопка, при наведении раскрывается с подписью; по нажатию — меню */
.top-create { position: relative; flex: none; }
.create-btn { display: inline-flex; align-items: center; gap: 0; height: 36px; max-width: 36px; padding: 0 9px; overflow: hidden; border: 0; border-radius: 18px;
  background: var(--brand); color: #fff; font: 700 13px/1 Inter, "Golos Text", sans-serif; white-space: nowrap; cursor: pointer;
  box-shadow: 0 6px 16px rgba(115, 96, 242, .28); transition: max-width .32s cubic-bezier(.2, .8, .2, 1), gap .32s, background .2s, padding .32s; }
.create-btn .ic { flex: none; width: 18px; height: 18px; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.create-btn span { opacity: 0; transition: opacity .18s; }
.create-btn:hover, .create-btn:focus-visible, .top-create.open .create-btn { max-width: 140px; gap: 7px; padding-right: 15px; background: var(--brand-600); }
.create-btn:hover span, .create-btn:focus-visible span, .top-create.open .create-btn span { opacity: 1; transition-delay: .08s; }
.top-create.open .create-btn .ic { transform: rotate(45deg); }
.create-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 290px; padding: 6px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow-lg); animation: create-in .18s ease-out; }
.create-menu[hidden] { display: none; }
@keyframes create-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.create-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.create-menu button:hover { background: var(--bg); }
.create-menu button > .ic { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); box-sizing: border-box; }
.create-menu button > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.create-menu b { font-size: 13.5px; font-weight: 700; }
.create-menu small { color: var(--muted); font-size: 12px; }

/* Уведомления выключены на этом устройстве — точка на фото профиля */
.top-actions { position: relative; }
.top-actions:has(.me-btn.notify-off)::after { content: ""; position: absolute; right: -1px; top: 0; width: 10px; height: 10px; border: 2px solid var(--card); border-radius: 50%; background: var(--warn); pointer-events: none; }

/* Меню профиля: тема, уведомления, справка — тремя кнопками; строка пробного периода */
.user-pop-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 2px 2px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.user-pop .user-pop-quick button { flex-direction: column; justify-content: center; gap: 5px; padding: 9px 4px; border-radius: 11px; background: var(--bg); font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-align: center; }
.user-pop .user-pop-quick button:hover { background: var(--brand-50); color: var(--brand-600); }
.user-pop .user-pop-quick button.is-off { color: var(--warn); }
.user-pop-quick .ic { width: 18px; height: 18px; }
.user-pop a.user-pop-trial { gap: 8px; margin-bottom: 4px; background: var(--brand-50); color: var(--brand-600); font-weight: 650; font-size: 13px; }
.user-pop a.user-pop-trial.trial-warn { background: var(--warn-50); color: var(--warn); }
.user-pop a.user-pop-trial.trial-hot { background: var(--hot-50); color: var(--hot); }
.user-pop-trial .ic { width: 16px; height: 16px; flex: none; }

/* Пробный период — стеклянная плашка под шапкой, выезжает сверху; закрывается крестиком */
.trial-note { position: fixed; top: calc(var(--top) + 12px); left: 50%; z-index: 55; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 14px; border: 1px solid rgba(115, 96, 242, .22); border-radius: 14px;
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 12px 34px rgba(41, 34, 62, .14), inset 0 1px 0 rgba(255, 255, 255, .7); color: var(--brand-600); font: 650 13px/1.3 Inter, "Golos Text", sans-serif;
  opacity: 0; pointer-events: none; transform: translate(-50%, -14px) scale(.97); transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .25, 1.15); }
.trial-note.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.trial-note > .ic { flex: none; width: 16px; height: 16px; }
.trial-note > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-note a { flex: none; padding: 5px 10px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 12px; text-decoration: none !important; }
.trial-note a:hover { background: var(--brand-600); }
.trial-note button { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.trial-note button:hover { background: rgba(22, 19, 31, .06); color: var(--ink); }
.trial-note button .ic { width: 14px; height: 14px; }
.trial-note.trial-warn { border-color: rgba(217, 119, 6, .28); color: var(--warn); }
.trial-note.trial-warn a { background: var(--warn); }
.trial-note.trial-hot { border-color: rgba(220, 38, 38, .28); color: var(--hot); }
.trial-note.trial-hot a { background: var(--hot); }
:root[data-theme="dark"] .trial-note { background: rgba(28, 26, 44, .72); border-color: rgba(139, 123, 255, .3); box-shadow: 0 12px 34px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .trial-note button:hover { background: rgba(255, 255, 255, .08); }

@media (max-width: 768px) {
  .top-create { display: none; }
  .att-pop { display: none; }
  .top-attention .att.att-i { width: 32px; height: 32px; }
  .trial-note { top: calc(var(--top) + 8px); font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .top-attention .att-wait.att-hot, .top-attention .att-wait.att-hot .ic { animation: none; }
  .create-btn, .create-btn .ic, .trial-note, .att-pop { transition: none; }
}

@media (min-width: 1280px) { .top-search { flex-basis: 440px; } }

/* Счётчики словами: «Дашборд», «Непрочитанные 2», «Ждут ответа 4», «Задачи 4» */
.top-attention .att.att-i.att-txt { width: auto; padding: 0 12px 0 10px; gap: 7px; font-size: 13px; font-weight: 650; }
.top-attention .att-txt .att-n { position: static; min-width: 20px; height: 20px; border: 0; border-radius: 10px; font-size: 11px; line-height: 20px; }
.top-attention .att-txt.att-calm { color: var(--ink-2); }
.top-attention .att-txt.att-calm:hover { color: var(--brand-600); }
.top-attention .att-txt.att-brand .att-n { background: var(--brand); }
@media (max-width: 1199px) { .top-attention .att-txt .att-l { display: none; } .top-attention .att.att-i.att-txt { padding: 0 9px; } .top-attention .att-txt:not(:has(.att-n)) { width: 36px; padding: 0; } }
@media (max-width: 768px) { .top-attention .att-txt[href="/app/dashboard"] { display: none; } }
@media (min-width: 769px) {
  .top-attention { flex: none; }
  .top-search { flex: 1 1 240px; max-width: 460px; }
  .top-actions { margin-left: auto; }
}

/* «Создать» — кнопка в полный рост; варианты открываются при наведении (нажатие — для сенсорных экранов) */
.create-btn, .create-btn:hover, .create-btn:focus-visible, .top-create.open .create-btn { max-width: none; gap: 7px; padding: 0 15px 0 11px; }
.create-btn span { opacity: 1; }
.create-btn:hover, .top-create:hover .create-btn { background: var(--brand-600); }
.top-create:hover .create-btn .ic, .top-create:focus-within .create-btn .ic { transform: rotate(90deg); }
.top-create.open .create-btn .ic { transform: rotate(45deg); }
.top-create::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* мостик к меню */
@media (hover: hover) {
  .top-create:hover .create-menu[hidden], .top-create:focus-within .create-menu[hidden] { display: block; }
}
@media (max-width: 1399px) { .ts-field kbd { display: none; } .top-search { min-width: 190px; } .top-attention .att.att-i.att-txt { padding: 0 10px 0 9px; gap: 6px; } }

/* Кнопки шапки — чёткие: белая плашка с рамкой и лёгкой тенью, цвет только у значка и цифры.
   Без заливки всей кнопки и без пульсации; «горит» только цифра у «Ждут ответа». */
.top-attention .att.att-i,
.top-attention .att.att-i.att-hot, .top-attention .att.att-i.att-warn, .top-attention .att.att-i.att-brand, .top-attention .att.att-i.att-calm, .top-attention .att.att-i.att-ok {
  height: 36px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px rgba(22, 19, 31, .06); animation: none; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.top-attention .att.att-i:hover { border-color: var(--brand-100); background: var(--card); color: var(--ink); box-shadow: 0 6px 16px rgba(41, 34, 62, .1); transform: translateY(-1px); }
.top-attention .att.att-i:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(22, 19, 31, .06); }
.top-attention .att.att-i .ic { color: var(--muted); animation: none; }
.top-attention .att.att-i:hover .ic { color: var(--brand-600); }
.top-attention .att-i.att-brand .ic { color: var(--brand-600); }
.top-attention .att-i.att-warn .ic { color: var(--warn); }
.top-attention .att-i.att-hot .ic { color: var(--hot); }
.top-attention .att-i.att-ok .ic { color: var(--ok); }
.top-attention .att.att-i.att-txt.att-calm { color: var(--ink-2); }
.top-attention .att-i.att-hot { border-color: rgba(220, 38, 38, .28); }
.top-attention .att-i.att-hot:hover { border-color: rgba(220, 38, 38, .5); }
.top-attention .att-i .att-n { box-shadow: none; }
/* «горит» — мягкое кольцо вокруг цифры, сама кнопка стоит на месте */
.top-attention .att-wait.att-hot .att-n { position: relative; top: auto; right: auto; }
.top-attention .att-wait.att-hot .att-n::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(220, 38, 38, .45); animation: att-ring 1.8s ease-out infinite; }
@keyframes att-ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
:root[data-theme="dark"] .top-attention .att.att-i { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .top-attention .att-wait.att-hot .att-n::after { animation: none; } }

/* Четыре кнопки — одна группа с разделителями, как переключатель */
@media (min-width: 769px) {
  .top-attention:has(.att-txt) { gap: 0; padding: 3px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: 0 1px 2px rgba(22, 19, 31, .06); }
  .top-attention .att-hold + .att-hold::before { content: ""; align-self: center; width: 1px; height: 18px; margin: 0 2px; background: var(--line); }
  .top-attention .att.att-i,
  .top-attention .att.att-i.att-hot, .top-attention .att.att-i.att-warn, .top-attention .att.att-i.att-brand, .top-attention .att.att-i.att-calm, .top-attention .att.att-i.att-ok {
    height: 32px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; }
  .top-attention .att.att-i:hover { background: var(--brand-50); box-shadow: none; transform: none; }
  .top-attention .att-i.att-hot { background: transparent; }
  .top-attention .att-i.att-hot:hover { background: var(--hot-50); }
  .top-attention .att.att-i:active { background: var(--brand-100); }
  .top-attention .att-pop { top: calc(100% + 13px); }
  :root[data-theme="dark"] .top-attention:has(.att-txt) { box-shadow: none; }
}

/* «Ещё» на телефоне: крупный поиск с роботом вместо лупы и микрофон для голоса; блоки не сжимаются */
@media (max-width: 768px) {
  .mm-sheet .modal-body > * { flex-shrink: 0; }
  .mm-search-row { display: flex; align-items: center; gap: 8px; }
  .mm-search-row .mm-search { flex: 1; min-width: 0; height: 50px; padding: 0 16px 0 7px; gap: 10px; border-radius: 16px; background: var(--card); color: var(--muted);
    box-shadow: 0 1px 2px rgba(22, 19, 31, .05); font-size: 15px; }
  .mm-search-row .mm-search > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mm-bot { flex: none; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, #eef0ff, #dfe3ff); }
  .mm-bot img { width: 34px; height: 34px; object-fit: contain; }
  .mm-voice { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 16px; background: var(--brand); color: #fff; cursor: pointer;
    box-shadow: 0 6px 16px rgba(115, 96, 242, .3); }
  .mm-voice:active { transform: scale(.96); }
  .mm-voice .ic { width: 22px; height: 22px; }
  :root[data-theme="dark"] .mm-bot { background: linear-gradient(145deg, #2a2650, #221f40); }
  .mm-projects { display: flex; flex-direction: column; gap: 4px; }
  .mm-projects .proj-item { padding: 10px; border-radius: 12px; }
  .mm-projects .proj-info b { font-size: 15px; }
  .mm-projects .proj-new { height: 44px; margin-top: 8px; border-radius: 12px; }
}

/* OLYMP AI — экран записи голоса: вместо ленты и поля — робот в наушниках, кольца и «эквалайзер» в такт
   голосу, таймер и кнопка «Готово». После — «Распознаю…» с другим роботом. */
.as-rec { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 16px 22px; text-align: center; background: radial-gradient(circle at 50% 34%, rgba(91, 132, 255, .14), transparent 62%); }
.as-panel:is(.recording, .decoding) .as-rec { display: flex; }
.as-panel:is(.recording, .decoding) :is(.as-feed, .as-input) { display: none; }
.as-rec-orb { position: relative; display: grid; place-items: center; width: 320px; height: 240px; margin-bottom: 10px; }
.as-rec-bot { position: relative; z-index: 1; width: 200px; height: auto; transform: scale(calc(1 + var(--lvl, 0) * .07)); transition: transform .09s ease-out; animation: as-float 3s ease-in-out infinite; filter: drop-shadow(0 calc(6px + var(--lvl, 0) * 10px) calc(14px + var(--lvl, 0) * 26px) rgba(59, 120, 255, .45)); }
.as-rec-ring { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border: 2px solid rgba(91, 132, 255, .5); border-radius: 50%; opacity: 0; animation: as-ring 2.4s ease-out infinite; }
.as-rec-ring:nth-child(2) { animation-delay: .8s; }
.as-rec-ring:nth-child(3) { animation-delay: 1.6s; }
.as-panel.recording .as-rec-ring:first-child { opacity: 1; animation: none; transform: scale(calc(1 + var(--lvl, 0) * .35)); border-color: rgba(91, 132, 255, calc(.25 + var(--lvl, 0) * .6)); transition: transform .09s ease-out; }
/* «эквалайзер» у ушей: светящиеся полоски, при записи — от голоса, при распознавании — бегущей волной */
.as-ear { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; gap: 6px; height: 96px; margin-top: -54px; }
.as-ear-l { left: 4px; }
.as-ear-r { right: 4px; flex-direction: row-reverse; }
.as-ear i { width: 7px; height: 100%; border-radius: 6px; background: linear-gradient(180deg, #c9f1ff, #4fb8ff 45%, #2d6bff); box-shadow: 0 0 8px rgba(79, 184, 255, .9), 0 0 18px rgba(45, 107, 255, .55); transform: scaleY(calc(var(--k) * .25)); transition: transform .08s ease-out; }
.as-panel.decoding .as-ear i { animation: as-ear 1s ease-in-out infinite; animation-delay: calc(var(--i) * -.14s); }
.as-ear-r i { animation-delay: calc(var(--i) * -.14s - .5s) !important; }
/* слушает: голова покачивается, будто подставляет ухо */
.as-panel.recording .as-rec-bot { animation: as-listen 3.4s ease-in-out infinite; }
.as-rec-title { color: var(--ink); font-size: 19px; font-weight: 700; }
.as-rec-hint { max-width: 280px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.as-rec-time { margin: 6px 0 12px; color: var(--ink-2); font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.as-rec-stop { display: grid; place-items: center; width: 74px; height: 74px; border: 0; border-radius: 50%; background: var(--hot); cursor: pointer; box-shadow: 0 0 0 calc(6px + var(--lvl, 0) * 20px) rgba(220, 38, 38, .16), 0 10px 24px rgba(220, 38, 38, .35); transition: box-shadow .09s ease-out, transform .15s; }
.as-rec-stop:hover { transform: scale(1.05); }
.as-rec-stop:active { transform: scale(.95); }
.as-rec-stop i { width: 24px; height: 24px; border-radius: 6px; background: #fff; }
.as-rec-cancel { margin-top: 12px; font-size: 13px; }
.as-panel.decoding :is(.as-rec-stop, .as-rec-cancel, .as-rec-time) { display: none; }
.as-panel.decoding .as-rec-bot { transform: none; animation: as-float 1.6s ease-in-out infinite; }
.as-wait .ai-work { width: 46px; height: auto; animation: as-float 1.8s ease-in-out infinite; }
@keyframes as-float { 50% { translate: 0 -6px; } }
@keyframes as-ring { 0% { opacity: .7; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes as-ear { 0%, 100% { transform: scaleY(calc(var(--k) * .25)); } 50% { transform: scaleY(var(--k)); } }
@keyframes as-listen { 0%, 100% { rotate: -5deg; translate: -4px 0; } 45% { rotate: 4deg; translate: 3px -5px; } 70% { rotate: 1deg; translate: 0 -2px; } }
@media (max-width: 768px) { .as-rec-orb { width: 300px; height: 225px; } .as-rec-bot { width: 185px; } .as-ear { gap: 5px; } }
@media (prefers-reduced-motion: reduce) { .as-rec-bot, .as-rec-ring, .as-ear i, .as-wait .ai-work { animation: none !important; } .as-ear i { transform: scaleY(calc(var(--k) * .6)); } }
.as-busy small { white-space: normal; }
.as-wait .ai-work { width: 60px; margin: -10px 6px -8px -6px; }
.ai-say { display: none; }
.as-panel.speaking .ai-say { display: block; float: left; width: 46px; height: auto; margin: -6px 8px -4px -6px; animation: as-float 1.4s ease-in-out infinite; }

/* ——— Ответы ИИ: инструкция, выученные правила, проверка на примере ——— */
.settings:has(.air) { max-width: 1400px; }
.air { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.air-head { display: flex; align-items: flex-start; gap: 14px; }
.air-head h1 { margin: 0 0 4px; font: 800 24px/1.2 var(--head); }
.air-head p { max-width: 760px; margin: 0; }
.air-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--brand-50); color: var(--brand); }
.air-ic .ic { width: 24px; height: 24px; }
.air-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 16px; align-items: start; }
.air-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.air-prompt textarea, .air-test textarea { width: 100%; resize: vertical; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: 500 14px/1.5 Inter, 'Golos Text', sans-serif; outline: 0; }
.air-prompt textarea:focus, .air-test textarea:focus { border-color: var(--brand-100); box-shadow: 0 0 0 3px var(--brand-50); }
.air-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.air-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 12px/1 Inter, 'Golos Text', sans-serif; cursor: pointer; }
.air-chip .ic { width: 13px; height: 13px; color: var(--brand); }
.air-chip:hover { border-color: var(--brand-100); color: var(--brand-600); }
.air-actions { display: flex; align-items: center; gap: 12px; }
.air-add { display: flex; gap: 8px; }
.air-add input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: 500 13.5px/1 Inter, 'Golos Text', sans-serif; outline: 0; }
.air-add input:focus { border-color: var(--brand-100); box-shadow: 0 0 0 3px var(--brand-50); }
.air-list { display: flex; flex-direction: column; }
.air-rule { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.air-rule .switch { margin-top: 2px; }
.air-rule-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.air-rule-text { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.air-rule.off .air-rule-text { color: var(--muted); text-decoration: line-through; }
.air-rule small { font-size: 12px; }
.air-rule-why summary { color: var(--brand-600); font-size: 12.5px; cursor: pointer; }
.air-rule-why p { margin: 6px 0 0; color: var(--ink-2); font-size: 13px; }
.air-rule-acts { display: flex; gap: 2px; }
.air-rule-acts .icon-btn { width: 30px; height: 30px; color: var(--muted); }
.air-empty { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
.air-empty .ic { flex: none; width: 22px; height: 22px; color: var(--brand); }
.air-empty p { margin: 0; }
.air-test { position: sticky; top: 12px; }
.air-test form { display: flex; flex-direction: column; gap: 8px; }
.air-test form .btn { align-self: flex-start; }
.air-test .suggest-card { margin: 4px 0 0; box-shadow: none; }
@media (max-width: 1099px) { .air-grid { grid-template-columns: minmax(0, 1fr); } .air-test { position: static; } }
@media (max-width: 768px) { .suggest-fix-row, .air-add { flex-wrap: wrap; } .suggest-fix-row .btn, .air-add .btn { flex: 1; } }

/* Справа в чатах карточка клиента: кнопка отправки до угла не доходит — робот с облачком стоят в самом углу, как на других страницах */
@media (min-width: 1281px) {
  :root:has([data-composer]):has([data-card] > *) { --orb-lift: 0px; }
}

/* ——— Пересылка и «Счета» (forward.js) ——— */
.msg-fwd { font-size: 12px; font-weight: 600; opacity: .8; }
.msg-buttons a { border: 1px solid currentColor; border-radius: 12px; padding: 1px 8px; font-size: 12px; color: inherit; text-decoration: none; }
.msg-buttons a:hover { background: rgba(127, 127, 127, .12); }
.inbox-chat.picking .msg { cursor: pointer; }
.inbox-chat.picking .msg-menu-btn { display: none; }
.msg-picked { outline: 3px solid var(--brand); outline-offset: 2px; }
.msg-out.msg-picked { outline-color: #f5b800; }
.pick-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--brand-50); border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pick-bar > span { flex: 1; min-width: 0; }
.pick-bar .btn svg { width: 15px; height: 15px; }

.fw { display: flex; flex-direction: column; gap: 10px; }
.fw-search { width: 100%; }
.fw-picked { display: flex; flex-wrap: wrap; gap: 4px; }
.fw-tag button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 4px; font-size: 13px; }
.fw-list { display: flex; flex-direction: column; max-height: min(52vh, 420px); overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.fw-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.fw-row:last-child { border-bottom: 0; }
.fw-row:hover { background: var(--bg); }
.fw-row input { accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.fw-sug { background: var(--brand-50); }
.fw-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.fw-main b { font-size: 13.5px; }
.fw-main small { flex-basis: 100%; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-row time { color: var(--muted); font-size: 12px; flex: none; }
.fw-none { padding: 16px; margin: 0; text-align: center; }
.fw-off { margin: 10px 12px; align-self: flex-start; color: var(--hot); }
.fw-hide { font-size: 13px; }

.inv-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.inv-src { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-src svg { width: 15px; height: 15px; flex: none; }
.inv { display: flex; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.inv:hover { background: var(--bg); }
.inv.active { background: var(--brand-50); }
.inv-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }
.inv-ic svg { width: 18px; height: 18px; }
.inv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inv-top { display: flex; justify-content: space-between; gap: 8px; }
.inv-top b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-top time { color: var(--muted); font-size: 12px; flex: none; }
.inv-sub { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-sum { font-style: normal; font-weight: 700; color: var(--ok); margin-right: 6px; }
.inv-none { padding: 24px 16px; text-align: center; }
.inv-more { margin: 10px auto; display: block; }
.inv-empty h3 { margin: 0; }
.inv-empty p { max-width: 320px; }
.inv-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.inv-view-head > div { display: flex; flex-direction: column; min-width: 0; }
.inv-view-head small { font-size: 12px; }
.inv-body { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.inv-msg { max-width: min(560px, 100%); }
.inv-att { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.inv-att span { display: flex; align-items: center; gap: 6px; }
.inv-att svg { width: 15px; height: 15px; }
.inv-actions { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.inv-actions .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.inv-actions .btn svg { width: 16px; height: 16px; }
.inv-actions p { margin: 0; }
.fw-warn { display: block; margin-top: 3px; color: var(--hot); font-weight: 600; font-size: 12.5px; }

/* Кнопки-ссылки под сообщением, как в Telegram: во всю ширину пузыря, стеклянные, ↗ в углу */
.msg-kbw { display: flex; flex-direction: column; gap: 5px; max-width: min(560px, 82%); align-self: flex-start; }
.msg-kbw-out, .msg-kbw-note { align-self: flex-end; }
.msg-kbw > .msg { max-width: 100%; }
.msg-g .msg-kbw { max-width: 100%; min-width: 0; }
.msg-kb { display: flex; flex-direction: column; gap: 5px; }
.msg-kb-btn { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 30px; border-radius: 14px;
  font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; color: var(--brand-600);
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .52));
  border: 1px solid rgba(73, 54, 218, .18);
  box-shadow: 0 1px 2px rgba(36, 32, 51, .07), 0 6px 16px rgba(73, 54, 218, .09), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  transition: background .15s, box-shadow .15s, transform .15s; }
.msg-kb-btn:hover { background: rgba(255, 255, 255, .95); box-shadow: 0 2px 4px rgba(36, 32, 51, .08), 0 10px 22px rgba(73, 54, 218, .14), inset 0 1px 0 #fff; transform: translateY(-1px); }
.msg-kb-btn:active { transform: translateY(0); }
.msg-kb-btn i { position: absolute; top: 5px; right: 9px; font-style: normal; font-size: 11px; opacity: .65; }
.inv-body .msg-kbw { max-width: min(560px, 100%); }

/* Отключённый канал в ряду мессенджеров: его переписки остались в списке */
.chr.off .chr-ic, .chr.off img, .chr.off svg { filter: grayscale(1); opacity: .5; }
.chr.off small { opacity: .6; }

/* Подключение нового номера вместо отключённого: те же чаты */
.cm-keep { padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); }
.ch-purge { color: var(--hot); }
.ch-row .btn + .btn { margin-left: 6px; }