/* ALAQAAR Assistant: floating chat button + panel (Pages/Shared/_Assistant.cshtml, wwwroot/js/assistant.js).
   The button sits at the physical bottom-RIGHT in both languages — the Call/WhatsApp pair is fixed bottom-LEFT in both
   (contact.css .floating-actions), so the two groups never meet. Navy/gold, light + night mode, no looping animation. */
.asst {
  --asst-navy: #474e56;
  --asst-navy-deep: #363b41;
  --asst-gold: #b28a50;
  --asst-gold-dark: #93703f;
  --asst-cream: #f7f0e8;
  --asst-surface: #fffaf3;
  --asst-ink: #232d36;
  --asst-muted: #5d5348;
  --asst-line: rgba(178,138,80,.45);
  font-family: inherit;
}
html[data-mode="dark"] .asst {
  --asst-cream: #313b45;
  --asst-surface: #262e36;
  --asst-ink: #efe4da;
  --asst-muted: #b9ad9f;
  --asst-line: rgba(203,168,118,.4);
}

/* ---------- floating button ---------- */
.asst__fab {
  position: fixed;
  right: 1.1rem;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
  z-index: 245;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--asst-gold);
  background: linear-gradient(180deg, #5b636d 0%, var(--asst-navy) 55%, var(--asst-navy-deep) 100%);
  color: #e8cf9f;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  cursor: pointer;
}
.asst__fab:hover { filter: brightness(1.08); }
.asst__fab:focus-visible,
.asst__close:focus-visible,
.asst__chip:focus-visible,
.asst__send:focus-visible,
.asst__link:focus-visible { outline: 2px solid var(--asst-gold); outline-offset: 3px; }
.asst__fab-icon { width: 1.45rem; height: 1.45rem; }

/* ---------- panel ---------- */
.asst__panel {
  position: fixed;
  right: 1.1rem;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5.1rem);
  z-index: 250;
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: calc(100vw - 2.2rem);
  height: min(560px, calc(100dvh - 7.5rem));
  background: var(--asst-surface);
  color: var(--asst-ink);
  border: 1px solid var(--asst-line);
  border-radius: 1.2rem;
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
  overflow: hidden;
}
.asst__panel[hidden] { display: none; }
.asst__panel:focus { outline: none; }

.asst__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem .9rem;
  background: linear-gradient(180deg, #5b636d 0%, var(--asst-navy) 60%, var(--asst-navy-deep) 100%);
  color: #fff;
  border-bottom: 1px solid var(--asst-gold);
}
.asst__logo { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fff; object-fit: cover; flex: none; }
.asst__title { flex: 1; margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: 0; color: #fff; }
.asst__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer; flex: none;
}
.asst__close:hover { background: rgba(255,255,255,.22); }
.asst__close svg { width: 1.1rem; height: 1.1rem; }

.asst__log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .9rem .85rem .4rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: var(--asst-cream);
}
.asst__msg { display: flex; flex-direction: column; gap: .35rem; max-width: 88%; }
.asst__msg--bot { align-self: flex-start; }
.asst__msg--user { align-self: flex-end; }
.asst__bubble {
  padding: .6rem .8rem;
  border-radius: 1rem;
  font-size: .95rem;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.asst__msg--bot .asst__bubble { background: var(--asst-surface); color: var(--asst-ink); border: 1px solid var(--asst-line); border-end-start-radius: .3rem; }
.asst__msg--user .asst__bubble { background: var(--asst-navy); color: #fff; border-end-end-radius: .3rem; }
html[data-mode="dark"] .asst__msg--user .asst__bubble { background: #4a5662; }

.asst__links { display: flex; flex-wrap: wrap; gap: .4rem; }
.asst__link {
  display: inline-block;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #d6b077 0%, var(--asst-gold) 60%, #9c763f 100%);
  color: #1d1710;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.asst__link:hover { filter: brightness(1.06); }

.asst__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  max-height: 7.6rem;
  overflow-y: auto;
  padding: .55rem .85rem;
  background: var(--asst-cream);
  border-top: 1px solid var(--asst-line);
}
.asst__chips:empty { display: none; }
.asst__chip {
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--asst-gold);
  background: var(--asst-surface);
  color: var(--asst-ink);
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
}
.asst__chip:hover:not(:disabled) { background: var(--asst-gold); color: #1d1710; }
.asst__chip--primary { background: var(--asst-gold); color: #1d1710; font-weight: 600; }
.asst__chip:disabled { opacity: .55; cursor: default; }

.asst__form {
  display: flex;
  gap: .5rem;
  padding: .6rem .85rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--asst-surface);
  border-top: 1px solid var(--asst-line);
}
.asst__input {
  flex: 1;
  min-width: 0;
  padding: .6rem .9rem;
  border: 1px solid var(--asst-line);
  border-radius: 999px;
  background: var(--asst-cream);
  color: var(--asst-ink);
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
}
.asst__input::placeholder { color: var(--asst-muted); }
.asst__input:focus-visible { outline: 2px solid var(--asst-gold); outline-offset: 1px; }
.asst__send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.7rem; height: 2.7rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--asst-navy); color: #e8cf9f; cursor: pointer; flex: none;
}
.asst__send:disabled { opacity: .55; cursor: default; }
.asst__send svg { width: 1.2rem; height: 1.2rem; }
[dir="rtl"] .asst__send svg { transform: scaleX(-1); }

/* A one-time soft fade only; nothing loops. */
@media (prefers-reduced-motion: no-preference) {
  .asst__panel:not([hidden]) { animation: asst-in .18s ease-out; }
}
@keyframes asst-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- phones: smaller button clear of the Call/WhatsApp pair; panel becomes a full-width bottom sheet ---------- */
@media (max-width: 600px) {
  .asst__fab { right: .8rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); width: 2.9rem; height: 2.9rem; }
  .asst__panel {
    left: 0; right: 0; bottom: 0;
    width: 100%; max-width: none;
    height: min(82dvh, 680px);
    border-radius: 1.2rem 1.2rem 0 0;
    border-inline: 0; border-bottom: 0;
  }
  .asst.is-open .asst__fab { visibility: hidden; }
  html.asst-lock { overflow: hidden; }
}