/* ═══════════════════════════════════════════════════════════════════════
 * Logosoft Chat — AI ilkelleri
 *
 * foundation.css tasarım DİLİNİ getirdi; bu dosya o dili sohbetin kendi
 * parçalarına uygular. Beautiful UI'nin (beautifului.dev, MIT) karşılıkları:
 * Tool Chips, Thinking, Streaming Text, Approval Card, Context Cards.
 *
 * KABUK DEĞİL, İÇİ: sohbet kabuğu (agentic-shell.css) zaten iyi — geniş
 * cevap alanı, kart besteci, kenar çubuğu. Eksik olan ajanın KENDİNİ
 * anlattığı yerlerdi: hangi aracı çağırdı, ne düşündü, SAP'ye yazmadan
 * önce ne soruyor. Bu dosya onlar.
 *
 * agentic-shell.css'ten SONRA yüklenir; oradaki .stream-chip kuralları
 * (arka planı/kenarlığı !important ile sıfırlayanlar) kaldırıldı ki
 * burada !important savaşı olmasın.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
 * 1 · ARAÇ İZİ  (Tool Chips + Thinking)
 *
 * Çalışırken dikey: adımlar sırayla belirir, izlenebilir.
 * Bitince tek satıra katlanır: "4 araç çağrısı · 1,4 sn" — cevap
 * okunurken iz yolu tıkamasın, ama merak eden açabilsin.
 * ───────────────────────────────────────────────────────────────────── */

.agentic-shell .stream-steps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-bottom: 22px;
}

.agentic-shell .stream-chip {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: 100%;
  padding: 7px 2px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: 400 14.5px/1.4 var(--font);
  color: var(--ink-2);
  animation: fade-up 0.28s var(--ease-out-strong) both;
}

/* Durum göstergesi: çalışırken dönen halka, bitince dolu onay. */
.agentic-shell .stream-chip .sc-ico {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
  font-size: 0;
  border: 1.5px solid var(--line-strong);
  position: relative;
}

.agentic-shell .stream-chip.active .sc-ico {
  border: 2px solid var(--brand);
  border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}

.agentic-shell .stream-chip.done .sc-ico,
.agentic-shell .stream-chip:not(.active) .sc-ico {
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

.agentic-shell .stream-chip:not(.active) .sc-ico::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 4px;
  width: 6px;
  height: 3px;
  border-left: 1.6px solid var(--brand);
  border-bottom: 1.6px solid var(--brand);
  transform: rotate(-45deg);
}

.agentic-shell .stream-chip.active .sc-ico::after { content: none; }

.agentic-shell .stream-chip .sc-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Aracın kimliği: SQL / SL / DB gibi kısa monogram. Emoji yerine bunu
   kullanıyoruz — emoji platformlar arası değişir ve hizalanmaz. */
.agentic-shell .stream-chip .sc-tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
  border-radius: 4px;
  padding: 1.5px 5px;
  margin-right: 8px;
  vertical-align: 1.5px;
}

/* Geçen süre — sağa yaslı, rakamlar sabit genişlikte ki satırlar oynamasın. */
.agentic-shell .stream-chip .sc-ms {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agentic-shell .stream-chip .sc-spin { display: none; }

/* Katlanmış iz */
.agentic-shell .ag-trace {
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--inset);
  overflow: hidden;
}

.agentic-shell .ag-trace > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  padding: 10px 13px;
  font: 400 14px var(--font);
  color: var(--ink-2);
  transition: background 0.18s var(--ease-out-strong);
}

.agentic-shell .ag-trace > summary::-webkit-details-marker { display: none; }
.agentic-shell .ag-trace > summary:hover { background: var(--hover); }

.agentic-shell .ag-trace-mark {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
  position: relative;
  flex: none;
}

.agentic-shell .ag-trace-mark::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3.5px;
  width: 6px;
  height: 3px;
  border-left: 1.6px solid var(--brand);
  border-bottom: 1.6px solid var(--brand);
  transform: rotate(-45deg);
}

.agentic-shell .ag-trace-ms {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.agentic-shell .ag-trace-caret {
  width: 11px;
  flex: none;
  color: var(--ink-3);
  transition: transform 0.2s var(--ease-out-strong);
}

.agentic-shell .ag-trace[open] .ag-trace-caret { transform: rotate(90deg); }

.agentic-shell .ag-trace .stream-steps {
  margin: 0;
  padding: 4px 13px 11px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

/* Katlanmış izin içinde satırlar sarabilir: canlı akışta tek satır kalması
   önemliydi (liste zıplamasın), burada okunurluk önce gelir. */
.agentic-shell .ag-trace .stream-chip {
  align-items: start;
  animation: none;
}

.agentic-shell .ag-trace .stream-chip .sc-txt {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.agentic-shell .ag-trace .stream-chip .sc-ico,
.agentic-shell .ag-trace .stream-chip .sc-ms { margin-top: 2px; }

/* Modelin o adımdaki gerekçesi — ikincil, ayrı satırda. */
.agentic-shell .sc-think {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ─────────────────────────────────────────────────────────────────────
 * 2 · BEKLEME  (Loading State)
 *
 * Üç zıplayan nokta "bir şey oluyor" der ama NE olduğunu söylemez.
 * Parlayan metin + geçen süre hem canlı hem bilgilendirici.
 * ───────────────────────────────────────────────────────────────────── */

.agentic-shell .ag-wait {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 3px 0;
  font: 400 15px var(--font);
}

.agentic-shell .ag-wait-txt {
  background: linear-gradient(90deg, var(--ink-3) 20%, var(--ink) 45%, var(--ink-3) 70%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-text 2.4s linear infinite;
}

.agentic-shell .ag-wait-eq {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 12px;
  flex: none;
}

.agentic-shell .ag-wait-eq i {
  width: 2.5px;
  height: 100%;
  border-radius: 1px;
  background: var(--brand);
  animation: eq-bounce 1.1s var(--ease-out-strong) infinite;
}

.agentic-shell .ag-wait-eq i:nth-child(2) { animation-delay: 0.14s; }
.agentic-shell .ag-wait-eq i:nth-child(3) { animation-delay: 0.28s; }

.agentic-shell .ag-wait-ms {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Eski üç nokta hâlâ birkaç yerden çağrılıyor; markadan renk alsın. */
.agentic-shell .typing span { background: var(--brand); }

/* ─────────────────────────────────────────────────────────────────────
 * 3 · AKAN METİN  (Streaming Text)
 *
 * DÜZELTME: imleç var(--accent) kullanıyordu — bizde --accent ALTIN.
 * Yani cevap akarken imleç sarı yanıp sönüyordu. Marka mavisine alındı
 * ve '▋' karakteri yerine gerçek bir imleç çubuğu kullanılıyor
 * (karakter, yazı tipine göre farklı genişlikte çiziliyordu).
 * ───────────────────────────────────────────────────────────────────── */

.agentic-shell .stream-body.streaming::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--brand);
  animation: caret-blink 1s steps(1) infinite;
}

/* ─────────────────────────────────────────────────────────────────────
 * 4 · ONAY KARTI  (Approval Card)
 *
 * En önemlisi. SAP'ye her yazımda açık onay şart; bu kutu o kararın
 * verildiği yer. Önceden altın uyarı kutusuydu — dikkat çekiyordu ama
 * bir KARAR yüzeyi gibi durmuyordu. Artık: yüzey kartı, soru ağırlıkta,
 * kanıt ikincil, eylemler hap biçiminde ve reddet ile onayla ayrışık.
 * ───────────────────────────────────────────────────────────────────── */

.agentic-shell .approval-box,
.approval-box {
  margin: 20px 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--smooth-sm);
  animation: pop-in 0.3s var(--ease-out-strong) both;
  overflow: hidden;
}

.approval-title {
  padding: 15px 18px 0;
  margin: 0;
  font: 500 16px/1.4 var(--font);
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Ne yapılacağı: yöntem + uç nokta mono, çünkü bunlar teknik kimlik. */
.approval-meta {
  padding: 8px 18px 0;
  font: 400 13.5px/1.6 var(--font);
  color: var(--ink-2);
}

.approval-meta .ap-call {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 5px;
  overflow-wrap: anywhere;
}

.approval-meta .ap-call b {
  color: var(--brand);
  font-weight: 600;
  margin-right: 6px;
}

/* ── İş dili bloğu ───────────────────────────────────────────────────
   Onay kartını SAP bilmeyen çalışan da okuyabilmeli. Hiyerarşi kasıtlı:
   önce ne olacağı (headline), sonra karar için gereken birkaç gerçek
   (facts), en sonda etkisi ve geri alınabilirliği. Teknik ayrıntı bunların
   ALTINDA ve kapalı duruyor — silinmedi, sırası değişti. */
.ap-headline {
  padding: 10px 18px 0;
  margin: 0;
  font: 500 15px/1.45 var(--font);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.ap-facts {
  margin: 12px 18px 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.ap-facts > div {
  display: grid;
  grid-template-columns: minmax(96px, 34%) 1fr;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
}

/* Etiket rengi --ink-3 DEĞİL --ink-2.
   Ölçüldü: --ink-3 beyaz üstünde 2,72:1 veriyor; WCAG AA normal metin için
   4,5:1 istiyor. Kart bir KARAR yüzeyi ve etiketler değerin ne olduğunu
   söylüyor ("1.410,00 TL" neyin tutarı?). Okunmayan etiket, okunmayan karar
   demek. --ink-2 ile 7,4:1 çıkıyor. */
.ap-facts dt {
  margin: 0;
  font: 400 12.5px/1.5 var(--font);
  color: var(--ink-2);
}

.ap-facts dd {
  margin: 0;
  font: 450 13.5px/1.5 var(--font);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Tutar satırı: kararın dayandığı sayı, göz ilk buraya gitmeli. */
.ap-facts .onemli dd {
  font: 600 16px/1.4 var(--font);
  letter-spacing: -0.01em;
}

/* Etki kutusu — "ne olacak" ve "geri alınabilir mi".
   Taslak (deftere işlenmez) ile kalıcı işlem GÖRSEL olarak ayrışır;
   uzman olmayan kullanıcı için bu ikisi arasındaki fark görünmez,
   söylemek gerekiyor. */
.ap-effect {
  margin: 12px 18px 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  background: var(--surface);
  display: grid;
  gap: 4px;
}

.ap-effect strong {
  font: 500 13.5px/1.5 var(--font);
  color: var(--ink);
}

.ap-effect span {
  font: 400 12.5px/1.55 var(--font);
  color: var(--ink-2);
}

/* Taslak yeşil, kalıcı işlem sarı: renk tek başına anlam taşımıyor
   (metin de söylüyor), yalnız tarama hızını artırıyor. */
.ap-effect.taslak {
  border-left-color: var(--success);
  background: var(--success-tint);
}
.ap-effect.kalici {
  border-left-color: var(--warning);
  background: var(--warning-tint);
}

@media (max-width: 560px) {
  .ap-facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Rozet şeridi — risk, varlık, anahtar, şema doğrulaması */
.ap-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 0;
}

.ap-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 11.5px/1 var(--font);
  letter-spacing: 0.01em;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--inset);
  color: var(--ink-2);
  white-space: nowrap;
}

.ap-badge.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}

.ap-badge.ok { background: var(--success-tint); border-color: transparent; color: var(--success); }
.ap-badge.warn { background: var(--warning-tint); border-color: transparent; color: var(--warning); }
.ap-badge.bad { background: var(--danger-tint); border-color: transparent; color: var(--danger); }

/* Kanıt listeleri: geçen kontroller, uyarılar, engelleyen hatalar */
.ap-list {
  padding: 12px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 400 13px/1.5 var(--font);
}

.ap-list .ap-line {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  overflow-wrap: anywhere;
}

.ap-list .ap-line::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin: 7px 0 0 4px;
  background: currentColor;
  opacity: 0.55;
}

.ap-list.checks { color: var(--ink-2); }
.ap-list.warns { color: var(--warning); }
.ap-list.blocks { color: var(--danger); }

/* Gönderilecek alanlar — katlanmış, çünkü çoğu zaman bakılmaz */
.ap-payload { padding: 12px 18px 0; }

.ap-payload > summary {
  cursor: pointer;
  list-style: none;
  font: 400 13px var(--font);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--inset);
  transition: background 0.18s var(--ease-out-strong);
}

.ap-payload > summary::-webkit-details-marker { display: none; }
.ap-payload > summary:hover { background: var(--hover); }

.ap-payload pre {
  margin: 9px 0 0;
  padding: 12px;
  max-height: 260px;
  overflow: auto;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Eylem ayağı — kararın verildiği satır */
.approval-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  padding: 13px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--inset);
}

.approval-actions button {
  font: 500 14px var(--font);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.18s var(--ease-out-strong),
    border-color 0.18s var(--ease-out-strong),
    filter 0.18s var(--ease-out-strong);
}

/* Reddet önce ve sessiz; onayla sağda ve dolu. Yıkıcı olan onaydır
   (SAP'ye yazar), o yüzden ağırlık orada ve yanlışlıkla tıklanmasın
   diye ikisi arasında boşluk var. */
.approval-actions .btn-reject {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-2);
}

.approval-actions .btn-reject:hover {
  background: var(--hover);
  color: var(--danger);
  border-color: var(--danger);
}

.approval-actions .btn-approve {
  margin-left: auto;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--smooth-xs);
}

.approval-actions .btn-approve:hover { filter: brightness(1.12); }
.approval-actions button:active { transform: scale(0.97); }

.ap-hint {
  padding: 0 18px 14px;
  margin: 0;
  font: 400 12.5px/1.5 var(--font);
  color: var(--ink-3);
  background: var(--inset);
}

.ap-hint:empty { display: none; }

/* ─────────────────────────────────────────────────────────────────────
 * 5 · KAYNAK SATIRLARI  (Context Cards)
 *
 * Cevabın neye dayandığı. Kart yaptık ki "bu bilgi nereden geldi"
 * sorusu tek bakışta cevaplansın.
 * ───────────────────────────────────────────────────────────────────── */

.agentic-shell .ag-source-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 15px;
  margin-bottom: 10px;
  font: 400 14px/1.6 var(--font);
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: border-color 0.18s var(--ease-out-strong);
}

.agentic-shell .ag-source-row:hover { border-color: var(--line-strong); }
.agentic-shell .ag-source-row p { color: var(--ink-2); margin: 7px 0 0; font-size: 13.5px; }

.agentic-shell .ag-source-row button {
  margin-top: 9px;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--inset);
  color: var(--brand);
  font: 500 12.5px var(--font);
  cursor: pointer;
  transition: background 0.18s var(--ease-out-strong);
}

.agentic-shell .ag-source-row button:hover { background: var(--hover); }

/* ─────────────────────────────────────────────────────────────────────
 * 6 · SONUÇ KARTI — katmanlı gölge ve saç teli kenarla yeniden
 * ───────────────────────────────────────────────────────────────────── */

.agentic-shell .ag-result-card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--smooth-xs);
  transition:
    border-color 0.18s var(--ease-out-strong),
    box-shadow 0.18s var(--ease-out-strong);
}

.agentic-shell .ag-result-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--smooth-sm);
}

.agentic-shell .ag-result-card button {
  border-radius: 999px;
  padding: 9px 16px;
  transition: background 0.18s var(--ease-out-strong);
}

.agentic-shell .ag-result-card button:hover { background: var(--brand-tint); }

/* ─────────────────────────────────────────────────────────────────────
 * 7 · BESTECİ  (Prompt Bar) — odak halkası ve yükseklik
 * ───────────────────────────────────────────────────────────────────── */

.agentic-shell .ag-composer {
  border-color: var(--line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--smooth-xs);
}

.agentic-shell .ag-composer:focus-within,
.agentic-shell .ag-composer.ag-dragover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint), var(--smooth-sm);
}

.agentic-shell .ag-empty .ag-composer { border-color: var(--line-strong); }

.agentic-shell #chat-send,
.agentic-shell .ag-stop {
  background: var(--brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--smooth-xs);
  transition:
    filter 0.18s var(--ease-out-strong),
    transform 0.18s var(--ease-out-strong);
}

.agentic-shell #chat-send:hover,
.agentic-shell .ag-stop:hover {
  background: var(--brand);
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Kullanıcı balonu: markanın açık tonu, saç teli kenarla oturtuldu */
.agentic-shell .msg.user .msg-content {
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);
}

/* Öneri kartları */
.agentic-shell .ag-suggestions button {
  border-color: var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--smooth-xs);
  transition:
    border-color 0.18s var(--ease-out-strong),
    background 0.18s var(--ease-out-strong),
    transform 0.18s var(--ease-out-strong);
}

.agentic-shell .ag-suggestions button:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
  transform: translateY(-2px);
}

/* Kenar çubuğu gezinme — kayan vurgu (Sidebar Nav) */
.agentic-shell .nav-btn,
.agentic-shell .ag-module summary {
  transition:
    background 0.18s var(--ease-out-strong),
    color 0.18s var(--ease-out-strong);
}

.agentic-shell .nav-btn:hover,
.agentic-shell .ag-module summary:hover { background: var(--hover); }

.agentic-shell .nav-btn.active,
.agentic-shell .ag-module[open] > summary {
  background: var(--brand-tint);
  color: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
  .agentic-shell .ag-wait-txt,
  .agentic-shell .ag-wait-eq i,
  .agentic-shell .stream-chip.active .sc-ico,
  .agentic-shell .stream-body.streaming::after {
    animation: none;
  }
  .agentic-shell .ag-wait-txt { color: var(--ink-2); -webkit-text-fill-color: currentColor; }
}

/* UX v4: the user bubble uses the conversation width rather than shrinking twice. */
.agentic-shell .msg.user { width: 100%; max-width: 100%; flex-direction: row; justify-content: flex-end; }
.agentic-shell .msg.user .msg-content { width: 80%; max-width: 80%; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) { .agentic-shell .msg.user .msg-content { width: 92%; max-width: 92%; } }
/* Remove retired actions from previously saved conversation HTML as well. */
.message-actions [data-message-action="more"],
.message-actions [data-message-action="like"],
.message-actions [data-message-action="dislike"] { display: none; }