/* ===========================================================================
   phase6 — the Search page (2026-09-04). Owned by the search lane.

   Instagram's search screen is one rounded field centred at the top and a
   grid of content under it. Ours puts the suggestion chat where that grid
   goes, so the page is: a pill, and then everything else is the chat.

   The primitives — `.ig-person`, `.ig-btn`, `.ig-h`, `.ig-empty` — come from
   ig.css and are not redefined here. Only the field, the dropdown card and
   the two-row page frame belong to this file.
   =========================================================================== */

.srch {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;                 /* never let a long handle widen the page */
}

/* ------------------------------------------------------------- the field --- */

.srch-box {
  position: relative;
  z-index: 20;
  width: 100%;
  flex: none;
}

/* THE PEOPLE BAND: a tinted card with a heading, so it reads as "a different
   thing" from the chat under it. The dropdown anchors to it. */
.srch-people {
  position: relative;
  display: grid; gap: 12px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(139, 31, 209, 0.14), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(255, 200, 168, 0.35), transparent 60%),
    var(--white);
  box-shadow: var(--lift);
}
.srch-people-h, .srch-chat-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.srch-people-h b, .srch-chat-h b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.srch-people-h span:not(.srch-people-ic), .srch-chat-h span:not(.srch-chat-ic) {
  display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.35;
}
.srch-people-ic, .srch-chat-ic {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; color: var(--white); background: var(--violet);
}
.srch-chat-ic { background: var(--ink); }
.srch-chat-h { margin-top: 10px; padding: 0 2px; }
.srch-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.srch-chat > * { flex: 1 1 auto; }
@media (max-width: 720px) {
  .srch-people { padding: 12px 12px 14px; border-radius: 12px; }
  .srch-people-h span:not(.srch-people-ic) { display: none; }
  .srch-chat-h span:not(.srch-chat-ic) { display: none; }
}

.srch-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink-faint);
  cursor: text;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.srch-field:focus-within {
  border-color: var(--ink);
  background: var(--white);
  color: var(--ink);
}
.srch-field svg { flex: none; }

.srch-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
}
.srch-input:focus, .srch-input:focus-visible { outline: none; box-shadow: none; }
.srch-input::placeholder { color: var(--ink-faint); }
/* the browser's own clear cross would sit beside ours */
.srch-input::-webkit-search-cancel-button { display: none; }

/* ---------------------------------------------------------- the dropdown --- */

.srch-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 18px;
  right: 18px;
  z-index: 21;
  max-height: min(60vh, 460px);
  /* 19.5 — A COLUMN, NOT A SCROLLER. The card was one scrolling box with the
     ask row stuck to its bottom edge, so the rows passed underneath it and the
     last one before the fold was always cut in half behind it. The list is the
     only thing that scrolls now; the foot is a sibling that does not move, so
     the two never occupy the same pixels. */
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--raise-hi, 0 18px 40px rgba(20, 12, 28, 0.16));
  animation: srch-drop-in 160ms var(--ease) both;
}
.srch-list {
  min-height: 0; flex: 1 1 auto;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 14px 12px;
  /* 19.5 — AND THE FOLD READS AS A FOLD. A scroller always cuts a row at its
     edge; with the ask row directly under it that cut looked like a row
     bleeding through rather than like "there is more below". The last few
     pixels fade, which is the same mark the post preview uses for the same
     reason. Nothing is hidden by it — the row is still there, and scrolling
     brings it up whole. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%);
}
.srch-foot { flex: none; }
.srch-foot:empty { display: none; }
.srch-drop.is-off { display: none; }

@keyframes srch-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .srch-drop { animation: none; } }

.srch-h { margin: 6px 0 2px; }
.srch-rows { display: flex; flex-direction: column; }

/* The row itself is `.ig-person`; the tappable half of it is this button, so
   the Follow action beside it is not nested inside another button. */
.srch-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.srch-open:hover .ig-person-t b { text-decoration: underline; }

.srch-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
}
.srch-x:hover { background: var(--paper); color: var(--ink); }

.srch-quiet {
  margin: 12px 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}
.srch-quiet.is-bad { color: var(--coral-dark, #bf3e2f); }

/* ===========================================================================
   18.1 — THE BAR, FIXED AT THE TOP OF THE SEARCH SCREEN
   (`_global/navigation/SPEC.md` entry 5). Nick: "A bar fixed at top. Media and
   info coming down just like instagram."

   Sticky rather than `position: fixed`: the surface is the scroller, so sticky
   pins the bar to the top of the screen without taking it out of the flow and
   without having to know how wide the rail is at this width.
   =========================================================================== */
.srch-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  flex: none;
  padding: 10px 18px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
/* 19.1 (`suggestion-card/SPEC.md` entry 9) — THE BAR STEPS OUT OF THE CARD'S
   WAY. The bar is z-index 25 and the suggestion popup lives inside
   `.ch.is-thread`, which `isolation: isolate` makes a stacking context of its
   own — so no z-index on the card could ever beat the bar, and the card's ✕
   and the top of its artwork were drawn BEHIND it at every width. That is the
   "on laptop the card is actually OVERFLOWING": nothing scrolled, the top of
   the card was simply unreachable. It is also why pressing "outside" so often
   did nothing — the top band of the scrim belonged to the bar.

   Dropping the bar to `z-index: auto` while a card is open puts both in the
   same paint step, where DOM order decides and the chat (later) wins. The bar
   goes straight back the moment the card closes. */
.srch:has(.ch-pop) .srch-bar { z-index: auto; }
.srch-bar-in { position: relative; max-width: 760px; margin: 0 auto; }
.srch-bar .srch-drop { left: 0; right: 0; }

/* THE ASK ROW — the last row of a non-empty list, and the only thing on this
   surface that spends a credit. */
/* It is the LAST row, and it is STICKY to the foot of the list: a long result
   list would otherwise push the one deliberate, credit-spending action below
   the scroll, where nobody finds it. */
/* 19.5: it is the foot of the card now, not the last row of the list — so no
   stickiness, no negative margins, and nothing can pass behind it. */
.srch-ask {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 0; padding: 11px 14px; border: 0; border-top: 1px solid var(--line-soft);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--white); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.srch-ask:hover { background: var(--violet-wash, var(--paper)); }
.srch-ask-t { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.srch-ask-t b { font-size: 14px; font-weight: 700; color: var(--violet); }
.srch-ask-t span { font-size: 12.5px; color: var(--ink-faint);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-ask > svg { color: var(--violet); flex: none; }

/* THE RESULT BOX (entry 13): image + title + description, one selectable box,
   the same shape the composer's media picker draws. */
.srch-m-desc {
  font-size: 12px; line-height: 1.35; color: var(--ink-soft, var(--ink-faint));
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; white-space: normal;
}
.srch-m { align-items: flex-start; }
.srch-m-art { margin-top: 2px; width: 48px; height: 48px; }

/* ------------------------------------------------------------- the chat --- */

/* The chat measures its own height down to the top of the highest fixed bar
   (chat.js `measureBox`), so this only has to give it the room and get out of
   the way. `min-height: 0` is what lets it shrink inside the flex column
   instead of pushing the ask box below the fold. */
/* THE CHAT IS THE PAGE (Nick, 2026-09-07: "Chatbox should encapsulate full
   page. Not boxed in."): the surface's padding and width cap step aside on
   Discover, and the stage runs edge to edge down to the bottom bar. */
.surface:has(> .surface-wide[data-view="search"]) { padding: 0; }
.surface-wide[data-view="search"] { width: 100%; }
.srch { gap: 0; }
.srch-chat {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  /* No cap (Nick, 2026-09-04: "make the ai chatbox span more over the page").
     The suggestion CARD keeps its own mini-tablet measure inside the thread;
     the chips, the thread and the ask box take the page. */
  margin: 0;
}

@media (max-width: 900px) {
  .srch { gap: 8px; }
  .srch-box { max-width: none; }
  .srch-chat { max-width: none; }
  .srch-drop { max-height: min(58dvh, 420px); }
}

@media (max-width: 420px) {
  .srch-field { height: 40px; padding: 0 12px; }
  /* 19.5: the padding moved onto the list, which is the part that scrolls. */
  .srch-list { padding: 6px 10px 10px; }
  .srch-ask { padding: 10px 10px; }
  .srch-open { gap: 10px; }
}

/* A follow that did not land says so on its own row, never in place of the
   list the person is reading. */
.srch-item { display: block; }
.srch-rowerr { margin: -4px 0 8px; font-size: 12.5px; }

/* THE LIBRARY ROW under the field (Nick, 2026-09-07): the plus, two lines,
   a chevron. It opens the Add-to-library panel with the words already typed. */
.srch-lib {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 4px 0 6px; padding: 10px 8px; border: 0; border-radius: var(--r-box);
  background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.srch-lib:hover { background: var(--paper-deep); }
.srch-lib-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none;
               border-radius: 50%; background: var(--violet); color: #fff; }
.srch-lib-t { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.srch-lib-t b { font-size: 14px; font-weight: 600; }
.srch-lib-t span { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-lib > svg { color: var(--ink-faint); flex: none; }
.lp-title { display: inline-flex; align-items: center; gap: 8px; }

/* ===========================================================================
   17.6 — SEARCH LISTS MEDIA, WITH A + (library/SPEC.md entry 11).

   14.7 deviated here — "Search has no media rows" — and shipped one row that
   opened the picker instead. The works are in the list now, each with the one
   add every surface calls; the picker row above them stays as the way to the
   whole catalogue.
   =========================================================================== */
.srch-m { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.srch-m-art { flex: none; width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--paper); color: var(--ink-faint); cursor: pointer; }
.srch-m-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srch-m-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.srch-m-t b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-m-t > span { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-m-say { color: var(--coral-dark, #b4453a); font-size: 11.5px; }
.srch-m-say:empty { display: none; }
.srch-m-add { flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  color: var(--spine); cursor: pointer; }
.srch-m-add:hover:not(:disabled) { border-color: var(--violet); background: var(--violet-wash); }
.srch-m-add.is-done { color: var(--violet); border-color: var(--violet); cursor: default; }
.srch-m-add:disabled { opacity: .6; }

/* 2026-09-15 (round 2) — THE PHONE SEARCH PAGE IS ONE SOLID SCREEN. Nick's
   final description: "the only thing I can move is scrolling up the chat and
   then back down the chat. Everything is otherwise fixed in place." So: the
   bar at the top, the composer at the bottom, the thread scrolling between
   them with no visible scrollbar and its newest line resting on the composer;
   the blurred ground fills the room; a suggestion card or a Have-you-heard
   card sits fixed in the middle of that room. The page itself cannot scroll
   or be dragged sideways. (Replaces the page-scroll attempt of the morning.) */
/* 2026-09-15 — THE CHAT PAGE IS ONE VIEWPORT-HIGH BOX AT EVERY WIDTH (Nick,
   tablet photos + Firefox: "it literally has the bottom half cut off and he
   cant scroll it down … I wanted this to be a big container encapsulating the
   page as a whole"). Two bugs, one shape. `.main` is `auto 1fr` rows for a
   top bar that Search HIDES, so the surface fell into the auto row and was
   only as tall as its cold content — half the screen on an iPad, and the
   thread had nowhere to grow. And on a desktop the box was measured in JS
   while the page could still scroll, which is the stray scrollbar. Now the
   app is the viewport, the surface is a column that cannot overflow, the
   chat fills whatever is left, and only the thread scrolls. No measuring. */
.app[data-view="search"] { height: 100dvh; min-height: 0; overflow: hidden; }
body:has(.app[data-view="search"]) { overflow: hidden; }
.app[data-view="search"] .main { min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.app[data-view="search"] .main > .surface { grid-row: 2; }   /* the hidden top bar's row collapses to 0 */
.app[data-view="search"] .surface { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.app[data-view="search"] .surface > * { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.app[data-view="search"] .srch { flex: 1 1 auto; min-height: 0; }
.app[data-view="search"] .srch-chat { min-height: 0; }
.app[data-view="search"] .ch { height: auto !important; max-height: none !important; min-height: 0 !important; flex: 1 1 auto; overflow: hidden; }
.app[data-view="search"] .ch.is-thread { grid-template-rows: minmax(0, 1fr); }
.app[data-view="search"] .ch-body { min-height: 0; }
.app[data-view="search"] .ch-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.app[data-view="search"] .ch-thread::-webkit-scrollbar { display: none; }
.app[data-view="search"] .ch-composer { flex: none; }
@media (max-width: 900px) {
  .app[data-view="search"] .topbar-phone { display: none; }
  .app[data-view="search"] .main {
    position: fixed; inset: 0; z-index: 1;
    padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px));
    display: grid; overflow: hidden;
    background: var(--paper);
  }
  body:has(.auth-gate.is-bar) .app[data-view="search"] .main { padding-bottom: calc(57px + 46px + env(safe-area-inset-bottom, 0px)); }
  .app[data-view="search"] .surface { padding: 8px 12px 0; }
  .app[data-view="search"] .ch-hints { display: none; }
  .app[data-view="search"] .ch-bg { position: absolute; inset: 0; border-radius: 0; }
  .app[data-view="search"] .ch.is-thread .ch-rail.ch-handle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; }
  /* the option pills scroll to their very end: no snapping, a breath after the last */
  .app[data-view="search"] .ch-opts { scroll-snap-type: none; }
  .app[data-view="search"] .ch-opts::after { content: ""; flex: none; width: 16px; }
  /* the cards sit in the middle of the room, fixed */
  .app[data-view="search"] .ch-pop { top: 66px; bottom: calc(57px + 120px + env(safe-area-inset-bottom, 0px)); margin-block: auto; max-height: calc(100dvh - 66px - 177px - env(safe-area-inset-bottom, 0px)); }
  /* 2026-09-15 — centred by transform, not by `height: fit-content` +
     `margin-block: auto` between two pinned edges: WebKit on the tablet did
     not honour that and drew the first card against the composer, then
     "teleported" it once something repainted (chrome_2iXzM9Hqtl). The tap
     outside it is the scrim, which closes it. */
  .app[data-view="search"] .ch-turn.is-taste:not(.is-done) .tc-card {
    position: fixed; left: 12px; right: 12px; top: calc(50% - 30px - env(safe-area-inset-bottom, 0px) / 2); bottom: auto;
    transform: translateY(-50%); z-index: 36; max-height: calc(100dvh - 66px - 177px - env(safe-area-inset-bottom, 0px)); overflow: auto;
    box-shadow: var(--shadow);
  }
  .app[data-view="search"] .ch-turn.is-taste:not(.is-done) .tc-scrim {
    display: block; position: fixed; inset: 0; z-index: 35; background: rgba(20, 12, 28, .18);
  }
}