/* Estilos próprios da página (antes ficavam num <style> dentro do index.html). */
body {
  background-color: #0a0812;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #0f0c1c;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #2e234d;
  border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9333ea;
}
.parchment-box {
  background: linear-gradient(135deg, #f7f1e5 0%, #ebe0cc 100%);
  color: #2b1f0d;
  border: 1px solid #c9b084;
}
.purple-card {
  background-color: #171229;
  border: 1px solid #2e234d;
}
.purple-card-active {
  background-color: #241a3d;
  border: 1px solid #a855f7;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.25);
}

/* Anel do seletor de modelo de IA: verde neon quando carregado; âmbar crescendo do topo para os dois lados enquanto carrega */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.model-ring { display: inline-flex; padding: 2px; border-radius: 10px; background: rgba(129,140,248,.35);
  transition: --ang .6s linear, box-shadow .5s ease, background-color .5s ease; }
.model-ring > select { border: 0 !important; border-radius: 8px; outline: none; margin: 0 !important; background-color: #1e1b4b !important; }
.model-ring.ready { background: #22c55e; box-shadow: 0 0 6px 1px rgba(34,197,94,.85), 0 0 16px 3px rgba(34,197,94,.45); }
.model-ring.loading { box-shadow: 0 0 8px 1px rgba(245,158,11,.55);
  background: conic-gradient(from 0deg, #f59e0b 0deg var(--ang), rgba(129,140,248,.30) var(--ang) calc(360deg - var(--ang)), #f59e0b calc(360deg - var(--ang)) 360deg); }
.model-ring.closing { background: #f59e0b; box-shadow: 0 0 10px 2px rgba(245,158,11,.8); }
.model-ring.error { background: #ef4444; box-shadow: 0 0 6px 1px rgba(239,68,68,.7); }