/* «Чат с ИИ» сотрудников (31.10.2026, frontend/js/chat.js): кнопка справа внизу и панель справа на всех страницах кабинета.
   Только токены styles.css — светлая и тёмная темы получаются сами, своих цветов здесь нет. Кегли — из шкалы t-* (12/13/15/18).
   Слой 95: выше содержимого, шапки (50) и сайдбара, ниже модалок (100+) и тостов (3000) — окно «Удалить чат?» встаёт поверх панели. */

.aic-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  display: inline-flex; align-items: center; gap: var(--sp-6);
  height: 44px; padding: 0 var(--sp-16) 0 var(--sp-12);
  border: 0; border-radius: var(--r-pill);
  background: var(--ac-600); color: var(--ac-fg);
  font: inherit; font-size: 13px; line-height: 18px; font-weight: 600;
  box-shadow: var(--sh-2); cursor: pointer;
  transition: background var(--dur-1);
}
.aic-fab:hover { background: var(--ac-700); }
.aic-fab:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--sh-2); }
.aic-fab .icon { width: 18px; height: 18px; }
body.aic-open .aic-fab { display: none; }
/* Тосты живут в том же углу — поднимаем их над кнопкой, а при открытой панели уводим левее неё */
body.aic-on .toast-container { bottom: 76px; }
@media (min-width: 700px) {
  body.aic-open .toast-container { bottom: 20px; right: 460px; }
  body.aic-open.aic-wide-on .toast-container { right: 780px; }
}

.aic-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: 440px; max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text-1);
  border-left: var(--bw) solid var(--line-2); box-shadow: var(--sh-3);
  font-size: 13px; line-height: 18px;
}
.aic-panel[hidden] { display: none; }
.aic-panel.aic-wide { width: 760px; }
.aic-panel.aic-drop { box-shadow: inset 0 0 0 2px var(--ac-500), var(--sh-3); }
@media (max-width: 699px) {
  .aic-panel, .aic-panel.aic-wide { width: 100vw; border-left: 0; }
  .aic-head .aic-wide-btn { display: none; }
}

/* ── шапка панели ── */
.aic-head {
  flex: none; display: flex; align-items: center; gap: var(--sp-2);
  height: var(--topbar-h); padding: 0 var(--sp-8);
  border-bottom: var(--bw) solid var(--line);
}
.aic-title {
  flex: 1; min-width: 0; padding: var(--sp-6) var(--sp-8);
  border: 0; border-radius: var(--r-ctl); background: none;
  font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-1);
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.aic-title:hover:not(:disabled) { background: var(--surface-2); }
.aic-title:disabled { cursor: default; }
.aic-ibtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-ctl); background: none; color: var(--text-2); cursor: pointer;
}
.aic-ibtn:hover { background: var(--surface-2); color: var(--text-1); }
.aic-ibtn .icon { width: 18px; height: 18px; }
.aic-ibtn[aria-pressed="true"] { background: var(--ac-50); color: var(--ac-600); }
.aic-ibtn:focus-visible, .aic-title:focus-visible, .aic-link:focus-visible, .aic-chip:focus-visible,
.aic-thumb:focus-visible, .aic-item-open:focus-visible, .aic-send:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.aic-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.aic-view[hidden] { display: none; }

/* ── список чатов ── */
.aic-list-search { flex: none; padding: var(--sp-12); border-bottom: var(--bw) solid var(--line); }
.aic-list-search input { padding: var(--sp-8) var(--sp-12); border-radius: var(--r-ctl); }
.aic-list-items { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-2); }
.aic-item { display: flex; align-items: center; gap: var(--sp-2); padding-right: var(--sp-4); border-radius: var(--r-ctl); }
.aic-item:hover, .aic-item-on { background: var(--surface-2); }
.aic-item-open {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--sp-8);
  padding: var(--sp-8); border: 0; border-radius: var(--r-ctl); background: none;
  font: inherit; color: var(--text-1); text-align: left; cursor: pointer;
}
.aic-item-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aic-item-date { flex: none; font-size: 12px; line-height: 16px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.aic-item-act { width: 28px; height: 28px; opacity: 0; }
.aic-item:hover .aic-item-act, .aic-item:focus-within .aic-item-act { opacity: 1; }
@media (hover: none) { .aic-item-act { opacity: 1; } }
.aic-list-foot { flex: none; padding: var(--sp-12); border-top: var(--bw) solid var(--line); }

/* ── расход по людям ── */
#aicUsage { padding: var(--sp-16); overflow-y: auto; gap: var(--sp-12); }
.aic-back { align-self: flex-start; }
.aic-back .icon { width: 14px; height: 14px; }
.aic-usage table { width: 100%; }
.aic-usage .aic-usage-total td { font-weight: 600; background: var(--surface-2); }

/* ── лента сообщений ── */
.aic-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-16); }
.aic-msg-user { align-self: flex-end; max-width: 85%; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-6); }
.aic-bubble {
  padding: var(--sp-8) var(--sp-12); border-radius: var(--r-card);
  background: var(--ac-50); color: var(--text-1);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.aic-msg-ai { align-self: stretch; min-width: 0; }
.aic-md { overflow-wrap: anywhere; line-height: 20px; }
.aic-md > :first-child { margin-top: 0; }
.aic-md > :last-child { margin-bottom: 0; }
.aic-md p, .aic-md ul, .aic-md ol, .aic-md blockquote, .aic-md hr, .aic-md .aic-code, .aic-md .aic-table { margin: 0 0 var(--sp-12); }
.aic-md ul, .aic-md ol { padding-left: 22px; }
.aic-md li + li { margin-top: var(--sp-4); }
.aic-md li > ul, .aic-md li > ol { margin: var(--sp-4) 0 0; }
.aic-md .aic-h { margin: var(--sp-16) 0 var(--sp-8); font-weight: 600; }
.aic-md .aic-h1 { font-size: 18px; line-height: 24px; }
.aic-md .aic-h2 { font-size: 15px; line-height: 20px; }
.aic-md .aic-h3 { font-size: 13px; line-height: 18px; }
.aic-md a { color: var(--ac-600); }
.aic-md blockquote { padding-left: var(--sp-12); border-left: 3px solid var(--line-3); color: var(--text-2); }
.aic-md hr { border: 0; border-top: var(--bw) solid var(--line-2); }
.aic-md code {
  padding: 1px var(--sp-4); border-radius: var(--r-xs); background: var(--surface-3);
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; font-size: 12px;
}
.aic-code { border: var(--bw) solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); overflow: hidden; }
.aic-code-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
  padding: var(--sp-4) var(--sp-8); border-bottom: var(--bw) solid var(--line);
  font-size: 12px; line-height: 16px; color: var(--text-3);
}
.aic-code pre { margin: 0; padding: var(--sp-12); overflow-x: auto; }
.aic-code pre code { padding: 0; background: none; white-space: pre; line-height: 18px; }
.aic-table { overflow-x: auto; }
.aic-table table { border-collapse: collapse; }
.aic-table th, .aic-table td { height: auto; padding: var(--sp-6) var(--sp-8); border: var(--bw) solid var(--line-2); line-height: 18px; text-align: left; vertical-align: top; }
.aic-table th { background: var(--surface-2); font-weight: 600; }
.aic-table .aic-r { text-align: right; font-variant-numeric: tabular-nums; }
.aic-table .aic-c { text-align: center; }

.aic-msg-tools { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-6); }
.aic-link {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  padding: 0; border: 0; border-radius: var(--r-xs); background: none;
  font: inherit; font-size: 12px; line-height: 16px; color: var(--text-3); cursor: pointer;
}
.aic-link:hover { color: var(--ac-600); }
.aic-muted { font-size: 12px; line-height: 16px; color: var(--text-3); }
.aic-note { margin: var(--sp-6) 0 0; font-size: 12px; line-height: 16px; color: var(--text-3); }
.aic-typing { display: inline-flex; align-items: center; gap: var(--sp-6); color: var(--text-3); }
.aic-dots { display: inline-flex; gap: 3px; }
.aic-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: aic-blink var(--dur-4) infinite ease-in-out; }
.aic-dots i:nth-child(2) { animation-delay: .2s; }
.aic-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes aic-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aic-dots i { animation: none; opacity: .6; } }

/* вложения в сообщениях */
.aic-msg-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-6); }
.aic-thumb { padding: 0; border: var(--bw) solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); overflow: hidden; cursor: zoom-in; }
.aic-thumb img { display: block; width: 96px; height: 96px; object-fit: cover; }
.aic-thumb.aic-thumb-big { cursor: zoom-out; }
.aic-thumb.aic-thumb-big img { width: auto; height: auto; max-width: 100%; max-height: 360px; object-fit: contain; }
.aic-chip {
  display: inline-flex; align-items: center; gap: var(--sp-6); max-width: 100%;
  padding: var(--sp-6) var(--sp-8); border: var(--bw) solid var(--line-2); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--text-1); font: inherit; cursor: pointer;
}
.aic-chip:disabled { cursor: default; }
.aic-chip .icon { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.aic-chip span:not(.aic-muted) { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* пустой чат и плашка под лентой */
.aic-empty { margin: auto 0; padding: var(--sp-24) var(--sp-8); color: var(--text-2); }
.aic-empty p { margin: 0 0 var(--sp-8); }
.aic-empty-title { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text-1); }
.aic-banner {
  flex: none; margin: 0 var(--sp-12) var(--sp-8); padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-ctl); background: var(--surface-2); color: var(--text-2);
  box-shadow: inset 3px 0 0 var(--warn-500);
}
.aic-banner[hidden] { display: none; }

/* ── поле ввода ── */
.aic-compose {
  flex: none; margin: 0 var(--sp-12) var(--sp-12);
  border: var(--bw) solid var(--line-2); border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--sh-1);
}
.aic-compose:focus-within { border-color: var(--ac-600); }
.aic-compose textarea {
  display: block; max-height: 200px; padding: var(--sp-12) var(--sp-12) var(--sp-4);
  border: 0; border-radius: var(--r-card); background: transparent; resize: none; line-height: 20px;
}
.aic-compose textarea:focus { border: 0; box-shadow: none; }
.aic-files { display: flex; flex-wrap: wrap; gap: var(--sp-6); padding: var(--sp-8) var(--sp-8) 0; }
.aic-files:empty { display: none; }
.aic-pick {
  display: inline-flex; align-items: center; gap: var(--sp-6); max-width: 100%;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  border: var(--bw) solid var(--line-2); border-radius: var(--r-ctl); background: var(--surface-2);
  font-size: 12px; line-height: 16px;
}
.aic-pick img { width: 28px; height: 28px; border-radius: var(--r-xs); object-fit: cover; }
.aic-pick > .icon { width: 16px; height: 16px; color: var(--text-3); }
.aic-pick span { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aic-pick .aic-ibtn { width: 22px; height: 22px; }
.aic-pick .aic-ibtn .icon { width: 14px; height: 14px; }
.aic-bar { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-4) var(--sp-8) var(--sp-8); }
.aic-model { width: auto; max-width: 220px; height: 30px; padding: 0 var(--sp-6); border-radius: var(--r-ctl); font-size: 12px; color: var(--text-2); }
.aic-limit { flex: 1; min-width: 0; text-align: right; font-size: 12px; line-height: 16px; color: var(--text-3); }
.aic-limit-full { color: var(--bad-ink); }
.aic-send {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: var(--ac-600); color: var(--ac-fg); cursor: pointer;
}
.aic-send:hover { background: var(--ac-700); }
.aic-send .icon { width: 18px; height: 18px; }
.aic-send.aic-send-stop { background: var(--text-1); color: var(--surface); }
.aic-send.aic-send-stop:hover { background: var(--text-2); }