/* ─────────────────────────────────────────────────────────────────────
   tamper.market — Support / Ticket System styles.

   Design system: cool-navy blue refresh, matching the partner-admin /
   staff look. Dark mode only. Clean ERP-style panels. Two accent colours:
   azure (brand, user / support) + amber (admin / refund). All
   .tk-* class names are the JS contract — keep them stable.
   ───────────────────────────────────────────────────────────────────── */

/* ── Design tokens ─────────────────────────────────────────────────── */
/* 2026-05: matched 1:1 to the main tamper.market site (profile.html /
   market.html) — black surfaces, translucent-white "blocks" with hairline
   borders, GREEN accent, white primary CTAs, Inter font. The component
   overrides at the very bottom of this file finish the parity (panel
   gradients + white buttons). All .tk-* class names are the JS contract. */
:root, .tk-root, .prof-admin-plate {
  /* radii / shadow scale */
  --tk-radius:        16px;
  --tk-radius-sm:     11px;
  --tk-radius-lg:     18px;
  --tk-shadow-sm:     0 1px 2px rgba(0,0,0,.40);
  --tk-shadow:        0 10px 30px rgba(0,0,0,.50);
  --tk-shadow-lg:     0 24px 60px rgba(0,0,0,.60);

  /* surfaces — project black (#050505) + translucent-white elevation */
  --tk-bg:        #050505;
  --tk-bg-2:      rgba(255,255,255,.035);
  --tk-panel:     #0d0d0d;
  --tk-panel-2:   rgba(255,255,255,.045);
  --tk-panel-3:   rgba(255,255,255,.07);
  --tk-border:    rgba(255,255,255,.06);
  --tk-border-2:  rgba(255,255,255,.12);
  --tk-text:      #ffffff;
  --tk-text-2:    rgba(255,255,255,.55);
  --tk-text-3:    rgba(255,255,255,.30);

  /* primary = green (brand accent: links, active, focus, status-open) */
  --tk-primary:       #22c55e;
  --tk-primary-2:     #16a34a;
  --tk-primary-soft:  rgba(34,197,94,.12);
  --tk-primary-ring:  rgba(34,197,94,.30);

  /* accent = amber (admin identity + refund) */
  --tk-accent:        #fbbf24;
  --tk-accent-2:      #d99e16;
  --tk-accent-soft:   rgba(251,191,36,.14);
  --tk-accent-ring:   rgba(251,191,36,.30);

  /* semantic — project scale */
  --tk-info:          #60a5fa;
  --tk-info-soft:     rgba(96,165,250,.14);
  --tk-warn:          #fbbf24;
  --tk-warn-soft:     rgba(251,191,36,.14);
  --tk-danger:        #ef4444;
  --tk-danger-soft:   rgba(239,68,68,.14);
  --tk-purple:        #a78bfa;
  --tk-purple-soft:   rgba(167,139,250,.14);
  --tk-ok:            #22c55e;
  --tk-ok-soft:       rgba(34,197,94,.14);
}

/* ── Page shell ─────────────────────────────────────────────────────── */
body { background: var(--tk-bg, #050505); }

.tk-root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  color: var(--tk-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
  min-height: 100vh;
  background: var(--tk-bg);
  color-scheme: dark;
}
.tk-root *, .tk-root *::before, .tk-root *::after { box-sizing: border-box; }
.tk-root a { color: var(--tk-primary); text-decoration: none; }
.tk-root a:hover { text-decoration: underline; }
.tk-root code, .tk-root .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.tk-root button { font-family: inherit; }

.tk-wrap {
  max-width: 1480px;
  margin: 0 auto;
  padding: 20px 24px 32px;
}
@media (max-width: 760px) { .tk-wrap { padding: 14px 14px 28px; } }

/* ── Page header (tk-page-h) ───────────────────────────────────────── */
.tk-page-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin: 0 0 16px;
  padding: 0 2px 4px;
  flex-wrap: wrap;
}
.tk-page-h-l { min-width: 0; }
.tk-page-h-t {
  font-size: 20px; font-weight: 700; letter-spacing: -.3px;
  color: var(--tk-text); line-height: 1.2;
}
.tk-page-h-s {
  font-size: 13px; color: var(--tk-text-3); margin-top: 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tk-page-h-r { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Shells (user/admin) ───────────────────────────────────────────── */
.tk-shell {
  display: grid;
  background: transparent;
  gap: 14px;
  /* v24 — switched min-height → height so the shell locks to the
     viewport.  With min-height the chat panel grew with message
     count and the page itself scrolled, which meant
     .tk-chat-body was never an actual overflow container — every
     `_isNearBottom` check returned true and "sticky-bottom" became
     "always-bottom" (the bug).  Locking the shell makes
     .tk-chat-body the real scroller and lets the user read older
     messages while new ones land below. */
  height: calc(100vh - 130px);
  min-height: 480px;
}
.tk-shell--user  { grid-template-columns: 340px 1fr; }
/* Admin is now a clean 2-pane (list | chat). The user dossier is an
   off-canvas slide-in panel, not a 3rd column. */
.tk-shell--admin { grid-template-columns: 320px 1fr; }

@media (max-width: 1180px) {
  .tk-shell--admin { grid-template-columns: 300px 1fr; }
}
@media (max-width: 880px) {
  .tk-shell--user, .tk-shell--admin { grid-template-columns: 1fr; }
  /* Default (no --chat marker) or explicit --list → sidebar visible, main hidden. */
  .tk-shell--user .tk-main, .tk-shell--admin .tk-main { display: none; }
  .tk-shell--user.tk-shell--list .tk-sidebar,
  .tk-shell--admin.tk-shell--list .tk-sidebar { display: flex; }
  /* In chat mode swap them. */
  .tk-shell--user.tk-shell--chat .tk-sidebar,
  .tk-shell--admin.tk-shell--chat .tk-sidebar { display: none; }
  .tk-shell--user.tk-shell--chat .tk-main,
  .tk-shell--admin.tk-shell--chat .tk-main { display: flex; }
}

/* ── Sidebar (ticket list) ─────────────────────────────────────────── */
.tk-sidebar {
  background: var(--tk-panel);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  box-shadow: var(--tk-shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.tk-sidebar-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tk-border);
}
.tk-sidebar-h-t {
  font-size: 14px; font-weight: 700;
  color: var(--tk-text); letter-spacing: -.1px;
}

/* Search */
.tk-search {
  position: relative;
  margin: 12px 14px 8px;
}
.tk-search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--tk-text-3); pointer-events: none;
}
.tk-search input {
  width: 100%;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  padding: 9px 12px 9px 32px;
  font-size: 13px; color: var(--tk-text);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.tk-search input::placeholder { color: var(--tk-text-3); }
.tk-search input:focus {
  border-color: var(--tk-primary);
  box-shadow: 0 0 0 3px var(--tk-primary-soft);
}

/* Filter chips */
.tk-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 14px 10px;
}
.tk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: 999px;
  color: var(--tk-text-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.tk-chip:hover { background: var(--tk-bg-2); color: var(--tk-text); }
.tk-chip.on {
  background: var(--tk-primary-soft);
  border-color: transparent;
  color: var(--tk-primary);
}
.tk-chip-cnt {
  font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--tk-text-3);
  font-variant-numeric: tabular-nums;
}
.tk-chip.on .tk-chip-cnt {
  background: rgba(34,197,94,.20);
  color: var(--tk-primary);
}

/* Ticket list */
.tk-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 12px;
}
.tk-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 10px;
  margin: 2px 0;
  border-radius: var(--tk-radius-sm);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.tk-item:hover { background: var(--tk-bg-2); }
.tk-item.on {
  background: var(--tk-panel-2);
  box-shadow: inset 2px 0 0 var(--tk-primary);
}
.tk-item-ava {
  position: relative;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--tk-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--tk-primary) 0%, var(--tk-primary-2) 100%);
  color: #fff;
  font-weight: 700; font-size: 13px;
  /* overflow MUST stay visible so the online .tk-dot (anchored at the
     bottom-right corner) paints as a FULL ringed circle instead of being
     sliced into a half-moon by the round avatar mask. The <img> child still
     clips itself to the circle via its own `border-radius: inherit`, so the
     container needs no overflow:hidden to keep the photo round. */
  overflow: visible;
}
/* Avatar <img> MUST be absolutely positioned over the monogram, NOT a
   sibling flex item, otherwise the image's intrinsic size (Telegram
   userpic is /userpic/320/<u>.jpg → 320×320) combined with the flex
   default `min-width: auto` keeps the <img>'s used box at 320 px wide
   even with `width: 100%`. The result is that the picture lays out
   alongside the monogram letter and the round mask only clips a sliver
   of it — the rest of the photo prints as a "tail" outside the circle.
   By pulling the <img> out of flow with position:absolute / inset:0,
   the parent's overflow:hidden + border-radius can do its job and the
   monogram stays as the visible fallback until the photo paints over
   it. `border-radius: inherit` is a belt for Safari versions that
   sometimes paint inside a rounded clip-path with a 1 px halo. */
.tk-item-ava img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  border: 0; background: transparent;
  border-radius: inherit;
}
.tk-item-ava .tk-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px;
  background: var(--tk-ok);
  border: 2px solid var(--tk-panel);
  border-radius: 50%;
}
.tk-item-r { flex: 1; min-width: 0; }
.tk-item-tt {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 3px; flex-wrap: wrap;
}
.tk-item-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; color: var(--tk-text-3);
  font-weight: 600; letter-spacing: .02em;
}
.tk-item-subject {
  font-size: 13.5px; font-weight: 600; color: var(--tk-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.tk-item-preview {
  font-size: 12px; color: var(--tk-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.4;
}
.tk-item-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: 5px;
}
.tk-item-time {
  font-size: 11px; color: var(--tk-text-3);
  font-variant-numeric: tabular-nums;
}
.tk-item-unread {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: var(--tk-primary); color: #fff;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tk-item-pin {
  position: absolute; top: 8px; right: 8px;
  width: 12px; height: 12px;
  color: var(--tk-warn); opacity: .8;
}

.tk-list-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px 20px;
  color: var(--tk-text-3);
  font-size: 13px;
}
.tk-list-empty svg {
  width: 28px; height: 28px; margin-bottom: 12px; opacity: .4;
}
.tk-list-empty p { margin: 0; line-height: 1.5; }

/* ── Status pills (drives JS .tk-status-* + .tk-item-status) ───────── */
.tk-item-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
}
.tk-status-open        { background: var(--tk-primary-soft); color: var(--tk-primary); }
.tk-status-in_progress { background: var(--tk-warn-soft);    color: var(--tk-warn); }
.tk-status-waiting     { background: var(--tk-purple-soft);  color: var(--tk-purple); }
.tk-status-closed      { background: var(--tk-bg-2);         color: var(--tk-text-2); }
.tk-status-archived    { background: var(--tk-bg-2);         color: var(--tk-text-3); }

/* ── Generic pill (used in chat header sub-line, etc.) ─────────────── */
.tk-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  color: var(--tk-text-2);
  font-variant-numeric: tabular-nums;
}

/* ── Role tag ──────────────────────────────────────────────────────────
   Used inline in the message meta line (under each chat bubble) as a
   quiet "Саппорт" / "Админ" label — NOT a loud uppercase pill. A 6px
   round dot leads the role; the word itself is normal-weight 11px in
   the role accent colour. */
.tk-role-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}
.tk-role-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.tk-role-badge svg { display: none; }
.tk-role-badge--admin   { color: rgba(255,255,255,.78); }
.tk-role-badge--support { color: var(--tk-primary); }

/* Message-meta username styling — tiny grey text with optional @handle. */
.tk-msg-who { font-size: 11.5px; color: var(--tk-text-2); font-weight: 600; }
.tk-msg-who-at {
  margin-left: 4px;
  color: var(--tk-text-3);
  font-weight: 400;
}

/* ── Main pane / chat ──────────────────────────────────────────────── */
.tk-main {
  background: var(--tk-panel);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  box-shadow: var(--tk-shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  /* Anchor for the floating "↓ N новых" badge (.tk-new-below). */
  position: relative;
}

/* ── Sticky-scroll "new below" badge (v24) ──────────────────────────
   Pops up over the composer when a new message arrives while the
   user is reading older context (i.e. scrolled away from the
   bottom). Click → jump to bottom + hide. Manual scroll-to-bottom
   also hides it. The chip floats on top of the composer chrome via
   absolute positioning anchored to .tk-main. */
.tk-new-below {
  position: absolute;
  right: 14px;
  bottom: 78px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 11px;
  background: linear-gradient(135deg, var(--tk-primary) 0%, var(--tk-primary-2) 100%);
  color: #06140b;
  border: 1px solid rgba(0,0,0,.20);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.05px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.45),
              0 0 0 2px var(--tk-primary-ring);
  /* Slight pop-in animation when the badge first appears so the user
     notices it without it being aggressive. */
  transform: translateY(6px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease, background .15s;
  pointer-events: none;
}
.tk-new-below.on {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.tk-new-below:hover {
  background: linear-gradient(135deg, #34d273 0%, #1bb959 100%);
}
.tk-new-below:focus-visible {
  outline: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.45),
              0 0 0 3px var(--tk-primary-ring),
              0 0 0 5px rgba(34,197,94,.18);
}
.tk-new-below[hidden] { display: none; }
.tk-new-below-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: 13px; line-height: 1;
}
.tk-new-below-cnt { font-weight: 800; }
.tk-new-below-lbl { opacity: .82; font-weight: 600; }
@media (max-width: 600px) {
  .tk-new-below { right: 10px; bottom: 70px; padding: 6px 12px 6px 10px; font-size: 12px; }
}
.tk-main-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: var(--tk-text-3);
  padding: 40px 24px;
}
.tk-main-empty svg { width: 40px; height: 40px; margin-bottom: 12px; opacity: .35; }
.tk-main-empty h3 {
  font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--tk-text-2);
  letter-spacing: -.1px;
}
.tk-main-empty p {
  margin: 0; font-size: 13px; max-width: 360px; line-height: 1.55;
}

.tk-chat-h {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--tk-border);
  background: var(--tk-panel);
  min-height: 66px;
  /* Keep the header on ONE row — the subject + meta pills fit because
     their .tk-chat-h-sub child has its own wrap, and the right-side
     button toolbar can scroll horizontally on tight viewports
     (overflow-x:auto on .tk-chat-h-r) instead of pushing the title
     down a second row. */
  flex-wrap: nowrap;
  min-width: 0;
}
.tk-chat-h-r {
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: nowrap;
}
.tk-chat-h-r::-webkit-scrollbar { height: 4px; }
.tk-chat-h-r::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 2px; }
.tk-chat-back {
  display: none;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--tk-bg-2); border: 0;
  border-radius: var(--tk-radius-sm);
  color: var(--tk-text-2); cursor: pointer;
  transition: background .12s, color .12s;
}
.tk-chat-back svg { width: 14px; height: 14px; }
.tk-chat-back:hover { background: var(--tk-border); color: var(--tk-text); }
@media (max-width: 880px) { .tk-chat-back { display: inline-flex; } }

.tk-chat-h-info { flex: 1; min-width: 0; }
.tk-chat-h-tt {
  font-size: 15.5px; font-weight: 700; color: var(--tk-text);
  letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-chat-h-sub {
  display: flex; align-items: center; gap: 7px;
  margin-top: 7px; flex-wrap: wrap;
}
.tk-chat-h-r {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
/* Mid-width relief: let the action toolbar wrap onto its own line instead of
   hiding controls behind a horizontal scroll on laptop widths. */
@media (max-width: 1040px){
  .tk-chat-h { flex-wrap: wrap; }
  .tk-chat-h-r { overflow: visible; width: 100%; justify-content: flex-end; }
}

.tk-conn-bar {
  display: none;
  padding: 8px 16px;
  font-size: 12px; font-weight: 600;
  background: var(--tk-warn-soft);
  color: var(--tk-warn);
  border-bottom: 1px solid var(--tk-border);
}
.tk-conn-bar.on { display: block; }

/* Order strip (linked purchase, above chat body) */
.tk-link-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px;
  background: var(--tk-bg-2);
  border-bottom: 1px solid var(--tk-border);
}
.tk-link-cover {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--tk-radius-sm);
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tk-text-2); font-weight: 700; font-size: 16px;
}
.tk-link-cover img { width: 100%; height: 100%; object-fit: cover; }
.tk-link-info { flex: 1; min-width: 0; }
.tk-link-name {
  font-size: 13.5px; font-weight: 600; color: var(--tk-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-link-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 5px;
  font-size: 12px; color: var(--tk-text-3);
  font-variant-numeric: tabular-nums;
}
.tk-link-meta b { color: var(--tk-text); font-weight: 700; }
.tk-chrono-warn {
  margin: 0;
  padding: 10px 16px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #fde68a;
  background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(251,191,36,.28);
}
.tk-chrono-warn b { color: #fff; font-weight: 700; }
.tk-link-cta {
  font-size: 12px; font-weight: 600;
  color: var(--tk-primary);
  padding: 6px 12px;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  white-space: nowrap;
}
.tk-link-cta:hover { background: var(--tk-bg-2); text-decoration: none; }

/* Purchased-account games + VAC/EAC panel (under the link-strip).
   Shared by the client SPA (single colored verdict) and the admin SPA
   (.tk-acc--admin adds per-game badges). Mirrors the link-strip surface:
   dark hairline card, muted labels, accent verdict. */
.tk-acc {
  margin: 6px 16px 14px;
  border: 1px solid var(--tk-border);
  border-radius: 14px;
  background: rgba(255,255,255,.022);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 11px;
}
.tk-acc-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-bottom: 11px; margin-bottom: 1px;
  border-bottom: 1px solid var(--tk-border);
}
.tk-acc-title {
  color: var(--tk-text); font-size: 13.5px; font-weight: 700;
  letter-spacing: .01em;
}
.tk-acc-cap {
  margin-left: auto;
  color: var(--tk-text-3); font-size: 11px; font-weight: 500;
}
.tk-acc-line { display: flex; gap: 14px; align-items: baseline; font-size: 13px; line-height: 1.5; }
.tk-acc-l {
  color: var(--tk-text-3); font-weight: 600; flex-shrink: 0; min-width: 148px;
}
.tk-acc-v { color: rgba(255,255,255,.75); word-break: break-word; }
.tk-acc-notice {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.tk-acc-notice--bad {
  background: var(--tk-danger-soft); color: var(--tk-danger);
  border: 1px solid rgba(239,68,68,.40);
}
.tk-acc-notice--ok {
  background: var(--tk-ok-soft); color: var(--tk-ok);
  border: 1px solid rgba(34,197,94,.35);
}
.tk-acc-ico { display: inline-flex; align-items: center; flex-shrink: 0; }
.tk-acc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.tk-acc-badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.tk-acc-badge--bad {
  background: var(--tk-danger-soft); color: var(--tk-danger);
  border: 1px solid rgba(239,68,68,.40);
}
.tk-acc-badge--ok {
  background: var(--tk-ok-soft); color: var(--tk-ok);
  border: 1px solid rgba(34,197,94,.35);
}
/* Amber tier — a short behavioural CS2 cooldown, as opposed to a VAC Live
   conviction (which uses the --bad tier). */
.tk-acc-badge--warn {
  background: rgba(245,158,11,.12); color: #fbbf24;
  border: 1px solid rgba(245,158,11,.38);
}
.tk-acc-notice--warn {
  background: rgba(245,158,11,.10); color: #fcd34d;
  border: 1px solid rgba(245,158,11,.34);
}
/* "Sold while already banned" — the one line a refund decision turns on,
   so it gets a heavier treatment than the neutral rows around it. */
.tk-acc-notice--sold-banned { font-weight: 700; }
.tk-acc-notice--sold-banned b { color: #fff; }

/* Sale-time ban disclosure — a sub-panel INSIDE .tk-acc, separated by a
   ruled top edge because it describes the sale, not the account. Everything
   above it is "текущее состояние аккаунта"; this is "что покупатель увидел
   и на что согласился до оплаты". The two routinely disagree (a temporary
   ban expires on its own) and merging them visually would make an honest,
   disclosed sale look like an undisclosed one. */
.tk-acc-sub {
  margin-top: 7px; padding-top: 14px;
  border-top: 1px dashed var(--tk-border-2);
  display: flex; flex-direction: column; gap: 10px;
}
.tk-acc-sub-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tk-acc-v--mono {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--tk-text-3);
}
@media (max-width: 720px){
  .tk-acc { margin: 6px 12px 12px; padding: 14px; }
  .tk-acc-l { min-width: 0; }
  .tk-acc-line { gap: 10px; }
}

/* ── Chat body ─────────────────────────────────────────────────────── */
.tk-chat-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 22px 24px;
  background: var(--tk-bg);
  display: flex; flex-direction: column; gap: 13px;
}

.tk-day {
  align-self: center;
  font-size: 11px; font-weight: 600;
  color: var(--tk-text-3);
  background: var(--tk-panel);
  border: 1px solid var(--tk-border);
  padding: 3px 10px;
  border-radius: 999px;
  margin: 8px 0 4px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* Message bubble — clean panel style with subtle role tints.
   `gap:12px` guarantees the avatar circle sits at least 12px outside
   the bubble on BOTH sides; `align-items:flex-end` keeps the avatar
   anchored to the bottom of a multi-line bubble (Telegram-style)
   instead of floating mid-air next to the meta line. */
.tk-msg {
  display: flex; gap: 12px; align-items: flex-end;
  max-width: 78%;
  align-self: flex-start;
}
.tk-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.tk-msg-ava {
  position: relative;
  flex-shrink: 0; flex-grow: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  color: var(--tk-text-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  /* overflow stays visible so the presence .tk-dot isn't clipped into a
     half-moon by the round mask; the <img> self-clips via border-radius. */
  overflow: visible;
  /* The avatar is its own column in the flex row — no negative margin,
     no z-index, no inset positioning. Stops the "face overlapping the
     bubble" artefact reported on chat bubbles. */
  margin: 0;
  z-index: auto;
}
.tk-msg-ava img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  border: 0; background: transparent;
  border-radius: inherit;
}
/* Role distinction is a calm 1px inset ring — no loud amber border.
   Admin gets a near-white inset, support gets a soft green inset. The
   outer border keeps the project hairline so the avatar still reads
   as a chip on the panel surface. */
.tk-msg-ava--admin {
  border-color: var(--tk-border);
  color: var(--tk-text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.tk-msg-ava--support {
  border-color: var(--tk-border);
  color: var(--tk-text);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.32);
}
/* When a real Telegram photo has decoded into the avatar, the inset
   role ring paints OVER the image and reads as a slightly off-centre
   inner border — the "кривое кольцо" reported by users. Drop the ring
   the moment an <img> child appears so the photo can occupy the full
   circle cleanly. The monogram branch still keeps its ring (no img
   child → :has() doesn't match). */
.tk-msg-ava--admin:has(img),
.tk-msg-ava--support:has(img) {
  box-shadow: none;
  border-color: var(--tk-border);
}
.tk-msg-ava .tk-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 8px; height: 8px;
  background: var(--tk-ok);
  border: 2px solid var(--tk-panel);
  border-radius: 50%;
}

.tk-msg-body {
  background: var(--tk-panel);
  border: 1px solid var(--tk-border);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--tk-text);
  word-wrap: break-word; overflow-wrap: anywhere;
  box-shadow: var(--tk-shadow-sm);
}
.tk-msg-body code {
  background: var(--tk-bg-2);
  border: 1px solid var(--tk-border-2);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}
.tk-msg-body a { color: var(--tk-primary); }
.tk-msg-body strong { color: var(--tk-text); }
.tk-msg--user .tk-msg-body {
  background: var(--tk-primary-soft);
  border-color: rgba(34,197,94,.30);
  color: var(--tk-text);
}
/* Subtle 1px left tick (not a thick accent bar) — keeps the role hint
   without making admin messages scream amber. */
.tk-msg--admin-role .tk-msg-body {
  border-left: 1px solid rgba(255,255,255,.20);
}
.tk-msg--support-role .tk-msg-body {
  border-left: 1px solid rgba(34,197,94,.28);
}

/* Attachments inside a message */
.tk-msg-atts {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.tk-att {
  width: 96px; height: 96px;
  border-radius: var(--tk-radius-sm);
  overflow: hidden;
  background: var(--tk-bg-2);
  border: 1px solid var(--tk-border);
  cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.tk-att:hover { border-color: var(--tk-primary); transform: translateY(-1px); }
.tk-att img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tk-msg-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--tk-text-3);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  /* Hard-reset letter-spacing so display names like "rent" can't
     inherit any wider tracking from upstream rules (the "r e n t"
     bug). The meta line stays at the OS default tracking. */
  letter-spacing: normal;
  word-spacing: normal;
}
.tk-msg-who { font-weight: 600; color: var(--tk-text-2); letter-spacing: normal; }
.tk-msg-who-at { letter-spacing: normal; }

/* System messages */
.tk-msg--system {
  align-self: center;
  max-width: 92%;
}
.tk-msg--system .tk-msg-body {
  background: var(--tk-bg-2);
  border: 1px dashed var(--tk-border);
  color: var(--tk-text-3);
  font-size: 12px; text-align: center; font-style: italic;
}
.tk-msg--system.refund .tk-msg-body {
  background: var(--tk-accent-soft);
  border-color: var(--tk-accent);
  color: var(--tk-accent);
  font-style: normal; font-weight: 700;
}

/* Typing indicator (3 pulsing dots) */
.tk-typing {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  font-size: 11.5px; color: var(--tk-text-3);
  align-self: flex-start;
  margin-left: 40px;
}
.tk-typing-dots { display: inline-flex; gap: 3px; }
.tk-typing-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--tk-primary);
  animation: tk-typing-pulse 1.2s infinite ease-in-out;
}
.tk-typing-dots span:nth-child(2) { animation-delay: .18s; }
.tk-typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes tk-typing-pulse {
  0%, 80%, 100% { opacity: .3; transform: scale(.85); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* Closed banner */
.tk-closed-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--tk-bg-2);
  border-top: 1px solid var(--tk-border);
  color: var(--tk-text-2);
}
.tk-closed-banner svg { width: 22px; height: 22px; color: var(--tk-text-3); flex-shrink: 0; }
.tk-closed-banner-r { flex: 1; min-width: 0; }
.tk-closed-banner-tt { font-size: 13.5px; font-weight: 700; color: var(--tk-text); }
.tk-closed-banner-d { font-size: 12px; color: var(--tk-text-3); margin-top: 2px; }

/* ── Composer ──────────────────────────────────────────────────────── */
.tk-composer {
  background: var(--tk-panel);
  border-top: 1px solid var(--tk-border);
  padding: 15px 20px 17px;
  transition: background .15s, box-shadow .15s;
}
.tk-composer.dragover {
  background: var(--tk-primary-soft);
  box-shadow: inset 0 0 0 2px var(--tk-primary);
}
.tk-composer-row {
  display: flex; align-items: flex-end; gap: 10px;
}
.tk-composer textarea {
  flex: 1;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  padding: 12px 15px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--tk-text);
  resize: none;
  outline: none;
  min-height: 46px; max-height: 168px;
  font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.tk-composer textarea::placeholder { color: var(--tk-text-3); }
.tk-composer textarea:focus {
  border-color: var(--tk-primary);
  box-shadow: 0 0 0 3px var(--tk-primary-soft);
}
.tk-composer-btns { display: inline-flex; gap: 8px; flex-shrink: 0; }
.tk-icon-btn {
  width: 42px; height: 42px;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  color: var(--tk-text-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .06s;
}
.tk-icon-btn:active { transform: translateY(1px); }
.tk-icon-btn:hover { background: var(--tk-bg-2); color: var(--tk-text); }
.tk-icon-btn svg { width: 16px; height: 16px; }
.tk-icon-btn.tk-send {
  background: linear-gradient(135deg, var(--tk-primary) 0%, var(--tk-primary-2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(34,197,94,.28);
}
.tk-icon-btn.tk-send:hover { filter: brightness(1.08); }
.tk-icon-btn.tk-send:disabled, .tk-icon-btn.tk-send[disabled] {
  opacity: .55; cursor: not-allowed; filter: none;
}

/* Pending attachment previews (composer + modal) */
.tk-att-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.tk-att-row:empty { margin-bottom: 0; }
.tk-att-preview {
  position: relative;
  width: 56px; height: 56px;
  border-radius: var(--tk-radius-sm);
  overflow: hidden;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
}
.tk-att-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-att-preview.tk-att-loading { opacity: .55; }
.tk-att-preview.tk-att-loading::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.18), transparent);
  background-size: 200% 100%;
  animation: tk-shimmer 1.2s linear infinite;
}
.tk-att-x {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px;
  background: rgba(0,0,0,.6);
  border: 0; color: #fff;
  border-radius: 50%;
  font-size: 13px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.tk-att-x:hover { background: var(--tk-danger); }

/* ── Buttons (reusable) ────────────────────────────────────────────── */
.tk-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  padding: 9px 15px;
  font-size: 13px; font-weight: 600;
  color: var(--tk-text);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, transform .08s, box-shadow .12s;
  font-family: inherit;
}
.tk-btn:hover { background: var(--tk-bg-2); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 14px -8px rgba(0,0,0,.7); }
.tk-btn:active { transform: translateY(0); box-shadow: none; }
.tk-btn svg { width: 14px; height: 14px; }
.tk-btn-primary {
  background: linear-gradient(135deg, var(--tk-primary) 0%, var(--tk-primary-2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(34,197,94,.22);
}
.tk-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(34,197,94,.30); }
.tk-btn-amber {
  background: linear-gradient(135deg, var(--tk-accent) 0%, var(--tk-accent-2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(251,191,36,.22);
}
.tk-btn-amber:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(251,191,36,.30); }
.tk-btn-ghost { background: transparent; }
.tk-btn-ghost:hover { background: var(--tk-bg-2); }
.tk-btn:disabled, .tk-btn[disabled] {
  opacity: .55; cursor: not-allowed; filter: none;
}
.tk-btn-sm { padding: 5px 10px; font-size: 12px; }

/* ── Aside (admin: user dossier) — off-canvas slide-in ─────────────── */
.tk-aside {
  position: fixed; top: 0; right: 0;
  height: 100vh; height: 100dvh;
  width: min(384px, 92vw);
  z-index: 70;
  background: var(--tk-panel);
  border: 0;
  border-left: 1px solid var(--tk-border);
  box-shadow: -26px 0 64px -22px rgba(0,0,0,.74);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(103%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.tk-aside.tk-aside--open { transform: translateX(0); }
.tk-aside-overlay {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.tk-aside-overlay.on { opacity: 1; visibility: visible; }
.tk-aside-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tk-border);
  font-size: 11.5px; font-weight: 700;
  color: var(--tk-text-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.tk-aside-x {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--tk-bg-2); border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  color: var(--tk-text-2); font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.tk-aside-x:hover { background: var(--tk-danger-soft); color: var(--tk-danger); border-color: transparent; }
.tk-aside-body { flex: 1; overflow-y: auto; padding: 14px 16px; min-height: 0; }

.tk-card-user {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  margin-bottom: 14px;
}
.tk-card-user-ava {
  position: relative;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tk-primary) 0%, var(--tk-primary-2) 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  overflow: hidden;
}
.tk-card-user-ava img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  border: 0; background: transparent;
  border-radius: inherit;
}
.tk-card-user-r { flex: 1; min-width: 0; }
.tk-card-user-name {
  font-size: 14px; font-weight: 700; color: var(--tk-text);
  letter-spacing: -.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-card-user-id {
  font-size: 11.5px; color: var(--tk-text-3);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.tk-card-user-since {
  font-size: 11px; color: var(--tk-text-3);
  margin-top: 2px;
}

/* Mini stat tiles in aside */
.tk-stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.tk-stat {
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.tk-stat-lbl {
  font-size: 10.5px; font-weight: 600;
  color: var(--tk-text-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.tk-stat-val {
  font-size: 16px; font-weight: 700; color: var(--tk-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.tk-stat-val small { color: var(--tk-text-3); font-size: 11px; font-weight: 500; margin-left: 3px; }

.tk-section-h {
  font-size: 11px; font-weight: 700;
  color: var(--tk-text-3);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 8px 0 8px;
}

.tk-mini-order {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  font-size: 12.5px;
  color: var(--tk-text-2);
  transition: background .12s, border-color .12s;
}
.tk-mini-order:hover { background: var(--tk-bg-2); border-color: var(--tk-border-2); text-decoration: none; }
.tk-mini-order-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--tk-text);
}
.tk-mini-order-amt {
  font-weight: 700; color: var(--tk-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Modal ─────────────────────────────────────────────────────────── */
.tk-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.66);
  display: none;
  align-items: flex-start; justify-content: center;
  z-index: 1000;
  padding: 60px 16px 16px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow-y: auto;
}
.tk-modal.on { display: flex; }
.tk-modal-box {
  background: var(--tk-panel);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow-lg);
  width: 100%; max-width: 600px;
  overflow: hidden;
  animation: tk-pop .18s ease-out;
}
@keyframes tk-pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tk-modal-h {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tk-border);
}
.tk-modal-h > div:first-child { flex: 1; min-width: 0; }
.tk-modal-h-t {
  font-size: 16px; font-weight: 700; color: var(--tk-text);
  letter-spacing: -.1px;
}
.tk-modal-h-s {
  font-size: 12px; color: var(--tk-text-3);
  margin-top: 3px;
}
.tk-modal-x {
  width: 30px; height: 30px;
  background: var(--tk-bg-2);
  border: 0; border-radius: var(--tk-radius-sm);
  color: var(--tk-text-2);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.tk-modal-x:hover { background: var(--tk-danger-soft); color: var(--tk-danger); }
.tk-modal-body { padding: 18px 20px; max-height: 70vh; overflow-y: auto; }
.tk-modal-foot {
  padding: 14px 20px;
  background: var(--tk-panel-2);
  border-top: 1px solid var(--tk-border);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-wrap: wrap;
}
.tk-modal--refund .tk-modal-box { max-width: 460px; }
.tk-modal--refund .tk-modal-h-t { color: var(--tk-accent); }
.tk-refund-sum {
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.tk-refund-sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--tk-text-3);
  margin-bottom: 6px;
}
.tk-refund-sum-row:last-child { margin-bottom: 0; }
.tk-refund-sum-val {
  color: var(--tk-text); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tk-refund-sum-plus { color: var(--tk-ok); }
.tk-refund-sum-total {
  border-top: 1px solid var(--tk-border);
  padding-top: 8px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--tk-text);
}
.tk-pill-ok {
  color: var(--tk-ok);
  border-color: rgba(34,197,94,.30);
  background: var(--tk-ok-soft);
}

/* Form fields inside modals */
.tk-field { margin-bottom: 14px; }
.tk-field:last-child { margin-bottom: 0; }
.tk-field-l {
  display: block;
  font-size: 11px; font-weight: 600;
  color: var(--tk-text-3);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px;
}
.tk-field-input,
.tk-field textarea,
.tk-field input[type="text"],
.tk-field input[type="number"],
.tk-field input:not([type]),
.tk-select-w select,
.tk-field select {
  width: 100%;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  padding: 9px 12px;
  font-size: 13px; color: var(--tk-text);
  outline: none;
  font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.tk-field textarea { resize: vertical; min-height: 80px; }
.tk-field-input:focus,
.tk-field textarea:focus,
.tk-field input:focus,
.tk-select-w select:focus,
.tk-field select:focus {
  border-color: var(--tk-primary);
  box-shadow: 0 0 0 3px var(--tk-primary-soft);
}
.tk-field-hint {
  font-size: 11.5px; color: var(--tk-text-3);
  margin-top: 6px; line-height: 1.45;
}
.tk-select-w { position: relative; }
.tk-select-w::after {
  content: '';
  position: absolute; right: 10px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--tk-text-3);
  border-bottom: 1.5px solid var(--tk-text-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.tk-select-w select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; }

/* Native <select> popup options.
   The closed control uses --tk-panel-2 (rgba(255,255,255,.045)) which is a
   *translucent* white. The OS/browser renders the open option list on its
   own (white) surface, so inheriting that translucent bg + the white
   --tk-text leaves white-on-white, unreadable options (only the OS-
   highlighted row shows). Force an OPAQUE dark bg here so options are
   readable in the native dropdown on every browser/OS. */
.tk-field-input option,
.tk-field select option,
.tk-select-w select option,
select.tk-field-input option {
  background-color: #141414;
  color: var(--tk-text);
}
.tk-field-input optgroup,
.tk-field select optgroup,
.tk-select-w select optgroup {
  background-color: #141414;
  color: var(--tk-text-2);
}

/* Order picker grid (create modal) */
.tk-pick-grid {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scroll-snap-type: x mandatory;
}
.tk-pick {
  flex: 0 0 220px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .12s, background .12s;
}
.tk-pick:hover { border-color: var(--tk-border-2); background: var(--tk-bg-2); }
.tk-pick.on {
  border-color: var(--tk-primary);
  background: var(--tk-primary-soft);
  box-shadow: 0 0 0 1px var(--tk-primary) inset;
}
.tk-pick-cover {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--tk-radius-sm);
  background: var(--tk-bg-2);
  border: 1px solid var(--tk-border);
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tk-text-2); font-weight: 700; font-size: 14px;
}
.tk-pick-cover img { width: 100%; height: 100%; object-fit: cover; }
.tk-pick-info { flex: 1; min-width: 0; }
.tk-pick-name {
  font-size: 12.5px; font-weight: 600; color: var(--tk-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-pick-meta { font-size: 11px; color: var(--tk-text-3); margin-top: 2px; }
.tk-pick-price {
  font-size: 13px; font-weight: 700; color: var(--tk-text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tk-pick-price small { color: var(--tk-text-3); font-size: 11px; font-weight: 500; margin-left: 2px; }

/* Drop zone (create modal attachments) */
.tk-drop {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 22px 16px;
  background: var(--tk-panel-2);
  border: 1.5px dashed var(--tk-border-2);
  border-radius: var(--tk-radius);
  cursor: pointer;
  color: var(--tk-text-2);
  font-size: 13px; text-align: center;
  transition: border-color .12s, background .12s;
}
.tk-drop svg { width: 28px; height: 28px; color: var(--tk-text-3); margin-bottom: 4px; }
.tk-drop:hover, .tk-drop.dragover {
  border-color: var(--tk-primary);
  background: var(--tk-primary-soft);
  color: var(--tk-text);
}
.tk-drop.dragover svg { color: var(--tk-primary); }
.tk-drop b { color: var(--tk-text); font-weight: 700; }

/* ── Auth-required card (shown by support.js renderAuthRequired) ───── */
.tk-auth-card {
  max-width: 480px;
  margin: 8vh auto 0;
  padding: 30px 28px 26px;
  background: var(--tk-panel);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow-lg);
  text-align: center;
}
.tk-auth-icon {
  width: 40px; height: 40px;
  color: var(--tk-primary);
  margin: 0 auto 14px;
  display: block;
}
.tk-auth-t {
  font-size: 17px; font-weight: 700;
  color: var(--tk-text);
  letter-spacing: -.2px;
  margin-bottom: 6px;
}
.tk-auth-s {
  font-size: 13px;
  color: var(--tk-text-2);
  line-height: 1.55;
  margin-bottom: 18px;
}
.tk-auth-cta {
  display: flex; gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Toast ─────────────────────────────────────────────────────────── */
.tk-toast {
  position: fixed; right: 20px; bottom: 20px;
  background: var(--tk-panel);
  border: 1px solid var(--tk-border);
  border-left: 3px solid var(--tk-primary);
  border-radius: var(--tk-radius-sm);
  padding: 11px 16px;
  box-shadow: var(--tk-shadow-lg);
  font-size: 13px; color: var(--tk-text);
  font-weight: 500;
  z-index: 2000;
  max-width: 360px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.tk-toast.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tk-toast.ok  { border-left-color: var(--tk-ok); }
.tk-toast.err { border-left-color: var(--tk-danger); }

/* ── Skeleton / loading ────────────────────────────────────────────── */
.tk-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 60px 20px;
  flex: 1;
}
.tk-spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--tk-border);
  border-top-color: var(--tk-primary);
  border-radius: 50%;
  animation: tk-spin .8s linear infinite;
}
@keyframes tk-spin { to { transform: rotate(360deg); } }
.tk-skel {
  display: inline-block;
  background: linear-gradient(90deg, var(--tk-bg-2) 25%, var(--tk-panel-3) 37%, var(--tk-bg-2) 63%);
  background-size: 400% 100%;
  animation: tk-shimmer 1.2s linear infinite;
  border-radius: 6px;
}
@keyframes tk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Lightbox ──────────────────────────────────────────────────────── */
.tk-lb {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1500; padding: 24px;
}
.tk-lb.on { display: flex; }
.tk-lb img { max-width: min(96vw, 1100px); max-height: 92vh; border-radius: 8px; }
.tk-lb-x {
  position: absolute; top: 16px; right: 20px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.10);
  border: 0; color: #fff;
  border-radius: 50%;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.tk-lb-x:hover { background: rgba(255,255,255,.18); }

/* ── Custom scrollbar (support zone only) ──────────────────────────── */
.tk-root *::-webkit-scrollbar { width: 8px; height: 8px; }
.tk-root *::-webkit-scrollbar-track { background: transparent; }
.tk-root *::-webkit-scrollbar-thumb {
  background: var(--tk-border-2);
  border-radius: 4px;
}
.tk-root *::-webkit-scrollbar-thumb:hover { background: var(--tk-text-3); }
.tk-root * { scrollbar-width: thin; scrollbar-color: var(--tk-border-2) transparent; }

/* ── Mobile tightening ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .tk-page-h-t { font-size: 17px; }
  .tk-chat-h { padding: 10px 12px; }
  .tk-chat-h-tt { font-size: 13.5px; }
  .tk-chat-body { padding: 12px; }
  .tk-msg { max-width: 90%; }
  .tk-msg-body { padding: 8px 11px; font-size: 13px; }
  .tk-shell--user, .tk-shell--admin { gap: 10px; }
  .tk-sidebar { border-radius: var(--tk-radius); }
  .tk-modal-box { border-radius: var(--tk-radius); }
  .tk-att { width: 78px; height: 78px; }
  .tk-link-strip { padding: 10px 12px; gap: 10px; }
  .tk-stat-row { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   ── Premium admin plate (prof-admin-plate) ──
   Reused by templates/profile.html and templates/support/index.html.
   Same /staff visual language: clean panel, soft amber tint, no glow.
   ───────────────────────────────────────────────────────────────────── */
.prof-admin-plate {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  margin: 0 0 16px;
  background: var(--tk-panel);
  border: 1px solid var(--tk-border);
  border-left: 3px solid var(--tk-accent);
  border-radius: var(--tk-radius);
  box-shadow: var(--tk-shadow-sm);
  flex-wrap: wrap;
}
.prof-admin-plate.role-support { border-left-color: var(--tk-primary); }
.prof-admin-plate-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--tk-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tk-accent-soft);
  color: var(--tk-accent);
}
.prof-admin-plate.role-support .prof-admin-plate-icon {
  background: var(--tk-primary-soft);
  color: var(--tk-primary);
}
.prof-admin-plate-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.prof-admin-plate-r { flex: 1; min-width: 0; }
.prof-admin-plate-t {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--tk-text);
  letter-spacing: -.1px;
  flex-wrap: wrap;
}
.prof-admin-plate-role {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  background: var(--tk-accent-soft);
  color: var(--tk-accent);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.prof-admin-plate.role-support .prof-admin-plate-role {
  background: var(--tk-primary-soft);
  color: var(--tk-primary);
}
.prof-admin-plate-s {
  display: flex; align-items: center; gap: 14px;
  margin-top: 4px;
  font-size: 12px; color: var(--tk-text-3);
  flex-wrap: wrap;
}
.prof-admin-plate-s .live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.prof-admin-plate-s .live-dot::before {
  content: ''; width: 7px; height: 7px;
  background: var(--tk-ok); border-radius: 50%;
  box-shadow: 0 0 6px rgba(34,197,94,.6);
}
.prof-admin-plate-s b { color: var(--tk-accent); font-weight: 700; }
.prof-admin-plate.role-support .prof-admin-plate-s b { color: var(--tk-primary); }
.prof-admin-plate-cta {
  display: inline-flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
}
.prof-admin-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: var(--tk-radius-sm);
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  border: 1px solid var(--tk-border);
  background: var(--tk-panel-2);
  color: var(--tk-text);
  transition: background .12s, border-color .12s, transform .04s;
  font-family: inherit;
}
.prof-admin-btn:hover { text-decoration: none; }
.prof-admin-btn:active { transform: translateY(1px); }
.prof-admin-btn svg { width: 14px; height: 14px; }
.prof-admin-btn.primary {
  background: linear-gradient(135deg, var(--tk-accent) 0%, var(--tk-accent-2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(251,191,36,.22);
}
.prof-admin-btn.primary:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(251,191,36,.30); }
.prof-admin-plate.role-support .prof-admin-btn.primary {
  background: linear-gradient(135deg, var(--tk-primary) 0%, var(--tk-primary-2) 100%);
  box-shadow: 0 4px 12px rgba(34,197,94,.22);
}
.prof-admin-plate.role-support .prof-admin-btn.primary:hover { box-shadow: 0 6px 16px rgba(34,197,94,.30); }
.prof-admin-btn.ghost { background: var(--tk-panel-2); }
.prof-admin-btn.ghost:hover { background: var(--tk-bg-2); }

@media (max-width: 700px) {
  .prof-admin-plate { gap: 10px; padding: 12px 14px; }
  .prof-admin-plate-cta { width: 100%; }
  .prof-admin-plate-cta .prof-admin-btn { flex: 1; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
   ── Project parity overlay (appended last → wins the cascade) ──
   Makes the support zone visually identical to the main tamper.market site
   (templates/profile.html, market.html): translucent-white "blocks" with a
   subtle top-down gradient over the black bg, hairline borders, white
   primary CTAs, green accent, Inter. Markup / .tk-* classes unchanged.
   ════════════════════════════════════════════════════════════════════ */

/* The site's signature "block": faint white gradient on black + hairline. */
.tk-sidebar, .tk-main, .tk-aside, .tk-modal-box, .tk-auth-card,
.tk-card-user, .tk-stat, .tk-pick, .tk-mini-order, .tk-refund-sum {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid rgba(255,255,255,.06);
}
.tk-sidebar, .tk-main {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 8px 28px rgba(0,0,0,.40);
}
.tk-aside { box-shadow: -26px 0 64px -22px rgba(0,0,0,.74); }

/* Headers / footers inside a block: transparent over the gradient + hairline. */
.tk-sidebar-h, .tk-aside-h, .tk-modal-h, .tk-modal-foot,
.tk-composer, .tk-link-strip {
  background: transparent;
  border-color: rgba(255,255,255,.05);
}

/* Hover rows take the project's translucent-white wash (lighter than base). */
.tk-item:hover, .tk-chip:hover, .tk-mini-order:hover, .tk-pick:hover,
.tk-btn:hover, .tk-icon-btn:hover {
  background: rgba(255,255,255,.08);
}
.tk-item.on {
  background: rgba(34,197,94,.07);
  box-shadow: inset 2px 0 0 var(--tk-primary);
}

/* Inputs / selects / textareas: translucent field exactly like the site. */
.tk-search input, .tk-composer textarea,
.tk-field-input, .tk-field textarea, .tk-field input,
.tk-select-w select, .tk-field select {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

/* Primary CTA = white pill with dark ink (the site's signature action).
   `currentColor` propagation on the SVG path/line/rect strokes uses the
   button's `color` value, so explicitly painting it #0b1220 keeps the
   send-icon strokes visible on the white pill — otherwise the cascading
   `color:#fff` from the earlier .tk-icon-btn.tk-send rule rendered the
   icon white-on-white. */
.tk-btn-primary, .tk-icon-btn.tk-send {
  background: #fff; color: #0b1220; border-color: transparent;
  box-shadow: 0 4px 14px rgba(255,255,255,.10), inset 0 0 0 1px rgba(0,0,0,.05);
}
.tk-btn-primary:hover, .tk-icon-btn.tk-send:hover {
  filter: brightness(.96);
  box-shadow: 0 8px 20px rgba(255,255,255,.16);
}
.tk-btn-primary svg, .tk-icon-btn.tk-send svg { color: #0b1220; stroke: currentColor; }
.tk-btn-primary svg *, .tk-icon-btn.tk-send svg * { stroke: currentColor; }
/* Composer paperclip + send buttons get an explicit minimum contrast
   so the SVG never disappears on whatever panel tint sits underneath. */
.tk-composer .tk-icon-btn        { color: var(--tk-text); }
.tk-composer .tk-icon-btn svg    { stroke: currentColor; }
.tk-composer .tk-icon-btn svg *  { stroke: currentColor; }
.tk-composer .tk-icon-btn.tk-send,
.tk-composer .tk-icon-btn.tk-send svg,
.tk-composer .tk-icon-btn.tk-send svg * { color: #0b1220; stroke: #0b1220; }

/* Message bubbles: translucent block; the sender's side gets a green wash. */
.tk-msg-body { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.07); }
.tk-msg--user .tk-msg-body { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.28); }

/* ════════════════════════════════════════════════════════════════════
   ── Premium polish — the main site's crafted feel ──
   Subtle green corner washes, focus rings, gradient/glow active chips,
   button micro-interactions, refined headers + empty states. Mirrors the
   profile.html / market.html detailing without touching any markup.
   ════════════════════════════════════════════════════════════════════ */
:root, .tk-root { --tk-ease: cubic-bezier(.16,1,.3,1); --tk-ease-soft: cubic-bezier(.4,0,.2,1); }

/* Panels carry the site's faint green corner wash (layered bg → no stacking
   trouble): a soft radial in the top-right over the white gradient block. */
.tk-sidebar, .tk-main {
  background:
    radial-gradient(130% 55% at 100% -8%, rgba(134,239,172,.055), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
}
.tk-aside {
  background:
    radial-gradient(120% 42% at 100% -6%, rgba(134,239,172,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006));
}

/* Sidebar / chat title gets a glowing green status dot (like the site brand). */
.tk-sidebar-h-t { display: inline-flex; align-items: center; gap: 9px; }
.tk-sidebar-h-t::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--tk-primary); box-shadow: 0 0 10px rgba(34,197,94,.65);
}

/* Search: site-grade hover + green focus ring + icon tint. */
.tk-search input {
  transition: border-color .25s var(--tk-ease-soft), background .25s var(--tk-ease-soft), box-shadow .3s var(--tk-ease-soft);
}
.tk-search input:hover { border-color: rgba(255,255,255,.14); }
.tk-search input:focus {
  border-color: rgba(34,197,94,.5);
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 0 3px var(--tk-primary-soft);
}
.tk-search:focus-within svg { color: var(--tk-primary); }

/* Filter chips: legacy "crafted gradient" block neutralised — the final
   .tk-chip block at the bottom of this file paints the Telegram-style
   underline. Kept here so the cascade is explicit (any future devtools
   override won't accidentally resurrect the green pill + glow). */
.tk-chip { transition: color .15s ease; }
.tk-chip:hover { border-color: transparent; }
.tk-chip:active { transform: none; }
.tk-chip.on {
  background: transparent;
  border-color: transparent;
  color: var(--tk-text);
  box-shadow: none;
}
.tk-chip.on .tk-chip-cnt { background: transparent; color: var(--tk-primary); }

/* Buttons: the site's micro-interactions (lift on hover, press down). */
.tk-btn, .tk-icon-btn {
  transition: background .18s var(--tk-ease-soft), border-color .18s var(--tk-ease-soft), color .18s, transform .12s var(--tk-ease-soft), box-shadow .25s var(--tk-ease), filter .18s;
}
.tk-btn:active, .tk-icon-btn:active { transform: translateY(1px); }
.tk-btn-primary:hover, .tk-icon-btn.tk-send:hover { transform: translateY(-1px); }
.tk-btn-amber {
  background: linear-gradient(135deg, var(--tk-accent), var(--tk-accent-2));
  color: #1a1205; border-color: transparent;
  box-shadow: 0 4px 14px rgba(251,191,36,.24);
}
.tk-btn-amber:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 8px 22px rgba(251,191,36,.32); }

/* List item: lifted avatar, smoother transitions, green-lit active avatar. */
.tk-item { transition: background .16s var(--tk-ease-soft); }
.tk-item-ava { box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.tk-item.on .tk-item-ava { box-shadow: 0 2px 10px rgba(34,197,94,.35); }

/* Empty states: green-tinted icon + crisp title, like the site's blanks. */
.tk-main-empty h3 { color: #fff; }
.tk-list-empty svg, .tk-main-empty svg { color: var(--tk-primary); opacity: .5; }

/* Aside section headers: green label + a fading accent rule (like .fb-sec-h). */
.tk-section-h { color: var(--tk-primary); display: flex; align-items: center; gap: 9px; }
.tk-section-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(34,197,94,.28), transparent); }

/* ════════════════════════════════════════════════════════════════════
   ── Real site header (.hd) — the exact chrome from profile/market/loader ──
   The support zone now wears the same header as the rest of the site. This
   stylesheet loads only on /support*, so the bare .hd/.nv/.lang/.mobile-nav
   class names cannot clash with anything else.
   ════════════════════════════════════════════════════════════════════ */
.hd {
  position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 clamp(14px, 3vw, 48px);
  background: linear-gradient(180deg, rgba(7,9,11,.92) 0%, rgba(4,6,7,.88) 100%);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 6px 24px rgba(0,0,0,.4);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.hd::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(34,197,94,.18) 50%, transparent 100%);
  pointer-events: none;
}
.hd .lo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; transition: transform .2s var(--tk-ease-soft); }
.hd .lo:hover { transform: translateY(-.5px); text-decoration: none; }
.hd .lo-t { font-weight: 800; font-size: 16.5px; color: #fff; white-space: nowrap; letter-spacing: -.3px; }
.hd .lo-t span,
.hd .lo-t .lo-sq {
  color: #60a5fa; -webkit-text-fill-color: #60a5fa;
  text-shadow: 0 0 10px rgba(96,165,250,.55);
}
.hd .nv {
  display: flex; gap: 2px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.04);
  border-radius: 12px; padding: 4px;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.hd .nv a {
  padding: 8px 16px; border-radius: 9px;
  color: var(--tk-text-3); text-decoration: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: .1px; white-space: nowrap;
  transition: color .2s, background .2s;
}
.hd .nv a:hover { color: #fff; background: rgba(255,255,255,.04); text-decoration: none; }
.hd .nv a.act { color: #0b1220; background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.hd .hd-r { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.hd .lang { display: flex; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.04); border-radius: 10px; padding: 3px; }
.hd .lang button { border: 0; padding: 6px 11px; font-size: 11px; font-weight: 700; font-family: inherit; background: transparent; color: var(--tk-text-3); border-radius: 7px; cursor: pointer; letter-spacing: .5px; transition: color .15s, background .15s; }
.hd .lang button.active { color: #0b1220; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.hd .lang button:not(.active):hover { color: #fff; background: rgba(255,255,255,.04); }
.hd .menu-btn { display: none; width: 38px; height: 38px; background: transparent; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; cursor: pointer; position: relative; }
.hd .menu-btn span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: #fff; border-radius: 1px; transition: transform .25s, opacity .2s, top .25s, bottom .25s; }
.hd .menu-btn span:nth-child(1) { top: 12px; }
.hd .menu-btn span:nth-child(2) { top: 50%; margin-top: -1px; }
.hd .menu-btn span:nth-child(3) { bottom: 12px; }
.hd .menu-btn.active span:nth-child(1) { top: 50%; margin-top: -1px; transform: rotate(45deg); }
.hd .menu-btn.active span:nth-child(2) { opacity: 0; }
.hd .menu-btn.active span:nth-child(3) { bottom: 50%; margin-bottom: -1px; transform: rotate(-45deg); }
.mobile-nav {
  position: fixed; inset: 72px 0 0 0;
  background: rgba(5,5,5,.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  z-index: 90; display: none; flex-direction: column; padding: 28px 20px; gap: 6px;
  opacity: 0; transform: translateY(-12px); transition: opacity .25s, transform .25s;
}
.mobile-nav.active { display: flex; opacity: 1; transform: translateY(0); }
.mobile-nav a { padding: 16px; font-size: 17px; font-weight: 600; color: var(--tk-text-2); text-decoration: none; border-radius: 10px; text-align: center; transition: color .15s, background .15s; }
.mobile-nav a:hover, .mobile-nav a.active { color: #fff; background: rgba(255,255,255,.05); text-decoration: none; }
@media (max-width: 768px) {
  .hd .nv { display: none; }
  .hd .menu-btn { display: block; }
}
/* v25 — единый breakpoint 760px для высоты .hd, как на /, /market, /profile,
   /account. Раньше /support схлопывал шапку только на <=560px, и юзеры на
   планшетах/узких ноутбуках видели расхождение: «на маркете шапка короче,
   на тикетах длиннее». Жалоба: "захожу в тикеты шапка стает меньше я про
   главная маркет лоадер тикеты это шапка должна быть одинакого размера".
   Фикс — выровнять breakpoint с основным сайтом (760px), а не с /loader. */
@media (max-width: 760px) {
  .hd { height: 64px; padding: 0 12px; }
  .mobile-nav { inset: 64px 0 0 0; }
  .hd .lo-t { font-size: 15px; }
}

/* Sit the support SPA content below the fixed 72px site header. */
.tk-root { padding-top: 72px; }
.tk-shell { height: calc(100vh - 190px); min-height: 480px; }
@media (max-width: 760px) { .tk-root { padding-top: 64px; } }

/* ════════════════════════════════════════════════════════════════════
   ── Breathing room — more air + larger targets (premium, not dense) ──
   Final layer: opens up the whole inbox so it reads spacious like the
   main site, not "в куче". Appended last → wins.
   ════════════════════════════════════════════════════════════════════ */
.tk-wrap { padding: 26px 30px 40px; max-width: 1560px; }
.tk-shell { gap: 16px; }
.tk-page-h { margin: 4px 2px 20px; }
.tk-page-h-t { font-size: 23px; }

.tk-sidebar-h { padding: 18px 18px; }
.tk-sidebar-h-t { font-size: 15px; }
.tk-search { margin: 14px 16px 10px; }
.tk-search input { padding: 11px 12px 11px 36px; font-size: 13.5px; }
.tk-search svg { left: 13px; }
.tk-filters { gap: 7px; padding: 4px 16px 14px; }
.tk-chip { padding: 7px 13px; font-size: 12px; }
.tk-list { padding: 6px 10px 16px; }
.tk-item { padding: 12px 12px; gap: 12px; margin: 3px 0; }
.tk-item-ava { width: 38px; height: 38px; }
.tk-item-subject { font-size: 14px; }
.tk-item-preview { font-size: 12.5px; }

.tk-chat-h { padding: 16px 22px; min-height: 66px; gap: 14px; }
.tk-chat-h-tt { font-size: 16px; }
.tk-chat-h-sub { margin-top: 7px; gap: 7px; }
.tk-chat-h-r { gap: 10px; }
.tk-chat-body { padding: 24px 26px; gap: 14px; }
.tk-msg { max-width: 72%; gap: 11px; }
.tk-msg-body { padding: 11px 15px; font-size: 14px; line-height: 1.55; border-radius: 14px; }
.tk-composer { padding: 16px 20px 18px; }
.tk-composer textarea { padding: 11px 14px; font-size: 13.5px; }

.tk-aside-body { padding: 18px 18px; }
.tk-card-user { padding: 14px; margin-bottom: 16px; }
.tk-stat { padding: 12px 14px; }

/* Empty states get real presence so an empty inbox looks intentional,
   not unfinished. */
.tk-list-empty { padding: 56px 24px; }
.tk-main-empty { padding: 64px 28px; }
.tk-main-empty svg { width: 48px; height: 48px; margin-bottom: 16px; }
.tk-main-empty h3 { font-size: 17px; }
.tk-main-empty p { font-size: 13.5px; }

/* Refund button: refined outlined-amber so it reads as "caution" without
   shouting yellow over the green/black palette. */
.tk-btn-amber {
  background: rgba(251,191,36,.12);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.34);
  box-shadow: none;
}
.tk-btn-amber:hover {
  background: rgba(251,191,36,.20);
  border-color: rgba(251,191,36,.5);
  color: #fcd34d;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(251,191,36,.18);
}

/* ── Optimistic-send fade ───────────────────────────────────────────
   Sent messages that have not been confirmed by the server yet keep
   a slightly reduced opacity so the user gets a subtle "in-flight"
   cue without a spinner. The class is removed when the POST resolves. */
.tk-msg--pending .tk-msg-body { opacity: .72; }
.tk-msg--pending .tk-msg-meta { opacity: .55; }

/* ── Chat-header sound toggle ───────────────────────────────────────
   Square icon button matching .tk-icon-btn metrics but sized to sit
   next to the existing chat-header controls. The OFF state grays the
   speaker — pure functional cue, no glow. */
.tk-mute-btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--tk-bg-2);
  border: 1px solid var(--tk-border);
  color: var(--tk-text-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.tk-mute-btn:hover {
  background: var(--tk-panel-2);
  border-color: var(--tk-border-2);
  color: var(--tk-text);
}
.tk-mute-btn svg { width: 16px; height: 16px; }
.tk-mute-btn.tk-mute-on {
  color: var(--tk-text-3);
  background: transparent;
  border-color: var(--tk-border);
}

/* ════════════════════════════════════════════════════════════════════
   ── Telegram-flavoured inbox layer (final overlay, wins on cascade) ──
   The list adopts the dense-but-airy two-line conversation layout of
   the Telegram desktop client (round avatar, name+time on top, preview
   +unread on the bottom) while keeping the project's black + green +
   Inter system. The active row uses a full-width soft green tint, not
   a left rail. Hover is a subtle background lift, not a transform.
   ════════════════════════════════════════════════════════════════════ */

/* ── Sidebar header → search bar lives BELOW it as its own row ─────── */
.tk-sidebar-h { padding: 14px 16px 6px; }

/* ── Search: full-width pill, single row of text ───────────────────── */
.tk-search { margin: 8px 14px 8px; }
.tk-search input {
  padding: 10px 12px 10px 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.05);
  font-size: 13px;
}
.tk-search input:focus {
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 0 0 3px rgba(34,197,94,.10);
}

/* ── Filter tabs: clean Telegram-style underline ─────────────────────
   Final source of truth for .tk-chip — overrides the earlier "pill" and
   "crafted-gradient" blocks above. The underline is a 2px pseudo bar
   that hugs the chip's content (label + count), sits ~6px below the
   text baseline, and never paints a border, ring, or shadow. Inactive
   chips keep the same padding so toggling `.on` triggers no layout shift.
   Hard-resets box-shadow / border / border-radius / background to
   neutralise residue from the older `.tk-chip.on` rule (linear-gradient
   + green glow + inset white hairline) that produced the "boxed glowy"
   look the previous iteration left behind. */
.tk-filters {
  display: flex; flex-wrap: wrap;
  gap: 22px;
  padding: 8px 18px 12px;
}
.tk-chip {
  position: relative;
  display: inline-flex; align-items: baseline;
  gap: 6px;
  padding: 7px 2px 11px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--tk-text-3);
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: color .15s ease;
}
.tk-chip:hover {
  background: transparent;
  color: var(--tk-text);
  border-color: transparent;
  box-shadow: none;
}
.tk-chip:active { transform: none; }
.tk-chip.on {
  background: transparent;
  border: 0;
  color: var(--tk-text);
  font-weight: 700;
  box-shadow: none;
}
/* The underline: 2px green bar hugging the chip's content area. left/right
   match the chip's horizontal padding so the bar spans label+count only,
   not the full button hit-box; sits 3px above the chip's bottom edge so
   there is ~6px of breathing room below the text baseline. */
.tk-chip.on::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px;
  bottom: 3px;
  height: 2px;
  background: var(--tk-primary);
  border-radius: 1px;
  box-shadow: none;
}
.tk-chip-cnt {
  background: transparent;
  color: var(--tk-text-3);
  padding: 0 0 0 2px;
  border-radius: 0;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tk-chip.on .tk-chip-cnt { background: transparent; color: var(--tk-primary); }

/* ── Ticket list row: "new reply" cue ─────────────────────────────────
   Three layered signals, all driven by JS adding `tk-item--bump` for a
   single message and `tk-item--unread` while the count is > 0:
     · unread pill pulses once (~600 ms)
     · avatar emits a soft green ring (~900 ms, fades out)
     · subject bolds + preview tints green until the ticket is opened    */
@keyframes tk-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}
@keyframes tk-ava-glow {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.55), 0 2px 8px rgba(0,0,0,.45); }
  60%  { box-shadow: 0 0 0 10px rgba(34,197,94,0),   0 2px 8px rgba(0,0,0,.45); }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0),    0 2px 8px rgba(0,0,0,.45); }
}
.tk-item.tk-item--bump .tk-item-unread {
  animation: tk-pulse 600ms cubic-bezier(.4,.0,.2,1) 1;
  transform-origin: center;
}
.tk-item.tk-item--bump .tk-item-ava {
  animation: tk-ava-glow 900ms ease-out 1;
}
.tk-item.tk-item--unread:not(.on) .tk-item-subject {
  color: #fff;
  font-weight: 800;
}
.tk-item.tk-item--unread:not(.on) .tk-item-preview {
  color: var(--tk-primary);
}

/* ── Ticket list rows: Telegram conversation card ──────────────────── */
.tk-list { padding: 4px 6px 14px; }
.tk-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 1px 0;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background .14s ease;
}
.tk-item:hover { background: rgba(255,255,255,.035); }
.tk-item.on,
.tk-item.on:hover {
  background: rgba(34,197,94,.13);
  box-shadow: none;
}
.tk-item.on .tk-item-subject { color: #fff; }
.tk-item.on .tk-item-preview { color: rgba(255,255,255,.80); }
.tk-item.on .tk-item-time    { color: rgba(255,255,255,.55); }

/* Round avatar with project gradient + presence dot */
.tk-item-ava {
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 15px; font-weight: 700;
  background: linear-gradient(135deg, #16a34a 0%, #0f5132 100%);
  color: #f0fff5;
  border: 0;
  letter-spacing: .02em;
}
.tk-item-ava .tk-dot {
  width: 11px; height: 11px;
  right: 0; bottom: 0;
  border: 2px solid var(--tk-panel);
}

/* Right column laid out as two rows: (subject | time) over (preview | unread) */
.tk-item-r {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  row-gap: 4px; column-gap: 8px;
  min-width: 0;
}
.tk-item-tt {
  grid-row: 1; grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 0;
}
.tk-item-tt::after { content: none; }
/* Subject becomes the prominent name; small monospace code sits right after it */
.tk-item-subject {
  grid-column: 1;
  font-size: 14px; font-weight: 700;
  color: var(--tk-text);
  margin: 0;
  letter-spacing: -.05px;
}
.tk-item-code {
  display: none;  /* room is tight; the code lives in chat-h-sub pill */
}
.tk-item-time {
  grid-row: 1; grid-column: 2;
  font-size: 11.5px; color: var(--tk-text-3);
  white-space: nowrap;
  margin-left: 0;
}
/* Move the status pill out of the top row of the LIST — there it's
   rendered as a tiny .tk-item-dot inline with the preview line. Scope the
   hide to list rows only: the SAME .tk-item-status class is reused in the
   chat-header sub-line (.tk-chat-h-sub) to show the worded ticket status,
   and an unscoped `display:none` was wiping it out of the header too. */
.tk-item .tk-item-status {
  display: none;
}
.tk-item-preview {
  grid-row: 2; grid-column: 1;
  font-size: 12.5px;
  color: var(--tk-text-2);
  min-width: 0;
  margin: 0;
}
.tk-item-meta {
  display: contents;  /* let unread fall into its own grid cell */
}
.tk-item-unread {
  grid-row: 2; grid-column: 2;
  align-self: end;
  background: var(--tk-primary);
  color: #07140c;
  font-weight: 800;
  font-size: 10.5px;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.30);
}
.tk-item-pin {
  top: 10px; right: 10px;
  width: 11px; height: 11px;
}

/* Tiny status dot, slotted before the preview text via JS. Anchored
   to the typographic x-height (rather than vertical-align:middle
   which on inline-block centres to the line strut and sits high in
   the Inter font) so it visually centres on the preview text. */
.tk-item-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin: 0 7px 1px 0;
  vertical-align: middle;
  background: var(--tk-text-3);
  flex-shrink: 0;
  transform: translateY(-0.5px);
}
.tk-item-dot.s-open        { background: var(--tk-primary); }
.tk-item-dot.s-in_progress { background: var(--tk-warn); }
.tk-item-dot.s-waiting     { background: var(--tk-purple); }
.tk-item-dot.s-closed,
.tk-item-dot.s-archived    { background: rgba(255,255,255,.18); }

/* Delivery ticks (one = delivered, two = read) before the time when the
   last message is ours. Drawn as inline SVG, so the overlap that used to
   come from letter-spacing is now an explicit negative margin. */
.tk-item-ticks {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  color: var(--tk-text-3);
  vertical-align: middle;
}
.tk-item-ticks svg { width: 13px; height: 13px; display: block; }
.tk-item-ticks svg + svg { margin-left: -6px; }
.tk-item-ticks.read { color: var(--tk-primary); }

/* Visually hidden, still read aloud. Used where a control would otherwise
   be icon-only (the pin toggle in the chat header). */
.tk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Soft fade-in when a message arrives over WS/poll */
@keyframes tkMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tk-chat-body .tk-msg { animation: tkMsgIn .15s ease both; }
.tk-msg--pending { animation: none; }

/* ── Per-message read receipts (✓ / ✓✓) ──────────────────────────────
   Painted inline at the end of .tk-msg-meta on every outbound (user
   or staff) bubble. Three visual states managed via classes:
     · .is-pending   — request in-flight, both glyphs dim, optimistic
                       bubble also gets .tk-msg--pending applied to its
                       body so the WHOLE message reads lighter until
                       the server acks.
     · .is-delivered — server has the message; first ✓ at full opacity,
                       second ✓ invisible.
     · .is-seen      — other side has read past this id; second ✓ fades
                       in and the pair turns the primary green.
   The two checkmarks are separate <span>s so the upgrade animation is
   a free opacity transition with no layout reflow. translateX nudges
   the second tick into the first one's negative margin so the pair
   looks like ✓✓ rather than ✓ ✓. */
.tk-msg-ticks {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: -1px;
  vertical-align: middle;
  color: rgba(255, 255, 255, .35);
  transition: color .15s ease;
}
.tk-msg-ticks .tk-msg-ticks-1,
.tk-msg-ticks .tk-msg-ticks-2 {
  display: inline-block;
  transition: opacity .15s ease, transform .15s ease;
}
.tk-msg-ticks .tk-msg-ticks-1 svg,
.tk-msg-ticks .tk-msg-ticks-2 svg { width: 13px; height: 13px; display: block; }
.tk-msg-ticks .tk-msg-ticks-2 {
  margin-left: -6px;
  opacity: 0;
  transform: translateX(-2px);
}
.tk-msg-ticks.is-pending {
  color: rgba(255, 255, 255, .28);
}
.tk-msg-ticks.is-pending .tk-msg-ticks-1 { opacity: .6; }
.tk-msg-ticks.is-delivered {
  color: rgba(255, 255, 255, .35);
}
.tk-msg-ticks.is-delivered .tk-msg-ticks-1 { opacity: 1; }
.tk-msg-ticks.is-seen {
  color: var(--tk-primary);
  opacity: .9;
}
.tk-msg-ticks.is-seen .tk-msg-ticks-1,
.tk-msg-ticks.is-seen .tk-msg-ticks-2 {
  opacity: 1;
  transform: translateX(0);
}

/* ── Order-credentials panel (admin-only, under tk-link-strip) ───────
   Compact accordion for the chat header — expanded only on demand so
   it never dominates the conversation. Visual style matches the
   surrounding link-strip: same dark surface, same 1px hairline,
   monospace text for keys/tokens. Open state animates rotation of
   the chevron and reveals the body via max-height. */
.tk-creds {
  margin: -2px 14px 8px;
  border: 1px solid var(--tk-line, #1a1a1a);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  overflow: hidden;
}
.tk-creds-head {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: transparent; border: 0;
  color: var(--tk-text-2, #d9d9d9);
  font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, color .12s ease;
}
.tk-creds-head:hover { background: rgba(255,255,255,.04); color: #fff; }
.tk-creds-chev {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tk-text-3, #909090);
  transition: transform .18s ease;
}
.tk-creds--open .tk-creds-chev { transform: rotate(-180deg); }
.tk-creds-title { color: var(--tk-text, #fff); }
.tk-creds-sub {
  margin-left: auto;
  color: var(--tk-text-3, #909090);
  font-size: 11px; font-weight: 500;
}
.tk-creds-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease;
  padding: 0 12px;
}
.tk-creds--open .tk-creds-body {
  max-height: 800px;
  padding: 6px 12px 12px;
  border-top: 1px solid var(--tk-line, #1a1a1a);
}
.tk-cred-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,.04);
  min-height: 30px;
}
.tk-cred-row:last-child { border-bottom: 0; }
.tk-cred-l {
  color: var(--tk-text-3, #909090);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tk-cred-v {
  color: var(--tk-text, #fff);
  font-size: 12.5px;
  word-break: break-all;
  user-select: text;
}
.tk-cred-mono {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .01em;
}
.tk-cred-empty { color: var(--tk-text-3, #909090); font-style: italic; }
.tk-cred-masked {
  color: var(--tk-text-2, #d9d9d9);
  letter-spacing: 1px;
}
.tk-cred-btns {
  display: inline-flex; gap: 6px;
  flex-shrink: 0;
}
.tk-cred-btn {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 11px; font-weight: 600;
  padding: 4px 9px;
  background: rgba(255,255,255,.04);
  color: var(--tk-text-2, #d9d9d9);
  border: 1px solid var(--tk-line, #1a1a1a);
  border-radius: 7px;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.tk-cred-btn:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.tk-cred-btn.tk-cred-ok {
  background: rgba(34,197,94,.18);
  color: #4ade80;
  border-color: rgba(74,222,128,.4);
}
.tk-cred-btn.tk-cred-err {
  background: rgba(239,68,68,.18);
  color: #fca5a5;
  border-color: rgba(252,165,165,.4);
}
@media (max-width: 720px){
  .tk-cred-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 0;
  }
  .tk-cred-btns { justify-content: flex-start; }
}

/* Empty state: small monochrome glyph + single line, calm and centered */
.tk-main-empty {
  padding: 80px 28px;
  color: var(--tk-text-3);
}
.tk-main-empty svg {
  width: 34px; height: 34px;
  margin-bottom: 14px;
  opacity: .28;
  color: var(--tk-text-2);
}
.tk-main-empty h3 {
  font-size: 14.5px; font-weight: 600;
  color: var(--tk-text-2);
  margin: 0;
}
.tk-main-empty p { display: none; }

.tk-list-empty {
  padding: 60px 22px;
  color: var(--tk-text-3);
  font-size: 12.5px;
}

/* Small green checkbox style for the "Только мои" toggle. The native
   element is hidden behind the label; a 14x14 box paints the state. */
.tk-sidebar input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin: 0;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  position: relative;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tk-sidebar input[type="checkbox"]:hover {
  border-color: rgba(255,255,255,.30);
}
.tk-sidebar input[type="checkbox"]:checked {
  background: var(--tk-primary);
  border-color: var(--tk-primary);
}
.tk-sidebar input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #07140c;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Unified 2-pane shell ──────────────────────────────────────────────
   Used by both the admin SPA (admin-support.js) and the user SPA
   (support.js) so /support renders the same layout for both roles. The
   only delta is which controls appear in the chat header + whether the
   off-canvas dossier (.tk-aside) is mounted. */
.tk-shell--unified {
  grid-template-columns: 320px 1fr;
}
@media (max-width: 1180px) {
  .tk-shell--unified { grid-template-columns: 300px 1fr; }
}
@media (max-width: 880px) {
  .tk-shell--unified { grid-template-columns: 1fr; }
  .tk-shell--unified .tk-main { display: none; }
  .tk-shell--unified.tk-shell--list .tk-sidebar { display: flex; }
  .tk-shell--unified.tk-shell--chat .tk-sidebar { display: none; }
  .tk-shell--unified.tk-shell--chat .tk-main    { display: flex; }
}

/* "Написать тикет" CTA at the very top of the user sidebar. Sits above
   the search input so the primary action is the first thing the user
   sees, matching the brief's "prominent white pill button" requirement. */
.tk-sidebar-cta {
  padding: 14px 14px 6px;
}
.tk-btn-block {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px !important;
  font-size: 13px !important;
  letter-spacing: -.1px;
}
.tk-btn-block svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* ── Inline new-ticket form (lives inside .tk-main) ─────────────────────
   Same surface tokens as the chat view + a scrollable middle band + a
   sticky bottom button row. NOT a modal — the brief is explicit: keep
   it inline so the form feels like part of the inbox. */
.tk-form-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 18px;
  display: flex;
  justify-content: center;
}
.tk-form-card {
  width: 100%;
  max-width: 640px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  box-shadow: var(--tk-shadow-sm);
  padding: 22px 22px 18px;
}
@media (max-width: 760px) {
  .tk-form-scroll { padding: 14px 14px 12px; }
  .tk-form-card   { padding: 16px 14px 14px; }
}
.tk-form-foot {
  border-top: 1px solid var(--tk-border);
  background: var(--tk-panel);
  padding: 12px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Empty state — when the user has 0 tickets the right pane shows a
   centred primary CTA. Override the default .tk-main-empty paddings
   so the button doesn't sit too high. */
.tk-main-empty .tk-btn-primary {
  margin-top: 4px;
}
.tk-main-empty .tk-btn-primary svg {
  width: 14px; height: 14px;
}

/* 2026-05-29: deliberate, calm entrance for the right pane so there's no
   janky/"crooked" half-rendered frame when the empty state or create-form
   mounts. tk-pop = gentle scale .96→1 + opacity 0→1 (no skew, no slide).
   renderMainEmpty() only runs on load / error / form-cancel (NOT on every
   poll tick), so this never re-fires mid-session and can't flicker. The
   inner button keeps its own hover transform — the entrance is on the
   container, the button does not independently animate on insert. */
.tk-main-empty,
.tk-form-scroll {
  animation: tk-pop .2s ease-out both;
}
.tk-main-empty .tk-btn-primary { animation: none; }

/* ── Custom dropdown (.tk-dd) — replaces native <select> ───────────────
   Windows Chrome paints the OS-native menu over a dark page as a giant
   white rectangle (see screenshot). The dropdown below is a fully
   styled overlay rooted on a relatively-positioned wrapper so it
   shows AS-A-MENU on the project's black surface and never bleeds. */
.tk-dd { position: relative; width: 100%; }
.tk-dd-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  color: var(--tk-text);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.tk-dd-btn:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.tk-dd-btn:focus { outline: none; border-color: var(--tk-primary); box-shadow: 0 0 0 3px var(--tk-primary-soft); }
.tk-dd.on .tk-dd-btn { border-color: var(--tk-primary); box-shadow: 0 0 0 3px var(--tk-primary-soft); }
.tk-dd-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-dd-caret {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--tk-text-3);
  border-bottom: 1.5px solid var(--tk-text-3);
  transform: rotate(45deg);
  transition: transform .15s, border-color .15s;
}
.tk-dd.on .tk-dd-caret { transform: rotate(-135deg); border-color: var(--tk-primary); }
.tk-dd-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: #0d0d0d;
  border: 1px solid var(--tk-border-2);
  border-radius: var(--tk-radius-sm);
  box-shadow: var(--tk-shadow-lg);
  padding: 4px;
  max-height: 280px; overflow-y: auto;
  z-index: 50;
  display: none;
}
.tk-dd.on .tk-dd-menu { display: block; }
.tk-dd-item {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px; color: var(--tk-text-2);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.tk-dd-item:hover { background: rgba(255,255,255,.05); color: var(--tk-text); }
.tk-dd-item[aria-selected="true"] {
  background: var(--tk-primary-soft);
  color: var(--tk-primary);
  font-weight: 600;
}

/* ── Order picker — horizontal scroll with right-edge fade hint ───────
   The previous render clipped cards mid-card with no signal that more
   were behind the edge. Wrap the scroller in .tk-pick-wrap so the fade
   can be drawn on the wrap (the inner scroller can't host an overlay
   that doesn't scroll with content). */
.tk-pick-wrap {
  position: relative;
  margin: 0 -6px;
}
.tk-pick-wrap::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 6px;
  width: 36px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--tk-panel) 90%);
  border-top-right-radius: var(--tk-radius);
  border-bottom-right-radius: var(--tk-radius);
}
.tk-pick-wrap--end::after { opacity: 0; }
.tk-pick-grid {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 4px 24px 8px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.tk-pick-grid::-webkit-scrollbar { height: 6px; }
.tk-pick-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
.tk-pick-grid::-webkit-scrollbar-track { background: transparent; }

/* ── Form textarea / inputs — subtle italic placeholder ──────────────── */
.tk-form-card textarea::placeholder,
.tk-form-card input::placeholder {
  color: rgba(255,255,255,.28);
  font-style: italic;
}
.tk-form-card textarea:focus::placeholder,
.tk-form-card input:focus::placeholder {
  color: transparent;
}
.tk-form-card textarea {
  min-height: 130px;
  font-family: inherit;
  line-height: 1.5;
}

/* ── Header (.hd) parity note ─────────────────────────────────────────
   2026-05-29: REMOVED the earlier override that shrank the nav links
   (`padding:7px 14px; font-size:13px`) and collapsed the nav to a burger
   at 1024px. That made /support's top bar visibly SMALLER than /, /market,
   /loader, /profile (which use 8px 16px / 13.5px nav and collapse at
   768px). The base .hd block above already mirrors the main site 1:1, so
   we just let it stand. Only keep .hd-r gap aligned (handled on the base
   rule). User report: "захожу в тикеты — шапка становится меньше". */

/* ── Chat header mini user avatar (admin SPA) ─────────────────────────
   28px round Telegram photo next to the subject so the admin sees
   "who am I writing to" at a glance, no need to skim the TG-id pill. */
.tk-chat-h-ava {
  position: relative;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tk-panel-2) 0%, var(--tk-panel-3) 100%);
  border: 1px solid var(--tk-border);
  color: var(--tk-text-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  overflow: hidden;
  margin-right: 8px;
}
.tk-chat-h-ava img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  border: 0; background: transparent;
  border-radius: inherit;
}

/* Inline subject hint inside the admin sidebar row preview line —
   smaller, dimmed so the preview text stays the focal line. */
.tk-item-subj-inline {
  color: var(--tk-text-3);
  font-weight: 500;
}

/* ── Buyer presence (admin chat header) ───────────────────────────────
   «в сети» (green) when the customer is actively polling their ticket,
   else a muted «был(а) в сети {относительно}». Lives in .tk-chat-h-sub
   next to the @username / TG-id pill. Tasteful: 7px dot, 11.5px text,
   brand green — no emoji, no loud chrome. */
.tk-presence {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  color: var(--tk-text-3);
  white-space: nowrap;
}
.tk-presence:empty { display: none; }
.tk-presence--on { color: var(--tk-primary); }
.tk-presence-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tk-primary);
  box-shadow: 0 0 0 3px var(--tk-primary-soft);
}

/* ════════════════════════════════════════════════════════════════════
   ── Inbox polish v24 (2026-06-28) ──────────────────────────────────
   Three targeted refinements on the admin sidebar, all additive (this
   block is last so it wins the cascade):
     1. "Только мои" becomes a proper label-left / switch-right toggle row
        with a hairline that separates the control zone (search + tabs +
        toggle) from the scrolling list below.
     2. Empty states ("Выберите тикет" / "Нет тикетов") get a guiding
        subtitle so a blank pane reads as intentional, not unfinished.
     3. Minor: unread pill + active row contrast nudges.
   ════════════════════════════════════════════════════════════════════ */

/* (1) "Только мои" toggle row */
.tk-mine {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: 0; padding: 6px 18px 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--tk-text-2);
  cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--tk-border);
  transition: color .15s ease;
}
.tk-mine:hover { color: var(--tk-text); }
.tk-mine-txt { line-height: 1; }
/* iOS-style switch: a transparent native checkbox sits on top of a styled
   track+thumb so the control stays keyboard-focusable and screen-reader
   friendly while looking custom. */
.tk-mine-sw { position: relative; width: 34px; height: 20px; flex-shrink: 0; }
.tk-mine-sw input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.tk-mine-track {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(255,255,255,.14);
  transition: background .2s var(--tk-ease-soft);
  pointer-events: none;
}
.tk-mine-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45);
  transition: transform .2s var(--tk-ease-soft);
}
.tk-mine-sw input:checked + .tk-mine-track { background: var(--tk-primary); }
.tk-mine-sw input:checked + .tk-mine-track::after { transform: translateX(14px); }
.tk-mine-sw input:focus-visible + .tk-mine-track {
  outline: 2px solid var(--tk-primary-ring); outline-offset: 2px;
}
/* breathing room below the new hairline divider */
.tk-list { padding-top: 8px; }

/* (2) Empty-state guiding subtitles */
.tk-main-empty p {
  color: var(--tk-text-3);
  font-size: 13px; line-height: 1.55;
  max-width: 320px; margin: 6px auto 0; text-align: center;
}
.tk-list-empty-sub {
  display: block; margin-top: 4px;
  font-size: 11.5px; color: var(--tk-text-3); opacity: .75;
  line-height: 1.4;
}

/* (3) Minor contrast nudges */
.tk-item-unread { box-shadow: 0 1px 4px rgba(34,197,94,.30); }
.tk-item.on { background: rgba(34,197,94,.15); }

/* ════════════════════════════════════════════════════════════════════
   ── Chat-first ticket view (2026-08-17, -ux5) — MUST STAY LAST ──
   The chat header, body, composer and message bubbles are re-declared in
   several earlier "final" layers above (the "Breathing room" and
   "Telegram inbox" passes). CSS is last-wins at equal specificity, so any
   spacing/design change to those elements HAS to live here, at the very
   end, or it is silently overridden.

   Purpose of this pass: the CONVERSATION is the primary surface. The
   info blocks (header, refund banner, order strip, collapsed panels) are
   slimmed to one-glance chrome, the message list gets a guaranteed
   minimum height, and the bubbles get a comfortable reading measure.
   ════════════════════════════════════════════════════════════════════ */

/* Reclaim dead page chrome. Neither SPA renders a .tk-page-h title on
   /support — above the shell there is only the fixed 72px site header
   (.tk-root padding-top) plus wrap padding. The earlier -190px offset
   was sized for a page header that does not exist and stranded ~70px of
   viewport; trim the wrap air (locked-viewport app page, the bottom
   padding was pure dead space) and give it all to the conversation.
   72 (header) + 18 (top pad) + 16 (bottom pad) + 10 slack = -116px. */
.tk-wrap { padding: 18px 30px 16px; }
.tk-shell { height: calc(100vh - 116px); min-height: 480px; }

/* Everything around the message list is fixed chrome: never let flex
   crush it when space is tight — the CHAT scrolls, chrome does not.
   (The expanded account fold is the one exception, re-enabled below.) */
.tk-chat-h, .tk-conn-bar, .tk-link-strip, .tk-chrono-warn, .tk-creds,
.tk-acc, .tk-composer, .tk-closed-banner { flex-shrink: 0; }

/* ── Header: one slim title bar — identity left, actions right. ── */
.tk-chat-h { padding: 10px 20px; gap: 12px; min-height: 58px; }
.tk-chat-h-ava { width: 38px; height: 38px; font-size: 13px; margin-right: 6px; }
.tk-chat-h-tt { font-size: 16px; letter-spacing: -.2px; }
.tk-chat-h-sub { margin-top: 5px; gap: 7px; }
.tk-chat-h-r { gap: 9px; align-items: center; }
@media (min-width: 1041px) {
  .tk-chat-h-r { padding-left: 14px; border-left: 1px solid var(--tk-border); }
}

/* Controls: compact single size, calm corners. */
.tk-chat-h-r .tk-btn { padding: 7px 13px; border-radius: 10px; font-weight: 600; }
.tk-select-w select { padding: 7px 26px 7px 11px; border-radius: 10px; }
.tk-pin-btn, .tk-mute-btn { width: 36px; height: 36px; border-radius: 10px; }
.tk-mute-btn svg { width: 16px; height: 16px; }
.tk-pill { padding: 3px 10px; font-size: 11px; }

/* Laptop widths: the action toolbar + title + pills do NOT fit on one
   row — the base 1040px breakpoint was too low, so on ~1100-1300px
   viewports the title truncated to nothing and the pills stacked into a
   ~250px tower that buried the chat. Wrap the toolbar onto its own row
   much earlier; two tidy rows (~110px) beat a pill tower. */
@media (max-width: 1300px) {
  .tk-chat-h { flex-wrap: wrap; row-gap: 8px; }
  .tk-chat-h-r {
    overflow: visible; width: 100%; justify-content: flex-end;
    padding-left: 0; border-left: 0;
  }
}

/* ── Order strip: one slim row, still scannable. ── */
.tk-link-strip { padding: 10px 20px; gap: 12px; }
.tk-link-cover { width: 40px; height: 40px; }
.tk-link-name { font-size: 14px; letter-spacing: -.1px; }
.tk-link-meta { margin-top: 3px; gap: 10px; font-size: 12px; }
.tk-link-cta { padding: 7px 12px; border-radius: 10px; }

/* ── Info panels ("Аккаунт: игры и баны" + "Раскрытие бана"): compact
   card — readable rows, but no longer competing with the chat. ── */
.tk-acc {
  margin: 8px 20px 12px; padding: 14px 16px; border-radius: 14px;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
  border: 1px solid var(--tk-border);
  box-shadow: 0 18px 44px -34px rgba(0,0,0,.9);
}
.tk-acc-head { padding-bottom: 10px; }
.tk-acc-title { font-size: 13.5px; }
.tk-acc-cap { font-size: 11px; }
.tk-acc-line { font-size: 12.5px; gap: 14px; line-height: 1.5; }
.tk-acc-l { min-width: 150px; }
.tk-acc-v { color: rgba(255,255,255,.84); }
.tk-acc-notice { padding: 10px 12px; border-radius: 10px; font-size: 12.5px; }
.tk-acc-badge { padding: 4px 11px; font-size: 11px; }
.tk-acc-sub { margin-top: 7px; padding-top: 12px; gap: 10px; }

/* ── THE CHAT IS THE PAGE ─────────────────────────────────────────────
   Guaranteed minimum height for the message list: an emergency floor so
   history can never be squeezed out entirely (flex normally gives the
   chat far more — every pixel the info stack doesn't use). Sized so the
   worst-case fixed stack (banner + strip + creds + collapsed panel)
   still fits a 760px laptop WITH the composer on screen. */
.tk-chat-body {
  padding: 16px 24px;
  gap: 14px;
  min-height: clamp(120px, 16vh, 280px);
}

/* Bubbles: 14px/1.55 body, a capped reading measure (~600px ≈ 70ch so
   long replies don't become wall-to-wall lines), and slightly brighter
   fill + border so bubbles separate cleanly from the #050505 canvas. */
.tk-msg { max-width: min(78%, 600px); gap: 10px; }
.tk-msg-body {
  padding: 10px 14px;
  font-size: 14px; line-height: 1.55;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.11);
}
.tk-msg--user .tk-msg-body {
  background: rgba(34,197,94,.15);
  border-color: rgba(34,197,94,.36);
}
/* Meta line (name · time) was 30%-white — illegible. Lift to readable
   grey while keeping it clearly secondary to the message text. */
.tk-msg-meta { font-size: 11.5px; color: rgba(255,255,255,.50); }
.tk-msg-who { color: rgba(255,255,255,.66); }

/* ── Composer: compact but comfortable (textarea stays 14px). ── */
.tk-composer { padding: 12px 18px 14px; }
.tk-composer-row { gap: 10px; }
.tk-composer textarea {
  padding: 11px 14px; font-size: 14px; min-height: 46px; border-radius: 12px;
}
.tk-composer .tk-icon-btn { width: 44px; height: 44px; border-radius: 12px; }
.tk-composer .tk-icon-btn svg { width: 17px; height: 17px; }

/* ── Collapsible account panel (<details class="tk-acc--fold">) ──────────
   Collapsed by default: header + verdict badges only. ── */
.tk-acc--fold { display: block; }
.tk-acc--fold > summary.tk-acc-head {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
  outline: none;
}
.tk-acc--fold > summary.tk-acc-head::-webkit-details-marker { display: none; }
.tk-acc--fold > summary.tk-acc-head::marker { content: ""; }
.tk-acc-sumrow { display: flex; align-items: center; gap: 10px; }
.tk-acc-sumrow .tk-acc-cap { margin-left: auto; }
.tk-acc-chev {
  width: 8px; height: 8px; flex-shrink: 0; margin-left: 4px;
  border-right: 1.6px solid var(--tk-text-3);
  border-bottom: 1.6px solid var(--tk-text-3);
  transform: rotate(45deg); transition: transform .2s ease;
}
.tk-acc--fold[open] .tk-acc-chev { transform: rotate(225deg); }
.tk-acc--fold:hover .tk-acc-chev { border-color: var(--tk-text-2); }
.tk-acc--fold:not([open]) { padding: 11px 16px; }

/* Guardrail: even expanded, a games-heavy account (rows + VAC-live lines
   + sale disclosure, easily 400-700px) must not re-bury the chat. Cap the
   open panel, let it scroll inside itself, and let flex squeeze it (the
   ONE shrinkable block) before the chat ever gives up its minimum. */
.tk-acc--fold[open] {
  max-height: min(42vh, 380px);
  min-height: 110px;
  overflow-y: auto;
  flex-shrink: 1;
  /* Top padding moves INTO the sticky summary — if it stayed on the
     scroll container, scrolled rows would peek through that padding
     band above the pinned summary. */
  padding: 0 16px 14px;
}
/* Verdict summary stays pinned while the detail rows scroll under it.
   Opaque #161616 = the card's gradient at its top edge (3.8% white over
   the #0d0d0d panel), so the pinned strip is seamless with the card. */
.tk-acc--fold[open] > summary.tk-acc-head {
  position: sticky; top: 0; z-index: 1;
  background: #161616;
  margin: 0 -16px; padding: 14px 16px 10px;
  border-bottom: 1px solid var(--tk-border);
}
/* <details> is display:block → the card's flex gap does not apply to the
   unfolded rows; restore the rhythm with explicit margins. */
.tk-acc--fold[open] > .tk-acc-line { margin-top: 9px; }
.tk-acc--fold[open] > .tk-acc-notice { margin-top: 10px; }
.tk-acc--fold[open] > .tk-acc-sub { margin-top: 12px; }
.tk-acc--fold[open]::-webkit-scrollbar { width: 8px; }
.tk-acc--fold[open]::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12); border-radius: 4px;
}

/* ── Phones: tighten further (media wins over the rules above at equal
   specificity because it comes later in this last layer). ── */
@media (max-width: 640px) {
  .tk-chat-h { padding: 10px 12px; min-height: 54px; gap: 10px; }
  .tk-chat-h-tt { font-size: 15px; }
  .tk-chat-h-ava { width: 34px; height: 34px; }
  .tk-link-strip { padding: 10px 14px; }
  .tk-acc { margin: 8px 12px 10px; padding: 12px 14px; }
  .tk-acc--fold:not([open]) { padding: 10px 14px; }
  .tk-acc--fold[open] { padding: 0 14px 12px; }
  .tk-acc--fold[open] > summary.tk-acc-head {
    margin: 0 -14px; padding: 12px 14px 9px;
  }
  .tk-acc-l { min-width: 0; }
  .tk-chat-body { padding: 14px 12px; gap: 12px; }
  .tk-msg { max-width: 92%; }
  .tk-composer { padding: 10px 12px 12px; }
  .tk-composer textarea { min-height: 44px; }
  .tk-composer .tk-icon-btn { width: 42px; height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ОЧЕРЕДЬ ПО ВРЕМЕНИ ОТВЕТА + ЗАКРЕПЛЁННОЕ ДОСЬЕ  (2026-08-20)

   Две правки поверх прежней панели.

   Первая: список перестал быть лентой по дате. Сверху счётчики нагрузки,
   тикеты разложены по тому, кто кого ждёт, у каждого — сколько висит.
   Оператор больше не выбирает, за что взяться: очередь выбирает за него.

   Вторая: досье клиента на широком мониторе стоит третьей колонкой, а не
   выезжает поверх чата. При разборе возврата факты нужны одновременно с
   перепиской. Ниже 1500px оно остаётся прежней выезжающей панелью —
   разметка и обработчики те же, меняется только раскладка.

   Палитра приведена к монохрому остального сайта: зелёный остался за
   статусами, деньгами и присутствием, из кнопок и рамок он убран.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Акцент вместо зелёного — белый: это и есть монохром маркета.
     Семантические --tk-ok / --tk-warn / --tk-danger не трогаем. */
  --tk-primary:      #ffffff;
  --tk-primary-2:    #ededed;
  --tk-primary-soft: rgba(255,255,255,.10);
  --tk-primary-ring: rgba(255,255,255,.22);
  --tk-sla-warn:     #fbbf24;
  --tk-sla-late:     #f87171;
}

/* Зелёное свечение под выбранной строкой было единственным цветом в
   сайдбаре и перетягивало внимание с бейджей статуса. */
.tk-item.on .tk-item-ava { box-shadow: 0 2px 10px rgba(255,255,255,.16); }
.tk-list-empty svg, .tk-main-empty svg { color: rgba(255,255,255,.34); }
.tk-section-h { color: var(--tk-text); }
.tk-section-h::after { background: linear-gradient(90deg, rgba(255,255,255,.16), transparent); }

/* ── Нагрузка смены ──────────────────────────────────────────────────── */
.tk-load {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--tk-border);
  border-bottom: 1px solid var(--tk-border);
}
.tk-load-c { padding: 10px 12px; background: var(--tk-panel); }
.tk-load-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tk-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-load-v {
  margin-top: 5px; font-size: 19px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tk-load-c.is-late .tk-load-v { color: var(--tk-sla-late); }
.tk-load-c.is-warn .tk-load-v { color: var(--tk-sla-warn); }
.tk-load-s { margin-top: 4px; font-size: 10px; color: var(--tk-text-3); }

/* ── Заголовки групп ─────────────────────────────────────────────────── */
.tk-group {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px 6px;
}
.tk-group:first-child { padding-top: 8px; }
.tk-group-t {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tk-text-3);
}
.tk-group--late .tk-group-t { color: var(--tk-sla-late); }
.tk-group-n {
  margin-left: auto; font-size: 10.5px; font-weight: 600;
  color: var(--tk-text-3); font-variant-numeric: tabular-nums;
}

/* ── Время ожидания на строке ────────────────────────────────────────── */
.tk-item-tt { grid-template-columns: 1fr auto auto; }
.tk-item-wait {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: var(--tk-text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tk-item-wait svg { width: 11px; height: 11px; }
.tk-item-wait.is-warn { color: var(--tk-sla-warn); }
.tk-item-wait.is-late { color: var(--tk-sla-late); }

/* Кромка слева повторяет ту же шкалу: видно, не читая цифр. */
.tk-item.tk-sla-warn::after,
.tk-item.tk-sla-late::after {
  content: ''; position: absolute; left: 2px; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px;
}
.tk-item.tk-sla-warn::after { background: var(--tk-sla-warn); opacity: .55; }
.tk-item.tk-sla-late::after { background: var(--tk-sla-late); opacity: .8; }

/* ── Полоса ожидания над чатом ───────────────────────────────────────── */
.tk-slabar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 22px;
  font-size: 12px; font-weight: 600;
  border-bottom: 1px solid var(--tk-border);
  animation: tk-slabar-in .3s var(--tk-ease-soft, cubic-bezier(.2,0,0,1)) both;
}
.tk-slabar.is-warn { background: rgba(251,191,36,.10); color: var(--tk-sla-warn); }
.tk-slabar.is-late { background: rgba(248,113,113,.11); color: var(--tk-sla-late); }
.tk-slabar-ic { display: inline-flex; }
.tk-slabar-ic svg { width: 14px; height: 14px; }
@keyframes tk-slabar-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Досье третьей колонкой на широком экране ────────────────────────── */
@media (min-width: 1500px) {
  .tk-shell--admin { grid-template-columns: 320px minmax(0, 1fr) 350px; }

  /* Та же панель, но в потоке сетки: снимаем фиксацию и сдвиг, которыми
     она уезжала за правый край. Скролл остаётся внутри .tk-aside-body. */
  .tk-shell--admin .tk-aside {
    position: relative; inset: auto;
    width: auto; height: auto;
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    box-shadow: var(--tk-shadow-sm);
    z-index: 1;
  }
  /* Крестик и затемнение нужны только выезжающему варианту. */
  .tk-shell--admin .tk-aside-x,
  .tk-shell--admin .tk-aside-overlay { display: none; }
  /* Кнопка «Досье» в шапке чата тоже лишняя: панель и так на экране. */
  .tk-shell--admin .tk-chat-h-r .tk-btn-ghost:first-child { display: none; }
}

/* ── Плавность ───────────────────────────────────────────────────────── */
/* Выезд досье: до этого панель появлялась рывком, потому что
   анимировались width и right. Теперь только transform и opacity. */
.tk-aside {
  transition: transform .34s cubic-bezier(.2, 0, 0, 1),
              opacity .22s ease;
  transform: translateX(102%);
  opacity: 0;
}
.tk-aside.tk-aside--open { transform: none; opacity: 1; }
.tk-aside-overlay { transition: opacity .24s ease; }

.tk-item { transition: background .16s cubic-bezier(.2, 0, 0, 1); }
.tk-btn, .tk-icon-btn, .tk-chip {
  transition: background .15s cubic-bezier(.2, 0, 0, 1),
              color .15s cubic-bezier(.2, 0, 0, 1),
              border-color .15s cubic-bezier(.2, 0, 0, 1),
              scale .1s cubic-bezier(.2, 0, 0, 1);
}
.tk-btn:active, .tk-icon-btn:active, .tk-send:active { scale: .96; }

@media (prefers-reduced-motion: reduce) {
  .tk-aside, .tk-slabar, .tk-item, .tk-btn, .tk-icon-btn, .tk-chip {
    transition: none; animation: none;
  }
}

/* Монограмма клиента больше не зелёная плашка: в списке из двадцати строк
   двадцать зелёных кругов забивали и статусы, и непрочитанные. Нейтральный
   круг с приглушённой буквой оставляет цвет только смыслу. */
.tk-item-ava {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.62);
}
.tk-item.on .tk-item-ava { background: rgba(255,255,255,.13); color: rgba(255,255,255,.9); }
.tk-item--unread .tk-item-ava { color: rgba(255,255,255,.9); }

/* Выбранная строка: нейтральная подложка вместо зелёной заливки.
   Левую белую полоску убираем — её место занимает цветная кромка
   ожидания, а две полосы подряд читались как сбой вёрстки. */
.tk-item.on,
.tk-item.on:hover { background: rgba(255,255,255,.08); box-shadow: none; }
.tk-item.on.tk-sla-warn::after,
.tk-item.on.tk-sla-late::after { opacity: 1; }
/* Без ожидания выбранной строке всё же нужна отметка слева. */
.tk-item.on:not(.tk-sla-warn):not(.tk-sla-late)::after {
  content: ''; position: absolute; left: 2px; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px; background: rgba(255,255,255,.5);
}

/* Те же монограммы в досье и в шапке чата — нейтральные. */
.tk-card-user-ava,
.tk-chat-h-ava {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
}

/* Статус «Открыт» возвращаем в зелёный. Он единственный из четырёх
   висел на --tk-primary, а не на семантическом токене, поэтому вместе с
   акцентом обесцветился — и шкала статусов теряла крайнее значение
   (открыт → в работе → ожидание → закрыт). */
.tk-status-open { background: var(--tk-ok-soft); color: var(--tk-ok); }

/* Счётчик непрочитанных: белый кружок с тёмной цифрой. С белым акцентом
   прежнее `color:#fff` давало белое на белом. */
.tk-item-unread { background: #fff; color: #0b0b0d; }

/* Точки «печатает» — нейтральные, чтобы не читались как индикатор
   успеха рядом с зелёными статусами. */
.tk-typing-dots span { background: rgba(255,255,255,.55); }

/* ═══════════════════════════════════════════════════════════════════════
   ДОСЬЕ И ШАПКА ПО МАКЕТУ «ИНСПЕКТОР»  (2026-08-20)
   Панель собиралась годами по кусочкам: заголовки секций были зелёными
   подписями с градиентной чертой, плитки статистики — четырьмя разными
   размерами, шапка чата несла шесть бейджей подряд. Ниже — единая сетка:
   капслок-подпись со значком, плитки 2×2 одной высоты, карточка заказа с
   выдачей и блок действий внизу.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Заголовок секции ────────────────────────────────────────────────── */
.tk-aside-body .tk-section-h {
  display: flex; align-items: center; gap: 7px;
  margin: 18px 0 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tk-text-3);
}
.tk-aside-body .tk-section-h:first-child { margin-top: 4px; }
.tk-aside-body .tk-section-h::after { display: none; }
.tk-section-ic { display: inline-flex; color: var(--tk-text-3); }
.tk-section-ic svg { width: 13px; height: 13px; display: block; }

/* ── Карточка клиента ────────────────────────────────────────────────── */
.tk-card-user {
  display: flex; align-items: center; gap: 11px;
  padding: 12px; margin-bottom: 4px;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
}
.tk-card-user-name { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.tk-card-user-id { margin-top: 2px; font-size: 11px; color: var(--tk-text-3); }
.tk-card-user-since { margin-top: 1px; font-size: 10.5px; color: var(--tk-text-3); }

/* ── Плитки 2×2 ──────────────────────────────────────────────────────── */
.tk-stat-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--tk-border);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  overflow: hidden;
}
.tk-stat {
  padding: 10px 12px; margin: 0;
  background: var(--tk-panel);
  border: 0; border-radius: 0; min-height: 0;
}
.tk-stat-l {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tk-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-stat-v {
  margin-top: 5px; font-size: 15px; font-weight: 700;
  letter-spacing: -.025em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tk-stat-v small { font-size: 10px; font-weight: 500; color: var(--tk-text-3); margin-left: 2px; }

/* ── Карточка спорного заказа ────────────────────────────────────────── */
.tk-ord-card {
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  overflow: hidden;
  background: var(--tk-panel);
}
.tk-ord-top { display: flex; align-items: center; gap: 10px; padding: 10px; }
.tk-ord-cover {
  width: 52px; height: 30px; flex: 0 0 auto;
  border-radius: 5px; display: grid; place-items: center;
  background: rgba(255,255,255,.07);
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.6);
}
.tk-ord-t { flex: 1; min-width: 0; }
.tk-ord-name {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-ord-meta {
  margin-top: 2px; font-size: 10.5px; color: var(--tk-text-3);
  font-variant-numeric: tabular-nums;
}
.tk-ord-link {
  flex: 0 0 auto; padding: 4px 9px; border-radius: 6px;
  background: rgba(255,255,255,.06); font-size: 11px; color: var(--tk-text-2);
}
.tk-ord-link:hover { background: rgba(255,255,255,.11); color: var(--tk-text); }
/* Выдача внутри карточки: строки в край, без второй рамки поверх первой. */
.tk-ord-creds { border-top: 1px solid var(--tk-border); }
.tk-ord-creds > * { border: 0 !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; }

/* ── Последние покупки и другие тикеты ───────────────────────────────── */
.tk-mini-order {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--tk-border); border-radius: var(--tk-radius-sm);
  background: var(--tk-panel);
  transition: background .15s cubic-bezier(.2,0,0,1);
}
.tk-mini-order:hover { background: var(--tk-panel-2); }
.tk-mini-order-name {
  flex: 1; min-width: 0; font-size: 12px; color: var(--tk-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-mini-order-amt {
  flex: 0 0 auto; font-size: 12px; font-weight: 700;
  color: var(--tk-text); font-variant-numeric: tabular-nums;
}

/* ── Действия ────────────────────────────────────────────────────────── */
.tk-aside-acts { display: flex; flex-direction: column; gap: 7px; }
.tk-aside-acts .tk-btn { width: 100%; justify-content: center; height: 34px; }

/* ── Шапка чата ──────────────────────────────────────────────────────── */
/* Тема крупно, всё остальное — одной серой строкой под ней. Раньше код
   тикета, TG, категория и статус шли четырьмя бейджами в ряд и весили
   столько же, сколько сама тема. */
.tk-chat-h { padding: 13px 20px; min-height: 60px; gap: 12px; }
.tk-chat-h-tt { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.tk-chat-h-sub {
  margin-top: 3px; gap: 0; align-items: center;
  font-size: 11.5px; color: var(--tk-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-chat-h-sub > * { margin-right: 7px; }
.tk-chat-h-sub .tk-pill {
  background: none; border: 0; padding: 0; height: auto;
  font-size: 11.5px; color: var(--tk-text-3);
}
.tk-chat-h-sub .tk-pill + .tk-pill::before {
  content: '·'; margin-right: 7px; opacity: .5;
}
.tk-chat-h-r .tk-btn { height: 30px; padding: 0 11px; font-size: 12px; }

/* Мета-строка шапки — ровно одна строка. Перенос делал из подзаголовка
   абзац на три ряда и утапливал саму тему тикета. */
.tk-chat-h-sub { flex-wrap: nowrap; display: flex; }
.tk-chat-h-sub .tk-presence { flex: 0 0 auto; }
.tk-chat-h-sub .tk-item-status { flex: 0 0 auto; }

@media (min-width: 1500px) {
  /* Заказ и выдача переехали в досье, которое на этой ширине всегда на
     экране, — полоса над перепиской стала вторым таким же блоком. */
  .tk-shell--admin .tk-link-strip { display: none; }
}

/* ── Пузыри: свои светлые, чужие тёмные ──────────────────────────────
   Зелёная заливка своих сообщений красила половину переписки в цвет,
   который в остальной панели означает «всё в порядке». Инверсия по
   светлоте разводит стороны надёжнее и не занимает семантический цвет:
   свои — светлая плашка с тёмным текстом, ответ саппорта — тёмная. */
.tk-msg--user .tk-msg-body {
  background: #f1f1f2;
  border-color: transparent;
  color: #0d0d0f;
}
.tk-msg--user .tk-msg-body a { color: #0d0d0f; text-decoration: underline; }
.tk-msg--user .tk-msg-body strong { color: #000; }
.tk-msg--user .tk-msg-body code {
  background: rgba(0,0,0,.08); color: #0d0d0f;
}
.tk-msg--support-role .tk-msg-body { border-left: 1px solid rgba(255,255,255,.20); }

/* Плашка проверки аккаунта: зелёной остаётся сама формулировка «банов
   нет», а не вся полоса во всю ширину переписки. */
.tk-acc-badge { font-weight: 600; }

/* Итог проверки — бейдж по содержимому, а не зелёная полоса во всю
   ширину переписки: сообщение «банов нет» весит меньше, чем сам чат. */
.tk-acc-badges { justify-content: flex-start; }
.tk-acc-badge { flex: 0 0 auto; align-self: flex-start; width: auto; }

/* «Банов нет» — хорошая новость, но не заголовок экрана: полоса во всю
   ширину переписки весила больше, чем сам ответ саппорта. Сжимаем до
   строки по содержимому и убираем заливку, оставив значок и текст. */
.tk-acc-notice--ok {
  display: inline-flex; width: auto;
  background: none; border-color: transparent;
  padding: 2px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЕДИНАЯ ГРАФИКА ЗНАЧКОВ  (2026-08-20)
   На одном экране насчиталось шестнадцать значков в четырёх толщинах
   обводки (2 / 2.2 / 2.4 / 1.8), шести размерах и с рублеными концами у
   половины. Отсюда ощущение сборной солянки: рисунок у иконок разный не
   по смыслу, а по случайности. Ниже — один стандарт на всю панель;
   разметку не трогаем, CSS перебивает атрибуты SVG.
   ═══════════════════════════════════════════════════════════════════════ */
.tk-root svg,
.tk-modal svg,
.tk-toast svg {
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Заливные значки (галочки прочтения, звезда закрепления) обводку не
   используют — им ширина линии только портит форму. */
.tk-item-ticks svg,
.tk-pin-btn svg[fill="currentColor"] { stroke-width: 0; }

/* Три размера вместо шести: 16 — кнопки и поля, 14 — строки и подписи,
   12 — счётчики внутри мелких плашек. */
.tk-btn svg, .tk-icon-btn svg, .tk-search svg { width: 16px; height: 16px; }
.tk-item-wait svg, .tk-section-ic svg, .tk-slabar-ic svg,
.tk-cred-row svg, .tk-acc-line svg { width: 14px; height: 14px; }
.tk-item-ticks svg { width: 13px; height: 13px; }

/* ═══════════════════════════════════════════════════════════════════════
   ТУЛБАР, ШАБЛОНЫ И ОБОЛОЧКА  (2026-08-20)
   ═══════════════════════════════════════════════════════════════════════ */

/* Скругления были 16–18px — из-за них панели читались пузатыми, как
   виджеты, а не как рабочий инструмент. Убавляем до 12/8 и снимаем вес
   с теней: глубина держится на границах, а не на чёрных ореолах. */
:root {
  --tk-radius:    12px;
  --tk-radius-sm:  8px;
  --tk-radius-lg: 14px;
  --tk-shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --tk-shadow:    0 8px 24px -12px rgba(0,0,0,.55);
  --tk-shadow-lg: 0 18px 48px -20px rgba(0,0,0,.65);
}
.tk-sidebar, .tk-main, .tk-aside { background: var(--tk-panel); }
.tk-aside { box-shadow: -18px 0 46px -24px rgba(0,0,0,.7); }

/* ── Меню «ещё» ──────────────────────────────────────────────────────── */
.tk-more { position: relative; display: inline-flex; }
.tk-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 80;
  min-width: 208px; padding: 5px;
  background: var(--tk-panel-2);
  border: 1px solid var(--tk-border-2);
  border-radius: var(--tk-radius-sm);
  box-shadow: var(--tk-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s cubic-bezier(.2,0,0,1), visibility .14s;
}
.tk-more.on .tk-more-menu { opacity: 1; visibility: visible; transform: none; }
.tk-more-i {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 6px;
  background: none; border: 0; cursor: pointer;
  font-size: 12.5px; color: var(--tk-text-2);
  transition: background .13s ease, color .13s ease;
}
.tk-more-i:hover { background: rgba(255,255,255,.07); color: var(--tk-text); }

/* Кнопки шапки — одна высота и один ритм. «Взять» единственная белая:
   в шапке всегда ровно одно главное действие. */
.tk-chat-h-r { align-items: center; gap: 8px; }
.tk-chat-h-r .tk-btn { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 7px; }
.tk-chat-h-r .tk-icon-btn { width: 30px; height: 30px; border-radius: 7px; }
.tk-select-w select { height: 30px; border-radius: 7px; }

/* ── Шаблоны ответов ─────────────────────────────────────────────────── */
.tk-tpl-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 0 9px;
}
.tk-tpl {
  height: 26px; padding: 0 11px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 0; cursor: pointer;
  font-size: 11.5px; color: var(--tk-text-2);
  transition: background .14s ease, color .14s ease, scale .1s ease;
}
.tk-tpl:hover { background: rgba(255,255,255,.10); color: var(--tk-text); }
.tk-tpl:active { scale: .96; }

/* Досье на широком экране показано всегда — кнопка в шапке лишняя. */
@media (min-width: 1500px) { .tk-shell--admin .tk-dossier-btn { display: none; } }

/* ════════════════════════════════════════════════════════════════════
   Phone ~390px (2026-08-21) — MUST STAY LAST
   Keep the current support look. Fix overflow, safe-area, 44px taps,
   iOS input zoom, and a shell that shrinks with the software keyboard.
   --tk-vvh is set by support-nav.js from visualViewport when present.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --tk-hd: 72px;
  --tk-vvh: 100dvh;
}
@media (max-width: 760px) {
  :root { --tk-hd: calc(64px + env(safe-area-inset-top, 0px)); }
  .hd {
    height: var(--tk-hd);
    padding-top: env(safe-area-inset-top, 0px);
    padding-inline: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    min-width: 0;
  }
  .mobile-nav {
    inset: var(--tk-hd) 0 0 0;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  }
  .tk-root { padding-top: var(--tk-hd); }
}

@media (max-height: 700px) {
  .tk-shell { min-height: 0; }
}

@media (max-width: 640px) {
  html, body {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100%;
    height: 100dvh;
    overscroll-behavior: none;
  }
  .tk-root {
    min-height: 0;
    height: var(--tk-vvh);
    overflow: hidden;
    padding-top: var(--tk-hd);
  }
  /* Last-wins wrap was 30px sides — too wide for 390px, and it also
     beat the earlier 760px padding query. */
  .tk-wrap {
    padding-top: 8px;
    padding-inline: max(8px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    padding-bottom: 8px;
    max-width: 100%;
  }
  .tk-shell,
  .tk-shell--user,
  .tk-shell--admin,
  .tk-shell--unified {
    min-height: 0;
    min-width: 0;
    gap: 0;
    height: calc(var(--tk-vvh) - var(--tk-hd) - 16px);
  }
  .tk-sidebar, .tk-main { border-radius: 10px; min-width: 0; }

  /* Header: 44px menu/lang, stop the pod from shoving chrome off-screen. */
  .hd { gap: 8px; }
  .hd .hd-r { gap: 6px; min-width: 0; }
  .hd .menu-btn { display: block; width: 44px; height: 44px; flex-shrink: 0; }
  .hd .menu-btn span { left: 12px; right: 12px; }
  .hd .lang button {
    min-width: 44px; min-height: 44px;
    padding: 0 10px;
  }
  .hd [data-tm-userpod] { min-width: 0; max-width: min(42vw, 168px); }
  .mobile-nav a { min-height: 44px; }

  /* Ticket list: keep rows tappable, never overflow the 390px column. */
  .tk-item-tt { grid-template-columns: minmax(0, 1fr) auto auto; }
  .tk-item-subject, .tk-item-preview { min-width: 0; }
  .tk-chip { min-height: 36px; padding: 8px 12px; }
  .tk-search input { font-size: 16px; min-height: 44px; }
  .tk-btn-block { min-height: 44px; }
  .tk-load-c { padding: 8px 6px; }
  .tk-mine { min-height: 44px; }
  .prof-admin-btn { min-height: 44px; }

  /* Chat header: back/send/nav at ~44px. Operator 30px toolbar was
     last-wins and unusable with a thumb. */
  .tk-chat-h {
    padding: 8px 10px;
    min-height: 52px;
    gap: 8px;
    row-gap: 8px;
  }
  .tk-chat-back {
    width: 44px; height: 44px; flex-shrink: 0;
  }
  .tk-chat-back svg { width: 18px; height: 18px; }
  .tk-chat-h-r {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
  }
  .tk-chat-h-r .tk-btn {
    min-height: 44px; height: 44px;
    padding: 0 12px; font-size: 13px;
  }
  .tk-chat-h-r .tk-icon-btn,
  .tk-pin-btn, .tk-mute-btn {
    width: 44px; height: 44px;
  }
  .tk-select-w select { min-height: 44px; height: 44px; font-size: 16px; }
  .tk-more-i { min-height: 44px; padding: 12px 10px; }

  .tk-chat-body { padding: 12px 10px; }
  .tk-msg { max-width: 92%; }
  .tk-link-strip { padding: 10px; gap: 10px; }
  .tk-slabar { padding: 8px 10px; }
  .tk-form-scroll { padding: 12px 10px; }
  .tk-form-foot {
    padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
    justify-content: stretch;
  }
  .tk-form-foot .tk-btn { min-height: 44px; flex: 1; justify-content: center; }

  /* Composer sits above home indicator + keyboard (shell uses --tk-vvh). */
  .tk-composer {
    padding: 8px 10px max(10px, env(safe-area-inset-bottom, 0px));
  }
  .tk-composer-row { gap: 8px; }
  .tk-composer textarea {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
  }
  .tk-composer .tk-icon-btn {
    width: 44px; height: 44px; flex-shrink: 0;
  }
  .tk-tpl { min-height: 36px; height: auto; padding: 8px 12px; }
  .tk-att-x { width: 28px; height: 28px; }

  .tk-aside {
    width: min(384px, 100vw);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tk-aside-x { width: 44px; height: 44px; }
  .tk-aside-acts .tk-btn { min-height: 44px; height: 44px; }
  .tk-modal { padding: max(24px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); }
  .tk-modal-x { width: 44px; height: 44px; }
  .tk-modal-foot .tk-btn { min-height: 44px; }
  .tk-field-input, .tk-field textarea, .tk-field input, .tk-dd-btn {
    font-size: 16px; min-height: 44px;
  }
  .tk-dd-item { min-height: 44px; padding: 12px; }

  .tk-btn, .tk-icon-btn, .tk-chip, .tk-chat-back, .menu-btn,
  .tk-composer .tk-icon-btn, .mobile-nav a {
    touch-action: manipulation;
  }
}

@media (hover: none) {
  .tk-btn:hover, .tk-icon-btn:hover, .tk-icon-btn.tk-send:hover,
  .tk-item:hover, .tk-chip:hover, .tk-more-i:hover {
    transform: none;
  }
}