/* ── RevBack — операторская консоль (клиентское приложение) ── Дизайн-система: тёплая кремово-кирпичная идентичность + тёплая тёмная тема. Тема — через [data-theme] на (тоггл в сайдбаре, persist в localStorage); без явного выбора берётся системная (prefers-color-scheme). CSP: стили вшиты файлом (style-src 'self'); скрипт — app.js (script-src 'self'). */ /* ───────────────────────── токены: светлая тема ───────────────────────── */ :root{ color-scheme: light; /* геометрия */ --sb: 240px; /* ширина сайдбара (десктоп) */ --inbox-list-w: 340px; /* ширина колонки списка инбокса */ --inbox-ctx-w: 300px; /* ширина панели «Контакт» (≥1400px) */ /* шкала отступов */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; /* типошкала (база 14.5px) */ --fs-xs:.72rem; --fs-sm:.82rem; --fs-md:.92rem; --fs-lg:1.05rem; --fs-xl:1.3rem; --fs-2xl:1.6rem; /* радиусы */ --r:11px; --r-sm:7px; --r-pill:999px; /* поверхности и чернила */ --bg:#f4f1ec; --surface:#fffdfa; --surface-2:#f6f1e9; --raise:#ffffff; --ink:#211f1c; --ink-2:#5f574c; --ink-3:#736a5e; --line:#e7e1d7; --line-2:#dcd4c7; /* акцент (фирменный кирпичный) + семантика */ --accent:#d8412f; --accent-press:#b8341f; --accent-soft:#fbe7e3; --on-accent:#fff; /* --ok/--warn затемнены до AA (≥4.5:1) на своих -soft фонах (a11y-ревью) */ --ok:#157a45; --ok-soft:#e3f3ea; --warn:#855c00; --warn-soft:#f6edd8; --danger:#c0392b; --danger-soft:#fbe6e3; --info:#356a9a; --info-soft:#e6eef6; /* три уровня тени */ --shadow-sm:0 1px 2px rgba(40,30,20,.06), 0 1px 1px rgba(40,30,20,.04); --shadow-md:0 4px 14px -6px rgba(50,35,20,.16), 0 2px 5px rgba(50,35,20,.06); --shadow-lg:0 18px 48px -16px rgba(50,35,20,.28), 0 6px 16px rgba(50,35,20,.10); /* пузырь сообщения: входящий (поверхность) + исходящий (фон темнее акцента, чтобы #fff-текст давал ≥4.5:1 — сам --accent на белом тексте не дотягивал) */ --bubble-in:#fffdfa; --bubble-in-line:#e7e1d7; --bubble-out:#b8341f; /* шрифты */ --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace; } /* ───────────────────────── токены: тёмная тема (тёплая) ───────────────────────── Применяется при явном выборе [data-theme=dark] И при системной тёмной без выбора (:root:not([data-theme])). Дублируется намеренно — CSS не делит блок объявлений. */ [data-theme=dark]{ color-scheme: dark; --bg:#161310; --surface:#1e1a15; --surface-2:#262019; --raise:#2a241d; --ink:#f1ece4; --ink-2:#c6bcad; --ink-3:#9c9183; --line:#332d24; --line-2:#41392e; --accent:#e85a47; --accent-press:#f06d59; --accent-soft:#3a221d; --on-accent:#fff; --ok:#5cc98c; --ok-soft:#172b20; --warn:#d8a73e; --warn-soft:#322713; --danger:#e8675a; --danger-soft:#3a201c; --info:#6aa6d8; --info-soft:#152634; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 6px 20px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.72), 0 8px 20px rgba(0,0,0,.5); --bubble-in:#26201a; --bubble-in-line:#3a3228; --bubble-out:#c03f2b; } @media (prefers-color-scheme: dark){ :root:not([data-theme]){ color-scheme: dark; --bg:#161310; --surface:#1e1a15; --surface-2:#262019; --raise:#2a241d; --ink:#f1ece4; --ink-2:#c6bcad; --ink-3:#9c9183; --line:#332d24; --line-2:#41392e; --accent:#e85a47; --accent-press:#f06d59; --accent-soft:#3a221d; --on-accent:#fff; --ok:#5cc98c; --ok-soft:#172b20; --warn:#d8a73e; --warn-soft:#322713; --danger:#e8675a; --danger-soft:#3a201c; --info:#6aa6d8; --info-soft:#152634; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 6px 20px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.72), 0 8px 20px rgba(0,0,0,.5); --bubble-in:#26201a; --bubble-in-line:#3a3228; --bubble-out:#c03f2b; } } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums; } a{color:var(--accent); text-decoration:none; cursor:pointer} a:hover{text-decoration:underline} h1,h2,h3{margin:0 0 .5rem; line-height:1.2; font-weight:650; letter-spacing:-.01em; color:var(--ink)} h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-lg)} h3{font-size:var(--fs-md)} p{margin:.4rem 0} .muted{color:var(--ink-2); font-size:.88em} .mono{font-family:var(--mono); font-size:.9em} .error{color:var(--danger)} .ok-msg{color:var(--ok)} .warn-msg{color:var(--warn)} .hidden{display:none !important} .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} hr{border:none; border-top:1px solid var(--line); margin:1rem 0} /* ───────────────────────── каркас приложения ───────────────────────── */ .sidebar{position:fixed; inset:0 auto 0 0; width:var(--sb); z-index:20; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column} .brand{display:flex; align-items:center; gap:.55rem; padding:1.15rem 1.25rem .9rem; border-bottom:1px solid var(--line)} .brand .mark{width:30px; height:30px; border-radius:8px; flex:0 0 auto; background:linear-gradient(150deg,var(--accent),#f0683f); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), var(--shadow-sm); display:grid; place-items:center; color:#fff; font-family:var(--serif); font-weight:700; font-size:1.05rem; line-height:1} .brand .name{font-family:var(--serif); font-size:1.08rem; font-weight:600; letter-spacing:.01em} .brand .name small{display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600} nav.side{display:flex; flex-direction:column; gap:2px; padding:.75rem .6rem; flex:1; min-height:0; overflow:auto} nav.side a{display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem; border-radius:var(--r-sm); color:var(--ink); font-weight:500; position:relative; min-height:40px} nav.side a:hover{background:var(--surface-2); text-decoration:none} nav.side a.active{background:var(--accent-soft); color:var(--accent-press); font-weight:600} nav.side a.active::before{content:""; position:absolute; left:-.6rem; top:.4rem; bottom:.4rem; width:3px; border-radius:3px; background:var(--accent)} nav.side a svg{width:17px; height:17px; flex:0 0 auto; opacity:.8} .nav-badge{margin-left:auto; flex:0 0 auto} .side-foot{border-top:1px solid var(--line); padding:.8rem .85rem; display:flex; flex-direction:column; gap:.55rem} .who{display:flex; flex-direction:column; gap:1px; min-width:0} .who b{font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .project-switch{font-size:.82rem; padding:.3rem .4rem} .foot-actions{display:flex; gap:.5rem; align-items:center} .foot-actions .ghost{flex:1} /* тоггл темы */ .theme-toggle{flex:0 0 auto; width:38px; min-width:38px; min-height:38px; padding:0; display:grid; place-items:center; font-size:1rem} body.app #app > main{margin-left:var(--sb); min-height:100dvh; display:flex; flex-direction:column} .page{padding:1.6rem 1.9rem; max-width:980px; width:100%} .page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap} .page-head .sub{color:var(--ink-2); margin:.15rem 0 0} .crumb{display:inline-flex; align-items:center; gap:.35rem; color:var(--ink-2); font-size:.85rem; margin-bottom:.5rem} /* ───────────────────────── auth ───────────────────────── */ body.auth{display:grid; place-items:center; padding:1.5rem; background:radial-gradient(120% 120% at 50% -10%, var(--accent-soft) 0%, var(--bg) 46%)} body.auth > main{margin:0} .auth-card{width:min(380px,92vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:1.8rem 1.7rem} .auth-card .brand{border:none; padding:0 0 1.1rem; justify-content:center} /* ───────────────────────── карточки ───────────────────────── */ .card,.block{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.15rem 1.25rem; box-shadow:var(--shadow-sm); margin:0 0 1.1rem} .card > h2:first-child,.card > h3:first-child{margin-top:0} .card.danger-zone{border-color:var(--danger-soft)} .card.danger-zone > h2:first-child{color:var(--danger)} .card-hint{color:var(--ink-2); font-size:.86em; margin:-.1rem 0 .9rem} .grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} /* ───────────────────────── формы ───────────────────────── */ label{display:block; font-weight:500} form.stack{display:flex; flex-direction:column; gap:.7rem; max-width:420px} form.stack label{display:flex; flex-direction:column; gap:.3rem; font-size:.86rem; color:var(--ink-2); font-weight:600} input,textarea,select{font:inherit; color:var(--ink); background:var(--raise); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:.5rem .6rem; width:100%; transition:border-color .15s, box-shadow .15s} textarea{resize:vertical; min-height:2.4rem} input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} input[type=checkbox]{width:auto; accent-color:var(--accent)} input[type=file]{border:1px dashed var(--line-2); background:var(--surface-2); cursor:pointer} .check{flex-direction:row !important; align-items:center; gap:.5rem; color:var(--ink) !important; font-weight:500 !important} .check input{width:auto} .field-help{font-size:.78rem; color:var(--ink-2); font-weight:400; margin-top:.1rem} /* ───────────────────────── кнопки ───────────────────────── */ button,.btn{font:inherit; font-weight:600; cursor:pointer; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--raise); color:var(--ink); padding:.5rem .85rem; transition:background .15s, border-color .15s, transform .04s; display:inline-flex; align-items:center; gap:.4rem; line-height:1.1; min-height:38px} button:hover,.btn:hover{background:var(--surface-2)} button:active,.btn:active{transform:translateY(1px)} button.primary,.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:0 1px 2px rgba(184,52,31,.25)} button.primary:hover,.btn.primary:hover{background:var(--accent-press); border-color:var(--accent-press)} .btn.ghost,button.ghost{background:transparent} .btn.sm,button.sm{padding:.32rem .6rem; font-size:.82rem; min-height:32px} .btn.danger,button.danger{color:var(--danger); border-color:var(--danger-soft); background:var(--danger-soft)} .btn.danger:hover,button.danger:hover{background:var(--danger-soft); filter:brightness(.96)} button.link,.link{background:none; border:none; padding:0; min-height:0; color:var(--accent); text-decoration:none; cursor:pointer; font-size:.85em; font-weight:600} button.link:hover,.link:hover{text-decoration:underline; background:none} button.link.danger,.link.danger{color:var(--danger); background:none; border:none} .toolbar{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center} button[aria-busy=true],.btn[aria-busy=true],button.is-busy{opacity:.7; cursor:progress} /* Сенсорные устройства — основные кнопки до 44px (комфортный тап); плотность десктопа не трогаем. Инлайн-ссылки-действия — допустимое исключение (WCAG 2.5.8). */ @media (pointer:coarse){ button,.btn,.theme-toggle,.project-switch,input,select,textarea{min-height:44px} .composer .att-pending .att-x{width:44px; height:44px} } /* видимый контур фокуса для всех интерактивных элементов (только с клавиатуры) */ a:focus-visible,button:focus-visible,.btn:focus-visible,.conv:focus-visible, nav.side a:focus-visible,.vk-tile:focus-visible,.pill:focus-visible,summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); } /* ───────────────────────── пилюли / бейджи ───────────────────────── */ .pill{display:inline-flex; align-items:center; gap:.35rem; padding:.12rem .55rem; border-radius:var(--r-pill); font-size:.74rem; font-weight:700; letter-spacing:.02em; border:1px solid transparent} .pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85} .pill.ok{color:var(--ok); background:var(--ok-soft)} .pill.warn{color:var(--warn); background:var(--warn-soft)} .pill.danger{color:var(--danger); background:var(--danger-soft)} .pill.muted{color:var(--ink-2); background:var(--surface-2)} .pill.on{color:var(--on-accent); background:var(--accent); border-color:var(--accent)} .pill.on::before{background:var(--on-accent); opacity:1} button.pill{cursor:pointer; line-height:1; min-height:0; transition:background .12s, border-color .12s, box-shadow .12s, transform .04s} button.pill:hover{filter:brightness(.97)} button.pill.muted:hover{background:var(--line)} button.pill:active{transform:translateY(1px)} .badge-channel{display:inline-flex; align-items:center; padding:.08rem .5rem; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; letter-spacing:.02em; background:var(--info-soft); color:var(--info)} .badge-project{display:inline-flex; align-items:center; padding:.08rem .5rem; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; letter-spacing:.02em; background:var(--surface-2); color:var(--ink-2)} .badge-unread{color:var(--accent); font-size:.7rem; vertical-align:middle} /* приоритет беседы — бейдж только для high/urgent (low/med не шумим) */ .badge-prio{display:inline-flex; align-items:center; gap:.25rem; padding:.05rem .45rem; border-radius:var(--r-pill); font-size:.7rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase} .badge-prio::before{content:"▲"; font-size:.6em} .badge-prio.high{color:var(--warn); background:var(--warn-soft)} .badge-prio.urgent{color:var(--danger); background:var(--danger-soft)} /* «ждёт ответа N» (SLA, waiting_since) */ .badge-wait{font-size:.7rem; font-weight:700; color:var(--warn)} /* ───────────────────────── таблицы ───────────────────────── */ table{width:100%; border-collapse:collapse; font-size:.88rem} th,td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line)} th{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); font-weight:700} tbody tr:hover{background:var(--surface-2)} td .mono{font-size:.8rem; color:var(--ink-2)} /* ───────────────────────── список бесед ───────────────────────── */ .conv{display:block; padding:.7rem .85rem; border-bottom:1px solid var(--line); color:inherit; cursor:pointer; transition:background .12s; border-left:3px solid transparent} .conv:hover{background:var(--surface-2); text-decoration:none} .conv.active{background:var(--accent-soft); border-left-color:var(--accent)} /* непрочитанные — вес + лёгкая заливка (а не только точка) */ .conv.unread{background:color-mix(in srgb, var(--accent-soft) 40%, transparent)} .conv.unread strong{font-weight:750} .conv .conv-top{display:flex; align-items:center; gap:.5rem} .conv .conv-top strong{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600} .conv .conv-when{flex:0 0 auto; font-size:.72rem; color:var(--ink-3)} .conv .preview{margin:.2rem 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .conv .meta{margin-top:.2rem; font-size:.76rem; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:.3rem; align-items:center} .avatar{width:26px; height:26px; border-radius:50%; flex:0 0 auto; background:var(--accent-soft); color:var(--accent-press); display:grid; place-items:center; font-weight:700; font-size:.78rem; overflow:hidden} .avatar img{width:100%; height:100%; object-fit:cover} /* ───────────────────────── инбокс: рабочая область ───────────────────────── Высотный контракт: .workspace — definite height (100dvh) + grid-row minmax(0,1fr), поэтому колонки-панели НЕ растут под контент, а скроллятся внутри (.thread-scroll, .ws-list .scroll). На ≤900px — single-pane master-detail (класс .show-thread), высоту даёт #app (flex-column 100dvh) → main(flex:1) → workspace(height:100%). */ .workspace{display:grid; grid-template-columns:var(--inbox-list-w) 1fr; grid-template-rows:minmax(0,1fr); height:100dvh; min-height:0; overflow:hidden} .ws-list{border-right:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; min-height:0; min-width:0} .ws-list .ws-head{padding:1rem 1.1rem .7rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between} .ws-list .scroll{overflow:auto; min-height:0; flex:1; overscroll-behavior:contain} .ws-filters{display:flex; gap:.4rem; padding:.5rem 1.1rem; border-bottom:1px solid var(--line); flex-wrap:wrap; align-items:center} .ws-filters .flt{flex:1; min-width:5.5rem; padding:.3rem .4rem; font-size:.8rem} .ws-filters .flt.active{border-color:var(--accent); background:var(--accent-soft); font-weight:600} .flt-reset{flex:0 0 auto} .ws-thread{display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; background:var(--bg)} .ws-empty{margin:auto; text-align:center; color:var(--ink-3); padding:2rem} /* панель «Контакт» (3-я колонка, только ≥1400px) */ .ws-context{display:none; border-left:1px solid var(--line); background:var(--surface); min-height:0; overflow:auto; padding:1.1rem} .ws-context h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin:0 0 .6rem} .ctx-row{display:flex; flex-direction:column; gap:.1rem; padding:.45rem 0; border-bottom:1px solid var(--line)} .ctx-row:last-child{border-bottom:none} .ctx-k{font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); font-weight:700} .ctx-v{font-size:.9rem; color:var(--ink); word-break:break-word} /* ───────────────────────── тред / чат ───────────────────────── */ .thread-wrap{display:flex; flex-direction:column; height:100%; min-height:0} .thread-top{flex:0 0 auto; background:var(--surface); border-bottom:1px solid var(--line); padding:.9rem 1.2rem} .thread-top h1{font-size:1.15rem; display:flex; align-items:center; gap:.55rem; flex-wrap:wrap} .thread-back{display:none} .thread-controls{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.7rem; align-items:flex-end} .thread-controls label{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700; display:flex; flex-direction:column; gap:.25rem} .thread-controls select{padding:.35rem .5rem; min-width:9rem; width:auto} /* НЕ ставим scroll-behavior:smooth: программный scrollToBottom(scrollTop=scrollHeight) при smooth анимируется → видимый «доезд» при открытии треда и доводки на каждый img-load (тот самый «прыжок», который фикс убирает). Плавность — точечно в scrollIntoViewSafe (quote-jump) с учётом reduced-motion. */ .thread-scroll{flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain} .thread-body{padding:1.2rem; display:flex; flex-direction:column; gap:.45rem} .typing{padding:.2rem 1.2rem .6rem; font-size:.78rem; color:var(--ink-3); font-style:italic} /* разделитель дат */ .day-sep{align-self:center; margin:.5rem 0; padding:.12rem .7rem; font-size:.72rem; font-weight:700; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); position:sticky; top:.3rem; z-index:1} /* пузырь */ .msg{max-width:min(74%,620px); padding:.5rem .75rem .4rem; border-radius:14px; background:var(--bubble-in); border:1px solid var(--bubble-in-line); align-self:flex-start; box-shadow:var(--shadow-sm); position:relative} .msg.outgoing{align-self:flex-end; background:var(--bubble-out); color:var(--on-accent); border-color:var(--bubble-out); border-bottom-right-radius:5px} .msg:not(.outgoing){border-bottom-left-radius:5px} .msg.outgoing a{color:#fff; text-decoration:underline} .msg.grouped{margin-top:-.3rem} .msg.grouped .msg-author{display:none} .msg.deleted{opacity:.7; font-style:italic; background:var(--surface-2); color:var(--ink-2); border-color:var(--line)} /* приватная заметка оператора (m.private): видимо иначе, чем ответ клиенту */ .msg.private{align-self:stretch; max-width:100%; background:var(--warn-soft); border-color:var(--warn); color:var(--ink)} .msg.private .msg-note-tag{display:inline-flex; gap:.3rem; align-items:center; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--warn); margin-bottom:.2rem} .msg-author{font-size:.72rem; font-weight:700; color:var(--accent-press); margin-bottom:.15rem} .msg.outgoing .msg-author{color:rgba(255,255,255,.92)} .msg-quote{font-size:.78rem; opacity:.9; padding:.2rem .5rem; margin-bottom:.3rem; border-left:3px solid currentColor; border-radius:4px; background:color-mix(in srgb, currentColor 8%, transparent); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%} .msg.outgoing .msg-quote{background:rgba(255,255,255,.18)} .msg-text{white-space:pre-wrap; word-break:break-word} .msg-atts{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.35rem} .att-img{display:block; line-height:0} .att-img img{max-width:200px; max-height:170px; min-height:48px; border-radius:8px; display:block; background:var(--surface-2); object-fit:cover} .att-audio{display:block; width:240px; max-width:100%; height:40px} .att-video{display:block; max-width:240px; max-height:200px; border-radius:8px; background:var(--surface-2)} .att-chip{display:inline-flex; align-items:center; padding:.15rem .5rem; border-radius:var(--r-pill); background:var(--surface-2); font-size:.78rem} .att-link{text-decoration:none} .msg.outgoing .att-chip{background:rgba(255,255,255,.2); color:#fff} .msg .meta-line{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-top:.25rem; font-size:.72rem; color:var(--ink-3)} .msg-time{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink-3)} .msg.outgoing .meta-line,.msg.outgoing .msg-time{color:rgba(255,255,255,.92)} .msg-delv{font-weight:600} .msg.outgoing .msg-delv{color:rgba(255,255,255,.92)} /* ТЗ #85: бейдж провенанса AI-черновика — приглушённая пилюля (по образцу .att-chip), цвет из info-токенов (нейтральная семантика, не ok/warn/danger) */ .msg-ai-badge{display:inline-flex; align-items:center; padding:.05rem .45rem; border-radius:var(--r-pill); background:var(--info-soft); color:var(--info); font-weight:700} .msg.outgoing .msg-ai-badge{background:rgba(255,255,255,.22); color:#fff} /* §18: ✓✓ «прочитано визитёром» — отдельный значок (пустой, пока не прочитано) */ .msg-read{font-weight:700; color:#7fd1a3} .msg.outgoing .msg-read{color:#bff0d4} .msg-actions{display:inline-flex; gap:.6rem; margin-left:auto} .msg.outgoing .msg-actions .link{color:#ffe1db} .msg.outgoing .msg-actions .link.danger{color:#ffd0c8} .msg.edit-form{max-width:100%; align-self:stretch} .msg.edit-form textarea{width:100%; color:var(--ink)} /* ───────────────────────── композер ───────────────────────── */ .composer{flex:0 0 auto; background:var(--surface); border-top:1px solid var(--line); padding:.85rem 1.2rem} .composer.drop-over{outline:2px dashed var(--accent); outline-offset:-4px; background:var(--accent-soft)} .composer textarea{min-height:2.6rem; width:100%} .composer .composer-row{display:flex; gap:.6rem; align-items:center; margin-top:.5rem} .composer .composer-row .att-btn{flex:0 0 auto} .composer .composer-row .primary{margin-left:auto} .composer .send-progress{font-size:.78rem; color:var(--ink-2); align-self:center} .composer .att-pending{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; font-size:.8rem} .composer .att-pending.hidden{display:none} .composer .att-pending .att-item{display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .55rem; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill)} .composer .att-pending .att-name{max-width:18rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .composer .att-pending .att-x{border:none; background:transparent; cursor:pointer; color:var(--ink-2); font-size:.9rem; line-height:1; padding:0; min-height:0; width:24px; height:24px; display:grid; place-items:center} .reply-bar{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.3rem .55rem; margin-bottom:.4rem; background:var(--surface-2); border-radius:8px; font-size:.8rem} .ws-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ink-3); margin-right:.25rem} .ws-dot.on{background:var(--ok)} /* ───────────────────────── скелетоны загрузки ───────────────────────── */ .skeleton{position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--r-sm)} .skeleton::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--raise) 60%, transparent), transparent); transform:translateX(-100%); animation:skel 1.3s ease-in-out infinite} @keyframes skel{100%{transform:translateX(100%)}} .skel-line{height:.7rem; margin:.35rem 0; border-radius:4px} .skel-row{display:flex; gap:.6rem; align-items:center; padding:.7rem .85rem; border-bottom:1px solid var(--line)} .skel-row .skel-av{width:26px; height:26px; border-radius:50%; flex:0 0 auto} .skel-row .skel-lines{flex:1; min-width:0} .skel-card{height:84px; margin:0 0 1.1rem; border-radius:var(--r)} .skel-bubble{height:2.4rem; width:55%; border-radius:14px; margin:.2rem 0} .skel-bubble.out{align-self:flex-end; width:42%} @media (prefers-reduced-motion: reduce){.skeleton::after{animation:none}} /* блок-ошибка с ретраем */ .load-error{padding:1.1rem; color:var(--danger); display:flex; flex-direction:column; gap:.5rem; align-items:flex-start} /* ───────────────────────── каналы: группировка + health ───────────────────────── */ .ch-health{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.2rem 0 0} .ch-group{margin:0 0 1.4rem} .ch-group-head{display:flex; align-items:center; gap:.5rem; margin:0 0 .6rem} .ch-group-head h3{margin:0} .ch-group-head .count{font-size:.74rem; font-weight:700; color:var(--ink-2); background:var(--surface-2); border-radius:var(--r-pill); padding:.05rem .5rem} .ci-card{display:block; margin:0; color:inherit} .ci-card.attention{border-color:var(--danger); box-shadow:0 0 0 2px var(--danger-soft)} /* ── виджет телефона (страна + номер) ── */ .phone-field { display: flex; flex-direction: column; gap: 4px; } .phone-row { display: flex; gap: 6px; } .phone-row .phone-cc { flex: 0 1 46%; min-width: 0; } .phone-row .phone-num { flex: 1 1 54%; min-width: 0; } .phone-num.invalid { border-color: var(--danger, #c0392b); } .phone-field .error { color: var(--danger, #c0392b); } /* ── карточка web_chat: настройки слева, sticky-превью справа ── */ .page.wide{max-width:1460px} .webchat-layout{display:grid; grid-template-columns:minmax(0,1fr) clamp(340px,36%,430px); gap:1.1rem; align-items:start} .webchat-main{min-width:0} .webchat-side{position:sticky; top:1rem} .webchat-side .preview-frame{height:clamp(420px,calc(100dvh - 300px),620px)} .snippet-controls{display:flex; gap:.8rem; flex-wrap:wrap; margin:.2rem 0 .6rem} .snippet-controls label{display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:var(--ink-2); font-weight:600} .snippet-controls select{width:auto; min-width:11rem; padding:.35rem .5rem} .snippet{display:block; font-family:var(--mono); font-size:.82rem; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:.7rem .8rem; white-space:pre-wrap; word-break:break-all; user-select:all} .checklist{list-style:none; margin:.4rem 0; padding:0; display:flex; flex-direction:column; gap:.35rem} .checklist li{display:flex; gap:.4rem; align-items:baseline; flex-wrap:wrap} .checklist .ok-msg,.checklist .warn-msg,.checklist .error{font-weight:700} .preview-frame{width:100%; height:460px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff} .steps{margin:.3rem 0 .6rem; padding-left:1.2rem} .steps li{margin:.18rem 0} .guide h3{margin-top:.2rem} details > summary{cursor:pointer; font-weight:600; color:var(--ink-2)} /* ── VK picker ── */ .vk-pick-grid{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .vk-tile{display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; padding:.7rem .8rem; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s} .vk-tile:hover{background:var(--raise); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); text-decoration:none} .vk-tile:active{transform:translateY(1px)} .vk-tile.busy{opacity:.55; pointer-events:none} .vk-tile-avatar{flex:0 0 auto} .vk-tile-avatar .avatar{width:40px; height:40px; font-size:.95rem} .vk-tile-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.25} /* ── тосты ── */ .toast-box{position:fixed; right:1rem; bottom:1rem; z-index:60; display:flex; flex-direction:column; gap:.5rem; max-width:min(360px,calc(100vw - 2rem)); pointer-events:none} .toast{background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--ink-3); border-radius:var(--r-sm); padding:.7rem .9rem; box-shadow:var(--shadow-lg); font-size:.9rem; line-height:1.35; pointer-events:auto; animation:toast-in .2s ease-out} .toast.ok{border-left-color:var(--ok); background:var(--ok-soft)} .toast.error{border-left-color:var(--danger); background:var(--danger-soft)} .toast.leaving{opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease} @keyframes toast-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}} @media (prefers-reduced-motion: reduce){.toast{animation:none} .toast.leaving{transition:none}} /* ── модалка подтверждения ── */ .modal-overlay{position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:rgba(30,22,14,.5); padding:1.5rem; animation:modal-fade .15s ease-out} .modal{width:min(420px,94vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:1.3rem 1.4rem; animation:modal-pop .16s ease-out} .modal-msg{margin:0 0 1.1rem; line-height:1.45} .modal-actions{display:flex; gap:.6rem; justify-content:flex-end} @keyframes modal-fade{from{opacity:0} to{opacity:1}} @keyframes modal-pop{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}} @media (prefers-reduced-motion: reduce){.modal-overlay,.modal{animation:none}} /* ───────────────────────── адаптив ───────────────────────── ≥1400 — 3-панельный инбокс (список/тред/контакт); 900–1400 — 2-панельный десктоп; ≤900 — single-pane master-detail + топ-бар. */ @media (min-width:1400px){ .workspace{grid-template-columns:var(--inbox-list-w) 1fr var(--inbox-ctx-w)} .workspace .ws-context{display:block} } @media (max-width:1200px){ :root{--inbox-list-w:300px} } @media (max-width:900px){ :root{--sb:0px} body.app #app{display:flex; flex-direction:column; height:100dvh} .sidebar{position:static; width:auto; flex:0 0 auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:.3rem; border-right:none; border-bottom:1px solid var(--line); padding:.5rem .8rem} .brand{border:none; padding:.2rem .4rem .2rem 0; flex:0 0 auto} nav.side{flex-direction:row; flex-wrap:wrap; padding:.2rem; flex:1 1 100%; gap:.2rem; overflow:visible} nav.side a{min-height:40px; padding:.45rem .55rem} .side-foot{flex-direction:row; align-items:center; border:none; padding:.2rem; gap:.4rem; flex:0 0 auto} .who{display:none} .project-switch{max-width:9rem} body.app #app > main{margin-left:0; flex:1 1 auto; min-height:0; overflow:auto} /* инбокс: одна колонка, master-detail через .show-thread */ .workspace{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); height:100%} .ws-list{border-right:none} .ws-list,.ws-thread{grid-column:1; grid-row:1} .workspace:not(.show-thread) .ws-thread{display:none} .workspace.show-thread .ws-list{display:none} .workspace .ws-context{display:none} .thread-back{display:inline-flex} .webchat-layout{grid-template-columns:1fr} .webchat-side{position:static} .page{padding:1.1rem 1rem} /* карточный режим таблиц команды/проектов */ table.cards thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} table.cards tbody tr{display:block; border:1px solid var(--line); border-radius:var(--r-sm); margin:0 0 .7rem; padding:.4rem .6rem; background:var(--surface)} table.cards tbody tr:hover{background:var(--surface)} table.cards td{display:flex; justify-content:space-between; gap:1rem; border:none; padding:.3rem 0; text-align:right} table.cards td::before{content:attr(data-label); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700; text-align:left} table.cards td:empty{display:none} } @media (max-width:560px){ .msg{max-width:88%} .thread-controls{gap:.4rem} } /* §26: аватар отправителя-контакта во входящем пузыре (мелкий, у левого края). */ .msg-avatar{display:inline-block; vertical-align:top; margin-right:.4rem} .msg-avatar .avatar{width:22px; height:22px; font-size:.66rem} .msg.outgoing .msg-avatar{display:none} /* §28: карточка поста-источника в шапке треда комментариев. */ .post-card{margin:.4rem 0; padding:.5rem .6rem; border:1px solid var(--border); border-radius:8px; background:var(--accent-soft)} .post-card-author{font-weight:700; font-size:.82rem} .post-card-body{margin:.25rem 0; font-size:.85rem; white-space:pre-wrap; max-height:6em; overflow:auto} .post-card-link{font-size:.8rem}