/* ==========================================================================
   Helpdesk — экраны прототипа: вход, список заявок, карточка заявки.
   Поверх дизайн-системы 1.0: только раскладка и специфика экранов,
   все цвета, отступы и шрифты — токены.
   ========================================================================== */

/* .app объявлен как display:grid и перебивает браузерное [hidden] */
[hidden] { display: none !important; }

/* --- Загрузка ------------------------------------------------------------- */

.boot {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-4);
}
.boot__mark {
  width: 40px; height: 40px;
  background-image: var(--grad-hot);
  animation: hd-blink 1.2s var(--ease) infinite;
}
@keyframes hd-blink { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* --- Вход и регистрация ---------------------------------------------------- */

.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}
.auth__card {
  width: min(440px, 100%);
  padding: 0;
  border: var(--bw-hair) solid var(--bd-default);
  background: var(--bg-surface);
}
.auth__stripe { height: 6px; }
.auth__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.auth__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
}
.auth .tabs .tab { flex: 1; text-align: center; }
.auth__sent { display: flex; flex-direction: column; gap: var(--sp-4); }

/* --- Список --------------------------------------------------------------- */

.tickets tbody tr { cursor: pointer; }

/* Колонки уже, чем в макете: тема должна получить максимум места */
.tickets .c-id     { width: 76px; }
.tickets .c-pri    { width: 108px; }
.tickets .c-status { width: 124px; }
.tickets .c-people { width: 132px; }
.tickets .c-upd    { width: 108px; }

.cell-sub { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-sub__title {
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-sub__meta { font-size: var(--fs-xs); color: var(--fg-muted); }

/* --- Карточка заявки ------------------------------------------------------- */

.ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6);
  align-items: start;
}
.ticket__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.ticket__panel {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-6));
  border: var(--bw-hair) solid var(--bd-default);
  background: var(--bg-surface);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.ticket__panel h3 {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
}

.panel-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; }
.panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.panel-row dt { color: var(--fg-muted); flex: none; }
.panel-row dd { margin: 0; text-align: right; min-width: 0; }

.message__text { white-space: pre-wrap; overflow-wrap: anywhere; }

.reply {
  border: var(--bw-hair) solid var(--bd-default);
  background: var(--bg-surface);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.reply .textarea { min-height: 96px; }

/* --- Модалка -------------------------------------------------------------- */

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  overflow: auto;
}

/* --- ИИ-сводка за сутки ---------------------------------------------------- */

.modal--wide { width: min(760px, calc(100vw - var(--sp-8))); }
/* Длинная сводка не должна выталкивать кнопки за край экрана */
.modal--wide .modal__body { max-height: min(56dvh, 520px); overflow-y: auto; }
/* Тело — flex-колонка (.ds-stack). Без этого длинный текст сжимается
   в отведённую высоту и наезжает на подпись снизу вместо прокрутки. */
.modal--wide .modal__body > * { flex: none; }

/* Те же плитки, что и в списке, но плотнее: места в модалке меньше */
.ai-stats { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); }
.ai-stats .metric { padding: var(--sp-3) var(--sp-4); }
.ai-stats .metric__value { font-size: var(--fs-h3); }

.ai-report {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  border-left: 3px solid var(--fg-accent);
  padding-left: var(--sp-4);
  min-height: 56px;
}
.ai-report b { font-weight: var(--fw-medium); }
.ai-report--waiting {
  color: var(--fg-muted);
  border-left-color: var(--bd-default);
  animation: hd-pulse 1.4s var(--ease) infinite;
}
@keyframes hd-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

/* Промпт правят редко и вдумчиво — даём много места и моноширинный шрифт */
.ai-prompt {
  min-height: 300px;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

/* --- Доступ для агента ----------------------------------------------------- */

.agent-scope {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  border-left: 3px solid var(--bd-default);
  padding-left: var(--sp-4);
}
.agent-scope__mark {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  margin-right: var(--sp-2);
}
.agent-scope__mark--yes { color: var(--fg-accent); }
.agent-scope__mark--no  { color: var(--fg-muted); }

/* Токен длинный и его копируют глазами тоже — переносим по символам,
   иначе строка уезжает за край модалки. */
.token {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
  border: var(--bw-hair) solid var(--bd-default);
  background: var(--bg-base);
  padding: var(--sp-3);
}
.token--cmd { color: var(--fg-secondary); }

.token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  border: var(--bw-hair) solid var(--bd-default);
  background: var(--bg-surface);
  padding: var(--sp-3) var(--sp-4);
}
.token-row + .token-row { border-top: 0; }
.token-row__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.token-row__meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}
.token-row--dead .token-row__name { color: var(--fg-muted); text-decoration: line-through; }

.agent-how summary { cursor: pointer; color: var(--fg-secondary); }

/* --- Тосты ---------------------------------------------------------------- */

.toasts {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(380px, calc(100vw - var(--sp-8)));
}
.toasts .alert { box-shadow: var(--sh-pop); }

/* --- Мелочи ---------------------------------------------------------------- */

.is-busy { opacity: .5; pointer-events: none; }
.stretch-start { align-self: flex-start; }

@media (max-width: 1040px) {
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket__panel { position: static; }
}

@media (max-width: 768px) {
  /* На узком экране правая группа топбара не помещалась и «Выйти» уезжал за край.
     Имя и почта всё равно продублированы в сайдбаре. */
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-3); }
  .topbar__user { display: none; }
  .auth__body { padding: var(--sp-5); }
}