/* Maskot asistan arayüzü.

   Ayrı dosya bilinçli: asistan kapalıyken (OPENAI_API_KEY yok) base.html bu
   dosyayı hiç bağlamıyor, ziyaretçi kullanmayacağı stili indirmiyor.

   Renk, boşluk, yarıçap ve süre tokens.css'ten geliyor; burada ham hex ya da
   ham ms yok — marka tek kaynaktan yönetiliyor. */

.sey { position: fixed; right: var(--sy-space-4); bottom: var(--sy-space-4); z-index: 60; }

.sey__fab {
  display: inline-flex; align-items: center; gap: var(--sy-space-2);
  min-height: var(--sy-tap-min); padding: 0 var(--sy-space-4) 0 var(--sy-space-3);
  border: none; border-radius: var(--sy-radius-pill); cursor: pointer;
  background: var(--sy-navy); color: var(--sy-dark-text);
  font: 600 .88rem/1 var(--sy-font-ui);
  box-shadow: var(--sy-elev-2);
  transition: background var(--sy-dur-fast) var(--sy-ease),
              transform var(--sy-dur-tap) var(--sy-ease);
}
.sey__fab:hover { background: var(--sy-navy-hover); }
.sey__fab:active { transform: scale(.96); }
.sey__fab:focus-visible { outline: 2px solid var(--sy-mint); outline-offset: 3px; }

.sey__panel {
  position: absolute; right: 0; bottom: calc(var(--sy-tap-min) + var(--sy-space-3));
  width: min(378px, calc(100vw - var(--sy-space-8)));
  height: min(540px, 72vh);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sy-white); color: var(--sy-charcoal);
  border: 1px solid var(--sy-border); border-radius: var(--sy-radius-lg);
  box-shadow: var(--sy-elev-3);
}
.sey__panel[hidden] { display: none; }

/* scale(.96) — scale(0) değil. Sıfırdan büyüyen panel patlıyormuş gibi
   duruyor; neredeyse tam boyuttan gelen panel yerine oturuyor gibi. */
.sey__panel.is-opening { animation: sey-in var(--sy-dur) var(--sy-ease); }
@keyframes sey-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.sey__top {
  display: flex; align-items: center; gap: var(--sy-space-3);
  padding: var(--sy-space-3) var(--sy-space-4);
  border-bottom: 1px solid var(--sy-border);
}
.sey__avatar {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: var(--sy-radius-sm);
  background: var(--sy-border-soft);
}
.sey__who { display: grid; line-height: 1.3; }
.sey__who strong { font-size: .95rem; }
.sey__who small { font-size: .74rem; color: var(--sy-muted); }
.sey__close {
  margin-left: auto; display: grid; place-items: center;
  width: var(--sy-tap-min); height: var(--sy-tap-min);
  border: none; background: none; color: var(--sy-slate);
  border-radius: var(--sy-radius-sm); cursor: pointer;
  transition: background var(--sy-dur-fast) var(--sy-ease),
              transform var(--sy-dur-tap) var(--sy-ease);
}
.sey__close:hover { background: var(--sy-border-soft); }
.sey__close:active { transform: scale(.94); }

.sey__log {
  flex: 1; overflow-y: auto; padding: var(--sy-space-4);
  display: flex; flex-direction: column; gap: var(--sy-space-3);
  overscroll-behavior: contain;
}
.sey__msg {
  max-width: 86%; padding: 9px 13px; font-size: .875rem; line-height: 1.55;
  border-radius: var(--sy-radius-md); white-space: pre-wrap; overflow-wrap: anywhere;
}
.sey__msg--bot { background: var(--sy-border-soft); border-bottom-left-radius: 5px;
                 align-self: flex-start; }
.sey__msg--me  { background: var(--sy-navy); color: var(--sy-dark-text);
                 border-bottom-right-radius: 5px; align-self: flex-end; }
.sey__msg--err { background: var(--sy-error-tint); color: var(--sy-error-ink);
                 align-self: flex-start; }

.sey__turn { display: flex; flex-direction: column; gap: 5px;
             align-items: flex-start; max-width: 92%; }
.sey__meta { display: flex; align-items: center; gap: var(--sy-space-2); padding-left: 3px; }
.sey__src { font: 500 .68rem/1.3 var(--sy-font-data); color: var(--sy-muted); }
.sey__vote {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--sy-border); border-radius: var(--sy-radius-xs);
  background: var(--sy-white); color: var(--sy-slate); cursor: pointer;
  transition: border-color var(--sy-dur-fast) var(--sy-ease),
              color var(--sy-dur-fast) var(--sy-ease),
              transform var(--sy-dur-tap) var(--sy-ease);
}
.sey__vote:hover { border-color: var(--sy-ocean); color: var(--sy-ocean); }
.sey__vote:active { transform: scale(.92); }
.sey__vote[aria-pressed="true"] {
  border-color: var(--sy-ocean); color: var(--sy-ocean); background: var(--sy-border-soft);
}
.sey__voted { font-size: .7rem; color: var(--sy-muted); }

.sey__typing {
  display: inline-flex; gap: 4px; padding: 13px; align-self: flex-start;
  background: var(--sy-border-soft); border-radius: var(--sy-radius-md);
}
.sey__typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sy-handle); animation: sey-bounce 1s infinite;
}
.sey__typing i:nth-child(2) { animation-delay: .15s; }
.sey__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sey-bounce {
  0%, 100% { opacity: .35; transform: none; }
  50%      { opacity: 1; transform: translateY(-3px); }
}

.sey__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 var(--sy-space-4) var(--sy-space-3);
}
.sey__chips[hidden] { display: none; }
.sey__chip {
  padding: 9px 13px; min-height: 36px;
  font: 500 .78rem/1 var(--sy-font-ui); text-align: left;
  border: 1px solid var(--sy-border); border-radius: var(--sy-radius-pill);
  background: var(--sy-white); color: var(--sy-body); cursor: pointer;
  transition: border-color var(--sy-dur-fast) var(--sy-ease),
              color var(--sy-dur-fast) var(--sy-ease),
              transform var(--sy-dur-tap) var(--sy-ease);
}
.sey__chip:hover { border-color: var(--sy-ocean); color: var(--sy-ocean); }
.sey__chip:active { transform: scale(.97); }

.sey__form {
  display: flex; gap: var(--sy-space-2);
  padding: var(--sy-space-3) var(--sy-space-4); border-top: 1px solid var(--sy-border);
}
.sey__form input {
  flex: 1; min-height: var(--sy-tap-min); padding: 0 var(--sy-space-4);
  font: inherit; font-size: .875rem; color: var(--sy-charcoal);
  background: var(--sy-white); outline: none;
  border: 1px solid var(--sy-border); border-radius: var(--sy-radius-pill);
  transition: border-color var(--sy-dur-fast) var(--sy-ease);
}
.sey__form input:focus { border-color: var(--sy-ocean); box-shadow: 0 0 0 3px var(--sy-focus-ring); }
.sey__form button {
  flex: none; display: grid; place-items: center;
  width: var(--sy-tap-min); height: var(--sy-tap-min);
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--sy-ocean); color: var(--sy-white);
  transition: background var(--sy-dur-fast) var(--sy-ease),
              transform var(--sy-dur-tap) var(--sy-ease);
}
.sey__form button:hover { background: var(--sy-ocean-hover); }
.sey__form button:active { transform: scale(.94); }
.sey__form button:disabled { background: var(--sy-handle); cursor: not-allowed; }

.sey__disclaimer {
  margin: 0; padding: 0 var(--sy-space-4) var(--sy-space-3);
  font-size: .68rem; line-height: 1.45; color: var(--sy-muted);
}

/* Mobil: panel tam genişlik. Balon düğme köşede kalır, panel kenarlara yayılır. */
@media (max-width: 560px) {
  .sey { right: var(--sy-space-3); bottom: var(--sy-space-3); left: var(--sy-space-3); }
  .sey__fab {
    position: absolute; right: 0; bottom: 0;
    width: var(--sy-tap-min); padding: 0; justify-content: center;
  }
  .sey__fab-text { display: none; }
  .sey__panel { left: 0; right: 0; width: auto; height: min(560px, 76vh); }
}

/* Ürün sayfasındaki mobil satın alma çubuğu balon düğmeyi örtüyordu.
   Gövdeye sınıf basmak yerine :has() — styles.css'teki
   `.plan-section:has(.buy-bar)` ile aynı desen, ek JS gerekmiyor. */
body:has(.buy-bar) .sey { bottom: calc(var(--sy-space-3) + 84px); }

@media (prefers-reduced-motion: reduce) {
  .sey__typing i { animation: none; }
  .sey__panel.is-opening { animation: none; }
  .sey__fab:active, .sey__close:active, .sey__vote:active,
  .sey__chip:active, .sey__form button:active { transform: none; }
}