/* Logicum visual system: calm surfaces, compact geometry, restrained motion. */
:root {
    --logicum-radius-xs: 8px;
    --logicum-radius-sm: 10px;
    --logicum-radius-md: 14px;
    --logicum-radius-lg: 18px;
    --logicum-motion-fast: 140ms;
    --logicum-motion-base: 180ms;
    --logicum-ease: cubic-bezier(0.2, 0.65, 0.25, 1);
    --logicum-surface: color-mix(in srgb, var(--bg-sidebar) 82%, transparent);
    --logicum-surface-soft: color-mix(in srgb, var(--input-bg) 72%, transparent);
    --logicum-border-soft: color-mix(in srgb, var(--border-color) 82%, transparent);
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--codex-font-sans, "Manrope", system-ui, sans-serif);
}

body::before {
    animation: logicumAmbient 28s ease-in-out infinite alternate !important;
    opacity: 0.62 !important;
}

@keyframes logicumAmbient {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.018) translate3d(0, -3px, 0); }
}

/* Shared geometry for the application's main surfaces. */
.sidebar,
.helper-sidebar,
.chat-header,
.library-header,
.input-container,
.chat-input-area,
.document-card,
.history-item,
.settings-card,
.theme-card,
.modal,
.settings-window,
.study-input-container-card,
.interrog-setup-card {
    border-radius: var(--logicum-radius-md) !important;
    border-color: var(--logicum-border-soft) !important;
}

.document-card,
.history-item,
.settings-card,
.theme-card,
.mode-card,
.mode-option {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    transition: background-color var(--logicum-motion-base) var(--logicum-ease),
        border-color var(--logicum-motion-base) var(--logicum-ease),
        transform var(--logicum-motion-base) var(--logicum-ease) !important;
}

.document-card:hover,
.history-item:hover,
.settings-card:hover,
.theme-card:hover,
.mode-card:hover,
.mode-option:hover {
    transform: translateY(-1px) !important;
}

/* Navigation controls stay quiet; selection is communicated by color and weight. */
.tool-btn,
.sidebar-btn,
.new-chat-btn,
.icon-btn,
.menu-btn,
.current-mode-btn,
.back-to-project-btn,
.study-library-picker-btn,
.study-dropdown-toggle-btn {
    border-radius: var(--logicum-radius-sm) !important;
    transition: background-color var(--logicum-motion-fast) var(--logicum-ease),
        border-color var(--logicum-motion-fast) var(--logicum-ease),
        color var(--logicum-motion-fast) var(--logicum-ease) !important;
}

.tool-btn:hover,
.sidebar-btn:hover,
.new-chat-btn:hover,
.icon-btn:hover,
.menu-btn:hover,
.current-mode-btn:hover,
.back-to-project-btn:hover {
    transform: none !important;
}

.tool-btn.active,
.sidebar-btn.active,
.tool-btn:hover,
.sidebar-btn:hover {
    box-shadow: none !important;
}

/* Chat surfaces follow the compact composer language used by ChatGPT/Gemini. */
.chat-input-area,
.input-container {
    background: var(--logicum-surface-soft) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12) !important;
}

/* The outer wrapper only positions the composer; it must not create a second box. */
.input-container,
.chat-main-area.is-empty .input-container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.input-container .chat-input-area {
    border-radius: 22px !important;
}

.input-container .chat-input-area #chatInput {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.chat-input-area textarea,
.chat-input,
.search-input,
.header-search-input,
.library-search-bar input {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Form controls should never fall back to the browser's white canvas. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
    background: var(--logicum-surface-soft) !important;
    color: var(--text-primary) !important;
    border-color: var(--logicum-border-soft) !important;
    border-radius: var(--logicum-radius-sm) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.78;
}

.voice-btn.voice-unavailable {
    opacity: 0.42 !important;
    cursor: not-allowed !important;
}

.voice-btn.recording {
    animation: logicumVoicePulse 1.5s ease-in-out infinite !important;
}

@keyframes logicumVoicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 103, 103, 0); }
    50% { box-shadow: 0 0 0 4px rgba(255, 103, 103, 0.10); }
}

textarea:focus,
input:focus,
select:focus,
button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color) 42%, transparent) !important;
    outline-offset: 2px;
}

/* Keep headings readable and consistent across Chat, Library and Study. */
.library-header h1,
.settings-view-header h1,
.mindmap-title,
.study-module-header-block .header-title,
.interrog-title {
    font-size: clamp(20px, 2vw, 26px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    font-weight: 650 !important;
}

.library-header p,
.library-subtitle,
.projects-subtitle,
.settings-subtitle,
.study-module-header-block .header-subtitle,
.interrog-subtitle {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* Avoid attention-grabbing entrance effects when switching top-level views. */
.library-header,
.mindmap-header,
.settings-window,
.document-card,
.history-item,
.mode-card,
.mode-option {
    animation-duration: 180ms !important;
    animation-timing-function: var(--logicum-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}