/* iQ website - chat window (public site).
   Built by wwwroot/js/chat.js. The colour and the side come from Admin > إعدادات الشات.
   Logical properties are used so the same file serves Arabic (RTL) and English / Norwegian (LTR).
   Rule of the design: one filled (main) button per screen; every other button has an outline only. */

.iqc {
  --iqc-color: #2447f9;
  --iqc-on: #ffffff;          /* text colour on top of --iqc-color, chosen by the script */
  --iqc-ink: #0e1a3a;
  --iqc-soft: #55607f;
  --iqc-line: #e2e6f1;
  --iqc-paper: #f4f6fc;       /* background of the window body */
  --iqc-surface: #ffffff;     /* cards, inputs, bottom bar */
  --iqc-wa: #128c5e;
  font-family: "Readex Pro", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--iqc-ink);
}
.iqc *, .iqc *::before, .iqc *::after { box-sizing: border-box; }
.iqc button, .iqc input, .iqc textarea { font: inherit; }
.iqc input, .iqc textarea { color: var(--iqc-ink); }
.iqc [hidden] { display: none !important; }
.iqc :focus-visible { outline: 3px solid #ffb020; outline-offset: 2px; }
.iqc h2, .iqc h3, .iqc p { margin: 0; font-family: inherit; color: inherit; line-height: 1.5; }

.iqc-ico { display: inline-flex; flex: none; }
.iqc-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- floating button: icon + a short invitation ---------- */
.iqc-launcher {
  position: fixed; bottom: 18px; z-index: 60;
  min-width: 60px; height: 60px; padding: 0 18px; border: 0; border-radius: 30px;
  background: var(--iqc-color); color: var(--iqc-on); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 15.5px;
  box-shadow: 0 16px 30px -12px rgba(14, 26, 58, .55);
}
.iqc-launcher:hover { filter: brightness(.95); }
.iqc-launcher .iqc-ico svg { width: 26px; height: 26px; }
.iqc-launcher .iqc-ico-close { display: none; }
.iqc-launcher.iqc-has-label { padding-inline: 20px 22px; }
.iqc-open .iqc-launcher { padding: 0; width: 60px; }
.iqc-open .iqc-launcher .iqc-ico-open, .iqc-open .iqc-launcher-text { display: none; }
.iqc-open .iqc-launcher .iqc-ico-close { display: inline-flex; }
.iqc-dot { position: absolute; top: 0; inset-inline-end: 0; width: 16px; height: 16px; border-radius: 50%; background: #e5484d; border: 2px solid #fff; }
.iqc-right .iqc-launcher, .iqc-right .iqc-panel { right: 18px; }
.iqc-left .iqc-launcher, .iqc-left .iqc-panel { left: 18px; }

/* ---------- window ---------- */
.iqc-panel {
  position: fixed; bottom: 90px; z-index: 61;
  width: 380px; max-width: calc(100vw - 24px);
  height: min(580px, calc(100vh - 110px));
  display: flex; flex-direction: column;
  background: var(--iqc-paper); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--iqc-line);
  box-shadow: 0 30px 60px -20px rgba(14, 26, 58, .45);
}

/* top bar: back, title + "available now", close */
.iqc-head { display: flex; align-items: center; gap: 6px; min-height: 68px; padding: 10px 12px; background: var(--iqc-color); color: var(--iqc-on); }
.iqc-titles { flex: 1; min-width: 0; padding-inline: 6px; }
.iqc-head h2 { font-size: 17px; font-weight: 700; }
.iqc-status { display: flex; align-items: center; gap: 7px; font-size: 13px; opacity: .92; }
.iqc-status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #9aa3b5; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.iqc-status.iqc-on::before { background: #1fd17f; }
.iqc-icon-btn { flex: none; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.iqc-icon-btn:hover { background: rgba(127, 127, 127, .25); }
[dir="rtl"] .iqc-back svg, [dir="rtl"] .iqc-card-go svg { transform: scaleX(-1); }

.iqc-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- home: welcome + three large choices ---------- */
.iqc-intro { font-size: 17px; font-weight: 600; white-space: pre-wrap; margin-bottom: 4px !important; }
.iqc-cards { display: flex; flex-direction: column; gap: 10px; }
.iqc-card {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 14px;
  border: 1px solid var(--iqc-line); border-radius: 16px; background: var(--iqc-surface); color: var(--iqc-ink);
  text-align: start; text-decoration: none; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.iqc-card:hover { border-color: var(--iqc-color); transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(14, 26, 58, .5); }
.iqc-card-ico { width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center; background: var(--iqc-color); color: var(--iqc-on); }
.iqc-card-ico svg { width: 24px; height: 24px; }
.iqc-card-wa .iqc-card-ico { background: var(--iqc-wa); color: #fff; }
.iqc-card-faq .iqc-card-ico { background: var(--iqc-paper); color: var(--iqc-ink); border: 1px solid var(--iqc-line); }
.iqc-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iqc-card-text strong { font-size: 16px; font-weight: 700; }
.iqc-card-text span { font-size: 13.5px; color: var(--iqc-soft); }
.iqc-card-go { color: var(--iqc-soft); }
.iqc-card-go svg { width: 18px; height: 18px; }

/* ---------- questions: list, then one answer ---------- */
.iqc-heading { font-size: 17px; font-weight: 700; }
.iqc-hint { font-size: 14px; color: var(--iqc-soft); }
.iqc-list { display: flex; flex-direction: column; border: 1px solid var(--iqc-line); border-radius: 16px; background: var(--iqc-surface); overflow: hidden; }
.iqc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--iqc-line); background: transparent; color: var(--iqc-ink); text-align: start; cursor: pointer; font-weight: 500; }
.iqc-row:last-child { border-bottom: 0; }
.iqc-row:hover { background: var(--iqc-paper); }
.iqc-answer { padding: 14px 16px; border: 1px solid var(--iqc-line); border-radius: 16px; background: var(--iqc-surface); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- bubbles (live chat) ---------- */
.iqc-msg { max-width: 86%; padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.iqc-msg small { display: block; font-size: 11.5px; opacity: .7; margin-top: 2px; }
.iqc-them { align-self: flex-start; background: var(--iqc-surface); border: 1px solid var(--iqc-line); border-start-start-radius: 4px; }
.iqc-me { align-self: flex-end; background: var(--iqc-color); color: var(--iqc-on); border-end-end-radius: 4px; }
.iqc-note { align-self: center; max-width: 100%; text-align: center; font-size: 13.5px; color: var(--iqc-soft); background: transparent; padding: 4px 8px; }

/* ---------- buttons: filled = the main action, outline = everything else ---------- */
.iqc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 18px; border-radius: 14px; border: 1.5px solid transparent; background: var(--iqc-color); color: var(--iqc-on); font-weight: 600; cursor: pointer; text-decoration: none; }
.iqc-btn:hover { filter: brightness(.94); }
.iqc-btn[disabled] { opacity: .65; cursor: progress; }
.iqc-btn-line { background: transparent; color: var(--iqc-ink); border-color: var(--iqc-line); }
.iqc-btn-line:hover { border-color: var(--iqc-ink); filter: none; }
.iqc-btn-wa { background: var(--iqc-wa); color: #fff; }

/* ---------- bottom bar ---------- */
.iqc-foot { padding: 12px; border-top: 1px solid var(--iqc-line); background: var(--iqc-surface); display: flex; flex-direction: column; gap: 8px; }
.iqc-foot:empty { display: none; }
.iqc-send { display: flex; gap: 8px; width: 100%; align-items: flex-end; }
.iqc-send textarea { flex: 1; min-height: 48px; max-height: 110px; resize: none; padding: 11px 14px; border: 1px solid var(--iqc-line); border-radius: 14px; background: var(--iqc-paper); }
.iqc-send-btn { flex: none; width: 48px; padding: 0; }
[dir="rtl"] .iqc-send-btn svg { transform: scaleX(-1); }
.iqc-error { width: 100%; color: #b3261e; font-size: 13.5px; }

/* ---------- start form ---------- */
.iqc-form { display: flex; flex-direction: column; gap: 12px; background: var(--iqc-surface); border: 1px solid var(--iqc-line); border-radius: 16px; padding: 16px; }
.iqc-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.iqc-form label span { font-weight: 400; color: var(--iqc-soft); }
.iqc-form input, .iqc-form textarea { display: block; width: 100%; min-height: 46px; padding: 9px 12px; border: 1px solid var(--iqc-line); border-radius: 12px; background: var(--iqc-paper); }
.iqc-form input:focus, .iqc-form textarea:focus, .iqc-send textarea:focus { border-color: var(--iqc-color); }
.iqc-form textarea { min-height: 88px; resize: vertical; }
.iqc-form .iqc-bad input, .iqc-form .iqc-bad textarea { border-color: #b3261e; }
.iqc-form .iqc-error { margin-top: 3px; }
.iqc-form .iqc-btn { margin-top: 2px; }

/* ---------- the chat page (/chat): the window is the page ---------- */
.iqc-page .iqc-panel {
  position: relative; inset: auto; right: auto; left: auto; bottom: auto; z-index: auto;
  width: min(100%, 560px); max-width: none; height: min(760px, calc(100dvh - 24px)); margin: 12px auto;
  animation: none;
}
@media (max-width: 600px) {
  .iqc-page .iqc-panel { width: 100%; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
}

/* ---------- dark mode (follows the switch of the site) ---------- */
html[data-theme="dark"] .iqc {
  --iqc-ink: #f1f3f9;
  --iqc-soft: #aab3c9;
  --iqc-line: #2c3859;
  --iqc-paper: #0f1730;
  --iqc-surface: #18213f;
}
html[data-theme="dark"] .iqc-error { color: #ff8a8a; }
html[data-theme="dark"] .iqc-panel { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }

/* ---------- phones: the window fills the screen, the button shows the icon only ---------- */
@media (max-width: 480px) {
  .iqc-panel { inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; border: 0; }
  .iqc-right .iqc-panel, .iqc-left .iqc-panel { left: 0; right: 0; }
  .iqc-launcher, .iqc-launcher.iqc-has-label { width: 60px; padding: 0; }
  .iqc-launcher-text { display: none; }
  /* The window covers the round button, so it is hidden while the window is open (the window has its own close button). */
  .iqc-open .iqc-launcher { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .iqc-panel { animation: iqc-in .18s ease-out; }
  @keyframes iqc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .iqc-card { transition: none; }
}