* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html, body {
  height: 100%;
}

/* ================= BODY ================= */
body {
  background: linear-gradient(135deg, #e9ecff, #f2e6ff);
  display: flex;
  justify-content: center;
}

/* ================= APP ================= */
.app {
  width: 100%;
  max-width: 420px;
  min-height: 100dvh;
  padding:
    env(safe-area-inset-top)
    12px
    env(safe-area-inset-bottom);
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* ================= HEADER ================= */
.top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px;
}

.top h3 {
  font-size: 16px;
  font-weight: 600;
}

/* BACK BUTTON */
.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.back-btn:hover {
  background: rgba(0,0,0,.05);
}

.back-btn svg {
  width: 20px;
  height: 20px;
}

/* ================= STATUS TEXT ================= */
.status {
  margin-top: 18px;
  font-size: 15px;
  opacity: 0.85;
  transition: opacity .3s ease, transform .3s ease;
}

.status.fade {
  opacity: 0.55;
  transform: translateY(2px);
}

/* ================= BLOB ================= */
.blob-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blob {
  width: min(50vw, 260px);
  aspect-ratio: 1;
  position: relative;

  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255,120,220,.95), transparent 45%),
    radial-gradient(100% 100% at 75% 35%, rgba(0,210,255,.95), transparent 48%),
    radial-gradient(90% 90% at 45% 75%, rgba(120,90,255,.9), transparent 50%),
    linear-gradient(135deg, #5b3cff, #00d4ff);

  border-radius: 55% 45% 60% 40% / 55% 60% 40% 45%;
  filter:
    blur(0.6px)
    saturate(160%)
    contrast(110%);

  animation: blobMorph 14s infinite ease-in-out;
}

.blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background:
    radial-gradient(
      35% 35% at 60% 30%,
      rgba(255,255,255,.75),
      transparent 60%
    );

  mix-blend-mode: overlay;
  opacity: .7;
}

.blob::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: inherit;

  background: inherit;
  filter: blur(40px);
  opacity: .85;
  z-index: -1;
}


/* ACTIVE LISTENING */
.blob.active {
  animation: blobListen 1.25s infinite ease-in-out;
  filter:
    blur(0.5px)
    saturate(175%)
    brightness(1.25);
}

/* ================= ANIMATIONS ================= */
@keyframes blobMorph {
  0% {
    border-radius: 55% 45% 60% 40% / 55% 60% 40% 45%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 45% 55% 50% 50% / 60% 45% 55% 40%;
    transform: rotate(6deg) scale(1.04);
  }
  50% {
    border-radius: 60% 40% 55% 45% / 45% 55% 50% 50%;
    transform: rotate(-4deg) scale(0.98);
  }
  75% {
    border-radius: 50% 50% 40% 60% / 55% 45% 60% 40%;
    transform: rotate(5deg) scale(1.03);
  }
  100% {
    border-radius: 55% 45% 60% 40% / 55% 60% 40% 45%;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes blobListen {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.22) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}


/* ================= CAPTION ================= */
.caption {
  font-size: 14px;
  opacity: 0.7;
  max-width: 280px;
  margin: 8px auto 0;
}

.caption span {
  opacity: 0.4;
}

/* ================= CONTROLS ================= */
.controls {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

/* ================= VOICE BUTTON ================= */
.voice-btn {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 14px 26px;
  border-radius: 999px;

  background: linear-gradient(135deg, #6f4bff, #8a6cff);
  color: #fff;

  font-size: 16px;
  font-weight: 600;

  border: none;
  cursor: pointer;

  box-shadow: 0 0 0 6px rgba(123, 97, 255, 0.25);
}

.voice-btn:active {
  transform: scale(0.96);
}

/* MIC ICON */
.voice-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ================= LISTENING BUTTON ================= */
.voice-btn.listening {
  background: linear-gradient(135deg, #ff4bd8, #7b61ff);
}

/* ================= EQUALIZER ================= */
.eq {
  display: none;
  align-items: center;
  gap: 4px;
  height: 18px;
}

.eq span {
  width: 4px;
  height: 6px;
  background: #fff;
  border-radius: 3px;
  animation: eqAnim 1s infinite ease-in-out;
}

.eq span:nth-child(1) { animation-delay: 0s }
.eq span:nth-child(2) { animation-delay: .12s }
.eq span:nth-child(3) { animation-delay: .24s }
.eq span:nth-child(4) { animation-delay: .36s }
.eq span:nth-child(5) { animation-delay: .48s }

@keyframes eqAnim {
  0%   { height: 6px; opacity: .5 }
  50%  { height: 18px; opacity: 1 }
  100% { height: 6px; opacity: .5 }
}

/* ================= LISTENING STATE ================= */
.voice-btn.listening .label {
  display: none;
}

.voice-btn.listening .eq {
  display: flex;
}

.bottom-insert {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  padding: 0 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.back-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mic-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all .25s ease;
}

.mic-circle svg {
  width: 20px;
  height: 20px;
  stroke: #6d4aff;
  fill: none;
  stroke-width: 2;
}

/* hanya mic ON terlihat */
.icon-mic-off {
  display: none;
}

.voice-listening .icon-mic-on {
  display: none;
}

.voice-listening .icon-mic-off {
  display: block;
  stroke: #ff3b30;
}

/* BUTTON MERAH + GLOW */
.voice-listening .mic-circle {
  border-color: #ff3b30;
  box-shadow:
    0 0 0 6px rgba(255, 59, 48, 0.25),
    0 0 18px rgba(255, 59, 48, 0.6);
  animation: micPulse 1.4s infinite ease-in-out;
}
@keyframes micPulse {
  0% {
    box-shadow:
      0 0 0 6px rgba(255, 59, 48, 0.18),
      0 0 14px rgba(255, 59, 48, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(255, 59, 48, 0.32),
      0 0 22px rgba(255, 59, 48, 0.75);
  }
  100% {
    box-shadow:
      0 0 0 6px rgba(255, 59, 48, 0.18),
      0 0 14px rgba(255, 59, 48, 0.45);
  }
}


/* ===== EQUALIZER (IDLE) ===== */
.eq-center {
  display: flex;
  align-items: center;
  gap: 6px;
}

.eq-center span {
  width: 6px;
  height: 14px;
  background: #6d4aff;
  border-radius: 6px;
  opacity: .35;
  transform-origin: center;
}

/* ===== ACTIVE (LISTENING) ===== */
.voice-listening .eq-center span {
  opacity: 1;
  animation: wave 1.4s infinite ease-in-out;
}

/* SIMETRIS – MIRIP FOTO */
.voice-listening .eq-center span:nth-child(1) {
  animation-delay: 0s;
}
.voice-listening .eq-center span:nth-child(2) {
  animation-delay: .12s;
}
.voice-listening .eq-center span:nth-child(3) {
  animation-delay: .24s;
}
.voice-listening .eq-center span:nth-child(4) {
  animation-delay: .12s;
}
.voice-listening .eq-center span:nth-child(5) {
  animation-delay: 0s;
}

@keyframes wave {
  0% { transform: scaleY(.5); }
  50% { transform: scaleY(1.6); }
  100% { transform: scaleY(.5); }
}