/* RoadmapMint support chat (automated answers): a compact messaging window. Everything is scoped to .rmc.
   Three regions (header / scrolling conversation / composer + footer). The window is as tall as its content, grows upward from
   a fixed bottom edge, and stops at 540px or the visible height; after that only the conversation scrolls.
   The only motion is a short fade-in and the CSS-only waiting dots (static for reduced-motion). */
.rmc {
  --rmc-me-bg: var(--clr-navy, #172B3A); --rmc-me-fg: #fff;
  --rmc-ink: var(--txt-primary, #172B3A); --rmc-soft: var(--txt-secondary, #3D5A6C); --rmc-muted: var(--txt-muted, #52707F);
  --rmc-line: var(--border, rgba(23,43,58,.12)); --rmc-surface: var(--bg-surface, #fff); --rmc-surface2: var(--bg-surface-2, #F3F5F5);
  --rmc-mint: var(--clr-accent, #34D399); --rmc-mint-ink: var(--clr-accent-txt, #0E7F58); --rmc-mint-lt: var(--clr-accent-lt, #DCFDF0);
  --rmc-m: 20px;
  position: fixed; right: var(--rmc-m); bottom: calc(var(--rmc-m) + var(--rmc-off, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 1050;                                    /* above the site navigation (1000) and announcement bar (1003); below the cookie notice (9999) */
  display: flex; flex-direction: column; align-items: flex-end; gap: 16px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 13px; line-height: 1.45; color: var(--rmc-ink);
}
[data-theme="dark"] .rmc { --rmc-me-bg: #34D399; --rmc-me-fg: #0b2a1f; --rmc-mint-ink: #34D399; }
.rmc *, .rmc *::before, .rmc *::after { box-sizing: border-box; }
.rmc button, .rmc input { font: inherit; letter-spacing: normal; text-transform: none; margin: 0; }
.rmc p, .rmc ul, .rmc ol, .rmc li, .rmc label, .rmc strong, .rmc div, .rmc span { letter-spacing: normal; text-transform: none; }
.rmc p, .rmc ul, .rmc ol, .rmc li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.rmc a { font-family: inherit; letter-spacing: normal; text-transform: none; }
.rmc :focus-visible { outline: 3px solid var(--rmc-mint); outline-offset: 2px; }
.rmc-close:focus-visible, .rmc-input:focus-visible, .rmc-send:focus-visible { outline-offset: -3px; }

/* launcher: a pill while closed, a round close button while the window is open (sizes follow the reference widget) */
.rmc-launch { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px 0 12px; border: 1px solid var(--rmc-line); border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 13.6px;
  background: var(--rmc-surface); color: var(--rmc-ink); box-shadow: 0 4px 12px rgba(23,43,58,.14); }
.rmc-lico { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--rmc-mint); color: #0b2a1f; }
.rmc-launch:hover { box-shadow: 0 6px 16px rgba(23,43,58,.22); }
.rmc.is-compact .rmc-launch, .rmc.is-open .rmc-launch { width: 52px; padding: 0; justify-content: center; }
.rmc.is-compact .rmc-launch-text, .rmc.is-open .rmc-launch-text, .rmc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rmc.is-open .rmc-lico { background: transparent; color: var(--rmc-ink); }

/* window: 372px wide, as tall as its content, at most 540px (or the visible height); only the conversation scrolls */
.rmc-panel { display: none; flex-direction: column; width: 372px; max-width: calc(100vw - 2 * var(--rmc-m));
  height: auto; max-height: min(540px, calc(var(--rmc-vh, 100vh) - var(--rmc-offh, 0px) - 2 * var(--rmc-m) - 68px));
  background: var(--rmc-surface); border: 1px solid var(--rmc-line); border-radius: 16px; box-shadow: 0 8px 32px rgba(23,43,58,.22); overflow: hidden; }
.rmc.is-open .rmc-panel { display: flex; }
.rmc-panel:focus { outline: none; }

/* 1. header */
.rmc-head { position: relative; flex: none; display: flex; align-items: center; gap: 9px; padding: 12px 44px 12px 14px; background: var(--rmc-surface); border-bottom: 1px solid var(--rmc-line); }
.rmc-mark { flex: none; }
.rmc-m1 { fill: var(--rmc-ink); }
.rmc-m2 { fill: #34D399; }
.rmc-hav { position: relative; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--rmc-mint-lt); }
.rmc-title { flex: 1; min-width: 0; }
.rmc-title strong { display: block; font-size: 13.6px; font-weight: 700; line-height: 1.3; }
.rmc-title span { display: block; font-size: 11.2px; line-height: 1.3; margin-top: 1px; color: var(--rmc-soft); }
.rmc-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--rmc-soft); cursor: pointer; }
.rmc-close:hover { background: var(--rmc-surface2); color: var(--rmc-ink); }

/* 2. conversation: the only region that scrolls */
.rmc-log { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; background: var(--rmc-surface2); overscroll-behavior: contain; }
.rmc-log > *, .rmc-turn > * { flex: none; }
.rmc-turn { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-left: 30px; }
.rmc-av { position: absolute; left: 0; top: 0; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--rmc-mint-lt); }
.rmc-msg { max-width: 92%; padding: 9px 12px; border-radius: 14px; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5; text-align: left; white-space: normal; }
.rmc-me { white-space: pre-wrap; }
.rmc .rmc-rich > * + * { margin-top: 8px; }
.rmc .rmc-rich .rmc-lbl { margin-top: 10px; margin-bottom: -5px; font-weight: 600; }
.rmc .rmc-rich > .rmc-lbl:first-child { margin-top: 0; }
.rmc .rmc-rich strong { font-weight: 600; }
.rmc .rmc-rich .rmc-list { padding-left: 18px; }
.rmc .rmc-rich ul.rmc-list { list-style: disc; }
.rmc .rmc-rich ol.rmc-list { list-style: decimal; }
.rmc .rmc-rich .rmc-list li { display: list-item; padding-left: 2px; }
.rmc .rmc-rich .rmc-list li + li { margin-top: 4px; }
.rmc .rmc-rich .rmc-list li::marker { color: var(--rmc-muted); }
.rmc-bot { align-self: flex-start; background: var(--rmc-surface); border: 1px solid var(--rmc-line); border-bottom-left-radius: 4px; }
.rmc-me { align-self: flex-end; background: var(--rmc-me-bg); color: var(--rmc-me-fg); border-bottom-right-radius: 4px; }

/* waiting dots: CSS only, present only while a request is pending */
.rmc-typing { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; min-width: 52px; }
.rmc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--rmc-soft); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .rmc-typing i { animation: rmc-dot 1.2s ease-in-out infinite; }
  .rmc-typing i:nth-child(2) { animation-delay: .15s; }
  .rmc-typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes rmc-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
}

/* what sits under an answer: one primary action, other pages, a question back, related questions */
.rmc-primary, .rmc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rmc .rmc-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px; border: 0; border-radius: 10px; font-size: 13px; line-height: 1.2; background: var(--rmc-mint); color: #0b2a1f; font-weight: 600; text-decoration: none; cursor: pointer; }
.rmc .rmc-cta:hover { background: var(--clr-accent-dk, #22B87D); color: #0b2a1f; }
.rmc .rmc-cta[disabled] { opacity: .6; cursor: default; }
.rmc .rmc-wide { width: 100%; margin-top: 10px; }
.rmc-links { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.rmc .rmc-link { color: var(--rmc-mint-ink); font-size: 12.5px; line-height: 1.4; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 28px; display: inline-flex; align-items: center; }
.rmc .rmc-link:hover { color: var(--rmc-mint-ink); text-decoration-thickness: 2px; }
/* a question back: options, clearly not messages */
.rmc-choices { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.rmc .rmc-choice { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; padding: 6px 12px; font-size: 13px; line-height: 1.35; font-weight: 600; text-align: left; border: 1.5px solid var(--rmc-mint-ink); border-radius: 10px; background: transparent; color: var(--rmc-mint-ink); cursor: pointer; }
.rmc .rmc-choice::after { content: '\203A'; flex: none; font-size: 16px; line-height: 1; }
.rmc .rmc-choice:hover { background: var(--rmc-mint-lt); color: var(--rmc-ink); }
[data-theme="dark"] .rmc .rmc-choice:hover { background: rgba(52,211,153,.14); color: #fff; }
.rmc-related { width: 100%; }
.rmc-label { margin: 0 0 5px; font-size: 11.5px; line-height: 1.3; font-weight: 600; color: var(--rmc-muted); }
.rmc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rmc .rmc-chip { min-height: 28px; padding: 4px 10px; text-align: left; font-size: 12px; line-height: 1.3; border: 1px solid var(--rmc-line); border-radius: 999px; background: var(--rmc-surface); color: var(--rmc-ink); cursor: pointer; }
.rmc .rmc-chip:hover { border-color: var(--rmc-mint-ink); background: var(--rmc-mint-lt); color: var(--rmc-ink); }
[data-theme="dark"] .rmc .rmc-chip:hover { background: rgba(52,211,153,.14); color: #fff; }
.rmc-quick { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 10px; background: var(--rmc-surface2); border-top: 1px solid var(--rmc-line); }
.rmc .rmc-quick .rmc-chip { min-height: 28px; padding: 5px 11px; font-size: 12px; white-space: nowrap; }

/* order help forms */
.rmc-flowturn { padding-left: 0; }
.rmc-flow { width: 100%; padding: 12px; border: 1px solid var(--rmc-line); border-radius: 12px; background: var(--rmc-surface); font-size: 13px; line-height: 1.5; }
.rmc-flow-h { margin-bottom: 8px; font-size: 13.5px; line-height: 1.3; font-weight: 700; }
.rmc-flow-t { font-size: 13px; line-height: 1.5; }
.rmc .rmc-flow-b > * + * { margin-top: 8px; }
.rmc .rmc-fform > * + * { margin-top: 8px; }
.rmc-field label { display: block; margin-bottom: 3px; font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--rmc-soft); }
.rmc .rmc-fin { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--rmc-line); border-radius: 8px; font-size: 13px; background: var(--rmc-surface); color: var(--rmc-ink); }
.rmc .rmc-fin[aria-invalid] { border-color: #B42318; }
[data-theme="dark"] .rmc .rmc-fin[aria-invalid] { border-color: #FCA5A5; }
.rmc .rmc-fin::placeholder { color: var(--rmc-muted); opacity: 1; }
.rmc-ferr { margin-top: 3px; font-size: 12px; line-height: 1.4; color: #B42318; }
[data-theme="dark"] .rmc-ferr { color: #FCA5A5; }
.rmc-ferr[hidden] { display: none; }
.rmc-ts { min-height: 0; }
.rmc-live:empty { display: none; }
.rmc-note { padding: 8px 10px; border-radius: 8px; border-left: 3px solid var(--rmc-muted); background: var(--rmc-surface2); font-size: 12.5px; line-height: 1.45; }
.rmc .rmc-note > * + * { margin-top: 6px; }
.rmc-note.is-ok { border-left-color: #16A34A; }
.rmc-note.is-warn { border-left-color: #D97706; }
.rmc-note.is-err { border-left-color: #B42318; }
.rmc-chip2 { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 1.4; font-weight: 700; background: var(--rmc-surface2); color: var(--rmc-ink); border: 1px solid var(--rmc-line); }
.rmc-chip2.is-ok { background: #DCFCE7; color: #14532D; border-color: #86EFAC; }
.rmc-chip2.is-warn { background: #FEF3C7; color: #78350F; border-color: #FCD34D; }
.rmc-chip2.is-err { background: #FEE2E2; color: #7F1D1D; border-color: #FCA5A5; }
[data-theme="dark"] .rmc-chip2.is-ok { background: rgba(34,197,94,.16); color: #BBF7D0; border-color: rgba(34,197,94,.4); }
[data-theme="dark"] .rmc-chip2.is-warn { background: rgba(245,158,11,.16); color: #FDE68A; border-color: rgba(245,158,11,.4); }
[data-theme="dark"] .rmc-chip2.is-err { background: rgba(239,68,68,.16); color: #FECACA; border-color: rgba(239,68,68,.4); }
.rmc-foot { display: flex; flex-wrap: wrap; gap: 0 14px; padding-top: 4px; border-top: 1px solid var(--rmc-line); margin-top: 10px; }
.rmc .rmc-tbtn { min-height: 32px; padding: 0; border: 0; background: none; color: var(--rmc-mint-ink); font-size: 12.5px; line-height: 1.3; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* error that keeps the unsent question */
.rmc-error { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 14px; font-size: 12px; background: #FEF2F2; color: #7F1D1D; border-top: 1px solid #FECACA; }
.rmc-error[hidden] { display: none; }
[data-theme="dark"] .rmc-error { background: #3A1818; color: #FECACA; border-top-color: #5B2424; }
.rmc-retry { flex: none; min-height: 28px; padding: 0 10px; font-size: 12px; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; font-weight: 600; cursor: pointer; }

/* 3. composer */
.rmc-form { flex: none; display: flex; gap: 7px; padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px)); background: var(--rmc-surface); border-top: 1px solid var(--rmc-line); }
.rmc-input { flex: 1; min-width: 0; height: 38px; padding: 0 11px; border: 1px solid var(--rmc-line); border-radius: 10px; font-size: 13.1px; background: var(--rmc-surface); color: var(--rmc-ink); }
.rmc-input::placeholder { color: var(--rmc-muted); opacity: 1; }
.rmc-send { flex: none; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer; font-size: 13.1px; font-weight: 600; background: var(--clr-navy, #172B3A); color: #fff; }
[data-theme="dark"] .rmc-send { background: var(--rmc-mint); color: #0b2a1f; }
.rmc-send[disabled] { opacity: .5; cursor: default; }

/* privacy notice by the composer: one small line; the details scroll inside a capped region so the window never grows past its height rules */
.rmc .rmc-priv { flex: none; padding: 6px 14px 0; background: var(--rmc-surface); border-top: 1px solid var(--rmc-line); }
.rmc .rmc-priv-l { margin: 0; font-size: 11px; line-height: 1.4; color: var(--rmc-muted); }
.rmc .rmc-priv-b { display: inline; min-height: 24px; padding: 0; border: 0; background: none; color: var(--rmc-mint-ink); font-size: 11px; line-height: 1.4; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rmc .rmc-priv-r { max-height: min(150px, 28vh); overflow-y: auto; overscroll-behavior: contain; margin: 4px 0 2px; padding: 8px 10px; border-radius: 8px; background: var(--rmc-surface2); color: var(--rmc-ink); font-size: 11.5px; line-height: 1.45; }
.rmc .rmc-priv-r[hidden] { display: none; }
.rmc .rmc-priv-r p { margin: 0 0 6px; }
.rmc .rmc-priv-r p:last-child { margin-bottom: 0; }
.rmc .rmc-priv-r a { font-size: 11.5px; }
.rmc-priv + .rmc-form { border-top: 0; padding-top: 6px; }

/* phones (up to 640px): side margins, a round launcher, and the window follows the visible area (keyboard) and the safe areas */
@media (max-width: 640px) {
  .rmc { --rmc-m: 12px; }
  .rmc:not(.is-open) .rmc-launch { width: 52px; padding: 0; justify-content: center; }
  .rmc:not(.is-open) .rmc-launch-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rmc.is-open { left: var(--rmc-m); right: var(--rmc-m); }
  .rmc-panel { width: 100%; max-width: none; }
  .rmc-msg { max-width: 94%; }
}
@media (max-width: 640px) and (pointer: coarse) { .rmc-input, .rmc .rmc-fin { font-size: 16px; } }   /* stops iOS zooming into the field */
/* on-screen keyboard open: the launcher steps aside so the window keeps the visible height */
.rmc.is-kb .rmc-launch { display: none; }
.rmc.is-kb .rmc-panel { max-height: min(540px, calc(var(--rmc-vh, 100vh) - 2 * var(--rmc-m))); }
@media (prefers-reduced-motion: no-preference) { .rmc-turn, .rmc-me, .rmc-typing { animation: rmc-in .15s ease-out both; } @keyframes rmc-in { from { opacity: 0; } } }
@media print { .rmc { display: none; } }

/* Navigation assistant: question rows, small groups and a persistent help footer. */
.rmc-menu { display: flex; flex-direction: column; gap: 6px; padding: 11px; border: 1px solid var(--rmc-line); border-radius: 12px; background: var(--rmc-surface); }
.rmc-menu-title { font-size: 11.5px; font-weight: 600; color: var(--rmc-soft); margin-bottom: 3px; }
.rmc-nav-question { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 9px 10px; text-align: left; line-height: 1.4; border: 1px solid var(--rmc-line); border-radius: 8px; color: var(--rmc-ink); background: var(--rmc-surface); cursor: pointer; overflow-wrap: anywhere; }
.rmc-nav-question:hover { background: var(--rmc-mint-lt); border-color: var(--rmc-mint); }
.rmc-nav-arrow { flex: none; color: var(--rmc-mint-ink); font-size: 18px; }
.rmc-menu-pages { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; }
.rmc-page-count { font-size: 11px; color: var(--rmc-muted); }
.rmc-quick { align-items: center; justify-content: space-between; padding: 9px 14px; }
.rmc-quick .rmc-link { font-size: 12px; }
.rmc-nav-question:disabled { opacity: .6; cursor: default; }
.rmc [hidden] { display: none !important; }
.rmc-popular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.rmc-shortcut { min-height: 40px; padding: 8px; border: 1px solid var(--rmc-mint); border-radius: 9px; background: var(--rmc-mint-lt); color: var(--rmc-ink); text-align: left; font-weight: 600; line-height: 1.35; cursor: pointer; }
.rmc-shortcut:hover { border-color: var(--rmc-mint-ink); }
.rmc-browse-label { margin-top: 8px; }
.rmc-details { border: 0; margin: 10px 0 0; padding: 0; background: none; color: inherit; box-shadow: none; }
.rmc-details > summary { padding: 3px 0; color: var(--rmc-mint-ink); cursor: pointer; font-size: 12px; font-weight: 600; }
.rmc-detail-body { padding-top: 8px; }
.rmc-detail-body > * + * { margin-top: 8px; }
.rmc-detail-body .rmc-list { padding-left: 18px; }