/* Ana Widget konumu (PHP/JS ile alt-ortada sabit) */
.ava-voice-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* 🔴 Mikrofon Butonu */
.ava-mic-btn {
  background-color: #f44336;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .16s ease, background-color .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}
.ava-mic-btn:hover { transform: scale(1.06); }
.ava-mic-btn.is-active { transform: scale(1.12); }
.ava-mic-btn .ava-mic-icon { width: 36px; height: 36px; fill: currentColor; z-index: 3; position: relative; }

/* 🎧 Dinlerken dalga/ripple + hafif sallanma (listening sınıfı JS ile eklenir) */
.ava-mic-btn.listening {
  background-color: #d32f2f;
  animation: mic-breathe 1.6s ease-in-out infinite;
}
.ava-mic-btn.listening::before,
.ava-mic-btn.listening::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,.22), rgba(255,255,255,0) 65%);
  z-index: 1;
  opacity: 0;
}
.ava-mic-btn.listening::before { animation: ripple1 1.4s ease-out infinite; }
.ava-mic-btn.listening::after  { animation: ripple2 1.4s ease-out .35s infinite; }

@keyframes ripple1 {
  0% { transform: scale(1); opacity: .5; }
  70%{ transform: scale(1.8); opacity: .12; }
  100%{ transform: scale(2.2); opacity: 0; }
}
@keyframes ripple2 {
  0% { transform: scale(1); opacity: .45; }
  70%{ transform: scale(1.6); opacity: .1; }
  100%{ transform: scale(2.0); opacity: 0; }
}
@keyframes mic-breathe {
  0%,100% { transform: scale(1.12); }
  50%     { transform: scale(1.18); }
}

/* 🎈 Canlı metin balonu (konuşurken interim text) */
.ava-live {
  position: fixed;
  left: 50%;
  bottom: 130px; /* Mikrofonun hemen üstünde görünecek şekilde optimize edilmiştir */
  transform: translateX(-50%);
  max-width: 70vw;
  background: rgba(0,0,0,.8);
  color: #fff;
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  z-index: 99999; /* Z-index'i olası çakışmaları önlemek için daha da yükseltildi */
  pointer-events: none;
  backdrop-filter: blur(4px);
  white-space: pre-wrap;
}

/* ===== Panel ve kalan stiller ===== */
.ava-panel {
  background: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 12px;
  width: 320px;
  box-shadow: 0 10px 20px rgba(0,0,0,.4);
  position: absolute;
  bottom: 100px;
  opacity: 1;
  visibility: visible;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ava-panel-hidden { opacity: 0; visibility: hidden; transform: translateY(20px); pointer-events: none; }
.ava-header { display:flex; justify-content:space-between; align-items:center; padding:10px 15px; background:#222; border-bottom:1px solid #555; border-top-left-radius:12px; border-top-right-radius:12px; }
.ava-close { background: none; border: none; color: #fff; font-size: 1.5em; cursor: pointer; line-height: 1; }
.ava-body { padding: 15px; }
.ava-status { text-align:center; margin-bottom: 15px; color:#4caf50; min-height: 20px; }
.ava-bubbles { min-height:150px; max-height:250px; overflow-y:auto; margin-bottom:15px; padding:10px; background:#444; border-radius:5px; }
.ava-bubble { padding:10px 15px; border-radius:20px; margin-bottom:10px; max-width:85%; word-wrap: break-word; font-size:.95em; }
.user { background:#007bff; color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.bot  { background:#6c757d; color:#fff; margin-right:auto; border-bottom-left-radius:4px; }
.ava-input { display:flex; gap:8px; }
#ava-text { flex-grow:1; padding:10px; border:1px solid #777; border-radius:6px; background:#555; color:#fff; }
#ava-text::placeholder { color:#bbb; }
.ava-send { background:#4caf50; color:#fff; border:none; padding:10px 15px; border-radius:6px; cursor:pointer; }
.ava-send:hover { background:#45a049; }