/* Support desk — what the admin's shared sheet (src/kit/panel.css) does not
   have: the chat workspace, the player card grid, the phone layout.
   Same tokens, same five colours, no radii, no shadows (owner: «в стиле
   админки», ADR-0049 ответ 6). Linked AFTER panel.css. */

/* ------------------------------------------------------------ header --- */

.desk .search { flex: 0 1 360px; }
.desk .profile { color: var(--white); text-decoration: none; border: var(--border-w) solid transparent; padding: 4px 8px; }
.desk .profile.is-active { border-color: var(--white); }
.feed-state { font-size: var(--fs-info); text-transform: uppercase; border: 1px solid var(--white); padding: 2px 6px; }
.feed-state.is-live { background: var(--white); color: var(--black); }
.side-item .badge { margin-left: auto; border-color: var(--white); }

/* The admin frame keeps 1100 px for its tables; the desk reflows instead. */
.frame.desk { min-width: 0; }

.sub-title { margin: 16px 0 6px; font-size: var(--fs-body); font-weight: 400; text-transform: uppercase; }
.flag-refund { background: var(--red); color: var(--white); border-color: var(--red); }
a.tag { text-decoration: none; }
.search-form { display: flex; gap: var(--gap); max-width: 720px; }
.search-form .field { flex: 1; }
.player-flags { margin-top: -8px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.actions { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }

/* MOCK / not-connected banners: loud, but only ink and the reserved red. */
.notice.mock-banner { border-style: dashed; background: var(--black); color: var(--white); }
.notice.install-hint { border-color: var(--blue); }

/* ------------------------------------------------------------ CHATS --- */

.chat-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; }
.chat-layout:not(.has-thread) { grid-template-columns: 340px minmax(0, 1fr); }
.chat-list { display: flex; flex-direction: column; gap: 6px; }
.thread-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 3px solid var(--black);
  color: var(--black);
  text-decoration: none;
  font-size: 18px;
  line-height: 1.15;
}
.thread-item.is-active { background: var(--black); color: var(--white); }
.thread-item.is-active .tag { border-color: var(--white); }
.thread-item.is-unread { border-width: 5px; }
.ti-head { display: flex; align-items: baseline; gap: 6px; }
.ti-head .strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ti-when { margin-left: auto; font-size: var(--fs-info); white-space: nowrap; }
.ti-text { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.thread-pane { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.thread-pane.is-empty { border: 3px dashed var(--black); padding: 30px; }
.thread-title { margin: 0; overflow-wrap: anywhere; }
.thread-head .chips { margin: 6px 0; }
.thread-back { display: none; }
.chat { max-height: 58vh; }
.chat-typing { margin: 0; font-size: var(--fs-info); text-transform: uppercase; }
.card-pane { border: var(--border-w) solid var(--black); padding: var(--pad); min-width: 0; }
.card-pane .section-title { margin-top: 0; }
.notes summary { cursor: pointer; margin: 10px 0; }
.note { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 3px dashed var(--black); margin-bottom: 6px; font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-form { display: flex; flex-direction: column; gap: 6px; }
.note-form textarea.field, .reply-box textarea.field { height: auto; min-height: 72px; resize: vertical; font-family: var(--font); font-size: var(--fs-body); line-height: 1.2; }

@media (max-width: 1300px) {
  .chat-layout.has-thread { grid-template-columns: 300px minmax(0, 1fr); }
  .chat-layout.has-thread .card-pane { grid-column: 2; }
}

/* ----------------------------------------------------- player / pages --- */

.user-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 30px; }
.stat-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 24px; }
.desk .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.cards .card .num { font-size: 40px; overflow-wrap: anywhere; }
.event-list { margin: 0; padding-left: 24px; font-size: 17px; line-height: 1.35; }
.event-list li { overflow-wrap: anywhere; }
.bar-chart { cursor: default; }
.c-bar { fill: var(--blue); }
.c-bar.is-red { fill: var(--red); }
.toggles { display: flex; flex-direction: column; gap: 10px; }
.toggle { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--fs-control); }
.toggle input { width: 22px; height: 22px; accent-color: var(--black); }
.terminate-form, .refund-form { max-width: 560px; }
.refund-form .field.is-small { width: 100%; }
tr.is-sandbox td { opacity: 0.7; }

/* ------------------------------------------------------ the phone (≤ 760) ---
   One column. Header wraps (logo + profile, search, sections); the sidebar
   becomes a row of items; tables become labelled cards; CHATS is list →
   screen (an open thread hides the list and shows ← back). No horizontal
   page scroll at 360 px. */

@media (max-width: 760px) {
  :root {
    --header-pad-x: 12px;
    --fs-control: 20px;
    --fs-nav: 22px;
    --control-h: 40px;
    --border-w: 3px;
  }
  html, body { overflow-x: hidden; }
  .top { height: auto; flex-wrap: wrap; padding: 8px 12px calc(8px + env(safe-area-inset-top, 0px) * 0); gap: 8px; }
  .logo img { width: 72px; height: 44px; }
  .desk .profile { margin-left: auto; font-size: 20px; order: 2; }
  .desk .search { order: 3; flex: 1 1 100%; min-width: 0; }
  .domains { order: 4; flex: 1 1 100%; overflow: hidden; }
  .domain { flex: 1 1 0; justify-content: center; padding: 6px; font-size: 18px; min-width: 0; }
  .main { flex-direction: column; }
  .side { width: auto; padding: 6px 12px; flex-direction: row; align-items: center; }
  .side-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .side-item { height: 34px; font-size: 18px; padding: 4px 8px; border-width: 3px; }
  .side .info { display: none; }
  .content { padding: 12px 12px 40px; overflow: visible; }
  .page-title { font-size: 26px; overflow-wrap: anywhere; }
  .page-head { gap: 8px; margin-bottom: 12px; }
  .section-title { font-size: 22px; margin-top: 20px; }
  .btn { font-size: 18px; }
  .field { font-size: 18px; }
  .field.is-small { width: 100%; }
  .facts { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; font-size: 17px; }
  .facts dd { overflow-wrap: anywhere; min-width: 0; }
  .desk .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards .card { min-width: 0; }
  .cards .card .num { font-size: 30px; }
  .login-main { padding: 24px 12px; }
  .login-form { width: 100%; }
  .notice { font-size: 18px; }

  /* tables → cards: each row a block, each cell «label value» */
  .scroll { overflow-x: visible; }
  table.grid.is-cards, .grid.is-cards tbody, .grid.is-cards tr, .grid.is-cards td { display: block; width: 100%; }
  .grid.is-cards thead { display: none; }
  .grid.is-cards tr { border: 3px solid var(--black); margin-bottom: 8px; }
  .grid.is-cards td { border: 0; border-bottom: 1px dashed var(--black); padding: 6px 8px; font-size: 17px; overflow-wrap: anywhere; }
  .grid.is-cards td:last-child { border-bottom: 0; }
  .grid.is-cards td::before { content: attr(data-label); display: block; font-size: 13px; text-transform: uppercase; opacity: 0.7; }
  .grid td.actions { white-space: normal; }

  /* CHATS: list → screen */
  .chat-layout, .chat-layout:not(.has-thread), .chat-layout.has-thread { display: block; }
  .chat-layout.has-thread .chat-list { display: none; }
  .chat-layout:not(.has-thread) .thread-pane.is-empty { display: none; }
  .thread-back { display: inline-block; margin-bottom: 4px; }
  .chat { max-height: none; }
  .bubble { max-width: 92%; font-size: 18px; }
  .card-pane { margin-top: 12px; }
  .chat-layout.has-thread .card-pane { grid-column: auto; }

  .tabs { gap: 6px; }
  .tab { padding: 6px 8px; font-size: 17px; }
  .search-form { flex-direction: column; }
}