/* /Pages/Admin/VideoAnalyses.razor.rz.scp.css */
/* VideoAnalyses — scoped-остатки после миграции на Tailwind (tw-*).
   Здесь только то, что утилитами не выражается: keyframe-анимации бегущего
   прогресс-бара статуса. Цвета градиента задаются tw-классами в разметке
   (tw-from-blue-400 / tw-via-blue-600 … или amber-вариант для warning),
   поэтому цветов в этом файле нет. */

.va-status-progress__fill[b-kbq4jik7uy] {
    animation: va-status-progress-shift-b-kbq4jik7uy 2.4s linear infinite;
}

.va-status-progress__fill--indeterminate[b-kbq4jik7uy] {
    width: 42%;
    animation: va-status-progress-slide-b-kbq4jik7uy 1.35s ease-in-out infinite;
}

@keyframes va-status-progress-shift-b-kbq4jik7uy {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@keyframes va-status-progress-slide-b-kbq4jik7uy {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(240%);
    }
}
/* /Pages/AssignmentsBrowse.razor.rz.scp.css */
/* Page layout — обычный поток, ОДИН общий скролл страницы (как «Расписание» и
   «История»): заголовок и фильтр-бар уезжают вместе со списком. Fixed-раскладка
   с внутренним скроллом панели удалена (2026-07-11). */

/* «Новое задание» — ghost-кнопка: рамка и разделитель шеврона — приглушённый акцент
   (Tailwind-цвета проекта заданы как var() без alpha-канала, модификатор /NN к ним
   неприменим — поэтому color-mix здесь). */
.ab-new-task-btn[b-jtojayxyyn] {
    border: 1px solid color-mix(in srgb, var(--app-accent) 45%, transparent);
}

.ab-new-task-caret[b-jtojayxyyn] {
    border-left-color: color-mix(in srgb, var(--app-accent) 30%, transparent);
}

/* Мобильный компактный поиск: строка «раздвигается» из иконки-лупы (лупа стоит справа,
   поэтому origin — правый край) — короткий scaleX + проявление. */
@keyframes ab-search-pop-b-jtojayxyyn {
    from { transform: scaleX(.94); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

.ab-search-pop[b-jtojayxyyn] {
    transform-origin: right center;
    animation: ab-search-pop-b-jtojayxyyn .18s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .ab-search-pop[b-jtojayxyyn] { animation: none; }
}

/* В поле есть свой ✕ (сворачивает и чистит) — родной крестик WebKit-инпута type=search
   убираем, чтобы не стояло два крестика рядом. */
.ab-search-input[b-jtojayxyyn]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================================
   Views — задания текут в общем скролле страницы; у панелей нет
   собственной высоты/скролла (остались только entrance-анимации).
   ============================================================ */

/* Entrance-анимация входа вида — как на странице «План»: вид мягко въезжает
   (небольшой сдвиг + проявление), без жёсткого горизонтального трека на всю ширину. */
@keyframes ab-view-in-right-b-jtojayxyyn {
    from { transform: translateX(28px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes ab-view-in-left-b-jtojayxyyn {
    from { transform: translateX(-28px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.ab-view-enter-forward[b-jtojayxyyn] {
    animation: ab-view-in-right-b-jtojayxyyn 0.28s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.ab-view-enter-back[b-jtojayxyyn] {
    animation: ab-view-in-left-b-jtojayxyyn 0.28s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
    .ab-view-enter-forward[b-jtojayxyyn],
    .ab-view-enter-back[b-jtojayxyyn] {
        animation: none;
    }
}

/* ============================================================
   Desktop (>= 992px): тело страницы (список, заголовок, фильтр-бар,
   онбординг-подсказка) ограничено 880px и центрировано — как
   .plan-page-body на «Расписании». На мобиле — во всю ширину контейнера.
   ============================================================ */
@media (min-width: 992px) {
    .ab-split-layout[b-jtojayxyyn],
    .ab-page-title[b-jtojayxyyn],
    .ab-filter-bar[b-jtojayxyyn] {
        width: 100%;
        max-width: 880px;
        margin-inline: auto;
    }

    /* Онбординг-подсказка — дочерний компонент (::deep); центрируем в ту же колонку,
       чтобы плашка не растягивалась на всю ширину, а совпадала с телом страницы. */
    [b-jtojayxyyn] .ab-onboarding-hint {
        width: 100%;
        max-width: 880px;
        margin-inline: auto;
    }
}

/* Slide-in animation for inline analysis view */
@keyframes ab-slide-in-right-b-jtojayxyyn {
    from { transform: translateX(30%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.ab-analysis-slide-in[b-jtojayxyyn] {
    animation: ab-slide-in-right-b-jtojayxyyn 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .ab-analysis-slide-in[b-jtojayxyyn] {
        animation: none;
    }
}

/* Detail back button */
.ab-back-btn i[b-jtojayxyyn] {
    font-size: 1.125rem;
}

/* ============================================================
   Блок «Суть задания» в раскрытой карточке (редизайн 2026-07-24):
   превью описания — кламп на 3 строки, снизу «тающий» градиент к
   фону карточки, подталкивающий к «Читать полностью».
   ============================================================ */
.ab-essence-clamp[b-jtojayxyyn] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ab-essence-fade[b-jtojayxyyn] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    background: linear-gradient(180deg, transparent, var(--app-surface, #fff) 92%);
    pointer-events: none;
}

/* Task card in list */
.ab-task-card[b-jtojayxyyn] {
    cursor: pointer;
    transition: background-color 0.12s ease;
    border-bottom: 1px solid var(--app-border, #e8e8e8);
}

.ab-task-card:hover[b-jtojayxyyn] {
    background-color: var(--app-hover, rgba(0, 0, 0, 0.02));
}

.ab-task-card.selected[b-jtojayxyyn] {
    background-color: rgb(var(--primary-600) / 0.06);
}

[b-jtojayxyyn] .ab-task-thumbnail {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 8px;
    object-fit: cover;
    background-color: var(--app-surface-alt, #f0f0f0);
}

/* Карточки-действия — ОБЩИЙ ховер (идентичен «Плану» и «Истории»): заметная нейтральная
   подложка (--app-hover-strong, работает и в тёмной, и в светлой теме) + мягкая тень + лёгкий
   подъём. Нейтральный (безоттеночный) фон не конфликтует с цветными карточками (акцент/зелёный
   «Архив»). Акцентную CTA «Записать видео» (фон tw-bg-app-accent-soft) исключаем из смены фона,
   чтобы не гасить её заливку — ей достаётся только тень+подъём. */
.ab-action-card[b-jtojayxyyn] {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}

.ab-action-card:hover[b-jtojayxyyn] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ab-action-card:not(.tw-bg-app-accent-soft):hover[b-jtojayxyyn] {
    background-color: var(--app-hover-strong);
}

.ab-action-card:active[b-jtojayxyyn] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ab-action-card.active[b-jtojayxyyn] {
    border-color: var(--app-accent, #5b57d6) !important;
    background-color: rgb(var(--primary-600) / 0.04);
}

/* Lifecycle timeline */
.ab-timeline-line[b-jtojayxyyn] {
    width: 2px;
    background-color: var(--app-border, #e8e8e8);
}

.ab-timeline-dot[b-jtojayxyyn] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--app-bg, #fafafa);
    border: 2px solid var(--app-border, #e8e8e8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.ab-timeline-dot.created[b-jtojayxyyn] { border-color: #22c55e; color: #22c55e; }
.ab-timeline-dot.phase[b-jtojayxyyn] { border-color: #6f69dd; color: #6f69dd; }
.ab-timeline-dot.suggestion[b-jtojayxyyn] { border-color: #f59e0b; color: #f59e0b; }
.ab-timeline-dot.variant[b-jtojayxyyn] { border-color: #06b6d4; color: #06b6d4; }
.ab-timeline-dot.error[b-jtojayxyyn] { border-color: #ef4444; color: #ef4444; }

/* Panel placeholder */
.ab-panel-placeholder[b-jtojayxyyn] {
    background-color: transparent;
    border: 1px dashed var(--app-border, #e8e8e8);
    border-radius: var(--radius-md, 12px);
    min-height: 400px;
}

/* Task editor in right panel */
.ab-task-editor-section .card-surface[b-jtojayxyyn] {
    border-radius: var(--radius-md, 12px);
}

/* Group header */
.ab-group-header[b-jtojayxyyn] {
    border-bottom: 1px solid var(--app-border, #e8e8e8);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.ab-group-header:hover[b-jtojayxyyn] {
    background-color: var(--app-hover, rgba(0, 0, 0, 0.03));
}

/* Media library modal */
.ab-media-library-modal[b-jtojayxyyn] {
    max-width: min(90vw, 1200px);
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .ab-media-library-modal[b-jtojayxyyn] {
        max-width: min(85vw, 1100px);
    }
}

/* Тело tw-модалки медиатеки: у .media-library-browser базовая высота рассчитана
   на полноэкранную страницу (100dvh минус шапка) — внутри модалки растягиваем
   его ровно на высоту тела (flex-1 у .ab-media-library-body). */
.ab-media-library-body[b-jtojayxyyn]  .media-library-browser {
    height: 100%;
    max-height: none;
}

/* Filter chip — used in filters modal */
.ab-filter-chip[b-jtojayxyyn] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 999px;
    border: 1px solid var(--app-border, #e0e0e0);
    background: var(--app-surface, #fff);
    color: var(--app-text, #333);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ab-filter-chip:hover[b-jtojayxyyn] {
    background: var(--app-hover, rgba(0, 0, 0, 0.04));
}

.ab-filter-chip.active[b-jtojayxyyn] {
    background: var(--app-accent, #5b57d6);
    color: #fff;
    border-color: var(--app-accent, #5b57d6);
}

.ab-filter-chip.active-green[b-jtojayxyyn] {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}

/* Period chip */
.ab-period-chip[b-jtojayxyyn] {
    transition: all 0.12s ease;
}

.ab-period-chip.active[b-jtojayxyyn] {
    background-color: var(--app-accent, #5b57d6) !important;
    color: white !important;
    border-color: var(--app-accent, #5b57d6) !important;
}
/* /Pages/Components/AttemptHistoryFilter.razor.rz.scp.css */
/* В поле есть свой ✕ (чистит запрос) — родной крестик WebKit-инпута
   type=search убираем, чтобы не стояло два крестика рядом. */
.ahf-search-input[b-f8mfuckibw]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
/* /Pages/Components/ScheduleDateSelector.razor.rz.scp.css */
/* ScheduleDateSelector — «навигация недели» расписания (редизайн из макета):
   ── ряд управления: «Сегодня» (точка-акцент) + «Календарь / диапазон» (открывает
      месячный поповер) + кольцо бюджета;
   ── полоса дней: стрелки ОБНИМАЮТ полосу и сдвигают окно на ОДИН день; на телефоне
      полоса прокручивается пальцем; выбранный день залит акцентом.
   Все цвета — через токены темы (--app-*), чтобы тёмная тема работала из коробки. */

.pw[b-2rfquep36t] {
    gap: 0.85rem;
}

/* ── Ряд управления ── */
/* .day-plan-date-picker (site.css) уже задаёт display:flex; align-items:center; gap.
   Прижимаем кластер вправо (как в макете: «Сегодня · Календарь» в правом верхнем углу). */
.pw-controls[b-2rfquep36t] {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.5rem;
}

/* «Сегодня» — точка-акцент + текст; виден, только когда выбран не сегодняшний день
   или полоса перелистана на другой диапазон. */
.pw-today[b-2rfquep36t] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.95rem;
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    background: transparent;
    color: var(--app-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pw-today:hover[b-2rfquep36t] {
    background: var(--app-hover);
    border-color: var(--app-muted);
}

.pw-today__dot[b-2rfquep36t] {
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 50%;
    background: var(--app-accent);
    flex-shrink: 0;
}

/* «Календарь» — показывает текущий диапазон («7–13 июля») и открывает месячный
   поповер для быстрого прыжка на любую дату. */
.pw-cal[b-2rfquep36t] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.9rem;
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pw-cal:hover[b-2rfquep36t] {
    background: var(--app-hover);
    border-color: var(--app-muted);
}

.pw-cal__icon[b-2rfquep36t] {
    font-size: 0.95rem;
    color: var(--app-accent);
}

.pw-cal__caret[b-2rfquep36t] {
    font-size: 0.6rem;
    color: var(--app-muted);
}

/* ── Полоса дней: стрелки + семь карточек ── */
.pw-strip[b-2rfquep36t] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

/* Стрелка-бар обнимает полосу по всей её высоте и сдвигает окно на один день. */
.pw-arrow[b-2rfquep36t] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.875rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: var(--app-surface);
    color: var(--app-text-secondary);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pw-arrow:hover[b-2rfquep36t] {
    background: var(--app-hover);
    border-color: var(--app-muted);
    color: var(--app-text);
}

.pw-arrow:active[b-2rfquep36t] {
    background: var(--app-hover);
}

.pw-days[b-2rfquep36t] {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.75rem;
}

.pw-day[b-2rfquep36t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.95rem 0.4rem 0.85rem;
    border: 1px solid var(--app-border);
    border-radius: 1.125rem;
    background: var(--app-surface);
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

/* Никакого transform на :hover — hover считается по сдвинутому боксу, и у нижнего
   края карточка уезжает из-под курсора: hover снимается, карточка возвращается,
   и курсор дрожит «рука ↔ стрелка». Подсветка — только рамкой и тенью. */
.pw-day:hover[b-2rfquep36t] {
    border-color: color-mix(in srgb, var(--app-accent) 40%, var(--app-border));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
    background: var(--app-surface-alt);
}

.pw-day__dow[b-2rfquep36t] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--app-muted);
    line-height: 1;
}

.pw-day__num[b-2rfquep36t] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--app-text);
}

.pw-day__status[b-2rfquep36t] {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--app-muted);
}

/* Полный текст статуса («29/36 готово») — на широких экранах; короткий («29/36»,
   «5 зад.») — на телефоне, где карточка узкая и полный не влезает. */
.pw-day__status-short[b-2rfquep36t] {
    display: none;
}

@media (max-width: 479px) {
    .pw-day__status-full[b-2rfquep36t] {
        display: none;
    }

    .pw-day__status-short[b-2rfquep36t] {
        display: inline;
    }
}

/* Статусы: выполнено всё — зелёный; есть прогресс/задания — чуть темнее нейтрального;
   свободный день — самый тихий. */
.pw-day__status--done[b-2rfquep36t] {
    color: #059669; /* emerald-600 — канон success (§2.3), вместо bootstrap-зелёного #198754 */
}

.pw-day__status--progress[b-2rfquep36t],
.pw-day__status--tasks[b-2rfquep36t] {
    color: var(--app-text-secondary);
}

.pw-day__status--free[b-2rfquep36t] {
    color: color-mix(in srgb, var(--app-muted) 72%, transparent);
    font-weight: 500;
}

/* Прошедшие дни — приглушённое число (как в референсе). */
.pw-day--past:not(.pw-day--selected) .pw-day__num[b-2rfquep36t] {
    color: var(--app-text-secondary);
}

/* Сегодня (не выбран) — акцентная рамка и подпись дня недели. */
.pw-day--today:not(.pw-day--selected)[b-2rfquep36t] {
    border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-border));
}

.pw-day--today:not(.pw-day--selected) .pw-day__dow[b-2rfquep36t] {
    color: var(--app-accent);
}

/* Выбранный день — заливка акцентом, белый текст, мягкая цветная тень. */
.pw-day--selected[b-2rfquep36t] {
    background: var(--app-accent);
    border-color: var(--app-accent);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--app-accent) 32%, transparent);
}

.pw-day--selected:hover[b-2rfquep36t] {
    background: var(--app-accent);
    border-color: var(--app-accent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--app-accent) 34%, transparent);
}

.pw-day--selected .pw-day__dow[b-2rfquep36t] {
    color: rgba(255, 255, 255, 0.78);
}

.pw-day--selected .pw-day__num[b-2rfquep36t] {
    color: #fff;
}

.pw-day--selected .pw-day__status[b-2rfquep36t],
.pw-day--selected .pw-day__status--done[b-2rfquep36t],
.pw-day--selected .pw-day__status--progress[b-2rfquep36t],
.pw-day--selected .pw-day__status--tasks[b-2rfquep36t],
.pw-day--selected .pw-day__status--free[b-2rfquep36t] {
    color: rgba(255, 255, 255, 0.88);
}

/* Мобильная лента дат по умолчанию скрыта — на десктопе показывается недельная полоса
   (.pw-strip). Ниже ≤575px они меняются местами. */
.pw-rail[b-2rfquep36t] {
    display: none;
}

/* Подсказка про листание — только на телефоне (лента прокручивается пальцем). */
.pw-hint[b-2rfquep36t] {
    display: none;
    text-align: center;
    font-size: 0.7rem;
    color: var(--app-muted);
}

/* ── Мобильная компоновка: недельную полосу со стрелками прячем, а вместо неё показываем
      широкую ЛЕНТУ ДАТ (.pw-rail) — карточки фиксированной ширины листаются пальцем с
      инерцией далеко в обе стороны, тап выбирает день. Ряд управления («Сегодня»/«Календарь»)
      остаётся. Статус переключается на короткий вид (правило ≤479px выше). ── */
@media (max-width: 575px) {
    .pw[b-2rfquep36t] {
        gap: 0.55rem;
    }

    /* Кнопку «Календарь» растягиваем на всю ширину — как в макете (крупная цель). */
    .pw-controls[b-2rfquep36t] {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.4rem;
    }

    .pw-cal[b-2rfquep36t] {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
        padding-inline: 0.55rem;
    }

    .pw-cal__range[b-2rfquep36t] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pw-today[b-2rfquep36t] {
        height: 2.25rem;
        padding-inline: 0.65rem;
        font-size: 0.8rem;
    }

    /* Десктопную полосу (7 дней + стрелки) на телефоне убираем — её заменяет лента дат. */
    .pw-strip[b-2rfquep36t] {
        display: none;
    }

    /* Лента дат — горизонтальный «рельс»: прокрутка пальцем с инерцией (iOS), мягкое
       «прилипание» к дню, свой скролл НЕ пробрасываем в жест «назад» браузера. Полоску
       прокрутки прячем — про листание подсказывает .pw-hint ниже. */
    .pw-rail[b-2rfquep36t] {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* старый Edge */
    }

    .pw-rail[b-2rfquep36t]::-webkit-scrollbar {
        display: none;               /* WebKit / iOS Safari */
    }

    /* Карточки фиксированной ширины (не ужимаются): на экран влезает ~4–5 дней, остальные
       достаются пальцем. snap-align центрирует активный день при листании/тапе. */
    .pw-rail .pw-day[b-2rfquep36t] {
        flex: 0 0 4.25rem;
        scroll-snap-align: center;
        gap: 0.25rem;
        padding: 0.6rem 0.35rem 0.55rem;
        border-radius: 0.85rem;
    }

    .pw-rail .pw-day__num[b-2rfquep36t] {
        font-size: 1.25rem;
    }

    .pw-rail .pw-day__dow[b-2rfquep36t] {
        font-size: 0.58rem;
        letter-spacing: 0.04em;
    }

    .pw-rail .pw-day__status[b-2rfquep36t] {
        font-size: 0.58rem;
    }

    .pw-hint[b-2rfquep36t] {
        display: block;
    }
}
/* /Pages/Components/TaskCommentEditor.razor.rz.scp.css */
.task-comment-editor[b-grlfp7e869] {
    background-color: var(--app-surface-alt, #f9fafb);
    border: 1px solid var(--app-border, #e8e8e8);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.task-comment-editor__attachments[b-grlfp7e869] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-comment-editor__attachment-item[b-grlfp7e869] {
    background-color: var(--app-surface, #fff);
    border: 1px solid var(--app-border, #e8e8e8);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.task-comment-editor__attachment-thumb-wrapper[b-grlfp7e869] {
    align-items: center;
    display: flex;
    height: 64px;
    justify-content: center;
    width: 64px;
    border-radius: 0.5rem;
    background-color: var(--app-surface-alt, #f9fafb);
}

.task-comment-editor__attachment-thumb[b-grlfp7e869] {
    max-height: 100%;
    max-width: 100%;
    border-radius: 0.5rem;
    object-fit: cover;
}

.task-comment-editor__attachment-icon[b-grlfp7e869] {
    font-size: 1.5rem;
}

.task-comment-editor__attachment-info[b-grlfp7e869] {
    min-width: 0;
}

.task-comment-editor__attachment-name[b-grlfp7e869] {
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .task-comment-editor[b-grlfp7e869] {
        padding: 1rem;
    }

    .task-comment-editor__attachment-item[b-grlfp7e869] {
        flex-direction: column;
        align-items: flex-start;
    }

    .task-comment-editor__attachment-thumb-wrapper[b-grlfp7e869] {
        width: 100%;
    }

    .task-comment-editor__attachment-info[b-grlfp7e869] {
        width: 100%;
    }

    .task-comment-editor__attachment-name[b-grlfp7e869] {
        width: 100%;
    }
}
/* /Pages/Onboarding/Onboarding.razor.rz.scp.css */
/* Чат «Знакомства» в каноне ИИ-помощника — порт из Pages/Students/AiAssistant.razor.css.
   Цвета — через --app-* переменные, поэтому тёмная тема (html.dark) работает сама.
   Спаны .ai-reveal-word создаёт /js/ai-chat-viewport.js (attachReveal) уже ПОСЛЕ рендера —
   они без scope-атрибута компонента, отсюда ::deep. */

.transcript-entry[b-6zaxxvl3z9] {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: min(82%, 680px);
    word-wrap: break-word;
    flex-shrink: 0;
}

/* Реплика родителя — акцентный пузырь справа (фирменный --app-accent). */
.transcript-user[b-6zaxxvl3z9] {
    align-self: flex-end;
    background: var(--app-accent, #5b57d6);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--app-accent, #5b57d6) 18%, transparent);
}

/* Реплика ИИ — «без пузыря»: бот-иконка + текст во всю ширину с мерой строки. */
.transcript-ai[b-6zaxxvl3z9] {
    align-self: stretch;
    max-width: 100%;
    background: transparent;
    color: var(--app-text, #1c1c1c);
    border-radius: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

.transcript-ai-icon[b-6zaxxvl3z9] {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-accent-soft, rgba(91, 87, 214, 0.08));
    color: var(--app-accent, #5b57d6);
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 0.9rem;
}

.transcript-text[b-6zaxxvl3z9] {
    display: block;
    word-break: break-word;
    /* Реплики — простой текст (не Markdown): переводы строк сохраняем. */
    white-space: pre-wrap;
}

.transcript-ai .transcript-text[b-6zaxxvl3z9] {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
    /* Мера строки ~66 символов — как у ответа помощника (читаемость). */
    max-width: 66ch;
}

/* Новая реплика куратора: мягкое появление + пульс иконки, пока идёт «стрим». */
.transcript-ai.is-streaming[b-6zaxxvl3z9] { animation: onb-stream-entry-in-b-6zaxxvl3z9 0.2s ease-out both; }
.transcript-ai.is-streaming .transcript-ai-icon[b-6zaxxvl3z9] { animation: onb-stream-icon-pulse-b-6zaxxvl3z9 1.45s ease-in-out infinite; }

@keyframes onb-stream-entry-in-b-6zaxxvl3z9 {
    from { opacity: 0.35; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes onb-stream-icon-pulse-b-6zaxxvl3z9 {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-accent, #5b57d6) 0%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-accent, #5b57d6) 12%, transparent); }
}

/* Пословное проявление. Скрытие привязано к .is-streaming нарочно: конец «стрима»
   снимает класс — невидимого текста не остаётся, даже если JS не успел показать хвост. */
.transcript-ai.is-streaming .ai-markdown[b-6zaxxvl3z9]  .ai-reveal-word { opacity: 0; }

.transcript-ai .ai-markdown[b-6zaxxvl3z9]  .ai-reveal-word.is-in {
    animation: onb-word-in-b-6zaxxvl3z9 0.38s ease-out both; /* = REVEAL_FADE_MS в ai-chat-viewport.js */
}

@keyframes onb-word-in-b-6zaxxvl3z9 {
    from { opacity: 0; filter: blur(2.5px); }
    to   { opacity: 1; filter: none; }
}

/* «ИИ думает…» — плашка с канвас-анимацией (ThinkingAnimation) и ротацией фраз. */
.transcript-typing[b-6zaxxvl3z9] {
    align-items: center;
    align-self: flex-start;
    max-width: none;
    padding: 5px 14px;
    border-radius: 16px;
    background: var(--app-surface-alt, #f9fafb);
    border: 1px solid var(--app-border, #e8e8e8);
}

/* Пошёл ответ — плашка схлопывается «в точку» у левого края (см. BeginReplyReveal).
   Отрицательный margin-top закрывает освободившееся место (gap ленты = 14px). */
.transcript-typing.is-collapsing[b-6zaxxvl3z9] {
    overflow: hidden;
    transform-origin: 20px center;
    pointer-events: none;
    animation: onb-thinking-collapse-b-6zaxxvl3z9 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes onb-thinking-collapse-b-6zaxxvl3z9 {
    0%   { transform: scale(1);    opacity: 1;    max-height: 60px; }
    55%  { transform: scale(0.12); opacity: 0.85; }
    100% {
        transform: scale(0.05);
        opacity: 0;
        max-height: 0;
        margin-top: -14px;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
    }
}

/* Акцентные заметки-подсказки (видео-шаг, итоги) и свечение акцентных кнопок —
   через color-mix от --app-accent, чего не выразить готовыми tailwind-токенами. */
.onb-note[b-6zaxxvl3z9] {
    background: var(--app-accent-soft, rgba(91, 87, 214, 0.08));
    border-color: color-mix(in srgb, var(--app-accent, #5b57d6) 30%, transparent);
}

.onb-accent-glow[b-6zaxxvl3z9] {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--app-accent, #5b57d6) 25%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .transcript-ai.is-streaming[b-6zaxxvl3z9],
    .transcript-ai.is-streaming .transcript-ai-icon[b-6zaxxvl3z9] { animation: none; }
    /* Слова не прячем (JS при reduce-motion спаны и не создаёт). */
    .transcript-ai.is-streaming .ai-markdown[b-6zaxxvl3z9]  .ai-reveal-word { opacity: 1; }
    .transcript-ai .ai-markdown[b-6zaxxvl3z9]  .ai-reveal-word.is-in { animation: none; }

    .transcript-typing.is-collapsing[b-6zaxxvl3z9] {
        animation: none;
        opacity: 0;
        max-height: 0;
        margin-top: -14px;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        overflow: hidden;
    }
}
/* /Pages/Students/AiAssistant.razor.rz.scp.css */
/* AiAssistant.razor — voice-first layout (большой mic-орб + транскрипт + текстовый ввод по запросу). */

.ai-assistant-page[b-ui4n6mzl03] {
    /* Чат намеренно уже тела «Заданий»/«Плана»: длинные ответы ИИ читаются
       комфортнее в узкой колонке. Ширина совпадает с композером (--ai-composer-width),
       поэтому лента и поле ввода образуют единую колонку. Саму «меру строки» текста
       (~66 символов) дополнительно ограничиваем на .transcript-ai .transcript-text. */
    --ai-chat-width: min(720px, 100%);
    --ai-composer-width: min(720px, 100%);
    display: flex;
    flex-direction: column;
    /* Чат живёт внутри панели плавающего виджета (AiAssistantWidget) — панель сама задаёт
       размеры (компакт/развёрнутый/fullscreen на мобиле и вычитание клавиатуры --ai-kb),
       компонент просто заполняет её целиком. Расчёты от 100dvh/шапки остались в истории
       вместе с отдельной страницей чата. */
    height: 100%;
    max-height: 100%;
    /* Чат живёт строго внутри своей ширины — никакого случайного «елозанья»
       пальцем влево-вправо (горизонтального скролла) на телефоне. */
    overflow-x: hidden;
    min-width: 0;
}

/* Шапка чата внутри виджета: заголовок рисует рамка панели, здесь остаётся только
   ряд чипов действий («Разборы» / «История» / «Новый чат»), прижатый вправо. */
.ai-assistant-header[b-ui4n6mzl03] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: var(--ai-chat-width);
    margin: 0 auto;
    padding: 8px 8px 8px;
    border-bottom: 1px solid transparent;
    flex-shrink: 0;
}

/* Пустая шапка (аудио-режим без чипов) схлопывается и не ест высоту чата. */
.ai-assistant-header:empty[b-ui4n6mzl03] {
    display: none;
}

.ai-token-badge[b-ui4n6mzl03] {
    font-size: 0.75rem;
    color: var(--app-text-secondary);
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 2px 10px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

.ai-assistant-content[b-ui4n6mzl03] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    min-height: 0;
    padding: 6px 0 0;
}

/* ── Большой mic-орб ── */

.realtime-visualizer[b-ui4n6mzl03] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0 8px;
    flex-shrink: 0;
    width: 100%;
}

/* Button-обёртка: убираем стандартный фон/рамку, добавляем pointer */
.realtime-orb-button[b-ui4n6mzl03] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.realtime-orb-button:hover:not(:disabled)[b-ui4n6mzl03] {
    transform: scale(1.04);
}

.realtime-orb-button:disabled[b-ui4n6mzl03] {
    cursor: default;
}

.realtime-orb-button:focus-visible[b-ui4n6mzl03] {
    outline: 3px solid rgba(111, 105, 221, 0.5);
    outline-offset: 4px;
}

.realtime-orb[b-ui4n6mzl03] {
    position: relative;
    width: 116px;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orb-core[b-ui4n6mzl03] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6f69dd, #8b5cf6);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
}

.orb-ring[b-ui4n6mzl03] {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(111, 105, 221, 0.2);
    transition: all 0.4s ease;
}

.orb-ring-1[b-ui4n6mzl03] { width: 76px; height: 76px; }
.orb-ring-2[b-ui4n6mzl03] { width: 96px; height: 96px; }
.orb-ring-3[b-ui4n6mzl03] { width: 116px; height: 116px; }

.state-idle .orb-core[b-ui4n6mzl03] {
    background: linear-gradient(135deg, #6f69dd, #8b5cf6);
    box-shadow: 0 8px 24px rgba(111, 105, 221, 0.35);
}
.state-idle .orb-ring[b-ui4n6mzl03] { border-color: rgba(111, 105, 221, 0.18); }

.state-connecting .orb-core[b-ui4n6mzl03] { animation: pulse-b-ui4n6mzl03 1.5s ease-in-out infinite; }
.state-connecting .orb-ring[b-ui4n6mzl03] { animation: ring-pulse-b-ui4n6mzl03 2s ease-in-out infinite; border-color: rgba(111, 105, 221, 0.3); }
.state-connecting .orb-ring-2[b-ui4n6mzl03] { animation-delay: 0.3s; }
.state-connecting .orb-ring-3[b-ui4n6mzl03] { animation-delay: 0.6s; }

.state-listening .orb-core[b-ui4n6mzl03] {
    background: linear-gradient(135deg, #6f69dd, #8b5cf6);
    box-shadow: 0 0 40px rgba(111, 105, 221, 0.45);
    animation: gentle-pulse-b-ui4n6mzl03 3s ease-in-out infinite;
}
.state-listening .orb-ring[b-ui4n6mzl03] { border-color: rgba(111, 105, 221, 0.3); }

.state-speaking .orb-core[b-ui4n6mzl03] {
    background: linear-gradient(135deg, #10b981, #34d399);
    box-shadow: 0 0 50px rgba(16, 185, 129, 0.55);
    transform: scale(1.08);
}
.state-speaking .orb-ring[b-ui4n6mzl03] { border-color: rgba(16, 185, 129, 0.35); animation: speaking-ring-b-ui4n6mzl03 0.8s ease-in-out infinite alternate; }
.state-speaking .orb-ring-2[b-ui4n6mzl03] { animation-delay: 0.15s; }
.state-speaking .orb-ring-3[b-ui4n6mzl03] { animation-delay: 0.3s; }

.orb-status-text[b-ui4n6mzl03] {
    font-size: 0.9rem;
    color: var(--app-text);
    margin: 10px 0 0;
    text-align: center;
    font-weight: 500;
}

/* ── Управление сессией под орбом ── */

.orb-controls[b-ui4n6mzl03] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.realtime-btn-mute[b-ui4n6mzl03] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

.realtime-btn-mute:hover[b-ui4n6mzl03] { background: #f3f4f6; }

.realtime-btn-mute.active[b-ui4n6mzl03] {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

.realtime-btn-stop[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 24px;
    background: #ef4444;
    color: white;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.realtime-btn-stop:hover[b-ui4n6mzl03] { background: #dc2626; }

.orb-voice-select[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Панель режима ввода (голос/текст) + новый чат ── */

.ai-mode-bar[b-ui4n6mzl03] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 720px;
    margin: 12px auto 0;
    padding: 0 16px;
    flex-shrink: 0;
}

.ai-mode-switch[b-ui4n6mzl03] {
    display: inline-flex;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.ai-mode-option[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--app-text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
}

.ai-mode-option.active[b-ui4n6mzl03] {
    background: var(--app-surface);
    color: var(--app-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Мягкая «soft-fill» кнопка вместо громкой пилюли с акцентной обводкой —
   спокойнее и современнее, не «режет глаз» в плотной шапке чата. */
.ai-new-chat-btn[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    background: color-mix(in srgb, var(--app-accent, #5b57d6) 12%, transparent);
    color: var(--app-accent, #5b57d6);
    border-radius: 12px;
    padding: 9px 15px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}

.ai-new-chat-btn:hover[b-ui4n6mzl03] {
    background: color-mix(in srgb, var(--app-accent, #5b57d6) 18%, transparent);
}

.ai-new-chat-btn:active[b-ui4n6mzl03] {
    transform: scale(.98);
}

/* «Разборы» — счётчик сохранённых разборов справа от подписи (рендерится только когда > 0).
   Сплошной акцент на мягком акцентном фоне кнопки читается как насыщенная «пилюля-число». */
.ai-reviews-badge[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--app-accent, #5b57d6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Текстовый режим: строка подключения ── */

.ai-kbd-bar[b-ui4n6mzl03] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 720px;
    padding: 14px 0 6px;
    flex-shrink: 0;
}

.ai-connect-btn[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #6f69dd, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(111, 105, 221, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ai-connect-btn:hover[b-ui4n6mzl03] { box-shadow: 0 8px 22px rgba(111, 105, 221, 0.4); }

.ai-kbd-hint[b-ui4n6mzl03] { font-size: 0.82rem; color: var(--app-text-secondary); }

.ai-kbd-status[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--app-text);
}

.ai-kbd-dot[b-ui4n6mzl03] { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ai-kbd-dot.active[b-ui4n6mzl03] { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.ai-kbd-dot.connecting[b-ui4n6mzl03] { background: #f59e0b; animation: gentle-pulse-b-ui4n6mzl03 1.2s ease-in-out infinite; }

.ai-kbd-stop[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ai-kbd-stop:hover[b-ui4n6mzl03] { background: #dc2626; }

/* ── Транскрипт — нормальной высоты бокс чата ── */

.ai-assistant-transcript[b-ui4n6mzl03] {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--ai-chat-width);
    min-height: 0;
    overflow-y: auto;
    padding: 14px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0;
    -webkit-overflow-scrolling: touch;
    /* Не даём встроенному scroll anchoring спорить с управляемым автоскроллом
       при изменении высоты Markdown-блоков во время стрима. */
    overflow-anchor: none;
    margin-top: 0;
    scroll-padding-bottom: 18px;
}

.ai-assistant-transcript.is-empty[b-ui4n6mzl03] {
    justify-content: center;
}

.ai-transcript-empty[b-ui4n6mzl03] {
    margin: auto;
    text-align: center;
    color: var(--app-text-secondary, #6b7280);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(100%, var(--ai-chat-width));
    padding: 24px 0 42px;
}

.ai-empty-mark[b-ui4n6mzl03] {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-accent-soft, rgba(91, 87, 214, 0.08));
    color: var(--app-accent, #5b57d6);
    border: 1px solid color-mix(in srgb, var(--app-accent, #5b57d6) 14%, transparent);
}

.ai-empty-mark i[b-ui4n6mzl03] {
    font-size: 1.55rem;
    line-height: 1;
}

.ai-empty-title[b-ui4n6mzl03] {
    margin: 0;
    color: var(--app-text, #1c1c1c);
    font-size: clamp(1.35rem, 2.6vw, 2.15rem);
    line-height: 1.2;
    font-weight: 640;
}

.ai-empty-prompts[b-ui4n6mzl03] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, var(--ai-composer-width));
    margin-top: 4px;
}

.ai-empty-prompt[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 64px;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--app-border, #e8e8e8) 72%, transparent);
    background: color-mix(in srgb, var(--app-surface, #fff) 86%, transparent);
    color: var(--app-text, #1c1c1c);
    border-radius: 16px;
    padding: 12px 14px;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.28;
    font-weight: 560;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .03);
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease;
}

.ai-empty-prompt:hover:not(:disabled)[b-ui4n6mzl03] {
    background: color-mix(in srgb, var(--app-accent-soft, rgba(91, 87, 214, 0.08)) 72%, var(--app-surface, #fff));
    border-color: color-mix(in srgb, var(--app-accent, #5b57d6) 38%, var(--app-border, #e8e8e8));
    color: var(--app-accent, #5b57d6);
    box-shadow: 0 10px 24px rgba(17, 24, 39, .08);
}

.ai-empty-prompt:focus-visible[b-ui4n6mzl03] {
    outline: 3px solid color-mix(in srgb, var(--app-accent, #5b57d6) 20%, transparent);
    outline-offset: 2px;
    border-color: color-mix(in srgb, var(--app-accent, #5b57d6) 46%, var(--app-border, #e8e8e8));
}

.ai-empty-prompt:active:not(:disabled)[b-ui4n6mzl03] {
    transform: scale(.98);
}

.ai-empty-prompt:disabled[b-ui4n6mzl03] {
    opacity: .55;
    cursor: default;
}

.transcript-entry[b-ui4n6mzl03] {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: min(82%, 680px);
    word-wrap: break-word;
    /* Контейнер транскрипта — flex-column со скроллом. Без этого flex-элементы с
       overflow:hidden (блоки инструментов) схлопывались в 2px-полоски, когда контента
       больше высоты. flex-shrink:0 = держим естественную высоту, контейнер скроллится. */
    flex-shrink: 0;
}

.transcript-text[b-ui4n6mzl03] { display: block; word-break: break-word; }
.transcript-text.ai-markdown[b-ui4n6mzl03] {
    white-space: normal;
    line-height: 1.42;
}

/* ── Markdown внутри ответа ИИ — компактные отступы (Markdig оборачивает в <p>/<ul>) ──
   ВАЖНО: HTML вставляется через MarkupString и НЕ получает scope-атрибут компонента,
   поэтому правила обязаны идти через ::deep — иначе они не матчат вставленные элементы
   и побеждает дефолт Bootstrap (p { margin-bottom: 1rem } = 16px → огромные пробелы). */
.ai-markdown[b-ui4n6mzl03]  *,
[b-ui4n6mzl03] .ai-markdown * { white-space: normal; }
.ai-markdown[b-ui4n6mzl03]  > :first-child,
[b-ui4n6mzl03] .ai-markdown > :first-child { margin-top: 0 !important; }
.ai-markdown[b-ui4n6mzl03]  > :last-child,
[b-ui4n6mzl03] .ai-markdown > :last-child { margin-bottom: 0 !important; }
.ai-markdown[b-ui4n6mzl03]  p,
[b-ui4n6mzl03] .ai-markdown p { margin: 0 0 0.22em !important; }
.ai-markdown[b-ui4n6mzl03]  ul,
.ai-markdown[b-ui4n6mzl03]  ol,
[b-ui4n6mzl03] .ai-markdown ul,
[b-ui4n6mzl03] .ai-markdown ol { margin: 0.12em 0 0.22em !important; padding-left: 1.25em; }
.ai-markdown[b-ui4n6mzl03]  li,
[b-ui4n6mzl03] .ai-markdown li { margin: 0.04em 0 !important; }
.ai-markdown[b-ui4n6mzl03]  li + li,
[b-ui4n6mzl03] .ai-markdown li + li { margin-top: 0.12em !important; }
.ai-markdown[b-ui4n6mzl03]  li > p,
[b-ui4n6mzl03] .ai-markdown li > p { margin: 0 !important; display: inline; }
.ai-markdown[b-ui4n6mzl03]  p:empty,
[b-ui4n6mzl03] .ai-markdown p:empty { display: none; }
.ai-markdown[b-ui4n6mzl03]  ul ul,
.ai-markdown[b-ui4n6mzl03]  ul ol,
.ai-markdown[b-ui4n6mzl03]  ol ul,
.ai-markdown[b-ui4n6mzl03]  ol ol,
[b-ui4n6mzl03] .ai-markdown ul ul,
[b-ui4n6mzl03] .ai-markdown ul ol,
[b-ui4n6mzl03] .ai-markdown ol ul,
[b-ui4n6mzl03] .ai-markdown ol ol { margin: 0.08em 0 !important; }
.ai-markdown[b-ui4n6mzl03]  h1,
.ai-markdown[b-ui4n6mzl03]  h2,
.ai-markdown[b-ui4n6mzl03]  h3,
.ai-markdown[b-ui4n6mzl03]  h4,
.ai-markdown[b-ui4n6mzl03]  h5,
[b-ui4n6mzl03] .ai-markdown h1,
[b-ui4n6mzl03] .ai-markdown h2,
[b-ui4n6mzl03] .ai-markdown h3,
[b-ui4n6mzl03] .ai-markdown h4,
[b-ui4n6mzl03] .ai-markdown h5 { margin: 0.55em 0 0.22em !important; font-weight: 700; line-height: 1.25; }
.ai-markdown[b-ui4n6mzl03]  h1 { font-size: 1.15em; }
.ai-markdown[b-ui4n6mzl03]  h2 { font-size: 1.1em; }
.ai-markdown[b-ui4n6mzl03]  h3 { font-size: 1.04em; }
.ai-markdown[b-ui4n6mzl03]  h4,
.ai-markdown[b-ui4n6mzl03]  h5 { font-size: 1em; }
.ai-markdown[b-ui4n6mzl03]  code {
    background: rgba(125, 125, 125, 0.18);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 0.88em;
}
.ai-markdown[b-ui4n6mzl03]  table { border-collapse: collapse; margin: 0.4em 0; font-size: 0.9em; }
.ai-markdown[b-ui4n6mzl03]  th,
.ai-markdown[b-ui4n6mzl03]  td { border: 1px solid var(--app-border); padding: 3px 8px; }

/* ── Кнопка «Посмотреть изменение задания» вместо сырого [suggestion:ID] ── */
.ai-suggestion-chip[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 6px 0;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: var(--app-accent);
    color: #fff !important;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    /* Свой line-height — иначе наследуется 1.45 от .transcript-entry и кнопка
       распирается по высоте. */
    line-height: 1.25;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s ease;
}

/* Иконка в чипе ровно по центру с текстом: у Bootstrap Icons свой
   vertical-align: -.125em, из-за которого «+» съезжал и добавлял высоты. */
.ai-suggestion-chip i[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    font-size: 1.05em;
    line-height: 1;
}

.ai-suggestion-chip:hover[b-ui4n6mzl03] { filter: brightness(1.08); text-decoration: none; }

/* «Создать новое задание» — отдельный (зелёный) акцент, чтобы не путать с просмотром изменения. */
.ai-newtask-chip[b-ui4n6mzl03] { background: #16a34a; }

/* ── Предложение нового задания: дословный seed, который уйдёт генератору ──
   Показываем initial_prompt КАК ЕСТЬ (не пересказ модели), с пометкой-меткой. */
.ai-newtask-block[b-ui4n6mzl03] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 6px 0;
}

.ai-newtask-seed[b-ui4n6mzl03] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--app-border);
    border-left: 3px solid #16a34a;
    border-radius: 8px;
    background: rgba(22, 163, 74, 0.06);
}

.ai-newtask-seed-label[b-ui4n6mzl03] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
    margin-bottom: 5px;
}

.ai-newtask-seed-text[b-ui4n6mzl03] {
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

html.dark .ai-newtask-seed[b-ui4n6mzl03] {
    border-color: var(--app-border);
    border-left-color: #16a34a; /* зелёный акцент слева не должен глохнуть в тёмной теме */
    background: rgba(22, 163, 74, 0.1);
}

/* ── Модалка прямо в чате (просмотр предложения / создание задания) ── */
.ai-modal-overlay[b-ui4n6mzl03] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto;
}

.ai-modal[b-ui4n6mzl03] {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: auto;
}

.ai-modal-close[b-ui4n6mzl03] {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 0.95rem;
}

.ai-modal-close:hover[b-ui4n6mzl03] { background: var(--app-surface-alt); }

html.dark .ai-modal-close[b-ui4n6mzl03] {
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ══ История чатов — список внутри BottomSheet (FlushBody: контент во всю ширину,
   собственный скролл; заголовок/крестик/свайп-закрытие даёт сам BottomSheet) ══════ */
.ai-history-list[b-ui4n6mzl03] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px 0;
}

.ai-history-empty[b-ui4n6mzl03] {
    padding: 40px 24px;
    text-align: center;
    color: var(--app-text-secondary, #6b7280);
    font-size: 0.9rem;
}

.ai-history-item[b-ui4n6mzl03] {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--app-border, #eef0f3);
    text-align: left;
    cursor: pointer;
}

.ai-history-item:hover[b-ui4n6mzl03] { background: var(--app-hover, #f7f8fa); }

.ai-history-item-icon[b-ui4n6mzl03] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.ai-history-item-icon.is-chat[b-ui4n6mzl03] {
    background: color-mix(in srgb, var(--app-accent, #5b57d6) 14%, transparent);
    color: var(--app-accent, #5b57d6);
}

.ai-history-item-icon.is-task[b-ui4n6mzl03] {
    background: rgba(20, 184, 166, 0.14);
    color: #0d9488;
}

.ai-history-item-main[b-ui4n6mzl03] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ai-history-item-title[b-ui4n6mzl03] {
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-history-item-active[b-ui4n6mzl03] {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--app-accent, #5b57d6);
    background: color-mix(in srgb, var(--app-accent, #5b57d6) 12%, transparent);
    padding: 1px 7px;
    border-radius: 999px;
}

.ai-history-item-preview[b-ui4n6mzl03] {
    font-size: 0.84rem;
    color: var(--app-text-secondary, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-history-item-meta[b-ui4n6mzl03] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.ai-history-item-date[b-ui4n6mzl03] {
    font-size: 0.76rem;
    color: var(--app-text-secondary, #9ca3af);
}

.ai-history-pill[b-ui4n6mzl03] {
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--app-hover, #f1f2f4);
    color: var(--app-text-secondary, #6b7280);
}

.ai-history-pill.is-approved[b-ui4n6mzl03] { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.ai-history-pill.is-pending[b-ui4n6mzl03] { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.ai-history-pill.is-rejected[b-ui4n6mzl03] { background: rgba(107, 114, 128, 0.14); color: #6b7280; }

.ai-history-item-chevron[b-ui4n6mzl03] {
    flex: 0 0 auto;
    align-self: center;
    color: var(--app-text-secondary, #c4c8cf);
    font-size: 0.8rem;
}

html.dark .ai-history-item[b-ui4n6mzl03] { border-bottom-color: var(--app-border); }
html.dark .ai-history-item:hover[b-ui4n6mzl03] { background: var(--app-hover); }

html.dark .ai-history-pill[b-ui4n6mzl03] { background: var(--app-surface-alt); color: var(--app-text-secondary); }

.transcript-user[b-ui4n6mzl03] {
    align-self: flex-end;
    background: var(--app-accent, #5b57d6);
    color: white;
    border-bottom-right-radius: 6px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--app-accent, #5b57d6) 18%, transparent);
}

.transcript-ai[b-ui4n6mzl03] {
    align-self: stretch;
    max-width: 100%;
    background: transparent !important;
    color: var(--app-text, #1c1c1c);
    border-radius: 0;
    box-shadow: none !important;
    border: 0 !important;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

/* Новый ответ появляется один раз мягко; последующие чанки не перезапускают
   анимацию, поэтому уже прочитанный текст не мигает. Пульс иконки показывает,
   что поток ещё продолжается, не занимая дополнительного места в строке. */
.transcript-ai.is-streaming[b-ui4n6mzl03] {
    animation: ai-stream-entry-in-b-ui4n6mzl03 0.2s ease-out both;
}

.transcript-ai.is-streaming .transcript-ai-icon[b-ui4n6mzl03] {
    animation: ai-stream-icon-pulse-b-ui4n6mzl03 1.45s ease-in-out infinite;
}

@keyframes ai-stream-entry-in-b-ui4n6mzl03 {
    from { opacity: 0.35; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ai-stream-icon-pulse-b-ui4n6mzl03 {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-accent, #5b57d6) 0%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-accent, #5b57d6) 12%, transparent); }
}

/* Пословное проявление стримящегося ответа. Спаны .ai-reveal-word создаёт
   ai-chat-viewport.js (revealProcess/revealTick). Скрытие привязано к .is-streaming
   нарочно: конец стрима снимает класс, и даже если JS не успел показать хвост,
   невидимого текста не остаётся. Продолжение fade после конца стрима даёт .is-in. */
.transcript-ai.is-streaming .ai-markdown[b-ui4n6mzl03]  .ai-reveal-word { opacity: 0; }

.transcript-ai .ai-markdown[b-ui4n6mzl03]  .ai-reveal-word.is-in {
    animation: ai-word-in-b-ui4n6mzl03 0.38s ease-out both;
}

@keyframes ai-word-in-b-ui4n6mzl03 {
    from { opacity: 0; filter: blur(2.5px); }
    to   { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .transcript-ai.is-streaming[b-ui4n6mzl03],
    .transcript-ai.is-streaming .transcript-ai-icon[b-ui4n6mzl03] {
        animation: none;
    }

    /* Слова не прячем и не анимируем (JS при reduce-motion спаны и не создаёт). */
    .transcript-ai.is-streaming .ai-markdown[b-ui4n6mzl03]  .ai-reveal-word { opacity: 1; }
    .transcript-ai .ai-markdown[b-ui4n6mzl03]  .ai-reveal-word.is-in { animation: none; }
}

.transcript-tool[b-ui4n6mzl03] {
    align-self: center;
    background: transparent;
    color: var(--app-text-secondary);
    font-size: 0.82rem;
    font-style: italic;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.transcript-ai-icon[b-ui4n6mzl03] {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-accent-soft, rgba(91, 87, 214, 0.08));
    color: var(--app-accent, #5b57d6);
    flex-shrink: 0;
    margin-top: 1px;
    font-size: .9rem;
}

.transcript-ai .transcript-text[b-ui4n6mzl03] {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
    /* Мера строки: длинный ответ ИИ переносится на комфортной ширине, а не тянется во
       всю колонку. ~66 символов — общепринятый оптимум читаемости (45–75; ср. Tailwind
       prose 65ch). На нашем шрифте 66ch ≈ 541px ≈ 70 символов. Видео/картинки внутри
       ответа тоже не растягиваются шире этой меры. На узких экранах max-width инертен. */
    max-width: 66ch;
}
.transcript-tool-icon[b-ui4n6mzl03] { color: var(--app-text-secondary); flex-shrink: 0; margin-top: 2px; }

/* ── «ИИ думает…» — пузырь с канвас-анимацией (ThinkingAnimation) + статус-текстом ── */
.transcript-typing[b-ui4n6mzl03] {
    align-items: center;
    align-self: flex-start;
    max-width: none;
    padding: 5px 14px;
    border-radius: 16px;
    background: var(--app-surface-alt, #f9fafb);
    border: 1px solid var(--app-border, #e8e8e8);
}

/* Пошёл текст ответа — плашка «ИИ думает» быстро схлопывается «в точку» у левого
   края и исчезает (через ~0.3 с код совсем убирает её из ленты). transform даёт
   визуальное сжатие в точку, а max-height/паддинги/отрицательный margin закрывают
   место без прыжка (родитель — flex-column с gap:14px). */
.transcript-typing.is-collapsing[b-ui4n6mzl03] {
    overflow: hidden;
    transform-origin: 20px center;
    pointer-events: none;
    animation: ai-thinking-collapse-b-ui4n6mzl03 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ai-thinking-collapse-b-ui4n6mzl03 {
    0%   { transform: scale(1);    opacity: 1;    max-height: 60px; }
    55%  { transform: scale(0.12); opacity: 0.85; }
    100% {
        transform: scale(0.05);
        opacity: 0;
        max-height: 0;
        margin-top: -14px;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
    }
}

/* reduce-motion: без сжатия-анимации — просто мгновенно убираем место под плашкой. */
@media (prefers-reduced-motion: reduce) {
    .transcript-typing.is-collapsing[b-ui4n6mzl03] {
        animation: none;
        opacity: 0;
        max-height: 0;
        margin-top: -14px;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        overflow: hidden;
    }
}

.ai-typing-dots[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 2px;
}

.ai-typing-dots span[b-ui4n6mzl03] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    /* currentColor наследует цвет текста пузыря — виден и в светлой, и в тёмной теме
       (раньше был --bs-secondary-color: тёмно-серый, на тёмном фоне почти невидим). */
    background: currentColor;
    animation: ai-typing-bounce-b-ui4n6mzl03 1.2s infinite ease-in-out both;
}

.ai-typing-dots span:nth-child(1)[b-ui4n6mzl03] { animation-delay: -0.24s; }
.ai-typing-dots span:nth-child(2)[b-ui4n6mzl03] { animation-delay: -0.12s; }

@keyframes ai-typing-bounce-b-ui4n6mzl03 {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.45; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* ── Tool call blocks (Claude Code style) ── */

.transcript-tool-block[b-ui4n6mzl03] {
    align-self: stretch;
    max-width: 100%;
    background: #f8f9fb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    font-size: 0.82rem;
}

.transcript-tool-block.tool-running[b-ui4n6mzl03] {
    border-color: #cdc9f5;
    background: #f5f3ff;
}

.tool-header[b-ui4n6mzl03] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease;
}

.tool-header:hover[b-ui4n6mzl03] {
    background: rgba(0, 0, 0, 0.03);
}

.tool-header-name[b-ui4n6mzl03] {
    flex: 1;
    font-weight: 500;
    color: var(--app-text);
}

.tool-count-pill[b-ui4n6mzl03] {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(111, 105, 221, 0.1);
    color: #5b57d6;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
}

.tool-icon-done[b-ui4n6mzl03] { color: #22c55e; font-size: 0.85rem; flex-shrink: 0; }
.tool-icon-spin[b-ui4n6mzl03] { color: #6f69dd; font-size: 0.85rem; flex-shrink: 0; animation: spin-b-ui4n6mzl03 1s linear infinite; }
.tool-chevron[b-ui4n6mzl03] { color: #9ca3af; font-size: 0.7rem; flex-shrink: 0; }

.tool-details[b-ui4n6mzl03] {
    border-top: 1px solid #e5e7eb;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tool-call-detail[b-ui4n6mzl03] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tool-call-detail + .tool-call-detail[b-ui4n6mzl03] {
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.tool-call-title[b-ui4n6mzl03] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: #374151;
}

.tool-detail-section[b-ui4n6mzl03] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tool-detail-label[b-ui4n6mzl03] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}

.tool-detail-json[b-ui4n6mzl03] {
    margin: 0;
    padding: 6px 8px;
    background: #f1f3f5;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #374151;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

@keyframes spin-b-ui4n6mzl03 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Текстовый композер (Claude-style): textarea + кнопка В ОДНОЙ рамке ── */

.ai-composer[b-ui4n6mzl03] {
    display: flex;
    /* flex-end — кнопка остаётся внизу, когда поле вырастает в несколько строк. */
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    max-width: 720px;
    margin-top: 12px;
    flex-shrink: 0;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 18px;
    padding: 7px 8px 7px 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ai-composer:focus-within[b-ui4n6mzl03] {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

.ai-composer-input[b-ui4n6mzl03] {
    flex: 1;
    /* min-width:0 — иначе «родная» минимальная ширина поля распирает ряд шире
       экрана и кнопка уезжает за край; с 0 поле честно ужимается. */
    min-width: 0;
    border: none;
    background: transparent;
    padding: 6px 0;
    /* 16px ОБЯЗАТЕЛЬНО: iOS Safari авто-зумит страницу при фокусе в поле с
       font-size < 16px и обратно НЕ отзумивает. 16px полностью убирает зум. */
    font-size: 16px;
    line-height: 1.4;
    font-family: inherit;
    color: var(--app-text);
    outline: none;
    /* Растёт по содержимому (высоту считает JS), но не выше ~4 строк — дальше
       внутренний скролл. resize:none — убираем ручной «уголок» textarea. */
    resize: none;
    overflow-y: auto;
    max-height: 104px;
}

.ai-composer-input[b-ui4n6mzl03]::placeholder { color: var(--app-text-secondary); }
.ai-composer-input:disabled[b-ui4n6mzl03] { color: var(--app-text-secondary); }

.ai-composer-btn[b-ui4n6mzl03] {
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.15rem;
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.ai-composer-send[b-ui4n6mzl03] {
    background: var(--app-accent);
    color: #fff;
}

.ai-composer-send:disabled[b-ui4n6mzl03] {
    background: #d1d5db;
    color: #f3f4f6;
    cursor: not-allowed;
}

.ai-composer-send:hover:not(:disabled)[b-ui4n6mzl03] { background: #0b5ed7; }
.ai-composer-send:active:not(:disabled)[b-ui4n6mzl03] { transform: scale(0.94); }

/* «Стоп» — тёмная кнопка, заметно отличается от «отправить», доступна всегда во время ответа. */
.ai-composer-stop[b-ui4n6mzl03] {
    background: #111827;
    color: #fff;
}

.ai-composer-stop:hover[b-ui4n6mzl03] { background: #374151; }
.ai-composer-stop:active[b-ui4n6mzl03] { transform: scale(0.94); }

.ai-composer-shell[b-ui4n6mzl03] {
    width: 100%;
    max-width: var(--ai-composer-width);
    flex-shrink: 0;
    margin: 0 auto;
    padding: 8px 8px 4px;
}

.ai-composer-shell-empty[b-ui4n6mzl03] {
    max-width: var(--ai-composer-width);
    padding: 0;
}

.ai-composer-shell[b-ui4n6mzl03]  .chat-composer {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    border-radius: 26px;
    border-color: color-mix(in srgb, var(--app-border, #e8e8e8) 82%, var(--app-text, #1c1c1c));
    background: var(--app-surface, #fff);
    box-shadow: 0 10px 24px rgba(17, 24, 39, .07);
    padding: 8px 8px 8px 16px;
}

.ai-composer-shell[b-ui4n6mzl03]  .chat-composer:focus-within {
    border-color: color-mix(in srgb, var(--app-accent, #5b57d6) 55%, var(--app-border, #e8e8e8));
    box-shadow: 0 12px 26px rgba(17, 24, 39, .09), 0 0 0 3px var(--app-accent-soft, rgba(91, 87, 214, 0.08));
}

.ai-composer-shell[b-ui4n6mzl03]  .chat-composer-input {
    padding: 9px 0;
}

.ai-composer-shell[b-ui4n6mzl03]  .chat-composer-btn {
    width: 42px;
    height: 42px;
}

.ai-composer-shell-empty[b-ui4n6mzl03]  .chat-composer {
    min-height: 72px;
    align-items: flex-end;
    border-radius: 24px;
    padding: 10px 12px 10px 18px;
}

.ai-composer-shell-empty[b-ui4n6mzl03]  .chat-composer-input {
    align-self: stretch;
    padding-top: 4px;
    font-size: 1.05rem;
}

.ai-composer-shell-empty[b-ui4n6mzl03]  .chat-composer-btn {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
}

/* ── Ошибки ── */

.ai-assistant-error[b-ui4n6mzl03] {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    padding: 12px 16px;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ai-assistant-error-close[b-ui4n6mzl03] {
    margin-left: 8px;
    color: #f87171;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.ai-assistant-error-close:hover[b-ui4n6mzl03] {
    color: #b91c1c;
}

/* ── Animations ── */

@keyframes pulse-b-ui4n6mzl03 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes gentle-pulse-b-ui4n6mzl03 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes ring-pulse-b-ui4n6mzl03 {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes speaking-ring-b-ui4n6mzl03 {
    from { transform: scale(1); opacity: 0.5; }
    to { transform: scale(1.08); opacity: 1; }
}

/* ── Mobile ── */

@media (max-width: 576px) {
    /* Высоту (включая вычитание клавиатуры --ai-kb) держит панель виджета —
       компонент по-прежнему просто заполняет её (height:100% из базового правила). */

    /* На телефоне в текстовом режиме шапка чата почти пустая: заголовок скрыт,
       пилюля бюджета и «Новый чат» вынесены в верхнюю панель. Остаётся только
       крутилка контекста (и то лишь после первых сообщений). Поэтому убираем
       разделительную линию и вертикальные паддинги — при пустой шапке она
       схлопывается в ноль и отдаёт всю высоту чату, а с крутилкой контекста
       та аккуратно прижимается к правому краю под верхней панелью. */
    /* Воздух сверху: панель «Контекст / Новый чат» больше не приклеена к глобальной
       липкой шапке. Снизу — небольшой отступ до ленты сообщений. */
    .ai-assistant-header[b-ui4n6mzl03] {
        padding: 10px 16px 8px;
        gap: 8px;
        border-bottom: none;
        min-height: 0;
    }

    /* На телефоне «Контекст» — компактная пилюля у ЛЕВОГО края; действия («Предложения»,
       «Разборы», «Новый чат») уезжают вправо иконками-квадратами. Так всё влезает в узкую
       шапку без переноса, а не помещавшиеся подписи кнопок заменяет иконка + бейдж в углу. */
    .ai-chip-row[b-ui4n6mzl03] {
        width: 100%;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
    }

    /* Пилюля контекста прижата влево и толкает действия к правому краю (margin-right:auto). */
    .ai-chip-row .ai-context-wrap[b-ui4n6mzl03] {
        flex: 0 1 auto;
        min-width: 0;
        margin-right: auto;
    }

    .ai-chip-row .ai-context-ring-btn[b-ui4n6mzl03] {
        width: auto;
        justify-content: center;
        gap: 6px;
        padding: 4px 10px 4px 6px;
    }

    .ai-chip-row .ai-context-label[b-ui4n6mzl03] {
        font-size: 0.72rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Действия — иконки-квадраты фиксированного размера: текст-подпись скрыта,
       счётчик-бейдж всплывает в правый верхний угол. */
    .ai-chip-row .ai-new-chat-btn[b-ui4n6mzl03] {
        flex: 0 0 auto;
        position: relative;
        width: 42px;
        height: 42px;
        padding: 0;
        gap: 0;
        border-radius: 13px;
    }

    /* Прячем текстовую подпись кнопки, но НЕ бейдж-счётчик (он в углу). */
    .ai-chip-row .ai-new-chat-btn > span:not(.ai-reviews-badge)[b-ui4n6mzl03] {
        display: none;
    }

    .ai-chip-row .ai-new-chat-btn > i[b-ui4n6mzl03] {
        font-size: 1.15rem;
        line-height: 1;
    }

    /* Бейдж «Предложений»/«Разборов» — плавающий кружок в правом верхнем углу иконки. */
    .ai-chip-row .ai-new-chat-btn .ai-reviews-badge[b-ui4n6mzl03] {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 0.64rem;
        border: 2px solid var(--app-bg, #fff);
    }

    /* «Новый чат» — единственное акцентное действие: залитый квадрат с белым «+». */
    .ai-chip-row .ai-new-chat-btn.ai-chip-primary[b-ui4n6mzl03] {
        background: var(--app-accent, #5b57d6);
        color: #fff;
        box-shadow: 0 6px 14px color-mix(in srgb, var(--app-accent, #5b57d6) 32%, transparent);
    }

    .ai-chip-row .ai-new-chat-btn.ai-chip-primary:hover[b-ui4n6mzl03] {
        background: color-mix(in srgb, var(--app-accent, #5b57d6) 90%, #000);
    }

    /* На телефоне пилюля «Контекст» прижата к ЛЕВОМУ краю (chip-row во всю ширину),
       поэтому базовый `right: 0` тянул всплывашку влево — за край экрана. Якорим её
       к левому краю обёртки и каппируем ширину по вьюпорту, чтобы не вылезала вправо. */
    .ai-context-pop[b-ui4n6mzl03] {
        left: 0;
        right: auto;
        max-width: calc(100vw - 24px);
    }

    /* На телефоне — «чистый чат»: без лишних рамок и широких отступов.
       Контент идёт от края до края (поля даёт сам .container), а отдельные
       блоки сами держат свои небольшие inset'ы. */
    .ai-assistant-content[b-ui4n6mzl03] {
        padding: 0;
    }

    .realtime-visualizer[b-ui4n6mzl03] { padding: 10px 0 6px; }

    .realtime-orb[b-ui4n6mzl03] { width: 100px; height: 100px; }
    .orb-core[b-ui4n6mzl03] { width: 52px; height: 52px; font-size: 1.4rem; }
    .orb-ring-1[b-ui4n6mzl03] { width: 66px; height: 66px; }
    .orb-ring-2[b-ui4n6mzl03] { width: 84px; height: 84px; }
    .orb-ring-3[b-ui4n6mzl03] { width: 100px; height: 100px; }

    .orb-status-text[b-ui4n6mzl03] { font-size: 0.875rem; margin-top: 8px; }
    .orb-controls[b-ui4n6mzl03] { gap: 10px; margin-top: 10px; }
    .orb-voice-select[b-ui4n6mzl03] { font-size: 0.8rem; }

    .ai-mode-bar[b-ui4n6mzl03] { padding: 0 12px; margin-top: 8px; }
    .ai-mode-option[b-ui4n6mzl03] { padding: 6px 10px; }
    /* На телефоне показываем подпись «Новый чат» (раньше пряталась — оставалась
       непонятная одинокая «+»). Место освободилось: заголовок и пилюля бюджета убраны. */

    /* Транскрипт без «коробки»: убираем рамку/фон/скругление — сообщения и так
       сами пузырьки. Боковые поля 16px — комфортная «книжная» мера для чтения
       на телефоне (текст не липнет к краям экрана/шторки). */
    .ai-assistant-transcript[b-ui4n6mzl03] {
        border: none;
        background: transparent;
        border-radius: 0;
        padding: 12px 16px;
        margin-top: 4px;
    }

    /* Композер — аккуратный «плавающий» бар у самого низа шторки, прижатый к
       клавиатуре. Одна мягкая рамка вместо тройного обрамления. Safe-area
       айфона добирает сама панель виджета (padding-bottom: env(...)). */
    .ai-composer[b-ui4n6mzl03] {
        margin: 8px 14px 10px;
        padding: 6px 7px 6px 14px;
        border-radius: 22px;
    }

    .ai-assistant-page[b-ui4n6mzl03] {
        --ai-chat-width: 100%;
        --ai-composer-width: 100%;
    }

    .ai-assistant-transcript[b-ui4n6mzl03] {
        padding: 12px 16px 16px;
    }

    /* На телефоне прячем аватар-иконку ИИ у КАЖДОГО ответа: она съедала ~38px
       слева (28px иконка + 10px gap), из-за чего длинные ответы вытягивались в
       узкие «простыни». Без неё текст ответа идёт во всю ширину ленты (ответы ИИ
       и так отличимы: слева, без пузыря; сообщения пользователя — справа акцентом). */
    .transcript-ai-icon[b-ui4n6mzl03] {
        display: none;
    }

    .transcript-ai[b-ui4n6mzl03] {
        gap: 0;
        padding: 6px 0;
    }

    .ai-transcript-empty[b-ui4n6mzl03] {
        padding: 22px 10px 32px;
        gap: 10px;
    }

    .ai-empty-mark[b-ui4n6mzl03] {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .ai-empty-title[b-ui4n6mzl03] {
        font-size: 1rem;
    }

    .ai-empty-prompts[b-ui4n6mzl03] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-top: 8px;
    }

    .ai-empty-prompt[b-ui4n6mzl03] {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        border-radius: 14px;
        padding: 10px 12px;
    }

    .transcript-entry[b-ui4n6mzl03] {
        max-width: 88%;
        font-size: 0.94rem;
    }

    .transcript-ai[b-ui4n6mzl03] {
        gap: 9px;
    }

    .transcript-ai-icon[b-ui4n6mzl03] {
        width: 26px;
        height: 26px;
        border-radius: 9px;
        font-size: .82rem;
    }

    .ai-composer-shell[b-ui4n6mzl03] {
        padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .ai-composer-shell[b-ui4n6mzl03]  .chat-composer {
        border-radius: 24px;
        padding: 7px 7px 7px 14px;
        box-shadow: 0 10px 28px rgba(17, 24, 39, .1);
    }

    .ai-composer-shell[b-ui4n6mzl03]  .chat-composer-btn {
        width: 40px;
        height: 40px;
    }

    .ai-composer-shell-empty[b-ui4n6mzl03]  .chat-composer {
        min-height: 110px;
        border-radius: 26px;
        padding: 16px 12px 12px 18px;
    }

    .ai-composer-shell-empty[b-ui4n6mzl03]  .chat-composer-btn {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 360px) {
    .ai-assistant-header[b-ui4n6mzl03] {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Экстра-узкие экраны: слегка ужимаем пилюлю контекста и зазоры —
       иконки-квадраты действий и так помещаются. */
    .ai-chip-row[b-ui4n6mzl03] {
        gap: 6px;
    }

    .ai-chip-row .ai-context-ring-btn[b-ui4n6mzl03] {
        gap: 5px;
        padding: 3px 8px 3px 5px;
    }

    .ai-chip-row .ai-context-label[b-ui4n6mzl03] {
        font-size: 0.68rem;
    }

    .ai-empty-prompts[b-ui4n6mzl03] {
        grid-template-columns: 1fr;
    }
}

/* ── Тёмная тема ──
   html.dark переопределяет токены --app-*, но Bootstrap-переменные (--bs-secondary-bg,
   --bs-body-bg и т.п.) без data-bs-theme НЕ переключаются. Из-за этого контейнер
   транскрипта оставался светлым, а текст внутри глобальное правило html.dark делало
   светлым → светлый-по-светлому = не видно. Переводим фоны на тёмные --app-* токены. */

html.dark .orb-status-text[b-ui4n6mzl03] { color: var(--app-text); }

html.dark .ai-token-badge[b-ui4n6mzl03] {
    color: var(--app-text-secondary);
    background: var(--app-surface);
    border-color: var(--app-border);
}

html.dark .transcript-ai[b-ui4n6mzl03] {
    background: transparent;
    color: var(--app-text);
}

html.dark .transcript-text[b-ui4n6mzl03] { color: var(--app-text); }

/* ── Индикаторы шапки текстового чата: бюджет тарифа + крутилка контекста ── */
.ai-chip-row[b-ui4n6mzl03] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

/* Десктоп (>576px): действия в шапке чата — «Предложения», «Разборы», «История»,
   «Новый чат» — компактные иконки-квадраты без подписи (осталась в title/aria-label),
   счётчик всплывает в правый верхний угол. Разгружает плотный тулбар. Телефонные размеры
   (иконки покрупнее под палец) заданы ниже в @media (max-width: 576px) — диапазоны не
   пересекаются, конфликта порядка нет. Кнопка «Новый чат» аудио-режима не в .ai-chip-row —
   её подпись остаётся. */
@media (min-width: 577px) {
    .ai-chip-row .ai-new-chat-btn[b-ui4n6mzl03] {
        position: relative;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0;
        gap: 0;
        border-radius: 12px;
    }

    .ai-chip-row .ai-new-chat-btn > span:not(.ai-reviews-badge)[b-ui4n6mzl03] {
        display: none;
    }

    .ai-chip-row .ai-new-chat-btn > i[b-ui4n6mzl03] {
        font-size: 1.1rem;
        line-height: 1;
    }

    .ai-chip-row .ai-new-chat-btn .ai-reviews-badge[b-ui4n6mzl03] {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 0.64rem;
        border: 2px solid var(--app-bg, #fff);
    }

    /* «Новый чат» — единственное акцентное действие: залитый квадрат с белым «+». */
    .ai-chip-row .ai-new-chat-btn.ai-chip-primary[b-ui4n6mzl03] {
        background: var(--app-accent, #5b57d6);
        color: #fff;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--app-accent, #5b57d6) 30%, transparent);
    }

    .ai-chip-row .ai-new-chat-btn.ai-chip-primary:hover[b-ui4n6mzl03] {
        background: color-mix(in srgb, var(--app-accent, #5b57d6) 90%, #000);
    }
}

.ai-context-wrap[b-ui4n6mzl03] { position: relative; display: inline-flex; }

/* «Контекст» — аккуратная нейтральная пилюля (подпись + кольцо), в пару к «Новому чату». */
.ai-context-ring-btn[b-ui4n6mzl03] {
    background: var(--app-surface-alt, #f9fafb);
    border: 1px solid var(--app-border, #e8e8e8);
    border-radius: 999px;
    padding: 4px 11px 4px 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 0;
    transition: background 0.15s ease;
}

.ai-context-ring-btn:hover[b-ui4n6mzl03] {
    background: var(--app-hover, rgba(0, 0, 0, 0.03));
}

/* Подпись «Контекст» рядом с крутилкой — без неё голый «12%» был непонятен. */
.ai-context-label[b-ui4n6mzl03] {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--app-text-secondary);
    white-space: nowrap;
}

html.dark .ai-context-label[b-ui4n6mzl03] { color: var(--app-text-secondary); }

.ai-context-overlay[b-ui4n6mzl03] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.ai-context-pop[b-ui4n6mzl03] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 280px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 12px 14px;
}

.ai-context-pop-head[b-ui4n6mzl03] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    margin-bottom: 6px;
}

.ai-context-pop-big[b-ui4n6mzl03] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-text);
    line-height: 1.1;
}

.ai-context-pop-sub[b-ui4n6mzl03] {
    font-size: .8rem;
    font-weight: 400;
    color: var(--app-text-secondary);
}

.ai-context-bar[b-ui4n6mzl03] {
    height: 6px;
    border-radius: 999px;
    background: var(--app-surface-alt);
    overflow: hidden;
    margin: 8px 0;
}

.ai-context-bar > div[b-ui4n6mzl03] { height: 100%; transition: width .4s ease; }

.ai-context-pop-note[b-ui4n6mzl03] {
    font-size: .72rem;
    color: var(--app-text-secondary);
}

.ai-context-pop-hint[b-ui4n6mzl03] {
    display: flex;
    gap: 6px;
    font-size: .72rem;
    color: var(--app-text-secondary);
    margin-top: 8px;
    line-height: 1.45;
}

.ai-context-pop-hint i[b-ui4n6mzl03] { margin-top: 2px; }

.ai-context-pop-tokens[b-ui4n6mzl03] {
    border-top: 1px solid var(--app-border);
    margin-top: 8px;
    padding-top: 8px;
    font-size: .72rem;
    color: var(--app-text-secondary);
}

html.dark .ai-context-pop[b-ui4n6mzl03] {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html.dark .ai-context-pop-big[b-ui4n6mzl03] { color: var(--app-text); }
html.dark .ai-context-bar[b-ui4n6mzl03] { background: var(--app-surface-alt); }
html.dark .ai-context-pop-tokens[b-ui4n6mzl03] { border-color: var(--app-border); }

html.dark .transcript-tool[b-ui4n6mzl03],
html.dark .transcript-tool-icon[b-ui4n6mzl03] { color: var(--app-text-secondary); }

html.dark .transcript-tool-block[b-ui4n6mzl03] {
    background: var(--app-surface);
    border-color: var(--app-border);
}

html.dark .transcript-tool-block.tool-running[b-ui4n6mzl03] {
    background: rgba(139, 132, 227, 0.10);
    border-color: rgba(139, 132, 227, 0.35);
}

html.dark .tool-header:hover[b-ui4n6mzl03] { background: var(--app-hover); }
html.dark .tool-header-name[b-ui4n6mzl03] { color: var(--app-text); }
html.dark .tool-count-pill[b-ui4n6mzl03] { background: rgba(139, 132, 227, 0.18); color: #c4b5fd; }
html.dark .tool-details[b-ui4n6mzl03] { border-top-color: var(--app-border); }
html.dark .tool-call-detail + .tool-call-detail[b-ui4n6mzl03] { border-top-color: var(--app-border); }
html.dark .tool-call-title[b-ui4n6mzl03] { color: var(--app-text); }
html.dark .tool-detail-label[b-ui4n6mzl03] { color: var(--app-text-secondary); }

html.dark .tool-detail-json[b-ui4n6mzl03] {
    background: #1a1a1a;
    color: var(--app-text);
}

html.dark .realtime-btn-mute[b-ui4n6mzl03] {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html.dark .realtime-btn-mute:hover[b-ui4n6mzl03] { background: var(--app-hover); }

html.dark .ai-assistant-transcript[b-ui4n6mzl03] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.dark .ai-mode-switch[b-ui4n6mzl03] {
    background: var(--app-surface);
    border-color: var(--app-border);
}

html.dark .ai-mode-option[b-ui4n6mzl03] { color: var(--app-text-secondary); }

html.dark .ai-mode-option.active[b-ui4n6mzl03] {
    background: var(--app-surface-alt);
    color: var(--app-text);
}

html.dark .ai-new-chat-btn[b-ui4n6mzl03] {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html.dark .ai-new-chat-btn:hover[b-ui4n6mzl03] { background: var(--app-hover); }

html.dark .ai-kbd-status[b-ui4n6mzl03] { color: var(--app-text); }

html.dark .ai-composer[b-ui4n6mzl03] {
    background: var(--app-surface);
    border-color: var(--app-border);
}

html.dark .ai-composer-input[b-ui4n6mzl03] { color: var(--app-text); }

/* В тёмной теме «Стоп» делаем светлым, чтобы контрастировал с тёмной рамкой композера. */
html.dark .ai-composer-stop[b-ui4n6mzl03] { background: #e5e7eb; color: #111827; }
html.dark .ai-composer-stop:hover[b-ui4n6mzl03] { background: #d1d5db; }

html.dark .ai-empty-prompt[b-ui4n6mzl03] {
    background: color-mix(in srgb, var(--app-surface) 76%, transparent);
    border-color: color-mix(in srgb, var(--app-border) 72%, transparent);
    color: var(--app-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

html.dark .ai-empty-prompt:hover:not(:disabled)[b-ui4n6mzl03] {
    background: color-mix(in srgb, var(--app-accent-soft, rgba(139, 132, 227, 0.14)) 65%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-accent, #8b84e3) 42%, var(--app-border));
    color: var(--app-text);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

html.dark .transcript-typing[b-ui4n6mzl03] {
    background: var(--app-surface);
    border-color: var(--app-border);
}

html.dark .ai-composer-shell[b-ui4n6mzl03]  .chat-composer {
    background: var(--app-surface);
    border-color: var(--app-border);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

html.dark .ai-transcript-empty[b-ui4n6mzl03] { color: var(--app-text-secondary); }

/* На телефоне транскрипт без «коробки» и в тёмной теме (общее html.dark-правило
   выше специфичнее обычного мобильного — гасим его фон именно для мобильной ширины). */
@media (max-width: 576px) {
    html.dark .ai-assistant-transcript[b-ui4n6mzl03] {
        background: transparent;
        border-color: transparent;
    }
}
/* /Pages/Students/MeetingDetail.razor.rz.scp.css */
/* MeetingDetail.razor — layout/styling uses inline theme-aware Tailwind classes.
   Only rules that target generated content (markdown HTML, transcript highlight)
   or non-color transforms remain here. */

/* --- Markdown body (generated HTML) --- */
[b-iqv36g9sc9] .markdown-body p { margin-bottom: 0.5em; }
[b-iqv36g9sc9] .markdown-body p:last-child { margin-bottom: 0; }
[b-iqv36g9sc9] .markdown-body ul, [b-iqv36g9sc9] .markdown-body ol { padding-left: 1.5em; margin-bottom: 0.5em; }
[b-iqv36g9sc9] .markdown-body blockquote { border-left: 3px solid var(--app-border); padding-left: 0.75em; margin: 0.5em 0; color: var(--app-text-secondary); }
[b-iqv36g9sc9] .markdown-body strong { font-weight: 600; }
[b-iqv36g9sc9] .markdown-body h3, [b-iqv36g9sc9] .markdown-body h4 { margin-top: 0.75em; margin-bottom: 0.35em; font-weight: 600; }
[b-iqv36g9sc9] .markdown-body code { background: var(--app-surface-alt); padding: 0.15em 0.35em; border-radius: 4px; font-size: 0.9em; }

/* --- Transcript highlight (generated <mark> from search) --- */
[b-iqv36g9sc9] .transcript-text mark { background-color: rgba(245, 200, 66, 0.35); padding: 1px 3px; border-radius: 3px; }

/* --- Collapse chevron (transform only, no color) --- */
[b-iqv36g9sc9] .collapse-chevron { transition: transform 0.2s ease; transform: rotate(-90deg); }
[b-iqv36g9sc9] .collapse-chevron.expanded { transform: rotate(0deg); }
/* /Pages/Students/Meetings.razor.rz.scp.css */
/* Tailwind classes are used inline — this file is intentionally empty */
/* /Pages/Students/Notes.razor.rz.scp.css */
/* Notes.razor — мастер-деталь заметок. Вся вёрстка — inline theme-aware Tailwind (tw-*)
   + небольшой блок .nt-* (адаптив/анимации) в самом компоненте; scoped-правил не требуется. */
/* /Pages/Students/Schedule.razor.rz.scp.css */
/* Schedule.razor — only ::deep styles for child components (PlanItemCard, ScheduleDateSelector, StarRating) remain.
   Page-level layout uses inline Tailwind classes. */

/* === Тело страницы (десктоп) ===
   Как на «Заданиях»: на десктопе тело страницы — центрированная колонка ограниченной
   ширины, а не растянутое во всю ширину контейнера (1080px). Значения (max-width: 880px,
   margin-inline: auto) и брейкпоинт (992px) намеренно совпадают с .ab-split-layout /
   .ab-page-title / .ab-filter-bar в AssignmentsBrowse.razor.css. На мобиле — во всю ширину. */
@media (min-width: 992px) {
    .plan-page-body[b-d87j8h70rd] {
        width: 100%;
        max-width: 880px;
        margin-inline: auto;
    }
}

/* === Layout ===
   Список заданий и детали одной задачи живут в обычном потоке: скроллится сама
   страница, без внутреннего скролла. Панель с датой и днями недели больше НЕ
   прилипает к верху — она уезжает вместе со списком при прокрутке и не занимает
   постоянного места на экране (раньше здесь был position: sticky). */
.plan-sticky-header[b-d87j8h70rd] {
    position: static;
}

.plan-list[b-d87j8h70rd],
.plan-detail[b-d87j8h70rd] {
    min-width: 0;
}

/* === Action cards (Panel 2) — ОБЩИЙ ховер (идентичен «Заданиям» и «Истории»): заметная
   нейтральная подложка (--app-hover-strong, видна и в тёмной, и в светлой теме) + мягкая
   тень + лёгкий подъём. === */
.plan-action-card[b-d87j8h70rd] {
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
}

.plan-action-card:hover[b-d87j8h70rd] {
    background-color: var(--app-hover-strong);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.plan-action-card:active[b-d87j8h70rd] {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.plan-action-card--disabled[b-d87j8h70rd] {
    cursor: default;
    opacity: 0.75;
}

.plan-action-card--disabled:hover[b-d87j8h70rd] {
    background-color: inherit !important;
    box-shadow: none !important;
}

/* === Блок «План на эту сессию» (редизайн 2026-07-25) ===
   Превью совета/сути — кламп на 3 строки, снизу «тающий» градиент к фону
   карточки, подталкивающий к «Читать полностью» (как .ab-essence-* на «Заданиях»). */
.plan-essence-clamp[b-d87j8h70rd] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plan-essence-fade[b-d87j8h70rd] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    background: linear-gradient(180deg, transparent, var(--app-surface, #fff) 92%);
    pointer-events: none;
}

/* === List entries (Panel 1) ===
   Строка рендерится дочерним компонентом PlanItemListEntry, поэтому ::deep —
   без него scoped-стиль (в т.ч. :hover) до неё не дотягивается и наведение не подсвечивалось.
   Ховер выровнен со страницей «Задания» (.ab-task-card): var(--app-hover), 0.12s. */
[b-d87j8h70rd] .plan-list-entry {
    cursor: pointer;
    border-bottom: 1px solid var(--app-border, #e9ecef);
    transition: background-color 0.12s ease;
}

[b-d87j8h70rd] .plan-list-entry:last-child {
    border-bottom: none;
}

[b-d87j8h70rd] .plan-list-entry:hover {
    background-color: var(--app-hover, rgba(0, 0, 0, 0.02));
}

[b-d87j8h70rd] .plan-list-entry--selected {
    background-color: var(--app-accent-soft, rgba(91, 87, 214, 0.06));
}

/* === Мягкая подсветка статуса строки (Stage 3 + редизайн 2026-07-25) ===
   Левая полоса 3px цвета статуса: «Не начато» — янтарная, «Разбор готов»/«Готово» —
   зелёная, сбой видео — красная; «На анализе» — тихий пульс тила. Полоса — лишь
   подсказка: статус читается и по чипу рядом с названием. Используем inset box-shadow
   (а не background), чтобы не конфликтовать с фоном :hover/--selected.
   prefers-reduced-motion гасит анимацию. */
[b-d87j8h70rd] .plan-list-entry--review-ready {
    box-shadow: inset 3px 0 0 0 rgba(25, 135, 84, 0.55);
}

[b-d87j8h70rd] .plan-list-entry--pending {
    box-shadow: inset 3px 0 0 0 rgba(217, 119, 6, 0.5);
}

[b-d87j8h70rd] .plan-list-entry--failed {
    box-shadow: inset 3px 0 0 0 rgba(220, 53, 69, 0.55);
}

@keyframes plan-entry-analyzing-pulse-b-d87j8h70rd {
    0%, 100% { box-shadow: inset 3px 0 0 0 rgba(13, 148, 136, 0.2); }
    50% { box-shadow: inset 3px 0 0 0 rgba(13, 148, 136, 0.6); }
}

[b-d87j8h70rd] .plan-list-entry--analyzing {
    animation: plan-entry-analyzing-pulse-b-d87j8h70rd 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    [b-d87j8h70rd] .plan-list-entry--analyzing {
        animation: none;
        box-shadow: inset 3px 0 0 0 rgba(13, 148, 136, 0.45);
    }
}

/* === Team member chips (Panel 2) === */
.plan-member-chip[b-d87j8h70rd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem 0.3rem 0.3rem;
    border: 1.5px solid var(--app-border, #e9ecef);
    border-radius: 999px;
    background: var(--app-surface, #fff);
    color: var(--app-text, #212529);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.plan-member-chip:hover:not(:disabled)[b-d87j8h70rd] {
    border-color: #adb5bd;
    background: var(--app-hover, #f8f9fa);
}

.plan-member-chip:disabled[b-d87j8h70rd] {
    opacity: 0.55;
    cursor: not-allowed;
}

.plan-member-chip--active[b-d87j8h70rd] {
    border-color: rgba(91, 87, 214, 0.4);
    background: rgba(91, 87, 214, 0.07);
    color: #4040b8;
}

.plan-member-chip--active:hover:not(:disabled)[b-d87j8h70rd] {
    background: rgba(91, 87, 214, 0.12);
    border-color: rgba(91, 87, 214, 0.6);
}

.plan-member-chip__avatar[b-d87j8h70rd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

.plan-member-chip--active .plan-member-chip__avatar[b-d87j8h70rd] {
    background: rgba(91, 87, 214, 0.15);
    color: #4040b8;
}

.plan-member-chip__name[b-d87j8h70rd] {
    line-height: 1;
}

.plan-member-chip__check[b-d87j8h70rd] {
    font-size: 0.75rem;
    color: #4040b8;
    flex-shrink: 0;
}

/* --- Plan item: list-style row --- */
[b-d87j8h70rd] .plan-item {
    position: relative;
    display: block;
    padding: 0.875rem 0;
    border: none;
    border-bottom: 1px solid var(--app-border);
    background: transparent;
    transition: background-color 0.15s ease;
}

[b-d87j8h70rd] .plan-item:last-child {
    border-bottom: none;
}

[b-d87j8h70rd] .plan-item:hover {
    background-color: var(--app-surface-alt);
}

[b-d87j8h70rd] .plan-item--done {
    opacity: 0.6;
}

[b-d87j8h70rd] .plan-item--running {
    background-color: rgba(25, 135, 84, 0.04);
}

[b-d87j8h70rd] .plan-item--running:hover {
    background-color: rgba(25, 135, 84, 0.08);
}

[b-d87j8h70rd] .plan-item__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

[b-d87j8h70rd] .plan-item__visual {
    flex-shrink: 0;
    align-self: center;
}

[b-d87j8h70rd] .plan-item__thumbnail {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 8px;
    object-fit: cover;
    background-color: #f0f0f0;
}

[b-d87j8h70rd] .plan-item__icon-placeholder {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 8px;
    background: rgba(108, 117, 125, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
}

[b-d87j8h70rd] .plan-item__icon-svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

[b-d87j8h70rd] .plan-item__icon-svg--playing {
    color: #198754;
}

[b-d87j8h70rd] .plan-item__icon-svg--done {
    color: #6c757d;
}

[b-d87j8h70rd] .plan-item__content {
    flex: 1;
    min-width: 0;
}

[b-d87j8h70rd] .plan-item__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 1.5rem;
}

[b-d87j8h70rd] .plan-item__title-block {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

[b-d87j8h70rd] .plan-item__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-d87j8h70rd] .plan-item__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(108, 117, 125, 0.1);
    color: var(--app-text-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    margin-right: 0.2rem;
    vertical-align: middle;
    flex-shrink: 0;
}

[b-d87j8h70rd] .plan-item__title-link {
    color: var(--app-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

[b-d87j8h70rd] .plan-item__title-link:hover {
    color: var(--app-accent);
    text-decoration: underline;
}

[b-d87j8h70rd] .plan-item__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

[b-d87j8h70rd] .plan-item__delete-btn {
    opacity: 0.25;
    transition: opacity 0.15s ease;
}

[b-d87j8h70rd] .plan-item:hover .plan-item__delete-btn {
    opacity: 0.55;
}

[b-d87j8h70rd] .plan-item__delete-btn:hover,
[b-d87j8h70rd] .plan-item__delete-btn:focus-visible {
    opacity: 1;
}

[b-d87j8h70rd] .plan-item__delete-icon {
    width: 0.85rem;
    height: 0.85rem;
    fill: currentColor;
}

[b-d87j8h70rd] .plan-item__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

[b-d87j8h70rd] .plan-item__footer-left {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

[b-d87j8h70rd] .plan-item__footer-right {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

[b-d87j8h70rd] .plan-item__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.2;
    flex-shrink: 0;
}

[b-d87j8h70rd] .plan-item__badge--success {
    background: rgba(25, 135, 84, 0.12);
    color: #0f5132;
}

[b-d87j8h70rd] .plan-item__badge--neutral {
    background: rgba(108, 117, 125, 0.1);
    color: var(--app-text-secondary);
}

[b-d87j8h70rd] .plan-item__badge--danger {
    background: rgba(220, 53, 69, 0.1);
    color: #842029;
}

[b-d87j8h70rd] .plan-item__badge--info {
    background: rgba(13, 202, 240, 0.12);
    color: #055160;
}

[b-d87j8h70rd] .plan-item__badge--warning {
    background: rgba(217, 119, 6, 0.12);
    color: #92400e;
}

/* Мета-бейджи свёрнутой строки (длительность · Спец · ИИ · настроение): один
   нейтральный тон вместо разноцветных пилюль (amber/violet/sky «кричали»).
   Токены --app-* сами переключаются в тёмной теме — dark:tw-* тут не работают. */
[b-d87j8h70rd] .plan-item__meta-badge {
    background: color-mix(in srgb, var(--app-muted) 12%, transparent);
    color: var(--app-text-secondary);
}

[b-d87j8h70rd] .plan-item__summary {
    font-size: 0.78rem;
    color: #6c757d;
    line-height: 1.35;
    margin-top: 0.15rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

[b-d87j8h70rd] .plan-item__application {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #055160;
    margin-top: 0.25rem;
}

[b-d87j8h70rd] .plan-item__application-title {
    font-weight: 600;
}

[b-d87j8h70rd] .plan-item__application-link {
    color: var(--app-accent);
    font-weight: 600;
    font-size: 0.78rem;
    text-decoration: none;
}

[b-d87j8h70rd] .plan-item__application-link:hover {
    text-decoration: underline;
}

[b-d87j8h70rd] .plan-item__time {
    color: #495057;
}

[b-d87j8h70rd] .plan-item__duration {
    color: #6c757d;
}

[b-d87j8h70rd] .plan-item__duration::before {
    content: "·";
    margin-right: 0.3rem;
}

[b-d87j8h70rd] .plan-item__elapsed {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(25, 135, 84, 0.1);
    color: #0f5132;
    font-weight: 600;
    font-size: 0.68rem;
}

[b-d87j8h70rd] .plan-item__score {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

[b-d87j8h70rd] .plan-item__score-stars {
    display: inline-flex;
    align-items: center;
}

[b-d87j8h70rd] .plan-item__score-stars .star-rating__visual {
    font-size: 1.15rem;
}

[b-d87j8h70rd] .plan-item__score-value {
    font-size: 0.72rem;
    font-weight: 600;
    color: #495057;
}

[b-d87j8h70rd] .plan-item__mood-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.4rem;
    border: none;
    border-radius: 999px;
    background: rgba(108, 117, 125, 0.08);
    color: var(--app-text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-d87j8h70rd] .plan-item__mood-btn:hover:not(:disabled) {
    background: rgba(108, 117, 125, 0.16);
    color: var(--app-text);
}

[b-d87j8h70rd] .plan-item__mood-emoji {
    font-size: 0.85rem;
}

[b-d87j8h70rd] .plan-item__action-wrap {
    position: relative;
    display: inline-flex;
}

[b-d87j8h70rd] .plan-item__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border: none;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
}

[b-d87j8h70rd] .plan-item__action-btn:hover:not(:disabled) {
    filter: brightness(0.95);
}

[b-d87j8h70rd] .plan-item__action-btn:active:not(:disabled) {
    filter: brightness(0.9);
}

[b-d87j8h70rd] .plan-item__action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-d87j8h70rd] .plan-item__action-btn--primary {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

[b-d87j8h70rd] .plan-item__action-btn--primary:hover:not(:disabled) {
    background: #0d6efd;
    color: #fff;
}

[b-d87j8h70rd] .plan-item__action-btn--secondary {
    background: rgba(108, 117, 125, 0.1);
    color: var(--app-text-secondary);
}

[b-d87j8h70rd] .plan-item__action-btn--secondary:hover:not(:disabled) {
    background: rgba(108, 117, 125, 0.2);
    color: var(--app-text);
}

[b-d87j8h70rd] .plan-item__action-btn--success {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

[b-d87j8h70rd] .plan-item__action-btn--success:hover:not(:disabled) {
    background: #198754;
    color: #fff;
}

[b-d87j8h70rd] .plan-action-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

[b-d87j8h70rd] .plan-item__upload-progress {
    height: 4px;
    border-radius: 2px;
    background: rgba(108, 117, 125, 0.1);
    margin-top: 0.35rem;
    overflow: hidden;
}

[b-d87j8h70rd] .plan-item__upload-bar {
    height: 100%;
    background: #0d6efd;
    border-radius: 2px;
    transition: width 0.3s ease;
}

[b-d87j8h70rd] .plan-item__rating-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border: none;
    border-radius: 999px;
    background: rgba(108, 117, 125, 0.08);
    color: var(--app-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

[b-d87j8h70rd] .plan-item__rating-btn:hover:not(:disabled) {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

[b-d87j8h70rd] .plan-item__rating-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Rating modal star sizing */
.rating-modal-stars[b-d87j8h70rd] {
    padding: 0.5rem 0;
}

[b-d87j8h70rd] .rating-modal-star-rating .star-rating__visual {
    font-size: 2.5rem;
}

/* Мастер оценки после загрузки видео: крупные кликабельные звёзды (на десктопе
   оценку ставят кликом; шаг ½ = 10 зон клика поверх пяти звёзд). */
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__visual {
    font-size: 2.5rem;
}

/* Предпросмотр при наведении: золотой слой-заливка тянется до звезды под курсором,
   перекрывая текущее значение (!important бьёт inline-width слоя). Шаг ½ = 10 кнопок
   поверх пяти звёзд → 10 позиций. :has() есть во всех актуальных браузерах; где нет —
   предпросмотра просто не будет, клик/значение работают как прежде. */
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__layer--front {
    transition: width 0.08s linear;
}
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__container:has(.star-rating__control:nth-child(1):hover) .star-rating__layer--front { width: 10% !important; }
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__container:has(.star-rating__control:nth-child(2):hover) .star-rating__layer--front { width: 20% !important; }
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__container:has(.star-rating__control:nth-child(3):hover) .star-rating__layer--front { width: 30% !important; }
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__container:has(.star-rating__control:nth-child(4):hover) .star-rating__layer--front { width: 40% !important; }
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__container:has(.star-rating__control:nth-child(5):hover) .star-rating__layer--front { width: 50% !important; }
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__container:has(.star-rating__control:nth-child(6):hover) .star-rating__layer--front { width: 60% !important; }
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__container:has(.star-rating__control:nth-child(7):hover) .star-rating__layer--front { width: 70% !important; }
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__container:has(.star-rating__control:nth-child(8):hover) .star-rating__layer--front { width: 80% !important; }
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__container:has(.star-rating__control:nth-child(9):hover) .star-rating__layer--front { width: 90% !important; }
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__container:has(.star-rating__control:nth-child(10):hover) .star-rating__layer--front { width: 100% !important; }

/* Штатную «жёлтую» подсветку кнопок (из StarRating) для этого инстанса гасим —
   предпросмотр показывает заполнение слева, подсветка кнопок справа тут лишняя. */
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__control:hover,
[b-d87j8h70rd] .plan-wizard-score-stars .star-rating__control:hover ~ .star-rating__control {
    opacity: 0 !important;
    background: transparent !important;
}

/* Responsive */
@media (max-width: 576px) {
    [b-d87j8h70rd] .plan-item__thumbnail,
    [b-d87j8h70rd] .plan-item__icon-placeholder {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    [b-d87j8h70rd] .plan-item__header {
        flex-wrap: wrap;
    }

    [b-d87j8h70rd] .plan-item__meta {
        flex-wrap: wrap;
        white-space: normal;
    }

    [b-d87j8h70rd] .plan-item__footer {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-d87j8h70rd] .plan-item__footer-right {
        justify-content: flex-start;
    }

    [b-d87j8h70rd] .plan-item__title {
        font-size: 0.9rem;
    }

    [b-d87j8h70rd] .plan-item__action-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.78rem;
    }

    [b-d87j8h70rd] .plan-item__score-stars .star-rating__visual {
        font-size: 1.35rem;
    }
}
/* /Pages/Students/TaskMaterials.razor.rz.scp.css */
/* Scoped styles for TaskMaterials page */
/* /Pages/TaskAttemptHistory.razor.rz.scp.css */
/* ============================================================
   История и аналитика — список заданий с инлайн-раскрытием (как «Задания»):
   клик по заданию раскрывает действия + попытки под строкой; попытка и
   статистика — оверлей-BottomSheet'ы. Страница в обычном потоке документа,
   ширина — .page-body-width (site.css).
   ============================================================ */

/* Tabular nums for analysis time displays to prevent width jitter */
.analysis-time-display[b-m2td7jhebf] {
    font-variant-numeric: tabular-nums;
}

/* Панель фильтров прилипает к верху при прокрутке (как plan-sticky-header).
   На мобиле встаёт под мобильной шапкой (--app-header-height), на десктопе
   шапки нет (fixed-сайдбар слева) — прижимаем к самому верху. */
.ah-sticky-header[b-m2td7jhebf] {
    position: sticky;
    top: var(--app-header-height, 0px);
    z-index: 30;
}

@media (min-width: 992px) {
    .ah-sticky-header[b-m2td7jhebf] {
        top: 0;
    }
}

/* === Компактные чипы действий раскрытого задания (Статистика / Комментарии /
   К заданию) — пилюли в один ряд, ховер даёт .ah-action-card ниже. === */
.ah-chip[b-m2td7jhebf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 999px;
    border: 1px solid var(--app-border, #e0e0e0);
    background: var(--app-surface, #fff);
    color: var(--app-text, #333);
    white-space: nowrap;
    text-decoration: none;
}

/* === Карточки/чипы действий — ОБЩИЙ ховер (идентичен «Плану» и «Заданиям»):
   заметная нейтральная подложка (--app-hover-strong, видна и в тёмной, и в светлой теме)
   + мягкая тень + лёгкий подъём. === */
.ah-action-card[b-m2td7jhebf] {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}

.ah-action-card:hover[b-m2td7jhebf] {
    background-color: var(--app-hover-strong);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ah-action-card:active[b-m2td7jhebf] {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Строка попытки в списке */
.attempt-mobile-list-item:active[b-m2td7jhebf] {
    background-color: var(--app-bg, #fafafa);
}

/* === Плоская лента («Лентой») === */

/* Заглушка превью: диагональная штриховка на токенах темы — работает и в светлой, и
   в тёмной теме (как плейсхолдер в дизайне). Сама по себе СТАТИЧНА: у попыток без
   медиа (нужно «Прикрепить видео») грузиться нечему, анимация тут обманывала бы. */
.ah-feed-thumb-placeholder[b-m2td7jhebf] {
    background: repeating-linear-gradient(
        135deg,
        var(--app-bg, #f2f2f5),
        var(--app-bg, #f2f2f5) 11px,
        var(--app-surface, #ffffff) 11px,
        var(--app-surface, #ffffff) 22px
    );
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Бегущий блик — только когда реально грузится постер/фото (модификатор ставится в
   разметке лишь при наличии картинки; onerror снимает его, если извлечь не удалось). */
.ah-feed-thumb-loading[b-m2td7jhebf]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 25%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 75%
    );
    transform: translateX(-100%);
    animation: ah-shimmer-b-m2td7jhebf 1.6s ease-in-out infinite;
}

/* Скелетоны индикатора подгрузки (карточка/строка внизу ленты) и блик — общий шиммер */
.ah-feed-skeleton[b-m2td7jhebf] {
    position: relative;
    overflow: hidden;
    background: var(--app-bg, #16161d);
}

.ah-feed-skeleton[b-m2td7jhebf]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 25%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 75%
    );
    transform: translateX(-100%);
    animation: ah-shimmer-b-m2td7jhebf 1.6s ease-in-out infinite;
}

@keyframes ah-shimmer-b-m2td7jhebf {
    100% { transform: translateX(100%); }
}

/* Спиннер индикатора «Загружаю ещё…» внизу ленты */
.ah-feed-spinner[b-m2td7jhebf] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--app-border, rgba(255, 255, 255, 0.15));
    border-top-color: var(--app-accent, #8b5cf6);
    border-radius: 50%;
    animation: ah-feed-spin-b-m2td7jhebf 0.8s linear infinite;
}

@keyframes ah-feed-spin-b-m2td7jhebf {
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ah-feed-thumb-loading[b-m2td7jhebf]::after,
    .ah-feed-skeleton[b-m2td7jhebf]::after,
    .ah-feed-spinner[b-m2td7jhebf] {
        animation: none;
    }
}

/* Заголовок карточки ленты: максимум две строки, дальше многоточие */
.ah-feed-title-clamp[b-m2td7jhebf] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Кнопка ▶ поверх превью: лёгкое увеличение по ховеру всей карточки */
.ah-feed-play[b-m2td7jhebf] {
    transition: transform 0.15s ease;
}

button:hover > .ah-feed-play[b-m2td7jhebf] {
    transform: scale(1.06);
}

/* === Вертикальная временная шкала ленты («Лентой») ===
   Один DOM — три подачи: широкий десктоп ≥1360px — полноценная колонка дат
   вплотную справа от 880px-ленты; 1200–1359px — компактная рейка у правого края
   экрана (правое поле слишком узкое для колонки); уже — пилюля с текущей датой
   в строке фильтров липкой шапки (тап раскрывает список дат). Классы ah-tl-open /
   ah-tl-item-active / ah-tl-month-open / ah-tl-can-up / ah-tl-can-down ставит
   JS (setupFeedTimeline в taskAttemptHistory.js). */

.ah-timeline[b-m2td7jhebf] {
    position: fixed;
    /* Десктоп: ниже липкой панели фильтров (z-30) — на низких экранах рейка не
       должна перекрывать её. На мобиле пилюля наоборот живёт ПОВЕРХ шапки
       (переопределение в блоке <1200px); модальные шиты (1060+) выше всегда. */
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Сам контейнер клики не ловит — только чип и рейка (см. ниже). */
    pointer-events: none;
}

/* Пока JS догружает далёкий день после клика — приглушить и не принимать клики. */
.ah-timeline.ah-tl-busy .ah-tl-item[b-m2td7jhebf] {
    opacity: 0.55;
    pointer-events: none;
}

/* Колонка дат; на длинных периодах скроллится внутри себя (скроллбар спрятан,
   активный пункт JS держит по центру). Края уходят в прозрачность, когда в ту
   сторону есть ещё даты (классы ah-tl-can-up/down ставит JS по скроллу трека);
   у конца списка фейд гаснет — последние даты читаются полностью. Маска режет
   и фоновую ось времени (десктоп) — линия тает вместе с текстом. */
.ah-tl-track[b-m2td7jhebf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 6px;
    max-height: min(62vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    pointer-events: auto;
    --ah-tl-fade-top: 0px;
    --ah-tl-fade-bottom: 0px;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0,
        #000 var(--ah-tl-fade-top),
        #000 calc(100% - var(--ah-tl-fade-bottom)),
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0,
        #000 var(--ah-tl-fade-top),
        #000 calc(100% - var(--ah-tl-fade-bottom)),
        transparent 100%);
}

.ah-tl-track.ah-tl-can-up[b-m2td7jhebf] {
    --ah-tl-fade-top: 30px;
}

.ah-tl-track.ah-tl-can-down[b-m2td7jhebf] {
    --ah-tl-fade-bottom: 44px;
}

.ah-tl-track[b-m2td7jhebf]::-webkit-scrollbar {
    display: none;
}

.ah-tl-item[b-m2td7jhebf] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 4px 10px 4px 4px;
    border-radius: 8px;
    color: var(--app-text-secondary, #6b7280);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ah-tl-item:hover[b-m2td7jhebf] {
    background: var(--app-hover-strong, rgba(0, 0, 0, 0.06));
    color: var(--app-text, #333);
}

.ah-tl-dot[b-m2td7jhebf] {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--app-border, #d9d9e3);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.ah-tl-item-active[b-m2td7jhebf] {
    color: var(--app-accent, #5b57d6);
    font-weight: 700;
}

.ah-tl-item-active .ah-tl-dot[b-m2td7jhebf] {
    background: var(--app-accent, #5b57d6);
    box-shadow: 0 0 0 3px var(--app-accent-soft, rgba(91, 87, 214, 0.15));
}

/* Месяцы (длинные периоды): строка месяца — аккордеон, его дни в .ah-tl-mdays.
   Раскрытость управляется классом ah-tl-month-open (ставит JS; текущий месяц —
   раскрыт с сервера). */
.ah-tl-month[b-m2td7jhebf] {
    display: flex;
    flex-direction: column;
}

.ah-tl-mbtn[b-m2td7jhebf] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 5px 10px 5px 4px;
    border-radius: 8px;
    color: var(--app-text, #333);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ah-tl-mbtn:hover[b-m2td7jhebf] {
    background: var(--app-hover-strong, rgba(0, 0, 0, 0.06));
}

.ah-tl-mbtn-active[b-m2td7jhebf] {
    color: var(--app-accent, #5b57d6);
    font-weight: 700;
}

.ah-tl-mbtn-active .ah-tl-dot[b-m2td7jhebf] {
    background: var(--app-accent, #5b57d6);
}

.ah-tl-mcount[b-m2td7jhebf] {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--app-hover, rgba(0, 0, 0, 0.05));
    color: var(--app-text-secondary, #6b7280);
    font-size: 10.5px;
    font-weight: 600;
}

.ah-tl-mbtn-active .ah-tl-mcount[b-m2td7jhebf] {
    background: var(--app-accent-soft, rgba(91, 87, 214, 0.12));
    color: var(--app-accent, #5b57d6);
}

.ah-tl-mcaret[b-m2td7jhebf] {
    flex: none;
    font-size: 10px;
    color: var(--app-text-secondary, #6b7280);
    transition: transform 0.15s ease;
}

.ah-tl-month-open .ah-tl-mcaret[b-m2td7jhebf] {
    transform: rotate(180deg);
}

.ah-tl-mdays[b-m2td7jhebf] {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
}

.ah-tl-month-open > .ah-tl-mdays[b-m2td7jhebf] {
    display: flex;
}

/* Десктоп ≥1200px: рейка всегда видна. На 1200–1359px прижата к правому краю
   ЭКРАНА (а не колонки контента): правое поле узкое, привязка к краю
   880px-колонки наезжала бы на карточки ленты — поэтому же панель на
   полупрозрачной подложке. Вертикально: top ведёт JS (positionRail в
   taskAttemptHistory.js) — на верху страницы рейка начинается на высоте первого
   блока ленты, при прокрутке поднимается и прилипает под панелью фильтров, как
   sticky-сайдбар; top:136px здесь — фолбэк до инициализации JS. Высота НЕ
   ограничена — длинная шкала занимает полосу до низа окна, остальное
   докручивается внутри с фейдами по краям (см. .ah-tl-track).
   Чип не нужен. Вертикальная ось времени — фоновая линия сквозь точки;
   background-attachment:local тянет её на всю прокручиваемую высоту трека. */
@media (min-width: 1200px) {
    .ah-timeline[b-m2td7jhebf] {
        right: 14px;
        top: 136px;
        bottom: 28px;
        /* Панель растёт от верха контейнера: его top = высота первого блока ленты. */
        justify-content: flex-start;
    }

    .ah-tl-chip[b-m2td7jhebf] {
        display: none;
    }

    .ah-tl-panel[b-m2td7jhebf] {
        display: flex;
        flex-direction: column;
        max-height: 100%;
        border: 1px solid var(--app-border, #e5e5ef);
        border-radius: 16px;
        background: var(--app-surface, #fff);
        background: color-mix(in srgb, var(--app-surface, #fff) 86%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.10);
    }

    .ah-tl-track[b-m2td7jhebf] {
        min-height: 0;
        max-height: none;
        background-image: linear-gradient(var(--app-border, #e5e5ef), var(--app-border, #e5e5ef));
        background-repeat: no-repeat;
        background-attachment: local;
        background-position: 12.5px 16px;
        background-size: 2px calc(100% - 32px);
    }
}

/* Широкий десктоп ≥1360px: правое поле уже вмещает полноценную колонку — шкала
   встаёт вплотную справа от ленты (отступ 20px от края 880px-колонки):
   right = 50vw − 440px − (204px ширины + 20px зазора). Ниже 1360px формула ушла
   бы в отрицательное right — там остаётся компактная рейка у края (блок выше).
   Заодно всё чуть крупнее (место позволяет). Геометрия оси: паддинг трека 8px +
   паддинг пункта 6px + половина точки 4px = центр 18px → линия 2px на x=17px. */
@media (min-width: 1360px) {
    .ah-timeline[b-m2td7jhebf] {
        right: calc(50vw - var(--page-body-width, 880px) / 2 - 224px);
    }

    .ah-tl-panel[b-m2td7jhebf] {
        width: 204px;
        border-radius: 18px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
    }

    .ah-tl-track[b-m2td7jhebf] {
        gap: 3px;
        padding: 10px 8px;
        background-position: 17px 23px;
        background-size: 2px calc(100% - 46px);
    }

    .ah-tl-item[b-m2td7jhebf] {
        gap: 9px;
        padding: 5px 10px 5px 6px;
        border-radius: 9px;
        font-size: 13px;
    }

    .ah-tl-mbtn[b-m2td7jhebf] {
        gap: 9px;
        padding: 6px 10px 6px 6px;
        border-radius: 9px;
        font-size: 13px;
    }

    .ah-tl-mcount[b-m2td7jhebf] {
        font-size: 11px;
    }

    .ah-tl-dot[b-m2td7jhebf] {
        width: 8px;
        height: 8px;
    }
}

/* Узкие экраны (<1200px, включая мобилку): постоянной рейки нет — пилюля с
   текущей датой встроена в строку фильтров липкой шапки (справа; слева лупа и
   воронка). Технически пилюля осталась fixed-элементом на корне страницы:
   positionRail (JS) прижимает её к якорю [data-ahtl-anchor] в строке, здесь —
   лишь грубый фолбэк до первого вызова. Тап раскрывает список месяцев/дат
   карточкой-оверлеем под пилюлей. */
@media (max-width: 1199.98px) {
    .ah-timeline[b-m2td7jhebf] {
        top: calc(var(--app-header-height, 0px) + 64px);
        right: 12px;
        /* Строка фильтров — в липкой шапке с непрозрачным фоном (z-30): пилюля
           обязана рисоваться поверх, иначе фон шапки её накроет. */
        z-index: 40;
    }

    .ah-tl-chip[b-m2td7jhebf] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        /* В ряд с кнопками строки фильтров (h-10); тень не нужна — это обычный
           контрол строки, а не плавающий поверх контента. */
        height: 40px;
        border: 1px solid var(--app-border, #e0e0e0);
        background: var(--app-surface, #fff);
        color: var(--app-text, #333);
        border-radius: 999px;
        padding: 0 13px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        touch-action: manipulation;
        pointer-events: auto;
    }

    .ah-tl-chip .bi[b-m2td7jhebf] {
        color: var(--app-accent, #5b57d6);
        font-size: 12px;
    }

    /* Длинные подписи («Yesterday») не должны распирать пилюлю шире якоря-резерва
       в строке (tw-w-32 = 128px). */
    .ah-tl-chip-label[b-m2td7jhebf] {
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Каретка-подсказка «по пилюле можно тапнуть»; разворачивается при открытии. */
    .ah-tl-chip-caret[b-m2td7jhebf] {
        font-size: 10px !important;
        color: var(--app-text-secondary, #6b7280) !important;
        transition: transform 0.15s ease;
    }

    .ah-timeline.ah-tl-open .ah-tl-chip-caret[b-m2td7jhebf] {
        transform: rotate(180deg);
    }

    .ah-tl-panel[b-m2td7jhebf] {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        min-width: 172px;
        border: 1px solid var(--app-border, #e0e0e0);
        border-radius: 14px;
        background: var(--app-surface, #fff);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
        pointer-events: auto;
    }

    .ah-timeline.ah-tl-open .ah-tl-panel[b-m2td7jhebf] {
        display: block;
    }

    .ah-tl-track[b-m2td7jhebf] {
        max-height: min(46vh, 420px);
        padding: 8px;
    }

    /* Тач-таргеты покрупнее, чем на десктопной рейке */
    .ah-tl-item[b-m2td7jhebf] {
        padding: 7px 12px 7px 8px;
        font-size: 13px;
    }

    .ah-tl-mbtn[b-m2td7jhebf] {
        padding: 8px 12px 8px 8px;
        font-size: 13px;
    }
}

/* 1024–1199px: строка фильтров уже десктопная (кнопки h-9 = 36px) — пилюля
   подгоняется под их высоту. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .ah-tl-chip[b-m2td7jhebf] {
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ah-tl-chip[b-m2td7jhebf] {
        transition: none;
    }
}

/* === Оценка и настроение попытки (портировано из AttemptHistoryCard) === */
.attempt-card-rating-btn[b-m2td7jhebf] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.25rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.attempt-card-rating-btn:hover:not(:disabled)[b-m2td7jhebf] {
    background-color: rgba(0, 0, 0, 0.04);
}

.attempt-card-rating-btn:focus[b-m2td7jhebf] {
    outline: none;
}

.attempt-card-rating-btn:disabled[b-m2td7jhebf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.attempt-mood[b-m2td7jhebf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.attempt-mood-emoji[b-m2td7jhebf] {
    font-size: 1.2rem;
    line-height: 1;
}

/* === Блок «Приложить видео» (портировано из AttemptHistoryCard) === */
.attempt-attach-video[b-m2td7jhebf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.attempt-attach-input-wrapper[b-m2td7jhebf] {
    min-width: 220px;
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.attempt-attach-button[b-m2td7jhebf] {
    width: 100%;
}

.attempt-attach-input[b-m2td7jhebf] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* === Модалка оценки === */
.rating-modal-stars[b-m2td7jhebf] {
    padding: 0.5rem 0;
}

[b-m2td7jhebf] .rating-modal-star-rating .star-rating__visual {
    font-size: 2.5rem;
}

.rating-modal-criteria[b-m2td7jhebf] {
    background-color: var(--app-bg, #fafafa);
    border-radius: var(--radius-sm, 8px);
    padding: 1rem;
}

.rating-modal-rules-list[b-m2td7jhebf] {
    font-size: 0.9rem;
    line-height: 1.6;
}

.rating-modal-rule-line[b-m2td7jhebf] {
    padding: 0.125rem 0;
}
/* /Pages/VideoAnalysis.razor.rz.scp.css */
/* Scoped styles for VideoAnalysis page */
/* Transcript sync uses global .transcript-line / .transcript-line-active from site.css */

/* ═══ Fixed page layout — matches TaskAttemptHistory / AssignmentsBrowse ═══ */

.va-page[b-r7p19cfzg8] {
    top: var(--app-header-height, 60px);
    background-color: var(--app-bg);
}

@media (min-width: 992px) {
    .va-page[b-r7p19cfzg8] {
        top: 0;
        left: var(--sidebar-width, 260px);
    }
}

.va-page > .alert[b-r7p19cfzg8] {
    flex-shrink: 0;
}

.va-left-panel[b-r7p19cfzg8],
.va-right-panel[b-r7p19cfzg8] {
    contain: style;
}

/* ═══ Trial Timeline ═══ */

.timeline-legend-dot[b-r7p19cfzg8] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}

.timeline-container[b-r7p19cfzg8] {
    position: relative;
    min-height: 180px;
}

.timeline-axis[b-r7p19cfzg8] {
    position: relative;
    height: 28px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 8px;
}

.timeline-tick[b-r7p19cfzg8] {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    text-align: center;
}

.timeline-tick-line[b-r7p19cfzg8] {
    width: 1px;
    height: 8px;
    background: #adb5bd;
    margin: 0 auto;
}

.timeline-tick-label[b-r7p19cfzg8] {
    font-size: 0.65rem;
    color: #6c757d;
    white-space: nowrap;
}

.timeline-bars[b-r7p19cfzg8] {
    position: relative;
    height: 120px;
    display: flex;
    align-items: flex-end;
}

.timeline-bar-wrapper[b-r7p19cfzg8] {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.timeline-bar[b-r7p19cfzg8] {
    width: 22px;
    min-height: 16px;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    border: none;
    outline: none;
}

.timeline-bar:hover[b-r7p19cfzg8] {
    opacity: 0.85;
    transform: scaleY(1.05);
    z-index: 10;
}

.timeline-bar:focus-visible[b-r7p19cfzg8] {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.timeline-bar-label[b-r7p19cfzg8] {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    line-height: 1;
    padding-bottom: 2px;
}

.timeline-bar-suspected[b-r7p19cfzg8] {
    animation: timeline-pulse-b-r7p19cfzg8 2s ease-in-out infinite;
}

@keyframes timeline-pulse-b-r7p19cfzg8 {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 6px rgba(255, 193, 7, 0.6); }
}

.timeline-prompt-badge[b-r7p19cfzg8] {
    font-size: 0.55rem;
    font-weight: 600;
    color: #6c757d;
    margin-top: 2px;
    line-height: 1;
}

/* ═══ Timeline filter chips ═══ */

.tl-filter-chip[b-r7p19cfzg8] {
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
}

/* ═══ Median latency reference line ═══ */

.timeline-median-line[b-r7p19cfzg8] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px dashed #0d6efd;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.timeline-median-label[b-r7p19cfzg8] {
    position: absolute;
    right: 0;
    top: -14px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #0d6efd;
    background: rgba(255,255,255,0.85);
    padding: 0 3px;
    border-radius: 2px;
    pointer-events: auto;
}

/* ═══ Timeline overlay badges ═══ */

.tl-wait-badge[b-r7p19cfzg8] {
    font-size: 0.55rem;
    color: #6f42c1;
    white-space: nowrap;
    margin-bottom: 1px;
    line-height: 1;
}

.tl-wait-badge i[b-r7p19cfzg8] {
    font-size: 0.5rem;
}

.tl-impulsive-badge[b-r7p19cfzg8] {
    font-size: 0.65rem;
    color: #fd7e14;
    margin-bottom: 1px;
    line-height: 1;
}

.tl-choice-badge[b-r7p19cfzg8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #6c757d;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    margin-top: 1px;
    line-height: 1;
}

.tl-mode-icon[b-r7p19cfzg8] {
    font-size: 0.6rem;
    color: #0d6efd;
    margin-top: 1px;
    line-height: 1;
}

.tl-echoic-badge[b-r7p19cfzg8] {
    font-size: 0.55rem;
    color: #e83e8c;
    margin-top: 1px;
    line-height: 1;
}
/* /Shared/AiAssistantWidget.razor.rz.scp.css */
/* AiAssistantWidget — плавающая кнопка + панель чата в правом нижнем углу.
   Слои: FAB 1035 (под шапкой 1040 — выпадающие меню его перекрывают), панель 1055 —
   выше шапки/нижней навигации (1040), но НИЖЕ BottomSheet (1060) и модалок чата
   (.ai-modal-overlay 1080): «История»/«Разборы» из чата открываются поверх панели,
   как раньше поверх страницы. */

/* ── FAB — «живая» кнопка-маскот (см. /js/ai-fab-bot.js) ──
   Обёртка-якорь держит fixed-позицию и свечение; сама кнопка внутри — relative,
   её иконку оживляет JS (инлайновые transform у SVG-групп). Акцент: #786DE2. */

.aiw-fab-wrap[b-2pktcatq1a] {
    position: fixed;
    right: max(18px, env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 1035;
    display: grid;
    place-items: center;
    /* Интенсивность тени под курсором — JS ставит --hover 0↔1 на наведении. */
    --hover: 0;
    /* iOS Safari: во время анимации показа/сворачивания адресной строки fixed-элементы
       перерисовываются с отставанием на кадр — кнопка «дёргается». Держим обёртку на
       отдельном GPU-слое (translateZ + backface-visibility): тогда Safari двигает её
       в такт с анимацией панели браузера, а не рывками. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    /* bottom скачком меняется на ~34px, когда env(safe-area-inset-bottom) переключается
       0↔home-indicator в момент сворачивания нижней панели браузера. Короткий переход
       превращает этот скачок в скольжение — кнопка плавно догоняет нижнюю навигацию. */
    transition: bottom 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.aiw-fab-wrap.aiw-fab--hidden[b-2pktcatq1a] {
    /* Панель открыта — кнопка не нужна. display:none, а не visibility: под ней
       не должно оставаться «мёртвой» тап-зоны (и JS-цикл маскота встаёт на паузу). */
    display: none;
}

/* Пульсирующее свечение-ореол под кнопкой. */
.aiw-fab-glow[b-2pktcatq1a] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190%;
    height: 190%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(120, 109, 226, 0.55), rgba(120, 109, 226, 0) 68%);
    filter: blur(7px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: aiw-glow-pulse-b-2pktcatq1a 4.6s ease-in-out infinite;
}

@keyframes aiw-glow-pulse-b-2pktcatq1a {
    0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 0.82; transform: translate(-50%, -50%) scale(1.16); }
}

.aiw-fab[b-2pktcatq1a] {
    position: relative;
    width: 56px;
    height: 56px;
    padding: 0;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    /* Верх светлее, низ темнее акцента — объём «выпуклой» кнопки. */
    background: linear-gradient(158deg, #8b7eff 0%, #6057b5 100%);
    box-shadow:
        0 10px 26px rgba(120, 109, 226, calc(0.30 + 0.42 * var(--hover, 0))),
        inset 0 1px 1px rgba(255, 255, 255, 0.28),
        inset 0 -3px 9px rgba(0, 0, 0, 0.20);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.aiw-bot[b-2pktcatq1a] {
    display: block;
    overflow: visible;
}

/* Только scale, без translateY: подъём уводил нижнюю кромку из-под курсора,
   :hover рвался, кнопка падала обратно — курсор мигал «палец ↔ стрелка».
   Увеличение от центра безопасно: все кромки уходят ОТ курсора, а не из-под него. */
.aiw-fab:hover[b-2pktcatq1a],
.aiw-fab:focus-visible[b-2pktcatq1a] {
    transform: scale(1.05);
    outline: none;
}

.aiw-fab:active[b-2pktcatq1a] {
    transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
    .aiw-fab-glow[b-2pktcatq1a] {
        animation: none;
        opacity: 0.5;
    }
    .aiw-fab[b-2pktcatq1a] {
        transition: box-shadow 0.35s ease;
    }
}

/* ── Подложка-затемнение (только мобильная «шторка», см. media ниже) ── */

.aiw-overlay[b-2pktcatq1a] {
    display: none;
}

/* ── Панель ── */

/* z-index 1090: ассистента открывают ИЗ модалок (BottomSheet разбора — 1060,
   редактор задания — 1055, модалки «Заданий» — до 1080), поэтому панель должна
   быть выше их всех. На 1055 она открывалась ПОД шитом и выглядела размытой —
   её накрывал backdrop-filter оверлея. Потолок сверху: шапочные попапы,
   уведомления и тосты (1095–1110) остаются над ассистентом — так и нужно. */
.aiw-panel[b-2pktcatq1a] {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    width: min(432px, calc(100vw - 28px));
    height: min(680px, calc(100dvh - 40px));
    border: 1px solid var(--app-border, #e8e8e8);
    border-radius: 20px;
    background: var(--app-bg, #fff);
    box-shadow: 0 28px 70px -18px rgba(15, 23, 42, 0.35), 0 4px 18px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.aiw-panel--open[b-2pktcatq1a] {
    animation: aiw-pop-b-2pktcatq1a 0.2s ease backwards;
}

@keyframes aiw-pop-b-2pktcatq1a {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aiw-panel--open[b-2pktcatq1a] {
        animation: none;
    }
}

/* Закрытая панель НЕ выгружается (keep-alive чата), просто прячется. */
.aiw-panel--closed[b-2pktcatq1a] {
    display: none;
}

/* Развёрнутый режим — почти во весь экран, всё ещё «пришвартован» к правому краю. */
.aiw-panel--expanded[b-2pktcatq1a] {
    width: min(920px, calc(100vw - 44px));
    height: calc(100dvh - 40px);
}

/* ── Ручка-пилюля (канон BottomSheet; на десктопе скрыта) ── */

.aiw-handle[b-2pktcatq1a] {
    display: none;
    justify-content: center;
    align-items: center;
    min-height: 22px;
    padding: 0.55rem 0 0.25rem;
    flex-shrink: 0;
}

.aiw-handle-bar[b-2pktcatq1a] {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--app-border, rgba(0, 0, 0, 0.18));
}

html.dark .aiw-handle-bar[b-2pktcatq1a] {
    background: rgba(255, 255, 255, 0.22);
}

/* ── Шапка панели ── */

.aiw-header[b-2pktcatq1a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    /* Без отдельного фона и разделительной линии: шапка сливается с телом панели —
       заголовок «парит» над лентой, а не сидит в отдельной плашке. */
    background: transparent;
    flex-shrink: 0;
}

.aiw-title[b-2pktcatq1a] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--app-text, #1c1c1c);
}

.aiw-title-icon[b-2pktcatq1a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #6c5ce7 0%, #8b7bf0 100%);
}

.aiw-title-text[b-2pktcatq1a] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aiw-actions[b-2pktcatq1a] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Сегмент-контрол «Материал | Помощник» (страница материалов задания) ── */

.aiw-seg[b-2pktcatq1a] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-text, #1c1c1c) 6%, transparent);
}

.aiw-seg-btn[b-2pktcatq1a] {
    border: none;
    background: transparent;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-muted, #8c8c8c);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.aiw-seg-btn:hover[b-2pktcatq1a] {
    color: var(--app-text, #1c1c1c);
}

.aiw-seg-btn--active[b-2pktcatq1a] {
    background: var(--app-surface, #fff);
    color: var(--app-text, #1c1c1c);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14);
}

html.dark .aiw-seg-btn--active[b-2pktcatq1a] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Кнопки шапки — мягкие «таблетки» в духе системных шитов (iOS-канон):
   заметная тап-зона, спокойная заливка, без резких рамок. color-mix от
   --app-text — одинаково аккуратно в светлой и тёмной темах. */
.aiw-icon-btn[b-2pktcatq1a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--app-text, #1c1c1c) 7%, transparent);
    color: var(--app-muted, #8c8c8c);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.aiw-icon-btn:hover[b-2pktcatq1a],
.aiw-icon-btn:focus-visible[b-2pktcatq1a] {
    background: color-mix(in srgb, var(--app-text, #1c1c1c) 13%, transparent);
    color: var(--app-text, #1c1c1c);
    outline: none;
}

/* ── Тело: чат заполняет остаток панели ── */

.aiw-body[b-2pktcatq1a] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Keep-alive-панели тела: чат материалов и общий помощник живут в DOM одновременно,
   неактивная прячется (набранный текст/скролл переживают переключение). */
.aiw-pane[b-2pktcatq1a] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.aiw-pane--hidden[b-2pktcatq1a] {
    display: none;
}

.aiw-body[b-2pktcatq1a]  .ai-assistant-page {
    flex: 1;
    min-height: 0;
    padding: 0 6px;
}

/* ── Мобилка/планшет (<992px): нижняя навигация занимает низ экрана ── */

@media (max-width: 991px) {
    .aiw-fab-wrap[b-2pktcatq1a] {
        /* Над нижней навигацией (высота в --app-bottomnav-height). */
        bottom: calc(var(--app-bottomnav-height, 59px) + env(safe-area-inset-bottom, 0px) + 14px);
    }

    .aiw-fab[b-2pktcatq1a] {
        width: 52px;
        height: 52px;
    }

    /* Планшет (768–991px): панель остаётся плавающей, но приподнята над нижней навигацией. */
    .aiw-panel[b-2pktcatq1a] {
        bottom: calc(var(--app-bottomnav-height, 59px) + env(safe-area-inset-bottom, 0px) + 14px);
        height: min(680px, calc(100dvh - var(--app-bottomnav-height, 59px) - 40px));
    }

    .aiw-panel--expanded[b-2pktcatq1a] {
        height: calc(100dvh - var(--app-bottomnav-height, 59px) - 40px);
    }
}

/* ── Телефон (<768px): панель — «шторка» в каноне BottomSheet приложения:
      подложка-затемнение, скруглённый верх, ручка-пилюля, выезд снизу.
      Почти вся высота экрана (сверху остаётся полоска подложки ~28px). ── */

@media (max-width: 767px) {
    .aiw-overlay--open[b-2pktcatq1a] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1089; /* сразу под панелью (1090), поверх модалок, из которых открывают ассистента */
        background: rgba(15, 23, 42, 0.42);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        animation: aiw-fade-in-b-2pktcatq1a 0.25s ease backwards;
    }

    .aiw-panel[b-2pktcatq1a] {
        top: auto;
        left: 0;
        right: 0;
        /* --ai-kb = высота экранной клавиатуры (ставит /js/ai-chat-viewport.js):
           шторка приподнимается над клавиатурой, строка ввода стоит прямо над ней. */
        bottom: var(--ai-kb, 0px);
        width: 100%;
        height: calc(100dvh - var(--ai-kb, 0px) - 28px);
        max-height: none;
        border: none;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.16);
        /* Home-indicator на айфонах: композер не лезет под «полоску». */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Выезд снизу — та же пружинистая кривая, что у BottomSheet. */
    .aiw-panel--open[b-2pktcatq1a] {
        animation: aiw-sheet-in-b-2pktcatq1a 0.34s cubic-bezier(0.32, 0.72, 0, 1) backwards;
    }

    .aiw-handle[b-2pktcatq1a] {
        display: flex;
    }

    /* На телефоне режим один — «Развернуть» не нужна. */
    .aiw-expand-btn[b-2pktcatq1a] {
        display: none;
    }

    /* Шапка сразу под ручкой: без верхнего паддинга, чуть шире боковые поля,
       без разделительной линии — сливается с телом. */
    .aiw-header[b-2pktcatq1a] {
        padding: 0 12px 8px 16px;
    }

    .aiw-body[b-2pktcatq1a]  .ai-assistant-page {
        padding: 0;
    }
}

@keyframes aiw-sheet-in-b-2pktcatq1a {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes aiw-fade-in-b-2pktcatq1a {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .aiw-panel--open[b-2pktcatq1a],
    .aiw-overlay--open[b-2pktcatq1a] {
        animation: none;
    }
}

/* Тёмная тема: html.dark переопределяет --app-* переменные, панель их уже использует;
   докручиваем только тень (на тёмном фоне светлая «дымка» смотрится грязно). */
html.dark .aiw-panel[b-2pktcatq1a] {
    box-shadow: 0 28px 70px -18px rgba(0, 0, 0, 0.75), 0 4px 18px rgba(0, 0, 0, 0.4);
}
/* /Shared/AiChat/AiPreviewPanel.razor.rz.scp.css */
/* Desktop: fill available space in flex parent */
.ai-preview-content[b-m4xdagoqge] {
    height: 100%;
}

/* Mobile: let content flow naturally within scrollable parent (Tailwind lg breakpoint) */
@media (max-width: 1023.98px) {
    .ai-preview-content[b-m4xdagoqge] {
        height: auto;
    }
}
/* /Shared/AiChatModal.razor.rz.scp.css */
/* Voice Recording Indicator */
@keyframes voice-pulse-b-rlrzflwgyg {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

.voice-rec-dot[b-rlrzflwgyg] {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    animation: voice-pulse-b-rlrzflwgyg 1s ease-in-out infinite;
}

/* Mobile AI input - no sticky needed, flex-shrink-0 keeps it at bottom */
.mobile-ai-input[b-rlrzflwgyg] {
    z-index: 2;
}

@media (max-width: 991.98px) {
    /* Make modal-body a flex container so children can use flex: 1
       instead of h-100 (percentage heights don't resolve reliably
       inside nested fixed-position elements on mobile browsers) */
    .ai-chat-modal-body[b-rlrzflwgyg] {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
}
/* /Shared/AiContentGenerator/Panels/ContentPreviewPanel.razor.rz.scp.css */
.preview-panel[b-8m12tletai] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--app-text);
}

.preview-content[b-8m12tletai] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: auto;
    min-height: 0;
}

.preview-images-container[b-8m12tletai] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
    max-width: 100%;
}

.preview-image-wrapper[b-8m12tletai] {
    position: relative;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: border-color 0.15s ease-in-out;
}

.preview-image-wrapper:hover[b-8m12tletai] {
    border-color: rgba(255, 255, 255, 0.3);
}

.preview-image-wrapper.selected[b-8m12tletai] {
    border-color: var(--app-accent);
}

.preview-image-wrapper img[b-8m12tletai] {
    display: block;
    max-height: calc(100vh - 300px);
    max-width: 300px;
    object-fit: contain;
    border-radius: 0.25rem;
}

.image-check[b-8m12tletai] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.image-number[b-8m12tletai] {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
}

.image-label[b-8m12tletai] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-placeholder[b-8m12tletai] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    border: 3px dashed rgba(108, 117, 125, 0.5);
    border-radius: 0.5rem;
    background: rgba(108, 117, 125, 0.1);
}

.placeholder-content[b-8m12tletai] {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.preview-empty[b-8m12tletai] {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.empty-icon[b-8m12tletai] {
    font-size: 3rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 1rem;
}

.empty-text[b-8m12tletai] {
    font-size: 0.875rem;
}

.pdf-preview-container[b-8m12tletai] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 900px;
}

.pdf-header[b-8m12tletai] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem 0.5rem 0 0;
    flex-shrink: 0;
}

.pdf-info[b-8m12tletai] {
    display: flex;
    align-items: center;
    color: white;
    overflow: hidden;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.pdf-filename[b-8m12tletai] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.token-usage[b-8m12tletai] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 193, 7, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.reasoning-toggle[b-8m12tletai] {
    flex-shrink: 0;
    font-size: 0.75rem;
}

.reasoning-summary[b-8m12tletai] {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
    max-height: 150px;
    overflow-y: auto;
}

.reasoning-content[b-8m12tletai] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    white-space: pre-wrap;
}

.pdf-viewer-wrapper[b-8m12tletai] {
    flex: 1;
    min-height: 0;
    background: #525659;
    border-radius: 0 0 0.5rem 0.5rem;
    overflow: hidden;
}

.pdf-no-header .pdf-viewer-wrapper[b-8m12tletai] {
    border-radius: 0.5rem;
}

.pdf-viewer[b-8m12tletai] {
    width: 100%;
    height: 100%;
    border: none;
    min-height: 500px;
}

/* Legacy PDF preview styles (fallback) */
.pdf-preview[b-8m12tletai] {
    text-align: center;
    color: white;
}

.pdf-icon[b-8m12tletai] {
    font-size: 4rem;
    color: #dc2626;
    display: block;
    margin-bottom: 1rem;
}

.pdf-description[b-8m12tletai] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
}

.preview-actions[b-8m12tletai] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid var(--app-border);
}

.preview-info[b-8m12tletai] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Single large image styles */
.single-image-container[b-8m12tletai] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.single-preview-image[b-8m12tletai] {
    max-width: 100%;
    max-height: calc(100vh - 200px);
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.single-image-label[b-8m12tletai] {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    max-width: 80%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-loading-overlay[b-8m12tletai] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

/* Orientation placeholder styles */
.orientation-placeholder[b-8m12tletai] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.orientation-placeholder.landscape[b-8m12tletai] {
    width: min(70vw, 560px);
    height: min(46.7vw, 373px); /* 3:2 aspect ratio */
}

.orientation-placeholder.portrait[b-8m12tletai] {
    width: min(40vw, 320px);
    height: min(60vw, 480px); /* 2:3 aspect ratio */
}

.orientation-placeholder.square[b-8m12tletai] {
    width: min(50vw, 400px);
    height: min(50vw, 400px);
}

.placeholder-inner[b-8m12tletai] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(0, 0, 0, 0.25);
}

.placeholder-icon[b-8m12tletai] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.placeholder-label[b-8m12tletai] {
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
/* /Shared/AiContentGenerator/Panels/ProgressIndicator.razor.rz.scp.css */
.progress-indicator[b-s8mh5uzsv3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
}

.progress-spinner-container[b-s8mh5uzsv3] {
    position: relative;
    width: 100px;
    height: 100px;
}

.progress-icon-wrapper[b-s8mh5uzsv3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
}

.progress-text[b-s8mh5uzsv3] {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--app-text);
}

.progress-subtext[b-s8mh5uzsv3] {
    font-size: 0.875rem;
    color: var(--app-text-secondary);
}

.progress-bar-container[b-s8mh5uzsv3] {
    width: 200px;
    margin-top: 0.5rem;
}
/* /Shared/AiContentGenerator/Presets/PresetCard.razor.rz.scp.css */
.preset-card[b-rx7uaqbtla] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 2px solid var(--app-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    background: var(--app-surface);
}

.preset-card:hover:not(.disabled)[b-rx7uaqbtla] {
    border-color: var(--app-accent);
    background: rgb(var(--primary-50));
}

.preset-card.selected[b-rx7uaqbtla] {
    border-color: var(--app-accent);
    background: rgb(var(--primary-50));
}

.preset-card.disabled[b-rx7uaqbtla] {
    opacity: 0.5;
    cursor: not-allowed;
}

.preset-icon[b-rx7uaqbtla] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: var(--app-surface-alt);
    color: var(--app-accent);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.preset-card.selected .preset-icon[b-rx7uaqbtla] {
    background: var(--app-accent);
    color: white;
}

.preset-content[b-rx7uaqbtla] {
    flex: 1;
    min-width: 0;
}

.preset-name[b-rx7uaqbtla] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preset-description[b-rx7uaqbtla] {
    font-size: 0.75rem;
    color: var(--app-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preset-check[b-rx7uaqbtla] {
    color: var(--app-accent);
    font-size: 1.25rem;
    flex-shrink: 0;
}
/* /Shared/AiContentGenerator/Presets/PresetSelector.razor.rz.scp.css */
.preset-selector[b-duuysunej9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preset-group[b-duuysunej9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preset-group-title[b-duuysunej9] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-text-secondary);
    padding-left: 0.25rem;
}

.preset-group-items[b-duuysunej9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* /Shared/ApplicationLayout.razor.rz.scp.css */
.application-shell[b-8wioymug99] {
    min-height: 100vh;
    min-height: 100dvh;
    background: #f5f6fa;
}

.application-main[b-8wioymug99] {
    min-height: 100vh;
    min-height: 100dvh;
}
/* /Shared/AttemptTrendMiniChart.razor.rz.scp.css */
.trend-chart-wrap[b-q20x3vu7bd] {
    position: relative;
    padding-bottom: 4px;
}

.trend-svg[b-q20x3vu7bd] {
    width: 100%;
    height: 100px;
    display: block;
}

/* Y-axis labels — HTML, fixed pixel size */
.trend-y-label[b-q20x3vu7bd] {
    position: absolute;
    left: 6px;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--app-muted, #6b7280);
    opacity: 0.45;
    pointer-events: none;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Dots — HTML, fixed pixel size */
.trend-dot[b-q20x3vu7bd] {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot-color);
    border: 1.5px solid white;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.trend-dot--hover[b-q20x3vu7bd] {
    width: 10px;
    height: 10px;
    border-width: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* /Shared/AudioPlayerDock.razor.rz.scp.css */
/* Полоса перемотки аудио. Взят нативный <input type="range">: пальцем на
   телефоне и стрелками с клавиатуры он работает «из коробки», а нарисованный
   div пришлось бы обвешивать pointer-обработчиками. Tailwind псевдоэлементы
   ползунка не выражает — только здесь.

   Заполненную часть рисует градиент по --ap-pos (его ставит audio-player.js
   на каждый timeupdate: без реrender'а Blazor и SignalR-трафика). */

.ap-seek[b-oe5p7jrxn9] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 20px; /* зона захвата пальцем, сама дорожка тоньше */
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.ap-seek:disabled[b-oe5p7jrxn9] {
    cursor: default;
    opacity: 0.6;
}

.ap-seek:focus[b-oe5p7jrxn9] {
    outline: none;
}

/* ── WebKit / Blink ── */

.ap-seek[b-oe5p7jrxn9]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--app-accent) 0%,
        var(--app-accent) var(--ap-pos, 0%),
        var(--app-border) var(--ap-pos, 0%),
        var(--app-border) 100%);
}

.ap-seek[b-oe5p7jrxn9]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px; /* центрируем по дорожке 6px */
    border-radius: 50%;
    border: 2px solid var(--app-surface);
    background: var(--app-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.ap-seek:focus-visible[b-oe5p7jrxn9]::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 30%, transparent);
}

/* ── Firefox ── */

.ap-seek[b-oe5p7jrxn9]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--app-border);
}

.ap-seek[b-oe5p7jrxn9]::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--app-accent);
}

.ap-seek[b-oe5p7jrxn9]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--app-surface);
    background: var(--app-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ── Свёрнутый док: полоска под именем файла ── */

.ap-seek--slim[b-oe5p7jrxn9] {
    height: 14px;
}

.ap-seek--slim[b-oe5p7jrxn9]::-webkit-slider-runnable-track {
    height: 3px;
}

.ap-seek--slim[b-oe5p7jrxn9]::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    margin-top: -3.5px;
    border-width: 1px;
}

.ap-seek--slim[b-oe5p7jrxn9]::-moz-range-track,
.ap-seek--slim[b-oe5p7jrxn9]::-moz-range-progress {
    height: 3px;
}

.ap-seek--slim[b-oe5p7jrxn9]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-width: 1px;
}
/* /Shared/BottomSheet.razor.rz.scp.css */
/* ===== Bottom Sheet — modern slide-up modal ===== */

.bottom-sheet[b-1b6kfblgh5] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Overlay — затемнение + мягкий блюр фона (как в нативных iOS/Android sheets).
   -webkit-backdrop-filter обязателен для Safari/iOS. */
.bottom-sheet-overlay[b-1b6kfblgh5] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.bottom-sheet--open .bottom-sheet-overlay[b-1b6kfblgh5] {
    opacity: 1;
}

/* Panel */
.bottom-sheet-panel[b-1b6kfblgh5] {
    position: relative;
    width: 100%;
    max-height: 88vh;
    background: var(--app-surface, #fff);
    border-radius: var(--radius-lg, 18px) var(--radius-lg, 18px) 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    /* Чуть пружинистая кривая — панель «долетает» с лёгким замедлением. */
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    /* Home-indicator на айфонах: контент/футер не лезут под «полоску». */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-sheet--open .bottom-sheet-panel[b-1b6kfblgh5] {
    transform: translateY(0);
}

/* Desktop: centered dialog style */
@media (min-width: 640px) {
    .bottom-sheet[b-1b6kfblgh5] {
        align-items: center;
    }

    .bottom-sheet-panel[b-1b6kfblgh5] {
        max-width: 480px;
        max-height: 80vh;
        border-radius: var(--radius-lg, 16px);
        transform: translateY(24px);
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease;
        padding-bottom: 0;
    }

    .bottom-sheet-panel--wide[b-1b6kfblgh5] {
        max-width: 720px;
        max-height: 88vh;
        width: calc(100vw - 2rem);
    }

    .bottom-sheet--open .bottom-sheet-panel[b-1b6kfblgh5] {
        transform: translateY(0);
        opacity: 1;
    }

    .bottom-sheet-handle[b-1b6kfblgh5] {
        display: none;
    }

    /* Док-режим: панель у правого края на всю высоту (боковая панель добавления в план).
       Оверлей светлее и без блюра — за панелью видно, как меняется страница. */
    .bottom-sheet--dock-right[b-1b6kfblgh5] {
        align-items: stretch;
        justify-content: flex-end;
    }

    .bottom-sheet--dock-right .bottom-sheet-overlay[b-1b6kfblgh5] {
        background: rgba(15, 23, 42, 0.28);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .bottom-sheet--dock-right .bottom-sheet-panel[b-1b6kfblgh5] {
        width: 432px;
        max-width: min(432px, calc(100vw - 3rem));
        max-height: none;
        height: 100%;
        border-radius: 0;
        box-shadow: -18px 0 48px rgba(0, 0, 0, 0.22);
        transform: translateX(36px);
    }

    .bottom-sheet--dock-right.bottom-sheet--open .bottom-sheet-panel[b-1b6kfblgh5] {
        transform: translateX(0);
    }
}

/* Drag handle */
.bottom-sheet-handle[b-1b6kfblgh5] {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Крупная зона захвата пальцем (не только сама «пилюля»). */
    min-height: 28px;
    padding: 0.6rem 0 0.35rem;
    cursor: grab;
    touch-action: none;
}

.bottom-sheet-handle:active[b-1b6kfblgh5] {
    cursor: grabbing;
}

.bottom-sheet-handle-bar[b-1b6kfblgh5] {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--app-border, rgba(0, 0, 0, 0.18));
    transition: background-color 0.15s ease;
}

html.dark .bottom-sheet-handle-bar[b-1b6kfblgh5] {
    background: rgba(255, 255, 255, 0.22);
}

/* Header — тоже зона захвата листа: тянуть вниз можно и за полосу заголовка, не
   только за ручку. touch-action:none гасит нативный ‘pull-to-refresh’ на первых
   пикселях жеста (пока JS не перехватил протяжку). Кнопке-крестику это не мешает —
   touch-action влияет на скролл/зум, а не на тап. */
.bottom-sheet-header[b-1b6kfblgh5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--app-border, #e8e8e8);
    touch-action: none;
}

.bottom-sheet-title[b-1b6kfblgh5] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-text, #1c1c1c);
    margin: 0;
}

.bottom-sheet-close[b-1b6kfblgh5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--app-muted, #8c8c8c);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    font-size: 1rem;
}

.bottom-sheet-close:hover[b-1b6kfblgh5] {
    background: rgba(0, 0, 0, 0.04);
    color: var(--app-text, #1c1c1c);
}

/* Body */
.bottom-sheet-body[b-1b6kfblgh5] {
    flex: 1;
    min-height: 0;
    /* overflow-y:auto без явного overflow-x браузер повышает до overflow-x:auto — и
       любой ребёнок, вылезший на пару пикселей за ширину (абсолютные флажки/точки/
       подписи графиков статистики), делает лист «елозящим» пальцем влево-вправо, хотя
       по горизонтали смотреть нечего. Гасим горизонтальную прокрутку явно — как в чате
       ИИ-ассистента (.ai-assistant-page): лист скроллится строго по вертикали. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 1.25rem;
    overscroll-behavior: contain;
}

/* Flush — контент во всю ширину, без отступов и без собственного скролла body:
   ребёнок сам управляет высотой/прокруткой (напр. список уведомлений с hover-строками
   и свайпом). Нужен для edge-to-edge содержимого. */
.bottom-sheet-body--flush[b-1b6kfblgh5] {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Footer */
.bottom-sheet-footer[b-1b6kfblgh5] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--app-border, #e8e8e8);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Shared/ChartTooltip.razor.rz.scp.css */
.chart-tooltip[b-mm37whn3ej] {
    position: absolute;
    bottom: calc(100% + 6px);
    z-index: 10;
    background: var(--app-surface, var(--app-surface));
    border: 1px solid var(--app-border, var(--app-border));
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    color: var(--app-text, var(--app-text));
}

[b-mm37whn3ej] .chart-tooltip-date {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 10px;
    color: var(--app-muted, var(--app-text-secondary));
}

[b-mm37whn3ej] .chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-mm37whn3ej] .chart-tooltip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

[b-mm37whn3ej] .chart-tooltip-hint {
    margin-top: 3px;
    font-size: 9px;
    color: var(--app-muted, var(--app-text-secondary));
    opacity: 0.7;
}

/* Блок вех внутри единого попапа сессии: отделён чертой, длинные подписи
   переносятся (сам попап nowrap) */
[b-mm37whn3ej] .chart-tooltip-milestones {
    border-top: 1px solid var(--app-border, var(--app-border));
    margin-top: 4px;
    padding-top: 4px;
    white-space: normal;
    width: max-content;
    max-width: 260px;
}

[b-mm37whn3ej] .chart-tooltip-milestones .chart-tooltip-row {
    align-items: flex-start;
}

[b-mm37whn3ej] .chart-tooltip-milestones .chart-tooltip-dot {
    margin-top: 3px;
}
/* /Shared/ChatComposer.razor.rz.scp.css */
.chat-composer[b-n9u4zbjrvb] {
    display: flex;
    /* flex-end — кнопка держится внизу, когда поле вырастает в несколько строк. */
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    background: var(--app-surface, #fff);
    border: 1.5px solid var(--app-border, #e3e6ea);
    border-radius: 18px;
    padding: 6px 7px 6px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Подсветка рамки при фокусе — как на «первичной консультации»/онбординге. */
.chat-composer:focus-within[b-n9u4zbjrvb] {
    border-color: var(--app-accent, #4f7cff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent, #4f7cff) 16%, transparent);
}

.chat-composer-input[b-n9u4zbjrvb] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--app-text, inherit);
    /* 16px — чтобы iOS не зумил поле при фокусе */
    font-size: 16px;
    line-height: 1.45;
    font-family: inherit;
    padding: 8px 0;
    margin: 0;
    outline: none;
    resize: none;
    overflow-y: auto;
    max-height: 160px;
}

.chat-composer-input--fixed[b-n9u4zbjrvb] {
    height: 40px !important;
    max-height: 40px;
}

.chat-composer-input[b-n9u4zbjrvb]::placeholder {
    color: var(--app-muted, #98a2b0);
}

.chat-composer-input:disabled[b-n9u4zbjrvb] {
    color: var(--app-muted, #98a2b0);
}

.chat-composer-btn[b-n9u4zbjrvb] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, opacity .15s ease, transform .1s ease, filter .15s ease;
}

/* Отправить — акцентная круглая кнопка с мягкой тенью. */
.chat-composer-send[b-n9u4zbjrvb] {
    background: var(--app-accent, #4f7cff);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--app-accent, #4f7cff) 24%, transparent);
}

.chat-composer-send:hover:not(:disabled)[b-n9u4zbjrvb] {
    filter: brightness(1.07);
}

.chat-composer-send:active:not(:disabled)[b-n9u4zbjrvb] {
    transform: scale(.94);
}

.chat-composer-send:disabled[b-n9u4zbjrvb] {
    background: var(--app-hover, #e9ecf1);
    color: var(--app-muted, #98a2b0);
    box-shadow: none;
    cursor: default;
}

/* Стоп — контрастная кнопка (инверсия surface/text), заметна на фоне «отправить». */
.chat-composer-stop[b-n9u4zbjrvb] {
    background: var(--app-text, #111827);
    color: var(--app-surface, #fff);
}

.chat-composer-stop:hover[b-n9u4zbjrvb] {
    opacity: .85;
}

.chat-composer-stop:active[b-n9u4zbjrvb] {
    transform: scale(.94);
}

/* Микрофон (надиктовка) — нейтральная кнопка; во время прослушивания краснеет и пульсирует. */
.chat-composer-mic[b-n9u4zbjrvb] {
    background: transparent;
    color: var(--app-muted, #98a2b0);
}

.chat-composer-mic:hover:not(:disabled)[b-n9u4zbjrvb] {
    background: var(--app-hover, #e9ecf1);
    color: var(--app-text, #111827);
}

.chat-composer-mic:active:not(:disabled)[b-n9u4zbjrvb] {
    transform: scale(.94);
}

.chat-composer-mic:disabled[b-n9u4zbjrvb] {
    opacity: .5;
    cursor: default;
}

.chat-composer-mic.is-listening[b-n9u4zbjrvb] {
    background: rgba(211, 47, 47, .12);
    color: #d32f2f;
    animation: chat-composer-mic-pulse-b-n9u4zbjrvb 1.2s ease-in-out infinite;
}

@keyframes chat-composer-mic-pulse-b-n9u4zbjrvb {
    0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, .35); }
    50% { box-shadow: 0 0 0 8px rgba(211, 47, 47, 0); }
}

/* Ошибка распознавания («доступ к микрофону запрещён» и т.п.) — строкой над композером. */
.chat-composer-voice-error[b-n9u4zbjrvb] {
    font-size: .8rem;
    color: #c62828;
    margin: 0 4px 4px;
}
/* /Shared/Comments/CommentsChatPanel.razor.rz.scp.css */
/* Чат комментариев — редизайн из Claude Design, ре-токенизированный под тему приложения.
   Два корня: .cc-list (скроллится) и .cc-composer-wrap (закреплён). Оба — прямые
   flex-дети flush-body BottomSheet. Цвета только через --app-* → светлая/тёмная. */

/* ── Лента ── */
.cc-list[b-iu6gdr8k02] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem 0.5rem 0.75rem;
    overscroll-behavior: contain;
}

.cc-rows[b-iu6gdr8k02] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cc-row[b-iu6gdr8k02] {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: transparent;
    transition: background 0.18s ease;
}

.cc-row:hover[b-iu6gdr8k02] {
    background: var(--app-hover);
}

.cc-row--flash[b-iu6gdr8k02],
.cc-row--flash:hover[b-iu6gdr8k02] {
    background: var(--app-accent-soft);
}

.cc-avatar-col[b-iu6gdr8k02] {
    flex: 0 0 38px;
    width: 38px;
    display: flex;
    justify-content: center;
}

.cc-avatar[b-iu6gdr8k02] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

.cc-body-col[b-iu6gdr8k02] {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.cc-head[b-iu6gdr8k02] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.cc-author[b-iu6gdr8k02] {
    font-size: 14px;
    font-weight: 600;
    color: var(--app-text);
}

.cc-you[b-iu6gdr8k02] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--app-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    background: var(--app-accent-soft);
    border-radius: 5px;
}

.cc-ai-badge[b-iu6gdr8k02] {
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    background: linear-gradient(135deg, #6d5ef2, #9a5ef2);
    border-radius: 5px;
}

.cc-time[b-iu6gdr8k02] {
    font-size: 12px;
    color: var(--app-muted);
}

.cc-quote[b-iu6gdr8k02] {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0 0 7px;
    padding: 6px 10px;
    border: none;
    border-left: 2px solid var(--app-accent);
    border-radius: 0 8px 8px 0;
    background: var(--app-accent-soft);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cc-quote:hover[b-iu6gdr8k02] {
    background: color-mix(in srgb, var(--app-accent) 18%, transparent);
}

.cc-quote-author[b-iu6gdr8k02] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--app-accent);
    margin-bottom: 1px;
}

.cc-quote-text[b-iu6gdr8k02] {
    display: block;
    font-size: 12.5px;
    color: var(--app-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-text[b-iu6gdr8k02] {
    font-size: 14px;
    line-height: 1.55;
    color: var(--app-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cc-media[b-iu6gdr8k02] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cc-thumb-link[b-iu6gdr8k02] {
    display: inline-flex;
    border-radius: 10px;
    overflow: hidden;
}

.cc-thumb[b-iu6gdr8k02] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--app-border);
    border-radius: 10px;
}

.cc-file[b-iu6gdr8k02] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    color: var(--app-text);
    text-decoration: none;
}

.cc-file:hover[b-iu6gdr8k02] {
    border-color: var(--app-accent);
}

.cc-file-icon[b-iu6gdr8k02] {
    display: inline-flex;
    color: var(--app-muted);
}

.cc-file-name[b-iu6gdr8k02] {
    font-size: 12.5px;
    color: var(--app-text);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-file-size[b-iu6gdr8k02] {
    font-size: 11.5px;
    color: var(--app-muted);
    white-space: nowrap;
}

/* ── Ховер-действия строки ── */
.cc-actions[b-iu6gdr8k02] {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.cc-row:hover .cc-actions[b-iu6gdr8k02],
.cc-row:focus-within .cc-actions[b-iu6gdr8k02] {
    opacity: 1;
}

.cc-act[b-iu6gdr8k02] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: var(--app-hover-strong);
    color: var(--app-text-secondary);
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

.cc-act:hover[b-iu6gdr8k02] {
    background: color-mix(in srgb, var(--app-text) 16%, transparent);
    color: var(--app-text);
}

.cc-act--danger:hover[b-iu6gdr8k02] {
    background: color-mix(in srgb, #ef5a7a 20%, transparent);
    color: #ef5a7a;
}

/* Тач-устройства: hover нет — показываем действия постоянно и резервируем место справа. */
@media (hover: none) {
    .cc-actions[b-iu6gdr8k02] { opacity: 1; }
    .cc-row[b-iu6gdr8k02] { padding-right: 74px; }
}

/* ── Пустое состояние ── */
.cc-empty[b-iu6gdr8k02] {
    min-height: 240px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.cc-empty-icon[b-iu6gdr8k02] {
    width: 66px;
    height: 66px;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    margin-bottom: 16px;
}

.cc-empty-title[b-iu6gdr8k02] {
    font-size: 16px;
    font-weight: 600;
    color: var(--app-text);
    margin-bottom: 7px;
}

.cc-empty-text[b-iu6gdr8k02] {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--app-muted);
    max-width: 330px;
}

/* Два коротких пункта «зачем это нужно» — списком, выровненным по левому краю:
   так они читаются как подсказка, а не как продолжение абзаца. */
.cc-empty-list[b-iu6gdr8k02] {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 330px;
    text-align: left;
}

.cc-empty-list li[b-iu6gdr8k02] {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--app-text-secondary);
}

.cc-empty-list li[b-iu6gdr8k02]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--app-accent);
}

/* ── Загрузка / ошибка ── */
.cc-skeleton[b-iu6gdr8k02] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 10px;
}

.cc-skeleton-row[b-iu6gdr8k02] {
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--app-hover) 25%, var(--app-hover-strong) 37%, var(--app-hover) 63%);
    background-size: 400% 100%;
    animation: cc-shimmer-b-iu6gdr8k02 1.4s ease infinite;
}

.cc-skeleton-row--short[b-iu6gdr8k02] { width: 60%; }

@keyframes cc-shimmer-b-iu6gdr8k02 {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.cc-error[b-iu6gdr8k02] {
    margin: 12px 6px;
    padding: 12px 14px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface-alt);
}

.cc-error-title[b-iu6gdr8k02] { font-size: 14px; font-weight: 600; color: var(--app-text); margin-bottom: 4px; }
.cc-error-text[b-iu6gdr8k02] { font-size: 12.5px; color: var(--app-muted); }

.cc-error-retry[b-iu6gdr8k02] {
    margin-top: 10px;
    padding: 6px 12px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: transparent;
    color: var(--app-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cc-error-retry:hover[b-iu6gdr8k02] { background: var(--app-hover); }

/* ── Композер ── */
.cc-composer-wrap[b-iu6gdr8k02] {
    position: relative;
    flex: 0 0 auto;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--app-border);
}

.cc-undo[b-iu6gdr8k02] {
    position: absolute;
    left: 50%;
    top: -14px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px 9px 16px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
    z-index: 6;
    animation: cc-toast-in-b-iu6gdr8k02 0.22s ease both;
}

.cc-undo-text[b-iu6gdr8k02] { font-size: 13px; color: var(--app-text); white-space: nowrap; }

.cc-undo-btn[b-iu6gdr8k02] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cc-undo-btn:hover[b-iu6gdr8k02] { background: color-mix(in srgb, var(--app-accent) 24%, transparent); }

@keyframes cc-toast-in-b-iu6gdr8k02 {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.cc-submit-error[b-iu6gdr8k02] {
    margin-bottom: 9px;
    padding: 8px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, #ef5a7a 12%, transparent);
    border: 1px solid color-mix(in srgb, #ef5a7a 32%, transparent);
    color: #d23a5e;
    font-size: 13px;
}

.cc-reply-banner[b-iu6gdr8k02] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 9px;
    padding: 8px 12px;
    background: var(--app-accent-soft);
    border-left: 2px solid var(--app-accent);
    border-radius: 0 8px 8px 0;
}

.cc-reply-icon[b-iu6gdr8k02] { display: inline-flex; color: var(--app-accent); margin-top: 1px; flex: 0 0 auto; }

.cc-reply-body[b-iu6gdr8k02] { flex: 1; min-width: 0; }

.cc-reply-name[b-iu6gdr8k02] { display: block; font-size: 12.5px; color: var(--app-text-secondary); }
.cc-reply-name b[b-iu6gdr8k02] { color: var(--app-text); }

.cc-reply-text[b-iu6gdr8k02] {
    display: block;
    font-size: 12px;
    color: var(--app-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-reply-cancel[b-iu6gdr8k02] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
    flex: 0 0 auto;
}

.cc-reply-cancel:hover[b-iu6gdr8k02] { background: var(--app-hover-strong); color: var(--app-text); }

.cc-inline-error[b-iu6gdr8k02] {
    margin-bottom: 9px;
    font-size: 12.5px;
    color: #d23a5e;
}

.cc-student[b-iu6gdr8k02] {
    max-width: 200px;
    margin-bottom: 9px;
    padding: 6px 8px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 12.5px;
}

/* Поле ввода — тот же вид, что у композера «ИИ-помощника» (ChatComposer):
   пилюля с текстом и круглой акцентной кнопкой отправки справа. */
.cc-box[b-iu6gdr8k02] {
    display: flex;
    /* flex-end — кнопка держится внизу, когда поле вырастает в несколько строк. */
    align-items: flex-end;
    gap: 8px;
    border: 1.5px solid var(--app-border);
    border-radius: 18px;
    background: var(--app-surface-alt);
    padding: 6px 7px 6px 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cc-box--focus[b-iu6gdr8k02] {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.cc-input[b-iu6gdr8k02] {
    flex: 1;
    min-width: 0;
    max-height: 160px;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: var(--app-text);
    /* 16px — чтобы iOS не зумил поле при фокусе */
    font-size: 16px;
    line-height: 1.45;
    font-family: inherit;
    padding: 8px 0;
    margin: 0;
    display: block;
    overflow-y: auto;
}

.cc-input[b-iu6gdr8k02]::placeholder { color: var(--app-muted); }

.cc-send[b-iu6gdr8k02] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--app-accent);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--app-accent) 24%, transparent);
    transition: filter 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

.cc-send:hover:not(:disabled)[b-iu6gdr8k02] { filter: brightness(1.07); }
.cc-send:active:not(:disabled)[b-iu6gdr8k02] { transform: scale(0.94); }

.cc-send:disabled[b-iu6gdr8k02] {
    background: var(--app-hover);
    color: var(--app-muted);
    box-shadow: none;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .cc-row[b-iu6gdr8k02],
    .cc-quote[b-iu6gdr8k02],
    .cc-act[b-iu6gdr8k02],
    .cc-send[b-iu6gdr8k02],
    .cc-skeleton-row[b-iu6gdr8k02],
    .cc-undo[b-iu6gdr8k02] { transition: none; animation: none; }
}
/* /Shared/CommentsSummary.razor.rz.scp.css */
.comments-summary[b-6zv01nutvt] {
    max-height: 260px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.comments-summary__content[b-6zv01nutvt] {
    overflow-y: auto;
    max-height: 200px;
    padding-right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comments-summary__item[b-6zv01nutvt] {
    background-color: var(--app-surface-alt, #f9fafb);
    border-radius: var(--radius-sm, 8px);
    padding: 0.75rem;
    border: 1px solid var(--app-border, #e8e8e8);
}

.comments-summary__body[b-6zv01nutvt] {
    white-space: pre-wrap;
    font-size: 0.9rem;
    color: var(--app-text, #1c1c1c);
}

.comments-summary__attachments[b-6zv01nutvt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.comments-summary__thumb-link[b-6zv01nutvt],
.comments-summary__file-link[b-6zv01nutvt] {
    text-decoration: none;
}

.comments-summary__thumb[b-6zv01nutvt] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 0.35rem;
    border: 1px solid var(--app-border, #e8e8e8);
}

.comments-summary__loading .placeholder[b-6zv01nutvt] {
    min-height: 0.8rem;
}

.comments-summary__empty[b-6zv01nutvt] {
    padding: 1.5rem 0;
    text-align: center;
}

@media (max-width: 575.98px) {
    .comments-summary[b-6zv01nutvt] {
        max-height: none;
    }

    .comments-summary__content[b-6zv01nutvt] {
        max-height: none;
    }
}
/* /Shared/MediaFolderGrid.razor.rz.scp.css */
.media-card[b-lferaf9je6] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: var(--app-surface, #fff);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.media-folders-section[b-lferaf9je6],
.media-files-section[b-lferaf9je6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    grid-column: 1 / -1;
}

.media-card:hover[b-lferaf9je6] {
    border-color: rgba(91, 87, 214, 0.35);
    box-shadow: 0 10px 24px rgba(91, 87, 214, 0.18);
}

.media-card.selectable[b-lferaf9je6] {
    cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

.media-card.selected[b-lferaf9je6] {
    border-color: rgba(91, 87, 214, 0.6);
    box-shadow: 0 0 0 2px rgba(91, 87, 214, 0.18), 0 14px 28px rgba(91, 87, 214, 0.2);
}

.media-card.disabled[b-lferaf9je6] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.media-card.disabled .media-card-checkbox[b-lferaf9je6] {
    pointer-events: auto;
    cursor: not-allowed;
}

.media-card-preview[b-lferaf9je6] {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 0.6rem;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-card-preview--video[b-lferaf9je6] {
    background: rgba(15, 23, 42, 0.85);
}

.media-card-preview--video .media-card-video[b-lferaf9je6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.media-card-preview--doc[b-lferaf9je6] {
    background: linear-gradient(150deg, rgba(226, 232, 240, 0.6), rgba(148, 163, 184, 0.35));
}

.media-card-preview--doc .media-card-pdf[b-lferaf9je6] {
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    background: transparent;
}

.media-card-video-placeholder[b-lferaf9je6] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.65));
    color: rgba(226, 232, 240, 0.85);
    font-size: 1.6rem;
}

.media-card-video-placeholder-icon[b-lferaf9je6] {
    filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.4));
}

.media-card-play-button[b-lferaf9je6] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    border: 0;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    z-index: 5;
}

.media-card-play-button:hover[b-lferaf9je6],
.media-card-play-button:focus-visible[b-lferaf9je6] {
    background: rgba(91, 87, 214, 0.82);
    box-shadow: 0 16px 32px rgba(91, 87, 214, 0.28);
    transform: translate(-50%, -50%) scale(1.04);
    color: #f8fafc;
}

.media-card-play-button:focus-visible[b-lferaf9je6] {
    outline: 2px solid rgba(191, 219, 254, 0.85);
    outline-offset: 2px;
}

.media-card-play-icon[b-lferaf9je6] {
    font-size: 1.2rem;
    line-height: 1;
    margin-left: 0.1rem;
}

.media-card-thumb[b-lferaf9je6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.media-card-preview video[b-lferaf9je6],
.media-card-preview audio[b-lferaf9je6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-card-placeholder[b-lferaf9je6] {
    font-size: 0.72rem;
    padding: 0.4rem 0.6rem;
    text-align: center;
}

/* Clickable image/PDF preview wrapper */
.media-card-thumb-wrapper[b-lferaf9je6],
.media-card-pdf-wrapper[b-lferaf9je6] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-card-thumb-wrapper--clickable[b-lferaf9je6] {
    cursor: pointer;
}

.media-card-preview-hint[b-lferaf9je6] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
    font-size: 0.75rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.media-card-thumb-wrapper--clickable:hover .media-card-preview-hint[b-lferaf9je6] {
    opacity: 1;
}

.media-card-body[b-lferaf9je6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
}

.media-card-title[b-lferaf9je6] {
    font-size: 0.82rem;
}

.media-card-meta[b-lferaf9je6] {
    font-size: 0.72rem;
}

.media-folder-rename-input[b-lferaf9je6] {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

.media-card-footer[b-lferaf9je6] {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.media-card-checkbox[b-lferaf9je6] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.35rem;
    background: var(--app-surface, #fff);
    border: 1px solid rgba(15, 23, 42, 0.2);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
    z-index: 7;
    accent-color: var(--app-accent, #5b57d6);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.media-card-menu-button[b-lferaf9je6] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    z-index: 7;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.media-card-menu-button:hover[b-lferaf9je6],
.media-card-menu-button:focus-visible[b-lferaf9je6] {
    background: rgba(91, 87, 214, 0.08);
    border-color: rgba(91, 87, 214, 0.5);
    color: #5b57d6;
    box-shadow: 0 10px 22px rgba(91, 87, 214, 0.22);
}

.media-card-menu-button:focus-visible[b-lferaf9je6] {
    outline: 2px solid rgba(191, 219, 254, 0.85);
    outline-offset: 2px;
}

.media-card-checkbox:focus-visible[b-lferaf9je6] {
    outline: 2px solid var(--app-accent, #5b57d6);
    outline-offset: 2px;
}

.media-card.selected .media-card-checkbox[b-lferaf9je6] {
    border-color: var(--app-accent, #5b57d6);
}

.media-card-checkbox:checked[b-lferaf9je6] {
    background-color: var(--app-accent, #5b57d6);
    border-color: var(--app-accent, #5b57d6);
    box-shadow: 0 0 0 2px rgba(91, 87, 214, 0.25), 0 6px 16px rgba(91, 87, 214, 0.35);
    color: #fff;
}

.media-card-overlay[b-lferaf9je6] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    z-index: 5;
}

.folder-card[b-lferaf9je6] {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

.folder-preview[b-lferaf9je6] {
    background: rgba(91, 87, 214, 0.1);
    color: rgba(91, 87, 214, 0.92);
    aspect-ratio: 3 / 1;
}

.folder-icon[b-lferaf9je6] {
    font-size: 2rem;
    line-height: 1;
}

.folder-card .media-card-meta[b-lferaf9je6] {
    font-size: 0.75rem;
}

.folder-card.drop-target[b-lferaf9je6] {
    outline: 2px dashed var(--app-accent, #5b57d6);
    outline-offset: 2px;
    background: rgba(91, 87, 214, 0.08);
}

.media-card.dragging[b-lferaf9je6] {
    opacity: 0.6;
}

:global(.media-touch-drag-preview)[b-lferaf9je6] {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    padding: 0.45rem 0.75rem;
    border-radius: 0.6rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.35);
    font-size: 0.85rem;
    line-height: 1.25;
    font-weight: 600;
    max-width: min(240px, 90vw);
    transform: translate3d(-9999px, -9999px, 0);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (max-width: 768px) {
    .media-card[b-lferaf9je6] {
        padding: 0.5rem;
        gap: 0.4rem;
    }

    .media-card-body[b-lferaf9je6] {
        font-size: 0.75rem;
    }

    .media-card-title[b-lferaf9je6] {
        font-size: 0.8rem;
    }

    .media-card-meta[b-lferaf9je6] {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .media-card[b-lferaf9je6] {
        padding: 0.45rem;
    }
}
/* /Shared/MediaLibraryBrowser.razor.rz.scp.css */
.media-library-browser[b-4aljnnqb75] {
    position: relative;
    display: flex;
    height: calc(100dvh - var(--app-header-height, 0px));
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    transition: outline-color 0.2s ease-in-out, outline-width 0.2s ease-in-out;
    touch-action: pan-y;
    --media-selection-toolbar-gap: 0.75rem;
}

.media-library-browser.has-selection[b-4aljnnqb75] {
    --media-selection-toolbar-gap: 1rem;
}

.media-library-browser.drag-active[b-4aljnnqb75] {
    outline: 2px dashed var(--app-accent, #5b57d6);
    outline-offset: 4px;
}

.media-library-dropzone-overlay[b-4aljnnqb75] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    z-index: 40;
    pointer-events: none;
    border-radius: 0.75rem;
}

.media-library-header[b-4aljnnqb75] {
    position: relative;
    z-index: 30;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.media-library-header__inner[b-4aljnnqb75] {
    width: 100%;
    padding: 0.85rem clamp(1rem, 3vw, 1.5rem) 0.75rem;
    display: flex;
    flex-direction: column;
    gap: var(--media-selection-toolbar-gap);
}

.media-toolbar-icon-button[b-4aljnnqb75] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

.media-toolbar-icon[b-4aljnnqb75] {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.media-library-surface[b-4aljnnqb75] {
    position: relative;
    flex: 1;
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.media-library-surface__inner[b-4aljnnqb75] {
    flex: 1;
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding: 0 clamp(1rem, 3vw, 1.5rem) 1.5rem;
}

.media-library-scroll[b-4aljnnqb75] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-bottom: 2rem;
}

.media-library-grid[b-4aljnnqb75] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.media-context-menu-backdrop[b-4aljnnqb75] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1000;
}

.media-context-menu[b-4aljnnqb75] {
    position: fixed;
    min-width: 200px;
    max-width: 260px;
    background: var(--app-surface, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 0.5rem 0;
    z-index: 1010;
}

.media-context-menu-item[b-4aljnnqb75] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: transparent;
    border: 0;
    text-align: left;
    font-size: 0.9rem;
    color: inherit;
}

.media-context-menu-item:hover[b-4aljnnqb75],
.media-context-menu-item:focus-visible[b-4aljnnqb75] {
    background: rgba(91, 87, 214, 0.08);
    color: inherit;
}

.media-context-menu-item--danger[b-4aljnnqb75] {
    color: #dc2626;
}

.media-context-menu-item--danger:hover[b-4aljnnqb75],
.media-context-menu-item--danger:focus-visible[b-4aljnnqb75] {
    background: rgba(248, 113, 113, 0.1);
    color: #b91c1c;
}

.media-move-dialog-backdrop[b-4aljnnqb75] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
}

.media-move-dialog[b-4aljnnqb75] {
    position: fixed;
    z-index: 1110;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(920px, 94vw);
    max-height: 82vh;
    background: var(--app-surface, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.media-move-dialog__header[b-4aljnnqb75] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.media-move-dialog__breadcrumbs[b-4aljnnqb75] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    color: #475569;
    font-size: 0.95rem;
}

.media-move-dialog__crumb[b-4aljnnqb75] {
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.media-move-dialog__crumb.active[b-4aljnnqb75] {
    font-weight: 600;
    text-decoration: none;
}

.media-move-dialog__crumb-separator[b-4aljnnqb75] {
    opacity: 0.6;
}

.media-move-dialog__content[b-4aljnnqb75] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
}

.media-move-dialog__nav[b-4aljnnqb75] {
    display: flex;
    justify-content: space-between;
}

.media-move-dialog__list[b-4aljnnqb75] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 60vh;
    overflow: auto;
}

.media-move-dialog__item[b-4aljnnqb75] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.65rem;
    background: rgba(15, 23, 42, 0.02);
}

.media-move-dialog__folder[b-4aljnnqb75] {
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    text-align: left;
}

.media-move-dialog__folder:hover .media-move-dialog__folder-name[b-4aljnnqb75],
.media-move-dialog__folder:focus-visible .media-move-dialog__folder-name[b-4aljnnqb75] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.media-move-dialog__folder-icon[b-4aljnnqb75] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(111, 105, 221, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5b57d6;
}

.media-move-dialog__folder-name[b-4aljnnqb75] {
    font-weight: 600;
    color: #0f172a;
}

.media-move-dialog__folder-meta[b-4aljnnqb75] {
    font-size: 0.85rem;
}

@media (max-width: 992px) {
    .media-library-header__inner[b-4aljnnqb75] {
        padding: 0.7rem clamp(0.75rem, 4vw, 1.25rem) 0.65rem;
    }

    .media-library-surface__inner[b-4aljnnqb75] {
        gap: 0.85rem;
        padding: 0 clamp(0.75rem, 4vw, 1.25rem) 1.25rem;
    }

    .media-library-grid[b-4aljnnqb75] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.65rem;
    }
}

@media (max-width: 768px) {
    .media-library-header__inner[b-4aljnnqb75] {
        padding-top: 0.5rem;
    }

    .media-library-surface__inner[b-4aljnnqb75] {
        padding-inline: clamp(0.75rem, 4vw, 1.1rem);
        padding-bottom: 1rem;
    }

    .media-library-grid[b-4aljnnqb75] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5rem;
    }

    .media-library-scroll[b-4aljnnqb75] {
        padding-bottom: 3rem;
    }
}

@media (max-width: 480px) {
    .media-library-header__inner[b-4aljnnqb75] {
        padding-top: 0.35rem;
        padding-bottom: 0.5rem;
    }

    .media-library-surface__inner[b-4aljnnqb75] {
        padding-bottom: 6rem;
        padding-inline: clamp(0.5rem, 6vw, 0.85rem);
    }

    .media-library-scroll[b-4aljnnqb75] {
        padding-bottom: 4rem;
    }
}
/* /Shared/MediaLibraryToolbar.razor.rz.scp.css */
.media-library-toolbar-wrapper[b-nf9lcxxzds] {
    width: 100%;
    touch-action: pan-y;
}

.media-selection-toolbar-wrapper[b-nf9lcxxzds] {
    display: flex;
    flex-direction: column;
}

.media-selection-toolbar[b-nf9lcxxzds] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(91, 87, 214, 0.08);
    border: 1px solid rgba(91, 87, 214, 0.2);
    min-height: 3.125rem;
}

.media-selection-toolbar .btn[b-nf9lcxxzds] {
    flex-shrink: 0;
}

.media-selection-toolbar--empty[b-nf9lcxxzds] {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.35);
    color: rgba(71, 85, 105, 0.85);
}

.media-selection-toolbar--empty .btn[b-nf9lcxxzds] {
    opacity: 0.75;
}

.media-selection-toolbar--empty .btn:disabled[b-nf9lcxxzds] {
    opacity: 0.55;
}

.media-library-toolbar[b-nf9lcxxzds] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 1rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.media-toolbar-breadcrumb-row[b-nf9lcxxzds] {
    min-width: 0;
}

.media-toolbar-actions-row[b-nf9lcxxzds] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.media-toolbar-meta-row[b-nf9lcxxzds] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.media-toolbar-action-cluster[b-nf9lcxxzds] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
    margin-left: auto;
}

.media-toolbar-controls-row[b-nf9lcxxzds] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
}

.media-toolbar-toggle-group[b-nf9lcxxzds] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-left: 0.875rem;
    border-left: 1px solid rgba(203, 213, 225, 0.9);
}

.media-toolbar-icon-button[b-nf9lcxxzds] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

.media-toolbar-icon-button:disabled[b-nf9lcxxzds] {
    opacity: 0.65;
}

.media-toolbar-icon[b-nf9lcxxzds] {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.media-library-breadcrumbs[b-nf9lcxxzds] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.media-library-breadcrumbs .breadcrumb-trail[b-nf9lcxxzds] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.media-library-breadcrumbs .breadcrumb-pill[b-nf9lcxxzds] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 0.8rem;
    line-height: 1.1;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

.media-library-breadcrumbs .breadcrumb-pill:not(.active)[b-nf9lcxxzds] {
    cursor: pointer;
}

.media-library-breadcrumbs .breadcrumb-pill.active[b-nf9lcxxzds] {
    border: 0;
    background: transparent;
    box-shadow: inset 0 -2px 0 rgba(91, 87, 214, 0.45);
}

.media-library-breadcrumbs .breadcrumb-pill-button[b-nf9lcxxzds] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

.media-library-breadcrumbs .breadcrumb-pill-button:hover[b-nf9lcxxzds],
.media-library-breadcrumbs .breadcrumb-pill-button:focus-visible[b-nf9lcxxzds] {
    text-decoration: none;
}

.media-library-breadcrumbs .breadcrumb-pill:not(.active):hover[b-nf9lcxxzds],
.media-library-breadcrumbs .breadcrumb-pill:not(.active):focus-within[b-nf9lcxxzds] {
    background: rgba(91, 87, 214, 0.08);
}

.media-library-breadcrumbs .breadcrumb-pill-label[b-nf9lcxxzds] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.media-library-breadcrumbs .breadcrumb-separator[b-nf9lcxxzds] {
    color: rgba(71, 85, 105, 0.65);
    font-size: 0.85rem;
    user-select: none;
    margin-inline: 0.1rem;
}

.media-library-breadcrumbs .breadcrumb-drop-target[b-nf9lcxxzds] {
    border-color: rgba(91, 87, 214, 0.8);
    background: rgba(91, 87, 214, 0.18);
    box-shadow: 0 0 0 2px rgba(91, 87, 214, 0.18);
    color: rgba(30, 41, 59, 0.95);
}

.media-toolbar-selection-label[b-nf9lcxxzds] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: min(20rem, 32vw);
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-toolbar-selection-label--idle[b-nf9lcxxzds] {
    background: rgba(148, 163, 184, 0.12);
}

.media-toolbar-selection-label--active[b-nf9lcxxzds] {
    background: rgba(91, 87, 214, 0.1);
}

.media-toolbar-status[b-nf9lcxxzds] {
    white-space: nowrap;
}

.media-toolbar-select-btn[b-nf9lcxxzds] {
    min-width: 6.5rem;
    padding-inline: 0.75rem;
}

@media (min-width: 992px) {
    .media-library-toolbar[b-nf9lcxxzds] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .media-toolbar-breadcrumb-row[b-nf9lcxxzds] {
        flex: 1 1 auto;
        max-width: 42%;
    }

    .media-toolbar-actions-row[b-nf9lcxxzds] {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 1rem;
    }

    .media-toolbar-meta-row[b-nf9lcxxzds] {
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .media-library-toolbar[b-nf9lcxxzds] {
        gap: 0.65rem;
        padding: 0.65rem 0.75rem;
        border-radius: 0.875rem;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    }

    .media-toolbar-actions-row[b-nf9lcxxzds] {
        justify-content: flex-start;
    }

    .media-toolbar-meta-row[b-nf9lcxxzds] {
        width: 100%;
    }

    .media-toolbar-action-cluster[b-nf9lcxxzds] {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .media-toolbar-controls-row[b-nf9lcxxzds] {
        width: 100%;
        justify-content: flex-start;
    }

    .media-toolbar-toggle-group[b-nf9lcxxzds] {
        margin-left: auto;
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 576px) {
    .media-toolbar-selection-label[b-nf9lcxxzds] {
        max-width: none;
        font-size: 0.8rem;
    }

    .media-toolbar-select-btn[b-nf9lcxxzds] {
        min-width: 5.5rem;
        padding-inline: 0.5rem;
    }
}
/* /Shared/MediaPreviewViewer.razor.rz.scp.css */
.media-preview-viewer-backdrop[b-0si2e1tdi2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: media-viewer-fade-in-b-0si2e1tdi2 0.2s ease;
}

/* On desktop, account for sidebar width */
@media (min-width: 992px) {
    .media-preview-viewer-backdrop[b-0si2e1tdi2] {
        left: var(--sidebar-width, 260px);
        width: calc(100vw - var(--sidebar-width, 260px));
    }
}

@keyframes media-viewer-fade-in-b-0si2e1tdi2 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.media-preview-viewer-container[b-0si2e1tdi2] {
    display: flex;
    flex-direction: column;
    max-width: 95vw;
    max-height: 95vh;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.media-preview-viewer-header[b-0si2e1tdi2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #2a2a2a;
    border-bottom: 1px solid #3a3a3a;
    flex-shrink: 0;
}

.media-preview-viewer-title[b-0si2e1tdi2] {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.media-preview-viewer-counter[b-0si2e1tdi2] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    white-space: nowrap;
}

.media-preview-viewer-actions[b-0si2e1tdi2] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.media-preview-viewer-btn[b-0si2e1tdi2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
}

.media-preview-viewer-btn:hover[b-0si2e1tdi2] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.media-preview-viewer-close:hover[b-0si2e1tdi2] {
    background: rgba(239, 68, 68, 0.5);
}

.media-preview-viewer-body[b-0si2e1tdi2] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    background: #1a1a1a;
    position: relative;
}

.media-preview-viewer-content[b-0si2e1tdi2] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    min-height: 0;
    height: 100%;
    width: 100%;
}

.media-preview-viewer-nav[b-0si2e1tdi2] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    z-index: 10;
}

.media-preview-viewer-nav:hover[b-0si2e1tdi2] {
    background: rgba(91, 87, 214, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.media-preview-viewer-nav--prev[b-0si2e1tdi2] {
    left: 1rem;
}

.media-preview-viewer-nav--next[b-0si2e1tdi2] {
    right: 1rem;
}

.media-preview-viewer-image[b-0si2e1tdi2] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.25rem;
}

.media-preview-viewer-pdf[b-0si2e1tdi2] {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .media-preview-viewer-backdrop[b-0si2e1tdi2] {
        padding: 0;
    }

    .media-preview-viewer-container[b-0si2e1tdi2] {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .media-preview-viewer-header[b-0si2e1tdi2] {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .media-preview-viewer-title[b-0si2e1tdi2] {
        font-size: 0.85rem;
    }

    .media-preview-viewer-counter[b-0si2e1tdi2] {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    .media-preview-viewer-btn[b-0si2e1tdi2] {
        width: 2rem;
        height: 2rem;
    }

    .media-preview-viewer-nav[b-0si2e1tdi2] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .media-preview-viewer-nav--prev[b-0si2e1tdi2] {
        left: 0.5rem;
    }

    .media-preview-viewer-nav--next[b-0si2e1tdi2] {
        right: 0.5rem;
    }
}
/* /Shared/MediaUploadList.razor.rz.scp.css */
.media-library-uploads[b-22et03ik2m] {
    max-height: 220px;
    overflow: auto;
}
/* /Shared/StarRating.razor.rz.scp.css */
.star-rating[b-0ydjuqm456] {
    --star-rating-back-color: #ddd;
    --star-rating-active-color: #f5a623;

    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: inherit;
}

.star-rating--disabled[b-0ydjuqm456] {
    cursor: default;
}

.star-rating__visual[b-0ydjuqm456] {
    position: relative;
    display: inline-block;
    color: var(--star-rating-back-color);
    pointer-events: none;
}

.star-rating__layer[b-0ydjuqm456] {
    display: inline-block;
    pointer-events: none;
}

.star-rating__layer--front[b-0ydjuqm456] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--star-rating-active-color);
}

.star-rating__controls[b-0ydjuqm456] {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 1;
}

.star-rating__control[b-0ydjuqm456] {
    flex: 1 1 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.star-rating__control:focus-visible[b-0ydjuqm456] {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.star-rating__control:disabled[b-0ydjuqm456] {
    cursor: default;
}
/* /Shared/StudentProfileModal.razor.rz.scp.css */
/* ==========================================================
   StudentProfileModal — dark-theme text-colour fix
   ----------------------------------------------------------
   Глобальное правило в app.css красит текст в var(--app-text):
     html.dark span, html.dark div, html.dark label,
     html.dark p, html.dark h1..h6, html.dark td, html.dark th, html.dark li
   Специфичность (0,1,2) перебивает Tailwind-утилиты цвета текста
   на этих элементах — (0,1,0). В итоге в тёмной теме приглушённый /
   вторичный / белый текст (лейблы, подсказки, «Телефон не указан»,
   инициалы аватара, счётчики) становился почти-белым и вся иерархия
   плоская. Цветные утилиты (emerald/red/indigo) выживают за счёт
   собственных !important-оверрайдов в app.css, нейтральные — нет.

   CSS-изоляция добавляет к этим селекторам [b-xxxxx] → специфичность
   (0,2,0), и они снова выигрывают у глобального правила. Значения
   через var(--app-*), поэтому в светлой теме поведение не меняется. */
.tw-text-app-muted[b-hc25zxjthc] {
    color: var(--app-muted);
}

.tw-text-app-text-secondary[b-hc25zxjthc] {
    color: var(--app-text-secondary);
}

/* Акцентный текст на span/label/p (возраст-пилюля, ссылка «изменить», «Изменить
   фото») — то же глобальное html.dark-правило красит его в --app-text. Возвращаем
   акцент; в светлой теме поведение не меняется (значение через var). */
.tw-text-app-accent[b-hc25zxjthc] {
    color: var(--app-accent);
}

.tw-text-white[b-hc25zxjthc] {
    color: #fff;
}
/* /Shared/SuggestionDiffViewer.razor.rz.scp.css */
/* Только ::deep-стили для сгенерированного markdown-HTML (нельзя инлайнить в Razor).
   Панели diff / diff-view / кнопки переведены на inline Tailwind. */

.sdv-markdown[b-d5os7g1i22]  h1,
.sdv-markdown[b-d5os7g1i22]  h2,
.sdv-markdown[b-d5os7g1i22]  h3,
.sdv-markdown[b-d5os7g1i22]  h4,
.sdv-markdown[b-d5os7g1i22]  h5 {
    margin-top: 0.75em;
    margin-bottom: 0.35em;
    font-weight: 600;
    line-height: 1.3;
}

.sdv-markdown[b-d5os7g1i22]  h1 { font-size: 1.25rem; }
.sdv-markdown[b-d5os7g1i22]  h2 { font-size: 1.1rem; }
.sdv-markdown[b-d5os7g1i22]  h3 { font-size: 1rem; }
.sdv-markdown[b-d5os7g1i22]  h4 { font-size: 0.925rem; }

.sdv-markdown[b-d5os7g1i22]  p {
    margin-bottom: 0.5em;
}

.sdv-markdown[b-d5os7g1i22]  ul,
.sdv-markdown[b-d5os7g1i22]  ol {
    margin-left: 1.25em;
    margin-bottom: 0.5em;
    padding-left: 0;
}

.sdv-markdown[b-d5os7g1i22]  ul { list-style-type: disc; }
.sdv-markdown[b-d5os7g1i22]  ol { list-style-type: decimal; }

.sdv-markdown[b-d5os7g1i22]  li {
    margin-bottom: 0.2em;
}

.sdv-markdown[b-d5os7g1i22]  blockquote {
    border-left: 3px solid var(--app-border);
    padding-left: 0.75em;
    margin: 0.5em 0;
    color: var(--app-text-secondary);
}

.sdv-markdown[b-d5os7g1i22]  code {
    background: var(--app-surface-alt);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.85em;
}

.sdv-markdown[b-d5os7g1i22]  table {
    border-collapse: collapse;
    margin: 0.5em 0;
    font-size: 0.85rem;
}

.sdv-markdown[b-d5os7g1i22]  th,
.sdv-markdown[b-d5os7g1i22]  td {
    border: 1px solid var(--app-border);
    padding: 4px 8px;
}

.sdv-markdown[b-d5os7g1i22]  th {
    background: var(--app-surface-alt);
    font-weight: 600;
}
/* /Shared/SuggestionReviewPanel.razor.rz.scp.css */
/* Стили вынесены в инлайновые theme-aware Tailwind-классы (.razor). */
/* /Shared/TaskAttemptStats.razor.rz.scp.css */
.task-stats-panel[b-m2e86h1f61] {
    padding: 10px;
}

.task-stats-empty[b-m2e86h1f61] {
    opacity: 0.5;
}

/* Summary card */
.task-stats-summary[b-m2e86h1f61] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 10px;
    background: var(--app-surface-alt, #f8f9fa);
    border-radius: 8px;
    padding: 8px 6px;
}

.task-stats-summary-item[b-m2e86h1f61] {
    flex: 1 1 0;
    min-width: 56px;
    text-align: center;
    position: relative;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    cursor: default;
}

.task-stats-summary-item:hover[b-m2e86h1f61] {
    background-color: var(--app-hover, rgba(0, 0, 0, 0.03));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.task-stats-value[b-m2e86h1f61] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.task-stats-label[b-m2e86h1f61] {
    font-size: 0.68rem;
    color: var(--app-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Sections */
.task-stats-section[b-m2e86h1f61] {
    margin-bottom: 8px;
    border: 1px solid var(--app-border, #dee2e6);
    border-radius: 8px;
    background: var(--app-surface, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease;
}

.task-stats-section:hover[b-m2e86h1f61] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.task-stats-section-header[b-m2e86h1f61] {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 10px;
    background: var(--app-surface-alt, #f8f9fa);
    border-bottom: 1px solid var(--app-border, #dee2e6);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--app-text, inherit);
}

/* Chart container — non-scaling approach */
.task-stats-chart[b-m2e86h1f61] {
    padding: 6px 10px;
}

.task-stats-chart-wrap[b-m2e86h1f61] {
    position: relative;
}

.task-stats-svg[b-m2e86h1f61] {
    width: 100%;
    height: 100px;
    display: block;
}

/* Контекст программы под сводными плитками: «В работе с … · всего попыток: N» */
.task-stats-context[b-m2e86h1f61] {
    font-size: 0.72rem;
    color: var(--app-muted, #6c757d);
    padding: 0 4px;
    margin: -4px 0 10px;
}

/* Подсказка «одно занятие за период — графики от двух» */
.task-stats-hint[b-m2e86h1f61] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--app-muted, #6c757d);
    background: var(--app-surface-alt, #f8f9fa);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

/* Подпись-разделитель внутри секции («По занятиям» / «Итого за период») */
.task-stats-chart-caption[b-m2e86h1f61] {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-muted, #6c757d);
    margin: 2px 0 4px;
}

/* Маркеры вех журнала программы на графике */
[b-m2e86h1f61] .task-stats-milestone-line {
    stroke-width: 1;
    stroke-dasharray: 2 3;
    opacity: 0.55;
}

/* Флажок вех — чисто визуальная метка: НЕ перехватывает мышь (pointer-events:
   none), текст вех показывается в едином попапе сессии (ChartTooltip) при
   наведении на вертикаль занятия. */
.task-stats-chart-wrap .task-stats-milestone-flag[b-m2e86h1f61] {
    position: absolute;
    top: -3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 4px;
    border: 1.5px solid var(--app-surface, #fff);
    transform: translateX(-50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Серия занятий подряд полностью без подсказок */
.task-stats-streak[b-m2e86h1f61] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--app-muted, #6c757d);
    background: var(--app-surface-alt, #f8f9fa);
    border-radius: 6px;
    padding: 3px 8px;
    margin-top: 8px;
}

.task-stats-streak i[b-m2e86h1f61] {
    color: #f59e0b;
}

.task-stats-streak strong[b-m2e86h1f61] {
    color: var(--app-text, #212529);
    font-variant-numeric: tabular-nums;
}

/* Y-axis labels — HTML, fixed pixel size, never scale */
.task-stats-y-label[b-m2e86h1f61] {
    position: absolute;
    left: 6px;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--app-muted, #6c757d);
    pointer-events: none;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    z-index: 1;
}

/* X-axis labels container */
.task-stats-x-labels[b-m2e86h1f61] {
    position: relative;
    height: 14px;
    margin-top: 2px;
}

/* X-axis labels — HTML, fixed pixel size, never scale */
.task-stats-x-label[b-m2e86h1f61] {
    position: absolute;
    top: 0;
    font-size: 9px;
    color: var(--app-muted, #6c757d);
    pointer-events: none;
    line-height: 1;
}

/* Dots — HTML, fixed pixel size, never scale */
.task-stats-html-dot[b-m2e86h1f61] {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1.5px solid var(--app-surface, #fff);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Instant hover labels for SVG elements */
[b-m2e86h1f61] .task-stats-hover-group {
    cursor: pointer;
}

[b-m2e86h1f61] .task-stats-x-hit-area {
    fill: transparent;
    pointer-events: all;
}

[b-m2e86h1f61] .task-stats-x-guide {
    stroke: rgba(108, 117, 125, 0.38);
    stroke-width: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    vector-effect: non-scaling-stroke;
}

[b-m2e86h1f61] .task-stats-hit-area {
    fill: transparent;
    stroke: none;
}

[b-m2e86h1f61] .task-stats-hover-group:hover .task-stats-x-guide {
    opacity: 1;
}

[b-m2e86h1f61] .task-stats-hover-group:hover .task-stats-bar-duration {
    opacity: 1;
    fill: #0ea5e9;
}


[b-m2e86h1f61] .task-stats-grid {
    stroke: var(--app-border, #dee2e6);
    stroke-width: 0.5;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

[b-m2e86h1f61] .task-stats-axis-label {
    font-size: 9px;
    fill: var(--app-muted, #6c757d);
    font-variant-numeric: tabular-nums;
}

[b-m2e86h1f61] .task-stats-line-score {
    fill: none;
    stroke: #4f7cff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

[b-m2e86h1f61] .task-stats-dot-score {
    fill: #4f7cff;
    stroke: #fff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

[b-m2e86h1f61] .task-stats-line-ai {
    fill: none;
    stroke: #8b5cf6;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

[b-m2e86h1f61] .task-stats-dot-ai {
    fill: #8b5cf6;
    stroke: #fff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

[b-m2e86h1f61] .task-stats-line-independence {
    fill: none;
    stroke: #10b981;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

[b-m2e86h1f61] .task-stats-dot-independence {
    fill: #10b981;
    stroke: #fff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

[b-m2e86h1f61] .task-stats-bar-duration {
    fill: #38bdf8;
    opacity: 0.85;
    rx: 3;
}

/* Сегменты 100%-стека «Пробы по занятиям» (SVG) — цвета как у HTML-легенды */
[b-m2e86h1f61] .task-stats-seg-independent {
    fill: #10b981;
}

[b-m2e86h1f61] .task-stats-seg-prompted {
    fill: #f59e0b;
}

[b-m2e86h1f61] .task-stats-seg-incorrect {
    fill: #ef4444;
}

[b-m2e86h1f61] .task-stats-seg-no-response {
    fill: #9ca3af;
}


/* Legend */
.task-stats-legend[b-m2e86h1f61] {
    display: flex;
    gap: 12px;
    font-size: 0.72rem;
    color: var(--app-muted, #6c757d);
    padding-top: 4px;
}

.task-stats-legend-item[b-m2e86h1f61] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.task-stats-legend-color[b-m2e86h1f61] {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.task-stats-legend-color.score[b-m2e86h1f61] {
    background: #4f7cff;
}

.task-stats-legend-color.ai[b-m2e86h1f61] {
    background: #8b5cf6;
}

/* Trial breakdown */
.task-stats-trial-bars[b-m2e86h1f61] {
    padding: 6px 10px;
}

.task-stats-stacked-bar[b-m2e86h1f61] {
    display: flex;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
    background: var(--app-surface-alt, #f1f3f5);
}

.task-stats-bar-seg[b-m2e86h1f61] {
    min-width: 3px;
    transition: opacity 0.15s ease, filter 0.15s ease;
    position: relative;
    cursor: default;
}

.task-stats-bar-seg:hover[b-m2e86h1f61] {
    opacity: 0.85;
    filter: brightness(1.1);
}

.task-stats-bar-seg.independent[b-m2e86h1f61] {
    background: #10b981;
}

.task-stats-bar-seg.prompted[b-m2e86h1f61] {
    background: #f59e0b;
}

.task-stats-bar-seg.incorrect[b-m2e86h1f61] {
    background: #ef4444;
}

.task-stats-bar-seg.no-response[b-m2e86h1f61] {
    background: #9ca3af;
}

.task-stats-trial-legend[b-m2e86h1f61] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.72rem;
    color: var(--app-muted, #6c757d);
}

.task-stats-legend-dot[b-m2e86h1f61] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.task-stats-legend-dot.independent[b-m2e86h1f61] {
    background: #10b981;
}

.task-stats-legend-dot.prompted[b-m2e86h1f61] {
    background: #f59e0b;
}

.task-stats-legend-dot.incorrect[b-m2e86h1f61] {
    background: #ef4444;
}

.task-stats-legend-dot.no-response[b-m2e86h1f61] {
    background: #9ca3af;
}

/* Mood */
.task-stats-mood-row[b-m2e86h1f61] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 12px 6px;
}

.task-stats-mood-dot[b-m2e86h1f61] {
    font-size: 1.1rem;
    line-height: 1;
    cursor: default;
    padding: 3px;
    border-radius: 6px;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.task-stats-mood-dot:hover[b-m2e86h1f61] {
    background-color: var(--app-hover, #f8f9fa);
    transform: scale(1.2);
}

.task-stats-mood-summary[b-m2e86h1f61] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px 10px 6px;
    font-size: 0.72rem;
}

.task-stats-mood-tag[b-m2e86h1f61] {
    background: var(--app-surface-alt, #f8f9fa);
    padding: 3px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.task-stats-mood-tag:hover[b-m2e86h1f61] {
    background: var(--app-border, #dee2e6);
}

/* Session fidelity */
.task-stats-fidelity[b-m2e86h1f61] {
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-stats-fidelity-row[b-m2e86h1f61] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.task-stats-fidelity-row:hover[b-m2e86h1f61] {
    background-color: var(--app-hover, #f8f9fa);
    padding-inline: 6px;
    margin-inline: -6px;
}

.task-stats-fidelity-label[b-m2e86h1f61] {
    font-size: 0.72rem;
    color: var(--app-muted, #6c757d);
    min-width: 120px;
    flex-shrink: 0;
}

.task-stats-fidelity-value[b-m2e86h1f61] {
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Custom tooltip via CSS */
.task-stats-has-tooltip[b-m2e86h1f61] {
    position: relative;
}

.task-stats-has-tooltip[b-m2e86h1f61]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--app-text, #212529);
    color: var(--app-surface, #fff);
    font-size: 0.7rem;
    font-weight: 400;
    padding: 4px 8px;
    border-radius: 5px;
    /* max-content до 240px, дальше перенос; pre-line — кластеры вех передают
       несколько строк через \n */
    white-space: pre-line;
    width: max-content;
    max-width: 240px;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    line-height: 1.3;
}

/* :focus — тултип открывается тапом на тач-экранах (элементы получают tabindex="0") */
.task-stats-has-tooltip:hover[b-m2e86h1f61]::after,
.task-stats-has-tooltip:focus[b-m2e86h1f61]::after,
.task-stats-has-tooltip:active[b-m2e86h1f61]::after {
    opacity: 1;
}

.task-stats-has-tooltip:focus[b-m2e86h1f61] {
    outline: none;
}
/* /Shared/TaskEditorModal.razor.rz.scp.css */
.task-editor-modal-backdrop[b-bvvehnnx4i] {
    animation: te-backdrop-in-b-bvvehnnx4i 0.35s ease;
}

/* Полноэкранная модалка «Просмотр задания» — спокойный полный лист без бортов и
   скруглений (фон задаётся в разметке: tw-bg-app-surface / dark:tw-bg-app-bg). */
.te-modal-content[b-bvvehnnx4i] {
    animation: te-modal-in-b-bvvehnnx4i 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Плавное появление/закрытие модалки — мягкий въезд снизу (не «выскакивает»).
   Exit-класс (.te-content-closing/.te-backdrop-closing) вешается кодом за ~160мс до
   размонтирования — см. Close() в code-behind. */
@keyframes te-modal-in-b-bvvehnnx4i {
    from { opacity: 0; transform: translateY(22px) scale(0.965); }
}

@keyframes te-modal-out-b-bvvehnnx4i {
    to { opacity: 0; transform: translateY(8px) scale(0.985); }
}

.te-content-closing[b-bvvehnnx4i] {
    animation: te-modal-out-b-bvvehnnx4i 0.16s ease forwards !important;
}

@keyframes te-backdrop-in-b-bvvehnnx4i {
    from { opacity: 0; }
}

@keyframes te-backdrop-out-b-bvvehnnx4i {
    to { opacity: 0; }
}

.te-backdrop-closing[b-bvvehnnx4i] {
    animation: te-backdrop-out-b-bvvehnnx4i 0.16s ease forwards !important;
}

@media (prefers-reduced-motion: reduce) {
    .te-modal-content[b-bvvehnnx4i],
    .te-content-closing[b-bvvehnnx4i],
    .task-editor-modal-backdrop[b-bvvehnnx4i],
    .te-backdrop-closing[b-bvvehnnx4i] {
        animation: none !important;
    }
}

.task-editor-thumb[b-bvvehnnx4i] {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* ─── Шапка / футер: тонкие волоски-разделители только для «липких» полос,
   больше никаких рамок. ─── */
.te-header[b-bvvehnnx4i] {
    border-bottom: 1px solid var(--app-border, #e5e7eb);
}

/* Внутренняя колонка шапки — та же ширина и боковые отступы, что и у колонки
   контента (.task-editor-content), чтобы «Назад», заголовок и крестик стояли
   ровно по краям текста задания, а не по краям окна. Волосок-разделитель
   .te-header при этом остаётся во всю ширину. */
.te-header-inner[b-bvvehnnx4i] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.te-footer[b-bvvehnnx4i] {
    border-top: 1px solid var(--app-border, #e5e7eb);
    background: var(--app-surface, #fff);
}

.te-icon-btn[b-bvvehnnx4i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: var(--app-muted, #8c8c8c);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.te-icon-btn:hover[b-bvvehnnx4i] {
    background: var(--app-hover, rgba(0, 0, 0, 0.05));
    color: var(--app-text, #1f1f1f);
}

.te-icon-btn:disabled[b-bvvehnnx4i] {
    opacity: 0.5;
    cursor: default;
}

/* «← Назад» слева в шапке — ещё один привычный способ закрыть (вместе с крестиком
   и свайпом вниз на мобиле). На мобиле подпись прячется, остаётся стрелка. */
.te-back-btn[b-bvvehnnx4i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: var(--app-muted, #8c8c8c);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.te-back-btn:hover[b-bvvehnnx4i] {
    background: var(--app-hover, rgba(0, 0, 0, 0.05));
    color: var(--app-accent, #5b57d6);
}

.te-back-btn:disabled[b-bvvehnnx4i] {
    opacity: 0.5;
    cursor: default;
}

/* Мобильный «грабер» для свайпа-закрытия — на десктопе скрыт. */
.te-drag-handle[b-bvvehnnx4i] {
    display: none;
}

/* ─── Тело модалки — плавная прокрутка на мобиле, без «прыжков» ширины при
   переключении вкладок (резерв под скроллбар). ─── */
.te-body[b-bvvehnnx4i] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Центрированная колонка контента — воздух по краям, спокойная ширина чтения. */
.task-editor-content[b-bvvehnnx4i] {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 2.5rem;
}

/* Вертикальный ритм между смысловыми блоками (описание / план / материалы /
   предложения) — вместо рамок-карточек просто воздух. */
.te-block[b-bvvehnnx4i] {
    margin-bottom: 2.25rem;
}

.te-block:last-child[b-bvvehnnx4i] {
    margin-bottom: 0;
}

/* Лид-строка сути задания — лёгкая, приглушённая, без плашки. */
.te-lead[b-bvvehnnx4i] {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* «Прикрепить файл» — вторичное, редкое действие: компактная круглая иконка-скрепка
   (акцент отдан кнопке «Создать материалы»). */
.te-attach-btn[b-bvvehnnx4i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    color: var(--app-muted, #8c8c8c);
    background: var(--app-surface, #fff);
    border: 1px solid var(--app-border, #e5e7eb);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.te-attach-btn:hover[b-bvvehnnx4i] {
    /* Явный ховер: заметная акцентная заливка + акцентная рамка и иконка
       (прежний --app-hover ~4% читался как «ничего не меняется»). */
    background: var(--app-accent-soft, rgba(91, 87, 214, 0.12));
    color: var(--app-accent, #5b57d6);
    border-color: var(--app-accent, #5b57d6);
}

.te-attach-btn:active[b-bvvehnnx4i] {
    transform: scale(0.94);
}

.te-attach-btn-disabled[b-bvvehnnx4i] {
    opacity: 0.5;
    pointer-events: none;
}

/* Вкладка «Память и план» — та же центрированная колонка, что и «Задание»,
   чтобы ширина контента не прыгала при переключении вкладок. */
.te-memory-tab-content[b-bvvehnnx4i] {
    max-width: 760px;
    margin: 0 auto;
}

/* Выравниваем внутренние отступы встроенного tm-body под .task-editor-content.
   ::deep — tm-body живёт в дочернем TaskMemoryModal. */
.te-memory-tab-content[b-bvvehnnx4i]  .tm-body {
    padding: 1.75rem 1.5rem 2.5rem;
}

@media (max-width: 768px) {
    .te-memory-tab-content[b-bvvehnnx4i]  .tm-body {
        padding: 1.25rem 1rem 2rem;
    }
}

/* ── Вкладка «Память и план» — плоско, как «Задание»: убираем «бутерброд из
   рамок». Секции-.tm-card больше не карточки (нет своего фона/бортика/скругления)
   — их разделяет воздух в том же ритме, что и .te-block на «Задании». Тело памяти
   (.tm-memory-text / .tm-empty) тоже «голое»: текст течёт прямо по листу.
   NextSessionAdvicePanel несёт свою единственную рамку — ровно как на «Задании». ── */
.te-memory-tab-content[b-bvvehnnx4i]  .tm-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 2.25rem;
}

.te-memory-tab-content[b-bvvehnnx4i]  .tm-card:last-child {
    margin-bottom: 0;
}

.te-memory-tab-content[b-bvvehnnx4i]  .tm-memory-text,
.te-memory-tab-content[b-bvvehnnx4i]  .tm-empty {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

/* «История изменений» (details) — шапка-раскрывашка и её тело тоже заподлицо
   с колонкой, чтобы бейджи секций стояли в один левый край. */
.te-memory-tab-content[b-bvvehnnx4i]  .tm-disclosure > summary,
.te-memory-tab-content[b-bvvehnnx4i]  .tm-disclosure > div {
    padding-left: 0;
    padding-right: 0;
}

/* «План на следующую сессию» — панель со своим фоном/рамкой, здесь только ритм. */
.te-advice-block[b-bvvehnnx4i] {
    margin-bottom: 2.25rem;
}

/* ─── Media grid ─── */
.task-editor-media-grid[b-bvvehnnx4i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.task-editor-media-card[b-bvvehnnx4i] {
    border: 1px solid var(--app-border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: var(--app-surface-alt, #f8f9fa);
}

.task-editor-media-img[b-bvvehnnx4i] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.task-editor-media-video-placeholder[b-bvvehnnx4i],
.task-editor-media-file-placeholder[b-bvvehnnx4i] {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--app-muted, #6c757d);
}

.task-editor-media-video-placeholder i[b-bvvehnnx4i],
.task-editor-media-file-placeholder i[b-bvvehnnx4i] {
    font-size: 1.5rem;
}

.task-editor-media-desc[b-bvvehnnx4i] {
    padding: 0.25rem;
    border-top: 1px solid var(--app-border, #e5e7eb);
}

/* ─── Markdown body — просторный, лёгкий ─── */
[b-bvvehnnx4i] .markdown-body {
    line-height: 1.75;
    font-size: 1rem;
}

[b-bvvehnnx4i] .markdown-body p {
    margin-bottom: 0.85rem;
}

[b-bvvehnnx4i] .markdown-body ol,
[b-bvvehnnx4i] .markdown-body ul {
    margin-bottom: 0.85rem;
}

[b-bvvehnnx4i] .markdown-body h3,
[b-bvvehnnx4i] .markdown-body h4 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* ─── AI Assistant Button ─── */
.te-ai-assistant-btn[b-bvvehnnx4i] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    /* Градиент FAB ИИ-помощника (.aiw-fab) — единые «фирменные» цвета всех входов в ИИ. */
    background: linear-gradient(158deg, #8b7eff 0%, #6057b5 100%);
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 12px rgba(120, 109, 226, 0.4);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    overflow: hidden;
}

/* Кнопка в футере крупнее (главное действие) и не «схлопывается» в круг на мобиле. */
.te-footer-ai-btn[b-bvvehnnx4i] {
    padding: 0.55rem 1.4rem;
    font-size: 0.9rem;
}

.te-ai-assistant-btn[b-bvvehnnx4i]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.5s ease;
}

.te-ai-assistant-btn:hover[b-bvvehnnx4i] {
    box-shadow: 0 4px 20px rgba(120, 109, 226, 0.55);
}

.te-ai-assistant-btn:hover[b-bvvehnnx4i]::before {
    left: 100%;
}

.te-ai-assistant-btn:active[b-bvvehnnx4i] {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 8px rgba(120, 109, 226, 0.3);
}

.te-ai-assistant-btn:disabled[b-bvvehnnx4i] {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 768px) {
    .task-editor-content[b-bvvehnnx4i] {
        padding: 1.25rem 1rem 2rem;
    }

    /* Боковой отступ шапки под контент на мобиле (совпадает с .task-editor-content). */
    .te-header-inner[b-bvvehnnx4i] {
        padding: 0 1rem;
    }

    .task-editor-media-grid[b-bvvehnnx4i] {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    /* «Создать материалы» на мобиле — полноценная пилюля с подписью во всю ширину строки,
       скрепка «Прикрепить файл» рядом. Футер-кнопка «Заменить с ИИ» — тоже во всю ширину. */
    .te-materials-actions[b-bvvehnnx4i] {
        width: 100%;
        margin-left: 0;
    }

    .te-materials-btn[b-bvvehnnx4i] {
        flex: 1 1 auto;
        justify-content: center;
    }

    .te-footer[b-bvvehnnx4i] {
        justify-content: stretch;
    }

    .te-footer-ai-btn[b-bvvehnnx4i] {
        width: 100%;
        justify-content: center;
    }

    /* На мобиле у «Назад» прячем подпись — остаётся стрелка (экономим место под длинный тайтл). */
    .te-back-label[b-bvvehnnx4i] {
        display: none;
    }

    .te-back-btn[b-bvvehnnx4i] {
        padding: 6px;
    }

    /* Грабер виден, шапка ловит вертикальный жест (не отдаём его нативному скроллу). */
    .te-drag-handle[b-bvvehnnx4i] {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px 0 2px;
        flex-shrink: 0;
        touch-action: none;
        cursor: grab;
    }

    .te-drag-bar[b-bvvehnnx4i] {
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--app-border, #d1d5db);
    }

    .te-header[b-bvvehnnx4i] {
        touch-action: none;
    }
}

@media (max-width: 575.98px) {
    /* Узкий экран — колонка «Память и план» во всю ширину (рамки секций уже
       убраны выше, на всех ширинах). */
    .te-memory-tab-content[b-bvvehnnx4i] {
        max-width: none;
        width: 100%;
    }
}

/* Delete button — бледная, яркая при наведении на карточку */
.te-media-delete-btn[b-bvvehnnx4i] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    font-size: 0.65rem;
    border: none;
    background: rgba(0,0,0,0.15);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.te-media-hover-parent:hover .te-media-delete-btn[b-bvvehnnx4i] {
    opacity: 1;
    background: rgba(220,53,69,0.85);
    color: #fff;
}

.te-media-delete-btn:hover[b-bvvehnnx4i] {
    background: rgba(220,53,69,1) !important;
}

/* ── Sheet-презентация (AsSheet: «Расписание» и «Задания») — контент лежит в теле
   BottomSheet, у которого свои отступы и свой скролл: убираем дублирующие боковые
   поля колонок, чтобы не получить «отступ в отступе». ── */
.te-sheet-body .te-tabs[b-bvvehnnx4i] {
    padding-top: 0;
}

.te-sheet-body .task-editor-content[b-bvvehnnx4i] {
    padding: 0.25rem 0 1rem;
}

.te-sheet-body .te-memory-tab-content[b-bvvehnnx4i]  .tm-body {
    padding: 0.25rem 0 1rem;
}

/* Кнопка ИИ в футере шита — во всю ширину, как прочие действия в BottomSheet. */
.te-sheet-ai-btn[b-bvvehnnx4i] {
    width: 100%;
    justify-content: center;
}
/* /Shared/TaskInlineEditor.razor.rz.scp.css */
.task-inline-editor[b-b23y6a9hz9] {
    padding: 1rem 1.5rem;
    padding-bottom: 5rem; /* Space for sticky toolbar */
    background-color: var(--app-surface);
    border-radius: 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    border-left: none;
    border-right: none;
    position: relative;
}

@media (max-width: 991.98px) {
    .task-inline-editor[b-b23y6a9hz9] {
        padding: 0.75rem 0.5rem;
        padding-bottom: 5rem;
        border-top: none;
        border-bottom: none;
    }
}

.task-inline-editor-media-toolbar[b-b23y6a9hz9] {
    padding: 0.75rem;
    background-color: var(--app-surface-alt);
    border-radius: 0.5rem;
}

/* Sticky toolbar for Save/Cancel buttons */
.task-inline-editor-sticky-toolbar[b-b23y6a9hz9] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 -1.5rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
    background-color: var(--app-surface);
    border-top: 1px solid var(--app-border);
    border-radius: 0;
    z-index: 10;
    /* Ensure solid background with no transparency */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
}

@media (max-width: 991.98px) {
    .task-inline-editor-sticky-toolbar[b-b23y6a9hz9] {
        margin: 0 -0.5rem -0.5rem -0.5rem;
        padding: 0.75rem 0.5rem;
    }
}

/* ============================================
   AI Badge & Buttons - Google AI Style
   ============================================ */

/* Animated gradient for AI elements */
@keyframes ai-gradient-shift-b-b23y6a9hz9 {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes ai-shimmer-b-b23y6a9hz9 {
    0% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
    }
}

@keyframes ai-pulse-b-b23y6a9hz9 {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.02);
        filter: brightness(1.1);
    }
}

/* AI Badge */
.ai-badge[b-b23y6a9hz9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(
        135deg,
        #4285f4 0%,
        #9b72cb 25%,
        #d96570 50%,
        #d96570 50%,
        #9b72cb 75%,
        #4285f4 100%
    );
    background-size: 300% 300%;
    animation: ai-gradient-shift-b-b23y6a9hz9 4s ease infinite, ai-shimmer-b-b23y6a9hz9 2s ease-in-out infinite;
    border-radius: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}

.ai-badge i[b-b23y6a9hz9] {
    font-size: 1rem;
    animation: ai-pulse-b-b23y6a9hz9 2s ease-in-out infinite;
}

/* AI Button Group */
.ai-btn-group[b-b23y6a9hz9] {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
}

.ai-btn-group[b-b23y6a9hz9]::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 0.5rem;
    background: linear-gradient(
        90deg,
        #4285f4,
        #ea4335,
        #fbbc04,
        #34a853,
        #4285f4
    );
    background-size: 300% 100%;
    animation: ai-gradient-shift-b-b23y6a9hz9 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* AI Buttons */
.ai-btn[b-b23y6a9hz9] {
    position: relative;
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: #1a1a1a;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.ai-btn:first-child[b-b23y6a9hz9] {
    border-radius: 0.4rem 0 0 0.4rem;
}

.ai-btn:last-child[b-b23y6a9hz9] {
    border-radius: 0 0.4rem 0.4rem 0;
}

.ai-btn:not(:last-child)[b-b23y6a9hz9] {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.ai-btn:hover:not(:disabled)[b-b23y6a9hz9] {
    color: white;
    background: linear-gradient(
        135deg,
        #4285f4 0%,
        #5a95f5 50%,
        #4285f4 100%
    );
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
}

.ai-btn:active:not(:disabled)[b-b23y6a9hz9] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(66, 133, 244, 0.3);
}

.ai-btn:disabled[b-b23y6a9hz9] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* AI Button Outline variant (for image generation) */
.ai-btn-outline[b-b23y6a9hz9] {
    position: relative;
    padding: 0.4rem 1rem;
    font-weight: 600;
    color: transparent;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    background-clip: padding-box;
    border: 2px solid transparent !important;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-btn-outline[b-b23y6a9hz9]::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 0.5rem;
    background: linear-gradient(
        90deg,
        #4285f4,
        #ea4335,
        #fbbc04,
        #34a853,
        #4285f4
    );
    background-size: 300% 100%;
    animation: ai-gradient-shift-b-b23y6a9hz9 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Text with gradient */
.ai-btn-outline[b-b23y6a9hz9] {
    background: linear-gradient(
        90deg,
        #4285f4,
        #ea4335,
        #fbbc04,
        #34a853,
        #4285f4
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: ai-gradient-shift-b-b23y6a9hz9 3s linear infinite;
}

.ai-btn-outline i[b-b23y6a9hz9] {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ai-btn-outline:hover:not(:disabled)[b-b23y6a9hz9] {
    color: white !important;
    background: linear-gradient(
        90deg,
        #4285f4,
        #ea4335,
        #fbbc04,
        #34a853,
        #4285f4
    );
    background-size: 300% 100%;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    animation: ai-gradient-shift-b-b23y6a9hz9 2s linear infinite;
    box-shadow:
        0 4px 15px rgba(66, 133, 244, 0.3),
        0 4px 15px rgba(234, 67, 53, 0.2),
        0 4px 15px rgba(251, 188, 4, 0.2);
}

.ai-btn-outline:hover:not(:disabled) i[b-b23y6a9hz9] {
    color: white !important;
    -webkit-background-clip: unset;
    background-clip: unset;
    background: transparent;
}

.ai-btn-outline:disabled[b-b23y6a9hz9] {
    opacity: 0.4;
    animation: none;
}

.ai-btn-outline:disabled[b-b23y6a9hz9]::before {
    animation: none;
}

/* ============================================
   AI Controls Group - Combined Badge & Buttons
   ============================================ */

/* Animated glow effect */
@keyframes ai-glow-b-b23y6a9hz9 {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(66, 133, 244, 0.5),
            0 0 16px rgba(155, 114, 203, 0.3),
            0 2px 8px rgba(66, 133, 244, 0.25);
    }
    33% {
        box-shadow:
            0 0 8px rgba(217, 101, 112, 0.5),
            0 0 16px rgba(251, 188, 4, 0.3),
            0 2px 8px rgba(217, 101, 112, 0.25);
    }
    66% {
        box-shadow:
            0 0 8px rgba(52, 168, 83, 0.5),
            0 0 16px rgba(66, 133, 244, 0.3),
            0 2px 8px rgba(52, 168, 83, 0.25);
    }
}

.ai-controls-group[b-b23y6a9hz9] {
    display: inline-flex;
    align-items: stretch;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    animation: ai-glow-b-b23y6a9hz9 4s ease-in-out infinite;
}

/* Animated gradient border */
.ai-controls-group[b-b23y6a9hz9]::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: 0.5rem;
    background: linear-gradient(
        90deg,
        #4285f4,
        #9b72cb,
        #d96570,
        #fbbc04,
        #34a853,
        #4285f4
    );
    background-size: 400% 100%;
    animation: ai-gradient-shift-b-b23y6a9hz9 4s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* AI Badge inside group */
.ai-controls-badge[b-b23y6a9hz9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(
        135deg,
        #4285f4 0%,
        #9b72cb 25%,
        #d96570 50%,
        #9b72cb 75%,
        #4285f4 100%
    );
    background-size: 300% 300%;
    animation: ai-gradient-shift-b-b23y6a9hz9 4s ease infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.ai-controls-badge i[b-b23y6a9hz9] {
    font-size: 1rem;
    animation: ai-pulse-b-b23y6a9hz9 2s ease-in-out infinite;
}

/* Buttons inside group */
.ai-controls-btn[b-b23y6a9hz9] {
    position: relative;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: #1a1a1a;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.ai-controls-btn:not(:last-child)[b-b23y6a9hz9] {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.ai-controls-btn:hover:not(:disabled)[b-b23y6a9hz9] {
    color: white;
    background: linear-gradient(
        135deg,
        #4285f4 0%,
        #5a95f5 50%,
        #4285f4 100%
    );
}

.ai-controls-btn:active:not(:disabled)[b-b23y6a9hz9] {
    transform: translateY(0);
}

.ai-controls-btn:disabled[b-b23y6a9hz9] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive: smaller on mobile */
@media (max-width: 576px) {
    .ai-controls-badge span[b-b23y6a9hz9] {
        display: none;
    }

    .ai-controls-badge[b-b23y6a9hz9] {
        padding: 0.5rem 0.65rem;
    }

    .ai-controls-btn[b-b23y6a9hz9] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .ai-controls-btn i[b-b23y6a9hz9] {
        margin-right: 0 !important;
    }

    .ai-controls-btn span[b-b23y6a9hz9] {
        display: none;
    }
}

/* ============================================
   Media Add Buttons - AI & Library
   ============================================ */

.media-add-buttons-container[b-b23y6a9hz9] {
    display: flex;
    justify-content: center;
}

.media-add-buttons[b-b23y6a9hz9] {
    display: inline-flex;
    align-items: stretch;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    animation: ai-glow-b-b23y6a9hz9 4s ease-in-out infinite;
}

/* Animated gradient border */
.media-add-buttons[b-b23y6a9hz9]::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 0.5rem;
    background: linear-gradient(
        90deg,
        #4285f4,
        #9b72cb,
        #d96570,
        #fbbc04,
        #34a853,
        #4285f4
    );
    background-size: 400% 100%;
    animation: ai-gradient-shift-b-b23y6a9hz9 4s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.media-add-btn[b-b23y6a9hz9] {
    position: relative;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

/* AI button - gradient background */
.media-add-btn-ai[b-b23y6a9hz9] {
    color: white;
    background: linear-gradient(
        135deg,
        #4285f4 0%,
        #9b72cb 25%,
        #d96570 50%,
        #9b72cb 75%,
        #4285f4 100%
    );
    background-size: 300% 300%;
    animation: ai-gradient-shift-b-b23y6a9hz9 4s ease infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.media-add-btn-ai i[b-b23y6a9hz9] {
    animation: ai-pulse-b-b23y6a9hz9 2s ease-in-out infinite;
}

.media-add-btn-ai:hover:not(:disabled)[b-b23y6a9hz9] {
    filter: brightness(1.1);
}

/* Library button - light background */
.media-add-btn-library[b-b23y6a9hz9] {
    color: #1a1a1a;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.media-add-btn-library:hover:not(:disabled)[b-b23y6a9hz9] {
    color: white;
    background: linear-gradient(
        135deg,
        #4285f4 0%,
        #5a95f5 50%,
        #4285f4 100%
    );
}

.media-add-btn:active:not(:disabled)[b-b23y6a9hz9] {
    transform: translateY(0);
}

.media-add-btn:disabled[b-b23y6a9hz9] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 576px) {
    .media-add-btn[b-b23y6a9hz9] {
        padding: 0.5rem 1rem;
    }

    .media-add-btn span[b-b23y6a9hz9] {
        display: none;
    }

    .media-add-btn i[b-b23y6a9hz9] {
        margin-right: 0 !important;
    }
}

/* ============================================
   Voice Button (round microphone)
   ============================================ */

.voice-btn[b-b23y6a9hz9] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--app-surface-alt);
    color: var(--app-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}

.voice-btn:hover:not(:disabled)[b-b23y6a9hz9] {
    background: var(--app-accent);
    color: white;
    box-shadow: 0 2px 8px rgb(var(--primary-600) / 0.25);
}

.voice-btn:disabled[b-b23y6a9hz9] {
    opacity: 0.35;
    cursor: not-allowed;
}

.voice-btn--recording[b-b23y6a9hz9] {
    background: #dc2626;
    color: white;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2);
    animation: voice-btn-pulse-b-b23y6a9hz9 1.5s ease-in-out infinite;
}

.voice-btn--recording:hover:not(:disabled)[b-b23y6a9hz9] {
    background: #b91c1c;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.3);
}

@keyframes voice-btn-pulse-b-b23y6a9hz9 {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0.1);
    }
}

@keyframes voice-pulse-b-b23y6a9hz9 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

.voice-recording-indicator[b-b23y6a9hz9] {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    animation: voice-pulse-b-b23y6a9hz9 1s ease-in-out infinite;
}

/* ============================================
   Auto AI Button (title / group suggestions)
   ============================================ */

.auto-ai-btn[b-b23y6a9hz9] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--app-surface-alt);
    color: var(--app-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.auto-ai-btn:hover:not(:disabled)[b-b23y6a9hz9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.auto-ai-btn:disabled[b-b23y6a9hz9] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ============================================
   Rating Rules Display
   ============================================ */

.rating-rules-display[b-b23y6a9hz9] {
    padding: 0.75rem 1rem;
    background-color: var(--app-surface-alt);
    border-radius: 0.5rem;
    border: 1px solid var(--app-border);
}

.rating-rules-content[b-b23y6a9hz9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rating-rules-line[b-b23y6a9hz9] {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--app-text);
}

/* ============================================
   Task Thumbnail
   ============================================ */

.task-thumbnail-container[b-b23y6a9hz9] {
    display: flex;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.task-thumbnail-img[b-b23y6a9hz9] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--app-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.task-thumbnail-container:hover .task-thumbnail-img[b-b23y6a9hz9],
.task-thumbnail-container--active .task-thumbnail-img[b-b23y6a9hz9] {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgb(var(--primary-600) / 0.15);
}

.task-thumbnail-img--loading[b-b23y6a9hz9] {
    opacity: 0.4;
}

.task-thumbnail-loading-overlay[b-b23y6a9hz9] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.task-thumbnail-placeholder[b-b23y6a9hz9] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px dashed var(--app-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-text-secondary);
    font-size: 1rem;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.task-thumbnail-container:hover .task-thumbnail-placeholder[b-b23y6a9hz9],
.task-thumbnail-container--active .task-thumbnail-placeholder[b-b23y6a9hz9] {
    border-color: var(--app-accent);
    color: var(--app-accent);
}

.task-thumbnail-actions[b-b23y6a9hz9] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.45rem;
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    animation: thumbnail-actions-fade-in-b-b23y6a9hz9 0.15s ease;
}

@keyframes thumbnail-actions-fade-in-b-b23y6a9hz9 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-thumbnail-regenerate-btn[b-b23y6a9hz9] {
    white-space: nowrap;
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.45rem;
    border: 1px solid var(--app-border) !important;
    background-color: var(--app-surface);
    justify-content: center;
}

/* Палитра категорий иконки: точка = категория (цвет плитки), клик = ручной выбор
   + локальная перекраска. Активная категория выделена кольцом акцента. */
.task-thumbnail-cat-row[b-b23y6a9hz9] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.task-thumbnail-cat-dot[b-b23y6a9hz9] {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.task-thumbnail-cat-dot:hover:not(:disabled)[b-b23y6a9hz9] {
    transform: scale(1.18);
}

.task-thumbnail-cat-dot--active[b-b23y6a9hz9] {
    border-color: var(--app-surface);
    box-shadow: 0 0 0 2px var(--app-accent);
}

.task-thumbnail-cat-dot:disabled[b-b23y6a9hz9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.task-thumbnail-regenerate-btn:hover:not(:disabled)[b-b23y6a9hz9] {
    background-color: var(--app-accent);
    color: white;
    border-color: var(--app-accent) !important;
}

.task-thumbnail-regenerate-btn:disabled[b-b23y6a9hz9] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   Tag Toggle Buttons (matching assignment card style)
   ============================================ */

.editor-tag-toggle[b-b23y6a9hz9] {
    border: none;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(108, 117, 125, 0.08);
    color: var(--app-text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.editor-tag-toggle:hover[b-b23y6a9hz9],
.editor-tag-toggle:focus-visible[b-b23y6a9hz9] {
    background: rgba(108, 117, 125, 0.16);
    color: var(--app-text);
    outline: none;
}

.editor-tag-toggle--active[b-b23y6a9hz9] {
    background: rgba(180, 138, 74, 0.16);
    color: #8b6914;
}

.editor-tag-toggle--active:hover[b-b23y6a9hz9],
.editor-tag-toggle--active:focus-visible[b-b23y6a9hz9] {
    background: rgba(180, 138, 74, 0.26);
    color: #7a5c10;
}

.editor-tag-toggle:disabled[b-b23y6a9hz9] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Shared/TaskViewWindow.razor.rz.scp.css */
/* «Окно задания»: мобайл — во весь экран, десктоп — крупная центрированная модалка.
   Панель НАМЕРЕННО без transform-анимаций: внутри живут встроенные компоненты с
   fixed-оверлеями (просмотрщик материалов, поповер «Добавить», аудио-док) — transform
   создал бы для них containing block и «запер» внутри панели. */

.tvw-root[b-nzhwu82rqe] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    outline: none;
}

.tvw-panel[b-nzhwu82rqe] {
    width: 100%;
    height: 100%;
}

/* Мобила: левая секция в общем потоке, тело окна прокручивается одной колонкой. */
.tvw-body[b-nzhwu82rqe] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Кламп левой секции — ТОЛЬКО мобила (раскрывается кнопкой «развернуть»).
   Правила намеренно заперты в max-width-запрос: раньше десктоп «разжимал» кламп
   через overflow:visible, а этот шорткат перебивал tw-overflow-y-auto прокручиваемой
   области (одинаковая специфичность, scoped-CSS грузится позже tailwind.css) —
   колонка переставала скроллиться, и длинное описание залезало на кнопки под ним. */
@media (max-width: 1023.98px) {
    /* Мобила: прокрутка ОДНА — у тела окна, а секции внутри держат свою высоту.
       Без flex:none флекс-элементы с tw-min-h-0 (нужным десктопу) остаются без
       «пола» из min-content и сжимаются под содержимое: раскрытый «План сессии»
       вылезал за свою колонку — текст ложился поверх кнопки «Свернуть» и вкладки
       «Материалы», и всё окно выглядело съехавшим. */
    .tvw-body > .tvw-left[b-nzhwu82rqe],
    .tvw-body > section[b-nzhwu82rqe],
    .tvw-left > .tvw-left-scroll[b-nzhwu82rqe],
    .tvw-right-scroll[b-nzhwu82rqe] {
        flex: none;
    }

    .tvw-left-collapsed[b-nzhwu82rqe] {
        max-height: 5.6rem;
        overflow: hidden;
        position: relative;
    }

    .tvw-left-collapsed[b-nzhwu82rqe]::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 2rem;
        background: linear-gradient(transparent, var(--app-surface-alt, #f9fafb));
        pointer-events: none;
    }
}

/* Вкладка «Обсуждение»: чат сам управляет высотой; на десктопе — во всю правую колонку. */
.tvw-talk[b-nzhwu82rqe] {
    min-height: 16rem;
}

/* ── Вкладка «Память»: плоско, без «бутерброда из рамок» ──────────────────────
   Встроенный TaskMemoryModal рисует секции карточками (.tm-card), а внутри
   «Текущей памяти» текст живёт ещё в одной рамке (.tm-memory-text) — во вкладке
   узкого окна это давало рамку в рамке в рамке. Единственная рамка здесь — само
   окно, поэтому карточки и тело памяти внутри вкладки «голые», как во вкладке
   «Память и план» редактора задания (см. TaskEditorModal.razor.css). ::deep —
   разметка принадлежит дочернему компоненту. */
.tvw-memory[b-nzhwu82rqe]  .tm-body {
    padding: 0; /* отступы вкладки уже даёт обёртка окна */
}

.tvw-memory[b-nzhwu82rqe]  .tm-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1.75rem;
}

.tvw-memory[b-nzhwu82rqe]  .tm-card:last-child {
    margin-bottom: 0;
}

/* Шапка/тело «Истории изменений» — заподлицо с колонкой, чтобы бейджи секций
   стояли в один левый край (сами снимки внутри сохраняют свою рамку). */
.tvw-memory[b-nzhwu82rqe]  .tm-disclosure > summary,
.tvw-memory[b-nzhwu82rqe]  .tm-disclosure > div {
    padding-left: 0;
    padding-right: 0;
}

/* Текст памяти течёт прямо по листу вкладки. Отрицательные поля гасят
   собственный паддинг, поэтому текст стоит в один край с заголовком секции,
   а подсветка наведения (клик = правка) всё равно есть — мягким фоном. */
.tvw-memory[b-nzhwu82rqe]  .tm-memory-text,
.tvw-memory[b-nzhwu82rqe]  .tm-empty {
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 0.45rem 0.6rem;
    margin: -0.45rem -0.6rem;
}

.tvw-memory[b-nzhwu82rqe]  .tm-memory-view:hover .tm-memory-text,
.tvw-memory[b-nzhwu82rqe]  .tm-memory-view:hover .tm-empty,
.tvw-memory[b-nzhwu82rqe]  .tm-memory-view:focus-visible .tm-memory-text,
.tvw-memory[b-nzhwu82rqe]  .tm-memory-view:focus-visible .tm-empty {
    background: var(--app-hover);
}

/* Без наведения (телефон/планшет) подсказки «редактировать» не видно, а рамки,
   намекавшей на поле ввода, больше нет — показываем подсказку строкой под текстом. */
@media (hover: none) {
    .tvw-memory[b-nzhwu82rqe]  .tm-edit-hint {
        position: static;
        opacity: 1;
        margin-top: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .tvw-root[b-nzhwu82rqe] {
        align-items: center;
        padding: 1.5rem;
    }

    /* Ширина окна = ширина тела страницы (.page-body-width / .plan-page-body / .ab-split-layout,
       см. site.css «Единая ширина тела страницы»): открытое окно ложится ровно на список
       под ним, ничего не «прыгает» по ширине при открытии и закрытии. */
    .tvw-panel[b-nzhwu82rqe] {
        width: min(var(--page-body-width, 880px), 100%);
        height: min(840px, 92vh);
        border-radius: var(--radius-lg, 16px);
        border: 1px solid var(--app-border, #e8e8e8);
        overflow: hidden;
    }

    /* Десктоп: две независимые прокрутки в колонках, тело не скроллится само.
       grid-template-rows: minmax(0, 1fr) обязателен — без него единственная строка
       грида получает auto-высоту, растёт под длинный план сессии и вылезает за окно
       (текст наезжал на кнопку «Придумать другой план» и футер), а внутренние
       overflow-y:auto не срабатывают, потому что колонкам нечего ограничивать. */
    .tvw-body[b-nzhwu82rqe] {
        overflow: hidden;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }

    .tvw-left[b-nzhwu82rqe],
    .tvw-body > section[b-nzhwu82rqe] {
        min-height: 0;
        overflow: hidden;
    }

    .tvw-talk[b-nzhwu82rqe] {
        height: 100%;
        min-height: 0;
    }
}
/* /Shared/ThinkingAnimation.razor.rz.scp.css */
/* «ИИ думает» — канвас со сменой сцен + статус-текст. Цвета сцен берёт JS из
   --ai-a / --ai-b (см. ai-thinking-anim.js: resolveColor читает их из каскада). */
.ai-thinking[b-rdhapj3e0i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Светлая тема: бледные связи (a) + насыщенный акцент для вспышек/искры (b),
       чтобы яркие точки читались на почти белом пузыре. */
    --ai-a: color-mix(in srgb, var(--app-accent, #5b57d6) 55%, white);
    --ai-b: var(--app-accent, #5b57d6);
}

/* Тёмная тема (html.dark) — значения из макета: пастельная лаванда поверх тёмного
   пузыря. Тут «ярче» = светлее, как и задумано в дизайне. */
html.dark .ai-thinking[b-rdhapj3e0i] {
    --ai-a: #8B80F4;
    --ai-b: #CFC8FF;
}

.ai-thinking-canvas[b-rdhapj3e0i] {
    display: block;
    width: 108px;
    height: 44px;
    flex-shrink: 0;
}

.ai-thinking-text[b-rdhapj3e0i] {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--app-muted, #8a8a8a);
    white-space: nowrap;
    /* Плавная смена фраз (JS дёргает opacity/transform в updateText). */
    transition: opacity 0.28s ease, transform 0.28s ease;
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 640px) {
    .ai-thinking-canvas[b-rdhapj3e0i] {
        width: 92px;
        height: 40px;
    }

    .ai-thinking-text[b-rdhapj3e0i] {
        font-size: 0.88rem;
    }
}

/* Reduce-motion: JS не запускает rAF (рисует один статичный кадр), а текст не
   мигает переходами. */
@media (prefers-reduced-motion: reduce) {
    .ai-thinking-text[b-rdhapj3e0i] {
        transition: none;
    }
}
/* /Shared/ToastNotification.razor.rz.scp.css */
.toast-notification[b-wlja87njc1] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: calc(100vw - 32px);
    animation: toast-slide-up-b-wlja87njc1 0.3s ease-out;
}

@keyframes toast-slide-up-b-wlja87njc1 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.toast-notification--success[b-wlja87njc1] {
    background-color: #d1fae5;
    border: 1px solid #10b981;
    color: #065f46;
}

.toast-notification--error[b-wlja87njc1] {
    background-color: #fee2e2;
    border: 1px solid #ef4444;
    color: #991b1b;
}

.toast-notification__content[b-wlja87njc1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.toast-notification__icon[b-wlja87njc1] {
    flex-shrink: 0;
    font-size: 1.1rem;
}

.toast-notification__message[b-wlja87njc1] {
    font-size: 0.9375rem;
    font-weight: 500;
}

.toast-notification__close[b-wlja87njc1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
    color: inherit;
}

.toast-notification__close:hover[b-wlja87njc1] {
    opacity: 1;
}

@media (max-width: 576px) {
    .toast-notification[b-wlja87njc1] {
        bottom: 16px;
        left: 16px;
        right: 16px;
        transform: none;
        max-width: none;
    }

    @keyframes toast-slide-up-b-wlja87njc1 {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
/* /Shared/TypingDots.razor.rz.scp.css */
.typing-dots[b-fpxa7ir2xq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--app-muted, #8a8a8a);
}

.typing-dots span[b-fpxa7ir2xq] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    animation: tdots-bounce-b-fpxa7ir2xq 1.2s infinite ease-in-out both;
}

.typing-dots span:nth-child(2)[b-fpxa7ir2xq] { animation-delay: .2s; }
.typing-dots span:nth-child(3)[b-fpxa7ir2xq] { animation-delay: .4s; }

@keyframes tdots-bounce-b-fpxa7ir2xq {
    0%, 80%, 100% { transform: scale(.6); opacity: .3; }
    40%           { transform: scale(1);  opacity: .9; }
}