/* sohbet-composer.css — mesaj yazma alanı (Plan 3 Task 13; js/ekran/composer.mjs, emoji-paneli.mjs).
   Kaynak: design/web_sohbet-showcase/v06-is-modu.html (ws6) ORTAK_CSS "composer: biçim ipucu, mod çubuğu, kayıt, ek menüsü, emoji paneli" +
   "sürükle-bırak katmanı". Showcase durum anahtarları (`data-durum-yalniz`) yerine uygulama sınıfları. Renk YALNIZ takma adlardan (ham renk YOK).
   Satır içi stil YOK: metin kutusu `rows` niteliğiyle büyür. */

.composer{ position:relative; flex-direction:column; align-items:stretch; gap:8px; }
.c-satir{ display:flex; align-items:flex-end; gap:6px; }
.c-satir .yaz-alani{ min-width:0; }
.c-sag{ display:contents; }

/* ---- Yazı alanı: gerçek <textarea> (showcase'teki .yer span'ının yerine) ---- */
.yaz-alani{ gap:10px; position:relative; }
.yaz-alani.dolu{ color:var(--ink); }
.yaz-girdi{ flex:1; min-width:0; width:100%; margin:0; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; line-height:1.45;
  resize:none; overflow-y:auto; max-height:11.6em; display:block; field-sizing:content; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.yaz-girdi::placeholder{ color:var(--muted); opacity:1; }
/* Odak halkası (Task 46): <textarea> çerçevesiz; halka yazı alanı kutusunda, YALNIZ klavye kipinde (erisim.mjs klavyeKipiIzle; fareyle odak onaylı tasarımın `.odak` kutusudur). */
[data-klavye] .yaz-alani:has(.yaz-girdi:focus-visible){ outline:3px solid var(--primary-tint); outline-offset:1px; }
.yaz-sayac{ position:absolute; right:14px; bottom:3px; font-size:var(--fs-micro); color:var(--muted); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; }
.yaz-sayac.asti{ color:var(--danger-ink); }
.mik-btn[aria-disabled="true"]{ opacity:.5; cursor:default; }
.mik-btn.gonder .ik{ width:20px; height:20px; }
.composer .ikon-btn:focus-visible, .mik-btn:focus-visible, .ek-ogesi:focus-visible, .ep-emoji:focus-visible, .etiket-oge:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:2px; }
.composer-engel{ padding:8px 12px; border-radius:var(--r-sm); background:var(--line-soft); color:var(--sub); font-size:var(--fs-cap); font-weight:var(--fw-semi); }
.c-satir.engelli .yaz-alani, .c-satir.engelli .ikon-btn, .c-satir.engelli .mik-btn{ opacity:.5; }
.composer-hata{ padding:8px 12px; border-radius:var(--r-sm); background:var(--danger-soft); color:var(--on-danger-soft); font-size:var(--fs-cap); font-weight:var(--fw-semi); }
.app .composer .btn-ek[aria-expanded="true"], .app .composer .btn-emoji[aria-expanded="true"]{ background:var(--line-soft); color:var(--ink); }

/* ---- Sesli mesaj kaydı (Task 38; ws6 `.kayit*`) ---- */
.kayit{ align-items:center; }
.kayit-sil{ color:var(--danger-ink) !important; }
.kayit-nokta{ width:12px; height:12px; border-radius:50%; background:var(--presence-dnd); flex:none; box-shadow:0 0 0 4px var(--presence-dnd-soft); margin-left:4px; }
.kayit-sure{ font-size:var(--fs-body); font-weight:var(--fw-x); font-variant-numeric:tabular-nums; min-width:44px; }
.kayit-dalga{ flex:1; min-width:0; height:42px; display:flex; align-items:center; padding:0 16px; border-radius:var(--r-lg); background:var(--line-soft); overflow:hidden; }
.kayit-ipucu{ align-self:center; max-width:14em; padding:0 6px; color:var(--muted); font-size:var(--fs-cap); line-height:1.25; }
.composer-izin{ display:flex; }
.kayit .ikon-btn:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:2px; }

/* ---- Yanıt / düzenleme çubuğu ---- */
.mod-cubugu{ display:flex; align-items:center; gap:10px; padding:2px 2px 0 96px; }
.mod-cubugu .alinti{ flex:1; margin:0; min-width:0; cursor:default; }
.mod-cubugu .alinti .ne{ color:var(--sub); }
.mod--duzenle .alinti::before{ background:var(--gold); }
.mod--duzenle .alinti .kim{ color:var(--gold-ink); }
.mod-ik{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold-ink); flex:none; margin-left:-42px; }
.mod-ik .ik{ width:18px; height:18px; }
.mod--duzenle{ padding-left:54px; }

/* ---- Ek menüsü ---- */
.ek-menu{ position:absolute; left:12px; bottom:calc(100% + 8px); z-index:9; width:250px; padding:6px; background:var(--sheet); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.ek-ogesi{ display:flex; align-items:center; gap:12px; width:100%; height:46px; padding:0 8px; border:0; background:transparent; border-radius:var(--r-sm);
  font-family:inherit; font-size:var(--fs-sub); font-weight:var(--fw-semi); color:var(--ink); text-align:left; cursor:pointer; }
.ek-ogesi:hover, .ek-ogesi.secili{ background:var(--line-soft); }
.ek-ogesi .renk{ width:34px; height:34px; flex:none; border-radius:var(--r-sm); display:grid; place-items:center; font-size:var(--fs-h2); box-shadow:var(--shadow-ic); border:1px solid var(--line); }
.renk--belge{ background:var(--note-soft); } .renk--foto{ background:var(--primary-soft); } .renk--kamera{ background:var(--accent-soft); }
.renk--kisi{ background:var(--presence-away-soft); } .renk--anket{ background:var(--gold-soft); } .renk--etkinlik{ background:var(--danger-soft); }
.kisi-formu{ display:flex; flex-direction:column; gap:8px; padding:6px; }
.kisi-alan{ display:flex; flex-direction:column; gap:3px; font-size:var(--fs-cap); font-weight:var(--fw-bold); color:var(--sub); }
.kisi-alan input{ height:36px; padding:0 10px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--sheet); color:var(--ink); font:inherit; }
.kisi-alan input:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:1px; }

/* ---- Emoji paneli ---- */
.emoji-yuva{ display:contents; }
.emoji-panel{ position:absolute; left:0; right:0; bottom:100%; z-index:9; display:flex; flex-direction:column; gap:6px; padding:12px 16px 10px; background:var(--sheet);
  border-top:1px solid var(--line); box-shadow:var(--shadow-md); }
.ep-ust{ display:flex; align-items:center; gap:8px; }
.ep-ust .cip .ik{ width:18px; height:18px; }
.ep-ara{ margin-left:auto; width:220px; height:34px; }
.ep-liste{ max-height:176px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.ep-baslik{ font-size:var(--fs-micro); font-weight:var(--fw-x); color:var(--muted); margin-top:4px; }
.ep-baslik:first-child{ margin-top:0; }
.ep-bos{ padding:18px 0; text-align:center; color:var(--sub); font-size:var(--fs-sub); }
.ep-izgara{ display:grid; grid-template-columns:repeat(16, 1fr); }
.ep-emoji{ height:38px; display:grid; place-items:center; font-size:var(--fs-h1); border:0; background:transparent; border-radius:var(--r-xs); cursor:pointer; padding:0; }
.ep-emoji:hover{ background:var(--line-soft); }

/* ---- Etiket (@) önerisi ---- */
.etiket-paneli{ position:absolute; left:64px; bottom:calc(100% + 8px); z-index:9; width:300px; max-height:300px; overflow-y:auto; padding:6px; background:var(--sheet);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.etiket-oge{ display:flex; align-items:center; gap:10px; width:100%; height:44px; padding:0 8px; border:0; background:transparent; border-radius:var(--r-sm); font-family:inherit;
  font-size:var(--fs-sub); color:var(--ink); text-align:left; cursor:pointer; }
.etiket-oge:hover, .etiket-oge.secili{ background:var(--line-soft); }
.etiket-oge .ad{ flex:1; min-width:0; font-weight:var(--fw-semi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.etiket-oge .kadi{ color:var(--muted); font-size:var(--fs-cap); }

/* ---- Ek önizleme şeridi ---- */
.ek-onizleme{ display:flex; gap:8px; padding:2px 2px 4px; overflow-x:auto; scrollbar-width:thin; }
.ek-onizle{ position:relative; flex:none; display:flex; align-items:center; gap:10px; width:220px; padding:6px 36px 6px 6px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--card-bg); }
.ek-onizle.hata{ border-color:var(--danger-ink); }
.ek-onizle .k-onizle{ width:44px; height:44px; flex:none; border-radius:var(--r-sm); overflow:hidden; display:grid; place-items:center; background:var(--line-soft); color:var(--sub); }
.ek-onizle .k-onizle img{ width:100%; height:100%; object-fit:cover; display:block; }
.ek-onizle .ic{ min-width:0; display:flex; flex-direction:column; }
.ek-onizle .ad{ font-size:var(--fs-cap); font-weight:var(--fw-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ek-onizle .boy{ font-size:var(--fs-micro); color:var(--sub); }
.ek-onizle .ikon-btn{ position:absolute; top:4px; right:4px; }

/* ---- Kamera ---- */
.kamera-katman{ position:absolute; inset:0; z-index:14; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px;
  background:color-mix(in srgb, var(--chat-bg) 92%, transparent); }
.kamera-video{ max-width:100%; max-height:70%; border-radius:var(--r-lg); background:var(--line-soft); }
.kamera-eylem{ display:flex; gap:10px; }

/* ---- Sürükle-bırak katmanı ---- */
.birak-katman{ position:absolute; inset:0; z-index:12; padding:20px; background:color-mix(in srgb, var(--chat-bg) 88%, transparent); display:flex; }
.birak-kutu{ flex:1; border:2.5px dashed var(--primary-tint); border-radius:var(--r-xl); background:color-mix(in srgb, var(--primary-soft) 55%, transparent); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.yelpaze{ position:relative; width:270px; height:160px; margin-bottom:10px; }
.yelpaze .kart{ position:absolute; top:12px; width:108px; height:136px; border-radius:var(--r-md); background:var(--card-bg); border:1px solid var(--line); box-shadow:var(--shadow-md), var(--shadow-ic);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-size:var(--fs-cap); font-weight:var(--fw-x); color:var(--sub); }
.yelpaze .kart .ik{ width:44px; height:44px; color:var(--primary-deep); }
.yelpaze .kart:nth-child(1){ left:0; transform:rotate(-12deg); }
.yelpaze .kart:nth-child(2){ left:81px; top:0; z-index:2; box-shadow:var(--shadow-lg), var(--shadow-ic); }
.yelpaze .kart:nth-child(3){ left:162px; transform:rotate(12deg); }
.yelpaze .kart:only-child{ left:81px; top:0; transform:none; }
.birak-bas{ font-size:var(--fs-h1); font-weight:var(--fw-x); }
.birak-acik{ font-size:var(--fs-body); color:var(--sub); }
.birak-not{ display:flex; align-items:center; gap:6px; font-size:var(--fs-cap); color:var(--muted); margin-top:6px; }