/* The chat panel (SLICE-ASK), on the site's own tokens (site.css). Linked only when the chat is built in. */
.chat-launch {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 20;
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--ms-accent);
  border-radius: 999px;
  background: var(--ms-bg);
  color: var(--ms-fg);
  font: 600 0.95rem/1.2 var(--ms-font-body);
  box-shadow: 0 2px 10px light-dark(rgba(23, 59, 56, 0.16), rgba(0, 0, 0, 0.45));
  cursor: pointer;
}
.chat-launch:hover { background: var(--ms-surface); }
.chat-panel {
  box-sizing: border-box;
  position: fixed;
  inset: auto max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) auto;
  z-index: 30;
  margin: 0;
  width: min(27rem, calc(100vw - 2rem));
  height: min(38rem, calc(100dvh - 2rem));
  padding: 0;
  border: 1px solid var(--ms-border);
  border-radius: calc(var(--ms-radius) * 2);
  background: var(--ms-bg);
  color: var(--ms-fg);
  box-shadow: 0 8px 30px light-dark(rgba(23, 59, 56, 0.2), rgba(0, 0, 0, 0.55));
  font-family: var(--ms-font-body);
}
.chat-panel[open] { display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.6rem 0.4rem 1rem; border-bottom: 1px solid var(--ms-border); }
.chat-head h2 { flex: 1; margin: 0; font-size: 1rem; }
.chat-icon, .chat-text-button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: var(--ms-radius);
  background: transparent;
  color: var(--ms-fg-muted);
  font: inherit;
  cursor: pointer;
}
.chat-icon { display: inline-grid; place-items: center; font-size: 1.5rem; line-height: 1; }
.chat-text-button { padding-inline: 0.5rem; font-size: 0.875rem; }
.chat-icon:hover, .chat-text-button:hover { color: var(--ms-fg); background: var(--ms-surface); }
.chat-notice { margin: 0; padding: 0.6rem 1rem; font-size: 0.8125rem; line-height: 1.45; color: var(--ms-fg-muted); border-bottom: 1px solid var(--ms-border); }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem 1rem 1rem; }
.chat-turn { display: grid; gap: 0.5rem; padding-block: 0.6rem; }
.chat-q { justify-self: end; max-width: 85%; margin: 0; padding: 0.5rem 0.75rem; border-radius: calc(var(--ms-radius) * 2); background: var(--ms-surface); white-space: pre-wrap; }
.chat-a { min-width: 0; font-size: 0.9375rem; line-height: 1.55; }
.chat-a p, .chat-a ul, .chat-a ol { margin: 0 0 0.6rem; }
.chat-a ul, .chat-a ol { padding-left: 1.25rem; }
.chat-a code { font-family: var(--ms-font-mono); font-size: 0.875em; overflow-wrap: anywhere; }
.chat-a h3 { margin: 0.9rem 0 0.4rem; font-size: 1rem; }
.chat-a pre { margin: 0 0 0.6rem; padding: 0.6rem 0.75rem; overflow-x: auto; border-radius: var(--ms-radius); background: var(--ms-surface); }
.chat-a pre code { overflow-wrap: normal; white-space: pre; }
/* A wide table scrolls inside the answer rather than widening the panel. */
.chat-table { margin: 0 0 0.6rem; overflow-x: auto; }
.chat-table table { border-collapse: collapse; font-size: 0.875rem; }
.chat-table th, .chat-table td { padding: 0.35rem 0.6rem; border: 1px solid var(--ms-border); text-align: left; vertical-align: top; }
.chat-table th { background: var(--ms-surface); }
.chat-sources, .chat-pending { font-size: 0.8125rem; color: var(--ms-fg-muted); }
.chat-message { padding: 0.5rem 0.75rem; border-left: 3px solid var(--site-focus); background: var(--ms-surface); border-radius: 0 var(--ms-radius) var(--ms-radius) 0; }
.chat-form { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.75rem 1rem; border-top: 1px solid var(--ms-border); }
.chat-form textarea {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  max-height: 8rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-bg);
  color: var(--ms-fg);
  font: inherit;
  font-size: 1rem;
  resize: vertical;
}
.chat-send {
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: 1px solid var(--ms-accent);
  border-radius: var(--ms-radius);
  background: var(--ms-accent);
  color: var(--ms-bg);
  font: 600 0.95rem/1 var(--ms-font-body);
  cursor: pointer;
}
.chat-send:disabled { opacity: 0.55; cursor: progress; }
/* Expanded: the window less a gutter, with the conversation in a column a line of text can be read across. */
.chat-panel.chat-panel-expanded { inset: 1rem; width: auto; height: auto; max-height: none; }
.chat-panel-expanded :is(.chat-notice, .chat-log, .chat-form) { padding-inline: max(1rem, calc((100% - 46rem) / 2)); }
.chat-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 40rem) {
  .chat-panel { inset: auto 0 0 0; width: 100%; height: min(85dvh, 40rem); border-radius: calc(var(--ms-radius) * 2) calc(var(--ms-radius) * 2) 0 0; }
  .chat-panel.chat-panel-expanded { inset: 0; height: auto; border: 0; border-radius: 0; }
}
@media print { .chat-launch, .chat-panel[open] { display: none; } }