:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.75rem;
}

* { border-color: hsl(var(--border)); }
body { background: hsl(var(--background)); color: hsl(var(--foreground)); }
.glass-grid {
  background-image:
    linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size: 36px 36px;
}
.card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: calc(var(--radius) - 2px);
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  transition: .15s ease;
  border: 1px solid transparent;
}
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { opacity: .92; }
.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.btn-secondary:hover { background: hsl(210 40% 92%); }
.btn-outline { border-color: hsl(var(--border)); background: transparent; }
.btn-outline:hover { background: hsl(var(--accent)); }
.btn-ghost:hover { background: hsl(var(--accent)); }
.input, .textarea, .select {
  width: 100%;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--input));
  background: transparent;
  padding: .625rem .75rem;
  font-size: .875rem;
  outline: none;
}
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px rgba(15, 23, 42, .08);
}
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  padding: .125rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}
.prose-ai h3 { font-weight: 800; margin-top: 1rem; margin-bottom: .5rem; }
.prose-ai p { margin: .5rem 0; }
.prose-ai ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.prose-ai ol { list-style: decimal; padding-left: 1.25rem; margin: .5rem 0; }
.prose-ai pre { background: #0f172a; color: white; padding: 1rem; border-radius: .75rem; overflow-x: auto; }
.prose-ai code { background: hsl(var(--muted)); padding: .1rem .25rem; border-radius: .25rem; }
.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }



/* Tambahkan ke bagian bawah assets/app.css */
.chat-row {
  animation: chatSlideIn .18s ease-out;
}

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

.typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.typing-dots i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #64748b;
  animation: typingPulse 1s infinite ease-in-out;
}

.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes typingPulse {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.prose-ai {
  overflow-wrap: anywhere;
}

.prose-ai h2,
.prose-ai h3,
.prose-ai h4 {
  font-weight: 900;
  letter-spacing: -0.015em;
  margin-top: 1rem;
  margin-bottom: .45rem;
  color: #0f172a;
}

.prose-ai h2 { font-size: 1.05rem; }
.prose-ai h3 { font-size: 1rem; }
.prose-ai h4 { font-size: .95rem; }

.prose-ai p {
  margin: .55rem 0;
}

.prose-ai ul,
.prose-ai ol {
  margin: .65rem 0;
  padding-left: 1.35rem;
}

.prose-ai ul { list-style: disc; }
.prose-ai ol { list-style: decimal; }
.prose-ai li { margin: .25rem 0; }

.prose-ai strong {
  font-weight: 850;
  color: #020617;
}

.prose-ai em {
  font-style: italic;
}

.prose-ai blockquote {
  border-left: 3px solid #cbd5e1;
  margin: .8rem 0;
  padding: .4rem .85rem;
  color: #475569;
  background: #f8fafc;
  border-radius: .5rem;
}

.prose-ai a {
  color: #0f172a;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

.prose-ai code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: .12rem .32rem;
  border-radius: .35rem;
  font-size: .86em;
  color: #0f172a;
}

.prose-ai .code-wrap {
  margin: .85rem 0;
  border-radius: .85rem;
  overflow: hidden;
  border: 1px solid #1e293b;
  background: #020617;
}

.prose-ai .code-lang {
  padding: .45rem .8rem;
  font-size: .72rem;
  font-weight: 800;
  color: #cbd5e1;
  border-bottom: 1px solid #1e293b;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.prose-ai pre {
  margin: 0;
  padding: .9rem;
  overflow-x: auto;
  background: #020617;
  color: #e2e8f0;
}

.prose-ai pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}