/*!
 * 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.
 */
/* Initial Mode Styles  */

.initialModeContainer {
  display: flex;
  flex-direction: column;
  background-color: #000000;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  color: #202124;
  justify-content: center;
  align-items: center;
  padding: 30px 24px;
  min-height: 100vh;
  z-index: 100;
}

/* Gradient background for non-homepage URLs */
.initialModeContainer.gradientBackground {
  background-image: radial-gradient(
      /* Center the circle horizontally, and place the glow source at the bottom edge */
        circle at 50% 100%,
      rgba(0, 255, 255, 0.25) 0%,
      rgba(0, 150, 150, 0.15) 20%,
      rgba(0, 70, 70, 0.1) 40%,
      transparent 70%
    ),
    /* Layer 2: The Linear Green/Teal Wash (Creates the uniform color at the bottom) */
      linear-gradient(to bottom, transparent 60%, #002828 85%, #004c4c 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Black-only background for homepage URLs with gradient border at bottom */
.initialModeContainer.blackBackground {
  background-image: none;
  position: relative;
}

.initialModeContainer.blackBackground::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    95.53deg,
    #5bef76 3.43%,
    #38e8f6 31.32%,
    #38e8f6 67.39%,
    #236cff 91.79%
  );
  z-index: 100;
}

.initialModeContainer {
  /* Panel that contains input and prompt suggestions */
  .initialPanel {
    width: 100%;
    max-width: 1200px;
    background: transparent;
    padding: 0;
    margin: 0 auto;

    .promptSection {
      text-align: center;
      margin-top: 16px;

      .promptHeader {
        font-size: 26px;
        font-weight: 600;
        color: #393a3d;
        margin-bottom: 24px;
        display: none;
      }
    }

    .chatContainer {
      margin: 0 0 12px 0;
    }
  }
}

/* Adjust prompt chips spacing inside panel */
.initialPanel .promptSection {
  margin-bottom: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .initialModeContainer {
    padding: 32px 16px;

    .initialPanel {
      max-width: 100%;
    }
  }
}

@media (max-width: 480px) {
  .initialModeContainer {
    padding: 24px 20px;

    .initialPanel {
      .chatContainer {
        margin: 0;
        height: auto;
      }
    }
  }
}

.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;
  }
}

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

.chatContainer {
  background: #ffffff;
  border-radius: 25px;
  padding: 5px 15px;
  margin: 10px 15px;
  border: none;
  box-shadow: 0px 2px 2px 0px #0000000f;
  position: relative;
}

/* Gradient border effect using pseudo-element */
.chatContainer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 25px;
  padding: 2px; /* This controls border thickness */
  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;
}

.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;
}

/* 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: #202124;
  font-family: inherit;

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

  &::-moz-placeholder {
    color: #5f6368;
  }

  &::placeholder {
    color: #5f6368;
  }

  &: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 */
  & svg {
    width: 24px;
    height: 24px;
    display: block;
  }
}

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

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

.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: 20px;
  }

  .chatContainer::before {
    border-radius: 20px;
  }

  .chatContainer.chatMode {
    padding: 8px 12px;
  }

  .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;
  }
}

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

.tablePatternHeader {
  padding: 20px 24px 16px;
  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: 16px 24px;
  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: 16px 24px;
  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: #5f6368;
  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 green buttons */
.primaryGreenButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px;
  height: 48px;
  padding: 12px 32px;
  background: #2c9e3f;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.primaryGreenButton:hover {
  background: #258b36;
  box-shadow: 0 4px 12px rgba(44, 158, 63, 0.3);
}

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

.primaryGreenButton:focus {
  outline: 2px solid #2c9e3f;
  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: 10px;
  min-width: 240px;
  height: 48px;
  padding: 12px 32px;
  background: #2c9e3f;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.salesConnectButton:hover {
  background: #258b36;
  box-shadow: 0 4px 12px rgba(44, 158, 63, 0.3);
}

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

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

.salesConnectButton svg {
  flex-shrink: 0;
}

/* Try Demo Button (White pill with border) */
.tryDemoButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 160px;
  height: 48px;
  padding: 12px 32px;
  background: #ffffff;
  color: #2c9e3f;
  border: 2px solid #2c9e3f;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}

.tryDemoButton:hover {
  background: #f5f5f5;
  border-color: #258b36;
  color: #258b36;
  box-shadow: 0 4px 12px rgba(44, 158, 63, 0.2);
}

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

.tryDemoButton:focus {
  outline: 2px solid #2c9e3f;
  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;
  }
}

/**
 * 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: #ffffff;
  color: #0077c5;
  border: 1px solid #d5dee3;
  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: #0363ad;
  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 — green success banner */
.secureFormSubmittedBanner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f1f8e9;
  border: 1px solid #c8e6c9;
  border-radius: 12px;
  max-width: 400px;
}

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

.secureFormSubmittedText {
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #2c9e3f;
  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;
  }
}

.followUpPillsContainer {
  padding: 12px 0;
  display: flex;
  justify-content: flex-end;
}

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

.followUpPill {
  background: #ffffff;
  border: 1.5px solid #0077c5;
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #0077c5;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  outline: none;
  white-space: nowrap;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
}

.followUpPill:hover {
  background: #e8f2fb;
  border-color: #0062a3;
  color: #0062a3;
  box-shadow: 0 2px 8px rgba(0, 119, 197, 0.15);
}

.followUpPill:active {
  background: #d0e8f7;
  border-color: #0062a3;
  box-shadow: none;
}

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

  .followUpPill {
    font-size: 13px;
    padding: 6px 14px;
    min-height: 34px;
    white-space: normal;
    text-align: center;
  }
}

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

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

.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: 1px solid #6b7280;
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #393a3d;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, box-shadow 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: #393a3d;
  box-shadow: 0 0 0 1px #393a3d;
}

.multiSelectPill.selected {
  background: #ffffff;
  border-color: #393a3d;
  box-shadow: 0 0 0 1px #393a3d;
  font-weight: 600;
}

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

.multiSelectSubmitBtn {
  display: block;
  width: 100%;
  padding: 12px 24px;
  background: #0d7d2c;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  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: #0a6623;
}

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

.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;
  }
}

.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: #202124;
  justify-content: flex-start;
}

.chatInputContainer {
  width: 66%;
  margin: 0 auto;
}

/* Single white chat panel container */
.chatPanel {
  width: 100%;
  /* max-width: 1600px; */
  margin: 0 auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
/* Chat Mode header styles */
.chatHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e8eaed;
  background: #ffffff;
  margin-right: 20px;
  margin-left: 20px;
}

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

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

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

.chatHeaderIcon:hover {
  color: #1a73e8;
}

.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: #202124;
  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: #202124;
  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;
  display: flex;
  overflow: hidden;
  width: 66%;
  margin: 0 auto;
  position: relative;
}

.leftRailContainer {
  height: 100%;
  overflow: auto;
}

.chatMessagesContainer {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 24px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  min-height: 200px;
  min-width: 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: #5f6368;
}

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

.canvasContainer {
  flex: auto;
  border-left: 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, adjust chat content area width */
.chatPanel.canvasOpen .chatContentArea {
  width: 95%;
}

/* 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%;
  max-width: 400px;
}

/* Message bubble styles */
.messageBubble {
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 18px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.userMessage {
  align-self: flex-end;
  background-color: #1a73e8;
  color: white;
  border-bottom-right-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
}

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

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

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

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

/* File attachment chip in history user messages */
.fileAttachmentChip {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  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: white;
  color: #202124;
  width: 100%;
}

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

.tryDemoButton {
  margin-right: 8px;
  &:hover {
    background-color: #0077c51a;
  }
}

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

/* Minimized Chat Container (holds reopen button and close icon) */
.minimizedChatContainer {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 1000;
  gap: 5px;
}

/* Reopen Chat Button (shown when minimized) */
.reopenChatButton {
  position: relative;
  /* margin-right: -21px; */
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: #ffffff;
  color: #202124;
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 119, 197, 0.4);
  transition: all 0.3s ease;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  animation: fadeIn 2s ease;
  z-index: 1000;
}

/* Gradient border effect using pseudo-element */
.reopenChatButton::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  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;
}

.reopenChatButton span {
  width: 85px;
}

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

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

/* Black pill variant for reopen chat button on specific pages */
.reopenChatButton.blackPillVariant {
  background: #000000;
  color: #ffffff;
}

.reopenChatButton.blackPillVariant:hover {
  background: #1a1a1a;
}

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

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

/* Ask Us Anything Button (shown after chat is closed) */
.askUsAnythingContainer {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.askUsAnythingButton {
  align-items: center;
  flex-direction: row;
  border-radius: 50px;
  position: relative;
  display: flex;
  /* flex-direction: column; */
  /* align-items: center; */
  justify-content: center;
  width: 190px;
  height: 50px;
  padding: 20px;
  background: #ffffff;
  color: #202124;
  border: none;
  /* border-radius: 50%; */
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 119, 197, 0.4);
  transition: all 0.3s ease;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  animation: fadeIn 2s ease;
  gap: 8px;
}

/* Gradient border effect for Ask Us Anything button */
.askUsAnythingButton::before {
  border-radius: 50px;
  content: '';
  position: absolute;
  inset: 0;
  /* border-radius: 50%; */
  padding: 3px;
  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;
}

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

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

/* Black pill variant for ask us anything button on specific pages */
.askUsAnythingButton.blackPillVariant {
  background: #000000;
  color: #ffffff;
}

.askUsAnythingButton.blackPillVariant:hover {
  background: #1a1a1a;
}

.askUsAnythingIcon {
  width: 36px;
  height: 36px;
  z-index: 1;
}

.askUsAnythingText {
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  z-index: 1;
}

.reopenChatButton img {
  width: 24px;
  height: 24px;
}

@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) {
  .chatContentArea {
    width: 80%;
    max-width: 900px;
  }

  .chatInputContainer {
    width: 80%;
    max-width: 900px;
  }

  .chatPanel.canvasOpen .chatContentArea {
    width: 98%;
  }

  .chatPanel.canvasOpen .chatMessagesContainer {
    flex: 0 0 40%;
    max-width: 450px;
  }
}

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

  .chatPanel {
    border-radius: 16px 16px 0 0;
    height: 100vh;
  }

  .chatHeader {
    margin-right: 12px;
    margin-left: 12px;
    padding: 12px 0;
  }

  .chatHeaderLeft {
    margin-top: 10px;
    margin-left: 10px;
  }

  .chatContentArea {
    width: 95%;
    max-width: none;
  }

  .chatInputContainer {
    width: 95%;
    max-width: none;
  }

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

  .messageBubble {
    font-size: 16px;
  }

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

  .chatPanel.canvasOpen .chatMessagesContainer {
    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;
  }

  .askUsAnythingButton {
    align-items: center;
    flex-direction: row;
    border-radius: 50px;
    width: 160px;
    height: 50px;
    padding: 15px;
    font-size: 14px;
  }

  .askUsAnythingButton::before {
    border-radius: 50px;
  }

  .askUsAnythingButton.blackPillVariant {
    background: #000000;
    color: #ffffff;
  }

  .askUsAnythingButton.blackPillVariant:hover {
    background: #1a1a1a;
  }

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

  .askUsAnythingText {
    font-size: 12px;
  }
}

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

  .chatContentArea {
    width: 100%;
  }

  .chatInputContainer {
    width: 97%;
    margin: 0 auto;
    height: auto;
  }

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

  .messageBubble {
    font-size: 15px;
    padding: 10px 14px;
  }

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

/*
  Reopen chat button: class-based responsive (useIsMobileView)
  so styling follows parent viewport when widget is in an iframe.
*/
.mobileView .minimizedChatContainer {
  width: 100%;
  bottom: -5px;
}

.mobileView .reopenChatButton {
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 15px 15px 0 0;
  width: 100%;
  height: 65px;
}

.mobileView .reopenChatButton::before {
  width: 100%;
  border-radius: 15px 15px 0 0;
}

.mobileView .reopenChatButton.blackPillVariant {
  background: #000000;
  color: #ffffff;
}

.mobileView .reopenChatButton.blackPillVariant:hover {
  background: #1a1a1a;
}

.mobileView .closeChatButton {
  width: 25px !important;
  height: 25px !important;
  margin-left: auto;
}

.smallMobileView .reopenChatButton img {
  width: 20px;
  height: 20px;
}

/* Canvas Component */
.canvasComponent {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-left: 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;
}

.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: linear-gradient(95.53deg, #0d7d2c 0%, #0ca750 100%);
}

.demoBannerRecommend {
  background: linear-gradient(95.53deg, #236cff 0%, #5dabff 100%);
}

.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: #ffffff;
  color: #0d7d2c;
  border: none;
}

.demoBannerSignupButton:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}

.demoBannerRecommendButton {
  background: #ffffff;
  color: #236cff;
  border: none;
}

.demoBannerRecommendButton:hover {
  background: #f0f0f0;
  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;
  }
}

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

.restartZeroStateLogo {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
}

.restartZeroStateSubtitle {
  font-size: 28px;
  font-weight: 400;
  color: #202124;
  line-height: 1.3;
  margin: 0 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;
  }

  .restartZeroStateLogo {
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
  }

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

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

  .restartZeroStateLogo {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
  }

  .restartZeroStateSubtitle {
    font-size: 20px;
    margin-bottom: 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: 10px;
  min-width: 160px;
  height: 48px;
  padding: 12px 32px;
  background: #ffffff;
  color: #2c9e3f;
  border: 2px solid #2c9e3f;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  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: #f5f5f5;
  border-color: #258b36;
  color: #258b36;
  box-shadow: 0 4px 12px rgba(44, 158, 63, 0.2);
}

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

.disconnectFromSalesSpecialistButton:focus {
  outline: 2px solid #2c9e3f;
  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;
  color: #236cff;
  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;
}

/* 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 (green filled) */
.salesConnectFormButtonSubmit {
  background: #2ca01c;
  color: #ffffff;
  border: 1px solid #2ca01c;
}

.salesConnectFormButtonSubmit:hover {
  background: #258b36;
  border-color: #258b36;
}

.salesConnectFormButtonSubmit:active {
  background: #1e7a2e;
  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);
}

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

.postDemoAction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  animation: postDemoSlideIn 0.3s ease;
  font-family: 'Avenir Next forINTUIT', Avenir, Helvetica, Arial, sans-serif;
  background: transparent;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

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

.postDemoButton {
  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;
  pointer-events: auto;
}

.postDemoSignupButton {
  background: #0d7d2c;
  color: #ffffff;
  border: none;
}

.postDemoSignupButton:hover {
  background: #0a6623;
  transform: translateY(-1px);
}

.postDemoPill {
  background: #236cff;
  border: none;
  color: #ffffff;
  padding: 8px 18px;
}

.postDemoPill:hover {
  background: #1a5cd4;
  transform: translateY(-1px);
}

.postDemoDismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: #5f6368;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

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

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

  .postDemoButton {
    font-size: 13px;
    padding: 6px 16px;
  }
}

/* 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: 18px;
  margin: 2px 0;
}

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

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

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

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

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

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

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

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

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

/* Text Content */
.markdown-paragraph {
  color: #374151;
  margin: -10px 0 4px 0;
  line-height: 1.6;
  font-size: 18px;
}

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

/* 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: #374151;
}

/* 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: #374151;
  line-height: 0.7;
}

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

.markdown-li {
  margin-bottom: 2px;
  padding-left: 4px;
  color: #374151;
  line-height: 1.3;
  font-size: 18px;
  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: #374151;
    font-size: 18px;
    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: 18px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  color: #1f2937;
  line-height: 1.3;
}

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

.markdown-pre {
  /* background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px; */
  overflow-x: auto;
  font-size: 18px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  color: #1f2937;
  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: #374151;
  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: #2563eb;
  text-decoration: underline;
}

.markdown-link:hover {
  color: #1d4ed8;
}

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

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

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

/* User Message Styles (for dark backgrounds) */
.user-message .markdown-paragraph,
.user-message .markdown-li,
.user-message .markdown-strong,
.user-message .markdown-em {
  color: white;
}

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

.user-message .markdown-code-inline {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.user-message .markdown-link {
  color: #93c5fd;
}

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

/* 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=6335.01a4088e0907d826.css.map*/