/* Search (/search) and Ask (/rag)
   Mobile first: base rules target small phones; min-width queries enhance.
   Hover effects live under (hover: hover). Inputs stay at 16px or more (no iOS zoom). */

/* Single column grids must not grow to their widest child (inputs, long titles) */
.rag-welcome, .teach, .teach-head, .sources, .src-more, .composer, .result-src { grid-template-columns: minmax(0, 1fr); }

/* ── Hero ── */
.tool-hero { overflow-x: clip; overflow-y: visible; z-index: 2; }
.tool-hero .watermark { font-size: clamp(8rem, 24vw, 20rem); bottom: 0; }
.tool-hero .h1 { max-width: 14ch; }
.tool-hero .lead { max-width: 52ch; }

/* ── Query box ── */
.q-box { margin-top: var(--s-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); max-width: none; }
.q-box > *, .q-controls > * { min-inline-size: 0; }
.q-field {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 5px; padding-inline-start: 1em; box-shadow: var(--shadow-1);
  transition: border-color var(--d-2), box-shadow var(--d-2);
}
.q-field:focus-within { border-color: var(--sky); box-shadow: 0 0 0 5px var(--sky-20), var(--shadow-1); }
.q-lead { flex: none; color: var(--sky-deep); }
.q-input { flex: 1; min-inline-size: 0; border: 0; background: none; font-family: var(--f-ui); font-size: 1rem; min-block-size: 48px; }
.q-input:focus { outline: none; }
.q-input::placeholder { color: var(--ink-40); }
.q-input::-webkit-search-cancel-button { display: none; }
.q-go { flex: none; inline-size: 50px; min-block-size: 50px; padding: 0; }
.q-go-label { display: none; }
.q-go.is-busy .icon { animation: spin .8s linear infinite; }
@media (min-width: 561px) {
  .q-box { margin-top: var(--s-6); gap: var(--s-4); }
  .q-field { gap: var(--s-3); padding: 7px; padding-inline-start: 1.25em; }
  .q-input { font-size: 1.08rem; min-block-size: 50px; }
  .q-go { inline-size: auto; min-block-size: 52px; padding-inline: 1.5em; }
  .q-go-label { display: inline; }
}

.q-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
@media (min-width: 561px) { .q-controls { display: flex; flex-wrap: wrap; align-items: center; } }

/* Segmented control: full width with equal parts on phones, compact pills from tablets */
.seg { display: flex; inline-size: 100%; gap: 3px; padding: 4px; background: var(--paper-2); border-radius: var(--r-pill); }
.seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-block-size: 44px; padding: 0 .4em; border-radius: var(--r-pill); font-family: var(--f-ui); font-size: .86rem; font-weight: 500; color: var(--ink-60); white-space: nowrap; transition: background var(--d-2), color var(--d-2); }
.seg-btn.active, .seg-btn[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.seg-btn.active .icon { color: var(--sky); }
.seg-line { background: transparent; border: 1px solid var(--line-2); }
.seg-line .seg-btn.active { background: var(--sky-20); color: var(--ink); }
.seg-line .seg-btn.active .icon { color: var(--sky-deep); }
@media (hover: hover) { .seg-btn:hover { color: var(--ink); } }
@media (max-width: 359px) { .seg-btn .icon { display: none; } }
@media (min-width: 561px) {
  .seg { display: inline-flex; inline-size: auto; }
  .seg-btn { flex: none; padding: 0 1em; font-size: .9rem; }
}
@media (min-width: 561px) and (pointer: fine) { .seg-btn { min-block-size: 38px; } }

/* Tag selector (component logic in app.js) */
.tag-selector { position: relative; }
.tag-selector-selected {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-block-size: 48px; padding: 6px 12px;
  background: var(--white); border: 1px dashed var(--line-2); border-radius: var(--r-2); cursor: pointer;
  transition: border-color var(--d-2);
}
.tag-selector.open .tag-selector-selected { border-color: var(--sky); border-style: solid; }
.tag-selector-placeholder { font-family: var(--f-ui); font-size: .88rem; color: var(--ink-40); line-height: 1.5; }
.tag-pill { display: inline-flex; align-items: center; gap: .35em; max-inline-size: 100%; padding: .2em .3em .2em .75em; border-radius: var(--r-pill); background: var(--sky-20); color: var(--ink); font-family: var(--f-ui); font-size: .84rem; font-weight: 500; }
.tag-pill .tag-type-icon { color: var(--sky-deep); }
.tag-pill-remove { flex: none; display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; color: var(--ink-60); }
.tag-selector-dropdown {
  position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--shadow-2);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--d-2), transform var(--d-2) var(--ease-out), visibility var(--d-2);
}
.tag-selector.drop-up .tag-selector-dropdown { top: auto; bottom: calc(100% + 6px); transform: translateY(6px); }
.tag-selector.open .tag-selector-dropdown { opacity: 1; visibility: visible; transform: none; }
.tag-selector-search { inline-size: 100%; min-block-size: 44px; padding: 0 .9em; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--white); font-family: var(--f-ui); font-size: 1rem; }
.tag-selector-search:focus { outline: none; border-color: var(--sky); }
.tag-selector-options { max-block-size: min(260px, 42dvh); overflow: auto; overscroll-behavior: contain; margin-top: 6px; display: grid; gap: 2px; }
.tag-selector-option { display: flex; align-items: center; gap: .55em; min-block-size: 44px; padding: .55em .75em; border-radius: var(--r-1); font-family: var(--f-ui); font-size: .92rem; line-height: 1.5; cursor: pointer; }
.tag-selector-option .tag-type-icon { color: var(--sky-deep); }
.tag-selector-option.hidden { display: none; }
@media (hover: hover) {
  .tag-selector-selected:hover { border-color: var(--sky); border-style: solid; }
  .tag-pill-remove:hover { background: var(--ink); color: var(--paper); }
  .tag-selector-option:hover { background: var(--sky-10); }
}
@media (pointer: fine) { .tag-pill-remove { inline-size: 22px; block-size: 22px; } .tag-selector-option { min-block-size: 0; } }

/* ── Search results ── */
.results-wrap .results-area { max-width: none; scroll-margin-top: calc(var(--header-h) + 12px); }
.results-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.results-head .ui { display: inline-flex; align-items: center; gap: .5em; }
.results-title { font-family: var(--f-ui); font-weight: 500; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.results-title .num { font-family: var(--f-display); font-size: 2.2rem; line-height: .7; color: var(--sky-deep); margin-inline-end: .1em; }
.results { list-style: none; display: grid; gap: var(--s-3); }
.result {
  position: relative; display: grid; gap: var(--s-3); min-inline-size: 0;
  padding: var(--s-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-2);
  transition: border-color var(--d-2), box-shadow var(--d-3) var(--ease-out);
}
.result.is-skeleton { gap: 0; margin-bottom: var(--s-3); }
.result-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-3); align-items: start; }
.result-rank { font-family: var(--f-ui); font-weight: 600; font-style: italic; font-size: 1.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--sky); }
.result-src { display: grid; gap: 6px; justify-items: start; min-inline-size: 0; }
.result-src .chip { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; }
.result-title { font-family: var(--f-read); font-weight: 700; font-size: 1.04rem; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; transition: color var(--d-1); }
.relevance { grid-column: 2; display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-60); }
.relevance .bar { inline-size: 54px; block-size: 4px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.relevance .bar i { display: block; block-size: 100%; background: var(--sky); border-radius: 4px; }
.result-text { margin: 0; font-family: var(--f-read); font-size: 1.02rem; line-height: 2.05; color: var(--ink-80); text-wrap: pretty; overflow-wrap: anywhere; }
mark.hl { background: var(--sky-40); color: var(--ink); padding-inline: .1em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.result-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.result-foot .link, .result-foot .ts-chip { min-block-size: 40px; }
.ts-chip { transition: background var(--d-2), color var(--d-2); }
a.ts-chip .icon { color: var(--sky); }
.link-mute { color: var(--ink-60); }
@media (hover: hover) {
  .result:hover { border-color: var(--sky-40); box-shadow: var(--shadow-1); }
  .result-title:hover { color: var(--sky-deep); }
  a.ts-chip:hover { background: var(--sky); border-color: var(--sky); color: var(--ink); }
  a.ts-chip:hover .icon { color: var(--ink); }
}
@media (min-width: 561px) {
  .results-head { margin-bottom: var(--s-5); gap: var(--s-3); }
  .results-title { font-size: 1.05rem; }
  .results-title .num { font-size: 2.4rem; }
  .results { gap: var(--s-4); }
  .result { padding: var(--s-5); }
  .result.is-skeleton { margin-bottom: var(--s-4); }
  .result-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4); }
  .relevance { grid-column: auto; }
  .result-rank { font-size: 1.6rem; }
  .result-title { font-size: 1.08rem; }
  .result-text { font-size: 1.04rem; }
  .result-foot { gap: var(--s-2) var(--s-5); }
}
@media (min-width: 561px) and (pointer: fine) { .result-foot .link, .result-foot .ts-chip { min-block-size: 0; } }

/* Teaching empty state */
.teach { display: grid; gap: var(--s-5); padding: var(--s-4); border: 1px dashed var(--line-2); border-radius: var(--r-3); }
.teach-head { display: grid; gap: var(--s-3); }
.teach-head > .icon { color: var(--sky); flex: none; }
.teach-head .h3 { margin-bottom: var(--s-3); }
.teach-head p { margin: 0; font-family: var(--f-ui); }
.teach-try { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.teach-try .chip { font-size: .86rem; min-block-size: 40px; padding: .6em 1em; transition: background var(--d-2), color var(--d-2), border-color var(--d-2); }
.teach-modes { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.teach-modes li { display: flex; gap: var(--s-3); align-items: start; }
.teach-modes .icon { flex: none; color: var(--sky-deep); margin-top: 4px; }
.teach-modes div { display: grid; gap: 2px; }
.teach-modes strong { font-family: var(--f-ui); font-weight: 600; }
.teach-modes span { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink-60); line-height: 1.7; }
@media (hover: hover) { .teach-try .chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
@media (min-width: 761px) {
  .teach { gap: var(--s-6); padding: var(--s-6); }
  .teach-head { display: flex; gap: var(--s-5); align-items: start; }
  .teach-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}
.empty .btn { margin-top: var(--s-2); }

/* ── Ask (RAG): chat messages and sources (restored) ── */


@media (hover: hover) {
}

/* Messages */
.msg { animation: msg-in var(--d-3) var(--ease-out) both; min-inline-size: 0; }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px); } }
.msg-q { justify-self: start; max-inline-size: 94%; padding: .8em 1.1em; background: var(--ink); color: var(--paper); border-radius: 20px 20px 20px 6px; scroll-margin-top: calc(var(--header-h) + 20px); }
.msg-q p { margin: 0; font-family: var(--f-ui); font-size: 1rem; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-a { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); background: var(--white); border: 1px solid var(--line); border-radius: 6px 20px 20px 20px; }
.msg-head { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.avatar { inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--sky); flex: none; }
.who { font-family: var(--f-ui); font-weight: 600; font-size: .92rem; }
.status { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-60); }
.status .icon { color: var(--ok); }
.answer-skel { display: none; }
.msg-a.is-thinking .answer-skel { display: block; }
.msg-a.is-thinking .rag-answer:empty { display: none; }
.rag-answer { font-size: 1.04rem; overflow-wrap: anywhere; min-inline-size: 0; }
.rag-answer > :first-child { margin-top: 0; }
.rag-answer > :last-child { margin-bottom: 0; }
.rag-answer h2 { font-size: 1.18rem; }
.rag-answer h3 { font-size: 1.06rem; }
.rag-answer table, .rag-answer pre { display: block; max-inline-size: 100%; overflow-x: auto; }
.msg-a.is-streaming .rag-answer > :last-child::after { content: ""; display: inline-block; inline-size: .5em; block-size: 1.05em; margin-inline-start: 3px; vertical-align: -.15em; background: var(--sky); border-radius: 1px; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.msg-a.is-error { border-color: color-mix(in oklab, var(--danger) 35%, var(--paper)); }
.msg-a.is-error .status .icon { color: var(--danger); }
.msg-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.msg-actions .btn { flex: 1 1 auto; min-block-size: 44px; }
@media (min-width: 561px) {
  .msg-q { max-inline-size: 86%; padding: .85em 1.2em; }
  .msg-q p { font-size: 1.02rem; }
  .msg-a { padding: var(--s-5); }
  .rag-answer { font-size: 1.08rem; }
  .rag-answer h2 { font-size: 1.25rem; }
  .rag-answer h3 { font-size: 1.1rem; }
  .msg-actions .btn { flex: none; }
}
@media (min-width: 561px) and (pointer: fine) { .msg-actions .btn { min-block-size: 38px; } }

/* Sources */
.msg-sources:empty { display: none; }
.sources { display: grid; gap: var(--s-3); min-inline-size: 0; }
.sources-head { display: flex; align-items: center; gap: .5em; font-family: var(--f-ui); font-weight: 600; font-size: .9rem; color: var(--ink-80); }
.sources-head .icon { color: var(--sky-deep); }
.src-list { list-style: none; display: grid; gap: 6px; }
.src details { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); transition: border-color var(--d-2), background var(--d-2); }
.src details[open] { background: var(--white); border-color: var(--sky-40); }
.src summary { list-style: none; display: flex; align-items: center; gap: var(--s-2); min-block-size: 52px; padding: .6em .8em; cursor: pointer; }
.src summary::-webkit-details-marker { display: none; }
.src summary .ts-chip { display: none; }
.src-n { flex: none; inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-20); color: var(--sky-ink); font-family: var(--f-ui); font-size: .75rem; font-weight: 600; }
.src-ic { flex: none; color: var(--sky-deep); display: grid; }
.src-body { flex: 1; min-inline-size: 0; display: grid; }
.src-body strong { font-family: var(--f-ui); font-weight: 600; font-size: .9rem; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-body small { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-chev { flex: none; color: var(--ink-40); transition: transform var(--d-2) var(--ease-out); }
.src details[open] .src-chev { transform: rotate(180deg); }
.src-more { padding: 0 .8em .8em; display: grid; gap: var(--s-3); }
.src-more p { margin: 0; font-size: .96rem; line-height: 2; color: var(--ink-80); padding: var(--s-3); background: var(--sky-10); border-radius: var(--r-2); overflow-wrap: anywhere; }
.src-actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.src-actions .link { min-block-size: 40px; }
@media (min-width: 561px) {
  .src summary { gap: var(--s-3); padding: .7em .9em; }
  .src summary .ts-chip { display: inline-flex; flex: none; }
  .src-more { padding: 0 .9em .9em; }
  .src-more p { padding: var(--s-3) var(--s-4); }
}
@media (pointer: fine) { .src summary { min-block-size: 0; } .src-actions .link { min-block-size: 0; } }

/* Composer: sticks to the bottom of the viewport while reading */
.composer-dock {
  position: sticky; bottom: calc(var(--tabbar-h) + 8px); z-index: 40;
  padding: var(--s-2) var(--gutter) 0; margin-bottom: var(--s-5);
}
.composer-dock::before { content: ""; position: absolute; inset: -28px 0 -12px; z-index: -1; background: linear-gradient(to top, var(--paper) 55%, transparent); pointer-events: none; }
.composer { inline-size: min(100%, var(--wrap-read)); display: grid; gap: var(--s-2); }
.composer-row {
  display: flex; align-items: end; gap: 4px;
  padding: 5px; background: var(--white); border: 1px solid var(--line-2); border-radius: 26px;
  box-shadow: var(--shadow-2); transition: border-color var(--d-2), box-shadow var(--d-2);
}
.composer-row:focus-within { border-color: var(--sky); box-shadow: 0 0 0 5px var(--sky-20), var(--shadow-2); }
.composer-input { flex: 1; min-inline-size: 0; resize: none; border: 0; background: none; padding: .65em .3em; font-family: var(--f-ui); font-size: 1rem; line-height: 1.6; max-block-size: 160px; }
.composer-input:focus { outline: none; }
.composer-input::placeholder { color: var(--ink-40); }
.composer-tool { position: relative; flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-60); transition: background var(--d-2), color var(--d-2); }
.composer-tool.is-on { background: var(--sky-20); color: var(--ink); }
.filter-dot { position: absolute; top: 9px; inset-inline-end: 9px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--sky-deep); border: 2px solid var(--white); }
.composer-send { flex: none; inline-size: 44px; min-block-size: 44px; padding: 0; }
.composer-send:disabled { opacity: .55; cursor: progress; }
.composer-note { display: none; margin: 0; align-items: center; justify-content: center; gap: .4em; font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-40); }
.composer-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); max-block-size: 60dvh; overflow: auto; padding: var(--s-3); background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--shadow-2); animation: msg-in var(--d-3) var(--ease-out) both; }
.composer-filters .seg { inline-size: 100%; }
@media (hover: hover) { .composer-tool:hover { background: var(--sky-20); color: var(--ink); } }
@media (min-width: 561px) {
  .composer-dock { bottom: calc(var(--tabbar-h) + 12px); padding-top: var(--s-3); margin-bottom: var(--s-6); }
  .composer-row { gap: var(--s-2); padding: 7px; }
  .composer-input { padding: .7em .4em; font-size: 1.05rem; max-block-size: 180px; }
  .composer-send { inline-size: 46px; min-block-size: 46px; }
  .composer-note { display: flex; }
  .composer-filters { padding: var(--s-4); }
  .composer-filters .seg { justify-self: start; inline-size: auto; }
}

/* ── Instant suggestions (combobox) ───────────────────────── */
.q-field { position: relative; }
.suggest {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 30;
  max-block-size: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: 0 24px 48px -24px color-mix(in oklab, var(--sky-ink) 55%, transparent);
  padding: 6px;
}
.suggest-group { padding: 10px 12px 4px; font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-60); }
.suggest-item {
  display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 8px 12px; border-radius: var(--r-2);
  font-family: var(--f-ui); font-size: .95rem; color: var(--ink);
}
.suggest-item .icon { color: var(--sky-deep); flex: none; }
.suggest-item .sg-title { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-item small { flex: none; max-inline-size: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-60); font-size: var(--t-xs); }
.suggest-item[aria-selected="true"] { background: var(--sky-20); }
@media (hover: hover) { .suggest-item:hover { background: var(--sky-10); } }

/* ── Facet counts on type chips ───────────────────────────── */
.facet-n { min-inline-size: 1.6em; padding: 0 .4em; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-60); font-size: .72rem; line-height: 1.6; text-align: center; }
.seg-btn.active .facet-n { background: color-mix(in oklab, var(--paper) 25%, transparent); color: inherit; }
.seg-btn.is-empty { opacity: .55; }

/* ── Results extras ───────────────────────────────────────── */
.dym { margin: 0 0 var(--s-4); color: var(--ink-60); }
.dym .link { font-size: inherit; }
.facet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--s-5); font-size: var(--t-sm); }
.facet-row .chip { min-block-size: 36px; cursor: pointer; }
@media (hover: hover) { .facet-row .chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
.result-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.match-chip { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 35%, var(--paper)); }
.result-text mark { background: color-mix(in oklab, var(--sky) 40%, var(--paper)); color: var(--ink); border-radius: 2px; padding-inline: 1px; }
.more-wrap { display: grid; justify-items: center; margin-top: var(--s-6); }
.more-wrap .btn { min-inline-size: min(100%, 260px); }

/* content types on phones: one pill row that scrolls sideways (five items never leave a gap) */
@media (max-width: 560px) {
  .seg-line { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; border-radius: var(--r-pill); }
  .seg-line::-webkit-scrollbar { display: none; }
  .seg-line .seg-btn { flex: none; white-space: nowrap; }
}
.suggest { display: flex; flex-direction: column; align-items: stretch; }
.suggest[hidden] { display: none; }
.suggest-item, .suggest-group { flex: none; inline-size: 100%; }


/* ── Ask (RAG) page: compact, centred, chat layout ── */
.page-rag .footer { display: none; }
.rag-page { display: flex; flex-direction: column; min-block-size: calc(100dvh - var(--header-h) - var(--tabbar-h)); }
.rag-col { flex: 1; display: flex; flex-direction: column; min-inline-size: 0; padding-top: var(--s-6); }
.rag-messages { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s-5); padding-bottom: var(--s-5); }
.rag-welcome { align-self: center; display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding-block: clamp(1rem, 6vh, 4rem) var(--s-4); }
.rag-mark { color: var(--ink); }
.rag-mark .logo-svg { inline-size: 64px; }
.rag-title { font-family: var(--f-display); font-size: clamp(2.8rem, 6vw, 3.6rem); line-height: .85; color: var(--ink); margin-top: var(--s-2); }
.rag-sub { margin: 0; font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink-60); }
.rag-suggest-grid { inline-size: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-top: var(--s-5); }
.rag-suggest {
  display: flex; align-items: center; gap: var(--s-3); text-align: start; min-block-size: 52px;
  padding: var(--s-3) var(--s-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-3);
  font-family: var(--f-ui); font-size: .93rem; line-height: 1.55; color: var(--ink-80);
  transition: border-color var(--d-2), background var(--d-2), color var(--d-2);
}
.rag-suggest .icon { flex: none; color: var(--sky-deep); }
.rag-suggest span { flex: 1; min-inline-size: 0; }
.rag-suggest:active { background: var(--sky-10); }
@media (hover: hover) { .rag-suggest:hover { border-color: var(--sky-40); background: var(--sky-10); color: var(--ink); } }
@media (min-width: 641px) { .rag-suggest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rag-page.has-chat .rag-col { padding-top: var(--s-5); }

/* /search header uses the compact .ph rhythm */
.ph.tool-hero { padding-block: var(--s-5) var(--s-5); }
.ph.tool-hero .ph-title { margin-bottom: var(--s-4); }
@media (min-width: 761px) { .ph.tool-hero { padding-block: var(--s-6) var(--s-6); } }

/* tweet results: quote style */
.result-tweet .result-text { white-space: pre-line; padding-inline-start: var(--s-4); border-inline-start: 3px solid var(--sky); font-size: 1.06rem; }

/* Inline source citations in Ask answers */
.cite { display: inline; padding: 1px 8px; margin-inline: 2px; border-radius: var(--r-pill); background: var(--sky-10); color: var(--sky-deep);
  font-family: var(--f-ui); font-size: .78em; line-height: 1.9; white-space: normal; text-decoration: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
a.cite:hover { background: var(--sky-40); color: var(--ink); }
a.cite:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 2px; }
.cite-plain { color: var(--ink-60); background: var(--paper-2); }
/* quotes inside answers: coloured text, not highlighter blocks (long answers stay readable) */
.rag-answer .transcript-hadith { background: none; padding: 0; color: var(--sky-ink); font-weight: 600; }

/* full-width search page */
.page-search .tool-hero .lead { max-width: 70ch; }
.page-search .ask-switch { max-width: none; }
/* scope picker: a filter icon and one word instead of a sentence */
.tag-selector-placeholder { display: inline-flex; align-items: center; gap: .45em; }
.tag-selector-placeholder::before { content: ""; inline-size: 16px; block-size: 16px; background: var(--sky-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8.5V19l-4 2v-7.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8.5V19l-4 2v-7.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* search scope: a small chip while empty, a light row once something is picked; the dropdown keeps full width */
.q-scope .tag-selector-selected { inline-size: fit-content; max-inline-size: 100%; min-block-size: 40px; padding: 4px 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: transparent; transition: border-color var(--d-2), background var(--d-2); }
.q-scope .tag-selector-selected:has(.tag-pill) { padding: 4px 6px; background: color-mix(in oklab, var(--white) 60%, transparent); }
.q-scope .tag-selector-placeholder { color: var(--ink-60); font-weight: 600; font-size: .86rem; }
.q-scope .tag-selector.open .tag-selector-selected { border-style: solid; border-color: var(--sky-deep); background: var(--sky-10); }
@media (hover: hover) { .q-scope .tag-selector-selected:hover { border-style: solid; border-color: var(--sky-deep); background: var(--sky-10); } }