/* ===========================================================
   Command Centre — left sidebar layout
   Activated when <body> has class `has-sidebar`.
   =========================================================== */

:root {
    --cc-width: 280px;
    --cc-collapsed: 0px;
}

body.has-sidebar .nav { display: none !important; }

body.has-sidebar {
    padding-left: var(--cc-width);
}

body.has-sidebar .main-content {
    min-height: 100vh;
    min-height: 100dvh;
}

body.has-sidebar .main-content > .container {
    max-width: none;
    padding-left: clamp(1.2rem, 3vw, 2.4rem);
    padding-right: clamp(1.2rem, 3vw, 2.4rem);
}

/* Hide chat-only sections when not on chat page */
body.has-sidebar:not(.on-chat-page) .cc-chat-only { display: none; }

/* ---------- Sidebar shell ---------- */
.command-centre {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--cc-width);
    z-index: 90;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.96) 60%, rgba(15, 23, 42, 0.98));
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-right: 1px solid rgba(245, 158, 11, 0.12);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
    color: var(--color-text, #e5e7eb);
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
}

.command-centre::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 320px 220px at 20% 0%, rgba(245, 158, 11, 0.10), transparent 70%),
        radial-gradient(ellipse 280px 200px at 80% 100%, rgba(139, 92, 246, 0.10), transparent 70%);
}

/* ---------- Brand ---------- */
.cc-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

.cc-brand-link { display: inline-flex; align-items: center; flex: 1; }
/* Keep firm attribution below its name while retaining the focus target. */
.cc-brand .fl-brand-link { display: block; }

.cc-brand-logo {
    height: 28px;
    width: auto;
    display: block;
}

/* FLOW-490: the shared brand block sits in the same slot the logo link used
   to occupy, for both the desktop rail and the mobile drawer. A firm name is
   text, so it must be allowed to shrink and wrap rather than push the close
   button off the row. */
.cc-brand > .fl-brand { flex: 1; min-width: 0; }
.cc-brand .fl-brand-logo--sidebar { height: 28px; width: auto; max-width: 100%; display: block; }
.cc-brand .fl-brand-name { font-size: 1rem; }

.cc-mobile-close {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-dim, #94a3b8);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* ---------- Scroll area ---------- */
.cc-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0.75rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.cc-scroll::-webkit-scrollbar { width: 6px; }
.cc-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 4px; }

/* ---------- Section ---------- */
.cc-section {
    padding: 0.6rem 0.4rem 0.8rem;
}
.cc-section + .cc-section {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 0.4rem;
}
.cc-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted, #94a3b8);
    padding: 0.2rem 0.6rem 0.7rem;
}
.cc-soon-pill {
    font-size: 0.6rem;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    color: #c4b5fd;
    border: 1px solid rgba(139, 92, 246, 0.25);
    letter-spacing: 0.06em;
}

/* ---------- Nav item ---------- */
.cc-item {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.7rem;
    border-radius: 12px;
    color: var(--color-text, #e5e7eb);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
    cursor: pointer;
}
.cc-item + .cc-item { margin-top: 0.2rem; }
.cc-item:hover {
    background: rgba(245, 158, 11, 0.07);
    transform: translateX(2px);
}
/* Plain <button> styled as a sidebar item (e.g. the Dashboard toggle). */
.cc-item--button {
    width: 100%;
    background: transparent;
    border: none;
    font: inherit;
    text-align: left;
}

body.cc-onboarding-locked .command-centre .cc-scroll,
body.cc-onboarding-locked .command-centre .cc-user {
    filter: grayscale(0.45);
    opacity: 0.42;
    pointer-events: none;
    user-select: none;
}

/* FLOW-489: the brand row carries the only two recovery controls a locked customer has —
   the return-to-chat link (chat is the onboarding entry) and the mobile close button. It
   stays undimmed and is lifted above the lock overlay so pointer, touch and keyboard all
   reach it. The overlay still covers the product navigation beneath it. */
body.cc-onboarding-locked .command-centre .cc-brand {
    z-index: 201;
}

.cc-onboarding-lock {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(2px);
    pointer-events: all;
}

body.cc-onboarding-locked .cc-onboarding-lock {
    display: flex;
}

.cc-onboarding-lock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    max-width: 210px;
    padding: 1.15rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.82);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.cc-onboarding-lock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.cc-onboarding-lock-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #e2e8f0;
}

.cc-onboarding-lock-copy {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #94a3b8;
}
.cc-item--active {
    background: linear-gradient(120deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.06));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25);
}
.cc-item--active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 18%;
    bottom: 18%;
    width: 3px;
    background: linear-gradient(180deg, #f59e0b, #f97316);
    border-radius: 0 3px 3px 0;
}

.cc-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #fbbf24;
}
.cc-item--active .cc-item-icon {
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}
.cc-item-label {
    font-weight: 650;
    font-size: 0.92rem;
    line-height: 1.2;
}
.cc-item-meta {
    grid-column: 2 / 4;
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.74rem;
    margin-top: 0.15rem;
}

/* Coming-soon items */
.cc-item--soon {
    color: var(--color-text-muted, #94a3b8);
    cursor: not-allowed;
    opacity: 0.65;
}
.cc-item--soon:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: none;
}
.cc-item--soon .cc-item-icon {
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
}
.cc-item-badge {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border: 1px dashed rgba(255, 255, 255, 0.12);
}

/* Soon sub-group (More Contracts) */
.cc-soon-group {
    margin-top: 0.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
}
.cc-soon-group-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 0.5rem;
}
.cc-soon-sublist {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.cc-soon-subitem {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: #cbd5e1;
}
.cc-soon-subitem--muted {
    color: #64748b;
    font-style: italic;
}
.cc-soon-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.cc-soon-dot--muted {
    background: #475569;
    box-shadow: none;
}

/* ---------- Timeline ---------- */
.cc-section--timeline {
    padding-bottom: 1rem;
}
.cc-timeline {
    position: relative;
    padding: 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.cc-tl-stage {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.7rem;
    align-items: flex-start;
}
.cc-tl-stage + .cc-tl-stage::before {
    content: "";
    position: absolute;
    top: -1rem;
    left: 17px;
    width: 2px;
    height: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 2px;
}
.cc-tl-stage--completed + .cc-tl-stage::before,
.cc-tl-stage--active + .cc-tl-stage::before {
    background: linear-gradient(180deg, #f59e0b, rgba(245, 158, 11, 0.15));
}
.cc-tl-node {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted, #94a3b8);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cc-tl-check { display: none; }
.cc-tl-stage--active .cc-tl-node {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.10));
    border-color: rgba(245, 158, 11, 0.55);
    color: #fde68a;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10), 0 8px 20px rgba(245, 158, 11, 0.15);
    animation: cc-pulse 2.6s ease-in-out infinite;
}
.cc-tl-stage--completed .cc-tl-node {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    border-color: rgba(245, 158, 11, 0.6);
    color: #0f172a;
}
.cc-tl-stage--completed .cc-tl-icon { display: none; }
.cc-tl-stage--completed .cc-tl-check { display: block; }

@keyframes cc-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10), 0 8px 20px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.05), 0 8px 24px rgba(245, 158, 11, 0.25); }
}

.cc-tl-label { padding-top: 0.18rem; }
.cc-tl-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-text, #e5e7eb);
}
.cc-tl-stage--upcoming .cc-tl-title { color: var(--color-text-muted, #94a3b8); }
.cc-tl-sub {
    font-size: 0.72rem;
    color: var(--color-text-muted, #94a3b8);
    margin-top: 0.1rem;
}

/* ---------- User card ---------- */
.cc-user {
    position: relative;
    flex-shrink: 0;
    padding: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
}
.cc-user-button {
    display: grid;
    grid-template-columns: 36px 1fr 14px;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--color-text, #e5e7eb);
    cursor: pointer;
    transition: background 0.15s ease;
}
.cc-user-button:hover { background: rgba(255, 255, 255, 0.06); }
.cc-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #0f172a;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.25);
}
.cc-user-meta { min-width: 0; text-align: left; }
.cc-user-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-user-role {
    font-size: 0.68rem;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cc-user-caret {
    color: var(--color-text-muted, #94a3b8);
    transition: transform 0.2s ease;
}
.cc-user--open .cc-user-caret { transform: rotate(180deg); }

.cc-user-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0.7rem;
    right: 0.7rem;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.4rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 95;
    max-height: 60vh;
    overflow-y: auto;
}
/* FLOW-489: the closed menu is removed from the document with [hidden] rather than only
   faded out, so its administration links are not silent Tab stops. The reveal therefore
   animates in instead of transitioning from a still-rendered box. */
.cc-user-menu[hidden] { display: none; }
/* FLOW-489 visual pass: this menu is the only scroller in the shell that never styled its
   scrollbar, so on a classic-scrollbar platform it drew a 17px stepper bar inside a 257px
   dark popover, and on an overlay-scrollbar platform it drew nothing at all — leaving the
   ORGANISATION group (Users, Team Contracts, User Config Data, Email Templates, System
   Settings) and Log Out looking as though the list ended at the last visible item. Same
   treatment as .cc-scroll and .cc-flyout-body: a persistent, quiet thumb. */
.cc-user-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.30) rgba(255, 255, 255, 0.04);
    overscroll-behavior: contain;
}
.cc-user-menu::-webkit-scrollbar { width: 6px; }
.cc-user-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}
.cc-user-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.30);
    border-radius: 4px;
}
.cc-user--open .cc-user-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: cc-user-menu-in 0.18s ease;
}
@keyframes cc-user-menu-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.cc-user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    color: var(--color-text, #e5e7eb);
    text-decoration: none;
    font-size: 0.88rem;
    transition: background 0.12s ease;
}
.cc-user-menu-item:hover { background: rgba(245, 158, 11, 0.10); color: #fff; }
.cc-user-menu-item svg { flex-shrink: 0; color: #fbbf24; }
.cc-user-menu-item--danger { color: #fca5a5; }
.cc-user-menu-item--danger:hover { background: rgba(239, 68, 68, 0.15); color: #fecaca; }
.cc-user-menu-item--danger svg { color: #fca5a5; }
.cc-user-menu-divider {
    height: 1px;
    margin: 0.35rem 0.3rem;
    background: rgba(255, 255, 255, 0.06);
}

/* ---------- Mobile toggle ---------- */
.cc-mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f59e0b;
    z-index: 95;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
}
.cc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 80;
    opacity: 0;
    transition: opacity 0.22s ease;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    body.has-sidebar { padding-left: 0; }
    body.has-sidebar .main-content > .container { padding-top: 60px; }
    body.cc-open { overflow: hidden; }

    .command-centre { transform: translateX(-100%); }
    body.cc-open .command-centre { transform: translateX(0); }

    .cc-mobile-toggle { display: inline-flex; }
    /* The external opener otherwise sits above the open drawer's brand link. */
    body.cc-open .cc-mobile-toggle { visibility: hidden; }
    .cc-mobile-close { display: inline-flex; }

    /* FLOW-489 visual pass: the feedback launcher is position:fixed at z-index 99999, so it
       floated above both the drawer (z-index 90) and its backdrop (z-index 80) and covered
       the right-hand edge of the drawer's 44px close button — and of the Contracts flyout's
       Hide button behind it. feedback-widget.css already names this hazard and ships the
       .fl-fb-suppressed / dialog rule for it; the drawer just never claimed it. */
    body.cc-open #fl-feedback-widget { display: none !important; }

    /* The return-to-chat link is the locked customer's recovery control, so it has to be a
       real touch target. The logo alone gave it a 28px row, against 44px for the two
       buttons beside it. Same for the flyout's My Contracts link. */
    .cc-brand-link { min-height: 44px; }
    .cc-flyout-my-contracts {
        min-height: 44px;
        align-items: center;
    }

    .cc-overlay { display: block; }
    body.cc-open .cc-overlay { opacity: 1; }
    body:not(.cc-open) .cc-overlay { pointer-events: none; }

    /* Merged review O3: the chat transcript scrolls the window, so on a phone the
       fixed menu and Support buttons sat on top of the first visible bubble's text.
       A band behind the two buttons fades the transcript out underneath them. */
    body.has-sidebar.on-chat-page::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        z-index: 35;
        pointer-events: none;
        background: linear-gradient(180deg, #0b1120 0%, rgba(11, 17, 32, 0.94) 70%, rgba(11, 17, 32, 0));
    }
}

/* On chat page on desktop, give the chat area extra breathing room */
body.has-sidebar.on-chat-page .main-content > .container {
    padding-left: 0;
    padding-right: 0;
}

/* ===========================================================
   Expandable items + right-side flyouts
   =========================================================== */
.cc-expandable {
    position: relative;
}
.cc-expandable .cc-item--expandable {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    color: inherit;
    grid-template-columns: 32px 1fr auto;
    align-items: start;
}
.cc-expandable .cc-item--expandable .cc-item-icon {
    grid-row: 1 / span 2;
    align-self: center;
}
.cc-expandable .cc-item--expandable .cc-item-label {
    grid-column: 2;
    grid-row: 1;
}
.cc-expandable .cc-item--expandable .cc-item-meta {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.1rem;
}
.cc-expandable .cc-item--expandable .cc-expand-caret {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
}
.cc-expand-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted, #94a3b8);
    transition: transform 0.22s ease, background 0.18s ease, color 0.18s ease;
}
.cc-expandable--open .cc-expand-caret {
    transform: rotate(90deg);
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}
.cc-expandable--open .cc-item--expandable {
    background: linear-gradient(120deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.05));
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22);
}
.cc-expandable--open .cc-item--expandable .cc-item-icon {
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}

.cc-item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.45rem;
    min-width: 20px;
    height: 20px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: #0f172a;
    font-size: 0.7rem;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
    animation: cc-count-pop 0.35s ease-out;
}
@keyframes cc-count-pop {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.cc-item-count[hidden] { display: none; }

/* Flyout panel */
.cc-flyout {
    position: fixed;
    top: 14px;
    bottom: 14px;
    left: calc(var(--cc-width) + 8px);
    width: min(320px, calc(100vw - var(--cc-width) - 32px));
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px - env(safe-area-inset-bottom));
    z-index: 88;
    display: flex;
    flex-direction: column;
    /* Opaque: inside the sidebar's own backdrop blur, Chromium drew the page behind a
       near-opaque flyout at roughly a quarter strength ("My Documents" showed through
       the header), and a nested backdrop-filter cannot blur the page from here anyway. */
    background: #0f172a;
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 18px;
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.55);
    transform: translateX(-12px);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: transform 0.26s cubic-bezier(.2,.7,.2,1), opacity 0.22s ease;
}
.cc-expandable--open .cc-flyout {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.cc-flyout::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 360px 220px at 0% 0%, rgba(245, 158, 11, 0.10), transparent 70%),
        radial-gradient(ellipse 320px 220px at 100% 100%, rgba(139, 92, 246, 0.08), transparent 70%);
}

.cc-flyout-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.cc-flyout-body::-webkit-scrollbar { width: 6px; }
.cc-flyout-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 4px; }

.cc-flyout-head {
    flex-shrink: 0;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.85rem 0.95rem 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}
.cc-flyout-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.01em;
}
.cc-flyout-sub {
    font-size: 0.74rem;
    color: var(--color-text-muted, #94a3b8);
    margin-top: 0.15rem;
    line-height: 1.35;
}
.cc-flyout-my-contracts {
    display: inline-flex;
    margin-top: 0.55rem;
    text-decoration: none;
    color: inherit;
}
.cc-flyout-my-contracts:hover .cc-contract-card-cta {
    filter: brightness(1.06);
}
.cc-flyout-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}
.cc-flyout-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fbbf24;
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    transition: background 0.15s ease;
    white-space: nowrap;
}
.cc-flyout-link:hover { background: rgba(245, 158, 11, 0.12); }
.cc-flyout-button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.cc-flyout-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-dim, #94a3b8);
    width: 44px;
    height: 44px;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.cc-flyout-close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

.cc-flyout-section {
    padding: 0.75rem 0.85rem 0.9rem;
}
.cc-flyout-section + .cc-flyout-section {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.cc-flyout-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
    gap: 0.4rem;
}
.cc-flyout-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fde68a;
    font-weight: 800;
}
.cc-flyout-section-title--muted { color: var(--color-text-muted, #94a3b8); }
.cc-flyout-section-meta {
    font-size: 0.66rem;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cc-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: cc-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes cc-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}

.cc-flyout-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cc-contract-card {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    padding: 0.6rem 0.7rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.cc-contract-card:visited,
.cc-contract-card:focus {
    color: inherit;
    text-decoration: none;
}
.cc-contract-card:hover {
    background: rgba(245, 158, 11, 0.07);
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}
.cc-contract-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.cc-contract-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.25;
}
.cc-contract-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: #0f172a;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.28);
    flex-shrink: 0;
}
.cc-contract-card-copy {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--color-text-muted, #cbd5e1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* FLOW-473: refusal message for a contract action whose destination cannot be opened.
   Kept rendered while empty so screen readers announce the text when it appears. */
.cc-flyout-status {
    margin: 0 0 0.4rem;
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.08);
    color: #fecaca;
    font-size: 0.72rem;
    line-height: 1.35;
}
.cc-flyout-status:empty {
    margin: 0;
    padding: 0;
    border: 0;
}
.cc-contract-card[aria-disabled="true"] { cursor: not-allowed; }
/* Merged review O7: a refused destination kept the orange call to action until it was
   clicked. Mute the card and its pill so the refusal is visible up front. */
.cc-contract-card[aria-disabled="true"],
.cc-contract-card[aria-disabled="true"]:hover {
    background: rgba(255, 255, 255, 0.015);
    border-color: rgba(255, 255, 255, 0.05);
    transform: none;
}
.cc-contract-card[aria-disabled="true"] .cc-contract-card-title { color: #94a3b8; }
.cc-contract-card[aria-disabled="true"] .cc-contract-card-cta {
    background: rgba(148, 163, 184, 0.14);
    color: #94a3b8;
    box-shadow: none;
}
.cc-contract-card[aria-disabled="true"] .cc-contract-card-cta svg { display: none; }

.cc-flyout-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    color: var(--color-text-muted, #94a3b8);
}
.cc-flyout-empty[hidden],
.cc-flyout-empty.cc-hidden { display: none !important; }
.cc-hidden { display: none !important; }
.cc-flyout-empty-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #fbbf24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cc-flyout-empty-title { font-weight: 700; color: #e2e8f0; font-size: 0.82rem; }
.cc-flyout-empty-copy { font-size: 0.72rem; line-height: 1.4; }

.cc-status-score-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.cc-status-label {
    display: block;
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    margin-bottom: 0.25rem;
}
.cc-status-score-card strong {
    color: #f8fafc;
    font-size: 1.15rem;
}
.cc-status-pill {
    border-radius: 999px;
    padding: 0.32rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
}
.cc-status-pill.low { color: #86efac; background: rgba(34, 197, 94, 0.13); border: 1px solid rgba(34, 197, 94, 0.22); }
.cc-status-pill.medium { color: #fde68a; background: rgba(245, 158, 11, 0.13); border: 1px solid rgba(245, 158, 11, 0.24); }
.cc-status-pill.high { color: #fecaca; background: rgba(248, 113, 113, 0.13); border: 1px solid rgba(248, 113, 113, 0.24); }
.cc-status-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.55rem;
}
.cc-status-stats div {
    padding: 0.55rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.cc-status-stats strong,
.cc-status-stats span {
    display: block;
}
.cc-status-stats strong { color: #f8fafc; font-size: 0.96rem; }
.cc-status-stats span { color: var(--color-text-muted, #94a3b8); font-size: 0.68rem; margin-top: 0.12rem; }
.cc-status-audit-list {
    display: grid;
    gap: 0.45rem;
}
.cc-status-audit-card {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.6rem 0.65rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.cc-status-audit-card.triggered { border-color: rgba(248, 113, 113, 0.24); background: rgba(248, 113, 113, 0.06); }
.cc-status-audit-card.clear { border-color: rgba(34, 197, 94, 0.16); }
.cc-status-audit-card.unknown { border-style: dashed; opacity: 0.86; }
.cc-status-audit-card strong,
.cc-status-audit-card span {
    display: block;
}
.cc-status-audit-card strong { color: #f8fafc; font-size: 0.78rem; line-height: 1.25; }
.cc-status-audit-card span { color: var(--color-text-muted, #94a3b8); font-size: 0.68rem; line-height: 1.3; margin-top: 0.18rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-status-audit-card em { align-self: flex-start; flex-shrink: 0; border-radius: 999px; padding: 0.22rem 0.45rem; background: rgba(255, 255, 255, 0.07); color: #e2e8f0; font-size: 0.64rem; font-style: normal; font-weight: 900; }

.cc-flyout-soon-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cc-flyout-soon-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    color: var(--color-text, #e5e7eb);
}
.cc-flyout-soon-card--muted {
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}
.cc-flyout-soon-card--disabled {
    opacity: 0.55;
    color: var(--color-text-muted, #94a3b8);
    background: rgba(255, 255, 255, 0.015);
    border-color: rgba(255, 255, 255, 0.06);
    cursor: default;
}
.cc-flyout-soon-card--disabled .cc-flyout-soon-title {
    color: var(--color-text-muted, #94a3b8);
    font-weight: 600;
}
.cc-flyout-soon-title {
    font-size: 0.8rem;
    font-weight: 700;
}
.cc-flyout-soon-copy {
    font-size: 0.7rem;
    color: var(--color-text-muted, #94a3b8);
    margin-top: 0.1rem;
    line-height: 1.35;
}

@media (max-width: 960px) {
    .cc-flyout {
        left: 0;
        right: 0;
        width: 100%;
    }
    body:not(.cc-open) .cc-flyout { transform: translateX(-100%); opacity: 0; pointer-events: none; }
}

/* ===========================================================
   Focus visibility (FLOW-489)
   The sidebar relied on the browser default outline, which the dark panel and the
   translucent card backgrounds swallowed. Keyboard users need to see where they are,
   especially inside the long administration disclosure.
   =========================================================== */
.cc-brand-link:focus-visible,
.cc-mobile-toggle:focus-visible,
.cc-mobile-close:focus-visible,
.cc-item:focus-visible,
.cc-user-button:focus-visible,
.cc-user-menu-item:focus-visible,
.cc-flyout-close:focus-visible,
.cc-flyout-my-contracts:focus-visible,
.cc-contract-card:focus-visible,
.cc-onboarding-lock-card:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .command-centre, .cc-overlay, .cc-flyout, .cc-user-menu { transition: none; }
    .cc-user--open .cc-user-menu { animation: none; }
}