/* ==========================================================================
   chatbot.css — styling for the docs chat widget.
   Uses MkDocs Material's CSS variables so it follows the indigo theme and the
   light/dark toggle automatically, with no duplicated colour values.
   ========================================================================== */

.dc-launcher {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border: none;
  border-radius: 999px;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dc-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.dc-launcher::before { content: "💬"; font-size: 0.95rem; }

/* The [hidden] attribute only implies display:none, which ANY explicit display
   rule overrides. .dc-panel sets display:flex and .dc-launcher sets display:flex,
   so `el.hidden = true` had no visible effect — the close button fired and the
   panel stayed open. This makes hidden actually hide. */
[hidden] { display: none !important; }

.dc-panel {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 21;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: calc(100vw - 2rem);
  height: 560px;
  max-height: calc(100vh - 3rem);
  border-radius: 14px;
  overflow: hidden;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.dc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}
.dc-title { font-size: 0.85rem; font-weight: 700; }
.dc-sub { font-size: 0.68rem; opacity: 0.85; margin-top: 2px; }
.dc-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  padding: 0 0.25rem;
}
.dc-close:hover { opacity: 1; }

.dc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.dc-msg { display: flex; flex-direction: column; max-width: 92%; }
.dc-msg--user { align-self: flex-end; align-items: flex-end; }
.dc-msg--bot { align-self: flex-start; }

.dc-bubble {
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  font-size: 0.76rem;
  line-height: 1.55;
  word-wrap: break-word;
}
.dc-msg--user .dc-bubble {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border-bottom-right-radius: 4px;
}
.dc-msg--bot .dc-bubble {
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
  border-bottom-left-radius: 4px;
}

.dc-bubble code {
  font-size: 0.72rem;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  background: var(--md-default-fg-color--lightest);
}
.dc-bubble pre {
  margin: 0.5rem 0;
  padding: 0.6rem;
  border-radius: 6px;
  overflow-x: auto;                    /* long code must scroll, not stretch */
  background: var(--md-default-fg-color--lightest);
}
.dc-bubble pre code { background: none; padding: 0; }

/* Lists. The system prompt asks the model to use bullets for genuine lists, so
   these need to read well in a ~400px panel: tight indent (the browser default
   of 40px wastes a tenth of the width), and no top/bottom margin so a list sits
   snugly under the sentence introducing it. */
.dc-bubble ul,
.dc-bubble ol {
  margin: 0.4rem 0;
  padding-left: 1.15rem;
}
.dc-bubble li {
  margin: 0.2rem 0;
  line-height: 1.5;
}
/* Nested lists get no extra vertical space — the indent already shows depth. */
.dc-bubble li > ul,
.dc-bubble li > ol {
  margin: 0.15rem 0;
}

/* --- Citations ---------------------------------------------------------- */
.dc-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-top: 0.45rem;
  padding-left: 0.15rem;
}
.dc-sources__label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  opacity: 0.55;
  margin-right: 0.15rem;
}
.dc-source {
  font-size: 0.64rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  text-decoration: none;
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
  border: 1px solid var(--md-accent-fg-color--transparent);
}
.dc-source:hover {
  border-color: var(--md-accent-fg-color);
  text-decoration: none;
}

/* Errors.
   These previously inherited the normal grey bot bubble and only changed the
   text colour, so a failure looked almost identical to an answer -- faint red
   on grey, easy to scroll straight past. An error the user cannot see is an
   error they will report as "it just doesn't work".
   The whole bubble is now restyled: red tint, left accent bar, warning icon. */
.dc-msg--bot .dc-bubble:has(.dc-error) {
  background: #fdecea;
  border-left: 3px solid #d32f2f;
  color: #7f1d1d;
}
.dc-error {
  display: block;
  color: #b3261e;
  font-weight: 600;
  line-height: 1.5;
}
.dc-error::before {
  content: "⚠ ";
  font-weight: 700;
}
/* Dark mode: the light red tint above would glare, so invert to a dark tint
   with a brighter accent. Uses Material's own scheme attribute. */
[data-md-color-scheme="slate"] .dc-msg--bot .dc-bubble:has(.dc-error) {
  background: rgba(211, 47, 47, 0.14);
  border-left-color: #ef5350;
  color: #ffcdd2;
}
[data-md-color-scheme="slate"] .dc-error { color: #ff8a80; }

/* Fallback for browsers without :has() -- the widget adds this class too. */
.dc-bubble--error {
  background: #fdecea !important;
  border-left: 3px solid #d32f2f;
  color: #7f1d1d;
}
[data-md-color-scheme="slate"] .dc-bubble--error {
  background: rgba(211, 47, 47, 0.14) !important;
  border-left-color: #ef5350;
  color: #ffcdd2;
}

/* --- Typing indicator --------------------------------------------------- */
.dc-dots { display: inline-flex; gap: 3px; padding: 0.15rem 0; }
.dc-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-default-fg-color--light);
  animation: dc-blink 1.3s infinite both;
}
.dc-dots i:nth-child(2) { animation-delay: 0.18s; }
.dc-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes dc-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .dc-dots i { animation: none; opacity: 0.6; }
  .dc-launcher { transition: none; }
}

/* --- Input -------------------------------------------------------------- */
.dc-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.dc-input {
  flex: 1;
  padding: 0.5rem 0.7rem;
  font-size: 0.76rem;
  font-family: inherit;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 8px;
}
.dc-input:focus {
  outline: none;
  border-color: var(--md-accent-fg-color);
}
.dc-input:disabled { opacity: 0.55; }
.dc-send {
  padding: 0.5rem 0.9rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--md-primary-bg-color);
  background: var(--md-primary-fg-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.dc-send:disabled { opacity: 0.5; cursor: default; }

/* --- Small screens ------------------------------------------------------ */
@media screen and (max-width: 480px) {
  .dc-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}