/* =============================================================
   GSM Outdoors – Genie Chat Theme
   Chainlit 2.11+

   KEY: Chainlit's own CSS loads AFTER the custom_css injection
   point, so any :root variable we set gets overridden by the
   Chainlit defaults (--primary: hot-pink, --accent: near-white).

   FIX: Define our overrides on #root (ID specificity = 100)
   which always beats :root (pseudo-class = 10), regardless of
   stylesheet load order.
   ============================================================= */

/* ── Palette Reference ─────────────────────────────────────────
   Dark forest green   #1B3828  = hsl(142, 35%, 16%)
   Orange-amber        #D07040  = hsl(22,  60%, 53%)
   Warm cream          #F5EDE5  = page background
   Near-white cream    #FBF7F3  = bot message bg
   ──────────────────────────────────────────────────────────── */

/* ── CSS Variable Overrides (HIGH SPECIFICITY = #root) ───────── */
#root {
  /* Orange user message bubbles (matches Figma target) */
  --accent:             29 100% 50%;
  --accent-foreground:  0 0% 100%;

  /* Orange for send button and primary actions */
  --primary:            22 60% 53%;
  --primary-foreground: 0 0% 100%;

  /* Focus ring – orange */
  --ring:               22 60% 53%;

  /* Muted / subtle – warm */
  --muted:              35 22% 93%;
  --muted-foreground:   30 12% 44%;

  /* Borders – warm gray */
  --border:             30 15% 85%;
  --input:              35 20% 95%;

  /* Cards / popovers */
  --card:               0 0% 100%;
  --card-foreground:    0 0% 5%;
}

/* ── Base ────────────────────────────────────────────────────── */
body,
#root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a2010;
}
#root {
  background-color: #f5f5f5 !important;
}

/* ── Widget layout: floating panel, bottom-right corner ───────── */
body {
  background-color: #c8beb6 !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Chainlit root = the chat panel widget */
#root {
  position: fixed !important;
  bottom: 20px !important;
  right: 60px !important;
  width: 420px !important; /* 2026-06-20: 380px→420px (from B2) */
  height: 754px !important; /* 2026-06-20: 600px→754px (from B2) */
  max-height: calc(100vh - 40px) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.32) !important;
  /* Off-canvas until .gsm-chat-open added by JS */
  transform: translateX(420px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), opacity 0.25s ease, width 0.3s ease, height 0.3s ease !important;
  z-index: 9990 !important;
  /* Flex column: header (64px) → chat (flex:1) → footer (28px) */
  display:        flex !important;
  flex-direction: column !important;
}
#root.gsm-chat-open {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* ── Hide Chainlit sidebar — widget shows chat only ──────────── */
/* Strategy A: known element / testid selectors */
aside,
[data-testid="thread-history"],
[data-testid="sidebar"] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  flex: none !important;
  padding: 0 !important;
}

/* Strategy B: shadcn Sheet / Radix panel when in closed state */
#root [data-state="closed"] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Chainlit's React root div — middle flex child that fills all remaining height.
   height:0 + flex:1 1 0px forces the div to consume ONLY its allocated flex space
   (600px - 64px header - 28px footer = 508px) rather than trying to be h-screen. */
#root > div:not(#gsm-custom-header):not(#gsm-powered-by) {
  flex:       1 1 0px !important;
  height:     0 !important;
  min-height: 0 !important;
  width:      100% !important;
  max-width:  100% !important;
  margin:     0 !important;
  overflow:   hidden !important;
  box-sizing: border-box !important;
}

/* Override Chainlit's h-screen (100vh) on the first inner wrapper so it
   uses the available widget height, not the full viewport height. */
#root > div:not(#gsm-custom-header):not(#gsm-powered-by) > div {
  height:     100% !important;
  max-height: 100% !important;
  min-width:  0 !important;
  overflow:   hidden !important;
}
#root > div:not(#gsm-custom-header):not(#gsm-powered-by) > div > div {
  min-width:  0 !important;
  max-height: 100% !important;
}

/* Chat message scroll area fills remaining height and scrolls */
#root .flex.flex-1.flex-col,
#root [class*="flex-1"][class*="flex-col"],
#root [class*="overflow-y-auto"] {
  flex:       1 1 auto !important;
  min-height: 0 !important;
  width:      100% !important;
}
#root [class*="overflow-y-auto"] {
  overflow-y: auto !important;
}

/* Input composer stays pinned to bottom */
#root [data-testid="chat-input"],
#root [class*="composer"],
#root [class*="input-container"] {
  flex-shrink: 0 !important;
  width:       100% !important;
}

/* ── Unread notification badge on bubble ───────────────────── */
#gsm-notif-badge {
  position:        absolute;
  top:             -6px;
  right:           -6px;
  min-width:       24px;
  height:          24px;
  padding:         0 4px;
  background:      #e53e3e;
  color:           #fff;
  border-radius:   50%;
  font-size:       11px;
  font-weight:     700;
  line-height:    24px;
  text-align:      center;
  pointer-events:  none;
  display:         none;
  box-sizing:      border-box;
  border:          2px solid #c8beb6;
  font-family:     'Inter', sans-serif;
  z-index:         10000;
}

/* ── Floating bubble button ──────────────────────────────────── */
#gsm-bubble {
  position: fixed;
  bottom: 20px;
  right: 60px; /* 2026-06-20: 20px→60px (from B2) */
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: #F5821F;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(208,112,64,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: transform .2s ease, box-shadow .2s ease, background .15s, opacity .2s ease;
}
#gsm-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(208,112,64,.7);
  background: #c06030;
}
/* Hide launcher when chat panel is open */
#gsm-bubble.gsm-bubble-active {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.6) !important;
}

/* ── Pre-chat panel (name form screen) ──────────────────────── */
#gsm-pre-chat-panel {
  position: fixed;
  bottom: 20px;
  right: 60px; /* 2026-06-20: 20px→60px (from B2) */
  width: 420px; /* 2026-06-20: 380px→420px (from B2) */
  height: 754px; /* 2026-06-20: 665px→754px (from B2) */
  max-height: calc(100vh - 40px);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.32);
  background: #f2f2f7; /* 2026-06-20: #f2f2f2→#f2f2f7 (from B2) */
  display: flex;
  flex-direction: column;
  z-index: 9995;
  overflow: hidden;
  font-family: 'Inter', -apple-system, sans-serif;
  /* Off-canvas until .gsm-panel-open */
  transform: translateX(420px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), opacity 0.25s ease;
}
#gsm-pre-chat-panel.gsm-panel-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Full-screen /chatbot variant ─────────────────────────────────────────
   html.gsm-fullscreen is added by custom.js only when the page was opened
   at /chatbot (see the guard at the top of that file) — "/" never gets this
   class, so none of this can ever affect the home page. */
.chatbot-page-body {
  background: #F2F2F7 !important;
}
html.gsm-fullscreen #root,
html.gsm-fullscreen #gsm-pre-chat-panel {
  top:           0 !important;
  left:          0 !important;
  right:         0 !important;
  bottom:        0 !important;
  width:         100vw !important;
  height:        100vh !important;
  max-width:     100vw !important;
  max-height:    100vh !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  transform:     none !important;
}
html.gsm-fullscreen .gsm-pcp-header {
  border-radius: 0 !important;
}
html.gsm-fullscreen #gsm-bubble {
  display: none !important;
}
/* 2026-07-30 (merge): hide both close buttons on /chatbot. A full-page chat has
   no bubble to collapse back to, so the X had nothing to do — it only added a
   dead .closed-fullview class (no rule for it exists anywhere), leaving a
   visibly inert button. Skipping the pre-chat form still works via the Start
   button, which startChat() accepts with every field blank. Inside widget3.js
   the widget draws its own close control over the iframe, so nothing is lost. */
html.gsm-fullscreen #gsm-pcp-x,
html.gsm-fullscreen #gsm-header-close {
  display: none !important;
}

/* Header — matches the chat widget header exactly */
.gsm-pcp-header {
  background:      #f5f5f5;
  padding:         12px 16px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  border-bottom:   1px solid #DEDEDE;
  border-radius:   16px 16px 0 0;
  flex-shrink:     0;
}
.gsm-pcp-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #f0e8e0;
  object-fit: contain;
}
.gsm-pcp-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gsm-pcp-name {
  font-size: 15px;
  font-weight: 700;
  color: #1a2010;
  line-height: 1.2;
}
.gsm-pcp-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6a7870;
}
.gsm-pcp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}
.gsm-pcp-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #8a9090;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
}
.gsm-pcp-close:hover { background: #f0e8e0; color: #333; }

/* Body */
.gsm-pcp-body {
  flex: 1;
  padding: 34px 42px 24px; /* 2026-06-20: 20px 24px 16px→34px 42px 24px (from B2) */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* 2026-06-20: removed gap: 12px; overflow-y: auto (from B2) */
}
.gsm-pcp-heading {
  font-size: 18px; /* 2026-06-20: 20px→18px (from B2) */
  font-weight: 600; /* 2026-06-20: 700→600 (from B2) */
  color: #242426; /* 2026-06-20: #1a1a1a→#242426 (from B2) */
  margin: 0 0 12px; /* 2026-06-20: 0→0 0 12px (from B2) */
  /* 2026-06-20: removed line-height: 1.3 (from B2) */
}
.gsm-pcp-sub {
  font-size: 16px; /* 2026-06-20: 14px→16px (from B2) */
  color: #2D2D2F; /* 2026-06-20: #666→#2D2D2F (from B2) */
  font-weight: 400;
  margin: 0 0 16px; /* 2026-06-20: 0→0 0 16px (from B2) */
  line-height: 25.52px; /* 2026-06-20: 1.5→25.52px (from B2) */
}
.gsm-pcp-inp {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 24px; /* 2026-06-20: 14px 16px→18px 24px (from B2) */
  font-size: 15px; /* 2026-06-20: 14px→15px (from B2) */
  color: #1a2010;
  outline: none;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  border-radius: 12px; /* 2026-06-20: 10px→12px (from B2) */
  border: 1.16px solid #DBDBDB; /* 2026-06-20: 1px solid #e0e0e0→1.16px solid #DBDBDB (from B2) */
  background: #F2F2F7; /* 2026-06-20: #fff→#F2F2F7 (from B2) */
}
.gsm-pcp-inp:focus {
  border-color: #d07040; /* 2026-06-20: #F5821F→#d07040 (from B2) */
  /* 2026-06-20: removed box-shadow (from B2) */
}
.gsm-pcp-inp::placeholder { color: #B8B8B8; font-style: italic; }

/* Footer */
.gsm-pcp-footer {
  padding: 0 24px 24px; /* 2026-06-20: 20px→24px bottom padding (from B2) */
  flex-shrink: 0;
}
.gsm-pcp-start {
  display: block; /* 2026-06-20: flex→block (from B2; second display:flex below overrides) */
  width: 100%;
  padding: 14px 0; /* 2026-06-20: 16px→14px (from B2) */
  background: #d07040; /* 2026-06-20: #F5821F→#d07040 (from B2) */
  color: #fff;
  border: none;
  border-radius: 12px; /* 2026-06-20: 50px→12px (from B2) */
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
  margin-bottom: 12px; /* 2026-06-20: 10px→12px (from B2) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px; /* 2026-06-20: 6px→4px (from B2) */
  width: 336px;
    margin-left: auto;
    margin-right: auto;
}
.gsm-pcp-start:hover { background: #c06030; } /* 2026-06-20: #d06a10→#c06030 (from B2) */
.gsm-pcp-powered {
  text-align: center;
  font-size: 11px;
  color: #AAA;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.11px;
  margin: 0;
}
.gsm-pcp-powered strong {
  color:       #AAA;
  font-weight: 700;
  font-style:  italic;
}

/* ── Injected custom chat header — first flex child of #root ─── */
#gsm-custom-header {
  flex-shrink: 0 !important;
  width:       100% !important;
  height:      64px !important;
  z-index:     9991 !important;
  box-sizing:  border-box !important;
}

/* Hide Chainlit's own header/toolbar (we supply our own) */
#root header,
#root #header,
#root [role="banner"],
#root #new-chat-button {
  display: none !important;
  height:  0 !important;
  padding: 0 !important;
  margin:  0 !important;
  overflow: hidden !important;
}

/* Status line: green dot + "Online" text */
.gsm-header-status {
  display:     flex !important;
  align-items: center !important;
  gap:         5px !important;
  margin-top:  2px !important;
}
.gsm-online-text {
  font-size:      12px !important;
  color:          #6a7870 !important;
  font-weight:    500 !important;
  letter-spacing: 0 !important;
}

/* ── Chat header — white card style (matches Figma target) ──── */
.gsm-header {  
  border-bottom: 1px solid #DEDEDE !important;
  border-top: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 30px !important;
  border-radius: 16px 16px 0 0 !important;
  flex-shrink: 0 !important;
}

.gsm-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.gsm-header-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* All header content — dark text */
.gsm-header,
.gsm-header span,
.gsm-header p,
.gsm-header svg,
.gsm-header a {
  color: #111111 !important;
}

.gsm-header button {
  color: #9a9a9a !important;
  background: none !important;
  border: none !important;
}
.gsm-header button:hover {
  background-color: #f0f0f0 !important;
  color: #333333 !important;
}

/* Avatar circle */
/* Avatar wrapper div */
.gsm-header-avatar {
  width:       40px !important;
  height:      40px !important;
  display:     flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.gsm-header img.logo,
.gsm-header img[alt="Genie"] {
  border-radius:    50% !important;
  object-fit:       contain !important;
  border:           2px solid #eeeeee !important;
  background-color: #f8f8f8 !important;
  width: 100%;
    height: 100%;
}

/* "Customer Support" title */
.gsm-header-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #242426 !important;
  line-height: 1.2 !important;
}

.gsm-header-subtitle {
  display: none !important;
}

/* ── Blank-box flash suppression ────────────────────────────────
   Chainlit creates [data-step-type="assistant_message"] with an empty <p>
   BEFORE the first streaming token arrives.  The white bubble (`.ai-message`)
   flashes briefly as an empty rectangle.

   Fix: use CSS :has() — it fires synchronously before first paint, so the
   bubble is invisible before the browser ever draws it.  The selector stops
   matching the instant the first character fills the <p>, causing an immediate
   reveal with zero JS timing dependency.

   :only-child guard: prevents the bubble from disappearing mid-stream when a
   new paragraph opens with an empty <p> alongside already-streamed content.

   The three selectors cover the range of Chainlit DOM structures:
     1. .ai-message → p (direct child)
     2. .ai-message → div → p (one wrapper level)
     3. .ai-message:empty  (no children at all during step init)
   ─────────────────────────────────────────────────────────────── */
[data-step-type="assistant_message"]:not([data-gsm-wait]) .ai-message:has(> p:empty:only-child),
[data-step-type="assistant_message"]:not([data-gsm-wait]) .ai-message:has(> div > p:empty:only-child),
[data-step-type="assistant_message"]:not([data-gsm-wait]) .ai-message:empty {
  opacity: 0 !important;
  pointer-events: none;
}

/* Online dot — green circle only, no text */
.gsm-online-badge {
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  border-radius: 50% !important;
  background: #09AA00 !important;
  font-size: 0 !important;
  color: transparent !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.gsm-online-badge::before { content: none !important; }


/* Close (X) button */
#gsm-header-close {
  background: none !important;
  border: none !important;
  cursor: pointer;
  font-size: 18px;
  color: #9a9a9a !important;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
}
#gsm-header-close:hover {
  background: #f0f0f0 !important;
  color: #444444 !important;
}


/* Chainlit inner composer wrapper — remove bottom padding */
#root div.flex-col.mx-auto.w-full.p-4.pt-0,
#root div[class*="p-4"][class*="pt-0"][class*="mx-auto"][class*="w-full"] {
  padding-bottom: 0px !important;
}

/* ── Footer / composer wrapper ───────────────────────────────── */
/* position:relative makes this the containing block for #query-send-btn (absolute).
   padding-right:56px reserves space so the textarea pill doesn't slide under the button. */
div:has(> #message-composer) {
  position:   relative !important;
  padding:    8px 68px 2px 12px !important;
  box-sizing: border-box !important;
}

/* ── Chat Input Composer — flex-row layout ───────────────────── */
/*
  Target layout (image 1):
    [  pill input area  .................. ]  [ orange square send btn ]

  Chainlit renders both inside #message-composer (flex-col by default).
  We switch it to flex-row so the textarea and send button sit side-by-side.
*/
#message-composer {
  /* Transparent wrapper — visual styling goes on the children */
  flex:          1 1 auto !important;
  display:       flex !important;
  background:    transparent !important;
  border:        none !important;
  box-shadow:    none !important;
  border-radius: 0 !important;
  min-height:    unset !important;
  padding:       0 !important;
  /* Switch to horizontal row */
  flex-direction: row !important;
  align-items:    flex-end !important;
  /* gap:            10px !important; */
}

/* Outer wrapper inside #message-composer that contains BOTH textarea and buttons.
   It must be transparent and flex-row so textarea pill + send button sit side-by-side.
   The pill styling goes on the DIRECT parent of the textarea, not this outer wrapper. */
#message-composer > *:has(#chat-input),
#message-composer > *:has(textarea),
#message-composer > #chat-input {
  flex:           1 1 auto !important;
  background:     transparent !important;
  border:         none !important;
  border-radius:  0 !important;
  padding:        0 !important;
  min-height:     unset !important;
  display:        flex !important;
  flex-direction: row !important;
  align-items:    flex-end !important;
  gap:            10px !important;
  box-sizing:     border-box !important;
}

/* Input pill — only the DIRECT parent of the textarea element */
#message-composer div:has(> textarea),
#message-composer div:has(> #chat-input) {
  flex:             1 1 auto !important;
  background-color: #E1E1E1 !important;
  border:           none !important;
  border-radius:    10px !important;
  padding:          11px 16px !important;
  min-height:       unset !important;
  box-sizing:       border-box !important;
}
#message-composer div:has(> textarea):focus-within,
#message-composer div:has(> #chat-input):focus-within {
  border:     none !important;
  box-shadow: none !important;
  outline:    none !important;
}

/* Textarea itself — transparent inside the pill */
#chat-input,
#message-composer textarea {
  background:  transparent !important;
  border:      none !important;
  box-shadow:  none !important;
  padding:     0 !important;
  min-height:  26px !important;
  height:      26px !important;
  resize:      none !important;
  overflow-y:  hidden !important;
  color:       #333333 !important;
  font-size:   14.5px !important;
  line-height: 1.5 !important;
}
#chat-input::placeholder,
#message-composer textarea::placeholder {
  color: #aaaaaa !important;
}

/* Hide attachment / emoji / settings buttons inside the composer */
#message-composer button:not(#chat-submit):not(#stop-button):not([type="submit"]),
#message-composer .justify-between > div:first-child {
  display: none !important;
}

/* ── Send / Stop Buttons ─────────────────────────────────────── */
/* Chainlit renders #chat-submit (idle) OR #stop-button (streaming).
   They are mutually exclusive in the DOM — never both at once.     */

/* Shared shape & colour — cover both #chat-submit ID and type=submit fallback */
#chat-submit,
#stop-button,
#message-composer button[type="submit"] {
  width:            44px !important;
  height:           44px !important;
  border-radius:    50% !important;
  background-color: #F5821F !important;
  color:            white !important;
  flex-shrink:      0 !important;
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  padding:          0 !important;
  opacity:          1 !important;
  visibility:       visible !important;
  pointer-events:   auto !important;
  box-shadow:       0 2px 8px rgba(245,130,31,0.35) !important;
  border:           none !important;
}
#chat-submit:hover,
#stop-button:hover {
  background-color: #e07010 !important;
}

/* ── SEND (#chat-submit): paper-plane, hide native arrow ──────── */
#chat-submit svg {
  display: none !important;
}
#chat-submit::before {
  content: '';
  display: block;
  width:  20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
  background-size:     contain;
  background-repeat:   no-repeat;
  background-position: center;
  pointer-events: none;
}

/* ── STOP (#stop-button): show native stop-square in white ────── */
#stop-button svg {
  display: block !important;
  color:   white !important;
  width:   20px !important;
  height:  20px !important;
}

/* ── User Message Bubble ─────────────────────────────────────── */
/* bg-accent is now dark green (#1b3828); force white text and pill shape */
[data-step-type="user_message"] .bg-accent {
  color: white !important;
  border-radius: 12px 12px 0px 12px !important;
  padding: 16px 24px !important; /* 2026-06-20: 14px 18px→16px 24px (from B2) */
  border: 0.58px solid #FFC08B; /* 2026-06-20: added (from B2) */
  background: #F5821F; /* 2026-06-20: added explicit orange (from B2) */
}
[data-step-type="user_message"] .bg-accent * {
  color: #FFF !important;
  font-size: 16px !important; /* 2026-06-20: added (from B2) */
  font-weight: 400 !important; /* 2026-06-20: added (from B2) */
  line-height: 25.52px; /* 2026-06-20: added (from B2) */
  letter-spacing: -0.32px; /* 2026-06-20: added (from B2) */
}

/* ── Bot / Assistant Message ─────────────────────────────────── */
/*
   In Chainlit 2.x, bot messages render as:
   <div class="ai-message flex gap-4 w-full">
     <div><!-- avatar --></div>
     <div class="flex flex-col items-start ...">  ← content area
     </div>
   </div>
*/

/* ── Bot message content area ────────────────────────────────────
   The container must stay invisible (no box) until real non-empty
   text exists.  Chainlit injects an empty <p></p> as soon as the
   step is created, so we require :not(:empty) on the first match.
   ────────────────────────────────────────────────────────────── */

/* Base: fully collapsed, no visual chrome */
[data-step-type="assistant_message"] .ai-message > div.flex-col,
[data-step-type="on_chat_start"]     .ai-message > div.flex-col {
  min-height:   0 !important;
  min-width:    0 !important;
  padding:      0 !important;
  background:   transparent !important;
  border:       none !important;
  overflow:     hidden;
  transition:   padding 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

/* Show the styled box only when a non-empty text node exists */
[data-step-type="assistant_message"] .ai-message > div.flex-col:has(p:not(:empty)),
[data-step-type="assistant_message"] .ai-message > div.flex-col:has(span:not(:empty)),
[data-step-type="assistant_message"] .ai-message > div.flex-col:has(h1:not(:empty)),
[data-step-type="assistant_message"] .ai-message > div.flex-col:has(h2:not(:empty)),
[data-step-type="assistant_message"] .ai-message > div.flex-col:has(h3:not(:empty)),
[data-step-type="assistant_message"] .ai-message > div.flex-col:has(strong:not(:empty)),
[data-step-type="assistant_message"] .ai-message > div.flex-col:has(code:not(:empty)),
[data-step-type="on_chat_start"]     .ai-message > div.flex-col:has(p:not(:empty)),
[data-step-type="on_chat_start"]     .ai-message > div.flex-col:has(span:not(:empty)) {
  background-color: #F4F4F4 !important;
  /* border-left:      3px solid #d07040 !important; */
  border-radius:    0 12px 12px 12px !important;
  padding:          14px 18px !important;
}

/* 2026-07-16: REMOVED the "hide the current step until the GIF is removed"
   rule that used to sit here (2026-06-20 → 2026-07-07) — it made the full
   answer appear all at once instead of token-by-token. Per explicit request,
   the assistant message now streams live (ChatGPT-style) as tokens arrive;
   custom.js's opacity-based empty/non-empty toggle (search hasContent) is
   what now gates visibility — it already reveals content the instant it's
   non-empty, it was just being overridden by this rule's display:none. */

/* Typing dots while the container exists but is still empty */
[data-step-type="assistant_message"] .ai-message > div.flex-col:not(:has(p:not(:empty))):not(:has(span:not(:empty))):not(:empty)::after {
  content: '';
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0);   opacity: 0.4; }
  40%            { transform: translateY(-4px); opacity: 1;   }
}
[data-step-type="assistant_message"] .ai-message > div.flex-col:not(:has(p:not(:empty))):not(:empty) {
  padding:     16px 24px !important; /* 2026-06-20: 14px 18px→16px 24px (from B2) */
  /* border-left: 3px solid #d07040 !important; */
  border-radius: 0 12px 12px 12px !important;
  min-height:  unset !important;
  border: 1px solid #D8D8D8 !important; /* 2026-06-20: 0.58px #D2D2D2→1px #D8D8D8 (from B2) */
  background: #FFF !important; /* 2026-06-20: #F4F4F4→#FFF (from B2) */
}

/* ── FORCE BLACK TEXT on all bot/assistant message content ─────
   --accent-foreground (white) can cascade in; this overrides it
   with maximum specificity for all text nodes.               */
.ai-message,
.ai-message p,
.ai-message span,
.ai-message div,
.ai-message li,
.ai-message ol,
.ai-message ul,
.ai-message h1,
.ai-message h2,
.ai-message h3,
.ai-message h4,
.ai-message h5,
.ai-message h6,
.ai-message strong,
.ai-message em,
.ai-message a,
.ai-message code,
.ai-message pre {
  color: #3A3A3A !important; /* 2026-06-20: #000000→#3A3A3A (from B2) */
  font-size: 16px; /* 2026-06-20: added (from B2) */
  font-weight: 400; /* 2026-06-20: added (from B2) */
  line-height: 25.52px; /* 2026-06-20: added (from B2) */
}

/* Blockquote (AI disclaimer / callouts) */
[data-step-type="assistant_message"] .ai-message blockquote,
[data-step-type="on_chat_start"] .ai-message blockquote {
  border-left: 3px solid #c4a888 !important;
  background-color: #faf5ee !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 9px 14px !important;
  margin: 10px 0 0 0 !important;
}
[data-step-type="assistant_message"] .ai-message blockquote *,
[data-step-type="on_chat_start"] .ai-message blockquote * {
  color: #5a4030 !important;
  font-style: italic !important;
}

/* Gap between bot avatar and message content */
.ai-message {
  gap: 6px !important;
}

/* Bot avatar circle — multiple selectors to cover Chainlit 2.11 DOM variants.
   Excludes the injected header logo (#gsm-custom-header handles its own sizing). */
.ai-message > div:first-child img,
[data-step-type] > div > div:first-child img,
#root img[src*="dobyns-logo"]:not(.logo) {
  width:         36px !important;
  height:        36px !important;
  border-radius: 50% !important;
  object-fit:    contain !important;
  background:    #ffffff !important;
  padding:       3px !important;
  box-sizing:    border-box !important;
  border:        1.5px solid #eeeeee !important;
  flex-shrink:   0 !important;
}


/* ── Scroll-to-bottom button ─────────────────────────────────── */
[data-testid="scroll-to-bottom"],
[data-testid*="scroll"],
#scroll-to-down-1,
button[class*="scroll"],
button[aria-label*="scroll" i],
button[aria-label*="bottom" i],
button[aria-label*="down" i],
/* Direct-child buttons of any overflow container — scroll btn lives here */
#root [class*="overflow-y-auto"] > button,
#root [class*="overflow-y"] > button,
/* Sibling buttons of overflow container */
#root [class*="overflow-y-auto"] ~ button,
#root [class*="overflow-y"] ~ button {
  display: none !important;
}

/* ── Smooth Scrolling ────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
.flex.flex-col.flex-grow.overflow-y-auto {
  scroll-behavior: smooth !important;
  background-color: #f5f5f5 !important;
}

/* ── Powered by GSM Outdoors footer (injected by JS) ─────────── */
/* Last flex child of #root — always sits at the very bottom.     */
#gsm-powered-by {
  flex-shrink:      0 !important;
  width:            100% !important;
  height:           28px !important;
  z-index:          9990 !important;
  display:          block !important;
  line-height:      28px !important;
  text-align:       center !important;
  font-size:        12px !important;
  color:            #AAA !important;
  font-style:       italic !important;
  padding:          0 !important;
  box-sizing:       border-box !important;
  margin-bottom: 6px !important;
}
#gsm-powered-by strong {
  color:       #AAA !important;
  font-style:  italic !important;
  font-weight: 700 !important;
}

/* ── Message Animations ──────────────────────────────────────── */
/* Each new step fades + slides in gently */
@keyframes stepIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.step {
  padding-top:    5px !important;
  padding-bottom: 5px !important;
  animation: stepIn 0.18s ease-out both;
}

/* Streaming text grows smoothly — no layout jump */
.ai-message > div.flex-col {
  overflow: hidden;
}

/* ── Per-message Timestamps (injected by custom.js) ─────────── */
.gsm-timestamp {
  display: block;
  font-size: 11px;
  color: #a89888;
  margin-top: 4px;
  padding: 0 2px;
  user-select: none;
}

/* User messages: align right to sit under the dark green bubble */
[data-step-type="user_message"] .gsm-timestamp {
  text-align: right;
  padding-right: 6px;
  color: #8aaa95 !important;
}

/* Bot / assistant messages: hide timestamp */
[data-step-type="assistant_message"] .gsm-timestamp,
[data-step-type="on_chat_start"] .gsm-timestamp {
  display: none !important;
}

/* Step inner div: pb-2 → pb-1 */
[id^="step-"].pb-2 { padding-bottom: 0.25rem !important; }

/* ── Watermark / LLM disclaimer — hidden in widget mode ─────── */
.watermark,
.watermark *,
[data-testid="watermark"],
[class*="watermark"],
[class*="disclaimer"] {
  display: none !important;
}

/* ── Empty-chat state: hide Chainlit's splash logo, show spinner instead ──
   2026-07-17: positioned relative to #root (a stable, always-positioned,
   fixed-size panel — see #root { position: fixed; ... } above) instead of
   the inner scroll container, whose own box has no stable size before
   content loads (that instability was the source of the drift/flicker).
   IMPORTANT: the condition below is `#root:not(:has([data-step-type]))` —
   a SINGLE level of :has(), checking #root directly — not the previous
   attempt's `#root:has(X:not(:has(Y)))`, which nests :has() inside :has()
   (even through an intervening :not()) and is invalid per the CSS spec
   (browsers silently drop the whole rule, which is why the spinner
   disappeared entirely). [data-step-type] elements only ever render inside
   the scroll container, so checking for their absence anywhere in #root is
   equivalent here, without the illegal nesting. */
#root [class*="overflow-y-auto"]:not(:has([data-step-type])) > * {
  display: none !important;
}
/* 2026-07-17: both keyframe states include the translate(-50%,-50%) centering
   offset, not just the rotation — `transform` is a single property, so an
   animation that only sets rotate(360deg) completely replaces (rather than
   combines with) a separate static transform:translate(-50%,-50%), making
   the spinner drift toward its un-centered position and back every cycle. */
@keyframes gsmSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
#root:not(:has([data-step-type]))::after {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid #e8e8e8;
  border-top-color: #F5821F;
  border-radius: 50%;
  animation: gsmSpin 0.75s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  z-index: 9999;
}


/* ── Responsive ──────────────────────────────────────────────── */
@media (min-width: 768px) {
  #root {
    max-width: 420px !important; /* 2026-06-20: 380px→420px (from B2) */
    margin: 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 767px) {
  #root,
  #gsm-pre-chat-panel {
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    bottom: 10px !important;
    height: calc(100vh - 20px) !important;
    max-height: calc(100vh - 20px) !important;
  }
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d5c4b8;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: #c0a888; }

/* ── Misc ────────────────────────────────────────────────────── */
/* Confirm button in dialogs */
#confirm {
  background-color: #1b3828 !important;
  color: white !important;
}

/* ── User Info Modal ──────────────────────────────────────────── */
#gsm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gsmFadeIn 0.22s ease;
  transition: opacity 0.28s ease;
}
@keyframes gsmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#gsm-modal {
  background: #fbf7f3;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.26);
  padding: 32px 28px 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  position: relative;
  animation: gsmSlideUp 0.22s ease;
}
@keyframes gsmSlideUp {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#gsm-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #8a9090;
  padding: 4px 7px;
  border-radius: 6px;
  line-height: 1;
}
#gsm-modal-x:hover { background: #f0e8df; color: #444; }
#gsm-modal h2 {
  font-size: 17px;
  font-weight: 700;
  color: #1b3828;
  margin: 0 0 8px;
  padding-right: 28px;
  line-height: 1.35;
}
#gsm-modal p {
  font-size: 13px;
  color: #5a6060;
  margin: 0 0 20px;
  line-height: 1.55;
}
#gsm-modal small { font-size: 11.5px; color: #8a9888; }
.gsm-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #3a4840;
  margin-bottom: 5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gsm-field-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 13px;
  border: 1.5px solid #ccd4cc;
  border-radius: 9px;
  font-size: 14px;
  color: #1a2010;
  background: #ffffff;
  margin-bottom: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.gsm-field-input:focus {
  border-color: #1b3828;
  box-shadow: 0 0 0 3px rgba(27, 56, 40, 0.10);
}
.gsm-field-input::placeholder { color: #b0b8b0; }
.gsm-modal-btns {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
#gsm-modal-submit {
  flex: 1;
  padding: 11px 0;
  background: #d07040;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
#gsm-modal-submit:hover { background: #b85e30; }
#gsm-modal-close {
  padding: 11px 16px;
  background: transparent;
  color: #6a7870;
  border: 1.5px solid #ccd4cc;
  border-radius: 9px;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
#gsm-modal-close:hover { background: #f0e8e0; color: #333; }

/* ── Inline phone gate form (injected by custom.js) ─────────────────── */
.gsm-phone-form {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     14px;
}
.gsm-phone-input {
  width:         100%;
  box-sizing:    border-box;
  padding:       10px 14px;
  border:        1.5px solid #d1d5db;
  border-radius: 10px;
  font-size:     14px;
  font-family:   inherit;
  outline:       none;
  background:    #fff;
  color:         #111;
  transition:    border-color 0.15s;
}
.gsm-phone-input:focus {
  border-color: #F5821F;
  box-shadow:   0 0 0 3px rgba(245,130,31,0.15);
}
.gsm-phone-input:disabled {
  background:   #f3f3f3;
  color:        #888;
  border-color: #e0e0e0;
  cursor:       not-allowed;
}
.gsm-phone-submit {
  width:         100%;
  padding:       11px 18px;
  background:    #F5821F;
  color:         #fff;
  border:        none;
  border-radius: 10px;
  font-size:     14px;
  font-weight:   600;
  cursor:        pointer;
  font-family:   inherit;
  transition:    background 0.15s;
}
.gsm-phone-submit:hover:not(:disabled) { background: #d96e14; }
.gsm-phone-submit:disabled { opacity: 0.6; cursor: default; }

/* ── Clickable product list items & chip buttons ─────────────────────── */
.gsm-product-item {
  cursor:        pointer;
  border-radius: 6px;
  padding:       3px 6px !important;
  margin-left:   -6px;
  transition:    background 0.15s;
}
.gsm-product-item:hover { background: rgba(245,130,31,0.12); }

.gsm-product-chips {
  display:    flex;
  gap:        8px;
  flex-wrap:  wrap;
  margin-top: 14px;
}
.gsm-product-chip {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  border:        2px solid #F5821F;
  background:    #fff;
  color:         #F5821F;
  font-size:     15px;
  font-weight:   700;
  font-family:   inherit;
  cursor:        pointer;
  transition:    background 0.15s, color 0.15s;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.gsm-product-chip:hover:not(:disabled) {
  background: #F5821F;
  color:      #fff;
}
.gsm-product-chip--selected {
  background: #F5821F;
  color:      #fff;
}
.gsm-product-chip:disabled { opacity: 0.45; cursor: default; }

/* ── Footer send button (#query-send-btn) ────────────────────────────── */
/* Hide Chainlit's own submit + stop buttons — #query-send-btn replaces both */
#chat-submit,
#stop-button,
#message-composer button[type="submit"] {
  display: none !important;
}

/* Absolutely positioned inside div:has(> #message-composer) { position: relative } */
#query-send-btn {
  position:        absolute !important;
  right:           10px !important;
  top:             50% !important;
  transform:       translateY(-43%) !important;
  width:           48px !important;
  height:          48px !important;
  border-radius:   10px !important; /* 2026-06-20: 50%→10px (from B2) */
  background:      #F5821F !important; /* 2026-06-20: transparent→#F5821F (from B2) */
  border:          none !important;
  cursor:          pointer !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  z-index:         9995 !important;
  padding:         0 !important;
  opacity:         0.45;
  transition:      opacity 0.15s, transform 0.1s;
}
#query-send-btn:hover {
  opacity:   1 !important;
  /* transform: translateY(-50%) scale(1.08) !important; */
}

/* ── Vertical Resize Handle (2026-06-20: from B merge) ───────────────────── */
#gsm-resize-handle {
  display: none;
  position: fixed;
  height: 10px;
  cursor: ns-resize;
  z-index: 99998;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#gsm-resize-handle::after {
  content: '';
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.15);
  transition: background 0.15s;
  flex-shrink: 0;
}
#gsm-resize-handle:hover::after  { background: rgba(245,130,31,.65); }
#gsm-resize-handle:active::after { background: #F5821F; }

/* ── Inline Identity Form Card (2026-06-20: from B merge) ───────────────── */
.gsm-inline-form-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 18px 16px;
  margin: 4px 0 8px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.gsm-ifc-msg {
  font-size: 14px;
  color: #1a1a1a;
  margin: 0 0 14px;
  line-height: 1.5;
}
.gsm-ifc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.gsm-ifc-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
.gsm-ifc-req { color: #F5821F; margin-left: 2px; }
.gsm-ifc-inp {
  padding: 9px 12px;
  font-size: 13px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  outline: none;
  background: #f8f8f8;
  color: #1a1a1a;
  font-family: inherit;
  transition: border-color .15s;
}
.gsm-ifc-inp:focus { border-color: #F5821F; background: #fff; box-shadow: 0 0 0 2px rgba(245,130,31,.12); }
.gsm-ifc-inp::placeholder { color: #B8B8B8; font-style: italic; }
.gsm-ifc-inp--error { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229,57,53,.10) !important; }
.gsm-ifc-error { display: none; color: #e53935; font-size: 12px; margin: 2px 0 8px; }
.gsm-ifc-submit {
  display: block !important;
  width: 100%;
  padding: 12px 0;
  background: #F5821F;
  color: #fff;
  border: none;
  border-radius: 12px; /* 2026-06-20: 50px→12px (from B2) */
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
  margin-top: 4px;
  text-align: center;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
.gsm-ifc-submit:hover { background: #d06a10; }
.gsm-ifc-submit[aria-disabled="true"],
.gsm-ifc-submit.gsm-ifc-submitting { background: #ccc; cursor: default; pointer-events: none; }
.gsm-inline-form-submitted {
  background: #fff;
  border-radius: 12px;
  padding: 12px 18px;
  margin: 4px 0 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  box-sizing: border-box;
  width: 100%;
  font-family: inherit;
}
.gsm-ifc-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid #f2f2f2;
}
.gsm-ifc-row:last-child { border-bottom: none; }
.gsm-ifc-sl {
  font-size: 12px;
  color: #888;
  font-weight: 500;
  min-width: 96px;
  flex-shrink: 0;
}
.gsm-ifc-sv {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 600;
}

/* ── Order Accordion (2026-06-20: from B merge) ──────────────────────────── */
.gsm-accordion-wrap {
  margin: 0;
  border-radius: 0 12px 12px 12px; /* 2026-06-20: added (from B2) */
  border: 1px solid #D8D8D8; /* 2026-06-20: added (from B2) */
  background: #FFF; /* 2026-06-20: added (from B2) */
  padding: 16px 24px; /* 2026-06-20: added (from B2) */
}
.gsm-acc-greeting {
  font-size:   15px;
  font-weight: 700;
  color:       #1a1a1a;
  margin:      0 0 6px;
}
.gsm-acc-intro {
  color:       #3A3A3A; /* 2026-06-20: #555→#3A3A3A (from B2) */
  margin:      0 0 14px;
  font-size:   16px; /* 2026-06-20: 13px→16px (from B2) */
  font-weight: 400; /* 2026-06-20: added (from B2) */
  line-height: 30px; /* 2026-06-20: 1.5→30px (from B2) */
}
.gsm-order-accordion {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  12px;
}
.gsm-order-card {
  width: 90%;
  overflow:      hidden;
  border-radius: 14px;
  border:        0.58px solid #D2D2D2; /* 2026-06-20: 1.5px #e0dbd5→0.58px #D2D2D2 (from B2) */
  background:    #F4F4F4; /* 2026-06-20: #f5f5f5→#F4F4F4 (from B2) */
}
.gsm-order-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 14px 10px;
  cursor:          pointer;
  user-select:     none;
  background:      #f5f5f5;
  border-bottom:   1.5px dashed transparent;
  transition:      border-color .15s;
}
.gsm-order-header.gsm-order-expanded { border-bottom-color: #d4cec8; }
.gsm-order-meta {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.gsm-order-label {
  color:          #F5821F;
  font-size:      9px; /* 2026-06-20: 10px→9px (from B2) */
  font-style:     italic; /* 2026-06-20: added (from B2) */
  font-weight:    400; /* 2026-06-20: 500→400 (from B2) */
  line-height:    25.52px; /* 2026-06-20: added (from B2) */
  letter-spacing: -0.18px; /* 2026-06-20: 0.3px→-0.18px (from B2) */
  /* 2026-06-20: removed text-transform: none (from B2) */
}
.gsm-order-no {
  color:          #3A3A3A; /* 2026-06-20: #1a1a1a→#3A3A3A (from B2) */
  font-size:      16px; /* 2026-06-20: 15px→16px (from B2) */
  font-weight:    600; /* 2026-06-20: 700→600 (from B2) */
  line-height:    25.52px; /* 2026-06-20: added (from B2) */
  letter-spacing: -0.32px; /* 2026-06-20: added (from B2) */
}
.gsm-order-date-badge {
  font-size:     11px;
  font-weight:   500; /* 2026-06-20: 600→500 (from B2) */
  line-height:   25.52px; /* 2026-06-20: added (from B2) */
  color:         #F5821F;
  padding:       1px 10px; /* 2026-06-20: 4px 10px→1px 10px (from B2) */
  white-space:   nowrap;
  border-radius: 4px; /* 2026-06-20: 20px→4px (from B2) */
  border:        0.5px solid #FFB574; /* 2026-06-20: added (from B2) */
  background:    #FFE5D5; /* 2026-06-20: #fff3e8→#FFE5D5 (from B2) */
}
.gsm-order-preview { padding: 0 12px 10px; }
.gsm-order-body    { padding: 0 12px 12px; }
.gsm-order-no-items {
  padding:     0 14px 12px;
  font-size:   12px;
  font-style:  italic;
  color:       #6a7870;
}
.gsm-order-items-count {
  display:       block;
  font-size:     11px;
  font-weight:   400; /* 2026-06-20: 500→400 (from B2) */
  color:         #3A3A3A; /* 2026-06-20: #888→#3A3A3A (from B2) */
  margin-bottom: 8px;
  line-height:   25.52px; /* 2026-06-20: added (from B2) */
  font-style:    italic; /* 2026-06-20: added (from B2) */
}
.gsm-order-items {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.gsm-order-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px; /* 2026-06-20: 10px 12px→10px 14px (from B2) */
  gap:             8px;
  border-radius:   10px;
  border:          1px solid #E0E0E0; /* 2026-06-20: #ebebeb→#E0E0E0 (from B2) */
  background:      #FFF; /* 2026-06-20: added explicit (from B2) */
}
.gsm-order-item-click {
  cursor:     pointer;
  transition: background .12s, border-color .12s;
}
.gsm-order-item-click:hover { background: #fff8f2; border-color: #F5821F; }
.gsm-order-item-name {
  font-size:   14px; /* 2026-06-20: 13px→14px (from B2) */
  color:       #3A3A3A; /* 2026-06-20: #1a1a1a→#3A3A3A (from B2) */
  font-weight: 500; /* 2026-06-20: 400→500 (from B2) */
  flex:        1;
  min-width:   0; /* flex items default to min-width:auto, which lets long
                     item names overflow past the card instead of wrapping */
  overflow-wrap: anywhere; /* long unbroken tokens like "BLK&RED" have no
                     spaces, so plain word-wrap won't break them — this
                     forces a break instead of overflowing past the card */
  word-break:  break-word;
  line-height: 22px; /* 2026-06-20: 1.4→22px (from B2) */
}
.gsm-truncate {
  white-space:  normal; /* 2026-06-20: nowrap→normal (from B2) */
  overflow:     hidden;
  word-break:   break-word; /* 2026-06-20: text-overflow:ellipsis→word-break:break-word (from B2) */
  max-width:    200px;
}
.gsm-order-item-qty  { font-size: 12px; font-weight: 400; color: #4A4A4A; line-height: 22.5px; white-space: nowrap; flex-shrink: 0; } /* 2026-06-20: added weight/color/lh (from B2) */
.gsm-order-items-more { font-size: 12px; color: #888; white-space: nowrap; flex-shrink: 0; }
.gsm-order-footer-text {
  font-size:   16px; /* 2026-06-20: 13px→16px (from B2) */
  color:       #3A3A3A; /* 2026-06-20: #666→#3A3A3A (from B2) */
  font-weight: 400; /* 2026-06-20: added (from B2) */
  line-height: 30px; /* 2026-06-20: 1.5→30px (from B2) */
  margin:      0;
  padding-top: 4px;
}
[data-step-type][data-accordion-done],
.gsm-acc-raw-hidden { display: none !important; }

/* ── Product-Pick Confirmation Card (2026-06-20: from B merge) ───────────── */
.gsm-pick-card {
  background:    #F5821F;
  border-radius: 14px;
  padding:       14px 16px;
  color:         #fff;
}
.gsm-pick-card-label {
  font-size:      9px; /* 2026-06-20: 10px→9px (from B2) */
  font-style:     italic;
  font-weight:    400; /* 2026-06-20: 500→400 (from B2) */
  line-height:    25px; /* 2026-06-20: added (from B2) */
  color:          #fff; /* 2026-06-20: rgba(255,255,255,0.82)→#fff (from B2) */
  margin:         0 0 3px 0;
  letter-spacing: 0.2px;
}
.gsm-pick-card-order {
  font-size:   16px; /* 2026-06-20: 18px→16px (from B2) */
  font-weight: 600; /* 2026-06-20: 700→600 (from B2) */
  color:       #fff;
  line-height: 25px; /* 2026-06-20: added (from B2) */
  margin:      0 0 12px 0;
}
.gsm-pick-card-product {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  border-radius:   10px; /* 2026-06-20: added (from B2) */
  background:      #FF8F4A; /* 2026-06-20: #fff→#FF8F4A (from B2) */
  padding:         10px 14px;
}
.gsm-pick-card-name {
  font-size:   14px;
  color:       #fff; /* 2026-06-20: #F5821F→#fff (from B2) */
  font-weight: 500;
  flex:        1;
  line-height: 22px; /* 2026-06-20: 1.4→22px (from B2) */
}
.gsm-pick-card-qty { font-size: 13px; color: #F5821F; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.gsm-pick-card-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             8px;
  margin-bottom:   4px;
}
.gsm-pick-card-date-badge {
  font-size:     11px;
  font-weight:   500; /* 2026-06-20: 600→500 (from B2) */
  background:    #FF8F4A; /* 2026-06-20: #fff→#FF8F4A (from B2) */
  border-radius: 4px; /* 2026-06-20: 20px→4px (from B2) */
  padding:       1px 10px; /* 2026-06-20: 3px 9px→1px 10px (from B2) */
  white-space:   nowrap;
  flex-shrink:   0;
  line-height:   25.52px; /* 2026-06-20: 1.4→25.52px (from B2) */
  /* 2026-06-20: removed color: #F5821F (not needed on orange bg) */
}

/* ── Accordion Message Wrapper (2026-06-20: from B merge) ────────────────── */
.gsm-accordion-msg {
  display:     flex;
  gap:         6px;
  align-items: flex-start;
  padding:     5px 16px 5px;
  padding-left: 0;
  box-sizing:  border-box;
  animation:   stepIn 0.18s ease-out both;
}

/* ── Pre-chat panel field layout (2026-06-20: from B merge) ──────────────── */
.gsm-pcp-field {
  display:        flex;
  flex-direction: column;
  gap:            8px; /* 2026-06-20: 6px→8px (from B2) */
  margin-bottom:  14px; /* 2026-06-20: added (from B2) */
}
.gsm-pcp-label {
  font-size:   13px;
  font-weight: 500;
  color:       #1a1a1a;
}
.gsm-pcp-req-hint { color: #F5821F; margin-left: 2px; display: none; }
.gsm-pcp-error    { display: none; color: #e53935; font-size: 12px; margin: 6px 0 0; padding: 0; line-height: 1.4; }

/* ── Tracking URL link (built in custom.js, see _linkifyNode) ─────────────
   Chainlit's own message/markdown CSS wins the specificity fight against a
   plain .gsm-tracking-link rule (same reason every other override in this
   file needs !important — see file header), so this needs !important too. */
#root .gsm-tracking-link,
#root a.gsm-tracking-link,
/* Belt-and-suspenders: Chainlit's own markdown renderer auto-links bare
   URLs itself (class="text-primary hover:underline", confirmed via
   inspecting a live tracking link) — style those directly too, so this
   doesn't depend on the custom.js scan having touched that element yet. */
#root [data-step-type] a.text-primary {
  color:           #2254b2 !important;
  font-weight:     600 !important;
  text-decoration: underline !important;
  word-break:      break-all !important;
}
.gsm-pcp-inp--error { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229,57,53,.12) !important; }