@import "./colors_and_type.css";
/* =====================================================================
   SOTI Pulse — Global Search   ·   shared component styles
   Built on the Pulse revamp tokens in colors_and_type.css (Figtree,
   lavender, flat, hairline borders, 16px cards / 8px controls).
   Page-specific layout lives in each mockup's own <style>.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--white); color: var(--fg-1); }
button { font: inherit; cursor: pointer; color: inherit; }
img { display: block; }

/* ---- content-type accent palette (restrained, harmonious) ---------- */
:root {
  --t-help-fg:#0E7CC0;       --t-help-bg:#E8F3FB;
  --t-release-fg:#C2731B;    --t-release-bg:#FaF0e2;
  --t-video-fg:#2E9E6B;      --t-video-bg:#E7F5EE;
  --t-article-fg:#7B54D9;    --t-article-bg:#F1ECFD;
  --t-discussion-fg:#C24A8B; --t-discussion-bg:#FBEDF5;
  --t-marketplace-fg:#0E93A6; --t-marketplace-bg:#E4F4F6;
  --t-compatibility-fg:#1E8E7E; --t-compatibility-bg:#E3F4F1;
}

/* ====================== Navbar ====================== */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: 80px; background: var(--white);
  border-bottom: 1px solid var(--pulse-75);
  display: flex; align-items: center; gap: 32px;
  padding: 0 clamp(24px, 5vw, 96px);
}
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 30px; }
.nav__links { display: flex; gap: 28px; }
.nav__link {
  font: var(--weight-medium) 16px/1.2 var(--font-sans);
  letter-spacing: var(--tracking-tight); color: var(--ink-700);
  text-decoration: none; cursor: pointer; padding: 6px 0;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color var(--dur-med) var(--ease-out);
}
.nav__link:hover { color: var(--ink-900); text-decoration: none; }
.nav__link--active { color: var(--ink-900); font-weight: var(--weight-semibold); border-bottom-color: var(--pulse-300); }
.nav__spacer { flex: 1; }
.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__user { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.nav__avatar {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--pulse-100), var(--pulse-300));
  color: var(--ink-900); font: var(--weight-bold) 14px/1 var(--font-sans);
  display: flex; align-items: center; justify-content: center;
}
.nav__username { font: var(--weight-medium) 15px/1 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink-700); }
.nav .icon { color: var(--ink-400); display: inline-flex; }

/* ====================== Page shell ====================== */
.wrap { max-width: var(--max-content); margin: 0 auto; padding: 0 clamp(24px, 5vw, 96px); }
.page-pad { padding-top: 40px; padding-bottom: 96px; }

/* ====================== Search bar (with scope) ====================== */
.searchbar {
  display: flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 8px 0 18px;
  background: var(--white); border: 1.5px solid var(--ink-200);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.searchbar:focus-within { border-color: var(--pulse-300); box-shadow: var(--shadow-focus); }
.searchbar__icon { color: var(--ink-400); display: inline-flex; flex-shrink: 0; }
.searchbar__input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: var(--weight-regular) 18px/1.4 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink-900);
}
.searchbar__input::placeholder { color: var(--ink-400); }
.searchbar__mic { width: 40px; height: 40px; border: 0; background: transparent; border-radius: var(--r-md); color: var(--ink-400); display: flex; align-items: center; justify-content: center; }
.searchbar__mic:hover { background: var(--ink-100); color: var(--ink-700); }
.searchbar__go {
  height: 44px; padding: 0 22px; border: 0; border-radius: var(--r-md);
  background: var(--pulse-300); color: var(--ink-900);
  font: var(--weight-semibold) 15px/1 var(--font-sans); letter-spacing: var(--tracking-tight);
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  transition: background var(--dur-med) var(--ease-out);
}
.searchbar__go:hover { background: var(--pulse-400); }

/* scope selector living inside the input */
.scope { position: relative; flex-shrink: 0; }
.scope__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  background: var(--pulse-50); border: 1px solid var(--pulse-75); border-radius: var(--r-md);
  font: var(--weight-semibold) 14px/1 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink-800);
  transition: background var(--dur-med) var(--ease-out);
}
.scope__btn:hover { background: var(--pulse-75); }
.scope__btn .icon { color: var(--pulse-400); display: inline-flex; }
.scope__btn .chev { color: var(--ink-400); display: inline-flex; transition: transform var(--dur-med) var(--ease-out); }
.scope.open .scope__btn .chev { transform: rotate(180deg); }
.scope__divider { width: 1px; height: 28px; background: var(--ink-200); flex-shrink: 0; }
.scope__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  min-width: 232px; background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 6px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.scope.open .scope__menu { opacity: 1; transform: none; pointer-events: auto; }
.scope__opt {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 10px; border: 0; background: transparent;
  border-radius: var(--r-md); text-align: left; font: var(--weight-medium) 14px/1.3 var(--font-sans);
  letter-spacing: var(--tracking-tight); color: var(--ink-800);
}
.scope__opt small { display: block; color: var(--ink-400); font-weight: var(--weight-regular); font-size: 12px; }
.scope__opt:hover { background: var(--ink-100); }
.scope__opt .icon { color: var(--ink-400); display: inline-flex; flex-shrink: 0; }
.scope__opt--on { background: var(--pulse-50); }
.scope__opt--on .icon { color: var(--pulse-400); }
.scope__opt .tick { margin-left: auto; color: var(--pulse-400); display: none; }
.scope__opt--on .tick { display: inline-flex; }

/* ====================== Chips ====================== */
.chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chips__label { font: var(--weight-semibold) 11px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-right: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--ink-200); background: var(--white);
  font: var(--weight-medium) 14px/1 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink-700);
  transition: all var(--dur-med) var(--ease-out); white-space: nowrap;
}
.chip:hover { border-color: var(--pulse-200); background: var(--pulse-50); }
.chip img { width: 18px; height: 18px; }
.chip .icon { display: inline-flex; }
.chip__count { color: var(--ink-400); font-weight: var(--weight-regular); }
.chip--on { border-color: var(--pulse-300); background: var(--pulse-50); color: var(--ink-900); font-weight: var(--weight-semibold); }
.chip--on .chip__count { color: var(--pulse-400); }
.chip--dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--dot, var(--ink-300)); }

/* ====================== Results header + view toggle ====================== */
.results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.results-count { font: var(--weight-bold) 28px/1.2 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink-900); }
.results-count em { font-style: normal; color: var(--ink-400); font-weight: var(--weight-medium); }
.results-count b { color: var(--ink-900); }
.results-tools { display: flex; align-items: center; gap: 12px; }
.sortby { display: inline-flex; align-items: center; gap: 6px; font: var(--weight-medium) 14px/1 var(--font-sans); color: var(--ink-500); }
.sortby select { border: 1px solid var(--ink-200); border-radius: var(--r-md); height: 36px; padding: 0 8px; background: var(--white); color: var(--ink-800); font: var(--weight-medium) 14px/1 var(--font-sans); }

.viewtoggle { display: inline-flex; background: var(--ink-100); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.viewtoggle button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; background: transparent;
  border-radius: 6px; font: var(--weight-medium) 13px/1 var(--font-sans); color: var(--ink-500);
  transition: all var(--dur-med) var(--ease-out);
}
.viewtoggle button .icon { display: inline-flex; }
.viewtoggle button.on { background: var(--white); color: var(--ink-900); box-shadow: var(--shadow-1); font-weight: var(--weight-semibold); }

/* ====================== Type tile (row/card avatar) ====================== */
.tile {
  width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-bg, var(--ink-100)); color: var(--tile-fg, var(--ink-500));
}
.tile .icon { display: inline-flex; }
.tile--lg { width: 56px; height: 56px; border-radius: var(--r-lg); }
[data-type="help"]       { --tile-bg: var(--t-help-bg);       --tile-fg: var(--t-help-fg); }
[data-type="release"]    { --tile-bg: var(--t-release-bg);    --tile-fg: var(--t-release-fg); }
[data-type="video"]      { --tile-bg: var(--t-video-bg);      --tile-fg: var(--t-video-fg); }
[data-type="article"]    { --tile-bg: var(--t-article-bg);    --tile-fg: var(--t-article-fg); }
[data-type="discussion"] { --tile-bg: var(--t-discussion-bg); --tile-fg: var(--t-discussion-fg); }
[data-type="marketplace"] { --tile-bg: var(--t-marketplace-bg); --tile-fg: var(--t-marketplace-fg); }
[data-type="compatibility"] { --tile-bg: var(--t-compatibility-bg); --tile-fg: var(--t-compatibility-fg); }

/* type pill (small label) */
.typepill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill); font: var(--weight-semibold) 11.5px/1 var(--font-sans); letter-spacing: 0.01em;
  background: var(--tile-bg, var(--ink-100)); color: var(--tile-fg, var(--ink-600));
}
.typepill .icon { display: inline-flex; }
/* The type pill loses its glyph and becomes a text-only chip (designer call). */
.typepill--notile { gap: 0; }

/* Secondary categorization chip (release-note sub-product, or device/OS). Deliberately lighter
   than both the product chip and the type pill: it qualifies the product rather than competing
   with it, so it reads as the third element in the meta row. */
.res-sublabel {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--r-pill); font: var(--weight-medium) 11.5px/1 var(--font-sans);
  background: transparent; color: var(--ink-500); border: 1px solid var(--ink-200);
}

/* ====================== Result ROW ====================== */
.res-list { display: flex; flex-direction: column; }
.res-row {
  display: flex; gap: 16px; padding: 20px 16px; border-radius: var(--r-lg);
  border-bottom: 1px solid var(--ink-200); cursor: pointer; align-items: flex-start;
  transition: background var(--dur-med) var(--ease-out);
}
.res-row:hover { background: var(--ink-050); }
/* Result rows drop the leading .tile. Without it the row is just body + go-arrow,
   so the left padding does the work the tile used to and the body spans the
   reclaimed column. */
.res-row--notile { gap: 0; }
.res-row--notile .res-row__body { flex: 1; }
.res-row__body { flex: 1; min-width: 0; }
.res-row__meta-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.res-row__product { display: inline-flex; align-items: center; gap: 6px; font: var(--weight-semibold) 12px/1 var(--font-sans); color: var(--ink-600); }
.res-row__product img { width: 16px; height: 16px; }
.res-row__title { font: var(--weight-semibold) 19px/1.3 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0 0 6px; }
.res-row:hover .res-row__title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pulse-300); }
.res-row__crumbs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0 0 6px; font: var(--weight-regular) 12.5px/1.3 var(--font-sans); color: var(--ink-400); }
.res-row__crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.res-row__crumb--more { cursor: help; }
.res-row__crumb-sep { color: var(--ink-300); }
.res-row__snippet { font: var(--weight-regular) 14.5px/1.55 var(--font-sans); color: var(--ink-500); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res-row__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.res-row__url { font: var(--weight-regular) 12.5px/1 var(--font-mono); color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.res-row__stats { display: flex; align-items: center; gap: 14px; color: var(--ink-400); }
.res-row__stat { display: inline-flex; align-items: center; gap: 5px; font: var(--weight-medium) 12.5px/1 var(--font-sans); }
.res-row__stat .icon { display: inline-flex; }
.res-row__go { align-self: center; color: var(--ink-300); flex-shrink: 0; opacity: 0; transform: translateX(-4px); transition: all var(--dur-med) var(--ease-out); }
.res-row:hover .res-row__go { opacity: 1; transform: none; color: var(--pulse-400); }

.badge-solved { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--t-video-bg); color: var(--t-video-fg); font: var(--weight-semibold) 11.5px/1 var(--font-sans); }
.badge-solved .icon { display: inline-flex; }

/* ====================== Result CARD ====================== */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.res-card {
  border: 1px solid var(--ink-200); border-radius: var(--r-xl); background: var(--white);
  padding: 18px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; min-width: 0;
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.res-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--pulse-200); }
.res-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.res-card__thumb { width: 100%; aspect-ratio: 16/10; border-radius: var(--r-md); background: var(--pulse-50); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.res-card__thumb .tile { width: 64px; height: 64px; border-radius: var(--r-lg); }
.res-card__thumb--media { position: relative; }
.res-card__play { position: absolute; width: 52px; height: 52px; border-radius: 999px; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; color: var(--ink-900); box-shadow: var(--shadow-2); }
.res-card__dur { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(17,17,37,0.82); color: #fff; font: var(--weight-medium) 11px/1 var(--font-sans); }
.res-card__title { font: var(--weight-bold) 17px/1.3 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res-card__snippet { font: var(--weight-regular) 13px/1.5 var(--font-sans); color: var(--ink-500); margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.res-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.res-card__product { display: inline-flex; align-items: center; gap: 6px; font: var(--weight-medium) 12px/1 var(--font-sans); color: var(--ink-500); }
.res-card__product img { width: 16px; height: 16px; }
.res-card__vendor { font: var(--weight-regular) 12px/1.4 var(--font-sans); color: var(--ink-400); }

/* ====================== AI answer card ====================== */
.ai-card {
  border: 1px solid var(--pulse-75); border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--pulse-50), #FBFAFF);
  padding: 24px; position: relative; overflow: hidden;
}
.ai-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ai-card__spark { width: 30px; height: 30px; flex-shrink: 0; }
.ai-card__label { font: var(--weight-bold) 16px/1 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink-900); }
.ai-card__sub { font: var(--weight-medium) 12.5px/1 var(--font-sans); color: var(--pulse-400); margin-top: 3px; }
.ai-card__beta { margin-left: auto; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--pulse-75); color: var(--pulse-400); font: var(--weight-semibold) 10.5px/22px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.ai-card__body { font: var(--weight-regular) 15px/1.6 var(--font-sans); color: var(--ink-800); letter-spacing: var(--tracking-tight); }
.ai-card__body p { margin: 0 0 10px; }
.ai-card__body ul { margin: 0 0 10px; padding-left: 20px; }
.ai-card__body li { margin: 4px 0; }
.ai-card__body strong { color: var(--ink-900); font-weight: var(--weight-semibold); }
.ai-card__body em { font-style: normal; color: var(--ink-700); font-weight: var(--weight-medium); }
.cite { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin: 0 1px; border-radius: 5px; background: var(--pulse-200); color: var(--ink-900); font: var(--weight-bold) 10.5px/1 var(--font-sans); vertical-align: super; font-size: 9.5px; cursor: pointer; }
.cite:hover { background: var(--pulse-300); }
.ai-card__sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pulse-75); }
.ai-src { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--pulse-75); font: var(--weight-medium) 12.5px/1 var(--font-sans); color: var(--ink-700); max-width: 320px; }
.ai-src__n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: var(--pulse-100); color: var(--ink-900); font: var(--weight-bold) 11px/1 var(--font-sans); flex-shrink: 0; }
.ai-src__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-src:hover { border-color: var(--pulse-300); background: var(--pulse-50); }
.ai-card__actions { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.ai-act { width: 34px; height: 34px; border-radius: var(--r-md); border: 0; background: transparent; color: var(--ink-400); display: flex; align-items: center; justify-content: center; transition: all var(--dur-med) var(--ease-out); }
.ai-act:hover { background: var(--white); color: var(--ink-700); }
.ai-act.on { color: var(--pulse-500); background: var(--white); }
.ai-card__ask { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--pulse-300); background: var(--white); color: var(--ink-900); font: var(--weight-semibold) 13.5px/1 var(--font-sans); }
.ai-card__ask:hover { background: var(--pulse-50); }
.ai-card__ask img { width: 18px; height: 18px; }
.caret { display: inline-block; width: 8px; height: 16px; background: var(--pulse-400); border-radius: 2px; margin-left: 2px; vertical-align: text-bottom; animation: blink 1s steps(2) infinite; }
@keyframes blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

/* follow-ups */
.followups { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.followup { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--ink-200); background: var(--white); font: var(--weight-medium) 13px/1 var(--font-sans); color: var(--ink-700); }
.followup:hover { border-color: var(--pulse-200); background: var(--pulse-50); }
.followup .icon { color: var(--pulse-400); display: inline-flex; }

/* ---- collapsed AI trigger (button treatment) ---- */
.ai-trigger {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; border: 1px dashed var(--pulse-200); border-radius: var(--r-xl);
  background: var(--pulse-50); text-align: left;
  transition: all var(--dur-med) var(--ease-out);
}
.ai-trigger:hover { background: var(--pulse-75); border-color: var(--pulse-300); }
.ai-trigger img { width: 28px; height: 28px; flex-shrink: 0; }
.ai-trigger__txt { flex: 1; }
.ai-trigger__t { font: var(--weight-semibold) 15px/1.3 var(--font-sans); color: var(--ink-900); letter-spacing: var(--tracking-tight); }
.ai-trigger__s { font: var(--weight-regular) 13px/1.4 var(--font-sans); color: var(--ink-500); margin-top: 2px; }
.ai-trigger__cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--r-md); background: var(--pulse-300); color: var(--ink-900); font: var(--weight-semibold) 14px/1 var(--font-sans); flex-shrink: 0; }

/* ====================== Buttons ====================== */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: var(--r-md); border: 1px solid var(--ink-900);
  background: transparent; color: var(--ink-900); font: var(--weight-medium) 16px/1 var(--font-sans);
  letter-spacing: var(--tracking-tight); transition: all var(--dur-med) var(--ease-out);
}
.btn-secondary:hover { background: var(--ink-900); color: var(--white); }
.pager { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 0 8px; }
.pager__controls { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.pager__page, .pager__step {
  min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--ink-200); border-radius: var(--r-md);
  background: var(--white); color: var(--ink-800); font: var(--weight-medium) 14px/1 var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-med) var(--ease-out);
}
.pager__page:hover:not(.pager__page--on), .pager__step:hover:not([disabled]) { background: var(--pulse-50); border-color: var(--pulse-300); color: var(--ink-900); }
.pager__page--on { background: var(--pulse-300); border-color: var(--pulse-300); color: var(--ink-900); font-weight: var(--weight-semibold); }
.pager__step[disabled] { opacity: 0.4; }
.pager__ellipsis { min-width: 24px; text-align: center; color: var(--ink-400); font: var(--weight-medium) 14px/1 var(--font-sans); }
.pager__total { font: var(--weight-regular) 13px/1 var(--font-sans); color: var(--ink-400); }

/* ====================== Skeleton (loading) ====================== */
.skel { background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-050) 37%, var(--ink-100) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skrow { display: flex; gap: 0; padding: 20px 16px; border-bottom: 1px solid var(--ink-200); }
.skrow__body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.searching { display: inline-flex; align-items: center; gap: 12px; padding: 6px 0 22px; font: var(--weight-medium) 15px/1 var(--font-sans); color: var(--ink-500); }
.searching img { width: 24px; height: 24px; animation: pulse-spark 1.4s ease infinite; }
@keyframes pulse-spark { 0%,100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--pulse-300); animation: dot 1.2s ease infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* ====================== Empty / pre-search ====================== */
.empty { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; text-align: center; }
.empty__spark { width: 52px; height: 52px; margin: 0 auto 20px; }
.empty__title { font: var(--weight-bold) 40px/1.15 var(--font-sans); letter-spacing: var(--tracking-extra); color: var(--ink-900); margin: 0 0 12px; }
.empty__sub { font: var(--weight-regular) 17px/1.5 var(--font-sans); color: var(--ink-500); margin: 0 0 28px; }
.empty__section { text-align: left; margin-top: 32px; }
.empty__label { font: var(--weight-semibold) 11px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.sugg { display: flex; flex-wrap: wrap; gap: 10px; }
.sugg__item { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--ink-200); background: var(--white); font: var(--weight-medium) 14px/1 var(--font-sans); color: var(--ink-700); }
.sugg__item:hover { border-color: var(--pulse-200); background: var(--pulse-50); }
.sugg__item .icon { color: var(--ink-400); display: inline-flex; }

/* browse-by-product tiles for empty state */
.browse { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.browse__tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: var(--white); transition: all var(--dur-med) var(--ease-out); }
.browse__tile:hover { border-color: var(--pulse-200); background: var(--pulse-50); transform: translateY(-2px); }
.browse__tile img { width: 40px; height: 40px; }
.browse__tile span { font: var(--weight-semibold) 13px/1 var(--font-sans); color: var(--ink-800); }

/* ====================== Utilities ======================
   Scoped to the search root on purpose. search.css is loaded inside the shared
   MasterPage body, AFTER Tailwind's app.css, so an unscoped `.hidden` with
   !important outranked every `hidden md:block`-style utility on the page --
   including the desktop nav link column's `hidden xl:inline-block`, which is why
   the nav links vanished on /search-next and nowhere else. */
.search-next-root .hidden { display: none !important; }
.fade-in { animation: fadeIn var(--dur-slow) var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.divider { height: 1px; background: var(--ink-200); border: 0; margin: 0; }

/* slim footer */
.foot { border-top: 1px solid var(--pulse-75); padding: 28px 0; margin-top: 40px; }
.foot__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot__c { font: var(--weight-regular) 12.5px/1.5 var(--font-sans); color: var(--ink-400); }
.foot__links { display: flex; gap: 20px; }
.foot__links a { font: var(--weight-medium) 12.5px/1 var(--font-sans); color: var(--ink-500); text-decoration: none; }
.foot__links a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }

.m-toolbar { display: none; }

@media (max-width: 900px) {
  .res-grid { grid-template-columns: repeat(2, 1fr); }
  .browse { grid-template-columns: repeat(3, 1fr); }
  .nav__links { display: none; }
  .m-toolbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; background: var(--white);
    border-bottom: 1px solid var(--pulse-75);
  }
  .m-toolbar .results-count { font: var(--weight-regular) 13px/1 var(--font-sans); color: var(--ink-500); }
  .m-toolbar .results-count b { color: var(--ink-900); font-size: 14px; }
  .m-toolbar .results-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .m-toolbar__filters {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
    border-radius: var(--r-pill); border: 1.5px solid var(--pulse-300);
    background: var(--pulse-50); color: var(--ink-900);
    font: var(--weight-semibold) 13px/1 var(--font-sans);
  }
  .m-toolbar__badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
    background: var(--pulse-300); color: var(--ink-900);
    font: var(--weight-bold) 11px/18px var(--font-sans); text-align: center;
  }
  .results-head { display: none; }
  ai-widget { display: none; }
}
@media (max-width: 620px) {
  .res-grid { grid-template-columns: 1fr; }
  .searchbar__go span { display: none; }
}

.search-notice { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); background: var(--warning-bg, #fff7e6); color: var(--ink-700); font: var(--weight-medium) 13px/1.4 var(--font-sans); margin-bottom: 6px; }
.search-notice .icon, .search-notice svg { flex-shrink: 0; }

.m1-searchband { padding-top: 40px; max-width: 87.625rem; margin-inline: auto; padding-left: clamp(24px, 4vw, 72px); padding-right: clamp(24px, 4vw, 72px); }
.m1-searchband .searchbar { max-width: 900px; margin: 0 auto; }
.m1-layout { display: grid; grid-template-columns: 268px 1fr; gap: 44px; align-items: start; margin-top: 30px; }
.rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 28px; }
.rail__head { display: flex; align-items: center; justify-content: space-between; }
.rail__title { font: var(--weight-bold) 20px/1 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink-900); }
.rail__clear { font: var(--weight-semibold) 13px/1 var(--font-sans); color: var(--pulse-500); background: none; border: 0; padding: 4px; }
.rail__clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.rail__label { font: var(--weight-semibold) 11px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 10px; }
.filt { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: var(--r-md); cursor: pointer; position: relative; }
.filt:hover { background: var(--ink-050); }
.filt input { position: absolute; opacity: 0; width: 0; height: 0; }
.filt__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ink-300); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s var(--ease-out); color: #fff; }
.filt input:checked + .filt__box { background: var(--pulse-300); border-color: var(--pulse-300); }
.filt input:focus-visible + .filt__box { outline: 2px solid var(--pulse-300); outline-offset: 2px; }
.filt__box svg { opacity: 0; transition: opacity .12s; }
.filt input:checked + .filt__box svg { opacity: 1; }
.filt__ic { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--tile-bg, var(--ink-100)); color: var(--tile-fg, var(--ink-500)); flex-shrink: 0; }
.filt__ic img { width: 18px; height: 18px; }
.filt__label { flex: 1; font: var(--weight-medium) 14px/1.2 var(--font-sans); color: var(--ink-800); letter-spacing: var(--tracking-tight); }
.filt__count { font: var(--weight-medium) 12px/1 var(--font-sans); color: var(--ink-400); }
/* Rail rows drop the coloured .filt__ic tile (designer call). The base .filt gap
   of 11px was tuned for a 27px tile sitting between the checkbox and the label;
   with no tile the label crowds the box, so widen it slightly. */
.filt--notile { gap: 13px; }
.filt--zero { opacity: .38; }
.filt--zero:hover { background: none; }

/* ---- per-type filter sections (Search:Frontend:TypeFilterSections) ---- */
/* Section wrapper — matches .rail__group rhythm, adds a divider + header. */
.rail__sec { border-top: 1px solid var(--ink-200); padding-top: 18px; }
.rail__sechead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rail__sectitle { font: var(--weight-semibold) 11px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); }
.rail__secbadge { font: var(--weight-bold) 10px/1 var(--font-sans); background: var(--pulse-300); color: #fff; border-radius: 100px; min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.rail__sechint { font: var(--weight-regular) 12px/1.5 var(--font-sans); color: var(--ink-400); background: var(--ink-050); border: 1px dashed var(--ink-200); border-radius: var(--r-md); padding: 10px 12px; margin-top: 6px; }
.rail__sechint b { color: var(--ink-600); font-weight: var(--weight-semibold); }

/* Collapsible group header. */
.fgrp__btn { border: 0; background: none; width: 100%; display: flex; align-items: center; gap: 7px; padding: 8px; border-radius: var(--r-md); cursor: pointer; font: var(--weight-semibold) 11.5px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); text-align: left; }
.fgrp__btn:hover { background: var(--ink-050); color: var(--ink-700); }
.fgrp__caret { display: inline-block; font-size: 13px; color: var(--ink-400); transition: transform .16s var(--ease-out); }
.fgrp__btn[aria-expanded="true"] .fgrp__caret { transform: rotate(90deg); }
.fgrp__n { margin-left: auto; font: var(--weight-medium) 11px/1 var(--font-sans); color: var(--ink-400); letter-spacing: 0; text-transform: none; }
.fgrp__n--on { color: var(--pulse-500); font-weight: var(--weight-bold); }
.fgrp__body { padding: 2px 0 8px; }
.fgrp__body[hidden] { display: none; }

/* Radio variant of the existing .filt row (Videos / Articles / Release notes). */
.filt__box--radio { border-radius: 50%; }

/* Native select for Community device/OS + Marketplace sub-category. */
.fsel { width: 100%; height: 36px; border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: 0 10px; font: var(--weight-medium) 13.5px/1 var(--font-sans); color: var(--ink-800); background: var(--white); }
.fsel:focus { outline: 2px solid var(--pulse-200); outline-offset: -1px; }

/* Solved / Unanswered segmented control. */
.fseg { display: flex; border: 1px solid var(--ink-200); border-radius: var(--r-md); overflow: hidden; margin: 2px 0 4px; }
.fseg__b { flex: 1; border: 0; background: var(--white); padding: 9px 6px; font: var(--weight-semibold) 12.5px/1 var(--font-sans); color: var(--ink-600); cursor: pointer; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.fseg__b + .fseg__b { border-left: 1px solid var(--ink-200); }
.fseg__b:hover { background: var(--ink-050); }
.fseg__b--on { background: var(--pulse-50); color: var(--pulse-500); }
.fseg__n { font: var(--weight-medium) 10.5px/1 var(--font-sans); opacity: .75; }

/* Marketplace parent-category tabs. */
.ftabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 4px; }
.ftab { border: 1px solid var(--ink-200); background: var(--white); border-radius: var(--r-md); padding: 6px 9px; font: var(--weight-medium) 12.5px/1 var(--font-sans); color: var(--ink-700); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.ftab:hover { border-color: var(--pulse-200); }
.ftab--on { background: var(--pulse-50); border-color: var(--pulse-300); color: var(--pulse-500); font-weight: var(--weight-bold); }
.ftab__n { font-size: 10.5px; opacity: .7; }

/* Popular Tags cloud. */
.ftags { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
.ftag { border: 1px solid var(--ink-200); background: var(--white); border-radius: 100px; padding: 5px 11px; font: var(--weight-medium) 12.5px/1 var(--font-sans); color: var(--ink-700); cursor: pointer; }
.ftag:hover { border-color: var(--pulse-200); color: var(--pulse-500); }
.ftag--on { background: var(--pulse-50); border-color: var(--pulse-300); color: var(--pulse-500); font-weight: var(--weight-semibold); }

.fmore { border: 0; background: none; color: var(--pulse-500); font: var(--weight-semibold) 12px/1 var(--font-sans); padding: 6px 8px; cursor: pointer; }
.fmore:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Active-filter chips above the results list. */
.fchips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 11px; border-radius: 100px; font: var(--weight-medium) 12.5px/1 var(--font-sans); border: 1px solid var(--pulse-200); background: var(--pulse-50); color: var(--pulse-500); cursor: pointer; }
.fchip:hover { background: var(--pulse-100); }
.fchip__x { font-size: 15px; opacity: .65; line-height: 1; padding: 0 3px; }
.fchip--clear { border-style: dashed; background: none; }
.m1-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.ai-collapse { position: absolute; top: 18px; right: 20px; z-index: 2; height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: var(--r-md); border: 1px solid var(--pulse-75); background: var(--white); color: var(--ink-600); font: var(--weight-semibold) 12.5px/1 var(--font-sans); }
.ai-collapse:hover { background: var(--pulse-50); color: var(--ink-900); }
.ai-collapse .icon { display: inline-flex; }
.m1-searchband .ai-card__beta { display: none; }
.ai-card--slim { padding: 14px 128px 14px 20px; cursor: pointer; }
.ai-card--slim .ai-card__head { margin: 0; }
.ai-card--slim .ai-collapse { top: 50%; transform: translateY(-50%); }
.ai-card--slim[role="status"] { cursor: default; }
.ai-signin { padding: 0; border: 0; background: none; color: var(--pulse-500); font: inherit; font-weight: var(--weight-semibold); text-decoration: underline; cursor: pointer; }
.ai-signin:hover { color: var(--ink-900); }
.search-next-root :focus-visible { outline: 2px solid var(--pulse-300); outline-offset: 2px; border-radius: var(--r-sm); }
@media (max-width: 900px) { .m1-layout { grid-template-columns: 1fr; } .rail { position: static; } }

/* ====================== Dark mode ====================== */
html.dark {
  --white:   #1B2027;
  --ink-900: #F2F5F9;
  --ink-800: #E4E9F0;
  --ink-700: #C5CDD8;
  --ink-600: #9AA4B2;
  --ink-500: #828D9C;
  --ink-400: #6B7585;
  --ink-300: #4A5260;
  --ink-200: #2C333D;
  --ink-100: #1F252D;
  --ink-050: #1C222A;
  --pulse-50:  #182A40;
  --pulse-75:  #2A405F;
  --pulse-100: #2A405F;
  --pulse-300: #387FE3;
  --pulse-400: #2362BA;
  --pulse-500: #6CA2EB;
  --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.45);
  --shadow-2: 0 6px 18px -4px rgba(0,0,0,0.55);
  --shadow-3: 0 12px 30px 4px rgba(0,0,0,0.6);
  --shadow-focus: 0 0 0 3px rgba(56,127,227,0.40);
}

html.dark .search-next-root { background: var(--white); }
html.dark .ai-card { background: linear-gradient(180deg, var(--pulse-50), var(--ink-050)); }
html.dark .ai-card__beta,
html.dark .ai-src,
html.dark .ai-collapse { background: var(--white); }

/* ====================== AI overview loading/reveal animations ====================== */
.ai-card {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.ai-card--thinking {
  max-height: 320px;
}

.ai-card--leaving {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.ai-card__spark--pulse {
  animation: ai-spark-pulse 1.4s ease-in-out infinite;
}

@keyframes ai-spark-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.9); }
}

.ai-card__body--skeleton .skel {
  animation: ai-shimmer 1.2s linear infinite;
}

@keyframes ai-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.ai-card__sources .ai-src,
.ai-card .followups .followup {
  animation: ai-fade-in 0.3s ease both;
}

.ai-card__sources .ai-src:nth-child(2) { animation-delay: 0.05s; }
.ai-card__sources .ai-src:nth-child(3) { animation-delay: 0.1s; }
.ai-card__sources .ai-src:nth-child(4) { animation-delay: 0.15s; }

@keyframes ai-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-card,
  .ai-card--thinking,
  .ai-card--leaving,
  .ai-card__spark--pulse,
  .ai-card__body--skeleton .skel,
  .ai-card__sources .ai-src,
  .ai-card .followups .followup {
    animation: none !important;
    transition: none !important;
  }
  .msheet { transition: none; }
  #sheet-host .sheet-backdrop { transition: none; }
  .ai-pill--busy svg { animation: none; }
}

/* ====================== Mobile bottom sheets ====================== */
html.sheet-open, html.sheet-open body { overflow: hidden; }
#sheet-host .sheet-backdrop {
  position: fixed; inset: 0; background: rgba(17, 17, 37, 0.42); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
}
#sheet-host.open .sheet-backdrop { opacity: 1; pointer-events: auto; }
.msheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--white); border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(17, 17, 37, 0.22);
  transform: translateY(105%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; flex-direction: column; max-height: 86dvh;
}
.msheet[hidden] { display: none; }
.msheet.on { transform: translateY(0); }
.msheet__grip { padding: 10px 0 4px; display: flex; justify-content: center; flex-shrink: 0; touch-action: none; }
.msheet__grip::before { content: ""; width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--pulse-100); }
.msheet__head { display: flex; align-items: center; gap: 10px; padding: 4px 18px 12px; border-bottom: 1px solid var(--pulse-75); flex-shrink: 0; }
.msheet__title { font: var(--weight-bold) 17px/1.2 var(--font-sans); margin: 0; }
.msheet__close { margin-left: auto; color: var(--ink-400); display: flex; padding: 6px; background: none; border: 0; }
.msheet__body { flex: 1; overflow-y: auto; padding: 6px 18px 12px; overscroll-behavior: contain; }
.msheet__foot {
  flex-shrink: 0; display: flex; gap: 10px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--pulse-75); background: var(--white);
}
.msheet__clear { flex: 1; height: 46px; border-radius: var(--r-md); border: 1.5px solid var(--pulse-100); background: var(--white); font: var(--weight-semibold) 15px/1 var(--font-sans); color: var(--ink-700); }
.msheet__apply { flex: 2; height: 46px; border-radius: var(--r-md); border: 0; background: var(--pulse-300); color: var(--ink-900); font: var(--weight-bold) 15px/1 var(--font-sans); }
#dock-body .rail { position: static; width: auto; }

/* ====================== Floating AI pill ====================== */
.ai-pill {
  position: fixed; right: 14px; bottom: 24px; z-index: 55;
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 12px;
  border-radius: var(--r-pill); border: 0;
  background: var(--pulse-300); color: var(--ink-900);
  font: var(--weight-bold) 14px/1 var(--font-sans);
  box-shadow: 0 8px 28px rgba(17, 17, 37, 0.18); touch-action: none;
}
.ai-pill[hidden] { display: none; }
.ai-pill--quota { background: var(--pulse-100); color: var(--ink-500); }
.ai-pill--busy .ai-pill__label::after { content: "…"; }
.ai-pill--busy svg { animation: aiPillPulse 1.2s ease-in-out infinite; }
.ai-pill--unread::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 12px; height: 12px;
  border-radius: 50%; background: #FF7A45; border: 2px solid var(--white);
}
@keyframes aiPillPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.msheet__body--ai { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); }