/* ============================================================
   Дизайн «Material You» (Material 3 / M3 Expressive-стиль).
   Включается: <html data-design="material">

   Спецификация ролей (tone-таблица) взята из документации
   Material Components — theming/Color.md (color roles):
   light : primary=40, onPrimary=100, primaryContainer=90,
           onPrimaryContainer=10, secondary=40/90/10, tertiary=40/90/10,
           error=40/90/10, outline=neutralVariant50, outlineVariant=neutralVariant80,
           surface/background=neutral98, onSurface=neutral10,
           surfaceVariant=neutralVariant90, onSurfaceVariant=neutralVariant30,
           surfaceContainer: lowest=100, low=96, base=94, high=92, highest=90,
           surfaceDim=87, surfaceBright=98, inverseSurface=20, inverseOnSurface=95
   dark  : primary=80, onPrimary=20, primaryContainer=30, onPrimaryContainer=90,
           outline=neutralVariant60, outlineVariant=neutralVariant30,
           surface/background=neutral6, onSurface=neutral90,
           surfaceContainer: lowest=4, low=10, base=12, high=17, highest=22 …

   Нейтрали (neutral / neutral-variant) в Material You насыщаются тоном
   seed-цвета — поэтому бежевый seed даёт тёплые бежевые поверхности.
   Дефолтный seed — бежевый (#b69e78).

   Палитру (--m3-* + канонические алиасы --md-sys-color-*) генерирует
   assets/js/design-material.js из seed-цвета (HCT, @material/material-color-utilities).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ── Статичный бежевый M3-ским (fallback до загрузки JS-палитры) ── */
:root[data-design="material"] {
    /* primary (beige-brown, tone 40) */
    --m3-primary: #7d5e3c; --m3-on-primary: #ffffff; --m3-primary-container: #ffdfbd; --m3-on-primary-container: #2c1700;
    --m3-secondary: #6f5d46; --m3-secondary-container: #fae1bd; --m3-on-secondary-container: #271904;
    --m3-tertiary: #5c623c; --m3-tertiary-container: #e0e7b6; --m3-on-tertiary-container: #191e00;
    --m3-error: #ba1a1a; --m3-error-container: #ffdad6; --m3-on-error-container: #410002;
    /* neutral / neutral-variant (тёплая бежевая база) */
    --m3-surface: #fff8f2; --m3-on-surface: #211a12;
    --m3-surface-dim: #e5d8cc; --m3-surface-bright: #fff8f2;
    --m3-surface-container-lowest: #ffffff; --m3-surface-container-low: #fff1e5;
    --m3-surface-container: #fbeadc; --m3-surface-container-high: #f5e4d6; --m3-surface-container-highest: #efdfd1;
    --m3-surface-variant: #f4dfd0; --m3-on-surface-variant: #524438;
    --m3-outline: #847467; --m3-outline-variant: #d7c3b3;
    --m3-inverse-surface: #372f27; --m3-inverse-on-surface: #faede2; --m3-inverse-primary: #efc18c;
    --m3-scrim: #000000;
    --m3-on-secondary: #ffffff; --m3-on-tertiary: #ffffff; --m3-on-error: #ffffff; --m3-surface-tint: #7d5e3c;
    --m3-primary-fixed: #ffdfbd; --m3-primary-fixed-dim: #efc18c; --m3-on-primary-fixed: #2c1700; --m3-on-primary-fixed-variant: #63401c;
    --m3-secondary-fixed: #fae1bd; --m3-secondary-fixed-dim: #ddc2a4; --m3-on-secondary-fixed: #271904; --m3-on-secondary-fixed-variant: #57442d;
    --m3-tertiary-fixed: #e0e7b6; --m3-tertiary-fixed-dim: #c4cb9e; --m3-on-tertiary-fixed: #191e00; --m3-on-tertiary-fixed-variant: #444a27;
    /* M3 elevation shadows (level1 / level2 / level3) */
    --m3-shadow-1: 0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --m3-shadow-2: 0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
    --m3-shadow-3: 0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
    /* M3 motion */
    --m3-easing-emphasized: cubic-bezier(.2, 0, 0, 1);
    --m3-easing-standard: cubic-bezier(.2, 0, 0, 1);
    --m3-dur-short: 200ms; --m3-dur-medium: 350ms; --m3-dur-long: 500ms;
    /* Shape scale (M3): xs=4 sm=8 md=12 lg=16 xl=28 full=999 */
    --m3-shape-xs: 4px; --m3-shape-sm: 8px; --m3-shape-md: 12px; --m3-shape-lg: 16px; --m3-shape-xl: 28px; --m3-shape-full: 999px;
}
:root[data-design="material"][data-theme="dark"] {
    --m3-primary: #efc18c; --m3-on-primary: #462a08; --m3-primary-container: #63401c; --m3-on-primary-container: #ffdfbd;
    --m3-secondary: #ddc2a4; --m3-secondary-container: #57442d; --m3-on-secondary-container: #fae1bd;
    --m3-tertiary: #c4cb9e; --m3-tertiary-container: #444a27; --m3-on-tertiary-container: #e0e7b6;
    --m3-error: #ffb4ab; --m3-error-container: #93000a; --m3-on-error-container: #ffdad6;
    --m3-surface: #18120b; --m3-on-surface: #f0dfd2;
    --m3-surface-dim: #18120b; --m3-surface-bright: #3f3228;
    --m3-surface-container-lowest: #120d07; --m3-surface-container-low: #211a12;
    --m3-surface-container: #261e16; --m3-surface-container-high: #31281f; --m3-surface-container-highest: #3c3229;
    --m3-surface-variant: #524438; --m3-on-surface-variant: #d7c3b3;
    --m3-outline: #a08d7e; --m3-outline-variant: #524438;
    --m3-inverse-surface: #f0dfd2; --m3-inverse-on-surface: #372f27; --m3-inverse-primary: #7d5e3c;
    --m3-on-secondary: #3d2e1a; --m3-on-tertiary: #2e3410; --m3-on-error: #690005; --m3-surface-tint: #efc18c;
}

/* Канонические токены Material Web / @m3e/web (чтобы компоненты M3 темились автоматически) */
:root[data-design="material"] {
    --md-sys-color-primary: var(--m3-primary);
    --md-sys-color-on-primary: var(--m3-on-primary);
    --md-sys-color-primary-container: var(--m3-primary-container);
    --md-sys-color-on-primary-container: var(--m3-on-primary-container);
    --md-sys-color-secondary: var(--m3-secondary);
    --md-sys-color-secondary-container: var(--m3-secondary-container);
    --md-sys-color-on-secondary-container: var(--m3-on-secondary-container);
    --md-sys-color-tertiary: var(--m3-tertiary);
    --md-sys-color-tertiary-container: var(--m3-tertiary-container);
    --md-sys-color-on-tertiary-container: var(--m3-on-tertiary-container);
    --md-sys-color-error: var(--m3-error);
    --md-sys-color-error-container: var(--m3-error-container);
    --md-sys-color-on-error-container: var(--m3-on-error-container);
    --md-sys-color-surface: var(--m3-surface);
    --md-sys-color-on-surface: var(--m3-on-surface);
    --md-sys-color-surface-variant: var(--m3-surface-variant);
    --md-sys-color-on-surface-variant: var(--m3-on-surface-variant);
    --md-sys-color-surface-container-lowest: var(--m3-surface-container-lowest);
    --md-sys-color-surface-container-low: var(--m3-surface-container-low);
    --md-sys-color-surface-container: var(--m3-surface-container);
    --md-sys-color-surface-container-high: var(--m3-surface-container-high);
    --md-sys-color-surface-container-highest: var(--m3-surface-container-highest);
    --md-sys-color-outline: var(--m3-outline);
    --md-sys-color-outline-variant: var(--m3-outline-variant);
    --md-sys-color-inverse-surface: var(--m3-inverse-surface);
    --md-sys-color-inverse-on-surface: var(--m3-inverse-on-surface);
    --md-sys-color-inverse-primary: var(--m3-inverse-primary);
    --md-sys-color-on-secondary: var(--m3-on-secondary);
    --md-sys-color-on-tertiary: var(--m3-on-tertiary);
    --md-sys-color-on-error: var(--m3-on-error);
    --md-sys-color-surface-dim: var(--m3-surface-dim);
    --md-sys-color-surface-bright: var(--m3-surface-bright);
    --md-sys-color-surface-tint: var(--m3-surface-tint);
    --md-sys-color-primary-fixed: var(--m3-primary-fixed);
    --md-sys-color-primary-fixed-dim: var(--m3-primary-fixed-dim);
    --md-sys-color-on-primary-fixed: var(--m3-on-primary-fixed);
    --md-sys-color-on-primary-fixed-variant: var(--m3-on-primary-fixed-variant);
    --md-sys-color-secondary-fixed: var(--m3-secondary-fixed);
    --md-sys-color-secondary-fixed-dim: var(--m3-secondary-fixed-dim);
    --md-sys-color-on-secondary-fixed: var(--m3-on-secondary-fixed);
    --md-sys-color-on-secondary-fixed-variant: var(--m3-on-secondary-fixed-variant);
    --md-sys-color-tertiary-fixed: var(--m3-tertiary-fixed);
    --md-sys-color-tertiary-fixed-dim: var(--m3-tertiary-fixed-dim);
    --md-sys-color-on-tertiary-fixed: var(--m3-on-tertiary-fixed);
    --md-sys-color-on-tertiary-fixed-variant: var(--m3-on-tertiary-fixed-variant);
    --md-sys-color-scrim: var(--m3-scrim);
    --md-sys-color-shadow: var(--m3-scrim);
}

/* ── Маппинг токенов приложения на роли M3 ── */
:root[data-design="material"] {
    --bg-primary: var(--m3-surface);
    --bg-secondary: var(--m3-surface-container);
    --bg-hover: color-mix(in srgb, var(--m3-on-surface) 8%, transparent);   /* state layer 8% */
    --bg-active: color-mix(in srgb, var(--m3-on-surface) 10%, transparent); /* state layer 10% */
    --text-primary: var(--m3-on-surface);
    --text-secondary: var(--m3-on-surface-variant);
    --text-inverse: var(--m3-on-primary);
    --accent-primary: var(--m3-primary);
    --accent-secondary: var(--m3-secondary);
    --accent-hover: var(--m3-primary);
    --accent-like: var(--m3-error);
    --accent-repost: var(--m3-tertiary);
    --link-color: var(--m3-primary);
    --link-color-hover: var(--m3-primary);
    --border-color: var(--m3-outline-variant);
    --border-subtle: color-mix(in srgb, var(--m3-outline-variant) 55%, transparent);
    --block-bg: var(--m3-surface-container);
    --modal-bg: var(--m3-surface-container-high);
    --block-bg-secondary: var(--m3-surface-container-high);
    --block-hover-bg: var(--m3-surface-container-highest);
    --tab-active-bg: var(--m3-secondary-container);
    --settings-tab-active-bg: var(--m3-secondary-container);
    --btn-primary-bg: var(--m3-primary);
    --btn-primary-text: var(--m3-on-primary);
    --glass-bg: color-mix(in srgb, var(--m3-surface) 92%, transparent);
    --chatWindow: var(--m3-surface-container-low);
    --shadow-elevated: var(--m3-shadow-1);

    /* Пузыри сообщений (role: surfaceContainerHigh / primaryContainer) */
    --bubble-in-bg: var(--m3-surface-container-high);
    --bubble-in-text: var(--m3-on-surface);
    --bubble-out-bg: var(--m3-primary-container);
    --bubble-out-text: var(--m3-on-primary-container);
    --bubble-out-link: var(--m3-on-primary-container);
    --bubble-out-soft: color-mix(in srgb, var(--m3-on-primary-container) 14%, transparent);

    /* Роли в группах: контрастные поверх surfaceContainer */
    --chat-sender-name: color-mix(in srgb, var(--m3-primary) 78%, var(--m3-on-surface));
    --chat-sender-name-alt: color-mix(in srgb, var(--m3-tertiary) 82%, var(--m3-on-surface));

    --radius-sm: var(--m3-shape-sm);
    --radius-md: var(--m3-shape-lg);
    --radius-full: var(--m3-shape-full);
}

/* ── Типографика M3 (Roboto, шкала display/headline/title/body/label) ── */
:root[data-design="material"] body {
    font-family: 'Roboto', 'Inter', system-ui, sans-serif;
    font-size: 14px; line-height: 20px; letter-spacing: .25px; /* body-medium */
}
:root[data-design="material"] input,
:root[data-design="material"] textarea,
:root[data-design="material"] button,
:root[data-design="material"] select {
    font-family: 'Roboto', 'Inter', system-ui, sans-serif;
}
:root[data-design="material"] .settings-section-title,
:root[data-design="material"] .modal-title { font-size: 16px; line-height: 24px; letter-spacing: .15px; font-weight: 500; } /* title-medium */
:root[data-design="material"] .conv-name { font-size: 14px; line-height: 20px; letter-spacing: .1px; font-weight: 500; } /* label-large / title-small */
:root[data-design="material"] .conv-time,
:root[data-design="material"] .conv-preview,
:root[data-design="material"] .settings-desc { font-size: 12px; line-height: 16px; letter-spacing: .4px; } /* body-small */
:root[data-design="material"] .btn { font-size: 14px; line-height: 20px; letter-spacing: .1px; font-weight: 500; } /* label-large */
:root[data-design="material"] .msg-text { font-size: 14px; line-height: 20px; letter-spacing: .25px; } /* body-medium */
:root[data-design="material"] .msg-time { font-size: 11px; line-height: 16px; letter-spacing: .5px; } /* label-small */

/* ── State layers (M3: hover 8% / focus 10% / pressed 10%) ── */
:root[data-design="material"] .btn,
:root[data-design="material"] .nav-item,
:root[data-design="material"] .tab-btn,
:root[data-design="material"] .folder-chip {
    position: relative;
    transition: background var(--m3-dur-short) var(--m3-easing-standard),
                box-shadow var(--m3-dur-short) var(--m3-easing-standard),
                transform var(--m3-dur-short) var(--m3-easing-emphasized);
}
:root[data-design="material"] .btn:active { transform: scale(.98); }

/* ── Кнопки M3: filled / tonal / outlined / text ─────────── */
:root[data-design="material"] .btn {
    border-radius: var(--m3-shape-full);      /* M3 button = full-round (height 40) */
    min-height: 40px;
    border: none;
    text-transform: none;
}
:root[data-design="material"] .btn-accent,
:root[data-design="material"] .btn-primary {           /* filled */
    background: var(--m3-primary); color: var(--m3-on-primary); box-shadow: none;
}
:root[data-design="material"] .btn-accent:hover,
:root[data-design="material"] .btn-primary:hover {
    background: var(--m3-primary);
    box-shadow: var(--m3-shadow-1);
}
:root[data-design="material"] .btn-accent:hover:not([data-m3e-fx])::before,
:root[data-design="material"] .btn-primary:hover:not([data-m3e-fx])::before {
    content: ''; position: absolute; inset: 0;
    background: var(--m3-on-primary); opacity: .08; border-radius: inherit;
}
:root[data-design="material"] .btn-secondary {          /* tonal */
    background: var(--m3-secondary-container); color: var(--m3-on-secondary-container);
}
:root[data-design="material"] .btn-secondary:hover:not([data-m3e-fx])::before {
    content: ''; position: absolute; inset: 0;
    background: var(--m3-on-secondary-container); opacity: .08; border-radius: inherit;
}
:root[data-design="material"] .btn-danger {             /* filled, роль error */
    background: var(--m3-error); color: var(--m3-on-error);
}
:root[data-design="material"] .btn-ghost {              /* text */
    background: transparent; color: var(--m3-primary);
}
:root[data-design="material"] .btn-ghost:hover:not([data-m3e-fx])::before {
    content: ''; position: absolute; inset: 0;
    background: var(--m3-primary); opacity: .08; border-radius: inherit;
}
:root[data-design="material"] .btn-sm { min-height: 32px; font-size: 12px; letter-spacing: .5px; }
:root[data-design="material"] .btn:disabled,
:root[data-design="material"] .btn[disabled] {
    background: color-mix(in srgb, var(--m3-on-surface) 12%, transparent);
    color: color-mix(in srgb, var(--m3-on-surface) 38%, transparent);
    box-shadow: none;
}

/* ── Фокус-индикатор M3 (2dp primary, offset 3dp) ── */
:root[data-design="material"] .btn:focus-visible,
:root[data-design="material"] .input:focus-visible,
:root[data-design="material"] .nav-item:focus-visible {
    outline: 2px solid var(--m3-primary);
    outline-offset: 3px;
}

/* ── Карточки M3: outlined / elevated, shape md/lg ── */
:root[data-design="material"] .post-card,
:root[data-design="material"] .card,
:root[data-design="material"] .panel,
:root[data-design="material"] .profile-card,
:root[data-design="material"] .comment-card,
:root[data-design="material"] .settings-section {
    border-radius: var(--m3-shape-lg) !important;
    background: var(--m3-surface-container-low);
    border: 1px solid var(--m3-outline-variant);
    box-shadow: none;
}
:root[data-design="material"] .compose-box {
    border-radius: var(--m3-shape-lg) !important;
    background: var(--m3-surface-container-high);
    border: 1px solid var(--m3-outline-variant);
}

/* ── Диалоги/меню M3: shape xl=28, surfaceContainerHigh ── */
:root[data-design="material"] .modal {
    border-radius: var(--m3-shape-xl) !important;
    background: var(--m3-surface-container-high);
    border: none;
    box-shadow: var(--m3-shadow-3);
}

/* ── Поля ввода M3 (outlined): shape xs=4, outline 1dp → focus primary 2dp ── */
:root[data-design="material"] .input,
:root[data-design="material"] .chat-input-pill {
    border-radius: var(--m3-shape-xs) !important;
    background: var(--m3-surface-container-highest);
    border: 1px solid var(--m3-outline);
    transition: border-color var(--m3-dur-short) var(--m3-easing-standard);
}
:root[data-design="material"] .input:focus,
:root[data-design="material"] .chat-input-pill:focus-within {
    border: 2px solid var(--m3-primary);
    box-shadow: none;
}

/* ── Кнопка отправки = FAB M3 (shape lg=16, primaryContainer) ── */
:root[data-design="material"] .fab,
:root[data-design="material"] .chat-send-btn {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
    border-radius: var(--m3-shape-lg);
    box-shadow: var(--m3-shadow-3);
    border: none;
}

/* ── Переключатель M3 (Switch spec: track 52×32, thumb 16→24) ── */
:root[data-design="material"] .toggle {
    width: 52px; height: 32px;
    border-radius: var(--m3-shape-full);
    background: var(--m3-surface-container-highest);
    border: 2px solid var(--m3-outline);
    position: relative;
    transition: background var(--m3-dur-short) var(--m3-easing-standard),
                border-color var(--m3-dur-short) var(--m3-easing-standard);
    flex-shrink: 0;
}
:root[data-design="material"] .toggle::after {
    content: ''; position: absolute;
    top: 50%; left: 6px; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: var(--m3-shape-full);
    background: var(--m3-outline);
    transition: left var(--m3-dur-short) var(--m3-easing-emphasized),
                width var(--m3-dur-short) var(--m3-easing-emphasized),
                height var(--m3-dur-short) var(--m3-easing-emphasized),
                background var(--m3-dur-short) var(--m3-easing-standard);
}
:root[data-design="material"] .toggle.on {
    background: var(--m3-primary);
    border-color: var(--m3-primary);
}
:root[data-design="material"] .toggle.on::after {
    left: 24px; width: 24px; height: 24px;
    background: var(--m3-on-primary);
}

/* ── Чипы M3: shape full, selected = secondaryContainer ── */
:root[data-design="material"] .folder-chip,
:root[data-design="material"] .slowmode-chip {
    border-radius: var(--m3-shape-full) !important;
}
:root[data-design="material"] .folder-chip.active,
:root[data-design="material"] .slowmode-chip.active {
    background: var(--m3-secondary-container);
    color: var(--m3-on-secondary-container);
}
:root[data-design="material"] .folder-chip.active:not([data-m3e-fx])::before {
    content: ''; position: absolute; inset: 0;
    background: var(--m3-on-secondary-container); opacity: .08; border-radius: inherit;
}

/* ── Табы M3 (primary tabs): прозрачный фон, активный = primary.
   Индикатор — уже существующий скользящий .tabs::after из app.css (его позицию
   двигает JS), здесь он лишь приводится к M3: 3dp, скругление сверху, цвет primary. ── */
:root[data-design="material"] .tab-btn {
    border-radius: 0 !important;
    background: transparent;
    color: var(--m3-on-surface-variant);
    font-weight: 500;
}
:root[data-design="material"] .tab-btn.active {
    background: transparent !important;
    color: var(--m3-primary);
    font-weight: 500;
}
:root[data-design="material"] .tabs { border-bottom: 1px solid var(--m3-outline-variant); }
:root[data-design="material"] .tabs::after {
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--m3-primary);
}

/* ── Навигация M3: active indicator 64×32 (pill, secondaryContainer) ── */
:root[data-design="material"] .nav-item.active,
:root[data-design="material"] .mobile-nav-btn.active {
    background: var(--m3-secondary-container);
    color: var(--m3-on-secondary-container);
    border-radius: var(--m3-shape-full);
}

/* ── Список диалогов: активный пункт = secondaryContainer, контент читаем ── */
:root[data-design="material"] .conv-item {
    border-radius: var(--m3-shape-full) !important;
    border-bottom: none;
}
:root[data-design="material"] .conv-item.active {
    background: var(--m3-secondary-container);
}
:root[data-design="material"] .conv-item.active .conv-name,
:root[data-design="material"] .conv-item.active .conv-preview,
:root[data-design="material"] .conv-item.active .conv-time {
    color: var(--m3-on-secondary-container);
}
:root[data-design="material"] .conv-unread-dot {
    background: var(--m3-primary); color: var(--m3-on-primary);
}

/* ── Сообщения M3: shape lg=16, «хвост» 4px ── */
:root[data-design="material"] .bubble.in  { border-radius: var(--m3-shape-lg) var(--m3-shape-lg) var(--m3-shape-lg) var(--m3-shape-xs); box-shadow: none; }
:root[data-design="material"] .bubble.out { border-radius: var(--m3-shape-lg) var(--m3-shape-lg) var(--m3-shape-xs) var(--m3-shape-lg); box-shadow: none; }
:root[data-design="material"] .chat-messages { background-image: none; }

/* ── Тосты (snackbar M3: inverseSurface) ── */
:root[data-design="material"] .toast {
    border-radius: var(--m3-shape-xs);
    background: var(--m3-inverse-surface);
    color: var(--m3-inverse-on-surface);
}

/* ── Прогресс/бары ── */
:root[data-design="material"] .progress-bar,
:root[data-design="material"] .voice-msg-progress-fill { background: var(--m3-primary) !important; }

/* ── Скроллбар в тон outline-variant ── */
:root[data-design="material"] ::-webkit-scrollbar-thumb {
    background: var(--m3-outline-variant);
    border-radius: var(--m3-shape-full);
}

/* ── Элевация шапки/панелей (M3 level1) ── */
:root[data-design="material"] .chat-header,
:root[data-design="material"] .page-header {
    background: var(--m3-surface-container);
    box-shadow: none;
    border-bottom: 1px solid var(--m3-outline-variant);
}

/* ============================================================
   Интеграция реальных компонентов @m3e/web (см. assets/js/m3e-material.js)
   ============================================================ */

/* state-layer / ripple подсажены внутрь элементов — слои absolute inset:0 */
:root[data-design="material"] [data-m3e-fx] { overflow: hidden; -webkit-tap-highlight-color: transparent; }
:root[data-design="material"] [data-m3e-fx] > m3e-state-layer,
:root[data-design="material"] [data-m3e-fx] > m3e-ripple {
    --m3e-state-layer-hover-color: currentColor;
    --m3e-state-layer-focus-color: currentColor;
    --m3e-state-layer-pressed-color: currentColor;
    --m3e-ripple-color: currentColor;
}
/* у чипов/пунктов, где контент выпадает за рамку (бейджи, подсказки), ripple не режем */
:root[data-design="material"] .mobile-nav-btn[data-m3e-fx],
:root[data-design="material"] .nav-item[data-m3e-fx] { overflow: visible; }
:root[data-design="material"] .mobile-nav-btn[data-m3e-fx] > m3e-ripple,
:root[data-design="material"] .nav-item[data-m3e-fx] > m3e-ripple { overflow: hidden; border-radius: inherit; }

/* Переключатель: внутри button.toggle живёт настоящий <m3e-switch> (состояние = класс .on).
   Свою дорисовку трека/ползунка отключаем — всё рисует компонент. */
:root[data-design="material"] .toggle[data-m3e-switch] {
    width: 52px; height: 32px; padding: 0; border: 0; background: transparent;
    border-radius: var(--m3-shape-full); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: visible;
}
:root[data-design="material"] .toggle[data-m3e-switch]::after { display: none; }
:root[data-design="material"] .toggle[data-m3e-switch].on { background: transparent; border-color: transparent; }
:root[data-design="material"] .toggle[data-m3e-switch] > m3e-switch { pointer-events: none; }

/* Индикатор загрузки M3 Expressive вместо Lottie */
:root[data-design="material"] .itdo-loader.itdo-loader-m3e {
    display: inline-flex; align-items: center; justify-content: center;
    --m3e-loading-indicator-active-indicator-color: var(--m3-primary);
    --m3e-loading-indicator-contained-active-indicator-color: var(--m3-on-primary-container);
    --m3e-loading-indicator-contained-container-color: var(--m3-primary-container);
}
:root[data-design="material"] .itdo-loader-text { color: var(--m3-on-surface-variant); font-size: 14px; line-height: 20px; letter-spacing: .25px; }
:root[data-design="material"] #app-loading { background: var(--m3-surface) !important; }

/* Снекбар: цвета ролей M3 + отступ над нижней навигацией на мобилке */
:root[data-design="material"] m3e-snackbar {
    --m3e-snackbar-container-color: var(--m3-inverse-surface);
    --m3e-snackbar-supporting-text-color: var(--m3-inverse-on-surface);
    --m3e-snackbar-container-shape: var(--m3-shape-xs);
}
:root[data-design="material"][data-m3e="ready"] #toast-container { display: none; }
@media (max-width: 1100px) {   /* ниже этой ширины приложение показывает нижнюю навигацию */
    :root[data-design="material"] m3e-snackbar { --m3e-snackbar-margin: 96px; }
}

/* Скелетоны M3 */
:root[data-design="material"] m3e-skeleton {
    display: block;
    --m3e-skeleton-color: var(--m3-surface-container-highest);
}

/* Выбор дизайна в настройках: пока бандл не готов (и в «Классике») — обычные кнопки,
   в Material You — настоящая сегментированная кнопка @m3e/web */
.design-chooser-m3e { display: none; }
:root[data-design="material"][data-m3e="ready"] .design-chooser-m3e { display: inline-flex; }
:root[data-design="material"][data-m3e="ready"] .design-chooser-fallback { display: none !important; }

/* Секции настроек: внутренние отступы, строки без вложенной рамки */
:root[data-design="material"] .settings-section { padding: 16px 20px; }
:root[data-design="material"] .settings-section .settings-row {
    border: none; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0;
}

/* Настройки: секция = карточка с внутренними отступами, строки внутри — списком с разделителями */
:root[data-design="material"] .settings-section { padding: 16px 20px; margin-bottom: 16px; overflow: hidden; }
:root[data-design="material"] .settings-section > .settings-section-title { margin-bottom: 12px; }
:root[data-design="material"] .settings-row {
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    border-bottom: 1px solid var(--m3-outline-variant); padding-top: 12px; padding-bottom: 12px;
}
:root[data-design="material"] .settings-section > .settings-row:last-child { border-bottom: 0; }

/* Папки чатов — фильтр-чипы M3 (32dp), без индикатора вкладок и нижней линии */
:root[data-design="material"] .tabs:has(.folder-chip) { border-bottom: 0; gap: 8px; padding: 8px 12px; }
:root[data-design="material"] .tabs:has(.folder-chip)::after { display: none; }
:root[data-design="material"] .folder-chip {
    height: 32px; padding: 0 14px; border: 1px solid var(--m3-outline); color: var(--m3-on-surface-variant);
    font-size: 14px; font-weight: 500; letter-spacing: .1px; background: transparent;
}
:root[data-design="material"] .folder-chip.active { border-color: transparent; }
:root[data-design="material"] .folder-chip-selection { display: none !important; }

/* Диалоги M3: заголовок headline-small, без разделителей, действия справа */
:root[data-design="material"] .modal .modal-header { border-bottom: 0; padding: 24px 24px 8px; }
:root[data-design="material"] .modal .modal-title { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
:root[data-design="material"] .modal .modal-footer { border-top: 0; padding: 16px 24px 24px; }
:root[data-design="material"] .modal-overlay { background: color-mix(in srgb, var(--m3-scrim) 32%, transparent); }

/* Лоадер без фона/контейнера */
:root[data-design="material"] .itdo-loader.itdo-loader-m3e,
:root[data-design="material"] .itdo-loader m3e-loading-indicator { background: transparent !important; box-shadow: none; }

/* Боковая панель = M3 Navigation drawer (standard): поверхность, пункты 56dp-пилюли,
   активный = secondaryContainer, без рамок/сдвигов, разделители outlineVariant */
:root[data-design="material"] .sidebar {
    background: var(--m3-surface-container-low);
    border-right: 0;
    padding: 12px 12px 16px;
}
:root[data-design="material"] .sidebar-logo { padding: 16px 16px 12px; margin-bottom: 4px; font-weight: 700; color: var(--m3-on-surface-variant); }
:root[data-design="material"] .sidebar-nav { gap: 0; }
:root[data-design="material"] .nav-item {
    height: 48px; padding: 0 16px; gap: 12px; box-sizing: border-box; border: 0;
    border-radius: var(--m3-shape-full);
    font-size: 14px; line-height: 20px; letter-spacing: .1px; font-weight: 500;
    color: var(--m3-on-surface-variant);
    transform: none;
}
:root[data-design="material"] .nav-item:hover { background: transparent; transform: none; color: var(--m3-on-surface); }
:root[data-design="material"] .nav-item.active {
    background: var(--m3-secondary-container); color: var(--m3-on-secondary-container);
    box-shadow: none; font-weight: 600;
}
:root[data-design="material"] .nav-item.active svg,
:root[data-design="material"] .nav-item.active .ui-icon { color: var(--m3-on-secondary-container); }
:root[data-design="material"] .sidebar-separator { background: var(--m3-outline-variant); margin: 8px 16px; }
:root[data-design="material"] .nav-badge { background: var(--m3-error); color: var(--m3-on-error); border-radius: var(--m3-shape-full); }

/* ── Мост для отдельных страниц со своими именами переменных
   (download, index, bot-api, support, ipban…) ── */
:root[data-design="material"] {
    --bg: var(--m3-surface);
    --panel: var(--m3-surface-container-low);
    --panel2: var(--m3-surface-container-high);
    --card: var(--m3-surface-container-low);
    --surface: var(--m3-surface-container-low);
    --surface-2: var(--m3-surface-container-high);
    --text: var(--m3-on-surface);
    --text-sec: var(--m3-on-surface-variant);
    --muted: var(--m3-on-surface-variant);
    --muted2: var(--m3-outline);
    --accent: var(--m3-primary);
    --link: var(--m3-primary);
    --border: var(--m3-outline-variant);
    --line: var(--m3-outline-variant);
    --code: var(--m3-surface-container-highest);
    --code-text: var(--m3-on-surface);
    --danger: var(--m3-error);
    --success: var(--m3-tertiary);
}
:root[data-design="material"] body { background: var(--m3-surface); color: var(--m3-on-surface); }

/* ============================================================
   Колонки как панели M3 (adaptive panes): общий фон — surfaceContainerLow,
   центральная колонка — скруглённая панель surface (28dp), боковые
   колонки сливаются с фоном и держат контент в карточках/пунктах.
   ============================================================ */
:root[data-design="material"] .app-shell { background: var(--m3-surface-container-low); }
:root[data-design="material"] .sidebar { background: transparent; }
:root[data-design="material"] .main-content {
    background: var(--m3-surface);
    border: 0;
    border-radius: var(--m3-shape-xl);
    margin: 12px 0;
    overflow: clip;
}
:root[data-design="material"] .page-header { background: var(--m3-surface); box-shadow: none; border-bottom: 1px solid var(--m3-outline-variant); }
:root[data-design="material"] .right-panel { background: transparent; border: 0; padding-left: 12px; padding-right: 12px; }
:root[data-design="material"] .right-panel .card,
:root[data-design="material"] .right-panel .panel,
:root[data-design="material"] .right-panel .widget {
    background: var(--m3-surface-container); border: 0; border-radius: var(--m3-shape-lg);
}
@media (max-width: 1100px) {
    :root[data-design="material"] .main-content { margin: 0; border-radius: 0; }
}

/* ── Чат в Material You: без рамки-карточки, фон не «прилипает» к окну,
   колонка занимает весь свободный объём и не уезжает за экран ── */
:root[data-design="material"] .chat-window {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: var(--m3-surface) !important;
    height: 100%;
    min-height: 0;
    max-height: 100%;
}
:root[data-design="material"] .chat-messages {
    background-attachment: scroll !important;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

/* ── Рамка-панель M3 не уезжает за экран: вся оболочка ровно по высоте окна,
   центральная панель скруглена со всех сторон, скроллится сама страница ── */
:root[data-design="material"] .app-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
:root[data-design="material"] .main-content {
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--m3-shape-xl);
}
/* ИСПРАВЛЕНО: раньше здесь стоял display:flex для ВСЕХ .page — он перебивал
   .page{display:none} из app.css, и Лента/Сообщения/Настройки рисовались
   одновременно друг под другом. Теперь flex только у активной страницы. */
:root[data-design="material"] .main-content > .page:not(.active) { display: none; }
:root[data-design="material"] .main-content > .page.active {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;            /* скроллится сама страница, шапка липнет сверху */
    overscroll-behavior: contain;
}
:root[data-design="material"] .main-content > .page > .page-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
}
/* ИСПРАВЛЕНО: раньше каждый потомок страницы получал flex:1 1 auto и свой
   overflow-y — карточка публикации, вкладки и лента растягивались и
   скроллились по отдельности. Теперь потомки занимают свою высоту. */
:root[data-design="material"] .main-content > .page > :not(.page-header) {
    flex: 0 0 auto;
    min-width: 0;
}
/* Страницы с собственным внутренним скроллом (чаты, пиксельбатл) */
:root[data-design="material"] #page-messages.active,
:root[data-design="material"] #page-pixelbattle.active { overflow: hidden; }
:root[data-design="material"] #page-messages > .messages-layout {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* Узкое окно и «Мобильная версия» (media-запросы переписываются в 430px):
   панель на всю высоту, без 24px зазора снизу */
@media (max-width: 1100px) {
    :root[data-design="material"] .main-content {
        height: 100vh;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
}