/* ══════════════════════════════════════════════════════════════
   Скрытое — скрыто, чем бы его ни красили
   ──────────────────────────────────────────────────────────────
   Браузерное [hidden] { display: none } слабее любого нашего display, и блок,
   честно помеченный скрытым, оставался на экране: полоса «не ушло» не
   закрывалась крестиком, хотя element.hidden был true. Ошибка повторяется у
   каждого блока со своим display и не ловится ничем, кроме глаз, — поэтому
   правило одно и на всех.
   ══════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

/* Minimal custom styles */

/*
  Инбокс. Собранный tailwind.css в проекте статический (не JIT), поэтому
  произвольные значения вида grid-cols-[20rem_1fr_21rem] в нём отсутствуют —
  раскладка на них молча схлопывалась бы в одну колонку. Держим её здесь.
*/
.inbox-grid {
    display: flex;
    gap: .25rem;
    /*
      Экран минус шапка (44px, токен h-nav) и отступы <main> страницы чатов
      (py-4: по 1rem сверху и снизу). Было 7rem — на 36px больше, чем занято:
      под колонками оставалась пустая полоса втрое шире отступа над ними.
    */
    height: calc(100vh - 44px - 2rem);

    /* Ширины колонок живут в переменных: их двигает мышь и запоминает браузер */
    --chat-left:  20rem;
    --chat-right: 21rem;
}
.inbox-col-left  { width: var(--chat-left);  flex: none; min-width: 0; }
.inbox-col-main  { flex: 1 1 0%;  min-width: 0; }
.inbox-col-right { width: var(--chat-right); flex: none; min-width: 0; }

/*
  Разделители колонок. Полоса шире, чем выглядит: попасть мышью в 4 пикселя
  трудно, поэтому область захвата 10 px, а видимая линия появляется на наведении.
*/
.col-resizer {
    flex: none;
    width: 10px;
    margin: 0 -2px;
    cursor: col-resize;
    position: relative;
    border-radius: 3px;
    touch-action: none;
    transition: background-color .12s;
}
.col-resizer::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 2px; height: 2rem;
    transform: translate(-50%, -50%);
    border-radius: 1px;
    background: var(--n-300);
    opacity: 0;
    transition: opacity .12s;
}
.col-resizer:hover::after,
.col-resizer.is-dragging::after { opacity: 1; }
.col-resizer:hover, .col-resizer.is-dragging { background: var(--accent-bg); }

/* Пока тянут — не выделять текст во всём документе */
body.col-resizing { user-select: none; cursor: col-resize; }

@media (max-width: 1023px) {
    .inbox-grid { flex-direction: column; height: auto; gap: 1rem; }
    .inbox-col-left,
    .inbox-col-right { width: auto; }
    .inbox-col-main { min-height: 24rem; }
    /* На узком экране колонки идут одна под другой — тянуть нечего */
    .col-resizer { display: none; }
}

/* Утилиты, которых нет в собранном наборе */
.min-h-0    { min-height: 0; }
.resize-y   { resize: vertical; }
.text-2xs   { font-size: 10px; line-height: 1.35; }
.text-xxs   { font-size: 11px; line-height: 1.4; }
.bubble-max { max-width: 80%; }
.w-44       { width: 11rem; }

/*
  Меню: девять разделов не влезают в 1440px и переносились по словам.
  Прокрутка вместо переноса — полоса скрыта, чтобы не мешала.
*/
.nav-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.nav-scroll::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════════════════════════
   Шапка чата: досье кандидата

   Собранный tailwind статичен, поэтому всё, что сложнее готовых утилит
   (сетка «подпись — значение», состояния фишек, обрезка длинных строк),
   описано здесь. Плотность выбрана намеренно: шапка отнимает высоту у
   переписки, и каждая лишняя строка — это строка, которую рекрутер не видит.
   ══════════════════════════════════════════════════════════════ */

.chat-head        { padding: .625rem .875rem; border-bottom: 1px solid var(--n-200); }
.chat-head-top    { display: flex; align-items: flex-start; gap: .625rem; }

/*
  Значки каналов у имени. Приглушены все, кроме текущего: строка из четырёх
  одинаково ярких марок читается как реклама, а нужен ответ на один вопрос —
  «где этот человек ещё есть». Наведение возвращает цвет тому, куда можно уйти.
*/
.head-chs         { display: inline-flex; align-items: center; gap: .1875rem; }
.head-ch          { position: relative; display: inline-flex; padding: .0625rem;
                    border-radius: .25rem; line-height: 0; }
.head-ch .ch-ic   { opacity: .45; filter: saturate(.5); transition: opacity .12s, filter .12s; }
.head-ch.is-current .ch-ic { opacity: 1; filter: none; }
a.head-ch:hover           { background: var(--n-100); }
a.head-ch:hover .ch-ic    { opacity: 1; filter: none; }
/* Непрочитанное в соседнем канале — точка на углу значка: цифру на пятнадцати
   пикселях не прочесть, а «там что-то есть» видно и краем глаза. */
.head-ch-dot      { position: absolute; top: -1px; right: -1px;
                    width: 5px; height: 5px; border-radius: 50%;
                    background: var(--accent); box-shadow: 0 0 0 1.5px var(--n-0); }

.chat-avatar {
    width: 2.25rem; height: 2.25rem; border-radius: 9999px; flex: none;
    object-fit: cover; background: var(--accent-bg); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
}

/*
  Досье под именем. По умолчанию свёрнуто, раскрывается по наведению на шапку и
  накрывает верх переписки — абсолютным позиционированием, а не потоком: иначе
  лента прыгала бы под курсором на каждое наведение.
*/
.chat-head        { position: relative; }
.chat-rows        { display: none;
                    position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
                    padding: .625rem .875rem .75rem;
                    background: var(--n-0);
                    border-bottom: 1px solid var(--n-200);
                    box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .25);
                    gap: .25rem .5rem;
                    grid-template-columns: 4.25rem 1fr; align-items: start; }
.chat-head:hover .chat-rows,
.chat-head:focus-within .chat-rows,
.chat-head.is-pinned .chat-rows { display: grid; }

/* Подсказка, что под именем что-то есть: без неё панель невозможно найти */
.dossier-hint     { position: absolute; right: .875rem; top: .75rem;
                    font-size: 11px; color: var(--n-400); transition: color .12s; }
.chat-head:hover .dossier-hint,
.chat-head.is-pinned .dossier-hint { color: var(--accent-hover); }
.dossier-name     { cursor: pointer; }
.chat-rows dt     { font-size: 11px; color: var(--n-400); padding-top: .175rem; }
.chat-rows dd     { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }

/* Общая фишка */
.chip {
    display: inline-flex; align-items: center; gap: .3rem;
    max-width: 100%; padding: .15rem .45rem;
    font-size: 11px; line-height: 1.5; border-radius: .375rem;
    border: 1px solid var(--n-200); color: var(--n-600); background: var(--n-0);
    text-decoration: none; white-space: nowrap;
}
.chip:hover       { background: var(--n-50); border-color: var(--n-400); }
.chip > .chip-txt { overflow: hidden; text-overflow: ellipsis; }
.chip-num         { font-variant-numeric: tabular-nums; color: var(--n-400); }

/* ══════════════════════════════════════════════════════════════
   Контакт: перейти и скопировать
   ──────────────────────────────────────────────────────────────
   Клик по контакту делает своё — звонит через АТС, открывает письмо, ведёт в
   профиль, — а клик по кнопке справа кладёт его в буфер. Кнопка лежит в поле
   внутри самой плашки, а не рядом с ней: отдельный элемент в строке контактов
   ломал бы перенос и уводил взгляд от самого контакта.

   Место под кнопку отведено всегда, даже пока она невидима. Иначе плашка
   расширялась бы под курсором, и «позвонить» уезжало из-под пальца ровно в
   момент нажатия.
   ══════════════════════════════════════════════════════════════ */
.copy-pair        { position: relative; display: inline-flex; max-width: 100%; }
.copy-pair > .copy-slot { padding-right: 1.4rem; }
.copy-btn         { position: absolute; top: 50%; right: .18rem; transform: translateY(-50%);
                    display: inline-flex; align-items: center; justify-content: center;
                    width: 1.05rem; height: 1.05rem; padding: 0; flex: none;
                    border: 0; border-radius: .25rem; cursor: pointer;
                    background: transparent; color: var(--n-400);
                    opacity: 0; transition: opacity .12s, color .12s, background .12s; }
.copy-btn > svg   { width: .8rem; height: .8rem; }
.copy-btn > .copy-ok { display: none; }
.copy-pair:hover .copy-btn,
.copy-pair:focus-within .copy-btn { opacity: 1; }
.copy-btn:hover   { color: var(--accent); background: var(--accent-bg); }
.copy-btn:focus-visible { opacity: 1; outline: 2px solid var(--accent-soft); outline-offset: 1px; }
/* Сообщение об успехе — на самой кнопке: уведомление в углу экрана ради
   скопированного номера перебивало бы те, что действительно важны. */
.copy-btn.is-done { opacity: 1; color: var(--ok); }
.copy-btn.is-done > .copy-ic { display: none; }
.copy-btn.is-done > .copy-ok { display: inline; }

/* Контакт простым текстом — там, где нажимать не на что (панель набора,
   найденное по номеру). Кнопка становится обычной соседкой в строке. */
.copy-host        { display: inline-flex; align-items: center; gap: .15rem; }
.copy-host > .copy-btn { position: static; transform: none; opacity: 0; }
.copy-host:hover > .copy-btn,
.copy-host:focus-within > .copy-btn { opacity: 1; }

/* Наведения нет — кнопку видно всегда, иначе на телефоне до неё не добраться */
@media (hover: none) {
    .copy-btn { opacity: .65; }
}

/* Вакансия: текущая выделена, закрытая приглушена */
.chip-vac.is-current { border-color: var(--accent-soft); background: var(--accent-bg); color: var(--accent-deep); }
.chip-vac.is-closed  { opacity: .55; }

/* Точка стадии — цвет несёт смысл, поэтому дублируется подписью рядом */
.stage-dot        { width: .4rem; height: .4rem; border-radius: 9999px; flex: none;
                    background: var(--n-300); }
.stage-new        { background: var(--stage-new); }
.stage-screening  { background: var(--stage-screening); }
.stage-phone_interview { background: var(--stage-phone); }
.stage-interview  { background: var(--stage-interview); }
.stage-offer      { background: var(--stage-offer); }
.stage-hired      { background: var(--stage-hired); }
.stage-rejected   { background: var(--stage-rejected); }

/* Канал: где уже говорят, где ещё можно */
.chip-ch.is-current  { border-color: var(--accent-soft); background: var(--accent-bg); color: var(--accent-deep); }
.chip-ch.is-idle     { border-style: dashed; color: var(--n-400); }
.chip-ch.is-off      { border-style: dashed; color: var(--n-400); text-decoration: line-through; }

.chip-link        { color: var(--accent); border-color: var(--accent-bg); }
.chip-link:hover  { background: var(--accent-bg); border-color: var(--accent-soft); }

/* Ждёт ответа — единственная по-настоящему тревожная метка в шапке */
.tag-wait  { font-size: 11px; font-weight: 600; color: var(--warn);
             background: var(--warn-bg); border: 1px solid var(--warn-bg);
             padding: .1rem .4rem; border-radius: .375rem; white-space: nowrap; }
.tag-late  { color: var(--err); background: var(--err-bg); border-color: var(--err-bg); }
/* Этап кандидата у имени: спокойный, это сведение, а не тревога */
.tag-stage {
    font-size: 11px; font-weight: 600;
    color: var(--accent-deep); background: var(--accent-tint);
    padding: .1rem .4rem; border-radius: .375rem; white-space: nowrap;
}
.tag-done  { font-size: 11px; color: var(--ok); background: var(--ok-bg);
             border: 1px solid var(--ok-bg); padding: .1rem .4rem;
             border-radius: .375rem; white-space: nowrap; }

/* Строка списка слева: «открыт, но без ответа» */
.tag-seen  { font-size: 11px; color: var(--warn); }

.chat-more summary        { cursor: pointer; list-style: none; }
.chat-more summary::-webkit-details-marker { display: none; }

/* ══════════════════════════════════════════════════════════════
   Текст сообщений

   `break-words` из Tailwind в собранном наборе отсутствует — в файле нет ни
   одного вхождения `break-word`. То есть перенос длинных строк был прописан в
   разметке, но не действовал: ссылка или слитный набор символов вылезали за
   пузырь и растягивали ленту по горизонтали. Держим правило здесь.

   `anywhere` вместо `break-word`: второй разрешает разрыв слова, только если
   оно одно не помещается в строку, и «строка из ста символов после короткого
   слова» всё ещё вылезала.
   ══════════════════════════════════════════════════════════════ */
.msg-text {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.msg-bubble { min-width: 0; }

/*
  Поле ответа. Растёт под текст само, но остаётся с ручкой: рекрутер может
  задать высоту сам, и выбранная высота переживает перерисовку — форма
  пересоздаётся после каждой отправки.
*/
.reply-box {
    background: var(--n-0);
    resize: vertical;
    min-height: 2.75rem;
    max-height: 60vh;
    overflow-y: auto;
}

/*
  Воронка вакансии. Колонок бывает больше десятка, и ни произвольной
  ширины (min-w-[68px]), ни оттенка -200 у половины палитры в статическом
  tailwind.css нет. Затемнение по hover работает для любого цвета колонки.
*/
/* 110 px — под самое длинное название этапа одной строкой («Телефонное интервью»):
   в колонке было 68, и подпись вылезала на соседнюю. Если этапов столько, что
   строка не влезает, ряд прокручивается по горизонтали. */
.fnl-col { min-width: 110px; }

/*
  Колонки одной высоты. Раньше столбик и подпись лежали в потоке друг за другом,
  и двухстрочное название («Телефонное интервью») толкало свой столбик
  вверх — числа вставали вразнобой. Теперь у столбика своя площадка постоянной
  высоты, растёт он от её низа, а подписи отведено место под две строки.
*/
.fnl-slot { height: 80px; display: flex; align-items: flex-end; }
.fnl-bar {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: filter .15s;
}
.fnl-slot:hover .fnl-bar { filter: brightness(.94); }
.fnl-label { min-height: 2.25rem; overflow-wrap: anywhere; }

/* Стрелка конверсии между столбиками: висит на линии их низа, а не съезжает
   к подписям — под неё отведён тот же отступ, что занимает подпись. */
.fnl-arrow { margin-bottom: 2.5rem; }

/*
  Календарь рекрутера. Собранный tailwind.css статический: в нём нет ни
  произвольных высот, ни sticky, ни семи колонок — а сетка времени держится
  ровно на них. Поэтому она целиком здесь.

  Раскладка одна на день и на неделю: слева колонка часов, справа столько
  колонок-дней, сколько показываем. День — это неделя из одного дня, и
  отдельного набора правил под него не нужно.
*/
.cal-page         { max-width: 1600px; margin: 0 auto; }
.cal-shell        { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 21rem;
                    align-items: start; }
.cal-shell.is-wide{ grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1180px) { .cal-shell { grid-template-columns: minmax(0, 1fr); } }

/* overflow тут не hidden: он превращает карточку в область прокрутки и
   отключает прилипание шапки дней. Углы скругляем самим краевым элементам. */
.cal-card         { background: var(--n-0); border: 1px solid var(--n-200);
                    border-radius: .75rem; }
.cal-card-head    { border-top-left-radius: .75rem; border-top-right-radius: .75rem; }
.cal-legend       { border-bottom-left-radius: .75rem; border-bottom-right-radius: .75rem; }
.cal-card-head    { display: flex; align-items: center; gap: .75rem;
                    padding: .5rem .75rem; border-bottom: 1px solid var(--n-100); }
.cal-card-title   { font-size: 13px; font-weight: 600; color: var(--n-700); }
.cal-card-note    { font-size: 11px; color: var(--n-400); margin-left: auto;
                    font-variant-numeric: tabular-nums; }

/* Сетка: колонка часов + дни. Число колонок приходит переменной из шаблона. */
.cal-grid         { display: grid; grid-template-columns: 3.25rem repeat(var(--cols), minmax(0, 1fr)); }
/* Дни уезжали бы вверх вместе со страницей — шапка прилипает к её верху,
   иначе в длинной неделе непонятно, к какому дню относится колонка */
.cal-daynames     { border-bottom: 1px solid var(--n-200); background: var(--n-0);
                    position: sticky; top: 0; z-index: 6; }
.cal-dayname      { padding: .3rem .5rem; text-align: center; border-left: 1px solid var(--n-100);
                    font-size: 11px; color: var(--n-500); line-height: 1.3; }
.cal-dayname b    { display: block; font-size: 13px; color: var(--n-700); font-weight: 600; }
.cal-dayname.is-today   { background: var(--accent-bg); color: var(--accent-deep); }
.cal-dayname.is-today b { color: var(--accent-deep); }
.cal-dayname.is-off     { background: var(--n-50); color: var(--n-400); }
.cal-dayname a    { color: inherit; }
.cal-dayname a:hover b  { text-decoration: underline; }
.cal-dayname-count { font-variant-numeric: tabular-nums; }

/* Полоса «весь день» — над сеткой, потому что сутки высотой в экран закрыли бы
   собой все встречи этого дня */
.cal-allday       { border-bottom: 1px solid var(--n-200); background: var(--n-50); }
.cal-allday-cell  { padding: .2rem .25rem; border-left: 1px solid var(--n-100); min-height: 1.6rem; }
.cal-allday-label { font-size: 10px; color: var(--n-400); text-align: right;
                    padding: .35rem .4rem 0 0; }

/* Сетка разворачивается на всю свою высоту и едет вместе со страницей.
   Своя область прокрутки внутри карточки означала два скролла на одном экране:
   колесо под курсором крутит сетку, за её пределами — страницу, и оба
   показывают разное. */
.cal-body         { overflow: visible; }
.cal-gutter       { position: relative; }
.cal-gutter span  { position: absolute; right: .4rem; transform: translateY(-.5em);
                    font-size: 11px; color: var(--n-400); font-variant-numeric: tabular-nums; }
.cal-col          { position: relative; border-left: 1px solid var(--n-200); }
.cal-col.is-off   { background: var(--n-50); }
.cal-col.is-today { background: var(--n-50); }
.cal-offhours     { position: absolute; left: 0; right: 0; background: var(--n-50);
                    pointer-events: none; }
/* Час — сплошной линией, шаг сетки — пунктиром. Обе были в --n-100 и почти
   сливались с фоном: по такой сетке нельзя прикинуть время на глаз, а именно
   для этого она и нужна. */
.cal-hline        { position: absolute; left: 0; right: 0; border-top: 1px solid var(--n-300);
                    pointer-events: none; }
.cal-hline.is-step{ border-top-style: dashed; border-top-color: var(--n-200); }

/* Обед: полоса, а не событие. Событие можно двигать и отмечать, а это
   распорядок — он одинаков каждый день и живёт в настройках. */
.cal-lunch        { position: absolute; left: 0; right: 0; z-index: 2;
                    pointer-events: none; overflow: hidden;
                    background: repeating-linear-gradient(135deg,
                        var(--n-100) 0 6px, transparent 6px 12px);
                    border-top: 1px solid var(--n-200);
                    border-bottom: 1px solid var(--n-200); }
.cal-lunch span   { position: absolute; left: .35rem; top: .1rem; font-size: 10px;
                    color: var(--n-500); background: var(--n-0);
                    padding: 0 .2rem; border-radius: .2rem; }
.cal-now          { position: absolute; left: 0; right: 0; border-top: 2px solid var(--err);
                    z-index: 4; pointer-events: none; }
.cal-now::before  { content: ""; position: absolute; left: 0; top: -.3rem; width: .5rem;
                    height: .5rem; border-radius: 9999px; background: var(--err); }

/* Событие. Цвет — вида, насыщенность — состояния. */
.cal-event        { position: absolute; overflow: hidden; padding: .15rem .35rem;
                    border-radius: .35rem; border-left: 3px solid var(--accent-hover);
                    background: var(--accent-bg); color: var(--accent-deep); font-size: 11.5px;
                    line-height: 1.25; cursor: grab; z-index: 2; touch-action: none;
                    box-shadow: 0 1px 1px rgba(15, 23, 42, .06); }
/* На наведении блок перестаёт обрезать содержимое и поднимается над соседями:
   иначе карточка со сведениями обрезалась бы высотой самого события —
   пятнадцатиминутный созвон это восемнадцать пикселей. */
.cal-event:hover  { filter: brightness(.975); box-shadow: 0 2px 6px rgba(15,23,42,.12);
                    overflow: visible; z-index: 20; }
.cal-event-title  { font-weight: 600; display: block; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.cal-event-who    { display: block; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; opacity: .8; }
.cal-time         { font-variant-numeric: tabular-nums; opacity: .75; }
.cal-event.is-compact { display: flex; align-items: baseline; gap: .25rem;
                        padding-top: .05rem; padding-bottom: .05rem; }
.cal-event.is-compact .cal-event-title { flex: 1 1 auto; min-width: 0; }

.cal-k-call       { background: var(--info-bg); border-left-color: var(--info); color: var(--info); }
.cal-k-zoom       { background: var(--accent-tint); border-left-color: var(--accent-soft); color: var(--accent-deep); }
.cal-k-interview  { background: var(--warn-bg); border-left-color: var(--warn); color: var(--warn); }
.cal-k-followup   { background: var(--ok-bg); border-left-color: var(--ok); color: var(--ok); }
.cal-k-task       { background: var(--n-50); border-left-color: var(--n-500); color: var(--n-700); }
.cal-k-busy       { background: var(--n-100); border-left-color: var(--n-400); color: var(--n-600);
                    background-image: repeating-linear-gradient(45deg,
                      rgba(148,163,184,.14) 0 6px, transparent 6px 12px); }

/*
  Итог виден цветом, и цвет означает одно и то же везде: зелёное — проведено,
  красное — не пришёл, зачёркнутое серое — отменено. Раньше проведённое просто
  тускнело и не отличалось от отменённого — оба выглядели «неактивными».
  Правила идут после цветов вида: итог главнее вида.
*/
.cal-event.is-done      { background: var(--ok-bg); border-left-color: var(--ok);
                          color: var(--ok); }
.cal-event.is-no_show   { background: var(--err-bg); border-left-color: var(--err);
                          color: var(--err); }
.cal-event.is-cancelled { background: var(--n-100); border-left-color: var(--n-400);
                          color: var(--n-500); text-decoration: line-through;
                          opacity: .8; z-index: 1; }
/* Во время переноса событие «прозрачно» для мыши: иначе колонка под
   курсором не определяется и перенос между днями невозможен */
.cal-event.is-dragging  { opacity: .92; cursor: grabbing; z-index: 8; pointer-events: none;
                          box-shadow: 0 10px 22px rgba(15,23,42,.25); }
.cal-col.is-target      { background: var(--accent-tint); }
/* Ушли за пределы сетки: перенос будет отменён — говорим об этом видом */
.cal-event.is-cancelling { opacity: .5; border-left-color: var(--err);
                           box-shadow: 0 0 0 1px var(--err) inset; cursor: no-drop; }

/*
  Карточка события по наведению: время, с кем, итог и те же быстрые действия,
  что в планировщике шапки. Открывать окно ради «во сколько и с кем» — дорого,
  а подпись title показывает одну строку и без действий.
*/
/* Карточка раскрывается под событием: сбоку она в дневном виде уезжала за
   край сетки — колонка там одна и занимает всю ширину. */
.cal-hover-card   { position: absolute; left: 0; top: 100%; z-index: 30;
                    display: none; width: 15rem; margin-top: .25rem;
                    padding: .5rem .6rem; text-align: left;
                    background: var(--n-0); color: var(--n-700);
                    border: 1px solid var(--n-200); border-radius: .5rem;
                    box-shadow: 0 12px 28px rgba(15,23,42,.18);
                    font-size: 12px; line-height: 1.35; white-space: normal;
                    text-decoration: none; cursor: default; }
/* Мостик, чтобы курсор доезжал до карточки, не теряя наведение */
.cal-hover-card::before { content: ""; position: absolute; left: 0; right: 0;
                    top: -.3rem; height: .3rem; }
.cal-event:hover .cal-hover-card,
.cal-hover-card:hover { display: block; }
.cal-event.is-dragging .cal-hover-card { display: none; }
/* В неделе у правых колонок карточка уходила бы за край — прижимаем вправо */
.cal-grid.is-week .cal-col:nth-last-child(-n+3) .cal-hover-card { left: auto; right: 0; }

.cal-hover-when   { font-variant-numeric: tabular-nums; color: var(--n-500);
                    font-size: 11px; }
.cal-hover-title  { font-weight: 600; color: var(--n-700); }
.cal-hover-who    { color: var(--n-600); }
.cal-hover-note   { color: var(--n-400); font-size: 11px; margin-top: .15rem; }
.cal-hover-actions{ display: flex; align-items: center; gap: .25rem;
                    margin-top: .35rem; padding-top: .35rem;
                    border-top: 1px solid var(--n-100); }

/* Подсказка «двойным кликом — новое событие» на пустом месте */
.cal-hint         { position: absolute; left: 0; right: 0; bottom: .35rem;
                    text-align: center; font-size: 11px; color: var(--n-400);
                    pointer-events: none; }

/* Полоса «весь день» и чипы в ней */
.cal-chip         { display: block; width: 100%; text-align: left; margin-bottom: .15rem;
                    padding: .15rem .35rem; border-radius: .3rem; font-size: 11px;
                    line-height: 1.3; border-left: 3px solid var(--accent-hover); background: var(--accent-bg);
                    color: var(--accent-deep); cursor: pointer; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.is-done      { background: var(--ok-bg); border-left-color: var(--ok);
                         color: var(--ok); }
.cal-chip.is-no_show   { background: var(--err-bg); border-left-color: var(--err);
                         color: var(--err); }
.cal-chip.is-cancelled { background: var(--n-100); border-left-color: var(--n-400);
                         color: var(--n-500); text-decoration: line-through; }

.cal-slot         { font-variant-numeric: tabular-nums; }
.cal-legend       { display: flex; flex-wrap: wrap; gap: .5rem; padding: .35rem .75rem;
                    border-top: 1px solid var(--n-100); font-size: 11px; color: var(--n-500); }
.cal-legend i     { display: inline-block; width: .55rem; height: .55rem; border-radius: .15rem;
                    margin-right: .25rem; vertical-align: -1px; }

/* Боковая панель: план дня, окна, настройки */
/* Панель держится в поле зрения, пока сетка едет мимо: иначе на длинном дне
   план и свободные окна уезжают вверх и колонка остаётся пустой */
.cal-side         { display: flex; flex-direction: column; gap: .75rem;
                    position: sticky; top: .5rem;
                    max-height: calc(100vh - 1rem); overflow-y: auto; }
@media (max-width: 1180px) { .cal-side { position: static; max-height: none; } }
.cal-side .cal-card { padding: 0; }
.cal-pad          { padding: .75rem; }
.cal-side summary { cursor: pointer; }

/* Карточка события поверх сетки: собственного модального окна в проекте нет */
.cal-modal      { position: fixed; inset: 0; z-index: 60; display: flex;
                  align-items: center; justify-content: center; padding: 1rem; }
.cal-modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
/* Внутри окна события календарик и полоса плотнее: там нет узкой колонки,
   зато есть форма, и лишняя высота гонит окно за край экрана */
.cal-modal-body .cal-mini-day { height: 1.3rem; line-height: 1.3rem; font-size: 11px; }
.cal-modal-body .cal-mini     { margin-top: .1rem; }
.cal-modal-body .cal-busy     { height: 1.2rem; margin-top: .75rem; }
.cal-modal-body .cal-pick-line{ min-height: 1.6em; margin-top: .2rem; }

.cal-modal-body { position: relative; width: 30rem; max-width: 100%;
                  max-height: 90vh; overflow-y: auto; background: var(--n-0);
                  border-radius: .75rem; box-shadow: 0 20px 40px rgba(15,23,42,.18); }

/* Поиск кандидата по ФИО: выпадающие подсказки под полем ввода */
.cal-field         { position: relative; }
.cal-suggest       { position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
                     margin-top: .125rem; background: var(--n-0); border: 1px solid var(--n-200);
                     border-radius: .375rem; box-shadow: 0 8px 20px rgba(15,23,42,.12);
                     max-height: 15rem; overflow-y: auto; }
.cal-suggest-row   { display: block; width: 100%; text-align: left; padding: .35rem .5rem;
                     border-bottom: 1px solid var(--n-100); cursor: pointer; background: none; }
.cal-suggest-row:last-child { border-bottom: none; }
.cal-suggest-row:hover      { background: var(--n-50); }
.cal-suggest-name  { display: block; font-size: 13px; color: var(--n-700); }
.cal-suggest-meta  { display: block; font-size: 11px; color: var(--n-400); }
.cal-suggest-meta .stage-dot { display: inline-block; margin-right: .25rem; }
.cal-suggest-empty { padding: .5rem; font-size: 12px; color: var(--n-400); }
.cal-chosen        { display: flex; align-items: center; gap: .25rem; font-size: 11px;
                     color: var(--accent-deep); margin-top: .2rem; }
/* app.css грузится после tailwind.css, поэтому .hidden нужно вернуть силу:
   иначе блок «выбран: …» виден до того, как кого-то выбрали */
.cal-chosen.hidden { display: none; }
.cal-chosen button { color: var(--n-400); }
.cal-chosen button:hover { color: var(--err); }

/*
  Утилиты, которых нет в собранном tailwind.css. Часть из них шаблоны проекта
  уже использовали молча — цветной полосы слева у заметок и прижатой вправо
  кнопки попросту не было видно.
*/
.ml-auto        { margin-left: auto; }
.rounded-r      { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }
.break-all      { word-break: break-all; }
.break-words    { overflow-wrap: break-word; }
.max-w-full     { max-width: 100%; }
.text-red-800   { color: var(--err); }
.border-red-400 { border-color: var(--err); }
.border-amber-400 { border-color: var(--warn); }
.hover\:bg-amber-50:hover { background-color: var(--warn-bg); }

/* Поиск кандидата по ФИО: выпадающие подсказки под полем ввода */
.cal-field         { position: relative; }
.cal-suggest       { position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
                     margin-top: .125rem; background: var(--n-0); border: 1px solid var(--n-200);
                     border-radius: .375rem; box-shadow: 0 8px 20px rgba(15,23,42,.12);
                     max-height: 15rem; overflow-y: auto; }
.cal-suggest-row   { display: block; width: 100%; text-align: left; padding: .35rem .5rem;
                     border-bottom: 1px solid var(--n-100); cursor: pointer; background: none; }
.cal-suggest-row:last-child { border-bottom: none; }
.cal-suggest-row:hover      { background: var(--n-50); }
.cal-suggest-name  { display: block; font-size: 13px; color: var(--n-700); }
.cal-suggest-meta  { display: block; font-size: 11px; color: var(--n-400); }
.cal-suggest-meta .stage-dot { display: inline-block; margin-right: .25rem; }
.cal-suggest-empty { padding: .5rem; font-size: 12px; color: var(--n-400); }
.cal-chosen        { display: flex; align-items: center; gap: .25rem; font-size: 11px;
                     color: var(--accent-deep); margin-top: .2rem; }
/* app.css грузится после tailwind.css, поэтому .hidden нужно вернуть силу:
   иначе блок «выбран: …» виден до того, как кого-то выбрали */
.cal-chosen.hidden { display: none; }
.cal-chosen button { color: var(--n-400); }
.cal-chosen button:hover { color: var(--err); }

/* Перетаскивание событий */
.cal-event            { touch-action: none; }
.cal-event.is-dragging{ opacity: .9; cursor: grabbing;
                        box-shadow: 0 8px 18px rgba(15,23,42,.22); z-index: 6; }
.cal-canvas.is-dragging { cursor: grabbing; }
.cal-chip[draggable="true"] { cursor: grab; }
.cal-week-col.is-drop { background: var(--accent-bg); border-color: var(--accent-soft); }

/* ══════════════════════════════════════════════════════════════
   Счётчик непрочитанных

   Был «таблеткой»: padding по бокам растягивал фон, и у однозначного числа
   кружок выходил овальным. Задаём равные ширину и высоту, а двузначные числа
   расширяют его симметрично через min-width.
   ══════════════════════════════════════════════════════════════ */
.unread-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 .3rem;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--n-0);
    background: var(--accent);
}

/* Увеличение фото по клику. Открывается поверх всего, закрывается щелчком или
   Esc. Свои размеры, а не утилиты Tailwind: произвольных значений вроде
   max-w-[90vw] в собранном наборе нет, и такой лайтбокс показывал бы снимок
   в натуральную величину, вылезая за экран. */
.photo-zoom {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .72);
    cursor: zoom-out;
}
.photo-zoom[hidden] { display: none; }
.photo-zoom img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: .75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
    background: var(--n-0);
}
.chat-avatar[data-zoom] { cursor: zoom-in; }

/* ══════════════════════════════════════════════════════════════
   Строка списка чатов

   Три яруса, как у RobokodCoach: имя со счётчиком, вакансия с каналами,
   превью с датой. Дата прижата вправо и не переносится, имя обрезает только
   счётчик — в узкой колонке это единственный способ уместить всё без каши.
   ══════════════════════════════════════════════════════════════ */
.chat-item {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 8px 12px;
    border-bottom: 1px solid var(--n-100);
    cursor: pointer;
    border-left: 3px solid transparent;
}
.chat-item:hover  { background: var(--n-50); }
.chat-item.active { background: var(--accent-bg); border-left-color: var(--accent); }

.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.chat-name {
    display: flex; align-items: center; gap: 5px;
    font-size: 13.5px; line-height: 1.35;
}
.chat-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-name .unread-dot { margin-left: auto; flex: none; }
.chat-flag { flex: none; font-size: 11px; line-height: 1; }
.chat-item.unread .chat-name { font-weight: 700; color: var(--n-700); }
.chat-item.read  .chat-name { color: var(--n-500); }

.chat-meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.chat-group {
    flex: 1 1 auto; min-width: 0;
    font-size: 11.5px; line-height: 1.35; color: var(--accent);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-state      { flex: none; font-size: 11px; color: var(--warn); }
.chat-state-late { color: var(--err); font-weight: 600; }
/* Подпись ответственного — единственная метка в строке, чья длина зависит от
   данных, а не от нас. С `flex: none` она распирала строку: список переставал
   помещаться по ширине и получал горизонтальную прокрутку. Сокращать текст
   мало — имя бывает длинным и в сокращении («Константинопольская К. К.»),
   поэтому метка ещё и умеет сжиматься с многоточием. */
.chat-lead {
    /* Не сжимается: подпись «Миронова Т. С.» уже коротка, и жать её дальше
       некуда — из «Миро...» не узнать никого. Место уступает название
       вакансии рядом: оно длиннее и переживает обрезку легче. Предел в 45%
       оставлен на случай очень длинной фамилии — тогда обрежется и подпись,
       но строка всё равно не распрёт список. */
    flex: 0 0 auto; min-width: 0; max-width: 45%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-channels   { flex: none; display: flex; gap: 3px; margin-left: auto; }

.chat-foot { display: flex; align-items: baseline; gap: 8px; }
/* Полоса «не ушло» над списком диалогов. Имена — ссылки в сами разговоры,
   крестик прячет полосу до следующей неудачи. */
.queue-note       { display: flex; align-items: flex-start; gap: .25rem;
                    border-radius: .25rem; padding: .15rem .35rem .2rem .5rem;
                    font-size: 11px; line-height: 1.45; }
/* Своё display перебивает браузерное [hidden]{display:none} — общее правило
   выше это закрывает, но и здесь пусть будет видно, что блок прячут. */
.queue-note[hidden] { display: none; }
.queue-note.is-bad  { background: var(--err-bg); color: var(--err); }
.queue-note.is-wait { background: var(--warn-bg); color: var(--warn); }
.queue-note-body  { flex: 1 1 auto; min-width: 0; }
.queue-note-who   { font-weight: 600; text-decoration: underline; }
.queue-note-hide  { flex: none; padding: 0 .15rem; font-size: 13px; line-height: 1.2;
                    color: inherit; opacity: .55; cursor: pointer; background: none;
                    border: 0; }
.queue-note-hide:hover { opacity: 1; }

/* Колечко «готовится черновик» — рядом с именем, в один ряд с флажком:
   там же, где и остальные пометки о состоянии диалога. */
.chat-draft       { flex: none; display: inline-flex; align-items: center;
                    color: var(--accent); }

.chat-preview {
    flex: 1; min-width: 0;
    font-size: 12px; line-height: 1.35; color: var(--n-500);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-mine { color: var(--n-400); }
.chat-time { flex: none; font-size: 11px; color: var(--n-400); white-space: nowrap; }

/* Счётчик непрочитанных — красный кружок, как принято в мессенджерах */
.unread-dot { background: var(--err); cursor: pointer; }

/*
  Под курсором кружок перестаёт быть счётчиком и показывает, что сделает
  щелчок: галочку — «прочитано», стрелку — «вернуть в работу». Без этого
  красное число выглядело просто числом, и нажать на него никто не догадывался.

  Знак кладём НАКРЫВАЮЩИМ слоем, а не подменяем текст. Ширину кружка задаёт
  само число: у «3» она одна, у «12» другая. Спрячь число — кружок съедет к
  min-width, и строка дёрнется ровно в тот момент, когда в неё целятся.
  Наложение оставляет ширину нетронутой при любом счётчике.
*/
.unread-dot { position: relative; }
.unread-dot:hover::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: var(--ok);
    color: var(--n-0);
    font-size: 11px;
    line-height: 1;
}

/*
  Пустой кружок у прочитанного диалога: вернуть метку. Места в строке не
  занимает — виден только при наведении, ровно там же, где у непрочитанного
  стоит счётчик. Отдельной колонки под «управление» не появилось.
*/
.unread-dot-off {
    background: none;
    border: 1px dashed var(--n-300);
    opacity: 0;
    transition: opacity .12s;
}
.chat-item:hover .unread-dot-off { opacity: 1; }
.unread-dot-off:hover { border-color: var(--accent); border-style: solid; }
.unread-dot-off:hover::after {
    content: "↺";
    background: none;
    color: var(--accent-deep);
    font-size: 12px;
}

/* Метки каналов в строке списка: какие мессенджеры есть у этого человека */
.ch-tag {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: 0 .3rem;
    height: 1rem;
    border-radius: .25rem;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--n-400);
    background: var(--n-100);
    white-space: nowrap;
}
.ch-tag b { font-weight: 700; color: var(--accent); }
.ch-tag.is-active.ch-hh  { color: var(--ch-hh); background: var(--ch-hh-bg); }
.ch-tag.is-active.ch-max { color: var(--ch-max); background: var(--ch-max-bg); }
.ch-tag.is-active.ch-tg  { color: var(--ch-tg); background: var(--ch-tg-bg); }
.ch-tag.is-active        { color: var(--n-600); background: var(--n-200); }
/* ══════════════════════════════════════════════════════════════
   Записи интервью

   Собранный tailwind.css статичен, и часть нужных утилит в нём просто
   отсутствует: file:*-варианты, h-px, оттенок hover у янтарной кнопки.
   Классы, написанные в разметке, но отсутствующие в наборе, не выдают
   ошибку — они молча ничего не делают, поэтому держим их здесь.
   ══════════════════════════════════════════════════════════════ */

.h-px { height: 1px; }

/* Кнопка выбора файла: браузерный вид у неё свой, tailwind до него не достаёт */
.file-input::file-selector-button {
    margin-right: .75rem;
    padding: .375rem .75rem;
    border: 0;
    border-radius: .5rem;
    font-size: 12px;
    font-weight: 500;
    background: var(--n-100);
    color: var(--n-700);
    cursor: pointer;
}
.file-input::file-selector-button:hover { background: var(--n-200); }


/* Плеер: чёрные поля вокруг кадра вместо белого прямоугольника страницы */
video { background: #000; }

/* ══════════════════════════════════════════════════════════════
   Полоса «ждёт ответа»

   Между перепиской и полем ввода: взгляд проходит здесь перед тем, как
   отвечать. Мягкий янтарный фон, а не красный — это напоминание, а не авария.
   ══════════════════════════════════════════════════════════════ */
.await-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /* Вдвое ниже прежнего: полоса напоминает, а не занимает место. Она висит
       над полем ответа постоянно, и половина её высоты была воздухом. */
    padding: .25rem .875rem;
    background: var(--warn-bg);
    border-top: 1px solid var(--warn-bg);
}
.await-text { font-size: 11px; color: var(--warn); }
.await-btn {
    padding: .1rem .5rem;
    font-size: 11px;
    font-weight: 500;
    color: var(--n-600);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: .375rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.await-btn:hover { background: var(--n-50); border-color: var(--n-400); }
.await-btn:disabled { opacity: .55; cursor: default; }

/* Выбор канала: текущий выделен, остальные — рядом одним рядом */
.channel-pick { gap: .3rem; }

/* ══════════════════════════════════════════════════════════════
   Привязка диалога к кандидату

   Мессенджер даёт только имя из профиля. Предлагаем похожих, но выбирает
   человек: тёзок много, а неверная привязка открывает чужое резюме.
   ══════════════════════════════════════════════════════════════ */
.link-person-box { display: block; }
.link-person-box > summary {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    list-style: none;
}
.link-person-box > summary::-webkit-details-marker { display: none; }
.link-person-flag { font-size: 11px; color: var(--warn); }
.link-person-open {
    font-size: 11px;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.link-person { margin-top: .35rem; }
.link-person-search input {
    background: var(--n-0);
    width: 100%;
    padding: .25rem .5rem;
    font-size: 12px;
    color: var(--n-700);
    border: 1px solid var(--n-300);
    border-radius: .375rem;
}
.link-person-search input:focus {
    outline: none;
    border-color: var(--accent-hover);
    box-shadow: var(--ring);
}
.link-person-list {
    margin-top: .3rem;
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid var(--n-200);
    border-radius: .375rem;
}
.link-person-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 .5rem;
    width: 100%;
    padding: .3rem .5rem;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--n-100);
    cursor: pointer;
}
.link-person-row:hover { background: var(--accent-bg); }
.link-person-name { font-size: 12px; font-weight: 600; color: var(--n-700); }
.link-person-why {
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 10px;
    color: var(--n-400);
    white-space: nowrap;
}
.link-person-meta {
    grid-column: 1;
    font-size: 11px;
    color: var(--n-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.link-person-empty { margin-top: .3rem; font-size: 11px; color: var(--n-400); }

/* Строка «Кандидат» занимает всю ширину: внутри неё поиск и список, а не фишки */
.chat-rows dd.chat-rows-wide { display: block; }
.link-person-phone { display: flex; gap: .25rem; margin-top: .35rem; }
.link-person-phone input {
    background: var(--n-0);
    flex: 1 1 auto;
    min-width: 0;
    padding: .25rem .5rem;
    font-size: 11px;
    border: 1px solid var(--n-200);
    border-radius: .375rem;
    color: var(--n-600);
}
.link-person-phone button {
    padding: .25rem .6rem;
    font-size: 11px;
    color: var(--n-600);
    background: var(--n-100);
    border: 0;
    border-radius: .375rem;
    cursor: pointer;
}
.link-person-phone button:hover { background: var(--n-200); }

/* «Написать в MAX/Telegram» — канал, где диалога ещё нет, но номер известен */
.inline-form { display: inline-flex; }
.chip-ch.is-start {
    border-style: dashed;
    border-color: var(--accent-soft);
    color: var(--accent);
    cursor: pointer;
}
.chip-ch.is-start:hover { background: var(--accent-bg); border-style: solid; }
.chip-plus { font-size: 10px; color: var(--n-400); }
.chip-ch.is-start:hover .chip-plus { color: var(--accent-hover); }

/* Предупреждение о том, что отправка обречена: причина до действия, а не после */
.warn-strip {
    padding: .5rem .875rem;
    font-size: 12px;
    line-height: 1.45;
    color: var(--warn);
    background: var(--warn-bg);
    border-top: 1px solid var(--warn-bg);
}

/* Добавление контакта прямо в строке «Связь» */
.add-contact { display: inline-flex; gap: .2rem; align-items: center; }
.add-contact input {
    width: 8.5rem;
    padding: .1rem .4rem;
    font-size: 11px;
    color: var(--n-600);
    border: 1px dashed var(--n-300);
    border-radius: .375rem;
    background: transparent;
}
.add-contact input:focus {
    outline: none;
    border-style: solid;
    border-color: var(--accent-hover);
    background: var(--n-0);
}
.add-contact button {
    padding: 0 .4rem;
    height: 1.35rem;
    font-size: 12px;
    color: var(--accent);
    background: var(--accent-bg);
    border: 0;
    border-radius: .375rem;
    cursor: pointer;
}
.add-contact button:hover { background: var(--accent-bg); }

/* ══════════════════════════════════════════════════════════════
   Поле ответа

   Устройство перенято у RobokodCoach: плоский ряд иконок, всплывающие
   панели над ним, круглая кнопка отправки, полоска-ручка сверху. Там это
   обкатано на живой работе, и переизобретать было незачем.
   ══════════════════════════════════════════════════════════════ */

/* Ручка. Отрицательные поля — чтобы полоса не добавляла высоты,
   а лежала в шве между перепиской и вводом. */
.composer-resizer {
    height: 9px;
    margin: -3px 0 -1px;
    flex: none;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}
.composer-resizer::before {
    content: "";
    width: 42px;
    height: 3px;
    border-radius: 2px;
    background: var(--n-300);
    transition: background .12s, width .12s;
}
.composer-resizer:hover::before { background: var(--accent-hover); width: 56px; }

.composer { padding: .25rem .75rem .75rem; border-top: 1px solid var(--n-200); }

/* ── Панель инструментов ─────────────────────────────────────── */
.composer-toolbar { display: flex; align-items: center; gap: 1px; margin-bottom: .375rem; }
.tbar-btn {
    flex: none;
    width: 30px; height: 28px;
    border: 0; background: none; cursor: pointer;
    border-radius: 6px;
    font-size: 16px; line-height: 1;
    color: var(--n-400);
    display: inline-flex; align-items: center; justify-content: center;
    list-style: none;
    transition: background .12s, color .12s;
}
.tbar-btn::-webkit-details-marker { display: none; }
.tbar-btn:hover { background: var(--accent-bg); color: var(--n-700); }
.tbar-btn b { font-weight: 800; font-size: 14px; }
.tbar-btn i { font-style: italic; font-size: 14px; font-family: Georgia, serif; }
.tbar-btn s { font-size: 14px; }
.tbar-mono { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tbar-sep { width: 1px; height: 18px; background: var(--n-200); margin: 0 5px; flex: none; }
.tbar-gap { flex: 1 1 auto; }
.tbar-note { font-size: 11px; color: var(--warn); }
.tbar-undo {
    border: 0; background: none; padding: 0 .25rem; cursor: pointer;
    font-family: inherit;
}
.tbar-undo:hover { color: var(--err); }
.tbar-undo:empty { display: none; }

/* ── Всплывающие панели ──────────────────────────────────────── */
.tbar-pop { position: relative; }
.tbar-pop[open] > .tbar-btn { background: var(--accent-bg); color: var(--accent-deep); }

.pop {
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 40;
    min-width: 12rem; max-height: 17rem; overflow-y: auto;
    padding: .5rem;
    background: var(--n-0);
    border: 1px solid var(--n-300);
    border-radius: .625rem;
    box-shadow: var(--sh-lg);
}
.pop-wide  { min-width: 17rem; }
.pop-right { left: auto; right: 0; }
.pop-title {
    font-size: 11px; font-weight: 600; color: var(--n-400);
    text-transform: uppercase; letter-spacing: .03em;
    margin-bottom: .35rem;
}
.pop-empty { font-size: 11px; color: var(--n-400); margin: .35rem 0 0; }
.pop-item {
    display: block; width: 100%; text-align: left;
    padding: .32rem .45rem;
    border: 0; background: none; border-radius: .375rem;
    font-size: 12px; color: var(--n-700); cursor: pointer;
}
.pop-item:hover { background: var(--accent-bg); }
.pop-item em { display: block; font-style: normal; font-size: 10px; color: var(--n-400); }
.pop-item-off { color: var(--n-400); }

/* ── Уголок фоновых задач ────────────────────────────────────── */
/*
  Справа внизу, отдельной колонкой. Задача считается минутами, и всё это время
  карточка живёт в углу экрана — поэтому она сворачивается в одну кнопку.

  Карточка шире и крупнее прежнего: в ней стоит имя кандидата со счётчиком
  («Скрининг 6/48: Александр Трус»), и в семнадцати рем оно обрезалось на
  середине — ради экономии угла экрана рекрутер терял единственное, ради чего
  в карточку и смотрит.
*/
.task-dock {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
    display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
    max-width: 23rem;
}
.task-dock.is-empty { display: none; }

/* Свернуть/развернуть. Прежде здесь стояла угловая скобка в мелкой плашке —
   на неё не попадали мышью и не замечали вовсе. */
.task-dock-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem;
    color: var(--n-500); background: var(--n-0);
    border: 1px solid var(--n-200); border-radius: 999px;
    box-shadow: var(--sh-lg); cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.task-dock-toggle:hover {
    color: var(--accent); background: var(--accent-tint); border-color: var(--accent-soft);
}
.task-dock-chevron {
    width: 1.25rem; height: 1.25rem; stroke-width: 2.5;
    transition: transform .2s ease;
}
/* Свёрнуто — скобка смотрит вверх: нажатие развернёт */
.task-dock.is-collapsed .task-dock-chevron { transform: rotate(180deg); }
/* И сама кнопка становится акцентной: свёрнутая полоска в углу иначе теряется,
   а она — единственный след идущей работы. */
.task-dock.is-collapsed .task-dock-toggle {
    color: var(--accent); border-color: var(--accent-soft);
}
.task-dock-count {
    min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--on-solid);
    background: var(--accent); border-radius: 999px;
}
.task-dock-count:empty { display: none; }

.task-dock-list { display: flex; flex-direction: column; gap: .5rem; }
/* Свёрнутая — только кнопка с числом: видно, что работа идёт, и не мешает */
.task-dock.is-collapsed .task-dock-list { display: none; }

.task-card {
    width: 23rem;
    padding: .85rem .95rem;
    background: var(--n-0);
    border: 1px solid var(--n-200); border-radius: .625rem;
    box-shadow: var(--sh-lg);
}
.task-card-row   { display: flex; align-items: flex-start; gap: .7rem; }
.task-card-title { font-size: 15px; font-weight: 600; color: var(--n-700); line-height: 1.3; }
.task-card-sub   { font-size: 13px; color: var(--n-500); line-height: 1.35;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-card-prog  { margin-top: .3rem; font-size: 13px; line-height: 1.4; }

/* Кольцо загрузки и есть кнопка «стоп»: навёл — кольцо гаснет, на его месте
   красный квадрат. Раньше остановка пряталась в сером значке в углу карточки,
   и её искали глазами каждый раз. */
.task-ring {
    position: relative; flex: none;
    width: 2.1rem; height: 2.1rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 999px;
    transition: background .15s ease;
}
button.task-ring { cursor: pointer; }
.task-ring-icon { width: 1.5rem; height: 1.5rem; transition: opacity .15s ease; }
.task-ring-stop {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center;
    color: var(--err);
}
button.task-ring:hover { background: var(--err-bg); }
button.task-ring:hover .task-ring-icon { opacity: .15; }
button.task-ring:hover .task-ring-stop { display: flex; }

/* Та же остановка словом — для тех, кто ищет кнопку, а не наводит на значок */
.task-stop {
    flex: none; padding: .25rem .6rem;
    font-size: 13px; font-weight: 500; color: var(--err);
    background: var(--err-bg);
    border: 1px solid transparent; border-radius: .375rem; cursor: pointer;
    transition: border-color .15s ease;
}
.task-stop:hover { border-color: var(--err); }
.task-stop[disabled] { opacity: .6; cursor: default; }
.task-dismiss {
    flex: none; padding: .2rem;
    color: var(--n-400); background: transparent; border: 0; cursor: pointer;
    border-radius: .375rem;
}
.task-dismiss:hover { color: var(--n-700); background: var(--n-100); }

/* ── История и комментарии ───────────────────────────────────── */
/*
  Как на hh: группы по вакансиям, под каждой события со стрелками. Квадратные
  углы у поля ввода — оно тут не карточка, а место для набора текста, и
  скруглённая форма в узкой колонке лишь съедала ширину.
*/
.hist { padding: .75rem; border-top: 1px solid var(--n-200); }
.hist-head {
    display: flex; align-items: baseline; gap: .5rem;
    margin-bottom: .5rem;
    font-size: 11px; font-weight: 600; color: var(--n-500);
    text-transform: uppercase; letter-spacing: .03em;
}
/* Путь к полной истории у hh: их «История» собрана по человеку и включает
   отклики с прежних резюме, наша — по тому резюме, которое мы знаем. */
.hist-hh-link       { margin-left: auto; font-weight: 500; text-transform: none;
                      letter-spacing: 0; color: var(--n-400); }
.hist-hh-link:hover { color: var(--accent); }

.hist-add { margin-bottom: .75rem; }
.hist-add-btn {
    display: inline-block;
    padding: .3rem .6rem;
    font-size: 12px; color: var(--accent-deep);
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft); border-radius: .375rem;
    cursor: pointer; list-style: none;
}
.hist-add-btn::-webkit-details-marker { display: none; }
.hist-add-btn:hover { background: var(--accent-bg); }
.hist-add[open] .hist-add-btn { display: none; }

/* Поле во всю ширину колонки и с прямыми углами */
.hist-input {
    display: block; width: 100%;
    margin: 0 0 .4rem;
    padding: .5rem;
    font-size: 12px; line-height: 1.45; font-family: inherit; color: var(--n-700);
    background: var(--n-0);
    border: 1px solid var(--n-300); border-radius: 0;
    resize: vertical;
}
.hist-input:focus { outline: none; border-color: var(--accent); }
.hist-push {
    display: flex; align-items: center; gap: .35rem;
    font-size: 11px; color: var(--n-500);
}
.hist-actions { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.hist-hint { flex: 1 1 auto; font-size: 10px; color: var(--n-400); }
.hist-save {
    padding: .3rem .7rem;
    font-size: 12px; color: #fff; background: var(--accent);
    border: 0; border-radius: 0; cursor: pointer;
}
.hist-save:hover { background: var(--accent-hover); }
.hist-note {
    margin: 0 0 .5rem; padding: .25rem .4rem;
    font-size: 11px; color: var(--ok); background: var(--ok-bg);
}

.hist-group { margin-bottom: .75rem; }
.hist-vac {
    margin-bottom: .2rem;
    font-size: 12px; font-weight: 600; color: var(--n-700);
}
.hist-area { font-weight: 400; color: var(--n-400); }
.hist-line {
    display: flex; gap: .3rem;
    font-size: 12px; color: var(--n-500); line-height: 1.5;
}
.hist-arrow { flex: none; color: var(--n-300); }
.hist-what { overflow-wrap: anywhere; }
.hist-cmt { margin: .3rem 0 .3rem .9rem; padding-left: .5rem;
            border-left: 2px solid var(--accent-soft); }
/* Дата, автор и источник заметки. Десять пикселей серым по светлому читались
   с усилием, а это не украшение: по ним понимают, кто и когда это написал. */
.hist-cmt-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
    font-size: 11px; color: var(--n-500);
}
.hist-src {
    padding: 0 .25rem;
    font-size: 9px; font-weight: 600;
    color: var(--n-500); background: var(--n-100);
}
.hist-src-internal { color: var(--accent-deep); background: var(--accent-tint); }
.hist-src-hh-ru { color: var(--err); background: var(--err-bg); }
.hist-cmt-text {
    margin-top: .1rem;
    font-size: 12px; line-height: 1.45; color: var(--n-700);
    white-space: pre-line; overflow-wrap: anywhere;
}
.hist-sync { display: flex; gap: .5rem; margin-top: .2rem; font-size: 10px; }
.hist-sent { color: var(--ok); }
.hist-wait { color: var(--n-400); }
.hist-empty { margin: 0; font-size: 11px; color: var(--n-500); }

/* Вложение из чата hh: картинка — превью, остальное — строкой */
.msg-file { display: inline-block; margin-top: .25rem; text-decoration: none; }
.msg-img {
    display: block; max-width: 100%; max-height: 15rem;
    border-radius: .375rem; border: 1px solid var(--n-200);
}
.msg-file:hover .msg-img { border-color: var(--accent); }

/* Вложение, которого hh не отдаёт: след со ссылкой вместо пустоты */
.msg-att {
    display: inline-block;
    padding: .25rem .45rem;
    font-size: 12px; color: var(--accent-deep);
    background: var(--accent-tint); border-radius: .375rem;
    text-decoration: none;
}
.msg-att:hover { background: var(--accent-bg); text-decoration: underline; }

/* ── Правка и удаление сообщения ─────────────────────────────── */
/*
  Кнопки живут слева от своего пузыря и появляются при наведении на строку:
  постоянные значки у каждой реплики превращают переписку в панель управления,
  а нужны они изредка.
*/
.msg-row { align-items: center; gap: .35rem; }
.msg-tools { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.msg-row:hover .msg-tools { opacity: 1; }
.msg-tool {
    width: 22px; height: 22px;
    border: 0; background: none; border-radius: .25rem;
    font-size: 12px; color: var(--n-400); cursor: pointer;
}
.msg-tool:hover { background: var(--n-100); color: var(--n-700); }
.msg-tool-del:hover { background: var(--err-bg); color: var(--err); }

/* Удалённое не стираем, а гасим: кандидат отвечал именно на это */
.msg-gone { background: var(--n-50); border: 1px dashed var(--n-200); }
.msg-gone-text { color: var(--n-400); font-style: italic; }
/* Причина неотправки под письмом — читается, а не ищется наведением */
.msg-fail-reason {
    margin-top: .25rem;
    font-size: 11px;
    line-height: 1.35;
    color: var(--err);
}

.msg-edit { width: 100%; max-width: 34rem; margin-left: auto; }
.msg-edit-box {
    width: 100%;
    padding: .5rem .625rem;
    font-size: 14px; line-height: 1.45; font-family: inherit; color: var(--n-700);
    background: var(--n-0);
    border: 1px solid var(--accent); border-radius: .5rem;
    resize: vertical;
}
.msg-edit-box:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }
.msg-edit-row { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.msg-edit-note { flex: 1 1 auto; font-size: 11px; color: var(--n-400); }
.msg-edit-cancel {
    padding: .25rem .6rem;
    font-size: 12px; color: var(--n-500);
    background: none; border: 0; border-radius: .375rem; cursor: pointer;
}
.msg-edit-cancel:hover { background: var(--n-100); }
.msg-edit-save {
    padding: .25rem .7rem;
    font-size: 12px; color: #fff; background: var(--accent);
    border: 0; border-radius: .375rem; cursor: pointer;
}
.msg-edit-save:hover { background: var(--accent-hover); }

/* ── Редактор шаблонов ───────────────────────────────────────── */
/*
  Панель редактора не помещается в колонку диалога: у #thread-pane
  overflow: hidden ради скруглений и внутренней прокрутки, и всё, что шире,
  обрезалось ровно по границе с правой панелью — вместе с кнопкой «＋» и
  столбцом правки. Ширина при этом разбегалась сама: у абсолютного блока она
  подбирается по содержимому, а строки списка не переносятся.

  Поэтому fixed: он не знает ни про какой overflow предка. Место назначает JS
  при раскрытии (chatComposer.placeTemplates), потому что fixed считается от
  окна, а привязана панель к кнопке.
*/
.pop-tpl {
    position: fixed;
    /* Место до того, как JS посчитает точное: композер и так внизу слева,
       так что мелькнуть панель может разве что на пару пикселей мимо. */
    left: 1rem; bottom: 7rem;
    width: 26rem; max-width: calc(100vw - 2rem);
    min-width: 0; max-height: min(24rem, calc(100vh - 6rem));
    z-index: 55;
}

.tpl-hidden-note {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-top: .35rem; padding-top: .35rem;
    border-top: 1px solid var(--n-200);
    font-size: 11px; color: var(--n-400);
}
.tpl-restore {
    border: 0; background: none; padding: 0;
    font-size: 11px; color: var(--accent-deep); cursor: pointer;
}
.tpl-restore:hover { text-decoration: underline; }
.tpl-head { display: flex; gap: .3rem; margin-bottom: .4rem; }
.tpl-loading-head { display: flex; align-items: center; justify-content: space-between; }
.tpl-close {
    flex: none; width: 1.75rem; height: 1.75rem; padding: 0;
    border: 0; border-radius: .375rem; background: none;
    color: var(--n-400); font-size: 18px; line-height: 1; cursor: pointer;
}
.tpl-close:hover { color: var(--n-700); background: var(--n-100); }
.tpl-search {
    flex: 1 1 auto; min-width: 0;
    padding: .3rem .5rem;
    font-size: 12px; color: var(--n-700);
    background: var(--n-0);
    border: 1px solid var(--n-300); border-radius: .375rem;
}
.tpl-search:focus { outline: none; border-color: var(--accent); }
.tpl-new {
    flex: none; width: 26px; height: 26px;
    border: 1px solid var(--n-300); border-radius: .375rem;
    background: var(--n-0); color: var(--n-500);
    font-size: 13px; line-height: 1; cursor: pointer;
}
.tpl-new:hover { background: var(--accent-bg); color: var(--accent-deep); border-color: var(--accent); }

.tpl-note {
    margin: 0 0 .4rem; padding: .3rem .45rem;
    font-size: 11px; color: var(--warn);
    background: var(--warn-bg); border-radius: .375rem;
}

.tpl-form {
    display: flex; flex-direction: column; gap: .3rem;
    margin-bottom: .5rem; padding: .45rem;
    background: var(--n-50); border: 1px solid var(--n-200); border-radius: .5rem;
}
.tpl-title, .tpl-body {
    width: 100%;
    padding: .35rem .5rem;
    font-size: 12px; color: var(--n-700); font-family: inherit;
    background: var(--n-0);
    border: 1px solid var(--n-300); border-radius: .375rem;
}
.tpl-body { line-height: 1.45; resize: vertical; }
.tpl-title:focus, .tpl-body:focus { outline: none; border-color: var(--accent); }
.tpl-vars { display: flex; flex-wrap: wrap; gap: 3px; }
.tpl-var {
    padding: 2px 6px;
    font-size: 10px; color: var(--n-500);
    background: var(--n-0);
    border: 1px solid var(--n-300); border-radius: 999px; cursor: pointer;
}
.tpl-var:hover { background: var(--accent-bg); color: var(--accent-deep); border-color: var(--accent); }
.tpl-scope { display: flex; align-items: center; gap: .35rem; font-size: 11px; color: var(--n-500); }
.tpl-stage { display: flex; align-items: center; gap: .35rem; font-size: 11px; color: var(--n-500); }
.tpl-stage select {
    flex: 1 1 auto; min-width: 0;
    padding: .2rem .35rem;
    font-size: 11px; color: var(--n-700); font-family: inherit;
    background: var(--n-0);
    border: 1px solid var(--n-300); border-radius: .375rem;
}
.tpl-auto {
    margin-left: .35rem;
    font-style: normal; font-size: 10px;
    color: var(--accent-deep);
}
.pop-title-sub { margin-top: .45rem; padding-top: .35rem; border-top: 1px solid var(--n-200); }
.tpl-actions { display: flex; gap: .35rem; }
.tpl-save {
    padding: .3rem .7rem;
    font-size: 12px; color: #fff; background: var(--accent);
    border: 0; border-radius: .375rem; cursor: pointer;
}
.tpl-save:hover { background: var(--accent-hover); }
.tpl-cancel {
    padding: .3rem .6rem;
    font-size: 12px; color: var(--n-500);
    background: none; border: 0; border-radius: .375rem; cursor: pointer;
}
.tpl-cancel:hover { background: var(--n-100); }

.tpl-list { display: flex; flex-direction: column; }
.tpl-row { display: flex; align-items: center; gap: .2rem; border-radius: .375rem; }
.tpl-row:hover { background: var(--accent-bg); }
/* Ручка порядка. Бледная, пока строка не под курсором, — как ✎ и ✕ справа:
   постоянно яркие значки у каждой строки превращают список в панель управления */
.tpl-grip {
    flex: none; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    width: 14px; margin-left: .1rem;
    font-size: 12px; line-height: 1; color: var(--n-400);
    cursor: grab; user-select: none;
    touch-action: none;   /* пальцем — тянуть строку, а не прокручивать панель */
    opacity: .45; transition: opacity .12s;
}
.tpl-row:hover .tpl-grip { opacity: 1; }
.tpl-list.is-sorting, .tpl-list.is-sorting * { cursor: grabbing; }
.tpl-list.is-sorting .tpl-row:hover { background: none; }
.tpl-row.is-dragging,
.tpl-list.is-sorting .tpl-row.is-dragging {
    position: relative; z-index: 1;
    background: var(--accent-bg);
    box-shadow: var(--sh-lg);
}
.tpl-row.is-dragging .tpl-grip { opacity: 1; }
.tpl-pick {
    flex: 1 1 auto; min-width: 0;
    display: block; text-align: left;
    padding: .32rem .45rem;
    border: 0; background: none; cursor: pointer;
}
.tpl-name {
    display: block; font-size: 12px; color: var(--n-700);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl-pick em {
    display: block; font-style: normal; font-size: 10px; color: var(--n-400);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl-tools { flex: none; display: flex; align-items: center; gap: 1px; padding-right: .2rem; }
.tpl-icon {
    width: 20px; height: 20px;
    border: 0; background: none; border-radius: .25rem;
    font-size: 11px; color: var(--n-400); cursor: pointer;
    /* Не прячем совсем: невидимая кнопка остаётся нажимаемой, и по ней
       промахиваются вслепую — а одна из двух здесь удаляет. */
    opacity: .45; transition: opacity .12s;
}
.tpl-row:hover .tpl-icon { opacity: 1; }
.tpl-icon:hover { background: var(--n-0); color: var(--n-700); }
.tpl-del:hover { color: var(--err); }
.tpl-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px;
    font-style: normal; font-size: 9px; font-weight: 600;
    color: var(--accent-deep); background: var(--accent-bg); border-radius: .25rem;
}
.tpl-badge-lock { color: var(--n-400); background: var(--n-100); }

/*
  Разделы эмодзи. Высота сетки постоянная: без неё панель прыгала бы при
  переключении раздела, и следующий раздел оказывался бы не там, где курсор.
*/
.pop-emoji { min-width: 0; padding: 0; }
.emoji-tabs {
    display: flex; gap: 1px;
    padding: 6px 6px 4px;
    border-bottom: 1px solid var(--n-200);
    overflow-x: auto;
}
.emoji-tab {
    flex: none;
    border: 0; background: none; cursor: pointer;
    font-size: 16px; line-height: 1;
    padding: 5px 7px; border-radius: 6px;
    opacity: .55;
}
.emoji-tab:hover { background: var(--n-100); opacity: 1; }
.emoji-tab.is-current { background: var(--accent-bg); opacity: 1; }

.emoji-grid {
    display: grid; grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: min-content; align-content: start;
    gap: 2px; padding: 6px;
    width: 17rem; height: 14rem; overflow-y: auto;
}
.emoji-grid button {
    border: 0; background: none; cursor: pointer;
    font-size: 21px; line-height: 1; padding: 4px 0; border-radius: 6px;
}
.emoji-grid button:hover { background: var(--accent-bg); }
.emoji-empty {
    grid-column: 1 / -1;
    padding: 18px; text-align: center;
    font-size: 13px; color: var(--n-400);
}

/* ── Поле и отправка ─────────────────────────────────────────── */
.reply-row { display: flex; gap: .5rem; align-items: flex-end; }
.reply-box {
    flex: 1 1 auto; min-width: 0;
    min-height: 44px;
    padding: .5rem .75rem;
    font-size: 14px; line-height: 1.45; color: var(--n-700);
    border: 1px solid var(--n-300); border-radius: .625rem;
    resize: none;
}
.reply-box:focus {
    outline: none;
    border-color: var(--accent-hover);
    box-shadow: var(--ring);
}
.send-btn {
    flex: none;
    width: 42px; height: 42px; border-radius: 50%;
    border: 0; background: var(--accent); color: var(--n-0); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, transform .08s;
}
.send-btn:hover  { background: var(--accent-deep); }
.send-btn:active { transform: scale(.94); }
.send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════
   Переключатель каналов в списке чатов

   Сегменты в одной обойме: видно и что выбрано, и сколько где лежит.
   Цвет включённого повторяет цвет канала в строках — тот же язык, что и метки.
   ══════════════════════════════════════════════════════════════ */
.ch-switch {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: #f1f5f9;
    border-radius: .5rem;
}
.ch-switch-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .25rem;
    padding: .25rem .3rem;
    border-radius: .375rem;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch-switch-btn:hover { background: #e2e8f0; color: #334155; }
.ch-switch-num { font-size: 10px; font-weight: 500; color: #94a3b8; font-variant-numeric: tabular-nums; }

.ch-switch-btn.is-on { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.ch-switch-btn.is-on .ch-switch-num { color: inherit; opacity: .65; }
.ch-switch-btn.is-on.ch-hh  { color: #dc2626; }
.ch-switch-btn.is-on.ch-max { color: #7c3aed; }
.ch-switch-btn.is-on.ch-tg  { color: #0284c7; }
.ch-switch-btn.is-on:not(.ch-hh):not(.ch-max):not(.ch-tg) { color: #4f46e5; }

/* Невыбранные каналы приглушены — так видно, какой включён, даже боковым
   зрением, когда подписей нет и различать нечего кроме цвета марки. */
.ch-switch-btn .ch-ic       { opacity: .5; filter: saturate(.55); transition: opacity .12s, filter .12s; }
.ch-switch-btn:hover .ch-ic,
.ch-switch-btn.is-on .ch-ic { opacity: 1; filter: none; }

/* ══════════════════════════════════════════════════════════════
   Логотип по теме: на тёмном листе тёмное слово «HRScreen» пропадает
   ══════════════════════════════════════════════════════════════ */
.logo-on-dark { display: none; }
[data-theme="dark"] .logo-on-dark { display: block; }
[data-theme="dark"] .logo-on-light { display: none; }

/* Поля ввода без своих классов: браузер рисует их своим цветом, и на тёмной
   теме они выпадают из палитры. Утилиты Tailwind это правило перебивают. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    background-color: var(--n-0);
    color: var(--n-700);
}

/* Галочки, радио и ползунки браузер красит системным синим — уводим в акцент.
   Размер и рамку по-прежнему задают классы разметки. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--accent);
}

/* Мини-календарь выбора даты: всегда открыт, точка — «в этот день уже есть» */
.cal-mini         { margin-top: .25rem; }
.cal-mini-head    { display: flex; align-items: center; justify-content: space-between;
                    font-size: 11px; color: var(--n-600); margin-bottom: .15rem; }
.cal-mini-nav     { width: 1.25rem; height: 1.25rem; border-radius: .25rem;
                    color: var(--n-500); line-height: 1; }
.cal-mini-nav:hover { background: var(--n-100); color: var(--n-700); }
.cal-mini-grid    { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-mini-week span { text-align: center; font-size: 9px; color: var(--n-400);
                    padding-bottom: .1rem; }
.cal-mini-day     { position: relative; height: 1.45rem; border-radius: .25rem;
                    font-size: 11px; color: var(--n-700); line-height: 1.45rem;
                    font-variant-numeric: tabular-nums; }
.cal-mini-day:hover      { background: var(--n-100); }
.cal-mini-day.is-out     { color: var(--n-300); }
.cal-mini-day.is-off     { color: var(--n-400); }
.cal-mini-day.is-today   { box-shadow: 0 0 0 1px var(--n-300) inset; }
.cal-mini-day.is-selected{ background: var(--accent); color: var(--on-solid); }
.cal-mini-day.is-selected .cal-mini-dot { background: var(--on-solid); }
.cal-mini-dot     { position: absolute; left: 50%; bottom: .15rem; width: 3px; height: 3px;
                    margin-left: -1.5px; border-radius: 50%; background: var(--accent); }

/* Выбранный промежуток и накладка — словами под полосой */
/* Итоговая строка — то, по чему принимают решение: она крупнее остального
   и меняется прямо под мышью, поэтому у неё есть вид «предпросмотр» */
.cal-pick-line    { font-size: 12px; color: var(--n-700); margin-top: .35rem;
                    display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline;
                    min-height: 2.6em; }
.cal-pick-when    { font-size: 12px; font-weight: 600; color: var(--n-700);
                    font-variant-numeric: tabular-nums; }
.cal-pick-line.is-preview .cal-pick-when { color: var(--accent); }
.cal-pick-state   { font-size: 12px; }
.cal-pick-free    { color: var(--ok); }
.cal-pick-clash   { color: var(--err); }

/* Рамка под курсором: шириной в выбранную длительность, шаг пять минут */
.cal-busy-hover   { position: absolute; top: 0; bottom: 0; border-radius: 2px;
                    border: 1px dashed var(--n-500); background: rgba(99,102,241,.10);
                    pointer-events: none; }
.cal-busy-hover::after { content: attr(data-label); position: absolute; left: 50%;
                    top: -1.05rem; transform: translateX(-50%); white-space: nowrap;
                    font-size: 9px; color: var(--n-600); }

/* Полоса занятости: занятое закрашено, выбранное отмечено.
   Отступ сверху — под подпись рамки, которая едет над полосой. */
.cal-busy-wrap    { margin-top: .25rem; }
.cal-busy         { position: relative; height: 1.35rem; margin-top: .9rem;
                    border-radius: .25rem;
                    background: var(--n-100); overflow: hidden; cursor: crosshair; }
.cal-busy-work    { position: absolute; top: 0; bottom: 0; background: var(--n-0); }
/* Занятое — одним цветом: цвет вида здесь ничего не решает, а рябь мешает
   разглядеть, куда попадает выбранная рамка */
.cal-busy-seg     { position: absolute; top: 2px; bottom: 2px; border-radius: 2px;
                    background: var(--n-400); }
.cal-busy-pick    { position: absolute; top: 0; bottom: 0; border-radius: 2px;
                    border: 2px solid var(--accent); background: transparent;
                    box-shadow: 0 0 0 1px var(--n-0) inset; pointer-events: none; }
.cal-busy-pick.is-clash { border-color: var(--err); }
.cal-busy-scale   { position: relative; height: .85rem; }
.cal-busy-scale span { position: absolute; transform: translateX(-50%);
                    font-size: 9px; color: var(--n-400);
                    font-variant-numeric: tabular-nums; }
.cal-busy-note    { font-size: 10px; color: var(--n-400); margin-top: -.1rem; }
.cal-busy-note.is-clash { color: var(--err); }

/* Панель ассистента: картина дня, хвосты и карточки «с кем поговорить» */
.cal-day-summary  { font-size: 12px; color: var(--n-600); line-height: 1.45;
                    background: var(--n-50); border-radius: .4rem; padding: .35rem .5rem; }
.cal-day-summary b { color: var(--n-700); }
.cal-day-alerts   { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.cal-alert        { font-size: 11px; padding: .1rem .4rem; border-radius: .25rem;
                    background: var(--n-100); color: var(--n-600); }
.cal-alert.is-warn{ background: var(--warn-bg); color: var(--warn); }
.cal-alert:hover  { filter: brightness(.97); }

.cal-prop         { border: 1px solid var(--n-200); border-radius: .45rem;
                    padding: .35rem .45rem; }
.cal-prop:hover   { border-color: var(--n-300); }
.cal-prop-head    { display: flex; align-items: baseline; gap: .3rem; }
.cal-prop-kind    { font-size: 12px; }
.cal-prop-who     { font-size: 12px; font-weight: 600; color: var(--n-700);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cal-prop-who:hover { color: var(--accent); text-decoration: underline; }
.cal-prop-len     { margin-left: auto; font-size: 10px; color: var(--n-400);
                    font-variant-numeric: tabular-nums; }
.cal-prop-facts   { font-size: 11px; color: var(--n-500); margin-top: .05rem;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-prop-why     { font-size: 11px; color: var(--n-400); margin-top: .05rem; }
.cal-prop-actions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.cal-prop-btn     { font-size: 11px; padding: .15rem .45rem; border-radius: .3rem;
                    border: 1px solid var(--n-300); color: var(--n-600);
                    background: var(--n-0); cursor: pointer; }
.cal-prop-btn:hover { background: var(--n-50); }
.cal-prop-btn.is-primary { background: var(--accent-tint); color: var(--accent-deep);
                    border-color: var(--accent-soft); font-weight: 600; }
.cal-prop-btn.is-primary:hover { background: var(--accent-bg); }
.cal-prop-btn.is-quiet { border-color: transparent; color: var(--n-400); }
.cal-prop-btn.is-quiet:hover { color: var(--n-600); background: var(--n-50); }
.cal-prop-group   { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
                    color: var(--n-400); margin: .5rem 0 .25rem; }

/*
  Выпадающие меню шапки: значок календаря и профиль. Раскрываются наведением
  и с клавиатуры (focus-within) — щелчок для этого не нужен, а с клавиатуры
  меню иначе недостижимо.
*/
.nav-pop          { position: relative; display: flex; align-items: center; }
.nav-pop-trigger  { display: flex; align-items: center; gap: .5rem; cursor: pointer;
                    outline: none; }
.nav-pop-menu     { position: absolute; right: 0; top: 100%; z-index: 70;
                    display: none; min-width: 12rem; padding: .25rem;
                    background: var(--n-0); border: 1px solid var(--n-200);
                    border-radius: .5rem; box-shadow: 0 12px 28px rgba(15,23,42,.18); }
/* Мостик под триггером: без него курсор «проваливается» по дороге к меню.
   Тот же зазор — и тот же мостик — у меню «Ещё»: там отступ задан классом
   вёрстки, поэтому правило отдельное, а причина общая. */
.nav-pop-menu::before,
#nav-more-menu::before { content: ""; position: absolute; left: 0; right: 0;
                    top: -.5rem; height: .5rem; }
.nav-pop:hover .nav-pop-menu,
.nav-pop:focus-within .nav-pop-menu { display: block; }
.nav-pop-wide     { min-width: 22rem; }

.nav-pop-head     { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
                    color: var(--n-400); padding: .3rem .5rem .15rem; }
.nav-pop-item     { display: flex; align-items: center; gap: .5rem; width: 100%;
                    text-align: left; font-size: 13px; color: var(--n-700);
                    padding: .35rem .5rem; border-radius: .35rem; }
.nav-pop-item svg { width: 1rem; height: 1rem; flex: none; opacity: .65; }
.nav-pop-item:hover svg { opacity: .9; }
.nav-pop-item:hover { background: var(--n-100); }
.nav-pop-item.is-danger        { color: var(--err); }
.nav-pop-item.is-danger:hover  { background: var(--err-bg); }

.nav-pop-row      { display: flex; align-items: center; gap: .35rem; font-size: 12px;
                    color: var(--n-700); padding: .25rem .5rem; border-radius: .35rem; }
.nav-pop-row:hover{ background: var(--n-50); }
.nav-pop-time     { font-variant-numeric: tabular-nums; color: var(--n-500);
                    flex: none; width: 2.6rem; }
.nav-pop-title    { flex: 1 1 auto; min-width: 0; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.nav-pop-btn      { flex: none; font-size: 11px; padding: .1rem .35rem; border-radius: .3rem;
                    border: 1px solid var(--n-300); color: var(--n-600);
                    background: var(--n-0); cursor: pointer; }
.nav-pop-btn:hover{ background: var(--n-100); }
/* Действия значками: подписи в узкой строке съедали место у имени.
   Цвет проявляется на наведении — иначе три цветные кнопки в каждой строке
   спорят с самим списком. */
.nav-pop-icon     { flex: none; display: inline-flex; align-items: center;
                    justify-content: center; width: 1.5rem; height: 1.5rem;
                    border-radius: .3rem; color: var(--n-400); cursor: pointer; }
.nav-pop-icon svg { width: .95rem; height: .95rem; }
.nav-pop-icon:hover        { background: var(--n-100); color: var(--n-700); }
.nav-pop-icon.is-ok:hover  { background: var(--ok-bg);   color: var(--ok); }
.nav-pop-icon.is-warn:hover{ background: var(--warn-bg); color: var(--warn); }
.nav-pop-icon.is-err:hover { background: var(--err-bg);  color: var(--err); }
.nav-pop-empty    { color: var(--n-400); }
.nav-pop-foot     { display: block; font-size: 11px; color: var(--accent);
                    padding: .35rem .5rem .2rem; border-top: 1px solid var(--n-100);
                    margin-top: .25rem; }
.nav-pop-foot:hover { text-decoration: underline; }
.nav-pop-name     { color: inherit; }
.nav-pop-name:hover { color: var(--accent); text-decoration: underline; }
/* ══════════════════════════════════════════════════════════════
   Карточка человека: контакты, этапы, живая переписка

   Всё это раньше жило в двух местах — витриной в карточке и по-настоящему в
   инбоксе. Здесь описан только внешний вид карточки; лента сообщений берёт
   стили инбокса (.msg-*), потому что это буквально та же лента.
   ══════════════════════════════════════════════════════════════ */

/* Контакты первой строкой: телефон — самое частое действие с карточкой,
   а лежал он под опытом, образованием и языками, в двух экранах прокрутки. */
.pc-contacts      { display: flex; flex-wrap: wrap; gap: .375rem; }
.pc-contact       { display: inline-flex; align-items: center; gap: .375rem;
                    padding: .3rem .6rem; border-radius: .375rem;
                    border: 1px solid var(--n-200); background: var(--n-0);
                    font-size: 13px; color: var(--n-700); line-height: 1.2; }
.pc-contact:hover { border-color: var(--accent-soft); color: var(--accent-deep); }
.pc-contact-ic    { color: var(--n-400); display: inline-flex; align-items: center;
                    flex: none; }
/* Ссылка на профиль не должна распирать карточку: адрес max.ru/u/<токен>
   занимал две строки и уезжал за край. Показываем коротко, целиком — в
   подсказке. */
.pc-contact-txt   { max-width: 12rem; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.pc-contact:hover .pc-contact-ic { color: var(--accent); }
.pc-contact-ch    { padding-left: .45rem; }
.pc-contact-off   { border-style: dashed; color: var(--n-400); cursor: default; }
.pc-contact-off:hover { border-color: var(--n-200); color: var(--n-400); }
.pc-contact-num   { min-width: 1.05rem; text-align: center; border-radius: 999px;
                    background: var(--accent); color: var(--on-solid);
                    font-size: 10px; font-weight: 600; padding: 0 .25rem; }

/* Вакансии и этапы */
.pc-vacs          { padding: .5rem .75rem .75rem; }
.pc-vac           { padding: .5rem 0; border-top: 1px solid var(--n-100); }
.pc-vac:first-child { border-top: 0; }
.pc-vac-head      { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.pc-vac-title     { font-size: 13px; font-weight: 500; color: var(--n-700); }
a.pc-vac-title:hover { color: var(--accent); }
.pc-vac-stage     { display: inline-flex; align-items: center; gap: .35rem;
                    margin-left: auto; font-size: 12px; color: var(--n-500); }
.pc-vac-move      { margin-top: .35rem; }
.pc-vac-select    { width: 100%; font-size: 12px; color: var(--n-600);
                    border: 1px solid var(--n-200); border-radius: .375rem;
                    padding: .25rem .4rem; background: var(--n-0); }
.pc-vac-select:focus { outline: none; border-color: var(--accent-soft); }
.pc-vac-note      { margin-bottom: .4rem; font-size: 12px; color: var(--ok);
                    background: var(--ok-bg); border-radius: .25rem;
                    padding: .25rem .5rem; }
.pc-vac-empty     { font-size: 13px; color: var(--n-400); }

/* Живая переписка. Высота задана намеренно: лента без потолка растянула бы
   страницу на сотни сообщений, а поле ответа уехало бы за нижний край. */
.pc-chat          { display: flex; flex-direction: column; height: 26rem; }
/* Полоса каналов. Ссылка «Открыть в Чатах» стоит в этой же строке, у правого
   края, поэтому полоса идёт во всю ширину — иначе ссылка прилипла бы к плашке
   канала. А вот линии под ней больше нет: у кандидата обычно один канал, и
   разделитель через всю панель отделял пустое место от переписки. */
.pc-chat-tabs     { display: flex; align-items: center; flex-wrap: wrap;
                    gap: .25rem; padding: .3rem .6rem .1rem; }
/* Ссылка в «Чаты» прижата к правому краю той же полосы */
.pc-chat-open     { margin-left: auto; font-size: 11px; white-space: nowrap;
                    color: var(--accent); }
.pc-chat-open:hover { text-decoration: underline; }
.pc-chat-tab      { display: inline-flex; align-items: center; gap: .35rem;
                    padding: .2rem .5rem; border-radius: .375rem;
                    font-size: 12px; color: var(--n-500); }
.pc-chat-tab:hover{ background: var(--n-100); color: var(--n-700); }
.pc-chat-tab.is-on{ background: var(--accent-tint); color: var(--accent-deep); }
.pc-chat-num      { min-width: 1.05rem; text-align: center; border-radius: 999px;
                    background: var(--accent); color: var(--on-solid);
                    font-size: 10px; font-weight: 600; padding: 0 .25rem; }
.pc-chat-feed     { flex: 1; min-height: 0; overflow-y: auto;
                    padding: .625rem .75rem; display: flex;
                    flex-direction: column; gap: .375rem; }
.pc-chat-note     { padding: .25rem .75rem; font-size: 12px; color: var(--n-500); }
.pc-chat-send     { border-top: 1px solid var(--n-100); padding: .5rem .75rem .625rem; }
.pc-chat-input    { width: 100%; resize: none; font-size: 13px; color: var(--n-700);
                    border: 1px solid var(--n-200); border-radius: .375rem;
                    padding: .4rem .55rem; background: var(--n-0); }
.pc-chat-input:focus { outline: none; border-color: var(--accent-soft); }
.pc-chat-actions  { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.pc-chat-full     { font-size: 11px; color: var(--n-400); }
.pc-chat-full:hover { color: var(--accent); }
.pc-chat-btn      { margin-left: auto; padding: .3rem .75rem; border-radius: .375rem;
                    background: var(--accent); color: var(--on-solid);
                    font-size: 12px; font-weight: 500; }
.pc-chat-btn:hover{ background: var(--accent-hover); }
.pc-chat-empty    { flex: 1; display: flex; align-items: center; justify-content: center;
                    gap: .75rem; font-size: 13px; color: var(--n-400); }

/* Правая колонка карточки. Шире обычной боковой панели, потому что в ней
   теперь живёт переписка: в двадцати ремах реплики ломались по два слова. */
.person-side      { width: 100%; }
@media (min-width: 1024px) {
    .person-side  { width: 30rem; flex: none; }
}

/* Полоса каналов над лентой. Показывается всегда, а не только когда диалогов
   несколько: она отвечает на вопрос «где ещё ему писали и где непрочитанное»,
   а он есть и при одном канале. */
.pc-chat-tab.is-idle      { color: var(--n-400); border: 1px dashed var(--n-200); }
.pc-chat-tab.is-idle:hover{ background: var(--n-100); color: var(--n-500); }

/* ══════════════════════════════════════════════════════════════
   Шапка карточки человека — одной картой

   Было три разрозненных куска: имя с бейджами, полоса контактов и сетка из
   четырёх карточек «Опыт / Зарплата / Образование / Источник». Сетка занимала
   целый ряд, неся по два слова в каждой ячейке, а hh.ru упоминался в верхней
   части пять раз подряд.
   ══════════════════════════════════════════════════════════════ */
.person-head      { background: var(--n-0); border: 1px solid var(--n-200);
                    border-radius: .5rem; padding: 1rem 1.25rem;
                    display: flex; flex-direction: column; gap: .75rem; }
.person-head-top  { display: flex; align-items: flex-start; gap: 1rem;
                    flex-wrap: wrap; }
.person-head-photo{ width: 4rem; height: 4rem; border-radius: 9999px; flex: none;
                    object-fit: cover; border: 1px solid var(--n-200);
                    cursor: pointer; }
.person-head-photo:hover { box-shadow: 0 0 0 2px var(--accent-soft); }
.person-head-initials { background: var(--n-100); color: var(--n-400);
                    display: flex; align-items: center; justify-content: center;
                    font-size: 22px; font-weight: 600; cursor: default; }
/* «ФИО скрыто соискателем» стоит на месте имени, но именем не является:
   тот же размер, приглушённый цвет и обычное начертание — чтобы строка
   читалась как пометка, а не как ФИО человека. */
.person-head-noname { color: var(--n-400); font-weight: 500; }
.person-head-sub  { margin-top: .15rem; font-size: 13px; color: var(--n-500); }
.person-head-tags { margin-top: .4rem; display: flex; align-items: center;
                    gap: .5rem; flex-wrap: wrap; }
/* Балл и стадия — у правого края, с зазором от кнопки: кружок в 56 пикселей
   прижимался к «Написать» вплотную и читался как наезд. */
.person-head-act  { display: flex; align-items: center; gap: .75rem;
                    margin-left: auto; }
.person-head-score{ width: 3rem; height: 3rem; border-radius: 9999px; flex: none;
                    display: flex; align-items: center; justify-content: center;
                    font-size: 17px; font-weight: 700; color: var(--on-solid); }
.person-facts     { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
                    font-size: 13px; color: var(--n-600);
                    border-top: 1px solid var(--n-100); padding-top: .625rem; }
.person-facts b   { color: var(--n-700); font-weight: 600; }

/* Балл рядом с вакансией — маленький кружок, а не полоса: в строке он один из
   трёх элементов, и место здесь дороже размера. */
.pc-vac-score     { min-width: 1.5rem; height: 1.5rem; border-radius: 9999px;
                    display: inline-flex; align-items: center; justify-content: center;
                    margin-left: auto; padding: 0 .3rem;
                    font-size: 11px; font-weight: 700; color: var(--on-solid); }
.pc-vac-score + .pc-vac-stage { margin-left: .5rem; }

/* «Отвязать» — действие редкое и обратимое, но всё же снимающее связь:
   отдельной краской, чтобы не нажималось заодно с соседними чипами. */
.chip-unlink      { border-style: dashed; color: var(--n-500); }
.chip-unlink:hover{ color: var(--err); border-color: var(--err); }

/* Разметка из мессенджеров внутри пузыря */
.msg-text b      { font-weight: 600; }
.msg-text i      { font-style: italic; }
.msg-text s      { text-decoration: line-through; opacity: .8; }
.msg-text code   { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                   font-size: .92em; background: rgba(148, 163, 184, .18);
                   border-radius: .2rem; padding: 0 .2rem; }

/* Вакансии с этапами в шапке карточки: узкая колонка справа от имени */
.person-head-act .pc-vacs { padding: 0; min-width: 17rem; max-width: 26rem; }
.pc-vac-main      { display: flex; flex-direction: column; min-width: 0; }
.pc-vac-btn       { font-size: 11px; color: var(--accent); cursor: pointer;
                    border: 1px solid var(--accent-soft); border-radius: .375rem;
                    padding: .15rem .5rem; white-space: nowrap; list-style: none; }
.pc-vac-btn::-webkit-details-marker { display: none; }
.pc-vac-btn:hover { background: var(--accent-tint); }
.pc-vac-move      { position: relative; margin: 0; }
.pc-vac-pop       { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 40;
                    min-width: 13rem; max-height: 17rem; overflow-y: auto;
                    background: var(--n-0); border: 1px solid var(--n-200);
                    border-radius: .5rem; padding: .25rem;
                    box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .3); }
/* Список этапов из нижней полосы раскрывается вверх: вниз ему некуда. И
   влево не уезжает: обычное меню прижато правым краем к кнопке, а кнопка
   «Этап» стоит у левого края узкой колонки — список уходил под рельс. */
.pc-vac-pop-up    { top: auto; bottom: calc(100% + .25rem);
                    right: auto; left: 0; }
.pc-vac-pop-title { font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
                    color: var(--n-400); padding: .25rem .5rem; }
.pc-vac-item      { display: block; width: 100%; text-align: left;
                    font-size: 12px; color: var(--n-700);
                    padding: .3rem .5rem; border-radius: .25rem; }
.pc-vac-item:hover{ background: var(--accent-tint); color: var(--accent-deep); }

/* ══════════════════════════════════════════════════════════════
   Рабочий стол вакансии: рельс этапов · список · карточка
   ══════════════════════════════════════════════════════════════
   Экран вакансии был вертикальным: шаг подготовки, шесть вкладок и
   лента широких карточек. Чтобы посмотреть кандидата, рекрутер уходил
   со списка на отдельную страницу и возвращался обратно кнопкой.

   Теперь три колонки на всю высоту окна: слева этапы с числами, в
   середине список, справа карточка выбранного. Разбор идёт на одном
   экране — как в Talantix, откуда воронка и приезжает. */

/* Ширины двух левых колонок — за человеком: у одного важнее список, у другого
   карточка. Живут переменными, потому что их двигает мышь и помнит браузер. */
.vac-ws           { display: grid;
                    grid-template-columns: var(--vac-rail-w, 15rem) 5px
                                           var(--vac-list-w, 22rem) 5px
                                           minmax(0, 1fr);
                    gap: 0; height: calc(100vh - 3.5rem); min-height: 24rem;
                    overflow: hidden; background: var(--n-0); }

/* Полоса между колонками. Рамки вокруг стола нет — границы внутри и есть
   единственные линии на экране, и они же ручки. */
.vac-grip         { position: relative; cursor: col-resize; background: var(--n-200);
                    touch-action: none; }
.vac-grip::after  { content: ""; position: absolute; top: 0; bottom: 0;
                    left: -3px; right: -3px; }
.vac-grip:hover, .vac-grip-live { background: var(--accent-soft); }
.vac-stage-counts { display: inline-flex; align-items: center; gap: .3rem; flex: none; }
.vac-stage-unanswered {
    min-width: 1.25rem; padding: .05rem .3rem; text-align: center;
    border-radius: 999px; background: var(--accent); color: var(--on-solid);
    font-size: 10px; font-weight: 700; line-height: 1.25rem;
}

/* ── Левый рельс ─────────────────────────────────────────────── */
.vac-rail         { display: flex; flex-direction: column; min-height: 0; min-width: 0;
                    background: var(--ink-900); color: var(--on-ink); }
.vac-rail-head    { padding: .875rem .875rem .75rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.vac-rail-back    { font-size: 11px; color: rgba(255,255,255,.45); }
.vac-rail-back:hover { color: rgba(255,255,255,.8); }
.vac-rail-title   { margin-top: .25rem; font-size: 14px; font-weight: 600;
                    line-height: 1.3; color: var(--on-ink); }
.vac-rail-meta    { margin-top: .25rem; font-size: 11px; color: rgba(255,255,255,.5);
                    display: flex; flex-wrap: wrap; gap: .15rem .5rem; }
.vac-rail-list    { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem 0; }
.vac-stage        { display: flex; align-items: center; gap: .5rem; width: 100%;
                    padding: .45rem .875rem; font-size: 13px; text-align: left;
                    color: rgba(255,255,255,.72); border-left: 2px solid transparent;
                    cursor: pointer; }
.vac-stage:hover  { background: rgba(255,255,255,.06); color: var(--on-ink); }
.vac-stage-on     { background: rgba(255,255,255,.10); color: var(--on-ink);
                    border-left-color: var(--accent-soft); font-weight: 500; }
.vac-stage-name   { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.vac-stage-num    { font-size: 12px; color: rgba(255,255,255,.45); }
.vac-stage-on .vac-stage-num { color: var(--accent-soft); }
.vac-rail-foot    { border-top: 1px solid rgba(255,255,255,.08); padding: .4rem 0 .5rem;
                    display: flex; flex-wrap: wrap; }
.vac-tool         { padding: .35rem .875rem; font-size: 12px; color: rgba(255,255,255,.55);
                    cursor: pointer; }
.vac-tool:hover   { color: var(--on-ink); }
.vac-tool-on      { color: var(--accent-soft); font-weight: 500; }

/* ── Средняя колонка: список ─────────────────────────────────── */
.vac-list         { display: flex; flex-direction: column; min-height: 0; min-width: 0;
                    background: var(--n-0); }
/* Одна строка на все настройки списка: фильтр, сортировка и два действия.
   Переносить нечего — кнопки стали значками, а поля ужимаются вместе с
   колонкой, которую человек тянет сам. */
.vac-list-bar     { display: flex; align-items: center; gap: .3rem; flex-wrap: nowrap;
                    padding: .4rem .5rem; border-bottom: 1px solid var(--n-200);
                    background: var(--n-50); font-size: 12px; color: var(--n-500); }
.vac-list-sel     { flex: 1 1 0; min-width: 3.5rem; max-width: 8.5rem;
                    font-size: 12px; color: var(--n-700); background: var(--n-0);
                    border: 1px solid var(--n-200); border-radius: .25rem;
                    padding: .15rem .25rem; }
.vac-ico          { flex: none; display: inline-flex; align-items: center;
                    justify-content: center; width: 1.5rem; height: 1.5rem;
                    border: 1px solid var(--n-200); border-radius: .25rem;
                    background: var(--n-0); color: var(--n-600); cursor: pointer; }
.vac-ico:hover    { background: var(--n-100); color: var(--n-700); }
.vac-list-num     { flex: none; margin-left: auto; padding-left: .15rem;
                    font-variant-numeric: tabular-nums; }
.vac-list-search  { padding: .4rem .5rem; border-bottom: 1px solid var(--n-200);
                    background: var(--n-0); }
.vac-list-search-input {
                    width: 100%; padding: .35rem .55rem; font-size: 12px;
                    color: var(--n-700); background: var(--n-0);
                    border: 1px solid var(--n-200); border-radius: .375rem; }
.vac-list-search-input:focus { outline: none; border-color: var(--accent);
                    box-shadow: 0 0 0 2px var(--accent-bg); }
/* Вбок список не ездит никогда: длинная должность обрезается многоточием,
   а не растягивает колонку и не заводит вторую полосу прокрутки. */
.vac-list-feed    { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* Метка «дальше есть»: пока порция едет, вместо числа крутится колесо —
   иначе прокрутка упирается в неподвижную строчку и выглядит как конец списка. */
.vac-more         { padding: .7rem; text-align: center; font-size: 12px;
                    color: var(--n-400); cursor: pointer; }
.vac-more:hover   { color: var(--n-600); background: var(--n-50); }
.vac-more-load    { display: none; align-items: center; justify-content: center;
                    gap: .4rem; color: var(--accent); }
.vac-more.htmx-request .vac-more-text { display: none; }
.vac-more.htmx-request .vac-more-load { display: inline-flex; }
.vac-spin         { width: 1rem; height: 1rem; animation: vac-spin 1s linear infinite; }
@keyframes vac-spin { to { transform: rotate(360deg); } }
.vac-list-foot    { border-top: 1px solid var(--n-200); padding: .4rem .625rem;
                    display: flex; align-items: center; justify-content: space-between;
                    font-size: 12px; color: var(--n-500); background: var(--n-50); }
.vac-page-btn     { padding: .2rem .5rem; border: 1px solid var(--n-200);
                    border-radius: .25rem; background: var(--n-0); color: var(--n-600);
                    cursor: pointer; }
.vac-page-btn:hover { background: var(--n-100); }
.vac-list-empty   { padding: 2rem 1rem; text-align: center; font-size: 13px; color: var(--n-400); }

.vac-row          { display: flex; gap: .55rem; width: 100%; text-align: left;
                    padding: .55rem .625rem; border-bottom: 1px solid var(--n-100);
                    cursor: pointer; background: var(--n-0); }
.vac-row:hover    { background: var(--n-50); }
.vac-row-on       { background: var(--accent-tint);
                    box-shadow: inset 3px 0 0 var(--accent); }
.vac-row-on:hover { background: var(--accent-tint); }
.vac-row-photo    { width: 2.25rem; height: 2.25rem; border-radius: 9999px; flex: none;
                    object-fit: cover; border: 1px solid var(--n-200); }
.vac-row-initials { display: flex; align-items: center; justify-content: center;
                    background: var(--n-100); color: var(--n-400); font-size: 13px; }
/* Выбор нескольких кандидатов.

   Галочка живёт в кружке фотографии, а не отдельной колонкой слева: колонка
   съедала бы ширину у имени всегда, а выбирают редко. Наведёшь на кружок — он
   притеняется и показывает галочку: этим и видно, что выбирать можно.
   Выбранное горит accent-ом и после того, как курсор ушёл. */
.vac-row-pick     { position: relative; flex: none; width: 2.25rem; height: 2.25rem;
                    display: block; border-radius: 9999px; }
.vac-row-check    { position: absolute; inset: 0; border-radius: 9999px;
                    display: flex; align-items: center; justify-content: center;
                    background: rgba(15, 23, 42, .45); color: #fff;
                    opacity: 0; transition: opacity .12s ease; }
.vac-row-check svg { width: 1.1rem; height: 1.1rem; }
/* Только при наведении на сам кружок: подсветка галочки во всей строке
   мельтешила при обычном просмотре списка. */
.vac-row-pick:hover .vac-row-check { opacity: 1; }
.vac-row-picked .vac-row-check { opacity: 1; background: var(--accent); }
.vac-row-picked   { background: var(--accent-tint); }
.vac-row-picked:hover { background: var(--accent-tint); }

/* Полоса массовых действий: появляется, когда выбран хоть кто-то. */
/* Полоса стоит под списком и не переносится на второй ряд: сверху она
   сдвигала строки, а в три ряда съедала пол-экрана.

   Без overflow: прокрутка вбок казалась безобидной, но браузер, получив
   overflow-x, включает обрезку и по вертикали — и выпадающий список этапов,
   который раскрывается вверх, обрезался ровно по краю полосы. Подписи здесь
   короткие, помещаются и без прокрутки. */
.vac-bulk         { display: flex; align-items: center; gap: .35rem;
                    flex-wrap: nowrap; min-width: 0;
                    padding: .3rem .5rem; border-top: 1px solid var(--n-200);
                    background: var(--accent-tint); }
/* Наши стили подключены после утилит, и display:flex перебивал .hidden —
   полоса висела над списком, когда никто не выбран. */
.vac-bulk.hidden  { display: none; }
.vac-bulk-n       { font-size: 12px; font-weight: 600; color: var(--n-700);
                    white-space: nowrap; min-width: 0; overflow: hidden;
                    text-overflow: ellipsis; }
.vac-bulk-btn     { padding: .2rem .45rem; font-size: 12px; font-weight: 500;
                    color: var(--n-700); background: var(--n-0); flex: none;
                    white-space: nowrap;
                    border: 1px solid var(--n-200); border-radius: .375rem; }
.vac-bulk-btn:hover { background: var(--n-100); }
.vac-bulk-btn:disabled { opacity: .55; }
.vac-bulk-btn:disabled:hover { background: var(--n-0); }
.vac-bulk-drop    { position: relative; }

.vac-row-main     { display: block; flex: 1; min-width: 0; overflow: hidden; }
.vac-row-top      { display: flex; align-items: baseline; gap: .4rem; }
.vac-row-name     { flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
                    color: var(--n-700); overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.vac-row-date     { font-size: 11px; color: var(--n-500); flex: none; }
/* Каналы, где уже разговаривали, — значками у даты: подписи заняли бы строку
   целиком, а сказать им нечего сверх самого значка. */
.vac-row-chs      { display: inline-flex; align-items: center; gap: .15rem;
                    flex: none; opacity: .85; }
/* «Ещё не открывали» — точкой у имени: подпись здесь заняла бы место, а
   сказать ей нечего сверх самого факта. */
.vac-row-dot      { flex: none; width: .4rem; height: .4rem; border-radius: 9999px;
                    background: var(--accent); }
.vac-row-waiting  { flex: none; padding: .08rem .35rem; border-radius: 999px;
                    background: var(--accent-bg); color: var(--accent-deep);
                    font-size: 9px; font-weight: 700; line-height: 1rem;
                    white-space: nowrap; }
/* Подсказка следующего хода в строке списка: «→ письмо о графике · 5 из 6 ·
   привычка» и рядом «принять». Стили потерялись при слиянии, и подсказка
   выходила голым текстом — проверка шаблонов молчала, потому что искала
   селектор подстрокой и находила `.vac-step-taken` вместо `.vac-step-take`. */
.vac-row-step {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: 11px;
    color: rgb(var(--accent-deep-rgb) / 1);
    margin-top: .125rem;
}
.vac-row-step-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vac-step-take {
    flex: none;
    cursor: pointer;
    padding: 0 .375rem;
    border-radius: 9999px;
    background: rgb(var(--accent-tint-rgb) / 1);
}
.vac-step-take:hover { background: rgb(var(--accent-bg-rgb) / 1); }
.vac-undo-take { cursor: pointer; text-decoration: underline; }

.vac-row-sub      { display: block; font-size: 12px; color: var(--n-600);
                    margin-top: .1rem; max-width: 100%;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Должность — то, по чему кандидата узнают в списке: не «сколько лет» и не
   «сколько просит», а кем он работает. Поэтому она плотнее соседних строк. */
.vac-row-pos      { display: block; font-size: 12px; font-weight: 500;
                    color: var(--n-600);
                    margin-top: .05rem; max-width: 100%;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vac-row-score    { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 9999px;
                    display: flex; align-items: center; justify-content: center;
                    font-size: 11px; font-weight: 700; color: var(--on-solid); }
.vac-row-score-off{ background: var(--n-100); color: var(--n-400); }

/* Балл и звёздочка одной колонкой: оценка машины сверху, пометка человека под
   ней. Пустая звезда еле видна и проявляется при наведении на строку —
   отмеченных мало, и полсотни ярких звёзд в списке были бы шумом. */
.vac-row-mark     { flex: none; display: flex; flex-direction: column;
                    align-items: center; gap: .2rem; }
.vac-row-star     { display: inline-flex; padding: 0; border: 0; cursor: pointer;
                    background: transparent; color: var(--n-300);
                    transition: color .15s ease, transform .1s ease; }
.vac-row-star svg { width: 1rem; height: 1rem; display: block; }
.vac-row-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;
                    border-radius: .25rem; }
.vac-row-star:hover { color: var(--warn); transform: scale(1.15); }
.vac-row-star.is-on { color: var(--warn); }
/* В шапке карточки звезда крупнее — под стать большому кружку с баллом */
.vac-pane-mark    { display: flex; flex-direction: column; align-items: center;
                    gap: .3rem; }
.vac-star-big svg { width: 1.75rem; height: 1.75rem; stroke-width: 1.5; }

/* Мессенджеры в карточке — значками в один ряд: подписи «WhatsApp · Telegram ·
   MAX» занимали целую строку и повторяли собой сами значки. */
.vac-chs          { display: inline-flex; align-items: center; gap: .25rem; }
.vac-ch           { position: relative; display: inline-flex; align-items: center;
                    justify-content: center; width: 1.4rem; height: 1.4rem;
                    border-radius: .3rem; background: var(--n-50); cursor: pointer; }
.vac-ch:hover     { background: var(--n-100); }
.vac-ch-off       { opacity: .4; cursor: default; }
.vac-ch-off:hover { background: var(--n-50); }
.vac-ch-num       { position: absolute; top: -.3rem; right: -.3rem; min-width: .9rem;
                    padding: 0 .15rem; border-radius: 999px; background: var(--accent);
                    color: var(--on-solid); font-size: 9px; line-height: .9rem;
                    text-align: center; }

/* ── Правая колонка: карточка ────────────────────────────────── */
.vac-pane         { display: flex; flex-direction: column; min-height: 0; min-width: 0;
                    overflow-y: auto; overflow-x: hidden; background: var(--n-0); }
.vac-pane-head    { padding: .875rem 1rem .625rem; border-bottom: 1px solid var(--n-200); }
.vac-pane-act     { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.vac-pane-top     { display: flex; align-items: flex-start; gap: .875rem; }
.vac-pane-photo   { width: 3.5rem; height: 3.5rem; border-radius: .5rem; flex: none;
                    object-fit: cover; border: 1px solid var(--n-200); }
.vac-pane-name    { font-size: 18px; font-weight: 600; color: var(--n-700); }
.vac-pane-sub     { margin-top: .15rem; font-size: 14px; color: var(--n-600); }
.vac-pane-post    { font-weight: 600; color: var(--n-700); }
.vac-pane-facts   { margin-top: .625rem; display: grid; grid-template-columns: 7.5rem 1fr;
                    gap: .35rem .75rem; font-size: 14px; }
.vac-pane-key     { color: var(--n-500); }
.vac-pane-val     { color: var(--n-700); min-width: 0; }
.vac-pane-tabs    { display: flex; gap: .25rem; padding: 0 1rem;
                    border-bottom: 1px solid var(--n-200); background: var(--n-50); }
.vac-pane-tab     { padding: .5rem .625rem; font-size: 13px; color: var(--n-500);
                    border-bottom: 2px solid transparent; cursor: pointer; }
.vac-pane-tab:hover { color: var(--n-700); }
.vac-pane-tab-on  { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
/* Число у названия вкладки: сколько сообщений, сколько записей. Приглушено —
   это подсказка «там что-то есть», а не сам заголовок. */
/* «В календарь» рядом с «Полной карточкой»: действие, а не ссылка, — поэтому
   с рамкой и значком. Открытая панель отмечена акцентом, иначе непонятно,
   откуда взялся блок под шапкой. */
.vac-pane-cal-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem;
    font-size: 13px; color: var(--n-600); background: var(--n-0);
    border: 1px solid var(--n-200); border-radius: .375rem; cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.vac-pane-cal-btn:hover { color: var(--accent); border-color: var(--accent-soft); }
.vac-pane-cal-btn.is-on {
    color: var(--accent-deep); background: var(--accent-tint);
    border-color: var(--accent-soft);
}
/* Панель выпадает под кнопкой и поверх карточки. Ширину берёт свою, шире
   кнопки: в месяц с полосой занятости иначе не уместиться. Правый край
   прижат к кнопке, чтобы в узкой колонке не уезжать за край экрана. */
.vac-pane-cal-wrap { position: relative; }
.vac-pane-cal {
    position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0;
    width: 20rem; max-height: 70vh; overflow-y: auto;
    padding: 0 .75rem .75rem;
    background: var(--n-0);
    border: 1px solid var(--n-200); border-radius: .5rem;
    box-shadow: var(--sh-lg);
}
/* У правого края колонки — раскрываемся влево, иначе панель уходит за экран */
.vac-pane-cal.to-left { left: auto; right: 0; }
.vac-pane-cal-btn + a { margin-left: .25rem; }

.vac-pane-tab-n   { display: inline-block; margin-left: .3rem; padding: 0 .3rem;
                    min-width: 1.05rem; font-size: 11px; font-weight: 600;
                    line-height: 1.35; text-align: center; border-radius: .5rem;
                    color: var(--n-600); background: var(--n-100); }
.vac-pane-tab-on .vac-pane-tab-n { color: var(--accent-deep); background: var(--accent-bg); }
/* Карточку кандидата читают дольше всего остального в системе: здесь резюме,
   оценка, история и переписка, и читают их подряд, а не сканируют взглядом.
   Поэтому внутри неё шрифт на ступень крупнее и на тон темнее общего мелкого —
   тот хорош для списков и подписей, но не для сплошного текста.

   Утилитарные классы перебиваем здесь, а не в разметке: правило одно на всю
   панель, а классов в её шаблонах десятки, и рассинхрон между ними — вопрос
   времени. */
.vac-pane-body    { padding: .875rem 1rem 1.25rem; font-size: 14px;
                    color: var(--n-700); line-height: 1.5; }
.vac-pane-body .text-xs { font-size: 13px; }
.vac-pane-body .text-sm { font-size: 14px; }
.vac-pane-body .text-n-400 { color: var(--n-500); }
.vac-pane-body .text-n-500 { color: var(--n-600); }
.vac-pane-body .text-n-600 { color: var(--n-700); }
.vac-pane-empty   { flex: 1; display: flex; align-items: center; justify-content: center;
                    padding: 2rem; text-align: center; font-size: 13px; color: var(--n-400); }
.vac-pane-tool    { padding: .875rem 1rem 1.5rem; }

/* Узкий экран: колонки складываются в одну ленту */
@media (max-width: 1100px) {
  .vac-ws         { grid-template-columns: minmax(0, 1fr); height: auto; }
  .vac-grip       { display: none; }
  .vac-rail       { flex-direction: column; }
  .vac-rail-list  { max-height: 14rem; }
  .vac-list       { border-right: 0; border-bottom: 1px solid var(--n-200); max-height: 30rem; }
}

/* ── Воронка вакансии (FUNNEL.md) ─────────────────────────────── */
/* Полоса воронки на карточке вакансии. Цветов стадий семь, а этапов воронки
   бывает двенадцать: соседи нередко одного цвета, и без просвета между кусками
   они читаются как один этап. */
.fn-bar           { display: flex; gap: 1px; height: .75rem; border-radius: 9999px;
                    overflow: hidden; background: var(--n-100); }
.fn-bar > div     { min-width: 2px; }

/* Подэтап на рельсе — сдвигом, а не рамкой: это не отдельный этап, а его
   часть, и выглядеть он должен вложенным, а не соседним. */
.vac-stage-sub    { padding-left: 1.75rem; }
.vac-stage-sub .vac-stage-name { font-size: 12px; color: rgba(255,255,255,.55); }

.fn-block         { border: 1px solid var(--n-200); border-radius: .5rem;
                    padding: .75rem; background: var(--n-0); }
.fn-place         { display: flex; align-items: center; gap: .5rem;
                    padding: .15rem .25rem; font-size: 13px; color: var(--n-700); }
.fn-place-sub     { padding-left: 1.25rem; }
.fn-place-name    { flex: 1; min-width: 0; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.fn-col           { border: 1px solid var(--n-200); border-radius: .375rem;
                    padding: .5rem; }
.fn-count         { display: flex; align-items: center; gap: .5rem;
                    padding: .1rem 0; font-size: 12px; color: var(--n-600); }

/* Строка редактора этапов: порядок, имя, число, куда смотрит на hh */
.fn-row           { display: flex; align-items: center; gap: .4rem; }
.fn-row-order     { display: flex; flex-direction: column; line-height: .8; }
.fn-row-name      { flex: 1 1 40%; min-width: 6rem; }
.fn-row-target    { flex: 1 1 45%; min-width: 8rem; }
.fn-row-num       { width: 2.5rem; text-align: right; font-size: 12px;
                    color: var(--n-500); flex: none; }
.fn-input         { width: 100%; padding: .25rem .5rem; font-size: 13px;
                    border: 1px solid transparent; border-radius: .375rem;
                    background: transparent; color: var(--n-700); }
.fn-input:hover   { border-color: var(--n-200); }
.fn-input:focus   { outline: none; border-color: var(--accent);
                    background: var(--n-0); }
.fn-select        { width: 100%; padding: .2rem .4rem; font-size: 12px;
                    border: 1px solid var(--n-200); border-radius: .375rem;
                    color: var(--n-600); background: var(--n-0); }
.fn-mini          { padding: 0 .3rem; font-size: 12px; color: var(--n-400);
                    border-radius: .25rem; flex: none; }
.fn-mini:hover    { color: var(--n-700); background: var(--n-100); }
.fn-warn          { border-left: 2px solid var(--warn); padding: .35rem .5rem;
                    background: var(--warn-bg); border-radius: .25rem; }
.fn-cmp           { display: flex; align-items: center; gap: .5rem;
                    padding: .25rem .625rem; font-size: 13px; color: var(--n-700); }
.fn-cmp > span:nth-child(2), .fn-cmp > span:nth-child(3) {
                    width: 3rem; text-align: right; flex: none; }
.fn-cmp-where     { width: 12rem; flex: none; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.fn-cmp-head      { font-size: 11px; color: var(--n-400); }

/* Часы кандидата в шапке чата: разница поясов важна ровно перед звонком */
.chat-clock       { color: var(--warn); font-variant-numeric: tabular-nums; }
.chat-clock-delta { color: var(--n-400); }

/* ── Вакансии из верхнего меню ────────────────────────────────── */
/* Панель висит под пунктом «Вакансии» и позиционируется скриптом: она сосед
   строки разделов, а не её содержимое — иначе подгонка меню под ширину окна
   считала бы её за пункт. */
.nav-vac.hidden   { display: none; }
.nav-vac          { position: absolute; z-index: 50; min-width: 15rem;
                    max-width: 22rem; padding: .25rem;
                    background: var(--n-0); border: 1px solid var(--n-200);
                    border-radius: .5rem; box-shadow: 0 10px 24px rgba(15,23,42,.18); }
.nav-vac-item     { display: flex; align-items: center; gap: .5rem;
                    padding: .35rem .5rem; border-radius: .375rem;
                    font-size: 13px; color: var(--n-700); }
.nav-vac-item:hover { background: var(--n-100); }
.nav-vac-name     { flex: 1; min-width: 0; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.nav-vac-num      { font-size: 12px; color: var(--n-500); flex: none; }
.nav-vac-all      { color: var(--accent); font-weight: 500;
                    border-top: 1px solid var(--n-100); border-radius: 0 0 .375rem .375rem; }
.nav-vac-empty    { padding: .5rem; font-size: 13px; color: var(--n-500); }

/* ── Окно отправки: помещается в экран ────────────────────────── */
/* Шаблонов бывает полтора десятка, и они выдавливали за нижний край и поле
   текста, и саму кнопку «Отправить»: окно росло, а экран — нет. Теперь высоту
   ограничивает экран, а прокручивается прежде всего список шаблонов — так
   текст и кнопка остаются на виду. */
.qs-pop           { max-height: calc(100vh - 8rem); overflow-y: auto; }
.qs-pop-tpls      { max-height: 34vh; overflow-y: auto; }

/* ── Опыт работы в карточке отклика ───────────────────────────── */
/* Три части читаются как три: должность — крупно и плотно, «где и сколько» —
   мелко и в строку, обязанности — обычным текстом с отступом. Раньше всё шло
   одним размером и одним тоном, и место работы приходилось разбирать по
   словам. Полоска слева отделяет одно место от другого лучше пустоты: мест
   бывает восемь, и без неё они сливаются в сплошную простыню. */
.exp-list         { display: flex; flex-direction: column; gap: .75rem; }
.exp-item         { border-left: 2px solid var(--n-200); padding-left: .625rem; }
.exp-role         { font-size: 14px; font-weight: 600; color: var(--n-700);
                    line-height: 1.3; }
.exp-meta         { display: flex; flex-wrap: wrap; align-items: baseline;
                    gap: .25rem .5rem; margin-top: .1rem;
                    font-size: 12px; color: var(--n-500); }
.exp-company      { color: var(--n-600); }
.exp-when::before { content: "·"; margin-right: .5rem; color: var(--n-300); }
.exp-spent        { padding: 0 .35rem; border-radius: .25rem;
                    background: var(--n-100); color: var(--n-600);
                    font-size: 11px; white-space: nowrap; }
.exp-text         { margin-top: .3rem; font-size: 13px; line-height: 1.45;
                    color: var(--n-600); }

/* Карточка сотрудника. Скругление держится на первой и последней полосе, а не
   на overflow: hidden у самой карточки — тот обрезал выпадающее меню «⋯»,
   которое длиннее строки сотрудника. */
.user-card > :first-child { border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.user-card > :last-child  { border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem; }

/* ══════════════════════════════════════════════════════════════════
   Дашборд
   ══════════════════════════════════════════════════════════════════ */

/* Ряд KPI-тайлов: auto-fit вместо фиксированных колонок — тайл, закрытый
   правами, не оставляет дыры, а оставшиеся не расползаются в пустые плиты. */
.dash-tiles       { display: grid; gap: 1rem;
                    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

/* Воронка: строка «стадия · полоса · число». Конец данных скруглён, у базовой
   линии (слева) прямой угол; длина нормирована к самой большой стадии. */
.dash-fn-grid     { display: grid; grid-template-columns: 12rem 1fr 3.5rem;
                    align-items: center; column-gap: .75rem; row-gap: 2px; }
.dash-fn-label    { display: inline-flex; align-items: center; gap: .5rem;
                    font-size: var(--fs-ui); color: var(--n-600); min-width: 0; }
/* Дорожка под полосой — как у .fn-bar: без неё тёмно-синяя полоса «Новых»
   сливается с тёмной карточкой в тёмной теме. */
.dash-fn-track    { background: var(--n-100); border-radius: 0 4px 4px 0; }
.dash-fn-fill     { height: 14px; border-radius: 0 4px 4px 0; min-width: 2px; }
.dash-fn-count    { font-size: var(--fs-ui); font-weight: 600; color: var(--n-700);
                    text-align: right; font-variant-numeric: tabular-nums; }
/* Конверсия живёт в межстрочном жёлобе, под началом полосы */
.dash-fn-conv     { grid-column: 2 / 4; font-size: var(--fs-micro);
                    color: var(--n-400); padding: 1px 0 1px 2px; }

/* Поток откликов: колонки одной серии. Слот на всю высоту и ширину дня —
   попадать наведением надо в день, а не в узкий столбик. Отступ сверху
   оставляет место подписи пика над самым высоким баром. */
.dash-flow-plot   { display: flex; align-items: flex-end; height: 8.5rem;
                    padding-top: 1.1rem; box-sizing: border-box;
                    border-bottom: 1px solid var(--n-200); }
.dash-flow-slot   { flex: 1 1 0; min-width: 0; height: 100%; position: relative;
                    display: flex; align-items: flex-end; justify-content: center; }
.dash-flow-bar    { width: calc(100% - 2px); max-width: 22px;
                    background: rgb(var(--info-rgb));
                    border-radius: 4px 4px 0 0; }
.dash-flow-slot:hover .dash-flow-bar { filter: brightness(1.12); }
/* Пустое состояние: текст по центру плота, а не на линии оси */
.dash-flow-plot.is-empty { align-items: center; }
/* Недельный мини-график звонков: ниже, без места под подпись пика */
.dash-flow-plot--mini { height: 5rem; padding-top: .25rem; }

/* Стрелка разворота вакансии */
.dash-vac-chev         { transition: transform var(--dur) var(--ease); }
.dash-vac-chev.is-open { transform: rotate(90deg); }

/* Воронка в развороте вакансии: колонка подписей уже, полное имя стадии
   остаётся в подсказке полосы */
.dash-fn-grid--compact { grid-template-columns: 8.5rem 1fr 3rem; }
.dash-flow-peak   { position: absolute; top: -1.05rem; left: 50%;
                    transform: translateX(-50%); font-size: var(--fs-micro);
                    color: var(--n-500); font-variant-numeric: tabular-nums; }
.dash-flow-axis   { display: flex; margin-top: .35rem; }
.dash-flow-axis > span { flex: 1 1 0; min-width: 0; text-align: center;
                    font-size: var(--fs-micro); color: var(--n-400);
                    white-space: nowrap; }

/* Всплывающая подсказка графиков: одна на страницу, ведёт её скрипт страницы.
   Тёмная в обеих темах — ink-900 остаётся тёмным и в тёмной теме. */
.dash-tip         { position: absolute; z-index: 60; display: none;
                    background: var(--ink-900); color: var(--on-ink);
                    font-size: var(--fs-caption); line-height: 1.4;
                    padding: 4px 8px; border-radius: var(--r-sm);
                    box-shadow: var(--sh-lg); pointer-events: none;
                    max-width: 18rem; }

/* ══════════════════════════════════════════════════════════════
   Зона перетаскивания записи

   Диалог выбора файла остаётся, зона его не заменяет: это один и тот же
   input, просто дотянуться до него теперь можно двумя способами. Стили
   здесь, а не утилитами — собранный tailwind.css статичен, а состояний у
   зоны три (покой, над ней тащат, файл выбран), и все три нужны цветом.
   ══════════════════════════════════════════════════════════════ */

.dropzone {
    position: relative;              /* якорь для спрятанного input */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.25rem;
    padding: .75rem 1rem;
    border: 1px dashed var(--n-300);
    border-radius: var(--r);
    background: var(--n-50);
    color: var(--n-500);
    font-size: var(--fs-caption);
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
                background var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.dropzone:hover { border-color: var(--accent); color: var(--n-600); }

/* Пока тащат над зоной — она должна быть заметно живой, иначе непонятно,
   отпускать здесь или мимо */
.dropzone.is-over {
    border-style: solid;
    border-color: var(--accent);
    background: rgb(var(--accent-bg-rgb) / 1);
    color: var(--accent-deep);
}

.dropzone.has-file {
    border-style: solid;
    border-color: var(--ok);
    background: rgb(var(--ok-bg-rgb) / 1);
    color: var(--ok);
}

/* input нужен формой, но не глазами: нажатие ловит обёртка-label */
.dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dropzone-picked { font-weight: 600; overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════
   Панель «Записи и файлы»

   Строка вместо карточки: у кандидата этих строк бывает десяток, и каждая
   в виде карточки с раскрытым плеером превращала панель в простыню. Плеер
   под спойлером — он нужен раз, а список читают всегда.
   ══════════════════════════════════════════════════════════════ */

.rec-rows   { border: 1px solid var(--n-200); border-radius: var(--r); overflow: hidden; }
.rec-row    { padding: .5rem .75rem; background: var(--n-0); }
.rec-row + .rec-row { border-top: 1px solid var(--n-200); }

.rec-head   { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.rec-title  { font-size: var(--fs-ui); font-weight: 600; color: var(--n-700);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-meta   { font-size: var(--fs-micro); color: var(--n-500); margin-top: .1rem; }

.rec-state  { flex: none; font-size: var(--fs-micro); padding: .1rem .4rem;
              border-radius: var(--r-pill); white-space: nowrap; }
.rec-state-ok   { background: rgb(var(--ok-bg-rgb) / 1); color: var(--ok); }
.rec-state-err  { background: rgb(var(--err-bg-rgb) / 1); color: var(--err); }
.rec-state-wait { background: var(--n-100); color: var(--n-600); }

/* Действия — одной строкой мелким шрифтом: они нужны редко и не должны
   спорить с названием записи */
.rec-acts   { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem;
              margin-top: .375rem; font-size: var(--fs-micro); }
.rec-act    { color: var(--n-500); background: none; border: 0; padding: 0;
              cursor: pointer; }
.rec-act:hover     { color: var(--n-700); }
.rec-act-do        { color: var(--accent); font-weight: 500; }
.rec-act-do:hover  { color: var(--accent-deep); }
.rec-act-del:hover { color: var(--err); }

.rec-play > summary { color: var(--accent); cursor: pointer; list-style: none; }
.rec-play > summary::-webkit-details-marker { display: none; }
.rec-play[open]     { width: 100%; }

/* Подтверждение прямо в строке вместо окна браузера */
.ask-sure   { display: none; align-items: center; gap: .375rem; color: var(--n-600); }
.ask-wrap.asking .ask-open { display: none; }
.ask-wrap.asking .ask-sure { display: inline-flex; }
.ask-yes, .ask-no { background: none; border: 0; padding: 0; cursor: pointer;
                    font-weight: 600; }
.ask-yes    { color: var(--accent); }
.ask-yes-del{ color: var(--err); }
.ask-no     { color: var(--n-500); }

/* Форма приёма свёрнута: панель открывают посмотреть, а не заполнять поля */
.rec-add > summary {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: var(--fs-caption); color: var(--accent);
    cursor: pointer; list-style: none;
}
.rec-add > summary::-webkit-details-marker { display: none; }
.rec-add > summary::before { content: "+"; font-weight: 600; }
.rec-add > summary:hover { color: var(--accent-deep); }