/*
 * Тема панели повторяет визуальный язык Telegram: синий акцент, пузыри сообщений, цветные
 * аватарки с инициалами. Шрифты системные, внешних ресурсов нет. Токены — из прошлой
 * итерации (apps/panel/src/styles.css), тёмная тема переопределяет переменные.
 */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --paper: #f0f2f5;
  --surface: #ffffff;
  --surface-muted: #f4f4f5;
  --ink: #0f1419;
  --ink-muted: #707579;
  --border: #e3e5e8;
  --accent: #3390ec;
  --accent-strong: #1c79d0;
  --success: #2fa84f;
  --danger: #e0453a;
  --chat: #dfe7ee;
  --bubble: #ffffff;
  --bubble-meta: #8a9299;
  --chip: rgb(0 0 0 / 0.32);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f0f10;
    --surface: #1c1c1e;
    --surface-muted: #262628;
    --ink: #f2f2f3;
    --ink-muted: #9a9da3;
    --border: #2e2e31;
    --accent: #6ab3f3;
    --accent-strong: #8cc6f8;
    --success: #5fcf7a;
    --danger: #ff6b61;
    --chat: #0b1016;
    --bubble: #212124;
    --bubble-meta: #8b8f96;
    --chip: rgb(255 255 255 / 0.14);
  }
}
html { color-scheme: light dark; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; font-size: 16px; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font-family: inherit; }
code.inline { font-family: var(--font-mono); font-size: 0.9em; }

/* Цвета «пиров» Telegram: красный, оранжевый, фиолетовый, зелёный, бирюзовый, синий, розовый. */
.tg-bg-0 { background-image: linear-gradient(#ff885e, #ff516a); }
.tg-bg-1 { background-image: linear-gradient(#ffcd6a, #ffa85c); }
.tg-bg-2 { background-image: linear-gradient(#82b1ff, #665fff); }
.tg-bg-3 { background-image: linear-gradient(#a0de7e, #54cb68); }
.tg-bg-4 { background-image: linear-gradient(#53edd6, #28c9b7); }
.tg-bg-5 { background-image: linear-gradient(#72d5fd, #2a9ef1); }
.tg-bg-6 { background-image: linear-gradient(#e0a2f3, #d669ed); }
.tg-text-0 { color: #cc5049; } .tg-text-1 { color: #d67722; } .tg-text-2 { color: #955cdb; }
.tg-text-3 { color: #40a920; } .tg-text-4 { color: #309eba; } .tg-text-5 { color: #368ad1; } .tg-text-6 { color: #c7508b; }
.tg-border-0 { border-color: #cc5049; } .tg-border-1 { border-color: #d67722; } .tg-border-2 { border-color: #955cdb; }
.tg-border-3 { border-color: #40a920; } .tg-border-4 { border-color: #309eba; } .tg-border-5 { border-color: #368ad1; } .tg-border-6 { border-color: #c7508b; }
@media (prefers-color-scheme: dark) {
  .tg-text-0 { color: #ff8e86; } .tg-text-1 { color: #ecb04e; } .tg-text-2 { color: #c697ff; }
  .tg-text-3 { color: #a7eb6e; } .tg-text-4 { color: #40d8d0; } .tg-text-5 { color: #52bfff; } .tg-text-6 { color: #ff86a6; }
}

/* Фон чата: мягкие цветные пятна поверх ровного тона — по настроению как обои Telegram. */
.chat-canvas {
  background-color: var(--chat);
  background-image:
    radial-gradient(60rem 28rem at 12% -8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    radial-gradient(48rem 26rem at 105% 108%, color-mix(in srgb, var(--success) 16%, transparent), transparent 60%);
}
/* Время в пузыре стоит в конце последней строки текста, как в Telegram. */
.bubble-meta { float: right; margin: 0.4rem 0 -0.15rem 0.75rem; display: flex; align-items: center; gap: 0.25rem; font-size: 11px; line-height: 1rem; color: var(--bubble-meta); user-select: none; }
.spoiler { background-color: color-mix(in srgb, var(--ink) 22%, transparent); color: transparent; border-radius: 0.25rem; transition: color 0.15s, background-color 0.15s; }
.spoiler:hover, .spoiler:focus { background-color: transparent; color: inherit; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .rise-in { animation: rise-in 0.22s ease-out both; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }
}

/* Оболочка: шапка вне прокручиваемой области. */
.shell { display: flex; flex-direction: column; height: 100dvh; }
.header { flex-shrink: 0; z-index: 20; border-bottom: 1px solid var(--border); background: var(--surface); }
.header__inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; }
.header__brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1; }
.header__logo { display: flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: var(--accent); color: #fff; }
.header__text { min-width: 0; }
.header__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; line-height: 1.25; }
.header__subtitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.25; color: var(--ink-muted); }
.header__user { display: flex; align-items: center; gap: 0.625rem; }
.header__user-text { display: none; text-align: right; }
.header__name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 500; line-height: 1.25; }
.header__role { font-size: 0.75rem; line-height: 1.25; color: var(--ink-muted); }
@media (min-width: 640px) { .header__user-text { display: block; } }
.icon-button { display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border: 0; border-radius: 9999px; background: transparent; color: var(--ink-muted); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.icon-button:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.icon-button--neutral:hover { background: var(--surface-muted); color: var(--ink); }
.icon { width: 1.15rem; height: 1.15rem; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 2rem; height: 2rem; }
/* Место под полосу прокрутки отведено всегда, чтобы содержимое не прыгало. */
.scroll-root { min-height: 0; flex: 1; overflow-y: auto; scrollbar-gutter: stable both-edges; }
.main { max-width: 72rem; margin: 0 auto; padding: 1rem 0.75rem; }
@media (min-width: 640px) { .main { padding: 1.25rem 1rem; } }
.narrow { max-width: 42rem; margin: 0 auto; }
.stack > * + * { margin-top: 0.75rem; }
/* Между блоками страницы — шире, чем между строками внутри карточки. */
.narrow.stack > * + * { margin-top: 1rem; }

/* Типографика */
.page-title { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.muted { color: var(--ink-muted); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.section-title { margin: 0 0 0.5rem; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }

/* Карточка */
.card { border-radius: 1rem; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.card--padded { padding: 1rem; }
.card--padded > .section-title:not(:first-of-type) { margin-top: 1.25rem; }
.card--dashed { border-style: dashed; box-shadow: none; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3.5rem 1.5rem; text-align: center; color: var(--ink-muted); }
.empty p { max-width: 20rem; font-size: 0.875rem; }

/* Список как список чатов Telegram: разделитель начинается после аватарки. */
.list { list-style: none; margin: 0; padding: 0; overflow: hidden; border-radius: 1rem; }
.list__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; transition: background-color 0.15s; }
.list__row:hover, .list__row:focus-visible { background: var(--surface-muted); outline: none; }
@media (min-width: 640px) { .list__row { padding-left: 1rem; padding-right: 1rem; } }
.list__body { min-width: 0; flex: 1; border-bottom: 1px solid var(--border); padding: 0.25rem 0; }
.list > li:last-child .list__body { border-bottom: 0; }
.list__line { display: flex; align-items: baseline; gap: 0.5rem; }
.list__title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; line-height: 1.375; }
.list__time { flex-shrink: 0; font-size: 0.75rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.list__sub { margin-top: 0.125rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-muted); }
.list__sub-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Аватарка: круг с инициалами, цвет по идентификатору. */
.avatar { display: flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; color: #fff; font-weight: 600; user-select: none; }
.avatar--sm { width: 2.25rem; height: 2.25rem; font-size: 13px; }
.avatar--md { width: 3rem; height: 3rem; font-size: 1rem; }
.avatar--lg { width: 5rem; height: 5rem; font-size: 1.5rem; }
img.avatar { object-fit: cover; background: var(--surface-muted); }

/* Бейджи */
.badge { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--surface-muted); padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
.badge--accent { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-strong); }
.badge--success { border-color: color-mix(in srgb, var(--success) 30%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); }
.badge--danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.badge__dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: currentColor; }

/* Переключатель */
.toggle { position: relative; width: 2.75rem; height: 1.5rem; flex-shrink: 0; border-radius: 9999px; border: 1px solid var(--border); background: var(--surface-muted); padding: 0; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.toggle[aria-checked="true"] { border-color: var(--accent); background: var(--accent); }
.toggle__knob { position: absolute; top: 0.125rem; left: 0; width: 1.125rem; height: 1.125rem; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.1); transform: translateX(0.125rem); transition: transform 0.15s; }
.toggle[aria-checked="true"] .toggle__knob { transform: translateX(22px); }
.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Тот же переключатель на чекбоксе — для полей формы, без JS. */
.switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.switch__input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.switch__track { position: relative; width: 2.75rem; height: 1.5rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--surface-muted); transition: background-color 0.15s, border-color 0.15s; }
.switch__knob { position: absolute; top: 0.125rem; left: 0; width: 1.125rem; height: 1.125rem; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.1); transform: translateX(0.125rem); transition: transform 0.15s; }
.switch__input:checked + .switch__track { border-color: var(--accent); background: var(--accent); }
.switch__input:checked + .switch__track .switch__knob { transform: translateX(22px); }
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Кнопки */
.btn { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); padding: 0.375rem 0.875rem; font-size: 13px; font-weight: 500; cursor: pointer; }
.btn--primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-strong); }
.btn:not(.btn--primary):hover { background: var(--surface-muted); }
.back { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; padding: 0.25rem 0.5rem; font-size: 0.875rem; color: var(--ink-muted); transition: background-color 0.15s, color 0.15s; }
.back:hover { background: var(--surface); color: var(--ink); }

/* Страница чата */
.chat { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) {
  .chat { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; gap: 1.25rem; }
  .chat__aside { position: sticky; top: 1.25rem; }
}
.chat__panel { overflow: clip; }
.chat__head { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--border); padding: 0.625rem 0.75rem; }
@media (min-width: 640px) { .chat__head { padding-left: 1rem; padding-right: 1rem; } }
.chat__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 600; line-height: 1.2; }
.chat__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.2; color: var(--ink-muted); }
.days { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); padding: 0.375rem 0.5rem; }
.days__nav { display: flex; flex-shrink: 0; align-items: center; }
.days__nav .icon-button { width: 2rem; height: 2rem; }
.days__month { min-width: 6.75rem; text-align: center; font-size: 13px; font-weight: 500; }
.days__month::first-letter { text-transform: uppercase; }
.days__list { display: flex; min-width: 0; flex: 1; gap: 0.375rem; overflow-x: auto; border-left: 1px solid var(--border); padding-left: 0.5rem; }
.day-chip { display: flex; flex-shrink: 0; align-items: center; gap: 0.375rem; border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color 0.15s; }
.day-chip:hover { background: var(--surface-muted); }
.day-chip--active { background: var(--accent); color: #fff; }
.day-chip--active:hover { background: var(--accent-strong); }
.day-chip__count { font-variant-numeric: tabular-nums; opacity: 0.8; }
.canvas { min-height: 22rem; padding: 0.75rem 0.5rem; }
@media (min-width: 640px) { .canvas { padding: 1rem; } }
.canvas__note { display: flex; min-height: 18rem; align-items: center; justify-content: center; padding: 0 1rem; }
.canvas__note p { max-width: 24rem; border-radius: 1rem; background: var(--chip); color: #fff; padding: 0.5rem 1rem; text-align: center; font-size: 13px; line-height: 1.375; }
.date-sticky { position: sticky; top: 0.5rem; z-index: 10; display: flex; justify-content: center; padding-bottom: 0.25rem; }
.chip { border-radius: 9999px; background: var(--chip); color: #fff; padding: 0.25rem 0.75rem; font-size: 13px; font-weight: 500; backdrop-filter: blur(4px); }

/* Лента: серии одного автора — имя у первого, аватарка у последнего. */
.feed { list-style: none; margin: 0; padding: 0; }
.msg { display: flex; align-items: flex-end; gap: 0.5rem; margin-top: 0.125rem; }
.msg--first { margin-top: 0.625rem; }
.msg__avatar { width: 2.25rem; flex-shrink: 0; }
.bubble { min-width: 0; max-width: min(36rem, calc(100% - 5rem)); border-radius: 1rem; background: var(--bubble); padding: 0.375rem 0.75rem; box-shadow: 0 1px 1.5px rgb(0 0 0 / 0.12); }
.bubble--continued { border-top-left-radius: 0.375rem; }
.bubble--middle { border-bottom-left-radius: 0.375rem; }
.bubble--last { border-bottom-left-radius: 5px; }
.bubble__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 1.25rem; }
.bubble__text { white-space: pre-wrap; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.bubble__meta-row { display: flex; justify-content: flex-end; }
.bubble__note { clear: both; padding-top: 0.25rem; font-size: 11px; color: var(--bubble-meta); }
.versions { clear: both; margin: 0.375rem 0 0; padding: 0.375rem 0 0; border-top: 1px solid var(--border); list-style: none; }
.versions li { font-size: 13px; line-height: 1.375; }
.versions li + li { margin-top: 0.375rem; }
.versions__meta { font-size: 11px; color: var(--bubble-meta); }
.versions__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.service { display: flex; justify-content: center; margin: 0.5rem 0; }
.service span { border-radius: 9999px; background: var(--chip); color: #fff; padding: 0.25rem 0.75rem; font-size: 13px; }
.quote { margin-bottom: 0.125rem; border-left: 3px solid; border-radius: 0.375rem; background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 0.125rem 0.5rem; font-size: 13px; line-height: 1.3; }
.quote p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote__name { font-weight: 600; }
.quote__text { color: var(--ink-muted); }
.media { margin: 0.25rem 0; display: flex; align-items: center; gap: 0.625rem; }
.media__icon { display: flex; width: 2.5rem; height: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: var(--accent); color: #fff; }
.media__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; line-height: 1.2; }
.media__info { display: block; font-size: 13px; line-height: 1.2; color: var(--ink-muted); }
.media--tile { width: 12rem; height: 7rem; max-width: 100%; flex-direction: column; justify-content: center; gap: 0.25rem; border-radius: 0.75rem; background: var(--surface-muted); color: var(--ink-muted); font-size: 0.75rem; }
.fmt-code { border-radius: 0.25rem; background: color-mix(in srgb, var(--ink) 10%, transparent); padding: 0 0.25rem; font-family: var(--font-mono); font-size: 13px; }
.fmt-pre { margin: 0.25rem 0; overflow-x: auto; border-radius: 0.375rem; background: color-mix(in srgb, var(--ink) 10%, transparent); padding: 0.5rem; font-family: var(--font-mono); font-size: 13px; line-height: 1.375; }
.fmt-quote { display: block; margin: 0.125rem 0; border-left: 3px solid var(--accent); border-radius: 0.375rem; background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 0.125rem 0.5rem; }
.fmt-link, .fmt-mention { color: var(--accent); }
.fmt-link:hover { text-decoration: underline; }
.raw-toggle { margin-bottom: 0.125rem; display: flex; width: 1.75rem; height: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center; border: 0; border-radius: 9999px; background: var(--chip); color: #fff; opacity: 0.5; cursor: pointer; }
.raw-toggle:hover { opacity: 1; }
.raw { clear: both; margin-top: 0.375rem; border-radius: 0.5rem; background: var(--surface-muted); padding: 0.5rem; }
.raw pre { margin: 0; max-height: 16rem; overflow: auto; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--ink-muted); }

/* Сведения о чате */
.about { display: flex; flex-direction: column; align-items: center; text-align: center; }
.about__title { margin: 0.75rem 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.about__type { margin-top: 0.125rem; font-size: 0.875rem; color: var(--ink-muted); }
.about__badges { margin-top: 0.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; }
.dl { margin: 1rem 0 0; border-top: 1px solid var(--border); padding-top: 0.75rem; font-size: 0.875rem; }
.dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.dl > div + div { margin-top: 0.5rem; }
.dl dt { color: var(--ink-muted); }
.dl dd { margin: 0; font-weight: 500; text-align: right; }
.feature { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; }
.feature + .feature { border-top: 1px solid var(--border); }
.section-title + .feature { padding-top: 0.25rem; }
.feature__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 15px; font-weight: 500; line-height: 1.375; }
.feature__desc { margin-top: 0.125rem; font-size: 13px; line-height: 1.375; color: var(--ink-muted); }
.warning { margin-top: 0.25rem; display: flex; align-items: flex-start; gap: 0.5rem; border-radius: 0.75rem; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 5%, transparent); padding: 0.625rem 0.75rem; font-size: 13px; line-height: 1.375; color: var(--danger); }
.warning .icon { margin-top: 0.125rem; flex-shrink: 0; }
.hint { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.375; color: var(--ink-muted); }
.failed { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 13px; }
.failed li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--border); padding: 0.375rem 0; }
.failed code { font-family: var(--font-mono); font-size: 12px; color: var(--danger); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Вспомогательные классы вместо атрибутов style="": CSP default-src 'self' запрещает inline-стили. */
.min-w-0 { min-width: 0; }
.page-head { padding: 0 0.25rem; }
.page-head--row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.report__title { font-weight: 600; margin-bottom: 0.25rem; }
.chat-page { padding-bottom: 2rem; }
.chat__head-text { min-width: 0; flex: 1; }
.feed-end { height: 1px; }
.new-messages { position: sticky; bottom: 0.75rem; display: block; margin: 0.5rem auto 0; padding: 0.375rem 0.875rem; border: 0; border-radius: 9999px; background: var(--accent); color: #fff; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); }
.new-messages[hidden] { display: none; }
.dl--full { width: 100%; }
.media__emoji { font-size: 2.25rem; line-height: 1; }
.edited-toggle { all: unset; cursor: pointer; }

/* Вход */
.login { display: flex; min-height: 100dvh; align-items: center; justify-content: center; padding: 1rem; }
.login__card { width: 100%; max-width: 22rem; text-align: center; }
.login__card .stack { margin-top: 0.5rem; }
.login__logo { margin: 0 auto 0.75rem; width: 3rem; height: 3rem; }
.login__card .page-title { margin-bottom: 0.5rem; }

/* Навигация разделов — продолжение шапки, вне прокручиваемой области. */
.header:has(+ .nav) { border-bottom: 0; }
.nav { flex-shrink: 0; display: flex; padding: 0 0 0.5rem; overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--border); }
/* На широком экране меню по центру; если не помещается — auto-отступы схлопываются и оно прокручивается с первого пункта. */
.nav__inner { flex-shrink: 0; display: flex; gap: 0.25rem; margin: 0 auto; padding: 0 1rem; }
.nav__link, .tab { padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 14px; color: var(--ink-muted); white-space: nowrap; }
.nav__link--active, .tab--active { background: var(--accent); color: #fff; }

/* Поиск по архиву. */
.search-form { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.search-form__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.input, .select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.5rem 0.75rem; min-width: 0; }
.input { flex: 1 1 12rem; }
.input[type="date"] { flex: 0 1 11rem; }
.search-form__row > .btn { margin-left: auto; }
@media (max-width: 640px) { .search-form .search-form__row > * { flex: 1 1 100%; } .search-form__row > .btn { justify-content: center; } }
.result { display: flex; gap: 0.75rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); }
.result:last-child { border-bottom: 0; }
.result__body { min-width: 0; flex: 1; }
.result__head { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 13px; color: var(--ink-muted); }
.result__text { margin-top: 0.125rem; font-size: 15px; word-break: break-word; }
.result__text mark { background: rgb(51 144 236 / 0.2); color: inherit; border-radius: 0.25rem; }
.result__links { display: flex; gap: 0.75rem; margin-top: 0.25rem; font-size: 13px; }
.pager { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 14px; }
.msg:target .bubble { outline: 2px solid var(--accent); outline-offset: 2px; }
.field { display: grid; gap: 0.25rem; }
.field__label { font-size: 13px; color: var(--ink-muted); }
.input--short { max-width: 10rem; flex: none; }
.plain:has(> .session) { gap: 0; }
.session { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; padding: 0.625rem 0; border-bottom: 1px solid var(--border); }
.session:first-child { padding-top: 0; }
.session:last-child { border-bottom: 0; padding-bottom: 0; }
.session__agent { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; word-break: break-word; }
.audit-row { display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); }
.audit-row:last-child { border-bottom: 0; }
.audit-row__diff { font-size: 13px; word-break: break-all; }
/* Вкладки Журнала — те же стили, что у ссылок навигации разделов (см. .nav__link). */
.tabs { display: flex; gap: 0.25rem; }