/* AI Sohbet tasarım sistemi — Uzser Portal'dan uyarlandı (uzser-ai-*).

   ⚠️ Bu dosya bir zamanlar KABUK jetonlarını (--uz-brand, --uz-ink, --uz-border,
   --uz-content-bg …) burada yeniden tanımlıyordu ve site.css'ten SONRA yüklendiği
   için onu eziyordu. Sonuç ölçüldü: koyu tema doğru çalışıyor (koyu bloklar en
   sonda), ama AÇIK temada tüm uygulama eski mavi değerlere düşüyordu — üstelik
   site.css'e bakan biri sebebini göremiyordu.

   Artık kabuk jetonları TEK yerde: site.css. Burada yalnız bu dosyaya özgü
   olanlar kalır; onlar da site.css'te üç durumlu olarak tanımlanır. */

.uzser-ai-fab-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 1080; }
.uzser-ai-fab {
    width: 56px; height: 56px; border-radius: 50%; border: none;
    background: var(--uz-brand);
    color: var(--uz-brand-fg); font-size: 22px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(var(--uz-brand-rgb), .30);
    display: flex; align-items: center; justify-content: center; transition: transform .12s ease;
}
.uzser-ai-fab:hover { transform: translateY(-2px) scale(1.04); }

/* --- Açılır panel --- */
.uzser-ai-panel {
    position: absolute; right: 0; bottom: 70px; width: 390px; height: 560px; max-height: 78vh;
    background: #fff; border: 1px solid var(--uz-border); border-radius: 14px;
    box-shadow: 0 14px 44px rgba(15,23,42,.26); display: flex; flex-direction: column; overflow: hidden;
}
.uzser-ai-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--uz-brand);
    color: var(--uz-brand-fg); font-weight: 600; font-size: 14.5px;
}
.uzser-ai-panel-head button {
    background: rgba(255,255,255,.15); border: none; color: #fff; width: 28px; height: 28px;
    border-radius: 7px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}
.uzser-ai-panel-head button:hover { background: rgba(255,255,255,.3); }
.uzser-ai-panel-body { flex: 1; min-height: 0; display: flex; }

@media (max-width: 560px) {
    .uzser-ai-panel { width: 94vw; height: 76vh; }
}

/* --- Ortak sohbet görünümü --- */
.uzser-ai-view {
    display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%;
    background: var(--uz-content-bg);
    /* ⚠️ OKUNUR SATIR GENİŞLİĞİ. Sohbet sütunu eskiden pencere kadar genişti: geniş bir
       ekranda tek satır 1300 px'e yayılıyordu ve göz satır sonundan satır başına dönerken
       yerini kaybediyordu. En çok cevaplarda acıtıyordu, çünkü tablo ve liste orada. */
    --uz-chat-measure: 840px;
}
.uzser-ai-messages {
    flex: 1; min-height: 0; overflow-y: auto; padding: 18px 14px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
/* Sütun ORTALANIR ve genişliği kapsayıcıdan gelir: mesajlar, onay kartları ve "yapıldı"
   satırları aynı hizada dursun. Tek tek hizalanmış olsalardı, sonradan eklenen her yeni
   blok hizadan düşerdi — nitekim onay kartları tam olarak böyle kaymıştı. */
.uzser-ai-messages > * { width: 100%; max-width: var(--uz-chat-measure); }
.uzser-ai-messages > * { flex-shrink: 0; }
/* ⚠️ flex-shrink: 0 ŞART. Kaydırılan sütunda taşma gizli (overflow:hidden) bir öğe — onay kartı — en küçük
   yüksekliğini 0 sayar ve konuşma uzayınca EZİLİR: "1 işlem onayınızı bekliyor" başlığı görünüp düğmeler
   kayboluyordu, kullanıcı onaylayamadı (2026-10-05). */

/* ⚠️ Karşılama eskiden bir robot ikonu ve tek paragraftı. Ölçülen eksik şuydu: ekran ne
   YAPABİLECEĞİNİ söylüyor ama NE SORULACAĞINI göstermiyordu — ilk kullanıcı boş bir yazı
   alanına bakıp kalıyordu. Örnek sorular okunmak için değil, TIKLANMAK için var. */
.uzser-ai-empty { margin: auto; text-align: center; color: var(--uz-ink-soft); max-width: 620px; padding: 8px 4px; }
.uzser-ai-empty > i { font-size: 30px; display: block; margin-bottom: 12px; color: var(--uz-brand); }
.uzser-ai-empty h2 { font-size: 19px; font-weight: 600; color: var(--uz-ink); margin: 0 0 6px; letter-spacing: -.01em; }
.uzser-ai-empty p { font-size: 13.5px; line-height: 1.6; margin: 0 auto; max-width: 48ch; }
.uzser-ai-starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.uzser-ai-starter {
    display: flex; align-items: flex-start; gap: 9px; text-align: left; width: 100%;
    padding: 10px 12px; cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1.45;
    color: var(--uz-ink); background: var(--uz-surface);
    border: 1px solid var(--uz-border); border-radius: var(--uz-radius);
    transition: border-color .15s ease, background .15s ease;
}
.uzser-ai-starter:hover { border-color: var(--uz-brand); background: var(--uz-brand-soft); }
.uzser-ai-starter:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: 2px; }
.uzser-ai-starter > i { color: var(--uz-brand); font-size: 14px; margin-top: 1px; flex: 0 0 auto; }
@media (max-width: 620px) { .uzser-ai-starters { grid-template-columns: 1fr; } }

.uzser-ai-msg { display: flex; flex-direction: column; }
.uzser-ai-msg.user { align-items: flex-end; }
.uzser-ai-msg.assistant, .uzser-ai-msg.tool { align-items: flex-start; }

.uzser-ai-bubble {
    padding: 14px 16px; border-radius: var(--uz-radius-lg); font-size: 14.5px; line-height: 1.62;
    white-space: normal; word-break: break-word;
}
/* Kullanıcının sözü sütunu DOLDURMAZ, modelinki doldurur. Kısa soruyu uzun cevaptan
   ayıran şey bu; ikisi de tam genişlikken konuşma tek blok gibi okunuyordu. */
.uzser-ai-msg.user .uzser-ai-bubble {
    max-width: 86%; background: var(--uz-brand); color: var(--uz-brand-fg);
    border-bottom-right-radius: 5px; padding: 11px 15px;
    /* Satır sonları korunur: Shift+Enter ile yazılan mesaj ve sohbet formu yanıtı ("- Alan: değer" satırları). */
    white-space: pre-line;
}
/* ⚠️ Cevap artık BALON değil KART: pano bileşenleriyle aynı yüzey dili (yarıçap,
   kenar ve yalnız açık temada gölge). Cevabın içinde tablo, grafik ve çıkarım var;
   sohbet balonu gibi çizilince bunlar düz bir metin akışı gibi okunuyordu. */
.uzser-ai-msg.assistant .uzser-ai-bubble {
    background: var(--uz-surface); color: var(--uz-ink);
    border: 1px solid var(--uz-border); border-bottom-left-radius: 5px;
    box-shadow: var(--uz-shadow-card);
}
/* Cevabın İLK cümlesi sonucun kendisidir; onu bulmak için paragraf okumak gerekmesin. */
.uzser-ai-msg.assistant .uzser-ai-bubble > p:first-child {
    font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--uz-ink);
}
/* Cevabın içindeki tablo pano tablosuyla aynı okunsun: sabit genişlikli rakam, ince ayraç. */
.uzser-ai-msg.assistant .uzser-ai-bubble table {
    width: 100%; border-collapse: collapse; font-size: 13px; margin: 2px 0;
    font-variant-numeric: tabular-nums;
}
.uzser-ai-msg.assistant .uzser-ai-bubble th {
    text-align: left; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--uz-ink-faint); font-weight: 700; padding: 0 10px 7px 0;
    border-bottom: 1px solid var(--uz-border);
}
.uzser-ai-msg.assistant .uzser-ai-bubble td {
    padding: 7px 10px 7px 0; border-bottom: 1px solid var(--uz-border-soft);
}
.uzser-ai-msg.assistant .uzser-ai-bubble tr:last-child td { border-bottom: 0; }

/* Accordion (düşünme + araçlar) — kapalı gelir, ok ile açılır */
.uzser-ai-think, .uzser-ai-tools { margin-bottom: 4px; font-size: 12.5px; color: var(--uz-ink-soft); }
.uzser-ai-think summary, .uzser-ai-tools summary {
    cursor: pointer; user-select: none; list-style: none; display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 4px; border-radius: 6px;
}
.uzser-ai-think summary:hover, .uzser-ai-tools summary:hover { background: var(--uz-surface-sunk); }
.uzser-ai-think summary::-webkit-details-marker, .uzser-ai-tools summary::-webkit-details-marker { display: none; }
.uzser-ai-think summary::before, .uzser-ai-tools summary::before {
    content: "\F285"; font-family: "bootstrap-icons"; font-size: 11px; transition: transform .15s ease; color: var(--uz-ink-soft);
}
.uzser-ai-think[open] summary::before, .uzser-ai-tools[open] summary::before { transform: rotate(90deg); }
.uzser-ai-acc-hint { color: var(--uz-ink-soft); font-size: 11px; opacity: .8; }
.uzser-ai-think > div {
    margin-top: 4px; padding: 6px 9px; background: var(--uz-surface-sunk); color: var(--uz-ink);
    border: 1px solid var(--uz-border-soft); border-radius: var(--uz-radius-sm); white-space: pre-wrap;
}
.uzser-ai-tools-body { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.uzser-ai-rag summary { color: #2e7d6b; }
.uzser-ai-rag .uzser-ai-tool { background: #eafaf4; border-color: #bfe9d8; color: #2e6b5b; }

/* AI yanıtında markdown render (başlık/tablo/liste/kod) */
.uzser-ai-md > :first-child { margin-top: 0; }
.uzser-ai-md > :last-child { margin-bottom: 0; }
.uzser-ai-md h1, .uzser-ai-md h2, .uzser-ai-md h3, .uzser-ai-md h4 { margin: 8px 0 4px; font-weight: 600; line-height: 1.25; }
.uzser-ai-md h1 { font-size: 17px; } .uzser-ai-md h2 { font-size: 15.5px; } .uzser-ai-md h3 { font-size: 14px; } .uzser-ai-md h4 { font-size: 13px; }
.uzser-ai-md p { margin: 4px 0; }
.uzser-ai-md ul, .uzser-ai-md ol { margin: 4px 0; padding-left: 20px; }
.uzser-ai-md li { margin: 2px 0; }
.uzser-ai-md code { background: var(--uz-surface-sunk); border-radius: var(--uz-radius-sm); padding: 1px 5px; font-size: 12.5px; }
.uzser-ai-md pre { background: #2b303b; color: #e6e9ef; border-radius: 8px; overflow-x: auto; margin: 6px 0; }
.uzser-ai-md pre code { background: none; color: inherit; padding: 0; }
.uzser-ai-md blockquote { border-left: 3px solid #cfd6e0; margin: 6px 0; padding: 2px 10px; color: #6b7689; }
.uzser-ai-md table { border-collapse: collapse; margin: 6px 0; width: auto; max-width: 100%; font-size: 12.5px; }
.uzser-ai-md th, .uzser-ai-md td { border: 1px solid var(--uz-border); padding: 4px 9px; text-align: left; }
.uzser-ai-md th { background: var(--uz-grid-head-bg); font-weight: 600; }
.uzser-ai-md a { color: var(--uz-brand); }

/* Zamanlanmış görev çalıştırma geçmişi — dikey kartlar; özet .uzser-ai-md ile markdown render edilir. */
.uzser-runs { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.uzser-run { border: 1px solid var(--uz-border); border-radius: 10px; padding: 10px 12px; }
.uzser-run-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uzser-run-date { font-weight: 600; font-size: 13px; }
.uzser-run-body { margin-top: 8px; max-height: 340px; overflow-y: auto; font-size: 13px; padding-right: 6px; }

.uzser-ai-chart { margin: 8px 0; background: var(--uz-surface); border: 1px solid var(--uz-border); border-radius: var(--uz-radius); padding: 8px 6px; }
.uzser-ai-chart-raw { background: var(--uz-surface-sunk); border: 1px dashed var(--uz-border); border-radius: var(--uz-radius); padding: 8px 10px; font-size: 12px; overflow-x: auto; }

/* Sohbet formu (```form): yapay zekânın kullanıcıdan istediği bilgi. Alanlar akış formunun çizicisiyle gelir. */
.uzser-ai-form { margin: 10px 0; background: var(--uz-surface); border: 1px solid var(--uz-border); border-radius: var(--uz-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.uzser-ai-form-baslik { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--uz-ink); }
.uzser-ai-form-baslik > .bi { color: var(--uz-brand); }
.uzser-ai-form-durum { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--uz-ink-soft); }
.uzser-ai-form-aciklama { font-size: 13px; color: var(--uz-ink-soft); }
.uzser-ai-form .dxbl-btn { align-self: flex-start; }
.uzser-ai-form.kilitli { background: var(--uz-surface-sunk); }
.uzser-ai-form-alanlar { margin: 0; padding-left: 18px; font-size: 12px; color: var(--uz-ink-soft); }

/* Canlı katmanın alt kenar taraması (bkz. .uzser-ai-katman). */
@keyframes uzserAiSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }


/* Yörünge göstergesi: iki karşıt yönde dönen halka + nabız atan çekirdek. */
.uzser-ai-orbit { width: 30px; height: 30px; position: relative; flex: 0 0 auto; }
.uzser-ai-orbit i {
    position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent;
    border-top-color: var(--uz-brand); border-right-color: var(--uz-brand);
    animation: uzserAiSpin 1.15s cubic-bezier(.6,.15,.4,.85) infinite;
}
.uzser-ai-orbit i:nth-child(2) {
    inset: 5px; border-top-color: var(--uz-brand-dark); border-right-color: transparent;
    animation-duration: .85s; animation-direction: reverse; opacity: .8;
}
.uzser-ai-orbit i:nth-child(3) {
    inset: 10px; border: none; background: var(--uz-brand);
    animation: uzserAiCore 1.4s ease-in-out infinite; opacity: .9;
}
@keyframes uzserAiSpin { to { transform: rotate(360deg); } }
@keyframes uzserAiCore { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
.uzser-ai-thinkpulse { color: #d9a441; animation: uzserAiCore 1.4s ease-in-out infinite; }

/* "Yazıyor" noktaları — ●●● karakterleri yerine sıçrayan üç nokta. */
.uzser-ai-typing { display: inline-flex; gap: 3px; align-items: center; }
.uzser-ai-typing b {
    width: 4px; height: 4px; border-radius: 50%; background: #9aa4b2;
    animation: uzserAiBlink 1.25s ease-in-out infinite;
}
.uzser-ai-typing b:nth-child(2) { animation-delay: .18s; }
.uzser-ai-typing b:nth-child(3) { animation-delay: .36s; }
@keyframes uzserAiBlink {
    0%, 100% { opacity: .25; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-2px); }
}

.uzser-ai-tool {
    font-size: 12px; color: #5b6678; background: #eef4ff;
    border: 1px solid #d7e3fb; border-radius: 8px; padding: 5px 9px;
    display: flex; align-items: flex-start; gap: 8px;
    animation: uzserAiRise .3s cubic-bezier(.22,.9,.35,1) both;
}
/* Araç kartı: Türkçe ad ÖNDE ve okunur, ham anahtar küçük/soluk ikincil.
   (Ekran eskiden yalnız ham anahtarı basıyordu; oysa katalogdaki adlar zaten Türkçe.) */
.uzser-ai-toolbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uzser-ai-toolname { font-size: 13px; font-weight: 600; color: var(--uz-ink); line-height: 1.35; }
.uzser-ai-toolsub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: #7c8798; }
/* Balonun İÇİNDE, metnin arasında görünen işlem accordion'u: cevabın akışını kesmesin diye
   nötr ve sola aksanlı — hangi işlem grubunun hangi cümleden sonra çalıştığı okunur kalsın. */
.uzser-ai-tools-inline {
    margin: 6px 0; border-left: 3px solid #9db4dd; background: #f7f9fc;
    border-radius: 0 8px 8px 0; padding: 3px 8px; max-width: 100%;
}
.uzser-ai-tools-inline > summary { font-size: 12px; color: #5b6678; }
.uzser-ai-tools-inline .uzser-ai-tool { background: transparent; border: 0; padding: 2px 0; }
.uzser-ai-tools-inline .uzser-ai-tool code { background: transparent; padding: 0; color: #3a4a63; }
.uzser-ai-plan > summary { color: var(--uz-ink-soft); }
html[data-bs-theme="dark"] .uzser-ai-tools-inline { background: var(--uz-surface-sunk); }
html[data-bs-theme="dark"] .uzser-ai-tools-inline .uzser-ai-tool code { color: var(--uz-ink-soft); }
/* ── ONAY = KARAR KARTI ──────────────────────────────────────────────────────
   ⚠️ Eskiden "çalıştırılan araçlar" ile AYNI dildeydi: küçük bir accordion satırı,
   ince amber çizgi, minik onay kutuları. Ekranda ölçüldü — sayfadaki en önemli şey
   (geri alınamayan bir işlemin kapısı) tamamlanmış bir araç kaydıyla aynı ağırlıkta
   görünüyordu. Karar kartı, bir kayıt değil bir SORUDUR; öyle de görünmeli. */
.uzser-ai-action {
    margin-top: 8px; background: var(--uz-surface);
    border: 1px solid var(--uz-warn); border-left-width: var(--uz-stripe);
    border-radius: var(--uz-radius); padding: 0; max-width: 100%; overflow: hidden;
}
.uzser-ai-action > summary {
    color: var(--uz-ink); font-weight: 600; font-size: 13.5px;
    background: var(--uz-warn-soft); padding: 8px 12px; margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.uzser-ai-action > summary::before { color: var(--uz-warn); }
.uzser-ai-action-body { margin: 0; padding: 10px 12px 12px; }
/* Mesaj sütunundaki karar kartı sütun genişliğinde kalır (yukarıdaki max-width:100% onu tam genişliğe yayıyordu). */
.uzser-ai-messages > .uzser-ai-action { max-width: var(--uz-chat-measure); }
/* Bekleyen onay listenin ALTINA yapışır: yukarı kaydırılsa da karar düğmeleri görünür kalır. */
.uzser-ai-messages > .uzser-ai-batch { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 18px rgba(15, 23, 42, .10); }

/* Karar satırı: ne yapılacağı ve NE ETKİSİ OLACAĞI birlikte. Yalnız başlık göstermek,
   "Pano oluştur" ile "Stok transferini onayla"yı aynı şey gibi okutuyordu. */
.uzser-ai-batch-item {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 8px 10px; margin-bottom: 6px; font-size: 13.5px; color: var(--uz-ink);
    background: var(--uz-surface-sunk); border: 1px solid var(--uz-border-soft);
    border-radius: var(--uz-radius); cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
.uzser-ai-batch-item:hover { border-color: var(--uz-warn); }
.uzser-ai-batch-item input { margin: 2px 0 0; flex-shrink: 0; }

/* İşaretsiz satır SÖNER: hangi işlemin reddedileceği tek bakışta görünmeli —
   "işaretsizler reddedilir" cümlesini okumaya bırakmak, geri alınamayan bir karar
   için fazla ince bir ipucuydu. */
.uzser-ai-batch-item:has(input:not(:checked)) { opacity: .55; background: transparent; }
.uzser-ai-batch-item:has(input:not(:checked)) .uzser-ai-batch-red { display: inline; }

.uzser-ai-batch-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uzser-ai-batch-title { font-weight: 600; line-height: 1.35; }
.uzser-ai-batch-impact { font-size: 12px; color: var(--uz-ink-soft); line-height: 1.45; }
.uzser-ai-batch-red { display: none; font-size: 11px; color: var(--uz-danger); font-weight: 600; }

.uzser-ai-action-buttons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.uzser-ai-action .btn-sm { font-size: 12.5px; padding: 5px 13px; border-radius: var(--uz-radius-sm); }

/* ── ÇÖZÜLMÜŞ İŞLEM ──────────────────────────────────────────────────────────
   ⚠️ Eskiden tek satırlık, kapalı bir accordion'du: onaydan sonra kullanıcı ne
   olduğuna dair neredeyse hiçbir geri bildirim görmüyordu. Sonuç artık AÇIK. */
.uzser-ai-done {
    margin-top: 8px; background: var(--uz-ok-soft); border: 1px solid var(--uz-ok);
    border-left-width: var(--uz-stripe); border-radius: var(--uz-radius);
    padding: 9px 12px; display: flex; align-items: flex-start; gap: 9px;
    font-size: 13.5px; color: var(--uz-ink);
}
.uzser-ai-done > i { color: var(--uz-ok); margin-top: 2px; flex: 0 0 auto; }
.uzser-ai-done-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uzser-ai-done-title { font-weight: 600; }
.uzser-ai-done-result { font-size: 12.5px; color: var(--uz-ink-soft); line-height: 1.5; }
/* Onaylanıp ÇALIŞIRKEN hata veren işlem (11-04): yeşil tik "yapıldı" sanılıyordu. */
.uzser-ai-done.hata { background: var(--uz-danger-soft); border-color: var(--uz-danger); }
.uzser-ai-done.hata > i { color: var(--uz-danger); }

/* ── BAŞARISIZ TUR ───────────────────────────────────────────────────────────
   ⚠️ Böyle bir yüzey HİÇ yoktu. Sağlayıcı hatası istemcide yutuluyordu ve geriye
   BOŞ bir asistan balonu kalıyordu: HTTP 200, hata yok, metin yok. Kullanıcı
   açısından bu, yanıt beklemekle arıza arasındaki farkı göremediği bir sessizlik.
   Çözülmüş işlem kartıyla aynı iskelet, tehlike jetonlarıyla. */
.uzser-ai-error {
    margin-top: 8px; background: var(--uz-danger-soft); border: 1px solid var(--uz-danger);
    border-left-width: var(--uz-stripe); border-radius: var(--uz-radius);
    padding: 9px 12px; display: flex; align-items: flex-start; gap: 9px;
    font-size: 13.5px; color: var(--uz-ink);
}
.uzser-ai-error > i { color: var(--uz-danger); margin-top: 2px; flex: 0 0 auto; }
.uzser-ai-error-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uzser-ai-error-title { font-weight: 600; }
.uzser-ai-error-detail { font-size: 12.5px; color: var(--uz-ink-soft); line-height: 1.5; word-break: break-word; }

/* ── CANLI SES ŞERİDİ ────────────────────────────────────────────────────────
   ⚠️ Eskiden düz bir Bootstrap "alert-info" idi: uygulamanın hiçbir yerinde
   olmayan bir mavi, içine sıkıştırılmış iki satırlık açıklama ve oturumu bitirme
   yolu YOK. Konuşurken kimse o metni okumuyor; gereken şey durumu tek bakışta
   görmek ve bitirebilmek. */
.uzser-ai-live {
    display: flex; align-items: center; gap: 12px;
    width: calc(100% - 28px); max-width: var(--uz-chat-measure); margin: 10px auto 0;
    padding: 10px 14px; background: var(--uz-brand-soft);
    border: 1px solid var(--uz-brand); border-left-width: var(--uz-stripe);
    border-radius: var(--uz-radius);
}
.uzser-ai-live-dot {
    width: 10px; height: 10px; border-radius: 50%; background: var(--uz-brand);
    flex: 0 0 auto; animation: uzserAiNabiz 1.6s ease-in-out infinite;
}
@keyframes uzserAiNabiz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--uz-brand-rgb), .45); }
    50% { box-shadow: 0 0 0 7px rgba(var(--uz-brand-rgb), 0); }
}
.uzser-ai-live-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.uzser-ai-live-title { font-size: 13.5px; font-weight: 600; color: var(--uz-ink); }
.uzser-ai-live-note { font-size: 12px; color: var(--uz-ink-soft); line-height: 1.45; }
.uzser-ai-live-stop {
    flex: 0 0 auto; border: 1px solid var(--uz-border); background: var(--uz-surface);
    color: var(--uz-ink); border-radius: var(--uz-radius-sm); cursor: pointer;
    font-family: inherit; font-size: 12.5px; padding: 5px 12px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: border-color .14s ease, color .14s ease;
}
.uzser-ai-live-stop:hover { border-color: var(--uz-danger); color: var(--uz-danger); }

/* Hareket azaltma tercihinde nabız durur. */
@media (prefers-reduced-motion: reduce) { .uzser-ai-live-dot { animation: none; } }

/* Mesaj altı aksiyonlar (düzenle / yeniden üret) */
.uzser-ai-msgactions { margin-top: 3px; }
.uzser-ai-msgactions button {
    background: none; border: none; color: #8a96a8; font-size: 11.5px; cursor: pointer;
    padding: 1px 4px; border-radius: 5px;
}
.uzser-ai-msgactions button:hover { color: var(--uz-brand); background: #eef4ff; }
/* Geri bildirim verilmiş mesajın aksiyon çubuğu daima görünür (kullanıcı verdiği oyu görsün). */


/* Geri bildirimden hafıza önerisi: cevabın altında "hafızaya ekleyeyim mi?" */
.uzser-ai-hafiza-oneri {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding: 7px 10px;
    border: 1px solid var(--uz-border); border-radius: 8px; background: var(--uz-content-bg, #f7f9fc); font-size: 12.5px;
}
.uzser-ai-hafiza-oneri > .bi-lightbulb { color: var(--uz-brand); font-size: 14px; }
.uzser-ai-hafiza-metin { flex: 1 1 220px; min-width: 0; }
.uzser-ai-hafiza-kapsam { color: #8a96a8; margin-left: 4px; }
.uzser-ai-hafiza-oneri .btn { padding: 1px 10px; font-size: 12px; }
.uzser-ai-hafiza-durum { margin-top: 4px; font-size: 12px; color: #1e7e34; }

/* Beğen / beğenme geri bildirimi */
.uzser-ai-fbsep { display: inline-block; width: 1px; height: 12px; background: var(--uz-border); margin: 0 4px; vertical-align: middle; }
.uzser-ai-fb.on.like { color: #1e7e34 !important; background: #e6f4ea !important; }
.uzser-ai-fb.on.dislike { color: #c0392b !important; background: #fdecea !important; }
.uzser-ai-fbnote {
    margin-top: 5px; display: flex; flex-direction: column; gap: 4px; max-width: 460px;
    background: #fbfcfe; border: 1px solid var(--uz-border); border-radius: 8px; padding: 7px;
}
.uzser-ai-fbnote textarea {
    width: 100%; resize: vertical; border: 1px solid var(--uz-border); border-radius: 6px;
    padding: 5px 7px; font-size: 12px; color: var(--uz-ink); background: #fff; min-height: 38px;
}
.uzser-ai-fbnote textarea:focus { outline: none; border-color: var(--uz-brand); box-shadow: 0 0 0 2px rgba(var(--uz-brand-rgb), .16); }
.uzser-ai-fbnote-actions { display: flex; gap: 6px; }
.uzser-ai-fbnote-actions button {
    background: none; border: none; color: #8a96a8; font-size: 11.5px; cursor: pointer;
    padding: 1px 6px; border-radius: 5px;
}
.uzser-ai-fbnote-actions button:hover { color: var(--uz-brand); background: #eef4ff; }

/* KALDIRILDI: "Toplu onay kutusu" — karar kartı yeniden tasarlanınca (bkz.
   .uzser-ai-batch-item, yukarıda) bu eski kural silinmemişti ve dosyada DAHA SONRA
   geldiği için yenisini eziyordu: dolgu 8px 10px yerine 3px 2px, hizalama flex-start
   yerine center kalıyordu. Çok satırlı karar satırında onay kutusu metnin ortasına
   kayıyordu. */

/* ── Giriş yardımcı butonları ──
   Dört ayrı kare buton yerine tek bir "hap" içinde gruplanmış yuvarlak simgeler:
   giriş alanının yanında tek görsel birim oluştururlar. */
.uzser-ai-toolpill {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px; flex: 0 0 auto;
    background: var(--uz-surface-sunk); border: 1px solid var(--uz-border-soft);
    border-radius: 999px; align-self: flex-end; margin-bottom: 2px;
}
.uzser-ai-attach {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: transparent; color: var(--uz-ink-soft); cursor: pointer; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.uzser-ai-attach:hover { background: var(--uz-surface); color: var(--uz-brand); box-shadow: none; }
.uzser-ai-attach:active { transform: scale(.92); }
.uzser-ai-attach:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: 2px; }
/* Pasif durum eskiden hiç stillenmemişti — akış sırasında butonlar tıklanabilir görünüyordu. */
.uzser-ai-attach:disabled, .uzser-ai-attach.disabled { opacity: .38; cursor: not-allowed; }
.uzser-ai-attach:disabled:hover, .uzser-ai-attach.disabled:hover { background: transparent; color: var(--uz-ink-soft); box-shadow: none; }

.uzser-ai-think-toggle.on { background: var(--uz-warn); color: var(--uz-surface); box-shadow: none; }
.uzser-ai-think-toggle.on:hover { background: var(--uz-warn); color: var(--uz-surface); filter: brightness(.94); }
/* Agent modu anahtarı — açıkken belirgin (çok adımlı otonom çalışma). */
.uzser-ai-agent-toggle.on { background: var(--uz-brand); color: var(--uz-brand-fg); box-shadow: none; }
.uzser-ai-agent-toggle.on:hover { background: var(--uz-brand-dark); color: #fff; }

/* Giriş menüleri (10-20): "Yanıt ayarları" ve "Ses" — simgeler adlarıyla ve açıklamalarıyla açılır panelde. */
.uzser-ai-menu { position: relative; display: inline-flex; }
.uzser-ai-menu-dugme { position: relative; }
.uzser-ai-menu-dugme.on { background: var(--uz-surface); color: var(--uz-brand); }
.uzser-ai-menu-nokta { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--uz-brand); }
.uzser-ai-menu-panel {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; width: min(340px, 86vw);
    background: var(--uz-surface); border: 1px solid var(--uz-border); border-radius: 12px; padding: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.uzser-ai-menu-bas { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--uz-ink-faint); padding: 4px 8px 6px; }
.uzser-ai-menu-oge {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent;
    border-radius: 8px; padding: 8px; color: var(--uz-ink); cursor: pointer;
}
.uzser-ai-menu-oge:hover:not(:disabled) { background: var(--uz-surface-sunk); }
.uzser-ai-menu-oge:disabled { opacity: .45; cursor: not-allowed; }
.uzser-ai-menu-oge > i:first-child { font-size: 16px; color: var(--uz-ink-soft); flex: 0 0 auto; }
.uzser-ai-menu-oge.on > i:first-child { color: var(--uz-brand); }
.uzser-ai-menu-oge span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.uzser-ai-menu-oge b { font-size: 13.5px; font-weight: 600; }
.uzser-ai-menu-oge small { font-size: 12px; color: var(--uz-ink-soft); line-height: 1.35; }
.uzser-ai-menu-anahtar { font-size: 20px; color: var(--uz-ink-faint); flex: 0 0 auto; }
.uzser-ai-menu-oge.on .uzser-ai-menu-anahtar { color: var(--uz-brand); }

.uzser-ai-mic.on { background: var(--uz-danger); color: var(--uz-surface); animation: uzser-ai-mic-pulse 1.4s ease-in-out infinite; }
.uzser-ai-mic.on:hover { background: var(--uz-danger); color: var(--uz-surface); filter: brightness(.94); }
@keyframes uzser-ai-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .40); } 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); } }

/* Hap İKİ öbeğe ayrılır: solda cevabın NASIL üretileceği, sağda SES.
   Altı özdeş yuvarlak ikon yan yanayken hangisinin ne yaptığı ancak üzerine gelince
   anlaşılıyordu; ayraç, ilgisiz iki işi görsel olarak da ayırır. */
.uzser-ai-toolsep { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--uz-border); flex: 0 0 auto; }

.uzser-ai-attachbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 0; }
.uzser-ai-filechip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #5b6678;
    background: #eef1f6; border: 1px solid var(--uz-border); border-radius: 12px; padding: 3px 9px; max-width: 220px;
}
.uzser-ai-filechip > i { color: var(--uz-brand); }
.uzser-ai-filechip button {
    background: none; border: none; color: #9aa4b2; cursor: pointer; padding: 0; line-height: 1; font-size: 13px;
}
.uzser-ai-filechip button:hover { color: #ef4444; }
.uzser-ai-msgfiles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.uzser-ai-filechip.dl { cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.uzser-ai-filechip.dl:hover { background: #dfeaff; border-color: var(--uz-brand); color: var(--uz-brand-dark); }
.uzser-ai-filechip.dl .bi-download { margin-left: 2px; font-size: 11px; opacity: .7; }

/* Copilot hızlı-aksiyon çipleri (sayfa context'i) */
.uzser-ai-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 0; }
.uzser-ai-quick button {
    background: #eef4ff; border: 1px solid #d7e3fb; color: var(--uz-brand-dark);
    font-size: 12px; border-radius: 14px; padding: 3px 10px; cursor: pointer; white-space: nowrap;
}
.uzser-ai-quick button:hover { background: #dfeaff; }

/* Düzenleme banner'ı */
.uzser-ai-editbar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 0 12px; padding: 5px 10px; font-size: 12.5px; color: #6b5a2e;
    background: #fff7e6; border: 1px solid #f3d98b; border-radius: 8px;
}
.uzser-ai-editbar button { background: none; border: none; color: #b08a2e; cursor: pointer; }
.uzser-ai-editbar button:hover { color: #6b5a2e; }

/* --- Giriş alanı ---
   Çerçeve textarea'da DEĞİL kapsayıcıda: butonlar + alan + gönder tek bir alan gibi görünsün
   ve odaklanınca hepsi birlikte vurgulansın. */
.uzser-ai-input {
    display: flex; align-items: flex-end; gap: 8px;
    /* Yazma alanı mesaj sütunuyla AYNI genişlikte ve hizada: ayrı genişlikteyken ekran
       birbirini tutmayan iki sütuna bölünmüş gibi görünüyordu. */
    width: calc(100% - 28px); max-width: var(--uz-chat-measure); margin: 10px auto 0;
    padding: 7px 8px;
    background: var(--uz-surface); border: 1px solid var(--uz-border); border-radius: var(--uz-radius);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.uzser-ai-input:focus-within { border-color: var(--uz-brand); box-shadow: 0 0 0 3px rgba(var(--uz-brand-rgb), .16); }
/* Yükseklik JS ile ölçülür (uzser-ai-chat.js → bindGrow); buradaki max-height onunla AYNI olmalı.
   Eskiden yalnız bu kural vardı ve karşılığı olan JS olmadığı için alan hiç büyümüyordu. */
.uzser-ai-input textarea {
    flex: 1; min-width: 0; resize: none; max-height: 132px; border: none; background: none;
    padding: 7px 4px; font-size: 14.5px; line-height: 1.5; outline: none; font-family: inherit;
    color: var(--uz-ink); overflow-y: hidden;
}
.uzser-ai-send {
    width: 36px; height: 36px; border-radius: 50%; border: none; flex-shrink: 0;
    background: var(--uz-brand);
    color: var(--uz-brand-fg); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: none;
    transition: transform .14s ease, filter .14s ease, opacity .14s ease, background .14s ease;
}
.uzser-ai-send:hover { transform: translateY(-1px) scale(1.05); filter: brightness(1.07); }
.uzser-ai-send:active { transform: scale(.94); }

/* Durdur: gonder dugmesiyle ayni yerde ama AYNI GORUNMEZ.
   ⚠️ Ayni renkte olsaydi kullanici yanlislikla durdurup turu kaybederdi; kirmizi ton
      "bu farkli bir eylem" diyor. */
.uzser-ai-durdur { background: #b42318; }
.uzser-ai-durdur:hover { filter: brightness(1.12); }
.uzser-ai-send:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: 2px; }
.uzser-ai-send:disabled { background: var(--uz-border); color: var(--uz-ink-faint); box-shadow: none; cursor: default; transform: none; filter: none; }
.uzser-ai-send.stop { background: #ef4444; box-shadow: 0 2px 8px rgba(239,68,68,.34); }

.uzser-ai-inputhint {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    width: calc(100% - 28px); max-width: var(--uz-chat-measure); margin: 0 auto;
    font-size: 11px; color: var(--uz-ink-faint); padding: 7px 2px 10px;
}
.uzser-ai-inputhint > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.uzser-ai-inputhint kbd {
    font-family: inherit; font-size: 10.5px; background: var(--uz-surface); color: var(--uz-ink-soft);
    border: 1px solid var(--uz-border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px;
}

/* --- Tam sayfa (/ai) --- */
/* NOT: markup .uzser-ai-shell / .uzser-ai-view kullanır; eski portal adları (.uzser-ai-page/.uzser-ai-main) köprülendi. */
.uzser-ai-page, .uzser-ai-shell { display: flex; gap: 14px; height: calc(100vh - 132px); min-height: 420px; }
/* /ai sayfasında içerik alt boşluğunu kıs (chat kendi yüksekliğini yönetir, çift kaydırma olmasın) */
.uzser-content:has(> .uzser-ai-shell) { padding-bottom: 14px; }
.uzser-ai-sidebar {
    width: 286px; flex-shrink: 0; background: var(--uz-surface); border: 1px solid var(--uz-border);
    border-radius: var(--uz-radius); display: flex; flex-direction: column; overflow: hidden;
    transition: width .2s cubic-bezier(.22,.9,.35,1);
}
.uzser-ai-sidebar.collapsed { width: 62px; }
.uzser-ai-sidebar.collapsed .uzser-ai-sidelabel,
.uzser-ai-sidebar.collapsed .uzser-ai-convsearch,
.uzser-ai-sidebar.collapsed .uzser-ai-convgroup,
.uzser-ai-sidebar.collapsed .uzser-ai-convmeta,
.uzser-ai-sidebar.collapsed .uzser-ai-convmenu-wrap { display: none; }
.uzser-ai-sidebar.collapsed .uzser-ai-newbtn { padding: 9px 0; justify-content: center; }
.uzser-ai-sidebar.collapsed .uzser-ai-convtitle { -webkit-line-clamp: 1; font-size: 11px; }

/* "Yeni sohbet" ile kılavuz (?) düğmesi aynı satırda; diğerleri tam satır (eskiden ? tek başına bir satır kaplıyordu). */
.uzser-ai-sidetop { padding: 10px 10px 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.uzser-ai-sidetop > :not(.uzser-ai-newchat):not(.uz-kilavuz-dugme) { grid-column: 1 / -1; }
.uzser-ai-newbtn, .uzser-ai-newchat {
    width: 100%; padding: 9px 12px; border: none; border-radius: 9px; cursor: pointer;
    background: var(--uz-brand);
    color: var(--uz-brand-fg); font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: none;
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.uzser-ai-newbtn:hover, .uzser-ai-newchat:hover { background: var(--uz-brand-dark); }
.uzser-ai-newbtn:active, .uzser-ai-newchat:active { transform: translateY(0) scale(.985); }
/* Sohbet satırı aksiyonları (sil/yeniden adlandır ikonları) */
/* Satır işlemleri (yeniden adlandır / sil).
   ⚠️ EN SAĞA yapışır: başlığın hemen yanında dururken uzun/kısa başlıklara göre
   yerleri kayıyordu ve çöp kutusu her satırda başka bir noktaya düşüyordu —
   geri alınamayan bir işlem için en kötü yerleşim. Sabit bir sütunda dururlar. */
.uzser-ai-convactions {
    margin-left: auto; flex: 0 0 auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 2px;
    opacity: 0; transition: opacity .12s ease;
}
.uzser-ai-convitem:hover .uzser-ai-convactions,
.uzser-ai-convitem:focus-within .uzser-ai-convactions { opacity: 1; }
.uzser-ai-convactions button {
    border: none; background: none; color: var(--uz-ink-faint); cursor: pointer;
    padding: 3px 5px; border-radius: var(--uz-radius-sm); line-height: 1;
}
.uzser-ai-convactions button:hover { background: var(--uz-row-hover); color: var(--uz-ink); }
/* Silme kırmızıya döner: geri alınamayan tek işlem bu. */
.uzser-ai-convactions button:last-child:hover { background: var(--uz-danger-soft); color: var(--uz-danger); }
.uzser-ai-convicon { flex: 0 0 auto; color: var(--uz-ink-faint); font-size: 13px; }

/* Sohbet arama */
.uzser-ai-convsearch { position: relative; display: flex; align-items: center; }
.uzser-ai-convsearch > i:first-child {
    position: absolute; left: 10px; color: var(--uz-ink-faint); font-size: 13px; pointer-events: none;
}
.uzser-ai-convsearch input {
    width: 100%; border: 1px solid var(--uz-border); border-radius: 8px;
    padding: 7px 28px 7px 30px; font-size: 13px; font-family: inherit; color: var(--uz-ink);
    background: var(--uz-surface-sunk); outline: none; transition: border-color .15s ease, background .15s ease;
}
.uzser-ai-convsearch input:focus { border-color: var(--uz-brand); background: var(--uz-surface); }
.uzser-ai-searchclear {
    position: absolute; right: 6px; width: 20px; height: 20px; border: none; background: none;
    color: var(--uz-ink-faint); cursor: pointer; font-size: 11px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.uzser-ai-searchclear:hover { background: var(--uz-row-hover); color: var(--uz-ink); }

/* Sohbet listesini açıp kapatan düğme yalnız DAR ekranda vardır; masaüstünde liste zaten
   hep açık, orada bir açar-kapar yalnızca fazladan bir tıklama olurdu. */
.uzser-ai-listtoggle {
    display: none; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 9px 11px; border: 1px solid var(--uz-border); border-radius: var(--uz-radius);
    background: var(--uz-surface); color: var(--uz-ink-soft);
    font-family: inherit; font-size: 13px; cursor: pointer;
}
.uzser-ai-listtoggle > .bi-chevron-down { font-size: 10px; transition: transform .18s ease; }
.uzser-ai-sidebar.liste-acik .uzser-ai-listtoggle { color: var(--uz-ink); border-color: var(--uz-brand); }
.uzser-ai-sidebar.liste-acik .uzser-ai-listtoggle > .bi-chevron-down { transform: rotate(180deg); }

.uzser-ai-convlist { flex: 1; overflow-y: auto; padding: 2px 8px 10px; }
.uzser-ai-convempty { color: var(--uz-ink-faint); font-size: 12.5px; padding: 10px 8px; }

/* Tarih grubu başlığı + arşiv açar-kapar */
.uzser-ai-convgroup {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
    color: var(--uz-ink-faint); padding: 13px 8px 5px;
}
button.uzser-ai-convgroup {
    display: flex; align-items: center; gap: 6px; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left;
}
button.uzser-ai-convgroup:hover { color: var(--uz-ink); }
.uzser-ai-archtoggle > i { transition: transform .2s ease; font-size: 9px; }
.uzser-ai-archtoggle.open > i { transform: rotate(90deg); }
.uzser-ai-archcount {
    margin-left: auto; background: #eef1f6; border-radius: 999px; padding: 1px 7px;
    font-size: 10px; letter-spacing: 0; color: #6b7689;
}

/* İlk grup başlığının üst boşluğu kısılır: liste "Yeni sohbet"in hemen altında başlar,
   arada açıklanamayan bir boşluk kalmasın. */
.uzser-ai-convgroup:first-child { padding-top: 4px; }

.uzser-ai-convitem {
    position: relative; display: flex; align-items: flex-start; gap: 6px;
    padding: 8px 6px 8px 9px; border-radius: 9px; margin-bottom: 1px;
    cursor: pointer; color: var(--uz-ink); font-size: 14px;
    border-left: 2px solid transparent;
    transition: background .16s ease, border-color .16s ease;
    animation: uzserAiSlideIn .26s cubic-bezier(.22,.9,.35,1) both;
}
.uzser-ai-convitem:hover { background: var(--uz-row-hover); }
.uzser-ai-convitem.active { background: var(--uz-brand-soft); color: var(--uz-ink); border-left-color: var(--uz-brand); }
.uzser-ai-convitem.active .uzser-ai-convtitle { font-weight: 600; }
.uzser-ai-convbody { flex: 1; min-width: 0; }
/* Tek satır + ellipsis yerine iki satır: uzun başlıklar tanınabilir kalsın. */
.uzser-ai-convtitle {
    line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.uzser-ai-convmeta { font-size: 11.5px; color: var(--uz-ink-faint); margin-top: 2px; }
.uzser-ai-renamebox {
    width: 100%; border: 1px solid var(--uz-brand); border-radius: 7px; padding: 5px 8px;
    font-size: 13.5px; font-family: inherit; color: var(--uz-ink); outline: none; background: var(--uz-surface);
}

/* Satır menüsü (yeniden adlandır / arşivle / sil) — tek çöp kutusu ikonunun yerini aldı. */
.uzser-ai-convmenu-wrap { position: relative; flex: 0 0 auto; }
.uzser-ai-convkebab {
    width: 26px; height: 26px; border-radius: 7px; border: none; background: none;
    color: #b0bac9; cursor: pointer; font-size: 13px; opacity: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .16s ease, background .16s ease, color .16s ease;
}
.uzser-ai-convitem:hover .uzser-ai-convkebab,
.uzser-ai-convkebab.open { opacity: 1; }
.uzser-ai-convkebab:hover, .uzser-ai-convkebab.open { background: #e3e9f3; color: var(--uz-ink); }
/* Menüsü açık olan satır vurgulu kalsın — menü artık satırın dışında render edildiği için
   hangi sohbete ait olduğu başka türlü belli olmuyor. */
.uzser-ai-convitem.menu-open { background: #f1f5f9; }

/* ⚠ SABİT konumlu (fixed), mutlak DEĞİL — konumu JS ölçer (uzserAiChat.menuAnchor).
   Sebep: kenar çubuğunda iki kırpan kutu var — .uzser-ai-convlist'te overflow-y:auto ve
   .uzser-ai-sidebar'da overflow:hidden. Mutlak konumlu menü bunların dışına taşamaz ve
   z-index overflow kırpmasından KAÇAMAZ (ne kadar yükseltilirse yükseltilsin). Sabit konum
   hem kırpılmayı hem de satırların üstüne binmesini tek seferde çözer. */
.uzser-ai-convmenu {
    position: fixed; z-index: 1200; width: 186px;
    background: #fff; border: 1px solid var(--uz-border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15,23,42,.16); padding: 5px;
    display: flex; flex-direction: column;
    animation: uzserAiPop .16s cubic-bezier(.22,.9,.35,1) both;
}
.uzser-ai-convmenu button {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13.5px;
    color: var(--uz-ink); padding: 8px 10px; border-radius: 7px; transition: background .12s ease;
}
.uzser-ai-convmenu button:hover { background: #eef4ff; }
.uzser-ai-convmenu button.danger { color: #dc2626; }
.uzser-ai-convmenu button.danger:hover { background: #fdecea; }
.uzser-ai-convmenu hr { border: none; border-top: 1px solid var(--uz-border); margin: 4px 2px; }

.uzser-ai-sidecollapse {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px;
    border: none; border-top: 1px solid var(--uz-border); background: none;
    color: #9aa4b2; cursor: pointer; font-size: 12.5px; font-family: inherit;
    transition: color .15s ease, background .15s ease;
}
.uzser-ai-sidecollapse:hover { color: var(--uz-brand); background: #f8fafc; }

.uzser-ai-main {
    flex: 1; min-width: 0; background: var(--uz-surface); border: 1px solid var(--uz-border);
    border-radius: var(--uz-radius); overflow: hidden; display: flex;
}

/* --- Rol şeridi (persona) --- */
/* z-index: mesaj balonlarında da opacity animasyonu var (uzserAiRise) → her biri kendi
   stacking context'ini kurup DOM'da sonra geldiği için rol menüsünün üstüne biniyordu.
   Şeridin kendisi yükseltilince içindeki menü de mesajların üstünde kalır. */
.uzser-ai-rolebar {
    position: relative; z-index: 30; display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-bottom: 1px solid var(--uz-border); background: #fff; flex: 0 0 auto;
}
.uzser-ai-rolebtn {
    display: inline-flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px;
    border-radius: 999px; border: 1px solid var(--uz-border); background: #f8fafc;
    cursor: pointer; font-family: inherit; color: var(--uz-ink);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.uzser-ai-rolebtn:hover:not(:disabled) { border-color: var(--uz-brand); box-shadow: 0 0 0 3px rgba(var(--uz-brand-rgb), .14); }
.uzser-ai-rolebtn:disabled { opacity: .6; cursor: not-allowed; }
.uzser-ai-rolebtn:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: 2px; }
.uzser-ai-roleav {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; color: #fff; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .3s ease;
}
.uzser-ai-roletxt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.uzser-ai-rolelbl { font-size: 10.5px; color: #9aa4b2; }
.uzser-ai-rolename { font-size: 13px; font-weight: 600; }
.uzser-ai-rolechev { color: #9aa4b2; font-size: 11px; transition: transform .2s ease; }
.uzser-ai-rolebtn.open .uzser-ai-rolechev { transform: rotate(180deg); }

/* Rol menüsü mutlak kalabilir: rol şeridi kırpan bir kutu içinde DEĞİL. Ama z-index'i kendi
   görünmez arka planının (1050) ÜSTÜNDE olmalı, yoksa menü tıklanamaz hale gelir. İkisi de
   .uzser-ai-rolebar'ın stacking context'i içinde olduğu için göreli sıra korunur. */
.uzser-ai-rolemenu {
    position: absolute; left: 14px; top: 50px; z-index: 1100; width: 320px; max-width: calc(100% - 28px);
    background: #fff; border: 1px solid var(--uz-border); border-radius: 12px;
    box-shadow: 0 12px 34px rgba(15,23,42,.18); padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
    animation: uzserAiPop .18s cubic-bezier(.22,.9,.35,1) both;
}
.uzser-ai-roleopt {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 9px;
    border: none; background: none; cursor: pointer; text-align: left; width: 100%;
    font-family: inherit; color: var(--uz-ink); transition: background .13s ease;
}
.uzser-ai-roleopt:hover { background: #eef4ff; }
.uzser-ai-roleopt.sel { background: #eef4ff; }
.uzser-ai-roleoptxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.uzser-ai-roledesc { font-size: 11.5px; color: #6b7689; line-height: 1.45; }
.uzser-ai-roletools {
    display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #9aa4b2; margin-top: 2px;
}
/* Onay tiki ANLAM taşır → semantik jeton. Sabit #16a34a bırakılmıştı ve koyu
   zeminde okunmuyordu; ayrıca vurgu rengi değişince yanlış aileye düşüyordu. */
.uzser-ai-roletick { color: var(--uz-ok); align-self: center; flex: 0 0 auto; }
.uzser-ai-rolehint {
    font-size: 11.5px; color: #6b7689; line-height: 1.5; padding: 8px 10px 6px;
    border-top: 1px solid var(--uz-border); margin-top: 4px;
}

/* Açık menülerin dışına tıklamayı yakalayan görünmez katman.
   z-index menünün hemen ALTINDA olmalı: menü 1200, rol menüsü 1100. */
.uzser-ai-backdrop { position: fixed; inset: 0; z-index: 1050; background: transparent; }

/* --- Yönetim → Roller: araç seçici (modül gruplu, kaydırmalı) --- */
.uz-persona-tools {
    max-height: 320px; overflow-y: auto; border: 1px solid var(--uz-border);
    border-radius: 9px; padding: 8px; background: #f8fafc;
}
.uz-persona-toolgrp { margin-bottom: 10px; }
.uz-persona-toolhdr {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: #9aa4b2; padding: 2px 2px 5px;
}
.uz-persona-tool {
    display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px; border-radius: 6px;
    cursor: pointer; font-size: 12.5px; color: var(--uz-ink);
}
.uz-persona-tool:hover { background: #eef4ff; }
.uz-persona-tool input { margin-top: 3px; flex: 0 0 auto; }
.uz-persona-tool > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.uz-persona-toolname { font-weight: 600; line-height: 1.3; }
html[data-bs-theme="dark"] .uz-persona-tools { background: var(--uz-content-bg); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uz-persona-tool:hover { background: var(--uz-row-hover); }

/* Mesaj/kart giriş animasyonları — ekranda daha önce hiç yoktu. */
@keyframes uzserAiRise  { from { opacity: 0; transform: translateY(9px); }  to { opacity: 1; transform: none; } }
@keyframes uzserAiPop   { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes uzserAiSlideIn { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: none; } }
.uzser-ai-msg { animation: uzserAiRise .32s cubic-bezier(.22,.9,.35,1) both; }

/* Hareket azaltma tercihinde tüm AI animasyonları durur (erişilebilirlik). */
@media (prefers-reduced-motion: reduce) {
    .uzser-ai-page *, .uzser-ai-panel *, .uzser-ai-view * {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .uzser-ai-messages { scroll-behavior: auto !important; }
}

@media (max-width: 768px) {
    .uzser-ai-page, .uzser-ai-shell { flex-direction: column; height: auto; gap: 10px; }

    /* ⚠️ Kenar çubuğu mobilde ekranın DÖRTTE BİRİNİ yiyordu: 780 px'lik bir telefonda
       220 px, kullanıcının o an okumadığı bir listeye gidiyordu — üstelik liste o 220 px'e
       de sığmadığı için son satır kelimenin ortasından kesiliyordu. Artık liste KAPALI
       gelir; "Yeni sohbet" ile açar-kapar tek satırda yan yana durur. */
    .uzser-ai-sidebar { width: 100%; height: auto; }
    .uzser-ai-sidebar.collapsed { width: 100%; }
    /* Üst blok iki satır (2026-10-16): [Yeni sohbet][Sohbetler][?] / [müşteri]. Eskiden dört satır ve ~300 px'ti;
       telefonda mesajlara yer kalmıyordu. */
    .uzser-ai-sidetop { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px; gap: 6px; }
    .uzser-ai-newchat { flex: 1 1 auto; width: auto; order: 1; padding: 7px 12px; font-size: 13.5px; }
    .uzser-ai-listtoggle { display: inline-flex; order: 2; padding: 7px 10px; }
    .uzser-ai-sidetop > .uz-kilavuz-dugme { order: 3; }
    .uzser-ai-sidetop > .uzser-ai-musteri { order: 4; flex: 1 1 100%; margin-top: 0; }

    /* Arama ve liste yalnız açıkken görünür; arama kendi satırına iner. */
    .uzser-ai-convsearch { display: none; flex: 1 1 100%; }
    .uzser-ai-convlist { display: none; max-height: 46vh; }
    .uzser-ai-sidebar.liste-acik .uzser-ai-convsearch { display: flex; }
    .uzser-ai-sidebar.liste-acik .uzser-ai-convlist { display: block; }

    .uzser-ai-sidecollapse { display: none; }
    .uzser-ai-main, .uzser-ai-view { height: 72vh; }

    /* ⚠️ YAZMA ALANI TAM SATIR. Altı yuvarlak düğme, ayraç ve gönder yan yanayken metne
       ~40 px kalıyordu: kullanıcı YAZDIĞINI GÖREMİYORDU. Düğmeler kendi satırına iner. */
    .uzser-ai-input { flex-wrap: wrap; width: calc(100% - 20px); }
    .uzser-ai-input textarea { order: 1; flex: 1 1 auto; }
    .uzser-ai-send { order: 1; }
    .uzser-ai-toolpill {
        order: 2; flex: 1 1 100%; justify-content: flex-start;
        align-self: stretch; margin: 4px 0 0;
    }

    /* Enter/Shift+Enter ipucu dokunmatikte anlamsız; yalnız yer kaplıyordu. */
    /* Telefonda klavye kısayolu anlamsız; sohbetin kredisi görünür kalır. */
    .uzser-ai-inputhint > span:first-child { display: none; }
}

/* ===================== Ortak diyalog düzeni (uzdlg) ===================== */
/* DevExpress DxPopup BodyTemplate'i: bölümlü form + HER ZAMAN görünür footer.
   Gövde uzarsa içeride kaydırılır; "Kaydet/Vazgeç" footer'ı asla kırpılmaz. */
.uzdlg {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 68vh;
    overflow-y: auto;
    padding: 2px 2px 4px;
}
.uzdlg-sec {
    border: 1px solid var(--uz-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.uzdlg-sec-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    font-weight: 600; font-size: 13.5px; color: var(--uz-header-fg);
    background: #f7f9fc;
    border-bottom: 1px solid var(--uz-border);
}
.uzdlg-sec-head i { font-size: 15px; }
.uzdlg-sec-sub { margin-left: auto; font-weight: 400; font-size: 12px; color: #94a3b8; }
.uzdlg-sec-body { padding: 12px; }
.uzdlg-form { width: 100%; }
.uzdlg-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--uz-border);
}
/* Durum süresi rozetleri */
.uzdlg-dur {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    padding: 6px 10px; border: 1px solid var(--uz-border); border-radius: 8px;
    background: #f8fafc; min-width: 92px;
}
.uzdlg-dur strong { font-size: 14px; color: var(--uz-header-fg); line-height: 1.15; }
.uzdlg-dur span { font-size: 11.5px; color: #64748b; }
.uzdlg-dur.is-zero { opacity: .55; }

/* ============================================================
   PROFESYONEL CİLA KATMANI (v2)
   Kart / rozet / KPI / diyalog / form / tablo görünümünü rafine eder.
   Yapıyı değiştirmez — yalnızca tipografi, boşluk, renk ve gölgeyi
   kurumsal standarda çeker. Tüm sayfaları markup'a dokunmadan iyileştirir.
   ============================================================ */

/* ---------- Kartlar: ince hairline + rafine gölge + tutarlı iç boşluk ---------- */
.card {
    border: 1px solid var(--uz-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--uz-shadow-sm);
}
/* "border-0 shadow-sm" kalıbına da ince çerçeve ver (gölge-only yerine daha kurumsal). */
.card.border-0 { border: 1px solid var(--uz-border) !important; }
.card.shadow-sm { box-shadow: var(--uz-shadow) !important; }
.card-header {
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--uz-ink);
    background: #fff;
    border-bottom: 1px solid var(--uz-border);
}
.card-header.bg-transparent,
.card-header.bg-white { background: #fff; }
.card-body { padding: 18px; }
.card > .card-body.p-0 { padding: 0 !important; }
/* Kart başlığındaki ilk ikon markaya boyansın (tutarlı vurgu). */
.card-header > .bi:first-child,
.card-header > i.bi:first-child { color: var(--uz-brand); }

/* ---------- Rozetler: Bootstrap badge → kurumsal pill estetiği ---------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .2px;
    padding: .4em .72em;
    line-height: 1.5;
}
/* Parlak dolu renkleri yumuşak pill paletine eşle (modern + yüksek okunabilirlik). */
/* ⚠️ Anlam renkleri jetondan. Sabit yazıldığında koyu temada pastel lekeler
   kalıyordu; `.badge.bg-*` daha özgül olduğu ve bu dosya en son yüklendiği için
   site.css'teki genel kuralı da eziyordu. */
.badge.bg-primary   { background: var(--uz-info-soft) !important;    color: var(--uz-info) !important; }
.badge.bg-success   { background: var(--uz-ok-soft) !important;      color: var(--uz-ok) !important; }
.badge.bg-danger    { background: var(--uz-danger-soft) !important;  color: var(--uz-danger) !important; }
.badge.bg-warning   { background: var(--uz-warn-soft) !important;    color: var(--uz-warn) !important; }
.badge.bg-info      { background: var(--uz-info-soft) !important;    color: var(--uz-info) !important; }
.badge.bg-secondary { background: var(--uz-neutral-soft) !important; color: var(--uz-neutral) !important; }
.badge.bg-light     { background: var(--uz-neutral-soft) !important; color: var(--uz-ink-soft) !important; }

/* ---------- KPI kutuları (KpiCardGrid + .uzser-stat) ----------
   ⚠️ .uzser-kpi* kuralları YALNIZ site.css'te. Burada Portal'dan kalma ikinci bir kopya duruyordu (sabit #fff zemin
   dahil) ve bu dosya sonra yüklendiği için site.css'teki düzenlemeleri eziyordu — telefonda KPI kartları dikey
   dizilemiyordu (2026-10-16 görsel denetim). */
/* Sade ortalı KPI (.uzser-stat) — tabular rakam. */
.uzser-stat .v { font-variant-numeric: tabular-nums; letter-spacing: -.3px; }

/* ---------- Dashboard widget: KPI eşik rengi + Gauge + gridstack ---------- */
.uzser-kpi-ok     { color: var(--uz-ok); }
.uzser-kpi-warn   { color: var(--uz-warn); }
.uzser-kpi-danger { color: var(--uz-danger); }

.uzser-gauge { display:flex; justify-content:center; align-items:center; width:100%; }
.uzser-gauge svg { max-width:280px; }

/* Pano tuvali (PanoTuvali — Uzser.Visualization panosu, F3). Izgara boşluğu 8 px tuvalin kendisinde (PanoTuvalBelgesi.Izgara);
   kütüphanenin öğe iç boşluğu sıfırlanır, kart öğeyi tam doldurur. */
.uzser-dash-grid .uv-dash-item { padding:0; }
.uzser-dash-grid .uv-dash-item > .card { height:100%; display:flex; flex-direction:column; overflow:hidden; }
/* Kart gövdesi kalan yüksekliği doldurur; grafik/tablo kabına oturur, sabit-yükseklik taşması olmaz. */
.uzser-dash-grid .card-header { flex:0 0 auto; }
/* Gövde flex-kolon: tablo/grafik esnek alanı doldurup KENDİ içinde kayar. */
.uzser-dash-grid .card-body { flex:1 1 auto; min-height:0; overflow:hidden; padding:8px 12px; display:flex; flex-direction:column; }
/* Tablo widget'ı: kalan alanı doldurur (flex-grow) + min-height:0 → iç dikey scroll çalışır. */
.uzser-grid-fill { flex:1 1 auto; min-height:0; }
/* Yerleşim düzenleme (tasarımcı): kütüphanenin paleti, sayfa sekmeleri ve JSON yükle/indir bizde yok — bileşen formumuzla eklenir,
   pano tek sayfa, kayıt ilişkisel. */
.uz-pano-tasarim .uv-ds-body { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 1100px) { .uz-pano-tasarim .uv-ds-body { grid-template-columns: minmax(0, 1fr) 260px; } }
@media (max-width: 820px) { .uz-pano-tasarim .uv-ds-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } }
.uz-pano-tasarim .uv-ds-library,
.uz-pano-tasarim .uv-ds-pages,
.uz-pano-tasarim .uv-ds-doc,
.uz-pano-tasarim .uv-ds-right > label,
.uz-pano-tasarim .uv-ds-right > button:not(.uv-btn-primary) { display:none !important; }

/* ---------- Scheduler widget renk paleti (DevExpress BackgroundCssClass) ----------
   Randevu (label) ya da kaynak (resource) arka planını boyar. 12 ayrık koyu-doygun renk;
   hepsi beyaz metinle okunur. Aynı ColorKey → aynı sınıf → aynı renk. */
.uzser-sched-c0  { background-color:#2f6fed !important; color:#fff !important; }
.uzser-sched-c1  { background-color:#16a34a !important; color:#fff !important; }
.uzser-sched-c2  { background-color:#ea580c !important; color:#fff !important; }
.uzser-sched-c3  { background-color:#9333ea !important; color:#fff !important; }
.uzser-sched-c4  { background-color:#0891b2 !important; color:#fff !important; }
.uzser-sched-c5  { background-color:#b45309 !important; color:#fff !important; }
.uzser-sched-c6  { background-color:#dc2626 !important; color:#fff !important; }
.uzser-sched-c7  { background-color:#0d9488 !important; color:#fff !important; }
.uzser-sched-c8  { background-color:#db2777 !important; color:#fff !important; }
.uzser-sched-c9  { background-color:#4f46e5 !important; color:#fff !important; }
.uzser-sched-c10 { background-color:#4d7c0f !important; color:#fff !important; }
.uzser-sched-c11 { background-color:#7c3aed !important; color:#fff !important; }
/* Telefonda (≤640) pano tek sütun: kütüphane yerleşimi kendisi dizer (DashboardReflow SingleColumn). */
@media (max-width: 640px) {
    /* Dashboard başlığı kompakt: switcher tam genişlik, başlık/switcher alt alta. */
    .uzser-dash-titlebar { flex-wrap: wrap; }
    .uzser-dashboard-switcher { min-width: 0 !important; max-width: none !important; width: 100%; }
}

/* Telefonda gizlenecek yardımcı (ör. switcher varken büyük pano başlığı). */
@media (max-width: 640px) {
    .uzser-hide-phone { display: none !important; }
}

/* Dashboard scrollbar'ı: ince, idle'da yarı-saydam (göze batmaz), alana/thumb'a gelince belirginleşir.
   Tüm dashboard-içi kaydırma alanlarına (tablo, taşan içerik) uygulanır. */
.uzser-dash-grid ::-webkit-scrollbar,
.uzser-dash-grid::-webkit-scrollbar { width:9px; height:9px; }
.uzser-dash-grid ::-webkit-scrollbar-track,
.uzser-dash-grid::-webkit-scrollbar-track { background:transparent; }
.uzser-dash-grid ::-webkit-scrollbar-thumb,
.uzser-dash-grid::-webkit-scrollbar-thumb {
    background:rgba(148,163,184,.22);          /* idle: hafif/saydam */
    border-radius:8px; border:2px solid transparent; background-clip:padding-box;
}
.uzser-dash-grid:hover ::-webkit-scrollbar-thumb,
.uzser-dash-grid:hover::-webkit-scrollbar-thumb { background:rgba(148,163,184,.5); background-clip:padding-box; }
.uzser-dash-grid ::-webkit-scrollbar-thumb:hover,
.uzser-dash-grid::-webkit-scrollbar-thumb:hover { background:rgba(100,116,139,.82); background-clip:padding-box; }
.uzser-dash-grid, .uzser-dash-grid * { scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.3) transparent; }

/* ---------- DevExpress Pager (DxGrid sayfalama) — KOMPAKT (global) ----------
   Global SizeMode=Medium pager'ı tüm tablolarda iri gösteriyordu. Satır içeriğine
   DOKUNMADAN yalnız sayfalama küçültülür. <dxbl-pager> light-DOM web bileşeni;
   sayfa/gezinme butonları .dxbl-pager içindeki <button>'lar. DevExpress stilleri
   site.css'ten SONRA yüklendiği için boyut özellikleri !important ile geçilir. */
.dxbl-pager { font-size: .78rem !important; min-height: 0 !important; }
.dxbl-pager .dxbl-pager-container { gap: 2px !important; min-height: 0 !important; }
.dxbl-pager button,
.dxbl-pager .dxbl-pager-page-btn,
.dxbl-pager .dxbl-btn {
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 6px !important;
    font-size: .78rem !important;
    line-height: 1.1 !important;
}
/* Gezinme oklarındaki ikon (svg) buton boyuna oranlı küçülsün. */
.dxbl-pager button svg,
.dxbl-pager .dxbl-image { width: 14px !important; height: 14px !important; }
/* Sayfa boyutu seçici (varsa) de kompakt görünsün. */
.dxbl-pager .dxbl-pager-page-size-selector { font-size: .78rem !important; }

/* Tablo boolean hücresi: True/False metni yerine salt-okunur onay-kutusu ikonu. */
.uzser-bool-cell { font-size: 1.05rem; line-height: 1; vertical-align: -1px; }

/* ---------- Diyaloglar (DxPopup): ekranı taşırma, ortala, yumuşak görünüm ----------
   NOT: .dxbl-popup combobox/dropdown ile paylaşıldığından yalnızca güvenli
   özellikler (boyut sınırı + köşe + gölge) global verilir; gövde iç boşluğuna
   dokunulmaz (dropdown listelerini bozar). */
.dxbl-popup, .dxbl-window {
    max-width: min(96vw, 1100px) !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 60px rgba(15,23,42,.22) !important;
}
/* Diyalog başlık/altlık tipografisi (yalnız gerçek pencere/diyalog) */
.dxbl-window .dxbl-popup-header,
.dxbl-popup-header {
    font-weight: 600;
}

/* Form diyalogları (pano oluştur/düzenle vb.): içeriği az (birkaç alan) olsa da
   içeriğe yapışıp küçük açılmasın — rahat bir taban genişlik. YALNIZ bu sınıfı taşıyan
   DxPopup'lara uygulanır; dropdown/combobox (.dxbl-popup) etkilenmez. */
.uzser-form-dialog { min-width: min(560px, 94vw) !important; }

/* ---------- Form düzeni: etiket hizası + dikey ritim ----------
   ⚠️ DevExpress 25.2 sınıf adları: .dxbl-fl (layout) · .dxbl-fl-item (öğe)
   · .dxbl-fl-cpt (etiket) · .dxbl-fl-ctrl (denetim).
   Aşağıdaki eski `-form-layout-` adları hiçbir zaman eşleşmiyordu; DOM'dan
   doğrulanan adlarla birlikte bırakıldılar (sürüm geri alınırsa çalışsınlar). */
.dxbl-form-layout-item-caption,
.dxbl-fl-caption,
.dxbl-fl-cpt { font-size: 13px; color: var(--uz-ink-soft); font-weight: 500; }
.dxbl-form-layout .dxbl-form-layout-item,
.dxbl-fl .dxbl-fl-item { margin-bottom: 8px; }
label.form-label { font-weight: 500; }

/* ---------- Diyalogda DAR sütunlarda etiketi üste al ----------
   Sorun: DevExpress her form öğesine SABİT bir etiket sütunu ayırır
   (--dxbl-fl-caption-width-large-screen: 210px) ve bunu hücre genişliğinden
   bağımsız uygular. Ölçüldü: ColSpanMd="4" hücresi 366px iken etiket 210px
   (%57) kalıyor, düzenleyiciye 132px düşüyor; 520px'lik bir diyalogda hücre
   173px olduğu için etiket hücreden TAŞIP düzenleyicinin üstüne biniyor.
   Çözüm: diyalog içinde tam genişlik (md-12) OLMAYAN öğelerde etiket üste
   geçer, düzenleyici hücrenin tamamını kullanır (132px → 342px ölçüldü).
   Tam genişlik satırlarda yan yana hiza korunur — orada okunaklı. */
/* ---------- Diyalogda form ızgarası SOLA TAŞIYORDU ----------
   Ölçüldü (Bileşen diyalogu, 1500px): .dxbl-modal-body içerik kenarı 293px,
   içindeki .dxbl-row'a DevExpress -12px negatif kenar boşluğu veriyor (Bootstrap
   ızgara deseni), .dxbl-fl kökünde ise bunu karşılayacak iç boşluk YOK (padding 0).
   Sonuç: sol sütun hücresinin içeriği 281px'e, yani diyalogun 1px'lik kenarlığının
   tam üstüne oturuyordu ve her etiketin İLK HARFİ kırpılıyordu — "Başlık" → "şlık",
   "Kaynak (veri kümesi)" → "ynak (veri kümesi)". Sağ sütun etkilenmediği için hata
   gözden kaçıyordu.

   ⚠️ Yalnız bu diyalogun değil, modal içindeki HER DxFormLayout'un sorunuydu.
   Negatif kenar boşluğu, ızgaranın kendi sütun aralığı kadar iç boşlukla karşılanır. */
.dxbl-modal-body .dxbl-fl {
    padding-left: calc(var(--dxbl-row-item-spacing-x, 24px) * .5);
    padding-right: calc(var(--dxbl-row-item-spacing-x, 24px) * .5);
}

.dxbl-modal-body .dxbl-fl-item.dxbl-fl-item-horizontal:not(.dxbl-col-md-12) {
    flex-direction: column;
    align-items: stretch;
}
.dxbl-modal-body .dxbl-fl-item.dxbl-fl-item-horizontal:not(.dxbl-col-md-12) > .dxbl-fl-cpt {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    text-align: left;
    padding-right: 0;
    padding-bottom: .15rem;
}

/* ---------- Alert: yumuşak kurumsal ---------- */
/* ⚠️ site.css'teki uyarı bantlarının SABİT RENKLİ kopyasıydı; bu dosya sonra
   yüklendiği için onu eziyor ve koyu temada beyaz kutular bırakıyordu. */
.alert { border-radius: var(--uz-radius); border: 1px solid transparent; font-size: 13.5px; }
.alert-danger  { background: var(--uz-danger-soft); border-color: var(--uz-danger); color: var(--uz-danger); }
.alert-info    { background: var(--uz-info-soft);   border-color: var(--uz-info);   color: var(--uz-info); }
.alert-success { background: var(--uz-ok-soft);     border-color: var(--uz-ok);     color: var(--uz-ok); }
.alert-warning { background: var(--uz-warn-soft);   border-color: var(--uz-warn);   color: var(--uz-warn); }

/* ---------- Kart içi sade tablolar (rapor/özet) ---------- */
.card .table { font-size: 13px; margin-bottom: 0; }
.card .table > thead th {
    background: #f8fafc; color: #475569; font-weight: 600; font-size: 12px;
    border-bottom: 1px solid var(--uz-border); white-space: nowrap;
}
.card .table > tbody td { vertical-align: middle; border-color: #eef2f6; }
.card .table.table-hover > tbody > tr:hover > * { background: var(--uz-row-hover); }

/* ---------- Filtre/sorgu çubuğu kartı (rapor üst formu) ---------- */
.uzser-filterbar .form-label { margin-bottom: 3px; }

/* ---------- Bölüm başlığı yardımcı ---------- */
.uzser-section-title {
    font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: var(--uz-ink-soft); margin: 6px 0 10px;
    display: flex; align-items: center; gap: 7px;
}
.uzser-section-title .bi { color: var(--uz-brand); font-size: 14px; }

/* ---------- Dikey olay zaman çizelgesi (audit/log) ---------- */
.uzser-timeline { position: relative; margin: 4px 0 0 6px; padding-left: 16px; }
.uzser-timeline::before {
    content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px;
    width: 2px; background: var(--uz-border);
}
.uzser-timeline-item { position: relative; padding: 0 0 12px 6px; }
.uzser-timeline-item:last-child { padding-bottom: 0; }
.uzser-timeline-item .t-dot {
    position: absolute; left: -16px; top: 4px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--uz-brand); box-shadow: 0 0 0 3px #fff;
}
.uzser-timeline-item .t-head { font-size: 13px; color: var(--uz-ink); }

/* ---------- Kaydırılabilir onay-kutusu listesi (rapor sütun seçimi) ---------- */
.uzser-checklist {
    max-height: 240px; overflow-y: auto;
    border: 1px solid var(--uz-border); border-radius: 8px;
    padding: 8px 12px; background: #fcfdfe;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px;
}
.uzser-checklist .dxbl-checkbox { display: flex; margin: 1px 0; }
@media (max-width: 540px) { .uzser-checklist { grid-template-columns: 1fr; } }

/* Rapor: sonuç kartı başlığı sağ-ipucu hizası */
.uzser-card-flexhead {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

/* ---------- Düz HTML butonları (.btn) — kurumsal ince ayar ----------
   office-white.bs5 teması Bootstrap butonlarını sağlar ama .btn-primary turuncu
   ve filtre çipleri sade/uyumsuz kalıyor. site.css temadan SONRA yüklendiğinden
   ezme güvenli; DevExpress (.dxbl-btn) ETKİLENMEZ. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: 500; line-height: 1.4; border-radius: 7px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-sm { font-size: 12px; padding: 4px 11px; }
.btn .bi { font-size: .95em; }

/* Outline butonları: tema koyu/siyah kenarlık veriyor ("Şablondan Yükle" gibi
   <label class="btn btn-outline-secondary">'ler kötü duruyordu). Kurumsal açık
   kenarlığa çek; nötr DevExpress Secondary butonlarıyla tutarlı olsun. */
.btn-outline-secondary {
    --bs-btn-color: var(--uz-ink-soft);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--uz-border);
    --bs-btn-hover-bg: #f1f5f9;
    --bs-btn-hover-border-color: #cbd5e1;
    --bs-btn-hover-color: var(--uz-ink);
    --bs-btn-active-bg: #e2e8f0;
    --bs-btn-active-border-color: #cbd5e1;
    --bs-btn-active-color: var(--uz-ink);
}
.btn-outline-primary {
    --bs-btn-color: var(--uz-brand);
    --bs-btn-border-color: var(--uz-brand);
    --bs-btn-hover-bg: var(--uz-brand);
    --bs-btn-hover-border-color: var(--uz-brand);
    --bs-btn-hover-color: #fff;
}

/* ---------- Filtre çubuğu — tek yerden filtreleme ----------
   Zaman çipleri (NE ZAMAN) × açılır listeler (NE / KİM) × arama tek kapsayıcıda toplanır;
   grid'in sütun-filtre satırı + arama kutusu kapatılır (üç ayrı mekanizma yerine bir tane). */
.uz-filterbar {
    display: flex; flex-direction: column; gap: 8px;
    padding: 9px 10px; border: 1px solid var(--uz-border); border-radius: var(--uz-radius);
    background: #f8fafc;
}
.uz-filterbar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ⚠ DevExpress editörleri (DxTagBox/DxComboBox/DxTextBox) kök elemanlarını kendi gömülü CSS'iyle
   tam genişliğe zorlar; kuralları DLL içinde gömülü geldiği için seçici önceliği/kaynak sırası
   dışarıdan kestirilemiyor. min-width ve Width parametresi bunu yenemedi (editörler flex satırında
   alt alta dizildi). Bu yüzden genişlik !important ile sabitlenir — üçüncü parti bileşenin
   dayattığı stili yenmenin garantili yolu (inline style'ı da yener). */
.uz-filterbar .uz-f { flex: 0 0 186px !important; width: 186px !important; min-width: 0 !important; }
.uz-filterbar .uz-f-search { flex: 1 1 210px !important; width: auto !important; min-width: 190px !important; max-width: 300px !important; }
/* Etiket kutusu çok seçimde dikeyde büyür; satırı bozmasın diye içeride kaydırılır. */
.uz-filterbar .uz-f .dxbl-tagbox-tags { max-height: 62px; overflow-y: auto; }
.uz-filterbar .uz-f-check { font-size: 12.5px; color: var(--uz-ink-soft); white-space: nowrap; }
/* Alt satır: çipler solda, sayaç + Temizle sağda */
.uz-filterbar-spacer { flex: 1 1 auto; }
.uz-filterbar-count {
    font-size: 12.5px; color: var(--uz-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
html[data-bs-theme="dark"] .uz-filterbar { background: var(--uz-surface-sunk); border-color: var(--uz-border); }
@media (max-width: 640px) {
    .uz-filterbar .uz-f,
    .uz-filterbar .uz-f-search { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
    .uz-filterbar-spacer { flex-basis: 100%; }
}

/* ---------- Filtre çipleri (proje aşama/görev tarih ön-ayarları) — segment pill ----------
   Aktif = yumuşak marka dolgusu, pasif = nötr beyaz. Turuncu kalabalığını kaldırır,
   DevExpress aksiyon butonlarından görsel olarak ayrışır. */
.uz-filterchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.uz-filterchips > span,
.uz-filterchips > .bi { color: var(--uz-ink-soft); font-size: 13px; }
.uz-filterchips .btn {
    border-radius: 999px; font-size: 12.5px; font-weight: 500; padding: 4px 13px;
    border: 1px solid var(--uz-border); background: #fff; color: var(--uz-ink-soft);
}
.uz-filterchips .btn:hover {
    background: #f1f5f9; color: var(--uz-ink); border-color: #cbd5e1;
}
.uz-filterchips .btn.btn-primary {
    background: var(--uz-brand); border-color: var(--uz-brand); color: #fff;
}
.uz-filterchips .btn.btn-primary:hover {
    background: var(--uz-brand-dark); border-color: var(--uz-brand-dark); color: #fff;
}

/* "Şablondan Yükle" gibi <label class="btn"> dosya-seçici etiketleri: ikon+metin hizası */
label.btn { cursor: pointer; }
label.btn input[type="file"] { display: none; }

/* ---------- Yardımcı bağlam panelleri (aşama/görev ekleme sayfası yan kolon) ---------- */
.uzser-userlist { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
.uzser-userrow {
    display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; font-size: 13px;
    color: var(--uz-ink);
}
.uzser-userrow.is-selected { background: var(--uz-brand-soft); font-weight: 600; color: var(--uz-brand-dark); }
.uzser-useravatar {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    background: var(--uz-brand); color: var(--uz-brand-fg);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
}
.uzser-username { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Yan-kolon kartlarını biraz daha sıkı tut */
.uzser-ctx .uzser-card { padding: 14px 16px; margin-bottom: 14px; }
.uzser-ctx .uzser-card-title { margin-bottom: 10px; font-size: 14px; }

/* Mevcut aşamalar listesi (aşama ekleme sayfası bağlam kartı) */
.uzser-phaselist { display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; }
.uzser-phaserow {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; font-size: 13px;
}
.uzser-phaserow.is-current { background: #eff4ff; box-shadow: inset 2px 0 0 var(--uz-brand); }
.uzser-phaseord {
    width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
    background: #eef2f7; color: #475569; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.uzser-phasename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uzser-phaserow .uz-pill { flex: 0 0 auto; }

/* ============================================================
   DARK MODE  –  html[data-bs-theme="dark"]
   DevExpress 'blazing-dark.bs5.min.css' DevExpress + Bootstrap
   bileşenlerini yönetir; buradaki blok portal-özel CSS sınıflarını
   (hardcoded light renkler) karanlık temaya taşır.
   ============================================================ */

/* Kabuk jetonlari artik YALNIZ site.css'te tanimlanir; buradaki
   ikinci tanim acik temada tum uygulamayi eski mavi degerlere dusuruyordu. */

/* Kart & konteyner arka planları */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .uzser-card,
html[data-bs-theme="dark"] .uzser-kpi,
html[data-bs-theme="dark"] .uzser-stat,
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-header.bg-transparent,
html[data-bs-theme="dark"] .card-header.bg-white { background: var(--uz-surface); border-color: var(--uz-border); }

/* DevExpress grid */
html[data-bs-theme="dark"] .dxbl-grid { background: var(--uz-surface); }
html[data-bs-theme="dark"] .dxbl-grid .dxbl-grid-header th,
html[data-bs-theme="dark"] .dxbl-grid thead th { background: var(--uz-surface-sunk) !important; color: var(--uz-ink-soft) !important; border-color: var(--uz-border) !important; }
html[data-bs-theme="dark"] .dxbl-grid tbody td { border-color: var(--uz-border) !important; }
html[data-bs-theme="dark"] .dxbl-grid .dxbl-grid-filter-row td { background: var(--uz-surface-sunk) !important; }

/* Filtre & detay panelleri */
html[data-bs-theme="dark"] .uzser-filter-bar { background: var(--uz-surface-sunk); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-detail { background: var(--uz-surface-sunk); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-checklist { background: var(--uz-surface-sunk); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-empty { background: var(--uz-surface-sunk); border-color: var(--uz-border); }

/* Hesap menüsü açılır */
html[data-bs-theme="dark"] .uzser-acct-head { border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-acct-avatar { background: #1c3057; }
html[data-bs-theme="dark"] .uzser-acct-name { color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-acct-mail { color: var(--uz-ink-soft); }
html[data-bs-theme="dark"] .uzser-acct-item { color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-acct-item i { color: var(--uz-ink-soft); }
html[data-bs-theme="dark"] .uzser-acct-item:hover { background: #1c2a40; }
html[data-bs-theme="dark"] .uzser-acct-item.danger { color: #f87171; }
html[data-bs-theme="dark"] .uzser-acct-item.danger i { color: #f87171; }
html[data-bs-theme="dark"] .uzser-acct-item.danger:hover { background: #2d1a1a; }
html[data-bs-theme="dark"] .uzser-acct-sep { background: var(--uz-border); }

/* Açılır bildirim/arama item'ları */
html[data-bs-theme="dark"] .uzser-dd-item { border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-dd-item:hover { background: var(--uz-surface-sunk); }
html[data-bs-theme="dark"] .uzser-dd-item.unread { background: #1a2740; }
html[data-bs-theme="dark"] .uzser-dd-item .t { color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-search-results .row-item:hover { background: #1c2a40; }
html[data-bs-theme="dark"] .uzser-search-results .row-item .t { color: var(--uz-ink); }

/* Header ikon hover */
html[data-bs-theme="dark"] .uzser-iconbtn:hover { background: rgba(255,255,255,.1); }
html[data-bs-theme="dark"] .uzser-htool.dxbl-btn:hover,
html[data-bs-theme="dark"] .uzser-htool:hover { background: rgba(255,255,255,.1) !important; }

/* ⚠️ Nötr DX buton kuralları BURADAN KALDIRILDI. site.css'teki tanımın birebir
   kopyasıydılar; jetonlar zaten temayla değiştiği için gereksizdiler. Zararsız
   da değildiler: kopya, site.css'in `:not(.dxbl-btn-tool)` istisnasını
   TAŞIMIYORDU ve `html[…]` öneki yüzünden daha özgüldü. Sonuç, kenar
   çubuğundaki genişlet/daralt oklarının koyu temada yeniden zeminli kutulara
   dönmesiydi — açık temada düzgün göründüğü için gözden kaçması kolaydı. */

/* Outline Bootstrap butonları */
/* ⚠️ DevExpress teması .btn-outline-secondary için DEĞİŞKEN değil doğrudan renk veriyor (color: #686868,
   border-color: #d7d8d9); değişkenleri ezmek yetmiyor, koyu temada etkin düğmeler kapalı gibi görünüyordu. */
.btn-outline-secondary:not(:disabled):not(.disabled) { color: var(--bs-btn-color); border-color: var(--bs-btn-border-color); }
.btn-outline-secondary:not(:disabled):not(.disabled):hover { color: var(--bs-btn-hover-color); border-color: var(--bs-btn-hover-border-color); }

html[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-bg: var(--uz-surface);
    --bs-btn-border-color: var(--uz-border);
    --bs-btn-color: var(--uz-ink-soft);
    --bs-btn-hover-bg: var(--uz-row-hover);
    --bs-btn-hover-border-color: #3d5170;
    --bs-btn-hover-color: var(--uz-ink);
}
html[data-bs-theme="dark"] .uz-filterchips .btn { background: var(--uz-surface); border-color: var(--uz-border); color: var(--uz-ink-soft); }
html[data-bs-theme="dark"] .uz-filterchips .btn:hover { background: var(--uz-row-hover); color: var(--uz-ink); }

/* Diyalog bölüm başlıkları */
html[data-bs-theme="dark"] .uzdlg-sec { background: var(--uz-surface); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzdlg-sec-head { background: var(--uz-surface-sunk); border-color: var(--uz-border); color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzdlg-dur { background: var(--uz-surface-sunk); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzdlg-dur strong { color: var(--uz-ink); }

/* Özet diyaloğu */
html[data-bs-theme="dark"] .uzser-summary-label { color: var(--uz-ink-soft); }
html[data-bs-theme="dark"] .uzser-summary-value { color: var(--uz-ink); }

/* YZ sohbeti */
html[data-bs-theme="dark"] .uzser-ai-panel { background: var(--uz-surface); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-ai-sidebar { background: var(--uz-surface); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-ai-main { background: var(--uz-surface); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-ai-msg.assistant .uzser-ai-bubble { background: var(--uz-row-hover); color: var(--uz-ink); border-color: var(--uz-border); }
/* ⚠️ Giriş alanı KOYUDA da tek parça. Eskiden textarea kendi zeminini ve çerçevesini
   alıyordu: aydınlıkta "düğmeler + alan + gönder" tek bir kutuydu, koyuda üç ayrı kutuya
   bölünüyordu. Aynı ekranın iki teması aynı şeyi anlatmalı. */
html[data-bs-theme="dark"] .uzser-ai-input { background: var(--uz-surface); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-ai-input textarea { background: none; color: var(--uz-ink); border: none; }
html[data-bs-theme="dark"] .uzser-ai-convitem:hover { background: var(--uz-surface-sunk); }
html[data-bs-theme="dark"] .uzser-ai-convitem.active { background: var(--uz-row-hover); }
html[data-bs-theme="dark"] .uzser-ai-tool { background: #1a2740; border-color: var(--uz-border); color: var(--uz-ink-soft); }
html[data-bs-theme="dark"] .uzser-ai-toolname { color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-ai-toolsub { color: var(--uz-ink-soft); }

/* Giriş butonları — hap zemini + AÇIK durumların koyu karşılıkları (eskiden .on için hiç yoktu). */
html[data-bs-theme="dark"] .uzser-ai-toolpill { background: var(--uz-content-bg); }
html[data-bs-theme="dark"] .uzser-ai-attach { background: transparent; color: var(--uz-ink-soft); }
html[data-bs-theme="dark"] .uzser-ai-attach:hover { background: var(--uz-row-hover); color: var(--uz-brand); box-shadow: none; }
html[data-bs-theme="dark"] .uzser-ai-attach:disabled:hover,
html[data-bs-theme="dark"] .uzser-ai-attach.disabled:hover { background: transparent; color: var(--uz-ink-soft); }
html[data-bs-theme="dark"] .uzser-ai-think-toggle.on { background: #b8860b; color: #fff; }
html[data-bs-theme="dark"] .uzser-ai-agent-toggle.on { background: var(--uz-brand); color: #fff; }
html[data-bs-theme="dark"] .uzser-ai-mic.on { background: #dc2626; color: #fff; }
html[data-bs-theme="dark"] .uzser-ai-inputhint kbd { background: var(--uz-surface); border-color: var(--uz-border); color: var(--uz-ink-soft); }

/* Kenar çubuğu: arama, gruplar, satır menüsü */
html[data-bs-theme="dark"] .uzser-ai-convsearch input { background: var(--uz-content-bg); border-color: var(--uz-border); color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-ai-convsearch input:focus { background: var(--uz-surface-sunk); border-color: var(--uz-brand); }
html[data-bs-theme="dark"] .uzser-ai-searchclear:hover { background: var(--uz-row-hover); color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-ai-archcount { background: var(--uz-row-hover); color: var(--uz-ink-soft); }
html[data-bs-theme="dark"] .uzser-ai-convkebab:hover,
html[data-bs-theme="dark"] .uzser-ai-convkebab.open { background: var(--uz-row-hover); color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-ai-convitem.menu-open { background: var(--uz-surface-sunk); }
html[data-bs-theme="dark"] .uzser-ai-convmenu { background: var(--uz-surface); border-color: var(--uz-border); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
html[data-bs-theme="dark"] .uzser-ai-convmenu button { color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-ai-convmenu button:hover { background: var(--uz-row-hover); }
html[data-bs-theme="dark"] .uzser-ai-convmenu button.danger { color: #f87171; }
html[data-bs-theme="dark"] .uzser-ai-convmenu button.danger:hover { background: #3a1c1c; }
html[data-bs-theme="dark"] .uzser-ai-renamebox { background: var(--uz-content-bg); color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-ai-sidecollapse:hover { background: var(--uz-surface-sunk); }

/* Rol şeridi */
html[data-bs-theme="dark"] .uzser-ai-rolebar { background: var(--uz-surface); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-ai-rolebtn { background: var(--uz-content-bg); border-color: var(--uz-border); color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-ai-rolemenu { background: var(--uz-surface); border-color: var(--uz-border); box-shadow: 0 12px 34px rgba(0,0,0,.55); }
html[data-bs-theme="dark"] .uzser-ai-roleopt { color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-ai-roleopt:hover,
html[data-bs-theme="dark"] .uzser-ai-roleopt.sel { background: var(--uz-row-hover); }
html[data-bs-theme="dark"] .uzser-ai-roledesc,
html[data-bs-theme="dark"] .uzser-ai-rolehint { color: var(--uz-ink-soft); }
html[data-bs-theme="dark"] .uzser-ai-rolehint { border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-ai-action { background: var(--uz-surface); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-ai-chart { background: var(--uz-surface); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-ai-fbnote { background: var(--uz-surface); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-ai-fbnote textarea { background: var(--uz-content-bg); color: var(--uz-ink); border-color: var(--uz-border); }
html[data-bs-theme="dark"] .uzser-ai-md code { background: var(--uz-surface-sunk); color: var(--uz-ink); }
html[data-bs-theme="dark"] .uzser-ai-think > div { background: var(--uz-surface-sunk); }
html[data-bs-theme="dark"] .uzser-ai-think summary:hover,
html[data-bs-theme="dark"] .uzser-ai-tools summary:hover { background: var(--uz-surface-sunk); }

/* ============================================================
   İZ ŞERİDİ — cevabın altındaki "ne çalıştı, neye bakıldı"
   ⚠️ Eskiden iki ayrı tam genişlik akordeondu. Üç satırlık bir cevabın altında
   cevaptan çok yer kaplıyor, gözü aşağı çekiyor ve asıl sonucu gölgeliyordu.
   Şimdi tek satırda rozetler; detay basınca açılıyor, kaybolmuyor.
   ============================================================ */
.uzser-ai-izler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.uzser-ai-iz { flex: 0 1 auto; margin: 0; }
.uzser-ai-iz > summary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 99px; cursor: pointer;
    font-size: 11.5px; font-weight: 600; line-height: 1.5;
    color: var(--uz-ink-soft); background: var(--uz-surface-sunk);
    border: 1px solid var(--uz-border-soft);
    list-style: none;
}
.uzser-ai-iz > summary::-webkit-details-marker { display: none; }
.uzser-ai-iz > summary:hover { border-color: var(--uz-border); color: var(--uz-ink); }
.uzser-ai-iz[open] > summary { border-color: var(--uz-brand); color: var(--uz-brand); }
/* Açılınca detay tam satırı kaplar; rozetin yanına sıkışmaz. */
.uzser-ai-iz[open] { flex: 1 0 100%; }
.uzser-ai-iz > .uzser-ai-tools-body { margin-top: 6px; }

/* ============================================================
   EYLEM ÇİPLERİ — cevabın altında "şimdi ne yapabilirim"
   ⚠️ İz rozetlerinden AYRI ve daha belirgin: iz geçmişi anlatır (ne çalıştı),
   eylem ileriyi gösterir (ne yapılabilir). İkisini aynı görünüşe koymak,
   tıklanabilir olanı tıklanamaz olanın arasında kaybediyordu.
   ============================================================ */
.uzser-ai-eylemler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.uzser-ai-eylem {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: 99px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.5;
    color: var(--uz-brand); background: var(--uz-brand-soft);
    border: 1px solid transparent;
    transition: border-color .15s ease;
}
.uzser-ai-eylem:hover:not(:disabled) { border-color: var(--uz-brand); }
.uzser-ai-eylem:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: 2px; }
/* Akış sürerken basılamaz: ikinci bir tur başlatmak ilkini yarıda bırakırdı. */
.uzser-ai-eylem:disabled { opacity: .5; cursor: default; }

/* ============================================================
   Ekler (besteci).
   ============================================================ */
/* --- ekler (besteci) --- */
.uzser-ai-ekler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.uzser-ai-ek {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    padding: 6px 8px 6px 10px;
    border-radius: var(--uz-radius);
    border: 1px solid var(--uz-border);
    background: var(--uz-surface);
    font-size: 12.5px;
}

.uzser-ai-ek.gorsel { border-color: color-mix(in srgb, var(--uz-brand) 45%, var(--uz-border)); }
.uzser-ai-ek > .bi { color: var(--uz-brand); font-size: 1.05rem; flex: 0 0 auto; }
.uzser-ai-ek-metin { display: flex; flex-direction: column; min-width: 0; }

/* Uzun dosya adı satırı taşırmaz; tam ad ipucunda. */
.uzser-ai-ek-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uzser-ai-ek-boy { font-size: 11px; color: var(--uz-ink-soft); }

.uzser-ai-ek button {
    border: 0; background: transparent; color: var(--uz-ink-soft);
    width: 22px; height: 22px; border-radius: 6px; cursor: pointer; flex: 0 0 auto;
}

.uzser-ai-ek button:hover { background: color-mix(in srgb, var(--uz-danger) 14%, transparent); color: var(--uz-danger); }
.uzser-ai-ek.bekliyor { opacity: .7; }

.uzser-ai-ekhata { font-size: 12.5px; color: var(--uz-danger); margin-bottom: 6px; }

/* --- AI'ın ÜRETTİĞİ dosyalar (cevabın altında, indirilebilir) ---
   ⚠️ Yukarıdaki besteci ekleriyle karıştırılmamalı: bunlar tıklanır ve dosya iner. */
.uzser-ai-uretilenler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.uzser-ai-uretilen {
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 280px; padding: 7px 12px;
    border-radius: var(--uz-radius); cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.5;
    color: var(--uz-brand); background: var(--uz-brand-soft);
    border: 1px solid transparent;
    transition: border-color .15s ease;
}

.uzser-ai-uretilen:hover:not(:disabled) { border-color: var(--uz-brand); }
.uzser-ai-uretilen:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: 2px; }
.uzser-ai-uretilen:disabled { opacity: .6; cursor: default; }
.uzser-ai-uretilen > .bi { flex: 0 0 auto; font-size: 1.05rem; }

/* Uzun dosya adı satırı taşırmaz; tam ad ipucunda. */
.uzser-ai-uretilen-ad { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.uzser-ai-uretilen-hata { font-size: 12.5px; color: var(--uz-danger); margin-top: 6px; }

/* Ek düğmesi bir <label> — içindeki dosya girdisi gizlenir ama erişilebilir kalır. */
.uzser-ai-ekle { position: relative; overflow: hidden; cursor: pointer; }
.uzser-ai-ekle input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* Gönderilen mesajın altındaki ek künyeleri. */
.uzser-ai-mesaj-ekler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; justify-content: flex-end; }

.uzser-ai-msg.assistant .uzser-ai-mesaj-ekler { justify-content: flex-start; }

.uzser-ai-mesaj-ek {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--uz-brand) 12%, transparent);
    color: var(--uz-brand);
    font-size: 12px;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   Sohbet görsel katmanı (2. tur): kimlik şeridi, tablo/kod okunabilirliği,
   mesaj eylemlerinin üzerine gelince belirmesi.
   ============================================================ */

/* --- kim konuşuyor --- */
/* ⚠️ Uzun bir sohbette "bunu ben mi sordum, o mu dedi" ayrımı yalnız hizaya ve renge
   kalıyordu; ekran görüntüsü alınıp paylaşıldığında bu ayrım tamamen kayboluyordu. */
.uzser-ai-kim {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--uz-ink-soft);
    margin: 0 2px 5px;
}

.uzser-ai-msg.user .uzser-ai-kim { flex-direction: row-reverse; }

.uzser-ai-kim-rozet {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: 0 0 auto;
}

.uzser-ai-msg.assistant .uzser-ai-kim-rozet {
    background: color-mix(in srgb, var(--uz-brand) 18%, transparent);
    color: var(--uz-brand);
}

.uzser-ai-msg.user .uzser-ai-kim-rozet {
    background: var(--uz-brand);
    color: var(--uz-brand-fg);
}

.uzser-ai-kim-saat { font-weight: 400; opacity: .75; }

/* --- tablolar --- */
/* Cevaptaki tablo geniş olabiliyor (12 kolonlu satış kırılımı): kabı kaydırılabilir,
   başlığı yapışkan. Eskiden tablo balonu yatayda taşırıyor ve sağdaki kolonlar
   erişilemez hâle geliyordu. */
.uzser-ai-md table {
    display: block;
    overflow-x: auto;
    border-radius: var(--uz-radius-sm);
}

.uzser-ai-md thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Sayı kolonları sağa yaslı okunur: rakamlar hizasız olduğunda karşılaştırma zorlaşıyor. */
.uzser-ai-md td:has(+ td), .uzser-ai-md td { font-variant-numeric: tabular-nums; }

.uzser-ai-md tbody tr:nth-child(even) { background: color-mix(in srgb, var(--uz-ink) 3%, transparent); }
.uzser-ai-md tbody tr:hover { background: color-mix(in srgb, var(--uz-brand) 8%, transparent); }

/* --- kod --- */
.uzser-ai-md pre {
    border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
    font-size: 12.5px;
    line-height: 1.55;
    padding: 11px 13px;
}

/* --- mesaj eylemleri: üzerine gelince --- */
/* Beğen/beğenme/kopyala her cevabın altında sürekli duruyordu; üç ikon, cevabın
   kendisinden daha fazla dikkat çekiyordu. */
.uzser-ai-msgactions {
    opacity: 0;
    transition: opacity .15s ease;
}

.uzser-ai-msg:hover .uzser-ai-msgactions,
.uzser-ai-msgactions:focus-within,
.uzser-ai-msgactions.has-fb { opacity: 1; }

/* Dokunmatik ekranda hover yok: eylemler hep görünür kalmalı. */
@media (hover: none) {
    .uzser-ai-msgactions { opacity: 1; }
}

/* Hazır cevaplar: son cevabın altında tek tıkla gönderilen öneriler (kişi profiline göre). */
.uzser-ai-takip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.uzser-ai-takip-oge {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 5px 11px; font-family: inherit; font-size: 12.5px; line-height: 1.35; cursor: pointer; text-align: left;
    color: var(--uz-brand); background: var(--uz-brand-soft); border: 1px solid transparent; border-radius: 999px;
    transition: border-color .15s ease;
}
.uzser-ai-takip-oge:hover:not(:disabled) { border-color: var(--uz-brand); }
.uzser-ai-takip-oge:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: 2px; }
.uzser-ai-takip-oge:disabled { opacity: .55; cursor: default; }
.uzser-ai-takip-oge span { overflow: hidden; text-overflow: ellipsis; }

/* Personel: sohbetin müşterisi (kenar çubuğunun üstünde, tam genişlik). */
.uzser-ai-musteri { width: 100%; margin-top: 6px; }

/* ============================================================
   CANLI KATMAN — tur sürerken yalnız O AN yapılan iş (2026-10-16)
   ⚠️ Eski "canlı eylem şeridi" her aracı alt alta satır olarak ekliyordu; 9 araçlı turda cevaptan
   büyük bir liste oluşuyordu. Katman tek satır: şimdiki iş yerinde değişir, bitenler nokta olur.
   ============================================================ */
.uzser-ai-katman {
    display: flex; align-items: center; gap: 12px; max-width: 100%;
    padding: 9px 14px 9px 10px; border-radius: 14px; position: relative; overflow: hidden;
    background: color-mix(in srgb, var(--uz-brand) 6%, var(--uz-surface));
    border: 1px solid color-mix(in srgb, var(--uz-brand) 20%, transparent);
    box-shadow: 0 6px 18px -12px rgba(var(--uz-brand-rgb), .45);
    animation: uzserAiRise .3s cubic-bezier(.22,.9,.35,1) both;
}
.uzser-ai-katman::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, transparent, var(--uz-brand), transparent);
    animation: uzserAiSweep 1.9s linear infinite;
}
.uzser-ai-katman .uzser-ai-orbit { width: 26px; height: 26px; }
.uzser-ai-katman-govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uzser-ai-katman-ust { display: flex; align-items: center; gap: 7px; min-width: 0; }
.uzser-ai-katman-ikon { color: var(--uz-brand); font-size: 14px; flex: 0 0 auto; }
.uzser-ai-katman-ad {
    font-size: 13.5px; font-weight: 600; color: var(--uz-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    animation: uzserAiKatmanGecis .28s ease-out both;
}
@keyframes uzserAiKatmanGecis { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.uzser-ai-katman .uzser-ai-stepno {
    padding: 1px 7px; border-radius: 999px; background: var(--uz-brand-soft); color: var(--uz-brand);
    font-size: 10.5px; font-weight: 700; flex: 0 0 auto; font-variant-numeric: tabular-nums;
}
.uzser-ai-katman-alt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--uz-ink-soft); }
.uzser-ai-katman-iz { display: inline-flex; gap: 3px; align-items: center; }
.uzser-ai-katman-iz b {
    width: 6px; height: 6px; border-radius: 50%; background: var(--uz-ok);
    animation: uzserAiKatmanNokta .3s ease-out both;
}
.uzser-ai-katman-iz b.hata { background: var(--uz-danger); }
@keyframes uzserAiKatmanNokta { from { transform: scale(0); } to { transform: scale(1); } }
.uzser-ai-yaziyor { display: inline-flex; padding: 6px 2px; }
@media (prefers-reduced-motion: reduce) {
    .uzser-ai-katman, .uzser-ai-katman-ad, .uzser-ai-katman-iz b { animation: none; }
    .uzser-ai-katman::after { display: none; }
}

/* ============================================================
   İŞLEM ÖZETİ — tur bitince "ne yaptı" (2026-10-16)
   Rozet tek satır; açılınca araçlar ikonlu çip olarak sarılır (alt alta tablo değil). Ham anahtar yalnız ipucunda.
   ============================================================ */
.uzser-ai-islemler > summary { gap: 6px; }
.uzser-ai-islemler > summary .bi { color: var(--uz-brand); }
.uzser-ai-islemler.hatali > summary .bi { color: var(--uz-warn); }
.uzser-ai-islem-hata { color: var(--uz-danger); }
.uzser-ai-islem-sure { color: var(--uz-ink-faint); font-weight: 500; font-variant-numeric: tabular-nums; }
.uzser-ai-islem-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.uzser-ai-islem {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 10px; font-size: 12px; line-height: 1.4;
    color: var(--uz-ink); background: var(--uz-surface); border: 1px solid var(--uz-border-soft);
    animation: uzserAiRise .25s cubic-bezier(.22,.9,.35,1) both;
}
.uzser-ai-islem .bi { color: var(--uz-brand); font-size: 12.5px; }
.uzser-ai-islem-adet {
    font-size: 10.5px; font-weight: 700; color: var(--uz-ink-soft); background: var(--uz-surface-sunk);
    padding: 0 6px; border-radius: 99px; font-variant-numeric: tabular-nums;
}
.uzser-ai-islem.hata { background: var(--uz-danger-soft); border-color: color-mix(in srgb, var(--uz-danger) 30%, transparent); }
.uzser-ai-islem.hata .bi { color: var(--uz-danger); }
.uzser-ai-islem-durum { font-size: 10.5px; font-weight: 700; color: var(--uz-danger); text-transform: uppercase; letter-spacing: .03em; }
html[data-bs-theme="dark"] .uzser-ai-islem { background: var(--uz-surface-sunk); }
html[data-bs-theme="dark"] .uzser-ai-katman { background: color-mix(in srgb, var(--uz-brand) 12%, var(--uz-surface)); }

/* Besteci altı: kısayol ipucu solda, bu sohbetin kredisi sağda (.uzser-ai-inputhint yukarıda). */
.uzser-ai-sohbetkredi {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
    color: var(--uz-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.uzser-ai-sohbetkredi .bi { color: #d9a441; }

/* ============================================================
   "BUNU MU DEMEK İSTEDİNİZ?" — göndermeden önce yazım önerisi (2026-10-16)
   Mesaj henüz gitmedi: yazma kutusunun hemen üstünde, sohbetin akışını bozmadan durur.
   ============================================================ */
.uzser-ai-duzeltme {
    width: calc(100% - 28px); max-width: var(--uz-chat-measure); margin: 0 auto 8px;
    padding: 10px 12px; border-radius: 12px;
    background: color-mix(in srgb, var(--uz-brand) 6%, var(--uz-surface));
    border: 1px solid color-mix(in srgb, var(--uz-brand) 25%, transparent);
    display: flex; flex-direction: column; gap: 6px;
    animation: uzserAiRise .25s cubic-bezier(.22,.9,.35,1) both;
}
.uzser-ai-duzeltme-bas { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--uz-ink-soft); }
.uzser-ai-duzeltme-bas .bi { color: var(--uz-brand); }
.uzser-ai-duzeltme-bas b { color: var(--uz-ink); font-weight: 600; }
.uzser-ai-duzeltme-neden {
    font-size: 11px; padding: 1px 8px; border-radius: 99px; background: var(--uz-surface-sunk); color: var(--uz-ink-soft);
}
.uzser-ai-duzeltme-kapat { margin-left: auto; border: 0; background: none; color: var(--uz-ink-soft); padding: 0 2px; line-height: 1; }
.uzser-ai-duzeltme-kapat:hover { color: var(--uz-ink); }
.uzser-ai-duzeltme-metin { font-size: 14px; color: var(--uz-ink); line-height: 1.45; overflow-wrap: anywhere; }
.uzser-ai-duzeltme-eylem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uzser-ai-duzeltme-eylem small { margin-left: auto; color: var(--uz-ink-faint); cursor: help; }
@media (prefers-reduced-motion: reduce) { .uzser-ai-duzeltme { animation: none; } }

/* ---- Zaman akışı (10-21): düşünme / ara açıklama / araç / yazma sırayla ---- */
.uzser-ai-akis { display: flex; flex-direction: column; gap: 6px; }
.uzser-ai-akis > .uzser-ai-akis-d { margin: 2px 0; }
.uzser-ai-akis-a {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    padding: 3px 10px; border-radius: 999px; font-size: .78rem;
    background: var(--uz-surface-2, rgba(15, 23, 42, .05)); color: var(--uz-ink-soft, #475569);
    border: 1px solid var(--uz-line, rgba(15, 23, 42, .08));
}
.uzser-ai-akis-a > i { color: var(--uz-accent, #2563eb); }
.uzser-ai-akis-a.hata { color: var(--uz-danger, #b91c1c); }
.uzser-ai-akis-a.hata > i { color: var(--uz-danger, #b91c1c); }
.uzser-ai-akis-sure { font-size: .72rem; color: var(--uz-ink-faint, #94a3b8); font-variant-numeric: tabular-nums; }
.uzser-ai-akis .uzser-ai-katman { margin-top: 2px; }

/* 10-27: art arda düşünme + araç adımları yerinde TEK satır (kapalı); tıklayınca ayrıntı. */
.uzser-ai-akis-grup { align-self: flex-start; max-width: 100%; margin: 2px 0; }
.uzser-ai-akis-grup > summary {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 3px 10px; border-radius: 999px; font-size: .78rem; cursor: pointer; list-style: none; user-select: none;
    background: var(--uz-surface-2, rgba(15, 23, 42, .05)); color: var(--uz-ink-soft, #475569);
    border: 1px solid var(--uz-line, rgba(15, 23, 42, .08));
}
.uzser-ai-akis-grup > summary::-webkit-details-marker { display: none; }
.uzser-ai-akis-grup > summary:hover { color: var(--uz-ink, #0f172a); }
.uzser-ai-akis-grup > summary:focus-visible { outline: 2px solid var(--uz-accent, #2563eb); outline-offset: 2px; }
.uzser-ai-akis-grup > summary > i { color: var(--uz-accent, #2563eb); }
.uzser-ai-akis-grup.hata > summary > i { color: var(--uz-danger, #b91c1c); }
.uzser-ai-akis-grup-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.uzser-ai-akis-grup > summary .uzser-ai-acc-hint { opacity: .7; }
.uzser-ai-akis-grup > summary > i,
.uzser-ai-akis-grup > summary .uzser-ai-akis-sure,
.uzser-ai-akis-grup > summary .uzser-ai-acc-hint { flex-shrink: 0; white-space: nowrap; }
.uzser-ai-akis-grup[open] > summary .uzser-ai-acc-hint { display: none; }
.uzser-ai-akis-grup-icerik {
    display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px 10px; padding-left: 10px;
    border-left: 2px solid var(--uz-line, rgba(15, 23, 42, .08));
}