/* ============================================================================
   DreamClear — Components
   ----------------------------------------------------------------------------
   Only what AdminLTE and Bootstrap do NOT provide, or provide in a shape the
   brand guide contradicts. Everything here traces to a decision in
   brand-guide.md or dreamclear-components.html.

   Before adding anything: check whether a vendor component plus a variable
   re-point in dreamclear-theme.css already does the job. Prefer that.
   ============================================================================ */

/* ============================================================================
   Typography
   ============================================================================ */
h1, h2, h3, h4, h5, h6,
.display-font {
  font-family: var(--dc-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--dc-ink);
}

.mono,
.text-mono {
  font-family: var(--dc-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Small uppercase mono label — section eyebrows, table headers, metadata. */
.dc-eyebrow {
  font-family: var(--dc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
}

/* ============================================================================
   Buttons — the red budget
   ----------------------------------------------------------------------------
   Bootstrap's .btn-primary is blue (see the bridge). Red is available ONLY as
   .btn-accent, and the rule is one per screen. Destructive actions use
   .btn-danger-outline, which is deliberately quieter than the accent — making
   deletion easy to click is not a goal.
   ============================================================================ */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 1.125rem;
  height: var(--dc-h-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.btn-sm { height: var(--dc-h-sm); --bs-btn-padding-x: 0.8125rem; --bs-btn-font-size: 0.8125rem; }
.btn-lg { height: var(--dc-h-lg); --bs-btn-padding-x: 1.5rem;    --bs-btn-font-size: 0.9375rem; }

.btn-icon { width: var(--dc-h-md); --bs-btn-padding-x: 0; }
.btn-icon.btn-sm { width: var(--dc-h-sm); }

/* THE accent. One per screen. */
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dc-red);
  --bs-btn-border-color: var(--dc-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dc-red-bright);
  --bs-btn-hover-border-color: var(--dc-red-bright);
  --bs-btn-active-bg: var(--dc-red-deep);
  --bs-btn-active-border-color: var(--dc-red-deep);
  --bs-btn-disabled-bg: var(--dc-red);
  --bs-btn-disabled-border-color: var(--dc-red);
  --bs-btn-disabled-color: #fff;
  box-shadow: 0 6px 20px rgba(var(--bs-danger-rgb), 0.28);
}

/* Outlined blue — secondary action. */
.btn-soft {
  --bs-btn-color: var(--dc-blue);
  --bs-btn-bg: var(--dc-blue-tint-soft);
  --bs-btn-border-color: var(--dc-blue-tint-border);
  --bs-btn-hover-color: var(--dc-ink);
  --bs-btn-hover-bg: var(--dc-blue-tint);
  --bs-btn-hover-border-color: var(--dc-blue);
}

/* Neutral toolbar button. */
.btn-neutral {
  --bs-btn-color: var(--dc-ink);
  --bs-btn-bg: var(--dc-raised);
  --bs-btn-border-color: var(--dc-line-strong);
  --bs-btn-hover-color: var(--dc-ink);
  --bs-btn-hover-bg: var(--dc-raised);
  --bs-btn-hover-border-color: var(--dc-ink-3);
}

/* Ghost — dense tables and toolbars. */
.btn-ghost {
  --bs-btn-color: var(--dc-ink-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--dc-ink);
  --bs-btn-hover-bg: var(--dc-raised);
  --bs-btn-hover-border-color: transparent;
}

/* Destructive — outline, never filled. */
.btn-danger-outline {
  --bs-btn-color: var(--dc-red-bright);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--dc-red-tint-border);
  --bs-btn-hover-color: var(--dc-red-bright);
  --bs-btn-hover-bg: var(--dc-red-tint);
  --bs-btn-hover-border-color: var(--dc-red);
}

/* ============================================================================
   Badges — never colour alone. Dot + border + text label, so status survives
   colourblindness and greyscale.
   ============================================================================ */
.dc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--dc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.5625rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.dc-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.dc-badge-success { color: var(--dc-success); background: rgba(40,208,126,.10); border-color: rgba(40,208,126,.28); }
.dc-badge-warning { color: var(--dc-warning); background: rgba(255,176,32,.10); border-color: rgba(255,176,32,.28); }
.dc-badge-error   { color: var(--dc-error);   background: var(--dc-red-tint);  border-color: var(--dc-red-tint-border); }
.dc-badge-info    { color: var(--dc-blue);    background: var(--dc-blue-tint-soft); border-color: var(--dc-blue-tint-border); }
.dc-badge-neutral { color: var(--dc-ink-2);   background: var(--dc-blue-tint-soft); border-color: var(--dc-line-strong); }

/* ============================================================================
   Brand marks
   ============================================================================ */
.dc-wordmark {
  font-family: var(--dc-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dc-ink);
}
.dc-wordmark span { color: var(--dc-blue); }

/* The signature gradient. Signature moments only — never decoration. */
.dc-grad-rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: var(--dc-brand-grad);
  opacity: 0.9;
}

/* ============================================================================
   Sidebar navigation
   ----------------------------------------------------------------------------
   Active state is BLUE. A lit nav item is structure, not emphasis — the same
   logic that makes an enabled module blue rather than red.
   ============================================================================ */
.app-sidebar .nav-link {
  color: var(--dc-ink-2);
  border-radius: var(--dc-radius-btn);
  padding: 0.5rem 0.75rem;
  margin: 0.0625rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  transition: background-color .15s ease, color .15s ease;
}
.app-sidebar .nav-link:hover {
  background-color: var(--dc-blue-tint-soft);
  color: var(--dc-ink);
}
.app-sidebar .nav-link.active {
  background-color: var(--dc-blue-tint);
  color: var(--dc-blue);
  font-weight: 600;
}
.app-sidebar .nav-link i {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  flex: none;
}

/* Group heading between nav sections. */
.dc-nav-heading {
  font-family: var(--dc-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
  padding: 1.25rem 1.25rem 0.375rem;
}

.dc-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0 1.125rem;
  height: var(--dc-topbar-h);
  border-bottom: 1px solid var(--dc-line);
  text-decoration: none;
}

/* ============================================================================
   Page furniture
   ============================================================================ */
.dc-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.dc-page-header h1 {
  font-size: 1.5rem;
  margin: 0;
}
.dc-page-header .subtitle {
  color: var(--dc-ink-2);
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

/* Stat tile. */
.dc-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dc-stat .label {
  font-family: var(--dc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
}
.dc-stat .value {
  font-family: var(--dc-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dc-ink);
  font-variant-numeric: tabular-nums;
}

/* Module card — the atom of the product. On-state is blue. */
.dc-module {
  background: var(--dc-raised);
  border: 1px solid var(--dc-line);
  border-radius: 12px;
  padding: 0.875rem;
  height: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}
.dc-module:hover { border-color: var(--dc-line-strong); }
.dc-module.is-on {
  border-color: var(--dc-blue-tint-border);
  background: linear-gradient(180deg, var(--dc-blue-tint-soft), transparent 70%), var(--dc-raised);
}
.dc-module .name {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 0.9375rem;
}
.dc-module .desc {
  font-size: 0.78125rem;
  color: var(--dc-ink-2);
  margin: 0.375rem 0 0;
  line-height: 1.5;
}

/* Switch — the module on/off control. Blue when on, never red. */
.form-switch .form-check-input {
  width: 2.5rem;
  height: 1.375rem;
  background-color: var(--dc-raised);
  border-color: var(--dc-line-strong);
}
.form-switch .form-check-input:checked {
  background-color: var(--dc-blue);
  border-color: var(--dc-blue);
}
.form-switch .form-check-label {
  margin-top: 0.1875rem;
  margin-left: 0.25rem;
}

/* ============================================================================
   Opening hours grid
   ============================================================================ */
.dc-hours {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dc-hours-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-radius-btn);
  background: var(--dc-raised);
  transition: opacity .15s ease;
}

/* Closed days recede rather than disappear — the row stays in place so the week
   keeps its shape and nothing shifts as days are toggled. */
.dc-hours-row.is-closed { opacity: 0.55; }

.dc-hours-day {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--dc-ink);
}

.dc-hours-times {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.dc-hours-times input[type="time"] {
  width: auto;
  min-width: 7.5rem;
  font-family: var(--dc-font-mono);
}

/* Dark mode leaves the native time picker icon nearly invisible. */
[data-bs-theme="dark"] .dc-hours-times input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
}

/* 2026-08-13 (Steve caught during patient-profile QA) — native calendar / time
   picker icon on <input type="date|datetime-local|time|month|week"> was
   rendering with near-zero contrast (white-on-white in light theme, dark-on-
   dark in dark theme). The `filter: invert()` approach flipped that around
   and made the icon white-on-white in the opposite theme. Switch to the
   modern `color-scheme` CSS property: it tells the browser to render its
   FORM CONTROLS (including native pickers, scrollbars, selection colors)
   in the requested theme, and the browser picks the correct icon tint for
   each background. No filter hack — works in Chrome/Edge/Safari/Firefox. */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
  color-scheme: light;
  cursor: pointer;
}
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] input[type="month"],
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="week"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.dc-hours-overnight { white-space: nowrap; }

@media (max-width: 767.98px) {
  .dc-hours-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .dc-hours-times { flex-wrap: wrap; }
}

/* Skip link — keyboard users land here first. */
.dc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--dc-blue);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--dc-radius-btn) 0;
  font-weight: 600;
}
.dc-skip-link:focus {
  left: 0;
}


/* ============================================================================
   Select2 — dc-searchable overrides
   ----------------------------------------------------------------------------
   Applied globally wherever initSearchables() activates a <select.dc-searchable>.
   Goals:
     - Selection box matches .form-select / .form-control: same border color,
       radius, background, and text color from dc-tokens so it's indistinguishable
       from other inputs on the page.
     - Dropdown auto-expands beyond the trigger width so long practice names
       never wrap or force a horizontal scrollbar.
     - Options stay on one line; the dropdown scrolls vertically only.
     - form-select-sm sizing carried through to the S2 container.
   ============================================================================ */

/* ── Trigger box — match .form-select exactly ── */
.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: var(--dc-void);
    border-color:     var(--dc-line-strong);
    border-radius:    var(--bs-border-radius-sm);
    color:            var(--dc-ink);
    min-height:       var(--dc-h-md);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--dc-ink);
}

/* Focus ring — matches Bootstrap .form-control:focus */
.select2-container--bootstrap-5.select2-container--focus .select2-selection--single,
.select2-container--bootstrap-5.select2-container--focus .select2-selection--multiple,
.select2-container--bootstrap-5.select2-container--open  .select2-selection--single,
.select2-container--bootstrap-5.select2-container--open  .select2-selection--multiple {
    border-color: var(--bs-primary);
    box-shadow:   0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ── Dropdown panel ── */
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--dc-void);
    border-color:     var(--dc-line-strong);
    min-width:        240px;
    width:            max-content !important;
    max-width:        520px;
}

.select2-container--bootstrap-5 .select2-results__option {
    color:       var(--dc-ink);
    white-space: nowrap;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--bs-primary);
    color:            #fff;
}

/* Search input inside dropdown */
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    background-color: var(--dc-void);
    border-color:     var(--dc-line-strong);
    border-radius:    var(--bs-border-radius-sm);
    color:            var(--dc-ink);
}

/* Search typed inside a multi-select's box (Add New Patient's Reason for Being Tested): no rule set its colour, so
   it came out white and was invisible on the light theme (2026-10-23). */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
    background-color: transparent;
    color:            var(--dc-ink);
}

/* ── form-select-sm compat ── */
.select2-container--bootstrap-5.select2-container--sm .select2-selection--single,
.select2-container--bootstrap-5.select2-container--sm .select2-selection--multiple {
    min-height:    calc(1.5em + 0.5rem + 2px);
    font-size:     0.875rem;
    padding-top:   0.25rem;
    padding-bottom: 0.25rem;
    border-radius: 8px;
}

/* A filter row's buttons are as tall as its inputs. dc-theme.css makes the small selects and date
   inputs --dc-h-md (38px) while .btn-sm is --dc-h-sm (32px), so in a bottom-aligned row the Apply and
   Export buttons sat 6px short of the fields beside them (Contact bonus, Steve 2026-10-23). */
.dc-filter-row .btn-sm { height: var(--dc-h-md); }

/* A searchable .form-select-sm is as tall as the plain .form-select-sm beside it.
   dc-theme.css gives every .form-select a min-height of --dc-h-md (38px), small ones
   included, but the Select2 theme sizes the box from the sibling .form-select-sm at
   calc(1.5em + .5rem + 2px), about 31px. In a filter row aligned to the bottom, the
   searchable picker's label sat 7px lower than its neighbours' (Ready to ship, OT-005).
   Same selector as the theme's rule, so this later sheet wins; the vertical padding
   centres one 1.5em line. (The --sm rule above never matches: initSearchables'
   containerCssClass needs Select2's full build.) */
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--single {
    min-height:     var(--dc-h-md);
    padding-top:    calc((var(--dc-h-md) - 2px - 1.5em) / 2);
    padding-bottom: calc((var(--dc-h-md) - 2px - 1.5em) / 2);
}

/* ── Hide system messages (Steve 2026-10-06) ──────────────────────────────────
   dc-conv-system-filter.js puts this class on a thread (Conversations page #chatBox, Patient
   Profile #pp-conv-chatbox) when "Hide system messages" is on. A system bubble is
   .sender.system - outbound with no staff sender, the pale-green ones - and its timestamp line
   is the .msg-meta that immediately follows it in both renderers. */
.dc-hide-system-msgs .sender.system,
.dc-hide-system-msgs .sender.system + .msg-meta {
    display: none !important;
}

/* ── Inline message translation (Steve 2026-08-28) ──────────────────────────
   Original, a separation line, then the translation in italics and subdued.
   Lives here rather than in a page's <style> because BOTH the standalone
   Conversations page and the Patient Profile tab render these bubbles from
   their own copy of the markup — a third copy of the rules would be a third
   thing to keep in sync. */
.dc-msg-translation {
    margin-top: .4rem;
}
.dc-msg-translation-sep {
    border-top: 1px solid var(--bs-border-color);
    opacity: .55;
    margin-bottom: .35rem;
}
.dc-msg-translation-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .65;
    margin-bottom: .1rem;
}
.dc-msg-translation-body {
    font-style: italic;
    font-size: .88rem;
    opacity: .78;
    /* Non-Latin scripts (Armenian, Persian, Vietnamese, Chinese, Hindi) need
       more vertical room than Latin at the same size, and the italic makes it
       tighter still. */
    line-height: 1.45;
}
/* Persian is right-to-left. Without this the punctuation lands on the wrong
   end and the text reads as broken to anyone who can actually read it. */
.dc-msg-translation-body[dir="rtl"] {
    text-align: right;
}

/* ── Message composer: one row (Steve 2026-10-08, option A) ──────────────────
   Conversations page and the patient's Conversations tab. One bar, 44px tall:
   templates and attach on the left, the message, the send language as a pill,
   and send at the end. Every control is 34px so they line up; the field grows
   with the message (dc-composer.js) and the controls stay on the bottom line.
   Drawn like a .form-control (dc-theme.css): --dc-void fill, --dc-line-strong
   edge, the house blue focus ring, so both themes follow the tokens. */
.dc-composer-bar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    min-height: 44px;
    padding: 4px;
    border: 1px solid var(--dc-line-strong);
    border-radius: 12px;
    background: var(--dc-void);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dc-composer-bar:focus-within {
    border-color: var(--dc-blue);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .22);
}
.dc-composer-bar > .dropup { display: flex; }
.dc-composer-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dc-ink-2);
    font-size: 1.05rem;
    transition: background-color .12s ease, color .12s ease;
}
.dc-composer-icon:hover:not(:disabled),
.dc-composer-icon[aria-expanded="true"] {
    background: var(--dc-blue-tint);
    color: var(--dc-blue);
}
.dc-composer-icon:focus-visible { outline: 2px solid var(--dc-blue); outline-offset: -2px; }
.dc-composer-icon:disabled { opacity: .4; cursor: not-allowed; }
/* The message-template list. It had a max-width and no width, so wrapped names shrank it to
   Bootstrap's 10rem and stacked them three lines deep (Steve 2026-10-09): it takes the full
   32rem now, less on a narrow screen. */
.dc-composer-templates {
    width: min(32rem, calc(100vw - 2rem));
    max-height: 40vh;
    overflow-y: auto;
}
.dc-composer-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 20px;
    margin: 0 4px 7px;          /* centred on the 34px bottom row */
    background: var(--dc-line-strong);
}
.dc-composer-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    max-height: 168px;
    padding: 5px 8px;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: var(--dc-ink);
    line-height: 24px;
    overflow-y: hidden;         /* dc-composer.js turns scrolling on past six lines */
}
/* One line, cut with an ellipsis: a wrapped placeholder would put a scrollbar in an empty field. */
.dc-composer-input::placeholder {
    color: var(--dc-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dc-composer-input:disabled { cursor: not-allowed; }
.dc-composer .dc-send-lang-wrap { flex: 0 0 auto; }
/* The pill. min-height undoes dc-theme's 38px for every .form-select; field-sizing
   sizes it to the language picked (Chrome, Edge, Safari 26), max-width caps the rest. */
.dc-composer .dc-send-lang {
    height: 34px;
    min-height: 34px;
    min-width: 0;
    max-width: 12.5rem;         /* "Español — Spanish" in full */
    field-sizing: content;
    padding: 0 1.75rem 0 1.9rem;
    border: 1px solid var(--dc-line);
    border-radius: 17px;
    background-color: var(--dc-surface);
    color: var(--dc-ink);
    box-shadow: none;
    cursor: pointer;
}
.dc-composer .dc-send-lang:focus-visible { border-color: var(--dc-blue); }
.dc-composer .dc-send-lang-wrap > .bi-globe { left: .7rem; }
.dc-composer .dc-send-lang-wrap > .dc-composer-caret {
    position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
    pointer-events: none; font-size: .65rem; opacity: .55; z-index: 4;
}
.dc-composer .dc-send-lang.is-translating { color: var(--dc-blue); border-color: var(--dc-blue-tint-border); }
.dc-composer .dc-send-lang:disabled { opacity: .55; cursor: not-allowed; }
.dc-composer-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 2px;
    padding: 0;
    border-radius: 8px;
}
/* Phones: the language pill is a 34px globe button, which leaves the message
   its width. Sending translated, the button shows the language's code instead
   ("ES", set by markSendLangState), so the language is still visible without
   opening the picker (Steve 2026-09-02). */
@media (max-width: 575.98px) {
    .dc-composer .dc-send-lang,
    .dc-composer .dc-send-lang.is-translating {
        width: 34px;
        max-width: 34px;
        field-sizing: fixed;
        padding: 0;
        border-radius: 8px;
        color: transparent;
    }
    .dc-composer .dc-send-lang option { color: var(--dc-ink); }
    .dc-composer .dc-send-lang-wrap > .bi-globe { left: 50%; transform: translate(-50%, -50%); }
    .dc-composer .dc-send-lang-wrap > .dc-composer-caret { display: none; }
    .dc-composer .dc-send-lang-wrap[data-lang]:not([data-lang=""]) > .bi-globe { display: none; }
    .dc-composer .dc-send-lang-wrap[data-lang]:not([data-lang=""])::after {
        content: attr(data-lang);
        position: absolute; inset: 0;
        display: grid; place-items: center;
        pointer-events: none; z-index: 4;
        color: var(--dc-blue);
        font-size: .72rem; font-weight: 600; letter-spacing: .04em;
    }
    .dc-composer-sep { margin: 0 1px 7px; }
}

/* ── Setup help slide-out (Pages/Shared/_SetupHelpPanel.cshtml, docs/design/setup-help.md) ──────────────────────
   Videos: the numbered list beside the player; stacked below 768 px. The guide fills the rest of the panel's height.
   Width comes from the panel itself: min(920px, 100vw). */
.dc-setup-help .dc-sh-context { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.dc-setup-help .dc-sh-videos { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: start; }
.dc-setup-help .dc-sh-vlist .list-group-item { cursor: pointer; font-size: .875rem; }
.dc-setup-help .dc-sh-vlist .list-group-item.active { font-weight: 600; }
.dc-setup-help .dc-sh-player video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--bs-border-radius); }
.dc-setup-help .dc-sh-guide-frame { width: 100%; height: max(480px, calc(100vh - 260px)); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.dc-setup-help .dc-sh-faq-search { max-width: 320px; }
.dc-setup-help .dc-sh-faq-steps { padding-left: 1.25rem; margin-bottom: .5rem; }
/* Bootstrap's chevron carries margin-left:auto too, which split the space with the pill's ms-auto and left each pill
   floating mid-row; the pill alone takes the slack, so every pill sits against the chevron. */
.dc-setup-help .dc-sh-faq-q::after { margin-left: 0; }
.dc-setup-help .dc-sh-faq-q .badge { flex-shrink: 0; }
.dc-setup-help .dc-sh-faq-section-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin-bottom: .15rem; }
@media (max-width: 767.98px) {
    .dc-setup-help .dc-sh-videos { grid-template-columns: minmax(0, 1fr); }
    .dc-setup-help .dc-sh-faq-search { max-width: none; }
}