/* :root, глобальный ресет (*, html/body, body), .hidden и весь экран логина
   (.login-*) переехали в css/tokens.css и css/shared.css (Шаг 35) — общие
   для клиентского чата и бэк-офиса, см. docs/CSS_AUDIT_STEP35.md. */

.app-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* .header-actions — обёртка вокруг .admin-link + .usage-widget (Шаг 37):
   margin-left:auto здесь, а не на .admin-link — та скрывается для ролей без
   gating-прав (Шаг 36), и вместе с ней раньше пропадал единственный
   источник выталкивания правого блока шапки вправо (.usage-widget
   схлопывался к .header-text). Источник выравнивания больше не зависит от
   видимости конкретной кнопки внутри группы. */
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.admin-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.admin-link:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}

/* ---------- Шапка ---------- */

.app-header {
  padding: 24px 40px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.header-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(91, 110, 245, 0.12), rgba(217, 119, 87, 0.08));
  flex-shrink: 0;
}

.header-logo {
  height: 28px;
  width: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.header-text {
  display: flex;
  flex-direction: column;
}

.app-header h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

.subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.subtitle .dot {
  color: var(--color-border);
  margin: 0 2px;
}

/* .logout-button (база + :hover) — переехал в css/shared.css (Шаг 35),
   общий с бэк-офисом. См. .sidebar-footer .logout-button ниже — там
   осознанно другой (клиентский) hover-стиль поверх общей базы. */

/* ---------- Кнопка расходов + попап ---------- */

.usage-widget {
  position: relative;
  flex-shrink: 0;
}

.usage-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.usage-toggle:hover {
  border-color: var(--accent-primary);
}

.usage-toggle-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.usage-toggle-chevron {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.usage-toggle[aria-expanded="true"] .usage-toggle-chevron {
  transform: rotate(180deg);
}

.usage-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 400px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-dropdown);
  border: 1px solid var(--color-border);
  padding: 24px 24px 20px;
  z-index: 20;
}

.usage-calendar-button {
  margin-top: 18px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.usage-calendar-button:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.usage-calendar-button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.usage-dropdown.hidden {
  display: none;
}

/* Шаг 27: переключатель периода «Этот месяц» / «Всё время» — pill-группа
   в духе остальных мелких контролов проекта (активная вкладка — белый фон
   + мягкая тень, как активные элементы в других местах), вместо прежней
   статичной подписи периода. */
.usage-period-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 3px;
  background: var(--color-surface-hover);
  border-radius: var(--radius-md);
}

.usage-period-tab {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.usage-period-tab:hover {
  color: var(--color-text);
}

.usage-period-tab.active {
  background: var(--color-surface);
  color: var(--accent-primary);
  box-shadow: var(--shadow-soft);
}

.usage-dropdown h3 {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.usage-totals {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.usage-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.usage-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-unknown-bg);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.usage-stat-icon svg {
  width: 15px;
  height: 15px;
}

.usage-stat-icon--calls {
  background: #eef2ff;
  color: #6366f1;
}

.usage-stat-icon--in {
  background: #ecfdf5;
  color: var(--color-success-client);
}

.usage-stat-icon--out {
  background: #eff6ff;
  color: #3b82f6;
}

.usage-stat-icon--cost,
.usage-stat--highlight .usage-stat-icon {
  background: #eef0fe;
  color: var(--accent-primary);
}

.usage-label {
  color: var(--color-text-muted);
  flex: 1;
}

.usage-value {
  font-weight: 600;
}

.usage-stat--highlight .usage-value {
  color: var(--accent-primary);
  font-size: 15px;
}

.usage-by-provider {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f7f8fb;
  border-radius: var(--radius-md);
  padding: 16px;
}

.provider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 2px 0;
}

.provider-row-detail {
  color: var(--color-text-muted);
}

.empty-state-small {
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  margin: 8px 0 0;
}

/* ---------- Основная область ---------- */

.app-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  width: 100%;
  /* Приоритет 1, п.4: нижний отступ был 40px — таким же, как боковые, из-за
     чего под сайдбаром/панелью чата оставалось заметно больше пустого
     пространства, чем сверху (там его "съедает" .app-header). Уменьшено
     вдвое по прямому запросу. */
  padding: 0 40px 20px;
  max-width: 1420px;
  margin: 0 auto;
  gap: 20px;
}

/* ---------- Сайдбар чатов (новое, Шаг 9.5) ---------- */

.conversation-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Блок пользователя внизу сайдбара (новое) ----------
   margin-top: auto — сайдбар уже flex-column (см. выше), поэтому этот блок
   поднимается к самому низу, а «Новый чат» + список чатов остаются
   упакованы сверху без дополнительной обёртки. Тот же дизайн и те же
   классы, что и в бэк-офисе (admin.css) — единственная разница в
   .sidebar-user-role: сотруднику не показывается название роли (roleless
   для employee было бы просто "employee"), поэтому там она скрыта, если
   пуста — см. JS. */
/* .sidebar-footer: общая раскладка (margin-top/padding-top/display/gap) —
   в css/shared.css. border-top и box-shadow ниже — сознательно другие, чем
   в бэк-офисе (см. docs/CSS_AUDIT_STEP35.md, §4), оставлены как локальное
   расширение того же класса, не как повторное объявление с нуля. */
.sidebar-footer {
  /* По просьбе пользователя: сплошной border-top на var(--color-border)
     слишком явно отделял блок — осветлён до полупрозрачного, того же тона,
     что и мягкая градиентная тень выше (rgba(30, 32, 60, ...)). Изначально
     стояло 0.1 — по повторной просьбе (граница всё ещё слишком заметна)
     снижено до 0.06, как у самого градиента. */
  border-top: 1px solid var(--color-border-subtle);
  /* Пункт 3, Шаг 27 (повторная правка): раньше тень была ::before —
     прямоугольник с вертикальным градиентом, из-за резких вертикальных
     краёв слева/справа смотрелся как ровная горизонтальная линия, а не как
     тень. Заменено на box-shadow с отрицательным spread (стягивает тень
     внутрь со всех сторон, включая левый/правый край — от этого она
     выглядит скруглённой/облачной, а не прямоугольной) и большим blur —
     настоящая мягкая тень, приподнимающая блок над списком переписок. */
  box-shadow: 0 -10px 14px -6px rgba(30, 32, 60, 0.10);
}

/* .sidebar-user, .sidebar-user-info, .sidebar-user-avatar, .sidebar-user-email,
   .sidebar-user-role — переехали в css/shared.css (Шаг 35), идентичны
   бэк-офису. */

.sidebar-footer .logout-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* По прямому запросу: иконка и текст кнопки «Выйти» окрашены в красный —
     тот же тон, что уже используется для опасных действий в проекте
     (.conversation-item-menu-option--danger, «Удалить»), для единообразия. */
  color: var(--color-danger);
  transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.sidebar-footer .logout-button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sidebar-footer .logout-button:hover {
  transform: translateY(-1px);
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.new-chat-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  /* По прямому запросу: иконка и текст — зелёные (тот же тон, что уже
     используется в проекте для позитивных/входящих значений, например
     .usage-stat-icon--in). */
  color: var(--color-success-client);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.new-chat-button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.new-chat-button:hover {
  border-color: var(--color-success-client);
  color: var(--color-success-client);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(16, 185, 129, 0.28), 0 1px 3px rgba(30, 32, 60, 0.04);
}

.new-chat-button:active {
  transform: translateY(0);
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Отступы между элементами теперь задаёт .conversation-separator (по 16px
     сверху и снизу от самой полоски) — без gap здесь, иначе отступ удвоится. */
}

.conversation-separator {
  width: 56px;
  height: 1px;
  background: var(--color-border);
  /* Пункт 1, Шаг 27: было 16px auto — по прямому запросу уменьшено до 8px,
     список переписок стал заметно компактнее. */
  margin: 8px auto;
  flex-shrink: 0;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
}

.conversation-item:hover {
  background: var(--color-surface-hover);
}

.conversation-item.active {
  background: #eef0fe;
  color: var(--accent-primary);
  font-weight: 600;
}

.conversation-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Пункт 2, Шаг 27: обёртка «иконка-булит + заголовок», чтобы каждый элемент
   списка переписок был визуально выделен маркером — по прямому запросу
   пользователя, не только текстом. Обёртка нужна, т.к. .conversation-item-title
   сама растягивается на всю ширину (flex:1) — иконка ставится перед ней в
   отдельном flex-контейнере. */
.conversation-item-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

/* Пункт 2, Шаг 27 (правка по референсу): вместо иконки чата — простое
   маленькое кольцо (border-radius circle с прозрачным центром), лёгкий
   акцентный оттенок, малозаметное. Реализовано чистым CSS (border), без
   svg — легче и предсказуемее выравнивается по центру строки. */
.conversation-item-bullet {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--accent-primary);
  opacity: 0.35;
  background: transparent;
}

.conversation-item.active .conversation-item-bullet {
  opacity: 0.75;
}

.conversation-item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.conversation-item-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-item-meta strong {
  font-weight: 700;
}

.conversation-item.active .conversation-item-meta {
  color: var(--accent-primary);
  opacity: 0.75;
}

.conversation-item-meta svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.conversation-item-title-input {
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-family: inherit;
}

.conversation-item-action {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.1s ease, background 0.1s ease, color 0.1s ease;
}

.conversation-item:hover .conversation-item-action {
  opacity: 1;
}

/* Приоритет 1, п.3: кнопка «⋮» теперь единственная — красная подсветка на
   hover (раньше была у кнопки удаления) больше не подходит ей самой,
   красный акцент переехал на пункт «Удалить» внутри выпадающего меню
   (.conversation-item-menu-option--danger, см. ниже). */
.conversation-item-menu-button:hover {
  color: var(--accent-primary);
  background: #eef0fe;
}

.conversation-item-action svg {
  width: 18px;
  height: 18px;
}

.conversation-item-menu-button svg {
  width: 16px;
  height: 16px;
}

/* ---------- Приоритет 1, п.3: меню «⋮» (Переименовать/Удалить) ---------- */

.conversation-item-actions {
  position: relative;
  flex-shrink: 0;
}

.conversation-item-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 172px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.conversation-item-menu.hidden {
  display: none;
}

.conversation-item-menu-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.conversation-item-menu-option svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.conversation-item-menu-option:hover {
  background: var(--color-surface-hover);
}

.conversation-item-menu-option--danger {
  color: var(--color-danger);
}

.conversation-item-menu-option--danger svg {
  color: var(--color-danger);
}

.conversation-item-menu-option--danger:hover {
  background: var(--color-danger-bg);
}

/* ---------- Приоритет 1, п.3: модалка «Переименовать чат» ---------- */

.rename-modal-title {
  margin: 0 0 16px;
  font-size: 17px;
  padding-right: 28px;
}

.rename-conversation-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rename-conversation-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.rename-conversation-input:focus {
  border-color: var(--accent-primary);
}

.rename-conversation-submit {
  flex-shrink: 0;
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-soft));
  color: white;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(91, 110, 245, 0.55);
}

.rename-conversation-submit:hover {
  opacity: 0.92;
}

/* ---------- Панель чата ---------- */

.chat-panel {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.conversation-header-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.conversation-title {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-date {
  font-size: 12px;
  color: var(--color-text-muted);
  min-height: 15px;
}

/* ---------- Кнопки «i» и попап с информацией (новое) ---------- */

.info-button {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.info-button:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* Приоритет 1, п.5: раньше margin-left:12px был на самой кнопке «i» (она
   была единственной) — теперь рядом с ней кнопка «файлы», расстояние между
   обеими и отступ от заголовка чата задаёт общий .conversation-header-actions. */
.conversation-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  flex-shrink: 0;
}

.conversation-files-button svg {
  width: 12px;
  height: 12px;
}

.message-info-button {
  flex-shrink: 0;
}

.info-popover {
  position: fixed;
  min-width: 210px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  padding: 14px 16px;
  font-size: 13px;
  z-index: 120;
}

.info-popover.hidden {
  display: none;
}

.info-popover-title {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.info-popover-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 3px 0;
}

.info-popover-label {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.info-popover-value {
  font-weight: 600;
  white-space: nowrap;
}

.chat-window {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  /* Шаг 24.5: position:relative — точка отсчёта для #drop-overlay
     (position:absolute, inset:0), который появляется поверх при
     перетаскивании файла с компьютера (см. app.js, dragenter/drop). */
  position: relative;
  /* Шаг 23.3: браузерный scroll anchoring (автокоррекция scrollTop, когда
     контент выше по потоку меняет размер, — задумана, чтобы избежать
     "прыжков" при подгрузке контента) может конфликтовать с НАШИМ явным
     скроллом к началу нового сообщения (см. appendMessage в app.js) —
     отключаем здесь, чтобы поведение было предсказуемым и полностью под
     контролем JS, а не эвристики браузера. */
  overflow-anchor: none;
}

.chat-window:has(.empty-state) {
  justify-content: center;
  align-items: center;
}

/* Шаг 23.3: круглая кнопка "к последнему сообщению" — position:absolute
   относительно .chat-input-row (формы ввода, см. правку выше), НЕ
   относительно .chat-window (тот сам scroll-контейнер, overflow-y:auto —
   кнопка ехала бы вместе с содержимым при скролле, если бы была его
   потомком). bottom:100% ставит нижний край кнопки ровно на верхнюю границу
   формы, margin-bottom даёт зазор до этой линии — сознательно равный
   right (тот же 24px), чтобы отступ сверху и справа читался одинаково. */
.scroll-to-bottom-button {
  position: absolute;
  right: 24px;
  bottom: 100%;
  margin-bottom: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-dropdown);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.scroll-to-bottom-button svg {
  width: 18px;
  height: 18px;
}

.scroll-to-bottom-button:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.scroll-to-bottom-button.hidden {
  display: none;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 380px;
  line-height: 1.5;
}

.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(91, 110, 245, 0.12), rgba(217, 119, 87, 0.08));
  color: var(--accent-primary);
}

.empty-state-icon svg {
  width: 30px;
  height: 30px;
}

.empty-state-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.empty-state-text {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.empty-state-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.empty-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.empty-state-dot--claude {
  background: var(--color-claude);
}

.empty-state-dot--gemini {
  background: var(--color-gemini);
}

.empty-state-dot--groq {
  background: var(--color-groq);
}

.message-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.message-row--user {
  justify-content: flex-end;
}

.message-row--assistant {
  justify-content: flex-start;
}

.message-row--error {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* Шаг 23.2: системное сообщение "история чата сжата" — по просьбе
   пользователя оформлено НЕНАВЯЗЧИВО: маленькая серая плашка по центру
   строки, без цветового акцента (в отличие от .message-row--error выше),
   чтобы не читаться как предупреждение или проблема. Кликабельна — по клику
   разворачивается сам текст резюме через infoPopover (тот же компонент,
   что у кнопки «i» под ответами модели). */
.message-row--summary {
  justify-content: center;
  margin-bottom: 10px;
}

.info-button.summary-pill {
  width: auto;
  height: auto;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-color: var(--color-border);
}

.info-button.summary-pill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.summary-popover-text {
  margin: 0;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap;
}

.message-stack {
  display: flex;
  flex-direction: column;
  /* width: fit-content — ширина стека равна ширине САМОГО ШИРОКОГО ребёнка
     (то есть пузыря с текстом), max-width её ограничивает сверху. Именно
     благодаря этому строка с датой/бейджем ниже (align-items: stretch по
     умолчанию — намеренно НЕ переопределяем на flex-start/flex-end) точно
     совпадает по ширине с пузырём и бейдж можно прижать к его правому краю. */
  width: fit-content;
  max-width: 75%;
  min-width: 0;
}

.message-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 0 3px;
}

.message-meta-row--user {
  justify-content: flex-end;
}

/* Приоритет 1, п.6: дата и кнопка «Скопировать» сгруппированы в отдельный
   flex-контейнер СО СВОИМ gap:16px (запрошенный отступ именно между ними) —
   если бы кнопку просто добавили ещё одним ребёнком .message-meta-row, она
   унаследовала бы общий gap:8px этой строки, а не 16px. Порядок детей внутри
   определяет видимый порядок: для ассистента — [дата, кнопка], кнопка правее
   даты; для пользователя — [кнопка, дата] пары внутри строки с
   justify-content:flex-end, то есть кнопка читается левее даты (см. app.js,
   appendMessage). */
.message-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.message-copy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

.message-copy-button svg {
  width: 13px;
  height: 13px;
}

.message-copy-button:hover {
  color: var(--accent-primary);
  background: #eef0fe;
}

.message-copy-button.copied {
  color: #1a9c6b;
}

.message-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.message-timestamp {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-timestamp strong {
  font-weight: 700;
}

.message-timestamp svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.bubble {
  max-width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.bubble--user {
  background: var(--accent-primary);
  color: white;
  border-bottom-right-radius: 4px;
}

.bubble--assistant {
  background: var(--color-surface-hover);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}

/* ---------- Индикатор «модель отвечает» (новое) ---------- */

.bubble--typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 16px;
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
  opacity: 0.4;
  animation: typing-dot-bounce 1.1s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing-dot-bounce {

  0%,
  60%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dot {
    animation: none;
    opacity: 0.6;
  }
}

/* ---------- Markdown внутри ответа ассистента (новое) ---------- */

.bubble--markdown {
  white-space: normal;
}

.bubble--markdown>*:first-child {
  margin-top: 0;
}

.bubble--markdown>*:last-child {
  margin-bottom: 0;
}

.bubble--markdown p {
  margin: 0 0 10px;
}

.bubble--markdown h1,
.bubble--markdown h2,
.bubble--markdown h3,
.bubble--markdown h4,
.bubble--markdown h5,
.bubble--markdown h6 {
  margin: 14px 0 8px;
  line-height: 1.3;
  font-weight: 700;
}

.bubble--markdown h1 {
  font-size: 19px;
}

.bubble--markdown h2 {
  font-size: 17px;
}

.bubble--markdown h3 {
  font-size: 15.5px;
}

.bubble--markdown h4,
.bubble--markdown h5,
.bubble--markdown h6 {
  font-size: 14px;
}

.bubble--markdown ul,
.bubble--markdown ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.bubble--markdown li {
  margin: 3px 0;
}

.bubble--markdown li>ul,
.bubble--markdown li>ol {
  margin: 3px 0;
}

.bubble--markdown strong {
  font-weight: 700;
}

.bubble--markdown a {
  color: var(--accent-primary);
  text-decoration: underline;
  word-break: break-word;
}

.bubble--user .bubble--markdown a,
.bubble--user a {
  color: inherit;
  text-decoration: underline;
}

.bubble--markdown code {
  font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 12.5px;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

.bubble--markdown pre.msg-code-block {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #292c34;
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.bubble--markdown pre.msg-code-block code {
  background: none;
  padding: 0;
  color: #e6e6e6;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre;
}

/* ---------- Приоритет 1, п.7: Mermaid-диаграммы ---------- */
/* До рендера (mermaid.run() ещё не отработал, см. app.js,
   renderMermaidBlocks) — здесь лежит сырой текст диаграммы как есть, тот же
   моноширинный стиль, что и у обычного блока кода, чтобы не мигало пустым
   местом на долю секунды между вставкой markdown'а в DOM и рендером SVG.
   После рендера mermaid.js сам заменяет содержимое узла на <svg> — стили
   ниже (overflow-x, text-align) относятся уже к этому финальному состоянию. */
.bubble--markdown .mermaid {
  display: block;
  margin: 0 0 10px;
  padding: 14px;
  background: #f7f7fa;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--color-text-muted);
  white-space: pre;
}

.bubble--markdown .mermaid svg {
  max-width: 100%;
  height: auto;
}

.bubble--markdown blockquote {
  margin: 0 0 10px;
  padding: 4px 12px;
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted);
}

.bubble--markdown hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 12px 0;
}

.bubble--markdown table.msg-table {
  border-collapse: collapse;
  margin: 0 0 10px;
  font-size: 12.5px;
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

.bubble--markdown table.msg-table th,
.bubble--markdown table.msg-table td {
  border: 1px solid var(--color-border);
  padding: 5px 9px;
  text-align: left;
}

.bubble--markdown table.msg-table th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 700;
}

.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.badge-claude {
  background: var(--color-claude-bg);
  color: var(--color-claude);
}

.badge-gemini {
  background: var(--color-gemini-bg);
  color: var(--color-gemini);
}

.badge-groq {
  background: var(--color-groq-bg);
  color: var(--color-groq);
}

.badge-unknown {
  background: var(--color-unknown-bg);
  color: var(--color-unknown);
}

/* Шаг 38: тег «Бесплатно» — переиспользует .badge (тот же визуальный язык,
   что и провайдерские бейджи выше), просто новая цветовая роль вместо
   провайдера. rgba(16, 185, 129, 0.12) — тот же зелёный, что
   --color-success-client (0.12 — своя лёгкая заливка под тег, отдельного
   токена для неё не заводилось, см. docs/CSS_AUDIT_STEP35.md о частичной
   токенизации). */
.badge-free {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success-client);
}

/* Приоритет 1, п.1: форма теперь колонка — #attachment-panel сверху,
   .chat-input-row-inner (прежний плоский ряд пикер/кнопка/textarea/отправка)
   снизу. Раньше .chat-input-row САМА была этим плоским рядом; вложенность
   понадобилась, чтобы вертикально уложить панель вложений НАД строкой ввода,
   но не ломая её внутреннюю горизонтальную раскладку. */
.chat-input-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  /* Шаг 23.3 (правка): точка отсчёта для .scroll-to-bottom-button
     (position:absolute, bottom:100%) — кнопка теперь внутри формы (см.
     index.html), это даёт зазор до border-top ровно margin-bottom, а не
     "на глаз" от нижнего края всей .chat-panel, как было изначально.
     bottom:100% отсчитывается от верхней границы САМОЙ формы независимо от
     того, что теперь внутри неё несколько блоков по вертикали — колоночная
     раскладка формы на это не влияет. */
  position: relative;
}

.chat-input-row-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Единая высота по умолчанию (44px) для селектора модели, поля ввода и
   кнопки отправки — раньше все три считались из своих собственных
   padding/font-size и визуально «гуляли». Теперь она задаётся явным
   min-height + box-sizing:border-box на всех трёх, а не подгонкой
   padding «на глаз». Шаг 24.4: .attachment-button добавлена в тот же
   список — та же логика, четвёртый элемент строки ввода. */
#message-input,
.model-picker-toggle,
.attachment-button,
#send-button {
  min-height: 44px;
  box-sizing: border-box;
}

#message-input {
  flex: 1;
  max-height: 160px;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  resize: none;
  overflow-y: auto;
}

#message-input:focus {
  border-color: var(--accent-primary);
}

.model-picker {
  position: relative;
  flex-shrink: 0;
  /* Прибит к верху строки ввода даже когда textarea вырастает на
     несколько строк — align-items:flex-start у родителя (.chat-input-row)
     уже это обеспечивает, align-self здесь для явности/устойчивости к
     будущим правкам родителя. */
  align-self: flex-start;
}

/* Пункт 4, Шаг 27: оценка стоимости («от ~0.100 ₽ (оценка)») — абсолютное
   позиционирование под кнопкой выбора модели, а не в обычном потоке.
   Раньше это был span сразу после .model-picker-toggle (display:flex,
   блочный уровень) — переносился на новую строку и раздувал высоту всей
   .chat-input-row-inner при появлении текста. Теперь висит под кнопкой,
   не задевая раскладку остальных элементов строки ввода. */
.cost-preview {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.model-picker-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  cursor: pointer;
  white-space: nowrap;
}

.model-picker-toggle:hover {
  border-color: var(--accent-primary);
}

.model-picker-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.model-picker-toggle[aria-expanded="true"] {
  border-color: var(--accent-primary);
}

.model-picker-chevron {
  width: 13px;
  height: 13px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.model-picker-toggle[aria-expanded="true"] .model-picker-chevron {
  transform: rotate(180deg);
}

.model-picker-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-text-muted);
}

.model-picker-dot[data-provider="auto"] {
  background: var(--accent-primary);
}

.model-picker-dot[data-provider="claude"] {
  background: var(--color-claude);
}

.model-picker-dot[data-provider="gemini"] {
  background: var(--color-gemini);
}

.model-picker-dot[data-provider="groq"] {
  background: var(--color-groq);
}

.model-picker-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 230px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-dropdown);
  border: 1px solid var(--color-border);
  padding: 6px;
  list-style: none;
  margin: 0;
  z-index: 20;
}

.model-picker-menu.hidden {
  display: none;
}

.model-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
}

.model-picker-option:hover {
  background: #f4f5f9;
}

.model-picker-option-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.model-picker-option-title {
  font-weight: 600;
  color: var(--color-text);
}

.model-picker-option-hint {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Шаг 38: тег «Бесплатно» — своя строка под названием модели (как у
   «Авто»/«автовыбор» — .model-picker-option-hint), а не в одну строку с
   названием, чтобы не переноситься/не наезжать на галочку выбора при
   длинных именах моделей (меню узкое, 230px, см. .model-picker-menu). */
.model-picker-option-free {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 10px;
  padding: 2px 7px;
}

/* На самой кнопке (не в пункте меню) тег — в общем ряду с лейблом/шевроном,
   не под названием (там нет второй строки) — align-self:flex-start выше не
   подходит для этого контекста, центрируем по вертикали как остальные
   дети .model-picker-toggle. */
.model-picker-toggle .model-picker-option-free {
  align-self: center;
  margin-top: 0;
}

.model-picker-check {
  width: 15px;
  height: 15px;
  color: var(--accent-primary);
  flex-shrink: 0;
  visibility: hidden;
}

.model-picker-option.selected .model-picker-check {
  visibility: visible;
}

#send-button {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-soft));
  color: white;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(91, 110, 245, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

#send-button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

#send-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(91, 110, 245, 0.6);
}

#send-button:hover:not(:disabled) svg {
  transform: translateX(2px);
}

#send-button:active:not(:disabled) {
  transform: translateY(0);
}

#send-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Модалка «Календарь расходов» (новое) ---------- */

/* .modal-overlay/.modal-box: базовые правила — в css/shared.css (Шаг 35).
   Ниже — только клиентское расширение: свой z-index/фон оверлея (осознанно
   не объединён с бэк-офисом, см. docs/CSS_AUDIT_STEP35.md §4) и свой размер.
   padding — НЕ здесь (Шаг 39: именно так этот padding в третий раз протёк в
   модалки бэк-офиса — .modal-box в этом файле применялся безусловно, а
   admin/index.html всё ещё подключает style.css). У клиентских модалок нет
   .modal-header/.modal-body/.modal-footer — содержимое лежит прямо в
   .modal-box, ему нужен явный padding, но только там, где это отмечено
   модификатором .modal-box--padded в разметке (index.html), а не для
   .modal-box вообще. */
.modal-overlay {
  background: rgba(20, 20, 26, 0.45);
  z-index: 200;
}

.modal-box {
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-box--padded {
  padding: 28px 32px 26px;
}

.modal-close-button {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.modal-close-button:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.calendar-modal-title {
  margin: 0;
  font-size: 17px;
  /* Пункт 3, Шаг 27: заголовок теперь содержит иконку календаря + текст в
     отдельном <span> — выравниваем в строку. */
  display: flex;
  align-items: center;
  gap: 9px;
}

.calendar-modal-title svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--accent-primary);
}

.calendar-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-right: 28px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-nav button {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.calendar-nav button:active {
  transform: translateY(1px);
}

.calendar-nav button:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.calendar-nav button svg {
  width: 15px;
  height: 15px;
}

.calendar-month-label {
  font-weight: 700;
  font-size: 14px;
  min-width: 130px;
  text-align: center;
}

/* Пункт 4, Шаг 27: раньше .calendar-summary был обычным серым текстом
   ("Итого за месяц: 41.09 ₽ · 276471 токенов · 114 сообщений") — по прямому
   запросу пользователя переоформлено в ряд цветных пилюль с иконками,
   переиспользуя ту же цветовую палитру, что уже задействована в дропдауне
   «Расход» (.usage-stat-icon--cost/in/out), чтобы стиль был узнаваемым и
   единообразным по всему проекту. Сама разметка (span'ы) собирается в JS —
   см. renderCalendarMonth() в app.js. */
.calendar-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px;
}

.calendar-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-xl);
  font-size: 12.5px;
  font-weight: 700;
}

.calendar-summary-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.calendar-summary-item--cost {
  background: #eef0fe;
  color: var(--accent-primary);
}

.calendar-summary-item--tokens {
  background: #eff6ff;
  color: #3b82f6;
}

.calendar-summary-item--messages {
  background: #eef2ff;
  color: #6366f1;
}

.calendar-summary-loading,
.calendar-summary-error {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* .calendar-grid — переехал в css/shared.css (Шаг 35), идентичен бэк-офису. */

#calendar-days {
  margin-top: 6px;
}

.calendar-weekday {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 2px;
}

.calendar-day {
  min-height: 84px;
  border-radius: var(--radius-sm);
  background: #f7f8fb;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}

.calendar-day.empty {
  background: transparent;
}

.calendar-day-number {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}

.calendar-day-tokens {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calendar-day-token {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--color-text-muted);
}

.calendar-day-token svg {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.calendar-day-token--in svg {
  color: var(--color-success-client);
}

.calendar-day-token--out svg {
  color: #3b82f6;
}

/* .calendar-day-cost: общая база (font-size/font-weight/align-self) — в
   css/shared.css. Цвет — клиентское расширение, у бэк-офиса другой (см.
   docs/CSS_AUDIT_STEP35.md §2). */
.calendar-day-cost {
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
}

.calendar-day.intense .calendar-day-number,
.calendar-day.intense .calendar-day-cost,
.calendar-day.intense .calendar-day-token {
  color: #ffffff;
}

.calendar-day.intense .calendar-day-token svg {
  color: #ffffff;
}

.calendar-loading,
.calendar-error {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 24px 0;
}

.calendar-error {
  color: var(--color-danger);
}

@media (max-width: 800px) {
  .modal-box--padded {
    padding: 22px 18px 20px;
  }

  .calendar-day {
    min-height: 66px;
    padding: 6px 6px;
  }

  .calendar-day-number {
    font-size: 13px;
  }

  .calendar-day-tokens {
    font-size: 9.5px;
  }

  .calendar-month-label {
    min-width: 100px;
  }
}

/* ---------- Адаптивность ---------- */

@media (max-width: 800px) {
  .app-header {
    flex-wrap: wrap;
  }

  /* display:contents — .header-actions (Шаг 37) исчезает из блочной модели,
     .admin-link/.usage-widget становятся прямыми flex-items .app-header,
     как до Шага 37 — .usage-widget { order: 3; width: 100% } ниже по-прежнему
     переносит именно её на новую строку, не всю группу целиком. */
  .header-actions {
    display: contents;
  }

  .usage-widget {
    margin-left: 0;
    order: 3;
    width: 100%;
  }

  .usage-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .usage-dropdown {
    left: 0;
    right: 0;
    width: auto;
  }

  .app-layout {
    flex-direction: column;
    padding: 0 16px 8px;
  }

  .conversation-sidebar {
    width: auto;
    max-height: 220px;
  }
}

/* ===========================================================================
   Шаг 24.4/24.5: вложения в чате — кнопка «+», панель превью, чипы, drag-n-drop,
   модалка просмотра. Все цвета/радиусы/тени — существующие переменные из
   :root (см. начало файла), новых не заводится.
   =========================================================================== */

/* ---------- Кнопка «+» ---------- */

.attachment-button {
  align-self: flex-start;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  outline: none;
}

.attachment-button svg {
  width: 18px;
  height: 18px;
}

.attachment-button:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.attachment-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Скрывает нативный <input type="file"> визуально, но НЕ через display:none
   (это ломало бы .click() на некоторых старых мобильных браузерах у
   некоторых элементов формы) — оставляем в потоке разметки, но невидимым и
   недоступным по Tab. Возможно, пригодится и другим элементам в будущем —
   имя класса не привязано к вложениям. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Панель превью (ещё не отправленные вложения) ---------- */

/* Приоритет 1, п.1: панель переехала ВНУТРЬ .chat-input-row (см. index.html
   и .chat-input-row/.chat-input-row-inner выше) — горизонтальные отступы
   теперь берёт на себя сама форма (padding: 12px 16px 16px), здесь
   собственных боковых/верхних отступов больше не нужно, иначе они бы
   удваивались. Отступ снизу (до .chat-input-row-inner) даёт общий gap:10px
   родителя-формы — то самое "свободное пространство под блоком файлов",
   которого раньше не было вообще. */
.attachment-panel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-shrink: 0;
}

.attachment-panel.hidden {
  display: none;
}

.attachment-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  max-width: 220px;
  padding: 7px 8px 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.attachment-chip--clickable {
  cursor: pointer;
}

.attachment-chip--clickable:hover {
  border-color: var(--accent-primary);
}

.attachment-chip--uploading {
  opacity: 0.7;
}

.attachment-chip--error {
  border-color: #e0574c;
  background: #fdf1f0;
}

.attachment-chip-icon {
  display: flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
}

.attachment-chip-icon svg {
  width: 100%;
  height: 100%;
}

.attachment-chip--error .attachment-chip-icon {
  color: #e0574c;
}

.attachment-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.attachment-chip-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-chip-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-chip--error .attachment-chip-meta {
  color: #e0574c;
}

.attachment-chip-retry,
.attachment-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.attachment-chip-retry svg,
.attachment-chip-remove svg {
  width: 13px;
  height: 13px;
}

.attachment-chip-retry:hover {
  background: var(--color-surface-hover);
  color: var(--accent-primary);
}

.attachment-chip-remove:hover {
  background: #fdf1f0;
  color: #e0574c;
}

/* ---------- Drag-n-drop поверх окна чата ---------- */

.drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(91, 110, 245, 0.08);
  border: 2px dashed var(--accent-primary);
  border-radius: var(--radius);
  margin: 8px;
  pointer-events: none;
}

.drop-overlay.hidden {
  display: none;
}

.drop-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--accent-primary);
  font-size: 14px;
  font-weight: 600;
}

.drop-overlay-inner svg {
  width: 32px;
  height: 32px;
}

.drop-overlay-inner p {
  margin: 0;
}

/* ---------- Чипы вложений внутри уже отправленного сообщения ---------- */

.message-attachments-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.message-attachment-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 200px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.message-attachment-chip:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.message-attachment-chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.message-attachment-chip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Пользовательские пузыри — на цветном/акцентном фоне (см. .bubble--user),
   поэтому чипы внутри message-row--user получают более контрастную рамку,
   иначе на некоторых фонах сливаются. */
.message-row--user .message-attachment-chip {
  background: rgba(255, 255, 255, 0.9);
}

/* ---------- Модалка просмотра вложения ---------- */
/* Переиспользует .modal-overlay/.modal-box/.modal-close-button (см. выше,
   секция "Модалка «Календарь расходов»") — здесь только то, что специфично
   для содержимого превью вложения. */

.attachment-preview-box {
  max-width: 720px;
  padding: 40px 32px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-preview-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-preview-loading,
.attachment-preview-error {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0;
}

.attachment-preview-error {
  color: #e0574c;
}

.attachment-preview-image {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius-sm);
  display: block;
}

.attachment-preview-doc {
  width: 100%;
  text-align: left;
}

.attachment-preview-doc-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  word-break: break-word;
}

.attachment-preview-doc-text {
  max-height: 50vh;
  overflow-y: auto;
  margin: 0 0 16px;
  padding: 14px;
  background: #f7f7fa;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text);
}

.attachment-preview-doc-note {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0 0 16px;
}

.attachment-preview-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-soft));
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 18px -8px rgba(91, 110, 245, 0.55);
}

.attachment-preview-doc-link:hover {
  opacity: 0.92;
}

/* ---------- Приоритет 1, п.5: модалка «Файлы чата» ---------- */

/* Находка после Шага 25 (живой тест): раньше .modal-box давал плавающую
   высоту (max-height:90vh, содержимое диктует реальную) — с одним файлом
   модалка маленькая, с тремя-четырьмя заметно выше, дёргалась при
   переключении между чатами. Теперь фиксированная высота 480px независимо
   от количества файлов; сама .conversation-files-list скроллится отдельно
   (flex:1, overflow-y:auto), а .conversation-files-title и кнопка «Скачать
   все» — вне скролла, всегда видны. overflow:hidden на самом .modal-box
   нужен, чтобы не унаследовать overflow-y:auto из базового класса — иначе
   получим двойной скролл (у бокса и у списка одновременно).
   */
.conversation-files-box {
  display: flex;
  flex-direction: column;
  height: 480px;
  max-height: 90vh;
  overflow: hidden;
}

.conversation-files-title {
  flex-shrink: 0;
  margin: 0 0 16px;
  font-size: 17px;
  padding-right: 28px;
}

.conversation-files-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* небольшой правый отступ, чтобы полоса прокрутки не наезжала на текст */
  padding-right: 4px;
  margin-right: -4px;
}

.conversation-files-empty {
  color: var(--color-text-muted);
  font-size: 13.5px;
  text-align: center;
  padding: 20px 0;
  margin: 0;
}

.conversation-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
}

.conversation-file-row:hover {
  border-color: var(--accent-primary);
}

.conversation-file-icon {
  display: flex;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-text-muted);
}

.conversation-file-icon svg {
  width: 100%;
  height: 100%;
}

.conversation-file-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.conversation-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-file-meta {
  font-size: 11.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-file-open {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
}

.conversation-file-open svg {
  width: 15px;
  height: 15px;
}

/* Кнопка «Скачать все» — закреплена внизу модалки, вне скролла списка. */
.conversation-files-download-all {
  flex-shrink: 0;
  margin-top: 14px;
  padding: 11px 18px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.conversation-files-download-all:hover {
  opacity: 0.92;
}

.conversation-files-download-all:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Адаптив (мобильный) ---------- */

@media (max-width: 720px) {
  .chat-input-row {
    padding: 10px 12px 12px;
  }

  .attachment-chip {
    max-width: 160px;
  }

  .message-attachment-chip {
    max-width: 140px;
  }

  .attachment-preview-box {
    padding: 32px 18px 20px;
  }
}