.tk [hidden], .tv [hidden], .tv-head [hidden] { display: none }

.tk-head, .tv-head { padding-bottom: 30px }
.tk-head .page-title, .tv-head .tv-title { margin-top: 12px }
.tk-new { margin-top: 20px }

.tk { max-width: 920px; padding-bottom: 64px; scroll-margin-top: calc(var(--banner-h) + 100px) }

.tk-controls { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; align-items: center; margin-bottom: 18px }
.tk-filters { grid-column: 1 / -1; justify-self: center; max-width: 100% }
.tk-chip { white-space: nowrap }
.tk-chip-count { min-width: 20px; padding: 1px 6px; font: 900 11px/1.5 var(--font); letter-spacing: 0; text-align: center; color: var(--soft); background: rgb(var(--tint-rgb) / .12); border-radius: 999px }
.tk-chip-count:empty { display: none }
.tk-chip.active .tk-chip-count { color: var(--gold); background: var(--ink) }
.tk-search { position: relative; min-width: 0 }
.tk-search .ic { position: absolute; top: 50%; left: 14px; width: 17px; height: 17px; color: var(--gold); transform: translateY(-50%); pointer-events: none }
.tk-search .control { padding-left: 40px }
.tk-search .control::-webkit-search-cancel-button { display: none }

.tk-list { display: grid; gap: 10px }

.tk-status { --tone: var(--sky); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font: 800 12px var(--font); color: var(--tone); white-space: nowrap; background: color-mix(in srgb, var(--tone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 42%, transparent); border-radius: 999px }
.tk-status .ic { width: 14px; height: 14px }
.tone-open { --tone: var(--sky) }
.tone-active { --tone: var(--gold) }
.tone-waiting { --tone: #ff9a4c }
.tone-done { --tone: #6fdc8c }
.tone-closed { --tone: #b6c0d8 }
.tk-status.tone-waiting { color: var(--ink); background: #ff9a4c; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink) }

.tk-row { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; background: linear-gradient(135deg, var(--panel-a) 0%, var(--panel-b) 55%, var(--panel-c) 100%); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 36px -30px rgba(5, 8, 25, .9); transition: border-color .15s, transform .15s }
.tk-row:hover { border-color: rgba(255, 201, 60, .55); transform: translateY(-2px) }
.tk-row.tone-closed, .tk-row.tone-done { background: rgb(var(--plate-rgb) / .6); border-color: rgb(var(--tint-rgb) / .12); box-shadow: none }
.tk-row.tone-waiting { box-shadow: inset 3px 0 0 #ff9a4c, 0 20px 36px -30px rgba(5, 8, 25, .9) }
.tk-row-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); border-radius: 12px }
.tk-row-icon .ic { width: 20px; height: 20px }
.tk-row-body { flex: 1; min-width: 0; display: grid; gap: 3px }
.tk-row-subject { font: 900 16px/1.3 var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tk-row:hover .tk-row-subject { color: var(--gold-text) }
.tk-row-meta { font: 700 13px var(--font); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tk-row-side { flex: none; display: grid; justify-items: end; gap: 6px }
.tk-row-updated { font: 700 12px var(--font); color: var(--mute); white-space: nowrap }

.tk-state { display: grid; justify-items: center; gap: 10px; padding: 34px 20px; text-align: center; background: linear-gradient(135deg, var(--panel-a) 0%, var(--panel-b) 55%, var(--panel-c) 100%); border: 1px solid var(--line); border-radius: 20px }
.tk-state-icon { width: 56px; height: 56px; margin-bottom: 6px; display: grid; place-items: center; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink) }
.tk-state-icon .ic { width: 26px; height: 26px; stroke-width: 2.2 }
.tk-state-icon.is-warn { background: #ff9a4c }
.tk-state-icon.is-loading { color: var(--gold); background: rgb(var(--plate-rgb) / .8); border-color: var(--line); box-shadow: none }
.tk-state-title { font: 900 22px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--gold); text-shadow: 2px 2px 0 var(--ink) }
.tk-state-text { max-width: 440px; font-size: 15px; line-height: 1.55; color: var(--soft) }
.tk-state .btn { margin-top: 8px }

.tk-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 24px }
.tk-pagination:empty { display: none }
.pg-btn { min-width: 40px; height: 40px; padding: 0 10px; display: grid; place-items: center; font: 900 14px var(--font); color: var(--soft); background: rgb(var(--plate-rgb) / .7); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: color .15s, border-color .15s }
.pg-btn .ic { width: 16px; height: 16px }
.pg-btn:hover:not(:disabled) { color: var(--text); border-color: rgba(255, 201, 60, .5) }
.pg-btn.active { color: var(--ink); background: var(--gold); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink) }
.pg-btn:disabled { opacity: .4; cursor: default }

.tv-number { margin-top: 14px; font: 800 13px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--sky) }
.tv-head .tv-title { max-width: 820px; margin: 6px auto 0; font: 900 32px/1.25 var(--font); color: var(--text); text-shadow: 3px 3px 0 var(--ink); overflow-wrap: anywhere }
.tv-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.tv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; font: 800 12px var(--font); color: var(--soft); background: rgb(var(--plate-rgb) / .7); border: 1px solid var(--line); border-radius: 999px }
.tv-chip .ic { width: 14px; height: 14px; color: var(--gold) }

.tv { max-width: 820px; padding-bottom: 64px }
.tv-body { display: grid; gap: 16px }
.tv-label { font: 900 13px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text) }

.tv-desc { display: grid; gap: 10px; padding: 18px 20px; background: rgb(var(--plate-rgb) / .62); border: 1px solid rgb(var(--tint-rgb) / .12); border-radius: 18px }
.tv-desc-text { font-size: 15px; line-height: 1.6; color: var(--soft); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden }
.tv-desc-text.is-open { display: block; -webkit-line-clamp: unset }
.tv-desc-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; font: 800 14px var(--font); color: var(--gold-text); background: none; border: 0; cursor: pointer }
.tv-desc-toggle .ic { width: 16px; height: 16px; transition: transform .2s }
.tv-desc-toggle.is-open .ic { transform: rotate(180deg) }

.tv-chat { display: grid; background: linear-gradient(135deg, var(--panel-a) 0%, var(--panel-b) 55%, var(--panel-c) 100%); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -36px rgba(5, 8, 25, .9); overflow: hidden }
.tv-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgb(var(--tint-rgb) / .1) }
.tv-close-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 12px; font: 800 13px var(--font); color: var(--soft); background: rgb(var(--tint-rgb) / .07); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: color .15s, border-color .15s }
.tv-close-btn .ic { width: 16px; height: 16px; color: #6fdc8c }
.tv-close-btn:hover { color: var(--text); border-color: rgba(111, 220, 140, .55) }

.tv-messages { display: grid; align-content: start; gap: 12px; min-height: 180px; max-height: min(62vh, 620px); padding: 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(var(--tint-rgb) / .25) transparent }
.tv-empty { align-self: center; display: grid; justify-items: center; gap: 10px; padding: 28px 10px; text-align: center; color: var(--mute) }
.tv-empty .ic { width: 28px; height: 28px; color: var(--sky) }
.tv-empty p { max-width: 320px; font-size: 14px; line-height: 1.5 }
.tv-day { display: flex; justify-content: center }
.tv-day span { padding: 3px 12px; font: 800 12px var(--font); color: var(--mute); background: rgb(var(--plate-rgb) / .8); border-radius: 999px }

.tv-system { justify-self: center; display: flex; align-items: flex-start; gap: 8px; max-width: 90%; padding: 8px 14px; font: 700 13px/1.45 var(--font); color: var(--soft); background: rgb(var(--plate-rgb) / .8); border: 1px dashed rgb(var(--tint-rgb) / .25); border-radius: 12px }
.tv-system .ic { width: 15px; height: 15px; margin-top: 2px; color: var(--sky) }
.tv-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 82% }
.tv-msg.is-mine { justify-self: end; flex-direction: row-reverse }
.tv-msg-ava { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); background: var(--sky); border: 2px solid var(--ink); border-radius: 50% }
.tv-msg-ava .ic { width: 17px; height: 17px }
.tv-msg-body { min-width: 0; display: grid; gap: 4px }
.tv-msg.is-mine .tv-msg-body { justify-items: end }
.tv-msg-author { padding: 0 4px; font: 800 12px var(--font); color: var(--mute) }
.tv-bubble { padding: 10px 14px; font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; background: rgb(var(--plate-rgb) / .85); border: 1px solid rgb(var(--tint-rgb) / .14); border-radius: 16px 16px 16px 4px }
.tv-msg.is-mine .tv-bubble { color: var(--ink); background: var(--gold); border-color: var(--ink); border-radius: 16px 16px 4px 16px; box-shadow: 2px 2px 0 var(--ink) }
.tv-msg-time { padding: 0 4px; font: 700 11px var(--font); color: var(--mute) }
.tv-msg-edited { margin-left: 6px; font-style: italic; cursor: help }
.tv-msg.is-agent .mk-rich a { color: var(--sky) }

.tv-files { display: flex; flex-wrap: wrap; gap: 8px }
.tv-thumb { width: 104px; height: 104px; padding: 0; overflow: hidden; background: rgb(var(--plate-rgb) / .8); border: 1px solid var(--line); border-radius: 12px; cursor: zoom-in; transition: border-color .15s }
.tv-thumb:hover { border-color: rgba(255, 201, 60, .6) }
.tv-thumb img { width: 100%; height: 100%; object-fit: cover }

.tv-waiting { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; font: 800 14px var(--font); color: var(--ink); background: #ff9a4c; border-top: 2px solid var(--ink) }
.tv-waiting .ic { width: 17px; height: 17px }

.tv-composer { display: grid; gap: 8px; padding: 14px 18px 16px; background: rgb(var(--plate-rgb) / .45); border-top: 1px solid rgb(var(--tint-rgb) / .1) }
.tv-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.tv-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.tv-pending { display: flex; flex-wrap: wrap; gap: 8px }
.tv-pending-item { position: relative; width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px }
.tv-pending-item img { width: 100%; height: 100%; object-fit: cover }
.tv-pending-remove { position: absolute; top: 3px; right: 3px; width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: rgb(var(--plate-rgb) / .9); border: 1px solid var(--line); border-radius: 9px; cursor: pointer }
.tv-pending-remove .ic { width: 14px; height: 14px }
.tv-pending-remove:hover { background: #e5484d }
.tv-input { display: flex; align-items: flex-end; gap: 8px; padding: 6px; background: rgb(var(--plate-rgb) / .85); border: 1px solid var(--line); border-radius: 14px; transition: border-color .15s, box-shadow .15s }
.tv-input:focus-within { border-color: rgba(255, 201, 60, .65); box-shadow: 0 0 0 3px rgba(255, 201, 60, .14) }
.tv-textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 220px; padding: 9px 4px; font: 600 15px/1.45 var(--font); color: var(--text); background: none; border: 0; outline: none; resize: none }
.tv-textarea::placeholder { color: var(--mute) }
.tv-input-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--soft); background: rgb(var(--tint-rgb) / .08); border: 0; border-radius: 10px; cursor: pointer; transition: color .15s, background .15s }
.tv-input-btn .ic { width: 19px; height: 19px }
.tv-input-btn:hover:not(:disabled) { color: var(--text); background: rgb(var(--tint-rgb) / .14) }
.tv-input-btn.is-send { color: var(--ink); background: var(--gold); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink) }
.tv-input-btn.is-send:hover:not(:disabled) { color: var(--ink); background: #ffd25e }
.tv-input-btn:disabled { opacity: .6; cursor: wait }
.tv-hints { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font: 700 12px/1.45 var(--font); color: var(--mute) }
.tv-hints a { color: var(--gold-text) }
.tv-hints a:hover { color: var(--gold) }

.tv-closed { display: grid; justify-items: center; gap: 12px; padding: 22px 20px 24px; text-align: center; border-top: 1px solid rgb(var(--tint-rgb) / .1) }
.tv-closed-icon { width: 46px; height: 46px; display: grid; place-items: center; color: #6fdc8c; background: rgba(111, 220, 140, .12); border: 1px solid rgba(111, 220, 140, .4); border-radius: 14px }
.tv-closed-icon .ic { width: 22px; height: 22px }
.tv-closed-text { max-width: 520px; font-size: 15px; line-height: 1.55; color: var(--soft) }
.tv-closed-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px }
.tv-reopen { display: grid; gap: 12px; width: 100%; max-width: 560px; text-align: left }
.tv-reopen-actions { display: flex; justify-content: flex-end; gap: 10px }

.tv-confirm { width: min(460px, 100%) }
.tv-confirm-text { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--soft) }
.tv-confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 22px }

.tv-lightbox { padding: 20px }
.tv-lightbox img { max-width: min(1100px, 100%); max-height: calc(100vh - 80px); object-fit: contain; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8) }
.tv-lightbox .modal-close { top: 16px; right: 16px; width: 40px; height: 40px; background: rgb(var(--plate-rgb) / .9) }

@media (max-width: 640px) {
  .tk-head, .tv-head { padding-bottom: 24px }
  .tk-new { width: 100%; max-width: 360px; justify-content: center }
  .tk-controls { grid-template-columns: minmax(0, 1fr) }
  .tk-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch }
  .tk-chip { justify-content: center; padding: 9px 6px; gap: 6px; letter-spacing: .03em }
  .tk-row { flex-wrap: wrap; gap: 10px 12px; padding: 12px }
  .tk-row-icon { width: 38px; height: 38px }
  .tk-row-body { flex-basis: calc(100% - 50px) }
  .tk-row-subject { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
  .tk-row-meta { white-space: normal }
  .tk-row-side { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; min-width: 0; padding-left: 50px }
  .tk-state { padding: 26px 16px }
  .tk-state-title { font-size: 19px }
  .tv-head .tv-title { font-size: clamp(22px, 6.6vw, 28px) }
  .tv-desc { padding: 16px 14px }
  .tv-chat { border-radius: 18px }
  .tv-chat-head { padding: 12px 14px }
  .tv-messages { padding: 14px 12px; max-height: 64vh }
  .tv-msg { max-width: 92% }
  .tv-composer { padding: 12px }
  .tv-hints { flex-direction: column }
  .tv-thumb { width: 84px; height: 84px }
  .tv-confirm-actions, .tv-reopen-actions { flex-direction: column-reverse }
  .tv-confirm-actions .btn, .tv-reopen-actions .btn { width: 100%; justify-content: center }
}