@tailwind base;
@tailwind components;
@tailwind utilities;


/* Web baseline: make % heights resolve and keep the SPA at viewport height */
html, body, #root { height: 100%; }
body { margin: 0; }

/* Prefer dynamic viewport units for mobile browser UI chrome */
#root { min-height: 100dvh; }

/* iOS Safari safe fill */
@supports (-webkit-touch-callout: none) {
  #root { min-height: -webkit-fill-available; }
}

/* Help % heights in the first React child resolve cleanly */
#root { display: flex; flex-direction: column; }
#root > * { flex: 1 1 auto; min-height: 0; }


@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

.markdown {
  @apply prose prose-invert max-w-none;
  font-size: 0.95rem;
}

/* Tables: fix wrapping, spacing, and overflow */
.markdown table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
.markdown thead th,
.markdown tbody td {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  vertical-align: top;
}
.markdown thead th,
.markdown tbody td {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.markdown table p {
  margin: 0; /* remove extra spacing inside cells */
}
.markdown table ul,
.markdown table ol {
  margin: 0.25rem 0; /* compact lists in cells */
  padding-left: 1.1rem;
}
.markdown table code {
  white-space: pre-wrap; /* allow inline code to wrap */
  word-break: break-word;
}

.markdown a,
.markdown a:any-link {
  @apply underline underline-offset-2 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

@media (max-width: 640px) {
  .markdown {
    font-size: 0.875rem; /* smaller text size on mobile */
  }
}

.prose {
  --tw-prose-body: inherit;
  --tw-prose-headings: inherit;
  --tw-prose-lead: inherit;
  --tw-prose-links: inherit;
  --tw-prose-bold: inherit;
  --tw-prose-counters: inherit;
  --tw-prose-bullets: inherit;
  --tw-prose-hr: inherit;
  --tw-prose-quotes: inherit;
  --tw-prose-quote-borders: inherit;
  --tw-prose-captions: inherit;
  --tw-prose-code: inherit;
  --tw-prose-pre-code: inherit;
  --tw-prose-pre-bg: inherit;
  --tw-prose-th-borders: inherit;
  --tw-prose-td-borders: inherit;
}


@keyframes gradient-wave-gray {
  0% {
    background-position: 200% 50%;
  }
  100% {
    background-position: -200% 50%;
  }
}

.text-gradient-gray {
  background: linear-gradient(
    to right,
    #333333,
    #666666,
    #b0b0b0,
    #666666,
    #333333
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient-wave-gray 6s linear infinite;
}

.dark .text-gradient-gray {
  background: linear-gradient(
    to right,
    #9c9c9c,
    #d0d0d0,
    #f0f0f0,
    #d0d0d0,
    #9c9c9c
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient-wave-gray 6s linear infinite;
}

.h-mobile-safe {
  height: 100dvh;
}

@supports (-webkit-touch-callout: none) {
  .h-mobile-safe {
    height: -webkit-fill-available;
  }
}

/* Minimal custom scrollbar with shorter track */
.scrollbar-custom {
  /* Firefox fallback: reduce width and color */
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}
.dark .scrollbar-custom {
  scrollbar-color: #475569 transparent;
}

/* WebKit-based scrollbars (Chrome, Safari, etc.) */
.scrollbar-custom::-webkit-scrollbar {
  width: 6px;
}

/* Shorten the track by adding big 'borders' at top/bottom */
.scrollbar-custom::-webkit-scrollbar-track {
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  background-clip: padding-box;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
  border-radius: 12px;
  background-color: #CBD5E1;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: border 0.2s ease;
}

.dark .scrollbar-custom::-webkit-scrollbar-thumb {
  background-color: #475569;
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background-color: #94A3B8;
  border: 3px solid transparent;
}

.dark .scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background-color: #64748B;
  border: 3px solid transparent;
}