/* ============================================
   VOICE ASSISTANT WIDGET — amd-voice.css
   ============================================ */

#amd-va {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* ── Speech bubble ─────────────────────────────── */
#amd-va-bubble {
  position: absolute;
  bottom: 82px;
  left: 0;
  width: 210px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.13);
  border-radius: 12px 12px 12px 2px;
  padding: 10px 13px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 13px;
  color: #222;
  line-height: 1.45;
  box-shadow: 0 4px 18px rgba(0,0,0,0.17);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
#amd-va-bubble.amd-va-show {
  opacity: 1;
  transform: translateY(0);
}
/* triangle points down-left toward button */
#amd-va-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 14px;
  border: 8px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
#amd-va-bubble::before {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 13px;
  border: 9px solid transparent;
  border-top-color: rgba(0,0,0,0.1);
  border-bottom: 0;
}

/* ── Button ────────────────────────────────────── */
#amd-va-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1e3a6e 0%, #2c52a0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(30,58,110,0.5);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.25s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#amd-va-btn:hover { transform: scale(1.07); }
#amd-va-btn:active { transform: scale(0.95); }

/* ring — animated behind button */
#amd-va-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: amdVaPulse 3s ease-out infinite;
}
@keyframes amdVaPulse {
  0%   { box-shadow: 0 0 0 0   rgba(44,82,160,0.55); }
  70%  { box-shadow: 0 0 0 18px rgba(44,82,160,0); }
  100% { box-shadow: 0 0 0 0   rgba(44,82,160,0); }
}

/* ── Label ─────────────────────────────────────── */
#amd-va-lbl {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.9);
  background: rgba(30,58,110,0.72);
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ── State: LISTENING ──────────────────────────── */
#amd-va.amd-va--listening #amd-va-btn {
  background: linear-gradient(145deg, #8b1010 0%, #cc0000 100%);
  box-shadow: 0 4px 15px rgba(204,0,0,0.55);
}
#amd-va.amd-va--listening #amd-va-ring {
  animation: amdVaListen 1.1s ease-out infinite;
}
@keyframes amdVaListen {
  0%   { box-shadow: 0 0 0 0   rgba(204,0,0,0.65); }
  70%  { box-shadow: 0 0 0 20px rgba(204,0,0,0); }
  100% { box-shadow: 0 0 0 0   rgba(204,0,0,0); }
}
#amd-va.amd-va--listening #amd-va-lbl {
  background: rgba(140,0,0,0.75);
}

/* ── State: THINKING ───────────────────────────── */
#amd-va.amd-va--thinking #amd-va-btn {
  background: linear-gradient(145deg, #7a5500 0%, #cc8800 100%);
  box-shadow: 0 4px 15px rgba(204,136,0,0.5);
}
#amd-va.amd-va--thinking #amd-va-ring {
  animation: amdVaThink 1.3s linear infinite;
}
@keyframes amdVaThink {
  0%   { box-shadow: 0 0 0 4px rgba(204,136,0,0.4); transform: rotate(0deg) scaleX(1.15) scaleY(0.9); }
  50%  { box-shadow: 0 0 0 8px rgba(204,136,0,0.15); transform: rotate(180deg) scaleX(0.9) scaleY(1.15); }
  100% { box-shadow: 0 0 0 4px rgba(204,136,0,0.4); transform: rotate(360deg) scaleX(1.15) scaleY(0.9); }
}
#amd-va.amd-va--thinking #amd-va-lbl {
  background: rgba(100,70,0,0.75);
}

/* ── State: SPEAKING ───────────────────────────── */
#amd-va.amd-va--speaking #amd-va-btn {
  background: linear-gradient(145deg, #0a5c1a 0%, #1a9a30 100%);
  box-shadow: 0 4px 15px rgba(26,154,48,0.5);
}
#amd-va.amd-va--speaking #amd-va-ring {
  animation: amdVaSpeak 0.9s ease-in-out infinite alternate;
}
@keyframes amdVaSpeak {
  0%   { box-shadow: 0 0 0 4px  rgba(26,154,48,0.45); }
  100% { box-shadow: 0 0 0 14px rgba(26,154,48,0); }
}
#amd-va.amd-va--speaking #amd-va-lbl {
  background: rgba(10,80,25,0.75);
}