/* NLauncher — «Поддержка» в кабинете: /cabinet/support и /en/support (список обращений, переписка, новое обращение).
 * Только токены каркаса cab.v4.css (--bg, --panel…, --ac…, --ok/--warn/--err) и их переопределения в site2.v12.css для
 * кабинета — светлая и тёмная темы без своих цветов. Шрифты Onest и JetBrains Mono — из cab.v4.css.
 * Раскладка: широкая колонка (≥ 880 px, решает cab-support.v1.js по ширине main) — список слева, переписка справа,
 * обе панели по высоте окна; узкая — один экран (список / переписка / форма), переписка тоже по высоте окна.
 * Файл версионирован (фронт-прокси кэширует /assets/*): правки — только новым файлом cab-support.v2.css. */

.tk { min-width: 0; }
.tk [hidden] { display: none !important; }
.tk button { font-family: var(--f); }

/* ---------- заметки над содержимым ---------- */
.tk-notes { display: flex; flex-direction: column; gap: 10px; }
.tk-notes:empty { display: none; }
.tk-notes .nc-note { align-items: center; }
.tk-notes .nc-note > svg { flex: none; }
.tk-notes .nc-note .grow { flex: 1 1 auto; min-width: 0; }
.tk-notes .nc-note a, .tk-lnk { color: inherit !important; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* ---------- раскладка ---------- */
.tk-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.tk[data-layout="split"] .tk-split { grid-template-columns: 340px minmax(0, 1fr); }
/* narrow + split shell (the player has tickets): the list and the detail are separate screens. The solo shell (no tickets yet)
   has only the detail pane — the empty state or the first-ticket form — and it always shows. */
.tk[data-layout="single"][data-view="list"] .tk-split > .tk-pdet,
.tk[data-layout="single"]:not([data-view="list"]) .tk-split > .tk-plist { display: none; }
.tk[data-layout="single"][data-view="thread"] > .nc-head { display: none; }
.tk:is([data-view="thread"], [data-view="new"]) > .nc-head p { display: none; }
.tk[data-view="new"] > .nc-head .acts { display: none; }
.tk-card { position: relative; min-width: 0; border-radius: var(--r); background: var(--panel); border: 1px solid var(--bd); overflow: hidden; }

/* ---------- список ---------- */
.tk-plist { display: flex; flex-direction: column; }
.tk[data-layout="split"] .tk-plist { height: var(--tk-h, 620px); }
.tk-lhead { flex: none; padding: 10px; border-bottom: 1px solid var(--bd); }
.tk-lhead .nc-tabs { display: flex; width: 100%; }
.tk-lhead .nc-tabs button { flex: 1 1 auto; justify-content: center; padding: 8px 10px; }
.tk-lbody { flex: 1 1 auto; min-height: 0; }
.tk[data-layout="split"] .tk-lbody { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tk-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center;
  padding: 14px 16px; border-top: 1px solid var(--bd); color: var(--ink) !important; text-decoration: none; cursor: pointer; }
.tk-row:first-child { border-top: 0; }
.tk-row:hover { background: var(--panel3); }
.tk-row.on { background: var(--ac-soft); }
.tk-row.on::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ac); }
.tk-row .st { grid-row: 1 / span 3; align-self: start; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel2); color: var(--ink2); }
.tk-row .st.s-OPEN { background: var(--ac-soft); color: var(--ac); }
.tk-row .st.s-IN_PROGRESS { background: var(--warn-soft); color: var(--warn-tx); }
.tk-row .st.s-RESOLVED { background: var(--ok-soft); color: var(--ok-tx); }
.tk-row.on .st { background: var(--panel); }
/* the subject may take two lines (no early ellipsis in the narrow list pane); time top-right, pills on their own line */
.tk-row .sj { grid-column: 2; grid-row: 1; align-self: start; min-width: 0; font-weight: 800; font-size: 14.5px; letter-spacing: -.02em; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tk-row.unread .sj { font-weight: 900; }
.tk-row .tm { grid-column: 3; grid-row: 1; align-self: start; padding-top: 2px; font: 600 11.5px var(--fm); color: var(--mut); white-space: nowrap; justify-self: end; }
.tk-row .meta { grid-column: 2 / 4; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; min-width: 0; }
.tk-row .pv { grid-column: 2; grid-row: 3; min-width: 0; font-size: 13px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row .pv b { font-weight: 700; color: var(--mut); }
.tk-row.unread .pv { color: var(--ink); }
.tk-row .ur { grid-column: 3; grid-row: 3; justify-self: end; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--pink); color: #fff; font: 700 11px var(--fm); display: inline-grid; place-items: center; }
.tk-no { font: 700 11.5px var(--fm); color: var(--mut); letter-spacing: 0; white-space: nowrap; }
.tk .nc-pill.xs { padding: 2px 8px; font-size: 11.5px; gap: 5px; }
.tk .nc-pill .dt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tk-more { padding: 12px 16px 16px; display: flex; justify-content: center; border-top: 1px solid var(--bd); }
.tk-lempty { padding: 34px 20px; text-align: center; color: var(--mut); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tk-lempty .ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--panel2); color: var(--ink2); }
.tk-sk { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--bd); }
.tk-sk:first-child { border-top: 0; }
.tk-sk .a { width: 40px; height: 40px; border-radius: 12px; }
.tk-sk .l { height: 12px; border-radius: 6px; margin: 4px 0 8px; }

/* ---------- правая панель: переписка / форма / выбор ---------- */
.tk-pdet { display: flex; flex-direction: column; }
.tk-pdet.fix { height: var(--tk-h, 620px); }
.tk-pick { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 28px; text-align: center; color: var(--ink2); }
.tk-pick .ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--ac-soft); color: var(--ac); }
.tk-pick h3 { margin: 4px 0 0; font-size: 19px; font-weight: 900; letter-spacing: -.03em; color: var(--ink); }
.tk-pick p { margin: 0; max-width: 380px; font-size: 14px; line-height: 1.55; }
.tk-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 560px; margin-top: 14px; text-align: left; }
.tk-tip { padding: 12px 13px; border-radius: 14px; background: var(--panel3); border: 1px solid var(--bd); font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.tk-tip b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.tk-tip code, .tk-form code { font: 600 11.5px var(--fm); color: var(--ink); background: var(--panel2); padding: 1px 5px; border-radius: 6px; }

.tk-th { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tk-foot { position: relative; flex: none; }
.tk-cwrap { padding: 12px 14px 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bd); }
.tk-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.tk-pick .ic.err { background: var(--err-soft); color: var(--err-tx); }
.tk-boot { min-height: 160px; }

/* шапка переписки */
.tk-th-h { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bd); }
.tk-back { flex: none; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--bd2); background: var(--panel); color: var(--ink2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tk-back:hover { border-color: var(--ac); color: var(--ac); }
.tk[data-layout="split"] .tk-th-h .tk-back { display: none; }
.tk-th-h .tt { flex: 1 1 auto; min-width: 0; outline: none; }
.tk-th-h h2 { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: -.03em; line-height: 1.28; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-th-h .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 7px; font-size: 12.5px; color: var(--mut); }
.tk-th-h .meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--bd3); }
.tk-th-h .acts { flex: none; display: flex; gap: 8px; }
.tk-selw { position: relative; display: inline-flex; align-items: center; }
.tk-selw > svg { position: absolute; right: 9px; pointer-events: none; color: var(--mut); }
.tk-psel { appearance: none; -webkit-appearance: none; height: 26px; padding: 0 26px 0 10px; border-radius: 99px; border: 1px solid var(--bd2); background: var(--panel);
  color: var(--ink); font: 800 12px var(--f); cursor: pointer; }
.tk-psel:focus { outline: none; border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-soft); }
.tk-psel:disabled { opacity: .6; cursor: default; }
/* the priority in the thread header: a pill-select coloured like the priority pills of the list (flag left, chevron right) */
.tk-pselw { color: var(--ink2); }
.tk-pselw > svg:first-child { left: 9px; right: auto; color: currentColor; }
.tk-pselw > svg:last-child { color: currentColor; opacity: .75; }
.tk-pselw .tk-psel { padding-left: 25px; color: inherit; background: var(--panel2); border-color: transparent; }
.tk-pselw.p-URGENT { color: var(--err-tx); } .tk-pselw.p-URGENT .tk-psel { background: var(--err-soft); }
.tk-pselw.p-HIGH { color: var(--warn-tx); } .tk-pselw.p-HIGH .tk-psel { background: var(--warn-soft); }
.tk-pselw.p-MEDIUM { color: var(--ac-tx); } .tk-pselw.p-MEDIUM .tk-psel { background: var(--ac-soft); }
.tk-pselw .tk-psel option { color: var(--ink); background: var(--panel); }

/* сообщения */
.tk-msgs { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 14px 18px 10px; display: flex; flex-direction: column; }
.tk-older { align-self: center; margin: 2px 0 10px; }
.tk-day { align-self: center; margin: 12px 0 8px; padding: 4px 10px; border-radius: 99px; background: var(--panel2); font: 700 10.5px var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.tk-sys { align-self: center; display: inline-flex; align-items: center; gap: 7px; margin: 8px 0; padding: 6px 12px; border-radius: 99px; background: var(--panel2); color: var(--ink2); font-size: 12.5px; font-weight: 700; text-align: center; }
.tk-m { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; margin-top: 3px; }
.tk-m.first { margin-top: 12px; }
.tk-m .av { flex: none; width: 30px; height: 30px; }
.tk-m .av img { width: 30px; height: 30px; border-radius: 9px; display: block; }
.tk-m .col { min-width: 0; max-width: min(78%, 620px); display: flex; flex-direction: column; gap: 4px; }
.tk-m .who { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); padding-left: 2px; }
.tk-m .who b { font-weight: 800; color: var(--ink); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-m .bub { position: relative; min-width: 0; padding: 9px 13px 7px; border-radius: 17px 17px 17px 6px; background: var(--panel2); color: var(--ink); font-size: 14.5px; line-height: 1.45; }
.tk-m:not(.last-of-group) .bub { border-bottom-left-radius: 17px; }
.tk-m .tx { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.tk-m .tx a { color: var(--ac-tx); text-decoration: underline; text-underline-offset: 2px; }
.tk-m .tx.mut { color: var(--mut); font-style: italic; }
.tk-m .ft { display: flex; justify-content: flex-end; align-items: center; gap: 7px; margin-top: 3px; font: 600 11px var(--fm); color: var(--mut); white-space: nowrap; }
.tk-m .ft .ed { font-family: var(--f); font-weight: 700; cursor: help; }
.tk-m.mine { flex-direction: row-reverse; }
.tk-m.mine .col { align-items: flex-end; }
.tk-m.mine .bub { background: var(--ac); color: #fff; border-radius: 17px 17px 6px 17px; }
.tk-m.mine:not(.last-of-group) .bub { border-bottom-right-radius: 17px; }
.tk-m.mine .tx a { color: #fff; }
.tk-m.mine .ft { color: rgba(255, 255, 255, .78); }
.tk-m.mine .ft .ck { display: inline-flex; }
.tk-dlv { font-size: 12px; font-weight: 700; color: var(--mut); padding-right: 4px; text-align: right; }
.tk-dlv.ok { color: var(--ok-tx); }
.tk-dlv.wait { color: var(--warn-tx); }
.tk-dlv.bad { color: var(--err-tx); display: flex; align-items: center; gap: 5px; }   /* не доставлено (не уйдёт) */
.tk-dlv.bad svg { flex: none; }
.tk-del { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; border: 1px dashed var(--bd2); color: var(--mut); font-size: 13px; font-weight: 700; }
.tk-m.mine .tk-del { align-self: flex-end; }

/* вложения в сообщении */
.tk-atts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 0; }
.tk-atts:first-child { margin-top: 2px; }
.tk-imgs { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-img { position: relative; display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--panel3); cursor: zoom-in; width: 240px; max-width: 100%; aspect-ratio: 16 / 10; }
.tk-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-img.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel2) 25%, var(--panel3) 50%, var(--panel2) 75%); background-size: 200% 100%; animation: nc-sk 1.2s linear infinite; }
.tk-img.broken { cursor: default; display: grid; place-items: center; color: var(--mut); font-size: 12px; font-weight: 700; }
.tk-m.mine .tk-img { background: rgba(255, 255, 255, .14); }
.tk-file { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 8px 9px; border-radius: 13px; background: var(--panel); border: 1px solid var(--bd); color: var(--ink); }
.tk-m.mine .tk-file { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: #fff; }
.tk-file .fi { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ac-soft); color: var(--ac); }
.tk-m.mine .tk-file .fi { background: rgba(255, 255, 255, .2); color: #fff; }
.tk-file .fn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tk-file .fn bdi { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-file .fn small { font: 600 11.5px var(--fm); color: var(--mut); }
.tk-m.mine .tk-file .fn small { color: rgba(255, 255, 255, .78); }
.tk-file .dl { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--bd2); background: var(--panel); color: var(--ink2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tk-file .dl:hover { border-color: var(--ac); color: var(--ac); }
.tk-m.mine .tk-file .dl { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.tk-m.mine .tk-file .dl:hover { background: rgba(255, 255, 255, .16); }
.tk-file.off .fi { background: var(--panel2); color: var(--mut); }
.tk-file.bad .fi { background: var(--err-soft); color: var(--err-tx); }
.tk-file.off .fn small, .tk-file.bad .fn small { font-family: var(--f); font-weight: 600; font-size: 12px; }
.tk-file.bad .fn small { color: var(--err-tx); }
.tk-m.mine .tk-file.bad .fn small, .tk-m.mine .tk-file.off .fn small { color: #fff; }
.tk-file .dl.busy { opacity: .6; pointer-events: none; }

/* плашка «новые сообщения» */
.tk-pill-new { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 10px); z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 99px; border: 0; background: var(--ac); color: #fff; font: 800 13px var(--f); cursor: pointer; box-shadow: var(--sh); white-space: nowrap; }
.tk-pill-new:hover { background: var(--ac2); }

/* ---------- поле ввода ---------- */
.tk-comp { position: relative; flex: none; padding: 10px 12px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bd); background: var(--panel); }
.tk-comp.over { box-shadow: inset 0 0 0 2px var(--ac); }
.tk-comp .row { display: flex; align-items: flex-end; gap: 8px; }
.tk-comp textarea { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 168px; resize: none; padding: 11px 14px; border-radius: 13px; border: 1px solid var(--bd2);
  background: var(--panel); color: var(--ink); font: 500 15px/1.4 var(--f); letter-spacing: -.01em; }
.tk-comp textarea::placeholder { color: var(--mut); }
.tk-comp textarea:focus { outline: none; border-color: var(--ac); box-shadow: 0 0 0 4px var(--ac-soft); }
.tk-ib { flex: none; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--bd2); background: var(--panel); color: var(--ink2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tk-ib:hover { border-color: var(--ac); color: var(--ac); }
.tk-ib.send { border-color: transparent; background: var(--ac); color: #fff; }
.tk-ib.send:hover { background: var(--ac2); color: #fff; }
.tk-ib:disabled { opacity: .5; cursor: default; pointer-events: none; }
.tk-hint { margin: 6px 2px 0; font-size: 11.5px; color: var(--mut); }
.tk-err { margin: 8px 2px 0; font-size: 13px; font-weight: 700; color: var(--err-tx); }
.tk-err:empty { display: none; }
.tk-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 0 9px; }
.tk-chips::-webkit-scrollbar { display: none; }
.tk-chips:empty { display: none; }
.tk-chip { position: relative; flex: none; display: flex; align-items: center; gap: 8px; max-width: 250px; padding: 6px 6px 6px 7px; border-radius: 12px; background: var(--panel2); overflow: hidden; }
.tk-chip .th { flex: none; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--panel); color: var(--ac); }
.tk-chip .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-chip .fn { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tk-chip .fn bdi { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-chip .fn small { font: 600 11px var(--fm); color: var(--mut); }
.tk-chip.bad .fn small { color: var(--err-tx); font-family: var(--f); }
.tk-chip .x { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 0; background: transparent; color: var(--mut); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tk-chip .x:hover { background: var(--panel); color: var(--err-tx); }
.tk-pr { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--ac); transition: width .2s ease; }
.tk-cnote { margin: 0; flex-wrap: wrap; align-items: center; }
.tk-cnote .grow { flex: 1 1 220px; min-width: 0; }
.tk-cnote .nc-btn { flex: none; margin-left: auto; }

/* ---------- новое обращение ---------- */
.tk-form { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 24px; }
.tk-pdet.fix .tk-form { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.tk-form-h { display: flex; align-items: flex-start; gap: 12px; }
.tk-form-h h2 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -.035em; line-height: 1.2; }
.tk-form-h p { margin: 4px 0 0; font-size: 14px; color: var(--ink2); line-height: 1.5; }
.tk[data-layout="split"] .tk-form-h .tk-back { display: none; }
.tk-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
.tk-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tk-lab > span { font-size: 13px; font-weight: 700; color: var(--ink2); }
.tk-cnt { font: 600 11.5px var(--fm); color: var(--mut); white-space: nowrap; }
.tk-cnt.over { color: var(--err-tx); }
.tk-form .nc-input.bad { border-color: var(--err); box-shadow: 0 0 0 4px var(--err-soft); }
.tk-form textarea.nc-input { min-height: 150px; }
.tk-form select.nc-input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.tk-form .tk-selw { display: flex; }
.tk-form .tk-selw > svg { right: 14px; }
.tk-fhint { font-size: 12.5px; color: var(--mut); line-height: 1.45; }
.tk-fmsg { font-size: 12.5px; font-weight: 700; color: var(--err-tx); }
.tk-fmsg:empty { display: none; }
.tk-drop { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; border: 1.5px dashed var(--bd2); background: var(--panel3); }
.tk-drop.over { border-color: var(--ac); background: var(--ac-soft); }
.tk-drop .ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--ac-soft); color: var(--ac); }
.tk-drop .t { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ink2); line-height: 1.45; }
.tk-drop .t b { color: var(--ink); font-weight: 800; }
.tk-drop .t small { display: block; font-size: 12.5px; color: var(--mut); }
.tk-drop .tc { display: none; }
@media (hover: none) and (pointer: coarse) { .tk-drop .dk { display: none; } .tk-drop .tc { display: inline; } }
.tk-fcards { display: flex; flex-direction: column; gap: 8px; }
.tk-fcards:empty { display: none; }
.tk-fcard { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 9px; border-radius: 13px; border: 1px solid var(--bd); background: var(--panel); overflow: hidden; }
.tk-fcard .th { flex: none; width: 36px; height: 36px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--ac-soft); color: var(--ac); }
.tk-fcard .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-fcard .fn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tk-fcard .fn bdi { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-fcard .fn small { font: 600 11.5px var(--fm); color: var(--mut); }
.tk-fcard.bad .fn small { font-family: var(--f); color: var(--err-tx); }
.tk-fcard.bad .th { background: var(--err-soft); color: var(--err-tx); }
.tk-fcard .x { flex: none; width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: var(--mut); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tk-fcard .x:hover { background: var(--panel2); color: var(--err-tx); }
.tk-ffoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 2px; }
.tk-ffoot [role="status"] { font-size: 13px; font-weight: 700; color: var(--mut); }
.tk-ffoot [role="status"].err { color: var(--err-tx); }
.tk-fhelp { display: flex; gap: 12px; padding: 13px 14px; border-radius: 14px; background: var(--panel3); border: 1px solid var(--bd); font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.tk-fhelp > svg { flex: none; color: var(--ac); margin-top: 1px; }
.tk-fhelp b { color: var(--ink); }
.tk-solo { max-width: 760px; }
/* solo shell showing a thread or «not found» (a link to a ticket of another account, or before the first ticket exists) */
.tk-solo-wrap > .tk-pdet.fix { border-radius: var(--r); background: var(--panel); border: 1px solid var(--bd); overflow: hidden; }

/* ---------- пусто ---------- */
.tk-empty .nc-empty { background: var(--panel); border-style: solid; border-width: 1px; border-color: var(--bd); padding: 46px 24px 42px; }
.tk-empty .nc-empty .ic { width: 64px; height: 64px; border-radius: 20px; }
.tk-empty .tk-tips { margin-top: 12px; }

/* ---------- просмотр картинок (как .ss-view на /cabinet/screenshots) ---------- */
.tk-viewer { position: fixed; inset: 0; z-index: 95; background: rgba(5, 7, 12, .9); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px; gap: 14px; }
.tk-viewer.on { display: flex; }
.tk-viewer img { max-width: min(1400px, 100%); max-height: calc(100vh - 150px); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); background: #111; }
.tk-viewer .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; color: #E6E9F0; font-size: 13.5px; font-weight: 600; max-width: 100%; }
.tk-viewer .bar bdi { max-width: min(60vw, 520px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-viewer .bar small { font: 600 12px var(--fm); opacity: .75; }
.tk-viewer .vbtn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font: 800 13.5px var(--f); cursor: pointer; }
.tk-viewer .vbtn:hover { background: rgba(255, 255, 255, .16); }
.tk-viewer .close, .tk-viewer .nav { position: absolute; width: 44px; height: 44px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.tk-viewer .close { right: 16px; top: 16px; }
.tk-viewer .nav { top: 50%; transform: translateY(-50%); }
.tk-viewer .nav.prev { left: 16px; } .tk-viewer .nav.next { right: 16px; }
.tk-viewer .close:hover, .tk-viewer .nav:hover { background: rgba(255, 255, 255, .18); }
.tk-viewer .ld { color: #C9D2E8; font-weight: 700; }

/* ---------- шапка /en/support (скопирована с /en/builds) ----------
   site2 на телефонах сжимает иконку круглой кнопки «Download» до 0 px на страницах, которых не знает (у /builds это чинит его
   правило [1][13][4], но оно привязано к main.bw) — то же исправление для нашей страницы. */
@media (max-width: 900px) {
  html body:has([data-t="support-root"]) header.nc-top .nc-btn-dl { width: 40px !important; height: 40px !important; padding: 0 !important; justify-content: center !important; box-sizing: border-box; }
  html body:has([data-t="support-root"]) header.nc-top .nc-btn-dl svg { flex: none; width: 16px; height: 16px; }
}

/* ---------- узкие экраны ---------- */
@media (max-width: 900px) {
  .tk-th-h { padding: 12px 14px; gap: 10px; }
  .tk-th-h h2 { font-size: 16.5px; }
  .tk-msgs { padding: 12px 12px 8px; }
  .tk-m .col { max-width: 86%; }
  .tk-comp { padding: 8px 10px 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .tk-hint { display: none; }
  .tk-row2 { grid-template-columns: minmax(0, 1fr); }
  .tk-tips { grid-template-columns: minmax(0, 1fr); }
  .tk-comp textarea, .tk-form .nc-input { font-size: 16px; }   /* iOS zooms into fields under 16 px */
}
@media (max-width: 600px) {
  .tk-card { border-radius: 18px; }
  .tk-row { padding: 12px 12px; column-gap: 10px; grid-template-columns: 36px minmax(0, 1fr) auto; }
  .tk-row .st { width: 36px; height: 36px; border-radius: 11px; }
  .tk-th-h .acts .nc-btn .t { display: none; }
  .tk-th-h .meta .cr, .tk-th-h .meta .sep { display: none; }   /* phones: «создано …» is left out of the header (no room) */
  .tk-th-h .acts .nc-btn { width: 36px; min-height: 36px; padding: 0; }
  .tk-m .av, .tk-m .av img { width: 26px; height: 26px; }
  .tk-m .col { max-width: 88%; }
  .tk-img { width: 200px; }
  .tk-form { padding: 16px; gap: 14px; }
  .tk-drop { flex-direction: column; align-items: stretch; text-align: center; }
  .tk-drop .ic { margin: 0 auto; }
  .tk-drop .nc-btn { width: 100%; }
  .tk-ffoot .nc-btn { flex: 1 1 auto; }
  .tk-cnote .nc-btn { flex: 1 1 100%; margin-left: 0; }
  .tk-viewer .nav { top: auto; bottom: 18px; transform: none; }
  .tk-viewer img { max-height: calc(100vh - 220px); }
}
@media (prefers-reduced-motion: reduce) { .tk-img.loading::after { animation: none; } .tk-pr { transition: none; } }