/* ==========================================================================
   Canlı destek — yapay zekâ asistanı

   Palet sitenin geri kalanıyla aynı aileden ama daha açık: beyaz panel,
   #F7F7F7 balonlar, siyah düğme ve başlık şeridi. Tek renkli aksan
   markanın bakır tonu (#B7A98C) — yalnızca odak halkasında.

   Yığın sırası: açma düğmesi rezervasyon çubuğunun (200) üstünde ama
   mobil menünün (400) altında; panel her ikisinin de üstünde (500).
   Böylece menü açıkken düğme kaybolur, panel açıkken hiçbir şey örtmez.
   ========================================================================== */
.assistant {
  --as-radius: 18px;
  --as-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.42), 0 2px 8px -2px rgba(0, 0, 0, 0.12);
  font-family: var(--font-sans);
}

/* --------------------------------------------------------------------------
   Açma düğmesi — masaüstünde sağ alt köşe
   -------------------------------------------------------------------------- */
.assistant__launcher {
  position: fixed;
  z-index: var(--z-overlay);          /* 300 */
  inset-inline-end: clamp(1rem, 2.5vw, 2rem);
  inset-block-end: clamp(1rem, 2.5vw, 2rem);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background: var(--c-black);
  color: var(--c-white);
  box-shadow: var(--as-shadow);
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-back),
    background-color var(--dur-fast) var(--ease-out);
}

.assistant__launcher:hover { transform: scale(1.06); }
.assistant__launcher:active { transform: scale(0.97); }

.assistant__launcher:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 3px;
}

.assistant__launcher .icon { width: 1.5rem; height: 1.5rem; }

/* Açıkken simge çarpıya döner */
.assistant__launcher-icon,
.assistant__launcher-close {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.assistant__launcher-close { opacity: 0; transform: rotate(-90deg); }

.assistant.is-open .assistant__launcher-icon { opacity: 0; transform: rotate(90deg); }
.assistant.is-open .assistant__launcher-close { opacity: 1; transform: none; }

/* Mobil menü açıkken düğme yolda durmasın */
body.is-locked .assistant__launcher { opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   Karşılama balonu — düğmenin solunda, bir kez
   -------------------------------------------------------------------------- */
.assistant__nudge {
  position: fixed;
  z-index: var(--z-overlay);
  inset-inline-end: clamp(1rem, 2.5vw, 2rem);
  inset-block-end: calc(clamp(1rem, 2.5vw, 2rem) + 4.25rem);
  max-width: 16.5rem;
  padding: 0.875rem 2.25rem 0.875rem 1rem;
  border-radius: 14px 14px 4px 14px;
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--as-shadow);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-normal);
  animation: assistant-nudge-in var(--dur-slow) var(--ease-out) both;
}

@keyframes assistant-nudge-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.assistant__nudge-close {
  position: absolute;
  inset-block-start: 0.375rem;
  inset-inline-end: 0.375rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  color: var(--c-gray-500);
  cursor: pointer;
}

.assistant__nudge-close:hover { color: var(--c-black); background: var(--c-gray-100); }
.assistant__nudge-close .icon { width: 0.875rem; height: 0.875rem; }

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.assistant__panel {
  position: fixed;
  z-index: var(--z-modal);            /* 500 — her şeyin üstünde */
  inset-inline-end: clamp(1rem, 2.5vw, 2rem);
  inset-block-end: calc(clamp(1rem, 2.5vw, 2rem) + 4.25rem);
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2rem));
  height: min(38rem, calc(100svh - 8rem));
  border-radius: var(--as-radius);
  background: var(--c-white);
  box-shadow: var(--as-shadow);
  overflow: hidden;
  transform-origin: bottom right;
  animation: assistant-in var(--dur-base) var(--ease-out) both;
}

.assistant__panel[hidden] { display: none; }

@keyframes assistant-in {
  from { opacity: 0; transform: translateY(1rem) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* --- Başlık ------------------------------------------------------------- */
.assistant__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
  padding: 0.875rem 1rem;
  background: var(--c-black);
  color: var(--c-white);
}

.assistant__avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  flex: none;
}

.assistant__avatar picture { display: block; }
.assistant__avatar img { display: block; width: auto; height: 1.25rem; }

.assistant__head-text { display: grid; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }

.assistant__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.assistant__subtitle {
  font-size: var(--fs-3xs);
  line-height: var(--lh-3xs);
  letter-spacing: var(--ls-normal);
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assistant__close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-inline-end: -0.25rem;
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  flex: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.assistant__close:hover { color: var(--c-white); background: rgba(255, 255, 255, 0.12); }
.assistant__close .icon { width: 1rem; height: 1rem; }

/* --- Konuşma ------------------------------------------------------------ */
.assistant__log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--c-white);
  scrollbar-width: thin;
}

.assistant__msg {
  max-width: 88%;
  padding: 0.75rem 0.9375rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: var(--ls-normal);
  animation: assistant-msg-in var(--dur-base) var(--ease-out) both;
}

@keyframes assistant-msg-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

.assistant__msg p + p { margin-top: 0.625rem; }

.assistant__msg ul {
  margin-top: 0.5rem;
  padding-inline-start: 1rem;
  list-style: disc;
}

.assistant__msg li + li { margin-top: 0.25rem; }

/* Asistan — açık gri balon, sola yaslı */
.assistant__msg--bot {
  align-self: flex-start;
  border-radius: 14px 14px 14px 4px;
  background: var(--c-mist);
  color: var(--c-ink);
}

/* Misafir — siyah balon, sağa yaslı */
.assistant__msg--me {
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  background: var(--c-black);
  color: var(--c-white);
}

/* --- Yanıt içindeki fotoğraf -------------------------------------------- */
.assistant__photo {
  display: block;
  align-self: flex-start;
  max-width: 88%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-gray-200);
  animation: assistant-msg-in var(--dur-base) var(--ease-out) both;
}

.assistant__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* --- Yanıt içindeki eylem düğmeleri ------------------------------------- */
.assistant__actions {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 92%;
  animation: assistant-msg-in var(--dur-base) var(--ease-out) both;
}

.assistant__action {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--c-black);
  border-radius: var(--radius-pill);
  background: var(--c-black);
  color: var(--c-white);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* İlkinden sonrakiler çerçeveli — bir tane ana eylem olsun */
.assistant__action + .assistant__action {
  background: transparent;
  color: var(--c-black);
}

.assistant__action + .assistant__action:hover {
  background: var(--c-black);
  color: var(--c-white);
}

.assistant__action:first-child:hover { background: var(--c-ink); border-color: var(--c-ink); }

/* --- "Yazıyor" göstergesi ----------------------------------------------- */
.assistant__typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--c-mist);
}

.assistant__typing span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--c-gray-500);
  animation: assistant-blink 1.2s infinite;
}

.assistant__typing span:nth-child(2) { animation-delay: 0.18s; }
.assistant__typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes assistant-blink {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

/* --- Hazır sorular ------------------------------------------------------- */
.assistant__suggest {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0 1rem 0.75rem;
}

.assistant__suggest[hidden] { display: none; }

.assistant__chip {
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--fs-3xs);
  line-height: var(--lh-3xs);
  letter-spacing: var(--ls-normal);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.assistant__chip:hover {
  border-color: var(--c-black);
  background: var(--c-gray-100);
}

/* --- Yazma alanı --------------------------------------------------------- */
.assistant__form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line-soft);
  background: var(--c-white);
}

.assistant__input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 6rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
}

.assistant__input::placeholder { color: var(--c-gray-500); }

.assistant__input:focus-visible {
  outline: 0;
  border-color: var(--c-black);
  box-shadow: 0 0 0 3px rgba(183, 169, 140, 0.28);
}

.assistant__send {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  flex: none;
  border-radius: 12px;
  background: var(--c-black);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.assistant__send:hover:not(:disabled) { background: var(--c-ink); }
.assistant__send:disabled { opacity: 0.35; cursor: default; }
.assistant__send .icon { width: 1.125rem; height: 1.125rem; }

.assistant__note {
  flex: none;
  padding: 0 1rem 0.75rem;
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: var(--ls-normal);
  color: var(--c-gray-500);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Dar ekran — panel alttan açılan bir sayfa olur, düğme header'a taşınır
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  /* Sağ alttaki düğme ve karşılama balonu gizli: dar ekranda asistanı
     header'daki simge açar, alt köşe rezervasyon çubuğunun. */
  .assistant__launcher,
  .assistant__nudge { display: none; }

  .assistant__panel {
    inset-inline: 0;
    inset-block-end: 0;
    width: auto;
    height: min(88svh, calc(100svh - 3.5rem));
    border-radius: var(--as-radius) var(--as-radius) 0 0;
    transform-origin: bottom center;
  }

  @keyframes assistant-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
  }

  .assistant__msg,
  .assistant__photo { max-width: 84%; }
}

/* Panel açıkken arkadaki sayfa karartılır (yalnızca dar ekranda) */
.assistant__scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  background: rgba(0, 0, 0, 0.45);
  animation: assistant-scrim-in var(--dur-base) var(--ease-out) both;
}

@keyframes assistant-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (min-width: 900px) {
  .assistant__scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .assistant__panel,
  .assistant__msg,
  .assistant__photo,
  .assistant__actions,
  .assistant__nudge,
  .assistant__scrim { animation: none; }

  .assistant__typing span { animation: none; opacity: 0.6; }
}