/* Onboarding (quick_setup) design system - Screens 1 & 2.
 *
 * Faithful to the locked Claude Design canvas
 * (docs/design/quick-setup-create-account/*.dc.html) and the landing "sans"
 * theme: DM Sans, primary #6658ea, amber #f5c070, navy #1b1642, ground #f3f8ff.
 * Every artboard hex is mapped once to an --ob-* token here. Readable-copy
 * greys use the D15 contrast fix (#9aa1ab -> #6b7280 / #565d68); the lighter
 * #9aa1ab is kept only for placeholders and decorative input glyphs.
 *
 * Every class is prefixed `ob-`; the only Bootstrap classes used on onboarding
 * pages are `visually-hidden` and `alert`. --bs-font-sans-serif is overridden so
 * any Bootstrap component that does render inherits DM Sans.
 */

:root {
  --ob-primary: #6658ea;
  --ob-primary-hover: #5546d6;
  --ob-primary-ring: rgba(102, 88, 234, 0.15);
  --ob-amber: #f5c070;
  --ob-navy: #1b1642;
  --ob-navy-card: #251e58;
  --ob-ground: #f3f8ff;
  --ob-white: #ffffff;

  --ob-ink: #17181c;         /* headings + input text */
  --ob-ink-soft: #33383f;    /* subhead */
  --ob-muted: #6b7280;       /* readable secondary copy (D15) */
  --ob-muted-strong: #565d68;/* CTA sublabel / terms (D15) */
  --ob-placeholder: #9aa1ab; /* placeholders + input glyphs only */
  --ob-link: #667085;        /* header "Log in" */

  --ob-input-border: #d5d9e0;
  --ob-card-border: #e9ecf2;

  --ob-danger: #d64545;      /* genuine validation error (red) */
  --ob-warn: #b7791f;        /* valid-but-attention (amber text on white, AA) */

  --ob-card-shadow: 0 1px 2px rgba(28, 26, 60, 0.06), 0 16px 32px -20px rgba(28, 26, 60, 0.24);
  --ob-btn-shadow: 0 2px 5px rgba(28, 26, 60, 0.14), 0 12px 22px -10px rgba(28, 26, 60, 0.28);

  --bs-font-sans-serif: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- reboot override (kept small; the page is otherwise self-contained) --- */
*, *::before, *::after { box-sizing: border-box; }

body.ob-body {
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  color: var(--ob-ink);
  background-color: var(--ob-ground);
  -webkit-font-smoothing: antialiased;
}

.ob-body a { color: var(--ob-primary); text-decoration: none; }
.ob-body a:hover { color: var(--ob-primary-hover); }

/* --- top-level two-pane shell --- */
.ob-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
}

/* LEFT: the form, on the app ground, vertically centred */
.ob-form-pane {
  display: flex;
  flex-direction: column;
  padding: 30px 60px;
  background-color: var(--ob-ground);
}

.ob-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ob-logo { height: 26px; width: auto; display: block; }
.ob-header-link { color: var(--ob-link); font-weight: 500; font-size: 14.5px; }
.ob-header-link:hover { color: var(--ob-ink); }

.ob-signup-block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
}

.ob-h1 {
  margin: 0 0 12px;
  font-size: 37px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ob-ink);
  text-align: center;
}
.ob-subhead {
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ob-ink-soft);
  font-weight: 600;
  text-align: center;
}

.ob-card {
  background-color: var(--ob-white);
  border: 1px solid var(--ob-card-border);
  border-radius: 16px;
  box-shadow: var(--ob-card-shadow);
  padding: 28px 30px;
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
}
.ob-form { display: flex; flex-direction: column; gap: 19px; }

.ob-field { display: flex; flex-direction: column; gap: 6px; }
.ob-label { font-weight: 700; font-size: 15px; color: var(--ob-ink); }
.ob-input-wrap { position: relative; }
.ob-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ob-placeholder);
  pointer-events: none;
}
.ob-input {
  width: 100%;
  border: 1px solid var(--ob-input-border);
  border-radius: 10px;
  padding: 14px 15px 14px 42px;
  /* 16px at every breakpoint so iOS never zoom-focuses the field. */
  font-size: 16px;
  color: var(--ob-ink);
  font-family: inherit;
  background-color: var(--ob-white);
}
.ob-input::placeholder { color: var(--ob-placeholder); }
.ob-input:focus {
  border-color: var(--ob-primary);
  box-shadow: 0 0 0 3px var(--ob-primary-ring);
  outline: none;
}
.ob-input[aria-invalid="true"] { border-color: var(--ob-danger); }

/* One reserved note row per field holds either the hint or an inline error, so
   a blur hint or a client-side error never nudges the button (T3.2). */
.ob-note { min-height: 18px; }
.ob-hint {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ob-muted);
}
.ob-field-error {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ob-danger);
}
.ob-field-error--warn { color: var(--ob-warn); }
.ob-field-error a { color: inherit; text-decoration: underline; font-weight: 600; }
/* Email typo "did you mean ...?" correction, rendered as a real button. */
.ob-typo-suggest {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.ob-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
/* The signup CTA is full-width; every other .ob-btn (workspace, modals) sizes to
   its content. */
.ob-actions .ob-btn { width: 100%; }
.ob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background-color: var(--ob-primary);
  color: var(--ob-white);
  font-weight: 700;
  font-size: 17px;
  font-family: inherit;
  border: none;
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--ob-btn-shadow);
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}
.ob-btn:hover { background-color: var(--ob-primary-hover); }
/* Buttons rendered as anchors (the upload/Notion modal actions and "Test your
   bot") would otherwise inherit the purple `.ob-body a` link colour on the
   purple button background; keep their label white like the <button> variants. */
.ob-body a.ob-btn, .ob-body a.ob-btn:hover { color: var(--ob-white); }
.ob-btn:active { transform: translateY(1px); }
.ob-btn[aria-disabled="true"], .ob-btn:disabled { opacity: 0.72; cursor: default; }
.ob-btn-spinner {
  width: 17px; height: 17px;
  border: 2.4px solid rgba(255, 255, 255, 0.45);
  border-top-color: var(--ob-white);
  border-radius: 50%;
  animation: ob-spin 0.7s linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }

.ob-cta-sub { font-size: 13px; color: var(--ob-muted-strong); text-align: center; }
.ob-terms { font-size: 12px; color: var(--ob-muted-strong); text-align: center; line-height: 1.45; }
.ob-terms a { color: var(--ob-muted-strong); text-decoration: underline; }

.ob-form-alert {
  border: 1px solid rgba(214, 69, 69, 0.35);
  background-color: #fdf2f2;
  color: var(--ob-danger);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
}

/* RIGHT: the navy value stage --- */
.ob-value-pane {
  position: relative;
  background-color: var(--ob-navy);
  padding: 52px 52px 48px;
  box-shadow: -24px 0 48px -28px rgba(20, 14, 50, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ob-value-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.ob-value-h2 {
  margin: 0 0 30px;
  font-size: 42px;
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ob-white);
}
.ob-underline { position: relative; white-space: nowrap; }
.ob-underline svg { position: absolute; left: 0; bottom: -12px; width: 100%; height: 13px; }

.ob-split-card {
  width: 100%;
  max-width: 500px;
  background-color: var(--ob-navy-card);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 26px 28px;
}
.ob-split-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 24px; }
.ob-split-divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.12); }
.ob-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ob-amber); margin-bottom: 8px;
}
.ob-product { font-size: 19px; font-weight: 700; color: var(--ob-white); }
.ob-product-desc { font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.72); margin-top: 5px; }
.ob-stat-big { font-size: 54px; line-height: 1; font-weight: 500; letter-spacing: -1px; color: var(--ob-amber); margin-top: 18px; }
.ob-stat-label { font-size: 13.5px; font-weight: 700; color: var(--ob-amber); margin-top: 2px; }
.ob-stat-sub { font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.68); margin-top: 3px; }

.ob-aggregate { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; width: 100%; max-width: 420px; }
.ob-agg-num { font-size: 27px; font-weight: 700; color: var(--ob-white); }
.ob-agg-label { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); margin-top: 4px; }
.ob-trust-basis { margin-top: 12px; font-size: 11px; color: rgba(255, 255, 255, 0.55); }

.ob-quote-card {
  margin-top: 30px; width: 100%; max-width: 500px;
  background-color: var(--ob-navy-card);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 18px 20px;
}
.ob-quote { margin: 0 0 13px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.94); }
.ob-quote-by { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ob-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14); color: var(--ob-white);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px;
}
/* A real person photo fills the avatar circle (initials are the fallback). */
.ob-avatar-img { object-fit: cover; background: none; flex: none; }
.ob-quote-meta { display: flex; flex-direction: column; text-align: left; }
.ob-quote-name { font-size: 12.5px; font-weight: 700; color: var(--ob-white); }
.ob-quote-role { font-size: 11.5px; color: rgba(255, 255, 255, 0.7); }

/* customer-logo marquee (dark-panel adaptation, ported from the landing) */
.ob-marquee { margin-top: 32px; width: 100%; max-width: 500px; }
.ob-marquee-label {
  text-transform: uppercase; font-size: 10.5px; letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.66); font-weight: 700; margin-bottom: 12px;
}
.ob-marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ob-logo-track { display: flex; width: max-content; animation: ob-logoscroll 32s linear infinite; }
@keyframes ob-logoscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ob-logo-group { display: flex; gap: 34px; padding-right: 34px; align-items: center; }
.ob-tlogo { width: auto; display: block; opacity: 0.72; filter: brightness(0) invert(1); }

/* --- accessibility --- */
.ob-body :focus-visible { outline: 2px solid var(--ob-primary); outline-offset: 2px; }
.ob-btn:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ob-logo-track { animation: none; }
  .ob-btn { transition: none; }
  .ob-btn-spinner { animation-duration: 1.4s; }
}

/* --- responsive: below 900px the navy pane drops (Chatbase/Intercom pattern) --- */
@media (max-width: 900px) {
  .ob-shell { grid-template-columns: 1fr; }
  .ob-value-pane { display: none; }
  .ob-form-pane { padding: 22px 20px 30px; }
  .ob-signup-block { padding: 0; margin-top: 36px; justify-content: flex-start; flex: 0 0 auto; }
  .ob-h1 { font-size: 27px; line-height: 1.18; }
  .ob-subhead { font-size: 16px; margin-bottom: 22px; }
  .ob-card { padding: 22px 20px; }
  .ob-form { gap: 18px; }
}

@media (max-width: 420px) {
  .ob-form-pane { padding: 20px 16px 26px; }
}

/* =========================================================================
 * Screen 2 - workspace ("We're building your bot")
 * ========================================================================= */
:root {
  --ob-ws-line: #e7ecf5;
  --ob-card-border-2: #e9ecf2;
  --ob-lavender: #bcb4f2;
  --ob-lavender-dot: #a99ff0;
  --ob-track: #e9ebfb;
  --ob-green: #12b76a;
}

.ob-ws { min-height: 100vh; display: flex; flex-direction: column; }

/* header */
.ob-ws-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px; background-color: var(--ob-ground);
}
.ob-ws-logo { height: 25px; width: auto; display: block; }
.ob-account { position: relative; }
.ob-account-btn {
  display: inline-flex; align-items: center; gap: 9px; background: none; border: none;
  cursor: pointer; font: inherit; padding: 4px 6px; border-radius: 8px;
}
.ob-account-btn:hover { background: #f4f5fb; }
.ob-avatar-sm {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ob-white); border: 1px solid var(--ob-card-border);
  color: var(--ob-primary);
  font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}
.ob-account-name { font-size: 14px; font-weight: 600; color: #3f4652; }
.ob-account-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px;
  background: var(--ob-white); border: 1px solid var(--ob-card-border); border-radius: 12px;
  box-shadow: var(--ob-card-shadow); padding: 6px; z-index: 30;
}
.ob-account-menu a {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px;
  font-weight: 600; color: #3f4652;
}
.ob-account-menu a:hover { background: #f4f5fb; color: var(--ob-ink); }

/* body + title + stepper */
.ob-ws-body { max-width: 1200px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 34px 48px 60px; }
.ob-ws-h1 { margin: 0 0 8px; font-size: 31px; line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; color: var(--ob-ink); }
.ob-ws-subcopy { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ob-muted-strong); }

.ob-stepper { display: flex; align-items: center; gap: 12px; margin: 22px 0 26px; padding: 0; list-style: none; }
.ob-step { display: flex; align-items: center; gap: 8px; }
.ob-step-num {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; box-sizing: border-box;
  background: #e6e9f0; color: var(--ob-placeholder);
}
.ob-step-num.is-done { background: var(--ob-primary); color: #fff; }
.ob-step-num.is-active { background: var(--ob-primary); color: #fff; box-shadow: 0 0 0 4px rgba(102, 88, 234, 0.16); }
.ob-step-label { font-size: 13.5px; font-weight: 600; color: var(--ob-muted-strong); }
.ob-step.is-active .ob-step-label { font-weight: 700; color: var(--ob-ink); }
.ob-step.is-upcoming .ob-step-label { color: var(--ob-placeholder); }
.ob-step-line { width: 34px; height: 2px; background: #d9deea; border-radius: 2px; }
.ob-step-link { text-decoration: none; }
/* Desktop shows the full label ("Create account"); the compact one ("Account")
   swaps in on mobile so the three steps fit one line without wrapping (#12). */
.ob-lbl-short { display: none; }

/* two columns */
.ob-ws-cols { display: flex; align-items: flex-start; gap: 28px; }

.ob-card {
  background: var(--ob-white); border: 1px solid var(--ob-card-border-2); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28, 26, 60, 0.06), 0 16px 34px -22px rgba(28, 26, 60, 0.22);
}
.ob-card-sec {
  background: var(--ob-white); border: 1px solid var(--ob-card-border-2); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 26, 60, 0.05);
}

.ob-ws-hero { flex: 1.5 1 0; padding: 30px 34px; box-sizing: border-box; }
.ob-ws-secondary { flex: 1 1 0; min-width: 380px; display: flex; flex-direction: column; gap: 16px; }

/* hero head */
.ob-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ob-hero-head-left { display: flex; align-items: center; gap: 10px; }
.ob-hero-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--ob-ink); }
/* The hero "See all content" control. Scoped to `button` so it does NOT also match
   the See-all <dialog>, which shares the `ob-seeall` class (that collision leaked
   cursor:pointer + white-space:nowrap onto the whole modal). */
button.ob-seeall { font-size: 13.5px; font-weight: 600; white-space: nowrap; background: none; border: none; cursor: pointer; color: var(--ob-primary); padding: 0; font-family: inherit; }
button.ob-seeall:hover { color: var(--ob-primary-hover); }

.ob-spin {
  width: 17px; height: 17px; border: 2px solid rgba(102, 88, 234, 0.28);
  border-top-color: var(--ob-primary); border-radius: 50%; animation: ob-sp 0.7s linear infinite; flex: none;
}
/* Smaller spinner for a section header, sized to sit where the dot/tick icons do. */
.ob-spin.ob-spin-sm { width: 13px; height: 13px; }
@keyframes ob-sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ob-spin { animation-duration: 1.6s; } }

/* progress bar */
.ob-pbar { display: flex; height: 9px; background: var(--ob-track); border-radius: 99px; overflow: hidden; }
.ob-pbar-trained { background: var(--ob-primary); transition: width 400ms ease; }
.ob-pbar-awaiting { background: var(--ob-lavender); transition: width 400ms ease; }
@media (prefers-reduced-motion: reduce) { .ob-pbar-trained, .ob-pbar-awaiting { transition: none; } }
.ob-pbar-label { font-size: 12px; color: var(--ob-placeholder); margin-top: 7px; }

/* grouped list */
.ob-grp { margin-top: 16px; border-top: 1px solid #eef1f6; padding-top: 6px; }
.ob-grp-sec + .ob-grp-sec { margin-top: 2px; }
/* Each section reserves a fixed-height body (up to 3 sample rows + a "... N more"
   line) so pages moving between Trained / Scraped / Queued during training never
   resize the card (#3). The queued section is a header only and has no body. */
.ob-grp.is-training .ob-grp-rows { height: 116px; overflow: hidden; }
.ob-grp-head {
  display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ob-ink);
  padding: 8px; margin: 0 -8px; border-radius: 8px;
}
.ob-grp-head.is-clickable { cursor: pointer; }
.ob-grp-head.is-clickable:hover { background: #f4f5fb; }
.ob-grp-head b { color: var(--ob-muted); font-weight: 700; }
/* URL sample rows and the "... N more" affordance are <button>s; without the
   native-chrome reset the browser paints them as grey OS buttons (they must read
   as plain, left-aligned, full-width text rows in the grouped list). */
.ob-ex {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; font-family: inherit; -webkit-appearance: none; appearance: none;
  /* Indented left so rows sit within their section, under the header label
     (the leading icon starts past the header's own icon). */
  padding: 5px 8px 5px 32px; margin: 0 -8px; border-radius: 8px; font-size: 13.5px;
  line-height: 1.4; color: #667085; cursor: pointer;
}
.ob-ex:hover { background: #f4f5fb; }
/* Every row leads with an aligned icon (globe/file/snippet); the label ellipsises. */
.ob-ex svg { flex: none; color: #9aa1ab; }
.ob-ex-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* A non-interactive stand-in row (in-flight work with no per-item rows yet): a
   spinner + muted label, no pointer, no hover highlight (#3). */
.ob-ex-placeholder { cursor: default; color: var(--ob-placeholder); }
.ob-ex-placeholder:hover { background: none; }
.ob-ex-placeholder .ob-spin { flex: none; }
.ob-more {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font-family: inherit; -webkit-appearance: none; appearance: none;
  padding: 5px 8px 6px 32px; margin: 0 -8px; border-radius: 8px; font-size: 13px;
  line-height: 1.4; color: var(--ob-placeholder); cursor: pointer;
}
.ob-more:hover { background: #f4f5fb; }
.ob-more-seeall { color: var(--ob-primary); font-weight: 600; }
/* Rows fade in from below the first time they appear in a stage (#progress) so the
   list reads as items moving upward through queued -> scraping -> training -> done. */
@keyframes ob-row-up { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.ob-grp .ob-row-enter { animation: ob-row-up 260ms ease both; }
@media (prefers-reduced-motion: reduce) { .ob-grp .ob-row-enter { animation: none; } }
.ob-dot-a { width: 13px; height: 13px; border-radius: 50%; background: var(--ob-lavender-dot); flex: none; }
.ob-dot-q { width: 13px; height: 13px; border: 2px solid #cdd3de; border-radius: 50%; flex: none; box-sizing: border-box; }
.ob-check { color: var(--ob-green); flex: none; }

/* test-your-bot panel */
.ob-test-panel { margin-top: 22px; padding: 20px; background: #f7f6ff; border: 1px solid #e7e3fb; border-radius: 12px; }
.ob-test-row { display: flex; align-items: center; gap: 16px; }
.ob-test-copy-title { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); }
.ob-test-copy-sub { font-size: 13.5px; color: var(--ob-muted-strong); margin-top: 2px; }
.ob-btn-test { font-size: 16px; padding: 14px 22px; white-space: nowrap; }
.ob-btn-test[aria-disabled="true"], .ob-btn-test:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

/* reassurance */
.ob-hero-reassure { margin-top: 20px; display: flex; flex-direction: column; gap: 7px; }
.ob-reassure-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ob-muted-strong); }
.ob-reassure-line svg { color: var(--ob-placeholder); flex: none; }
.ob-reassure-email { font-size: 13.5px; color: var(--ob-muted-strong); padding-left: 23px; }
.ob-reassure-email b { color: #3f4652; }

/* secondary column */
.ob-sec-label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ob-placeholder); padding-left: 2px; }
.ob-sec-card-pad { padding: 20px 22px; }
.ob-sec-title { font-size: 16px; font-weight: 700; color: var(--ob-ink); }
.ob-sec-sub { font-size: 13.5px; color: var(--ob-muted-strong); margin-top: 3px; margin-bottom: 16px; }

.ob-src-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-src {
  border: 1px solid #e6e9f0; border-radius: 12px; padding: 13px 14px; background: #fbfcfe;
  display: flex; align-items: center; gap: 11px; cursor: pointer; font: inherit; text-align: left; width: 100%;
}
.ob-src:hover { border-color: #c9c2f4; background: #f8f7ff; }
.ob-src span { font-size: 14px; font-weight: 600; color: var(--ob-ink); }
.ob-src svg { color: var(--ob-primary); flex: none; }
.ob-src img { width: 19px; height: 19px; flex: none; }
.ob-link-btn { font-size: 13.5px; font-weight: 600; color: var(--ob-primary); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }

/* The four helpdesk chips share the row equally (4 across on desktop, 2x2 on
   mobile) so they fill the width with no trailing whitespace (#10). */
.ob-chip-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ob-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 12px;
  background: var(--ob-white); border: 1px solid #e3e7ef; border-radius: 11px; cursor: pointer; box-sizing: border-box;
}
.ob-chip:hover { border-color: #c9c2f4; }
.ob-chip img { height: 22px; width: 72px; object-fit: contain; object-position: center; display: block; }
.ob-chip.is-connected { border-color: var(--ob-green); box-shadow: 0 0 0 1px rgba(18, 183, 106, 0.35); }
.ob-chip-badge { font-size: 11px; font-weight: 600; color: #b54708; background: #fffaeb; border: 1px solid #fedf89; border-radius: 6px; padding: 2px 6px; }
.ob-chip-connected-tick { color: var(--ob-green); }

.ob-btn-outline {
  flex: none; display: inline-flex; align-items: center; gap: 7px; background: var(--ob-white); color: var(--ob-primary);
  font-weight: 700; font-size: 14px; border: 1px solid #d8d3f7; border-radius: 9px; padding: 10px 15px; cursor: pointer; font-family: inherit;
}
.ob-btn-outline:hover { background: #faf9ff; }

/* scenario source-cards (S7/S8/S9 empty/failed states) reuse .ob-src grid */
.ob-empty-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }

/* failed panel */
.ob-failed-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ob-failed-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #f0d9d9; background: #fdf6f6; border-radius: 10px; }
.ob-failed-url { font-size: 13.5px; font-weight: 600; color: var(--ob-ink); word-break: break-all; }
.ob-failed-reason { font-size: 12.5px; color: #8a5b5b; margin-top: 2px; }
.ob-failed-actions { display: flex; gap: 8px; flex: none; }

/* overlays (stalled / errored) */
.ob-overlay-note {
  margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: 13.5px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
}
.ob-overlay-note.is-error { background: #fdf2f2; border: 1px solid rgba(214, 69, 69, 0.3); color: #9a3b3b; }
.ob-overlay-note.is-stalled { background: #fff8ec; border: 1px solid #fedf89; color: #92610a; }
.ob-overlay-note .ob-btn { padding: 8px 14px; font-size: 13.5px; flex: none; }

/* session-expired notice */
.ob-session-expired { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: #fff8ec; border: 1px solid #fedf89; color: #92610a; font-size: 14px; }

@media (max-width: 980px) {
  .ob-ws-header { padding: 16px 20px; }
  .ob-ws-body { padding: 24px 18px 48px; }
  .ob-ws-cols { flex-direction: column; }
  .ob-ws-hero, .ob-ws-secondary { width: 100%; min-width: 0; }
  .ob-ws-h1 { font-size: 26px; }
  .ob-stepper { flex-wrap: wrap; }
}

/* --- native <dialog> modals (See-all, Add-knowledge; DC16) --------------- */
.ob-dialog {
  width: 560px; max-width: calc(100vw - 32px); max-height: 82vh; padding: 0; border: none;
  border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(20, 14, 50, 0.5);
  color: var(--ob-ink); background: var(--ob-white); overflow: hidden;
}
.ob-dialog::backdrop { background: rgba(20, 14, 50, 0.42); }
/* Scope the flex layout to [open]. An unconditional `display:flex` (author origin)
   overrides the UA `dialog:not([open]){display:none}` regardless of specificity, so
   the dialog would stay painted in normal flow after close() - grey backdrop gone but
   the panel still on the page, un-closable. [open] lets the UA rule hide it on close. */
.ob-seeall[open] { display: flex; flex-direction: column; }
.ob-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; }
.ob-dialog-title { margin: 0; font-size: 18px; font-weight: 700; }
.ob-dialog-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ob-muted); padding: 0 4px; }
.ob-dialog-close:hover { color: var(--ob-ink); }

.ob-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--ob-card-border); flex-wrap: wrap; }
.ob-tab {
  background: none; border: none; padding: 9px 12px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ob-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ob-tab:hover { color: var(--ob-ink); }
.ob-tab.is-active { color: var(--ob-primary); border-bottom-color: var(--ob-primary); }
/* Splits the content-type tabs (URLs / Files / Snippets) from the URL-state tabs
   (In progress / Failed). */
.ob-tab-divider { align-self: center; width: 1px; height: 16px; background: var(--ob-card-border); margin: 0 6px; }

.ob-seeall-list { flex: 1 1 auto; overflow-y: auto; padding: 8px 22px; min-height: 160px; }
.ob-seeall-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f2f4f8; font-size: 13.5px; }
.ob-seeall-url { color: #3f4652; word-break: break-all; flex: 1 1 auto; }
.ob-seeall-reason { color: #8a5b5b; font-size: 12px; flex: none; }
.ob-seeall-meta { color: var(--ob-muted); font-size: 12px; flex: none; white-space: nowrap; }
.ob-seeall-empty { padding: 24px 0; color: var(--ob-muted); font-size: 14px; text-align: center; }
/* Informational last row: how many rows remain unloaded (the "Load all" button
   in the footer fetches them). */
.ob-seeall-morerow { padding: 10px 0 2px; color: var(--ob-placeholder); font-size: 12.5px; text-align: center; }
.ob-pill { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.ob-pill-trained { background: #e6f6ee; color: #05603a; }
.ob-pill-awaiting { background: #efeafc; color: #5b45c9; }
.ob-pill-failed { background: #fdeaea; color: #9a3b3b; }
.ob-seeall-foot { padding: 12px 22px 18px; }
.ob-seeall-foot .ob-btn-outline[hidden] { display: none; }

.ob-akn-body { padding: 18px 22px; }
.ob-akn-panel { display: flex; flex-direction: column; gap: 10px; }
.ob-akn-panel .ob-input { padding-left: 15px; }
.ob-textarea { resize: vertical; min-height: 120px; font-size: 15px; }
/* Crawl-scope as a segmented control (matches Screen2AddKnowledge.dc.html). Real radios
   are kept for accessibility but visually hidden; the labels are the pills. */
.ob-seg { display: inline-flex; background: #f0f2f6; border-radius: 9px; padding: 3px; gap: 3px; }
.ob-seg-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ob-seg-opt {
  font-size: 13px; font-weight: 600; color: var(--ob-muted); padding: 7px 13px; border-radius: 7px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; user-select: none;
}
.ob-seg-radio:checked + .ob-seg-opt { background: var(--ob-white); color: var(--ob-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }
.ob-seg-radio:focus-visible + .ob-seg-opt { outline: 2px solid var(--ob-primary); outline-offset: 2px; }
/* "i" info affordance with a hover/focus tooltip. */
.ob-info { position: relative; display: inline-flex; align-items: center; cursor: default; }
.ob-info svg { color: var(--ob-placeholder); }
.ob-tip {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: 236px;
  max-width: 70vw; background: var(--ob-ink); color: #fff; font-size: 12px; font-weight: 500;
  line-height: 1.45; padding: 9px 11px; border-radius: 8px; opacity: 0; visibility: hidden;
  transition: opacity 0.12s ease; box-shadow: 0 8px 24px rgba(10, 8, 40, 0.28); z-index: 5; text-align: left;
}
.ob-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ob-ink); }
.ob-info:hover .ob-tip, .ob-info:focus .ob-tip, .ob-info:focus-within .ob-tip { opacity: 1; visibility: visible; }
/* Compact, right-aligned action ("Add to training"). */
.ob-akn-actions { display: flex; justify-content: flex-end; }
.ob-btn-add { font-size: 14px; padding: 10px 16px; }
.ob-btn-add svg { flex: none; }
.ob-added-label-head { padding: 4px 22px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ob-placeholder); }
.ob-added-list { padding: 0 22px 18px; max-height: 130px; overflow-y: auto; }
.ob-added-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; color: #3f4652; }
.ob-added-row.is-new { background: #ecfdf3; }
.ob-added-tick { color: var(--ob-green); font-weight: 700; }
.ob-added-label { word-break: break-all; }

/* Upload-files tab: the shared custom uploader (dropzone + file rows), themed to
   the onboarding tokens rather than pulling in the Bootstrap uploader-* CSS (#1). */
.ob-dropzone {
  border: 1.5px dashed var(--ob-input-border); border-radius: 12px; padding: 20px 16px;
  text-align: center; cursor: pointer; background: #fbfcfe;
}
.ob-dropzone:hover, .ob-dropzone:focus-visible { border-color: var(--ob-primary); background: #f8f7ff; outline: none; }
.ob-dropzone.drag-over { border-color: var(--ob-primary); background: #f1efff; }
.ob-dropzone-title { font-weight: 700; font-size: 14.5px; color: var(--ob-ink); }
.ob-dropzone-hint { font-size: 12.5px; color: var(--ob-muted); margin: 6px 0 12px; }
.ob-uploader-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ob-uprow {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--ob-card-border); border-radius: 10px; font-size: 13.5px;
}
.ob-uprow.is-failed, .ob-uprow.is-rejected { border-color: #f0d9d9; background: #fdf6f6; }
.ob-uprow.is-uploaded { border-color: rgba(18, 183, 106, 0.4); }
.ob-uprow-main { flex: 1 1 auto; min-width: 0; }
.ob-uprow-name { display: block; color: var(--ob-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-uprow-meta { display: block; font-size: 12px; color: var(--ob-muted); }
.ob-uprow.is-failed .ob-uprow-meta, .ob-uprow.is-rejected .ob-uprow-meta { color: #8a5b5b; }
.ob-uprow-track { width: 84px; height: 6px; background: var(--ob-track); border-radius: 99px; overflow: hidden; flex: none; }
.ob-uprow-bar { height: 100%; background: var(--ob-primary); border-radius: 99px; transition: width 150ms ease; }
@media (prefers-reduced-motion: reduce) { .ob-uprow-bar { transition: none; } }
.ob-uprow-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ob-uprow-x { background: none; border: none; font-size: 18px; line-height: 1; color: var(--ob-muted); cursor: pointer; padding: 0 2px; }
.ob-uprow-x:hover { color: var(--ob-ink); }

/* Add-more-knowledge: the "Manage Knowledge" escape hatch to the full knowledge page. */
.ob-manage-link { margin-top: 14px; font-size: 13px; line-height: 1.4; }
.ob-manage-link a { color: var(--ob-primary); font-weight: 600; }
.ob-manage-note { color: var(--ob-muted); margin-left: 5px; }

/* "Your AI Chat Widget" card: two stacked rows (Make it yours / Show on your site),
   each a label + desc on the left and an outline action on the right. */
.ob-widget-card { display: flex; flex-direction: column; gap: 14px; }
.ob-widget-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ob-widget-row + .ob-widget-row { border-top: 1px solid var(--ob-card-border-2); padding-top: 14px; }
.ob-widget-sub { font-size: 14px; font-weight: 700; color: var(--ob-ink); }
.ob-widget-desc { font-size: 13px; color: var(--ob-muted-strong); margin-top: 2px; }

/* "Would you like some help?" - the full-width footer card spanning both columns.
   Overrides the shared .ob-card max-width so it is genuinely double-wide. */
.ob-help-card { margin-top: 24px; padding: 22px 28px; max-width: none; }
.ob-help-title { font-size: 17px; font-weight: 700; color: var(--ob-ink); margin-bottom: 6px; }
.ob-help-body { font-size: 14px; line-height: 1.55; color: var(--ob-muted-strong); }
.ob-help-body a { color: var(--ob-primary); font-weight: 600; }

/* "Add to my site" embed modal - shares the <dialog> chrome; display:flex is scoped
   to [open] so close() truly hides it (the same UA-cascade fix as the See-all modal). */
.ob-embed[open] { display: flex; flex-direction: column; }
.ob-embed-body { padding: 6px 22px 20px; overflow-y: auto; }
.ob-embed-body > p { font-size: 14px; line-height: 1.55; color: var(--ob-ink-soft); margin: 0 0 12px; }
.ob-embed-body > p a, .ob-embed-note a, .ob-embed-links a { color: var(--ob-primary); font-weight: 600; }
.ob-embed-body > p.ob-embed-lead { font-weight: 700; color: var(--ob-ink); margin-bottom: 6px; }
.ob-embed-note {
  background: #f7f6ff; border: 1px solid #e7e3fb; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--ob-muted-strong); margin-bottom: 16px;
}
.ob-embed-code {
  background: #f6f8fb; border: 1px solid var(--ob-card-border); border-radius: 10px;
  padding: 13px 15px; margin: 2px 0 10px; overflow-x: auto;
}
.ob-embed-code pre {
  margin: 0; font-size: 12.5px; line-height: 1.5; white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #33383f;
}
.ob-embed-copyrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.ob-embed-copy { font-size: 14px; padding: 10px 18px; }
.ob-embed-copied { font-size: 12.5px; color: var(--ob-green); font-weight: 600; }

@media (max-width: 600px) {
  /* Fullscreen dialogs use the DYNAMIC viewport height (100dvh), not 100vh. 100vh is the
     LARGE viewport (the height as if the browser URL bar were hidden), which is taller
     than what's actually visible while the URL bar shows - that pushes the dialog's top
     (the X close button) up behind the URL bar. 100dvh tracks the currently-visible
     height so the header, and the X, stay reachable. (100vh kept as a fallback first.) */
  .ob-dialog {
    width: 100vw; max-width: 100vw;
    height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh;
    border-radius: 0;
  }
  /* Workspace phone tweaks (#10/#11/#12). Declared after the 980px stack block so
     these win where both match. */
  .ob-chip-row { grid-template-columns: repeat(2, 1fr); }
  .ob-test-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Centre the title, subcopy and stepper on phones. */
  .ob-ws-h1, .ob-ws-subcopy { text-align: center; }
  .ob-stepper { gap: 8px; flex-wrap: nowrap; margin: 18px 0 22px; justify-content: center; }
  .ob-step-line { display: none; }
  .ob-lbl-full { display: none; }
  .ob-lbl-short { display: inline; }
  .ob-widget-row { align-items: flex-start; }
}