/* =====================================================================
   The Queen Concierge — widget design system
   ---------------------------------------------------------------------
   Everything is scoped under #qc-root. The id gives every rule a
   specificity of at least (1,x,x) so it beats theme rules built on
   classes/elements (Goodlayers, WordPress core) WITHOUT needing !important.
   !important appears only in the isolation reset below, and only on the
   few properties themes most aggressively set (documented inline).
   No external fonts, no frameworks, no continuous heavy animation.
   ===================================================================== */

/* ---------------- Design tokens ---------------- */
#qc-root {
  --qc-bg-primary:   #0A1521;
  --qc-bg-elevated:  #0F1E2E;
  --qc-surface:      #152638;
  --qc-surface-hover:#1B3047;
  --qc-border:       rgba(150, 167, 186, 0.16);
  --qc-border-strong:rgba(150, 167, 186, 0.30);
  --qc-text-primary: #F4F7FB;
  --qc-text-secondary:#BAC7D6;
  --qc-text-muted:   #8A9AAD;
  --qc-accent:       #CBA75E;
  --qc-accent-hover: #DBB876;
  --qc-accent-text:  #0A1521;
  --qc-success:      #5FC08A;
  --qc-error:        #E38C8C;
  --qc-user-surface: rgba(203, 167, 94, 0.13);
  --qc-user-border:  rgba(203, 167, 94, 0.30);

  --qc-radius:  16px;
  --qc-radius-sm: 12px;
  --qc-radius-card: 14px;

  --qc-shadow: 0 18px 48px -22px rgba(0, 0, 0, 0.58), 0 2px 8px rgba(0, 0, 0, 0.22);
  --qc-shadow-launcher: 0 10px 28px -8px rgba(0, 0, 0, 0.5);

  --qc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --qc-serif: Georgia, "Times New Roman", serif;

  --qc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --qc-dur: 200ms;

  /* Bottom-RIGHT, mirroring the site's WhatsApp (Click to Chat) launcher,
     which is fixed at left:25px / bottom:25px on desktop AND mobile with no
     safe-area offset. We use the exact same numbers (and no env()) so the two
     buttons share one baseline and never drift apart when a mobile browser
     toolbar collapses. */
  --qc-edge: 25px;
  --qc-launcher-size: 60px;
}

/* ---------------- Isolation reset (scoped, minimal !important) ----------------
   These properties are the ones themes most commonly force globally
   (button/input/link/heading resets). !important here defends the widget
   against hostile theme rules; it never leaks outside #qc-root. */
#qc-root,
#qc-root *,
#qc-root *::before,
#qc-root *::after { box-sizing: border-box; }

#qc-root {
  font-family: var(--qc-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--qc-text-primary);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#qc-root h1, #qc-root h2, #qc-root h3, #qc-root h4, #qc-root h5, #qc-root h6 {
  margin: 0 !important;
  padding: 0;
  font-family: var(--qc-font);
  font-weight: 600;
  line-height: 1.25;
  color: var(--qc-text-primary);
  letter-spacing: normal;
  text-transform: none !important;
}
#qc-root p { margin: 0; padding: 0; }
#qc-root button {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none !important;
  border: none;
  box-shadow: none;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: normal;
  -webkit-appearance: none;
  appearance: none;
}
#qc-root a { color: inherit; text-decoration: none; background: none; }
#qc-root input {
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  box-shadow: none !important;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
#qc-root img { max-width: 100%; height: auto; display: block; border: 0; }
#qc-root svg { display: block; }
#qc-root strong, #qc-root b { font-weight: 600; }
#qc-root small { font-size: 0.85em; }

/* ---------------- Launcher ---------------- */
#qc-root .qc-launcher {
  position: fixed;
  right: var(--qc-edge);
  bottom: var(--qc-edge);
  z-index: 2147483000;
  width: var(--qc-launcher-size);
  height: var(--qc-launcher-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--qc-accent);
  background:
    radial-gradient(120% 120% at 30% 20%, #16304E 0%, #0B1826 72%) !important;
  border: 1px solid var(--qc-border-strong);
  box-shadow: var(--qc-shadow-launcher);
  transition: transform var(--qc-dur) var(--qc-ease), box-shadow var(--qc-dur) var(--qc-ease);
}
#qc-root .qc-launcher svg { width: 28px; height: 28px; }
#qc-root .qc-launcher img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; }
/* hover lift only on devices that really hover — on touch, :hover sticks after
   a tap and the button visibly hops up/down */
@media (hover: hover) and (pointer: fine) {
  #qc-root .qc-launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(0,0,0,.6); }
}
#qc-root .qc-launcher:active { transform: scale(0.98); }
#qc-root .qc-launcher:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--qc-bg-primary), 0 0 0 4px var(--qc-accent); }
#qc-root .qc-launcher.qc-hidden { opacity: 0; pointer-events: none; transform: scale(0.85); }

/* ---------------- Panel ---------------- */
#qc-root .qc-panel {
  position: fixed;
  right: var(--qc-edge);
  bottom: var(--qc-edge);
  z-index: 2147483001;
  width: 384px;
  max-width: calc(100vw - 40px);
  height: min(648px, calc(100dvh - 112px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--qc-radius);
  border: 1px solid var(--qc-border);
  background:
    radial-gradient(140% 90% at 50% -10%, rgba(22, 48, 78, 0.35), transparent 60%),
    var(--qc-bg-primary);
  box-shadow: var(--qc-shadow);
  opacity: 0;
  transform: translateY(12px) scale(0.99);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity var(--qc-dur) var(--qc-ease), transform var(--qc-dur) var(--qc-ease);
}
#qc-root .qc-panel.qc-open { opacity: 1; transform: none; pointer-events: auto; }

/* ---------------- Header ---------------- */
#qc-root .qc-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 13px 16px;
  border-bottom: 1px solid var(--qc-border);
  background: linear-gradient(180deg, rgba(22, 48, 78, 0.28), transparent);
}
#qc-root .qc-badge {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--qc-accent);
  background: linear-gradient(160deg, #1B3A5C, #0D1F31);
  border: 1px solid var(--qc-border);
}
#qc-root .qc-badge svg { width: 19px; height: 19px; }
#qc-root .qc-badge img { width: 26px; height: 26px; object-fit: contain; }
#qc-root .qc-title { flex: 1; min-width: 0; }
#qc-root .qc-title h3 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--qc-text-primary);
}
#qc-root .qc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--qc-text-muted);
}
#qc-root .qc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--qc-success);
  box-shadow: 0 0 0 0 rgba(95, 192, 138, 0.5);
  animation: qc-pulse-dot 2.6s var(--qc-ease) infinite;
}
@keyframes qc-pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(95, 192, 138, 0.45); }
  70% { box-shadow: 0 0 0 6px rgba(95, 192, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 192, 138, 0); }
}
#qc-root .qc-x {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--qc-text-muted);
  transition: background var(--qc-dur) var(--qc-ease), color var(--qc-dur) var(--qc-ease);
}
#qc-root .qc-x svg { width: 18px; height: 18px; }
#qc-root .qc-x:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--qc-text-primary); }
#qc-root .qc-x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--qc-accent); }

/* ---------------- Conversation ---------------- */
#qc-root .qc-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--qc-border-strong) transparent;
}
#qc-root .qc-body::-webkit-scrollbar { width: 8px; }
#qc-root .qc-body::-webkit-scrollbar-track { background: transparent; }
#qc-root .qc-body::-webkit-scrollbar-thumb {
  background: var(--qc-border-strong);
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#qc-root .qc-intro { padding: 4px 2px 2px; }
#qc-root .qc-intro .qc-lead {
  font-family: var(--qc-serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--qc-text-primary);
  margin-bottom: 7px !important;
}
#qc-root .qc-intro .qc-lead b { color: var(--qc-accent); font-weight: 600; }
#qc-root .qc-intro p { color: var(--qc-text-secondary); font-size: 13.5px; line-height: 1.55; }

/* message bubbles */
#qc-root .qc-msg {
  max-width: 86%;
  width: fit-content;
  font-size: 14px;
  line-height: 1.55;
  padding: 10px 13px;
  border-radius: 14px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  animation: qc-rise var(--qc-dur) var(--qc-ease) both;
}
@keyframes qc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#qc-root .qc-msg.qc-bot {
  align-self: flex-start;
  color: var(--qc-text-primary);
  background: var(--qc-surface);
  border: 1px solid var(--qc-border);
  border-bottom-left-radius: 5px;
}
#qc-root .qc-msg.qc-user {
  align-self: flex-end;
  color: var(--qc-text-primary);
  background: var(--qc-user-surface);
  border: 1px solid var(--qc-user-border);
  border-bottom-right-radius: 5px;
}
#qc-root .qc-msg.qc-error { border-color: rgba(227, 140, 140, 0.4); }
#qc-root .qc-msg b { font-weight: 600; color: var(--qc-text-primary); }
#qc-root .qc-msg .qc-list { margin: 4px 0 2px; padding: 0 0 0 18px; list-style: disc; white-space: normal; }
#qc-root .qc-msg .qc-list li { margin: 0 0 4px; padding: 0; }
#qc-root .qc-retry { margin-top: 9px; }
#qc-root .qc-retry button {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--qc-accent);
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--qc-border-strong);
  transition: background var(--qc-dur) var(--qc-ease);
}
#qc-root .qc-retry button:hover { background: rgba(203, 167, 94, 0.12) !important; }
#qc-root .qc-retry button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--qc-accent); }

/* typing indicator */
#qc-root .qc-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 14px;
  background: var(--qc-surface);
  border: 1px solid var(--qc-border);
  border-radius: 14px;
  border-bottom-left-radius: 5px;
}
#qc-root .qc-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qc-text-muted);
  animation: qc-blink 1.3s ease-in-out infinite;
}
#qc-root .qc-typing span:nth-child(2) { animation-delay: 0.15s; }
#qc-root .qc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes qc-blink { 0%, 70%, 100% { opacity: 0.3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

/* ---------------- Yacht cards ---------------- */
#qc-root .qc-cards { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
#qc-root .qc-yc {
  border-radius: var(--qc-radius-card);
  overflow: hidden;
  background: var(--qc-surface);
  border: 1px solid var(--qc-border);
  animation: qc-rise 220ms var(--qc-ease) both;
  transition: border-color var(--qc-dur) var(--qc-ease), transform var(--qc-dur) var(--qc-ease);
}
#qc-root .qc-yc:hover { transform: translateY(-2px); border-color: var(--qc-border-strong); }
#qc-root .qc-yc.qc-primary { border-color: rgba(203, 167, 94, 0.45); }

#qc-root .qc-yc-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #17324F, #0C1D2F);
}
#qc-root .qc-yc-media img { width: 100%; height: 100%; object-fit: cover; }
#qc-root .qc-yc-media--fallback { background: linear-gradient(135deg, #17324F, #0C1D2F); }
#qc-root .qc-yc-media--fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 45%, rgba(203, 167, 94, 0.12), transparent 70%);
}
#qc-root .qc-yc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--qc-accent-text);
  background: var(--qc-accent);
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
}

#qc-root .qc-yc-body { padding: 13px 14px 14px; }
#qc-root .qc-yc-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--qc-text-primary);
  margin-bottom: 8px !important;
}
#qc-root .qc-yc-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 10px;
}
#qc-root .qc-spec { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--qc-text-secondary); }
#qc-root .qc-spec svg { width: 14px; height: 14px; color: var(--qc-accent); opacity: 0.9; }

#qc-root .qc-yc-price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 13px; }
#qc-root .qc-price-pre { font-size: 12px; color: var(--qc-text-muted); }
#qc-root .qc-price-amt { font-size: 16px; font-weight: 600; color: var(--qc-text-primary); }
#qc-root .qc-price-unit { font-size: 12px; color: var(--qc-text-muted); }

#qc-root .qc-yc-actions { display: flex; gap: 8px; }
#qc-root .qc-btn {
  flex: 1;
  min-height: 40px;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  transition: background var(--qc-dur) var(--qc-ease), border-color var(--qc-dur) var(--qc-ease), transform var(--qc-dur) var(--qc-ease), filter var(--qc-dur) var(--qc-ease);
}
#qc-root .qc-btn-primary {
  color: var(--qc-accent-text);
  background: var(--qc-accent) !important;
  border: 1px solid transparent;
}
#qc-root .qc-btn-primary:hover { background: var(--qc-accent-hover) !important; transform: translateY(-1px); }
#qc-root .qc-btn-primary:active { transform: translateY(0); filter: brightness(0.97); }
#qc-root .qc-btn-ghost {
  color: var(--qc-text-primary);
  background: transparent !important;
  border: 1px solid var(--qc-border-strong);
}
#qc-root .qc-btn-ghost:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: var(--qc-accent); }
#qc-root .qc-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--qc-bg-primary), 0 0 0 4px var(--qc-accent); }
#qc-root .qc-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* WhatsApp handoff card */
#qc-root .qc-handoff {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  background: var(--qc-surface);
  border: 1px solid var(--qc-border-strong);
  animation: qc-rise var(--qc-dur) var(--qc-ease) both;
}
#qc-root .qc-handoff-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--qc-text-primary);
}
#qc-root .qc-handoff-head svg { width: 18px; height: 18px; color: #25D366; flex: none; }
#qc-root .qc-handoff-summary {
  margin: 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--qc-border);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--qc-text-primary);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
#qc-root .qc-btn-whatsapp {
  color: #fff;
  background: #25D366 !important;
  border: 1px solid transparent;
  text-decoration: none;
}
#qc-root .qc-btn-whatsapp:hover { background: #1fb457 !important; transform: translateY(-1px); }
#qc-root .qc-btn-whatsapp:active { transform: translateY(0); filter: brightness(0.97); }
#qc-root .qc-handoff-note { font-size: 11.5px; line-height: 1.45; color: var(--qc-text-secondary, rgba(255,255,255,0.65)); }

/* ---------------- Quick replies ---------------- */
#qc-root .qc-qr { display: flex; flex-wrap: wrap; gap: 7px; align-self: stretch; }
#qc-root .qc-qr button {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--qc-text-secondary);
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--qc-border);
  background: rgba(255, 255, 255, 0.02) !important;
  transition: background var(--qc-dur) var(--qc-ease), border-color var(--qc-dur) var(--qc-ease), color var(--qc-dur) var(--qc-ease);
}
#qc-root .qc-qr button:hover { background: rgba(203, 167, 94, 0.10) !important; border-color: var(--qc-border-strong); color: var(--qc-text-primary); }
#qc-root .qc-qr button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--qc-accent); }

/* ---------------- Composer ---------------- */
#qc-root .qc-foot {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--qc-border);
  background: linear-gradient(0deg, rgba(22, 48, 78, 0.18), transparent);
}
#qc-root .qc-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 14px;
  border-radius: 13px;
  background: var(--qc-bg-elevated);
  border: 1px solid var(--qc-border);
  transition: border-color var(--qc-dur) var(--qc-ease), box-shadow var(--qc-dur) var(--qc-ease);
}
#qc-root .qc-input:focus-within { border-color: var(--qc-accent); box-shadow: 0 0 0 3px rgba(203, 167, 94, 0.16); }
#qc-root .qc-input input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  font-size: 14px;
  color: var(--qc-text-primary);
  background: transparent;
}
#qc-root .qc-input input::placeholder { color: var(--qc-text-muted); opacity: 1; }
#qc-root .qc-send {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--qc-accent-text);
  background: var(--qc-accent) !important;
  transition: background var(--qc-dur) var(--qc-ease), transform var(--qc-dur) var(--qc-ease);
}
#qc-root .qc-send svg { width: 18px; height: 18px; }
#qc-root .qc-send:hover { background: var(--qc-accent-hover) !important; }
#qc-root .qc-send:active { transform: scale(0.96); }
#qc-root .qc-send:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--qc-bg-elevated), 0 0 0 4px var(--qc-accent); }
#qc-root .qc-send[disabled] { opacity: 0.45; cursor: not-allowed; }

#qc-root .qc-powered {
  margin-top: 9px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
  opacity: 0.65;
}


/* ---------------- Teaser (proactive nudge) ----------------
   A small speech bubble that appears next to the launcher after a delay,
   once per browser session, and can be dismissed. Clicking it opens the
   chat. No auto-open, no sound, no overlay — deliberately unobtrusive. */
#qc-root .qc-teaser {
  position: fixed;
  right: calc(var(--qc-edge) + var(--qc-launcher-size) + 12px);
  bottom: calc(var(--qc-edge) + 8px);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
  padding: 10px 10px 10px 14px;
  border-radius: 14px;
  border-bottom-right-radius: 5px;
  color: var(--qc-text-primary);
  background: var(--qc-bg-elevated);
  border: 1px solid var(--qc-border-strong);
  box-shadow: var(--qc-shadow-launcher);
  font-size: 13.5px;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 260ms var(--qc-ease), transform 260ms var(--qc-ease);
}
#qc-root .qc-teaser.qc-teaser-show { opacity: 1; transform: none; pointer-events: auto; }
#qc-root .qc-teaser[hidden] { display: none; }
#qc-root .qc-teaser::before {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 18px;
  width: 12px;
  height: 12px;
  background: var(--qc-bg-elevated);
  border-right: 1px solid var(--qc-border-strong);
  border-top: 1px solid var(--qc-border-strong);
  transform: rotate(45deg);
}
#qc-root .qc-teaser-text { flex: 1; }
#qc-root .qc-teaser-text b { color: var(--qc-accent); font-weight: 600; }
#qc-root .qc-teaser-x {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--qc-text-muted);
  transition: background var(--qc-dur) var(--qc-ease), color var(--qc-dur) var(--qc-ease);
}
#qc-root .qc-teaser-x:hover { background: rgba(255,255,255,0.07) !important; color: var(--qc-text-primary); }
#qc-root .qc-teaser-x svg { width: 14px; height: 14px; }
#qc-root .qc-teaser:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--qc-bg-primary), 0 0 0 4px var(--qc-accent); }

/* one soft attention ring on the launcher while the teaser is visible */
#qc-root .qc-launcher.qc-nudge::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--qc-accent);
  opacity: 0;
  animation: qc-ring 1.6s var(--qc-ease) 2;
}
@keyframes qc-ring { 0% { opacity: .6; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }

/* ---------------- Mobile ---------------- */
@media (max-width: 480px) {
  #qc-root .qc-panel {
    left: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  /* Launcher keeps the same 25px/25px anchor as WhatsApp (no env()): a fixed
     px value is the only thing that stays put while iOS/Android toolbars
     collapse and expand. The teaser moves ABOVE the launcher, right-aligned,
     with its arrow pointing down at the button. */
  #qc-root .qc-teaser {
    right: var(--qc-edge);
    left: auto;
    bottom: calc(var(--qc-edge) + var(--qc-launcher-size) + 12px);
    max-width: calc(100vw - var(--qc-edge) * 2);
    border-radius: 14px;
    border-bottom-right-radius: 5px;
  }
  #qc-root .qc-teaser::before {
    right: 22px;
    bottom: -7px;
    border-right: 1px solid var(--qc-border-strong);
    border-bottom: 1px solid var(--qc-border-strong);
    border-top: none;
  }
  /* no transform-based entrance on mobile: it fights the browser's own
     toolbar animation and reads as flicker */
  #qc-root .qc-teaser { transform: none; transition: opacity 260ms var(--qc-ease); }
  #qc-root .qc-head { padding-top: max(14px, env(safe-area-inset-top, 0px)); }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  #qc-root *,
  #qc-root *::before,
  #qc-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  #qc-root .qc-dot { animation: none; }
}