/* ═══════════════════════════════════════════════════════════
   LINALUX — Lina Canlı Asistan (core/lina-chat.css)
   Sayfa-bağımsız, kalıcı sohbet widget'ı. lina.md brief'i uyarınca:
   - Tüm sınıflar .lc- önekiyle, tüm değişkenler --lc- önekiyle
     .lc-root altında scoped — sayfayla çakışmaz.
   - 🔄 2026-08-07 (Faz B3) DEĞİŞTİ: palet artık index.html'in :root'unun
     SABİT KOPYASI değil. Her --lc-* token'ı sayfanın kendi değişkenini
     `var(--x, yedek)` ile okuyor. Sebep: Faz B2 ürünü kâğıt temaya
     geçirdi, sabit kopya koyu kaldı ve widget 44 sayfada koyu bir kutu
     olarak duruyordu. core/tokens.css'e hâlâ ZORUNLU bağımlılık YOK —
     yedek değerler sayesinde paletsiz bir sayfada da doğru görünür.
   ═══════════════════════════════════════════════════════════ */

.lc-root{
  /* ─── SAYFANIN PALETİNİ İZLER (tasarim-tasima.md Faz B3, 2026-08-07) ───
     Eskiden burada index.html'in :root'unun SABİT KOPYASI vardı. Faz B2
     ürünü kâğıt temaya geçirince bu kopya olduğu yerde kaldı ve widget
     44 kâğıt sayfada koyu bir kutu olarak durmaya başladı.

     Artık her token sayfanın kendi değişkenini okuyor, yedeği de yanında.
     Bu, widget'ın "sayfa-bağımsız" olma sözünü BOZMUYOR — aksine güçlendiriyor:
       · core/tokens.css yükleyen sayfa   → kâğıt palet
       · index.html (kendi :root'u, hâlâ koyu, Faz C) → koyu palet
       · hiçbir palet yoksa               → yedek değer devreye girer
     Yani widget artık hangi sayfaya konursa onun rengini alıyor. */
  --lc-bg:var(--bg,#F5F4F1); --lc-s1:var(--s1,#FBFAF8);
  --lc-s2:var(--s2,#FDFDFB); --lc-s3:var(--s3,#FFFFFF);
  --lc-b1:var(--b1,#E4E2DD); --lc-b2:var(--b2,#D6D3CD); --lc-b3:var(--b3,#C2BEB7);
  --lc-muted:var(--muted,#6E6E6C); --lc-dim:var(--dim,#45443F);
  --lc-text:var(--text,#0A0A0A);
  --lc-ak:var(--ak,#0A0A0A); --lc-ak2:var(--ak2,#4A4A48);
  --lc-akd:var(--akd,rgba(10,10,10,.07));
  /* Font da sayfayı izliyor — B2'de aileler değişti, widget geride kalmasın. */
  --lc-font:var(--serif,'Instrument Serif',Georgia,serif);
  --lc-z:9990; /* sayfadaki funnel/CTA/toast'ların üstüne binmeyecek şekilde seçildi;
                  gerekirse entegrasyonda tek noktadan ayarlanır */

  position:fixed; right:18px; bottom:18px; z-index:var(--lc-z);
  font-family:var(--lc-font); color:var(--lc-text);
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  -webkit-font-smoothing:antialiased;
}
.lc-root *,.lc-root *::before,.lc-root *::after{box-sizing:border-box;margin:0;padding:0}
.lc-root button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── Kapalı hal: sohbet balonu ─────────────────────────────── */
.lc-fab{
  width:56px; height:56px; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 25%, var(--lc-b3), var(--lc-s2) 70%);
  border:1px solid var(--lc-b3);
  box-shadow:0 4px 24px color-mix(in srgb, var(--golge) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--lc-ak) 15%, transparent), 0 0 18px color-mix(in srgb, var(--lc-ak) 10%, transparent);
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:transform .18s ease, box-shadow .25s ease;
}
.lc-fab:hover{transform:translateY(-2px); box-shadow:0 8px 28px color-mix(in srgb, var(--golge) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--lc-ak) 30%, transparent), 0 0 26px color-mix(in srgb, var(--lc-ak) 18%, transparent)}
.lc-fab:focus-visible{outline:2px solid var(--lc-ak2); outline-offset:3px}
.lc-fab-l{
  font-size:27px; line-height:1; font-style:italic; font-weight:600;
  background:linear-gradient(160deg, var(--lc-ak2), var(--lc-ak));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translateY(-1px);
}
.lc-fab-moon{
  position:absolute; top:6px; right:8px; font-size:10px; opacity:.85;
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--lc-ak2) 50%, transparent));
}
/* nefes alan altın hâle — reduced-motion'da tamamen kapanır */
.lc-fab::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--lc-ak) 28%, transparent); pointer-events:none;
  animation:lc-breathe 3.6s ease-in-out infinite;
}
@keyframes lc-breathe{
  0%,100%{transform:scale(1); opacity:.55}
  50%{transform:scale(1.1); opacity:0}
}
/* 🔴 User-tests.md G11 — modül DEAKTİF EDİLDİ: kendiliğinden beliren balon
   artık hiçbir sayfada görünmesin. Element/JS SİLİNMEDİ (site kuralı) —
   yalnızca gizlendi. Panel makinesi (openPanel/.lc-root[data-open]) hâlâ
   tam çalışıyor: core/bottom-nav.js'in "Lina" sekmesi, ana sayfanın
   .hero-lina kartı ve Aşk'ın İlişki Sohbeti hâlâ window.LinaChat.open()/
   openIliski() ile paneli AÇABİLİYOR — yalnızca kendiliğinden beliren bu
   balon (zaten bottom-nav'daki sekmeyle yinelenen bir ikinci giriş
   noktasıydı) kayboldu. Geri açmak: bu satırı kaldır. */
.lc-fab{display:none}
.lc-root[data-open="true"] .lc-fab{display:none}

/* ── Açık hal: panel ───────────────────────────────────────── */
.lc-panel{
  width:min(360px, calc(100vw - 24px));
  height:min(520px, calc(100dvh - 96px));
  display:none; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg, var(--lc-s2), var(--lc-s1) 55%, var(--lc-bg));
  border:1px solid var(--lc-b2); border-radius:18px;
  box-shadow:0 18px 60px color-mix(in srgb, var(--golge) 65%, transparent), 0 0 0 1px color-mix(in srgb, var(--lc-ak) 8%, transparent);
}
.lc-root[data-open="true"] .lc-panel{display:flex; animation:lc-in .22s ease}
@keyframes lc-in{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}

/* mobilde tam ekrana yakın */
@media (max-width:520px){
  .lc-root{right:10px; bottom:10px; left:10px; align-items:stretch}
  .lc-panel{width:100%; height:min(78dvh, 560px)}
}

/* ── Başlık ────────────────────────────────────────────────── */
.lc-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--lc-b1);
  background:linear-gradient(180deg, color-mix(in srgb, var(--lc-b3) 35%, transparent), transparent);
}
.lc-av{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 25%, var(--lc-b3), var(--lc-s3));
  border:1px solid color-mix(in srgb, var(--lc-ak) 35%, transparent);
  font-style:italic; font-weight:600; font-size:18px; color:var(--lc-ak2);
}
.lc-head-t{display:flex; flex-direction:column; min-width:0}
.lc-name{font-size:17px; font-weight:600; letter-spacing:.02em}
.lc-sub{font-size:12px; color:var(--lc-muted); font-style:italic}
/* Geçmişi sil — YALNIZCA ilişki modunda görünür (love.md §6.4 / A4).
   .lc-close'un solunda durur; margin-left:auto ONDA olduğu için burada
   tekrar edilmez, aksi hâlde ikisi arasında boşluk açılırdı. */
.lc-sil{
  margin-left:auto; width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--lc-muted); font-size:14px; line-height:1; cursor:pointer;
  background:none; border:0;
  transition:background .15s ease, color .15s ease;
}
.lc-sil:hover:not(:disabled){background:var(--lc-b1); color:var(--lc-text)}
.lc-sil:focus-visible{outline:2px solid var(--lc-ak2); outline-offset:2px}
.lc-sil:disabled{opacity:.5; cursor:default}
.lc-sil[hidden]{display:none}
/* Silme butonu varken .lc-close artık ilk "auto" öğe olmamalı */
.lc-sil:not([hidden]) ~ .lc-close{margin-left:0}

/* Başlangıç kartları — boş sohbet kutusu hedef kitleyi dondurur (§6.2) */
.lc-basla{display:flex; flex-direction:column; gap:8px; padding:6px 2px 2px}
.lc-basla-k{
  text-align:left; padding:11px 13px; border-radius:12px;
  border:1px solid var(--lc-b2); background:var(--lc-s1);
  color:var(--lc-text); font:inherit; font-size:13.5px; line-height:1.45;
  cursor:pointer; transition:border-color .18s ease, background .18s ease;
}
.lc-basla-k:hover{border-color:var(--lc-ak2); background:var(--lc-b1)}
.lc-basla-alt{font-size:12px; color:var(--lc-muted); text-align:center; margin-top:4px}

.lc-close{
  margin-left:auto; width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--lc-dim); font-size:18px; line-height:1;
  transition:background .15s ease, color .15s ease;
}
.lc-close:hover{background:var(--lc-b1); color:var(--lc-text)}
.lc-close:focus-visible{outline:2px solid var(--lc-ak2); outline-offset:2px}

/* ── Mesaj akışı ───────────────────────────────────────────── */
.lc-body{
  flex:1; overflow-y:auto; padding:14px 12px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:var(--lc-b2) transparent;
}
.lc-msg{
  max-width:86%; padding:9px 13px; border-radius:14px;
  font-size:15.5px; line-height:1.45; white-space:pre-wrap; word-wrap:break-word;
}
.lc-msg--lina{
  align-self:flex-start; color:var(--lc-text);
  background:var(--lc-s3); border:1px solid var(--lc-b1);
  border-bottom-left-radius:5px;
}
.lc-msg--user{
  align-self:flex-end; color:var(--lc-text);
  background:linear-gradient(180deg, var(--lc-b2), var(--lc-b1));
  border:1px solid var(--lc-b2); border-bottom-right-radius:5px;
}
.lc-msg--sys{ /* giriş-gerekli, hata, sınır mesajları — Lina balonuyla aynı ama vurgulu kenar */
  align-self:flex-start; color:var(--lc-dim);
  background:var(--lc-akd); border:1px solid color-mix(in srgb, var(--lc-ak) 30%, transparent);
  border-bottom-left-radius:5px; font-style:italic;
}
.lc-msg--sys a{color:var(--lc-ak2); text-decoration:underline; text-underline-offset:2px}

/* yazıyor göstergesi */
.lc-typing{align-self:flex-start; display:flex; gap:4px; padding:12px 14px;
  background:var(--lc-s3); border:1px solid var(--lc-b1); border-radius:14px; border-bottom-left-radius:5px}
.lc-typing i{width:6px; height:6px; border-radius:50%; background:var(--lc-muted);
  animation:lc-dot 1.1s ease-in-out infinite}
.lc-typing i:nth-child(2){animation-delay:.15s}
.lc-typing i:nth-child(3){animation-delay:.3s}
@keyframes lc-dot{0%,100%{opacity:.3; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)}}

/* ── Öneri kartı ───────────────────────────────────────────── */
.lc-suggestion{
  align-self:flex-start; max-width:86%;
  display:flex; align-items:center; gap:9px;
  padding:9px 13px; border-radius:12px; text-decoration:none;
  background:var(--lc-akd); border:1px solid color-mix(in srgb, var(--lc-ak) 35%, transparent);
  color:var(--lc-ak2); font-size:14.5px;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.lc-suggestion:hover{background:color-mix(in srgb, var(--lc-ak) 20%, transparent); border-color:var(--lc-ak); transform:translateX(2px)}
.lc-suggestion:focus-visible{outline:2px solid var(--lc-ak2); outline-offset:2px}
.lc-suggestion-arrow{font-style:normal; flex:none}
/* Katman rozeti — .lc-suggestion-pro eski addır, 13.09.2026'ya kadar tek
   rozet oydu; Plus eklenince .lc-suggestion-tier ortak ada geçildi. Eski ad
   seçicide BIRAKILDI: önbellekten eski lina-chat.js alan tarayıcıda rozet
   stilsiz kalmasın (core/ immutable servis ediliyor, bkz kural 21). */
.lc-suggestion-pro,
.lc-suggestion-tier{
  flex:none; margin-left:2px; padding:1px 7px; border-radius:99px;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  background:color-mix(in srgb, var(--lc-ak) 18%, transparent); border:1px solid color-mix(in srgb, var(--lc-ak) 40%, transparent); color:var(--lc-ak2);
}
/* Plus, Pro'dan bir tık geride durur — ikisi aynı ağırlıkta olursa rozet
   "katman" bilgisi vermez, sadece gürültü olur. */
.lc-suggestion-tier--plus{
  background:transparent; border-color:color-mix(in srgb, var(--lc-ak) 26%, transparent); color:var(--lc-dim);
}

/* ── Giriş alanı ───────────────────────────────────────────── */
.lc-foot{
  display:flex; align-items:flex-end; gap:8px;
  padding:10px 12px; border-top:1px solid var(--lc-b1);
  background:linear-gradient(0deg, color-mix(in srgb, var(--lc-b3) 22%, transparent), transparent);
}
.lc-input{
  flex:1; resize:none; max-height:96px; min-height:40px;
  padding:9px 12px; border-radius:12px;
  background:var(--lc-s1); border:1px solid var(--lc-b1);
  color:var(--lc-text); font-family:inherit; font-size:15.5px; line-height:1.4;
  transition:border-color .15s ease;
}
.lc-input::placeholder{color:var(--lc-muted); font-style:italic}
.lc-input:focus{outline:none; border-color:var(--lc-b3)}
.lc-input:disabled{opacity:.5}
.lc-send{
  flex:none; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--lc-ak2), var(--lc-ak));
  color:var(--lc-ak); transition:filter .15s ease, transform .15s ease;
}
.lc-send:hover:not(:disabled){filter:brightness(1.07); transform:translateY(-1px)}
.lc-send:disabled{opacity:.45; cursor:default}
.lc-send:focus-visible{outline:2px solid var(--lc-ak2); outline-offset:2px}
.lc-send svg{width:18px; height:18px; display:block}

/* ── Hareket azaltma ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .lc-root *,.lc-root *::before,.lc-root *::after{
    animation:none !important; transition:none !important;
  }
}