/* ShareLadder Assistant — chat widget chrome (the floating trigger and the
   panel shell). The conversation itself renders inside the embedded chat
   element, which carries its own styling; citation markers and popovers
   inside it are styled through the element's auxiliary stylesheet in the
   panel template. Product-specific; loaded after components.css. */

.chat-trigger {
  position: fixed;
  bottom: 5rem; /* clears the sticky action bar on mobile */
  right: 1.5rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--sl-shadow-lg);
  z-index: 100;
  transition: background var(--sl-dur-fast) var(--sl-ease-out),
    transform var(--sl-dur-fast) var(--sl-ease-out),
    box-shadow var(--sl-dur-fast) var(--sl-ease-out);
}
.chat-trigger:hover { background: var(--primary-hover); box-shadow: var(--sl-shadow-xl); }
.chat-trigger:active { transform: scale(0.95); }
.chat-trigger:focus-visible { outline: none; box-shadow: var(--sl-shadow-focus); }
@media (min-width: 481px) {
  .chat-trigger { bottom: 1.5rem; }
}

.chat-panel {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: min(380px, calc(100vw - 2rem));
  height: 520px;
  max-height: calc(100dvh - 5rem - 3rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--sl-radius-xl);
  box-shadow: var(--sl-shadow-xl);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
  animation: chat-panel-rise var(--sl-dur-slow) var(--sl-ease-out) both;
}
@keyframes chat-panel-rise {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .chat-panel {
    bottom: 0; right: 0; left: 0;
    width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-panel { animation: none; }
}

.panel-header {
  display: flex; align-items: center; gap: var(--sl-space-3);
  padding: var(--sl-space-4) var(--sl-space-4) var(--sl-space-3);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.panel-header__icon {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--primary); color: var(--primary-foreground);
  display: grid; place-items: center; flex: none;
}
.panel-header__icon svg { width: 1rem; height: 1rem; }
.panel-header__title { font-weight: 600; font-size: var(--sl-text-base); flex: 1; }
.panel-close {
  width: 2rem; height: 2rem; border-radius: var(--sl-radius-sm);
  background: none; border: none; cursor: pointer;
  color: var(--muted-foreground);
  display: grid; place-items: center;
  transition: background var(--sl-dur-fast) var(--sl-ease-out),
    color var(--sl-dur-fast) var(--sl-ease-out);
}
.panel-close:hover { background: var(--muted); color: var(--foreground); }
.panel-close:focus-visible { outline: none; box-shadow: var(--sl-shadow-focus); }

.panel-disclaimer {
  flex: none;
  margin: var(--sl-space-3) var(--sl-space-3) 0;
  border-radius: var(--sl-radius-md);
}

.sl-chat-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #d1f0eb;
  color: #0e6b5a;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  margin-top: 0.375rem;
}
.sl-chat-live-tag svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
}