/* medialens - onboarding chat panel (phase 2B, onboard-chat.js). Every rule is scoped under .oc-.
   Colors come from the page's own tokens, and every var() is checked against BOTH hosts:
   /welcome/ links tokens.css (light only) and /app/ links mediaroom.css (light + :root[data-theme=dark]).
   - Shared by both, and redefined by mediaroom's dark block: --ink --gray --wash --panel --accent --neg.
     Shared, same in both themes: --shadow --r --r-2 --r-3 --fs-*.
   - Borders: mediaroom has NO --faint (it calls the same hairline --hairline, dark in the dark theme;
     see its own note on the silent var(--faint) bug). So borders read var(--hairline, var(--faint, ...)):
     the app resolves --hairline in both themes, welcome falls through to its --faint.
   - --accent-tint and --neg-tint exist only in mediaroom (both themes); welcome is light-only, so the
     light fallback is right there.
   - Surfaces use --panel (never #fff) so the app's dark theme stays dark. Text sitting ON an accent
     fill is #fff in both themes, the same convention mediaroom uses for its own accent fills.
   Fallback values equal the light token values - not a second palette, only a net for a host that
   forgets its token sheet. Hover = INVERT on every control.
   Type (UX fix 25/09, "there must be separation between headings and questions"): two tiers only.
   Labels - the map heading, owner groups, who-said-it, step titles, field labels - are secondary:
   11.5px (--fs-cap), weight 600, muted --gray, a touch of letter-spacing. Content - message text,
   map rows, step text, status lines - is primary: 13.5px (--fs-lead), --ink, normal weight. */

.oc-root { font-family: 'Heebo', sans-serif; direction: rtl; color: var(--ink, #16161A); }
/* tokens.css resets every margin/padding (* {margin:0;padding:0}); mediaroom.css does not, so on /app/
   lists and paragraphs would carry UA indents and gaps. Scoped reset, so both hosts render alike. */
.oc-root p, .oc-root ul, .oc-root ol, .oc-root form { margin: 0; }
.oc-root ul { padding: 0; }
.oc-panel { background: var(--panel, #fff); border: 1px solid var(--hairline, var(--faint, #E4E4E9)); border-radius: var(--r, 14px);
  box-shadow: var(--shadow, 0 1px 2px rgba(22,22,26,.04), 0 8px 24px -14px rgba(22,22,26,.14));
  padding: 0; overflow: hidden; display: flex; flex-direction: column; font-size: var(--fs-body, 12.5px); line-height: 1.55; }

/* three bands: .oc-top and .oc-foot are fixed, .oc-scroll between them is the ONE scrolling region
   (first-note, open-items map and conversation together) */
.oc-top { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 10px;
  border-bottom: 1px solid var(--hairline, var(--faint, #E4E4E9)); }
.oc-scroll { flex: 1 1 auto; min-height: 0; max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; }
.oc-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 18px 14px;
  border-top: 1px solid var(--hairline, var(--faint, #E4E4E9)); }

/* the two type tiers (see the header note) */
.oc-items-t, .oc-group-t, .oc-who, .oc-steps-t, .oc-field > span {
  font-size: var(--fs-cap, 11.5px); font-weight: 600; letter-spacing: .02em; color: var(--gray, #6A6A74); }
.oc-msg, .oc-item, .oc-item-static { font-size: var(--fs-lead, 13.5px); font-weight: 400; color: var(--ink, #16161A); }

/* header */
.oc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oc-title { font-size: 14px; font-weight: 700; }
.oc-head-actions { display: flex; gap: 6px; }
.oc-sub { font-size: var(--fs-small, 12px); color: var(--gray, #6A6A74); min-height: 0; }
.oc-sub:empty { display: none; }
.oc-sub-ok { color: var(--ink, #16161A); }
.oc-sub-err { color: var(--neg, #BE4B42); }
.oc-ticket { font-size: var(--fs-small, 12px); color: var(--accent, #2F5AF0); background: var(--accent-tint, rgba(47,90,240,.08));
  border-radius: 999px; padding: 4px 12px; align-self: flex-start; }

/* the first-note: small, muted, and inside the scroll so it leaves with the conversation */
.oc-first-note { margin-top: 0; }

/* items map: every row is a door to its step - a real button, INVERT on hover */
.oc-items { flex: none; background: var(--wash, #F4F5F7); border-radius: var(--r-2, 11px); padding: 10px 12px; }
.oc-items > [data-oc-el="items"] { margin-top: 4px; }
.oc-group + .oc-group { margin-top: 10px; }
.oc-group ul { list-style: none; margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.oc-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: start;
  font-family: inherit; line-height: 1.45; cursor: pointer; background: var(--panel, #fff);
  border: 1px solid var(--hairline, var(--faint, #E4E4E9)); border-radius: var(--r-3, 8px); padding: 6px 10px; transition: .15s; }
/* RTL: the "go" arrow points left */
.oc-item::after { content: '←'; flex: none; font-weight: 700; color: var(--accent, #2F5AF0); }
.oc-item:hover:not([disabled]) { background: var(--accent, #2F5AF0); color: #fff; border-color: var(--accent, #2F5AF0); }
.oc-item:hover:not([disabled])::after { color: #fff; }
.oc-item:focus-visible { outline: 2px solid var(--accent, #2F5AF0); outline-offset: 1px; }
.oc-item[disabled] { opacity: .55; cursor: progress; }
.oc-item-static { padding: 2px 0; }
.oc-empty { font-size: var(--fs-body, 12.5px); color: var(--gray, #6A6A74); }

/* conversation */
.oc-list { display: flex; flex-direction: column; gap: 8px; }
.oc-msg { max-width: 86%; border-radius: var(--r-2, 11px); padding: 8px 12px;
  align-self: flex-start; background: var(--panel, #fff); border: 1px solid var(--hairline, var(--faint, #E4E4E9)); }
/* RTL: flex-start is the right edge, flex-end the left. Client on the left, everyone else on the right. */
.oc-msg.oc-client { align-self: flex-end; background: var(--accent-tint, rgba(47,90,240,.08)); border-color: transparent; }
.oc-who { margin-bottom: 3px; }
.oc-msg.oc-ronen .oc-who { color: var(--accent, #2F5AF0); }
.oc-p { white-space: pre-line; }
.oc-p + .oc-p { margin-top: 4px; }
.oc-steps { margin-top: 4px; }
.oc-steps-t { margin-bottom: 3px; }
.oc-steps ol { padding-inline-start: 18px; }
.oc-steps li { margin: 3px 0; }
.oc-steps li > span { display: block; }
.oc-perm { font-size: var(--fs-small, 12px); color: var(--gray, #6A6A74); }
.oc-status, .oc-sent-fields { list-style: none; margin-top: 4px; }
.oc-note { font-size: var(--fs-small, 12px); color: var(--gray, #6A6A74); margin-top: 4px; }
.oc-local-st { font-size: var(--fs-label, 11px); color: var(--gray, #6A6A74); margin-top: 2px; }
.oc-local-failed .oc-local-st, .oc-local-unsent .oc-local-st { color: var(--neg, #BE4B42); }
.oc-think { font-size: var(--fs-small, 12px); color: var(--gray, #6A6A74); }
.oc-think:empty { display: none; }
.oc-think-late { color: var(--ink, #16161A); }

/* links: underlined, invert on hover */
.oc-link { display: inline-block; margin-top: 2px; font-size: var(--fs-small, 12px); color: var(--accent, #2F5AF0);
  text-decoration: underline; text-underline-offset: 3px; border-radius: 999px; padding: 1px 6px; transition: .15s; }
.oc-link:hover { background: var(--accent, #2F5AF0); color: #fff; text-decoration: none; }

/* buttons: accent pill, INVERT on hover (panel ground, accent text) */
.oc-btn { font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 6px 16px;
  background: var(--accent, #2F5AF0); color: #fff; border: 1px solid var(--accent, #2F5AF0); transition: .15s; }
.oc-btn:hover:not([disabled]) { background: var(--panel, #fff); color: var(--accent, #2F5AF0); }
.oc-btn-ghost { background: var(--panel, #fff); color: var(--accent, #2F5AF0); font-weight: 500; padding: 4px 12px; }
.oc-btn-ghost:hover:not([disabled]) { background: var(--accent, #2F5AF0); color: #fff; }
.oc-btn[disabled] { opacity: .55; cursor: progress; }
.oc-msg .oc-btn { margin-top: 6px; }

/* field form */
.oc-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.oc-field { display: flex; flex-direction: column; gap: 2px; }
.oc-field input { font-family: inherit; font-size: 13px; border: 1px solid var(--hairline, var(--faint, #E4E4E9)); border-radius: var(--r-3, 8px);
  padding: 6px 8px; background: var(--panel, #fff); color: var(--ink, #16161A); }
.oc-ferr { font-style: normal; font-size: var(--fs-small, 12px); color: var(--neg, #BE4B42); }
.oc-ferr:empty { display: none; }
.oc-fields .oc-btn { align-self: flex-start; }

/* outcome line */
.oc-notice:empty { display: none; }
.oc-n { border-radius: var(--r-2, 11px); padding: 8px 12px; font-size: 13px; }
.oc-n-err { background: var(--neg-tint, rgba(190,75,66,.09)); color: var(--neg, #BE4B42); }
.oc-n-warn { background: var(--wash, #F4F5F7); color: var(--ink, #16161A); }
.oc-n-ok { background: var(--accent-tint, rgba(47,90,240,.08)); color: var(--ink, #16161A); }
.oc-n-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* composer */
.oc-compose { display: flex; gap: 8px; align-items: flex-end; }
.oc-input { flex: 1; font-family: inherit; font-size: 13px; resize: vertical; min-height: 40px; max-height: 140px;
  border: 1px solid var(--hairline, var(--faint, #E4E4E9)); border-radius: var(--r-3, 8px); padding: 8px 10px; background: var(--panel, #fff); color: var(--ink, #16161A); }
.oc-input:focus, .oc-field input:focus { outline: 2px solid var(--accent, #2F5AF0); outline-offset: 1px; }

/* sheet mode: a pill launcher bottom-left; the panel opens above it */
.oc-launch { position: fixed; left: 24px; bottom: 24px; z-index: 900; font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; border-radius: 999px; padding: 10px 18px; background: var(--accent, #2F5AF0); color: #fff;
  border: 1px solid var(--accent, #2F5AF0); box-shadow: var(--shadow, 0 8px 24px -14px rgba(22,22,26,.14)); transition: .15s;
  display: inline-flex; align-items: center; gap: 8px; }
.oc-launch:hover { background: var(--panel, #fff); color: var(--accent, #2F5AF0); }
.oc-badge { font-size: var(--fs-label, 11px); background: var(--panel, #fff); color: var(--accent, #2F5AF0); border-radius: 999px; padding: 1px 8px; }
.oc-launch:hover .oc-badge { background: var(--accent, #2F5AF0); color: #fff; }
.oc-sheet .oc-panel { display: none; position: fixed; left: 24px; bottom: 24px; z-index: 901; width: 380px; max-height: 70vh; }
.oc-sheet.oc-open .oc-panel { display: flex; }
.oc-sheet.oc-open .oc-launch { display: none; }
.oc-sheet .oc-scroll { max-height: none; }
@media (max-width: 560px) {
  .oc-sheet .oc-panel { left: 16px; right: 16px; bottom: 16px; width: auto; }
  .oc-launch { left: 16px; bottom: 16px; }
}