/* FSK AI — yazma alanı (composer) tasarımları.
   Mevcut "Yüzen / Düz / Cam" yalnızca yüzeyi değiştirir; buradaki beş tasarım düzeni de değiştirir.
   Her kural hem canlı yazma alanına (html[data-composer] #composer) hem yönetim panelindeki önizlemeye
   (.composer[data-composer-demo]) uygulanır. Renkler sitenin tasarım değişkenlerinden gelir; açık ve koyu temada çalışır. */

/* ---------- Ortak yardımcılar ---------- */
:is(html[data-composer="kapsul"] #composer, .composer[data-composer-demo="kapsul"],
    html[data-composer="ray"] #composer, .composer[data-composer-demo="ray"]) .chip {
  width: 38px; min-width: 38px; height: 38px; padding: 0; gap: 0; justify-content: center; font-size: 0; border-radius: 50%;
}
:is(html[data-composer="kapsul"] #composer, .composer[data-composer-demo="kapsul"],
    html[data-composer="ray"] #composer, .composer[data-composer-demo="ray"]) .chip .i { width: 17px; height: 17px; flex: none; }
:is(html[data-composer="kapsul"] #composer, .composer[data-composer-demo="kapsul"],
    html[data-composer="ray"] #composer, .composer[data-composer-demo="ray"]) #imgChip .i:last-child { display: none; }
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"],
    html[data-composer="panel"] #composer, .composer[data-composer-demo="panel"]) .send-btn {
  width: auto; padding: 0 14px 0 11px; display: inline-flex; align-items: center; gap: 7px; border-radius: 10px;
}
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"],
    html[data-composer="panel"] #composer, .composer[data-composer-demo="panel"]) .send-btn::after {
  content: 'Gönder'; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .01em;
}
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"],
    html[data-composer="panel"] #composer, .composer[data-composer-demo="panel"]) .send-btn.streaming::after { content: 'Durdur'; }

/* ---------- 1. Kapsül: tek satır, araçlar solda simge, gönder sağda ---------- */
:is(html[data-composer="kapsul"] #composer, .composer[data-composer-demo="kapsul"]) {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "atts atts atts" "l t r";
  align-items: end; column-gap: 6px; padding: 7px; border-radius: 32px;
  background: var(--elev); border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
}
:is(html[data-composer="kapsul"] #composer, .composer[data-composer-demo="kapsul"]) .atts { grid-area: atts; padding: 4px 6px 8px; }
:is(html[data-composer="kapsul"] #composer, .composer[data-composer-demo="kapsul"]) :is(textarea, .mini-ta) { grid-area: t; min-height: 40px; padding: 8px 4px 8px; align-self: center; }
:is(html[data-composer="kapsul"] #composer, .composer[data-composer-demo="kapsul"]) .composer-bar { display: contents; }
:is(html[data-composer="kapsul"] #composer, .composer[data-composer-demo="kapsul"]) .cb-left { grid-area: l; display: flex; align-items: center; gap: 2px; }
:is(html[data-composer="kapsul"] #composer, .composer[data-composer-demo="kapsul"]) .cb-right { grid-area: r; display: flex; align-items: center; gap: 2px; }
:is(html[data-composer="kapsul"] #composer, .composer[data-composer-demo="kapsul"]) .cb-left :is(.tool-btn, .chip) { border-color: transparent; }

/* ---------- 2. Komut satırı: üstte araç şeridi, › istemli eş aralıklı yazı, etiketli gönder ---------- */
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "l l l" "atts atts atts" "p t r";
  padding: 0; border-radius: 14px; overflow: hidden;
  background: var(--elev); border: 1px solid var(--line-2); box-shadow: var(--shadow-1);
}
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"])::before {
  content: '›'; grid-area: p; align-self: start; padding: 13px 0 0 16px;
  font: 700 18px/24px var(--mono); color: var(--accent);
}
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) .composer-bar { display: contents; }
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) .cb-left {
  grid-area: l; display: flex; align-items: center; gap: 4px; padding: 6px 8px;
  border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--fg) 3.5%, transparent);
}
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) .cb-left :is(.tool-btn, .chip) { height: 30px; border-radius: 8px; }
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) .cb-left .tool-btn { width: 30px; }
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) .cb-left .chip { padding: 0 10px; font-size: 12.5px; }
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) .atts { grid-area: atts; padding: 10px 14px 0; }
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) :is(textarea, .mini-ta) {
  grid-area: t; font-family: var(--mono); font-size: 14.5px; line-height: 24px; min-height: 50px; padding: 13px 10px 13px 8px;
}
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) .cb-right { grid-area: r; display: flex; align-items: center; gap: 6px; align-self: end; padding: 8px 10px 8px 0; }
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) .cb-right :is(.tool-btn, .send-btn) { height: 34px; }
:is(html[data-composer="komut"] #composer, .composer[data-composer-demo="komut"]) .cb-right .tool-btn { width: 34px; border-radius: 9px; }

/* ---------- 3. Panel: geniş yazı alanı, ayrı renkte alt araç şeridi, köşeli düğmeler ---------- */
:is(html[data-composer="panel"] #composer, .composer[data-composer-demo="panel"]) {
  display: flex; flex-direction: column; padding: 0; border-radius: 18px; overflow: hidden;
  background: var(--elev); border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
}
:is(html[data-composer="panel"] #composer, .composer[data-composer-demo="panel"]) .atts { padding: 14px 16px 0; }
:is(html[data-composer="panel"] #composer, .composer[data-composer-demo="panel"]) :is(textarea, .mini-ta) { padding: 16px 18px 12px; min-height: 86px; }
:is(html[data-composer="panel"] #composer, .composer[data-composer-demo="panel"]) .composer-bar {
  padding: 8px 10px; border-top: 1px solid var(--line); background: var(--bg-2);
}
:is(html[data-composer="panel"] #composer, .composer[data-composer-demo="panel"]) :is(.tool-btn, .chip, .send-btn) { height: 36px; border-radius: 10px; }
:is(html[data-composer="panel"] #composer, .composer[data-composer-demo="panel"]) .tool-btn { width: 36px; }

/* ---------- 4. Çizgi: kutu yok, yalnızca alt çizgi; odakta vurgu rengi ---------- */
:is(html[data-composer="cizgi"] #composer, .composer[data-composer-demo="cizgi"]) {
  padding: 2px 0 8px; border-radius: 0; background: transparent; border: 0; border-bottom: 2px solid var(--line-2);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: border-color .25s var(--ease-out, ease);
}
html[data-composer="cizgi"] #composer:focus-within, .composer[data-composer-demo="cizgi"]:focus-within { border-bottom-color: var(--accent); box-shadow: none; }
:is(html[data-composer="cizgi"] #composer, .composer[data-composer-demo="cizgi"]) :is(textarea, .mini-ta) { font-size: 19px; line-height: 28px; padding: 10px 2px 8px; }
:is(html[data-composer="cizgi"] #composer, .composer[data-composer-demo="cizgi"]) :is(.tool-btn, .chip) { border-color: transparent; background: transparent; }
:is(html[data-composer="cizgi"] #composer, .composer[data-composer-demo="cizgi"]) .chip { padding: 0 10px; }
:is(html[data-composer="cizgi"] #composer, .composer[data-composer-demo="cizgi"]) .send-btn { width: 42px; height: 42px; }

/* ---------- 5. Yan ray: araçlar solda dikey sütunda ---------- */
:is(html[data-composer="ray"] #composer, .composer[data-composer-demo="ray"]) {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "l atts atts" "l t t" "l . r";
  column-gap: 12px; padding: 10px; border-radius: 22px;
  background: var(--elev); border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
}
:is(html[data-composer="ray"] #composer, .composer[data-composer-demo="ray"]) .composer-bar { display: contents; }
:is(html[data-composer="ray"] #composer, .composer[data-composer-demo="ray"]) .cb-left {
  grid-area: l; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  padding-right: 10px; border-right: 1px solid var(--line);
}
:is(html[data-composer="ray"] #composer, .composer[data-composer-demo="ray"]) .cb-left .tool-btn { width: 38px; height: 38px; }
:is(html[data-composer="ray"] #composer, .composer[data-composer-demo="ray"]) .atts { grid-area: atts; padding-bottom: 6px; }
:is(html[data-composer="ray"] #composer, .composer[data-composer-demo="ray"]) :is(textarea, .mini-ta) { grid-area: t; min-height: 64px; padding: 8px 4px; }
:is(html[data-composer="ray"] #composer, .composer[data-composer-demo="ray"]) .cb-right { grid-area: r; display: flex; align-items: center; gap: 6px; justify-self: end; }

/* ---------- Yönetim paneli önizlemesi (küçük ölçekli, gerçek yapıyla) ---------- */
.composer.cmp-demo { zoom: .6; width: 100%; max-width: 560px; margin: 0 auto; pointer-events: none; text-align: left; }
.composer.cmp-demo .mini-ta { display: block; color: var(--fg-3); font-size: 16px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer.cmp-demo .atts { display: none; }
.st-stage.st-composer:has(.cmp-demo) { padding-inline: 10px; }
/* Canlı kurallar #composer özgüllüğü taşıdığı için önizlemedeki sadeleştirme !important ile uygulanır */
.composer.cmp-demo .chip { width: 34px !important; min-width: 34px !important; padding: 0 !important; gap: 0 !important; justify-content: center; font-size: 0 !important; }
.composer.cmp-demo .chip .i { width: 16px; height: 16px; flex: none; }
.composer.cmp-demo .send-btn::after { display: none !important; }
.composer.cmp-demo .send-btn { width: 36px !important; padding: 0 !important; justify-content: center; }