/*
 * DESTEK BALONU STİLLERİ - Tailwind YOK, bilerek.
 *
 * Paket iki uygulamada kullanılıyor (`apps/landing` ve `apps/web`) ve ikisinin
 * tasarım token'ları farklı isimlerde. Tailwind sınıfı yazsaydım her iki
 * uygulamanın da bu paketin kaynağını taraması (`@source`) gerekirdi; biri
 * unutulduğunda balon STİLSİZ çıkardı ve bu ancak üretimde fark edilirdi.
 *
 * Kendi kapsanmış CSS'i var; temaya açılan tek yüzey aşağıdaki değişkenler.
 * Barındıran uygulama `.og-sw` üzerinde bunları ezebilir.
 *
 * MANTIKSAL ÖZELLİKLER: `inset-inline-end`, `padding-inline` - balon Arapça ve
 * Farsçada kendiliğinden sola geçiyor, ayrı bir RTL kuralı gerekmiyor.
 */

.og-sw {
  --sw-accent: #0ea5e9;
  --sw-accent-ink: #ffffff;
  --sw-panel: #ffffff;
  --sw-panel-soft: #f4f6f9;
  --sw-ink: #0f172a;
  --sw-ink-soft: #475569;
  --sw-ink-faint: #94a3b8;
  --sw-line: #dbe2ea;
  --sw-head: #0f172a;
  --sw-online: #22c55e;
  --sw-radius: 14px;

  position: fixed;
  inset-block-end: 0;
  inset-inline-end: 1rem;
  z-index: 95;
  font-family: inherit;
}

@media print {
  .og-sw { display: none; }
}

/* ── Panel ─────────────────────────────────────────────────────────────── */

.og-sw-panel {
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-end: 4.25rem;
  display: flex;
  flex-direction: column;
  width: min(92vw, 360px);
  height: min(60svh, 480px);
  overflow: hidden;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius);
  background: var(--sw-panel);
  box-shadow: 0 20px 45px rgb(15 23 42 / 0.22);
  /* Büyüme köşesi butona bakar; RTL'de sol alta döner. */
  transform-origin: bottom var(--sw-origin-inline, right);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
  opacity: 0;
  transform: translateY(1.5rem) scale(0.9);
}
.og-sw[dir="rtl"] .og-sw-panel,
[dir="rtl"] .og-sw .og-sw-panel { --sw-origin-inline: left; }

.og-sw-panel[data-open="true"] {
  opacity: 1;
  transform: none;
  transition-duration: 400ms;
}

/*
 * Hareketi azaltmak isteyen kullanıcıda geçiş YOK - panel anında görünür.
 * `opacity: 0` ile başlayan bir öğeyi geçişsiz bırakmak onu görünmez
 * bırakırdı; bu yüzden süre sıfırlanıyor, kural kaldırılmıyor.
 */
@media (prefers-reduced-motion: reduce) {
  .og-sw-panel { transition-duration: 1ms; }
}

.og-sw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--sw-head);
  color: #fff;
}
.og-sw-head-text { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.og-sw-dot {
  width: 0.55rem; height: 0.55rem; flex: none;
  border-radius: 50%;
  background: var(--sw-online);
  box-shadow: 0 0 6px var(--sw-online);
}
.og-sw-title { font-size: 14px; font-weight: 600; line-height: 1.2; }
.og-sw-sub { font-size: 11px; opacity: 0.72; line-height: 1.3; }

.og-sw-x {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; flex: none;
  border: 0; border-radius: 50%;
  background: transparent; color: rgb(255 255 255 / 0.8);
  cursor: pointer; font-size: 15px; line-height: 1;
}
.og-sw-x:hover { background: rgb(255 255 255 / 0.12); }

.og-sw-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--sw-panel-soft);
}

.og-sw-row { display: flex; }
.og-sw-row[data-me="true"] { justify-content: flex-end; }

/*
 * GENİŞLİK SINIRI SARMALAYICIDA - balonun kendisinde DEĞİL.
 *
 * Önce `.og-sw-bubble { max-width: 85% }` yazılıydı. Yüzde, genişliği
 * İÇERİĞİNE bağlı bir kaba göre çözülmeye çalışılıyordu: döngüsel bir
 * kısıt. Sonucu ekranda görüldü - tek sözcüklük bir mesaj ("Peki") daracık
 * bir sütuna sıkışıp "Pe / ki" diye ikiye bölünüyordu.
 *
 * Doğrusu, sınırı satırın çocuğunda tutmak: sarmalayıcı satırın %92'sini
 * geçmiyor, balon da sarmalayıcıyı dolduruyor. Pensoft da böyle yapıyor.
 */
.og-sw-mesaj { max-width: 92%; min-width: 0; }

.og-sw-bubble {
  max-width: 100%;
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  /* Ziyaretçi metni HAM geliyor; satır sonları korunur, uzun kelime kırılır. */
  white-space: pre-wrap;
  /*
   * `anywhere` DEĞİL, `break-word`.
   *
   * İkisi de uzun bir bağlantıyı kırıyor; farkları şu: `anywhere` öğenin
   * min-content genişliğini TEK HARFE indiriyor ve esnek bir satırda
   * balonun o genişliğe kadar büzülmesine izin veriyor. `break-word` ise
   * içsel ölçüye dokunmuyor - balon metninin gerektirdiği kadar geniş
   * kalıyor, yalnız gerçekten taşan bir sözcüğü kırıyor.
   */
  overflow-wrap: break-word;
}
.og-sw-bubble[data-me="true"] {
  background: var(--sw-head);
  color: #fff;
  border-end-end-radius: 4px;
}
/*
 * KARŞILAMA ve sistem notu TAM GENİŞLİK - mesaj değil, panelin kendi metni.
 * Bir tarafa yaslanmasının anlamı yok; pensoft da böyle yapıyor.
 */
.og-sw-bubble[data-welcome="true"] { max-width: 100%; }

.og-sw-bubble[data-me="false"] {
  background: var(--sw-panel);
  color: var(--sw-ink);
  border-start-start-radius: 4px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.og-sw-time { margin-block-start: 0.15rem; font-size: 10px; color: var(--sw-ink-faint); }
.og-sw-note { padding-block: 0.25rem; text-align: center; font-size: 11px; color: var(--sw-ink-soft); }

.og-sw-error {
  padding: 0.35rem 0.75rem;
  border-block-start: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  font-size: 11px;
}

.og-sw-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.5rem;
  border-block-start: 1px solid var(--sw-line);
  background: var(--sw-panel);
}
.og-sw-input {
  flex: 1;
  min-height: 40px;
  max-height: 96px;
  resize: none;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--sw-line);
  border-radius: 12px;
  background: var(--sw-panel);
  color: var(--sw-ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.og-sw-input:focus { outline: 2px solid var(--sw-accent); outline-offset: 1px; border-color: transparent; }

.og-sw-send {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border: 0; border-radius: 12px;
  background: var(--sw-accent); color: var(--sw-accent-ink);
  cursor: pointer;
}
.og-sw-send:disabled { opacity: 0.4; cursor: default; }
/* Gönder oku RTL'de ters yöne baksın - ikon tek, yönü CSS'ten. */
[dir="rtl"] .og-sw-send svg { transform: scaleX(-1); }

/* ── Yüzen buton ───────────────────────────────────────────────────────── */

.og-sw-fab {
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-end: 1rem;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border: 0; border-radius: 50%;
  background: var(--sw-accent); color: var(--sw-accent-ink);
  box-shadow: 0 12px 28px rgb(14 165 233 / 0.35);
  cursor: pointer;
  transition: transform 180ms ease-out, width 180ms ease-out, height 180ms ease-out;
}
.og-sw-fab:hover { transform: scale(1.06); }
.og-sw-fab:focus-visible { outline: 2px solid var(--sw-ink); outline-offset: 3px; }
/* Panel açıkken küçülür: kapatma başlıktaki ✕'te, buton gönderme işini alır. */
.og-sw-fab[data-open="true"] { width: 2.5rem; height: 2.5rem; }
.og-sw-fab:disabled { opacity: 0.5; cursor: default; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .og-sw-fab { transition: none; }
  .og-sw-fab:hover { transform: none; }
}

.og-sw-badge {
  position: absolute;
  inset-block-start: -0.25rem;
  inset-inline-end: -0.25rem;
  display: grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem;
  padding-inline: 0.25rem;
  border: 2px solid var(--sw-panel);
  border-radius: 999px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
}

.og-sw-spin {
  width: 1rem; height: 1rem;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: og-sw-spin 700ms linear infinite;
}
@keyframes og-sw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .og-sw-spin { animation-duration: 2s; }
}

/* ── Koyu tema ─────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  .og-sw:not([data-theme="light"]) {
    --sw-panel: #0f172a;
    --sw-panel-soft: #111d33;
    --sw-ink: #e2e8f0;
    --sw-ink-soft: #94a3b8;
    --sw-line: #1e293b;
    --sw-head: #020617;
  }
}
.og-sw[data-theme="dark"] {
  --sw-panel: #0f172a;
  --sw-panel-soft: #111d33;
  --sw-ink: #e2e8f0;
  --sw-ink-soft: #94a3b8;
  --sw-line: #1e293b;
  --sw-head: #020617;
}