/*
 * Chat widget.
 *
 * Colours and corner radius come from the host theme's custom properties where
 * it defines them, with fallbacks so the widget still looks deliberate on a
 * theme that defines nothing. The point is that it reads as part of the site
 * rather than as a bolted-on tool.
 *
 * The launcher is offset upward to clear a floating action button — most of
 * these sites have a WhatsApp bubble parked in that exact corner.
 */

.iq-chat {
  --iq-brand: var(--brand, var(--ap-orange, #898757));
  --iq-ink:   var(--ink, #121212);
  --iq-muted: var(--muted, #5E5E58);
  --iq-line:  var(--line, #E4E3DC);
  --iq-sand:  var(--sand, #F7F6F1);
  --iq-bg:    #ffffff;
  /* Buttons on these sites are 8px; --radius is the larger card radius, so it
     is used for the panel only and not for the launcher. */
  --iq-radius:       8px;
  --iq-radius-panel: var(--radius, 12px);

  /* Height of whatever else already occupies this corner, plus a gap. */
  --iq-offset: 76px;

  position: fixed;
  right: 14px;
  bottom: var(--iq-offset);
  z-index: 9998;
  font-family: inherit;
}

/* Launcher ---------------------------------------------------------------- */

.iq-chat__toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.15rem;
  background: var(--iq-brand); color: #fff;
  border: 0; border-radius: var(--iq-radius);
  font: inherit; font-size: .92rem; font-weight: 600; line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.iq-chat__toggle:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
.iq-chat__toggle svg { width: 18px; height: 18px; flex: none; }
.iq-chat[data-open="true"] .iq-chat__toggle { display: none; }

/* Panel ------------------------------------------------------------------- */

.iq-chat__panel {
  display: none;
  width: min(384px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 110px));
  background: var(--iq-bg);
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius-panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
  flex-direction: column;
  overflow: hidden;
}
.iq-chat[data-open="true"] .iq-chat__panel { display: flex; }

.iq-chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem;
  background: var(--iq-ink); color: #fff;
}
.iq-chat__title { font-size: .95rem; font-weight: 600; margin: 0; }
.iq-chat__sub { font-size: .72rem; opacity: .7; margin: .12rem 0 0; }
.iq-chat__close {
  background: none; border: 0; color: #fff; cursor: pointer; border-radius: var(--iq-radius);
  font-size: 1.4rem; line-height: 1; padding: 0 .2rem; opacity: .75;
}
.iq-chat__close:hover { opacity: 1; }

.iq-chat__body {
  flex: 1; overflow-y: auto; padding: 1rem;
  background: var(--iq-sand);
  display: flex; flex-direction: column; gap: .7rem;
}

.iq-chat__msg {
  max-width: 86%;
  padding: .62rem .8rem;
  font-size: .875rem; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word;
}
.iq-chat__msg { border-radius: var(--iq-radius); }
.iq-chat__msg--bot  { background: var(--iq-bg); border: 1px solid var(--iq-line); color: var(--iq-ink); align-self: flex-start; }
.iq-chat__msg--user { background: var(--iq-brand); color: #fff; align-self: flex-end; }

.iq-chat__typing { display: flex; gap: 4px; padding: .8rem; align-self: flex-start; }
.iq-chat__typing span {
  width: 6px; height: 6px; background: var(--iq-muted); border-radius: 50%;
  animation: iq-bounce 1.3s infinite ease-in-out;
}
.iq-chat__typing span:nth-child(2) { animation-delay: .16s; }
.iq-chat__typing span:nth-child(3) { animation-delay: .32s; }
@keyframes iq-bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.iq-chat__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .7rem; background: var(--iq-sand); }
.iq-chat__chips:empty { display: none; }
.iq-chat__chip {
  padding: .38rem .65rem;
  background: var(--iq-bg); border: 1px solid var(--iq-line); border-radius: var(--iq-radius);
  font: inherit; font-size: .78rem; color: var(--iq-ink);
  cursor: pointer; text-align: left;
}
.iq-chat__chip:hover { border-color: var(--iq-brand); color: var(--iq-brand); }

.iq-chat__form { display: flex; border-top: 1px solid var(--iq-line); background: var(--iq-bg); }
.iq-chat__input {
  flex: 1; border: 0; padding: .85rem 1rem;
  font: inherit; font-size: .875rem; color: var(--iq-ink); background: transparent;
}
.iq-chat__input:focus { outline: 2px solid var(--iq-brand); outline-offset: -2px; }
.iq-chat__send {
  border: 0; background: var(--iq-brand); color: #fff;
  padding: 0 1.15rem; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600;
}
.iq-chat__send:disabled { opacity: .5; cursor: default; }

.iq-chat__foot {
  padding: .45rem 1rem; background: var(--iq-bg);
  border-top: 1px solid var(--iq-line);
  font-size: .68rem; color: var(--iq-muted);
}

/* On a phone the launcher is an icon, not a bar.
   Full width, it sat across the bottom of the screen covering the content and
   competing with the site's own sticky quote button. A round icon above the
   WhatsApp bubble stays out of the way and reads as what it is. */
@media (max-width: 620px) {
  .iq-chat {
    --iq-offset: 78px;
    left: auto; right: 14px;
  }
  .iq-chat__toggle {
    width: 50px; height: 50px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  }
  .iq-chat__toggle span { display: none; }   /* icon only */
  .iq-chat__toggle svg { width: 22px; height: 22px; }

  /* The panel still wants the full width once it is open. */
  .iq-chat__panel {
    position: fixed;
    left: 10px; right: 10px; bottom: 10px;
    width: auto;
    height: min(78vh, 560px);
  }
}