/* ========================================================================== [блок].офис - дизайн-система CRM Айдентика (бренд-бук [блок]): монохромная типографика, скобки как единственный графический мотив, «отсутствие дизайна - только типографика». Поверхности - liquid glass: полупрозрачные слои с blur и бликом по верхней кромке над мягкой серой «атмосферой». ВАЖНО: имена классов - контракт с app.js, не переименовывать. ========================================================================== */ :root { --sans: -apple-system, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --ink: #0b0b0d; /* фирменный чёрный */ --ink2: #47474e; --mut: #7c7c84; --ghost: #94949c; /* apple-аудит §12: было #ababb2 (~2.2:1) - над стеклом нечитаемо */ --bd: rgba(11,11,13,.09); /* волосяная граница */ --bd2: rgba(11,11,13,.16); --bg2: #f1f1f4; /* доп-фон (подложка раскрывашек) - нейтральный, чуть темнее белого */ --glass: rgba(255,255,255,.55); --glass2: rgba(255,255,255,.78); --blur: saturate(160%) blur(20px); --shadow-panel: 0 1px 1px rgba(11,11,13,.03), 0 18px 44px -18px rgba(11,11,13,.22); --shadow-float: 0 2px 6px rgba(11,11,13,.05), 0 22px 48px -16px rgba(11,11,13,.28); --ring: 0 0 0 3px rgba(11,11,13,.14); --r-ctl: 10px; --r-card: 16px; /* семантика статусов (смягчённые тона, оттенки прежние - их уже выучили) */ --ok-bg:#e2f2e6; --ok-tx:#1d6f42; --warn-bg:#f9efd6; --warn-tx:#8a5a0b; --bad-bg:#fbe7e5; --bad-tx:#a3352d; --info-bg:#e9edfb; --info-tx:#3b3f9e; } * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--sans); color: var(--ink); background: #e9e9ec; -webkit-font-smoothing: antialiased; line-height: 1.45; /* apple-аудит §15: копия дышит; плотным местам - 1.25 ниже */ } table, .uchip, .rel-st, .dlg-st, .src, .fmt { line-height: 1.25; } /* атмосфера: крупные монохромные пятна, чтобы стеклу было что преломлять */ body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(42% 34% at 16% 12%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%), radial-gradient(50% 44% at 86% 8%, rgba(199,199,207,.55), rgba(199,199,207,0) 72%), radial-gradient(46% 40% at 78% 88%, rgba(214,212,206,.6), rgba(214,212,206,0) 70%), radial-gradient(38% 34% at 8% 78%, rgba(186,186,196,.42), rgba(186,186,196,0) 70%); /* apple-аудит §11: вечный дрейф заставлял пересчитывать blur ВСЕХ стеклянных панелей каждый кадр ради незаметных 0.5px/с - фон теперь статичен */ } ::selection { background: rgba(11,11,13,.85); color: #fff; } /* apple-аудит §1: отклик В МОМЕНТ нажатия - у пилюль лёгкое сжатие, у плоских рядов затемнение; transition короткий, чтобы press читался мгновенно */ .tab:active, .seg a:active, .btn-send:active, .actions-btn:active, .chatbtn:active, .bub-tool:active, .uiconfirm-btn:active, .scard-btn:active, .bellbtn:active, .af-save:active, .lead-share:active, .btn-godialog:active { transform: scale(.96); transition-duration: 60ms; } .ddmenu .b:active { background: rgba(11,11,13,.09); transition-duration: 60ms; } /* остальные плоские ряды - в конце файла: их :hover объявлен ниже и при равной специфичности перебивал бы press (мышью нажатие всегда идёт с наведением) */ /* ---------- логотип [блок].офис ---------- */ /* «[блок].» жирный; «офис» - тот же шрифт и размер, только тоньше. */ .glogo { display: inline-flex; align-items: baseline; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.02em; line-height: 1; white-space: nowrap; } .gl-br { display: inline-block; font-weight: 300; } .gl-word { display: inline-block; overflow: hidden; white-space: nowrap; min-width: 0; } .gl-word > span { display: inline-block; } /* точка = квадрат той же «толщины», что и тонкий «офис» (не глиф «.») */ .gl-dot { display: inline-block; width: .1em; height: .1em; background: currentColor; border-radius: .5px; margin: 0 .05em .04em; } .gl-suffix { display: inline-block; font-weight: 300; color: var(--ink); margin-left: .02em; } /* анимация: [] появляются -> «блок» печатается внутри и раздвигает скобки в стороны -> «офис» проявляется из размытия. На центрированном логотипе (хаб/вход) скобки расходятся симметрично: строка растёт от центра. */ .glogo.anim .gl-br { animation: glbr .3s ease .05s backwards; } .glogo.anim .gl-word { animation: glword .62s cubic-bezier(.2,.75,.28,1) .34s both; } .glogo.anim .gl-dot { animation: glbr .3s ease .92s backwards; } .glogo.anim .gl-suffix { animation: glsuf .55s ease 1.04s backwards; } @keyframes glbr { from { opacity: 0; } to { opacity: 1; } } @keyframes glword { from { max-width: 0; } to { max-width: 5ch; } } @keyframes glsuf { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } } /* явные классы gl-l/gl-r - чтобы при наведении гарантированно ехали ОБЕ скобки (а не полагаться на :last-of-type, который ловит последний span = «офис»). */ a.glogo:hover .gl-l { transform: translateX(-.07em); } a.glogo:hover .gl-r { transform: translateX(.07em); } a.glogo .gl-br { transition: transform .25s cubic-bezier(.3,.7,.3,1); } /* ---------- топбар (стеклянная плашка) ---------- */ header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 16px 0; padding: 11px 18px; background: linear-gradient(160deg, var(--glass2), var(--glass)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.65); box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.9); border-radius: var(--r-card); /* backdrop-filter создаёт stacking context; поднимаем шапку над полосой подразделов (сиблинг ниже по DOM), иначе выпадашка «Заявки» уходит под неё. apple-аудит §12: sticky - контент скроллится ПОД стекло, материал живёт */ position: sticky; top: 10px; z-index: 30; } .brand { font-weight: 600; font-size: 17px; } .who { display: flex; align-items: center; font-size: 13px; color: var(--ink2); } .who a { color: var(--ink); text-decoration: none; margin-left: 12px; } .who .logoutform { display: inline; margin: 0; } .logoutbtn { font: inherit; font-family: var(--mono); font-size: 12px; color: var(--mut); background: none; border: none; padding: 2px 2px; margin-left: 14px; cursor: pointer; } .logoutbtn:hover { color: var(--ink); } .logoutbtn::before { content: "[ "; opacity: 0; transition: opacity .18s; } .logoutbtn::after { content: " ]"; opacity: 0; transition: opacity .18s; } .logoutbtn:hover::before, .logoutbtn:hover::after { opacity: 1; } .rolebadge { display: inline-block; padding: 3px 10px; margin: 0 10px 0 4px; border-radius: 999px; background: rgba(11,11,13,.85); color: #fff; font-family: var(--mono); font-size: 11px; vertical-align: middle; } .roleswitch { font-family: var(--mono); font-size: 11px; padding: 3px 8px; margin: 0 10px 0 4px; border-radius: 999px; background: rgba(11,11,13,.85); color: #fff; border: 1px solid transparent; cursor: pointer; vertical-align: middle; appearance: none; -webkit-appearance: none; } .roleswitch:focus { outline: none; box-shadow: var(--ring); } .roleswitch.preview { background: var(--warn-bg); color: var(--warn-tx); border-color: rgba(138,90,11,.25); } /* навигация по разделам живёт в шапке (по центру), а не отдельной строкой */ .topnav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; overflow-x: auto; } .topnav::-webkit-scrollbar { display: none; } .topnav { scrollbar-width: none; } /* overflow-x:auto делает и overflow-y=auto -> режет низ активной вкладки (скругление + тень). Пунктов мало, скролл не нужен -> visible (иначе закругление обрезается снизу, находка user 2026-07-14). */ header .topnav { overflow: visible; } /* Узкий экран (ручной прогон по ролям, этап 5, 28.08.2026). Шапка - одна нерушимая строка из трёх колонок, и на телефоне (390 px) она разъезжалась: боковые колонки сжимались в ноль, а полоса разделов, которой в шапке запрещено и переноситься, и прокручиваться (overflow: visible выше - чтобы не резать выпадающее), вылезала за ОБА края. «Заявки» уходили за левый край экрана, и попасть в них было нельзя вообще. Ставим шапку в две строки: логотип и вошедший сверху, разделы - отдельной прокручиваемой строкой. */ @media (max-width: 760px) { header { flex-wrap: wrap; row-gap: 8px; } header > .hcol { flex: 0 1 auto; } header > .who { flex: 1 1 auto; } header .topnav { order: 3; flex: 1 0 100%; overflow-x: auto; justify-content: flex-start; } header .topnav .tab { flex: none; } } header .tabs { margin-bottom: 0; } body.hubpage header { justify-content: flex-end; } /* Полоса подразделов (.subwrap) центрируется по СТРАНИЦЕ, а .topnav - только по остатку между логотипом и блоком .who, поэтому пилюли разъезжались тем сильнее, чем длиннее имя вошедшего. Уравниваем боковые колонки шапки - тогда у обеих полос общая ось центра (owner 2026-08-24). Растягиваем именно КОЛОНКУ (.who и распорку у логотипа), а не саму ссылку логотипа: иначе её кликабельная зона расползлась бы на треть шапки. */ header > .hcol { flex: 1 1 0; display: flex; align-items: center; min-width: 0; } header > .who { flex: 1 1 0; justify-content: flex-end; min-width: 0; } /* длинное ФИО не должно раздвигать правую колонку: иначе оси центра у навигации и полосы подразделов снова разъедутся */ .who .whoname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ---------- колокол уведомлений ---------- */ .bell { position: relative; display: inline-block; margin-right: 6px; vertical-align: middle; } .bellbtn { position: relative; background: none; border: none; padding: 6px; cursor: pointer; color: var(--mut); line-height: 0; border-radius: 999px; transition: color .15s, background .15s; } .bellbtn:hover { color: var(--ink); background: rgba(11,11,13,.06); } .bellbtn svg { width: 21px; height: 21px; display: block; } .bell-badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #c93a30; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-sizing: border-box; } .bell-badge[hidden] { display: none; } .bell-menu { position: absolute; top: 40px; right: 0; width: 348px; max-width: 86vw; /* непрозрачный фон (owner 2026-07-23): панель уведомлений сплошная, не просвечивает содержимое под ней */ background: var(--panel, #fff); border: 1px solid var(--bd); border-radius: 14px; box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255,255,255,.9); z-index: 60; overflow: hidden; } .bell-menu[hidden] { display: none; } .bell-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--bd); font-size: 13px; font-weight: 600; color: var(--ink); } .bell-readall { font: inherit; font-family: var(--mono); font-size: 11px; color: var(--mut); background: none; border: none; cursor: pointer; padding: 0; } .bell-readall:hover { color: var(--ink); } /* Тумблер звука уведомлений (владелец 27.08.2026: «иконка перечёркнутого динамика сверху в окошке»). Одна иконка на два состояния: включён - видны волны (.bm-on), выключен - перечёркнут (.bm-off). */ .bell-headr { display: inline-flex; align-items: center; gap: 10px; } .bell-mute { display: inline-flex; background: none; border: none; padding: 0; cursor: pointer; color: var(--mut); line-height: 0; } .bell-mute svg { width: 16px; height: 16px; } .bell-mute:hover { color: var(--ink); } .bell-mute .bm-off { display: none; } .bell-mute.muted { color: var(--bad-tx); } .bell-mute.muted .bm-on { display: none; } .bell-mute.muted .bm-off { display: inline; } /* ---------- всплывающие уведомления (справа внизу) ---------- Владелец 27.08.2026: «уведомления должны приходить справа внизу в виде окошка со звуком». Полоса сдвинута выше нижней кромки на высоту .savetoast (подтверждения сохранения) - иначе два вида всплывашек накладывались бы. */ .ntoasts { position: fixed; right: 20px; bottom: 68px; z-index: 99; display: flex; flex-direction: column-reverse; gap: 10px; width: 330px; max-width: calc(100vw - 40px); pointer-events: none; } .ntoast { pointer-events: auto; background: var(--panel, #fff); border: 1px solid var(--bd); border-left: 3px solid var(--bad-tx); border-radius: 12px; box-shadow: var(--shadow-float); padding: 11px 12px 11px 13px; display: flex; gap: 10px; align-items: flex-start; opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; } .ntoast.show { opacity: 1; transform: translateY(0); } .nt-main { min-width: 0; flex: 1; } .nt-title { font-size: 13px; font-weight: 600; color: var(--ink); } .nt-body { font-size: 12.5px; color: var(--ink2); margin-top: 3px; overflow-wrap: anywhere; } .nt-go { flex: 0 0 auto; color: var(--mut); text-decoration: none; font-size: 12px; align-self: center; } .nt-go:hover { color: var(--ink); } .nt-x { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: var(--ghost); font-size: 15px; line-height: 1; padding: 0 2px; } .nt-x:hover { color: var(--ink); } @media (prefers-reduced-motion: reduce) { .ntoast { transition: none; } } .bell-list { max-height: 380px; overflow-y: auto; } /* owner 2026-08-22: пункт = контент + серая стрелка-редирект справа; ховер - фирменная подсветка (как строки карточек/таблиц), transition как у .clilink */ /* owner 2026-08-24: пункт НЕ кнопка - кликабельны только имена и стрелка, поэтому ни курсора-руки, ни ховер-подсветки всей строки */ .bell-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(11,11,13,.05); text-decoration: none; color: var(--ink); transition: background-color .16s ease; } .bell-item .bi-main { flex: 1; min-width: 0; } .bell-item:last-child { border-bottom: none; } /* строка целиком не подсвечивается: она не кликабельна. Подсветка нажимаемых мест (имена, стрелка) описана ниже - .bi-link:hover и .bell-go:hover. */ .bell-item.unread { background: rgba(59,63,158,.07); } /* apple-аудит §7/§12: поповеры материализуются от источника (scale+fade), transform-origin ставит positionPanel по направлению открытия */ .selx-menu, .datex-cal, .ddmenu:not([hidden]), .calpop:not([hidden]), .staffpick:not([hidden]), .react-pop:not([hidden]), .mentionpop:not([hidden]), .bell-menu:not([hidden]), .rcal:not([hidden]) { animation: popin .13s cubic-bezier(.2,.8,.3,1); } @keyframes popin { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } /* мини-карточка при наведении на ФИО (owner 2026-08-24): визитка без клика. z-index выше колокола (60), но НИЖЕ модалок и оверлея загрузки - подсказка не должна перекрывать то, что блокирует экран. */ .minicard { position: fixed; z-index: 150; cursor: pointer; width: 268px; max-width: calc(100vw - 16px); padding: 12px 14px; border-radius: 14px; background: var(--panel, #fff); border: 1px solid var(--bd); box-shadow: 0 18px 44px -14px rgba(11,11,13,.4); font-size: 12.5px; color: var(--ink); animation: popin .13s cubic-bezier(.2,.8,.3,1); } .minicard[hidden] { display: none; } .mc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .mc-name { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; } .mc-chip { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: rgba(11,11,13,.06); color: var(--mut); } .mc-row { display: flex; gap: 8px; padding: 2px 0; } .mc-k { flex: 0 0 104px; color: var(--ghost); white-space: nowrap; } .mc-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-note { color: var(--mut); } .mc-foot { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--bd); font-family: var(--mono); font-size: 10px; color: var(--ghost); letter-spacing: .03em; } /* участники события в колоколе, когда их имён нет в тексте уведомления */ .bi-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; } .bi-sep { color: var(--ghost); } /* сенсорные экраны: наведения нет, подсказка только мешала бы */ @media (hover: none) { .minicard { display: none !important; } } /* страница «Все уведомления» (owner 2026-08-24): та же строка, что в колоколе, но во всю ширину раздела и с догрузкой */ .bell-foot { border-top: 1px solid var(--bd); padding: 9px 14px; text-align: center; } .bell-foot a { font-family: var(--mono); font-size: 11px; color: var(--mut); text-decoration: none; } .bell-foot a:hover { color: var(--ink); } .nhist-wrap { padding: 4px 0; border-radius: var(--r-card); background: linear-gradient(160deg, var(--glass2), var(--glass)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.65); box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.9); overflow: hidden; } .nhist-list .bell-item { padding: 12px 18px; } .nhist-more { display: flex; justify-content: center; padding: 12px; } /* серая кнопка-стрелка: редирект на тему уведомления */ .bell-go { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: rgba(11,11,13,.05); color: var(--mut); transition: background-color .15s ease, color .15s ease, transform .15s ease; } .bell-go svg { width: 14px; height: 14px; } .bell-go:hover { background: rgba(11,11,13,.12); color: var(--ink); transform: translateX(1px); } /* кликабельные фрагменты текста уведомления (ФИО/лид) - пунктир, как ссылки-сущности по всему софту */ .bell-item .bi-link { color: var(--ink); cursor: pointer; text-decoration: none; border-bottom: 1px dashed var(--bd2); transition: border-color .15s ease, color .15s ease; } .bell-item .bi-link:hover { color: #14567d; border-bottom-color: currentColor; } .bell-item .bi-title { font-size: 13px; font-weight: 600; } .bell-item .bi-body { font-size: 12px; color: var(--ink2); margin-top: 2px; white-space: normal; } .bell-item .bi-time { font-family: var(--mono); font-size: 10.5px; color: var(--ghost); margin-top: 3px; } .bell-item.newlead .bi-title { color: var(--warn-tx); } .bell-empty { padding: 22px 14px; text-align: center; color: var(--ghost); font-size: 13px; } .bell-empty[hidden] { display: none; } tr.flash > td { animation: flashrow 1.6s ease; } @keyframes flashrow { 0% { background-color: rgba(233,225,180,.6); } 100% { background-color: rgba(233,225,180,0); } } /* ---------- каркас страницы ---------- */ .wrap { padding: 16px; } .tabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 14px; padding: 5px; background: linear-gradient(160deg, var(--glass2), var(--glass)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.65); border-radius: 21px; box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.9); } .tab { padding: 7px 16px; border: none; border-radius: 999px; background: transparent; font-size: 13px; color: var(--ink2); text-decoration: none; display: inline-block; align-self: center; line-height: 1.3; transition: background .15s, color .15s; } a.tab { cursor: pointer; } a.tab:hover { background: rgba(11,11,13,.06); color: var(--ink); } /* apple-аудит §12: у мелких элементов лёгкие тени (тяжёлые - у больших) */ .tab.act { background: var(--ink); color: #fff; font-weight: 500; box-shadow: 0 2px 6px -2px rgba(11,11,13,.3); } .tab.off { color: var(--ghost); } .tab.off::after { content: "скоро"; font-family: var(--mono); font-size: 9px; color: var(--ghost); margin-left: 6px; vertical-align: super; letter-spacing: .04em; } /* выпадашку у «Заявок» убрали (решение user 2026-07-14) - подразделы живут только в полосе под шапкой; пункт «Заявки» - обычная вкладка-ссылка */ /* полоса подразделов под шапкой (вариант B), по центру - ровно под навигацией */ .subwrap { padding: 14px 16px 0; text-align: center; } .subwrap .tabs { margin-bottom: 0; } .controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .seg { display: inline-flex; gap: 2px; padding: 4px; background: linear-gradient(160deg, var(--glass2), var(--glass)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.65); border-radius: 999px; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(11,11,13,.04); } .seg a { padding: 5px 14px; border-radius: 999px; color: var(--ink2); text-decoration: none; transition: background .15s, color .15s; } .seg a:hover { color: var(--ink); } .seg a.on { background: var(--ink); color: #fff; font-weight: 500; } .filters { display: flex; gap: 8px; flex-wrap: wrap; } .fsel { font-family: inherit; font-size: 13px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.65); border-radius: var(--r-ctl); background: linear-gradient(160deg, var(--glass2), var(--glass)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--ink); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(11,11,13,.04); } .fsel:focus { outline: none; box-shadow: var(--ring); } .searchbar { margin-bottom: 14px; } .fsearch { min-width: 340px; max-width: 100%; cursor: text; } .fsearch::placeholder { color: var(--ghost); } /* ---------- таблица (стеклянная панель) ---------- */ /* НЕ ставить backdrop-filter/transform/filter на .tablewrap: это делает его containing block для position:fixed, и плавающие .ddmenu (их JS позиционирует в координатах вьюпорта) слетают. Стекло даём translucent-фоном без blur. */ .tablewrap { overflow: auto; max-height: calc(100vh - 210px); background: linear-gradient(170deg, rgba(255,255,255,.92), rgba(250,250,253,.84)); border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-card); box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.95); cursor: grab; } .tablewrap.grabbing { cursor: grabbing; } table { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; } th, td { padding: 9px 12px; border-bottom: 1px solid rgba(11,11,13,.06); text-align: left; vertical-align: middle; } tbody tr[data-lead]:hover > td { background: rgba(11,11,13,.025); } th { color: var(--mut); font-weight: 500; } /* без backdrop-filter: th - containing block для fixed .fio-menu (ddmenu в шапке), иначе меню ФИО слетает. Липкая шапка остаётся читаемой за счёт почти непрозрачного фона. */ thead th { position: sticky; top: 0; z-index: 20; background: rgba(246,246,249,.97); /* apple-аудит §12: край шапки не постоянная линия, а тень, проявляющаяся ТОЛЬКО когда контент реально ушёл под шапку (.is-scrolled ставит JS) */ box-shadow: inset 0 -1px 0 rgba(11,11,13,0); transition: box-shadow .2s ease; font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; } .tablewrap.is-scrolled thead th { box-shadow: inset 0 -1px 0 var(--bd), 0 6px 12px -8px rgba(11,11,13,.22); } /* ---------- телефон: таблица заявок как карточки ---------- Рабочая сетка «Заявок» - 26 колонок. На 390 px она остаётся таблицей только формально: человек листает вбок и теряет, о ком строка. Поэтому строка становится карточкой «подпись - значение»; подписи проставляет app.js по ШАПКЕ таблицы (колонки условные - «Сумма» видна не всем, - и нумерация в CSS разъехалась бы). В свёрнутом виде показываем главное, остальное - по кнопке «Ещё»: карточка из 26 строк ничем не лучше таблицы из 26 колонок. */ @media (max-width: 760px) { .tablewrap { max-height: none; overflow: visible; cursor: auto; background: transparent; border: 0; box-shadow: none; } .tablewrap table { display: block; white-space: normal; font-size: 14px; } .tablewrap thead { display: none; } .tablewrap tbody { display: block; } /* строка - колонка из ячеек: только так работает order у полей ниже */ .tablewrap tbody tr { display: flex; flex-direction: column; margin: 0 0 10px; padding: 4px 14px; background: var(--panel, #fff); border: 1px solid var(--bd); border-radius: var(--r-card); box-shadow: var(--shadow-panel); } .tablewrap tbody tr.mob-wide { padding: 0; } .tablewrap tbody tr.mob-wide > td { display: block; } /* ячейка - строка «подпись - значение». ФЛЕКС, а не грид: в ячейке бывает несколько элементов (кнопка чата и кнопка «поделиться»), и в гриде каждый следующий уезжал бы на свою строку. */ .tablewrap tbody td { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line2, rgba(11,11,13,.06)); } .tablewrap tbody td:last-of-type { border-bottom: 0; } .tablewrap tbody td::before { content: attr(data-label); flex: 0 0 108px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); } /* служебная колонка без подписи - без пустого отступа слева */ .tablewrap tbody td[data-label=""]::before { content: none; } /* Сначала - кто это и что с ним, потом остальное: в таблице порядок колонок выбирали под широкий экран, на телефоне он читается сверху вниз. */ .tablewrap tbody td[data-label="ФИО"] { order: -3; } .tablewrap tbody td[data-label="Артист"] { order: -2; } .tablewrap tbody td[data-label="Статус"], .tablewrap tbody td[data-label="Услуга"] { order: -1; } .mob-more-cell { order: 99; } /* второстепенное - под кнопкой «Ещё» */ .tablewrap tbody tr:not(.mob-open) .mob-extra { display: none; } .mob-more-cell { display: flex !important; padding: 8px 0 10px !important; border-bottom: 0 !important; } .mob-more { font: inherit; font-size: 12.5px; color: var(--ink2); background: transparent; border: 1px solid var(--bd); border-radius: 999px; padding: 6px 14px; cursor: pointer; } .mob-more:hover { background: rgba(11,11,13,.05); } } /* Плитки KPI на телефоне - по две в ряд. Столбиком они съедали весь первый экран, и до списка клиентов приходилось листать мимо четырёх цифр. */ @media (max-width: 760px) { /* селектор с родителем НАМЕРЕННО: базовое `.kpi { flex: 1 1 180px }` стоит ниже по файлу, и при равной специфичности выигрывало бы оно. */ /* 7px = половина зазора .kpi-row (14px): базовое правило стоит ниже по файлу и переживает переопределение, поэтому считаем от НЕГО, а не от своего. С запасом в 4px две плитки не влезали и вставали столбиком. */ .kpi-row > .kpi { flex: 1 1 calc(50% - 7px); padding: 11px 13px; min-width: 0; } .kpi-row > .kpi .kpi-v { font-size: 21px; } .kpi-row > .kpi .kpi-l { font-size: 9.5px; } .kpi-row > .kpi .kpi-s { font-size: 11px; } } /* Телефон, «Сообщения»: список и переписка друг под другом означают, что до чата надо пролистать весь список. Открыт диалог - показываем ТОЛЬКО его, со ссылкой назад; список без открытого диалога занимает экран целиком. */ .conv-back { display: none; } @media (max-width: 760px) { .conv-back { display: block; margin: 0 0 10px; padding: 9px 14px; background: var(--panel, #fff); border: 1px solid var(--bd); border-radius: 999px; color: var(--ink2); text-decoration: none; font-size: 13.5px; width: max-content; } .conv-back:hover { color: var(--ink); } .msgr:has(.conv-back) .conv-col { display: none; } /* запас для браузеров без :has() - класс ставит app.js */ .msgr.has-open .conv-col { display: none; } } /* на широком экране кнопка «Ещё» не нужна: там видно всё */ @media (min-width: 761px) { .mob-more-cell { display: none; } } .mut { color: var(--ghost); } /* Пустая панель раздела («Пока нет лидов»). Скоуп .tablewrap > .empty, чтобы большой паддинг + «[ ]» не протекали на .datex-btn.empty (кнопка даты без значения) и .datex-day.empty (пустые ячейки календаря) - они переиспользуют имя .empty, но должны оставаться компактными. */ .tablewrap > .empty { padding: 56px 40px; text-align: center; color: var(--mut); font-size: 14px; } .tablewrap > .empty::before { content: "[ ]"; display: block; font-family: var(--mono); font-size: 26px; color: var(--ghost); margin-bottom: 10px; letter-spacing: .1em; } a.lnk { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(11,11,13,.28); text-underline-offset: 2px; } a.lnk:hover { text-decoration-color: var(--ink); } /* ---------- бейджи и чипы ---------- */ /* apple-аудит §14: «нет материала/ссылки» отличимо ФОРМОЙ (пунктирный контур, полупрозрачность), не только серым против зелёного */ .b { display: inline-block; min-width: 21px; text-align: center; padding: 2px 6px; border-radius: 7px; font-size: 11px; font-weight: 500; margin-right: 2px; background: rgba(11,11,13,.03); border: 1px dashed var(--bd2); color: var(--ghost); opacity: .75; box-sizing: border-box; } .b.y { background: var(--ok-bg); color: var(--ok-tx); border: 1px solid transparent; opacity: 1; } .b.w { background: var(--warn-bg); color: var(--warn-tx); border: 1px solid transparent; opacity: 1; } a.b { text-decoration: none; cursor: pointer; } a.b.y:hover { filter: brightness(0.95); } a.b:not([href]) { cursor: default; } .icn { display: inline-block; margin-right: 4px; color: #cdd0d6; vertical-align: middle; line-height: 0; } .icn:last-child { margin-right: 0; } .icn.y { color: #1d9e75; } a.icn { text-decoration: none; } a.icn.y:hover { filter: brightness(0.94); } .icn svg { width: 20px; height: 20px; display: block; } .pay { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; } .pay.yes { background: var(--ok-bg); color: var(--ok-tx); } .pay.wait { background: rgba(37,99,235,.12); color: #1d4ed8; } /* ожидает оплаты (счёт выставлен) */ .pay.no { background: var(--warn-bg); color: var(--warn-tx); } .rate { display: inline-block; padding: 1px 8px; border-radius: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; } .rate.hi { background: var(--ok-bg); color: var(--ok-tx); } .rate.mid { background: var(--warn-bg); color: var(--warn-tx); } .rate.lo { background: var(--bad-bg); color: var(--bad-tx); } .cst { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; text-transform: none; } /* ссылка-иконка «Открыть договор» в группе «Договор» модалки «Действия» */ .contract-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 11px; border: 1px solid var(--bd2); border-radius: 10px; font-size: 12px; color: var(--ink); text-decoration: none; background: rgba(11,11,13,.02); } .contract-open:hover { background: rgba(11,11,13,.06); } .contract-open svg { flex: none; } /* закреплённый чат «Договора» вверху списка «Клиенты» + список договоров */ .conv-pinned { border-bottom: 1px solid var(--bd); } .ci-list { display: flex; flex-direction: column; padding: 4px 2px; } .ci-row { display: flex; gap: 11px; padding: 12px 6px; border-bottom: 1px solid var(--bd); } .ci-row:last-child { border-bottom: none; } .ci-main { flex: 1; min-width: 0; } .ci-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .ci-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ci-sub { font-size: 12.5px; color: var(--ink2); margin: 2px 0 8px; } .ci-actions { display: flex; gap: 6px; flex-wrap: wrap; } .cst-waiting_artist { background: var(--warn-bg); color: var(--warn-tx); } .cst-waiting_inflton { background: var(--info-bg); color: var(--info-tx); } .cst-signed { background: var(--ok-bg); color: var(--ok-tx); } /* Папка «Отчёты»: срок отчёта по кампании. Просроченный - тревожным цветом, ждущий - нейтральным: «ждёт» это нормальный ход дел, и красить его в тревогу значит обесценить настоящую тревогу. */ .cst-overdue { background: var(--bad-bg); color: var(--bad-tx); } .cst-waiting { background: var(--warn-bg); color: var(--warn-tx); } .fmt { display: inline-block; padding: 2px 9px; border-radius: 7px; font-size: 11px; font-weight: 500; background: var(--info-bg); color: var(--info-tx); } .fmt.single { background: rgba(11,11,13,.06); color: var(--mut); } .mat { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: 11px; font-weight: 600; background: var(--bad-bg); color: var(--bad-tx); } .ab { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: 11px; background: rgba(11,11,13,.06); color: var(--ink2); margin: 1px 4px 1px 0; } .ab.ab-none { background: var(--warn-bg); color: var(--warn-tx); } .ab[hidden] { display: none; } .fio-client[hidden] { display: none; } .svc { display: inline-block; padding: 2px 9px; border-radius: 7px; font-size: 11px; font-weight: 500; background: var(--info-bg); color: var(--info-tx); } .svc.mastering { background: rgba(11,11,13,.06); color: var(--mut); } .svc.urgent { background: var(--bad-bg); color: var(--bad-tx); } .src { display: inline-block; padding: 2px 9px; border-radius: 7px; font-size: 11px; font-weight: 500; background: #e3eef7; color: #14567d; } /* Значок канала вместо слова (владелец 31.08.2026). Цвета фирменные - канал узнают по цвету раньше, чем по форме; размер как у текстового бейджа, чтобы строки таблиц не «прыгали» при смешанных источниках. */ .srci { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; vertical-align: middle; } .srci svg { width: 14px; height: 14px; display: block; } .srci-tg { background: #e3f2fd; color: #229ed9; } .srci-vk { background: #e5efff; color: #0077ff; } .srci-site { background: rgba(11,11,13,.06); color: var(--ink2); } /* Тумблер каналов в шапке чата: у склеенного клиента переписка идёт и в Telegram, и во ВКонтакте, и это ДВЕ разные ленты. Владелец 31.08.2026 просил переключать их логотипами, а не словами - те же значки, что в колонке «Источник», так что канал читается одинаково по всей СРМ. Неактивный приглушён, а не спрятан: видно, что второй канал существует. */ .chtog { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(11,11,13,.05); vertical-align: middle; } .chtog a { display: inline-flex; position: relative; border-radius: 7px; text-decoration: none; opacity: .45; filter: grayscale(1); transition: opacity .12s ease, filter .12s ease; } .chtog a:hover { opacity: .8; filter: grayscale(.3); } .chtog a.on { opacity: 1; filter: none; box-shadow: 0 1px 3px rgba(11,11,13,.16); } .chtog a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } /* Точка непрочитанного на СКРЫТОМ канале - иначе сообщение, пришедшее во вторую ленту, ничем бы о себе не заявило. */ .chtog .chdot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad-tx); border: 1.5px solid #fff; } /* Несколько каналов подряд в колонке «Источник». Зазор маленький: значки читаются как ОДНА характеристика клиента («он есть тут и тут»), а не как два независимых поля. */ .srcs { display: inline-flex; gap: 3px; align-items: center; } /* Вложение в пузыре переписки: значок документа с именем файла. Владелец 01.09.2026: «приходит ссылкой, надо - иконкой документа». Ссылка на файл ВКонтакте живёт не вечно, поэтому имя рядом обязательно: по нему видно, что приходило, даже когда ссылка протухла. Файлы из Telegram приходят без ссылки вовсе (медиа не храним) - такой чип приглушён и не кликается. */ .filechip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 4px 0 0; padding: 5px 10px 5px 8px; border-radius: 10px; background: rgba(11,11,13,.05); font-size: 12.5px; } .filechip svg { width: 15px; height: 15px; flex: none; color: var(--ink2); } .filechip a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--bd2); overflow-wrap: anywhere; } .filechip a:hover { border-bottom-color: var(--ink); } .filechip.noload { color: var(--mut); } .filechip.noload svg { color: var(--ghost); } /* Исходящий пузырь чёрный, и серый чип на нём давал 3.6:1 - имя файла, которое менеджеру надо ПРОЧИТАТЬ, читалось хуже всего остального в ленте. На тёмном фоне чип светлый. */ .bub.out .filechip { background: rgba(255,255,255,.14); color: rgba(255,255,255,.92); } .bub.out .filechip svg { color: rgba(255,255,255,.66); } .bub.out .filechip a { color: #fff; border-bottom-color: rgba(255,255,255,.4); } .bub.out .filechip a:hover { border-bottom-color: #fff; } .bub.out .filechip.noload { color: rgba(255,255,255,.8); } /* Промокод в таблице акций: щелчок копирует. Моноширинный - код диктуют по телефону и путают «0» с «O». */ /* Три ссылки под метку. Кнопка, а не текст ссылки: полный адрес занял бы полстроки таблицы, а нужен он не для чтения, а для вставки в рекламный кабинет. Сам адрес - в подсказке при наведении. */ .reflinks { display: flex; flex-wrap: wrap; gap: 6px; } .reflink { font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer; border: 1px solid var(--bd2); border-radius: 8px; background: #fff; color: var(--ink2); } .reflink:hover { background: rgba(11,11,13,.05); color: var(--ink); } .reflink.copied { border-color: var(--ink); color: var(--ink); } .promocode { font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; letter-spacing: .04em; padding: 4px 9px; cursor: pointer; border: 1px dashed var(--bd2); border-radius: 8px; background: transparent; color: var(--ink); } .promocode:hover { border-style: solid; background: rgba(11,11,13,.04); } .promocode.copied { border-style: solid; border-color: var(--ok-bd, var(--ink)); background: rgba(11,11,13,.06); } /* поле-галочка в строке формы: подпись сверху, как у соседних полей */ .chk-f { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; } .chk-f > span:first-child { flex: 0 0 100%; } .crossflag { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: 11px; font-weight: 600; background: var(--ok-bg); color: var(--ok-tx); } /* ---------- раздел «Клиенты» ---------- */ /* чип состояния клиента (бан / доступ / заблокировал бота) + реф. отметка */ .uchip { display: inline-block; padding: 1px 7px; border-radius: 7px; font-size: 10.5px; font-weight: 600; line-height: 16px; vertical-align: 1px; white-space: nowrap; } .uchip.bad { background: var(--bad-bg); color: var(--bad-tx); } .uchip.warn { background: var(--warn-bg); color: var(--warn-tx); } .uchip.gray { background: rgba(11,11,13,.06); color: var(--mut); } .uchip.ref { background: var(--ok-bg); color: var(--ok-tx); } /* строка поиска идёт СРАЗУ под KPI-плашками - без отступа наезжает на них (.kpi-row задаёт только margin-top, под Селектор) */ .kpi-row + .searchbar { margin-top: 16px; } /* сортируемый заголовок колонки (ссылка) + кликабельная строка клиента */ .thsort { color: inherit; text-decoration: none; border-bottom: 1px dashed transparent; } .thsort:hover { border-bottom-color: currentColor; } .thsort.act { color: #14567d; font-weight: 700; } tr[data-client-card] { cursor: pointer; } tr[data-client-card]:hover td { background: #f3f7fb; } .clientstbl td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* заголовок раздела (h1) - как org-h2, но уровнем выше */ .page-h1 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin: 4px 2px 14px; } /* ---------- карточка клиента (редизайн owner 2026-08-20) ---------- Секции с волосяными разделителями; раскрывашки = кликабельная ВСЯ строка с маленьким шевроном справа (поворот), панель - мягкая подложка --bg2 без рамок-лесенок; строки заявок/релизов - крупные, с hover-подсветкой. */ /* overflow-y: базовый .actmodal-card (НИЖЕ по файлу - его hidden побеждал бы при равной специфичности) режет 82vh - длинные списки релизов/заявок должны скроллиться внутри карточки (аудит MED); двойной класс поднимает вес */ .cpop-card { width: 520px; max-width: calc(100vw - 32px); padding: 0 0 16px; } .actmodal-card.cpop-card { overflow-y: auto; -webkit-overflow-scrolling: touch; } .cpop-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 12px; } .cpop-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .cpop-sub { font-size: 12.5px; color: var(--mut); margin-top: 2px; } .cpop-sec { padding: 10px 20px 4px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; } .cpop-sec + .cpop-sec { border-top: 1px solid var(--bd); margin-top: 8px; padding-top: 12px; } .cpop-kv { display: flex; gap: 8px; padding: 2px 0; align-items: baseline; } .cpop-kv .mut { color: var(--mut); } /* строка с дропдауном (менеджер): метка и дата «с ...» - ровно по центру относительно кнопки кастомного селекта */ .cpop-kv-mid { align-items: center; } .cpop-kv .selx .selx-btn { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* раскрывашка: вся строка кликабельна */ .cpop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; cursor: pointer; user-select: none; transition: background .15s ease; } .cpop-row:hover { background: var(--bg2); } .cpop-row b { font-weight: 700; } .cpop-row .mut { color: var(--mut); } .cpop-chev { flex: 0 0 auto; width: 7px; height: 7px; border-right: 1.6px solid var(--ghost); border-bottom: 1.6px solid var(--ghost); transform: rotate(-45deg); transition: transform .18s ease, border-color .15s ease; } .cpop-row:hover .cpop-chev { border-color: var(--ink); } .cpop-row[aria-expanded="true"] .cpop-chev { transform: rotate(45deg); } /* панель раскрывашки: мягкая подложка, появление с фейдом */ .cpop-pane { background: var(--bg2); border-radius: 12px; padding: 5px; margin: 2px -6px 8px; } .cpop-pane[hidden] { display: none; } .cpop-pane:not([hidden]) { animation: cpopin .16s ease; } @keyframes cpopin { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } .cpop-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: 9px; font-size: 13px; color: var(--ink); text-decoration: none; cursor: default; transition: background .12s ease, transform .12s ease; } .cpop-item:hover { background: rgba(255,255,255,.85); transform: translateX(2px); } a.cpop-item { cursor: pointer; } a.cpop-item:hover .cpop-item-t { color: #14567d; } .cpop-item-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cpop-item .nolink { color: var(--ink2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cpop-item .pay, .cpop-item .dlg-st { flex: 0 0 auto; } /* вложенная панель заявок направления - чуть утоплена, без второй подложки */ .cpop-pane .cpop-row { margin: 0; border-radius: 9px; padding: 7px 11px; } .cpop-pane .cpop-row:hover { background: rgba(255,255,255,.85); } .cpop-pane .cpop-pane { background: none; padding: 0 0 2px 8px; margin: 0; } /* дропдаун смены менеджера в карточке */ .cpop-mgr-sel { font: inherit; font-size: 12.5px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--bd2); background: #fff; max-width: 210px; } .cpop-ref { display: flex; gap: 8px; align-items: center; cursor: pointer; padding: 2px 0; } .cpop-ref input[type="checkbox"] { accent-color: var(--ink); } /* ФИО-ссылка на карточку клиента в разделах заявок */ /* owner 2026-08-22 п.7: ФИО-плашка как строки карточки (скрин «Выручка лейбла») - фон и шеврон появляются при наведении; отрицательные поля компенсируют padding, чтобы колонки таблиц не разъезжались; ширина шеврона зарезервирована (opacity, не display) - без дёрганья строки */ .clilink { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; padding: 3px 7px; margin: -3px -7px; border-radius: 8px; transition: background-color .16s ease; } .clilink::after { content: "›"; font-size: 12px; font-weight: 600; color: var(--mut); width: 9px; flex-shrink: 0; opacity: 0; transform: translateX(-3px); transition: opacity .16s ease, transform .16s ease; } .clilink:hover, .clilink:focus-visible { background: rgba(11,11,13,.06); } .clilink:hover::after, .clilink:focus-visible::after { opacity: 1; transform: translateX(0); } /* «Реклама»: ввод слева, воронки справа (owner 2026-08-20) + логотипы каналов */ /* owner 2026-08-24 п.2: 4 РОВНЫХ прямоугольника - грид по рядам (ввод канала строго напротив его воронки, высоты ряда равны), отступ сверху больше */ .ads-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; margin-top: 22px; } .ads-grid .fin-card { height: 100%; box-sizing: border-box; margin: 0; display: flex; flex-direction: column; } .ads-grid .fin-card .funnel, .ads-grid .fin-card .adsform { flex: 1; } @media (max-width: 980px) { .ads-grid { grid-template-columns: 1fr; } } .adlogo { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; margin-right: 7px; vertical-align: -3px; font-size: 10px; font-weight: 800; color: #fff; letter-spacing: -.02em; } .adlogo.vk::before { content: "VK"; } .adlogo.vk { background: #07f; } .adlogo.yd::before { content: "Я"; font-size: 11px; } .adlogo.yd { background: #FC3F1D; } .surcharge { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: 11px; font-weight: 600; background: var(--ok-bg); color: var(--ok-tx); margin-left: 6px; } .surcharge[hidden] { display: none; } .ddl { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; white-space: nowrap; } .ddl.warn { background: #f2dfa4; color: #7c5308; } .ddl.over { background: #f4c8c4; color: #8f2c24; } /* ---------- раздел «Сообщения» (мессенджер) ---------- */ /* бейдж-счётчик «в очереди» рядом с пунктом навигации / кнопкой хаба */ .navbadge { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 3px; border-radius: 999px; background: var(--bad-tx); color: #fff; font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center; vertical-align: middle; } /* цветовой код: КРАСНЫЙ - сообщения (по умолчанию), СИНИЙ (.b) - заявки/лиды (тот же синий, что у подсветки лида при переходе из чата). Цвет держим и на активной чёрной вкладке - код важнее инверсии. */ /* счётчик в навигации носит класс b ради размера/скругления, но он НЕ бейдж материала: пунктирный контур и приглушение из .b здесь снимаем */ .navbadge.b { background: #586eeb; border: 0; opacity: 1; } /* статус диалога: в очереди / открыт / закрыт (чип) */ .dlg-st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; } .dlg-st.pending { background: var(--warn-bg); color: var(--warn-tx); } .dlg-st.open { background: var(--ok-bg); color: var(--ok-tx); } .dlg-st.closed { background: rgba(11,11,13,.06); color: var(--mut); } /* чипы «лид» и «ведёт» */ .lead-chip { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: 11px; font-weight: 500; background: rgba(11,11,13,.05); color: var(--ink2); white-space: nowrap; } .mgr-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--info-bg); color: var(--info-tx); white-space: nowrap; } /* Длинная поясняющая подпись в шапке папки. nowrap у mgr-chip рассчитан на короткие метки («ведёт Дима») и на узком экране выпихивал такую строку за карточку - здесь перенос разрешён. */ .mgr-chip.wrap { white-space: normal; } .cd-user { font-family: var(--mono); font-size: 11.5px; color: var(--mut); } /* две панели: список слева, диалог справа */ .msgr { display: flex; gap: 14px; align-items: stretch; height: calc(100vh - 148px); min-height: 440px; } .conv-col, .conv-detail { background: linear-gradient(160deg, var(--glass2), var(--glass)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--bd); border-radius: var(--r-card); box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.9); overflow: hidden; } .conv-col { flex: 0 0 340px; display: flex; flex-direction: column; } .conv-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* фильтр статусов над списком */ .conv-filter { display: flex; gap: 2px; padding: 8px; border-bottom: 1px solid var(--bd); } .conv-filter a { flex: 1; text-align: center; padding: 6px 4px; border-radius: 8px; font-size: 12px; color: var(--ink2); text-decoration: none; transition: background .15s, color .15s; } .conv-filter a:hover { background: rgba(11,11,13,.06); color: var(--ink); } .conv-filter a.on { background: var(--ink); color: #fff; font-weight: 500; } /* список диалогов */ .conv-scroll { flex: 1; overflow-y: auto; } .conv { display: flex; gap: 10px; padding: 11px 12px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--bd); position: relative; transition: background .12s; } .conv:hover { background: rgba(11,11,13,.04); } .conv.sel { background: rgba(11,11,13,.07); } .conv.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink); } .av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 13.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .av.lg { width: 48px; height: 48px; font-size: 18px; } .av.sm { width: 26px; height: 26px; font-size: 11px; } /* имя сотрудника с аватаром в таблице ФОТ (owner 2026-07-23) */ .fot-name { display: inline-flex; align-items: center; gap: 8px; } .conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .conv-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .conv-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-time { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--ghost); } .conv-sub { font-size: 12.5px; color: var(--ink2); margin: 1px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .conv.pend .conv-name::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn-tx); margin-left: 6px; vertical-align: middle; } /* у клиентских строк «в очереди» видно чипом статуса ниже - жёлтую точку у имени не дублируем (в flex-раскладке имя+счётчик она уехала бы за счётчик) */ .conv.pend .conv-name-staff::after { content: none; } /* красный кружок: у лида есть заявка, требующая действия модератора */ .conv-act { width: 8px; height: 8px; border-radius: 50%; background: var(--bad-tx); flex: 0 0 auto; } /* строка коллеги/клиента: имя - (бэйдж должности) - счётчик непрочитанного. Полоса тянется на всю ширину, счётчик прижат вправо (margin-left:auto) и не режется никогда. У СОТРУДНИКОВ имя не ужимается (короткое), при нехватке места режется БЭЙДЖ. У КЛИЕНТОВ бэйджа нет - длинное ФИО усекается само (.conv-name-cli), иначе имя не ужалось бы и счётчик налез на время. */ .conv-name-staff { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; } .conv-name-staff .conv-nm { min-width: 0; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-name-staff .conv-role { margin-left: 0; min-width: 0; flex-shrink: 100; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-name-cli .conv-nm { flex-shrink: 1; } .conv-count { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--bad-tx); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } /* Диалог в очереди, где клиент ещё ничего не написал: числа непрочитанных нет, а в бейдж раздела он попадает - без этой точки его было не найти. */ /* «Показано N из M» под поиском: список диалогов ограничен потолком, и это обязано быть видно - иначе кажется, что клиента в системе нет. */ .conv-more { font-size: 11.5px; line-height: 1.45; color: var(--ghost); padding: 2px 2px 0; } .conv-more a { color: var(--ink2); } /* Подвал таблицы заявок: «Показано N», «сколько всего», «в начало списка». Полного числа «из M» тут нет намеренно - см. _leadnav.html. */ .leads-pager { padding: 10px 2px 0; display: flex; gap: 12px; flex-wrap: wrap; } /* Кнопка, которая читается как ссылка (запрос «сколько всего» - действие, а не переход, поэтому button, а не ). */ .lnkbtn { font: inherit; font-size: inherit; color: var(--ink2); cursor: pointer; background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-style: dashed; } .lnkbtn:disabled { cursor: default; text-decoration: none; color: var(--ghost); } .conv-wait { flex: 0 0 auto; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--bad-tx); } .conv-empty { padding: 34px 16px; text-align: center; color: var(--ghost); font-size: 13px; } /* панель диалога */ .cd-head { display: flex; gap: 13px; padding: 16px 18px; border-bottom: 1px solid var(--bd); align-items: flex-start; } .cd-headmain { min-width: 0; flex: 1; } .cd-name { font-size: 16px; font-weight: 600; } .cd-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; } .cd-subj { font-size: 12.5px; color: var(--ink2); margin-top: 8px; } .cd-acctmgr { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12.5px; } .acctmgr-name { font-weight: 600; } .acctmgr-form { display: inline-flex; align-items: center; gap: 6px; } /* padding-right держим под стрелку .sel (28px), иначе шорхенд перебивал бы его и стрелка ложилась на имя сотрудника (owner 2026-08-20) */ .acctmgr-form .sel { font-size: 12px; padding: 4px 26px 4px 8px; } .acctmgr-go { font-size: 12px; padding: 5px 11px; border: 1px solid var(--bd2); border-radius: 8px; background: var(--ink); color: #fff; cursor: pointer; } .acctmgr-go:hover { opacity: .9; } .acctmgr-hist { font-size: 12px; } .acctmgr-hist summary { cursor: pointer; } .acctmgr-hist ul { margin: 4px 0 0; padding-left: 16px; } .cd-body { flex: 1; overflow-y: auto; padding: 16px 18px; } .cd-note { padding: 11px 14px; border-radius: 12px; background: var(--info-bg); color: var(--info-tx); font-size: 12.5px; line-height: 1.45; } .cd-body .toast { margin-top: 12px; margin-bottom: 0; } /* лента переписки: пузыри (in = клиент слева, out = мы справа) */ .cd-thread { display: flex; flex-direction: column; gap: 9px; } .bub { max-width: 68%; padding: 8px 12px 6px; border-radius: 14px; font-size: 13px; line-height: 1.45; word-break: break-word; } .bub-text { white-space: pre-wrap; } .bub.in { align-self: flex-start; background: #fff; border: 1px solid var(--bd); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(11,11,13,.05); } .bub.out { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 2px 6px -3px rgba(11,11,13,.28); } .bub-who { font-size: 11px; font-weight: 600; margin-bottom: 2px; color: var(--info-tx); } .bub.out .bub-who { color: rgba(255,255,255,.75); } .bub-meta { font-family: var(--mono); font-size: 9.5px; color: var(--ghost); margin-top: 3px; text-align: right; } .bub.out .bub-meta { color: rgba(255,255,255,.55); } /* модерация: системное авто-событие - серый, по центру, отличается от обеих сторон */ .bub.mod { align-self: center; max-width: 82%; text-align: center; background: rgba(11,11,13,.05); color: var(--ink2); border: 1px dashed var(--bd2); border-radius: 10px; box-shadow: none; } .bub.mod .bub-who { color: var(--mut); text-transform: uppercase; letter-spacing: .05em; } .bub.mod .bub-meta { color: var(--ghost); text-align: center; } /* группы «Клиенты | Сотрудники» над фильтрами диалогов + счётчики */ .conv-groups { display: flex; gap: 2px; padding: 8px 8px 0; } .conv-groups a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border-radius: 10px; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--mut); } .conv-groups a:hover { background: rgba(11,11,13,.05); color: var(--ink); } .conv-groups a.on { background: var(--ink); color: #fff; } /* индикатор непрочитанного у вкладки группы - аккуратная красная точка */ /* счётчик непрочитанного на подвкладках «Клиенты»/«Сотрудники» (цифра, не точка). На активной тёмной вкладке инвертируем: белый фон, тёмный текст - иначе красный на почти-чёрном плохо читается. */ .grp-count { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bad-tx); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .conv-groups a.on .grp-count { background: #fff; color: var(--ink); } /* сообщение = столбик [пузырь, иконки ПОД ним]; align по стороне сообщения */ .msgrow { display: flex; flex-direction: column; gap: 3px; max-width: 68%; } .msgrow.in { align-self: flex-start; align-items: flex-start; } .msgrow.out { align-self: flex-end; align-items: flex-end; } .msgrow.mod { align-self: center; align-items: center; max-width: 82%; } .msgrow .bub { max-width: 100%; } .msgrow.selected .bub { box-shadow: 0 0 0 2px var(--info-tx); } /* иконки ПОД пузырём (не внутри), видны при наведении на сообщение */ .bub-tools { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; } .msgrow:hover .bub-tools { opacity: 1; } .bub-tool { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--bd2); border-radius: 7px; background: #fff; color: var(--mut); cursor: pointer; } .bub-tool svg { width: 15px; height: 15px; } .bub-tool:hover { background: rgba(11,11,13,.06); color: var(--ink); } .bub-tool.on { background: var(--ink); color: #fff; border-color: var(--ink); } .bub-tool.copied { color: var(--ok-tx); border-color: rgba(29,111,66,.4); } /* реакция на пузыре (эмодзи в чёрной пилюле - в стиле софта) */ .bub-react { position: absolute; bottom: -10px; right: 8px; padding: 1px 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; line-height: 1.4; box-shadow: 0 2px 6px -2px rgba(11,11,13,.5); } .msgrow.in .bub-react { right: auto; left: 8px; } .msgrow .bub { position: relative; } /* пикер реакций (динамично-чёрный) */ .react-pop { position: absolute; z-index: 320; display: flex; gap: 2px; padding: 4px 6px; border-radius: 999px; background: var(--ink); box-shadow: 0 12px 30px -12px rgba(11,11,13,.6); } .react-pop button { border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 3px 4px; border-radius: 999px; } .react-pop button:hover { background: rgba(255,255,255,.16); } /* карточка заявки в стафф-чате («поделиться») - визитка; аватар во всю высоту */ .leadcard { display: flex; align-items: stretch; gap: 0; text-decoration: none; min-width: 230px; border: 1px solid var(--bd2); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.75); color: var(--ink); } .bub.out .leadcard { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; } .leadcard-av { flex: none; width: 52px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-weight: 700; font-size: 18px; } .bub.out .leadcard-av { background: rgba(255,255,255,.22); color: #fff; } .leadcard-main { padding: 10px 12px; } .bub.out .leadcard-av { background: rgba(255,255,255,.22); color: #fff; } .leadcard-main { min-width: 0; } .leadcard-t { display: block; font-size: 13.5px; font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leadcard-s { display: block; margin-top: 2px; font-size: 11px; color: var(--mut); } .bub.out .leadcard-s { color: rgba(255,255,255,.7); } .leadcard-open { margin-top: 5px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--info-tx); } .bub.out .leadcard-open { color: #fff; } .leadcard:hover .leadcard-t { text-decoration: underline; } /* иконка «поделиться заявкой» - ТОЧНО как иконка чата (.chatbtn): тот же размер, рамка и фон, чтобы стояли в одном стиле (owner 2026-07-22) */ .lead-share { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 4px; padding: 0; border: 1px solid var(--bd2); border-radius: 9px; background: #fff; color: var(--ink2); cursor: pointer; vertical-align: middle; flex: none; transition: color .15s, background .15s; } .lead-share svg { width: 16px; height: 16px; flex: none; } .lead-share:hover { background: rgba(11,11,13,.05); color: var(--ink); } /* чат + «поделиться» в одну линию, строго по центру (иначе share съезжал вниз) */ .cell-chatshare { white-space: nowrap; } .cell-chatshare > * { vertical-align: middle; } .lead-chipwrap { display: inline-flex; align-items: center; } /* у чипов «Заявки клиента» в чате - БЕЗ подложки (голая иконка, как было) */ .cd-leadschips .lead-share { width: 24px; height: 24px; margin-left: 2px; border-color: transparent; background: none; } .cd-leadschips .lead-share svg { width: 15px; height: 15px; } .cd-leadschips .lead-share:hover { background: rgba(11,11,13,.06); } /* отметка прочтения на своих сообщениях в стафф-чате (✓ / ✓✓) */ .bub.out .rr { margin-left: 4px; font-family: var(--mono); } /* бейдж должности - цвет по роли/специализации (r-) */ .conv-role { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(11,11,13,.06); color: var(--mut); font-size: 10.5px; font-weight: 600; vertical-align: middle; } .conv-role.r-owner { background: #f4ecd0; color: #8a6d15; } .conv-role.r-director { background: #efe6f8; color: #6b21a8; } .conv-role.r-manager { background: #e3e9fb; color: #35408f; } .conv-role.r-sound { background: #e2f2e6; color: #1d6f42; } .conv-role.r-target { background: #fdeadc; color: #b45309; } .conv-role.r-contracts{ background: #dff1f4; color: #0e6f8a; } /* бейдж не меняет цвет при выборе диалога (owner 2026-07-23): фон выделения светлый, поэтому раньше белый текст «пропадал» - оставляем цвет по роли */ /* в шапке стафф-чата бейдж крупнее */ .cd-name .conv-role { font-size: 11px; padding: 2px 9px; } /* полоса закреплённых сообщений вверху стафф-переписки */ .pinned-strip { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(11,11,13,.04); border-left: 3px solid var(--ink); } .pinned-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink2); } .pin-ic { width: 14px; height: 14px; flex: none; color: var(--mut); } .pinned-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pinned-unpin { border: 0; background: none; color: var(--ghost); cursor: pointer; font-size: 13px; } .pinned-unpin:hover { color: var(--bad-tx); } /* панель мульти-пересылки: компактная «пилюля», ТОЛЬКО при выборе сообщений. [hidden] обязателен - иначе display:inline-flex перебивает html-атрибут hidden и панель висит всегда (owner 2026-07-23: «Выбрано: 0» на весь экран). */ .fwdbar { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; } .fwdbar[hidden] { display: none; } .fwdbar-go { border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; padding: 4px 12px; cursor: pointer; } .fwdbar-x { border: 0; background: none; color: rgba(255,255,255,.7); font: inherit; padding: 4px 6px; cursor: pointer; } .fwdbar-x:hover { color: #fff; } /* автодополнение @упоминаний */ .mentionpop { position: absolute; z-index: 320; min-width: 180px; max-height: 200px; overflow-y: auto; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--bd); box-shadow: 0 18px 40px -18px rgba(11,11,13,.35); } .mentionpop button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; } .mentionpop button:hover, .mentionpop button.on { background: rgba(11,11,13,.06); } .mention-av { flex: none; width: 24px; height: 24px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .mention-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* подгруппы в пикере «кому переслать» (коллеги / клиенты) */ .staffpick-sub { padding: 6px 10px 3px; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ghost); } /* пикер «кому отправить» (список активных коллег) */ .staffpick { position: absolute; z-index: 300; min-width: 180px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--bd); box-shadow: 0 18px 40px -18px rgba(11,11,13,.35); } .staffpick-cap { padding: 4px 10px 6px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ghost); } .staffpick-opt { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; } .staffpick-opt:hover { background: rgba(11,11,13,.06); } /* иконка чата в строке лида + счётчик «без ответа» */ .chatbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--bd2); border-radius: 9px; background: #fff; color: var(--ink2); cursor: pointer; transition: color .15s, background .15s; } .chatbtn svg { width: 16px; height: 16px; } .chatbtn:hover { color: var(--ink); background: rgba(11,11,13,.05); } .chatbtn.open { background: var(--ink); color: #fff; border-color: var(--ink); } .chatcnt { position: absolute; top: -6px; right: -7px; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad-tx); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; } /* мини-чат в раскрывашке строки лида: во всю ширину ВИДИМОЙ таблицы. Таблица дистрибуции шире экрана (горизонтальный скролл) - фикс. ширина от вьюпорта + sticky, чтобы бокс не уезжал за экран при скролле вбок. */ .chatbox { display: flex; gap: 16px; align-items: flex-end; padding: 12px 14px; background: rgba(11,11,13,.025); border-radius: 12px; position: sticky; left: 12px; width: calc(100vw - 92px); max-width: 1600px; } .chatmini { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .chatmini .bub { max-width: 55%; font-size: 12.5px; } .chatmore { font-family: var(--mono); font-size: 10.5px; color: var(--ghost); } /* Ответ прямо из мини-чата (владелец 27.08.2026). Колонка, а не строка: .chatbox выравнивает детей по нижнему краю, и поле должно стоять вровень с кнопкой «Перейти к диалогу», а не растягивать бокс. */ .mini-reply { flex: 0 0 260px; display: flex; gap: 6px; align-items: center; } .mini-reply-in { flex: 1; min-width: 0; padding: 7px 11px; font: inherit; font-size: 12.5px; border: 1px solid var(--bd); border-radius: 999px; background: var(--panel, #fff); color: var(--ink); } .mini-reply-in:focus { outline: 2px solid var(--ink); outline-offset: 1px; } .mini-reply-go { flex: 0 0 auto; padding: 7px 13px; border: 1px solid var(--bd); border-radius: 999px; background: var(--panel, #fff); color: var(--ink); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; } .mini-reply-go:hover { background: rgba(11,11,13,.05); } .btn-godialog { flex: 0 0 auto; display: inline-block; padding: 7px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; text-decoration: none; box-shadow: 0 2px 6px -2px rgba(11,11,13,.3); white-space: nowrap; } .btn-godialog:hover { background: var(--ink2); } /* чипы «лиды клиента» в панели диалога (переход в раздел с подсветкой) */ .cd-leadschips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; } a.lead-chip.golead { text-decoration: none; transition: background .15s, color .15s; } a.lead-chip.golead:hover { background: var(--ink); color: #fff; } /* «все заявки»: чип-обводка (прозрачный + чёрная рамка) + стрелка СПРАВА от обводки (▾ вниз = свёрнуто, ▸ вправо = развёрнуто). Прячем сверх-3 чипы КЛАССОМ .collapsed на контейнере (не hidden - его перебивает display у .lead-chip). */ .cd-leadschips.collapsed .lead-extra { display: none; } .leads-more { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; } .leads-more .lm-box { padding: 2px 9px; border-radius: 7px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 11px; font-weight: 500; white-space: nowrap; } .leads-more .lm-arrow { font-size: 10px; line-height: 1; color: var(--ink); } .leads-more:hover .lm-box { background: rgba(11,11,13,.06); } /* «Действия» стоит НАД кнопкой «Отправить» в правой колонке компоуза (только менеджер) + модалка Договор/Счёт */ /* Колонка кнопок ВРОВЕНЬ с окном ввода (та же высота, top и bottom совпадают): Действия над Отправить, вплотную (owner 2026-07-22). staff: одна кнопка по центру по вертикали (#9). */ .cd-sendcol { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; align-items: stretch; min-width: 150px; } /* стафф-компоуз = как клиентский (без «Действия»): «Отправить» прижата вниз */ .cd-sendcol.staff-sendcol { justify-content: flex-end; min-width: 130px; } .cd-sendcol .actions-btn, .cd-sendcol .btn-send { width: 100%; justify-content: center; text-align: center; } .actions-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 13px; border: 1px solid var(--bd2); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; } .actions-btn:hover { background: rgba(11,11,13,.05); } /* красный счётчик заявок, требующих действия, у кнопки «Действия» */ .act-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad-tx); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .cd-sendcol .btn-send { align-self: auto; } /* низ колонки задаёт justify-content: flex-end */ /* модалка: оверлей поверх страницы */ .actmodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } .actmodal[hidden] { display: none; } .actmodal-back { position: absolute; inset: 0; background: rgba(11,11,13,.42); } .actmodal-card { position: relative; width: 640px; max-width: 100%; max-height: 82vh; display: flex; flex-direction: column; background: var(--panel, #fff); border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(11,11,13,.5); overflow: hidden; animation: actmpop .22s cubic-bezier(.2,.9,.3,1.15); } @keyframes actmpop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } /* apple-аудит §7: выход тем же путём, что вход (раньше все закрытия - жёсткий обрыв). Класс .closing вешает JS-хелпер closeFx перед hidden/remove. */ .closing .actmodal-card, .closing .uiconfirm-card { animation: actmout .15s ease-in forwards; } .closing .actmodal-back, .closing .uiconfirm-back { animation: actmfout .15s ease forwards; } @keyframes actmout { to { opacity: 0; transform: translateY(8px) scale(.98); } } @keyframes actmfout { to { opacity: 0; } } .actmodal-back { animation: actmfade .2s ease; } @keyframes actmfade { from { opacity: 0; } to { opacity: 1; } } .actmodal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--bd); font-weight: 600; font-size: 14px; } .actmodal-x { border: 0; background: none; font-size: 16px; color: var(--mut); cursor: pointer; line-height: 1; } .actmodal-x:hover { color: var(--ink); } .actmodal-empty { padding: 30px 18px; text-align: center; } .actmodal-body { display: flex; min-height: 0; } .actmodal-list { flex: 0 0 220px; border-right: 1px solid var(--bd); overflow-y: auto; padding: 8px; } .req-pick { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 9px; cursor: pointer; font: inherit; margin-bottom: 2px; transition: background-color .15s ease; } .req-pick:hover { background: rgba(11,11,13,.05); } /* тонкий скроллбар списка и панелей модалки (webkit) */ .actmodal-list::-webkit-scrollbar, .actmodal-panels::-webkit-scrollbar { width: 6px; } .actmodal-list::-webkit-scrollbar-thumb, .actmodal-panels::-webkit-scrollbar-thumb { background: rgba(11,11,13,.16); border-radius: 3px; } .actmodal-list::-webkit-scrollbar-thumb:hover, .actmodal-panels::-webkit-scrollbar-thumb:hover { background: rgba(11,11,13,.28); } .req-pick.on { background: var(--ink); } .req-pick.on .req-pick-name { color: #fff; } .req-pick.on .rel-st { filter: brightness(1.06); } .req-pick-name { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* красный кружок «требует действия» слева от имени заявки в списке модалки */ .req-pick-name .conv-act { display: inline-block; margin-right: 6px; vertical-align: middle; } /* «Все заявки (N)»: раскрыть хвост списка (по умолчанию видны 3 последних) */ .req-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 4px 0; padding: 7px 10px; border: 1px dashed var(--bd2); border-radius: 9px; background: none; color: var(--mut); font: inherit; font-size: 12.5px; cursor: pointer; } .req-more:hover { background: rgba(11,11,13,.04); color: var(--ink); } /* apple-аудит §8: единая конвенция раскрывашек ▸ -> поворот 90° = ▾ */ .req-more-ar { display: inline-block; transition: transform .15s; } .req-more.open .req-more-ar { transform: rotate(90deg); } /* «Счёт без заявки» - отдельный пункт списка модалки (не релиз, а услуга) */ .req-pick-calc { margin-top: 4px; border-top: 1px dashed var(--bd2); padding-top: 9px; } .req-pick-calc .req-pick-name { color: var(--mut); } /* сколько счетов-услуг ждут подтверждения (панель за этим пунктом) */ .req-pick-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--warn-bg); color: var(--warn-tx); font-size: 11px; font-weight: 600; } .req-pick-calc.on .req-pick-name { color: #fff; } /* калькулятор: поля столбиком, кнопки в ряд, разбивка расчёта под ними */ /* .mod-actform ниже задаёт display:inline - тот же вес селектора, но ПОЗЖЕ по файлу и потому побеждал: поля калькулятора вставали в строку. Двойной класс поднимает специфичность (аудит Ф4). */ .mod-actform.calcform { display: flex; flex-direction: column; gap: 9px; } .calc-field[hidden] { display: none; } .calc-row { margin-top: 2px; } .calc-out { padding: 9px 11px; border: 1px solid var(--bd2); border-radius: 9px; background: rgba(11,11,13,.03); font-size: 12.5px; line-height: 1.55; } .calc-out[hidden] { display: none; } .actmodal-panels { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 18px; } .req-panel-h { font-size: 14px; font-weight: 600; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .req-panel-lead { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--bd2); } .req-panel-lead:hover { border-bottom-color: var(--ink); color: var(--info-tx); } /* группы-секции панели: мягкие карточки на сером (совр. тренд: разделение фоном, не линиями) - фирменные скругления, как строки карточки клиента */ .actgroup { padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; background: rgba(11,11,13,.028); } .actgroup:last-child { margin-bottom: 0; } .actgroup-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; } .actline { font-size: 13px; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; } .actrow { display: flex; flex-wrap: wrap; gap: 6px; } /* статус-действия столбиком, слева: «Одобрить», под ним «Причина» + «На правки» */ .actcol { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .actcol .mod-actform { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .actcol .actlbl { margin-bottom: 0; } .actlbl { display: block; font-size: 12px; color: var(--ink2); margin-bottom: 9px; } .actlbl input { display: block; margin-top: 5px; width: 180px; max-width: 100%; font: inherit; font-size: 14px; padding: 8px 11px; border: 1px solid var(--bd2); border-radius: 10px; } .actlbl input:focus { outline: none; box-shadow: var(--ring); } .actnote { font-size: 12px; margin-top: 4px; } .issueform { margin: 0; } @media (max-width: 620px) { .actmodal-body { flex-direction: column; } .actmodal-list { flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--bd); max-height: 150px; } } /* подсказка над компоузом закрытого диалога (отправка переоткроет) */ .cd-reopen { padding: 8px 16px; border-top: 1px solid var(--bd); background: var(--warn-bg); color: var(--warn-tx); font-size: 12px; } /* принудительное удаление истории: двухшаговое раскрытие (без JS, CSP) */ .purgebox { margin-top: 16px; } .purgebox > summary { display: inline-block; cursor: pointer; list-style: none; font-size: 11.5px; color: var(--mut); text-decoration: underline dotted; user-select: none; } .purgebox > summary::-webkit-details-marker { display: none; } .purgebox > summary:hover { color: var(--bad-tx); } .purgeform { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--bad-bg); color: var(--bad-tx); font-size: 12.5px; } .btn-purge { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 14px; border: none; border-radius: 999px; background: var(--bad-tx); color: #fff; } .btn-purge:hover { filter: brightness(1.12); } /* Компоуз - КОЛОНКА: тулбар во всю ширину сверху, ниже строка [ввод | кнопки]. В строке align-items: stretch -> окно ввода и колонка кнопок одной высоты, кнопки ровно по краям окна (owner 2026-07-22). position:relative - якорь для эмодзи-панели и пикеров. */ .cd-compose { display: flex; flex-direction: column; gap: 8px; padding: 13px 16px; border-top: 1px solid var(--bd); position: relative; } .cd-inputrow { display: flex; gap: 10px; align-items: stretch; } .cd-compose textarea[name="text"][hidden] { display: none; } .cd-closed { padding: 14px 16px; border-top: 1px solid var(--bd); color: var(--ghost); font-size: 13px; text-align: center; } .cd-placeholder { flex: 1; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: var(--ghost); font-size: 14px; } .cd-ph-ic { opacity: .45; } .btn-send { align-self: flex-end; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; padding: 9px 20px; border: none; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 0 2px 6px -2px rgba(11,11,13,.3); white-space: nowrap; } .btn-send:hover { background: var(--ink2); } /* WYSIWYG-композер: тулбар форматирования отдельной строкой сверху */ .fmtbar { display: flex; flex-wrap: wrap; gap: 4px; } .fmtbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; font: inherit; font-size: 13px; line-height: 1; cursor: pointer; border: 1px solid var(--bd2); border-radius: 8px; background: #fff; color: var(--ink2); } .fmtbtn:hover { background: rgba(11,11,13,.05); color: var(--ink); } .rich-input { flex: 1; min-width: 0; min-height: 72px; max-height: 360px; overflow-y: auto; font: inherit; font-size: 13px; line-height: 1.45; padding: 9px 12px; border: 1px solid var(--bd2); border-radius: 12px; background: #fff; color: var(--ink); white-space: pre-wrap; word-break: break-word; } .rich-input:focus { outline: none; box-shadow: var(--ring); border-color: var(--bd2); } .rich-input:empty::before { content: attr(data-placeholder); color: var(--ghost); pointer-events: none; } .rich-input a { color: var(--info-tx); text-decoration: underline; } .emojipop { position: absolute; bottom: 100%; left: 12px; margin-bottom: 6px; z-index: 30; width: 300px; max-height: 220px; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; background: #fff; border: 1px solid var(--bd2); border-radius: 12px; box-shadow: 0 12px 34px -12px rgba(11,11,13,.4); } .emoji-cell { border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; border-radius: 7px; } .emoji-cell:hover { background: rgba(11,11,13,.07); } /* авторский display:grid перебивает UA [hidden]{display:none} -> скрываем явно */ .emojipop[hidden] { display: none; } /* активный формат (жирный/курсив/...): подсвечиваем кнопку тулбара тёмной */ /* Скрепка «прикрепить файл клиенту» - такая же кнопка панели, но её щёлкает