/* Clara chatbot widget — scoped styles.
 *
 * All selectors are namespaced under .clara-chat-* to avoid colliding with
 * the host page's CSS. Variables on the root container (.clara-chat) let
 * tenant-specific brand color override the default via JS:
 *
 *   widget.root.style.setProperty('--clara-brand', tenant.brand_color);
 *
 * Layout: vertical flex, fixed-height (configurable via --clara-height).
 * Messages scroll. Input + contact link sit at the bottom. Badge anchors
 * to the bottom-right outside the chat panel for Standard tenants.
 */

.clara-chat {
  /* Defaults — tenant brand_color overrides --clara-brand at the JS level. */
  --clara-bg:          #f4f5f8;
  --clara-bg-alt:      #e7eaef;
  --clara-text:        #1f2328;
  --clara-text-muted:  #6e7681;
  --clara-primary:     #6636f0;
  --clara-primary-fg:  #ffffff;
  --clara-bot-bg:      #ffffff;
  --clara-user-fg:     #ffffff;
  --clara-border:      #e1e4e8;
  --clara-radius:      14px;
  --clara-height:      560px;
  /* Resolved brand: tenant override OR default primary. Used for buttons,
     focus rings, send button, and user-bubble background. */
  --clara-accent:      var(--clara-brand, var(--clara-primary));

  position: relative;          /* anchors the .__badge element */
  display: flex;
  flex-direction: column;
  height: var(--clara-height);
  max-height: 80vh;
  background: var(--clara-bg);
  color: var(--clara-text);
  border-radius: var(--clara-radius);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.clara-chat__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  scroll-behavior: smooth;
}

.clara-chat__messages::-webkit-scrollbar { width: 8px; }
.clara-chat__messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.clara-chat__bubble {
  display: block;
  max-width: 80%;
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.clara-chat__bubble--bot {
  background: var(--clara-bot-bg);
  color: var(--clara-text);
  border-bottom-left-radius: 4px;
  margin-right: auto;
}

.clara-chat__bubble--user {
  /* Tenant brand_color + auto-computed text color via --clara-brand-fg. */
  background: var(--clara-accent);
  color: var(--clara-brand-fg, #ffffff);
  border-bottom-right-radius: 4px;
  margin-left: auto;
}

.clara-chat__bubble--system {
  background: transparent;
  color: var(--clara-text-muted);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  margin: 4px auto;
  padding: 4px 8px;
}

.clara-chat__bubble--error {
  background: #fee2e2;
  color: #991b1b;
}

.clara-chat__bubble--bot .clara-chat__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--clara-text-muted);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: clara-blink 1s steps(2, start) infinite;
}

/* Static teaser bubble shown when the panel mounts already open and
   no real bot turn has streamed yet. Inherits the bot bubble shape;
   the soft fade-in differentiates it from a streamed reply and signals
   "tap me" without needing extra chrome. Removed from the DOM on the
   first gesture inside the widget (see chatbot.widget.txt →
   onFirstInteraction → this.removeTeaser). */
.clara-chat__bubble--teaser {
  animation: clara-teaser-in 280ms ease-out;
}
@keyframes clara-teaser-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes clara-blink {
  to { visibility: hidden; }
}

/* Bottom dock: input + send button */

.clara-chat__dock {
  border-top: 1px solid var(--clara-border);
  padding: 10px 12px;
  background: var(--clara-bg);
}

.clara-chat__input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.clara-chat__textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--clara-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--clara-text);
  background: var(--clara-bg);
  max-height: 120px;
  min-height: 40px;
}

.clara-chat__textarea:focus {
  outline: none;
  border-color: var(--clara-accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.clara-chat__send {
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  /* Tenant brand_color + auto-computed text color (white or dark per
     luminance, set on the root via --clara-brand-fg). */
  background: var(--clara-accent);
  color: var(--clara-brand-fg, #ffffff);
  padding: 0 16px;
  height: 40px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.clara-chat__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.clara-chat__send:hover:not(:disabled) {
  filter: brightness(1.06);
}

.clara-chat__hint {
  text-align: center;
  color: var(--clara-text-muted);
  font-size: 12px;
  margin-top: 6px;
}

.clara-chat__hint--error {
  color: #c53030;
}

/* Status / error banner overlay (currently unused but reserved) */

.clara-chat__banner {
  background: #fef3c7;
  color: #92400e;
  padding: 8px 14px;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid #fcd34d;
}

.clara-chat__banner--error {
  background: #fee2e2;
  color: #991b1b;
  border-bottom-color: #fca5a5;
}

/* Powered-by ClaraConverts badge — Standard tenants always see this; Pro
   tenants with hide_badge=true don't get it rendered at all (DOM-level
   removal in widget.js, not just display:none). Anchored bottom-right
   inside the panel so it doesn't shift with message scroll. */

.clara-chat__badge {
  /* Bottom credit slot — last child of the chat panel, sits BELOW
     the dock as a natural continuation, NOT a separated footer.
     13px, text-muted, full opacity so the badge reads as a peer of
     the dock rather than a faded sub-element. */
  display: block;
  align-self: stretch;
  margin: 0;
  padding: 0 12px 8px;
  font-size: 13px;
  color: var(--clara-text-muted);
  text-decoration: none;
  letter-spacing: 0;
  opacity: 1;
  pointer-events: auto;
  background: var(--clara-bg);
  flex-shrink: 0;
  text-align: center;
}

.clara-chat__badge:hover {
  opacity: 1;
  color: var(--clara-text);
}

/* Logo variant of the badge — agency picks "Show logo" instead of
   "Powered by {brand}" text. Lays out an img instead of a text node.
   No background pill: lets the logo's native alpha channel show
   through (matches the chatbot-avatar treatment so the two surfaces
   feel consistent). Sized prominently — agencies pay for this slot
   on every client site, it's a brand mark not a faded credit. */
.clara-chat__badge--logo {
  background: var(--clara-bg);
  padding: 0 12px 8px;
  line-height: 0;
  opacity: 1;                  /* override the parent .__badge 0.85 */
}
.clara-chat__badge-logo {
  /* inline-block so parent's text-align:center keeps the logo centered */
  display: inline-block;
  height: 28px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  vertical-align: middle;
}

/* White-label chat header — only rendered for agency-tier tenants. Sits
   above .__messages and carries the agency's logo (img) + name (span).
   Either field is optional; widget hides the whole element if both are
   empty. Logo height is capped so a tall logo URL can't push the chat
   area off-screen. */

.clara-chat__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--clara-border);
  background: var(--clara-bg);
  flex: 0 0 auto;
}

.clara-chat__header-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

.clara-chat__header-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--clara-text);
  letter-spacing: 0.01em;
}

/* Mute toggle — top-right of the chat panel, above messages. Pro-only;
   widget reveals it via [hidden]=false in applyTenantConfig. Two SVG
   icons stacked; the active one is shown via .clara-chat__mute--muted
   on the button. */

.clara-chat__mute {
  position: absolute;
  top: 10px;
  /* Sits to the LEFT of the close button (close is at right:10px, 32px
     wide). 50px right = 10px close-edge + 32px close-width + 8px gap. */
  right: 50px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Auto-contrast: --clara-chrome-tint is set by widget JS based on
     header brightness. Dark header → translucent white; light header →
     translucent black. --clara-brand-fg supplies the icon color. */
  background: var(--clara-chrome-tint, rgba(0, 0, 0, 0.32));
  color: var(--clara-brand-fg, #ffffff);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.clara-chat__mute:hover {
  background: var(--clara-chrome-tint-hover, rgba(0, 0, 0, 0.5));
  color: var(--clara-brand-fg, #ffffff);
}
.clara-chat__mute:focus-visible {
  outline: 2px solid var(--clara-accent);
  outline-offset: 2px;
}
.clara-chat__mute[hidden] { display: none; }
.clara-chat__mute-icon { display: block; }
.clara-chat__mute-icon--off { display: none; }
.clara-chat__mute--muted .clara-chat__mute-icon--on  { display: none; }
.clara-chat__mute--muted .clara-chat__mute-icon--off { display: block; }
.clara-chat__mute--muted { color: #b91c1c; }   /* red-700, signals "off" */

@media (max-width: 600px) {
  .clara-chat {
    height: 80vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .clara-chat__bubble { max-width: 88%; }
}

/* ── Floating mode ───────────────────────────────────────────────────
 * Activated by adding .clara-chat--floating to the root container. The
 * widget pins itself to the bottom-right of the viewport. Collapsed it
 * shows only a circular launcher button; clicking the launcher adds
 * .clara-chat--open which reveals the full panel.
 *
 * Inline mode (default for ClaraChatbot.mount(element, …) calls) hides
 * the launcher + close buttons so they don't pollute the embedded layout.
 */

/* Launcher is hidden by default — only shown in floating-collapsed mode.
   Close is ALWAYS rendered in the header (no display:none default), so it
   appears in every mount mode (inline preview + floating). The click
   handler short-circuits in inline mode where there's nothing to close. */
.clara-chat__launcher {
  display: none;
}

/* The launcher: 56×56 brand-colored circle with a chat icon.
   Icon color uses --clara-brand-fg so light brand colors (default grey)
   get a dark icon, vivid brand colors get a white icon. */
.clara-chat--floating:not(.clara-chat--open) .clara-chat__launcher {
  display: flex;
}
.clara-chat__launcher {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clara-accent);
  color: var(--clara-brand-fg, #ffffff);
  border: none;
  cursor: pointer;
  /* Three-layer shadow: a thin white edge catches dark host backgrounds
     (where black shadow would be invisible), then layered dark shadows
     for "lifted off the page" depth on light backgrounds. Works on
     both — tellerio.com's dark space theme needs the white edge,
     bright SMB sites get the dark drop shadow. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.4);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.clara-chat__launcher:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 6px 14px rgba(0, 0, 0, 0.4),
    0 16px 36px rgba(0, 0, 0, 0.45);
}
.clara-chat__launcher:focus-visible {
  outline: 3px solid rgba(102, 54, 240, 0.45);
  outline-offset: 2px;
}

/* The close (X) button — absolutely positioned at the chat root's
   top-right corner, OUTSIDE the header. This survives the agency
   white-label flow where renderAgencyHeader() deletes and replaces the
   default header; the close button stays put because it's not a child
   of the header DOM. Hidden only in floating-collapsed mode where the
   chat panel itself is collapsed to a launcher bubble. */
.clara-chat__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  width: 32px;
  height: 32px;
  border: none;
  /* Auto-contrast tint (see __mute for derivation). Works against ANY
     header brightness — light grey agency headers get a translucent
     dark pill; dark/saturated brand headers get a translucent light
     pill. Icon color follows --clara-brand-fg. */
  background: var(--clara-chrome-tint, rgba(0, 0, 0, 0.32));
  color: var(--clara-brand-fg, #ffffff);
  opacity: 1;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 120ms ease, transform 120ms ease;
}
.clara-chat__close:hover {
  background: var(--clara-chrome-tint-hover, rgba(0, 0, 0, 0.5));
  transform: scale(1.06);
}
/* Hide in floating-collapsed (the launcher bubble is the only visible
   element then; close would float in the void at top-right of an
   invisible panel). */
.clara-chat--floating:not(.clara-chat--open) .clara-chat__close {
  display: none;
}

/* ── Header bar ───────────────────────────────────────────────────────
 * Sits at the top of every chat panel (inline + floating). Brand-colored
 * background, avatar disc, name, and a pulsing status indicator. The mute
 * button (when shown) and the close button (when floating + open) live
 * inside this header as flex items. */
.clara-chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  /* Tenant brand_color drives the header. The widget JS computes an
     accessible text color (--clara-brand-fg) based on the brand_color's
     luminance — light brand colors get dark text, dark brand colors get
     white text. Default brand is grey (#cbd5e1) → dark text. */
  background: var(--clara-accent);
  color: var(--clara-brand-fg, #ffffff);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.clara-chat__header-text {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
  color: inherit;
}
/* Per-site chatbot avatar — optional. Inserted by widget JS as the first
   child of .__header when chatbot_avatar_url is set; absent otherwise.
   Default = circular 32px disc (square-ish images, traditional avatar).
   When the loaded image's aspect ratio is wide or tall, the widget adds
   --wide / --tall modifiers and we switch to a rectangular shape so a
   wordmark or banner-shaped logo isn't center-cropped to an illegible
   disc. */
.clara-chat__header-avatar {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.18);
}
.clara-chat__header-avatar--wide {
  width: auto;
  max-width: 100px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  background: transparent;
}
.clara-chat__header-avatar--tall {
  width: 24px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
  background: transparent;
}
.clara-chat__header-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Override the legacy .__header-name rule earlier in the file that
     hardcodes color: var(--clara-text). Inherit from .__header which has
     the auto-computed --clara-brand-fg. */
  color: inherit;
}
.clara-chat__header-tagline {
  font-size: 12px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: inherit;
}
.clara-chat__header-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
  animation: clara-chat-status-pulse 2s infinite;
}
@keyframes clara-chat-status-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(74, 222, 128, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}

/* Bot bubble polish — refined corner radius + subtle shadow, no avatar.
   Stays a normal block element so a voice change (Clara persona swapping
   to a male voice, etc.) doesn't leave a misleading "C" hanging there. */
.clara-chat__bubble--bot {
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 11px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── Typing indicator (three pulsing dots) ─────────────────────────── */
.clara-chat__typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 2px;
}
.clara-chat__typing > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clara-text-muted);
  display: block;
  animation: clara-chat-typing-pulse 1.3s infinite ease-in-out both;
}
.clara-chat__typing > span:nth-child(2) { animation-delay: 0.18s; }
.clara-chat__typing > span:nth-child(3) { animation-delay: 0.36s; }
@keyframes clara-chat-typing-pulse {
  0%, 80%, 100% { opacity: 0.28; transform: scale(0.78); }
  40%           { opacity: 1;    transform: scale(1.0);  }
}

/* ── Polished bubble + gradient background ─────────────────────────── */
.clara-chat__messages {
  background: linear-gradient(180deg, var(--clara-bg) 0%, var(--clara-bg-alt) 100%);
}
.clara-chat__bubble--user {
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  padding: 11px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Floating: pin to viewport. Default is bottom-right; the .--pos-{xy}
   modifier class (set by the widget JS from tenant.widget_position)
   overrides top/right/bottom/left + transform below. High z-index so it
   sits above almost anything the host site renders (cookie banners, etc.).

   Initial state is invisible (visibility:hidden) so the widget doesn't
   flash in the default bottom-right corner before the JS applies the
   tenant's configured position. JS removes the hidden state after
   applyTenantConfig — adds .clara-chat--ready. */
.clara-chat--floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2147483646;
  max-width: none;
  max-height: none;
  visibility: hidden;
}
.clara-chat--floating.clara-chat--ready {
  visibility: visible;
}

/* ── 9-position grid ───────────────────────────────────────────────────
 * Customer-pickable via Studio. Default (no class) = bottom_right. For
 * each non-default position we reset all four sides to `auto` and set
 * only the two anchors we want — otherwise the default bottom+right keep
 * leaking through. Centered positions use translate to align relative to
 * their own size, which keeps centering correct as the panel grows from
 * launcher (56px) to open (380px). */

/* TOP ROW */
.clara-chat--floating.clara-chat--pos-top_left {
  top: 20px; left: 20px; bottom: auto; right: auto;
}
.clara-chat--floating.clara-chat--pos-top_center {
  top: 20px; left: 50%; bottom: auto; right: auto;
  transform: translateX(-50%);
}
.clara-chat--floating.clara-chat--pos-top_right {
  top: 20px; right: 20px; bottom: auto; left: auto;
}

/* MIDDLE ROW */
.clara-chat--floating.clara-chat--pos-middle_left {
  top: 50%; left: 20px; bottom: auto; right: auto;
  transform: translateY(-50%);
}
.clara-chat--floating.clara-chat--pos-middle_center {
  top: 50%; left: 50%; bottom: auto; right: auto;
  transform: translate(-50%, -50%);
}
.clara-chat--floating.clara-chat--pos-middle_right {
  top: 50%; right: 20px; bottom: auto; left: auto;
  transform: translateY(-50%);
}

/* BOTTOM ROW */
.clara-chat--floating.clara-chat--pos-bottom_left {
  bottom: 20px; left: 20px; top: auto; right: auto;
}
.clara-chat--floating.clara-chat--pos-bottom_center {
  bottom: 20px; left: 50%; top: auto; right: auto;
  transform: translateX(-50%);
}
.clara-chat--floating.clara-chat--pos-bottom_right {
  /* Same as default; explicit class for completeness. */
  bottom: 20px; right: 20px; top: auto; left: auto;
}

/* The slide-up animation translates 12px on Y; for positions that also
   use translate for centering, that would override the centering during
   animation. Disable the animation for any position using translate. */
.clara-chat--floating.clara-chat--pos-top_center.clara-chat--open,
.clara-chat--floating.clara-chat--pos-bottom_center.clara-chat--open,
.clara-chat--floating.clara-chat--pos-middle_left.clara-chat--open,
.clara-chat--floating.clara-chat--pos-middle_center.clara-chat--open,
.clara-chat--floating.clara-chat--pos-middle_right.clara-chat--open {
  animation: none;
}

/* Floating + collapsed: shrink to the launcher's size, drop the panel
   chrome (background / border / shadow) so the launcher reads as a
   standalone button instead of a panel-with-button. */
.clara-chat--floating:not(.clara-chat--open) {
  width: 56px;
  height: 56px;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.clara-chat--floating:not(.clara-chat--open) > :not(.clara-chat__launcher) {
  display: none;
}

/* Floating + open: full panel, launcher hidden, slide-up animation. */
.clara-chat--floating.clara-chat--open {
  width: 380px;
  max-width: calc(100vw - 40px);
  height: var(--clara-height);
  max-height: calc(100vh - 40px);
  /* Two-layer dark drop-shadow for "lifted off the page" depth.
     Earlier iterations layered a 1px white inset on top to help the
     panel read on dark host pages, but it stayed visible as an outline
     on light/grey backdrops — visual cost > readability gain, so
     dropped entirely. */
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 24px 60px rgba(0, 0, 0, 0.5);
  animation: clara-chat-slide-up 200ms ease-out;
}
.clara-chat--floating.clara-chat--open .clara-chat__launcher {
  display: none;
}

@keyframes clara-chat-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: launcher stays in the corner; open panel goes near-full-width. */
@media (max-width: 480px) {
  .clara-chat--floating {
    bottom: 12px;
    right: 12px;
  }
  .clara-chat--floating.clara-chat--open {
    left: 12px;
    width: auto;
    height: 78vh;
    max-height: 78vh;
  }
}