/* Chat launcher: one bubble, one panel, two palettes. Colors live in custom properties on
   .chatlauncher, so the dark and light theme classes only ever override those, never layout. */

.chatlauncher {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  position: fixed; right: 24px; bottom: 24px;
  z-index: 60; display: flex; flex-direction: column;
  align-items: flex-end; gap: 12px;
  pointer-events: none; /* the closed panel keeps its box via visibility; don't let it block clicks */
}

/* The two page families share no colors, so every custom property gets a value from both
   theme classes — neither one falls back to a default defined on .chatlauncher. */
.chatlauncher--dark {
  --chatlauncher-bubble-bg: #0D0D37;
  --chatlauncher-bubble-bg-hover: #1a1a4d;
  --chatlauncher-bubble-border: 1.5px solid #FFFFFF;
  --chatlauncher-bubble-icon: #FFFFFF;
  --chatlauncher-panel-bg: linear-gradient(180deg, #131034 0%, #0B0626 100%);
  --chatlauncher-panel-border: 1px solid rgba(255, 255, 255, 0.2);
  --chatlauncher-panel-radius: 20px;
  --chatlauncher-panel-shadow: none;
  --chatlauncher-title: #FFFFFF;
  --chatlauncher-muted: #9B96B0;
  --chatlauncher-item-text: #FFFFFF;
  --chatlauncher-item-icon: #9B96B0;
  --chatlauncher-item-hover-bg: rgba(255, 255, 255, 0.06);
  --chatlauncher-item-hover-icon: #FFFFFF;
  --chatlauncher-separator: rgba(255, 255, 255, 0.12);
  --chatlauncher-focus-ring: rgba(255, 255, 255, 0.5);
}

.chatlauncher--light {
  --chatlauncher-bubble-bg: #2563eb;
  --chatlauncher-bubble-bg-hover: #1d4ed8;
  --chatlauncher-bubble-border: none;
  --chatlauncher-bubble-icon: #FFFFFF;
  --chatlauncher-panel-bg: #FFFFFF;
  --chatlauncher-panel-border: 1px solid #f3f4f6;
  --chatlauncher-panel-radius: 1.5rem;
  --chatlauncher-panel-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --chatlauncher-title: #111827;
  --chatlauncher-muted: #6b7280;
  --chatlauncher-item-text: #111827;
  --chatlauncher-item-icon: #9ca3af;
  --chatlauncher-item-hover-bg: #f9fafb;
  --chatlauncher-item-hover-icon: #2563eb;
  --chatlauncher-separator: #f3f4f6;
  --chatlauncher-focus-ring: rgba(37, 99, 235, 0.4);
}

.chatlauncher__btn, .chatlauncher__panel { pointer-events: auto; }
.chatlauncher--away { display: none; }

.chatlauncher__btn {
  width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--chatlauncher-bubble-bg); color: var(--chatlauncher-bubble-icon);
  border: var(--chatlauncher-bubble-border); border-radius: 50%;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.chatlauncher__btn svg { width: 24px; height: 24px; }
.chatlauncher__btn:hover { background: var(--chatlauncher-bubble-bg-hover); }
.chatlauncher__btn:active { transform: translateY(1px); }
.chatlauncher__btn:focus-visible {
  outline: none;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 0 0 3px var(--chatlauncher-focus-ring);
}

.chatlauncher__panel {
  width: 320px;
  background: var(--chatlauncher-panel-bg);
  border: var(--chatlauncher-panel-border);
  border-radius: var(--chatlauncher-panel-radius);
  box-shadow: var(--chatlauncher-panel-shadow);
  visibility: hidden; opacity: 0; transform: translateY(8px);
  transition: visibility 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.chatlauncher__panel[hidden] { display: none; } /* pre-JS guard only; JS never toggles this again */
.chatlauncher__panel--open { visibility: visible; opacity: 1; transform: translateY(0); }

.chatlauncher__head {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--chatlauncher-separator);
}
.chatlauncher__title {
  margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3;
  color: var(--chatlauncher-title);
}
.chatlauncher__sub {
  margin: 8px 0 0; font-size: 0.875rem; color: var(--chatlauncher-muted);
}

.chatlauncher__item {
  display: flex; align-items: center; width: 100%; min-height: 48px;
  padding: 0 20px; gap: 16px; background: transparent;
  border: none; font-family: inherit; font-size: 0.875rem; font-weight: 600;
  color: var(--chatlauncher-item-text); text-decoration: none; cursor: pointer;
  transition: background 0.2s ease;
}
.chatlauncher__item + .chatlauncher__item { border-top: 1px solid var(--chatlauncher-separator); }
.chatlauncher__item svg {
  width: 20px; height: 20px; color: var(--chatlauncher-item-icon); flex: none;
  transition: color 0.2s ease;
}
.chatlauncher__item:hover { background: var(--chatlauncher-item-hover-bg); }
.chatlauncher__item:hover svg { color: var(--chatlauncher-item-hover-icon); }
.chatlauncher__item:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--chatlauncher-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .chatlauncher__btn, .chatlauncher__panel, .chatlauncher__item {
    transition: none; animation: none;
  }
}

@media (max-width: 640px) {
  .chatlauncher { right: 16px; bottom: 16px; }
  .chatlauncher__panel { width: calc(100vw - 32px); max-width: 320px; }
}