/* chatbot.css – Zenith AI Widget Styles */

/* ── Fonts ─────────────────────────────────────────────────────────── */
/* Be Vietnam Pro is what the live zenithcosmeticclinics.co.uk site actually
   uses throughout — headings, nav, body copy and buttons — at weights 400
   and 500, confirmed by reading its computed styles directly. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/* ── Animations ────────────────────────────────────────────────────── */
@keyframes zenithTypingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* The listening ring. Deliberately transform and opacity only, on a pseudo-
   element, rather than the box-shadow spread this used to animate.
   box-shadow repaints on every frame, and this button sits inside
   .zenith-chat-panel, which has a backdrop-filter and a transform. A repaint
   inside a backdrop-filtered, transformed layer makes the browser
   re-rasterise the whole panel continuously, at the layer's texture size
   rather than at device resolution — so every word in the panel went soft for
   exactly as long as the microphone was on. transform and opacity are handled
   by the compositor and never trigger that repaint. */
@keyframes zenithMicPulse {
  0%   { transform: scale(1);   opacity: 0.4; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── Container ─────────────────────────────────────────────────────── */
#zenith-widget-container {
  font-family: 'Be Vietnam Pro', sans-serif;
  color: #111827;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Tooltips ──────────────────────────────────────────────────────── */
[data-zenith-tooltip] {
  position: relative;
}

[data-zenith-tooltip]::after {
  content: attr(data-zenith-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(17, 24, 39, 0.92);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-zenith-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Floating buttons (shared) ─────────────────────────────────────── */
.zenith-floating-wrapper {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.zenith-floating-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.165, 0.85, 0.45, 1), background-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  box-sizing: border-box;
  flex: none;
  pointer-events: auto;
}

.zenith-floating-btn:hover { transform: scale(1.08); }

/* 36px circles for Nottingham, London, WhatsApp to match UIkit .uk-icon-button on the site */
.zenith-btn-small {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
}

.zenith-btn-primary {
  width: 50px;
  height: 50px;
  background: #bd8c34;
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  position: relative;
}

.zenith-btn-primary:hover {
  background: #a97d2e;
}

.zenith-btn-primary:active {
  background: #956e29;
}

.zenith-btn-phone {
  background: rgba(255, 255, 255, 0.28);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #222222;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.zenith-btn-phone:hover {
  background: rgba(255, 255, 255, 0.45);
  border-color: #FFFFFF;
  color: #111827;
}

.zenith-btn-whatsapp {
  background: #25D366;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

.zenith-btn-whatsapp:hover {
  background: #20ba59;
}

.zenith-btn-ai {
  width: 36px;
  height: 36px;
  background: #bd8c34;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(189, 140, 52, 0.35);
  position: relative;
}

.zenith-btn-ai:hover {
  background: #a97d2e;
}

.zenith-btn-ai:active {
  background: #956e29;
}

.zenith-new-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #16A34A;
  color: #FFFFFF;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.4);
  pointer-events: none;
}

/* Icon inside the main floating button */
.zenith-icon-toggle {
  position: absolute;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ── Floating stack (horizontal row of icons) ──────────────────────── */
.zenith-floating-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-right: 10px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

.zenith-floating-stack.zenith-stack-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ── Chat Panel ────────────────────────────────────────────────────── */
.zenith-chat-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  pointer-events: auto;
  max-width: calc(100vw - 48px);
  /* dvh reflects the space actually visible once a mobile browser's address
     bar is accounted for; vh is the fallback for browsers that predate it.
     Without this, a docked panel on a short landscape phone screen sizes
     itself off the "address bar hidden" height and its top ends up clipped
     underneath the address bar. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: rgba(214, 212, 208, 0.78);   /* warm grey glass, so the panel stands out on a white page (Jason, 14 Oct) */
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform-origin: bottom right;
}

.zenith-chat-panel.zenith-hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.zenith-chat-panel.zenith-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.zenith-chat-panel.zenith-fullscreen {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
  border: none;
  z-index: 10000;
  /* Keeps the same frosted-glass background as the docked panel, so full
     screen still shows a blurred hint of the page behind it. */
}

/* ── Corner resize handle ─────────────────────────────────────────────
   Sits in the top-left corner (the panel is anchored bottom/right, so this
   is the only corner that actually moves as the panel grows or shrinks).
   Rather than a separate grab icon sitting inside the corner, the cue is a
   thin rim of light traced along the panel's OWN rounded corner — like a
   chamfered edge catching light — so it reads as part of the panel's edge,
   not a control floating on top of it. Hidden in full screen — the panel is
   viewport-sized there, not draggable — and on mobile, which stays fixed
   full screen (see the 480px media query below). */
.zenith-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  cursor: nwse-resize;
  z-index: 20;
  touch-action: none;
}
.zenith-resize-handle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* Exactly the panel's own corner radius, on both axes, so this traces the
     panel's real rounded-rectangle corner directly rather than a separate
     circular ring — a ring reads as curving inward on its own; this is
     just that one true curve, stroked. Bigger/softer than the first pass
     comes from a thicker border plus a touch of blur to take the hard
     edge off it, not from changing the curve itself. */
  width: 18px;
  height: 18px;
  border-radius: 18px 0 0 0;   /* matches .zenith-chat-panel's own corner radius */
  border-top: 2px solid rgba(255, 255, 255, 0.8);
  border-left: 2px solid rgba(255, 255, 255, 0.8);
  filter: blur(0.5px);
  opacity: 0.6;
  transition: opacity 0.15s;
}
.zenith-resize-handle:hover::before {
  opacity: 1;
}
.zenith-chat-panel.zenith-fullscreen .zenith-resize-handle {
  display: none;
}

/* Caps the conversation at a comfortable reading column (720px) rather
   than letting bubbles stretch across the whole screen on a wide monitor —
   a chat thread reads badly at document width. */
.zenith-chat-panel.zenith-fullscreen .zenith-header,
.zenith-chat-panel.zenith-fullscreen .zenith-messages,
.zenith-chat-panel.zenith-fullscreen .zenith-welcome,
.zenith-chat-panel.zenith-fullscreen .zenith-footer {
  padding-left: max(16px, calc((100vw - 720px) / 2));
  padding-right: max(16px, calc((100vw - 720px) / 2));
}

/* ── Responsive views ──────────────────────────────────────────────────
   Desktop (> 1024px)   : default rules above — docked panel, optional
                          full screen toggle.
   Tablet (481–1024px)  : same docked panel; the max-width clamp on
                          .zenith-chat-panel keeps it clear of the viewport
                          edge on narrower tablets and split-screen views.
   Phone (≤ 480px)      : the panel always takes over the full screen, so
                          the full-screen toggle would be a redundant
                          control — hidden below.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #zenith-widget-container {
    right: 16px;
    bottom: 16px;
    top: auto;
  }
  .zenith-chat-panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0;
    border: none;
    z-index: 10000;
  }
  #z-full-chat,
  #z-resize-handle {
    display: none;
  }
}

/* ── Header ────────────────────────────────────────────────────────── */
/* Everything above the conversation — logo, wordmark, text-resize pill and
   the window controls — lives in this single row. There is deliberately
   only one dividing line in the whole panel: this header's own
   border-bottom, separating it from the welcome screen / message thread. */
.zenith-header {
  display: flex;
  flex-wrap: wrap;        /* lets confirm bar sit on its own row */
  align-items: center;
  column-gap: 10px;       /* horizontal gap between avatar / title / pill / btns */
  row-gap: 0;             /* no vertical gap between header row and confirm bar */
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: transparent;
  flex: none;
}

.zenith-header-info { flex: 1; min-width: 0; }

.zenith-header-title {
  display: flex;
  align-items: center;
  color: #111827;
}
.zenith-header-title svg {
  display: block;
}

/* "AI" is fully static here — no pulsing, no breathing, nothing that could
   make it harder to read at a glance. Just a hairline dark shadow for a
   touch of engraved depth. The only animated flourish is the gold glint
   sweep (see the clipped rect in zenithWordmarkSVG), and that only exists
   on the large welcome-screen mark, never on this small header one. */
.zenith-ai-glow {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.zenith-header-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: #6B7280;
  transition: color 0.2s;
  flex: none;
}
.zenith-header-btn:hover { color: #111827; }

/* ── Text-resize glyph ─────────────────────────────────────────────────
   Chromeless "aA" — no pill, no border, no background. Rendered in the
   same muted tone as the refresh/full-screen/minimise icons beside it, so
   the header reads as one row of quiet controls rather than one control
   standing out from the rest. A click cycles Regular → Medium → Large. */
.zenith-text-resize {
  display: flex;
  align-items: baseline;
  gap: 1px;
  background: none;
  border: none;
  padding: 5px;
  margin: 0;
  cursor: pointer;
  color: #6B7280;
  font-family: 'Be Vietnam Pro', sans-serif;
  line-height: 1;
  flex: none;
  transition: color 0.2s;
}

.zenith-text-resize:hover {
  color: #111827;
}

.zenith-text-resize-a-small {
  font-size: 11px;
  font-weight: 700;
}

.zenith-text-resize-a-large {
  font-size: 16px;
  font-weight: 700;
}

/* ── Welcome / Pre-start Screen ────────────────────────────────────── */
.zenith-welcome {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* lets the panel's frosted glass show through */
  padding: 24px;
}

.zenith-welcome-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.zenith-welcome-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.zenith-welcome-title {
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
}
.zenith-welcome-title svg {
  display: block;
}

.zenith-welcome-subtitle {
  margin: 0;
  font-size: 14px;
  color: #6B7280;
}

.zenith-welcome-hint {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: #6B7280;
  max-width: 240px;
  text-align: center;
  line-height: 1.4;
}

.zenith-welcome-controls {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.zenith-start-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #BD8C34;
  color: #FFFFFF;
  border: none;
  border-radius: 28px;
  padding: 14px 28px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-top: 8px;
}

.zenith-start-btn:hover {
  background: #9A6F1F;
  transform: scale(1.04);
}

/* Area hidden utility */
.zenith-area-hidden {
  display: none !important;
}

/* ── Messages ──────────────────────────────────────────────────────── */
.zenith-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* stops a scroll hitting the end of the list from chaining to the page behind it */
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent; /* lets the panel's frosted glass show through */
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 24, 39, 0.2) transparent;
}

/* Slim, arrow-less scrollbar for Chromium/WebKit browsers, to match the
   rest of the widget rather than the browser's default chunky one. */
.zenith-messages::-webkit-scrollbar {
  width: 6px;
}
.zenith-messages::-webkit-scrollbar-track {
  background: transparent;
}
.zenith-messages::-webkit-scrollbar-thumb {
  background: rgba(17, 24, 39, 0.2);
  border-radius: 3px;
}
.zenith-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 24, 39, 0.35);
}
.zenith-messages::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}


.zenith-msg-wrapper {
  display: flex;
  flex-direction: column;
}

.zenith-msg-user { align-items: flex-end; }
.zenith-msg-bot,
.zenith-msg-filler { align-items: flex-start; }

.zenith-bubble {
  max-width: 80%;
  padding: 12px 15px;
  border-radius: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  /* Tied to FILLER_TRANSFORM_FADE_MS in chatbot.js — keep both in step. */
  transition: opacity 130ms ease;
}

.zenith-msg-user .zenith-bubble {
  background: #BD8C34;
  color: #000000;   /* black on the gold reads clearly; white was 3.0:1 (Jason, 14 Oct) */
}

.zenith-msg-bot .zenith-bubble-container,
.zenith-msg-filler .zenith-bubble-container {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 78.5%;
}

/* max-width:100% overrides the base .zenith-bubble rule's 80%, which — applied
   here on top of the container's own cap above — left the bubble shrinking to
   80% of a container that had already sized itself to fit the bubble, so short
   messages wrapped needlessly even with room to spare. The container's cap
   above is the only width limit that should apply for these two roles. */
.zenith-msg-bot .zenith-bubble,
.zenith-msg-filler .zenith-bubble {
  position: relative;
  background: #FFFFFF;
  color: #111827;
  border: 1px solid #E5E7EB;
  max-width: 100%;
}

.zenith-msg-filler .zenith-bubble {
  font-style: italic;
}

/* Inline spacer that reserves clearance in the bottom-right so characters never collide with the listen button or its hover glow */
.zenith-bubble-spacer {
  display: inline-block;
  width: 24px;
  height: 14px;
  margin-left: 4px;
  vertical-align: -2px;
  pointer-events: none;
}

/* Subtle listen icon nestled neatly in bottom-right corner of the bubble */
.zenith-bubble-listen-btn {
  position: absolute;
  bottom: 4px;
  right: 5px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #9CA3AF;
  cursor: pointer;
  padding: 0;
  margin: 0;
  outline: none;
  opacity: 0.55;
  transition: all 0.2s ease;
}

.zenith-bubble-listen-btn:hover {
  opacity: 1;
  color: #BD8C34;
  background: rgba(189, 140, 52, 0.12);
  transform: scale(1.15);
}

.zenith-bubble-listen-btn.playing {
  opacity: 1;
  color: #BD8C34;
  background: rgba(189, 140, 52, 0.16);
  animation: zenith-listen-pulse 1.3s infinite ease-in-out;
}

@keyframes zenith-listen-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

/* ── Avatar ────────────────────────────────────────────────────────── */
.zenith-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Slightly larger than the in-thread avatar so the brand mark reads clearly
   at the top of the panel. */
#z-header-avatar {
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: transform 0.15s;
}
#z-header-avatar:hover {
  transform: scale(1.08);
}
#z-header-avatar:active {
  transform: scale(0.96);
}

/* ── Typing Indicator ──────────────────────────────────────────────── */
.zenith-typing-indicator {
  display: flex;
  gap: 8px;
  align-items: center;
}

.zenith-typing-dots {
  display: flex;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
}

.zenith-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9CA3AF;
  display: inline-block;
  animation: zenithTypingBounce 1.2s infinite;
}
.zenith-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.zenith-typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Footer ────────────────────────────────────────────────────────── */
.zenith-footer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,0.05);
  background: transparent;
  flex: none;
}

.zenith-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: #F3F4F6;
  color: #6B7280;
  transition: all 0.2s;
  /* Anchors the listening ring drawn by .pulse::after. */
  position: relative;
}

.zenith-icon-btn.active {
  background: #BD8C34;
  color: #FFFFFF;
}

/* There is deliberately NO rule here forcing fill and stroke onto the icons.
   There used to be, setting both to #FFFFFF on every path, rect and line, and
   it deformed both icons the moment they went active:

     - the microphone capsule is a <rect fill="currentColor"> with no stroke of
       its own, so it gained a 1px outline all the way round and rendered
       visibly fatter than the inactive one;
     - the arc under the microphone, and the speaker's sound wave, are drawn
       with fill="none" as a presentation attribute. CSS beats presentation
       attributes, so fill:#FFFFFF overrode it and filled the open curves in
       solid.

   It was never needed. Every shape in both icons is drawn in currentColor, and
   .zenith-icon-btn.active already sets color, so the colour follows on its own
   and each shape keeps the fill and stroke it was drawn with. */

.zenith-icon-btn.pulse {
  background: #BD8C34;
  color: #FFFFFF;
}

/* The ring itself, so the animation has something to move that is not the
   button. Sitting behind the button (z-index: -1) keeps the icon crisp, and
   pointer-events: none keeps it from swallowing the click. */
.zenith-icon-btn.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(189, 140, 52, 0.4);
  animation: zenithMicPulse 1.4s infinite;
  pointer-events: none;
  z-index: -1;
}

.zenith-input {
  flex: 1;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  padding: 9px 16px;
  font-family: 'Be Vietnam Pro', sans-serif;
  outline: none;
  background: #F3F4F6;
  color: #111827;
  resize: none;
  line-height: 20px;
  max-height: 80px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Windows Chromium reserves a permanent gutter for a visible scrollbar the
     moment overflow-y is auto, even with nothing to scroll yet — a bare
     scrollbar-width:thin still measured 12px wide against the 2px this pair
     leaves (1px border each side, verified live), which is what made the
     box look mis-sized at rest. Hiding the bar removes the gutter
     completely rather than shrinking it, and the box scrolls exactly the
     same either way — scrollTop, the wheel and the cursor auto-follow while
     typing all still work with no bar drawn. */
  scrollbar-width: none;
}
.zenith-input::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.zenith-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #111827;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background 0.2s;
}

.zenith-send-btn:hover {
  background: #374151;
}

/* ── Thread divider (start-of-chat label) ─────────────────────────── */
.zenith-thread-divider {
  font-family: 'Be Vietnam Pro', sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: #BD8C34;
  margin: 6px 0 12px;
  text-transform: uppercase;
}

/* ── Reset confirmation bar ───────────────────────────────────────── */
/* Sits inside the header element as a wrapped second row, above the
   header's own border-bottom. flex:0 0 100% forces it onto a new row.
   max-height and margin-top slide it in with balanced spacing. */
.zenith-confirm-bar {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding: 0;
  transition:
    max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.28s ease,
    margin-top 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.zenith-confirm-bar--visible {
  max-height: 48px;
  opacity: 1;
  margin-top: 16px;
}
.zenith-confirm-text {
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
  white-space: nowrap;
  line-height: 1.4;
}
.zenith-confirm-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.zenith-confirm-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Be Vietnam Pro', sans-serif;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}
.zenith-confirm-cancel {
  color: #9CA3AF;
}
.zenith-confirm-cancel:hover { text-decoration: underline; color: #6B7280; }
.zenith-confirm-ok {
  color: #BD8C34;
}
.zenith-confirm-ok:hover { text-decoration: underline; }

/* ── Session-ended divider ───────────────────────────────────────── */
/* Static label between one conversation and the next. It stays in the thread. */
.zenith-session-ended-divider {
  font-family: 'Be Vietnam Pro', sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #BD8C34;
  margin: 14px auto;
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* A short note in the thread, e.g. why voice switched itself off. */
.zenith-chat-notice {
  font-family: 'Be Vietnam Pro', sans-serif;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: #4B5563;
  margin: 10px auto;
  max-width: 85%;
}

/* ── Volume popup ──────────────────────────────────────────────────── */
/* Slim pill above the speaker button. No label, just the gold slider. */
.zenith-volume-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 8px 5px;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  animation: zenithVolumeFadeIn 0.15s ease forwards;
}
@keyframes zenithVolumeFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.zenith-volume-slider {
  -webkit-appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 2px;
  height: 52px;
  padding: 0;
  margin: 0;
  background: #E5E7EB;
  border-radius: 1px;
  outline: none;
  cursor: ns-resize;
  accent-color: #BD8C34;
}
.zenith-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #BD8C34;
  cursor: ns-resize;
  transition: transform 0.1s;
  box-shadow: 0 1px 3px rgba(189,140,52,0.4);
}
.zenith-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}
.zenith-volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #BD8C34;
  border: none;
  cursor: ns-resize;
}

/* ── Interactive Scheduling Calendar Component (Image 4 Luxury System) ─── */
.zenith-calendar-card {
  --cal-fs: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  margin: 4px 0 2px;
  overflow: hidden;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--cal-fs, 14px);
  color: #111827;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal !important;
  transition: box-shadow 0.25s ease, border-radius 0.2s ease;
  /* Lets the day and time rows below switch from 4 to 3 across when the
     card itself is narrow (see the @container rule after the time pills). */
  container: zcal / inline-size;
}
.zenith-calendar-card * {
  white-space: normal;
  box-sizing: border-box;
}

/* A calendar-card bubble takes the same width as every other bot bubble
   (the container's own max-width, set above) — it used to force 96% here,
   which is why it looked wider than a plain-text reply. min-width:0 stays,
   because the card's flex/scroll children need it to shrink below their
   content's natural width instead of overflowing the bubble. */
.zenith-msg-bot.zenith-msg--has-calendar .zenith-bubble-container,
.zenith-msg-bot:has(.zenith-calendar-card) .zenith-bubble-container {
  min-width: 0 !important;
  /* A definite width, the same 78.5% every bot bubble is capped at, rather
     than shrinking to fit its content. The card measures itself for the
     3-or-4-across switch (container: zcal), and an element that measures
     itself reports no content width of its own, so a shrink-to-fit bubble
     around it collapsed the whole card to a sliver. */
  width: 78.5%;
}
.zenith-msg-bot.zenith-msg--has-calendar .zenith-bubble,
.zenith-msg-bot:has(.zenith-calendar-card) .zenith-bubble {
  /* width:100% stays (unlike the plain-text bubble case): the card's own
     badges/pills are all percentage-of-container sized, so the bubble needs
     a genuinely definite width to resolve against, not a shrink-to-fit one —
     dropping this collapsed the whole card down to its smallest content. */
  width: 100% !important;
  min-width: 0 !important;
  padding: 6px 8px;
  overflow: hidden;
}
.zenith-msg-bot.zenith-msg--has-calendar .zenith-bubble-spacer {
  display: none !important;
}

.zenith-msg-lead {
  margin-bottom: 4px;
  line-height: 1.45;
}
.zenith-msg-follow {
  margin-top: 4px;
  line-height: 1.45;
}

/* Confirmed permanent receipt slither */
.zenith-calendar-card--confirmed {
  background: #F4FBF7 !important;
  border: 1px solid rgba(5, 150, 105, 0.22) !important;
  border-radius: 10px !important;
  margin: 2px 0 1px !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
}
.zenith-cal-confirmed-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: calc(16px + 0.6 * var(--cal-fs, 14px));
}
.zenith-cal-confirmed-icon {
  color: #059669;
  flex: none;
}
.zenith-cal-confirmed-text {
  font-size: calc(var(--cal-fs, 14px) * 0.82);
  color: #065F46;
  line-height: 1.25;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zenith-cal-confirmed-text strong {
  font-weight: 600;
  color: #047857;
}

/* Collapsed state = sleek slither */
.zenith-calendar-card--collapsed {
  margin: 2px 0 1px !important;
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #FAF8F5 !important;
  border-radius: 10px !important;
}
.zenith-calendar-card--collapsed .zenith-cal-toggle {
  padding: 5px 10px !important;
  min-height: calc(20px + 0.6 * var(--cal-fs, 14px)) !important;
  height: calc(20px + 0.6 * var(--cal-fs, 14px)) !important;
}
.zenith-calendar-card--collapsed .zenith-cal-body {
  display: none !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
}

/* Collapse toggle header */
.zenith-cal-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  min-height: calc(22px + 0.6 * var(--cal-fs, 14px));
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  gap: 6px;
  user-select: none;
  transition: background 0.15s ease;
  box-sizing: border-box;
}
.zenith-cal-toggle:hover {
  background: rgba(0, 0, 0, 0.02);
}
.zenith-cal-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.zenith-cal-toggle-icon { color: #BD8C34; flex: none; }
.zenith-cal-toggle-text {
  font-size: calc(var(--cal-fs, 14px) * 0.92);
  font-weight: 700;
  color: #18181B;
  white-space: nowrap !important;
}
.zenith-cal-toggle-summary {
  font-size: calc(var(--cal-fs, 14px) * 0.78);
  font-weight: 400;
  color: #8C8A85;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  text-align: right;
  margin-right: 2px;
}
.zenith-cal-chevron {
  color: #9CA3AF;
  flex: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.zenith-cal-chevron--open { transform: rotate(180deg); }

/* Collapsible body */
.zenith-cal-body {
  max-height: 420px;
  opacity: 1;
  overflow: hidden;
  padding: 4px 8px 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  transition:
    max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.2s ease,
    padding    0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.zenith-cal-body--hidden {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
}

/* Date navigation with < and > arrow controls */
.zenith-date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin-bottom: 7px;
}
.zenith-date-arrow {
  flex: 0 0 calc(18px + 0.6 * var(--cal-fs, 14px));
  width: calc(18px + 0.6 * var(--cal-fs, 14px));
  height: calc(18px + 0.6 * var(--cal-fs, 14px));
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #F6F3EC;
  color: #18181B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  user-select: none;
  transition: all 0.15s ease;
}
.zenith-date-arrow:hover {
  background: #EAE6DC;
  transform: scale(1.05);
}
.zenith-date-arrow:active {
  transform: scale(0.95);
}

.zenith-date-horizon {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Enough room above and below for the active badge's shadow. A scrolling
     row clips whatever spills past its padding, and with less than this the
     shadow was cut off flat, showing as a faint square behind the circle. */
  padding: 6px 8px 10px;
  align-items: center;
}
.zenith-date-horizon::-webkit-scrollbar { display: none; }

/* Circular Date Badge. Sizing rules, in order of who wins:
   1. A quarter of the row, however many days are on offer, so one lone day
      is the same size as one of four rather than stretching to fill the card.
   2. Never wider than 5.5x the text size from the size selector, so a wide
      or fullscreen panel doesn't grow the circles past what their text needs.
      Scales with Small/Medium/Large because it's tied to --cal-fs.
   3. The text inside is sized off the badge's own width (cqi, via
      container-type below) as well as --cal-fs, whichever is smaller, so on a
      narrow phone the text shrinks to fit the circle rather than spilling out.
   min-width/min-height: 0 overrides the flex item's automatic minimum size,
   which is content-based by default and was quietly beating aspect-ratio,
   stretching the circle into an oval on small screens. The auto margins on
   the first/last badge centre a short row, and collapse to nothing once the
   row overflows, so a scrolling row still starts flush at the left. */
.zenith-date-badge {
  flex: 0 0 calc((100% - 24px) / 4);
  width: calc((100% - 24px) / 4);
  max-width: calc(var(--cal-fs, 14px) * 5.5);
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #F6F3EC;
  border: 1px solid rgba(0, 0, 0, 0.03);
  cursor: pointer;
  padding: 3px 2px;
  scroll-snap-align: start;
  user-select: none;
  box-sizing: border-box;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.zenith-date-badge:first-child { margin-left: auto; }
.zenith-date-badge:last-child { margin-right: auto; }
.zenith-date-badge:hover:not(.zenith-date-badge--active) {
  background: #EAE6DC;
  transform: translateY(-1px);
}

/* Day text: slightly different tone & styling, scaled */
.zenith-date-day {
  font-size: min(calc(var(--cal-fs, 14px) * 0.72), 24cqi);
  font-weight: 700;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1;
  margin-bottom: 2px;
  white-space: nowrap !important;
}

/* Date number: bold prominent date matching size set */
.zenith-date-num {
  font-size: min(calc(var(--cal-fs, 14px) * 1.32), 44cqi);
  font-weight: 800;
  color: #18181B;
  line-height: 1.05;
  margin-bottom: 2px;
  white-space: nowrap !important;
}

/* Active Date Badge: Deep dark luxury charcoal — the colour change alone is
   what reads as "selected" now; there is no status label underneath any
   more (it only ever said "Selected" or a slot count, neither of which the
   patient needed to pick a day). */
.zenith-date-badge--active {
  background: #18181B !important;
  border-color: #18181B !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
  transform: scale(1.04);
}
.zenith-date-badge--active .zenith-date-day {
  color: #A1A1AA !important;
}
.zenith-date-badge--active .zenith-date-num {
  color: #FFFFFF !important;
}

/* Month under the number, so dates in different months can't be confused.
   Matches the day label above it, a touch smaller, so the circle keeps its size. */
.zenith-date-month {
  font-size: min(calc(var(--cal-fs, 14px) * 0.62), 20cqi);
  font-weight: 700;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1;
  white-space: nowrap !important;
}
.zenith-date-badge--active .zenith-date-month {
  color: #A1A1AA !important;
}
.zenith-date-badge--booked { opacity: 0.5; }

/* Time Horizon (Horizontal Scroll, 4 slots visible on screen) */
.zenith-time-horizon-wrapper {
  position: relative;
  margin-top: 5px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.zenith-time-horizon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Fully hidden, like .zenith-date-horizon above, not just painted
     transparent: a "thin" scrollbar still reserves its own height in the
     box even when invisible, so this row was a few px taller on a day with
     enough slots to need scrolling than on one without — a visible jump
     every time the active day changed. Hiding it outright keeps the row's
     height identical regardless of slot count; the row still scrolls fine
     without it. */
  scrollbar-width: none;
  padding: 2px 2px 5px;
  box-sizing: border-box;
}
.zenith-time-horizon::-webkit-scrollbar { display: none; }

/* A discreet stand-in for the hidden scrollbar above, drawn by
   syncTimeScrollbar() in chatbot.js. Absolutely positioned inside the 5px of
   padding already under the pills, so it adds no height and squashes
   nothing; it only appears when there are more times than fit. */
.zenith-time-scrollbar {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.zenith-time-scrollbar--visible { opacity: 1; }
/* The glass design's bars are all 5px (Jason, 15 Oct 2026), with room beneath the times. */
.zenith-glass .zenith-time-horizon { padding-bottom: 9px; }
.zenith-glass .zenith-time-scrollbar { height: 5px; }
.zenith-time-scrollthumb {
  height: 100%;
  border-radius: 3px;
  background: rgba(189, 140, 52, 0.55);
}

/* Mid-drag (see the pointer handlers in chatbot.js): snapping is paused so
   the row tracks the mouse, and the cursor shows it's being dragged. */
.zenith-date-horizon.zenith-cal-row--dragging,
.zenith-time-horizon.zenith-cal-row--dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

.zenith-time-empty {
  text-align: center;
  font-size: calc(var(--cal-fs, 14px) * 0.85);
  color: #8C8A85;
  padding: 14px 0;
  width: 100%;
}

/* Time Slot Pill: Reduced height (~38px), elegant capsule, always displays clinician */
/* Same three sizing rules as the date badges above: a quarter of the row,
   capped relative to the text size so it can't balloon on a wide panel, with
   the text sized off the pill's own width so it always fits inside. */
.zenith-time-pill {
  flex: 0 0 calc((100% - 18px) / 4);
  width: calc((100% - 18px) / 4);
  min-width: 0;
  max-width: calc(var(--cal-fs, 14px) * 7.5);
  container-type: inline-size;
  height: calc(26px + 0.85 * var(--cal-fs, 14px));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #F6F3EC;
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  padding: 3px 4px;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.zenith-time-pill:first-child { margin-left: auto; }
.zenith-time-pill:last-child { margin-right: auto; }
.zenith-time-pill:hover:not(.zenith-time-pill--locked) {
  background: #EAE6DC;
  transform: translateY(-1px);
}
.zenith-time-pill-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
}
.zenith-time-pill-time {
  font-size: min(calc(var(--cal-fs, 14px) * 0.88), 22cqi);
  font-weight: 700;
  color: #18181B;
  line-height: 1.15;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zenith-time-pill-check {
  color: #FFFFFF;
  flex: none;
}
.zenith-time-pill-prac {
  font-size: min(calc(var(--cal-fs, 14px) * 0.65), 16cqi);
  font-weight: 500;
  color: #787570;
  line-height: 1.1;
  margin-top: 1px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* On a narrow card (a phone, mostly), four across squeezed the times down to
   about 9px: always inside the pill, but too small to read comfortably. Three
   across gives each circle and pill a third more room, and the rest are still
   one swipe or arrow tap away. Keyed off the card's own width rather than the
   screen's, so a docked panel on a small laptop gets it too if it needs it. */
@container zcal (max-width: 300px) {
  .zenith-date-badge {
    flex-basis: calc((100% - 16px) / 3);
    width: calc((100% - 16px) / 3);
  }
  .zenith-time-pill {
    flex-basis: calc((100% - 12px) / 3);
    width: calc((100% - 12px) / 3);
  }
  /* The "5 slots · 1 day" count only got cut to "5 sl..." at this width, and
     the open card already shows what's on offer. Kept when collapsed, where
     it's the only place the chosen time is shown. */
  .zenith-calendar-card:not(.zenith-calendar-card--collapsed) .zenith-cal-toggle-summary {
    display: none;
  }
}

/* Selected Time Pill: Rich caramel gold */
.zenith-time-pill--locked {
  background: #BD8C34 !important;
  border-color: #BD8C34 !important;
  box-shadow: 0 4px 14px rgba(189, 140, 52, 0.35);
  transform: scale(1.02);
}
.zenith-time-pill--locked .zenith-time-pill-time {
  color: #FFFFFF !important;
}
.zenith-time-pill--locked .zenith-time-pill-prac {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* The diary's recommended times on the picker (see markRecommendedSlots in
   chatbot.js): a small gold star in the corner, a warm tint, and a soft gold
   edge glow that breathes slowly, to catch the eye without shouting. */
.zenith-time-pill--recommended {
  position: relative;
  background: #FBF5E8 !important;
  border-color: rgba(189, 140, 52, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(189, 140, 52, 0.22), 0 2px 9px rgba(189, 140, 52, 0.20);
  animation: zenith-recommend-glow 3.2s ease-in-out infinite;
}
.zenith-time-pill-star {
  position: absolute;
  top: 3px;
  right: 4px;
  color: #BD8C34;
  line-height: 0;
}
@keyframes zenith-recommend-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(189, 140, 52, 0.22), 0 2px 9px rgba(189, 140, 52, 0.20); }
  50%      { box-shadow: 0 0 0 1.5px rgba(189, 140, 52, 0.34), 0 3px 14px rgba(189, 140, 52, 0.34); }
}
/* "★ Recommended times", above the row of times. */
.zenith-cal-recommend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 2px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(189, 140, 52, 0.10);
  color: #8A6524;
  font-size: calc(var(--cal-fs, 14px) * 0.74);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap !important;
}
.zenith-cal-recommend svg {
  flex: none;
  color: #BD8C34;
}
@media (prefers-reduced-motion: reduce) {
  .zenith-time-pill--recommended { animation: none; }
}

/* The opening greeting: shown whole at once, with one soft gold gleam passing
   through its words in reading order. Only the text catches it, never the
   bubble; the class is removed when it ends (see initiateConversation). */
.zenith-greeting-gleam,
.zenith-greeting-gleam * {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.zenith-greeting-gleam {
  background-image: linear-gradient(100deg, #111827 0%, #111827 38%, #B98A36 45%, #D6A94F 50%, #B98A36 55%, #111827 62%, #111827 100%);
  background-size: 400% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  animation: zenith-greeting-gleam 3s cubic-bezier(0.45, 0, 0.35, 1) 0.2s both;
}
@keyframes zenith-greeting-gleam {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zenith-greeting-gleam, .zenith-greeting-gleam * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
    background: none;
    animation: none;
  }
}

/* A date with a recommended time: a small gold star in a white disc, sitting
   on the circle's top-right edge, clear of the day and date. */
.zenith-date-badge--recommended {
  position: relative;
}
.zenith-date-badge-star {
  position: absolute;
  top: -4px;
  right: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #BD8C34;
  box-shadow: 0 1px 3px rgba(189, 140, 52, 0.35);
  line-height: 0;
}

/* Confirm Drawer: SEAMLESS, NO BORDER, drops down seamlessly */
.zenith-melt-confirm-bar {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  padding: 0 12px;
  background: #F6F3EC !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.25s ease,
    margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    padding    0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.zenith-melt-confirm-bar--visible {
  max-height: calc(46px + 1.1 * var(--cal-fs, 14px));
  opacity: 1;
  margin-top: 8px;
  padding: 8px 12px;
}
.zenith-melt-confirm-summary {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.zenith-melt-confirm-date {
  font-size: calc(var(--cal-fs, 14px) * 0.88);
  font-weight: 700;
  color: #18181B;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zenith-melt-confirm-practitioner {
  font-size: calc(var(--cal-fs, 14px) * 0.70);
  font-weight: 500;
  color: #787570;
  margin-top: 1px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zenith-melt-confirm-btn {
  background: #BD8C34;
  color: #FFFFFF;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: calc(var(--cal-fs, 14px) * 0.85);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap !important;
  flex: none;
  transition: background 0.18s ease, transform 0.12s ease;
}
.zenith-melt-confirm-btn:hover {
  background: #9A6F1F;
  transform: scale(1.02);
}
.zenith-melt-confirm-btn:active {
  transform: scale(0.98);
}

/* The Live voice: her words come in one at a time, each easing up out of a
   soft blur into sharp text. A word takes no space until it appears, so the
   text simply runs on (see applyLiveCaption in chatbot.js). inline-block so
   the word can rise; the spaces between words stay ordinary text. */
.zenith-live-word {
    display: none;
}
.zenith-live-word-shown {
    display: inline-block;
    animation: zenith-live-word-in 420ms cubic-bezier(0.25, 0.6, 0.3, 1) both;
}
/* Kept deliberately subtle: a gentle lift and a light soften, easy on the eye
   over a long conversation. */
@keyframes zenith-live-word-in {
    from { opacity: 0.15; filter: blur(1.5px); transform: translateY(0.15em); }
    to   { opacity: 1; filter: blur(0); transform: none; }
}
/* Words already shown before the chat was redrawn: no second fade. */
.zenith-live-word-instant {
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .zenith-live-word-shown { animation: none; }
}

/* A message sent while she is still thinking or answering waits in the box,
   and the send button pulses gently until it goes, the moment her reply is
   in (sendText in chatbot.js). Both designs. */
.zenith-send-waiting {
    animation: zenith-send-wait 1.2s ease-in-out infinite;
}
@keyframes zenith-send-wait {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .zenith-send-waiting { animation: none; opacity: 0.6; }
}

/* --- results gallery --- */
/* Before-and-after photos under a reply (chatbot.js, src/results_gallery.py).
   Photos come in every shape: side by side, stacked, three or four panels,
   portrait or square. Each tile is the same size, and the photo inside is shown
   whole (contain, never cropped) over a soft blurred copy of itself, so a
   square or a very wide photo still fills the tile without hard bars. */
.zenith-msg-bot:has(.zenith-results-card) .zenith-bubble-container {
  min-width: 0 !important;
  /* A definite width, as the time picker has: the tiles are sized as a share
     of the card, which a shrink-to-fit bubble cannot give them. A little wider
     than a text reply, because photos need the room. */
  width: 88%;
  max-width: 88%;
}
.zenith-msg-bot:has(.zenith-results-card) .zenith-bubble {
  width: 100% !important;
  min-width: 0 !important;
}
/* Photos on their own for a moment (drawn the moment she shows them): the same
   bubble her words then fill in underneath, with nothing to listen to yet. */
.zenith-bubble:has(> .zenith-results-only) .zenith-bubble-spacer,
.zenith-bubble:has(> .zenith-results-only) .zenith-bubble-listen-btn {
  display: none !important;
}
.zenith-results-only > .zenith-results-card {
  margin-bottom: 0;
}
.zenith-results-card {
  --cal-fs: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  /* Above her words, reaching a little into the bubble's side padding for wider photos. */
  margin: 0 -6px 10px;
  padding: 9px 9px 8px;
  width: calc(100% + 12px);
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--cal-fs, 14px);
  color: #111827;
  line-height: 1.35;
  white-space: normal !important;
}
.zenith-results-card * {
  box-sizing: border-box;
  white-space: normal;
}
.zenith-results-head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 1px 3px 8px;
  min-width: 0;
}
.zenith-results-icon {
  color: #BD8C34;
  flex: none;
  /* Centred on the title's first line. */
  margin-top: calc((var(--cal-fs, 14px) * 0.92 * 1.3 - 13px) / 2);
}
/* A long label wraps onto a second line rather than being cut short. */
.zenith-results-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(var(--cal-fs, 14px) * 0.92);
  font-weight: 700;
  line-height: 1.3;
  color: #18181B;
  overflow-wrap: anywhere;
}
.zenith-results-count {
  flex: none;
  font-size: calc(var(--cal-fs, 14px) * 0.78);
  line-height: calc(var(--cal-fs, 14px) * 0.92 * 1.3);
  color: #8C8A85;
  white-space: nowrap !important;
}
.zenith-results-stage {
  position: relative;
}
.zenith-results-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 12px;
}
.zenith-results-row::-webkit-scrollbar {
  display: none;
}
.zenith-results-tile {
  position: relative;
  flex: 0 0 86%;
  aspect-ratio: 16 / 10;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #F3EFE8;
  scroll-snap-align: start;
  cursor: zoom-in;
  display: block;
  /* Keeps the rounded corners clipping the blurred layer in Safari. */
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.zenith-results-card--single .zenith-results-tile {
  flex-basis: 100%;
}
.zenith-results-tile-bg,
.zenith-results-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.zenith-results-tile-bg {
  object-fit: cover;
  filter: blur(16px) saturate(1.05);
  transform: scale(1.25);
  opacity: 0.5;
}
.zenith-results-tile-img {
  object-fit: contain;
  z-index: 1;
}
/* A thin inner edge, and the focus ring drawn above the photo. */
.zenith-results-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}
.zenith-results-tile:focus-visible {
  outline: none;
}
.zenith-results-tile:focus-visible::after {
  box-shadow: inset 0 0 0 2px #BD8C34;
}
/* "Tap to enlarge", as a small corner mark. Top right, because many photos
   carry their own "After" or "Post 3 treatments" label bottom right. */
.zenith-results-tile::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 3;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / 11px no-repeat;
  pointer-events: none;
  transition: background-color 0.15s ease;
}
.zenith-results-tile:hover::before {
  background-color: rgba(17, 17, 17, 0.7);
}
.zenith-results-tile--missing .zenith-results-tile-bg,
.zenith-results-tile--missing .zenith-results-tile-img,
.zenith-results-tile--missing::before {
  display: none;
}
.zenith-results-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #18181B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.zenith-results-arrow--prev { left: 6px; }
.zenith-results-arrow--next { right: 6px; }
.zenith-results-arrow:hover { transform: scale(1.06); }
.zenith-results-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.zenith-results-arrow:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}
/* Arrows only where there is a mouse; touch screens swipe. */
@media (hover: hover) and (pointer: fine) {
  .zenith-results-arrow { display: flex; }
}
.zenith-results-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding-top: 8px;
}
.zenith-results-dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: #DCD6CC;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.zenith-results-dot--on {
  width: 14px;
  background: #BD8C34;
}
.zenith-results-caption {
  margin: 7px 3px 0;
  font-size: calc(var(--cal-fs, 14px) * 0.74);
  line-height: 1.35;
  color: #8C8A85;
  text-align: center;
}

/* The full-screen view. */
.zenith-results-viewer {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: #0C0C0E;
  color: #FFFFFF;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
  overscroll-behavior: contain;
  touch-action: manipulation;
  outline: none;
}
.zenith-results-viewer[hidden] {
  display: none !important;
}
.zenith-results-viewer--open {
  opacity: 1;
}
.zenith-results-viewer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 8px 20px;
  min-width: 0;
}
.zenith-results-viewer-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zenith-results-viewer-count {
  flex: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}
.zenith-results-viewer-close,
.zenith-results-viewer-nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.2s ease;
}
.zenith-results-viewer-close {
  width: 40px;
  height: 40px;
}
.zenith-results-viewer-close:hover,
.zenith-results-viewer-nav:hover {
  background: rgba(255, 255, 255, 0.22);
}
.zenith-results-viewer-close:focus-visible,
.zenith-results-viewer-nav:focus-visible {
  outline: 2px solid #E8C978;
  outline-offset: 2px;
}
.zenith-results-viewer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 68px;
}
.zenith-results-viewer-img {
  display: block;
  max-width: min(100%, 1400px);
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  user-select: none;
  -webkit-user-drag: none;
}
.zenith-results-viewer-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
}
.zenith-results-viewer-nav--prev { left: 12px; }
.zenith-results-viewer-nav--next { right: 12px; }
.zenith-results-viewer-nav:disabled {
  opacity: 0.25;
  cursor: default;
}
.zenith-results-viewer-nav[hidden] {
  display: none;
}
.zenith-results-viewer-caption {
  margin: 0;
  padding: 12px 20px 18px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
}
/* On a phone the photo takes the full width, and the arrows move below it,
   either side of the caption, so they never cover the photo. */
@media (max-width: 600px) {
  .zenith-results-viewer-stage {
    position: static;
    padding: 0 6px;
  }
  .zenith-results-viewer-img {
    border-radius: 6px;
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .zenith-results-viewer-nav {
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    width: 40px;
    height: 40px;
  }
  .zenith-results-viewer-nav--prev { left: 14px; }
  .zenith-results-viewer-nav--next { right: 14px; }
  .zenith-results-viewer-caption {
    min-height: 68px;
    padding: 12px 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zenith-results-viewer,
  .zenith-results-dot,
  .zenith-results-arrow { transition: none; }
}
/* --- end results gallery --- */

/* --- glass design --- */
/* The glass redesign of 14 Oct 2026 (COSMETIC_WIDGET_REDESIGN_PLAN.md; the
   signed-off artboards are in docs/design/cosmetic_widget_redesign/). Every
   rule here sits under .zenith-glass, which chatbot.js puts on the container
   only when /api/config says widget_design is "glass", so the classic design
   above is untouched. Sizes, colours and timings are the artboards' own.
   Glass is rgba(255,255,255,0.32) with a blur and no border or shadow. */

.zenith-glass [hidden] {
  display: none !important;
}

/* The panel's tint over the blurred page: the one colour the whole glass
   panel and its sheets take (an R, G, B triple, so each use sets its own
   transparency). Change it here and nowhere else. */
.zenith-glass {
  --zg-tint: 190, 196, 184;   /* sage stone (Jason, 16 Oct 2026) */
  --zg-tint-alpha: 0.92;
}
/* The dental practice's panel: porcelain blue, a cool grey-blue that sits with
   its site's navy ink and the shared gold (Jason, 20 Oct 2026). Only the tint
   differs; everything else is the same widget. */
.zenith-glass.zenith-glass-dental {
  --zg-tint: 196, 206, 214;
}
.zenith-glass .zenith-chat-panel {
  background: rgba(var(--zg-tint), var(--zg-tint-alpha));
}

/* ── Header: green dot, then the welcome strip or the status line ───── */
.zenith-glass .zg-header {
  column-gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  min-height: 57px;
  box-sizing: border-box;
}
.zenith-glass .zg-pulse {
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 2px;   /* with the 10px column gap: 12px to the text */
  border-radius: 50%;
  background: #16A34A;
  animation: zg-pulse 2s ease-in-out infinite;
}
@keyframes zg-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Which parts of the header show: the strip on the welcome screen; in the
   chat, the status line (header status on) or the classic logo and
   wordmark (header status off). New Chat only once there is a chat; Full
   Screen on both (Jason, 14 Oct: Full Screen stays everywhere). */
.zenith-glass .zg-strip,
.zenith-glass .zg-status,
.zenith-glass .zg-brand,
.zenith-glass #z-new-chat {
  display: none;
}
.zenith-glass:not(.zenith-glass-started) .zg-strip { display: block; }
.zenith-glass.zenith-glass-started.zenith-glass-status .zg-status { display: flex; }
.zenith-glass.zenith-glass-started:not(.zenith-glass-status) .zg-brand { display: flex; }
.zenith-glass.zenith-glass-started:not(.zenith-glass-status) .zg-pulse { display: none; }
.zenith-glass.zenith-glass-started #z-new-chat { display: block; }

/* The welcome header's own spacing (artboard Main2). */
.zenith-glass:not(.zenith-glass-started) .zg-header { column-gap: 0; }
.zenith-glass:not(.zenith-glass-started) .zg-pulse { margin-right: 6px; }
.zenith-glass:not(.zenith-glass-started) #z-full-chat,
.zenith-glass:not(.zenith-glass-started) #z-min-chat { margin-left: 6px; }

/* The message strip: one row on show, soft-edged at both ends. Rows are 22px
   (the artboard's 20px clipped the tops and tails of letters), and the track
   and every line always sit on their own layer (translate3d, also at rest), so
   a line never shifts by a fraction of a pixel when the movement starts or
   when the strip jumps back to the first line. */
.zenith-glass .zg-strip {
  flex: 1 1 0;   /* a zero basis, so the header never wraps a long line onto a second row */
  min-width: 0;
  height: 22px;
  margin-right: 7px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  color: #6E4F18;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 12px), transparent 100%);
}
.zenith-glass .zg-strip-track {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.zenith-glass .zg-strip-row {
  display: block;
  height: 22px;
  line-height: 22px;
  white-space: nowrap;
  overflow: visible;
}
.zenith-glass .zg-strip-row span {
  display: inline-block;
  vertical-align: top;
  height: 22px;
  padding: 0 12px 0 6px;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.zenith-glass .zg-status {
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #6E4F18;
}
.zenith-glass .zg-status-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s ease;
}
.zenith-glass .zg-status-text.zg-status-out { opacity: 0; }

.zenith-glass .zg-brand {
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.zenith-glass .zg-hb {
  flex: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 5px;
  color: #4B5563;
  cursor: pointer;
  line-height: 1;
  border-radius: 6px;
}
.zenith-glass .zg-hb svg { display: block; }
.zenith-glass .zg-hb:hover { color: #111827; }
.zenith-glass .zg-hb:focus-visible,
.zenith-glass .zg-toggle:focus-visible,
.zenith-glass .zg-start:focus-visible,
.zenith-glass .zg-pill:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}

/* ── Welcome screen (artboard Main2) ────────────────────────────────── */
.zenith-glass .zenith-welcome {
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.zenith-glass .zg-welcome-centre {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 24px 16px;   /* the extra top sets the logo block a little lower (Jason, 14 Oct) */
  text-align: center;
}
/* The logo is the classic welcome's size (its 48px mark); the wordmark is
   22px, set a clear step below it (Jason, 14 Oct); the glow is scaled to match. */
.zenith-glass .zg-logo { cursor: pointer; }   /* a tap sets the usual size */
.zenith-glass .zg-logo svg {
  display: block;
  width: 50px;
  height: 48px;
  filter: drop-shadow(0 0 6px rgba(232, 201, 120, 0.55)) drop-shadow(0 0 16px rgba(212, 169, 74, 0.35)) drop-shadow(0 4px 8px rgba(17, 24, 39, 0.12));
}
.zenith-glass .zg-wordmark {
  margin-top: 8px;
  color: #111827;
  line-height: 0;
}
.zenith-glass .zg-wordmark svg {
  display: block;
  height: 22px;   /* also set where the SVG is built (zenithWordmarkSVG(22, ...)), which wins */
  width: auto;
}
.zenith-glass .zg-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: #374151;
}
.zenith-glass .zg-welcome-bottom {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 24px 30px;
}
.zenith-glass .zg-toggles {
  display: flex;
  gap: 12px;
}
.zenith-glass .zg-toggle {
  width: 42px;
  height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  color: #374151;
  cursor: pointer;
}
.zenith-glass .zg-toggle:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #111827;
}
/* On is immediate, no fade, like the classic toggles. */
.zenith-glass .zg-toggle.active {
  background: #BD8C34;
  color: #FFFFFF;
}
/* Start Conversation and the two pills keep their phone size however wide the
   panel gets (Full Screen, a large window), centred like the classic button,
   rather than stretching across it (Jason, 14 Oct). */
.zenith-glass .zg-start {
  width: 100%;
  max-width: 342px;
  height: 54px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 27px;
  background: #BD8C34;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(189, 140, 52, 0.35);
}
.zenith-glass .zg-start:hover { background: #A07526; }
.zenith-glass .zg-pills {
  width: 100%;
  max-width: 342px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.zenith-glass .zg-pills--one { grid-template-columns: minmax(0, 1fr); }
/* Icon and words sit at the left of each pill (Jason, 14 Oct). */
.zenith-glass .zg-pill {
  height: 52px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  color: #111827;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.zenith-glass .zg-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.zenith-glass .zg-pill svg {
  flex: none;
  color: #BD8C34;
}
.zenith-glass .zg-pill:hover { background: rgba(255, 255, 255, 0.5); }

/* Quick Enquiry's gold beam (Jason, 22 Oct 2026): every 10 seconds a gold light whips
   once round the pill's edge in just over a second, and as it finishes the words flash
   gold, the pill glows and the bolt pops, then all settle back. It draws the eye to
   Quick Enquiry, in the same gold as the wordmark's glint. It runs only while the panel
   is open on the welcome screen: a closed panel loses .zenith-visible and a started
   conversation hides the welcome screen, so both stop it. Only the edge is drawn (the
   mask cuts out the middle), so the frosted glass is untouched. */
@property --zg-beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.zenith-glass .zg-pill--beam {
  position: relative;
  isolation: isolate;
}
.zenith-glass .zg-pill--beam::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--zg-beam-angle),
    transparent 0deg 235deg, rgba(189, 140, 52, 0) 245deg,
    rgba(189, 140, 52, 0.85) 310deg, #D6A94F 340deg, #FFF0C2 354deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
.zenith-glass .zenith-chat-panel.zenith-visible .zg-pill--beam {
  animation: zg-beam-glow 10s linear 1.5s infinite;
}
.zenith-glass .zenith-chat-panel.zenith-visible .zg-pill--beam::before {
  animation: zg-beam 10s linear 1.5s infinite;
}
.zenith-glass .zenith-chat-panel.zenith-visible .zg-pill--beam span {
  animation: zg-beam-words 10s linear 1.5s infinite;
}
.zenith-glass .zenith-chat-panel.zenith-visible .zg-pill--beam svg {
  animation: zg-beam-bolt 10s linear 1.5s infinite;
}
/* The lap: the first 1.2 seconds of every 10, easing in and out so it whips round. */
@keyframes zg-beam {
  0%   { --zg-beam-angle: 0deg; opacity: 0; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  2%   { opacity: 1; animation-timing-function: linear; }
  10%  { opacity: 1; }
  12%  { --zg-beam-angle: 360deg; opacity: 0; }
  100% { --zg-beam-angle: 360deg; opacity: 0; }
}
/* The flash as the lap finishes (1.2s), gone by 2s: gold words with a soft glow... */
@keyframes zg-beam-words {
  0%, 10% { color: #111827; text-shadow: none; animation-timing-function: ease-out; }
  12.5%   { color: #A8781F; text-shadow: 0 0 10px rgba(214, 169, 79, 0.75); animation-timing-function: ease-in; }
  20%, 100% { color: #111827; text-shadow: none; }
}
/* ...a brief gold glow round the pill... */
@keyframes zg-beam-glow {
  0%, 10% { box-shadow: 0 0 0 0 rgba(214, 169, 79, 0); animation-timing-function: ease-out; }
  12.5%   { box-shadow: 0 0 0 1px rgba(189, 140, 52, 0.6), 0 0 18px 2px rgba(214, 169, 79, 0.5); animation-timing-function: ease-in; }
  20%, 100% { box-shadow: 0 0 0 0 rgba(214, 169, 79, 0); }
}
/* ...and the bolt pops. */
@keyframes zg-beam-bolt {
  0%, 10% { transform: scale(1); animation-timing-function: ease-out; }
  12.5%   { transform: scale(1.22); animation-timing-function: ease-in; }
  17%, 100% { transform: scale(1); }
}
/* Less motion: nothing moves or flashes; a still hairline of the same gold instead. */
@media (prefers-reduced-motion: reduce) {
  .zenith-glass .zenith-chat-panel.zenith-visible .zg-pill--beam,
  .zenith-glass .zenith-chat-panel.zenith-visible .zg-pill--beam::before,
  .zenith-glass .zenith-chat-panel.zenith-visible .zg-pill--beam span,
  .zenith-glass .zenith-chat-panel.zenith-visible .zg-pill--beam svg { animation: none; }
  .zenith-glass .zg-pill--beam { box-shadow: inset 0 0 0 1px rgba(189, 140, 52, 0.55); }
}
/* On the narrowest phones the pills give their words a little more room,
   as do the header's status line and buttons. */
@media (max-width: 380px) {
  .zenith-glass .zg-pill { gap: 8px; padding: 0 14px; }
  .zenith-glass .zg-header { column-gap: 8px; }
}
@media (max-width: 365px) {
  .zenith-glass .zg-pill { font-size: 14px; }
}
/* At 320px two pills side by side would cut "Quick Enquiry" short, so they stack. */
@media (max-width: 340px) {
  .zenith-glass .zg-pills { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .zenith-glass .zg-pill { height: 46px; justify-content: center; }
}
.zenith-glass .zg-hint {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #374151;
  text-align: center;
}

/* ── Chat ───────────────────────────────────────────────────────────── */
/* The patient's bubbles: site gold with ink text (6.2:1), Jason's choice
   C of 14 Oct (artboard Bubbles). */
.zenith-glass .zenith-msg-user .zenith-bubble {
  background: #BD8C34;
  color: #0F121F;
}
.zenith-glass .zenith-msg-bot .zenith-bubble-container,
.zenith-glass .zenith-msg-filler .zenith-bubble-container {
  max-width: 85%;
}
.zenith-glass .zenith-msg-bot:has(.zenith-results-card) .zenith-bubble-container { max-width: 88%; }
.zenith-glass .zenith-msg-bot.zenith-msg--has-calendar .zenith-bubble-container,
.zenith-glass .zenith-msg-bot:has(.zenith-calendar-card) .zenith-bubble-container {
  width: 85%;
}

/* ── Composer: one glass card (artboard InChatComposer) ─────────────── */
.zenith-glass .zenith-footer {
  display: block;
  padding: 6px 10px 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  border-top: 0;
}
.zenith-glass .zg-composer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  transition: background-color 0.15s ease;
}
.zenith-glass .zg-composer:focus-within { background: rgba(255, 255, 255, 0.45); }
.zenith-glass .zg-composer-row {
  display: flex;
  align-items: flex-end;   /* send stays level with the last line as the box grows */
  gap: 6px;
}
.zenith-glass .zg-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  box-sizing: border-box;
  height: 46px;
  max-height: 80px;
  margin: 0;
  padding: 13px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;   /* 16px stops iOS zooming in when it is tapped */
  line-height: 20px;
  color: #111827;
  outline: none;
  resize: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  box-shadow: none;
}
.zenith-glass .zg-input::-webkit-scrollbar { width: 0; height: 0; }
.zenith-glass .zg-input::placeholder {
  color: #4B5563;
  opacity: 1;
}
.zenith-glass .zg-composer-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* The buttons under the writing area: a little smaller (Jason, 15 Oct 2026),
   still a comfortable 32px to tap. */
.zenith-glass .zg-composer-tools .zg-round {
  width: 32px;
  height: 32px;
  /* The composer behind is already frosted, so a second blur here shows nothing. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.zenith-glass .zg-composer-tools .zg-round svg { width: 15px; height: 15px; }
.zenith-glass .zg-composer-gap { flex-grow: 1; }

.zenith-glass .zg-round {
  flex: none;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  color: #374151;
  cursor: pointer;
}
.zenith-glass .zg-round:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #111827;
}
.zenith-glass .zg-round:focus-visible,
.zenith-glass .zg-send:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}
/* Speaker on looks the same as the mic on: solid gold (Jason, 16 Oct 2026). */
.zenith-glass .zg-round.zg-speaker.active {
  background: #BD8C34;
  color: #FFFFFF;
}
.zenith-glass .zg-round.zg-mic.active {
  background: #BD8C34;
  color: #FFFFFF;
}
/* While the microphone is listening, the same soft ring as the classic design. */
.zenith-glass .zg-round.pulse { position: relative; }
.zenith-glass .zg-round.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(189, 140, 52, 0.4);
  animation: zenithMicPulse 1.4s infinite;
  pointer-events: none;
  z-index: -1;
}
.zenith-glass .zg-round.zg-feature svg { color: #BD8C34; }
/* On a touch screen the small round and header buttons get an invisible 40px
   tap area, so they stay easy to press without looking any bigger. */
@media (pointer: coarse) {
  .zenith-glass .zg-round,
  .zenith-glass .zg-hb { position: relative; }
  .zenith-glass .zg-round::before,
  .zenith-glass .zg-hb::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
  }
  .zenith-glass .zg-team-link { min-height: 40px; margin: -10px 0; }
}

/* Send: a grey return arrow while the box is empty, a gold circle with a
   white arrow once there is text. The colours ease; the shape does not. */
.zenith-glass .zg-send {
  flex: none;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 5px;   /* centred on a one-line (46px) box */
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #4B5563;
  cursor: pointer;
}
.zenith-glass .zg-send:focus-visible { outline-offset: 1px; }
.zenith-glass .zg-send:hover {
  background: rgba(255, 255, 255, 0.45);
  color: #111827;
}
.zenith-glass .zg-send .zg-icon-up { display: none; }
.zenith-glass .zg-send.zg-ready {
  border-radius: 50%;
  background: #BD8C34;
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(189, 140, 52, 0.35);
  transition: background-color 0.15s, color 0.15s;
}
.zenith-glass .zg-send.zg-ready:hover {
  background: #A07526;
  color: #FFFFFF;
}
.zenith-glass .zg-send.zg-ready .zg-icon-send { display: none; }
.zenith-glass .zg-send.zg-ready .zg-icon-up { display: block; }

/* ── Quick Enquiry card in the chat (artboard FastTrackDone) ────────── */
/* As wide as the patient's own bubbles may be, so the details fit. */
.zenith-glass .zg-msg-enquiry .zg-enq-card {
  width: 80%;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E8D3A6;
  border-radius: 14px;
  overflow: hidden;
}
.zenith-glass .zg-enq-card-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: #111827;
  cursor: pointer;
}
.zenith-glass .zg-enq-card-btn:hover { background: #FBF8F2; }
.zenith-glass .zg-enq-card-btn:disabled { cursor: default; background: transparent; }
.zenith-glass .zg-enq-card-btn:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: -2px;
}
.zenith-glass .zg-enq-card-ic {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F5EBD6;
  color: #8A6420;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zenith-glass .zg-enq-card-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.zenith-glass .zg-enq-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #111827;
}
.zenith-glass .zg-enq-card-sub {
  font-size: 12px;
  line-height: 1.35;
  color: #4B5563;
  overflow-wrap: anywhere;
}
.zenith-glass .zg-enq-card .zg-icon-chevron {
  flex: none;
  color: #6B7280;
  transition: transform 0.15s;
}
.zenith-glass .zg-enq-card.zg-open .zg-icon-chevron { transform: rotate(180deg); }
.zenith-glass .zg-enq-card-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 7px;
  margin: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid #F0EADF;
  font-size: 13px;
  line-height: 1.4;
}
.zenith-glass .zg-enq-card-list dt { color: #6B7280; }
.zenith-glass .zg-enq-card-list dd {
  margin: 0;
  color: #111827;
  font-weight: 500;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ── Sheets: Quick Enquiry and Prices, over the chat ────────────────── */
.zenith-glass .zg-sheet-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
}
/* The corner handle stays above an open sheet, so the panel can be resized from
   the Quick Enquiry form and the prices too (Jason, 15 Oct 2026). */
.zenith-glass .zenith-resize-handle { z-index: 35; }
.zenith-glass .zg-sheet-dim {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 31, 0.18);
  opacity: 0;
  transition: opacity 180ms ease-in;
}
.zenith-glass .zg-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(var(--zg-tint), var(--zg-tint-alpha));
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  color: #111827;
  opacity: 0;
  transform: translateY(24px);
  transition: transform 180ms ease-in, opacity 180ms ease-in;
  container: zgsheet / inline-size;
}
.zenith-glass .zg-sheet-layer--open .zg-sheet-dim {
  opacity: 1;
  transition: opacity 220ms ease-out;
}
.zenith-glass .zg-sheet-layer--open .zg-sheet {
  opacity: 1;
  transform: none;
  transition: transform 220ms ease-out, opacity 220ms ease-out;
}
/* Once the sheet is up, what is behind it is hidden (it keeps its scroll
   position), so the sheet shows the panel's own glass. */
.zenith-glass .zg-covered > .zenith-header,
.zenith-glass .zg-covered > .zenith-welcome,
.zenith-glass .zg-covered > .zenith-messages,
.zenith-glass .zg-covered > .zenith-footer {
  visibility: hidden;
}
/* With nothing left behind it, the sheet's own tint and the dim ease away,
   so the form sits on exactly the panel's glass, as on the artboards. */
.zenith-glass .zg-covered .zg-sheet {
  background-color: rgba(var(--zg-tint), 0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 200ms ease;
}
.zenith-glass .zg-covered .zg-sheet-dim {
  opacity: 0;
  transition: opacity 200ms ease;
}
.zenith-glass .zg-sheet-head {
  flex: none;
  display: flex;
  align-items: center;
  column-gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.zenith-glass .zg-sheet--prices .zg-sheet-head { border-bottom-color: rgba(0, 0, 0, 0.06); }
/* Where the corner resize handle shows, the Back button sits clear of it. */
@media (min-width: 481px) {
  .zenith-glass .zenith-chat-panel:not(.zenith-fullscreen) .zg-sheet-head { padding-left: 24px; }
}
.zenith-glass .zg-sheet-back {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #1F2937;
  cursor: pointer;
}
.zenith-glass .zg-sheet--prices .zg-sheet-back { color: #374151; }
.zenith-glass .zg-sheet-back:hover { background: rgba(255, 255, 255, 0.5); color: #111827; }
.zenith-glass .zg-sheet-back:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 0;
}
.zenith-glass .zg-sheet-icon {
  flex: none;
  display: flex;
  color: #BD8C34;
}
.zenith-glass .zg-sheet-title {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zenith-glass .zg-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.zenith-glass .zg-sheet--enquiry .zg-sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Every scrollbar in the glass design is the same (Jason, 14 to 16 Oct 2026):
   5px, a faint track and a gold thumb like the bars under the times and the
   categories, set 3px in from the area's edge, with no change on hover or
   while dragged and the open hand over the thumb, the closed one while it is
   dragged. A page cannot set the cursor over a browser scrollbar, so the
   browser's own side scrollbars are hidden here and drawn bars take their
   place (the side scrollbars in chatbot.js), lying over the areas' right
   padding. Only the thumb takes the pointer. */
.zenith-glass .zenith-messages,
.zenith-glass .zenith-welcome,
.zenith-glass .zg-sheet-body,
.zenith-glass .zg-prices-list { scrollbar-width: none; }
.zenith-glass .zenith-messages::-webkit-scrollbar,
.zenith-glass .zenith-welcome::-webkit-scrollbar,
.zenith-glass .zg-sheet-body::-webkit-scrollbar,
.zenith-glass .zg-prices-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.zenith-glass .zg-vbar {
  position: absolute;
  z-index: 3;
  width: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.2s ease;
}
.zenith-glass .zg-vbar--visible { opacity: 1; }
.zenith-glass .zg-vbar-thumb {
  position: relative;
  width: 100%;
  height: 24px;
  border-radius: 3px;
  background: rgba(189, 140, 52, 0.55);
  cursor: grab;
  touch-action: none;
}
/* A slightly wider hit area than the 5px thumb, still inside the padding. */
.zenith-glass .zg-vbar-thumb::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  right: -3px;
}
.zenith-glass .zg-vbar--visible .zg-vbar-thumb { pointer-events: auto; }
.zenith-glass.zg-vbar-dragging,
.zenith-glass.zg-vbar-dragging * {
  cursor: grabbing !important;
  -webkit-user-select: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .zenith-glass .zg-vbar { transition: none; }
}
/* While a mouse drags a list (drag to scroll in chatbot.js), no text is picked up. */
.zenith-glass .zg-dragging {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}
.zenith-glass .zg-sr,
.zenith-glass .zg-sr-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  white-space: nowrap;
}

/* ── Quick Enquiry form (artboard FastTrack) ────────────────────────── */
.zenith-glass .zg-form {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 8px 18px 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.zenith-glass .zg-form-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #1F2937;
}
.zenith-glass .zg-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.zenith-glass .zg-lb {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: #1F2937;
}
.zenith-glass legend.zg-lb {
  padding: 0;
  margin-bottom: 6px;
}
.zenith-glass .zg-opt {
  font-weight: 400;
  color: #4B5563;
}
.zenith-glass .zg-vc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.zenith-glass .zg-vc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 42px;
  padding: 5px 12px;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.5);
  color: #1F2937;
  cursor: pointer;
}
.zenith-glass .zg-vc:hover { background: rgba(255, 255, 255, 0.75); }
.zenith-glass .zg-vc.on {
  background: #FFFFFF;
  border-color: #BD8C34;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.08);
}
.zenith-glass .zg-vc:focus-within {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}
/* The ring is for the keyboard; a tap or click shows only the gold border. */
.zenith-glass .zg-vc:focus-within:not(:has(:focus-visible)),
.zenith-glass .zg-choice:focus-within:not(:has(:focus-visible)) { outline: none; }
.zenith-glass .zg-vc-ic {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(189, 140, 52, 0.14);
  color: #8A6420;
}
.zenith-glass .zg-vc.on .zg-vc-ic {
  background: #BD8C34;
  color: #FFFFFF;
}
.zenith-glass .zg-vc-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.zenith-glass .zg-vc-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.zenith-glass .zg-vc-hint {
  font-size: 12px;
  line-height: 1.3;
  color: #4B5563;
}
/* In a narrow sheet (a phone, or the smallest desktop panel) the two cards
   are tightened a little so "I've been before" stays on one line. */
@container zgsheet (max-width: 440px) {
  .zenith-glass .zg-vc { gap: 8px; padding: 9px 10px; }
  .zenith-glass .zg-vc-ic { width: 28px; height: 28px; }
  .zenith-glass .zg-vc-label { font-size: 13px; }
}
/* And on the narrowest phones the field labels come down a touch, so a
   half-width one ("How did you hear about us?") stays on one line and the
   boxes in a row stay level. */
@container zgsheet (max-width: 384px) {
  .zenith-glass .zg-lb { font-size: 11.5px; }
}
@container zgsheet (max-width: 368px) {
  .zenith-glass .zg-lb { font-size: 11px; }
  .zenith-glass .zg-vc { gap: 6px; padding: 9px 8px; }
  .zenith-glass .zg-vc-ic { width: 24px; height: 24px; }
}
/* The smallest phones (320px wide) drop the two cards' icons and give the
   boxes' words a little more room, so nothing is cut off. */
@container zgsheet (max-width: 340px) {
  .zenith-glass .zg-vc-ic { display: none; }
  .zenith-glass .zg-f { padding: 0 8px; }
}
/* A short phone (640px tall or less) closes the form up a little, so the
   whole form and both buttons fit without scrolling. */
@media (max-height: 680px) {
  .zenith-glass .zg-form { gap: 4px; padding-top: 6px; }
  .zenith-glass .zg-row { row-gap: 4px; }
  .zenith-glass .zg-field { gap: 3px; }
  .zenith-glass .zg-f { height: 34px; }
  .zenith-glass .zg-f-area { height: 40px; }
  .zenith-glass .zg-vc { min-height: 38px; padding-top: 4px; padding-bottom: 4px; }
  .zenith-glass .zg-vc-hint { display: none; }
}
.zenith-glass .zg-row {
  display: grid;
  gap: 6px 10px;
}
.zenith-glass .zg-row-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zenith-glass .zg-row-thirds { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.zenith-glass .zg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.zenith-glass .zg-f {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #DDDAD5;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: #111827;
  box-shadow: none;
}
.zenith-glass .zg-f:focus {
  outline: 2px solid #BD8C34;
  outline-offset: 0;
  border-color: #BD8C34;
}
.zenith-glass .zg-f::placeholder {
  color: #9CA3AF;
  opacity: 1;
}
.zenith-glass .zg-f-area {
  height: 44px;
  padding: 7px 12px;
  resize: none;
  line-height: 1.4;
}
.zenith-glass .zg-field--error .zg-f,
.zenith-glass .zg-group--error .zg-f { border-color: #B42318; }
.zenith-glass .zg-err {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #B42318;
}
.zenith-glass .zg-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zenith-glass .zg-help {
  margin: -2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #374151;
}
.zenith-glass .zg-form-grow { flex-grow: 1; }
.zenith-glass .zg-form-notice {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #B42318;
  text-align: center;
}
.zenith-glass .zg-book {
  flex: none;
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 28px;
  background: #BD8C34;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.zenith-glass .zg-book:hover { background: #A07526; }
.zenith-glass .zg-book:disabled {
  background: #BD8C34;
  opacity: 0.7;
  cursor: progress;
}
.zenith-glass .zg-team-link {
  flex: none;
  align-self: center;
  min-height: 20px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #1F2937;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.zenith-glass .zg-team-link:hover { color: #111827; }
/* "Send to the team" under a reply the receptionist could not answer
   (src/team_button.py): opens the Quick Enquiry form at its team step. */
.zenith-glass .zg-team-chip-row {
  display: flex;
  margin-top: 10px;
}
.zenith-glass .zg-team-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: #BD8C34;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.zenith-glass .zg-team-chip:hover { background: #A07526; }
.zenith-glass .zg-team-chip:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}
.zenith-glass .zg-team-link:disabled { cursor: progress; opacity: 0.7; }
.zenith-glass .zg-book:focus-visible,
.zenith-glass .zg-team-link:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}
/* The "ask the team" step, in place of the two buttons above. */
.zenith-glass .zg-team-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zenith-glass .zg-team-intro {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #1F2937;
}
.zenith-glass .zg-choices {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}
.zenith-glass .zg-choice {
  position: relative;
  height: 40px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
  cursor: pointer;
  white-space: nowrap;
}
.zenith-glass .zg-choice:hover { background: rgba(255, 255, 255, 0.75); }
.zenith-glass .zg-choice.on {
  background: #FFFFFF;
  border-color: #BD8C34;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.08);
}
.zenith-glass .zg-choice:focus-within {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}
.zenith-glass .zg-field--error .zg-choice { border-color: rgba(180, 35, 24, 0.55); }

/* ── Prices sheet (artboard Prices) ─────────────────────────────────── */
.zenith-glass .zg-sheet--prices .zg-sheet-body { overflow: hidden; }
.zenith-glass .zg-prices-top {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 10px;
}
.zenith-glass .zg-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  height: 40px;
  box-sizing: border-box;
  padding: 3px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.45);
}
.zenith-glass .zg-seg-btn {
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  cursor: pointer;
}
.zenith-glass .zg-seg-btn:hover { color: #111827; }
.zenith-glass .zg-seg-btn.on {
  background: #FFFFFF;
  color: #111827;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12);
}
/* The two switches share one line where there is comfortable room (Jason,
   15 Oct 2026), sized to their words; in a narrower sheet (a phone, the
   smallest desktop panel) they stack as two equal full-width rows rather than
   squeeze the words. */
.zenith-glass .zg-prices-switches {
  display: flex;
  gap: 8px;
}
.zenith-glass .zg-prices-switches > .zg-seg { flex: 1 1 auto; min-width: 0; }
.zenith-glass .zg-prices-switches > .zg-seg[hidden] { display: none; }
.zenith-glass .zg-prices-switches .zg-seg-btn { padding: 0 8px; font-size: 12px; }
@container zgsheet (max-width: 445px) {
  .zenith-glass .zg-prices-switches { flex-direction: column; gap: 6px; }
  .zenith-glass .zg-prices-switches > .zg-seg { flex: none; width: 100%; }
  .zenith-glass .zg-prices-switches .zg-seg-btn { padding: 0 8px; font-size: 13px; }
  .zenith-glass .zg-prices-switches > .zg-seg--small { height: 34px; }
}
.zenith-glass .zg-seg-btn:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 1px;
}
.zenith-glass .zg-prices-intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #1F2937;
}
.zenith-glass .zg-search {
  height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #E5E7EB;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.92);
}
.zenith-glass .zg-search:focus-within { border-color: #BD8C34; }
.zenith-glass .zg-search svg {
  flex: none;
  color: #6B7280;
}
.zenith-glass .zg-search-input {
  flex-grow: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #111827;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.zenith-glass .zg-search-input::placeholder {
  color: #6B7280;
  opacity: 1;
}
.zenith-glass .zg-chips-wrap {
  position: relative;
  margin: 0 -18px;
}
/* Under the categories the bar is a real, draggable scrollbar: a touch
   thicker than the times' one, with room above it and a taller hit area. */
.zenith-glass .zg-chips-wrap .zenith-time-scrollbar {
  left: 18px;
  right: 18px;
  height: 5px;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}
.zenith-glass .zg-chips-wrap .zenith-time-scrollbar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  bottom: -5px;
}
.zenith-glass .zg-chips-wrap .zenith-time-scrollthumb { cursor: grab; }
.zenith-glass .zg-chips-wrap .zenith-time-scrollbar:not(.zenith-time-scrollbar--visible) { pointer-events: none; }
.zenith-glass .zg-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: -4px 0 0;
  padding: 4px 18px 13px;   /* room above for a chip's focus ring */
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.zenith-glass .zg-chips::-webkit-scrollbar { display: none; }
.zenith-glass .zg-chip {
  flex: none;
  height: 32px;
  margin: 0;
  padding: 0 13px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #1F2937;
  white-space: nowrap;
  cursor: pointer;
}
.zenith-glass .zg-chip:hover { background: rgba(255, 255, 255, 0.85); }
.zenith-glass .zg-chip.on {
  background: #111827;
  border-color: #111827;
  color: #FFFFFF;
}
.zenith-glass .zg-chip:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}
.zenith-glass .zg-prices-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 18px 16px;
}
.zenith-glass .zg-pgroup {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.zenith-glass .zg-pgroup-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6E4F18;
}
.zenith-glass .zg-pgroup-count {
  font-weight: 500;
  letter-spacing: 0;
  color: #4B5563;
}
.zenith-glass .zg-pcard {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  overflow: hidden;
}
.zenith-glass .zg-prow--sep { border-top: 1px solid #F3F4F6; }
.zenith-glass .zg-prow-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  font-family: inherit;
  color: #111827;
  text-align: left;
  cursor: pointer;
}
.zenith-glass .zg-prow-btn:hover { background: #FAF8F4; }
.zenith-glass .zg-prow-static { cursor: default; }
.zenith-glass .zg-prow-static:hover { background: transparent; }
.zenith-glass .zg-prow-btn:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: -2px;
}
.zenith-glass .zg-prow-text {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zenith-glass .zg-prow-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.zenith-glass .zg-prow-sub {
  font-size: 12px;
  line-height: 1.35;
  color: #4B5563;
}
.zenith-glass .zg-prow-price {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.zenith-glass .zg-free { color: #15803D; }
.zenith-glass .zg-prow-note.zg-prow-redeem--yes { color: #15803D; }   /* the same green as "Free" */
.zenith-glass .zg-prow-price--muted {
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
}
.zenith-glass .zg-prow-from {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
}
.zenith-glass .zg-prow-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #4B5563;
}
/* A treatment's one line on what it helps, and its quick facts, in a quiet row of
   up to three, so the prices below stay the focus. */
.zenith-glass .zg-prow-about {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #1F2937;
}
/* Each fact at least 90px wide (the widest label, ANAESTHETIC, is about 81px),
   so on a narrow phone a third one goes onto its own line rather than its
   label running into the next. */
.zenith-glass .zg-prow-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin: 0 0 2px;
  padding: 8px 0;
  border-top: 1px solid #ECE7DE;
  border-bottom: 1px solid #ECE7DE;
}
.zenith-glass .zg-prow-facts > div { min-width: 0; }
.zenith-glass .zg-prow-facts dt,
.zenith-glass .zg-prow-facts dd { overflow-wrap: anywhere; }
.zenith-glass .zg-prow-facts dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8A6420;
}
.zenith-glass .zg-prow-facts dd {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #111827;
}
.zenith-glass .zg-prow-first {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 2px 0 0;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid #EFE8DA;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #8A6420;
  text-align: left;
  cursor: pointer;
}
/* "Or by video with ..." lines under the consultation line: the same look, one
   rule above the first of them only, so the first steps read as one list. */
.zenith-glass .zg-prow-video + .zg-prow-video,
.zenith-glass .zg-prow-first:not(.zg-prow-video) + .zg-prow-video {
  border-top: 0;
  padding-top: 6px;
}
.zenith-glass .zg-prow-first:hover { color: #6E4F18; }
.zenith-glass .zg-prow-first:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}
.zenith-glass .zg-prow-first-price {
  flex: none;
  font-weight: 600;
  white-space: nowrap;
}
.zenith-glass .zg-prices-empty--action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.zenith-glass .zg-prices-alt {
  height: 38px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 19px;
  background: #111827;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.zenith-glass .zg-prices-alt:hover { background: #1F2937; }

/* A row's "Book this" or "Ask about this", the last thing in its details: a
   small pill on the left, so it never stretches with a wide panel. */
.zenith-glass .zg-prow-ask {
  align-self: flex-start;
  max-width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  margin: 4px 0 0;
  padding: 7px 16px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 17px;
  background: #FFFFFF;
  color: #111827;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.zenith-glass .zg-prow-ask:hover { border-color: #BD8C34; color: #6E4F18; }
.zenith-glass .zg-prow-ask--book {
  border-color: #BD8C34;
  background: #BD8C34;
  color: #FFFFFF;
}
.zenith-glass .zg-prow-ask--book:hover { background: #A07526; border-color: #A07526; color: #FFFFFF; }
.zenith-glass .zg-prow-ask:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}
/* "Not sure which one you need?" at the foot of the list. Wraps onto two
   lines in a narrow panel rather than squeezing the button. */
.zenith-glass .zg-prices-ask {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.4;
  color: #1F2937;
}
.zenith-glass .zg-prices-ask-btn {
  flex: none;
  height: 34px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 17px;
  background: #111827;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.zenith-glass .zg-prices-ask-btn:hover { background: #1F2937; }
.zenith-glass .zg-prices-ask-btn:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}
.zenith-glass .zg-prices-alt:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}

.zenith-glass .zg-prow .zg-icon-chevron {
  flex: none;
  color: #9CA3AF;
  transition: transform 0.15s;
}
.zenith-glass .zg-prow.zg-open .zg-icon-chevron { transform: rotate(180deg); }
.zenith-glass .zg-prow-detail {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 14px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #FAF8F4;
}
/* A group of options (Soprano's areas): a heading that opens on a tap. */
.zenith-glass .zg-optgroup { border-top: 1px solid #ECE7DE; }
.zenith-glass .zg-optgroup:first-child { border-top: 0; }
.zenith-glass .zg-optgroup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.zenith-glass .zg-optgroup-head::-webkit-details-marker { display: none; }
.zenith-glass .zg-optgroup-head > span:first-child { flex-grow: 1; }
.zenith-glass .zg-optgroup-from { flex: none; white-space: nowrap; font-weight: 500; color: #4B5563; }
.zenith-glass .zg-prow.zg-open .zg-optgroup .zg-icon-chevron { transform: none; transition: transform 0.15s; }
.zenith-glass .zg-prow.zg-open .zg-optgroup[open] .zg-icon-chevron { transform: rotate(180deg); }
.zenith-glass .zg-optgroup[open] { padding-bottom: 6px; }
.zenith-glass .zg-optgroup .zg-prow-line { padding: 3px 0 3px 10px; }
.zenith-glass .zg-optgroup-head:focus-visible { outline: 2px solid #BD8C34; outline-offset: 2px; border-radius: 6px; }
.zenith-glass .zg-prow-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #1F2937;
}
.zenith-glass .zg-prow-line-price {
  flex: none;
  font-weight: 600;
  color: #111827;
}
.zenith-glass .zg-prow-line-price.zg-free { color: #15803D; }
.zenith-glass .zg-prices-empty {
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.5;
  color: #1F2937;
  text-align: center;
}
.zenith-glass .zg-prices-loading {
  margin: 0;
  padding: 18px 0;
  font-size: 13px;
  color: #4B5563;
  text-align: center;
}
.zenith-glass .zg-prices-footer {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #374151;
}
.zenith-glass .zg-sheet-foot {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 18px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.zenith-glass .zg-sheet-foot--one { grid-template-columns: minmax(0, 1fr); }
.zenith-glass .zg-foot-back,
.zenith-glass .zg-foot-enquiry {
  height: 46px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0 12px;
  border-radius: 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.zenith-glass .zg-foot-back {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.85);
  color: #111827;
}
.zenith-glass .zg-foot-back:hover { background: #FFFFFF; }
.zenith-glass .zg-foot-enquiry {
  border: 0;
  background: #BD8C34;
  color: #FFFFFF;
}
.zenith-glass .zg-foot-enquiry:hover { background: #A07526; }
.zenith-glass .zg-foot-back:focus-visible,
.zenith-glass .zg-foot-enquiry:focus-visible {
  outline: 2px solid #BD8C34;
  outline-offset: 2px;
}

/* ── Full screen: the sheets keep the same reading column as the chat ─ */
.zenith-glass .zenith-chat-panel.zenith-fullscreen .zg-sheet-head {
  padding-left: max(16px, calc((100vw - 720px) / 2));
  padding-right: max(16px, calc((100vw - 720px) / 2));
}

/* ── Nothing stretches in a big window (Jason, 15 Oct) ───────────────── */
/* A sheet's content and its bottom buttons keep to a phone-width column,
   centred, however wide the panel (a large docked panel, Full Screen); the
   form's buttons sit inside it. The composer stops at 640px. */
.zenith-glass .zg-sheet-body {
  padding-left: max(0px, calc((100% - 460px) / 2));
  padding-right: max(0px, calc((100% - 460px) / 2));
}
.zenith-glass .zg-sheet-foot {
  padding-left: max(18px, calc((100% - 460px) / 2 + 18px));
  padding-right: max(18px, calc((100% - 460px) / 2 + 18px));
}
.zenith-glass .zg-composer {
  max-width: 640px;
  margin: 0 auto;
}

/* ── Phone ──────────────────────────────────────────────────────────── */
/* The panel already fills a phone's screen, so Full Screen stays hidden
   there, as on the classic design (its 480px rule above still applies). */
/* The sheet's own Full Screen button follows the header's: not on phones. */
@media (max-width: 480px) {
  .zenith-glass .zg-sheet-full { display: none; }
}
/* A touch screen gets 16px text in the boxes, so iOS does not zoom the
   page when one is tapped. */
@media (pointer: coarse) {
  .zenith-glass .zg-f,
  .zenith-glass .zg-search-input { font-size: 16px; }
}

/* Everything that moves stops for patients who ask for less motion; the
   send button's colour change stays (it is not movement). */
@media (prefers-reduced-motion: reduce) {
  .zenith-glass .zg-pulse { animation: none; }
  .zenith-glass .zg-sheet,
  .zenith-glass .zg-sheet-dim,
  .zenith-glass .zg-sheet-layer--open .zg-sheet,
  .zenith-glass .zg-sheet-layer--open .zg-sheet-dim,
  .zenith-glass .zg-covered .zg-sheet,
  .zenith-glass .zg-covered .zg-sheet-dim { transition: none; }
  .zenith-glass .zg-sheet { transform: none; }
  .zenith-glass .zg-status-text,
  .zenith-glass .zg-composer,
  .zenith-glass .zg-pill,
  .zenith-glass .zg-enq-card .zg-icon-chevron,
  .zenith-glass .zg-prow .zg-icon-chevron,
  .zenith-glass .zg-prow.zg-open .zg-optgroup .zg-icon-chevron { transition: none; }
  .zenith-glass .zg-round.pulse::after { animation: none; }
}
/* --- end glass design --- */