/* Moved from websites/templates/websites/website_akbot.html (redesign checklist: local CSS out of the templates).
   Loaded only by that page, at the place its <style> stood. */

/* Page-local: the saved-discussion sidebar, the chat thread bubbles and
   the message form. */
.akbot-layout {
  display: grid; gap: var(--space-4);
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
}
/* One column below the tablet breakpoint: the sidebar becomes a short
   list above the conversation rather than a squeezed rail beside it. */
@media (max-width: 60rem) {
  .akbot-layout { grid-template-columns: minmax(0, 1fr); }
  .akbot-sidebar { max-height: 14rem; }
}
.akbot-sidebar { overflow-y: auto; max-height: 70vh; }
.akbot-sidebar h2 { font-size: 0.95rem; margin: 0 0 var(--space-2); }
.akbot-discussions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.akbot-discussions a {
  display: block; padding: var(--space-2);
  border: 1px solid var(--color-divider); text-decoration: none;
  color: var(--color-text); font-size: 0.85rem; overflow-wrap: anywhere;
}
.akbot-discussions a:hover { background: var(--color-neutral-100); }
.akbot-discussions a.is-current {
  background: var(--color-accent-100); color: var(--color-accent-800);
  border-color: var(--color-accent-300);
}
.akbot-discussions .akbot-discussion-date {
  display: block; font-size: 0.72rem; color: var(--color-neutral-600);
  margin-top: 2px;
}
.akbot-thread {
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 200px; max-height: 60vh; overflow-y: auto;
  padding: var(--space-2) var(--space-1);
}
/* The messages are the kit's chat bubbles (§9): the corner nearest the
   speaker is 6px; the owner in Blue on the right, AkBot in Sky on the left. */
.akbot-msg {
  max-width: min(85%, 62ch); padding: 12px 16px;
  border-radius: 22px 22px 22px 6px; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 15px/1.5 var(--font);
}
.akbot-msg--user {
  align-self: flex-end; border-radius: 22px 22px 6px 22px;
  background: var(--blue); color: var(--white);
}
.akbot-msg--agent { align-self: flex-start; background: var(--sky); color: var(--navy); }
.akbot-msg--error { align-self: flex-start; background: var(--coral-bg); color: var(--coral-text); }
.akbot-msg--typing { color: var(--slate-text); font-style: italic; }
/* How long the owner waited for this answer, under the bubble that
   answered — measured server-side and stored with the message. */
.akbot-delay {
  align-self: flex-start; font-size: 0.72rem;
  color: var(--color-neutral-600); margin-top: calc(-1 * var(--space-2));
}
/* One executed tool call: collapsed to its summary line, expandable to
   the (truncated) result the model was given. */
.akbot-tool {
  align-self: flex-start; max-width: 85%;
  font-size: 0.8rem; color: var(--color-neutral-700);
  border: 1px dashed var(--color-neutral-400); border-radius: 8px;
  padding: var(--space-1) var(--space-2);
}
.akbot-tool summary { cursor: pointer; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.akbot-tool pre {
  margin: var(--space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 0.75rem; max-height: 200px; overflow-y: auto;
}
.akbot-form { display: flex; gap: var(--space-2); align-items: flex-end; margin-top: var(--space-3); }
.akbot-form textarea { flex: 1; resize: vertical; min-height: 44px; }
/* The model picker sits under the composer: it changes the NEXT turn,
   not the transcript above it. */
.akbot-options {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2); font-size: 0.85rem;
  color: var(--color-neutral-700); flex-wrap: wrap;
}
.akbot-options .helptext { margin: 0; }
.akbot-context h3 { margin: var(--space-3) 0 var(--space-1); font-size: 1rem; }