/*!
 * pre-auth-mktg
 * Copyright (c) 2026 - Present Intuit Inc. All rights reserved. Unauthorized reproduction is a violation of applicable law. This material contains certain confidential and proprietary information and trade secrets of Intuit Inc.
 */
.chatModeContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  color: #393a3d;
  justify-content: flex-start;
  background: #f4f5f8;
}

/* Streaming "thinking" shimmer: a single highlight band sweeps left-to-right
   across the phrase. Phrase rotates every 2s (see StreamingThinkingLoader). */
@keyframes streamingThinkingShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.streamingThinkingText {
  /* Indent to align under "Working..." text (24px icon + 10px gap) */
  margin-left: 34px;
  font-size: 13px;
  line-height: 1.3;
  background: linear-gradient(
    90deg,
    #b0b3b8 0%,
    #b0b3b8 40%,
    #6b6f76 50%,
    #b0b3b8 60%,
    #b0b3b8 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: streamingThinkingShimmer 2.4s linear infinite;
}

.chatInputContainer {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

/* Single white chat panel container */
.chatPanel {
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 16px);
  margin-top: 8px;
  margin-bottom: 8px;
}
/* Chat Mode header styles */
.chatHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 2px solid #eceef1;
  background: #ffffff;
}

.chatHeaderLeft {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatHeaderTitle {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #21262a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatHeaderBetaBadge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e8f4fd;
  color: #0077c5;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.chatHeaderRight {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatHeaderIcon {
  color: #5f6368;
  cursor: pointer;
  transition: color 0.2s ease;
}

.chatHeaderIcon:hover {
  color: #393a3d;
}

.moreMenuWrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.moreMenuButton {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  border-radius: 50%;
  cursor: pointer;
  color: #5f6368;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.moreMenuButton:hover {
  background-color: #f1f3f4;
  color: #1a73e8;
}

.moreMenuDropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;
  min-width: 180px;
  padding: 4px 0;
}

.moreMenuItem {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  text-align: left;
  font-size: 14px;
  color: #393a3d;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.moreMenuItem:hover {
  background-color: #f1f3f4;
}

/* Start New Chat Button (circular) */
.startNewChatButton {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100px;
  height: 100px;
  background: #ffffff;
  color: #393a3d;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 119, 197, 0.3);
  transition: all 0.3s ease;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  padding: 8px;
  animation: fadeIn 2s ease;
  z-index: 1000;
}

/* Gradient border effect for circular button */
.startNewChatButton::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(
    95.53deg,
    #5bef76 3.43%,
    #38e8f6 31.32%,
    #38e8f6 67.39%,
    #236cff 91.79%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.startNewChatButton:hover {
  background: #f8f9fa;
  box-shadow: 0 6px 18px rgba(91, 239, 118, 0.4);
  transform: translateY(-2px);
}

.startNewChatButton:active {
  transform: translateY(0);
}

.startNewChatButton svg {
  flex-shrink: 0;
}

.startNewChatButton span {
  line-height: 1;
  text-align: center;
}

.chatContentArea {
  flex: 1 1;
  /* min-height:0 defeats the implicit flex min-height:auto so this area is
     bounded by the panel height; without it a tall multi-line input grows the
     whole column past the viewport instead of shrinking the messages area. */
  min-height: 0;
  display: flex;
  overflow: hidden;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}

.leftRailContainer {
  height: 100%;
  overflow: auto;
  flex: 0 1 600px;
  min-width: 600px;
  max-width: 700px;
}

/* The chat rail is always mounted. When the canvas is closed it spans the full
   chat content area (matching the pre-canvas full-width layout) instead of the
   fixed ~600px side-rail width used while the canvas is open. Use a flex column
   so the inner .chatMessagesContainer scrolls and the input pins below, exactly
   as the layout behaved before the canvas opened — no nested rail scrollbar. */
.leftRailContainer--full {
  flex: 1 1 100%;
  min-width: 0;
  /* min-height:0 so the inner messages container can shrink under a tall input
     instead of this column growing past the panel. */
  min-height: 0;
  max-width: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Default canvas-open order: canvas is first in the DOM but the chat rail
   should sit on the LEFT for the standard (non-MFD) experience. */
.chatPanel.canvasOpen .chatContentArea {
  flex-direction: row-reverse;
}

/* MFD shows the canvas on the LEFT and the chat rail on the RIGHT, i.e. the
   DOM order (canvas first). */
.chatPanel.canvasOpen .chatContentArea--canvasLeft {
  flex-direction: row;
}

.chatMessagesContainer {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 24px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  /* min-height:0 lets this flex child shrink below its content so a tall,
     multi-line input dock reduces the scroll area instead of overlapping it. */
  min-height: 0;
  min-width: 0;
}

/* Input bar wrapper: pinned below the messages. flex-shrink:0 keeps its full
   (auto-grown) height so the messages container yields and scrolls instead of
   the input expanding upward over the last message. */
.chatInputDock {
  flex-shrink: 0;
}

.chatHistoryLoadMoreSentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  flex-shrink: 0;
}

.chatHistoryLoadingOlder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  color: #6b6c72;
}

.chatHistoryLoadingOlder .intuitAssistIcon {
  flex-shrink: 0;
}

.canvasContainer {
  flex: 1 1 60%;
  min-width: 0;
  border-right: 1px solid #e0e0e0;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* When canvas is open, expand beyond the 780px cap */
.chatPanel.canvasOpen .chatContentArea {
  width: 100%;
  max-width: none;
}

.chatPanel.canvasOpen .chatInputContainer {
  max-width: none;
  width: 90%;
}

/* Mobile Canvas Modal Overlay */
.canvasModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.canvasModalBackdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  animation: fadeIn 0.2s ease;
}

.canvasModalContainer {
  position: relative;
  width: 98%;
  height: 98vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: slideUp 0.3s ease;
  z-index: 1;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.canvasModalContainer .canvasComponent {
  border-left: none;
}

/* When canvas is open, adjust chat messages container */
.chatPanel.canvasOpen .chatMessagesContainer {
  flex: 0 0 33.333%;
}

/* Message bubble styles */
.messageBubble {
  max-width: 500px;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* File/table messages need more room to display columns comfortably */
.messageBubble.userMessage:has(.tablePatternContainer) {
  max-width: 720px;
  max-height: 410px;
  padding: 12px 16px;
}

.userMessage {
  align-self: flex-end;
  background-color: #e2e9ed;
  border: 1px solid #d5dee3;
  border-radius: 20px 20px 4px 20px;
  padding: 8px 16px;
  max-height: 300px;
  overflow-y: auto;
}

.userMessage::-webkit-scrollbar {
  width: 6px;
}

.userMessage::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
}

.userMessage::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.userMessage::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* File attachment chip in history user messages */
.fileAttachmentChip {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 6px 10px;
  max-width: 100%;
  overflow: hidden;
}

.fileAttachmentName {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* File content display styles */
.fileContent {
  max-height: 300px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 8px;
  margin: 8px 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.3;
  white-space: pre-wrap;
  word-break: break-all;
}

.fileContent::-webkit-scrollbar {
  width: 6px;
}

.fileContent::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.fileContent::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.fileContent::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

.botMessage {
  align-self: flex-start;
  background-color: transparent;
  border-radius: 20px 20px 20px 4px;
  padding: 8px 2px;
  width: 100%;
  max-width: 100%;
}

.streamingBubble {
  /* qb-business-search style: plain incremental reveal, no fade mask. */
}

/* Per-block fade-in for streamed markdown. Each new top-level block
   (paragraph, list, heading, etc.) appended to the bubble during streaming
   plays this animation once on mount; previously-mounted blocks keep their
   final state, so no flicker on re-render. */
@keyframes streamingBlockFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ReactMarkdownRenderer wraps the markdown tree in a single div, so the
   actual block-level children (p, ul, ol, h*, pre, blockquote) are at
   `.streamingBubble > * > *`. */
.streamingBubble > * > * {
  animation: streamingBlockFadeIn 280ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .streamingBubble > * > * {
    animation: none;
  }
}

.jumpToBottomWrapper {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

.jumpToBottomButton {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #babec5;
  background-color: #ffffff;
  color: #21262a;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s ease;
}

.jumpToBottomButton:hover {
  background-color: #f4f5f8;
}

.jumpToBottomButton:active {
  background-color: #e2e9ed;
}

.jumpToBottomButton:focus-visible {
  outline: 2px solid #babec5;
  outline-offset: 2px;
}

.jumpToBottomButton svg {
  display: block;
}

.messagesContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tryDemoButton,
.signMeUpButton {
  border-radius: 8px;
}

.tryDemoButton {
  margin-right: 8px;
}

.signMeUpButton {
  &:hover {
    background-color: #0265ac;
    color: #ffffff;
  }
}

.closeChatButton {
  cursor: pointer;
  color: #ffffff;
  background: #6b6c72;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.closeChatButton:hover {
  background: #5a5b61;
}

/* MFD sales form action bar (Go back / Cancel) */
.mfdSalesActionBar {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.mfdActionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 36px;
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: #003e31;
  color: #ffffff;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mfdActionButton:hover {
  background: #002a22;
}

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

/*
  ===================================
    Responsive Design (Media Queries)

    Breakpoints match constants.ts:
    - MOBILE_CANVAS_BREAKPOINT: 768px
    - TABLET_BREAKPOINT: 1024px - 2*50px = 924px (The iframe does not take the full viewport when in chat mode if viewport is >1024px)
    - SMALL_MOBILE_BREAKPOINT: 480px
  ===================================
*/

/* Tablet: viewport <= (1024px - 2*50px) = 924px */
@media (max-width: 924px) {
  .chatPanel.canvasOpen .chatContentArea {
    width: 98%;
    max-width: none;
  }

  .chatPanel.canvasOpen .leftRailContainer {
    flex: 0 0 300px;
    max-width: 350px;
  }
}

/* Mobile: viewport <= 768px */
@media (max-width: 768px) {
  .chatModeContainer {
    padding: 0;
  }

  .chatPanel {
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: 100vh;
  }

  .chatHeader {
    padding: 10px 12px;
  }

  .chatHeaderTitle {
    font-size: 16px;
  }

  .chatMessagesContainer {
    padding: 12px 16px;
    padding-bottom: 40px;
  }

  .messageBubble {
    font-size: 15px;
  }

  /* Canvas open - show chat as left rail */
  .chatPanel.canvasOpen .chatContentArea {
    flex-direction: column;
    width: 100%;
  }

  .chatPanel.canvasOpen .leftRailContainer {
    flex: none;
    max-width: none;
    height: 35vh;
    min-height: 200px;
  }

  .chatPanel.canvasOpen .canvasContainer {
    flex: 1 1;
    border-left: none;
    border-top: 1px solid #e0e0e0;
  }

  .startNewChatButton {
    width: 80px;
    height: 80px;
    font-size: 12px;
  }
}

/* Small mobile: viewport <= 480px */
@media (max-width: 480px) {
  .chatHeader {
    padding: 8px 10px;
  }

  .chatContentArea {
    width: 100%;
  }

  .chatMessagesContainer {
    padding: 10px 12px;
    padding-bottom: 30px;
    gap: 12px;
  }

  .messageBubble {
    font-size: 14px;
  }

  .startNewChatButton {
    width: 70px;
    height: 70px;
    font-size: 11px;
  }
}

.mfdLegalContainer {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 4px 12px;
  font-size: 12px;
  color: #6b6c72;
  line-height: 1.4;
}

.learnMorePlainText {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.learnMorePlainTextLine {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
}

.learnMorePlainTextContact {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.learnMorePlainTextPhone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  text-decoration: none;
  cursor: pointer;
}

.learnMorePlainTextPhone:hover {
  text-decoration: underline;
}

.learnMorePlainTextIcon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.learnMorePlainTextIcon svg {
  width: 20px;
  height: 20px;
}

.learnMorePlainTextHours {
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
}

/* Table Pattern Container Styles */
.tablePatternContainer {
  width: 100%;
  margin: 5px 0;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e1e5e9;
  overflow: hidden;
}

.tablePatternHeader {
  padding: 5px;
  background: #ffffff;
  border-bottom: 1px solid #e1e5e9;
}

.tablePatternTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
}

.tablePatternBox {
  padding: 0;
  background: #ffffff;
}

.tablePatternTableWrapper {
  width: 100%;
  overflow-x: auto;
}

.tablePatternTable {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.tableHeaderRow {
  background-color: #ffffff;
  border-bottom: 1px solid #e1e5e9;
}

.tableHeader {
  padding: 5px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  vertical-align: top;
  border-bottom: 1px solid #e1e5e9;
}

.tableDataRow {
  border-bottom: 1px solid #f1f3f4;
}

.tableDataRow:hover {
  background-color: #f8f9fa;
}

.tableDataRow:last-child {
  border-bottom: none;
}

.tableCell {
  padding: 5px;
  color: #5f6368;
  vertical-align: top;
  line-height: 1.5;
  font-size: 14px;
}

/* Group styling */
.featureGroup {
  margin-bottom: 32px;
}

.featureGroup:last-child {
  margin-bottom: 0;
}

.groupTitle {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #1a73e8;
}

/* Status badge styling */
.statusBadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.statusBadge.enabled {
  background-color: #e8f5e8;
  color: #2d7d32;
}

.statusBadge.disabled {
  background-color: #fef7e0;
  color: #f57c00;
}

/* Responsive design */
@media (max-width: 768px) {
  .tablePatternContainer {
    margin: 12px 0;
    border-radius: 8px;
  }

  .tablePatternHeader {
    padding: 16px 20px 12px;
  }

  .tablePatternTitle {
    font-size: 16px;
  }

  .tablePatternTable {
    font-size: 13px;
  }

  .tableHeader,
  .tableCell {
    padding: 12px 16px;
  }

  .groupTitle {
    font-size: 16px;
  }

  .featureGroup {
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .tablePatternContainer {
    margin: 8px 0;
    border-radius: 6px;
  }

  .tablePatternHeader {
    padding: 12px 16px 8px;
  }

  .tablePatternTitle {
    font-size: 14px;
  }

  .tablePatternTable {
    font-size: 12px;
  }

  .tableHeader,
  .tableCell {
    padding: 8px 12px;
  }

  .groupTitle {
    font-size: 14px;
  }

  .featureGroup {
    margin-bottom: 20px;
  }
}

/* Customize Plan Link Styling */
.customizePlanLink {
  background: transparent;
  border: none;
  color: #1a73e8;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: color 0.2s ease;
  font-family: inherit;
  text-align: left;
  display: inline;
}

.customizePlanLink:hover {
  color: #1557b0;
  text-decoration: underline;
}

.customizePlanLink:focus {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

.scheduleCallRenderer {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  margin-top: 8px;
}

.scheduleCallRenderer--error {
  padding: 24px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #666;
}

/* Floating close button — top-right corner, no header bar */
.scheduleCallRenderer__closeBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  color: #444;
  padding: 0;
}

.scheduleCallRenderer__closeBtn:hover {
  background: #f0f0f0;
}

.scheduleCallRenderer__body {
  position: relative;
  /* Default height while waiting for postMessage height from the iframe */
  height: 388px;
  display: flex;
  flex-direction: column;
}

.scheduleCallRenderer__loadingOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  z-index: 10;
}

.scheduleCallRenderer__spinner {
  width: 36px;
  height: 36px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0363ad;
  border-radius: 50%;
  animation: scheduleCallSpin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes scheduleCallSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.scheduleCallRenderer__loadingOverlay p {
  color: #666;
  font-size: 14px;
}

.scheduleCallRenderer__iframe {
  flex: 1 1;
  width: 100%;
  border: none;
  background: white;
}

.scheduleCallRenderer__cancelBtn {
  background-color: #e8e8e8;
  color: #000;
  border: none;
  padding: 14px 24px;
  border-radius: 4px;
  font-size: 16px;
  font-family: AvenirNext forINTUIT, Avenir, Helvetica, Arial, sans-serif;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.2s;
  text-align: center;
  height: 56px;
}

.scheduleCallRenderer__cancelBtn:hover {
  background-color: #d4d4d4;
}

/* Hidden on desktop — shown only on mobile */
.scheduleCallRenderer__cancelBtnMobile {
  display: none;
}

@media (max-width: 768px) {
  .scheduleCallRenderer__body {
    height: 388px;
  }

  /* Hide X button on mobile */
  .scheduleCallRenderer__closeBtn {
    display: none;
  }

  /* Show full-width Cancel button below the iframe */
  .scheduleCallRenderer__cancelBtnMobile {
    display: block;
    width: 100%;
    border-radius: 4px;
    margin: 12px 0 4px;
  }
}

/* Message Feedback Styles */

.messageFeedback {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.feedbackButton {
  background: transparent;
  border: none;
  color: #393a3d;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedbackButton svg {
  fill: none;
  stroke: currentColor;
  transition: fill 0.2s ease;
}

.feedbackButton:hover {
  background: transparent;
  color: #0077c5;
}

.feedbackButton:active {
  background: transparent;
  border: none;
  outline: none;
}

.feedbackButton:focus {
  outline: none;
  border: none;
  background: transparent;
}

.feedbackButton.active {
  color: #0077c5;
  background: transparent;
  border: none;
}

.feedbackButton.active svg {
  fill: #0077c5;
  stroke: #0077c5;
}

.errorMessageContainer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background-color: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 8px;
  margin: 10px 15px;
}

.errorIcon {
  color: #b42318;
  flex-shrink: 0;
}

.errorText {
  color: #b42318;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* SalesAgentIntroCard styles. */

.salesAgentIntroCard {
  /* Figma: Auto layout (column) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 40px;
  gap: 16px;

  width: 320px;
  max-width: 100%;

  /* Figma: height 221 (Hug). Use min-height to avoid clipping when content wraps. */
  min-height: 221px;

  background: #ffffff;
  border-radius: 16px;
  opacity: 1;

  margin: 8px 0 12px 0;
}

.salesAgentIntroHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 16px;

  /* Figma: stretch inside card */
  align-self: stretch;
}

.salesAgentIntroTimestampRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 8px;

  align-self: stretch;
}

.salesAgentIntroTimestamp {
  font-size: 14px;
  line-height: 130%;
  text-align: center;
  color: #6b6c72;
}

.salesAgentIntroDetails {
  align-self: stretch;
  font-size: 14px;
  line-height: 130%;
  text-align: center;
  color: #6b6c72;
}

.salesAgentIntroConnectingDots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
}

.salesAgentIntroDot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: #6b6c72;
  opacity: 0.35;
  animation: salesAgentIntroDotPulse 1.2s infinite ease-in-out;
}

.salesAgentIntroDot:nth-child(2) {
  animation-delay: 0.2s;
}

.salesAgentIntroDot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes salesAgentIntroDotPulse {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .salesAgentIntroDot {
    animation: none;
    opacity: 0.6;
    transform: none;
  }
}

.salesAgentIntroInfoText {
  align-self: stretch;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  color: #6b6c72;
}

.salesAgentIntroAvatarBundle {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 8px;

  align-self: stretch;
}

.salesAgentIntroAvatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #e5e7eb;
}

.salesAgentIntroNameCredentials {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 4px;

  align-self: stretch;
}

.salesAgentIntroNameRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  gap: 4px;

  align-self: stretch;
}

.salesAgentIntroName {
  font-size: 16px;
  font-weight: 700;
  line-height: 130%;
  text-align: center;
  color: #393a3d;
}

.salesAgentIntroCredentialsRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  gap: 4px;

  align-self: stretch;
}

.salesAgentIntroCredentials {
  font-size: 12px;
  line-height: 130%;
  text-align: center;
  color: #393a3d;
}

/* HumanHandoffCard — "Connect with an expert" handoff panel */

.humanHandoffCard {
  background: #ffffff;
  border: 1px solid #d5dee3;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 8px 0;
  box-sizing: border-box;
}

/* ── Header ─────────────────────────────────────────── */

.humanHandoffHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 6px;
}

.humanHandoffHeaderText {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.humanHandoffTitle {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: #393a3d;
  margin: 0;
}

.humanHandoffSubTitle {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #6b6c72;
  margin: 0;
}

.humanHandoffAvatars {
  display: flex;
  align-items: center;
  padding-right: 6px;
}

.humanHandoffAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  background: #f0f4f6;
  margin-right: -6px;
  flex-shrink: 0;
}

.humanHandoffAvatars .humanHandoffAvatar:last-child {
  margin-right: 0;
}

/* ── Options list ────────────────────────────────────── */

.humanHandoffOptions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Shared base for all rows */
.humanHandoffRow,
.humanHandoffRowBtn,
.humanHandoffRowLink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  min-height: 40px;
}

.humanHandoffRowBtn {
  border: none;
  cursor: pointer;
  text-align: left;
}

.humanHandoffRowBtn:hover:not(:disabled),
.humanHandoffRowLink:hover {
  background: #f5f8fa;
}

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

.humanHandoffRowLink.humanHandoffRowLinkDisabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Phone number link — looks like a row but tappable on mobile */
.humanHandoffPhoneLink {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.humanHandoffPhoneLink:hover {
  background: #f5f8fa;
}

/* Text block (label + optional sub-label) */
.humanHandoffRowText {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.humanHandoffRowLabel {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #393a3d;
}

.humanHandoffRowSubLabel {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #6b6c72;
}

/* Icon wrapper */
.humanHandoffRowIcon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #393a3d;
}

/* ── Mobile responsive ──────────────────────────────── */

@media (max-width: 768px) {
  .humanHandoffCard {
    padding: 10px;
    gap: 10px;
    margin: 6px 0;
  }

  .humanHandoffTitle {
    font-size: 15px;
    line-height: 22px;
  }

  .humanHandoffAvatar {
    width: 28px;
    height: 28px;
  }

  .humanHandoffRow,
  .humanHandoffRowBtn,
  .humanHandoffRowLink {
    padding: 4px 6px;
    min-height: 38px;
  }

  .humanHandoffRowLabel {
    font-size: 13px;
  }

  .humanHandoffRowSubLabel {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .humanHandoffCard {
    padding: 8px;
    gap: 8px;
    border-radius: 6px;
  }

  .humanHandoffHeader {
    padding-left: 4px;
    gap: 6px;
  }

  .humanHandoffTitle {
    font-size: 14px;
    line-height: 20px;
  }

  .humanHandoffAvatar {
    width: 24px;
    height: 24px;
    margin-right: -5px;
  }

  .humanHandoffAvatars {
    padding-right: 4px;
  }

  .humanHandoffRow,
  .humanHandoffRowBtn,
  .humanHandoffRowLink {
    padding: 3px 4px;
    min-height: 36px;
    gap: 6px;
  }

  .humanHandoffRowLabel {
    font-size: 12px;
  }

  .humanHandoffRowSubLabel {
    font-size: 10px;
  }

  .humanHandoffRowIcon {
    width: 20px;
    height: 20px;
  }

  .humanHandoffRowIcon svg {
    width: 20px;
    height: 20px;
  }
}

/**
 * Secure Form Renderer Styles
 */

.secureFormRenderer {
  width: 100%;
  max-width: 800px;
  height: 600px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  position: relative;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
}

.secureFormRenderer.error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.errorMessage {
  text-align: center;
  max-width: 400px;
}

.errorMessage h3 {
  color: #d32f2f;
  margin-bottom: 16px;
}

.errorMessage p {
  color: #666;
  margin-bottom: 12px;
  line-height: 1.5;
}

.errorDetails {
  font-size: 12px;
  color: #999;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.loadingOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  z-index: 10;
}

.loadingSpinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0363ad;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loadingOverlay p {
  color: #666;
  font-size: 14px;
}

.formHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #0363ad;
  color: white;
  border-bottom: 1px solid #e0e0e0;
}

.formHeader h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.closeButton {
  background: transparent;
  border: none;
  color: white;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.closeButton:hover {
  background: rgba(255, 255, 255, 0.2);
}

.cancelButton {
  background: #0363ad;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.2s;
}

.cancelButton:hover {
  background: #024a8a;
}

.secureFormIframe {
  flex: 1 1;
  width: 100%;
  border: none;
  background: white;
  min-height: 500px;
}

/* Instructions view (new tab opened) */
.secureFormRenderer.instructions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  min-height: 400px;
}

.instructionsMessage {
  text-align: center;
  max-width: 600px;
}

.successIcon {
  margin: 0 auto 24px;
  width: 64px;
  height: 64px;
}

.instructionsMessage h2 {
  color: #4caf50;
  margin-bottom: 16px;
  font-size: 24px;
}

.instructionsMessage > p {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 16px;
}

.instructionsSteps {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  text-align: left;
}

.instructionsSteps p {
  margin: 0 0 12px 0;
  color: #333;
  font-weight: 600;
}

.instructionsSteps ol {
  margin: 0;
  padding-left: 24px;
  color: #666;
}

.instructionsSteps li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.troubleshoot {
  font-size: 13px;
  color: #999;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.troubleshoot strong {
  color: #666;
}

/* Popup message view */
.secureFormRenderer.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.popupMessage {
  text-align: center;
  max-width: 500px;
}

.popupMessage h2 {
  color: #0363ad;
  margin-bottom: 16px;
  font-size: 24px;
}

.popupMessage p {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 14px;
}

.popupInstructions {
  font-size: 13px;
  color: #999;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.reopenButton,
.linkButton {
  background: #0363ad;
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin: 8px;
  transition: background 0.2s;
}

.reopenButton:hover,
.linkButton:hover {
  background: #024a8a;
}

.linkButton {
  background: transparent;
  color: #0363ad;
  padding: 4px 8px;
  text-decoration: underline;
  font-weight: normal;
}

.linkButton:hover {
  background: transparent;
  color: #024a8a;
}

.closeButton.secondary {
  background: transparent;
  color: #666;
  border: 1px solid #ccc;
}

.closeButton.secondary:hover {
  background: #f5f5f5;
  color: #333;
}

/* Iframe notice */
.iframeNotice {
  background: #fff9e6;
  border: 1px solid #ffd966;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 12px;
  font-size: 13px;
  color: #666;
}

.iframeNotice strong {
  color: #333;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .secureFormRenderer {
    max-width: 100%;
    height: 500px;
  }

  .formHeader {
    padding: 12px 16px;
  }

  .formHeader h2 {
    font-size: 16px;
  }

  .secureFormIframe {
    min-height: 400px;
  }

  .popupMessage {
    padding: 16px;
  }

  .popupMessage h2 {
    font-size: 20px;
  }
}

/* Common Button Styles */

.signUpButtonContainer,
.livePersonButtonContainer {
  margin: 16px 0;
}

.salesButtonsRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.salesButtonsRow .signUpButtonContainer,
.salesButtonsRow .livePersonButtonContainer {
  margin: 0;
}

/* Shared base styles for primary action buttons */
.primaryGreenButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 240px;
  height: 48px;
  padding: 6px 12px;
  background: #003e31;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.primaryGreenButton:hover {
  background: #00322a;
  box-shadow: 0 4px 12px rgba(0, 62, 49, 0.3);
}

.primaryGreenButton:active {
  background: #002820;
  transform: translateY(1px);
}

.primaryGreenButton:focus {
  outline: 2px solid #003e31;
  outline-offset: 2px;
}

.primaryGreenButton:disabled,
.primaryGreenButton.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.primaryGreenButton svg {
  flex-shrink: 0;
}

/* Sales Connect Button Container */
.salesConnectButtonContainer {
  margin: 16px 0;
}

/* Sales Connect Button (Talk to Sales) */
.salesConnectButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 240px;
  height: 48px;
  padding: 6px 12px;
  background: #003e31;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.salesConnectButton:hover {
  background: #00322a;
  box-shadow: 0 4px 12px rgba(0, 62, 49, 0.3);
}

.salesConnectButton:active {
  background: #002820;
  transform: translateY(1px);
}

.salesConnectButton:focus {
  outline: 2px solid #003e31;
  outline-offset: 2px;
}

.salesConnectButton svg {
  flex-shrink: 0;
}

/* Try Demo Button (Filled primary action) */
.tryDemoButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 100px;
  height: 36px;
  padding: 6px 12px;
  background: #003e31;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}

.tryDemoButton:hover {
  background: #00322a;
  box-shadow: 0 4px 12px rgba(0, 62, 49, 0.3);
}

.tryDemoButton:active {
  background: #002820;
  transform: translateY(1px);
}

.tryDemoButton:focus {
  outline: 2px solid #003e31;
  outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .primaryGreenButton {
    width: 100%;
    min-width: auto;
  }

  .salesConnectButton {
    width: 100%;
    min-width: auto;
  }

  .tryDemoButton {
    width: 100%;
    min-width: auto;
    height: 48px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
}

/**
 * Secure Form Invitation Styles
 * Mimics the LivePerson mobile SDK secure form invitation card design
 */

.secureFormInvitation {
  display: flex;
  justify-content: flex-start;
  margin: 8px 0;
  max-width: 100%;
}

.secureFormInvitationExpanded {
  width: 100%;
  max-width: 800px;
  margin: 16px auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
}

.secureFormInvitationCard {
  display: flex;
  gap: 12px;
  background: #ffffff;
  border: 2px solid #d4d4d5;
  border-radius: 12px;
  padding: 16px;
  max-width: 400px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s;
}

.secureFormInvitationCard:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.secureFormIcon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f4fd;
  border-radius: 50%;
  color: #0363ad;
}

.secureFormDetails {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.secureFormInvitationTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  line-height: 1.3;
}

.secureFormInvitationDescription {
  margin: 0;
  font-size: 14px;
  color: #6d6e70;
  line-height: 1.4;
}

.fillInFormButton {
  align-self: stretch;
  background: #003e31;
  color: #ffffff;
  border: 1px solid #003e31;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
  text-align: left;
}

.fillInFormButton:hover:not(:disabled) {
  background: #002a22;
  border-color: #002a22;
  color: #ffffff;
}

.fillInFormButton:active:not(:disabled) {
  transform: scale(0.98);
}

.fillInFormButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.secureFormId {
  margin: 4px 0 0 0;
  font-size: 11px;
  color: #999;
  font-family: monospace;
}

/* Submitted state — success banner */
.secureFormSubmittedBanner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid #003e31;
  border-radius: 12px;
  max-width: 400px;
}

.secureFormSubmittedIcon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 50%;
}

.secureFormSubmittedText {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #003e31;
  line-height: 1.4;
}

/* Error state */
.secureFormInvitation.error .secureFormInvitationCard {
  border-color: #ffcdd2;
  background: #fff5f5;
}

.secureFormInvitationCard.error {
  border-color: #ffcdd2;
  background: #fff5f5;
}

.secureFormIcon.error {
  background: #ffebee;
  color: #d32f2f;
}

.secureFormInvitationTitle.error {
  color: #c62828;
}

.secureFormErrorMessage {
  margin: 0;
  font-size: 14px;
  color: #d32f2f;
  line-height: 1.4;
}

.fillInFormButton.retry {
  background: #d32f2f;
  color: #fff;
  border-color: #d32f2f;
}

.fillInFormButton.retry:hover {
  background: #b71c1c;
  border-color: #b71c1c;
}

/* Loading state */
.secureFormInvitation.loading .secureFormIcon {
  background: #e3f2fd;
}

.secureFormIcon.loading {
  background: #e3f2fd;
}

.loadingSpinner.small {
  width: 20px;
  height: 20px;
  border: 2px solid #90caf9;
  border-top-color: #1976d2;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .secureFormInvitationCard {
    max-width: 100%;
  }

  .secureFormInvitationExpanded {
    max-width: 100%;
  }

  .secureFormIcon {
    width: 36px;
    height: 36px;
  }

  .secureFormInvitationTitle {
    font-size: 15px;
  }

  .secureFormInvitationDescription {
    font-size: 13px;
  }

  .fillInFormButton {
    font-size: 13px;
    padding: 7px 14px;
  }
}

.promptCardsContainer {
  padding: 12px 0;
  text-align: center;
}

.promptCardsHeader {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}

.promptCardsGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .promptCardsGrid {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .promptCardsGrid {
    gap: 10px;
  }
}

.promptCard {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #ffffff;
  border-radius: 50px;
  padding: 6px 18px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  outline: none;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.promptCard:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.promptCard:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.2);
}

/* Chat variant - for light backgrounds in ChatMode */
/* Keep same alignment as initial mode, only change colors */

/* Gray filled pills for light backgrounds */
.promptCard.chatVariant {
  background: #f1f3f4;
  border: 1px solid #dadce0;
  color: #202124;
}

.promptCard.chatVariant:hover {
  background: #e8eaed;
  border-color: #dadce0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.promptCard.chatVariant:active {
  background: #dadce0;
  box-shadow: none;
}

@media (min-width: 1200px) {
  .promptCard {
    padding: 6px 18px;
    font-size: 16px;
    min-height: 48px;
  }
}

@media (max-width: 768px) {
  .promptCard {
    padding: 10px 20px;
    font-size: 15px;
    min-height: 40px;
    white-space: normal;
    text-align: center;
  }
}

/* Fade edges via opacity mask for banner variant prompt cards (primarily for mobile screens) */
@property --left-fade {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}

@property --right-fade {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}

@keyframes scrollfade {
  0% {
    --left-fade: 0;
  }
  10%,
  100% {
    --left-fade: 3rem;
  }
  0%,
  90% {
    --right-fade: 3rem;
  }
  100% {
    --right-fade: 0;
  }
}

@media (max-width: 600px) {
  .promptCardsContainer.bannerVariant {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    position: relative;

    /* Hide scrollbar while keeping scroll functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */

    /* Fade edges via opacity mask - only works on Chrome, Safari and Edge*/
    /* TODO: Add support for Firefox */
    -webkit-mask: linear-gradient(
      to right,
      #0000,
      #ffff var(--left-fade) calc(100% - var(--right-fade)),
      #0000
    );
            mask: linear-gradient(
      to right,
      #0000,
      #ffff var(--left-fade) calc(100% - var(--right-fade)),
      #0000
    );
    animation: scrollfade;
    animation-timeline: --scrollfade;
    scroll-timeline: --scrollfade x;
  }

  .promptCardsContainer.bannerVariant::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .promptCardsContainer.chatVariant .promptCardsGrid {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .promptCardsContainer.bannerVariant .promptCardsGrid {
    /* On small screens, show cards in a single horizontal row that scrolls */
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0;
    width: -moz-max-content;
    width: max-content;
  }

  .promptCardsContainer.bannerVariant .promptCard {
    /* Prevent cards from shrinking too much in the horizontal list */
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  .promptCardsContainer {
    padding: 6px 0;
  }

  .promptCard {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* Mirror qb-business-search FollowUp.tsx: 300ms opacity 0→1 + 10px slide-up
   on the container as a single unit (no per-pill stagger). */
@keyframes followUpPillsFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.followUpPillsContainer {
  margin-top: 12px;
  max-width: 100%;
  display: flex;
  justify-content: flex-end;
}

/* Streaming-only entrance animation. Applied via prop from the consumer so the
   invoke-only (non-streaming) flow renders the container without animation,
   matching the original pre-streaming behavior. */
.followUpPillsContainer--animate {
  animation: followUpPillsFadeUp 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .followUpPillsContainer--animate {
    animation: none;
  }
}

.followUpPillsGrid {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.followUpPill {
  background: transparent;
  border: 2px solid #003e31;
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #003e31;
  cursor: pointer;
  height: auto;
  line-height: 1.5;
  white-space: normal;
  min-width: auto;
  transition: all 0.25s cubic-bezier(0.35, 0, 0.5, 1);
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.followUpPill:hover,
.followUpPill:focus {
  background: rgba(0, 62, 49, 0.1);
}

.followUpPill:hover:active,
.followUpPill:focus:active {
  scale: 0.9;
  background: rgba(0, 62, 49, 0.2);
}

@media (max-width: 768px) {
  .followUpPillsGrid {
    gap: 6px;
  }

  .followUpPill {
    font-size: 12px;
    padding: 8px 16px;
  }
}

@media (max-width: 480px) {
  .followUpPillsContainer {
    margin-top: 8px;
  }

  .followUpPill {
    font-size: 12px;
    padding: 8px 16px;
  }
}

.multiSelectCard {
  background: #ffffff;
  border: 1px solid #d4d7dc;
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0;
  width: 100%;
  box-sizing: border-box;
}

.multiSelectCardHeader {
  font-size: 14px;
  font-weight: 500;
  color: #393a3d;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.multiSelectDivider {
  border: none;
  border-top: 1px solid #d4d7dc;
  margin: 0 0 12px 0;
}

.multiSelectSubtext {
  font-size: 13px;
  color: #6b7280;
  text-align: center;
  margin: 0 0 12px 0;
}

.multiSelectPillsGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.multiSelectPill {
  background: #ffffff;
  border: 2px solid #003e31;
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #393a3d;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  outline: none;
  white-space: nowrap;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
}

.multiSelectPill:hover {
  border-color: #003e31;
  background: #e6f2ef;
}

.multiSelectPill.selected {
  background: #e6f2ef;
  border-color: #003e31;
  color: #003e31;
  font-weight: 600;
}

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

.multiSelectSubmitBtn {
  display: block;
  width: 100%;
  padding: 12px 24px;
  background: #003e31;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: center;
}

.multiSelectSubmitBtn:hover:not(:disabled) {
  background: #002a22;
}

.multiSelectSubmitBtn:active:not(:disabled) {
  background: #001a16;
}

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

@media (max-width: 768px) {
  .multiSelectPillsGrid {
    gap: 6px;
  }

  .multiSelectPill {
    font-size: 13px;
    padding: 6px 14px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .multiSelectCard {
    padding: 12px;
  }
}

.discoveryCard {
  background: #ffffff;
  border: 1.1px solid #e2e9ed;
  border-radius: 9px;
  padding: 18px;
  margin: 8px 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

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

.discoverySection + .discoverySection {
  padding-top: 12px;
}

.discoverySectionLabel {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #393a3d;
  margin: 0;
}

.discoveryPillsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.discoveryChip {
  background: #ffffff;
  border: 2px solid #003e31;
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #393a3d;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  outline: none;
  white-space: nowrap;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
}

.discoveryChip:hover {
  border-color: #003e31;
  background: #e6f2ef;
}

.discoveryChip.active {
  background: #e6f2ef;
  border-color: #003e31;
  color: #003e31;
  font-weight: 600;
}

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

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

.discoverySection--reveal {
  animation: discoveryReveal 0.25s ease-out forwards;
}

.discoverySubmitRow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  animation: discoveryReveal 0.25s ease-out forwards;
}

.discoverySubmitBtn {
  padding: 10px 24px;
  background: #003e31;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: center;
}

.discoverySubmitBtn:hover:not(:disabled) {
  background: #002a22;
}

.discoverySubmitBtn:active:not(:disabled) {
  background: #001a16;
}

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

.discoveryResetBtn {
  padding: 10px 20px;
  background: transparent;
  color: #393a3d;
  border: none;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
}

.discoveryResetBtn:hover:not(:disabled) {
  background: #e6f2ef;
  border-radius: 8px;
}

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

@media (max-width: 768px) {
  .discoveryCard {
    padding: 14px;
  }

  .discoveryPillsRow {
    gap: 6px;
  }

  .discoveryChip {
    font-size: 13px;
    padding: 6px 14px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .discoveryCard {
    padding: 12px;
  }

  .discoverySectionLabel {
    font-size: 14px;
  }
}

.dtmCtaRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

/* Primary (green) CTA */
.dtmCtaPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 6px 24px;
  background: #003e31;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dtmCtaPrimary:hover {
  background: #00322a;
  box-shadow: 0 4px 12px rgba(0, 62, 49, 0.3);
}

.dtmCtaPrimary:active {
  background: #002820;
  transform: translateY(1px);
}

.dtmCtaPrimary:focus {
  outline: 2px solid #003e31;
  outline-offset: 2px;
}

/* Secondary (borderless text) CTA */
.dtmCtaSecondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 6px 16px;
  background: transparent;
  color: #393a3d;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dtmCtaSecondary:hover {
  background: #e6f2ef;
}

.dtmCtaSecondary:focus {
  outline: 2px solid #003e31;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .dtmCtaRow {
    flex-direction: column;
    align-items: stretch;
  }

  .dtmCtaPrimary,
  .dtmCtaSecondary {
    width: 100%;
  }
}

.socialProofSection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.socialProofCard {
  background: #f4f8f7;
  border-radius: 0;
  border-top: 2px solid #1a7a5e;
  padding: 16px;
}

.socialProofCardInner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.socialProofIcon {
  flex-shrink: 0;
  color: #1a7a5e;
  margin-top: 2px;
}

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

.socialProofQuote {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 150%;
  letter-spacing: 0;
  color: #202124;
}

.socialProofAttribution {
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  line-height: 150%;
  letter-spacing: 0;
  color: #202124;
}

/* Mobile - 768px and below */
@media (max-width: 768px) {
  .socialProofCard {
    background: #f8fafb;
    padding: 0 0 24px;
  }

  .socialProofCardInner {
    padding: 0 20px;
    margin-top: 24px;
  }

  .socialProofContent {
    gap: 10px;
  }

  .socialProofQuote,
  .socialProofAttribution {
    font-size: 16px;
  }
}

/* LivePerson handoff UI styles (connect/disconnect controls + status/notice UI). */
.connectToSalesSpecialistFooter {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.connectToSalesSpecialistFooterLeft {
  justify-content: flex-start;
}

.livePersonStatusMessage {
  align-self: center;
  width: 100%;
  max-width: 100%;
  padding: 0;
  background: transparent;
  display: flex;
  justify-content: center;
}

.livePersonStatusCardWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.livePersonStatusCardWrapper::before {
  content: '';
  display: block;
  width: min(768px, 100%);
  height: 1px;
  opacity: 1;
  background: #e5e7eb;
  margin: 0 auto 16px auto;
}

.connectToSalesInlineCta {
  margin-top: 16px;
}

.salesSystemNotice {
  background: transparent;
  padding: 0;
}

.salesSystemNoticeText {
  display: inline-block;
  /* Match "Next Steps" (markdown-h2) typography */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #236cff;
}

.salesSystemInfoNotice {
  background: transparent;
  padding: 0;
}

.salesSystemInfoText {
  display: inline-block;
  font-size: 12px;
  line-height: 1.3;
  color: #6b6c72;
}

.messageBubble.botMessage.livePersonSalesBotMessage {
  align-self: center;
  width: auto;
  max-width: 100%;
  padding: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.3;
  color: #6b6c72;
  text-align: center;
}

.disconnectFromSalesSpecialistButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 160px;
  height: 48px;
  padding: 6px 12px;
  background: transparent;
  color: #003e31;
  border: 2px solid #003e31;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0;
  margin-bottom: 0;
}

.disconnectFromSalesSpecialistButton:hover {
  background: rgba(0, 62, 49, 0.1);
  border-color: #003e31;
  color: #003e31;
}

.disconnectFromSalesSpecialistButton:active {
  background: rgba(0, 62, 49, 0.2);
  transform: translateY(1px);
}

.disconnectFromSalesSpecialistButton:focus {
  outline: 2px solid #003e31;
  outline-offset: 2px;
}

/* ── Sales disconnect card ───────────────────────────── */

.salesDisconnectCard {
  margin: 8px 0;
}

.salesDisconnectBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #d4d7dc;
  border-radius: 24px;
}

.salesDisconnectBannerText {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #393a3d;
}

.salesDisconnectBannerIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #f0f1f2;
  border-radius: 50%;
  flex-shrink: 0;
}

.salesDisconnectHeading {
  display: block;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #393a3d;
  margin-bottom: 4px;
}

.salesDisconnectHeader {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.salesDisconnectBody,
.salesDisconnectBody .bot-message,
.salesDisconnectBody .markdown-paragraph,
.salesDisconnectBody .markdown-strong,
.salesDisconnectBody .markdown-h1,
.salesDisconnectBody .markdown-h2,
.salesDisconnectBody .markdown-h3,
.salesDisconnectBody p,
.salesDisconnectBody span,
.salesDisconnectBody strong {
  color: #393a3d !important;
  font-weight: 400 !important;
  font-size: 18px;
}

/* LivePerson session messages container */
.livePersonSessionMessages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* LivePerson user message styling */
.livePersonUserMessage {
  align-self: flex-end !important;
  max-width: 70% !important;
  width: auto !important;
}

/* LivePerson agent message styling */
.livePersonAgentMessage {
  align-self: flex-start !important;
  max-width: 70% !important;
  width: auto !important;
}

/* Agent typing indicator — three animated dots */
.agentTypingIndicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: #f0f0f0;
  border-radius: 18px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 4px 0 4px 12px;
}

.agentTypingDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #888;
  animation: agentTypingBounce 1.2s infinite ease-in-out;
}

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

@keyframes agentTypingBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}

/* Canvas Component */
.canvasComponent {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Canvas Header */
.canvasHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
}

.canvasTitle {
  font-size: 16px;
  font-weight: 500;
  color: #202124;
  display: flex;
  align-items: center;
  gap: 8px;
}

.canvasDescription {
  font-size: 14px;
  color: #5f6368;
  line-height: 1.4;
}

.canvasIcon {
  font-size: 20px;
  margin-right: 8px;
}

.closeButton {
  background: none;
  border: none;
  font-size: 24px;
  color: #5f6368;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.closeButton:hover {
  background: #e8eaed;
  color: #202124;
}

/* Canvas Content */
.canvasContent {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
}

/* When an iframe is present, disable outer scroll so only the iframe scrolls.
   Applies to both the desktop side-panel and the mobile modal canvas. */
.canvasContent:has(.invoiceGeneratorIframe) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.canvasContent:has(.invoiceGeneratorIframe) .widgetContainer,
.canvasContent:has(.invoiceGeneratorIframe) .widgetContent,
.canvasContent:has(.invoiceGeneratorIframe) .webEmbedContainer {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Widget Container */
.widgetContainer {
  width: 100%;
}

.widgetContent {
  width: 100%;
}

/* Loading Container */
.loadingContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loadingSpinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e8eaed;
  border-top: 4px solid #1a73e8;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.loadingText {
  font-size: 16px;
  color: #5f6368;
  margin: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Widget Not Found */
.widgetNotFound {
  text-align: center;
  padding: 40px 20px;
  color: #5f6368;
}

.widgetNotFound h3 {
  margin: 0 0 16px 0;
  color: #202124;
}

/* Pricing Widget */
.pricingWidget {
  width: 100%;
}

.pricingTable {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-top: 20px;
}

.planColumn {
  background: #ffffff;
  border: 2px solid #e8eaed;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
}

.planColumn:hover {
  border-color: #1a73e8;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 115, 232, 0.15);
}

.planName {
  font-size: 18px;
  font-weight: 600;
  color: #202124;
  margin: 0 0 12px 0;
}

.planPrice {
  font-size: 24px;
  font-weight: 700;
  color: #1a73e8;
  margin: 0 0 16px 0;
}

.planFeatures {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  text-align: left;
}

.planFeatures li {
  padding: 8px 0;
  color: #5f6368;
  position: relative;
  padding-left: 20px;
}

.planFeatures li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #34a853;
  font-weight: bold;
}

.selectPlanButton {
  background: #1a73e8;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.selectPlanButton:hover {
  background: #1557b0;
  transform: translateY(-1px);
}

/* Plan Picker Widget */
.planPickerWidget {
  width: 100%;
}

.planPickerWidget h4 {
  font-size: 20px;
  font-weight: 600;
  color: #202124;
  margin: 0 0 8px 0;
  text-align: center;
}

.planPickerWidget p {
  color: #5f6368;
  margin: 0 0 24px 0;
  text-align: center;
}

/* Plan Summary Section */
.planSummarySection {
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.planSummary {
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  text-align: center;
}

.planCost {
  font-size: 16px;
  color: #1a73e8;
  font-weight: 600;
  position: relative;
}

.costChange {
  font-size: 14px;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.costChange:not(:empty) {
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  color: #1a73e8;
}

.changeType {
  font-size: 12px;
  color: #5f6368;
  margin-left: 4px;
}

/* API Response Section */
.apiResponseSection {
  margin: 16px 0;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.responseContent {
  color: #202124;
  line-height: 1.6;
  margin-bottom: 20px;
}

.responseContent.original {
  border-left: 4px solid #1a73e8;
  padding-left: 16px;
}

.responseContent.custom {
  border-left: 4px solid #34a853;
  padding-left: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e8eaed;
}

.responseHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.responseType {
  color: #1a73e8;
  font-weight: 600;
  text-transform: capitalize;
}

.responseContent.custom .responseType {
  color: #34a853;
}

.responseTimestamp {
  color: #5f6368;
  font-size: 12px;
}

/* API Responses Container */
.apiResponsesContainer {
  margin: 24px 0;
}

.apiResponsesContainer h4 {
  margin: 0 0 16px 0;
  color: #1a73e8;
  font-size: 18px;
  font-weight: 600;
}

.planFeatures {
  font-size: 14px;
  color: #5f6368;
}

/* API Response Section
.apiResponseSection {
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
} */

.loadingSection {
  text-align: center;
  padding: 20px;
}

.loadingSpinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1a73e8;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loadingSection p {
  color: #5f6368;
  margin: 0;
  font-size: 16px;
}

.responseContent {
  width: 100%;
}

.responseTitle {
  font-size: 18px;
  font-weight: 600;
  color: #1a73e8;
  margin: 0 0 12px 0;
  text-align: center;
}

.responseDescription {
  color: #5f6368;
  margin: 0 0 16px 0;
  line-height: 1.5;
  text-align: center;
}

.recommendationsList {
  margin: 16px 0;
}

.recommendationsList h5 {
  font-size: 16px;
  font-weight: 600;
  color: #202124;
  margin: 0 0 12px 0;
}

.recommendationsList ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recommendationsList li {
  padding: 8px 0;
  color: #5f6368;
  position: relative;
  padding-left: 20px;
}

.recommendationsList li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #34a853;
  font-weight: bold;
}

.responseDetails {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e8eaed;
}

.detailItem {
  text-align: center;
  color: #5f6368;
}

.detailItem strong {
  color: #202124;
  display: block;
  margin-bottom: 4px;
}

/* Original API Response Section */
.originalResponse {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e8eaed;
}

.originalResponse summary {
  color: #1a73e8;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.originalResponse summary:hover {
  color: #1557b0;
}

.apiResponseText {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #333;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* API Response Section
.apiResponseSection {
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.apiResponseSection h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1a73e8;
  margin: 0 0 16px 0;
  text-align: center;
} */

.responseContent {
  color: #5f6368;
  line-height: 1.6;
}

/* Add-on Features Section */
.addonFeaturesSection {
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  padding: 20px;
}

.featureGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.featureCheckbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: #202124;
  position: relative;
}

.featureCheckbox:hover {
  background: #e8eaed;
  border-color: #1a73e8;
}

.featureCheckbox input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: #1a73e8;
}

/* Feature Status Styles */
.featureCheckbox.new {
  border-color: #34a853;
  background: #f8fff9;
}

.featureCheckbox.removed {
  border-color: #ea4335;
  background: #fff8f8;
  opacity: 0.7;
}

.featureCheckbox.selected {
  border-color: #1a73e8;
  background: #f8f9ff;
}

/* Feature Info Layout */
.featureInfo {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  gap: 4px;
}

.featureName {
  font-weight: 500;
  color: #202124;
}

.featureCost {
  font-size: 14px;
  color: #1a73e8;
  font-weight: 500;
}

/* Feature Badges */
.featureBadge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.featureBadge.new {
  background: #34a853;
  color: white;
}

.featureBadge.removed {
  background: #ea4335;
  color: white;
}

.submitCustomization {
  background: #1a73e8;
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  font-size: 16px;
}

.submitCustomization:hover:not(:disabled) {
  background: #1557b0;
  transform: translateY(-1px);
}

.submitCustomization:disabled {
  background: #c1c1c1;
  cursor: not-allowed;
}

/* Generic Widget Styles */
.chartWidget,
.formWidget,
.dashboardWidget,
.fileUploadWidget,
.htmlWidget,
.demoWidget,
.comparisonTableWidget {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e8eaed;
}

.chartWidget h4,
.formWidget h4,
.dashboardWidget h4,
.fileUploadWidget h4,
.htmlWidget h4,
.demoWidget h4,
.comparisonTableWidget h4 {
  font-size: 18px;
  font-weight: 600;
  color: #202124;
  margin: 0 0 16px 0;
}

.chartWidget p,
.formWidget p,
.dashboardWidget p,
.fileUploadWidget p,
.demoWidget p,
.comparisonTableWidget p {
  color: #5f6368;
  margin: 0;
  line-height: 1.5;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Tablet - 1024px and below */
@media (max-width: 1024px) {
  .canvasContent {
    padding: 16px;
  }

  .planColumn {
    padding: 16px;
  }
}

/* Mobile - 768px and below */
@media (max-width: 768px) {
  .pricingTable {
    grid-template-columns: 1fr;
  }

  .featureGrid {
    grid-template-columns: 1fr;
  }

  .recommendationActions {
    flex-direction: column;
  }

  .canvasHeader {
    padding: 12px 16px;
  }

  .canvasTitle {
    font-size: 14px;
  }

  .closeButton {
    font-size: 20px;
    padding: 6px 10px;
  }

  .canvasContent {
    padding: 12px;
  }

  .planName {
    font-size: 16px;
  }

  .planPrice {
    font-size: 20px;
  }

  .widgetNotFound {
    padding: 30px 16px;
  }

  .loadingContainer {
    padding: 40px 16px;
  }
}

/* Small Mobile - 480px and below */
@media (max-width: 480px) {
  .canvasHeader {
    padding: 10px 12px;
  }

  .canvasTitle {
    font-size: 13px;
    gap: 6px;
  }

  .canvasDescription {
    font-size: 12px;
  }

  .closeButton {
    font-size: 18px;
    padding: 4px 8px;
  }

  .canvasContent {
    padding: 10px;
  }

  .planColumn {
    padding: 14px;
  }

  .planName {
    font-size: 15px;
  }

  .planPrice {
    font-size: 18px;
  }

  .selectPlanButton {
    padding: 10px 20px;
    font-size: 14px;
  }

  .featureCheckbox {
    padding: 12px;
    font-size: 13px;
  }

  .submitCustomization {
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* Accordion Styles */
.conversation-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.conversation-item {
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.2s ease;
}

.conversation-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.conversation-header {
  padding: 16px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8eaed;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
}

.conversation-header:hover {
  background: #e8eaed;
}

.conversation-header.expanded {
  background: #e8f0fe;
  border-bottom-color: #1a73e8;
}

.conversation-question {
  font-weight: 600;
  color: #202124;
  margin: 0;
  flex: 1 1;
}

.conversation-timestamp {
  font-size: 12px;
  color: #5f6368;
  margin-left: 12px;
}

.conversation-content {
  padding: 20px;
  background: #ffffff;
}

.expand-icon {
  font-size: 18px;
  color: #5f6368;
  transition: transform 0.2s ease;
}

.conversation-item.expanded .expand-icon {
  transform: rotate(45deg);
}

/* Empty Conversation State */
.empty-conversation {
  text-align: center;
  padding: 60px 20px;
  color: #5f6368;
}

.empty-conversation h4 {
  margin: 0 0 8px 0;
  color: #202124;
}

.empty-conversation p {
  margin: 0;
  font-size: 14px;
}

/* Scrollbar Styling */
.canvasContent::-webkit-scrollbar {
  width: 8px;
}

.canvasContent::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.canvasContent::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.canvasContent::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Invoice Widget */
[class^='_invoice-wrapper-footer'] {
  position: relative !important;
}

.canvasContent [class*='invoiceTable'] {
  padding: 16px !important;
}

.canvasContent table {
  width: 100% !important;
  table-layout: fixed !important;
}

.canvasContent table th:first-child,
.canvasContent table td:first-child {
  width: 30%;
}

.canvasContent table th:nth-child(2),
.canvasContent table td:nth-child(2) {
  width: 22%;
}

/* Override MDS "td div { width: inherit !important }" which causes percentage
   widths to compound (30% of 30% = 9% instead of 30% of table).
   Scoped to first two columns (Product/Service, Description) only to avoid
   stretching the Quantity/Rate/Amount input field heights. */
.canvasContent table td:first-child div,
.canvasContent table td:nth-child(2) div {
  width: 100% !important;
}

.canvasContent table td:first-child textarea,
.canvasContent table td:nth-child(2) textarea {
  width: 100% !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
}

/* Keep Quantity/Rate/Amount input fields compact */
.canvasContent table td:nth-child(n + 3) input {
  height: 36px !important;
  box-sizing: border-box !important;
}

.demoBanner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  flex-shrink: 0;
}

.demoBannerSignup {
  background: #003e31;
}

.demoBannerRecommend {
  background: #003e31;
}

.demoBannerButton {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.demoBannerSignupButton {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.demoBannerSignupButton:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.demoBannerRecommendButton {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.demoBannerRecommendButton:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .demoBanner {
    padding: 8px 12px;
    gap: 8px;
  }

  .demoBannerButton {
    padding: 6px 14px;
    font-size: 13px;
  }
}

/* Container for signup widget with checkout card side by side */
.invoiceGeneratorIframe {
  width: 100%;
  min-height: 900px;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
}

/* Inside canvas (desktop side-panel or mobile modal): iframe fills available
   space so only its internal content scrolls -- no double scrollbar. */
.canvasContent .invoiceGeneratorIframe {
  min-height: 0;
  min-height: initial;
  height: 100%;
  flex: 1 1;
  border-radius: 0;
}

.signupWithCheckoutContainer {
  display: flex;
  gap: 24px;
  width: 100%;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Center content when signup widget is not showing */
.signupWithCheckoutContainer.centerContent {
  justify-content: center;
}

/* Make checkout card wider when alone (no signup widget) */
.signupWithCheckoutContainer.centerContent .checkoutCardSection {
  max-width: min(800px, 80%);
  min-width: 100%;
}

/* Checkout card section - left side */
/* No border/padding here since CheckoutCard has its own styling */
.checkoutCardSection {
  flex: 0 0 auto;
  min-width: 400px;
  max-width: 40%;
}

/* Signup widget section - right side */
.signupWidgetSection {
  flex: 1 1;
  min-width: 40%;
  background: white;
}

/* Responsive layout for smaller screens */
@media (max-width: 1024px) {
  .signupWithCheckoutContainer {
    flex-direction: column;
  }

  .checkoutCardSection {
    min-width: auto;
  }

  .checkoutCardSection,
  .signupWidgetSection {
    max-width: 100%;
    width: 100%;
    padding: 0;
  }
}

/* CheckoutCard Component Styles */

.checkoutCard {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  margin: 0 auto;
  padding: 24px 32px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
}

/* Header Section */
.checkoutCardHeader {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

/* Checkout Terms Section */
.checkoutTerms {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
  padding: 0;
}

.termItem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #374151;
}

.checkIcon {
  color: #2ca01c;
  flex-shrink: 0;
}

.checkoutCardTitle {
  font-size: 18px;
  font-weight: 600;
  color: #202124;
  margin: 0 0 12px 0;
}

.savingsText {
  font-size: 13px;
  font-weight: 400;
  color: #2ca01c;
  margin: 0;
  margin-top: 2px;
}

/* Plan Section */
.planSection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 20px;
}

.planName {
  flex: 1 1;
}

.planText {
  font-size: 18px;
  font-weight: 600;
  color: #202124;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
}

.planPricing {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.planAmount {
  display: flex;
  align-items: center;
  gap: 8px;
}

.originalPrice {
  font-size: 15px;
  color: #80868b;
  text-decoration: line-through;
  font-weight: 400;
}

.discountedPrice {
  font-size: 18px;
  font-weight: 600;
  color: #202124;
}

.employeePrice {
  font-size: 11px;
  color: #202124;
  margin-top: 0;
  text-align: right;
  align-self: flex-end;
  font-weight: 400;
}

/* Addon Section */
.addonSection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 20px;
}

.addonHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.addonHeader > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.addonTitle {
  font-size: 18px;
  font-weight: 400;
  color: #202124;
}

.infoIcon {
  font-size: 16px;
  color: #5f6368;
  cursor: help;
}

.addonDetails {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.addonDescription {
  font-size: 14px;
  color: #5f6368;
}

.noThanksButton {
  background: none;
  border: none;
  color: #0077c5;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
}

.noThanksButton:hover {
  text-decoration: underline;
}

.addonPricingWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.addonPricing {
  text-align: right;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Total Section */
.totalSection {
  padding: 0 0 16px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #e5e5e5;
}

.totalHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.totalTitle {
  font-size: 18px;
  font-weight: 600;
  color: #202124;
  margin: 0;
}

.discountText {
  font-size: 13px;
  font-weight: 400;
  color: #2ca01c;
  margin: 0;
}

.totalPricing {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.totalAmount {
  display: flex;
  align-items: center;
  gap: 8px;
}

.totalAmount .originalPrice {
  font-size: 18px;
}

.totalAmount .discountedPrice {
  font-size: 22px;
  font-weight: 600;
}

.taxNote {
  font-size: 12px;
  color: #5f6368;
  font-style: normal;
  margin-top: 0;
}

/* Features Section (now used for plans list) */
.featuresSection {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin-bottom: 20px;
}

.divider {
  height: 1px;
  background: #e5e5e5;
  margin: 12px 0;
}

.planRow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-gap: 3px 12px;
  gap: 3px 12px;
  padding: 8px 0;
  align-items: center;
}

.planRow .planName {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
}

.planRow .planPricing {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.planRow .employeePrice {
  grid-column: 2;
  grid-row: 2;
}

.feature {
  display: flex;
  align-items: center;
  gap: 6px;
}

.checkIcon {
  color: #2ca01c;
  font-size: 16px;
  font-weight: 700;
}

.featureText {
  font-size: 14px;
  color: #5f6368;
}

/* Benefits Section */
.benefitsSection {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  margin-bottom: 16px;
}

.benefitItem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #5f6368;
}

.benefitItem .checkIcon {
  color: #2ca01c;
  flex-shrink: 0;
}

/* Footer with Sign Up Button */
.checkoutCardFooter {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.checkoutCardFooter .primaryGreenButton {
  border-radius: 4px;
  min-width: 280px;
  height: 44px;
  padding: 10px 28px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .checkoutCard {
    padding: 20px;
    max-width: 100%;
  }

  .checkoutCardTitle {
    font-size: 22px;
  }

  .savingsText {
    font-size: 15px;
  }

  .planSection {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .planPricing {
    align-items: flex-start;
    width: 100%;
  }

  .addonSection {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .addonPricingWrapper {
    align-items: flex-start;
    width: 100%;
  }

  .addonPricing {
    align-items: flex-start;
  }

  .addonDetails {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .totalHeader {
    flex-direction: column;
    gap: 12px;
  }

  .totalPricing {
    align-items: flex-start;
    width: 100%;
  }

  .featuresSection {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
  }

  .benefitsSection {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .checkoutCard {
    padding: 16px;
  }

  .checkoutCardTitle {
    font-size: 20px;
  }

  .totalTitle {
    font-size: 18px;
  }

  .originalPrice,
  .discountedPrice {
    font-size: 16px;
  }

  .totalAmount .originalPrice,
  .totalAmount .discountedPrice {
    font-size: 18px;
  }
}

/* ChatContainer - Unified styles for both Initial and Chat modes */

.chatContainer {
  background: #ffffff;
  border-radius: 32px;
  padding: 5px 15px;
  margin: 10px 15px;
  border: 2px solid #e2e9ed;
  box-shadow: none;
  position: relative;
}

/* Disabled state (driven by the `disabled` prop): the field stays visible but
   reads as inert — lighter border, greyed placeholder/icons, non-interactive
   plus + send buttons. */
.chatContainer.chatInputDisabled {
  border-color: #eceef1;
  cursor: not-allowed;
}

.chatContainer.chatInputDisabled .chatInput {
  background: transparent;
  color: #9aa0a6;
  cursor: not-allowed;
}

.chatContainer.chatInputDisabled .chatInput::-moz-placeholder {
  /* Keep the placeholder visible, just dimmed (matches the disabled mock). */
  color: #b0b3b8;
  opacity: 1;
}

.chatContainer.chatInputDisabled .chatInput::placeholder {
  /* Keep the placeholder visible, just dimmed (matches the disabled mock). */
  color: #b0b3b8;
  opacity: 1;
}

.chatContainer.chatInputDisabled .chatButton {
  color: #b0b3b8;
  cursor: not-allowed;
  opacity: 0.5;
}

.chatContainer.chatInputDisabled .mfdPlusButton {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

/* Disabled state — white background, no placeholder, non-interactive */
.chatContainer.mfdDisabled {
  background: #ffffff;
  cursor: not-allowed;
}

.chatContainer.mfdDisabled::before {
  background: #dadce0;
}

.chatContainer.mfdDisabled .chatInput {
  background: transparent;
  color: #9aa0a6;
  cursor: not-allowed;

  &::-moz-placeholder {
    color: transparent;
  }

  &::placeholder {
    color: transparent;
  }
}

.chatContainer.mfdDisabled .chatButton {
  color: #9aa0a6;
  cursor: not-allowed;
  opacity: 0.5;
}

.chatContainer.mfdDisabled .mfdPlusButton {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

.chatFileError {
  font-size: 12px;
  color: #c5221f;
  margin: 4px 0 0 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.chatInputRow {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  min-height: 48px;
}

/* Unified Input Styles */
.chatInput {
  flex: 1 1;

  /* Reset default input styles */
  margin: 0;
  padding: 0;
  padding-left: 12px;
  border: none;
  box-shadow: none;
  background: transparent;
  outline: none;

  /* Text styling */
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #393a3d;
  font-family: inherit;

  /* Size and layout */
  width: 100%;
  min-height: 24px;
  max-height: 200px;
  overflow-y: auto;
  resize: none;

  &::-moz-placeholder {
    color: #6b6c72;
  }

  &::placeholder {
    color: #6b6c72;
  }

  &:focus,
  &:active,
  &:hover {
    border: none;
    outline: none;
    box-shadow: none;
  }
}

/* Unified Button Styles */
.chatButton {
  /* Size constraints */
  width: 48px;
  height: 48px;
  min-width: 48px;
  max-width: 48px;
  flex-shrink: 0;

  /* Reset defaults that may come from shell */
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  /* Visual styling */
  color: #5f6368;
  font-size: 16px;
  line-height: 1;

  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Interaction */
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Positioning */
  position: relative;
  z-index: 10;

  &.active {
    color: #1a73e8;
    cursor: pointer;
    &:hover {
      border-radius: 50%;
      background: #e8eef6;
    }
  }

  &.inactive {
    background: transparent;
    color: #5f6368;
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* Ensure SVG icons inherit button size (excludes MFD plus which has its own size) */
  &:not(.mfdPlusButton) svg {
    width: 24px;
    height: 24px;
    display: block;
  }
}

/* MFD Plus Button */
.mfdPlusButton {
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  border-radius: 50%;
  background: #f4f5f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Upload Options Dropdown */
.chatUploadOptions {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  background: white;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 160px;
  width: -moz-max-content;
  width: max-content;
}

.chatUploadOptions.mfd {
  background: #f0f4f6;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 12px;
  min-width: 240px;
}

.chatUploadOption {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: #393a3d;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.chatUploadOptions.mfd .chatUploadOption {
  gap: 10px;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  background: transparent;
}

.chatUploadOptions.mfd .chatUploadOption:hover {
  background: transparent;
  opacity: 0.8;
}

.chatUploadOption:hover {
  background: #f8f9fa;
}

.chatUploadOption:first-child {
  border-radius: 12px 12px 0 0;
}

.chatUploadOption:last-child {
  border-radius: 0 0 12px 12px;
}

/* When canvas is open, chat input should only span the left panel */
.chatContainer.chatMode.chatInputContainer.canvasOpen {
  position: sticky;
  bottom: 0;
  width: 90%;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Mobile - 768px and below */
@media (max-width: 768px) {
  .chatContainer {
    margin: 8px 12px;
    padding: 4px 12px;
  }

  .chatContainer.chatMode {
    padding: 10px 14px;
  }

  .chatInputWrapper {
    padding: 0;
  }

  /* Prevent iOS zoom on input focus - must be 16px or larger */
  .chatInput {
    font-size: 16px;
  }

  .chatButton {
    width: 42px;
    height: 42px;
    min-width: 42px;
    max-width: 42px;
  }

  .chatButton svg {
    width: 22px;
    height: 22px;
  }

  .chatUploadOptions {
    min-width: 140px;
  }

  .chatUploadOption {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* Small Mobile - 480px and below */
@media (max-width: 480px) {
  .chatContainer {
    margin: 6px 8px;
    padding: 3px 10px;
    border-radius: 24px;
  }

  .chatContainer.chatMode {
    padding: 8px 12px;
    width: 95%;
  }

  .chatInputRow {
    gap: 8px;
  }

  .chatInput {
    font-size: 16px; /* Keep 16px to prevent iOS zoom */
    line-height: 22px;
    padding-left: 8px;
    overflow-y: auto;
  }

  .chatButton {
    width: 38px;
    height: 38px;
    min-width: 38px;
    max-width: 38px;
  }

  .chatButton svg {
    width: 20px;
    height: 20px;
  }

  .chatUploadOptions {
    min-width: 130px;
  }

  .chatUploadOption {
    padding: 10px 12px;
    font-size: 12px;
    gap: 6px;
  }
}

/* FilePreview Component Styles - Inline Design */

.filePreviewContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.filePreviewItem {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 14px;
  color: #202124;
  max-width: 200px;
  animation: slideIn 0.2s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.filePreviewInfo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
  min-width: 0;
}

.fileIcon {
  color: #34a853;
  flex-shrink: 0;
}

.filePreviewName {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
}

.filePreviewRemove {
  background: none;
  border: none;
  color: #5f6368;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.filePreviewRemove:hover {
  background: #fce8e6;
  color: #d93025;
}

/* Responsive Design */
@media (max-width: 480px) {
  .filePreviewItem {
    max-width: 150px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .fileIcon {
    width: 16px;
    height: 16px;
  }
}

/* Restart Zero State - shown when user clicks "Ask us anything" to restart chat */

.restartZeroStateContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 1 1;
  min-height: 0;
}

.restartZeroStateContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  max-width: 1200px;
  width: 100%;
}

.restartZeroStateSubtitle {
  font-size: 28px;
  font-weight: 400;
  color: #202124;
  line-height: 1.3;
  margin: 12px 0 24px 0;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
}

/* Prompt section - matches InitialMode styling */
.restartZeroStateContent .promptSection {
  text-align: center;
  width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .restartZeroStateContent {
    padding: 40px 16px;
  }

  .restartZeroStateSubtitle {
    font-size: 24px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .restartZeroStateContent {
    padding: 32px 12px;
  }

  .restartZeroStateSubtitle {
    font-size: 20px;
    margin-bottom: 16px;
  }
}

/* SalesConnectForm styles (inline form shown before LivePerson handoff). */

.salesConnectForm {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #d5dee3;
  border-radius: 8px;
  background: #ffffff;
  width: min(520px, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ── Form fields ────────────────────────────────────── */

.salesConnectFormRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.salesConnectFormLabel {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6b6c72;
}

.salesConnectFormInput {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #babec5;
  border-radius: 4px;
  font-size: 14px;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  color: #393a3d;
  background: #ffffff;
}

.salesConnectFormInput:focus {
  outline: none;
  border-color: #0077c5;
  box-shadow: 0 0 0 1px #0077c5;
}

/* ── Error ──────────────────────────────────────────── */

.salesConnectFormError {
  margin: 4px 0 12px 0;
  color: #d52b1e;
  font-size: 13px;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
}

/* ── CTA buttons ────────────────────────────────────── */

.salesConnectFormActions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Shared base for both buttons */
.salesConnectFormButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 40px;
  padding: 8px 24px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.salesConnectFormButton:focus {
  outline: 2px solid #0077c5;
  outline-offset: 2px;
}

/* Primary — Connect (filled) */
.salesConnectFormButtonSubmit {
  background: #003e31;
  color: #ffffff;
  border: 1px solid #003e31;
}

.salesConnectFormButtonSubmit:hover {
  background: #00322a;
  border-color: #00322a;
}

.salesConnectFormButtonSubmit:active {
  background: #002820;
  transform: translateY(1px);
}

/* Secondary — Cancel (outlined) */
.salesConnectFormButtonCancel {
  background: #ffffff;
  color: #393a3d;
  border: 1px solid #babec5;
}

.salesConnectFormButtonCancel:hover {
  background: #f5f5f5;
  border-color: #9ea3ab;
}

.salesConnectFormButtonCancel:active {
  background: #eeeeee;
  transform: translateY(1px);
}

/* ── MFD theme override for Connect button ──────────── */

/* Reuse the mfdActionButton class defined in ChatMode.css; this selector
   ensures the button is styled consistently when rendered inside SalesConnectForm. */
.salesConnectForm .mfdActionButton {
  min-width: 120px;
  height: 40px;
  padding: 8px 24px;
}

/* ── Mobile responsive ──────────────────────────────── */

@media (max-width: 480px) {
  .salesConnectForm {
    padding: 12px;
  }

  /* 16px prevents iOS Safari auto-zoom on input focus */
  .salesConnectFormInput {
    font-size: 16px;
  }

  .salesConnectFormActions {
    flex-direction: column;
    gap: 8px;
  }

  .salesConnectFormButton {
    width: 100%;
    min-width: 0;
    min-width: initial;
    height: 40px;
  }

  .salesConnectForm .mfdActionButton {
    min-width: 120px;
    height: 40px;
    padding: 8px 24px;
    width: 100%;
  }
}

/* Reset body/html margins to prevent browser defaults from affecting layout 
and ensure full width/height of the widget */
body,
html {
  margin: 0;
  padding: 0;
}

/* Base Widget Container - Minimal Normalization Only */
.productSpecialistChatWidget {
  width: 100%;
  height: 100%;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;

  /* Only normalize box-sizing and font rendering */
  box-sizing: border-box;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.productSpecialistChatWidget *,
.productSpecialistChatWidget *::before,
.productSpecialistChatWidget *::after {
  box-sizing: inherit;
}

.productSpecialistChatWidget button {
  font-family: inherit;
  cursor: pointer;
}

.productSpecialistChatWidget input,
.productSpecialistChatWidget textarea {
  font-family: inherit;
}

/* ================================================================
   Common Markdown Styles for Product Specialist Chat Widget
=================================================================== */

/* Table Styles */
.markdown-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  font-size: 16px;
  margin: 2px 0;
}

.markdown-table-header {
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #333333;
}

.markdown-table-cell {
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  color: #333333;
}

/* Heading Styles */
.markdown-h1 {
  font-size: 24px;
  font-weight: 700;
  color: #333333;
  margin: 4px 0 2px 0;
  line-height: 1.2;
}

.markdown-h2 {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  margin: 4px 0 2px 0;
  line-height: 1.2;
}

.markdown-h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin: 2px 0 2px 0;
  line-height: 1.2;
}

/* Override H3 color for normalized content */
.normalized-content .markdown-h3 {
  color: #333333;
}

.markdown-h4 {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin: 2px 0 2px 0;
  line-height: 1.2;
}

.markdown-h5 {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  margin: 2px 0 2px 0;
  line-height: 1.2;
}

.markdown-h6 {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  margin: 2px 0 2px 0;
  line-height: 1.2;
}

/* Text Content */
.markdown-paragraph {
  color: #333333;
  margin: -10px 0 4px 0;
  line-height: 1.5;
  font-size: 16px;
}

.markdown-strong {
  font-weight: 600;
  color: #333333;
}

/* Ensure headers maintain their color even with strong/bold content */
.markdown-h1 .markdown-strong,
.markdown-h1 strong,
.markdown-h2 .markdown-strong,
.markdown-h2 strong,
.markdown-h3 .markdown-strong,
.markdown-h3 strong {
  color: inherit;
}

.markdown-em {
  font-style: italic;
  color: #333333;
}

/* Reduce gap when a list directly follows a heading */
.markdown-p + .markdown-ul,
.markdown-h1 + .markdown-ol,
.markdown-h1 + .markdown-ul,
.markdown-h1 + .markdown-ol,
.markdown-h2 + .markdown-ul,
.markdown-h2 + .markdown-ol,
.markdown-h3 + .markdown-ul,
.markdown-h3 + .markdown-ol,
.markdown-h4 + .markdown-ul,
.markdown-h4 + .markdown-ol {
  margin-top: -25px;
}

/* List Styles */
.markdown-ul {
  list-style-type: disc;
  margin: -33px 0 0 16px;
  padding-left: 10px;
  color: #333333;
  line-height: 0.7;
}

.markdown-ol {
  list-style-type: decimal;
  margin: -33px 0 0 16px;
  padding-left: 0;
  color: #333333;
  line-height: 0.7;
}

.markdown-li {
  margin-bottom: 2px;
  padding-left: 4px;
  color: #333333;
  line-height: 1.3;
  font-size: 16px;
  white-space: normal;
}

/* Collapse paragraph margin inside list items (loose lists) so
   the <p> margin doesn't stack on top of the <li> margin */
.markdown-li > .markdown-paragraph {
  margin-bottom: 0;
}

/* Nested list items should be tighter */
.markdown-li .markdown-li {
  margin-bottom: 4px;
}

/* Nested list spacing — keep close to parent bullet text */
.markdown-li > .markdown-ul,
.markdown-li > .markdown-ol {
  margin-top: 4px;
  margin-bottom: 0px;
}

@media (max-width: 480px) {
  .markdown-li {
    margin-bottom: 2px;
    padding-left: 4px;
    color: #333333;
    font-size: 16px;
    white-space: normal;
  }

  /* Collapse paragraph margin inside list items (loose lists) so
     the <p> margin doesn't stack on top of the <li> margin */
  .markdown-li > .markdown-paragraph {
    margin-bottom: 0;
  }
}
/* Code Styles */
.markdown-code-inline {
  background-color: #f3f4f6;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  color: #333333;
  line-height: 1.3;
}

.markdown-code-block {
  font-size: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  color: #333333;
  line-height: 1.3;
}

.markdown-pre {
  /* background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px; */
  overflow-x: auto;
  font-size: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  color: #333333;
  margin: -14px 0;
  line-height: 1.3;
}

/* Blockquote Styles */
.markdown-blockquote {
  border-left: 4px solid #3b82f6;
  padding: 2px 0 2px 16px;
  margin: 2px 0;
  background-color: #eff6ff;
  color: #333333;
  font-style: italic;
  line-height: 1.3;
}

/* Horizontal Rule */
.markdown-hr {
  border: none;
  border-top: 1px solid #d1d5db;
  margin: 2px 0;
}

/* Link Styles */
.markdown-link {
  color: #0097e6;
  text-decoration: underline;
}

.markdown-link:hover {
  color: #007bbd;
}

/* ===================================================================
   Context-Specific Overrides
   =================================================================== */

/* Bot Message Styles */
.bot-message .markdown-h2 {
  color: #333333;
  margin-top: 8px;
}

.bot-message .markdown-h3 {
  color: #333333;
  margin-top: 6px;
}

/* User Message Styles */
.user-message .markdown-paragraph,
.user-message .markdown-li,
.user-message .markdown-strong,
.user-message .markdown-em {
  color: #333333;
}

.user-message .markdown-strong {
  font-weight: 700;
}

.user-message .markdown-code-inline {
  background-color: rgba(0, 0, 0, 0.05);
  color: #333333;
}

.user-message .markdown-link {
  color: #0097e6;
}

.user-message .markdown-link:hover {
  color: #007bbd;
}

/* File Content Styles */
.file-content .markdown-pre {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 12px;
  max-height: 300px;
  overflow-y: auto;
}

/* Tighter nested list spacing */
/* .markdown-ul .markdown-ul,
.markdown-ol .markdown-ol,
.markdown-ul .markdown-ol,
.markdown-ol .markdown-ul {
  margin-top: 2px;
  margin-bottom: 2px;
} */

/* Mermaid Chart Styles */
.mermaid-chart {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  text-align: center;
  min-width: 500px;
  min-height: 400px;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.mermaid-chart img {
  min-width: 450px;
  min-height: 350px;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.mermaid-loading {
  color: #6b7280;
  font-style: italic;
  padding: 16px;
  text-align: center;
}

.mermaid-error {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 12px;
  margin: 8px 0;
}


/*# sourceMappingURL=5587.e3d1081e01576575.css.map*/