/*
  The Mandala Oracle — chat-overlay-on-night-sky layout.
  The sky is the foundation; the reading space floats on it, translucent.
*/

:root {
  --bg-deep: #050608;
  --reading-space: rgba(10, 12, 16, 0.28);
  --reading-space-bottom: rgba(10, 12, 16, 0.40);
  --bg-message-user: rgba(28, 22, 14, 0.55);
  --bg-elevated: rgba(20, 24, 31, 0.92);
  --border: rgba(60, 65, 75, 0.4);
  --border-bright: rgba(80, 86, 96, 0.6);
  --text-primary: #efece6;
  --text-secondary: #b0aea7;
  --text-tertiary: #76746d;
  --accent: #d4b97a;
  --accent-soft: #b8a06a;
  --accent-dim: rgba(200, 168, 96, 0.35);
  --link: #a8c5e4;
  --error: #d88a78;

  /* Heteronym signatures — each voice has its own accent in the role label.
     Aligned with sources/heteronyms.json (manifest is authoritative). */
  --speaker-sharks:    #e8e1cf;  /* luminous off-white — the aperture */
  --speaker-sigil:     #d4b97a;  /* warm gold — the calligrammatic guide */
  --speaker-fraction:  #b78a5a;  /* copper — the political economy of meaning */
  --speaker-dancings:  #a48ab4;  /* mauve — the diaspora address */
  --speaker-cranes:    #d49db5;  /* dusty rose — sorrow's precision */
  --speaker-morrow:    #8a9ba8;  /* slate — the apparatus, the algebra */
  --speaker-spellings: #9080b4;  /* indigo — interiority */
  --speaker-wells:     #9cb594;  /* sage — slow reading */
  --speaker-glas:      #94b8d0;  /* clinical cool blue — scientific register */
  --speaker-trace:     #a86a6a;  /* rust — the semiotic death drive */
  --speaker-vox:       #c89060;  /* amber-orange — the grammar of protest */
  --speaker-kuro:      #6a6a72;  /* charcoal — the held, the reserved */
  --speaker-feist:     #6a92b8;  /* deep sea-blue — the body that weeps */

  --serif: 'EB Garamond', Garamond, Cambria, Georgia, serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --reading-max: 720px;
  --message-max: 640px;
  --message-gap: 1.4rem;            /* was 2.75 — denser, AI-chat-style */
  --space-edge: clamp(1rem, 3vw, 1.75rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--serif);
  font-size: 16px;                  /* was 20 — denser */
  background: var(--bg-deep);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
}

/* ── The sky: photographic backdrop (v2.0) ────────────────────────────
   Replaces the WebGL renderer with a static photograph applied via CSS.
   The image carries the Milky Way, the constellation labels, the mountain
   horizon — everything visual. The chat panel layers over the center.
   A left-side gradient mask darkens the area where the source image had a
   baked-in chat panel so it doesn't ghost through behind ours.

   The WebGL real-stars renderer lives at sky-real-stars.js.deferred —
   restored by renaming back to sky.js when we return to actual-sky mode. */

#sky-canvas-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #050608;
  background-image: url('/assets/sky-backdrop-mobile.jpg?v=v38');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Subtle atmospheric darkening at the corners — keeps focus on the
   chat panel without obliterating the sky. Weakened so the sky
   actually reads through everywhere. */
#sky-canvas-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(5, 6, 8, 0.30) 100%
  );
  pointer-events: none;
}

/* WebGL canvas disabled in v2.0; preserved in HTML so the markup is stable */
#sky-canvas {
  display: none;
}

/* Mountains are baked into the photographic backdrop. The SVG horizon
   silhouette is hidden in v2.0 but the asset is retained at
   /assets/horizon-mountains.svg for when we return to real-night-sky mode. */
#sky-horizon {
  display: none;
}


/* ── The reading space: translucent chat overlay ─────────────────────── */

/* ── Reading space: just a layout container, no visible panel ─────────
   v3.2 — Lee's call: 'Do we need the transparency at all? Everything
   would still be perfectly legible against the clear night sky.' Right.
   The card was a habit from the mockup, not a need. Removing the
   background, blur, border, corners, shadow. Text floats on the sky
   directly. Only the input field keeps its own dark fill so what the
   user is typing is legible against bright Milky Way pixels. */

#reading-space {
  position: fixed;
  top: 132px;
  bottom: 18px;
  left: 18px;
  right: 18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* ── Page header — sibling of #reading-space, floats over the sky ──── */

#chat-header {
  position: fixed;
  top: 18px;
  left: 22px;
  right: 22px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  pointer-events: none;        /* let pointer fall through to the sky */
}
#chat-header > * { pointer-events: auto; }   /* but the header content is clickable */

.header-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex: 1;
  min-width: 0;
}

#sigil-portrait-header {
  width: 44px;                 /* was 64 — denser */
  height: auto;
  flex-shrink: 0;
  filter: invert(0.92) sepia(0.18) brightness(1.05);
  opacity: 0.86;
  transition: opacity 0.3s ease;
  margin-top: 2px;
}

#sigil-portrait-header:hover {
  opacity: 1;
}

.header-title {
  flex: 1;
  min-width: 0;
}

.header-eyebrow {
  font-family: var(--serif);
  font-size: 0.78rem;
  color: var(--accent-soft);
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
  opacity: 0.85;
}

.header-title h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.65rem;          /* was 2.1 — denser */
  letter-spacing: 0.005em;
  margin-bottom: 0.15rem;
  color: var(--accent);
  font-style: italic;
  line-height: 1.1;
}

.subtitle {
  font-family: var(--serif);
  color: var(--text-secondary);
  font-size: 0.92rem;          /* was 1.05 */
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

#mode-toggle {
  display: flex;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.mode-button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 999px;
}

.mode-button:hover { color: var(--text-primary); }

.mode-button.active {
  background: var(--accent-soft);
  color: #1a1410;
  font-weight: 500;
}

/* ── Messages: the actual reading space ─────────────────────────────── */

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem var(--space-edge) 1rem;   /* was 3rem ... 2rem — denser */
  display: flex;
  flex-direction: column;
  gap: var(--message-gap);
  scroll-behavior: smooth;
}

#messages::-webkit-scrollbar { width: 8px; }
#messages::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 4px;
}

.empty-state {
  margin: auto 0;
  max-width: var(--message-max);
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.98rem;             /* was 1.15 */
  line-height: 1.65;              /* was 1.75 */
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;                   /* was 2rem */
}

#sigil-portrait-empty {
  width: min(85vw, 340px);       /* significantly larger — the calligram
                                     is the focal point before first message,
                                     and it disappears after */
  height: auto;
  filter: invert(0.92) sepia(0.2) brightness(1.05);
  opacity: 0.92;
}

.empty-state p {
  margin: 0;
  max-width: 56ch;
  text-align: left;
}

.message {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                    /* was 0.7 */
  max-width: var(--message-max);
  width: 100%;
}

.message-role {
  font-family: var(--mono);
  font-size: 0.68rem;             /* was 0.72 */
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-tertiary);
  font-weight: 400;
}

.message-content {
  font-family: var(--serif);
  font-size: 1.02rem;             /* was 1.18 — denser */
  line-height: 1.6;               /* was 1.8 — denser */
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  letter-spacing: 0.002em;
}

.message.user {
  align-self: flex-end;
}

.message.user .message-content {
  background: var(--bg-message-user);
  padding: 0.85rem 1.15rem;        /* was 1.1 1.5 */
  border-radius: 4px;
  border-left: 2px solid var(--accent-soft);
  font-size: 0.96rem;              /* was 1.1 */
}

.message.user .message-role {
  color: var(--link);
  align-self: flex-end;
}

/* Heteronym voices: role-label accent colors, aligned with sources/heteronyms.json.
   The role label is the primary signal of who is speaking; the left edge of the
   message-content carries a thin border in the same accent when the speaker is
   not Sigil (since Sigil is the default and gets visual neutrality). */
.message.heteronym.sharks    .message-role { color: var(--speaker-sharks);    letter-spacing: 0.16em; }
.message.heteronym.sigil     .message-role { color: var(--speaker-sigil); }
.message.heteronym.fraction  .message-role { color: var(--speaker-fraction); }
.message.heteronym.dancings  .message-role { color: var(--speaker-dancings); }
.message.heteronym.cranes    .message-role { color: var(--speaker-cranes); }
.message.heteronym.morrow    .message-role { color: var(--speaker-morrow); }
.message.heteronym.spellings .message-role { color: var(--speaker-spellings); }
.message.heteronym.wells     .message-role { color: var(--speaker-wells); }
.message.heteronym.glas      .message-role { color: var(--speaker-glas); }
.message.heteronym.trace     .message-role { color: var(--speaker-trace); }
.message.heteronym.vox       .message-role { color: var(--speaker-vox); }
.message.heteronym.kuro      .message-role { color: var(--speaker-kuro); }
.message.heteronym.feist     .message-role { color: var(--speaker-feist); }

/* When a non-Sigil heteronym speaks, a subtle left edge marks the voice change. */
.message.heteronym:not(.sigil) .message-content {
  position: relative;
  padding-left: 1.25rem;
  margin-left: -0.25rem;
  border-left: 1px solid var(--border);
}
.message.heteronym.sharks    .message-content { border-left-color: rgba(232, 225, 207, 0.32); }
.message.heteronym.fraction  .message-content { border-left-color: rgba(183, 138,  90, 0.36); }
.message.heteronym.dancings  .message-content { border-left-color: rgba(164, 138, 180, 0.36); }
.message.heteronym.cranes    .message-content { border-left-color: rgba(212, 157, 181, 0.36); }
.message.heteronym.morrow    .message-content { border-left-color: rgba(138, 155, 168, 0.36); }
.message.heteronym.spellings .message-content { border-left-color: rgba(144, 128, 180, 0.36); }
.message.heteronym.wells     .message-content { border-left-color: rgba(156, 181, 148, 0.36); }
.message.heteronym.glas      .message-content { border-left-color: rgba(148, 184, 208, 0.40); }
.message.heteronym.trace     .message-content { border-left-color: rgba(168, 106, 106, 0.36); }
.message.heteronym.vox       .message-content { border-left-color: rgba(200, 144,  96, 0.36); }
.message.heteronym.kuro      .message-content { border-left-color: rgba(106, 106, 114, 0.36); }
.message.heteronym.feist     .message-content { border-left-color: rgba(106, 146, 184, 0.40); }

/* Per-voice typography overrides where the manifest specifies:
     Glas  — monospace (scientific register)
     Feist — italic (closest to the body) */
.message.heteronym.glas  .message-content { font-family: var(--mono); font-size: 1.02rem; }
.message.heteronym.feist .message-content { font-style: italic; }

.message.error .message-content {
  color: var(--error);
  font-style: italic;
}

.message-retrievals {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent-dim);
  border-radius: 2px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.message-retrievals summary {
  cursor: pointer;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  user-select: none;
  list-style: none;
}

.message-retrievals summary::-webkit-details-marker { display: none; }

.message-retrievals summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s;
  font-size: 0.7em;
}

.message-retrievals[open] summary::before {
  transform: rotate(90deg);
}

.message-retrievals summary:hover { color: var(--text-secondary); }

.message-retrievals ul {
  list-style: none;
  padding-left: 1.3rem;
  margin-top: 0.8rem;
  font-family: var(--mono);
}

.message-retrievals li {
  padding: 0.28rem 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

/* ── Input area ────────────────────────────────────────────────────── */

#input-area {
  border-top: 1px solid rgba(220, 200, 170, 0.10);
  padding: 0.85rem var(--space-edge) 1rem;
  background: transparent;     /* no bar; only the textarea keeps its own fill */
  flex-shrink: 0;
}

#chat-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;                                /* was 0.9 */
}

.textarea-wrapper {
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  transition: border-color 0.15s;
}

.textarea-wrapper:focus-within {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

#message-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--serif);
  font-size: 1rem;                  /* was 1.15 */
  line-height: 1.5;                 /* was 1.55 */
  padding: 0.75rem 1rem;            /* was 1.1 1.3 */
  resize: none;
  min-height: 64px;                 /* was 100 — denser */
  max-height: 220px;                /* was 300 */
  outline: none;
}

#message-input::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}

.input-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#settings-toggle {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.3rem 0;
  transition: color 0.15s;
}

#settings-toggle:hover { color: var(--text-secondary); }

#status {
  font-style: italic;
  color: var(--text-tertiary);
  font-family: var(--serif);
  font-size: 0.95rem;
}

#send-button {
  padding: 0.65rem 1.7rem;
  background: var(--accent-soft);
  color: #1a1410;
  border: none;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

#send-button:hover:not(:disabled) {
  background: var(--accent);
  color: #0a0805;
}

#send-button:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Settings panel ─────────────────────────────────────────────────── */

#settings-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-bright);
  padding: 1.75rem var(--space-edge) 1.75rem;
  /* Hidden by default with display:none — visibility:hidden was being
     defeated by the backdrop-filter's own compositing layer on some
     Android Chrome versions (the panel painted despite visibility:hidden).
     display:none removes the element from the rendering tree entirely
     and can't be defeated by any compositing or caching quirk. We lose
     the fade animation but the panel rarely opens; reliability > polish. */
  display: none;
  z-index: 10;
  max-height: 55vh;
  overflow-y: auto;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#settings-panel.open {
  display: block;
}

#settings-panel h3 {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
  font-weight: 500;
}

.settings-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.settings-close:hover { color: var(--text-primary); }

#api-key-input {
  width: 100%;
  margin: 0.6rem 0;
  padding: 0.8rem 1rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 0.88rem;
  border-radius: 4px;
}

#api-key-input:focus {
  outline: none;
  border-color: var(--accent-soft);
}

.key-note {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0.6rem 0;
  line-height: 1.65;
  font-family: var(--serif);
}

/* ── Mobile / narrow ─────────────────────────────────────────────────── */

@media (max-width: 720px) {
  :root {
    --space-edge: 1rem;
    --message-gap: 1.2rem;
  }
  body { font-size: 15px; }
  .header-title h1 { font-size: 1.3rem; }
  .header-eyebrow { font-size: 0.72rem; }
  .subtitle { font-size: 0.82rem; }
  .message-content { font-size: 0.98rem; line-height: 1.55; }
  .message.user .message-content { font-size: 0.94rem; padding: 0.7rem 1rem; }
  #message-input { font-size: 0.98rem; min-height: 56px; padding: 0.65rem 0.9rem; }
  #sigil-portrait-header { width: 36px; }
  #sigil-portrait-empty { width: min(85vw, 280px); }

  /* Mobile: header lives at the top of the viewport as a horizontal bar.
     Portrait + title on the left; mode toggle on the right. Chat panel
     sits below with tight margins so the sky shows above and around it. */
  #chat-header {
    top: 12px;
    left: 12px;
    right: 12px;
    gap: 0.6rem;
  }
  .header-identity { gap: 0.6rem; }
  #mode-toggle { align-self: flex-start; padding: 2px; }
  .mode-button { font-size: 0.62rem; padding: 0.4rem 0.8rem; letter-spacing: 0.1em; }

  /* Chat panel: tighter margins on mobile, starts below the compressed
     header. The photographic sky behind shows in the top strip and around
     the panel's edges. */
  #reading-space {
    top: 96px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 12px;
  }
}

@media (max-width: 420px) {
  /* On the narrowest devices, give the chat panel slightly more vertical
     room by tightening the header further. */
  .header-title h1 { font-size: 1.2rem; }
  .subtitle { font-size: 0.78rem; line-height: 1.3; }
  #reading-space { top: 88px; }
}

/* ─── Support CHA — unobtrusive bottom-right donation affordance ─── */

.support-cha {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 5;
  font-family: 'EB Garamond', Georgia, serif;
  outline: none;
}

.support-cha-label {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(35, 26, 18, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(220, 200, 170, 0.18);
  border-radius: 14px;
  color: rgba(230, 215, 190, 0.75);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.support-cha:hover .support-cha-label,
.support-cha:focus-within .support-cha-label {
  background: rgba(55, 40, 26, 0.85);
  color: rgba(245, 230, 200, 0.95);
  border-color: rgba(220, 200, 170, 0.32);
}

.support-cha-expanded {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 280px;
  padding: 18px 20px 6px 20px;
  background: rgba(28, 21, 14, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(220, 200, 170, 0.18);
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.support-cha:hover .support-cha-expanded,
.support-cha:focus-within .support-cha-expanded {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.support-cha-verse {
  margin: 0 0 12px 0;
  text-align: center;
  line-height: 1.55;
}

.support-cha-verse-poetic {
  color: rgba(230, 215, 190, 0.88);
  font-style: italic;
  font-size: 15px;
}

.support-cha-verse-plain {
  color: rgba(248, 233, 205, 1);
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.02em;
  display: inline-block;
  margin-top: 6px;
}

.support-cha-link {
  display: block;
  text-align: center;
  color: rgba(220, 200, 170, 0.78);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 10px 12px 8px 12px;
  border-top: 1px solid rgba(220, 200, 170, 0.12);
  transition: color 0.2s ease;
  font-family: 'EB Garamond', Georgia, serif;
}

.support-cha-link:hover {
  color: rgba(255, 245, 220, 1);
}

@media (max-width: 720px) {
  /* Hide Support CHA on mobile — the chat panel goes nearly edge-to-edge
     and the floating popover would collide. The bottom-right slot is
     available again on desktop via wider breakpoints. */
  .support-cha { display: none; }
}

/* Snub-Poemed close-reader affordance: empty-state portrait is a link to the
   full-resolution master. Honors the reader who zooms in to read the
   calligram. (Master image is 956x1238 today; should be upgraded to
   3000+ on the long edge for true close reading.) */
#sigil-portrait-link {
  display: inline-block;
  line-height: 0;
  cursor: zoom-in;
  border: none;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
#sigil-portrait-link:hover { opacity: 0.92; }
#sigil-portrait-link:focus-visible {
  outline: 1px solid rgba(220, 200, 170, 0.4);
  outline-offset: 4px;
}

/* Retrieval items as links to the deposit's record page on alexanarch.
   Restrained — they shouldn't shout. The link affordance is in the hover. */
.message-retrievals ul a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.message-retrievals ul a:hover {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-dim);
}
.message-retrievals ul a:focus-visible {
  outline: 1px solid var(--accent-dim);
  outline-offset: 2px;
  border-radius: 1px;
}