:root {
  --bg: #0b0f1a; --bg2: #131826; --card: #1a2138;
  --accent: #7c3aed; --accent2: #a78bfa; --blue: #38bdf8; --cyan: #22d3ee;
  --green: #22c55e; --amber: #f59e0b; --red: #ef4444;
  --text: #e8eef6; --dim: #7d8aa0; --border: #1d2840;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* ═══ İKONLAR (inline SVG, currentColor — tutarlı set) ═══ */
.ic { width: 22px; height: 22px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.ic.sm { width: 15px; height: 15px; }
.ic-wrap { display: inline-flex; align-items: center; }
.ic-wrap .ic { width: 18px; height: 18px; }
button svg, .qpick svg { pointer-events: none; }
html, body { height: 100%; background: var(--bg); }
body {
  background:
    radial-gradient(900px 600px at 50% -8%, #1b2540 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 100%, #14203a 0%, transparent 55%),
    var(--bg);
  color: var(--text); font-family: 'Inter', system-ui, -apple-system, sans-serif; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.app {
  display: flex; flex-direction: column; height: 100dvh;
  position: relative; max-width: 860px; margin: 0 auto;
}

/* ═══ ORB + FAB GİZLİ (Tansu yönergesi 17.06.2026 — background'da buton istemiyor) ═══ */
.hero { display: none !important; }
.hero-hint { display: none !important; }
.mic-fab { display: none !important; }

/* ═══ ÜST BAR (kompakt, Gemini tarzı) ═══ */
/* v25-sade-topbar (18.06.2026, Tansu): connectBtn eskiden 44px height + 0.9rem
   font ile büyük ve alt satıra wrap oluyordu (319px ekranda). Tansu "tek satıra
   sığacak şekilde küçük" istedi. qpick ile aynı yüksekliğe indirildi, daha
   sonra 28px'e düşürüldü (Tansu "halen full bit" dedi). flex-wrap:nowrap ile
   her durumda tek satır garanti. */
.topbar {
  display: flex; align-items: center; gap: 0.3rem;
  padding: calc(0.4rem + var(--safe-top)) 0.5rem 0.4rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11,15,26,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  z-index: 10; flex-shrink: 0; flex-wrap: nowrap;
}
.title { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
/* v24-sade-topbar (18.06.2026, Tansu): brand (Voice Studio yazısı + logo)
   tüm ekranlarda gizli — gereksiz satır işgal ediyordu. Sadece status
   dot + qpick'ler (mod/ajan seçici) topbar'da. Bağlan topbar'ın sağında. */
.brand { display: none !important; }
.brand .logo { display: none !important; }
.status { font-size: 0.7rem; color: var(--dim); display: flex; align-items: center; gap: 0.45rem; margin-top: 3px; flex-wrap: wrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); transition: all .3s; flex-shrink: 0; }
.status-dot.online { background: var(--green); box-shadow: 0 0 9px rgba(34,197,94,.7); }
.status-dot.thinking { background: var(--amber); box-shadow: 0 0 9px rgba(245,158,11,.7); }

/* Hızlı ajan/mod seçim butonları (top bar, 1 dokunuş). v25: max-width 150→110px
   çünkü Hermes Agent ismi uzun, 319px ekranda qpick'ler fazla yer kaplıyordu. */
.qpick {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text); border-radius: 7px; padding: 1px 7px;
  font: inherit; font-size: 0.68rem; font-weight: 600;
  cursor: pointer; line-height: 1.4; min-height: 24px;
  transition: all .12s; white-space: nowrap; max-width: 110px; overflow: hidden;
  text-overflow: ellipsis;
}
.qpick .ic { width: 11px; height: 11px; color: var(--accent2); flex-shrink: 0; }
.qpick:hover { background: rgba(124,58,237,0.18); border-color: var(--accent); }
.qpick:active { transform: scale(0.93); }

/* v26-hint-add-btn (19.06.2026, Tansu): Özel terimler input + Ekle butonu.
   Textarea readonly yapılmadı (geriye uyumlu toplu düzenleme için) ama
   ekleme için tek-tek yol var. Listeleme alanı olarak textarea korundu. */
.hints-add-row { display: flex; gap: 0.4rem; align-items: stretch; }
#hintInput {
  flex: 1; min-width: 0; background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.45rem 0.7rem; font: inherit; font-size: 0.85rem;
  min-height: 36px; transition: border-color .15s;
}
#hintInput:focus { border-color: var(--accent); outline: none; }
#hintInput::placeholder { color: var(--dim); }
.hint-add-btn {
  flex-shrink: 0; min-height: 36px; padding: 0 0.9rem;
  font-size: 0.78rem; font-weight: 600; color: var(--accent2);
  border-color: rgba(124,58,237,.35);
}
.hint-add-btn:hover { background: rgba(124,58,237,.18); border-color: var(--accent); }
.hint-add-btn:active { transform: scale(0.95); }
#hintsStatus {
  font-size: 0.75rem; color: var(--green); min-height: 1em;
  transition: color .3s; font-weight: 500;
}
/* Light mode override'ları */
:root[data-theme="light"] #hintInput { background: #fff; border-color: var(--border); }
:root[data-theme="light"] .hint-add-btn { background: rgba(124,58,237,.08); }
:root[data-theme="light"] .hint-add-btn:hover { background: rgba(124,58,237,.18); }

/* ═══ İKON BUTONLARI (touch-friendly 48px) ═══ */
.icon-btn {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; width: 48px; height: 48px; font-size: 1.1rem;
  cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-btn:hover:not(:disabled) { border-color: var(--accent); }
.icon-btn:active:not(:disabled) { transform: scale(0.95); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn.big { width: 52px; height: 52px; font-size: 1.2rem; }
.icon-btn.muted { background: var(--red); border-color: var(--red); }

/* ═══ SOHBET ALANI ═══ */
.chat {
  flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative;
  overflow: hidden;
}
.hero {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem;
  pointer-events: none; transition: opacity .3s;
}
.hero.hidden { opacity: 0; pointer-events: none; }
.hero-orb { width: 140px; height: 140px; position: relative; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto; }
.hero-orb:active { transform: scale(0.97); }
.orb-icon { position: relative; z-index: 3; color: #fff; opacity: .95; display: inline-flex; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.orb-icon .ic { width: 38px; height: 38px; }
.hero-orb .orb-inner {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--accent2), var(--accent) 52%, #4c1d95 100%);
  box-shadow: 0 0 48px var(--accent), 0 0 90px rgba(124,58,237,.4), inset 0 0 28px rgba(255,255,255,.18);
  transition: all .3s; display: flex; align-items: center; justify-content: center;
}
.hero-orb.listening .orb-inner { background: radial-gradient(circle at 32% 28%, #a5f3fc, var(--cyan) 50%, #0e7490 100%); box-shadow: 0 0 48px var(--cyan), 0 0 90px rgba(34,211,238,.4); }
.hero-orb.speaking .orb-inner { background: radial-gradient(circle at 32% 28%, #86efac, var(--green) 52%, #15803d 100%); box-shadow: 0 0 56px var(--green), 0 0 100px rgba(34,197,94,.4); }
.hero-orb.thinking .orb-inner { background: radial-gradient(circle at 32% 28%, #fcd34d, var(--amber) 52%, #b45309 100%); box-shadow: 0 0 52px var(--amber), 0 0 90px rgba(245,158,11,.4); }
.hero-orb.muted .orb-inner { filter: grayscale(.65) brightness(.65); }
.hero-orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(124,58,237,.25); opacity: 0; }
.hero-orb .ring.pulse { animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { transform: scale(.52); opacity: .6; } 100% { transform: scale(1.18); opacity: 0; } }
.hero-orb .viz { position: absolute; inset: 0; }
.hero-orb .viz .bar { position: absolute; left: 50%; top: 50%; width: 3px; height: 12px; border-radius: 3px; background: linear-gradient(var(--accent2), var(--cyan)); transform-origin: 50% 0; opacity: .55; transition: height .07s ease-out; }
.hero-hint { font-size: 0.85rem; color: var(--dim); text-align: center; padding: 0 1rem; max-width: 320px; }
.hero-hint b { color: var(--accent2); }

/* ═══ TRANSCRIPT (modern chat bubble, Gemini tarzı) ═══ */
.transcripts {
  position: relative; z-index: 2; width: 100%; flex: 1;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 0.7rem 0.8rem 0.5rem;
  scroll-behavior: smooth;
}
.transcripts .empty { text-align: center; color: var(--dim); padding: 1.5rem 1rem; font-size: 0.85rem; }
.msg { padding: 0.65rem 0.9rem 1.5rem; border-radius: 18px; line-height: 1.5; font-size: 0.93rem; max-width: 86%; word-wrap: break-word; position: relative; animation: rise .2s ease-out; }
/* v20-spacing-fix: yazının son satırı ile hoparlör/kopyala ikonları arasında daha
   fazla boşluk bırak (Tansu şikâyeti 18.06.2026: ikonlar yazıya çok yakındı).
   bottom 6px + padding-bottom 1.5rem ≈ 18px temiz alan. */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg .label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; opacity: .85; }
.msg .time { font-size: 0.6rem; color: var(--dim); margin-top: 4px; text-align: right; opacity: .7; }
.msg.user { align-self: flex-end; background: linear-gradient(135deg, rgba(124,58,237,.32), rgba(56,189,248,.18)); border: 1px solid rgba(124,58,237,.4); border-bottom-right-radius: 6px; }
.msg.user .label { color: var(--accent2); }
.msg.ai { align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.msg.ai .label { color: var(--cyan); }
.msg.agent { align-self: flex-start; background: rgba(34,197,94,.09); border: 1px solid rgba(34,197,94,.28); border-bottom-left-radius: 6px; max-width: 92%; position: relative; }
.msg.agent .label { color: var(--green); }
/* Tekrar seslendir butonu — her zaman görünür (mobile dahil, Tansu 17.06.2026).
   Mouse olmayan touch cihazlarda opacity 0.85 sabit; desktop'ta hover'da 1.0. */
/* v19-button-order (18.06.2026, Tansu şikâyeti): buton sırası [hoparlör][kopyala]
   oldu, önceden [kopyala][hoparlör] idi. Kullanıcı balonunun altında da
   hoparlör olacak (Ahmet erkek sesi — farklı ses ki AI cevabıyla karışmasın). */
/* v24-global-player-refactor: balon-içi player-bar + speak-time kaldırıldı
   (CSS .msg .player-bar / .speak-time / .scrubbable kuralları silindi). Artık
   ekranın en üstünde position: fixed global player var, tüm sesli mesajlar
   onu paylaşıyor. Balon içinde sadece hoparlör + kopyala butonu kalıyor.
   speak-busy sınıfı da kaldırıldı (artık gerek yok — global player durumu
   gösteriyor, diğer hoparlörler her zaman basılabilir). */
 .msg .copy-btn { position: absolute; left: 48px; bottom: 6px; width: 28px; height: 28px; padding: 0; background: rgba(56,189,248,.18); border: 1px solid rgba(56,189,248,.4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--cyan); opacity: 0.85; transition: opacity .15s ease, background .15s ease, transform .1s ease, color .15s ease, border-color .15s ease; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); z-index: 2; }
.msg .copy-btn:hover { opacity: 1; background: rgba(56,189,248,.32); }
.msg .copy-btn:active { transform: scale(.92); }
.msg .copy-btn svg { width: 14px; height: 14px; }
.msg .copy-btn.copied { opacity: 1; background: rgba(34,197,94,.28); border-color: rgba(34,197,94,.55); color: var(--green); }
@media (hover: none) { .msg .copy-btn { opacity: 1; } }
/* v19: hoparlör artık SOL UÇTA (8px), kopyanın solunda */
.msg.agent .speak-btn { position: absolute; left: 8px; bottom: 6px; width: 28px; height: 28px; padding: 0; background: rgba(34,197,94,.18); border: 1px solid rgba(34,197,94,.4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--green); opacity: 0.85; transition: opacity .15s ease, background .15s ease, transform .1s ease; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); z-index: 2; }
.msg.agent .speak-btn:hover { opacity: 1; background: rgba(34,197,94,.32); }
.msg.agent .speak-btn:active { transform: scale(.92); }
.msg.agent .speak-btn svg { width: 14px; height: 14px; }
.msg.ai .speak-btn { position: absolute; left: 8px; bottom: 6px; width: 28px; height: 28px; padding: 0; background: rgba(34,197,94,.18); border: 1px solid rgba(34,197,94,.4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--green); opacity: 0.85; transition: opacity .15s ease, background .15s ease, transform .1s ease; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); z-index: 2; }
.msg.ai .speak-btn:hover { opacity: 1; background: rgba(34,197,94,.32); }
.msg.ai .speak-btn:active { transform: scale(.92); }
.msg.ai .speak-btn svg { width: 14px; height: 14px; }
/* v19: kullanıcı balonu hoparlörü — turuncu (Ahmet erkek sesi) */
.msg.user .speak-btn { position: absolute; left: 8px; bottom: 6px; width: 28px; height: 28px; padding: 0; background: rgba(245,158,11,.18); border: 1px solid rgba(245,158,11,.4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--amber); opacity: 0.85; transition: opacity .15s ease, background .15s ease, transform .1s ease; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); z-index: 2; }
.msg.user .speak-btn:hover { opacity: 1; background: rgba(245,158,11,.32); }
.msg.user .speak-btn:active { transform: scale(.92); }
.msg.user .speak-btn svg { width: 14px; height: 14px; }
.msg.user .speak-btn[data-icon="volume-pause"] { opacity: 1; background: rgba(245,158,11,.32); border-color: rgba(245,158,11,.6); color: var(--amber); }
/* v24: speak-busy kuralı kaldırıldı — global player durumu gösteriyor,
   diğer hoparlörler her zaman basılabilir. Tansu UX kararı 18.06.2026:
   "mevcut ses durdurulduktan sonra diğerlerine basabilmeliyim" (eski
   pointer-events:none bunu engelliyordu, kullanıcı progress bar'ı
   sonuna kadar sürüklemek zorunda kalıyordu). */
@media (hover: none) {
  .msg.agent .speak-btn { opacity: 1; }
}
/* Çalarken duraklatma */
.msg.agent .speak-btn[data-icon="volume-pause"] { opacity: 1; background: rgba(245,158,11,.25); border-color: rgba(245,158,11,.5); color: var(--amber); }
/* v16-live-audio-cache: canlı ses cache'li mesajlarda hoparlör butonu mor/parıltılı
   görünür — kullanıcı "bu doğal ses" olduğunu anlasın. Tansu isteği 18.06.2026. */
.msg.agent .speak-btn[data-icon="sparkles"] { background: rgba(167,139,250,.22); border-color: rgba(167,139,250,.5); color: var(--accent); }
.msg.agent .speak-btn[data-icon="sparkles"]:hover { background: rgba(167,139,250,.36); }
.msg.ai .speak-btn[data-icon="sparkles"] { background: rgba(167,139,250,.22); border-color: rgba(167,139,250,.5); color: var(--accent); }
.msg.ai .speak-btn[data-icon="sparkles"]:hover { background: rgba(167,139,250,.36); }
/* Speaker mute TOGGLE — kapalıyken kırmızı aktif durumu */
.speaker-mute.active { color: #ef4444 !important; background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); }
.speaker-mute.active:hover { background: rgba(239,68,68,.28); }
.msg.tool { align-self: center; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); font-size: 0.78rem; color: #fcd34d; max-width: 94%; }
.msg.tool.directive { align-self: stretch; background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.34); color: var(--text); max-width: 100%; }
.msg.tool.directive .dir-head { display: flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--accent2); text-transform: uppercase; letter-spacing: .4px; }
.msg.tool.directive .dir-head b { font-weight: 700; }
.msg.tool.directive .dir-arrow { opacity: .6; }
.msg.tool.directive .dir-quote { margin-top: 6px; font-size: 0.86rem; line-height: 1.5; color: var(--text); border-left: 2px solid var(--accent); padding-left: 0.6rem; white-space: pre-wrap; }
/* ═══ PROGRESS KARTI (Tansu yönergesi 17.06.2026 — hangi aşamada olduğu ekranda) ═══ */
.msg.progress {
  align-self: stretch; max-width: 100%;
  background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.3);
  color: var(--text); padding: 0.55rem 0.9rem; border-radius: 12px;
  display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem;
  animation: rise .2s ease-out;
}
.msg.progress .prog-icon { color: var(--accent2); flex-shrink: 0; display: inline-flex; }
.msg.progress .prog-icon svg { animation: prog-spin 1.8s linear infinite; }
.msg.progress .prog-body { flex: 1; min-width: 0; }
.msg.progress .prog-title { font-weight: 600; color: var(--accent2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.msg.progress .prog-text { color: var(--text); font-size: 0.85rem; line-height: 1.4; word-wrap: break-word; }
.msg.progress .prog-time { font-size: 0.62rem; color: var(--dim); margin-top: 2px; opacity: .75; }
.msg.progress.done { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); }
.msg.progress.done .prog-icon { color: #22c55e; }
.msg.progress.done .prog-icon svg { animation: none; }
.msg.progress.done .prog-title { color: #22c55e; }
.msg.progress.error { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); }
.msg.progress.error .prog-icon { color: #ef4444; }
.msg.progress.error .prog-icon svg { animation: none; }
.msg.progress.error .prog-title { color: #ef4444; }
@keyframes prog-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.msg.err { align-self: center; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; font-size: 0.84rem; }
.msg.think { align-self: flex-start; background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.3); color: var(--accent2); font-size: 0.84rem; display: flex; align-items: center; gap: 0.5rem; }
.dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent2); margin: 0 2px; animation: blink 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .2s; } .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* Markdown */
.md p { margin: 0.3rem 0; } .md h2,.md h3,.md h4 { margin: 0.5rem 0 0.3rem; line-height: 1.3; }
.md h2 { font-size: 1.05rem; } .md h3 { font-size: .98rem; } .md h4 { font-size: .9rem; color: var(--accent2); }
.md ul { margin: 0.3rem 0 0.3rem 1.1rem; } .md li { margin: 0.15rem 0; }
.md a { color: var(--blue); }
.md code { background: rgba(255,255,255,.08); padding: 0.1rem 0.35rem; border-radius: 5px; font-family: 'Consolas', monospace; font-size: .85em; }
.md .code { position: relative; margin: 0.5rem 0; }
.md .code pre { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 0.7rem 0.8rem; overflow-x: auto; }
.md .code pre code { background: none; padding: 0; font-size: .82rem; line-height: 1.45; color: #f1f5f9; }
.md .code .copy { position: absolute; top: 6px; right: 6px; background: #1e293b; border: 1px solid #334155; color: #f1f5f9; font-size: .68rem; padding: 0.15rem 0.5rem; border-radius: 6px; cursor: pointer; }

/* ═══ AJAN AKORDİYON PANELİ (Tansu isteği 17.06.2026) ═══ */
/* Chat/composer arası, normal flow'da (fixed değil — sohbeti ittirmez). */
/* Collapsed: tek satır status. Expanded: scrollable tool log listesi. */
.agent-accordion { background: rgba(124,58,237,.06); border-top: 1px solid rgba(124,58,237,.18); border-bottom: 1px solid rgba(124,58,237,.18); margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 38vh; }
.agent-accordion-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .85rem; background: transparent; border: 0; color: var(--text); cursor: pointer; font: inherit; font-size: .82rem; text-align: left; width: 100%; }
.agent-accordion-head:hover { background: rgba(124,58,237,.1); }
.agent-accordion-head .aa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 8px var(--accent2); animation: pulse 1.4s ease-in-out infinite; flex-shrink: 0; }
.agent-accordion-head .aa-icon { color: var(--accent2); flex-shrink: 0; }
.agent-accordion-head .aa-icon svg { width: 16px; height: 16px; }
.agent-accordion-head .aa-title { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-accordion-head .aa-elapsed { color: var(--dim); font-size: .72rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.agent-accordion-head .aa-chevron { color: var(--dim); flex-shrink: 0; transition: transform .2s ease; }
.agent-accordion-head .aa-chevron svg { width: 16px; height: 16px; }
.agent-accordion-head[aria-expanded="true"] .aa-chevron { transform: rotate(180deg); }
.agent-accordion-body { flex: 1; overflow-y: auto; background: rgba(0,0,0,.18); border-top: 1px solid rgba(124,58,237,.12); }
.agent-log { list-style: none; margin: 0; padding: .35rem .85rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .75rem; line-height: 1.45; }
.agent-log-entry { display: flex; gap: .5rem; padding: .25rem 0; border-bottom: 1px dashed rgba(124,58,237,.1); animation: rise .15s ease-out; }
.agent-log-entry:last-child { border-bottom: 0; }
.agent-log-entry .agent-log-time { color: var(--dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.agent-log-entry .agent-log-tool { color: var(--accent2); flex-shrink: 0; min-width: 80px; text-transform: lowercase; }
.agent-log-entry .agent-log-text { color: var(--text); flex: 1; min-width: 0; word-break: break-word; }
.agent-log-entry.done .agent-log-tool { color: var(--green); }
.agent-log-entry.error .agent-log-tool { color: #ef4444; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Light mode — akordiyon kontrast düzeltmesi (Tansu yönergesi 17.06.2026) */
:root[data-theme="light"] .agent-accordion { background: rgba(124,58,237,.05); }
:root[data-theme="light"] .agent-accordion-body { background: rgba(124,58,237,.03); }

/* ═══ COMPOSER (alt bar — Gemini/ChatGPT mobile tarzı) ═══ */
.composer {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.5rem 0.6rem calc(0.6rem + var(--safe-bottom));
  background: rgba(11,15,26,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  position: relative;
}
/* Üst katman: mod seçimi (sol) + mute/bağlan (sağ) */
.composer-top { display: flex; align-items: center; gap: 0.5rem; }
.composer-top .seg { margin-right: auto; }
/* v24-sade-composer: Bağlan topbar'a taşındı, composer'da kaldırıldı.
   Sadece mod (sol) + mute/speakerMute (sağ sıkı grup) kaldı. margin-right:auto
   zaten .seg'i sola yapıştırıyor, mute+speakerMute sağa yapışık. */
/* Speaker mute (Gemini sesini kes) — mikrofondan ayırt etmek için hafif renk farkı (Tansu 17.06.2026). */
.speaker-mute { color: var(--amber); }
.speaker-mute:hover { color: #ef4444; background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }
.speaker-mute:active { transform: scale(.94); }
/* Alt katman: moda göre TAM GENİŞLİK aksiyon (yazı kutusu/ptt) */
.composer-action { display: flex; align-items: flex-end; gap: 0.5rem; }
.app[data-input="live"] .composer-action { display: none; } /* canlı: orb + FAB yeterli */

.seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.seg button { border: 0; background: transparent; color: var(--dim); padding: 0.5rem 0.85rem; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all .15s; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.seg button.active { background: linear-gradient(135deg, var(--accent), #6d28d9); color: #fff; }
.seg button .ic { width: 20px; height: 20px; }
.seg.mini button { padding: 0.4rem 0.7rem; min-height: 44px; }

/* Bağlan/Durdur — qpick ile aynı mini-pill seviyesinde (v26-topbar-qpick-align).
   v25'te 28px height + 0.72rem font + ikon 12px ile topbar'da diğer qpick'lerden
   (24px, 0.68rem, ikon 11px) belirgin biçimde büyük duruyordu, Tansu "hâlâ full
   bit" dedi. v26: qpick ailesiyle birebir aynı ölçü + aynı arka plan stili.
   Yazı etiketi ("Bağlan"/"Durdur") korundu, sığması için font/padding daha küçük. */
.conn-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text); border-radius: 7px; padding: 1px 8px;
  font: inherit; font-size: 0.68rem; font-weight: 600;
  cursor: pointer; line-height: 1.4; min-height: 24px;
  transition: all .12s; white-space: nowrap; flex-shrink: 0;
}
.conn-btn:active { transform: scale(0.93); }
.conn-btn .ic { width: 11px; height: 11px; flex-shrink: 0; }
.conn-btn.pill-start { color: var(--green); }
.conn-btn.pill-start:hover { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.5); }
.conn-btn.pill-stop { color: var(--red); background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.45); }
.conn-btn.pill-stop:hover { background: rgba(239,68,68,.22); }

.pill { border: 0; border-radius: 14px; padding: 0 1.2rem; height: 50px; font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: transform .12s, box-shadow .2s; white-space: nowrap; flex-shrink: 0; }
.pill:active { transform: scale(0.96); }
.pill-start { background: linear-gradient(135deg, var(--accent), #6d28d9); color: #fff; box-shadow: 0 4px 18px rgba(124,58,237,.45); }
.pill-stop { background: var(--red); color: #fff; box-shadow: 0 4px 14px rgba(239,68,68,.4); }

/* TAM GENİŞLİK yazı kutusu — textarea, yazdıkça ~5 satıra büyür (asıl bug düzeltmesi) */
#textInput { flex: 1; background: var(--bg2); border: 1.5px solid var(--border); color: var(--text); border-radius: 14px; padding: 0.85rem 1rem; min-height: 54px; max-height: 140px; font: inherit; font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; line-height: 1.4; min-width: 0; resize: none; overflow-y: auto; }
#textInput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,58,237,.18); }
#textInput::placeholder { color: var(--dim); }
.ptt { flex: 1; height: 54px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font: inherit; font-weight: 700; font-size: 0.98rem; cursor: pointer; user-select: none; touch-action: none; transition: all .12s; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.ptt.active { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #04121a; box-shadow: 0 0 26px rgba(34,211,238,.6); transform: scale(1.02); }

/* FAB mikrofon — sağ alt köşe (thumb zone) */
.mic-fab {
  position: fixed; right: 1.2rem; bottom: calc(6rem + var(--safe-bottom));
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 8px 28px rgba(124,58,237,.5), 0 0 0 4px rgba(124,58,237,.15);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; transition: all .15s; z-index: 15;
}
.mic-fab:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 10px 32px rgba(124,58,237,.6), 0 0 0 6px rgba(124,58,237,.2); }
.mic-fab:active:not(:disabled) { transform: scale(0.95); }
.mic-fab:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.mic-fab.active { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #04121a; box-shadow: 0 0 30px rgba(34,211,238,.6); }
.mic-fab .mic-icon { display: block; }
.mic-fab.listening { animation: mic-pulse 1.5s infinite; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 8px 28px rgba(124,58,237,.5), 0 0 0 4px rgba(124,58,237,.15); } 50% { box-shadow: 0 8px 28px rgba(34,211,238,.7), 0 0 0 12px rgba(34,211,238,.15); } }

/* Giriş moduna göre kontrol görünürlüğü */
.for-live, .for-ptt, .for-text { display: none; }
.app[data-input="live"] .for-live { display: inline-flex; }
.app[data-input="ptt"]  .for-ptt  { display: inline-flex; }
.app[data-input="text"] .for-text { display: inline-flex; }
.app[data-input="text"] #textInput { display: block; } /* textarea düzgün render olsun */

/* ═══ BOTTOM SHEET (ayarlar — Gemini tarzı) ═══ */
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 110%);
  width: 100%; max-width: 460px; background: var(--bg2);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 20px 20px 0 0; transition: transform .3s ease;
  /* v24-sheet-above-drawer (18.06.2026, Tansu): ayarlar (sheet) drawer'ın
     üstünde olmalı. Drawer z-index:40, sheet z-index:50 → ayarlar açılınca
     drawer altında kalır, history panelinin önünde. */
  z-index: 50; padding: 0 0 calc(0.5rem + var(--safe-bottom));
  max-height: 80dvh; overflow-y: auto;
}
.sheet.open { transform: translate(-50%, 0); box-shadow: 0 -22px 60px rgba(0,0,0,.55); }
.sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0.5rem auto; }
.sheet header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.9rem 0.9rem; font-weight: 700; font-size: 0.95rem; }
.sheet .row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--border); }
.sheet .row > span { font-size: 0.86rem; color: var(--dim); }
.sheet .row.info > span { color: var(--accent2); font-size: 0.8rem; line-height: 1.4; }
.sheet select { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.6rem; font: inherit; font-size: 0.85rem; min-height: 44px; }
.sheet input[type=range] { width: 130px; accent-color: var(--accent); }
.sheet-title { display: inline-flex; align-items: center; gap: 0.45rem; }
.sheet-title .ic { width: 18px; height: 18px; }
.row.col { flex-direction: column; align-items: stretch; gap: 0.55rem; }
.row-label { font-size: 0.86rem; color: var(--dim); }
.row.col .row-label { color: var(--text); font-weight: 600; font-size: 0.9rem; }
.row-help { font-size: 0.76rem; color: var(--dim); line-height: 1.45; }
.seg-wide { width: 100%; }
.seg-wide button { flex: 1; gap: 0.4rem; display: inline-flex; align-items: center; justify-content: center; }
.seg-wide button .ic { width: 16px; height: 16px; }

/* ═══ DRAWER (geçmiş) ═══ */
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 85vw; background: var(--bg2); border-right: 1px solid var(--border); transform: translateX(-105%); transition: transform .28s ease; z-index: 40; display: flex; flex-direction: column; visibility: hidden; padding-top: var(--safe-top); }
.drawer.open { transform: translateX(0); visibility: visible; box-shadow: 22px 0 60px rgba(0,0,0,.55); }
.drawer header { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.92rem; }
/* v24-sade-topbar: yeni sohbet + ayarlar butonları geçmiş panelinde
   (drawer) header altında, yan yana veya alt alta. Tansu "geçmiş yazısı
   altına konuşlandır" dedi. Butonlar geniş, ikon + label, hafif arka plan. */
.drawer-actions { display: flex; gap: 0.5rem; padding: 0.5rem 0.75rem 0.25rem; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); }
.drawer-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 40px; padding: 0 0.75rem; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; white-space: nowrap; }
.drawer-action:hover { background: rgba(255,255,255,.1); border-color: var(--accent); }
.drawer-action:active { transform: scale(.97); }
.drawer-action .ic-wrap { width: 16px; height: 16px; display: inline-flex; }
.drawer-action .ic-wrap svg { width: 16px; height: 16px; }
:root[data-theme="light"] .drawer-action { background: rgba(15,23,42,.05); border-color: rgba(15,23,42,.1); }
:root[data-theme="light"] .drawer-action:hover { background: rgba(15,23,42,.1); }
/* Çok küçük ekranda drawer-action label gizli, sadece ikon */
@media (max-width: 359px) {
  .drawer-action .da-label { display: none; }
  .drawer-action { padding: 0 0.5rem; min-height: 36px; }
}
.history-list { flex: 1; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.hi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.65rem 0.8rem; cursor: pointer; transition: border-color .15s; }
.hi:hover { border-color: var(--accent); }
.hi .t { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hi .m { font-size: 0.68rem; color: var(--dim); margin-top: 4px; display: flex; gap: 0.5rem; align-items: center; }
.hi .badge { background: rgba(124,58,237,.2); color: var(--accent2); border-radius: 5px; padding: 0 0.4rem; }

.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .28s; z-index: 35; }
.scrim.show { opacity: 1; pointer-events: auto; }

/* ═══ LOG (debug) ═══ */
.logbox { border-top: 1px solid var(--border); background: #05080e; flex-shrink: 0; }
.logbox summary { padding: 0.35rem 0.9rem; font-size: 0.7rem; color: var(--dim); cursor: pointer; font-family: 'Consolas', monospace; }
.log { height: 90px; overflow-y: auto; padding: 0 0.9rem 0.5rem; font-family: 'Consolas', monospace; font-size: 0.68rem; color: var(--dim); }
.log div { margin-bottom: 2px; }

/* ═══ RESPONSIVE (Gemini/ChatGPT mobile responsive) ═══ */
@media (max-width: 560px) {
  .hero-orb { width: 120px; height: 120px; }
  .hero-orb .orb-inner { width: 80px; height: 80px; }
  .brand { font-size: 0.9rem; }
  .status { font-size: 0.65rem; }
  .mic-fab { width: 60px; height: 60px; bottom: calc(5.5rem + var(--safe-bottom)); font-size: 1.5rem; }
  .pill { height: 48px; font-size: 0.88rem; padding: 0 1rem; }
  .composer-row { min-height: 48px; }
}
@media (min-width: 900px) {
  .hero-orb { width: 160px; height: 160px; }
  .hero-orb .orb-inner { width: 110px; height: 110px; }
  .mic-fab { width: 72px; height: 72px; font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ring.pulse, .dots span, .mic-fab.listening { animation: none; }
  .viz { display: none; }
}


/* ═══ OFFLINE BANNER KALDIRILDI (17.06.2026 — Tansu) ═══
   Banner tamamen kaldırıldı. Bağlantı durumu artık sadece status dot + progress
   kartları ile gösteriliyor. navigator.onLine Android/proxy'de yanlış değer
   döndürdüğü için banner yanlışlıkla sürekli çıkıyordu. */


/* ═══ ONBOARDING WIZARD (full-screen modal) ═══ */
.onboard {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(7,11,18,.95); backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  animation: fade-in .4s ease;
}
.onboard[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.onboard-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 24px; padding: 2rem 1.5rem; max-width: 380px; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 1rem;
}
.onboard-logo { display: flex; justify-content: center; }
.onboard-logo .logo { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--blue)); box-shadow: 0 0 24px var(--accent); }
.onboard h1 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.onboard p { color: var(--dim); font-size: 0.9rem; line-height: 1.5; }
.onboard-steps { display: flex; justify-content: center; gap: 0.4rem; }
.onboard-steps .step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all .3s; }
.onboard-steps .step-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }
.onboard-steps .step-dot.done { background: var(--green); }
.onboard-content { min-height: 100px; display: flex; flex-direction: column; gap: 0.7rem; align-items: center; justify-content: center; padding: 0.5rem 0; }
.onboard-content input { width: 100%; background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 0.6rem 0.8rem; font: inherit; font-size: 0.9rem; }
.onboard-content input:focus { outline: none; border-color: var(--accent); }
.onboard-content .status { font-size: 0.85rem; }
.onboard-content .status.ok { color: var(--green); }
.onboard-content .status.err { color: var(--red); }
.onboard-content .status.pending { color: var(--amber); }
.onboard-actions { display: flex; justify-content: center; }
.link-btn { background: none; border: 0; color: var(--dim); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.4rem 0.8rem; }
.link-btn:hover { color: var(--text); }

/* FAB long-press (PTT modu) */
.mic-fab.recording { background: linear-gradient(135deg, var(--red), #b91c1c); box-shadow: 0 0 32px rgba(239,68,68,.7); animation: mic-rec 1s infinite; }
@keyframes mic-rec { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ═══════════════════════════════════════════════════════════════
   AÇIK TEMA (light mode) — ayarlardan seçilir, data-theme="light"
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  --bg: #f4f6fb; --bg2: #ffffff; --card: #ffffff;
  --text: #131826; --dim: #5a6478; --border: #e2e6ee;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(900px 600px at 50% -8%, #e7ecf9 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 100%, #eef1fa 0%, transparent 55%),
    var(--bg);
}
:root[data-theme="light"] .topbar { background: rgba(244,246,251,.82); }
:root[data-theme="light"] .composer { background: rgba(244,246,251,.92); }
:root[data-theme="light"] .qpick { background: rgba(0,0,0,.04); }
:root[data-theme="light"] .qpick:hover { background: rgba(124,58,237,.12); }
:root[data-theme="light"] .msg.ai { background: #fff; box-shadow: 0 1px 2px rgba(20,30,60,.05); }
:root[data-theme="light"] .msg.user { background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(56,189,248,.12)); }
:root[data-theme="light"] .md code { background: rgba(0,0,0,.06); color: #6d28d9; }
:root[data-theme="light"] .seg { background: #fff; }
:root[data-theme="light"] .icon-btn { background: #fff; }
:root[data-theme="light"] #textInput { background: #fff; }
:root[data-theme="light"] .sheet select,
:root[data-theme="light"] .hi { background: #fff; }
:root[data-theme="light"] .scrim { background: rgba(20,30,60,.35); }
:root[data-theme="light"] .ptt { background: #fff; }
/* ═══ LIGHT MODE — mesaj kontrast düzeltmeleri (Tansu yönergesi 17.06.2026) ═══ */
/* Tool/directive kartları dark mode'da sarı/mor, light mode'da okunmuyor.
   Koyu renk + açık arka plan kullan ki yazı net görünsün. */
:root[data-theme="light"] .msg.tool {
  color: #92400e;             /* koyu kehribar — sarı (#fcd34d) yerine */
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.45);
}
:root[data-theme="light"] .msg.tool.directive {
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.35);
  color: var(--text);
}
:root[data-theme="light"] .msg.tool.directive .dir-head { color: #6d28d9; }
:root[data-theme="light"] .msg.tool.directive .dir-quote { color: var(--text); border-left-color: #6d28d9; }
:root[data-theme="light"] .msg.progress { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.28); }
:root[data-theme="light"] .msg.progress .prog-title { color: #6d28d9; }
:root[data-theme="light"] .msg.progress.done { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.4); }
:root[data-theme="light"] .msg.progress.done .prog-title { color: #166534; }
:root[data-theme="light"] .msg.progress.error { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.4); }
:root[data-theme="light"] .msg.progress.error .prog-title { color: #991b1b; }
:root[data-theme="light"] .msg.err { color: #991b1b; background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.4); }
:root[data-theme="light"] .msg.think { color: #6d28d9; background: rgba(167,139,250,.1); border-color: rgba(167,139,250,.35); }
/* Offline banner kaldırıldı — light mode kuralı silindi */
/* Kod blokları (Tansu şikâyeti 17.06.2026 — light temada koyu zemin okunmazdı):
   her iki temada hafif, göz yormayan arka plan + yüksek kontrast yazı. */
:root[data-theme="light"] .md .code pre { background: #f1f5f9; border-color: #cbd5e1; }
:root[data-theme="light"] .md .code pre code { color: #0f172a; }
:root[data-theme="light"] .md .code .copy { background: #e2e8f0; color: #1e293b; border-color: #cbd5e1; }

/* ════════════════════════════════════════════════════════════════════════
   v24-GLOBAL-PLAYER — chat main'in üst kısmında sticky ses oynatıcı.
   WhatsApp voice note player mantığı: tüm sesli mesajlar (ajan, AI, kendi
   mesajın) bu tek player'ı paylaşır. Mesaj balonunda artık player yok —
   sadece hoparlör butonu. Tıklayınca player görünür, kullanıcı nerede
   olursa olsun (hangi balona kaydıysa) yukarıdan kontrol eder.
   Mobile-first: küçük ekranda 48px yükseklik, dokunmatik scrubber.
   ────────────────────────────────────────────────────────────────────── */
/* sticky: chat main içinde en üstte, scroll edilse bile topbar'ın altında
   yapışık kalır. Tansu "konuşma penceresi bölümündeki üst kısmında" dedi
   (18.06.2026) — eski position: fixed top:0 (ekran tepesi) istemedi. */
.global-player { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(11,15,26,.85); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 16px rgba(0,0,0,.4); height: 56px; transform: translateY(-8px); opacity: 0; transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease; box-sizing: border-box; }
.global-player.visible { transform: translateY(0); opacity: 1; }
.global-player[hidden] { display: none; }
:root[data-theme="light"] .global-player { background: rgba(241,245,249,.92); border-bottom-color: rgba(15,23,42,.12); box-shadow: 0 4px 16px rgba(15,23,42,.15); }
/* Sol aksiyon butonu (⏳ / ⏸ / ▶) */
.gp-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(56,189,248,.4); background: rgba(56,189,248,.18); color: var(--cyan); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, transform .1s ease, opacity .15s ease; flex-shrink: 0; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.gp-btn:hover { background: rgba(56,189,248,.32); }
.gp-btn:active { transform: scale(.92); }
.gp-btn svg { width: 18px; height: 18px; }
/* v24-sade: hourglass/pulse animasyonu kaldırıldı (Tansu "sade tasarım" — ChatGPT
   voice player referansı, 18.06.2026). Sentez sırasında bekleme göstermeye gerek
   yok, ses başlayınca player direkt açılır. */
.gp-btn[data-icon="play"] { color: var(--green); border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.18); }
.gp-btn[data-icon="play"]:hover { background: rgba(34,197,94,.32); }
/* Waveform container — ses dalgası çubukları + geçen kısmı kaplayan overlay */
.gp-wave { flex: 1; min-width: 0; height: 32px; position: relative; display: flex; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: none; }
.gp-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.gp-bar { flex: 1; min-width: 2px; background: rgba(255,255,255,.28); border-radius: 1px; transition: background .15s ease; }
.gp-bar.played { background: var(--cyan); }
:root[data-theme="light"] .gp-bar { background: rgba(15,23,42,.28); }
:root[data-theme="light"] .gp-bar.played { background: var(--cyan); }
/* Geçen kısmı maskeleyen overlay (soldan sağa dolar) */
.gp-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgba(56,189,248,.12); border-right: 2px solid var(--cyan); pointer-events: none; transition: width .12s linear; border-radius: 2px; }
.gp-wave.dragging .gp-progress { transition: none; }
.gp-wave.dragging .gp-bar { transition: none; }
/* Süre göstergesi (sağda, küçük, dim) */
.gp-time { font-size: 0.72rem; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; flex-shrink: 0; user-select: none; }
/* v24-sade: ✕ kapat butonu ChatGPT tarzı nötr (gri), kırmızı vurgu kaldırıldı */
.gp-stop { width: 32px; height: 32px; color: var(--dim) !important; background: transparent !important; border-color: rgba(255,255,255,.15) !important; }
.gp-stop:hover { background: rgba(255,255,255,.08) !important; color: var(--text) !important; }
.gp-stop svg { width: 16px; height: 16px; }
:root[data-theme="light"] .gp-stop { border-color: rgba(15,23,42,.15) !important; }
:root[data-theme="light"] .gp-stop:hover { background: rgba(15,23,42,.06) !important; }

/* Mobile-first: küçük ekranda daha kompakt */
@media (max-width: 640px) {
  .global-player { height: 48px; padding: 0 8px; gap: 6px; }
  .gp-btn { width: 32px; height: 32px; }
  .gp-btn svg { width: 16px; height: 16px; }
  .gp-wave { height: 28px; }
  .gp-time { font-size: 0.66rem; min-width: 30px; }
  .gp-stop { width: 28px; height: 28px; }
  .gp-stop svg { width: 12px; height: 12px; }
}
/* v24-sade: çok küçük ekranda süre fontu kompakt, diğer kurallar korunuyor */