.page-chat {
  background: #f7f7f4;
}

.chat-app {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(320px, 1fr);
  gap: 1.25rem;
  min-height: 58vh;
  padding-bottom: 6rem;
}

/* The conversation IS the page here, so it sits in the second grid column,
   under the starter prompts. It used to be fixed to the right edge on top of
   this column, and the rule that lived here reserved 480px of padding so the
   page's own content was not buried under it -- an overlay and a hole cut for
   the overlay, on the one page whose whole purpose is the overlay.
   Measured at 1440x900: the dock covered the right third and the page's own
   input with it. See docs/design/site-design-audit-2026-09-20.md, /chat/. */
.chat-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* A flex/grid child will not shrink below its content without this, which
     is how a long unbroken source URL in an answer widens the whole page. */
  min-width: 0;
}

.page-chat .chat-dock {
  position: static;
  width: auto;
  height: auto;
  /* Tall enough to read a conversation in, short enough that the composer
     stays on screen; the log inside it scrolls. */
  min-height: min(60vh, 560px);
  bottom: auto;
  right: auto;
  transform: none;
  opacity: 1;
  box-shadow: none;
  z-index: auto;
}

.chat-history,
.chat-guide {
  background: #fff;
  border: 1px solid var(--colour-border, #deded8);
  border-radius: 8px;
}

.chat-history {
  align-self: start;
  display: flex;
  flex-direction: column;
  max-height: 68vh;
  min-height: 360px;
  overflow: hidden;
}

.chat-history__head {
  align-items: center;
  border-bottom: 1px solid var(--colour-border, #deded8);
  display: flex;
  justify-content: space-between;
  padding: .85rem 1rem;
}

.chat-history h2 {
  font-size: 1rem;
  margin: 0;
}

.chat-history__new,
.chat-history__delete,
.chat-dock__toggle,
.chat-form button {
  background: var(--colour-primary, #a51e27);
  border: 0;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.chat-history__new {
  border-radius: 6px;
  padding: .45rem .7rem;
}

.chat-save-note {
  background: #f4faf5;
  border-bottom: 1px solid #d5ead9;
  color: #244a2d;
  font-size: .86rem;
  line-height: 1.45;
  margin: 0;
  padding: .8rem 1rem;
}

.chat-history__list {
  flex: 1;
  overflow-y: auto;
  padding: .55rem;
}

.chat-history__empty {
  color: var(--colour-text-muted, #666);
  font-size: .9rem;
  margin: .5rem;
}

.chat-thread {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  margin: 0 0 .35rem;
  padding: .65rem .7rem;
  text-align: left;
  width: 100%;
}

.chat-thread:hover,
.chat-thread.is-active {
  border-color: var(--colour-primary, #a51e27);
}

.chat-thread strong {
  display: block;
  font-size: .92rem;
  line-height: 1.25;
  margin-bottom: .2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread span {
  color: var(--colour-text-muted, #666);
  display: block;
  font-size: .75rem;
}

.chat-history__actions {
  align-items: center;
  border-top: 1px solid var(--colour-border, #deded8);
  display: flex;
  gap: .75rem;
  padding: .75rem 1rem;
}

.chat-history__link {
  color: var(--colour-primary, #a51e27);
  font-weight: 700;
  text-decoration: none;
}

.chat-history__delete {
  background: transparent;
  color: var(--colour-primary, #a51e27);
  margin-left: auto;
  padding: 0;
}

.chat-guide {
  align-self: start;
  padding: 1.2rem;
}

.chat-intro {
  color: var(--colour-text-muted, #666);
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 760px;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.chat-suggestions button {
  background: #fff;
  border: 1px solid var(--colour-border, #ccc);
  border-radius: 8px;
  color: var(--colour-text, #272525);
  cursor: pointer;
  font: inherit;
  font-size: .88rem;
  padding: .5rem .75rem;
}

.chat-suggestions button:hover {
  border-color: var(--colour-primary, #a51e27);
  color: var(--colour-primary, #a51e27);
}

/* `.chat-launcher` -- the fixed red "Chat" pill -- was removed 2026-09-20 with
   its markup. It only ever rendered on /chat/, where it opened a panel that
   was already open, and no other template or view references it. The JS still
   guards for it (`if (launcher)`), because a null lookup there kills the whole
   script, not just the button. */

.chat-dock {
  background: #fff;
  border: 1px solid var(--colour-border, #deded8);
  border-radius: 8px;
  bottom: 5.25rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  height: min(74vh, 720px);
  overflow: hidden;
  position: fixed;
  right: 1.25rem;
  transform: translateY(120%);
  transition: transform .18s ease, opacity .18s ease;
  width: min(480px, calc(100vw - 2.5rem));
  z-index: 39;
}

.chat-dock.is-open {
  opacity: 1;
  transform: translateY(0);
}

.chat-dock:not(.is-open) {
  opacity: 0;
  pointer-events: none;
}

.chat-dock__bar {
  align-items: center;
  background: #191919;
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
}

.chat-dock__bar strong,
.chat-dock__bar span {
  display: block;
}

.chat-dock__bar span {
  color: #d7d7d2;
  font-size: .78rem;
  margin-top: .1rem;
}

.chat-dock__toggle {
  background: transparent;
  color: #fff;
  padding: .25rem 0;
}

.chat-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem .35rem;
}

.chat-msg {
  border-radius: 8px;
  line-height: 1.5;
  margin: 0 0 .85rem;
  padding: .8rem .9rem;
}

.chat-msg.user {
  background: var(--colour-primary, #a51e27);
  color: #fff;
  margin-left: 12%;
}

.chat-msg.bot {
  background: #f4f4f2;
  border: 1px solid var(--colour-border, #deded8);
  margin-right: 7%;
}

.chat-welcome {
  background: #f4faf5;
  border-color: var(--colour-secondary, #328747);
}

.chat-answer :first-child {
  margin-top: 0;
}

.chat-answer :last-child {
  margin-bottom: 0;
}

/* AGENTS.md §3a: media-derived text must be visually distinguished from the
   official record. The answer allowlist in core/sanitize.py drops `class` on
   everything but `<a>`, so the policy notice is a <blockquote> — a tag that
   survives sanitising — and this is what makes it look unlike an answer. */
.chat-answer blockquote {
  background: #fff8e7;
  border-left: 4px solid #e3bd62;
  border-radius: 0 6px 6px 0;
  margin: 0 0 .7rem;
  padding: .6rem .75rem;
  font-size: .88rem;
}

.chat-msg.bot .sources {
  color: var(--colour-text-muted, #666);
  font-size: .8rem;
  margin-top: .65rem;
}

/* Media citations never look like Hansard citations. The group class is what
   carries this now: one answer may cite Parliament's own record AND named
   reporting, so the distinction has to survive inside a mixed list. The
   list-wide class is kept for the all-media case. */
.chat-msg.bot .sources.sources--media a,
.chat-msg.bot .sources .sources__group--media a {
  border-bottom: 1px dotted currentColor;
}

.chat-msg.bot .sources .sources__group--media {
  display: inline-block;
  border-left: 3px solid #e3bd62;
  padding-left: .45rem;
  margin-left: .1rem;
}

.chat-msg.bot .sources a,
.chat-report {
  color: var(--colour-primary, #a51e27);
}

.chat-chart {
  margin-top: .8rem;
  max-width: 420px;
}

.chat-typing {
  color: #777;
  font-style: italic;
}

.chat-refusal {
  background: #fff8e7;
  border: 1px solid #e3bd62;
  border-radius: 8px;
  color: #5f4700;
  display: none;
  font-size: .9rem;
  line-height: 1.4;
  margin-bottom: .8rem;
  padding: .65rem .75rem;
}

.chat-provider {
  align-items: center;
  color: #777;
  display: flex;
  flex-wrap: wrap;
  font-size: .78rem;
  gap: .45rem;
  margin-top: .7rem;
}

.chat-provider__badge {
  background: #f4faf5;
  border: 1px solid var(--colour-secondary, #328747);
  border-radius: 999px;
  color: var(--colour-secondary, #1d6f3a);
  font-size: var(--text-xs);
  font-weight: 800;
  padding: .15rem .5rem;
  text-transform: uppercase;
}

.chat-report {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.chat-follow {
  background: #fff;
  border: 1px solid var(--colour-border, #deded8);
  border-radius: 8px;
  display: none;
  margin-top: .75rem;
  padding: .65rem .75rem;
}

.chat-follow__head {
  color: var(--colour-text-muted, #666);
  font-size: var(--text-xs);
  font-weight: 800;
  margin-bottom: .45rem;
  text-transform: uppercase;
}

.chat-follow__list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-follow__item {
  align-items: center;
  border-left: 3px solid var(--accent, var(--colour-primary, #a51e27));
  display: flex;
  gap: .5rem;
  min-width: 0;
  padding: .35rem .45rem;
}

.chat-follow__topic {
  color: inherit;
  display: flex;
  flex: 1;
  gap: .45rem;
  min-width: 0;
  text-decoration: none;
}

.chat-follow__domain {
  color: var(--accent, var(--colour-primary, #a51e27));
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.chat-follow__title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-follow__cta {
  border: 1px solid var(--colour-primary, #a51e27);
  border-radius: 999px;
  color: var(--colour-primary, #a51e27);
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 800;
  padding: .2rem .5rem;
  text-decoration: none;
}

.chat-form {
  background: #fafafa;
  border-top: 1px solid var(--colour-border, #deded8);
  display: flex;
  gap: .5rem;
  padding: .75rem;
}

.chat-form input {
  border: 1px solid var(--colour-border, #ccc);
  border-radius: 999px;
  flex: 1;
  font: inherit;
  min-width: 0;
  padding: .68rem .85rem;
}

.chat-form button {
  border-radius: 999px;
  padding: .68rem 1rem;
}

@media (max-width: 900px) {
  .chat-app {
    display: block;
    min-height: 0;
    padding-bottom: 2rem;
  }

  .chat-history {
    max-height: none;
    min-height: 0;
    margin-bottom: 1rem;
  }

  .chat-history__list {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
  }

  .chat-thread {
    flex: 0 0 220px;
    margin: 0;
  }

  .chat-dock {
    border: 0;
    border-radius: 0;
    bottom: 0;
    height: 100dvh;
    right: 0;
    width: 100vw;
  }

  .chat-msg.user {
    margin-left: 6%;
  }

  .chat-msg.bot {
    margin-right: 0;
  }
}

@media (max-width: 520px) {
  .chat-guide {
    padding: 1rem;
  }

  .chat-suggestions button {
    width: 100%;
  }

  .chat-form {
    padding: .65rem;
  }

  .chat-form button {
    padding-inline: .85rem;
  }
}