* { font-family: 'Vazirmatn', sans-serif; }
body { -webkit-tap-highlight-color: transparent; }

.glass {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.bubble-user {
  background: linear-gradient(135deg, #0891b2, #0e7490);
  border-radius: 18px 18px 4px 18px;
}
.bubble-bot {
  background: rgba(51, 65, 85, 0.8);
  border-radius: 18px 18px 18px 4px;
}

.mic-pulse {
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5); }
  50% { box-shadow: 0 0 0 18px rgba(34, 211, 238, 0); }
}

.robot-eye {
  width: 34px; height: 40px;
  background: #22d3ee; border-radius: 9px;
  animation: blink 4s infinite;
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}
.robot-eye.talking { animation: talk 0.5s infinite alternate; }
@keyframes talk {
  from { transform: scaleY(1); border-radius: 9px; }
  to { transform: scaleY(0.55) translateY(6px); border-radius: 14px; }
}

.toggle { position: relative; width: 46px; height: 26px; border-radius: 13px; background: #334155; transition: 0.2s; cursor: pointer; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #94a3b8; transition: 0.2s; }
.toggle.on { background: #0891b2; }
.toggle.on::after { background: #fff; transform: translateX(-20px); }

.aod-preview {
  background: #000; border: 3px solid #334155; border-radius: 14px;
  aspect-ratio: 128/160; max-width: 170px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: #22d3ee;
}

input[type=range] { accent-color: #06b6d4; }
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

.dpad-btn {
  aspect-ratio: 1;
  border-radius: 18px;
  background: rgba(51, 65, 85, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.15);
  color: #22d3ee;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  transition: 0.12s;
  touch-action: manipulation;
}
.dpad-btn span { font-size: 11px; color: #94a3b8; }
.dpad-btn:active {
  background: #0891b2; color: #fff; transform: scale(0.93);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.4);
}
.dpad-btn:active span { color: #e0f2fe; }