/* Documentary programme chatbot. Namespaced to avoid changing the existing site. */
.doc-chat {
  --chat-paper: rgba(247, 244, 237, .965);
  --chat-paper-solid: #f7f4ed;
  --chat-ink: var(--ink, #131820);
  --chat-muted: rgba(19, 24, 32, .62);
  --chat-hair: rgba(19, 24, 32, .16);
  --chat-accent: var(--blue, #1542a6);
  position: fixed;
  z-index: 1200;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  pointer-events: none;
  font-family: var(--sans, sans-serif);
  color: var(--chat-ink);
}

.doc-chat__launcher,
.doc-chat__panel {
  pointer-events: auto;
}

.doc-chat__launcher {
  position: relative;
  width: 58px;
  height: 58px;
  margin-left: auto;
  border: 1px solid rgba(19, 24, 32, .22);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--chat-ink);
  background: rgba(247, 244, 237, .94);
  box-shadow: 0 10px 32px rgba(19, 24, 32, .13), inset 0 1px rgba(255,255,255,.75);
  transition: transform 220ms cubic-bezier(.22,1,.36,1), background-color 220ms ease, border-color 220ms ease;
  -webkit-tap-highlight-color: transparent;
}

.doc-chat__launcher:hover { transform: translateY(-2px); border-color: rgba(19,24,32,.38); }
.doc-chat__launcher:focus-visible,
.doc-chat__icon-button:focus-visible,
.doc-chat__suggestion:focus-visible,
.doc-chat__send:focus-visible,
.doc-chat__source-link:focus-visible,
.doc-chat__input:focus-visible {
  outline: 2px solid var(--chat-accent);
  outline-offset: 3px;
}

.doc-chat__dolphin {
  display: block;
  font-size: 27px;
  line-height: 1;
  transform-origin: 48% 55%;
  animation: docDolphinFloat 3.2s cubic-bezier(.45,0,.55,1) infinite;
  will-change: transform;
}

.doc-chat.is-open .doc-chat__dolphin { animation-play-state: paused; transform: translateY(0) rotate(0deg); }

.doc-chat__panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: min(390px, calc(100vw - 24px));
  height: min(650px, 70dvh);
  min-height: min(500px, 62dvh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--chat-hair);
  border-radius: 20px;
  background: var(--chat-paper-solid);
  background: var(--chat-paper);
  box-shadow: 0 24px 60px rgba(19,24,32,.16);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transform-origin: right bottom;
  transition: opacity 240ms ease, transform 260ms cubic-bezier(.22,1,.36,1);
}

@supports (backdrop-filter: blur(14px)) {
  .doc-chat__panel {
    backdrop-filter: blur(18px) saturate(1.04);
    -webkit-backdrop-filter: blur(18px) saturate(1.04);
  }
}

.doc-chat__panel.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.doc-chat__header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 15px;
  border-bottom: 1px solid var(--chat-hair);
  background: rgba(255,255,255,.18);
}

.doc-chat__heading { min-width: 0; }
.doc-chat__title {
  margin: 0;
  font-family: var(--display, Georgia, serif);
  font-size: 22px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.018em;
}
.doc-chat__subtitle {
  margin: 5px 0 0;
  max-width: 270px;
  color: var(--chat-muted);
  font-size: 12px;
  line-height: 1.35;
}

.doc-chat__header-actions { display: flex; gap: 3px; flex: 0 0 auto; }
.doc-chat__icon-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--chat-ink);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  display: grid;
  place-items: center;
  transition: background-color 180ms ease, transform 180ms ease;
}
.doc-chat__icon-button:hover { background: rgba(19,24,32,.055); transform: translateY(-1px); }
.doc-chat__close { font-size: 24px; font-weight: 300; }

.doc-chat__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  scroll-behavior: smooth;
}

.doc-chat__intro { padding: 5px 0 4px; }
.doc-chat__intro-copy {
  margin: 0 0 17px;
  font-family: var(--display, Georgia, serif);
  font-size: 18px;
  line-height: 1.35;
}
.doc-chat__suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.doc-chat__suggestion {
  border: 1px solid var(--chat-hair);
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  padding: 8px 11px;
  color: var(--chat-ink);
  font: 500 12px/1.1 var(--sans, sans-serif);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.doc-chat__suggestion:hover { transform: translateY(-1px); border-color: rgba(19,24,32,.34); background: rgba(255,255,255,.52); }

.doc-chat__message-row { display: flex; margin: 0 0 13px; }
.doc-chat__message-row--user { justify-content: flex-end; }
.doc-chat__message-row--assistant { justify-content: flex-start; }
.doc-chat__bubble {
  max-width: 88%;
  padding: 11px 13px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.47;
}
.doc-chat__bubble--user {
  border-bottom-right-radius: 5px;
  background: var(--chat-ink);
  color: var(--chat-paper-solid);
}
.doc-chat__bubble--assistant {
  border: 1px solid rgba(19,24,32,.11);
  border-bottom-left-radius: 5px;
  background: rgba(255,255,255,.42);
}
.doc-chat__message-text { white-space: pre-wrap; overflow-wrap: anywhere; }

.doc-chat__source {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(19,24,32,.11);
  display: grid;
  gap: 5px;
}
.doc-chat__source-label { color: var(--chat-muted); font-size: 10px; line-height: 1.35; letter-spacing: .03em; }
.doc-chat__source-link {
  width: max-content;
  max-width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(19,24,32,.34);
  padding: 1px 0 2px;
  background: none;
  color: var(--chat-ink);
  font: 600 11px/1.3 var(--sans, sans-serif);
  text-align: left;
  cursor: pointer;
}

.doc-chat__typing { display: flex; align-items: center; gap: 5px; min-height: 35px; }
.doc-chat__typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .32;
  animation: docTyping 1.15s ease-in-out infinite;
}
.doc-chat__typing-dot:nth-child(2) { animation-delay: 120ms; }
.doc-chat__typing-dot:nth-child(3) { animation-delay: 240ms; }

.doc-chat__composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--chat-hair);
  background: rgba(247,244,237,.89);
}
.doc-chat__input {
  display: block;
  width: 100%;
  min-height: 42px;
  max-height: 108px;
  resize: none;
  overflow-y: auto;
  border: 1px solid rgba(19,24,32,.17);
  border-radius: 12px;
  padding: 10px 11px;
  background: rgba(255,255,255,.52);
  color: var(--chat-ink);
  font: 400 14px/1.35 var(--sans, sans-serif);
}
.doc-chat__input::placeholder { color: rgba(19,24,32,.46); }
.doc-chat__send {
  min-height: 42px;
  border: 1px solid var(--chat-ink);
  border-radius: 11px;
  padding: 0 13px;
  background: var(--chat-ink);
  color: var(--chat-paper-solid);
  font: 600 12px/1 var(--sans, sans-serif);
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease;
}
.doc-chat__send:hover:not(:disabled) { transform: translateY(-1px); }
.doc-chat__send:disabled { opacity: .45; cursor: wait; }
.doc-chat__input:disabled { opacity: .72; }

@keyframes docDolphinFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  48% { transform: translate3d(0, -3px, 0) rotate(2.5deg); }
  70% { transform: translate3d(0, -1px, 0) rotate(1deg); }
}
@keyframes docTyping {
  0%, 70%, 100% { transform: translateY(0); opacity: .28; }
  35% { transform: translateY(-3px); opacity: .72; }
}

@media (max-width: 620px) {
  .doc-chat {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .doc-chat__launcher { width: 55px; height: 55px; }
  .doc-chat__panel {
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: auto;
    height: min(640px, 68dvh);
    min-height: min(470px, 60dvh);
    transform-origin: right bottom;
  }
  .doc-chat__header { padding: 16px 15px 13px; }
  .doc-chat__body { padding: 15px; }
  .doc-chat__composer { padding: 10px; }
  .doc-chat__bubble { max-width: 91%; }
}

@media (max-width: 360px) {
  .doc-chat__panel { right: 8px; left: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .doc-chat__title { font-size: 20px; }
  .doc-chat__subtitle { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-chat *, .doc-chat *::before, .doc-chat *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .doc-chat__dolphin { animation: none; will-change: auto; }
}

/* Explicitly preserve the HTML hidden state even though the panel has display:grid. */
.doc-chat__panel[hidden] { display: none !important; }

/* V15 — viewport-safe mobile anchoring. Functional behavior is unchanged. */
@media (max-width: 620px) {
  .doc-chat {
    max-width: 100dvw;
  }
  .doc-chat__panel {
    width: auto;
    max-width: calc(100dvw - 24px);
    box-sizing: border-box;
  }
}
@media (max-width: 360px) {
  .doc-chat__panel {
    max-width: calc(100dvw - 16px);
  }
}