@import url("./theme.css");

/* Hide the "Built with Chainlit" watermark */
.watermark {
    display: none !important;
}

/* Hide README button from Chainlit 2.8.3 */
#readme-button {
    display: none !important;
}

/* Enforce Inter Font Globally */
body {
    font-family: 'Inter', sans-serif !important;
}

/* Notification skin (shared card/modal styling) */
.notif-skin .notif-card {
    border-radius: 12px !important;
    border: 1px solid hsl(var(--border)) !important;
    background: hsl(var(--card) / 0.92) !important;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none !important;
    padding: 12px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}
.dark .notif-skin .notif-card {
    background: hsl(var(--card) / 0.95) !important;
}
.notif-skin .notif-card.notif-accent {
    border-left: 3px solid hsl(var(--primary)) !important;
}
.notif-skin .notif-card:hover {
    border-color: hsl(var(--primary)) !important;
    background: hsl(var(--card)) !important;
}
.notif-skin .notif-modal {
    border-radius: 14px !important;
    border: 1px solid hsl(var(--border)) !important;
    background: hsl(var(--card)) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45) !important;
    padding: 22px !important;
    z-index: 200 !important;
    width: 72vw !important;
    max-width: 860px !important;
}
.notif-skin .notif-modal .notif-content {
    border-top: 1px solid hsl(var(--border)) !important;
    padding-top: 6px !important;
    margin-top: 2px !important;
}
.notif-skin .notif-modal .notif-row {
    gap: 14px !important;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
}
.notif-skin .notif-modal .notif-media {
    margin-right: 10px !important;
}
.notif-skin .notif-title {
    font-size: 13px !important;
    font-weight: 600 !important;
}
.notif-skin .notif-badge {
    font-size: 10px !important;
    height: 18px !important;
}
.notif-skin .notif-modal .notif-badge-sm {
    font-size: 9px !important;
    height: 16px !important;
    line-height: 1.2 !important;
    padding: 2px 6px !important;
}
.notif-skin .notif-modal .notif-body {
    border: 1px solid hsl(var(--border)) !important;
    background: hsl(var(--muted) / 0.4) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    min-height: 120px !important;
    color: hsl(var(--foreground)) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    width: 100% !important;
    margin-bottom: 4px !important;
}
.notif-skin .notif-modal .notif-actions {
    border-top: 1px solid hsl(var(--border)) !important;
    padding-top: 12px !important;
    margin-top: 8px !important;
}
.notif-skin .notif-actions button {
    min-width: 110px !important;
    height: 36px !important;
    font-size: 13px !important;
}
.notif-skin .notif-list {
    background: transparent !important;
}
.notif-skin .notif-list > div {
    background: transparent !important;
}
.notif-skin .notif-modal .notif-button-sm {
    font-size: 12px !important;
    height: 32px !important;
    padding: 6px 10px !important;
    line-height: 1.3 !important;
}
.notif-skin .media-rail {
    width: 320px !important;
    max-width: 100% !important;
}
.notif-skin .media-rail img {
    height: 200px !important;
    object-fit: cover !important;
}
.notif-skin .notif-time {
    font-size: 11px !important;
    color: hsl(var(--muted-foreground)) !important;
}
.notif-skin .notif-links a {
    border: 1px solid hsl(var(--border)) !important;
    background: hsl(var(--muted) / 0.2) !important;
    color: hsl(var(--foreground)) !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
}

/* ============================================================================ */
/* THEME OVERRIDES - FRACTL BRANDING (Ultra Crisp) */
/* ============================================================================ */

:root {
    /* Brand Colors - HSL */
    --brand-orange: 12 83% 54%; /* #e94f29 */
    --brand-teal: 161 58% 54%;  /* #45cea2 */
    --brand-teal-dark: 168 76% 42%; /* User provided hover color */
    
    /* LIGHT MODE DEFAULT OVERRIDES */
    --primary: var(--brand-orange);
    --primary-foreground: 0 0% 100%;
    --accent: var(--brand-teal);
    --accent-foreground: 0 0% 100%;
    
    /* Ensure text is visible in light mode */
    --muted: 0 0% 90%;
    --muted-foreground: 0 0% 40%; /* Dark Gray */
    --foreground: 0 0% 10%; /* Nearly Black */
    
    /* Glass Variables */
    --glass-bg: var(--background);
    --glass-border: var(--border);
    --glass-border-alpha: 0.3;
    --glass-blur: 8px;
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    --glass-radius: var(--radius);
    
    --modal-glass-bg: var(--background);
    --modal-glass-border: var(--border);
    --modal-glass-border-alpha: 0.3;
    --modal-glass-blur: 12px;
    --modal-glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    --modal-radius: 16px;
    
    --section-border: hsl(var(--border) / 0.2);
    --section-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dark {
    /* DARK MODE - "Ultra Crisp" #212121 Background */
    --background: 0 0% 13%; /* #212121 */
    --foreground: 0 0% 96%;
    
    /* Panels / Cards - #292929 */
    --card: 0 0% 16%; /* #292929 */
    --card-foreground: 0 0% 96%;
    --popover: 0 0% 16%;
    --popover-foreground: 0 0% 96%;
    
    /* Brand Colors */
    --primary: 12 83% 54%; /* #e94f29 */
    --primary-foreground: 0 0% 100%;
    
    /* Accent - USE TEAL for dark mode consistency */
    --accent: 168 76% 42%; /* Brand Teal Dark */
    --accent-foreground: 0 0% 100%;
    
    --muted: 0 0% 27%;
    --muted-foreground: 0 0% 70%;
    
    /* Borders - #454545 */
    --border: 0 0% 27%; /* #454545 */
    --input: 0 0% 27%;
    --ring: 12 83% 54%; /* Orange Ring */
    
    /* Sidebar */
    --sidebar-background: 0 0% 13%; /* #212121 */
    --sidebar-foreground: 0 0% 96%;
    --sidebar-primary: 12 83% 54%;
    --sidebar-border: 0 0% 20%; /* Slightly darker border for sidebar separation */
    
    /* Glass Adjustments */
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --modal-glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    --glass-border-alpha: 0.5;
    --modal-glass-border-alpha: 0.5;
    --section-border: hsl(var(--border) / 0.35);
    --section-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}


/* Workflow Telemetry Badge */
.workflow-telemetry-slot {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

.workflow-telemetry-slot.is-empty {
    display: inline-flex;
}

.workflow-telemetry-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.workflow-telemetry-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.workflow-telemetry-badge:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.workflow-telemetry-badge .telemetry-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: hsl(var(--primary)); /* Use Brand Orange */
    box-shadow: 0 0 8px hsla(var(--primary) / 0.6);
    animation: telemetry-dot-pulse 1.6s ease-in-out infinite;
}

.workflow-telemetry-badge .telemetry-label {
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.chainlit-sidebar-transition .flex.flex-col.mx-auto.w-full[style*="max-width: min(60rem"],
body.chainlit-sidebar-transition .flex.flex-col.mx-auto.w-full[style*="max-width:min(60rem"] {
    transition: margin 180ms cubic-bezier(0.4, 0, 0.2, 1), padding 180ms cubic-bezier(0.4, 0, 0.2, 1), max-width 180ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: margin, padding, max-width;
}

body.chainlit-sidebar-open .flex.flex-col.mx-auto.w-full[style*="max-width: min(60rem"],
body.chainlit-sidebar-open .flex.flex-col.mx-auto.w-full[style*="max-width:min(60rem"] {
    will-change: margin, padding, max-width;
}

@keyframes telemetry-dot-pulse {
    0% {
        transform: scale(0.85);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(0.85);
        opacity: 0.6;
    }
}

/* Removed - conflicts with modal backdrop blur */

body[data-project-ui="true"] div[data-radix-dialog-overlay],
.cl-dialog-overlay,
.dialog-overlay,
div[class*="DialogOverlay"],
div[class*="dialogOverlay"] {
    background: rgba(0, 0, 0, 0.50) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    z-index: 1100 !important;
}

/* Dark mode - lighter overlay */
.dark div[data-radix-dialog-overlay],
.dark .cl-dialog-overlay,
.dark .dialog-overlay,
.dark div[class*="DialogOverlay"],
.dark div[class*="dialogOverlay"] {
    background: rgba(0, 0, 0, 0.60) !important;
}

body[data-project-ui="true"] .fixed.inset-0.z-50[data-state][data-aria-hidden="true"] {
    background: rgba(0, 0, 0, 0.52) !important;
    backdrop-filter: blur(18px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(175%) !important;
}

body.dark[data-project-ui="true"] .fixed.inset-0.z-50[data-state][data-aria-hidden="true"] {
    background: rgba(0, 0, 0, 0.65) !important;
}

.glass-modal-shell {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: hsl(var(--background));
    border: 2px solid hsl(var(--border) / 0.3);
    box-shadow: var(--modal-glass-shadow);
    border-radius: var(--modal-radius);
    color: hsl(var(--foreground));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    z-index: 1200;
}

.glass-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}

.glass-panel {
    background: hsl(var(--background));
    border: 1px solid hsla(var(--border) / 0.35);
    box-shadow: var(--section-shadow);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--modal-radius);
    color: hsl(var(--foreground));
}

.chip-muted {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-radius: 9999px;
    border: 1px solid hsla(var(--border) / 0.6);
    background: hsla(var(--muted) / 0.4);
    color: hsl(var(--muted-foreground));
}

.chip-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-radius: 9999px;
    border: 1px solid hsla(var(--accent) / 0.6);
    background: hsla(var(--accent) / 0.15);
    color: hsl(var(--accent));
}

.invite-scroll,
.invite-scroll .invite-list,
.invite-scroll .invite-card {
    width: 100%;
}

.invite-card {
    overflow: hidden;
    box-sizing: border-box;
}

.invite-scroll {
    position: relative;
}

.invite-scroll .invite-list {
    position: relative;
    z-index: 1;
}

.glass-modal-shell::before {
    content: none;
}

.glass-panel {
    background: var(--muted) !important;
    border: 1px solid var(--section-border) !important;
    box-shadow: var(--section-shadow) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
    color: hsl(var(--foreground));
}

.glass-panel-muted {
    background: var(--accent) !important;
    border: 1px solid var(--section-border) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-radius: 8px !important;
}

/* Ensure header has relative positioning for absolute pseudo-element */
/* Keep z-index low so modals appear above it */
#header {
    position: relative !important;
    z-index: 10 !important;
}

/* Force header button positioning - more specific selector */
div#header[data-workspace-context]::before {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    right: auto !important;
    bottom: auto !important;
}

/* Header builder launcher */
.builder-menu-wrapper[data-global="true"] {
    position: fixed;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    top: 14px;
    left: 110px;
    z-index: 30;
    pointer-events: auto;
}

.build-launcher-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.45rem;
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: hsl(var(--foreground));
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 34px;
}

.build-launcher-button svg {
    width: 16px;
    height: 16px;
}

.build-labels {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    align-items: flex-start;
}

.build-label {
    font-size: 0.78rem;
    font-weight: 600;
}

.build-subtitle {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    opacity: 0.55;
}

.builder-menu-wrapper .dropdown-arrow {
    transition: transform 0.2s ease;
}

.builder-menu-wrapper.open .dropdown-arrow {
    transform: rotate(180deg);
}

.build-launcher-button:hover {
    background: rgba(28, 189, 158, 0.18);
    border-color: rgba(28, 189, 158, 0.6);
}

.builder-menu-wrapper.open .build-launcher-button {
    background: #1cbd9d;
    color: #032c23;
    border-color: #1cbd9d;
}

.builder-dropdown-content {
    position: absolute;
    top: 100%;
    margin-top: 4px;
    left: 0;
    width: 360px;
    border-radius: var(--glass-radius, 12px);
    border: 1px solid hsla(var(--border) / 0.85);
    background: hsl(var(--background) / 0.95);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px;
    display: none;
    z-index: 1000;
}

.builder-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid hsla(var(--border) / 0.55);
    background: hsl(var(--muted) / 0.22);
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    cursor: pointer;
}

.builder-card:last-child {
    margin-bottom: 0;
}

.builder-card:hover {
    transform: translateX(2px) translateY(-2px);
    border-color: rgba(28, 189, 158, 0.5);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    background-color: rgba(28, 189, 158, 0.1);
}

.builder-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 189, 158, 0.16);
    color: #1cbd9d;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(28, 189, 158, 0.2);
}

.builder-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
}

.builder-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.builder-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.builder-card-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(28, 189, 158, 0.16);
    color: rgba(28, 189, 158, 0.95);
    border: 1px solid rgba(28, 189, 158, 0.3);
}

.builder-card-badge--flows {
    background: rgba(250, 115, 21, 0.14);
    color: rgba(250, 115, 21, 0.95);
    border-color: rgba(250, 115, 21, 0.32);
}

.builder-card-description {
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    line-height: 1.35;
}

.builder-card-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(28, 189, 158, 0.12);
    color: rgba(28, 189, 158, 0.65);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.builder-card-chevron svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
}

.builder-card:hover .builder-card-chevron {
    background: rgba(28, 189, 158, 0.38);
    color: #042c25;
    transform: translateX(2px);
}

[data-theme="dark"] .builder-dropdown-content {
    border-color: rgba(148, 163, 184, 0.35);
    background: #292929;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.dark .builder-dropdown-content {
    background: #292929;
}

[data-theme="dark"] .builder-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.32);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.2);
}

[data-theme="dark"] .builder-card-icon {
    background: rgba(28, 189, 158, 0.22);
    color: rgba(28, 189, 158, 0.98);
}

[data-theme="dark"] .builder-card-description {
    color: rgba(226, 232, 240, 0.75);
}

[data-theme="dark"] .builder-card-chevron {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .builder-card:hover .builder-card-chevron {
    background: rgba(255, 255, 255, 0.32);
    color: rgba(28, 189, 158, 0.98);
}

@media (max-width: 640px) {
    .builder-menu-wrapper[data-global="true"] {
        left: 16px;
        right: auto;
        top: 11px;
        gap: 0;
    }

    .builder-menu-wrapper[data-global="true"] .build-labels,
    .builder-menu-wrapper[data-global="true"] .dropdown-arrow {
        display: none !important;
    }

    .builder-menu-wrapper[data-global="true"] .build-launcher-button {
        width: 36px;
        height: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: hsl(var(--muted-foreground));
        vertical-align: middle;
        line-height: 0;
    }

    .builder-menu-wrapper[data-global="true"] .build-launcher-button svg {
        width: 18px;
        height: 18px;
        margin: 0;
        color: #dedede;
        display: block;
    }

    .builder-dropdown-content {
        position: fixed;
        top: 64px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        min-width: auto;
        margin-top: 0;
        z-index: 1200;
    }
}

/* Form elements in modals - unified for both light and dark modes */
/* Only style text inputs and textareas, NOT selects or comboboxes */
body[data-project-ui="true"] .glass-modal-shell input[type="text"],
body[data-project-ui="true"] .glass-modal-shell input[type="search"],
body[data-project-ui="true"] .glass-modal-shell input[type="email"],
body[data-project-ui="true"] .glass-modal-shell input[type="password"],
body[data-project-ui="true"] .glass-modal-shell input[type="number"],
body[data-project-ui="true"] .glass-modal-shell input:not([type]),
body[data-project-ui="true"] .glass-modal-shell textarea {
    background-color: transparent !important;
    transition: all 0.2s ease !important;
}

/* Select hover states - removed to prevent gray backgrounds */

/* Select focus states - only for actual text inputs */
body[data-project-ui="true"] .glass-modal-shell input[type="text"]:focus,
body[data-project-ui="true"] .glass-modal-shell input[type="search"]:focus,
body[data-project-ui="true"] .glass-modal-shell input:not([type]):focus,
body[data-project-ui="true"] .glass-modal-shell textarea:focus {
    outline: none !important;
}

/* Dropdown menus from selects AND context menus (... menus) */
body[data-project-ui="true"] [role="listbox"],
body[data-project-ui="true"] [role="menu"] {
    background: hsl(var(--background) / 0.95) !important;
    border: 2px solid hsl(var(--glass-border) / var(--glass-border-alpha)) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: var(--glass-radius) !important;
    padding: 6px !important;
    z-index: 1300 !important;
}

/* Dropdown items - consistent styling */
body[data-project-ui="true"] [role="option"],
body[data-project-ui="true"] [role="menuitem"] {
    color: hsl(var(--foreground)) !important;
    border-radius: 4px !important;
    padding: 8px 12px 8px 32px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    margin: 2px 0 !important;
    cursor: pointer !important;
    position: relative !important;
}

/* Hover states - use our accent colors */
body[data-project-ui="true"] [role="option"]:hover,
body[data-project-ui="true"] [role="menuitem"]:hover {
    background: hsl(var(--accent) / 0.2) !important;
    color: hsl(var(--foreground)) !important;
    cursor: pointer !important;
}

/* Selected/checked items */
body[data-project-ui="true"] [role="option"][data-state="checked"],
body[data-project-ui="true"] [role="option"][aria-selected="true"] {
    background: hsl(var(--accent) / 0.5) !important;
}

/* Destructive items (Delete, Remove) - keep red */
body[data-project-ui="true"] [role="menuitem"].text-destructive {
    color: hsl(var(--destructive)) !important;
}

body[data-project-ui="true"] [role="menuitem"].text-destructive:hover {
    background: hsl(var(--destructive) / 0.1) !important;
    color: hsl(var(--destructive)) !important;
}

body[data-project-ui="true"] .glass-modal-shell button {
    color: hsl(var(--foreground));
}

/* File Manager Modal - FORCE 85vw width by targeting ALL possible selectors */
/* Use the important modifier classes from Tailwind */
.glass-modal-shell.\!w-\[85vw\] {
    width: 85vw !important;
}

.glass-modal-shell.\!max-w-\[85vw\] {
    max-width: 85vw !important;
}

/* Also target by role and data attributes in case Radix adds those */
div[role="dialog"].glass-modal-shell.\!w-\[85vw\] {
    width: 85vw !important;
    max-width: 85vw !important;
}

/* Default glass modals (e.g., file manager) - ensure wide layout restored */
div[role="dialog"].glass-modal-shell:not(.notif-modal) {
    width: 85vw !important;
    max-width: 85vw !important;
}

/* Target the Radix portal content wrapper too */
[data-radix-popper-content-wrapper] > .glass-modal-shell.\!w-\[85vw\],
[data-radix-dialog-content].glass-modal-shell.\!w-\[85vw\] {
    width: 85vw !important;
    max-width: 85vw !important;
}

/* Small modals can scroll normally */
body[data-project-ui="true"] .glass-modal-shell.sm\\:max-w-md,
body[data-project-ui="true"] .glass-modal-shell.max-w-3xl,
body[data-project-ui="true"] .glass-modal-shell.sm\\:max-w-lg {
    overflow-y: auto !important;
}

/* ============================================================================ */
/* PROJECT TREE SIDEBAR ENHANCEMENTS - Glass Morphism Style */
/* ============================================================================ */

/* Client rows - glass card style with reduced padding */
body[data-project-ui="true"] .sortable-item > div[data-target-type="client"] {
    position: relative;
    padding: 6px 8px !important;
    border-radius: 8px;
    margin: 3px 0;
    cursor: pointer;
    border: 1px solid transparent !important;
    background: transparent;
    transition: all 0.2s ease;
}

body[data-project-ui="true"] .sortable-item > div[data-target-type="client"]:hover {
    background: var(--muted) !important;
    border: 1px solid var(--section-border) !important;
    box-shadow: var(--section-shadow) !important;
}

/* Active client - subtle glass panel effect */
body[data-project-ui="true"] .sortable-item > div[data-target-type="client"]:has(.text-orange-500.fill-current) {
    background: var(--muted) !important;
    font-weight: 600;
}

body[data-project-ui="true"] .sortable-item > div[data-target-type="client"]:has(.text-orange-500.fill-current) svg.lucide-building-2 {
    color: hsl(var(--primary)) !important;
    opacity: 1 !important;
}

/* Client icons - blue (primary color) */
body[data-project-ui="true"] .sortable-item > div[data-target-type="client"] svg.lucide-building-2 {
    color: hsl(var(--primary)) !important;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* Project rows - glass card style with reduced padding */
body[data-project-ui="true"] .project-level {
    position: relative;
    padding: 5px 8px 5px 16px !important;
    margin: 2px 0 2px 8px !important;
    border-radius: 8px;
    border: 1px solid transparent !important;
    background: transparent;
    transition: all 0.2s ease;
}

body[data-project-ui="true"] .project-level:hover {
    background: var(--accent) !important;
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Active project - subtle highlight only */
body[data-project-ui="true"] .project-level:has(.text-orange-500.fill-current) {
    background: var(--accent) !important;
    font-weight: 600;
    border: 1px solid transparent !important;
}

body[data-project-ui="true"] .project-level:has(.text-orange-500.fill-current) svg.lucide-folder-kanban {
    color: hsl(var(--primary)) !important;
    opacity: 1 !important;
}

/* Project icons - green (secondary accent) - works in both light and dark */
body[data-project-ui="true"] .project-level svg.lucide-folder-kanban {
    color: hsl(142, 60%, 50%) !important;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* Dark mode - make green slightly lighter for visibility */
.dark body[data-project-ui="true"] .project-level svg.lucide-folder-kanban {
    color: hsl(142, 60%, 55%) !important;
}

/* Task rows - glass card style with reduced padding */
body[data-project-ui="true"] .task-level {
    position: relative;
    padding: 4px 8px 4px 24px !important;
    margin: 1px 0 1px 16px !important;
    border-radius: 6px;
    border: 1px solid transparent !important;
    background: transparent;
    transition: all 0.2s ease;
}

body[data-project-ui="true"] .task-level:hover {
    background: var(--accent) !important;
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Active task - subtle highlight only */
body[data-project-ui="true"] .task-level:has(.text-orange-500.fill-current) {
    background: var(--accent) !important;
    font-weight: 600;
    border: 1px solid transparent !important;
}

body[data-project-ui="true"] .task-level:has(.text-orange-500.fill-current) svg.lucide-check-circle-2 {
    color: hsl(var(--primary)) !important;
    opacity: 1 !important;
}

/* Task icons - muted foreground (theme-aware neutral) */
body[data-project-ui="true"] .task-level svg.lucide-check-circle-2 {
    color: var(--muted-foreground) !important;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

/* Expanded sections - no borders, just subtle background and spacing */
body[data-project-ui="true"] .projects-container {
    background: transparent;
    padding: 2px 0;
    margin: 2px 0 4px 0;
}

body[data-project-ui="true"] .tasks-container {
    background: transparent;
    padding: 2px 0;
    margin: 2px 0 4px 0;
}

/* Better spacing */
body[data-project-ui="true"] .sortable-item {
    margin-bottom: 2px;
}

/* Star icons - better visibility and interaction */
body[data-project-ui="true"] .sortable-item svg.lucide-star:not(.fill-current) {
    opacity: 0.3;
    transition: all 0.2s ease;
}

body[data-project-ui="true"] .sortable-item:hover svg.lucide-star:not(.fill-current) {
    opacity: 0.6;
}

/* Active star - make it pop with orange glow */
body[data-project-ui="true"] .sortable-item svg.lucide-star.fill-current {
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4));
}

/* Chevron icons - better visibility */
body[data-project-ui="true"] svg.lucide-chevron-down {
    opacity: 0.5;
    transition: all 0.2s ease;
}

body[data-project-ui="true"] svg.lucide-chevron-down:hover {
    opacity: 1;
    color: hsl(var(--foreground)) !important;
    transform: scale(1.1);
}

/* Badge counts - glass pill style */
body[data-project-ui="true"] .sortable-item .text-xs.text-muted-foreground:not(svg) {
    background: var(--muted);
    border: 1px solid var(--section-border);
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    min-width: 26px;
    text-align: center;
    font-size: 11px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* GripVertical - show on parent hover */
body[data-project-ui="true"] .sortable-item svg.lucide-grip-vertical {
    opacity: 0.2;
    transition: opacity 0.2s ease;
}

body[data-project-ui="true"] .sortable-item:hover svg.lucide-grip-vertical {
    opacity: 0.6;
}

/* More horizontal button - subtle until hover */
body[data-project-ui="true"] .sortable-item button:has(svg.lucide-more-horizontal) {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

body[data-project-ui="true"] .sortable-item:hover button:has(svg.lucide-more-horizontal) {
    opacity: 1;
}

/* ============================================================================ */
/* INFORMATION DENSITY OVERRIDES - More Text Visible, Compact Layout          */
/* ============================================================================ */

/* ===== THE MAGIC FIX - Override Tailwind's rem base ===== */
html {
    font-size: 14px !important;  /* This scales ALL Tailwind classes */
}

/* Optional: Tighter spacing for specific elements */
.prose p {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Sidebar - Even more compact than default */
aside button,
aside a {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

/* ============================================================================ */
/* CONVERSATION STARTERS - Beautiful, Colorful Cards                           */
/* ============================================================================ */

/* Force horizontal layout on the starters container */
div:has(> button[id^="starter-"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: center !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* Individual starter cards */
button[id^="starter-"] {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.375rem !important;
    border: 1px solid rgba(250, 115, 21, 0.4) !important;
    background: rgba(250, 115, 21, 0.12) !important;
    color: rgb(154, 52, 18) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 60px !important;
    flex: 0 1 calc(50% - 0.375rem) !important;
    box-sizing: border-box !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    user-select: none !important;
    white-space: nowrap !important;
}

/* Dark mode */
.dark button[id^="starter-"],
[data-theme="dark"] button[id^="starter-"] {
    color: hsl(var(--foreground)) !important;
}

/* Light mode hover */
button[id^="starter-"]:hover {
    background: rgba(250, 115, 21, 0.18) !important;
    border-color: rgba(250, 115, 21, 0.6) !important;
}

/* Dark mode hover */
.dark button[id^="starter-"]:hover,
[data-theme="dark"] button[id^="starter-"]:hover {
    background: rgba(250, 115, 21, 0.18) !important;
    border-color: rgba(250, 115, 21, 0.6) !important;
}

/* Icon styling */
button[id^="starter-"] img {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    opacity: 0.7 !important;
    filter: none !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

/* Dark mode - invert SVG colors to white */
.dark button[id^="starter-"] img,
[data-theme="dark"] button[id^="starter-"] img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
}

button[id^="starter-"]:hover img {
    opacity: 0.9 !important;
}

/* Dark mode hover - increase opacity */
.dark button[id^="starter-"]:hover img,
[data-theme="dark"] button[id^="starter-"]:hover img {
    opacity: 0.95 !important;
}

/* Text styling */
button[id^="starter-"] p,
button[id^="starter-"] p.text-muted-foreground,
button[id^="starter-"] .text-muted-foreground {
    color: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Container for icon and text */
button[id^="starter-"] > div {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    align-items: center !important;
    flex: 1 !important;
}

/* Text wrapper */
button[id^="starter-"] p {
    flex: 1 !important;
    white-space: normal !important;
}

/* ============================================================================ */
/* PROJECT CONTEXT TEAM DISPLAY */
/* ============================================================================ */

/* Override inline styles in dark mode for team display */
.dark [class*="lucide-users"] ~ span,
.dark .lucide-users ~ span {
    color: rgb(254, 243, 230) !important;
}

.dark .lucide-users {
    color: rgb(254, 243, 230) !important;
}
.workspace-error-banner {
  border-radius: 8px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(254, 226, 226, 0.95);
  color: #7f1d1d;
  padding: 0.6rem 0.85rem;
  box-shadow: 0 4px 14px rgba(15, 10, 10, 0.08);
}

[data-theme="dark"] .workspace-error-banner {
  background: rgba(127, 29, 29, 0.55);
  border-color: rgba(248, 113, 113, 0.65);
  color: #ffe4e6;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.workspace-error-banner__title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
  font-weight: 600;
  color: #b91c1c;
}

[data-theme="dark"] .workspace-error-banner__title {
  color: #fecdd3;
}

.workspace-error-banner__message {
  font-size: 0.85rem;
  line-height: 1.25rem;
}

[data-theme="dark"] .workspace-error-banner__message {
  color: inherit;
}

/* ============================================================================ */
/* LOGIN PAGE OVERRIDES */
/* ============================================================================ */

/* 1. Hide the default Chainlit login image/banner */
.chainlit-login-page img[src*="login"],
.chainlit-login-page img[src*="logo"] {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. Style the Widget Container */
#fractl-widget-root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    overflow: hidden;
    border-radius: 0;
    background-color: var(--background);
}

/* 3. Style the Auth0 Button - USE BRAND TEAL */
/* Override grid layout for login page to make animation smaller (35% width) */
div.grid.lg\:grid-cols-2 {
    grid-template-columns: 65% 35% !important; /* Form gets 65%, Animation gets 35% */
}

button[class*="MuiButton-root"], 
a[class*="MuiButton-root"] {
    background-color: transparent !important;
    border: 1px solid hsl(var(--input)) !important; /* Stronger border */
    color: hsl(var(--foreground)) !important;
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

button[class*="MuiButton-root"]:hover, 
a[class*="MuiButton-root"]:hover {
    background-color: hsl(var(--accent)) !important; /* Teal Background */
    border-color: hsl(var(--accent)) !important;
    color: white !important;
    box-shadow: 0 0 15px hsla(var(--accent) / 0.4) !important; /* Teal Glow */
    transform: translateY(-1px);
}

/* Hide the Auth0 logo icon if present inside the button */
button[class*="MuiButton-root"] img,
a[class*="MuiButton-root"] img {
    opacity: 0.8;
    filter: brightness(0) invert(1); /* Make icon white if possible */
}

/* Dark Mode Logic for Widget */
.dark #fractl-widget-root {
    background-color: #212121; /* Match specific ultra crisp background */
}

.light #fractl-widget-root {
    background-color: #ffffff;
}

/* ============================================================================ */
/* INJECTED LANDING CONTENT STYLES */
/* ============================================================================ */

/* Animations */
#fractl-hero-text,
#fractl-features,
#fractl-testimonials {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

#fractl-hero-text { animation-delay: 0.1s; }
#fractl-features { animation-delay: 0.3s; }
#fractl-testimonials { animation-delay: 0.5s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Features Grid Hover Effects */
#fractl-features > div > div {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#fractl-features > div > div:hover {
    transform: translateY(-2px);
    background-color: hsla(var(--muted) / 0.8);
}

/* Testimonial Track Animation */
.testimonial-track {
    animation: scrollUp 60s linear infinite;
}

/* Infinite scroll animation */
@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } /* Moves half way (since we duplicated list) */
}

/* Pause scroll on hover */
#fractl-testimonials:hover .testimonial-track {
    animation-play-state: paused;
}

/* ============================================================================ */
/* SIDEBAR HEADER FIX - Prevent Jumping Elements */
/* ============================================================================ */

/* 
   Hide the sidebar trigger button ONLY when it is the first child of the container.
   This is its default position.
   When JS moves it to the right group, it will no longer be the first child,
   so it will automatically become visible.
*/
div[data-sidebar="header"] > div.flex.items-center.justify-between > button#sidebar-trigger-button:first-child {
    display: none !important;
}

/* 
   INSTANT LOGO INJECTION VIA CSS
   - Uses ::before to render logo immediately (no JS delay)
   - Aligned 22px from left edge (Requested 10px more)
   - Uses Base64 Data URI for instant loading
*/
div[data-sidebar="header"] > div.flex.items-center.justify-between::before {
    content: '';
    width: 32px;
    height: 32px;
    /* Embedded Base64 Logo for Instant Load */
    background-image: url(data:image/png;base64,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);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    margin-left: 12px; /* Aligned with requested offset */
    opacity: 0.9;
    cursor: pointer;
}

/* ============================================================================ */
/* CHAINLIT UI LIGHT MODE OVERRIDES - Fix Invisible Buttons */
/* ============================================================================ */

/* Force Chainlit Native Buttons to respect Theme Variables in Light Mode */
html:not(.dark) button.text-muted-foreground,
html:not(.dark) .text-muted-foreground {
    color: hsl(0 0% 40%) !important; /* Explicit Dark Gray */
}

html:not(.dark) button.text-muted-foreground:hover {
    color: hsl(0 0% 10%) !important; /* Black on hover */
    background-color: hsl(0 0% 90%) !important; /* Light Gray BG */
}

/* Specific targeting for Header/Sidebar buttons if generic class fails */
html:not(.dark) #theme-toggle,
html:not(.dark) #sidebar-trigger-button,
html:not(.dark) #search-chats-button,
html:not(.dark) #new-chat-button {
    color: hsl(0 0% 40%) !important;
}

html:not(.dark) #theme-toggle:hover,
html:not(.dark) #sidebar-trigger-button:hover,
html:not(.dark) #search-chats-button:hover,
html:not(.dark) #new-chat-button:hover {
    color: hsl(0 0% 10%) !important;
    background-color: hsl(0 0% 90%) !important;
}

/* ============================================================================ */
/* CHAINLIT UI DARK MODE OVERRIDES - Force White Icons */
/* ============================================================================ */

html.dark button.text-muted-foreground,
html.dark .text-muted-foreground,
html.dark #theme-toggle,
html.dark #sidebar-trigger-button,
html.dark #search-chats-button,
html.dark #new-chat-button {
    color: white !important; /* Force White in Dark Mode */
}

html.dark button.text-muted-foreground:hover,
html.dark #theme-toggle:hover,
html.dark #sidebar-trigger-button:hover,
html.dark #search-chats-button:hover,
html.dark #new-chat-button:hover {
    color: white !important;
    background-color: hsl(var(--muted)) !important;
}

/* ============================================================================ */
/* HEADER DROPDOWN BUTTON UNIFICATION */
/* ============================================================================ */

/* Force standard colors for all custom header buttons */
#team-switcher-btn,
#unified-dropdown-btn,
#manage-projects-btn,
#view-all-teams-btn,
#open-team-manager-btn {
    color: hsl(var(--muted-foreground)) !important;
    border-color: hsl(var(--border)) !important;
    background-color: transparent !important;
    border-radius: 8px !important; /* Standardize radius */
}

/* Active Text Highlighting */
.team-active-name,
#client-value,
#project-value,
#task-value {
    color: hsl(var(--foreground)) !important;
    font-weight: 500 !important;
}

/* Hover States */
#team-switcher-btn:hover,
#unified-dropdown-btn:hover,
#manage-projects-btn:hover,
#view-all-teams-btn:hover,
#open-team-manager-btn:hover {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
}

/* Labels inside buttons */
.workspace-label-inline {
    color: hsl(var(--muted-foreground)) !important;
    opacity: 0.8;
}

/* Dark Mode Overrides */
html.dark #team-switcher-btn,
html.dark #unified-dropdown-btn,
html.dark #manage-projects-btn,
html.dark #view-all-teams-btn,
html.dark #open-team-manager-btn {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .team-active-name,
html.dark #client-value,
html.dark #project-value,
html.dark #task-value {
    color: white !important;
}

html.dark #team-switcher-btn:hover,
html.dark #unified-dropdown-btn:hover,
html.dark #manage-projects-btn:hover,
html.dark #view-all-teams-btn:hover,
html.dark #open-team-manager-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* ============================================================================ */
/* DROPDOWN & SIDEBAR FINAL POLISH */
/* ============================================================================ */

/* Fix Workspace Dropdown Menu Border (Remove Orange) and Orientation */
.unified-dropdown-content,
.team-dropdown-content {
    border-color: hsl(var(--border)) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    left: 0 !important; /* Align to Left Edge */
    right: auto !important;
    transform-origin: top left !important;
}

html.dark .unified-dropdown-content,
html.dark .team-dropdown-content {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background-color: #292929 !important; /* Match Panels */
}

/* Sidebar/Dropdown Footer Buttons (View All, Manage) */
.team-footer-button {
    border-color: hsl(var(--border)) !important;
    color: hsl(var(--muted-foreground)) !important;
    background: transparent !important;
}

.team-footer-button:hover {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
}

/* "Manage" Button - Ghost/Secondary Style */
#open-team-manager-btn:hover,
.team-manage-button:hover {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--foreground)) !important;
}

/* Hub Sidebar Bottom Buttons (Settings, Create Team) */

/* Settings Button */
.hub-action-button--ghost {
    border-color: hsl(var(--border)) !important;
    color: hsl(var(--muted-foreground)) !important;
    background: transparent !important;
}

.hub-action-button--ghost:hover {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
}

/* Create Team Button - SOLID TEAL (Primary Action) */
.hub-action-button--primary,
#create-team-btn,
button[type="submit"].button-primary {
    background-color: hsl(var(--accent)) !important;
    border: 1px solid hsl(var(--accent)) !important; /* Teal Border */
    color: white !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
}

.hub-action-button--primary:hover,
#create-team-btn:hover,
button[type="submit"].button-primary:hover {
    transform: translateY(-1px); /* Lift effect */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; /* Subtle shadow lift */
    filter: none !important;
}

/* Dark Mode Specifics for Sidebar Buttons */
html.dark .hub-action-button--primary {
    color: white !important;
}

/* Account menu injected item hover parity */
button[data-account-settings-item="true"] {
    border-radius: 8px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

button[data-account-settings-item="true"]:hover,
button[data-account-settings-item="true"]:focus-visible {
    background-color: rgba(226, 232, 240, 0.6) !important;
    color: hsl(var(--foreground)) !important;
}

html.dark button[data-account-settings-item="true"]:hover,
html.dark button[data-account-settings-item="true"]:focus-visible,
body[data-theme="dark"] button[data-account-settings-item="true"]:hover,
body[data-theme="dark"] button[data-account-settings-item="true"]:focus-visible,
html.dark [role="menu"] button[data-account-settings-item="true"]:hover,
html.dark [role="menu"] button[data-account-settings-item="true"]:focus-visible {
    background-color: #1cbd9d !important;
    color: #032c23 !important;
}

/* Account settings sidebar styling */
body[data-sidebar-owner="account_settings"] div[data-panel][data-panel="content"] {
    background: transparent !important;
}

body[data-sidebar-owner="account_settings"] div[data-sidebar="sidebar"] {
    background: hsl(var(--background)) !important;
    border-left: 1px solid hsl(var(--border)) !important;
    box-shadow: -12px 0 30px rgba(15, 23, 42, 0.16) !important;
}

body[data-sidebar-owner="account_settings"] div[data-sidebar="content"],
body[data-sidebar-owner="account_settings"] div[data-sidebar="group"],
body[data-sidebar-owner="account_settings"] div[data-sidebar="group-content"] {
    background: transparent !important;
}

body[data-sidebar-owner="account_settings"] div[data-sidebar="content"] {
    padding: 0 !important;
}

body[data-sidebar-owner="account_settings"] div[data-sidebar="group"] {
    border: none !important;
    box-shadow: none !important;
}

body[data-sidebar-owner="account_settings"] .glass-panel,
body[data-sidebar-owner="account_settings"] .glass-panel-muted {
    background-color: rgba(15, 23, 42, 0.04) !important;
}

body[data-sidebar-owner="account_settings"] .account-settings-shell {
    background: transparent !important;
}

/* Chat send button styling */
.chat-send-button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: hsl(var(--primary)) !important;
    border: 1px solid hsl(var(--primary)) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(250, 115, 21, 0.25);
}

.chat-send-button svg {
    width: 18px;
    height: 18px;
    color: currentColor;
}

.chat-send-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(250, 115, 21, 0.35);
}

html.dark .chat-send-button {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* ============================================================================ */
/* FINAL SURGICAL FIXES - Sidebar Shadow & Create Team Button */
/* ============================================================================ */

/* 1. Sidebar Styling (Dark Mode) - Match Login Page */
html.dark [data-sidebar="sidebar"] {
    background-color: #262626 !important; /* Slightly lighter than main BG */
    box-shadow: 10px 0 30px rgba(0,0,0,0.3) !important; /* Deep shadow separation */
    border-right: none !important;
    z-index: 50 !important; /* Ensure shadow sits above content */
}

/* 2. "Create Team" Button Fix (Light Mode) - Force Teal Visibility */
html:not(.dark) .hub-action-button--primary {
    background-color: #45cea2 !important; /* Brand Teal */
    border-color: #45cea2 !important;
    color: white !important;
}

html:not(.dark) .hub-action-button--primary:hover {
    background-color: #19bd7e !important; /* Darker Teal on Hover */
    border-color: #19bd7e !important;
}

/* ============================================================================ */
/* REMOVE SIDEBAR GRADIENT OVERLAY */
/* ============================================================================ */

/* Hide the fade-out gradient on sidebar history items */
[data-sidebar="menu-button"] > div.absolute.bg-gradient-to-l {
    display: none !important;
}

/* ============================================================================ */
/* FINAL POLISH - HEADER & STARTERS */
/* ============================================================================ */

/* 1. Header Button Visibility (Hub/Workspace Labels & Icons) */
#team-switcher-btn .workspace-label-inline,
#unified-dropdown-btn .workspace-label-inline,
#team-switcher-btn svg,
#unified-dropdown-btn svg {
    color: hsl(var(--foreground)) !important;
    opacity: 1 !important;
}

/* 2. Notification Button Consistency (Match Chainlit Native) */
.notifications-trigger {
    height: 2.25rem !important; /* h-9 (36px) */
    width: 2.25rem !important;  /* w-9 (36px) */
    border-radius: 0.375rem !important; /* rounded-md (6px) */
    /* Colors are handled by general overrides, but let's be specific to match chainlit */
}

html:not(.dark) .notifications-trigger:hover {
    background-color: hsl(var(--accent)) !important; /* Chainlit uses accent for hover */
    color: hsl(var(--accent-foreground)) !important;
}

html.dark .notifications-trigger:hover {
    background-color: hsl(var(--muted)) !important;
    color: white !important;
}

/* 3. Starters Styling - "Fractl Card" Look */
button[id^="starter-"] {
    border-radius: 12px !important; /* Matches cards/panels */
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    height: auto !important; /* Allow height to grow */
    min-height: 3.5rem !important; /* Taller for cleaner look */
    padding: 0.75rem 1rem !important;
}

/* Hover Effect for Starters */
button[id^="starter-"]:hover {
    border-color: hsl(var(--primary)) !important; /* Orange Border on Hover */
    background-color: hsl(var(--muted)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Dark Mode Specifics for Starters */
html.dark button[id^="starter-"] {
    background-color: #292929 !important; /* Panel Color */
}

html.dark button[id^="starter-"]:hover {
    background-color: #333333 !important;
    border-color: hsl(var(--primary)) !important;
}

/* ============================================================================ */
/* LIGHT MODE STARTERS FIX - Force White Background */
/* ============================================================================ */

html:not(.dark) button[id^="starter-"] {
    background-color: #ffffff !important;
}

html:not(.dark) button[id^="starter-"]:hover {
    background-color: hsl(0 0% 96%) !important; /* Subtle gray hover */
    border-color: hsl(var(--primary)) !important;
}

/* ============================================================================ */
/* USER MESSAGE BUBBLE - GLASSY TEAL (Option A) */
/* ============================================================================ */

/* Target the user message bubble based on its distinct classes */
div[class*="bg-accent"][class*="ml-auto"][class*="rounded-3xl"] {
    background-color: hsla(var(--accent) / 0.15) !important;
    border: 1px solid hsla(var(--accent) / 0.3) !important;
    border-radius: 12px !important; /* Squircle > Round */
    color: hsl(var(--foreground)) !important; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    backdrop-filter: blur(4px);
}

/* Dark Mode Specifics */
html.dark div[class*="bg-accent"][class*="ml-auto"][class*="rounded-3xl"] {
    background-color: hsla(var(--accent) / 0.2) !important;
    border-color: hsla(var(--accent) / 0.4) !important;
    color: white !important;
}

/* ============================================================================ */
/* USER MESSAGE BUBBLE - CLEAN DARK (Refined) */
/* ============================================================================ */

/* Override previous Glassy Teal with Clean Dark (Panel Style) */
div[class*="bg-accent"][class*="ml-auto"][class*="rounded-3xl"] {
    background-color: hsl(var(--card)) !important; /* Match Panels */
    border: 1px solid hsl(var(--border)) !important; /* Match Borders */
    color: hsl(var(--foreground)) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    backdrop-filter: none !important;
}

/* Dark Mode Specifics */
html.dark div[class*="bg-accent"][class*="ml-auto"][class*="rounded-3xl"] {
    background-color: #292929 !important;
    border-color: #454545 !important;
    color: white !important;
}

/* ============================================================================ */
/* CONTEXT NOTIFICATION TOAST (Fractl Style) */
/* ============================================================================ */

.fractl-toast-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    margin-bottom: 16px;
    border-radius: 8px;
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-left: 4px solid hsl(var(--primary)) !important; /* Orange Accent */
    color: hsl(var(--foreground)) !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-out;
    z-index: 50;
}

.fractl-toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

html.dark .fractl-toast-notification {
    background-color: #292929 !important; /* Panel */
    border-color: #454545 !important;
    border-left-color: hsl(var(--primary)) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ============================================================================ */
/* CUSTOM SIDEBAR CLOSE BUTTON - Override Chainlit Default */
/* ============================================================================ */

/* Override Chainlit's default close button on right sidebars */
/* Target the close button that Chainlit automatically adds to custom sidebars */
[data-panel-group-direction="horizontal"] > div[data-panel]:last-child button[class*="justify-center"]:first-child {
    color: hsl(var(--foreground)) !important;
    background-color: transparent !important;
    margin-right: 8px !important;
}

[data-panel-group-direction="horizontal"] > div[data-panel]:last-child button[class*="justify-center"]:first-child:hover {
    color: white !important;
    background-color: hsl(var(--muted)) !important;
}

/* Make sure close button icon color follows header icon standards */
html.dark [data-panel-group-direction="horizontal"] > div[data-panel]:last-child button[class*="justify-center"]:first-child {
    color: white !important;
}

html.dark [data-panel-group-direction="horizontal"] > div[data-panel]:last-child button[class*="justify-center"]:first-child:hover {
    color: white !important;
    background-color: hsl(var(--muted)) !important;
}

/* Remove the count badges next to items in the tree */
body[data-project-ui="true"] .sortable-item .text-xs.text-muted-foreground:not(svg):not(.lucide) {
    display: none !important;
}

/* Keep the styled badges for other uses, just hide counts in tree */
body[data-project-ui="true"] .sortable-item > div > div:last-child > span.text-xs:not(:has(svg)) {
    display: none !important;
}