/* ==========================================================
   Mumuleng - Custom Styles
   Tema: "obrolan telepon" hangat, terinspirasi laut & senja Lombok
   ========================================================== */

:root {
  --ml-teal-950: #06211D;
  --ml-teal-900: #0B2B26;
  --ml-teal-700: #0F6B5C;
  --ml-teal-500: #17936F;
  --ml-cream: #FAF6EF;
  --ml-sand: #F1E7D4;
  --ml-gold: #E8A33D;
  --ml-coral: #E7684A;
  --ml-ink: #14231F;
}

body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--ml-cream);
  color: var(--ml-ink);
}

.font-display {
  font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif;
}

/* Motif "mutiara" (pearl) halus di background hero */
.pearl-texture {
  background-image: radial-gradient(var(--ml-teal-700) 1px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.08;
}

/* ---------- Layar panggilan ---------- */
.call-screen {
  background: radial-gradient(120% 120% at 50% 0%, #103A32 0%, #06211D 60%, #041614 100%);
}

/* Cincin countdown di sekeliling avatar */
.ring-progress {
  transform: rotate(-90deg);
  transition: stroke-dashoffset 1s linear;
}

/* Denyut lingkaran saat AI "berbicara" */
@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.pulse-ring {
  animation: pulse-ring 2.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.pulse-ring.pulse-fast {
  animation-duration: 1.1s;
}

/* Waveform batang saat mendengarkan / bicara */
.wave-bar {
  width: 4px;
  border-radius: 4px;
  background-color: var(--ml-gold);
  transform-origin: bottom;
  animation: wave 1s ease-in-out infinite;
}
.wave-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; }
.wave-bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes wave {
  0%, 100% { height: 6px; }
  50%      { height: 26px; }
}
.wave-idle .wave-bar {
  animation-play-state: paused;
  height: 6px;
}

/* Tombol akhiri panggilan */
.btn-end-call {
  box-shadow: 0 10px 30px -8px rgba(231, 104, 74, 0.6);
}

/* Scrollbar transkrip tipis */
.transcript-scroll::-webkit-scrollbar {
  width: 5px;
}
.transcript-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.15);
  border-radius: 10px;
}

/* Focus visible untuk aksesibilitas */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--ml-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pulse-ring, .wave-bar { animation: none !important; }
}