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

   Dark rules match
   `:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)`.
   `.proj-morph-glass` is mounted at the root (MorphGlassProvider), so a
   surface that opts into night via a nested `.dark` (e.g. the dashboard)
   has `.dark` BELOW `.proj-morph-glass` — `.dark .proj-morph-glass` can
   never match it, which would leave dark tokens paired with light
   materials. The `.morph-night` branch covers that case; both branches
   are specificity (0,2,0), so ordering is unchanged.
   ================================================================== */

.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);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .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);
}

/* Idle dashed outline → frost chip on hover (empty website trigger).
   Paint frost on the button itself (not an inset ::before) so the face
   stays the same size as neighboring outline icon buttons. */
.proj-morph-glass .glass-hover.glass-hover-dashed {
    overflow: visible;
    border: 1px dashed var(--n-300);
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    transition:
        color var(--dur-fast) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        border-style var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.proj-morph-glass .glass-hover.glass-hover-dashed::before {
    content: none;
}

.proj-morph-glass .glass-hover.glass-hover-dashed:hover {
    transform: none;
    border-style: solid;
    border-color: var(--n-200);
    background: var(--glass-sheen), var(--glass-bg);
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    box-shadow: var(--shadow-glass-xs);
    color: var(--text-default);
}

.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));
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .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 */
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .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;
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .glass-bubble-user,
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .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). */
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .glass-panel,
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .glass-banner {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 68%, transparent);
}

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

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

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

/* Portaled popovers / dropdowns — glass-panel material (user menu, traction connect, etc.) */
[data-slot="popover-content"][data-glass-popover],
[data-slot="dropdown-menu-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],
html.dark [data-slot="dropdown-menu-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] > *,
[data-slot="dropdown-menu-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 */
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .glass-pill-solid {
    border-color: var(--glass-border);
}

/* Agent / share panels (portaled sheets) — 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],
html.dark[data-project-workspace-theme] [data-share-panel] .glass-panel,
html.dark[data-project-workspace-theme] [data-share-panel] [data-member-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);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) #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 project input — frosted action chips inside hero composer shell */
.proj-morph-glass #dashboard-project-input .landing-hero-input-shell .glass-card {
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 94%, var(--n-100));
    border-color: color-mix(in srgb, var(--n-950) 14%, var(--n-300));
    box-shadow: var(--shadow-glass-xs);
    color: var(--text-faint);
    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),
        opacity var(--dur-fast) var(--ease-out);
}

.proj-morph-glass #dashboard-project-input .landing-hero-input-shell .glass-card.project-input-action-active:not(:disabled) {
    background: var(--glass-sheen), var(--glass-topic-tint-highlight);
    border-color: var(--glass-pill-accent-border);
    color: var(--text-default);
    box-shadow: var(--shadow-glass-sm), var(--glass-inner-glow);
}

.proj-morph-glass #dashboard-project-input .landing-hero-input-shell .glass-card:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.proj-morph-glass #dashboard-project-input .landing-hero-input-shell .glass-card:disabled:hover {
    transform: none;
    box-shadow: var(--shadow-glass-xs);
}

/* Resting-chip hover (dark only) — lift the icon to full-strength ink for a clear affordance */
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #dashboard-project-input
    .landing-hero-input-shell
    .glass-card:not(.project-input-action-active):not(:disabled):hover {
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 22%, var(--glass-tint-dark));
    border-color: color-mix(in srgb, var(--n-white) 52%, transparent);
    color: var(--text-strong);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #dashboard-project-input
    .landing-hero-input-shell
    .glass-card {
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 16%, var(--glass-tint-dark));
    border-color: color-mix(in srgb, var(--n-white) 38%, transparent);
    backdrop-filter: blur(12px) saturate(1.45);
    -webkit-backdrop-filter: blur(12px) saturate(1.45);
    color: var(--text-default);
    box-shadow:
        var(--shadow-glass-xs),
        inset 0 1px 0 color-mix(in srgb, var(--n-white) 10%, transparent);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #dashboard-project-input
    .landing-hero-input-shell
    .glass-card.project-input-action-active:not(:disabled) {
    background: var(--glass-sheen),
        color-mix(in srgb, var(--project-dark-primary, var(--brand-secondary-dark)) 32%, var(--glass-tint-dark));
    border-color: color-mix(
        in srgb,
        var(--project-dark-primary, var(--brand-secondary-dark)) 48%,
        var(--n-white) 12%
    );
    color: var(--text-default);
    box-shadow:
        var(--shadow-glass-sm),
        0 0 12px color-mix(in srgb, var(--brand-neon) 22%, transparent);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #dashboard-project-input
    .landing-hero-input-shell
    .glass-card.glass-card-primary-hover:not(:disabled):hover {
    background: var(--glass-sheen),
        color-mix(in srgb, var(--project-dark-primary, var(--glass-topic-tint)) 24%, var(--glass-tint-dark));
    border-color: color-mix(in srgb, var(--n-white) 32%, transparent);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #dashboard-project-input
    .landing-hero-input-shell
    .glass-card.project-input-action-active:not(:disabled):hover {
    background: var(--glass-sheen),
        color-mix(in srgb, var(--project-dark-primary, var(--brand-secondary-dark)) 40%, var(--glass-tint-dark));
    border-color: color-mix(
        in srgb,
        var(--project-dark-primary, var(--brand-secondary-dark)) 55%,
        var(--n-white) 14%
    );
}

/* Dashboard projects search — same focus rim as workspace chat composer */
.proj-morph-glass #dashboard-projects .dashboard-projects-search {
    border: 1.5px solid var(--glass-border) !important;
    box-shadow: none !important;
    outline: none;
    transition:
        border-color var(--dur-fast, 150ms) var(--ease-out, ease),
        border-width var(--dur-fast, 150ms) var(--ease-out, ease),
        background var(--dur-fast, 150ms) var(--ease-out, ease);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #dashboard-projects
    .dashboard-projects-search {
    background: color-mix(in srgb, var(--surface-card) 38%, transparent) !important;
    backdrop-filter: blur(10px) saturate(1.35);
    -webkit-backdrop-filter: blur(10px) saturate(1.35);
}

.proj-morph-glass #dashboard-projects .dashboard-projects-search:focus-visible {
    border: 2.5px solid var(--project-light-primary, var(--brand-accent-tint)) !important;
    box-shadow: none !important;
    outline: none;
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #dashboard-projects
    .dashboard-projects-search:focus-visible {
    border-color: var(--project-dark-primary, var(--brand-secondary-dark)) !important;
}

/* 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 */
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) #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) */
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .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);
}

/* Auth mock forms — thick frosted pane floating over the dot grid. A thinner fill with a
   heavier blur reads as more glass than a dense fill does, and the elevation is built from
   three stacked shadows (contact, ambient, deep cast) rather than one flat drop. */
.proj-morph-glass [data-auth-modal].glass-modal {
    position: relative;
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 40%, transparent);
    backdrop-filter: blur(28px) saturate(1.85);
    -webkit-backdrop-filter: blur(28px) saturate(1.85);
    border: 1px solid var(--glass-border);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--brand-primary) 6%, transparent),
        0 10px 24px -12px color-mix(in srgb, var(--brand-primary) 16%, transparent),
        0 34px 64px -26px color-mix(in srgb, var(--brand-primary) 30%, transparent),
        var(--glass-inner-glow);
}

/* Content rides above the specular layer (the card isolates, so the pseudo would cover it). */
.proj-morph-glass [data-auth-modal].glass-modal > * {
    position: relative;
    z-index: 1;
}

/* Specular — light catching the pane from the top-left. */
.proj-morph-glass [data-auth-modal].glass-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        125% 85% at 14% -12%,
        color-mix(in srgb, var(--n-white) 60%, transparent) 0%,
        color-mix(in srgb, var(--n-white) 14%, transparent) 34%,
        transparent 62%
    );
}

/* Gradient rim — same masked-border trick as .glass-card, so the edge reads as a lit bevel
   that catches light on one side and falls into shadow on the other. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .proj-morph-glass [data-auth-modal].glass-modal::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;
    }
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) [data-auth-modal].glass-modal {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 68%, transparent);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 12px 26px -12px rgba(0, 0, 0, 0.6),
        0 40px 72px -28px rgba(0, 0, 0, 0.75),
        var(--glass-inner-glow);
}

/* Dark glass reflects far less — a strong white sheen here would read as fog, not glass. */
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) [data-auth-modal].glass-modal::before {
    background: radial-gradient(
        125% 85% at 14% -12%,
        color-mix(in srgb, var(--n-white) 12%, transparent) 0%,
        color-mix(in srgb, var(--n-white) 3%, transparent) 34%,
        transparent 62%
    );
}

/* Auth form fields — glass chip material with focus rim (no Tailwind border/ring stack) */
.proj-morph-glass .glass-auth-field {
    background: var(--glass-sheen), var(--glass-bg-soft);
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    border: 1.5px solid var(--glass-border);
    box-shadow: var(--shadow-glass-xs);
    outline: none;
    transition:
        border-color var(--dur-fast, 150ms) var(--ease-out, ease),
        border-width var(--dur-fast, 150ms) var(--ease-out, ease),
        box-shadow var(--dur-base, 200ms) var(--ease-out, ease);
}

.proj-morph-glass .glass-auth-field:focus-visible {
    border: 2.5px solid var(--project-light-primary, var(--brand-accent-tint));
    box-shadow: var(--shadow-glass-sm), var(--glass-inner-glow);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .glass-auth-field:focus-visible {
    border-color: var(--project-dark-primary, var(--brand-secondary-dark));
}

/* Auth primary CTA — three visibly distinct states so the form reads as it fills in:
   disabled = inert grey chip, enabled = deep brand-green fill, hover = brighter fill with an
   electric rim, glow and lift. The fill stays in the dark half of the green ramp in both live
   states so the white label keeps its contrast — the "brightening" is carried by the rim and
   glow rather than by washing the fill out. */
.proj-morph-glass .glass-auth-cta {
    position: relative;
    isolation: isolate;
    color: var(--text-on-brand);
    background: var(--glass-sheen),
        linear-gradient(
            135deg,
            var(--brand-green-strong) 0%,
            color-mix(in srgb, var(--brand-green) 55%, var(--brand-green-strong)) 100%
        );
    border: 1px solid color-mix(in srgb, var(--brand-green) 45%, var(--brand-green-strong));
    box-shadow:
        var(--shadow-glass-sm),
        var(--glass-inner-glow),
        0 8px 20px -12px color-mix(in srgb, var(--brand-green) 70%, transparent);
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

/* Sheen sweep sits under the label, revealed on hover. */
.proj-morph-glass .glass-auth-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    background: linear-gradient(
        115deg,
        transparent 20%,
        color-mix(in srgb, var(--brand-green-electric) 28%, transparent) 48%,
        transparent 76%
    );
    transition: opacity var(--dur-base) var(--ease-out);
}

.proj-morph-glass .glass-auth-cta:hover:not(:disabled) {
    background: var(--glass-sheen),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--brand-green) 78%, var(--brand-green-strong)) 0%,
            var(--brand-green) 100%
        );
    border-color: color-mix(in srgb, var(--brand-green-electric) 55%, var(--brand-green));
    box-shadow:
        var(--shadow-glass-md),
        var(--glass-inner-glow),
        0 14px 30px -12px color-mix(in srgb, var(--brand-green-electric) 55%, transparent);
    transform: translateY(-1px);
}

.proj-morph-glass .glass-auth-cta:hover:not(:disabled)::after {
    opacity: 1;
}

.proj-morph-glass .glass-auth-cta:active:not(:disabled) {
    transform: translateY(0);
    box-shadow:
        var(--shadow-glass-xs),
        var(--glass-inner-glow),
        0 6px 14px -12px color-mix(in srgb, var(--brand-green) 60%, transparent);
}

.proj-morph-glass .glass-auth-cta:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-green-electric) 70%, transparent);
    outline-offset: 2px;
}

/* Disabled — inert grey chip with no brand colour at all, so enabling the button is a colour
   event rather than an opacity change. Keeps a visible rim so it still reads as a control. */
.proj-morph-glass .glass-auth-cta:disabled {
    color: var(--text-subtle);
    background: color-mix(in srgb, var(--brand-primary) 7%, transparent);
    border-color: var(--border-strong);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

.proj-morph-glass .glass-auth-cta:disabled::after {
    opacity: 0;
}

/* Dark — start one step up the ramp so the fill separates from the dark card. */
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .glass-auth-cta {
    background: var(--glass-sheen),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--brand-green) 62%, var(--brand-green-strong)) 0%,
            var(--brand-green) 100%
        );
    border-color: color-mix(in srgb, var(--brand-green-electric) 30%, var(--brand-green));
    box-shadow:
        var(--shadow-glass-sm),
        var(--glass-inner-glow),
        0 10px 26px -12px color-mix(in srgb, var(--brand-green) 60%, transparent);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .glass-auth-cta:hover:not(:disabled) {
    background: var(--glass-sheen),
        linear-gradient(
            135deg,
            var(--brand-green) 0%,
            color-mix(in srgb, var(--brand-green-electric) 22%, var(--brand-green)) 100%
        );
    border-color: color-mix(in srgb, var(--brand-green-electric) 70%, var(--brand-green));
    box-shadow:
        var(--shadow-glass-md),
        var(--glass-inner-glow),
        0 16px 34px -12px color-mix(in srgb, var(--brand-green-electric) 45%, transparent);
}

/* The dark base rule ties on specificity with the light `:disabled` rule and wins on order,
   so every property the base sets has to be reset here — including the glow. */
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) .glass-auth-cta:disabled {
    color: var(--text-faint);
    background: color-mix(in srgb, var(--n-white) 7%, transparent);
    border-color: var(--border-strong);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .proj-morph-glass .glass-auth-cta,
    .proj-morph-glass .glass-auth-cta:hover:not(:disabled),
    .proj-morph-glass .glass-auth-cta:active:not(:disabled) {
        transform: none;
    }
}

/* 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);
}

/* Chat Playbooks CTA — frosted shell matching the settings (agent) panel.
   Lives as a bottom-left overlay inside ChatMessages (still under #workspace-chat-container). */
.proj-morph-glass #workspace-chat-container .glass-cta-panel.glass-panel {
    isolation: isolate;
    background: var(--glass-sheen), color-mix(in srgb, var(--n-white) 50%, transparent) !important;
    backdrop-filter: blur(8px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.4) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #workspace-chat-container
    .glass-cta-panel.glass-panel {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 68%, transparent) !important;
}

/* Playbook rows — topic-tile glass with mint/green hover inside the CTA panel */
.proj-morph-glass #workspace-chat-container .glass-cta-panel .glass-card-topic {
    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);
}

.proj-morph-glass #workspace-chat-container .glass-cta-panel .glass-card-topic:hover,
.proj-morph-glass #workspace-chat-container .glass-cta-panel .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);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #workspace-chat-container
    .glass-cta-panel
    .glass-card-topic {
    background: var(--glass-sheen), color-mix(in srgb, var(--glass-tint-dark) 48%, transparent);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #workspace-chat-container
    .glass-cta-panel
    .glass-card-topic:hover,
:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    #workspace-chat-container
    .glass-cta-panel
    .glass-card-topic.glass-card-topic--active {
    background: var(--glass-sheen),
        color-mix(in srgb, var(--glass-topic-tint) 38%, var(--glass-bg-strong));
}

.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;
}

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

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) #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);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) [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);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night) [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-share-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-share-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-share-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-share-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-share-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-share-panel] [data-slot="sheet-header"],
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-share-panel] [data-slot="sheet-header"],
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 / share panels — 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],
html[data-project-workspace-theme] [data-share-panel] .glass-panel,
html[data-project-workspace-theme] [data-share-panel] [data-member-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:
        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);
}

html[data-project-workspace-theme] [data-agent-panel] .glass-panel,
html[data-project-workspace-theme] [data-share-panel] .glass-panel {
    box-shadow: var(--shadow-glass-md), var(--glass-inner-glow);
}

html[data-project-workspace-theme] [data-agent-panel] [data-connector-row].glass-panel,
html[data-project-workspace-theme] [data-share-panel] [data-member-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] > *,
html[data-project-workspace-theme] [data-share-panel] .glass-panel > *,
html[data-project-workspace-theme] [data-share-panel] [data-member-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;
}

/* Share members — soft siift green tint on hover (matches dashboard project cards) */
html[data-project-workspace-theme] [data-share-panel] [data-member-row]:hover {
    background: var(--glass-sheen), var(--glass-topic-tint-active);
    box-shadow: var(--shadow-glass-sm), var(--glass-inner-glow);
}

html.dark[data-project-workspace-theme] [data-share-panel] [data-member-row]:hover {
    background: var(--glass-sheen),
        color-mix(in srgb, var(--glass-topic-tint) 38%, var(--glass-bg-strong));
}

/* 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);
}

/* Action card — soft siift green tint on hover (personalized ideas CTA) */
.proj-morph-glass .glass-action-card.glass-action-card--accent:hover:not(:disabled) {
    background: var(--glass-sheen), var(--glass-topic-tint-active);
    border-color: color-mix(in srgb, var(--siift-mid-accent) 55%, transparent);
}

:is(.dark .proj-morph-glass, .proj-morph-glass .morph-night)
    .glass-action-card.glass-action-card--accent:hover:not(:disabled) {
    background: var(--glass-sheen),
        color-mix(in srgb, var(--glass-topic-tint) 38%, var(--glass-bg-strong));
    border-color: color-mix(in srgb, var(--siift-mid-accent) 45%, transparent);
}

/* 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="dropdown-menu-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-share-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-auth-modal].glass-modal::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,
    html[data-project-workspace-theme] [data-share-panel] .glass-panel::after,
    html[data-project-workspace-theme] [data-share-panel] [data-member-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;
    }
}