/* ==================================================================
   MORPH-GLASS MATERIALS — siift platform
   Loaded via layout.tsx (not bundled) so Tailwind 4 preserves
   backdrop-filter. All selectors scoped under .proj-morph-glass.
   ================================================================== */

.proj-morph-glass .glass-chip {
    background: var(--glass-sheen), var(--glass-bg-soft);
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-xs);
}

/* Solid white pill — chat reply actions (Accept / Suggest / Skip) */
.proj-morph-glass .glass-pill-solid {
    background: var(--surface-card);
    border: 1px solid var(--n-200);
    box-shadow: var(--shadow-glass-xs);
}

.proj-morph-glass .glass-pill-solid-active {
    border-color: var(--glass-pill-accent-border);
    background: var(--glass-pill-accent-bg);
}

/* Dropdown / popover menu rows — glass-panel material + siift accent fill on hover */
.proj-morph-glass .glass-panel.glass-menu-item {
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.proj-morph-glass .glass-panel.glass-menu-item:hover {
    background: var(--siift-light-accent);
    color: var(--siift-dark-accent);
    border-color: var(--siift-mid-accent);
    box-shadow: var(--shadow-glass-lg), var(--glass-inner-glow);
}

.dark .proj-morph-glass .glass-panel.glass-menu-item:hover {
    background: var(--siift-darkest-accent);
    border-color: color-mix(in srgb, var(--siift-light-accent) 50%, transparent);
    color: var(--siift-light-main);
}

.proj-morph-glass .glass-hover {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition:
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.proj-morph-glass .glass-hover > * {
    position: relative;
    z-index: 1;
}

.proj-morph-glass .glass-hover::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-sheen), var(--glass-bg-soft);
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-xs);
    opacity: 0;
    transform: scale(0.88);
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out);
    pointer-events: none;
}

.proj-morph-glass .glass-hover:hover {
    transform: translateY(-2px);
}

.proj-morph-glass .glass-hover:hover::before {
    opacity: 1;
    transform: scale(1);
    background: var(--glass-sheen), var(--glass-bg);
    box-shadow: var(--shadow-glass-sm), var(--glass-inner-glow);
}

.proj-morph-glass .glass-ring-disc {
    background: var(--glass-sheen), var(--glass-bg-soft);
    backdrop-filter: blur(8px) saturate(1.45);
    -webkit-backdrop-filter: blur(8px) saturate(1.45);
    box-shadow: var(--shadow-glass-xs);
}

.proj-morph-glass .glass-card {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), var(--glass-bg);
    backdrop-filter: blur(16px) saturate(1.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.55);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-sm), var(--glass-inner-glow);
}

/* Frost card with project accent tint at rest (help FAB, accent icon buttons) */
.proj-morph-glass .glass-card.glass-card-accent {
    background: var(--glass-sheen), var(--glass-topic-tint-highlight);
    border-color: var(--glass-pill-accent-border);
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.proj-morph-glass .glass-card.glass-card-accent:hover {
    background: var(--glass-sheen), var(--glass-topic-tint-active);
}

.proj-morph-glass .glass-card.glass-card-primary-hover {
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.proj-morph-glass .glass-card.glass-card-primary-hover:hover {
    background: var(--glass-sheen), color-mix(in srgb, var(--project-light-primary, var(--glass-topic-tint)) 38%, transparent);
    border-color: color-mix(in srgb, var(--project-light-primary, var(--glass-topic-tint)) 45%, var(--glass-border));
}

.dark .proj-morph-glass .glass-card.glass-card-primary-hover:hover {
    background: var(--glass-sheen), color-mix(in srgb, var(--project-dark-primary, var(--glass-topic-tint)) 38%, transparent);
    border-color: color-mix(in srgb, var(--project-dark-primary, var(--glass-topic-tint)) 45%, var(--glass-border));
}

.proj-morph-glass .glass-bubble-user {
    background: var(--glass-sheen-bubble), var(--glass-bg-bubble-user);
    backdrop-filter: blur(16px) saturate(1.7);
    -webkit-backdrop-filter: blur(16px) saturate(1.7);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-xs);
}

.proj-morph-glass .glass-bubble-assistant {
    background: var(--glass-sheen-bubble), var(--glass-bg-bubble-assistant);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid var(--glass-border-user);
    box-shadow: var(--shadow-glass-xs);
}

.proj-morph-glass .glass-transcript {
    background: var(--glass-sheen), var(--glass-bg-transcript);
    backdrop-filter: blur(24px) saturate(1.65);
    -webkit-backdrop-filter: blur(24px) saturate(1.65);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-md);
}

/* Dark chat shell — near-clear so the workspace reads through */
.dark .proj-morph-glass .glass-transcript {
    background: var(--glass-bg-transcript);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    border-color: color-mix(in srgb, var(--n-white) 6%, transparent);
    box-shadow: none;
}

.dark .proj-morph-glass .glass-bubble-user,
.dark .proj-morph-glass .glass-bubble-assistant {
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: var(--shadow-glass-xs);
}

/* Dark board surfaces — the light-mode fills are hardcoded `--n-white` washes
   that read whitish on dark; re-base them on the dark glass tint instead.
   Keep fill opaque enough that panels stay readable when backdrop-filter
   drops out (e.g. during morph-rise opacity animation). */
.dark .proj-morph-glass .glass-panel,
.dark .proj-morph-glass .glass-banner {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 68%, transparent);
}

.dark .proj-morph-glass .glass-kanban {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 48%, transparent);
}

.dark .proj-morph-glass .glass-kanban-header {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 62%, transparent);
}

.dark .proj-morph-glass .glass-kanban-empty {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 30%, transparent);
}

/* Portaled popovers — glass-panel material (user menu, etc.) */
[data-slot="popover-content"][data-glass-popover] {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 42%, transparent) !important;
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow) !important;
}

html.dark [data-slot="popover-content"][data-glass-popover] {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 68%, transparent) !important;
}

[data-slot="popover-content"][data-glass-popover] > * {
    position: relative;
    z-index: 1;
}

/* Portaled hover cards — more opaque glass (timeline day dropdown, etc.).
   Same material as data-glass-popover, but higher fill so text stays readable. */
[data-slot="hover-card-content"][data-glass-popover-opaque] {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 55%, transparent) !important;
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow) !important;
}

html.dark [data-slot="hover-card-content"][data-glass-popover-opaque] {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 58%, transparent) !important;
}

[data-slot="hover-card-content"][data-glass-popover-opaque] > * {
    position: relative;
    z-index: 1;
}

/* Solid reply pill — its light `--n-200` border reads whitish on dark */
.dark .proj-morph-glass .glass-pill-solid {
    border-color: var(--glass-border);
}

/* Agent panel (portaled settings sheet) — same white-wash fix as .glass-panel */
html.dark[data-project-workspace-theme] [data-agent-panel] .glass-panel,
html.dark[data-project-workspace-theme] [data-agent-panel] [data-connector-row] {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 68%, transparent);
}

.proj-morph-glass .glass-thread {
    background: var(--glass-sheen), var(--glass-bg-thread);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-md);
}

.proj-morph-glass .glass-banner {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 42%, transparent);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-sm);
}

.proj-morph-glass .glass-panel {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 42%, transparent);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

/* Dashboard project input — SubjectCard glass-panel + original siift green tint */
.proj-morph-glass #dashboard-project-input.glass-panel {
    background: var(--glass-sheen), color-mix(in srgb, var(--siift-light-accent) 78%, transparent);
    backdrop-filter: blur(16px) saturate(1.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.55);
    border-color: color-mix(in srgb, var(--siift-mid-accent) 55%, transparent);
}

.dark .proj-morph-glass #dashboard-project-input.glass-panel {
    background: var(--glass-sheen), color-mix(in srgb, var(--siift-darkest-accent) 88%, transparent);
    border-color: color-mix(in srgb, var(--siift-mid-accent) 45%, transparent);
}

/* Dashboard input actions — solid white chips so borders read on the tinted panel */
.proj-morph-glass #dashboard-project-input .glass-card {
    background: var(--n-white);
    border-color: color-mix(in srgb, var(--brand-primary) 22%, var(--n-200));
    box-shadow: var(--shadow-glass-xs);
}

.dark .proj-morph-glass #dashboard-project-input .glass-card {
    background: var(--surface-card);
    border-color: color-mix(in srgb, var(--n-white) 28%, transparent);
}


/* Dashboard project cards — frosted white at rest; soft project tint on hover */
.proj-morph-glass #dashboard-projects .glass-panel {
    transition:
        background var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.proj-morph-glass #dashboard-projects .glass-panel:hover {
    background: var(--glass-sheen), var(--glass-topic-tint-active);
}

/* Dark hover — dial back further so saturated project accents don't wash the card */
.dark .proj-morph-glass #dashboard-projects .glass-panel:hover {
    background: var(--glass-sheen),
        color-mix(in srgb, var(--glass-topic-tint) 38%, var(--glass-bg-strong));
}

/* Run list rows — glass at rest; siift accent fill on hover (topic board) */
.proj-morph-glass .glass-panel.glass-run-list-item {
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.proj-morph-glass .glass-panel.glass-run-list-item:hover {
    background: var(--siift-light-accent);
    color: var(--siift-dark-accent);
    box-shadow: var(--shadow-glass-lg), var(--glass-inner-glow);
}

/* Dark hover — visible green tint (darkest-accent alone disappears on dark glass) */
.dark .proj-morph-glass .glass-panel.glass-run-list-item:hover {
    background: var(--glass-sheen),
        color-mix(in srgb, var(--glass-topic-tint) 38%, var(--glass-bg-strong));
    color: var(--siift-light-main);
    box-shadow: var(--shadow-glass-lg), var(--glass-inner-glow);
}

.proj-morph-glass .glass-card > *,
.proj-morph-glass .glass-panel > * {
    position: relative;
    z-index: 1;
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .proj-morph-glass .glass-card::after,
    .proj-morph-glass .glass-panel::after,
    .proj-morph-glass .glass-panel.glass-menu-item::after {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: 2;
        border-radius: inherit;
        padding: 1px;
        background: var(--glass-rim);
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }
}

.proj-morph-glass .glass-modal {
    background: var(--glass-sheen), var(--glass-bg-strong);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-lg);
}

/* Workspace chat composer — glass rim idle, project primary only while focused */
.proj-morph-glass #workspace-chat-container .workspace-composer {
    background: var(--glass-sheen), var(--glass-bg-strong);
    backdrop-filter: blur(var(--blur-lg, 16px));
    -webkit-backdrop-filter: blur(var(--blur-lg, 16px));
    border: 1.5px solid var(--glass-border) !important;
    box-shadow: none !important;
    border-radius: 0.75rem;
    outline: none;
    transition:
        border-color var(--dur-fast, 150ms) var(--ease-out, ease),
        border-width var(--dur-fast, 150ms) var(--ease-out, ease);
}

.proj-morph-glass #workspace-chat-container .workspace-composer:focus-within {
    border: 2.5px solid var(--project-light-primary) !important;
    box-shadow: none !important;
    outline: none;
}

.dark .proj-morph-glass #workspace-chat-container .workspace-composer:focus-within {
    border-color: var(--project-dark-primary) !important;
}

.dark .proj-morph-glass #workspace-chat-container .workspace-composer {
    background: var(--glass-bg-composer, var(--glass-bg-transcript));
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

.proj-morph-glass[data-run-details-overlay] {
    background: color-mix(in srgb, var(--n-950) 5%, transparent);
}

.proj-morph-glass [data-run-details-modal].glass-modal {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 88%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

.dark .proj-morph-glass [data-run-details-modal].glass-modal {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 78%, transparent);
}

/* Portaled tutorials modal — match dashboard tutorials section glass-panel */
.proj-morph-glass [data-tutorials-modal].glass-panel {
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 42%, transparent);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

.dark .proj-morph-glass [data-tutorials-modal].glass-panel {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 68%, transparent);
}

.proj-morph-glass[data-tutorials-overlay] {
    background: color-mix(in srgb, var(--n-950) 5%, transparent);
}

/* Portaled workspace sheets — keep native fill, enhance border rim only */
html[data-project-workspace-theme] [data-workspace-glass-sheet][data-slot="sheet-content"] {
    isolation: isolate;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-sm);
}

html[data-project-workspace-theme] [data-branding-sheet] > button {
    color: var(--text-subtle);
    opacity: 1;
}

html[data-project-workspace-theme] [data-branding-sheet] > button:hover,
html[data-project-workspace-theme] [data-workspace-glass-sheet] > button:hover {
    color: var(--text-default);
    background: color-mix(in srgb, var(--surface-muted) 60%, transparent);
}

html[data-project-workspace-theme] [data-workspace-glass-sheet] > button {
    color: var(--text-subtle);
    opacity: 1;
}

html[data-project-workspace-theme]:has([data-branding-sheet][data-state="open"]) [data-slot="sheet-overlay"],
html[data-project-workspace-theme]:has([data-workspace-glass-sheet][data-state="open"]) [data-slot="sheet-overlay"],
html[data-project-workspace-theme]:has([data-agent-panel][data-state="open"]) [data-slot="sheet-overlay"],
html[data-project-workspace-theme]:has([data-activity-log-panel][data-state="open"]) [data-slot="sheet-overlay"],
html[data-project-workspace-theme]:has([data-action-run-sheet][data-state="open"]) [data-slot="sheet-overlay"],
html[data-project-workspace-theme]:has([data-file-preview-panel][data-state="open"]) [data-slot="sheet-overlay"] {
    background: color-mix(in srgb, var(--n-950) 5%, transparent);
}

/* Portaled workspace sheets — frosted shell over workspace */
html[data-project-workspace-theme] [data-agent-panel][data-slot="sheet-content"],
html[data-project-workspace-theme] [data-activity-log-panel][data-slot="sheet-content"],
html[data-project-workspace-theme] [data-action-run-sheet][data-slot="sheet-content"],
html[data-project-workspace-theme] [data-branding-sheet][data-slot="sheet-content"] {
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 50%, transparent) !important;
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

html.dark[data-project-workspace-theme] [data-agent-panel][data-slot="sheet-content"],
html.dark[data-project-workspace-theme] [data-activity-log-panel][data-slot="sheet-content"],
html.dark[data-project-workspace-theme] [data-action-run-sheet][data-slot="sheet-content"],
html.dark[data-project-workspace-theme] [data-branding-sheet][data-slot="sheet-content"] {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 68%, transparent) !important;
}

/* File preview drawer — slightly more opaque for readability */
html[data-project-workspace-theme] [data-file-preview-panel][data-slot="sheet-content"] {
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 65%, transparent) !important;
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

html.dark[data-project-workspace-theme] [data-file-preview-panel][data-slot="sheet-content"] {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 52%, transparent) !important;
}

/* Account menu sheet (dashboard mobile) — portaled outside MorphGlassScope */
html:has([data-account-menu-panel][data-state="open"]) [data-slot="sheet-overlay"] {
    background: color-mix(in srgb, var(--n-950, #1c1c22) 5%, transparent);
}

[data-account-menu-panel][data-slot="sheet-content"] {
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 50%, transparent) !important;
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

html.dark [data-account-menu-panel][data-slot="sheet-content"] {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 68%, transparent) !important;
}

[data-account-menu-panel] > button {
    color: var(--text-subtle);
    opacity: 1;
}

[data-account-menu-panel] > button:hover {
    color: var(--text-default);
    background: color-mix(in srgb, var(--surface-muted, #f4f5f7) 40%, transparent);
}

html[data-project-workspace-theme] [data-agent-panel] > button,
html[data-project-workspace-theme] [data-activity-log-panel] > button,
html[data-project-workspace-theme] [data-action-run-sheet] > button,
html[data-project-workspace-theme] [data-file-preview-panel] > button {
    color: var(--text-subtle);
    opacity: 1;
}

html[data-project-workspace-theme] [data-agent-panel] > button:hover,
html[data-project-workspace-theme] [data-activity-log-panel] > button:hover,
html[data-project-workspace-theme] [data-action-run-sheet] > button:hover,
html[data-project-workspace-theme] [data-file-preview-panel] > button:hover {
    color: var(--text-default);
    background: color-mix(in srgb, var(--surface-muted) 40%, transparent);
}

html[data-project-workspace-theme] [data-agent-panel] [data-slot="sheet-header"],
html[data-project-workspace-theme] [data-agent-panel] [data-agent-panel-chrome],
html[data-project-workspace-theme] [data-activity-log-panel] [data-slot="sheet-header"],
html[data-project-workspace-theme] [data-action-run-sheet] [data-slot="sheet-header"],
html[data-project-workspace-theme] [data-file-preview-panel] [data-slot="sheet-header"],
html[data-project-workspace-theme] [data-branding-sheet] [data-slot="sheet-header"],
html[data-project-workspace-theme] [data-branding-sheet] [data-slot="sheet-footer"] {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.dark[data-project-workspace-theme] [data-agent-panel] [data-slot="sheet-header"],
html.dark[data-project-workspace-theme] [data-agent-panel] [data-agent-panel-chrome],
html.dark[data-project-workspace-theme] [data-activity-log-panel] [data-slot="sheet-header"],
html.dark[data-project-workspace-theme] [data-action-run-sheet] [data-slot="sheet-header"],
html.dark[data-project-workspace-theme] [data-file-preview-panel] [data-slot="sheet-header"],
html.dark[data-project-workspace-theme] [data-branding-sheet] [data-slot="sheet-header"],
html.dark[data-project-workspace-theme] [data-branding-sheet] [data-slot="sheet-footer"] {
    background: transparent;
}

html[data-project-workspace-theme] [data-agent-panel] [data-agent-panel-footer] {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.dark[data-project-workspace-theme] [data-agent-panel] [data-agent-panel-footer] {
    background: transparent;
}

.proj-morph-glass .workspace-toolbar {
    position: relative;
    isolation: isolate;
}

.proj-morph-glass .workspace-toolbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--surface-app);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 10px), transparent 100%);
    pointer-events: none;
}

/* Chat toolbar (left 55%) — white fill dissolves toward the insights column */
.proj-morph-glass .workspace-toolbar-chat {
    position: relative;
    isolation: isolate;
}

.proj-morph-glass .workspace-toolbar-chat::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--surface-app);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 78%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 78%, transparent 100%);
}

/* Error banner — frosted glass with an #FF6A39 (--error) tint */
.proj-morph-glass .glass-banner-error {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--error) 28%, transparent) 0%,
            color-mix(in srgb, var(--error) 12%, transparent) 52%,
            color-mix(in srgb, var(--error) 22%, transparent) 100%
        ),
        var(--glass-sheen),
        var(--glass-bg-soft);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
    box-shadow:
        var(--shadow-glass-sm),
        inset 0 1px 0 color-mix(in srgb, var(--n-white) 48%, transparent),
        0 10px 30px -16px color-mix(in srgb, var(--error) 65%, transparent);
}

/* Topic tile — frosted white glass at rest; on hover/active a soft mint tint
   (--glass-topic-tint → --brand-green-tint by default, --project-light-primary
   inside #workspace-root). */
.proj-morph-glass .glass-card-topic {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), var(--glass-bg);
    backdrop-filter: blur(16px) saturate(1.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.55);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-sm), var(--glass-inner-glow);
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.proj-morph-glass .glass-card-topic > * {
    position: relative;
    z-index: 1;
}

/* Related / phase-highlighted cards — the frosted "white" layer itself takes on
   a LIGHTER version of the project accent (fires on topics related to the one
   being hovered). Listed first so a card you physically hover falls through to
   the full-accent :hover rule below. Border stays the default glass edge. */
.proj-morph-glass .glass-card-topic.glass-card-topic--highlight {
    background:
        var(--glass-sheen),
        var(--glass-topic-tint-highlight);
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

/* The directly hovered / active card — soft mint tint, not electric primary */
.proj-morph-glass .glass-card-topic:hover,
.proj-morph-glass .glass-card-topic.glass-card-topic--active {
    background:
        var(--glass-sheen),
        var(--glass-topic-tint-active);
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

/* only the physically hovered card lifts; related highlighted cards just tint */
.proj-morph-glass .glass-card-topic:hover {
    transform: translateY(-2px);
}

.proj-morph-glass .glass-card-topic:active {
    transform: translateY(0) scale(0.99);
}

/* Agent panel — glass-panel material in portaled sheet (matches SubjectCard / tile-group) */
html[data-project-workspace-theme] [data-agent-panel] .glass-panel,
html[data-project-workspace-theme] [data-agent-panel] [data-connector-row] {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 42%, transparent);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border: 1px solid var(--glass-border);
    transition:
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

html[data-project-workspace-theme] [data-agent-panel] .glass-panel {
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
    transition:
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

html[data-project-workspace-theme] [data-agent-panel] [data-connector-row].glass-panel {
    box-shadow: none;
}

html[data-project-workspace-theme] [data-agent-panel] .glass-panel > *,
html[data-project-workspace-theme] [data-agent-panel] [data-connector-row] > * {
    position: relative;
    z-index: 1;
}

html[data-project-workspace-theme] [data-agent-panel] [data-connector-row][data-connector-state="active"] {
    border-color: color-mix(in srgb, var(--primary, var(--brand-secondary)) 45%, var(--glass-border));
}

html[data-project-workspace-theme] [data-agent-panel] [data-connector-row][data-connector-state="disabled"] {
    border-style: dashed;
}

/* Kanban column — frosted dashed column shell (Actions board) */
.proj-morph-glass .glass-kanban {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 12%, transparent);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    border: 1px dashed color-mix(in srgb, var(--border-strong) 85%, transparent);
    box-shadow: var(--shadow-glass-sm);
}

.proj-morph-glass .glass-kanban-header {
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 22%, transparent);
    backdrop-filter: blur(10px) saturate(1.45);
    -webkit-backdrop-filter: blur(10px) saturate(1.45);
    border-bottom: 1px dashed color-mix(in srgb, var(--border-strong) 65%, transparent);
}

/* Action card — proposed/suggested row with full frost */
.proj-morph-glass .glass-action-card {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), var(--glass-bg);
    backdrop-filter: blur(16px) saturate(1.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.55);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-xs);
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.proj-morph-glass .glass-action-card > * {
    position: relative;
    z-index: 1;
}

.proj-morph-glass .glass-action-card:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--glass-sheen), var(--glass-bg-strong);
    border-color: color-mix(in srgb, var(--project-light-primary, var(--glass-border)) 45%, var(--glass-border));
    box-shadow: var(--shadow-glass-sm), var(--glass-inner-glow);
}

.proj-morph-glass .glass-action-card:active:not(:disabled) {
    transform: translateY(0) scale(0.99);
}

.proj-morph-glass .glass-action-card:disabled {
    cursor: default;
}

/* Solid border variant — in-progress / committed action rows */
.proj-morph-glass .glass-action-card--solid {
    border-style: solid;
    border-color: var(--glass-border);
}

/* Pricing page — subscribe CTA (was bg-siift-mid-accent) and promo strip (was bg-siift-lightest-accent) */
.proj-morph-glass .glass-pricing-cta {
    position: relative;
    isolation: isolate;
    color: var(--n-white);
    background: var(--glass-sheen), var(--siift-dark-accent);
    backdrop-filter: blur(16px) saturate(1.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.55);
    border: 1px solid color-mix(in srgb, var(--siift-dark-accent) 72%, var(--n-black));
    box-shadow: var(--shadow-glass-sm), var(--glass-inner-glow);
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.proj-morph-glass .glass-pricing-cta > * {
    position: relative;
    z-index: 1;
}

.proj-morph-glass .glass-pricing-cta:hover:not(:disabled) {
    background: var(--glass-sheen), color-mix(in srgb, var(--brand-green) 22%, var(--siift-dark-accent));
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

.proj-morph-glass .glass-pricing-promo {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), var(--glass-topic-tint-active);
    backdrop-filter: blur(16px) saturate(1.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.55);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
    transition:
        background var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.proj-morph-glass .glass-pricing-promo > * {
    position: relative;
    z-index: 1;
}

.proj-morph-glass .glass-pricing-promo:hover {
    background: var(--glass-sheen), var(--glass-topic-tint-active);
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

/* Empty placeholder inside kanban columns */
.proj-morph-glass .glass-kanban-empty {
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 6%, transparent);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border: 1px dashed color-mix(in srgb, var(--border-strong) 75%, transparent);
    box-shadow: var(--shadow-glass-xs);
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    [data-slot="popover-content"][data-glass-popover]::after,
    [data-slot="hover-card-content"][data-glass-popover-opaque]::after,
    html[data-project-workspace-theme] [data-workspace-glass-sheet][data-slot="sheet-content"]::after,
    html[data-project-workspace-theme] [data-agent-panel][data-slot="sheet-content"]::after,
    html[data-project-workspace-theme] [data-activity-log-panel][data-slot="sheet-content"]::after,
    html[data-project-workspace-theme] [data-action-run-sheet][data-slot="sheet-content"]::after,
    html[data-project-workspace-theme] [data-branding-sheet][data-slot="sheet-content"]::after,
    html[data-project-workspace-theme] [data-file-preview-panel][data-slot="sheet-content"]::after,
    [data-account-menu-panel][data-slot="sheet-content"]::after,
    .proj-morph-glass [data-run-details-modal].glass-modal::after,
    .proj-morph-glass [data-tutorials-modal].glass-panel::after,
    html[data-project-workspace-theme] [data-agent-panel] .glass-panel::after,
    html[data-project-workspace-theme] [data-agent-panel] [data-connector-row]::after,
    .proj-morph-glass .glass-card-topic::after,
    .proj-morph-glass .glass-pricing-cta::after,
    .proj-morph-glass .glass-pricing-promo::after {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: 2;
        border-radius: inherit;
        padding: 1px;
        background: var(--glass-rim);
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }
}