/**
 * Мессенджер панели.
 *
 * Цвета берутся из темы Filament 4. Важно: там переменные вида --gray-200 —
 * это уже готовые цвета (oklch), а не RGB-тройки, как было в третьей версии.
 * Поэтому используем var(--gray-200) напрямую, а прозрачность делаем через
 * color-mix(). У каждой переменной прописан запасной цвет: если тема их
 * переименует, чат останется читаемым, а не превратится в белые пятна.
 *
 * Высота считается от вьюпорта: лента должна прокручиваться внутри себя, а не
 * растягивать страницу — иначе поле ввода уезжает вниз и до него надо
 * долистывать после каждого сообщения.
 */

/*
 * Сброс для атрибута hidden.
 *
 * Он обязателен, и вот почему: браузер прячет [hidden] правилом display:none из
 * своей таблицы, но любое наше правило с display (а их тут десятки — flex,
 * grid) его перебивает. В панели это незаметно, потому что Filament тянет
 * preflight от Tailwind с таким же сбросом и !important. На гостевой странице
 * Filament нет, и без этих строк одновременно видны и пустой экран, и модальное
 * окно, и панель звонка, и рекордер — а невидимая подложка модалки перехватывает
 * все клики, так что не работает вообще ничего.
 *
 * Ограничиваем сброс своими элементами: чужую вёрстку править не наше дело.
 */
.chat [hidden],
.chat[hidden],
.chat-modal[hidden],
.chat-ring[hidden],
.chat-viewer[hidden],
.chat-viewer [hidden],
.chat-dock[hidden],
.chat-dock-host[hidden],
.chat-rail [hidden] {
    display: none !important;
}

.chat {
    --ch-border: var(--gray-200, #e5e7eb);
    --ch-surface: var(--gray-50, #f9fafb);
    --ch-raised: #fff;
    --ch-text: var(--gray-900, #111827);
    --ch-muted: var(--gray-500, #6b7280);
    --ch-accent: var(--primary-600, #1c8437);
    --ch-accent-soft: color-mix(in oklab, var(--primary-500, #22a34a) 14%, transparent);
    --ch-bubble: var(--gray-100, #f3f4f6);
    --ch-bubble-mine: color-mix(in oklab, var(--primary-500, #22a34a) 18%, #fff);
    --ch-danger: var(--danger-600, #dc2626);

    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 0;
    overflow: hidden;
    color: var(--ch-text);
    background: var(--ch-raised);
}

/* Гостевая страница: диалог один, столбец тоже один — место под список
   диалогов там пустовало бы. */
.chat--guest {
    grid-template-columns: 1fr;
    height: 100%;
}

/* Возвращаться гостю некуда: список диалогов у него не существует. */
.chat--guest .chat__back {
    display: none !important;
}

/* Обсуждение внутри карточки задачи: одна колонка и фиксированная высота.
   Высота нужна именно фиксированная — лента растёт от числа сообщений, и без
   потолка страница задачи растягивалась бы на несколько экранов, а поле ввода
   уезжало бы за нижний край. */
.chat--embed {
    grid-template-columns: 1fr;
    height: 32rem;
}

/* Списка диалогов здесь нет: разговор всегда про эту задачу. */
.chat--embed .chat__sidebar,
.chat--embed .chat__back {
    display: none !important;
}

/* Панель справа: узкая, во всю высоту, список и лента по очереди. */
.chat--dock {
    grid-template-columns: 1fr;
    height: 100%;
}

.chat--dock:has(.chat__room:not([hidden])) .chat__sidebar {
    display: none;
}

.chat--dock .chat__back {
    display: inline-flex;
}

:is(.dark) .chat {
    --ch-border: var(--gray-700, #374151);
    --ch-surface: var(--gray-900, #111827);
    --ch-raised: var(--gray-800, #1f2937);
    --ch-text: var(--gray-100, #f3f4f6);
    --ch-muted: var(--gray-400, #9ca3af);
    --ch-accent: var(--primary-500, #22a34a);
    --ch-bubble: var(--gray-700, #374151);
    --ch-bubble-mine: color-mix(in oklab, var(--primary-500, #22a34a) 30%, var(--gray-800, #1f2937));
}

/* ── Список диалогов ─────────────────────────────────────────────────────── */

.chat__sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ch-surface);
    border-right: 1px solid var(--ch-border);
}

.chat__sidebar-head {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--ch-border);
}

.chat__search {
    flex: 1;
    min-width: 0;
}

.chat__search-input,
.chat__field {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--ch-text);
    background: var(--ch-raised);
    border: 1px solid var(--ch-border);
    border-radius: 0.5rem;
}

.chat__field {
    margin-bottom: 0.5rem;
}

.chat__search-input:focus,
.chat__field:focus {
    outline: 2px solid var(--ch-accent-soft);
    outline-offset: 1px;
}

.chat__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.chat__item {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    width: 100%;
    padding: 0.625rem 0.75rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--ch-border) 60%, transparent);
    cursor: pointer;
}

.chat__item:hover {
    background: color-mix(in oklab, var(--ch-accent) 6%, transparent);
}

.chat__item--active {
    background: var(--ch-accent-soft);
}

.chat__item-body {
    flex: 1;
    min-width: 0;
}

.chat__item-top,
.chat__item-bottom {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: space-between;
}

.chat__item-title {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat__item-time,
.chat__item-preview {
    font-size: 0.75rem;
    color: var(--ch-muted);
}

.chat__item-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat__item-badge {
    flex: none;
    min-width: 1.25rem;
    padding: 0.05rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    background: var(--ch-accent);
    border-radius: 999px;
}

.chat__item-badge--mention {
    background: var(--ch-danger);
}

.chat__archive-toggle {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    color: var(--ch-muted);
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ch-border);
    cursor: pointer;
}

.chat__archive-toggle:hover {
    color: var(--ch-text);
    background: color-mix(in oklab, var(--ch-accent) 6%, transparent);
}

.chat__archive-toggle--active {
    font-weight: 600;
    color: var(--ch-accent);
}

/* Обсуждение задачи: вместо круглой аватарки — квадрат с номером задачи. */
.chat__avatar--task {
    font-size: 0.6875rem;
    background: var(--ch-muted);
    border-radius: 0.375rem;
}

.chat__item--done .chat__item-title {
    color: var(--ch-muted);
    text-decoration: line-through;
}

/* ── Аватарки ────────────────────────────────────────────────────────────── */

.chat__avatar {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: hsl(var(--chat-hue, 140) 45% 45%);
    border-radius: 999px;
}

/* Фотография ложится поверх инициалов: пока она грузится, круг не пустует. */
.chat__avatar-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.chat__avatar--small {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.625rem;
}

/*
 * Плитка задачи на рейке: скруглённый квадрат с номером. Круг там уже означает
 * человека, и задача, нарисованная так же, читалась бы как ещё один собеседник.
 */
.chat__avatar--task {
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.chat__avatar-spacer {
    flex: none;
    width: 1.75rem;
}

/* Зелёная точка «в сети» — на самой аватарке, отдельного элемента не заводим. */
.chat__avatar--online {
    box-shadow: 0 0 0 2px var(--ch-raised), 0 0 0 4px #22c55e;
}

/* ── Правая часть ────────────────────────────────────────────────────────── */

.chat__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.chat__empty,
.chat__placeholder {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    font-size: 0.875rem;
    color: var(--ch-muted);
    text-align: center;
}

.chat__empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ch-text);
}

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

.chat__header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--ch-border);
}

/* Кнопка «назад» нужна только там, где список и диалог не помещаются рядом. */
.chat__back {
    display: none;
}

.chat__header-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.chat__header-subtitle {
    font-size: 0.75rem;
    color: var(--ch-muted);
}

.chat__header-actions {
    display: flex;
    gap: 0.25rem;
}

.chat__icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--ch-muted);
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.chat__icon-button svg {
    width: 1.125rem;
    height: 1.125rem;
}

.chat__icon-button:hover {
    color: var(--ch-text);
    background: color-mix(in oklab, var(--ch-accent) 10%, transparent);
}

/* Включённые системные уведомления — колокольчик подсвечен. */
.chat__icon-button--active {
    color: var(--ch-accent);
    background: color-mix(in oklab, var(--ch-accent) 14%, transparent);
}

.chat__icon-button--accent {
    color: #fff;
    background: var(--ch-accent);
}

.chat__icon-button--accent:hover {
    color: #fff;
    background: color-mix(in oklab, var(--ch-accent) 85%, #000);
}

.chat__icon-button--small {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    line-height: 1;
}

/* ── Лента ───────────────────────────────────────────────────────────────── */

.chat__feed {
    flex: 1;
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
    background: var(--ch-surface);
}

.chat__feed-inner {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.chat__day {
    align-self: center;
    padding: 0.125rem 0.625rem;
    margin: 0.75rem 0 0.25rem;
    font-size: 0.6875rem;
    color: var(--ch-muted);
    background: var(--ch-raised);
    border: 1px solid var(--ch-border);
    border-radius: 999px;
}

.chat__system {
    align-self: center;
    max-width: 80%;
    padding: 0.25rem 0.75rem;
    margin: 0.25rem 0;
    font-size: 0.75rem;
    color: var(--ch-muted);
    text-align: center;
}

.chat__row {
    position: relative;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    max-width: min(46rem, 84%);
}

.chat__row--mine {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.chat__row--grouped {
    margin-top: -0.125rem;
}

.chat__row--highlight .chat__bubble {
    outline: 2px solid var(--ch-accent);
    outline-offset: 2px;
}

.chat__bubble {
    position: relative;
    min-width: 4rem;
    padding: 0.5rem 0.75rem;
    background: var(--ch-bubble);
    border-radius: 0.875rem;
}

.chat__row--mine .chat__bubble {
    background: var(--ch-bubble-mine);
}

.chat__bubble--deleted {
    background: transparent;
    border: 1px dashed var(--ch-border);
}

.chat__author {
    margin-bottom: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ch-accent);
}

.chat__guest-tag {
    padding: 0 0.25rem;
    margin-left: 0.375rem;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--ch-muted);
    border: 1px solid var(--ch-border);
    border-radius: 0.25rem;
}

.chat__text {
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat__text--muted {
    font-style: italic;
    color: var(--ch-muted);
}

.chat__link {
    color: var(--ch-accent);
    text-decoration: underline;
}

/* Пересланное сообщение: пометка над содержимым, как в мессенджерах. */

.chat__quote {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.375rem;
    text-align: left;
    background: color-mix(in oklab, var(--ch-accent) 8%, transparent);
    border: 0;
    border-left: 2px solid var(--ch-accent);
    border-radius: 0.25rem;
    cursor: pointer;
}

.chat__quote-author {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ch-accent);
}

.chat__quote-text {
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--ch-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat__meta {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.125rem;
    font-size: 0.625rem;
    color: var(--ch-muted);
}

.chat__ticks--read {
    color: var(--ch-accent);
}

/* ── Звонки ──────────────────────────────────────────────────────────────── */

/* Полоса «идёт звонок»: видна тем, кого в разговоре ещё нет. */
.chat__callbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: #fff;
    background: var(--ch-accent);
}

.chat__callbar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat__callbar .chat__button {
    color: var(--ch-accent);
    background: #fff;
}

.chat__call {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #111827;
}

/* Строка состояния разговора: соединение, ожидание ответа, таймер. */
.chat__call-status {
    font-size: 0.75rem;
    color: #d1d5db;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.chat__call-tiles {
    display: grid;
    gap: 0.5rem;
    /* Плитки сами раскладываются в сетку: на двоих — две в ряд, на восьмерых —
       четыре по две, и отдельного расчёта раскладки не нужно. */
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    max-height: 22rem;
    overflow-y: auto;
}

.chat__call-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 0.5rem;
    overflow: hidden;
    background: #1f2937;
    border-radius: 0.5rem;
}

.chat__call-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Пока камера выключена, в плитке кружок с инициалами; включилась — имя
   уезжает поверх видео. */
.chat__call-tile--video .chat__avatar {
    display: none;
}

.chat__call-name {
    position: relative;
    z-index: 1;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    color: #fff;
    background: rgb(0 0 0 / 45%);
    border-radius: 0.25rem;
}

.chat__call-tile--video .chat__call-name {
    position: absolute;
    bottom: 0.375rem;
    left: 0.375rem;
}

.chat__call-controls {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.chat__call-button {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.0625rem;
    line-height: 1;
    background: #374151;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.chat__call-button:hover {
    background: #4b5563;
}

/* Выключенный микрофон или камера — приглушены, чтобы состояние читалось
   без подписи. */
.chat__call-button--off {
    opacity: 0.4;
}

.chat__call-button--on {
    background: var(--ch-accent);
}

.chat__call-button--hangup {
    background: var(--ch-danger);
    transform: rotate(135deg);
}

/* ── Гостевые ссылки ─────────────────────────────────────────────────────── */

.chat__invite {
    padding: 0.625rem;
    margin-bottom: 0.5rem;
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: 0.5rem;
}

/* Отозванная или просроченная ссылка остаётся в списке: видно, по какой из них
   пришёл гость. Но выглядит она погашенной. */
.chat__invite--dead {
    opacity: 0.6;
}

.chat__invite-label {
    font-size: 0.8125rem;
    font-weight: 600;
}

.chat__invite-facts,
.chat__invite-dead {
    font-size: 0.6875rem;
    color: var(--ch-muted);
}

.chat__invite-dead {
    margin-top: 0.25rem;
    color: var(--ch-danger);
}

.chat__invite-url {
    margin: 0.375rem 0 0.375rem;
    font-size: 0.75rem;
}

.chat__invite-actions {
    display: flex;
    gap: 0.375rem;
}

/* Гость, ждущий одобрения: состояние вместо роли, одной строкой. */
.chat__participant-role--pending {
    font-weight: 600;
    color: var(--ch-danger);
}

/* ── Обращение к участнику ───────────────────────────────────────────────── */

.chat__mention {
    padding: 0 0.125rem;
    font-weight: 600;
    color: var(--ch-accent);
    border-radius: 0.25rem;
}

/* Обратились ко мне — видно и в самом тексте, и по полосе у пузыря, чтобы
   при беглом просмотре ленты не пролистать своё имя. */
.chat__mention--me {
    color: var(--ch-danger);
    background: color-mix(in oklab, var(--ch-danger) 12%, transparent);
}

.chat__bubble--mentioned {
    box-shadow: inset 3px 0 0 var(--ch-danger);
}

.chat__mentions {
    position: absolute;
    bottom: calc(100% - 0.25rem);
    left: 1rem;
    right: 1rem;
    z-index: 6;
    max-height: 14rem;
    overflow-y: auto;
    background: var(--ch-raised);
    border: 1px solid var(--ch-border);
    border-radius: 0.5rem;
    box-shadow: 0 -4px 14px rgb(0 0 0 / 12%);
}

.chat__composer {
    position: relative;
}

.chat__mentions-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.chat__mentions-item--active,
.chat__mentions-item:hover {
    background: var(--ch-accent-soft);
}

.chat__mentions-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Все участники» — не человек, поэтому без цветного круга по имени. */
.chat__avatar--all {
    background: var(--ch-muted);
}

/* ── Вложения ────────────────────────────────────────────────────────────── */

.chat__image {
    display: block;
    max-width: 20rem;
    margin-top: 0.25rem;
    overflow: hidden;
    border-radius: 0.5rem;
}

.chat__image img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Голосовое сообщение.
 *
 * Системный <audio controls> заменён своим плеером: он занимал всю ширину
 * пузыря, выглядел по-разному в каждом браузере и не показывал формы записи —
 * а именно по ней видно, где в записи речь, а где пауза.
 */
.chat__voice {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
    min-width: 13rem;
}

.chat__voice audio {
    display: none;
}

.chat__voice-play {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: #fff;
    background: var(--ch-accent, #16a34a);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.chat__voice-play:hover {
    filter: brightness(1.08);
}

.chat__voice-wave {
    display: flex;
    flex: 1;
    gap: 2px;
    align-items: center;
    height: 1.75rem;
    min-width: 5rem;
    cursor: pointer;
}

.chat__voice-bar {
    flex: 1;
    min-width: 2px;
    background: currentColor;
    border-radius: 1px;
    opacity: 0.3;
    transition: opacity 0.1s linear;
}

/* Пройденная часть дорожки — та же форма, но в полную силу. */
.chat__voice-bar--played {
    opacity: 0.95;
}

.chat__voice-speed {
    flex: none;
    padding: 0.0625rem 0.3125rem;
    color: inherit;
    font-size: 0.6875rem;
    background: rgb(127 127 127 / 0.18);
    border: 0;
    border-radius: 0.3125rem;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

/*
 * Видеосообщение — кружок, как его и записывают. Ход воспроизведения идёт
 * кольцом по краю: полоса под круглым видео смотрелась бы приставленной сбоку.
 */
.chat__note {
    position: relative;
    width: 13rem;
    height: 13rem;
    margin-top: 0.25rem;
}

.chat__note-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
}

.chat__note-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: rotate(-90deg);
}

.chat__note-track {
    fill: none;
    stroke: rgb(255 255 255 / 0.25);
    stroke-width: 3;
}

.chat__note-progress {
    fill: none;
    stroke: var(--ch-accent, #16a34a);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.2s linear;
}

.chat__note-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    color: #fff;
    background: rgb(0 0 0 / 0.45);
    border: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.chat__note-time {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    padding: 0.0625rem 0.4375rem;
    color: #fff;
    font-size: 0.6875rem;
    background: rgb(0 0 0 / 0.55);
    border-radius: 0.625rem;
    transform: translateX(-50%);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
    .chat__note {
        width: 11rem;
        height: 11rem;
    }
}

.chat__voice audio {
    height: 2rem;
}

.chat__voice-time {
    flex: none;
    font-size: 0.6875rem;
    color: var(--ch-muted);
    font-variant-numeric: tabular-nums;
}

.chat__video {
    margin-top: 0.25rem;
}

.chat__video video {
    max-width: 20rem;
    border-radius: 0.5rem;
}

/* Видеосообщение — кружок, как в мессенджерах: сразу видно, что это не файл. */

.chat__file {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin-top: 0.25rem;
}

.chat__file-main {
    display: flex;
    flex: 1;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.chat__file-get {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: inherit;
    border-radius: 0.375rem;
    opacity: 0.55;
}

.chat__file-get:hover {
    background: rgb(0 0 0 / 0.07);
    opacity: 1;
}

.chat__image {
    padding: 0;
    background: none;
    border: 0;
    cursor: zoom-in;
}

.chat__file-info {
    display: flex;
    flex-direction: column;
}

.chat__file-name {
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: underline;
}

.chat__file-size {
    font-size: 0.6875rem;
    color: var(--ch-muted);
}

/* ── Подсказка при наведении ─────────────────────────────────────────────── */

/*
 * Лежит в body и позиционируется скриптом, поэтому fixed: строка «прочитали»
 * находится внутри прокручиваемой ленты, и absolute уехал бы вместе с ней.
 * z-index выше модалки — подсказка должна быть поверх всего, что её вызвало.
 */
.chat__tip {
    position: fixed;
    z-index: 70;
    max-width: 16rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: #fff;
    pointer-events: none;
    background: rgb(17 24 39 / 92%);
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
}

.chat__readers .chat__avatar,
.chat__readers-more,
.chat-rail__item {
    cursor: help;
}

/* ── Кто прочитал ────────────────────────────────────────────────────────── */

/*
 * Строка под сообщением в группе и в обсуждении задачи: кто его прочитал.
 * Аватарки мелкие намеренно, и подписи у них нет — это справка, а не
 * содержание, и спорить за внимание с самим сообщением она не должна.
 */
.chat__readers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1875rem;
    align-items: center;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid color-mix(in oklab, var(--ch-border) 60%, transparent);
}

.chat__readers-more {
    font-size: 0.625rem;
    color: var(--ch-muted);
}

.chat__readers-more {
    margin-left: 0.125rem;
}

.chat__avatar--tiny {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.5rem;
}

/* В служебной строке (событие задачи) она идёт по центру, как и сам текст. */
.chat__system .chat__readers {
    justify-content: center;
    border-top: 0;
}

/* ── Реакции и действия ──────────────────────────────────────────────────── */

.chat__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.chat__reaction {
    padding: 0.05rem 0.375rem;
    font-size: 0.75rem;
    background: var(--ch-raised);
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    cursor: pointer;
}

.chat__reaction--mine {
    border-color: var(--ch-accent);
}

.chat__actions {
    position: absolute;
    top: -0.75rem;
    right: 0.5rem;
    display: none;
    gap: 0.125rem;
    padding: 0.125rem;
    background: var(--ch-raised);
    border: 1px solid var(--ch-border);
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}

.chat__row:hover .chat__actions {
    display: flex;
}

.chat__action {
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
}

.chat__action:hover {
    background: var(--ch-bubble);
}

.chat__action--danger:hover {
    color: var(--ch-danger);
}

.chat__emoji {
    position: absolute;
    top: -2.5rem;
    right: 0;
    z-index: 5;
    display: flex;
    gap: 0.125rem;
    padding: 0.25rem;
    background: var(--ch-raised);
    border: 1px solid var(--ch-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgb(0 0 0 / 12%);
}

.chat__emoji-item {
    padding: 0.125rem 0.25rem;
    font-size: 1rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* ── Ввод ────────────────────────────────────────────────────────────────── */

.chat__typing {
    min-height: 1.125rem;
    padding: 0 1rem;
    font-size: 0.75rem;
    color: var(--ch-muted);
}

.chat__composer {
    padding: 0.625rem 1rem 0.875rem;
    border-top: 1px solid var(--ch-border);
}

.chat__composer-row {
    display: flex;
    gap: 0.375rem;
    align-items: flex-end;
}

.chat__input {
    flex: 1;
    max-height: 11rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
    resize: none;
    color: var(--ch-text);
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: 0.75rem;
}

.chat__input--editing {
    border-color: var(--ch-accent);
}

.chat__send {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: #fff;
    background: var(--ch-accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.chat__send svg {
    width: 1.125rem;
    height: 1.125rem;
}

.chat__reply,
.chat__staged {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    background: var(--ch-surface);
    border-left: 2px solid var(--ch-accent);
    border-radius: 0.375rem;
}

.chat__reply-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.chat__reply-author {
    font-weight: 600;
    color: var(--ch-accent);
}

.chat__reply-preview {
    overflow: hidden;
    color: var(--ch-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat__staged-item {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: var(--ch-raised);
    border: 1px solid var(--ch-border);
    border-radius: 999px;
}

.chat__staged-remove {
    background: transparent;
    border: 0;
    cursor: pointer;
}

.chat__recorder {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: 0.5rem;
}

.chat__recorder-dot {
    width: 0.625rem;
    height: 0.625rem;
    background: var(--ch-danger);
    border-radius: 999px;
    animation: chat-pulse 1s infinite;
}

@keyframes chat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.chat__recorder-time {
    font-variant-numeric: tabular-nums;
}

.chat__recorder-preview {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 999px;
}

/* ── Кнопки, боковая панель, модалка ─────────────────────────────────────── */

.chat__button {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    background: var(--ch-accent);
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.chat__button--ghost {
    color: var(--ch-text);
    background: transparent;
    border: 1px solid var(--ch-border);
}

.chat__button--small {
    padding: 0.1875rem 0.5rem;
    font-size: 0.75rem;
}

.chat__button--wide {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
}

.chat__drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: min(22rem, 90%);
    background: var(--ch-raised);
    border-left: 1px solid var(--ch-border);
    box-shadow: -6px 0 20px rgb(0 0 0 / 10%);
}

.chat__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--ch-border);
}

.chat__drawer-body {
    flex: 1;
    min-height: 0;
    padding: 0.75rem 1rem;
    overflow-y: auto;
}

.chat__participant {
    display: flex;
    /* Кнопки уезжают на вторую строку, когда имя длинное: в узкой панели
       «Впустить» и «Закрыть доступ» рядом с именем не помещаются, и без
       переноса разъезжается вся строка. */
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid color-mix(in oklab, var(--ch-border) 50%, transparent);
}

.chat__participant-info {
    display: flex;
    flex: 1 1 8rem;
    flex-direction: column;
    min-width: 0;
}

.chat__participant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-left: auto;
}

.chat__participant-name {
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat__participant-role,
.chat__picker-meta,
.chat__hint {
    font-size: 0.6875rem;
    color: var(--ch-muted);
}

.chat__setting {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

.chat__setting--inline {
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

.chat__setting-label {
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ch-muted);
    text-transform: uppercase;
}

.chat__divider {
    height: 1px;
    margin: 0.75rem 0;
    background: var(--ch-border);
}

.chat-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 45%);
}

.chat-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(34rem, 94vw);
    max-height: 86vh;
    color: var(--gray-900, #111827);
    background: #fff;
    border-radius: 0.75rem;
}

:is(.dark) .chat-modal__panel {
    color: var(--gray-100, #f3f4f6);
    background: var(--gray-800, #1f2937);
}

.chat-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.chat-modal__body {
    flex: 1;
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
}

.chat-modal__foot {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* ── Окно нового диалога ─────────────────────────────────────────────────── */

/*
 * Высота окна фиксирована, прокручивается только список. Иначе при
 * переключении вкладок окно прыгало бы: у «сотрудников» десять строк, у
 * «новой группы» — форма на пол-экрана.
 */
.chat-modal__pane {
    display: flex;
    flex-direction: column;
    min-height: 20rem;
    max-height: 60vh;
}

.chat-modal__empty {
    padding: 2rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--gray-500, #6b7280);
    text-align: center;
}

.chat-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 0.75rem;
    background: var(--gray-100, #f3f4f6);
    border-radius: 0.625rem;
}

:is(.dark) .chat-tabs {
    background: var(--gray-900, #111827);
}

.chat-tabs__item {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500, #6b7280);
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.chat-tabs__item:hover {
    color: var(--gray-900, #111827);
}

:is(.dark) .chat-tabs__item:hover {
    color: var(--gray-100, #f3f4f6);
}

/* Выбранная вкладка «поднята» над дорожкой — так видно, где ты. */
.chat-tabs__item--active,
.chat-tabs__item--active:hover {
    color: var(--primary-600, #1c8437);
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

:is(.dark) .chat-tabs__item--active,
:is(.dark) .chat-tabs__item--active:hover {
    color: var(--primary-400, #4ade80);
    background: var(--gray-800, #1f2937);
}

/* ── Поиск ───────────────────────────────────────────────────────────────── */

.chat-search {
    display: flex;
    flex: none;
    gap: 0.5rem;
    align-items: center;
    padding: 0 0.625rem;
    margin-bottom: 0.5rem;
    color: var(--gray-500, #6b7280);
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.5rem;
}

:is(.dark) .chat-search {
    background: var(--gray-900, #111827);
    border-color: var(--gray-700, #374151);
}

.chat-search:focus-within {
    border-color: var(--primary-500, #22a34a);
    outline: 2px solid color-mix(in oklab, var(--primary-500, #22a34a) 20%, transparent);
    outline-offset: 1px;
}

.chat-search svg {
    flex: none;
}

.chat-search__input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: inherit;
    background: transparent;
    border: 0;
    outline: 0;
}

.chat-search__counter {
    flex: none;
    font-size: 0.6875rem;
    color: var(--gray-400, #9ca3af);
}

/* ── Список выбора ───────────────────────────────────────────────────────── */

.chat-pick-list {
    flex: 1;
    min-height: 0;
    margin: 0 -0.25rem;
    overflow-y: auto;
}

.chat-pick-list--short {
    max-height: 13rem;
}

.chat-pick {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    width: 100%;
    padding: 0.5rem;
    font: inherit;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.chat-pick:hover,
.chat-pick--active {
    background: color-mix(in oklab, var(--primary-500, #22a34a) 10%, transparent);
}

/* Строка группы: там своя кнопка «Вступить», вся строка не нажимается. */
.chat-pick--static {
    cursor: default;
}

.chat-pick--static:hover {
    background: transparent;
}

.chat-pick[disabled] {
    opacity: 0.5;
}

.chat-pick__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.chat-pick__name {
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-pick__meta {
    overflow: hidden;
    font-size: 0.6875rem;
    color: var(--gray-500, #6b7280);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-pick__status {
    flex: none;
    font-size: 0.625rem;
    color: #16a34a;
}

/* Галочка появляется только у отмеченных — пустых квадратиков в списке нет. */
.chat-pick__check {
    flex: none;
    width: 1.125rem;
    font-size: 0.875rem;
    color: var(--primary-600, #1c8437);
    text-align: center;
    opacity: 0;
}

.chat-pick--picked .chat-pick__check {
    opacity: 1;
}

.chat-pick--picked {
    background: color-mix(in oklab, var(--primary-500, #22a34a) 14%, transparent);
}

/* ── Выбор из двух вариантов ─────────────────────────────────────────────── */

.chat-choice {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.chat-choice__item {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.625rem;
    text-align: left;
    background: transparent;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.5rem;
    cursor: pointer;
}

:is(.dark) .chat-choice__item {
    border-color: var(--gray-700, #374151);
}

.chat-choice__item--active {
    border-color: var(--primary-500, #22a34a);
    background: color-mix(in oklab, var(--primary-500, #22a34a) 10%, transparent);
}

.chat-choice__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: inherit;
}

.chat-choice__hint {
    font-size: 0.6875rem;
    color: var(--gray-500, #6b7280);
}

/* ── Выбранные участники ─────────────────────────────────────────────────── */

.chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 1.75rem;
    margin-bottom: 0.5rem;
}

.chat-chips__empty {
    font-size: 0.6875rem;
    color: var(--gray-400, #9ca3af);
}

.chat-chip {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    font-size: 0.75rem;
    background: color-mix(in oklab, var(--primary-500, #22a34a) 16%, transparent);
    border-radius: 999px;
}

.chat-chip__remove {
    padding: 0 0.25rem;
    font-size: 0.875rem;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.chat__tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.chat__tab {
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
}

.chat__tab--active {
    border-color: var(--ch-accent, #1c8437);
}

.chat__picker {
    max-height: 18rem;
    overflow-y: auto;
}

.chat__picker-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.375rem 0.25rem;
    font-size: 0.8125rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    cursor: pointer;
}

.chat__picker-info,
.chat__result {
    display: flex;
    flex-direction: column;
}

.chat__picker-name {
    flex: 1;
}

.chat__result {
    width: 100%;
    padding: 0.5rem 0;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ch-border);
    cursor: pointer;
}

.chat__result-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ch-accent);
}

.chat__result-preview {
    font-size: 0.75rem;
    color: var(--ch-muted);
}

/* ── Мелочи состояния ────────────────────────────────────────────────────── */

.chat__header-main {
    flex: 1;
    min-width: 0;
}

/* Отправляемое сообщение бледнее отправленного: видно, что оно ещё в пути. */
.chat__row--pending .chat__bubble {
    opacity: 0.6;
}

.chat__row--failed .chat__bubble {
    border: 1px solid var(--ch-danger);
}

.chat__failed {
    color: var(--ch-danger);
}

.chat__picker-item--button {
    gap: 0.5rem;
    justify-content: flex-start;
}

/* ── Панель у правого края ───────────────────────────────────────────────── */

/*
 * Рейка видна на всех страницах панели, поэтому содержимое Filament ужимаем на
 * её ширину: перекрывать правый край таблиц полосой с аватарками нельзя —
 * именно там живут кнопки действий в строках.
 *
 * Высота шапки приходит из JS (--chat-topbar): у неё разная высота с баннером
 * имперсонализации, и константа здесь однажды разъехалась бы с вёрсткой.
 */
:root {
    --chat-topbar: 4rem;
    --chat-rail: 3rem;
    --chat-panel: 24rem;
}

.chat-has-dock .fi-main-ctn,
.chat-has-dock .fi-topbar {
    padding-right: var(--chat-rail);
}

.chat-rail {
    position: fixed;
    top: var(--chat-topbar);
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    width: var(--chat-rail);
    padding: 0.5rem 0;
    background: var(--gray-50, #f9fafb);
    border-left: 1px solid var(--gray-200, #e5e7eb);
}

:is(.dark) .chat-rail {
    background: var(--gray-900, #111827);
    border-left-color: var(--gray-700, #374151);
}

.chat-rail__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--gray-500, #6b7280);
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.chat-rail__toggle svg {
    width: 1.375rem;
    height: 1.375rem;
}

.chat-rail__toggle:hover {
    color: var(--primary-600, #1c8437);
    background: color-mix(in oklab, var(--primary-500, #22a34a) 12%, transparent);
}

/* Подсвечена та кнопка, чей список сейчас открыт: людей или задач. */
.chat-dock-host--open .chat-rail__toggle--active {
    color: #fff;
    background: var(--primary-600, #1c8437);
}

.chat-rail__badge {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    min-width: 1rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1rem;
    color: #fff;
    text-align: center;
    background: var(--danger-600, #dc2626);
    border-radius: 999px;
}

.chat-rail__recent {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.375rem;
    align-items: center;
    width: 100%;
    padding-top: 0.5rem;
    overflow: hidden auto;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

:is(.dark) .chat-rail__recent {
    border-top-color: var(--gray-700, #374151);
}

.chat-rail__item {
    position: relative;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.chat-rail__dot {
    position: absolute;
    right: -0.25rem;
    bottom: -0.125rem;
    min-width: 0.875rem;
    padding: 0 0.1875rem;
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 0.875rem;
    color: #fff;
    text-align: center;
    background: var(--primary-600, #1c8437);
    border-radius: 999px;
}

.chat-rail__dot--mention {
    background: var(--danger-600, #dc2626);
}

.chat-dock {
    position: fixed;
    top: var(--chat-topbar);
    right: var(--chat-rail);
    bottom: 0;
    z-index: 29;
    width: var(--chat-panel);
    max-width: calc(100vw - var(--chat-rail));
    overflow: hidden;
    background: #fff;
    border-left: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: -8px 0 24px rgb(0 0 0 / 10%);
    /* Панель выезжает, а не появляется рывком: так видно, откуда она взялась. */
    transform: translateX(100%);
    transition: transform 0.18s ease-out;
}

:is(.dark) .chat-dock {
    background: var(--gray-800, #1f2937);
    border-left-color: var(--gray-700, #374151);
}

.chat-dock-host--open .chat-dock {
    transform: translateX(0);
}

/*
 * Ручка изменения ширины. Сама полоса узкая, но область захвата шире самой
 * линии: попасть мышью в два пикселя — занятие на любителя.
 */
.chat-dock__resizer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 0.5rem;
    cursor: col-resize;
    touch-action: none;
}

.chat-dock__resizer::after {
    position: absolute;
    top: 50%;
    left: 0.125rem;
    width: 0.1875rem;
    height: 2.5rem;
    content: '';
    background: var(--gray-300, #d1d5db);
    border-radius: 999px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s;
}

.chat-dock__resizer:hover::after {
    opacity: 1;
}

/* Во время перетаскивания текст под курсором выделяться не должен. */
.chat-resizing {
    user-select: none;
    cursor: col-resize;
}

.chat-resizing .chat-dock {
    transition: none;
}

.chat-dock > div {
    height: 100%;
}

/* ── Узкий экран ─────────────────────────────────────────────────────────── */

@media (max-width: 62rem) {
    .chat__back {
        display: inline-flex;
    }

    .chat__row {
        max-width: 92%;
    }

    /* Панель на телефоне разворачивается во всю ширину: 24 рем там некуда. */
    .chat-dock {
        right: 0;
        width: 100vw;
    }

    /* Полосы у края нет — вместо неё круглая кнопка над содержимым, и
       ужимать страницу не нужно. */
    .chat-rail {
        top: auto;
        right: 1rem;
        bottom: 1rem;
        width: auto;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .chat-rail__recent {
        display: none;
    }

    .chat-rail__toggle {
        width: 3rem;
        height: 3rem;
        color: #fff;
        background: var(--primary-600, #1c8437);
        border-radius: 999px;
        box-shadow: 0 6px 16px rgb(0 0 0 / 25%);
    }

    .chat-has-dock .fi-main-ctn,
    .chat-has-dock .fi-topbar {
        padding-right: 0;
    }
}

/* ── Окно просмотра вложений ─────────────────────────────────────────────── */

/*
 * Во весь экран и поверх всего, включая панель диалогов: документ открывают,
 * чтобы прочитать, а панель для этого узкая. Тёмная подложка здесь не про
 * оформление — она гасит пёстрый интерфейс вокруг, чтобы взгляд остался на
 * странице документа.
 *
 * Тема не переключается: тёмная рамка одинаково хороша и в светлой панели, и в
 * тёмной, а белый лист PDF внутри всё равно белый в обеих.
 */
.chat-viewer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    grid-template-rows: auto 1fr;
    color: #f3f4f6;
}

.chat-viewer__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(9 9 11 / 0.92);
}

.chat-viewer__head {
    position: relative;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 0.875rem;
}

.chat-viewer__title {
    flex: 1;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-viewer__counter {
    flex: none;
    font-size: 0.75rem;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}

.chat-viewer__action {
    display: flex;
    flex: none;
    gap: 0.375rem;
    align-items: center;
    padding: 0.375rem 0.625rem;
    color: inherit;
    font-size: 0.8125rem;
    text-decoration: none;
    background: rgb(255 255 255 / 0.1);
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.chat-viewer__action:hover {
    background: rgb(255 255 255 / 0.2);
}

.chat-viewer__action--icon {
    padding: 0.375rem;
}

.chat-viewer__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 0.75rem 0.75rem;
}

.chat-viewer__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.375rem;
    cursor: zoom-in;
}

/*
 * Разглядеть мелкий скриншот: картинка перестаёт вписываться в окно и
 * прокручивается вместе со сценой.
 */
.chat-viewer__image--zoom {
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}

.chat-viewer__stage:has(.chat-viewer__image--zoom) {
    overflow: auto;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Лист документа — белый и во всю доступную высоту: читать, а не разглядывать. */
.chat-viewer__frame {
    width: min(64rem, 100%);
    height: 100%;
    background: #fff;
    border: 0;
    border-radius: 0.375rem;
}

.chat-viewer__text {
    width: min(64rem, 100%);
    height: 100%;
    margin: 0;
    padding: 1rem 1.25rem;
    overflow: auto;
    color: #111827;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #fff;
    border-radius: 0.375rem;
}

.chat-viewer__pending {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.875rem;
    color: #d1d5db;
}

.chat-viewer__sad {
    font-size: 1.5rem;
}

.chat-viewer__spinner {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgb(255 255 255 / 0.25);
    border-top-color: #f3f4f6;
    border-radius: 50%;
    animation: chat-viewer-spin 0.8s linear infinite;
}

@keyframes chat-viewer-spin {
    to { transform: rotate(360deg); }
}

.chat-viewer__nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: inherit;
    background: rgb(255 255 255 / 0.1);
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.chat-viewer__nav:hover {
    background: rgb(255 255 255 / 0.22);
}

.chat-viewer__nav--prev { left: 0.75rem; }
.chat-viewer__nav--next { right: 0.75rem; }

@media (max-width: 640px) {
    .chat-viewer__nav {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* ── Гостевые ссылки ─────────────────────────────────────────────────────── */

.chat__invite {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem;
    margin-bottom: 0.5rem;
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: 0.5rem;
}

/* Отозванная или просроченная ссылка остаётся видна — но глухой. */
.chat__invite--dead {
    opacity: 0.55;
}

.chat__invite-head {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.chat__invite-label {
    font-size: 0.8125rem;
    font-weight: 600;
}

.chat__invite-url {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.chat__invite-facts {
    font-size: 0.6875rem;
    color: var(--ch-muted);
}

.chat__invite-form {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.chat__field--small {
    padding: 0.3125rem 0.5rem;
    font-size: 0.75rem;
}

/* ── Запись разговора ────────────────────────────────────────────────────── */

/*
 * Пометка о записи в строке состояния звонка. Видна всем участникам, а не
 * только включившему: тайной запись быть не может.
 */
.chat__call-rec {
    display: inline-flex;
    gap: 0.3125rem;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.4375rem;
    color: #fecaca;
    font-size: 0.6875rem;
    background: rgb(220 38 38 / 0.25);
    border-radius: 0.625rem;
}

.chat__call-rec-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    background: #ef4444;
    border-radius: 50%;
    animation: chat-rec-pulse 1.6s ease-in-out infinite;
}

@keyframes chat-rec-pulse {
    50% { opacity: 0.25; }
}

.chat__call-button--rec {
    color: #fff;
    background: #dc2626;
}

.chat__call-button--rec:hover {
    background: #b91c1c;
}

.chat__call-button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Входящий вызов ──────────────────────────────────────────────────────── */

/*
 * Окно поверх всей панели, а не внутри ленты: звонок должен застать человека
 * там, где он есть, — в задачах, в отчётах, на складе. z-index выше окна
 * просмотра: если человек разглядывает документ, вызов всё равно важнее.
 */
.chat-ring {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(9 9 11 / 0.55);
    backdrop-filter: blur(2px);
}

.chat-ring__card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(22rem, calc(100vw - 2rem));
    padding: 1.25rem;
    color: var(--ch-text, #111827);
    background: var(--ch-raised, #fff);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.35);
    animation: chat-ring-in 0.18s ease-out;
}

:is(.dark) .chat-ring__card {
    color: #f3f4f6;
    background: #1f2937;
}

@keyframes chat-ring-in {
    from { transform: translateY(0.75rem) scale(0.97); opacity: 0; }
}

.chat-ring__head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Пульсация — как у телефона: окно должно быть видно боковым зрением. */
.chat-ring__avatar {
    display: flex;
    flex: none;
    animation: chat-ring-pulse 1.4s ease-in-out infinite;
}

@keyframes chat-ring-pulse {
    50% { transform: scale(1.06); }
}

.chat__avatar--large {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.125rem;
}

.chat-ring__who {
    min-width: 0;
}

.chat-ring__title {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-ring__subtitle {
    font-size: 0.75rem;
    color: var(--ch-muted, #6b7280);
}

.chat-ring__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.chat-ring__button {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.5rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    border: 0;
    border-radius: 0.625rem;
    cursor: pointer;
}

.chat-ring__button--accept {
    background: #16a34a;
}

.chat-ring__button--accept:hover {
    background: #15803d;
}

.chat-ring__button--decline {
    background: #dc2626;
}

.chat-ring__button--decline:hover {
    background: #b91c1c;
}

/* Трубка отклонения — перевёрнутая, как принято во всех телефонах. */
.chat-ring__button--decline svg {
    transform: rotate(135deg);
}

.chat-ring__silence {
    padding: 0.375rem;
    color: var(--ch-muted, #6b7280);
    font-size: 0.75rem;
    background: none;
    border: 0;
    cursor: pointer;
}

.chat-ring__silence:disabled {
    cursor: default;
    opacity: 0.6;
}

.chat-ring__hint {
    font-size: 0.6875rem;
    color: var(--ch-muted, #6b7280);
}

.chat-ring__replies {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.chat-ring__reply {
    padding: 0.5rem 0.625rem;
    color: inherit;
    font-size: 0.8125rem;
    text-align: left;
    background: var(--ch-surface, #f9fafb);
    border: 1px solid var(--ch-border, #e5e7eb);
    border-radius: 0.5rem;
    cursor: pointer;
}

.chat-ring__reply:hover {
    border-color: var(--ch-accent, #16a34a);
}

:is(.dark) .chat-ring__reply {
    background: #111827;
    border-color: #374151;
}

/* Звуковой файл (не голосовое): плеер плюс имя и кнопка скачивания. */
.chat__audio {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.chat__audio-foot {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.chat__audio-foot .chat__file-name {
    flex: 1;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Формат, который этот браузер не проигрывает: честная строка вместо молчащей кнопки. */
.chat__voice-unplayable {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--ch-muted);
}