/* Caelaria AI assistant. Sits on its own layer above the film, outside <main>. */
.assistant {
  --panel: #13101fee;
  --line: #ffffff1f;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 35;
  font:
    15px/1.5 DM,
    Arial,
    sans-serif;
  color: var(--paper, #f0eee8);
  cursor: auto;
  /* The container never blocks the page; only the visible launcher and the panel take clicks. */
  pointer-events: none;
}
.assistant-panel,
.assistant.is-open {
  pointer-events: auto;
}
.assistant button,
.assistant a,
.assistant input[type="checkbox"],
.assistant select {
  cursor: pointer;
}
.assistant textarea,
.assistant input {
  cursor: text;
}
.assistant-launch {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px 0 12px;
  border: 1px solid #d5b8ff55;
  border-radius: 999px;
  background: #120e1dd9;
  color: inherit;
  font:
    14px/1 Space,
    Arial,
    sans-serif;
  letter-spacing: -0.01em;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px #0007;
  /* Hidden (not just transparent) until the film is past the opening, so it is out of the Tab order
     and the accessibility tree while it cannot be seen. visibility waits for the fade on hide. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0s linear 0.5s,
    border-color 0.2s;
}
.assistant.is-ready .assistant-launch {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0s,
    border-color 0.2s;
}
/* Never text over the product: while the shell's blade sweeps behind the launcher (the dive and the
   return to the ending), cinema-world.js sets .shell-over-launch and the pill steps aside, as the
   top bar does. A launcher with keyboard focus stays put. */
.shell-over-launch .assistant.is-ready .assistant-launch:not(:focus-visible) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.5s ease,
    visibility 0s linear 0.2s,
    border-color 0.2s;
}
.assistant-launch:hover {
  border-color: #d5b8ff;
}
.assistant-launch:focus-visible,
.assistant button:focus-visible,
.assistant textarea:focus-visible,
.assistant input:focus-visible,
.assistant select:focus-visible {
  outline: 2px solid #d5b8ff;
  outline-offset: 3px;
}
.assistant.is-open .assistant-launch {
  display: none;
}
.assistant-orb {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 8%, transparent 30%),
    radial-gradient(circle at 50% 55%, #b98af5, #582894 55%, #1d1233 100%);
  box-shadow: 0 0 18px #9862e8aa;
  animation: assistant-pulse 4s ease-in-out infinite;
}
@keyframes assistant-pulse {
  50% {
    box-shadow: 0 0 28px #b98af5cc;
  }
}
.assistant-panel {
  width: min(400px, calc(100vw - 48px));
  height: min(680px, calc(100svh - 48px));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 80px #000a;
  overflow: hidden;
}
.assistant-panel[hidden] {
  display: none;
}
.assistant-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 6px 18px;
  border-bottom: 1px solid var(--line);
}
.assistant-panel header p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font:
    16px/1 Space,
    Arial,
    sans-serif;
  letter-spacing: -0.02em;
}
.assistant-badge {
  font:
    11px/1 DM,
    Arial,
    sans-serif;
  letter-spacing: 0.12em;
  padding: 4px 6px;
  border-radius: 6px;
  background: #9862e833;
  color: #d5b8ff;
}
/* A 44px tap target (on phones it is the only way out of the full-screen panel); the glyph stays
   where it was, centred 32px in from the panel edge. */
.assistant-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 24px;
  line-height: 1;
}
.assistant-close:hover {
  background: #ffffff14;
}
.assistant-notice {
  margin: 0;
  padding: 8px 18px;
  font-size: 11px;
  line-height: 1.45;
  color: #c5bacf;
  border-bottom: 1px solid var(--line);
}
.assistant-notice a {
  color: #d5b8ff;
}
/* The small Privacy links keep their place in the sentence but get a 44px-tall hit area: padding
   widens the target and the matching negative margin keeps the text where it was. */
.assistant-notice a,
.assistant-gate p a,
.assistant-lead-note a {
  position: relative;
  display: inline-block;
  padding: 14px 6px;
  margin: -14px -6px;
}
.assistant-log {
  flex: 1;
  margin: 0;
  padding: 16px 18px 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.assistant .msg {
  display: flex;
  margin: 0 0 10px;
}
.assistant .msg p {
  margin: 0;
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.assistant .msg-bot p {
  background: #ffffff12;
  border-bottom-left-radius: 5px;
}
.assistant .msg-user {
  justify-content: flex-end;
}
.assistant .msg-user p {
  background: #7543b0;
  color: #fff;
  border-bottom-right-radius: 5px;
}
.assistant .msg.typing p {
  color: #c5bacf;
  animation: assistant-blink 1.2s ease-in-out infinite;
}
@keyframes assistant-blink {
  50% {
    opacity: 0.4;
  }
}
.assistant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 10px;
}
.assistant-options:empty {
  display: none;
}
.assistant-options button {
  padding: 8px 12px;
  border: 1px solid #d5b8ff66;
  border-radius: 999px;
  background: transparent;
  color: #e9dcff;
  font: inherit;
  font-size: 13px;
  text-align: left;
}
.assistant-options button:hover {
  background: #9862e82e;
  border-color: #d5b8ff;
}
.assistant-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 12px 18px;
  border-top: 1px solid var(--line);
}
.assistant-input[hidden] {
  display: none;
}
.assistant-input textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  padding: 9px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px; /* stops iOS zooming on focus */
}
.assistant-input textarea::placeholder {
  color: #a99dba;
}
.assistant-input button,
.assistant-lead button {
  border: 0;
  background: #f0eee8;
  color: #0c0b16;
  font:
    15px/1 Space,
    Arial,
    sans-serif;
}
.assistant-input button {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  font-size: 18px;
}
.assistant-input button:hover,
.assistant-lead button:hover {
  background: #d5b8ff;
}
.assistant-lead {
  display: grid;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 14px;
  border: 1px solid #d5b8ff44;
  border-radius: 16px;
  background: #ffffff0a;
  max-height: 62%;
  overflow-y: auto;
  flex: none;
}
.assistant-lead [hidden] {
  display: none;
}
.assistant-lead[hidden] {
  display: none;
}
.assistant-lead-title {
  margin: 0;
  font:
    16px/1.25 Space,
    Arial,
    sans-serif;
  letter-spacing: -0.02em;
}
.assistant-lead-note,
.assistant-lead-status {
  margin: 0;
  font-size: 12px;
  color: #c5bacf;
}
.assistant-lead-status a {
  color: #d5b8ff;
}
.assistant-lead label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #d5c9e6;
}
.assistant-lead input:not([type="checkbox"]),
.assistant-lead select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #ffffff2e;
  border-radius: 10px;
  background: #0c0b16aa;
  color: inherit;
  font: inherit;
  font-size: 16px;
}
.assistant-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.assistant-lead .assistant-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.4;
}
.assistant-consent input {
  margin-top: 2px;
  accent-color: #9862e8;
}
.assistant-lead button {
  min-height: 44px;
  border-radius: 999px;
}
.assistant-lead button:disabled {
  opacity: 0.6;
}
.assistant-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .assistant {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .assistant-launch {
    height: 44px;
    padding: 0 16px 0 10px;
    font-size: 13px;
  }
  .assistant-orb {
    width: 22px;
    height: 22px;
  }
  .assistant.is-open {
    inset: 0;
  }
  .assistant-panel {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
@media (max-width: 340px) {
  .assistant-row {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-orb,
  .assistant .msg.typing p {
    animation: none;
  }
  .assistant-launch {
    transition: none;
  }
}

/* The film's custom cursor dot steps aside while the assistant is open. */
html.assistant-open .cursor {
  display: none !important;
}
html.assistant-open body,
html.assistant-open a {
  cursor: auto !important;
}

/* `hidden` always wins inside the widget. */
.assistant [hidden] {
  display: none !important;
}
.assistant-gate {
  display: grid;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 14px;
  border: 1px solid #d5b8ff44;
  border-radius: 16px;
  background: #ffffff0a;
}
.assistant-gate p {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #d5c9e6;
}
.assistant-gate a {
  color: #d5b8ff;
}
.assistant-gate button {
  min-height: 42px;
  border-radius: 999px;
  font:
    14px/1 Space,
    Arial,
    sans-serif;
}
.assistant-agree {
  border: 0;
  background: #f0eee8;
  color: #0c0b16;
}
.assistant-agree:hover {
  background: #d5b8ff;
}
.assistant-human {
  border: 1px solid #ffffff3d;
  background: transparent;
  color: inherit;
}
.assistant-human:hover {
  border-color: #d5b8ff;
}
.assistant-lead-note a {
  color: #d5b8ff;
}