/*
 * Компоненты интерфейса EGO — по docs/design.md §1.5.
 *
 * Здесь только то, что описано в дизайн-системе: кнопки, поля, карточки,
 * пузыри чата, чипы, плашки статусов, нижняя панель, шторка, скелетоны, тосты.
 * Значений цветов и размеров в файле нет — всё через переменные `tokens.css`,
 * иначе правка дизайна снова превращается в поиск по коду.
 *
 * Bootstrap подключается ради сетки и утилит; его светлая тема здесь
 * перекрывается — продукт тёмный.
 */

/* Страница не масштабируется случайными жестами.
   `manipulation` снимает только двойной тап, щипок при этом остаётся — на
   айфоне интерфейс продолжал «прыгать» от случайных касаний. `pan-x pan-y`
   разрешает прокрутку и запрещает масштаб; `user-scalable=no` в мета-теге тут
   не помощник — iOS его игнорирует с десятой версии.

   Исключение — просмотрщик фотографии: там масштаб и есть смысл экрана, и
   рассмотреть снимок пальцами должно быть можно. */
html, body { touch-action: pan-x pan-y; }
#photo-viewer, #photo-viewer * { touch-action: auto; }


/* ─── Каркас страницы ────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-family);
    font-size: var(--body-size);
    line-height: var(--body-line);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Клавиатура на iOS уменьшает видимую область, но не страницу: без фиксации
   по `dvh` экран уезжает вверх, и между полем ввода и панелью появляется
   полоса (docs/egoweb/architecture.md §3) */
.app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: var(--app-max-width);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: var(--bg);
}

@media (min-width: 768px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .app {
        height: 90dvh;
        max-height: 900px;
        width: 100%;
        border-radius: var(--radius-card-large);
        border: 1px solid var(--divider);
        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    }
}

.screen {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--screen-padding);
}

/* Полосу прокрутки прячем: на мобильном её нет, на десктопе она рвёт макет
   узкой колонки. Прокрутка при этом работает как обычно */
.screen::-webkit-scrollbar { display: none; }
.screen { scrollbar-width: none; }

.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* ─── Типографика (§1.3) ─────────────────────────────────────────────────── */

.t-hero {
    font-size: var(--hero-size); line-height: var(--hero-line);
    font-weight: var(--hero-weight); letter-spacing: -0.02em;
}
.t-title { font-size: var(--title-size); line-height: var(--title-line); font-weight: var(--title-weight); }
.t-screen-title {
    font-size: var(--screen-title-size); line-height: var(--screen-title-line);
    font-weight: var(--screen-title-weight);
}
.t-section { font-size: var(--section-size); line-height: var(--section-line); font-weight: var(--section-weight); }
.t-body-strong {
    font-size: var(--body-strong-size); line-height: var(--body-strong-line);
    font-weight: var(--body-strong-weight);
}
.t-body { font-size: var(--body-size); line-height: var(--body-line); font-weight: var(--body-weight); }
.t-caption { font-size: var(--caption-size); line-height: var(--caption-line); }
.t-micro { font-size: var(--micro-size); line-height: var(--micro-line); font-weight: var(--micro-weight); }
.t-mono { font-family: var(--font-mono); font-size: var(--caption-size); font-weight: 500; }

.t-secondary { color: var(--text-secondary); }
.t-tertiary { color: var(--text-tertiary); }
.t-error { color: var(--error-light); }
.t-accent { color: var(--accent); }

.text-gradient {
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ─── Кнопки (§1.5) ──────────────────────────────────────────────────────── */

.btn-ego,
.btn-ego-secondary,
.btn-ego-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: var(--height-button);
    padding: 0 var(--space-5);
    border: none;
    border-radius: var(--radius-input);
    font-size: var(--body-strong-size);
    font-weight: var(--body-strong-weight);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: filter var(--motion-message) var(--easing);
}

.btn-ego {
    background: var(--gradient-button);
    color: #FFFFFF;
}
.btn-ego:active { filter: brightness(0.92); }
.btn-ego:disabled,
.btn-ego[aria-disabled="true"] {
    background: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    cursor: default;
}

.btn-ego-secondary {
    background: transparent;
    border: 1.5px solid var(--accent);
    color: var(--accent);
}

.btn-ego-text {
    background: transparent;
    color: var(--accent);
    height: auto;
    padding: var(--space-2);
    width: auto;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: var(--space-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.btn-icon:active { opacity: 0.7; }

/* ─── Поля ввода ─────────────────────────────────────────────────────────── */

.field {
    width: 100%;
    height: var(--height-input);
    padding: 0 var(--space-4);
    background: var(--input-bg);
    /* В покое рамка очерчивает поле (в светлой теме без неё поле сливается с
       карточкой), в фокусе — перекрашивается в акцент */
    border: 1.5px solid var(--border);
    border-radius: var(--radius-input);
    color: var(--text);
    font-size: var(--body-size);
    font-family: inherit;
}
.field::placeholder { color: var(--text-tertiary); }
.field:focus { outline: none; border-color: var(--accent); }
.field.is-invalid { border-color: var(--error); }

.field-error {
    display: block;
    margin-top: var(--space-1);
    color: var(--error-light);
    font-size: var(--caption-size);
    line-height: var(--caption-line);
    min-height: var(--caption-line);
}

.field-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--caption-size);
}

/* Ячейки кода подтверждения (E-03) */
.code-input {
    width: 100%;
    height: 64px;
    text-align: center;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    font-size: var(--title-size);
    font-weight: var(--title-weight);
    font-family: var(--font-mono);
}

/* ─── Карточки и списки ──────────────────────────────────────────────────── */

.card-ego {
    background: var(--surface);
    /* Граница нужна светлой теме, где карточка белая на почти белом фоне; в
       тёмной она едва видна и просто уточняет край (docs/design.md §1.0) */
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
}

.card-ego + .card-ego { margin-top: var(--space-3); }

.divide-rows > * + * { border-top: 1px solid var(--divider); }

/* ─── Пузыри чата (§1.5) ─────────────────────────────────────────────────── */

.bubble {
    max-width: 84%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--body-size);
    line-height: var(--body-line);
    word-wrap: break-word;
    white-space: pre-wrap;
    animation: bubble-in var(--motion-message) var(--easing);
}

.bubble-user {
    align-self: flex-end;
    background: var(--gradient-button);
    color: #FFFFFF;
    border-radius: var(--radius-bubble) var(--radius-bubble)
                   var(--radius-bubble-tail) var(--radius-bubble);
}

.bubble-assistant {
    align-self: flex-start;
    background: var(--surface-elevated);
    color: var(--text);
    border-radius: var(--radius-bubble) var(--radius-bubble)
                   var(--radius-bubble) var(--radius-bubble-tail);
}

.bubble-time {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--micro-size);
    line-height: var(--micro-line);
    opacity: 0.6;
}

@keyframes bubble-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Каретка стриминга: мигает секунду, пока модель дописывает ответ */
.bubble-streaming::after {
    content: "▍";
    margin-left: 2px;
    animation: caret 1s steps(2, start) infinite;
    color: var(--accent-violet);
}

@keyframes caret { to { visibility: hidden; } }

.typing-dots span {
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 3px;
    border-radius: 50%;
    background: var(--text-tertiary);
    animation: typing 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* Проигрыватель голосового в сообщении: системный, но в ширину пузыря */
.bubble-audio {
    display: block;
    width: 240px;
    max-width: 100%;
    margin-top: var(--space-2);
    height: 36px;
}

/* Фото в сообщении (§1.4) */
.bubble-photo {
    max-height: var(--photo-message-height);
    max-width: var(--photo-message-max-width);
    border-radius: var(--radius-card);
    display: block;
}

/* Мозаика фотографий в одном сообщении (§1.4).
   Сетка вместо ряда: одна фотография занимает всю ширину пузыря, две встают
   рядом, три и больше — по две в ряд квадратами. Так пачка снимков читается
   как одно сообщение, а не как лента разной высоты. */
.bubble-mosaic {
    display: grid;
    gap: 2px;
    margin-top: var(--space-2);
    border-radius: var(--radius-card);
    overflow: hidden;
    max-width: var(--photo-message-max-width);
}
.bubble-mosaic[data-count="1"] { grid-template-columns: 1fr; }
.bubble-mosaic:not([data-count="1"]) { grid-template-columns: 1fr 1fr; }
.bubble-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
/* Квадраты — кроме одиночного снимка, у которого сохраняются пропорции */
.bubble-mosaic:not([data-count="1"]) img { aspect-ratio: 1; }
.bubble-mosaic[data-count="1"] img { max-height: var(--photo-message-height); }
/* Нечётное число: первый снимок занимает оба столбца — иначе внизу дыра */
.bubble-mosaic[data-count="3"] img:first-child,
.bubble-mosaic[data-count="5"] img:first-child,
.bubble-mosaic[data-count="7"] img:first-child,
.bubble-mosaic[data-count="9"] img:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }

/* Полоса выбранных фотографий над полем ввода.
   Горизонтальные отступы не задаются: полоса живёт внутри `.composer`, у
   которой они уже есть, — иначе карточки уезжали бы правее поля ввода. Снизу
   отступ такой же, как между строками панели, чтобы фотографии не лежали
   вплотную к полю. */
.attach-strip {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-1);
    scrollbar-width: thin;
    scrollbar-color: var(--text-tertiary) transparent;
}
.attach-strip::-webkit-scrollbar { height: 4px; }
.attach-strip::-webkit-scrollbar-track { background: transparent; }
.attach-strip::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 2px;
}

.attach-item {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-input);
    overflow: hidden;
}
.attach-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Крестик поверх угла: палец попадает по нему, не задевая саму карточку.
   Внутри иконка, а не символ «×»: у текстового крестика своя метрика, и по
   центру кружка он не встаёт — сидит ниже, сколько ни правь line-height. */
.attach-remove {
    position: absolute;
    top: 3px;
    inset-inline-end: 3px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 13, 20, .72);
    color: #fff;
    padding: 0;
    cursor: pointer;
}
.attach-remove svg { width: 12px; height: 12px; display: block; }

/* Скелетоны загрузки (docs/conventions.md §12).
   Прямоугольник той же формы, что и будущее содержимое: место резервируется
   заранее, и после ответа сервера страница не подпрыгивает. */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--surface-elevated);
    border-radius: var(--radius-input);
    /* Скелетон не должен читаться как текст: цвет фона, а не текста */
    color: transparent;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg, transparent, var(--surface), transparent
    );
    animation: skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes skeleton-sweep {
    100% { transform: translateX(100%); }
}
/* Бегущий блик отключается там, где человек попросил меньше движения */
@media (prefers-reduced-motion: reduce) {
    .skeleton::after { animation: none; }
}

/* Блок, который ждёт данных: содержимое приглушено и не мигает цифрами-заглушками.
   Применяется там, где карточка уже нарисована сервером, а числа приезжают
   запросом (профиль, подписка, приглашения). */
[data-loading] { opacity: .45; transition: opacity .18s ease-out; }
[data-loading] * { animation: none !important; }

.skeleton-line { height: 12px; margin-bottom: var(--space-2); }
.skeleton-line:last-child { margin-bottom: 0; width: 60%; }
.skeleton-title { height: 16px; width: 45%; margin-bottom: var(--space-3); }
.skeleton-avatar { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; }
.skeleton-card { height: 84px; margin-bottom: var(--space-3); border-radius: var(--radius-card); }
.skeleton-chip { height: 32px; width: 92px; border-radius: var(--radius-pill); }

/* ─── Лента чата и панель ввода ──────────────────────────────────────────── */

/* Перевёрнутая колонка: диалог открывается на последнем сообщении, а подгрузка
   истории сверху не сдвигает прочитанное (docs/egoweb/architecture.md §3) */
.chat-feed {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--screen-padding);
}
/* Горизонтальные ряды фильтров и категорий.
   Полосу прокрутки НЕ прячем: пальцем ряд листается и без неё, а мышью — уже
   нет, и на десктопе часть категорий оказалась бы недостижима. Вместо этого
   она перекрашена в цвета темы: системная светлая полоса в тёмном интерфейсе
   выглядит инородно. */
.scroll-row {
    display: flex;
    gap: .5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* Чтобы крайняя карточка не липла к краю экрана при прокрутке */
    scroll-padding-inline: var(--space-4);
    /* Место под полосу, иначе она наезжает на карточки */
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--text-tertiary) transparent;
}
.scroll-row::-webkit-scrollbar { height: 6px; }
.scroll-row::-webkit-scrollbar-track { background: transparent; }
.scroll-row::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 3px;
}
.scroll-row::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
.scroll-row > * { flex: 0 0 auto; }

.chat-feed::-webkit-scrollbar { display: none; }
.chat-feed { scrollbar-width: none; }

.chat-messages {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
}

.composer {
    background: var(--bg);
    border-top: 1px solid var(--divider);
    padding: var(--space-2) var(--space-3);
}

.composer-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-1);
}

.composer-input {
    flex: 1;
    max-height: 120px;
    min-height: 44px;
    padding: 11px var(--space-3);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    color: var(--text);
    font-family: inherit;
    font-size: var(--body-size);
    line-height: var(--body-line);
    resize: none;
    overflow-y: auto;
}
.composer-input::placeholder { color: var(--text-tertiary); }
.composer-input:focus { outline: none; }

.composer-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--gradient-button);
    color: #FFFFFF;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.composer-recording {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-1) 0;
}

/* Пульсирующая точка записи (§1.7: кольцо микрофона 1.2 с) */
.rec-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--error);
    animation: rec-pulse 1.2s ease-in-out infinite;
}

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

/* ─── Календарь и задачи (E-20…E-23) ─────────────────────────────────────── */

.calendar {
    background: var(--surface);
    border-radius: var(--radius-card);
    padding: var(--space-3);
}

.calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
/* Стрелка «вперёд» — та же иконка, отражённая: отдельная в наборе не нужна */
.flip { display: inline-flex; transform: scaleX(-1); }

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-1);
}

.calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--text);
    font-size: var(--caption-size);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.calendar-day.is-today { color: var(--accent); font-weight: 600; }
.calendar-day.is-selected { background: var(--accent); color: #FFFFFF; }
.calendar-day.is-selected .dot { outline: 1px solid rgba(255, 255, 255, 0.5); }

.calendar-dots { display: flex; gap: 3px; min-height: 6px; }

/* Точка приоритета: цвета — из дизайн-системы (§1.1) */
.dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    display: inline-block;
    background: var(--priority-medium);
}
.dot-urgent { background: var(--priority-urgent); }
.dot-high { background: var(--priority-high); }
.dot-medium { background: var(--priority-medium); }
.dot-low { background: var(--priority-low); }

.task-row,
.step-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-radius: var(--radius-card);
    cursor: pointer;
}
.task-row + .task-row { margin-top: var(--space-2); }
.step-row { background: transparent; padding: var(--space-2) 0; }

.task-check {
    flex: 0 0 auto;
    width: var(--size-checkbox);
    height: var(--size-checkbox);
    border-radius: 50%;
    border: 2px solid var(--text-tertiary);
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.task-check.is-done {
    background: var(--success);
    border-color: var(--success);
}

.task-title-done {
    text-decoration: line-through;
    color: var(--text-tertiary);
}

/* ─── Профиль (E-40…E-49) ────────────────────────────────────────────────── */

.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-profile);
    height: var(--avatar-profile);
    border-radius: 50%;
    background: var(--gradient-logo);
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 700;
    overflow: hidden;
    flex: 0 0 auto;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-editable { cursor: pointer; }
/* Подсказка «фото можно сменить»: без неё круг выглядит просто картинкой */
.avatar-editable::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 26px;
    background: rgba(0, 0, 0, 0.45);
}

.menu-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    color: var(--text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.menu-row:active { opacity: 0.7; }

/* Автодополнение города: список поверх формы, поэтому у поля своя система координат */
.city-picker { position: relative; }

.city-suggest {
    position: absolute;
    left: 0; right: 0; top: calc(var(--height-input) + var(--space-1));
    background: var(--surface-elevated);
    border-radius: var(--radius-input);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 20;
}

.city-option {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    color: var(--text);
    text-align: left;
    font-size: var(--body-size);
    cursor: pointer;
}
.city-option:active { background: var(--surface); }

/* ─── Модули и GoodWork (E-30…E-34) ──────────────────────────────────────── */

.module-card {
    display: block;
    background: var(--surface);
    border-radius: var(--radius-card-large);
    padding: var(--space-4);
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--divider);
}

.module-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius-input);
    background: var(--gradient-logo);
    color: #FFFFFF;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.module-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    aspect-ratio: 1;
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
}

.gw-card {
    display: flex;
    gap: var(--space-3);
    background: var(--surface);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    cursor: pointer;
}
.gw-card + .gw-card { margin-top: var(--space-2); }

.gw-card-photo {
    width: 64px; height: 64px;
    border-radius: var(--radius-input);
    object-fit: cover;
    flex: 0 0 auto;
}

.gw-photo {
    width: 100%;
    max-height: var(--photo-message-height);
    object-fit: cover;
    border-radius: var(--radius-card);
    margin-bottom: var(--space-2);
}

.gw-thumb {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: var(--radius-input);
}

/* Высокая шторка: карточка заявки и мастер длиннее экрана, им нужен свой скролл */
.sheet-tall {
    display: flex;
    flex-direction: column;
    max-height: 88dvh;
}

.sheet-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.sheet-scroll::-webkit-scrollbar { display: none; }
.sheet-scroll { scrollbar-width: none; }

/* Звёзды оценки (§1.5): заполненные — цветом предупреждения, пустые — третичным */
.stars { display: flex; gap: var(--space-2); }

.star {
    background: none;
    border: none;
    padding: 0;
    font-size: 32px;
    line-height: 1;
    color: var(--text-tertiary);
    cursor: pointer;
}
.star.is-filled { color: var(--warning); }

/* ─── Публичные страницы ─────────────────────────────────────────────────── */

/* Предупреждение о черновике документа: заметное, но не тревожное — это
   пометка о статусе текста, а не ошибка */
.doc-notice {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-input);
    padding: var(--space-3);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

details.card-ego summary {
    cursor: pointer;
    list-style: none;
}
details.card-ego summary::-webkit-details-marker { display: none; }
/* Стрелка складывается вместе с ответом — видно, что блок раскрывается */
details.card-ego summary::after {
    content: "▾";
    float: right;
    color: var(--text-tertiary);
    transition: transform var(--motion-message) var(--easing);
}
details.card-ego[open] summary::after { transform: rotate(180deg); }

/* ─── Live-режим (E-11) и просмотр фото (E-12) ───────────────────────────── */

/* Полноэкранный слой поверх чата: в живом разговоре на экране не должно быть
   ничего, кроме состояния и кнопки «завершить» */
.live-overlay {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--screen-padding);
    background: var(--bg);
    text-align: center;
}

.live-top {
    position: absolute;
    top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
    left: var(--screen-padding);
    right: var(--screen-padding);
    display: flex;
    justify-content: space-between;
}

/* Волна из пяти столбиков (§1.7): высота — по громкости, её задаёт скрипт */
.live-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 120px;
    margin-bottom: var(--space-4);
}

.live-wave i {
    display: block;
    width: 10px;
    height: 12%;
    border-radius: var(--radius-pill);
    background: var(--gradient-progress);
    transition: height 80ms linear;
}

.photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    padding: var(--space-4);
}

.photo-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-card);
}

.photo-close {
    position: absolute;
    top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
    right: var(--space-4);
    color: #FFFFFF;
}

/* ─── Чипы и плашки ──────────────────────────────────────────────────────── */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--caption-size);
    border: none;
    cursor: pointer;
}
.chip[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--micro-size);
    line-height: var(--micro-line);
    font-weight: var(--micro-weight);
    /* Цвет задаётся модификатором: фон — тот же цвет 12%, текст — сплошной */
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ─── Шапка и нижняя панель ──────────────────────────────────────────────── */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--screen-padding);
    background: var(--bg);
    border-bottom: 1px solid var(--divider);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
}

.tabbar {
    display: flex;
    height: var(--height-tabbar);
    background: var(--surface);
    border-top: 1px solid var(--divider);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: var(--micro-size);
    line-height: var(--micro-line);
    -webkit-tap-highlight-color: transparent;
}
.tab[aria-current="page"] { color: var(--accent); }
.tab svg { width: var(--size-tab-icon); height: var(--size-tab-icon); }
.tab-locked { opacity: 0.55; }

/* ─── Логотип ────────────────────────────────────────────────────────────── */

.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--gradient-logo);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 20px;
}

.logo-word {
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* ─── Пустые состояния, скелетоны, тосты ─────────────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    color: var(--text-secondary);
}
.empty-state svg { width: 48px; height: 48px; color: var(--text-tertiary); }

.skeleton {
    background: var(--surface);
    border-radius: var(--radius-card);
    position: relative;
    overflow: hidden;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--surface-elevated), transparent);
    animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.toast-stack {
    position: fixed;
    left: 50%;
    bottom: calc(var(--height-tabbar) + var(--space-4));
    transform: translateX(-50%);
    width: min(calc(var(--app-max-width) - 32px), calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 50;
    pointer-events: none;
}

.toast {
    background: var(--surface-elevated);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-input);
    padding: var(--space-3) var(--space-4);
    font-size: var(--caption-size);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: bubble-in var(--motion-message) var(--easing);
}
.toast-error { border-left-color: var(--error); }
.toast-success { border-left-color: var(--success); }

/* Подсказка «добавить на главный экран»: над нижней панелью, не перекрывает
   поле ввода в чате */
.install-hint {
    position: fixed;
    left: 50%;
    bottom: calc(var(--height-tabbar) + var(--space-2));
    transform: translateX(-50%);
    width: min(calc(var(--app-max-width) - 24px), calc(100vw - 24px));
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-elevated);
    border: 1px solid var(--divider);
    border-radius: var(--radius-input);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 45;
}

/* ─── Шторка (bottom sheet) ──────────────────────────────────────────────── */

.sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 40;
}

.sheet {
    /* Только верхняя грань: нижняя и боковые уходят за экран */
    border-top: 1px solid var(--border);
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--surface-elevated);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    padding: var(--space-3) var(--screen-padding) var(--space-6);
    z-index: 41;
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}

.sheet-handle {
    width: 36px; height: 4px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--text-tertiary);
}

/* ─── Прогресс онбординга ────────────────────────────────────────────────── */

.progress-ego {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-elevated);
    overflow: hidden;
}
.progress-ego > div {
    height: 100%;
    background: var(--gradient-progress);
    border-radius: var(--radius-pill);
    transition: width var(--motion-screen) var(--easing);
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    *, *::after, *::before {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}