/* ═══════════════════════════════════════════════════════════════
   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;
}

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

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

.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;
}

/* ── 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;
    border-bottom: 1px solid var(--cortex-border);
}

.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);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cortex-text);
    line-height: 1;
    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;
    padding: 12px;
    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 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;
    overflow: hidden !important;
}

#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 */
.nlux-theme-cortex .nlux-chatRoom-container {
    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;
}

/* 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;
}

/* The composer sits fixed at the bottom */
.nlux-theme-cortex .nlux-chatRoom-container>.nlux-composer-container {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 16px !important;
    /* Keep visual padding but don't use margin */
}

/* 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;
    background: var(--cortex-card) !important;
    padding: 6px 6px 6px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: var(--cortex-shadow-sm) !important;
    transition: border-color var(--cortex-transition), box-shadow var(--cortex-transition) !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;
    padding: 8px 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;
}

/* 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;
}

/* Hide NLUX's default mask-based icons (they're broken without --nlux-send-icon) */
.nlux-theme-cortex .nlux-comp-sendIcon,
.nlux-theme-cortex .nlux-comp-cancelIcon {
    display: none !important;
}

/* Our injected inline SVG send arrow */
.nlux-theme-cortex .cortex-send-svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    pointer-events: none !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 our SVG, show the spinner */
.nlux-theme-cortex .nlux-comp-composer.nlux-composer--submitting>button>.cortex-send-svg,
.nlux-theme-cortex .nlux-comp-composer.nlux-composer--waiting>button>.cortex-send-svg {
    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);
    }
}

/* ── 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 */
/* Two-row header: filename spans the top; page + controls sit beneath */
.cortex-right-panel-header {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    min-height: 54px;
    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;
}

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

.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 */
.cortex-right-panel-header {
    padding: 12px 16px !important;
    min-height: 58px;
    background: var(--cortex-card) !important;
    border-bottom: 1px solid var(--cortex-border);
}

.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;
}

/* ═══════════════════════════════════════════════════════════════
   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;
}