/* Salon Inbox — две панели, светлая и тёмная тема. Все цвета через переменные: тема переключается сменой одного атрибута data-theme на , дублировать стили не нужно. */ :root { --bg: #f2f4f7; --panel: #ffffff; --panel-2: #f7f9fb; --text: #1c2430; --muted: #75808f; --line: #dde3ea; --accent: #1668c7; --nav-bg: #1c2430; --nav-text: #b9c3d0; --msg-in: #eef1f5; --msg-out: #d9ecff; --danger: #c0392b; --ok: #1d7a3a; --active: #e8f1fc; } :root[data-theme="dark"] { --bg: #12161c; --panel: #1a1f27; --panel-2: #212832; --text: #e6ebf2; --muted: #8d99a8; --line: #2b333f; --accent: #6cb0ff; --nav-bg: #0e1218; --nav-text: #98a5b5; --msg-in: #232b36; --msg-out: #1d3a5c; --danger: #ff7a6b; --ok: #6bd08d; --active: #1f2a38; } * { box-sizing: border-box; } /* Атрибут hidden обязан скрывать. Без этого правила любое наше `display: flex` на элементе перебивает hidden — и «скрытый» блок остаётся на экране. Именно из-за этого заглушка «Выбери диалог слева» висела поверх переписки. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font: 15px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); } main { max-width: 960px; margin: 0 auto; padding: 16px; } /* Раскладка страницы инбокса: шапка своей высоты, остальное — рабочая область. Раньше высота считалась как «экран минус 44px», но шапка переносится на узком экране и становится выше — низ переписки и поле ответа обрезались. */ body.inbox-page { display: flex; flex-direction: column; height: 100dvh; } body.inbox-page .topnav { flex: 0 0 auto; } /* Инбокс занимает весь экран. margin:0 обязателен: у обычных страниц main центрируется через margin:0 auto, а в флекс-колонке автоматические поля по бокам ЗАПРЕЩАЮТ элементу растянуться — он сжимается по содержимому. Из-за этого на десктопе правая панель получала 130 пикселей вместо тысячи, а «чинилась» только когда открывали диалог и содержимое становилось шире. */ body.inbox-page main { max-width: none; padding: 0; margin: 0; width: 100%; flex: 1 1 auto; min-height: 0; } h1 { font-size: 22px; margin: 8px 0 16px; } h2 { font-size: 17px; margin: 24px 0 8px; } a { color: var(--accent); text-decoration: none; } .muted { color: var(--muted); font-size: 13px; } .error { color: var(--danger); } .ok { color: var(--ok); } .spacer { flex: 1; } .inline { display: inline; } .wrap { white-space: pre-wrap; word-break: break-word; } /* Навигация */ .topnav { display: flex; align-items: center; gap: 14px; background: var(--nav-bg); color: #fff; padding: 10px 18px; min-height: 44px; flex-wrap: wrap; row-gap: 4px; } .topnav .brand { font-weight: 700; margin-right: 10px; } .topnav a { color: var(--nav-text); } .topnav a.active, .topnav a:hover { color: #fff; } .topnav .who { color: #8fd0a0; font-size: 13px; } .linklike { background: none; border: none; color: var(--nav-text); cursor: pointer; font: inherit; padding: 0; } .linklike:hover { color: #fff; } .theme-btn { background: none; border: 1px solid var(--nav-text); color: var(--nav-text); border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; padding: 2px 8px; } .theme-btn:hover { color: #fff; border-color: #fff; } /* Кнопки и поля */ .btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; font-size: 14px; } .btn:hover { background: var(--panel-2); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn:disabled { opacity: .55; cursor: default; } /* Решение по записи: «отменить» и «оставить» должны различаться с первого взгляда. Их жмут вечером, быстро, по списку из трёх десятков человек — одинаковые серые кнопки там гарантированно приводят к промаху, а промах означает снятую запись живого клиента. Красная — необратимая, зелёная — безопасная. */ .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.danger:hover { filter: brightness(1.08); } .btn.safe { background: var(--ok); border-color: var(--ok); color: #fff; } .btn.safe:hover { filter: brightness(1.08); } input, select, textarea { font: inherit; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 12px; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; } /* ── Две панели ─────────────────────────────────────────────────────────── */ .split { display: grid; grid-template-columns: 360px 1fr; height: 100%; } .pane-list { border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; overflow-y: auto; } .pane-convo { display: flex; flex-direction: column; min-width: 0; } .empty { display: flex; align-items: center; justify-content: center; height: 100%; } .filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; } .filters input[type=search] { flex: 1 1 100%; } .filters select { flex: 1 1 45%; font-size: 13px; } .filters .chk { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 4px; } .convo-list { display: flex; flex-direction: column; } .convo-row { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: flex-start; } .convo-row:hover { background: var(--panel-2); } .convo-row.active { background: var(--active); } .convo-row.unread .convo-title strong { font-weight: 700; } .convo-main { flex: 1; min-width: 0; } .convo-title { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .convo-title strong { font-weight: 500; } .convo-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .convo-meta { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .num { font-size: 12px; } .list-more { padding: 10px; text-align: center; } .badge { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 11px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .badge.closed { opacity: .8; } .unread-badge { background: var(--accent); color: #fff; border-radius: 20px; font-size: 11px; padding: 1px 7px; min-width: 20px; text-align: center; } .tag { font-size: 11px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; padding: 1px 7px; } /* ── Диалог ─────────────────────────────────────────────────────────────── */ .convo-page { display: flex; flex-direction: column; height: 100%; min-height: 0; } .convo-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; row-gap: 6px; /* на узком экране кнопки переносятся, а не режутся */ } .convo-header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tags-form { display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 13px; } .tags-form input { width: 220px; } .messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .load-older { align-self: center; } .msg { max-width: 72%; padding: 8px 11px; border-radius: 12px; } .msg.in { background: var(--msg-in); align-self: flex-start; } .msg.out { background: var(--msg-out); align-self: flex-end; } .msg-text { white-space: pre-wrap; word-break: break-word; } .msg-meta { font-size: 11px; margin-top: 3px; } .ai-bar { display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; } .summary-box { margin: 0 14px 8px; padding: 10px; background: var(--panel-2); border-radius: 8px; white-space: pre-wrap; } .reply-box { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; } .reply-box textarea { flex: 1; min-width: 200px; resize: vertical; } .only-mobile { display: none; } /* ── Телефон: одна панель за раз ────────────────────────────────────────── */ @media (max-width: 760px) { .split { grid-template-columns: 1fr; } .pane-convo { display: none; } .split.show-convo .pane-list { display: none; } .split.show-convo .pane-convo { display: flex; } .only-mobile { display: inline-block; } .msg { max-width: 88%; } } /* ── Разделы «Все / Мне / Фокус» ─────────────────────────────────────────── */ .views { display: flex; gap: 6px; padding: 8px 10px 0; background: var(--panel); position: sticky; top: 0; z-index: 3; } .view-chip { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 20px; padding: 3px 12px; font: inherit; font-size: 13px; cursor: pointer; } .view-chip:hover { background: var(--panel-2); } .view-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .view-chip .cnt { font-weight: 700; margin-left: 3px; } /* Плашки задач над перепиской */ .flag-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 14px 0; padding: 8px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: 14px; } .flag-bar.mine { border-color: var(--accent); } .assign-box { margin: 8px 14px 0; } #c-focus.on { border-color: var(--accent); color: var(--accent); } /* ── Приветствие: два языка рядом ───────────────────────────────────────── Две колонки, потому что тексты пишут парой: русский и чешский должны говорить одно и то же. Разнести их по вкладкам — значит сравнивать по памяти. На узком экране колонки становятся друг под другом. */ .wl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 780px) { .wl-cols { grid-template-columns: 1fr; } } /* Заголовок канала над парой колонок: с 26.09.2026 приветствие есть у трёх каналов, и без такой шапки три одинаковые пары форм неразличимы. */ .wl-chan { margin: 22px 0 6px; font-size: 16px; border-top: 1px solid var(--line, #e6e3dd); padding-top: 14px; } .wl-chan .muted { font-weight: 400; font-size: 13px; margin-left: 8px; } .wl-col { min-width: 0; } .wl-head { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; } .wl-head h2 { margin: 0; font-size: 18px; } .wl-note p { margin: 0 0 8px; } .wl-note p:last-child { margin-bottom: 0; } /* Включённое приветствие подсвечено слева: состояние «сейчас уходит клиентам» должно читаться с одного взгляда, без чтения подписи. */ .wl-switch { border-left: 3px solid var(--line); } .wl-switch.on { border-left-color: var(--ok); } .wl-tpl { position: relative; } .wl-tpl.on { border-color: var(--ok); background: var(--active); } .wl-tpl input, .wl-tpl textarea, .wl-new input, .wl-new textarea { width: 100%; margin-bottom: 8px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; } .wl-tpl textarea, .wl-new textarea { resize: vertical; line-height: 1.4; } .wl-badge { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ok); color: #fff; font-size: 12px; font-weight: 600; } .wl-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; flex-wrap: wrap; } .wl-meta .error { color: var(--danger); } /* Разделы страницы «Тексты клиентам». Инстаграм и ватсап разнесены нарочно: это разные каналы с разными правилами, и путать их дорого. */ .wl-section { margin: 28px 0 8px; padding-top: 14px; border-top: 2px solid var(--line); } .wl-kind { margin-bottom: 14px; } .wl-kind > summary { cursor: pointer; padding: 8px 0; font-size: 16px; } .wl-kind code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; } .wl-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; } @media (max-width: 1100px) { .wl-cols3 { grid-template-columns: 1fr; } } .wl-badge.off { background: var(--muted); } /* Предпросмотр — как выглядит у клиента: тот же пузырь, что в переписке. Без него подстановки правят вслепую. */ .wl-prev { white-space: pre-wrap; word-break: break-word; background: var(--msg-out); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: 14px; min-height: 20px; } body.texts-page main { max-width: 1400px; } /* Режим правки. Закрытое поле не должно выглядеть как поле для ввода — иначе человек начинает печатать и не понимает, почему не печатается. */ .wl-tpl textarea[readonly], .wl-tpl input[readonly] { background: transparent; border-color: transparent; cursor: default; } .wl-tpl.editing { box-shadow: 0 0 0 2px var(--accent); } .wl-tpl.editing textarea, .wl-tpl.editing input { background: var(--panel-2); border-color: var(--accent); } /* Кнопки на странице текстов — одним цветом. В инбоксе цветные кнопки оправданы: там решают судьбу записи вечером по списку из трёх десятков человек, и промах стоит денег. Здесь другое — девять карточек в ряд, у каждой четыре кнопки. Синее с красным вперемешку рябит и перетягивает внимание с текста, ради которого страница и сделана. Поэтому все кнопки спокойные, а смысл проявляется под курсором. */ body.texts-page .btn, body.texts-page .btn.primary, body.texts-page .btn.danger { background: var(--panel-2); border-color: var(--line); color: var(--text); font-weight: 400; } body.texts-page .btn:hover { background: var(--line); } body.texts-page .btn.primary:hover { border-color: var(--accent); color: var(--accent); } body.texts-page .btn.danger:hover { border-color: var(--danger); color: var(--danger); } /* Метка «отправляется сейчас» — контуром, а не заливкой: это подпись к карточке, а не то, на что надо смотреть в первую очередь. */ body.texts-page .wl-badge { background: transparent; color: var(--ok); border: 1px solid var(--ok); font-weight: 500; } body.texts-page .wl-badge.off { color: var(--muted); border-color: var(--line); } body.texts-page .wl-tpl.on { background: var(--panel); } /* Найденное сообщение: подсветка гаснет сама — метка «вот оно», а не новый постоянный цвет в переписке. */ .msg.hit .msg-text { box-shadow: 0 0 0 2px #d9a441; animation: hit-fade 4s ease-out forwards; } @keyframes hit-fade { from { box-shadow: 0 0 0 2px #d9a441; } to { box-shadow: 0 0 0 2px rgba(217,164,65,0); } } .convo-last.hit-text::before { content: '🔍 '; } /* Официальные шаблоны WhatsApp: что одобрено, что ждёт проверки (03.09.2026) */ .tpl-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .tpl-card { padding: 12px 14px; } .tpl-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; } .tpl-role { margin: 4px 0 8px; font-size: 13px; color: #8a7a5c; } .tpl-body { white-space: pre-wrap; font: inherit; font-size: 13px; margin: 0; padding: 8px 10px; background: rgba(0,0,0,.03); border-radius: 8px; } .tpl-bad { color: #b1493f; font-size: 13px; } .tpl-sub { margin: 16px 0 8px; font-size: 15px; } .tpl-old { opacity: .6; } .how-note p { margin: 6px 0; } /* ── Замеры по каналам ──────────────────────────────────────────────────── Таблица доставки широкая (девять колонок), а смотрят её с телефона. Прокручиваем горизонтально саму таблицу, а не страницу: иначе шапка и меню уезжают вбок вместе с цифрами. */ .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 6px; } .tablewrap > .table { min-width: 620px; } .st-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }