/* Simulation session page — page-level layout only.
   Task-type styles live in Shadow DOM (session-chat, session-multichoice, etc.) */

/* Theme layer — colors, backgrounds, shadows only */
@layer theme {
    .simulation-session-page {
        .session-loading {
            color: var(--text-secondary);
        }

        .loading-spinner {
            border-color: oklch(from var(--accent-primary) l c h / 0.2);
            border-block-start-color: var(--accent-primary);
        }

        .session-header {
            border-block-end-color: oklch(from var(--glass-tint) l c h / 0.1);
        }

        .task-progress {
            background: oklch(from var(--accent-primary) l c h / 0.1);
            color: var(--accent-primary);
        }

        .task-description {
            color: var(--text-secondary);
        }

        /* Voice toggle */
        .voice-toggle {
            border-color: oklch(from var(--glass-tint) l c h / 0.15);
            background: transparent;
            color: var(--text-secondary);

            &:hover {
                border-color: var(--accent-primary);
                color: var(--accent-primary);
            }

            &.active {
                background: var(--accent-primary);
                border-color: var(--accent-primary);
                color: oklch(100% 0 0);
            }
        }

        /* Completion state */
        .session-complete {
            .complete-icon {
                color: oklch(55% 0.18 145);
            }

            p {
                color: var(--text-secondary);
            }
        }

        /* Error state */
        .session-error {
            color: var(--text-secondary);

            h2 {
                color: var(--text-primary);
            }
        }
    }
}

/* Components layer — layout, sizing, spacing only */
@layer components {
    /* Full-bleed session: body flex column so page fills space after nav */
    body:has(.simulation-session-page) {
        display: flex;
        flex-direction: column;
        block-size: 100dvb;
        overflow: hidden;
    }

    body:has(.simulation-session-page) > #main-content {
        flex: 1;
        min-block-size: 0;
        display: flex;
        flex-direction: column;
    }

    .simulation-session-page {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-block-size: 0;
        padding-block: 0;
        padding-inline: 0;
        overflow: hidden;

        /* Respect the hidden attribute even when display is set explicitly */
        [hidden] {
            display: none !important;
        }

        /* ── Loading state ── */
        .session-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--space-md);
            flex: 1;
            font-size: var(--fs-large);
        }

        .loading-spinner {
            inline-size: 40px;
            block-size: 40px;
            border: 3px solid;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        /* ── Session container ── */
        .session-container {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-block-size: 0;
            max-inline-size: 900px;
            inline-size: 100%;
            margin-inline: auto;
            padding-inline: var(--space-md);
        }

        /* ── Task header ── */
        .session-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-md);
            padding: var(--space-md) 0;
            border-block-end: 1px solid;
            flex-shrink: 0;
        }

        .task-title {
            font-family: var(--font-heading);
            font-size: var(--fs-xl);
            font-weight: var(--fw-semibold);
            letter-spacing: -0.01em;
            margin: 0;
        }

        .task-description {
            font-size: var(--fs-small);
            margin: var(--space-xs) 0 0;
            line-height: 1.5;
        }

        .task-progress {
            white-space: nowrap;
            font-size: var(--fs-xsmall);
            font-weight: var(--fw-medium);
            padding: 4px 12px;
            border-radius: 100px;
            flex-shrink: 0;
        }

        /* ── Voice toggle ── */
        .voice-toggle {
            inline-size: 36px;
            block-size: 36px;
            border-radius: 50%;
            border: 1px solid;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }

        .session-header-right {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        /* ── Custom element host sizing ── */
        session-chat,
        session-multichoice,
        session-excel,
        session-ppt,
        session-code,
        voice-screen {
            flex: 1;
            min-block-size: 0;
        }

        /* ── Next task bar ── */
        .next-task-bar {
            display: flex;
            justify-content: center;
            padding: var(--space-md) 0;
            flex-shrink: 0;
        }

        /* ── Completion state ── */
        .session-complete {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--space-md);
            flex: 1;
            text-align: center;
            padding: var(--space-2xl);

            h1 {
                font-family: var(--font-heading);
                font-size: var(--fs-xxl);
                font-weight: var(--fw-bold);
            }

            p {
                max-inline-size: 480px;
                line-height: 1.7;
            }
        }

        /* ── Error state ── */
        .session-error {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--space-md);
            flex: 1;
            text-align: center;
            padding: var(--space-2xl);
        }
    }

    /* ── Responsive ── */
    @media (width < 640px) {
        .simulation-session-page {
            .session-header {
                flex-direction: column;
            }
        }
    }
}

/* ── Keyframes ── */

@keyframes spin {
    to { transform: rotate(360deg); }
}