:root {
    --plans-bg: linear-gradient(180deg, #020617 0%, #040a19 55%, #030712 100%);
    --plans-bg-solid: #020617; /* For Safari safe areas */
    --plans-bg-overlay:
        radial-gradient(circle at 12% 8%, rgba(59, 130, 246, 0.18), transparent 58%),
        radial-gradient(circle at 82% 0%, rgba(14, 165, 233, 0.14), transparent 62%),
        radial-gradient(circle at 85% 78%, rgba(2, 6, 23, 0.8), transparent 55%);
    --plans-surface: #090c19;
    --plans-panel: #0d1122;
    --plans-panel-alt: #11162a;
    --plans-panel-soft: #080a14;
    --plans-border: rgba(255, 255, 255, 0.08);
    --plans-border-strong: rgba(255, 255, 255, 0.16);
    --plans-text: #f6f7ff;
    --plans-text-dark: #0c1324;
    --plans-muted: rgba(246, 247, 255, 0.64);
    --plans-label: rgba(246, 247, 255, 0.45);
    --plans-accent: #ffc955;
    --plans-accent-hot: #ff9d4d;
    --plans-success: #7efad1;
    --plans-surface-light: #ffffff;
    --plans-surface-muted: #f6f8ff;
    --plans-radius-sm: 12px;
    --plans-radius-md: 18px;
    --plans-radius-lg: 28px;
    --plans-font: "Space Grotesk", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --plans-transition: 240ms cubic-bezier(0.19, 1, 0.22, 1);
    --plans-shadow-card: 0 30px 60px rgba(0, 0, 0, 0.55);
    --plans-shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.4);
    --plans-sticky-offset: clamp(0.05rem, 0.5vw, 0.4rem);
    --plans-scroll-track: rgba(255, 255, 255, 0.08);
    --plans-scroll-thumb: rgba(100, 130, 180, 0.4);
    --plans-scroll-thumb-border: transparent;
    --plans-viewer-gradient:
        radial-gradient(circle at 18% 14%, rgba(79, 139, 255, 0.35), transparent 55%),
        radial-gradient(circle at 76% 0%, rgba(126, 250, 209, 0.28), transparent 52%),
        radial-gradient(circle at 90% 78%, rgba(255, 183, 110, 0.32), transparent 48%),
        linear-gradient(158deg, rgba(248, 250, 255, 0.18), rgba(12, 16, 34, 0.9));
    --plans-viewer-panel: rgba(14, 20, 38, 0.82);
    --plans-viewer-border: rgba(136, 178, 255, 0.48);
    --plans-viewer-shadow: 0 45px 90px rgba(5, 9, 24, 0.55);
    --reports-gradient:
        radial-gradient(circle at 10% 12%, rgba(79, 139, 255, 0.28), transparent 52%),
        radial-gradient(circle at 82% 8%, rgba(126, 250, 209, 0.25), transparent 48%),
        linear-gradient(150deg, rgba(8, 12, 26, 0.96), rgba(5, 8, 20, 0.95));
    --reports-panel: rgba(9, 14, 28, 0.78);
    --reports-panel-strong: rgba(13, 18, 36, 0.92);
    --reports-panel-highlight: rgba(255, 255, 255, 0.04);
    --reports-border: rgba(148, 163, 184, 0.28);
    --reports-separator: rgba(255, 255, 255, 0.12);
    --reports-chip-border: rgba(255, 255, 255, 0.22);
    --reports-chip-bg: rgba(255, 255, 255, 0.08);
    --reports-chip-text: rgba(245, 249, 255, 0.9);
    --reports-shadow: 0 45px 90px rgba(4, 6, 16, 0.5);
    --plans-header-bg: var(--color-bg-dark, #0f172a);
    --plans-header-panel: rgba(9, 13, 26, 0.94);
    --plans-header-gradient: linear-gradient(150deg, rgba(12, 17, 34, 0.96), rgba(5, 7, 16, 0.94));

    /* ── Semantic theme tokens (dark defaults) ─────────────────────── */
    --t-bg: #020617;
    --t-bg-gradient: linear-gradient(180deg, #020617 0%, #040a19 55%, #030712 100%);
    --t-surface: #090c19;
    --t-surface-raised: #0d1122;
    --t-surface-alt: #11162a;
    --t-surface-soft: #080a14;
    --t-surface-input: rgba(255, 255, 255, 0.06);
    --t-surface-hover: rgba(255, 255, 255, 0.08);
    --t-surface-active: rgba(255, 255, 255, 0.12);
    --t-text: #f6f7ff;
    --t-text-secondary: rgba(246, 247, 255, 0.64);
    --t-text-tertiary: rgba(246, 247, 255, 0.45);
    --t-text-inverted: #0c1324;
    --t-text-on-accent: #0c1324;
    --t-border: rgba(255, 255, 255, 0.08);
    --t-border-subtle: rgba(255, 255, 255, 0.04);
    --t-border-medium: rgba(255, 255, 255, 0.12);
    --t-border-strong: rgba(255, 255, 255, 0.16);
    --t-border-accent: rgba(255, 255, 255, 0.22);
    --t-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --t-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --t-shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.55);
    --t-shadow-xl: 0 45px 90px rgba(0, 0, 0, 0.55);
    --t-overlay: rgba(0, 0, 0, 0.5);
    --t-overlay-heavy: rgba(0, 0, 0, 0.7);
    --t-accent: #ffc955;
    --t-accent-hot: #ff9d4d;
    --t-success: #7efad1;
    --t-success-text: #7efad1;
    --t-error: #f87171;
    --t-error-bg: rgba(248, 113, 113, 0.12);
    --t-warning: #fbbf24;
    --t-info: #60a5fa;
    --t-info-text: #93c5fd;
    --t-link: #5b9cf4;
    --t-link-hover: #7eb8ff;
    --t-code-bg: rgba(255, 255, 255, 0.06);
    --t-scrollbar-track: rgba(255, 255, 255, 0.08);
    --t-scrollbar-thumb: rgba(100, 130, 180, 0.4);
    --t-badge-bg: rgba(255, 255, 255, 0.1);
    --t-badge-text: rgba(246, 247, 255, 0.85);
    --t-skeleton: rgba(255, 255, 255, 0.06);
    --t-skeleton-shine: rgba(255, 255, 255, 0.1);
    --t-tooltip-bg: #1e293b;
    --t-tooltip-text: #f6f7ff;
    --t-focus-ring: rgba(59, 130, 246, 0.5);
    --t-btn-primary-bg: #2563eb;
    --t-btn-primary-text: #ffffff;
    --t-btn-primary-hover: #1d4ed8;
    --t-btn-ghost-bg: transparent;
    --t-btn-ghost-text: rgba(246, 247, 255, 0.7);
    --t-btn-ghost-hover: rgba(255, 255, 255, 0.08);
    --t-header-bg: #0f172a;
    --t-header-border: rgba(255, 255, 255, 0.08);
    --t-header-text: #ffffff;
    --t-header-link: rgba(255, 255, 255, 0.8);
    --t-header-link-hover: #ffffff;
    --t-tab-bg: transparent;
    --t-tab-text: rgba(246, 247, 255, 0.55);
    --t-tab-active-bg: rgba(255, 255, 255, 0.1);
    --t-tab-active-text: #ffffff;
    --t-tab-hover-bg: rgba(255, 255, 255, 0.06);
    --t-chat-bubble-user: rgba(37, 99, 235, 0.18);
    --t-chat-bubble-ai: rgba(255, 255, 255, 0.04);
    --t-chat-input-bg: rgba(255, 255, 255, 0.06);
    --t-chat-input-border: rgba(255, 255, 255, 0.12);
    --t-chat-input-text: #f6f7ff;
    --t-viewer-bg: rgba(14, 20, 38, 0.82);
    --t-viewer-border: rgba(136, 178, 255, 0.48);
    --plans-session-card-offset: clamp(-1.4rem, -0.85rem, -0.1rem);
    --plans-session-card-bottom-gap: clamp(0.6rem, 1vh, 1.4rem);
    --plans-session-available-height: calc(100vh - var(--app-header-height, 56px));
    --plans-session-bottom-buffer: clamp(2.3rem, 4vh, 4.4rem);
    --plans-sticky-header-gap: clamp(-0.35rem, 0.25vw, 0.65rem);
    --plans-mobile-drawer-offset: calc(var(--app-header-height, 56px) + clamp(0.3rem, 1vh, 0.85rem));
    --plans-chat-bottom-adjust: clamp(0.9rem, 1.9vh, 2.4rem);
    --plans-chat-top-gap: clamp(-0.85rem, -0.4rem, 0rem);
    --plans-chat-top-lift: 0rem;
    --plans-viewer-height-reduction: clamp(2.9rem, 7vh, 7.8rem);
    --plans-chat-height-reduction: clamp(1.2rem, 3.2vh, 4.2rem);
    --plans-viewer-max-height: calc(var(--plans-session-available-height, 100vh) - var(--plans-session-card-offset, 1rem) - var(--plans-session-bottom-buffer, 6rem) - var(--plans-viewer-height-reduction, 0));
    --plans-chat-max-height: calc(var(--plans-session-available-height, 100vh) - var(--plans-session-card-offset, 1rem) - var(--plans-session-bottom-buffer, 6rem) - var(--plans-chat-bottom-adjust, 2rem) - var(--plans-chat-height-reduction, 0));
    --plans-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --plans-chat-toolbar-lift: clamp(2.8rem, 4.2vh, 4.9rem);
    --plans-left-toolbar-lift: var(--plans-chat-toolbar-lift, clamp(2.8rem, 4.2vh, 4.9rem));
    --plans-left-safe-bottom: calc(var(--plans-left-toolbar-lift, 0px) + max(var(--plans-safe-area-bottom, 0px), 0px));
    --plans-chat-safe-bottom: calc(
        clamp(2.4rem, 3.5vh, 4.5rem) + var(--plans-chat-toolbar-lift, 0px) + max(var(--plans-safe-area-bottom, 0px), 0px)
    );
    --plans-mobile-input-height: 76px;
    --plans-mobile-button-size: 44px;
    --plans-mobile-input-safe-area: calc(var(--plans-mobile-input-height, 76px) + 32px);
    --plans-mobile-keyboard-offset: 0px;
    --plans-mobile-input-lift: 0px;
}

/* ══════════════════════════════════════════════════════════════════════
   LIGHT THEME — override semantic tokens when [data-theme="light"]
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="light"],
[data-theme="light"] body.plans-body {
    --plans-bg: linear-gradient(180deg, #f0f4f8 0%, #e8ecf1 55%, #f5f7fa 100%);
    --plans-bg-solid: #f0f4f8;
    --plans-bg-overlay:
        radial-gradient(circle at 12% 8%, rgba(59, 130, 246, 0.06), transparent 58%),
        radial-gradient(circle at 82% 0%, rgba(14, 165, 233, 0.05), transparent 62%),
        radial-gradient(circle at 85% 78%, rgba(226, 232, 240, 0.5), transparent 55%);
    --plans-surface: #ffffff;
    --plans-panel: #ffffff;
    --plans-panel-alt: #f8fafc;
    --plans-panel-soft: #f1f5f9;
    --plans-border: rgba(0, 0, 0, 0.08);
    --plans-border-strong: rgba(0, 0, 0, 0.16);
    --plans-text: #1e293b;
    --plans-text-dark: #0f172a;
    --plans-muted: rgba(30, 41, 59, 0.64);
    --plans-label: rgba(30, 41, 59, 0.50);
    --plans-accent: #d97706;
    --plans-accent-hot: #ea580c;
    --plans-success: #059669;
    --plans-surface-light: #ffffff;
    --plans-surface-muted: #f8fafc;
    --plans-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
    --plans-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
    --plans-scroll-track: rgba(0, 0, 0, 0.05);
    --plans-scroll-thumb: rgba(100, 116, 139, 0.35);
    --plans-viewer-gradient:
        radial-gradient(circle at 18% 14%, rgba(59, 130, 246, 0.08), transparent 55%),
        radial-gradient(circle at 76% 0%, rgba(16, 185, 129, 0.06), transparent 52%),
        radial-gradient(circle at 90% 78%, rgba(249, 115, 22, 0.06), transparent 48%),
        linear-gradient(158deg, rgba(248, 250, 255, 0.6), rgba(241, 245, 249, 0.95));
    --plans-viewer-panel: rgba(255, 255, 255, 0.92);
    --plans-viewer-border: rgba(59, 130, 246, 0.25);
    --plans-viewer-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --reports-gradient:
        radial-gradient(circle at 10% 12%, rgba(59, 130, 246, 0.06), transparent 52%),
        radial-gradient(circle at 82% 8%, rgba(16, 185, 129, 0.06), transparent 48%),
        linear-gradient(150deg, rgba(248, 250, 255, 0.95), rgba(241, 245, 249, 0.97));
    --reports-panel: rgba(255, 255, 255, 0.85);
    --reports-panel-strong: rgba(255, 255, 255, 0.95);
    --reports-panel-highlight: rgba(0, 0, 0, 0.03);
    --reports-border: rgba(0, 0, 0, 0.12);
    --reports-separator: rgba(0, 0, 0, 0.08);
    --reports-chip-border: rgba(0, 0, 0, 0.12);
    --reports-chip-bg: rgba(0, 0, 0, 0.04);
    --reports-chip-text: #334155;
    --reports-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    --plans-header-bg: #ffffff;
    --plans-header-panel: rgba(255, 255, 255, 0.96);
    --plans-header-gradient: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));

    /* Semantic tokens — light */
    --t-bg: #f0f4f8;
    --t-bg-gradient: linear-gradient(180deg, #f0f4f8 0%, #e8ecf1 55%, #f5f7fa 100%);
    --t-surface: #ffffff;
    --t-surface-raised: #ffffff;
    --t-surface-alt: #f8fafc;
    --t-surface-soft: #f1f5f9;
    --t-surface-input: rgba(0, 0, 0, 0.04);
    --t-surface-hover: rgba(0, 0, 0, 0.04);
    --t-surface-active: rgba(0, 0, 0, 0.08);
    --t-text: #1e293b;
    --t-text-secondary: #475569;
    --t-text-tertiary: #94a3b8;
    --t-text-inverted: #ffffff;
    --t-text-on-accent: #ffffff;
    --t-border: rgba(0, 0, 0, 0.08);
    --t-border-subtle: rgba(0, 0, 0, 0.04);
    --t-border-medium: rgba(0, 0, 0, 0.12);
    --t-border-strong: rgba(0, 0, 0, 0.16);
    --t-border-accent: rgba(0, 0, 0, 0.12);
    --t-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --t-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --t-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --t-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.12);
    --t-overlay: rgba(0, 0, 0, 0.3);
    --t-overlay-heavy: rgba(0, 0, 0, 0.5);
    --t-accent: #d97706;
    --t-accent-hot: #ea580c;
    --t-success: #059669;
    --t-success-text: #047857;
    --t-error: #dc2626;
    --t-error-bg: rgba(220, 38, 38, 0.08);
    --t-warning: #d97706;
    --t-info: #2563eb;
    --t-info-text: #1d4ed8;
    --t-link: #2563eb;
    --t-link-hover: #1d4ed8;
    --t-code-bg: rgba(0, 0, 0, 0.04);
    --t-scrollbar-track: rgba(0, 0, 0, 0.05);
    --t-scrollbar-thumb: rgba(100, 116, 139, 0.35);
    --t-badge-bg: rgba(0, 0, 0, 0.06);
    --t-badge-text: #475569;
    --t-skeleton: rgba(0, 0, 0, 0.06);
    --t-skeleton-shine: rgba(0, 0, 0, 0.1);
    --t-tooltip-bg: #1e293b;
    --t-tooltip-text: #f6f7ff;
    --t-focus-ring: rgba(59, 130, 246, 0.4);
    --t-btn-primary-bg: #2563eb;
    --t-btn-primary-text: #ffffff;
    --t-btn-primary-hover: #1d4ed8;
    --t-btn-ghost-bg: transparent;
    --t-btn-ghost-text: #475569;
    --t-btn-ghost-hover: rgba(0, 0, 0, 0.06);
    --t-header-bg: #ffffff;
    --t-header-border: rgba(0, 0, 0, 0.08);
    --t-header-text: #1e293b;
    --t-header-link: #475569;
    --t-header-link-hover: #1e293b;
    --t-tab-bg: transparent;
    --t-tab-text: #64748b;
    --t-tab-active-bg: #ffffff;
    --t-tab-active-text: #1e293b;
    --t-tab-hover-bg: rgba(0, 0, 0, 0.04);
    --t-chat-bubble-user: rgba(37, 99, 235, 0.08);
    --t-chat-bubble-ai: rgba(0, 0, 0, 0.02);
    --t-chat-input-bg: #ffffff;
    --t-chat-input-border: rgba(0, 0, 0, 0.12);
    --t-chat-input-text: #1e293b;
    --t-viewer-bg: rgba(255, 255, 255, 0.92);
    --t-viewer-border: rgba(59, 130, 246, 0.25);
}

/* Light theme: Safari safe area */
[data-theme="light"] html:has(body.plans-body),
html[data-theme="light"]:has(body.plans-body) {
    background-color: #f0f4f8;
}

/* Light theme body text */
[data-theme="light"] body.plans-body,
html[data-theme="light"] body.plans-body {
    color: var(--plans-text);
}

/* ── Light theme: DocBuilder overrides ─────────────────────────────────── */
/* Card container — override the dark gradient from .plans-card */
[data-theme="light"] .plans-docbuilder-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .docbuilder-card-header {
    background: #ffffff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .docbuilder-card-title {
    color: #1e293b;
}
[data-theme="light"] .docbuilder-sidebar {
    background: #f8fafc;
    border-right-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .docbuilder-sidebar-title {
    color: #1e293b;
}
[data-theme="light"] .docbuilder-sidebar-label {
    color: #64748b;
}
[data-theme="light"] .docbuilder-sidebar-tpl-item {
    color: #334155;
}
[data-theme="light"] .docbuilder-sidebar-tpl-item:hover {
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .docbuilder-sidebar-tpl-item.is-active {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}
[data-theme="light"] .docbuilder-sidebar-saved-item {
    color: #334155;
}
[data-theme="light"] .docbuilder-sidebar-saved-item:hover {
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .docbuilder-sidebar-saved-item.is-active {
    background: rgba(37, 99, 235, 0.06);
    color: #1d4ed8;
}
[data-theme="light"] .docbuilder-sidebar-empty {
    color: #94a3b8;
}
[data-theme="light"] .docbuilder-saved-owner {
    color: #94a3b8;
}
[data-theme="light"] .docbuilder-new-btn {
    border-color: rgba(37, 99, 235, 0.3);
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}
[data-theme="light"] .docbuilder-new-btn:hover {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.45);
}
/* Main document area */
[data-theme="light"] .docbuilder-main {
    background: #ffffff;
}
[data-theme="light"] .docbuilder-body {
    background: #f1f5f9;
}
[data-theme="light"] .docbuilder-page-inner {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .docbuilder-doc-header-body {
    background: #ffffff;
    border-bottom-color: var(--doc-accent, #d4a017);
}
[data-theme="light"] .docbuilder-empty-state {
    opacity: 0.7;
}
[data-theme="light"] .docbuilder-empty-title {
    color: #1e293b;
}
[data-theme="light"] .docbuilder-empty-text {
    color: #64748b;
}
/* DocBuilder field labels */
[data-theme="light"] .docbuilder-field-label {
    color: #0f172a;
}
[data-theme="light"] .docbuilder-field-bold .docbuilder-field-label {
    color: #000000;
}
/* Buttons */
[data-theme="light"] .docbuilder-export-btn,
[data-theme="light"] .docbuilder-save-btn,
[data-theme="light"] .docbuilder-send-viewer-btn,
[data-theme="light"] .docbuilder-accent-btn,
[data-theme="light"] .docbuilder-clear-btn {
    border-color: #e2e8f0;
    background: #ffffff;
    color: #475569;
}
[data-theme="light"] .docbuilder-export-btn:hover,
[data-theme="light"] .docbuilder-save-btn:hover,
[data-theme="light"] .docbuilder-send-viewer-btn:hover,
[data-theme="light"] .docbuilder-accent-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}
[data-theme="light"] .docbuilder-clear-btn:hover {
    background: #fef2f2;
    border-color: rgba(220, 38, 38, 0.3);
    color: #dc2626;
}
[data-theme="light"] .docbuilder-back-btn {
    background: rgba(0, 0, 0, 0.04);
    color: #475569;
}
[data-theme="light"] .docbuilder-back-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .docbuilder-saved-delete {
    color: #94a3b8;
}
[data-theme="light"] .docbuilder-saved-delete:hover {
    color: #dc2626;
}

/* ── Light theme: Chat input ──────────────────────────────────────────── */
[data-theme="light"] .plans-chat-input-shell {
    background: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.1);
}
[data-theme="light"] .plans-chat-input {
    color: #1e293b;
}
[data-theme="light"] .plans-chat-input::placeholder {
    color: #94a3b8;
}
[data-theme="light"] .plans-chat-send-btn {
    background: #3b82f6;
    color: #ffffff;
}
[data-theme="light"] .plans-chat-send-btn:hover {
    background: #2563eb;
}
[data-theme="light"] .plans-chat-voice-btn {
    color: #3b82f6;
    background: transparent;
    border-color: rgba(59, 130, 246, 0.2);
}
[data-theme="light"] .plans-chat-voice-btn:hover {
    background: rgba(59, 130, 246, 0.06);
}
[data-theme="light"] .plans-chat-voice-btn svg,
[data-theme="light"] .plans-chat-voice-btn path {
    fill: #3b82f6;
    stroke: #3b82f6;
    color: #3b82f6;
}
[data-theme="light"] .plans-chat-options-toggle {
    color: #3b82f6;
    background: transparent;
}
[data-theme="light"] .plans-chat-options-toggle:hover {
    background: rgba(59, 130, 246, 0.06);
}
[data-theme="light"] .plans-chat-options-toggle svg {
    color: #3b82f6;
}
/* Plus button in chat */
[data-theme="light"] .plans-chat-options-btn {
    color: #3b82f6;
}
[data-theme="light"] .plans-chat-options-plus-icon {
    color: #3b82f6;
}
[data-theme="light"] .plans-chat-options-btn.is-open {
    background: rgba(37, 99, 235, 0.1);
}
[data-theme="light"] .plans-chat-options-btn.is-open .plans-chat-options-plus-icon {
    color: #2563eb;
}
/* ── Light theme: Conversations menu ──────────────────────────────────── */
[data-theme="light"] .plans-chat-conversations-menu {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .plans-chat-conversations-divider {
    background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .plans-chat-conversations-menu-label {
    color: #64748b;
}
[data-theme="light"] .plans-chat-conversations-new {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.06);
    color: #2563eb;
}
[data-theme="light"] .plans-chat-conversations-new:hover,
[data-theme="light"] .plans-chat-conversations-new:focus-visible {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.5);
}
[data-theme="light"] .plans-chat-conversations-item {
    color: #475569;
}
[data-theme="light"] .plans-chat-conversations-item:hover,
[data-theme="light"] .plans-chat-conversations-item:focus-visible {
    background: rgba(59, 130, 246, 0.06);
}
[data-theme="light"] .plans-chat-conversations-item.is-active {
    background: rgba(59, 130, 246, 0.08);
}
[data-theme="light"] .plans-chat-conversations-item.is-active .plans-chat-conversations-item-icon {
    color: #2563eb;
}
[data-theme="light"] .plans-chat-conversations-item-title {
    color: #1e293b;
}
[data-theme="light"] .plans-chat-conversations-item.is-active .plans-chat-conversations-item-title {
    color: #2563eb;
}
[data-theme="light"] .plans-chat-conversations-item-preview {
    color: rgba(71, 85, 105, 0.6);
}
[data-theme="light"] .plans-chat-conversations-item-time {
    color: rgba(100, 116, 139, 0.5);
}
[data-theme="light"] .plans-chat-conversations-item-count {
    color: #475569;
    background-color: #f1f5f9;
}
[data-theme="light"] .plans-chat-conversations-item-delete svg {
    stroke: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .plans-chat-conversations-item-delete:hover {
    background: rgba(239, 68, 68, 0.1);
}
[data-theme="light"] .plans-chat-conversations-item-delete:hover svg {
    stroke: #dc2626;
}
[data-theme="light"] .plans-chat-conversations-empty {
    color: #94a3b8;
}
/* Chat options drawer */
[data-theme="light"] .plans-chat-options-drawer {
    background: #ffffff;
    border: 1px solid #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .plans-chat-options-item {
    color: #0f172a;
}
[data-theme="light"] .plans-chat-options-label {
    color: #0f172a;
}
/* Integrations panel */
[data-theme="light"] .plans-bridge-setup-panel {
    background: #ffffff;
    border: 1px solid #0f172a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .plans-bridge-setup-header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .plans-bridge-setup-header span[style*="color:#e2e8f0"] {
    color: #0f172a !important;
}
[data-theme="light"] .plans-integration-section {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .plans-integration-section-header span[style*="color:#e2e8f0"] {
    color: #0f172a !important;
}
[data-theme="light"] .plans-integration-section-header:hover {
    background-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .plans-chat-options-badge {
    color: #475569;
    background: rgba(0, 0, 0, 0.06);
}

/* ── Light theme: Workspace tabs ──────────────────────────────────────── */
[data-theme="light"] .plans-workspace-tab {
    color: #1e293b;
    border: 1px solid #3b82f6;
    background: #f1f5f9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .plans-workspace-tab:hover {
    border-color: #2563eb;
    background: #e2e8f0;
    color: #0f172a;
}
[data-theme="light"] .plans-workspace-tab.is-active {
    border-color: #2563eb;
    color: #0f172a;
    background: #dbeafe;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.18);
}
[data-theme="light"] .plans-workspace-tab.has-notification {
    border-color: rgba(220, 38, 38, 0.5);
    color: #1e293b;
}
[data-theme="light"] .plans-workspace-tab.has-notification::after {
    box-shadow: 0 0 0 3px #f0f4f8;
}
[data-theme="light"] .plans-workspace-tab-icon {
    opacity: 0.6;
}
[data-theme="light"] .plans-workspace-tab:hover .plans-workspace-tab-icon,
[data-theme="light"] .plans-workspace-tab.is-active .plans-workspace-tab-icon {
    opacity: 0.9;
}
[data-theme="light"] .plans-workspace-tab-meta {
    color: #64748b;
}
[data-theme="light"] .plans-workspace-tab.is-active .plans-workspace-tab-meta {
    color: #1e293b;
}
[data-theme="light"] .plans-workspace-tab-badge {
    color: #ffffff;
}

/* ── Light theme: Chat download menu ─────────────────────────────────── */
[data-theme="light"] .plans-chat-download-menu {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .plans-chat-download-option {
    color: #1e293b;
}
[data-theme="light"] .plans-chat-download-option:hover {
    background: rgba(59, 130, 246, 0.08);
    color: #0f172a;
}
[data-theme="light"] .plans-chat-download-option:active {
    background: rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .plans-chat-download-option svg {
    opacity: 0.6;
}
[data-theme="light"] .plans-chat-download-option:hover svg {
    opacity: 0.85;
}

/* ── Tool Activity Steps — Light Mode ───────────────────── */
[data-theme="light"] .plans-tool-step::before {
    background: #93c5fd;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .plans-tool-step-done::before {
    background: #86efac;
    box-shadow: 0 0 8px rgba(22, 163, 74, 0.12);
}
[data-theme="light"] .plans-tool-step-icon {
    background: #ffffff;
    border: 2.5px solid #93c5fd;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.18), 0 2px 6px rgba(59, 130, 246, 0.1);
}
[data-theme="light"] .plans-tool-step-running .plans-tool-step-icon {
    border-color: #3b82f6;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.35), 0 0 8px rgba(59, 130, 246, 0.18);
}
[data-theme="light"] .plans-tool-step-done .plans-tool-step-icon {
    border-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.18), 0 2px 6px rgba(34, 197, 94, 0.1);
}
[data-theme="light"] .plans-tool-step-done .plans-tool-step-icon::after {
    color: #16a34a;
    font-weight: 800;
}
[data-theme="light"] .plans-tool-step-running {
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.05) 25%, rgba(59, 130, 246, 0.10) 50%, rgba(59, 130, 246, 0.05) 75%, transparent 100%);
    background-size: 200% 100%;
    border-radius: 10px;
}
[data-theme="light"] .plans-tool-step-header:hover {
    background: rgba(59, 130, 246, 0.07);
    border-radius: 8px;
}
[data-theme="light"] .plans-tool-step-chevron {
    color: #93c5fd;
}
[data-theme="light"] .plans-tool-step-expanded .plans-tool-step-chevron {
    color: #2563eb;
}
[data-theme="light"] .plans-tool-step-label {
    color: #1e293b;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}
[data-theme="light"] .plans-tool-step-running .plans-tool-step-label {
    color: #0f172a;
}
[data-theme="light"] .plans-tool-step-done .plans-tool-step-label {
    color: #475569;
}
[data-theme="light"] .plans-tool-step-detail {
    color: #475569;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: -0.005em;
}
[data-theme="light"] .plans-tool-step-running .plans-tool-step-detail {
    color: #2563eb;
    font-weight: 500;
}
[data-theme="light"] .plans-tool-step-done .plans-tool-step-detail {
    color: #64748b;
}
[data-theme="light"] .plans-tool-step-body {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
[data-theme="light"] .plans-tool-step-arg {
    color: #1e293b;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
[data-theme="light"] .plans-tool-step-arg-key {
    color: #2563eb;
    font-weight: 600;
}
[data-theme="light"] .plans-tool-step-result {
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
    color: #1e293b;
    border-top: 1px solid #bfdbfe;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
[data-theme="light"] .plans-tool-step-result-desktop {
    border-left: 3px solid #22c55e;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.08) 0%, rgba(240, 253, 244, 0.6) 100%);
    padding: 10px 12px;
    border-radius: 8px;
}
[data-theme="light"] .plans-tool-step-result-label {
    color: #475569;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-size: 0.68rem;
}
[data-theme="light"] .plans-tool-step-result-success {
    color: #15803d;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 3px 10px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 6px;
    display: inline-block;
}
[data-theme="light"] .plans-tool-activity-summary {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.8) 0%, rgba(219, 234, 254, 0.4) 100%);
    border: 1px solid #93c5fd;
    color: #1e40af;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.08);
}
[data-theme="light"] .plans-tool-activity-summary:hover {
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.9) 0%, rgba(191, 219, 254, 0.5) 100%);
    border-color: #60a5fa;
    color: #1e3a8a;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}

/* ── Spinner & Icon Pulse — Light Mode ──────────────────── */
[data-theme="light"] .plans-tool-step-running.plans-tool-step-latest .plans-tool-step-icon .tool-icon-spinner {
    border-color: rgba(59, 130, 246, 0.2);
    border-top-color: #2563eb;
    border-width: 2.5px;
}
[data-theme="light"] .plans-tool-step-running.plans-tool-step-latest .plans-tool-step-icon {
    animation-name: plans-tool-icon-pulse-light;
}
@keyframes plans-tool-icon-pulse-light {
    0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.2), 0 0 3px rgba(59, 130, 246, 0.1); }
    50%      { box-shadow: 0 0 22px rgba(59, 130, 246, 0.4), 0 0 8px rgba(59, 130, 246, 0.2); }
}
[data-theme="light"] .tool-icon-emoji {
    filter: none;
}

/* ── Stop Button — Light Mode ───────────────────────────── */
[data-theme="light"] .plans-chat-stop-btn {
    border-color: rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1d4ed8;
}
[data-theme="light"] .plans-chat-stop-btn:not(:disabled):hover,
[data-theme="light"] .plans-chat-stop-btn:not(:disabled):focus-visible {
    border-color: rgba(59, 130, 246, 0.7);
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
}

/* ── Typing Indicator — Light Mode ──────────────────────── */
[data-theme="light"] .plans-chat-typing-dot {
    background: rgba(30, 41, 59, 0.45);
}

/* ── Thinking Loader — Light Mode ───────────────────────── */
[data-theme="light"] .plans-chat-thinking-loader .thinking-text {
    color: rgba(15, 23, 42, 0.55);
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.45) 40%, rgba(37, 99, 235, 0.85) 50%, rgba(15, 23, 42, 0.45) 60%, rgba(15, 23, 42, 0.45) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .plans-chat-thinking-loader .thinking-dots span {
    background: #1e40af;
}

/* ── Message Reasoning Bubbles — Light Mode ─────────────── */
[data-theme="light"] .plans-chat-message-reasoning {
    border: 1px solid #93c5fd;
    background: rgba(239, 246, 255, 0.6);
    color: #0f172a;
}
[data-theme="light"] .plans-chat-message-reasoning[data-reasoning-state="completed"] {
    border: 1px solid #86efac;
    background: rgba(220, 252, 231, 0.5);
    color: #0f172a;
}
[data-theme="light"] .plans-chat-message-reasoning[data-reasoning-state="failed"] {
    border: 1px solid #fca5a5;
    background: rgba(254, 226, 226, 0.5);
    color: #0f172a;
}
[data-theme="light"] .plans-reasoning-inline-dot:nth-child(1) {
    background: rgba(37, 99, 235, 0.85);
}
[data-theme="light"] .plans-reasoning-inline-dot:nth-child(2) {
    background: rgba(37, 99, 235, 0.65);
}
[data-theme="light"] .plans-reasoning-inline-dot:nth-child(3) {
    background: rgba(37, 99, 235, 0.45);
}

/* ── Reasoning (gchat) — Light Mode ─────────────────────── */
[data-theme="light"] .gchat-reasoning {
    background: rgba(239, 246, 255, 0.6);
    border: 1px solid #93c5fd;
    color: #0f172a;
}
[data-theme="light"] .gchat-reasoning-header {
    color: #1e40af;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
[data-theme="light"] .gchat-reasoning-dot {
    background: rgba(37, 99, 235, 0.7);
}
[data-theme="light"] .gchat-reasoning-text {
    color: #0f172a;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
[data-theme="light"] .gchat-reasoning-text strong,
[data-theme="light"] .gchat-reasoning-text b {
    color: #0f172a;
    font-weight: 700;
}
/* Collapsed: plain text label, no background — hover adds subtle bg */
[data-theme="light"] .gchat-reasoning-collapsed {
    background: transparent;
    border: none;
}
[data-theme="light"] .gchat-reasoning-collapsed .gchat-reasoning-header {
    color: #475569;
    background: transparent;
}
[data-theme="light"] .gchat-reasoning-collapsed:hover {
    background: transparent;
}
[data-theme="light"] .gchat-reasoning-collapsed:hover .gchat-reasoning-header {
    color: #2563eb;
}
/* Expanded: blue border card */
[data-theme="light"] .gchat-reasoning-expanded {
    background: rgba(239, 246, 255, 0.5);
    border: 1px solid #93c5fd;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}
[data-theme="light"] .gchat-reasoning-expanded .gchat-reasoning-text {
    color: #1e293b;
}
[data-theme="light"] .gchat-reasoning-expanded .gchat-reasoning-header {
    color: #1e40af;
}

/* ── Reasoning Steps — Light Mode ─────────────────────────── */
[data-theme="light"] .gchat-reasoning-step-label {
    color: #475569 !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-weight: 500 !important;
}
[data-theme="light"] .gchat-reasoning-step-text {
    color: #0f172a;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 0.8rem;
    line-height: 1.6;
}
[data-theme="light"] .gchat-reasoning-step-text strong,
[data-theme="light"] .gchat-reasoning-step-text b {
    display: block;
    color: #1e40af;
    font-weight: 700;
    margin-top: 0.45em;
    margin-bottom: 0.15em;
    font-size: 0.82rem;
}
[data-theme="light"] .gchat-reasoning-step-done .gchat-reasoning-step-label {
    color: #64748b !important;
}
[data-theme="light"] .gchat-reasoning-step-done:hover .gchat-reasoning-step-label {
    color: #2563eb !important;
}

/* ── HR Separator — Light Mode ──────────────────────────── */
[data-theme="light"] .plans-chat-message-assistant hr {
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    opacity: 0.5;
    margin: 1.25rem 0;
}

/* ── Inline Code & Links — Light Mode ───────────────────── */
[data-theme="light"] .plans-chat-message-assistant code {
    color: #1e40af;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
}
[data-theme="light"] .plans-chat-message-assistant a {
    color: #2563eb;
}
[data-theme="light"] .plans-chat-message-assistant a:hover,
[data-theme="light"] .plans-chat-message-assistant a:focus-visible {
    color: #1d4ed8;
}
[data-theme="light"] .plans-chat-message-assistant a:visited {
    color: #6d28d9;
}
[data-theme="light"] .plans-chat-message-assistant em,
[data-theme="light"] .plans-chat-message-assistant i {
    color: #334155;
}
[data-theme="light"] .plans-chat-message-assistant blockquote {
    color: #0f172a;
    background: rgba(59, 130, 246, 0.06);
    border-left-color: #3b82f6;
}

/* ── Deep Research Sources — Light Mode ─────────────────── */
[data-theme="light"] .plans-deep-research-sources {
    border-top-color: rgba(59, 130, 246, 0.18);
}
[data-theme="light"] .plans-deep-research-source {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}
[data-theme="light"] .plans-deep-research-source:hover {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.35);
}

/* ── Blueprint Toolbox — Light Mode ─────────────────────── */
[data-theme="light"] .plans-toolbox-tab-btn {
    background: #f1f5f9;
    border: 1px solid #3b82f6;
    color: #0f172a;
}
[data-theme="light"] .plans-toolbox-tab-btn:hover,
[data-theme="light"] .plans-toolbox-tab-btn:focus-visible {
    background: #e2e8f0;
    border-color: #2563eb;
    color: #000000;
}
[data-theme="light"] .plans-toolbox-toggle {
    background: #f1f5f9;
    border: 1px solid #0f172a;
    color: #0f172a;
}
[data-theme="light"] .plans-toolbox-toggle:hover,
[data-theme="light"] .plans-toolbox-toggle:focus-visible {
    background: #e2e8f0;
    border-color: #000000;
    color: #000000;
}
[data-theme="light"] .plans-toolbox-scrim {
    background: rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .plans-toolbox {
    background: #ffffff;
    border: 1px solid #0f172a;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .plans-toolbox-title {
    color: #0f172a;
    text-shadow: none;
}
[data-theme="light"] .plans-toolbox-subtitle {
    color: #475569;
}
[data-theme="light"] .plans-toolbox-close {
    background: #f1f5f9;
    border-color: #0f172a;
    color: #0f172a;
}
[data-theme="light"] .plans-toolbox-close:hover,
[data-theme="light"] .plans-toolbox-close:focus-visible {
    background: #e2e8f0;
    border-color: #000000;
    color: #000000;
}
[data-theme="light"] .plans-toolbox-featured {
    border-color: #0f172a;
    background: #f8fafc;
}
[data-theme="light"] .plans-toolbox-featured-badge {
    background: #1e293b;
    color: #ffffff;
}
[data-theme="light"] .plans-toolbox-featured-title {
    color: #0f172a;
}
[data-theme="light"] .plans-toolbox-featured-copy {
    color: #334155;
}
[data-theme="light"] .toolbox-category {
    border-color: #0f172a;
    background: #f8fafc;
}
[data-theme="light"] .toolbox-category::before {
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .toolbox-category-header h3 {
    color: #0f172a;
}
[data-theme="light"] .toolbox-category-header p {
    color: #475569;
}
[data-theme="light"] .toolbox-prompt-btn {
    background: #ffffff;
    border-color: #0f172a;
    color: #0f172a;
}
[data-theme="light"] .toolbox-prompt-btn:hover,
[data-theme="light"] .toolbox-prompt-btn:focus-visible {
    background: #f1f5f9;
    border-color: #000000;
    color: #000000;
}
[data-theme="light"] .toolbox-prompt-btn--accent {
    background: linear-gradient(120deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.16));
    border-color: #0f172a;
}
[data-theme="light"] .toolbox-prompt-btn--accent:hover,
[data-theme="light"] .toolbox-prompt-btn--accent:focus-visible {
    background: linear-gradient(120deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.24));
    border-color: #000000;
}

/* ── Light theme: Landing page ─────────────────────────────────────────── */

/* Page background — subtle gradient like the session page */
[data-theme="light"] body.plans-body .app-main {
    background: linear-gradient(180deg, #dde3ec 0%, #e4e9f2 12%, #edf0f5 50%, #e4e9f2 100%);
}

/* Plans card (shared base for hero + vault) */
[data-theme="light"] .plans-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* Hero section — light gradient instead of dark */
[data-theme="light"] .plans-hero {
    background: linear-gradient(140deg, #ffffff 0%, #f8fafc 60%, #f0f4f8 100%);
    border-color: #e2e8f0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .plans-hero-title {
    color: #0f172a;
}
[data-theme="light"] .plans-hero-sublead {
    color: #3b82f6;
}
[data-theme="light"] .plans-hero-body {
    color: #475569;
}
[data-theme="light"] .plans-hero-matrix {
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .plans-hero-matrix-title {
    color: #3b82f6;
}
[data-theme="light"] .plans-icon-list {
    color: #1e293b;
}
[data-theme="light"] .plans-icon-list li {
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .plans-hero-footnote {
    color: #3b82f6;
}

/* Hero upload card */
[data-theme="light"] .plans-hero-upload-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #bfdbfe;
    box-shadow: 0 6px 28px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(0,0,0,0.04);
}

/* Upload panel */
[data-theme="light"] .plans-upload-panel {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: none;
    backdrop-filter: none;
}

/* Upload dropzone */
[data-theme="light"] .plans-upload-dropzone {
    background: #fafbfd;
    border: 2px dashed #93c5fd;
}
[data-theme="light"] .plans-upload-dropzone::after {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.06), transparent 70%);
}
[data-theme="light"] .plans-upload-dropzone:hover,
[data-theme="light"] .plans-upload-dropzone.drag-over {
    border-color: #2563eb;
    background: #f0f7ff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}
[data-theme="light"] .plans-upload-dropzone.has-file {
    border-color: #16a34a;
    background: #f0fdf4;
}

/* Upload icon */
[data-theme="light"] .plans-upload-icon {
    background-color: #eff6ff;
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}
[data-theme="light"] .plans-upload-icon::before,
[data-theme="light"] .plans-upload-icon::after {
    background: #3b82f6;
}

/* Upload text */
[data-theme="light"] .plans-upload-cta {
    color: #1e293b;
    font-weight: 600;
}
[data-theme="light"] .plans-upload-hint {
    color: #64748b;
}
[data-theme="light"] .plans-upload-trust-inline {
    color: #64748b;
}
[data-theme="light"] .plans-upload-trust-inline svg {
    opacity: 0.7;
}

/* Upload file ready */
[data-theme="light"] .plans-upload-file-ready {
    color: #0f172a;
}
[data-theme="light"] .plans-upload-file-name {
    color: #0f172a;
}
[data-theme="light"] .plans-upload-file-action {
    color: #2563eb;
}

/* Upload loader */
[data-theme="light"] .plans-upload-loader {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .plans-loader-step {
    color: #334155;
}
[data-theme="light"] .plans-loader-bytes {
    color: #64748b;
}
[data-theme="light"] .plans-loader-elapsed,
[data-theme="light"] .plans-loader-speed,
[data-theme="light"] .plans-loader-eta {
    color: #64748b;
}
[data-theme="light"] .plans-loader-percent {
    color: #0f172a;
}

/* Loader spinner — blue orbital rings for light mode */
[data-theme="light"] .plans-loader-wheel::before {
    border-color: #e2e8f0;
    border-top-color: #3b82f6;
    border-right-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}
[data-theme="light"] .plans-loader-wheel::after {
    border-color: #f1f5f9;
    border-bottom-color: #6366f1;
    border-left-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);
}
[data-theme="light"] .plans-loader-icon {
    background: radial-gradient(circle, #3b82f6 0%, rgba(59, 130, 246, 0.4) 100%);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.5), 0 0 32px rgba(59, 130, 246, 0.2);
}

/* Progress bar fill — blue gradient for light mode */
[data-theme="light"] .plans-loader-progress {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .plans-loader-progress-fill {
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd, #60a5fa, #3b82f6);
    background-size: 300% 100%;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4), 0 0 20px rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .plans-loader-progress-fill::after {
    background: radial-gradient(circle, #fff 20%, rgba(59, 130, 246, 0.7) 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.5);
}

/* Inline queue — light mode */
[data-theme="light"] .plans-inline-queue-header {
    color: #1e40af;
}
[data-theme="light"] .plans-inline-queue-count {
    background: #3b82f6;
    color: #fff;
}
[data-theme="light"] .plans-inline-queue-item {
    background-color: #f1f5f9;
    color: #0f172a;
}
[data-theme="light"] .plans-inline-queue-item-icon {
    background: #3b82f6;
    color: #fff;
}
[data-theme="light"] .plans-inline-chat-btn,
[data-theme="light"] .plans-inline-queue-actions .plans-btn-primary {
    background: linear-gradient(120deg, #f59e0b, #f97316) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}
[data-theme="light"] .plans-inline-chat-btn:hover,
[data-theme="light"] .plans-inline-queue-actions .plans-btn-primary:hover {
    background: linear-gradient(120deg, #d97706, #ea580c) !important;
}

/* Upload status */
[data-theme="light"] .plans-upload-status.error {
    color: #dc2626;
}

/* Project selector */
[data-theme="light"] .plans-project-label {
    color: #0f172a;
}
[data-theme="light"] .plans-project-label-text {
    color: #0f172a;
}
[data-theme="light"] .plans-project-select {
    background-color: #ffffff;
    border-color: #93c5fd;
    color: #0f172a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%230f172a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}
[data-theme="light"] .plans-project-select option {
    background: #ffffff;
    color: #0f172a;
}
[data-theme="light"] .plans-project-create-btn {
    background: #eff6ff;
    border-color: #2563eb;
    color: #2563eb;
}
[data-theme="light"] .plans-project-create-btn:hover {
    background: #dbeafe;
    border-color: #1d4ed8;
}
[data-theme="light"] .plans-project-helper {
    color: #64748b;
}

/* Project upload queue */
[data-theme="light"] .plans-project-queue {
    border-color: #e2e8f0;
    background: #fafbfd;
}
[data-theme="light"] .plans-project-queue-title {
    color: #0f172a;
}
[data-theme="light"] .plans-project-queue-hint {
    color: #64748b;
}

/* Create Project Modal — light mode */
[data-theme="light"] .plans-modal-backdrop {
    background: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .plans-modal-content {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .plans-modal-header {
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .plans-modal-title {
    color: #0f172a;
}
[data-theme="light"] .plans-modal-close {
    color: #94a3b8;
}
[data-theme="light"] .plans-modal-close:hover {
    color: #0f172a;
    background-color: #f1f5f9;
}
[data-theme="light"] .plans-modal-footer {
    border-top-color: #e2e8f0;
    background: #f8fafc;
}
[data-theme="light"] .plans-form-input,
[data-theme="light"] .plans-form-textarea {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}
[data-theme="light"] .plans-form-input:focus,
[data-theme="light"] .plans-form-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
[data-theme="light"] .plans-form-input::placeholder,
[data-theme="light"] .plans-form-textarea::placeholder {
    color: #94a3b8;
}
[data-theme="light"] .plans-form-label {
    color: #334155;
}
[data-theme="light"] .plans-form-hint {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.15);
    color: #475569;
}
[data-theme="light"] .plans-form-hint strong {
    color: #2563eb;
}
[data-theme="light"] .plans-modal-footer .plans-btn-primary {
    background: linear-gradient(120deg, #f59e0b, #f97316) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}
[data-theme="light"] .plans-modal-footer .plans-btn-primary:hover {
    background: linear-gradient(120deg, #d97706, #ea580c) !important;
}
[data-theme="light"] .plans-modal-footer .plans-btn-secondary {
    border-color: #cbd5e1;
    color: #475569;
    background: #ffffff;
}
[data-theme="light"] .plans-modal-footer .plans-btn-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

/* "Don't have plans?" nudge */
[data-theme="light"] .plans-no-plans-nudge {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
[data-theme="light"] .plans-no-plans-text {
    color: #1e3a5f;
    font-weight: 600;
}
[data-theme="light"] .plans-no-plans-btn {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}
[data-theme="light"] .plans-no-plans-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}
[data-theme="light"] .plans-no-plans-hint {
    color: #3b82f6;
}

/* Visitor result panel (login/signup CTA) */
[data-theme="light"] .plans-visitor-result {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .plans-visitor-result-eyebrow {
    color: #16a34a;
}
[data-theme="light"] .plans-visitor-result-title {
    color: #0f172a;
}
[data-theme="light"] .plans-visitor-result-meta {
    color: #334155;
}
[data-theme="light"] .plans-visitor-result-note {
    color: #64748b;
}

/* Viewer card */
[data-theme="light"] .plans-viewer-card {
    background: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
    margin-bottom: 2rem;
}
[data-theme="light"] .plans-viewer-card::after {
    display: none;
}
[data-theme="light"] .plans-viewer-header {
    border-bottom: 1.5px solid #3b82f6;
}
[data-theme="light"] .plans-viewer-stage {
    background: #ffffff !important;
    border-color: #e2e8f0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow-x: hidden;
}
[data-theme="light"] .plans-viewer-stage::-webkit-scrollbar {
    width: 6px;
    height: 0;
}
[data-theme="light"] .plans-viewer-stage::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}
[data-theme="light"] .plans-viewer-stage::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
[data-theme="light"] .plans-viewer-stage::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
[data-theme="light"] .plans-main-viewer {
    background: #ffffff !important;
    border-color: #e2e8f0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .plans-main-viewer::after {
    display: none;
}
[data-theme="light"] .plans-main-viewer::-webkit-scrollbar {
    width: 6px;
    height: 0;
}
[data-theme="light"] .plans-main-viewer::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}
[data-theme="light"] .plans-main-viewer::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
[data-theme="light"] .plans-main-viewer::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
[data-theme="light"] .plans-viewer-pdf-shell {
    background: #ffffff !important;
    border-color: #e2e8f0;
}
[data-theme="light"] .plans-viewer-pdf-frame {
    background: #f8fafc !important;
}
[data-theme="light"] .plans-viewer-body {
    background: #ffffff;
}
[data-theme="light"] .plans-plan-selector-btn {
    background: #ffffff;
    border-color: #3b82f6;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.08);
}
[data-theme="light"] .plans-plan-selector-btn:hover {
    background: #f8fafc;
    border-color: #2563eb;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
}
[data-theme="light"] .plans-plan-selector-btn:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
[data-theme="light"] .plans-plan-selector-btn[aria-expanded="true"] {
    border-color: #2563eb;
    background: #f0f7ff;
}
[data-theme="light"] .plans-plan-selector-arrow {
    color: #64748b;
}
[data-theme="light"] .plans-plan-selector-menu {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border: 1px solid #3b82f6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .plans-plan-selector-menu li {
    color: #1e293b;
}
[data-theme="light"] .plans-plan-selector-menu li:hover {
    background: rgba(59, 130, 246, 0.1);
}
[data-theme="light"] .plans-plan-selector-menu li.selected {
    background: rgba(59, 130, 246, 0.15);
    color: #1e40af;
}
[data-theme="light"] .plans-viewer-pdf-actions {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
[data-theme="light"] .plans-viewer-card.is-floating .plans-viewer-back-bar {
    background: #f8fafc;
}
[data-theme="light"] .plans-viewer-card.is-floating .plans-viewer-back-btn {
    background: #ffffff;
    border-color: #94a3b8;
    color: #0f172a;
}

/* Rotate hint — hidden on desktop; only relevant on mobile */
.plans-rotate-hint {
    display: none !important;
}

/* Vault card */
[data-theme="light"] .plans-vault-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #bfdbfe;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06), 0 1px 3px rgba(0,0,0,0.04);
}

/* Vault body */
[data-theme="light"] .plans-vault-body {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .plans-card-title {
    color: #0f172a;
}
[data-theme="light"] .plans-card-title-accent {
    color: #2563eb;
}
[data-theme="light"] .plans-card-subtitle {
    color: #475569;
}
[data-theme="light"] .plans-card-footer {
    color: #64748b;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 27px 27px;
}
[data-theme="light"] .plans-card-footer .brand-white {
    color: #1e3a5f;
}

/* Vault empty state */
[data-theme="light"] .plans-vault-empty {
    background: #ffffff;
    border-color: #bfdbfe;
    color: #64748b;
}

/* Vault project groups */
[data-theme="light"] .plans-vault-project-group {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .plans-vault-project-header {
    background: #f0f4f8;
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .plans-vault-project-title {
    color: #0f172a;
}
[data-theme="light"] .plans-vault-project-meta {
    color: #64748b;
}
[data-theme="light"] .plans-vault-project-badge {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}

/* Vault section headers (e.g. "Standalone Plans") */
[data-theme="light"] .plans-vault-section-title {
    color: #475569;
}
[data-theme="light"] .plans-vault-section-header::after {
    background-color: #e2e8f0;
}

/* Vault plan items */
[data-theme="light"] .plans-vault-card-item {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="light"] .plans-vault-card-item:hover {
    border-color: #93c5fd;
    background: #fafbff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
[data-theme="light"] .plans-vault-title {
    color: #0f172a;
}
[data-theme="light"] .plans-vault-meta {
    color: #64748b;
}
[data-theme="light"] .plans-vault-thumb {
    background: #f1f5f9;
    border-color: #e2e8f0;
}
[data-theme="light"] .plans-vault-delete {
    color: #dc2626;
}
[data-theme="light"] .plans-vault-delete:hover {
    color: #b91c1c;
}

/* Vault locked state */
[data-theme="light"] .plans-vault-locked {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .plans-vault-locked-copy {
    color: #475569;
}

/* Vault scrollbar */
[data-theme="light"] .plans-vault-grid::-webkit-scrollbar-track {
    background: #f1f5f9;
}
[data-theme="light"] .plans-vault-grid::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-color: #f1f5f9;
}

/* Landing page header — clean, no heavy border */
[data-theme="light"] body.plans-body.plans-landing-page .app-header {
    background: #ffffff;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] body.plans-body.plans-landing-page .app-nav-link {
    color: #334155;
}
[data-theme="light"] body.plans-body.plans-landing-page .app-nav-link:hover {
    color: #0f172a;
}
[data-theme="light"] body.plans-body.plans-landing-page .app-nav-dropdown-label {
    color: #334155;
}
[data-theme="light"] body.plans-body.plans-landing-page .plan-tier-fallback {
    color: #475569;
}

/* Billing banner */
[data-theme="light"] .plans-billing-banner {
    background: #eff6ff;
    color: #1e40af;
    border-color: #93c5fd;
}

/* Buttons — maintain readability in light mode */
[data-theme="light"] .plans-btn-secondary {
    border-color: #94a3b8;
    color: #0f172a;
    background: #ffffff;
}
[data-theme="light"] .plans-btn-secondary:hover {
    background: #f1f5f9;
    border-color: #64748b;
}

/* Mobile nav drawer — light mode */
[data-theme="light"] .plans-mobile-nav-backdrop {
    background: rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .plans-mobile-nav-panel {
    background: #ffffff;
    border-right-color: #e2e8f0;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .plans-mobile-nav-title {
    color: #334155;
}
[data-theme="light"] .plans-mobile-nav-close {
    border-color: #cbd5e1;
    background-color: #f1f5f9;
    color: #334155;
}
[data-theme="light"] .plans-mobile-nav-link {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    color: #334155;
}
[data-theme="light"] .plans-mobile-nav-link:hover,
[data-theme="light"] .plans-mobile-nav-link:focus-visible {
    border-color: #2563eb;
    color: #0f172a;
}
[data-theme="light"] .plans-mobile-nav-actions .plans-btn-secondary {
    color: #334155;
    border-color: #cbd5e1;
}
[data-theme="light"] .plans-mobile-nav-actions .plans-btn-primary {
    color: #ffffff;
}

/* Mobile hamburger icon — light mode */
[data-theme="light"] body.plans-body.plans-landing-page .plans-mobile-menu-toggle-icon,
[data-theme="light"] body.plans-body.plans-landing-page .plans-mobile-menu-toggle-icon::before,
[data-theme="light"] body.plans-body.plans-landing-page .plans-mobile-menu-toggle-icon::after {
    background: #334155;
}

/* Mobile menu drawer (session page) — light mode */
[data-theme="light"] .plans-mobile-menu-drawer {
    background: #ffffff;
    border-right-color: #e2e8f0;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.1);
}

/* ══════════════════════════════════════════════════════════════════════
   LIGHT THEME — Session page header & global polish
   ══════════════════════════════════════════════════════════════════════ */

/* Session page header — override heavy dark shadow */
[data-theme="light"] body.plans-body .app-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Session header logo */
[data-theme="light"] body.plans-body .plans-header-desktop .app-logo-title {
    color: #0f172a;
    text-shadow: none;
}
[data-theme="light"] body.plans-body .plans-header-desktop .app-logo-link:hover {
    background: rgba(59, 130, 246, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Session header nav links */
[data-theme="light"] body.plans-body .app-nav-link {
    color: #0f172a;
}
[data-theme="light"] body.plans-body .app-nav-link:hover {
    color: #000000;
}

/* ── Chat card — blue border to match theme ────────────────────────── */
[data-theme="light"] .plans-chat-card {
    background: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

/* Chat panel & body */
[data-theme="light"] .plans-chat-panel {
    background: #ffffff;
}
[data-theme="light"] .plans-chat-body {
    background: #ffffff;
}
[data-theme="light"] .plans-chat-log {
    background: transparent;
}

/* Chat messages */
[data-theme="light"] .gchat-msg-user {
    background: rgba(59, 130, 246, 0.07);
    border: 1px solid rgba(59, 130, 246, 0.12);
}
[data-theme="light"] .gchat-msg-user .gchat-msg-text {
    color: #0f172a;
}
[data-theme="light"] .gchat-msg-ai {
    background: transparent;
}
[data-theme="light"] .gchat-msg-ai .gchat-msg-text {
    color: #1e293b;
}
[data-theme="light"] .gchat-msg-text {
    color: #1e293b;
}
[data-theme="light"] .gchat-msg-text strong,
[data-theme="light"] .gchat-msg-text b {
    color: #0f172a;
}
[data-theme="light"] .gchat-msg-text code {
    background: rgba(0, 0, 0, 0.05);
    color: #0f172a;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .gchat-msg-text pre {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
[data-theme="light"] .gchat-msg-text a {
    color: #2563eb;
}
[data-theme="light"] .gchat-msg-text a:hover {
    color: #1d4ed8;
}

/* Chat header / new chat */
[data-theme="light"] .plans-chat-header {
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .plans-chat-new-btn {
    color: #475569;
}
[data-theme="light"] .plans-chat-new-btn:hover {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.04);
}

/* ── Conversation sidebar — light mode ─────────────────────────────── */
[data-theme="light"] .plans-chat-sidebar {
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
}
[data-theme="light"] .plans-chat-sidebar-item {
    color: #334155;
}
[data-theme="light"] .plans-chat-sidebar-item:hover {
    background: rgba(59, 130, 246, 0.06);
}
[data-theme="light"] .plans-chat-sidebar-item.is-active {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

/* ── Session mobile header ─────────────────────────────────────────── */
[data-theme="light"] .plans-header-mobile {
    color: #0f172a;
}
[data-theme="light"] .plans-header-mobile-title {
    color: #0f172a;
}
[data-theme="light"] .plans-header-mobile-meta {
    color: #64748b;
}
[data-theme="light"] .plans-mobile-menu-btn {
    color: #475569;
}
[data-theme="light"] .plans-mobile-menu-icon span {
    background: #475569;
}

/* ── Mobile menu drawer content — light mode ───────────────────────── */
[data-theme="light"] .plans-mobile-menu-drawer-header {
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .plans-mobile-menu-drawer-title {
    color: #0f172a;
}
[data-theme="light"] .plans-mobile-menu-drawer-close {
    color: #64748b;
}
[data-theme="light"] .plans-mobile-menu-section-label {
    color: #64748b;
}
[data-theme="light"] .plans-mobile-menu-option {
    color: #1e293b;
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .plans-mobile-menu-option:hover {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.2);
}

/* ── Session grid background ───────────────────────────────────────── */
[data-theme="light"] .plans-session-grid {
    color: #1e293b;
}

/* ── Home card — light mode ────────────────────────────────────────── */
[data-theme="light"] .plans-home-card {
    background: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

/* ── Daily Log card — light mode ───────────────────────────────────── */
[data-theme="light"] .plans-dailylog-card {
    background: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

/* ── Files card — light mode ───────────────────────────────────────── */
[data-theme="light"] .plans-files-card {
    background: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}
[data-theme="light"] .plans-files-dropzone {
    border-color: #94a3b8;
    background: #f8fafc;
}
[data-theme="light"] .plans-files-dropzone:hover,
[data-theme="light"] .plans-files-dropzone.is-dragover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.04);
}

/* ── Payments card — light mode ────────────────────────────────────── */
[data-theme="light"] .plans-payments-card {
    background: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

/* ── File Viewer card — light mode ─────────────────────────────────── */
[data-theme="light"] .plans-fileviewer-card {
    background: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

/* ── Command card — light mode ─────────────────────────────────────── */
[data-theme="light"] .plans-command-card {
    background: #ffffff;
    border: 1px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════
   HOME SECTION — Light mode inner components
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .home-onboarding {
    background: #ffffff !important;
}
[data-theme="light"] .home-welcome-title {
    color: #0f172a !important;
}
[data-theme="light"] .home-welcome-subtitle {
    color: #475569 !important;
}
[data-theme="light"] .home-col-heading {
    color: #64748b !important;
}
[data-theme="light"] .home-step {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .home-step:hover {
    border-color: #cbd5e1 !important;
}
[data-theme="light"] .home-step--done {
    border-color: rgba(22, 163, 74, 0.3) !important;
    background: rgba(22, 163, 74, 0.04) !important;
}
[data-theme="light"] .home-step-indicator {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #2563eb !important;
}
[data-theme="light"] .home-step--done .home-step-indicator {
    background: rgba(22, 163, 74, 0.1) !important;
    color: #16a34a !important;
}
[data-theme="light"] .home-step-title {
    color: #0f172a !important;
}
[data-theme="light"] .home-step-desc {
    color: #475569 !important;
}
[data-theme="light"] .home-step-connected {
    color: #16a34a !important;
}
[data-theme="light"] .home-btn--primary {
    background: #2563eb !important;
    color: #ffffff !important;
}
[data-theme="light"] .home-btn--secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .home-btn--desktop {
    background: rgba(22, 163, 74, 0.08) !important;
    color: #16a34a !important;
    border-color: rgba(22, 163, 74, 0.25) !important;
}
[data-theme="light"] .home-btn--outlook {
    color: #ffffff !important;
}
[data-theme="light"] .home-btn--gmail {
    color: #ffffff !important;
}
[data-theme="light"] .home-cap {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .home-cap--highlight {
    border-color: rgba(22, 163, 74, 0.25) !important;
    background: rgba(22, 163, 74, 0.04) !important;
}
[data-theme="light"] .home-cap h4 {
    color: #0f172a !important;
}
[data-theme="light"] .home-cap p {
    color: #475569 !important;
}
[data-theme="light"] .home-cap-icon {
    color: #2563eb !important;
}
[data-theme="light"] .home-capabilities-title {
    color: #0f172a !important;
}

/* ══════════════════════════════════════════════════════════════════════
   FILE VIEWER — Light mode inner components
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .fileviewer-sidebar {
    background: #f8fafc !important;
    border-right-color: #e2e8f0 !important;
}
[data-theme="light"] .fileviewer-sidebar-title {
    color: #64748b !important;
}
[data-theme="light"] .fileviewer-file-item {
    color: #334155 !important;
}
[data-theme="light"] .fileviewer-file-item:hover {
    background-color: #f1f5f9 !important;
}
[data-theme="light"] .fileviewer-file-item.is-active {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #1e293b !important;
}
[data-theme="light"] .fileviewer-file-item.is-active .fileviewer-file-icon {
    color: #2563eb !important;
}
[data-theme="light"] .fileviewer-file-ext {
    color: #64748b !important;
    background-color: #e2e8f0 !important;
}
[data-theme="light"] .fileviewer-delete-btn {
    color: rgba(0, 0, 0, 0.25) !important;
}
[data-theme="light"] .fileviewer-delete-btn:hover {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.08) !important;
}
[data-theme="light"] .fileviewer-empty {
    color: #94a3b8 !important;
}
[data-theme="light"] .fileviewer-toolbar {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] .fileviewer-toolbar-name {
    color: #0f172a !important;
}
[data-theme="light"] .fileviewer-toolbar-download {
    color: #2563eb !important;
}
[data-theme="light"] .fileviewer-toolbar-download:hover {
    background: rgba(59, 130, 246, 0.08) !important;
}
[data-theme="light"] .fileviewer-placeholder {
    color: #94a3b8 !important;
}
[data-theme="light"] .fileviewer-text {
    color: #1e293b !important;
}
[data-theme="light"] .fileviewer-unsupported {
    color: #94a3b8 !important;
}
[data-theme="light"] .fileviewer-unsupported-download {
    color: #2563eb !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
[data-theme="light"] .fileviewer-unsupported-download:hover {
    background: rgba(59, 130, 246, 0.08) !important;
}
[data-theme="light"] .fileviewer-toolbar-btn {
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .fileviewer-toolbar-btn:hover {
    background-color: #f1f5f9 !important;
    border-color: #3b82f6 !important;
}
[data-theme="light"] .fileviewer-toolbar-btn--ai {
    color: #7c3aed !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
}
[data-theme="light"] .fileviewer-toolbar-btn--ai:hover {
    background: rgba(124, 58, 237, 0.06) !important;
}
[data-theme="light"] .fileviewer-toolbar-btn--download-filled {
    color: #16a34a !important;
    border-color: rgba(22, 163, 74, 0.25) !important;
}
[data-theme="light"] .fileviewer-toolbar-btn--download-filled:hover {
    background: rgba(22, 163, 74, 0.06) !important;
}
[data-theme="light"] .fileviewer-loading {
    color: #64748b !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PAYMENTS — Light mode inner components
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .payments-layout {
    background: #ffffff !important;
}
[data-theme="light"] .payments-title {
    color: #0f172a !important;
}
[data-theme="light"] .payments-new-btn {
    background: #2563eb !important;
    color: #ffffff !important;
}
[data-theme="light"] .payments-new-btn:hover {
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.25) !important;
}
[data-theme="light"] .payments-stat {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .payments-stat-value {
    color: #0f172a !important;
}
[data-theme="light"] .payments-stat-label {
    color: #64748b !important;
}
[data-theme="light"] .payments-table thead th {
    color: #64748b !important;
    border-bottom-color: #e2e8f0 !important;
    background: #ffffff !important;
}
[data-theme="light"] .payments-row:hover {
    background-color: #f8fafc !important;
}
[data-theme="light"] .payments-row td {
    border-bottom-color: #f1f5f9 !important;
}
[data-theme="light"] .payments-client-name {
    color: #0f172a !important;
}
[data-theme="light"] .payments-client-email {
    color: #64748b !important;
}
[data-theme="light"] .payments-cell-amount {
    color: #2563eb !important;
}
[data-theme="light"] .payments-cell-desc {
    color: #475569 !important;
}
[data-theme="light"] .payments-cell-opened {
    color: #64748b !important;
}
[data-theme="light"] .payments-cell-date {
    color: #64748b !important;
}
[data-theme="light"] .payments-copy-btn,
[data-theme="light"] .payments-send-btn,
[data-theme="light"] .payments-delete-btn {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
}
[data-theme="light"] .payments-copy-btn:hover,
[data-theme="light"] .payments-send-btn:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #3b82f6 !important;
}
[data-theme="light"] .payments-delete-btn:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
}
[data-theme="light"] .payments-empty-title {
    color: #475569 !important;
}
[data-theme="light"] .payments-empty-text {
    color: #94a3b8 !important;
}
[data-theme="light"] .payments-create-form {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .payments-form-title {
    color: #0f172a !important;
}
[data-theme="light"] .payments-form-label {
    color: #64748b !important;
}
[data-theme="light"] .payments-form-input {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
[data-theme="light"] .payments-form-input:focus {
    border-color: #3b82f6 !important;
}
[data-theme="light"] .payments-form-input::placeholder {
    color: #94a3b8 !important;
}
[data-theme="light"] .payments-form-cancel {
    color: #64748b !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .payments-form-cancel:hover {
    background-color: #f1f5f9 !important;
}
[data-theme="light"] .payments-form-submit {
    background: #2563eb !important;
    color: #ffffff !important;
}
[data-theme="light"] .payments-form-submit:hover {
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.25) !important;
}
[data-theme="light"] .payments-form-optional-toggle {
    color: #64748b !important;
}
[data-theme="light"] .payments-form-optional-toggle:hover {
    color: #2563eb !important;
}
[data-theme="light"] .plans-workspace-tab--payments.is-active {
    color: #2563eb !important;
    border-bottom-color: #2563eb !important;
}

/* ── Card headers — universal light mode ───────────────────────────── */
[data-theme="light"] .plans-card-header {
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .plans-vault-card .plans-card-header {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 50%, #f8fafc 100%);
    border-bottom: 1px solid #dbeafe;
    border-radius: 27px 27px 0 0;
}
[data-theme="light"] .plans-card-header-title {
    color: #0f172a;
}
[data-theme="light"] .plans-card-header-subtitle {
    color: #64748b;
}

/* ── Generic card elements — text readability ──────────────────────── */
[data-theme="light"] .plans-label {
    color: #64748b;
}
[data-theme="light"] .plans-muted {
    color: #64748b;
}

/* ── Scrollbar — light mode ────────────────────────────────────────── */
[data-theme="light"] .plans-body::-webkit-scrollbar-thumb,
[data-theme="light"] .plans-body *::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
}
[data-theme="light"] .plans-body::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .plans-body *::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.5);
}
[data-theme="light"] .plans-body::-webkit-scrollbar-track,
[data-theme="light"] .plans-body *::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
}

/* ── Selection highlight — light mode ──────────────────────────────── */
[data-theme="light"] ::selection {
    background: rgba(59, 130, 246, 0.2);
    color: #0f172a;
}

/* Safari mobile safe area background */
html:has(body.plans-body) {
    background-color: var(--plans-bg-solid, #020617);
}

body.plans-body {
    background: var(--plans-bg);
    background-color: var(--plans-bg-solid, #020617);
    color: var(--plans-text);
    font-family: var(--plans-font);
    min-height: 100vh;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    position: relative;
    /* No padding-top needed since header is position: relative */
    padding-top: 0;
}

body.plans-body.plans-landing-page {
    overflow-y: hidden;
}

.plans-body,
.plans-landing-root,
.plans-session-root {
    overflow-x: hidden;
    max-width: 100vw;
}

.plans-body::-webkit-scrollbar,
.plans-body *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.plans-body::-webkit-scrollbar-thumb,
.plans-body *::-webkit-scrollbar-thumb {
    background: var(--plans-scroll-thumb);
    border-radius: 999px;
    border: none;
}

.plans-body::-webkit-scrollbar-thumb:hover,
.plans-body *::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 150, 200, 0.55);
}

body.plans-body .app-main {
    --plans-chat-height-reduction: clamp(0rem, 0.6vh, 1.25rem);
    --plans-viewer-height-reduction: clamp(0.8rem, 2.1vh, 3.2rem);
    padding: 0 0 clamp(1.85rem, 3vw, 3.2rem);
    background:
        var(--plans-bg-overlay),
        var(--plans-bg);

}

body.plans-body .app-header {
    background: var(--plans-header-gradient);
    border-bottom: 1px solid var(--t-border);
    box-shadow: 0 16px 40px rgba(2, 4, 12, 0.55);
    position: relative;
    z-index: 1100;
}

body.plans-body .plans-header-desktop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
}

body.plans-body .plans-header-desktop .app-logo {
    flex-shrink: 0;
}

body.plans-body .plans-header-desktop .app-header-actions {
    flex: 1;
}

/* Plans landing page header actions - flex layout on desktop */
body.plans-body.plans-landing-page .plans-header-actions {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

body.plans-body.plans-landing-page .app-main {
    height: calc(100vh - var(--app-header-height, 56px));
    min-height: calc(100vh - var(--app-header-height, 56px));
    padding: 0 clamp(1rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 2rem);
    overflow: hidden;
}

body.plans-body .app-footer {
    display: none;
}

body.plans-body .app-footer p {
    color: var(--plans-muted);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.plans-body .app-footer .brand-white {
    color: var(--plans-text);
}

::selection {
    background: rgba(255, 201, 85, 0.25);
    color: var(--plans-text);
}

.plans-body a {
    color: inherit;
}

body.plans-viewer-open {
    overflow: hidden;
}

body.plans-body.plans-mobile-tool-open {
    overflow: hidden;
}

.is-hidden {
    display: none !important;
}

/* Shared atoms */

.plans-label {
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--plans-label);
}

.plans-card {
    border-radius: var(--plans-radius-lg);
    border: 1px solid var(--plans-border);
    background: linear-gradient(150deg, rgba(14, 17, 32, 0.96), rgba(5, 5, 11, 0.92));
    padding: 1.75rem;
    box-shadow: var(--plans-shadow-card);
}

.plans-viewer-card {
    padding: clamp(0.85rem, 1.6vw, 1.75rem);
    border: 1px solid var(--plans-viewer-border, rgba(148, 163, 184, 0.35));
    border-radius: var(--plans-radius-lg, 28px);
    background: var(--plans-viewer-gradient);
    box-shadow:
        var(--plans-viewer-shadow, 0 35px 70px rgba(5, 8, 20, 0.55)),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    gap: clamp(0.35rem, 1vw, 0.85rem);
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    width: 100%;
    position: relative;
    isolation: isolate;
}

/* Back-to-chat button — hidden by default, shown only in floating mode */
.plans-viewer-back-bar {
    display: none;
}

.plans-viewer-back-btn {
    display: none;
}

.plans-viewer-card.is-floating .plans-viewer-back-bar {
    display: flex;
    justify-content: center;
    padding: 0.6rem 1rem;
    background: linear-gradient(180deg, rgba(12, 20, 38, 0.6), rgba(12, 20, 38, 0.9));
    flex-shrink: 0;
}

.plans-viewer-card.is-floating .plans-viewer-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.4rem 0.55rem 1rem;
    border: 1.5px solid rgba(96, 165, 250, 0.5);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.92), rgba(20, 40, 72, 0.95));
    color: #e0eaff;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.plans-viewer-card.is-floating .plans-viewer-back-btn:hover {
    background: linear-gradient(135deg, rgba(40, 75, 120, 0.95), rgba(30, 55, 90, 0.98));
    border-color: rgba(96, 165, 250, 0.8);
    transform: scale(1.03);
}

.plans-viewer-card.is-floating .plans-viewer-back-btn:active {
    transform: scale(0.97);
}

.plans-viewer-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 22%, rgba(79, 139, 255, 0.3), transparent 52%),
        radial-gradient(circle at 88% 10%, rgba(126, 250, 209, 0.25), transparent 48%),
        radial-gradient(circle at 78% 88%, rgba(255, 183, 110, 0.28), transparent 45%);
    opacity: 0.8;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: -1;
}

.plans-primary-column {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 0.9vw, 1.1rem);
    min-height: 0;
    width: 100%;
}

.plans-tool-drawer {
    display: flex;
    flex-direction: column;
    gap: clamp(0.65rem, 1vw, 1.2rem);
    width: 100%;
}

.plans-tool-drawer > section[hidden] {
    display: none !important;
}

.plans-dashboard-card {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    min-height: 0;
    position: relative;
    padding: clamp(1.2rem, 2vw, 2.1rem);
    border: 1px solid var(--plans-viewer-border, rgba(148, 163, 184, 0.35));
    border-radius: var(--plans-radius-lg);
    background: var(--reports-gradient);
    box-shadow: var(--reports-shadow);
    overflow: hidden;
    isolation: isolate;
}

.plans-dashboard-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(59, 130, 246, 0.35), transparent 52%),
        radial-gradient(circle at 82% 6%, rgba(126, 250, 209, 0.3), transparent 48%),
        radial-gradient(circle at 80% 88%, rgba(255, 183, 110, 0.28), transparent 45%);
    opacity: 0.75;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
}

.plans-dashboard-card > * {
    position: relative;
    z-index: 1;
}

.plans-dashboard-card[hidden] {
    display: none !important;
}

.plans-dashboard-body {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.9rem);
    min-height: clamp(360px, 45vh, 520px);
    position: relative;
}

/* Collapsible saved reports list: allow hiding the left list and expanding details */
.plans-dashboard-card.is-list-collapsed .plans-dashboard-body {
    grid-template-columns: minmax(0, 1fr);
}

.plans-dashboard-card.is-list-collapsed .plans-dashboard-list {
    display: none;
}

.plans-dashboard-card.is-list-collapsed .plans-dashboard-details {
    grid-column: 1 / -1;
}

.plans-dashboard-reveal {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 201, 85, 0.55);
    background: rgba(9, 14, 28, 0.65);
    color: var(--plans-accent);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    box-shadow:
        0 12px 25px rgba(2, 4, 12, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    cursor: pointer;
    pointer-events: auto;
    min-width: 0;
    transition: border-color var(--plans-transition), color var(--plans-transition), background var(--plans-transition);
}

.plans-dashboard-reveal:is(:hover, :focus-visible) {
    border-color: var(--t-text-tertiary);
    color: var(--t-text);
    background: rgba(15, 22, 40, 0.85);
}

.plans-dashboard-card.is-list-collapsed .plans-dashboard-reveal {
    display: inline-flex;
}

.plans-dashboard-reveal-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--plans-accent-hot);
    box-shadow: 0 0 8px rgba(255, 157, 77, 0.5);
}

.plans-dashboard-reveal-text {
    white-space: nowrap;
}

@media (max-width: 720px) {
    .plans-dashboard-reveal {
        width: 100%;
        justify-content: center;
    }
}

.plans-hires-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: linear-gradient(160deg, rgba(9, 12, 26, 0.95), rgba(5, 7, 16, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: var(--plans-shadow-card);
}

.plans-hires-header-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plans-hires-chip {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 201, 85, 0.5);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--plans-accent);
}

.plans-hires-chip[data-state="off"] {
    border-color: rgba(248, 113, 113, 0.4);
    color: var(--t-error);
}

.plans-hires-summary {
    background: rgba(15, 23, 42, 0.55);
    border-radius: var(--plans-radius-md);
    padding: 1rem 1.2rem;
    border: 1px solid var(--t-border);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.plans-hires-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.9rem;
    margin: 0;
}

.plans-hires-summary-grid dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--plans-label);
}

.plans-hires-summary-grid dd {
    font-size: 1.1rem;
    margin: 0.15rem 0 0;
    color: var(--plans-text);
}

.plans-hires-action {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--t-border);
    background: rgba(4, 7, 18, 0.65);
}

.plans-hires-action-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.plans-hires-action-title {
    margin: 0;
    font-size: 0.95rem;
    color: var(--plans-text);
}

.plans-hires-action-meta {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--plans-label);
}

.plans-hires-action-limit {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--plans-muted);
}

.plans-hires-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.plans-hires-action-hint {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--plans-label);
}

.plans-hires-run-status {
    min-height: 1.1rem;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--plans-label);
    transition: color 150ms ease;
}

.plans-hires-run-status[data-state="pending"] {
    color: var(--plans-accent);
}

.plans-hires-run-status[data-state="success"] {
    color: var(--t-success-text);
}

.plans-hires-run-status[data-state="error"] {
    color: var(--t-error);
}

#plansHiresRunButton {
    min-width: 190px;
    justify-content: center;
}

#plansHiresRunButton[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

#plansHiresRunSelectedButton[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .plans-hires-action {
        flex-direction: column;
        align-items: flex-start;
    }

    #plansHiresRunButton {
        width: 100%;
    }

    #plansHiresRunSelectedButton {
        width: 100%;
    }
}

.plans-hires-targets {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--t-border);
    background: rgba(4, 7, 18, 0.55);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.plans-hires-targets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.plans-hires-targets-title {
    margin: 0;
    font-size: 0.95rem;
    color: var(--plans-text);
}

.plans-hires-targets-clear {
    border: none;
    background: none;
    color: var(--plans-accent);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
}

.plans-hires-targets-clear:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.plans-hires-targets-hint,
.plans-hires-targets-summary {
    margin: 0;
    font-size: 0.82rem;
    color: var(--plans-label);
}

.plans-hires-target-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.plans-hires-target-item {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--plans-radius-sm);
    border: 1px solid var(--t-border);
    background: rgba(8, 12, 26, 0.6);
    font-size: 0.85rem;
    color: var(--plans-text);
}

.plans-hires-target-item input[type="checkbox"] {
    margin-top: 0.15rem;
}

.plans-hires-target-meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--plans-label);
}

.plans-hires-target-code {
    margin: 0;
    font-weight: 600;
}

.plans-hires-body {
    border-radius: var(--plans-radius-md);
    border: 1px dashed rgba(148, 163, 184, 0.35);
    padding: 1.2rem;
    background: rgba(8, 12, 26, 0.62);
}

.plans-hires-body[data-state="disabled"] {
    border-style: solid;
    border-color: rgba(248, 113, 113, 0.35);
}

.plans-hires-empty {
    text-align: left;
    color: var(--plans-muted);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.plans-hires-empty-title {
    font-size: 1.05rem;
    color: var(--plans-text);
}

.plans-hires-empty-hint {
    color: var(--plans-label);
}

.plans-hires-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plans-hires-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.plans-hires-select-label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--plans-label);
}

.plans-hires-select-label select {
    min-width: 220px;
    padding: 0.55rem 0.75rem;
    border-radius: var(--plans-radius-sm);
    border: 1px solid var(--t-border-medium);
    background: rgba(3, 5, 12, 0.9);
    color: var(--plans-text);
}

.plans-hires-updated {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: right;
}

.plans-hires-updated-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--plans-label);
}

.plans-hires-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.plans-hires-column {
    background: rgba(6, 10, 22, 0.8);
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--t-border);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plans-hires-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.plans-hires-column-header h3 {
    margin: 0;
    font-size: 1rem;
}

.plans-hires-counter {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--plans-label);
}

.plans-hires-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plans-hires-list-item {
    background: rgba(9, 13, 26, 0.85);
    border-radius: var(--plans-radius-sm);
    border: 1px solid var(--t-border-subtle);
    padding: 0.75rem 0.85rem;
}

.plans-hires-list-title {
    margin: 0;
    font-weight: 600;
    color: var(--plans-text);
}

.plans-hires-list-body {
    margin: 0.4rem 0 0;
    color: var(--plans-text);
}

.plans-hires-list-meta {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--plans-label);
}

.plans-hires-list-empty {
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: var(--plans-radius-sm);
    padding: 0.85rem;
    color: var(--plans-label);
}

@media (max-width: 640px) {
    .plans-hires-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .plans-hires-updated {
        align-items: flex-start;
        text-align: left;
    }

    .plans-hires-select-label select {
        width: 100%;
    }
}

.plans-dashboard-list-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plans-dashboard-collapse {
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    background: transparent;
    border: 1px solid var(--t-border-subtle);
    color: var(--plans-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.plans-dashboard-collapse-icon {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.plans-dashboard-collapse-icon::after {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.plans-dashboard-collapse[data-state="collapsed"] .plans-dashboard-collapse-icon::after {
    transform: rotate(-135deg);
}

.plans-dashboard-collapse-text {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.plans-dashboard-details-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Hide mobile-only back button on desktop */
.plans-mobile-back-to-list {
    display: none;
}

.plans-dashboard-list,
.plans-dashboard-details {
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--reports-border);
    background: var(--reports-panel);
    padding: clamp(1rem, 1.5vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    box-shadow: 0 25px 45px rgba(3, 5, 12, 0.45);
    backdrop-filter: blur(18px);
}

.plans-dashboard-details {
    position: relative;
    display: none;
}

.plans-dashboard-details.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plans-dashboard-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--reports-panel-highlight);
}

.plans-dashboard-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--plans-muted);
    min-height: 1.25rem;
    margin-right: 0.35rem;
}

.plans-dashboard-status[data-state="loading"]::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    border: 2px solid var(--plans-border-strong);
    border-top-color: var(--plans-accent);
    animation: plans-takeoff-spin 0.8s linear infinite;
}

.plans-dashboard-list-header h3 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--plans-label);
}

.plans-dashboard-table-wrapper {
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--reports-border);
    overflow: hidden;
    background: var(--reports-panel-strong);
    box-shadow: inset 0 0 0 1px var(--reports-panel-highlight);
}

.plans-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    color: var(--plans-text);
}

.plans-dashboard-table th,
.plans-dashboard-table td {
    padding: 1rem 1.15rem;
    text-align: left;
    border-bottom: 1px solid var(--reports-panel-highlight);
}

.plans-dashboard-table th {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--plans-label);
    background-color: var(--t-surface-soft);
}

.plans-dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

.plans-dashboard-table tbody tr {
    transition: background 180ms ease, transform 180ms ease;
}

.plans-dashboard-table tbody tr:hover {
    background-color: var(--t-surface-soft);
}

.plans-dashboard-table tbody tr.is-active {
    background: rgba(126, 250, 209, 0.08);
    box-shadow: inset 0 0 0 1px rgba(126, 250, 209, 0.35);
}

.plans-dashboard-table button.plans-dashboard-open {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
}

.reports-table-primary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.reports-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--reports-chip-border);
    background: var(--reports-chip-bg);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--reports-chip-text);
}

.reports-type-pill::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.reports-type-pill--conflict,
.reports-type-pill--conflict_report {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.4);
}

.reports-type-pill--conflict::before,
.reports-type-pill--conflict_report::before {
    background: #f87171;
}

/* ============================================================================
   PLANS LANDING PAGE - MOBILE NAV DRAWER
   ============================================================================ */

/* Hide hamburger toggle on desktop */
.plans-mobile-menu-toggle {
    display: none;
}

.plans-mobile-nav-drawer {
    display: none;
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 2000;
}

.plans-mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.plans-mobile-nav-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: min(360px, 88vw);
    background: #070912;
    border-right: 1px solid var(--t-border-medium);
    box-shadow: 8px 0 80px rgba(0, 0, 0, 0.55);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    display: flex;
    flex-direction: column;
    padding: 0.95rem;
}

.plans-mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem 0.75rem;
    border-bottom: 1px solid var(--t-border);
}

.plans-mobile-nav-title {
    font-size: 0.78rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.85);
}

.plans-mobile-nav-close {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background-color: var(--t-surface-input);
    color: rgba(248, 250, 252, 0.9);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.plans-mobile-nav-close:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.8);
    outline-offset: 4px;
}

.plans-mobile-nav-links {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 0.25rem;
}

.plans-mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    border: 1px solid var(--t-border);
    background-color: var(--t-surface-soft);
    color: rgba(226, 232, 240, 0.92);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.plans-mobile-nav-link:hover,
.plans-mobile-nav-link:focus-visible {
    border-color: rgba(96, 165, 250, 0.45);
    color: var(--t-text);
    outline: none;
}

.plans-mobile-nav-actions {
    margin-top: auto;
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem 0.25rem 0.25rem;
}

.plans-mobile-nav-actions .plans-btn {
    display: block;
    text-align: center;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
}

.plans-mobile-nav-actions .plans-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: var(--t-text);
    border: none;
}

.plans-mobile-nav-actions .plans-btn-primary:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.plans-mobile-nav-actions .plans-btn-secondary {
    background: transparent;
    color: var(--t-text);
    border: 1px solid var(--t-border-accent);
}

.plans-mobile-nav-actions .plans-btn-secondary:hover {
    background-color: var(--t-tab-active-bg);
    border-color: var(--t-text-tertiary);
}

/* Open state for mobile nav drawer */
body.plans-mobile-drawer-open .plans-mobile-nav-drawer {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.plans-mobile-drawer-open .plans-mobile-nav-panel {
    transform: translateX(0);
}

/* Prevent background scroll when drawer is open */
body.plans-mobile-drawer-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.plans-mobile-drawer-header,
.plans-tool-drawer-footer,
.plans-tools-sheet,
.plans-tools-sheet-scrim,
.plans-header-mobile,
.plans-mobile-vault-btn,
.plans-mobile-vault-drawer,
.plans-mobile-vault-scrim {
    display: none;
}

/* Ensure hamburger always renders left, title right when mobile header is visible */
.plans-header-mobile-actions {
    order: -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Header action buttons (Chat, New Job) — match app-nav-link style from layout.css */
.plans-header-action-btn {
    display: none; /* shown via media query */
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--color-text-white, rgba(248, 250, 252, 0.95));
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    font-family: inherit;
}

.plans-header-action-btn:hover,
.plans-header-action-btn:focus-visible {
    background-color: var(--t-surface-hover);
    color: var(--t-text);
}

.plans-header-action-btn:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.8);
    outline-offset: 2px;
}

.plans-header-action-btn svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.plans-header-action-btn:hover svg {
    opacity: 1;
}

.plans-header-action-label {
    display: inline;
}

.plans-header-mobile-info {
    order: 1;
    margin-left: auto;
}

@media (max-width: 768px) {
    body.plans-body {
        --plans-mobile-drawer-offset: calc(var(--app-header-height, 52px) + clamp(0.05rem, 0.5vh, 0.3rem));
        /* Remove body padding-top since header is sticky, not fixed on mobile */
        padding-top: 0 !important;
    }

    body.plans-body .app-header {
        position: sticky;
        top: 0;
        padding: clamp(0.2rem, 1.2vw, 0.4rem) clamp(0.6rem, 3.5vw, 0.85rem);
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border-bottom: none;
        min-height: auto;
    }

    body.plans-body .app-header .container {
        padding: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    /* Hide desktop nav on mobile for plans landing page and auth pages */
    body.plans-body.plans-landing-page .plans-header-actions,
    body.plans-body.auth-body .plans-header-actions {
        display: none !important;
    }

    /* Show hamburger toggle on mobile for plans landing page and auth pages */
    body.plans-body.plans-landing-page .plans-mobile-menu-toggle,
    body.plans-body.auth-body .plans-mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 24px;
        border: none;
        border-radius: 0;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
    }

    body.plans-body.plans-landing-page .plans-mobile-menu-toggle:focus-visible,
    body.plans-body.auth-body .plans-mobile-menu-toggle:focus-visible {
        outline: 2px solid rgba(99, 102, 241, 0.8);
        outline-offset: 4px;
    }

    body.plans-body.plans-landing-page .plans-mobile-menu-toggle-icon,
    body.plans-body.auth-body .plans-mobile-menu-toggle-icon {
        position: relative;
        width: 22px;
        height: 2px;
        background: rgba(248, 250, 252, 0.95);
        border-radius: 2px;
    }

    body.plans-body.plans-landing-page .plans-mobile-menu-toggle-icon::before,
    body.plans-body.plans-landing-page .plans-mobile-menu-toggle-icon::after,
    body.plans-body.auth-body .plans-mobile-menu-toggle-icon::before,
    body.plans-body.auth-body .plans-mobile-menu-toggle-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: rgba(248, 250, 252, 0.95);
        border-radius: 2px;
    }

    body.plans-body.plans-landing-page .plans-mobile-menu-toggle-icon::before,
    body.plans-body.auth-body .plans-mobile-menu-toggle-icon::before {
        top: -7px;
    }

    body.plans-body.plans-landing-page .plans-mobile-menu-toggle-icon::after,
    body.plans-body.auth-body .plans-mobile-menu-toggle-icon::after {
        bottom: -7px;
    }

    /* Session page mobile header */
    body.plans-body .plans-header-desktop {
        display: none !important;
        visibility: hidden;
        height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    body.plans-body .plans-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0.15rem 0;
    }

    .plans-header-mobile-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        gap: 0.05rem;
        min-width: 0;
    }

    .plans-header-mobile-label {
        margin: 0;
        font-size: 0.58rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--plans-label);
        line-height: 1.1;
    }

    .plans-header-mobile-title {
        margin: 0;
        font-size: clamp(0.88rem, 3.9vw, 1.05rem);
        line-height: 1.2;
        font-weight: 600;
        color: var(--plans-text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100vw - 120px);
    }

    .plans-header-mobile-meta {
        margin: 0;
        font-size: 0.7rem;
        line-height: 1.2;
        color: var(--plans-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100vw - 120px);
    }

    body.plans-body:not(.plans-landing-page) .app-nav-case-studies,
    body.plans-body:not(.plans-landing-page) .app-nav-launch {
        display: none !important;
    }

    body.plans-body .app-main {
        padding: 0 clamp(0.45rem, 4.5vw, 0.9rem) clamp(1.1rem, 4vw, 1.6rem);
    }

    .plans-session-grid {
        display: flex;
        flex-direction: column;
        gap: clamp(0.4rem, 1.8vw, 0.9rem);
        min-height: calc(100vh - var(--app-header-height, 56px));
    }

    .plans-workspace-tabs,
    #plansViewerHandle {
        display: none !important;
    }

    /* Viewer scrim — hidden by default, visible when floating viewer opens */
    #plansViewerScrim {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 2099;
        display: none;
    }
    #plansViewerScrim.is-visible {
        display: block;
    }

    .plans-primary-column {
        position: fixed;
        top: var(--plans-mobile-drawer-offset, calc(var(--app-header-height, 56px) + 0.5rem));
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: clamp(0.75rem, 4vw, 1.25rem) clamp(1rem, 5vw, 1.5rem) calc(1.5rem + var(--plans-safe-area-bottom, 0px));
        background:
            radial-gradient(circle at 10% 8%, rgba(59, 130, 246, 0.15), transparent 55%),
            radial-gradient(circle at 80% 4%, rgba(126, 250, 209, 0.12), transparent 50%),
            rgba(5, 8, 20, 0.96);
        overflow-x: hidden;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 280ms var(--plans-transition, cubic-bezier(0.19, 1, 0.22, 1));
        z-index: 1200;
        gap: 0;
        border-radius: 26px 26px 0 0;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        max-height: calc(100vh - var(--app-header-height, 56px) - 3.5rem);
    }

    .plans-primary-column.is-open {
        transform: translateX(0);
    }

    .plans-tool-drawer {
        display: none;
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
        overflow: visible;
        max-height: 100%;
    }

    .plans-tool-drawer.is-active {
        display: flex;
    }

    .plans-tool-drawer > section {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: 1.2rem;
        padding-bottom: 1.5rem;
        margin-bottom: 0.5rem;
        scroll-padding-bottom: calc(1.75rem + var(--plans-safe-area-bottom, 0px));
    }

    /* Leads card manages its own internal scroll — don't let the drawer section scroll */
    .plans-tool-drawer > section.plans-leads-card {
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    /* Takeoff: start content higher in the drawer */
    .plans-tool-drawer[data-tool-drawer="takeoff"] > section {
        padding-top: clamp(0.35rem, 1.1vh, 0.75rem);
    }


    /* Ensure reports drawer fits within chat viewport and can scroll when opened on mobile */
    .plans-tool-drawer .plans-dashboard-card {
        flex: 1;
        min-height: 0;
        height: calc(100vh - var(--plans-mobile-drawer-offset, 64px) - clamp(2.5rem, 8vw, 4rem));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: clamp(0.5rem, 1.5vh, 1rem);
        padding: clamp(0.65rem, 2vw, 1rem);
        gap: 0.75rem;
        /* Solid background for mobile */
        background: rgb(10, 14, 28);
        border: 1px solid var(--t-border-medium);
    }

    /* Hide the gradient overlay on mobile for solid look */
    .plans-tool-drawer .plans-dashboard-card::after {
        display: none;
    }

    /* Solid background for list and details panels on mobile */
    .plans-tool-drawer .plans-dashboard-list,
    .plans-tool-drawer .plans-dashboard-details {
        background: rgb(14, 18, 32);
        border: 1px solid var(--t-border);
        backdrop-filter: none;
    }

    /* Reports: single-column stacked layout on mobile */
    .plans-tool-drawer .plans-dashboard-body {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        min-height: auto;
    }

    /* Hide the details pane on mobile until a report is selected */
    .plans-tool-drawer .plans-dashboard-details {
        display: none;
    }

    /* Show details when a report is actively being viewed */
    .plans-tool-drawer .plans-dashboard-card.is-viewing-report .plans-dashboard-details {
        display: block;
    }

    .plans-tool-drawer .plans-dashboard-card.is-viewing-report .plans-dashboard-list {
        display: none;
    }

    /* Compact header styling for mobile reports */
    .plans-tool-drawer .plans-dashboard-card .plans-card-header {
        padding-bottom: 0.5rem;
        gap: 0.35rem;
    }

    .plans-tool-drawer .plans-dashboard-card .plans-card-title {
        font-size: 1rem;
    }

    .plans-tool-drawer .plans-dashboard-card .plans-card-subtitle {
        font-size: 0.8rem;
        opacity: 0.7;
    }

    /* Saved reports list styling */
    .plans-tool-drawer .plans-dashboard-list {
        flex: 1;
        min-height: 0;
    }

    .plans-tool-drawer .plans-dashboard-list h3 {
        font-size: 0.85rem;
        margin-bottom: 0.35rem;
    }

    .plans-tool-drawer .plans-dashboard-list-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .plans-tool-drawer .plans-dashboard-collapse {
        display: none;
    }

    .plans-tool-drawer .plans-dashboard-table-wrapper {
        max-height: 55vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile back-to-list button in report details */
    .plans-mobile-back-to-list {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 0.85rem;
        border-radius: 999px;
        border: 1px solid var(--t-border-strong);
        background: rgba(15, 23, 42, 0.6);
        color: var(--plans-text);
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        cursor: pointer;
        margin-bottom: 0.75rem;
    }

    .plans-mobile-back-to-list:active {
        background: rgba(15, 23, 42, 0.85);
    }

    .plans-mobile-back-icon {
        font-size: 1.15rem;
        line-height: 1;
    }

    /* Hide the desktop close button on mobile, show back-to-list */
    .plans-tool-drawer .plans-dashboard-details-toolbar #reportsDashboardDetailsClose {
        display: none;
    }

    /* Report details scrollable on mobile */
    .plans-tool-drawer .plans-dashboard-details {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem;
    }

    .plans-dashboard-list-header {
        position: sticky;
        top: 0;
        background: rgba(9, 14, 28, 0.95);
        padding-top: 0.35rem;
        z-index: 2;
    }


    .plans-mobile-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.5rem 0 0.25rem;
        position: sticky;
        top: 0;
        z-index: 2;
        background:
            linear-gradient(180deg, rgba(8, 12, 24, 0.96), rgba(8, 11, 23, 0.92));
        padding-bottom: 0.5rem;
    }

    .plans-mobile-drawer-back {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.35rem 0.75rem;
        border-radius: 999px;
        border: 1px solid var(--t-border-strong);
        background: rgba(15, 23, 42, 0.6);
        color: var(--plans-text);
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        cursor: pointer;
    }

    .plans-mobile-drawer-back-icon {
        font-size: 1.25rem;
        line-height: 1;
    }

    .plans-mobile-drawer-title {
        flex: 1;
        margin: 0;
        text-align: center;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--plans-text);
    }

    .plans-mobile-drawer-spacer {
        width: 3.5rem;
    }

    .plans-tool-drawer-footer {
        display: block;
        margin-top: auto;
        padding-top: 0.75rem;
        position: sticky;
        bottom: 0;
        background:
            linear-gradient(0deg, rgba(8, 11, 24, 0.96), rgba(8, 11, 24, 0.4));
        padding-bottom: calc(0.5rem + var(--plans-safe-area-bottom, 0px));
        z-index: 1;
    }

    body.plans-mobile-tool-open .plans-tool-drawer > section {
        padding-bottom: calc(1.75rem + var(--plans-safe-area-bottom, 0px));
    }

    body.plans-mobile-tool-open .plans-tool-drawer-footer {
        bottom: calc(var(--plans-safe-area-bottom, 0px) + 0.2rem);
        padding-bottom: calc(var(--plans-safe-area-bottom, 0px) + 0.85rem);
        box-shadow: 0 -18px 35px rgba(4, 6, 16, 0.55);
    }

    body.plans-mobile-tool-open .plans-tool-drawer-footer-btn {
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    }

    body.plans-mobile-tool-open #plansToolboxTab {
        display: none !important;
    }

    .plans-tool-drawer-footer-btn {
        width: 100%;
        border-radius: 999px;
        border: 1px solid rgba(79, 139, 255, 0.3);
        padding: 0.75rem 1.25rem;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(79, 139, 255, 0.08));
        color: var(--t-link-hover);
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .plans-tool-drawer-footer-btn:hover,
    .plans-tool-drawer-footer-btn:active {
        border-color: rgba(79, 139, 255, 0.55);
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(79, 139, 255, 0.15));
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
    }

    .plans-chat-card {
        padding: clamp(0.75rem, 3.2vw, 1.15rem);
        border-radius: 24px;
        min-height: calc(100vh - var(--app-header-height, 56px) - 0.35rem);
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .plans-chat-card > .plans-card-header {
        display: none;
    }

    .plans-mobile-tools-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.3rem 0.75rem;
        border-radius: 999px;
        border: 1px solid var(--t-border-strong);
        background: rgba(10, 16, 36, 0.92);
        color: var(--plans-text);
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        cursor: pointer;
        flex-shrink: 0;
    }

    .plans-mobile-tools-icon {
        position: relative;
        width: 0.85rem;
        height: 0.85rem;
        display: inline-block;
    }

    .plans-mobile-tools-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 4px;
        background: currentColor;
        box-shadow:
            0 0.38rem currentColor,
            0.38rem 0 currentColor,
            0.38rem 0.38rem currentColor;
    }

    .plans-mobile-tools-label {
        font-size: 0.65rem;
    }

    /* Mobile header actions container */
    .plans-header-mobile-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
        order: -1;
    }

    /* Chat & New Job are in hamburger menu now — hide from header */
    .plans-header-action-btn {
        display: none;
    }

    /* Mobile Vault Button */
    .plans-mobile-vault-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.3rem 0.75rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 201, 85, 0.35);
        background: rgba(255, 201, 85, 0.12);
        color: var(--t-accent);
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.15s ease;
    }

    .plans-mobile-vault-btn:hover,
    .plans-mobile-vault-btn:focus {
        background: rgba(255, 201, 85, 0.2);
        border-color: rgba(255, 201, 85, 0.5);
    }

    .plans-mobile-vault-btn[aria-expanded="true"] {
        background: rgba(255, 201, 85, 0.25);
        border-color: var(--t-accent);
    }

    .plans-mobile-vault-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    .plans-mobile-vault-label {
        font-size: 0.65rem;
    }

    /* Mobile Vault Drawer */
    .plans-mobile-vault-drawer {
        display: none;
        position: fixed;
        top: var(--app-header-height, 56px);
        left: 0;
        right: 0;
        max-height: 70vh;
        background: linear-gradient(180deg, rgba(12, 14, 28, 0.98), rgba(6, 8, 18, 0.98));
        border-bottom: 1px solid rgba(255, 201, 85, 0.25);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
        z-index: 2500;
        flex-direction: column;
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .plans-mobile-vault-drawer.is-open {
        display: flex;
        transform: translateY(0);
        opacity: 1;
    }

    .plans-mobile-vault-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--t-border);
        background: rgba(255, 201, 85, 0.05);
    }

    .plans-mobile-vault-drawer-title-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .plans-mobile-vault-drawer-icon {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .plans-mobile-vault-drawer-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--t-accent);
        margin: 0;
        letter-spacing: 0.04em;
    }

    .plans-mobile-vault-drawer-close {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid var(--t-border-strong);
        background: rgba(255, 255, 255, 0.05);
        color: var(--t-text-secondary);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .plans-mobile-vault-drawer-close:hover {
        background-color: var(--t-tab-active-bg);
        color: var(--t-text);
    }

    .plans-mobile-vault-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        -webkit-overflow-scrolling: touch;
    }

    .plans-mobile-vault-drawer-empty {
        text-align: center;
        color: var(--t-text-tertiary);
        font-size: 0.85rem;
        padding: 2rem 1rem;
        margin: 0;
    }

    .plans-mobile-vault-drawer-empty[hidden] {
        display: none;
    }

    .plans-mobile-vault-drawer-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .plans-mobile-vault-drawer-item {
        display: block;
    }

    .plans-mobile-vault-drawer-item-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        border-radius: 12px;
        background-color: var(--t-border-subtle);
        border: 1px solid var(--t-border);
        text-decoration: none;
        color: var(--t-text);
        transition: all 0.15s ease;
    }

    .plans-mobile-vault-drawer-item-link:hover,
    .plans-mobile-vault-drawer-item-link:focus {
        background: rgba(255, 201, 85, 0.1);
        border-color: rgba(255, 201, 85, 0.3);
    }

    .plans-mobile-vault-drawer-item-thumb {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background-color: var(--t-surface-input);
        flex-shrink: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .plans-mobile-vault-drawer-item-thumb.has-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .plans-mobile-vault-drawer-item-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .plans-mobile-vault-drawer-item-name {
        font-weight: 600;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .plans-mobile-vault-drawer-item-meta {
        font-size: 0.75rem;
        color: var(--t-text-tertiary);
    }

    .plans-mobile-vault-drawer-footer {
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--t-border);
        text-align: center;
    }

    .plans-mobile-vault-drawer-link {
        display: inline-block;
        padding: 0.6rem 1.5rem;
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(255, 201, 85, 0.2), rgba(255, 170, 50, 0.2));
        border: 1px solid rgba(255, 201, 85, 0.4);
        color: var(--t-accent);
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-decoration: none;
        transition: all 0.15s ease;
    }

    .plans-mobile-vault-drawer-link:hover {
        background: linear-gradient(135deg, rgba(255, 201, 85, 0.3), rgba(255, 170, 50, 0.3));
        border-color: var(--t-accent);
    }

    /* Vault Scrim */
    .plans-mobile-vault-scrim {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 3, 12, 0.7);
        z-index: 2400;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .plans-mobile-vault-scrim.is-visible {
        display: block;
        opacity: 1;
    }

    /* Lock body scroll when vault drawer open */
    body.plans-vault-drawer-open {
        overflow: hidden;
    }

    .plans-chat-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        min-height: 0;
    }

    .plans-chat-stage {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 0.25rem;
    }

    .plans-chat-input-row {
        position: sticky;
        bottom: calc(-1 * var(--plans-safe-area-bottom, 0px));
        background:
            linear-gradient(180deg, rgba(9, 12, 24, 0.1), rgba(5, 7, 16, 0.85));
        padding-top: 0.75rem;
        margin-top: auto;
    }

    .plans-tools-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 70vh;
        padding: 0.75rem clamp(1rem, 6vw, 1.75rem) calc(0.75rem + var(--plans-safe-area-bottom, 0px));
        border-radius: 28px 28px 0 0;
        background:
            radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.18), transparent 50%),
            rgba(5, 8, 18, 0.98);
        box-shadow: 0 -25px 60px rgba(0, 0, 0, 0.6);
        transform: translateY(100%);
        transition: transform 240ms var(--plans-transition, cubic-bezier(0.19, 1, 0.22, 1));
        z-index: 100;
    }

    .plans-tools-sheet.is-open {
        transform: translateY(0);
    }

    .plans-tools-sheet.is-dragging {
        transition: none;
    }

    .plans-tools-sheet-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 3, 12, 0.7);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
        z-index: 90;
    }

    .plans-tools-sheet-scrim.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .plans-tools-sheet-handle {
        width: 60px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.2);
        margin: 0 auto 0.5rem;
        cursor: grab;
        flex-shrink: 0;
        touch-action: none;
    }

    .plans-tools-sheet-handle:active {
        cursor: grabbing;
    }

    .plans-tools-sheet-label {
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: var(--plans-label);
        font-size: 0.72rem;
        flex-shrink: 0;
    }

    .plans-tools-sheet-header {
        flex-shrink: 0;
    }

    .plans-tools-sheet-header h2 {
        margin: 0.15rem 0 0.5rem;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .plans-tools-sheet-body {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .plans-tools-sheet-option {
        width: 100%;
        border-radius: 12px;
        border: 1px solid var(--t-border-medium);
        background: rgba(12, 17, 36, 0.85);
        color: var(--plans-text);
        padding: 0.7rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        text-align: left;
        cursor: pointer;
        flex-shrink: 0;
    }

    .plans-tools-sheet-option-text {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .plans-tools-sheet-option-title {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .plans-tools-sheet-option-caption {
        font-size: 0.75rem;
        color: var(--plans-muted);
    }

    .plans-tools-sheet-option-icon {
        font-size: 1.25rem;
        color: var(--plans-muted);
    }

    .plans-tools-sheet-actions {
        margin-top: 0.75rem;
        flex-shrink: 0;
    }

    .plans-tools-sheet-close {
        width: 100%;
        border-radius: 12px;
        border: 1px solid var(--t-border-accent);
        background: transparent;
        color: var(--plans-text);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0.65rem 1rem;
        font-size: 0.8rem;
    }
}

.reports-type-pill--rfi,
.reports-type-pill--rfi_pack {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.4);
}

.reports-type-pill--rfi::before,
.reports-type-pill--rfi_pack::before {
    background: #fbbf24;
}

.reports-type-pill--plan,
.reports-type-pill--analysis {
    color: #cfe0ff;
    border-color: rgba(96, 165, 250, 0.4);
}

.reports-type-pill--plan::before,
.reports-type-pill--analysis::before {
    background: #60a5fa;
}

.reports-created-date {
    font-size: 0.85rem;
    color: var(--plans-muted);
}

.reports-table-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.plans-dashboard-empty {
    color: var(--plans-muted);
    text-align: center;
    padding: 1.5rem;
    border-radius: var(--plans-radius-sm);
    background-color: var(--t-border-subtle);
}

.plans-dashboard-muted {
    color: var(--plans-muted);
    font-size: 0.82rem;
}

.plans-dashboard-details h3 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
}

.plans-dashboard-project-meta {
    margin: 0.35rem 0 0;
    color: var(--plans-muted);
    font-size: 0.95rem;
}

.plans-dashboard-exposure {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    border-top: 1px solid var(--reports-panel-highlight);
    padding-top: 0.85rem;
}

.plans-dashboard-exposure span {
    font-size: 0.95rem;
    color: var(--plans-muted);
}

.plans-dashboard-conflicts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.plans-dashboard-conflict {
    border: 1px solid var(--reports-border);
    border-radius: var(--plans-radius-sm);
    padding: 0.85rem 1rem;
    background-color: var(--t-surface-soft);
}

.plans-dashboard-conflict h4 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
}

.plans-dashboard-conflict-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--plans-label);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.plans-dashboard-conflict-summary {
    margin: 0.5rem 0 0;
    color: var(--plans-muted);
    line-height: 1.5;
}

.plans-rfi-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: rgba(13, 17, 34, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--plans-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--plans-radius-lg);
    color: var(--plans-text);
    box-shadow: var(--plans-shadow-soft, 0 18px 40px rgba(0, 0, 0, 0.4));
    overflow: hidden; /* Match leads card behavior */
}

.plans-rfi-card .plans-card-title,
.plans-rfi-card .plans-card-subtitle {
    color: var(--t-text);
}

.plans-rfi-card .plans-card-header {
    background-color: var(--t-surface-soft);
    border-bottom: 1px solid var(--plans-border, rgba(255, 255, 255, 0.08));
    padding: 1rem 1.5rem;
    margin: 0; 
}

/* Ensure padding on the card itself is handled correctly or removed for the header full-width */
.plans-rfi-card {
    padding: 0 !important; /* Leads and Projects strip padding from container */
    gap: 0; /* Remove gap so header sits flush with whatever is next, rely on body padding */
}

.plans-rfi-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.75rem);
    min-height: clamp(320px, 42vh, 500px);
    overflow-y: auto;
}

.plans-rfi-list {
    /* Remove box-in-box look to match Leads/Projects */
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--t-text);
    padding: 0; 
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(var(--plans-session-available-height, 100vh) - clamp(4rem, 8vh, 6.5rem));
    overflow: visible; /* Let body handle scroll */
    width: 100%;
}

.plans-rfi-pack-summary {
    border-radius: var(--plans-radius-lg, 16px);
    border: 1px solid var(--plans-border, rgba(255, 255, 255, 0.08));
    background-color: var(--t-surface-soft);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle lift like lead items */
    padding: clamp(1rem, 2vw, 1.35rem);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.plans-rfi-pack-summary-meta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.plans-rfi-summary-label {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--t-text-tertiary);
}

.plans-rfi-pack-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
}

.plans-rfi-summary-attributes {
    display: contents;
}

.plans-rfi-summary-attribute {
    border-radius: var(--plans-radius-sm);
    border: 1px solid var(--t-border);
    background: rgba(0, 0, 0, 0.2);
    padding: 0.55rem 0.75rem;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.plans-rfi-summary-attribute-label {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--t-text-tertiary);
}

.plans-rfi-summary-attribute-value {
    margin: 0;
    font-size: 0.95rem;
    color: var(--t-text);
    line-height: 1.35;
}

.plans-rfi-list-body {
    display: flex;
    flex-direction: column;
    gap: clamp(0.85rem, 1.8vw, 1.75rem);
    align-items: stretch;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: clamp(0.4rem, 1vw, 0.85rem);
    scrollbar-gutter: stable both-edges;
}

.plans-rfi-log-column {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
    min-height: 0;
    width: 100%;
}

.plans-rfi-list-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.plans-rfi-list-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--t-text);
}

.plans-rfi-list-caption {
    margin: 0;
    color: var(--t-text-tertiary);
    font-size: 0.9rem;
}

.plans-rfi-details {
    display: none;
}

.plans-rfi-details.active {
    display: block;
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--t-border);
    background-color: var(--t-surface-soft);
    color: var(--t-text);
    padding: 1.25rem;
    overflow: hidden;
    min-height: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.plans-rfi-document-shell {
    border-radius: var(--plans-radius-sm);
    border: 1px solid var(--t-border);
    background: rgba(0, 0, 0, 0.2);
    padding: 0;
    min-height: 100%;
}

.plans-rfi-document-shell iframe,
.plans-rfi-document-shell .plans-rfi-document-preview {
    border: none;
    width: 100%;
    height: 100%;
    min-height: 320px;
    background: transparent;
    border-radius: var(--plans-radius-sm);
    color: var(--t-text);
}

.plans-rfi-document-shell .plans-rfi-document-preview {
    padding: 0;
    overflow: auto;
}

.plans-rfi-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.plans-rfi-controls-left,
.plans-rfi-controls-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.plans-rfi-controls-right {
    margin-left: auto;
}

.plans-rfi-pack-select {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--t-text-tertiary);
}

.plans-rfi-pack-select select {
    appearance: none;
    border: 1px solid var(--t-border-strong);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    background: rgba(0, 0, 0, 0.3);
    color: var(--t-text);
    font-size: 0.85rem;
}

.plans-rfi-pack-status {
    border-radius: var(--plans-radius-sm);
    border: 1px solid var(--t-border);
    background-color: var(--t-surface-soft);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.plans-rfi-pack-summary-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.plans-rfi-pack-summary-heading h4 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--t-text);
}

.plans-rfi-pack-summary-heading small {
    display: block;
    margin-top: 0.2rem;
    color: var(--t-text-tertiary);
    font-size: 0.82rem;
}

.plans-rfi-pack-count {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--t-text-secondary);
    white-space: nowrap;
}

.plans-rfi-pack-generated,
.plans-rfi-pack-overview,
.plans-rfi-pack-status-message {
    margin: 0;
    color: var(--t-text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

.plans-rfi-pack-meta {
    min-height: 70px;
}

.plans-rfi-entries {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 180px;
    padding-bottom: 0.5rem;
}

.plans-rfi-sidecards {
    display: none;
}

.plans-rfi-sidecard {
    border: 1px solid var(--t-border);
    border-radius: var(--plans-radius-sm);
    background-color: var(--t-surface-soft);
    padding: 0.95rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.plans-rfi-sidecard-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.plans-rfi-sidecard-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--t-text);
}

.plans-rfi-sidecard-label {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--t-text-tertiary);
}

.plans-rfi-sidecard-empty {
    margin: 0;
    color: var(--t-text-tertiary);
    font-size: 0.9rem;
}

.plans-rfi-priority-items,
.plans-rfi-action-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.plans-rfi-priority-items li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.plans-rfi-priority-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.65rem;
    border-radius: 999px;
    background-color: var(--t-tab-active-bg);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--t-text);
}

.plans-rfi-priority-items p {
    margin: 0;
    color: var(--t-text);
    line-height: 1.4;
}

.plans-rfi-action-items-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.plans-rfi-action-bullet {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--plans-accent, #ffc955);
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.plans-rfi-action-items-list p {
    margin: 0;
    color: var(--t-text);
    line-height: 1.4;
}

@media (max-width: 1100px) {
    .plans-rfi-list-body {
        overflow: visible;
        max-height: none;
        padding-right: 0;
    }

    .plans-rfi-list {
        max-height: none;
    }
}

.plans-rfi-entry {
    border: 1px solid var(--plans-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--plans-radius-md);
    padding: 1rem 1.1rem;
    background-color: var(--t-surface-soft);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.plans-rfi-entry::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--lead-accent, var(--plans-accent, #ffc955));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.plans-rfi-entry:hover,
.plans-rfi-entry:focus-visible {
    border-color: var(--t-border-strong);
    background-color: var(--t-border-subtle);
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Match Leads hover lift */
}

.plans-rfi-entry:hover::before {
    opacity: 1;
}

.plans-rfi-entry.is-active {
    border-color: var(--plans-accent, #ffc955);
    background: rgba(255, 201, 85, 0.05);
}

.plans-rfi-entry.is-active::before {
    opacity: 1;
}

.plans-rfi-entry button {
    all: unset;
}

.plans-rfi-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
}

.plans-rfi-entry-identifiers {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.plans-rfi-entry-id {
    margin: 0;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-text-tertiary);
}

.plans-rfi-entry-subject {
    margin: 0;
    font-size: 1.05rem;
    color: var(--t-text);
    line-height: 1.3;
}

.plans-rfi-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--t-text-tertiary);
}

.plans-rfi-entry-tag {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background-color: var(--t-surface-hover);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.7rem;
    color: var(--t-text-secondary);
}

.plans-rfi-priority-badge {
    padding: 0.1rem 0.65rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.plans-rfi-priority-badge--lg {
    font-size: 0.85rem;
    padding: 0.2rem 0.9rem;
}

.plans-rfi-priority-critical,
.plans-rfi-priority-high {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.plans-rfi-priority-medium {
    background: rgba(250, 204, 21, 0.15);
    color: #fde047;
}

.plans-rfi-priority-low {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.plans-rfi-priority-unspecified {
    background-color: var(--t-surface-hover);
    color: var(--t-text-tertiary);
}

.plans-rfi-entry-note {
    margin: 0.65rem 0 0;
    color: var(--t-text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.plans-rfi-empty {
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--plans-radius-sm);
    padding: 1rem;
    text-align: center;
    color: var(--t-text-tertiary);
}

.plans-rfi-detail-header,
.plans-rfi-detail-meta {
    color: var(--t-text);
}

.plans-rfi-detail-meta {
    flex-wrap: wrap;
}

.plans-rfi-detail-card {
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--t-border);
    padding: 1.1rem 1.25rem;
    background-color: var(--t-surface-soft);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.plans-rfi-detail-card h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--t-text);
}

.plans-rfi-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.plans-rfi-detail-item {
    border: 1px solid var(--t-border);
    border-radius: var(--plans-radius-sm);
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
}

.plans-rfi-detail-label {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-text-tertiary);
    margin-bottom: 0.2rem;
}

.plans-rfi-detail-value {
    margin: 0;
    color: var(--t-text);
}

.plans-rfi-detail-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plans-rfi-detail-body section {
    background-color: var(--t-surface-soft);
    border-radius: var(--plans-radius-sm);
    border: 1px solid var(--t-border);
    padding: 0.85rem 1rem;
}

.plans-rfi-detail-body section h5 {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-text-tertiary);
}

.plans-rfi-detail-body section p {
    margin: 0;
    color: var(--t-text);
    line-height: 1.5;
}

.plans-rfi-impact {
    margin-top: 1rem;
    border: 1px solid var(--t-border);
    border-radius: var(--plans-radius-sm);
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
}

.plans-rfi-impact h5 {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-text-tertiary);
}

.plans-rfi-impact ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.plans-rfi-impact li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--t-text);
}

.plans-rfi-impact li strong {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-text-tertiary);
}

.plans-rfi-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.plans-rfi-detail-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--t-text-tertiary);
}

.plans-rfi-detail-header h3 {
    margin: 0;
}

.plans-rfi-detail-meta-line {
    margin: 0.25rem 0 0;
    color: var(--t-text-tertiary);
}

.plans-rfi-detail-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.plans-rfi-detail-meta span {
    font-weight: 600;
}

.report-exposure-card {
    border-radius: var(--plans-radius-md);
    padding: clamp(1rem, 2vw, 1.35rem);
    margin-top: 0.85rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(6, 10, 20, 0.85));
    border: 1px solid rgba(34, 197, 94, 0.35);
    font-size: 0.95rem;
    box-shadow: 0 25px 35px rgba(0, 0, 0, 0.35);
}

.report-exposure-card .rec-title {
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--t-text-secondary);
}

.report-exposure-card .rec-risk-level {
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0.35rem 0 0.5rem;
}

.report-exposure-card .rec-line {
    margin: 0.2rem 0;
    color: var(--t-text);
}

.report-exposure-card--medium {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(7, 10, 21, 0.88));
    border-color: rgba(234, 179, 8, 0.35);
}

.report-exposure-card--high {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.32), rgba(8, 8, 21, 0.9));
    border-color: rgba(239, 68, 68, 0.4);
}

.report-severity-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.report-severity-card {
    border-radius: var(--plans-radius-md);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border: 1px solid var(--reports-panel-highlight);
    background-color: var(--t-border-subtle);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.report-severity-card .label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.74);
}

.report-severity-card .value {
    font-size: 1.4rem;
    font-weight: 600;
}

.report-severity-high {
    background: linear-gradient(150deg, rgba(239, 68, 68, 0.22), rgba(7, 7, 19, 0.85));
    border-color: rgba(239, 68, 68, 0.35);
}

.report-severity-medium {
    background: linear-gradient(150deg, rgba(234, 179, 8, 0.2), rgba(8, 8, 20, 0.85));
    border-color: rgba(234, 179, 8, 0.35);
}

.report-severity-low {
    background: linear-gradient(150deg, rgba(34, 197, 94, 0.2), rgba(6, 10, 20, 0.85));
    border-color: rgba(34, 197, 94, 0.35);
}

.top-risks-card {
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--reports-border);
    background: rgba(7, 10, 22, 0.75);
    padding: 1rem 1.25rem;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35);
}

.top-risks-card .tr-header {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.top-risks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.top-risk-item {
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--reports-panel-highlight);
    padding: 0.75rem 0.95rem;
    background-color: var(--t-surface-soft);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.01);
}

.tri-title {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.tri-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--plans-muted);
}

.tri-severity-high,
.tri-severity-medium,
.tri-severity-low {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.tri-severity-high {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
}

.tri-severity-medium {
    background: rgba(234, 179, 8, 0.18);
    color: #fde68a;
}

.tri-severity-low {
    background: rgba(34, 197, 94, 0.2);
    color: #bbf7d0;
}

.risk-register-card {
    margin-top: 1.2rem;
    border-radius: var(--plans-radius-lg);
    border: 1px solid var(--reports-border);
    background: rgba(6, 8, 20, 0.8);
    padding: 1.15rem 1.35rem;
    box-shadow: 0 30px 40px rgba(0, 0, 0, 0.35);
}

.risk-register-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.risk-register-header h4 {
    margin: 0;
    font-size: 1rem;
}

.risk-register-count {
    font-size: 0.85rem;
    color: var(--plans-muted);
}

.risk-register-list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.risk-register-item {
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--reports-panel-highlight);
    background: rgba(10, 14, 30, 0.85);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.risk-register-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.1rem;
    position: relative;
}

.risk-register-item[open] summary {
    border-bottom: 1px solid var(--t-border-subtle);
}

.risk-register-item summary::-webkit-details-marker {
    display: none;
}

.risk-register-item summary::after {
    content: '\203A';
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    color: var(--plans-muted);
    font-size: 1.4rem;
    transition: transform 180ms ease;
}

.risk-register-item[open] summary::after {
    transform: translateY(-50%) rotate(270deg);
}

.risk-item-summary {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.risk-title-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}

.risk-id {
    font-size: 0.85rem;
    color: var(--plans-muted);
}

.risk-title {
    font-weight: 600;
}

.risk-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.risk-severity-badge {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    border: 1px solid transparent;
}

.risk-severity-high {
    background: rgba(239, 68, 68, 0.2);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.35);
}

.risk-severity-medium {
    background: rgba(234, 179, 8, 0.2);
    color: #fde68a;
    border-color: rgba(234, 179, 8, 0.35);
}

.risk-severity-low {
    background: rgba(34, 197, 94, 0.2);
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.35);
}

.risk-chip {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--reports-chip-border);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--reports-chip-text);
    background: var(--reports-chip-bg);
}

.risk-chip-cost {
    border-color: rgba(59, 130, 246, 0.35);
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.12);
}

.risk-detail-body {
    padding: 0.95rem 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: rgba(2, 4, 12, 0.4);
}

.risk-detail-summary {
    margin: 0;
    color: var(--plans-muted-light, #cbd5f5);
}

.risk-detail-block h5 {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--plans-label);
}

.risk-detail-block ul {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--plans-muted-light, #cbd5f5);
}

.risk-detail-block li + li {
    margin-top: 0.2rem;
}

.plans-dashboard-refresh {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .plans-dashboard-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .plans-dashboard-details {
        order: -1;
    }

}

@media (max-width: 640px) {
    .plans-dashboard-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .plans-dashboard-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .plans-dashboard-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }

    .plans-dashboard-table tr {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        border: 1px solid var(--t-border);
        border-radius: 18px;
        padding: 0.9rem 1rem;
        background: rgba(7, 10, 22, 0.85);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    }

    .plans-dashboard-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        padding: 0.35rem 0;
        font-size: 0.95rem;
        border: none;
    }

    .plans-dashboard-table td::before {
        content: attr(data-column);
        font-size: 0.72rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--plans-label);
    }

    .plans-dashboard-table td:first-child::before {
        content: "Type";
    }

    .plans-dashboard-table td:nth-child(2)::before {
        content: "Created";
    }

    .plans-dashboard-table td:nth-child(3)::before {
        content: "Action";
    }

    .plans-dashboard-table td:nth-child(3) {
        justify-content: flex-start;
    }

    .plans-dashboard-table td button {
        width: 100%;
    }
}


.plans-header-quota {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-left: auto;
    min-width: 0;
}

@media (max-width: 720px) {
    .plans-header-quota {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 720px) {
    .plans-chat-jump {
        width: 48px;
        height: 48px;
        right: 0.75rem;
        bottom: calc(var(--plans-mobile-input-safe-area, 96px) + var(--plans-mobile-keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px) + 6rem);
    }
}

@media (max-width: 540px) {
    .plans-vault-card-item {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    .plans-vault-thumb {
        width: 100%;
        height: clamp(140px, 45vw, 220px);
    }

    .plans-chat-jump {
        width: 44px;
        height: 44px;
        right: 0.75rem;
        bottom: calc(var(--plans-mobile-input-safe-area, 96px) + var(--plans-mobile-keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px) + 7rem);
    }

    .plans-vault-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.plans-billing-banner {
    border-radius: var(--plans-radius-md);
    border: 1px solid rgba(126, 250, 209, 0.32);
    background: linear-gradient(145deg, rgba(22, 46, 43, 0.9), rgba(12, 24, 22, 0.85));
    color: var(--plans-success);
    padding: 0.65rem 0.9rem;
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.plans-upload-card .plans-billing-banner {
    margin-bottom: 1.3rem;
}

.plans-quota-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
    min-width: 0;
}

#plans-upload .plans-quota-row {
    margin-left: 0;
    justify-content: flex-start;
}

.plans-quota-row .plans-btn {
    flex: 0 0 auto;
}

.plans-billing-banner[hidden] {
    display: none !important;
}

.plans-billing-banner-text {
    flex: 1;
    line-height: 1.4;
}

.plans-billing-banner-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--t-border-accent);
    background: transparent;
    color: inherit;
    position: relative;
    cursor: pointer;
}

.plans-billing-banner-close::before,
.plans-billing-banner-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: currentColor;
    transform-origin: center;
}

.plans-billing-banner-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.plans-billing-banner-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.plans-billing-banner-close:hover,
.plans-billing-banner-close:focus-visible {
    border-color: currentColor;
    background-color: var(--t-surface-hover);
    outline: none;
}

.plans-viewer-body {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 1.1rem);
    flex: 1;
    min-height: 0;
}

.plans-quota-pill {
    --pill-border: rgba(255, 201, 85, 0.45);
    --pill-glow: rgba(255, 201, 85, 0.22);
    --pill-text: rgba(255, 255, 255, 0.92);
    --pill-bg: linear-gradient(130deg, rgba(9, 13, 26, 0.9), rgba(4, 6, 14, 0.92));
    --quota-tier-color: var(--plans-accent);
    --quota-usage-color: rgba(255, 255, 255, 0.78);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    padding: 0.35rem 0.85rem 0.35rem 0.4rem;
    color: var(--pill-text);
    background: var(--pill-bg);
    position: relative;
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.45),
        0 0 20px var(--pill-glow);
    overflow: hidden;
    isolation: isolate;
    flex: 0 0 auto;
    max-width: min(100%, 320px);
    font-size: 0.75rem;
    backdrop-filter: blur(14px);
    transition:
        border-color var(--plans-transition),
        background var(--plans-transition),
        box-shadow var(--plans-transition);
}

.plans-quota-pill::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.16), transparent 55%);
    pointer-events: none;
    z-index: -1;
}

.plans-quota-pill[data-state="loading"] {
    opacity: 0.85;
    animation: pulseQuota 1.4s ease-in-out infinite;
}

.plans-quota-pill[data-state="blocked"] {
    --pill-border: rgba(255, 128, 149, 0.7);
    --pill-text: #ffe6ec;
    --pill-glow: rgba(255, 77, 108, 0.35);
    --pill-bg: linear-gradient(135deg, rgba(48, 9, 18, 0.95), rgba(20, 6, 12, 0.92));
    --quota-tier-color: #ffd8e1;
    --quota-usage-color: rgba(255, 214, 223, 0.9);
}

.plans-quota-pill[data-state="warning"] {
    --pill-border: rgba(255, 201, 85, 0.8);
    --pill-text: rgba(255, 231, 191, 0.95);
    --pill-glow: rgba(255, 180, 70, 0.4);
    --pill-bg: linear-gradient(135deg, rgba(44, 28, 8, 0.95), rgba(26, 16, 5, 0.92));
    --quota-tier-color: var(--plans-accent);
    --quota-usage-color: rgba(255, 231, 191, 0.85);
}

.plans-quota-pill[data-state="ok"] {
    --pill-border: rgba(126, 250, 209, 0.65);
    --pill-text: rgba(224, 255, 248, 0.95);
    --pill-glow: rgba(126, 250, 209, 0.38);
    --pill-bg: linear-gradient(135deg, rgba(9, 26, 23, 0.95), rgba(4, 14, 12, 0.9));
    --quota-tier-color: var(--plans-success);
    --quota-usage-color: rgba(224, 255, 248, 0.85);
}


.plans-quota-pill[data-tier="free"] {
    --pill-border: rgba(130, 148, 255, 0.55);
    --pill-glow: rgba(130, 148, 255, 0.22);
    --pill-bg: linear-gradient(140deg, rgba(15, 18, 38, 0.92), rgba(7, 10, 26, 0.9));
    --quota-tier-color: rgba(173, 192, 255, 0.95);
}

.plans-quota-pill[data-tier="visitor"] {
    --pill-border: rgba(126, 250, 209, 0.55);
    --pill-glow: rgba(126, 250, 209, 0.24);
    --pill-bg: linear-gradient(140deg, rgba(6, 18, 20, 0.95), rgba(3, 10, 12, 0.92));
    --quota-tier-color: rgba(126, 250, 209, 0.98);
}

.plans-quota-pill[data-tier="free"] .plans-quota-pill-icon {
    background: radial-gradient(circle at 35% 30%, rgba(130, 148, 255, 0.85), rgba(7, 11, 32, 0.4));
}

.plans-quota-pill[data-tier="visitor"] .plans-quota-pill-icon {
    background: radial-gradient(circle at 35% 30%, rgba(126, 250, 209, 0.85), rgba(4, 12, 10, 0.45));
}


.plans-quota-pill[data-tier="starter"],
.plans-quota-pill[data-tier="paid"] {
    --pill-border: rgba(255, 201, 85, 0.78);
    --pill-glow: rgba(255, 180, 70, 0.42);
    --pill-bg: linear-gradient(135deg, rgba(39, 23, 6, 0.96), rgba(22, 14, 5, 0.92));
    --quota-tier-color: rgba(255, 214, 156, 0.96);
}


.plans-quota-pill[data-tier="pro"] {
    --pill-border: rgba(126, 250, 209, 0.7);
    --pill-glow: rgba(126, 250, 209, 0.38);
    --pill-bg: linear-gradient(135deg, rgba(7, 26, 23, 0.96), rgba(4, 14, 12, 0.9));
    --quota-tier-color: var(--plans-success);
}


.plans-quota-pill[data-tier="enterprise"] {
    --pill-border: rgba(255, 255, 255, 0.65);
    --pill-glow: rgba(255, 255, 255, 0.32);
    --pill-bg: linear-gradient(145deg, rgba(24, 21, 41, 0.96), rgba(10, 9, 18, 0.92));
    --quota-tier-color: #f8f3ff;
}

.plans-quota-pill-label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    letter-spacing: 0.06em;
    text-transform: none;
    font-weight: 600;
    line-height: 1.1;
    min-width: 0;
}

.plans-quota-tier {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--quota-tier-color);
    text-transform: uppercase;
}

.plans-quota-dot {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

.plans-quota-usage {
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    color: var(--quota-usage-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-transform: uppercase;
}

.plans-quota-pill-icon {
    width: 26px;
    height: 26px;
    border-radius: 10px;
    border: 1px solid var(--t-border-accent);
    background: radial-gradient(circle at 30% 30%, var(--quota-tier-color), rgba(10, 14, 26, 0.65));
    position: relative;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.45),
        inset 0 0 10px rgba(255, 255, 255, 0.12);
}

.plans-quota-pill-icon::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 6px;
    border: 1px solid var(--t-border-accent);
    opacity: 0.8;
}

.plans-quota-pill-action {
    border: 1px solid rgba(255, 201, 85, 0.65);
    border-radius: 999px;
    background: rgba(255, 201, 85, 0.12);
    color: var(--plans-accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.56rem;
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    transition: background var(--plans-transition), border-color var(--plans-transition), color var(--plans-transition);
}

.plans-header-quota .plans-quota-pill {
    gap: 0.4rem;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35), 0 0 12px var(--pill-glow);
}

.plans-header-quota .plans-quota-pill-icon {
    width: 24px;
    height: 24px;
}

.plans-header-quota .plans-quota-tier {
    font-size: 0.58rem;
}

.plans-header-quota .plans-quota-usage {
    font-size: 0.54rem;
}

.plans-header-quota .plans-quota-pill-action {
    font-size: 0.5rem;
    padding: 0.2rem 0.6rem;
}

@media (max-width: 720px) {
    .plans-header-quota .plans-quota-pill {
        width: 100%;
        max-width: 100%;
        justify-content: space-between;
        gap: 0.4rem;
    }

    .plans-header-quota .plans-quota-pill-label {
        flex: 1;
    }
}

.plans-quota-pill-action:hover,
.plans-quota-pill-action:focus-visible {
    border-color: rgba(255, 201, 85, 0.95);
    background: rgba(255, 201, 85, 0.22);
    color: #1a1405;
}

@keyframes pulseQuota {
    0% { opacity: 0.65; }
    50% { opacity: 1; }
    100% { opacity: 0.65; }
}

@media (max-width: 720px) {
    .plans-quota-pill {
        font-size: 0.65rem;
        padding: 0.2rem 0.45rem 0.2rem 0.2rem;
        gap: 0.25rem;
        max-width: min(100%, 200px);
    }

    .plans-quota-pill-icon {
        width: 18px;
        height: 18px;
    }

    .plans-quota-pill-label {
        letter-spacing: 0.08em;
        font-size: 0.62rem;
        gap: 0.05rem;
    }

    .plans-quota-tier {
        font-size: 0.5rem;
        letter-spacing: 0.12em;
    }

    .plans-quota-usage {
        font-size: 0.62rem;
    }

    .plans-quota-pill::before {
        display: none;
    }

    .plans-quota-pill-action {
        margin-left: 0.3rem;
        padding: 0.15rem 0.5rem;
        font-size: 0.5rem;
    }
}


.plans-card-title {
    margin: 0;
    font-size: 0.96rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--t-text);
}

.plans-card-title-accent {
    color: var(--plans-accent);
}

.plans-card-subtitle {
    margin: 0.5rem 0 0;
    color: var(--plans-muted);
    line-height: 1.5;
}

.plans-chat-card .plans-card-title {
    font-size: 0.88rem;
    letter-spacing: 0.22em;
}

.plans-chat-card .plans-card-subtitle {
    font-size: 0.78rem;
}

.plans-card-header-compact {
    padding: 0.3rem 0.6rem !important;
    margin-bottom: 0.25rem !important;
}

.plans-chat-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.plans-chat-header-row .plans-card-title {
    font-size: 0.75rem;
    margin: 0;
}

/* Conversation dropdown */
.plans-chat-conversations-dropdown {
    position: relative;
    flex-shrink: 0;
}

.plans-chat-conversations-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.2);
    color: var(--t-info-text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.plans-chat-conversations-trigger-icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.plans-chat-conversations-trigger:hover,
.plans-chat-conversations-trigger:focus-visible {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.4);
}

.plans-chat-conversations-trigger[aria-expanded="true"] {
    background: rgba(96, 165, 250, 0.22);
    border-color: rgba(96, 165, 250, 0.5);
}

.plans-chat-conversations-trigger[aria-expanded="true"] .plans-chat-conversations-chevron {
    transform: rotate(180deg);
}

.plans-chat-conversations-current {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plans-chat-conversations-chevron {
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.plans-chat-conversations-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 380px;
    max-width: 440px;
    background: rgba(12, 14, 26, 0.98);
    border: 1px solid var(--t-border-medium);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
    z-index: 100;
    overflow: hidden;
    backdrop-filter: blur(16px);
    padding: 0;
}

.plans-chat-conversations-menu[hidden] {
    display: none;
}

/* Menu header with label + new chat */
.plans-chat-conversations-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem 0.45rem;
}

.plans-chat-conversations-menu-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-text-tertiary);
}

.plans-chat-conversations-new {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(96, 165, 250, 0.25);
    background: rgba(96, 165, 250, 0.08);
    color: var(--t-link);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.plans-chat-conversations-new:hover,
.plans-chat-conversations-new:focus-visible {
    background: rgba(96, 165, 250, 0.16);
    border-color: rgba(96, 165, 250, 0.45);
}

.plans-chat-conversations-divider {
    height: 1px;
    margin: 0 0.65rem;
    background: rgba(255, 255, 255, 0.07);
}

.plans-chat-conversations-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.35rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Conversation item — two-line card layout */
.plans-chat-conversations-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.6rem 0.5rem 0.6rem 0.65rem;
    border: none;
    background: transparent;
    color: var(--t-text-secondary);
    text-align: left;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease;
    position: relative;
}

.plans-chat-conversations-item:hover,
.plans-chat-conversations-item:focus-visible {
    background: rgba(255, 255, 255, 0.05);
}

.plans-chat-conversations-item.is-active {
    background: rgba(255, 201, 85, 0.08);
}

.plans-chat-conversations-item-left {
    flex-shrink: 0;
    padding-top: 2px;
}

.plans-chat-conversations-item-icon {
    width: 16px;
    height: 16px;
    opacity: 0.4;
}

.plans-chat-conversations-item.is-active .plans-chat-conversations-item-icon {
    opacity: 1;
    color: var(--plans-accent, #ffc955);
}

.plans-chat-conversations-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plans-chat-conversations-item-title {
    font-size: 0.82rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--t-text);
}

.plans-chat-conversations-item.is-active .plans-chat-conversations-item-title {
    color: var(--plans-accent, #ffc955);
}

.plans-chat-conversations-item-preview {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.plans-chat-conversations-item-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding-top: 1px;
    margin-right: 0.25rem;
}

.plans-chat-conversations-item-time {
    font-size: 0.65rem;
    color: rgba(148, 163, 184, 0.4);
    white-space: nowrap;
}

.plans-chat-conversations-item-count {
    font-size: 0.62rem;
    color: var(--t-text-tertiary);
    background-color: var(--t-surface-input);
    padding: 0.05rem 0.35rem;
    border-radius: 99px;
    line-height: 1.4;
}

/* Delete button — always visible, red bg on hover */
.plans-chat-conversations-item-delete {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.plans-chat-conversations-item-delete svg {
    stroke: rgba(255, 255, 255, 0.55);
    transition: stroke 0.15s ease;
}

.plans-chat-conversations-item-delete:hover {
    background: rgba(255, 80, 80, 0.2);
}

.plans-chat-conversations-item-delete:hover svg {
    stroke: #fca5a5;
}

/* Empty state */
.plans-chat-conversations-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 0.75rem;
    font-size: 0.8rem;
    color: var(--t-text-tertiary);
    text-align: center;
    gap: 0.15rem;
}

/* Hide chat-history pill on portrait / narrow screens — hamburger menu covers it */
/* Also push "Chat with your plans" title to the right on portrait */
@media (max-width: 768px), (orientation: portrait) {
    .plans-chat-conversations-dropdown {
        display: none !important;
    }
    .plans-chat-header-row {
        justify-content: flex-end;
    }
}

.plans-chat-header-row .plans-chat-setting {
    margin-left: auto;
}

.plans-chat-settings {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.plans-chat-setting {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--t-border);
    background-color: var(--t-border-subtle);
    font-size: 0.78rem;
    color: var(--plans-text);
    user-select: none;
}

.plans-chat-setting-checkbox {
    width: 15px;
    height: 15px;
    accent-color: var(--plans-accent);
}

.plans-chat-setting-label {
    line-height: 1;
    white-space: nowrap;
}

/* Deep Research toggle styling - Blue theme */
.plans-chat-setting--deep-research {
    border-color: rgba(91, 156, 244, 0.3);
    background: rgba(91, 156, 244, 0.08);
}

.plans-chat-setting--deep-research:has(.plans-chat-setting-checkbox:checked) {
    border-color: rgba(91, 156, 244, 0.6);
    background: rgba(91, 156, 244, 0.15);
    box-shadow: 0 0 12px rgba(91, 156, 244, 0.2);
}

.plans-deep-research-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 2px;
    stroke: #5b9cf4;
}

.plans-chat-setting--deep-research .plans-chat-setting-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--t-info-text);
}

/* Deep Research active indicator in chat - Blue theme */
.plans-deep-research-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--plans-radius-md);
    border: 1px solid rgba(91, 156, 244, 0.4);
    background: linear-gradient(145deg, rgba(30, 58, 138, 0.85), rgba(23, 37, 84, 0.9));
    color: var(--t-info-text);
    font-size: 0.85rem;
}

.plans-deep-research-notice-icon {
    width: 18px;
    height: 18px;
    stroke: #5b9cf4;
    animation: plans-deep-research-pulse 2s ease-in-out infinite;
}

@keyframes plans-deep-research-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.plans-deep-research-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: rgba(147, 197, 253, 0.8);
}

.plans-deep-research-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(91, 156, 244, 0.3);
    border-top-color: var(--t-link);
    border-radius: 50%;
    animation: plans-spin 1s linear infinite;
}

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

/* ==============================
   Deep Research Activity Display 
   ============================== */
.deep-research-container {
    width: 100%;
}

/* CRITICAL: Reset text-fill and background-clip from parent .plans-reasoning-inline-summary */
/* The parent uses background-clip: text which makes all children invisible */
.plans-reasoning-inline-summary .deep-research-status,
.plans-reasoning-inline-summary .deep-research-status * {
    -webkit-text-fill-color: initial !important;
    text-fill-color: initial !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}

/* Hide dots indicator when deep research is active - prevents any blinking */
[data-deep-research-active="true"] .plans-reasoning-inline-indicator {
    display: none !important;
}

.deep-research-status {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    background: #1a1d24 !important;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(91, 156, 244, 0.3);
}

.deep-research-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.deep-research-icon {
    font-size: 1.2rem;
    opacity: 1 !important;
    filter: none !important;
    animation: deep-research-pulse 2s ease-in-out infinite;
}

@keyframes deep-research-pulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(91, 156, 244, 0.8)); 
    }
}

.deep-research-title {
    font-weight: 600;
    color: #ffffff !important;
    letter-spacing: 0.02em;
    font-size: 0.9rem;
    opacity: 1 !important;
}

.deep-research-stats,
.deep-research-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: #ffffff !important;
    font-variant-numeric: tabular-nums;
    background: rgba(91, 156, 244, 0.4);
    padding: 0.2rem 0.5rem;
    border-radius: 100px;
    white-space: nowrap;
    opacity: 1 !important;
}

/* Progress Bar - Enhanced */
/* Progress Bar - Blue theme */
.deep-research-progress-bar {
    height: 6px;
    background: rgba(91, 156, 244, 0.15);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.deep-research-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, 
        #2563eb 0%, 
        #5b9cf4 50%, 
        #93c5fd 100%
    );
    background-size: 200% 100%;
    border-radius: 3px;
    transition: width 0.5s ease-out;
    position: relative;
    animation: deep-research-gradient 3s ease infinite;
}

@keyframes deep-research-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.deep-research-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: deep-research-shimmer 1.2s ease-in-out infinite;
}

@keyframes deep-research-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.deep-research-progress-indeterminate {
    width: 35% !important;
    animation: deep-research-indeterminate 1.8s ease-in-out infinite, deep-research-gradient 3s ease infinite;
}

@keyframes deep-research-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Activity List - Blue theme */
.deep-research-activities {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 120px; /* Ensure box stays open */
    max-height: 400px; /* Increase to show more activities */
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 156, 244, 0.3) transparent;
    /* Ensure scroll container works properly */
    overscroll-behavior: contain;
}

.deep-research-activities::-webkit-scrollbar {
    width: 4px;
}

.deep-research-activities::-webkit-scrollbar-track {
    background: transparent;
}

.deep-research-activities::-webkit-scrollbar-thumb {
    background: rgba(91, 156, 244, 0.4);
    border-radius: 2px;
}

.deep-research-activity {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.45;
    transition: all 0.25s ease;
    background: #2a2d35 !important;
    border: 1px solid rgba(91, 156, 244, 0.2);
}

.deep-research-activity.completed {
    opacity: 0.75 !important;
}

.deep-research-activity.in-progress {
    opacity: 0.9 !important;
}

.deep-research-activity.latest {
    opacity: 1 !important;
    background: rgba(91, 156, 244, 0.2) !important;
    border: 1px solid rgba(91, 156, 244, 0.5);
    box-shadow: 0 2px 8px rgba(91, 156, 244, 0.2);
    animation: deep-research-activity-glow 2s ease-in-out infinite;
}

@keyframes deep-research-activity-glow {
    0%, 100% { box-shadow: 0 2px 8px rgba(91, 156, 244, 0.15); }
    50% { box-shadow: 0 2px 12px rgba(91, 156, 244, 0.25); }
}

.deep-research-activity .activity-icon {
    flex-shrink: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    opacity: 1 !important;
}

.deep-research-activity .activity-text {
    flex: 1;
    color: #ffffff !important;
    word-break: break-word;
    opacity: 1 !important;
}

/* Activity Type Colors - Enhanced */
.deep-research-activity.activity-search .activity-highlight {
    color: #93c5fd !important;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.25);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    opacity: 1 !important;
}

/* Clickable links for reading pages */
.deep-research-activity .activity-link {
    color: #86efac !important;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(134, 239, 172, 0.6);
    transition: all 0.2s ease;
    opacity: 1 !important;
}

.deep-research-activity .activity-link:hover {
    color: #a7f3c8 !important;
    border-bottom-color: #86efac;
    text-shadow: 0 0 8px rgba(134, 239, 172, 0.4);
}

.deep-research-activity.activity-read .activity-domain {
    color: #86efac !important;
    font-weight: 600;
    opacity: 1 !important;
}

.deep-research-activity.activity-find .activity-text {
    color: #fde047 !important;
    opacity: 1 !important;
}

.deep-research-activity.activity-file .activity-highlight {
    color: #fbbf24;
    font-weight: 600;
    background: rgba(251, 191, 36, 0.25);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

/* Thinking/Reasoning - Blue theme */
.deep-research-activity.activity-thinking {
    background: #252830 !important;
    border: 1px solid rgba(91, 156, 244, 0.3);
    border-left: 3px solid #5b9cf4;
}

.deep-research-activity.activity-thinking .activity-thinking-text {
    color: #ffffff !important;
    font-style: italic;
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 1 !important;
}

.deep-research-activity.activity-thinking.latest {
    background: #2a3040 !important;
    border-color: rgba(91, 156, 244, 0.4);
    border-left: 3px solid #5b9cf4;
}

.deep-research-activity.activity-thinking.latest .activity-thinking-text {
    color: #ffffff !important;
}

/* Mobile Responsive - Deep Research */
@media (max-width: 768px) {
    .deep-research-status {
        padding: 0.75rem;
        gap: 0.6rem;
        border-radius: 10px;
    }
    
    .deep-research-header {
        font-size: 0.85rem;
        gap: 0.4rem;
    }
    
    .deep-research-icon {
        font-size: 1.1rem;
    }
    
    .deep-research-title {
        font-size: 0.85rem;
    }
    
    .deep-research-stats,
    .deep-research-time {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }
    
    .deep-research-progress-bar {
        height: 5px;
    }
    
    .deep-research-activities {
        gap: 0.4rem;
        min-height: 100px; /* Keep box open on mobile */
        max-height: 300px; /* Taller for more visibility on mobile */
    }
    
    .deep-research-activity {
        padding: 0.4rem 0.6rem;
        font-size: 0.78rem;
        gap: 0.5rem;
        border-radius: 6px;
    }
    
    .deep-research-activity .activity-icon {
        font-size: 0.85rem;
    }
    
    .deep-research-activity.activity-thinking .activity-thinking-text {
        font-size: 0.76rem;
    }
    
    .deep-research-activity.activity-search .activity-highlight,
    .deep-research-activity.activity-file .activity-highlight {
        padding: 0.05rem 0.2rem;
    }
}

@media (max-width: 480px) {
    .deep-research-status {
        padding: 0.6rem;
        gap: 0.5rem;
    }
    
    .deep-research-header {
        font-size: 0.8rem;
    }
    
    .deep-research-title {
        font-size: 0.8rem;
    }
    
    .deep-research-activities {
        min-height: 80px; /* Keep box open on small screens */
        max-height: 220px; /* Scrollable on small screens */
    }
    
    .deep-research-activity {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .deep-research-activity .activity-icon {
        font-size: 0.8rem;
    }
    
    .deep-research-activity.activity-thinking .activity-thinking-text {
        font-size: 0.73rem;
    }
}

/* Deep Research Sources Display - Blue theme */
.plans-deep-research-sources {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(91, 156, 244, 0.25);
}

.plans-deep-research-sources-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--t-link);
    margin-bottom: 0.75rem;
}

.plans-deep-research-sources-header svg {
    stroke: #5b9cf4;
}

.plans-deep-research-sources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.plans-deep-research-source {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    text-decoration: none;
    color: var(--t-text);
    background: rgba(91, 156, 244, 0.15);
    border: 1px solid rgba(91, 156, 244, 0.35);
    border-radius: var(--plans-radius-sm);
    transition: all 0.2s ease;
}

.plans-deep-research-source:hover {
    background: rgba(91, 156, 244, 0.25);
    border-color: rgba(91, 156, 244, 0.5);
    color: var(--t-text);
}

.plans-deep-research-source .source-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--t-text);
    background: rgba(91, 156, 244, 0.6);
    border-radius: 50%;
}

.plans-deep-research-source .source-title {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plans-deep-research-source .source-external {
    opacity: 0.6;
    stroke: currentColor;
}

.plans-deep-research-source:hover .source-external {
    opacity: 1;
}

/* Extraction status notice - disabled */
#extractionStatusNotice {
    display: none !important;
}

.plans-chat-alert {
    display: none;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
    padding: 0.85rem 1rem;
    border-radius: var(--plans-radius-md);
    border: 1px solid rgba(255, 201, 85, 0.4);
    background: linear-gradient(140deg, rgba(38, 24, 6, 0.85), rgba(13, 10, 6, 0.9));
    color: var(--plans-accent);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
}

.plans-chat-alert[data-state="visible"] {
    display: flex;
}

.plans-chat-alert[data-variant="danger"] {
    border-color: rgba(255, 130, 149, 0.55);
    background: linear-gradient(145deg, rgba(48, 6, 15, 0.92), rgba(20, 6, 9, 0.92));
    color: #ffdfe6;
}

.plans-chat-alert[data-variant="info"] {
    border-color: rgba(100, 180, 255, 0.55);
    background: linear-gradient(145deg, rgba(6, 28, 58, 0.92), rgba(6, 12, 24, 0.92));
    color: #d0e8ff;
}

.plans-extraction-progress {
    width: 100%;
    height: 4px;
    background: rgba(100, 180, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.plans-extraction-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, rgba(100, 180, 255, 0.6), rgba(100, 180, 255, 0.9));
    border-radius: 2px;
    animation: plans-extraction-progress-anim 1.8s ease-in-out infinite;
}

@keyframes plans-extraction-progress-anim {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

.plans-chat-alert-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
    opacity: 0.9;
    box-shadow: 0 0 18px currentColor;
    margin-top: 0.15rem;
}

.plans-chat-alert-body {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex: 1;
    flex-wrap: wrap;
}

.plans-chat-alert-text {
    margin: 0;
    line-height: 1.4;
    flex: 1 1 200px;
}

.plans-chat-alert-action {
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    padding: 0.45rem 1.1rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--plans-transition), color var(--plans-transition);
}

.plans-chat-alert-action:hover,
.plans-chat-alert-action:focus-visible {
    background-color: var(--t-surface-hover);
    outline: none;
}

@media (max-width: 720px) {
    .plans-chat-alert {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .plans-chat-alert-body {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0.5rem;
    }

    .plans-chat-alert-action {
        width: 100%;
        text-align: center;
    }
    
    /* Chat header row mobile - simplified with just title */
    .plans-chat-header-row {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
    }
    
    /* Hide conversations dropdown on mobile - now in hamburger menu */
    .plans-chat-conversations-dropdown {
        display: none;
    }
    
    .plans-chat-conversations-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .plans-chat-conversations-current {
        max-width: none;
        flex: 1;
    }
    
    .plans-chat-conversations-menu {
        width: 100%;
        max-width: none;
        left: 0;
        right: 0;
    }
    
    .plans-chat-conversations-list {
        max-height: 200px;
    }
    
    .plans-chat-conversations-item {
        padding: 0.65rem 0.75rem;
        font-size: 0.82rem;
    }
    
    .plans-chat-conversations-new {
        padding: 0.7rem 0.85rem;
        font-size: 0.82rem;
    }
    
    /* Hide all settings on mobile - Deep Research toggle is in the options drawer */
    .plans-chat-settings {
        display: none;
    }
    
    .plans-chat-header-row .plans-chat-setting {
        display: none;
    }
    
    .plans-chat-header-row .plans-chat-setting--deep-research {
        display: none !important;
    }
}

.plans-card-footer {
    margin-top: 1.5rem;
    font-size: 0.78rem;
    color: var(--plans-muted);
}

.plans-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--plans-transition), box-shadow var(--plans-transition), border-color var(--plans-transition), background var(--plans-transition);
}

.plans-btn-primary {
    background: linear-gradient(120deg, var(--plans-accent), var(--plans-accent-hot));
    color: #141217;
    box-shadow: 0 18px 35px rgba(255, 157, 77, 0.35);
}

.plans-btn-primary:hover {
    transform: translateY(-2px);
}

.plans-btn-secondary {
    background: transparent;
    border-color: rgba(255, 201, 85, 0.65);
    color: var(--plans-accent);
}

.plans-btn-secondary:hover {
    border-color: var(--plans-accent);
}

.plans-btn-download {
    border-color: rgba(255, 201, 85, 0.85);
    background: rgba(20, 18, 23, 0.78);
    color: var(--t-text);
    box-shadow: none;
}

.plans-btn-download:hover {
    border-color: var(--plans-accent-hot);
    background: rgba(20, 18, 23, 0.95);
}

.plans-btn-download:disabled,
.plans-btn-download[disabled] {
    border-color: rgba(255, 201, 85, 0.35);
    background: rgba(20, 18, 23, 0.45);
    color: var(--t-text-tertiary);
}

.plans-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--t-border);
    font-size: 0.8rem;
    line-height: 1;
    background-color: var(--t-border-subtle);
    margin-bottom: 0.5rem;
}

.plans-chip-outline {
    border-color: rgba(255, 201, 85, 0.45);
    color: var(--plans-accent);
    background: transparent;
}

.plans-chip-soft {
    background: rgba(255, 201, 85, 0.12);
    border-color: transparent;
    color: var(--plans-accent);
}

.plans-chip-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--plans-accent);
    display: inline-block;
}

/* Landing */

.plans-landing-root {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(0.75rem, 3vw, 1.85rem) clamp(1.1rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem);
    width: 100%;
    color: var(--plans-text);
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.plans-marketing-nav {
    margin-bottom: 2rem;
    padding-top: 1rem;
}

.plans-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    border: 1px solid var(--plans-border);
    border-radius: var(--plans-radius-lg);
    padding: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 3.5rem;
    background: linear-gradient(140deg, rgba(24, 30, 55, 0.92), rgba(4, 6, 12, 0.95));
    box-shadow: var(--plans-shadow-card);
}

.plans-hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.plans-main-viewer-shell {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex: 1;
    min-height: 0;
}
.plans-viewer-card.is-collapsed-desktop .plans-viewer-body {
    display: none;
}

.plans-viewer-card.is-collapsed-desktop .plans-viewer-header {
    display: none;
}

.plans-viewer-handle {
    position: fixed;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    border-radius: 16px 0 0 16px;
    border: 1px solid rgba(79, 139, 255, 0.35);
    background: rgba(6, 7, 14, 0.95);
    color: var(--t-link-hover);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.7rem;
    padding: 0.65rem 0.35rem;
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    display: none;
    z-index: 21;
}

.plans-viewer-handle.is-visible {
    display: inline-flex;
}

.plans-viewer-handle.is-desktop-handle {
    top: clamp(4.5rem, 12vh, 10rem);
    transform: none;
    writing-mode: horizontal-tb;
    padding: 0.55rem 1.2rem;
    border-radius: 0 999px 999px 0;
    letter-spacing: 0.18em;
    left: 0.4rem;
    right: auto;
}

.plans-session-grid.is-dashboard-mode #plansViewerHandle,
.plans-session-grid.is-document-mode #plansViewerHandle,
.plans-session-grid.is-files-mode #plansViewerHandle,
.plans-session-grid.is-fileviewer-mode #plansViewerHandle,
.plans-session-grid.is-hires-mode #plansViewerHandle,
.plans-session-grid.is-takeoff-mode #plansViewerHandle,
.plans-session-grid.is-home-mode #plansViewerHandle {
    display: none !important;
}

.plans-viewer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--plans-transition);
    z-index: 19;
}

.plans-viewer-scrim.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.plans-workspace-tabs {
    display: flex;
    gap: 0.75rem;
    padding: clamp(0.15rem, 0.5vw, 0.5rem) 0 0.5rem;
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid var(--t-border);
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.plans-workspace-tabs a.plans-workspace-tab {
    text-decoration: none;
}

/* Bring the Takeoff workspace content closer to the header/tabs.
   In Takeoff mode the card isn't always affected by sticky `top:` (no page scroll),
   so we reduce the tabs' own vertical footprint instead. */
.plans-session-grid.is-takeoff-mode .plans-workspace-tabs {
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    padding-bottom: 0.5rem;
}

/* Takeoff mode: reduce primary column spacing to move card up */
.plans-session-grid.is-takeoff-mode .plans-primary-column {
    gap: 0.25rem;
    margin-top: -0.25rem;
}

/* Command mode: collapse gap so command card sits flush below workspace tabs */
.plans-session-grid.is-command-mode .plans-primary-column {
    gap: 0;
}

/* Hide the empty plans-tool-drawer above the command drawer in command mode */
.plans-session-grid.is-command-mode .plans-primary-column > .plans-tool-drawer:not(.plans-tool-drawer--command) {
    display: none;
}

/* DocBuilder mode: collapse gap so docbuilder card sits flush below workspace tabs */
.plans-session-grid.is-docbuilder-mode .plans-primary-column {
    gap: 0;
    align-self: stretch;
}

/* DocBuilder tool drawer must fill the primary column so the card gets real height */
.plans-session-grid.is-docbuilder-mode .plans-tool-drawer--docbuilder {
    flex: 1;
    min-height: 0;
}

.plans-session-grid.is-docbuilder-mode .plans-primary-column > .plans-tool-drawer:not(.plans-tool-drawer--docbuilder) {
    display: none;
}

/* Payments mode: collapse gap so payments card sits flush below workspace tabs */
.plans-session-grid.is-payments-mode .plans-primary-column {
    gap: 0;
    align-self: stretch;
}

.plans-session-grid.is-payments-mode .plans-tool-drawer--payments {
    flex: 1;
    min-height: 0;
}

.plans-session-grid.is-payments-mode .plans-primary-column > .plans-tool-drawer:not(.plans-tool-drawer--payments) {
    display: none;
}

/* Projects mode: collapse gap so projects card sits flush below workspace tabs */
.plans-session-grid.is-projects-mode .plans-primary-column {
    gap: 0;
}

/* Hide other drawers in projects mode */
.plans-session-grid.is-projects-mode .plans-primary-column > .plans-tool-drawer:not(.plans-tool-drawer--projects) {
    display: none;
}

/* Projects drawer fills available height */
.plans-tool-drawer--projects {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.plans-tool-drawer--projects > section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ═══ Home Mode ═══════════════════════════════════════════════════════════ */
.plans-session-grid.is-home-mode .plans-primary-column {
    gap: 0;
    align-self: stretch;
}

.plans-session-grid.is-home-mode .plans-tool-drawer--home {
    flex: 1;
    min-height: 0;
}

.plans-session-grid.is-home-mode .plans-primary-column > .plans-tool-drawer:not(.plans-tool-drawer--home) {
    display: none;
}

/* Home card layout */
.plans-home-card {
    overflow-y: auto;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.home-onboarding {
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(1.2rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.home-onboarding--compact {
    max-width: 900px;
    padding: clamp(0.75rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1.5rem);
    gap: 1rem;
    height: 100%;
    overflow-y: auto;
}

/* Welcome header */
.home-welcome {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.home-welcome--compact {
    gap: 0.25rem;
}

.home-welcome-icon {
    color: var(--accent-primary, #3b82f6);
    margin-bottom: 0.25rem;
}

.home-welcome-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin: 0;
}

.home-welcome--compact .home-welcome-title {
    font-size: 1.25rem;
}

.home-welcome-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
    max-width: 480px;
    line-height: 1.5;
}

.home-welcome--compact .home-welcome-subtitle {
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Two-column layout */
.home-two-col {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1.25rem;
    flex: 1;
    min-height: 0;
}

.home-col-heading {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.6rem 0;
}

/* Onboarding checklist */
.home-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.home-checklist--compact {
    gap: 0.4rem;
}

.home-step {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.5);
    transition: border-color 0.2s, background 0.2s;
}

.home-step--compact {
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
}

.home-step--done {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.06);
}

.home-step-indicator {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary, #3b82f6);
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 2px;
}

.home-step-indicator--sm {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
    margin-top: 1px;
}

.home-step--done .home-step-indicator {
    background: rgba(34, 197, 94, 0.15);
    color: var(--t-success-text);
}

.home-step-check {
    color: var(--t-success-text);
}

.home-step-number {
    line-height: 1;
}

.home-step-body {
    flex: 1;
    min-width: 0;
}

.home-step-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    margin: 0 0 0.25rem 0;
}

.home-step--compact .home-step-title {
    font-size: 0.85rem;
    margin: 0;
}

.home-step-desc {
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
    line-height: 1.5;
}

.home-step-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.home-step--compact .home-step-actions {
    margin-top: 0.35rem;
}

.home-step-connected {
    font-size: 0.85rem;
    color: var(--t-success-text);
    margin: 0.5rem 0 0 0;
    font-weight: 500;
}

.home-step--compact .home-step-connected {
    font-size: 0.75rem;
    margin: 0.15rem 0 0 0;
}

/* Buttons */
.home-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity 0.15s;
}

.home-btn--sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    border-radius: 6px;
}

.home-btn:hover {
    opacity: 0.85;
}

.home-btn--outlook {
    background: #0078d4;
    color: var(--t-text);
}

.home-btn--gmail {
    background: #ea4335;
    color: var(--t-text);
}

.home-btn--primary {
    background: var(--accent-primary, #3b82f6);
    color: var(--t-text);
}

.home-btn--secondary {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-secondary, #94a3b8);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.home-btn--desktop {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.home-btn--desktop:hover {
    background: rgba(74, 222, 128, 0.25);
}

/* Capabilities grid */
.home-capabilities {
    padding-top: 0.5rem;
}

.home-capabilities-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin: 0 0 1rem 0;
    text-align: center;
}

.home-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.home-capabilities-grid--compact {
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

.home-cap {
    padding: 1rem;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.home-cap--compact {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.home-cap--compact .home-cap-icon {
    margin-bottom: 0;
    flex-shrink: 0;
    padding-top: 1px;
}

.home-cap--highlight {
    border-color: rgba(74, 222, 128, 0.25);
    background: rgba(74, 222, 128, 0.05);
}

.home-cap-icon {
    color: var(--accent-primary, #3b82f6);
    margin-bottom: 0.5rem;
}

.home-cap h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    margin: 0 0 0.25rem 0;
}

.home-cap--compact h4 {
    font-size: 0.8rem;
    margin: 0 0 0.1rem 0;
}

.home-cap p {
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
    line-height: 1.45;
}

.home-cap--compact p {
    font-size: 0.72rem;
    line-height: 1.35;
}

/* Mobile: stack columns */
@media (max-width: 640px) {
    .home-two-col {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .home-onboarding--compact {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    .home-welcome--compact .home-welcome-title {
        font-size: 1.1rem;
    }
}

/* Home tab styling */
.plans-workspace-tab--home {
    color: var(--accent-primary, #3b82f6);
}

.plans-workspace-tab--home.is-active {
    border-bottom-color: var(--accent-primary, #3b82f6);
}

@keyframes plans-notification-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 201, 85, 0.55);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 201, 85, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 201, 85, 0);
    }
}

.plans-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 130;
    pointer-events: none;
}

.plans-toast {
    pointer-events: auto;
    background: rgba(8, 14, 18, 0.96);
    border: 1px solid var(--t-border);
    border-left: 4px solid var(--plans-accent);
    color: var(--t-text);
    padding: 1rem 1.25rem;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
    max-width: min(24rem, 92vw);
    transform: translateY(20px);
    opacity: 0;
    transition: transform var(--plans-transition), opacity var(--plans-transition);
}

.plans-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.plans-toast-content strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.plans-toast-content p {
    margin: 0;
    color: var(--t-text-secondary);
    font-size: 0.85rem;
}

.plans-toast-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.plans-toast-action {
    font-size: 0.85rem;
    padding: 0.45rem 0.85rem;
}

.plans-toast-dismiss {
    border: none;
    background: transparent;
    color: var(--t-text-tertiary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 50%;
    transition: color var(--plans-transition), background var(--plans-transition);
}

.plans-toast-dismiss:hover,
.plans-toast-dismiss:focus-visible {
    color: var(--t-text);
    background-color: var(--t-surface-hover);
    outline: none;
}

@media (max-width: 768px) {
    .plans-toast-container {
        left: 0.75rem;
        right: 0.75rem;
        /* Position above the chat input bar to avoid overlap */
        bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }

    .plans-toast {
        max-width: 100%;
    }
}

.plans-workspace-tab {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(246, 247, 255, 0.72);
    border-radius: 999px;
    padding: 0.4rem 1.4rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 0 0 auto;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    position: relative;
    transition: border-color var(--plans-transition), color var(--plans-transition), background var(--plans-transition), box-shadow var(--plans-transition);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.plans-workspace-tab:hover {
    border-color: rgba(255, 201, 85, 0.35);
    color: rgba(246, 247, 255, 0.92);
    background: linear-gradient(135deg, rgba(255, 201, 85, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 0 12px rgba(255, 201, 85, 0.06);
}

.plans-workspace-tab.is-active {
    border-color: rgba(255, 201, 85, 0.55);
    color: #ffc955;
    background: linear-gradient(135deg, rgba(255, 201, 85, 0.12) 0%, rgba(255, 201, 85, 0.04) 100%);
    box-shadow: 0 0 16px rgba(255, 201, 85, 0.08), inset 0 0 0 1px rgba(255, 201, 85, 0.06);
}

.plans-workspace-tab-label {
    font-weight: 600;
}

/* Unread badge inside a workspace tab (used by Chat / TM) */
.plans-workspace-tab-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: var(--t-text);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.plans-workspace-tab-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity var(--plans-transition);
}

.plans-workspace-tab:hover .plans-workspace-tab-icon,
.plans-workspace-tab.is-active .plans-workspace-tab-icon {
    opacity: 1;
}

.plans-workspace-tab-meta {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--t-text-tertiary);
}

.plans-workspace-tab.is-active .plans-workspace-tab-meta {
    color: rgba(255, 201, 85, 0.85);
}

.plans-workspace-tab.has-notification {
    border-color: rgba(255, 87, 34, 0.75);
    color: var(--t-text);
}

.plans-workspace-tab.has-notification::after {
    content: '';
    position: absolute;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #ff6b6b;
    top: 0.35rem;
    right: 0.45rem;
    box-shadow: 0 0 0 3px rgba(6, 11, 28, 0.85);
}

/* ============================================
   Brain Dropdown (Role Switcher)
   ============================================ */

.plans-brain-dropdown {
    position: relative;
    display: inline-block;
}

.plans-brain-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.plans-brain-arrow {
    font-size: 0.65em;
    opacity: 0.6;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

.plans-brain-dropdown.open .plans-brain-arrow {
    transform: rotate(180deg);
}

.plans-brain-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    background: var(--plans-panel);
    border: 1px solid var(--plans-border-strong);
    border-radius: var(--plans-radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.plans-brain-dropdown.open .plans-brain-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.plans-brain-menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--plans-text);
    border-bottom: 1px solid var(--plans-border);
    transition: background 0.15s ease;
}

.plans-brain-menu-item:last-child {
    border-bottom: none;
}

.plans-brain-menu-item:first-child {
    border-radius: var(--plans-radius-md) var(--plans-radius-md) 0 0;
}

.plans-brain-menu-item:last-child {
    border-radius: 0 0 var(--plans-radius-md) var(--plans-radius-md);
}

.plans-brain-menu-item:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.05);
}

.plans-brain-menu-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.plans-brain-menu-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.plans-brain-menu-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.plans-brain-menu-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.plans-brain-menu-desc {
    font-size: 0.75rem;
    color: var(--plans-muted);
}

.plans-viewer-card.is-collapsed {
    display: none;
}


.plans-document-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 400px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 0;
}

.plans-document-header {
    flex-wrap: wrap;
    gap: 1rem;
    background-color: var(--t-border-subtle);
    border-radius: var(--plans-radius-md);
    padding: clamp(0.75rem, 1.6vw, 1.25rem) clamp(1rem, 2vw, 1.6rem);
}

.plans-document-controls {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.plans-document-select-label {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--plans-muted);
}

.plans-document-select {
    background: var(--t-surface);
    border: 1px solid rgba(12, 19, 36, 0.25);
    border-radius: 999px;
    color: var(--plans-text-dark, #0c1324);
    padding: 0.35rem 1rem;
    font-size: 0.9rem;
    box-shadow: 0 8px 25px rgba(6, 7, 14, 0.18);
    transition: border-color var(--plans-transition), box-shadow var(--plans-transition);
}

.plans-document-select:focus {
    outline: none;
    border-color: rgba(255, 201, 85, 0.65);
    box-shadow: 0 12px 30px rgba(6, 7, 14, 0.25);
}

.plans-document-select option {
    color: var(--plans-text-dark, #0c1324);
    background: var(--t-surface);
}

.plans-document-body {
    border: none;
    border-radius: var(--plans-radius-md);
    background: transparent;
    padding: clamp(0.5rem, 1vw, 1.5rem);
    min-height: 320px;
    display: flex;
    justify-content: center;
}

.plans-document-viewer {
    flex: 1;
    width: 100%;
    max-width: 960px;
    border-radius: var(--plans-radius-lg);
    padding: clamp(0.75rem, 1.8vw, 1.5rem);
    background: rgba(7, 11, 27, 0.45);
    border: 1px solid var(--t-border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: clamp(300px, 70vh, 820px);
}

.plans-document-empty {
    margin: 0;
    border-radius: var(--plans-radius-md);
    border: 1px dashed rgba(255, 255, 255, 0.22);
    padding: clamp(1rem, 2vw, 1.5rem);
    text-align: center;
    color: var(--plans-muted);
    font-size: 0.95rem;
    background-color: var(--t-border-subtle);
}

.plans-document-frame {
    width: 100%;
    flex: 1;
    border: none;
    border-radius: var(--plans-radius-md);
    background: var(--t-surface);
    box-shadow: 0 25px 55px rgba(3, 6, 16, 0.45);
    min-height: clamp(320px, 72vh, 900px);
}

.plans-document-hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--plans-muted);
    text-align: center;
}

.conflict-document {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #0f1115;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
    border-radius: 28px;
    padding: clamp(1.4rem, 2vw, 2.6rem);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 35px 65px rgba(5, 7, 15, 0.12);
}

.conflict-document__header {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    padding-bottom: 1.5rem;
}

.conflict-document__eyebrow {
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #ffb347;
    margin-bottom: 0.35rem;
}

.conflict-document__address {
    color: #5f6166;
    margin-top: 0.2rem;
}

.conflict-document__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: #f8f9ff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 0.85rem 1.1rem;
}

.conflict-document__meta li {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    color: #5f6166;
}

.conflict-document__meta strong {
    color: #111216;
    font-size: 1rem;
    font-weight: 600;
}

.conflict-document__section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--t-surface);
    border-radius: 22px;
    padding: clamp(1rem, 1.5vw, 1.6rem);
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.conflict-document__section h2 {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #303546;
    margin: 0;
}

.conflict-document__section:last-of-type {
    margin-bottom: 0;
}

.conflict-document__list {
    list-style: decimal;
    margin: 0;
    padding-left: 1.5rem;
    color: #0f1115;
    line-height: 1.6;
}

.conflict-document__empty {
    color: #7c7f85;
    font-style: italic;
}

.conflict-document__exposure {
    border: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.conflict-document__exposure > div {
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 0.85rem 1rem;
    background: linear-gradient(145deg, #f8fbff, #ffffff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.document-stat-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.document-stat-list dt {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7c5a06;
    margin-bottom: 0.15rem;
}

.document-stat-list dd {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.document-stat-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111216;
}

.document-stat-note {
    margin: 0;
    font-size: 0.9rem;
    color: #5f6166;
}

.conflict-document__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a07304;
    margin-bottom: 0.15rem;
}

.conflict-document__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.conflict-document__table th,
.conflict-document__table td {
    border: 1px solid rgba(15, 17, 21, 0.08);
    padding: 0.85rem;
    text-align: left;
}

.conflict-document__table th {
    background: #f5f7ff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    color: #4a4d54;
}

.conflict-document__risk {
    border: none;
    border-radius: 0;
    padding: 0 0 1.4rem;
    background: transparent;
    border-bottom: 1px solid rgba(15, 17, 21, 0.08);
}

.conflict-document__risk:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.conflict-document__risk-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.conflict-document__risk h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #111216;
}

.conflict-document__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.chip {
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #eef2ff;
    color: #1e2b50;
}

.chip--high {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.2);
}

.chip--medium {
    background: rgba(255, 201, 85, 0.2);
    color: #a66300;
    border-color: rgba(255, 201, 85, 0.32);
}

.chip--low {
    background: rgba(126, 250, 209, 0.2);
    color: #0c6b4f;
    border-color: rgba(126, 250, 209, 0.3);
}

.conflict-document__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
}

.conflict-document__details dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #7c5a06;
}

.conflict-document__details dd {
    margin: 0.35rem 0 0;
    color: #0f1115;
}
.conflict-document [contenteditable="true"] {
    border-bottom: 1px dotted transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
    outline: none;
}

.conflict-document [contenteditable="true"]:focus,
.conflict-document [contenteditable="true"]:focus-visible {
    border-bottom-color: rgba(15, 17, 21, 0.25);
    background: rgba(15, 17, 21, 0.04);
}

.conflict-document__details ul {
    margin: 0.4rem 0 0;
    padding-left: 1.25rem;
}

.plans-hero-kicker {
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--plans-accent);
    font-size: 0.82rem;
    margin: 0;
    font-weight: 700;
}

.plans-hero-title {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
    margin: 0;
    color: var(--t-text);
    font-weight: 700;
}

.plans-hero-sublead {
    font-size: 1.25rem;
    margin: 0;
    color: var(--plans-accent);
    font-weight: 600;
}

.plans-hero-body {
    margin: 0;
    color: var(--plans-muted);
    line-height: 1.6;
    font-size: 1.05rem;
}

.plans-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.plans-hero-matrix {
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--plans-border);
    padding: 1.75rem;
    background: rgba(9, 12, 25, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.plans-hero-matrix-title {
    margin: 0 0 1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--plans-accent);
    font-weight: 700;
}

.plans-icon-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem 1rem;
    color: var(--t-text);
    font-weight: 600;
}

.plans-icon-list li {
    padding: 0.4rem 0.45rem;
    border-bottom: 1px solid var(--t-border);
}

.plans-hero-footnote {
    margin-top: 1.25rem;
    color: var(--plans-accent);
    font-weight: 600;
    font-size: 0.95rem;
}

.plans-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.75rem;
}

.plans-header-left {
    display: flex;
    align-items: center;
    gap: clamp(0.35rem, 0.8vw, 0.65rem);
}

.plans-logo-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: clamp(0.95rem, 1.6vw, 1.3rem);
    margin-bottom: 0.1rem;
    border: 1px solid var(--t-border);
    display: grid;
    place-items: center;
    box-shadow: var(--plans-shadow-soft);
    position: relative;
    overflow: hidden;
}

.plans-logo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    filter: drop-shadow(0 8px 25px rgba(91, 245, 255, 0.35));
}


.plans-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.plans-header-title {
    margin: 0;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    color: var(--t-text);
    font-family: "Space Grotesk", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.plans-header-subtitle {
    margin: 0;
    color: var(--plans-muted);
    font-size: 1rem;
}

.plans-header-pill {
    margin-bottom: 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--t-border);
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--plans-label);
}

.plans-landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: flex-start;
    flex: 1;
    min-height: 0;
    height: 100%;
    grid-auto-rows: auto;
    overflow: hidden;
}

.plans-hero-upload-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: flex-start;
    overflow: visible;
}

.plans-vault-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: clamp(480px, calc(100vh - var(--app-header-height, 56px) - clamp(2.75rem, 5vw, 4.75rem)), 760px);
    overflow: hidden;
}

.plans-vault-card.plans-vault-locked {
    height: auto;
    max-height: clamp(360px, 50vh, 520px);
    align-self: flex-start;
    overflow: visible;
}

.plans-vault-card.plans-vault-locked .plans-vault-body {
    max-height: none;
    overflow: visible;
}

.plans-sections {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.plans-section {
    display: flex;

    .plans-viewer-card,
    .plans-chat-card {
        align-self: flex-start;
        max-height: calc(100vh - var(--app-header-height, 70px) - 2.25rem);
    }

    .plans-viewer-body,
    .plans-chat-body {
        overflow-y: auto;
    }
    flex-direction: column;
    gap: 1.5rem;
}

.plans-section-label {
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--plans-accent);
    font-size: 0.86rem;
    margin: 0;
    font-weight: 700;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--plans-border);
}

.plans-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.plans-section-card {
    border: 1px solid var(--plans-border);
    border-radius: var(--plans-radius-md);
    padding: 1.75rem;
    background: linear-gradient(145deg, rgba(12, 16, 32, 0.96), rgba(6, 7, 16, 0.92));
    box-shadow: var(--plans-shadow-soft);
}

.plans-section-card h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--t-text);
    font-weight: 700;
}

.plans-section-card ul {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
    color: var(--plans-muted);
    line-height: 1.5;
}

.plans-section-card p {
    color: var(--plans-muted);
    margin-bottom: 0.9rem;
}

.plans-discipline-list li {
    border-left: 2px solid var(--plans-accent);
    padding-left: 0.75rem;
    margin-bottom: 0.8rem;
}

.plans-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.plans-market-item {
    border: 1px solid var(--plans-border);
    border-radius: var(--plans-radius-md);
    padding: 1.4rem;
    background: rgba(8, 10, 20, 0.9);
}

.plans-market-item h3 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    color: var(--t-text);
    font-weight: 700;
}

.plans-market-item p,
.plans-market-item ul {
    margin: 0 0 0.75rem;
    color: var(--plans-muted);
}

.plans-market-item ul {
    padding-left: 1.2rem;
    line-height: 1.5;
}

.plans-market-difference {
    border: 1px solid var(--plans-border);
    border-radius: var(--plans-radius-md);
    padding: 2rem;
    background: rgba(4, 6, 15, 0.95);
    box-shadow: var(--plans-shadow-soft);
}

.plans-market-difference p,
.plans-market-difference ul {
    margin: 0 0 0.9rem;
    color: var(--plans-muted);
}

.plans-market-difference strong {
    color: var(--t-text);
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

.plans-output-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.plans-output-card {
    border: 1px solid var(--plans-border);
    border-radius: var(--plans-radius-md);
    padding: 1.5rem;
    background: rgba(11, 13, 24, 0.92);
}

.plans-output-card h3,
.plans-output-card h4 {
    margin: 0 0 0.85rem;
    color: var(--t-text);
    font-weight: 700;
}

.plans-output-card h3 {
    font-size: 1.2rem;
}

.plans-output-card h4 {
    font-size: 1rem;
    margin-top: 1.25rem;
}

.plans-output-card ul {
    margin: 0 0 1rem 1.25rem;
    color: var(--plans-muted);
}

.plans-output-card p {
    color: var(--plans-muted);
}

.plans-impact-content {
    border: 1px solid var(--plans-border);
    border-radius: var(--plans-radius-md);
    padding: 2rem;
    background: rgba(7, 9, 18, 0.95);
    font-size: 1.15rem;
    line-height: 1.7;
}

.plans-impact-content p {
    color: var(--plans-text);
    margin-bottom: 1rem;
    font-weight: 500;
}

.plans-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem;
}

.plans-benefit-item {
    border: 1px solid rgba(126, 250, 209, 0.3);
    border-radius: var(--plans-radius-md);
    padding: 1.25rem;
    background: rgba(12, 22, 19, 0.65);
    font-weight: 600;
    color: var(--t-text);
    font-size: 1.05rem;
}

.plans-benefit-item span {
    display: block;
    font-weight: 400;
    color: var(--plans-muted);
    margin-top: 0.35rem;
    font-size: 0.95rem;
}

.plans-cta-wrapper {
    margin-top: 1rem;
}

.plans-cta-panel {
    border: 1px solid var(--plans-border);
    border-radius: var(--plans-radius-lg);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: linear-gradient(125deg, rgba(18, 23, 45, 0.92), rgba(4, 6, 12, 0.95));
    box-shadow: var(--plans-shadow-card);
}

.plans-cta-copy p {
    margin: 0 0 0.9rem;
    color: var(--plans-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.plans-cta-copy p:first-child {
    font-size: 1.5rem;
    color: var(--t-text);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.plans-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.plans-app-hooks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.75rem;
}

@media (max-width: 640px) {
    .plans-hero,
    .plans-section-card,
    .plans-market-difference,
    .plans-impact-content,
    .plans-cta-panel {
        padding: 1.5rem;
    }

    .plans-hero-cta,
    .plans-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

.plans-hero-upload-card {
    padding: clamp(1.2rem, 3vw, 2.8rem);
    background: linear-gradient(160deg, rgba(20, 25, 45, 0.95), rgba(6, 7, 16, 0.92));
    width: min(100%, 840px);
    margin: 0 auto clamp(1.2rem, 2vw, 1.8rem);
}

.plans-upload-panel {
    border-radius: var(--plans-radius-lg);
    border: 1px solid var(--t-border);
    background: linear-gradient(150deg, rgba(8, 12, 26, 0.55), rgba(4, 6, 13, 0.78));
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: visible;
}

.plans-upload-panel .plans-upload-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.plans-upload-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1;
    min-height: 0;
}

/* ========================================================================
   PROJECT SELECTOR (upload form)
   ======================================================================== */

.plans-project-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.plans-project-label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--t-text);
}

.plans-project-label-hint {
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    display: none;
}

.plans-project-select-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    flex-wrap: wrap;
    min-width: 0;
}

.plans-project-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border-radius: 8px;
    border: 1px solid var(--t-border-strong);
    background: rgba(255, 255, 255, 0.05);
    color: var(--t-text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    text-overflow: ellipsis;
    overflow: hidden;
}

.plans-project-select:focus {
    outline: none;
    border-color: var(--accent-blue, #5b9cf4);
    box-shadow: 0 0 0 2px rgba(91, 156, 244, 0.25);
}

.plans-project-select option {
    background: #1a1a2e;
    color: var(--t-text);
}

.plans-project-create-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid rgba(91, 156, 244, 0.4);
    background: rgba(91, 156, 244, 0.1);
    color: var(--accent-blue, #5b9cf4);
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.plans-project-create-btn:hover {
    background: rgba(91, 156, 244, 0.2);
    border-color: rgba(91, 156, 244, 0.6);
}

.plans-project-create-icon {
    font-size: 1rem;
    font-weight: 600;
}

.plans-project-helper {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.5);
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

/* ========================================================================
   PROJECT MODAL
   ======================================================================== */

.plans-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.plans-modal.is-open {
    display: flex;
}

.plans-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.plans-modal-content {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: linear-gradient(160deg, #1a1a2e 0%, #0f0f1a 100%);
    border: 1px solid var(--t-border-medium);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.plans-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--t-border);
}

.plans-modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--t-text);
    margin: 0;
}

.plans-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--t-text-tertiary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.plans-modal-close:hover {
    color: var(--t-text);
    background-color: var(--t-tab-active-bg);
}

.plans-modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.plans-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--t-border);
    background: rgba(0, 0, 0, 0.2);
}

/* Form elements in modal */
.plans-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plans-form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--t-text);
}

.plans-form-required {
    color: var(--t-error);
}

.plans-form-input,
.plans-form-textarea {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border-radius: 8px;
    border: 1px solid var(--t-border-strong);
    background: rgba(255, 255, 255, 0.05);
    color: var(--t-text);
    transition: all 0.15s ease;
}

.plans-form-input:focus,
.plans-form-textarea:focus {
    outline: none;
    border-color: var(--accent-blue, #5b9cf4);
    box-shadow: 0 0 0 3px rgba(91, 156, 244, 0.2);
}

.plans-form-input::placeholder,
.plans-form-textarea::placeholder {
    color: var(--t-text-tertiary);
}

.plans-form-textarea {
    resize: vertical;
    min-height: 80px;
}

.plans-form-hint {
    font-size: 0.8125rem;
    color: var(--t-text-tertiary);
    background: rgba(91, 156, 244, 0.08);
    border: 1px solid rgba(91, 156, 244, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    line-height: 1.5;
}

.plans-form-hint strong {
    color: var(--accent-blue, #5b9cf4);
}

/* ========================================================================
   PROJECT UPLOAD QUEUE
   ======================================================================== */

.plans-project-queue {
    margin-top: 0.75rem;
    padding: 1rem;
    background: rgba(91, 156, 244, 0.06);
    border: 1px solid rgba(91, 156, 244, 0.2);
    border-radius: 12px;
    flex-shrink: 0;
}

.plans-project-queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.plans-project-queue-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--t-text);
}

.plans-project-queue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--t-text);
    background: var(--accent-blue, #5b9cf4);
    border-radius: 999px;
}

.plans-project-queue-list {
    list-style: none;
    margin: 0 0 0.75rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 120px;
    overflow-y: auto;
}

.plans-project-queue-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--t-border-subtle);
    border: 1px solid var(--t-border);
    border-radius: 8px;
}

.plans-project-queue-item-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    flex-shrink: 0;
}

.plans-project-queue-item-name {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-project-queue-item-status {
    font-size: 0.6875rem;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.plans-project-queue-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.plans-project-queue-actions .plans-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.plans-btn-sm {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
}

.plans-project-queue-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    text-align: center;
}

/* Inline queue inside the dropzone (for project uploads) */
.plans-inline-queue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    width: 100%;
    text-align: center;
}

.plans-inline-queue-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gold, #E0AA4D);
}

.plans-inline-queue-icon {
    font-size: 1.125rem;
}

.plans-inline-queue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--gold, #E0AA4D);
    color: #000;
    font-size: 0.6875rem;
    font-weight: 700;
}

.plans-inline-queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
    max-width: 280px;
    max-height: 120px;
    overflow-y: auto;
}

.plans-inline-queue-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    background-color: var(--t-surface-input);
    font-size: 0.8125rem;
    color: var(--t-text);
}

.plans-inline-queue-item-icon {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gold, #E0AA4D);
    color: #000;
    font-size: 0.625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.plans-inline-queue-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.plans-inline-queue-actions {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.25rem;
}

.plans-inline-queue-actions .plans-btn {
    min-width: 110px;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

.plans-upload-actions {
    margin-top: 0.5rem;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.plans-visitor-result {
    margin-top: 1.5rem;
    border-radius: 24px;
    border: 1px solid var(--t-border-medium);
    background: linear-gradient(150deg, rgba(9, 16, 28, 0.95), rgba(6, 10, 22, 0.92));
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}

.plans-visitor-result.is-already-active {
    border-color: rgba(159, 203, 255, 0.35);
    background: linear-gradient(150deg, rgba(10, 20, 38, 0.95), rgba(6, 10, 24, 0.92));
}

.plans-visitor-result.is-already-active .plans-visitor-result-eyebrow {
    color: rgba(159, 203, 255, 0.95);
}

.plans-visitor-result.is-already-active .plans-visitor-result-note {
    color: rgba(159, 203, 255, 0.85);
}

.plans-visitor-result[hidden] {
    display: none !important;
}

.plans-visitor-result-icon {
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    position: relative;
}

.plans-visitor-result-icon::before,
.plans-visitor-result-icon::after {
    min-height: clamp(260px, 45vh, 440px);
}

.plans-visitor-result-icon svg {
    width: 56px;
    height: 56px;
    display: block;
}

.plans-visitor-result-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.plans-visitor-result-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plans-visitor-result-eyebrow {
    margin: 0;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.65rem;
    color: rgba(126, 250, 209, 0.95);
}

.plans-visitor-result-title {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    color: var(--t-text);
}

.plans-visitor-result-meta {
    margin: 0;
    color: var(--t-text);
    font-size: 0.95rem;
}

.plans-visitor-result-note {
    margin: 0;
    color: var(--t-text-secondary);
    font-size: 0.85rem;
}

.plans-visitor-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    align-items: center;
}

#visitorPrimaryCta {
    padding: 0.45rem 1rem;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    margin-left: auto;
    min-width: auto;
}


@media (max-width: 640px) {
    .plans-visitor-result {
        flex-direction: column;
        text-align: center;
    }

    .plans-visitor-result-actions {
        justify-content: center;
    }

    #visitorPrimaryCta {
        margin-left: 0;
        width: 100%;
    }

    .plans-visitor-result-icon {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 720px) {
    .plans-upload-dropzone {
        min-height: auto;
        padding: 2rem 1.75rem;
    }
}

@media (max-width: 720px) {
    .plans-hero-upload-card {
        padding: clamp(0.35rem, 2vw, 1rem);
        width: 100%;
        background: none;
        border: none;
        box-shadow: none;
        margin: 0 auto 1rem;
        max-height: none;
        overflow: visible;
    }

    .plans-hero-upload-card .plans-upload-panel {
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .plans-upload-panel .plans-upload-card {
        overflow: visible;
    }

    .plans-upload-form {
        overflow: visible;
    }

    .plans-project-queue {
        margin-top: 0.5rem;
        padding: 0.75rem;
    }

    .plans-project-queue-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .plans-project-queue-actions .plans-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0.65rem 0.75rem;
    }
}

@media (max-width: 540px) {
    body.plans-body.plans-landing-page {
        overflow-y: auto;
    }

    body.plans-body.plans-landing-page .app-main {
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    .plans-landing-root {
        padding-top: calc(
            var(--app-header-height, 56px)
            + env(safe-area-inset-top, 0px)
            + clamp(1rem, 4vw, 2rem)
        );
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        overflow: visible;
        height: auto;
    }

    .plans-landing-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        height: auto;
        overflow: visible;
    }

    .plans-hero {
        gap: 1rem;
        padding: 1rem;
    }

    .plans-upload-panel {
        padding: 0.5rem;
        margin-top: 0.25rem;
        overflow: visible;
    }

    .plans-upload-panel .plans-upload-card {
        overflow: visible;
        gap: 0.75rem;
    }

    .plans-upload-form {
        overflow: visible;
        gap: 0.75rem;
    }

    .plans-upload-dropzone {
        border-radius: 18px;
        padding: 0.75rem 0.75rem;
        min-height: clamp(130px, 22vh, 200px);
        gap: 0.5rem;
        overflow: visible;
    }

    .plans-project-queue {
        margin-top: 0.25rem;
        padding: 0.625rem;
    }

    .plans-project-queue-header {
        margin-bottom: 0.5rem;
    }

    .plans-project-queue-title {
        font-size: 0.8125rem;
    }

    .plans-project-queue-list {
        max-height: 90px;
        margin-bottom: 0.5rem;
    }

    .plans-project-queue-actions {
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.35rem;
    }

    .plans-project-queue-actions .plans-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0.6rem 0.75rem;
        font-size: 0.8125rem;
    }

    .plans-project-queue-hint {
        font-size: 0.68rem;
    }

    .plans-upload-form.is-uploading .plans-upload-dropzone {
        min-height: clamp(200px, 35vh, 280px);
        overflow: visible;
    }

    .plans-upload-loader {
        padding: 1.25rem 1rem;
        gap: 1rem;
    }

    .plans-upload-icon {
        width: 40px;
        height: 40px;
    }

    .plans-upload-cta {
        font-size: 0.95rem;
    }

    .plans-upload-hint {
        font-size: 0.8rem;
    }

    .plans-upload-trust-inline {
        font-size: 0.68rem;
        margin-top: 0.25rem;
    }

    .plans-hero-upload-card {
        display: contents;
        padding: 0;
        margin: 0;
    }

    /* ── Vault locked card — compact for mobile ─────────────── */
    .plans-vault-card.plans-vault-locked {
        max-height: none;
    }

    .plans-vault-heading {
        gap: 0.5rem;
    }

    .plans-vault-icon-img {
        width: 36px;
    }

    .plans-vault-card .plans-card-title {
        font-size: 0.78rem;
        letter-spacing: 0.2em;
    }

    .plans-vault-card .plans-card-subtitle {
        font-size: 0.78rem;
        margin-top: 0.2rem;
    }

    .plans-vault-locked-copy {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .plans-vault-body {
        gap: 0.6rem;
    }

    .plans-vault-cta {
        gap: 0.5rem;
    }

    .plans-vault-cta .plans-btn {
        padding: 0.55rem 1.1rem;
        font-size: 0.78rem;
    }

    .plans-card-footer {
        margin-top: 0.75rem;
        font-size: 0.7rem;
    }

    /* Project selector compact */
    .plans-project-selector {
        gap: 0.3rem;
        margin-bottom: 0.25rem;
    }

    .plans-project-label {
        font-size: 0.8rem;
    }

    .plans-project-select-wrapper {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .plans-project-select {
        max-width: 100%;
        width: 100%;
        font-size: 0.8125rem;
        padding: 0.55rem 2rem 0.55rem 0.75rem;
    }

    .plans-project-create-btn {
        width: 100%;
        justify-content: center;
        padding: 0.55rem 0.75rem;
        font-size: 0.8125rem;
    }

    .plans-project-helper {
        font-size: 0.72rem;
    }

    /* Vault grid — single column on mobile */
    .plans-vault-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .plans-vault-project-plans {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        padding: 0.75rem;
    }

    .plans-vault-project-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .plans-vault-project-title {
        font-size: 0.875rem;
    }

    .plans-vault-card .plans-card-header {
        padding: 0.75rem 1rem;
    }

    .plans-vault-card.plans-vault-locked.plans-card {
        padding: 1rem;
    }
}

.plans-btn-compact {
    padding: 0.7rem 1.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
}

.plans-upload-dropzone {
    border: 1px solid transparent;
    border-radius: 28px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: rgba(7, 10, 20, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-height: clamp(180px, 28vh, 320px);
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 1;
    transition:
        border-color var(--plans-transition),
        background-color var(--plans-transition),
        transform var(--plans-transition),
        box-shadow var(--plans-transition);
}

.plans-upload-dropzone::after {
    content: "";
    position: absolute;
    right: -20%;
    bottom: -20%;
    width: min(60vw, 280px);
    height: min(60vw, 280px);
    background: radial-gradient(circle, rgba(255, 201, 85, 0.18), transparent 70%);
    opacity: 0.7;
    pointer-events: none;
}

.plans-upload-dropzone:hover,
.plans-upload-dropzone.drag-over {
    border-color: rgba(255, 201, 85, 0.7);
    background: rgba(10, 15, 30, 0.92);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.plans-upload-dropzone.has-file {
    border-color: rgba(126, 250, 209, 0.7);
    background: rgba(8, 20, 20, 0.88);
}

.plans-upload-input {
    display: none;
}

.plans-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
    transition: opacity var(--plans-transition), transform var(--plans-transition), filter var(--plans-transition);
}

.plans-upload-icon {
    width: clamp(90px, 10vw, 120px);
    height: clamp(90px, 10vw, 120px);
    border-radius: 24px;
    background-color: var(--t-border-subtle);
    border: 1px solid var(--t-border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.plans-upload-icon::before,
.plans-upload-icon::after {
    content: "";
    position: absolute;
    background: var(--plans-accent);
    border-radius: 2px;
}

.plans-upload-icon::before {
    width: 50%;
    height: 4px;
}

.plans-upload-icon::after {
    width: 4px;
    height: 50%;
}

.plans-upload-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.plans-upload-cta {
    font-size: clamp(1.25rem, 2.6vw, 1.65rem);
    font-weight: 600;
}

.plans-upload-hint {
    font-size: 0.95rem;
    color: var(--plans-muted);
}

/* ── Mobile upload overrides ─────────────────────────────────
   These MUST come after the base upload styles above to win
   the CSS cascade. Previously the base styles at ~line 7348
   were overriding the mobile media-query rules because they
   appeared later in the file with the same specificity.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .plans-hero-upload-card.plans-card {
        padding: clamp(0.25rem, 1.5vw, 0.75rem);
        width: 100%;
        background: none;
        border: none;
        box-shadow: none;
        margin: 0 auto 0.5rem;
        max-height: none;
        overflow: visible;
        border-radius: 0;
    }

    .plans-hero-upload-card .plans-upload-panel {
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        backdrop-filter: none;
    }

    .plans-upload-panel .plans-upload-card {
        overflow: visible;
        gap: 0.75rem;
    }

    .plans-upload-form {
        overflow: visible;
        gap: 0.75rem;
    }

    .plans-upload-dropzone {
        min-height: auto;
        padding: 1.5rem 1.25rem;
        border-radius: 20px;
        gap: 0.75rem;
    }

    .plans-upload-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .plans-upload-cta {
        font-size: 1.05rem;
    }

    .plans-upload-hint {
        font-size: 0.82rem;
    }

    .plans-upload-trust-inline {
        font-size: 0.72rem;
    }
}

@media (max-width: 540px) {
    .plans-hero-upload-card.plans-card {
        display: contents;
    }

    .plans-upload-panel {
        padding: 0;
        border: none;
        background: transparent;
        overflow: visible;
        backdrop-filter: none;
    }

    .plans-upload-panel .plans-upload-card {
        overflow: visible;
        gap: 0.5rem;
    }

    .plans-upload-form {
        overflow: visible;
        gap: 0.5rem;
    }

    .plans-upload-dropzone {
        border-radius: 16px;
        padding: 0.75rem;
        min-height: clamp(110px, 18vh, 170px);
        gap: 0.4rem;
    }

    .plans-upload-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        box-shadow: none;
    }

    .plans-upload-icon::before {
        height: 3px;
    }

    .plans-upload-icon::after {
        width: 3px;
    }

    .plans-upload-cta {
        font-size: 0.9rem;
    }

    .plans-upload-hint {
        font-size: 0.75rem;
    }

    .plans-upload-trust-inline {
        font-size: 0.65rem;
        margin-top: 0.15rem;
    }

    .plans-upload-content {
        gap: 0.5rem;
    }

    .plans-upload-text {
        gap: 0.2rem;
    }

    .plans-upload-form.is-uploading .plans-upload-dropzone {
        min-height: clamp(180px, 30vh, 250px);
    }

    .plans-project-queue {
        margin-top: 0.25rem;
        padding: 0.5rem;
        border-radius: 12px;
    }

    .plans-project-queue-actions {
        flex-direction: column;
        gap: 0.4rem;
    }

    .plans-project-queue-actions .plans-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0.55rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* File ready state - shows filename and "click to analyze" */
.plans-upload-file-ready[hidden] {
    display: none !important;
}

.plans-upload-file-ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    animation: fadeSlideIn 0.5s ease-out;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animated checkmark circle */
.plans-upload-file-ready::before {
    content: "";
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 3px solid transparent;
    background-clip: padding-box;
    position: relative;
    animation: circleExpand 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow: 
        0 0 0 0 rgba(34, 197, 94, 0.4),
        inset 0 0 20px rgba(34, 197, 94, 0.1);
}

@keyframes circleExpand {
    0% {
        transform: scale(0);
        opacity: 0;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        border-color: rgba(34, 197, 94, 0.6);
        box-shadow: 
            0 0 30px rgba(34, 197, 94, 0.3),
            inset 0 0 20px rgba(34, 197, 94, 0.1);
    }
}

/* Animated checkmark */
.plans-upload-file-ready::after {
    content: "";
    position: absolute;
    top: 20px;
    width: 16px;
    height: 28px;
    border-right: 4px solid #22c55e;
    border-bottom: 4px solid #22c55e;
    transform: rotate(45deg) scale(0);
    animation: checkmarkDraw 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.6));
}

@keyframes checkmarkDraw {
    0% {
        transform: rotate(45deg) scale(0);
        opacity: 0;
    }
    100% {
        transform: rotate(45deg) scale(1);
        opacity: 1;
    }
}

.plans-upload-file-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.plans-upload-file-name {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 600;
    color: var(--t-text);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.plans-upload-file-action {
    font-size: clamp(1.25rem, 2.8vw, 1.5rem);
    font-weight: 600;
    color: var(--plans-accent);
    padding: 0.75rem 2rem;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
    }
}

.plans-upload-dropzone.has-file {
    border-color: rgba(34, 197, 94, 0.5);
}

.plans-upload-dropzone.has-file:hover {
    border-color: rgba(34, 197, 94, 0.7);
    box-shadow: 0 8px 40px rgba(34, 197, 94, 0.2);
}


.plans-upload-status {
    min-height: 1.2rem;
    font-size: 0.85rem;
    color: var(--plans-muted);
}

/* ── Trust line inside upload dropzone ── */
.plans-upload-trust-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.5);
    margin-top: 0.55rem;
    letter-spacing: 0.01em;
    line-height: 1;
}

.plans-upload-trust-inline svg {
    flex-shrink: 0;
    opacity: 0.5;
}

.plans-upload-status.success {
    color: var(--plans-success);
}

.plans-upload-status.error {
    color: #ff8080;
}

.plans-upload-status.info {
    color: var(--plans-accent);
}

/* "Don't have plans?" nudge on landing page */
.plans-no-plans-nudge {
    text-align: center;
    padding: 0.75rem 1rem 0.75rem;
    margin-top: 1.5rem;
}

.plans-no-plans-text {
    font-size: 0.85rem;
    color: var(--t-text-tertiary);
    margin: 0 0 0.5rem;
}

.plans-no-plans-btn {
    font-size: 0.85rem;
}

.plans-no-plans-hint {
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    margin: 0.5rem 0 0;
}

.plans-upload-loader {
    border-radius: inherit;
    border: 1px solid var(--t-border-medium);
    background: radial-gradient(ellipse at 50% 0%, rgba(126, 138, 255, 0.08) 0%, transparent 50%),
                linear-gradient(160deg, rgba(8, 10, 22, 0.98), rgba(3, 4, 12, 0.98));
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 25px 55px rgba(5, 6, 14, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    pointer-events: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    z-index: 2;
    text-align: center;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plans-upload-loader.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.plans-upload-form.is-uploading .plans-upload-content {
    opacity: 0;
    transform: translateY(-6px) scale(0.95);
    filter: blur(4px);
}

.plans-loader-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 280px;
}

/* Orbital spinner container */
.plans-loader-wheel {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    animation: none;
}

/* Outer orbital ring */
.plans-loader-wheel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--t-border);
    border-top-color: var(--plans-accent);
    border-right-color: rgba(255, 201, 85, 0.4);
    animation: plans-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    box-shadow: 0 0 20px rgba(255, 201, 85, 0.25);
}

/* Inner orbital ring */
.plans-loader-wheel::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid var(--t-border-subtle);
    border-bottom-color: rgba(126, 138, 255, 0.8);
    border-left-color: rgba(126, 138, 255, 0.3);
    animation: plans-spin-reverse 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    box-shadow: 0 0 15px rgba(126, 138, 255, 0.2);
}

/* Center glowing dot */
.plans-loader-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--plans-accent) 0%, rgba(255, 201, 85, 0.5) 100%);
    box-shadow: 0 0 20px rgba(255, 201, 85, 0.6),
                0 0 40px rgba(255, 201, 85, 0.3);
    animation: plans-core-pulse 1.5s ease-in-out infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Progress bar container — big, bold, visible */
.plans-loader-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background-color: var(--t-surface-input);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--t-border);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Shimmer sweep across the full bar track */
.plans-loader-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 200%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.04) 75%,
        transparent 100%);
    animation: plans-shimmer 2s ease-in-out infinite;
}

/* Progress bar fill — vivid animated gradient with shimmer */
.plans-loader-progress-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg,
        #ff8c42, #ffc955, #ffdb80, #ffc955, #ff8c42);
    background-size: 300% 100%;
    animation: plans-progress-glow 3s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(255, 201, 85, 0.6),
                0 0 30px rgba(255, 140, 66, 0.3),
                0 2px 6px rgba(0, 0, 0, 0.3);
    transition: width 150ms linear;
}

/* Shimmer stripe that sweeps across the fill */
.plans-loader-progress-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 255, 255, 0.35) 45%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.35) 55%,
        transparent 70%,
        transparent 100%);
    background-size: 250% 100%;
    animation: plans-fill-shimmer 2s ease-in-out infinite;
    border-radius: 999px;
}

/* Glowing leading-edge dot */
.plans-loader-progress-fill::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 20%, rgba(255, 201, 85, 0.8) 60%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 201, 85, 0.9),
                0 0 25px rgba(255, 201, 85, 0.6),
                0 0 45px rgba(255, 140, 66, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.plans-loader-progress-fill[style*="width"]:not([style*="width: 0"]):not([style*="width:0"])::after {
    opacity: 1;
    animation: plans-dot-pulse 1.5s ease-in-out infinite;
}

/* ── Upload-phase colors (blue/cyan while uploading bytes) ── */
.plans-upload-loader.phase-upload .plans-loader-progress-fill {
    background: linear-gradient(90deg,
        #4facfe, #00f2fe, #7df9ff, #00f2fe, #4facfe);
    background-size: 300% 100%;
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.6),
                0 0 30px rgba(0, 242, 254, 0.3),
                0 2px 6px rgba(0, 0, 0, 0.3);
}

.plans-upload-loader.phase-upload .plans-loader-progress-fill::after {
    background: radial-gradient(circle, #fff 20%, rgba(0, 242, 254, 0.8) 60%, transparent 100%);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.9),
                0 0 25px rgba(79, 172, 254, 0.6),
                0 0 45px rgba(0, 242, 254, 0.3);
}

.plans-upload-loader.phase-upload .plans-loader-percent {
    color: #7df9ff;
    text-shadow: 0 0 20px rgba(0, 242, 254, 0.5);
}

/* ── Processing-phase colors (gold/amber during server work) ── */
.plans-upload-loader.phase-process .plans-loader-progress-fill {
    background: linear-gradient(90deg,
        #ff8c42, #ffc955, #ffdb80, #ffc955, #ff8c42);
    background-size: 300% 100%;
}

.plans-upload-loader.phase-process .plans-loader-percent {
    color: var(--t-accent);
    text-shadow: 0 0 20px rgba(255, 201, 85, 0.5);
}

/* Big bold percentage */
.plans-loader-percent {
    font-size: 2rem;
    font-weight: 800;
    color: var(--t-text);
    letter-spacing: 0.04em;
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.4),
                 0 2px 8px rgba(0, 0, 0, 0.5);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Step label text */
.plans-loader-step {
    margin: 0;
    font-size: 0.95rem;
    color: var(--t-text-secondary);
    letter-spacing: 0.02em;
    min-height: 1.4em;
    transition: opacity 0.4s ease, transform 0.3s ease;
    font-weight: 500;
}

/* Meta row — elapsed, speed, ETA */
.plans-loader-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--t-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.plans-loader-meta > span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.plans-loader-elapsed::before {
    content: "\23F1 ";
}

.plans-loader-speed::before {
    content: "\26A1 ";
}

.plans-loader-eta::before {
    content: "\23F3 ";
}

/* Hide speed/eta when empty */
.plans-loader-speed:empty,
.plans-loader-eta:empty {
    display: none;
}

/* Byte counter row */
.plans-loader-bytes {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--t-text-tertiary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    min-height: 1.2em;
}

.plans-loader-bytes:empty {
    display: none;
}

/* Tip text */
.plans-loader-tip {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: var(--t-text-tertiary);
    max-width: 320px;
    text-align: center;
    line-height: 1.4;
    animation: plans-tip-fade 0.6s ease-in-out;
}

/* ── Shimmer sweep inside the fill ── */
@keyframes plans-fill-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -50% 0; }
}

/* Leading dot pulse */
@keyframes plans-dot-pulse {
    0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.9; }
    50%      { transform: translateY(-50%) scale(1.4); opacity: 1; }
}

@keyframes plans-tip-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes plans-spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes plans-core-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.8;
    }
}

@keyframes plans-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes plans-progress-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes plans-text-fade {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.plans-upload-form.is-uploading .plans-upload-dropzone {
    pointer-events: none;
    overflow: visible;
    min-height: 320px;
}

.plans-upload-form.is-uploading .plans-upload-loader {
    pointer-events: auto;
}

.plans-btn:disabled,
.plans-btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@keyframes plans-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes plans-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.85);
        opacity: 0.6;
    }
}

.plans-recent-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.plans-recent-empty {
    padding: 1.1rem 1.3rem;
    border-radius: var(--plans-radius-md);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(9, 11, 24, 0.7);
    color: var(--plans-muted);
    font-size: 0.92rem;
}

.plans-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.plans-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--t-border);
    background: rgba(8, 9, 18, 0.85);
    transition: border-color var(--plans-transition), transform var(--plans-transition);
}

.plans-recent-item:hover {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transform: translateY(-2px);
}

.plans-recent-link {
    font-weight: 600;
    text-decoration: none;
    color: var(--plans-text);
}

.plans-recent-meta {
    font-size: 0.82rem;
    color: var(--plans-muted);
}

/* Plans Vault */
.plans-vault-heading {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.plans-vault-icon-img {
    width: clamp(52px, 6vw, 78px);
    height: auto;
    display: block;
    flex-shrink: 0;
}

.plans-vault-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.plans-vault-empty {
    padding: 1.1rem 1.3rem;
    border-radius: var(--plans-radius-md);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(9, 11, 24, 0.7);
    color: var(--plans-muted);
    font-size: 0.92rem;
}

/* ========================================================================
   PROJECT GROUPS IN VAULT
   ======================================================================== */

.plans-vault-projects {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.plans-vault-project-group {
    background: rgba(91, 156, 244, 0.04);
    border: 1px solid rgba(91, 156, 244, 0.15);
    border-radius: 12px;
    overflow: hidden;
}

.plans-vault-project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(91, 156, 244, 0.06);
    border-bottom: 1px solid rgba(91, 156, 244, 0.1);
}

.plans-vault-project-info {
    flex: 1;
    min-width: 0;
}

.plans-vault-project-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--t-text);
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-vault-project-meta {
    font-size: 0.8125rem;
    color: var(--t-text-tertiary);
}

.plans-vault-project-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-blue, #5b9cf4);
    background: rgba(91, 156, 244, 0.1);
    border: 1px solid rgba(91, 156, 244, 0.25);
    border-radius: 999px;
    white-space: nowrap;
}

.plans-vault-project-badge svg {
    flex-shrink: 0;
}

.plans-vault-project-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.plans-vault-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.plans-vault-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-text-tertiary);
}

.plans-vault-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--t-tab-active-bg);
}

.plans-vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.35rem;
    width: 100%;
}

@media (max-width: 1024px) {
    body.plans-body.plans-landing-page {
        overflow-y: auto;
    }

    body.plans-body.plans-landing-page .app-main {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 0 0 clamp(1.85rem, 3vw, 3.2rem);
    }

    .plans-landing-root,
    .plans-landing-grid {
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    .plans-hero-upload-card,
    .plans-vault-card {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .plans-upload-panel .plans-upload-card {
        overflow: visible;
    }
}

.plans-vault-grid::-webkit-scrollbar {
    width: 8px;
}

.plans-vault-grid::-webkit-scrollbar-track {
    background: var(--plans-scroll-track);
    border-radius: 999px;
}

.plans-vault-grid::-webkit-scrollbar-thumb {
    background: var(--plans-scroll-thumb);
    border-radius: 999px;
    border: 2px solid var(--plans-scroll-thumb-border);
}

.plans-vault-locked {
    border-style: dashed;
    background: rgba(7, 9, 18, 0.85);
}

.plans-vault-locked-copy {
    margin: 0;
    color: var(--plans-muted);
    line-height: 1.5;
}

.plans-vault-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
    align-items: center;
}

.plans-vault-cta .plans-btn {
    flex: 0 0 auto;
    min-width: auto;
    padding: 0.75rem 1.6rem;
    font-size: 0.9rem;
}

.plans-vault-card-item {
    display: grid;
    grid-template-columns: clamp(68px, 10vw, 96px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.95rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--t-border);
    border-radius: var(--plans-radius-md);
    background: linear-gradient(150deg, rgba(14, 17, 32, 0.9), rgba(6, 7, 16, 0.92));
    box-shadow: var(--plans-shadow-soft);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition:
        border-color var(--plans-transition),
        background var(--plans-transition),
        color var(--plans-transition),
        transform var(--plans-transition);
}

.plans-vault-card-item:focus-visible {
    outline: 2px solid rgba(255, 201, 85, 0.6);
    outline-offset: 2px;
}

.plans-vault-thumb {
    width: clamp(64px, 9vw, 92px);
    height: clamp(64px, 9vw, 92px);
    border-radius: var(--plans-radius-sm);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--t-border);
    display: block;
    position: relative;
}

.plans-vault-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.plans-vault-thumb.is-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0,
        rgba(255, 255, 255, 0.08) 8px,
        transparent 8px,
        transparent 16px
    );
    opacity: 0.35;
}

.plans-vault-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.plans-vault-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--t-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-vault-meta {
    font-size: 0.85rem;
    color: var(--plans-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-vault-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.plans-vault-delete {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    color: #ff9c8b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--plans-transition), transform var(--plans-transition);
}

.plans-vault-delete svg,
.plans-vault-delete-icon {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;
}

.plans-vault-delete:hover,
.plans-vault-delete:focus-visible {
    color: #ffc4b7;
    transform: scale(1.05);
    outline: none;
}

.plans-vault-delete:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 156, 139, 0.35);
    border-radius: 4px;
}

.plans-vault-delete.is-loading,
.plans-vault-delete[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 1024px) {
    .plans-landing-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        min-height: auto;
    }

    .plans-vault-card {
        max-height: none;
    }
}

/* Session */

.plans-session-root {
    --plans-session-card-offset: clamp(-0.85rem, -0.45rem, 0rem);
    --plans-session-bottom-buffer: clamp(1.35rem, 2.8vh, 3.6rem);
    --plans-chat-bottom-adjust: clamp(1rem, 2.2vh, 3rem);
    --plans-chat-height-reduction: clamp(0.65rem, 1.6vh, 2.6rem);
    --plans-viewer-height-reduction: clamp(0.55rem, 1.4vh, 2.4rem);
    --plans-chat-sticky-gap: clamp(0.25rem, 0.55vh, 0.9rem);
    --plans-sticky-header-gap: clamp(-0.15rem, 0.35vw, 0.65rem);
    --plans-chat-top-gap: clamp(-0.65rem, -0.25rem, 0.25rem);
    max-width: 1200px;
    margin: 0 auto;
    padding-top: var(--plans-sticky-header-gap, 1rem);
    padding-right: clamp(0rem, 0.28vw, 0.26rem);
    padding-left: clamp(0rem, 0.28vw, 0.26rem);
    padding-bottom: var(--plans-session-bottom-buffer, 3rem);
    width: 100%;
    color: var(--plans-text);
    gap: clamp(0.15rem, 0.45vw, 0.8rem);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--app-header-height, 70px));
}

.plans-session-root,
.plans-session-grid,
.plans-card,
.plans-viewer-card,
.plans-chat-card,
.plans-viewer-body,
.plans-chat-body,
.plans-main-viewer,
.plans-chat-messages {
    min-width: 0;

/* Files workspace */

.plans-files-card .plans-card-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.plans-files-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.plans-files-upload {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.plans-files-dropzone {
    border: 1px dashed var(--plans-border-strong);
    border-radius: var(--plans-radius-md);
    padding: clamp(1rem, 2.4vh, 1.5rem) clamp(1.1rem, 2vw, 1.75rem);
    background-color: var(--t-surface-soft);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    cursor: pointer;
    transition: border-color var(--plans-transition), background var(--plans-transition);
}

.plans-files-dropzone.is-dragover,
.plans-files-dropzone:hover {
    border-color: rgba(255, 201, 85, 0.8);
    background: rgba(255, 201, 85, 0.05);
}

.plans-files-dropzone-label {
    font-size: 1.05rem;
    font-weight: 600;
}

.plans-files-dropzone-caption {
    color: var(--plans-muted);
    font-size: 0.92rem;
}

.plans-files-upload-hint {
    color: var(--plans-label);
    font-size: 0.88rem;
    margin: 0;
}

.plans-files-dropzone-text {
    font-size: 1rem;
    color: var(--plans-muted);
    margin: 0;
    text-align: center;
}

.plans-files-browse-btn {
    background: none;
    border: none;
    color: var(--t-accent);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    padding: 0;
}

.plans-files-browse-btn:hover {
    color: #ffdd88;
}

.plans-files-dropzone-hint {
    font-size: 0.85rem;
    color: var(--plans-label);
    margin: 0;
    text-align: center;
}

.plans-files-header-actions {
    display: flex;
    gap: 0.5rem;
}

.plans-files-status {
    font-size: 0.9rem;
    color: var(--plans-muted);
    min-height: 1.25rem;
}

.plans-files-status[data-variant="error"] {
    color: #fca5a5;
}

.plans-files-status[data-variant="success"] {
    color: #8bfad7;
}

.plans-files-status[data-variant="warning"],
.plans-files-status[data-variant="progress"] {
    color: #fcd34d;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.plans-files-list {
    border: 1px solid var(--t-border);
    border-radius: var(--plans-radius-md);
    padding: clamp(0.85rem, 1.5vw, 1.25rem);
    background-color: var(--t-surface-soft);
}

.plans-files-list[data-state="loading"] .plans-files-empty {
    display: block;
}

.plans-files-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plans-files-empty {
    text-align: center;
    color: var(--plans-muted);
    font-size: 0.95rem;
    padding: 1rem 0;
}

.plans-files-item {
    border: 1px solid var(--t-border);
    border-radius: var(--plans-radius-md);
    padding: clamp(0.85rem, 1.2vw, 1.1rem) clamp(0.9rem, 1.4vw, 1.4rem);
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: border-color var(--plans-transition), background var(--plans-transition);
}

.plans-files-item.is-pending {
    opacity: 0.65;
    pointer-events: none;
}

.plans-files-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.plans-files-item-name {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.plans-files-item-title {
    font-size: 1rem;
    margin: 0;
    font-weight: 600;
}

.plans-files-status-badge {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--t-border-medium);
    color: var(--plans-muted);
}

.plans-files-status-badge[data-status="ready"] {
    color: #9ef0c9;
    border-color: rgba(158, 240, 201, 0.35);
}

.plans-files-status-badge[data-status="error"] {
    color: #fda4af;
    border-color: rgba(253, 164, 175, 0.35);
}

.plans-files-status-badge[data-status="syncing"] {
    color: #fcd34d;
    border-color: rgba(252, 211, 77, 0.35);
}

.plans-files-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    color: var(--plans-label);
    font-size: 0.88rem;
}

.plans-files-item-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
}

.plans-files-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    font-size: 0.88rem;
}

.plans-files-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plans-files-toggle-indicator {
    width: 2.4rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    transition: background var(--plans-transition);
}

.plans-files-toggle-indicator::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: var(--plans-surface-light);
    transition: transform var(--plans-transition);
}

.plans-files-toggle input:checked + .plans-files-toggle-indicator {
    background: linear-gradient(135deg, #ffc955, #ff9d4d);
}

.plans-files-toggle input:checked + .plans-files-toggle-indicator::after {
    transform: translateX(1rem);
}

.plans-files-item-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.plans-files-item-btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
}

.plans-files-item-error {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border-radius: var(--plans-radius-sm);
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fecdd3;
    font-size: 0.9rem;
}

@media (max-width: 720px) {
    .plans-files-item-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .plans-files-item-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Chat context pills - hidden to save space */

.plans-chat-context {
    display: none !important;
}

.plans-chat-context-label {
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--plans-label);
}

.plans-chat-context-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.plans-chat-context-chip {
    background-color: var(--t-surface-hover);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--plans-text);
}

/* Takeoff workspace */

.plans-takeoff-card {
    /* Slightly lighter than the default .plans-card gradient */
    background: var(--reports-panel);
}

.plans-takeoff-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--plans-muted);
}

.plans-takeoff-status[data-variant="success"] {
    color: var(--plans-success);
}

.plans-takeoff-status[data-variant="error"] {
    color: var(--plans-accent-hot);
}

.plans-takeoff-status[data-state="loading"]::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    border: 2px solid var(--plans-border-strong);
    border-top-color: var(--plans-accent);
    animation: plans-takeoff-spin 0.8s linear infinite;
    transform-origin: 50% 50%;
    will-change: transform;
}

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

.plans-takeoff-card .plans-card-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.plans-takeoff-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-bottom: 0.5rem;
}

/* Takeoff blocks (non-collapsible sections) */
.plans-takeoff-block {
    border: none;
    border-top: 1px solid var(--t-border);
    border-radius: 0;
    background: transparent;
    overflow: visible;
    padding-top: 0.5rem;
}

.plans-takeoff-block:first-of-type {
    border-top: none;
    padding-top: 0;
}

.plans-takeoff-block-header {
    padding: 0.25rem 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border-bottom: none;
}

.plans-takeoff-block-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--plans-accent);
}

.plans-takeoff-block-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--plans-muted);
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.plans-takeoff-block-body {
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.plans-takeoff-block-body > .plans-takeoff-table {
    min-width: 100%;
    width: max-content;
}

.plans-takeoff-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.plans-takeoff-stat {
    min-width: 0;
    background: rgba(255, 201, 85, 0.08);
    border: 1px solid rgba(255, 201, 85, 0.18);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: auto;
}

.plans-takeoff-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--plans-accent);
}

.plans-takeoff-stat-label {
    font-size: 0.7rem;
    color: var(--plans-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.plans-takeoff-section {
    border: 1px solid var(--t-border-medium);
    border-radius: var(--plans-radius-md);
    background-color: var(--t-surface-soft);
    overflow: hidden;
}

.plans-takeoff-section[open] {
    background-color: var(--t-surface-soft);
    border-color: rgba(255, 201, 85, 0.18);
}

.plans-takeoff-section-header {
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--plans-transition);
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.015);
}

.plans-takeoff-section-header:hover {
    background-color: var(--t-surface-soft);
}

.plans-takeoff-section[open] .plans-takeoff-section-header {
    background: rgba(255, 201, 85, 0.06);
}

.plans-takeoff-section-header::-webkit-details-marker {
    display: none;
}

.plans-takeoff-section-header::after {
    content: "▸";
    font-size: 0.9rem;
    color: var(--plans-muted);
    transition: transform 0.15s ease;
}

.plans-takeoff-section[open] .plans-takeoff-section-header::after {
    transform: rotate(90deg);
}

.plans-takeoff-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.plans-takeoff-section-body {
    padding: 0.75rem 1.1rem 1.1rem;
    border-top: 1px solid var(--t-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.plans-takeoff-section-body > .plans-takeoff-table {
    min-width: 100%;
    width: max-content;
}

.plans-takeoff-muted {
    font-size: 0.85rem;
    color: var(--plans-label);
    margin: 0.35rem 0 0;
    line-height: 1.35;
}

.plans-takeoff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.plans-takeoff-table th,
.plans-takeoff-table td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--t-border-subtle);
    vertical-align: top;
}

.plans-takeoff-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--plans-label);
    font-weight: 600;
    background: var(--reports-chip-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.plans-takeoff-table tbody tr:hover {
    background-color: var(--t-border-subtle);
}

.plans-takeoff-table tbody tr:nth-child(even) {
    background-color: var(--t-surface-soft);
}

.plans-takeoff-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.plans-takeoff-list li {
    font-size: 0.88rem;
    color: var(--plans-text);
}

.plans-takeoff-list li strong {
    color: var(--plans-muted);
    font-weight: 500;
    margin-right: 0.25rem;
}

.plans-takeoff-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--plans-muted);
}

.plans-takeoff-empty-text {
    font-size: 1.05rem;
    margin: 0 0 0.5rem;
}

.plans-takeoff-empty-hint {
    font-size: 0.9rem;
    margin: 0;
    color: var(--plans-label);
}

/* Material Takeoff Phase Styles */
.plans-takeoff-phase-header {
    margin: 0.75rem 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--plans-border);
}

.plans-takeoff-phase-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--plans-accent);
    margin: 0 0 0.2rem;
}

.plans-takeoff-phase-subtitle {
    font-size: 0.9rem;
    color: var(--plans-muted);
    margin: 0;
}

.plans-takeoff-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.06);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(59, 130, 246, 0.12);
}

.plans-takeoff-total-item {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.plans-takeoff-total-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--plans-text);
}

.plans-takeoff-total-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--plans-muted);
    text-transform: uppercase;
}

.plans-takeoff-phase {
    margin-bottom: 0.25rem;
}

.plans-takeoff-material-table {
    width: 100%;
}

.plans-takeoff-material-table th:first-child,
.plans-takeoff-material-table td:first-child {
    width: 90px;
}

.plans-takeoff-material-table th:nth-child(3),
.plans-takeoff-material-table td:nth-child(3) {
    width: 70px;
    text-align: right;
}

.plans-takeoff-material-table th:nth-child(4),
.plans-takeoff-material-table td:nth-child(4) {
    width: 45px;
    text-align: center;
}

.plans-takeoff-material-table th:nth-child(5),
.plans-takeoff-material-table td:nth-child(5) {
    width: 120px;
}

.plans-takeoff-material-table code {
    font-size: 0.8rem;
    padding: 0.15rem 0.35rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    color: var(--plans-muted);
}

.plans-takeoff-material-table small.text-muted {
    font-size: 0.8rem;
    color: var(--plans-label);
    display: block;
    margin-top: 0.2rem;
}

.plans-takeoff-section-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--plans-muted);
    background: var(--reports-chip-bg);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: auto;
}

.text-right {
    text-align: right;
}

@media (max-width: 600px) {
    .plans-takeoff-summary {
        flex-direction: column;
    }
    
    .plans-takeoff-stat {
        min-width: 100%;
    }
    
    .plans-takeoff-table {
        font-size: 0.85rem;
    }
    
    .plans-takeoff-table th,
    .plans-takeoff-table td {
        padding: 0.45rem 0.5rem;
    }
}


.plans-chat-context-chip.is-muted {
    color: var(--plans-muted);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background: transparent;
}
    box-sizing: border-box;
}

@media (min-width: 961px) {
    .plans-session-root {
        --plans-sticky-header-gap: clamp(-0.5rem, -0.3vw, 0.3rem);
        --plans-chat-top-gap: clamp(-0.8rem, -0.35rem, 0.2rem);
        --plans-chat-top-lift: clamp(1.65rem, 3.2vh, 4.5rem);
    }
}

@media (max-height: 860px) and (min-width: 961px) {
    .plans-session-root {
        --plans-chat-top-gap: clamp(-1.2rem, -0.65rem, 0.1rem);
        --plans-chat-top-lift: clamp(1.2rem, 2.75vh, 3.5rem);
    }
}


.plans-viewer-header {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--plans-viewer-border, rgba(148, 163, 184, 0.32));
}

.plans-session-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    width: 100%;
}

.plans-session-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.plans-session-title-stack {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

/* Plan Selector Dropdown - Switch between plans in project */
.plans-plan-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

/* Custom dropdown button */
.plans-plan-selector-btn {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2847 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px;
    padding: 0.6rem 2.25rem 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--t-text);
    cursor: pointer;
    min-width: 220px;
    max-width: 100%;
    text-align: left;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.plans-plan-selector-btn:hover {
    border-color: var(--plans-accent);
    background: linear-gradient(135deg, #234a73 0%, #163558 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.plans-plan-selector-btn:focus {
    outline: none;
    border-color: var(--plans-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.plans-plan-selector-btn[aria-expanded="true"] {
    border-color: var(--plans-accent);
    background: linear-gradient(135deg, #234a73 0%, #163558 100%);
}

.plans-plan-selector-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plans-plan-selector-arrow {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--t-text-secondary);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.plans-plan-selector-btn[aria-expanded="true"] .plans-plan-selector-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Custom dropdown menu */
.plans-plan-selector-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2847 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.plans-plan-selector-menu.open {
    display: block;
}

.plans-plan-selector-menu li {
    padding: 0.6rem 1rem;
    color: var(--t-text);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.plans-plan-selector-menu li:hover {
    background: rgba(59, 130, 246, 0.25);
}

.plans-plan-selector-menu li.selected {
    background: rgba(59, 130, 246, 0.35);
}

.plans-plan-selector-menu li.selected::before {
    content: "✓ ";
    color: var(--plans-accent);
}

/* Mobile plan selector in header */
.plans-plan-selector--mobile {
    margin-top: 0.25rem;
}

.plans-plan-selector--mobile .plans-plan-selector-btn {
    min-width: 0;
    width: 100%;
    max-width: 220px;
    font-size: 0.9rem;
    padding: 0.4rem 1.75rem 0.4rem 0.6rem;
    background-color: var(--t-surface-hover);
    border-color: var(--t-border-accent);
}

.plans-plan-selector--mobile .plans-plan-selector-btn:hover,
.plans-plan-selector--mobile .plans-plan-selector-btn:focus,
.plans-plan-selector--mobile .plans-plan-selector-btn[aria-expanded="true"] {
    border-color: var(--plans-accent);
    background-color: var(--t-surface-active);
}

.plans-plan-selector--mobile .plans-plan-selector-menu {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2847 100%);
    min-width: 200px;
}

.plans-session-label {
    margin: 0;
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--plans-label);
}
[data-theme="light"] .plans-session-label {
    color: #2563eb;
}

.plans-session-meta-inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, auto));
    gap: 0.35rem;
    margin-top: 0.25rem;
    padding-right: 0;
}

.plans-session-meta-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.1rem 0;
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: var(--plans-label);
}

.plans-session-meta-summary > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    border: 1px solid var(--plans-viewer-border, rgba(148, 163, 184, 0.3));
    padding: 0.15rem 0.5rem;
    background: rgba(248, 250, 255, 0.08);
}

.plans-session-meta-label {
    text-transform: uppercase;
}

.plans-session-meta-value {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--plans-text);
    letter-spacing: 0.04em;
}

.plans-session-meta-details {
    margin-top: 0.1rem;
}

.plans-session-meta-details summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--plans-label);
    cursor: pointer;
    padding: 0.2rem 0;
}

.plans-session-meta-details summary::-webkit-details-marker {
    display: none;
}

.plans-session-meta-details summary::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--plans-transition);
}

.plans-session-meta-details[open] summary::before {
    transform: rotate(45deg);
}

.plans-session-meta-count {
    color: var(--plans-muted);
    letter-spacing: 0.08em;
}

.plans-session-meta-details[open] summary {
    color: var(--plans-accent);
}

.plans-session-meta-details .plans-session-meta-inline {
    margin-top: 0.3rem;
    padding: 0.25rem 0 0;
}

.plans-session-title {
    margin: 0;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    line-height: 1.15;
    color: #fdfdff;
    letter-spacing: -0.01em;
}
[data-theme="light"] .plans-session-title {
    color: #0f172a;
}

.plans-session-subtitle,
.plans-session-location {
    margin: 0;
    color: var(--plans-label);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-session-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: fit-content;
}

.plans-session-actions .plans-btn {
    padding: 0.32rem 0.9rem;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
}

.plans-admin-hq-btn {
    border-color: rgba(126, 250, 209, 0.45);
    color: var(--plans-success);
    background: rgba(126, 250, 209, 0.08);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.plans-admin-hq-btn:hover,
.plans-admin-hq-btn:focus-visible {
    border-color: var(--plans-success);
    background: rgba(126, 250, 209, 0.18);
    transform: translateY(-1px);
}

.plans-admin-hq-shortcut {
    border: 1px solid var(--t-border-accent);
    border-radius: 999px;
    padding: 0.08rem 0.4rem;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 640px) {
    .plans-admin-hq-shortcut {
        display: none;
    }
}

.plans-viewer-header .plans-chip {
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-color: rgba(255, 255, 255, 0.09);
    background-color: var(--t-surface-soft);
    color: var(--plans-muted);
}

.plans-viewer-header .plans-chip-outline {
    border-color: rgba(255, 201, 85, 0.35);
    color: var(--plans-accent);
}

.plans-reset-btn {
    padding: 0.32rem 0.9rem;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    border-color: rgba(255, 201, 85, 0.35);
    color: var(--plans-accent);
    background-color: var(--t-surface-soft);
    white-space: nowrap;
}

/* ── Column resizer: hidden by default (mobile), shown only via desktop media query ── */
.plans-column-resizer {
    display: none;
}

.plans-session-grid {
    display: grid;
    gap: clamp(0.22rem, 0.38vw, 0.55rem);
    min-height: 0;
    flex: 1;
    grid-auto-rows: auto;
    align-content: start;
    margin-top: 0;
}

/* Hide resizer only when viewer-collapsed in pure plans view (no tool mode active) */
.plans-session-grid.is-viewer-collapsed:not(.is-dashboard-mode):not(.is-document-mode):not(.is-rfi-mode):not(.is-files-mode):not(.is-fileviewer-mode):not(.is-hires-mode):not(.is-takeoff-mode):not(.is-jobtread-mode):not(.is-team-mode):not(.is-leads-mode):not(.is-projects-mode):not(.is-command-mode):not(.is-dailylog-mode):not(.is-phasegates-mode):not(.is-docbuilder-mode):not(.is-payments-mode):not(.is-home-mode):not(.is-budget-mode) .plans-column-resizer {
    display: none !important;
}

.plans-session-grid.is-viewer-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
}

.plans-session-grid.is-viewer-collapsed .plans-viewer-card,
.plans-session-grid.is-viewer-collapsed .plans-chat-card {
    grid-column: 1 / -1;
}

.plans-session-grid.is-dashboard-mode,
.plans-session-grid.is-document-mode,
.plans-session-grid.is-rfi-mode,
.plans-session-grid.is-files-mode,
.plans-session-grid.is-fileviewer-mode,
.plans-session-grid.is-hires-mode,
.plans-session-grid.is-takeoff-mode,
.plans-session-grid.is-jobtread-mode,
.plans-session-grid.is-team-mode,
.plans-session-grid.is-leads-mode,
.plans-session-grid.is-projects-mode,
.plans-session-grid.is-command-mode,
.plans-session-grid.is-docbuilder-mode,
.plans-session-grid.is-payments-mode,
.plans-session-grid.is-home-mode,
.plans-session-grid.is-budget-mode {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.plans-session-grid.is-dashboard-mode .plans-primary-column,
.plans-session-grid.is-dashboard-mode .plans-chat-card,
.plans-session-grid.is-document-mode .plans-primary-column,
.plans-session-grid.is-document-mode .plans-chat-card,
.plans-session-grid.is-rfi-mode .plans-primary-column,
.plans-session-grid.is-rfi-mode .plans-chat-card,
.plans-session-grid.is-files-mode .plans-primary-column,
.plans-session-grid.is-files-mode .plans-chat-card,
.plans-session-grid.is-fileviewer-mode .plans-primary-column,
.plans-session-grid.is-fileviewer-mode .plans-chat-card,
.plans-session-grid.is-hires-mode .plans-primary-column,
.plans-session-grid.is-hires-mode .plans-chat-card,
.plans-session-grid.is-takeoff-mode .plans-primary-column,
.plans-session-grid.is-takeoff-mode .plans-chat-card,
.plans-session-grid.is-jobtread-mode .plans-primary-column,
.plans-session-grid.is-jobtread-mode .plans-chat-card,
.plans-session-grid.is-team-mode .plans-primary-column,
.plans-session-grid.is-team-mode .plans-chat-card,
.plans-session-grid.is-leads-mode .plans-primary-column,
.plans-session-grid.is-leads-mode .plans-chat-card,
.plans-session-grid.is-projects-mode .plans-primary-column,
.plans-session-grid.is-projects-mode .plans-chat-card,
.plans-session-grid.is-command-mode .plans-primary-column,
.plans-session-grid.is-command-mode .plans-chat-card,
.plans-session-grid.is-docbuilder-mode .plans-primary-column,
.plans-session-grid.is-docbuilder-mode .plans-chat-card,
.plans-session-grid.is-payments-mode .plans-primary-column,
.plans-session-grid.is-payments-mode .plans-chat-card,
.plans-session-grid.is-home-mode .plans-primary-column,
.plans-session-grid.is-home-mode .plans-chat-card,
.plans-session-grid.is-budget-mode .plans-primary-column,
.plans-session-grid.is-budget-mode .plans-chat-card {
    grid-column: auto;
}

@media (min-width: 900px) {
    .plans-session-grid.is-viewer-collapsed {
        justify-items: center;
    }

    .plans-session-grid.is-viewer-collapsed .plans-chat-card {
        width: min(1040px, 100%);
        max-width: min(1040px, 100%);
        justify-self: center;
    }

    .plans-session-grid.is-viewer-collapsed.is-dashboard-mode,
    .plans-session-grid.is-viewer-collapsed.is-document-mode,
    .plans-session-grid.is-viewer-collapsed.is-rfi-mode,
    .plans-session-grid.is-viewer-collapsed.is-files-mode,
    .plans-session-grid.is-viewer-collapsed.is-fileviewer-mode,
    .plans-session-grid.is-viewer-collapsed.is-hires-mode,
    .plans-session-grid.is-viewer-collapsed.is-takeoff-mode,
    .plans-session-grid.is-viewer-collapsed.is-jobtread-mode,
    .plans-session-grid.is-viewer-collapsed.is-team-mode,
    .plans-session-grid.is-viewer-collapsed.is-leads-mode,
    .plans-session-grid.is-viewer-collapsed.is-projects-mode,
    .plans-session-grid.is-viewer-collapsed.is-command-mode,
    .plans-session-grid.is-viewer-collapsed.is-docbuilder-mode,
    .plans-session-grid.is-viewer-collapsed.is-payments-mode,
    .plans-session-grid.is-viewer-collapsed.is-home-mode,
    .plans-session-grid.is-viewer-collapsed.is-budget-mode {
        grid-template-columns: minmax(0, var(--plans-left-col, 1.05fr)) auto minmax(0, var(--plans-right-col, 0.95fr));
        justify-items: stretch;
        gap: 0;
    }

    .plans-session-grid.is-viewer-collapsed.is-budget-mode .plans-chat-card {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-budget-mode .plans-primary-column {
        grid-column: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
        align-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-budget-mode .plans-chat-card {
        grid-column: 3;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-dashboard-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-hires-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-jobtread-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-team-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-leads-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-projects-mode .plans-chat-card {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-command-mode .plans-chat-card {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-docbuilder-mode .plans-chat-card {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-payments-mode .plans-chat-card {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-home-mode .plans-chat-card {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-fileviewer-mode .plans-chat-card {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-dashboard-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-document-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-rfi-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-files-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-fileviewer-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-hires-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-takeoff-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-jobtread-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-team-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-leads-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-projects-mode .plans-primary-column,
    .plans-session-grid.is-viewer-collapsed.is-command-mode .plans-primary-column {
        grid-column: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-docbuilder-mode .plans-primary-column {
        grid-column: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
        align-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-payments-mode .plans-primary-column {
        grid-column: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
        align-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-home-mode .plans-primary-column {
        grid-column: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
        align-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-fileviewer-mode .plans-primary-column {
        grid-column: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
        align-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-dashboard-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-document-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-rfi-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-files-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-fileviewer-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-hires-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-takeoff-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-jobtread-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-team-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-leads-mode .plans-chat-card,
    .plans-session-grid.is-viewer-collapsed.is-projects-mode .plans-chat-card {
        grid-column: 3;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-docbuilder-mode .plans-chat-card {
        grid-column: 3;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-payments-mode .plans-chat-card {
        grid-column: 3;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-home-mode .plans-chat-card {
        grid-column: 3;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-command-mode .plans-chat-card {
        grid-column: 3;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid:not(.is-viewer-collapsed) .plans-primary-column {
        grid-column: 1;
    }

    .plans-session-grid:not(.is-viewer-collapsed) .plans-chat-card {
        grid-column: 3;
    }

    .plans-session-grid.is-dashboard-mode,
    .plans-session-grid.is-document-mode,
    .plans-session-grid.is-rfi-mode,
    .plans-session-grid.is-files-mode,
    .plans-session-grid.is-fileviewer-mode,
    .plans-session-grid.is-hires-mode,
    .plans-session-grid.is-takeoff-mode,
    .plans-session-grid.is-jobtread-mode,
    .plans-session-grid.is-team-mode,
    .plans-session-grid.is-leads-mode,
    .plans-session-grid.is-projects-mode,
    .plans-session-grid.is-command-mode,
    .plans-session-grid.is-docbuilder-mode,
    .plans-session-grid.is-payments-mode,
    .plans-session-grid.is-budget-mode {
        grid-template-columns: minmax(0, var(--plans-left-col, 1.05fr)) auto minmax(0, var(--plans-right-col, 0.95fr));
        justify-items: stretch;
    }
    .plans-session-grid.is-docbuilder-mode {
        gap: 0;
    }
    .plans-session-grid.is-payments-mode {
        gap: 0;
    }
    .plans-session-grid.is-fileviewer-mode {
        gap: 0;
    }
    .plans-session-grid.is-budget-mode {
        gap: 0;
    }

    .plans-session-grid.is-dashboard-mode .plans-chat-card,
    .plans-session-grid.is-document-mode .plans-chat-card,
    .plans-session-grid.is-rfi-mode .plans-chat-card,
    .plans-session-grid.is-files-mode .plans-chat-card,
    .plans-session-grid.is-fileviewer-mode .plans-chat-card,
    .plans-session-grid.is-hires-mode .plans-chat-card,
    .plans-session-grid.is-takeoff-mode .plans-chat-card,
    .plans-session-grid.is-jobtread-mode .plans-chat-card,
    .plans-session-grid.is-team-mode .plans-chat-card,
    .plans-session-grid.is-leads-mode .plans-chat-card,
    .plans-session-grid.is-projects-mode .plans-chat-card,
    .plans-session-grid.is-command-mode .plans-chat-card,
    .plans-session-grid.is-docbuilder-mode .plans-chat-card,
    .plans-session-grid.is-payments-mode .plans-chat-card,
    .plans-session-grid.is-budget-mode .plans-chat-card {
        grid-column: 3;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
}

.plans-viewer-card.is-collapsed-desktop {
    align-self: stretch;
    height: auto;
    max-height: none;
    min-height: 0;
    padding: clamp(0.08rem, 0.25vw, 0.35rem);
    margin: 0;
    background: transparent;
    border-color: transparent;
    border-width: 0;
    box-shadow: none;
    position: static;
    top: auto;
    gap: 0;
}
@media (min-height: 900px) and (min-width: 1100px) {
    body.plans-body {
        height: 100%;
        overflow: hidden;
    }

    body.plans-body .app-main {
        min-height: 0;
        height: calc(100vh - var(--app-header-height, 70px));
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .plans-session-root {
        min-height: calc(100vh - var(--app-header-height, 70px));
    }
}

.plans-viewer-card,
.plans-chat-card {
    min-height: 0;
}

@media (min-width: 1100px) {
    body.plans-body {
        min-height: 100vh;
        height: 100vh;
        overflow: hidden;
        /* Balanced offsets so sticky cards clear the viewport bottom */
        --plans-session-bottom-buffer: clamp(1rem, 1.8vh, 2.25rem);
        --plans-viewer-height-reduction: clamp(0.45rem, 0.9vh, 1.4rem);
        --plans-chat-height-reduction: clamp(0.45rem, 0.9vh, 1.4rem);
        --plans-chat-bottom-adjust: clamp(1.1rem, 1.95vh, 2.4rem);
        --plans-session-card-offset: clamp(-0.35rem, -0.2rem, 0rem);
        /* Smaller header on desktop (50px vs 70px) */
        --app-header-height: 50px;
        /* Reduce max height slightly so chat input stays visible */
        --plans-viewer-max-height: calc(100vh - var(--app-header-height, 50px) - 3rem);
    }

    /* Reduce top padding to bring content closer to header */
    body.plans-body.plans-session-page {
        padding-top: 0 !important;
    }

    body.plans-body.plans-session-page .app-main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.plans-body .app-main {
        min-height: 100vh;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .plans-session-root {
        --plans-sticky-header-gap: -0.5rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: var(--plans-session-available-height, 100vh);
        max-height: var(--plans-session-available-height, 100vh);
        height: var(--plans-session-available-height, 100vh);
        width: 100%;
        overflow: hidden;
        padding-top: 0 !important;
        margin-top: 0 !important;
        gap: 0;
    }

    .plans-session-grid {
        flex: 1;
        min-height: 0;
        height: 100%;
        grid-template-columns: minmax(0, var(--plans-left-col, 1.05fr)) auto minmax(0, var(--plans-right-col, 0.95fr));
        grid-template-rows: auto 1fr;
        gap: clamp(0.9rem, 1.15vw, 1.3rem);
        align-items: start;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* ── Column resizer handle (desktop only) ── */
    .plans-column-resizer {
        grid-column: 2;
        grid-row: 1 / -1;
        width: 20px;
        cursor: col-resize;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        user-select: none;
        -webkit-user-select: none;
        margin: 0 -6px;
    }

    .plans-column-resizer-track {
        width: 6px;
        height: 64px;
        border-radius: 6px;
        background-color: var(--t-surface-active);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        transition: background 0.2s ease, height 0.2s ease, width 0.2s ease;
    }

    .plans-column-resizer:hover .plans-column-resizer-track,
    .plans-column-resizer:focus-visible .plans-column-resizer-track,
    .plans-column-resizer.is-dragging .plans-column-resizer-track {
        background: rgba(255, 201, 85, 0.4);
        height: 88px;
        width: 8px;
    }

    .plans-column-resizer-thumb {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.28);
        transition: background 0.2s ease;
        box-shadow:
            0 6px 0 rgba(255, 255, 255, 0.28),
            0 12px 0 rgba(255, 255, 255, 0.28);
    }

    .plans-column-resizer:hover .plans-column-resizer-thumb,
    .plans-column-resizer:focus-visible .plans-column-resizer-thumb,
    .plans-column-resizer.is-dragging .plans-column-resizer-thumb {
        background: var(--plans-accent, #ffc955);
        box-shadow:
            0 6px 0 var(--plans-accent, #ffc955),
            0 12px 0 var(--plans-accent, #ffc955);
    }

    /* ── Resizer: light mode overrides (thumb dots visible on light bg) ── */
    [data-theme="light"] .plans-column-resizer-track {
        background-color: rgba(0, 0, 0, 0.15);
    }

    [data-theme="light"] .plans-column-resizer:hover .plans-column-resizer-track,
    [data-theme="light"] .plans-column-resizer:focus-visible .plans-column-resizer-track,
    [data-theme="light"] .plans-column-resizer.is-dragging .plans-column-resizer-track {
        background: rgba(249, 115, 22, 0.45);
    }

    [data-theme="light"] .plans-column-resizer-thumb {
        background: rgba(0, 0, 0, 0.32);
        box-shadow:
            0 6px 0 rgba(0, 0, 0, 0.32),
            0 12px 0 rgba(0, 0, 0, 0.32);
    }

    [data-theme="light"] .plans-column-resizer:hover .plans-column-resizer-thumb,
    [data-theme="light"] .plans-column-resizer:focus-visible .plans-column-resizer-thumb,
    [data-theme="light"] .plans-column-resizer.is-dragging .plans-column-resizer-thumb {
        background: #f97316;
        box-shadow:
            0 6px 0 #f97316,
            0 12px 0 #f97316;
    }

    /* While dragging, force col-resize cursor everywhere and disable text selection */
    body.plans-resizing,
    body.plans-resizing * {
        cursor: col-resize !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    /* Tabs span only left column, row 1 */
    .plans-workspace-tabs {
        grid-column: 1;
        grid-row: 1;
    }

    /* Primary column (viewer etc) in left column, row 2 */
    .plans-primary-column {
        grid-column: 1;
        grid-row: 2;
    }

    /* Chat card spans full height on right column (both rows) */
    .plans-chat-card,
    .plans-session-grid:not(.is-viewer-collapsed) .plans-chat-card {
        grid-column: 3;
        grid-row: 1 / -1;
    }

    .plans-viewer-card,
    .plans-chat-card {
        display: flex;
        flex-direction: column;
        border-radius: 24px;
        padding: clamp(0.8rem, 0.95vw, 1.1rem);
        background: rgba(7, 9, 20, 0.9);
        border: 1px solid var(--t-border);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        transition: transform 0.4s ease, border-color 0.4s ease;
        overflow: hidden;
        position: sticky;
    }

    .plans-dashboard-card {
        height: calc(var(--plans-viewer-max-height) - var(--plans-left-toolbar-lift, 0px));
        max-height: calc(var(--plans-viewer-max-height) - var(--plans-left-toolbar-lift, 0px));
        position: sticky;
        top: 0rem;
        border-radius: 24px;
        padding: clamp(0.8rem, 0.95vw, 1.1rem);
        border: 1px solid var(--t-border);
        background: rgba(7, 9, 20, 0.9);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        gap: clamp(0.85rem, 1vw, 1.2rem);
        margin-bottom: var(--plans-left-safe-bottom, 0px);
    }

    .plans-rfi-card {
        height: calc(var(--plans-viewer-max-height) - var(--plans-left-toolbar-lift, 0px));
        max-height: calc(var(--plans-viewer-max-height) - var(--plans-left-toolbar-lift, 0px));
        position: sticky;
        top: 0rem;
        border-radius: 24px;
        padding: clamp(0.8rem, 0.95vw, 1.1rem);
        border: 1px solid var(--t-border);
        background: rgba(7, 9, 20, 0.9);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        gap: clamp(0.85rem, 1vw, 1.2rem);
        display: flex;
        flex-direction: column;
        margin-bottom: var(--plans-left-safe-bottom, 0px);
    }

    .plans-document-card {
        height: calc(var(--plans-viewer-max-height) - var(--plans-left-toolbar-lift, 0px));
        max-height: calc(var(--plans-viewer-max-height) - var(--plans-left-toolbar-lift, 0px));
        position: sticky;
        top: 0rem;
        border-radius: 24px;
        padding: clamp(0.8rem, 0.95vw, 1.1rem);
        border: 1px solid var(--t-border);
        background: rgba(7, 9, 20, 0.9);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        gap: clamp(0.85rem, 1vw, 1.2rem);
        display: flex;
        flex-direction: column;
        margin-bottom: var(--plans-left-safe-bottom, 0px);
    }

    .plans-takeoff-card {
        /* Use a shorter height than other cards so content doesn't get cut off */
        height: calc(var(--plans-viewer-max-height) - var(--plans-left-toolbar-lift, 0px) - 2rem);
        max-height: calc(var(--plans-viewer-max-height) - var(--plans-left-toolbar-lift, 0px) - 2rem);
        position: sticky;
        /* Move card higher with moderate negative offset */
        top: clamp(-1.25rem, -1vh, -0.75rem);
        border-radius: 24px;
        padding: clamp(0.8rem, 0.95vw, 1.1rem);
        border: 1px solid var(--t-border);
        background: rgba(7, 9, 20, 0.9);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        gap: clamp(0.85rem, 1vw, 1.2rem);
        display: flex;
        flex-direction: column;
        margin-bottom: var(--plans-left-safe-bottom, 0px);
        /* Slight negative margin to push card up */
        margin-top: -0.5rem;
    }

    .plans-takeoff-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-right: 0.35rem;
    }

    .plans-document-body {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        padding: clamp(0.65rem, 0.9vw, 1rem);
        border-radius: var(--plans-radius-md);
        background: rgba(10, 11, 18, 0.75);
    }

    .plans-document-viewer {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-right: 0.35rem;
    }

    .plans-dashboard-body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(0.85rem, 1.1vw, 1.3rem);
    }

    .plans-rfi-body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(0.85rem, 1.1vw, 1.3rem);
    }

    .plans-dashboard-list,
    .plans-dashboard-details {
        min-height: 0;
        overflow: hidden;
    }

    .plans-dashboard-table-wrapper,
    .plans-dashboard-details {
        overflow: auto;
    }

    .plans-rfi-list,
    .plans-rfi-details {
        min-height: 0;
        overflow: hidden;
    }

    .plans-rfi-list .plans-dashboard-table-wrapper,
    .plans-rfi-details {
        overflow: auto;
    }

    .plans-viewer-card {
        align-self: flex-start;
        top: 0rem;
    }

    .plans-chat-card {
        align-self: stretch;
        top: 0;
    }

    .plans-viewer-card {
        height: calc(var(--plans-viewer-max-height) - var(--plans-left-toolbar-lift, 0px));
        max-height: calc(var(--plans-viewer-max-height) - var(--plans-left-toolbar-lift, 0px));
        margin-bottom: var(--plans-left-safe-bottom, 0px);
    }

    .plans-chat-card {
        /* Fill entire grid height (spans both rows) */
        height: calc(100% - 1.5rem);
        max-height: calc(100vh - var(--app-header-height, 50px) - 2rem);
        top: 0;
        position: relative;
        padding: 0.5rem 0.8rem calc(0.5rem + max(var(--plans-safe-area-bottom, 0px), 0px));
        margin: 0;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .plans-chat-card .plans-card-header {
        flex-shrink: 0;
        padding-bottom: 0.15rem;
        padding-top: 0.5rem;
        margin-top: 0;
    }

    .plans-chat-card .plans-card-title {
        font-size: 0.78rem;
        letter-spacing: 0.18em;
    }

    .plans-chat-card .plans-card-subtitle {
        display: none; /* Hide subtitle on desktop to save space */
    }

    .plans-viewer-body,
    .plans-chat-body {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        padding-bottom: clamp(0.25rem, 0.6vh, 0.9rem);
    }

    .plans-chat-body {
        padding-bottom: calc(
            clamp(0.25rem, 0.6vh, 0.9rem) + max(var(--plans-safe-area-bottom, 0px), 0px)
        );
    }

    .plans-chat-stage {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
    }

    .plans-chat-input-row {
        flex-shrink: 0;
        margin-top: auto;
        padding-top: 0.25rem;
        padding-bottom: max(var(--plans-safe-area-bottom, 0px), 0px);
    }

    .plans-chat-input-shell {
        padding: 0.4rem 0.6rem !important;
        gap: 0.5rem !important;
    }

    .plans-chat-input {
        min-height: 36px !important;
        max-height: 100px !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.92rem !important;
    }

    .plans-chat-send-btn {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: 0.5rem 0.9rem !important;
    }

    .plans-chat-voice-btn {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: 0.5rem !important;
    }

    .plans-toolbox-tab {
        flex-shrink: 0;
        margin-top: auto;
        padding-bottom: 0;
        padding-top: 0.25rem;
    }

    .plans-toolbox-tab-btn {
        padding: 0.35rem 0.9rem !important;
        font-size: 0.7rem !important;
    }

    .plans-chat-messages {
        overflow-y: auto;
    }

    .plans-viewer-stage {
        aspect-ratio: 4 / 3;
        height: auto;
        max-height: var(--plans-viewer-max-height);
        min-height: 0;
    }

    .plans-viewer-pdf-shell,
    .plans-viewer-pdf-frame {
        height: 100%;
        min-height: auto;
        max-height: var(--plans-viewer-max-height);
    }

    .plans-main-viewer {
        min-height: auto;
    }
}

@media (min-width: 1400px) {
    body.plans-body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        --plans-sticky-offset: clamp(-0.32rem, 0vw, 0rem);
        --plans-session-card-offset: clamp(-6.45rem, -5.05rem, -2.35rem);
        --plans-session-card-bottom-gap: clamp(-0.55rem, 0vh, 0.05rem);
        --plans-session-bottom-buffer: clamp(-10.5rem, -7.8vh, -3.4rem);
    --plans-chat-bottom-adjust: clamp(-22rem, -14.5vh, -4.6rem);
    --plans-sticky-header-gap: clamp(-0.25rem, 0.35vw, 0.75rem);
        --plans-viewer-height-reduction: clamp(-1.65rem, -0.35vh, 0.05rem);
        --plans-chat-height-reduction: clamp(-7.2rem, -4.4vh, -0.15rem);
        --plans-chat-sticky-gap: clamp(0.18rem, 0.55vh, 0.75rem);
    }

    body.plans-body .app-main {
        flex: 1;
        padding: 0 0 clamp(0.4rem, 1.1vw, 1.3rem);
        display: flex;
        flex-direction: column;
    }

    body.plans-body .app-footer {
        display: none;
    }

    .plans-session-root {
        max-width: none;
        width: 100%;
        padding-top: 0;
        padding-right: clamp(0rem, 0.24vw, 0.18rem);
        padding-left: clamp(0rem, 0.24vw, 0.18rem);
        padding-bottom: clamp(-0.58rem, 0vw, 0rem);
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - var(--app-header-height, 70px));
        gap: 0;
    }

    .plans-session-meta-inline {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, auto));
        gap: 0.35rem;
        margin-top: 0.25rem;
        padding-right: 0;
    }
    .plans-session-meta-summary {
        display: inline-flex;
        align-items: center;
        gap: 0.85rem;
        flex-wrap: wrap;
        padding: 0.2rem 0;
        margin: 0.1rem 0 0;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        color: var(--plans-label);
    }

    .plans-session-meta-summary > span {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        border: 1px solid var(--t-border-medium);
        padding: 0.25rem 0.65rem;
        background-color: var(--t-surface-soft);
    }
    .plans-chat-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .plans-main-viewer-shell,
    .plans-main-viewer,
    .plans-viewer-stage,
    .plans-chat-stage {
        flex: 1;
        min-height: 0;
    }

    .plans-viewer-stage {
        overflow-x: auto;
        overflow-y: visible;
        border-radius: 20px;
        border-width: 1px;
    }

    .plans-chat-stage,
    .plans-chat-messages {
        overflow: auto;
    }

    .plans-chat-input-row {
        flex-shrink: 0;
        margin-top: auto;
        padding-top: 0.25rem;
        padding-bottom: max(var(--plans-safe-area-bottom, 0px), 0px);
    }
}
.plans-main-viewer {
    min-height: clamp(90px, 17vh, 200px);
    max-height: var(--plans-viewer-max-height);
    height: min(100%, var(--plans-viewer-max-height));
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--plans-viewer-border, rgba(148, 163, 184, 0.35));
    background: var(--plans-viewer-gradient);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    box-shadow:
        var(--plans-viewer-shadow, 0 35px 70px rgba(5, 8, 20, 0.55)),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    isolation: isolate;
}

.plans-main-viewer::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.28), transparent 58%),
        radial-gradient(circle at 82% 8%, rgba(14, 165, 233, 0.22), transparent 50%),
        radial-gradient(circle at 84% 78%, rgba(255, 201, 85, 0.25), transparent 52%),
        linear-gradient(185deg, rgba(2, 6, 23, 0.35), transparent 72%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.72;
    z-index: -1;
}

.plans-main-viewer-placeholder {
    text-align: center;
    padding: 2rem;
    color: var(--plans-muted);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.plans-viewer-stage {
    position: relative;
    width: 100%;
    min-height: clamp(90px, 22vh, 220px);
    max-height: var(--plans-viewer-max-height);
    height: min(var(--plans-viewer-max-height), 100%);
    border-radius: var(--plans-radius-md);
    border: 1px solid var(--plans-viewer-border, rgba(148, 163, 184, 0.35));
    background:
        radial-gradient(circle at 12% 18%, rgba(82, 148, 255, 0.32), transparent 58%),
        radial-gradient(circle at 84% 4%, rgba(126, 250, 209, 0.26), transparent 52%),
        radial-gradient(circle at 90% 86%, rgba(255, 190, 120, 0.3), transparent 46%),
        var(--plans-viewer-panel, rgba(14, 20, 38, 0.82));
    overflow-x: auto;
    overflow-y: auto;
    box-shadow:
        inset 0 0 45px rgba(5, 8, 18, 0.55),
        var(--plans-viewer-shadow, 0 35px 70px rgba(5, 8, 20, 0.55));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    isolation: isolate;
}

.plans-viewer-pdf-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    border: 1px solid var(--plans-viewer-border, rgba(148, 163, 184, 0.35));
    border-radius: var(--plans-radius-md);
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 18%, rgba(82, 148, 255, 0.28), transparent 50%),
        radial-gradient(circle at 78% 12%, rgba(126, 250, 209, 0.24), transparent 46%),
        radial-gradient(circle at 90% 90%, rgba(255, 190, 120, 0.28), transparent 42%),
        var(--plans-viewer-panel, rgba(14, 20, 38, 0.82));
}

.plans-viewer-pdf-frame {
    width: 100%;
    flex: 1;
    border: none;
    background: var(--t-surface);
    min-height: 0;
    height: 100%;
}

.plans-viewer-pdf-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--plans-viewer-border, rgba(136, 178, 255, 0.48));
    background:
        radial-gradient(circle at 18% 0%, rgba(82, 148, 255, 0.22), transparent 55%),
        linear-gradient(120deg, rgba(10, 16, 34, 0.9), rgba(6, 9, 20, 0.92));
}

.plans-viewer-open-btn {
    padding: 0.65rem 1.5rem;
    font-size: 0.75rem;
}
.plans-main-viewer-label {
    font-size: 1rem;
}

.plans-main-viewer-caption {
    font-size: 0.9rem;
    color: var(--plans-label);
}


.plans-chat-body {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: clamp(0rem, 0.25vw, 0.3rem);
    align-items: stretch;
    flex: 1;
    min-height: 0;
    position: relative;
    padding-bottom: calc(
        clamp(0.35rem, 0.8vh, 1rem) + max(var(--plans-safe-area-bottom, 0px), 0px)
    );
    overflow: hidden;
    background: transparent;
    border-radius: calc(var(--plans-radius-lg, 26px) - 6px);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.plans-chat-card {
    display: flex;
    flex-direction: column;
    /* Height controlled by media queries */
    min-height: 0;
    border: none;
    border-radius: var(--plans-radius-lg, 26px);
    padding: clamp(0.1rem, 0.2vw, 0.3rem) clamp(0.15rem, 0.3vw, 0.4rem)
        calc(clamp(0.05rem, 0.25vw, 0.35rem) + max(var(--plans-safe-area-bottom, 0px), 0px));
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    position: sticky;
    /* top value set in media queries */
    align-self: start;
    overflow: hidden;
}

.plans-chat-toolbar {
    display: flex;
    justify-content: flex-end;
}

.plans-toolbox-toggle {
    border-radius: 999px;
    border: 1px solid var(--t-border-accent);
    background: rgba(255, 255, 255, 0.05);
    color: var(--plans-text);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: background var(--plans-transition), border-color var(--plans-transition), color var(--plans-transition);
}

.plans-toolbox-toggle:hover,
.plans-toolbox-toggle:focus-visible {
    border-color: rgba(255, 201, 85, 0.7);
    color: var(--plans-accent);
}

.plans-chat-stage {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: var(--plans-radius-md);
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: clamp(0.1rem, 0.25vw, 0.25rem);
    min-height: 0;
    grid-row: 1 / 2;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.plans-chat-stage .plans-chat-messages {
    flex: 1;
    min-height: 0;
    height: auto;
    max-height: none;
    width: 100%;
    background: transparent;
    border-radius: calc(var(--plans-radius-md) - 6px);
    padding: 0.02rem 2rem 0.12rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.plans-chat-jump {
    position: fixed;
    right: 1rem;
    bottom: 8rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: var(--t-surface-active);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--t-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
    z-index: 1100;
    cursor: pointer;
}

.plans-chat-jump:is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.plans-chat-jump.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Hide jump button when toolbox is open */
.plans-toolbox-overlay.is-active ~ * .plans-chat-jump,
.plans-toolbox-overlay.is-active + * .plans-chat-jump {
    opacity: 0 !important;
    pointer-events: none !important;
}

.plans-chat-jump-arrow {
    font-size: 18px;
    font-weight: 400;
    color: var(--t-text);
    line-height: 1;
    text-shadow: none;
    -webkit-text-stroke: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plans-chat-jump:is(:hover, :focus-visible) .plans-chat-jump-arrow {
    color: var(--t-text);
    text-shadow: none;
    -webkit-text-stroke: 0;
}

.plans-toolbox-tab {
    display: none;
    justify-content: center;
    align-items: center;
    grid-row: 2 / 3;
}

.plans-toolbox-tab-btn {
    border-radius: 999px;
    border: 1px solid var(--t-border-accent);
    background-color: var(--t-surface-hover);
    color: var(--plans-text);
    font-size: 0.82rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    transition: background var(--plans-transition), border-color var(--plans-transition), color var(--plans-transition);
}

.plans-toolbox-tab-btn:hover,
.plans-toolbox-tab-btn:focus-visible {
    border-color: rgba(79, 139, 255, 0.75);
    color: var(--t-link-hover);
}

.plans-toolbox-tab.is-visible {
    display: flex;
}

.plans-toolbox-tab.is-suppressed {
    display: none !important;
}

.plans-chat-stage[data-toolbox-state="hidden"] ~ .plans-toolbox-tab {
    margin-top: -0.35rem;
}

.plans-saved-tab {
    display: none !important;
    position: absolute;
    right: clamp(-0.25rem, -1vw, 0.1rem);
    top: clamp(4.5rem, 22vh, 7.6rem);
    transform: translateX(45%);
    z-index: 1200;
    pointer-events: none;
}

.plans-saved-tab.is-visible {
    display: block;
    pointer-events: auto;
}

.plans-saved-tab-btn {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.55rem;
    border-radius: 999px 0 0 999px;
    border: 1px solid var(--t-border-accent);
    background: rgba(6, 7, 14, 0.9);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: var(--plans-text);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    cursor: pointer;
    transition: transform var(--plans-transition), border-color var(--plans-transition), background var(--plans-transition);
}

.plans-saved-tab-btn:focus-visible,
.plans-saved-tab-btn:hover {
    border-color: var(--plans-accent);
    background: rgba(255, 201, 85, 0.1);
    color: var(--t-text);
}

.plans-saved-tab-label {
    font-size: 0.68rem;
    letter-spacing: 0.25em;
}

.plans-saved-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--t-border-accent);
    font-size: 0.75rem;
    letter-spacing: normal;
}

@media (min-width: 961px) {
    .plans-saved-tab {
        display: none !important;
    }
}

@media (max-width: 960px) {
    .plans-chat-stage {
        width: 100%;
    }

    .plans-chat-card {
        position: static;
        height: auto;
        max-height: none;
    }

    .plans-chat-body {
        min-height: 520px;
    }

    .plans-viewer-card {
        height: auto;
        max-height: none;
    }
}

.plans-saved-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    z-index: 1500;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--plans-transition);
}

.plans-saved-overlay.is-active {
    pointer-events: auto;
    opacity: 1;
}

.plans-saved-scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 12, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.plans-saved-panel {
    position: relative;
    width: min(360px, calc(100% - 2rem));
    max-height: min(78vh, 520px);
    border-radius: 22px;
    border: 1px solid var(--t-border-accent);
    background: linear-gradient(168deg, rgba(11, 16, 32, 0.96), rgba(5, 9, 22, 0.98));
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: clamp(0.85rem, 2vw, 1.3rem);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    transform: translateY(-8px);
    opacity: 0;
    transition:
        opacity var(--plans-transition),
        transform var(--plans-transition);
}

.plans-saved-overlay.is-active .plans-saved-panel {
    opacity: 1;
    transform: translateY(0);
}

.plans-saved-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.plans-saved-label {
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--plans-label);
    margin-bottom: 0.2rem;
}

.plans-saved-title {
    margin: 0;
    font-size: 1.25rem;
}

.plans-saved-close {
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: var(--t-surface-hover);
    color: var(--t-text);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--plans-transition), color var(--plans-transition);
}

.plans-saved-close:hover,
.plans-saved-close:focus-visible {
    background: rgba(255, 201, 85, 0.15);
    color: var(--plans-accent);
}

.plans-saved-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    overflow: hidden;
}

.plans-saved-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow-y: auto;
    max-height: 100%;
    padding-right: 0.2rem;
}

.plans-saved-status {
    font-size: 0.92rem;
    color: var(--plans-label);
}

.plans-saved-item {
    border-radius: 14px;
    border: 1px solid var(--t-border);
    background-color: var(--t-surface-soft);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.plans-saved-item-btn {
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    text-align: left;
    cursor: pointer;
}

.plans-saved-item-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.plans-saved-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.plans-saved-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.plans-saved-item-meta {
    font-size: 0.78rem;
    color: var(--plans-label);
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.plans-saved-item-meta span::before {
    content: '•';
    margin-right: 0.35rem;
}

.plans-saved-item-meta span:first-child::before {
    display: none;
}

.plans-saved-item-action {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--plans-accent);
}

.plans-saved-item-btn:not(:disabled):hover .plans-saved-item-action,
.plans-saved-item-btn:not(:disabled):focus-visible .plans-saved-item-action {
    text-decoration: underline;
}

.plans-saved-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
}

.plans-saved-action {
    text-align: center;
}

@media (max-width: 720px) {
    .plans-saved-panel {
        width: 100%;
        max-height: min(80vh, 560px);
    }

    .plans-saved-tab {
        right: 0;
        transform: translateX(20%);
    }
}

@media (max-aspect-ratio: 4 / 5) and (min-width: 721px) {
    /* Vertical / portrait monitor — push content right, keep scrollbar at screen edge.
       Padding goes on session-root (not app-main) so the scrollbar stays flush-right. */
    body.plans-body .app-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Centered: equal padding on both sides for vertical/portrait monitors */
    .plans-session-root {
        max-width: 100%;
        padding-left: clamp(2rem, 6vw, 8rem) !important;
        padding-right: clamp(2rem, 6vw, 8rem) !important;
        margin-left: 0;
        margin-right: 0;
    }

    /* Center the chat card when viewer is collapsed */
    .plans-session-grid.is-viewer-collapsed .plans-chat-card {
        width: min(880px, 100%) !important;
        max-width: min(880px, 100%) !important;
        justify-self: center;
    }

    .plans-session-grid:not(.is-viewer-collapsed) {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    .plans-viewer-card,
    .plans-chat-card {
        grid-column: 1 / -1;
        max-height: none;
    }

    .plans-chat-card {
        position: static;
        top: auto;
        height: calc(100vh - var(--app-header-height, 70px) - 1.5rem);
        max-height: calc(100vh - var(--app-header-height, 70px) - 1.5rem);
    }

    /* Scoot the input bar left on portrait — extra right margin pushes it leftward */
    .plans-chat-input-row {
        margin-right: clamp(2rem, 5vw, 6rem) !important;
    }

    /* Match the toolbox tab to the input bar shift */
    .plans-toolbox-tab {
        justify-content: center;
        padding-right: clamp(4rem, 10vw, 12rem) !important;
        box-sizing: border-box;
    }

    .plans-chat-stage,
    .plans-chat-body,
    .plans-main-viewer-shell,
    .plans-main-viewer {
        min-height: 0;
    }

    .plans-viewer-stage {
        min-height: clamp(110px, 28vh, 250px);
        max-height: calc(100vh - var(--app-header-height, 70px) - 3.65rem);
        height: min(100%, calc(100vh - var(--app-header-height, 70px) - 3.65rem));
        overflow-y: auto;
    }

    /* Bump regular body text for readability on portrait monitor (headings stay as-is) */
    .plans-chat-message {
        font-size: 1.08rem !important;
        line-height: 1.6;
    }
    .plans-chat-message-body p,
    .plans-chat-message-body li,
    .plans-chat-message-body td,
    .plans-chat-message-body span,
    .plans-chat-message-body code {
        font-size: inherit;
    }
}

@keyframes plansReasoningThinkingPulse {
    0%, 20% {
        opacity: 0.3;
    }
    40% {
        opacity: 1;
    }
    60%, 100% {
        opacity: 0.3;
    }
}

.plans-chat-message-reasoning {
    border-style: dashed;
    border-color: rgba(255, 201, 85, 0.4);
    background: rgba(18, 12, 2, 0.65);
    color: var(--plans-muted);
    max-width: 50%;
}

.plans-chat-message-reasoning[data-reasoning-state="failed"] {
    border-color: rgba(255, 128, 128, 0.6);
    background: rgba(42, 6, 11, 0.78);
    color: #ffdede;
}

.plans-chat-message-reasoning[data-reasoning-state="completed"] {
    border-color: rgba(126, 250, 209, 0.55);
    background: rgba(5, 24, 21, 0.75);
    color: var(--plans-success);
}

.plans-chat-message-reasoning[data-placeholder="true"] {
    font-style: italic;
    color: var(--t-text-secondary);
}

.plans-reasoning-inline-indicator {
    display: inline-flex;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    opacity: 0.6;
    transition: opacity var(--plans-transition);
}

.plans-reasoning-inline-indicator[data-active="true"] {
    opacity: 1;
}

.plans-reasoning-inline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: none;
    animation: plansReasoningThinkingPulse 0.8s ease-in-out infinite;
}

.plans-reasoning-inline-dot:nth-child(1) {
    background: rgba(255, 255, 255, 0.9);
    animation-delay: 0s;
}

.plans-reasoning-inline-dot:nth-child(2) {
    background: rgba(255, 255, 255, 0.7);
    animation-delay: 0.15s;
}

.plans-reasoning-inline-dot:nth-child(3) {
    background: rgba(255, 255, 255, 0.5);
    animation-delay: 0.3s;
}

.plans-reasoning-inline-summary {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--plans-text);
    background: linear-gradient(
        90deg,
        var(--plans-text) 0%,
        var(--plans-text) 40%,
        #ffc955 50%,
        var(--plans-text) 60%,
        var(--plans-text) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: plansReasoningShimmer 2s ease-in-out infinite;
}

/* When deep research is inside, reset all shimmer/transparent text effects */
.plans-reasoning-inline-summary:has(.deep-research-status) {
    background: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    text-fill-color: initial !important;
    animation: none !important;
}

@keyframes plansReasoningShimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.plans-reasoning-inline-summary[data-placeholder="true"] {
    font-style: italic;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.75) 40%,
        #ffc955 50%,
        rgba(255, 255, 255, 0.75) 60%,
        rgba(255, 255, 255, 0.75) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: plansReasoningShimmer 2s ease-in-out infinite;
}

.plans-chat-messages {
    min-height: clamp(360px, 42vh, 640px);
    max-height: none;
    height: auto;
    overflow-y: auto;
    overflow-anchor: none; /* ChatGPT-style: disable browser scroll anchoring so content can stream downward without auto-scroll */
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-right: 0;
    color: var(--plans-text);
    flex: 1;
}

/* ── Chat welcome hero (empty state) ── */
.plans-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    flex: 1;
    min-height: 0;
    padding: 0.75rem 1.5rem 1.25rem;
    gap: 0;
    opacity: 1;
    transition: opacity 0.25s ease;
    overflow-y: auto;
}

.plans-chat-welcome--hiding {
    opacity: 0;
    pointer-events: none;
}

/* ── Step-by-step fade in ──────────────────────────────────────────────── */
.welcome-step {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    max-width: 780px;
    pointer-events: none;
}
.welcome-step.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.plans-chat-welcome-icon {
    margin-bottom: 0;
}

.plans-chat-welcome-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    opacity: 0.9;
    filter: drop-shadow(0 0 24px rgba(212, 160, 23, 0.2));
    animation: welcomeLogoPulse 3s ease-in-out infinite;
}
@keyframes welcomeLogoPulse {
    0%, 100% { filter: drop-shadow(0 0 24px rgba(212, 160, 23, 0.15)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 32px rgba(212, 160, 23, 0.3)); transform: scale(1.03); }
}

.plans-chat-welcome-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--t-text);
    margin: 0.15rem 0 0.2rem;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #fff 40%, #d4a017 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plans-chat-welcome-intro {
    font-size: 0.92rem;
    color: rgba(203, 213, 225, 0.88);
    max-width: 720px;
    line-height: 1.55;
    margin: 0 auto 0.45rem;
    text-align: center;
}
.plans-chat-welcome-intro strong {
    color: var(--t-text);
    font-weight: 700;
}

/* ── Reassurance box ───────────────────────────────────────────────────── */
.welcome-reassure-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(212, 160, 23, 0.06);
    border: 1px solid rgba(212, 160, 23, 0.2);
    text-align: left;
    margin: 0 auto 0.4rem;
    max-width: 720px;
}
.welcome-reassure-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.welcome-reassure-box div {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(203, 213, 225, 0.85);
}
.welcome-reassure-box strong {
    color: rgba(212, 160, 23, 0.95);
    font-weight: 700;
    font-size: 0.88rem;
}

/* ── Session upload dropzone (workspace welcome) ───────────────────────── */
.welcome-upload-step {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}
.session-upload-zone {
    position: relative;
    border: 2px dashed rgba(212, 160, 23, 0.35);
    border-radius: 14px;
    background: rgba(212, 160, 23, 0.04);
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.session-upload-zone:hover,
.session-upload-zone.drag-over {
    border-color: rgba(212, 160, 23, 0.65);
    background: rgba(212, 160, 23, 0.08);
    box-shadow: 0 0 24px rgba(212, 160, 23, 0.12);
}
.session-upload-zone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.session-upload-icon {
    color: rgba(212, 160, 23, 0.7);
    margin-bottom: 4px;
}
.session-upload-label {
    font-size: 1rem;
    color: var(--t-text);
    margin: 0;
}
.session-upload-label strong {
    color: rgba(212, 160, 23, 0.95);
}
.session-upload-hint {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.6);
    margin: 0;
}
.session-upload-progress {
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.94);
    z-index: 2;
    display: none;
}
.session-upload-progress:not([hidden]) {
    display: flex;
}
.session-upload-progress-bar {
    width: 60%;
    height: 6px;
    border-radius: 3px;
    background: rgba(212, 160, 23, 0.15);
    overflow: hidden;
    position: relative;
}
.session-upload-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(212, 160, 23, 0.8), rgba(212, 160, 23, 1));
    animation: sessionUploadSlide 1.2s ease-in-out infinite;
}
@keyframes sessionUploadSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}
.session-upload-progress-text {
    font-size: 0.85rem;
    color: rgba(212, 160, 23, 0.9);
    font-weight: 600;
    margin: 0;
}

/* ── Section titles ────────────────────────────────────────────────────── */
.welcome-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--t-text);
    margin: 0.35rem 0 0.35rem;
    text-align: center;
    letter-spacing: 0.2px;
}
.welcome-section-hint {
    font-size: 0.7rem;
    color: rgba(212, 160, 23, 0.7);
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 6px;
}
.welcome-section-sub {
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.7);
    margin: 0 0 0.35rem;
    text-align: center;
}

/* ── How-to numbered steps ─────────────────────────────────────────────── */
.welcome-howto-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto 0.3rem;
}
.welcome-howto-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background-color: var(--t-surface-soft);
    border: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    transition: background 0.2s, border-color 0.2s;
}
.welcome-howto-step:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--t-border-strong);
}
.welcome-howto-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4a017, #b8860b);
    color: var(--t-text);
    font-size: 0.8rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(212, 160, 23, 0.25);
    margin-top: 1px;
}
.welcome-howto-step div {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(203, 213, 225, 0.82);
}
.welcome-howto-step strong {
    color: var(--t-text);
    font-weight: 700;
    font-size: 0.85rem;
}
.welcome-howto-step em {
    color: rgba(148, 163, 184, 0.7);
    font-style: italic;
}

/* ── Workspace tabs grid (bigger) ──────────────────────────────────────── */
.plans-chat-welcome-tabs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
}
.plans-chat-welcome-tab-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background-color: var(--t-surface-soft);
    border: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.plans-chat-welcome-tab-card:hover {
    background: rgba(212, 160, 23, 0.08);
    border-color: rgba(212, 160, 23, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.1);
}
.plans-chat-welcome-tab-icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.plans-chat-welcome-tab-card div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.plans-chat-welcome-tab-card strong {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--t-text);
    letter-spacing: 0.2px;
}
.plans-chat-welcome-tab-card span {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.75);
    line-height: 1.35;
}

/* ── Quick-start chips (bigger) ────────────────────────────────────────── */
.plans-chat-welcome-starters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    max-width: 780px;
    margin: 0 auto;
}

.plans-chat-welcome-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--t-text-secondary);
    background-color: var(--t-border-subtle);
    border: 1px solid var(--t-border-medium);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.plans-chat-welcome-chip:hover {
    background: rgba(212, 160, 23, 0.12);
    border-color: rgba(212, 160, 23, 0.4);
    color: var(--t-text);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(212, 160, 23, 0.12);
}

.plans-chat-welcome-chip-icon {
    font-size: 0.95rem;
}

/* ── "Things you can say" categorized prompts ─────────────────── */
.welcome-prompts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.welcome-prompts-cat {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.welcome-prompts-cat-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--t-text-tertiary);
    margin: 0 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wpc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wpc-dot--docs   { background: #5b9cf4; }
.wpc-dot--email  { background: #f4a25b; }
.wpc-dot--money  { background: #4ecb71; }
.wpc-dot--leads  { background: #d4a017; }
.wpc-dot--plans  { background: #c97cf4; }
.welcome-prompt-pill {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.73rem;
    color: var(--t-text-tertiary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
    line-height: 1.35;
    text-align: left;
    width: 100%;
}
.welcome-prompt-pill:hover {
    background: rgba(212,160,23,0.08);
    border-color: rgba(212,160,23,0.25);
    color: var(--t-text);
}

@media (max-width: 768px) {
    .plans-chat-welcome {
        padding: 0.5rem 0.6rem 5rem;
        gap: 0;
    }
    .welcome-step {
        max-width: 100%;
    }
    .plans-chat-welcome-logo {
        width: 48px;
        height: 48px;
    }
    .plans-chat-welcome-title {
        font-size: 1.15rem;
        margin: 0.1rem 0 0.15rem;
    }
    .plans-chat-welcome-intro {
        font-size: 0.78rem;
        line-height: 1.45;
        margin-bottom: 0.3rem;
        max-width: 100%;
    }
    .welcome-reassure-box {
        padding: 8px 10px;
        gap: 8px;
        margin-bottom: 0.3rem;
        max-width: 100%;
        border-radius: 8px;
    }
    .welcome-reassure-icon {
        font-size: 1rem;
    }
    .welcome-reassure-box div {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    .welcome-reassure-box strong {
        font-size: 0.78rem;
    }
    .welcome-section-title {
        font-size: 0.85rem;
        margin: 0.25rem 0 0.25rem;
    }
    .welcome-section-hint {
        font-size: 0.62rem;
    }
    .welcome-section-sub {
        font-size: 0.72rem;
        margin-bottom: 0.3rem;
    }
    .welcome-howto-steps {
        gap: 4px;
        max-width: 100%;
    }
    .welcome-howto-step {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 8px;
    }
    .welcome-howto-num {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }
    .welcome-howto-step div {
        font-size: 0.72rem;
        line-height: 1.4;
    }
    .welcome-howto-step strong {
        font-size: 0.75rem;
    }
    .plans-chat-welcome-tabs-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        max-width: 100%;
    }
    .plans-chat-welcome-tab-card {
        padding: 5px 7px;
        gap: 6px;
        border-radius: 6px;
    }
    .plans-chat-welcome-tab-icon {
        font-size: 0.85rem;
    }
    .plans-chat-welcome-tab-card strong {
        font-size: 0.68rem;
    }
    .plans-chat-welcome-tab-card span {
        font-size: 0.6rem;
        line-height: 1.3;
    }
    .plans-chat-welcome-starters {
        gap: 0.25rem;
        max-width: 100%;
    }
    .plans-chat-welcome-chip {
        padding: 0.35rem 0.7rem;
        font-size: 0.72rem;
        white-space: normal;
        text-align: center;
    }
    .plans-chat-welcome-chip-icon {
        font-size: 0.8rem;
    }
    .welcome-prompts-grid {
        grid-template-columns: 1fr;
    }
}

/* ChatGPT-style streaming spacer - pushes new message to top of viewport */
.plans-chat-streaming-spacer {
    flex-shrink: 0;
    pointer-events: none;
    transition: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
    /* Height is set dynamically by JS */
}

/* Force immediate appearance on mobile */
@media (max-width: 960px) {
    .plans-chat-streaming-spacer {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.plans-chat-message {
    border-radius: var(--plans-radius-sm);
    padding: 0.65rem 0.45rem;
    font-size: 0.92rem;
    line-height: 1.5;
    border: 1px solid var(--t-border-strong);
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: transparent;
    box-shadow: none;
    color: var(--plans-text);
}

.plans-chat-message-empty {
    display: none !important;
}

.plans-chat-typing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    margin: 0.25rem 0 0.5rem;
    border-radius: var(--plans-radius-sm);
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--plans-label);
    font-size: 0.85rem;
    align-self: flex-start;
}

.plans-chat-typing[hidden] {
    display: none !important;
}

.plans-chat-typing-dots {
    display: inline-flex;
    gap: 0.35rem;
}

.plans-chat-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    animation: plansTypingPulse 1s infinite ease-in-out;
}

.plans-chat-typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.plans-chat-typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}

.plans-chat-typing-label {
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--t-text-tertiary);
    font-size: 0.8rem;
}

@keyframes plansTypingPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* =========================================================================
   Export Toolbar
   ========================================================================= */
.plans-chat-export-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.plans-chat-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--t-text);
    background-color: var(--t-surface-input);
    border: 1px solid var(--t-border-medium);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.plans-chat-export-btn:hover {
    background: rgba(255, 201, 85, 0.15);
    border-color: rgba(255, 201, 85, 0.35);
    color: var(--t-text);
}

.plans-chat-export-btn:active {
    transform: scale(0.97);
}

.plans-chat-export-btn.is-success {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.4);
    color: #81c784;
}

.plans-chat-export-btn svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.plans-chat-export-btn:hover svg {
    opacity: 1;
}

/* Push to Document button — highlighted accent */
.plans-chat-push-doc-btn {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.30);
    color: var(--t-info-text);
}
.plans-chat-push-doc-btn:hover {
    background: rgba(96, 165, 250, 0.22);
    border-color: rgba(96, 165, 250, 0.50);
    color: #bfdbfe;
}
.plans-chat-push-doc-btn.is-active {
    background: rgba(96, 165, 250, 0.25);
    border-color: rgba(96, 165, 250, 0.50);
    color: #bfdbfe;
    pointer-events: none;
}

/* Download dropdown wrapper */
.plans-chat-download-wrapper {
    position: relative;
}

.plans-chat-download-toggle {
    gap: 0.35rem;
}

.plans-chat-download-chevron {
    margin-left: 0.1rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.plans-chat-download-wrapper.is-open .plans-chat-download-chevron {
    transform: rotate(180deg);
}

/* Download menu - opens upward with solid background */
.plans-chat-download-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    min-width: 130px;
    background: #1a1a1e;
    border: 1px solid var(--t-border-strong);
    border-radius: 8px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 100;
}

.plans-chat-download-menu[hidden] {
    display: none;
}

.plans-chat-download-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--t-text);
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.plans-chat-download-option:hover {
    background: rgba(255, 201, 85, 0.18);
    color: var(--t-text);
}

.plans-chat-download-option:active {
    background: rgba(255, 201, 85, 0.25);
}

.plans-chat-download-option svg {
    flex-shrink: 0;
    opacity: 0.75;
}

.plans-chat-download-option:hover svg {
    opacity: 1;
}

.plans-chat-message-body {
    overflow: visible;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left;
}

/* Links in chat messages - distinct accent color */
.plans-chat-message-body a {
    color: var(--t-link);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

.plans-chat-message-body a:hover,
.plans-chat-message-body a:focus-visible {
    color: var(--t-info-text);
    text-decoration: underline;
}

.plans-chat-message-body a:visited {
    color: #a78bfa;
}

/* Links inside code blocks - still clickable but subtle */
.plans-chat-message-body code a,
.plans-chat-message-body pre a {
    color: var(--t-link);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.plans-chat-message-body code a:hover,
.plans-chat-message-body pre a:hover {
    color: var(--t-info-text);
    text-decoration-style: solid;
}

.plans-chat-references {
    margin-top: 1.1rem;
    padding: 0.95rem 1rem;
    border-radius: 12px;
    background: rgba(96, 165, 250, 0.06);
    border: 1px solid rgba(96, 165, 250, 0.15);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.plans-chat-references-label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--t-link);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.plans-chat-references-icon {
    opacity: 0.85;
}

.plans-chat-references-list {
    margin: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    list-style: none;
}

.plans-chat-references-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    background-color: var(--t-surface-soft);
    border-radius: 8px;
    border: 1px solid var(--t-border);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.plans-chat-references-item:hover {
    background-color: var(--t-surface-input);
    border-color: rgba(96, 165, 250, 0.2);
}

.plans-chat-reference-favicon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-top: 2px;
}

.plans-chat-reference-link {
    color: var(--t-link);
    font-weight: 600;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.plans-chat-reference-link:hover,
.plans-chat-reference-link:focus-visible {
    text-decoration: underline;
    color: var(--t-info-text);
}

.plans-chat-reference-domain {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    margin-left: 0.35rem;
    font-size: 0.68rem;
    color: var(--t-text-tertiary);
    background-color: var(--t-surface-hover);
    border-radius: 4px;
}

.plans-chat-reference-snippet {
    width: 100%;
    margin: 0.35rem 0 0 1.6rem;
    padding-left: 0.5rem;
    border-left: 2px solid rgba(96, 165, 250, 0.25);
    color: var(--t-text-tertiary);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Card-style web references with preview images */
.plans-chat-references-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.plans-chat-reference-card {
    display: flex;
    flex-direction: column;
    background-color: var(--t-border-subtle);
    border-radius: 10px;
    border: 1px solid var(--t-border);
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
}

.plans-chat-reference-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(96, 165, 250, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.plans-chat-reference-preview {
    width: 100%;
    height: 100px;
    object-fit: cover;
    background: #1e293b;
    border-bottom: 1px solid var(--t-border);
}

/* When the image is just a favicon (small), center it instead of stretching */
.plans-chat-reference-preview.is-favicon {
    object-fit: none;
    object-position: center;
}

.plans-chat-reference-text {
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.plans-chat-reference-title-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.plans-chat-reference-title-row .plans-chat-reference-favicon {
    margin-top: 0;
}

.plans-chat-reference-title-row .plans-chat-reference-link {
    font-size: 0.82rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plans-chat-reference-card .plans-chat-reference-domain {
    margin-left: 0;
    margin-top: 0.15rem;
    align-self: flex-start;
}

.plans-chat-reference-card .plans-chat-reference-snippet {
    margin: 0.25rem 0 0 0;
    padding-left: 0;
    border-left: none;
    font-size: 0.74rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile: single column cards */
@media (max-width: 600px) {
    .plans-chat-references-cards {
        grid-template-columns: 1fr;
    }
    
    .plans-chat-reference-preview {
        height: 80px;
    }
}

.plans-chat-message-assistant .plans-chat-message-body {
    line-height: 1.6;
}

.plans-chat-message-user {
    align-self: flex-end;
    max-width: 72%;
    margin-left: auto;
    background: transparent;
    border-color: rgba(91, 156, 244, 0.45);
    color: var(--plans-text);
    box-shadow: none;
}

.plans-chat-message-assistant {
    background: transparent;
    color: var(--plans-text);
    border: none;
    box-shadow: none;
    font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.01em;
}

.plans-chat-message-assistant h1,
.plans-chat-message-assistant h2,
.plans-chat-message-assistant h3 {
    color: var(--t-info-text);
}

.plans-chat-message-assistant h4,
.plans-chat-message-assistant h5,
.plans-chat-message-assistant h6 {
    color: #a5b4fc;
}

.plans-chat-message-assistant strong,
.plans-chat-message-assistant b {
    color: var(--t-text);
    font-weight: 600;
}

.plans-chat-message-assistant em,
.plans-chat-message-assistant i {
    color: rgba(246, 247, 255, 0.72);
    font-style: italic;
}

/* Inline code — orange monospace like GitHub */
.plans-chat-message-assistant code {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    background: rgba(255, 166, 87, 0.12);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.88em;
    color: #ffa657;
    border: 1px solid rgba(255, 166, 87, 0.15);
}

/* Don't double-style code inside fenced code blocks */
.plans-chat-message-assistant pre code,
.plans-chat-message-assistant pre code.hljs {
    background: transparent;
    padding: 0;
    border: none;
    color: inherit;
    font-size: inherit;
}

.plans-chat-message-assistant blockquote {
    border-left: 3px solid #60a5fa;
    margin: 0.75rem 0;
    padding: 0.5rem 0.9rem;
    background: rgba(96, 165, 250, 0.06);
    border-radius: 0 8px 8px 0;
    color: rgba(246, 247, 255, 0.82);
}

.plans-chat-message-assistant blockquote p {
    margin: 0;
}

.plans-chat-message-assistant hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.35), transparent);
    margin: 1rem 0;
}

/* Chat message heading sizes - clear hierarchy */
.plans-chat-message-body h1 {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 1.25rem 0 0.6rem;
    line-height: 1.25;
}

.plans-chat-message-body h2 {
    font-size: 1.35rem;
    font-weight: 650;
    margin: 1.1rem 0 0.5rem;
    line-height: 1.3;
}

.plans-chat-message-body h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0.9rem 0 0.4rem;
    line-height: 1.35;
}

.plans-chat-message-body h4 {
    font-size: 1.0rem;
    font-weight: 600;
    margin: 0.75rem 0 0.35rem;
    line-height: 1.4;
}

.plans-chat-message-body h5,
.plans-chat-message-body h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.6rem 0 0.3rem;
    line-height: 1.45;
}

.plans-chat-message-body h1:first-child,
.plans-chat-message-body h2:first-child,
.plans-chat-message-body h3:first-child,
.plans-chat-message-body h4:first-child {
    margin-top: 0;
}

/* Mobile: smaller headings for chat messages */
@media (max-width: 768px) {
    .plans-chat-message-body h1 {
        font-size: 1.05rem;
        margin: 0.75rem 0 0.4rem;
    }
    
    .plans-chat-message-body h2 {
        font-size: 0.95rem;
        margin: 0.65rem 0 0.35rem;
    }
    
    .plans-chat-message-body h3 {
        font-size: 0.88rem;
        margin: 0.55rem 0 0.3rem;
    }
    
    .plans-chat-message-body h4,
    .plans-chat-message-body h5,
    .plans-chat-message-body h6 {
        font-size: 0.82rem;
        margin: 0.45rem 0 0.25rem;
    }
}

.plans-chat-message-body p {
    margin: 0 0 0.6rem;
}

.plans-chat-message-body h5,
.plans-chat-message-body h6,
.plans-chat-message-body strong,
.plans-chat-message-body b {
    color: inherit;
}


.plans-chat-message-body ul,
.plans-chat-message-body ol {
    margin: 0 0 0.85rem 1.5rem;
    padding-left: 1.25rem;
    list-style-position: outside;
}

.plans-chat-message-body ul li::marker,
.plans-chat-message-body ol li::marker {
    color: var(--plans-accent);
}

.plans-chat-message-body li {
    margin-bottom: 0.35rem;
    line-height: 1.55;
}


.plans-chat-message-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 1rem;
    font-size: 0.9rem;
    border: 0;
    outline: 2px solid rgba(12, 19, 36, 0.08);
    box-shadow: 0 18px 40px rgba(3, 5, 11, 0.35);
    background: var(--plans-surface-light);
    border-radius: 16px;
    overflow: hidden;
}

.plans-chat-message-body th,
.plans-chat-message-body td {
    border: 1px solid rgba(12, 19, 36, 0.12);
    padding: 0.6rem 0.75rem;
    text-align: left;
    background-clip: padding-box;
    color: var(--plans-text-dark);
}

.plans-chat-message-body th {
    background: var(--plans-surface-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.plans-chat-message-body tr:nth-child(even) td {
    background: rgba(9, 16, 32, 0.04);
}

.plans-chat-message-body td:nth-child(n+4) {
    text-align: right;
}

.plans-chat-message-body caption {
    caption-side: top;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    color: rgba(12, 19, 36, 0.65);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.plans-chat-message-body ul ul,
.plans-chat-message-body ul ol,
.plans-chat-message-body ol ul,
.plans-chat-message-body ol ol {
    margin-top: 0.25rem;
    margin-bottom: 0.45rem;
}

.plans-chat-message-body p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Code Sandbox - Enhanced Code Blocks
   ============================================ */

.code-sandbox {
    margin: 1rem 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--t-surface);
    border: 1px solid #2a2a2a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 0;
}

.code-sandbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
    z-index: 2;
}

.code-sandbox-lang {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #858585;
}

.code-sandbox-download {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #4fc1ff;
    background: rgba(79, 193, 255, 0.1);
    border: 1px solid rgba(88, 166, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.code-sandbox-download:hover {
    background: rgba(88, 166, 255, 0.2);
    border-color: rgba(88, 166, 255, 0.5);
    color: #79c0ff;
}

.code-sandbox-download:active {
    transform: scale(0.97);
}

.code-sandbox-download svg {
    flex-shrink: 0;
}

.code-sandbox-body {
    overflow-x: auto;
    overflow-y: auto;
}

.code-sandbox-body pre {
    margin: 0 !important;
    padding: 1rem !important;
    background: #0a0a0a !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.code-sandbox-body pre code {
    background: transparent !important;
    padding: 0 !important;
    font-size: inherit;
    color: #d4d4d4;
    white-space: pre;
}

/* Highlight.js theme overrides for code sandbox - VS Code Dark+ style */
.code-sandbox .hljs {
    background: #0a0a0a !important;
    color: #d4d4d4;
}

.code-sandbox .hljs-comment,
.code-sandbox .hljs-quote {
    color: #6a9955;
    font-style: italic;
}

.code-sandbox .hljs-keyword,
.code-sandbox .hljs-selector-tag {
    color: #569cd6;
}

/* JSON keys (property names) - light blue like VS Code */
.code-sandbox .hljs-attr,
.code-sandbox .hljs-attribute {
    color: #9cdcfe;
}

/* JSON string values - orange/brown like VS Code */
.code-sandbox .hljs-string {
    color: #ce9178;
}

/* Numbers - light green like VS Code */
.code-sandbox .hljs-number {
    color: #b5cea8;
}

/* Booleans and null - blue like VS Code */
.code-sandbox .hljs-literal {
    color: #569cd6;
}

/* Punctuation (brackets, braces, colons, commas) */
.code-sandbox .hljs-punctuation {
    color: #d4d4d4;
}

.code-sandbox .hljs-variable,
.code-sandbox .hljs-template-variable {
    color: #9cdcfe;
}

.code-sandbox .hljs-title,
.code-sandbox .hljs-function {
    color: #dcdcaa;
}

.code-sandbox .hljs-built_in {
    color: #4ec9b0;
}

.code-sandbox .hljs-type,
.code-sandbox .hljs-class {
    color: #4ec9b0;
}

.code-sandbox .hljs-property {
    color: #9cdcfe;
}

/* Scrollbar styling for code sandbox */
.code-sandbox-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.code-sandbox-body::-webkit-scrollbar-track {
    background-color: var(--t-surface);
}

.code-sandbox-body::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 0;
}

.code-sandbox-body::-webkit-scrollbar-thumb:hover {
    background: #4f4f4f;
}

.code-sandbox-body::-webkit-scrollbar-corner {
    background: #1e1e1e;
}

/* Mobile adjustments for code sandbox */
@media (max-width: 720px) {
    .code-sandbox {
        margin: 0.75rem 0;
        border-radius: 8px;
    }
    
    .code-sandbox-header {
        padding: 0.4rem 0.75rem;
    }
    
    .code-sandbox-lang {
        font-size: 0.68rem;
    }
    
    .code-sandbox-download {
        padding: 0.3rem 0.6rem;
        font-size: 0.68rem;
    }
    
    .code-sandbox-download span {
        display: none;
    }
    
    .code-sandbox-body pre {
        padding: 0.75rem !important;
        font-size: 0.78rem;
    }
}

/* ============================================
   End Code Sandbox
   ============================================ */

.plans-chat-message-streaming {
    border-color: rgba(255, 201, 85, 0.35);
}

/* ── Upload progress spinner ─────────────────────────────── */
.plans-upload-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.plans-upload-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--plans-accent, #6366f1);
    border-radius: 50%;
    animation: plans-spin 0.7s linear infinite;
    flex-shrink: 0;
}

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

.plans-chat-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    border-radius: 18px;
}

@media (max-width: 720px) {
    .plans-chat-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
    }

    .plans-chat-table-scroll table {
        min-width: 420px;
        width: max-content;
    }

    /* Make tables scrollable on mobile */
    .plans-chat-message-body table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        border-radius: 12px;
    }

    .plans-chat-message-body thead,
    .plans-chat-message-body tbody,
    .plans-chat-message-body tr {
        display: table;
        width: 100%;
        table-layout: auto;
    }

    .plans-chat-message-body {
        overflow: visible;
    }

    .plans-chat-messages {
        overflow-x: hidden;
        overflow-y: auto;
        max-width: 100%;
    }
}

.plans-toolbox-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(0.5rem, 1vw, 1.25rem);
    --plans-toolbox-safe-top: calc(var(--app-header-height, 70px) + clamp(1.1rem, 2.8vh, 3.5rem));
    --plans-toolbox-safe-bottom: clamp(1.4rem, 4vh, 4.5rem);
    --plans-toolbox-available-height: max(
        320px,
        calc(100vh - var(--plans-toolbox-safe-top) - var(--plans-toolbox-safe-bottom))
    );
    padding-top: var(--plans-toolbox-safe-top);
    padding-bottom: var(--plans-toolbox-safe-bottom);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--plans-transition);
    z-index: 30;
}

.plans-toolbox-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.plans-toolbox-scrim {
    position: absolute;
    inset: 0;
    background: rgba(3, 4, 12, 0.8);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--plans-transition);
    touch-action: none;
}

.plans-toolbox-overlay.is-active .plans-toolbox-scrim {
    opacity: 1;
}

.plans-toolbox {
    position: relative;
    border-radius: 28px 28px 20px 20px;
    border: 1px solid rgba(255, 201, 85, 0.25);
    background: linear-gradient(165deg, rgba(12, 15, 28, 0.98), rgba(5, 6, 14, 0.95));
    padding: clamp(0.85rem, 1.6vw, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.55rem, 1vw, 0.85rem);
    width: min(640px, 92%);
    max-height: min(var(--plans-toolbox-available-height), 85vh);
    min-height: min(clamp(340px, 65vh, 700px), var(--plans-toolbox-available-height));
    overflow-y: auto;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.6);
    transform: translateY(28px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--plans-transition), opacity var(--plans-transition);
}

.plans-toolbox-overlay.is-active .plans-toolbox {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.plans-toolbox-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.plans-toolbox-title {
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--t-text);
    text-shadow: 0 4px 20px rgba(255, 255, 255, 0.45);
}

.plans-toolbox-subtitle {
    font-size: 0.85rem;
    color: var(--plans-muted);
}

.plans-toolbox-close {
    border: 1px solid var(--t-border-strong);
    border-radius: 999px;
    background-color: var(--t-surface-hover);
    color: var(--plans-text);
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--plans-transition), border-color var(--plans-transition), color var(--plans-transition);
}

.plans-toolbox-close:hover,
.plans-toolbox-close:focus-visible {
    border-color: rgba(255, 201, 85, 0.7);
    color: var(--plans-accent);
}

#plans-toolbox-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #plans-toolbox-featured {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

.plans-toolbox-featured {
    border: 1px solid rgba(255, 201, 85, 0.5);
    border-radius: 18px;
    padding: clamp(0.7rem, 1.4vw, 1rem) clamp(0.9rem, 1.8vw, 1.2rem);
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .plans-toolbox-featured {
        flex-direction: row;
        align-items: center;
        gap: clamp(0.6rem, 1vw, 1rem);
    }

    .plans-toolbox-featured-header {
        flex: 1;
    }

    .plans-toolbox-featured-btn {
        margin-left: clamp(0.45rem, 1vw, 1.2rem);
    }
}

.plans-toolbox-featured-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.plans-toolbox-featured-badge {
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #0b0d15;
    background: #ffc955;
    border-radius: 999px;
    padding: 0.18rem 0.72rem;
    align-self: flex-start;
}

.plans-toolbox-featured-title {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: #fffaf0;
}

.plans-toolbox-featured-copy {
    margin: 0;
    color: var(--t-text);
    font-weight: 500;
    letter-spacing: 0.01em;
    font-size: 0.92rem;
}

.plans-toolbox-featured-btn {
    align-self: flex-start;
    text-align: center;
    white-space: nowrap;
    padding-inline: clamp(1.2rem, 2vw, 1.8rem);
}

.plans-toolbox-categories {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex: 1;
    overflow-y: auto;
    padding-right: 0.35rem;
}

.plans-toolbox-empty {
    font-size: 0.9rem;
    color: var(--plans-muted);
}

.toolbox-category {
    border-radius: var(--plans-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 0.9rem;
    background: rgba(9, 11, 20, 0.9);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    position: relative;
}

.toolbox-category-header h3 {
    margin: 0;
    font-size: 0.96rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--plans-accent);
}

.toolbox-category-header p {
    margin: 0.3rem 0 0;
    color: var(--plans-muted);
    font-size: 0.84rem;
}

.toolbox-category::before {
    content: "";
    position: absolute;
    inset: 0.35rem;
    border: 1px solid rgba(255, 201, 85, 0.16);
    border-radius: calc(var(--plans-radius-md) - 6px);
    pointer-events: none;
}

.toolbox-prompt-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}

.toolbox-prompt-btn {
    border-radius: var(--plans-radius-sm);
    border: 1px solid var(--t-border-strong);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--plans-text);
    text-align: left;
    background: rgba(8, 11, 24, 0.9);
    padding: 0.75rem;
    cursor: pointer;
    transition:
        border-color var(--plans-transition),
        color var(--plans-transition),
        transform var(--plans-transition),
        background var(--plans-transition);
}

.toolbox-prompt-btn--accent {
    border-color: var(--t-text-tertiary);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.18));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.toolbox-prompt-btn--accent:hover,
.toolbox-prompt-btn--accent:focus-visible {
    border-color: var(--t-text-tertiary);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.26));
}

.toolbox-prompt-btn:hover,
.toolbox-prompt-btn:focus-visible {
    border-color: var(--plans-accent);
    background: rgba(14, 17, 34, 0.95);
    transform: translateY(-1px);
}

.plans-chat-input-row {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.5vw, 0.55rem);
    grid-row: 3 / 4;
    align-self: stretch;
    margin-top: clamp(0.05rem, 0.15vw, 0.25rem);
    position: relative;
    overflow: visible;
}

.plans-chat-input-shell {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: var(--plans-radius-lg);
    border: 1px solid rgba(91, 156, 244, 0.45);
    background: rgba(6, 8, 18, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;
}

.plans-chat-input {
    flex: 1;
    min-height: 42px;
    max-height: 200px;
    padding: 0.85rem 1rem;
    font-family: var(--plans-font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--plans-text);
    background: transparent;
    border: none;
    border-radius: var(--plans-radius-md);
    resize: none;
    overflow-y: auto;
    transition: border-color var(--plans-transition), background var(--plans-transition);
}

.plans-chat-input:focus {
    outline: none;
    border: none;
    background: transparent;
}

.plans-chat-input::placeholder {
    color: var(--plans-label);
}

.plans-chat-input-shell[data-input-mode="voice"] .plans-chat-send-btn {
    display: flex;
    position: relative;
    z-index: 10; /* Stay above the waveform overlay */
}

.plans-chat-input-shell[data-input-mode="text"] .plans-chat-voice-btn {
    display: none;
}

.plans-chat-send-btn {
    min-height: 52px;
    min-width: 52px;
    padding: 0.85rem 1.35rem;
    flex-shrink: 0;
    border-radius: var(--plans-radius-md);
    text-transform: none;
    letter-spacing: normal;
}

.plans-chat-send-icon {
    width: 20px;
    height: 20px;
}

/* Options button (plus icon) - visible on all screens */
.plans-chat-options-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--t-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    order: 0; /* First item */
    position: relative;
    z-index: 2;
    overflow: visible;
}

/* Only apply hover on devices that support hover (non-touch) */
@media (hover: hover) and (pointer: fine) {
    .plans-chat-options-btn:hover {
        background-color: var(--t-tab-active-bg);
    }

    .plans-chat-options-btn:hover .plans-chat-options-plus-icon {
        color: var(--t-text);
    }
}

.plans-chat-options-btn:focus-visible {
    background-color: var(--t-tab-active-bg);
    outline: none;
}

.plans-chat-options-btn:focus-visible .plans-chat-options-plus-icon {
    color: var(--t-text);
}

.plans-chat-options-btn.is-open {
    background: rgba(91, 156, 244, 0.15);
    transform: rotate(45deg);
}

.plans-chat-options-btn.is-open .plans-chat-options-plus-icon {
    color: var(--t-link);
}

.plans-chat-options-btn.is-active .plans-chat-options-plus-icon {
    color: var(--t-link);
}

.plans-chat-options-plus-icon {
    font-size: 38px;
    font-weight: 600;
    line-height: 0.8;
    color: var(--t-text);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: 24px;
    height: 24px;
    margin-top: -4px;
}

/* Default stroke color for plus icon lines */
.plans-chat-options-plus-icon line {
    stroke: #ffffff;
    stroke-width: 2.5;
}

/* Hide overlay placeholder on desktop - only used on mobile */
.plans-chat-input-overlay-placeholder {
    display: none;
}

/* Options drawer - show when not hidden */
.plans-chat-options-drawer:not([hidden]) {
    display: block;
}

/* Options drawer styling */
.plans-chat-options-drawer {
    position: fixed;
    left: auto;
    right: auto;
    width: calc(100% - 2rem);
    max-width: 400px;
    margin-bottom: 8px;
    padding: 8px;
    background: rgba(20, 25, 35, 0.98);
    border: 1px solid rgba(91, 156, 244, 0.3);
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.plans-chat-options-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--t-info-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.plans-chat-options-item:hover,
.plans-chat-options-item:focus-visible {
    background: rgba(91, 156, 244, 0.12);
    outline: none;
}

.plans-chat-options-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--t-link);
    cursor: pointer;
}

.plans-chat-options-icon {
    width: 18px;
    height: 18px;
    stroke: #5b9cf4;
    flex-shrink: 0;
}

.plans-chat-options-label {
    flex: 1;
    text-align: left;
}

.plans-chat-options-badge {
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-link);
    background: rgba(91, 156, 244, 0.15);
    border-radius: 4px;
}

.plans-chat-options-deep-research:has(.plans-chat-options-checkbox:checked) {
    background: rgba(91, 156, 244, 0.15);
}

/* ── Image preview strip (above input shell) ────────────── */
.plans-chat-image-preview {
    display: none;
    padding: 8px 12px 4px 12px;
    background: rgba(20, 25, 35, 0.6);
    border-top: 1px solid rgba(91, 156, 244, 0.15);
    border-radius: 12px 12px 0 0;
    margin: 0;
}
.plans-chat-image-preview:not([hidden]) {
    display: flex;
}
.plans-chat-image-preview-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(91,156,244,0.3) transparent;
}
.plans-chat-image-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(91, 156, 244, 0.3);
    flex-shrink: 0;
    background: rgba(15, 18, 25, 0.8);
}
.plans-chat-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.plans-chat-image-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: var(--t-text);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    transition: background 0.15s;
}
.plans-chat-image-thumb-remove:hover {
    background: rgba(239, 68, 68, 0.85);
}

/* ── Unified Integrations panel ────────────── */
.plans-bridge-setup-panel {
    position: fixed;
    left: auto;
    right: auto;
    width: calc(100% - 2rem);
    max-width: 420px;
    margin-bottom: 8px;
    padding: 0;
    background: rgba(20, 25, 35, 0.98);
    border: 1px solid rgba(91, 156, 244, 0.25);
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    overflow: hidden;
}

.plans-bridge-setup-panel:not([hidden]) {
    display: block;
}

.plans-bridge-setup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--t-border);
}

.plans-bridge-setup-body {
    padding: 14px;
}

.plans-bridge-setup-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.plans-bridge-setup-token {
    background-color: var(--t-surface-input);
    border: 1px solid var(--t-border-medium);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: var(--t-info-text);
    word-break: break-all;
    user-select: all;
}

.plans-bridge-setup-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.plans-bridge-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.plans-bridge-btn:hover {
    opacity: 0.85;
}

.plans-bridge-btn-primary {
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
}

.plans-bridge-btn-copy {
    background: rgba(91, 156, 244, 0.15);
    color: var(--t-info-text);
    border: 1px solid rgba(91, 156, 244, 0.3);
}

.plans-bridge-btn-danger {
    background: transparent;
    color: var(--t-error);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.plans-bridge-help {
    font-size: 0.75rem;
    color: var(--t-text-secondary);
    margin-top: 10px;
    line-height: 1.4;
}

.plans-bridge-help code {
    background-color: var(--t-surface-hover);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.7rem;
    color: var(--t-info-text);
}

/* ── Integration accordion sections ──────────── */
.plans-integration-section {
    border-bottom: 1px solid var(--t-border);
}
.plans-integration-section:last-child {
    border-bottom: none;
}

.plans-integration-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.plans-integration-section-header:hover {
    background-color: var(--t-border-subtle);
}

.plans-integration-section-body {
    padding: 0 14px 14px;
}

.plans-bridge-btn-outlook {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
}

.plans-integrations-count-badge {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
    min-width: 18px;
    text-align: center;
    border-radius: 9px;
    font-size: 0.7rem;
    padding: 1px 5px;
}

/* ── Bridge setup steps ──────────── */
.plans-bridge-setup-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
}
.plans-bridge-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--t-text-secondary);
}
.plans-bridge-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(91, 156, 244, 0.12);
    color: var(--t-link);
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Tool Activity Steps (timeline chain) ─────────────── */
.plans-tool-activity {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 8px 0 10px;
    padding: 0 0 0 0;
    position: relative;
}

.plans-tool-step {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    animation: plans-tool-slide-in 0.35s cubic-bezier(.21,1.02,.73,1);
    position: relative;
    border-radius: 8px;
    padding-left: 48px;
    min-height: 44px;
}

/* ── Vertical chain line ── */
.plans-tool-step::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(91,156,244,0.35);
    border-radius: 2px;
}
.plans-tool-step:first-child::before {
    top: 22px;
}
.plans-tool-step:last-child::before {
    height: 22px;
    bottom: auto;
    top: 0;
}

/* ── Icon node on the chain ── */
.plans-tool-step-icon {
    position: absolute;
    left: 4px;
    top: 7px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    z-index: 2;
    background: #1a2236;
    border: 2.5px solid rgba(91,156,244,0.5);
    box-shadow: 0 0 12px rgba(91,156,244,0.25), 0 2px 6px rgba(91,156,244,0.12);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.plans-tool-step-running .plans-tool-step-icon {
    border-color: rgba(91,156,244,0.85);
    box-shadow: 0 0 18px rgba(91,156,244,0.4), 0 0 8px rgba(91,156,244,0.2);
}
.plans-tool-step-done .plans-tool-step-icon {
    border-color: rgba(99,220,168,0.65);
    background: rgba(99,220,168,0.15);
    box-shadow: 0 0 12px rgba(99,220,168,0.25), 0 2px 6px rgba(99,220,168,0.12);
}
.plans-tool-step-done .plans-tool-step-icon::after {
    content: '✓';
    position: absolute;
    font-size: 0.7rem;
    color: #63dca8;
    font-weight: 800;
}

@keyframes plans-tool-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Shimmer effect for running steps ── */
@keyframes plans-tool-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.plans-tool-step-running {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(91,156,244,0.05) 25%,
        rgba(91,156,244,0.12) 50%,
        rgba(91,156,244,0.05) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: plans-tool-slide-in 0.35s cubic-bezier(.21,1.02,.73,1);
    border-radius: 10px;
}
/* Only the latest running step gets the shimmer sweep */
.plans-tool-step-running.plans-tool-step-latest {
    animation: plans-tool-slide-in 0.35s cubic-bezier(.21,1.02,.73,1),
               plans-tool-shimmer 2s ease-in-out infinite;
}

/* Icon emoji vs spinner visibility */
.tool-icon-emoji {
    font-size: 0.82rem;
    line-height: 1;
}
.tool-icon-spinner {
    display: none;
}
.plans-tool-step-running .tool-icon-emoji {
    display: none;
}
.plans-tool-step-done .plans-tool-step-icon .tool-icon-emoji {
    display: none;
}

/* Header row — the clickable part with chevron, status, label */
.plans-tool-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 4px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    min-width: 0;
    overflow: hidden;
}

.plans-tool-step-header:hover {
    background: rgba(91, 156, 244, 0.08);
}

/* Disclosure chevron */
.plans-tool-step-chevron {
    font-size: 0.65rem;
    color: #5b7a9e;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}
.plans-tool-step-expanded .plans-tool-step-chevron {
    color: #7baadf;
}

/* Label text */
.plans-tool-step-label {
    color: var(--t-text-secondary);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.82rem;
    letter-spacing: -0.01em;
}

.plans-tool-step-running .plans-tool-step-label {
    color: var(--t-text);
}

.plans-tool-step-done .plans-tool-step-label {
    color: #7a8ba0;
}

/* Detail text (path, query) — inline after label */
.plans-tool-step-detail {
    color: #546a82;
    font-size: 0.76rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 0;
    margin-left: 4px;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -0.005em;
    opacity: 0.8;
}

.plans-tool-step-running .plans-tool-step-detail {
    color: #6ea4f4;
    opacity: 1;
    font-weight: 500;
}

.plans-tool-step-done .plans-tool-step-detail {
    color: #455568;
    opacity: 0.7;
}

/* Expandable body — args + result */
.plans-tool-step-body {
    margin: 4px 0 8px 4px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.55);
    border-left: 2px solid rgba(91, 156, 244, 0.25);
    border-radius: 0 10px 10px 0;
    font-size: 0.76rem;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    line-height: 1.65;
    backdrop-filter: blur(6px);
}

/* Arg rows */
.plans-tool-step-arg {
    padding: 1px 0;
    line-height: 1.5;
    color: #8b9ab5;
}

.plans-tool-step-arg-key {
    color: #6ea4f4;
    font-weight: 500;
}

.plans-tool-step-arg-val {
    color: var(--t-text-secondary);
    word-break: break-all;
}

/* Tool result preview */
.plans-tool-step-result {
    display: none;
    margin-top: 8px;
    padding: 8px 10px;
    border-top: 1px solid rgba(91, 156, 244, 0.1);
    border-radius: 6px;
    background: rgba(10, 18, 35, 0.45);
    color: #8b9ab5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 360px;
    overflow-y: auto;
    font-size: 0.73rem;
    line-height: 1.6;
}

/* Desktop tool specific result styling */
.plans-tool-step-result-desktop {
    border-left: 2px solid rgba(99, 220, 168, 0.25);
    background: rgba(99, 220, 168, 0.03);
}

/* Web search URL sub-items — streamed URLs under web_search tool step */
.plans-tool-step-urls {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 2px 28px;
    padding: 0;
}
.plans-tool-step-url-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    font-size: 0.76rem;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.plans-tool-step-url-entering {
    opacity: 0;
    transform: translateY(6px);
}
.plans-tool-step-url-icon {
    font-size: 0.7rem;
    flex-shrink: 0;
    opacity: 1;
}
.plans-tool-step-url-link {
    color: #4d8ef7;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: -0.01em;
    font-size: 0.78rem;
}
.plans-tool-step-url-link:hover {
    text-decoration: underline;
    color: #7cb3ff;
}
.plans-tool-step-url-title {
    color: #7a90a8;
    font-size: 0.72rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    opacity: 0.85;
}
.plans-tool-step-done .plans-tool-step-url-item {
    opacity: 0.85;
}

/* Light theme */
[data-theme="light"] .plans-tool-step-url-link {
    color: #1e40af;
    font-weight: 600;
}
[data-theme="light"] .plans-tool-step-url-link:hover {
    color: #1e3a8a;
}
[data-theme="light"] .plans-tool-step-url-title {
    color: #475569;
    opacity: 0.9;
}

.plans-tool-step-result-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #546478;
    margin-bottom: 4px;
    font-weight: 600;
}

.plans-tool-step-result-success {
    color: #63dca8;
    font-weight: 600;
    font-size: 0.78rem;
}

.plans-tool-step-result-error {
    color: var(--t-error);
    font-weight: 600;
    font-size: 0.78rem;
}

/* ── Collapsed Tool Activity Summary ──────────────────── */
.plans-tool-activity-collapsed {
    margin: 4px 0 6px;
    padding: 0;
    gap: 0;
}

.plans-tool-activity-collapsed .plans-tool-step::before,
.plans-tool-activity-collapsed .plans-tool-step-icon {
    display: none;
}

.plans-tool-activity-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--t-text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
    width: fit-content;
    background: rgba(91,156,244,0.04);
    border: 1px solid rgba(91,156,244,0.08);
}

.plans-tool-activity-summary:hover {
    background: rgba(91, 156, 244, 0.1);
    color: var(--t-text-secondary);
    border-color: rgba(91,156,244,0.18);
}

.plans-tool-activity-summary-icon {
    font-size: 0.85rem;
    opacity: 0.7;
}

.plans-tool-activity-summary-text {
    font-weight: 500;
    font-size: 0.8rem;
}

.plans-tool-activity-chevron {
    font-size: 0.55rem;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.plans-tool-activity-expanded .plans-tool-activity-chevron {
    transform: rotate(90deg);
}

.plans-tool-activity-steps {
    padding: 4px 0 0 0;
    margin-left: 0;
}

/* ── Running step glow pulse ── */
@keyframes plans-tool-icon-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(91,156,244,0.2); }
    50%      { box-shadow: 0 0 16px rgba(91,156,244,0.45), 0 0 4px rgba(91,156,244,0.2); }
}
.plans-tool-step-running.plans-tool-step-latest .plans-tool-step-icon {
    animation: plans-tool-icon-pulse 1.5s ease-in-out infinite;
}

/* ── Spinner inside icon while running ── */
@keyframes plans-tool-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.plans-tool-step-running.plans-tool-step-latest .plans-tool-step-icon .tool-icon-spinner {
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(91,156,244,0.3);
    border-top-color: #6ea4f4;
    border-radius: 50%;
    animation: plans-tool-spin 0.8s linear infinite;
}
/* Non-latest running steps: show emoji instead of spinner */
.plans-tool-step-running:not(.plans-tool-step-latest) .tool-icon-emoji {
    display: inline;
}
.plans-tool-step-running:not(.plans-tool-step-latest) .tool-icon-spinner {
    display: none;
}
.plans-tool-step-done .plans-tool-step-icon .tool-icon-spinner {
    display: none;
}

/* ── Done step: solid green chain line ── */
.plans-tool-step-done::before {
    background: rgba(99,220,168,0.3);
}

/* ── Reasoning Bubble (matches free chat style exactly) ──────────── */
.gchat-reasoning {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    background: rgba(91, 156, 244, 0.06);
    border: 1px solid rgba(91, 156, 244, 0.10);
    font-size: 0.85rem;
    color: rgba(200, 210, 240, 0.78);
    line-height: 1.55;
    max-height: none;
    overflow-y: visible;
    animation: gchatSlideIn 0.2s ease-out;
}

@keyframes gchatSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.gchat-reasoning-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(91, 156, 244, 0.65);
}

.gchat-reasoning-dots {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    flex-shrink: 0;
}

.gchat-reasoning-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(91, 156, 244, 0.6);
    animation: gchatDotPulse 1s infinite ease-in-out;
}

.gchat-reasoning-dot:nth-child(2) { animation-delay: 0.15s; }
.gchat-reasoning-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes gchatDotPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.gchat-reasoning-text {
    word-break: break-word;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -0.005em;
}

.gchat-reasoning-text strong,
.gchat-reasoning-text b {
    color: rgba(200, 215, 240, 0.85);
    font-weight: 600;
}

.gchat-reasoning-text p {
    margin: 0 0 0.4em;
}

/* ── Collapsed reasoning state ── */
.gchat-reasoning-collapsed {
    cursor: pointer;
    max-height: none;
    overflow: visible;
    display: inline-flex;
    padding: 0;
    margin-bottom: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: none;
}

.gchat-reasoning-collapsed .gchat-reasoning-text {
    display: none;
}

.gchat-reasoning-collapsed .gchat-reasoning-header {
    gap: 0.35rem;
    color: rgba(140, 180, 255, 0.75);
    font-size: 0.82rem;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-weight: 500;
}

.gchat-reasoning-collapsed .gchat-reasoning-dots {
    display: none;
}

.gchat-reasoning-collapsed:hover {
    background: transparent;
    border: none;
}

.gchat-reasoning-collapsed:hover .gchat-reasoning-header {
    color: rgba(170, 205, 255, 1);
}

.gchat-reasoning-chevron {
    font-size: 0.55rem;
    margin-left: 0.15rem;
    transition: transform 0.2s ease;
    opacity: 0.7;
}

/* ── Expanded reasoning state ── */
.gchat-reasoning-expanded {
    display: inline-flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
    background: rgba(91, 156, 244, 0.06);
    border: 1px solid rgba(91, 156, 244, 0.10);
    border-radius: 10px;
}

.gchat-reasoning-expanded .gchat-reasoning-text {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    color: rgba(190, 205, 235, 0.8);
    line-height: 1.55;
    max-height: 260px;
    overflow-y: auto;
    letter-spacing: -0.005em;
}

.gchat-reasoning-expanded .gchat-reasoning-header {
    color: rgba(91, 156, 244, 0.6);
}

/* ── Inline reasoning step (inside tool activity) ──────────── */
.gchat-reasoning-step {
    background: transparent !important;
    animation: none !important;
}

/* Hide spinner on reasoning steps — they aren't real tool calls */
.gchat-reasoning-step .plans-tool-step-icon {
    display: none !important;
}
.gchat-reasoning-step::before {
    display: none !important;
}

.gchat-reasoning-step-label {
    color: rgba(140, 180, 255, 0.75) !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.80rem !important;
    letter-spacing: -0.01em !important;
}

.gchat-reasoning-step-text {
    font-size: 0.78rem;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    color: rgba(190, 205, 235, 0.55);
    line-height: 1.55;
    word-break: break-word;
    margin-top: 2px;
    letter-spacing: -0.005em;
}

.gchat-reasoning-step-text strong,
.gchat-reasoning-step-text b {
    display: block;
    color: rgba(200, 215, 240, 0.85);
    font-weight: 700;
    margin-top: 0.45em;
    margin-bottom: 0.15em;
}

.gchat-reasoning-step-text p {
    margin: 0 0 0.3em;
}

.gchat-reasoning-step-done .gchat-reasoning-step-text {
    max-height: 320px;
    overflow-y: auto;
}

.gchat-reasoning-step .gchat-reasoning-chevron {
    font-size: 0.55rem;
    margin-left: 0.15rem;
    opacity: 0.7;
}

.gchat-reasoning-step-done .gchat-reasoning-step-label {
    color: rgba(120, 160, 230, 0.55) !important;
}

.gchat-reasoning-step-done:hover .gchat-reasoning-step-label {
    color: rgba(170, 205, 255, 1) !important;
}

/* ── Desktop Screenshot Frame ──────────── */
.plans-tool-screenshot-frame {
    margin: 12px 0 8px;
    padding: 8px;
    background: #0f172a;
    border: 1px solid rgba(30, 58, 95, 0.6);
    border-radius: 8px;
}

.plans-tool-screenshot-label {
    font-size: 0.7rem;
    color: var(--t-text-secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.plans-tool-screenshot-img {
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.plans-tool-screenshot-img:hover {
    opacity: 0.9;
}

/* ── Database Query Result Table ──────── */
.plans-db-table-wrapper {
    margin: 10px 0 8px;
    border: 1px solid rgba(30, 58, 95, 0.5);
    border-radius: 8px;
    overflow: hidden;
    animation: plans-tool-slide-in 0.3s ease-out;
}

.plans-db-table-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.8);
    border-bottom: 1px solid rgba(30, 58, 95, 0.4);
    font-size: 0.72rem;
    color: var(--t-text-secondary);
}

.plans-db-table-header svg {
    color: var(--t-link);
    flex-shrink: 0;
}

.plans-db-table-scroll {
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
}

.plans-db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}

.plans-db-table th {
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.95);
    color: var(--t-text-secondary);
    font-weight: 600;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(30, 58, 95, 0.5);
    white-space: nowrap;
}

.plans-db-table td {
    padding: 4px 10px;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(30, 58, 95, 0.2);
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-db-table tr:hover td {
    background: rgba(91, 156, 244, 0.06);
}

.plans-db-table tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.3);
}

.plans-db-table tr:nth-child(even):hover td {
    background: rgba(91, 156, 244, 0.08);
}

/* ── PDF Document Preview ─────────────── */
.plans-pdf-preview {
    margin: 12px 0 8px;
    border: 1px solid rgba(30, 58, 95, 0.5);
    border-radius: 10px;
    overflow: hidden;
    animation: plans-tool-slide-in 0.3s ease-out;
    background: var(--plans-bg-card, #1a2233);
}
.plans-pdf-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.5), rgba(20, 40, 70, 0.6));
    border-bottom: 1px solid rgba(91, 156, 244, 0.15);
}
.plans-pdf-preview-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e94560, #c23152);
    border-radius: 8px;
    color: var(--t-text);
}
.plans-pdf-preview-info {
    flex: 1;
    min-width: 0;
}
.plans-pdf-preview-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--plans-text, #e4e8ee);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plans-pdf-preview-meta {
    font-size: 11px;
    color: var(--plans-text-muted, #8b9ab5);
    margin-top: 2px;
}
.plans-pdf-preview-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.plans-pdf-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}
.plans-pdf-preview-btn-view {
    background: rgba(91, 156, 244, 0.15);
    color: var(--t-link);
    border: 1px solid rgba(91, 156, 244, 0.3);
}
.plans-pdf-preview-btn-view:hover {
    background: rgba(91, 156, 244, 0.25);
    color: #7bb4ff;
}
.plans-pdf-preview-btn-download {
    background: rgba(233, 69, 96, 0.15);
    color: #e94560;
    border: 1px solid rgba(233, 69, 96, 0.3);
}
.plans-pdf-preview-btn-download:hover {
    background: rgba(233, 69, 96, 0.25);
    color: #ff6b86;
}
.plans-pdf-preview-iframe {
    width: 100%;
    height: 85vh;
    min-height: 700px;
    max-height: 1100px;
    border: none;
    background: var(--t-surface);
    display: block;
}

/* ── Image Preview Card (generate_image in plans chat) ── */
.plans-image-preview-card {
    margin: 10px 0 6px;
    border-radius: 12px;
    overflow: hidden;
    background: #1e2330;
    border: 1px solid var(--t-border);
    max-width: 520px;
}
.plans-image-preview-img {
    width: 100%;
    display: block;
    cursor: pointer;
    transition: opacity 0.2s;
}
.plans-image-preview-img:hover { opacity: 0.92; }
.plans-image-preview-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    justify-content: flex-end;
}
.plans-image-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    background-color: var(--t-surface-input);
    color: #a8b4c4;
    border: 1px solid var(--t-border);
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.plans-image-preview-btn:hover {
    background-color: var(--t-surface-active);
    color: var(--t-text);
}
/* ── Image Fullscreen Overlay ── */
.plans-image-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plans-image-fullscreen-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(8px);
}
.plans-image-fullscreen-content {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.plans-image-fullscreen-img {
    max-width: 90vw;
    max-height: 82vh;
    border-radius: 8px;
    object-fit: contain;
}
.plans-image-fullscreen-close {
    position: absolute;
    top: -36px;
    right: -8px;
    background: none;
    border: none;
    color: var(--t-text);
    font-size: 28px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.plans-image-fullscreen-close:hover { opacity: 1; }
.plans-image-fullscreen-caption {
    margin-top: 12px;
    color: var(--t-text-secondary);
    font-size: 13px;
    max-width: 600px;
    text-align: center;
    line-height: 1.4;
}

/* ── Mobile tap-to-interact overlay ──────── */
.plans-pdf-preview-body {
    position: relative;
}

/* ── Mobile PDF tap card (simple open-fullscreen button) ── */
.plans-pdf-tap-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(255, 201, 85, 0.08), rgba(255, 201, 85, 0.03));
    border: 1px solid rgba(255, 201, 85, 0.2);
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, border-color 0.15s;
}
.plans-pdf-tap-card:active {
    background: linear-gradient(135deg, rgba(255, 201, 85, 0.18), rgba(255, 201, 85, 0.08));
    border-color: rgba(255, 201, 85, 0.4);
}
.plans-pdf-tap-card-icon {
    flex-shrink: 0;
    color: var(--t-accent);
    opacity: 0.8;
}
.plans-pdf-tap-card-label {
    flex: 1;
    color: var(--t-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}
.plans-pdf-tap-card-arrow {
    flex-shrink: 0;
    color: var(--t-text-tertiary);
}

/* ── PDF Fullscreen Overlay ──────────────── */
body.plans-pdf-fullscreen-open {
    overflow: hidden;
}
.plans-pdf-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: rgba(5, 10, 20, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.plans-pdf-fullscreen.is-visible {
    opacity: 1;
}
.plans-pdf-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(15, 25, 45, 0.95);
    border-bottom: 1px solid rgba(91, 156, 244, 0.15);
    flex-shrink: 0;
}
.plans-pdf-fullscreen-title-area {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.plans-pdf-fullscreen-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e94560, #c23152);
    border-radius: 6px;
    color: var(--t-text);
}
.plans-pdf-fullscreen-title {
    font-size: 14px;
    font-weight: 600;
    color: #e4e8ee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plans-pdf-fullscreen-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.plans-pdf-fullscreen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(91, 156, 244, 0.2);
    background: rgba(91, 156, 244, 0.08);
    color: #8bb8f8;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}
.plans-pdf-fullscreen-btn:hover {
    background: rgba(91, 156, 244, 0.2);
    color: #aed0ff;
    border-color: rgba(91, 156, 244, 0.35);
}
.plans-pdf-fullscreen-close {
    background: rgba(233, 69, 96, 0.1);
    border-color: rgba(233, 69, 96, 0.25);
    color: #e94560;
}
.plans-pdf-fullscreen-close:hover {
    background: rgba(233, 69, 96, 0.25);
    color: #ff6b86;
    border-color: rgba(233, 69, 96, 0.4);
}
.plans-pdf-fullscreen-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: var(--t-surface);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .plans-pdf-preview-iframe {
        height: 50vh;
        min-height: 280px;
        max-height: 400px;
    }
    .plans-pdf-preview-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .plans-pdf-preview-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .plans-pdf-fullscreen-header {
        padding: 10px 14px;
    }
    .plans-pdf-fullscreen-title {
        font-size: 13px;
    }
}

/* ── Live Preview Iframe ──────────────── */
.plans-live-preview {
    margin: 12px 0 8px;
    border: 1px solid rgba(30, 58, 95, 0.6);
    border-radius: 10px;
    overflow: hidden;
    animation: plans-tool-slide-in 0.3s ease-out;
}

.plans-live-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(30, 58, 95, 0.4);
}

.plans-live-preview-dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.plans-live-preview-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.plans-live-preview-dot-red { background: #f87171; }
.plans-live-preview-dot-yellow { background: #fbbf24; }
.plans-live-preview-dot-green { background: #4ade80; }

.plans-live-preview-url {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--t-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plans-live-preview-url svg {
    color: var(--t-link);
    flex-shrink: 0;
}

.plans-live-preview-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.plans-live-preview-btn {
    background: transparent;
    border: 1px solid rgba(30, 58, 95, 0.4);
    border-radius: 4px;
    padding: 4px 6px;
    color: var(--t-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.plans-live-preview-btn:hover {
    background: rgba(91, 156, 244, 0.1);
    border-color: rgba(91, 156, 244, 0.4);
    color: var(--t-link);
}

.plans-live-preview-iframe {
    width: 100%;
    height: 75vh;
    min-height: 500px;
    max-height: 900px;
    border: none;
    background: var(--t-surface);
}

/* ── Terminal Output Stream ───────────── */
.plans-terminal-output {
    margin: 8px 0;
    border: 1px solid rgba(30, 58, 95, 0.5);
    border-radius: 8px;
    overflow: hidden;
    animation: plans-tool-slide-in 0.3s ease-out;
}

.plans-terminal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(30, 58, 95, 0.3);
    font-size: 0.72rem;
    color: var(--t-text-secondary);
}

.plans-terminal-header svg {
    color: #4ade80;
    flex-shrink: 0;
}

.plans-terminal-content {
    margin: 0;
    padding: 8px 12px;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.7rem;
    line-height: 1.5;
}

.plans-terminal-line {
    color: var(--t-text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
}

.plans-terminal-line-error {
    color: var(--t-error);
}

.plans-terminal-line-warn {
    color: #fbbf24;
}

.plans-terminal-line-url {
    color: var(--t-link);
}

.plans-chat-voice-btn {
    border-radius: var(--plans-radius-md);
    border: none;
    background: transparent;
    color: var(--plans-text);
    padding: 0.85rem 1.35rem;
    min-height: 52px;
    min-width: 52px;
    cursor: pointer;
    transition: all var(--plans-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    outline: none;
}

.plans-chat-voice-btn:hover,
.plans-chat-voice-btn:focus-visible {
    border: none;
    background: transparent;
    transform: translateY(-1px);
    outline: none;
}

/* Active listening state - prominent red pulsing indicator */
.plans-chat-voice-btn[data-state="listening"] {
    border: none;
    background: rgba(255, 60, 60, 0.2);
    color: #ff4444;
    animation: voice-pulse 1s ease-in-out infinite;
    border-radius: 50%;
}

.plans-chat-voice-btn[data-state="listening"] .plans-chat-voice-icon {
    fill: #ff4444;
    animation: voice-icon-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes voice-pulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.6), 0 0 8px rgba(255, 68, 68, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 0 12px rgba(255, 68, 68, 0), 0 0 20px rgba(255, 68, 68, 0.3);
        transform: scale(1.05);
    }
}

@keyframes voice-icon-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* Voice Visualizer — overlay inside input shell, leaves room for send btn */
.plans-voice-visualizer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 60px; /* Leave room for the send button on the right */
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    background: rgba(12, 6, 8, 0.96);
    border-radius: inherit;
    z-index: 5;
    animation: visualizer-fade-in 0.25s ease-out;
    pointer-events: none;
}

/* voice-active shell styling removed — mic button pulse is the only indicator */

@keyframes visualizer-fade-in {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.plans-voice-bars {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 36px;
    flex: 1;
    padding: 0 0.25rem;
}

.plans-voice-bar {
    flex: 1;
    min-width: 3px;
    max-width: 6px;
    min-height: 4px;
    height: 15%;
    background: linear-gradient(to top, #ff4444, #ff9999);
    border-radius: 3px;
    transition: height 0.06s ease-out;
    animation: voice-bar-idle 0.8s ease-in-out infinite;
}

/* Staggered animation for idle / fallback */
.plans-voice-bar:nth-child(odd)  { animation-delay: 0s; }
.plans-voice-bar:nth-child(even) { animation-delay: 0.15s; }
.plans-voice-bar:nth-child(3n)   { animation-delay: 0.3s; }
.plans-voice-bar:nth-child(4n+1) { animation-delay: 0.05s; }

@keyframes voice-bar-idle {
    0%, 100% { height: 15%; }
    50% { height: 70%; }
}

.plans-voice-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex-shrink: 0;
    min-width: 6rem;
}

.plans-voice-timer {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ff7777;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.plans-voice-label {
    font-size: 0.7rem;
    color: rgba(255, 130, 130, 0.7);
    font-weight: 500;
    white-space: nowrap;
}

/* Legacy support */
.plans-chat-voice-btn[data-state="recording"] {
    border: none;
    background: rgba(255, 60, 60, 0.2);
    color: #ff4444;
    animation: voice-pulse 1s ease-in-out infinite;
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 80, 80, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(255, 80, 80, 0); }
}

.plans-chat-voice-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.plans-chat-stop-btn {
    border-radius: var(--plans-radius-md);
    border: 1px solid rgba(91, 156, 244, 0.5);
    background: linear-gradient(135deg, rgba(20, 45, 90, 0.95), rgba(10, 25, 55, 0.92));
    color: #a8cfff;
    padding: 0.65rem 1.15rem;
    min-height: 52px;
    min-width: 52px;
    cursor: pointer;
    transition: border-color var(--plans-transition), background var(--plans-transition), color var(--plans-transition), opacity var(--plans-transition);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0;
    flex: 0 0 auto;
}
.plans-chat-stop-btn:not(:disabled):hover,
.plans-chat-stop-btn:not(:disabled):focus-visible {
    border-color: rgba(137, 180, 250, 0.85);
    color: #d0e6ff;
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(35, 70, 130, 0.95), rgba(20, 40, 80, 0.92));
    transition: border-color var(--plans-transition), background var(--plans-transition), transform var(--plans-transition);
}

.plans-chat-stop-btn[data-active="true"] {
    display: flex;
}

.plans-chat-stop-icon {
    width: 14px;
    height: 14px;
    background: currentColor;
    border-radius: 3px;
    flex-shrink: 0;
}

@media (max-width: 960px) {
    .plans-landing-grid,
    .plans-session-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .plans-viewer-header {
        gap: 0.6rem;
    }

    .plans-session-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .plans-header,
    .plans-viewer-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .plans-upload-dropzone {
        flex-direction: column;
        text-align: center;
    }

    .plans-vault-card {
        width: 100%;
    }

    .plans-vault-body {
        gap: 0.75rem;
    }

    .plans-vault-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .plans-chat-input-shell {
        flex-direction: column;
        align-items: stretch;
    }

    .plans-reasoning-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .plans-reasoning-text {
        text-align: left;
        width: 100%;
    }

    .plans-chat-input-shell .plans-btn {
        width: 100%;
    }

    .plans-chat-stop-btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    body.plans-body {
        --plans-mobile-input-height: 52px;
        --plans-mobile-button-size: 36px;
        --plans-mobile-input-safe-area: calc(var(--plans-mobile-input-height, 52px) + 12px);
        --plans-mobile-input-lift: 6px;
    }

    /* Hide "Files in chat" section on mobile */
    .plans-chat-context {
        display: none !important;
    }

    html,
    body {
        height: 100%;
    }

    body.plans-body.plans-session-page {
        --plans-session-header-measured: calc(
            clamp(56px, var(--app-header-height, 70px), 80px)
            + env(safe-area-inset-top, 0px)
        );
        --plans-session-header-tighten: clamp(2px, 0.6vh, 8px);
        --plans-session-header-offset: calc(
            var(--plans-session-header-measured)
            - var(--plans-session-header-tighten, 0px)
        );
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.plans-body.plans-session-page {
        padding-top: 0;
        min-height: 100vh;
        height: 100vh;
        position: fixed;
        inset: 0;
        width: 100%;
    }

    .plans-session-root,
    .plans-chat-card,
    .plans-chat-stage {
        overscroll-behavior: contain;
    }

    body.plans-body.plans-session-page .app-main {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        height: 100vh;
        padding-top: 0;
        margin-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.plans-body.plans-session-page .app-footer {
        display: none;
    }

    body.plans-body.plans-session-page #plans-session-root {
        position: fixed;
        top: var(--plans-session-header-offset, var(--app-header-height, 70px));
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100vh - var(--plans-session-header-offset, var(--app-header-height, 70px)));
        overflow: hidden;
    }

    .plans-landing-root {
        padding: 0 0.9rem calc(env(safe-area-inset-bottom, 0px) + 2rem);
    }

    /* Hide chat card header on mobile to save space */
    .plans-chat-card > .plans-card-header {
        display: none;
    }

    /* Minimize reasoning strip on mobile to save space */
    .plans-reasoning-strip {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
    }

    .plans-reasoning-pulse {
        font-size: 0.8rem;
        gap: 0.4rem;
    }

    .plans-reasoning-text {
        display: none; /* Hide detailed reasoning text on mobile */
    }

    /* Refined reasoning indicator dots on mobile */
    .plans-reasoning-inline-indicator {
        gap: 0.4rem;
        margin-bottom: 0.35rem;
    }

    .plans-reasoning-inline-dot {
        width: 10px;
        height: 10px;
        box-shadow: none;
    }

    /* Smaller reasoning summary on mobile */
    .plans-reasoning-inline-summary {
        font-size: 0.9rem;
        font-weight: 400;
        line-height: 1.4;
    }

    /* Refined reasoning message container on mobile */
    .plans-chat-message-reasoning {
        padding: 0.65rem 0.85rem;
        margin: 0.4rem 0;
        border-width: 1px;
        max-width: 100%;
        width: 100%;
    }

    .plans-session-root {
        max-width: 100%;
        flex: 1;
        min-height: 0;
        height: 100%;
        padding-top: 0;
        padding-right: clamp(0.2rem, 2vw, 0.5rem);
        padding-left: clamp(0.2rem, 2vw, 0.5rem);
        padding-bottom: 0;
        margin-top: 0;
        overflow: hidden;
    }

    .plans-landing-grid,
    .plans-session-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }

    .plans-session-grid {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    /* Remove card padding on mobile for full-screen */
    .plans-session-grid .plans-card {
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .plans-card {
        padding: 1rem;
    }

    .plans-main-viewer {
        min-height: 40vh;
        max-height: 60vh;
        border-radius: 18px;
    }

    .plans-viewer-stage,
    .plans-viewer-pdf-shell,
    .plans-viewer-pdf-frame {
        min-height: 40vh;
        max-height: 60vh;
        height: 40vh;
    }

    .plans-viewer-pdf-shell {
        overflow: auto;
        border-radius: 18px;
    }

    .plans-viewer-card {
        display: none;
    }

    .plans-viewer-card.is-floating {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2100;
        transform: translateX(110%);
        opacity: 0;
        transition: transform var(--plans-transition), opacity var(--plans-transition);
        background: linear-gradient(155deg, rgba(14, 16, 32, 0.98), rgba(4, 6, 14, 0.98));
        border-radius: 0;
        border: none;
        padding: 0;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65);
        overflow: hidden;
        isolation: auto;
    }

    .plans-viewer-card.is-floating::after {
        display: none;
    }

    .plans-viewer-card.is-floating.is-open {
        transform: translateX(0);
        opacity: 1;
    }

    .plans-viewer-card.is-floating .plans-viewer-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: clamp(0.75rem, 3vw, 1.3rem);
        background: rgba(3, 4, 10, 0.65);
    }

    .plans-viewer-card.is-floating .plans-viewer-header {
        padding: clamp(1rem, 4vw, 1.5rem);
        margin-bottom: 0;
        border-bottom: 1px solid var(--t-border-medium);
        background: rgba(6, 8, 18, 0.98);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    }

    .plans-viewer-card.is-floating .plans-session-meta-summary > span {
        background-color: var(--t-surface-input);
    }

    /* Show Blueprints handle - position above toolbox tab on mobile */
    .plans-viewer-handle.is-visible {
        display: inline-flex;
        position: fixed;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: calc(
            var(--plans-mobile-input-safe-area, 48px)
            + var(--plans-mobile-keyboard-offset, 0px)
            + var(--plans-mobile-input-lift, 0px)
            + env(safe-area-inset-bottom, 0px)
            + 28px
        );
        writing-mode: horizontal-tb;
        border-radius: 999px;
        padding: 0.25rem 0.8rem;
        font-size: 0.6rem;
        z-index: 1201;
    }


    /* Larger toolbox on mobile */
    .plans-toolbox,
    .plans-toolbox-categories {
        max-height: 75vh;
        height: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .plans-toolbox {
        width: 100%;
        padding: 1rem;
        border-radius: 16px 16px 0 0;
        max-height: 75vh;
        min-height: 60vh;
    }

    .plans-toolbox-categories {
        flex: 1;
        overflow-y: auto;
        min-height: calc(75vh - 3.5rem);
    }

    /* Full-screen chat on mobile - takes nearly entire viewport */
    .plans-chat-card {
        min-height: 0;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        padding: 0;
        padding-bottom: 0 !important;
        width: 100%;
        overflow: hidden;
        /* Remove gold border on mobile for cleaner look */
        border: none;
    }

    .plans-chat-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        /* Account for fixed input at bottom + toolbox button above it */
        padding-bottom: calc(
            var(--plans-mobile-input-safe-area, 48px)
            + env(safe-area-inset-bottom, 0px)
            + var(--plans-mobile-input-lift, 0px)
            + 40px  /* Extra space for toolbox button */
        );
    }

    .plans-chat-stage {
        flex: 1;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        display: flex;
        flex-direction: column;
        padding: 0;
        /* Remove extra padding-bottom since parent handles it now */
        padding-bottom: clamp(0.5rem, 2vh, 1rem);
        border: none;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        scroll-padding-bottom: clamp(0.5rem, 2vh, 1rem);
    }

    .plans-chat-messages,
    .plans-chat-stage .plans-chat-messages {
        flex: 1;
        height: auto;
        max-height: none;
        min-height: auto;
        overflow: visible;
        overscroll-behavior: auto;
        padding: 0;
        gap: 0.55rem;
    }

    .plans-chat-stage .plans-chat-messages {
        background: transparent;
        border-radius: 0;
    }

    /* Small spacer at end of messages for better scroll UX */
    .plans-chat-messages::after {
        content: "";
        display: block;
        flex: 0 0 auto;
        height: clamp(0.5rem, 2vh, 1rem);
        width: 100%;
    }

    /* Keep chat input anchored in layout on mobile instead of floating */
    .plans-chat-input-row {
        position: fixed;
        bottom: calc(
            var(--plans-mobile-keyboard-offset, 0px)
            + env(safe-area-inset-bottom, 0px)
            + var(--plans-mobile-input-lift, 0px)
        );
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(5, 6, 14, 0.98) 0%, rgba(5, 6, 14, 0.95) 85%, transparent 100%);
        padding: 0.02rem clamp(0.2rem, 1vw, 0.3rem)
            calc(env(safe-area-inset-bottom, 0px) + var(--plans-mobile-input-lift, 0px) + 0.02rem);
        border-top: none;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.32);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 1000;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    
    /* Hide header Deep Research toggle on mobile - now in input drawer */
    .plans-chat-header-row .plans-chat-setting--deep-research {
        display: none !important;
    }

    /* Hide input and toolbox tab when toolbox overlay is open */
    .plans-toolbox-overlay.is-active ~ .plans-toolbox-tab,
    .plans-toolbox-overlay.is-active ~ .plans-chat-input-row {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Mobile toolbox overlay - full screen fit */
    .plans-toolbox-overlay {
        --plans-toolbox-safe-top: calc(var(--app-header-height, 70px) + 0.5rem);
        --plans-toolbox-safe-bottom: 0.5rem;
        padding: 0.5rem;
        padding-top: var(--plans-toolbox-safe-top);
        align-items: stretch;
        overscroll-behavior: contain;
    }

    .plans-toolbox-overlay .plans-toolbox-scrim {
        background: #0a0c14;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .plans-toolbox {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - var(--plans-toolbox-safe-top) - var(--plans-toolbox-safe-bottom) - 1rem);
        min-height: auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        overscroll-behavior: contain;
        touch-action: pan-y;
        background: #0a0c14;
        border: none;
        border-radius: 16px;
    }

    .plans-toolbox-categories {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .plans-toolbox-featured {
        flex-shrink: 0;
        padding: 0.35rem 0.5rem;
        border-radius: 8px;
        gap: 0.2rem;
    }

    .plans-toolbox-featured-badge {
        font-size: 0.55rem;
        padding: 0.08rem 0.4rem;
    }

    .plans-toolbox-featured-title {
        font-size: 0.75rem;
    }

    .plans-toolbox-featured-copy {
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .plans-toolbox-featured-btn {
        font-size: 0.65rem;
        padding: 0.3rem 0.7rem;
    }

    .plans-toolbox-header {
        flex-shrink: 0;
    }

    /* Toolbox button — sits directly above the fixed chat input */
    .plans-toolbox-tab.is-visible {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(
            48px + 1.5rem
            + env(safe-area-inset-bottom, 0px)
            + var(--plans-mobile-keyboard-offset, 0px)
            + var(--plans-mobile-input-lift, 0px)
        );
        display: flex;
        justify-content: center;
        padding: 0;
        z-index: 1001;
        pointer-events: auto;
    }

    /* Hide the image preview strip on mobile — it takes space between
       the toolbox button and the input. Only show when actually populated */
    .plans-chat-image-preview[hidden] {
        display: none !important;
    }
    .plans-chat-image-preview {
        padding: 4px 8px 2px 8px;
    }

    .plans-toolbox-tab-btn {
        font-size: 0.6rem;
        padding: 0.25rem 1rem;
        letter-spacing: 0.1em;
        border-radius: 999px 999px 0 0;
        background: linear-gradient(135deg, rgba(9, 11, 24, 0.98), rgba(4, 6, 15, 0.95));
        border: 1px solid rgba(79, 139, 255, 0.35);
        border-bottom: none;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.35);
        color: var(--plans-text);
    }

    /* Mobile chat input shell - compact but pill-shaped like desktop */
    .plans-chat-input-shell {
        gap: 0.1rem !important;
        padding: 0.1rem 0.2rem !important;
        border-radius: 24px !important;
        border: 1.5px solid rgba(100, 180, 255, 0.5) !important;
        background: rgba(6, 8, 18, 0.9) !important;
        position: relative;
        /* Reorder buttons on mobile: input, voice, send */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        height: 48px !important;
        max-height: 48px !important;
        margin-bottom: 1rem !important; /* Add more space from bottom of phone */
    }

    /* Mobile overlay placeholder: reliable vertical centering (iOS-safe) */
    .plans-chat-input-overlay-placeholder {
        display: none;
    }

    .plans-chat-input-shell[data-mobile-placeholder="true"] .plans-chat-input-overlay-placeholder {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.85rem;
        line-height: 20px;
        color: var(--t-text-tertiary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
        text-align: center;
    }

    .plans-chat-input-shell[data-mobile-placeholder="false"] .plans-chat-input-overlay-placeholder {
        display: none;
    }

    /* Change order: put voice button after input, before send button */
    .plans-chat-input {
        order: 1;
        font-size: 0.95rem;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        box-sizing: border-box !important;
        /* Perfect vertical centering in 40px: 10 + 20 + 10 = 40 */
        padding: 10px 0.6rem !important;
        line-height: 20px !important;
        flex: 1;
    }

    /* iOS Safari textarea text baseline sits a touch high; nudge down */
    @supports (-webkit-touch-callout: none) {
        .plans-chat-input {
            padding-top: 11px !important;
            padding-bottom: 9px !important;
        }
    }

    .plans-chat-input::placeholder {
        font-size: 0.85rem;
        color: var(--t-text-tertiary);
        line-height: 20px !important;
    }

    .plans-chat-voice-btn {
        order: 2;
        min-height: 36px;
        max-height: 36px;
        padding: 0.2rem 0.5rem;
        font-size: 0.8rem;
        flex: 0 0 auto;
        border-radius: 16px;
    }

    .plans-chat-send-btn {
        order: 3;
        min-height: 36px;
        max-height: 36px;
        padding: 0.2rem 0.6rem;
        font-size: 0.85rem;
        flex: 0 0 auto;
        border-radius: 14px;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: rgba(100, 180, 255, 1) !important;
    }

    .plans-chat-send-btn:hover,
    .plans-chat-send-btn:active {
        background: transparent !important;
        box-shadow: none !important;
    }

    .plans-chat-send-btn .plans-chat-send-icon {
        filter: none;
        transform: rotate(-90deg);
        color: rgba(100, 180, 255, 1);
        width: 28px;
        height: 28px;
    }

    .plans-chat-input-shell .plans-btn {
        width: auto;
    }

    .plans-chat-voice-icon {
        width: 26px;
        height: 26px;
    }

    /* Refined mobile typing indicator */
    .plans-chat-typing {
        padding: 0.5rem 0.85rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .plans-chat-typing-dots {
        gap: 0.35rem;
    }

    .plans-chat-typing-dot {
        width: 6px;
        height: 6px;
        background: rgba(255, 255, 255, 0.5);
    }

    .plans-chat-typing-label {
        color: var(--t-text-tertiary);
        font-size: 0.8rem;
    }

    .plans-chat-stop-btn {
        position: static;
        order: 3;
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        max-height: 32px;
        padding: 0;
        border-radius: 8px;
        box-shadow: none;
        transform: none;
        max-width: 32px;
        gap: 0;
        margin-right: 4px;
    }

    .plans-chat-stop-btn .plans-chat-stop-label {
        display: none;
    }

    /* Mobile text formatting improvements */
    .plans-chat-message {
        font-size: 1rem;
        line-height: 1.6;
        padding: 0;
        width: 100%;
    }

    /* Remove chat bubble styling on mobile for clean overlay feel */
    .plans-chat-message,
    .plans-chat-message-user,
    .plans-chat-message-assistant {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--plans-text) !important;
    }

    .plans-chat-message-body,
    .plans-chat-message-assistant .plans-chat-message-body,
    .plans-chat-message-user .plans-chat-message-body,
    .plans-chat-message-body h1,
    .plans-chat-message-body h2,
    .plans-chat-message-body h3,
    .plans-chat-message-body h4,
    .plans-chat-message-body h5,
    .plans-chat-message-body h6,
    .plans-chat-message-body strong,
    .plans-chat-message-body b,
    .plans-chat-message-body em,
    .plans-chat-message-body i,
    .plans-chat-message-body th,
    .plans-chat-message-body td {
        color: var(--plans-text) !important;
    }

    .plans-chat-message-body a {
        color: var(--plans-accent) !important;
    }

    .plans-chat-message-body {
        line-height: 1.65;
        padding: 0.12rem 0.1rem 0.25rem;
        overflow-x: visible;
    }

    .plans-chat-message-user {
        width: 100%;
    }

    .plans-chat-message-user .plans-chat-message-body {
        margin-left: auto;
        margin-right: clamp(0.2rem, 3vw, 0.9rem);
        padding: clamp(0.65rem, 2.5vw, 0.95rem) clamp(0.85rem, 4vw, 1.35rem);
        border-radius: 22px;
        border: 1px solid rgba(255, 201, 85, 0.38);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 201, 85, 0.08));
        box-shadow:
            0 12px 26px rgba(0, 0, 0, 0.55),
            inset 0 0 0 1px rgba(10, 10, 18, 0.35);
        max-width: min(94%, 520px);
        position: relative;
    }

    .plans-chat-message-user .plans-chat-message-body::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.06);
    }

    .plans-chat-message-body table {
        width: calc(100% + 0.2rem);
        max-width: calc(100% + 0.2rem);
        margin-left: -0.1rem;
        margin-right: -0.1rem;
        border-collapse: collapse;
        border-spacing: 0;
        margin-top: 0.25rem;
        margin-bottom: 0.6rem;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid var(--t-border);
        border-radius: 8px;
        display: table;
        font-size: 0.78rem;
        table-layout: fixed;
    }

    .plans-chat-message-body table > * {
        width: 100%;
    }

    .plans-chat-message-body thead {
        display: table-header-group;
    }

    .plans-chat-message-body tbody {
        display: table-row-group;
    }

    .plans-chat-message-body tr {
        display: table-row;
    }

    .plans-chat-message-body th,
    .plans-chat-message-body td {
        border: 1px solid var(--t-border);
        padding: 0.35rem 0.45rem;
        background: transparent;
        color: var(--plans-text) !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
        hyphens: auto;
    }

    .plans-chat-message-body th {
        background-color: var(--t-surface-hover);
        font-size: 0.68rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .plans-chat-message-body tr:nth-child(even) td {
        background-color: var(--t-surface-soft);
    }

    .plans-chat-message-body caption {
        color: var(--t-text-tertiary);
        letter-spacing: 0.12em;
    }

    .plans-chat-message-body p {
        margin-bottom: 0.85rem;
        line-height: 1.65;
    }

    .plans-chat-message-body h1,
    .plans-chat-message-body h2,
    .plans-chat-message-body h3 {
        font-size: 1.25rem;
        margin: 1.25rem 0 0.75rem;
        line-height: 1.4;
    }

    .plans-chat-message-body h4,
    .plans-chat-message-body h5,
    .plans-chat-message-body h6 {
        font-size: 1.1rem;
        margin: 1rem 0 0.5rem;
        line-height: 1.4;
    }

    .plans-chat-message-body ul,
    .plans-chat-message-body ol {
        margin: 0.75rem 0 1rem 1.25rem;
        padding-left: 1rem;
    }

    .plans-chat-message-body li {
        margin-bottom: 0.5rem;
        line-height: 1.6;
    }

    .plans-chat-message-body strong,
    .plans-chat-message-body b {
        font-weight: 600;
    }

    .plans-chat-message-body code {
        font-size: 0.9em;
        padding: 0.2em 0.4em;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 4px;
    }

    .plans-chat-message-body pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
        margin: 0.75rem 0;
        border-radius: 8px;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .plans-chat-message-body th,
    .plans-chat-message-body td {
        padding: 0.48rem 0.6rem;
        font-size: 0.7rem;
        line-height: 1.35;
    }

    .plans-chat-message-body th {
        font-size: 0.58rem;
    }

    .plans-main-viewer {
        min-height: 220px;
    }
}

@media (max-width: 480px) {
    .plans-card {
        padding: 1.4rem;
    }

    .plans-landing-root {
        padding: 0 1rem calc(env(safe-area-inset-bottom, 0px) + 3rem);
    }

    .plans-chat-input-shell {
        position: relative;
    }

    .plans-chat-input {
        /* Keep the chat input pill-shaped on small screens too */
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        box-sizing: border-box !important;
        /* Perfect vertical centering in 40px: 10 + 20 + 10 = 40 */
        padding: 10px 0.6rem !important;
        line-height: 20px !important;
    }

    .plans-chat-input-shell[data-mobile-placeholder="true"] .plans-chat-input-overlay-placeholder {
        left: 2.8rem; /* Account for plus button */
        right: 4.4rem;
        top: 50%;
        transform: translateY(-50%);
        line-height: 20px;
    }

    @supports (-webkit-touch-callout: none) {
        .plans-chat-input {
            padding-top: 11px !important;
            padding-bottom: 9px !important;
        }
    }

}

@keyframes plansPulse {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.45;
    }
    100% {
        transform: scale(1);
        opacity: 0.85;
    }
}

/* RFI Pack Generation Loading Indicator */
.rfi-generating-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(91, 156, 244, 0.3);
    border-radius: 8px;
    margin-top: 8px;
}

.rfi-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(91, 156, 244, 0.3);
    border-top-color: var(--t-link);
    border-radius: 50%;
    animation: rfiSpinnerRotate 0.8s linear infinite;
}

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

.rfi-shimmer-text {
    font-size: 14px;
    font-weight: 500;
    background: linear-gradient(
        90deg,
        #5b9cf4 0%,
        #93c5fd 25%,
        #bfdbfe 50%,
        #93c5fd 75%,
        #5b9cf4 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rfiShimmerText 1.5s ease-in-out infinite;
}

@keyframes rfiShimmerText {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* RFI Pack tab notification badge */
.rfi-pack-new-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: var(--t-success);
    border-radius: 50%;
    animation: rfiBadgePulse 1.5s ease-in-out infinite;
}

@keyframes rfiBadgePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* Toast notification enhancements */
.plans-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.plans-toast-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.plans-toast--success {
    border-left-color: var(--t-success-text);
}

.plans-toast--info {
    border-left-color: #3b82f6;
}

.plans-toast--warning {
    border-left-color: #f59e0b;
}

.plans-toast--error {
    border-left-color: #ef4444;
}

.plans-toast--brain {
    border-left-color: #a78bfa;
    background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(30,41,59,0.95));
}

.plans-toast-actions {
    margin-left: auto;
    margin-top: 0;
    flex-shrink: 0;
}

.plans-btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 6px;
}
/* =========================================
   Mobile Dashboard Button
   ========================================= */

/* Dashboard button - only visible on mobile when project exists */
.plans-mobile-dashboard-btn {
    display: none;
}

@media (max-width: 768px) {
    .plans-mobile-dashboard-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 6px;
        background: rgba(59, 130, 246, 0.15);
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 8px;
        color: var(--t-link);
        text-decoration: none;
        transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }

    .plans-mobile-dashboard-btn:hover,
    .plans-mobile-dashboard-btn:focus-visible {
        background: rgba(59, 130, 246, 0.25);
        border-color: rgba(59, 130, 246, 0.5);
        transform: scale(1.05);
    }

    .plans-mobile-dashboard-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* =========================================
   Mobile Menu Drawer (Hamburger)
   ========================================= */

/* Hamburger button - only visible on mobile */
.plans-mobile-menu-btn {
    display: none;
}

@media (max-width: 768px) {
    .plans-mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 6px;
        background: transparent;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .plans-mobile-menu-btn:hover,
    .plans-mobile-menu-btn:focus-visible {
        background-color: var(--t-tab-active-bg);
    }

    .plans-mobile-menu-btn[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.15);
    }

    .plans-mobile-menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 20px;
        height: 20px;
    }

    .plans-mobile-menu-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 1px;
        transition: transform 0.2s, opacity 0.2s;
    }

    .plans-mobile-menu-btn[aria-expanded="true"] .plans-mobile-menu-icon span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .plans-mobile-menu-btn[aria-expanded="true"] .plans-mobile-menu-icon span:nth-child(2) {
        opacity: 0;
    }

    .plans-mobile-menu-btn[aria-expanded="true"] .plans-mobile-menu-icon span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}

/* Menu Scrim */
.plans-mobile-menu-scrim {
    display: none;
}

@media (max-width: 768px) {
    .plans-mobile-menu-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        z-index: 9998;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .plans-mobile-menu-scrim.is-visible {
        opacity: 1;
        visibility: visible;
    }
}

/* Menu Drawer */
.plans-mobile-menu-drawer {
    display: none;
}

@media (max-width: 768px) {
    .plans-mobile-menu-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 85vw);
        background:
            radial-gradient(circle at 15% 10%, rgba(59, 130, 246, 0.12), transparent 55%),
            radial-gradient(circle at 80% 90%, rgba(126, 250, 209, 0.06), transparent 50%),
            linear-gradient(180deg, #080b18 0%, #060914 100%);
        border-right: 1px solid rgba(79, 139, 255, 0.18);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .plans-mobile-menu-drawer.is-open {
        transform: translateX(0);
    }

    .plans-mobile-menu-drawer[aria-hidden="false"] {
        transform: translateX(0);
    }
}

/* Drawer Header */
.plans-mobile-menu-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(79, 139, 255, 0.12);
    flex-shrink: 0;
    background: rgba(8, 12, 28, 0.6);
}

.plans-mobile-menu-drawer-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--plans-text, #fff);
    margin: 0;
}

.plans-mobile-menu-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--t-border-medium);
    border-radius: 8px;
    color: var(--t-text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.plans-mobile-menu-drawer-close svg {
    flex-shrink: 0;
}

.plans-mobile-menu-drawer-close:hover,
.plans-mobile-menu-drawer-close:focus-visible {
    background-color: var(--t-tab-active-bg);
    color: var(--t-text);
}

/* Drawer Body */
.plans-mobile-menu-drawer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0;
    -webkit-overflow-scrolling: touch;
}

/* Quick Actions — Chat & New Job buttons at top of drawer */
.plans-mobile-menu-quick-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 1rem 0.75rem;
    flex-shrink: 0;
}

.plans-mobile-menu-quick-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--t-border-medium);
    background-color: var(--t-surface-input);
    color: rgba(248, 250, 252, 0.92);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.plans-mobile-menu-quick-btn:active {
    background-color: var(--t-surface-active);
    border-color: var(--t-border-accent);
}

.plans-mobile-menu-quick-btn svg {
    flex-shrink: 0;
    opacity: 0.75;
}

.plans-mobile-menu-quick-btn--chat {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.1);
    color: #a5b4fc;
}

.plans-mobile-menu-quick-btn--chat:active {
    background: rgba(99, 102, 241, 0.2);
}

.plans-mobile-menu-quick-btn--newjob {
    border-color: rgba(52, 211, 153, 0.3);
    background: rgba(52, 211, 153, 0.08);
    color: #6ee7b7;
}

.plans-mobile-menu-quick-btn--newjob:active {
    background: rgba(52, 211, 153, 0.18);
}

/* Menu Sections */
.plans-mobile-menu-section {
    padding: 0.5rem 0;
}

/* Conversations section - limited height so Tools stay visible */
.plans-mobile-menu-section-conversations {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 25vh;
    overflow: hidden;
}

/* Tools section - below conversations, always visible */
.plans-mobile-menu-section-tools {
    flex-shrink: 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--t-border);
    padding-top: 0.5rem;
}

.plans-mobile-menu-section + .plans-mobile-menu-section {
    border-top: 1px solid var(--t-border);
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.plans-mobile-menu-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(125, 185, 255, 0.7);
    padding: 0 1.25rem 0.5rem;
    margin: 0;
}

/* Menu Options */
.plans-mobile-menu-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--plans-text, #fff);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.plans-mobile-menu-option:hover,
.plans-mobile-menu-option:focus-visible {
    background: rgba(79, 139, 255, 0.1);
}

.plans-mobile-menu-option:active {
    background: rgba(79, 139, 255, 0.16);
}

.plans-mobile-menu-option-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.plans-mobile-menu-option-text {
    flex: 1;
}

.plans-mobile-menu-option-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    background: rgba(79, 139, 255, 0.15);
    color: var(--t-link-hover);
    border-radius: 4px;
}

.plans-mobile-menu-option-chevron {
    flex-shrink: 0;
    opacity: 0.4;
}

/* View Plans hero button — prominent standalone item at top of tools */
.plans-mobile-menu-plans-hero {
    padding: 0 0.75rem;
    margin-bottom: 0.75rem;
}

.plans-mobile-menu-option--plans-hero {
    background: linear-gradient(135deg, rgba(79, 139, 255, 0.15), rgba(126, 250, 209, 0.08)) !important;
    border: 1px solid rgba(79, 139, 255, 0.3) !important;
    border-radius: 14px !important;
    padding: 1rem 1.125rem !important;
    font-size: 0.975rem;
    font-weight: 600;
}

.plans-mobile-menu-option--plans-hero .plans-mobile-menu-option-icon {
    opacity: 1;
    color: var(--t-link-hover);
}

.plans-mobile-menu-option--plans-hero:hover,
.plans-mobile-menu-option--plans-hero:active {
    background: linear-gradient(135deg, rgba(79, 139, 255, 0.25), rgba(126, 250, 209, 0.15)) !important;
    border-color: rgba(79, 139, 255, 0.5) !important;
}

/* Toolbox divider — visual separator before bottom toolbox item */
.plans-mobile-menu-toolbox-divider {
    height: 1px;
    margin: 0.5rem 1.25rem 0.25rem;
    background-color: var(--t-surface-input);
}

.plans-mobile-menu-option--toolbox {
    opacity: 0.7;
}

/* Chat list in menu */
.plans-mobile-menu-chats-list {
    flex: 1;
    overflow-y: auto;
    margin: 0 0.75rem;
    padding: 0.25rem 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.plans-mobile-menu-chats-list:empty {
    display: none;
}

.plans-mobile-menu-chat-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 2px;
}

.plans-mobile-menu-chat-item.is-transitioning .plans-mobile-menu-chat-item-content {
    transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}

.plans-mobile-menu-chat-item-content {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 64px; /* Reserve space for delete button */
    background: var(--plans-panel, #0d1122);
    border: 1px solid var(--plans-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    color: var(--plans-muted, rgba(246, 247, 255, 0.64));
    font-size: 0.9rem;
    font-weight: 450;
    text-align: left;
    cursor: pointer;
    will-change: transform;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.plans-mobile-menu-chat-item-content:active {
    background: var(--plans-panel-alt, #11162a);
}

.plans-mobile-menu-chat-item.is-active .plans-mobile-menu-chat-item-content {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    color: var(--plans-text, #f6f7ff);
}

.plans-mobile-menu-chat-item.is-active .plans-mobile-menu-chat-item-icon {
    opacity: 1;
    color: var(--t-link);
}

.plans-mobile-menu-chat-item-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0.45;
    color: var(--plans-muted);
}

.plans-mobile-menu-chat-item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.plans-mobile-menu-chat-item-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    background-color: var(--t-surface-input);
    border-left: 1px solid var(--t-border);
}

.plans-mobile-menu-chat-item-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--t-text-tertiary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.plans-mobile-menu-chat-item-delete:active {
    color: var(--t-error);
}

.plans-mobile-menu-chat-item-delete svg {
    width: 16px;
    height: 16px;
}

/* Swipe hint indicator */
.plans-mobile-menu-chat-item.is-swiped .plans-mobile-menu-chat-item-content {
    border-radius: 10px 0 0 10px;
}

/* User Profile Section */
.plans-mobile-menu-user-section {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid var(--t-border);
    background: rgba(0, 0, 0, 0.15);
}

.plans-mobile-menu-user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(30, 58, 138, 0.08));
    border: 1px solid rgba(79, 139, 255, 0.18);
    border-radius: 12px;
    color: var(--plans-text, #fff);
    text-align: left;
    cursor: default;
    transition: background 0.15s, border-color 0.15s;
}

.plans-mobile-menu-user-profile:hover,
.plans-mobile-menu-user-profile:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--t-border-strong);
}

/* ── Mobile Menu Avatar ── */
.plans-mobile-menu-user-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(79, 139, 255, 0.25), rgba(37, 99, 235, 0.35));
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plans-mobile-menu-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.plans-mobile-menu-avatar-initial {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(246, 247, 255, 0.85);
    text-transform: uppercase;
    line-height: 1;
    user-select: none;
}

.plans-mobile-menu-avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s;
}

.plans-mobile-menu-user-avatar:active .plans-mobile-menu-avatar-overlay {
    opacity: 1;
}

.plans-mobile-menu-user-content {
    flex: 1;
    min-width: 0;
}

.plans-mobile-menu-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.plans-mobile-menu-user-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--plans-text, #f6f7ff);
    letter-spacing: 0.01em;
}

.plans-mobile-menu-user-email {
    font-size: 0.8rem;
    color: var(--plans-muted, rgba(246, 247, 255, 0.5));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plans-mobile-menu-user-tier {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.plans-mobile-menu-user-tier-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #7efad1;
    fill: currentColor;
}

.plans-mobile-menu-user-tier-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7efad1;
}

.plans-mobile-menu-user-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem;
    margin-top: 0.75rem;
    background: transparent;
    border: 1px solid var(--t-border);
    border-radius: 8px;
    color: var(--plans-muted, rgba(246, 247, 255, 0.6));
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.plans-mobile-menu-user-logout:hover,
.plans-mobile-menu-user-logout:focus-visible {
    background-color: var(--t-surface-soft);
    border-color: var(--t-border-strong);
    color: var(--plans-text, #f6f7ff);
}

.plans-mobile-menu-user-logout svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.plans-mobile-menu-home-footer {
    padding: 1rem 1rem 0.5rem;
    border-top: 1px solid var(--t-border);
    margin-top: 0.5rem;
}

.plans-mobile-menu-home-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(79, 139, 255, 0.18);
    border-radius: 10px;
    color: rgba(125, 185, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.plans-mobile-menu-home-link:hover,
.plans-mobile-menu-home-link:focus-visible {
    background-color: var(--t-surface-soft);
    border-color: var(--t-border-strong);
    color: var(--plans-text, #f6f7ff);
}

.plans-mobile-menu-home-link svg {
    flex-shrink: 0;
}

/* Hide old mobile buttons since we now use hamburger menu */
@media (max-width: 768px) {
    /* Hide the old vault and tools buttons - replaced by hamburger menu */
    .plans-mobile-vault-btn,
    .plans-mobile-tools-btn {
        display: none !important;
    }
    
    /* Toolbox tab: fixed above input on mobile */
    .plans-toolbox-tab.is-visible {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: calc(
            48px + 1.5rem
            + env(safe-area-inset-bottom, 0px)
            + var(--plans-mobile-keyboard-offset, 0px)
            + var(--plans-mobile-input-lift, 0px)
        ) !important;
        display: flex !important;
        justify-content: center;
        padding: 0;
        z-index: 1001;
        pointer-events: auto;
    }
    
    /* Hide the saved tab since it's now in the hamburger menu */
    .plans-saved-tab {
        display: none !important;
    }

    /* Hide drawer behind fullscreen viewer */
    body.plans-viewer-open .plans-primary-column {
        transform: translateX(100%);
        pointer-events: none;
    }
}

/* =========================================
   Vertical Monitor / Mid-Width Drawer Layout
   Screens between 769px-1099px fall in a gap:
   too wide for the 768px mobile breakpoint,
   too narrow for the 1100px desktop grid.
   Apply the mobile drawer pattern here.
   ========================================= */

@media (min-width: 769px) and (max-width: 1099px) {
    body.plans-body {
        --plans-mobile-drawer-offset: calc(var(--app-header-height, 52px) + clamp(0.05rem, 0.5vh, 0.3rem));
        padding-top: 0 !important;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }

    body.plans-body .app-main {
        height: 100vh;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.plans-body.plans-session-page .app-main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.plans-body .app-header {
        position: sticky;
        top: 0;
        min-height: auto;
        /* Remove backdrop-filter so fixed-position menu drawer
           can escape the header stacking context and overlay chat */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: transparent;
        box-shadow: none;
        border-bottom: none;
    }

    /* Swap headers: hide desktop, show mobile */
    body.plans-body .plans-header-desktop {
        display: none !important;
        visibility: hidden;
        height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    body.plans-body .plans-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0.15rem 0;
    }

    /* Chat & New Job are in hamburger menu now — hide from header */
    .plans-header-action-btn {
        display: none;
    }

    .plans-header-mobile-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        gap: 0.05rem;
        min-width: 0;
    }

    .plans-header-mobile-label {
        margin: 0;
        font-size: 0.58rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--plans-label);
        line-height: 1.1;
    }

    .plans-header-mobile-title {
        margin: 0;
        font-size: clamp(0.88rem, 2.5vw, 1.15rem);
        line-height: 1.2;
        font-weight: 600;
        color: var(--plans-text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100vw - 120px);
    }

    .plans-header-mobile-meta {
        margin: 0;
        font-size: 0.7rem;
        line-height: 1.2;
        color: var(--plans-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100vw - 120px);
    }

    /* Show hamburger button */
    .plans-mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 6px;
        background: transparent;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .plans-mobile-menu-btn:hover,
    .plans-mobile-menu-btn:focus-visible {
        background-color: var(--t-tab-active-bg);
    }

    .plans-mobile-menu-btn[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.15);
    }

    .plans-mobile-menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 20px;
        height: 20px;
    }

    .plans-mobile-menu-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 1px;
        transition: transform 0.2s, opacity 0.2s;
    }

    .plans-mobile-menu-btn[aria-expanded="true"] .plans-mobile-menu-icon span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .plans-mobile-menu-btn[aria-expanded="true"] .plans-mobile-menu-icon span:nth-child(2) {
        opacity: 0;
    }

    .plans-mobile-menu-btn[aria-expanded="true"] .plans-mobile-menu-icon span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Show mobile menu drawer + scrim */
    .plans-mobile-menu-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        z-index: 9998;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .plans-mobile-menu-scrim.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .plans-mobile-menu-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(360px, 85vw);
        background:
            radial-gradient(circle at 15% 10%, rgba(59, 130, 246, 0.12), transparent 55%),
            radial-gradient(circle at 80% 90%, rgba(126, 250, 209, 0.06), transparent 50%),
            linear-gradient(180deg, #080b18 0%, #060914 100%);
        border-right: 1px solid rgba(79, 139, 255, 0.18);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .plans-mobile-menu-drawer.is-open {
        transform: translateX(0);
    }

    .plans-mobile-menu-drawer[aria-hidden="false"] {
        transform: translateX(0);
    }

    /* Show workspace tabs as scrollable row on tablet */
    .plans-workspace-tabs {
        display: flex !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0.25rem 0 0.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .plans-workspace-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Viewer scrim for floating viewer */
    #plansViewerScrim {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 2099;
        display: none;
    }
    #plansViewerScrim.is-visible {
        display: block;
    }

    /* Hide the primary column drawer when the viewer is open fullscreen */
    body.plans-viewer-open .plans-primary-column {
        transform: translateX(100%);
        pointer-events: none;
    }

    /* Session grid → flex column, fill remaining height */
    .plans-session-root {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .plans-session-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Primary column → fixed drawer (slides in from right) */
    .plans-primary-column {
        position: fixed;
        top: var(--plans-mobile-drawer-offset, calc(var(--app-header-height, 56px) + 0.5rem));
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.35rem, 1.5vw, 0.65rem) calc(1rem + var(--plans-safe-area-bottom, 0px));
        background:
            radial-gradient(circle at 10% 8%, rgba(59, 130, 246, 0.15), transparent 55%),
            radial-gradient(circle at 80% 4%, rgba(126, 250, 209, 0.12), transparent 50%),
            rgba(5, 8, 20, 0.96);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 280ms var(--plans-transition, cubic-bezier(0.19, 1, 0.22, 1));
        z-index: 1200;
        gap: 0;
        border-radius: 26px 26px 0 0;
        display: flex;
        flex-direction: column;
    }

    .plans-primary-column.is-open {
        transform: translateX(0);
    }

    /* Show mobile drawer header inside primary column */
    .plans-mobile-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.5rem 0 0.25rem;
        position: sticky;
        top: 0;
        z-index: 2;
        background:
            linear-gradient(180deg, rgba(8, 12, 24, 0.96), rgba(8, 11, 23, 0.92));
        padding-bottom: 0.5rem;
    }

    /* Tool drawers */
    .plans-tool-drawer {
        display: none;
        flex: 1;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }

    .plans-tool-drawer.is-active {
        display: flex;
    }

    .plans-tool-drawer > section {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - var(--plans-mobile-drawer-offset, 64px) - clamp(2.5rem, 8vw, 4rem));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: clamp(0.75rem, 2vh, 1.2rem);
        padding-bottom: clamp(1rem, 4vw, 1.5rem);
        margin-bottom: 0.5rem;
    }

    /* Leads mode — full height, leads card handles its own scroll */
    .plans-tool-drawer > section.plans-leads-card {
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        min-height: 0;
    }

    /* Chat card fills remaining space */
    .plans-chat-card {
        flex: 1;
        min-height: 0;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .plans-chat-body {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .plans-chat-stage {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .plans-chat-input-row {
        flex-shrink: 0;
    }

    /* Hide old vault/tools/saved buttons — in hamburger now */
    .plans-mobile-vault-btn,
    .plans-mobile-tools-btn,
    .plans-saved-tab {
        display: none !important;
    }

    /* Toolbox tab: fixed above input on mid-width */
    .plans-toolbox-tab.is-visible {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: calc(
            48px + 1.5rem
            + env(safe-area-inset-bottom, 0px)
            + var(--plans-mobile-keyboard-offset, 0px)
            + var(--plans-mobile-input-lift, 0px)
        ) !important;
        display: flex !important;
        justify-content: center;
        padding: 0;
        z-index: 1001;
        pointer-events: auto;
    }

    /* Reports mobile adjustments */
    .plans-tool-drawer .plans-dashboard-card {
        flex: 1;
        min-height: 0;
        height: calc(100vh - var(--plans-mobile-drawer-offset, 64px) - clamp(2.5rem, 8vw, 4rem));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: rgb(10, 14, 28);
        border: 1px solid var(--t-border-medium);
    }

    .plans-tool-drawer .plans-dashboard-body {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        min-height: auto;
    }

    .plans-tool-drawer .plans-dashboard-details {
        display: none;
    }

    .plans-tool-drawer .plans-dashboard-card.is-viewing-report .plans-dashboard-details {
        display: block;
    }

    .plans-tool-drawer .plans-dashboard-card.is-viewing-report .plans-dashboard-list {
        display: none;
    }

    .plans-mobile-back-to-list {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 0.85rem;
        border-radius: 999px;
        border: 1px solid var(--t-border-strong);
        background: rgba(15, 23, 42, 0.6);
        color: var(--plans-text);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 0.75rem;
    }

    .plans-tool-drawer .plans-dashboard-details-toolbar #reportsDashboardDetailsClose {
        display: none;
    }

    .plans-tool-drawer .plans-dashboard-collapse {
        display: none;
    }

    /* Hide nav items not relevant in session */
    body.plans-body:not(.plans-landing-page) .app-nav-case-studies,
    body.plans-body:not(.plans-landing-page) .app-nav-launch {
        display: none !important;
    }

    body.plans-body .app-main {
        padding: 0 clamp(0.65rem, 3vw, 1.1rem) clamp(1.1rem, 4vw, 1.6rem);
    }

    /* ---------- Floating viewer (fullscreen on vertical monitors) ---------- */
    .plans-viewer-card {
        display: none;
    }

    .plans-viewer-card.is-floating {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2100;
        transform: translateX(110%);
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
        background: linear-gradient(155deg, rgba(10, 12, 26, 0.99), rgba(4, 6, 14, 0.99));
        border-radius: 0;
        border: none;
        padding: 0;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65);
        overflow: hidden;
        isolation: auto;
    }

    .plans-viewer-card.is-floating::after {
        display: none;
    }

    .plans-viewer-card.is-floating.is-open {
        transform: translateX(0);
        opacity: 1;
    }

    .plans-viewer-card.is-floating .plans-viewer-header {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--t-border-medium);
        background: rgba(6, 8, 18, 0.98);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .plans-viewer-card.is-floating .plans-viewer-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0.75rem;
        background: rgba(3, 4, 10, 0.65);
        min-height: 0;
        overflow: hidden;
    }

    .plans-viewer-card.is-floating .plans-main-viewer-shell {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .plans-viewer-card.is-floating .plans-viewer-stage,
    .plans-viewer-card.is-floating .plans-viewer-pdf-shell,
    .plans-viewer-card.is-floating .plans-viewer-pdf-frame {
        min-height: 0;
        max-height: none;
        height: 100%;
    }

    .plans-viewer-card.is-floating .plans-session-meta-summary > span {
        background-color: var(--t-surface-input);
    }

    /* Viewer handle — hidden on mid-width, users access via hamburger menu */
    .plans-viewer-handle,
    .plans-viewer-handle.is-visible {
        display: none !important;
    }
}

/* =========================================
   Daily Log Dashboard Styles
   ========================================= */

.plans-dailylog-card {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    min-height: 0;
    position: relative;
    padding: clamp(1.2rem, 2vw, 2.1rem);
    border: 1px solid var(--t-border);
    border-radius: var(--plans-radius-lg);
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    isolation: isolate;
    flex: 1;
}

.plans-dailylog-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.plans-dailylog-card > * {
    position: relative;
    z-index: 1;
}

.plans-dailylog-card[hidden] {
    display: none !important;
}

.plans-dailylog-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.plans-dailylog-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.plans-dailylog-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* =====================================================
   UNIFIED DATE BAR - Clean date navigation component
   ===================================================== */
.plans-dailylog-datebar {
    display: flex;
    align-items: center;
    background-color: var(--t-surface-soft);
    border: 1px solid var(--t-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Arrow buttons (prev/next) */
.plans-dailylog-datebar-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    color: var(--t-text-tertiary);
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plans-dailylog-datebar-arrow:hover {
    background-color: var(--t-surface-input);
    color: var(--t-text);
}

.plans-dailylog-datebar-arrow:active {
    background-color: var(--t-tab-active-bg);
}

/* Main date display button (clickable for calendar) */
.plans-dailylog-datebar-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex: 1;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-left: 1px solid var(--t-border);
    border-right: 1px solid var(--t-border);
    color: var(--t-text);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plans-dailylog-datebar-main:hover {
    background-color: var(--t-border-subtle);
}

.plans-dailylog-datebar-icon {
    flex-shrink: 0;
    color: var(--plans-accent, #ffc955);
    opacity: 0.9;
}

.plans-dailylog-datebar-label {
    font-weight: 600;
    color: var(--t-text);
    letter-spacing: 0.02em;
}

.plans-dailylog-datebar-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
}

.plans-dailylog-datebar-date {
    color: var(--t-text-tertiary);
    font-size: 0.95rem;
}

/* Today quick button */
.plans-dailylog-datebar-today {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--plans-accent, #ffc955);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plans-dailylog-datebar-today:hover {
    background: rgba(255, 201, 85, 0.1);
    color: var(--t-text);
}

/* Hidden native date picker */
.plans-dailylog-date-hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Summary Stats */
.plans-dailylog-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .plans-dailylog-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

.plans-dailylog-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background-color: var(--t-surface-soft);
    border: 1px solid var(--t-border);
    border-radius: 16px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.plans-dailylog-stat:hover {
    background-color: var(--t-border-subtle);
    transform: translateY(-2px);
}

.plans-dailylog-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 201, 85, 0.1);
    color: var(--plans-accent, #ffc955);
    flex-shrink: 0;
}

.plans-dailylog-stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.plans-dailylog-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
}

.plans-dailylog-stat-label {
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Entries List */
.plans-dailylog-entries {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.plans-dailylog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    gap: 0.75rem;
}

.plans-dailylog-empty-icon {
    font-size: 3rem;
    opacity: 0.5;
}

.plans-dailylog-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--t-text-secondary);
}

.plans-dailylog-empty-hint {
    font-size: 0.9rem;
    color: var(--t-text-tertiary);
}

/* Entry Card */
.plans-dailylog-entry {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background-color: var(--t-surface-soft);
    border: 1px solid var(--t-border);
    border-radius: 16px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.plans-dailylog-entry::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--plans-accent, #ffc955);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.plans-dailylog-entry:hover {
    background-color: var(--t-border-subtle);
    border-color: var(--t-border-medium);
    transform: translateY(-2px);
}

.plans-dailylog-entry:hover::before {
    opacity: 1;
}

.plans-dailylog-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.plans-dailylog-entry-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.plans-dailylog-entry-time {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--t-text-tertiary);
}

.plans-dailylog-entry-category {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
    background: rgba(255, 201, 85, 0.1);
    color: var(--plans-accent, #ffc955);
    letter-spacing: 0.02em;
}

.plans-dailylog-entry-category svg {
    width: 14px;
    height: 14px;
}

.plans-dailylog-entry-actions {
    display: flex;
    gap: 0.35rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.plans-dailylog-entry:hover .plans-dailylog-entry-actions {
    opacity: 1;
}

.plans-dailylog-entry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--plans-radius-sm);
    background-color: var(--t-surface-hover);
    color: var(--t-text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.plans-dailylog-entry-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--t-text);
}

.plans-dailylog-entry-btn--delete:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--t-error);
}

.plans-dailylog-entry-content {
    font-size: 0.95rem;
    color: var(--t-text);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.plans-dailylog-entry-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--t-text-tertiary);
    padding-top: 1rem;
    border-top: 1px solid var(--t-border);
}

.plans-dailylog-entry-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.plans-dailylog-entry-tag svg {
    width: 16px;
    height: 16px;
    color: var(--t-text-tertiary);
}

/* Entry Form Modal */
.plans-dailylog-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.plans-dailylog-modal.is-open {
    display: flex;
}

.plans-dailylog-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.plans-dailylog-modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid var(--t-border-medium);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.plans-dailylog-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--t-border);
}

.plans-dailylog-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--t-text);
    letter-spacing: -0.01em;
}

.plans-dailylog-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--t-text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.plans-dailylog-modal-close:hover {
    background-color: var(--t-tab-active-bg);
    color: var(--t-text);
    transform: rotate(90deg);
}

.plans-dailylog-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
}

.plans-dailylog-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plans-dailylog-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--t-text-secondary);
    letter-spacing: 0.02em;
}

.plans-dailylog-input,
.plans-dailylog-textarea,
.plans-dailylog-select {
    padding: 0.875rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--t-border-medium);
    border-radius: 12px;
    color: var(--t-text);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.plans-dailylog-input:focus,
.plans-dailylog-textarea:focus,
.plans-dailylog-select:focus {
    outline: none;
    border-color: var(--plans-accent, #ffc955);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(255, 201, 85, 0.1);
}

.plans-dailylog-textarea {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}

.plans-dailylog-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.plans-dailylog-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 500px) {
    .plans-dailylog-field-row {
        grid-template-columns: 1fr;
    }
}

.plans-dailylog-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--t-border);
    background: rgba(0, 0, 0, 0.2);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

/* Daily Log Voice Input */
.plans-dailylog-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.plans-dailylog-voice-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 201, 85, 0.1);
    border: 1px solid rgba(255, 201, 85, 0.2);
    border-radius: 8px;
    color: var(--plans-accent, #ffc955);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plans-dailylog-voice-btn:hover {
    background: rgba(255, 201, 85, 0.15);
    border-color: rgba(255, 201, 85, 0.3);
    transform: translateY(-1px);
}

.plans-dailylog-voice-btn[data-state="listening"] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--t-error);
    animation: dailylog-voice-pulse 1.5s ease-in-out infinite;
}

@keyframes dailylog-voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.plans-dailylog-voice-btn[data-state="error"] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--t-error);
}

.plans-dailylog-voice-btn[data-state="unsupported"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.plans-dailylog-voice-icon {
    flex-shrink: 0;
}

.plans-dailylog-voice-label-text {
    white-space: nowrap;
}

.plans-dailylog-textarea-wrap {
    position: relative;
}

.plans-dailylog-voice-visualizer {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--plans-radius-sm);
}

.plans-dailylog-voice-visualizer[hidden] {
    display: none;
}

/* =====================================================
   TIME TRACKER SECTION
   ===================================================== */
.plans-dailylog-timetracker {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--t-border);
    border-radius: var(--plans-radius-md, 16px);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plans-dailylog-timetracker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.plans-dailylog-timetracker-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--t-text);
    margin: 0;
    font-family: var(--plans-font);
}

.plans-dailylog-timetracker-title svg {
    color: rgba(255, 201, 85, 0.8);
    flex-shrink: 0;
}

.plans-dailylog-timetracker-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Timer Buttons */
.plans-dailylog-timer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--plans-font);
}

.plans-dailylog-timer-btn--start {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: var(--t-text);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}
.plans-dailylog-timer-btn--start:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
    transform: translateY(-1px);
}

.plans-dailylog-timer-btn--stop {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: var(--t-text);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.plans-dailylog-timer-btn--stop:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.plans-dailylog-timer-btn--manual {
    background-color: var(--t-surface-hover);
    color: rgba(246, 247, 255, 0.8);
    border: 1px solid var(--t-border-medium);
}
.plans-dailylog-timer-btn--manual:hover {
    background-color: var(--t-surface-active);
    color: var(--t-text);
    border-color: var(--t-border-accent);
}

.plans-dailylog-timer-btn[hidden] { display: none; }

/* Active Timer Bar */
.plans-dailylog-active-timer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 12px;
    animation: timerGlow 2s ease-in-out infinite;
}

@keyframes timerGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(34, 197, 94, 0.15); }
}

.plans-dailylog-active-timer[hidden] { display: none; }

.plans-dailylog-active-timer-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--t-success);
    flex-shrink: 0;
    animation: timerPulse 1.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.plans-dailylog-active-timer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.plans-dailylog-active-timer-label {
    font-size: 0.6875rem;
    color: rgba(34, 197, 94, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-family: var(--plans-font);
}

.plans-dailylog-active-timer-task {
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    color: var(--t-text);
    font-size: 0.875rem;
    font-family: var(--plans-font);
    padding: 0.15rem 0;
    outline: none;
    width: 100%;
}
.plans-dailylog-active-timer-task::placeholder {
    color: var(--t-text-tertiary);
}
.plans-dailylog-active-timer-task:focus {
    border-bottom-color: rgba(34, 197, 94, 0.5);
}

.plans-dailylog-active-timer-clock {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--t-success-text);
    font-family: var(--plans-font);
    flex-shrink: 0;
}

/* Time Log List */
.plans-dailylog-timelogs {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.plans-dailylog-timelogs-empty {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--t-text-tertiary);
    padding: 1.5rem 0.5rem;
    font-family: var(--plans-font);
}

/* Individual Time Log Row */
.plans-dailylog-tl-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--t-border-subtle);
    transition: background 0.15s;
}
.plans-dailylog-tl-row:last-child { border-bottom: none; }
.plans-dailylog-tl-row:hover {
    background-color: var(--t-surface-soft);
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 8px;
}

.plans-dailylog-tl-left {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    flex: 1;
    min-width: 0;
}

.plans-dailylog-tl-cat {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.plans-dailylog-tl-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.plans-dailylog-tl-task {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--t-text);
    font-family: var(--plans-font);
}

.plans-dailylog-tl-meta {
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    font-family: var(--plans-font);
}

.plans-dailylog-tl-notes {
    font-size: 0.8125rem;
    color: var(--t-text-tertiary);
    font-family: var(--plans-font);
    margin-top: 0.15rem;
    line-height: 1.4;
}

/* Time Log Photos */
.plans-dailylog-tl-photos {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

.plans-dailylog-tl-photo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid var(--t-border-medium);
    transition: all 0.15s;
}
.plans-dailylog-tl-photo:hover {
    border-color: rgba(255, 201, 85, 0.4);
    transform: scale(1.05);
}

/* Time Log Action Buttons */
.plans-dailylog-tl-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.5;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.plans-dailylog-tl-row:hover .plans-dailylog-tl-actions {
    opacity: 1;
}

.plans-dailylog-tl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background-color: var(--t-surface-input);
    color: var(--t-text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
}
.plans-dailylog-tl-btn:hover {
    background-color: var(--t-tab-active-bg);
    color: var(--t-text);
}
.plans-dailylog-tl-btn--delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--t-error);
}

/* Photo Lightbox */
.plans-dailylog-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.plans-dailylog-photo-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}
.plans-dailylog-photo-lightbox-img {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
}

/* Stat icon SVG color */
.plans-dailylog-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.plans-dailylog-stat-icon svg {
    color: rgba(255, 201, 85, 0.7);
}

/* Daily Log Tab Styling */
.plans-workspace-tab--dailylog {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.plans-workspace-tab--dailylog .plans-workspace-tab-icon {
    /* SVG icon — no font-size needed */
}

/* Desktop mode for daily log */
.plans-session-grid.is-dailylog-mode {
    grid-template-columns: minmax(0, 1fr);
}

.plans-session-grid.is-dailylog-mode .plans-primary-column,
.plans-session-grid.is-dailylog-mode .plans-chat-card {
    grid-column: auto;
}

@media (min-width: 900px) {
    .plans-session-grid.is-viewer-collapsed.is-dailylog-mode {
        grid-template-columns: minmax(0, var(--plans-left-col, 1.05fr)) auto minmax(0, var(--plans-right-col, 0.95fr));
        justify-items: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-dailylog-mode .plans-chat-card {
        grid-column: 3;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-dailylog-mode .plans-primary-column {
        grid-column: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
}

/* =====================================================
   MOBILE DAILY LOG - Premium Dark Theme
   ===================================================== */
@media (max-width: 768px) {
    /* Minimize drawer padding for dailylog */
    .plans-tool-drawer[data-tool-drawer="dailylog"] > section {
        padding-top: 0.25rem !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0 !important;
    }

    /* Main card - no padding, fills drawer */
    .plans-tool-drawer .plans-dailylog-card {
        background: rgb(8, 12, 24);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0.5rem;
        gap: 0.5rem;
        margin: 0;
    }

    /* Hide gradient overlay on mobile */
    .plans-tool-drawer .plans-dailylog-card::after {
        display: none;
    }

    /* Header row - date and button inline, super compact */
    .plans-dailylog-header-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.35rem;
        margin: 0;
        padding: 0;
    }

    /* Date bar - minimal inline style, no background box */
    .plans-dailylog-datebar {
        flex: 1;
        display: flex;
        align-items: center;
        background: transparent;
        border: none;
        border-radius: 0;
        height: auto;
        overflow: visible;
    }

    .plans-dailylog-datebar-arrow {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
        color: var(--t-text-tertiary);
        background: transparent;
        border-radius: 4px;
    }

    .plans-dailylog-datebar-arrow:hover {
        background-color: var(--t-tab-active-bg);
        color: var(--t-text);
    }

    .plans-dailylog-datebar-main {
        padding: 0.2rem 0.3rem;
        font-size: 0.75rem;
        gap: 0.2rem;
        border: none;
    }

    .plans-dailylog-datebar-icon {
        display: none;
    }

    .plans-dailylog-datebar-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--t-text);
    }

    .plans-dailylog-datebar-sep,
    .plans-dailylog-datebar-date {
        display: none;
    }

    .plans-dailylog-datebar-today {
        padding: 0.2rem 0.5rem;
        font-size: 0.65rem;
        font-weight: 600;
        background: rgba(59, 130, 246, 0.2);
        border: none;
        border-radius: 4px;
    }

    /* New Entry button - compact accent style */
    .plans-dailylog-header-actions .plans-btn {
        padding: 0.45rem 0.7rem;
        font-size: 0.75rem;
        border-radius: 6px;
        background: rgba(255, 201, 85, 0.1);
        color: var(--plans-accent, #ffc955);
        border: 1px solid rgba(255, 201, 85, 0.2);
        box-shadow: none;
    }

    /* Stats row - horizontal mini badges */
    .plans-dailylog-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        grid-template-columns: none;
    }

    .plans-dailylog-stat {
        flex: 1 1 calc(25% - 0.3rem);
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.4rem 0.35rem;
        background-color: var(--t-surface-soft);
        border: 1px solid var(--t-border);
        border-radius: 8px;
    }

    .plans-dailylog-stat-icon {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background: transparent;
        flex-shrink: 0;
    }

    .plans-dailylog-stat-content {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 0.2rem;
        min-width: 0;
    }

    .plans-dailylog-stat-value {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--t-text);
    }

    .plans-dailylog-stat-label {
        font-size: 0.55rem;
        color: var(--t-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Body container - maximize entries space */
    .plans-dailylog-body {
        flex: 1;
        min-height: 0;
        gap: 0.5rem;
    }

    /* Entries list - scrollable area */
    .plans-dailylog-entries {
        flex: 1;
        min-height: 0;
        max-height: none;
        gap: 0.5rem;
    }

    /* Entry cards - clean dark style */
    .plans-dailylog-entry {
        padding: 1rem;
        background-color: var(--t-surface-soft);
        border: 1px solid var(--t-border);
        border-radius: 12px;
        gap: 0.5rem;
    }

    .plans-dailylog-entry:hover {
        border-color: var(--t-border-medium);
    }

    .plans-dailylog-entry-header {
        gap: 0.5rem;
    }

    .plans-dailylog-entry-actions {
        opacity: 1;
    }

    .plans-dailylog-entry-category {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
    }

    .plans-dailylog-entry-time {
        font-size: 0.75rem;
    }

    .plans-dailylog-entry-content {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Empty state */
    .plans-dailylog-empty {
        background-color: var(--t-surface-soft);
        border: 1px dashed rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 2rem 1rem;
    }

    .plans-dailylog-empty-icon {
        font-size: 2.5rem;
        opacity: 0.4;
    }

    .plans-dailylog-empty-title {
        font-size: 0.95rem;
        color: var(--t-text-secondary);
    }

    .plans-dailylog-empty-hint {
        font-size: 0.8rem;
        color: var(--t-text-tertiary);
    }

    /* Modal adjustments */
    .plans-dailylog-modal-content {
        max-height: 85vh;
        background: rgba(15, 23, 42, 0.98);
        border-radius: 20px;
    }

    /* --- Mobile Time Tracker --- */
    .plans-dailylog-timetracker {
        padding: 0.75rem;
        gap: 0.5rem;
        border-radius: 10px;
    }

    .plans-dailylog-timetracker-header {
        gap: 0.5rem;
    }

    .plans-dailylog-timetracker-title {
        font-size: 0.8125rem;
    }

    .plans-dailylog-timer-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .plans-dailylog-active-timer {
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
        border-radius: 10px;
        flex-wrap: wrap;
    }

    .plans-dailylog-active-timer-clock {
        font-size: 1.25rem;
    }

    .plans-dailylog-tl-row {
        gap: 0.5rem;
        padding: 0.6rem 0;
    }

    .plans-dailylog-tl-actions {
        opacity: 1;
    }

    .plans-dailylog-tl-photo {
        width: 40px;
        height: 40px;
        border-radius: 6px;
    }
}

/* =========================================================
   MOBILE SHEET NAVIGATION
   ========================================================= */

/* Hide mobile sheet nav by default (visible only on mobile) */
.plans-mobile-sheet-nav {
    display: none;
}

.plans-mobile-sheet-drawer {
    display: none;
}

.plans-mobile-sheet-scrim {
    display: none;
}

/* Mobile-only styles */
@media (max-width: 768px) {
    .plans-mobile-sheet-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: linear-gradient(135deg, rgba(20, 30, 60, 0.95), rgba(10, 18, 40, 0.98));
        border-top: 1px solid rgba(136, 178, 255, 0.3);
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 20;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .plans-mobile-sheet-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        border: 1px solid rgba(136, 178, 255, 0.4);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(30, 50, 100, 0.8), rgba(20, 35, 70, 0.9));
        color: var(--t-text);
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .plans-mobile-sheet-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, rgba(50, 80, 140, 0.9), rgba(30, 50, 100, 0.95));
        border-color: rgba(136, 178, 255, 0.6);
    }

    .plans-mobile-sheet-btn:active:not(:disabled) {
        transform: scale(0.95);
        background: linear-gradient(135deg, rgba(70, 110, 180, 0.95), rgba(40, 60, 120, 1));
    }

    .plans-mobile-sheet-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .plans-mobile-sheet-picker {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        min-width: 100px;
        height: 44px;
        padding: 0 1rem;
        border: 1px solid rgba(255, 201, 85, 0.5);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(60, 40, 20, 0.8), rgba(40, 28, 12, 0.9));
        color: var(--t-accent);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .plans-mobile-sheet-picker:hover {
        background: linear-gradient(135deg, rgba(80, 55, 25, 0.9), rgba(60, 42, 18, 0.95));
        border-color: rgba(255, 201, 85, 0.7);
    }

    .plans-mobile-sheet-picker:active {
        transform: scale(0.97);
    }

    .plans-mobile-sheet-current {
        color: var(--t-text);
    }

    .plans-mobile-sheet-sep {
        opacity: 0.6;
    }

    .plans-mobile-sheet-total {
        opacity: 0.8;
    }

    /* Sheet Drawer */
    .plans-mobile-sheet-drawer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 60vh;
        background: linear-gradient(180deg, rgba(20, 30, 55, 0.98), rgba(12, 18, 35, 0.99));
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-top: 1px solid rgba(136, 178, 255, 0.4);
        transform: translateY(100%);
        transition: transform 0.3s ease;
        z-index: 1100;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .plans-mobile-sheet-drawer.is-open {
        transform: translateY(0);
    }

    .plans-mobile-sheet-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgba(136, 178, 255, 0.2);
        background: rgba(15, 22, 45, 0.9);
    }

    .plans-mobile-sheet-drawer-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--t-text);
    }

    .plans-mobile-sheet-drawer-close {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 8px;
        background-color: var(--t-tab-active-bg);
        color: var(--t-text);
        font-size: 1.25rem;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .plans-mobile-sheet-drawer-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .plans-mobile-sheet-list {
        list-style: none;
        margin: 0;
        padding: 0.5rem 0;
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
    }

    .plans-mobile-sheet-list li {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
        color: var(--t-text);
        cursor: pointer;
        transition: background 0.15s ease;
        border-bottom: 1px solid var(--t-border-subtle);
    }

    .plans-mobile-sheet-list li:hover {
        background: rgba(136, 178, 255, 0.15);
    }

    .plans-mobile-sheet-list li.is-active {
        background: rgba(255, 201, 85, 0.15);
        color: var(--t-accent);
        font-weight: 600;
    }

    .plans-mobile-sheet-list li:last-child {
        border-bottom: none;
    }

    /* Scrim */
    .plans-mobile-sheet-scrim {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1050;
        display: block;
    }

    .plans-mobile-sheet-scrim.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Fullscreen button */
    .plans-mobile-sheet-fullscreen {
        margin-left: auto;
    }

    .plans-mobile-sheet-fullscreen .fullscreen-collapse {
        display: none;
    }

    .plans-mobile-sheet-fullscreen .fullscreen-expand {
        display: inline;
        font-size: 1.2rem;
    }

    /* Fullscreen mode for viewer */
    .plans-viewer-card.is-fullscreen {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #000 !important;
        display: block !important;
        overflow: hidden !important;
    }

    .plans-viewer-card.is-fullscreen .plans-viewer-header {
        display: none !important;
    }

    .plans-viewer-card.is-fullscreen .plans-viewer-body {
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    .plans-viewer-card.is-fullscreen .plans-main-viewer-shell {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    .plans-viewer-card.is-fullscreen .plans-main-viewer {
        height: 100% !important;
        width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .plans-viewer-card.is-fullscreen .plans-main-viewer::after {
        display: none !important;
    }

    .plans-viewer-card.is-fullscreen .plans-viewer-stage {
        height: 100% !important;
        width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #000 !important;
        overflow: hidden !important;
    }

    .plans-viewer-card.is-fullscreen .plans-viewer-pdf-shell {
        height: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .plans-viewer-card.is-fullscreen .plans-viewer-pdf-frame {
        height: 100% !important;
        width: 100% !important;
        touch-action: auto !important;
        border: none !important;
    }

    .plans-viewer-card.is-fullscreen .plans-rotate-hint {
        display: none !important;
    }

    .plans-viewer-card.is-fullscreen .plans-viewer-pdf-actions {
        display: none !important;
    }

    .plans-viewer-card.is-fullscreen .plans-mobile-sheet-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100000 !important;
        background: linear-gradient(135deg, rgba(10, 18, 35, 0.95), rgba(5, 10, 25, 0.98)) !important;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    }

    .plans-viewer-card.is-fullscreen .plans-mobile-sheet-fullscreen .fullscreen-expand {
        display: none;
    }

    .plans-viewer-card.is-fullscreen .plans-mobile-sheet-fullscreen .fullscreen-collapse {
        display: inline;
        font-size: 1.1rem;
    }

    /* Lock body scroll when fullscreen — allow touch on iframe for PDF page scrolling */
    body.plans-viewer-fullscreen {
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
        touch-action: manipulation !important;
    }

    /* Rotate button styling */
    .plans-mobile-sheet-rotate {
        font-size: 1.2rem !important;
        font-weight: bold;
    }

    .plans-mobile-sheet-rotate.is-rotated {
        background: linear-gradient(135deg, #ffc955 0%, #e6a832 100%) !important;
        color: #1a1a1a !important;
        box-shadow: 0 0 12px rgba(255, 201, 85, 0.4) !important;
    }

    /* Rotated view for portrait mode */
    .plans-viewer-pdf-shell.is-rotated {
        transform: rotate(90deg);
        transform-origin: center center;
        /* Swap dimensions for proper fit */
        width: 100vh !important;
        height: 100vw !important;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50vh;
        margin-top: -50vw;
    }

    .plans-viewer-card.is-fullscreen .plans-viewer-pdf-shell.is-rotated {
        /* In fullscreen, fill the rotated space */
        width: calc(100vh - 60px) !important; /* Leave room for nav */
        height: 100vw !important;
        margin-left: calc(-50vh + 30px);
        margin-top: -50vw;
    }

    .plans-viewer-pdf-shell.is-rotated .plans-viewer-pdf-frame {
        width: 100%;
        height: 100%;
    }

    /* Hide rotate hint when view is rotated */
    .plans-viewer-card.is-rotated .plans-rotate-hint {
        display: none !important;
    }
}

/* =====================================================
   PHASE GATES DASHBOARD
   ===================================================== */

/* Phase Gates Card */
.plans-phasegates-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.plans-phasegates-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.plans-phasegates-header-actions {
    flex-shrink: 0;
}

.plans-phasegates-principle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: var(--border-radius-md);
}

.plans-phasegates-principle-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #92400e;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    white-space: nowrap;
}

.plans-phasegates-principle-text {
    font-size: 0.8125rem;
    color: #92400e;
}

/* Phase Gates Body */
.plans-phasegates-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.plans-phasegates-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Empty State */
.plans-phasegates-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.plans-phasegates-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.plans-phasegates-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}

.plans-phasegates-empty-hint {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Gate Card */
.plans-phasegates-gate {
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.plans-phasegates-gate:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.plans-phasegates-gate + .plans-phasegates-gate {
    margin-top: -1px;
}

/* Gate Header */
.plans-phasegates-gate-header {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
}

.plans-phasegates-gate-number {
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.875rem;
    color: white;
    flex-shrink: 0;
}

.plans-phasegates-gate-num {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.plans-phasegates-gate-label {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.125rem;
    opacity: 0.9;
}

.plans-phasegates-gate-info {
    flex: 1;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.plans-phasegates-gate-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-phasegates-gate-description {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.plans-phasegates-gate-status {
    padding: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.plans-phasegates-gate-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    flex-shrink: 0;
}

.plans-phasegates-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.plans-phasegates-action-btn:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.plans-phasegates-action-btn--danger:hover {
    background: #fef2f2;
    color: var(--color-error);
}

/* Status Badge */
.plans-phasegates-status-badge {
    padding: 0.3125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.plans-phasegates-status-badge--executed {
    background: #dcfce7;
    color: var(--t-success-text);
    border: 1px solid #86efac;
}

.plans-phasegates-status-badge--pending {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.plans-phasegates-status-badge--locked {
    background: #fee2e2;
    color: var(--t-error);
    border: 1px solid #fca5a5;
}

.plans-phasegates-status-badge--not-started {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

/* Gate Body */
.plans-phasegates-gate-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-bg-alt);
}

/* Scope Sections */
.plans-phasegates-scope {
    padding: 0.75rem;
    border-radius: var(--border-radius-md);
    background: var(--color-bg);
}

.plans-phasegates-scope--authorized {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

.plans-phasegates-scope--not-authorized {
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.plans-phasegates-scope--responsibility {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
}

.plans-phasegates-scope-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.plans-phasegates-scope-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.plans-phasegates-scope--authorized .plans-phasegates-scope-icon { color: #16a34a; }
.plans-phasegates-scope--not-authorized .plans-phasegates-scope-icon { color: #dc2626; }
.plans-phasegates-scope--responsibility .plans-phasegates-scope-icon { color: #2563eb; }

.plans-phasegates-scope-title {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 1;
}

.plans-phasegates-scope--authorized .plans-phasegates-scope-title { color: var(--t-success-text); }
.plans-phasegates-scope--not-authorized .plans-phasegates-scope-title { color: var(--t-error); }
.plans-phasegates-scope--responsibility .plans-phasegates-scope-title { color: #1e40af; }

.plans-phasegates-scope-add {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.plans-phasegates-scope-add:hover {
    background: rgba(0, 0, 0, 0.15);
}

.plans-phasegates-scope-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.plans-phasegates-scope-list li {
    font-size: 0.75rem;
    color: var(--color-text);
    padding-left: 0.75rem;
    position: relative;
    line-height: 1.4;
}

.plans-phasegates-scope-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.plans-phasegates-scope--authorized .plans-phasegates-scope-list li::before { background: var(--t-success); }
.plans-phasegates-scope--not-authorized .plans-phasegates-scope-list li::before { background: #ef4444; }
.plans-phasegates-scope--responsibility .plans-phasegates-scope-list li::before { background: #3b82f6; }

.plans-phasegates-scope-empty {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.plans-phasegates-scope-empty::before {
    display: none;
}

/* Connectors & Dividers */
.plans-phasegates-connector {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0;
    position: relative;
}

.plans-phasegates-connector-line {
    width: 3px;
    height: 20px;
    background: var(--color-border);
    border-radius: 2px;
}

.plans-phasegates-connector-arrow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-border);
}

.plans-phasegates-divider {
    padding: 0.75rem 0;
    text-align: center;
    position: relative;
}

.plans-phasegates-divider-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--color-border);
}

.plans-phasegates-divider-text {
    position: relative;
    display: inline-block;
    background: var(--color-bg);
    padding: 0.25rem 0.875rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
}

.plans-phasegates-divider-text--dirt {
    background: #dcfce7;
    border-color: #86efac;
    color: var(--t-success-text);
}

.plans-phasegates-divider-text--final {
    background: #fee2e2;
    border-color: #fca5a5;
    color: var(--t-error);
}

/* Modal */
.plans-phasegates-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.plans-phasegates-modal {
    background: var(--color-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
}

.plans-phasegates-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.plans-phasegates-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
}

.plans-phasegates-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.plans-phasegates-modal-close:hover {
    background: var(--color-bg-alt);
}

.plans-phasegates-modal-form {
    padding: 1.25rem;
}

.plans-phasegates-form-group {
    margin-bottom: 1rem;
}

.plans-phasegates-form-group:last-of-type {
    margin-bottom: 1.5rem;
}

.plans-phasegates-form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}

.plans-phasegates-form-input,
.plans-phasegates-form-textarea,
.plans-phasegates-form-select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.plans-phasegates-form-input:focus,
.plans-phasegates-form-textarea:focus,
.plans-phasegates-form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.plans-phasegates-form-textarea {
    resize: vertical;
    min-height: 60px;
}

.plans-phasegates-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Phase Gates Tab Styling */
.plans-workspace-tab--phasegates {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.plans-workspace-tab--phasegates .plans-workspace-tab-icon {
    /* SVG icon — no font-size needed */
}

/* Desktop mode for phase gates */
.plans-session-grid.is-phasegates-mode {
    grid-template-columns: minmax(0, 1fr);
}

.plans-session-grid.is-phasegates-mode .plans-primary-column,
.plans-session-grid.is-phasegates-mode .plans-chat-card {
    grid-column: auto;
}

@media (min-width: 900px) {
    .plans-session-grid.is-viewer-collapsed.is-phasegates-mode {
        grid-template-columns: minmax(0, var(--plans-left-col, 1.05fr)) auto minmax(0, var(--plans-right-col, 0.95fr));
        justify-items: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-phasegates-mode .plans-chat-card {
        grid-column: 3;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .plans-session-grid.is-viewer-collapsed.is-phasegates-mode .plans-primary-column {
        grid-column: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
}

/* Mobile Phase Gates */
@media (max-width: 768px) {
    .plans-tool-drawer[data-tool-drawer="phasegates"] > section {
        padding-top: 0.25rem !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0 !important;
    }

    .plans-tool-drawer .plans-phasegates-card {
        background: rgb(8, 12, 24);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0.5rem;
        gap: 0.5rem;
        margin: 0;
    }

    .plans-phasegates-gate-body {
        grid-template-columns: 1fr;
    }

    .plans-phasegates-gate-header {
        flex-wrap: wrap;
    }

    .plans-phasegates-gate-info {
        flex: 1 1 auto;
        min-width: 150px;
    }

    .plans-phasegates-gate-status {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        padding: 0.5rem 1rem;
        border-top: 1px solid var(--color-border);
    }

    .plans-phasegates-gate-actions {
        order: 2;
    }

    .plans-phasegates-principle {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .plans-phasegates-modal {
        max-height: 85vh;
    }
}


/* =========================================
   JobTread Dashboard Styles
   ========================================= */

.plans-jobtread-card {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    min-height: 0;
    position: relative;
    padding: clamp(1.2rem, 2vw, 2.1rem);
    border: 1px solid var(--plans-viewer-border, rgba(148, 163, 184, 0.35));
    border-radius: var(--plans-radius-lg);
    background: var(--reports-gradient);
    box-shadow: var(--reports-shadow);
    overflow: hidden;
    isolation: isolate;
    flex: 1;
}

.plans-jobtread-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.35), transparent 52%),
        radial-gradient(circle at 82% 6%, rgba(168, 85, 247, 0.3), transparent 48%),
        radial-gradient(circle at 80% 88%, rgba(236, 72, 153, 0.28), transparent 45%);
    opacity: 0.75;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
}

.plans-jobtread-card > * {
    position: relative;
    z-index: 1;
}

.plans-jobtread-card[hidden] {
    display: none !important;
}

.plans-jobtread-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.plans-jobtread-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.plans-jobtread-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Connection Status */
.plans-jobtread-status {
    margin-bottom: 0.5rem;
}

.plans-jobtread-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--t-border-medium);
}

.plans-jobtread-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.plans-jobtread-status--loading .plans-jobtread-status-dot {
    background: #fbbf24;
    animation: pulse 1.5s ease-in-out infinite;
}

.plans-jobtread-status--connected .plans-jobtread-status-dot {
    background: var(--t-success);
}

.plans-jobtread-status--error .plans-jobtread-status-dot {
    background: #ef4444;
}

.plans-jobtread-status-text {
    color: var(--t-text);
}

/* Summary Stats */
.plans-jobtread-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.plans-jobtread-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--t-border-medium);
    border-radius: 10px;
}

.plans-jobtread-stat-icon {
    font-size: 1.5rem;
}

.plans-jobtread-stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.plans-jobtread-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--t-text);
    line-height: 1;
}

.plans-jobtread-stat-label {
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Section Headings */
.plans-jobtread-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plans-jobtread-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--t-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.plans-jobtread-section-hint {
    font-size: 0.85rem;
    color: var(--t-text-tertiary);
    margin: 0;
}

/* Jobs List */
.plans-jobtread-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plans-jobtread-job-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--t-border-medium);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.plans-jobtread-job-item:hover {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(99, 102, 241, 0.3);
}

.plans-jobtread-job-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.plans-jobtread-job-number {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(168, 85, 247, 0.9);
    flex-shrink: 0;
}

.plans-jobtread-job-name {
    font-size: 0.9rem;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-jobtread-job-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.plans-jobtread-job-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--t-border-medium);
    border-radius: 6px;
    color: var(--t-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.plans-jobtread-job-action:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: var(--t-text);
}

/* Empty States */
.plans-jobtread-empty,
.plans-jobtread-not-configured {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    gap: 0.75rem;
}

/* Respect hidden attribute - MUST override display: flex */
.plans-jobtread-not-configured[hidden] {
    display: none !important;
}

.plans-jobtread-empty-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.plans-jobtread-empty-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--t-text);
    margin: 0;
}

.plans-jobtread-empty-hint {
    font-size: 0.9rem;
    color: var(--t-text-tertiary);
    margin: 0;
    max-width: 280px;
}

.plans-jobtread-empty-hint a {
    color: rgba(99, 102, 241, 0.9);
    text-decoration: underline;
}

.plans-jobtread-empty-hint a:hover {
    color: var(--t-text);
}

/* Pending Actions */
.plans-jobtread-pending-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Tab Button Styling */
.plans-workspace-tab--jobtread {
    /* Inherit default tab styles */
}

/* Mobile tool drawer adjustments */
@media (max-width: 767px) {
    .plans-tool-drawer .plans-jobtread-card {
        border: none;
        border-radius: 0;
        padding: 1rem;
        min-height: calc(100vh - 120px);
        box-shadow: none;
    }

    .plans-tool-drawer .plans-jobtread-card::after {
        display: none;
    }
    
    .plans-jobtread-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ============================================================================
   JobTread Notifications
   ============================================================================ */

.plans-jobtread-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plans-jobtread-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--t-border-medium);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.plans-jobtread-notification-item:hover {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(99, 102, 241, 0.3);
}

.plans-jobtread-notification--unread {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.plans-jobtread-notification-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--t-tab-active-bg);
    border-radius: 50%;
    color: var(--t-text-secondary);
}

.plans-jobtread-notification-content {
    flex: 1;
    min-width: 0;
}

.plans-jobtread-notification-title {
    font-size: 0.9rem;
    color: var(--t-text);
    line-height: 1.4;
}

.plans-jobtread-notification-title strong {
    font-weight: 600;
    color: rgba(168, 85, 247, 0.9);
}

.plans-jobtread-notification-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    margin-top: 0.25rem;
}

.plans-jobtread-notification-time {
    opacity: 0.7;
}

.plans-jobtread-notification-time::before {
    content: "•";
    margin-right: 0.5rem;
}

.plans-jobtread-notification-unread-dot {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 8px;
    height: 8px;
    background: rgb(99, 102, 241);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Notification badges */
.plans-jobtread-notifications-badge,
.plans-jobtread-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--t-text);
    background: rgb(239, 68, 68);
    border-radius: 9px;
    margin-left: 0.5rem;
}

.plans-jobtread-tab-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    margin-left: 0;
    min-width: 16px;
    height: 16px;
    font-size: 0.65rem;
}

.plans-workspace-tab--jobtread {
    position: relative;
}

/* Section title with badge */
.plans-jobtread-section-title {
    display: flex;
    align-items: center;
}

/* Notification type specific styles */
.plans-jobtread-notification-item[data-event-type="document.signed"] .plans-jobtread-notification-icon {
    background: rgba(34, 197, 94, 0.2);
}

.plans-jobtread-notification-item[data-event-type="document.viewed"] .plans-jobtread-notification-icon {
    background: rgba(99, 102, 241, 0.2);
}

/* Mark all read button */
.plans-jobtread-mark-all-read {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: rgba(99, 102, 241, 0.9);
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: auto;
}

.plans-jobtread-mark-all-read:hover {
    color: var(--t-text);
    text-decoration: underline;
}

/* ============================================================================
   JobTread Enhanced Dashboard Styles
   ============================================================================ */

/* Top Bar */
.plans-jobtread-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--t-border-medium);
}

.plans-jobtread-topbar-actions {
    display: flex;
    gap: 0.5rem;
}

.plans-jobtread-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(99, 102, 241, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 6px;
    color: var(--t-text);
    cursor: pointer;
    transition: all 0.15s ease;
}

.plans-jobtread-icon-btn svg {
    stroke: currentColor;
    width: 16px;
    height: 16px;
}

.plans-jobtread-icon-btn:hover {
    background: rgba(99, 102, 241, 0.5);
    border-color: rgba(99, 102, 241, 0.7);
    color: var(--t-text);
}

.plans-jobtread-icon-btn.is-loading svg {
    animation: spin 1s linear infinite;
}

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

/* Linked Job Banner */
.plans-jobtread-linked-job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
}

.plans-jobtread-linked-job-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.plans-jobtread-linked-job-label {
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    flex-shrink: 0;
}

.plans-jobtread-linked-job-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-jobtread-linked-job-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.plans-jobtread-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(99, 102, 241, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 4px;
    color: var(--t-text);
    cursor: pointer;
    transition: all 0.15s ease;
}

.plans-jobtread-link-btn svg {
    stroke: currentColor;
    width: 14px;
    height: 14px;
}

.plans-jobtread-link-btn:hover {
    background: rgba(99, 102, 241, 0.5);
    border-color: rgba(99, 102, 241, 0.7);
    color: var(--t-text);
}

.plans-jobtread-link-btn--danger {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.4);
    color: rgb(252, 165, 165);
}

.plans-jobtread-link-btn--danger:hover {
    background: rgba(239, 68, 68, 0.4);
    border-color: rgba(239, 68, 68, 0.6);
    color: rgb(254, 202, 202);
}

/* Tab Navigation */
.plans-jobtread-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    margin-top: 0.5rem;
}

.plans-jobtread-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--t-text-tertiary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.plans-jobtread-tab:hover {
    color: var(--t-text);
    background: rgba(255, 255, 255, 0.05);
}

.plans-jobtread-tab.is-active {
    color: var(--t-text);
    background: rgba(99, 102, 241, 0.3);
}

.plans-jobtread-tab svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.plans-jobtread-tab.is-active svg {
    opacity: 1;
}

.plans-jobtread-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--t-text);
    background: rgba(99, 102, 241, 0.8);
    border-radius: 8px;
}

.plans-jobtread-tab-badge--alert {
    background: rgb(239, 68, 68);
}

/* Tab Panels */
.plans-jobtread-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.plans-jobtread-panel {
    display: none;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow-y: auto;
}

.plans-jobtread-panel.is-active {
    display: flex;
}

/* Panel Header with Search */
.plans-jobtread-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
}

.plans-jobtread-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--t-border-medium);
    border-radius: 6px;
}

.plans-jobtread-search:focus-within {
    border-color: rgba(99, 102, 241, 0.5);
}

.plans-jobtread-search-icon {
    flex-shrink: 0;
    color: var(--t-text-tertiary);
}

.plans-jobtread-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--t-text);
    font-size: 0.875rem;
    outline: none;
}

.plans-jobtread-search-input::placeholder {
    color: var(--t-text-tertiary);
}

.plans-jobtread-panel-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    color: var(--t-text);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.plans-jobtread-panel-action:hover {
    background: rgba(99, 102, 241, 0.35);
    border-color: rgba(99, 102, 241, 0.5);
    color: var(--t-text);
}

/* Stats Grid */
.plans-jobtread-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.plans-jobtread-stat-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--t-border-medium);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.plans-jobtread-stat-card--action {
    cursor: pointer;
    border-style: dashed;
}

.plans-jobtread-stat-card--action:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
}

.plans-jobtread-stat-card--action.is-linked {
    border-style: solid;
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.plans-jobtread-stat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
}

.plans-jobtread-stat--jobs { background: rgba(99, 102, 241, 0.2); color: rgb(129, 140, 248); }
.plans-jobtread-stat--customers { background: rgba(168, 85, 247, 0.2); color: rgb(192, 132, 252); }
.plans-jobtread-stat--codes { background: rgba(236, 72, 153, 0.2); color: rgb(244, 114, 182); }
.plans-jobtread-stat--link { background: rgba(34, 197, 94, 0.2); color: rgb(74, 222, 128); }

.plans-jobtread-stat-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.plans-jobtread-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--t-text);
    line-height: 1;
}

.plans-jobtread-stat-value--action {
    font-size: 0.95rem;
    font-weight: 500;
}

.plans-jobtread-stat-label {
    font-size: 0.7rem;
    color: var(--t-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Quick Actions */
.plans-jobtread-quick-actions {
    margin-top: 0.5rem;
}

.plans-jobtread-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.plans-jobtread-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--t-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.plans-jobtread-see-all {
    font-size: 0.75rem;
    color: rgba(99, 102, 241, 0.9);
    background: transparent;
    border: none;
    cursor: pointer;
}

.plans-jobtread-see-all:hover {
    color: var(--t-text);
    text-decoration: underline;
}

.plans-jobtread-action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.plans-jobtread-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.5rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--t-border-medium);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.plans-jobtread-action-card:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.plans-jobtread-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--t-tab-active-bg);
    border-radius: 8px;
    color: var(--t-text-secondary);
}

.plans-jobtread-action-card:hover .plans-jobtread-action-icon {
    background: rgba(99, 102, 241, 0.25);
    color: var(--t-text);
}

.plans-jobtread-action-label {
    font-size: 0.7rem;
    color: var(--t-text-secondary);
    text-align: center;
}

/* Enhanced Job Items */
.plans-jobtread-job-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--t-border-medium);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.plans-jobtread-job-item:hover {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(99, 102, 241, 0.3);
}

.plans-jobtread-job-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
}

.plans-jobtread-job-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plans-jobtread-job-number {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(168, 85, 247, 0.9);
}

.plans-jobtread-job-status {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.plans-jobtread-job-status--active {
    background: rgba(34, 197, 94, 0.2);
    color: rgb(74, 222, 128);
}

.plans-jobtread-job-status--pending {
    background: rgba(251, 191, 36, 0.2);
    color: rgb(251, 191, 36);
}

.plans-jobtread-job-status--completed {
    background: rgba(99, 102, 241, 0.2);
    color: rgb(129, 140, 248);
}

.plans-jobtread-job-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-jobtread-job-customer {
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-jobtread-job-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Customer Items */
.plans-jobtread-customers-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plans-jobtread-customer-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--t-border-medium);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.plans-jobtread-customer-item:hover {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(168, 85, 247, 0.3);
}

.plans-jobtread-customer-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3));
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--t-text);
    flex-shrink: 0;
}

.plans-jobtread-customer-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.plans-jobtread-customer-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-jobtread-customer-email {
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-jobtread-customer-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Activity Items */
.plans-jobtread-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plans-jobtread-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--t-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.plans-jobtread-activity-item:hover {
    background: rgba(15, 23, 42, 0.6);
}

.plans-jobtread-activity-item.is-unread {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
}

.plans-jobtread-activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--t-tab-active-bg);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--t-text-secondary);
}

.plans-jobtread-activity-content {
    flex: 1;
    min-width: 0;
}

.plans-jobtread-activity-title {
    font-size: 0.85rem;
    color: var(--t-text);
    line-height: 1.4;
}

.plans-jobtread-activity-title strong {
    font-weight: 600;
    color: rgb(168, 85, 247);
}

.plans-jobtread-activity-time {
    font-size: 0.7rem;
    color: var(--t-text-tertiary);
    margin-top: 0.25rem;
}

.plans-jobtread-unread-dot {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 6px;
    height: 6px;
    background: rgb(99, 102, 241);
    border-radius: 50%;
}

/* Activity Filter */
.plans-jobtread-activity-filter {
    display: flex;
    gap: 0.25rem;
}

.plans-jobtread-filter-btn {
    padding: 0.35rem 0.65rem;
    background: transparent;
    border: 1px solid var(--t-border-medium);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.plans-jobtread-filter-btn:hover {
    border-color: var(--t-border-accent);
    color: var(--t-text-secondary);
}

.plans-jobtread-filter-btn.is-active {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: var(--t-text);
}

.plans-jobtread-text-btn {
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: none;
    font-size: 0.75rem;
    color: rgba(99, 102, 241, 0.9);
    cursor: pointer;
}

.plans-jobtread-text-btn:hover {
    color: var(--t-text);
    text-decoration: underline;
}

/* Job Detail Slide-over */
.plans-jobtread-detail {
    position: absolute;
    inset: 0;
    background: var(--reports-gradient);
    display: flex;
    flex-direction: column;
    z-index: 10;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.plans-jobtread-detail.is-open {
    transform: translateX(0);
}

.plans-jobtread-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--t-border-medium);
}

.plans-jobtread-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--t-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.plans-jobtread-detail-back:hover {
    color: var(--t-text);
}

.plans-jobtread-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: rgba(99, 102, 241, 0.9);
    text-decoration: none;
}

.plans-jobtread-detail-link:hover {
    color: var(--t-text);
}

.plans-jobtread-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.plans-jobtread-detail-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.plans-jobtread-detail-number {
    font-size: 0.85rem;
    color: rgba(168, 85, 247, 0.9);
    font-weight: 500;
}

.plans-jobtread-detail-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--t-text);
    margin: 0;
}

.plans-jobtread-detail-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.plans-jobtread-detail-customer {
    font-size: 0.875rem;
    color: var(--t-text-secondary);
}

.plans-jobtread-detail-status {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Budget Section */
.plans-jobtread-budget {
    padding: 1rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--t-border-medium);
    border-radius: 10px;
}

/* ═══ File Viewer ══════════════════════════════════════════════════════════ */

/* File Viewer mode: full-height layout */
.plans-session-grid.is-fileviewer-mode .plans-primary-column {
    gap: 0;
    align-self: stretch;
}

.plans-session-grid.is-fileviewer-mode .plans-tool-drawer--fileviewer {
    flex: 1;
    min-height: 0;
}

.plans-session-grid.is-fileviewer-mode .plans-primary-column > .plans-tool-drawer:not(.plans-tool-drawer--fileviewer) {
    display: none;
}

.plans-session-grid.is-budget-mode .plans-primary-column {
    gap: 0;
    align-self: stretch;
}

.plans-session-grid.is-budget-mode .plans-tool-drawer--budget {
    flex: 1;
    min-height: 0;
}

.plans-session-grid.is-budget-mode .plans-primary-column > .plans-tool-drawer:not(.plans-tool-drawer--budget) {
    display: none;
}

.plans-fileviewer-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: var(--plans-card-bg, rgba(15, 23, 42, 0.65));
    border: 1px solid var(--t-border);
    border-top: none;
    border-radius: 0 0 var(--plans-card-radius, 16px) var(--plans-card-radius, 16px);
}
.plans-fileviewer-card:not([hidden]) {
    display: flex;
}

.fileviewer-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Sidebar */
.fileviewer-sidebar {
    width: 220px;
    min-width: 180px;
    max-width: 280px;
    border-right: 1px solid var(--t-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.4);
}

.fileviewer-sidebar-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-text-tertiary);
    padding: 0.75rem 0.85rem 0.5rem;
    margin: 0;
}

.fileviewer-file-list {
    list-style: none;
    margin: 0;
    padding: 0 0.4rem 0.5rem;
    overflow-y: auto;
    flex: 1;
}

.fileviewer-file-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
}

.fileviewer-file-item:hover {
    background-color: var(--t-surface-input);
}

.fileviewer-file-item.is-active {
    background: rgba(99, 102, 241, 0.18);
    color: var(--t-text);
}

.fileviewer-file-icon {
    flex-shrink: 0;
    opacity: 0.6;
}
.fileviewer-file-item.is-active .fileviewer-file-icon {
    opacity: 1;
    color: var(--t-info);
}

.fileviewer-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fileviewer-file-ext {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--t-text-tertiary);
    background-color: var(--t-surface-input);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.fileviewer-delete-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    padding: 0;
}
.fileviewer-file-item:hover .fileviewer-delete-btn {
    opacity: 1;
}
.fileviewer-delete-btn:hover {
    color: var(--t-error);
    background: rgba(248, 113, 113, 0.12);
}

.fileviewer-empty {
    padding: 1.5rem 0.85rem;
    color: var(--t-text-tertiary);
    font-size: 0.82rem;
    text-align: center;
    list-style: none;
}

/* Main viewer area */
.fileviewer-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fileviewer-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--t-border);
    background: rgba(15, 23, 42, 0.3);
}

.fileviewer-toolbar-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--t-text);
}

.fileviewer-toolbar-download {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--t-info);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    transition: background 0.15s;
}
.fileviewer-toolbar-download:hover {
    background: rgba(99, 102, 241, 0.15);
}

.fileviewer-content {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fileviewer-content [hidden] {
    display: none !important;
}

.fileviewer-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.75rem;
    color: var(--t-text-tertiary);
    font-size: 0.88rem;
    text-align: center;
    padding: 2rem;
}

.fileviewer-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--t-surface);
}

.fileviewer-text {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 1rem 1.25rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--t-text);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.fileviewer-unsupported {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.75rem;
    color: var(--t-text-tertiary);
    font-size: 0.88rem;
    text-align: center;
    padding: 2rem;
}

.fileviewer-unsupported-download {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--t-info);
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    transition: background 0.15s;
}
.fileviewer-unsupported-download:hover {
    background: rgba(99, 102, 241, 0.15);
}

/* ── DOCX Editor (Document Filler) ──────────────────────── */

.fileviewer-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fileviewer-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--t-border-medium);
    border-radius: 8px;
    background: transparent;
    color: var(--t-text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.fileviewer-toolbar-btn:hover {
    background-color: var(--t-surface-hover);
    border-color: var(--t-border-accent);
}
.fileviewer-toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.fileviewer-toolbar-btn--ai {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.3);
}
.fileviewer-toolbar-btn--ai:hover {
    background: rgba(167, 139, 250, 0.12);
}
.fileviewer-toolbar-btn--download-filled {
    color: var(--t-success-text);
    border-color: rgba(52, 211, 153, 0.3);
}
.fileviewer-toolbar-btn--download-filled:hover {
    background: rgba(52, 211, 153, 0.12);
}

.fileviewer-docx-editor {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2rem;
    background: #e8e8e8;
}

.docx-editor-blocks {
    max-width: 850px;
    margin: 0 auto;
    background: var(--t-surface);
    padding: 2.5rem 3rem;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.15);
    min-height: 600px;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.docx-loading,
.docx-error,
.docx-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
    font-size: 0.9rem;
}
.docx-error {
    color: #dc2626;
}

/* ── Mammoth HTML Document Styles ───────────────────────── */
.docx-editor-blocks {
    color: var(--t-text);
    font-size: 0.92rem;
    line-height: 1.7;
    outline: none;
}
.docx-editor-blocks p {
    margin: 0 0 0.4em 0;
}
.docx-editor-blocks h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--t-text);
    margin: 1.5em 0 0.5em 0;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid #e5e7eb;
}
.docx-editor-blocks h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--t-text);
    margin: 1.2em 0 0.4em 0;
}
.docx-editor-blocks h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--t-text);
    margin: 1em 0 0.35em 0;
}
.docx-editor-blocks strong {
    font-weight: 600;
}
.docx-editor-blocks em {
    font-style: italic;
    color: #4b5563;
}
.docx-editor-blocks ol,
.docx-editor-blocks ul {
    margin: 0.3em 0 0.5em 1.5em;
    padding: 0;
}
.docx-editor-blocks li {
    margin-bottom: 0.3em;
}
.docx-editor-blocks img {
    max-width: 100%;
    height: auto;
    margin: 0.5em 0;
}

/* Tables inside mammoth HTML */
.docx-editor-blocks table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75em 0;
    font-size: 0.85rem;
    table-layout: auto;
}
.docx-editor-blocks th,
.docx-editor-blocks td {
    border: 1px solid #d1d5db;
    padding: 0.45rem 0.6rem;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.docx-editor-blocks th {
    background: #f3f4f6;
    font-weight: 600;
    color: var(--t-text);
}
.docx-editor-blocks td:empty::before {
    content: '\00a0';
}

/* Checkboxes from DOCX forms */
.docx-editor-blocks input[type="checkbox"] {
    width: 1em;
    height: 1em;
    margin-right: 0.25em;
    accent-color: var(--t-info);
    cursor: pointer;
    vertical-align: middle;
}

/* File viewer loading state */
.fileviewer-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    color: var(--t-text-secondary);
    font-size: 0.85rem;
    list-style: none;
}
.fileviewer-loading .plans-upload-spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
    flex-shrink: 0;
}

/* ── DocFiller animation classes ────────────────────────── */
/* Typing cursor + glow while typewriter is running */
.docfill-typing {
    position: relative;
    background: rgba(99, 102, 241, 0.06);
    box-shadow: inset 3px 0 0 #6366f1;
    border-radius: 2px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.docfill-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: #6366f1;
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: docfill-blink 0.6s steps(1) infinite;
}

@keyframes docfill-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Settle glow after fill completes */
.docfill-done {
    background: rgba(99, 102, 241, 0.10);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
    border-radius: 2px;
    transition: background 2s ease-out, box-shadow 2s ease-out;
}

/* Mobile: stack sidebar on top */
@media (max-width: 899px) {
    .fileviewer-layout {
        flex-direction: column;
    }
    .fileviewer-sidebar {
        width: 100%;
        max-width: none;
        max-height: 160px;
        border-right: none;
        border-bottom: 1px solid var(--t-border);
    }
}

.plans-jobtread-budget-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--t-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
}

.plans-jobtread-budget-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.plans-jobtread-budget-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.plans-jobtread-budget-label {
    font-size: 0.7rem;
    color: var(--t-text-tertiary);
    text-transform: uppercase;
}

.plans-jobtread-budget-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--t-text);
}

.plans-jobtread-budget-value--remaining {
    color: rgb(74, 222, 128);
}

.plans-jobtread-budget-value--remaining.is-negative {
    color: rgb(239, 68, 68);
}

.plans-jobtread-budget-bar {
    height: 6px;
    background-color: var(--t-tab-active-bg);
    border-radius: 3px;
    overflow: hidden;
}

.plans-jobtread-budget-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(99, 102, 241), rgb(168, 85, 247));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.plans-jobtread-budget-bar-fill.is-over {
    background: linear-gradient(90deg, rgb(239, 68, 68), rgb(251, 113, 133));
}

/* Cost Items */
.plans-jobtread-cost-items {
    margin-top: 0.5rem;
}

.plans-jobtread-cost-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.plans-jobtread-cost-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 6px;
}

.plans-jobtread-cost-item-name {
    font-size: 0.85rem;
    color: var(--t-text);
}

.plans-jobtread-cost-item-amount {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--t-text);
}

/* Link Modal */
.plans-jobtread-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
    padding-left: calc(260px + 2rem);
}

.plans-jobtread-modal[hidden] {
    display: none !important;
}

.plans-jobtread-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.plans-jobtread-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    border: 1px solid var(--t-border-medium);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.plans-jobtread-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--t-border-medium);
}

.plans-jobtread-modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--t-text);
    margin: 0;
}

.plans-jobtread-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--t-text-tertiary);
    cursor: pointer;
}

.plans-jobtread-modal-close:hover {
    color: var(--t-text);
}

.plans-jobtread-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plans-jobtread-link-job-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--t-border-medium);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.plans-jobtread-link-job-item:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

.plans-jobtread-link-job-number {
    font-size: 0.75rem;
    color: rgba(168, 85, 247, 0.9);
    flex-shrink: 0;
}

.plans-jobtread-link-job-name {
    flex: 1;
    font-size: 0.9rem;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Modal Footer */
.plans-jobtread-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--t-border-medium);
}

.plans-jobtread-modal-footer .plans-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
}

.plans-jobtread-modal-footer .plans-btn-ghost {
    color: var(--t-text-tertiary);
}

.plans-jobtread-modal-footer .plans-btn-ghost:hover {
    color: var(--t-text);
    background-color: var(--t-tab-active-bg);
}

.plans-jobtread-modal-footer .plans-btn-primary {
    background: linear-gradient(135deg, rgb(99, 102, 241), rgb(168, 85, 247));
    color: var(--t-text);
    border: none;
}

.plans-jobtread-modal-footer .plans-btn-primary:hover {
    filter: brightness(1.1);
}

/* Not Configured */
.plans-jobtread-not-configured {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plans-jobtread-not-configured-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    max-width: 280px;
}

.plans-jobtread-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgb(99, 102, 241), rgb(168, 85, 247));
    border: none;
    border-radius: 8px;
    color: var(--t-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}

.plans-jobtread-connect-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.plans-jobtread-config-hint {
    font-size: 0.8rem;
    color: var(--t-text-tertiary);
    margin-top: 0.5rem;
}


/* =========================================================================
   Budget Builder Styles
   ========================================================================= */

.plans-budget-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    overflow: hidden;
}

.plans-budget-card .plans-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.plans-budget-header-actions {
    flex-shrink: 0;
}

.plans-budget-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--t-border);
    border-radius: 10px;
    background-color: var(--t-surface-soft);
}

.plans-budget-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    white-space: nowrap;
}

.plans-budget-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--t-surface-muted, rgba(15, 23, 42, 0.95));
    color: var(--t-text-secondary);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.55rem 0.65rem;
    text-align: left;
    border-bottom: 2px solid var(--t-border-strong, var(--t-border));
    border-right: 1px solid var(--t-border);
}

.plans-budget-table thead th:last-child {
    border-right: none;
}

.plans-budget-table thead th.budget-col-qty,
.plans-budget-table thead th.budget-col-cost,
.plans-budget-table thead th.budget-col-markup,
.plans-budget-table thead th.budget-col-price,
.plans-budget-table thead th.budget-col-total {
    text-align: right;
}

.plans-budget-table thead th.budget-col-actions {
    width: 32px;
}

.budget-row {
    border-bottom: 1px solid var(--t-border);
    transition: background 0.1s ease;
}

.budget-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.budget-row:hover {
    background: rgba(91, 156, 244, 0.07);
}

.budget-cell {
    padding: 0.5rem 0.65rem;
    color: var(--t-text);
    cursor: default;
    border-right: 1px solid var(--t-border);
}

.budget-cell:last-child {
    border-right: none;
}

.budget-cell[data-field] {
    cursor: cell;
}

.budget-cell[data-field]:hover {
    background: rgba(91, 156, 244, 0.10);
    outline: 1px solid rgba(91, 156, 244, 0.3);
    outline-offset: -1px;
}

.budget-cell--qty,
.budget-cell--cost,
.budget-cell--markup,
.budget-cell--price,
.budget-cell--total {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.budget-cell--total {
    font-weight: 600;
    color: var(--t-text);
}

.budget-cell--cat {
    color: var(--t-text-secondary);
    font-size: 0.78rem;
}

.budget-placeholder {
    color: var(--t-text-tertiary, #999);
    font-style: italic;
    opacity: 0.6;
}

/* Inline editing */
.budget-inline-input,
.budget-inline-select {
    width: 100%;
    padding: 0.3rem 0.4rem;
    font-size: 0.82rem;
    font-family: inherit;
    background-color: var(--t-surface-input);
    color: var(--t-text);
    border: 1px solid rgba(91, 156, 244, 0.5);
    border-radius: 4px;
    outline: none;
    box-shadow: 0 0 0 2px rgba(91, 156, 244, 0.15);
}

.budget-inline-input:focus,
.budget-inline-select:focus {
    border-color: rgba(91, 156, 244, 0.8);
}

.budget-inline-input[type="number"] {
    text-align: right;
    -moz-appearance: textfield;
}
.budget-inline-input[type="number"]::-webkit-inner-spin-button,
.budget-inline-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Delete button */
.budget-row-delete {
    border: none;
    background: transparent;
    color: var(--t-text-tertiary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.budget-row-delete:hover {
    color: var(--t-error);
    background: rgba(239, 68, 68, 0.1);
}

/* Totals */
.budget-totals-row {
    border-top: 2px solid var(--t-border-strong);
    background-color: var(--t-surface-soft);
}

.budget-totals-label {
    padding: 0.6rem 0.65rem;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--t-text);
    text-align: right;
}

.budget-totals-value {
    padding: 0.6rem 0.65rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: right;
    color: var(--t-text);
    font-variant-numeric: tabular-nums;
}

.budget-margin-row {
    background-color: var(--t-surface-soft);
}

.budget-margin-value {
    color: #4ade80;
}

/* Empty state */
.plans-budget-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--t-text-secondary);
    font-size: 0.88rem;
}

.plans-budget-empty strong {
    color: var(--t-text);
}

/* ── Budget Builder — light mode ─────────────────────────── */
[data-theme="light"] .plans-budget-card {
    color: var(--t-text);
}

[data-theme="light"] .plans-budget-table-wrapper {
    border-color: var(--t-border);
    background: #ffffff;
}

[data-theme="light"] .plans-budget-table thead th {
    background: #f1f5f9;
    color: #475569;
    border-bottom-color: #cbd5e1;
    border-right-color: #e2e8f0;
}

[data-theme="light"] .budget-row {
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .budget-row:nth-child(even) {
    background: #f8fafc;
}

[data-theme="light"] .budget-row:hover {
    background: rgba(59, 130, 246, 0.06);
}

[data-theme="light"] .budget-cell {
    color: #1e293b;
    border-right-color: #e2e8f0;
}

[data-theme="light"] .budget-cell[data-field]:hover {
    background: rgba(59, 130, 246, 0.08);
    outline-color: rgba(59, 130, 246, 0.35);
}

[data-theme="light"] .budget-cell--cat {
    color: #64748b;
}

[data-theme="light"] .budget-cell[data-field]:hover {
    background: rgba(59, 130, 246, 0.06);
}

[data-theme="light"] .budget-inline-input,
[data-theme="light"] .budget-inline-select {
    background: #ffffff;
    color: #1e293b;
    border-color: #93c5fd;
}

[data-theme="light"] .budget-row-delete {
    color: #94a3b8;
}

[data-theme="light"] .budget-row-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

[data-theme="light"] .budget-totals-row {
    border-top-color: #cbd5e1;
    background: #f8fafc;
}

[data-theme="light"] .budget-totals-label,
[data-theme="light"] .budget-totals-value {
    color: #1e293b;
}

[data-theme="light"] .budget-margin-value {
    color: #16a34a;
}

[data-theme="light"] .plans-budget-empty {
    color: #64748b;
}

/* ── Budget — Progress bar ─────────────────── */
.budget-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.budget-progress-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.budget-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #22c55e);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 0;
}

.budget-progress-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    min-width: 120px;
    text-align: right;
}

[data-theme="light"] .budget-progress-wrapper {
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .budget-progress-bar-track {
    background: #e2e8f0;
}

[data-theme="light"] .budget-progress-label {
    color: #64748b;
}

/* ── Budget — Summary grid ─────────────────── */
.budget-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.budget-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}

.budget-summary-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
}

.budget-summary-stat-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-variant-numeric: tabular-nums;
}

.budget-summary-stat--profit .budget-summary-stat-value {
    color: #22c55e;
}

.budget-summary-stat--remaining .budget-summary-stat-value {
    color: #f59e0b;
}

[data-theme="light"] .budget-summary-grid {
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .budget-summary-stat {
    background: #f1f5f9;
}

[data-theme="light"] .budget-summary-stat-label {
    color: #64748b;
}

[data-theme="light"] .budget-summary-stat-value {
    color: #1e293b;
}

[data-theme="light"] .budget-summary-stat--profit .budget-summary-stat-value {
    color: #16a34a;
}

[data-theme="light"] .budget-summary-stat--remaining .budget-summary-stat-value {
    color: #d97706;
}

/* ── Budget — Checkbox column ──────────────── */
.budget-col-check {
    width: 36px;
    text-align: center;
}

.budget-cell--check {
    text-align: center;
    padding: 0 !important;
    width: 36px;
}

.budget-check {
    width: 16px;
    height: 16px;
    accent-color: #6366f1;
    cursor: pointer;
    vertical-align: middle;
}

/* ── Budget — Completed row ────────────────── */
.budget-row--completed {
    opacity: 0.55;
}

.budget-row--completed .budget-cell {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.25);
}

.budget-row--completed .budget-cell--check,
.budget-row--completed .budget-cell--actions {
    text-decoration: none;
}

[data-theme="light"] .budget-row--completed .budget-cell {
    text-decoration-color: rgba(0, 0, 0, 0.2);
}

/* ── Budget — mobile ───────────────────────── */
@media (max-width: 768px) {
    .plans-budget-table {
        font-size: 0.75rem;
    }

    .plans-budget-table thead th {
        font-size: 0.65rem;
        padding: 0.4rem 0.45rem;
    }

    .budget-cell {
        padding: 0.4rem 0.45rem;
    }

    .budget-col-cat {
        display: none;
    }

    .budget-col-markup,
    .budget-col-price {
        display: none;
    }

    .budget-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .budget-progress-wrapper {
        padding: 0.4rem 0.75rem;
    }
}

.plans-jobtread-config-hint code {
    padding: 0.15rem 0.35rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    font-size: 0.75rem;
}

/* Notification item enhancements */
.plans-jobtread-notification-item.is-unread {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.plans-jobtread-notification-job {
    color: rgba(168, 85, 247, 0.9);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .plans-jobtread-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .plans-jobtread-action-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .plans-jobtread-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    .plans-jobtread-tab span:not(.plans-jobtread-tab-badge) {
        display: none;
    }
    
    .plans-jobtread-budget-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* ========================================
   Extraction Toast / Loading Indicator
   ======================================== */

.plans-extraction-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.2);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.plans-extraction-toast.is-active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.plans-extraction-toast.is-complete {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(34, 197, 94, 0.3);
}

.plans-extraction-toast.is-complete .plans-extraction-spinner {
    display: none;
}

.plans-extraction-toast.is-complete .plans-extraction-check {
    display: flex;
}

.plans-extraction-spinner {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    animation: plans-spin 1s linear infinite;
}

.plans-extraction-spinner circle {
    stroke: rgba(99, 102, 241, 0.9);
}

.plans-extraction-check {
    display: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 50%;
}

.plans-extraction-check svg {
    width: 12px;
    height: 12px;
    color: var(--t-success-text);
}

.plans-extraction-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--t-text);
    white-space: nowrap;
}

.plans-extraction-text span {
    color: rgba(99, 102, 241, 0.9);
}

.plans-extraction-toast.is-complete .plans-extraction-text span {
    color: rgba(34, 197, 94, 0.9);
}

.plans-extraction-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--t-border-medium);
    margin-left: 0.25rem;
}

.plans-extraction-progress-bar {
    width: 60px;
    height: 4px;
    background-color: var(--t-tab-active-bg);
    border-radius: 2px;
    overflow: hidden;
}

.plans-extraction-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.plans-extraction-toast.is-complete .plans-extraction-progress-fill {
    background: linear-gradient(90deg, #22c55e, #4ade80);
    width: 100% !important;
}

.plans-extraction-count {
    font-size: 0.75rem;
    color: var(--t-text-tertiary);
    font-variant-numeric: tabular-nums;
}

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

/* Mobile toast positioning - above the chat input */
@media (max-width: 768px) {
    .plans-extraction-toast {
        /* Position above mobile chat input area */
        bottom: calc(var(--plans-mobile-input-safe-area, 96px) + env(safe-area-inset-bottom, 0px) + 0.75rem);
        left: 1rem;
        right: 1rem;
        transform: translateX(0) translateY(100px);
        width: auto;
        padding: 0.625rem 1rem;
        border-radius: 10px;
        font-size: 0.8125rem;
    }
    
    .plans-extraction-toast.is-active {
        transform: translateX(0) translateY(0);
    }
    
    .plans-extraction-spinner {
        width: 16px;
        height: 16px;
    }
    
    .plans-extraction-check {
        width: 16px;
        height: 16px;
    }
    
    .plans-extraction-progress {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════
   MOBILE PLANS THUMBNAIL GRID
   ═══════════════════════════════════════════════════ */

.plans-mobile-grid {
    display: none;
}

@media (max-width: 768px) {
    .plans-mobile-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 1rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 60px);
    }

    /* Hide grid when it has the is-hidden class (fullscreen active) */
    .plans-mobile-grid.is-hidden {
        display: none !important;
    }

    /* Hide the full viewer on mobile (the grid replaces it).
       When fullscreen, the viewer is moved to <body> by JS so this rule
       only applies in the non-fullscreen state. */
    .plans-tool-drawer[data-tool-drawer="plans"] .plans-viewer-card {
        display: none;
    }
}

.plans-mobile-grid-card {
    display: flex;
    flex-direction: column;
    background-color: var(--t-border-subtle);
    border: 1px solid var(--t-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    padding: 0;
    color: inherit;
    text-align: left;
}

.plans-mobile-grid-card.is-current {
    border-color: rgba(79, 139, 255, 0.3);
    background: rgba(79, 139, 255, 0.06);
}

.plans-mobile-grid-card:active {
    transform: scale(0.97);
    border-color: rgba(79, 139, 255, 0.35);
    box-shadow: 0 0 0 2px rgba(79, 139, 255, 0.15);
}

.plans-mobile-grid-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--t-surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plans-mobile-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--t-surface);
}

.plans-mobile-grid-placeholder {
    font-size: 2rem;
    opacity: 0.3;
}

.plans-mobile-grid-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.625rem;
    border-top: 1px solid var(--t-border);
}

.plans-mobile-grid-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(246, 247, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-mobile-grid-meta {
    font-size: 0.6875rem;
    color: rgba(246, 247, 255, 0.35);
}

.plans-mobile-grid-loading,
.plans-mobile-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(246, 247, 255, 0.35);
    font-size: 0.875rem;
}

/* ── Foreman "Thinking" shimmer loader ── */
.plans-chat-thinking-loader {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0 12px 0;
    user-select: none;
    animation: thinkingFadeIn 0.25s ease-out;
}
@keyframes thinkingFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.plans-chat-thinking-loader .thinking-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(246, 247, 255, 0.55);
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        rgba(246, 247, 255, 0.45) 0%,
        rgba(246, 247, 255, 0.45) 40%,
        rgba(160, 180, 255, 0.85) 50%,
        rgba(246, 247, 255, 0.45) 60%,
        rgba(246, 247, 255, 0.45) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: thinkingShimmer 2s ease-in-out infinite;
}
@keyframes thinkingShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.plans-chat-thinking-loader .thinking-dots {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
.plans-chat-thinking-loader .thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(160, 180, 255, 0.6);
    animation: thinkingDotPulse 1.4s ease-in-out infinite;
}
.plans-chat-thinking-loader .thinking-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.plans-chat-thinking-loader .thinking-dots span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes thinkingDotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40%           { opacity: 1;   transform: scale(1.2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOREMAN AUTOPILOT — Morning Briefing Banner
   ═══════════════════════════════════════════════════════════════════════════ */

.autopilot-briefing-banner {
    margin: 0 0 8px 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d1b2a 0%, #1b2838 100%);
    border: 1px solid rgba(59, 130, 246, 0.25);
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.4s ease;
}
.autopilot-briefing-banner[data-state="hidden"] {
    display: none;
}
.autopilot-briefing-banner[data-state="visible"] {
    animation: briefingSlideIn 0.4s ease-out;
}
@keyframes briefingSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.autopilot-briefing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.12);
}
.autopilot-briefing-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--t-link);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.autopilot-briefing-icon {
    color: var(--t-link);
    flex-shrink: 0;
}
.autopilot-briefing-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--t-text-secondary);
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.autopilot-briefing-dismiss:hover {
    color: var(--t-text);
    background-color: var(--t-surface-input);
}
.autopilot-briefing-body {
    padding: 10px 14px 12px;
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.55;
    max-height: 320px;
    overflow-y: auto;
}
.autopilot-briefing-headline {
    font-size: 14px;
    font-weight: 600;
    color: var(--t-text);
    margin: 0 0 10px 0;
    line-height: 1.4;
}
.autopilot-briefing-section {
    margin-bottom: 10px;
}
.autopilot-briefing-section h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--t-text-secondary);
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.autopilot-briefing-section ul,
.autopilot-briefing-section ol {
    margin: 0;
    padding-left: 16px;
}
.autopilot-briefing-section li {
    margin-bottom: 4px;
    font-size: 12.5px;
    line-height: 1.45;
}
.autopilot-briefing-section li strong {
    color: var(--t-text);
}
.autopilot-briefing-section li em {
    color: var(--t-text-secondary);
    font-style: italic;
}
.autopilot-action-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--t-link);
    background: rgba(59, 130, 246, 0.12);
    padding: 1px 7px;
    border-radius: 4px;
    margin-left: 4px;
}
.autopilot-followup-btn {
    font-size: 11px;
    font-weight: 600;
    color: var(--t-link);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    margin-top: 3px;
    transition: background 0.15s, color 0.15s;
}
.autopilot-followup-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #93bbfc;
}
.autopilot-briefing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 8px;
    border-top: 1px solid rgba(59, 130, 246, 0.08);
}
.autopilot-briefing-badge {
    font-size: 10px;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}
.autopilot-briefing-time {
    font-size: 10px;
    color: var(--t-text-secondary);
}

/* Mobile: Full width, slightly smaller */
@media (max-width: 768px) {
    .autopilot-briefing-banner {
        border-radius: 8px;
        margin: 0 -2px 8px;
    }
    .autopilot-briefing-body {
        max-height: 250px;
        padding: 8px 10px;
    }
    .autopilot-briefing-headline {
        font-size: 13px;
    }
    .autopilot-briefing-section li {
        font-size: 12px;
    }
}

/* ==========================================================================
   PUSH NOTIFICATION TOGGLE
   ========================================================================== */

.plans-push-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: rgba(246, 247, 255, 0.5);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.plans-push-toggle:hover {
    background: rgba(255, 201, 85, 0.08);
    border-color: rgba(255, 201, 85, 0.3);
    color: rgba(246, 247, 255, 0.8);
}

.plans-push-toggle.is-subscribed {
    background: rgba(80, 220, 140, 0.1);
    border-color: rgba(80, 220, 140, 0.35);
    color: rgba(80, 220, 140, 0.95);
}

.plans-push-toggle.is-subscribed svg {
    opacity: 1;
    stroke: rgba(80, 220, 140, 0.95);
}

.plans-push-toggle svg {
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.plans-push-toggle-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.plans-push-toggle.is-subscribed .plans-push-toggle-label {
    color: rgba(80, 220, 140, 0.95);
}

/* Push inline toast */
.push-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--color-bg-surface, #161b2e);
    color: var(--color-text, #f6f7ff);
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.push-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.push-toast.is-success {
    border-color: rgba(52, 211, 153, 0.4);
}

.push-toast.is-error {
    border-color: rgba(239, 68, 68, 0.4);
}

/* ═════════════════════════════════════════════════════════════════════
   Email Draft Preview Card
   ═════════════════════════════════════════════════════════════════════ */
.plans-email-draft-card {
    margin: 12px 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(99,102,241,0.06));
    border: 1px solid rgba(99,102,241,0.25);
    overflow: hidden;
    animation: emailDraftSlideIn 0.35s ease-out;
}
@keyframes emailDraftSlideIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.plans-email-draft-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px;
}
.plans-email-draft-icon {
    font-size: 18px;
}
.plans-email-draft-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(165,180,252,0.9);
    letter-spacing: 0.02em;
}

.plans-email-draft-fields {
    padding: 0 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.plans-email-draft-field {
    font-size: 12.5px;
    color: rgba(203,213,225,0.8);
    display: flex;
    gap: 6px;
    align-items: baseline;
}
.plans-email-draft-label {
    font-weight: 600;
    color: rgba(148,163,184,0.9);
    min-width: 50px;
    flex-shrink: 0;
}
.plans-email-draft-value {
    color: rgba(226,232,240,0.95);
}
.plans-email-draft-subject {
    font-weight: 600;
}

.plans-email-draft-body-wrapper {
    padding: 0 16px 12px;
}
.plans-email-draft-body {
    background: rgba(15,23,42,0.5);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(226,232,240,0.92);
    max-height: 300px;
    overflow-y: auto;
}
.plans-email-draft-body p {
    margin: 0 0 8px;
}
.plans-email-draft-body p:last-child {
    margin-bottom: 0;
}

.plans-email-draft-actions {
    display: flex;
    gap: 10px;
    padding: 0 16px 14px;
}
.plans-email-draft-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}
.plans-email-draft-btn-confirm {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: var(--t-text);
    box-shadow: 0 2px 10px rgba(59,130,246,0.3);
}
.plans-email-draft-btn-confirm:hover:not(:disabled) {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow: 0 4px 16px rgba(59,130,246,0.45);
    transform: translateY(-1px);
}
.plans-email-draft-btn-confirm:disabled {
    opacity: 0.7;
    cursor: wait;
}
.plans-email-draft-btn-revise {
    background: rgba(255,255,255,0.07);
    color: rgba(203,213,225,0.9);
    border: 1px solid var(--t-border-medium);
}
.plans-email-draft-btn-revise:hover {
    background-color: var(--t-surface-active);
    color: var(--t-text);
    border-color: var(--t-border-accent);
}

/* Sending state */
.plans-email-draft-sending {
    opacity: 0.85;
    pointer-events: none;
}
.plans-email-draft-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--t-border-accent);
    border-top-color: var(--t-text);
    border-radius: 50%;
    animation: emailDraftSpin 0.6s linear infinite;
}
@keyframes emailDraftSpin {
    to { transform: rotate(360deg); }
}

/* Sent state */
.plans-email-draft-sent {
    border-color: rgba(52,211,153,0.35);
    background: linear-gradient(135deg, rgba(52,211,153,0.08), rgba(16,185,129,0.05));
}
.plans-email-draft-sent-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--t-success-text);
    background: rgba(52,211,153,0.12);
    border: 1px solid rgba(52,211,153,0.25);
}

/* Mobile adjustments */
@media (max-width: 1099px) {
    .plans-email-draft-card {
        margin: 8px 4px;
        border-radius: 12px;
    }
    .plans-email-draft-body {
        max-height: 200px;
        font-size: 12.5px;
    }
    .plans-email-draft-actions {
        flex-direction: column;
        gap: 8px;
    }
    .plans-email-draft-btn {
        justify-content: center;
        padding: 10px 16px;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   DOCUMENT BUILDER — Fillable PDF-style templates in the left panel
   ═════════════════════════════════════════════════════════════════════════════ */

/* Card header */
.docbuilder-card-header {
    padding: 8px 16px 6px;
    border-bottom: 1px solid var(--t-border);
}
.docbuilder-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.docbuilder-card-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(226,232,240,0.7);
    margin: 0;
    flex: 1;
}
/* Hide subtitle — no longer needed with sidebar */
.docbuilder-card-subtitle { display: none; }

/* ── Layout: sidebar + document ─────────────────────────────────────────── */
.docbuilder-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.docbuilder-sidebar {
    width: 260px;
    min-width: 260px;
    border-right: 1px solid var(--t-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(0,0,0,0.12);
}
.docbuilder-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
}
.docbuilder-sidebar-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(226,232,240,0.9);
    margin: 0;
    letter-spacing: 0.3px;
}
.docbuilder-new-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 6px;
    background: rgba(99,102,241,0.1);
    color: rgba(199,210,254,1);
    cursor: pointer;
    transition: all 0.15s;
}
.docbuilder-new-btn svg {
    display: block;
    width: 14px;
    height: 14px;
    stroke: currentColor;
}
.docbuilder-new-btn:hover {
    background: rgba(99,102,241,0.2);
    border-color: rgba(99,102,241,0.5);
    color: var(--t-text);
}
.docbuilder-sidebar-section {
    padding: 6px 12px 10px;
}
.docbuilder-sidebar-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(148,163,184,0.5);
    margin: 0 0 8px 4px;
}

/* Sidebar template items (compact list) */
.docbuilder-sidebar-tpl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    color: rgba(226,232,240,0.85);
    font-size: 13.5px;
    font-weight: 500;
}
.docbuilder-sidebar-tpl-item:hover {
    background-color: var(--t-surface-input);
}
.docbuilder-sidebar-tpl-item.is-active {
    background: rgba(99,102,241,0.15);
    color: rgba(165,180,252,1);
}
.docbuilder-sidebar-tpl-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 26px;
    text-align: center;
}
.docbuilder-sidebar-tpl-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Saved documents list */
.docbuilder-sidebar-saved-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-size: 12px;
    color: rgba(226,232,240,0.8);
}
.docbuilder-sidebar-tpl-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.docbuilder-saved-owner {
    font-size: 10px;
    color: rgba(148,163,184,0.5);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.docbuilder-sidebar-saved-item:hover {
    background-color: var(--t-surface-input);
}
.docbuilder-sidebar-saved-item.is-active {
    background: rgba(99,102,241,0.12);
    color: rgba(165,180,252,0.95);
}
.docbuilder-sidebar-empty {
    font-size: 11px;
    color: rgba(148,163,184,0.4);
    margin: 0;
    padding: 4px 14px;
    font-style: italic;
}

/* Delete × on saved items */
.docbuilder-saved-delete {
    margin-left: auto;
    font-size: 16px;
    line-height: 1;
    color: rgba(148,163,184,0.4);
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.docbuilder-saved-delete:hover {
    color: var(--t-error);
}

/* Save button */
.docbuilder-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: rgba(226,232,240,0.8);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.docbuilder-save-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: #f1f5f9;
}

/* ── Main document area (right of sidebar) ──────────────────────────────── */
.docbuilder-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.docbuilder-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background-color: var(--t-surface-input);
    color: rgba(203,213,225,0.8);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.docbuilder-back-btn:hover { background-color: var(--t-tab-active-bg); }

.docbuilder-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: rgba(226,232,240,0.8);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.docbuilder-export-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: #f1f5f9;
}
.docbuilder-export-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.docbuilder-export-btn svg {
    stroke: currentColor;
    width: 14px;
    height: 14px;
}

.docbuilder-send-viewer-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: rgba(226,232,240,0.8);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.docbuilder-send-viewer-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: #f1f5f9;
}
.docbuilder-send-viewer-btn svg {
    stroke: currentColor;
    width: 14px;
    height: 14px;
}

.docbuilder-body {
    padding: 8px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Template picker grid — only shown when NO template is active (placeholder state) */
.docbuilder-template-picker {
    display: none;
}
/* Hide old template cards — templates are now in sidebar */
.docbuilder-template-card { display: none; }

/* Empty state — shown when no template is selected */
.docbuilder-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 200px;
    text-align: center;
    gap: 8px;
    opacity: 0.5;
}
.docbuilder-empty-icon {
    font-size: 48px;
    margin-bottom: 8px;
}
.docbuilder-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(226,232,240,0.85);
    margin: 0;
}
.docbuilder-empty-text {
    font-size: 13px;
    color: rgba(148,163,184,0.7);
    margin: 0;
}

/* ── Document page — the PDF-style canvas ───────────────────────────────── */
.docbuilder-page {
    display: flex;
    justify-content: center;
    padding: 2px 0;
    flex: 1;
    min-height: 0;
}
.docbuilder-page-inner {
    --doc-accent: #d4a017;
    --doc-accent-dark: #b8860b;

    /* Override theme tokens so document always looks like white paper */
    --t-text: #1e293b;
    --t-text-secondary: rgba(30, 41, 59, 0.64);
    --t-text-tertiary: rgba(30, 41, 59, 0.45);
    --t-surface: #ffffff;
    --t-surface-alt: #f8fafc;
    --t-surface-input: rgba(0, 0, 0, 0.04);
    --t-surface-hover: rgba(0, 0, 0, 0.06);
    --t-border: rgba(0, 0, 0, 0.08);
    --t-border-subtle: rgba(0, 0, 0, 0.04);
    --t-border-medium: rgba(0, 0, 0, 0.12);
    --t-border-strong: rgba(0, 0, 0, 0.16);
    --t-info: #3b82f6;
    --t-error: #ef4444;

    width: 100%;
    max-width: 850px;
    background: #ffffff;
    color: #1e293b;
    border-radius: 3px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
    padding: 28px 36px 32px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 12.5px;
    line-height: 1.5;
    overflow-y: auto;
}

/* ── Header (company banner — clean with gold underline) ─────────────── */
.docbuilder-doc-header {
    margin: -28px -36px 22px;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}
.docbuilder-doc-header::after {
    display: none;
}
.docbuilder-doc-header-stripe {
    display: none;
}
.docbuilder-doc-header-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 32px 14px;
    background: var(--t-surface);
    border-bottom: 2.5px solid var(--doc-accent, #d4a017);
}
.docbuilder-doc-header-left { flex: 1; }
.docbuilder-doc-header-right { text-align: right; flex-shrink: 0; }

/* ── Logo upload area ──────────────────────────────────────────────────── */
.docbuilder-logo-upload {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border: 1.5px dashed #c5cdd6;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    background: #fafbfc;
    margin-right: 16px;
    overflow: hidden;
}
.docbuilder-logo-upload:hover {
    border-color: var(--doc-accent, #d4a017);
    background: color-mix(in srgb, var(--doc-accent, #d4a017) 3%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--doc-accent, #d4a017) 8%, transparent);
}
.docbuilder-logo-upload.has-image {
    border: 1px solid #cbd5e1;
    background: var(--t-surface);
    padding: 2px;
}
.docbuilder-logo-upload.has-image:hover {
    border-color: var(--doc-accent, #d4a017);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--doc-accent, #d4a017) 10%, transparent);
}
.docbuilder-logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.docbuilder-logo-placeholder span {
    font-size: 7.5px;
    font-weight: 600;
    color: var(--t-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.docbuilder-logo-placeholder svg {
    stroke: #94a3b8 !important;
}
.docbuilder-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 3px;
}

.docbuilder-company-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--t-text);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    min-height: 1.3em;
    outline: none;
    letter-spacing: 0.5px;
}
.docbuilder-company-name:focus {
    outline: 1px solid color-mix(in srgb, var(--doc-accent, #d4a017) 40%, transparent);
    outline-offset: 3px;
    border-radius: 2px;
}
.docbuilder-company-detail {
    font-size: 10.5px;
    color: var(--t-text-secondary);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    min-height: 1.2em;
    outline: none;
    letter-spacing: 0.3px;
}
.docbuilder-company-detail:focus {
    outline: 1px solid color-mix(in srgb, var(--doc-accent, #d4a017) 30%, transparent);
    outline-offset: 2px;
    border-radius: 2px;
}
.docbuilder-doc-type {
    font-size: 13px;
    font-weight: 800;
    color: var(--doc-accent-dark, #b8860b);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    padding: 5px 14px;
    border: 1.5px solid color-mix(in srgb, var(--doc-accent, #d4a017) 40%, transparent);
    border-radius: 3px;
    white-space: nowrap;
}

/* Content-editable placeholder */
[contenteditable][data-placeholder].is-empty::before {
    content: attr(data-placeholder);
    color: var(--t-text-secondary);
    font-style: italic;
    opacity: 0.6;
    pointer-events: none;
}
.docbuilder-doc-header-body [contenteditable]:focus {
    outline: 1px solid color-mix(in srgb, var(--doc-accent, #d4a017) 35%, transparent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.docbuilder-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
.docbuilder-field-row--textarea {
    flex-direction: column;
    align-items: stretch;
}
.docbuilder-field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--t-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 120px;
    flex-shrink: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.docbuilder-field-row--textarea .docbuilder-field-label {
    min-width: 0;
    margin-bottom: 2px;
}
.docbuilder-field-input {
    flex: 1;
    padding: 5px 10px;
    border: 1px solid #b0bec5;
    border-radius: 4px;
    font-size: 12.5px;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--t-text);
    background-color: var(--t-surface-alt);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.docbuilder-field-input:focus {
    outline: none;
    border-color: var(--t-info);
    background: var(--t-surface);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 3px rgba(99,102,241,0.14);
}
.docbuilder-field-input::placeholder {
    color: #78909c;
    font-style: italic;
}
.docbuilder-field-bold .docbuilder-field-input {
    font-weight: 800;
    font-size: 13.5px;
    color: var(--t-text);
    background: linear-gradient(90deg, color-mix(in srgb, var(--doc-accent, #d4a017) 6%, transparent), transparent 60%);
    border-left: 3px solid var(--doc-accent, #d4a017);
}
.docbuilder-field-bold .docbuilder-field-label {
    color: var(--t-text);
    font-weight: 800;
}
.docbuilder-field-textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #b0bec5;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--t-text);
    background-color: var(--t-surface-alt);
    resize: none;
    overflow: hidden;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.docbuilder-field-textarea:focus {
    outline: none;
    border-color: var(--t-info);
    background: var(--t-surface);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 3px rgba(99,102,241,0.14);
}
.docbuilder-field-textarea::placeholder {
    color: #78909c;
    font-style: italic;
}

/* ── Section headings & dividers ────────────────────────────────────────── */
.docbuilder-section-heading {
    font-size: 12px;
    font-weight: 800;
    color: var(--t-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--doc-accent-dark, #b8860b), var(--doc-accent, #d4a017), transparent 80%) 1;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
}
.docbuilder-section-heading::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 12px;
    background: linear-gradient(180deg, var(--doc-accent, #d4a017), var(--doc-accent-dark, #b8860b));
    border-radius: 2px;
    flex-shrink: 0;
}
.docbuilder-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 10px 0;
}

/* ── Rich-text formatting for scope/terms/textareas ─────────────────────── */
.docbuilder-field-richtext {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #b0bec5;
    border-radius: 5px;
    font-size: 12px;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--t-text);
    background-color: var(--t-surface-alt);
    line-height: 1.65;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: text;
}
.docbuilder-field-richtext:focus {
    border-color: var(--t-info);
    background: var(--t-surface);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 3px rgba(99,102,241,0.14);
}
.docbuilder-field-richtext.is-empty::before {
    content: attr(data-placeholder);
    color: #78909c;
    font-style: italic;
    opacity: 0.7;
    pointer-events: none;
}

/* ── Edit toggle button (pencil) on rich text areas ────────────────────── */
.docbuilder-edit-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148,163,184,0.35);
    border-radius: 5px;
    background: rgba(255,255,255,0.85);
    color: #475569;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    z-index: 2;
}
.docbuilder-edit-toggle svg {
    display: block;
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
}
.docbuilder-field-row--textarea:hover .docbuilder-edit-toggle,
.docbuilder-edit-toggle.is-editing {
    opacity: 1;
}
.docbuilder-edit-toggle:hover {
    background: rgba(99,102,241,0.12);
    border-color: rgba(99,102,241,0.35);
    color: #4f46e5;
}
.docbuilder-edit-toggle.is-editing {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.4);
    color: #4f46e5;
}

/* ── Raw markdown textarea (shown in edit mode) ────────────────────────── */
.docbuilder-raw-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #6366f1;
    border-radius: 5px;
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: var(--t-text);
    background: #fffef7;
    line-height: 1.65;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 3px rgba(99,102,241,0.14);
    resize: vertical;
    box-sizing: border-box;
}

/* ── Clear Document button ─────────────────────────────────────────────── */
.docbuilder-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: rgba(226,232,240,0.8);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.docbuilder-clear-btn:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.3);
    color: #ef4444;
}
.docbuilder-clear-btn svg {
    stroke: currentColor;
    width: 14px;
    height: 14px;
}
/* Headers inside rich text */
.db-rich-h1 {
    font-size: 14px;
    font-weight: 800;
    color: var(--t-text);
    margin: 10px 0 5px;
    padding-bottom: 3px;
    border-bottom: 1.5px solid var(--doc-accent, #d4a017);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.db-rich-h1:first-child { margin-top: 0; }
.db-rich-h2 {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--t-text);
    margin: 8px 0 4px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.3px;
}
.db-rich-h3 {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--t-text-tertiary);
    margin: 6px 0 3px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-style: italic;
}
/* Paragraphs */
.db-rich-p {
    margin: 6px 0;
    line-height: 1.75;
    text-align: justify;
    text-justify: inter-word;
}
/* Bullet lists */
.db-rich-ul {
    margin: 4px 0 6px 0;
    padding-left: 18px;
    list-style: none;
}
.db-rich-ul li {
    position: relative;
    padding-left: 6px;
    margin-bottom: 3px;
    line-height: 1.6;
}
.db-rich-ul li::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 7px;
    width: 5px;
    height: 5px;
    background: var(--doc-accent, #d4a017);
    border-radius: 50%;
}
/* Numbered lists */
.db-rich-ol {
    margin: 4px 0 6px 0;
    padding-left: 22px;
    counter-reset: db-ol;
    list-style: none;
}
.db-rich-ol li {
    position: relative;
    padding-left: 4px;
    margin-bottom: 3px;
    line-height: 1.6;
    counter-increment: db-ol;
}
.db-rich-ol li::before {
    content: counter(db-ol) ".";
    position: absolute;
    left: -20px;
    font-weight: 700;
    font-size: 11px;
    color: var(--t-text-tertiary);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
/* Bold / italic / code */
.docbuilder-field-richtext strong {
    font-weight: 800;
    color: var(--t-text);
}
.docbuilder-field-richtext em {
    font-style: italic;
    color: var(--t-text-tertiary);
}
.db-rich-code {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 11px;
    background: #e8edf2;
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--t-text-tertiary);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.docbuilder-table-wrapper {
    margin: 10px 0;
    overflow-x: auto;
}
.docbuilder-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.docbuilder-table th {
    background: linear-gradient(180deg, var(--doc-accent, #d4a017), var(--doc-accent-dark, #b8860b));
    border: 1px solid var(--doc-accent-dark, #b8860b);
    padding: 7px 10px;
    font-weight: 700;
    text-align: left;
    color: #ffffff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.docbuilder-table td {
    border: 1px solid #c5cdd6;
    padding: 5px 10px;
    min-width: 50px;
    min-height: 24px;
    color: var(--t-text);
    outline: none;
    transition: background 0.15s;
    position: relative;
    background: #fcfcfd;
}
.docbuilder-table tbody tr:nth-child(even):not(.docbuilder-table-section):not(.docbuilder-table-subtotal) td {
    background: #f1f4f8;
}
.docbuilder-table tbody tr:hover:not(.docbuilder-table-section):not(.docbuilder-table-subtotal) td {
    background: rgba(99,102,241,0.07);
}
.docbuilder-table td:focus,
.docbuilder-table td.is-editing {
    background: rgba(99,102,241,0.08);
    outline: 2px solid rgba(99,102,241,0.45);
    outline-offset: -2px;
}
.docbuilder-add-row-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    background: transparent;
    color: var(--t-info);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.docbuilder-add-row-btn:hover {
    background: rgba(99,102,241,0.06);
    border-color: var(--t-info);
}

/* ── Section / category header rows (CSI divisions, trade groups) ──────── */
.docbuilder-table-section {
    background: linear-gradient(90deg, var(--doc-accent-dark, #b8860b) 0%, var(--doc-accent, #d4a017) 100%) !important;
}
.docbuilder-table-section td {
    background: transparent !important;
    color: #f8fafc !important;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 5px 10px !important;
    border-color: transparent !important;
    cursor: default;
}
.docbuilder-table-section td::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 11px;
    background: rgba(255,255,255,0.7);
    border-radius: 1px;
    margin-right: 8px;
    vertical-align: -1px;
}

/* ── Section subtotal rows ─────────────────────────────────────────────── */
.docbuilder-table-subtotal {
    background: #f1f5f9 !important;
}
.docbuilder-table-subtotal td {
    background: transparent !important;
    border-top: 2px solid #94a3b8 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    padding: 5px 10px !important;
    font-weight: 700;
    font-size: 11.5px;
    color: #334155 !important;
    letter-spacing: 0.3px;
    cursor: default;
}
.docbuilder-table-subtotal td:first-child {
    text-align: right;
    padding-right: 16px !important;
    text-transform: uppercase;
    font-size: 10.5px;
    color: #64748b !important;
}
.docbuilder-table-subtotal td:last-child {
    text-align: right;
    font-size: 12px;
    color: #1e293b !important;
    font-weight: 800;
    letter-spacing: 0.2px;
}

/* ── Signature block ────────────────────────────────────────────────────── */
.docbuilder-signature-block {
    margin-top: 18px;
}
.docbuilder-sig-row {
    display: flex;
    gap: 32px;
    margin-bottom: 18px;
}
.docbuilder-sig-field {
    flex: 1;
}
.docbuilder-sig-line {
    border-bottom: 2px solid #0f172a;
    min-height: 24px;
    padding: 3px 2px;
    font-size: 12.5px;
    font-family: 'Georgia', serif;
    outline: none;
}
.docbuilder-sig-date {
    border-bottom: 1px solid #94a3b8;
    min-height: 22px;
    padding: 3px 2px;
    font-size: 12px;
    outline: none;
    max-width: 160px;
}
.docbuilder-sig-label {
    display: block;
    font-size: 10px;
    color: var(--t-text-secondary);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* ── Typing cursor when AI is filling a field ───────────────────────────── */
.docbuilder-field-typing {
    position: relative;
    z-index: 1;
    background: rgba(99, 102, 241, 0.06) !important;
    box-shadow: inset 3px 0 0 #6366f1 !important;
    border-radius: 2px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
td.docbuilder-field-typing {
    background: rgba(99, 102, 241, 0.08) !important;
    box-shadow: inset 3px 0 0 #6366f1 !important;
    outline: none !important;
}
.docbuilder-field-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: #6366f1;
    margin-left: 1px;
    vertical-align: text-bottom;
    border-radius: 1px;
    animation: docbuilderCursorBlink 0.6s steps(1) infinite;
}
/* Richtext uses inline .db-rich-cursor span — suppress the ::after cursor */
.docbuilder-field-richtext.docbuilder-field-typing::after {
    display: none;
}
@keyframes docbuilderCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ── Inline blinking cursor for richtext streaming ──────────────────────── */
.db-rich-cursor {
    display: inline-block;
    width: 2px;
    height: 0.95em;
    background: #6366f1;
    margin-left: 1px;
    vertical-align: text-bottom;
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(99, 102, 241, 0.4);
    animation: docbuilderCursorBlink 0.6s steps(1) infinite;
}

/* ── Settle glow when AI finishes filling a field ─────────────────────── */
.docbuilder-field-flash {
    background: rgba(99, 102, 241, 0.10) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18) !important;
    border-radius: 2px;
    transition: background 2s ease-out, box-shadow 2s ease-out;
}
td.docbuilder-field-flash {
    background: rgba(99, 102, 241, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18) !important;
    border-radius: 2px;
    transition: background 2s ease-out, box-shadow 2s ease-out;
}
/* Row-level glow when an entire row completes */
tr.docbuilder-row-shimmer {
    position: relative;
}
tr.docbuilder-row-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
    border-radius: 2px;
    transition: opacity 2s ease-out;
    animation: docbuilderRowSettle 2s ease-out forwards;
}
@keyframes docbuilderRowSettle {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Hide placeholders during PDF export ─────────────────────────────── */
.docbuilder-hide-placeholder.is-empty::before {
    display: none !important;
}

/* ── DocBuilder accent color picker ─────────────────────────────────────── */
.docbuilder-accent-picker {
    position: relative;
    display: inline-flex;
}
.docbuilder-accent-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: rgba(226,232,240,0.8);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.docbuilder-accent-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: #f1f5f9;
}
.docbuilder-accent-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.docbuilder-accent-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 200px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    padding: 10px;
}
.docbuilder-accent-dropdown.is-open {
    display: block;
}
.docbuilder-accent-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.docbuilder-accent-preset {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.docbuilder-accent-preset:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.docbuilder-accent-preset.is-active {
    border-color: var(--t-text);
    box-shadow: 0 0 0 2px var(--t-surface), 0 0 0 4px var(--t-text-secondary);
}
.docbuilder-accent-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--t-border);
}
.docbuilder-accent-custom label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t-text-secondary);
    white-space: nowrap;
}
.docbuilder-accent-hex {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--t-border);
    border-radius: 6px;
    font-size: 12px;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: var(--t-text);
    background: var(--t-surface-alt, rgba(255,255,255,0.06));
    text-transform: uppercase;
    max-width: 90px;
}
.docbuilder-accent-hex:focus {
    outline: none;
    border-color: var(--t-info);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}
.docbuilder-accent-native {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1.5px solid var(--t-border);
    border-radius: 6px;
    cursor: pointer;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}
.docbuilder-accent-native::-webkit-color-swatch-wrapper {
    padding: 0;
}
.docbuilder-accent-native::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* ── DocBuilder card layout ─────────────────────────────────────────────── */
#plansDocBuilderCard {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: var(--plans-card-bg, rgba(15,23,42,0.65));
    border: 1px solid var(--t-border);
    border-top: none;
    border-radius: 0 0 var(--plans-card-radius, 16px) var(--plans-card-radius, 16px);
}
#plansDocBuilderCard:not([hidden]) {
    display: flex;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAYMENTS PANEL STYLES
   ══════════════════════════════════════════════════════════════════════════ */

#plansPaymentsCard {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: var(--plans-card-bg, rgba(15,23,42,0.65));
    border: 1px solid var(--t-border);
    border-top: none;
    border-radius: 0 0 var(--plans-card-radius, 16px) var(--plans-card-radius, 16px);
}
#plansPaymentsCard:not([hidden]) {
    display: flex;
}

.payments-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.payments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.payments-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--t-text);
    margin: 0;
}

.payments-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a1a2e;
    background: linear-gradient(135deg, #d4a843, #c49a38);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.payments-new-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(212,168,67,0.3);
}

/* ── Stats bar ───────────────────────────────────────────────────────── */
.payments-stats {
    display: flex;
    gap: 0.75rem;
}

.payments-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0.65rem 0.5rem;
    background-color: var(--t-border-subtle);
    border: 1px solid var(--t-border);
    border-radius: 8px;
}

.payments-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--t-text);
    line-height: 1.2;
}

.payments-stat-label {
    font-size: 0.7rem;
    color: var(--t-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

/* ── Table ────────────────────────────────────────────────────────────── */
.payments-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.payments-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.payments-table thead th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    color: var(--t-text-secondary);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--t-border);
    position: sticky;
    top: 0;
    background: var(--plans-card-bg, rgba(15,23,42,0.95));
    z-index: 1;
}

.payments-row {
    transition: background 0.15s;
}
.payments-row:hover {
    background-color: var(--t-surface-soft);
}

.payments-row td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--t-border-subtle);
    vertical-align: middle;
}

.payments-row--paid {
    opacity: 0.6;
}

.payments-cell-client {
    min-width: 120px;
}

.payments-client-name {
    font-weight: 500;
    color: var(--t-text);
}

.payments-client-email {
    font-size: 0.72rem;
    color: #6b7a8f;
    margin-top: 0.1rem;
}

.payments-cell-amount {
    font-weight: 600;
    color: #d4a843;
    white-space: nowrap;
}

.payments-cell-desc {
    color: #9ba8b9;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payments-cell-opened {
    color: var(--t-text-secondary);
    font-size: 0.78rem;
}

.payments-cell-date {
    color: #6b7a8f;
    font-size: 0.78rem;
    white-space: nowrap;
}

.payments-cell-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

/* ── Status badges ───────────────────────────────────────────────────── */
.payments-status-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ── Action buttons ──────────────────────────────────────────────────── */
.payments-copy-btn,
.payments-send-btn,
.payments-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--t-border-medium);
    border-radius: 5px;
    background-color: var(--t-border-subtle);
    color: #b0bac9;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.payments-copy-btn svg,
.payments-send-btn svg,
.payments-delete-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.payments-copy-btn:hover,
.payments-send-btn:hover {
    background-color: var(--t-surface-hover);
    color: var(--t-text);
    border-color: var(--t-border-accent);
}
.payments-delete-btn:hover {
    background: rgba(224,85,85,0.12);
    color: #e05555;
    border-color: rgba(224,85,85,0.3);
}
.payments-copy-btn--copied {
    color: #44d944 !important;
    border-color: rgba(68,217,68,0.3) !important;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.payments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.payments-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.payments-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--t-text-secondary);
    margin: 0 0 0.35rem;
}

.payments-empty-text {
    font-size: 0.82rem;
    color: #5a6472;
    margin: 0;
}

/* ── Create form ─────────────────────────────────────────────────────── */
.payments-create-form {
    background-color: var(--t-surface-soft);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    padding: 1.25rem;
}

.payments-form-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--t-text);
    margin: 0 0 1rem;
}

.payments-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
}

.payments-form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--t-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payments-form-input {
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    color: var(--t-text);
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--t-border-medium);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s;
}
.payments-form-input:focus {
    border-color: rgba(212,168,67,0.5);
}
.payments-form-input::placeholder {
    color: #4a5568;
}

.payments-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}

.payments-form-optional {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}
.payments-form-optional-toggle {
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7a8d;
    cursor: pointer;
    user-select: none;
    padding: 0.3rem 0;
    list-style: none;
    transition: color 0.15s;
}
.payments-form-optional-toggle:hover {
    color: #d4a843;
}
.payments-form-optional-toggle::-webkit-details-marker {
    display: none;
}
.payments-form-optional[open] .payments-form-optional-toggle {
    color: var(--t-text-secondary);
    margin-bottom: 0.5rem;
}

.payments-form-cancel {
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--t-text-secondary);
    background: transparent;
    border: 1px solid var(--t-border-medium);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.payments-form-cancel:hover {
    background-color: var(--t-border-subtle);
}

.payments-form-submit {
    padding: 0.45rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1a2e;
    background: linear-gradient(135deg, #d4a843, #c49a38);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}
.payments-form-submit:hover {
    transform: translateY(-1px);
}
.payments-form-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ── Payments tab button ─────────────────────────────────────────────── */
.plans-workspace-tab--payments.is-active {
    color: #d4a843;
    border-bottom-color: #d4a843;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT STYLES — Document Builder "Export PDF" via window.print()
   Hides everything except .docbuilder-page-inner so the browser renders
   the exact on-screen document as a PDF.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   PRINT — hide everything when browser print dialog is open
   (fallback in case user hits Ctrl+P while viewing doc builder)
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
    body * { visibility: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DOCBUILDER — MOBILE RESPONSIVE
   Stack sidebar + document vertically on small screens
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .docbuilder-layout {
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .docbuilder-sidebar {
        width: 100%;
        min-width: 0;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--t-border);
        overflow: visible;
    }
    .docbuilder-sidebar-tpl-item {
        padding: 12px 16px;
        font-size: 14px;
    }
    .docbuilder-main {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
    .docbuilder-page-inner {
        padding: 20px 16px 24px;
        font-size: 12px;
    }
    .docbuilder-doc-header-body {
        padding: 14px 16px 10px;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .docbuilder-doc-header-right {
        text-align: left;
    }
    .docbuilder-card-header {
        padding: 8px 12px;
    }
    .docbuilder-header-row {
        flex-wrap: wrap;
        gap: 8px;
    }
}
   IN-CHAT PAYWALL CARD
   Styled plan picker that appears as a chat bubble when the free tier
   prompt limit is reached
   ══════════════════════════════════════════════════════════════════════════ */
.pw-card {
    max-width: 640px;
}
.pw-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(226,232,240,0.95);
    margin-bottom: 6px;
}
.pw-sub {
    font-size: 13px;
    color: rgba(148,163,184,0.7);
    margin: 0 0 16px;
}
.pw-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}
.pw-tile {
    position: relative;
    background-color: var(--t-border-subtle);
    border: 1px solid var(--t-border);
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s;
}
.pw-tile:hover {
    border-color: var(--t-border-strong);
}
.pw-tile--rec {
    border-color: rgba(59,130,246,0.5);
    background: rgba(59,130,246,0.06);
}
.pw-badge {
    position: absolute;
    top: -9px;
    left: 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg,#3b82f6,#6366f1);
    color: var(--t-text);
    padding: 2px 10px;
    border-radius: 20px;
}
.pw-tile-name {
    font-size: 15px;
    font-weight: 700;
    color: rgba(226,232,240,0.95);
}
.pw-tile-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--t-text);
    line-height: 1.1;
}
.pw-tile-summary {
    font-size: 11.5px;
    color: rgba(148,163,184,0.65);
    line-height: 1.35;
}
.pw-tile-features {
    list-style: none;
    padding: 0;
    margin: 6px 0 10px;
    font-size: 12px;
    color: rgba(203,213,225,0.8);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pw-tile-features li::before {
    content: '\2713 ';
    color: var(--t-success-text);
    font-weight: 700;
    margin-right: 4px;
}
.pw-tile-btn {
    margin-top: auto;
    padding: 8px 0;
    border-radius: 8px;
    border: 1px solid var(--t-border-medium);
    background-color: var(--t-surface-input);
    color: rgba(226,232,240,0.9);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pw-tile-btn:hover {
    background-color: var(--t-surface-active);
}
.pw-tile-btn--rec {
    background: linear-gradient(135deg,#3b82f6,#6366f1);
    border-color: transparent;
    color: var(--t-text);
}
.pw-tile-btn--rec:hover {
    filter: brightness(1.1);
    background: linear-gradient(135deg,#3b82f6,#6366f1);
}
.pw-tile-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

@media (max-width: 480px) {
    .pw-tiles {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   INLINE DOCUMENT CARD (mobile chat)
   Shows filled document fields directly in the chat stream on mobile
   ══════════════════════════════════════════════════════════════════════════ */
.idc-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    max-width: 100%;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #1a1a1a;
}
.idc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 2px solid #cbd5e1;
    background: #f8fafc;
}
.idc-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.01em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.idc-body {
    padding: 16px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 40px;
}
.idc-section-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-top: 12px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.idc-field {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 13px;
    line-height: 1.5;
    padding: 2px 0;
}
.idc-field--multi {
    flex-direction: column;
    gap: 2px;
}
.idc-field-label {
    flex-shrink: 0;
    font-weight: 600;
    color: #64748b;
    font-size: 11.5px;
    min-width: 95px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.idc-field--multi .idc-field-label {
    min-width: 0;
}
.idc-field-value {
    color: #1a1a1a !important;
    word-break: break-word;
    white-space: pre-wrap;
}
/* Table inside inline doc card */
.idc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.idc-table th {
    text-align: left;
    padding: 6px 8px;
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569 !important;
    border-bottom: 2px solid #cbd5e1;
    background: #f8fafc;
}
.idc-table td {
    padding: 5px 8px;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0;
}
.idc-table tr:last-child td {
    border-bottom: none;
}
/* Footer — Open in Documents button */
.idc-footer {
    padding: 10px 20px 14px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
}
.idc-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #1e293b;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: all 0.2s ease;
}
.idc-open-btn:hover {
    background: #334155;
}
/* Smooth fade-in for each field/row as it appears */
@keyframes idcFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.idc-fade-in {
    animation: idcFadeIn 0.3s ease both;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — mobile chat input overrides
   These must use !important to beat the mobile @media !important rules.
   Position at end of file so they win same-specificity !important cascade.
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .plans-chat-input-row {
    background: linear-gradient(to top,
        rgba(248, 250, 252, 0.99) 0%,
        rgba(248, 250, 252, 0.96) 85%,
        transparent 100%) !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .plans-chat-input-shell {
    background: #ffffff !important;
    border: 1.5px solid rgba(59, 130, 246, 0.45) !important;
}

[data-theme="light"] .plans-chat-send-btn {
    color: #2563eb !important;
    background: transparent !important;
}

[data-theme="light"] .plans-chat-send-btn:hover,
[data-theme="light"] .plans-chat-send-btn:active {
    color: #1d4ed8 !important;
    background: transparent !important;
}

[data-theme="light"] .plans-chat-send-btn .plans-chat-send-icon {
    color: #2563eb !important;
}

[data-theme="light"] .plans-chat-voice-btn {
    color: #2563eb !important;
}

[data-theme="light"] .plans-chat-voice-btn svg,
[data-theme="light"] .plans-chat-voice-icon {
    color: #2563eb !important;
}

[data-theme="light"] .plans-chat-input-shell[data-mobile-placeholder="true"] .plans-chat-input-overlay-placeholder {
    color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Mobile menu drawer (hamburger side panel)
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .plans-mobile-menu-drawer-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .plans-mobile-menu-drawer-body {
    background: #ffffff;
}

/* ── User card — polished light mode design ── */
[data-theme="light"] .plans-mobile-menu-user-section {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

[data-theme="light"] .plans-mobile-menu-user-profile {
    background: linear-gradient(135deg, #f1f5f9 0%, #ffffff 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .plans-mobile-menu-user-profile:hover {
    background: linear-gradient(135deg, #eef2f7 0%, #ffffff 100%);
    border-color: #cbd5e1;
}

[data-theme="light"] .plans-mobile-menu-user-name {
    color: #0f172a;
}

[data-theme="light"] .plans-mobile-menu-user-email {
    color: #64748b;
}

[data-theme="light"] .plans-mobile-menu-user-tier-icon {
    color: #2563eb;
    fill: #2563eb;
}

[data-theme="light"] .plans-mobile-menu-user-tier-text {
    color: #2563eb;
}

[data-theme="light"] .plans-mobile-menu-user-avatar {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.25));
}

[data-theme="light"] .plans-mobile-menu-avatar-initial {
    color: #1e40af;
}

/* ── Logout button ── */
[data-theme="light"] .plans-mobile-menu-user-logout {
    color: #475569;
    border-color: #e2e8f0;
    background: #ffffff;
}

[data-theme="light"] .plans-mobile-menu-user-logout:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

/* ── Back to Home ── */
[data-theme="light"] .plans-mobile-menu-home-footer {
    border-top-color: #e2e8f0;
}

[data-theme="light"] .plans-mobile-menu-home-link {
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.04);
    font-weight: 600;
}

[data-theme="light"] .plans-mobile-menu-home-link:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.4);
    color: #1d4ed8;
}

/* ── Chat list items ── */
[data-theme="light"] .plans-mobile-menu-chats-list {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .plans-mobile-menu-chat-item-content {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #475569;
}

[data-theme="light"] .plans-mobile-menu-chat-item-content:active {
    background: #f1f5f9;
}

[data-theme="light"] .plans-mobile-menu-chat-item.is-active .plans-mobile-menu-chat-item-content {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.25);
    color: #1e293b;
}

[data-theme="light"] .plans-mobile-menu-section-label {
    color: #2563eb !important;
}

/* ── Section dividers ── */
[data-theme="light"] .plans-mobile-menu-section + .plans-mobile-menu-section {
    border-top-color: #e2e8f0;
}

[data-theme="light"] .plans-mobile-menu-section-tools {
    border-top-color: #e2e8f0;
}

/* ── Scrim ── */
[data-theme="light"] .plans-mobile-menu-scrim {
    background: rgba(0, 0, 0, 0.25);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Welcome hero (title, intro, chips)
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .plans-chat-welcome-title {
    background: linear-gradient(135deg, #0f172a 40%, #2563eb 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="light"] .plans-chat-welcome-intro {
    color: #475569 !important;
}

[data-theme="light"] .plans-chat-welcome-intro strong {
    color: #0f172a !important;
}

[data-theme="light"] .plans-chat-welcome-chip {
    color: #334155 !important;
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .plans-chat-welcome-chip:hover {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    color: #1e293b !important;
    box-shadow: 0 3px 12px rgba(59, 130, 246, 0.1) !important;
}

[data-theme="light"] .plans-chat-welcome-logo {
    filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.15)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Mobile Vault Drawer
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .plans-mobile-vault-drawer {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-bottom-color: #e2e8f0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .plans-mobile-vault-drawer-header {
    background: rgba(59, 130, 246, 0.04);
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .plans-mobile-vault-drawer-title {
    color: #0f172a;
}

[data-theme="light"] .plans-mobile-vault-drawer-close {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #475569;
}

[data-theme="light"] .plans-mobile-vault-drawer-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

[data-theme="light"] .plans-mobile-vault-drawer-empty {
    color: #64748b;
}

[data-theme="light"] .plans-mobile-vault-drawer-item-link {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
}

[data-theme="light"] .plans-mobile-vault-drawer-item-link:hover,
[data-theme="light"] .plans-mobile-vault-drawer-item-link:focus {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .plans-mobile-vault-drawer-item-name {
    color: #0f172a;
}

[data-theme="light"] .plans-mobile-vault-drawer-item-meta {
    color: #64748b;
}

[data-theme="light"] .plans-mobile-vault-drawer-item-thumb {
    background-color: #f1f5f9;
}

[data-theme="light"] .plans-mobile-vault-drawer-footer {
    border-top-color: #e2e8f0;
}

[data-theme="light"] .plans-mobile-vault-drawer-link {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.15));
    border-color: rgba(59, 130, 246, 0.35);
    color: #2563eb;
}

[data-theme="light"] .plans-mobile-vault-drawer-link:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.25));
    border-color: #2563eb;
}

[data-theme="light"] .plans-mobile-vault-scrim {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .plans-mobile-vault-btn {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
}

[data-theme="light"] .plans-mobile-vault-btn:hover,
[data-theme="light"] .plans-mobile-vault-btn:focus {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Mobile Toolbox Overlay (overrides mobile-specific dark bg)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [data-theme="light"] .plans-toolbox-overlay .plans-toolbox-scrim {
        background: rgba(255, 255, 255, 0.7);
    }

    [data-theme="light"] .plans-toolbox {
        background: #ffffff;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Mobile Primary Column (plans viewer / tool drawers)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [data-theme="light"] .plans-primary-column {
        background:
            radial-gradient(circle at 10% 8%, rgba(59, 130, 246, 0.06), transparent 55%),
            radial-gradient(circle at 80% 4%, rgba(126, 250, 209, 0.05), transparent 50%),
            #ffffff;
    }

    [data-theme="light"] .plans-mobile-drawer-header {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    }

    [data-theme="light"] .plans-mobile-drawer-back {
        border-color: #cbd5e1;
        background: #ffffff;
        color: #1e293b;
    }

    [data-theme="light"] .plans-mobile-drawer-back:hover {
        background: #f1f5f9;
    }

    [data-theme="light"] .plans-mobile-drawer-title {
        color: #0f172a;
    }

    [data-theme="light"] .plans-tool-drawer-footer {
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.4));
    }

    [data-theme="light"] .plans-tool-drawer-footer-btn {
        border-color: rgba(59, 130, 246, 0.3);
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.04));
        color: #2563eb;
    }

    [data-theme="light"] .plans-tool-drawer-footer-btn:hover,
    [data-theme="light"] .plans-tool-drawer-footer-btn:active {
        border-color: rgba(59, 130, 246, 0.5);
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
    }
}