{{--
    QUICK-VIEW E-POSTA KATMANI — ortak stil. TEK KAYNAK.

    Mail modülüyle CRM kartı arasındaki köprünün görsel dili. Ledger (pfx) ve
    etkinlik (acx/flw) katmanlarının üstüne oturur, onların çerçeve/renk
    değerlerini aynen kullanır — kart içinde ayrı bir "uygulama" gibi durmaz.

      .acx.is-mail   Yazma kutusunun gerçek e-posta gönderme kipi
      .flw-i.is-mail Etkinlik akışındaki gelen/giden posta satırı
      .flw-mail-body Satırın altında açılan okuyucu
      .mlx-*         Okuyucu iç düzeni (başlık, gövde, ekler, eylemler)

    Postaların AYRI BİR SEKMESİ YOKTUR: gelen/giden iletiler her modülün
    quick-view kartındaki mevcut etkinlik akışına, diğer iletişim türleriyle
    aynı dilde düşer ve satırın altında okunur.

    Yön ayrımı tek bir işaretle taşınır: gelen postalar kehribar, giden
    postalar mavi noktayla çizilir; okunmamış gelen postanın satırı solda
    ince bir şeritle vurgulanır.

    İşaretleme kartlarda kalır; bu dosya yalnızca stil taşır.
    Kullanım: @include('components.quick-view.mail-ui')
--}}
@once
<style>
    /* ═══════════════════════════════════════════════════════════════
       1) Yazma kutusunun e-posta kipi
       ═══════════════════════════════════════════════════════════════ */

    /* Hangi posta kutusundan konuşulduğu kutunun üst kenarındaki ince
       renk şeridinden okunur — hesap seçicisine bakmaya gerek kalmaz. */
    .acx-box.is-mail {
        border-color: #dbe7fb;
        box-shadow: inset 0 2px 0 0 var(--mac, #2563eb);
    }
    .acx-box.is-mail:focus-within {
        border-color: #bfdbfe;
        box-shadow: inset 0 2px 0 0 var(--mac, #2563eb), 0 0 0 3px rgba(37, 99, 235, .1);
    }

    /* Kimden / Kime şeridi */
    .acx-mh { display: flex; flex-direction: column; }
    .acx-mh-r {
        display: flex; align-items: center; gap: .5rem; min-width: 0;
        padding: .34rem .75rem; border-bottom: 1px dashed #eef2f7;
    }
    .acx-mh-l {
        flex: none; width: 44px;
        font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
        color: #b6c2d2;
    }
    .acx-mh-r input, .acx-mh-r select {
        flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
        font: inherit; font-size: .78rem; font-weight: 650; color: #1e293b; padding: 2px 0;
    }
    .acx-mh-r input::placeholder { color: #c3cddc; font-weight: 550; }
    .acx-mh-r select { cursor: pointer; }

    /* Hesap noktası — seçili hesabın rengi */
    .acx-mh-dot {
        flex: none; width: 8px; height: 8px; border-radius: 50%;
        background: var(--mac, #2563eb);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--mac, #2563eb) 20%, #fff);
    }

    /* CC/BCC açma bağlantısı */
    .acx-mh-x {
        flex: none; border: 0; background: transparent; cursor: pointer; padding: 0 2px;
        font: inherit; font-size: .65rem; font-weight: 800; letter-spacing: .04em;
        color: #94a3b8; text-transform: uppercase;
    }
    .acx-mh-x:hover { color: #2563eb; }
    .acx-mh-x.on { color: #2563eb; }

    /* Zengin metin gövdesi — Quill kutunun içine gömülür, kendi çerçevesi olmaz */
    .acx-rte { padding: 0 .3rem .2rem; }
    .acx-rte .ql-toolbar.ql-snow {
        border: 0; border-bottom: 1px solid #f1f5f9; padding: .25rem .45rem;
    }
    .acx-rte .ql-container.ql-snow { border: 0; font: inherit; }
    .acx-rte .ql-editor {
        min-height: 118px; padding: .5rem .45rem;
        font-size: .82rem; font-weight: 550; color: #1e293b; line-height: 1.55;
    }
    .acx-rte .ql-editor.ql-blank::before {
        color: #c3cddc; font-style: normal; font-weight: 500; left: .45rem; right: .45rem;
    }

    /* Ek dosya rozetleri */
    .acx-att { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 .75rem .5rem; }
    .acx-att:empty { display: none; }
    .acx-att-i {
        display: inline-flex; align-items: center; gap: 6px; max-width: 210px;
        border: 1px solid #e6ecf5; background: #f8fafc; border-radius: 8px;
        padding: 2px 4px 2px 8px; font-size: .7rem; font-weight: 650; color: #475569;
    }
    .acx-att-i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .acx-att-i b { font-weight: 650; color: #94a3b8; font-variant-numeric: tabular-nums; }
    .acx-att-x {
        flex: none; border: 0; background: transparent; cursor: pointer; color: #cbd5e1;
        padding: 1px 4px; border-radius: 5px; font-size: .68rem;
    }
    .acx-att-x:hover { background: #fee2e2; color: #dc2626; }

    /* Alt bardaki dosya ekle düğmesi (acx-soon'un çalışan hâli) */
    .acx-clip {
        border: 0; background: transparent; cursor: pointer; padding: 2px 4px; border-radius: 7px;
        font: inherit; font-size: .72rem; font-weight: 650; color: #94a3b8;
    }
    .acx-clip:hover { background: #eff6ff; color: #2563eb; }
    .acx-clip i { margin-right: 4px; }

    /* Hesap yoksa kutu yerine yönlendirme */
    .acx-noacc {
        display: flex; align-items: center; gap: .55rem;
        border: 1.5px dashed #e6ecf5; border-radius: 13px; background: #fbfdff;
        padding: .7rem .8rem; font-size: .76rem; font-weight: 650; color: #64748b;
    }
    .acx-noacc i { color: #f59e0b; font-size: .9rem; }
    .acx-noacc a { margin-left: auto; color: #2563eb; font-weight: 800; text-decoration: none; white-space: nowrap; }
    .acx-noacc a:hover { text-decoration: underline; }

    /* ═══════════════════════════════════════════════════════════════
       2) Etkinlik akışındaki posta satırı
       ═══════════════════════════════════════════════════════════════ */

    .flw-i.is-mail { cursor: pointer; }

    /* Okunmamış gelen posta: solda ince şerit + koyu konu */
    .flw-i.is-mail.unread { background: #fbfdff; }
    .flw-i.is-mail.unread::after {
        content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
        border-radius: 2px; background: var(--fc, #f59e0b);
    }
    .flw-i.is-mail.unread .flw-s { color: #0b1220; }

    /* Yön rozeti — başlık şeridinde tür etiketinin yanında */
    .mlw-dir {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: .55rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
        border-radius: 999px; padding: 1px 7px;
        background: color-mix(in srgb, var(--fc, #64748b) 13%, #fff);
        color: color-mix(in srgb, var(--fc, #64748b) 78%, #0f172a);
    }
    .mlw-dir i { font-size: .5rem; }

    /* Karşı taraf + ek göstergesi */
    .mlw-meta {
        display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
        margin-top: .3rem; font-size: .68rem; font-weight: 650; color: #94a3b8;
    }
    .mlw-meta i { color: #cbd5e1; margin-right: 4px; }
    .mlw-adr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .mlw-clip { font-variant-numeric: tabular-nums; }
    .mlw-open {
        margin-left: auto; color: #2563eb; font-weight: 800; font-size: .66rem;
        opacity: 0; transition: opacity .13s;
    }
    .flw-i.is-mail:hover .mlw-open { opacity: 1; }
    .flw-i.is-mail.open .mlw-open { opacity: 1; }

    /* Bağlı kayıt rozeti — postanın hangi ilişki üzerinden akışa düştüğü.
       Zincirden otomatik türeyen bağlar kesikli çerçeveyle ayrılır. */
    .mlw-src {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: .6rem; font-weight: 750;
        border: 1px solid #e6edf7; border-radius: 999px; padding: 1px 7px;
        color: #94a3b8; background: #fff;
    }
    .mlw-src.is-auto { border-style: dashed; }
    .mlw-src i { color: #cbd5e1; margin: 0; font-size: .55rem; }

    /* Satır içi okuyucu — akıştaki satırın ALTINDA açılır. Ayrı sekme yok:
       kart terk edilmez, akıştaki yer korunur. Sol boşluk akış rayıyla
       hizalanır, okuyucu zaman çizgisinden kopmuş görünmesin. */
    .flw-mail-body {
        display: none;
        margin-top: .55rem;
        padding-top: .5rem;
        border-top: 1px dashed #e9eef6;
        cursor: default;
    }
    /* Satış kartının akışı farklı bir kabuk (sqv-feed) kullanıyor; kural
       satırın kendisine değil "açık posta satırı" olmasına bakar. */
    [data-mail-id].open .flw-mail-body { display: block; }
    .flw-i.is-mail.open { background: #f8fbff; }

    /* ═══════════════════════════════════════════════════════════════
       3) Kart içi okuyucu ve e-posta listesi
       ═══════════════════════════════════════════════════════════════ */

    .mlx { display: flex; flex-direction: column; }

    /* Süzgeç çipleri — ledger başlığındaki pfx-chip ile aynı ölçü */
    .mlx-filters { display: flex; gap: 4px; padding: .5rem .7rem; border-bottom: 1px solid #eef2f7; }
    .mlx-chip {
        border: 1px solid #e6ecf5; background: #fff; color: #64748b;
        border-radius: 9px; padding: 3px 11px; cursor: pointer;
        font: inherit; font-size: .72rem; font-weight: 700;
        transition: background .13s, color .13s, border-color .13s;
    }
    .mlx-chip:hover { border-color: #cfe0fb; color: #1e293b; }
    .mlx-chip.on { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
    .mlx-chip b { font-variant-numeric: tabular-nums; opacity: .65; margin-left: 3px; font-weight: 700; }

    /* Liste satırı */
    .mlx-i { border-bottom: 1px solid #f4f7fb; }
    .mlx-i:last-child { border-bottom: 0; }
    .mlx-i.hide { display: none; }

    .mlx-h {
        display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
        align-items: start; gap: .55rem;
        padding: .55rem .7rem; cursor: pointer; transition: background .13s;
    }
    .mlx-h:hover { background: #f7faff; }
    .mlx-i.open > .mlx-h { background: #f5f9ff; }

    .mlx-ic {
        width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
        font-size: .66rem; margin-top: 1px;
        background: color-mix(in srgb, var(--fc, #64748b) 13%, #fff);
        color: var(--fc, #64748b);
        border: 1px solid color-mix(in srgb, var(--fc, #64748b) 26%, #fff);
    }

    .mlx-t { min-width: 0; }
    .mlx-s {
        font-size: .82rem; font-weight: 750; color: #0f172a; letter-spacing: -.01em;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mlx-i.unread .mlx-s { color: #0b1220; }
    .mlx-i.unread .mlx-s::before {
        content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
        background: #2563eb; margin-right: 6px; vertical-align: middle;
    }
    .mlx-p {
        margin: 2px 0 0; font-size: .74rem; font-weight: 600; color: #94a3b8;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mlx-sn {
        margin: 2px 0 0; font-size: .74rem; color: #b6c2d2; font-weight: 550;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .mlx-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
    .mlx-time { font-size: .66rem; font-weight: 650; color: #b6c2d2; white-space: nowrap; }
    .mlx-tags { display: flex; gap: 4px; }
    .mlx-tag {
        font-size: .58rem; font-weight: 800; border-radius: 999px; padding: 1px 6px;
        background: #f1f5f9; color: #64748b; white-space: nowrap;
    }
    .mlx-tag.acc { background: color-mix(in srgb, var(--acc, #2563eb) 12%, #fff); color: color-mix(in srgb, var(--acc, #2563eb) 75%, #0f172a); }

    /* Açılan gövde */
    .mlx-body { display: none; padding: 0 .7rem .75rem 3.25rem; }
    .mlx-i.open > .mlx-body { display: block; }

    .mlx-frame {
        border: 1px solid #eef2f7; border-radius: 12px; background: #fff; overflow: hidden;
    }
    .mlx-frame-h {
        display: flex; flex-wrap: wrap; gap: .3rem .9rem;
        padding: .45rem .7rem; border-bottom: 1px solid #f4f7fb; background: #fbfdff;
        font-size: .7rem; font-weight: 650; color: #64748b;
    }
    .mlx-frame-h b {
        font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
        color: #b6c2d2; margin-right: 5px;
    }
    .mlx-html {
        padding: .7rem; max-height: 460px; overflow: auto;
        font-size: .82rem; line-height: 1.6; color: #1e293b; word-break: break-word;
    }
    .mlx-html img { max-width: 100%; height: auto; }
    .mlx-html table { max-width: 100%; }
    .mlx-html blockquote {
        margin: .5rem 0; padding-left: .8rem; border-left: 3px solid #e2e8f0; color: #64748b;
    }

    /* Gövde yalıtılmış bir iframe içinde çizilir (qvFlowMailMount); biçemi
       çerçevenin kendi belgesindedir, buradaki kural onu yerleştirir. */
    .mlx-frame-body {
        display: block; width: 100%; min-height: 60px; border: 0;
        background: transparent; color-scheme: light;
    }
    .mlx-load { padding: 1.1rem; text-align: center; font-size: .76rem; font-weight: 650; color: #b6c2d2; }

    .mlx-atts { display: flex; flex-wrap: wrap; gap: 5px; padding: .5rem .7rem; border-top: 1px solid #f4f7fb; }
    .mlx-att {
        display: inline-flex; align-items: center; gap: 7px; max-width: 230px;
        border: 1px solid #e6ecf5; border-radius: 9px; background: #f8fafc;
        padding: 4px 9px; text-decoration: none; color: #475569;
        font-size: .72rem; font-weight: 650; transition: border-color .13s, background .13s;
    }
    .mlx-att:hover { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
    .mlx-att i { color: #94a3b8; }
    .mlx-att:hover i { color: #2563eb; }
    .mlx-att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mlx-att b { font-weight: 650; color: #b6c2d2; font-variant-numeric: tabular-nums; }

    .mlx-acts { display: flex; align-items: center; gap: 5px; margin-top: .5rem; }
    .mlx-act {
        display: inline-flex; align-items: center; gap: 6px;
        border: 1px solid #e6ecf5; background: #fff; border-radius: 9px;
        padding: 4px 11px; cursor: pointer;
        font: inherit; font-size: .73rem; font-weight: 700; color: #475569;
        transition: border-color .13s, background .13s, color .13s;
    }
    .mlx-act:hover { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
    .mlx-act.danger:hover { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
    .mlx-act i { font-size: .7rem; }

    .mlx-err {
        margin: .5rem 0 0; border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c;
        border-radius: 9px; padding: .45rem .6rem; font-size: .74rem; font-weight: 650;
    }

    /* Dışa aktarma biçim menüsü — kart başlığından açılır.
       Biçim adının yanında ne işe yaradığı da yazar: kullanıcı .mbox ile
       .eml arasındaki farkı bilmek zorunda kalmasın. */
    .mlx-xp { position: relative; }
    .mlx-xp-menu {
        position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 296px;
        border: 1px solid #e6ecf5; border-radius: 13px; background: #fff;
        box-shadow: 0 18px 42px -16px rgba(15, 23, 42, .32), 0 2px 8px -3px rgba(15, 23, 42, .1);
        padding: 5px; max-height: 340px; overflow: auto;
        animation: mlxPop .16s cubic-bezier(.16, 1, .3, 1);
    }
    @keyframes mlxPop { from { opacity: 0; transform: translateY(-4px); } }

    .mlx-xp-h {
        padding: 6px 9px 5px; font-size: .58rem; font-weight: 800;
        letter-spacing: .09em; text-transform: uppercase; color: #b6c2d2;
    }
    .mlx-xp-o {
        display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 9px;
        width: 100%; border: 0; background: transparent; border-radius: 9px;
        padding: 6px 9px; cursor: pointer; text-align: left; font: inherit;
        transition: background .12s;
    }
    .mlx-xp-o:hover { background: #f5f9ff; }
    .mlx-xp-o i { color: #94a3b8; font-size: .78rem; margin-top: 2px; }
    .mlx-xp-o:hover i { color: #2563eb; }
    .mlx-xp-o span { min-width: 0; font-size: .68rem; line-height: 1.4; color: #94a3b8; font-weight: 600; }
    .mlx-xp-o span b { display: block; font-size: .78rem; font-weight: 750; color: #0f172a; }
</style>
@endonce