/* ==========================================================================
   QUALITY POWER ASSISTANT — Chatbot Styles
   --------------------------------------------------------------------------
   Fully namespaced under .qpc-chatbot* so nothing here can collide with the
   existing site CSS. Reuses the site's own design tokens (--ink, --bg,
   --font-head, --line-strong, --shadow-lg, --ease, --dur-fast, etc.) defined
   in css/styles.css so the assistant inherits the site's premium black/white
   identity instead of introducing new colors. Fallback values are provided
   in case this file is ever loaded before styles.css.
   ========================================================================== */

.qpc-chatbot,
.qpc-chatbot *{ box-sizing:border-box; }

.qpc-chatbot{
  --qpc-ink: var(--ink, #000000);
  --qpc-bg: var(--bg, #ffffff);
  --qpc-bg-soft: var(--bg-soft, #f7f7f7);
  --qpc-muted: var(--muted, #666666);
  --qpc-bd: var(--c-bd, #bdbdbd);
  --qpc-line: var(--line, rgba(0,0,0,.12));
  --qpc-line-strong: var(--line-strong, rgba(0,0,0,.22));
  --qpc-line-invert: var(--line-invert, rgba(255,255,255,.22));
  --qpc-font-head: var(--font-head, 'Manrope', 'Inter', -apple-system, sans-serif);
  --qpc-font-body: var(--font-body, 'Inter', -apple-system, sans-serif);
  --qpc-ease: var(--ease, cubic-bezier(.22,.61,.36,1));
  --qpc-dur: var(--dur-fast, .25s);
  --qpc-shadow: var(--shadow-lg, 0 30px 80px rgba(0,0,0,.22));
  --qpc-radius: var(--radius-md, 10px);
  --qpc-radius-sm: var(--radius-sm, 4px);

  position:fixed;
  right:20px;
  bottom:28px;
  z-index:9999;
  font-family:var(--qpc-font-body);
  color:var(--qpc-ink);
}

/* ---------- Launcher ----------
   The launcher is a fixed overlay that can sit on top of ANY section of this
   monochrome site — including full-black hero, footer and CTA bands. A solid
   black-on-black button would disappear there, so the launcher always uses a
   white disc with a black ring/icon (the same "premium white" treatment the
   site itself uses for CTAs placed over dark photography, e.g. .btn-invert).
   That keeps it legible over both pure white and pure black backgrounds. */
.qpc-chatbot-launcher{
  position:relative;
  width:58px; height:58px;
  border-radius:50%;
  border:1.5px solid var(--qpc-ink);
  background:var(--qpc-bg);
  color:var(--qpc-ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.32);
  transition:transform var(--qpc-dur) var(--qpc-ease), box-shadow var(--qpc-dur) var(--qpc-ease),
             background var(--qpc-dur) var(--qpc-ease), color var(--qpc-dur) var(--qpc-ease);
  -webkit-tap-highlight-color:transparent;
}
.qpc-chatbot-launcher:hover,
.qpc-chatbot-launcher:focus-visible{
  background:var(--qpc-ink);
  color:var(--qpc-bg);
  box-shadow:0 14px 36px rgba(0,0,0,.4);
  transform:translateY(-2px);
}
.qpc-chatbot-launcher:active{ transform:translateY(0) scale(.96); }
.qpc-chatbot-launcher:focus-visible{ outline:2px solid var(--qpc-ink); outline-offset:3px; }
.qpc-chatbot-launcher svg{ width:24px; height:24px; display:block; }
.qpc-chatbot-launcher .qpc-icon-close{ display:none; }
.qpc-chatbot.is-open .qpc-chatbot-launcher .qpc-icon-open{ display:none; }
.qpc-chatbot.is-open .qpc-chatbot-launcher .qpc-icon-close{ display:block; }

/* ---------- Panel ---------- */
.qpc-chatbot-panel{
  position:fixed;
  right:20px;
  bottom:98px;
  width:min(392px, calc(100vw - 40px));
  height:min(600px, calc(100vh - 140px));
  background:var(--qpc-bg);
  color:var(--qpc-ink);
  border:1px solid var(--qpc-line-strong);
  border-radius:16px;
  box-shadow:var(--qpc-shadow);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.98);
  pointer-events:none;
  transition:opacity var(--qpc-dur) var(--qpc-ease), transform var(--qpc-dur) var(--qpc-ease);
  z-index:9999;
}
.qpc-chatbot-panel[data-state="open"]{
  opacity:1; transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* ---------- Header (dark band — matches site's premium black bands) ---------- */
.qpc-chatbot-header{
  background:var(--qpc-ink);
  color:var(--qpc-bg);
  padding:18px 18px 16px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  flex:none;
}
.qpc-chatbot-header-text{ min-width:0; }
.qpc-chatbot-title{
  font-family:var(--qpc-font-head); font-weight:800; text-transform:uppercase;
  letter-spacing:.02em; font-size:.86rem; margin:0;
  display:flex; align-items:center; gap:8px;
}
.qpc-chatbot-title .qpc-spark{ width:14px; height:14px; flex:none; }
.qpc-chatbot-subtitle{
  margin:4px 0 0; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--qpc-bd); font-weight:600;
}
.qpc-chatbot-close{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--qpc-line-invert); background:transparent; color:var(--qpc-bg);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background var(--qpc-dur) var(--qpc-ease), color var(--qpc-dur) var(--qpc-ease), border-color var(--qpc-dur) var(--qpc-ease);
}
.qpc-chatbot-close:hover, .qpc-chatbot-close:focus-visible{
  background:var(--qpc-bg); color:var(--qpc-ink); border-color:var(--qpc-bg);
}
.qpc-chatbot-close:focus-visible{ outline:2px solid var(--qpc-bg); outline-offset:2px; }
.qpc-chatbot-close svg{ width:14px; height:14px; }

/* ---------- Messages ---------- */
.qpc-chatbot-messages{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:18px 16px;
  display:flex; flex-direction:column; gap:12px;
  background:var(--qpc-bg);
  scrollbar-width:thin;
}
.qpc-chatbot-messages::-webkit-scrollbar{ width:6px; }
.qpc-chatbot-messages::-webkit-scrollbar-thumb{ background:var(--qpc-line-strong); border-radius:6px; }

.qpc-msg{
  max-width:86%;
  font-size:.88rem; line-height:1.55;
  padding:11px 14px;
  border-radius:12px;
  opacity:0; transform:translateY(8px);
  animation:qpc-msg-in .32s var(--qpc-ease) forwards;
  white-space:pre-line;
}
@keyframes qpc-msg-in{ to{ opacity:1; transform:translateY(0); } }

.qpc-msg-bot{
  align-self:flex-start;
  background:var(--qpc-bg-soft);
  color:var(--qpc-ink);
  border:1px solid var(--qpc-line);
  border-bottom-left-radius:4px;
}
.qpc-msg-user{
  align-self:flex-end;
  background:var(--qpc-ink);
  color:var(--qpc-bg);
  border-bottom-right-radius:4px;
}

.qpc-msg-actions{
  align-self:flex-start;
  display:flex; flex-wrap:wrap; gap:8px;
  max-width:92%;
}
.qpc-chatbot-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--qpc-font-body); font-weight:700; font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase;
  padding:9px 14px;
  border:1px solid var(--qpc-ink); border-radius:3px;
  background:var(--qpc-ink); color:var(--qpc-bg);
  cursor:pointer; text-decoration:none;
  transition:background var(--qpc-dur) var(--qpc-ease), color var(--qpc-dur) var(--qpc-ease);
}
.qpc-chatbot-btn:hover, .qpc-chatbot-btn:focus-visible{
  background:var(--qpc-bg); color:var(--qpc-ink);
}
.qpc-chatbot-btn:focus-visible{ outline:2px solid var(--qpc-ink); outline-offset:2px; }
.qpc-chatbot-btn-ghost{
  background:transparent; color:var(--qpc-ink); border:1px solid var(--qpc-line-strong);
}
.qpc-chatbot-btn-ghost:hover, .qpc-chatbot-btn-ghost:focus-visible{
  background:var(--qpc-ink); color:var(--qpc-bg); border-color:var(--qpc-ink);
}

/* Typing indicator */
.qpc-typing{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:4px;
  padding:13px 16px;
  background:var(--qpc-bg-soft);
  border:1px solid var(--qpc-line);
  border-radius:12px; border-bottom-left-radius:4px;
}
.qpc-typing span{
  width:5px; height:5px; border-radius:50%; background:var(--qpc-muted);
  animation:qpc-typing-bounce 1.1s var(--qpc-ease) infinite;
}
.qpc-typing span:nth-child(2){ animation-delay:.12s; }
.qpc-typing span:nth-child(3){ animation-delay:.24s; }
@keyframes qpc-typing-bounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}

/* ---------- Quick actions ---------- */
.qpc-chatbot-quick{
  flex:none;
  padding:2px 16px 14px;
  display:flex; flex-wrap:wrap; gap:8px;
  background:var(--qpc-bg);
}
.qpc-chatbot-quick:empty{ display:none; padding:0; }
.qpc-chatbot-chip{
  font-family:var(--qpc-font-body); font-weight:700; font-size:.72rem;
  letter-spacing:.04em; text-transform:uppercase;
  padding:9px 13px;
  border:1px solid var(--qpc-line-strong); border-radius:999px;
  background:transparent; color:var(--qpc-ink);
  cursor:pointer;
  transition:background var(--qpc-dur) var(--qpc-ease), color var(--qpc-dur) var(--qpc-ease), border-color var(--qpc-dur) var(--qpc-ease);
}
.qpc-chatbot-chip:hover, .qpc-chatbot-chip:focus-visible{
  background:var(--qpc-ink); color:var(--qpc-bg); border-color:var(--qpc-ink);
}
.qpc-chatbot-chip:focus-visible{ outline:2px solid var(--qpc-ink); outline-offset:2px; }

/* ---------- Input row ---------- */
.qpc-chatbot-inputrow{
  flex:none;
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--qpc-line);
  background:var(--qpc-bg);
}
.qpc-chatbot-input{
  flex:1 1 auto; min-width:0;
  border:1px solid var(--qpc-line-strong); border-radius:999px;
  background:var(--qpc-bg-soft); color:var(--qpc-ink);
  font-family:var(--qpc-font-body); font-size:.86rem;
  padding:11px 16px;
  transition:border-color var(--qpc-dur) var(--qpc-ease), box-shadow var(--qpc-dur) var(--qpc-ease);
}
.qpc-chatbot-input::placeholder{ color:var(--qpc-muted); }
.qpc-chatbot-input:focus{
  outline:none; border-color:var(--qpc-ink); box-shadow:0 0 0 1px var(--qpc-ink);
}
.qpc-chatbot-send{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--qpc-ink); background:var(--qpc-ink); color:var(--qpc-bg);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background var(--qpc-dur) var(--qpc-ease), color var(--qpc-dur) var(--qpc-ease), transform var(--qpc-dur) var(--qpc-ease);
}
.qpc-chatbot-send:hover, .qpc-chatbot-send:focus-visible{ background:var(--qpc-bg); color:var(--qpc-ink); }
.qpc-chatbot-send:focus-visible{ outline:2px solid var(--qpc-ink); outline-offset:2px; }
.qpc-chatbot-send:active{ transform:scale(.92); }
.qpc-chatbot-send svg{ width:16px; height:16px; }
.qpc-chatbot-send[disabled]{ opacity:.4; cursor:not-allowed; }

/* ---------- Footer (clear conversation) ---------- */
.qpc-chatbot-footer{
  flex:none; text-align:center; padding:0 14px 12px;
  background:var(--qpc-bg);
}
.qpc-chatbot-clear{
  border:none; background:transparent; color:var(--qpc-muted);
  font-family:var(--qpc-font-body); font-size:.68rem; letter-spacing:.04em;
  text-transform:uppercase; cursor:pointer; padding:6px 8px;
  transition:color var(--qpc-dur) var(--qpc-ease);
}
.qpc-chatbot-clear:hover, .qpc-chatbot-clear:focus-visible{ color:var(--qpc-ink); text-decoration:underline; }
.qpc-chatbot-clear:focus-visible{ outline:2px solid var(--qpc-ink); outline-offset:2px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .qpc-chatbot-launcher,
  .qpc-chatbot-panel,
  .qpc-chatbot-close,
  .qpc-chatbot-btn,
  .qpc-chatbot-chip,
  .qpc-chatbot-send,
  .qpc-msg,
  .qpc-typing span{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
  .qpc-msg{ opacity:1; transform:none; }
}

/* ---------- Mobile ---------- */
@media (max-width:960px){
  /* Keep the launcher clear of the site's fixed bottom mobile toolbar
     (see .mobile-toolbar in styles.css — ~72px tall, 16px from bottom). */
  .qpc-chatbot{
    right:16px;
    bottom:calc(104px + env(safe-area-inset-bottom, 0px));
  }
  .qpc-chatbot-launcher{ width:52px; height:52px; }
  .qpc-chatbot-panel{
    right:10px; left:10px;
    width:auto;
    bottom:calc(104px + env(safe-area-inset-bottom, 0px));
    top:auto;
    height:min(66vh, 520px);
    border-radius:14px;
  }
}

@media (max-width:420px){
  .qpc-chatbot-panel{ height:min(70vh, 520px); }
  .qpc-msg, .qpc-msg-actions{ max-width:92%; }
}

/* When the on-screen keyboard shrinks the viewport on mobile, keep the
   panel usable rather than letting it get clipped. */
@media (max-width:960px) and (max-height:560px){
  .qpc-chatbot-panel{ height:min(80vh, 420px); bottom:12px; top:auto; }
  .qpc-chatbot{ bottom:12px; }
}