/* ============================================================
   JCI TARTUS — CHATBOT WIDGET
   Uses the brand tokens already defined in shared.css
   (--navy, --cyan, --teal, --g-accent, --font-head …).

   Direction is handled with CSS logical properties, so the whole
   widget mirrors itself when i18n.js sets dir="rtl" — no separate
   RTL ruleset to keep in sync.
   ============================================================ */

/* ── Launcher ─────────────────────────────────────────────── */
.chat-fab {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  /* Above .navbar (1000) so the full-screen mobile panel covers it, but below
     the mobile nav panel (2000), .modal-overlay (3000) and .skip-link (9999)
     from shared.css — those must still be able to cover the chat. */
  z-index: 1100;

  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  background: var(--g-accent);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;

  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md), var(--glow-cyan);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.chat-fab:hover  { transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-lg), var(--glow-cyan); }
.chat-fab:active { transform: translateY(-1px) scale(1); }
.chat-fab:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* Swap icon when the panel is open */
.chat-fab .chat-fab-close { display: none; }
.chat-fab[aria-expanded="true"] .chat-fab-open  { display: none; }
.chat-fab[aria-expanded="true"] .chat-fab-close { display: block; }

/* Attention dot on first load */
.chat-fab::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  border: 2px solid var(--navy);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.chat-fab.has-hint::after { opacity: 1; transform: scale(1); }

/* ── Panel ────────────────────────────────────────────────── */
.chat-panel {
  position: fixed;
  inset-block-end: 96px;
  inset-inline-end: 24px;
  z-index: 1101;

  width: min(400px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: var(--g-page);
  border: 1px solid rgba(0, 194, 255, 0.22);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);

  /* Hidden state — kept in the DOM so the transition can run */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.97);
  transition: opacity var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              visibility 0s linear var(--t-mid);
}
.chat-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              visibility 0s;
}

/* ── Header ───────────────────────────────────────────────── */
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--g-blue);
  border-block-end: 1px solid rgba(0, 194, 255, 0.20);
  flex-shrink: 0;
}
.chat-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--g-accent);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.chat-header-text { flex: 1; min-width: 0; }
.chat-header-text h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
}
.chat-header-text p {
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--gray-light);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}
.chat-close {
  background: none;
  border: none;
  color: var(--gray-light);
  cursor: pointer;
  font-size: 1.15rem;
  padding: 6px;
  border-radius: var(--r-sm);
  line-height: 1;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chat-close:hover { color: var(--white); background: rgba(255, 255, 255, 0.1); }
.chat-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── Message log ──────────────────────────────────────────── */
.chat-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-dark) transparent;
}
.chat-log::-webkit-scrollbar       { width: 6px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--gray-dark); border-radius: 3px; }

.chat-msg {
  max-width: 85%;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: chat-in var(--t-mid) var(--ease);
}
@keyframes chat-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Visitor — accent gradient, hugs the inline-end edge */
.chat-msg.user {
  align-self: flex-end;
  background: var(--g-accent);
  color: var(--navy);
  font-weight: 500;
  border-end-end-radius: 5px;
}
/* Assistant — card surface, hugs the inline-start edge */
.chat-msg.bot {
  align-self: flex-start;
  background: rgba(18, 85, 204, 0.16);
  border: 1px solid rgba(0, 194, 255, 0.18);
  color: var(--off-white);
  border-end-start-radius: 5px;
}
.chat-msg.error {
  align-self: flex-start;
  background: rgba(255, 90, 90, 0.12);
  border: 1px solid rgba(255, 90, 90, 0.35);
  color: #FFC9C9;
}

/* Each bubble reads in its own script's direction, regardless of page dir —
   an Arabic answer stays RTL on the English site and vice versa. */
.chat-msg[dir="rtl"] { font-family: "Cairo", sans-serif; }

/* ── Typing indicator ─────────────────────────────────────── */
.chat-typing { display: flex; gap: 5px; align-items: center; padding: 14px; }
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  animation: chat-bounce 1.3s infinite var(--ease);
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* ── Suggested questions ──────────────────────────────────── */
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 14px;
  flex-shrink: 0;
}
.chat-chip {
  background: rgba(0, 194, 255, 0.10);
  border: 1px solid rgba(0, 194, 255, 0.30);
  color: var(--off-white);
  border-radius: 100px;
  padding: 7px 13px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chat-chip:hover { background: rgba(0, 194, 255, 0.22); border-color: var(--cyan); }
.chat-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── Composer ─────────────────────────────────────────────── */
.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 13px 16px;
  border-block-start: 1px solid rgba(0, 194, 255, 0.16);
  background: rgba(8, 11, 31, 0.55);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  resize: none;
  max-height: 110px;
  padding: 10px 13px;
  border-radius: var(--r-md);
  border: 1px solid rgba(184, 198, 224, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease);
}
.chat-input::placeholder { color: var(--gray); }
.chat-input:focus { outline: none; border-color: var(--cyan); }

.chat-send {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--g-accent);
  color: var(--navy);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.chat-send:hover:not(:disabled) { transform: scale(1.08); }
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-send:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* The paper-plane points at the text direction */
html[dir="rtl"] .chat-send i { transform: scaleX(-1); }

/* ── Small screens ────────────────────────────────────────── */
@media (max-width: 480px) {
  .chat-panel {
    inset-block-end: 0;
    inset-inline: 0;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border-inline: none;
  }
  .chat-fab { inset-block-end: 18px; inset-inline-end: 18px; width: 54px; height: 54px; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chat-panel, .chat-fab, .chat-msg, .chat-send, .chat-fab::after { transition: none; animation: none; }
  .chat-typing span { animation: none; opacity: 0.7; }
}