/* Product-version themes.

   The version role is resolved on the server and emitted on html/body before first paint.
   MainLayout keeps the same classes synchronized during interactive navigation. New-version
   accounts receive the complete rebrand; Legacy accounts keep the original light content
   surfaces and company-colour chrome. Anonymous realtime-room guests intentionally receive
   the new responsive theme because they have no account role to resolve. */

html.at-theme-new,
body.at-theme-new {
    color-scheme: dark;
    background-color: #071117 !important;
}

html.at-theme-legacy,
body.at-theme-legacy {
    color-scheme: light;
    background-color: #001f1f !important;
}

body.at-document-legacy::before {
    content: "";
    position: fixed;
    z-index: 999;
    inset: 0 0 auto;
    height: env(safe-area-inset-top, 0px);
    background: #001f1f;
    pointer-events: none;
}

/* Legacy token values let the shared, variable-based administration and account styles keep
   their original appearance without maintaining a second copy of every component sheet. */
.at-theme-legacy {
    --at-midnight: #001f1f;
    --at-chrome: #001f1f;
    --at-surface: #ffffff;
    --at-surface-raised: #f8fafb;
    --at-surface-active: #eef4f6;
    --at-border: #d9e2e7;
    --at-brand-mint: #0f766e;
    --at-brand-bright: #115e59;
    --at-brand-blue: #007bff;
    --at-text-primary: #172026;
    --at-text-secondary: #60727d;
    --at-text-subtle: #6a7b86;
    --at-listening: #16845b;
    --at-danger: #b42318;
    --at-brand-gradient: linear-gradient(135deg, #0f766e, #115e59);
    --at-panel-gradient: #ffffff;
    --at-active-gradient: #eef6f5;
    --at-font-ui: "Segoe UI", "Noto Sans JP", system-ui, sans-serif;
    --at-radius-sm: 6px;
    --at-radius-md: 8px;
    --at-radius-lg: 10px;
    --at-radius-xl: 10px;
    --at-radius-pill: 999px;
    --at-shadow-chrome: 0 12px 30px rgba(31, 41, 51, 0.08);
    --at-shadow-drawer: 0 12px 30px rgba(0, 0, 0, 0.14);
    --at-shadow-brand: none;
    --at-focus-ring: 0 0 0 0.2rem rgba(15, 118, 110, 0.16);
}

.at-theme-legacy .at-page-v2 {
    --pg-page: #f4f7f9;
    --pg-panel: #ffffff;
    --pg-hairline: #d9e2e7;
    --pg-hairline-strong: #c8d3da;
    background: #f4f7f9;
    color: #1f2933;
}

.at-theme-legacy .at-page-v2 .btn-primary,
.at-theme-legacy .at-page-v2 .btn-dark {
    background-color: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

.at-theme-legacy .at-page-v2 .btn-primary:hover,
.at-theme-legacy .at-page-v2 .btn-primary:focus,
.at-theme-legacy .at-page-v2 .btn-dark:hover,
.at-theme-legacy .at-page-v2 .btn-dark:focus {
    background-color: #115e59;
    border-color: #115e59;
    color: #ffffff;
}

.at-theme-legacy .at-page-v2 .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

.at-theme-legacy .at-page-v2 .btn-outline-secondary {
    background: transparent;
    border-color: #6c757d;
    color: #52636d;
}

.at-theme-legacy .at-page-v2 .btn-outline-secondary:hover,
.at-theme-legacy .at-page-v2 .btn-outline-secondary:focus {
    background: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

.at-theme-legacy .at-page-v2 .form-control,
.at-theme-legacy .at-page-v2 .form-select,
.at-theme-legacy .at-page-v2 .form-control:focus,
.at-theme-legacy .at-page-v2 .form-select:focus,
.at-theme-legacy .at-page-v2 .form-control-color {
    background-color: #ffffff;
    color: #212529;
}

.at-theme-legacy .at-page-v2 .form-control,
.at-theme-legacy .at-page-v2 .form-select,
.at-theme-legacy .at-page-v2 .form-control-color {
    border-color: #c8d3da;
}

.at-theme-legacy .at-page-v2 .form-control:focus,
.at-theme-legacy .at-page-v2 .form-select:focus {
    border-color: #0f766e;
    box-shadow: var(--at-focus-ring);
}

.at-theme-legacy .at-page-v2 .form-control::placeholder,
.at-theme-legacy .at-page-v2 .form-floating > label,
.at-theme-legacy .at-page-v2 .form-text,
.at-theme-legacy .at-page-v2 .text-muted {
    color: #6c757d !important;
}

.at-theme-legacy .at-page-v2 .form-select option {
    background-color: #ffffff;
    color: #212529;
}

.at-theme-legacy .at-page-v2 .alert {
    background: #ffffff;
    color: #1f2933;
}

.at-theme-legacy .at-page-v2 .alert-danger {
    background: #fdecec;
    border-color: #efb7b2;
    color: #b42318;
}

.at-theme-legacy .at-page-v2 .alert-success {
    background: #e7f5f2;
    border-color: #8fc9bf;
    color: #0f766e;
}

.at-theme-legacy .at-page-v2 .alert-warning,
.at-theme-legacy .bulk-confirmation {
    background: #fff6df;
    border-color: #edc66a;
    color: #715315;
}

.at-theme-legacy .bulk-confirmation span {
    color: #715315;
}

.at-theme-legacy .at-page-v2 .alert-info {
    background: #eaf4ff;
    border-color: #9ec9ed;
    color: #174f78;
}

.at-theme-legacy .admin-table th {
    background: #f8fafb;
}

.at-theme-legacy .admin-table tbody tr:hover {
    background: #fbfdfd;
}

.at-theme-legacy .status-success,
.at-theme-legacy .role-toggle.is-assigned {
    background: #e7f5f2;
    color: #0f766e;
}

.at-theme-legacy .status-warning {
    background: #fff6df;
    color: #946200;
}

.at-theme-legacy .status-danger {
    background: #fdecec;
    color: #b42318;
}

.at-theme-legacy .status-neutral,
.at-theme-legacy .role-toggle {
    background: #edf2f5;
    color: #52636d;
}

.at-theme-legacy .user-card,
.at-theme-legacy .record-card {
    background: #ffffff;
}

.at-theme-legacy .user-card:hover,
.at-theme-legacy .user-card:focus-within,
.at-theme-legacy .record-card:hover,
.at-theme-legacy .record-card:focus-within {
    border-color: #8fc9bf;
}

.at-theme-legacy .user-avatar,
.at-theme-legacy .record-avatar {
    background: #e7f5f2;
    border-color: #8fc9bf;
    color: #0f766e;
}

.at-theme-legacy .assignment-note {
    color: #946200;
}

.at-theme-legacy .login-container,
.at-theme-legacy .register-container,
.at-theme-legacy .manage-container {
    background-color: #f8f9fa;
}

.at-theme-legacy .login-box,
.at-theme-legacy .register-box,
.at-theme-legacy .manage-box {
    background: #ffffff;
    border-color: #d9e2e7;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Conference was already a dark production surface before the rebrand. Give it its original
   teal vocabulary locally instead of inheriting the light Legacy account-page tokens. */
.at-theme-legacy .conference-root {
    --at-midnight: #010b0b;
    --at-chrome: #031818;
    --at-surface: #021414;
    --at-surface-raised: #031818;
    --at-surface-active: #003432;
    --at-border: rgba(255, 255, 255, 0.08);
    --at-brand-mint: #12fbc2;
    --at-brand-bright: #66ffdc;
    --at-text-primary: #f5fbfb;
    --at-text-secondary: rgba(255, 255, 255, 0.72);
    --at-text-subtle: rgba(255, 255, 255, 0.58);
    --at-panel-gradient: rgba(2, 18, 18, 0.78);
    --at-radius-lg: 1.25rem;
    --at-radius-xl: 1.25rem;
    --at-shadow-chrome: 0 24px 46px rgba(0, 0, 0, 0.35);
    --conf-panel: rgba(2, 18, 18, 0.78);
    --conf-panel-strong: rgba(2, 18, 18, 0.94);
    --conf-hairline: rgba(255, 255, 255, 0.08);
    --conf-hairline-strong: rgba(255, 255, 255, 0.18);
    background: linear-gradient(145deg, #031818 0%, #010b0b 35%, #021414 100%);
    color: #f5fbfb;
}

.at-theme-legacy .conference-root.chroma-enabled {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0b1120 100%);
}

/* Shared saved-conversation pages predate the rebrand and use literal light colours. They are
   available in both versions, so repaint them only for new-version accounts. */
.at-theme-new .conversation-page,
.at-theme-new .conversation-detail-page {
    background:
        radial-gradient(90% 55% at 12% 0%, rgba(49, 225, 208, 0.06), transparent 60%),
        radial-gradient(85% 55% at 88% 100%, rgba(49, 168, 255, 0.05), transparent 62%),
        linear-gradient(180deg, var(--at-chrome) 0%, var(--at-midnight) 62%);
    color: var(--at-text-primary);
}

.at-theme-new .conversation-header h1,
.at-theme-new .conversation-panel h2,
.at-theme-new .conversation-row h3,
.at-theme-new .detail-header h1,
.at-theme-new .detail-panel h2,
.at-theme-new .empty-state h2,
.at-theme-new .empty-state h3,
.at-theme-new .title-editor > label,
.at-theme-new .conversation-stats strong,
.at-theme-new .fact-row strong,
.at-theme-new .message-raw {
    color: var(--at-text-primary);
    font-weight: 500;
    letter-spacing: -0.025em;
}

.at-theme-new .conversation-header p,
.at-theme-new .conversation-row p,
.at-theme-new .detail-header p,
.at-theme-new .empty-state p,
.at-theme-new .row-title-editor label,
.at-theme-new .row-title-help,
.at-theme-new .conversation-stats,
.at-theme-new .title-help,
.at-theme-new .export-actions > span,
.at-theme-new .view-actions > span,
.at-theme-new .summary-selector span,
.at-theme-new .fact-row span,
.at-theme-new .message-meta span {
    color: var(--at-text-secondary);
}

.at-theme-new .conversation-eyebrow,
.at-theme-new .detail-eyebrow {
    color: var(--at-brand-mint);
}

.at-theme-new .conversation-panel,
.at-theme-new .detail-panel {
    background: var(--at-panel-gradient);
    border-color: rgba(129, 174, 183, 0.20);
    border-radius: var(--at-radius-md);
    box-shadow: var(--at-shadow-chrome);
}

.at-theme-new .panel-toolbar,
.at-theme-new .conversation-row,
.at-theme-new .fact-row,
.at-theme-new .message-row {
    border-color: rgba(129, 174, 183, 0.20);
}

.at-theme-new .conversation-row:hover {
    background: rgba(21, 35, 45, 0.55);
}

.at-theme-new .source-badge {
    background: rgba(49, 225, 208, 0.12);
    border-color: rgba(49, 225, 208, 0.35);
    color: var(--at-brand-mint);
}

.at-theme-new .summary-text,
.at-theme-new .message-translation {
    background: rgba(21, 35, 45, 0.62);
    border-color: rgba(129, 174, 183, 0.20);
    color: var(--at-text-primary);
}

.at-theme-new .message-translation {
    border-left-color: var(--at-brand-mint);
}

.at-theme-new .conversation-page .form-control,
.at-theme-new .conversation-detail-page .form-control,
.at-theme-new .conversation-detail-page .form-select {
    background-color: rgba(7, 17, 23, 0.76);
    border-color: rgba(129, 174, 183, 0.20);
    color: var(--at-text-primary);
}

.at-theme-new .conversation-page .btn-primary,
.at-theme-new .conversation-detail-page .btn-primary {
    background-color: var(--at-brand-mint);
    border-color: var(--at-brand-mint);
    color: #02080c;
}

@media (max-width: 640px) {
    .at-theme-new .conversation-page,
    .at-theme-new .conversation-detail-page,
    .at-theme-legacy .at-page-v2 {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}