/* The website chat widget (P1.12): a launcher bubble in the dealer's colour and a compact panel. Colours, spacing and type are the
   module tokens (css/module-tokens.css); the dealer's colour reaches --mod-accent through css/module-panels.css. Sizes match
   WidgetLauncherRules: bubble 56 px, panel 380 x 600 px, 12 px of room round them inside the iframe. */
.wl-root {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: transparent;
  pointer-events: none;
  font-family: var(--mod-font);
}
.wl-root > * { pointer-events: auto; }
.wl-root :focus-visible {
  outline: var(--mod-focus-width) solid var(--mod-focus);
  outline-offset: var(--mod-focus-offset);
}

/* ---- The bubble ---- */
.wl-bubble {
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: 56px;
  height: 56px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--mod-accent);
  color: var(--mod-on-accent);
  font: 700 1.1rem/1 var(--mod-font);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: transform var(--mod-motion-fast) var(--mod-ease);
}
.wl-bubble:hover { transform: scale(1.05); }
.wl-bubble[hidden] { display: none; }
.wl-bubble-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--mod-surface);
}
.wl-bubble-icon { width: 28px; height: 28px; }
/* A conversation is waiting behind a minimised bubble. */
.wl-bubble-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mod-success-border);
  border: 2px solid var(--mod-surface);
}

/* ---- The panel ---- */
.wl-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: min(380px, calc(100vw - 24px));
  height: min(600px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  background: var(--mod-bg);
  color: var(--mod-text);
  border: 1px solid var(--mod-hairline);
  border-radius: var(--mod-radius-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.wl-panel[hidden] { display: none; }

.wl-header {
  display: flex;
  align-items: center;
  gap: var(--mod-space-2);
  flex-shrink: 0;
  padding: var(--mod-space-2) var(--mod-space-3);
  min-height: 52px;
  background: var(--mod-header-bg);
  color: var(--mod-header-text);
  border-bottom: 1px solid var(--mod-hairline);
}
.wl-header-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wl-header-name { font-size: var(--mod-text-md); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-header-status { font-size: var(--mod-text-xs); color: var(--mod-text-muted); }
.wl-header .mod-brand-logo { max-height: 28px; max-width: 72px; object-fit: contain; }
.wl-header .mod-brand-name { font-size: var(--mod-text-sm); color: var(--mod-text-muted); }
.wl-header-actions { display: flex; align-items: center; gap: var(--mod-space-1); }
/* The theme toggle keeps its name for screen readers; only its icon shows in the compact header. */
.wl-header .mod-theme-toggle span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wl-icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--mod-radius-md);
  background: transparent;
  color: var(--mod-header-control);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.wl-icon-btn:hover { background: var(--mod-hover); }

.wl-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* The shell fills the panel whatever the page around the iframe is: the compact layout, one column. */
.wl-body .vcs-page.vcs-page { display: flex; flex-direction: column; height: 100%; min-height: 0; grid-template-columns: none; }
.wl-body .vcs-chat-panel { flex: 1; min-height: 0; height: auto; }
/* The notice and the idle countdown cover the panel, not the dealer's page. */
.wl-body .men-overlay { position: absolute; inset: 0; z-index: 5; padding: var(--mod-space-3); }

/* Phones: the panel is the whole screen. The dealer's snippet makes the iframe the whole screen on a phone (window narrower than 480 px),
   so the iframe is then larger than the 404 x 624 px the open panel asks for in at least one direction; on a desktop it is exactly that
   size or smaller. The test is on the iframe, not the screen, because inside the iframe the viewport is the iframe. */
@media (min-width: 404.5px), (min-height: 624.5px) {
  .wl-panel {
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wl-bubble { transition: none; }
  .wl-bubble:hover { transform: none; }
}