@import url("theme.css");

:root {
    --bg-white: #ffffff;
    --surface: #1D1F2E;
    --bg-black: black;
    --bg-black-2: #0f1019;
    --bg-gray: #1D1F2E;

    --dark-selected: #2E3150;
    --dark-item: #18192A;
    --dark-subtext: #bdc0d4b5;
    --dark-border: #1E2035;

    --brand-gradient: linear-gradient(90deg, #e6346c 0%, #c000f5 58%, #1d9bf0 100%);
    --brand-gradient-deep: linear-gradient(90deg, #d32961 0%, #ad00df 56%, #168bd9 100%);

    --bg-blue-clear: #13141F;
    --bg-blue-dark: #252840;
    --bg-blue-dark-2: #1D1F2E;
    --purple-dark: var(--accent-ui);
    --purple-clear: var(--accent-ui-soft);
    /* Aliases for token names referenced across feature CSS but never defined —
       their declarations silently computed to invalid/inherit until now
       (Codex-pass). Each maps to the closest live token for how it is used. */
    --font-color: var(--font-black);
    --font-light-gray: var(--font-gray-clair);
    --font-grey: var(--font-gray-clair);
    --text-color: var(--font-black);
    --text-color-2: var(--font-gray);
    --text-color-3: var(--font-gray-clair);
    --surface-hover: var(--hover-color);
    --surface-muted: var(--hover-color);
    --green-clear: var(--green);
    --blue-clair: var(--selection-blue-2);
    --background-color-2: var(--surface);
    --pink: #E6346C;
    --blue: #7D98C4;
    --selection-blue: rgba(0, 102, 255, 0.8);
    --selection-blue-2: #1D9BF0;
    --red-clear: #C60404;
    --red-dark: #990427;
    --orange: rgb(255, 115, 0);
    --green: #089d6f;
    --green-clear-2: #E6F9F3;
    --green-dark: #006727;
    --golden-yellow: #ffd700;
    --hover-color: #252840;
    --ai-blue: #00dbde;
    --ai-pink: var(--accent-ui-mark); /* AI shimmer follows App Style */
    --font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

    --radius-mini: 6px;
    --radius-small: 8px;
    /* DEPRECATED: 10px sat between the 8px and 14px steps, so panels and menus
       drifted between three radii that all read as "roundish". Every consumer
       was moved onto --radius-small (menus, popovers, selects) or --radius-big
       (panels, cards, sheets) on 2026-09-06. Kept only so an unswept rule does
       not fall back to 0. Do not use it in new work. */
    --radius-small-medium: 10px;
    --radius-big: 14px;
    --radius-large: 18px;
    --radius-pill: 999px;
    --transition-flash: 0.08s;
    --transition-fast: 0.15s;
    --transition-slow: 0.25s;

    --height-mini: 24px;
    --height-small: 32px;
    --height-big: 40px;
    --height-large: 50px;

    --gap-mini: 4px;
    --gap-small: 8px;
    --gap-big: 16px;

    --padding-mini: 3px;
    --padding-small: 7px;
    --padding-small-medium: 8px;
    --padding-big: 11px;

    --gray-100: #252840;
    --border-color: #2A2C42;
    --gray-clear: #9090B0;
    --gray-clear-2: #1D1F2E;
    --gray-clear-3: #252840;
    --font-gray: #D0D0E8;
    --font-gray-clair: #8888A8;
    --font-black: #F2F2FA;
    --font-black-clair: #DCDCF0;
    --input-bg: #252840;
    --input-text: #F2F2FA;
    --dt-shadow-elevation-1: 0 8px 20px rgba(3,5,12,0.28);
    --shadow-sm: 0 1px 2px rgba(3,5,12,0.35), 0 2px 8px rgba(3,5,12,0.24);
    --shadow-md: 0 4px 14px rgba(3,5,12,0.34);
    --shadow-lg: 0 16px 40px rgba(3,5,12,0.42);
    --shadow-card: 0 6px 18px rgba(3,5,12,0.30);
    --shadow-hover: 0 10px 26px rgb(var(--amb-2) / 0.20);
    --shadow-purple: 0 10px 28px var(--accent-ui-glow);

    /* === Premium elevation & surface system (parity with mydrop-site) === */
    --surface-raised: rgba(255,255,255,0.045);
    --surface-elevated: rgba(255,255,255,0.06);
    --border-hairline: rgba(255,255,255,0.10);
    --border-hairline-strong: rgba(255,255,255,0.14);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --lift: translateY(-2px);
    --text-xs: 11px; --text-sm: 12px; --text-2xl: 24px;
    --tracking-tight: -0.02em;

    --facebook-color: #2C4AAA;
    --instagram-color: #CF1C96;
    --instagramBusiness-color: #CF1C96;
    --googleMyBusiness-color: #3D4DAB;
    --linkedin-color: #0077B5;
    --linkedinPages-color: #0077B5;
    --youtube-color: #C60404;
    --tiktok-color: #000000;
    --x-color: #000000;
    --pinterest-color: #BD081C;
    --threads-color: #000000;
    --bluesky-color: #1185FE;
    --snapchat-color: #FFFC00;
    --reddit-color: #FF4500;
    --googlePhotos-color: #34A853;
    --canva-color: #2989DA;
    --googleDrive-color: #FFB700;
    --dropbox-color: #0061FF;
    --oneDrive-color: #0364B8;
    --sharePoint-color: #038387;
    --trustPilot-color: #00b67a;
    --googleCalendar-color: #4285F4;
    --reminder-bg: #f6bf27;
    --whatsapp-color: #25D366;
    --telegram-color: #24A1DE;
    --email-color: #475569;

    /* Semantic tokens (theme-ready) */
    --accent: var(--purple-dark);
    --accent-hover: var(--accent-ui-fill);
    --accent-subtle: var(--purple-clear);
    --accent-glow: var(--accent-ui-glow);
    --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    /* Signature motif tokens (parity with mydrop-site) */
    --text-gradient: var(--pricing-hero-gradient); /* pastel pink→purple→blue for gradient text */
    --icon-tile-bg: linear-gradient(145deg, rgb(var(--amb-1) / 0.42), rgb(var(--amb-3) / 0.36));
    --icon-tile-fg: #ffffff;
    --error: var(--red-clear);
    --success: #34D399;
    --success-muted: rgba(52, 211, 153, 0.15);
    --warning-color: var(--orange-ink);
    /* Text on a SOFT accent tint or a plain surface (active nav pill, selected
       rows, chat headers). Theme-aware ink — white here only because dark
       surfaces need it. For a SOLID accent fill use --text-on-accent-fill. */
    --text-on-accent: #ffffff;
    /* Text/glyphs sitting ON a solid accent fill — always white, both themes. */
    --text-on-accent-fill: #ffffff;
    --overlay: rgba(0, 0, 0, 0.5);
    --overlay-blur: rgba(10, 10, 18, 0.55);
    --app-background-base: #181818;
    /* Pricing surfaces and accents follow the user's app style (the --amb-*
       presets in theme.css). Fixed here: the neutral base the ambient tint is
       mixed into, the rose/green semantics, and the brand CTA gradient. */
    --pricing-page-bg: color-mix(in srgb, rgb(var(--amb-2)) 8%, #101014);
    --pricing-card-bg: color-mix(in srgb, rgb(var(--amb-2)) 6%, #16161c);
    --pricing-card-bg-soft: rgba(255, 255, 255, 0.055);
    --pricing-card-border: rgba(255, 255, 255, 0.10);
    --pricing-card-border-strong: rgb(var(--amb-sheen) / 0.30);
    --pricing-text: #F8FAFC;
    --pricing-muted: #BDC0D4;
    --pricing-soft: #8888A8;
    --pricing-row-bg: rgba(255, 255, 255, 0.025);
    --pricing-featured-bg: rgb(var(--amb-2) / 0.08);
    --pricing-rose-text: #fecdd3;
    --pricing-icon-bg: var(--accent-ui-soft);
    /* Plan icons, checks and table accents follow the App Style like the rest of
       the app; only money (savings badges, yearly discount) stays green, the
       risk-free row stays rose, and the hero gradient stays fixed brand. */
    --pricing-icon-text: var(--accent-ui-mark);
    --pricing-accent: var(--accent-ui-mark);
    --pricing-kicker: var(--accent-ui-mark);
    --pricing-label: var(--accent-ui-mark);
    --pricing-hero-gradient: linear-gradient(98deg, #e6346c 6%, #c000f5 48%, #1d9bf0 95%);
    --pricing-group-icon-bg: var(--accent-ui-soft);
    --pricing-group-icon-text: var(--accent-ui-mark);
    --pricing-popular-bg: var(--accent-ui-soft);
    --pricing-popular-border: var(--accent-ui-border);
    --pricing-popular-text: var(--accent-ui-mark);
    --pricing-toggle-active-bg: #ffffff;
    --pricing-toggle-active-text: #0f172a;
    --pricing-yearly-badge-bg: linear-gradient(135deg, #10b981, #059669);
    --pricing-yearly-badge-text: #ffffff;
    --pricing-discount-bg: rgba(16, 185, 129, 0.16);
    --pricing-discount-text: #6ee7b7;

    /* Icon filters (theme-toggleable) */
    --icon-filter: brightness(0) saturate(100%) invert(0.65);
    --icon-filter-hover: brightness(0) saturate(100%) invert(0.85);
    --icon-filter-active: brightness(0) saturate(100%) invert(1);

    /* Status */
    --posted: #076117;
    --draft: #ff65C5;
    --failed: #9D0607;
    --pending: #c000f5;
    --uploading: #575757;
    --waiting: #0049AE;
    --warning: #CD6421;

    /* Status INK — the same three semantics as text, per theme.
       --orange / --red-clear / --green are single values serving both themes,
       so each one fails contrast in the theme it was not tuned for. Measured
       2026-09-06 as 12px badge text over a 10% wash of itself:
         light row #F3F4F8 : orange 2.25  red 4.67  green 2.82
         dark  row #13141F : orange 5.90  red 2.89  green 4.72
       The ink tokens keep the hue and clear 4.5:1 in BOTH themes. Use them
       whenever the semantic colour is TEXT or an icon; keep the base tokens
       for fills, where white sits on top and the requirement is inverted.
       Measured after (ink on its own 10% wash / on the row):
         dark  orange 5.90/6.71 · red 5.82/6.62 · green 4.72/5.28
         light orange 4.82/5.58 · red 4.67/5.59 · green 5.12/5.94 */
    --orange-ink: rgb(255, 115, 0);
    --red-ink: #F87171;
    --green-ink: #089d6f;
}

/* ====== Light Theme ====== */
html[data-theme="light"] {
    /* Light neutral ramp desaturated (Codex-pass): same value steps, the blue
       channel no longer dominates — a chosen cool-gray instead of periwinkle.
       The accent supplies all the color the chrome needs. */
    --surface: #FFFFFF;
    --bg-black: #F5F6FA;
    --bg-black-2: #EDEEF4;
    --bg-gray: #FFFFFF;

    --dark-selected: #E4E6EF;
    --dark-item: #F5F6FA;
    --dark-subtext: rgba(60, 64, 92, 0.7);
    --dark-border: #D8DAE4;

    --bg-blue-clear: #F3F4F8;
    --bg-blue-dark: #E9EBF2;
    --bg-blue-dark-2: #FFFFFF;
    --hover-color: #EFF0F5;

    --border-color: #D8DAE4;
    --gray-100: #E4E6EF;
    --gray-clear: #8184A0;
    --gray-clear-2: #F5F6FA;
    --gray-clear-3: #E9EBF2;

    --font-black: #191A2B;
    --font-black-clair: #2B2C4A;
    --font-gray: #43465F;
    --input-bg: #F8F9FC;
    --input-text: #191A2B;
    --font-gray-clair: #6A6C8E;

    /* Status ink, light theme — see the note in :root. */
    --orange-ink: #A8410A;
    --red-ink: #C60404;
    --green-ink: #046B4E;

    --shadow-sm: 0 1px 2px rgba(17,24,39,0.05), 0 2px 6px rgba(17,24,39,0.05);
    --shadow-md: 0 4px 14px rgba(17,24,39,0.08);
    --shadow-lg: 0 14px 36px rgba(17,24,39,0.12);
    --shadow-card: 0 4px 14px rgba(17,24,39,0.06);
    --shadow-hover: 0 8px 22px rgba(17,24,39,0.10);
    --dt-shadow-elevation-1: 0 2px 10px rgba(17,24,39,0.06);
    --shadow-purple: 0 8px 24px var(--accent-ui-glow);

    /* Premium surfaces — light theme overrides (solid for legibility) */
    --surface-raised: #ffffff;
    --surface-elevated: #ffffff;
    --border-hairline: rgba(17,24,39,0.10);
    --border-hairline-strong: rgba(17,24,39,0.14);
    /* amb-1 -> amb-2: for the pink preset amb-1 and amb-deep are the same value,
       which would render a flat tile; amb-2 keeps a real two-stop gradient. */
    --icon-tile-bg: var(--accent-ui-gradient);
    --icon-tile-fg: #ffffff;

    --overlay: rgba(0, 0, 0, 0.25);
    --overlay-blur: rgba(240, 242, 255, 0.75);
    --app-background-base: #f2f3f8;
    /* Light mirror of the ambient wiring above. On light surfaces the accents
       read off --amb-deep, the channel tuned for exactly that. */
    --pricing-page-bg: color-mix(in srgb, rgb(var(--amb-2)) 6%, #f7f8fc);
    --pricing-card-bg: #FFFFFF;
    --pricing-card-bg-soft: #FFFFFF;
    --pricing-card-border: rgba(24, 24, 46, 0.10);
    --pricing-card-border-strong: rgb(var(--amb-deep) / 0.22);
    --pricing-text: #18182E;
    --pricing-muted: #3C3C70;
    --pricing-soft: #6868A0;
    --pricing-row-bg: #F8FAFC;
    --pricing-featured-bg: rgb(var(--amb-1) / 0.06);
    --pricing-rose-text: #be123c;
    /* Plan icons/accents follow the App Style; money (savings, yearly discount)
       stays green (see the dark block for the rationale). */
    --pricing-icon-bg: var(--accent-ui-soft);
    --pricing-icon-text: var(--accent-ui-mark);
    --pricing-accent: var(--accent-ui-mark);
    --pricing-kicker: var(--accent-ui-mark);
    --pricing-label: var(--accent-ui-mark);
    --pricing-hero-gradient: linear-gradient(98deg, #e6346c 6%, #c000f5 48%, #1d9bf0 95%);
    --pricing-group-icon-bg: var(--accent-ui-soft);
    --pricing-group-icon-text: var(--accent-ui-mark);
    --pricing-popular-bg: var(--accent-ui-soft);
    --pricing-popular-border: var(--accent-ui-border);
    --pricing-popular-text: var(--accent-ui-mark);
    --pricing-toggle-active-bg: #ffffff;
    --pricing-toggle-active-text: var(--accent-ui-mark);
    --pricing-yearly-badge-bg: linear-gradient(135deg, #10b981, #059669);
    --pricing-yearly-badge-text: #ffffff;
    --pricing-discount-bg: #d1fae5;
    --pricing-discount-text: #047857;

    --icon-filter: brightness(0) saturate(100%) invert(0.25);
    --icon-filter-hover: brightness(0) saturate(100%) invert(0.1);
    --icon-filter-active: brightness(0) saturate(100%) invert(0);

    --text-on-accent: var(--font-black); /* soft tints need ink; solid fills use --text-on-accent-fill */

    --selection-blue: rgba(0, 102, 255, 0.5);
    --green-clear-2: #D1FAE5;
    --success-muted: rgba(52, 211, 153, 0.12);
}

/* ====== Typography rhythm (parity with mydrop-site) ====== */
/* Tight heading tracking is a quiet premium signal; -0.02em is subtle enough
   to be layout-safe on the app's small px headings while sharpening large ones. */
h1, h2, h3, h4 { letter-spacing: var(--tracking-tight); }

/* ============================================================
   Signature components — parity with mydrop-site marketing design.
   Reusable motifs that define the brand look: gradient icon tiles,
   gradient text, glow surfaces, glow CTAs, kickers, brand pills.
   ============================================================ */

/* Icon tile — rounded-square gradient chip behind a glyph. The site's
   single most repeated motif; every feature/section/list icon uses it. */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-small);
    color: var(--icon-tile-fg);
    background: var(--icon-tile-bg);
    box-shadow: 0 10px 24px rgba(3, 5, 14, 0.22);
}
.icon-tile > svg, .icon-tile > img { width: 1.15rem; height: 1.15rem; }
.icon-tile > i { font-size: 1.05rem;  }
/* Force monochrome <img> glyphs to read as a light icon on the tinted tile */
.icon-tile.icon-tile--img > img { filter: brightness(0) invert(1); }
.icon-tile--sm { width: 2rem; height: 2rem; border-radius: var(--radius-mini); }
.icon-tile--lg { width: 3rem; height: 3rem; border-radius: var(--radius-big); }
.icon-tile--circle { border-radius: var(--radius-pill); }
/* Full brand-gradient variant for prominent nodes (pink→purple→blue). */
.icon-tile--brand { background: var(--brand-gradient); color: #fff; }

/* Gradient text — pastel brand gradient clipped to the glyphs. Wrap the
   emphasis word(s) of a heading, e.g. <span class="gradient-text">. */
.gradient-text {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Kicker — small uppercase tracked label that sits above a heading. */
.kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pricing-kicker, var(--accent));
}

/* Glow surface — deep panel/section with subtle radial brand blooms. */
.glow-surface {
    position: relative;
    background:
        radial-gradient(circle at 12% 14%, rgb(var(--amb-1) / 0.10), transparent 42%),
        radial-gradient(circle at 88% 18%, rgb(var(--amb-3) / 0.10), transparent 46%),
        radial-gradient(circle at 50% 112%, rgb(var(--amb-2) / 0.12), transparent 55%),
        var(--surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-large);
}

/* Glow CTA — bold brand-gradient button with a coloured halo (Register Free). */
.glow-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
    height: 48px;
    border: none;
    border-radius: var(--radius-small);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    background: var(--brand-gradient);
    box-shadow: 0 3px 10px rgba(192,0,245,0.26), 0 1px 4px rgba(230,52,108,0.18);
    transition: transform var(--transition-fast) var(--ease-out),
                box-shadow var(--transition-fast) var(--ease-out);
}
.glow-cta:hover { transform: var(--lift); box-shadow: 0 5px 14px rgba(192,0,245,0.32), 0 2px 6px rgba(230,52,108,0.22); }
.glow-cta:active { transform: translateY(0); }

/* Brand pill — rounded badge with an icon, for small labels. */
.brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-hairline);
    background: var(--surface-raised);
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--font-gray);
}

/* ============================================================
   Apply signature motifs to recurring app surfaces (app-wide).
   !important is intentional here: feature CSS loads after menu.css,
   so these brand overrides must win over per-feature icon styling.
   ============================================================ */

/* Section / report / feature header icons → gradient tiles */
[class*="-section-icon"],
.reminder-title-icon, .analytics-share-icon, .campaign-icon,
.portal-metric-icon, .workspace-icon, .suggestion-icon,
.brand-domain-status-icon, .verify-icon, .mydrop-report-section-icon {
    background: var(--icon-tile-bg) !important;
    color: var(--icon-tile-fg) !important;
    border-radius: var(--radius-small) !important;
    padding: 4px;
    box-sizing: border-box;
}
[class*="-section-icon"] > img, .workspace-icon > img,
.campaign-icon > img, .verify-icon > img,
.mydrop-report-section-icon > img {
    filter: brightness(0) invert(1) !important;
}
/* The danger-zone buttons are NOT section headers: their icons stay plain glyphs
   in the button's own color (red delete / muted leave), never accent tiles. */
#workspace-delete-btn .workspace-icon,
#workspace-leave-btn .workspace-icon {
    background: none !important;
    color: currentColor !important;
    border-radius: 0 !important;
    padding: 0;
}

/* Empty-state icons → centered gradient tile */
[class*="empty-state-icon"], .conversation-empty-state-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-big);
    background: var(--icon-tile-bg);
    color: var(--icon-tile-fg) !important;
    opacity: 1 !important;
    box-shadow: 0 10px 24px rgba(3, 5, 14, 0.22);
}

/* Empty-state titles used to be blanket-painted in --text-gradient here, with
   `color: transparent !important` overriding whatever the component asked for.
   Removed 2026-09-06: it spent the brand's one identity gradient on the app's
   least important screens ("nothing selected"), it ignored the user's App Style
   accent (measured on Gabriel's blue workspace: every other control #0056D6,
   this heading pink→violet), and transparent text is invisible wherever
   background-clip does not apply. The gradient is still available as an opt-in
   on the emphasis word of a heading: <span class="gradient-text">. */

/* Native checks/radios follow the one accent (Codex-pass). */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent-ui);
}

/* Keyboard focus is always visible (Codex-pass): one accent ring, everywhere.
   !important so component-level `outline: none` on :focus cannot erase it for
   keyboard users; mouse clicks don't trigger :focus-visible so pointer flows
   stay ring-free. */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-ui) !important;
    outline-offset: 2px;
}

/* Empty-state / no-data containers → subtle radial brand glow (site-like bg) */
.conversation-empty-state, .inbox-empty-state, .workspace-conversation-empty-state,
.profiles-placeholder, .post-preview-placeholder, .mydrop-report-no-data {
    background-image:
        radial-gradient(circle at 18% 10%, rgb(var(--amb-1) / 0.05), transparent 42%),
        radial-gradient(circle at 84% 92%, rgb(var(--amb-3) / 0.05), transparent 46%);
    background-repeat: no-repeat;
}

/* The main Create CTA keeps the fixed brand halo — it is the one identity moment
   in the app chrome. */
.create-main-button {
    box-shadow: 0 3px 10px rgba(192, 0, 245, 0.26), 0 1px 4px rgba(230, 52, 108, 0.18) !important;
}
/* Every other primary button is secondary to it, so its halo follows App Style. */
.btn-primary, #sendFeedbackBtn, #modal-confirm-choice-leave-button,
.modal-creation-btn-select {
    box-shadow: 0 2px 8px var(--accent-ui-glow) !important;
}

/* Primary action buttons across features. These are secondary to the main Create
   CTA, so they follow the user's App Style rather than the fixed brand gradient. */
.analytics-generate-report-btn, .calendar-export-primary-btn,
.inbox-primary-btn, .form-submit-button, .mydrop-public-report-primary-btn,
.ai-next-step-button, [class*="primary-btn"], [class*="primary-button"] {
    background: var(--accent-ui-gradient) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px var(--accent-ui-glow) !important;
}

/* ====== Theme Toggle Component ====== */
.theme-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 6px 10px 6px 12px;
    border-radius: var(--radius-small);
    gap: 9px;
    margin: 4px 0;
    border: 1px solid var(--border-color);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--font-black);
}

.theme-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--font-black);
    font-size: 12px;
    font-weight: 600;
}

.theme-toggle-left svg {
    color: var(--font-gray);
    fill: currentColor;
}   

.theme-toggle-state {
    margin-left: auto;
    color: var(--font-gray);
    font-size: 12px;
    font-weight: 600;
    
    white-space: nowrap;
}

.theme-mode-selector {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(52px, 1fr));
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-small);
    background: var(--bg-blue-dark);
    flex: 0 0 auto;
}

.theme-mode-option {
    min-width: 0;
    min-height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: calc(var(--radius-small) - 2px);
    background: transparent;
    color: var(--font-gray);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    
    cursor: pointer;
    white-space: nowrap;
}

.theme-mode-option:hover {
    color: var(--font-black);
    background: var(--hover-color);
}

.theme-mode-option.is-active {
    color: var(--font-black);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.theme-mode-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ambient-mode-selector {
    grid-template-columns: repeat(4, minmax(52px, 1fr));
}

.ambient-mode-selector .theme-mode-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.ambient-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot);
    flex-shrink: 0;
}

.theme-switch {
    position: relative;
    display: inline-flex;
    width: 36px;
    height: 20px;
    flex: 0 0 auto;
    cursor: pointer;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.theme-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--border-color);
    border-radius: 999px;
    transition: background-color var(--transition-fast);
}

.theme-switch-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 3px;
    background: var(--font-black);
    border-radius: 50%;
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.theme-switch input:checked + .theme-switch-slider {
    background: var(--accent);
}

.theme-switch input:checked + .theme-switch-slider::before {
    transform: translateX(16px);
    background: var(--bg-white);
}

.theme-switch input:focus-visible + .theme-switch-slider {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

h1 {
    font-size: 22px;
    font-weight: bold;
}
h2 {
    font-size: 14px;
    font-weight: 600;
}
p {
    color: var(--gray-clear);
    font-size: 13px;
}

body {
    font-family: var(--font-family);
    color: var(--font-black);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    /* Sur mobile, 100vh vaut la hauteur AVEC la barre du navigateur rétractée,
       donc toujours plus que la zone réellement visible tant que la barre de
       Safari/Chrome est affichée. Tout étant en overflow:hidden, le bas de la
       page (la barre de navigation du téléphone) se retrouvait dessous, sans
       aucun moyen d'y accéder. 100dvh suit la hauteur visible en temps réel.
       Les deux déclarations 100vh au-dessus restent le repli pour les
       navigateurs qui ne connaissent pas dvh (iOS < 15.4). */
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--bg-blue-clear);
    /* Flat canvas: the graph-paper grid + top fade are gone (Codex-pass). Only the
       App-Style ambient floor glow remains, at reduced strength — the canvas must
       never compete with content for color. */
    background-image:
        radial-gradient(ellipse 70% 68% at 30% 98%, rgb(var(--amb-1) / calc(var(--amb-floor-a1) * 0.5)), rgb(var(--amb-1) / calc(var(--amb-floor-a1) * 0.19)) 42%, transparent 78%),
        radial-gradient(ellipse 82% 74% at 50% 104%, rgb(var(--amb-2) / calc(var(--amb-floor-a2) * 0.5)), rgb(var(--amb-2) / calc(var(--amb-floor-a2) * 0.19)) 46%, transparent 82%),
        radial-gradient(ellipse 70% 68% at 70% 98%, rgb(var(--amb-3) / calc(var(--amb-floor-a3) * 0.5)), rgb(var(--amb-3) / calc(var(--amb-floor-a3) * 0.19)) 42%, transparent 78%);
}
#page {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    /* Même raison que sur body : voir le commentaire là-haut. */
    height: 100dvh;
    overflow: hidden;
}
#page-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    min-width: 100vw;
    justify-content: flex-start;
    align-items: flex-start;
}
.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
    width: calc(100% - 250px);
    height: 100%;
}
/* SIDEBAR*/
#sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 250px;
    min-width: 250px;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-small-medium);
    padding-top: 0;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
}
#top-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    width: 100%;
}
#bottom-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    gap: 15px;
}
#logo-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
    min-height: 50px;
    width: 100%;
    box-sizing: border-box;
}
.logo-image {
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0;
    display: none;
}
.logo-image.laptop {
    display: block;
}
.logo-image.phone {
    display: none;
    margin-left: 10px;
}
#workspace-selector-div {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 10px;
}
#workspace-selector {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: var(--height-small);
    border-radius: var(--radius-mini);
    padding: 0 var(--padding-small-medium);
    cursor: pointer;
    box-sizing: border-box;
    gap: 5px;
    background-color: var(--bg-gray);
}
#workspace-selector-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: var(--dark-subtext);
}
#workspace-selector:hover {
    background-color: var(--bg-blue-dark);
}


/* Main button (AI Post) */
#button-create-div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    box-sizing: border-box;    
    width: 100%;
    margin-bottom: 20px;
}
#button-create-dropdown {
    top: 100%;
    left: 0;
    display: flex;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    transform-origin: top left;
    pointer-events: none;
    will-change: opacity, transform;
    transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.24s;
}
#button-create-dropdown.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

.create-main-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 var(--padding-big);
    background: var(--accent-gradient);
    border-radius: var(--radius-small);
    cursor: pointer;
    color: var(--bg-white);
    transition: all var(--transition-fast) ease;
    height: var(--height-small);
    box-shadow: var(--shadow-purple);
}
#button-create-split {
    width: 100%;
    height: var(--height-big);
    padding: 0;
    gap: 0;
    /* The halves are plain rectangles clipped by this box: with their own
       rounded corners they stopped short of the pill's curves, leaving a few
       corner pixels that belonged to neither and dropped the hover. */
    overflow: hidden;
    background-image: linear-gradient(90deg, #e6346c 0%, #c000f5 58%, #1d9bf0 100%);
}
/* Two halves on one gradient: the wrapper paints, the halves stay transparent
   so the sweep is continuous, and a hairline says the right half is its own
   control (same split-pill grammar as the post-state selector). */
#button-create-main {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: stretch;
    padding: 0 var(--padding-big);
    box-sizing: border-box;
    cursor: pointer;
}
#button-create-dropdown-menu {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--bg-white);
    cursor: pointer;
}
.create-label-compact { display: none; }
/* Pressed state is a fill, never a scale: shrinking the element pulls its own
   edges out from under the pointer, so an edge press released over the parent
   and the click was swallowed. */
#button-create-main:active,
#button-create-dropdown-menu:active { background-color: rgba(255, 255, 255, 0.22); }
#button-create-main:hover,
#button-create-dropdown-menu:hover { background-color: rgba(255, 255, 255, 0.12); }
.create-main-button p {
    user-select: none;
    color: var(--bg-white);
    /* Control type is 13px/500 (Codex-pass spec), not body-weight 12px. */
    font-weight: 500;
    font-size: 13px;
    margin: 0;
    padding: 0;
}
#create-main-button-plus,
#create-main-button-ai {
    user-select: none;
    width: 16px;
    height: auto;
}
/* No --lift here, deliberately: this control opens a menu on hover, and a 2px
   rise slides its own edges out from under the pointer — the hover dropped and
   re-armed in a loop along the top and bottom few pixels. */
#button-create-div:hover .create-main-button {
    filter: brightness(1.08);
    box-shadow: var(--shadow-hover);
}
/* Dropdown toggle icon */
.create-dropdown-toggle {
    display: flex;
    align-items: center;
    color: var(--bg-white);
    font-size: 12px;
    justify-content: center;
    background: var(--accent-gradient);
    border-radius: 0 var(--radius-big) var(--radius-big) 0; /* Rounded right side */
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    padding: 0 10px; /* Slightly narrower for icon focus */
    height: var(--height-big);
    position: relative;
}



#sidebar-buttons {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    gap: 4px;
}
/* Section titles replaced the old hairline separators, and the separator did
   not disappear: it now runs out of the word to the right edge, so the group
   is named AND still visibly cut off from the one above it. */
.sidebar-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 12px 0 4px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--font-gray-clair);
    line-height: 1;
    user-select: none;
}
.sidebar-group-title::after {
    content: '';
    flex: 1 1 auto;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--border-color);
}
/* Base styles pour menu-item */
.menu-item {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: transparent;
    transition: all var(--transition-flash) ease;
    box-sizing: border-box;
    user-select: none;
    border: 1px solid transparent;
}
.menu-item:hover {
    background-color: rgba(255,255,255,0.05);
}
html[data-theme="light"] .menu-item:hover {
    background-color: rgba(17,24,39,0.05);
}
/* Styles spécifiques */
.sidebar-item {
    height: var(--height-small);
    min-height: var(--height-small);
    border-radius: var(--radius-small);
}
/* Menu rows are plain rows (Codex-pass): hover fill only, no per-row boxes. */
.dropdown-item {
    height: var(--height-small);
    border-radius: var(--radius-small);
    background-color: transparent;
    border: 1px solid transparent !important;
}
html[data-theme="light"] .dropdown-item {
    background-color: transparent;
    border: 1px solid transparent !important;
}


#gallery-loading-spinner {
    display: none;
    width: 18px;
    height: 18px;
}

/* Style des icônes */
.menu-item-icon {
    height: 100%;
    max-width: 17px;
    max-height: 17px;
    pointer-events: none;
    transition: all var(--transition-fast) ease;
    filter: var(--icon-filter);
}
/* Style du texte */
.menu-item h2 {
    font-size: 13px;
    font-weight: 400;
    color: var(--dark-subtext);
    margin: 0;
}

/* Broken-connection count on the brands item. Hidden at zero, so its presence alone
   means something needs reconnecting. Clicking it opens the accounts view filtered. */
#profiles-expired-badge {
    display: none;
    position: absolute;
    top: 50%;
    right: var(--padding-big);
    transform: translateY(-50%);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 8px;
    background-color: var(--red-clear);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}
#profiles-expired-badge.is-visible {
    display: block;
}
#profiles-expired-badge:hover {
    filter: brightness(1.1);
}

/* Status markers on the nav items (counts from sidebarBadges.js, plus the Home
   and Drops badges). They always sit at the far right of the row, whatever the
   label length, so the column of counts reads as one status board. */
.sidebar-item .conversation-unread-badge,
.sidebar-item .sidebar-menu-dot {
    margin-left: auto;
    margin-right: var(--padding-big);
    /* The generic chip is pointer-events:none, which handed every hover to the
       row and made the row's own "Open Calendar" tooltip win. Here the marker
       must answer for itself: it carries the tooltip saying what it counts. */
    pointer-events: auto;
    position: relative;
}
/* A 7px dot in a 40px row is not an aimable target, so each marker gets an
   invisible pad. It sits inside the row anchor, so a click on it still
   navigates exactly like a click on the label. */
.sidebar-item .conversation-unread-badge::before,
.sidebar-item .sidebar-menu-dot::before {
    content: '';
    position: absolute;
    inset: -12px -10px;
}
/* "Something changed here" with nothing meaningful to count. Accent, not red:
   news is not an emergency (Codex-pass). */
.sidebar-menu-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--accent-ui);
    flex-shrink: 0;
}

/* Hover */
.menu-item:hover .menu-item-icon {
    filter: var(--icon-filter-hover);
}
.menu-item:hover h2 {
    color: var(--font-black);
}

/* État actif */
.menu-item.active {
    background-color: var(--accent-subtle);
}
.menu-item.active .menu-item-icon {
    filter: var(--icon-filter-active);
}
.menu-item.active h2 {
    color: var(--text-on-accent);
    font-weight: 500;
}
/* Petite barre verticale à gauche */
/* 
.menu-item.active::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 15px;
    background: var(--purple-dark);
    border-radius: var(--radius-pill);
    pointer-events: none;
} 
*/

/* Style du lien */
.menu-item a {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
    padding-left: var(--padding-big);
    gap: var(--padding-big);
    box-sizing: border-box;
}

.coming-soon-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: auto;
    height: auto;
}
.coming-soon-div p {
    margin: 0;
}










.page-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 10px 10px 0;
}
#home-content {
    padding: 0 10px 0 0;
}
.page-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: var(--radius-big);
    background-color: var(--surface);
}

.page-content-wrapper[data-value="home"] {
    background-color: transparent;
    padding-bottom: 0;
}






/* PAGE TOP BAR */
#page-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 50px;
    min-height: 50px;
    padding-right: 20px;
}
/* Title */
#page-top-bar-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    width: auto;
    gap: 4px;
}




/* Notifs d'envoi */
#notification-in-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
}
#notification-container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#notification-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    height: var(--height-small);
    width: var(--height-small);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    color: var(--font-black);
}
.top-bar-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    width: 350px;
    max-height: 700px;
    padding: 15px;
    z-index: 45;
    overflow-y: auto;
    display: block;
    background-color: var(--bg-blue-dark-2);
    border-radius: var(--radius-small);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    transform-origin: top right;
    pointer-events: none;
    will-change: opacity, transform;
    transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.24s;
}
.top-bar-dropdown.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
#notification-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
        width: 100%;
        height: 40px;
}
#notification-header-title {
    font-weight: 400;
    font-size: 13px;
    color: var(--font-gray);
    text-align: left;
}
#stored-notifications-mark-all-read {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 400;
    font-size: 13px;
    color: var(--font-gray);
    background: none;
    border: none;
    cursor: pointer;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-small);
    background-color: var(--bg-blue-clear);
    transition: all var(--transition-fast) ease;
}
#stored-notifications-mark-all-read svg {
    width: 14px;
    height: 14px;
}
#stored-notifications-mark-all-read:hover {
    background-color: var(--bg-blue-dark);
}


.hidden {
    display: none !important;
}
#default-message .fa-check-circle {
    color: var(--green-ink);
    background-color: var(--surface);
    border-radius: 50%;
}


/* Notifs */
#notification-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    width: 100%;
    height: auto;
    background-color: var(--surface);
    box-sizing: border-box;
    border-radius: var(--radius-small);
    gap: 10px;
}
.notification {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
}
.notif-content-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    gap: 4px;
    width: 100%;
}
.notif-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    height: 30px;
}
.profiles-placeholder {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}
.notif-content-div p,
.notification p {
    margin: 0;
    padding: 0;
    max-width: 100%;
}
.notification-profiles-text {
    margin-left: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.progress-bar-div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    min-height: 15px;
    gap: 10px;
}
.progress-bar {
    width: 0%;
    height: 4px;
    background-color: var(--purple-dark);
    border-radius: 4px;
}
.progress-text {
    font-weight: 500;
    color: var(--font-gray);
}
.platform-image {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 6px;
}
/* Spinner général cloche notif*/
.spinner-container {
    position: relative;
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#calendar-notification-spinner {
    position: absolute;
    display: none;
    width: 35px;
    height: 35px;
}

#user-profile-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
}
#user-avatar-top-bar {
    height: var(--height-small);
    width: var(--height-small);
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--border-color);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
#user-avatar-top-bar:hover {
    box-shadow: 0 0 0 1px var(--purple-dark);
}
#notification-button:hover {
    background-color: var(--border-color);
}
.user-avatar-div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.user-avatar-div span {
    font-size: 13px;
}
.user-profile-avatar {
    pointer-events: none;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}
#user-profile-dropdown-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 100%;
    gap: 10px;
}
#user-profile-dropdown-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    height: 80px;
    width: 100%;
}
#user-profile-dropdown-avatar {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 100%;
    width: 80px;
    min-width: 80px;
    border-radius: 50%;
    background-color: var(--border-color);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.edit-icon {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 2px;
    right: 2px;
    background-color: var(--bg-blue-clear);
    height: 22px;
    width: 22px;
    /* A 22px box at 10px reads as a squircle nobody chose; it is a round badge. */
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-align: center;
    font-size: 11px;
}
#user-profile-dropdown-username {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 100%;
}
#user-profile-dropdown-username-hello {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    color: var(--font-gray);
}
#user-profile-dropdown-email {
    margin: 0;
    padding: 0;
}
#user-profile-dropdown-links {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    height: auto;
    width: 100%;
    overflow: hidden;
    margin: 20px 0;
}

/* links */
.privacy-and-terms-links {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    color: var(--font-gray);
    gap: 10px;
    text-decoration: none;
    font-size: 11px;
}
.privacy-and-terms-links a {
    color: var(--font-gray) !important;
    text-decoration: none !important;
    font-size: 11px !important;
}



/* LOADER */
#loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 90;
    overflow: hidden;
}
#loader::before, #loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
}
#loader::before {
    background-color: var(--purple-dark);
}
#loader::after {
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
    opacity: 0;
}
#loader.progress::before {
    animation: loadingProgress 0.5s forwards;
}
#loader.progress::after {
    width: 100%;
    animation: highlightEffect 2s infinite;
}
#loader.complete::before {
    animation: loadingComplete 0.3s forwards;
}
@keyframes loadingProgress {
    to {
        width: 80%;
    }
}
@keyframes loadingComplete {
    from {
        width: 80%;
    }
    to {
        width: 100%;
    }
}
@keyframes highlightEffect {
    0% {
        transform: translateX(-100%);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 1;
    }
}




/* LOADING INITIAL*/
/* Défaut = thème sombre (comme le reste des tokens) : le splash était codé en
   clair quel que soit data-theme, d'où un flash blanc avant l'app sombre. */
#loading-modal {
    display: block;
    position: absolute;
    z-index: 110;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0e1018;
    background-image:
        radial-gradient(circle at 16% 18%, rgb(var(--amb-1) / 0.12), rgb(var(--amb-1) / 0.05) 24%, transparent 44%),
        radial-gradient(circle at 82% 14%, rgb(var(--amb-3) / 0.11), rgb(var(--amb-3) / 0.04) 26%, transparent 48%),
        radial-gradient(circle at 50% 0%, rgb(var(--amb-2) / 0.1), rgb(var(--amb-2) / 0.04) 30%, transparent 52%),
        linear-gradient(180deg, #12141f 0%, #0e1018 48%, #0c111b 100%);
    user-select: none;
}
html[data-theme="light"] #loading-modal {
    background-color: #f7f7fb;
    background-image:
        radial-gradient(circle at 16% 18%, rgb(var(--amb-1) / 0.1), rgb(var(--amb-1) / 0.04) 24%, transparent 44%),
        radial-gradient(circle at 82% 14%, rgb(var(--amb-3) / 0.1), rgb(var(--amb-3) / 0.04) 26%, transparent 48%),
        radial-gradient(circle at 50% 0%, rgb(var(--amb-2) / 0.08), rgb(var(--amb-2) / 0.03) 30%, transparent 52%),
        linear-gradient(180deg, #ffffff 0%, rgb(var(--surface-tint)) 48%, rgb(var(--surface-tint)) 100%);
}
#loading-modal::before,
#loading-modal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
#loading-modal::before {
    background:
        radial-gradient(ellipse 720px 420px at 8% 12%, rgb(var(--amb-1) / 0.08), transparent 62%),
        radial-gradient(ellipse 760px 440px at 92% 18%, rgb(var(--amb-3) / 0.08), transparent 64%),
        radial-gradient(ellipse 620px 360px at 50% 6%, rgb(var(--amb-2) / 0.07), transparent 66%);
    opacity: 0.9;
}
/* Splash matches the flat app canvas (Codex-pass): no graph-paper layer. */
#loading-modal::after {
    background-image: none;
}
html[data-theme="light"] #loading-modal::after {
    background-image: none;
}
#loading-content {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: transparent;
    color: #eef0fb;
    z-index: 1;
}
html[data-theme="light"] #loading-content {
    color: #14151f;
}
#loading-image {
    display: block;
    height: 90px;
    width: auto;
    user-select: none;
    z-index: 2;
}

/* Floating feature-icon constellation */
#loading-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    z-index: 1;
    pointer-events: none;
    /* Responsive orbit radius: scales with the smaller viewport dimension */
    --orbit-r: clamp(150px, 34vmin, 480px);
}
.orbit-slot {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: orbit-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--d, 0s);
}
/* Counter-rotates the whole-group revolve so each icon stays upright */
.orbit-icon {
    display: block;
    width: 30px;
    height: 30px;
    color: #c7cdE8;
    opacity: 0.2;
    animation: spin 90s linear infinite;
}
html[data-theme="light"] .orbit-icon {
    color: #1d2433;
}
.orbit-float {
    display: block;
    width: 100%;
    height: 100%;
    animation: orbit-life 9s ease-in-out infinite;
}
.orbit-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.orbit-slot:nth-child(3n+1) .orbit-float { animation-duration: 10.5s; }
.orbit-slot:nth-child(3n+2) .orbit-float { animation-duration: 8s; }
.orbit-slot:nth-child(3n+3) .orbit-float { animation-duration: 11.5s; }
.orbit-slot:nth-child(4n) .orbit-float { animation-delay: -3.4s; }
.orbit-slot:nth-child(3n) .orbit-float { animation-delay: -5.1s; }
.orbit-slot:nth-child(5n) .orbit-float { animation-delay: -1.8s; }

/* The whole constellation slowly revolves around the center as one big circle */
#loading-orbit {
    animation: orbit-revolve 90s linear infinite;
}

@keyframes orbit-in {
    from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    to   { transform: translate(calc(-50% + var(--tx) / 140px * var(--orbit-r)), calc(-50% + var(--ty) / 140px * var(--orbit-r))) scale(1); opacity: 1; }
}
@keyframes orbit-life {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes orbit-revolve {
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Exit: icons blast outward, logo grows + fades (driven from JS) */
#loading-modal.loading-out .orbit-slot {
    animation: orbit-out 0.5s cubic-bezier(0.5, 0, 0.9, 0.4) forwards;
}
#loading-modal.loading-out .orbit-icon,
#loading-modal.loading-out .orbit-float {
    animation: none;
}
@keyframes orbit-out {
    from { transform: translate(calc(-50% + var(--tx) / 140px * var(--orbit-r)), calc(-50% + var(--ty) / 140px * var(--orbit-r))) scale(1); opacity: 0.2; }
    to   { transform: translate(calc(-50% + var(--tx) / 140px * var(--orbit-r) * 2.6), calc(-50% + var(--ty) / 140px * var(--orbit-r) * 2.6)) scale(0.3); opacity: 0; }
}
#loading-spinner {
    margin-top: 28px;
}

#loading-spinner svg {
    width: 34px;
    height: 34px;
    animation: spin 1.4s linear infinite;
}

#loading-spinner circle {
    stroke: var(--accent-ui-mark);
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0;
    animation: loading-arc-dash 1.4s ease-in-out infinite;
}

@keyframes loading-arc-dash {
    0%   { stroke-dasharray: 1, 200;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 200; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 200; stroke-dashoffset: -125; }
}






.new_feature {
    position: relative;
}

.new_feature::before {
    content: "New";
    position: absolute;
    top: -9px;
    right: 50%;
    transform: translateX(50%);
    background-color: var(--red-clear);
    color: var(--bg-white);
    padding-left: 6px;
    padding-right: 6px;
    border-radius: var(--radius-big);
    font-size: 11px;
    font-weight: 500;
    width: auto;
    white-space: nowrap;
    z-index: 10;
}



.iub__us-widget,
.iubenda-tp-btn.iubenda-cs-preferences-link,
.iubenda-tp-btn-container {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}