@import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap"); /* ОмниХаб — единая дизайн-система (product-регистр). Светлая + тёмная тема. Идентичность несёт ember-акцент и тёплый ink, не фон. */ /* ============ ТОКЕНЫ ============ */ :root{ --bg: oklch(0.975 0.004 250); --surface: oklch(1 0 0); --surface-2: oklch(0.965 0.004 250); --surface-3: oklch(0.945 0.005 250); --line: oklch(0.912 0.004 250); --line-2: oklch(0.86 0.005 250); --ink: oklch(0.24 0.012 60); --ink-2: oklch(0.42 0.012 55); --muted: oklch(0.535 0.012 55); --accent: oklch(0.62 0.17 255); --accent-h: oklch(0.56 0.17 255); --accent-ink:#fff; --accent-soft:oklch(0.95 0.03 255); --accent-ring:oklch(0.62 0.17 255 / 0.32); --ok: oklch(0.52 0.11 150); --ok-soft: oklch(0.95 0.04 150); --warn: oklch(0.62 0.12 75); --bad: oklch(0.54 0.18 25); --bad-soft: oklch(0.95 0.04 25); --in-bub: oklch(0.965 0.003 250); --out-bub: oklch(0.90 0.055 255); --ai-bub: oklch(0.95 0.035 150); --r-sm:3px; --r:4px; --r-lg:6px; --r-pill:999px; --sh-sm:0 1px 2px oklch(0.2 0.02 60 / .07); --sh:0 6px 18px -6px oklch(0.2 0.02 60 / .16); --sh-pop:0 16px 44px -12px oklch(0.2 0.02 60 / .28); --header-h:3.4rem; --warn-soft:oklch(0.95 0.04 75); /* текст поверх *-soft подложек: сам --warn/--bad на светлой плашке даёт <4.5:1 */ --warn-ink:oklch(0.42 0.10 75); --bad-ink:oklch(0.45 0.17 25); /* МАСШТАБ ИНТЕРФЕЙСА: множитель корневого кегля. Вся типографика в rem → растёт целиком. Дефолт — авто по ширине экрана (ниже), ручной выбор перебивает его inline-стилем на . */ --ui-scale:1; --t-xs:.8125rem; --t-sm:.875rem; --t-base:.9375rem; --t-md:1rem; --t-lg:1.125rem; --t-xl:1.3125rem; --t-2xl:1.5rem; --ease:cubic-bezier(.22,1,.36,1); --dur:.17s; --z-dropdown:100; --z-sticky:200; --z-modal:400; --z-toast:600; --z-tooltip:800; --font:"PT Sans",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* каналы (data-цвета) */ --c-telegram:#229ED9; --c-whatsapp:#1FAE54; --c-max:#7B61FF; --c-avito:#0AA46F; --c-vk:#0077FF; } [data-theme="dark"]{ --bg: oklch(0.205 0.008 60); --surface: oklch(0.246 0.008 60); --surface-2: oklch(0.224 0.008 60); --surface-3: oklch(0.28 0.009 60); --line: oklch(0.32 0.008 60); --line-2: oklch(0.38 0.009 60); --ink: oklch(0.95 0.01 70); --ink-2: oklch(0.80 0.01 70); --muted: oklch(0.63 0.011 70); --accent: oklch(0.70 0.16 255); --accent-h: oklch(0.74 0.16 255); --accent-ink:oklch(0.18 0.02 255); --accent-soft:oklch(0.30 0.055 255); --accent-ring:oklch(0.70 0.16 255 / 0.4); --ok:oklch(0.72 0.13 150); --ok-soft:oklch(0.30 0.05 150); --warn:oklch(0.78 0.13 75); --warn-soft:oklch(0.32 0.06 75); --warn-ink:oklch(0.86 0.12 75); --bad:oklch(0.68 0.16 25); --bad-soft:oklch(0.32 0.07 25); --bad-ink:oklch(0.80 0.14 25); --in-bub:oklch(0.29 0.006 60); --out-bub:oklch(0.40 0.075 255); --ai-bub:oklch(0.31 0.045 150); --sh-sm:0 1px 2px oklch(0 0 0 / .3); --sh:0 8px 22px -8px oklch(0 0 0 / .55); --sh-pop:0 18px 50px -14px oklch(0 0 0 / .7); --c-whatsapp:#2BC063; --c-avito:#10BE80; } /* ============ АВТО-МАСШТАБ ПО ЭКРАНУ ============ Чем шире монитор, тем крупнее интерфейс: на широкоформатном стационарнике (1920+) шрифт 13px читается мелко, на ноутбуке — нормально. Ручной выбор в рельсе ставит --ui-scale инлайном на и перебивает это. */ @media (min-width:1500px){ :root{--ui-scale:1.06} } @media (min-width:1800px){ :root{--ui-scale:1.12} } @media (min-width:2200px){ :root{--ui-scale:1.18} } /* ============ БАЗА ============ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;font-size:calc(100% * var(--ui-scale,1))} body{margin:0;font-family:var(--font);font-size:var(--t-base);line-height:1.5; color:var(--ink-2);background:var(--bg);-webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01";} h1,h2,h3{color:var(--ink);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0} b,strong{color:var(--ink);font-weight:600} a{color:inherit} i{color:var(--muted)} /* ЯРКОЕ выделение текста: бледный --accent-soft сливался с фоном (Windows/Chrome, тёмная тема — «выделяю, но не видно», кейс 22.07). Насыщенный акцент + белый видно везде. */ ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} input,select,textarea,button{font:inherit;color:inherit} .tnum{font-variant-numeric:tabular-nums} /* тонкие скроллбары */ *{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:2px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:var(--muted)} body.app-fixed{height:100vh;overflow:hidden} body.app-scroll,body.app-page,body.app-split{min-height:100vh} /* ============ ШАПКА / НАВИГАЦИЯ ============ */ .topnav{display:flex;align-items:center;gap:14px;height:var(--header-h);padding:0 16px; background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:var(--z-sticky)} .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:var(--t-lg); color:var(--ink);text-decoration:none;letter-spacing:-.02em} .brand .mark{width:18px;height:18px;border-radius:50%;flex:0 0 auto; background:radial-gradient(circle at 32% 30%, oklch(0.82 0.11 240), var(--accent) 62%, oklch(0.42 0.15 260)); box-shadow:0 0 0 1px oklch(0.5 0.14 255 / .25), 0 0 12px -2px var(--accent)} .tabs{display:flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:var(--r-pill);border:1px solid var(--line)} .tabs a{font-size:var(--t-sm);font-weight:500;color:var(--muted);text-decoration:none; padding:6px 13px;border-radius:var(--r-pill);transition:color var(--dur),background var(--dur)} .tabs a:hover{color:var(--ink)} .tabs a.active{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--sh-sm)} .topnav-right{margin-left:auto;display:flex;align-items:center;gap:12px} .hint{font-size:var(--t-xs);color:var(--muted)} .theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--line); background:var(--surface-2);cursor:pointer;display:grid;place-items:center;font-size:15px; color:var(--ink-2);transition:background var(--dur),border-color var(--dur),transform var(--dur)} .theme-toggle:hover{background:var(--surface-3);border-color:var(--line-2)} .theme-toggle:active{transform:scale(.92)} .theme-toggle::after{content:"☾"} [data-theme="dark"] .theme-toggle::after{content:"☀"} /* ============ КНОПКИ ============ */ .btn{--b:var(--accent);border:1px solid transparent;background:var(--b);color:var(--accent-ink); padding:7px 12px;border-radius:var(--r);cursor:pointer;font-weight:600;font-size:var(--t-sm); display:inline-flex;align-items:center;gap:7px;white-space:nowrap; transition:background var(--dur),border-color var(--dur),transform var(--dur),box-shadow var(--dur)} .btn:hover{background:var(--accent-h)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.ghost{background:var(--surface-2);color:var(--ink);border-color:var(--line)} .btn.ghost:hover{background:var(--surface-3);border-color:var(--line-2)} .btn.danger{background:transparent;color:var(--bad);border-color:transparent} .btn.danger:hover{background:var(--bad-soft)} .btn.sm{padding:6px 10px;font-size:var(--t-xs);border-radius:var(--r-sm)} /* ============ ПОЛЯ ============ */ input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r); background:var(--surface);color:var(--ink);transition:border-color var(--dur),box-shadow var(--dur)} input::placeholder,textarea::placeholder{color:var(--muted)} input:hover,select:hover,textarea:hover{border-color:var(--line-2)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)} textarea{min-height:96px;resize:vertical;line-height:1.55} select{cursor:pointer;-webkit-appearance:none;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 16px) center,calc(100% - 11px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px} label{font-size:var(--t-xs);color:var(--muted);display:block;margin:12px 0 5px;font-weight:500} /* ============ БЭЙДЖИ / ЧИПЫ / ПИЛЮЛИ ============ */ .badge{font-size:.625rem;font-weight:700;color:#fff;border-radius:4px;padding:2px 5px;letter-spacing:.02em; line-height:1.4;display:inline-block;vertical-align:middle} .chip{font-size:var(--t-xs);border:1px solid var(--line);border-radius:var(--r);padding:3px 9px; display:inline-flex;gap:6px;align-items:center;background:var(--surface);color:var(--ink-2)} .tag{font-size:var(--t-xs);background:var(--surface-3);color:var(--ink-2);border-radius:var(--r);padding:3px 9px;font-weight:500} .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r);font-size:var(--t-xs);font-weight:600} .pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .muted{color:var(--muted);font-size:var(--t-sm)} .ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)} /* ============ КАРТОЧКИ ============ */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:16px;box-shadow:var(--sh-sm)} .card h2{font-size:var(--t-lg);margin:0 0 6px} /* ============ ТАБЛИЦЫ ============ */ table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);font-size:var(--t-sm);vertical-align:middle} th{color:var(--muted);font-weight:600;font-size:var(--t-xs)} tbody tr{transition:background var(--dur)} tbody tr:hover{background:var(--surface-2)} tbody tr:last-child td{border-bottom:0} thead th{position:sticky;top:0;background:var(--surface);z-index:1} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} /* ============ СТРАНИЦА-СКРОЛЛ ============ */ body.app-page .wrap{max-width:1000px;margin:22px auto;padding:0 18px} body.app-page .row{display:flex;gap:9px;flex-wrap:wrap;align-items:center} /* ============ ИНБОКС ============ */ /* --alert-h: высота баннера «Канал отключён» (ставит JS) — иначе баннер выталкивает композер за нижний край экрана (обрезанное поле ввода, кейс Артёма 15.07) */ body.app-fixed .wrap{display:grid;grid-template-columns:21.25rem minmax(0,1fr) 20rem;height:calc(100vh - var(--header-h) - var(--alert-h,0px))} /* правая колонка — карточка клиента */ .client{border-left:1px solid var(--line);background:var(--surface-2);overflow-y:auto;min-width:0;padding:0} .client-head{padding:18px 16px;border-bottom:1px solid var(--line);text-align:center} .client-head .av{margin:0 auto 10px} .client-head .cname{font-weight:600;font-size:var(--t-md);color:var(--ink)} .client-head .cphone{color:var(--muted);font-size:var(--t-sm);margin-top:2px} .csec{padding:14px 16px;border-bottom:1px solid var(--line)} .csec-h{font-size:.625rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-bottom:9px} .chrow{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--dur)} .chrow:hover{background:var(--surface-3)} .chrow.on{background:var(--accent-soft)} .chrow .cm{flex:1;min-width:0} .chrow .cm .acc{font-size:var(--t-sm);color:var(--ink);font-weight:500} .chrow .cm .ago{font-size:var(--t-xs);color:var(--muted)} .av.lg{width:38px;height:38px;font-size:var(--t-base)} .av.xl{width:60px;height:60px;font-size:var(--t-lg)} /* окно чата: шапка строкой */ .pane .ph{display:flex;align-items:center;justify-content:space-between;gap:12px} .pane .ph .who{display:flex;align-items:center;gap:11px;min-width:0} .pane .ph .who .nm,.pane .ph .who .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pane .ph-actions{flex:0 0 auto} /* переключатель каналов клиента над лентой */ .ch-tabs{display:flex;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface);overflow-x:auto;flex:0 0 auto} .ch-tab{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-pill); font-size:var(--t-xs);color:var(--ink-2);cursor:pointer;white-space:nowrap;background:var(--surface)} .ch-tab:hover{border-color:var(--line-2)} .ch-tab.on{background:var(--accent-soft);border-color:color-mix(in oklch,var(--accent) 30%,transparent);color:var(--accent);font-weight:600} @media(max-width:1180px){ body.app-fixed .wrap{grid-template-columns:20rem minmax(0,1fr)} .client{display:none} } .col{overflow-y:auto;min-height:0} .list{border-right:1px solid var(--line);background:var(--surface-2)} .search{padding:11px 12px;position:sticky;top:0;background:var(--surface-2);z-index:1;border-bottom:1px solid var(--line)} .search input{background:var(--surface)} .ci{display:flex;gap:11px;padding:11px 13px;cursor:pointer;align-items:center;border-bottom:1px solid var(--line); position:relative;transition:background var(--dur)} .ci:hover{background:var(--surface-3)} .ci.active{background:var(--surface)} .ci.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)} .av{position:relative;width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:700;font-size:var(--t-md); color:#fff;background:linear-gradient(150deg,oklch(0.62 0.05 60),oklch(0.5 0.04 50))} .ci .mid{flex:1;min-width:0} .ci .nm{font-weight:600;color:var(--ink);display:flex;gap:6px;align-items:center;margin-bottom:2px} .ci .lt{color:var(--muted);font-size:var(--t-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ci .rt{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px} .ci .rt-top{display:flex;align-items:center;gap:5px} .ci .rt-top .lt-tick{font-size:1em;line-height:1} .ci .tm{color:var(--muted);font-size:var(--t-xs)} .unread{background:var(--accent);color:var(--accent-ink);border-radius:var(--r-pill);min-width:18px;height:18px; padding:0 5px;font-size:var(--t-xs);font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums} .pane{display:flex;flex-direction:column;height:100%;background:var(--surface)} .pane .ph{padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface)} .pane .ph .nm{font-weight:700;font-size:var(--t-xl);color:var(--ink);letter-spacing:-.02em} .pane .ph .sub{color:var(--muted);font-size:var(--t-sm);margin-top:2px} .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px} .tl{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:11px; background: radial-gradient(oklch(0.5 0.02 60 / .04) 1px, transparent 1px) 0 0/22px 22px} [data-theme="dark"] .tl{background:radial-gradient(oklch(1 0 0 / .025) 1px,transparent 1px) 0 0/22px 22px} /* пузыри пошире, как в Wazzup (просьба Артёма 15.07): на широком чате до 780px */ .row{display:flex;flex-direction:column;max-width:min(74%,780px);animation:rise .22s var(--ease) both} .row.in{align-self:flex-start} .row.out{align-self:flex-end} .meta{font-size:.845rem;color:var(--muted);margin:0 5px 3px;display:flex;gap:7px;align-items:center} .meta .tick{font-size:1rem;letter-spacing:-1px} .row.out .meta{justify-content:flex-end} .bub{padding:9px 13px;border-radius:15px;white-space:pre-wrap;word-break:break-word;color:var(--ink);box-shadow:var(--sh-sm)} .in .bub{background:var(--in-bub);border-bottom-left-radius:5px} .out .bub{background:var(--out-bub);border-bottom-right-radius:5px} .ai .bub{background:var(--ai-bub)} .compose{border-top:1px solid var(--line);background:var(--surface);padding:11px 16px} .compose .target{font-size:var(--t-xs);color:var(--muted);margin-bottom:7px;display:flex;gap:6px;align-items:center} .compose .bar{display:flex;gap:9px;align-items:flex-end} /* авторастущее поле сообщения: 1 строка → до ~6 строк, дальше внутренний скролл. Enter — отправить, Shift+Enter — перенос строки (высоту ведёт agrow() на странице) */ textarea.cgrow{resize:none;overflow-y:hidden;line-height:1.45;max-height:10rem; min-height:2.5em;transition:min-height .18s ease-out} /* амо-поведение: пустое поле компактное, при фокусе/наборе разворачивается */ textarea.cgrow.big,textarea.cgrow:focus,textarea.cgrow:not(:placeholder-shown){min-height:5.8em} .empty{margin:auto;color:var(--muted);text-align:center;padding:48px 22px;max-width:340px;line-height:1.6} .tpop{position:fixed;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-pop);width:320px;max-height:min(74vh,520px);overflow:auto;z-index:var(--z-modal,400);display:none;padding:4px} .tpop .cat{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:7px 10px 3px;font-weight:600} .tpop .it{padding:6px 10px;cursor:pointer;border-radius:var(--r);transition:background var(--dur)} .tpop .it:hover{background:var(--surface-2)} .tpop .it b{font-weight:500;color:var(--ink);font-size:var(--t-sm)} .tpop .it span{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:0} /* ── Wazzup-look: иконка канала на аватаре, разделители дат, сделки, композер ── */ /* фото профиля клиента: лежит ПОВЕРХ кружка-инициала (инициал = фолбэк, если фото не загрузилось — onerror у просто убирает картинку) */ .avimg{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;z-index:0} .chdot{position:absolute;right:-3px;bottom:-3px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;z-index:1; font-size:.5rem;font-weight:800;color:#fff;line-height:15px;text-align:center;border:2px solid var(--surface-2); box-shadow:0 1px 2px oklch(0 0 0 / .25);letter-spacing:.01em} .pane .ph .who .av.lg .chdot{border-color:var(--surface)} .av.lg,.av.xl{position:relative} .ci .nm .chmore{font-size:var(--t-xs);color:var(--muted);font-weight:600;background:var(--surface-3);border-radius:var(--r-pill);padding:0 6px} .ci.done .av{filter:grayscale(.5);opacity:.7} .ci.done .nm,.ci.done .lt{opacity:.65} /* разделитель дат в ленте */ .daysep{align-self:center;margin:4px 0} .daysep span{font-size:var(--t-xs);color:var(--muted);background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-pill);padding:2px 12px;font-weight:600;box-shadow:var(--sh-sm)} [data-theme="dark"] .daysep span{background:var(--surface-3)} /* выпадашка «Сделки» */ .dealswrap{position:relative} .deals-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:250px;max-width:340px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop);z-index:var(--z-dropdown); display:none;overflow:hidden;padding:4px} .deals-pop.on{display:block} .deal-it{display:block;padding:9px 11px;border-radius:var(--r);text-decoration:none;transition:background var(--dur)} .deal-it:hover{background:var(--surface-2)} .deal-it .dn{display:block;font-weight:600;color:var(--ink);font-size:var(--t-sm)} .deal-it .ds{display:block;font-size:var(--t-xs);margin-top:1px} /* плашка «клиент ждёт ответа» над композером */ .await-note{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px; padding:7px 11px;border-radius:var(--r);background:var(--bad-soft);color:var(--bad);font-size:var(--t-sm);font-weight:600} .await-note .btn{color:var(--ink)} /* иконки-кнопки композера */ .compose .bar .btn.ic{padding:8px 9px;background:transparent;border:1px solid transparent;color:var(--ink-2); font-size:var(--t-md);line-height:1;box-shadow:none} .compose .bar .btn.ic:hover{background:var(--surface-2);border-color:var(--line)} .compose .bar .btn.ic.rec{color:var(--bad);border-color:var(--bad);background:var(--bad-soft);animation:recpulse 1s infinite} @keyframes recpulse{0%,100%{opacity:1}50%{opacity:.45}} /* мини-палитра эмодзи внутри .tpop */ .emogrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:6px} .emo{border:0;background:transparent;font-size:1.15rem;padding:5px;border-radius:var(--r-sm);cursor:pointer;line-height:1} .emo:hover{background:var(--surface-2)} /* ── круглые SVG-логотипы каналов (замена текстовых бейджей) ── */ .chlogo{display:inline-block;vertical-align:middle;border-radius:50%} .badge.blogo{background:transparent!important;padding:0;line-height:0;display:inline-flex;vertical-align:middle} .chdot.chdot-svg{background:transparent!important;padding:0;min-width:0;width:16px;height:16px;box-shadow:none; border:2px solid var(--surface-2);border-radius:50%;overflow:hidden;line-height:0} .chdot.chdot-svg .chlogo{width:100%;height:100%;border:0} .pane .ph .who .av.lg .chdot.chdot-svg,.av.xl .chdot.chdot-svg{border-color:var(--surface)} /* ── медиа в ленте (фото/видео/голос/файл) ── */ .mmwrap{display:flex;flex-direction:column;gap:6px} .mm{max-width:100%} .mm-img{max-width:100%;max-height:300px;border-radius:11px;display:block;cursor:zoom-in;object-fit:cover} .mm-vid{max-width:100%;max-height:320px;border-radius:11px;display:block;background:#000} .mm-aud{width:min(260px,100%);height:38px;display:block} .mm-cap{font-size:var(--t-xs);color:var(--muted);margin-top:3px} .mm-ph{font-style:italic;color:var(--muted);font-size:var(--t-sm)} .mm-na{font-size:var(--t-xs);opacity:.75} .mm-file{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink); border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:var(--surface);max-width:100%} .mm-file:hover{border-color:var(--line-2)} .mm-file .mm-fi{font-size:20px;flex:0 0 auto} .mm-file .mm-fn{font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0} .mm-file .mm-dl{font-size:var(--t-xs);color:var(--accent);font-weight:600;flex:0 0 auto} /* текст-подпись над медиа в бабле (когда текста нет, отступ не нужен) */ .bub .mmwrap{margin-top:2px} /* ── лайтбокс увеличения фото ── */ .hub-lb{position:fixed;inset:0;z-index:var(--z-modal,9999);background:oklch(0 0 0 / .82); display:none;align-items:center;justify-content:center;cursor:zoom-out;padding:28px} .hub-lb.on{display:flex} .hub-lb img{max-width:96vw;max-height:94vh;border-radius:10px;box-shadow:0 12px 48px oklch(0 0 0 / .5)} /* тост */ .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:var(--ink);color:var(--surface); padding:9px 16px;border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:600;box-shadow:var(--sh-pop); opacity:0;pointer-events:none;transition:opacity var(--dur),transform var(--dur);z-index:var(--z-dropdown)} .toast.on{opacity:.96;transform:translateX(-50%) translateY(0)} /* ============ ШАБЛОНЫ ============ */ body.app-split .wrap{display:grid;grid-template-columns:300px 1fr;gap:18px;max-width:1180px;margin:18px auto;padding:0 18px;align-items:start} .cat{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:14px 0 6px;font-weight:600} .tpl{padding:10px 12px;border-radius:var(--r);cursor:pointer;border:1px solid transparent;transition:background var(--dur),border-color var(--dur)} .tpl:hover{background:var(--surface-2)} .tpl.active{background:var(--accent-soft);border-color:color-mix(in oklch,var(--accent) 30%,transparent)} .tpl b{font-weight:600;color:var(--ink)} .tpl span{display:block;font-size:var(--t-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .media{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:11px;margin-top:11px} .m{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;background:var(--surface-2)} .m img,.m video{width:100%;height:90px;object-fit:cover;display:block;background:#000} .m .lab{font-size:var(--t-xs);padding:5px 7px;color:var(--muted);display:flex;justify-content:space-between;align-items:center} .m .x{position:absolute;top:5px;right:5px;background:oklch(0 0 0 / .55);color:#fff;border:0;border-radius:50%;width:22px;height:22px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)} .voice{display:flex;align-items:center;gap:8px;height:90px;justify-content:center;font-size:24px;color:var(--muted)} .hint{font-size:var(--t-xs);color:var(--muted);margin-top:7px} .preview{white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-top:9px;min-height:30px;color:var(--ink)} .recDot{width:9px;height:9px;border-radius:50%;background:var(--bad);display:inline-block;animation:pulse 1s infinite} .row{} /* ============ КАНАЛЫ / amoCRM / АВТООТВЕТЫ ============ */ .dot{display:inline-flex;align-items:center;gap:6px} select.st{padding:6px 26px 6px 9px;font-size:var(--t-sm);width:auto;min-width:150px} .ar{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;margin-bottom:11px;background:var(--surface);transition:border-color var(--dur)} .ar:hover{border-color:var(--line-2)} .on{color:var(--ok);font-weight:600} .off{color:var(--muted)} /* ============ МАСТЕР ПОДКЛЮЧЕНИЯ (модалка) ============ */ .modal-backdrop{position:fixed;inset:0;background:oklch(0.18 0.02 60 / .52);backdrop-filter:blur(3px); display:none;align-items:center;justify-content:center;z-index:var(--z-modal);padding:20px} .modal-backdrop.open{display:flex;animation:fade .15s var(--ease)} .modal{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-pop);width:460px;max-width:100%;max-height:90vh;overflow:auto;padding:22px;animation:rise .2s var(--ease)} .modal h3{font-size:var(--t-lg);margin:0 0 4px} .modal .x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:0; background:var(--surface-2);color:var(--ink-2);cursor:pointer;font-size:16px} .modal .x:hover{background:var(--surface-3)} .steps{display:flex;gap:6px;margin:6px 0 16px} .steps i{height:3px;flex:1;border-radius:2px;background:var(--line)} .steps i.on{background:var(--accent)} .method-grid{display:grid;gap:10px;margin-top:14px} .method{display:flex;gap:13px;align-items:center;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r); cursor:pointer;background:var(--surface);text-align:left;width:100%;transition:border-color var(--dur),background var(--dur)} .method:hover{border-color:var(--accent);background:var(--accent-soft)} .method .ic{font-size:20px;width:24px;text-align:center} .method b{display:block;color:var(--ink)} .method small{color:var(--muted)} .qr-box{width:230px;height:230px;margin:16px auto;border:1px solid var(--line);border-radius:var(--r); display:grid;place-items:center;background:var(--surface-2);overflow:hidden;text-align:center;padding:14px} .qr-box img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated} .spinner{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite} .field{margin-top:12px} .note{font-size:var(--t-sm);color:var(--muted);line-height:1.55;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;margin-top:12px} .link-btn{background:none;border:0;color:var(--accent);cursor:pointer;font-weight:600;padding:0;font-size:var(--t-sm)} /* ============ МОУШН ============ */ @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes pulse{50%{opacity:.3}} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ============ ЛЕВЫЙ РЕЛЬС — узкая тёмная колонка (слепок amoCRM; инъекция через theme.js) ============ */ :root{ --rail-w:5.75rem; /* в rem → рельс растёт вместе с --ui-scale */ --rail-bg:oklch(0.27 0.012 260); /* нейтральный графит, рельс с подписями (amo-стиль) */ --rail-bg-2:oklch(0.33 0.014 260); --rail-ink:oklch(0.96 0.004 260); --rail-muted:oklch(0.72 0.008 260); --rail-line:oklch(1 0 0 / .09); --rail-active:oklch(1 0 0 / .15); /* светлая плашка активного пункта */ --rail-badge:#E5484D; /* красный кружок-счётчик */ } [data-theme="dark"]{ --rail-bg:oklch(0.20 0.01 260); --rail-bg-2:oklch(0.26 0.012 260); --rail-line:oklch(1 0 0 / .08); --rail-active:oklch(1 0 0 / .14); } body.has-rail{display:grid;grid-template-columns:var(--rail-w) 1fr;height:100vh;overflow:hidden} /* группа «Настройки»: колонка-подменю разделов между рельсом и контентом (amo-стиль) */ body.has-rail.has-subrail{grid-template-columns:var(--rail-w) 12.5rem 1fr} .subrail{background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;padding:12px 0} .subrail .sr-title{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 16px 12px} .subrail .sr-item{display:block;padding:10px 16px;color:var(--ink-2);text-decoration:none;font-size:var(--t-sm);line-height:1.35} .subrail .sr-item:hover{background:var(--surface-2);color:var(--ink)} .subrail .sr-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600} @media(max-width:1100px){ body.has-rail.has-subrail{grid-template-columns:var(--rail-w) 10rem 1fr} } body.has-rail .main{min-width:0;display:flex;flex-direction:column;overflow-y:auto} body.has-rail.app-fixed .main{overflow:hidden} /* верхняя панель превращается в тихий page-head: ОДНА навигация — рельс */ body.has-rail .topnav{position:sticky;top:0;z-index:var(--z-sticky)} body.has-rail .topnav .tabs,body.has-rail .topnav .brand,body.has-rail .topnav .theme-toggle{display:none} .page-title{font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;color:var(--ink)} .rail{display:flex;flex-direction:column;align-items:stretch;background:var(--rail-bg);color:var(--rail-muted); overflow-y:auto;overflow-x:hidden;scrollbar-width:none} .rail::-webkit-scrollbar{display:none} .rail .rbrand{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 4px 10px; color:var(--rail-ink);text-decoration:none;flex:0 0 auto} .rail .rbrand .mark{width:1.625rem;height:1.625rem;border-radius:50%;flex:0 0 auto; background:radial-gradient(circle at 32% 30%,oklch(0.82 0.11 240),var(--accent) 62%,oklch(0.42 0.15 260)); box-shadow:0 0 0 1px oklch(0.5 0.14 255 /.3),0 0 14px -2px var(--accent)} .rail .rbrand .t{display:block;font-size:.625rem;line-height:1.15;text-align:center;font-weight:600;color:var(--rail-ink)} .rail-div{height:1px;background:var(--rail-line);margin:7px 16px;flex:0 0 auto} .rail-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 3px;margin:1px 6px; border-radius:10px;color:var(--rail-muted);text-decoration:none;text-align:center;flex:0 0 auto; transition:color var(--dur)} .rail-item .ic{position:relative;width:2.5rem;height:1.875rem;display:grid;place-items:center;border-radius:8px; transition:background var(--dur),color var(--dur)} .rail-item .ic svg{width:1.25rem;height:1.25rem;display:block} .rail-item .lbl{display:block;font-size:.625rem;line-height:1.1;color:inherit;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rail-item:hover{color:var(--rail-ink)} .rail-item:hover .ic{background:var(--rail-bg-2)} .rail-item.active{color:#fff} .rail-item.active .ic{background:var(--rail-active);box-shadow:inset 0 0 0 1px oklch(1 0 0/.1)} .rail-item.active .lbl{font-weight:600} .rail-item.adm{display:none} .rail.show-adm .rail-item.adm{display:flex} /* красный кружок-бэйдж на иконке */ .rail-item .rb{position:absolute;top:-5px;right:-3px;min-width:1rem;height:1rem;padding:0 4px; border-radius:var(--r-pill);background:var(--rail-badge);color:#fff;font-size:.625rem;font-weight:700; line-height:1rem;text-align:center;display:none;box-shadow:0 0 0 2px var(--rail-bg);font-variant-numeric:tabular-nums} .rail-item .rb.on{display:block} .rail-spacer{margin-top:auto} /* низ: профиль-инициалы + Выйти + тема */ .rail-foot{display:flex;flex-direction:column;align-items:center;gap:9px;padding:11px 4px 13px; border-top:1px solid var(--rail-line);flex:0 0 auto} .rail-user{width:2.125rem;height:2.125rem;border-radius:50%;display:grid;place-items:center; background:linear-gradient(150deg,oklch(0.62 0.09 55),oklch(0.46 0.1 45));color:#fff; font-size:.75rem;font-weight:700;letter-spacing:.02em;cursor:default} .rail-x{background:none;border:0;cursor:pointer;color:var(--rail-muted);display:flex;flex-direction:column; align-items:center;gap:3px;padding:2px 6px;border-radius:8px;transition:color var(--dur)} .rail-x:hover{color:var(--rail-ink)} .rail-x .ic{width:1.875rem;height:1.375rem;display:grid;place-items:center} .rail-x .ic svg{width:1.0625rem;height:1.0625rem;display:block} .rail-x .xl{display:block;font-size:.5625rem;line-height:1.1} .rail-theme .ic::after{content:"☾";font-size:.9375rem;line-height:1} /* звонилка Новофона — синий кружок в самом низу рельса (раньше висела поверх списка диалогов) */ .rail-phone .ic{background:#2f6fed;color:#fff;border-radius:50%;width:1.875rem;height:1.875rem} .rail-phone:hover .ic{filter:brightness(1.1)} /* активный пункт в выпадашке масштаба */ .rf-item.on{background:var(--accent-soft);color:var(--accent);font-weight:700} .rail-zoom.on{color:var(--accent)} .rail-sound.off{opacity:.5} /* звук выключен — приглушаем кнопку */ [data-theme="dark"] .rail-theme .ic::after{content:"☀"} /* режим «изменить порядок»: подсветка кнопки + перетаскиваемые пункты */ .rail-order.on{color:var(--accent)} .rail-order.on .ic{background:var(--rail-bg-2);border-radius:8px} .rail.reordering .rail-item,.rail.reordering .rail-group{cursor:grab;border-radius:8px; outline:1px dashed var(--rail-line);outline-offset:-2px} .rail.reordering .rail-item:active,.rail.reordering .rail-group:active{cursor:grabbing} .rail.reordering .rail-item.dragging,.rail.reordering .rail-group.dragging,.rail.reordering .rail-div.dragging{opacity:.4} .rail.reordering .rail-div{cursor:grab;height:3px;background:var(--accent);opacity:.5} .rail.reordering .rail-flyout{display:none!important} /* в режиме порядка не показываем подменю */ /* единый канальный чип из токенов (один источник цвета вместо JS-дублей) */ .ch{display:inline-flex;align-items:center;gap:5px;font-size:.625rem;font-weight:700;color:#fff;border-radius:4px;padding:2px 6px;line-height:1.4;letter-spacing:.02em} .ch[data-ch=telegram]{background:var(--c-telegram)} .ch[data-ch=whatsapp]{background:var(--c-whatsapp)} .ch[data-ch=max]{background:var(--c-max)} .ch[data-ch=avito]{background:var(--c-avito)} .ch[data-ch=vk]{background:var(--c-vk)} /* ============ РЕЛЬС: подменю «Списки» (fixed-flyout) + точка «скоро» ============ */ .rail-group{position:relative} /* fixed, т.к. .rail имеет overflow-x:hidden (absolute-выезд был бы обрезан); top ставит JS */ .rail-flyout{position:fixed;left:calc(var(--rail-w) - 3px);min-width:184px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-pop);padding:5px;z-index:var(--z-dropdown);display:none} .rail-flyout.on{display:block;animation:fade .12s var(--ease)} .rail-flyout::before{content:"";position:absolute;left:-8px;top:0;width:8px;height:100%} /* мост для мыши */ .rf-title{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted); padding:6px 11px 4px;font-weight:600} .rf-item{display:block;padding:8px 11px;border-radius:var(--r);text-decoration:none;color:var(--ink); font-size:var(--t-sm);font-weight:500;transition:background var(--dur)} .rf-item:hover{background:var(--surface-2)} /* точка «скоро» (Почта) на иконке рельса */ .rail-item .rdot{position:absolute;top:-1px;right:1px;width:7px;height:7px;border-radius:50%; background:var(--warn);box-shadow:0 0 0 2px var(--rail-bg)} /* ============ ШАПКА: глобальный поиск ============ */ .topnav-tools{display:flex;align-items:center;flex:1 1 auto;min-width:0;margin-left:6px} .gsearch{position:relative;flex:0 1 440px;min-width:0} .gsearch .gs-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px; color:var(--muted);pointer-events:none} .gsearch .gs-ic svg{width:16px;height:16px;display:block} .gsearch .gs-in{width:100%;height:34px;padding:0 12px 0 32px;border:1px solid var(--line); border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);font-size:var(--t-sm)} .gsearch .gs-in:hover{border-color:var(--line-2)} .gsearch .gs-in:focus{outline:none;background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)} .gs-pop{position:absolute;left:0;top:calc(100% + 7px);width:min(480px,86vw);max-height:66vh;overflow:auto; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop); z-index:var(--z-dropdown);display:none;padding:5px} .gs-pop.on{display:block;animation:fade .12s var(--ease)} .gs-cat{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted); padding:9px 11px 4px;font-weight:600} .gs-it{display:block;padding:8px 11px;border-radius:var(--r);text-decoration:none;transition:background var(--dur)} .gs-it:hover{background:var(--surface-2)} .gs-it b{display:block;font-weight:600;color:var(--ink);font-size:var(--t-sm); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gs-it span{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gs-empty{padding:22px 12px;text-align:center;color:var(--muted);font-size:var(--t-sm)} /* этап сделки в результатах поиска — бейдж как в amo («взял в работу») */ .gs-it .gs-stage{display:inline-block;font-style:normal;font-weight:600;font-size:var(--t-xs); color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 7px; margin-left:6px;vertical-align:1px;white-space:nowrap} /* ============ ШАПКА: колокольчик уведомлений ============ */ .hub-bell{position:relative;flex:0 0 auto} .hub-bell .bell-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line); background:var(--surface-2);cursor:pointer;display:grid;place-items:center;color:var(--ink-2); padding:0;position:relative;transition:background var(--dur),border-color var(--dur)} .hub-bell .bell-btn:hover{background:var(--surface-3);border-color:var(--line-2)} .hub-bell .bell-btn svg{width:18px;height:18px;display:block} .bell-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill); background:var(--bad);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center; display:none;box-shadow:0 0 0 2px var(--surface);font-variant-numeric:tabular-nums} .bell-badge.on{display:block} .bell-pop{position:absolute;right:0;top:calc(100% + 8px);width:min(370px,88vw);max-height:70vh;overflow:auto; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop); z-index:var(--z-dropdown);display:none;padding:5px} .bell-pop.on{display:block;animation:fade .12s var(--ease)} .nf-head{display:flex;align-items:center;justify-content:space-between;padding:8px 11px 6px; font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600} .nf-read{background:none;border:0;color:var(--accent);cursor:pointer;font-weight:600;font-size:var(--t-xs); padding:0;text-transform:none;letter-spacing:0} .nf-it{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:var(--r); text-decoration:none;transition:background var(--dur)} .nf-it:hover{background:var(--surface-2)} .nf-it.fresh{background:var(--accent-soft)} .nf-it.fresh:hover{background:color-mix(in oklch,var(--accent-soft) 80%,var(--surface-2))} .nf-ic{flex:0 0 auto;width:20px;text-align:center;font-size:14px;line-height:1.4} .nf-body{min-width:0;flex:1} .nf-body b{display:block;font-weight:600;color:var(--ink);font-size:var(--t-sm);line-height:1.35} .nf-body b.nf-over{color:var(--bad)} .nf-meta{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:640px){ .gsearch{flex-basis:180px} .gsearch .gs-in::placeholder{color:transparent} } /* ── голосовой плеер «как WhatsApp» (shared.js voicePlayerHtml) ── */ .vp{display:flex;align-items:center;gap:9px;min-width:230px;max-width:340px;padding:4px 2px} .vp-btn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:0;background:var(--accent); color:var(--accent-ink);cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center} .vp-btn:hover{background:var(--accent-h)} .vp-wave{flex:1;display:flex;align-items:center;gap:2px;height:32px;cursor:pointer;min-width:110px} .vp-wave i{flex:1;min-width:2px;border-radius:2px;background:var(--line-2);transition:background .1s} .vp-wave i.on{background:var(--accent)} .vp-time{flex:0 0 auto;font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums;min-width:34px} .vp-act{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line); border-radius:50%;background:none;color:var(--muted);cursor:pointer;font-size:12px;text-decoration:none;padding:0} .vp-act:hover{color:var(--accent);border-color:var(--accent)} .vp-text{font-size:var(--t-sm);color:var(--ink-2);font-style:italic;margin:2px 2px 4px;line-height:1.4} /* ── живая запись голоса в композере (inbox/wazzup) ── */ .recbar{display:flex;align-items:center;gap:10px;flex:1;min-width:0} .recbar .rdot{width:10px;height:10px;border-radius:50%;background:var(--bad,#ef4444);animation:recblink 1s infinite} @keyframes recblink{0%,100%{opacity:1}50%{opacity:.25}} .recbar .rtime{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;min-width:40px} .recbar canvas{flex:1;height:32px;min-width:80px} .recbar .rbtn{border:0;background:none;cursor:pointer;font-size:17px;padding:4px} .recbar .rsend{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink); display:grid;place-items:center;border:0;cursor:pointer;font-size:15px} /* ── чёткое разграничение сторон в ленте: кто пишет + разделитель «Новые сообщения» ── */ .row.in .mauthor{color:var(--ok)} /* клиент — зелёным */ .row.out .mauthor{color:var(--accent)} /* мы — фирменным синим */ .row.out .bub{border:1px solid color-mix(in oklch, var(--accent) 22%, transparent)} .daysep.newmsg span{background:var(--accent-soft);color:var(--accent);font-weight:700; border:1px solid color-mix(in oklch, var(--accent) 30%, transparent)} /* ── загрузка вложений: полоса прогресса над композером + drag&drop зона ── */ .upbar{display:flex;align-items:center;gap:10px;padding:7px 12px;margin-bottom:8px;background:var(--accent-soft); border:1px solid color-mix(in oklch,var(--accent) 25%,transparent);border-radius:var(--r);font-size:var(--t-sm);color:var(--ink)} .upbar .upname{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .upbar .upline{flex:1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:60px} .upbar .upline i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s} .upbar .uppct{font-variant-numeric:tabular-nums;font-weight:600;min-width:42px;text-align:right} .dropzone-on{position:relative} .drophint{position:absolute;inset:8px;z-index:60;display:grid;place-items:center;border:2px dashed var(--accent); border-radius:var(--r-lg);background:color-mix(in oklch,var(--accent) 14%,var(--surface) 55%); color:var(--accent);font-weight:700;font-size:var(--t-lg);pointer-events:none} /* ── превью шаблона в композере (как Wazzup): выбрал → видишь → отправляешь ── */ .tplbar{display:flex;align-items:center;gap:9px;padding:8px 10px;margin-bottom:8px;background:var(--surface-2); border:1px solid var(--line);border-radius:var(--r)} .tplbar .tpname{font-size:var(--t-xs);font-weight:700;color:var(--ink-2);white-space:nowrap;max-width:180px; overflow:hidden;text-overflow:ellipsis} .tplbar .tpthumbs{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;padding-bottom:2px} .tplbar .th{flex:0 0 auto;width:120px;height:120px;border-radius:var(--r-sm);overflow:hidden; position:relative;background:var(--surface-2);display:grid;place-items:center;font-size:34px} .tplbar .th img,.tplbar .th video{width:100%;height:100%;object-fit:cover;display:block} .tplbar .th .thx{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%; background:rgba(0,0,0,.55);color:#fff;display:none;place-items:center;cursor:pointer;font-size:13px} .tplbar .th:hover .thx{display:grid} .tplbar .th .thx{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%; background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:20px;text-align:center; cursor:pointer;text-decoration:none;user-select:none} .tplbar .th .thx:hover{background:var(--bad)} .tplbar .th img{width:100%;height:100%;object-fit:cover;display:block} .tplbar .tpx{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line); background:none;color:var(--muted);cursor:pointer;font-size:13px;padding:0} .tplbar .tpx:hover{color:var(--bad);border-color:var(--bad)} /* бегущая полоса «отправляю…» (когда прогресс неизвестен — шлёт сервер) */ .upline i.indet{width:40% !important;animation:upslide 1.1s linear infinite} @keyframes upslide{0%{margin-left:-40%}100%{margin-left:100%}} /* тумблер «Писать первым» в списке каналов */ .firsttgl.on{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in oklch,var(--ok) 30%,transparent)} /* баннер «канал отключён — переподключите» (QR-каналы выбросило) */ .chan-alert{background:color-mix(in oklch,var(--bad) 14%,var(--surface));border-bottom:2px solid var(--bad); color:var(--ink);padding:9px 16px;font-size:var(--t-sm);font-weight:500;text-align:center} .chan-alert b{color:var(--bad)} .chan-alert a{color:var(--accent);font-weight:700;text-decoration:underline;white-space:nowrap} .chan-alert-x{margin-left:14px;background:transparent;border:1px solid color-mix(in oklch,var(--bad) 45%,transparent); color:var(--bad);border-radius:var(--r-sm);padding:2px 10px;cursor:pointer;font-size:var(--t-xs);font-weight:600;white-space:nowrap} .chan-alert-x:hover{background:color-mix(in oklch,var(--bad) 12%,transparent)} /* цитата в ленте («ответ на…»): как в WhatsApp/TG — превью того, на что ответил клиент */ .m-quote{display:flex;align-items:center;gap:8px;background:rgba(127,127,127,.13); border-left:3px solid var(--accent,#57a8ff);padding:6px 9px;border-radius:6px; margin-bottom:6px;font-size:.86em;opacity:.92;max-width:440px;overflow:hidden} .m-quote .q-th{width:38px;height:38px;object-fit:cover;border-radius:6px;flex:0 0 auto;cursor:pointer} .m-quote span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* кликабельная цитата → переход к оригиналу; превью видео; подсветка сообщения после перехода */ .m-quote.q-jump{cursor:pointer;transition:background .12s} .m-quote.q-jump:hover{background:color-mix(in oklch,var(--accent,#57a8ff) 18%,transparent)} .q-vth{flex:0 0 auto;position:relative;width:38px;height:38px;border-radius:6px;overflow:hidden;display:inline-block} .q-vth video{width:100%;height:100%;object-fit:cover;display:block;background:#000} .q-vth b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:#fff;font-size:12px;text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none} .q-vic{flex:0 0 auto;width:38px;height:38px;border-radius:6px;display:flex;align-items:center; justify-content:center;background:color-mix(in oklch,var(--accent,#57a8ff) 15%,transparent);font-size:17px} .row.flash .bub,.msg.flash{animation:qflash 1.6s ease-out} @keyframes qflash{0%{box-shadow:0 0 0 3px color-mix(in oklch,var(--accent,#57a8ff) 60%,transparent)} 100%{box-shadow:0 0 0 0 transparent}} @media(prefers-reduced-motion:reduce){.row.flash .bub,.msg.flash{animation:none; box-shadow:0 0 0 3px color-mix(in oklch,var(--accent,#57a8ff) 45%,transparent)}} /* плашка «Сохранить/Отмена» (буфер ручных правок карточки, как в amoCRM) */ .savebar{position:fixed;left:calc(var(--rail-w,64px) + 84px);bottom:18px;z-index:80;display:flex;gap:10px;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px; box-shadow:0 8px 24px rgba(0,0,0,.35)} .savebar .sb-n{color:var(--muted);font-size:.9rem} /* скрытие кнопки «Отвечать не нужно» (личная настройка менеджера) */ .rslv-x{cursor:pointer;color:var(--muted);margin-left:6px;font-size:.85em;opacity:.6} .rslv-x:hover{opacity:1;color:var(--bad)} .rslv-restore{padding:10px 12px} .rslv-restore a{cursor:pointer;color:var(--muted);font-size:.82rem;text-decoration:underline dotted} .rslv-restore a:hover{color:var(--ink)} /* «Мой профиль» (клик по логотипу): личные данные менеджера + персональные тумблеры */ .hprof-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:120;display:flex;align-items:center;justify-content:center} .hprof{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;width:340px;box-shadow:0 12px 40px rgba(0,0,0,.4)} .hprof-h{font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .hprof-x{cursor:pointer;color:var(--muted)} .hprof-x:hover{color:var(--bad)} .hprof-av{width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:1.6rem;font-weight:700;margin:0 auto 8px;overflow:hidden} .hprof-av img{width:100%;height:100%;object-fit:cover} .hprof-photo{display:block;margin:0 auto 12px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:5px 10px;cursor:pointer;font-size:.85rem} .hprof-photo:hover{background:var(--surface-3)} .hprof-l{display:block;color:var(--muted);font-size:.8rem;margin:8px 0 3px} .hprof-i{width:100%;box-sizing:border-box;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:8px 10px;font:inherit} .hprof-chk{display:flex;gap:8px;align-items:center;margin:14px 0 4px;font-size:.9rem;cursor:pointer} .hprof-btns{display:flex;gap:10px;margin-top:14px} .hprof-save{flex:1;background:var(--accent);color:var(--accent-ink);border:none;border-radius:8px;padding:9px;cursor:pointer;font:inherit;font-weight:600} .hprof-cancel{background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px 14px;cursor:pointer;font:inherit} .hprof-note{margin-top:8px;color:var(--muted);font-size:.82rem;min-height:1em;text-align:center} .hprof-id{text-align:center;color:var(--muted);font-size:.78rem;margin-bottom:4px} .hprof-hint{color:var(--muted);font-weight:400;font-size:.92em} .hprof-t{resize:vertical;min-height:44px} .hprof-sect{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-weight:600;font-size:.88rem;color:var(--muted)} .hprof-chk{justify-content:flex-start;text-align:left} .hprof-chk input{flex:0 0 auto;margin:0} /* «Настройки профиля» v2 — слепок страницы профиля amoCRM */ .hp2-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow-y:auto} .hp2{background:var(--bg,var(--surface-2));border:1px solid var(--line);border-radius:14px;padding:20px 26px 26px;width:min(860px,94vw);max-height:92vh;overflow-y:auto;box-shadow:0 14px 48px rgba(0,0,0,.45)} .hp2-top{display:flex;align-items:center;gap:14px;margin-bottom:18px} .hp2-title{font-size:1.25rem;font-weight:700;flex:1} .hp2-save{background:var(--accent);color:var(--accent-ink);border:none;border-radius:8px;padding:9px 22px;cursor:pointer;font:inherit;font-weight:600} .hp2-save:hover{filter:brightness(1.06)} .hp2-x{cursor:pointer;color:var(--muted);font-size:1.1rem;padding:4px} .hp2-x:hover{color:var(--bad)} .hp2-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;gap:28px} .hp2-left{flex:0 0 180px;display:flex;flex-direction:column;align-items:center;gap:12px} .hp2-av{width:150px;height:150px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:2.2rem;font-weight:700;overflow:hidden} .hp2-av img{width:100%;height:100%;object-fit:cover} .hp2-photo{background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:6px 14px;cursor:pointer;font:inherit;font-size:.86rem} .hp2-photo:hover{background:var(--surface-3)} .hp2-rows{flex:1;display:grid;grid-template-columns:150px 1fr;gap:14px 18px;align-items:center;align-content:start;max-width:560px} .hp2-rows>label{color:var(--muted);font-size:.92rem} .hp2-i{width:100%;box-sizing:border-box;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;color:var(--ink);padding:9px 11px;font:inherit} .hp2-i:focus{outline:none;border-color:var(--accent)} .hp2-t{resize:vertical;min-height:64px} .hp2-static{color:var(--ink);display:flex;align-items:center;gap:8px} .hp2-copy{cursor:pointer;color:var(--muted)} .hp2-copy:hover{color:var(--accent)} .hp2-login{color:var(--muted);font-size:.85rem} .hp2-sect{font-size:1.05rem;font-weight:700;margin:22px 0 12px} .hp2-set{flex-direction:column;gap:0;padding:6px 22px} .hp2-row2{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)} .hp2-row2:last-child{border-bottom:none} .hp2-row2 b{font-size:.96rem} .hp2-desc{color:var(--muted);font-size:.85rem;margin-top:3px;max-width:560px} /* тумблер как «2-этапная проверка» в amo */ .hp2-sw{position:relative;flex:0 0 auto;cursor:pointer} .hp2-sw input{position:absolute;opacity:0;width:0;height:0} .hp2-sw i{display:block;width:40px;height:22px;border-radius:11px;background:var(--surface-3);border:1px solid var(--line);transition:background .15s;position:relative} .hp2-sw i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:left .15s,background .15s} .hp2-sw input:checked+i{background:var(--accent);border-color:var(--accent)} .hp2-sw input:checked+i::after{left:20px;background:#fff} .hp2-note{margin-top:10px;color:var(--muted);font-size:.85rem;min-height:1.1em;text-align:center} @media (max-width:720px){.hp2-card{flex-direction:column;align-items:center}.hp2-rows{grid-template-columns:1fr;max-width:none;width:100%}} /* ── ЗВОНОК amo-стилем: большой блок с трубкой, Прослушать/Скачать, от-кому, статус ── */ .callcard{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:6px 0;max-width:640px} .callcard .cc-ico{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-size:1.2rem} .callcard.missed .cc-ico{border-color:var(--bad);color:var(--bad)} .callcard .cc-b{flex:1;min-width:0} .callcard .cc-1{font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .callcard .cc-2{margin-top:4px} .callcard .cc-3{margin-top:4px;color:var(--muted);font-size:.92em} .callcard .cc-btn{border:1px solid var(--line);background:none;border-radius:7px;color:var(--accent);padding:3px 10px;cursor:pointer;font:inherit;font-size:.88em} .callcard .cc-btn:hover{background:var(--surface-3)} .callcard audio{display:block;margin-top:8px;width:100%;max-width:420px;height:36px} /* ── ЗАДАЧА amo-стилем, КОМПАКТНО: одна строка на всю ширину, «Выполнить» справа ── */ .taskcard{display:flex;align-items:center;gap:12px;border:1px solid #22c55e;border-radius:9px; padding:7px 12px;margin:6px 0;max-width:none;width:100%;box-sizing:border-box;font-size:.9rem} .taskcard.done{border-color:var(--line);opacity:.75} .taskcard.over{border-color:var(--bad)} .taskcard .tc-1{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.86em;flex:0 0 auto;white-space:nowrap} .taskcard .tc-1 .tc-over{color:var(--bad)} .taskcard .tc-2{margin:0;font-weight:600;flex:0 1 auto;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .taskcard .tc-res{display:flex;gap:8px;flex:1 1 220px;min-width:180px} .taskcard .tc-res input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;color:var(--ink);padding:6px 10px;font:inherit;font-size:.92em} .taskcard .tc-res button{background:var(--accent);color:var(--accent-ink);border:none;border-radius:7px;padding:6px 16px;cursor:pointer;font:inherit;font-size:.92em;flex:0 0 auto} .taskcard .tc-res button:hover{filter:brightness(1.07)} @media (max-width:900px){.taskcard{flex-wrap:wrap}.taskcard .tc-2{white-space:normal}} /* буфер вложений: картинки/видео — КРУПНЫЕ превью как в Wazzup, ✕ по наведению */ .staged-chip.thumb{width:120px;height:120px;padding:0;position:relative;border-radius:10px; overflow:hidden;background:var(--surface-2);display:inline-block} .staged-chip.thumb img,.staged-chip.thumb video{width:100%;height:100%;object-fit:cover;display:block} .staged-chip.thumb .sc-nm{display:none} .staged-chip.thumb .sc-ico{display:none} .staged-chip.thumb .sc-sp{position:absolute;left:8px;top:8px} .staged-chip.thumb.ready .sc-sp{display:none} .staged-chip.thumb .sc-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%; background:rgba(0,0,0,.55);color:#fff;display:none;place-items:center;margin:0;font-size:13px} .staged-chip.thumb:hover .sc-x{display:grid} .staged-chip.thumb.err{outline:2px solid var(--bad)} /* закреплённые внизу ленты открытые задачи (как активная задача amoCRM) */ .tasks-pin{margin-top:14px;padding-top:10px;border-top:2px solid var(--accent)} .tasks-pin-h{font-size:.82rem;font-weight:700;color:var(--accent);margin-bottom:6px} /* иконка типа задачи в карточке — фикс размера (без этого SVG раздувал строку до ~250px) */ .taskcard svg{width:15px;height:15px;flex:0 0 auto;vertical-align:middle} .taskcard .tc-2{display:flex;align-items:center;gap:6px}