/* Customer Explainer Document Styles */

/* Documentation References - Clickable citation links */
.documentation-reference {
  color: #2563eb; /* blue-600 */
  font-weight: 500;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* All links in customer explainer content - styled for clarity */
/* Need to override Tailwind prose styles with higher specificity */
.customer-explainer-content.prose a,
.prose.customer-explainer-content a {
  color: #60a5fa !important; /* blue-400 */
  text-decoration: underline !important;
  text-decoration-color: rgba(96, 165, 250, 0.5) !important;
  text-underline-offset: 2px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.customer-explainer-content.prose a:hover,
.prose.customer-explainer-content a:hover {
  color: #93c5fd !important; /* blue-300 */
  text-decoration-color: rgba(96, 165, 250, 1) !important;
}

/* Dispute points styling - better visual separation and hierarchy */
.customer-explainer-content.prose h3,
.prose.customer-explainer-content h3 {
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #f1f5f9 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* First dispute point doesn't need top border */
.customer-explainer-content.prose h3:first-of-type,
.prose.customer-explainer-content h3:first-of-type {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Estimate line references - smaller and grey */
.customer-explainer-content.prose em,
.prose.customer-explainer-content em {
  font-size: 0.8rem !important;
  color: #94a3b8 !important; /* slate-400 */
  font-style: normal !important;
  font-weight: 400 !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* Force consecutive em elements to stack tightly */
.customer-explainer-content.prose em + em,
.prose.customer-explainer-content em + em {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Wrapper paragraphs around em tags - remove spacing */
.customer-explainer-content.prose p:has(em),
.prose.customer-explainer-content p:has(em) {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* Add spacing after the last em (line reference) before content starts */
.customer-explainer-content.prose em:last-of-type,
.prose.customer-explainer-content em:last-of-type {
  margin-bottom: 0.75rem !important;
}

/* Ensure paragraphs after line references have proper spacing */
.customer-explainer-content.prose p:has(em) + p,
.prose.customer-explainer-content p:has(em) + p,
.customer-explainer-content.prose em + p,
.prose.customer-explainer-content em + p {
  margin-top: 0.75rem !important;
}

/* Better paragraph spacing in dispute sections */
.customer-explainer-content.prose p,
.prose.customer-explainer-content p {
  margin-bottom: 0.85rem !important;
}

/* Sources section styling */
.customer-explainer-content.prose p strong,
.prose.customer-explainer-content p strong {
  color: #cbd5e1 !important; /* slate-300 */
}

/* Default list styling - for "Your Rights" and "What Happens Next" sections (h2) */
/* These are top-level lists NOT within dispute points */
.customer-explainer-content.prose > ul,
.prose.customer-explainer-content > ul {
  margin-top: 0.75rem !important;
  margin-bottom: 1.5rem !important;
  padding-left: 1.5rem !important;
  list-style-type: none !important;
}

.customer-explainer-content.prose > ul li,
.prose.customer-explainer-content > ul li {
  margin-bottom: 0.75rem !important;
  padding-left: 1.25rem !important;
  position: relative !important;
  line-height: 1.6 !important;
}

.customer-explainer-content.prose > ul li::before,
.prose.customer-explainer-content > ul li::before {
  content: "•" !important;
  color: #60a5fa !important; /* blue-400 */
  font-weight: bold !important;
  position: absolute !important;
  left: 0 !important;
  font-size: 1.2em !important;
  line-height: 1.4 !important;
}

/* Sources lists within dispute sections (h3) - compact with no indentation */
.customer-explainer-content.prose h3 ~ ul,
.prose.customer-explainer-content h3 ~ ul {
  padding-left: 0 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
  margin-left: 0 !important;
  list-style-type: disc !important;
  list-style-position: inside !important;
}

.customer-explainer-content.prose h3 ~ ul li,
.prose.customer-explainer-content h3 ~ ul li {
  padding-left: 0 !important;
  margin-bottom: 0.5rem !important;
  margin-left: 0 !important;
  line-height: 1.5 !important;
  position: static !important;
}

.customer-explainer-content.prose h3 ~ ul li::before,
.prose.customer-explainer-content h3 ~ ul li::before {
  content: none !important;
  display: none !important;
}

/* Citation links to documents - styled for clarity */
.customer-explainer-content a[href*="/documents/"] {
  @apply inline-flex items-center;
}

/* Primary document container */
.customer-explainer-document {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 32px 80px -35px rgba(15, 23, 42, 0.95);
}

.customer-explainer-content {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: #e2e8f0;
}

.customer-explainer-content h1,
.customer-explainer-content h2,
.customer-explainer-content h3 {
  color: #f8fafc;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
}

.customer-explainer-content h2 {
  font-size: 1.35rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.1);
  padding-bottom: 0.35rem;
}

.customer-explainer-content p {
  margin-bottom: 1.15em;
}

.customer-explainer-content ul,
.customer-explainer-content ol {
  padding-left: 1.25em;
  margin-bottom: 1.15em;
}

.customer-explainer-content strong {
  color: #f1f5f9;
}

/* Chat interface specific styles */
[data-controller="customer-explainer-chat"] {
  /* Container styles if needed */
}

/* Loading indicator for chat */
.chat-loading {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 8px;
}

.chat-loading-dot {
  width: 8px;
  height: 8px;
  background-color: rgb(148, 163, 184); /* slate-400 */
  border-radius: 50%;
  animation: chat-loading-bounce 1.4s infinite ease-in-out both;
}

.chat-loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.chat-loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes chat-loading-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Print styles for customer explainer documents */
@media print {
  /* Page setup - increased top margin for all pages, especially for pages 2+ */
  @page {
    margin: 1in 0.75in 0.75in 0.75in; /* top right bottom left */
    size: letter;
  }

  /* First page can have slightly less top margin if desired */
  @page:first {
    margin: 0.75in;
    size: letter;
  }

  /* Hide non-printable elements */
  .no-print,
  [data-controller="customer-explainer-chat"],
  button[data-action*="clipboard"],
  button[type="button"],
  a[href*="print"],
  a[href*="email"],
  nav,
  header,
  footer,
  .bg-slate-950 > *:not(.customer-explainer-document):not(.prose) {
    display: none !important;
  }

  /* Keep document content visible */
  .bg-slate-800,
  .bg-slate-900 {
    background: white !important;
    border: none !important;
  }

  /* Reset body for print */
  body {
    background: white !important;
    color: #1e293b !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Document container */
  .customer-explainer-document {
    max-width: 100%;
    padding: 0;
    background: white;
  }

  /* Content text styling - enhanced spacing */
  .customer-explainer-content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.8;
    color: #1e293b;
  }

  /* Enhanced letter section styling for print - INCREASED SPACING */
  .letter-section.prose h2 {
    font-size: 16px;
    margin-top: 2em; /* Increased from 1.5em - main dispute points */
    margin-bottom: 1em; /* Increased from 0.6em */
    color: #0f172a;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.3em;
  }

  .letter-section.prose h3 {
    font-size: 14px;
    margin-top: 1.5em; /* Increased from 1.2em - subsections */
    margin-bottom: 0.75em; /* Increased from 0.5em */
    color: #1e293b;
    font-weight: 600;
  }

  .letter-section.prose p {
    margin-top: 0.75em; /* Increased from 0.5em */
    margin-bottom: 0.75em; /* Increased from 0.5em */
    line-height: 1.7;
  }

  .letter-section.prose ul,
  .letter-section.prose ol {
    margin-top: 0.75em; /* Increased from 0.5em */
    margin-bottom: 1.15em; /* Increased from 0.8em */
    padding-left: 1.5em;
  }

  .letter-section.prose li {
    margin-top: 0.5em; /* Increased from 0.3em */
    margin-bottom: 0.5em; /* Increased from 0.3em */
    line-height: 1.6;
  }

  .letter-section.prose strong {
    font-weight: 600;
    color: #0f172a;
  }

  .letter-section.prose em {
    font-style: italic;
  }

  /* Documentation references in print - clean and professional */
  .documentation-reference {
    color: #1e293b !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
  }

  /* Headers and sections - prevent awkward breaks */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Specific letter section headings */
  .letter-section h2,
  .letter-section h3 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  /* Paragraphs and lists - prevent orphans and widows */
  p, li {
    orphans: 3;
    widows: 3;
  }

  /* Apply orphans/widows to entire letter section */
  .letter-section {
    orphans: 3;
    widows: 3;
  }

  /* Tables */
  table {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Prevent page breaks in important sections */
  .no-page-break {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Add page breaks where needed */
  .page-break-before {
    page-break-before: always;
    break-before: page;
  }

  .page-break-after {
    page-break-after: always;
    break-after: page;
  }

  /* Subtle spacing for page continuations - professional and balanced */
  /* Keep h3 with its following content */
  .letter-section h3 + * {
    margin-top: 1em;
    page-break-before: avoid;
  }

  /* Links in print */
  a {
    color: #2563eb;
    text-decoration: underline;
  }

  /* Ensure proper text contrast */
  .text-slate-200,
  .text-slate-300,
  .text-slate-400 {
    color: #334155 !important;
  }

  /* Background colors in print */
  .bg-slate-900,
  .bg-slate-800,
  .bg-slate-700 {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
  }
}

/* Screen-only styles (not for print) */
@media screen {
  /* Smooth scrolling for chat messages */
  [data-chat-target="messages"] {
    scroll-behavior: smooth;
  }

  /* Custom scrollbar for chat */
  [data-chat-target="messages"]::-webkit-scrollbar {
    width: 8px;
  }

  [data-chat-target="messages"]::-webkit-scrollbar-track {
    background: rgb(30, 41, 59); /* slate-800 */
    border-radius: 4px;
  }

  [data-chat-target="messages"]::-webkit-scrollbar-thumb {
    background: rgb(51, 65, 85); /* slate-700 */
    border-radius: 4px;
  }

  [data-chat-target="messages"]::-webkit-scrollbar-thumb:hover {
    background: rgb(71, 85, 105); /* slate-600 */
  }

  /* Document preview area */
  .customer-explainer-preview {
    transition: all 0.2s ease;
  }

  /* Highlight animation for new messages */
  @keyframes highlight-message {
    0% {
      background-color: rgba(59, 130, 246, 0.2);
    }
    100% {
      background-color: transparent;
    }
  }

  .message-highlight {
    animation: highlight-message 1s ease-out;
  }
}

/* Professional typography for document content */
.customer-explainer-content {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.01em;
}

.customer-explainer-content h2 {
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.customer-explainer-content p {
  margin-bottom: 0.75em;
}

.customer-explainer-content ul,
.customer-explainer-content ol {
  margin-left: 1.5em;
  margin-bottom: 0.75em;
}

.customer-explainer-content li {
  margin-bottom: 0.25em;
}

/* Status indicators */
.customer-explainer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.customer-explainer-status::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.customer-explainer-status.processing::before {
  background-color: rgb(59, 130, 246); /* blue-500 */
}

.customer-explainer-status.completed::before {
  background-color: rgb(34, 197, 94); /* green-500 */
  animation: none;
}

.customer-explainer-status.failed::before {
  background-color: rgb(239, 68, 68); /* red-500 */
  animation: none;
}