:root {
  --bg: #140f0c;
  --bg-panel: #1c1512;
  --bg-input: #221a15;
  --border: #34261c;
  --text: #f5ede4;
  --text-dim: #a89787;
  --ember: #ff7a1a;
  --ember-soft: #ffb648;
  --ember-glow: rgba(255, 122, 26, 0.35);
  --user-bubble: #2a1f18;
  --assistant-bubble: #1c1512;
  --error: #ff5252;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

.app {
  display: flex;
  height: 100vh;
  height: 100dvh; /* ⚠️ CANLI TESTTE GÖRÜLDÜ: mobil Chrome'da adres çubuğu
    görünürken 100vh, adres çubuğu GİZLENMİŞ gibi hesaplanan daha BÜYÜK bir
    değer veriyor — html/body'de overflow:hidden olduğu için (aşağıda) bu
    fazlalık kısmı (input çubuğu/gönder düğmesi DAHİL) ekran dışına taşıp
    KAYBOLUYOR, kaydırarak da ulaşılamıyor ("soru soramıyorum" şikayeti
    buydu). dvh gerçek görünür yüksekliği ölçüyor, bu sorunu çözüyor.
    Eski tarayıcılar dvh'yi TANIMAZSA bu satır sessizce yok sayılır, üstteki
    vh değeri geçerli kalır — güvenli aşamalı iyileştirme. */
  width: 100vw;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-input); color: var(--text); }

.brand-mini { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.demo-badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; color: var(--ember-soft);
  border: 1px solid var(--ember); border-radius: 6px; padding: 2px 6px; line-height: 1.4;
}
.quota-badge {
  font-size: 11.5px; color: var(--text-dim); padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-input); white-space: nowrap;
}
.quota-badge.low { color: var(--error); border-color: var(--error); }
.brand-mini .brand-glow { font-size: 18px; filter: drop-shadow(0 0 8px var(--ember-glow)); }
.brand-mini .brand-name {
  background: linear-gradient(120deg, var(--ember-soft), var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar-brand { display: none; }

/* ---- sohbet geçmişi kenar çubuğu — kalıcı, localStorage'da (bkz. app.js) ---- */
.history-sidebar {
  width: 280px;
  height: 100vh;
  height: 100dvh; /* .app'teki dvh notuyla aynı sebep */
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: margin-left 0.2s ease;
}
.history-sidebar.collapsed { margin-left: -280px; }

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar-new-chat {
  margin: 12px 16px;
  padding: 9px 12px;
  background: linear-gradient(120deg, var(--ember), var(--ember-soft));
  color: #1a0f08;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.history-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }

.history-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
}
.history-item:hover, .history-item.active { background: var(--bg-input); color: var(--text); }
.history-item .hi-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
  border: none; background: transparent; color: inherit; font: inherit; padding: 2px 0; width: 100%;
}
.history-item .hi-title:focus { outline: 1px solid var(--ember); border-radius: 4px; }
.history-item .hi-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 11.5px; opacity: 0; padding: 3px 5px; border-radius: 6px; }
.history-item:hover .hi-btn { opacity: 1; }
.history-item .hi-btn:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.history-item .hi-delete:hover { color: var(--error); }

.history-empty { padding: 20px 16px; color: var(--text-dim); font-size: 12.5px; text-align: center; }
.history-footer { padding: 10px 16px 14px; font-size: 11px; color: var(--text-dim); text-align: center; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.history-footer a:hover { text-decoration: underline !important; }

.sidebar-overlay { display: none; }

.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ---- topbar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.sidebar-toggle { display: none; }

.controls { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

.tier-switch { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.tier-btn { background: transparent; border: none; color: var(--text-dim); padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tier-btn:hover { color: var(--text); }
.tier-btn.active { background: linear-gradient(120deg, var(--ember), var(--ember-soft)); color: #1a0f08; }

.model-select, .persona-select {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text);
  padding: 7px 10px; border-radius: 10px; font-size: 12.5px; cursor: pointer;
}
.model-select { max-width: 150px; }

/* ---- sohbet alanı ---- */
.chat-area { flex: 1; overflow-y: auto; padding: 28px 16%; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 1100px) { .chat-area { padding: 24px 6%; } }

.empty-state { margin: auto; text-align: center; color: var(--text-dim); max-width: 560px; }
.empty-glow { font-size: 46px; filter: drop-shadow(0 0 20px var(--ember-glow)); margin-bottom: 14px; }
.empty-state h1 { color: var(--text); font-size: 24px; margin: 0 0 8px; }
.empty-state p { font-size: 13.5px; line-height: 1.6; margin: 0 0 22px; }

.starter-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.starter-chip {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text);
  padding: 9px 14px; border-radius: 12px; font-size: 12.5px; cursor: pointer; text-align: left;
  transition: border-color 0.15s, transform 0.1s;
}
.starter-chip:hover { border-color: var(--ember); transform: translateY(-1px); }

.bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.65;
  position: relative;
}
.bubble.user { align-self: flex-end; background: var(--user-bubble); border: 1px solid var(--border); border-bottom-right-radius: 4px; white-space: pre-wrap; word-wrap: break-word; padding-right: 34px; }
.bubble.assistant { align-self: flex-start; background: var(--assistant-bubble); border: 1px solid var(--border); border-bottom-left-radius: 4px; padding-right: 34px; }
.bubble.assistant.plain { white-space: pre-wrap; word-wrap: break-word; }
.bubble.assistant.streaming::after { content: '▍'; color: var(--ember); animation: blink 1s step-start infinite; }
.bubble.status { align-self: flex-start; background: transparent; border: 1px dashed var(--border); color: var(--text-dim); font-size: 13px; font-style: italic; }
.bubble.error { align-self: center; background: rgba(255, 82, 82, 0.1); border: 1px solid var(--error); color: var(--error); font-size: 13px; }
@keyframes blink { 50% { opacity: 0; } }

/* İlk token gelene kadar (ya da Gember Code'da bir araç çalışırken) ne
   olduğunu göstermek için — sessiz/boş bir balon yerine. */
.bubble.thinking { display: flex; align-items: center; gap: 8px; padding-top: 14px; padding-bottom: 14px; }
.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ember-soft);
  animation: thinking-bounce 1.2s infinite ease-in-out both;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinking-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.thinking-label { font-size: 12.5px; color: var(--text-dim); }

/* markdown içerik biçimlendirmesi (marked.js çıktısı) */
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { color: var(--text); line-height: 1.35; margin: 18px 0 8px; }
.md h1 { font-size: 19px; } .md h2 { font-size: 17px; } .md h3 { font-size: 15px; }
.md p { margin: 0 0 10px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; }
.md li { margin: 3px 0; }
.md a { color: var(--ember-soft); }
.md blockquote { margin: 0 0 10px; padding: 4px 12px; border-left: 3px solid var(--ember); color: var(--text-dim); }
.md strong { color: var(--text); }
.md code { background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 13px; font-family: 'Cascadia Code', Consolas, monospace; }
.md pre { position: relative; margin: 4px 0 12px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.md pre code.hljs { display: block; padding: 14px; font-size: 13px; overflow-x: auto; background: #17120f !important; }
.md pre .code-copy {
  position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.35); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 11px; padding: 4px 8px; border-radius: 7px; cursor: pointer;
}
.md pre .code-copy:hover { color: var(--text); border-color: var(--ember); }
.md table { border-collapse: collapse; margin: 0 0 12px; font-size: 13px; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; }
.md hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

.bubble.user, .bubble.assistant { padding-right: 60px; } /* iki düğmeye yer aç (kopyala + sesli oku/düzenle) */

.bubble-copy, .bubble-speak, .bubble-edit {
  position: absolute; top: 6px; background: transparent; border: none; color: var(--text-dim);
  font-size: 12.5px; cursor: pointer; padding: 4px 5px; border-radius: 6px; opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.bubble-copy { right: 6px; }
.bubble-speak, .bubble-edit { right: 32px; }
.bubble:hover .bubble-copy, .bubble:hover .bubble-speak, .bubble:hover .bubble-edit { opacity: 1; }
.bubble-copy:hover, .bubble-speak:hover, .bubble-edit:hover { background: var(--bg-input); color: var(--text); }

.msg-image { max-width: 260px; max-height: 260px; border-radius: 10px; display: block; border: 1px solid var(--border); }
.msg-image-caption { margin-top: 8px; white-space: pre-wrap; }
.bubble.assistant .msg-image { max-width: 100%; max-height: none; width: 100%; }

.msg-actions { display: flex; gap: 6px; margin-top: 2px; }
.msg-action-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-size: 11.5px; padding: 5px 10px; border-radius: 8px; cursor: pointer; align-self: flex-start;
}
.msg-action-btn:hover { color: var(--text); border-color: var(--ember); }

/* ---- girdi çubuğu ---- */
.input-bar { display: flex; align-items: flex-end; gap: 10px; padding: 16px 16%; border-top: 1px solid var(--border); background: var(--bg-panel); flex-shrink: 0; }
@media (max-width: 1100px) { .input-bar { padding: 14px 6%; } }

.msg-input { flex: 1; resize: none; max-height: 200px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-family: inherit; outline: none; }
.msg-input:focus { border-color: var(--ember); }

.send-btn, .stop-btn, .live-mode-btn { border: none; width: 42px; height: 42px; border-radius: 12px; font-size: 16px; cursor: pointer; flex-shrink: 0; transition: transform 0.1s; }
.send-btn { background: linear-gradient(120deg, var(--ember), var(--ember-soft)); color: #1a0f08; }
.send-btn:hover { transform: scale(1.06); }
.send-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.stop-btn { background: var(--error); color: #fff; }
.stop-btn:hover { transform: scale(1.06); }
.live-mode-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); }
.live-mode-btn:hover { border-color: var(--ember); transform: scale(1.06); }

.attach-btn, .imagegen-btn { width: 42px; height: 42px; border-radius: 12px; font-size: 16px; flex-shrink: 0; }
.imagegen-btn.active { background: linear-gradient(120deg, var(--ember), var(--ember-soft)); color: #1a0f08; }

.image-preview-strip {
  display: none; align-items: center; gap: 10px; padding: 10px 16%; background: var(--bg-panel);
  border-top: 1px solid var(--border);
}
@media (max-width: 1100px) { .image-preview-strip { padding: 10px 6%; } }
.image-preview-strip .preview-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.image-preview-strip .preview-remove {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-dim); width: 26px; height: 26px;
  border-radius: 50%; cursor: pointer; font-size: 12px;
}
.image-preview-strip .preview-remove:hover { color: var(--error); border-color: var(--error); }
.image-preview-strip .preview-note { font-size: 12px; color: var(--text-dim); }

/* ---- Live modu: sesli konuşma (SADECE mobil — bkz. @media altta) ---- */
.live-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 500;
  background: radial-gradient(circle at 50% 38%, #2a1710, #0d0806 75%);
  flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 24px;
}
.live-overlay.open { display: flex; }
.live-close {
  position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;
  background: rgba(255,255,255,0.07); border: none; border-radius: 50%;
  color: var(--text); font-size: 17px; cursor: pointer;
}
.live-orb {
  width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, var(--ember-soft), var(--ember) 70%);
  box-shadow: 0 0 70px var(--ember-glow);
  transition: transform 0.25s ease;
  cursor: pointer;
}
.live-orb.listening { animation: liveListenPulse 1.6s ease-in-out infinite; }
.live-orb.thinking { animation: liveThinkPulse 0.9s ease-in-out infinite; opacity: 0.8; }
.live-orb.speaking { animation: liveSpeakPulse 0.45s ease-in-out infinite alternate; }
@keyframes liveListenPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes liveThinkPulse { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.02); } }
@keyframes liveSpeakPulse { from { transform: scale(1); } to { transform: scale(1.15); } }
.live-state { color: var(--text); font-size: 15px; font-weight: 700; text-align: center; }
.live-transcript { color: var(--text-dim); font-size: 13.5px; max-width: 85%; text-align: center; min-height: 20px; line-height: 1.5; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ember); }

/* ---- mobil: kenar çubuğu overlay'e dönüşür ---- */
@media (max-width: 820px) {
  /* ⚠️ ÖNCEDEN .collapsed'ın YOKLUĞU "açık" anlamına geliyordu — yani JS
     hiç çalışmadan/geç çalışırsa (yavaş bağlantı, script hatası vb.)
     kenar çubuğu mobilde varsayılan olarak AÇIK kalıyordu (canlı testte
     GÖRÜLDÜ: "sohbet geçmişi hep açık kalıyor"). Artık mobilde varsayılan
     durum SAF CSS ile KAPALI — JS'in çalışıp çalışmadığından bağımsız.
     Açmak için JS ayrı bir .mobile-open sınıfı ekliyor (openSidebar/
     closeSidebar, bkz. app.js), .collapsed masaüstünde olduğu gibi kalıyor. */
  .history-sidebar {
    position: fixed; top: 0; left: 0; z-index: 200;
    transform: translateX(-100%); margin-left: 0 !important;
    transition: transform 0.2s ease;
  }
  .history-sidebar.mobile-open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 150; }
  .sidebar-toggle { display: inline-block; }
  .topbar-brand { display: flex; }
  /* .topbar kendisi wrap etmeden .controls'e width:100% vermek işe yaramıyordu
     — satırdaki kalan dar boşluğa sıkışıp KENDİ İÇİNDE dikey yığılıyordu
     (canlı testte GÖRÜLDÜ: tüm kontroller aynı x'te üst üste satırlara
     bölünmüştü). topbar'ı da wrap ettirince .controls gerçekten kendi tam
     genişlikte satırına düşüyor. */
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .controls { width: 100%; justify-content: flex-start; margin-left: 0; }
  /* flex-shrink:0 olmadan dar bir satıra sıkışan öğeler (özellikle
     quota-badge — metni olduğundan kısa gösterip okunmaz hale geliyordu,
     canlı testte GÖRÜLDÜ) küçültülüyordu; her öğe artık ya kendi doğal
     genişliğinde kalır ya da bir sonraki satıra kayar, asla ezilmez. */
  .tier-switch, .model-select, .persona-select, .icon-btn, .quota-badge { flex-shrink: 0; }

  /* Live modu (sesli konuşma) BİLEREK sadece mobilde — kullanıcının isteği,
     ayrıca STT/TTS'in doğal kullanım şekli zaten "elde telefon konuşmak". */
  .live-mode-btn { display: flex !important; align-items: center; justify-content: center; }
}