/* ============================================================================
   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
   ============================================================ */
@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;
  }
}

/* ============================================================
   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 */

  font-family: "Libre Franklin", "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);
}

/* ---------------------------------------------------------------------------
   Spent doors (ClickUp 869edb1uv). Picking a door used to delete the whole
   pill block; now the block stays and goes inert, so the panel never shows
   LESS than it did before the click. These rules carry extra specificity
   (`[data-picked]` on the wrap) so they beat the lime `[data-door="support"]`
   accent above regardless of source order.
   NB: no `opacity` here — fading the lime pill is what would drop it below
   AA contrast. Spent pills get explicit ink instead, and the chosen one keeps
   full-strength colour plus a tick, so the state never rests on colour alone.
   --------------------------------------------------------------------------- */
.og-chat-widget .og-chat-doors[data-picked] .og-chat-doors__btn {
  background: #fff;
  border-color: var(--og-border);
  color: var(--og-text-mute);
  font-weight: 600;
  cursor: default;
}
/* The chosen door keeps the kit's green ink — 9.0:1 on white, comfortably AA
   at this 13px size (spent pills sit at 5.9:1). Measured against the tokens
   .og-chat-widget actually defines, not the :root fallbacks above. */
.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; }
}