/* base.css — Tailwind entry point. Compiled via: npm run build:css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  [x-cloak] { display: none !important; }
  html, body { height: 100%; margin: 0; }
  body {
    @apply bg-base text-copy antialiased;
    font-family: 'Inter', sans-serif;
  }

  a { @apply text-primary no-underline hover:text-primary/85; }
  hr { @apply my-6 h-px; background: rgb(var(--border)); }
  blockquote { @apply border-l-4 pl-4 text-copy/80; border-color: rgb(var(--border)); }

  code { @apply rounded px-1.5 py-0.5 text-sm; background: rgb(var(--panel)); color: rgb(var(--success)); }
  pre  { @apply p-4 rounded-xl overflow-x-auto; background: rgb(var(--surface)); color: rgb(var(--copy)); }

  :root { color-scheme: dark; }
  input, textarea, select {
    @apply rounded-md border;
    background: rgb(var(--surface));
    color: rgb(var(--copy));
    border-color: rgb(var(--border));
  }
  select {
    @apply appearance-none pr-8 bg-no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-size: 1.25em 1.25em;
  }
  input:focus, textarea:focus, select:focus {
    @apply outline-none ring-2;
    --tw-ring-color: rgb(var(--ring));
  }

  /* Prose: markdown / rich-text rendering */
  .prose h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: rgb(var(--copy)); }
  .prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: rgb(var(--copy)); }
  .prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; color: rgb(var(--copy)); }
  .prose h4 { font-size: 1.125rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; color: rgb(var(--copy)); }
  .prose p { margin-bottom: 1rem; line-height: 1.75; color: rgb(var(--muted)); }
  .prose ul { list-style-type: disc; padding-left: 1.5em; margin: 1em 0; }
  .prose ol { list-style-type: decimal; padding-left: 1.5em; margin: 1em 0; }
  .prose li { margin: 0.5em 0; color: rgb(var(--muted)); }
  .prose ol ol { list-style-type: lower-alpha; }
  .prose ul ul { list-style-type: circle; }
  .prose strong { font-weight: 600; color: rgb(var(--copy)); }
  .prose hr { border: 0; border-top: 2px solid rgb(var(--border)); margin: 2rem 0; }
  .prose blockquote { border-left: 4px solid rgb(var(--primary)); padding-left: 1rem; margin: 1rem 0; color: rgb(var(--muted)); font-style: italic; }
  .prose table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
  .prose th { background: rgb(var(--panel)); padding: 0.75rem; text-align: left; font-weight: 600; border-bottom: 2px solid rgb(var(--border)); }
  .prose td { padding: 0.75rem; border-bottom: 1px solid rgb(var(--border)); }
  .prose a { color: rgb(var(--primary)); text-decoration: underline; }
  .prose a:hover { opacity: 0.85; }
}

@layer components {
  .card {
    @apply rounded-2xl shadow-sm border;
    background: rgb(var(--surface));
    color: rgb(var(--copy));
    border-color: rgb(var(--border));
  }
  .btn {
    @apply inline-flex items-center justify-center rounded-xl px-4 py-2 font-medium border transition-colors;
    border-color: rgb(var(--border));
  }
  .btn-primary {
    @apply btn;
    background: rgb(var(--primary));
    color: rgb(var(--primary-foreground));
  }
  .btn-primary:hover {
    background: rgb(var(--primary) / 0.9);
  }
}

@keyframes border-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgb(var(--primary) / 0.4); }
  50% { box-shadow: 0 0 0 4px rgb(var(--primary) / 0.1); }
}
.animate-border-pulse { animation: border-pulse 1.5s ease-in-out infinite; }


/* Tippy sidebar tooltip theme */
.tippy-box[data-theme~='dark-sidebar'] {
  background: #1a1a2e;
  color: #f3f4f6;
  font-size: 0.8125rem;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.tippy-box[data-theme~='dark-sidebar'] .tippy-arrow { color: #1a1a2e; }

/* Tippy voice-hint theme */
.tippy-box[data-theme~='voice-hint'] {
  background: #fcfcfcfa;
  color: rgb(48, 114, 195);
  font-size: 0.900rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.tippy-box[data-theme~='voice-hint'] .tippy-arrow {
  color: #fcfcfcfa;
}

/* Print: force light theme, hide chrome, unlock scroll containers */
@media print {
    :root {
        color-scheme: light !important;
        --base: 255 255 255 !important;
        --surface: 255 255 255 !important;
        --panel: 245 245 245 !important;
        --copy: 26 26 26 !important;
        --muted: 75 75 75 !important;
        --border: 229 231 235 / 1 !important;
        --primary: 79 70 229 !important;
        --success: 22 163 74 !important;
        --warning: 202 138 4 !important;
        --error: 220 38 38 !important;
    }
    #bb-sidebar, #bb-sidebar-pre-paint { display: none !important; width: 0 !important; }
    .bb-top-header, .bb-footer-wrap, .bb-feedback-panel { display: none !important; }
    html, body { height: auto !important; overflow: visible !important; background: white !important; color: black !important; }
    .flex.h-screen { height: auto !important; display: block !important; overflow: visible !important; background: white !important; }
    main { overflow: visible !important; height: auto !important; background: white !important; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.3s ease-out; }