/* ═══════════════════════════════════════════════════════════════
   n6i Cortex — Custom Styles
   Token-driven design system: a generic blue brand default
   (--cortex-primary, overridable per site from the plugin settings),
   warm cream surfaces, Roboto (body) + Roboto Slab (headings),
   pill buttons, soft shadows.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Roboto+Slab:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ──────────────────────────────────── */

:root {
    --cortex-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --cortex-font-head: 'Roboto Slab', Georgia, 'Times New Roman', serif;

    /* ── Brand palette ──
       --cortex-primary is the single source of truth. It can be overridden
       from the plugin settings (Primary Color), and every other brand shade
       in this stylesheet is derived from it with color-mix(), so changing
       the one token recolors the whole app. Never hardcode a shade of the
       brand color below — derive it. */
    --cortex-primary: #2563eb;
    --cortex-primary-dark: color-mix(in srgb, var(--cortex-primary) 78%, black);
    --cortex-primary-light: color-mix(in srgb, var(--cortex-primary) 11%, white);
    --cortex-primary-tint: color-mix(in srgb, var(--cortex-primary) 12%, transparent);
    --cortex-accent: #d84d2b;
    --cortex-accent-soft: #ffbc7d;

    /* ── Surfaces & text ── */
    --cortex-bg: #f2efec;
    --cortex-bg-deep: #ece8e3;
    /* slightly deeper cream for framing */
    --cortex-card: #ffffff;
    --cortex-border: #e5e5e7;
    --cortex-border-strong: #d8d3cc;
    /* warm, for firmer separation */
    --cortex-text: #1c1c1e;
    --cortex-text-muted: #7a7a7a;
    --cortex-surface-hover: color-mix(in srgb, var(--cortex-primary) 8%, transparent);

    /* ── Code surface (warm, on-brand — replaces cold slate) ── */
    --cortex-code-bg: #f4f1ec;
    --cortex-code-text: var(--cortex-primary-dark);

    /* ── Feedback ── */
    --cortex-danger: #dc2626;
    --cortex-danger-bg: #fef2f2;
    --cortex-danger-border: #fecaca;

    /* Confirmation counterpart to the danger set, used by the registration
       form's live field validation. */
    --cortex-success: #15803d;
    --cortex-success-bg: #f0fdf4;

    /* ── Elevation ── */
    --cortex-shadow-xs: 0 1px 2px rgba(28, 28, 40, 0.05);
    --cortex-shadow-sm: 0 1px 3px rgba(28, 28, 40, 0.06);
    --cortex-shadow-md: 0 6px 20px rgba(28, 28, 40, 0.08);
    --cortex-shadow-lg: 0 16px 48px rgba(28, 28, 40, 0.14);
    --cortex-shadow-primary: 0 6px 16px color-mix(in srgb, var(--cortex-primary) 30%, transparent);
    --cortex-shadow-primary-sm: 0 3px 9px color-mix(in srgb, var(--cortex-primary) 22%, transparent);

    /* ── Focus ring (accessible, branded — applied to every control) ── */
    --cortex-focus: 0 0 0 3px var(--cortex-primary-light);
    --cortex-focus-strong: 0 0 0 3px color-mix(in srgb, var(--cortex-primary) 35%, transparent);

    /* ── Radii ── */
    --cortex-radius: 16px;
    --cortex-radius-md: 12px;
    --cortex-radius-btn: 10px;
    --cortex-radius-sm: 8px;
    --cortex-radius-pill: 1000px;

    /* ── Motion ── */
    --cortex-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* functional */
    --cortex-spring: 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* delight */

    --cortex-sidebar-width: 280px;
    --cortex-scrollbar: #d8d3cc;

    /* Height of the app's top band, EXCLUDING its 1px bottom border. The
       sidebar header, the chat top bar and the document-panel header all use
       it, which is what makes their bottom borders line up into one unbroken
       rule across the app. Change it here and all three follow. */
    --cortex-topbar-h: 67px;

    /* Lifts the whole top band off the content beneath it. Kept deliberately
       shallow — the band is a full-width strip, so anything deeper reads as a
       drop shadow on a floating panel rather than a raised edge. */
    --cortex-topbar-shadow: 0 2px 6px rgba(28, 28, 40, 0.06);
}

/* ── Custom Scrollbars ──────────────────────────────────────── */

/* Webkit (Chrome, Safari, Edge) — one warm treatment app-wide */
.cortex-app ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Kill the stepper arrows — Windows renders them by default and they turn a
   scrolling composer into something that looks like a broken native control. */
.cortex-app ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.cortex-app ::-webkit-scrollbar-track {
    background: transparent;
}

.cortex-app ::-webkit-scrollbar-thumb {
    background: var(--cortex-scrollbar);
    border-radius: var(--cortex-radius-pill);
}

.cortex-app ::-webkit-scrollbar-thumb:hover {
    background: var(--cortex-primary);
}

/* Firefox */
.cortex-app * {
    scrollbar-width: thin;
    scrollbar-color: var(--cortex-scrollbar) transparent;
}

/* ── App Layout ─────────────────────────────────────────────── */

.cortex-app {
    display: flex !important;
    flex-direction: row !important;
    position: fixed !important;
    top: 32px !important;
    /* Below WP Admin Bar if present */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: calc(100vh - 32px) !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--cortex-bg);
    box-shadow: none !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    font-family: var(--cortex-font);
}

/* Adjust for when admin bar is absent */
body:not(.admin-bar) .cortex-app {
    top: 0 !important;
    height: 100vh !important;
}

/* ── WP admin bar on small screens ───────────────────────────────
   The 32px above is the admin bar's DESKTOP height. WordPress makes it 46px
   at <=782px and switches it from fixed to absolute (so it scrolls away) at
   <=600px — see wp-includes/css/admin-bar.css.

   This matters on every phone, not just for admins: the chat page is
   login-gated, so every visitor who reaches it is logged in and therefore has
   an admin bar unless it was explicitly turned off for their role. With a
   hardcoded 32px the 46px bar overlapped the app's top 14px — clipping the top
   bar and reading as "no top margin anywhere" — while height:calc(100vh - 32px)
   simultaneously pushed 14px of the app below the fold.

   The <=600px "position:absolute" case still reserves the same 46px on
   purpose. Absolute only means the bar scrolls with the document — and this
   page has nothing to scroll, because .cortex-app is a fixed full-screen
   overlay and the body behind it is empty. So the bar sits at the top of the
   viewport permanently, and at its z-index (99999, above our 9999) it paints
   over whatever we put under it. Setting top:0 there hid the top bar
   completely; verified in a headless render at 375px. */
@media screen and (max-width: 782px) {
    body.admin-bar .cortex-app {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
    }
}

/* ── Sidebar ────────────────────────────────────────────────── */

.cortex-sidebar {
    width: var(--cortex-sidebar-width) !important;
    min-width: var(--cortex-sidebar-width) !important;
    background: var(--cortex-card);
    border-right: 1px solid var(--cortex-border);
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    transition: width var(--cortex-transition), min-width var(--cortex-transition),
        transform var(--cortex-transition), opacity var(--cortex-transition);
}

/* ── Collapsible conversation list (desktop) ─────────────────── */

.cortex-app.cortex-sidebar-collapsed .cortex-sidebar {
    width: 0 !important;
    min-width: 0 !important;
    border-right-color: transparent;
    opacity: 0;
    pointer-events: none;
}

/* Floating button that re-opens the collapsed list */
.cortex-sidebar-expand {
    display: none;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 25;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cortex-border);
    border-radius: 10px;
    background: var(--cortex-card);
    color: var(--cortex-primary);
    cursor: pointer;
    box-shadow: var(--cortex-shadow-md);
    transition: background var(--cortex-transition), color var(--cortex-transition),
        transform 0.15s ease, box-shadow var(--cortex-transition);
}

.cortex-sidebar-expand:hover {
    background: var(--cortex-primary);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--cortex-primary) 32%, transparent);
}

.cortex-sidebar-expand:active {
    transform: scale(0.92);
}

/* Show the expand button only while collapsed (desktop only) */
.cortex-app.cortex-sidebar-collapsed .cortex-sidebar-expand {
    display: flex;
    animation: cortexPromptCardIn 0.25s ease both;
}

/* On mobile the sidebar is an off-canvas drawer. The collapse button stays
   visible inside it (JS makes it close the drawer, mirroring desktop's
   "collapse" gesture); the floating expand button isn't needed because the
   always-present hamburger re-opens it. */
@media (max-width: 768px) {
    .cortex-sidebar-expand {
        display: none !important;
    }

    /* The desktop "collapsed" state (which sets width:0 + pointer-events:none)
       must NOT apply on mobile — the drawer is controlled by the hamburger.
       Fully neutralise it, INCLUDING pointer-events, or the drawer renders but
       its buttons can't be tapped. */
    .cortex-app.cortex-sidebar-collapsed .cortex-sidebar {
        width: var(--cortex-sidebar-width) !important;
        min-width: var(--cortex-sidebar-width) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Drawer backdrop — dims the chat behind the open mobile drawer; tap to close.
   Hidden entirely on desktop (the sidebar is docked, not an overlay). */
.cortex-sidebar-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .cortex-sidebar-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 29;
        background: rgba(20, 20, 28, 0.4);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--cortex-transition), visibility var(--cortex-transition);
    }

    .cortex-sidebar.cortex-sidebar-open~.cortex-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

.cortex-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    /* Pinned to the shared band height so its bottom border continues into the
       chat top bar's. box-sizing keeps the padding inside that height. */
    min-height: var(--cortex-topbar-h);
    box-sizing: border-box;
    flex-shrink: 0;
    /* Must match .cortex-topbar's border and shadow exactly — the two are read
       as one continuous band across the app, and a mismatch in either shows as
       a visible step at the sidebar's edge. position+z-index so the shadow
       falls ON the conversation list rather than under it. */
    border-bottom: 1px solid var(--cortex-border-strong);
    box-shadow: var(--cortex-topbar-shadow);
    position: relative;
    z-index: 3;
}

.cortex-sidebar-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cortex-text);
    letter-spacing: -0.01em;
}

/* ── Sidebar conversation search ────────────────────────────── */

.cortex-conv-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 12px 12px 4px;
    flex-shrink: 0;
}

.cortex-conv-search-icon {
    position: absolute;
    left: 11px;
    color: var(--cortex-text-muted);
    pointer-events: none;
}

.cortex-conv-search-input {
    width: 100%;
    height: 36px;
    padding: 0 32px 0 34px;
    box-sizing: border-box;
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius-pill);
    background: var(--cortex-bg);
    color: var(--cortex-text);
    font-family: var(--cortex-font);
    font-size: 13px;
    transition: border-color var(--cortex-transition), box-shadow var(--cortex-transition), background var(--cortex-transition);
}

.cortex-conv-search-input::placeholder {
    color: var(--cortex-text-muted);
}

.cortex-conv-search-input:focus {
    outline: none;
    border-color: var(--cortex-primary);
    background: var(--cortex-card);
    box-shadow: 0 0 0 3px var(--cortex-primary-light);
}

/* Small keyboard-shortcut badge */
.cortex-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    font-family: var(--cortex-font);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--cortex-text-muted);
    background: var(--cortex-card);
    border: 1px solid var(--cortex-border);
    border-radius: 5px;
    box-shadow: 0 1px 0 var(--cortex-border);
    white-space: nowrap;
    user-select: none;
}

.cortex-conv-search-hint {
    position: absolute;
    right: 8px;
    pointer-events: none;
}

.cortex-conv-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--cortex-radius-pill);
    background: transparent;
    color: var(--cortex-text-muted);
    cursor: pointer;
    transition: background var(--cortex-transition), color var(--cortex-transition);
}

.cortex-conv-search-clear:hover {
    background: var(--cortex-surface-hover);
    color: var(--cortex-text);
}

.cortex-conv-search-empty {
    padding: 18px 14px;
    text-align: center;
    font-size: 12.5px;
    color: var(--cortex-text-muted);
}

/* ── Brand wordmark (the sidebar's only branding — make it count) ── */

.cortex-brand {
    display: flex;
    align-items: center;
    cursor: default;
    user-select: none;
    min-width: 0;
}

.cortex-brand-name {
    font-family: var(--cortex-font-head);
    /* Sized to the space, not to taste: the 280px sidebar minus its 18px
       padding leaves 244px, and the three header icon buttons take 114px of
       that, so the wordmark gets ~130px. "Kennisassistent" measures 118px at
       15px in Roboto Slab AND in every fallback (Georgia/Times), which keeps a
       real gap before the buttons; at 16px it is 126px and nearly touches them.
       Do not raise this without re-measuring against the button row. */
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cortex-text);
    line-height: 1;
    /* Last-resort guard: a wider fallback face truncates rather than shoving
       the icon buttons out of the header. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cortex-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Shared icon buttons (header) — one shape, one motion ───── */

.cortex-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--cortex-radius-btn);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--cortex-transition), color var(--cortex-transition),
        transform 0.15s ease, box-shadow var(--cortex-transition);
}

.cortex-icon-btn svg {
    transition: transform var(--cortex-spring);
}

.cortex-icon-btn:active {
    transform: scale(0.9);
}

.cortex-new-chat-btn {
    background: var(--cortex-primary);
    color: #ffffff;
}

.cortex-new-chat-btn:hover {
    background: var(--cortex-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--cortex-shadow-primary-sm);
}

.cortex-new-chat-btn:hover svg {
    transform: rotate(90deg);
}

/* ── Power Prompts trigger (icon-only, accented) ────────────── */

.cortex-power-prompts-btn {
    background: var(--cortex-primary-light);
    color: var(--cortex-primary);
}

.cortex-power-prompts-btn:hover {
    background: var(--cortex-accent);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 11px rgba(216, 77, 43, 0.34);
}

.cortex-power-prompts-btn:hover svg {
    transform: scale(1.12);
}

/* ── Power Prompts popup ─────────────────────────────────────── */

@keyframes cortexPromptCardIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.cortex-power-prompts-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(20, 20, 28, 0.5);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cortex-power-prompts-overlay.open {
    opacity: 1;
    visibility: visible;
}

.cortex-power-prompts-modal {
    width: min(540px, 100%);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--cortex-card);
    border-radius: var(--cortex-radius);
    box-shadow: var(--cortex-shadow-lg);
    overflow: hidden;
    transform: scale(0.92) translateY(16px);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.24s ease;
}

.cortex-power-prompts-overlay.open .cortex-power-prompts-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.cortex-power-prompts-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--cortex-border);
}

.cortex-power-prompts-head-text {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Popup title icon — matches the header-bar Power Prompts button */
.cortex-power-prompts-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--cortex-primary-light);
    color: var(--cortex-primary);
    flex-shrink: 0;
}

.cortex-power-prompts-icon svg {
    width: 20px;
    height: 20px;
}

.cortex-power-prompts-head-titles h2 {
    margin: 0;
    font-family: var(--cortex-font-head);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #000000;
    line-height: 1.15;
}

.cortex-power-prompts-head-titles p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--cortex-text-muted);
}

.cortex-power-prompts-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--cortex-radius-pill);
    background: transparent;
    color: var(--cortex-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--cortex-transition), color var(--cortex-transition), transform 0.2s ease;
}

.cortex-power-prompts-close:hover {
    background: var(--cortex-surface-hover);
    color: var(--cortex-text);
    transform: rotate(90deg);
}

/* ── Step 1: topic ─────────────────────────────────────────── */

.cortex-pp-topic-step {
    padding: 20px 22px 22px;
    animation: cortexPromptCardIn 0.25s ease both;
}

.cortex-pp-topic-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--cortex-text);
    margin-bottom: 10px;
}

.cortex-pp-topic-field {
    position: relative;
    display: flex;
    align-items: center;
}

.cortex-pp-topic-field-icon {
    position: absolute;
    left: 13px;
    color: var(--cortex-text-muted);
    pointer-events: none;
}

.cortex-pp-topic-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 38px;
    box-sizing: border-box;
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius-sm);
    background: var(--cortex-bg);
    color: var(--cortex-text);
    font-family: var(--cortex-font);
    font-size: 14px;
    transition: border-color var(--cortex-transition), box-shadow var(--cortex-transition), background var(--cortex-transition);
}

.cortex-pp-topic-input::placeholder {
    color: var(--cortex-text-muted);
}

.cortex-pp-topic-input:focus {
    outline: none;
    border-color: var(--cortex-primary);
    background: var(--cortex-card);
    box-shadow: var(--cortex-focus);
}

.cortex-pp-topic-hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cortex-text-muted);
}

.cortex-pp-topic-hint code {
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--cortex-code-bg);
    color: var(--cortex-code-text);
}

.cortex-pp-topic-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.cortex-pp-topic-skip {
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: var(--cortex-radius-sm);
    background: transparent;
    color: var(--cortex-text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--cortex-transition), color var(--cortex-transition);
}

.cortex-pp-topic-skip:hover {
    background: var(--cortex-surface-hover);
    color: var(--cortex-text);
}

.cortex-pp-topic-continue {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: var(--cortex-radius-sm);
    background: var(--cortex-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--cortex-transition), transform 0.15s ease, box-shadow var(--cortex-transition);
}

.cortex-pp-topic-continue:hover {
    background: var(--cortex-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--cortex-shadow-primary-sm);
}

.cortex-pp-topic-continue svg {
    transition: transform var(--cortex-spring);
}

.cortex-pp-topic-continue:hover svg {
    transform: translateX(3px);
}

.cortex-pp-topic-continue:active,
.cortex-pp-topic-skip:active {
    transform: scale(0.96);
}

/* ── Step 2: topic bar above the list ──────────────────────── */

/* Step 2 wrapper: a flex column that fills the modal's remaining height so the
   prompt list below it can scroll instead of overflowing (the modal itself is
   overflow:hidden with a max-height). Shown as flex by showPromptListStep(). */
.cortex-pp-list-step {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.cortex-pp-topic-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    margin: 14px 22px 0;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--cortex-primary-light);
    border-radius: var(--cortex-radius-sm);
    background: var(--cortex-primary-light);
}

.cortex-pp-topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 13px;
    color: var(--cortex-primary-dark);
}

.cortex-pp-topic-chip svg {
    flex-shrink: 0;
    color: var(--cortex-primary);
}

.cortex-pp-topic-chip span {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cortex-pp-topic-change {
    flex-shrink: 0;
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: var(--cortex-radius-pill);
    background: var(--cortex-card);
    color: var(--cortex-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--cortex-transition), color var(--cortex-transition);
}

.cortex-pp-topic-change:hover {
    background: var(--cortex-primary);
    color: #ffffff;
}

.cortex-power-prompts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 22px 22px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.cortex-power-prompts-loading,
.cortex-power-prompts-empty,
.cortex-power-prompts-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 12px;
    text-align: center;
    color: var(--cortex-text-muted);
    font-size: 13.5px;
}

.cortex-power-prompt-card {
    padding: 14px 16px;
    border-radius: var(--cortex-radius-sm);
    background: var(--cortex-bg);
    border: 1px solid transparent;
    cursor: default;
    animation: cortexPromptCardIn 0.35s ease both;
    transition: border-color var(--cortex-transition), transform var(--cortex-transition), box-shadow var(--cortex-transition);
}

.cortex-power-prompt-card:not(.editing):hover {
    border-color: color-mix(in srgb, var(--cortex-primary) 25%, transparent);
    transform: translateY(-2px);
    box-shadow: var(--cortex-shadow-sm);
}

.cortex-power-prompt-card.editing {
    border-color: color-mix(in srgb, var(--cortex-primary) 40%, transparent);
    background: var(--cortex-card);
    box-shadow: var(--cortex-shadow-sm);
}

.cortex-power-prompt-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cortex-text);
}

.cortex-power-prompt-goal {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cortex-primary);
    /* Consistent 3-line goal block: reserve 3 lines so short goals (most of
       them — the goal is a 1–2 line descriptor) still occupy 3 lines, and clamp
       any longer goal to 3 lines with an ellipsis. min-height = 3 × line-height. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.45em * 3);
    overflow-wrap: anywhere;
}

.cortex-power-prompt-card.editing .cortex-power-prompt-goal {
    display: none;
}

.cortex-power-prompt-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.cortex-power-prompt-card.editing .cortex-power-prompt-actions {
    display: none;
}

.cortex-power-prompt-ask,
.cortex-power-prompt-edit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    border-radius: var(--cortex-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--cortex-transition), color var(--cortex-transition), transform 0.15s ease, border-color var(--cortex-transition);
}

.cortex-power-prompt-ask {
    border: none;
    background: var(--cortex-primary);
    color: #ffffff;
}

.cortex-power-prompt-ask:hover {
    background: var(--cortex-primary-dark);
    transform: translateY(-1px);
}

.cortex-power-prompt-edit {
    border: 1px solid var(--cortex-border);
    background: var(--cortex-card);
    color: var(--cortex-text);
}

.cortex-power-prompt-edit:hover {
    border-color: var(--cortex-primary);
    background: var(--cortex-primary-light);
    color: var(--cortex-primary);
}

.cortex-power-prompt-ask:active,
.cortex-power-prompt-edit:active {
    transform: scale(0.95);
}

/* Inline editor (revealed on Edit) */
.cortex-power-prompt-editor {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.cortex-power-prompt-card.editing .cortex-power-prompt-editor {
    display: flex;
    animation: cortexPromptCardIn 0.22s ease both;
}

.cortex-power-prompt-input {
    width: 100%;
    min-height: auto;
    max-height: 240px;
    resize: vertical;
    padding: 11px 13px;
    box-sizing: border-box;
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius-sm);
    background: var(--cortex-bg);
    color: var(--cortex-text);
    font-family: var(--cortex-font);
    font-size: 13px;
    line-height: 1.55;
    transition: border-color var(--cortex-transition), box-shadow var(--cortex-transition), background var(--cortex-transition);
}

.cortex-power-prompt-input:focus {
    outline: none;
    border-color: var(--cortex-primary);
    background: var(--cortex-card);
    box-shadow: 0 0 0 3px var(--cortex-primary-light);
}

.cortex-power-prompt-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cortex-power-prompt-cancel,
.cortex-power-prompt-send {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 15px;
    border-radius: var(--cortex-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--cortex-transition), color var(--cortex-transition), transform 0.15s ease, border-color var(--cortex-transition);
}

.cortex-power-prompt-cancel {
    border: 1px solid var(--cortex-border);
    background: var(--cortex-card);
    color: var(--cortex-text-muted);
}

.cortex-power-prompt-cancel:hover {
    border-color: var(--cortex-text-muted);
    color: var(--cortex-text);
}

.cortex-power-prompt-send {
    border: none;
    background: var(--cortex-primary);
    color: #ffffff;
}

.cortex-power-prompt-send:hover {
    background: var(--cortex-primary-dark);
    transform: translateY(-1px);
}

.cortex-power-prompt-cancel:active,
.cortex-power-prompt-send:active {
    transform: scale(0.95);
}

.cortex-sidebar-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Extra room at the bottom so the last conversation can scroll clear of
       the footer's fade veil instead of sitting permanently half-frosted. */
    padding: 12px 12px 30px;
    display: flex;
    flex-direction: column;
}

.cortex-sidebar-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--cortex-text-muted);
    padding: 24px;
}

.cortex-sidebar-empty p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

/* ── Sidebar footer: what Cortex is + help, and the way out ──── */

/* No border-top and no background of its own: a hard rule plus a fill of its
   own made the footer land as an abrupt slab under the conversation list. It
   just sits on the sidebar surface; all the separation is done by the frosted
   veil below. */
.cortex-sidebar-footer {
    position: relative;
    flex-shrink: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The fade: sits ON the bottom edge of the conversation list (bottom:100% of
   the footer), so rows scrolling out blur and dissolve into the footer.
   The mask ramps the blur and the tint together — masking a solid fill is
   what makes both ends seamless, where a plain transparent→white gradient
   would still show where the blur starts and stops.
   Degrades cleanly: without backdrop-filter support the masked fill alone is
   still a smooth gradient, just unblurred. */
.cortex-sidebar-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 46px;
    z-index: 2;
    pointer-events: none;
    background: var(--cortex-card);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 48%, rgb(0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 48%, rgb(0, 0, 0) 100%);
}

/* Brand-tinted rather than the neutral grey border: with the footer's hard
   rule gone this card would otherwise be the only crisp edge left down there. */
.cortex-help-card {
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--cortex-primary) 14%, transparent);
    border-radius: var(--cortex-radius-md);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--cortex-primary) 5%, var(--cortex-card)),
            var(--cortex-card));
}

.cortex-help-line {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--cortex-text-muted);
}

/* Both footer controls share a full-width row shape. They render as either an
   <a> (URL configured) or a disabled <button> (blank setting), so every rule
   here has to hold for both element types. */
.cortex-help-btn,
.cortex-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: var(--cortex-radius-btn);
    font-family: var(--cortex-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--cortex-transition), color var(--cortex-transition),
        border-color var(--cortex-transition), transform 0.15s ease, box-shadow var(--cortex-transition);
}

.cortex-help-btn {
    border: 1px solid color-mix(in srgb, var(--cortex-primary) 28%, transparent);
    background: var(--cortex-card);
    color: var(--cortex-primary);
}

.cortex-help-btn:hover {
    background: var(--cortex-primary-light);
    border-color: var(--cortex-primary);
    transform: translateY(-1px);
    box-shadow: var(--cortex-shadow-primary-sm);
}

.cortex-back-btn {
    border: 1px solid var(--cortex-border);
    background: var(--cortex-bg);
    color: var(--cortex-text);
}

.cortex-back-btn:hover {
    background: var(--cortex-primary-light);
    border-color: color-mix(in srgb, var(--cortex-primary) 35%, transparent);
    color: var(--cortex-primary-dark);
    transform: translateY(-1px);
}

/* The back arrow leads the eye leftwards on hover — a small "you're leaving"
   cue that costs nothing and makes the row feel like a real navigation. */
.cortex-back-btn svg {
    transition: transform var(--cortex-spring);
}

.cortex-back-btn:hover svg {
    transform: translateX(-3px);
}

.cortex-help-btn:active,
.cortex-back-btn:active {
    transform: scale(0.98);
}

.cortex-ext-icon {
    opacity: 0.55;
}

/* No URL configured → the control still renders (so the layout is stable and a
   missing setting is visible), but it is inert. See link_button() in
   class-cortex-shortcodes.php: blank settings deliberately have no fallback. */
.cortex-link-disabled,
.cortex-link-disabled:hover {
    background: var(--cortex-bg-deep);
    border-color: var(--cortex-border);
    color: var(--cortex-text-muted);
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
    box-shadow: none;
}

.cortex-link-disabled:hover svg {
    transform: none;
}

/* Sidebar toggle button — hidden on desktop */
.cortex-sidebar-toggle {
    display: none;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 20;
    width: 38px;
    height: 38px;
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius-btn);
    background: var(--cortex-card);
    color: var(--cortex-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: var(--cortex-shadow-md);
    transition: background var(--cortex-transition), color var(--cortex-transition),
        transform 0.15s ease, box-shadow var(--cortex-transition);
}

.cortex-sidebar-toggle:active {
    transform: scale(0.92);
}

.cortex-sidebar-toggle:hover {
    background: var(--cortex-primary-light);
}

/* ── Main Chat Area ─────────────────────────────────────────── */

.cortex-main {
    flex: 1 !important;
    /* display: flex !important; */
    flex-direction: column !important;
    min-width: 0 !important;
    background: var(--cortex-bg);
    height: 100% !important;
    /* Containing block for the welcome overlay and the floating status badge,
       so both centre on the chat column instead of the whole app. */
    position: relative !important;
    overflow: hidden !important;
}

/* ── Top bar (chat column header) ────────────────────────────────
   A solid white band across the top of the chat column, always on screen. Its
   bottom border is the CONTINUATION of the sidebar header's border: the sidebar
   header, this bar and the document-panel header are all pinned to the same
   --cortex-topbar-h, so the rule under "Cortex" runs unbroken across the whole
   app instead of stepping up and down between panes.

   Everything about that alignment hangs off the one token. Change the sidebar
   header's padding or its 34px icon buttons and you must change the token too,
   or the line breaks — that is why it is a token and not three literals.

   Positioned against .cortex-main (position:relative) rather than being in
   normal flow: #cortex-chat-wrapper is height:100% !important, so a flow header
   above it would sum to 100% + bar and push the composer out through
   .cortex-main's overflow:hidden. Absolute keeps the wrapper's box intact, and
   the conversation reserves the space with padding-top instead.

   z-index 8 is chosen, not arbitrary: ABOVE the click-through welcome overlay
   (6) and BELOW the document panel (10) — on mobile that panel slides across the
   entire chat column and must cover the bar, not slide under it. Stay under 10
   if you ever retune this. */

.cortex-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    /* Title left, brand right. Without the left anchor the bar is a wide empty
       band with the lockup stranded in the corner. */
    justify-content: space-between;
    gap: 16px;
    height: var(--cortex-topbar-h);
    padding: 0 18px 0 24px;
    box-sizing: border-box;
    /* Backstop: neither child may ever spill past the bar's edges. */
    overflow: hidden;
    background: var(--cortex-card);
    /* --cortex-border-strong, not --cortex-border: white-on-cream is a ~6%
       step, so the hairline is doing nearly all the separation work here and
       the softer grey simply vanishes. Shared by all three band headers so the
       rule stays one continuous weight across the app. */
    border-bottom: 1px solid var(--cortex-border-strong);
    box-shadow: var(--cortex-topbar-shadow);
}

/* ── The one sidebar control ─────────────────────────────────────
   Collapse and expand are the same button. The chevron points left ("«",
   tuck the list away) while the sidebar is open and rotates a full 180° to
   point right when it is closed, so the icon always shows what the NEXT click
   will do. One element rotating also means the two states cannot drift apart
   the way two separate buttons did. */

.cortex-topbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-left: -6px;
    border: 1px solid transparent;
    border-radius: var(--cortex-radius-btn);
    background: transparent;
    color: var(--cortex-text-muted);
    cursor: pointer;
    transition: background var(--cortex-transition), color var(--cortex-transition),
        border-color var(--cortex-transition);
}

.cortex-topbar-toggle:hover {
    background: var(--cortex-primary-light);
    border-color: color-mix(in srgb, var(--cortex-primary) 22%, transparent);
    color: var(--cortex-primary);
}

.cortex-topbar-toggle:active {
    transform: scale(0.92);
}

.cortex-topbar-toggle:focus-visible {
    outline: none;
    box-shadow: var(--cortex-focus-strong);
}

/* The animation itself. On the SVG rather than the button so the :active
   press-scale above stays independent of the rotation. */
.cortex-topbar-toggle svg {
    transition: transform 0.35s var(--cortex-spring);
}

.cortex-app.cortex-sidebar-collapsed .cortex-topbar-toggle svg {
    transform: rotate(180deg);
}

.cortex-topbar-title {
    min-width: 0;
    flex: 1;
    font-family: var(--cortex-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cortex-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reserve the bar's height so the first message starts below it rather than
   scrolling out from underneath. Unconditional — the bar is structural and
   renders even when the site has no logo and no title. */
.cortex-app .nlux-theme-cortex .nlux-chatRoom-container>.nlux-conversation-container {
    padding-top: calc(var(--cortex-topbar-h) + 22px) !important;
}

/* ── Site brand lockup (lives in the top bar) ────────────────────
   .cortex-app covers the theme's own header, so this is the only thing telling
   a visitor which site they are still on. It sits at the RIGHT of the bar, which
   keeps the two identities apart — product wordmark left in the sidebar, the
   site itself right — and, unlike a sidebar lockup, it survives the sidebar
   being collapsed or drawered away on mobile.

   Flat, not a pill: it is already on the bar's white surface, so a bordered
   chip on top of it would read as a button rather than a mark. Only the linked
   variant grows a surface, and only on hover. */

.cortex-brand-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    /* NEVER shrinks. The lockup is the site's identity and always renders at
       full size; the conversation name next to it is the elastic one and gives
       up whatever width is needed. No max-width for the same reason.
       .cortex-topbar's overflow:hidden remains the last-resort guard. */
    flex-shrink: 0;
    /* Pins to the right edge on its own merits, so hiding the title on narrow
       screens can't let space-between drop the lockup back to the left. */
    margin-left: auto;
    padding: 5px 8px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--cortex-radius-btn);
    background: transparent;
    text-decoration: none;
    transition: background var(--cortex-transition), border-color var(--cortex-transition);
}

.cortex-brand-chip-img {
    display: block;
    width: auto;
    height: 30px;
    max-width: 132px;
    object-fit: contain;
    flex-shrink: 0;
    /* The mark is normally the site icon (favicon), which is a SQUARE image.
       Raw, it reads as a stray thumbnail dropped in the corner; rounded it
       reads as a deliberate app mark. Harmless on the wide transparent logo
       used as a fallback, which has no visible corners to round. */
    border-radius: var(--cortex-radius-sm);
}

.cortex-brand-chip-title {
    flex-shrink: 0;
    font-family: var(--cortex-font-head);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--cortex-text);
    white-space: nowrap;
}

.cortex-brand-chip-sep {
    flex-shrink: 0;
    color: var(--cortex-border-strong);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}

/* Renders in full like the rest of the lockup — no ellipsis, no shrinking.
   A site with a very long tagline should shorten it in Settings > General;
   the bar will not silently do it for them. */
.cortex-brand-chip-tagline {
    flex-shrink: 0;
    font-family: var(--cortex-font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--cortex-text-muted);
    white-space: nowrap;
}

/* Only the linked variant reacts to the pointer. With no Website Home URL the
   lockup is a <div> — a label, not a control — so it must not look clickable. */
.cortex-brand-chip-link {
    cursor: pointer;
}

.cortex-brand-chip-link:hover {
    background: var(--cortex-primary-light);
    border-color: color-mix(in srgb, var(--cortex-primary) 22%, transparent);
}

.cortex-brand-chip-link:hover .cortex-brand-chip-title {
    color: var(--cortex-primary-dark);
}

.cortex-brand-chip-link:focus-visible {
    outline: none;
    box-shadow: var(--cortex-focus-strong);
}

/* ── Welcome screen (empty conversation) ────────────────────────
   Shown whenever the chat canvas has no messages. It replaces NLUX's own
   launch pad, which is just the persona name + tagline and gives a first-time
   visitor nothing to do. The overlay is click-through so the composer beneath
   it stays fully usable; only the buttons take pointer events. */

.cortex-empty-state {
    display: none;
    position: absolute;
    inset: 0;
    /* Bottom padding clears the composer so the block optically centres in
       the conversation area rather than the whole column; the top clears the
       bar, so the welcome block centres in the space actually available.
       116px, not 132px — it tracks the composer's occupied height, which lost
       the 16px bottom padding it used to sit on. */
    padding: calc(var(--cortex-topbar-h) + 24px) 24px 116px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    z-index: 6;
    pointer-events: none;
}

.cortex-app.cortex-empty-active .cortex-empty-state {
    display: flex;
}

/* While our welcome screen is up, NLUX's launch pad must not show through.
   Only its children are hidden — the container keeps its flex sizing, so the
   composer stays exactly where it is. */
.cortex-app.cortex-empty-active .nlux-launchPad-container>* {
    visibility: hidden !important;
}

.cortex-empty-inner {
    max-width: 520px;
    text-align: center;
    animation: cortexPanelIn 0.4s var(--cortex-spring) both;
}

.cortex-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--cortex-primary);
    color: #ffffff;
    box-shadow: var(--cortex-shadow-primary);
}

.cortex-empty-title {
    margin: 0 0 10px;
    font-family: var(--cortex-font-head);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--cortex-text);
}

.cortex-empty-sub {
    margin: 0 auto 24px;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--cortex-text-muted);
}

.cortex-empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.cortex-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Re-enable clicks: the overlay itself is pointer-events:none. */
    pointer-events: auto;
    padding: 11px 20px;
    border-radius: var(--cortex-radius-pill);
    font-family: var(--cortex-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--cortex-transition), color var(--cortex-transition),
        border-color var(--cortex-transition), transform 0.15s ease, box-shadow var(--cortex-transition);
}

.cortex-empty-btn-primary {
    border: 1px solid transparent;
    background: var(--cortex-primary);
    color: #ffffff;
    box-shadow: var(--cortex-shadow-primary-sm);
}

.cortex-empty-btn-primary:hover {
    background: var(--cortex-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--cortex-shadow-primary);
}

.cortex-empty-btn-ghost {
    border: 1px solid var(--cortex-border-strong);
    background: var(--cortex-card);
    color: var(--cortex-text);
}

.cortex-empty-btn-ghost:hover {
    border-color: var(--cortex-primary);
    background: var(--cortex-primary-light);
    color: var(--cortex-primary-dark);
    transform: translateY(-1px);
}

.cortex-empty-btn:active {
    transform: scale(0.97);
}

.cortex-empty-hint {
    margin: 22px 0 0;
    font-size: 12.5px;
    color: var(--cortex-text-muted);
}

.cortex-empty-hint .cortex-kbd {
    margin: 0 1px;
}

@media (max-width: 768px) {
    .cortex-empty-state {
        padding: 20px 18px 124px;
    }

    .cortex-empty-title {
        font-size: 21px;
    }

    .cortex-empty-sub {
        font-size: 13px;
    }

    .cortex-empty-actions {
        flex-direction: column;
    }

    .cortex-empty-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .cortex-empty-hint {
        display: none;
    }
}

#cortex-chat-wrapper,
#cortex-search-wrapper {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Force NLUX root to fill the wrapper */
.nlux-theme-cortex.nlux-AiChat-root {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* The chatRoom-container wraps the conversation + composer.
   position:relative is the containing block for the absolutely-positioned
   composer overlay below — without it the composer would escape to .cortex-main
   and sit over the document panel's edge. */
.nlux-theme-cortex .nlux-chatRoom-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* The conversation area should scroll its own messages */
.nlux-theme-cortex .nlux-chatRoom-container>.nlux-conversation-container {
    flex: 1 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    /* Breathing room so the first message isn't glued to the top */
    padding-top: 22px !important;
    /* Reserve the overlaying composer's height so the last line can still be
       scrolled clear of it. --cortex-composer-h is measured and written by
       trackComposerHeight() in cortex-chat.js (the textarea grows as you type);
       the fallback covers the single-line case before the observer first fires
       and any browser without ResizeObserver. */
    padding-bottom: calc(var(--cortex-composer-h, 84px) + 12px) !important;
}

/* Hide NLUX Watermark / Footer just in case it's taking up invisible space */
.nlux-theme-cortex .nlux-comp-watermark,
.nlux-theme-cortex .nlux-watermark,
.nlux-comp-watermark {
    display: none !important;
}

/* ── Composer: frosted, with the answer running behind it ────────
   The composer OVERLAYS the conversation rather than sitting in flow beneath
   it, so the answer keeps going behind the input instead of being chopped off
   at its top edge. Three layers produce the dissolve:

     1. .nlux-conversation-container reserves the composer's height as
        padding-bottom, so everything can still be scrolled fully clear of it.
     2. ::before is a blur veil standing above the pill, its strength ramped by
        a mask so text softens gradually on approach instead of hitting a line.
     3. The pill itself is translucent + backdrop-blurred, so text continues
        through it as frosted glass rather than vanishing under an opaque slab.

   The veil is a MASKED BLUR, not a solid gradient fill — the same technique as
   .cortex-sidebar-footer::before. A solid fill would hide the text completely,
   which is the opposite of what is wanted here; the mask is what hides where
   the blur starts and stops. Without backdrop-filter support it degrades to a
   plain soft tint, still readable, just unblurred.

   padding-bottom is 0, not the 16px it used to be: that lifted the input off
   the bottom edge and read as the field floating rather than being anchored. */
.nlux-theme-cortex .nlux-chatRoom-container>.nlux-composer-container {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 5;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    /* The container spans the full width but only the pill is a control — let
       clicks either side of it reach the conversation behind. */
    pointer-events: none;
}

.nlux-theme-cortex .nlux-chatRoom-container>.nlux-composer-container::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Extends above the pill: this overhang is the dissolve. */
    top: -38px;
    z-index: -1;
    pointer-events: none;
    background: color-mix(in srgb, var(--cortex-bg) 55%, transparent);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
}

/* Welcome / launch pad also needs to fit */
.nlux-theme-cortex .nlux-chatRoom-container>.nlux-launchPad-container {
    flex: 1 !important;
    overflow: hidden !important;
}

/* ── NLUX Theme Overrides (themeId: 'cortex') ───────────────── */

.nlux-theme-cortex {
    /* Base Chat Room */
    --nlux-ChatRoom--BackgroundColor: var(--cortex-bg);
    --nlux-ChatRoom--BorderColor: transparent;
    --nlux-ChatRoom--BorderWidth: 0px;
    --nlux-ChatRoom--BorderRadius: 0px;
    --nlux-ChatRoom--Width: 100%;

    /* Composer (Input Area) */
    --nlux-Composer--BackgroundColor: var(--cortex-card);
    --nlux-Composer--BorderColor: var(--cortex-border);
    --nlux-Composer--BorderWidth: 1px;
    --nlux-Composer--BorderRadius: 24px;
    --nlux-Composer--FocusBorderColor: var(--cortex-primary);
    --nlux-Composer--Padding: 8px 12px;
    --nlux-Composer--InputPadding: 8px 12px;
    --nlux-Composer--BoxShadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    --nlux-Composer--Margin: 0 16px 0 16px;

    /* Submit Button */
    --nlux-SubmitButton--BackgroundColor: var(--cortex-primary);
    --nlux-SubmitButton--HoverBackgroundColor: var(--cortex-primary-dark);
    --nlux-SubmitButton--BorderRadius: 50%;
    --nlux-SubmitButton--BorderWidth: 0px;
    --nlux-SubmitButton--BorderColor: transparent;
    --nlux-SubmitButton--Color: #ffffff;

    /* Message Bubbles - Base */
    --nlux-Message--Padding: 16px 20px;
    --nlux-Message--FontSize: 15px;
    --nlux-Message--LineHeight: 1.6;

    /* User Messages */
    --nlux-HumanMessage--BackgroundColor: var(--cortex-primary);
    --nlux-HumanMessage--TextColor: #ffffff;
    --nlux-HumanMessage--BorderRadius: 20px 20px 4px 20px;
    --nlux-HumanMessage--BorderWidth: 0px;
    --nlux-HumanMessage--BorderColor: transparent;

    /* Assistant Messages */
    --nlux-AiMessage--BackgroundColor: var(--cortex-card);
    --nlux-AiMessage--TextColor: var(--cortex-text);
    --nlux-AiMessage--BorderRadius: 20px 20px 20px 4px;
    --nlux-AiMessage--BorderWidth: 1px;
    --nlux-AiMessage--BorderColor: var(--cortex-border);
    --nlux-AiMessage--BoxShadow: var(--cortex-shadow-sm);

    /* Typography */
    font-family: var(--cortex-font) !important;
    font-size: 15px;
    line-height: 1.65;
    color: var(--cortex-text);
}

/* (width already set in main .cortex-app rule above) */

/* Aggressive overrides for NLUX defaults that might leak through */
.nlux-theme-cortex .nlux-comp-message {
    padding: var(--nlux-Message--Padding, 16px 20px) !important;
    border: none !important;
}

.nlux-theme-cortex .nlux-comp-chatItem--received .nlux-comp-message {
    background: var(--cortex-card) !important;
    color: var(--cortex-text) !important;
    border: 1px solid var(--cortex-border) !important;
    border-radius: 20px 20px 20px 4px !important;
    box-shadow: var(--cortex-shadow-sm) !important;
}

/* User (sent) message bubble — indigo, rounded, never the NLUX dark default */
.nlux-theme-cortex .nlux-comp-chatItem--sent .nlux-comp-message {
    background: var(--cortex-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px 20px 4px 20px !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cortex-primary) 24%, transparent) !important;
}

.nlux-theme-cortex .nlux-comp-composer {
    margin: 12px 16px !important;
    border: 1px solid var(--cortex-border) !important;
    border-radius: 24px !important;
    /* Frosted rather than opaque, so the answer stays visible running behind
       the field. Kept at 86% + a strong blur: enough to read the answer
       through, still enough contrast for what is being typed. */
    background: color-mix(in srgb, var(--cortex-card) 86%, transparent) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    /* The vertical breathing room lives HERE, not on the textarea. A textarea's
       own padding scrolls with its content in Chrome, so text slid up into it
       and showed a half-line jammed against the pill's rounded top edge. With
       the padding on the pill, scrolled text clips cleanly at the textarea's
       content box and the gap to the border stays constant. */
    padding: 14px 6px 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    /* Hard width guard. A flex item's automatic minimum size is its content's
       min-content width, so anything unwrappable inside could otherwise push
       the pill wider than the column that contains it. */
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-shadow: var(--cortex-shadow-sm) !important;
    /* The container above is pointer-events:none so clicks pass either side. */
    pointer-events: auto;
    transition: border-color var(--cortex-transition), box-shadow var(--cortex-transition),
        background var(--cortex-transition) !important;
}

/* While typing, firm the surface up — the answer behind is context, but the
   text being composed is the thing that must stay legible. */
.nlux-theme-cortex .nlux-comp-composer:focus-within {
    background: color-mix(in srgb, var(--cortex-card) 96%, transparent) !important;
}

/* Lift + branded ring when the user is composing */
.nlux-theme-cortex .nlux-comp-composer:focus-within {
    border-color: var(--cortex-primary) !important;
    box-shadow: var(--cortex-shadow-md), var(--cortex-focus) !important;
}

/* Forcefully remove WordPress/Theme borders on the actual input field */
.nlux-theme-cortex .nlux-comp-composer>textarea {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    /* Zero vertical padding — see the pill's padding above. */
    padding: 0 !important;
    resize: none !important;
    font-size: 15px !important;
    font-family: var(--cortex-font) !important;
    color: var(--cortex-text) !important;
    line-height: 1.4 !important;
    /* nova.css sets field-sizing:content, which sizes the field from its
       content in BOTH axes and so overrides the flex basis — min-width:0 above
       cannot rein it in. One unbroken 192-character token gave the textarea a
       content width of ~670px and shoved the whole pill 40px past the right
       edge of the chat column. Height is driven by NLUX's own inline
       style.height, never by field-sizing, so switching it back to the initial
       value costs nothing. */
    field-sizing: fixed !important;
    /* And let a long unbroken token wrap instead of demanding width. */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    /* Centre the text within whatever height the field currently has, so the
       placeholder never sits on the first of two rows while the box itself is
       vertically centred in the pill.
       "safe" matters: once the content overflows and the field scrolls,
       centring would push the first lines out of reach, so it falls back to
       start alignment exactly then. Browsers without align-content on block
       containers simply keep today's top alignment. */
    align-content: safe center !important;
    /* Grow to six lines, then scroll.
       NLUX's own cap (--nlux-prmInp-mxhg, 80px in the nova theme) is not a
       multiple of OUR line box — 15px x 1.4 = 21px, so 80px is 3.05 lines and
       the topmost visible line was permanently sliced in half against the
       pill's rounded edge, which read as the text growing out of the field.
       An exact multiple of the line box (the padding now lives on the pill), so
       it stays whole if the type size ever changes. */
    max-height: calc(15px * 1.4 * 6) !important;
    overflow-y: auto !important;
}

/* Submit Button — we inject our own inline SVG since NLUX's CSS-mask
   icons only work with the 'nova' theme (--nlux-send-icon is undefined
   on 'cortex' theme). */
.nlux-theme-cortex .nlux-comp-composer>button {
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    background-color: var(--cortex-primary) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    flex-shrink: 0 !important;
    outline: none !important;
    overflow: hidden !important;
    position: relative !important;
}

.nlux-theme-cortex .nlux-comp-composer>button:hover {
    background-color: var(--cortex-primary-dark) !important;
    transform: scale(1.05) !important;
}

.nlux-theme-cortex .nlux-comp-composer>button:disabled {
    background-color: var(--cortex-border) !important;
    color: var(--cortex-text-muted) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* NLUX's cancel icon is mask-based and resolves to nothing off the nova
   theme, so it stays hidden. */
.nlux-theme-cortex .nlux-comp-cancelIcon {
    display: none !important;
}

/* ── Send arrow ──────────────────────────────────────────────────
   Painted onto the element NLUX itself renders, with our own mask.

   It used to be an inline <svg> injected by JS 200ms after mount, with NLUX's
   own icon hidden. That could not survive: Preact re-renders the button every
   time the composer changes state (empty -> typing), which discards the
   injected node — so the arrow vanished the moment anyone typed, leaving a
   bare coloured circle. Nothing re-injected it, because the injector ran once
   per mount, not per render.

   A mask on NLUX's own element cannot be lost that way, and needs no JS at
   all. background-color: currentColor means it still inherits the button's
   enabled/disabled colour. */
.nlux-theme-cortex .nlux-comp-sendIcon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

.nlux-theme-cortex .nlux-comp-sendIcon>.nlux-comp-sendIcon-container {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
}

/* ── "Even geduld a.u.b." beside the waiting spinner ──────────────────
   NLUX mounts .nlux-chatSegment-loader-container after a message is sent and
   removes it the moment the first generated chunk arrives, so attaching the
   label to that element gives it exactly the lifetime we want — no JS, and no
   state to clear when the stream starts or fails.

   The text is painted through the gradient (background-clip: text), which is
   why `color` is transparent; setting a colour here would hide the shimmer. */
.cortex-app .nlux-chatSegment-loader-container::after {
    content: 'Even geduld a.u.b.';
    align-self: center;
    margin-left: 10px;
    font-family: var(--cortex-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0.7;
    background: linear-gradient(90deg,
            var(--cortex-text-muted) 0%,
            var(--cortex-text-muted) 40%,
            var(--cortex-text) 50%,
            var(--cortex-text-muted) 60%,
            var(--cortex-text-muted) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: cortexShimmer 1.8s linear infinite;
}

@keyframes cortexShimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

/* A sweeping highlight is exactly the kind of motion this opts out of. The
   label stays, at a readable flat colour. */
@media (prefers-reduced-motion: reduce) {
    .cortex-app .nlux-chatSegment-loader-container::after {
        animation: none;
        background: none;
        color: var(--cortex-text-muted);
    }
}

/* Spinner inside the button (NLUX's built-in loader) —
   hidden by default, shown during submitting/waiting states */
.nlux-theme-cortex .nlux-comp-composer>button>.nlux-comp-messageLoader {
    display: none !important;
}

/* When submitting or waiting: hide the arrow, show the spinner.
   Targets NLUX's own icon element — the arrow is a mask on it now, not an
   injected .cortex-send-svg. */
.nlux-theme-cortex .nlux-comp-composer.nlux-composer--submitting>button>.nlux-comp-sendIcon,
.nlux-theme-cortex .nlux-comp-composer.nlux-composer--waiting>button>.nlux-comp-sendIcon {
    display: none !important;
}

.nlux-theme-cortex .nlux-comp-composer.nlux-composer--submitting>button>.nlux-comp-messageLoader,
.nlux-theme-cortex .nlux-comp-composer.nlux-composer--waiting>button>.nlux-comp-messageLoader {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Make the spinner white */
.nlux-theme-cortex .nlux-comp-composer>button .spinning-loader {
    color: #ffffff !important;
}


/* Hide the broken persona avatar square */
.nlux-theme-cortex .nlux-comp-avatar {
    display: none !important;
}

.nlux-theme-cortex img[src=""],
.nlux-theme-cortex img:not([src]) {
    display: none !important;
}

/* Markdown inside assistant messages — real heading hierarchy */
.nlux-theme-cortex .nlux-markdown-container h1,
.nlux-theme-cortex .nlux-markdown-container h2,
.nlux-theme-cortex .nlux-markdown-container h3 {
    font-family: var(--cortex-font-head);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1em;
    margin-bottom: 0.4em;
    color: var(--cortex-text);
    letter-spacing: -0.01em;
}

.nlux-theme-cortex .nlux-markdown-container h1 {
    font-size: 20px;
}

.nlux-theme-cortex .nlux-markdown-container h2 {
    font-size: 17px;
}

.nlux-theme-cortex .nlux-markdown-container h3 {
    font-size: 15px;
}

.nlux-theme-cortex .nlux-markdown-container ul,
.nlux-theme-cortex .nlux-markdown-container ol {
    padding-left: 1.4em;
    margin: 0.5em 0;
}

.nlux-theme-cortex .nlux-markdown-container li {
    margin-bottom: 0.3em;
}

.nlux-theme-cortex .nlux-markdown-container code {
    background: var(--cortex-code-bg);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.9em;
    color: var(--cortex-code-text);
}

.nlux-theme-cortex .nlux-markdown-container pre {
    background: var(--cortex-code-bg);
    color: var(--cortex-text);
    padding: 14px 18px;
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius-sm);
    overflow-x: auto;
    font-size: 13px;
}

.nlux-theme-cortex .nlux-markdown-container pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.nlux-theme-cortex .nlux-markdown-container blockquote {
    border-left: 3px solid var(--cortex-primary);
    padding-left: 14px;
    margin: 0.8em 0;
    color: var(--cortex-text-muted);
    font-style: italic;
}

/* ── Citation Badges ────────────────────────────────────────── */

.cortex-citation,
a[href^="#cortex-cite:"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: super;
    margin: 0 2px;
    padding: 0;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 9px;
    background: var(--cortex-primary-light);
    color: var(--cortex-primary-dark);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease,
        transform 0.15s ease, box-shadow 0.15s ease;
}

.cortex-citation:hover,
a[href^="#cortex-cite:"]:hover {
    background: var(--cortex-primary);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--cortex-shadow-primary-sm);
}

/* Pending citation (streaming, not yet resolved) — muted + gently pulsing */
.cortex-citation-pending {
    background: var(--cortex-border) !important;
    color: var(--cortex-text-muted) !important;
    cursor: default !important;
    animation: cortex-pulse 1.4s ease-in-out infinite;
}

.cortex-citation-pending:hover {
    background: var(--cortex-border) !important;
    color: var(--cortex-text-muted) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Citation Right Panel ───────────────────────────────────── */

.cortex-right-panel {
    display: none;
    /* hidden by default on desktop */
    position: relative;
    flex-direction: column;
    width: 40%;
    min-width: 320px;
    max-width: none;
    background: var(--cortex-card);
    border-left: 1px solid var(--cortex-border);
    transition: transform var(--cortex-transition), width var(--cortex-transition);
    z-index: 10;
}

/* Disable width animation while the user is dragging the splitter */
.cortex-app.cortex-resizing .cortex-right-panel {
    transition: none;
}

.cortex-app.cortex-resizing {
    cursor: col-resize;
    user-select: none;
}

.cortex-right-panel.cortex-panel-open {
    display: flex;
}

/* On mobile, slide over the chat */
@media (max-width: 768px) {
    .cortex-right-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        max-width: 100%;
        transform: translateX(100%);
        display: flex;
        /* always flex on mobile, translated away */
    }

    .cortex-right-panel.cortex-panel-open {
        transform: translateX(0);
    }
}

.cortex-right-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cortex-border);
    background: var(--cortex-bg);
}

.cortex-right-panel-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--cortex-text);
}

.cortex-right-panel-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cortex-panel-btn {
    background: transparent;
    border: none;
    color: var(--cortex-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--cortex-radius-sm);
    transition: background 0.2s ease, color 0.2s ease;
}

.cortex-panel-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--cortex-text);
}

.cortex-panel-divider {
    width: 1px;
    height: 16px;
    background: var(--cortex-border);
    margin: 0 4px;
}

.cortex-right-panel-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--cortex-bg-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cortex-panel-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--cortex-text-muted);
    font-size: 13px;
    gap: 12px;
}

.cortex-image-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    /* enables scrolling natively when zoomed */
    display: none;
    padding: 16px;
    box-sizing: border-box;
    /* Use block display so width scaling naturally expands the scroll area */
    text-align: center;
}

.cortex-image-container.loaded {
    display: block;
}

.cortex-panel-image {
    width: 100%;
    max-width: none;
    /* allow width to exceed container */
    box-shadow: var(--cortex-shadow-md);
    border-radius: var(--cortex-radius-sm);
    /* Transition width instead of transform for native scroll area expansion */
    transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}

/* ── Floating Status Badge ──────────────────────────────────── */

#cortex-floating-status {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--cortex-primary);
    border: 1px solid var(--cortex-primary-light);
    padding: 7px 16px;
    border-radius: var(--cortex-radius-pill);
    font-size: 13px;
    font-weight: 600;
    z-index: 100;
    box-shadow: var(--cortex-shadow-md);
    align-items: center;
    gap: 8px;
    /* display: flex; (set via JS when active) */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cortex-floating-text {
    color: var(--cortex-primary);
    letter-spacing: -0.01em;
}

/* Spinner */
.cortex-modal-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--cortex-text-muted);
    font-size: 13px;
}

.cortex-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--cortex-border);
    border-top-color: var(--cortex-primary);
    border-radius: 50%;
    animation: cortexSpin 0.7s linear infinite;
}

@keyframes cortexSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Error State ────────────────────────────────────────────── */

.cortex-error {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--cortex-radius-sm);
    padding: 14px 20px;
    font-family: var(--cortex-font);
    font-size: 14px;
    text-align: center;
}

/* ── Responsive — Small Screens ─────────────────────────────── */

@media (max-width: 768px) {
    .cortex-app {
        height: calc(100vh - 100px);
        max-height: none;
        border-radius: 0;
        border: none;
    }

    .cortex-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 30;
        transform: translateX(-100%);
        box-shadow: none;
    }

    .cortex-sidebar.cortex-sidebar-open {
        transform: translateX(0);
        box-shadow: var(--cortex-shadow-lg);
    }

    .cortex-sidebar-toggle {
        display: flex;
    }

    .cortex-modal-content {
        max-width: 96vw;
        border-radius: var(--cortex-radius-sm);
    }

    /* The toggle is now IN the bar, so there is no floating hamburger to
       reserve space for any more — the bar just needs its own edge padding. */
    .cortex-topbar {
        padding: 0 14px;
    }

    /* Dropped rather than shrunk: between the toggle and the brand lockup there
       is not enough width left for the name to be anything but a couple of
       ellipsised characters. The sidebar still shows which conversation is
       open, and the drawer's own toggle is right here. */
    .cortex-topbar-title {
        display: none;
    }

    /* Mobile shows logo + name only. The tagline is the gloss and the first
       thing to go; the name identifies the site and always stays. */
    .cortex-brand-chip-sep,
    .cortex-brand-chip-tagline {
        display: none;
    }

    .cortex-brand-chip {
        gap: 7px;
    }

    /* On mobile the sidebar is a drawer: closed, the chevron must point RIGHT
       ("open me"); it returns to pointing left once the drawer is showing.
       .cortex-drawer-open is mirrored onto .cortex-app by setDrawerOpen() —
       the drawer's own class sits on the sidebar, which is not an ancestor of
       the bar and so cannot be selected from here. */
    .cortex-topbar-toggle svg {
        transform: rotate(180deg);
    }

    .cortex-app.cortex-drawer-open .cortex-topbar-toggle svg {
        transform: none;
    }

    .cortex-brand-chip-img {
        height: 26px;
        max-width: 104px;
    }

    .cortex-brand-chip-title {
        font-size: 13.5px;
    }
}

/* (There is deliberately no narrower breakpoint that drops the site name.
   Logo + name is the floor on every screen: the name is what tells a visitor
   whose site they are on, which is the entire reason the badge exists.) */

/* ── Loading Skeleton ──────────────────────────────────────── */

.cortex-loading-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 16px;
    color: var(--cortex-text-muted);
    font-family: var(--cortex-font);
}

.cortex-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--cortex-border);
    border-top-color: var(--cortex-primary);
    border-radius: 50%;
    animation: cortex-spin 0.8s linear infinite;
}

@keyframes cortex-spin {
    100% {
        transform: rotate(360deg);
    }
}

.cortex-loading-text {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.01em;
    animation: cortex-pulse 1.5s ease-in-out infinite;
}

@keyframes cortex-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ── Message Sources UI ─────────────────────────────────────── */

/* Override NLUX default overflow to prevent dropdown clipping */
.nlux-comp-message {
    overflow: visible !important;
}

.cortex-sources-wrapper {
    position: relative;
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.cortex-sources-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--cortex-card);
    border: 1px solid var(--cortex-border);
    border-radius: 9999px;
    box-shadow: var(--cortex-shadow-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cortex-sources-trigger:hover {
    background: var(--cortex-primary-light);
    border-color: var(--cortex-primary-light);
}

.cortex-sources-trigger:active {
    transform: scale(0.95);
}

.cortex-sources-icon {
    width: 15px;
    height: 15px;
    color: var(--cortex-primary);
    transition: transform 0.3s;
}

.cortex-sources-trigger:hover .cortex-sources-icon {
    transform: scale(1.1) rotate(-8deg);
}

.cortex-sources-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.15rem;
    min-width: 1.15rem;
    padding: 0 4px;
    border-radius: var(--cortex-radius-pill);
    background: var(--cortex-primary-light);
    color: var(--cortex-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.cortex-sources-chevron {
    width: 14px;
    height: 14px;
    color: var(--cortex-text-muted);
    transition: transform 0.3s;
}

.cortex-sources-trigger:hover .cortex-sources-chevron {
    transform: translateY(1px);
}

/* Dropdown */
.cortex-sources-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    background: var(--cortex-card);
    border: 1px solid var(--cortex-border);
    border-radius: 12px;
    box-shadow: var(--cortex-shadow-lg);
    z-index: 50;
    overflow: hidden;
    animation: cortexDropdownFadeIn 0.2s ease-out forwards;
}

.cortex-sources-dropdown.open {
    display: flex;
    flex-direction: column;
}

@keyframes cortexDropdownFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.cortex-sources-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cortex-border);
    background: var(--cortex-bg);
}

.cortex-sources-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--cortex-radius-sm);
    background: var(--cortex-primary-light);
    color: var(--cortex-primary);
}

.cortex-sources-header-icon svg {
    width: 15px;
    height: 15px;
}

.cortex-sources-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--cortex-text);
    line-height: 1.2;
}

.cortex-sources-header p {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: var(--cortex-text-muted);
}

.cortex-sources-list {
    max-height: 250px;
    overflow-y: auto;
    padding: 8px;
}

.cortex-source-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cortex-source-item:hover {
    background: var(--cortex-surface-hover);
}

.cortex-source-item:active {
    transform: scale(0.98);
}

.cortex-source-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--cortex-radius-sm);
    background: var(--cortex-primary-light);
    color: var(--cortex-primary);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.cortex-source-item:hover .cortex-source-item-icon {
    transform: scale(1.05);
}

.cortex-source-item-icon svg {
    width: 18px;
    height: 18px;
}

.cortex-source-filename {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--cortex-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* ── Sidebar thread list (chat history) ─────────────────────── */
.cortex-thread-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: var(--cortex-radius-sm);
    padding: 10px 12px;
    margin: 2px 0;
    cursor: pointer;
    color: var(--cortex-text);
    font-size: 14px;
    line-height: 1.3;
    transition: background var(--cortex-transition), color var(--cortex-transition);
}

.cortex-thread-item:hover {
    background: var(--cortex-surface-hover);
}

.cortex-thread-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Thread delete button ───────────────────────────────────── */
.cortex-thread-delete {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--cortex-radius-sm);
    background: transparent;
    color: var(--cortex-text-muted);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--cortex-transition), background var(--cortex-transition),
        color var(--cortex-transition), transform var(--cortex-transition);
}

.cortex-thread-item:hover .cortex-thread-delete,
.cortex-thread-item.cortex-thread-active .cortex-thread-delete {
    opacity: 1;
    transform: scale(1);
}

.cortex-thread-delete:hover {
    background: var(--cortex-danger-bg);
    color: var(--cortex-danger);
}

.cortex-thread-deleting {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Loading spinners (sidebar list + chat history) ─────────── */
.cortex-sidebar-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.cortex-chat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 240px;
}

/* ── Inline delete confirm (✓ / ✕) ──────────────────────────── */
.cortex-thread-confirm {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.cortex-thread-item.cortex-thread-confirming .cortex-thread-delete {
    display: none;
}

.cortex-thread-item.cortex-thread-confirming .cortex-thread-confirm {
    display: inline-flex;
}

.cortex-thread-confirm-yes,
.cortex-thread-confirm-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--cortex-radius-sm);
    background: transparent;
    cursor: pointer;
    transition: background var(--cortex-transition), color var(--cortex-transition);
}

.cortex-thread-confirm-yes {
    color: var(--cortex-danger);
}

.cortex-thread-confirm-yes:hover {
    background: var(--cortex-danger-bg);
}

.cortex-thread-confirm-no {
    color: var(--cortex-text-muted);
}

.cortex-thread-confirm-no:hover {
    background: var(--cortex-surface-hover);
}

/* ═══════════════════════════════════════════════════════════════
   e-xamens polish
   ═══════════════════════════════════════════════════════════════ */

/* Serif display headings (Roboto Slab), matching the site */
.cortex-sidebar-header h3,
.cortex-right-panel-header h3,
.cortex-panel-title-text,
.nlux-comp-chatPersona-name,
.nlux-comp-welcomeMessage-personaName {
    font-family: var(--cortex-font-head);
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* Warm backdrop with a floating white chat card for depth */
.cortex-app,
.cortex-main {
    background: var(--cortex-bg);
}

#cortex-chat-wrapper {
    background: var(--cortex-card);
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius);
    box-shadow: var(--cortex-shadow-md);
    overflow: hidden;
}

/* The three header icon buttons share one shape (rounded square).
   Only the mobile hamburger stays pill-free via its own rule. */
.cortex-new-chat-btn {
    color: #fff;
}

/* Active conversation: indigo tint (no left accent bar) */
.cortex-thread-item.cortex-thread-active {
    background: var(--cortex-primary-light);
    color: var(--cortex-primary-dark);
}

/* Message bubbles keep their asymmetric "tail" corner (set per sender
   above); only the three non-tail corners are large & uniform. */
.nlux-theme-cortex .nlux-comp-chatItem--sent .nlux-comp-message {
    border-radius: 20px 20px 6px 20px !important;
}

.nlux-theme-cortex .nlux-comp-chatItem--received .nlux-comp-message {
    border-radius: 20px 20px 20px 6px !important;
}

/* ═══════════════════════════════════════════════════════════════
   Document panel: draggable splitter + redesigned header
   ═══════════════════════════════════════════════════════════════ */

/* Drag handle straddling the panel's left border */
.cortex-panel-resizer {
    position: absolute;
    left: -5px;
    top: 0;
    bottom: 0;
    width: 11px;
    cursor: col-resize;
    z-index: 15;
    background: transparent;
}

/* Full-height accent line — appears on hover/drag */
.cortex-panel-resizer::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: transparent;
    transition: background 0.15s ease;
}

.cortex-panel-resizer:hover::before,
.cortex-app.cortex-resizing .cortex-panel-resizer::before {
    background: var(--cortex-primary);
}

/* Always-visible grip pill with three dots — signals "drag to resize" */
.cortex-panel-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 40px;
    border-radius: 6px;
    background-color: var(--cortex-card);
    border: 1px solid var(--cortex-border);
    box-shadow: var(--cortex-shadow-sm);
    background-image:
        radial-gradient(circle, var(--cortex-text-muted) 1.1px, transparent 1.6px),
        radial-gradient(circle, var(--cortex-text-muted) 1.1px, transparent 1.6px),
        radial-gradient(circle, var(--cortex-text-muted) 1.1px, transparent 1.6px);
    background-repeat: no-repeat;
    background-position: center calc(50% - 7px), center 50%, center calc(50% + 7px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cortex-panel-resizer:hover::after,
.cortex-app.cortex-resizing .cortex-panel-resizer::after {
    border-color: var(--cortex-primary);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cortex-primary) 28%, transparent);
    transform: translate(-50%, -50%) scale(1.08);
    background-image:
        radial-gradient(circle, var(--cortex-primary) 1.2px, transparent 1.7px),
        radial-gradient(circle, var(--cortex-primary) 1.2px, transparent 1.7px),
        radial-gradient(circle, var(--cortex-primary) 1.2px, transparent 1.7px);
}

/* Header becomes a clean toolbar: file info left, controls right.
   ONE row, deliberately. Stacking the filename above the page + controls
   pushed the header past --cortex-topbar-h (12 + 18 + 6 + 30 + 12 ≈ 78px),
   so it sat ~11px lower than the chat top bar beside it and the two bottom
   borders stepped instead of running as one band. On a single row the
   content measures ~54px, the min-height below governs, and the two headers
   line up exactly. The filename keeps its ellipsis + title tooltip, so a
   dragged-narrow panel truncates gracefully rather than wrapping. */
.cortex-right-panel-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.cortex-panel-filename {
    font-family: var(--cortex-font-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--cortex-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-width:0 is what lets the ellipsis engage — without it a flex item
       refuses to shrink below its content width and overflows instead. */
    flex: 1 1 auto;
    min-width: 0;
}

.cortex-panel-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
}

/* Mobile keeps the two-row stack: the panel overlays the chat full-screen
   there, so there is no top bar beside it to align to, and on a ~360px
   screen the filename needs a line of its own. */
@media (max-width: 768px) {
    .cortex-right-panel-header {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 6px;
    }

    .cortex-panel-filename {
        flex: 0 0 auto;
    }

    .cortex-panel-meta-row {
        flex: 1 1 auto;
    }
}

.cortex-panel-page {
    font-size: 12px;
    font-weight: 500;
    color: var(--cortex-text-muted);
    white-space: nowrap;
}

.cortex-panel-page:empty {
    display: none;
}

.cortex-right-panel-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
    margin-left: auto;
}

/* Pill-grouped zoom control with a live % readout */
.cortex-zoom-group {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background: var(--cortex-card);
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius-pill);
    padding: 2px;
}

.cortex-zoom-group .cortex-panel-btn {
    padding: 4px;
    border-radius: var(--cortex-radius-pill);
}

.cortex-zoom-level {
    font-size: 12px;
    font-weight: 600;
    color: var(--cortex-text-muted);
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   Document panel — UI overhaul
   ═══════════════════════════════════════════════════════════════ */

@keyframes cortexPanelIn {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Clearer separation from the chat: firmer divider + deeper shadow */
.cortex-right-panel {
    border-left: 1px solid var(--cortex-border-strong);
    box-shadow: -14px 0 34px rgba(28, 28, 40, 0.12);
}

.cortex-right-panel.cortex-panel-open {
    animation: cortexPanelIn var(--cortex-spring) both;
}

/* Clean white toolbar. Shares the app-wide band height so that, with the panel
   open, its bottom border continues the chat top bar's rather than stepping. */
.cortex-right-panel-header {
    padding: 12px 16px !important;
    min-height: var(--cortex-topbar-h);
    box-sizing: border-box;
    background: var(--cortex-card) !important;
    /* Same weight and lift as the other two band headers — see .cortex-topbar. */
    border-bottom: 1px solid var(--cortex-border-strong);
    box-shadow: var(--cortex-topbar-shadow);
    position: relative;
    z-index: 3;
}

.cortex-panel-filename {
    font-family: var(--cortex-font-head);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cortex-text);
}

/* Page number reads as a soft indigo pill */
.cortex-panel-page {
    padding: 2px 10px;
    border-radius: var(--cortex-radius-pill);
    background: var(--cortex-primary-light);
    color: var(--cortex-primary);
    font-size: 11.5px;
    font-weight: 600;
}

/* Ghost icon buttons pick up the brand colour on hover */
.cortex-panel-btn {
    border-radius: 8px;
    color: var(--cortex-text-muted);
    transition: background var(--cortex-transition), color var(--cortex-transition), transform 0.18s ease;
}

.cortex-panel-btn:hover {
    background: var(--cortex-surface-hover);
    color: var(--cortex-primary);
}

#cortex-panel-close:hover {
    color: var(--cortex-accent);
    transform: rotate(90deg);
}

/* Zoom pill */
.cortex-zoom-group {
    background: var(--cortex-bg);
}

.cortex-zoom-level {
    color: var(--cortex-primary);
}

/* Calm warm-neutral frame behind the document */
.cortex-right-panel-body {
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cortex-primary) 5%, transparent), transparent 60%),
        var(--cortex-bg-deep) !important;
}

/* The document itself reads as a framed card that fades in.
   box-sizing keeps the 1px border inside width:100% so the panel never
   shows a stray horizontal scrollbar at default (100%) zoom. */
.cortex-panel-image {
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--cortex-shadow-lg);
}

.cortex-image-container.loaded {
    animation: cortexPromptCardIn 0.3s ease both;
}

.cortex-panel-spinner p {
    font-size: 12.5px;
    color: var(--cortex-text-muted);
}

/* No splitter on mobile (panel overlays the chat there) */
@media (max-width: 768px) {
    .cortex-panel-resizer {
        display: none;
    }
}

/* Sources dropdown button hidden per request (commented out).
   To bring it back, remove this rule. */
.cortex-sources-wrapper,
.cortex-sources-trigger {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Knowledge Search page ([cortex_search])
   Shares the .cortex-app shell + right document panel with chat.
   ═══════════════════════════════════════════════════════════════ */

.cortex-search-main {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    background: var(--cortex-bg);
}

.cortex-search-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 28px 64px;
}

.cortex-search-head {
    margin-bottom: 22px;
}

.cortex-search-title {
    margin: 0;
    font-family: var(--cortex-font-head);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cortex-text);
}

.cortex-search-count {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--cortex-text-muted);
}

/* ── Search bar ── */
.cortex-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--cortex-card);
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius-pill);
    box-shadow: var(--cortex-shadow-sm);
    padding: 6px 6px 6px 18px;
    transition: border-color var(--cortex-transition), box-shadow var(--cortex-transition);
}

.cortex-search-bar:focus-within {
    border-color: var(--cortex-primary);
    box-shadow: var(--cortex-focus);
}

.cortex-search-bar-icon {
    flex: 0 0 auto;
    color: var(--cortex-text-muted);
    margin-right: 10px;
}

.cortex-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--cortex-font);
    font-size: 16px;
    color: var(--cortex-text);
    padding: 10px 6px !important;
    margin: 0 !important;
}

.cortex-search-input::placeholder {
    color: var(--cortex-text-muted);
}

.cortex-search-clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--cortex-text-muted);
    border-radius: var(--cortex-radius-pill);
    cursor: pointer;
    transition: background var(--cortex-transition), color var(--cortex-transition);
}

.cortex-search-clear:hover {
    background: var(--cortex-surface-hover);
    color: var(--cortex-text);
}

.cortex-search-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    background: var(--cortex-primary);
    color: #fff;
    border-radius: var(--cortex-radius-pill);
    cursor: pointer;
    transition: background var(--cortex-transition), transform 0.15s ease;
}

.cortex-search-submit:hover {
    background: var(--cortex-primary-dark);
    transform: scale(1.05);
}

/* ── Filters ── */
.cortex-search-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.cortex-search-filters:empty {
    display: none;
}

.cortex-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cortex-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cortex-text-muted);
    padding-left: 4px;
}

.cortex-filter-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font-family: var(--cortex-font);
    font-size: 14px;
    color: var(--cortex-text);
    background-color: var(--cortex-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius-pill);
    padding: 10px 36px 10px 16px;
    cursor: pointer;
    transition: border-color var(--cortex-transition), box-shadow var(--cortex-transition);
}

.cortex-filter-select:focus {
    outline: none;
    border-color: var(--cortex-primary);
    box-shadow: var(--cortex-focus);
}

/* ── Results ── */
.cortex-search-results {
    margin-top: 28px;
}

.cortex-result-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cortex-result-card {
    background: var(--cortex-card);
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius);
    box-shadow: var(--cortex-shadow-sm);
    padding: 20px 22px;
    transition: box-shadow var(--cortex-transition), transform 0.15s ease, border-color var(--cortex-transition);
}

.cortex-result-card:hover {
    box-shadow: var(--cortex-shadow-md);
    border-color: var(--cortex-border-strong);
    transform: translateY(-2px);
}

.cortex-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cortex-result-title {
    font-family: var(--cortex-font-head);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cortex-primary);
    text-decoration: none;
}

.cortex-result-title.cortex-citation {
    cursor: pointer;
}

.cortex-result-title.cortex-citation:hover {
    color: var(--cortex-primary-dark);
    text-decoration: underline;
}

.cortex-result-title--plain {
    color: var(--cortex-text);
    cursor: default;
}

.cortex-result-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cortex-result-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cortex-primary-dark);
    background: var(--cortex-primary-light);
    border-radius: var(--cortex-radius-pill);
    padding: 3px 10px;
    white-space: nowrap;
}

.cortex-result-snippet {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cortex-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cortex-result-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--cortex-text-muted);
}

.cortex-result-file svg {
    flex: 0 0 auto;
}

/* ── Empty / loading / initial states ── */
.cortex-search-status,
.cortex-search-initial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 20px;
    color: var(--cortex-text-muted);
}

.cortex-search-initial h2,
.cortex-search-empty h3 {
    font-family: var(--cortex-font-head);
    color: var(--cortex-text);
    margin: 8px 0 4px;
}

.cortex-search-initial p,
.cortex-search-status p {
    margin: 4px 0 0;
    font-size: 14px;
}

.cortex-search-initial-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--cortex-primary-light);
    color: var(--cortex-primary);
    margin-bottom: 14px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cortex-search-inner {
        padding: 26px 16px 48px;
    }

    .cortex-search-title {
        font-size: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Harden app controls against theme / page-builder button styles.
   Some themes add a border, box-shadow, outline or uppercasing to
   every <button>; force our own look so the app stays on-brand.
   High specificity (.cortex-app .x) + !important beats theme rules.
   ═══════════════════════════════════════════════════════════════ */
.cortex-app button,
.cortex-app input,
.cortex-app select,
.cortex-app textarea {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Filled primary icon buttons (indigo, no border) */
.cortex-app .cortex-new-chat-btn,
.cortex-app .cortex-search-submit {
    background: var(--cortex-primary) !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}

.cortex-app .cortex-new-chat-btn:hover,
.cortex-app .cortex-search-submit:hover {
    background: var(--cortex-primary-dark) !important;
}

/* Ghost/transparent icon buttons (no border, no fill).
   NB: the sidebar-toggle is deliberately NOT here — it's a floating open
   button that needs a card background (see the expand-button block below). */
.cortex-app .cortex-thread-delete,
.cortex-app .cortex-panel-btn,
.cortex-app .cortex-search-clear,
.cortex-app .cortex-power-prompts-close,
.cortex-app .cortex-sidebar-collapse,
.cortex-app .cortex-conv-search-clear {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ...but their hover backgrounds must survive the !important above. */
.cortex-app .cortex-panel-btn:hover,
.cortex-app .cortex-search-clear:hover,
.cortex-app .cortex-power-prompts-close:hover,
.cortex-app .cortex-conv-search-clear:hover {
    background: var(--cortex-surface-hover) !important;
}

.cortex-app .cortex-thread-delete:hover {
    background: var(--cortex-danger-bg) !important;
    color: var(--cortex-danger) !important;
}

/* Sidebar conversation search input */
.cortex-app .cortex-conv-search-input {
    border: 1px solid var(--cortex-border) !important;
    background: var(--cortex-bg) !important;
    box-shadow: none !important;
}

.cortex-app .cortex-conv-search-input:focus {
    border-color: var(--cortex-primary) !important;
    background: var(--cortex-card) !important;
    box-shadow: 0 0 0 3px var(--cortex-primary-light) !important;
}

/* Collapse toggle (header ghost) */
.cortex-app .cortex-sidebar-collapse {
    color: var(--cortex-text-muted) !important;
}

.cortex-app .cortex-sidebar-collapse:hover {
    background: var(--cortex-surface-hover) !important;
    color: var(--cortex-text) !important;
}

/* Floating "show conversation list" buttons — desktop expand + mobile toggle
   share one look: a white card that fills with indigo on hover. */
.cortex-app .cortex-sidebar-expand,
.cortex-app .cortex-sidebar-toggle {
    background: var(--cortex-card) !important;
    border: 1px solid var(--cortex-border) !important;
    box-shadow: var(--cortex-shadow-sm) !important;
    color: var(--cortex-primary) !important;
}

.cortex-app .cortex-sidebar-expand:hover,
.cortex-app .cortex-sidebar-toggle:hover {
    background: var(--cortex-primary) !important;
    color: #ffffff !important;
}

/* Power Prompts trigger + Ask/Edit buttons */
.cortex-app .cortex-power-prompts-btn {
    background: var(--cortex-primary-light) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--cortex-primary) !important;
}

.cortex-app .cortex-power-prompts-btn:hover {
    background: var(--cortex-accent) !important;
    color: #fff !important;
}

.cortex-app .cortex-power-prompt-ask {
    background: var(--cortex-primary) !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}

.cortex-app .cortex-power-prompt-ask:hover {
    background: var(--cortex-primary-dark) !important;
}

.cortex-app .cortex-power-prompt-edit {
    background: var(--cortex-card) !important;
    border: 1px solid var(--cortex-border) !important;
    box-shadow: none !important;
    color: var(--cortex-text) !important;
}

.cortex-app .cortex-power-prompt-edit:hover {
    border-color: var(--cortex-primary) !important;
    background: var(--cortex-primary-light) !important;
    color: var(--cortex-primary) !important;
}

/* Power Prompts inline editor (Send/Cancel + textarea) */
.cortex-app .cortex-power-prompt-send {
    background: var(--cortex-primary) !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}

.cortex-app .cortex-power-prompt-send:hover {
    background: var(--cortex-primary-dark) !important;
}

.cortex-app .cortex-power-prompt-cancel {
    background: var(--cortex-card) !important;
    border: 1px solid var(--cortex-border) !important;
    box-shadow: none !important;
    color: var(--cortex-text-muted) !important;
}

.cortex-app .cortex-power-prompt-cancel:hover {
    border-color: var(--cortex-text-muted) !important;
    color: var(--cortex-text) !important;
}

.cortex-app .cortex-power-prompt-input:focus {
    outline: none !important;
    border-color: var(--cortex-primary) !important;
    box-shadow: 0 0 0 3px var(--cortex-primary-light) !important;
}

/* Power Prompts topic step controls */
.cortex-app .cortex-pp-topic-input {
    border: 1px solid var(--cortex-border) !important;
    background: var(--cortex-bg) !important;
    box-shadow: none !important;
}

.cortex-app .cortex-pp-topic-input:focus {
    border-color: var(--cortex-primary) !important;
    background: var(--cortex-card) !important;
    box-shadow: var(--cortex-focus) !important;
}

.cortex-app .cortex-pp-topic-continue {
    background: var(--cortex-primary) !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}

.cortex-app .cortex-pp-topic-continue:hover {
    background: var(--cortex-primary-dark) !important;
}

.cortex-app .cortex-pp-topic-skip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--cortex-text-muted) !important;
}

.cortex-app .cortex-pp-topic-skip:hover {
    background: var(--cortex-surface-hover) !important;
    color: var(--cortex-text) !important;
}

.cortex-app .cortex-pp-topic-change {
    background: var(--cortex-card) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--cortex-primary) !important;
}

.cortex-app .cortex-pp-topic-change:hover {
    background: var(--cortex-primary) !important;
    color: #fff !important;
}

/* Replace the theme's focus outline with a single branded, accessible ring.
   Mouse clicks (:focus without :focus-visible) stay clean; keyboard focus
   gets a clear indigo ring on every interactive control. */
.cortex-app button:focus,
.cortex-app a:focus,
.cortex-app [tabindex]:focus,
.cortex-app input:focus,
.cortex-app textarea:focus,
.cortex-app select:focus {
    outline: none !important;
}

.cortex-app button:focus-visible,
.cortex-app a:focus-visible,
.cortex-app [tabindex]:focus-visible,
.cortex-app .cortex-citation:focus-visible,
.cortex-app .cortex-result-title:focus-visible {
    outline: none !important;
    /* Ring follows each element's own border-radius — no shape change. */
    box-shadow: var(--cortex-focus-strong) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Front-door menu ([cortex_menu])
   A lightweight landing element — NOT the full-screen .cortex-app overlay,
   so it sits in normal page flow. The guest "Register" button reveals the
   form via a CSS-only checkbox toggle (smooth expand). Because it's outside
   .cortex-app it doesn't get the "harden app controls" protections; key
   button props are forced with !important to beat theme <button>/<a> rules.
   ═══════════════════════════════════════════════════════════════ */
.cortex-menu {
    font-family: var(--cortex-font);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px;
    box-sizing: border-box;
    color: var(--cortex-text);
    animation: cortexMenuIn 0.45s var(--cortex-spring) both;
}

.cortex-menu *,
.cortex-menu *::before,
.cortex-menu *::after {
    box-sizing: border-box;
}

@keyframes cortexMenuIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ── The shared button (chat link, register toggle, submit, login) ── */
/* Matches the site's own Elementor buttons (.elementor-button.elementor-size-md):
   #4f519a, 8px radius, 15px/30px padding, Roboto 16px/500, flat — no shadow,
   no lift, no sheen sweep, and NO hover change at all (the theme's buttons
   have none). Keep these in step if the theme's buttons change. */
.cortex-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 190px;
    font-family: var(--cortex-font) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background: var(--cortex-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 15px 30px !important;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: none;
}

/* Restated rather than deleted: the live theme applies its own hover styling
   to bare <a>/<button>, so these must win and resolve to the resting look. */
.cortex-menu-btn:hover,
.cortex-menu-btn:active {
    background: var(--cortex-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Keyboard focus ring is the one shadow we keep — it must out-weigh the
   box-shadow:none above, hence !important. Mouse hover never triggers it. */
.cortex-menu-btn:focus-visible {
    outline: none;
    box-shadow: var(--cortex-focus-strong) !important;
}

/* ── Register reveal (CSS-only checkbox toggle) ── */
.cortex-menu-reveal {
    display: none;
}

/* The Register button collapses as the panel expands (smooth handoff). */
.cortex-menu-reveal-btn {
    max-height: 60px;
    opacity: 1;
    transition: max-height var(--cortex-transition), opacity var(--cortex-transition),
        transform var(--cortex-spring), background var(--cortex-transition),
        box-shadow var(--cortex-transition);
}

.cortex-menu-reveal:checked~.cortex-menu-reveal-btn {
    max-height: 0;
    opacity: 0;
    transform: scale(0.96);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}

.cortex-menu-panel {
    width: 100%;
    max-width: 400px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-8px);
    transition: max-height 0.45s var(--cortex-spring), opacity 0.3s ease,
        transform 0.45s var(--cortex-spring), margin-top 0.3s ease;
}

.cortex-menu-reveal:checked~.cortex-menu-panel {
    max-height: 640px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 14px;
}

/* ── Form card ── */
.cortex-menu-card {
    width: 100%;
    background: var(--cortex-card);
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius);
    box-shadow: var(--cortex-shadow-md);
    padding: 26px 26px 22px;
    text-align: left;
}

.cortex-menu-form {
    margin: 0;
}

.cortex-menu-field {
    display: block;
    margin-bottom: 15px;
}

.cortex-menu-field>span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cortex-text);
    margin-bottom: 6px;
}

.cortex-menu-field input {
    width: 100%;
    font-family: var(--cortex-font);
    font-size: 15px;
    color: var(--cortex-text);
    background: #fff;
    border: 1px solid var(--cortex-border-strong);
    border-radius: var(--cortex-radius-btn);
    padding: 11px 14px;
    transition: border-color var(--cortex-transition), box-shadow var(--cortex-transition);
}

.cortex-menu-field input:focus {
    outline: none;
    border-color: var(--cortex-primary);
    box-shadow: var(--cortex-focus);
}

.cortex-menu-hint {
    display: block;
    font-size: 12px;
    color: var(--cortex-text-muted);
    margin-top: 5px;
    transition: color var(--cortex-transition);
}

/* Name/e-mail carry an empty message slot until validation speaks — without
   this the empty <small> still spends its margin-top under those inputs. */
.cortex-menu-hint:empty {
    display: none;
}

/* Live validation on the two password fields (assets/js/cortex-menu.js).
   The hint element doubles as the message slot, so a field shows either its
   default hint or its current complaint — never both. Mirrored with
   !important in the "harden app controls" block, because the hostile-theme
   overrides there set border and box-shadow on these inputs and would
   otherwise win. */
.cortex-menu-field.is-invalid input {
    border-color: var(--cortex-danger);
}

.cortex-menu-field.is-invalid input:focus {
    border-color: var(--cortex-danger);
    box-shadow: 0 0 0 3px var(--cortex-danger-bg);
}

.cortex-menu-field.is-invalid .cortex-menu-hint {
    color: var(--cortex-danger);
}

.cortex-menu-field.is-valid input {
    border-color: var(--cortex-success);
}

.cortex-menu-field.is-valid input:focus {
    border-color: var(--cortex-success);
    box-shadow: 0 0 0 3px var(--cortex-success-bg);
}

.cortex-menu-field.is-valid .cortex-menu-hint {
    color: var(--cortex-success);
}

.cortex-menu-btn--submit {
    width: 100%;
    margin-top: 4px;
}

.cortex-menu-alt {
    font-size: 14px;
    color: var(--cortex-text-muted);
    margin: 16px 0 0;
    text-align: center;
}

.cortex-menu-alt a {
    color: var(--cortex-primary);
    font-weight: 600;
    text-decoration: none;
}

.cortex-menu-alt a:hover {
    text-decoration: underline;
}

.cortex-menu-error {
    background: var(--cortex-danger-bg);
    border: 1px solid var(--cortex-danger-border);
    color: var(--cortex-danger);
    font-size: 14px;
    border-radius: var(--cortex-radius-sm);
    padding: 10px 14px;
    margin: 0 0 16px;
}

/* Honeypot — kept off-screen (not display:none, which bots skip). */
.cortex-menu-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {

    .cortex-menu,
    .cortex-menu-btn,
    .cortex-menu-reveal-btn,
    .cortex-menu-panel {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Live-theme hardening (Elementor / e-xamens)
   The live theme styles generic <button>/<a>/<input> with its own
   !important border, border-radius:0 and pink link colour, which beat
   our non-!important rules — producing square corners, stray bordered
   "rectangles", pink icons and an always-visible expand button. None of
   this happens on Local's minimal theme. Re-assert the Cortex look with
   higher-specificity (.cortex-app .x) !important rules so we win the
   cascade regardless of load order. Harmless on Local.
   ═══════════════════════════════════════════════════════════════ */

/* — Rounded corners: re-round everything the theme squared off — */
.cortex-app .cortex-power-prompts-modal,
.cortex-app #cortex-chat-wrapper {
    border-radius: var(--cortex-radius) !important;
}

.cortex-app .cortex-power-prompt-card,
.cortex-app .cortex-pp-topic-bar,
.cortex-app .cortex-thread-item,
.cortex-app .cortex-pp-topic-input,
.cortex-app .cortex-power-prompt-input {
    border-radius: var(--cortex-radius-sm) !important;
}

.cortex-app .cortex-icon-btn,
.cortex-app .cortex-new-chat-btn,
.cortex-app .cortex-power-prompts-btn,
.cortex-app .cortex-sidebar-collapse,
.cortex-app .cortex-sidebar-expand,
.cortex-app .cortex-sidebar-toggle,
.cortex-app .cortex-power-prompt-ask,
.cortex-app .cortex-power-prompt-edit,
.cortex-app .cortex-power-prompt-send,
.cortex-app .cortex-power-prompt-cancel,
.cortex-app .cortex-pp-topic-continue,
.cortex-app .cortex-thread-delete,
.cortex-app .cortex-thread-confirm-yes,
.cortex-app .cortex-thread-confirm-no,
.cortex-app .cortex-panel-btn {
    border-radius: var(--cortex-radius-btn) !important;
}

.cortex-app .cortex-conv-search-input,
.cortex-app .cortex-zoom-group,
.cortex-app .cortex-pp-topic-change,
.cortex-app .cortex-power-prompts-close,
.cortex-app .cortex-conv-search-clear {
    border-radius: var(--cortex-radius-pill) !important;
}

/* Message bubbles keep their tailed radius even if the theme squares them. */
.cortex-app .nlux-theme-cortex .nlux-comp-chatItem--sent .nlux-comp-message {
    border-radius: 20px 20px 6px 20px !important;
}

.cortex-app .nlux-theme-cortex .nlux-comp-chatItem--received .nlux-comp-message {
    border-radius: 20px 20px 20px 6px !important;
}

/* — Floating "expand list" button: hidden unless the sidebar is collapsed
   (the theme forces buttons to display, so our display:none needs !important) — */
.cortex-app .cortex-sidebar-expand {
    display: none !important;
}

.cortex-app.cortex-sidebar-collapsed .cortex-sidebar-expand {
    display: flex !important;
}

/* — Document-panel icon buttons: kill the theme's pink link colour on the
   SVGs (stroke:currentColor); restore muted → indigo, close → accent — */
.cortex-app .cortex-panel-btn {
    color: var(--cortex-text-muted) !important;
}

.cortex-app .cortex-panel-btn:hover {
    color: var(--cortex-primary) !important;
}

.cortex-app #cortex-panel-close:hover {
    color: var(--cortex-accent) !important;
}

/* — Thread delete-confirm (✓ / ✕): ghost buttons, not theme rectangles — */
.cortex-app .cortex-thread-confirm-yes,
.cortex-app .cortex-thread-confirm-no {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.cortex-app .cortex-thread-confirm-yes {
    color: var(--cortex-danger) !important;
}

.cortex-app .cortex-thread-confirm-no {
    color: var(--cortex-text-muted) !important;
}

.cortex-app .cortex-thread-confirm-yes:hover {
    background: var(--cortex-danger-bg) !important;
}

.cortex-app .cortex-thread-confirm-no:hover {
    background: var(--cortex-surface-hover) !important;
}

/* — Power Prompt list buttons: keep icon+label centred if the theme
   overrides button display — */
.cortex-app .cortex-power-prompt-ask,
.cortex-app .cortex-power-prompt-edit,
.cortex-app .cortex-power-prompt-send,
.cortex-app .cortex-power-prompt-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

/* Mobile: the expand button stays hidden even when a desktop-collapsed
   state is persisted in localStorage (must beat the collapsed rule above). */
@media (max-width: 768px) {
    .cortex-app .cortex-sidebar-expand,
    .cortex-app.cortex-sidebar-collapsed .cortex-sidebar-expand {
        display: none !important;
    }
}

/* — Alignment: the theme forces display:inline-block on <button>/<a>, which
   breaks our flex centering (off-centre icons, misaligned icon+label). Force
   flex back on every control. — */
.cortex-app .cortex-icon-btn,
.cortex-app .cortex-new-chat-btn,
.cortex-app .cortex-power-prompts-btn,
.cortex-app .cortex-sidebar-collapse,
.cortex-app .cortex-panel-btn,
.cortex-app .cortex-power-prompts-close,
.cortex-app .cortex-thread-confirm-yes,
.cortex-app .cortex-thread-confirm-no {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Delete (trash) button: flex-centred and normally present (hover reveals it
   via opacity); the confirming-state rule below flips it to display:none so it
   never coexists with the ✓/✕ confirm. */
.cortex-app .cortex-thread-delete {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cortex-app .cortex-power-prompt-ask,
.cortex-app .cortex-power-prompt-edit,
.cortex-app .cortex-power-prompt-send,
.cortex-app .cortex-power-prompt-cancel,
.cortex-app .cortex-pp-topic-continue,
.cortex-app .cortex-pp-topic-change {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--cortex-font) !important;
}

/* Floating buttons: centre their icon; visibility is owned by the state rules
   above, so only align here (never force display). */
.cortex-app .cortex-sidebar-expand,
.cortex-app .cortex-sidebar-toggle {
    align-items: center !important;
    justify-content: center !important;
}

/* The mobile hamburger must stay hidden on desktop — its base display:none
   isn't !important, so the theme's forced button-display leaked it onto
   desktop (looked like a stray "expand" button next to the open sidebar). */
.cortex-app .cortex-sidebar-toggle {
    display: none !important;
}

@media (max-width: 768px) {
    .cortex-app .cortex-sidebar-toggle {
        display: flex !important;
    }
}

/* — Chat form fields: re-assert colour/font the theme forces on inputs
   (pink text, serif font, uppercasing). Border/bg/radius handled above. — */
.cortex-app .cortex-conv-search-input,
.cortex-app .cortex-pp-topic-input,
.cortex-app .cortex-power-prompt-input {
    color: var(--cortex-text) !important;
    background: var(--cortex-bg) !important;
    font-family: var(--cortex-font) !important;
    text-transform: none !important;
}

.cortex-app .cortex-power-prompt-input {
    border: 1px solid var(--cortex-border) !important;
}

/* — Welcome screen + sidebar footer links —
   These render as <a> when a URL is configured and <button disabled> when it
   isn't, so the theme hits them with BOTH its link rules (pink text,
   underline) and its button rules (grey fill, square corners, inline-block,
   uppercase). Every visual property has to be forced for both element types,
   and — per the ghost-button trap — each :hover background needs its own
   !important or the resting background wins and the control looks dead. */
.cortex-app .cortex-empty-btn,
.cortex-app .cortex-help-btn,
.cortex-app .cortex-back-btn {
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--cortex-font) !important;
    text-decoration: none !important;
    text-transform: none !important;
    /* — Box metrics, forced for the same reason as the colours above —
       These live here rather than only in the base rule because the base rule
       is class-only (0,1,0) and element-agnostic, so ANY theme rule that names
       the element type — `.entry-content button`, `button { padding: … }` —
       outranks it, and it can only ever hit the <button> variant. The result is
       that a control silently changes shape when its URL setting is blank:
       measured against a representative theme, the blank-URL row went 36px →
       78px tall, padding 9/12 → 14/22, 13px/600 → 16px/400, icon gap 8 → 0,
       and the help row lost its full width. Pin every metric that decides the
       box, or the two variants only agree on sites with a docile theme. */
    gap: 8px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    min-height: 0 !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
}

.cortex-app .cortex-empty-btn {
    display: inline-flex !important;
    border-radius: var(--cortex-radius-pill) !important;
    width: auto !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
}

.cortex-app .cortex-help-btn,
.cortex-app .cortex-back-btn {
    display: flex !important;
    border-radius: var(--cortex-radius-btn) !important;
    width: 100% !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
}

/* Themes resize inline SVG the way they resize <img>, and again only the
   <button> variant is in range — a 16px icon came back 24px. */
.cortex-app .cortex-empty-btn>svg,
.cortex-app .cortex-help-btn>svg,
.cortex-app .cortex-back-btn>svg {
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
}

/* Listed after (and one class more specific than) the 16px rule above, which
   would otherwise inflate the smaller external-link glyph. */
.cortex-app .cortex-help-btn>svg.cortex-ext-icon {
    width: 13px !important;
    height: 13px !important;
}

.cortex-app .cortex-empty-btn-primary {
    background: var(--cortex-primary) !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
}

.cortex-app .cortex-empty-btn-primary:hover {
    background: var(--cortex-primary-dark) !important;
    color: #ffffff !important;
}

.cortex-app .cortex-empty-btn-ghost {
    background: var(--cortex-card) !important;
    border: 1px solid var(--cortex-border-strong) !important;
    color: var(--cortex-text) !important;
}

.cortex-app .cortex-empty-btn-ghost:hover {
    background: var(--cortex-primary-light) !important;
    border-color: var(--cortex-primary) !important;
    color: var(--cortex-primary-dark) !important;
}

.cortex-app .cortex-help-btn {
    background: var(--cortex-card) !important;
    border: 1px solid color-mix(in srgb, var(--cortex-primary) 28%, transparent) !important;
    color: var(--cortex-primary) !important;
}

.cortex-app .cortex-help-btn:hover {
    background: var(--cortex-primary-light) !important;
    border-color: var(--cortex-primary) !important;
    color: var(--cortex-primary) !important;
}

.cortex-app .cortex-back-btn {
    background: var(--cortex-bg) !important;
    border: 1px solid var(--cortex-border) !important;
    color: var(--cortex-text) !important;
}

.cortex-app .cortex-back-btn:hover {
    background: var(--cortex-primary-light) !important;
    border-color: color-mix(in srgb, var(--cortex-primary) 35%, transparent) !important;
    color: var(--cortex-primary-dark) !important;
}

/* — Top bar + site brand lockup —
   The bar must keep its white fill and its bottom rule; the theme squares and
   recolours generic containers. The lockup renders as <a> when a Website Home
   URL is set and <div> when it isn't, so the theme hits it with its link rules
   (pink, underlined, inline-block — which would collapse the flex row) in one
   case and not the other. Force the whole look on the shared class so both
   variants land identically. Per the ghost-button trap, forcing the resting
   background means the :hover background needs its own !important or the
   lockup looks dead on hover. */
.cortex-app .cortex-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--cortex-card) !important;
    border-bottom: 1px solid var(--cortex-border-strong) !important;
    border-radius: 0 !important;
}

.cortex-app .cortex-topbar-title {
    font-family: var(--cortex-font) !important;
    text-transform: none !important;
}

.cortex-app .cortex-brand-chip {
    display: flex !important;
    align-items: center !important;
    border: 1px solid transparent !important;
    border-radius: var(--cortex-radius-btn) !important;
    background: transparent !important;
    color: var(--cortex-text) !important;
    font-family: var(--cortex-font) !important;
    text-decoration: none !important;
    text-transform: none !important;
}

.cortex-app .cortex-brand-chip-link:hover {
    background: var(--cortex-primary-light) !important;
    border-color: color-mix(in srgb, var(--cortex-primary) 22%, transparent) !important;
}

.cortex-app .cortex-brand-chip-title {
    font-family: var(--cortex-font-head) !important;
    text-transform: none !important;
}

/* Themes routinely force width/height/margin/border on <img> (and Elementor
   adds its own). Without this the logo either collapses to nothing or blows
   the chip out to the width of the source file. */
.cortex-app .cortex-brand-chip-img {
    display: block !important;
    width: auto !important;
    height: 30px !important;
    max-width: 132px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: var(--cortex-radius-sm) !important;
    box-shadow: none !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    .cortex-app .cortex-brand-chip-img {
        height: 26px !important;
        max-width: 104px !important;
        max-height: 26px !important;
    }
}

/* — The sidebar's own collapse button is MOBILE ONLY —
   On desktop the top bar's toggle owns collapse/expand, and two controls for
   one state is one too many. It survives on mobile because there the sidebar
   is an off-canvas drawer that covers the bar's toggle while open, so without
   this the only way to close it would be a backdrop tap.

   Must come after the harden block's display:flex !important grouping above,
   which lists this class alongside the other icon buttons. */
.cortex-app .cortex-sidebar-collapse {
    display: none !important;
}

@media (max-width: 768px) {
    .cortex-app .cortex-sidebar-collapse {
        display: flex !important;
    }
}

/* — Top bar toggle: the theme squares off buttons and repaints their icons — */
.cortex-app .cortex-topbar-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    border-radius: var(--cortex-radius-btn) !important;
    background: transparent !important;
    color: var(--cortex-text-muted) !important;
}

.cortex-app .cortex-topbar-toggle:hover {
    background: var(--cortex-primary-light) !important;
    border-color: color-mix(in srgb, var(--cortex-primary) 22%, transparent) !important;
    color: var(--cortex-primary) !important;
}

/* Unconfigured URL → inert. Listed last so it wins over the enabled looks
   above (same specificity, later wins), hover included. */
.cortex-app .cortex-link-disabled,
.cortex-app .cortex-link-disabled:hover {
    background: var(--cortex-bg-deep) !important;
    border: 1px solid var(--cortex-border) !important;
    color: var(--cortex-text-muted) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* The card behind the help copy — the theme squares off bordered boxes. */
.cortex-app .cortex-help-card {
    border-radius: var(--cortex-radius-md) !important;
}

.cortex-app .cortex-empty-title,
.cortex-app .cortex-empty-sub,
.cortex-app .cortex-help-line,
.cortex-app .cortex-empty-hint {
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cortex-app .cortex-empty-title {
    font-family: var(--cortex-font-head) !important;
    color: var(--cortex-text) !important;
}

.cortex-app .cortex-empty-sub,
.cortex-app .cortex-help-line,
.cortex-app .cortex-empty-hint {
    font-family: var(--cortex-font) !important;
    color: var(--cortex-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Front-door menu ([cortex_menu]) — live-theme hardening
   The menu sits OUTSIDE .cortex-app so it gets none of the app hardening.
   The theme resets <a>/<button>/<input> (square corners, borders, pink
   text, grey bg, uppercasing, inline-block). Re-assert the Cortex look.
   ═══════════════════════════════════════════════════════════════ */

/* Buttons (Chat <a>, submit <button>, login <a>): colour/border/radius/font
   are already !important on .cortex-menu-btn; the theme still breaks the flex
   layout (inline-block) and uppercases the label — force those too. */
.cortex-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
}

.cortex-menu-btn svg {
    flex-shrink: 0 !important;
}

/* Form fields */
.cortex-menu-field input {
    border: 1px solid var(--cortex-border-strong) !important;
    border-radius: var(--cortex-radius-btn) !important;
    background: #fff !important;
    color: var(--cortex-text) !important;
    font-family: var(--cortex-font) !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.cortex-menu-field input:focus {
    border-color: var(--cortex-primary) !important;
    box-shadow: var(--cortex-focus) !important;
}

/* Validation states have to be repeated here: the rules above force border and
   box-shadow with !important, so the unforced versions further up never win. */
.cortex-menu-field.is-invalid input {
    border-color: var(--cortex-danger) !important;
}

.cortex-menu-field.is-invalid input:focus {
    border-color: var(--cortex-danger) !important;
    box-shadow: 0 0 0 3px var(--cortex-danger-bg) !important;
}

.cortex-menu-field.is-valid input {
    border-color: var(--cortex-success) !important;
}

.cortex-menu-field.is-valid input:focus {
    border-color: var(--cortex-success) !important;
    box-shadow: 0 0 0 3px var(--cortex-success-bg) !important;
}

/* "Already have an account? Log in" link */
.cortex-menu-alt a {
    color: var(--cortex-primary) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    text-transform: none !important;
}

.cortex-menu-alt a:hover {
    text-decoration: underline !important;
}

/* The register reveal is a <label> (theme resets buttons/links but not labels)
   — keep it consistent with the real buttons regardless. */
.cortex-menu-reveal-btn {
    text-transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Conversation-search + thread-row state fixes (live-theme)
   ═══════════════════════════════════════════════════════════════ */

/* The theme's forced input padding collapsed our icon/clear gutters, so the
   placeholder text overlapped the magnifier. Re-assert the gutters. */
.cortex-app .cortex-conv-search-input {
    padding: 0 32px 0 34px !important;
}

.cortex-app .cortex-pp-topic-input {
    padding: 0 14px 0 38px !important;
}

/* Clear (✕) button + "Ctrl K" hint are toggled by JS *classes* now (the theme's
   button{display:...!important} overrode jQuery's inline toggle, so the ✕ was
   stuck on — overlapping the hint as "C✕l K"). */
.cortex-app .cortex-conv-search-clear {
    display: none !important;
}

.cortex-app .cortex-conv-search-clear.cortex-visible {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cortex-app .cortex-conv-search-hint.cortex-hidden {
    display: none !important;
}

/* Thread row: exactly ONE control state is visible. The trash icon and the
   ✓/✕ confirm were coexisting (the theme kept the trash's display, and our own
   alignment rule forced it) — high-specificity !important settles it so the
   trash flips cleanly to the confirm buttons with no "all three" flash. */
.cortex-app .cortex-thread-confirm {
    display: none !important;
}

.cortex-app .cortex-thread-item.cortex-thread-confirming .cortex-thread-delete {
    display: none !important;
}

.cortex-app .cortex-thread-item.cortex-thread-confirming .cortex-thread-confirm {
    display: inline-flex !important;
    align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   Icon-button box model (live-theme)
   The theme's padding / min-height inflate our icon buttons, so they look
   bigger and less-rounded than Local, and un-pinned square ✕ buttons turn
   into wide rectangles (rectangular hover highlight). Pin each to its exact
   Local dimensions so size, radius and the hover shape all match. box-sizing
   + padding:0 stop any theme border/padding from adding to the box.
   ═══════════════════════════════════════════════════════════════ */
.cortex-app .cortex-icon-btn,
.cortex-app .cortex-new-chat-btn,
.cortex-app .cortex-power-prompts-btn,
.cortex-app .cortex-sidebar-collapse {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cortex-app .cortex-sidebar-expand,
.cortex-app .cortex-sidebar-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cortex-app .cortex-power-prompts-close {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cortex-app .cortex-conv-search-clear {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cortex-app .cortex-thread-delete,
.cortex-app .cortex-thread-confirm-yes,
.cortex-app .cortex-thread-confirm-no {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cortex-app .cortex-panel-btn {
    min-height: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
}

.cortex-app .cortex-zoom-group .cortex-panel-btn {
    padding: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   Power Prompts + ghost-button hover (live-theme)
   ═══════════════════════════════════════════════════════════════ */

/* The theme bleeds its (serif) font into the modal text — re-assert ours. */
.cortex-app .cortex-power-prompts-modal,
.cortex-app .cortex-power-prompts-modal * {
    font-family: var(--cortex-font) !important;
}

.cortex-app .cortex-power-prompts-head-titles h2 {
    font-family: var(--cortex-font-head) !important;
}

/* Keep the card/goal/topic text colours (theme must not repaint them). */
.cortex-app .cortex-power-prompt-title {
    color: var(--cortex-text) !important;
}

.cortex-app .cortex-power-prompt-goal {
    color: var(--cortex-primary) !important;
}

.cortex-app .cortex-power-prompts-head-titles p,
.cortex-app .cortex-power-prompts-loading,
.cortex-app .cortex-power-prompts-empty,
.cortex-app .cortex-power-prompts-error {
    color: var(--cortex-text-muted) !important;
}

/* Ghost icon buttons: the theme's `button:hover{color:#fff}` turned the dark
   ✕/chevron icons white (invisible) on hover — restore the correct icon colour
   on hover everywhere it applies. (Filled buttons legitimately go white.) */
.cortex-app .cortex-power-prompts-close:hover,
.cortex-app .cortex-conv-search-clear:hover,
.cortex-app .cortex-sidebar-collapse:hover,
.cortex-app .cortex-thread-confirm-no:hover {
    color: var(--cortex-text) !important;
}

.cortex-app .cortex-thread-confirm-yes:hover {
    color: var(--cortex-danger) !important;
}

/* ✕ close / clear base colour — the theme paints buttons pink/red at rest,
   so the close ✕ showed red before hover. Pin the muted resting colour. */
.cortex-app .cortex-power-prompts-close,
.cortex-app .cortex-conv-search-clear {
    color: var(--cortex-text-muted) !important;
}

/* Power Prompt card buttons: pin height / padding / font-size — the theme's
   min-height + larger button font made them taller with bigger labels. */
.cortex-app .cortex-power-prompt-ask,
.cortex-app .cortex-power-prompt-edit {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    box-sizing: border-box !important;
}

.cortex-app .cortex-power-prompt-send,
.cortex-app .cortex-power-prompt-cancel {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 15px !important;
    font-size: 12.5px !important;
    box-sizing: border-box !important;
}

.cortex-app .cortex-pp-topic-continue {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}

.cortex-app .cortex-pp-topic-change {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}

/* Modal text sizes — the theme's larger base font-size inflated them. */
.cortex-app .cortex-power-prompts-head-titles h2 {
    font-size: 18px !important;
}

.cortex-app .cortex-power-prompts-head-titles p {
    font-size: 12.5px !important;
}

.cortex-app .cortex-power-prompt-title {
    font-size: 14.5px !important;
}

.cortex-app .cortex-power-prompt-goal {
    font-size: 13px !important;
}

.cortex-app .cortex-pp-topic-chip,
.cortex-app .cortex-pp-topic-chip span {
    font-size: 13px !important;
}