/* ════════════════════════════════════════════════════════════════════════
   COMPACT SEARCH ENTRY POINT  (search.css)
   The catalog search lives in the TOP-LEFT corner of the left rail, next to
   the brand. At rest it is a quiet magnifier button. On hover / focus / when
   it holds text it expands smoothly into an inline search input that submits
   into the fuller Catalog Agent drawer (aisearch.js).

   Reuses the warm-paper tokens from app.css (--bg*, --b*, --t*, --a, --ag…).
   This file owns ONLY the search entry point; the drawer itself stays in
   app.css. Do not redefine tokens here.
   ════════════════════════════════════════════════════════════════════════ */

/* The host sits at the top of the rail, aligned with the brand. */
.qsearch {
  --qs-h: 40px;              /* collapsed = a 40px square icon button        */
  --qs-w-open: 100%;         /* expanded = fill the rail width                */
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* The expanding shell: a pill that grows from icon-width to full-width. */
.qsearch-shell {
  display: flex;
  align-items: center;
  gap: 6px;
  width: var(--qs-h);                /* collapsed: just the icon              */
  max-width: 100%;
  height: var(--qs-h);
  padding: 0;
  background: var(--bg4);
  border: 1.5px solid var(--b1);
  border-radius: 999px;
  overflow: hidden;
  cursor: text;
  transition:
    width .2s ease-out,
    background .18s ease-out,
    border-color .18s ease-out,
    box-shadow .18s ease-out;
}

/* Open state (hover, focus-within, or holds text). */
.qsearch.is-open .qsearch-shell {
  width: var(--qs-w-open);
  padding: 0 6px 0 0;
  background: var(--bg4);
  border-color: var(--b2);
}
.qsearch.is-open .qsearch-shell:focus-within,
.qsearch-shell:focus-within {
  border-color: var(--a);
  box-shadow: 0 0 0 3px var(--ag);
}

/* The magnifier button — always a real, focusable control. */
.qsearch-btn {
  flex-shrink: 0;
  width: var(--qs-h);
  height: var(--qs-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--t2);
  cursor: pointer;
  transition: color .15s ease-out, background .15s ease-out;
}
.qsearch-btn:hover { color: var(--a); }
.qsearch.is-open .qsearch-btn { color: var(--a); }
.qsearch-btn svg { display: block; width: 18px; height: 18px; }
.qsearch-btn:focus-visible { outline: 2px solid var(--a); outline-offset: -2px; }

/* The inline input — hidden (zero opacity + clipped) when collapsed so it is
   not tabbable-into a visually empty box, revealed on expand. */
.qsearch-field {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--t1);
  outline: none;
  opacity: 0;
  transition: opacity .16s ease-out;
}
.qsearch-field::placeholder { color: var(--t3); }
.qsearch.is-open .qsearch-field { opacity: 1; }
/* When collapsed the field is visually gone; keep it un-interactive. */
.qsearch:not(.is-open) .qsearch-field { pointer-events: none; }

/* The agent affordance: a small "/" kbd + chevron that only reads in once the
   control is open, signalling "press / or Enter to open the full agent". */
.qsearch-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity .16s ease-out, transform .18s ease-out;
  pointer-events: none;
}
.qsearch.is-open .qsearch-agent { opacity: 1; transform: none; }

.qsearch-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  line-height: 1;
  background: var(--bg1);
  border: 1px solid var(--b1);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--t3);
}
.qsearch-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--ad);
  color: var(--a);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  pointer-events: auto;
  transition: background .15s ease-out, transform .15s ease-out;
}
.qsearch-go:hover { background: var(--a); color: #fff; transform: translateY(-1px); }
.qsearch-go:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }

/* A faint orb echo of the agent identity, so the connection to the drawer is
   legible even at the entry point. */
.qsearch-orb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 30%, #ffd2bd, var(--a) 62%, #b23c0a);
  box-shadow: 0 0 0 2px var(--ag);
  opacity: 0;
  transition: opacity .16s ease-out;
}
.qsearch.is-open .qsearch-orb { opacity: 1; }

/* Visually-hidden label for the input (a11y). */
.qsearch-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   TOP-BAR PLACEMENT  (search moved out of the left rail)
   The search now lives on the RIGHT of a slim top bar that spans the main
   content area (to the right of the left rail). At rest it is a quiet magnifier
   square; on hover / focus-within / when it holds text it grows LEFTWARD into a
   fixed-width input. The left rail no longer hosts a search. Alongside it sit
   the Agent button and a user-profile avatar that opens a settings dropdown.

   All of these styles are additive overrides on top of app.css tokens — no
   tokens are redefined here.
   ════════════════════════════════════════════════════════════════════════ */

/* ── the bar itself: app.css declares `.topbar { display:none }` for the old
      mobile-only bar. Promote it to a real, always-on top bar. ───────────── */
.topbar {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 60px;
  flex-shrink: 0;
  padding: 0 clamp(16px, 3vw, 44px);
  background: var(--bg1);
  border-bottom: 1px solid var(--b0);
  position: sticky;
  top: 0;
  z-index: 55;            /* below the rail (60) so the mobile slide-in covers it */
}

/* On desktop the rail already carries the brand + nav, so the top-bar burger
   and compact brand are hidden; the right cluster is the whole point. */
.topbar-burger { display: none !important; }
.topbar-brand { display: none; }
.topbar-spacer { flex: 1; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Agent button in the bar — quiet, paper-toned, with the agent orb. */
.topbar-agent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  background: var(--bg4);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  transition: border-color .15s ease-out, transform .15s ease-out;
}
.topbar-agent:hover { border-color: var(--a); transform: translateY(-1px); }
.topbar-agent:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.topbar-agent .rail-agent-orb { width: 14px; height: 14px; }

/* ── search in the top bar: anchor right, expand LEFTWARD to a fixed width ── */
/* Override the rail-era rule (`--qs-w-open: 100%`, grows to fill the rail). */
.topbar-right .qsearch {
  --qs-w-open: 300px;        /* expanded width inside the bar */
  width: auto;
  justify-content: flex-end;
}
/* Anchor the shell to the right edge so growth pushes the LEFT edge outward,
   not the right — like a real SaaS top-bar search. */
.topbar-right .qsearch-shell {
  margin-left: auto;
  justify-content: flex-end;
}
.topbar-right .qsearch.is-open .qsearch-shell { justify-content: flex-start; }
/* The magnifier button leads when collapsed; once open the input sits left of
   it visually via flex order is unnecessary — keep the icon as the anchor. */

/* ── USER PROFILE AVATAR + SETTINGS DROPDOWN ──────────────────────────────── */
.pm { position: relative; flex-shrink: 0; }

.pm-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--a);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(178,60,10,.3), inset 0 0 0 1.5px rgba(255,255,255,.18);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.pm-avatar:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(232,78,15,.7), inset 0 0 0 1.5px rgba(255,255,255,.22); }
.pm-avatar:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.pm-avatar.is-open { box-shadow: 0 0 0 3px var(--ag), 0 1px 2px rgba(178,60,10,.3); }

/* The dropdown panel — paper surface, restrained ease-out reveal. */
.pm-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  background: var(--bg4);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  box-shadow: 0 14px 40px -16px rgba(20,17,13,.32), 0 2px 8px -4px rgba(20,17,13,.18);
  padding: 6px;
  z-index: 80;
  transform-origin: top right;
  animation: pm-pop .14s ease-out;
}
@keyframes pm-pop { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }

.pm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
}
.pm-head-av {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ad); color: var(--a);
  font-size: 12px; font-weight: 800;
}
.pm-head-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pm-head-id strong { font-size: 13px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-head-id small { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pm-sep { height: 1px; background: var(--b0); margin: 2px 4px 6px; }

.pm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

.pm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
  text-align: left;
  cursor: pointer;
  transition: background .12s ease-out, color .12s ease-out;
}
.pm-item:hover { background: var(--chip); }
.pm-item:focus-visible,
.pm-item:focus { outline: none; background: var(--ad); color: var(--a); }
.pm-item.is-danger { color: var(--red); }
.pm-item.is-danger:hover,
.pm-item.is-danger:focus { background: var(--rd); color: var(--red); }

.pm-item-ico {
  width: 18px; flex-shrink: 0; text-align: center;
  font-size: 14px; color: var(--t3); opacity: .9;
}
.pm-item:focus-visible .pm-item-ico,
.pm-item:focus .pm-item-ico { color: inherit; opacity: 1; }
.pm-item-kbd {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--bg1);
  border: 1px solid var(--b1);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--t3);
}

/* ── reduced motion: no width/opacity tweening; just show/hide ──────────── */
@media (prefers-reduced-motion: reduce) {
  .qsearch-shell,
  .qsearch-field,
  .qsearch-agent,
  .qsearch-orb,
  .qsearch-go,
  .pm-avatar,
  .topbar-agent { transition: none !important; }
  .pm-menu { animation: none !important; }
}

/* ── responsive: tablet / phone ───────────────────────────────────────────
   The left rail becomes a slide-in (app.css handles the rail itself). Here we
   keep the top bar sensible: the burger + compact brand return on the left,
   the search stays a tappable magnifier (it still expands on tap/focus), and
   the avatar stays. Nothing clips; touch targets are >= 44px. ────────────── */
@media (max-width: 860px) {
  .topbar { height: 56px; padding: 0 14px; gap: 8px; }
  .topbar-burger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    padding: 0 10px;
    background: var(--bg4); border: 1px solid var(--b1); border-radius: var(--r);
    font-size: 18px; color: var(--t1); cursor: pointer;
  }
  .topbar-burger:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
  .topbar-brand { display: inline-block; font-weight: 800; color: var(--a); text-decoration: none; font-size: 16px; }

  /* On touch, hover can't expand the search; tapping the icon (focus) still
     opens it. Keep it collapsed at rest but with a 44px tap target, and let it
     expand to fit without overflowing the bar. */
  .topbar-right { gap: 8px; }
  .topbar-right .qsearch { --qs-w-open: min(64vw, 260px); }
  .topbar-right .qsearch-shell { --qs-h: 44px; }
  .qsearch-btn { width: 44px; height: 44px; }

  /* Collapse the Agent button to an orb-only icon to save room. */
  .topbar-agent { padding: 0; width: 44px; height: 44px; min-height: 44px; justify-content: center; gap: 0; }
  .topbar-agent-tx { display: none; }

  .pm-avatar { width: 44px; height: 44px; }
  .pm-menu {
    position: fixed;
    top: 56px; right: 8px; left: auto;
    min-width: 0; width: min(280px, calc(100vw - 16px));
  }
}

/* Very narrow phones: drop the explicit Agent button (search + avatar remain,
   and the Agent is still reachable via the search "go" affordance and "/"). */
@media (max-width: 420px) {
  .topbar-agent { display: none; }
  .topbar-right .qsearch { --qs-w-open: min(70vw, 240px); }
}