/* Tasarım dili: Claude mobil. Uygulamanın kendi ekran görüntülerine bakılarak
   eşleştirildi — krem zemin, mercan aksan, yanıtlarda serif, altta tek parça
   yuvarlak besteci. Aydınlık varsayılan, koyu sistem tercihiyle.

   Referanstan okunan ve buraya taşınan ayrımlar:
     · Zemin kremden biraz gri; kartlar zeminden ancak fark edilir açıklıkta.
     · Bölüm etiketleri küçük-büyük harf DEĞİL: normal cümle, gövde boyutunda,
       gri. Küçük harf aralıklı etiket bu dilde yok.
     · Satır içi kod mavi: soluk mavi zeminde mavi mürekkep, gövde renginde değil.
     · Besteci hapları gövde boyutunda ve yuvarlak; küçük rozet değiller.
     · Ajanın soru kartı numaralı: yuvarlak rozet, aralarında içeriden başlayan
       ince çizgi, seçenek kutusu yok.
   Renkler yeniden ölçüldü: her metin/zemin çifti AA (4.5:1) üstünde. */
:root {
  /* aydınlık */
  --bg: #f5f4f0;
  --surface: #fbfaf8;
  --surface-2: #edebe6;
  --surface-3: #e4e1d9;
  --line: #e3e0d6;
  --line-strong: #d2cec1;
  /* Oturum kartındaki kare ikon zeminden ayrılsın diye saf beyaz. */
  --tile-bg: #ffffff;
  /* Satır içi kod: soluk mavi zeminde mavi mürekkep (5.26:1). */
  --code-bg: #e9eef8;
  --code-ink: #1c5fbe;

  --ink: #1f1e1d;
  --ink-2: #6b6862;      /* zeminde 5.05:1 */
  --ink-3: #6c6861;      /* 5.03:1 — ikincil bilgi ve bölüm etiketleri */

  --accent: #c96442;         /* mercan — vurgu, ikon, bağlantı */
  --accent-strong: #a8452a;  /* düğme zemini, beyaz metinle 5.2:1 */
  --accent-soft: #f6ece7;
  /* --accent-soft zemininde okunan metin: --accent 3.36:1'de kalıyor,
     küçük metin için yetmiyor. Ayrı jeton, iki temada da ölçülmüş. */
  --on-soft: #a8452a;      /* soft üzerinde 5.09:1 */
  /* Sözdizimi. Hepsi --surface-2 zemininde ölçüldü, dördü de 4.5:1 üstünde. */
  --syn-key: #8250a8;      /* 4.94:1 */
  --syn-str: #2f6f4a;      /* 5.17:1 */
  --syn-num: #a8452a;      /* 5.09:1 */
  --syn-com: #6b6862;      /* 4.78:1 */
  /* Diff zeminleri: --ink üzerlerinde 13:1 üstünde kalıyor. */
  --diff-add: #e2efe4;
  --diff-del: #f8e3e1;
  --on-accent: #ffffff;
  --ok: #3a7548;         /* 5.00:1 — "bağlı" satırı */
  --err: #b3261e;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
  --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 21px;
  /* Okuma boyutu: ajanın yanıtı arayüz metninden belirgin büyük. */
  --t-read: 19px; --t-read-h: 25px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-full: 999px;
  --tap: 44px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Claude yanıtlarını serifle yazıyor — okuma metnini arayüzden ayırıyor. */
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --shadow: 0 1px 2px rgba(31, 30, 29, .06), 0 8px 24px rgba(31, 30, 29, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f1e1d;
    --surface: #262624;
    --surface-2: #30302e;
    --surface-3: #3a3a37;
    --line: #3b3b38;
    --line-strong: #4d4d49;

    --ink: #f5f4ef;
    --ink-2: #b8b5ad;
    --ink-3: #97938b;

    --accent: #e08768;
    --accent-strong: #cc6f4e;
    --accent-soft: #33291f;
    --on-soft: #e08768;    /* soft üzerinde 5.30:1 */
    --syn-key: #c8a0e8;    /* 6.08:1 */
    --syn-str: #86c99a;    /* 6.82:1 */
    --syn-num: #e08768;    /* 4.93:1 */
    --syn-com: #b8b5ad;    /* 6.46:1 */
    --diff-add: #22301f;
    --diff-del: #3a2422;
    --tile-bg: #3a3a37;
    --code-bg: #1e2735;    /* koyu temada da mavi kalıyor (7.13:1) */
    --code-ink: #8ab4f8;
    --on-accent: #1f1e1d;
    --ok: #7fc08c;
    --err: #ff9d92;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: var(--t-md)/1.55 var(--sans);
  /* svh: Android'de adres çubuğu gizlenip görününce yükseklik değişmiyor.
     dvh ile her kaydırmada düzen zıplıyor ve kaydırma takılıyormuş gibi
     hissettiriyordu; dvh eski tarayıcılar için yedek olarak önce yazılı. */
  height: 100dvh;
  height: 100svh;
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- başlık: ince, ortalanmış --- */
header {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  padding-top: max(var(--s2), env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
/* İki satırlı başlık: üstte oturum adı, altında proje ve dal. */
header h1 {
  font-size: var(--t-md); font-weight: 600; margin: 0; flex: 1; min-width: 0;
  text-align: center; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
header .sub {
  display: block; font-size: var(--t-xs); color: var(--ink-3); font-weight: 400;
  /* text-overflow KALITSAL DEĞİL: h1'in üç noktası bu blok çocuğa geçmiyor.
     Kendi kuralı olmadan uzun dal adı üç nokta olmadan sert kesiliyordu. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

main {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--s4);
  -webkit-overflow-scrolling: touch;
  /* Tarayıcının kendi "aşağı çek yenile" hareketi devreye girip kaydırmayı
     kilitliyordu — hem bizimkiyle çakışıyordu. */
  overscroll-behavior-y: contain;
}

/* --- düğmeler --- */
button {
  font: inherit; font-weight: 500; color: var(--ink); background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--r-full);
  min-height: var(--tap); padding: 0 var(--s5); cursor: pointer;
  transition: background .12s ease, opacity .12s ease;
}
button:hover { background: var(--surface-3); }
button:active { opacity: .8; }
/* Devre dışı görünüm opacity ile yapılmıyor: metin kontrastı 4.5:1'in altına
   düşüyordu. Yerine sessiz ama okunur renkler. */
button:disabled { cursor: not-allowed; }
button:disabled:not(.card) { background: var(--surface-2); color: var(--ink-3); }
.card[aria-disabled=true] { background: var(--surface-2); }
.card[aria-disabled=true] .name { color: var(--ink-2); font-weight: 500; }
button.primary { background: var(--accent-strong); color: var(--on-accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.06); }
button.icon {
  min-width: var(--tap); padding: 0 var(--s2); background: transparent;
  color: var(--ink-2); font-size: var(--t-lg); border-radius: var(--r-full);
}
button.icon:hover { background: var(--surface-2); }
/* Geri ve ayarlar tek elle basılıyor; standart 44/17 telefonda ince kalıyor
   ve ıskalanıyordu. Yalnız başlıkla sınırlı: alttan açılan sayfanın ✕'i
   listenin içinde, orada bu ölçü fazla gelir. */
header .icon { min-width: 52px; min-height: 52px; font-size: 22px; }

/* --- kartlar --- */
.card {
  display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); margin-bottom: var(--s2); min-height: var(--tap);
  color: inherit; font: inherit;
}
button.card { border-radius: var(--r-lg); }
button.card:hover { background: var(--surface-2); }
.card .name { font-weight: 600; font-size: var(--t-md); }
.card .meta { font-size: var(--t-sm); color: var(--ink-2); margin-top: 2px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Arşiv satırı: başlık dokunulabilir ama satırın tamamı düğme değil —
   yanında "geri al" duruyor ve düğme içinde düğme olmuyor. */
.linkrow {
  background: none; border: 0; padding: 0; min-height: 0; text-align: left;
  font: 600 var(--t-md)/1.4 var(--sans); color: var(--ink); display: block; width: 100%;
}

.row { display: flex; gap: var(--s2); align-items: center; }
.grow { flex: 1; min-width: 0; }
/* Referansta bölüm başlıkları küçük rozet değil: gövde boyutunda, normal
   ağırlıkta, gri, cümle düzeninde ve üstünde bol boşlukla. */
.section-label {
  font-size: var(--t-lg); font-weight: 400; letter-spacing: normal;
  color: var(--ink-3); margin: var(--s7) var(--s1) var(--s3);
}
.empty { color: var(--ink-2); text-align: center; padding: var(--s8) var(--s4); font-size: var(--t-sm); }
.empty b { display: block; color: var(--ink); font-size: var(--t-xl); font-family: var(--serif); font-weight: 400; margin-bottom: var(--s2); }

/* --- konuşma --- */
.msg { margin-bottom: var(--s5); display: flex; }
.msg.user { justify-content: flex-end; }
.msg.user .bubble {
  max-width: 85%; background: var(--surface-2); font-size: var(--t-lg);
  padding: var(--s3) var(--s4); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
}
/* Ajan yanıtı baloncuksuz ve serif — sayfanın kendi metni gibi okunuyor. */
.msg.agent .bubble {
  /* 65ch: geniş ekranda satır uzunluğu okunur kalsın. */
  max-width: min(100%, 65ch); font-family: var(--serif); font-size: var(--t-read); line-height: 1.45;
}
.bubble { overflow-wrap: anywhere; }
.bubble p { margin: 0 0 var(--s4); }
.bubble p:last-child { margin-bottom: 0; }
/* Başlıklar da serif ve gövdeden belirgin büyük — hiyerarşi metnin içinde. */
.bubble h4 { margin: var(--s6) 0 var(--s3); font-size: var(--t-read-h); font-weight: 700; line-height: 1.2; }
/* Liste işareti kendi sütununda: numaralar hizalı, satır sarınca metin kaymıyor. */
.bubble .li { display: flex; gap: var(--s2); margin-bottom: var(--s2); }
.bubble .li .n { flex: none; min-width: 1.4em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bubble .li .t { flex: 1; min-width: 0; }
/* Satır içi kod referansta mavi: soluk mavi zeminde mavi mürekkep. Gövde
   renginde bırakılınca cümlenin içinde kaybolıyordu. */
.bubble code {
  font: 14px/1.5 var(--mono); background: var(--code-bg); color: var(--code-ink);
  padding: 2px 6px; border-radius: 6px;
}
.bubble pre.code {
  margin: var(--s4) 0; padding: var(--s4); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow-x: auto;
}
.bubble pre.code code { background: none; padding: 0; font-size: 13px; }

/* Araç çağrıları gürültü değil dipnot: tek satır gri özet, isteyen açar.
   Ardışık olanlar tek satırda toplanıyor — her adım için ayrı kart, konuşmayı
   okunmaz hâle getiriyordu. */
.tool { margin: var(--s3) 0; }
.tool summary {
  list-style: none; cursor: pointer; font-size: var(--t-md); color: var(--ink-3);
  display: flex; gap: var(--s2); align-items: center; min-height: 36px;
}
.tool summary::-webkit-details-marker { display: none; }
.tool .chev { color: var(--ink-3); flex: none; }
.tool.bad summary { color: var(--ink-2); }
.tool .warn { color: var(--err); flex: none; }
.tool pre {
  margin: var(--s2) 0 0; padding: var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  font: 12px/1.5 var(--mono); color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50dvh; overflow: auto;
}

/* Grup açılınca: her adım kendi satırında. Tek bir ham dökümdense okunur bir
   liste — "app.js okundu", "$ npm test". Çıktısı olan adım kendi içinde
   açılıyor, liste kısa kalsın. */
.adimlar { border-left: 2px solid var(--line); margin: var(--s2) 0 0 var(--s2); padding-left: var(--s3); }
.adim { font-size: var(--t-sm); color: var(--ink-2); padding: var(--s1) 0; }
div.adim, .tool .adim > summary { display: flex; gap: var(--s2); align-items: baseline; min-height: 28px; }
.adim .ikon { flex: none; width: 1.1em; text-align: center; color: var(--ink-3); }
.adim .ikon.err { color: var(--err); }
.adim .kod { font-family: var(--mono); font-size: var(--t-xs); }
.adim .filelink { font-size: var(--t-xs); }
.adim pre { margin-left: calc(1.1em + var(--s2)); }
.tool .adim .chev { font-size: var(--t-xs); }
.err { color: var(--err); }
.bubble.err { font-family: var(--sans); font-size: var(--t-md); }

.thinking { display: flex; gap: var(--s2); align-items: center; color: var(--ink-2); font-size: var(--t-sm); padding: var(--s2) 0; }
.thinking .spark { color: var(--accent); font-size: var(--t-lg); animation: pulse 1.4s infinite; }
.thinking { color: var(--accent); }
@keyframes pulse { 0%,60%,100% { opacity: .25 } 30% { opacity: 1 } }

/* --- besteci: tek parça yuvarlak kutu --- */
footer {
  background: var(--bg); padding: var(--s2) var(--s3);
  padding-bottom: max(var(--s2), env(safe-area-inset-bottom));
}
.composer {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s3); box-shadow: var(--shadow);
}
.composer textarea {
  width: 100%; border: 0; background: none; resize: none; font: inherit; color: var(--ink);
  padding: var(--s1) var(--s2); max-height: 32dvh; outline: none;
}
.composer textarea::placeholder { color: var(--ink-3); }
/* Normalde tek satır: haplar uzarsa kırpılır, gönder düğmesi yerinde kalır.
   Model adı uzun olduğunda düğme alt satıra düşüyordu. */
.composer-bar { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); flex-wrap: nowrap; }
.composer-bar .send { margin-left: auto; flex: none; }
/* Yalnızca çok dar viewport'ta (ör. %200 zoom) sarsın — orada tek satıra
   sığmıyor ve gönder düğmesi erişilemez kalıyordu. */
@media (max-width: 340px) {
  .composer-bar { flex-wrap: wrap; }
}
.send {
  display: grid; place-items: center;
  min-width: 40px; width: 40px; height: 40px; min-height: 40px; padding: 0;
  border-radius: 50%; background: var(--accent-strong); color: var(--on-accent);
  transition: background .12s ease, opacity .12s ease, transform .1s ease;
}
.send:hover { background: var(--accent-strong); filter: brightness(1.06); }
.send:active { transform: scale(.94); }
/* Yazacak bir şey yokken sönük: dokunmadan önce ne olacağı belli olsun. */
.send:disabled { background: var(--surface-3); color: var(--ink-3); opacity: 1; }
/* Ajan çalışırken gönder, durdura dönüşüyor — Claude mobildeki kalıp. */
.send[data-state=stop] { background: var(--surface-3); color: var(--ink); }

/* Boş konuşmada dokunulabilir öneriler: "tek net eylem" yerine üç net eylem. */
.suggest { display: grid; gap: var(--s2); margin-top: var(--s5); text-align: left; }
.suggest button {
  width: 100%; text-align: left; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); padding: var(--s3) var(--s4); font-size: var(--t-sm);
  color: var(--ink-2); min-height: var(--tap); font-weight: 400;
}
.suggest button:hover { background: var(--surface-2); }

/* Yükleme iskeleti — boş ekran yerine yapının kendisi görünsün. */
.skel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  height: 68px; margin-bottom: var(--s2); overflow: hidden; position: relative; }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--surface-2), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%) } }

/* Kilitli adım: görünür ama sırası gelmemiş. */
.step.locked { opacity: 1; }
.step.locked .num { background: var(--surface-2); color: var(--ink-3); }
.step.locked .name { color: var(--ink-2); }
label.file {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 38px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2); cursor: pointer; font-size: var(--t-lg);
}
label.file input { position: absolute; opacity: 0; width: 0; height: 0; }
label.file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.attachments { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
/* Gönderilmeyi bekleyen ek: önizleme, ad, boyut, kaldır. Yuvarlak hap yerine
   kart — ad ve boyut sığsın, silme düğmesi parmak ölçüsünde olsun. */
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s1) var(--s1) var(--s1) var(--s2);
  font-size: var(--t-xs); color: var(--ink-2); min-height: 40px; max-width: 100%;
}
.chip img, .chip .ico {
  width: 32px; height: 32px; border-radius: var(--r-sm); flex: none;
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); font-size: var(--t-md);
}
.chip .ad { color: var(--ink); max-width: 12ch; }
.chip .boy { color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }
.chip .sil {
  flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--ink-3); font-size: var(--t-sm);
}
.chip .sil:hover { background: var(--surface-3); color: var(--ink); }

/* Besteci hapları: ajan adı (sabit) ve kip (dokundukça dönüyor).
   Referansta bunlar küçük rozet değil, gövde boyutunda yuvarlak haplar
   ("Opus 5", "⚡ Auto") — dokunması da okuması da kolay. */
.pill {
  min-height: 38px; padding: 0 var(--s3); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--t-md); font-weight: 400;
  border: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 0 1 auto; min-width: 0;    /* uzun model adı satırı taşırmasın */
}
/* Kip hapı kırpılmasın: kısa ve her zaman okunur olmalı. Yer sıkışırsa
   ajan/model hapı daralsın. */
#mode { flex: none; }
.pill:disabled { background: var(--surface-2); color: var(--ink-2); }

/* Eklenen görsel konuşmanın içinde: dosya adı yerine görselin kendisi. */
/* Ekler: baloncuğun içinde küçük kareler, metnin üstünde. Tam genişlikte
   basılan tek bir görsel telefonda mesajın tamamını yutuyordu. */
.atts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); }
.att {
  width: 72px; height: 72px; padding: 0; border: 1px solid var(--line-strong);
  border-radius: var(--r-md); background: var(--surface-3); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.att img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Görsel olmayan ek: aynı kare, ad altına sığdırılıyor. */
.att.dosya {
  flex-direction: column; gap: var(--s1); font-size: var(--t-xs);
  color: var(--ink-2); padding: var(--s2); text-align: center;
  text-decoration: none; font-size: var(--t-md);
}
.att.dosya .truncate { font-size: var(--t-xs); }
a.att.dosya:hover { border-color: var(--accent); color: var(--accent); }
.att.dosya .truncate { max-width: 100%; }

/* Tam ekran görsel. Zemine de dokunulunca kapanıyor: telefonda ✕'e nişan
   almak yerine herhangi bir yere basmak daha hızlı. */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center; padding: var(--s4);
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .kapat {
  position: absolute; top: max(var(--s4), env(safe-area-inset-top)); right: var(--s4);
  color: #fff; background: rgba(255, 255, 255, .15); border-radius: var(--r-full);
  width: var(--tap); height: var(--tap);
}
/* button.icon:hover daha spesifik: karanlık zeminde krem bir kutu bırakıyordu. */
.lightbox .kapat:hover { background: rgba(255, 255, 255, .28); }

/* kip: küçük, sessiz, tek dokunuş */
/* Çok dar viewport'ta sığmayınca sarsın, taşmasın. */
.segment { display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%;
  background: var(--surface-2); border-radius: var(--r-full); padding: 2px; }
.segment button {
  min-height: 32px; border: 0; border-radius: var(--r-full); background: transparent;
  font-size: var(--t-xs); color: var(--ink-2); padding: 0 var(--s3); font-weight: 500;
}
.segment button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* --- adım göstergesi --- */
.step { display: flex; gap: var(--s3); align-items: flex-start; }
.step .num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--t-xs); font-weight: 600;
  background: var(--surface-2); color: var(--ink-2);
}
.step.done .num { background: var(--ok); color: #fff; }
.step.now .num { background: var(--accent-strong); color: var(--on-accent); }
.badge { font-size: var(--t-xs); color: var(--ink-2); }
.badge.ok { color: var(--ok); font-weight: 600; }

label.field { display: block; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s2); }
input[type=text], input:not([type]) {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: var(--s3); min-height: var(--tap);
}
input::placeholder { color: var(--ink-3); }

/* SKILL.md düzenleyici. Tek parça metin: başlıkta name/description dışında
   satırlar olabiliyor, alan alan bölmek yazılanı kaybetmenin yoluydu.
   Eşaralıklı yazı tipi, çünkü içerik girintili markdown ve YAML. */
textarea.skilledit {
  width: 100%; min-height: 45dvh; resize: vertical;
  font: var(--t-sm)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--s3);
}

.center { display: grid; place-items: center; height: 100%; text-align: center; padding: var(--s6); }
/* Bağlantı mercanın koyu tonunda: --accent gövde metni ölçüsünde 3.54:1'de
   kalıyor, okunması gereken metin için yetmiyor. */
a { color: var(--on-soft); }
details > summary { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* --- ana ekran: büyük serif başlık, ajan hapları, oturum satırları --- */
.hero { font-family: var(--serif); font-size: 40px; line-height: 1.1; margin: var(--s2) 0 var(--s6); }

/* Tek satırda kalsın, sığmazsa yana kaysın — alta düşünce ritmi bozuyordu. */
.pillbar {
  display: flex; gap: var(--s2); flex-wrap: nowrap; overflow-x: auto;
  margin-bottom: var(--s5); padding-bottom: var(--s1);
  scrollbar-width: none;
}
.pillbar::-webkit-scrollbar { display: none; }
.agentpill { flex: none; }
.agentpill {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 0 var(--s4); min-height: 40px; font-size: var(--t-md); color: var(--ink);
}
.agentpill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.agentpill.on .dot { background: var(--ok); }

/* Oturum satırı: solda ajan kutucuğu, sağda saat, altta durum + proje. */
.rowcard { display: flex; gap: var(--s3); align-items: flex-start; }
.tile {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--tile-bg); color: var(--ink-2);
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--t-xs);
}
.rowcard .when { flex: none; color: var(--ink-3); font-size: var(--t-xs); }
.rowcard .sub2 { display: flex; gap: var(--s2); align-items: center; font-size: var(--t-sm); color: var(--ink-2); min-width: 0; }
.rowcard .state { color: var(--ok); flex: none; }
.rowcard .state.off { color: var(--ink-3); }

/* Kayan birincil eylem: başparmağın altında, listeyi kapatmadan. */
.fab {
  position: fixed; right: var(--s4); z-index: 5;
  bottom: max(var(--s5), calc(env(safe-area-inset-bottom) + var(--s4)));
  background: var(--ink); color: var(--bg); font-weight: 600;
  border-radius: var(--r-full); padding: 0 var(--s5); min-height: 52px;
  box-shadow: var(--shadow);
}
.fab:hover { background: var(--ink); filter: brightness(1.1); }

/* Aşağı çekince yenile: liste tepesinde açılan şerit. */
#ptr {
  height: 0; overflow: hidden; display: grid; place-items: center;
  color: var(--accent); transition: height .18s ease;
}
#ptr.pulling { height: 44px; }
#ptr.spin .spark { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg) } }


/* Arama çubuğu listenin tepesinde sabit: 59 projede kaydırıp geri dönmek
   yerine yazarak daralt. */
.searchbar {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg); padding-bottom: var(--s3); margin-bottom: var(--s1);
}
.searchbar input {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 0 var(--s4); min-height: var(--tap);
  -webkit-appearance: none;
}
.searchbar input::placeholder { color: var(--ink-3); }


/* --- alttan açılan kip sayfası --- */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 10; }
.sheet {
  /* --kb: klavye yüksekliği, app.js ölçüyor. Sıfırken davranış değişmiyor. */
  position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 11;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--s4) var(--s4) max(var(--s5), env(safe-area-inset-bottom));
  box-shadow: var(--shadow); max-height: 80dvh; overflow-y: auto;
}
.sheet-head { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
.sheet-head > div { flex: 1; text-align: center; }
.sheet-title { font-weight: 600; font-size: var(--t-lg); }
.sheet-opt {
  display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: var(--r-md);
  padding: var(--s3); min-height: 60px; color: inherit;
}
.sheet-opt:hover { background: var(--surface-2); }
.sheet-opt .ico { font-size: var(--t-xl); width: 32px; text-align: center; flex: none; }
.sheet-opt .t { flex: 1; min-width: 0; }
.sheet-opt .t b { display: block; font-weight: 600; }
.sheet-opt .t span { font-size: var(--t-sm); color: var(--ink-2); }
.sheet-opt .radio {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line-strong);
}
.sheet-opt[aria-checked=true] .radio {
  border-color: var(--accent-strong); background: radial-gradient(circle, var(--accent-strong) 0 5px, transparent 6px);
}

/* Plan bitince: uygula ya da revize et. */
.planbar { display: flex; gap: var(--s2); margin: var(--s4) 0 var(--s5); }
.planbar button { flex: 1; }


/* Sırada bekleyen mesaj: gönderildi ama henüz işlenmedi. */
.bubble.queued { opacity: .65; border-style: dashed; }
.bubble.queued .meta { display: block; margin-top: var(--s1); }


/* Ana ekranda koşan oturum. */
.rowcard .state.run { color: var(--accent); display: inline-flex; gap: 4px; align-items: center; }
.rowcard .state.run .spark { animation: pulse 1.4s infinite; }


/* --- liste kartı: hesaplar, ajanlar --- */
.card.list { padding: var(--s2) var(--s4); }
.listrow {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
  min-height: 56px;
}
.card.list .listrow:last-of-type { border-bottom: 0; }
.listrow.head { border-bottom: 1px solid var(--line); }
.listrow .name { display: block; font-weight: 600; font-size: var(--t-md); }
.listrow .meta { display: block; font-size: var(--t-sm); color: var(--ink-2); }
.listrow .tile { width: 36px; height: 36px; font-size: var(--t-md); }

/* Satır içi küçük düğme. Dokunma hedefi yüksekliği satırdan geliyor. */
button.sm { min-height: 40px; padding: 0 var(--s4); font-size: var(--t-sm); flex: none; }
button.ghost { background: transparent; color: var(--ink-2); }
button.ghost:hover { background: var(--surface-2); }

.listrow .tile.ok { background: var(--ok); color: #fff; }

/* Proje kartında son dokunma zamanı. */
.card .when { flex: none; font-size: var(--t-xs); color: var(--ink-3); }


/* Ajanın sorusu: konuşmanın içinde, dokunulabilir seçeneklerle. Telefonda
   asıl kazanç burada — cevabı yazmak yerine seçmek. */
.bubble.sorular { font-family: var(--sans); font-size: var(--t-md); }
/* Soru kartı referanstan birebir: yüzen beyaz kart, üstte soru, altında
   numaralı seçenekler. Seçenekler kutu DEĞİL — yuvarlak numara rozeti,
   yanında etiket, aralarında ince çizgi. Kutulu seçenek listeyi ağırlaştırıyor
   ve dokunulacak alanı belirsizleştiriyordu. */
.soru {
  counter-reset: secenek;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: var(--s4); margin-bottom: var(--s3);
}
/* Başlık sessiz bir satır: rozet değil. Soru zaten kendi ağırlığını taşıyor. */
.sbaslik {
  display: block; font-size: var(--t-sm); font-weight: 400;
  color: var(--ink-3); margin-bottom: var(--s1);
}
.smetin { font-size: var(--t-read); font-weight: 500; margin-bottom: var(--s2); line-height: 1.35; }
/* Rozet mutlak konumda: b ve span alt alta kalsın diye satır flex'e
   çevrilmiyor — çevrilseydi etiket ve açıklama yan yana düşerdi. */
.secenek {
  position: relative; display: block; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 0; margin: 0;
  padding: var(--s3) 0 var(--s3) 50px; color: inherit; min-height: 56px;
}
.secenek + .secenek { border-top: 1px solid var(--line); }
.secenek::before {
  counter-increment: secenek; content: counter(secenek);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2);
  display: grid; place-items: center; font-size: var(--t-sm);
}
.secenek b { display: block; font-weight: 400; font-size: var(--t-lg); line-height: 1.3; }
.secenek span { display: block; font-size: var(--t-sm); color: var(--ink-2); margin-top: 2px; }
.secenek:hover { background: var(--surface-2); }
.secenek.secili { background: var(--accent-soft); }
.secenek.secili::before { background: var(--accent-strong); color: var(--on-accent); }
/* Yanıtlanmış kart sönüyor ama duruyor: neyin seçildiği konuşmada kalsın. */
.soru.yanitlandi { opacity: .55; }
.soru.yanitlandi .secenek:hover { background: none; }

/* Plan: konuşmanın ana metni, dipnot değil. Sol şerit ve etiketle ayrılıyor. */
.bubble.plan {
  border-left: 3px solid var(--accent); padding-left: var(--s4);
  background: var(--surface); border-radius: var(--r-md);
  padding-top: var(--s3); padding-bottom: var(--s3);
}
.planlabel {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  color: var(--accent); letter-spacing: .04em; margin-bottom: var(--s2);
}

.sheet input[type=text] { width: 100%; }


/* Sohbetteki dosya yolu: koda benziyor ama dokunulabilir. */
.filelink {
  font: 13px/1.5 var(--mono); background: var(--surface-2); color: var(--accent);
  border: 0; border-radius: 5px; padding: 2px 5px; min-height: 0;
  text-decoration: underline; text-underline-offset: 2px;
  /* Cümlenin içinde akıyor: uzun yol telefonda satırı taşırmasın, sararken de
     zemini parça parça değil bütün görünsün. */
  display: inline; text-align: left; white-space: normal; overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.filelink:hover { background: var(--surface-3); }

/* Dosya görüntüleyici: numaralı satırlar, aranan satır vurgulu.
   Numara sütunu sticky — uzun satırda yana kaydırınca kaybolmasın. */
.filebody {
  max-height: 62dvh; overflow: auto; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.filecode { margin: 0; padding: var(--s3) 0; font: 13px/1.65 var(--mono); }
.filecode .fl { display: block; white-space: pre; padding-right: var(--s4); }
.filecode .ln {
  position: sticky; left: 0; display: inline-block; width: 3.4em;
  padding-right: var(--s3); margin-right: var(--s3); text-align: right;
  color: var(--ink-3); background: var(--surface-2); user-select: none;
}
.filecode .fl.hit { background: var(--surface-3); }
.filecode .fl.hit .ln { background: var(--surface-3); color: var(--accent); font-weight: 600; }

/* Skill: besteci düğmesi, seçici satırı, sohbetteki rozet.
   `/ad` CLI içinde genişleyip akışta iz bırakmadığı için görünürlüğün
   tamamını arayüz üretiyor. */
.skillbtn {
  flex: none; width: var(--tap); min-width: var(--tap);
  font: 600 var(--t-lg)/1 var(--mono); color: var(--ink-2);
  display: grid; place-items: center; padding: 0;
}
/* Tamamlama listesi: bestecinin hemen üstünde, klavyeyle birlikte hareket
   eder. Eşdüzey ve az sayıda nesne — kart değil, liste satırı. */
.cmdlist {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  margin-bottom: var(--s2); max-height: 38dvh; overflow-y: auto;
}
.cmd {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; border-radius: 0; padding: var(--s3); min-height: var(--tap); color: inherit;
}
.cmd + .cmd { border-top: 1px solid var(--line); }
.cmd:hover { background: var(--surface-2); }
.cmd .ad { display: block; font: 600 var(--t-md)/1.4 var(--mono); color: var(--accent); }
/* Açıklama uzun olabiliyor; iki satırda kesiliyor ki liste taranabilir kalsın. */
.cmd .aciklama {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s1);
}
.cmdbos { padding: var(--s3); font-size: var(--t-sm); color: var(--ink-2); }
.cmdbos.err { color: var(--err); }
/* Rozet baloncuğun içinde, metnin önünde: mesajın bir skill ile gittiği
   okunmadan görünsün. */
.skillchip {
  display: inline-block; margin-right: var(--s2);
  font: 600 var(--t-xs)/1.6 var(--mono);
  background: var(--accent-soft); color: var(--on-soft);
  border-radius: var(--r-full); padding: 1px var(--s2);
}


/* Sözdizimi vurgusu. Kendi etiketimiz <i>: anlamı yok, yalnız boyama —
   <em> okuyucuya vurgu diye duyurulurdu. */
.filecode .s-key { color: var(--syn-key); }
.filecode .s-str { color: var(--syn-str); }
.filecode .s-num { color: var(--syn-num); }
.filecode .s-com { color: var(--syn-com); font-style: normal; }

/* Diff: satırın kendisi renkleniyor, numara sütunu yok — diff'te satır
   numarası kaynağınkiyle uyuşmuyor, göstermek yanlış yere güven verirdi. */
.filecode.diff .dl { display: block; white-space: pre; padding: 0 var(--s3); }
.filecode.diff .add { background: var(--diff-add); }
.filecode.diff .del { background: var(--diff-del); }
.filecode.diff .hunk { color: var(--syn-key); }
.filecode.diff .meta { color: var(--ink-3); }

/* İçerik / Değişiklik geçişi. İki seçenek — açılır liste değil segment. */
.seg { display: flex; gap: var(--s1); margin-bottom: var(--s3); background: var(--surface-2);
  border-radius: var(--r-full); padding: var(--s1); }
.seg button {
  flex: 1; min-height: 36px; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--ink-2); font-size: var(--t-sm); font-weight: 500;
}
.seg button[aria-selected=true] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }