/* ==========================================================================
   Chat widget — floating RAG assistant button + panel.
   Built entirely from existing design tokens (css/tokens.css); no new
   colors or effects introduced. See CLAUDE.md's chat-widget section and
   rag-backend/README.md for how this connects to the local backend.
   ========================================================================== */

[data-chat-widget-root]:empty {
  /* No markup until js/chat-widget.js decides the backend is configured —
     an empty root takes up no space and traps no clicks. */
  display: contents;
}

.chat-widget__toggle {
  position: fixed;
  inset-block-end: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  inset-inline-end: var(--space-md);
  z-index: var(--z-chat-widget);
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-pill);
  border: none;
  background-color: var(--color-accent);
  color: var(--color-paper-000);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.chat-widget__toggle:hover {
  background-color: var(--color-accent-strong);
}

.chat-widget__toggle svg {
  inline-size: 24px;
  block-size: 24px;
}

.chat-widget__toggle-icon-close {
  display: none;
}

.chat-widget__toggle[aria-expanded='true'] .chat-widget__toggle-icon-open {
  display: none;
}

.chat-widget__toggle[aria-expanded='true'] .chat-widget__toggle-icon-close {
  display: block;
}

.chat-widget__panel {
  position: fixed;
  z-index: var(--z-chat-widget);
  inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: var(--space-md);
  inline-size: min(380px, calc(100vw - 2 * var(--space-md)));
  block-size: min(600px, calc(100vh - 120px));
  background-color: var(--color-bg-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-widget__panel[hidden] {
  /* Without this, our own `display: flex` above outweighs the UA
     stylesheet's `[hidden] { display: none }` and the panel stays visible
     — same fix as .mobile-nav[hidden] in css/layout.css. */
  display: none;
}

.chat-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-block-end: var(--border-hairline);
  background-color: var(--color-bg-inverse);
  flex-shrink: 0;
}

.chat-widget__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
}

.chat-widget__close {
  color: var(--color-text-inverse);
}

.chat-widget__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.chat-widget__intro {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.chat-widget__starters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-block-start: var(--space-sm);
}

.chat-widget__starter {
  text-align: start;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: none;
  font-size: var(--text-xs);
  color: var(--color-accent-strong);
  cursor: pointer;
}

.chat-widget__starter:hover {
  background-color: var(--color-bg);
  border-color: var(--color-accent);
}

.chat-widget__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.chat-message {
  max-inline-size: 90%;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.chat-message--user {
  align-self: flex-end;
  background-color: var(--color-accent);
  color: var(--color-paper-000);
}

.chat-message--assistant {
  align-self: flex-start;
  background-color: var(--color-bg);
  color: var(--color-text);
  max-inline-size: 100%;
}

.chat-message--error {
  align-self: flex-start;
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.chat-message__text {
  white-space: pre-wrap;
}

.chat-message__mode-label {
  margin-block-end: var(--space-2xs);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-muted);
}

.chat-message__sources {
  margin-block-start: var(--space-2xs);
  padding-inline-start: var(--space-sm);
  font-size: var(--text-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-message__sources a {
  color: var(--color-accent-strong);
}

.chat-message__source-section {
  display: block;
  color: var(--color-text-muted);
}

.chat-message__suggestions {
  margin-block-start: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.chat-message__suggestion {
  text-align: start;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: none;
  font-size: var(--text-xs);
  color: var(--color-accent-strong);
  cursor: pointer;
}

.chat-message__suggestion:hover {
  background-color: var(--color-bg);
  border-color: var(--color-accent);
}

.chat-message--loading {
  align-self: flex-start;
  background-color: var(--color-bg);
  display: flex;
  gap: 4px;
  padding-block: var(--space-xs);
}

.chat-message--loading span {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-muted);
  animation: chat-widget-bounce 1.2s infinite ease-in-out;
}

.chat-message--loading span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-message--loading span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-widget-bounce {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }

  40% {
    opacity: 1;
  }
}

.chat-widget__notice {
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-block-start: var(--border-hairline);
  flex-shrink: 0;
}

.chat-widget__form {
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border-block-start: var(--border-hairline);
  flex-shrink: 0;
}

.chat-widget__input {
  flex: 1;
  resize: none;
  max-block-size: 4.5em;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  background-color: var(--color-bg-raised);
  color: var(--color-text);
}

.chat-widget__footer {
  padding: var(--space-2xs) var(--space-md) var(--space-sm);
  flex-shrink: 0;
}

.chat-widget__footer-link {
  font-size: var(--text-xs);
  color: var(--color-accent-strong);
}

@media (prefers-reduced-motion: reduce) {
  .chat-message--loading span {
    animation: none;
  }
}

@media (max-width: 479px) {
  .chat-widget__panel {
    inset-inline-end: var(--space-sm);
    inset-inline-start: var(--space-sm);
    inline-size: auto;
    block-size: min(70vh, calc(100vh - 140px));
  }
}