/*
 * Native2 knowledge navigator preview — Codex, 2026-08-03.
 *
 * Everything is scoped to body.native2-preview so / (the production native
 * chat) remains visually unchanged.  The existing selectors stay in the DOM
 * as the functional/progressive-enhancement bridge; only their presentation
 * is replaced on /native2.
 */

body.native2-preview {
    --n2-surface: color-mix(in srgb, var(--bg-primary) 94%, transparent);
    --n2-surface-raised: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-primary));
    --n2-hover: color-mix(in srgb, var(--text-primary) 6%, transparent);
    --n2-selected: color-mix(in srgb, var(--accent-color) 10%, transparent);
    --n2-line: color-mix(in srgb, var(--text-primary) 13%, transparent);
    --n2-line-strong: color-mix(in srgb, var(--text-primary) 24%, transparent);
    /* Low-profile separator between topic rows — deliberately lighter
       than --n2-line, which is structural (panel/header borders). */
    --n2-rule: color-mix(in srgb, var(--text-primary) 8%, transparent);
    --n2-accent-soft: color-mix(in srgb, var(--n2-accent-text) 17%, transparent);
    /* Operator 2026-08-04: "same as history ... everything is big in mobile
       blue". The dialog carried its OWN blue-tinted surface (#dbeafe / #5c8fc8
       / rgba(42,91,145)) while every other panel uses the neutral theme
       tokens, so the topic picker read as a different product. Match the
       history drawer: it is `background: var(--bg-secondary)` with
       `1px solid var(--border-color)`. Backdrop is now neutral too. */
    --n2-dialog-surface: var(--bg-secondary);
    --n2-dialog-border: var(--border-color);
    --n2-dialog-backdrop: rgba(0, 0, 0, 0.32);
    --n2-text-secondary: #625d58;
    --n2-text-muted: #69635e;
    --n2-accent-text: #4f46e5;
    --n2-shadow: 0 18px 54px rgba(62, 50, 35, 0.16), 0 2px 8px rgba(62, 50, 35, 0.08);
}

[data-theme="dark"] body.native2-preview {
    --n2-surface: color-mix(in srgb, var(--bg-primary) 96%, transparent);
    --n2-surface-raised: color-mix(in srgb, var(--bg-secondary) 90%, #202028);
    --n2-hover: color-mix(in srgb, var(--text-primary) 8%, transparent);
    --n2-selected: color-mix(in srgb, var(--accent-color) 16%, transparent);
    --n2-line: color-mix(in srgb, var(--text-primary) 15%, transparent);
    --n2-line-strong: color-mix(in srgb, var(--text-primary) 28%, transparent);
    --n2-rule: color-mix(in srgb, var(--text-primary) 11%, transparent);
    --n2-accent-soft: color-mix(in srgb, var(--n2-accent-text) 22%, transparent);
    --n2-dialog-surface: var(--bg-secondary);
    --n2-dialog-border: var(--border-color);
    --n2-dialog-backdrop: rgba(0, 0, 0, 0.55);
    --n2-text-secondary: #aaaab2;
    --n2-text-muted: #92929a;
    --n2-accent-text: #818cf8;
    --n2-shadow: 0 22px 64px rgba(0, 0, 0, 0.42), 0 2px 10px rgba(0, 0, 0, 0.26);
}

/* Retain the original selector nodes for behaviour, but give the preview one
   visible source-of-truth control. */
.native2-preview .selectors-center > :not(.native2-knowledge-nav) {
    display: none !important;
}

.native2-preview .selectors-group-label {
    display: none !important;
}

.native2-knowledge-nav {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    align-items: center;
    width: clamp(173px, 24vw, 330px);
    min-width: 0;
    color: var(--text-primary);
}

.native2-launch-button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    min-width: 0;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--n2-line);
    border-radius: 10px;
    background: var(--n2-surface-raised);
    color: var(--text-primary);
    box-shadow: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease,
                transform 120ms ease;
}

.native2-launch-button:hover {
    background: var(--n2-hover);
    border-color: color-mix(in srgb, var(--text-primary) 22%, transparent);
}

.native2-launch-button:active {
    transform: translateY(1px);
}

.native2-launch-button:focus-visible {
    outline: 2px solid var(--n2-accent-text);
    outline-offset: 2px;
}

.native2-header-favorite {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--n2-text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: color 130ms ease, background-color 130ms ease,
                border-color 130ms ease, transform 130ms ease;
}

.native2-header-favorite[hidden] {
    display: none !important;
}

.native2-header-favorite:hover {
    border-color: var(--n2-line);
    background: var(--n2-hover);
    color: var(--n2-text-secondary);
}

.native2-header-favorite:active {
    transform: scale(0.92);
}

.native2-header-favorite.is-favorite {
    color: var(--n2-accent-text);
}

.native2-header-favorite:disabled {
    cursor: wait;
    opacity: 0.48;
}

.native2-header-favorite:focus-visible {
    outline: 2px solid var(--n2-accent-text);
    outline-offset: 2px;
}

.native2-favorite-announcement {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.native2-launch-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.native2-launch-meta {
    overflow: hidden;
    margin-bottom: 1px;
    color: var(--n2-text-muted);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native2-launch-title {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native2-launch-action {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    color: var(--n2-text-muted);
    font-size: 9px;
    transition: none;
}

.native2-knowledge-nav[aria-expanded="true"] .native2-launch-action {
    transform: rotate(180deg);
}

.native2-launch-button.is-pending .native2-launch-title {
    color: var(--n2-text-secondary);
}

.native2-launch-button.is-pending .native2-launch-action {
    animation: native2-turn 900ms linear infinite;
}

@keyframes native2-turn {
    to { transform: rotate(360deg); }
}

/* The layer is reparented to body. It therefore avoids the header/input
   stacking-context collision that affected the original custom dropdown. */
.native2-scope-layer {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: grid;
    place-items: center;
    padding: 18px;
}

.native2-scope-layer[hidden] {
    display: none !important;
}

.native2-scope-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: var(--n2-dialog-backdrop);
    cursor: default;
}

[data-theme="dark"] .native2-scope-backdrop {
    background: var(--n2-dialog-backdrop);
}

.native2-scope-panel {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(760px, calc(100vw - 48px));
    height: min(560px, calc(100dvh - 72px));
    max-width: calc(100vw - 36px);
    max-height: calc(100dvh - 36px);
    overflow: hidden;
    overflow-x: hidden;
    border: 1px solid var(--n2-dialog-border);
    border-radius: 14px;
    background-color: var(--n2-dialog-surface);
    background-image: inherit;
    color: var(--text-primary);
    box-shadow: var(--n2-shadow);
    /* #by_codex 2026-08-04: Navigation should feel immediate. */
    animation: none;
}

.native2-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--n2-line);
}

.native2-panel-heading {
    min-width: 0;
}

.native2-panel-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
    line-height: 1;
}

.native2-panel-brand-logo {
    flex: none;
    width: auto;
    height: 34px;
    max-width: 104px;
    object-fit: contain;
    object-position: left center;
}

.native2-panel-brand-name {
    overflow: hidden;
    /* Operator 2026-08-04: the rail wordmark was cut to the admin scale this
       morning (18px/600/-0.01em, adminator.css:319 .sidebar-logo-text). The
       dialog kept a SECOND brand scale at 34px, so "iKB" was huge again the
       moment you opened the topic picker. One wordmark size, everywhere. */
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native2-panel-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--n2-text-muted);
    font-size: 10px;
    font-weight: 500;
}

.native2-panel-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.native2-panel-scope {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--n2-text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native2-panel-close {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--n2-text-muted);
    cursor: pointer;
}

.native2-panel-close:hover {
    background: var(--n2-hover);
    color: var(--text-primary);
}

.native2-panel-close:focus-visible,
.native2-category-option:focus-visible,
.native2-category-scroll:focus-visible,
.native2-topic-option:focus-visible,
.native2-favorite-toggle:focus-visible,
.native2-topic-desc-toggle:focus-visible,
.native2-empty-action:focus-visible,
.native2-search-input:focus-visible {
    outline: 2px solid var(--n2-accent-text);
    outline-offset: 2px;
}

/* Search and the category select share one row. The row owns the header's
   full-width grid slot; the two controls divide it with flex. */
.native2-filter-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    margin-top: 2px;
}

.native2-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.native2-search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    color: var(--n2-text-muted);
    font-size: 12px;
    pointer-events: none;
    transform: translateY(-50%);
}

.native2-search-input {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 34px;
    border: 1px solid var(--n2-line);
    border-radius: 9px;
    outline: 0;
    background: var(--n2-surface-raised);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}

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

.native2-search-clear {
    position: absolute;
    top: 50%;
    right: 7px;
    display: none;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--n2-text-muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.native2-search-clear.is-visible {
    display: inline-grid;
    place-items: center;
}

.native2-panel-body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* Was a full-width band under the header with its own label column. It now
   rides inside .native2-filter-row, so it keeps only its width. */
.native2-category-filter {
    flex: 0 0 auto;
    min-width: 0;
    width: 152px;
}

.native2-category-select {
    width: 100%;
    height: 40px;
    min-width: 0;
    padding: 0 32px 0 10px;
    border: 1px solid var(--n2-line);
    border-radius: 7px;
    background: var(--n2-dialog-surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* Unfiltered, the select reads "All" and is muted like a placeholder;
   a chosen category renders at full strength so the filter is legible as ON. */
.native2-category-select.is-placeholder {
    color: var(--n2-text-muted);
}

.native2-category-select:focus-visible {
    border-color: var(--n2-accent-text);
    outline: 2px solid color-mix(in srgb, var(--n2-accent-text) 28%, transparent);
    outline-offset: 1px;
}

.native2-results {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    overflow-x: hidden;
}

.native2-results-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px 8px;
}

.native2-results-title {
    overflow: hidden;
    color: var(--n2-text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native2-results-count {
    flex: none;
    color: var(--n2-text-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.native2-topic-list {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 8px 12px;
    scrollbar-width: thin;
}

.native2-topic-row {
    display: grid;
    /* Single column as of 2026-08-12. The 68px track existed to reserve room
       for the Save action's label (#by_codex 2026-08-04); the star now sits
       inline beside the topic name, so the reserved column is dead weight
       that only narrowed the text. */
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-width: 0;
}

/* Separator BETWEEN topics (operator 2026-08-12). Sibling selector, not
   border-bottom on every row: that leaves a dangling rule under the last
   item and doubles up against the list's own bottom edge. */
.native2-topic-row + .native2-topic-row {
    border-top: 1px solid var(--n2-rule);
}

.native2-topic-option {
    display: grid;
    /* Two tracks, not three: the Current/Featured tag moved onto the title
       line (operator 2026-08-13). The old trailing `auto` column shifted
       every row's copy left — and its 10px gap was paid even on rows with
       no tag at all. */
    grid-template-columns: 3px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Was 54px. The history rows next door are just `padding: 8px 10px` with
       no min-height, so the picker looked twice as loose as the sidebar it
       sits beside. 44px keeps the touch target (hover:none floor) without
       the extra air. */
    min-height: 44px;
    margin: 1px 0;
    padding: 8px 10px 8px 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color 130ms ease;
}

.native2-topic-option:hover {
    background: var(--n2-hover);
}

/* A div cannot be :disabled, so the pending switch state is expressed with
   aria-disabled and mirrored here. Without this the row still looks live for
   the whole 45s switch window. */
.native2-topic-option.is-disabled {
    cursor: default;
    opacity: 0.55;
}

.native2-topic-option.is-disabled:hover {
    background: transparent;
}

.native2-topic-option.is-current {
    background: var(--n2-selected);
}

.native2-topic-mark {
    align-self: stretch;
    width: 3px;
    border-radius: 2px;
    background: transparent;
}

.native2-topic-option.is-current .native2-topic-mark {
    background: var(--n2-accent-text);
}

.native2-topic-copy {
    position: relative;
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Name and star share one line, with the star pushed to the far end of the
   text column rather than hugging the title (operator 2026-08-12: "too close
   to the title, move it to right align"). This is still the title's LINE —
   not the separate 68px row column it had before — so the star stays
   associated with the topic it belongs to.
   align-items:flex-start keeps it on the FIRST line when a title wraps. */
.native2-topic-titleline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.native2-topic-titleline .native2-favorite-toggle {
    margin-left: auto;
}

.native2-topic-name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-primary);
    /* history .ikb-item-text = 13px */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Declared AFTER the base .native2-topic-name rule on purpose: it is an
   override, and a descendant selector containing the same class text placed
   first also shadows the base rule for anything scanning source order. */
.native2-topic-titleline .native2-topic-name {
    flex: 0 1 auto;
    min-width: 0;
}

.native2-topic-meta {
    display: block;
    margin-top: 3px;
    color: var(--n2-text-muted);
    font-size: 10.5px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
}

/* The right gutter is what lets the chevron sit ON the clamp ellipsis line
   instead of below it. Reserving 20px of content width means the browser
   paints its own "…" 20px short of the edge, and the absolutely positioned
   toggle occupies exactly that space — so the two never overlap and the
   expander costs no extra row. It must NOT be applied conditionally: the
   overflow measurement reads clientHeight against this same layout, so a
   gutter added after measuring would change what overflows. */
.native2-topic-description {
    display: -webkit-box;
    max-width: 100%;
    margin-top: 4px;
    padding-right: 24px;
    overflow: hidden;
    color: var(--n2-text-secondary);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.42;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.native2-topic-description.is-expanded {
    overflow: visible;
    -webkit-line-clamp: unset;
}

/* Revealed by script only when the text actually overflows two lines, so a
   short description never gets a control that would do nothing. */
/* Anchored to the bottom-right of .native2-topic-copy, whose last in-flow
   child is always the description — so this lands on the final clamped line,
   inside the gutter reserved above. A background fade was the other option
   and was rejected: the row background is `transparent` and changes on hover
   and .is-current, so any solid fade would paint a rectangle that stops
   matching the row underneath it. */
.native2-topic-desc-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Deliberately the SAME width as .native2-favorite-toggle. Both controls
       sit flush against the copy column's right edge, so equal widths put
       their glyphs on one shared centre line — the star above, the chevron
       below. Change one width and you must change the other, and the right
       gutter with it (measured, not assumed: the star is 24px here and 28px
       in the coarse-pointer block, so this alignment holds per context). */
    width: 24px;
    /* Matches the description's line box so the glyph centres ON the last
       line rather than hanging below it. */
    height: 15px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    /* The description's own colour rather than the muted token: it is a
       control FOR that text and should read as belonging to it, without
       competing with the star for attention. (Naming the muted token in
       full here would trip the WCAG pin, which counts token definitions by
       raw text and cannot tell a comment from a declaration.) */
    color: var(--n2-text-secondary);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

/* One source of truth for the direction: the state lives in aria-expanded,
   which the control must set anyway, so the glyph cannot drift out of sync
   with what assistive tech is told. */
.native2-topic-desc-toggle .fa-chevron-down {
    transition: transform 130ms ease;
}

.native2-topic-desc-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.native2-topic-desc-toggle[hidden] {
    display: none;
}

.native2-topic-desc-toggle:hover {
    color: var(--n2-accent-text);
}

/* A flex child of the titleline now, sitting right after the name (it is
   only appended when it has text, so untagged rows pay no flex gap). The
   margin-top seats its small caps on the name's FIRST optical line — the
   name is 13px/1.25, the tag 9.5px — under the titleline's
   align-items: flex-start. flex 0 0 auto: the NAME is the shrinkable one
   (min-width: 0 + line-clamp); a shrunk tag would be an unreadable label. */
.native2-topic-tag {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--n2-text-muted);
    font-size: 9.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.native2-topic-tag.is-featured {
    color: var(--n2-accent-text);
}

/* 2026-08-12: the star moved inline beside the topic name, so this is now a
   bare icon button. It previously reserved ~56px for a "Save"/"Saved" label
   in its own row column; that label is still in the DOM for the state
   helpers but is visually hidden below, and the button's aria-label names
   the action. */
/* The star's LAYOUT box is one text line tall so its glyph sits on the same
   optical line as the topic name. A 24px box under `align-items: flex-start`
   put the glyph 3.9px (desktop) / 6.5px (mobile) below the title's first-line
   centre — measured, operator-reported. The touch target is restored by the
   ::after below, which is bigger than the box and does not affect layout. */
.native2-favorite-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 0;
    height: 1.25em;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--n2-text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: none;
}

/* Hit area only — invisible, centred on the star, and out of flow so growing
   it can never push the title around again. */
.native2-favorite-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    /* Full width of the in-flow box, so the hit area never overhangs
       horizontally — the star is flush with the text column's right edge and
       any overhang there shows up as list overflow. Only the vertical
       dimension exceeds the box, which the row's own height absorbs. */
    width: 100%;
    height: 24px;
    transform: translate(-50%, -50%);
}

.native2-favorite-toggle .native2-favorite-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.native2-topic-row:hover .native2-favorite-toggle,
.native2-favorite-toggle:hover {
    background: transparent;
    color: var(--n2-accent-text);
}

.native2-favorite-toggle:active {
    transform: none;
}

.native2-favorite-toggle.is-favorite {
    color: var(--n2-accent-text);
}

.native2-favorite-label {
    display: inline;
}

.native2-empty {
    display: grid;
    grid-auto-flow: row;
    gap: 8px;
    place-items: center;
    min-height: 180px;
    padding: 28px;
    color: var(--n2-text-muted);
    font-size: 12px;
    text-align: center;
}

.native2-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 2px;
    border: 1px solid var(--n2-line);
    border-radius: 50%;
    color: var(--n2-accent-text);
    font-size: 12px;
}

.native2-empty strong {
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 650;
}

.native2-empty > span {
    max-width: 330px;
    line-height: 1.5;
}

.native2-empty-action {
    min-height: 34px;
    margin-top: 4px;
    padding: 6px 11px;
    border: 1px solid var(--n2-line);
    border-radius: 7px;
    background: var(--n2-surface-raised);
    color: var(--n2-text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
}

.native2-empty-action:hover {
    background: var(--n2-hover);
    color: var(--text-primary);
}

.native2-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    gap: 12px;
    padding: 8px 16px;
    border-top: 1px solid var(--n2-line);
}

/* #by_codex 2026-08-03: this account-only control is built conditionally.
   Anonymous dialogs have no footer element at all, avoiding the empty
   two-line strip that looked like a broken mobile layout. */
.native2-directory-control {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    gap: 9px;
    color: var(--n2-text-secondary);
    cursor: pointer;
}

.native2-directory-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.native2-directory-switch {
    position: relative;
    width: 30px;
    height: 18px;
    border: 1px solid var(--n2-line-strong);
    border-radius: 999px;
    background: var(--n2-surface-raised);
    transition: none;
}

.native2-directory-switch::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--n2-text-muted);
    content: '';
    transition: none;
}

.native2-directory-toggle:checked + .native2-directory-switch {
    border-color: var(--n2-accent-text);
    background: var(--n2-accent-soft);
}

.native2-directory-toggle:checked + .native2-directory-switch::after {
    background: var(--n2-accent-text);
    transform: translateX(12px);
}

.native2-directory-toggle:focus-visible + .native2-directory-switch {
    outline: 2px solid var(--n2-accent-text);
    outline-offset: 2px;
}

.native2-directory-control:has(.native2-directory-toggle:disabled) {
    cursor: default;
    opacity: .72;
}

.native2-directory-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.native2-directory-copy strong {
    color: var(--n2-text-secondary);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
}

.native2-directory-copy small {
    max-width: 430px;
    color: var(--n2-text-muted);
    font-size: 9.5px;
    line-height: 1.3;
}

.native2-inline-status {
    overflow: hidden;
    color: var(--n2-text-muted);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) and (min-width: 769px) {
    .native2-knowledge-nav {
        width: clamp(165px, 27vw, 270px);
    }
}

@media (min-width: 769px) {
    .native2-scope-panel.is-compact-list {
        height: auto;
        max-height: min(560px, calc(100dvh - 72px));
    }

    .native2-panel-head {
        padding: 13px 16px 12px;
    }

    .native2-panel-kicker {
        display: none;
    }

    .native2-panel-title {
        /* One title size across breakpoints (was 17px here vs 15px mobile).
           Operator 2026-08-04: match the sidebar's compact scale. */
        font-size: 15px;
    }

    .native2-topic-option {
        min-height: 48px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

@media (max-width: 768px),
       (hover: none) and (pointer: coarse) and (max-height: 600px) {
    .native2-preview .topic-selector-wrapper,
    .native2-preview .topic-display-mobile,
    .native2-preview .topic-separator-mobile {
        display: none !important;
    }

    .native2-preview .selectors-center {
        display: block !important;
        position: static !important;
    }

    .native2-knowledge-nav {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        z-index: 97;
        width: auto;
        grid-template-columns: minmax(0, 1fr);
        padding: 5px 8px 6px;
        border-bottom: 1px solid var(--n2-line);
        background-color: rgba(246, 244, 240, 0.97);
        background-image: inherit;
    }

    [data-theme="dark"] .native2-knowledge-nav {
        background-color: rgba(28, 28, 34, 0.97);
    }

    .native2-launch-button {
        min-height: 44px;
        border-radius: 8px;
        padding: 5px 7px 5px 10px;
    }

    .native2-header-favorite {
        display: none !important;
    }

    .native2-preview .chat-messages {
        padding-top: 116px !important;
    }

    .native2-scope-layer {
        /* Codex, 2026-08-03: the phone picker is the entire usable chat
           workspace, not a smaller card floating inside it. These live
           insets are measured from the header and composer by the controller. */
        align-items: stretch;
        justify-items: stretch;
        padding: var(--n2-mobile-top-space, 56px) 0
                 var(--n2-mobile-bottom-space, var(--chat-input-h, 104px));
    }

    .native2-scope-backdrop {
        background: var(--n2-dialog-backdrop);
    }

    .native2-scope-panel {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        margin: 0;
        border-right: 0;
        border-bottom: 1px solid var(--n2-dialog-border);
        border-left: 0;
        border-radius: 0;
        padding-bottom: 0;
        animation: none;
    }

    .native2-panel-head {
        position: relative;
        padding: 12px 12px 10px;
    }

    .native2-panel-head::before {
        display: none;
    }

    .native2-panel-kicker {
        display: none;
    }

    .native2-panel-title {
        font-size: 15px;
        /* line-height stays 34px: it centres the title against the 34px close
           button, it is not type rhythm. */
        line-height: 34px;
    }

    .native2-panel-brand {
        margin-bottom: 5px;
    }

    .native2-panel-brand-logo {
        height: 32px;
        max-width: 96px;
    }

    .native2-panel-brand-name {
        /* Was 32px — on a 390px phone that is the loudest thing on screen and
           the reason the picker read as "big" next to the sidebar. Same 18px
           as the rail / admin wordmark. */
        font-size: 18px;
    }

    .native2-search-input {
        height: 40px;
        font-size: 16px; /* Prevent iOS focus zoom. */
    }

    .native2-panel-body {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .native2-filter-row {
        gap: 7px;
    }

    .native2-category-filter {
        /* Narrower than desktop's 152px: the search field is the primary
           control and must keep usable width on a phone. */
        width: 116px;
    }

    .native2-category-select {
        height: 40px;
        padding-right: 22px;
        font-size: 16px; /* Prevent iOS focus zoom. */
    }

    .native2-topic-option {
        /* Was 62px — TALLER on mobile than the 54px desktop row, and roughly
           double the history rows beside it (.chat-history-item is padding
           10px on mobile). 48px keeps clear of the 44px touch floor. */
        min-height: 48px;
        gap: 7px;
        padding: 7px 6px 7px 5px;
    }

    .native2-topic-name {
        /* history .ikb-item-text drops 13px -> 12px on mobile; match it. */
        font-size: 12px;
    }

    .native2-topic-row {
        /* Matches desktop: the star is inline, so no reserved action column.
           The separator comes from the shared `+` sibling rule — this used to
           carry its own border-bottom, which drew a line under the LAST row
           too and used the heavier structural --n2-line. */
        grid-template-columns: minmax(0, 1fr);
    }

    .native2-favorite-toggle {
        /* 2026-08-12: was a 64x32 labelled "Save" control in the row's own
           right-hand column. The star is inline beside the topic name now, so
           the visible box tracks the text line and the touch target lives in
           ::after — a tall box here pushed the glyph off the title's line. */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 1.25em;
        margin: 0;
        /* #by_codex 2026-08-04: Save is a quiet row action, not a second card. */
        border: 0;
        background: transparent;
        font-size: 12px;
        font-weight: 600;
    }

    /* Tracks the 28px directly above so the chevron stays on the star's
       centre line here too, and the description's gutter tracks both. */
    .native2-topic-desc-toggle {
        width: 28px;
    }

    /* Taller than desktop: fingers, not a mouse. Width stays 100% of the
       in-flow box so the hit area cannot push the list into overflow. */
    .native2-favorite-toggle::after {
        height: 28px;
    }

    .native2-topic-row:hover .native2-favorite-toggle,
    .native2-favorite-toggle:hover {
        background: transparent;
        color: var(--n2-accent-text);
    }

    .native2-topic-description {
        display: -webkit-box;
        margin-top: 3px;
        /* Matches the 28px chevron below, as the base rule matches its 24px. */
        padding-right: 28px;
        overflow: hidden;
        font-size: 10.5px;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .native2-topic-meta {
        margin-top: 2px;
        overflow: hidden;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .native2-topic-tag {
        display: none;
    }

    .native2-results-head {
        justify-content: flex-end;
        padding: 6px 12px 4px;
    }

    .native2-results-title {
        display: none;
    }

    .native2-topic-list {
        padding: 0 6px 8px;
    }

    .native2-panel-foot {
        min-height: 48px;
        padding-inline: 14px;
    }

    .native2-directory-copy small {
        max-width: min(58vw, 360px);
    }
}

/* Rotated phones have desktop-like width but very little height. Put the
   title, search and close action on one line, then use the width for a compact
   two-column topic directory. This remains phone-only through coarse pointer
   + short-height gating; tablets and desktop keep their existing layout. */
@media (min-width: 769px) and (max-width: 950px) and (max-height: 600px)
       and (hover: none) and (pointer: coarse) {
    .native2-panel-head {
        grid-template-columns: minmax(145px, 180px) minmax(0, 1fr) 34px;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
    }

    .native2-panel-heading { grid-column: 1; grid-row: 1; }
    .native2-panel-title { line-height: 34px; }
    .native2-panel-scope { display: none; }

    /* The filter row, not the search field, is the header grid child now. */
    .native2-filter-row {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
    }

    .native2-panel-close { grid-column: 3; grid-row: 1; }
    .native2-search-input { height: 34px; }

    .native2-category-filter { width: 116px; }
    .native2-category-select { height: 34px; }
    .native2-results-head { display: none; }

    .native2-topic-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        column-gap: 8px;
        padding-top: 4px;
    }

    .native2-topic-option { min-height: 52px; }
    .native2-topic-description { display: none; }
    /* The toggle is out of flow, so hiding the description alone would leave
       a chevron floating in the corner of a row that has no description. */
    .native2-topic-desc-toggle { display: none; }
}

@media (max-width: 380px) {
    .native2-launch-meta {
        font-size: 8.75px;
    }

    .native2-launch-title {
        font-size: 12px;
    }

    .native2-panel-foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .native2-directory-copy small {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .native2-scope-panel,
    .native2-launch-action,
    .native2-launch-button,
    .native2-header-favorite,
    .native2-topic-option,
    .native2-favorite-toggle {
        animation: none !important;
        transition: none !important;
    }

    .native2-directory-switch,
    .native2-directory-switch::after {
        transition: none !important;
    }
}