/* 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:is([aria-label='Stop generating'], [aria-label='Arrêter la génération'])) { 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:is([aria-label='Stop generating'], [aria-label='Arrêter la génération'])):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-'], :is([aria-label='Open Fork Menu'], [aria-label='Ouvrir le menu de fork'])) { order: 4; }
html.light .agent-turn :is(button[id^='edit-'], button:is([aria-label='Open Fork Menu'], [aria-label='Ouvrir le menu de fork'])),
html.light .user-turn :is(button:is([aria-label='Read aloud'], [aria-label='Lire à haute voix']), button:is([aria-label='Open Fork Menu'], [aria-label='Ouvrir le menu de fork'])) { display: none !important; }
html.light .user-turn button:is([aria-label='Copy to clipboard'], [aria-label='Copier dans le presse-papier']) { 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']:is([aria-label='Chat History'], [aria-label='Historique des discussions']) .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.grow { gap: 10px; padding: 0 10px; color: var(--hdm-text-secondary); font-size: 13px; }
html.light [data-testid='convo-item'] button.grow > 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.grow > div:first-child > * { display: none; }
html.light [data-testid='convo-item'].bg-surface-active-alt button.grow { color: var(--hdm-text); font-weight: 500; }
html.light [data-testid='convo-item'].bg-surface-active-alt button.grow > 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:is([aria-label='Toggle theme'], [aria-label='Changer de thème'])) { 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:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']), #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.
     Open or closed is read from the width LibreChat sets on the panel (52px closed), whatever its language. */
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']):not([style*='width: 52px']) > 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:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']):not([style*='width: 52px']) > 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:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']):not([style*='width: 52px']) > div:first-child > div:first-child { display: contents; }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']):not([style*='width: 52px']) > 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:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) 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:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) a[data-testid='new-chat-button'] > svg { display: none; }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) a[data-testid='new-chat-button']::before { content: ''; width: 16px; height: 16px; background: var(--hdm-icon-plus) center / contain no-repeat; }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) a[data-testid='new-chat-button']::after { content: 'New chat'; }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) a[data-testid='new-chat-button']:hover { background: var(--hdm-accent-strong); }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']):not([style*='width: 52px']) nav { grid-column: 1 / -1; grid-row: 3; min-height: 0; margin: 0 -10px; background: transparent; opacity: 1; }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']):not([style*='width: 52px']) .mt-auto { grid-column: 1 / -1; grid-row: 4; margin-top: 12px; }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) [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:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) [data-testid='nav-user']::after { content: 'Account'; }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) [data-testid='nav-user']:hover { background: var(--hdm-hover); }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) [data-testid='nav-user'] img { box-shadow: 0 0 0 3px var(--hdm-accent-ring); }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) [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:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle'])[style*='width: 52px'] { width: 0 !important; min-width: 0 !important; max-width: 0 !important; overflow: visible; }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle'])[style*='width: 52px'] > div:first-child { overflow: visible; }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle'])[style*='width: 52px'] > div:first-child > div:first-child > :not([data-testid='open-sidebar-button']),
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle'])[style*='width: 52px'] :is(nav, [aria-label='Resize sidebar']) { display: none; }
  html.light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle'])[style*='width: 52px'] > 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:is([aria-label='Close sidebar'], [aria-label='Fermer la barre latérale']) {
    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:is([aria-label='Close sidebar'], [aria-label='Fermer la barre latérale']) { right: 12px; }
  html.light #mobile-drawer > div:first-child > button:is([aria-label='Close sidebar'], [aria-label='Fermer la barre latérale']):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; }
}

/* ===================== French =====================
   LibreChat takes the platform's language (platform.js) and sets it on <html lang>. The labels it translates
   are matched in both languages above; the text this theme adds is translated here. */
html[lang^='fr'].light form:has(#prompt-textarea)::after { content: "Le contenu généré par l'IA peut être inexact."; }
html[lang^='fr'].light main div:has(> button > span.line-clamp-2)::before { content: 'Suggestions'; }
html[lang^='fr'].light main button:nth-child(1) > span.line-clamp-2::after { content: 'Résumez les résultats de ma dernière campagne.'; }
html[lang^='fr'].light main button:nth-child(2) > span.line-clamp-2::after { content: 'Comparez le brand lift de mes campagnes.'; }
html[lang^='fr'].light main button:nth-child(3) > span.line-clamp-2::after { content: 'Que puis-je améliorer dans ma prochaine campagne ?'; }
@media (min-width: 768px) {
  html[lang^='fr'].light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) a[data-testid='new-chat-button']::after { content: 'Nouvelle discussion'; }
  html[lang^='fr'].light aside:is([aria-label='Control Panel'], [aria-label='Panneau de contrôle']) [data-testid='nav-user']::after { content: 'Compte'; }
  html[lang^='fr'].light main div:has(> form #prompt-textarea) > div:has(> button > span.line-clamp-2)::after { content: "Le contenu généré par l'IA peut être inexact."; }
  /* The welcome title is librechat.yaml's, in English: shell.js writes the French one, styled as LibreChat's. */
  html[lang^='fr'].light main p.split-parent { display: none; }
  html[lang^='fr'].light main p.hdm-greeting { display: block; margin: 0; font: 400 42px/1.15 var(--hdm-serif); letter-spacing: -0.02em; color: var(--hdm-text); text-align: center; }
}
@media (max-width: 767px) {
  html[lang^='fr'].light [data-testid='model-selector-button']::after { content: 'Votre assistant de campagne'; }
  html[lang^='fr'].light #mobile-drawer [data-testid='nav-user']::after { content: 'Compte'; }
}

@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; }
}