/* Atmospheric Theme (Global)
 *
 * Applied to all pages via base.html. Three.js scene (world.js)
 * renders the sky, terrain, water, stars, and effects. CSS handles the
 * vignette overlay and all glass-pane UI styling.
 *
 * Day/night cycle: world.js sets CSS custom properties on :root based
 * on the visitor's local time. Night defaults are defined here as
 * fallbacks. Glass surfaces, text, borders, and effects all adapt.
 *
 * Z-index stacking:
 *   1  #world-canvas — 3D WebGL scene
 *   3  #constellation-tooltip — HTML tooltip
 *   5  .vignette       — Edge darkening
 *  10  .app            — UI layer
 */

/* ===== Day/Night Custom Properties ===== */
/* Night defaults = Catppuccin Mocha — world.js overrides these on palette swap */
:root {
    --sky-glass: 30, 30, 46;          /* Mocha Base */
    --sky-glass-deep: 49, 50, 68;     /* Mocha Surface 0 */
    --sky-border: 108, 112, 134;      /* Mocha Overlay 0 (style guide: inactive border) */
    --sky-shadow-a: 0.5;              /* Shadow strength */
    --sky-vignette-a: 0.6;            /* Vignette edge strength */
    --sky-text-primary: #cdd6f4;      /* Mocha Text */
    --sky-text-secondary: #a6adc8;    /* Mocha Subtext 0 */
    --sky-text-muted: #7f849c;        /* Mocha Overlay 1 (style guide: subtle) */
    --sky-text-glow: 210, 170, 110;   /* Warm text shadow */
    --sky-text-glow-a: 0.04;
    --sky-glass-boost: 0;              /* Added to glass alpha during day */
}

/* ===== Background Layers ===== */

#world-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    box-shadow: inset 0 0 200px 80px rgba(3, 3, 8, var(--sky-vignette-a));
}

/* ===== Sky Theme Variables ===== */

.sky-theme {
    --text-primary: var(--sky-text-primary);
    --text-secondary: var(--sky-text-secondary);
    --text-muted: var(--sky-text-muted);
    --code-bg: rgba(var(--sky-glass-deep), 0.75);
}

/* Smooth text color flip during dawn/dusk (world.js does a hard swap) */
.sky-theme * {
    transition: color 2s ease, background-color 2s ease, border-color 2s ease;
}

/* ===== App Container — Sits Above Background ===== */

.sky-theme .app {
    position: relative;
    z-index: 10;
}

/* ===== Nav Bars — Translucent Glass ===== */

.sky-theme .top-nav {
    position: relative;
    z-index: 100;
    background: rgba(var(--sky-glass), 0.92) !important;
    border-bottom-color: rgba(var(--sky-border), 0.06) !important;
}

.sky-theme .bottom-nav {
    position: relative;
    z-index: 100;
    background: rgba(var(--sky-glass), 0.94) !important;
    border-top-color: rgba(var(--sky-border), 0.06) !important;
}

/* Nav links — use adaptive border color for hover */
.sky-theme .nav-links a:hover {
    background: rgba(var(--sky-border), 0.05);
}

/* ===== Layout Containers — Transparent ===== */

.sky-theme .layout-centered,
.sky-theme .layout-with-sidebar {
    background: transparent !important;
}

/* ===== Glass Chat Container (All Layouts) ===== */

.sky-theme .chat-container {
    position: relative;
    z-index: 20;
    background: rgba(var(--sky-glass), calc(0.72 + var(--sky-glass-boost))) !important;
    border: 1px solid rgba(var(--sky-border), 0.06);
    border-radius: 12px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, var(--sky-shadow-a)),
        inset 0 1px 0 rgba(var(--sky-border), 0.04);
    transition: all 0.4s ease;
}

/* Messages area */
.sky-theme .messages {
    background: transparent;
}

/* Chat form */
.sky-theme .chat-form {
    background: rgba(var(--sky-glass), calc(0.76 + var(--sky-glass-boost))) !important;
    border-top: 1px solid rgba(var(--sky-border), 0.06);
}

.sky-theme .chat-form textarea {
    background: rgba(var(--sky-glass), calc(0.62 + var(--sky-glass-boost))) !important;
    border-color: rgba(var(--sky-border), 0.08);
    color: var(--text-primary);
}

.sky-theme .chat-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-muted);
}

/* Send button */
.sky-theme .chat-form #sendBtn {
    background: var(--accent-muted);
    color: var(--sky-text-primary);
    border: 1px solid var(--accent-muted);
}

.sky-theme .chat-form #sendBtn:hover {
    background: var(--accent);
    color: var(--bg-primary);
}

/* ===== Message Bubbles — Glassy ===== */

.sky-theme .message.user {
    background: rgba(var(--sky-glass), calc(0.70 + var(--sky-glass-boost))) !important;
    border: 1px solid rgba(var(--sky-border), 0.04);
}

.sky-theme .message.assistant {
    background: rgba(var(--sky-glass), calc(0.65 + var(--sky-glass-boost))) !important;
    border: 1px solid rgba(var(--sky-border), 0.03);
}

.sky-theme .message.system {
    background: rgba(var(--sky-glass), 0.70) !important;
}

.sky-theme .welcome-message {
    background: rgba(var(--sky-glass), 0.75) !important;
    border: 1px solid rgba(var(--sky-border), 0.06);
}

/* Tool cards */
.sky-theme .tool-use {
    background: rgba(var(--sky-glass-deep), 0.7) !important;
    border-left-color: rgba(var(--sky-border), 0.3);
}

.sky-theme .tool-use.running {
    border-left-color: var(--warning);
    opacity: 0.9;
}

.sky-theme .tool-use.success {
    border-left-color: var(--success);
    opacity: 0.9;
}

.sky-theme .tool-use.error {
    border-left-color: var(--danger);
    opacity: 0.9;
}

.sky-theme .tool-result {
    background: rgba(var(--sky-glass-deep), 0.6) !important;
}

.sky-theme .tool-result.success {
    border-left-color: var(--success);
    opacity: 0.9;
}

.sky-theme .tool-result.error {
    border-left-color: var(--danger);
    opacity: 0.9;
}

/* Code blocks */
.sky-theme .message-content pre {
    background: rgba(var(--sky-glass-deep), 0.75) !important;
}

/* Retrieval chunks — adaptive background */
.sky-theme .retrieval-chunk {
    background: rgba(var(--sky-border), 0.04);
}

/* Subtle warm text shadow */
.sky-theme .message-content {
    text-shadow: 0 0 40px rgba(var(--sky-text-glow), var(--sky-text-glow-a));
}

/* ===== Dismiss / Sky Mode (Chat Page Only) ===== */

.chat-dismiss {
    display: none; /* Hidden by default everywhere */
}

/* Only show dismiss on the centered chat page */
.sky-theme .layout-centered .chat-dismiss {
    display: block;
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 25;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}

.sky-theme .layout-centered .chat-dismiss:hover {
    color: var(--text-secondary);
    background: rgba(var(--sky-border), 0.05);
}

/* Minimized state — chat page only */
.sky-theme .layout-centered .chat-container.chat-minimized {
    background: transparent !important;
    border-color: transparent;
    box-shadow: none;
    justify-content: flex-end;
    pointer-events: none;
}

.sky-theme .layout-centered .chat-container.chat-minimized .chat-form {
    pointer-events: auto;
}

.sky-theme .layout-centered .chat-container.chat-minimized .chat-header,
.sky-theme .layout-centered .chat-container.chat-minimized .messages {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, max-height 0.4s ease,
        padding 0.3s ease;
}

.sky-theme .layout-centered .chat-container.chat-minimized .chat-dismiss {
    display: none;
}

.sky-theme .layout-centered .chat-container.chat-minimized .chat-form {
    background: rgba(var(--sky-glass), 0.5) !important;
    border-top: none;
    border-radius: 12px;
    border: 1px solid rgba(var(--sky-border), 0.06);
}

/* Smooth expand */
.sky-theme .layout-centered .chat-container .messages {
    transition: opacity 0.3s ease, max-height 0.4s ease,
        padding 0.3s ease;
}

/* ===== Sidebar Chat — Floating Glass Pane ===== */

.sky-theme .chat-sidebar {
    background: transparent;
}

.sky-theme .chat-sidebar .chat-container {
    background: rgba(var(--sky-glass), 0.72) !important;
    border: 1px solid rgba(var(--sky-border), 0.06);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, var(--sky-shadow-a)),
        inset 0 1px 0 rgba(var(--sky-border), 0.04);
}

/* ===== Main Content — Floating Glass Pane ===== */

.sky-theme .main-content {
    background: rgba(var(--sky-glass), 0.72) !important;
    border: 1px solid rgba(var(--sky-border), 0.06);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, var(--sky-shadow-a)),
        inset 0 1px 0 rgba(var(--sky-border), 0.04);
}

/* Section cards within main content */
.sky-theme .ops-section,
.sky-theme .logs-section {
    background: rgba(var(--sky-glass), 0.5);
    border: 1px solid rgba(var(--sky-border), 0.04);
    border-radius: 8px;
}

/* Stat cards */
.sky-theme .stat-card {
    background: rgba(var(--sky-glass), 0.6) !important;
    border-color: rgba(var(--sky-border), 0.04) !important;
}

/* Config items */
.sky-theme .config-item {
    border-color: rgba(var(--sky-border), 0.04) !important;
}

/* Breakdown bars */
.sky-theme .breakdown-item .breakdown-bar {
    background: rgba(var(--sky-glass), 0.5) !important;
}

/* Tag list items */
.sky-theme .tag-item {
    background: rgba(var(--sky-glass), 0.5) !important;
    border-color: rgba(var(--sky-border), 0.04) !important;
}

/* Apps page */
.sky-theme .app-card {
    background: rgba(var(--sky-glass), 0.6) !important;
    border-color: rgba(var(--sky-border), 0.06) !important;
}

.sky-theme .app-card:hover {
    background: rgba(var(--sky-glass), 0.7) !important;
    border-color: var(--accent) !important;
}

/* App viewer toolbar */
.sky-theme .viewer-toolbar {
    background: rgba(var(--sky-glass), 0.85) !important;
    border-color: rgba(var(--sky-border), 0.06) !important;
}

.sky-theme .viewer-btn {
    background: rgba(var(--sky-glass), 0.6) !important;
    border-color: rgba(var(--sky-border), 0.08) !important;
}

/* Tasks page */
.sky-theme .task-card {
    background: rgba(var(--sky-glass), 0.6) !important;
    border-color: rgba(var(--sky-border), 0.06) !important;
}

/* Files page */
.sky-theme .file-explorer {
    background: rgba(var(--sky-glass), 0.6) !important;
}

/* Logs viewer */
.sky-theme .log-content {
    background: rgba(var(--sky-glass-deep), 0.7) !important;
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 767px) {
    .sky-theme .chat-container {
        background: rgba(var(--sky-glass), 0.82) !important;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .sky-theme .chat-form {
        background: rgba(var(--sky-glass), 0.85) !important;
    }

    .sky-theme .main-content {
        background: rgba(var(--sky-glass), 0.75) !important;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
}

/* When keyboard is open */
@media (max-height: 500px) and (max-width: 767px) {
    .sky-theme .chat-container {
        background: rgba(var(--sky-glass), 0.88) !important;
    }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #world-canvas {
        display: none;
    }
}