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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 255, 255, 255;
  --background-end-rgb: 255, 255, 255;

  --background: #ffffff;
  --foreground: #0f172a;
  /* slate-900 */
}

@layer base {
  body {
    @apply bg-white text-slate-900 selection:bg-connexify-200 selection:text-connexify-900;
  }
}

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

/*
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}
*/

/* Tailwind extensions for this app */
@layer utilities {
  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
}

/* Lightweight icon placeholders to replace lucide-react components */
@layer components {
  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-color: currentColor;
    border-radius: 0.125rem;
    /* subtle rounding */
  }

  /* Make certain icons circular to better match expectations */
  .icon-check-circle,
  .icon-user-check {
    border-radius: 9999px;
  }

  /* Thin rectangular arrow-ish placeholders */
  .icon-arrow-right,
  .icon-chevron-right {
    width: 0.85em;
    height: 0.2em;
    border-radius: 9999px;
  }

  /* Star placeholder slightly larger */
  .icon-star {
    transform: rotate(45deg);
  }
}

/* Chat message prose styling */
.prose {
  color: inherit;
  line-height: 1.75;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Link styling */
.prose a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color 0.2s architecture;
  word-break: break-word;
}

.prose a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.prose a:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}

.prose a:visited {
  color: #7c3aed;
}

.prose a:visited:hover {
  color: #6d28d9;
}

/* Ensure links are visible in white text context */
.prose.text-white a {
  color: #93c5fd;
  text-decoration: underline;
}

.prose.text-white a:hover {
  color: #dbeafe;
}

.prose.text-white a:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
  border-radius: 2px;
}

/* List styling */
.prose ol,
.prose ul {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.prose ol {
  list-style-type: decimal;
}

.prose ul {
  list-style-type: disc;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.75;
}

.prose li::marker {
  color: inherit;
}

/* Spacing for list items */
.prose ol>li,
.prose ul>li {
  padding-left: 0.5em;
}

/* Paragraph spacing */
.prose p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.prose p:first-child {
  margin-top: 0;
}

.prose p:last-child {
  margin-bottom: 0;
}