/* Shared by the help page and the application dialog. Deep Chat inherits these
   tokens across its shadow root; the :host rules below style its supported CSS hook. */
:where(.help-assistant, .help-chat-heading, .help-chat-dialog, #mnm-help-launcher) {
  --chat-surface: var(--color-base-100, #ffffff);
  --chat-muted-surface: var(--color-base-200, #f4f2f8);
  --chat-text: var(--color-base-content, #252336);
  --chat-accent: var(--color-primary, #6543b5);
  --chat-on-accent: var(--color-primary-content, #ffffff);
  --chat-subtle: color-mix(in srgb, var(--chat-text) 66%, var(--chat-surface));
  --chat-border: color-mix(in srgb, var(--chat-text) 16%, var(--chat-surface));
  --chat-link: var(--help-color-link, var(--chat-accent));
  color: var(--chat-text);
  font-family: var(--sl-font, 'Funnel Sans', system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  box-sizing: border-box;
}

html[data-theme='dark'] :where(.help-assistant, .help-chat-heading, .help-chat-dialog, #mnm-help-launcher) {
  --chat-surface: var(--color-base-100, #1d202b);
  --chat-muted-surface: var(--color-base-200, #282c39);
  --chat-text: var(--color-base-content, #edf0f7);
  --chat-link: var(--help-color-link, #bca3ff);
}

.help-assistant { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.help-chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.help-chat-heading :is(h1, h2) {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.help-chat-controls { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.help-chat-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .45rem .85rem;
  border: 1px solid var(--chat-border);
  border-radius: .65rem;
  background: var(--chat-surface);
  color: var(--chat-text);
  font: inherit;
  font-size: .875rem;
  font-weight: 550;
  line-height: 1.4;
  cursor: pointer;
}
.help-chat-button:hover { background: var(--chat-muted-surface); }
.help-chat-button:disabled { opacity: .5; cursor: default; }
:is(.help-chat-button, #mnm-help-launcher):focus-visible {
  outline: 2px solid var(--chat-accent);
  outline-offset: 3px;
}
.help-chat-view { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.help-chat-panel {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--chat-border);
  border-radius: 1rem;
  background: var(--chat-surface);
}
.help-chat-panel deep-chat { display: block; flex: 1; min-height: 0; min-width: 0; }
.help-chat-welcome {
  position: absolute;
  z-index: 1;
  inset: 0 1.25rem 7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.help-chat-welcome[hidden] { display: none; }
.help-chat-welcome h2 { margin: 0 0 .65rem; font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: -.025em; }
.help-chat-welcome p { max-width: 28rem; margin: 0; color: var(--chat-subtle); font-size: .975rem; }
.help-chat-feedback { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 1.8rem; padding: .25rem .25rem 0; font-size: .85rem; color: var(--chat-subtle); }
.help-chat-status { display: flex; align-items: center; gap: .5rem; margin: 0; }
.help-chat-status[data-error='true'] { color: var(--chat-text); }
.help-chat-status .loading, .help-chat-placeholder .loading { flex-shrink: 0; color: var(--chat-accent); }
.help-chat-status .loading[hidden] { display: none; }
.help-chat-feedback button[hidden] { display: none; }
.help-chat-footer { margin: .35rem 0 0; padding: 0; text-align: center; font-size: .8rem; color: var(--chat-subtle); }
.help-chat-footer a { color: var(--chat-link); text-decoration: underline; text-underline-offset: .2em; }
.help-chat-placeholder { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: auto; padding: 1rem; text-align: center; color: var(--chat-subtle); }

#mnm-help-launcher {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: .65rem 1rem; border-radius: 2rem;
  background: var(--chat-accent); color: var(--chat-on-accent);
  box-shadow: 0 3px 16px #0002; font-weight: 600; text-decoration: none;
}
.help-chat-dialog {
  width: min(55rem, calc(100vw - 2rem));
  height: min(48rem, calc(var(--help-chat-window-height, 100dvh) - 3rem));
  max-width: none; max-height: none;
  padding: 1rem; border: 1px solid var(--chat-border); border-radius: 1.25rem;
  background: var(--chat-surface); overflow: hidden;
}
.help-chat-dialog::backdrop { background: #13142580; backdrop-filter: blur(3px); }
body:has(.help-chat-dialog[open]) { overflow: hidden; }
.help-chat-dialog[open] { display: flex; flex-direction: column; gap: .85rem; }
.help-chat-dialog > .help-assistant { flex: 1; min-height: 0; }
.help-chat-dialog .help-chat-footer a + a { margin-inline-start: 1rem; }

/* The loader also supplies this sheet to Deep Chat's shadow-root styling hook. */
:host { font-family: inherit; color: var(--chat-text); }
:host :is(button, input, textarea, [contenteditable]) { font: inherit; }
:host #chat-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
:host #messages { flex: 1; min-height: 0; height: auto; padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--chat-border) transparent; }
/* Labelled controls need real columns, not the default zero-width icon anchors. */
:host #input { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .5rem; align-items: end; flex-shrink: 0; }
:host #input > .inner-button-container { display: none; }
:host #input > .outer-button-container { width: auto; height: 2.75rem; grid-row: 2; }
:host #input > .outer-button-container:has(.outside-start) { grid-column: 1; }
:host #input > .outer-button-container:has(.outside-end) { grid-column: 3; }
:host #input .input-button { position: static !important; inset: auto !important; transform: none !important; }
:host #input .input-button-svg-text svg { display: none; }
:host #text-input-container { grid-row: 2; grid-column: 2; min-width: 0; width: 100% !important; margin: 0 !important; box-sizing: border-box; }
:host #file-attachment-container { grid-row: 1; grid-column: 1 / -1; position: static !important; inset: auto !important; width: 100% !important; max-height: 8rem; overflow-y: auto; margin-bottom: .65rem; box-sizing: border-box; }
:host :is(.text-message, .message-bubble) { overflow-wrap: anywhere; }
:host .text-message :is(p, ul, ol) { margin-block: .6rem; }
:host .text-message :is(ul, ol) { padding-inline-start: 1.5rem; }
:host .text-message li + li { margin-top: .4rem; }
:host .text-message a { color: var(--chat-link); text-underline-offset: .2em; }
:host .text-message pre { max-width: 100%; overflow-x: auto; padding: .75rem; background: var(--chat-muted-surface); border-radius: .5rem; }
:host #text-input { font-size: 1rem; line-height: 1.5; }
:host #text-input:empty::before { color: var(--chat-subtle); }
:host .file-attachment { color: var(--chat-text); background: var(--chat-muted-surface); }
:host .file-attachment:has(.any-file-attachment-text) { display: inline-flex; width: auto !important; height: auto !important; max-width: 100%; margin: .2rem; }
:host .file-attachment .border-bound-attachment { display: flex; align-items: center; width: auto !important; height: auto !important; min-height: 2.75rem; max-width: 100%; padding: .4rem 2.75rem .4rem .65rem; border: 1px solid var(--chat-border); border-radius: .5rem; box-sizing: border-box; }
:host .file-attachment-text-container { position: static !important; width: auto !important; max-width: 14rem; height: auto !important; }
:host .any-file-attachment-text { position: static !important; width: auto !important; max-width: 100%; font-size: .875rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:host .file-attachment:has(.any-file-attachment-text) .remove-file-attachment-button { top: 0; right: 0; width: 2.75rem; height: 100%; min-height: 2.75rem; background: transparent; box-shadow: none; border: 0; border-radius: 0 .5rem .5rem 0; color: var(--chat-subtle); }
:host [role='button']:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }

@media (max-width: 35rem) {
  .help-chat-heading { gap: .5rem; }
  .help-chat-button { padding-inline: .65rem; }
  .help-chat-feedback:has([data-error='true']) { flex-direction: column; align-items: stretch; }
  .help-chat-feedback:has([data-error='true']) button { align-self: flex-end; }
  .help-chat-panel { border-radius: .75rem; }
  .help-chat-welcome { inset: 0 1rem 7rem; }
  .help-chat-dialog { width: 100vw; height: var(--help-chat-window-height, 100dvh); margin: 0; border-radius: 0; padding: .75rem; }
  :host #messages { padding: .875rem; }
}
@media (max-height: 35rem) {
  .help-chat-welcome { justify-content: flex-start; padding-top: .75rem; }
  .help-chat-welcome h2 { font-size: 1.15rem; }
  .help-chat-welcome p { display: none; }
}
@media (max-height: 25rem) { .help-chat-welcome { display: none; } }
/* Mobile keyboards can shrink the visual viewport without changing media-query height. */
html[data-help-chat-short] .help-chat-welcome { justify-content: flex-start; padding-top: .75rem; }
html[data-help-chat-short] .help-chat-welcome h2 { font-size: 1.15rem; }
html[data-help-chat-short] .help-chat-welcome p { display: none; }
html[data-help-chat-tiny] .help-chat-welcome { display: none; }