/* === 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;
}

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

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

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

html {
	font-size: 14px;
	/* База Telegram для контента */
}

: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 img,
.content-img {
	border-radius: var(--radius-m);
	margin: var(--size-4-4) auto;
	display: block;
}

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: 1.3;
}

/* 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: 1.2;
}

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 {
	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);
}

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

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

.screen-content b {
	font-weight: 700;
}

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);
	transition: opacity var(--anim-fast);
}

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

/* Теги и Упоминания (Tags & Mentions) */
.tag,
.mention {
	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(--tag-size);
	font-weight: var(--tag-weight);
	text-decoration: none;
	line-height: normal;
	transition: background-color var(--anim-fast);
	white-space: nowrap;
}

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

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

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

.hint-text {
	color: var(--text-muted);
	font-size: var(--font-size-paragraph);
	line-height: 1.3;
	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: 600;
	display: flex;
	align-items: center;
	min-height: var(--nav-item-height);
	padding: 0 var(--size-4-5);
}

.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 */
}

:root .alert {
	padding: var(--alert-padding);
	border-radius: var(--alert-radius);
	margin: var(--alert-margin);
	border: var(--alert-border-width) solid transparent;
	font-size: var(--font-size-paragraph);
	line-height: 1.5;
	display: flex;
	align-items: center;
	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; /* Re-enable clicks for the alert itself */
}

:root .alert .btn-close {
	margin-left: auto;
	width: auto;
	border-top: none;
	padding: var(--size-4-1);
}

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

.alert-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 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);
	font-size: var(--font-ui-medium);
	line-height: 1.4;
}

.alert-description {
	opacity: 0.9;
	font-size: var(--font-ui-medium);
	line-height: 1.4;
}

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

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

.global-error {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-overlay);
	width: 100%;
	display: none; /* Переключается в flex через JS */
	justify-content: center;
	padding: 0;
	margin: 0;
	pointer-events: none;
}

/* На мобилках учитываем высоту хедера/табов */
@media (max-width: 768px) {
	.global-error {
		top: var(--top-tab-height, 3.214rem);
	}
}

.global-error .alert {
	pointer-events: all;
	margin: var(--size-4-4);
	box-shadow: var(--shadow-l);
	border-width: 1px;
	width: 100%;
	max-width: var(--container-max-width, 800px);
}

.global-error .btn-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--size-4-1);
	color: inherit;
	opacity: 0.6;
	transition: opacity var(--anim-fast);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

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

.global-error .btn-close:hover {
	opacity: 1;
}

.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;
	}
}

/* Статусы и оверлеи */
#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: 500;
	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-size-paragraph);
	border: var(--divider-width) solid var(--background-modifier-border);
}

/* Дебаг-секции */
#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: 1.4;
}

#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);
}

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

/* Оформление текста */
blockquote {
	border-left: 3px 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;
}

/* 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-ui-medium);
	color: var(--text-muted);
	border-top: var(--divider-width) solid var(--background-modifier-border);
	line-height: 1.4;
}

.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: 0.7em;
	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: 0.9em;
	border: 1px 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: 0.9em;
	line-height: 1.5;
	border: 1px solid var(--background-modifier-border);
}

.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);
}

/* Статический список */
.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-2-1) 0;
	margin-bottom: var(--size-4-1);
	border: none;
	font-size: var(--font-size-paragraph);
	color: var(--text-normal);
	line-height: 1.4;
}