/* Diamond, the site assistant. Reworked from the ChatBot_OMG prototype's widget/chatbot.css.
   The panel FLOATS: a 25rem card in the bottom-right corner that never touches the page's
   own layout, so nothing reflows, nothing gets clipped, and the article behind it stays
   scrollable while you ask about it. That is what airline and travel sites do, and it is the
   right call for a marketing site - pushing the page sideways is a web-app pattern that only
   pays off when the reader needs to compare chat and content side by side.
   On a phone it goes full screen, which is the one case where background scroll is locked.
   Everything is drawn with the site's own tokens from styles.css - no second palette. */

#omg-chat {
  /* 25rem x 37.5rem is the conventional floating-chat footprint: wide enough for a
     comfortable line length, short enough to leave the page visible around it. */
  --chat-width: 25rem;
  --chat-height: 37.5rem;
  --chat-edge: 1.25rem;
  /* Placed against the site's own ladder, not guessed: .landing-chrome is 100, and the mobile
     picker sheets and the packages book bar are 200, so the old 62 put the full-screen phone
     panel - close button and all - underneath the site header. The panel clears all of it and
     stays under .skip-link (1000). The launcher deliberately stays BELOW 200 so it can never
     paint over a booking sheet; where it would collide with the book bar it moves instead. */
  --chat-z-launcher: 60;
  --chat-z-panel: 300;
  /* A fixed scale, not a pile of near-identical values. The ported CSS had accumulated a dozen
     (.86/.84/.82/.8/.78/.76/.74rem), which is what made the panel read as unfinished next to
     the rest of the site. Every rule below picks one of these and nothing else.
     Two display sizes: the opening question, and every heading inside the panel. Three
     headings at 18/17/16px was the same mistake one level up - the close screen and the gate
     are the same kind of surface and have no business being set differently. */
  --chat-fs-lead: 1.125rem;
  --chat-fs-title: 1rem;
  --chat-fs-md: .9375rem;
  --chat-fs-body: .875rem;
  --chat-fs-sm: .8125rem;
  --chat-fs-xs: .75rem;
  --chat-fs-micro: .6875rem;
  /* One control size, so the composer buttons, the header controls and the inputs all sit on
     the same rhythm and clear the 44px touch minimum where they need to. */
  --chat-control: 2.75rem;
  --chat-control-sm: 2rem;
  font-family: var(--font-ui);
  color: var(--color-ink);
}

/* :where() drops this reset to zero specificity, so a component's own font-size wins.
   Written as `#omg-chat button` it scored an id plus an element and outranked every class rule
   in this file, so the font size each component asked for was silently discarded and every
   button in the widget rendered at the page's inherited 16px - the chips, the suggestions, the
   flow menu, the gate. That is why a follow-up chip read louder than the 14px answer above it,
   and why setting the chips one step down the scale appeared to do nothing at all. */
:where(#omg-chat) button { font: inherit; cursor: pointer; }
#omg-chat *, #omg-chat *::before, #omg-chat *::after { box-sizing: border-box; }

.omg-chat-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- launcher ---- */

.omg-chat-launcher {
  position: fixed;
  /* env() is 0 everywhere except a notched phone, where it keeps the pill clear of the home
     indicator instead of sitting half under it. */
  right: calc(var(--chat-edge) + env(safe-area-inset-right));
  bottom: calc(var(--chat-edge) + env(safe-area-inset-bottom));
  z-index: var(--chat-z-launcher);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: .4rem .5rem .4rem 1rem;
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-pill);
  background: var(--color-cloud);
  box-shadow: var(--shadow-raised);
  transition: transform var(--ease), box-shadow var(--ease);
}
.omg-chat-launcher:hover { transform: translateY(-2px); box-shadow: var(--shadow-floating); }
.omg-chat-launcher[hidden] { display: none; }
.omg-chat-launcher-copy { display: grid; text-align: right; line-height: 1.25; }
.omg-chat-launcher-copy strong { font-size: var(--chat-fs-body); font-weight: 600; }
.omg-chat-launcher-copy small { font-size: var(--chat-fs-xs); color: var(--color-ink-soft); }
.omg-chat-launcher-icon img {
  display: block; width: 3rem; height: 3rem; border-radius: 50%;
}

/* The tour package pages pin a two-button book bar to the bottom of a phone screen, 4.5rem tall
   (the figure the page itself pads the body by) at z-index 200. Sit above it rather than behind
   it: an always-on launcher must never cover a book button, and must never be covered by one.
   The range query is the exact complement of the packages breakpoint that hides that bar. */
@media (width < 56.25rem) {
  body.mk-has-stickybar .omg-chat-launcher {
    bottom: calc(4.5rem + var(--chat-edge) + env(safe-area-inset-bottom));
  }
}

/* The site's mobile drawer is z-index 5 and the launcher is 60, so with the menu open the pill
   floats over the nav links - and on a short phone the drawer reaches the bottom of the screen.
   Yield to the menu: the launcher is a persistent affordance, the open menu is a deliberate act. */
body:has([data-site-menu][aria-expanded="true"]) .omg-chat-launcher {
  visibility: hidden; opacity: 0;
}

/* A phone keeps the label. A bare circle does not say what it opens, and the label is the one
   change that reliably lifts opens over an unlabelled bubble - so it is tightened, never
   stripped, and the phone and desktop launchers stay recognisably the same control.
   Same 640px breakpoint the site itself uses for phone layout, and the same one the panel
   goes full screen at, so the launcher and the panel never disagree about what a phone is. */
@media (max-width: 640px) {
  .omg-chat-launcher { gap: var(--space-2); padding: .35rem .4rem .35rem .85rem; }
  /* 2.5rem avatar + padding still clears the 44px minimum tap target. */
  .omg-chat-launcher-icon img { width: 2.5rem; height: 2.5rem; }
}

/* ---- the panel ---- */

.omg-chat-window {
  position: fixed;
  right: calc(var(--chat-edge) + env(safe-area-inset-right));
  bottom: calc(var(--chat-edge) + env(safe-area-inset-bottom));
  z-index: var(--chat-z-panel);
  display: flex;
  flex-direction: column;
  width: var(--chat-width);
  /* Never taller than the viewport allows, so the panel cannot run off the top of a laptop
     screen or under a phone's browser chrome. */
  height: min(var(--chat-height), calc(100dvh - 2 * var(--chat-edge)));
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-lg);
  background: var(--color-cloud);
  box-shadow: var(--shadow-floating);
  /* Clips the header, footer and the topic menu to the card's rounded corners. */
  overflow: hidden;
  /* Faded and nudged rather than display:none, so opening is a transition and a restored
     transcript is already laid out when it arrives. 180ms sits inside the 150-400ms band
     where the motion reads as responsive rather than either abrupt or sluggish. */
  opacity: 0;
  transform: translateY(.75rem) scale(.98);
  transform-origin: 100% 100%;
  transition: opacity 180ms ease, transform 180ms ease;
}
.omg-chat-window[data-state="open"],
.omg-chat-window[data-state="close-confirmation"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .omg-chat-window { transition: none; }
}
/* Fully inert while closed: a hidden panel must not be tabbable or hit-testable. */
.omg-chat-window[data-state="minimized"] { visibility: hidden; pointer-events: none; }

/* Full screen on a phone, where a 25rem card would leave unusable slivers of page around it
   and put the close button under the thumb zone. This is the ONE case where the background
   scroll is locked, and it is locked precisely because the chat genuinely covers the page -
   on desktop the article behind stays scrollable, which is the point of floating over it. */
@media (max-width: 640px) {
  .omg-chat-window {
    inset: 0;
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    transform: translateY(1rem);
  }
  body.chat-open { overflow: hidden; }
}

/* ---- header ---- */

.omg-chat-header {
  position: relative;
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-mist);
  background: var(--color-paper);
}
.omg-chat-controls { position: absolute; top: .55rem; right: .6rem; display: flex; gap: .25rem; }
.omg-chat-control {
  position: relative;
  width: var(--chat-control-sm); height: var(--chat-control-sm); padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-ink-soft);
}
.omg-chat-control:hover { background: var(--color-cloud); border-color: var(--color-mist); color: var(--color-ink); }
/* Drawn rather than iconified: two glyphs is not worth an icon font or an extra request. */
.omg-chat-minimize::before,
.omg-chat-close::before, .omg-chat-close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: .8rem; height: 1.5px; background: currentColor;
}
.omg-chat-minimize::before { transform: translate(-50%, -50%); }
.omg-chat-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.omg-chat-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.omg-chat-brand { display: flex; align-items: center; gap: var(--space-2); padding-right: 4.5rem; }
.omg-chat-brand img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.omg-chat-brand-copy { display: grid; line-height: 1.3; min-width: 0; }
.omg-chat-brand-copy strong { font-size: var(--chat-fs-md); font-weight: 600; }
/* The role line is the one field an admin can make long, so it truncates rather than
   wrapping the header into two rows and shoving the greeting down. */
.omg-chat-brand-copy small {
  font-size: var(--chat-fs-xs); color: var(--color-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.omg-chat-title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--chat-fs-lead);
  font-weight: 600;
  line-height: 1.3;
}
.omg-chat-title span { display: block; }
.omg-chat-greeting { color: var(--color-ink-soft); font-family: var(--font-ui); font-size: var(--chat-fs-xs); font-weight: 500; }
/* Once a conversation is running the headline is wasted height - and while the contact gate is
   up it is worse than wasted, because the gate has its own heading and needs the room. */
.omg-chat-window[data-conversation="true"] .omg-chat-title,
.omg-chat-window[data-gate="true"] .omg-chat-title { display: none; }

/* ---- body ---- */

.omg-chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.omg-chat-start-title { font-size: var(--chat-fs-sm); font-weight: 600; color: var(--color-ink-soft); }
.omg-chat-start-title[hidden], .omg-chat-suggestions[hidden] { display: none; }
.omg-chat-suggestions { display: grid; gap: var(--space-2); }
.omg-chat-suggestion {
  padding: .6rem .75rem;
  border: 1px solid var(--color-mist); border-radius: var(--radius-sm);
  background: var(--color-paper); color: var(--color-ink);
  text-align: left; font-size: var(--chat-fs-sm); line-height: 1.4;
}
.omg-chat-suggestion:hover { border-color: var(--color-taupe); background: var(--color-cloud); }

.omg-chat-messages { display: flex; flex-direction: column; gap: var(--space-3); }
.omg-chat-message { max-width: 100%; font-size: var(--chat-fs-body); line-height: 1.6; }
.omg-chat-message[data-role="user"] {
  align-self: flex-end;
  max-width: 85%;
  padding: .5rem .7rem;
  border-radius: var(--radius-md) var(--radius-md) .25rem var(--radius-md);
  background: var(--color-gold-soft);
  border: 1px solid var(--color-gold);
  overflow-wrap: anywhere;
}
.omg-chat-message[data-role="assistant"] { align-self: flex-start; }
.omg-chat-rich > *:first-child { margin-top: 0; }
.omg-chat-rich > *:last-child { margin-bottom: 0; }
.omg-chat-rich p { margin: 0 0 var(--space-2); }
.omg-chat-rich h3 { margin: var(--space-3) 0 var(--space-1); font-family: var(--font-display); font-size: var(--chat-fs-md); }
.omg-chat-rich h4 { margin: var(--space-3) 0 var(--space-1); font-size: var(--chat-fs-body); }
.omg-chat-rich ul, .omg-chat-rich ol { margin: 0 0 var(--space-2); padding-left: 1.15rem; }
.omg-chat-rich li { margin-bottom: .2rem; }
.omg-chat-rich code {
  padding: .05rem .25rem; border-radius: .25rem;
  background: var(--color-paper); font-size: .95em;
}
/* Narrow column plus a comparison table means horizontal scroll, not a squashed table. */
.omg-chat-table-wrap { overflow-x: auto; margin: 0 0 var(--space-2); }
.omg-chat-table-wrap table { border-collapse: collapse; width: 100%; font-size: var(--chat-fs-xs); }
.omg-chat-table-wrap th, .omg-chat-table-wrap td {
  padding: .3rem .45rem; border: 1px solid var(--color-mist); text-align: left; vertical-align: top;
}
.omg-chat-table-wrap th { background: var(--color-paper); font-weight: 600; white-space: nowrap; }

/* ---- generation status ---- */

.omg-chat-message[data-loading] { display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink-soft); font-size: var(--chat-fs-sm); }
.omg-chat-status-indicator { display: inline-flex; gap: .2rem; }
.omg-chat-status-indicator i {
  width: .35rem; height: .35rem; border-radius: 50%;
  background: var(--color-taupe); animation: omg-chat-pulse 1.1s infinite ease-in-out;
}
.omg-chat-status-indicator i:nth-child(2) { animation-delay: .15s; }
.omg-chat-status-indicator i:nth-child(3) { animation-delay: .3s; }
@keyframes omg-chat-pulse { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .omg-chat-status-indicator i { animation: none; opacity: .6; }
}

/* ---- citations and follow-ups ---- */

.omg-chat-extras-label {
  display: block; margin-bottom: .3rem;
  font-size: var(--chat-fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-ink-soft);
}
/* Sources collapse to one quiet line. They are the evidence for the answer above and stay one
   click away, but four wrapped citations under every reply cost more height than the reply
   itself - so the answer keeps the room and this asks for the space only when opened. */
.omg-chat-sources {
  align-self: flex-start;
  width: 100%;
  border-left: 3px solid var(--color-pine);
  padding-left: .55rem;
}
.omg-chat-sources-toggle {
  display: flex; align-items: center; gap: .3rem;
  /* Closed, this is the only thing showing, so it has to clear a fingertip on its own. */
  min-height: 1.75rem;
  color: var(--color-ink-soft);
  font-size: var(--chat-fs-xs); font-weight: 600;
  cursor: pointer;
  list-style: none;
}
/* Safari still paints the default triangle through ::-webkit-details-marker. */
.omg-chat-sources-toggle::-webkit-details-marker { display: none; }
.omg-chat-sources-toggle:hover { color: var(--color-ink); }
.omg-chat-sources-toggle::before {
  content: ""; flex: 0 0 auto;
  width: .3rem; height: .3rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--ease);
}
.omg-chat-sources[open] .omg-chat-sources-toggle::before { transform: rotate(45deg); }
.omg-chat-sources[open] .omg-chat-sources-toggle { color: var(--color-ink); }
.omg-chat-source {
  display: block;
  padding: .1rem 0;
  color: var(--color-pine);
  font-size: var(--chat-fs-xs);
  line-height: 1.45;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.omg-chat-sources[open] .omg-chat-source:first-of-type { margin-top: .15rem; }
/* A page title plus a section name wraps to two lines in a 25rem panel, so the gap BETWEEN
   citations has to be clearly larger than the gap between one citation's own two lines -
   otherwise four wrapped sources read as eight unrelated ones. */
.omg-chat-source + .omg-chat-source { margin-top: .3rem; }
.omg-chat-source:hover { color: var(--color-bronze-deep); }

.omg-chat-followups, .omg-chat-escalate { align-self: flex-start; display: flex; flex-wrap: wrap; gap: var(--space-1); width: 100%; }
.omg-chat-followups .omg-chat-extras-label { flex: 1 0 100%; }
/* Chips are an offer, not the content: set them a step below the answer so a suggested question
   cannot read as loudly as the reply it follows. At --chat-fs-sm they competed with the prose,
   and "Ask the team to contact me" came out looking like a headline. */
.omg-chat-followup {
  padding: .3rem .6rem;
  border: 1px solid var(--color-mist); border-radius: var(--radius-pill);
  background: var(--color-cloud); color: var(--color-ink);
  font-size: var(--chat-fs-xs); line-height: 1.35; text-align: left; text-decoration: none;
}
.omg-chat-followup:hover { border-color: var(--color-taupe); background: var(--color-paper); }
.omg-chat-followup-menu { color: var(--color-ink-soft); }
.omg-chat-escalate { margin-top: -.2rem; }
.omg-chat-escalate .omg-chat-followup { border-color: var(--color-pine); color: var(--color-pine); font-weight: 600; }

/* ---- forms: the contact gate and the in-chat enquiry forms ---- */

.omg-chat-gate, .omg-chat-enquiry {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-md);
  background: var(--color-paper);
}
.omg-chat-gate[hidden] { display: none; }
.omg-chat-gate-title, .omg-chat-enquiry-title {
  margin: 0; font-family: var(--font-display); font-size: var(--chat-fs-title); font-weight: 600;
}
.omg-chat-gate-lead { margin: 0; font-size: var(--chat-fs-sm); line-height: 1.5; color: var(--color-ink-soft); }
.omg-chat-gate-hint { margin: 0; font-size: var(--chat-fs-xs); line-height: 1.45; color: var(--color-ink-soft); }

.omg-chat-field { display: grid; gap: .25rem; }
.omg-chat-field > span { font-size: var(--chat-fs-xs); font-weight: 600; color: var(--color-ink-soft); }
.omg-chat-field input, .omg-chat-field select, .omg-chat-field textarea {
  width: 100%;
  /* --chat-control clears the 44px minimum touch target, so the same markup works on a phone. */
  min-height: var(--chat-control);
  padding: .45rem .65rem;
  border: 1px solid var(--color-mist); border-radius: var(--radius-sm);
  background: var(--color-cloud); color: var(--color-ink);
  font: inherit; font-size: var(--chat-fs-body);
}
.omg-chat-field textarea { min-height: 3.5rem; resize: vertical; }
.omg-chat-field input:focus-visible, .omg-chat-field select:focus-visible, .omg-chat-field textarea:focus-visible {
  outline: 2px solid var(--color-pine); outline-offset: 1px; border-color: var(--color-pine);
}

.omg-chat-consent { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--chat-fs-xs); line-height: 1.45; color: var(--color-ink-soft); }
.omg-chat-consent input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .1rem; }
.omg-chat-consent a { color: var(--color-pine); }
.omg-chat-gate-error:empty { display: none; }
.omg-chat-gate-error { margin: 0; font-size: var(--chat-fs-xs); font-weight: 600; color: var(--color-flame); }

.omg-chat-gate-submit {
  min-height: var(--chat-control);
  border: 0; border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-cloud);
  font-weight: 600; font-size: var(--chat-fs-sm);
}
.omg-chat-gate-submit:hover:not(:disabled) { background: var(--color-bronze-deep); }
.omg-chat-gate-submit:disabled { opacity: .6; cursor: default; }
/* Skip is a real, visible choice, not a greyed-out afterthought - a gate with a hidden exit
   just costs you the conversation as well as the contact. */
.omg-chat-gate-skip, .omg-chat-confirm-keep {
  min-height: 2.25rem;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-ink-soft);
  font-size: var(--chat-fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.omg-chat-gate-skip:hover, .omg-chat-confirm-keep:hover { color: var(--color-ink); }
.omg-chat-enquiry-actions { display: flex; flex-direction: column; gap: var(--space-1); }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.omg-chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- composer ---- */

.omg-chat-input-section { position: relative; flex: 0 0 auto; border-top: 1px solid var(--color-mist); background: var(--color-cloud); }
.omg-chat-input-section[hidden] { display: none; }
.omg-chat-form { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.omg-chat-input {
  flex: 1; min-width: 0; min-height: var(--chat-control);
  padding: .45rem .75rem;
  border: 1px solid var(--color-mist); border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-ink);
  font: inherit; font-size: var(--chat-fs-body);
}
.omg-chat-input:focus-visible { outline: 2px solid var(--color-pine); outline-offset: 1px; }
.omg-chat-send, .omg-chat-menu-toggle {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: var(--chat-control); height: var(--chat-control); padding: 0;
  border: 1px solid var(--color-mist); border-radius: 50%;
  background: var(--color-cloud); color: var(--color-ink);
}
.omg-chat-send { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-cloud); }
.omg-chat-send:hover:not(:disabled) { background: var(--color-bronze-deep); border-color: var(--color-bronze-deep); }
.omg-chat-send:disabled { opacity: .5; cursor: default; }
/* Topic menu: a proper hamburger. Three bars, drawn as one SVG path on the 24px grid so they
   are the same length, evenly spaced and pixel-crisp at any zoom - which is exactly what the
   three stacked <span>s it replaces could not promise, since a 1px border on a fractional
   rem height rounds differently per bar per device pixel ratio.
   No rotation: a hamburger that spins is not a hamburger. The open state is carried by fill
   and border, driven off aria-expanded so the visual and the accessible state cannot drift. */
.omg-chat-menu-toggle { color: var(--color-ink-soft); }
.omg-chat-menu-toggle:hover { border-color: var(--color-taupe); background: var(--color-paper); color: var(--color-ink); }
.omg-chat-menu-toggle svg { display: block; }
.omg-chat-menu-toggle[aria-expanded="true"] {
  border-color: var(--color-ink); background: var(--color-paper); color: var(--color-ink);
}

/* ---- guided flow menu ---- */

.omg-chat-flow-menu {
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: calc(100% - var(--space-1));
  /* 20rem keeps the menu inside a 37.5rem floating panel with the transcript still visible
     behind it; the dvh term is what saves it on a short phone in landscape. */
  max-height: min(20rem, 60dvh); overflow-y: auto;
  border: 1px solid var(--color-mist); border-radius: var(--radius-md);
  background: var(--color-cloud);
  box-shadow: var(--shadow-raised);
}
.omg-chat-flow-menu[hidden] { display: none; }
.omg-chat-flow-header {
  position: sticky; top: 0;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-mist);
  background: var(--color-paper);
}
.omg-chat-flow-title { flex: 1; font-size: var(--chat-fs-sm); font-weight: 600; }
.omg-chat-flow-back, .omg-chat-flow-close {
  width: var(--chat-control-sm); height: var(--chat-control-sm); padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-ink-soft); font-size: var(--chat-fs-title); line-height: 1;
}
.omg-chat-flow-back[hidden] { display: none; }
.omg-chat-flow-back:hover, .omg-chat-flow-close:hover { background: var(--color-cloud); color: var(--color-ink); }
.omg-chat-flow-options { display: grid; padding: var(--space-1); }
.omg-chat-flow-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 2.5rem; padding: .45rem .65rem;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-ink);
  font-size: var(--chat-fs-sm); line-height: 1.4; text-align: left; text-decoration: none;
}
.omg-chat-flow-option:hover, .omg-chat-flow-option:focus-visible { background: var(--color-paper); }
/* The trailing glyph distinguishes drilling down (a submenu) from acting (sends the question
   or opens a form), so a visitor knows which options cost them a turn. */
.omg-chat-flow-option span:last-child { flex: 0 0 auto; color: var(--color-taupe); }

/* ---- footer disclaimer ---- */

.omg-chat-footer {
  flex: 0 0 auto;
  padding: .4rem var(--space-3) .6rem;
  border-top: 1px solid var(--color-mist);
  background: var(--color-paper);
  font-size: var(--chat-fs-micro); line-height: 1.45; text-align: center;
  color: var(--color-ink-soft);
}

/* ---- close confirmation + feedback ---- */

.omg-chat-confirm {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: var(--space-4);
  background: rgb(52 47 40 / 45%);
}
.omg-chat-confirm[aria-hidden="true"] { display: none; }
.omg-chat-confirm-inner {
  display: grid; gap: var(--space-3);
  width: 100%; max-height: 100%; overflow-y: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-cloud);
  box-shadow: var(--shadow-floating);
}
.omg-chat-confirm-title { margin: 0; font-family: var(--font-display); font-size: var(--chat-fs-title); }
/* Both exits sit side by side and read as equals. Leaving feedback is the primary because it
   is the useful one, but ending without it is a full-size labelled button on the same row,
   not a link hidden under the fold - feedback is asked for here, never required. */
.omg-chat-confirm-actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.omg-chat-confirm-actions > button { flex: 1 1 0; }
.omg-chat-confirm-btn, .omg-chat-feedback-send {
  min-height: var(--chat-control);
  padding: .4rem .6rem;
  border: 1px solid var(--color-mist); border-radius: var(--radius-pill);
  background: var(--color-cloud); color: var(--color-ink);
  font-weight: 600; font-size: var(--chat-fs-sm); line-height: 1.25;
}
.omg-chat-confirm-btn:hover { border-color: var(--color-taupe); background: var(--color-paper); }
.omg-chat-feedback-send { border-color: var(--color-pine); background: var(--color-pine); color: var(--color-cloud); }
.omg-chat-feedback-send:hover:not(:disabled) { background: var(--color-bronze-deep); border-color: var(--color-bronze-deep); }
.omg-chat-feedback-send:disabled { opacity: .6; cursor: default; }
.omg-chat-confirm-keep { justify-self: center; }

.omg-chat-feedback-form { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-mist); }
.omg-chat-feedback-heading {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: 0; font-size: var(--chat-fs-sm); font-weight: 600;
}
.omg-chat-optional {
  padding: .1rem .4rem; border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-ink-soft);
  font-size: var(--chat-fs-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.omg-chat-feedback-options { display: grid; gap: .25rem; margin: 0; padding: 0; border: 0; }
.omg-chat-feedback-option { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--chat-fs-sm); line-height: 1.4; }
.omg-chat-feedback-option input { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .15rem; }
.omg-chat-feedback-comment { display: grid; gap: .25rem; font-size: var(--chat-fs-xs); font-weight: 600; color: var(--color-ink-soft); }
.omg-chat-feedback-comment textarea {
  min-height: 3.5rem; padding: .45rem .65rem; resize: vertical;
  border: 1px solid var(--color-mist); border-radius: var(--radius-sm);
  background: var(--color-paper); color: var(--color-ink); font: inherit; font-size: var(--chat-fs-sm);
}
.omg-chat-feedback-status:empty { display: none; }
.omg-chat-feedback-status { margin: 0; font-size: var(--chat-fs-xs); color: var(--color-ink-soft); }

/* Visible focus everywhere. The panel does not trap focus, so a keyboard user moves in and
   out of it freely and has to be able to see where they are. */
#omg-chat button:focus-visible, #omg-chat a:focus-visible {
  outline: 2px solid var(--color-pine);
  outline-offset: 2px;
}

/* ---- system UI insets (phone, full screen) ----

   Full screen means edge to edge, which on a notched phone puts the close button under the
   status bar and the disclaimer under the home indicator. Inset the chrome, not the panel, so
   the background still runs to the edges.

   This block MUST stay below the component rules it overrides. .omg-chat-header sets `padding`
   as a shorthand and .omg-chat-controls sets `top`, both at the same specificity as these
   selectors, so a copy of this block placed up with the panel geometry loses on source order and
   silently does nothing - which is exactly how it shipped the first time. */
@media (max-width: 640px) {
  .omg-chat-header { padding-top: calc(var(--space-4) + env(safe-area-inset-top)); }
  .omg-chat-controls { top: calc(.55rem + env(safe-area-inset-top)); }
  /* The disclaimer is always the last row, so insetting it lifts the composer clear too. */
  .omg-chat-footer { padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
}

@media print {
  #omg-chat { display: none; }
}