/* === [css/themes/themes.css] === */
/* === themes.css ===
   Централизованная дизайн-система. 
   Переменные совместимы со стандартами тем Obsidian и нативно поддерживают темы Telegram.
   
   ПРАВИЛО: В других CSS-файлах запрещено использовать сырые цвета (hex/rgb). 
   Используйте только эти семантические токены. 
*/

:root {
	--font-size-rem: 14px;
	--font-size-base: 14px;

	/* === BLOCK 0: GLOBAL CONSTANTS (Skeleton & Layout Geometry) ===
	   Values in this block do NOT change based on theme mode. */

	/* Animations and Transitions */
	--anim-fast: 0.1s;
	--anim-base: 0.2s;
	--anim-slow: 0.3s;
	--anim-speed: var(--anim-slow);
	/* [QUIET_UI]: Мягкое появление сообщений через translateY (8px) необходимо для визуального комфорта.
	   При 0px интерфейс кажется слишком резким. */
	--bubble-offset: 8px;
	--transition-base: background-color var(--anim-fast), color var(--anim-fast), border-color var(--anim-fast);

	/* Geometry & Spacing System */
	--nav-item-height: 3.286rem;
	--nav-item-padding-x: var(--size-4-5);
	--nav-item-padding-y: var(--size-4-3);
	--button-padding-x: var(--size-4-3);
	--button-padding-y: var(--size-4-2);
	--size-2-1: 0.143rem;
	--size-4-1: 0.286rem;
	--size-4-2: 0.571rem;
	--size-4-3: 0.857rem;
	--size-4-3-5: 1.0rem;
	--size-4-4: 1.143rem;
	--size-4-5: 1.429rem;
	--size-4-6: 1.714rem;
	--size-4-7: 2.0rem;
	--size-4-8: 2.286rem;
	--size-4-9: 2.571rem;
	--size-4-10: 2.857rem;
	--size-4-11: 3.143rem;
	--size-4-12: 3.429rem;
	--size-4-13: 3.714rem;
	--size-4-14: 4.0rem;
	--size-4-15: 4.286rem;
	--size-4-16: 4.571rem;
	--size-4-23: 6.571rem;
	--p-margin-bottom: 1.5rem;
	--header-offset: 5.5rem;

	/* Radius Defaults */
	--radius-s: 0.429rem;
	/* 6px: Теги, чекбоксы, мелкие детали */
	--radius-m: 0.571rem;
	/* 8px: Общий стандарт (кнопки, меню, формы) */
	--radius-l: 0.714rem;
	/* 10px: Крупные карточки и панели */
	--radius-pill: 999px;
	/* Капсула: прогресс-бары, лоадеры */
	--radius-circle: 50%;
	/* Круг: только аватары и акцентные кнопки */
	--avatar-group-radius: 0.571rem;
	/* Фиксированное скругление аватарок групп (8px), одинаковое для всех тем */
	--avatar-user-radius: var(--radius-circle);
	/* Фиксированное скругление аватарок пользователей (круг) */
	--button-radius: var(--radius-m);
	--bubble-radius: var(--size-4-4);
	/* 16px: Пузыри сообщений */
	--input-radius: var(--radius-m);
	--container-radius: var(--size-4-3);
	/* 12px: Главные контейнеры (карточки новостей) */

	/* Icons Geometry */
	--icon-l: 1.429rem;
	--icon-m: 1.286rem;
	--icon-s: 1.143rem;
	--icon-xs: 0.857rem;

	/* Shadows Geometry */
	--shadow-m: 0 0.429rem 0.857rem var(--shadow-color);
	--shadow-s: 0 0.286rem 0.429rem var(--shadow-color-soft);

	/* Permanent Colors (Static) */
	--always-white: #ffffff;
	--always-black: #000000;
	--always-white-soft: rgba(255, 255, 255, 0.3);

	/* Базовые значения */
	--line-height-tight: 1.2;
	/* Для заголовков */
	--line-height-snug: 1.3;
	/* Для плотных блоков */
	--line-height-normal: 1.4;
	/* Стандарт для UI */
	--line-height-relaxed: 1.5;
	/* Для основного текста (чтение) */
	--line-height-loose: 1.6;
	/* Для очень длинных текстов */

	/* Typography Scale */
	--ui-zoom: 1;
	--ui-zoom-content: 1;

	--font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: "JetBrains Mono", "Fira Code", monospace;
	--font-weight-bold: 700;
	--font-weight-semibold: 600;
	--font-weight-medium: 500;
	--font-weight-normal: 400;

	/* === ШКАЛА ШРИФТОВ ИНТЕРФЕЙСА (UI Scale, зависит от --ui-zoom) === */
	--font-avatar-letter: calc(var(--font-size-rem) * 3 * var(--ui-zoom));
	--font-ui-xxlarge: calc(var(--font-size-rem) * 1.714 * var(--ui-zoom));
	--font-ui-xlarge: calc(var(--font-size-rem) * 1.429 * var(--ui-zoom));
	--font-ui-large: calc(var(--font-size-rem) * 1.143 * var(--ui-zoom));
	--font-ui-normal: calc(var(--font-size-rem) * 1.0 * var(--ui-zoom));
	--font-ui-medium: calc(var(--font-size-rem) * 0.857 * var(--ui-zoom));
	--font-ui-small: calc(var(--font-size-rem) * 0.786 * var(--ui-zoom));
	--font-ui-smaller: calc(var(--font-size-rem) * 0.714 * var(--ui-zoom));

	/* === ШКАЛА ШРИФТОВ КОНТЕНТА (Content Scale, зависит от --ui-zoom-content) === */
	--font-content-xxlarge: calc(var(--font-size-base) * 1.714 * var(--ui-zoom-content));
	--font-content-xlarge: calc(var(--font-size-base) * 1.429 * var(--ui-zoom-content));
	--font-content-large: calc(var(--font-size-base) * 1.143 * var(--ui-zoom-content));
	--font-content-normal: calc(var(--font-size-base) * 1.0 * var(--ui-zoom-content));
	--font-content-medium: calc(var(--font-size-base) * 0.857 * var(--ui-zoom-content));
	--font-content-small: calc(var(--font-size-base) * 0.786 * var(--ui-zoom-content));
	--font-content-smaller: calc(var(--font-size-base) * 0.714 * var(--ui-zoom-content));

	/* === СЕМАНТИЧЕСКИЕ ПЕРЕМЕННЫЕ ЭЛЕМЕНТОВ === */
	--font-size-message: var(--font-content-medium);
	--font-size-paragraph: var(--font-content-normal);

	--font-size-input_ios: 16px;
	--font-size-input: var(--font-ui-normal);
	--font-size-button: var(--font-ui-normal);
	--font-size-tab-header: var(--font-ui-normal);

	--p-line-height: var(--line-height-loose);

	/* Global Components Geometry */
	--rail-width: 4.286rem;
	--rail-item-size: 2.75rem;
	--rail-icon-size: 1.5rem;
	--toolbar-item-height: var(--rail-item-size);
	--toolbar-icon-size: var(--rail-icon-size);
	--divider-width: 0.071rem;

	/* Calendar */
	--calendar-picker-filter: var(--interactive-accent);

	/* Alerts & Notifications */
	--alert-radius: var(--radius-m);
	--alert-padding: 0.75rem 1.071rem;
	--alert-margin: 0 0 1rem 0;
	--alert-blur: 8px;
	--alert-border-width: var(--divider-width);
	--alert-shadow: var(--shadow-l);

	/* Callout */
	--callout-radius: var(--radius-m);
	--callout-border-width-left: 0.286rem;
	--callout-title-padding: 0.714rem 0.714rem;
	--callout-content-padding: 0.714rem;
	--callout-background: var(--background-secondary);
	--callout-title-color: var(--text-normal);
	--callout-title-background: transparent;
	--callout-title-size: var(--font-size-paragraph);
	--callout-title-weight: var(--font-weight-semibold);
	--callout-blend-mode: normal;

	/* Checkboxes */
	--checkbox-radius: var(--radius-s);
	--checkbox-size: 1.286rem;
	--checkbox-marker-color: var(--background-primary);

	/* Headings */
	--h1-color: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 75%);
	--h2-color: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 55%);
	--h3-color: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 35%);
	--h1-size: var(--font-content-xxlarge);
	--h2-size: var(--font-content-xlarge);
	--h3-size: var(--font-content-large);
	--heading-weight: var(--font-weight-semibold);
	--h1-weight: var(--heading-weight);
	--h2-weight: var(--heading-weight);
	--h3-weight: var(--heading-weight);

	/* Links */
	--link-decoration: underline;
	--link-weight: var(--font-weight-medium);

	/* Tags */
	--tag-radius: var(--radius-s);
	--tag-size: var(--font-content-medium);

	/* Quote */
	--quote-radius: var(--radius-m);
	--quote-border-width: 0.214rem;

	/* Scrollbars */
	--scrollbar-width: 0.429rem;
	--scrollbar-radius: var(--radius-m);

	/* --- Z-Index Layers --- */
	--z-overlay: 9000;
	/* Startup, Fullscreen modals */
	--z-context: 3000;
	/* Context Menus */
	--z-drawer: 2000;
	/* Mobile drawers & overlays */
	--z-header: 1000;
	/* Sticky headers, Tab bars, Fixed inputs */
	--z-pinned: 100;
	/* Pinned elements, Chat input area */
	--z-dropdown: 50;
	/* Select menus, Tooltips */
	--z-base: 1;
	/* Base level for relative stacking */

	/* --- Component Mapping (Shared Tokens) --- */
	--chat-input-padding-y: 0.25rem;
	--chat-input-padding-x: var(--size-4-5);
	--chat-input-z-index: var(--z-pinned);

	/* Messenger Bubbles */
	--bubble-border-left: var(--callout-border-width-left, 0.286rem) solid var(--interactive-accent);

	/* --- Gaming & Belts --- */
	--gaming-belt-yellow: #facc15;
	--gaming-belt-orange: #f97316;
	--gaming-belt-green: #22c55e;
	--gaming-progress-bg: var(--background-secondary-alt);
	--gaming-progress-height: 1.714rem;
	--gaming-progress-radius: var(--radius-pill);

	/* Identity / Avatars */
	--color-identity-1: #e17076;
	--color-identity-2: #7bc862;
	--color-identity-3: #e5ca77;
	--color-identity-4: #65aadd;
	--color-identity-5: #a695e7;
	--color-identity-6: #ee7aae;

}

/* Адаптация базового шрифта под iOS (улучшение читаемости и баланс с iOS инпутами) */
@supports (-webkit-touch-callout: none) {
	:root {
		--font-size-base: 16px;
	}
}

/* === BLOCK 1: MASTER THEME VARIABLES (Full Token Set) === */

:root,
.theme-light {
	/* --- Leaf Colors (Palette) --- */
	--mono-100: #ffffff;
	--mono-200: #f5f5f7;
	--mono-300: #e5e5e7;
	--mono-400: #d1d1d6;
	--mono-500: #8e8e93;
	--mono-600: #636366;
	--mono-700: #48484a;
	--mono-800: #2c2c2e;
	--mono-900: #1d1d1f;

	--accent-primary: #439c24;
	--accent-shaded: color-mix(in srgb, var(--interactive-accent), black 20%);

	/* --- Backgrounds --- */
	--background-primary: var(--tg-theme-bg-color, var(--mono-100));
	--background-primary-alt: #fafafb;
	--background-secondary: var(--tg-theme-secondary-bg-color, var(--mono-200));
	--background-secondary-alt: #e2e4e7;

	/* Modifiers */
	--background-modifier-border: rgba(0, 0, 0, 0.12);
	--background-modifier-border-hover: rgba(0, 0, 0, 0.2);
	--background-modifier-hover: rgba(0, 0, 0, 0.05);
	--background-modifier-active: rgba(0, 0, 0, 0.1);
	--background-modifier-back-30: rgba(0, 0, 0, 0.1);
	--background-modifier-overlay: rgba(0, 0, 0, 0.4);

	/* --- Interaction --- */
	--interactive-accent: var(--tg-theme-button-color, var(--accent-primary));
	--interactive-accent-soft: color-mix(in srgb, var(--interactive-accent), transparent 90%);
	--interactive-hover: var(--background-modifier-hover);
	--divider-color: var(--background-modifier-border);

	/* --- Text --- */
	--text-normal: var(--tg-theme-text-color, var(--mono-900));
	--text-muted: var(--tg-theme-hint-color, #86868b);
	--text-on-accent: var(--tg-theme-button-text-color, #212121);
	--text-link: var(--h3-color);
	--text-link-hover: color-mix(in srgb, var(--text-link), black 15%);
	--text-error: var(--tg-theme-destructive-text-color, #da6362);
	--text-warning: #d97706;
	--text-success: #2ea043;
	--background-warning: rgba(217, 119, 6, 0.08);
	--background-error: rgba(220, 38, 38, 0.08);
	--background-success: rgba(46, 160, 67, 0.08);
	--text-bold: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 44%);
	--text-italic: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 30%);
	--text-debug: var(--text-muted);
	--icon-color: var(--text-muted);
	--icon-color-hover: var(--interactive-accent);

	/* --- Component Mapping --- */
	--rail-bg: var(--background-primary-alt);
	--toolbar-bg: var(--background-primary);
	--chat-input-bg: var(--background-primary);

	/* Messenger Bubbles */
	--bubble-bg-own: var(--interactive-accent-soft);
	--bubble-bg-other: var(--background-primary-alt);
	--bubble-text-own: var(--text-normal);
	--bubble-text-other: var(--text-normal);
	--bubble-border-own: var(--divider-width) solid var(--background-modifier-border);
	--bubble-border-other: var(--divider-width) solid var(--background-modifier-border);
	--bubble-bg-own-shaded: var(--accent-shaded);

	/* --- UI Alerts --- */
	--alert-error-bg: rgba(218, 99, 98, 0.85);
	--alert-error-border: rgba(218, 99, 98, 1);
	--alert-error-text: var(--mono-100);
	--alert-success-bg: rgba(76, 175, 80, 0.85);
	--alert-success-border: #4caf50;
	--alert-success-text: var(--mono-100);

	/* --- Visual Depth --- */
	--shadow-color: rgba(0, 0, 0, 0.1);
	--shadow-color-soft: rgba(0, 0, 0, 0.05);
	--scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
	--scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.3);
	--scrollbar-bg: transparent;

	/* --- Forms & Extras --- */
	--checkbox-color: var(--interactive-accent);
	--checkbox-border-color: var(--background-modifier-border);
	--tag-background: var(--background-modifier-hover);
	--tag-color: var(--interactive-accent);
	--quote-background: var(--background-secondary);
	--quote-border-color: var(--interactive-accent);

	/* --- Admin JSON Logs  --- */
	--color-json-string: #2e8b57;
	--color-json-number: #d2691e;
	--color-json-true: #228b22;
	--color-json-false: #b22222;
	--color-json-null: #808080;
}

/* === BLOCK 2: DARK THEME OVERRIDES (Unified @media and .class) === */

@media (prefers-color-scheme: dark) {
	:root:not(.theme-light) {
		--is-dark: 1;
	}
}

.theme-dark {
	--is-dark: 1;
}


/* Fallback for system dark mode if .theme-light is NOT present */
@media (prefers-color-scheme: dark) {
	:root:not(.theme-light) {
		--mono-100: #17212b;
		--mono-200: #0e161d;
		--mono-300: #242f3d;
		--mono-900: #f5f5f5;

		--accent-primary: #add34e;
		--accent-shaded: color-mix(in srgb, var(--interactive-accent), black 20%);

		--background-primary: var(--tg-theme-bg-color, var(--mono-100));
		--background-primary-alt: #1e2933;
		--background-secondary: var(--tg-theme-secondary-bg-color, var(--mono-300));
		--background-secondary-alt: #364150;

		--background-modifier-border: rgba(255, 255, 255, 0.15);
		--background-modifier-border-hover: rgba(255, 255, 255, 0.25);
		--background-modifier-hover: rgba(255, 255, 255, 0.08);
		--background-modifier-active: rgba(255, 255, 255, 0.12);
		--background-modifier-back-30: rgba(255, 255, 255, 0.15);
		--background-modifier-overlay: rgba(0, 0, 0, 0.65);

		--interactive-accent: var(--tg-theme-button-color, var(--accent-primary));
		--interactive-accent-soft: color-mix(in srgb, var(--interactive-accent), transparent 85%);
		--divider-color: var(--background-modifier-border);

		--text-normal: var(--tg-theme-text-color, var(--mono-900));
		--h1-color: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 88%);
		--h2-color: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 52%);
		--h3-color: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 27%);
		--text-muted: var(--tg-theme-hint-color, #708499);
		--text-on-accent: var(--tg-theme-button-text-color, #212121);
		--text-link: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 45%);
		--text-link-hover: color-mix(in srgb, var(--text-link), white 15%);
		--text-bold: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 60%);
		--text-italic: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 45%);
		--text-error: var(--tg-theme-destructive-text-color, #da6362);
		--text-warning: #f59e0b;
		--text-success: #10b981;
		--background-warning: rgba(245, 158, 11, 0.12);
		--background-error: rgba(239, 68, 68, 0.12);
		--background-success: rgba(16, 185, 129, 0.12);

		--bubble-bg-own: var(--interactive-accent-soft);
		--bubble-bg-other: var(--background-primary-alt);
		--bubble-bg-own-shaded: var(--accent-shaded);

		--alert-error-bg: rgba(218, 99, 98, 0.85);
		--alert-error-border: rgba(218, 99, 98, 1);
		--alert-error-text: var(--mono-900);
		--alert-success-bg: rgba(76, 175, 80, 0.85);
		--alert-success-border: rgba(76, 175, 80, 1);
		--alert-success-text: var(--mono-900);

		--shadow-color: rgba(0, 0, 0, 0.4);
		--shadow-color-soft: rgba(0, 0, 0, 0.2);
		--scrollbar-thumb-bg: rgba(255, 255, 255, 0.15);
		--scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.25);
		--scrollbar-bg: rgba(255, 255, 255, 0.05);

		--checkbox-border-color: var(--background-modifier-border);

		/* --- Admin JSON Logs  --- */
		--color-json-string: #8fbc8f;
		--color-json-number: #d2691e;
		--color-json-true: #32cd32;
		--color-json-false: #ff6b6b;
		--color-json-null: #808080;

	}
}

/* Explicit DARK class (Duplicate of @media block for Rule #8 autonomy) */
.theme-dark {
	--mono-100: #17212b;
	--mono-200: #0e161d;
	--mono-300: #242f3d;
	--mono-900: #f5f5f5;

	--accent-primary: #add34e;
	--accent-shaded: color-mix(in srgb, var(--interactive-accent), black 20%);

	--background-primary: var(--tg-theme-bg-color, var(--mono-100));
	--background-primary-alt: #1e2933;
	--background-secondary: var(--tg-theme-secondary-bg-color, var(--mono-300));
	--background-secondary-alt: #364150;

	--background-modifier-border: rgba(255, 255, 255, 0.15);
	--background-modifier-border-hover: rgba(255, 255, 255, 0.25);
	--background-modifier-hover: rgba(255, 255, 255, 0.08);
	--background-modifier-active: rgba(255, 255, 255, 0.12);
	--background-modifier-back-30: rgba(255, 255, 255, 0.15);
	--background-modifier-overlay: rgba(0, 0, 0, 0.65);

	--interactive-accent: var(--tg-theme-button-color, var(--accent-primary));
	--interactive-accent-soft: color-mix(in srgb, var(--interactive-accent), transparent 85%);
	--divider-color: var(--background-modifier-border);

	--text-normal: var(--tg-theme-text-color, var(--mono-900));
	--h1-color: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 88%);
	--h2-color: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 52%);
	--h3-color: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 27%);
	--text-muted: var(--tg-theme-hint-color, #708499);
	--text-on-accent: var(--tg-theme-button-text-color, #212121);
	--text-link: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 45%);
	--text-link-hover: color-mix(in srgb, var(--text-link), white 15%);
	--text-error: var(--tg-theme-destructive-text-color, #da6362);
	--text-warning: #f59e0b;
	--text-success: #10b981;
	--background-warning: rgba(245, 158, 11, 0.12);
	--background-error: rgba(239, 68, 68, 0.12);
	--background-success: rgba(16, 185, 129, 0.12);
	--text-bold: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 60%);
	--text-italic: color-mix(in srgb, var(--text-normal), var(--interactive-accent) 45%);

	--alert-error-bg: rgba(218, 99, 98, 0.85);
	--alert-error-border: rgba(218, 99, 98, 1);
	--alert-error-text: var(--mono-900);
	--alert-success-bg: rgba(76, 175, 80, 0.85);
	--alert-success-border: rgba(76, 175, 80, 1);
	--alert-success-text: var(--mono-900);

	--bubble-bg-own: var(--interactive-accent-soft);
	--bubble-bg-other: var(--background-primary-alt);
	--bubble-bg-own-shaded: var(--accent-shaded);

	--alert-error-bg: rgba(218, 99, 98, 0.85);
	--alert-error-border: rgba(218, 99, 98, 1);
	--alert-error-text: var(--mono-900);
	--alert-success-bg: rgba(76, 175, 80, 0.85);
	--alert-success-border: rgba(76, 175, 80, 1);
	--alert-success-text: var(--mono-900);

	--shadow-color: rgba(0, 0, 0, 0.4);
	--shadow-color-soft: rgba(0, 0, 0, 0.2);
	--scrollbar-thumb-bg: rgba(255, 255, 255, 0.15);
	--scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.25);
	--scrollbar-bg: rgba(255, 255, 255, 0.05);

	--checkbox-border-color: var(--background-modifier-border);

	/* --- Admin JSON Logs  --- */
	--color-json-string: #8fbc8f;
	--color-json-number: #d2691e;
	--color-json-true: #32cd32;
	--color-json-false: #ff6b6b;
	--color-json-null: #808080;

}

/* === [css/base.css] === */
/* === base.css ===
   Variables, Reset, Typography, Text elements, Debug sections */

[x-cloak] {
	display: none !important;
	/* Critical: Hide elements before Alpine.js is initialized */
}

:root .hidden {
	display: none !important;
}

:root .flex-1 {
	flex: 1;
}

:root .text-accent {
	color: var(--interactive-accent);
}

:root .is-clickable {
	cursor: pointer;
}

:root .mt-0 {
	margin-top: 0;
}

html {
	/* font-size здесь - это значение, которое принимает 1rem. На его основе рассчитываются отступы, размеры панелей и прочее.
	16px — стандарт, который не вызывает агрессивного авто-масштабирования на iOS, но слишком крупный для других устройств */
	font-size: var(--font-size-rem);
	/* Запрет на изменение размера шрифта при повороте экрана или специфических настройках */
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

:root {
	/* Semantic Map for Telegram Compatibility (Legacy support) */
	--tg-bg: var(--tg-theme-bg-color, var(--background-primary));
	--tg-secondary-bg: var(--tg-theme-secondary-bg-color, var(--background-secondary));
	--tg-text: var(--tg-theme-text-color, var(--text-normal));
	--tg-hint: var(--tg-theme-hint-color, var(--text-muted));
	--tg-link: var(--tg-theme-link-color, var(--text-link));
	--tg-button: var(--tg-theme-button-color, var(--interactive-accent));
	--tg-button-text: var(--tg-theme-button-text-color, var(--text-on-accent));
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	hyphens: none;
}

img {
	max-width: 100%;
	height: auto;
}

/* Выравнивание по центру для абзацев с изображениями */
.screen-content p:has(img:not(.tg-emoji)) {
	text-align: center;
}

/* Контентные изображения и изображения в блоках */
.screen-content img:not(.tg-emoji),
.content-img {
	border-radius: var(--radius-m);
	margin: var(--size-4-2);
	display: inline-block;
	vertical-align: middle;
}

body {
	background-color: var(--background-primary);
	color: var(--text-normal);
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

body,
button,
input,
select,
textarea {
	font-family: var(--font-main);
	line-height: var(--line-height-snug);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
	background-color: var(--scrollbar-bg);
	border-radius: var(--scrollbar-radius);
}

::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-bg);
	border-radius: var(--scrollbar-radius);
	transition: background-color var(--anim-fast);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-active-thumb-bg);
}

h1 {
	font-size: var(--h1-size);
	font-weight: var(--h1-weight);
	color: var(--h1-color);
	margin-top: var(--size-4-6);
	margin-bottom: var(--size-4-3);
	line-height: var(--line-height-tight);
}

h2 {
	font-size: var(--h2-size);
	font-weight: var(--h2-weight);
	color: var(--h2-color);
	margin-top: var(--size-4-5);
	margin-bottom: var(--size-4-2);
}

h3,
.linter-heading {
	font-size: var(--h3-size);
	font-weight: var(--h3-weight);
	color: var(--h3-color);
	margin-top: var(--size-4-5);
	margin-bottom: var(--size-4-2);
}

.heading-icon {
	display: inline-flex;
	align-self: center;
	margin-right: var(--size-4-1);
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	color: var(--text-muted);
}

/* Контент экранов */
.screen-content {
	font-size: var(--font-size-paragraph);
	margin-bottom: var(--size-4-6);
	line-height: var(--line-height-loose);
	text-align: left;
	text-indent: 0;
}

.screen-content p,
.screen-content div,
.screen-content li {
	text-indent: 0;
	text-align: left;
}

.screen-content b,
.screen-content strong,
.news-body-text b,
.news-body-text strong,
.bubble-text b,
.bubble-text strong {
	font-weight: var(--font-weight-bold);
	color: inherit;
}

.screen-content em,
.screen-content i,
.news-body-text em,
.news-body-text i,
.bubble-text em,
.bubble-text i {
	font-weight: var(--font-weight-medium);
	color: inherit;
}

/* Выделение ключевых мыслей (жирного и курсива) при включенной настройке */
.highlight-text .screen-content b,
.highlight-text .screen-content strong,
.highlight-text .news-body-text b,
.highlight-text .news-body-text strong,
.highlight-text .bubble-text b,
.highlight-text .bubble-text strong {
	color: var(--text-bold);
}

.highlight-text .screen-content em,
.highlight-text .screen-content i,
.highlight-text .news-body-text em,
.highlight-text .news-body-text i,
.highlight-text .bubble-text em,
.highlight-text .bubble-text i {
	color: var(--text-italic);
}



p {
	color: var(--text-normal);
	font-size: var(--font-size-paragraph);
	line-height: var(--p-line-height);
	margin-bottom: var(--p-margin-bottom);
	text-indent: 0;
	text-align: left;
	hyphens: none;
}

a {
	color: var(--text-link);
	text-decoration: var(--link-decoration);
	font-weight: var(--link-weight);
	transition: opacity 0.15s ease, color 0.15s ease;
}

a:hover {
	opacity: 0.9;
	color: var(--text-link-hover);
}

/* Теги, Упоминания и Даты (Tags, Mentions & Dates) */
.tag,
.mention,
.date-tag {
	display: inline-block;
	color: var(--tag-color);
	background-color: var(--tag-background);
	border: var(--tag-border-width) solid var(--tag-border-color);
	border-radius: var(--tag-radius);
	padding: var(--tag-padding-y) var(--tag-padding-x);
	/*font-size: var(--font-size-paragraph);*/
	font-size: inherit;
	font-weight: var(--tag-weight);
	text-decoration: none;
	line-height: normal;
	transition: background-color var(--anim-fast);
	white-space: nowrap;
}

.tag:hover,
.date-tag:hover {
	background-color: var(--tag-background-hover);
	text-decoration: none;
	color: var(--tag-color);
	opacity: 1;
}

a.tag,
a.mention,
a.date-tag {
	color: var(--tag-color);
	text-decoration: none;
}

a.tag:hover,
a.mention:hover,
a.date-tag:hover {
	color: var(--tag-color);
	opacity: 1;
}

.hint-text {
	color: var(--text-muted);
	font-size: var(--font-content-medium);
	line-height: var(--line-height-snug);
	margin-bottom: var(--size-4-2);
}

.small-label {
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	text-transform: uppercase;
	letter-spacing: 0.036rem;
	font-weight: var(--font-weight-semibold);
	display: flex;
	align-items: center;
	min-height: var(--nav-item-height);
	padding: 0 var(--size-4-5);
}

.workbook-week-header.small-label {
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
}

.workbook-week-badge {
	margin-left: auto;
	white-space: nowrap;
}


.error-text {
	color: var(--text-error);
	font-size: var(--font-size-paragraph);
	text-align: center;
	margin-top: var(--size-4-4);
}

/* Иконки Lucide до отрисовки */
[data-lucide] {
	display: inline-block;
	width: var(--rail-icon-size, 1.25rem);
	height: var(--rail-icon-size, 1.25rem);
	background: transparent;
	flex-shrink: 0;
}

[data-lucide]:not(svg) {
	opacity: 0;
	/* Скрываем сырой текст или пустой <i> до замены на SVG */
}

/* Навигация (кнопки) */
.btn-icon {
	width: var(--rail-icon-size, 1.25rem);
	height: var(--rail-icon-size, 1.25rem);
}

.input-relative {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.input-relative input {
	flex: 1;
	width: 100%;
}

.password-toggle {
	position: absolute;
	right: var(--size-4-3);
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	height: auto;
	margin: 0;
	cursor: pointer;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--anim-fast);
	z-index: var(--z-dropdown);
	background: none;
	border: none;
	padding: 0;
	pointer-events: all;
}

.password-toggle:active {
	transform: translateY(-50%) scale(0.9);
}

.password-field {
	padding-right: 2.857rem;
	/* Увеличиваем отступ справа, чтобы текст не заходил под иконку */
}

.input-relative input[type="password"],
.input-relative input.password-field {
	padding-right: 2.857rem;
	/* ~40px */
}

/* Статусы и оверлеи */
#startup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	background-color: var(--background-primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: var(--z-overlay);
	/* Поверх всего */
	text-align: center;
	color: var(--text-muted);
	transition: opacity var(--anim-speed) ease, visibility var(--anim-speed) ease;
}

#startup-overlay.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

#app-status {
	font-weight: var(--font-weight-medium);
	animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

.user-badge {
	background-color: var(--background-secondary);
	padding: var(--size-4-3) var(--size-4-4);
	border-radius: var(--container-radius);
	margin-bottom: var(--size-4-6);
	font-size: var(--font-content-medium);
	border: var(--divider-width) solid var(--background-modifier-border);
}

hr {
	border: none;
	border-top: var(--divider-width) solid var(--background-modifier-border);
	margin: var(--size-4-6) 0;
}

/* Оформление текста */
blockquote {
	border-left: var(--quote-border-width) solid var(--quote-border-color);
	background-color: var(--background-modifier-hover);
	margin: var(--size-4-4) 0;
	padding: var(--size-4-2) var(--size-4-5);
	border-radius: var(--radius-s);
	color: var(--text-normal);
	font-style: normal;
	text-indent: 0;
}

blockquote>p:last-child {
	margin-bottom: 0;
}

/* Callouts (Obsidian Standard) */
.callout {
	overflow: hidden;
	margin: var(--size-4-4) 0;
	background-color: var(--callout-background, transparent);
	border: var(--callout-border-width) solid var(--background-modifier-border);
	border-left: var(--callout-border-width-left) solid var(--interactive-accent);
	border-radius: var(--callout-radius);
	mix-blend-mode: var(--callout-blend-mode);
}

.callout-title {
	display: flex;
	align-items: center;
	padding: var(--callout-title-padding);
	gap: var(--size-4-2);
	font-weight: var(--callout-title-weight);
	background-color: var(--callout-title-background);
	color: var(--callout-title-color);
	cursor: default;
	min-height: var(--size-4-8);
}

.callout-title-inner {
	flex: 1;
	font-size: var(--callout-title-size);
}

.callout-content {
	padding: var(--callout-content-padding);
	font-size: var(--font-size-paragraph);
	line-height: var(--p-line-height);
}

/* Collapsible Callout Logic */
.callout.is-collapsible .callout-title {
	cursor: pointer;
}

.callout.is-collapsed .callout-content {
	display: none;
}

/* === Media and Spoilers (Content Blocks) === */
.media-wrapper {
	margin: var(--size-4-4) 0;
	border-radius: var(--container-radius);
	overflow: hidden;
	background: var(--background-secondary);
	border: var(--divider-width) solid var(--background-modifier-border);
}

.media-wrapper img {
	width: 100%;
	display: block;
	max-height: 25rem;
	object-fit: cover;
}

.media-caption {
	padding: var(--size-4-3) var(--size-4-4);
	font-size: var(--font-content-medium);
	color: var(--text-muted);
	border-top: var(--divider-width) solid var(--background-modifier-border);
	line-height: var(--line-height-normal);
}

.ui-spoiler {
	margin: var(--size-4-3) 0;
	background: var(--callout-background, transparent);
	border-radius: var(--callout-radius);
	border: var(--callout-border-width, var(--divider-width)) solid var(--background-modifier-border);
	border-left: var(--callout-border-width-left, var(--size-4-1)) solid var(--interactive-accent);
	overflow: hidden;
}

.ui-spoiler summary {
	padding: var(--callout-title-padding);
	cursor: pointer;
	font-weight: var(--callout-title-weight);
	user-select: none;
	background-color: var(--callout-title-background, transparent);
	color: var(--callout-title-color, var(--text-normal));
	list-style: none;
	font-size: var(--callout-title-size);
	display: flex;
	align-items: center;
	min-height: var(--size-4-8);
}

.ui-spoiler summary::-webkit-details-marker {
	display: none;
}

.ui-spoiler summary::before {
	content: '▼ ';
	/* Using a cleaner arrow */
	font-size: var(--font-content-smaller);
	display: inline-block;
	transition: transform var(--anim-fast);
	margin-right: var(--size-4-2);
	opacity: 0.5;
}

.ui-spoiler[open] summary::before {
	transform: rotate(0);
}

.ui-spoiler:not([open]) summary::before {
	transform: rotate(-90deg);
}

.spoiler-content {
	padding: var(--callout-content-padding);
	border-top: var(--callout-border-width, var(--divider-width)) solid var(--background-modifier-border);
	font-size: var(--font-size-paragraph);
	line-height: var(--p-line-height);
}

/* --- Контентные блоки (Markdown и Logic Render) --- */
.screen-content code,
.news-body-text code,
.bubble-text code {
	background-color: var(--background-secondary);
	padding: 0.15em 0.3em;
	border-radius: var(--radius-s);
	font-family: var(--font-mono);
	font-size: var(--font-content-medium);
	border: var(--divider-width) solid var(--background-modifier-border);
}

.screen-content pre,
.news-body-text pre,
.bubble-text pre {
	display: block;
	padding: var(--size-4-3);
	margin: var(--size-4-3) 0;
	background-color: var(--background-secondary);
	border-radius: var(--radius-m);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: var(--font-content-medium);
	line-height: var(--line-height-relaxed);
	border: var(--divider-width) solid var(--background-modifier-border);
	white-space: pre-wrap;
	word-break: break-word;
}

.screen-content pre code,
.news-body-text pre code,
.bubble-text pre code {
	background-color: transparent;
	padding: 0;
	border-radius: 0;
	border: none;
	font-size: inherit;
	color: inherit;
}

ul {
	padding-left: var(--size-4-5);
}

/* Системные стили для списков в контенте экранов (Markdown) */
.screen-content ul,
.screen-content ol {
	padding-left: var(--size-4-5);
	margin-bottom: var(--size-4-4);
}

/* Сближение списка с предшествующим абзацем */
.screen-content p+ul,
.screen-content p+ol {
	margin-top: calc(var(--size-4-1) - var(--p-margin-bottom));
}

.screen-content li {
	margin-bottom: var(--size-4-2);
	line-height: var(--line-height-relaxed);
}

.screen-content li:last-child {
	margin-bottom: 0;
}

/* Статический список */
.bullet-list {
	list-style: none;
	padding: 0 0 0 var(--size-4-6);
	margin: var(--size-4-3) 0 var(--size-4-6) 0;
}

.bullet-list li {
	background: transparent;
	padding: var(--size-4-1) 0;
	margin-bottom: var(--size-4-2);
	border: none;
	font-size: var(--font-size-paragraph);
	color: var(--text-normal);
	line-height: var(--line-height-relaxed);
}

/* Оформление таблиц в контенте (Markdown) */
.screen-content table,
.news-body-text table,
.bubble-text table {
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: var(--size-4-3) 0 var(--size-4-5) 0;
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	overflow: hidden;
}

.screen-content th,
.news-body-text th,
.bubble-text th {
	padding: var(--size-4-2) var(--size-4-4);
	font-weight: var(--font-weight-semibold);
	color: var(--text-normal);
	text-align: left;
	border-bottom: 2px solid var(--background-modifier-border);
	border-right: var(--divider-width) solid var(--background-modifier-border);
	background: var(--interactive-accent-soft);
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
}

.screen-content td,
.news-body-text td,
.bubble-text td {
	padding: var(--size-4-2) var(--size-4-4);
	border-bottom: var(--divider-width) solid var(--background-modifier-border);
	border-right: var(--divider-width) solid var(--background-modifier-border);
	text-align: left;
	vertical-align: middle;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Убираем правые границы у последнего столбца */
.screen-content th:last-child,
.news-body-text th:last-child,
.bubble-text th:last-child,
.screen-content td:last-child,
.news-body-text td:last-child,
.bubble-text td:last-child {
	border-right: none;
}

/* Более компактные отступы для таблиц в мессенджере */
.bubble-text th,
.bubble-text td {
	padding: var(--size-4-2) var(--size-4-3);
}

.screen-content tr:last-child td,
.news-body-text tr:last-child td,
.bubble-text tr:last-child td {
	border-bottom: none;
}

/* Кастомные эмодзи внутри текста */
.tg-emoji {
	display: inline-block;
	height: 1.2em;
	width: auto;
	vertical-align: -0.2em;
	margin: 0 0.12em;
	object-fit: contain;
	cursor: default !important;
	/* safe_important */
	pointer-events: none;
	/* Отключаем клики и увеличение */
}

/* Подсветка целевого якоря при переходе по диплинку */
@keyframes anchor-highlight {
	0% {
		background-color: rgba(253, 224, 71, 0.4);
	}

	100% {
		background-color: transparent;
	}
}

.highlighted-anchor {
	animation: anchor-highlight 2s ease-out;
	border-radius: var(--radius-s);
	padding: var(--size-4-1) var(--size-4-2);
}

/* --- Стили для плашки версии PWA и переключателя отладки --- */
.pwa-version-info,
#pwa-version-display,
#pwa-version-sidebar {
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#pwa-version-display.pwa-version-info--has-update,
#pwa-version-sidebar.pwa-version-info--has-update,
.pwa-version-info.pwa-version-info--has-update {
	color: var(--interactive-accent);
	text-decoration: underline;
}

/* Двухколоночный макет для сопоставлений в задачах */
.exercise-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-4-6, 24px);
	margin-bottom: var(--size-4-4, 16px);
}

.exercise-col {
	flex: 1;
	min-width: 250px; /* Автоматический стек на мобильных экранах */
}

/* === [css/alert.css] === */

:root .alert {
	padding: var(--alert-padding);
	padding-right: var(--size-4-8);
	/* Запас под абсолютную кнопку закрытия */
	border-radius: var(--alert-radius);
	margin: var(--alert-margin);
	border: var(--alert-border-width) solid transparent;
	font-size: var(--font-ui-medium);
	line-height: var(--line-height-relaxed);
	display: flex;
	align-items: flex-start;
	/* Выравнивание по верхней границе */
	gap: var(--size-4-4);
	backdrop-filter: blur(var(--alert-blur));
	-webkit-backdrop-filter: blur(var(--alert-blur));
	box-shadow: var(--alert-shadow);
	box-sizing: border-box;
	pointer-events: auto;
	position: relative;
	/* Для позиционирования кнопки закрытия */
}

:root .alert .btn-close {
	position: absolute;
	top: var(--size-4-2);
	right: var(--size-4-2);
	width: auto;
	border: none;
	background: transparent;
	padding: var(--size-4-1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	opacity: 0.5;
	transition: opacity var(--anim-fast), transform var(--anim-fast);
	cursor: pointer;
	box-shadow: none;
	z-index: 1;
}

:root .alert .btn-close:hover {
	opacity: 1;
	background-color: var(--background-modifier-hover);
}

:root .alert:empty {
	display: none;
}

.alert-icon {
	width: var(--rail-icon-size);
	/* Унификация до 1.5rem */
	height: var(--rail-icon-size);
	flex-shrink: 0;
	margin-top: -0.1rem;
	/* Компенсация для выравнивания с текстом */
}

.alert-body {
	display: flex;
	align-items: flex-start;
	/* Иконка на уровне первой строки текста */
	gap: var(--size-4-4);
	flex: 1;
	min-width: 0;
}

.alert-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1);
}

.alert-title {
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-normal);
}

.alert-description {
	line-height: var(--line-height-relaxed);
}

.alert.alert-error {
	background-color: var(--alert-error-bg);
	border-color: var(--alert-error-border);
	color: var(--alert-error-text);
}

.alert.alert-success {
	background-color: var(--alert-success-bg);
	border-color: var(--alert-success-border);
	color: var(--alert-success-text);
}

.alert a {
	color: inherit;
	text-decoration: underline;
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
}

.alert a:hover {
	opacity: 0.85;
}

/* .alert-body используется вместо .success-content и .error-content */

.global-error {
	position: fixed;
	top: var(--size-4-4);
	right: var(--size-4-4);
	z-index: var(--z-overlay);
	width: calc(100% - var(--size-4-8));
	max-width: 400px;
	display: none;
	/* Переключается в flex через JS (для global-error) */
	flex-direction: column;
	align-items: flex-end;
	gap: var(--size-4-2);
	pointer-events: none;
	margin: 0;
	padding: 0;
}

#settings_toast {
	position: fixed;
	top: var(--size-4-4);
	right: var(--size-4-4);
	z-index: var(--z-overlay);
	max-width: 400px;
	pointer-events: none;
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--size-4-2);
}

/* На мобилках учитываем высоту хедера/табов */
@media (max-width: 768px) {

	.global-error,
	#settings_toast {
		top: calc(var(--top-tab-height, 3.214rem) + var(--size-4-2));
		right: var(--size-4-2);
	}

	.global-error {
		width: calc(100% - var(--size-4-4));
	}
}

:root .global-error .alert,
:root #settings_toast.alert {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	pointer-events: all;
	margin: 0;
	box-shadow: var(--shadow-l);
	border-width: 1px;
	width: calc(100vw - var(--size-4-8));
	max-width: 400px;
}

@media (max-width: 768px) {

	.global-error .alert,
	#settings_toast.alert {
		width: calc(100vw - var(--size-4-4));
	}
}


.alert .btn-close .btn-icon {
	width: 1.143rem;
	/* 16px */
	height: 1.143rem;
}

.inline-error {
	color: var(--text-error);
	font-size: var(--font-ui-medium);
	margin-top: calc(-1 * var(--size-4-1));
	margin-bottom: var(--size-4-2);
	display: none;
	animation: fadeIn var(--anim-speed) ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideInDown {
	from {
		transform: translateY(calc(-1 * var(--size-4-4)));
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}




/* === [css/code_block.css] === */
/* === Code Block Copy Button === */
.code-block-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.code-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 25%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--interactive-accent), transparent 90%), color-mix(in srgb, var(--interactive-accent), transparent 94%));
	color: var(--text-normal);
	border: none;
	cursor: pointer;
	transition: opacity 0.2s ease, background var(--anim-fast), transform var(--anim-fast);
	box-shadow: var(--shadow-s);
	z-index: 999;
	opacity: 0;
	pointer-events: auto !important;
}

/* Кнопка плавно появляется только при наведении на блок кода */
.code-block-wrapper:hover .code-copy-btn {
	opacity: 0.8;
}

.code-block-wrapper .code-copy-btn:hover {
	opacity: 1;
	background-color: var(--interactive-accent-hover, var(--interactive-accent));
	filter: brightness(1.05);
	box-shadow: var(--shadow-m);
	color: var(--text-on-accent);
}

.code-copy-btn:active {
	transform: scale(0.92);
}

.code-copy-btn.copy-success {
	background: var(--background-success-soft) !important;
	border-color: var(--interactive-success) !important;
	color: var(--text-success) !important;
	opacity: 1 !important;
	filter: none !important;
	box-shadow: none !important;
}

.code-copy-btn svg {
	width: 12px;
	height: 12px;
	pointer-events: none;
}


/* === [css/debug.css] === */
/* Дебаг-секции */
#debugLog {
	margin-top: var(--size-4-3);
	max-height: 14.286rem;
	overflow-y: auto;
	background-color: var(--background-secondary);
	padding: var(--size-4-3);
	font-family: var(--font-mono);
	font-size: var(--font-ui-small);
	border-radius: var(--container-radius);
	border: var(--divider-width) solid var(--background-modifier-border);
}

.debug-box {
	margin-top: var(--size-4-3);
	max-height: 21.429rem;
	overflow-y: auto;
	background-color: var(--background-secondary);
	padding: var(--size-4-3);
	font-family: var(--font-mono);
	font-size: var(--font-ui-small);
	border-radius: var(--container-radius);
	border: var(--divider-width) solid var(--background-modifier-border);
	white-space: pre-wrap;
	line-height: var(--line-height-normal);
}

#debugLog div {
	border-bottom: var(--divider-width) solid var(--background-modifier-border);
	padding: var(--size-4-1) 0;
	word-break: break-all;
}

#debugLog div:last-child {
	border-bottom: none;
}

.debug-only {
	display: none;
	margin-top: var(--size-4-8);
}


/* === [css/image.css] === */
/* === Эффект увеличения картинок (Image Zoom Overlay) === */
.image-zoom-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	background-color: rgba(0, 0, 0, 0.75);
	/* Полупрозрачный черный задник */
	z-index: 9999;
	/* Поверх абсолютно всего, включая любые контекстные меню */
	display: none;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
	animation: zoomFadeIn 0.15s ease-out;
}

.image-zoom-overlay.active {
	display: flex;
}

.image-zoom-overlay img {
	max-width: 95vw;
	max-height: 95dvh;
	object-fit: contain;
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-l);
	animation: zoomScaleIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes zoomFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes zoomScaleIn {
	from {
		transform: scale(0.95);
	}

	to {
		transform: scale(1);
	}
}

/* Курсор при наведении на увеличиваемые картинки */
.screen-content img:not(.tg-emoji),
.content-img,
.att-image img:not(.tg-emoji),
.kb-editor-right-preview img:not(.tg-emoji),
.media-wrapper img:not(.tg-emoji) {
	cursor: zoom-in;
	transition: opacity var(--anim-fast) ease;
}

/* Стили для сломанных изображений, замененных на заглушки */
img.img-load-error {
	max-width: 320px;
	width: 100%;
	height: auto;
	aspect-ratio: 240 / 130;
	object-fit: contain;
	margin: var(--size-4-4) auto;
	display: block;
}

/* Выравнивание по ширине для статей, тетрадей и обновлений только на десктопных экранах */
@media (min-width: 73.143rem) {
	.screen-content {
		text-align: justify;
	}

	.screen-content p,
	.screen-content div,
	.screen-content li {
		text-align: justify;
	}

	.screen-content h1,
	.screen-content h2,
	.screen-content h3,
	.screen-content h4,
	.screen-content h5,
	.screen-content h6 {
		text-align: left;
	}
}

/* === [css/layout.css] === */
/* === layout.css ===
   Grid shell, sidebars, main content area, media queries, containers */

:root {
	--sidebar-nav-width: 24rem;
	--sidebar-info-width: 22.857rem;
	--container-max-width: 57.143rem;
	--main-content-padding-top: 4.285rem;
}

.shell {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 100vh;
	min-height: 100dvh;
}

@media (max-width: 73.142rem) {
	.shell.is-logged-in {
		/* Restore natural scroll behavior */
		height: auto;
		overflow: visible;
		position: static;
	}

	/* Блокировка внешнего скролла страницы в режиме App Mode (мессенджер, редактор БЗ и т.д.) */
	html:has(.chat-view),
	body:has(.chat-view),
	html:has(.kb-editor-panel),
	body:has(.kb-editor-panel),
	html:has(.l-app-mode),
	body:has(.l-app-mode) {
		overflow: hidden !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
	}

	.shell.is-logged-in:has(.chat-view),
	.shell.is-logged-in:has(.kb-editor-panel),
	.shell.is-logged-in:has(.l-app-mode) {
		height: 100dvh !important;
		max-height: 100dvh !important;
		overflow: hidden !important;
	}
}

/* Навигация (Слева) — Rail + Panel */
.sidebar-nav {
	display: none;
	background: var(--background-secondary);
	border-right: var(--divider-width) solid var(--divider-color);
	padding: 0;
	height: 100vh;
	overflow: hidden;
}

/* .sidebar-nav .small-label removed - handled by base .small-label */

.sidebar-nav .button-grid {
	gap: 0;
}

/* === Side Rail === */
.side-rail {
	width: var(--rail-width);
	height: 100%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--size-4-3) 0;
	background: var(--background-secondary);
	border-right: var(--divider-width) solid var(--divider-color);
}

.rail-group-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--size-4-1);
	width: 100%;
	flex-shrink: 0;
}

.rail-group-mid {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--size-4-1);
	overflow-y: auto;
	scrollbar-width: none;
	/* Firefox */
}

.rail-group-mid::-webkit-scrollbar {
	display: none;
	/* Chrome/Safari/Edge */
}

.rail-group-bottom {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--size-4-1);
	width: 100%;
	flex-shrink: 0;
}

.rail-btn {
	width: var(--rail-item-size);
	height: var(--rail-item-size);
	border-radius: var(--button-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background var(--anim-fast), color var(--anim-fast);
	padding: 0;
	position: relative;
	/* Ensure dot is positioned correctly */
}

.rail-btn .btn-icon {
	width: var(--rail-icon-size);
	height: var(--rail-icon-size);
}

.rail-btn:hover {
	background: var(--background-modifier-hover);
	color: var(--interactive-accent);
}

.rail-btn.active {
	background: var(--interactive-accent-soft);
	color: var(--interactive-accent);
}

/* === Silent Notifications Indicator === */
.indicator-dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 8px;
	height: 8px;
	background-color: var(--interactive-accent);
	border-radius: 50%;
	border: 1.5px solid var(--background-primary);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	opacity: 0;
	display: block;
	transform: scale(0.5);
	transition: transform var(--anim-base), opacity var(--anim-base);
	z-index: var(--z-dropdown);
}

.has-unread .indicator-dot {
	opacity: 1;
	transform: scale(1);
}

.rail-btn.active .indicator-dot {
	border-color: var(--interactive-accent);
}

/* Invert dot color on hover to maintain contrast against bright backgrounds */
.rail-btn:hover .indicator-dot,
.nav-btn:hover .indicator-dot,
.nav-item:hover .indicator-dot,
.tab-item:hover .indicator-dot {
	background-color: var(--background-secondary);
}

/* Special adjustments for top tab items */
.tab-item {
	position: relative;
}

.tab-item .indicator-dot {
	top: var(--size-4-1);
	right: var(--size-4-1);
	border-color: var(--background-primary);
}

/* Tooltips for Desktop Rail */
@media (min-width: 73.143rem) {
	/* rail-btn position is now global */

	.rail-btn::after {
		content: attr(data-title);
		position: absolute;
		left: 100%;
		top: 50%;
		transform: translateY(-50%) translateX(var(--size-4-3));
		background: var(--background-secondary-alt);
		color: var(--text-normal);
		padding: var(--size-4-2) var(--size-4-3);
		border-radius: var(--radius-m);
		font-size: var(--font-ui-small);
		font-weight: 500;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--anim-fast), transform var(--anim-fast);
		z-index: var(--z-header);
		box-shadow: var(--shadow-m);
		border: var(--divider-width) solid var(--divider-color);
	}

	.rail-btn:hover::after {
		opacity: 1;
		transform: translateY(-50%) translateX(var(--size-4-4));
	}
}

.rail-divider {
	width: var(--size-4-6);
	height: var(--divider-width);
	background: var(--divider-color);
	margin: var(--size-4-1) 0;
}

/* === Sidebar Panel === */
.sidebar-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.sidebar-panel>div[x-show="sidebarMode === 'nav'"] {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

.nav-group-wrapper {
	background: transparent;
	border-radius: 0;
	overflow: hidden;
	margin: var(--size-4-6) 0;
	/* Увеличен до 1.5rem эквивалента */
}

.sidebar-panel .nav-group-wrapper {
	margin: var(--size-4-2) 0;
}

.nav-group-wrapper .button-grid {
	gap: 0;
}

.nav-group-wrapper .nav-btn {
	border-radius: 0;
}

/* First item in a group has no top border (group boundary serves as separator) */
.nav-group-wrapper .nav-btn:first-child {
	border-top: none;
}

/* Основной контент (Центр) */
.main-content-area {
	display: flex;
	flex-direction: column;
	background: var(--background-primary);
	max-width: 100%;
	padding: var(--header-offset, 5.5rem) var(--size-4-5) var(--size-4-5) var(--size-4-5);
	min-height: 100dvh;
	position: relative;
	overflow-y: auto;
	/* Скролл по умолчанию включен */
	height: auto;
	/* Высота по умолчанию автоматическая */
}

/* В полноэкранных режимах (App Mode): фиксируем высоту фрейма */
.main-content-area:has(.chat-view),
.main-content-area:has(.kb-editor-panel),
.main-content-area:has(.l-app-mode) {
	height: 100%;
	overflow: hidden;
}

/* Исключение Full-Bleed: только для мессенджера отключаем внешние отступы */
.main-content-area:has(.chat-view) {
	padding: 0;
}


.main-content-area:has(.chat-view)>.container,
.main-content-area:has(.chat-view) #app-workspace,
.main-content-area:has(.kb-editor-panel)>.container,
.main-content-area:has(.kb-editor-panel) #app-workspace,
.main-content-area:has(.l-app-mode)>.container,
.main-content-area:has(.l-app-mode) #app-workspace {
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
	width: 100%;
}

@media (max-width: 73.142rem) {
	.main-content-area {
		padding: var(--header-offset, 5.5rem) var(--size-4-5) var(--size-4-5) var(--size-4-5);
		/* По умолчанию на мобильных обычный скролл страницы */
		height: auto;
		min-height: 100dvh;
		overflow-y: auto;
	}

	/* Мобильный App Mode: фиксированный фрейм под высоту вьюпорта */
	.main-content-area:has(.chat-view),
	.main-content-area:has(.kb-editor-panel),
	.main-content-area:has(.l-app-mode) {
		height: 100dvh;
		min-height: 100dvh;
		overflow: hidden;
		padding-top: 0;
		padding-bottom: var(--size-4-5);
		padding-left: var(--size-4-5);
		padding-right: var(--size-4-5);
	}

	@media (max-width: 48rem) {

		.main-content-area:has(.chat-view),
		.main-content-area:has(.kb-editor-panel),
		.main-content-area:has(.l-app-mode) {
			padding-top: 3.5rem;
		}
	}

	/* Исключение для мессенджера: чат должен быть во всю ширину экрана (full-bleed) */
	.main-content-area:has(.chat-view) {
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
	}
}


/* === Универсальные Layout-классы для экранов с вкладками и формами === */

/* Специфические Grid-сетки для путей экранов в App Mode */
.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="kb_editor"],
.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="sender_editor"],
.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="admin_user_viewer"],
.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="admin_activity_log"],
.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="user_settings"],
.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="admin_dashboard"],
.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="admin_log_viewer"],
.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="admin_scheduler"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* Ограничиваем колонку шириной контейнера (по умолчанию auto — расширяется под контент) */
	height: 100%;
	min-height: 0;
}

.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="kb_editor"],
.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="sender_editor"] {
	grid-template-rows: auto auto auto 1fr;
	/* 1. Заголовок, 2. Панель поиска, 3. Табы, 4. Активная панель */
}

.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="admin_user_viewer"] {
	grid-template-rows: auto auto 1fr auto;
	/* 1. Шапка + Поиск, 2. Табы, 3. Свойства (1fr), 4. Футер */
}

.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="admin_activity_log"] {
	grid-template-rows: auto 1fr auto;
	/* 1. Заголовок, 2. Журнал со скроллом (1fr), 3. Футер */
}

.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="user_settings"] {
	grid-template-rows: auto auto 1fr auto;
	/* 1. Заголовок, 2. Табы, 3. Активная панель (1fr), 4. Тех. инфо */
}

.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="admin_dashboard"] {
	grid-template-rows: auto auto 1fr;
	/* 1. Заголовок, 2. Табы, 3. Активная панель (1fr) */
}

.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="admin_log_viewer"] {
	grid-template-rows: auto auto 1fr auto;
	/* 1. Заголовок, 2. Табы, 3. Активная панель (1fr), 4. Футер */
}

.main-content-area:has(.l-app-mode) #app-workspace>[data-screen-path="admin_scheduler"] {
	grid-template-rows: auto 1fr auto;
	/* 1. Заголовок, 2. Панель со скроллом (1fr), 3. Футер */
}

.l-tabs-nav {
	display: flex;
	gap: var(--size-4-1);
	box-shadow: inset 0 calc(var(--divider-width) * -1) 0 0 var(--background-modifier-border);
	margin-bottom: var(--size-4-4);
	overflow: visible;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Предотвращение распирания сетки длинными вкладками */
.admin-user-tabs,
.admin-log-tabs-nav,
.incident-status-tabs,
.user-settings-tabs-nav,
.kb-editor-tabs-nav,
.sender-editor-tabs-nav {
	min-width: 0;
	width: 100%;
	position: relative;
	z-index: 10;
	/* Гарантирует вывод выпадающего меню поверх контента */
}



.screen-content:has(.l-tabs-nav) {
	min-width: 0;
	width: 100%;
	margin-bottom: 0;
	/* Убираем лишний отступ снизу под табами */
}

/* Адаптивное скрытие вкладок на десктопе */
.l-tabs-nav>.tab-desktop-hidden:not(.active) {
	display: none !important;
}

/* Скрытие дублирующихся вкладок в меню "Ещё" на десктопе */
.tab-dropdown .dropdown-menu .tab-desktop-hidden {
	display: none;
}

/* Выпадающее меню "Ещё" во вкладках */
.tab-dropdown {
	position: relative;
	display: inline-block;
}

.tab-dropdown .dropdown-menu {
	display: none;
	/* Скрыто по умолчанию */
	position: absolute;
	top: 100%;
	right: 0;
	background-color: var(--background-secondary);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-l);
	z-index: var(--z-dropdown);
	min-width: 180px;
	padding: var(--size-4-1);
	flex-direction: column;
	gap: var(--size-4-1);
}

/* Раскрытие меню при добавлении класса open */
.tab-dropdown.open .dropdown-menu {
	display: flex !important;
}

.tab-dropdown .dropdown-menu .tab-btn {
	width: 100%;
	text-align: left;
	border: none !important;
	border-bottom: none !important;
	border-radius: var(--radius-m) !important;
	padding: var(--size-4-2) var(--size-4-4) !important;
	margin: 0 !important;
	background: none;
	color: var(--text-normal);
}

.tab-dropdown .dropdown-menu .tab-btn:hover {
	background-color: var(--background-modifier-hover);
}

.tab-dropdown .dropdown-menu .tab-btn.active {
	background-color: var(--background-modifier-active-hover) !important;
	color: var(--interactive-accent) !important;
	font-weight: 600;
}

/* Стили для стрелочки-треугольника (согласно callout в base.css) */
.tab-dropdown .dropdown-arrow {
	display: inline-block;
	margin-left: var(--size-4-1);
	font-size: var(--font-content-smaller);
	transition: transform var(--anim-fast);
	opacity: 0.5;
	vertical-align: middle;
}

/* Поворот стрелки вверх при открытом меню */
.tab-dropdown.open .dropdown-arrow {
	transform: rotate(180deg);
}

.l-tabs-nav .tab-btn {
	background: none;
	border: var(--divider-width) solid transparent;
	border-bottom: none;
	color: var(--text-muted);
	padding: var(--size-4-2) var(--size-4-3);
	/* Уменьшен боковой паддинг с --size-4-4 до --size-4-3 */
	cursor: pointer;
	font-weight: 500;
	font-size: var(--font-size-tab-header);
	border-radius: var(--radius-l) var(--radius-l) 0 0;
	position: relative;
	transition: background-color 0.1s, color 0.1s, border-color 0.1s;
	white-space: nowrap;
	/* Запрет переноса названия вкладки */
}

.l-tabs-nav .tab-btn:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-normal);
	border-color: var(--background-modifier-border) var(--background-modifier-border) transparent var(--background-modifier-border);
}

.l-tabs-nav .tab-btn.active {
	background-color: var(--background-primary);
	color: var(--interactive-accent);
	border-color: var(--background-modifier-border) var(--background-modifier-border) transparent var(--background-modifier-border);
	font-weight: 600;
}

/* Обратные скругления у основания в стиле Obsidian (ушки) */
.l-tabs-nav .tab-btn.active::before,
.l-tabs-nav .tab-btn.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: calc(var(--radius-m) * 2);
	height: calc(var(--radius-m) * 2);
	border-radius: 100%;
	background: transparent;
	pointer-events: none;
	box-shadow:
		inset 0 0 0 var(--divider-width) var(--background-modifier-border),
		0 0 0 calc(var(--radius-m) * 4) var(--background-primary);
}

/* Левое ушко */
.l-tabs-nav .tab-btn.active::before {
	left: calc(var(--radius-m) * -2);
	clip-path: inset(50% calc(var(--divider-width) * -1) 0 50%);
}

/* Правое ушко */
.l-tabs-nav .tab-btn.active::after {
	right: calc(var(--radius-m) * -2);
	clip-path: inset(50% 50% 0 calc(var(--divider-width) * -1));
}

/* Синхронизация цвета ушек при наведении на активную вкладку */
.l-tabs-nav .tab-btn.active:hover::before,
.l-tabs-nav .tab-btn.active:hover::after {
	box-shadow:
		inset 0 0 0 var(--divider-width) var(--background-modifier-border),
		0 0 0 calc(var(--radius-m) * 4) var(--background-modifier-hover);
}

/* Базовая флекс-панель (вкладка) */
.l-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

/* Прокручиваемая панель-форма (Свойства) */
.l-panel-scrollable {
	display: block;
	/* Упорядочено после .l-panel для естественного переопределения flex на block */
	overflow-y: auto;
	height: 100%;
	padding-right: var(--size-4-2);
}

/* Двухколоночный макет для форм и настроек */
.l-split-container {
	display: flex;
	flex-direction: row;
	gap: var(--size-4-6);
	align-items: flex-start;
	width: 100%;
}

.l-split-main {
	flex: 1 1 60%;
	display: flex;
	flex-direction: column;
	gap: var(--size-4-3);
}

.l-split-side {
	flex: 0 0 15rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

@media (max-width: 73.142rem) {
	.l-split-container {
		flex-direction: column-reverse;
		gap: var(--size-4-4);
	}

	.l-split-main,
	.l-split-side {
		flex: 1 1 100%;
		width: 100%;
	}

	/* На мобильных: показываем только активную вкладку + «Ещё» */
	.l-tabs-nav>.tab-btn:not(.active) {
		display: none;
	}

	/* На мобильных устройствах показываем все вкладки в выпадающем меню "Ещё" */
	.tab-dropdown .dropdown-menu .tab-desktop-hidden {
		display: block !important;
	}
}

/* Регулировка зазоров между элементами в блочном режиме */
.l-panel-scrollable>* {
	margin-bottom: var(--size-4-2) !important;
	/* safe-important: гарантированный сброс внешних отступов полей формы */
}

.l-panel-scrollable>*:last-child {
	margin-bottom: 0 !important;
	/* safe-important: гарантированный сброс для последнего элемента */
}

.l-panel-scrollable .input-wrapper {
	flex: none;
	display: block;
	margin: 0;
}

/* Восстановление вертикальных отступов для полей, сгруппированных внутри форм на вкладках */
.l-panel-scrollable form .input-wrapper {
	margin-bottom: var(--size-4-3);
}

.l-panel-scrollable form .input-wrapper:last-child {
	margin-bottom: 0;
}

.l-panel-scrollable .input-wrapper.field-row {
	display: flex;
}

/* Гарантированное скрытие неактивных панелей в App Mode */
.l-panel.hidden,
.l-panel-scrollable.hidden {
	display: none;
}

@media (min-width: 73.143rem) {
	.main-content-area {
		padding: var(--size-4-5);
	}

	.main-content-area:has(.chat-view) {
		padding: 0;
	}
}

/* Инфо-панель (Справа) */
.sidebar-info {
	display: none;
	background: var(--background-secondary);
	border-left: var(--divider-width) solid var(--divider-color);
	padding: 0;
	overflow-y: auto;
}

@media (min-width: 73.143rem) {
	.shell.is-logged-in {
		grid-template-columns: var(--sidebar-nav-width) 1fr var(--sidebar-info-width);
		transition: grid-template-columns var(--anim-speed) var(--transition-base);
		height: 100vh;
		max-height: 100vh;
		overflow: hidden;
	}

	.shell.is-logged-in.news-panel-hidden {
		grid-template-columns: var(--sidebar-nav-width) 1fr 0;
	}

	.is-logged-in .sidebar-nav {
		display: flex;
		height: 100vh;
		max-height: 100vh;
	}

	.is-logged-in .sidebar-info {
		display: block;
		transition: transform var(--anim-speed) var(--transition-base), opacity var(--anim-speed) var(--transition-base);
		overflow: hidden;
	}

	.news-panel-hidden .sidebar-info {
		transform: translateX(100%);
		opacity: 0;
		pointer-events: none;
	}

	.news-panel-hidden .main-content-area {
		border-right: none;
	}

	.is-logged-in .main-content-area {
		border-left: var(--divider-width) solid var(--divider-color);
		border-right: var(--divider-width) solid var(--divider-color);
	}
}

.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin: 0 auto;
	box-sizing: border-box;
}


/* === Content Footer (Sticky) === */
.content-footer {
	margin-top: auto;
	padding: var(--size-4-5) 0;
	border-top: var(--divider-width) solid var(--divider-color);
}

.list-wrapper {
	margin: var(--size-4-4) 0;
}

.list-wrapper h4 {
	margin-bottom: var(--size-4-3);
	color: var(--text-muted);
	font-size: var(--font-ui-normal);
	text-transform: uppercase;
	letter-spacing: 0.036rem;
}

/* === User Settings === */
.settings-greeting {
	margin-bottom: var(--size-4-4);
}

.settings-accent-span {
	color: var(--interactive-accent);
	font-weight: 600;
}

.settings-separator {
	margin-top: var(--size-4-8);
	border-top: var(--divider-width) solid var(--background-modifier-border);
	padding-top: var(--size-4-4);
	width: 100%;
}

/* === Branding & Search (index.html) === */
.brand-logo {
	display: block;
	height: var(--size-4-8);
	/* ~32px */
	width: auto;
	margin: 0;
	border-radius: var(--radius-s);
}

.search-filter-wrapper {
	display: flex;
	gap: var(--size-4-2);
	align-items: center;
	width: 100%;
	flex-shrink: 0;
	padding: var(--size-4-4) var(--drawer-content-padding);
}

.news-loading-hint {
	padding: var(--size-4-4);
}

.empty-state-hint {
	padding: var(--drawer-content-padding);
}

/* === [css/buttons.css] === */
/* === buttons.css ===
   ALL button styles: global button, Interactive List Items (nav-btn, news-card,
   news-all-btn, radio-row), horizontal nav, footer buttons, pager, icon buttons.
   This is THE source of truth for all clickable element borders. */

/* --- Base Button (Flat / List-style by default) ---
   THE SINGLE SOURCE OF TRUTH for all clickable elements.
   Default: Background from sidebar, full width, flex, border-top only. */
button,
.radio-row,
.news-card {
	display: flex;
	align-items: center;
	width: 100%;
	padding: var(--button-padding-y) var(--button-padding-x);
	background: transparent;
	color: var(--text-normal);
	border: none;
	border-top: var(--divider-width) solid var(--divider-color);
	border-bottom: none;
	border-radius: var(--button-radius);
	cursor: pointer;
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-normal);
	text-align: left;
	margin: 0;
	/* Все кнопки-полоски бесшовные по умолчанию. Это УБИРАЕТ ЗАЗОРЫ в новостях. */
	transition: var(--transition-base);
	box-shadow: none;
}

/* === Base Icon Style === */
.btn-icon {
	width: var(--icon-m);
	height: var(--icon-m);
	flex-shrink: 0;
	pointer-events: none;
}


.button-grid button,
.button-grid a.btn,
.button-grid .radio-row,
.button-grid .news-card {
	margin-top: 0;
}

/* === Grid Layouts for Interactive Elements === */
.button-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.button-grid.horizontal {
	display: flex;
	align-items: stretch;
	justify-content: center;
	/* Центрируем группу кнопок */
	gap: 0;
	/* Убираем гэп, чтобы полоски были бесшовными */
	flex-wrap: nowrap;
	margin-top: var(--size-4-4);
	border: var(--divider-width) solid var(--divider-color);
	border-radius: var(--radius-m);
	overflow: hidden;
}


.button-grid.horizontal>button,
.button-grid.horizontal>a.btn {
	margin: 0;
	flex: 1;
	display: inline-flex;
	align-items: center;
	/* Растягиваем поровну */
	justify-content: center;
	border-top: none;
	border-bottom: none;
	border-right: var(--divider-width) solid var(--divider-color);
	border-radius: 0;
	font-size: var(--font-size-button);
	white-space: nowrap;
	text-decoration: none;
	color: var(--text-normal);
}

/* --- Modal Specific Buttons (Isolated Geometry) --- */
.btn-modal {
	font-size: var(--font-size-button);
	font-weight: 600;
	height: var(--rail-item-size);
	padding: 0;
	justify-content: center;
}


.button-grid.horizontal>button:last-child,
.button-grid.horizontal>a.btn:last-child {
	border-right: none;
}


/* Убираем двойную линию: если элемент первый в любом контейнере с рамкой или в сетке */
.radio-group>*:first-child,
.button-grid>*:first-child {
	border-top: none;
}

/* Закрываем список: если у контейнера нет своей рамки (как в button-grid) */
.button-grid>*:last-child {
	border-bottom: var(--divider-width) solid var(--divider-color);
}

.radio-row.active,
.radio-row:has(input:checked) {
	background-color: var(--interactive-accent-soft);
	color: var(--text-normal);
}

button:not(.btn-subtle):not(.btn-flat):hover,
button.active,
.news-card:hover,
.news-card.active,
.radio-row:hover {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
}

/* --- Background Tint for Nav & Action Buttons (Variant 2) --- */
.nav-btn,
button.btn:not(.btn-primary):not(.btn-danger):not(.btn-subtle):not(.btn-flat) {
	background: linear-gradient(180deg, color-mix(in srgb, var(--interactive-accent), transparent 90%), color-mix(in srgb, var(--interactive-accent), transparent 94%));
}

/* === Subtle & Flat Buttons === */
.btn-subtle,
.btn-flat {
	background: transparent;
	border: none;
	color: var(--text-muted);
	padding: var(--size-4-1);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-s);
	transition: var(--transition-base);
	cursor: pointer;
	text-decoration: none;
}

.btn-subtle:hover,
.btn-flat:hover {
	background-color: var(--background-modifier-hover);
	color: var(--interactive-accent);
}

.btn-subtle.active,
.btn-flat.active {
	background-color: var(--interactive-accent-soft);
	color: var(--interactive-accent);
}

button:active,
.radio-row:active,
.news-card:active {
	transform: scale(0.98);
}

/* --- Disabled State (Visual Accessibility) --- */
:root button:disabled,
:root button[disabled],
:root button.disabled {
	opacity: 0.5;
	filter: grayscale(1);
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
	background-color: var(--background-secondary);
	color: var(--text-muted);
	border-color: var(--divider-color);
}

:root button:disabled:hover,
:root button[disabled]:hover,
:root button.disabled:hover,
:root button:disabled:active,
:root button[disabled]:active,
:root button.disabled:active {
	background-color: var(--background-secondary);
	color: var(--text-muted);
	box-shadow: none;
	transform: none;
}

/* --- Loading State --- */
.btn-loading,
button.htmx-request,
.btn.htmx-request,
.nav-btn.htmx-request,
.btn-action-circle.htmx-request,
.footer-btn.htmx-request,
.pager-btn.htmx-request,
.radio-row.htmx-request,
.news-card.htmx-request,
a.htmx-request,
span.htmx-request {
	position: relative;
	pointer-events: none;
	opacity: 0.7;
	color: transparent !important;
}

/* Гарантируем корректное позиционирование абсолютного спиннера на строчных элементах */
a.btn-loading,
span.btn-loading,
a.htmx-request,
span.htmx-request {
	display: inline-block;
}

.btn-loading::after,
button.htmx-request::after,
.btn.htmx-request::after,
.nav-btn.htmx-request::after,
.btn-action-circle.htmx-request::after,
.footer-btn.htmx-request::after,
.pager-btn.htmx-request::after,
.radio-row.htmx-request::after,
.news-card.htmx-request::after,
a.htmx-request::after,
span.htmx-request::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--icon-m);
	height: var(--icon-m);
	margin-left: calc(-1 * var(--size-4-2));
	margin-top: calc(-1 * var(--size-4-2));
	border: var(--size-2-1) solid var(--background-modifier-back-30);
	border-radius: 50%;
	border-top-color: var(--text-normal);
	animation: btn-spinner 0.6s linear infinite;
}

.btn-primary.btn-loading::after,
.btn-primary.htmx-request::after {
	border: var(--size-2-1) solid var(--always-white-soft);
	border-top-color: var(--always-white);
}

@keyframes btn-spinner {
	to {
		transform: rotate(360deg);
	}
}

/* --- Primary Button (Green CTA) --- */
.btn-primary {
	justify-content: center;
	padding: var(--size-4-4);
	margin-top: var(--size-4-3);
	/* Акцентные кнопки действий сохраняют отступ */
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
	border: none;
	border-radius: var(--radius-m);
	font-weight: var(--font-weight-semibold);
	box-shadow: var(--shadow-s);
}

.btn-primary:hover {
	box-shadow: var(--shadow-m);
}


/* --- Danger Button (Red / Destructive CTA) --- */
.btn-danger {
	background-color: var(--text-error);
	color: var(--always-white);
}

.btn-danger:hover {
	filter: brightness(1.1);
}


/* --- Action Circle Button (Primary Circle CTA) --- */
.btn-action-circle {
	width: 2.571rem;
	height: 2.571rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 25%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--interactive-accent), transparent 90%), color-mix(in srgb, var(--interactive-accent), transparent 94%));
	color: var(--text-normal);
	border: none;
	cursor: pointer;
	transition: background var(--anim-fast), transform var(--anim-fast);
	box-shadow: var(--shadow-s);
}

.btn-action-circle:hover {
	background-color: var(--interactive-accent-hover, var(--interactive-accent));
	filter: brightness(1.05);
	box-shadow: var(--shadow-m);
}

.btn-action-circle:active {
	transform: scale(0.96);
}

.btn-action-circle .btn-icon {
	width: var(--icon-m);
	height: var(--icon-m);
}

/* === Interactive List Items (Delta styling) === */
.nav-btn,
.news-card,
.news-all-btn,
.radio-row {
	/* Properties inherited from base 'button' */
	gap: var(--size-4-3);
}

/* --- Delta: .nav-btn --- */
.nav-btn {
	min-height: var(--nav-item-height);
}

.nav-btn .btn-icon {
	width: var(--icon-l);
	height: var(--icon-l);
	flex-shrink: 0;
}

.nav-btn .btn-label {
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-normal);
}

/* --- Delta: .news-all-btn --- */
.news-all-btn {
	justify-content: center;
	min-height: var(--nav-item-height);
}

.news-all-btn .btn-label {
	font-size: var(--font-size-button);
}

.news-all-btn .btn-icon {
	width: var(--icon-l);
	height: var(--icon-l);
	flex-shrink: 0;
}

/* --- Delta: .radio-row --- */
.radio-row {
	padding: var(--size-4-3) var(--size-4-4);
}

/* === Horizontal Nav Stacks === */
.button-grid.horizontal-nav {
	display: flex;
	flex-direction: row;
	gap: 0;
	border-top: var(--divider-width) solid var(--divider-color);
	border-bottom: var(--divider-width) solid var(--divider-color);
}

.button-grid.horizontal-nav .nav-btn {
	flex: 1;
	width: auto;
	justify-content: center;
	border-top: none;
	border-bottom: none;
	border-left: var(--divider-width) solid var(--divider-color);
}

.button-grid.horizontal-nav .nav-btn:first-child {
	border-left: none;
}

.button-grid.horizontal-nav .nav-btn:hover {
	border-left-color: var(--interactive-accent);
	border-top: none;
}

.button-grid.horizontal-nav .nav-btn:hover+.nav-btn {
	border-left-color: var(--interactive-accent);
}

#mobile-nav-content .button-grid.horizontal-nav .nav-btn {
	padding-left: var(--size-4-3);
	padding-right: var(--size-4-3);
}

/* === Footer Buttons === */
.footer-btn {
	flex: 1;
	min-width: 7.143rem;
	padding: var(--size-4-3) var(--size-4-2);
	font-size: var(--font-ui-small);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--size-4-1);
	background: var(--background-secondary);
	color: var(--text-normal);
	border: var(--divider-width) solid var(--divider-color);
	border-radius: var(--radius-m);
}

.footer-btn:hover {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
}

.footer-btn .btn-icon {
	width: var(--icon-l);
	height: var(--icon-l);
}

/* === Pager Buttons === */
.pager-wrapper {
	margin: var(--size-4-4) 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.pager-nav-grid {
	margin-top: var(--size-4-4);
	display: flex;
	gap: var(--size-4-2);
	width: 100%;
}

.pager-btn {
	flex: 1;
	justify-content: center;
	padding: var(--size-4-3) 0;
	background-color: var(--background-primary);
	border: var(--divider-width) solid var(--divider-color);
	border-radius: var(--radius-m);
	font-size: var(--font-ui-small);
	font-weight: 600;
}

.pager-btn:hover {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
}

.pager-btn.active {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
	box-shadow: 0 0 var(--size-4-3) var(--interactive-accent-soft);
}

.pager-nav {
	margin-top: var(--size-4-3);
	text-align: center;
	font-size: var(--font-ui-small);
	color: var(--tg-theme-hint-color, var(--text-muted));
	font-weight: 600;
}

/* === Formatting Toolbar (Global Component) === */
.formatting-toolbar {
	display: flex;
	align-items: center;
	gap: var(--size-4-1);
	padding: 0;
	width: 100%;
}

.toolbar-btn {
	flex: 1;
	min-width: 0;
	height: var(--toolbar-item-height);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	transition: background var(--anim-fast), color var(--anim-fast);
	cursor: pointer;
}

.toolbar-btn:hover {
	background: var(--background-modifier-hover);
	color: var(--interactive-accent);
}

.toolbar-btn.active {
	background: var(--interactive-accent-soft);
	color: var(--interactive-accent);
}

.toolbar-btn .btn-icon {
	width: var(--toolbar-icon-size);
	height: var(--toolbar-icon-size);
}

.toolbar-divider {
	width: var(--divider-width);
	height: var(--size-4-4);
	background-color: var(--divider-color);
	margin: 0 var(--size-4-1);
	opacity: 0.5;
}

/* === Icon Button === */
.icon-btn {
	background: transparent;
	border: none;
	color: var(--text-normal);
	cursor: pointer;
	padding: var(--size-4-2);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s;
}

.icon-btn:hover {
	background: var(--background-modifier-border);
}

/* === Close Drawer Button === */
.close-drawer {
	border-top: none;
	padding: 0;
	width: auto;
	height: auto;
	justify-content: center;
}

.close-drawer .btn-icon {
	width: var(--icon-s);
	height: var(--icon-s);
}

.close-drawer:hover {
	color: var(--interactive-accent);
}

.btn-more-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-4-8);
	height: var(--size-4-8);
	padding: 0;
	border: none;
	background: transparent;
	color: var(--text-muted);
	border-radius: var(--button-radius);
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color var(--anim-fast) ease, color var(--anim-fast) ease;
}

.btn-more-actions:hover {
	background-color: var(--background-modifier-hover);
	color: var(--interactive-accent);
}

.btn-more-actions .btn-icon,
.btn-more-actions svg {
	width: var(--icon-m);
	height: var(--icon-m);
}

/* === Desktop Floating Feedback Button === */
.desktop-floating-feedback-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9990;
	background: var(--background-secondary, #fff);
	color: var(--text-normal, #333);
	border: 1.5px solid var(--border-color, #e0e0e0);
	border-radius: 50%;
	width: 42px;
	height: 42px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-m, 0 4px 12px rgba(0, 0, 0, 0.15));
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	padding: 0;
}

.desktop-floating-feedback-btn:hover {
	transform: scale(1.08);
	color: var(--interactive-accent);
	border-color: var(--interactive-accent);
	box-shadow: var(--shadow-l, 0 6px 16px rgba(0, 0, 0, 0.2));
}

.desktop-floating-feedback-btn .btn-icon {
	width: 32px;
	height: 32px;
}

/* Скрываем плавающую кнопку на мобильных экранах (там иконка в верхней панели) */
@media (max-width: 73.143rem) {
	.desktop-floating-feedback-btn {
		display: none !important;
	}
}

/* === [css/forms.css] === */
/* === forms.css ===
   Inputs, radio groups, calendar, download links, file inputs */

/* Формы */
input,
select,
textarea {
	width: 100%;
	padding: var(--button-padding-y) var(--button-padding-x);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	background-color: var(--background-primary);
	color: var(--text-color);
	box-sizing: border-box;
	font-size: var(--font-size-input);
	outline: none;
	transition: var(--transition-base);
	font-family: inherit;
	margin: 0;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--interactive-accent);
}

.radio-group {
	margin: var(--size-4-4) 0;
	background: var(--background-secondary);
	padding: 0;
	border-radius: var(--container-radius);
	overflow: hidden;
	border: var(--divider-width) solid var(--background-modifier-border);
}

.radio-group .radio-row {
	margin-top: 0;
}

.group-label {
	font-weight: 600;
	margin-bottom: 0;
	padding: var(--size-4-3) var(--size-4-4);
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	text-transform: uppercase;
	letter-spacing: 0.036rem;
}

.radio-row input[type="radio"] {
	display: none;
}

.radio-row .radio-icon {
	width: var(--icon-l);
	height: var(--icon-l);
	flex-shrink: 0;
	color: var(--text-muted);
	transition: var(--transition-base);
}

.radio-row .radio-icon.selected {
	display: none;
	color: var(--interactive-accent);
}

.radio-row input[type="radio"]:checked~.radio-icon.unselected {
	display: none;
}

.radio-row input[type="radio"]:checked~.radio-icon.selected {
	display: block;
	color: var(--interactive-accent);
}

/* При наведении на всю строку */
.radio-row:hover .radio-icon.unselected {
	color: var(--text-on-accent);
}

.radio-row:hover .radio-icon.selected {
	color: var(--text-on-accent);
}

/* === Checkbox Styles === */
.checkbox-group {
	margin: 0 0 var(--size-4-2) 0;
}

.checkbox-row {
	display: flex;
	align-items: flex-start;
	/* Aligns with multi-line text/hints */
	gap: var(--size-4-2);
	padding: var(--size-4-2) var(--size-4-4) var(--size-4-2);
	cursor: pointer;
	border-radius: var(--radius-m);
	transition: var(--transition-base);
	user-select: none;
}

.checkbox-row:hover {
	background-color: var(--background-modifier-hover);
}

.checkbox-row input[type="checkbox"] {
	display: none;
}

.checkbox-icon {
	width: var(--icon-l);
	height: var(--icon-l);
	flex-shrink: 0;
	color: var(--text-muted);
	transition: var(--transition-base);
	margin-top: 0.143rem;
	/* Tiny offset for alignment with text */
}

.checkbox-icon.selected {
	display: none;
	color: var(--interactive-accent);
}

.checkbox-row input[type="checkbox"]:checked~.checkbox-icon.unselected {
	display: none;
}

.checkbox-row input[type="checkbox"]:checked~.checkbox-icon.selected {
	display: block;
}

.checkbox-label-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1);
}

.checkbox-label {
	font-size: var(--font-ui-normal);
	color: var(--text-normal);
	line-height: var(--icon-l);
}

.checkbox-hint,
.linter-item-tip,
.hint-text {
	margin-top: 0;
	font-size: var(--font-ui-small);
	color: var(--text-muted);
	line-height: var(--line-height-normal);
}

.input-wrapper {
	margin: var(--size-4-4) 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
}

.field-row {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--size-4-4);
	flex-wrap: nowrap;
	/* No wrapping for settings rows */
}

.field-row label {
	margin-bottom: 0;
	flex-shrink: 0;
	max-width: 60%;
	line-height: var(--p-line-height);
}

.field-row .ui-select-custom {
	flex: 1;
	min-width: 8.571rem;
	/* Slightly more compact */
	max-width: 17.143rem;
	/* Don't let it grow too wide in rows */
}

/* === Базовый класс для строки ввода с кнопкой действия (инпуты команд, формы поиска) === */
.input-action-bar {
	display: flex;
	align-items: flex-end;
	gap: var(--size-4-2);
	padding: var(--size-4-1) 0 var(--size-4-2) 0;
	flex-shrink: 0;
}

.input-action-bar textarea,
.input-action-bar input {
	flex: 1;
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	padding: var(--size-4-3) var(--size-4-4);
	font-size: var(--font-size-input);
	background: var(--background-primary);
	color: var(--text-normal);
	outline: none;
	line-height: var(--line-height-normal);
	transition: border-color var(--anim-fast) ease;
}

.input-action-bar textarea {
	resize: none;
	max-height: 8rem;
	min-height: var(--size-4-9);
	overflow-y: auto;
}

.input-action-bar input {
	height: var(--size-4-9);
}

.input-action-bar textarea:focus,
.input-action-bar input:focus {
	border-color: var(--interactive-accent);
}

.input-action-bar textarea::placeholder,
.input-action-bar input::placeholder {
	color: var(--text-muted);
}

/* Однострочный режим при использовании внутри .field-row */
.field-row .input-action-bar,
.field-row .input-relative {
	flex: 1;
	max-width: 25rem;
	padding: 0;
	align-items: center;
}


/* Панель форматирования - расположена НАД полем ввода */
.formatting-toolbar {
	display: flex;
	align-items: center;
	gap: var(--size-4-1);
	margin-top: 0;
	margin-bottom: var(--size-4-1);
	width: 100%;
}

.input-wrapper .formatting-toolbar {
	margin-top: 0;
	margin-bottom: var(--size-4-1);
}

.input-wrapper .formatting-toolbar + textarea {
	margin-top: 0;
}

/* Если кнопки идут сразу за панелью форматирования, делаем отступ компактным */
.formatting-toolbar+.button-grid {
	margin-top: var(--size-4-2);
}

.input-wrapper label {
	font-size: var(--font-ui-medium);
	color: var(--text-muted);
	text-transform: uppercase;
	font-weight: 600;
}

.input-wrapper input[type="text"],
.input-wrapper input[type="password"],
.input-wrapper input[type="file"],
.input-wrapper input.password-field,
.calendar-placeholder input[type="date"] {
	background: var(--background-primary);
	border: var(--divider-width) solid var(--background-modifier-border);
	color: var(--text-normal);
	padding: var(--button-padding-y);
	/* Синхронизируем с кнопками */
	border-radius: var(--input-radius);
	outline: none;
	transition: var(--transition-base);
	font-size: var(--font-size-input);
	accent-color: var(--interactive-accent);
}

.input-wrapper.is-readonly input,
.input-wrapper.is-readonly textarea,
input[readonly],
textarea[readonly] {
	background-color: var(--background-secondary-alt);
	color: var(--text-muted);
	cursor: default;
	border-style: dashed;
}

:root .input-wrapper.is-readonly {
	flex-direction: row;
	align-items: baseline;
	gap: var(--size-4-2);
}

.input-wrapper.is-readonly label {
	margin-bottom: 0;
	flex-shrink: 0;
}

.readonly-value {
	padding: 0;
	color: var(--text-muted);
	line-height: var(--line-height-normal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	flex: 1;
	min-width: 0;
}

.readonly-value a {
	color: var(--text-link);
	text-decoration: none;
	transition: var(--transition-base);
}

.readonly-value a:hover {
	text-decoration: underline;
	color: var(--text-link-hover);
}

::-webkit-calendar-picker-indicator {
	color: var(--calendar-picker-filter);
	cursor: pointer;
}

.input-wrapper input:focus,
.calendar-placeholder input:focus {
	border-color: var(--interactive-accent);
}

/* Состояния валидации */
:root .input-wrapper input.is-invalid,
:root .calendar-placeholder input.is-invalid {
	border-color: var(--text-error);
	background-color: var(--alert-error-bg);
}

:root .input-wrapper input.is-invalid:focus,
:root .calendar-placeholder input.is-invalid:focus {
	border-color: var(--text-error);
	box-shadow: 0 0 0 var(--size-2-1) var(--alert-error-border);
}

.inline-error {
	color: var(--text-error);
	font-size: var(--font-ui-medium);
	margin-top: var(--size-4-1);
	line-height: var(--line-height-snug);
	display: none;
	/* Скрыто до заполнения текстом в JS */
}

.download-link {
	display: inline-block;
	margin: var(--size-4-3) 0;
	padding: var(--size-4-4);
	background: var(--background-secondary);
	color: var(--interactive-accent);
	text-decoration: none;
	border-radius: var(--radius-m);
	border: var(--divider-width) dashed var(--interactive-accent);
	font-weight: 600;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.calendar-placeholder {
	margin: var(--size-4-4) 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
}

/* === Кастомный выпадающий список (Custom Select) === */
.ui-select-custom {
	position: relative;
	width: 100%;
	user-select: none;
}

.select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--size-4-9);
	/* Fixed height for consistency */
	padding: 0 var(--size-4-3);
	background-color: var(--background-primary);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	color: var(--text-normal);
	font-size: var(--font-ui-medium);
	cursor: pointer;
	transition: var(--transition-base);
	overflow: hidden;
}

.selected-text {
	flex: 1;
	display: flex;
	align-items: center;
	line-height: normal;
	/* Restore standard line-height */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui-select-custom.active .select-trigger {
	border-color: var(--interactive-accent);
	box-shadow: 0 0 0 var(--size-2-1) var(--interactive-accent-soft);
}

.select-trigger:hover {
	border-color: var(--background-modifier-border-hover);
}

.select-options {
	position: absolute;
	top: calc(100% + var(--size-4-1));
	left: 0;
	right: 0;
	background-color: var(--background-primary-alt);
	/* More solid background */
	opacity: 1;
	/* Ensure no transparency */
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	box-shadow: var(--shadow-l);
	z-index: var(--z-header);
	display: none;
	max-height: 14.286rem;
	overflow-y: auto;
	animation: select-fade-in 0.2s ease-out;
}

.ui-select-custom.active .select-options {
	display: block;
}

.select-option {
	padding: var(--size-4-3) var(--size-4-4);
	cursor: pointer;
	transition: var(--transition-base);
	color: var(--text-normal);
	font-size: var(--font-ui-medium);
}

.select-option:hover {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
}

.select-option.selected {
	background-color: var(--interactive-accent-soft);
	color: var(--interactive-accent);
	font-weight: 600;
}

.select-icon {
	width: var(--icon-s);
	height: var(--icon-s);
	color: var(--text-muted);
	transition: transform var(--transition-base);
}

.ui-select-custom.active .select-icon {
	transform: rotate(180deg);
	color: var(--interactive-accent);
}

/* === Кастомный мультивыбор тегов / разделов (Multiselect Picker) === */
.ui-multiselect-custom {
	position: relative;
	width: 100%;
}

.multiselect-input-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: var(--size-4-9);
	padding: var(--size-4-1) var(--size-4-2);
	background-color: var(--background-primary);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	cursor: text;
	transition: var(--transition-base);
	box-sizing: border-box;
	gap: var(--size-4-2);
}

.multiselect-input-box:focus-within {
	border-color: var(--interactive-accent);
	box-shadow: 0 0 0 var(--size-2-1) var(--interactive-accent-soft);
}

.multiselect-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--size-4-1);
	flex: 1;
}

.multiselect-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--size-4-1);
	background-color: var(--background-secondary);
	border: var(--divider-width) solid var(--background-modifier-border);
	color: var(--text-normal);
	padding: var(--size-2-1) var(--size-4-2);
	border-radius: var(--radius-s);
	font-size: var(--font-ui-small);
	line-height: normal;
	user-select: none;
}

.multiselect-chip .chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: var(--text-muted);
	border-radius: var(--radius-circle);
	width: var(--icon-s);
	height: var(--icon-s);
	transition: color var(--anim-fast), background-color var(--anim-fast);
}

.multiselect-chip .chip-remove:hover {
	color: var(--text-error);
	background-color: var(--alert-error-bg);
}

.multiselect-search-input {
	border: none;
	background: transparent;
	padding: var(--size-2-1) var(--size-4-1);
	font-size: var(--font-ui-medium);
	color: var(--text-color);
	outline: none;
	flex: 1;
	min-width: 6rem;
	width: auto;
	margin: 0;
}

.multiselect-search-input:focus {
	border: none;
	box-shadow: none;
}

.multiselect-arrows {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--size-4-1);
	cursor: pointer;
	flex-shrink: 0;
}

.multiselect-arrows .select-icon.is-open {
	transform: rotate(180deg);
	color: var(--interactive-accent);
}

.multiselect-dropdown {
	position: absolute;
	top: calc(100% + var(--size-4-1));
	left: 0;
	right: 0;
	background-color: var(--background-primary-alt);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	box-shadow: var(--shadow-l);
	z-index: var(--z-header);
	max-height: 14.286rem;
	overflow-y: auto;
}

.multiselect-options-list {
	display: flex;
	flex-direction: column;
}

.multiselect-option {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
	padding: var(--size-4-2) var(--size-4-3);
	cursor: pointer;
	transition: background-color var(--anim-fast);
	color: var(--text-normal);
	font-size: var(--font-ui-medium);
	user-select: none;
}

.multiselect-option:hover {
	background-color: var(--interactive-accent-soft);
	color: var(--text-normal);
}

.multiselect-option.is-selected {
	color: var(--interactive-accent);
	font-weight: 500;
}

.multiselect-option .checkbox-icon {
	width: var(--icon-s);
	height: var(--icon-s);
	flex-shrink: 0;
	color: var(--text-muted);
}

.multiselect-option.is-selected .checkbox-icon {
	color: var(--interactive-accent);
}

.multiselect-empty {
	padding: var(--size-4-3);
	text-align: center;
}

.multiselect-custom-add {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
	padding: var(--size-4-2) var(--size-4-3);
	cursor: pointer;
	border-top: var(--divider-width) solid var(--background-modifier-border);
	color: var(--interactive-accent);
	font-size: var(--font-ui-medium);
	background-color: var(--background-secondary);
}

.multiselect-custom-add:hover {
	background-color: var(--interactive-accent-soft);
}

/* Компактный вид внутри таблиц свойств */
.multiselect-table-field {
	margin: 0;
}

.multiselect-table-field .multiselect-input-box {
	min-height: var(--size-4-8);
}

@keyframes select-fade-in {
	from {
		opacity: 0;
		transform: translateY(calc(-1 * var(--size-4-2)));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Specific Input Styles --- */
.drawer-search-input {
	height: var(--size-4-8);
	/* More compact */
	padding: var(--size-4-1) var(--size-4-2);
	background-color: var(--background-secondary);
	/* Matches sidebar depth */
	border-color: transparent;
	border-radius: var(--radius-m);
	flex: 1;
	min-width: 0;
	width: 100%;
}

.drawer-search-input:focus {
	background-color: var(--background-primary);
	border-color: var(--interactive-accent);
}

/* --- Task Indicators (Status Circles) --- */
.task-status {
	width: var(--icon-s);
	height: var(--icon-s);
	vertical-align: middle;
	margin-right: var(--size-4-2);
	color: var(--checkbox-border-color);
	stroke-width: 2.5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.task-status.done {
	color: var(--checkbox-color);
}

/* --- Блок настроек аватара профиля --- */
.avatar-settings-container .avatar-circle {
	width: 120px;
	height: 120px;
	font-size: var(--font-avatar-letter);
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border: 3px solid var(--border-color);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.avatar-settings-container .avatar-circle:hover {
	transform: scale(1.02) translate3d(0, 0, 0);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.avatar-settings-container .avatar-circle .avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-settings-container .btn-subtle {
	width: auto;
	padding: var(--size-4-2) var(--size-4-4);
	border: var(--divider-width) solid var(--border-color);
	border-radius: var(--radius-m);
	font-weight: var(--font-weight-medium);
	display: inline-flex;
	gap: var(--size-4-2);
}

.avatar-settings-container .btn-subtle:hover {
	border-color: var(--interactive-accent);
	background-color: var(--background-modifier-hover);
}

.avatar-settings-container .btn-subtle.text-danger:hover {
	border-color: var(--text-error);
	color: var(--text-error);
}

/* === Parameter Row (Read-only metadata display) === */
.parameter-row {
	margin-bottom: var(--size-4-2);
	line-height: var(--line-height-relaxed);
	font-size: var(--font-size-paragraph);
}

.parameter-row span:first-child {
	color: var(--text-muted);
	margin-right: var(--size-4-1);
}

/* Предотвращение принудительного авто-масштабирования вьюпорта в iOS Safari */
@supports (-webkit-touch-callout: none) {
	@media (max-width: 48rem) {

		input,
		textarea {
			font-size: var(--font-size-input_ios) !important;
		}
	}
}

/* Вертикальное расположение полей в строках форм на мобильных экранах */
@media (max-width: 48rem) {
	.field-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--size-4-2);
	}

	.field-row label {
		max-width: 100%;
	}

	.field-row .ui-select-custom,
	.field-row .input-action-bar,
	.field-row .input-relative {
		max-width: 100%;
		width: 100%;
	}
}

/* Отключение встроенных нативных кнопок очистки Chrome/Edge */
input::-webkit-clear-button,
input::-webkit-search-cancel-button,
input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

/* === Кнопка очистки текстового поля ввода === */
.input-action-bar .input-relative {
	flex: 1;
}

:root .clearable-field {
	padding-right: 2.5rem;
}

/* Если у инпута есть выпадающий список (list), увеличиваем отступ для стрелочки */
:root input[list].clearable-field {
	padding-right: 3.429rem;
}

/* Фиксируем и стилизуем нативную стрелочку datalist, чтобы она не уезжала влево */
:root input[list]::-webkit-calendar-picker-indicator {
	position: absolute;
	right: var(--size-4-3);
	top: 50%;
	transform: translateY(-50%);
	width: 1rem;
	height: 1rem;
	margin: 0;
	padding: 0;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.1s ease;
}

:root input[list]::-webkit-calendar-picker-indicator:hover {
	opacity: 1.0;
}

:root .clear-button,
.input-relative button.clear-button {
	position: absolute;
	right: var(--size-4-3);
	top: 50%;
	transform: translateY(-50%);
	width: 1.143rem;
	height: 1.143rem;
	min-width: unset;
	min-height: unset;
	margin: 0;
	padding: 0;
	border: none;
	border-top: none;
	border-bottom: none;
	border-radius: 0;
	background: transparent;
	background-color: transparent;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.1s ease;
	z-index: var(--z-dropdown);
	pointer-events: all;
	outline: none;
	box-shadow: none;
}

/* Сдвигаем крестик левее, если есть стандартная стрелочка datalist */
input[list] ~ .clear-button {
	right: 2.2rem;
}

:root .clear-button svg,
:root .clear-button i {
	width: 0.857rem;
	height: 0.857rem;
	stroke-width: 2px;
	stroke: currentColor;
	fill: none;
	background: transparent;
}

:root .clear-button:hover,
:root .clear-button:focus,
:root .clear-button:active,
.input-relative button.clear-button:hover,
.input-relative button.clear-button:focus,
.input-relative button.clear-button:active {
	color: var(--interactive-accent);
	background: transparent;
	background-color: transparent;
	outline: none;
	box-shadow: none;
	border: none;
}

:root .clear-button:active {
	transform: translateY(-50%) scale(0.85);
}

:root .clear-button.hidden {
	display: none;
}

:root .clear-button.hidden {
	display: none;
}

/* === [css/drawer.css] === */
/* === drawer.css ===
   Mobile drawers, tab bar, animations */

:root {
	--tab-bar-height: 3.571rem;
	--drawer-width: 20rem;
	--drawer-max-width: 25rem;
	--drawer-shadow: 0 0 var(--size-4-10) var(--shadow-color);
	--drawer-content-padding: var(--size-4-5);
	--drawer-header-spacing: 0;
	/* Будем использовать padding на контейнерах */
}

/* === Mobile Tab Bar === */
.mobile-tab-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--tab-bar-height);
	background-color: var(--background-primary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 var(--size-4-6);
	border-bottom: var(--divider-width) solid var(--divider-color);
	z-index: calc(var(--z-header) + 5);
	padding-top: env(safe-area-inset-top);
	backdrop-filter: blur(10px);
}

@media (min-width: 73.143rem) {
	.mobile-tab-bar {
		display: none !important;
	}
}


.tab-center-brand {
	display: none;
	/* Больше не используется, заменено на .tab-center-chat-info для унификации */
}

.tab-center-chat-info {
	display: flex;
	align-items: center;
	gap: var(--size-4-4);
	flex: 1;
	min-width: 0;
	padding: 0 var(--size-4-6);
}

.tab-center-chat-info .chat-header-avatar {
	width: var(--size-4-8);
	height: var(--size-4-8);
	border-radius: var(--avatar-user-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--font-ui-small);
	flex-shrink: 0;
	color: var(--text-on-accent);
	overflow: hidden;
}

.tab-center-chat-info .chat-header-avatar.is-group {
	border-radius: var(--avatar-group-radius);
}

.tab-center-chat-info .chat-header-avatar.brand-avatar {
	background: transparent;
	overflow: hidden;
}

.tab-center-chat-info .chat-header-avatar.brand-avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tab-center-chat-info .chat-header-info {
	min-width: 0;
}

.tab-center-chat-info .chat-header-title {
	font-weight: 600;
	font-size: var(--font-ui-medium);
	color: var(--text-normal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tab-center-chat-info .chat-header-subtitle {
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
}

.tab-center-chat-info .chat-header-filter-label {
	display: inline-flex;
	align-items: center;
	gap: var(--size-4-1);
}

.tab-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--size-4-1);
	width: var(--size-4-10);
	height: var(--size-4-10);
	color: var(--text-muted);
	border: none;
	background: transparent;
	border-radius: var(--radius-m);
}

.tab-item:hover,
.tab-item.active {
	color: var(--interactive-accent);
	background: transparent;
	transform: none;
	box-shadow: none;
}

#nav-news-mobile {
	margin-right: var(--size-4-3);
}

/* === Mobile Drawer (Burger Menu) === */
.mobile-drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--background-modifier-overlay);
	backdrop-filter: blur(var(--size-2-1));
	z-index: var(--z-drawer);
}

.mobile-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--drawer-width);
	background-color: var(--background-secondary);
	z-index: calc(var(--z-drawer) + 1);
	display: flex;
	flex-direction: column;
	/* Profile (top), MainBody (Rail + Panel) */
	padding: 0;
	overflow: hidden;
	opacity: 1;
}

.mobile-drawer:not(.is-right) {
	left: 0;
	box-shadow: var(--drawer-shadow);
}

.mobile-drawer.is-right {
	right: 0;
	box-shadow: calc(-1 * var(--size-4-1)) 0 var(--size-4-5) var(--shadow-color-soft), var(--shadow-m);
}

.mobile-drawer.rail-integrated {
	width: 85%;
	/* Широкая шторка */
	max-width: var(--drawer-max-width);
}

.mobile-drawer-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--background-secondary);
}

.drawer-main-body {
	flex: 1;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

.mobile-drawer .side-rail {
	height: 100%;
	background-color: var(--background-secondary);
	padding-top: var(--size-4-2);
	/* Выровнено с заголовком после профиля */
	flex-shrink: 0;
	z-index: calc(var(--z-base) + 2);
}

.mobile-drawer .sidebar-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0;
	padding-top: 0;
	background-color: var(--background-secondary);
	overflow-y: auto;
	z-index: calc(var(--z-base) + 1);
	position: relative;
}

.rail-folders-scroll {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1);
	overflow-y: auto;
	padding-bottom: var(--size-4-8);
}

/* GUARD: RIGHT DRAWER CLASSES - REMOVED DUPLICATION, USING INHERITANCE ABOVE */
/* Rail borders for different sides */
.mobile-drawer:not(.is-right) .side-rail {
	border-right: var(--divider-width) solid var(--divider-color);
}

.mobile-drawer.is-right .side-rail {
	border-left: var(--divider-width) solid var(--divider-color);
}

/* END GUARD */

.drawer-profile {
	display: flex;
	align-items: center;
	gap: var(--size-4-3);
	padding: calc(env(safe-area-inset-top, 0px) + var(--size-4-4)) var(--drawer-content-padding) var(--size-4-4) 0.65rem;
	/* Выравнивание аватара по иконкам рейла */
	background: var(--background-secondary);
	border-bottom: var(--divider-width) solid var(--divider-color);
}

.drawer-profile .profile-avatar {
	width: var(--size-4-11);
	height: var(--size-4-11);
	font-size: var(--font-ui-normal);
	/* Для буквы в фоллбеке */
}

.drawer-profile .profile-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.drawer-profile .profile-name {
	font-weight: 700;
	font-size: var(--font-ui-normal);
	color: var(--text-normal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.drawer-profile .profile-role {
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
}


:root #mobile-nav-content {
	flex: 1;
	overflow-y: auto;
	gap: 0;
	/* Гарантия отсутствия наложения на Rail */
	margin: 0;
	align-content: start;
}

/* === Drawer Tabs (Навигация / Мессенджер) === */
.drawer-tabs {
	display: flex;
	gap: var(--size-4-1);
}

.drawer-tab {
	padding: var(--size-4-1) var(--size-4-2);
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: var(--font-ui-medium);
	font-weight: 600;
	cursor: pointer;
	border-bottom: var(--size-2-1) solid transparent;
	transition: color var(--anim-fast), border-color var(--anim-fast);
}

.drawer-tab:hover {
	color: var(--text-normal);
}

.drawer-tab.active {
	color: var(--interactive-accent);
	border-bottom-color: var(--interactive-accent);
}

.mobile-chat-list {
	flex: 1;
	overflow-y: auto;
}

/* Alpine Transitions */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

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

	to {
		transform: translateX(0);
	}
}

@keyframes slideOutLeft {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

@keyframes slideOutRight {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(100%);
	}
}

/* === [css/context_menu.css] === */
/* === context_menu.css ===
   Dropdown menus, context actions, popups */

.ui-context-menu {
	position: fixed; /* Fixed is safer for global context menus to avoid overflow issues */
	min-width: 12.857rem;
	background-color: var(--background-primary-alt);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	box-shadow: var(--shadow-l);
	z-index: var(--z-context); /* Higher than drawer and selects */
	display: none;
	padding: var(--size-2-1) 0;
	animation: context-menu-fade-in 0.15s ease-out;
	user-select: none;
}

.ui-context-menu.active {
	display: block;
}

.context-menu-item {
	display: flex;
	align-items: center;
	gap: var(--size-4-3);
	padding: var(--size-4-2) var(--size-4-4);
	cursor: pointer;
	transition: var(--transition-base);
	color: var(--text-normal);
	font-size: var(--font-ui-medium);
}

.context-menu-item:hover {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
}

.context-menu-item .btn-icon {
	width: var(--icon-s);
	height: var(--icon-s);
	color: inherit; /* Should inherit from container/hover state */
	opacity: 0.7;
}

.context-menu-item:hover .btn-icon {
	opacity: 1;
}

.context-menu-divider {
	height: var(--divider-width);
	background-color: var(--divider-color);
	margin: var(--size-2-1) 0;
	opacity: 0.5;
}

@keyframes context-menu-fade-in {
	from {
		opacity: 0;
		transform: translateY(calc(-1 * var(--size-4-1))) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}


/* === [css/modals.css] === */
/* === modals.css ===
   Styles for standard modals (Confirm/Prompt/Alert), image zoom overlay, and large articles (KB) */

/* === Backdrop / Overlay === */
.ui-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	width: 100dvw;
	height: 100dvh;
	background-color: var(--background-modifier-overlay);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: var(--z-overlay);
	padding: var(--size-4-4);
}

/* === Standard Modal Box === */
.ui-modal {
	background-color: var(--background-secondary);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-m);
	width: 100%;
	max-width: 22rem;
	padding: var(--size-4-6);
	text-align: center;
	/* No ADHD animations: minimalism and clarity */
}

.ui-modal-title {
	margin-top: 0;
	font-size: var(--font-content-large);
	font-weight: 700;
	margin-bottom: var(--size-4-4);
}

.ui-modal-body {
	margin-bottom: var(--size-4-6);
	color: var(--text-muted);
	line-height: var(--line-height-normal);
}

/* === Large Modal (Knowledge Base / Articles) === */
.ui-modal.ui-modal-large {
	max-width: 50rem;
	/* ~800px */
	text-align: left;
	max-height: 85vh;
	max-height: 85dvh;
	display: flex;
	flex-direction: column;
}

.ui-modal.ui-modal-large .ui-modal-body {
	overflow-y: auto;
	padding-right: var(--size-4-2);
	margin-bottom: var(--size-4-6);
	flex: 1;
	color: var(--text-normal);
}


.ui-modal.ui-modal-large .ui-modal-body strong {
	color: var(--text-bold);
}

/* === User Profile Modal === */
.user-profile-modal-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--size-4-4);
	text-align: center;
	margin-top: var(--size-4-4);
}

.user-profile-modal-content .profile-avatar-wrapper {
	margin-bottom: var(--size-4-4);
}

.user-profile-modal-content .profile-avatar-large {
	width: 120px;
	height: 120px;
	font-size: var(--font-content-xxlarge);
}

/* === User Profile Modal Parameters === */
.ui-modal-body .parameter-row span:last-child {
	color: var(--text-normal);
}

/* === Modal Close Button (Cross in corner) === */
.modal-close-btn {
	position: absolute;
	top: var(--size-4-4);
	right: var(--size-4-4);
	width: var(--size-4-8);
	height: var(--size-4-8);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-m);
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--text-muted);
	transition: var(--transition-base);
	padding: 0;
	z-index: 10;
}

.modal-close-btn:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-normal);
}

.modal-close-btn .btn-icon {
	width: var(--icon-m);
	height: var(--icon-m);
}

/* === Chat Members Modal === */
.chat-members-container {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-3);
	width: 100%;
}

.chat-members-container .search-filter-wrapper {
	padding: 0;
	margin-bottom: var(--size-4-2);
}

.chat-members-list {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1);
	max-height: 60vh;
	overflow-y: auto;
}

.chat-members-empty {
	padding: var(--size-4-4);
	text-align: center;
	color: var(--text-muted);
}

.chat-member-row {
	display: flex;
	align-items: center;
	gap: var(--size-4-3);
	padding: var(--size-4-2) var(--size-4-3);
	border-radius: var(--radius-m);
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.chat-member-row:hover {
	background-color: var(--background-modifier-hover);
}

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

.chat-member-name-line {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
}

.chat-member-name {
	font-weight: 600;
	color: var(--text-normal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-member-badge {
	font-size: var(--font-content-xsmall);
	padding: 2px var(--size-4-2);
	border-radius: var(--radius-s);
	background-color: var(--background-secondary-alt);
	color: var(--text-muted);
	border: var(--divider-width) solid var(--background-modifier-border);
	white-space: nowrap;
}

.chat-member-username {
	font-size: var(--font-content-small);
	color: var(--text-muted);
}


/* === [css/news.css] === */
/* === news.css ===
   News cards (delta styling), news detail view, news-done button */

/* Delta: .news-card specific properties (base in buttons.css) */
.news-card {
	padding: var(--button-padding-y) var(--button-padding-x);
	gap: var(--size-4-3);
	min-height: var(--size-4-10);
	color: var(--marker-color);
	border-radius: 0;
	transition: opacity var(--anim-speed) ease, background-color var(--anim-speed) ease;
}

.news-card.is-done {
	opacity: 0.5;
}

.news-card.is-done .news-sender {
	color: var(--text-muted);
}

.news-card.is-done .news-date {
	opacity: 0.5;
}

.news-card.is-done .news-done-btn i,
.news-card.is-done .news-done-btn svg {
	color: var(--text-muted);
}

/* При наведении — полный контраст на акцентном фоне */
.news-card:hover .news-sender,
.news-card:hover .news-done-btn i,
.news-card:hover .news-done-btn svg {
	color: var(--text-on-accent);
	opacity: 1;
}

.news-card:hover {
	opacity: 1;
}

.news-card-content {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	font-size: var(--font-ui-medium);
	gap: var(--size-4-2);
	cursor: pointer;
}

.news-sender {
	font-weight: 400;
	color: inherit;
	line-height: var(--line-height-snug);
	flex: 1;
}

.news-card:not(:hover) .news-sender {
	color: var(--text-normal);
}

.news-date {
	color: var(--text-muted);
	font-size: var(--font-ui-small);
}

.news-card:hover .news-date {
	color: var(--button-text-color);
	opacity: 0.8;
}

.news-done-btn {
	width: auto;
	padding: 0;
	background: transparent;
	border: none;
	border-top: none;
}

.news-done-btn:hover {
	background-color: transparent;
}

.news-done-btn i,
.news-done-btn svg {
	width: var(--icon-l);
	height: var(--icon-l);
	color: var(--checkbox-border-color);
}

.news-card.is-done .news-done-btn i,
.news-card.is-done .news-done-btn svg {
	color: var(--checkbox-color);
}

.news-card:hover .news-done-btn i,
.news-card:hover .news-done-btn svg {
	color: var(--text-on-accent);
}

.news-done-btn:hover i,
.news-done-btn:hover svg {
	color: var(--checkbox-color-hover);
}

/* === News Detail View === */
.news-content-view {
	max-width: 800px;
	margin: 0 auto;
	padding: 0;
	animation: fadeIn var(--anim-speed) ease;
}

.header-with-back {
	display: flex;
	align-items: center;
	gap: var(--size-4-4);
	margin-bottom: var(--size-4-2);
}

.header-with-back h1 {
	margin: 0;
	font-size: var(--font-content-xlarge);
}

.news-date-full {
	display: block;
	color: var(--text-muted);
	font-size: var(--font-ui-medium);
	text-align: right;
	width: 100%;
}

.news-body-text a {
	color: var(--text-link);
	text-decoration: underline;
}

.news-footer {
	margin-top: var(--size-4-10);
	/* Большой отступ перед подвалом */
	padding: 0;
}

/* === News Sidebar Styling === */
.user-badge-sidebar {
	width: 100%;
	background-color: var(--background-secondary);
}

.badge-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 var(--size-4-5);
	min-height: var(--nav-item-height);
	border-top: var(--divider-width) solid var(--background-modifier-border);
	gap: var(--size-4-2);
}

.settings-btn-subtle {
	width: auto;
}

.settings-btn-subtle i {
	width: var(--icon-s);
	height: var(--icon-s);
}

#news-feed {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 0;
	min-height: 20rem;
}

.sidebar-info .hint-text {
	padding: var(--size-4-3) var(--size-4-5);
}

/* === Full Page News Styling === */
.news-list-full-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
	padding: 0 var(--size-4-1);
}

.news-list-full-header .small-label {
	margin: 0;
	padding: 0;
	opacity: 0.8;
}

/* В широком режиме список новостей выглядит как аккуратная колонка */
#app-workspace .news-side-list {
	max-width: 600px;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* === News Details Header & Controls === */
.news-content-header {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin-bottom: var(--size-4-6);
	gap: var(--size-4-6);
}

.news-done-btn.is-large {
	margin-top: var(--size-4-6);
	flex-shrink: 0;
}

.news-done-btn.is-large i,
.news-done-btn.is-large svg {
	transform: scale(1.5);
}

.news-title {
	margin-top: var(--size-4-2);
	margin-bottom: 0;
}

.news-empty-hint {
	padding: var(--drawer-content-padding);
}

/* === [css/messenger.css] === */
/* --- Layout & Dimensions (Level 0) --- */
:root {
	--chat-shell-padding-mobile: var(--size-4-15);
	/* 60px/4.286rem */
	--chat-shell-padding-desktop: var(--size-4-8);
	/* 32px/2.286rem */
	--bubble-max-width: 85%;
	--bubble-img-max-height: 21.429rem;
	/* 300px */
	--bubble-blur: 8px;
}

.chat-view {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	position: relative;
}

@media (min-width: 73.143rem) {
	.chat-view {
		/* Desktop: Height fixed within shell via flex stretching */
		height: 100%;
		flex: 1;
		min-height: 0;
	}
}

/* --- Message Debug Info (Admin only) --- */
.bubble-debug-info,
.chat-list-debug-info,
.chat-list-item-debug-info {
	display: none;
	font-family: var(--font-mono);
	font-size: var(--font-ui-smaller);
	color: var(--text-debug);
	border-bottom: 1px dashed var(--background-modifier-border);
	padding-bottom: var(--size-4-1);
	margin-bottom: var(--size-4-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-list-debug-info {
	margin: 5px 10px;
	border-bottom: 1px solid var(--text-debug);
	width: fit-content;
}

body.ui-debug .bubble-debug-info,
body.ui-debug .chat-list-debug-info,
body.ui-debug .chat-list-item-debug-info {
	display: block;
}

/* --- Message Reply Block --- */
.bubble-reply {
	background: var(--background-modifier-hover);
	border-left: 3px solid var(--interactive-accent);
	border-radius: var(--radius-s);
	padding: var(--size-4-1) var(--size-4-2);
	margin-bottom: var(--size-4-2);
	font-size: var(--font-content-small);
	color: var(--text-muted);
	cursor: pointer;
	transition: background var(--anim-fast);
	/* Схлопывание длинного текста до 2 строк */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bubble-reply:hover {
	background: var(--background-modifier-active);
}

.bubble-reply.is-deleted {
	cursor: default;
	opacity: 0.65;
}

.bubble-reply.is-deleted:hover {
	background: var(--background-modifier-hover);
	/* Предотвращаем изменение цвета на ховер */
}

.chat-bubble-row.is-own .bubble-reply {
	background: var(--background-modifier-hover);
	border-left-color: var(--interactive-accent);
	color: var(--text-muted);
}

.reply-author {
	font-weight: var(--font-weight-bold);
	color: var(--interactive-accent);
	margin-bottom: 2px;
	display: block;
	font-size: 0.9em;
}

.chat-bubble-row.is-own .reply-author {
	color: var(--interactive-accent);
}

/* --- Messenger Header --- */
.chat-header {
	display: flex;
	align-items: center;
	gap: var(--size-4-3);
	padding: var(--size-4-2) var(--size-4-5);
	border-bottom: var(--divider-width) solid var(--divider-color);
	flex-shrink: 0;
	background: var(--background-primary);
}

/* === Единый базовый стиль аватаров мессенджера (DRY) === */
.chat-header-avatar,
.chat-list-avatar,
.avatar-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	color: var(--always-white);
	background: var(--interactive-accent);
	flex-shrink: 0;
	overflow: hidden;
}

/* Единая типографика и цвет для буквенных символов внутри любых аватаров */
.chat-header-avatar span,
.chat-list-avatar span,
.avatar-circle span {
	color: var(--always-white);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
}

.chat-header-avatar {
	width: var(--size-4-10);
	height: var(--size-4-10);
	border-radius: var(--avatar-user-radius);
	font-size: var(--font-ui-xlarge, 1.5rem);
}

.chat-header-main {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--size-4-6);
}

.chat-header-info {
	display: flex;
	flex-direction: column;
}

.chat-header-title {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-ui-large);
	color: var(--text-normal);
}

.chat-header-subtitle {
	font-size: var(--font-ui-medium);
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: var(--size-4-3);
	flex-wrap: wrap;
}

.chat-header-filter-label {
	display: inline-flex;
	align-items: center;
	gap: var(--size-4-1);
	font-size: var(--font-ui-small);
	color: var(--text-muted);
	cursor: pointer;
	user-select: none;
	margin: 0;
	transition: var(--transition-base);
}

.chat-header-filter-label .filter-label-short {
	display: none;
}

.chat-header-filter-label .filter-label-full {
	display: inline;
}

.chat-header-filter-label:hover {
	color: var(--text-normal);
}

.chat-header-filter-checkbox {
	width: auto;
	margin: 0;
	cursor: pointer;
	accent-color: var(--interactive-accent);
}

@media (max-width: 48rem) {
	.chat-header-filter-label .filter-label-short {
		display: inline;
	}

	.chat-header-filter-label .filter-label-full {
		display: none;
	}
}



.chat-header-tools {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}

.chat-header-tools .input-wrapper {
	margin-bottom: 0;
	min-width: 11rem;
}

.chat-header-tools label {
	display: none;
	/* Compact header mode */
}

/* Custom Select adjustments for narrow header */
.chat-header-tools .ui-select-custom .select-trigger {
	padding: 0 var(--size-4-2);
	font-size: var(--font-ui-small);
	height: var(--size-4-6);
}

@media (max-width: 48rem) {
	.chat-header-tools {
		display: none;
		/* Hide tools on mobile handheld */
	}
}

/* --- Chat Feed (Scrollable Area) --- */
.chat-feed {
	flex: 1;
	overflow-y: auto;
	padding: var(--size-4-4) var(--size-4-4) var(--size-4-8) var(--size-4-4);
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
	transition: opacity var(--transition-base, 150ms ease-in-out);
}

.chat-feed.htmx-swapping {
	opacity: 0.25;
	transition: opacity 120ms ease-out;
}

.chat-feed.htmx-settling {
	opacity: 1;
	transition: opacity 180ms ease-in;
}

.chat-feed-spacer {
	flex-grow: 1;
}

@media (max-width: 73.142rem) {

	.chat-header {
		display: none;
		/* Hide redundant header on mobile */
	}

	.chat-feed {
		/* Используем компактные боковые отступы на мобильных */
		padding-left: var(--size-4-3);
		padding-right: var(--size-4-3);
		padding-bottom: var(--size-4-4);
	}

	.chat-feed-spacer {
		display: none;
	}
}

/* --- Content Separators --- */
.chat-date-separator {
	text-align: center;
	padding: var(--size-4-2) 0;
	margin: var(--size-4-2) 0;
}

.chat-date-separator span {
	background: var(--background-secondary);
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	font-weight: var(--font-weight-semibold);
	padding: var(--size-4-1) var(--size-4-3);
	border-radius: var(--bubble-radius);
}

.chat-unread-separator {
	display: flex;
	align-items: center;
	gap: var(--size-4-4);
	margin: var(--size-4-6) 0;
	color: var(--text-error);
	font-size: var(--font-ui-small);
	font-weight: var(--font-weight-semibold);
}

.chat-unread-separator::before,
.chat-unread-separator::after {
	content: "";
	flex: 1;
	height: var(--divider-width);
	background: currentColor;
	opacity: 0.2;
}

/* --- Message Bubble & Base Layout --- */
@keyframes failSafeShow {
	to {
		opacity: 1;
		visibility: visible;
	}
}

.chat-bubble-row {
	display: flex;
	align-items: flex-end;
	gap: var(--size-4-2);
	max-width: var(--bubble-max-width);
	animation: failSafeShow 0.1s forwards;
	animation-delay: 2s;
	/* failSafeShow сработает через 2 сек, если JS не успеет */

	/* Состояние до инициализации JS */
	opacity: 0;
	transition: opacity var(--anim-fast) ease-in;
}

.chat-bubble-row.is-own,
.chat-bubble-row.is-other {
	opacity: 1;
	animation: bubbleIn var(--anim-fast) ease forwards;
}

.chat-bubble-row.is-own {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.chat-bubble-row.is-other {
	align-self: flex-start;
}

.avatar-circle,
.chat-bubble-avatar {
	width: var(--size-4-7);
	height: var(--size-4-7);
	border-radius: var(--avatar-user-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-ui-smaller);
	flex-shrink: 0;
	color: var(--always-white);
	overflow: hidden;
}

.avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.chat-bubble-row.is-own .chat-bubble-avatar {
	display: none;
	/* Hide own avatar in chat (standard UX) */
}

.chat-bubble {
	padding: var(--size-4-2) var(--size-4-3);
	border-radius: var(--bubble-radius);
	max-width: 100%;
	position: relative;
	line-height: var(--line-height-bubble);
	font-size: var(--font-size-message);
	word-wrap: break-word;
	box-shadow: 0 1px 2px var(--shadow-color-soft);
	transition: transform var(--anim-fast) ease;
}

.chat-bubble-row.is-own .chat-bubble {
	background-color: var(--bubble-bg-own);
	backdrop-filter: blur(var(--bubble-blur));
	-webkit-backdrop-filter: blur(var(--bubble-blur));
	color: var(--bubble-text-own);
	border: var(--bubble-border-own);
	border-left: var(--bubble-border-left);
	border-bottom-right-radius: var(--size-4-1);
}

.chat-bubble-row.is-other .chat-bubble {
	background: var(--bubble-bg-other);
	color: var(--bubble-text-other);
	border: var(--divider-width) solid var(--bubble-border-other);
	border-bottom-left-radius: var(--size-4-1);
}

.bubble-author {
	font-size: var(--font-ui-small);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--size-2-1);
}

.chat-bubble-row.is-own .bubble-author {
	display: none;
}

.bubble-text p {
	font-size: inherit;
	margin-bottom: var(--size-4-3);
	line-height: var(--line-height-normal);
}

.bubble-text p:last-child {
	margin-bottom: 0;
}

/* Отступы для списков в сообщениях */
.bubble-text ul,
.bubble-text ol {
	padding-left: var(--size-4-5);
	margin-bottom: var(--size-4-3);
}

/* Сближение списка с предшествующим абзацем */
.bubble-text p+ul,
.bubble-text p+ol {
	margin-top: calc(-1 * var(--size-4-1));
}

/* Защита от лишнего отступа в конце сообщения */
.bubble-text ul:last-child,
.bubble-text ol:last-child {
	margin-bottom: 0;
}

/* --- Message Content (Markdown blocks) --- */

/* Blockquotes */
.chat-bubble blockquote {
	margin: var(--size-4-2) 0;
	padding: var(--size-4-1) var(--size-4-4);
	font-size: var(--font-content-small);
	border-left: 3px solid var(--interactive-accent);
	background-color: color-mix(in srgb, var(--interactive-accent), transparent 90%);
	color: var(--text-muted);
	border-radius: 0 var(--radius-s) var(--radius-s) 0;
	font-style: normal;
}

.chat-bubble-row.is-own blockquote {
	border-left-color: var(--interactive-accent);
	background-color: color-mix(in srgb, var(--interactive-accent), transparent 85%);
	color: inherit;
	font-style: normal;
}

/* Inline Code & Blocks */
.chat-bubble code {
	background-color: transparent;
	padding: 0;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--font-content-medium);
	white-space: pre-wrap;
	word-break: break-all;
	border: none;
}

.chat-bubble-row.is-own code {
	background-color: transparent;
	border: none;
	color: inherit;
}

.chat-bubble pre {
	background-color: color-mix(in srgb, var(--interactive-accent), transparent 90%);
	padding: var(--size-4-3);
	margin: var(--size-4-3) 0;
	border-radius: var(--radius-m);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: var(--font-content-medium);
	line-height: var(--line-height-relaxed);
	border: 1px solid color-mix(in srgb, var(--interactive-accent), transparent 90%);
	box-shadow: none;
	white-space: pre-wrap;
	word-break: break-word;
}

.chat-bubble-row.is-own pre {
	background-color: color-mix(in srgb, var(--interactive-accent), transparent 85%);
	border-color: rgba(255, 255, 255, 0.1);
	color: inherit;
}

.chat-bubble pre code {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	white-space: pre-wrap;
	word-break: break-word;
	color: inherit;
	box-shadow: none !important;
}

/* Tags & Mentions (Context Overrides) */
:root .bubble-text .tag,
:root .bubble-text .mention {
	color: var(--interactive-accent);
	background-color: transparent;
	border: none;
	padding: 0;
	border-radius: 0;
	font-weight: var(--font-weight-medium);
	cursor: pointer;
}

:root .bubble-text .tag:hover,
:root .bubble-text .mention:hover {
	text-decoration: underline;
}

:root .is-own .bubble-text .tag,
:root .is-own .bubble-text .mention {
	color: var(--interactive-accent);
}

/* --- Attachments & Media --- */
.bubble-attachments {
	margin-top: var(--size-4-2);
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1);
}

/* Сетка для нескольких картинок */
.bubble-attachments-grid {
	display: grid !important;
	gap: var(--size-4-1) !important;
	width: 100%;
	max-width: 100%;
}

/* Сетки для разного количества картинок */
.bubble-attachments-grid.img-grid-1 {
	grid-template-columns: 1fr;
}

.bubble-attachments-grid.img-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.bubble-attachments-grid.img-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.bubble-attachments-grid.img-grid-4 {
	grid-template-columns: repeat(2, 1fr);
}

.bubble-attachments-grid.img-grid-many {
	grid-template-columns: repeat(3, 1fr);
}

/* Настройки пропорций картинок в зависимости от сетки */
.bubble-attachments-grid.img-grid-1 .att-image img {
	max-width: 100%;
	max-height: var(--bubble-img-max-height);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--size-4-1);
}

/* Общие стили картинок внутри сетки (для 2+ изображений) */
.bubble-attachments-grid:not(.img-grid-1) .att-image {
	width: 100%;
	height: 110px;
	/* Базовая высота на мобильных */
	overflow: hidden;
	border-radius: var(--size-4-1);
}

@media (min-width: 768px) {
	.bubble-attachments-grid:not(.img-grid-1) .att-image {
		height: 140px;
		/* Увеличенная высота на десктопах */
	}
}

.bubble-attachments-grid:not(.img-grid-1) .att-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--size-4-1);
	display: block;
}

/* Стилизация заглушек в сетке */
.bubble-attachments-grid:not(.img-grid-1) .att-image img.img-load-error {
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: unset;
	object-fit: contain;
	background: var(--background-secondary);
}

.att-image img {
	max-width: 100%;
	max-height: var(--bubble-img-max-height);
	border-radius: var(--size-4-1);
	cursor: pointer;
	transition: opacity var(--anim-fast);
	display: block;
}

.att-image img:hover {
	opacity: 0.9;
}


.att-file .att-link {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
	padding: var(--size-4-1) var(--size-4-2);
	background: var(--background-modifier-hover);
	border-radius: var(--radius-s);
	text-decoration: none;
	color: inherit;
	font-size: var(--font-ui-small);
}

.att-file .att-link:hover {
	background: var(--background-modifier-active);
}

/* --- Message Footer & Status --- */
.bubble-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--size-4-1);
	margin-top: var(--size-2-1);
}

.bubble-time {
	font-size: var(--font-ui-smaller);
	opacity: 0.65;
}

.bubble-edited {
	font-size: var(--font-ui-smaller);
	font-style: italic;
	opacity: 0.5;
}

.bubble-telegram-icon {
	display: flex;
	align-items: center;
	opacity: 0.65;
	color: var(--text-muted);
	transition: color var(--anim-fast) ease, opacity var(--anim-fast) ease;
}

a.bubble-telegram-icon {
	cursor: pointer;
}

a.bubble-telegram-icon:hover {
	color: var(--interactive-accent);
	opacity: 1;
}

.bubble-telegram-icon svg,
.bubble-telegram-icon i {
	width: var(--size-4-3);
	height: var(--size-4-3);
	stroke-width: 2px;
}

.bubble-status {
	display: flex;
	align-items: center;
	margin-left: var(--size-2-1);
	opacity: 0.6;
}

.chat-bubble-row.is-own .bubble-status {
	opacity: 0.8;
}

.chat-bubble-row.is-other .bubble-status {
	display: none;
}

.bubble-status .btn-icon {
	width: var(--size-4-3-5);
	height: var(--size-4-3-5);
	stroke-width: 2.5px;
}

/* --- Reactions block --- */
.bubble-reactions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-4-1);
	margin-top: var(--size-4-1);
	user-select: none;
	transition: all var(--anim-fast) cubic-bezier(0.4, 0, 0.2, 1);
}

.reaction-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--size-2-1);
	background: var(--background-modifier-hover);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	padding: var(--size-2-1) var(--size-4-2);
	font-size: var(--font-ui-small);
	cursor: pointer;
	transition:
		background-color var(--anim-fast) ease,
		border-color var(--anim-fast) ease,
		color var(--anim-fast) ease,
		transform var(--anim-fast) cubic-bezier(0.4, 0, 0.2, 1),
		opacity var(--anim-fast) ease;
}

.reaction-badge:hover {
	background-color: color-mix(in srgb, var(--interactive-accent), transparent 85%);
	border-color: color-mix(in srgb, var(--interactive-accent), transparent 60%);
}

.reaction-badge.has-my-like:hover {
	background-color: color-mix(in srgb, var(--interactive-accent), transparent 70%);
}

.reaction-badge:active {
	opacity: 0.7;
}

.reaction-badge.has-my-like {
	background-color: color-mix(in srgb, var(--interactive-accent), transparent 85%);
	border-color: color-mix(in srgb, var(--interactive-accent), transparent 40%);
	color: var(--interactive-accent);
}

.reaction-badge [data-lucide],
.reaction-badge img {
	width: var(--font-ui-medium) !important;
	/* Safe important: перебивает глобальные размеры [data-lucide] */
	height: var(--font-ui-medium) !important;
	/* Safe important: перебивает глобальные размеры [data-lucide] */
	display: block;
}

.reaction-count {
	font-weight: var(--font-weight-normal);
	font-size: var(--font-ui-smaller);
	margin-top: 1px;
}



/* --- Avatar & Author Color Palette --- */
.avatar-color-1 {
	background: var(--color-identity-1);
}

.avatar-color-2 {
	background: var(--color-identity-2);
}

.avatar-color-3 {
	background: var(--color-identity-3);
}

.avatar-color-4 {
	background: var(--color-identity-4);
}

.avatar-color-5 {
	background: var(--color-identity-5);
}

.avatar-color-6 {
	background: var(--color-identity-6);
}

.author-color-1 {
	color: var(--color-identity-1);
}

.author-color-2 {
	color: var(--color-identity-2);
}

.author-color-3 {
	color: var(--color-identity-3);
}

.author-color-4 {
	color: var(--color-identity-4);
}

.author-color-5 {
	color: var(--color-identity-5);
}

.author-color-6 {
	color: var(--color-identity-6);
}

/* --- Chat Input Area (Toolbar + Bar) --- */
.main-content-area .chat-input-area {
	position: sticky;
	bottom: 0;
	background-color: var(--chat-input-bg);
	margin: 0;
	padding: var(--chat-input-padding-y) var(--chat-input-padding-x) calc(env(safe-area-inset-bottom, 0px) + var(--chat-input-padding-y)) var(--chat-input-padding-x);
	border-top: var(--divider-width) solid var(--divider-color);
	display: flex;
	flex-direction: column;
	z-index: 1000;
}

@media (max-width: 73.142rem) {
	.main-content-area .chat-input-area {
		/* Переход в поток Flexbox: убираем fixed */
		position: relative;
		bottom: auto;
		left: auto;
		right: auto;
		margin: 0;
		padding: var(--chat-input-padding-y) var(--size-4-3) calc(env(safe-area-inset-bottom, 0px) + var(--chat-input-padding-y)) var(--size-4-3);
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
		z-index: 1000;
	}
}

.formatting-toolbar {
	margin-top: 1rem;
	margin-bottom: 0px;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.formatting-toolbar .toolbar-btn {
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-s);
	transition: all var(--anim-fast);
}

.formatting-toolbar .toolbar-btn:hover {
	background: var(--background-modifier-hover);
	color: var(--text-normal);
}

.formatting-toolbar .toolbar-btn.active {
	background: var(--background-modifier-active);
	color: var(--interactive-accent);
}

.formatting-toolbar .toolbar-btn .btn-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* --- Folder Management Form --- */
.folder-form-card {
	max-width: 28.571rem;
	/* 400px */
	margin: var(--size-4-8) auto;
	padding: var(--size-4-5);
	background: var(--background-secondary);
	border-radius: var(--radius-m);
	border: var(--divider-width) solid var(--divider-color);
	box-shadow: var(--shadow-m);
}

.folder-form-header {
	margin-top: 0;
	margin-bottom: var(--size-4-5);
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
	color: var(--text-normal);
}

.folder-form-body {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-4);
}

.folder-form-icons-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--size-4-1);
}

.file-counter {
	font-size: var(--font-ui-smaller);
	color: var(--interactive-accent);
	font-weight: var(--font-weight-bold);
	background: var(--background-secondary);
	padding: var(--size-2-1) var(--size-4-2);
	border-radius: var(--radius-m);
}

/* Мессенджер использует базовую раскладку .input-action-bar */
.chat-input-bar {
	flex-shrink: 0;
}

.chat-input-bar textarea {
	border-color: var(--divider-color);
	border-radius: var(--bubble-radius);
	background: var(--background-secondary);
}

/* --- Chat List (Sidebar Panel) --- */
.chat-list-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#chat-list,
#chat-list-container-desktop,
#chat-list-container-mobile {
	flex: 1;
	overflow-y: auto;
}

.chat-list-item {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
	padding: var(--size-4-2) var(--size-4-3);
	cursor: pointer;
	border-bottom: var(--divider-width) solid var(--divider-color);
	transition: background var(--anim-fast);
}

.chat-list-item:hover {
	background: var(--background-modifier-hover);
}

.chat-list-item:hover .chat-list-name {
	color: var(--interactive-accent);
}

.chat-list-item.active {
	background: var(--background-modifier-active);
}

.chat-list-avatar {
	width: var(--size-4-9);
	height: var(--size-4-9);
	border-radius: var(--avatar-user-radius);
	font-size: var(--font-ui-large);
}

.chat-header-avatar.is-group,
.chat-list-avatar.is-group {
	border-radius: var(--avatar-group-radius);
}

.chat-list-body {
	flex: 1;
	min-width: 0;
}

.chat-list-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--size-4-1);
}

.chat-list-name {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-ui-medium);
	color: var(--text-normal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-list-time {
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	flex-shrink: 0;
}

.chat-list-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--size-4-1);
	margin-top: var(--size-2-1);
}

.chat-list-preview {
	font-size: var(--font-ui-small);
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.chat-list-author {
	color: var(--interactive-accent);
	font-weight: var(--font-weight-medium);
	margin-right: var(--size-4-1);
}

.chat-item-pin-icon.btn-icon {
	width: var(--icon-s);
	height: var(--icon-s);
	opacity: 0.5;
	transform: rotate(45deg);
}

:root .hidden-input {
	display: none;
}

.chat-list-unread,
.chat-list-mention-badge {
	min-width: var(--size-4-4);
	height: var(--size-4-4);
	border-radius: var(--radius-pill);
	font-size: var(--font-ui-smaller);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 var(--size-2-1);
}

.chat-list-unread {
	background: var(--background-secondary-alt);
	color: var(--text-normal);
	font-weight: var(--font-weight-medium);
}

.chat-list-mention-badge {
	background: transparent;
	color: var(--text-muted);
	font-weight: var(--font-weight-bold);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: 4px;
	opacity: 0.6;
}

.chat-list-title-row {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
	min-width: 0;
}

.chat-item-folder-trigger {
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: var(--size-2-1);
	border-radius: var(--radius-s);
	transition: all var(--anim-fast);
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.chat-list-item:hover .chat-item-folder-trigger {
	opacity: 1;
}

.chat-item-folder-trigger:hover {
	background: var(--background-modifier-hover);
	color: var(--interactive-accent);
}

.chat-item-folder-trigger .btn-icon {
	width: var(--size-4-3-5);
	height: var(--size-4-3-5);
}

/* --- Animations & Loaders --- */
@keyframes bubbleIn {
	from {
		opacity: 0;
		transform: translateY(var(--bubble-offset));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Анимация летучего (исчезающего) сообщения (Stage 1) */
@keyframes bubbleOut {
	0% {
		opacity: 1;
		transform: scale(1) translateY(0);
		max-height: 500px;
		margin-bottom: var(--size-4-1);
	}

	40% {
		opacity: 0;
		transform: scale(0.96) translateY(calc(-1 * var(--size-4-1)));
	}

	100% {
		opacity: 0;
		max-height: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
		transform: scale(0.9) translateY(calc(-1 * var(--size-4-2)));
	}
}

:root .chat-bubble-row.is-exiting {
	animation: bubbleOut 0.25s ease-in forwards;
	pointer-events: none;
	overflow: hidden;
}

.htmx-indicator {
	display: none;
	opacity: 0;
	transition: opacity var(--anim-fast) ease-in;
}

.htmx-request.htmx-indicator,
.chat-view .htmx-request .htmx-indicator {
	display: flex;
	opacity: 1;
}

.messenger-loader {
	position: absolute;
	top: var(--size-4-16);
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--z-header);
	background: var(--background-secondary-alt);
	backdrop-filter: blur(var(--bubble-blur));
	-webkit-backdrop-filter: blur(var(--bubble-blur));
	color: var(--interactive-accent);
	padding: var(--size-4-2) var(--size-4-4);
	border-radius: var(--radius-pill);
	border: var(--divider-width) solid var(--interactive-accent);
	box-shadow: var(--shadow-s);
	font-size: var(--font-ui-small);
	font-weight: var(--font-weight-semibold);
	pointer-events: none;
	animation: loaderPulse 2s infinite ease-in-out;
}

@keyframes loaderPulse {
	0% {
		opacity: 0.8;
		transform: translateX(-50%) scale(1);
	}

	50% {
		opacity: 1;
		transform: translateX(-50%) scale(1.02);
	}

	100% {
		opacity: 0.8;
		transform: translateX(-50%) scale(1);
	}
}

.loader-content {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
}

/* --- Pagination (Load More) --- */
#load-more-area {
	width: 100%;
}

.btn-load-more {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: var(--size-2-1) var(--size-4-3);
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition: all var(--anim-fast);
}

.btn-load-more:hover {
	background: var(--background-modifier-hover);
}

.btn-load-more:active {
	transform: scale(0.98);
}

/* --- Reaction Picker (Unified with Context Menu) --- */
.ui-context-menu.is-reaction-grid {
	padding: var(--size-4-1) var(--size-4-2);
	min-width: auto;
	width: 12rem;
}

.ui-context-menu.is-reaction-grid .picker-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--size-4-2);
	padding: 2px;
}

.ui-context-menu.is-reaction-grid .picker-item {
	width: var(--size-4-6) !important;
	/* Safe important: необходим для перебивания размеров кнопок реакций */
	height: var(--size-4-6) !important;
	/* Safe important: необходим для перебивания размеров кнопок реакций */
	border-radius: var(--radius-m);
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background var(--anim-fast);
	color: var(--text-normal);
}

.ui-context-menu.is-reaction-grid .picker-item:hover {
	background: var(--background-modifier-hover);
}

.ui-context-menu.is-reaction-grid .picker-item [data-lucide],
.ui-context-menu.is-reaction-grid .picker-item img {
	width: var(--size-4-4) !important;
	/* Safe important: перебивает глобальные размеры [data-lucide] */
	height: var(--size-4-4) !important;
	/* Safe important: перебивает глобальные размеры [data-lucide] */
	display: block;
}

/* --- Reply Preview Panel --- */
.reply-preview-panel {
	display: flex;
	align-items: center;
	background: var(--background-secondary);
	border-left: 3px solid var(--interactive-accent);
	padding: var(--size-4-2) var(--size-4-4);
	margin-bottom: var(--size-4-2);
	border-radius: var(--radius-s);
	gap: var(--size-4-3);
}

.reply-preview-content {
	flex: 1;
	min-width: 0;
}

.reply-preview-author {
	font-weight: var(--font-weight-bold);
	font-size: var(--font-ui-small);
	color: var(--interactive-accent);
	margin-bottom: 2px;
}

.reply-preview-text {
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.reply-preview-closebtn {
	width: var(--size-4-6);
	height: var(--size-4-6);
	min-width: var(--size-4-6);
	min-height: var(--size-4-6);
	border-top: none;
	/* Переопределение глобального border-top от button */
	border-radius: 50%;
	padding: 0;
	flex-shrink: 0;
	align-self: flex-start;
	/* Прижимаем крестик к верхнему краю */
}

.reply-preview-closebtn .btn-icon {
	width: var(--icon-s);
	height: var(--icon-s);
	min-width: var(--icon-s);
	min-height: var(--icon-s);
	display: block;
}

/* --- Upload Status Panel --- */
.upload-status-panel {
	display: flex;
	align-items: center;
	background: var(--background-secondary);
	border: 1px solid var(--divider-color);
	border-left: 3px solid var(--interactive-accent);
	padding: var(--size-4-2) var(--size-4-3);
	margin-bottom: var(--size-4-2);
	border-radius: var(--radius-m);
	gap: var(--size-4-2);
	transition: opacity var(--anim-fast) ease;
}

.upload-status-content {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
	flex: 1;
	min-width: 0;
	color: var(--text-normal);
	font-size: var(--font-ui-small);
}

.upload-status-content .btn-icon {
	width: var(--icon-s);
	height: var(--icon-s);
	color: var(--interactive-accent);
	flex-shrink: 0;
}

.upload-status-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-muted);
}

.upload-status-closebtn {
	width: var(--size-4-6);
	height: var(--size-4-6);
	min-width: var(--size-4-6);
	min-height: var(--size-4-6);
	border-top: none;
	border-radius: 50%;
	padding: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--anim-fast) ease, background var(--anim-fast) ease;
}

.upload-status-closebtn:hover {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.upload-status-closebtn .btn-icon {
	width: var(--icon-s);
	height: var(--icon-s);
	min-width: var(--icon-s);
	min-height: var(--icon-s);
	display: block;
}

.upload-status-panel .animate-spin,
.toolbar-btn .animate-spin {
	animation: upload-spin 1s linear infinite;
}

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

/* --- Кнопка скролла вниз --- */
.messenger-scroll-down-btn {
	position: absolute;
	right: 1.5rem;
	bottom: 7.5rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--background-secondary);
	border: 1px solid var(--divider-color);
	color: var(--text-normal);
	box-shadow: var(--shadow-m);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1001;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity var(--anim-fast) ease, transform var(--anim-fast) ease, background var(--anim-fast) ease;
}

.messenger-mention-btn {
	bottom: 10.5rem;
}

@media (max-width: 73.142rem) {
	.messenger-mention-btn {
		position: fixed;
		right: 1.5rem;
		bottom: 10.5rem;
	}
}

.messenger-mention-btn .mention-badge-symbol {
	font-weight: var(--font-weight-bold);
	font-size: 1.1rem;
	color: var(--interactive-accent);
	line-height: 1;
}

@keyframes highlightMentionPulse {
	0% {
		background-color: var(--background-modifier-hover);
		box-shadow: 0 0 0 2px var(--interactive-accent);
	}
	100% {
		background-color: transparent;
		box-shadow: none;
	}
}

.highlight-mention {
	animation: highlightMentionPulse 2s ease-out;
}

.messenger-scroll-down-btn:hover {
	background: var(--background-modifier-hover);
}

.messenger-scroll-down-btn.visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.messenger-scroll-down-btn [data-lucide] {
	width: 1.25rem !important;
	height: 1.25rem !important;
	display: block;
}

/* Анимация подсветки целевого сообщения при глубоком переходе */
@keyframes bubbleHighlight {
	0% {
		box-shadow: 0 0 0 2px var(--interactive-accent), 0 1px 2px var(--shadow-color-soft);
	}

	50% {
		box-shadow: 0 0 0 2px var(--interactive-accent-soft), 0 1px 2px var(--shadow-color-soft);
	}

	100% {
		box-shadow: 0 1px 2px var(--shadow-color-soft);
	}
}

.chat-bubble-row.highlight-target .chat-bubble {
	animation: bubbleHighlight 2s ease-in-out;
}


/* --- Messenger Send Button (Dedicated CSS Copy of Circle Button) --- */
.chat-send-btn {
	width: 2.571rem;
	height: 2.571rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
	border: none;
	cursor: pointer;
	transition: background var(--anim-fast), transform var(--anim-fast);
	box-shadow: var(--shadow-s);
}

.chat-send-btn:hover {
	background-color: var(--interactive-accent-hover, var(--interactive-accent));
	filter: brightness(1.05);
	box-shadow: var(--shadow-m);
}

.chat-send-btn:active {
	transform: scale(0.96);
}

.chat-send-btn .btn-icon {
	width: var(--icon-m);
	height: var(--icon-m);
}

/* === [css/workbook.css] === */
/* === workbook.css ===
   Card base logic and specific identity modifiers (Workbook, Knowledge Base).
   Спроектировано в соответствии с CSS Architecture и Layout Principles.
*/

/* --- [BASE] Global Content Card Utility --- */
.u-content-card {
	display: flex;
	align-items: flex-start;
	padding: var(--button-padding-y) var(--button-padding-x);
	gap: var(--size-4-3);
	min-height: var(--size-4-10);
	background: transparent;
	border-radius: 0;
	cursor: pointer;
	font-size: var(--font-ui-medium);
	transition: opacity var(--anim-fast) ease, background-color var(--anim-fast) ease;
	border-bottom: var(--divider-width) solid var(--divider-color);
}

.u-content-card:hover {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
	opacity: 1;
}

/* Hover effects for children (titles and icons) */
.u-content-card:hover .workbook-title,
.u-content-card:hover .workbook-done-btn .btn-icon,
.u-content-card:hover .workbook-icon {
	color: var(--text-on-accent);
}

/* --- [MODIFIER] Workbook Identity --- */
.u-content-card.is-workbook {
	color: var(--text-color);
	border-left: var(--size-4-1);
	/* Spacing Sync: Сдвигаем padding-left на толщину border-left */
	padding-left: calc(var(--button-padding-x) - var(--size-4-1));
	transition: border-color var(--anim-fast) ease, background-color var(--anim-fast) ease, opacity var(--anim-fast) ease;
}

.u-content-card.is-workbook:hover {
	border-left-color: var(--text-on-accent);
}

.u-content-card.is-workbook.is-done {
	opacity: 0.5;
}

.u-content-card.is-workbook.is-done .workbook-title {
	color: var(--text-muted);
}

/* --- [MODIFIER] Knowledge Base Identity --- */
.u-content-card.is-kb {
	color: var(--text-color);
}

/* --- Workbook Done Button (Status Toggle) --- */
.workbook-done-btn {
	width: auto;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	flex-shrink: 0;
	cursor: pointer;
	/* Обратная связь при сетевом запросе: быстрый переход для индикации загрузки.
	   Используется переход var(--anim-fast) для мгновенной обратной связи без декоративных анимаций. */
	transition: opacity var(--anim-fast) ease;
}

.workbook-done-btn.htmx-request {
	opacity: 0.4;
}

.workbook-done-btn .btn-icon {
	width: var(--icon-l);
	height: var(--icon-l);
	color: var(--checkbox-border-color);
	transition: color var(--anim-fast) ease;
}

/* Specific status for Done Button */
.u-content-card.is-workbook.is-done .workbook-done-btn .btn-icon,
.workbook-done-btn.is-done .btn-icon {
	color: var(--checkbox-color);
}

.workbook-done-btn:hover .btn-icon {
	color: var(--checkbox-color-hover);
}

/* --- Workbook Specific Icons --- */
.workbook-icon {
	color: var(--interactive-accent);
	transition: color var(--anim-fast) ease;
}

/* --- Workbook Card Content Container --- */
.workbook-card-content {
	align-self: center;
}

/* --- Workbook Content Header (Detail View) --- */
.workbook-content-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: var(--size-4-6);
	gap: var(--size-4-6);
}

.workbook-header-info {
	flex: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--size-4-3);
}

.workbook-header-title-container {
	display: flex;
	align-items: flex-start;
	gap: var(--size-4-3);
	flex: 1;
}

.workbook-header-info h1 {
	margin: 0;
	padding: 0;
	font-size: var(--h1-size);
	line-height: var(--line-height-tight);
}

.category-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--text-muted);
	margin-top: 0.15rem;
	/* Небольшое выравнивание иконки с первой строкой заголовка */
}

/* --- Headers & Accordions (Weeks) --- */
.workbook-week-accordion {
	margin-top: var(--size-4-4);
	margin-bottom: var(--size-4-2);
}

.workbook-week-accordion:first-of-type {
	margin-top: var(--size-4-2);
}

.workbook-week-header {
	padding: var(--size-4-2) var(--button-padding-x);
	color: var(--text-muted);
	font-size: var(--font-ui-medium);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.036rem;
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--size-4-2);
	width: 100%;
	box-sizing: border-box;
	list-style: none;
	border-radius: var(--radius-s);
	transition: background-color var(--anim-fast, 0.15s ease), color var(--anim-fast, 0.15s ease);
}

.workbook-week-header:hover {
	background-color: var(--background-modifier-hover, rgba(255, 255, 255, 0.04));
	color: var(--text-normal);
}

.workbook-week-header::-webkit-details-marker {
	display: none;
}

.workbook-week-header::before {
	content: '▼';
	font-size: var(--font-content-smaller, 0.75rem);
	display: inline-block;
	transition: transform var(--anim-fast, 0.15s ease);
	margin-right: var(--size-4-2);
	opacity: 0.6;
}

.workbook-week-accordion[open] > .workbook-week-header::before {
	transform: rotate(0);
}

.workbook-week-accordion:not([open]) > .workbook-week-header::before {
	transform: rotate(-90deg);
}

.workbook-week-title {
	flex: 1 1 auto;
	min-width: 0;
}

.workbook-week-badge {
	font-size: var(--font-ui-smaller, 0.75rem);
	color: var(--text-muted);
	background: transparent;
	padding: 0;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	flex-shrink: 0;
	margin-left: auto;
	white-space: nowrap;
}



.workbook-week-content {
	padding-top: var(--size-4-1);
}

/* --- [UTILITY] Responsive Video Embeds (YouTube, RuTube, VK Video) --- */
.u-video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	/* Соотношение 16:9 */
	height: 0;
	overflow: hidden;
	border-radius: var(--radius-m);
	background: #000;
	margin: var(--size-4-4) 0;
}

.u-video-container iframe,
.u-video-container video,
.u-video-iframe,
.u-video-player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.u-video-title {
	font-size: var(--font-content-medium);
	color: var(--text-muted);
	margin-bottom: var(--size-4-2);
	font-weight: var(--font-weight-medium);
}




/* === [css/gaming.css] === */
/* app/frontend/css/gaming.css */

.gaming-belts-container {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-4);
	padding: var(--size-4-4);
	background: var(--background-secondary);
	border-radius: var(--radius-l);
	margin: var(--size-4-4) 0;
	border: var(--divider-width) solid var(--divider-color);
	box-shadow: var(--shadow-s);
}

.belt-row {
	display: flex;
	align-items: center;
	gap: var(--size-4-3);
}

.belt-label {
	min-width: var(--size-4-23);
	font-size: var(--font-ui-medium);
	font-weight: var(--font-weight-semibold);
	color: var(--text-normal);
}

.belt-progress-wrapper {
	flex: 1;
	height: var(--gaming-progress-height);
	background: var(--gaming-progress-bg);
	border-radius: var(--gaming-progress-radius);
	overflow: hidden;
	position: relative;
	border: var(--divider-width) solid var(--divider-color);
}

.belt-progress-bar {
	height: 100%;
	transition: width var(--anim-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: var(--size-4-2);
	min-width: var(--size-4-1);
}

.belt-percent {
	font-size: var(--font-ui-smaller);
	font-weight: var(--font-weight-bold);
	color: var(--always-white);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.belt-percent-outer {
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	min-width: var(--size-4-9);
}

/* Belt Colors (Linear Gradients) */
.bg-yellow {
	background: linear-gradient(90deg, #facc15, #f59e0b);
}

.bg-orange {
	background: linear-gradient(90deg, #fb923c, #f97316);
}

.bg-green {
	background: linear-gradient(90deg, #4ade80, #22c55e);
}

/* Dark Theme Adjustments are handled via tokens in themes.css */

/* app/frontend/css/gaming.css */

/* ... твои существующие стили ... */

.srs-progress-container {
	margin: var(--size-4-4) 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
}

.srs-progress-container .belt-row {
	align-items: center;
}

.srs-progress-text {
	font-size: var(--font-ui-smaller);
	font-weight: var(--font-weight-medium);
	color: var(--text-muted);
	text-align: center;
}

/* === [css/kb_editor.css] === */
/* === KB Content Editor Styles === */

.kb-editor-top-bar {
	display: flex;
	gap: var(--size-4-3);
	align-items: flex-end;
	margin-bottom: var(--size-4-4);
}

.kb-editor-top-bar .input-wrapper {
	flex: 1;
	margin: 0;
}

/* Навигация вкладок по принципу DRY наследует стили от глобального .l-tabs-nav в layout.css */

/* Специфические настройки панелей редактора БЗ.
   Панели наследуют структуру высот от базового класса .l-panel */
:root .kb-editor-panel {
	gap: var(--size-4-2);
}

/* Обнуление внешних отступов элементов внутри панелей для точного контроля зазоров через gap */
:root .kb-editor-panel .input-wrapper {
	margin: 0;
}

:root .kb-editor-panel .formatting-toolbar {
	margin: 0;
}

:root .kb-editor-panel .button-grid {
	margin: 0;
}

/* Растягивание поля ввода textarea во всю высоту панели */
:root .kb-editor-panel .input-wrapper:not(.field-row):not(.is-readonly) {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

:root .kb-editor-panel textarea {
	flex: 1;
	font-family: 'Play', 'Courier New', Courier, monospace;
	font-size: var(--font-size-paragraph);
	line-height: var(--line-height-normal);
	padding: var(--size-4-4);
	resize: none;
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	background-color: var(--background-primary);
	color: var(--text-normal);
	min-height: 0;
	height: 100%;
}

/* Превью */
:root .kb-editor-panel .kb-editor-right-preview {
	flex: 1;
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	background-color: var(--background-primary);
	padding: var(--size-4-5);
	overflow-y: auto;
	min-height: 0;
}

/* Однострочная flex-раскладка для readonly-полей в панелях редактора БЗ */
:root .kb-editor-panel .input-wrapper.is-readonly,
:root #kb_editor_panel_meta .input-wrapper.is-readonly {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: var(--size-4-2);
	flex: none;
}

:root .kb-editor-panel .input-wrapper.is-readonly label,
:root #kb_editor_panel_meta .input-wrapper.is-readonly label {
	margin-bottom: 0;
	flex-shrink: 0;
}

:root .kb-editor-panel .input-wrapper.is-readonly .readonly-value,
:root #kb_editor_panel_meta .input-wrapper.is-readonly .readonly-value {
	flex: 1;
	min-width: 0;
	padding: 0;
}

/* Предотвращение сжатия спойлера flex-контейнером */
:root .kb-editor-panel .ui-spoiler {
	flex: none;
}

/* Двухколоночный макет для вкладки редактирования (повышенная специфичность) */
:root .kb-editor-panel.kb-editor-edit-layout {
	display: flex;
	flex-direction: row;
	gap: var(--size-4-4);
	flex: 1;
	min-height: 15rem;
}

:root .kb-editor-panel.kb-editor-edit-layout .kb-editor-edit-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
	min-width: 0;
	height: 100%;
}

:root .kb-editor-panel.kb-editor-edit-layout .kb-editor-edit-main .input-wrapper:not(.field-row):not(.is-readonly) {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

:root .kb-editor-panel.kb-editor-edit-layout .kb-editor-edit-main textarea {
	flex: 1;
	min-height: 0;
	height: 100%;
}

:root .kb-editor-linter-sidebar {
	width: 320px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
}

:root .kb-editor-linter-sidebar.hidden {
	display: none;
}

/* Стилизация результатов проверки с использованием системных токенов */
.kb-editor-linter-results {
	flex: 1;
	padding: var(--size-4-3);
	background-color: var(--background);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	overflow-y: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
}

.linter-heading {
	margin-top: 0;
}

.linter-item {
	padding: var(--size-4-2) var(--size-4-3);
	border-radius: var(--radius-s);
	border-left: 4px solid transparent;
	background-color: var(--background-secondary);
	transition: background-color 0.15s, border-color 0.15s;
}

.linter-item.warning {
	border-left-color: var(--status-warning);
}

.linter-item.error {
	border-left-color: var(--status-error);
}

.linter-item[data-line] {
	cursor: pointer;
}

.linter-item[data-line]:hover {
	background-color: var(--background-modifier-hover);
}

.linter-item-msg {
	/* Наследует обычный вес шрифта (400) от body */
	font-size: var(--font-size-paragraph);
}

.linter-item-tip {
	margin-top: var(--size-4-1);
	margin-bottom: 0;
}

/* Гарантированное скрытие неактивных панелей (повышенная специфичность + приоритет расположения) */
:root .l-panel.hidden,
:root .l-panel-scrollable.hidden,
:root #kb_editor_panel_meta.hidden {
	display: none;
}

/* Стилизация редактируемых параметров в таблицах свойств */
.db-properties-table td {
	vertical-align: middle;
}

.db-properties-table .checkbox-row {
	padding: 0;
	margin: 0;
	display: inline-flex;
}

.db-properties-table .input-compact {
	max-width: 120px;
}

.db-properties-actions {
	display: flex;
	gap: var(--size-4-1);
	margin-top: var(--size-4-2);
}

/* Telegram-превью */
.tg-preview-photo {
	margin-bottom: var(--size-4-3);
	text-align: center;
}

.tg-preview-photo img {
	max-width: 100%;
	max-height: 400px;
	border-radius: var(--radius-m);
	object-fit: contain;
}

.tg-preview-content {
	white-space: pre-wrap;
	word-break: break-word;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
}

.tg-preview-content b, 
.tg-preview-content strong {
	font-weight: 700;
}

.tg-preview-content i, 
.tg-preview-content em {
	font-style: italic;
}

.tg-preview-content u {
	text-decoration: underline;
}

.tg-preview-content s, 
.tg-preview-content del {
	text-decoration: line-through;
}

.tg-preview-content code {
	font-family: var(--font-mono);
	background-color: var(--background-secondary);
	color: var(--text-warning);
	padding: 2px 6px;
	border-radius: var(--radius-s);
	font-size: 13px;
}

.tg-preview-content pre {
	font-family: var(--font-mono);
	background-color: var(--background-secondary);
	padding: var(--size-4-2) var(--size-4-3);
	border-radius: var(--radius-m);
	overflow-x: auto;
	font-size: 13px;
	margin: var(--size-4-2) 0;
}

.tg-preview-content pre code {
	background-color: transparent;
	color: inherit;
	padding: 0;
	border-radius: 0;
}

.tg-preview-content a {
	color: var(--interactive-accent);
	text-decoration: underline;
}

.tg-preview-content blockquote {
	border-left: 3px solid var(--interactive-accent);
	background-color: var(--interactive-accent-soft);
	margin: var(--size-4-2) 0;
	padding: var(--size-4-2) var(--size-4-3);
	border-radius: 0 var(--radius-s) var(--radius-s) 0;
}


/* === [css/activity_log.css] === */
/* app/frontend/css/activity_log.css */
/* Стили для оформления таймлайна логов активности */

.timeline-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 4px;
}

.timeline-card {
	display: flex;
	gap: 16px;
	background: var(--background-primary);
	border: var(--divider-width) solid var(--divider-color);
	border-radius: var(--radius-l);
	padding: 16px;
	align-items: flex-start;
	box-shadow: var(--shadow-s);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.timeline-card:hover {
	box-shadow: var(--shadow-m);
	border-color: var(--interactive-accent-soft);
}

.timeline-badge {
	font-size: var(--font-content-xlarge);
	min-width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--background-secondary);
	border-radius: var(--radius-m);
	box-shadow: inset 0 0 4px var(--divider-color);
}

.timeline-body {
	flex: 1;
	min-width: 0;
}

.timeline-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.timeline-title {
	color: var(--text-normal);
	font-weight: 600;
	font-size: var(--font-content-normal);
}

.timeline-time {
	font-size: var(--font-content-small);
	color: var(--text-muted);
}

.timeline-user-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-content-small);
	;
	font-weight: 500;
	color: var(--interactive-accent);
	background: var(--background-secondary);
	border: var(--divider-width) solid var(--divider-color);
	padding: 2px 8px;
	border-radius: var(--radius-s);
	margin-bottom: 8px;
	text-decoration: none;
	transition: background var(--transition-base);
}

.timeline-user-badge:hover {
	background: var(--background-modifier-hover);
}

.timeline-desc {
	font-size: var(--font-content-medium);
	color: var(--text-muted);
	line-height: var(--line-height-normal);
}

.timeline-details {
	font-family: var(--font-monospace, monospace);
	font-size: var(--font-content-small);
	margin-top: 8px;
	background: var(--background-secondary);
	padding: 8px 12px;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	white-space: pre-wrap;
	word-break: break-all;
	border: var(--divider-width) solid var(--divider-color);
}

.timeline-tech-tag {
	font-family: var(--font-monospace, monospace);
	font-size: var(--font-content-smaller);
	color: var(--text-muted);
	background: var(--background-secondary);
	padding: 2px 6px;
	border-radius: var(--radius-s);
	border: var(--divider-width) solid var(--divider-color);
	margin-left: 8px;
	display: inline-block;
	vertical-align: middle;
}

/* === Стили для панели технических логов (Админ-консоли логов) === */
.log-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: var(--font-content-medium);
	margin-top: 10px;
}

.log-table th,
.log-table td {
	padding: 8px 12px;
	text-align: left;
	border-bottom: var(--divider-width) solid var(--divider-color);
	vertical-align: top;
	word-break: break-word;
}

.log-table th {
	background-color: var(--background-secondary);
	font-weight: 600;
	color: var(--text-muted);
	position: sticky;
	top: 0;
	z-index: 10;
}

.log-row {
	transition: background-color var(--transition-base);
}

.log-row:hover {
	background-color: var(--background-modifier-hover);
}

/* Цветовая кодировка строк по уровням (нежные пастельные тона) */
.log-row-debug {
	color: var(--text-muted);
}

.log-row-warning {
	background-color: var(--background-warning);
	/* color: var(--text-warning); */
}

.log-row-critical,
.log-row-error {
	background-color: var(--background-error);
	/* color: var(--text-error); */
}

.log-row-success {
	background-color: var(--background-success);
	/* color: var(--text-success); */
}

/* Оформление значков уровней логов (badges) */
.log-badge {
	display: inline-block;
	padding: 2px 6px;
	border-radius: var(--radius-s);
	font-size: var(--font-content-smaller);
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
}

.log-badge-debug {
	background: var(--background-secondary);
	color: var(--text-muted);
}

.log-badge-info {
	background: rgba(3, 102, 214, 0.1);
	color: #0366d6;
}

.log-badge-warning {
	background: rgba(217, 119, 6, 0.15);
	color: #d97706;
}

.log-badge-critical,
.log-badge-error {
	background: rgba(220, 38, 38, 0.15);
	color: #dc2626;
}

.log-badge-success {
	background: rgba(46, 160, 67, 0.15);
	color: #2ea043;
}

.log-badge-muted {
	background: rgba(156, 163, 175, 0.15);
	color: #9ca3af;
}

/* Дополнительные стили элементов интерфейса логов */
.log-filter-form {
	background: var(--background-secondary);
	border: var(--divider-width) solid var(--divider-color);
	border-radius: var(--radius-l);
	padding: 16px;
	margin-bottom: 16px;
}

.log-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	align-items: flex-end;
}

.log-form-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	justify-content: flex-end;
}

.log-code-btn {
	background: var(--background-secondary);
	border: var(--divider-width) solid var(--divider-color);
	color: var(--text-normal);
	padding: 2px 8px;
	border-radius: var(--radius-s);
	font-size: var(--font-content-small);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--transition-base);
}

.log-code-btn:hover {
	background: var(--background-modifier-hover);
}

/* Гарантированное скрытие неактивных панелей в App Mode для лог-консоли */
:root .admin-log-panel.hidden {
	display: none;
}

/* Контейнер для горизонтального скроллинга таблиц */
.log-table-container {
	overflow-x: auto;
	width: 100%;
}

/* Пустое состояние логов и инцидентов */
.log-empty-state {
	text-align: center;
	color: var(--text-muted);
	padding: 40px 0;
	font-style: italic;
}

/* Ширина колонок для таблицы логов (3 колонки) */

/* Уровень | Время */
.log-table-logs th:nth-child(1),
.log-table-logs td:nth-child(1) {
	width: 20%;
}

/* Модуль | Функция */
.log-table-logs th:nth-child(2),
.log-table-logs td:nth-child(2) {
	width: 15%;
}

/* Сообщение | Стек */
.log-table-logs th:nth-child(3),
.log-table-logs td:nth-child(3) {
	width: 65%;
}

/* Ширина колонок для таблицы планировщика (4 колонки) */

/* ID */
.log-table-scheduler th:nth-child(1),
.log-table-scheduler td:nth-child(1) {
	width: 8%;
}

/* Команда | Описание */
.log-table-scheduler th:nth-child(2),
.log-table-scheduler td:nth-child(2) {
	width: 30%;
}

/* Время | Статус | Действие */
.log-table-scheduler th:nth-child(3),
.log-table-scheduler td:nth-child(3) {
	width: 32%;
}

/* Результат / Лог */
.log-table-scheduler th:nth-child(4),
.log-table-scheduler td:nth-child(4) {
	width: 30%;
}

/* Ширина колонок для таблицы инцидентов (3 колонки) */

/* Сервис | Уровень | Повторы | Последний сбой */
.log-table-incidents th:nth-child(1),
.log-table-incidents td:nth-child(1) {
	width: 20%;
}

/* Код ошибки | Сообщение */
.log-table-incidents th:nth-child(2),
.log-table-incidents td:nth-child(2) {
	width: 55%;
}

/* Действия */
.log-table-incidents th:nth-child(3),
.log-table-incidents td:nth-child(3) {
	width: 25%;
}

/* Действия */

/* Оформление преформатированного текста для стектрейса */
.log-stacktrace {
	margin: 0;
	font-family: var(--font-monospace, monospace);
	white-space: pre-wrap;
	font-size: var(--font-content-small);
	max-height: 80px;
	overflow: auto;
	background: var(--background-secondary);
	border: var(--divider-width) solid var(--divider-color);
	padding: 4px;
	border-radius: var(--radius-s);
	color: var(--text-normal);
}

.log-table-incidents .log-stacktrace {
	margin-top: 4px;
	max-height: 150px;
	padding: 6px;
}

/* Компактный спойлер стектрейса в инцидентах */
.log-details-spoiler {
	margin-top: 6px;
	font-size: var(--font-content-small);
}

.log-details-summary {
	color: var(--text-link);
	cursor: pointer;
	user-select: none;
}

/* Контейнер кнопок действий в инцидентах */
.log-actions-container {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* Поддержка интерактивности для кодов ошибок */
.timeline-tech-tag[onclick] {
	cursor: pointer;
	transition: background-color var(--transition-base), border-color var(--transition-base);
}

.timeline-tech-tag[onclick]:hover {
	background-color: var(--background-modifier-hover);
	border-color: var(--interactive-accent-soft);
}

.timeline-tech-tag[title] {
	cursor: help;
}

.log-table td .timeline-tech-tag,
.log-table td .tag,
.log-table td .mention {
	margin: 2px 4px 2px 0;
}

.log-table td hr {
	margin: 4px 0;
	border: none;
	border-top: var(--divider-width) solid var(--divider-color);
	height: 0;
}

/* ===== Подсветка JSON в окне стека ===== */
.json-container {
	background-color: var(--background-secondary) !important;
	border: var(--divider-width) solid var(--background-modifier-border) !important;
	border-radius: var(--radius-m);
	padding: var(--size-4-3);
	font-family: var(--font-mono) !important;
	font-size: var(--font-content-medium) !important;
	line-height: var(--line-height-relaxed);
	word-break: break-all;
	margin: var(--size-4-3) 0;
	white-space: pre-wrap;
	/* Сохраняем переносы строк \n */
}

/* Стилизация всех JSON-ключей */
.json-container .json-key {
	font-weight: var(--font-weight-medium);
}

/* Выделение важных ключей из списка HIGHLIGHT_JSON_KEYS */
.json-container .json-key-highlight {
	font-weight: var(--font-weight-bold);
	color: var(--text-bold);
}

/* Стилизация строковых значений (зеленый) */
.json-container .json-string {
	color: var(--color-json-string);
}

/* Стилизация чисел (оранжевый) */
.json-container .json-number {
	color: var(--color-json-number);
}

/* Стилизация булевых и null */
.json-container .json-val-true {
	color: var(--color-json-true);
}

.json-container .json-val-false {
	color: var(--color-json-false);
}

.json-container .json-val-null {
	color: var(--color-json-null);
	font-style: italic;
}

/* === [css/tables.css] === */
/* app/frontend/css/tables.css */
/* Таблицы свойств и ссылок общего назначения */

.utility-properties-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-ui-small);
}

.utility-properties-table th,
.utility-properties-table td {
	padding: var(--size-4-2) var(--size-4-3);
	text-align: left;
	vertical-align: top;
	border-bottom: var(--divider-width) solid var(--background-modifier-border);
}

.utility-properties-table th {
	font-weight: 600;
	color: var(--text-muted);
	border-bottom: 2px solid var(--background-modifier-border);
}

.utility-properties-table tr {
	transition: background-color var(--anim-fast);
}

.utility-properties-table tr:hover {
	background-color: var(--background-modifier-hover);
}

.utility-properties-table tr:last-child td {
	border-bottom: none;
}

/* Модификаторы для ячеек */
.utility-properties-table td.is-key {
	font-weight: 600;
}

.utility-properties-table td.is-mono-key {
	font-family: var(--font-mono);
	color: var(--text-muted);
}

.utility-properties-table td.is-val {
	word-break: break-all;
}


/* === [css/user_table.css] === */
/* app/frontend/css/user_table.css */

.user-table-container {
	overflow-x: auto;
	width: 100%;
	margin-top: 10px;
}

.user-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-content-medium);
}

.user-table th,
.user-table td {
	padding: 8px 12px;
	text-align: left;
	border-bottom: var(--divider-width) solid var(--divider-color);
	vertical-align: middle;
}

.user-table th {
	background-color: var(--background-secondary);
	font-weight: 600;
	color: var(--text-muted);
}

.user-row {
	transition: background-color var(--transition-base);
}

.user-row:hover {
	background-color: var(--background-modifier-hover);
}

/* Выделение строки текущего пользователя */
.user-row-current {
	background-color: var(--background-secondary);
	font-weight: bold;
}

/* Колонки таблиц лидеров */
.user-table .col-digit {
	width: 80px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 1.1em;
}

/* === [css/pdf_viewer.css] === */
/* PDF Preview iframe styling */
:root .pdf-preview-container {
	margin: var(--size-4-4) 0;
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--background-secondary);
	border: var(--divider-width) solid var(--background-modifier-border);
}

:root .review-pdf-frame {
	width: 100%;
	height: 600px;
	border: none;
	display: block;
	background-color: var(--background-primary);
}

/* PDF Preview sections (Expert Panel) */
.pdf-preview-section {
	margin-top: var(--size-4-2);
	margin-bottom: var(--size-4-2);
}

.pdf-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--size-4-1);
}

.pdf-preview-header .hint-text {
	margin-bottom: 0;
}

.pdf-preview-header .btn-subtle {
	text-decoration: none;
}

.pdf-preview-iframe {
	width: 100%;
	height: 400px;
	border: var(--divider-width) solid var(--divider-color);
	border-radius: var(--radius-m);
	background: var(--background-secondary);
}

@media (max-width: 768px) {
	.pdf-preview-iframe {
		display: none;
	}

	.pdf-preview-section {
		margin: var(--size-4-2) 0;
	}

	.pdf-preview-header {
		margin-bottom: 0;
		flex-wrap: wrap;
		gap: var(--size-4-2);
	}
}