/* Happydemics theme for LibreChat v0.8.8.
   It reproduces the home-made assistant-ui front end (the retired site's style.css):
   the internal full view from 768px (LibreChat's md breakpoint) and the platform widget
   panel below it. Tokens, sizes and spacing are copied from that stylesheet, so a change
   there should be mirrored here. LibreChat still owns every control and behavior; only
   its light mode is styled, and no component is forked. Selectors follow v0.8.8's markup
   and need a visual check on upgrade. shell.js sets the placeholders and marks the page
   when it runs inside the platform's iframe (html[data-hdm-embedded]). */

@font-face { font-family: Jakarta; src: url('/assets/PlusJakartaSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Jakarta; src: url('/assets/PlusJakartaSans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Jakarta; src: url('/assets/PlusJakartaSans-Bold.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: Lora; src: url('/assets/Lora-Regular.woff2') format('woff2'); font-display: swap; }

/* ===================== Tokens ===================== */
/* Same values as the site's :root, prefixed: LibreChat already uses --text-secondary and
   friends for RGB triplets. */
html.light {
  --hdm-text: #262626;
  --hdm-text-secondary: #4f5b6b;
  --hdm-text-tertiary: #646f7e;
  --hdm-icon: #646f7e;
  --hdm-border: #e4e9f0;
  --hdm-border-strong: #dfe4eb;
  --hdm-surface: #fff;
  --hdm-ground: #f5f7fb;
  --hdm-surface-subtle: #f3f5f8;
  --hdm-hover: #eef2f8;
  --hdm-accent: #438bee;
  --hdm-accent-strong: #2f6fc0;
  --hdm-accent-deep: #1f4f8f;
  --hdm-accent-soft: #eef5ff;
  --hdm-accent-ring: #eaf2fe;
  --hdm-accent-halo: #f2f7ff;
  --hdm-accent-muted: #a9c9f2;
  --hdm-accent-disabled: #d7e7fa;
  --hdm-shadow-sm: 0 1px 3px #1b2a401a;
  --hdm-shadow-md: 0 14px 32px #1b2a4014;
  --hdm-shadow-lg: 0 18px 40px #1b2a4014;
  --hdm-shadow-accent: 0 6px 16px #438bee52;
  --hdm-font: Jakarta, Arial, sans-serif;
  --hdm-serif: Lora, Georgia, serif;

  /* The site's icons (ui/src/icons.tsx), as images for pseudo-elements. */
  --hdm-icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fc0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --hdm-icon-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fc0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
  --hdm-icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fc0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17.5h.01'/%3E%3C/svg%3E");
  --hdm-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.6 5.6 2.8 9.4 11 11-8.2 1.6-10.4 5.4-11 11-.6-5.6-2.8-9.4-11-11 8.2-1.6 10.4-5.4 11-11z'/%3E%3C/svg%3E");
  --hdm-icon-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23438bee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7 4.7 1.8-4.7 1.8L12 16l-1.8-4.7-4.7-1.8 4.7-1.8z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E");
  --hdm-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23438bee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --hdm-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E");
  --hdm-icon-attach: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5 12.5 20a5 5 0 0 1-7-7l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7L10.2 17.7a1.7 1.7 0 0 1-2.4-2.4L15.5 7.6'/%3E%3C/svg%3E");
  --hdm-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");

  /* LibreChat's own variables, so the components this file does not touch (menus,
     dialogs, settings) still use the palette. */
  --accent-primary: 67 139 238;
  --accent-primary-hover: 47 111 192;
  --surface-submit: 67 139 238;
  --surface-submit-hover: 47 111 192;
  --surface-primary: 255 255 255;
  --surface-primary-alt: 255 255 255;
  --surface-secondary: 243 245 248;
  --surface-tertiary: 238 242 248;
  --surface-active: 238 245 255;
  --surface-active-alt: 238 242 248;
  --surface-hover: 238 242 248;
  --surface-chat: 255 255 255;
  --surface-dialog: 255 255 255;
  --presentation: 245 247 251;
  --border-light: 228 233 240;
  --border-medium: 223 228 235;
  --border-heavy: 169 201 242;
  --text-primary: 38 38 38;
  --text-secondary: 79 91 107;
  --text-tertiary: 100 111 126;
  --ring-primary: 67 139 238;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

html.light body,
html.light #root { font-family: var(--hdm-font); color: var(--hdm-text); background: var(--hdm-ground); }
html.light :is(input, textarea, button, select) { font-family: var(--hdm-font); }
html.light :focus-visible { outline-color: var(--hdm-accent-strong); }
html.light main,
html.light #messages-view,
html.light .bg-presentation { background: var(--hdm-ground); }

/* ===================== Composer ===================== */
html.light [data-testid='composer-surface'] {
  border: 1px solid var(--hdm-border-strong);
  border-radius: 24px;
  background: var(--hdm-surface);
  box-shadow: var(--hdm-shadow-lg), 0 0 0 6px #438bee0f;
  padding: 6px 4px 2px 6px;
  transition: border-color .15s, box-shadow .15s;
}
html.light [data-testid='composer-surface']:focus-within { border-color: var(--hdm-accent-muted); box-shadow: var(--hdm-shadow-lg), 0 0 0 6px #438bee1f; }
html.light #prompt-textarea { color: var(--hdm-text); font-size: 16px; line-height: 1.5; }
html.light #prompt-textarea::placeholder { color: var(--hdm-text-tertiary); }
/* As the site: no outline on the field itself, the composer's halo shows the focus. */
html.light #prompt-textarea:is(:focus, :focus-visible) { outline: none; box-shadow: none; }

/* The site's action row: attach (outlined), microphone, then send on the right. */
html.light [data-testid='composer-surface'] > div:last-child { gap: 6px; padding: 0 8px 8px 6px; }
html.light [data-testid='composer-surface'] > div:last-child > .shrink-0:has(#attach-file-button) { order: 1; }
html.light #audio-recorder { order: 2; }
html.light [data-testid='composer-surface'] > div:last-child > .grow { order: 3; }
html.light [data-testid='composer-surface'] > div:last-child > .ml-auto { order: 4; }
html.light :is(#attach-file-button, #audio-recorder) { width: 38px; height: 38px; border-radius: 50%; color: var(--hdm-text-secondary); background: transparent; }
html.light :is(#attach-file-button, #audio-recorder) svg { width: 18px; height: 18px; color: currentColor; stroke: currentColor; }
html.light #audio-recorder svg * { stroke-width: 1.7; }
html.light #attach-file-button { border: 1px solid var(--hdm-border-strong); background: var(--hdm-surface); }
/* The site's outlined paperclip, drawn like the microphone, in place of LibreChat's filled one. */
html.light #attach-file-button > svg { display: none; }
html.light #attach-file-button::before {
  content: ''; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--hdm-icon-attach) center / contain no-repeat; mask: var(--hdm-icon-attach) center / contain no-repeat;
}
html.light :is(#attach-file-button, #audio-recorder):hover { background: var(--hdm-hover); color: var(--hdm-accent-strong); }
html.light #send-button { width: 42px; height: 42px; border-radius: 50%; background: var(--hdm-accent); color: #fff; box-shadow: var(--hdm-shadow-accent); }
html.light #send-button svg { width: 20px; height: 20px; color: #fff; }
html.light #send-button:hover { background: var(--hdm-accent-strong); }
html.light #send-button:disabled { background: var(--hdm-accent-disabled); box-shadow: none; opacity: 1; }
html.light :is([data-testid='stop-generation-button'], button[aria-label='Stop generating']) { width: 42px; height: 42px; border-radius: 50%; background: var(--hdm-accent-soft); color: var(--hdm-accent-deep); box-shadow: none; }
html.light :is([data-testid='stop-generation-button'], button[aria-label='Stop generating']):hover { background: var(--hdm-accent-disabled); }
html.light #tools-dropdown-button { display: none; }

/* The site's disclaimer under the composer (LibreChat's footer is empty). */
html.light form:has(#prompt-textarea) { position: relative; }
html.light form:has(#prompt-textarea)::after {
  content: 'AI-generated content may be inaccurate.';
  position: absolute; top: 100%; right: 0; left: 0;
  margin-top: 10px;
  color: var(--hdm-text-tertiary); font-size: 12px; text-align: center;
}

/* ===================== Welcome ===================== */
/* Orb: the mark in a white disc with two blue rings, and two of the thinking banner's ✦ floating at its shoulder. */
html.light main div:has(> .icon-xl > img[src='/assets/mark.png']) { position: relative; width: 84px; height: 84px; margin: 0 0 30px; }
html.light main .icon-xl:has(> img[src='/assets/mark.png']) {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--hdm-surface);
  box-shadow: 0 0 0 10px var(--hdm-accent-ring), 0 0 0 22px var(--hdm-accent-halo), 0 14px 30px #438bee38;
}
/* LibreChat sizes the mark inline at 100%; the site keeps it at two thirds of the disc. */
html.light main .icon-xl > img[src='/assets/mark.png'] { width: 66% !important; height: 66% !important; margin: auto; object-fit: contain; }
html.light main div:has(> .icon-xl > img[src='/assets/mark.png'])::after,
html.light main div:has(> .icon-xl > img[src='/assets/mark.png'])::before {
  /* Keep both stars above the disc and its ring shadows. */
  content: ''; position: absolute; z-index: 1; aspect-ratio: 1;
  -webkit-mask: var(--hdm-icon-star) center / contain no-repeat; mask: var(--hdm-icon-star) center / contain no-repeat;
}
html.light main div:has(> .icon-xl > img[src='/assets/mark.png'])::after { top: -16%; right: -20%; width: 26%; background: #4977bf; }
html.light main div:has(> .icon-xl > img[src='/assets/mark.png'])::before { top: 16%; right: -32%; width: 14%; background: #7aa5e3; }

/* Greeting: orb above the Lora title. */
html.light main div:has(> p.split-parent) { flex-direction: column; gap: 12px; }
/* LibreChat clips the title for its letter animation, which cuts Lora's descenders. */
html.light main p.split-parent { overflow: visible; font: 400 42px/1.15 var(--hdm-serif) !important; letter-spacing: -0.02em; color: var(--hdm-text); text-align: center; }

/* Suggested prompts. LibreChat's starters carry only a label; the site's prompt line
   under it comes from here, in the order of librechat.yaml's conversation_starters. */
html.light main div:has(> button > span.line-clamp-2) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  width: 100%; margin: 0; padding: 0;
}
html.light main div:has(> button > span.line-clamp-2)::before {
  content: 'Suggested';
  grid-column: 1 / -1;
  padding-left: 24px;
  background: var(--hdm-icon-sparkle) left center / 16px 16px no-repeat;
  color: var(--hdm-text-secondary); font-size: 13px; font-weight: 600; line-height: 20px;
}
html.light main button:has(> span.line-clamp-2) {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px;
  width: 100%; max-width: none; min-height: 0;
  padding: 16px;
  border: 1px solid var(--hdm-border); border-radius: 18px;
  background: var(--hdm-surface); color: var(--hdm-text);
  text-align: left; box-shadow: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
html.light main button:has(> span.line-clamp-2)::before {
  content: '';
  flex: none; width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--hdm-accent-soft) var(--hdm-icon-doc) center / 18px 18px no-repeat;
}
html.light main button:has(> span.line-clamp-2):nth-child(2)::before { background-image: var(--hdm-icon-chart); }
html.light main button:has(> span.line-clamp-2):nth-child(3)::before { background-image: var(--hdm-icon-help); }
html.light main button:has(> span.line-clamp-2)::after {
  content: '';
  position: absolute; top: 16px; right: 16px;
  width: 16px; height: 16px;
  background: var(--hdm-icon-arrow) center / contain no-repeat;
  opacity: 0; transition: opacity .15s;
}
html.light main button:has(> span.line-clamp-2):hover { border-color: var(--hdm-accent-muted); background: var(--hdm-surface); box-shadow: var(--hdm-shadow-md); transform: translateY(-1px); }
html.light main button:has(> span.line-clamp-2):hover::after { opacity: 1; }
html.light main button > span.line-clamp-2 {
  display: flex; flex-direction: column; gap: 6px;
  overflow: visible; -webkit-line-clamp: unset;
  color: var(--hdm-text); font-size: 14px; font-weight: 600; line-height: 1.35; text-align: left; text-wrap: pretty;
}
html.light main button > span.line-clamp-2::after { color: var(--hdm-text-tertiary); font-size: 13px; font-weight: 400; line-height: 1.45; }
html.light main button:nth-child(1) > span.line-clamp-2::after { content: 'Summarize my latest campaign results.'; }
html.light main button:nth-child(2) > span.line-clamp-2::after { content: 'Compare brand lift across my campaigns.'; }
html.light main button:nth-child(3) > span.line-clamp-2::after { content: 'What should I improve in my next campaign?'; }

/* ===================== Messages ===================== */
/* One 780px column for the messages and the composer, as the site. */
html.light .message-render { max-width: 780px; }
html.light main form:has(#prompt-textarea) { max-width: 780px; }

/* User: a blue bubble with a small bottom-right corner. */
html.light .user-turn [data-testid='message-body'] { padding: 12px 17px; border-radius: 20px 20px 6px 20px; background: var(--hdm-accent); }
/* The hover actions float under the bubble instead of pushing the answer 38px down. */
html.light .user-turn { margin-bottom: 16px; }
html.light .user-turn .w-full.flex.justify-end:has(> .mt-1.flex) { position: absolute; top: 100%; right: 0; width: auto; }
html.light .user-turn [data-testid='message-body'] .message-content,
html.light .user-turn [data-testid='message-body'] .message-content :is(p, a, li, strong) { color: #fff; font-size: 16px; line-height: 1.55; }

/* Assistant: no avatar, name or time; the answer uses the full width. */
html.light .agent-turn > h2 { display: none; }
html.light .agent-turn > h2 + div { min-width: 0; width: 100%; }

/* Answer text, as the site's message-content. */
html.light .agent-turn .message-content { color: var(--hdm-text); font-family: var(--hdm-font); font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
html.light .agent-turn .message-content :is(p, ul, ol, li) { font: inherit; color: inherit; }
html.light .agent-turn .message-content p { margin: 0 0 12px; white-space: normal; }
html.light .agent-turn .message-content p:last-child { margin-bottom: 0; }
html.light .agent-turn .message-content :is(ul, ol) { margin: 0 0 12px; padding-left: 28px; }
html.light .agent-turn .message-content ul { list-style-type: disc; }
html.light .agent-turn .message-content ol { list-style-type: decimal; }
html.light .agent-turn .message-content li { margin: 0 0 4px; padding: 0; }
html.light .agent-turn .message-content li > p { margin: 0; }
html.light .agent-turn .message-content li::marker { color: var(--hdm-text-tertiary); }
html.light .agent-turn .message-content :is(h1, h2, h3, h4) { margin: 18px 0 8px; color: var(--hdm-text); font-family: var(--hdm-font); font-weight: 700; line-height: 1.35; }
html.light .agent-turn .message-content h1 { font-size: 20px; }
html.light .agent-turn .message-content h2 { font-size: 18px; }
html.light .agent-turn .message-content :is(h3, h4) { font-size: 16px; }
html.light .agent-turn .message-content strong { color: inherit; font-weight: 700; }
html.light .agent-turn .message-content a { color: var(--hdm-accent-strong); text-decoration: underline; }
html.light .agent-turn .message-content blockquote { border-left: 3px solid var(--hdm-accent); padding-left: 10px; color: var(--hdm-text-secondary); font-style: normal; }
html.light .agent-turn .message-content img { max-width: 100%; border-radius: 12px; }
html.light .agent-turn .message-content table {
  display: block; width: fit-content; max-width: 100%; overflow-x: auto;
  margin: 4px 0 14px;
  border: 1px solid var(--hdm-border); border-radius: 12px; border-collapse: separate; border-spacing: 0;
}
html.light .agent-turn .message-content :is(th, td) { padding: 7px 12px; border: 0; border-right: 1px solid var(--hdm-border); border-bottom: 1px solid var(--hdm-border); background: var(--hdm-surface); text-align: left; }
html.light .agent-turn .message-content th { background: var(--hdm-surface-subtle); font-weight: 600; }
html.light .agent-turn .message-content tr > :last-child { border-right: 0; }
html.light .agent-turn .message-content tbody tr:last-child > * { border-bottom: 0; }
html.light .agent-turn .message-content pre { max-width: 100%; border: 1px solid var(--hdm-border); border-radius: 12px; background: var(--hdm-surface); }
html.light .agent-turn .message-content :not(pre) > code { padding: 1px 5px; border-radius: 6px; background: var(--hdm-surface-subtle); color: var(--hdm-text); font-size: 13px; }

/* Actions. Answers keep the site's row, always visible: copy, regenerate, read aloud
   (no edit or fork on an answer); the user's own message keeps only edit. */
html.light :is(.agent-turn, .user-turn) .group.flex.justify-center.gap-0\.5 { visibility: visible; gap: 2px; }
html.light .agent-turn .group.flex.justify-center.gap-0\.5,
html.light .agent-turn .group.flex.justify-center.gap-0\.5 > button { opacity: 1; }
html.light .agent-turn [data-testid='copy-response-button'] { order: 1; }
html.light .agent-turn [data-testid='regenerate-generation-button'] { order: 2; }
html.light .agent-turn [data-testid='read-aloud-button'] { order: 3; }
/* The thumbs are the row's only buttons without a test id: last, as the site's feedback. */
html.light .agent-turn .group.flex.justify-center.gap-0\.5 > button:not([data-testid], [id^='edit-'], [aria-label='Open Fork Menu']) { order: 4; }
html.light .agent-turn :is(button[id^='edit-'], button[aria-label='Open Fork Menu']),
html.light .user-turn :is(button[aria-label='Read aloud'], button[aria-label='Open Fork Menu']) { display: none !important; }
html.light .user-turn button[aria-label='Copy to clipboard'] { order: 1; }
html.light .user-turn button[id^='edit-'] { order: 2; }
html.light :is(.agent-turn, .user-turn) .group.flex.justify-center.gap-0\.5 > button,
html.light :is(.agent-turn, .user-turn) nav[aria-label='Sibling message navigation'] > button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: 10px; background: transparent; color: var(--hdm-icon);
}
html.light :is(.agent-turn, .user-turn) .group.flex.justify-center.gap-0\.5 > button svg { display: block; width: 16px; height: 16px; }
/* A given vote, as the site: the thumb in blue on a light blue square. */
html.light .agent-turn .group.flex.justify-center.gap-0\.5 > button[aria-pressed='true'] { background: var(--hdm-accent-soft); color: var(--hdm-accent-strong); }
html.light :is(.agent-turn, .user-turn) .group.flex.justify-center.gap-0\.5 > button:hover,
html.light :is(.agent-turn, .user-turn) nav[aria-label='Sibling message navigation'] > button:hover { background: var(--hdm-hover); color: var(--hdm-accent-strong); }
html.light nav[aria-label='Sibling message navigation'] [role='status'] { color: var(--hdm-text-tertiary); font-size: 12px; }

/* Message edit box (user message). */
html.light .user-turn [data-testid='message-body']:has(textarea) { padding: 0; background: transparent; }
html.light .user-turn textarea { border: 1px solid var(--hdm-accent-muted); border-radius: 14px; background: var(--hdm-surface); color: var(--hdm-text); }
html.light .user-turn [data-testid='message-body']:has(textarea) button { border-radius: 999px; font-size: 12px; font-weight: 500; }

/* ===================== Thinking banner (thinking.js) ===================== */
/* LibreChat's reasoning part, activity card, thought peek, typing dot and footer timer give way to the first widget's
   banner (312310f), which thinking.js renders. */
html.light .agent-turn :is(.group\/reasoning, [data-testid='activity-phase-card'], [data-testid='streaming-thought-peek'], [data-testid='activity-phase-cursor'], .result-thinking),
html.light .agent-turn span:has(> [data-testid='stream-elapsed']) { display: none; }
html.light .hdm-thinking { max-width: 100%; margin: 0 0 12px; }
html.light .hdm-thinking-toggle {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 0; border: 0; background: transparent;
  color: var(--hdm-text-secondary); font-size: 13px; line-height: 1.4; text-align: left;
}
html.light .hdm-thinking-toggle:hover { color: var(--hdm-accent-strong); }
html.light .hdm-thinking-glint { flex: none; color: #4977bf; font-size: 14px; line-height: 1; }
html.light .hdm-thinking-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.light .hdm-thinking-time { flex: none; color: var(--hdm-text-tertiary); font-variant-numeric: tabular-nums; }
html.light .hdm-thinking-time:empty { display: none; }
html.light .hdm-thinking.is-streaming .hdm-thinking-label {
  font-weight: 500;
  background: linear-gradient(105deg, #4977bf 0%, #6d8ec8 35%, #f8fbff 50%, #6d8ec8 65%, #4977bf 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hdm-sheen 1.8s linear infinite;
}
html.light .hdm-thinking.is-streaming .hdm-thinking-glint { animation: hdm-glow 1.8s ease-in-out infinite; }
@keyframes hdm-sheen { from { background-position: 100% 50%; } to { background-position: -100% 50%; } }
@keyframes hdm-glow { 50% { opacity: .4; transform: scale(.82); } }
html.light .hdm-thinking-steps { margin: 7px 0 1px 5px; padding: 2px 0 1px 12px; border-left: 1px solid var(--hdm-border); }
html.light .hdm-thinking-steps[hidden] { display: none; }
html.light .hdm-thinking-step { position: relative; padding: 0 0 8px; color: var(--hdm-text-tertiary); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
html.light .hdm-thinking-step:last-child { padding-bottom: 0; }
html.light .hdm-thinking-step[data-kind='note'] { font-style: italic; font-synthesis: style; }
html.light .hdm-thinking-step[data-kind='note']::before {
  content: ''; position: absolute; top: 6px; left: -16px; width: 6px; height: 6px; border-radius: 50%; background: var(--hdm-accent-muted);
}
html.light .hdm-thinking-step svg {
  position: absolute; top: 2px; left: -20px; width: 14px; height: 14px; padding: 1px;
  background: var(--hdm-ground); color: #4977bf; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
html.light .hdm-thinking.is-streaming .hdm-thinking-step:last-child { color: var(--hdm-accent-strong); }
html.light .hdm-thinking.is-streaming .hdm-thinking-step:last-child::before {
  background: var(--hdm-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--hdm-accent) 40%, transparent);
}

/* ===================== Follow-up questions (followups.js) ===================== */
html.light .hdm-followups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
html.light .hdm-followups > span { width: 100%; color: var(--hdm-text-tertiary); font-size: 12px; font-weight: 600; }
html.light .hdm-followups button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--hdm-border); border-radius: 999px;
  background: var(--hdm-surface); color: var(--hdm-text);
  font-size: 13px; font-weight: 500; line-height: 1.35; text-align: left;
}
html.light .hdm-followups button:hover { border-color: var(--hdm-accent-muted); background: var(--hdm-accent-soft); color: var(--hdm-accent-strong); }
html.light .hdm-followups-arrow { flex: none; width: 14px; height: 14px; background: var(--hdm-icon-arrow) center / contain no-repeat; font-size: 0; }

/* ===================== History list (both layouts) ===================== */
/* Projects are a LibreChat feature the site does not have. */
html.light div.flex.flex-col.px-3.text-sm:has(button[aria-label='All projects']) { display: none; }
/* "Chats" header and its sort/filter menu. */
html.light [role='region'][aria-label='Chat History'] .px-3:has(#chat-filter-menu-button) span.select-none { color: var(--hdm-text-secondary); font-size: 13px; font-weight: 600; }
html.light #chat-filter-menu-button { border-radius: 8px; color: var(--hdm-icon); }
html.light #chat-filter-menu-button:hover { background: var(--hdm-hover); color: var(--hdm-accent-strong); }
/* Date groups as the site's uppercase labels. */
html.light [data-testid='convo-list-row'] h2 { padding-left: 10px; color: var(--hdm-text-tertiary) !important; font-size: 11px !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
/* Rows: a grey dot and the title; the open chat gets a blue tint and a blue dot. */
html.light [data-testid='convo-item'] { border-radius: 10px; }
html.light [data-testid='convo-item']:hover { background: var(--hdm-hover); }
html.light [data-testid='convo-item'].bg-surface-active-alt { background: var(--hdm-accent-soft); }
html.light [data-testid='convo-item'].bg-surface-active-alt::before { display: none; }
html.light [data-testid='convo-item'] button[aria-label*='conversation'] { gap: 10px; padding: 0 10px; color: var(--hdm-text-secondary); font-size: 13px; }
html.light [data-testid='convo-item'] button[aria-label*='conversation'] > div:first-child { width: 8px !important; height: 8px !important; min-width: 8px; border-radius: 50%; background: var(--hdm-border-strong); }
html.light [data-testid='convo-item'] button[aria-label*='conversation'] > div:first-child > * { display: none; }
html.light [data-testid='convo-item'].bg-surface-active-alt button[aria-label*='conversation'] { color: var(--hdm-text); font-weight: 500; }
html.light [data-testid='convo-item'].bg-surface-active-alt button[aria-label*='conversation'] > div:first-child { background: var(--hdm-accent); }

/* ===================== Menus, dialogs and sign-in ===================== */
/* Light only (light.js): no theme picker in the settings. */
html.light div.flex.items-center.justify-between:has(> #theme-selector-label) { display: none; }
html.light div.absolute.bottom-0.left-0:has(> button[aria-label='Toggle theme']) { display: none; }
/* In the platform's widget, the account card only shows who is signed in: its menu (settings, data controls,
   sign-out) is the platform's business (shell.js stops the keyboard). */
html[data-hdm-embedded] [data-testid='nav-user'] { pointer-events: none; cursor: default; }
html[data-hdm-embedded].light :is(aside[aria-label='Control Panel'], #mobile-drawer) [data-testid='nav-user']::after { content: none; }
html.light [role='menu'],
html.light [role='listbox'] { border: 1px solid var(--hdm-border); border-radius: 14px; background: var(--hdm-surface); box-shadow: var(--hdm-shadow-md); }
html.light [role='menuitem'] { border-radius: 9px; font-size: 13px; }
html.light [role='menuitem']:is(:hover, [data-active-item], [data-highlighted]) { background: var(--hdm-accent-soft); color: var(--hdm-accent-deep); }
html.light [role='dialog'] { border-color: var(--hdm-border); border-radius: 20px; box-shadow: var(--hdm-shadow-lg); }
html.light [role='dialog'] :is(h2, h3) { color: var(--hdm-text); font-family: var(--hdm-font); font-weight: 700; }
html.light [role='dialog'] input:not([type='checkbox'], [type='radio']) { border-color: var(--hdm-border-strong); border-radius: 12px; }
html.light form button[type='submit']:not(#send-button) { border-radius: 999px; background: var(--hdm-accent); color: #fff; font-weight: 600; }
html.light form button[type='submit']:not(#send-button):hover { background: var(--hdm-accent-strong); }

/* ===================== Full view (from 768px) ===================== */
@media (min-width: 768px) {
  /* No top bar, as the site's full view: only the share button floats at the top right
     (moved left of the platform's window controls inside its iframe). */
  html.light main div.absolute.top-0:has([data-testid='model-selector-button']) { height: 0; padding: 0; background: none; pointer-events: none; }
  html.light main div.absolute.top-0:has([data-testid='model-selector-button']) > div:has([data-testid='model-selector-button']) { display: none; }
  html.light #export-menu-button {
    position: fixed; z-index: 30; top: 14px; right: 16px;
    width: 38px; height: 38px;
    border: 1px solid var(--hdm-border); border-radius: 12px;
    background: var(--hdm-surface); color: var(--hdm-text-secondary);
    box-shadow: var(--hdm-shadow-sm); pointer-events: auto;
  }
  html.light #export-menu-button svg { width: 18px; height: 18px; color: currentColor; }
  html.light #export-menu-button:hover { background: var(--hdm-hover); color: var(--hdm-accent-strong); }
  html[data-hdm-embedded].light #export-menu-button { right: 100px; }

  /* History panel, open: logo and close toggle, New chat, the list, the account card.
     The icon rail is unfolded into one grid with LibreChat's own list beside it. */
  html.light aside[aria-label='Control Panel']:has(#close-sidebar-button) > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding: 22px 16px 16px;
    border-right: 1px solid var(--hdm-border);
    background: var(--hdm-surface);
  }
  html.light aside[aria-label='Control Panel']:has(#close-sidebar-button) > div:first-child::before {
    content: '';
    grid-column: 1; grid-row: 1; align-self: center;
    height: 36px; margin-left: 6px;
    background: url('/assets/logo-wordmark.svg') left center / auto 30px no-repeat;
  }
  html.light aside[aria-label='Control Panel']:has(#close-sidebar-button) > div:first-child > div:first-child { display: contents; }
  html.light aside[aria-label='Control Panel']:has(#close-sidebar-button) > div:first-child > div:first-child > :is(.border-b, .overflow-y-auto) { display: none; }
  html.light #close-sidebar-button { grid-column: 2; grid-row: 1; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--hdm-text-secondary); }
  html.light #close-sidebar-button:hover { background: var(--hdm-hover); color: var(--hdm-accent-strong); }
  html.light #close-sidebar-button svg { width: 18px; height: 18px; color: currentColor; }
  html.light aside[aria-label='Control Panel'] a[data-testid='new-chat-button'] {
    grid-column: 1 / -1; grid-row: 2;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: auto; height: 44px; margin: 18px 0 8px;
    border-radius: 14px;
    background: var(--hdm-accent); color: #fff;
    font-size: 14px; font-weight: 600; white-space: nowrap;
    box-shadow: var(--hdm-shadow-accent);
  }
  html.light aside[aria-label='Control Panel'] a[data-testid='new-chat-button'] > svg { display: none; }
  html.light aside[aria-label='Control Panel'] a[data-testid='new-chat-button']::before { content: ''; width: 16px; height: 16px; background: var(--hdm-icon-plus) center / contain no-repeat; }
  html.light aside[aria-label='Control Panel'] a[data-testid='new-chat-button']::after { content: 'New chat'; }
  html.light aside[aria-label='Control Panel'] a[data-testid='new-chat-button']:hover { background: var(--hdm-accent-strong); }
  html.light aside[aria-label='Control Panel']:has(#close-sidebar-button) nav { grid-column: 1 / -1; grid-row: 3; min-height: 0; margin: 0 -10px; background: transparent; opacity: 1; }
  html.light aside[aria-label='Control Panel']:has(#close-sidebar-button) .mt-auto { grid-column: 1 / -1; grid-row: 4; margin-top: 12px; }
  html.light aside[aria-label='Control Panel'] [data-testid='nav-user'] {
    display: flex; justify-content: flex-start; gap: 10px;
    width: 100%; height: auto; padding: 10px;
    border-radius: 14px; background: var(--hdm-ground);
    color: var(--hdm-text); font-size: 13px; font-weight: 600;
  }
  html.light aside[aria-label='Control Panel'] [data-testid='nav-user']::after { content: 'Account'; }
  html.light aside[aria-label='Control Panel'] [data-testid='nav-user']:hover { background: var(--hdm-hover); }
  html.light aside[aria-label='Control Panel'] [data-testid='nav-user'] img { box-shadow: 0 0 0 3px var(--hdm-accent-ring); }
  html.light aside[aria-label='Control Panel'] [aria-label='Resize sidebar']:hover { background: color-mix(in srgb, var(--hdm-accent) 13%, transparent); }

  /* History panel, closed: no rail, only the site's floating toggle at the top left. */
  html.light aside[aria-label='Control Panel']:has([data-testid='open-sidebar-button']) { width: 0 !important; min-width: 0 !important; max-width: 0 !important; overflow: visible; }
  html.light aside[aria-label='Control Panel']:has([data-testid='open-sidebar-button']) > div:first-child { overflow: visible; }
  html.light aside[aria-label='Control Panel']:has([data-testid='open-sidebar-button']) > div:first-child > div:first-child > :not([data-testid='open-sidebar-button']),
  html.light aside[aria-label='Control Panel']:has([data-testid='open-sidebar-button']) :is(nav, [aria-label='Resize sidebar']) { display: none; }
  html.light aside[aria-label='Control Panel']:has([data-testid='open-sidebar-button']) > div:first-child > div:first-child { padding: 0; border: 0; }
  html.light [data-testid='open-sidebar-button'] {
    position: fixed; z-index: 30; top: 14px; left: 16px;
    width: 38px; height: 38px;
    border: 1px solid var(--hdm-border); border-radius: 12px;
    background: var(--hdm-surface); color: var(--hdm-text-secondary);
    box-shadow: var(--hdm-shadow-sm);
  }
  html.light [data-testid='open-sidebar-button'] svg { width: 18px; height: 18px; color: currentColor; }
  html.light [data-testid='open-sidebar-button']:hover { background: var(--hdm-hover); color: var(--hdm-accent-strong); }

  /* Room for the floating buttons above the first message. */
  html.light main .flex.flex-col.pb-9.pt-14 { padding-top: 64px; }

  /* Home: greeting, composer, then the suggestions and the disclaimer, centred together.
     LibreChat puts the starters above the composer and collapses the greeting block to
     fit its smaller logo; give the orb and the title their real height. */
  html.light main div.flex.h-full.transform-gpu:has(p.split-parent) { height: auto; max-height: none !important; margin-bottom: 0 !important; padding-bottom: 26px; }
  html.light main div:has(> form #prompt-textarea):has(> div > button > span.line-clamp-2) { display: flex; flex-direction: column; gap: 26px; max-width: 808px; padding: 0 24px; }
  html.light main div:has(> form #prompt-textarea):has(> div > button > span.line-clamp-2) > form { order: 1; width: 100%; max-width: none; margin: 0; padding: 0; }
  html.light main div:has(> form #prompt-textarea):has(> div > button > span.line-clamp-2) > form::after { content: none; }
  html.light main div:has(> form #prompt-textarea) > div:has(> button > span.line-clamp-2) { order: 2; margin: 0 0 24px; }
  html.light main div:has(> form #prompt-textarea) > div:has(> button > span.line-clamp-2)::after {
    content: 'AI-generated content may be inaccurate.';
    grid-column: 1 / -1;
    margin-top: 2px;
    color: var(--hdm-text-tertiary); font-size: 12px; text-align: center;
  }
  html.light main div:has(> form #prompt-textarea):has(> div > button > span.line-clamp-2) [data-testid='composer-surface'] { padding: 8px 6px 4px 8px; }
  html.light main div:has(> form #prompt-textarea):has(> div > button > span.line-clamp-2) #prompt-textarea { min-height: 64px; font-size: 17px; }

  /* In a chat the composer keeps room under it for the disclaimer. */
  html.light main form:has(#prompt-textarea) { margin-bottom: 34px; }
}

@media (min-width: 768px) and (max-height: 760px) {
  html.light main div:has(> .icon-xl > img[src='/assets/mark.png']) { width: 64px; height: 64px; margin-bottom: 18px; }
  html.light main div.flex.h-full.transform-gpu:has(p.split-parent) { padding-bottom: 16px; }
  html.light main div:has(> form #prompt-textarea):has(> div > button > span.line-clamp-2) { gap: 16px; }
}

/* The site's list icon on every history toggle, open or close, full view and widget, in place of LibreChat's sidebar icon. */
html.light :is(#open-sidebar-button, #close-sidebar-button, [data-testid='open-sidebar-button']) svg { display: none; }
html.light :is(#open-sidebar-button, #close-sidebar-button, [data-testid='open-sidebar-button'])::before {
  content: ''; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--hdm-icon-menu) center / contain no-repeat; mask: var(--hdm-icon-menu) center / contain no-repeat;
}

/* The widget's greeting (shell.js): each letter rises in, as LibreChat animates its own (delay 50ms, easeOutCubic). */
html.light main p.hdm-greeting { display: none; }
html.light .hdm-greeting-word { display: inline-block; white-space: nowrap; }
html.light .hdm-greeting-word > span { display: inline-block; opacity: 0; animation: hdm-letter-in .6s cubic-bezier(.33, 1, .68, 1) forwards; }
@keyframes hdm-letter-in { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }

/* ===================== Widget panel (below 768px) ===================== */
@media (max-width: 767px) {
  /* Header: the assistant's identity on the left, the history toggle on the right, left of
     the platform's expand and close buttons. Those belong to the host page (preview.css):
     12px from the right, 36px each, 4px apart, so the toggle sits 92px from the right. */
  html.light main div.absolute.top-0:has([data-testid='model-selector-button']) {
    height: 62px; padding: 0 136px 0 14px;
    border-bottom: 1px solid var(--hdm-border);
    background: var(--hdm-surface);
  }
  html:not([data-hdm-embedded]).light main div.absolute.top-0:has([data-testid='model-selector-button']) { padding-right: 56px; }
  html.light main div.absolute.top-0 > div:has(> #open-sidebar-button) { width: 0; flex: none; }
  html.light #open-sidebar-button {
    position: absolute; top: 13px; right: 92px;
    width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 10px;
    background: transparent; color: var(--hdm-text-secondary);
  }
  html:not([data-hdm-embedded]).light #open-sidebar-button { right: 12px; }
  html.light #open-sidebar-button:hover { background: var(--hdm-hover); color: var(--hdm-accent-strong); }
  html.light main div.absolute.top-0 :is(a[data-testid='header-new-chat-button'], #header-menu-button) { display: none; }

  /* The model button becomes the site's panel identity: ringed mark, name, tagline. */
  html.light [data-testid='model-selector-button'] {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 18px 16px; gap: 2px 10px; align-content: center;
    width: 230px; height: 52px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent;
    text-align: left; pointer-events: none;
  }
  html.light [data-testid='model-selector-button'] > div {
    grid-column: 1; grid-row: 1 / 3;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%; background: var(--hdm-surface);
    box-shadow: 0 0 0 3px var(--hdm-accent-ring);
  }
  /* LibreChat sizes the icon box inline (20px); enlarge the box itself so the mark is not cropped. */
  html.light [data-testid='model-selector-button'] > div > div { width: 24px !important; height: 24px !important; border-radius: 0; }
  html.light [data-testid='model-selector-button'] > div img { width: 100% !important; height: 100% !important; object-fit: contain; }
  html.light [data-testid='model-selector-button'] > span { grid-column: 2; grid-row: 1; color: var(--hdm-text); font-size: 14px; font-weight: 700; line-height: 18px; }
  html.light [data-testid='model-selector-button']::after { content: 'Your campaign assistant'; grid-column: 2; grid-row: 2; color: var(--hdm-text-tertiary); font-size: 12px; font-weight: 400; line-height: 16px; }
  html.light [data-testid='model-selector-button'] > svg { display: none; }

  /* Welcome: the orb and "Need a hand?" (shell.js) centred between the header and the prompts, which form a list above the composer. */
  html.light main div.flex.h-full.transform-gpu:has(p.split-parent) { align-items: center; justify-content: center; align-self: stretch; width: 100%; padding: 62px 20px 0; }
  /* From 640px LibreChat collapses the greeting (sm:max-h-0) to centre its form; the
     panel keeps the greeting at the top and the prompts and composer at the bottom. */
  html.light main div:has(> div.transform-gpu p.split-parent) { justify-content: flex-end; }
  html.light main div.flex.h-full.transform-gpu:has(p.split-parent) { flex: 1 1 auto; height: auto; max-height: 100% !important; margin-bottom: 0 !important; }
  html.light main div.flex.flex-col.items-center.gap-0.p-2:has(p.split-parent),
  html.light main div:has(> p.split-parent) { align-items: center; width: 100%; padding: 0; text-align: center; }
  html.light main div:has(> p.split-parent) { gap: 8px; }
  html.light main p.split-parent { display: none; }
  html.light main p.hdm-greeting { display: block; margin: 0; color: var(--hdm-text); font: 400 40px/1.2 var(--hdm-serif); letter-spacing: -0.02em; text-align: center; }
  html.light main div:has(> .icon-xl > img[src='/assets/mark.png']) { width: 60px; height: 60px; margin: 0 0 16px; }

  html.light main div:has(> button > span.line-clamp-2) { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 0 18px; }
  html.light main div:has(> button > span.line-clamp-2)::before { margin: 0 0 4px 6px; }
  html.light main button:has(> span.line-clamp-2) { flex-direction: row; align-items: center; min-height: 56px; padding: 10px 12px; border-radius: 16px; transform: none !important; }
  html.light main button:has(> span.line-clamp-2)::before { width: 34px; height: 34px; border-radius: 10px; }
  html.light main button:has(> span.line-clamp-2)::after { position: static; margin-left: auto; opacity: 1; }
  html.light main button > span.line-clamp-2 { font-size: 13px; font-weight: 500; }
  html.light main button > span.line-clamp-2::after { display: none; }

  /* Composer. */
  html.light main form:has(#prompt-textarea) { width: calc(100% - 36px); margin: 0 18px 28px; padding: 0; }
  html.light [data-testid='composer-surface'] { padding: 4px 2px 0 4px; border-radius: 20px; box-shadow: var(--hdm-shadow-md); }
  html.light #prompt-textarea { font-size: 14px; }
  html.light form:has(#prompt-textarea)::after { margin-top: 8px; font-size: 11px; }
  html.light #send-button { width: 40px; height: 40px; }

  html.light .message-render { padding: 0 20px; }
  html.light .agent-turn .message-content :is(ul, ol) { padding-left: 22px; }
  html.light .agent-turn .message-content,
  html.light .user-turn [data-testid='message-body'] .message-content,
  html.light .user-turn [data-testid='message-body'] .message-content :is(p, a, li, strong) { font-size: 14px; }
  html.light .user-turn { max-width: 85%; }
  html.light .user-turn [data-testid='message-body'] { padding: 11px 15px; border-radius: 18px 18px 6px 18px; }
  html.light main .flex.flex-col.pb-9.pt-14 { padding-top: 80px; }

  /* History drawer: logo and toggle, New chat, the list, the account card. */
  html.light #mobile-drawer { background: var(--hdm-surface); }
  html.light #mobile-drawer > div:first-child { order: 0; height: 62px; min-height: 62px; padding: 0 136px 0 20px; border-bottom: 0; }
  html:not([data-hdm-embedded]).light #mobile-drawer > div:first-child { padding-right: 56px; }
  html.light #mobile-drawer > div:first-child::before { content: ''; width: 140px; height: 36px; background: url('/assets/logo-wordmark.svg') left center / contain no-repeat; }
  html.light #mobile-drawer > div:first-child > button[aria-label='Close sidebar'] {
    position: absolute; top: 13px; right: 92px;
    width: 36px; height: 36px;
    border: 0; border-radius: 10px;
    background: transparent; color: var(--hdm-text-secondary);
  }
  html:not([data-hdm-embedded]).light #mobile-drawer > div:first-child > button[aria-label='Close sidebar'] { right: 12px; }
  html.light #mobile-drawer > div:first-child > button[aria-label='Close sidebar']:hover { background: var(--hdm-hover); color: var(--hdm-accent-strong); }
  html.light #mobile-drawer [data-testid='panel-switcher-button'] { display: none; }
  html.light #mobile-drawer > div:has(> a[data-testid='nav-new-chat-fab']) { order: 1; padding: 4px 16px 6px; }
  html.light a[data-testid='nav-new-chat-fab'] { height: 44px; gap: 8px; border-radius: 14px; background: var(--hdm-accent); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--hdm-shadow-accent); }
  html.light a[data-testid='nav-new-chat-fab'] > svg { display: none; }
  html.light a[data-testid='nav-new-chat-fab']::before { content: ''; width: 16px; height: 16px; background: var(--hdm-icon-plus) center / contain no-repeat; }
  html.light a[data-testid='nav-new-chat-fab']:hover { background: var(--hdm-accent-strong); }
  html.light #mobile-drawer > nav { order: 2; padding: 0 6px 84px; border-right: 0; background: transparent; }
  html.light #mobile-drawer [data-testid='nav-user'] {
    position: absolute; z-index: 2; right: 16px; bottom: 16px; left: 16px;
    display: flex; justify-content: flex-start; gap: 10px;
    width: auto; height: 56px; padding: 10px;
    border-radius: 14px; background: var(--hdm-ground);
    color: var(--hdm-text); font-size: 13px; font-weight: 600;
  }
  html.light #mobile-drawer [data-testid='nav-user']::after { content: 'Account'; }
  html.light #mobile-drawer [data-testid='nav-user'] img { box-shadow: 0 0 0 3px var(--hdm-accent-ring); }
}

@media (max-width: 767px) and (max-height: 720px) {
  html.light main p.hdm-greeting { font-size: 34px; }
  html.light main div:has(> .icon-xl > img[src='/assets/mark.png']) { width: 48px; height: 48px; margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html.light main button:has(> span.line-clamp-2),
  html.light [data-testid='composer-surface'] { transition: none; }
  html.light .hdm-thinking :is(.hdm-thinking-label, .hdm-thinking-glint) { animation: none; }
  html.light .hdm-greeting-word > span { opacity: 1; animation: none; }
}