/* ══════════════════════════════════════════════════════════════════════════
   MESAJLAR SEKMESİ · E-posta ve Arama (5 Eki 2026)
   El Patron 1.1'in mesajlar.css'inden (3 Eki 2026) seçici aktarım. Paketin geliştiricisi:
   WhatsApp'a ve arayüzüne dokunulmasın; bu sekmede yalnız E-posta ve Arama var,
   WhatsApp kendi sekmesinde (whatsapp-konusma.css) olduğu gibi duruyor.
   1.1'deki WhatsApp balonları ve ses kaydı oynatıcısı alınmadı (bizim köprü
   ses kaydetmiyor). DESIGN.md sözleşmesi: yalnız tema değişkenleri, tek vurgu
   (--vurgu), hareket --t1/--t2/--t3, eğik yazı yok. Sınıf öneki msj.
   Yedinci sekme: alt çubuk ve hap kuralları dosyanın sonunda; whatsapp-konusma.css'ten
   SONRA yüklenir ve onun altı sekme kuralını ezer, o dosyayı değiştirmez.
   ══════════════════════════════════════════════════════════════════════════ */

#mesajlar{flex:1;overflow-y:auto;padding:6px 14px 10px;-webkit-overflow-scrolling:touch;scroll-padding-bottom:132px}
/* Sütun: liste kısa olsa da komut satırı ekranın dibinde durur (tasarım 01), uzunsa yapışkan kalır. */
#mesajlar.acik{display:flex;flex-direction:column}
#mesajlar > *{flex-shrink:0}
#mesajlar > .msjKomut{margin-top:auto}
.msjIcerik{margin-bottom:10px}

/* Mesajlar bir liste sayfası: genel yazma çubuğu, küre ve ses araçları gizli (Harita ile aynı kural);
   sayfanın kendi komut satırı var. Canlı konuşma sürerken küre görünür kalır. */
#alt[data-sayfa="mesajlar"] #dgm,#alt[data-sayfa="mesajlar"] #durumSatir,
#alt[data-sayfa="mesajlar"] #kureSatir,#alt[data-sayfa="mesajlar"] #krkDgm,
#alt[data-sayfa="mesajlar"] #sesDgm,#alt[data-sayfa="mesajlar"] #canliBas,
#alt[data-sayfa="mesajlar"] #neredeyim{display:none}
#alt[data-sayfa="mesajlar"][data-canli="1"] #kureSatir,
#alt[data-sayfa="mesajlar"][data-canli="1"] #canliBas{display:flex}
#alt[data-sayfa="mesajlar"]:not([data-canli="1"]) #slot{display:none}
#alt[data-sayfa="mesajlar"] #slot{min-height:0;margin-bottom:2px}

@media (min-width:980px){
  #mesajlar{grid-area:ana;min-height:0;padding:24px max(26px, calc((100% - 860px) / 2)) 18px}
  #mesajlar .msjKomut{bottom:-18px;margin:14px 0 -18px;padding:8px 0 20px}
}
/* Masaüstünde sağ "Şu an" sütunu bu listede yer kaplamaz (İşler ve Ekip ile aynı). */
@media (min-width:1200px){
  body:has(#alt[data-sayfa="mesajlar"]){--sag:0px}
  body:has(#alt[data-sayfa="mesajlar"]) #sag{display:none}
}

/* ── baş ── */
.msjBas{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:8px 4px 4px}
.msjBas h2{margin:0;font:700 var(--y8)/1.1 var(--yzt-bas);letter-spacing:-.025em;color:var(--mt)}
.msjBas small{display:block;margin-top:5px;font-size:var(--y1);color:var(--sn);font-variant-numeric:tabular-nums}

/* ── süzgeç: kanal (bölümlü düğme) + anahtarlar ── */
.msjKanal{display:flex;gap:2px;padding:3px;margin:12px 0 0;border-radius:12px;background:var(--cam2)}
.msjKanal button{flex:1;min-width:0;border:0;background:transparent;min-height:36px;border-radius:9px;padding:0 4px;
  font:600 var(--y1)/1 var(--yzt);color:var(--or);cursor:pointer;white-space:nowrap;
  transition:background var(--t2) var(--cik),color var(--t2) var(--cik)}
.msjKanal button.secili{background:var(--cam);color:var(--mt);box-shadow:var(--glg)}
.msjKanal button span{color:var(--sn);font-weight:500;margin-left:4px;font-variant-numeric:tabular-nums}
.msjSuz{display:flex;gap:8px;margin:10px 0 4px;overflow-x:auto;scrollbar-width:none;padding:1px}
.msjSuz::-webkit-scrollbar{display:none}
.msjKutular{margin-top:2px}
.msjCip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border-radius:999px;border:0;
  background:var(--cam);box-shadow:var(--glg);color:var(--or);font:600 var(--y1)/1 var(--yzt);cursor:pointer;white-space:nowrap;
  transition:background var(--t1) var(--cik),color var(--t1) var(--cik)}
.msjCip.secili{background:color-mix(in srgb,var(--vurgu) 16%,var(--cam));color:var(--mt)}
.msjCip b{font-weight:600;color:var(--sn);font-variant-numeric:tabular-nums}
.msjCip.secili b{color:var(--vurgu)}
.msjUyari{margin:10px 4px 2px;font-size:var(--y1);line-height:1.45;color:var(--uyariY)}

/* ── gün başlığı ve liste ── */
.msjGun{font:600 var(--y1)/1.2 var(--yzt);color:var(--sn);margin:16px 4px 8px}
.msjListe{list-style:none;margin:0;padding:2px 0;border-radius:18px;background:var(--cam);box-shadow:var(--glg)}
.msjSatir{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:12px;align-items:start;padding:12px 14px;cursor:pointer;
  border-radius:18px;transition:background var(--t1) var(--cik)}
.msjSatir + .msjSatir{box-shadow:inset 0 1px 0 var(--cizgi);border-radius:0}
.msjSatir:last-child:not(:first-child){border-radius:0 0 18px 18px}
.msjSatir:first-child:not(:last-child){border-radius:18px 18px 0 0}
.msjSatir:active{background:color-mix(in srgb,var(--mt) 5%,transparent)}
.msjSatir:focus-visible{outline:2px solid var(--vurgu);outline-offset:-2px}
@media (hover:hover){ .msjSatir:hover{background:color-mix(in srgb,var(--mt) 3%,transparent)} }

/* kanal işareti: tek renk; kanalın adı aria-label ve süzgeçte yazıyla da var */
.msjIs{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cam2);color:var(--or)}
.msjIs svg{width:17px;height:17px;fill:currentColor}
.msjOrta{min-width:0}
.msjUst{display:flex;align-items:baseline;gap:6px;min-width:0}
.msjUst b{font-size:var(--y3);font-weight:600;letter-spacing:-.015em;color:var(--mt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msjSatir.okundu .msjUst b{font-weight:500;color:var(--or)}
.msjKonu{display:block;font-size:var(--y2);color:var(--mt);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msjSatir.okundu .msjKonu{color:var(--or)}
.msjOn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--y1);line-height:1.4;color:var(--sn);margin-top:2px;overflow-wrap:anywhere}
.msjEt{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.msjE{font:500 var(--y0)/1 var(--yzt);padding:4px 7px;border-radius:7px;background:var(--cam2);color:var(--or);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.msjE.mavi{background:color-mix(in srgb,var(--vurgu) 15%,transparent);color:var(--vurgu)}
.msjE.kirmizi{color:var(--uyariY)}
.msjSag{display:flex;flex-direction:column;align-items:flex-end;gap:7px;padding-top:1px}
.msjSag time{font-size:var(--y1);color:var(--sn);font-variant-numeric:tabular-nums;white-space:nowrap}
.msjNokta{width:9px;height:9px;border-radius:50%;background:var(--vurgu)}
.msjSatir.okundu .msjNokta{visibility:hidden}

/* ── komut satırı: asistana gider, açık mail ya da arama belge olarak eklenir ── */
.msjKomut{position:sticky;bottom:-10px;margin:14px -14px -10px;padding:8px 14px 20px;background:var(--perde);z-index:2}
.msjKomut::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--perde))}
.msjKomutIc{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 14px;border-radius:22px;background:var(--cam);box-shadow:var(--glg2)}
.msjKomutIc input{flex:1;min-width:0;border:0;background:transparent;color:var(--mt);font:400 var(--y4)/1.3 var(--yzt);outline:none;min-height:34px}
.msjKomutIc input::placeholder{color:var(--sn2)}
.msjKomutIc button{flex:none;width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--vurgu-dolgu);color:#fff;cursor:pointer;
  transition:transform var(--t1) var(--cik)}
.msjKomutIc button:active{transform:scale(.94)}
.msjKomutIc button svg{width:16px;height:16px;fill:currentColor}
.msjKapsam{display:block;margin:6px 4px 0;font-size:var(--y0);color:var(--sn)}

/* ── komutun cevabı ── */
.msjYanit[hidden]{display:none}
.msjYanit{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px}
.msjSoru{align-self:flex-end;max-width:82%;padding:9px 12px;border-radius:18px;border-bottom-right-radius:6px;font-size:var(--y3);line-height:1.45;
  color:var(--mt);background:color-mix(in srgb,var(--vurgu) 22%,var(--cam));white-space:pre-wrap;overflow-wrap:anywhere}
.msjCevapYazi{align-self:flex-start;max-width:92%;padding:9px 12px;border-radius:18px;border-bottom-left-radius:6px;font-size:var(--y3);line-height:1.45;
  color:var(--mt);background:var(--cam);box-shadow:var(--glg);white-space:pre-wrap;overflow-wrap:anywhere}
.msjCevapYazi.msjBekle{color:var(--sn)}
.msjCevapYazi.msjHata{color:var(--uyariY)}
.msjKartlar:empty{display:none}
.msjKartlar{margin:10px 0 0}

/* ── ayrıntı ── */
.msjGeri{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--vurgu);
  font:500 var(--y4)/1 var(--yzt);min-height:44px;padding:0 4px;margin-left:-4px;cursor:pointer}
.msjGeri svg{width:18px;height:18px;fill:currentColor}
.msjAyBas{padding:2px 4px 12px}
.msjAyBas .msjKanalAd{font:600 var(--y0)/1 var(--yzt);letter-spacing:.04em;text-transform:uppercase;color:var(--sn)}
.msjAyBas h3{margin:7px 0 0;font:700 var(--y7)/1.2 var(--yzt-bas);letter-spacing:-.022em;color:var(--mt);overflow-wrap:anywhere}
.msjAyBas p{margin:6px 0 0;font-size:var(--y2);color:var(--sn);line-height:1.4}
.msjKutu{border-radius:18px;background:var(--cam);box-shadow:var(--glg);padding:14px 15px;margin:0 0 10px}
.msjKutuBas{font:600 var(--y1)/1.2 var(--yzt);color:var(--sn);margin:0 0 8px}
.msjNotIc{font-size:var(--y2);line-height:1.45;color:var(--sn)}
.msjAlan{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:10px;padding:6px 0;font-size:var(--y2)}
.msjAlan + .msjAlan{box-shadow:inset 0 1px 0 var(--cizgi)}
.msjAlan span{color:var(--sn)}
.msjAlan b{font-weight:500;color:var(--mt);overflow-wrap:anywhere}
.msjGovde{font-size:var(--y3);line-height:1.55;color:var(--mt);white-space:pre-wrap;overflow-wrap:anywhere}
.msjEk{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--cam2);min-width:0}
.msjEk svg{width:18px;height:18px;fill:var(--or);flex:none}
.msjEk div{min-width:0}
.msjEk b{display:block;font-size:var(--y2);font-weight:500;color:var(--mt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msjEk small{display:block;font-size:var(--y0);color:var(--sn);margin-top:2px}
.msjTriaj{display:flex;gap:10px;align-items:flex-start}
.msjTriaj .msjNokta{margin-top:5px;flex:none}
.msjTriaj p{margin:0;font-size:var(--y2);line-height:1.45;color:var(--mt)}
.msjTriajYok{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--y2);color:var(--sn);line-height:1.4}
.msjTriajYok .msjDgm{flex:none}
.msjDgmler{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.msjDgm{flex:1 1 auto;min-height:44px;padding:0 14px;border:0;border-radius:14px;background:var(--cam2);color:var(--mt);
  font:600 var(--y2)/1 var(--yzt);cursor:pointer;transition:transform var(--t1) var(--cik)}
.msjDgm:active{transform:scale(.97)}
.msjDgm:disabled{opacity:.55;cursor:default}
.msjDgm.ana{background:var(--vurgu-dolgu);color:#fff}
.msjOneri{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.msjOneri button{border:0;border-radius:999px;min-height:32px;padding:0 12px;background:var(--cam);box-shadow:var(--glg);color:var(--or);font:500 var(--y1)/1 var(--yzt);cursor:pointer}
.msjNot{font-size:var(--y1);color:var(--sn);line-height:1.45;margin:2px 4px 10px}
.msjNot.msjDurum{color:var(--mt)}


/* ── arama kaydı ── */
.msjOzetSayi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 10px}
.msjOzetSayi div{border-radius:16px;background:var(--cam);box-shadow:var(--glg);padding:11px 12px;min-width:0}
.msjOzetSayi small{display:block;font-size:var(--y0);color:var(--sn)}
.msjOzetSayi b{display:block;font:600 var(--y5)/1.2 var(--yzt-bas);color:var(--mt);margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.msjDokum{display:flex;flex-direction:column;gap:9px}
.msjDokum p{margin:0;font-size:var(--y2);line-height:1.5;color:var(--mt)}
.msjDokum p span{display:block;font:600 var(--y0)/1.2 var(--yzt);color:var(--sn);margin-bottom:2px;letter-spacing:.02em}
.msjCevap{padding:7px 0}
.msjCevap + .msjCevap{box-shadow:inset 0 1px 0 var(--cizgi)}
.msjCevap small{display:block;font-size:var(--y1);color:var(--sn)}
.msjCevap b{display:block;font-size:var(--y2);font-weight:500;color:var(--mt);margin-top:2px;overflow-wrap:anywhere}
.msjAracKart .msjCevap b{margin-top:0}

@media (prefers-reduced-motion:reduce){ .msjKanal button,.msjCip,.msjSatir,.msjDgm,.msjKomutIc button{transition:none} }

/* ── yedinci sekme (5 Eki 2026) ──────────────────────────────────────────
   Telefonda tek sıra, yedi eşit sekme; hap yedide bir genişlikte. Masaüstünde
   kenar çubuğunda üç sütun kalır, Mesajlar üçüncü sıraya iner: öteki altı
   sekmenin yeri (WhatsApp dahil) değişmez, hap yalnız üç sıraya bölünür. */
#lozenge{width:calc((100% - 20px) / 7)}
#alt[data-sayfa=mesajlar] #lozenge{transform:translateX(calc(600% + 12px))}
@media (max-width:979px){
  #sekme{width:min(520px, calc(100% - 16px))}
}
/* Yedi sekmede "El Patron" iki satıra kırılıyordu (375 px'te sekme 48 px). Çok dar ekranda kırılmaya izin kalır. */
@media (min-width:360px){ #sekme .sk{white-space:nowrap;letter-spacing:-.015em} }
@media (min-width:980px){
  body:not(:has(#serit[hidden])) #lozenge{width:calc((100% - 12px) / 3);height:calc((100% - 12px) / 3);bottom:auto}
  body:not(:has(#serit[hidden])) #alt[data-sayfa=mesajlar] #lozenge{transform:translate(0,calc(200% + 4px))}
  body:not(:has(#serit[hidden])) #serit{padding-bottom:166px}
  body:has(#serit[hidden]) #sekme{width:min(520px, calc(100% - 24px))}
}