/* АйЮрист симулятор — визуальный язык чата, без кабинета */

html, body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-ui);
    min-height: 100vh;
}

[x-cloak] { display: none !important; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

h1, h2, h3 { font-family: var(--font-ui); color: var(--text-primary); }
a { color: inherit; }

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
textarea,
select {
    font-family: var(--font-ui);
    accent-color: var(--color-accent);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-accent);
}

/* ---- Верхняя шапка как в чате ---- */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 8px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.app-topbar__brand {
    display: flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
}

.app-topbar__brand .app-logo {
    height: 22px;
    width: auto;
    display: block;
}

.app-topbar__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.app-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-8, 8px);
    background: none;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: var(--font-size-13);
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal);
}

.app-nav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.app-nav-link.is-active {
    background: var(--nav-active-bg);
    border-color: var(--nav-active-border);
    color: var(--nav-active-text);
}

.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.app-topbar__logout {
    margin: 0;
}

.header-icon-btn,
.theme-toggle-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-6, 6px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color var(--transition-normal, 0.2s ease);
}

.header-icon-btn:hover,
.theme-toggle-btn:hover {
    background: var(--bg-hover, #2E2D2D);
}

.header-icon-btn img,
.theme-toggle-btn img {
    width: 16px;
    height: 16px;
}

.theme-toggle-btn img[hidden] {
    display: none;
}

.app-main {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 32px 24px 48px;
}

.auth-theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 20;
}

/* ---- Ховеры карточек и кнопок ---- */
.bg-dark-700,
.bg-dark-800 {
    transition: border-color var(--transition-normal), background-color var(--transition-normal);
}

a.bg-dark-700:hover,
.hover\:border-accent\/40:hover {
    border-color: rgba(200, 104, 72, 0.45);
}

.bg-accent {
    background: var(--color-accent);
    color: var(--text-on-accent);
    transition: background-color var(--transition-normal);
}

.bg-accent:hover,
.hover\:bg-accent-light:hover {
    background: var(--color-accent-hover);
}

.bg-accent:active {
    background: var(--color-accent-active);
}

button:not(:disabled),
.header-icon-btn,
.app-nav-link {
    cursor: pointer;
}

/* Светлая тема: Tailwind-классы тёмной палитры */
[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .bg-dark-900 { background-color: var(--bg-primary) !important; }
[data-theme="light"] .bg-dark-800 { background-color: var(--bg-secondary) !important; }
[data-theme="light"] .bg-dark-700 { background-color: var(--bg-card) !important; }
[data-theme="light"] .bg-dark-600 { background-color: var(--bg-tertiary) !important; }
[data-theme="light"] .bg-dark-500 { background-color: var(--bg-hover) !important; }
[data-theme="light"] .border-gray-800,
[data-theme="light"] .border-gray-700 { border-color: var(--border) !important; }
[data-theme="light"] .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

.tab-active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    border: 1px solid var(--nav-active-border);
}

.doc-item:hover {
    border-color: rgba(200, 104, 72, 0.35);
}

.md-content h1 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 0.5rem; color: var(--text-primary); }
.md-content h2 { font-size: 1.125rem; font-weight: 700; margin: 1rem 0 0.5rem; color: var(--text-primary); }
.md-content h3 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.375rem; color: var(--text-secondary); }
.md-content h4 { font-size: 0.875rem; font-weight: 600; margin: 0.5rem 0 0.25rem; color: var(--text-secondary); }
.md-content p { margin: 0.375rem 0; line-height: 1.7; }
.md-content ul, .md-content ol { margin: 0.375rem 0; padding-left: 1.5rem; }
.md-content ul { list-style: disc; }
.md-content ol { list-style: decimal; }
.md-content li { margin: 0.2rem 0; line-height: 1.6; }
.md-content li > ul, .md-content li > ol { margin: 0.125rem 0; }
.md-content strong { color: var(--text-primary); font-weight: 600; }
.md-content em { color: var(--text-secondary); }
.md-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
    margin: 0.5rem 0;
    color: var(--text-hint);
}
.md-content code {
    background: var(--bg-primary);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: var(--color-accent-hover);
}
.md-content pre {
    background: var(--bg-primary);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0.5rem 0;
    overflow-x: auto;
}
.md-content pre code { background: none; padding: 0; color: var(--text-secondary); }
.md-content hr { border: none; border-top: 1px solid var(--border-subtle); margin: 0.75rem 0; }
.md-content table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.8125rem; }
.md-content th, .md-content td { border: 1px solid var(--border-subtle); padding: 0.375rem 0.625rem; text-align: left; }
.md-content th { background: var(--bg-secondary); font-weight: 600; color: var(--text-secondary); }
.md-content a { color: var(--color-accent); text-decoration: underline; }

[data-md]:not([data-md-rendered]) { visibility: hidden; }

.redact {
    background: var(--color-dark);
    color: var(--color-dark) !important;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px #000;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

@media (max-width: 640px) {
    .app-topbar {
        flex-wrap: wrap;
        padding: 8px 12px;
    }
    .app-topbar__nav {
        order: 3;
        width: 100%;
        padding-bottom: 4px;
    }
    .app-main { padding: 20px 16px 40px; }
}