/* WebShell global stilleri. Host App.razor'da _content/Nun.WebShell/nun-webshell.css olarak bağlanır. */

/* ============ TASARIM DİLİ (19.60/B; 21 Tem revizesi — kullanıcı kararı) ============
   DevExpress bileşen görünümüne STİL EZMESİ YAPILMAZ (21 Tem: --dxbl-* iç tema değişkenleri
   ve !important ezmeleri geri alındı — belgeli/resmî API değiller, sürümle kırılabilirler);
   bileşenler temanın varsayılan görünümüyle çizilir, yoğunluk host'ta AddDevExpressBlazor
   (SizeMode.Medium; bileşenlerde yerel SizeMode sapması da yok). BİLİNÇLİ İSTİSNALAR:
   (1) font — Fluent teması fontu
   --DS-font-family-sans-serif değişkeninden okur, tek ezmeyle Manrope/Inter verilir
   (ikon fontlarına dokunulmaz); (2) CHAT EKRANI (.assistantchat altındaki her şey) —
   kullanıcı kararıyla olduğu gibi KORUNUR; (3) işlevsel min-height flex düzeltmeleri
   (nun-uikit.css). Kremsi zemin/nötr --nun tokenları BİZİM elemanlarımızın stilidir. */
@font-face {
    font-family: "Inter";
    src: url("fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Manrope (SIL OFL — değişken ağırlık; Styrene hissine Inter'den bir tık daha yakın deneme).
   İki altküme: latin + latin-ext (Türkçe ğışöçü İ latin-ext'te); eksik glif Inter'e düşer. */
@font-face {
    font-family: "Manrope";
    src: url("fonts/Manrope-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Manrope";
    src: url("fonts/Manrope-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --nun-font: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif; /* Manrope denemesi — geri dönüş: baştan Manrope'u sil */
    --nun-text: #1f1e1d;
    --nun-text-soft: #6e6d6b;
    --nun-accent: #2f2f2e;
    --nun-accent-hover: #191817;

    /* Zemin/yüzey tonları — kullanıcının Claude Code'dan ölçtüğü değerler (21 Tem). */
    --nun-bg: #fdfdfc;        /* sayfa/sohbet zemini */
    --nun-surface: #efefee;   /* kullanıcı balonu */
    --nun-selected: #f1f1f0;  /* seçili öğe / segment rayı */
    --nun-border: #dcdbd9;    /* nötr çerçeve çizgisi (RecordForm gövde çerçevesi — 19.109) */

    /* Login tasarımıyla gelen roller (19.142 — marka sistemi tokens.css'in ürün karşılığı):
       marka renksizdir, odak halkası da renksizdir (= accent); hata metni nötr paletle
       uyumlu tutulmuş kırmızı; pasif düğme dolgusu nötr skalanın 400'ü. */
    --nun-focus: var(--nun-accent);
    --nun-danger-text: #9a2f28;
    --nun-accent-muted: #c9c8c5;
    --nun-text-invert: #ffffff;

    /* Sohbet içerik kolonunun genişliği (21 Tem revizesi: 780 → 900; ayar TEK yerden).
       Kolon ortalama artık max-width'le DEĞİL bu token'la yapılır: scroll konteyneri tam
       genişlikte kalır (çubuk sayfanın EN SAĞINDA), içerik padding/margin'le ortalanır. */
    --nun-chat-width: 900px;

    --DS-font-family-sans-serif: var(--nun-font);
}

/* rem tabanı SERBESTTİR (21 Tem kullanıcı kararı — 19.60/B'nin 13px ezmesi ÖLDÜ):
   tarayıcı varsayılanı (16px) geçerlidir; Bootstrap + DevExpress teması + bizim rem
   değerlerimiz birlikte bu tabandan ölçeklenir. Yoğunluk SizeMode.Large'ın işidir. */

body {
    font-family: var(--nun-font);
    color: var(--nun-text);
    background-color: var(--nun-bg);
    /* Claude Code (Electron) metni antialiased çizer; Chrome'un subpixel varsayılanı aynı
       rengi daha koyu/kalın gösterir — algılanan "font farkı"nın büyük parçası buydu. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sohbet zemini gövdeden gelir (ölçüm: #FDFDFC) — bileşenin beyazı zemini ezmesin.
   Asıl boyayı mesaj listesi kendi değişkeninden basar (--dxbl-chatui-messagelist-bg =
   temanın #FFFFFE'ye yakın neutral beyazı); değişken kökünde ezilir. */
.assistantchat .dxbl-chatui-root {
    --dxbl-chatui-messagelist-bg: transparent;
    --dxbl-chatui-submitarea-bg: transparent;

    /* İçerik kolonu ORTALAMA (21 Tem): .dxbl-chatui-messages padding'ini bu değişkenden
       okur (tema: padding: y x) — scroll konteyneri (.dxbl-chatui-scrollviewer) tam
       genişlikte kalır, çubuk sayfanın EN SAĞINA gider; içerik --nun-chat-width'e ortalanır. */
    --dxbl-chatui-messagelist-padding-x: max(16px, calc((100% - var(--nun-chat-width)) / 2));

    /* Giriş kutusu HAP formda (21 Tem — ChatGPT referansı): tek satır kutu 32px olduğundan
       16px = tam hap; çok satıra büyüyünce yumuşak köşeli dikdörtgene açılır (aynı davranış). */
    --dxbl-chatui-submitarea-container-border-radius: 16px;
}

/* Hap köşeler ÇOCUKLARDAN korunur (canlıda teşhis — DOM'da gözle doğrulandı): içteki beyaz
   memo editör küçük radius'uyla (3.25px) 16px kavisin ÜZERİNE taşıyor, kavisler çocuğun
   altında kayboluyordu ("kenarlar görünmüyor" dönütü). Kırpma çocukları hap forma oturtur;
   ek listesi kutu İÇİNDE aktığından (kutu büyür) kırpmadan etkilenmez, dosya seçimi OS
   diyaloğudur (kırpılacak açılır katman yok). */
.assistantchat .dxbl-chatui-submitarea-container {
    overflow: hidden;
}

/* Scroll oluğu İKİ kenarda rezerve: içerik kolonu çubuğun yediği alandan bağımsız tam
   ortada kalır (soldaki simetri payı sayesinde giriş kutusu kolonuyla hizası piksel tutar). */
.assistantchat .dxbl-chatui-scrollviewer {
    scrollbar-gutter: stable both-edges;
}

.assistantchat .dxbl-chatui {
    background: transparent !important;
}

/* Grid ZEMİNİ sayfanın kremsi tonuna bağlıdır (21 Tem kullanıcı isteği — "ezme yok"
   ilkesinin bilinçli TEK grid istisnası): satır zeminleri --dxbl-grid-bg'den türediğinden
   (--dxbl-grid-row-bg) tek değişken yeter; başka grid değişkenine dokunulmaz.
   DİKKAT: --dxbl-* iç tema değişkenidir (belgeli API değil) — DevExpress sürüm
   yükseltmelerinde çalıştığı kontrol edilmeli. */
.dxbl-grid {
    --dxbl-grid-bg: var(--nun-bg);
}

/* AÇILIR YÜZEYLERİN (popup/dropdown/mesaj kutusu) ZEMİNİ de kremsi tona bağlıdır (22 Tem
   kullanıcı isteği — grid istisnasının kardeşi): tema --dxbl-popups-* ailesini bu BEŞ
   kökte birden tanımlar (--dxbl-popup-* onlardan türer) — seçici listesi temanınkinin
   AYNISIDIR ki tüm açılır yüzeyler tek tonda kalsın; gövdeyle birlikte başlık/altlık da
   bağlanır ki popup tek parça görünsün. Aynı DİKKAT: iç tema değişkeni. */
.dxbl-dropdown,
.dxbl-itemlist-dropdown,
.dxbl-message-box,
.dxbl-modal,
.dxbl-window {
    --dxbl-popups-bg: var(--nun-bg);
    --dxbl-popups-body-bg: var(--nun-bg);
    --dxbl-popups-header-bg: var(--nun-bg);
    --dxbl-popups-footer-bg: var(--nun-bg);
}

/* Chat GÖNDER düğmesi birincil-koyu (Claude Code'daki gibi) — chat istisnasının parçası. */
.assistantchat .dxbl-chatui-input .dxbl-btn-primary,
.assistantchat .dxbl-chatui-input .dxbl-btn-primary:hover {
    background-color: var(--nun-accent) !important;
    border-color: var(--nun-accent) !important;
    color: #ffffff !important;
}
/* ============ /tasarım dili ============ */

/* Bootstrap-icons boyut yardımcıları (DevExpress IconCssClass ile kullanılır). */
.bi-24-px {
    font-size: 24px;
}

.bi-32-px {
    font-size: 32px;
}

.bi-48-px {
    font-size: 48px;
}

/* AssistantChat giriş kutusu (DxAIChat içindeki DxMemo). DevExpress varsayılanı iki
   katlıdır: flex-column editör içinde üstte textarea (auto-resize JS'inin inline height'ı,
   rows="2" tabanı ~50px) + altta 32px'lik düğme satırı = boşken ~82px. Hedef tek satır:
   editör flex-row'a çevrilir (gönder düğmesi textarea'nın YANINA iner; DevExpress'in
   column kuralı özgüllükle kazandığından !important şart), textarea boyu tarayıcıya
   bırakılır (field-sizing: content — inline JS height'ı !important yener; JS yazmaya
   devam eder ama etkisizdir). Boşken 1 satır ~32px, yazdıkça büyür, inline max-height
   (130px ≈ 5 satır) tavan kalır. Kurallar BİLEREK global dosyada: scoped (::deep)
   zincirine bağımlı kalmadan hedeflenir. */
.assistantchat dxbl-memo-editor.dxbl-chatui-input {
    flex-direction: row !important;
    align-items: flex-end !important;
}

.assistantchat .dxbl-chatui-input > textarea,
.assistantchat dxbl-memo-editor > textarea {
    min-height: 0 !important; /* inline min-height: 58px'i öldürür */
    margin-bottom: 0 !important;
    flex: 1 1 0px;
    min-width: 0;
}

/* field-sizing desteklemeyen tarayıcı (Firefox) DevExpress JS auto-resize'ına düşer:
   kutu 2 satır tabanından başlar ama row yerleşimi ve büyüme yine çalışır. */
@supports (field-sizing: content) {
    .assistantchat .dxbl-chatui-input > textarea,
    .assistantchat dxbl-memo-editor > textarea {
        display: block; /* DevExpress display:flex verir — boş içerikte 0 satıra çöker */
        field-sizing: content;
        height: auto !important;
    }
}

/* Asistan yanıtı balonsuz DÜZ SAYFADIR (19.60 — Claude düzeni; kullanıcı balonu gri+rounded
   kalır): kutu görünümü kalkar, markdown içerik (tablo dahil) sayfada akar. */
.assistantchat .dxbl-chatui-message.dxbl-chatui-message-assistant {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Kullanıcı balonu NÖTR (19.60/B devamı — mavi ton öldü): gri zemin + ince çerçeve + rounded,
   içerik kadar genişlik. Asistan düz sayfada kaldığından karşıtlık balonda. */
.assistantchat .dxbl-chatui-message.dxbl-chatui-message-user {
    background-color: var(--nun-surface) !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: 10px !important;
    color: var(--nun-text) !important;
    max-width: 80%;
}

/* Mesaj altı düğmeleri (kopyala/yenile) yalnız HOVER'da — kalıcı ikon satırı görüntü kirliliğiydi. */
.assistantchat .dxbl-chatui-message-buttons-container {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.assistantchat .dxbl-chatui-message-container:hover .dxbl-chatui-message-buttons-container,
.assistantchat .dxbl-chatui-message:hover .dxbl-chatui-message-buttons-container,
.assistantchat .dxbl-chatui-message-buttons-container:focus-within {
    opacity: 1;
}

/* Mesajlar arası nefes (Claude Code ritmi). */
.assistantchat .dxbl-chatui-message-container {
    margin-bottom: 14px;
}

/* OKUMA METNİ kromdan AYRIDIR (19.60/B dersi): krom tema ölçeğinden akar; sohbet içeriği
   okuma boyutunda SABİTTİR — rem tabanı değişse de içerik boyu değişmez. */
/* Okuma metni boyutu (21 Tem — 28px testiyle kalibre edildi: kullanıcı tercihi büyük metin). */
.assistantchat .dxbl-chatui-message-text,
.assistantchat .assistantchat-markdown,
.assistantchat .assistantchat-plain {
    font-size: 17px !important;
    line-height: 1.6 !important;
}

/* Giriş kutusu yazısı okuma metniyle uyumlu; satır boyu ~21.6px — boş kutunun tek-satır
   boyu (~32px, alt bant hizası) korunur, sarma satırı bu adımla büyür. */
.assistantchat .dxbl-chatui-input > textarea {
    font-size: 16px;
    line-height: 1.35;
}

.assistantchat .dxbl-chatui-message.dxbl-chatui-message-user {
    padding: 8px 14px;
}

/* Markdown cilası (21 Tem — Claude Code karşılaştırması): başlık ölçeği yumuşak (metnin
   üstünde bağırmaz, ağırlıkla ayrışır), kod KART görünümlü, inline kod chip, tablo HAVADAR
   (yalnız yatay çizgiler), paragraf ritmi cömert. Seçiciler bilinçli uzun: scoped
   AssistantChat.razor.css'teki temel pre/code kurallarını özgüllükle ezerler. */
.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown h1 {
    font-size: 1.35em;
    font-weight: 650;
    margin: 18px 0 8px;
}

.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown h2 {
    font-size: 1.2em;
    font-weight: 650;
    margin: 16px 0 8px;
}

.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown h3,
.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown h4 {
    font-size: 1.08em;
    font-weight: 650;
    margin: 14px 0 6px;
}

.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown p {
    margin: 0 0 12px;
}

.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown pre {
    background: #f6f6f5;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0;
    font-size: 0.85em;
    overflow-x: auto;
}

.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown :not(pre) > code {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.85em;
}

.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown table {
    border-collapse: collapse;
    margin: 12px 0;
}

.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown th,
.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 6px 12px;
    text-align: left;
}

.assistantchat .dxbl-chatui-message-assistant .assistantchat-markdown th {
    font-weight: 600;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

/* Gönder düğmesi alanının dikey iç boşluğu kutu yüksekliğini büyütmesin. */
.assistantchat .dxbl-chatui-input .dxbl-memo-edit-buttons-area {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
}

/* Gönder + ataş 30px DAİRE: görünür kutu (çerçeveyi submitarea-container çizer; editör
   çerçevesizdir) 30 içerik + 2px çerçeve = TAM 32px olur — sol footer'daki Şirket
   Değiştir düğmesiyle üstten ve alttan birebir hizalanır (32px'lik varsayılan düğme
   kutuyu 34'e şişiriyordu). DAİRE formu hap kutunun eşidir (21 Tem — ChatGPT referansı;
   köşeli düğme hap köşenin kavisinden taşıyordu). Seçici BİLEREK geniş ve !important'lı:
   dosya yükleme (19.60) submit alanının iç DOM'unu değiştirdi — eski memo-edit-buttons-area
   zinciri Gönder'i kaçırıyordu (canlıda yaşandı: ataş döndü, Gönder kare kaldı); submit
   alanındaki HER düğme aynı forma girer, iç yerleşim değişse de kural düşmez. */
.assistantchat .dxbl-chatui-submitarea .dxbl-btn {
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    border-radius: 50% !important;
}

/* Küçük ekran kullanıcı menüsü popup'ı (Main.razor — alt yapışık tam genişlik "bottom sheet"
   yerleşimi). Kurallar DxPopup'ın CssClass/HeaderCssClass/BodyCssClass API'sinden bağlanır;
   popup portal DOM'unda (bileşen ağacının DIŞINDA) çizildiğinden scoped .razor.css işlemez —
   evi bu global dosyadır (tören taraması S2: inline <style> bloğu buraya taşındı). */
.main-popupusermenu-container {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 70vh;
    margin: 0px !important;
    padding: 0px !important;
    left: 0px !important;
    bottom: 0px !important;
    position: absolute !important;
}

.main-popupusermenu-header-container {
    margin: 0px !important;
    padding: 10px !important;
}

.main-popupusermenu-body-container {
    padding: 0px 10px 10px 10px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}