/* ============================================================================
   SmartBot page — what is true of this page only
   ---------------------------------------------------------------------------
   The nine-section rhythm comes from product-page.css, shared with
   SmartComply. Everything here is the tabbed product preview the owner's
   document asks for: a tablist, a chat exchange, a search result list and the
   small insight panels.

   All of it is built from real elements rather than pictures, because the
   document's page-wide guidance says so: "Use real text, accessible controls
   and actual product examples rather than flattening the page into images."
   That is also why the type here sits at the site's own scale instead of the
   doll's-house sizes a screenshot would have used — it is text a visitor can
   select, zoom and have read aloud.
   ========================================================================= */

/* --- The banner's field ----------------------------------------------------------
   recLite's banner wash, at the owner's request: the page grey with the site's
   own two blooms over it — signal yellow out of the top left, brand blue to
   the upper right.

   The shared banner is white because SmartComply's is a photograph that brings
   its own pale backdrop, and a tint behind it would outline the picture as a
   box. This banner is built rather than photographed, so it has no edge to
   give away and the wash has something to sit under. SmartComply keeps white.

   Two classes, so it beats `.sc-hero` whichever order the stylesheets land in.
   ========================================================================= */


/* --- Tabs --------------------------------------------------------------------- */

.sb-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
.sb-tabs--center { width: max-content; max-width: 100%; margin: 0.9rem auto 1.25rem; }

.sb-tab {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out-soft), color var(--d-fast) var(--ease-out-soft);
}
.sb-tab:hover { background: var(--blue-100); }
.sb-tab.is-on { background: var(--blue-500); color: #fff; }
.sb-tab.is-on:hover { background: var(--blue-600); }

/* --- The banner artwork ----------------------------------------------------------
   The picture carries its own card, shadow and transparent ground, so nothing
   here frames it — a border or a panel behind it would draw a second edge. */
.sb-hero__art { display: block; width: 100%; height: auto; }

.sb-panel {
  padding: clamp(0.85rem, 0.7rem + 0.6vw, 1.1rem);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}
.sb-panel__k {
  margin: 0 0 0.6rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
}

/* --- A chat exchange ------------------------------------------------------------ */

/* A column rather than a grid, so the follow-up field can be pushed to the
   foot of the card inside a stage — which is where a chat's input belongs, and
   which spends the height left over when the search beside it runs longer. */
.sb-chat { display: flex; flex-direction: column; gap: 0.5rem; }
.sb-chat__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
}
.sb-chat__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--r-sm);
  background: var(--blue-500);
  color: #fff;
}

/* The resident's turn sits to the right and the answer to the left, so the two
   read as an exchange without needing avatars on every line. */
.sb-chat__q,
.sb-chat__a {
  margin: 0;
  max-width: 88%;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.sb-chat__q {
  align-self: flex-end;
  background: var(--blue-500);
  color: #fff;
}
.sb-chat__a {
  align-self: flex-start;
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  color: var(--text-secondary);
}

.sb-chat__label {
  margin: 0.35rem 0 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.sb-chat__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.3rem 0 0;
  padding: 0.55rem 0.55rem 0.55rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.sb-chat__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-pill);
  background: var(--blue-500);
  color: #fff;
}

/* --- Chips ------------------------------------------------------------------------ */

.sb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}
.sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--blue-700);
}
.sb-chip--source { background: var(--white); box-shadow: inset 0 0 0 1px var(--border); }
/* A gap is a prompt to act, not a failure, so this is the warm accent rather
   than an error red. */
.sb-chip--warn { background: #FDF6E0; box-shadow: inset 0 0 0 1px #EEDFA8; color: #7A5A05; }

/* --- Search ------------------------------------------------------------------------ */

.sb-search { display: grid; gap: 0.6rem; }

/* The search field, with its button on the end as the design has it. */
.sb-search__box {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.4rem 0.4rem 0.4rem 0.85rem;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}
.sb-search__box > svg { flex: none; color: var(--blue-600); }
.sb-search__q { flex: 1 1 auto; min-width: 0; }
.sb-search__go {
  display: grid;
  place-items: center;
  flex: none;
  align-self: stretch;
  width: 2.4rem;
  border-radius: var(--r-sm);
  background: var(--blue-500);
  color: #fff;
}

.sb-search__answer {
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-md);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
.sb-search__answer-k {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--blue-600);
}
.sb-search__answer-d {
  margin: 0.3rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.sb-results { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.sb-result {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.65rem 0.8rem;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}
.sb-result__icon { flex: none; color: var(--blue-600); }
.sb-result__text { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
/* Underlined as the design shows them — these read as the links the answer
   points back to, even though nothing here is clickable. */
.sb-result__k {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.sb-result__d { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); }
.sb-result__go { flex: none; color: var(--text-muted); }

/* --- The demonstration pair -------------------------------------------------------------
   Both ways of asking, side by side rather than tabbed: the design puts them
   together because the point of the section is that one question has two
   routes to the same answer, which a tab hides by definition. They stack in
   reading order below the two-column breakpoint.                             */

.sb-pair__lead {
  margin: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) 0 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  color: var(--blue-700);
}
.sb-pair {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  margin-top: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
}
@media (min-width: 900px) { .sb-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sb-pair__side { display: flex; flex-direction: column; min-width: 0; }
.sb-pair__k {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 700;
  text-align: center;
  color: var(--blue-700);
}

/* On the yellow band, so each stage is a white card the way the questions and
   the cards elsewhere on the page are. */
.sb-stage {
  flex: 1 1 auto;
  padding: clamp(0.9rem, 0.75rem + 0.7vw, 1.2rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}
.sb-stage .sb-chat { height: 100%; }
.sb-stage .sb-chat__input { margin-top: auto; }

/* --- The dark outcomes band ------------------------------------------------------------
   The previews sit inside the translucent panels there, so their own grounds
   and rules have to come up off the navy rather than down onto white.        */

/* The owner's tile, in place of the drawn glyph tile: it brings its own white
   ground and rounded corners, so nothing is drawn behind it. */
.sb-out__icon { display: block; flex: none; width: 3rem; height: 3rem; }

/* Same idea beside each "what to explore" point: the icon carries its circle,
   so it replaces the tile rather than sitting in one. */
.sb-eval__icon { display: block; flex: none; width: 3.25rem; height: 3.25rem; margin: -0.15rem 0 0; }

/* Both panels to one height, as the design has them. The shared stylesheet
   lets each take its own height — which is right on SmartComply, where a
   difference means a preview would otherwise hang under a hole. Here the two
   lists are the same length and the previews differ only at the foot, so a
   common height reads as a pair and an uneven one reads as a mistake.

   The previews stay put rather than being pushed to the bottom: the leftover
   height belongs at the foot of the shorter card, not as a gap above its
   preview. */
@media (min-width: 900px) {
  .sc-out .sc-out__grid { align-items: stretch; }
  .sc-out .sc-out__preview { margin-top: 0; }
}

.sc-out .sb-panel {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.sc-out .sb-panel__k { color: #fff; }
.sc-out .sb-chat__label { color: rgba(255, 255, 255, .72); }
.sc-out .sb-chat__a {
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: #E4EDFC;
}
.sc-out .sb-chip {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  color: #fff;
}
.sc-out .sb-chip--warn {
  background: rgba(245, 245, 114, .18);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 114, .45);
  color: var(--yellow-300);
}

@media (prefers-reduced-motion: reduce) {
  .sb-tab { transition: none; }
}