/* ============================================================
   SUPPORT PANEL — Mariana's chat FLOATS over the app, hanging from her face
   (Peter, 16 Sep 2026). THE FRAME IS DEAD: the old build (11 Sep) squeezed the
   whole site with a body margin + clip-path so the chat could dock beside it.
   It never worked, because Bullet is full of viewport-pinned chrome. The fixed
   sidebar, the fixed corner buttons, the sticky headers and every right-docked
   .filter-panel--drawer measure the VIEWPORT, not the frame, so they landed on
   top of the squeezed page: Mariana's face sat on the Ask bar, the logout sat on
   Home's yellow canvas, and an open Bank drawer was sliced in half by the panel.
   Correcting each one by hand was a growing list that could never be finished.
   The app also dropped to about 1100px, a width nothing here was designed at
   (Bank's grid view alone wants 1356). And the live guide (guide.js) rings a real
   element by measuring the viewport, so every ring would have been wrong inside a
   frame, which kills the "Mariana sends you a link and the guide walks you
   through it" flow that support is FOR.

   So: the app never moves. No body margin, no clip-path, nothing on <html>. The
   panel is one fixed card hanging from the corner-button row, growing out of her
   face on open and folding back into it on close. It is about 400px wide, 24px
   off the bottom, so it is tall and calm but clearly born from the button you
   pressed. A DRAWER OPENS AND THE PANEL FOLDS AWAY (both are pinned to the right
   edge, so they would sit on each other); it comes back only if it was open when
   the drawer opened. Injected by ui.js (uiEnsureCss) the first time the chat opens.
   ============================================================ */
:root {
  --sup-w: 400px;                 /* the card; clamped by calc(100vw - 48px) below */
  --sup-top: 86px;                /* under the corner-button row: its 26px top + 48px button + 12px */
  --sup-right: 32px;              /* the same right edge as Mariana's face */
  --sup-bottom: 24px;
  --sup-bg: var(--color-surface);
  --sup-radius: var(--radius-lg);
  --sup-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sup-dur: .3s;
}

/* ----- the panel: a floating card, nothing else on the page moves ----- */
.sup-panel {
  position: fixed;
  top: var(--sup-top);
  right: var(--sup-right);
  bottom: var(--sup-bottom);
  width: min(var(--sup-w), calc(100vw - 48px));
  background: var(--sup-bg);
  border-radius: var(--sup-radius);
  box-shadow: 0 0 0 1px var(--color-border), var(--shadow-drawer), 0 16px 40px rgba(12, 12, 13, .10);
  overflow: hidden;               /* the rounded corners clip the thread */
  z-index: 9998;
  display: flex; flex-direction: column;
  font-family: var(--font-body);
  font-size: 13px; line-height: 20px; color: var(--color-text);
  /* it grows out of her face: the origin is the face's centre, up and right of this card */
  transform-origin: calc(100% - 24px) -36px;
  transition: transform var(--sup-dur) var(--sup-ease), opacity var(--sup-dur) var(--sup-ease);
}
/* tucked = before it opens, while it closes, and while a drawer has the right edge */
.sup-panel--tucked { transform: scale(.85); opacity: 0; pointer-events: none; }
/* reopened on a new page: it is simply there, no growth */
.sup-panel.sup-instant { transition: none; }

.sup-panel__head {
  display: flex; align-items: center; gap: 2px;
  padding: 18px 12px 6px 18px; flex: none;
}
.sup-panel__who { margin-right: auto; display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--color-text); min-width: 0; }
.sup-panel__who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.sup-panel__who strong { font-weight: 600; }
.sup-panel__who .sup-panel__sub { color: var(--color-text-muted); font-weight: 400; }
.sup-panel__btn {
  background: none; border: none; color: rgba(15, 15, 16, .62); cursor: pointer;
  line-height: 0; padding: 7px; border-radius: 8px; position: relative;
}
.sup-panel__btn:hover { background: rgba(0, 0, 0, .05); color: var(--color-text); }
.sup-panel__btn.is-on { color: var(--color-text); background: rgba(0, 0, 0, .06); }
.sup-panel__btn svg { width: 18px; height: 18px; }
.sup-panel__body {
  padding: 12px 20px 18px; display: flex; flex-direction: column; gap: 14px;
  min-height: 120px; overflow-y: auto; flex: 1;
}
.sup-panel__body[hidden] { display: none; }

/* messages: Mariana's lines are plain text (ElevenLabs), yours a white bubble on the right */
.sup-msg { max-width: 88%; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.sup-msg--bot { align-self: flex-start; color: var(--color-text); }
.sup-msg--user { align-self: flex-end; background: var(--color-surface); border-radius: 18px 18px 6px 18px; padding: 12px 16px; box-shadow: 0 0 0 1px var(--color-border); }
.sup-msg--clip { max-width: 100%; width: 100%; padding: 0; background: none; box-shadow: none; }

/* history: one row per conversation */
.sup-hist { padding: 4px 18px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sup-hist__title { font-size: 12px; color: var(--color-text-muted); margin: 4px 0 2px; }
.sup-hist__row {
  text-align: left; background: var(--color-surface); border: none; box-shadow: 0 0 0 1px var(--color-border); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; font: inherit; font-size: 13px; line-height: 18px; color: var(--color-text); display: flex; flex-direction: column; gap: 2px;
}
.sup-hist__row:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); }
.sup-hist__row.is-now { box-shadow: 0 0 0 1px var(--color-text); }
.sup-hist__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-hist__meta { font-size: 12px; color: var(--color-text-muted); }
.sup-hist__empty { color: var(--color-text-muted); font-size: 13px; padding: 10px 2px; }

/* a closed older chat, opened from history: no input, one way forward */
.sup-panel__foot-note { padding: 0 18px 16px; flex: none; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--color-text-muted); }

/* the composer: a white card at the bottom (ElevenLabs: 16px radius, 14px text) */
.sup-panel__form {
  margin: 0 16px 16px; flex: none; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border);
  border-radius: 16px; padding: 10px 10px 8px 14px; display: flex; flex-direction: column; gap: 6px;
}
.sup-panel__input { border: none; background: none; outline: none; font: inherit; font-size: 14px; line-height: 20px; color: var(--color-text); padding: 4px 0; width: 100%; resize: none; overflow-y: auto; max-height: 108px; display: block; }
.sup-panel__input::placeholder { color: rgba(15, 15, 16, .45); }
.sup-panel__row { display: flex; align-items: center; gap: 6px; }
.sup-panel__rec {
  display: inline-flex; align-items: center; gap: 6px; background: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); border: none;
  border-radius: 999px; padding: 5px 10px 5px 8px; font: inherit; font-size: 12px; line-height: 16px; color: var(--color-text); cursor: pointer;
}
.sup-panel__rec svg { width: 14px; height: 14px; }
.sup-panel__rec:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.sup-panel__rec[disabled] { opacity: .5; cursor: default; }
.sup-panel__recnote { font-size: 11px; line-height: 14px; color: var(--color-text-muted); padding: 4px 2px 0; }
.sup-panel__send { margin-left: auto; background: var(--color-text); color: #fff; border: none; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.sup-panel__send svg { width: 15px; height: 15px; }

/* recording in progress: the composer becomes the recorder */
.sup-rec { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); padding: 2px 0; }
.sup-rec__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-danger, #e11d48); animation: supRecPulse 1.2s ease-in-out infinite; flex: none; }
@keyframes supRecPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.sup-rec__time { font-variant-numeric: tabular-nums; }
.sup-rec__stop { margin-left: auto; background: var(--color-text); color: #fff; border: none; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer; }
.sup-rec__bar { height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .08); overflow: hidden; margin: 2px 0 4px; }
.sup-rec__bar > i { display: block; height: 100%; width: 0; background: var(--color-text); transition: width .25s ease; }

/* the sent recording, in the thread: full width of the column, press play */
.sup-clip { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sup-clip video { width: 100%; border-radius: 12px; background: #000; display: block; }
.sup-clip__meta { font-size: 12px; color: var(--color-text-muted); }

/* the yes/no card before a recording starts */
.sup-consent { display: flex; flex-direction: column; gap: 10px; }
.sup-consent__btns { display: flex; gap: 6px; }
.sup-consent__go { background: var(--color-text); color: #fff; border: none; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer; }
.sup-consent__no { background: var(--color-surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); border: none; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; color: var(--color-text); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .sup-rec__dot { animation: none; }
  .sup-panel { transition: none; }
}

/* phones: the chat takes the screen (the app still never moves) */
@media (max-width: 640px) {
  .sup-panel {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100vw; border-radius: 0;
    transform-origin: 50% 100%;
    box-shadow: none;
  }
  .sup-panel--tucked { transform: translateY(100%); opacity: 1; }
}

/* ----- the player (11 Sep): our own controls, no browser menu ----- */
.sup-player { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #111; aspect-ratio: 16 / 10; }
.sup-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.sup-player--tall { aspect-ratio: 9 / 16; width: 100%; background: transparent; }   /* a phone clip stands up and fills the card's width: the same 8px of air at the sides as at the top (Peter, 18 Sep) */
.sup-player--tall video { object-fit: cover; }   /* the box and the clip are both 9:16; cover eats the sub-pixel dark line at the edge */
.sup-player__big {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .92); color: #111; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .2s ease, transform .2s ease;
}
.sup-player__big svg { width: 24px; height: 24px; margin-left: 3px; }
.sup-player__big:hover { transform: translate(-50%, -50%) scale(1.06); }
/* Loom-style (Peter, 18 Sep): at rest the clip is a bare still frame, no button, no bar, no shading. Hover it and it
   plays silently while the flat play button and the controls fade in; press play and it plays for real. */
.sup-player__big, .sup-player__bar { opacity: 0; }
.sup-player:hover .sup-player__big, .sup-player.is-preview .sup-player__big { opacity: 1; }
.sup-player.is-playing .sup-player__big { opacity: 0; pointer-events: none; }
.sup-player__bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 18px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); color: #fff; transition: opacity .25s ease;
}
.sup-player:hover .sup-player__bar { opacity: 1; }
@media (hover: none) { .sup-player__big, .sup-player__bar { opacity: 1; } .sup-player.is-playing .sup-player__bar { opacity: 0; } }
.sup-player__btn { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0; display: inline-flex; }
.sup-player__btn svg { width: 16px; height: 16px; }
.sup-player__btn:hover { background: rgba(255, 255, 255, .15); }
.sup-player__time { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .9; white-space: nowrap; }
.sup-player__track { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); cursor: pointer; position: relative; }
.sup-player__track > i { display: block; height: 100%; width: 0; border-radius: 2px; background: #ffe000; }
.sup-player:fullscreen { border-radius: 0; background: #000; }
.sup-player:fullscreen video { object-fit: contain; }

/* ----- BOTH SIDES GET A BUBBLE (Signal's prompt, 12 Sep) ----- */
/* SOFTER, LIGHTER, MORE AIR (Peter, 17 Sep: "it looks crap and crushed... follow Intercom"): a light grey, not a
   mid grey; 12/16 inside the bubble instead of 8/12; an 18px radius; 14px type. The time line gets room to
   breathe under the bubble instead of being pulled up into it. */
.sup-msg--bot { background: #f2f2f4; border-radius: 18px 18px 18px 6px; padding: 12px 16px; }
/* "Mariana is typing" (21 Sep): a quiet line with three breathing dots at the foot of the chat */
.sup-typing { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-muted); padding: 2px 4px; }
.sup-typing__dots { display: inline-flex; gap: 3px; }
.sup-typing__dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: supTypingDot 1.2s ease-in-out infinite; }
.sup-typing__dots i:nth-child(2) { animation-delay: .2s; }
.sup-typing__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes supTypingDot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .sup-typing__dots i { animation: none; opacity: .7; } }
.sup-msg__sub { font-size: 12px; line-height: 16px; color: var(--color-text-muted); margin: -4px 0 4px; max-width: 88%; }
.sup-msg__sub--left { align-self: flex-start; padding-left: 4px; }
.sup-msg__sub--right { align-self: flex-end; text-align: right; padding-right: 4px; }
.sup-msg__sub + .sup-msg__sub { margin-top: -10px; }

/* ----- the intro clip, once per device ----- */
.sup-intro { position: relative; width: 100%; background: var(--color-surface); border-radius: 14px; padding: 8px; box-shadow: 0 0 0 1px var(--color-border); }
.sup-intro__x { position: absolute; top: 12px; right: 12px; z-index: 4; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.sup-intro__x svg { width: 14px; height: 14px; }
.sup-intro__line { font-size: 12px; color: var(--color-text-muted); padding: 8px 4px 2px; text-align: center; }
.sup-intro .sup-player { border-radius: 10px; }
/* SEEN: a small cropped bubble on Mariana's side, about a third of the full card (Peter, 26 Sep). The crop keeps
   the face (the top of the frame is mostly wall), the shrink eases, the clip still plays on press. */
.sup-intro { transition: width .5s cubic-bezier(0.16, 1, 0.3, 1); }
.sup-intro--small { width: 132px; padding: 5px; border-radius: 14px 14px 14px 6px; align-self: flex-start; }
.sup-intro--small .sup-player--tall { aspect-ratio: 4 / 5; }
.sup-intro--small .sup-player--tall video { object-position: 50% 40%; }
.sup-intro--small .sup-player__bar { display: none; }
.sup-intro--small .sup-intro__line { font-size: 11px; padding: 5px 2px 1px; text-align: left; }
@media (prefers-reduced-motion: reduce) { .sup-intro { transition: none; } }
.sup-player__sound { position: absolute; left: 10px; top: 10px; z-index: 3; background: rgba(255, 255, 255, .92); color: #111; border: none; border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; display: none; }
.sup-player.is-muted .sup-player__sound { display: inline-flex; }
.sup-player video::cue { font-size: 13px; background: rgba(0, 0, 0, .6); }

/* A LADDER NOTE IS BULLET'S (Signal's prompt, 13 Sep): yellow, labelled Bullet, never Mariana's grey. */
.sup-msg--bullet.sup-msg--bot { background: #FFE000; color: var(--color-text); }
.sup-msg__from { display: block; font-size: 11px; line-height: 14px; font-weight: var(--weight-medium, 500); margin-bottom: 2px; }

/* ----- TICKET NUMBERS AND SPLITS (Signal's prompt, 15 Sep) ----- */
/* the desk's number beside the title, small and grey; empty until Signal has given one */
.sup-panel__no { color: var(--color-text-muted); font-size: 12px; font-weight: var(--weight-medium, 500); margin-left: 8px; }
.sup-panel__no:empty { display: none; }
/* the panel is 336px: "Mariana · Bullet support #1042" does not fit on one line, so once the desk has numbered
   the ticket the number takes the sub's place, "Mariana  #1042", one line, never a wrapped head */
.sup-panel__who > span { white-space: nowrap; }
.sup-panel__who:has(.sup-panel__no:not(:empty)) .sup-panel__sub { display: none; }
.sup-hist__no { font-weight: var(--weight-medium, 500); }
/* a new numbered ticket under the same chat: a thin centred divider, never a bubble */
.sup-split { align-self: stretch; max-width: 100%; display: flex; align-items: center; gap: 10px; font-size: 11px; line-height: 14px; color: var(--color-text-muted); white-space: nowrap; margin: 2px 0; }
.sup-split::before, .sup-split::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* THE TRANSACTION THE QUESTION IS ABOUT (Peter, 16 Sep 2026). "I don't know what this is" on a bank
   row opens this chat with the row already in it, so the customer never has to describe it and the
   desk is never guessing which one is meant. */
/* 26 Sep: it was far too small. Now the Bank list's row card (row-card look), the full width of the chat column:
   merchant at body size left, the amount right in the list's weight, date and account the quiet second line. */
.sup-msg--tx { align-self: stretch; max-width: 100%; width: 100%; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.sup-tx {
  display: block; text-align: left; padding: 16px 18px;
  background: var(--color-surface); border: var(--border-width, 1px) solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-base); line-height: var(--leading-body);
}
.sup-tx__top { display: flex; align-items: baseline; gap: 12px; }
.sup-tx__who { flex: 1 1 auto; min-width: 0; font-weight: var(--weight-regular); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-tx__amt { flex: none; font-weight: var(--weight-regular); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sup-tx__meta { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 4px; }
.sup-tx__link { display: inline-block; margin-top: 10px; font-size: var(--text-sm); }

/* the customer's line typing itself in (the category door, 26 Sep): a thin caret at the end while it types */
.sup-msg.is-typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: supCaret .8s steps(1) infinite; }
@keyframes supCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sup-msg.is-typing::after { animation: none; } }

/* THE RECORDING FRAME (Peter, 17 Sep 2026): while the page records, a red edge runs round the viewport and a pill
   sits at the bottom with the time and Stop. The edge never takes a click; the pill does. See supRecorder in ui.js. */
#sup-recframe { position: fixed; inset: 0; z-index: 2147483000; background: var(--color-surface); }
html.is-recshell, html.is-recshell body { overflow: hidden; }   /* the page underneath is parked; the iframe is the page */
/* the app itself, inside the frame (Peter: "the application is sitting inside the iframe, changing") */
.sup-recframe__app { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border: 0; display: block; background: var(--color-surface); }
/* the edge: five pixels, red, breathing, so nobody forgets they are on air */
.sup-recframe__edge { position: absolute; inset: 0; border: 5px solid var(--color-danger); pointer-events: none; z-index: 2; animation: supRecGlow 1.6s ease-in-out infinite; }
@keyframes supRecGlow { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(225,29,72,0); } 50% { box-shadow: inset 0 0 14px 0 rgba(225,29,72,.45); } }
@media (prefers-reduced-motion: reduce) { .sup-recframe__edge { animation: none; } }
.sup-recframe__pill { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; pointer-events: auto; z-index: 3;
  background: var(--color-text); color: var(--color-surface); border-radius: 999px; padding: 8px 8px 8px 16px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.sup-recframe__pill .sup-rec__dot { background: var(--color-danger); }
.sup-recframe__time { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.7); }
.sup-recframe__stop { font: inherit; font-size: 13px; font-weight: 500; background: var(--color-surface); color: var(--color-text); border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.sup-recframe__stop:hover { background: var(--color-bg-subtle); }

/* the clip's transcript, the customer's own words under their own recording (Peter, 17 Sep) */
.sup-clip__tx { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); font-size: 13px; line-height: 1.5; color: var(--color-text); white-space: pre-wrap; }
.sup-clip__txlbl { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; }

/* CLICK CUES inside the recording frame (Peter, 22 Sep): the pointer halo and the click pulse are drawn
   in the page so the tab capture records them. Never catches a click. */
#sup-reccues { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.sup-reccues__halo, .sup-reccues__ring { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; will-change: transform, opacity; }
.sup-reccues__halo { background: rgba(255, 224, 0, .45); box-shadow: 0 0 0 2px rgba(255, 224, 0, .35); transition: opacity .25s ease; }
.sup-reccues__ring { background: rgba(255, 224, 0, .35); box-shadow: 0 0 0 2px rgba(255, 224, 0, .6); animation: supRecPulseOut .65s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes supRecPulseOut { 0% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 3.4; } }
@media (prefers-reduced-motion: reduce) { .sup-reccues__ring { animation-duration: .3s; } }

/* the answer a customer flagged with "This isn't right", shown at the top of the fresh chat (29 Sep) */
.sup-flagged { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.sup-flagged__lbl { font-size: var(--text-sm); color: var(--color-text-muted); }
.sup-flagged__q { font-weight: var(--weight-medium); }
.sup-flagged__a { font-size: var(--text-sm); color: var(--color-text-muted); }