.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 dock is fixed to the right edge and open by default, so the page's own
   guide content must keep clear of it or the intro text and suggestion chips
   sit unreachable beneath the overlay. */
@media (min-width: 901px) {
  body:has(.chat-dock.is-open) .chat-app {
    padding-right: calc(min(480px, 100vw - 2.5rem) + 2rem);
  }
}

.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 {
  background: var(--colour-primary, #a51e27);
  border: 0;
  border-radius: 999px;
  bottom: 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: .85rem 1.1rem;
  position: fixed;
  right: 1.25rem;
  z-index: 40;
}

.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: .65rem;
  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: .73rem;
  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: .62rem;
  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-launcher {
    bottom: 1rem;
    right: 1rem;
  }

  .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;
  }
}