/* ============================================================================
   1Gesture Customer Support Chat Widget
   ----------------------------------------------------------------------------
   All rules scoped under `.og-chat-widget` to prevent style leakage in either
   direction. Carries its own scoped palette (predates the Deep Field system).

   Brand:
     --og-primary    #22C55E
     --og-primary-d  #16A34A
     --og-text       #0F172A
     --og-text-mute  #64748B
     --og-border     #E2E8F0
     --og-surface    #FFFFFF
     --og-surface-mt #F8FAFC
     --og-danger     #EF4444
   ========================================================================== */

.og-chat-widget {
  --og-primary: #22C55E;
  --og-primary-d: #16A34A;
  --og-primary-light: rgba(34, 197, 94, 0.12);
  --og-text: #0F172A;
  --og-text-mute: #64748B;
  --og-border: #E2E8F0;
  --og-surface: #FFFFFF;
  --og-surface-mt: #F8FAFC;
  --og-danger: #EF4444;
  --og-radius: 16px;
  --og-radius-sm: 10px;
  --og-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.08);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--og-text);
}

.og-chat-widget *,
.og-chat-widget *::before,
.og-chat-widget *::after {
  box-sizing: border-box;
}

.og-chat-widget button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* DEF-049: the launcher is a FILLED button, but the reset above
   (.og-chat-widget button { background: none }) is more specific than the
   .og-chat-launcher rule below, so the launcher rendered transparent (only its
   green box-shadow showed — "transparent with green outside"). Re-assert the
   solid fill at matching specificity so the launcher is a solid green circle. */
.og-chat-widget .og-chat-launcher { background: var(--og-primary, #22C55E); }
.og-chat-widget .og-chat-launcher:hover { background: var(--og-primary-d, #16A34A); }

/* ============================================================
   Floating launcher (closed state)
   ============================================================ */
.og-chat-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* DEF-049: solid fill with an explicit fallback so the launcher is never
     transparent (green box-shadow only) on a surface where --og-primary
     isn't inherited. */
  background: var(--og-primary, #22C55E);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
  z-index: 9999;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.og-chat-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.45);
  background: var(--og-primary-d, #16A34A);
}
.og-chat-launcher:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--og-primary);
}
.og-chat-launcher svg { width: 26px; height: 26px; }
.og-chat-launcher[aria-expanded="true"] { display: none; }

/* ============================================================
   Panel (open state)
   ============================================================ */
.og-chat-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 380px;
  height: 560px;
  max-height: calc(100vh - 40px);
  background: var(--og-surface);
  border-radius: var(--og-radius);
  box-shadow: var(--og-shadow);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  border: 1px solid var(--og-border);
}
.og-chat-widget[data-open="true"] .og-chat-panel { display: flex; }

/* Header */
.og-chat-header {
  background: linear-gradient(135deg, var(--og-primary) 0%, var(--og-primary-d) 100%);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.og-chat-header__title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.og-chat-header__subtitle { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.og-chat-header__actions { display: flex; gap: 6px; }
.og-chat-header__btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: background 0.15s;
}
.og-chat-header__btn:hover { background: rgba(255, 255, 255, 0.25); }
.og-chat-header__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.og-chat-header__btn svg { width: 16px; height: 16px; }

/* Show the back button ONLY in the archived (read-only conversation) view.
   Show menu in all other views. */
.og-chat-header__back { display: none; }
.og-chat-widget[data-view="archived"] .og-chat-header__back { display: flex; }
.og-chat-widget[data-view="archived"] .og-chat-header__menu { display: none; }
.og-chat-widget[data-view="archived"] .og-chat-header__human { display: none; }

/* Messages list */
.og-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--og-surface-mt);
  scroll-behavior: smooth;
}
.og-chat-message {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: var(--og-radius-sm);
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.og-chat-message--user {
  align-self: flex-end;
  background: var(--og-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.og-chat-message--assistant {
  align-self: flex-start;
  background: #fff;
  color: var(--og-text);
  border: 1px solid var(--og-border);
  border-bottom-left-radius: 4px;
}
.og-chat-message--assistant a {
  color: var(--og-primary-d);
  text-decoration: underline;
}
.og-chat-message--error {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}
.og-chat-message strong { font-weight: 700; }

/* Typing indicator */
.og-chat-typing {
  display: flex;
  align-self: flex-start;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-sm);
  border-bottom-left-radius: 4px;
  gap: 4px;
}
.og-chat-typing span {
  width: 6px; height: 6px;
  background: var(--og-text-mute);
  border-radius: 50%;
  animation: og-typing 1.2s infinite ease-in-out;
}
.og-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.og-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes og-typing {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .og-chat-typing span { animation: none; opacity: 0.7; }
}

/* Escalate CTA */
.og-chat-escalate {
  align-self: flex-start;
  margin-top: 4px;
}
.og-chat-escalate__btn {
  background: #fff;
  border: 1.5px solid var(--og-primary);
  color: var(--og-primary-d);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.og-chat-escalate__btn:hover {
  background: var(--og-primary);
  color: #fff;
}
.og-chat-escalate__btn:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}

/* Composer */
.og-chat-composer {
  border-top: 1px solid var(--og-border);
  background: #fff;
  padding: 12px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}
.og-chat-composer__textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-sm);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--og-text);
  background: var(--og-surface-mt);
  max-height: 120px;
  outline: none;
}
.og-chat-composer__textarea:focus {
  border-color: var(--og-primary);
  background: #fff;
  box-shadow: 0 0 0 3px var(--og-primary-light);
}
.og-chat-composer__textarea::placeholder { color: var(--og-text-mute); }
.og-chat-composer__send {
  width: 40px; height: 40px;
  border-radius: var(--og-radius-sm);
  background: var(--og-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.og-chat-composer__send:hover:not(:disabled) { background: var(--og-primary-d); }
.og-chat-composer__send:active:not(:disabled) { transform: scale(0.96); }
.og-chat-composer__send:disabled { background: var(--og-border); cursor: not-allowed; }
.og-chat-composer__send:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}
.og-chat-composer__send svg { width: 18px; height: 18px; }

.og-chat-footer-note {
  font-size: 11px;
  color: var(--og-text-mute);
  text-align: center;
  padding: 0 12px 10px;
  background: #fff;
}

/* ============================================================
   Archived read-only banner (shown only in data-view="archived")
   ============================================================ */
.og-chat-archived-banner {
  display: none;
  border-top: 1px solid var(--og-border);
  background: var(--og-surface-mt);
  color: var(--og-text-mute);
  font-size: 12px;
  text-align: center;
  padding: 12px 14px;
  flex-shrink: 0;
}
.og-chat-widget[data-view="archived"] .og-chat-archived-banner { display: block; }
.og-chat-widget[data-view="archived"] .og-chat-composer,
.og-chat-widget[data-view="archived"] .og-chat-footer-note { display: none; }

/* ============================================================
   History view — list of past conversations
   ============================================================ */
.og-chat-history {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  padding: 14px;
  gap: 10px;
  background: var(--og-surface);
}
.og-chat-widget[data-view="history"] .og-chat-messages,
.og-chat-widget[data-view="history"] .og-chat-composer,
.og-chat-widget[data-view="history"] .og-chat-footer-note,
.og-chat-widget[data-view="history"] .og-chat-ticket,
.og-chat-widget[data-view="history"] .og-chat-archived-banner { display: none; }
.og-chat-widget[data-view="history"] .og-chat-history { display: flex; }

.og-chat-history__new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--og-primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 16px;
  border-radius: var(--og-radius-sm);
  transition: background 0.15s;
  flex-shrink: 0;
}
.og-chat-history__new:hover { background: var(--og-primary-d); }
.og-chat-history__new:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}
.og-chat-history__new svg { width: 16px; height: 16px; }

.og-chat-history__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.og-chat-history__item {
  text-align: left;
  background: var(--og-surface-mt);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
  cursor: pointer;
}
.og-chat-history__item:hover {
  background: var(--og-primary-light);
  border-color: var(--og-primary);
}
.og-chat-history__item:active { transform: scale(0.99); }
.og-chat-history__item:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}
.og-chat-history__item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--og-text);
  line-height: 1.35;
  /* line-clamp to two lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.og-chat-history__item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--og-text-mute);
}
.og-chat-history__item-badge {
  background: var(--og-primary-light);
  color: var(--og-primary-d);
  font-weight: 600;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.og-chat-history__empty {
  text-align: center;
  color: var(--og-text-mute);
  font-size: 13px;
  padding: 24px 12px;
}

/* ============================================================
   Ticket form view
   ============================================================ */
.og-chat-ticket {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  padding: 18px;
  background: var(--og-surface);
  gap: 12px;
}
.og-chat-widget[data-view="ticket"] .og-chat-messages,
.og-chat-widget[data-view="ticket"] .og-chat-composer,
.og-chat-widget[data-view="ticket"] .og-chat-footer-note { display: none; }
.og-chat-widget[data-view="ticket"] .og-chat-ticket { display: flex; }

.og-chat-ticket__intro {
  font-size: 13px;
  color: var(--og-text-mute);
  margin-bottom: 4px;
}
.og-chat-ticket__field { display: flex; flex-direction: column; gap: 4px; }
.og-chat-ticket__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--og-text);
}
.og-chat-ticket__input,
.og-chat-ticket__textarea {
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-sm);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--og-text);
  background: #fff;
  outline: none;
  width: 100%;
}
.og-chat-ticket__textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}
.og-chat-ticket__input:focus,
.og-chat-ticket__textarea:focus {
  border-color: var(--og-primary);
  box-shadow: 0 0 0 3px var(--og-primary-light);
}
.og-chat-ticket__error {
  color: var(--og-danger);
  font-size: 12px;
  min-height: 1em;
}
.og-chat-ticket__actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.og-chat-ticket__submit {
  flex: 1;
  background: var(--og-primary);
  color: #fff;
  font-weight: 700;
  padding: 11px 16px;
  border-radius: var(--og-radius-sm);
  font-size: 14px;
  transition: background 0.15s;
}
.og-chat-ticket__submit:hover:not(:disabled) { background: var(--og-primary-d); }
.og-chat-ticket__submit:disabled { background: var(--og-border); cursor: not-allowed; }
.og-chat-ticket__submit:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}
.og-chat-ticket__cancel {
  background: transparent;
  color: var(--og-text-mute);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-sm);
  padding: 11px 16px;
  font-weight: 600;
  font-size: 14px;
}
.og-chat-ticket__cancel:hover { background: var(--og-surface-mt); }
.og-chat-ticket__cancel:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}

/* Honeypot — hidden from real users + assistive tech, visible to dumb bots */
.og-chat-ticket__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* Success state */
.og-chat-ticket__success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 12px;
  gap: 12px;
}
.og-chat-widget[data-view="ticket-success"] .og-chat-ticket > *:not(.og-chat-ticket__success) { display: none; }
.og-chat-widget[data-view="ticket-success"] .og-chat-ticket__success { display: flex; }
.og-chat-widget[data-view="ticket-success"] .og-chat-messages,
.og-chat-widget[data-view="ticket-success"] .og-chat-composer,
.og-chat-widget[data-view="ticket-success"] .og-chat-footer-note { display: none; }
.og-chat-widget[data-view="ticket-success"] .og-chat-ticket { display: flex; }
.og-chat-ticket__success-icon {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--og-primary-light);
  color: var(--og-primary-d);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.og-chat-ticket__success-icon svg { width: 28px; height: 28px; }
.og-chat-ticket__success-title { font-size: 17px; font-weight: 700; color: var(--og-text); }
.og-chat-ticket__success-body { font-size: 14px; color: var(--og-text-mute); max-width: 280px; }
.og-chat-ticket__success-id {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--og-text-mute);
  background: var(--og-surface-mt);
  padding: 6px 10px;
  border-radius: 6px;
}
.og-chat-ticket__success-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 240px;
  margin-top: 8px;
}
.og-chat-ticket__success-newchat {
  background: var(--og-primary);
  color: #fff;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: var(--og-radius-sm);
  font-size: 14px;
}
.og-chat-ticket__success-newchat:hover { background: var(--og-primary-d); }
.og-chat-ticket__success-newchat:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}
.og-chat-ticket__success-close {
  background: transparent;
  color: var(--og-text-mute);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--og-radius-sm);
  font-size: 13px;
}
.og-chat-ticket__success-close:hover {
  background: var(--og-surface-mt);
  color: var(--og-text);
}
.og-chat-ticket__success-close:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}

/* ============================================================
   Mobile (≤640px) — full-width bottom sheet

   THE BUG THIS FIXES (owner report 2026-08-07): the panel was 92vh. `vh` is
   the LARGE viewport — the height the page would have with the browser's
   toolbars hidden — while `position: fixed; bottom: 0` resolves against the
   small/layout viewport. With an address bar or a bottom toolbar on screen
   those two disagree by 60-90px, and the panel's foot, which is exactly the
   composer and the ticket form's Send button, ends up underneath the browser
   chrome. Measured at 375x812 before the fix: send button at y=733-773,
   footer note running to y=812, both inside the strip the browser claims.

   `dvh` is the same measurement taken against the CURRENT viewport, so it
   tracks the chrome as it shows and hides. The vh rule stays as the fallback
   for browsers without dvh — it is no worse than what shipped.

   env(safe-area-inset-bottom) is the second half: on a notched iPhone the
   home indicator sits over the bottom ~34px even once the panel is sized
   correctly. Applied to the bottom-most rows rather than the panel so the
   messages area still scrolls edge to edge.
   ============================================================ */
@media (max-width: 640px) {
  .og-chat-launcher {
    right: 16px;
    bottom: 16px;
  }
  .og-chat-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 92vh;
    max-height: 92vh;
    border-radius: var(--og-radius) var(--og-radius) 0 0;
    border: none;
  }
  @supports (height: 100dvh) {
    .og-chat-panel {
      height: 92dvh;
      max-height: 92dvh;
    }
  }
  /* Keep the send/submit controls clear of the home indicator. max() so a
     browser reporting 0 for the inset keeps the design's own padding. */
  .og-chat-composer {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .og-chat-footer-note {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .og-chat-widget .og-chat-ticket__actions {
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }
}

/* Dragging the thread must not scroll the page behind it. On mobile that
   scroll is what expands and collapses the browser chrome, which resizes the
   panel under the reader's finger mid-sentence — and with dvh the panel now
   genuinely does resize, so containing the scroll matters more than before,
   not less. */
.og-chat-messages {
  overscroll-behavior: contain;
}

/* ============================================================
   Mobile backdrop.

   Desktop keeps NO backdrop on purpose: there the panel is a small floating
   card beside the page, and dimming the whole site behind a 380px card would
   overstate it. On mobile the panel covers the page, which reads as a sheet,
   and every sheet a person has ever used closes when they tap outside it.
   Without this the only way out is the small X in the header.

   z-index sits one below the panel (9999) and above the page, so the tap
   lands on the backdrop rather than on whatever link is underneath.
   ============================================================ */
.og-chat-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 9998;
}
@media (max-width: 640px) {
  .og-chat-widget[data-open="true"] .og-chat-backdrop { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .og-chat-backdrop { animation: og-backdrop-in 0.18s ease-out both; }
}
@keyframes og-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   CRO-6 (UX-9): in the APP context the SPA shows a fixed bottom
   tab bar on mobile (64px tall, 20px off the bottom). The default
   launcher position sits right on top of the Settings tab. Lift
   the launcher above the bar; data-context is set on the widget
   root by OneGestureChat.init. Wins over the <=640px rule above
   on specificity, so it holds at every mobile width.
   ============================================================ */
@media (max-width: 768px) {
  .og-chat-widget[data-context="app"] .og-chat-launcher {
    bottom: calc(20px + 64px + 12px);
  }
}

/* ============================================================
   Reduced motion + high contrast respect
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .og-chat-launcher,
  .og-chat-composer__send,
  .og-chat-header__btn,
  .og-chat-escalate__btn,
  .og-chat-ticket__submit {
    transition: none;
  }
}

/* ===========================================================================
   Support widget v2 — the three doors, intake submit bar, answer feedback.

   Reuses the existing --og-* tokens and the pill-button language already set
   by .og-chat-escalate__btn, so the new controls read as the same family
   rather than a bolted-on second design.
   =========================================================================== */

/* The three doors — offered once, on a fresh conversation */
.og-chat-widget .og-chat-doors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 8px;
}
.og-chat-widget .og-chat-doors__intro {
  font-size: 12px;
  color: var(--og-text-mute);
}
/* Stacked, not wrapped. The panel is 380px, so three pills on a row always
   break 2-then-1, which reads as an accident rather than a choice — and the
   longer fr/es/pt labels make it worse. One per line is also a bigger tap
   target on mobile. */
.og-chat-widget .og-chat-doors__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.og-chat-widget .og-chat-doors__btn {
  background: #fff;
  border: 1.5px solid var(--og-border);
  color: var(--og-text);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.og-chat-widget .og-chat-doors__btn:hover {
  border-color: var(--og-primary);
  color: var(--og-primary-d);
}
.og-chat-widget .og-chat-doors__btn:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}
/* The first door is the common case, so it carries the accent. */
.og-chat-widget .og-chat-doors__btn[data-door="support"] {
  border-color: var(--og-primary);
  color: var(--og-primary-d);
}
.og-chat-widget .og-chat-doors__btn[data-door="support"]:hover {
  background: var(--og-primary);
  color: #fff;
}

/* Intake submit bar — present from the FIRST question, never only at the end */
.og-chat-widget .og-chat-submit {
  display: flex;
  justify-content: flex-start;
  margin: 4px 0 2px;
}
.og-chat-widget .og-chat-submit__btn {
  background: var(--og-primary);
  border: 1.5px solid var(--og-primary);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.og-chat-widget .og-chat-submit__btn:hover:not(:disabled) { background: var(--og-primary-d); }
.og-chat-widget .og-chat-submit__btn:disabled { opacity: 0.6; cursor: default; }
.og-chat-widget .og-chat-submit__btn:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}

/* Quiet, non-blocking note — privacy warning, reference number */
.og-chat-notice {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--og-text-mute);
  background: var(--og-surface-mt);
  border-radius: var(--og-radius-sm);
  padding: 6px 10px;
  margin: 2px 0 6px;
}

/* Answer feedback */
.og-chat-widget .og-chat-rate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.og-chat-widget .og-chat-rate__label,
.og-chat-widget .og-chat-rate__done {
  font-size: 11.5px;
  color: var(--og-text-mute);
}
.og-chat-widget .og-chat-rate__btn {
  background: transparent;
  border: 1px solid var(--og-border);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.og-chat-widget .og-chat-rate__btn:hover { border-color: var(--og-primary); background: var(--og-surface-mt); }
.og-chat-widget .og-chat-rate__btn:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}
.og-chat-widget .og-chat-rate__chip {
  background: transparent;
  border: 1px solid var(--og-border);
  border-radius: 999px;
  color: var(--og-text);
  font-size: 11.5px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.og-chat-widget .og-chat-rate__chip:hover { border-color: var(--og-primary); color: var(--og-primary-d); }
.og-chat-widget .og-chat-rate__chip:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}


/* Optional email capture for anonymous visitors, shown once before submitting.
   Scoped to .og-chat-widget for the same reason as everything above: the
   widget's own button reset is (0,1,1) and beats a bare class. */
.og-chat-widget .og-chat-email {
  background: var(--og-surface-mt);
  border-radius: var(--og-radius-sm);
  padding: 10px 12px;
  margin: 4px 0 8px;
}
.og-chat-widget .og-chat-email__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--og-text);
}
.og-chat-widget .og-chat-email__why {
  font-size: 11.5px;
  color: var(--og-text-mute);
  margin: 2px 0 8px;
}
.og-chat-widget .og-chat-email__input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1.5px solid var(--og-border);
  border-radius: var(--og-radius-sm);
  background: #fff;
  color: var(--og-text);
}
.og-chat-widget .og-chat-email__input:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 1px;
}
.og-chat-widget .og-chat-email__error {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--og-danger);
  min-height: 0;
}
.og-chat-widget .og-chat-email__error:empty { display: none; }
.og-chat-widget .og-chat-email__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.og-chat-widget .og-chat-email__skip {
  background: none;
  border: none;
  color: var(--og-text-mute);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.og-chat-widget .og-chat-email__skip:focus-visible {
  outline: 2px solid var(--og-primary-d);
  outline-offset: 2px;
}

/* The [hidden] attribute is display:none in the UA sheet, which any explicit
   `display` in this file silently defeats — .og-chat-email__actions sets
   display:flex, so hiding the yes/no row after a choice did nothing. Declared
   last so it wins on source order at equal specificity. */
.og-chat-widget [hidden] { display: none; }

/* ===========================================================================
   ON-BRAND PASS (owner request, against /branding)
   ---------------------------------------------------------------------------
   The palette above was generic SaaS green (#22C55E / #16A34A) and Inter — it
   matched nothing in the brand kit. The kit's own tokens are a deep green
   (--green #00552b), a lime (#b3ff7a), near-black ink (#232824) and off-white
   (#fafafa), set in Libre Franklin.

   Declared here as an override block rather than edited in place above, so the
   original scoped palette stays legible as history and this diff shows exactly
   what the brand changed.

   FONT: mirrors builder/tokens/tokens.css --font-family verbatim. The family
   this product ships, licenses and serves is LIBRE FRANKLIN (OFL 1.1). Do not
   name Franklin Gothic here — it is a licensed Monotype face we do not have,
   and naming it as ours is a licensing claim.
   =========================================================================== */
.og-chat-widget {
  --og-primary: #00552b;          /* brand --green */
  --og-primary-d: #003f20;        /* hover: same hue, darker */
  --og-primary-light: rgba(0, 85, 43, 0.10);
  --og-accent: #b3ff7a;           /* brand lime */
  --og-accent-ink: #00552b;       /* the kit's own lime/green pairing */
  --og-text: #232824;             /* brand ink */
  --og-text-mute: #5f6660;
  --og-border: #e3e6e3;
  --og-surface: #ffffff;
  --og-surface-mt: #fafafa;       /* brand off-white */

  /* 'Franklin Gothic Medium' is a NON-FIRST fallback only — a face the reader
     may have installed, never one we ship. Owner ruling 2026-08-07 (DEF-091);
     pinned by Side C of server/tests/font-licensing-guard.test.js. */
  font-family: "Libre Franklin", "Franklin Gothic Medium", "Arial Narrow", system-ui, -apple-system, sans-serif;
}

/* Flat, not a gradient — the kit uses solid fields of colour. */
.og-chat-widget .og-chat-header {
  background: var(--og-primary);
}

/* Title in brand lime (owner request) — the kit's lime-on-green pairing. Lime
   on the deep brand green is ~7.4:1, comfortably AA. The subtitle stays white
   so the lime headline is the one accent, not a competing pair. */
.og-chat-widget .og-chat-header__title {
  color: var(--og-accent);
}

/* The lime-on-green pairing is the kit's signature, and it makes the primary
   action the most distinctive thing in the panel. White-on-green read as
   any-SaaS-product-at-all. */
.og-chat-widget .og-chat-submit__btn,
.og-chat-widget .og-chat-doors__btn[data-door="support"],
.og-chat-widget .og-chat-history__new,
.og-chat-widget .og-chat-ticket__submit {
  background: var(--og-accent);
  border-color: var(--og-accent);
  color: var(--og-accent-ink);
  font-weight: 700;
}
.og-chat-widget .og-chat-ticket__submit:disabled {
  opacity: 0.5;
}
/* Scoped under .og-chat-widget so these win over the `button { background:none;
   color:inherit }` reset (DEF-049). Without this the new-chat button rendered
   transparent with ink text, and its hover added a dark-green fill under that
   same ink text — dark-green-on-near-black, unreadable. Now lime + ink, matching
   the other primary actions, with a lighter lime on hover. */
.og-chat-widget .og-chat-submit__btn:hover:not(:disabled),
.og-chat-widget .og-chat-doors__btn[data-door="support"]:hover,
.og-chat-widget .og-chat-history__new:hover,
.og-chat-widget .og-chat-ticket__submit:hover:not(:disabled) {
  background: #a2f562;
  border-color: #a2f562;
  color: var(--og-accent-ink);
}

/* ---------------------------------------------------------------------------
   The CURRENT door (ClickUp 869edb1uv, then owner report 2026-08-07).

   History, because both directions have been wrong once. Picking a door first
   deleted the whole pill block, so the panel showed LESS than before the click
   and read as broken. The fix kept the block but greyed and disabled EVERY
   pill — which looked like four buttons refusing to be pressed, and was
   reported as worse. So now only the CURRENT pill is restyled; the rest keep
   their live appearance because they are live, and picking one switches to it.

   That is why this selector ends in [data-picked="true"] and why there is no
   companion rule for the unpicked siblings. A rule targeting them would
   re-create the second bug. Do not add `cursor: default` or a muted ink for
   the others — they are pressable, and must look it.

   The extra specificity (`[data-picked]` on the wrap) beats the lime
   `[data-door="support"]` accent above regardless of source order. No
   `opacity`: fading the lime pill is what would drop it below AA. The current
   door carries the kit's green ink — 9.0:1 on white, comfortably AA at 13px —
   plus a tick, so the state never rests on colour alone.
   --------------------------------------------------------------------------- */
.og-chat-widget .og-chat-doors[data-picked] .og-chat-doors__btn[data-picked="true"] {
  background: #fff;
  border-color: var(--og-primary);
  color: var(--og-accent-ink);
  font-weight: 700;
}
.og-chat-widget .og-chat-doors__btn-tick {
  margin-right: 6px;
  font-weight: 700;
}

/* Ticket ("Email us") form: keep the actions pinned to the bottom so the
   Send/Cancel buttons are always visible without scrolling the fields, and give
   the cancel a proper ghost-button look (the button reset stripped its border
   colour + muted text). A little less textarea height eases the vertical
   pressure too. */
.og-chat-widget .og-chat-ticket__textarea {
  min-height: 84px;
}
.og-chat-widget .og-chat-ticket__actions {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 2px;
  background: var(--og-surface);
  border-top: 1px solid var(--og-border);
}
.og-chat-widget .og-chat-ticket__cancel {
  background: transparent;
  border: 1.5px solid var(--og-border);
  color: var(--og-text-mute);
  font-weight: 600;
}
.og-chat-widget .og-chat-ticket__cancel:hover {
  background: var(--og-surface-mt);
  border-color: var(--og-primary);
  color: var(--og-primary);
}

/* Launcher: the wave mark instead of a generic speech bubble. Applied as a
   background so a failed load leaves a lime disc rather than a broken-image
   glyph — and the disc alone is still recognisably 1Gesture. */
.og-chat-widget .og-chat-launcher {
  background-color: var(--og-accent);
  background-image: url('/branding/hands/hand-07-wave.svg');
  background-repeat: no-repeat;
  background-position: center 58%;
  background-size: 62%;
}
.og-chat-widget .og-chat-launcher:hover {
  background-color: #a2f562;
}
.og-chat-widget .og-chat-launcher svg { display: none; }

/* The launcher's glow was still keyed to the retired #22C55E, which reads as a
   different green sitting right next to the lime. Re-tinted to the brand green,
   and the mark eased off the bottom edge so the wrist is not clipped. */
.og-chat-widget .og-chat-launcher {
  box-shadow: 0 6px 20px rgba(0, 85, 43, 0.28);
  background-size: 56%;
  background-position: center 60%;
}
.og-chat-widget .og-chat-launcher:hover {
  box-shadow: 0 10px 24px rgba(0, 85, 43, 0.38);
}
.og-chat-widget .og-chat-launcher:focus-visible {
  outline: 3px solid var(--og-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(0, 85, 43, 0.25);
}

/* Hand marks. Two placements only, both moments rather than decoration: the
   greeting everybody sees, and the beat right after someone has given us
   something. Sized in the flow, never absolutely positioned, so they cannot
   collide with a message bubble at any width. */
.og-chat-widget .og-chat-hand {
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.og-chat-widget .og-chat-hand--greet {
  width: 46px;
  margin: 0 0 6px 2px;
}
.og-chat-widget .og-chat-hand--sent {
  width: 52px;
  align-self: flex-start;
  margin: 2px 0 -2px 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .og-chat-widget .og-chat-hand--sent { animation: og-hand-in 0.32s ease-out both; }
}
@keyframes og-hand-in {
  from { opacity: 0; transform: translateY(6px) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}