/* Модуль AI: экран командного чата /ai. Только токены из :root (кегль --t-*, отступы --s-*,
   радиусы --radius*); цвет — через токены темы. Телефон — ширина до 760px, как во всём портале. */

.ai {
  --ai-gap: var(--s-3);
  display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  height: calc(100dvh - var(--topbar-h, 64px) - var(--s-5)); min-height: 0;
  gap: var(--ai-gap); padding: var(--s-4); box-sizing: border-box;
}

/* ── Левая колонка ── */
.ai-side {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--s-3);
}
.ai-side__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-3); }
.ai-side__title { margin: 0; font-size: var(--t-md); font-weight: 600; }
.ai-side__new { display: inline-flex; align-items: center; gap: var(--s-1); }
.ai-side__admin {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); padding: var(--s-2) var(--s-2);
  border: none; background: none; color: var(--text-dim); font: inherit; font-size: var(--t-sm); cursor: pointer; border-radius: var(--radius-sm);
}
.ai-side__admin:hover:where([data-hover="mouse"] *) { background: var(--hover); color: var(--text); }
.ai-side__scroll { flex: 1; min-height: 0; overflow-y: auto; }
.ai-side__empty { padding: var(--s-2) var(--s-3); color: var(--text-faint); font-size: var(--t-sm); }

.ai-folder + .ai-folder { margin-top: var(--s-2); }
.ai-folder__head {
  display: flex; align-items: center; gap: var(--s-1); width: 100%; padding: var(--s-2) var(--s-1);
  border: none; background: none; cursor: pointer; font: inherit; color: var(--text); text-align: left;
}
.ai-folder__caret { display: inline-flex; color: var(--text-faint); transform: rotate(-90deg); transition: transform var(--fast); }
.ai-folder__caret.is-open { transform: none; }
.ai-folder__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); font-weight: 600; }
.ai-folder__body { display: flex; flex-direction: column; gap: var(--s-05); padding-left: var(--s-3); }

.ai-row {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; min-width: 0; padding: var(--s-2) var(--s-2);
  border: none; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: var(--t-base);
  text-align: left; cursor: pointer;
}
.ai-row:hover:where([data-hover="mouse"] *) { background: var(--hover); }
.ai-row.is-active { background: var(--solid); box-shadow: var(--sh-1); font-weight: 500; }
.ai-row__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-row__dot { flex: none; width: var(--s-2); height: var(--s-2); border-radius: var(--radius-full); background: transparent; }
.ai-row__dot.is-new { background: var(--accent); }
.ai-row__dot.is-run { background: var(--ok); animation: ai-pulse 1.2s ease-in-out infinite; }
.ai-row--new, .ai-row--memory { color: var(--text-dim); font-size: var(--t-sm); }
.ai-row--new svg { flex: none; }
.ai-row--memory { justify-content: space-between; }
.ai-badge {
  flex: none; min-width: var(--s-4); padding: 0 var(--s-1); border-radius: var(--radius-full); text-align: center;
  background: var(--accent); color: var(--accent-text); font-size: var(--t-2xs); font-weight: 600; line-height: var(--s-4);
}

/* ── Правая часть ── */
.ai-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ai-pane__empty { flex: 1; display: grid; place-items: center; color: var(--text-faint); font-size: var(--t-base); text-align: center; padding: var(--s-5); }
.ai-chat {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--solid); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 .5px var(--line); overflow: hidden;
}
.ai-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.ai-head__back { display: none; border: none; background: none; color: var(--text); cursor: pointer; padding: var(--s-1); }
.ai-head__main { flex: 1; min-width: 0; }
.ai-head__title { margin: 0; font-size: var(--t-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-head__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); color: var(--text-dim); font-size: var(--t-sm); }
.ai-head__lock { display: inline-flex; align-items: center; gap: var(--s-1); }
.ai-head__queue { color: var(--warn-fg); }
.ai-head__people { flex: none; max-width: 40%; color: var(--text-dim); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ai-banners { display: flex; flex-direction: column; }
.ai-banner { padding: var(--s-2) var(--s-4); font-size: var(--t-sm); background: var(--warn-soft); color: var(--warn-fg); }
.ai-banner--unavailable, .ai-banner--off { background: var(--late-soft); color: var(--late-fg); }
.ai-banner--conn { background: var(--sunken); color: var(--text-dim); }
.ai-dlg .ai-banner { border-radius: var(--radius-sm); margin-bottom: var(--s-3); }

/* Лента */
.ai-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); overscroll-behavior: contain; }
.ai-empty { margin: auto; color: var(--text-faint); font-size: var(--t-sm); text-align: center; }
.ai-more { align-self: center; border: none; background: none; color: var(--accent-fg); font: inherit; font-size: var(--t-sm); cursor: pointer; padding: var(--s-1) var(--s-3); }
.ai-sys { align-self: center; padding: var(--s-1) var(--s-3); border-radius: var(--radius-full); background: var(--sunken); color: var(--text-dim); font-size: var(--t-sm); }

.ai-msg { display: grid; grid-template-columns: calc(var(--s-7) + var(--s-5)) minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: start; }
.ai-msg__who { grid-column: 1; font-size: var(--t-sm); font-weight: 600; color: var(--text-dim); padding-top: var(--s-05); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-msg--agent .ai-msg__who { color: var(--accent-fg); }
.ai-msg__main { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ai-msg__aside { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); }
.ai-msg__body { font-size: var(--t-base); line-height: 1.5; overflow-wrap: anywhere; }
.ai-msg__plain, .ai-msg__md { white-space: pre-wrap; }
.ai-msg__time { color: var(--text-faint); font-size: var(--t-2xs); font-variant-numeric: tabular-nums; }
.ai-msg__state { display: inline-flex; align-items: center; gap: var(--s-2); }
.ai-msg__revoked { color: var(--text-faint); font-style: italic; }
.ai-msg.is-revoked .ai-msg__body { opacity: .7; }
.ai-msg__note { font-size: var(--t-sm); color: var(--text-dim); }
.ai-msg__note--bad { color: var(--late-fg); }
.ai-msg.is-mine .ai-msg__who { color: var(--text); }

.ai-pill { display: inline-block; padding: 0 var(--s-2); border-radius: var(--radius-full); font-size: var(--t-xs); font-weight: 500; background: var(--sunken); color: var(--text-dim); }
.ai-pill--waiting { background: var(--warn-soft); color: var(--warn-fg); }
.ai-pill--running { background: var(--ok-soft); color: var(--ok-fg); }
.ai-pill--failed { background: var(--late-soft); color: var(--late-fg); }
.ai-link { border: none; background: none; padding: 0; font: inherit; font-size: var(--t-xs); color: var(--accent-fg); cursor: pointer; }

.ai-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ai-chip {
  display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; padding: var(--s-05) var(--s-2);
  border-radius: var(--radius-full); background: var(--sunken); color: var(--text-dim); font-size: var(--t-xs);
}
.ai-chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chip__mark { flex: none; }
.ai-chip--running .ai-chip__mark { width: var(--s-2); height: var(--s-2); border-radius: var(--radius-full); background: var(--ok); animation: ai-pulse 1.2s ease-in-out infinite; }
.ai-chip--error { background: var(--late-soft); color: var(--late-fg); }

.ai-typing { display: inline-flex; gap: var(--s-1); padding: var(--s-1) 0; }
.ai-typing i { width: var(--s-1); height: var(--s-1); border-radius: var(--radius-full); background: var(--text-faint); animation: ai-pulse 1s ease-in-out infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-typing i, .ai-row__dot.is-run, .ai-chip--running .ai-chip__mark { animation: none; } }

.ai-msg__files { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ai-file {
  display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-sm); background: var(--sunken); font-size: var(--t-sm); color: var(--text);
}
.ai-file--link { text-decoration: none; }
.ai-file--link:hover:where([data-hover="mouse"] *) { background: var(--hover); }
.ai-file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-file__size { flex: none; color: var(--text-faint); font-size: var(--t-xs); }
.ai-file__x { flex: none; display: inline-flex; border: none; background: none; padding: 0; color: var(--text-dim); cursor: pointer; }

/* Поле ввода */
.ai-compose { border-top: 1px solid var(--line); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.ai-compose__row { display: flex; align-items: flex-end; gap: var(--s-2); }
.ai-compose__text { flex: 1; min-width: 0; resize: none; min-height: var(--s-7); height: var(--s-7); max-height: 160px; line-height: 1.4; }
.ai-compose__btn { flex: none; display: inline-grid; place-items: center; width: var(--s-7); height: var(--s-7); border: none; background: none; color: var(--text-dim); cursor: pointer; border-radius: var(--radius); }
.ai-compose__btn:hover:where([data-hover="mouse"] *) { background: var(--hover); }
.ai-compose__btn:disabled { opacity: .4; cursor: default; }
.ai-compose__send { flex: none; height: var(--s-7); }
.ai-compose__send-ic { display: none; }
.ai-compose__files { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ai-compose__files:empty { display: none; }
.ai-compose__lock { padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--sunken); color: var(--text-dim); font-size: var(--t-sm); }
.ai-compose__stop { align-self: flex-start; }
.ai-notice { padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); color: var(--text-faint); font-size: var(--t-xs); }

/* Окно «Новый чат» */
.ai-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 40%, transparent); padding: var(--s-4); }
.ai-dlg { width: min(440px, 100%); max-height: 100%; overflow-y: auto; background: var(--solid); border-radius: var(--radius-lg); box-shadow: var(--sh-3); padding: var(--s-5); }
.ai-dlg__grip { display: none; }
.ai-dlg__title { margin: 0 0 var(--s-4); font-size: var(--t-lg); }
.ai-dlg__field { margin-bottom: var(--s-3); }
.ai-dlg__note { display: flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-4); color: var(--text-dim); font-size: var(--t-sm); }
.ai-dlg__actions { display: flex; justify-content: flex-end; gap: var(--s-2); }

/* Админка доступа */
.ai-admin { flex: 1; min-height: 0; overflow-y: auto; max-width: 760px; width: 100%; }
.ai-admin__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ai-admin__head h1 { margin: 0; font-size: var(--t-xl); }
.ai-admin__lead { color: var(--text-dim); font-size: var(--t-sm); margin: var(--s-2) 0 var(--s-4); }
.ai-admin__card { padding: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.ai-admin__line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; }
.ai-admin__line + .ai-admin__line { border-top: 1px solid var(--line); }
.ai-admin__hint { color: var(--text-dim); font-size: var(--t-sm); margin-top: var(--s-05); }
.ai-admin__num { width: 120px; flex: none; }
.ai-admin__search { width: 200px; }
.ai-admin__btns { display: flex; gap: var(--s-2); flex: none; }
.ai-admin__key { display: block; margin-top: var(--s-2); padding: var(--s-2); border-radius: var(--radius-sm); background: var(--sunken); font-family: var(--code); font-size: var(--t-xs); overflow-wrap: anywhere; }
.ai-users { display: flex; flex-direction: column; }
.ai-users__row { display: grid; grid-template-columns: minmax(0, 1fr) var(--s-7) 120px; align-items: center; gap: var(--s-4); padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.ai-users__row--head { color: var(--text-faint); font-size: var(--t-xs); border-top: none; }
.ai-users__who { display: flex; flex-direction: column; min-width: 0; }
.ai-users__who small { color: var(--text-faint); font-size: var(--t-xs); }
.ai-switch {
  position: relative; flex: none; width: var(--s-7); height: var(--s-5); border: none; border-radius: var(--radius-full);
  background: var(--line-2); cursor: pointer; transition: background var(--fast);
}
.ai-switch.is-on { background: var(--accent); }
.ai-switch__knob { position: absolute; top: var(--s-05); left: var(--s-05); width: calc(var(--s-5) - var(--s-1)); height: calc(var(--s-5) - var(--s-1)); border-radius: var(--radius-full); background: var(--solid); transition: transform var(--fast); }
.ai-switch.is-on .ai-switch__knob { transform: translateX(var(--s-5)); }

/* ── Телефон: список → чат на весь экран, «Новый чат» нижним листом ── */
@media (max-width: 760px) {
  .ai { display: block; padding: 0; height: calc(100dvh - 56px - var(--nav-h, 82px) - env(safe-area-inset-bottom)); }
  .ai-side { height: 100%; border-radius: 0; }
  .ai-pane { display: none; height: 100%; }
  .ai.is-chat .ai-side, .ai.is-admin .ai-side { display: none; }
  .ai.is-chat .ai-pane, .ai.is-admin .ai-pane { display: flex; }
  .ai-chat { border-radius: 0; box-shadow: none; }
  .ai-head { padding: var(--s-2) var(--s-3); }
  .ai-head__back { display: inline-flex; }
  .ai-head__people { display: none; }
  .ai-list { padding: var(--s-3); }
  .ai-msg { grid-template-columns: minmax(0, 1fr) auto; }
  .ai-msg__who { grid-column: 1 / -1; }
  .ai-msg__main { grid-column: 1; }
  .ai-msg__aside { grid-column: 2; grid-row: 2; }
  .ai-compose { padding: var(--s-2) var(--s-3); }
  .ai-compose__text { font-size: var(--t-field); }
  .ai-compose__send-word { display: none; }
  .ai-compose__send-ic { display: inline-flex; }
  .ai-compose__send { width: var(--s-7); padding: 0; justify-content: center; }
  .ai-notice { padding: var(--s-2) var(--s-3); }
  .ai-overlay { place-items: end center; padding: 0; }
  .ai-dlg { width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--s-4) var(--s-4) var(--s-5); }
  .ai-dlg__grip { display: block; width: var(--s-7); height: var(--s-1); margin: 0 auto var(--s-3); border-radius: var(--radius-full); background: var(--line-2); }
  .ai-admin { padding: var(--s-3); }
  .ai-admin__line { flex-wrap: wrap; }
  .ai-users__row { grid-template-columns: minmax(0, 1fr) var(--s-7) 88px; gap: var(--s-2); }
  .ai-admin__num { width: 88px; }
}