/* Embedded LibreChat only. The dashboard owns the overlaid frame; this file owns its contents.
   Keep the 56px header and the host's 32px close button (12px inset) on the same grid.
   No docking or dashboard layout rules belong here. Selectors target LibreChat v0.8.8. */
html[data-hdm-embedded].light {
  --hdm-text: #040404;
  --hdm-text-secondary: #444;
  --hdm-text-tertiary: #666;
  --hdm-icon: #666;
  --hdm-border: rgb(4 4 4 / 12%);
  --hdm-border-strong: rgb(4 4 4 / 12%);
  --hdm-ground: #fff;
  --hdm-surface-subtle: #efefef;
  --hdm-hover: #f7f7f7;
  --hdm-accent-soft: #e7f1fd;
  --hdm-shadow-sm: 0 2px 5px rgb(0 0 0 / 10%);
  --hdm-shadow-md: var(--hdm-shadow-sm);
  --surface-submit: 4 4 4;
  --surface-submit-hover: 45 45 45;
  --surface-active-alt: 239 239 239;
  --surface-hover: 247 247 247;
  --text-primary: 4 4 4;
  --text-secondary: 68 68 68;
  --text-tertiary: 102 102 102;
}

html[data-hdm-embedded].light :focus-visible { outline: 2px solid #438bee; outline-offset: 2px; }
html[data-hdm-embedded].light main div.absolute.top-0:has([data-testid='model-selector-button']) {
  height: 56px; gap: 0; padding: 0 84px 0 14px;
  border-bottom: 1px solid rgb(4 4 4 / 8%); background: #fff;
}
html[data-hdm-embedded].light [data-testid='model-selector-button'] {
  display: flex; align-items: center; gap: 14px; min-width: 0; width: auto; height: 56px;
}
html[data-hdm-embedded].light [data-testid='model-selector-button'] > div {
  flex: none; width: 26px; height: 28px; border-radius: 0;
  background: url('/assets/hdm-mark.svg') center / contain no-repeat; box-shadow: none;
}
html[data-hdm-embedded].light [data-testid='model-selector-button'] > div > div { visibility: hidden; }
html[data-hdm-embedded].light [data-testid='model-selector-button'] > span {
  overflow: hidden; color: #040404; font-size: 14px; font-weight: 700; line-height: 20px; text-overflow: ellipsis;
}
html[data-hdm-embedded].light [data-testid='model-selector-button']::after { content: none; }
html[data-hdm-embedded].light #open-sidebar-button,
html[data-hdm-embedded].light #mobile-drawer > div:first-child > button:is([aria-label='Close sidebar'], [aria-label='Fermer la barre latérale']) {
  top: 12px; right: 48px; width: 32px; height: 32px; border-radius: 6px; color: #444;
}
html[data-hdm-embedded].light :is(#open-sidebar-button, #close-sidebar-button)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Static welcome near the composer. No orb or letter animation in the embedded panel. */
html[data-hdm-embedded].light main div.flex.h-full.transform-gpu:has(p.split-parent) {
  flex: 1 1 auto; align-items: flex-start; justify-content: flex-end;
  min-height: 0; padding: 80px 20px 24px;
}
html[data-hdm-embedded].light main div.flex.flex-col.items-center.gap-0.p-2:has(p.split-parent),
html[data-hdm-embedded].light main div:has(> p.split-parent) { align-items: flex-start; text-align: left; }
html[data-hdm-embedded].light main div:has(> .icon-xl > img[src='/assets/mark.png']) { display: none; }
html[data-hdm-embedded].light main p.hdm-greeting {
  display: block; width: 100%; margin: 0; font: 400 26px/32px var(--hdm-serif);
  letter-spacing: -.01em; text-align: left;
}
html[data-hdm-embedded].light .hdm-greeting em { font-synthesis: style; }
html[data-hdm-embedded].light .hdm-welcome-description { margin: 12px 0 0; color: #666; font-size: 13px; line-height: 20px; text-align: left; }
html[data-hdm-embedded].light main div:has(> button > span.line-clamp-2) { gap: 8px; margin-bottom: 16px; padding: 0 16px; }
html[data-hdm-embedded].light main div:has(> button > span.line-clamp-2)::before {
  content: 'Start with'; margin: 0 0 2px 4px; padding: 0; background: none; color: #666;
  font-size: 12px; font-weight: 700; line-height: 16px;
}
html[data-hdm-embedded].light main button:has(> span.line-clamp-2) {
  gap: 12px; min-height: 56px; padding: 9px 12px;
  border-radius: 12px; border-color: rgb(4 4 4 / 12%); background: #fff;
  box-shadow: none; transition: background 140ms, border-color 140ms;
}
html[data-hdm-embedded].light main button:has(> span.line-clamp-2):hover { background: #f7f7f7; transform: none; }
html[data-hdm-embedded].light main button:has(> span.line-clamp-2)::before {
  width: 32px; height: 32px; border-radius: 6px; background-color: #efefef;
  filter: grayscale(1);
}
html[data-hdm-embedded].light main button:has(> span.line-clamp-2)::after {
  flex: none; width: 14px; height: 14px; background: none;
  content: '›'; color: #666; font-size: 20px; line-height: 12px;
}
html[data-hdm-embedded].light main button > span.line-clamp-2 { gap: 2px; font-size: 14px; font-weight: 700; line-height: 20px; }
html[data-hdm-embedded].light main button > span.line-clamp-2::after { display: block; color: #666; font-size: 12px; font-weight: 400; line-height: 16px; }
html[data-hdm-embedded].light main button:nth-child(1) > span.line-clamp-2::after { content: 'Upload an export, get a synthesis'; }
html[data-hdm-embedded].light main button:nth-child(2) > span.line-clamp-2::after { content: 'Objectives, KPIs and audience'; }
html[data-hdm-embedded].light main button:nth-child(3) > span.line-clamp-2::after { content: 'Ad recall, consideration, uplift…'; }

html[data-hdm-embedded].light main form:has(#prompt-textarea) {
  width: calc(100% - 32px); margin: 0 16px calc(28px + env(safe-area-inset-bottom, 0px)); padding: 0;
}
html[data-hdm-embedded].light [data-testid='composer-surface'] {
  padding: 8px 4px 2px 10px; border-radius: 12px; border-color: rgb(4 4 4 / 12%);
  box-shadow: 0 2px 5px rgb(0 0 0 / 6%);
}
html[data-hdm-embedded].light [data-testid='composer-surface']:focus-within { border-color: #438bee; box-shadow: 0 0 0 3px rgb(67 139 238 / 25%); }
/* 22 to 200px of text. The box is border-box with LibreChat's 13px vertical padding: a 22px floor let its
   height recompute (after an answer) shrink the box below one line and clip the placeholder. */
html[data-hdm-embedded].light #prompt-textarea { min-height: 48px; max-height: 226px; font-size: 14px; line-height: 22px; }
html[data-hdm-embedded].light :is(#send-button, [data-testid='stop-generation-button'], [data-testid='composer-stop-button']) { width: 32px; height: 32px; border-radius: 50%; background: #040404; color: #fff; box-shadow: none; }
html[data-hdm-embedded].light #send-button:disabled { background: #efefef; color: #818181; opacity: 1; }
html[data-hdm-embedded].light #attach-file-button { border: 0; background: transparent; color: #666; }
html[data-hdm-embedded].light form:has(#prompt-textarea)::after {
  content: 'AI answers can be wrong. Check key figures.'; margin-top: 8px; color: #666; font-size: 11px; line-height: 16px;
}

html[data-hdm-embedded].light main .flex.flex-col.pb-9.pt-14 { padding-top: 72px; }
html[data-hdm-embedded].light .message-render { padding: 0 16px; }
html[data-hdm-embedded].light .user-turn [data-testid='message-body'] { padding: 9px 13px; border-radius: 12px 12px 4px 12px; background: #e7f1fd; }
html[data-hdm-embedded].light .user-turn [data-testid='message-body'] .message-content,
html[data-hdm-embedded].light .user-turn [data-testid='message-body'] .message-content :is(p, a, li, strong),
html[data-hdm-embedded].light .agent-turn .message-content { color: #040404; font-size: 14px; line-height: 22px; }
html[data-hdm-embedded].light .agent-turn .message-content p { margin-bottom: 6px; }
html[data-hdm-embedded].light .agent-turn .message-content :is(ul, ol) { padding-left: 18px; }
html[data-hdm-embedded].light .agent-turn [data-testid='read-aloud-button'] { display: none !important; }
html[data-hdm-embedded].light :is(.agent-turn, .user-turn) .group.flex.justify-center.gap-0\.5 > button { width: 28px; height: 28px; border-radius: 6px; }
html[data-hdm-embedded].light .message-render:has(~ .message-render .agent-turn) .agent-turn .group.flex.justify-center.gap-0\.5 { opacity: 0; }
html[data-hdm-embedded].light .message-render:is(:hover, :focus-within) .agent-turn .group.flex.justify-center.gap-0\.5 { opacity: 1; }

html[data-hdm-embedded].light .hdm-thinking-toggle { color: #666; font-size: 12px; line-height: 16px; }
html[data-hdm-embedded].light .hdm-thinking-glint { color: #666; }
html[data-hdm-embedded].light .hdm-thinking.is-streaming { padding: 12px; border: 1px solid rgb(4 4 4 / 12%); border-radius: 12px; }
html[data-hdm-embedded].light .hdm-thinking.is-streaming :is(.hdm-thinking-label, .hdm-thinking-glint) { background: none; color: #666; animation: none; }
html[data-hdm-embedded].light .hdm-thinking-step svg { color: #666; stroke-width: 1.75; }
html[data-hdm-embedded].light .hdm-thinking:has([aria-expanded='true']) ~ .hdm-followups { display: none; }
html[data-hdm-embedded].light .hdm-followups { flex-direction: column; align-items: stretch; gap: 6px; }
html[data-hdm-embedded].light .hdm-followups > span { margin-bottom: 2px; color: #666; font-size: 12px; font-weight: 700; }
html[data-hdm-embedded].light .hdm-followups button { justify-content: space-between; min-height: 32px; padding: 7px 10px; border-radius: 6px; font-size: 13px; line-height: 18px; }
html[data-hdm-embedded].light .hdm-followups-arrow { order: 2; filter: grayscale(1); }

/* Keep LibreChat's native alert and retry behavior while matching the panel surfaces. */
html[data-hdm-embedded].light .agent-turn [role='alert'] {
  padding: 14px; border: 1px solid rgb(4 4 4 / 12%); border-radius: 12px;
  background: #fff; color: #040404; font-size: 13px; line-height: 20px; text-align: left;
}
html[data-hdm-embedded].light .agent-turn [role='alert'] svg { color: #c1366b; }
html[data-hdm-embedded].light .agent-turn [role='alert'] button {
  min-height: 32px; padding: 4px 14px; border: 1.5px solid #040404; border-radius: 999px;
  background: #fff; color: #040404; font-size: 13px;
}

/* History covers only the iframe. The dashboard remains interactive outside it. */
html[data-hdm-embedded].light #mobile-drawer { width: 100%; max-width: none; background: #fff; }
html[data-hdm-embedded].light #mobile-drawer > div:first-child { height: 56px; min-height: 56px; gap: 0; padding: 0 84px 0 14px; border-bottom: 1px solid rgb(4 4 4 / 8%); }
html[data-hdm-embedded].light #mobile-drawer > div:first-child::before { width: 100%; height: 56px; padding-left: 40px; background: url('/assets/hdm-mark.svg') left center / 26px 28px no-repeat; content: 'Happydemics AI'; color: #040404; font-size: 14px; font-weight: 700; line-height: 56px; }
html[data-hdm-embedded].light #mobile-drawer [data-testid='nav-user'] { display: none; }
html[data-hdm-embedded].light #mobile-drawer > nav { padding-bottom: 16px; }
/* As much room above New chat, under the header's rule, as below it. */
html[data-hdm-embedded].light #mobile-drawer > div:has(> a[data-testid='nav-new-chat-fab']) { padding: 12px 16px; }
html[data-hdm-embedded].light #mobile-drawer a[data-testid='nav-new-chat-fab'] { height: 40px; border-radius: 999px; background: #040404; box-shadow: none; }
html[data-hdm-embedded].light [data-testid='convo-item'] { border-radius: 6px; }
html[data-hdm-embedded].light [data-testid='convo-item'].bg-surface-active-alt { background: #efefef; }
html[data-hdm-embedded].light [data-testid='convo-item'] button.grow { padding: 8px 10px; font-size: 14px; }
html[data-hdm-embedded].light [data-testid='convo-item'] button.grow > div:first-child { display: none; }
html[data-hdm-embedded].light [data-testid='convo-item'].bg-surface-active-alt button.grow { font-weight: 700; }

html[data-hdm-embedded][lang^='fr'].light main div:has(> button > span.line-clamp-2)::before { content: 'Pour commencer'; }
html[data-hdm-embedded][lang^='fr'].light main button:nth-child(1) > span.line-clamp-2::after { content: 'Envoyez un export, recevez la synthèse'; }
html[data-hdm-embedded][lang^='fr'].light main button:nth-child(2) > span.line-clamp-2::after { content: 'Objectifs, KPI et audience'; }
html[data-hdm-embedded][lang^='fr'].light main button:nth-child(3) > span.line-clamp-2::after { content: 'Mémorisation, considération, uplift…'; }
html[data-hdm-embedded][lang^='fr'].light form:has(#prompt-textarea)::after { content: 'Une IA peut se tromper. Vérifiez les chiffres clés.'; }

@media (max-height: 650px) {
  html[data-hdm-embedded].light main div.flex.h-full.transform-gpu:has(p.split-parent) { flex: none; padding-top: 72px; padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-hdm-embedded].light *, html[data-hdm-embedded].light *::before, html[data-hdm-embedded].light *::after { animation: none !important; scroll-behavior: auto !important; }
}