/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   DO NOT REPLACE THIS FILE with CRA build output from clarm-web-chat.

   This is a HAND-CRAFTED design system CSS, NOT a build artifact.
   It uses --widget-* CSS custom properties (set by LiveWidget.tsx).
   The CRA app (clarm-web-chat) uses --clarm-* variables instead.
   Replacing this file WILL BREAK ALL live demo widgets at clarm.com/demo.

   To produce the minified version: node scripts/build-widget.mjs
   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* ============================================================================
   CLARM CHAT WIDGET — Design System
   ============================================================================
   Uses CSS custom properties for full theming support.
   Set --widget-* variables on .chatbot-widget or :root to customise.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   CSS Custom Properties (defaults)
   --------------------------------------------------------------------------- */
/* Defaults on :root only — allows inline style overrides to propagate */
:root {
  --widget-primary: #2563eb;
  --widget-primary-hover: #1d4ed8;
  --widget-primary-gradient: linear-gradient(135deg, var(--widget-primary), var(--widget-primary-hover));
  --widget-primary-soft: rgba(37, 99, 235, 0.10);
  --widget-primary-soft-border: rgba(37, 99, 235, 0.25);

  --widget-bg: #ffffff;
  --widget-bg-subtle: #f8fafc;
  --widget-bg-messages: #f1f5f9;
  --widget-text: #1e293b;
  --widget-text-secondary: #475569;
  --widget-text-muted: #94a3b8;
  --widget-border: #e2e8f0;

  --widget-radius: 16px;
  --widget-radius-message: 14px;
  --widget-radius-pill: 9999px;
  --widget-radius-sm: 8px;

  --widget-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  --widget-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --widget-shadow-toggle: 0 4px 20px rgba(37, 99, 235, 0.35);

  --widget-border-width: 1px;
  --widget-border-color: var(--widget-border);
  --widget-chat-width: 380px;
  --widget-toggle-size: 56px;

  --widget-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --widget-transition: 0.2s ease;
}

/* ---------------------------------------------------------------------------
   Spinning border animation (snake chase effect)
   --------------------------------------------------------------------------- */
@property --clarm-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes clarm-border-spin {
  to { --clarm-border-angle: 360deg; }
}

/* ---------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------- */
.App {
  text-align: left;
  font-family: var(--widget-font);
}

.chatbot-widget {
  position: relative;
  z-index: 999;
  font-family: var(--widget-font);
}

/* ---------------------------------------------------------------------------
   Toggle Button
   --------------------------------------------------------------------------- */
.toggle-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: var(--widget-toggle-size);
  height: var(--widget-toggle-size);
  border-radius: 50%;
  background: var(--widget-primary-gradient);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--widget-shadow-toggle);
  z-index: 1000;
  transition: transform var(--widget-transition), box-shadow var(--widget-transition);
}

.toggle-button:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37, 99, 235, 0.45);
}

.toggle-button.has-notification {
  background: var(--widget-primary-gradient);
  box-shadow: 0 4px 24px rgba(var(--widget-primary-rgb, 37, 99, 235), 0.5);
}

.notification-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ef4444;
  border: 2px solid white;
}

/* ---------------------------------------------------------------------------
   Chat Window
   --------------------------------------------------------------------------- */
.chat-window {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: var(--widget-chat-width);
  height: min(520px, calc(100vh - 140px));
  background-color: var(--widget-bg);
  border: var(--widget-border-width) solid var(--widget-border-color);
  border-radius: var(--widget-radius);
  box-shadow: var(--widget-shadow);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: widgetSlideUp 0.2s ease-out forwards;
}

/* Spinning border — snake chase effect around the widget perimeter */
.chat-window::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--clarm-border-angle),
    transparent 0%,
    transparent 55%,
    var(--widget-primary, #2563EB) 75%,
    color-mix(in srgb, var(--widget-primary, #2563EB) 60%, white) 85%,
    var(--widget-primary, #2563EB) 95%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: clarm-border-spin 8s linear infinite;
  pointer-events: none;
  z-index: 1001;
  opacity: 0.7;
}

/* Glass effect — frosted translucent background */
.chat-window.clarm-glass {
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.chat-window.clarm-glass .chat-messages {
  background-color: rgba(241, 245, 249, 0.65);
}
.chat-window.clarm-glass .input-container {
  background-color: rgba(255, 255, 255, 0.72);
}
.chat-window.clarm-glass .brand-badge {
  background-color: rgba(255, 255, 255, 0.72);
}
.chat-window.clarm-glass .bot-message {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------------------------
   Chat Header — gradient banner matching DemoWidget ChatPanel
   --------------------------------------------------------------------------- */
.chat-header {
  padding: 14px 16px;
  background: var(--widget-primary-gradient);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.header-text {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  gap: 0 10px;
  align-items: center;
}

.header-text::before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--widget-radius-sm);
  grid-row: 1 / 3;
  grid-column: 1;
}

.header-text.has-logo {
  grid-template-columns: auto 1fr;
}

.header-text.no-logo::before {
  display: none;
}
.header-text.no-logo {
  grid-template-columns: 1fr;
}

.header-text.has-logo::before {
  display: none;
}

.header-text .header-logo {
  height: 32px;
  width: auto;
  max-width: 80px;
  border-radius: var(--widget-radius-sm);
  object-fit: contain;
  grid-row: 1 / 3;
  grid-column: 1;
  /* Smooth reveal — JS sets opacity:0 initially, fades in on load */
  transition: opacity 0.25s ease;
}

.header-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--widget-font);
  line-height: 1.3;
}

.header-subtitle {
  grid-column: 2;
  grid-row: 2;
  font-size: 12.5px;
  opacity: 0.8;
  font-family: var(--widget-font);
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin-top: 1px;
}

.close-button {
  background-color: rgba(255, 255, 255, 0.12);
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--widget-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--widget-transition);
}

.close-button:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

/* Header actions wrapper (expand + close side by side) */
.clarm-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Expand/collapse toggle button */
.clarm-expand-btn {
  background-color: rgba(255, 255, 255, 0.12);
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--widget-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background-color var(--widget-transition);
}
.clarm-expand-btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

/* Expanded chat window — smooth transition */
.chat-window {
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-window.clarm-expanded {
  width: min(460px, calc(100vw - 48px));
  height: min(744px, calc(100vh - 100px)); /* golden ratio: 460 × 1.618 */
}

/* ---------------------------------------------------------------------------
   Messages Container
   --------------------------------------------------------------------------- */
.chat-messages {
  flex: 1 1 auto;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--widget-bg-messages);
  min-height: 0;
  scroll-behavior: auto;
  overflow-anchor: none;
}


/* Custom scrollbar for messages */
.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: var(--widget-border);
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Message Bubbles
   --------------------------------------------------------------------------- */
.message {
  max-width: 85%;
  font-size: 14px;
  font-family: var(--widget-font);
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: var(--widget-radius-message);
  word-wrap: break-word;
  animation: messageSlideIn 0.3s ease-out;
}

.bot-message {
  align-self: flex-start;
  background-color: var(--widget-bg);
  border: 1px solid var(--widget-border);
  color: var(--widget-text-secondary);
  border-bottom-left-radius: 4px;
  box-shadow: var(--widget-shadow-sm);
}

/* Bot message rich-text: lists, bold, italic */
.bot-message ul,
.bot-message ol {
  margin: 6px 0;
  padding-left: 20px;
}

.bot-message li {
  margin-bottom: 2px;
  font-size: 14px;
  line-height: 1.5;
  font-family: var(--widget-font);
}

.bot-message strong {
  font-weight: 600;
  color: var(--widget-text);
}

/* Code blocks inside bot messages */
.bot-message pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.5;
  position: relative;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

.bot-message pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  white-space: pre;
}

.bot-message :not(pre) > code {
  background: var(--widget-primary-soft);
  color: var(--widget-primary);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

/* Copy button for code blocks */
.clarm-code-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  padding: 0;
  color: #cdd6f4;
}

.clarm-code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.clarm-code-copy-btn.copied {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.4);
}

/* Custom scrollbar for code blocks */
.bot-message pre::-webkit-scrollbar {
  height: 4px;
}

.bot-message pre::-webkit-scrollbar-track {
  background: transparent;
}

.bot-message pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.user-message {
  align-self: flex-end;
  background: var(--widget-primary-gradient);
  color: white;
  border-bottom-right-radius: 4px;
}

/* Subtle CTA highlight — "Would you like to book a demo" on its own line */
.clarm-cta-highlight {
  display: block;
  margin-top: 8px;
  padding: 0;
  font-weight: 500;
  color: var(--widget-text);
}

/* ---------------------------------------------------------------------------
   Thinking / Typing Indicator
   --------------------------------------------------------------------------- */
.thinking-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thinking-dots {
  display: flex;
  gap: 5px;
}

.thinking-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--widget-primary);
  opacity: 0.6;
  animation: typingBounce 1.4s ease-in-out infinite;
}

.thinking-dot:nth-child(1) { animation-delay: 0s; }
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }

.thinking-text {
  font-size: 13px;
  color: var(--widget-text-secondary);
  font-style: italic;
  font-family: var(--widget-font);
}

/* ---------------------------------------------------------------------------
   Input Container — no top padding; brand badge handles spacing above
   --------------------------------------------------------------------------- */
.input-container {
  padding: 8px 12px 12px;
  background-color: var(--widget-bg);
  flex-shrink: 0;
}

/* Brand badge — symmetric padding above and below text */
.brand-badge {
  padding: 8px 16px;
  text-align: center;
  font-size: 11px;
  line-height: 1;
  color: var(--widget-text-muted);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  background-color: var(--widget-bg);
  border-top: 1px solid var(--widget-border);
}

.brand-badge a {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity var(--widget-transition);
  line-height: 1;
}

.brand-badge a:hover {
  text-decoration: underline;
  opacity: 1;
}

.brand-prefix {
  opacity: 0.8;
}

/* Protection against CSS hiding of Clarm branding */
.brand-badge[data-brand-protected="true"] a {
  display: inline !important;
  visibility: visible !important;
  opacity: 0.7 !important;
}

.brand-badge[data-brand-protected="true"] a:hover {
  opacity: 1 !important;
}

.input-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1.5px solid var(--widget-border);
  border-radius: var(--widget-radius-message);
  background-color: var(--widget-bg);
  padding-bottom: 8px;
  padding-right: 8px;
  transition: border-color var(--widget-transition), box-shadow var(--widget-transition);
}

/* Force buttons to always sit bottom-right inside the input box.
   Uses absolute positioning so there's never a frame where they
   render in the wrong spot (flex-wrap reflow). */
.input-form {
  position: relative;
  padding-bottom: 40px; /* reserve space for the button row */
}
.input-form > .send-button,
.input-form > .clarm-dictation-btn {
  position: absolute;
  bottom: 6px;
}
.input-form > .send-button {
  right: 8px;
  /* Hide until dictation button is injected so both appear together */
  opacity: 0;
  transition: opacity 0.15s ease;
}
.input-form > .clarm-dictation-btn {
  right: 48px;
}
/* Once dictation btn exists as sibling, reveal both */
.input-form > .clarm-dictation-btn ~ .send-button {
  opacity: 1;
}

.input-form:focus-within {
  border-color: var(--widget-primary);
  box-shadow: 0 0 0 3px var(--widget-primary-soft);
}

.message-input {
  flex: 1 0 100%;
  padding: 12px 24px 6px 14px;
  border: none;
  font-size: 14px;
  font-family: var(--widget-font);
  outline: none;
  background: transparent;
  color: var(--widget-text);
  resize: none;
  border-radius: var(--widget-radius-message) var(--widget-radius-message) 0 0;
  box-sizing: border-box;
}

/* Hidden original input when textarea overlay is active */
input.message-input[data-ta-overlay] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  flex: 0 !important;
}

/* Textarea overlay — auto-expanding input */
textarea.message-input.clarm-ta-overlay {
  line-height: 1.45;
  min-height: 38px;
  max-height: 120px;
  overflow-y: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.message-input::placeholder {
  color: var(--widget-text-muted);
}

.message-input:focus {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}

.message-input:disabled {
  background-color: transparent;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Thin scrollbar for auto-expanding textarea */
textarea.clarm-ta-overlay {
  scrollbar-width: thin;
  scrollbar-color: var(--widget-border) transparent;
}
textarea.clarm-ta-overlay::-webkit-scrollbar {
  width: 4px;
}
textarea.clarm-ta-overlay::-webkit-scrollbar-track {
  background: transparent;
}
textarea.clarm-ta-overlay::-webkit-scrollbar-thumb {
  background-color: var(--widget-border);
  border-radius: 4px;
}


/* ---------------------------------------------------------------------------
   Sample Questions Toggle & React Quick Replies — HIDDEN
   The vanilla JS overlay (.clarm-inline-replies) provides smart,
   stage-aware quick replies (2-3 at a time). The React widget's native
   quick-reply container renders ALL items and must be hidden.
   --------------------------------------------------------------------------- */
.samples-toggle {
  display: none !important;
}

.quick-replies {
  display: none !important;
}

/* React handoff form — HIDDEN
   The React component auto-triggers a handoff form when user messages
   contain keywords like "agent", "person", "support team" etc.
   Quick reply texts often contain these words unintentionally, causing
   an unstyled form to appear out of nowhere. The overlay provides its
   own booking form (injectBookingForm) for lead capture instead.        */
.handoff-form {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Send Button
   --------------------------------------------------------------------------- */
.send-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--widget-primary-gradient);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--widget-transition), box-shadow var(--widget-transition);
}

.send-button:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px var(--widget-primary-soft-border);
}

.send-button:disabled {
  background: var(--widget-text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Dictation (Speech-to-Text) Button
   --------------------------------------------------------------------------- */
@keyframes clarm-dictation-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.clarm-dictation-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--widget-border, #e2e8f0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--widget-transition, 0.2s ease);
  flex-shrink: 0;
  padding: 0;
  color: var(--widget-text-muted, #94a3b8);
}

.clarm-dictation-btn:hover {
  border-color: var(--widget-primary, #2563eb);
  color: var(--widget-primary, #2563eb);
  background: var(--widget-primary-soft, rgba(37, 99, 235, 0.10));
}

.clarm-dictation-btn.clarm-dictation-active {
  background: var(--widget-primary, #2563eb);
  border-color: var(--widget-primary, #2563eb);
  color: #fff;
  box-shadow: 0 0 0 4px var(--widget-primary-soft, rgba(37, 99, 235, 0.10));
  animation: clarm-dictation-pulse 1.5s ease-in-out infinite;
}

.clarm-dictation-btn.clarm-dictation-processing {
  border-color: var(--widget-primary, #2563eb);
  color: var(--widget-primary, #2563eb);
  opacity: 0.7;
  pointer-events: none;
  animation: clarm-dictation-pulse 0.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .clarm-dictation-btn.clarm-dictation-active,
  .clarm-dictation-btn.clarm-dictation-processing {
    animation: none;
  }
}

@media (max-width: 480px) {
  .clarm-dictation-btn {
    width: 44px;
    height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Sample Questions Overlay
   --------------------------------------------------------------------------- */
.samples-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  animation: fadeIn 0.2s ease-out;
}

.samples-container {
  background-color: var(--widget-bg);
  border-radius: 12px;
  padding: 20px;
  margin: 16px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  min-width: 280px;
}

.samples-header {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  color: var(--widget-text);
  font-family: var(--widget-font);
}

.samples-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sample-button {
  padding: 10px 14px;
  background-color: var(--widget-primary-soft);
  border: 1px solid var(--widget-primary-soft-border);
  border-radius: var(--widget-radius-pill);
  color: var(--widget-primary);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--widget-font);
  text-align: left;
  cursor: pointer;
  transition: all var(--widget-transition);
  line-height: 1.4;
}

.sample-button:hover {
  background-color: var(--widget-primary-soft-border);
  border-color: var(--widget-primary);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   Inline Quick Reply Buttons (injected into chat messages area)
   --------------------------------------------------------------------------- */
.clarm-inline-replies {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
  margin-top: 4px;
}

.clarm-inline-reply-btn {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--widget-font);
  color: var(--widget-primary);
  background: var(--widget-primary-soft);
  border: 1px solid var(--widget-primary-soft-border);
  border-radius: var(--widget-radius-pill);
  cursor: pointer;
  transition: all var(--widget-transition);
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clarm-inline-reply-btn:hover {
  background: var(--widget-primary-soft-border);
  border-color: var(--widget-primary);
  transform: translateY(-1px);
}

/* Smooth hide transition for quick replies (prevents window jump on click) */
.clarm-inline-replies.hiding {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease, padding 0.25s ease;
}

/* Booking CTA button — stands out as a direct action */
.clarm-booking-btn {
  background: var(--widget-primary) !important;
  color: #fff !important;
  border-color: var(--widget-primary) !important;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.clarm-booking-btn:hover {
  background: var(--widget-primary-hover) !important;
  border-color: var(--widget-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Also hide the old samples overlay when quick replies are inline */
.samples-overlay {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Inline Booking Form — compact card inside the chat area
   --------------------------------------------------------------------------- */
.clarm-booking-form {
  margin: 8px 12px;
  padding: 16px;
  background: var(--widget-bg);
  border: 1px solid var(--widget-primary-soft-border);
  border-radius: var(--widget-radius);
  animation: widgetSlideUp 0.25s ease-out;
}

.clarm-booking-title {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--widget-font);
  color: var(--widget-text);
  margin-bottom: 12px;
}

.clarm-booking-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clarm-booking-field input,
.clarm-booking-field select {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--widget-font);
  border: 1px solid var(--widget-border);
  border-radius: 8px;
  background: var(--widget-bg);
  color: var(--widget-text);
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.clarm-booking-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.clarm-booking-field input:focus,
.clarm-booking-field select:focus {
  border-color: var(--widget-primary);
  box-shadow: 0 0 0 2px var(--widget-primary-soft);
}

.clarm-booking-field input::placeholder {
  color: var(--widget-text-muted);
}

.clarm-booking-submit {
  margin-top: 12px;
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--widget-font);
  color: #fff;
  background: var(--widget-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.clarm-booking-submit:hover:not(:disabled) {
  background: var(--widget-primary-hover);
  transform: translateY(-1px);
}

.clarm-booking-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.clarm-booking-success {
  text-align: center;
  padding: 16px 8px;
  font-size: 13px;
  font-family: var(--widget-font);
  color: var(--widget-text);
  line-height: 1.5;
}

.clarm-booking-success strong {
  color: var(--widget-primary);
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Citation Links — descriptive anchor text replacing bare [N] markers
   --------------------------------------------------------------------------- */
.clarm-citation-link {
  color: var(--widget-primary);
  text-decoration: underline;
  text-decoration-color: var(--widget-primary-soft-border);
  text-underline-offset: 2px;
  font-size: 0.92em;
  font-weight: 500;
  transition: text-decoration-color var(--widget-transition), color var(--widget-transition);
  cursor: pointer;
}

.clarm-citation-link:hover {
  text-decoration-color: var(--widget-primary);
  color: var(--widget-primary-hover);
}

/* Citation bracket style — compact superscript [N] with tooltip.
   Brackets are rendered via ::before / ::after so they can animate
   independently (sliding in from opposite sides). Text content is
   just the number — no literal [ ] in the DOM text. */
.clarm-citation-bracket {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--widget-primary);
  text-decoration: none;
  vertical-align: super;
  cursor: pointer;
  padding: 0 1px;
  border-radius: 3px;
  transition: background 0.2s ease;
}
.clarm-citation-bracket::before { content: '['; }
.clarm-citation-bracket::after  { content: ']'; }

.clarm-citation-bracket:hover {
  background: color-mix(in srgb, var(--widget-primary) 12%, transparent);
}

/* Citation reveal: brackets slide in from opposite sides,
   number shrinks into its superscript size as they close in. */
.clarm-citation-bracket.clarm-cit-reveal {
  animation: clarmCitShrink 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.clarm-citation-bracket.clarm-cit-reveal::before {
  display: inline-block;
  animation: clarmBracketLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.clarm-citation-bracket.clarm-cit-reveal::after {
  display: inline-block;
  animation: clarmBracketRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes clarmCitShrink {
  0%   { transform: scale(1.45); opacity: 0.3; }
  50%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes clarmBracketLeft {
  0%   { opacity: 0; transform: translateX(-7px); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes clarmBracketRight {
  0%   { opacity: 0; transform: translateX(7px); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

/* ---------------------------------------------------------------------------
   General bot-message links — ensure ALL clickable anchors look clickable
   --------------------------------------------------------------------------- */
.bot-message a[href]:not(.clarm-cta-link):not(.clarm-suggestion-btn):not(.clarm-citation-link) {
  color: var(--widget-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--widget-primary) 40%, transparent);
  text-underline-offset: 2px;
  cursor: pointer;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.bot-message a[href]:not(.clarm-cta-link):not(.clarm-suggestion-btn):not(.clarm-citation-link):hover {
  text-decoration-color: var(--widget-primary);
  color: var(--widget-primary-hover);
}

/* CTA inline link — e.g. "Book a demo" appearing within bot answers */
.clarm-cta-link {
  display: inline-block;
  background: var(--widget-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.82em;
  text-decoration: none;
  padding: 4px 12px;
  border-radius: var(--widget-radius-pill);
  transition: background 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  vertical-align: baseline;
}

.clarm-cta-link:hover {
  background: var(--widget-primary-hover);
  color: #fff;
  transform: translateY(-1px);
}

/* Standalone CTA — guaranteed conversion nudge after 2+ exchanges */
.clarm-standalone-cta {
  text-align: center;
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 0.9em;
  color: var(--widget-text-secondary, #666);
  border-top: 1px solid var(--widget-border-color, #eee);
}

.clarm-standalone-cta .clarm-cta-link {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Animations
   --------------------------------------------------------------------------- */
@keyframes widgetSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bounce-animation {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ---------------------------------------------------------------------------
   Streaming Cursor
   --------------------------------------------------------------------------- */
.streaming-cursor {
  display: inline-block;
  color: var(--widget-primary);
  font-weight: bold;
  animation: blink 0.8s step-end infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Suppress slide-in animation on the actively streaming message to avoid
   layout-shift jitter while scroll-behavior: smooth is active. */
.message.streaming {
  position: relative;
  animation: none;
}


/* ---------------------------------------------------------------------------
   Rate Limiting Styles
   --------------------------------------------------------------------------- */
.rate-limit-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-bottom: 1px solid #f59e0b;
  color: #92400e;
  font-size: 13px;
  font-family: var(--widget-font);
  animation: slideDown 0.3s ease-out;
}

.rate-limit-indicator svg {
  flex-shrink: 0;
  animation: clockPulse 1s ease-in-out infinite;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes clockPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.rate-limit-indicator.error {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  border-bottom: 1px solid #ef4444;
  color: #991b1b;
}

.rate-limit-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
}

.rate-limit-counter.low {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fef3c7;
}

.rate-limit-counter.exhausted {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fecaca;
}

.message-input.rate-limited {
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
  cursor: not-allowed;
}

.message-input.rate-limited::placeholder {
  color: #92400e;
}

.send-button.rate-limited {
  background: #f59e0b !important;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

/* --- Mid-size (≤768px) --- */
@media (max-width: 768px) {
  .chat-window {
    width: min(var(--widget-chat-width, 380px), calc(100vw - 48px));
  }
}

/* --- Phone (≤480px): full-screen takeover --- */
@media (max-width: 480px) {
  .chat-window,
  .chat-window.clarm-expanded {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;   /* fallback */
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    z-index: 10000;
  }
  .clarm-expand-btn { display: none; }

  .chat-header {
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }

  .input-container {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .toggle-button {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Touch targets — 44px minimum */
  .send-button {
    width: 44px;
    height: 44px;
  }

  .close-button {
    min-width: 44px;
    min-height: 44px;
  }

  .clarm-suggestion-btn,
  .clarm-inline-reply-btn,
  .sample-button {
    min-height: 44px;
    padding: 10px 14px;
  }

  .samples-container {
    margin: 8px;
    min-width: unset;
  }
}

/* --- Landscape phone (keyboard-visible or short viewport) --- */
@media (orientation: landscape) and (max-height: 500px) {
  .chat-window {
    right: 0;
    top: 0;
    bottom: 0;
    left: auto;
    width: min(420px, 60vw);
    height: 100vh;   /* fallback */
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .chat-header {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand-badge {
    display: none;
  }
}

/* --- Virtual keyboard open state --- */
.chat-window.clarm-keyboard-open {
  height: calc(100% - var(--widget-keyboard-offset, 0px));
  bottom: var(--widget-keyboard-offset, 0px);
  top: auto;
}

/* ---------------------------------------------------------------------------
   Smart CTA Suggestion Buttons
   --------------------------------------------------------------------------- */
.clarm-suggestions-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--widget-border);
}

/* --- Exit transition for the suggestions bar ---
   Applied by hideSuggestionsBar() in clarm-widget.js.
   Uses transition-based height collapse + opacity fade for a premium feel.
   The JS sets max-height to scrollHeight first, then adds .hiding to collapse. */
.clarm-suggestions-bar.hiding {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  border-top-color: transparent;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease,
              margin-top 0.3s ease,
              padding-top 0.3s ease,
              border-top-color 0.2s ease;
}

.clarm-suggestions-bar.hiding .clarm-suggestion-btn {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* --- Clicked-button highlight ---
   Gives instant visual feedback when a CTA button is tapped.
   Brief scale-up pulse (1.03) before the exit animation takes over. */
.clarm-suggestion-btn.selected {
  background: var(--widget-primary) !important;
  color: #fff !important;
  border-color: var(--widget-primary) !important;
  transform: scale(1.03);
  box-shadow: 0 0 12px color-mix(in srgb, var(--widget-primary) 30%, transparent);
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.08s ease,
              color 0.08s ease,
              border-color 0.08s ease,
              box-shadow 0.1s ease;
}

.clarm-suggestion-btn {
  background: color-mix(in srgb, var(--widget-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--widget-primary) 20%, transparent);
  border-radius: var(--widget-radius-pill);
  color: var(--widget-primary);
  cursor: pointer;
  font-family: var(--widget-font);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 8px 14px;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.clarm-suggestion-btn:hover {
  background: color-mix(in srgb, var(--widget-primary) 14%, transparent);
  border-color: var(--widget-primary);
  transform: translateY(-1px);
}

.clarm-suggestion-btn.primary {
  background: var(--widget-primary);
  color: #fff;
  border-color: var(--widget-primary);
  font-size: 0.82rem;
  font-weight: 500;
}

.clarm-suggestion-btn.primary:hover {
  background: var(--widget-primary-hover);
  border-color: var(--widget-primary-hover);
}

@media (max-width: 480px) {
  .clarm-suggestions-bar { gap: 5px; padding-top: 8px; margin-top: 8px; }
  .clarm-suggestion-btn { font-size: 0.72rem; padding: 10px 14px; min-height: 44px; }
  .clarm-inline-reply-btn { font-size: 12px; padding: 10px 14px; min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .toggle-button,
  .send-button,
  .samples-toggle,
  .sample-button,
  .close-button {
    transition: none;
  }

  .thinking-dot,
  .bounce-animation {
    animation: none;
  }

  .chat-window {
    animation: none;
  }

  .chat-messages {
    scroll-behavior: auto;
  }

  .rate-limit-indicator,
  .rate-limit-indicator svg {
    animation: none;
  }

  .clarm-suggestion-btn {
    transition: none;
    animation: none;
    opacity: 1;
  }

  .clarm-suggestions-bar {
    animation: none;
  }

  .clarm-citation-bracket.clarm-cit-reveal,
  .clarm-citation-bracket.clarm-cit-reveal::before,
  .clarm-citation-bracket.clarm-cit-reveal::after {
    animation: none;
  }

  /* Disable exit transition — hideSuggestionsBar()'s setTimeout
     fallback (500ms) handles removal when transitions are disabled. */
  .clarm-suggestions-bar.hiding {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .chat-window {
    border: 2px solid #000;
    background-color: white;
  }

  .toggle-button {
    border: 2px solid #000;
  }

  .message-input {
    border: 2px solid #000;
  }
}

/* ---------------------------------------------------------------------------
   Bar Mode — horizontal chip bar embedded in page (like Parsewise)
   --------------------------------------------------------------------------- */
.clarm-bar-widget {
  font-family: var(--widget-font);
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.clarm-bar-inner {
  background: var(--widget-bg);
  border: 1px solid var(--widget-border);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 24px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.clarm-bar-inner:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06);
}

.clarm-bar-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--widget-text);
  margin-bottom: 12px;
  text-align: center;
}

.clarm-bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

.clarm-bar-chip {
  padding: 8px 16px;
  border-radius: var(--widget-radius-pill);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--widget-font);
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--widget-primary) 25%, transparent);
  background: color-mix(in srgb, var(--widget-primary) 6%, transparent);
  color: var(--widget-primary);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.clarm-bar-chip:hover {
  background: color-mix(in srgb, var(--widget-primary) 14%, transparent);
  border-color: var(--widget-primary);
  transform: translateY(-1px);
}

.clarm-bar-input-row {
  display: flex;
  gap: 8px;
}

.clarm-bar-input {
  flex: 1;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--widget-border);
  background: var(--widget-bg-subtle);
  color: var(--widget-text);
  font-family: var(--widget-font);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.clarm-bar-input:focus {
  border-color: var(--widget-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--widget-primary) 12%, transparent);
}

.clarm-bar-input::placeholder {
  color: var(--widget-text-muted);
}

.clarm-bar-send {
  padding: 10px 18px;
  border-radius: 12px;
  border: none;
  background: var(--widget-primary);
  color: #fff;
  font-family: var(--widget-font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.clarm-bar-send:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* --- Bar animation presets --- */
.clarm-bar-anim-pulse .clarm-bar-inner {
  animation: clarmBarPulse 2.5s ease-in-out infinite;
}
@keyframes clarmBarPulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 24px rgba(0,0,0,0.04); }
  50%      { box-shadow: 0 2px 12px rgba(0,0,0,0.1), 0 8px 40px rgba(0,0,0,0.08); }
}

.clarm-bar-anim-bounce .clarm-bar-inner {
  animation: clarmBarBounce 2s ease-in-out infinite;
}
@keyframes clarmBarBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.clarm-bar-anim-breathe .clarm-bar-inner {
  animation: clarmBarBreathe 3s ease-in-out infinite;
}
@keyframes clarmBarBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

.clarm-bar-anim-glow .clarm-bar-inner {
  animation: clarmBarGlow 2.5s ease-in-out infinite;
}
@keyframes clarmBarGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--widget-primary) 0%, transparent); }
  50%      { box-shadow: 0 0 20px 4px color-mix(in srgb, var(--widget-primary) 25%, transparent); }
}

.clarm-bar-anim-float .clarm-bar-inner {
  animation: clarmBarFloat 3.5s ease-in-out infinite;
}
@keyframes clarmBarFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-4px) rotate(-0.3deg); }
  75%      { transform: translateY(2px) rotate(0.3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .clarm-bar-anim-pulse .clarm-bar-inner,
  .clarm-bar-anim-bounce .clarm-bar-inner,
  .clarm-bar-anim-breathe .clarm-bar-inner,
  .clarm-bar-anim-glow .clarm-bar-inner,
  .clarm-bar-anim-float .clarm-bar-inner {
    animation: none;
  }
}

/* --- Bar widget inline chat messages --- */
.clarm-bar-messages {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 14px;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.clarm-bar-messages::-webkit-scrollbar {
  width: 4px;
}
.clarm-bar-messages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.clarm-bar-msg {
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 85%;
  word-wrap: break-word;
}

.clarm-bar-msg-user {
  margin-left: auto;
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  background: var(--widget-primary, #3b82f6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.clarm-bar-msg-bot {
  background: #f1f5f9;
  color: var(--widget-text, #1e293b);
  margin-right: auto;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.clarm-bar-msg a, .clarm-bar-link {
  color: var(--widget-primary, #3b82f6);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.clarm-bar-msg strong {
  font-weight: 600;
  color: var(--widget-text, #1e293b);
}

.clarm-bar-code {
  background: #e2e8f0;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  color: #0f172a;
}

.clarm-bar-thinking {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}
.clarm-bar-thinking span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: clarmBarDot 1.4s ease-in-out infinite;
}
.clarm-bar-thinking span:nth-child(2) { animation-delay: 0.2s; }
.clarm-bar-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes clarmBarDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.clarm-bar-thinking-text {
  color: var(--widget-text-muted, #94a3b8);
  font-size: 0.8rem;
  font-style: italic;
}

.clarm-bar-error {
  color: #ef4444;
  font-size: 0.8rem;
}

.clarm-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.clarm-bar-action-btn {
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
  color: var(--widget-text-secondary, #475569);
  font-family: var(--widget-font, system-ui, sans-serif);
  transition: all 0.2s ease;
}

.clarm-bar-action-btn:hover {
  background: rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.clarm-bar-action-btn.primary {
  color: #fff;
  border-color: transparent;
}

.clarm-bar-action-btn.primary:hover {
  opacity: 0.85;
}

.clarm-bar-followup-chips {
  margin-bottom: 8px;
}

.clarm-bar-followup-chips .clarm-bar-chip {
  opacity: 0;
  animation: clarmBarChipIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.clarm-bar-followup-chips .clarm-bar-chip:nth-child(1) { animation-delay: 0.03s; }
.clarm-bar-followup-chips .clarm-bar-chip:nth-child(2) { animation-delay: 0.09s; }
.clarm-bar-followup-chips .clarm-bar-chip:nth-child(3) { animation-delay: 0.15s; }
@keyframes clarmBarChipIn {
  from { opacity: 0; transform: translateY(6px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .clarm-bar-msg,
  .clarm-bar-followup-chips .clarm-bar-chip {
    animation: none;
    opacity: 1;
  }
}