/* ───────────────────────────────────────────────────────────────────── tamper.market — tickets, second generation. Two surfaces share this file: the buyer's two-column inbox (/support/tickets) and the operator's messenger (/support for staff). They differ only in the frame; every part inside the conversation is the same component, because the two sides are reading the same thread. Language: the almost-black surface of the market, hairlines instead of borders, blue for links and active state, green ONLY where money is. Everything is prefixed .tkv- so the previous generation's .tk- rules in support.css (still loaded for the site header) cannot reach in here. Numbers behind the layout decisions, measured on the live base: 3 070 tickets, 2 185 of them ended in a refund for 153 543 ₽ (71%), 2 055 are "account invalid", 351 are open right now. Refund is the normal ending, so it sits on the composer, not inside a card; waiting time is the loudest thing in the queue, so it is the only coloured number there. ───────────────────────────────────────────────────────────────────── */ /* The tokens sit on the document, not only on the panel: the confirmation dialog and the toast are appended to , outside .tkv, so anything scoped to .tkv would leave them with unresolved var() - and an unresolved var() in a shorthand throws the whole declaration away. That is how the refund dialog ended up with `opacity: 0` and no animation to lift it. */ :root, .tkv { --tkv-hd: 72px; /* .hd in support.css is fixed, 72px tall */ --tkv-bg: #050505; --tkv-card: #0c0c0d; --tkv-card-2: #111112; --tkv-el: #161617; --tkv-hair: rgba(255,255,255,.07); --tkv-hair-2: rgba(255,255,255,.11); --tkv-ink: #fff; --tkv-ink-2: rgba(255,255,255,.64); --tkv-ink-3: rgba(255,255,255,.42); --tkv-ink-4: rgba(255,255,255,.26); --tkv-az: #60a5fa; --tkv-money: #4ade80; --tkv-warn: #fbbf24; --tkv-bad: #f87171; --tkv-ease: cubic-bezier(.16, 1, .3, 1); --tkv-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace; --tkv-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Everything below is the panel itself and must not leak onto the document. */ .tkv { position: relative; color: var(--tkv-ink); font-family: var(--tkv-font); -webkit-font-smoothing: antialiased; } .tkv *, .tkv *::before, .tkv *::after { box-sizing: border-box; } /* Сброс завёрнут в :where(), чтобы весить ноль. Как обычный `.tkv button` он был специфичнее любого одиночного класса и молча съедал `padding` и `font-size` у всего, что нарисовано кнопкой: вкладки, строки списка, чипы быстрых ответов и .tkv-btn ехали без отступов и кеглем 16px вместо своего. Отсюда и слипшиеся фильтры, и вылезающая за колонку строка вкладок. Обходные `.tkv button.tkv-cat` ниже теперь не нужны, но и не мешают. */ .tkv :where(button) { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; } .tkv a { color: inherit; text-decoration: none; } .tkv ::selection { background: rgba(96,165,250,.28); } /* Без border-radius: свойство применяется к самому элементу, и круглый чип быстрого ответа на фокусе становился прямоугольником со скруглением 6px. Обводка и так повторяет форму контрола. */ .tkv :focus-visible { outline: 2px solid var(--tkv-az); outline-offset: 2px; } /* У полей со своей оболочкой фокус показывает ОБОЛОЧКА, а не сам контрол. Правило выше специфичнее локального `outline: none` у textarea, поэтому поверх скруглённого поля рисовалась вторая рамка — жёсткий синий прямоугольник во всю ширину с квадратными углами. Индикация фокуса при этом не исчезает: контейнер меняет цвет рамки и получает мягкое кольцо, которое повторяет его скругление. */ .tkv-comp-in textarea:focus-visible, .tkv-search input:focus-visible, .tkv-nf-ta textarea:focus-visible, .tkv-nf-in:focus-visible { outline: none; } /* ── Frames ───────────────────────────────────────────────────────── Buyer: list is narrow on purpose. It exists to switch threads, not to be read. Operator: queue | conversation | facts. */ /* Отступ под фиксированную шапку держит точка монтирования, а не сама панель. Раньше его давал margin-top у .tkv-split/.tkv-msgr, и этот верхний margin схлопывался наружу через : боди начинался на 72px ниже, сохраняя свой min-height:100vh, и вся страница получала ровно 72px мёртвой прокрутки под подвалом. Padding не схлопывается. */ .tkv, [data-tkv-mount] { padding-top: var(--tkv-hd); } .tkv-split { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100vh - var(--tkv-hd)); } /* Три настоящие колонки грида: очередь | диалог | факты. Панель фактов — всегда СВОЯ колонка справа, а не выезжающий поверх чата слой, поэтому она физически не может перекрыть переписку или поле ввода. */ .tkv-msgr { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; height: calc(100vh - var(--tkv-hd)); } .tkv-msgr.is-folded { grid-template-columns: 300px minmax(0, 1fr) 0; } .tkv-msgr.is-folded .tkv-facts { display: none; } /* ── Buyer rail ─────────────────────────────────────────────────────── */ .tkv-side { border-right: 1px solid var(--tkv-hair); display: flex; flex-direction: column; min-height: 0; min-width: 0; } .tkv-side-h { padding: 22px 22px 0; } .tkv-side-h h1 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -1px; display: flex; align-items: baseline; gap: 11px; } .tkv-side-h h1 span { font-size: 13px; font-weight: 500; color: var(--tkv-ink-3); letter-spacing: -.2px; } .tkv-side-tabs { display: flex; gap: 20px; padding: 0 22px; border-bottom: 1px solid var(--tkv-hair); margin-top: 14px; } .tkv-tab { position: relative; padding: 12px 0; font-size: 14px; color: var(--tkv-ink-3); transition: color .16s; white-space: nowrap; } .tkv-tab:hover { color: var(--tkv-ink-2); } .tkv-tab.on { color: var(--tkv-ink); font-weight: 650; } .tkv-tab i { font-style: normal; margin-left: 8px; font-size: 12px; color: var(--tkv-ink-4); font-variant-numeric: tabular-nums; } .tkv-tab.on i { color: var(--tkv-ink-3); } .tkv-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tkv-ink); transform: scaleX(0); transition: transform .22s var(--tkv-ease); } .tkv-tab.on::after { transform: scaleX(1); } .tkv-side-list { flex: 1; overflow-y: auto; padding: 0 22px; overscroll-behavior: contain; } .tkv-side-list::-webkit-scrollbar { width: 6px; } .tkv-side-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.07); border-radius: 3px; } /* Строка обращения: значок категории + три яруса текста. Иконка нужна не для украшения — обращений у покупателя обычно два-три, и они все называются одинаково («Аккаунт невалид»), так что отличать их удобнее по значку и цвету статуса, чем перечитывая заголовки. */ .tkv-row { position: relative; width: 100%; text-align: left; padding: 13px 0; border-bottom: 1px solid var(--tkv-hair); cursor: pointer; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; align-items: start; transition: opacity .16s; } .tkv-row-b { min-width: 0; } .tkv-row-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--tkv-card-2); color: var(--tkv-ink-4); transition: color .16s, background .16s; } .tkv-row-ic svg { width: 15px; height: 15px; stroke-width: 1.8; } /* Same total height, grouped differently: the preview belongs to the title, the status line is a separate tier and gets the air. */ .tkv-row .tkv-row-p { margin-top: 4px; } .tkv-row .tkv-row-m { margin-top: 8px; } .tkv-row:hover { opacity: .82; } .tkv-row.is-done { opacity: .55; } .tkv-row.is-done:hover { opacity: .78; } .tkv-row.on { opacity: 1; } .tkv-row.on::before { content: ''; position: absolute; left: -22px; top: 0; bottom: 0; width: 2px; background: #fff; } /* Цвет значка — от статуса. Единственное место в строке, где цвет несёт смысл: открыт синим, ждёт вас янтарным, закрыт зелёным. */ .tkv-row.st-open .tkv-row-ic { color: var(--tkv-az); background: rgba(96,165,250,.10); } .tkv-row.st-in_progress .tkv-row-ic { color: var(--tkv-warn); background: rgba(251,191,36,.10); } .tkv-row.st-waiting .tkv-row-ic { color: var(--tkv-ink-2); background: rgba(255,255,255,.06); } .tkv-row.st-closed .tkv-row-ic, .tkv-row.st-archived .tkv-row-ic { color: var(--tkv-ink-4); background: rgba(255,255,255,.04); } /* Непрочитанное — единственный случай, когда строку стоит подсветить целиком: иначе ответ поддержки теряется среди старых обращений. */ .tkv-row.has-unread .tkv-row-s { color: #fff; font-weight: 700; } .tkv-row.has-unread .tkv-row-p { color: var(--tkv-ink-2); } .tkv-row-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tkv-row-s { font-size: 13.5px; font-weight: 600; letter-spacing: -.15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tkv-row-p { font-size: 12px; color: var(--tkv-ink-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .tkv-row-m { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--tkv-ink-4); } .tkv-side-f { padding: 14px 22px 18px; border-top: 1px solid var(--tkv-hair); } /* ── Operator queue ─────────────────────────────────────────────────── */ .tkv-rail { border-right: 1px solid var(--tkv-hair); display: flex; flex-direction: column; min-height: 0; min-width: 0; } .tkv-rail-h { padding: 14px 16px; border-bottom: 1px solid var(--tkv-hair); display: flex; align-items: center; gap: 10px; } .tkv-rail-h b { font-size: 15px; font-weight: 750; letter-spacing: -.4px; } /* Только счётчик рядом с заголовком: без `>` правило доставало и до подписи внутри .tkv-order, из-за чего та не светлела на наведении. */ .tkv-rail-h > span { font-size: 11.5px; color: var(--tkv-ink-4); font-variant-numeric: tabular-nums; } /* Переключатель порядка очереди. Кнопку добавили 27.08 и не описали: её значок — голый внутри этой же строки, и `display: block` уносил его на отдельную строку, оставляя над ним висячую точку-разделитель. Шапка из-за этого была в три яруса. */ .tkv-chat-h-t > span { display: block; font-size: 12px; color: var(--tkv-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tkv-back { display: none; } .tkv-body { position: relative; flex: 1; overflow-y: auto; padding: 24px 22px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; } /* Короткая переписка прижимается к полю ввода, а не висит вверху над пустым экраном — так читают все мессенджеры. margin-top:auto на первом элементе, а не justify-content: с ним при переполнении ломается прокрутка вверх и верхние сообщения становятся недоступны. Форму нового тикета исключаем: она читается сверху вниз. */ .tkv-body:not(.tkv-nf) > :first-child { margin-top: auto; } .tkv-body::-webkit-scrollbar { width: 8px; } .tkv-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; } .tkv-msgr .tkv-body { gap: 11px; } /* Bubble only on the other side; your own messages are a lighter fill. Matching bubbles on both sides read like two strangers talking. */ /* Only a message that arrived while the thread was open slides in. Running this on every repaint made a freshly opened ticket read as an empty panel for the length of the animation — day dividers, which are not animated, showed up alone. */ .tkv-msg { display: flex; gap: 11px; max-width: 74%; } .tkv-msg.tkv-in, .tkv-sys.tkv-in { animation: tkvIn .3s var(--tkv-ease) both; } .tkv-msgr .tkv-msg { max-width: 66%; } .tkv-msg.me { margin-left: auto; flex-direction: row-reverse; } .tkv-msg.me > .tkv-av { display: none; } @keyframes tkvIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .tkv-av { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; background: var(--tkv-el); color: var(--tkv-ink-2); overflow: hidden; } .tkv-av img { width: 100%; height: 100%; object-fit: cover; } .tkv-av.adm { background: rgba(96,165,250,.16); color: var(--tkv-az); } .tkv-av.lg { width: 36px; height: 36px; border-radius: 11px; } .tkv-bub { background: var(--tkv-card-2); border: 1px solid var(--tkv-hair); border-radius: 14px; padding: 11px 14px; min-width: 0; } .tkv-msg.me .tkv-bub { background: #1c1c1f; border-color: var(--tkv-hair-2); } .tkv-bub p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.9); word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; } .tkv-bub-a { display: block; font-size: 11px; font-weight: 650; color: var(--tkv-az); margin-bottom: 4px; } .tkv-bub-m { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 10.5px; color: var(--tkv-ink-4); font-variant-numeric: tabular-nums; } .tkv-msg.me .tkv-bub-m { justify-content: flex-end; } .tkv-rd { display: inline-flex; color: var(--tkv-ink-4); transition: color .2s; } .tkv-rd.seen { color: var(--tkv-az); } .tkv-rd svg { width: 13px; height: 13px; } /* Roughly one message in five carries a screenshot of the problem, so the image is part of the conversation, not a footnote. */ .tkv-att { margin-top: 9px; border-radius: 10px; overflow: hidden; border: 1px solid var(--tkv-hair); position: relative; display: block; background: var(--tkv-el); } .tkv-att img { display: block; width: 100%; height: 148px; object-fit: cover; } .tkv-att-n { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 7px; font-size: 10.5px; color: rgba(255,255,255,.82); background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); } /* A system event is a divider, not a bubble. */ .tkv-sys { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--tkv-ink-4); padding: 2px 0; } .tkv-sys::before, .tkv-sys::after { content: ''; flex: 1; height: 1px; background: var(--tkv-hair); } .tkv-sys > span { text-align: center; } .tkv-sys b { font-weight: 550; color: var(--tkv-ink-3); } .tkv-sys.money b { color: var(--tkv-money); } /* Date keeps its place while the thread scrolls under it. */ .tkv-day { position: sticky; top: -24px; z-index: 3; display: flex; justify-content: center; padding: 2px 0; } .tkv-day span { font-size: 10.5px; font-weight: 600; letter-spacing: .3px; color: var(--tkv-ink-3); padding: 4px 11px; border-radius: 999px; background: rgba(12,12,13,.92); border: 1px solid var(--tkv-hair); backdrop-filter: blur(10px); } .tkv-typing { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--tkv-ink-3); padding-left: 41px; } .tkv-dots { display: inline-flex; gap: 3px; } .tkv-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--tkv-ink-3); animation: tkvBlink 1.3s infinite both; } .tkv-dots i:nth-child(2) { animation-delay: .18s; } .tkv-dots i:nth-child(3) { animation-delay: .36s; } @keyframes tkvBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } /* ── Composer ───────────────────────────────────────────────────────── */ .tkv-comp { border-top: 1px solid var(--tkv-hair); padding: 14px 22px 18px; flex: none; } .tkv-comp.tight { padding-top: 11px; border-top: 0; } /* ── Быстрые ответы ─────────────────────────────────────────────────── */ .tkv-tpls { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; } .tkv-tpl { height: 26px; padding: 0 11px; border-radius: 999px; border: 0; background: rgba(255,255,255,.05); color: var(--tkv-ink-3); font-family: inherit; font-size: 11.5px; cursor: pointer; transition: background .14s, color .14s, scale .1s; } .tkv-tpl:hover { background: rgba(255,255,255,.1); color: var(--tkv-ink); } .tkv-tpl:active { scale: .96; } .tkv-tpl-edit { width: 26px; padding: 0; color: var(--tkv-ink-4); } .tkv-tpl-edit:hover { color: var(--tkv-ink); } /* Редактор заготовок */ .tkv-tple { width: min(560px, 92vw); } .tkv-tple-list { display: flex; flex-direction: column; gap: 13px; max-height: 46vh; overflow-y: auto; margin: 4px 0 14px; } .tkv-tple-empty { padding: 14px 0; font-size: 13px; color: var(--tkv-ink-4); } .tkv-tple-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 13px; border-bottom: 1px solid var(--tkv-hair); } .tkv-tple-row:last-child { border-bottom: 0; padding-bottom: 0; } .tkv-tple-top { display: flex; align-items: center; gap: 8px; } .tkv-tple-i { flex: 1; min-width: 0; height: 34px; padding: 0 11px; background: var(--tkv-card-2); color: var(--tkv-ink); border: 1px solid var(--tkv-hair); border-radius: 9px; font-family: inherit; font-size: 13px; outline: none; transition: border-color .16s; } .tkv-tple-i:focus { border-color: rgba(255,255,255,.2); } .tkv-tple-i.body { font-size: 12.5px; color: var(--tkv-ink-2); } .tkv-tple-i::placeholder { color: var(--tkv-ink-4); } .tkv-tple-x { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--tkv-ink-4); font-size: 17px; line-height: 1; cursor: pointer; transition: background .14s, color .14s; } .tkv-tple-x:hover { background: rgba(248,113,113,.12); color: #f87171; } .tkv-tple-used { font-size: 11px; color: var(--tkv-ink-4); } .tkv-tple-add { display: flex; gap: 8px; flex-wrap: wrap; } .tkv-tple-add .tkv-tple-i { flex: 1 1 130px; } .tkv-tple-add .tkv-btn { flex: none; } .tkv-comp-in { display: flex; align-items: flex-end; gap: 12px; background: var(--tkv-card-2); border: 1px solid var(--tkv-hair); border-radius: 14px; padding: 10px 12px 10px 14px; transition: border-color .18s; } .tkv-comp-in:focus-within { border-color: rgba(96,165,250,.5); box-shadow: 0 0 0 3px rgba(96,165,250,.11); } .tkv-comp-in textarea { flex: 1; background: none; border: 0; outline: none; resize: none; font-family: inherit; color: var(--tkv-ink); font-size: 13.5px; line-height: 1.5; max-height: 108px; min-height: 22px; } .tkv-comp-in textarea::placeholder { color: var(--tkv-ink-4); } .tkv-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--tkv-ink-3); transition: background .16s, color .16s; } .tkv-ic:hover { background: rgba(255,255,255,.06); color: var(--tkv-ink); } .tkv-ic svg { width: 17px; height: 17px; stroke-width: 1.8; } .tkv-send { width: 32px; height: 32px; border-radius: 9px; flex: none; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; transition: transform .16s var(--tkv-ease), opacity .16s; } .tkv-send:hover { transform: scale(1.06); } .tkv-send:active { transform: scale(.94); } .tkv-send[disabled] { opacity: .4; cursor: default; transform: none; } .tkv-send svg { width: 16px; height: 16px; stroke-width: 2; } .tkv-comp-hint { margin-top: 9px; font-size: 11px; color: var(--tkv-ink-4); display: flex; gap: 14px; flex-wrap: wrap; } .tkv-comp-hint kbd { font-family: var(--tkv-mono); font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.06); color: var(--tkv-ink-3); } .tkv-comp-hint-r { margin-left: auto; } /* На телефоне Enter и Shift+Enter — подсказки о клавиатуре, которой нет, и ради них строка переносилась на два яруса. Остаётся срок ответа: он полезен на любом устройстве. */ @media (max-width: 720px) { .tkv-comp-hint > span:not(.tkv-comp-hint-r) { display: none; } .tkv-comp-hint-r { margin-left: 0; } } .tkv-comp-atts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; } .tkv-comp-att { position: relative; width: 54px; height: 54px; border-radius: 9px; overflow: hidden; border: 1px solid var(--tkv-hair); background: var(--tkv-el); } .tkv-comp-att img { width: 100%; height: 100%; object-fit: cover; } .tkv-comp-att button { position: absolute; top: 2px; right: 2px; width: 17px; height: 17px; border-radius: 50%; background: rgba(0,0,0,.74); color: #fff; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; } /* Загрузка вложения. Плитка появляется сразу после выбора файла: на мобильном интернете скриншот уходит десятками секунд, и без этого поле ввода выглядело так, будто ничего не произошло. */ .tkv-comp-att.up img { opacity: .45; filter: saturate(.6); } .tkv-comp-att-sp { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); border-top-color: #fff; animation: tkv-att-spin .7s linear infinite; } @keyframes tkv-att-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .tkv-comp-att-sp { animation-duration: 2.4s; } } /* Перетаскивание файла на композер. */ .tkv-comp.tkv-drag { position: relative; } .tkv-comp.tkv-drag::after { content: ''; position: absolute; inset: 6px; border-radius: 12px; pointer-events: none; border: 1.5px dashed var(--tkv-az); background: color-mix(in srgb, var(--tkv-az) 8%, transparent); } /* Пока картинка перезапрашивает свежую подпись — не мигаем пустотой. */ .tkv-att.reloading { opacity: .5; } /* Closed thread: a lock instead of a field. */ .tkv-locked { border-top: 1px solid var(--tkv-hair); padding: 20px 22px; flex: none; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--tkv-ink-3); } .tkv-locked svg { width: 16px; height: 16px; color: var(--tkv-ink-4); flex: none; } .tkv-locked button { color: var(--tkv-az); font-size: 13px; font-weight: 600; } .tkv-locked button:hover { text-decoration: underline; } /* The resolution bar is glued to the composer because it is how almost every one of these conversations ends. */ .tkv-resolve { display: flex; align-items: center; gap: 10px; padding: 11px 22px; flex: none; border-top: 1px solid var(--tkv-hair); background: rgba(74,222,128,.05); } .tkv-resolve > span { font-size: 12px; color: var(--tkv-ink-3); flex: 1; min-width: 0; } /* ── Facts panel ────────────────────────────────────────────────────── */ .tkv-facts { border-left: 1px solid var(--tkv-hair); overflow-y: auto; padding: 18px; min-width: 0; } .tkv-facts::-webkit-scrollbar { width: 6px; } .tkv-facts::-webkit-scrollbar-thumb { background: rgba(255,255,255,.07); border-radius: 3px; } .tkv-fb { margin-bottom: 20px; } .tkv-fb > b { display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .8px; text-transform: uppercase; color: var(--tkv-ink-4); margin-bottom: 9px; } .tkv-kv { display: flex; flex-direction: column; } .tkv-kv-r { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--tkv-hair); font-size: 12.5px; } .tkv-kv-r:last-child { border-bottom: 0; } .tkv-kv-r span { color: var(--tkv-ink-3); } .tkv-kv-r b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; } /* Date plus clock in a narrow column: never wrap, never drift off the right edge as the digits change. */ .tkv-kv-r b.stamp { flex: none; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; letter-spacing: -.1px; } .tkv-kv-r b.money { color: var(--tkv-money); } .tkv-kv-r b.bad { color: var(--tkv-bad); } .tkv-facts-note { font-size: 11.5px; color: var(--tkv-ink-4); margin-top: 8px; } .tkv-hist-l { display: flex; flex-direction: column; } .tkv-hist { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--tkv-hair); width: 100%; text-align: left; transition: opacity .16s; } .tkv-hist:last-child { border-bottom: 0; } .tkv-hist:hover { opacity: .75; } .tkv-hist-t { font-size: 11.5px; color: var(--tkv-ink-3); font-variant-numeric: tabular-nums; } /* ── Header actions + status menu ───────────────────────────────────── */ .tkv-h-act { position: relative; display: flex; align-items: center; gap: 9px; flex: none; } .tkv-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 178px; padding: 5px; border-radius: 12px; background: var(--tkv-card); border: 1px solid var(--tkv-hair-2); box-shadow: 0 18px 44px rgba(0,0,0,.6); display: flex; flex-direction: column; } .tkv-menu button { text-align: left; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; color: var(--tkv-ink-2); transition: background .14s, color .14s; } .tkv-menu button:hover { background: rgba(255,255,255,.06); color: var(--tkv-ink); } /* Порог тот же, на котором панель фактов складывается (см. ниже). При 1180px пункт уже показывался, но класс show-facts на такой ширине ещё ничего не делал — пункт меню был мёртвым. */ .tkv-menu-facts { display: none; } @media (max-width: 1080px) { .tkv-menu-facts { display: block; } } /* ── Buttons ────────────────────────────────────────────────────────── */ .tkv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 17px; border-radius: 10px; font-size: 13px; font-weight: 650; white-space: nowrap; background: rgba(255,255,255,.06); color: var(--tkv-ink); transition: background .16s, transform .12s var(--tkv-ease), opacity .16s; } .tkv-btn:hover { background: rgba(255,255,255,.11); } .tkv-btn:active { transform: translateY(1px); } .tkv-btn[disabled] { opacity: .45; cursor: default; transform: none; } .tkv-btn svg { width: 15px; height: 15px; stroke-width: 1.9; } .tkv-btn.pri { background: #fff; color: #000; } .tkv-btn.pri:hover { background: #e6e6e6; } .tkv-btn.money { background: var(--tkv-money); color: #052e13; } .tkv-btn.money:hover { background: #6ee79a; } .tkv-btn.sm { height: 32px; padding: 0 13px; font-size: 12.5px; border-radius: 9px; } .tkv-btn.wide { width: 100%; } /* ── New-ticket form ────────────────────────────────────────────────── Прошлая версия была стопкой из четырёх одинаковых полей: подпись капсом, контрол, снова подпись. Всё одного веса, поэтому главное решение — категория, от которой зависит маршрут обращения, — стояло в выпадающем списке наравне с необязательной темой, а кнопка отправки уезжала под сгиб вместе с текстовым полем. Теперь форма читается как разговор: три вопроса, у каждого ответ на виду. Старые .tkv-form / .tkv-lbl / .tkv-field удалены вместе с разметкой, которая их рисовала. */ .tkv-nf { gap: 26px; padding-bottom: 8px; } /* Колонка, а не вся панель: у оператора диалог шире полутора тысяч пикселей, и растянутое на них поле ввода читать невозможно. */ .tkv-nf-w { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 26px; } .tkv-nf-sec { display: flex; flex-direction: column; gap: 11px; } .tkv-nf-q { font-size: 14px; font-weight: 650; letter-spacing: -.2px; color: var(--tkv-ink); } /* Категории плиткой. Их шесть, и два обращения из трёх — «аккаунт невалид»: в выпадающем списке этот выбор был кликом вслепую. */ .tkv-nf-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; } /* Селектор с именем элемента: .tkv button { font: inherit } выше специфичнее одного класса и иначе возвращает кегль на 16px. */ .tkv button.tkv-cat { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 46px; padding: 9px 13px; border-radius: 12px; background: var(--tkv-card-2); border: 1px solid var(--tkv-hair); color: var(--tkv-ink-2); font-size: 13px; font-weight: 550; line-height: 1.25; transition: border-color .16s, background .16s, color .16s; } /* stroke-width задаём здесь: у самих значков атрибута нет, и без правила они рисуются единицей — волосок рядом с текстом в 550. */ .tkv-cat svg { width: 17px; height: 17px; flex: none; stroke-width: 1.8; color: var(--tkv-ink-4); transition: color .16s; } .tkv button.tkv-cat:hover { background: var(--tkv-el); color: var(--tkv-ink); } .tkv-cat:hover svg { color: var(--tkv-ink-3); } .tkv button.tkv-cat.on { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.45); color: var(--tkv-ink); } .tkv-cat.on svg { color: var(--tkv-az); } /* Заказ — тоже выбор, а не поле. Товар и сумма: свою покупку человек узнаёт по ним, а не по номеру заказа. */ .tkv-nf-orders { display: flex; flex-direction: column; gap: 6px; } .tkv button.tkv-ord { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 44px; padding: 8px 14px; border-radius: 11px; background: var(--tkv-card-2); border: 1px solid var(--tkv-hair); color: var(--tkv-ink-2); font-size: 13px; transition: border-color .16s, background .16s, color .16s; } .tkv button.tkv-ord:hover { background: var(--tkv-el); color: var(--tkv-ink); } .tkv button.tkv-ord.on { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.45); color: var(--tkv-ink); } .tkv-ord-n { flex: 1; min-width: 0; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tkv-ord-m { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--tkv-money); } .tkv-ord-m.tkv-ord-none { color: var(--tkv-ink-4); font-weight: 500; } /* Рамка на обёртке, счётчик и подсказка внутри неё — так они часть одного поля, а не ещё одна строка формы. */ .tkv-nf-ta { border-radius: 13px; background: var(--tkv-card-2); border: 1px solid var(--tkv-hair); transition: border-color .16s; } .tkv-nf-ta:focus-within { border-color: rgba(96,165,250,.5); box-shadow: 0 0 0 3px rgba(96,165,250,.11); } .tkv-nf-ta textarea { display: block; width: 100%; padding: 13px 15px 6px; border: 0; background: none; color: var(--tkv-ink); font-family: inherit; font-size: 14px; line-height: 1.55; outline: none; resize: vertical; min-height: 130px; } .tkv-nf-ta textarea::placeholder { color: var(--tkv-ink-4); } .tkv-nf-ta-f { display: flex; align-items: center; gap: 12px; padding: 6px 15px 11px; } .tkv-nf-hint { flex: 1; min-width: 0; font-size: 11.5px; color: var(--tkv-ink-4); } .tkv-nf-cnt { flex: none; font-size: 11.5px; color: var(--tkv-ink-4); font-variant-numeric: tabular-nums; transition: color .16s; } .tkv-nf-cnt.near { color: var(--tkv-warn); } /* Тема нужна редко: без неё сервер подставит название категории. Свёрнутая строка честнее, чем пустое поле в общем ряду. */ .tkv-nf-more { border-top: 1px solid var(--tkv-hair); padding-top: 16px; } .tkv-nf-more summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; color: var(--tkv-ink-3); transition: color .16s; } .tkv-nf-more summary::-webkit-details-marker { display: none; } .tkv-nf-more summary::before { content: ''; width: 7px; height: 7px; flex: none; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .18s var(--tkv-ease); } .tkv-nf-more[open] summary::before { transform: rotate(45deg); } .tkv-nf-more summary:hover { color: var(--tkv-ink-2); } .tkv-nf-more summary span { color: var(--tkv-ink-4); font-size: 12px; } .tkv-nf-in { width: 100%; margin-top: 11px; height: 42px; padding: 0 14px; border-radius: 11px; background: var(--tkv-card-2); border: 1px solid var(--tkv-hair); color: var(--tkv-ink); font-family: inherit; font-size: 13.5px; outline: none; transition: border-color .16s; } .tkv-nf-in:focus { border-color: rgba(96,165,250,.5); box-shadow: 0 0 0 3px rgba(96,165,250,.11); } .tkv-nf-in::placeholder { color: var(--tkv-ink-4); } /* Подвал прижат к низу панели: раньше кнопка уходила под сгиб вместе с текстовым полем, и на телефоне до неё надо было долистывать. */ .tkv-nf-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--tkv-hair); background: var(--tkv-card); } .tkv .tkv-nf-go { flex: 1; max-width: 500px; height: 44px; font-size: 14px; gap: 10px; } .tkv-nf-go kbd { font: inherit; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.1); color: rgba(0,0,0,.5); } .tkv .tkv-nf-cancel { flex: none; color: var(--tkv-ink-3); background: none; } .tkv .tkv-nf-cancel:hover { background: rgba(255,255,255,.06); color: var(--tkv-ink); } @media (max-width: 720px) { .tkv-nf { gap: 22px; } .tkv-nf-cats { grid-template-columns: 1fr 1fr; } .tkv button.tkv-cat { min-height: 44px; padding: 8px 11px; font-size: 12.5px; } .tkv-nf-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } .tkv-nf-go kbd { display: none; } } @media (max-width: 420px) { .tkv-nf-cats { grid-template-columns: 1fr; } } /* ── Empty / loading / error ────────────────────────────────────────── */ .tkv-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 24px; text-align: center; color: var(--tkv-ink-4); font-size: 13px; } .tkv-empty svg { width: 26px; height: 26px; stroke-width: 1.4; color: var(--tkv-ink-4); } .tkv-empty b { display: block; color: var(--tkv-ink-2); font-size: 14px; font-weight: 650; margin-bottom: 4px; } .tkv-empty span { display: block; max-width: 34ch; line-height: 1.5; } .tkv-side-list > .tkv-empty { min-height: 180px; } /* A ticket really can hold no messages. Without this the thread is a blank rectangle above the composer, which reads as a load that failed. */ .tkv-thread-empty { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 32px 24px; text-align: center; color: var(--tkv-ink-4); font-size: 12.5px; } .tkv-thread-empty svg { width: 24px; height: 24px; stroke-width: 1.4; } .tkv-thread-empty b { color: var(--tkv-ink-2); font-size: 13.5px; font-weight: 650; } .tkv-thread-empty span { max-width: 32ch; line-height: 1.5; } /* У класса две роли: экран во всю панель (загрузка, вход, ошибка) и спиннер внутри колонки диалога. Во второй роли собственная высота в 100vh вместе с отступом под шапку уводила спиннер на 36px ниже центра колонки — поэтому размеры экрана даёт только верхний уровень. */ .tkv-boot { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; } .tkv > .tkv-boot, [data-tkv-mount] > .tkv-boot { height: calc(100vh - var(--tkv-hd)); } .tkv-spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); border-top-color: var(--tkv-az); animation: tkvSpin .8s linear infinite; } @keyframes tkvSpin { to { transform: rotate(360deg); } } /* ── Toast + confirmation ───────────────────────────────────────────── */ .tkv-toast { position: fixed; left: 50%; bottom: 26px; z-index: 200; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 11px; font-size: 13px; font-weight: 550; background: rgba(18,18,20,.96); border: 1px solid var(--tkv-hair-2); color: var(--tkv-ink); backdrop-filter: blur(12px); max-width: min(92vw, 460px); font-family: var(--tkv-font); -webkit-font-smoothing: antialiased; transition: opacity .2s, transform .2s var(--tkv-ease); } .tkv-toast.on { opacity: 1; transform: translate(-50%, 0); } .tkv-toast.err { border-color: rgba(248,113,113,.4); } .tkv-toast.ok { border-color: rgba(74,222,128,.4); } .tkv-modal { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); font-family: var(--tkv-font); -webkit-font-smoothing: antialiased; } /* Nothing about whether this dialog can be seen depends on an animation running. It moves money; it opens even if the animation clock never ticks. The card slides, and a slide that does not run just leaves it in place. */ .tkv-modal-c { width: min(420px, 100%); border-radius: 16px; padding: 22px; background: var(--tkv-card); border: 1px solid var(--tkv-hair-2); color: var(--tkv-ink); animation: tkvRise .22s var(--tkv-ease); } @keyframes tkvRise { from { transform: translateY(8px); } to { transform: none; } } .tkv-modal-c h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -.3px; } .tkv-modal-c p { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--tkv-ink-2); } .tkv-modal-c p b { color: var(--tkv-money); font-weight: 700; } .tkv-modal-f { display: flex; gap: 10px; justify-content: flex-end; } /* ── Narrow screens ───────────────────────────────────────────────── Below 1180px the facts panel folds away — the operator can reopen it from the chat header. Below 860px each surface becomes one pane at a time, which is how a phone reads a conversation anyway. */ @media (max-width: 1080px) { .tkv-msgr { grid-template-columns: 264px minmax(0, 1fr); } .tkv-facts { display: none; } /* Колонка уже на 36px — без поджатия вкладки переносятся на три ряда и съедают седьмую часть очереди. */ .tkv-ftab { padding: 8px 6px 10px; font-size: 11.5px; } .tkv-ftab i { padding: 1px 5px; font-size: 10px; } .tkv-ftab::after { left: 6px; right: 6px; } /* Даже при показе через меню на узком экране панель остаётся отдельной колонкой грида (никакого overlay). */ .tkv-msgr.show-facts { grid-template-columns: 264px minmax(0, 1fr) 260px; } .tkv-msgr.show-facts .tkv-facts { display: block; } } @media (max-width: 860px) { .tkv-split, .tkv-msgr { grid-template-columns: minmax(0, 1fr); } .tkv-split.open-chat .tkv-side, .tkv-msgr.open-chat .tkv-rail { display: none; } .tkv-split:not(.open-chat) .tkv-chat, .tkv-msgr:not(.open-chat) .tkv-chat { display: none; } .tkv-msgr.show-facts { grid-template-columns: minmax(0, 1fr); } .tkv-msgr.show-facts .tkv-chat { display: none; } .tkv-msgr.show-facts .tkv-facts { display: block; border-left: 0; } .tkv-back { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: -6px; border-radius: 9px; flex: none; color: var(--tkv-ink-3); } .tkv-back svg { width: 18px; height: 18px; stroke-width: 1.9; } .tkv-msg { max-width: 86%; } .tkv-msgr .tkv-msg { max-width: 86%; } .tkv-body { padding: 18px 14px; } .tkv-comp { padding: 12px 14px 16px; } .tkv-resolve { padding: 11px 14px; flex-wrap: wrap; } /* Порог, ниже которого подсказка уходит на свою строку. С базисом 0 и min-width: 0 она сжималась до одного пикселя, вытягивалась колонкой в шесть строк, а обе кнопки — им nowrap — оставались на той же строке и ложились прямо поверх текста. */ .tkv-resolve > span { flex: 1 1 auto; min-width: 11rem; } .tkv-chat-h { padding: 13px 14px; } .tkv-side-h, .tkv-side-tabs, .tkv-side-list { padding-left: 16px; padding-right: 16px; } .tkv-row.on::before { left: -16px; } .tkv-side-f { padding: 12px 16px 16px; } } @media (prefers-reduced-motion: reduce) { .tkv-msg, .tkv-sys, .tkv-modal, .tkv-modal-c, .tkv-msg.tkv-in, .tkv-sys.tkv-in { animation: none; opacity: 1; transform: none; } .tkv-dots i { animation: none; opacity: .6; } .tkv-spin { animation: none; } .tkv *, .tkv *::before, .tkv *::after { transition-duration: .01ms !important; } }