/* ==========================================================================
   css/components/a11y-controls.css
   Split from app.html (build 2026.10.08.9-beta), original lines 1988-2050.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- Accessibility: density + compact chat display (body data-attrs set by A11y) -- */
body[data-density="compact"]  .message-group { padding-top: 0; padding-bottom: 0; }
body[data-density="spacious"] .message-group { padding-top: 7px; padding-bottom: 7px; }
body[data-chat-display="compact"] .message-group { gap: 8px; align-items: baseline; }
body[data-chat-display="compact"] .msg-avatar { width: 20px; height: 20px; margin-top: 2px; }
body[data-chat-display="compact"] .msg-content { line-height: 1.35; }
/* NONONONONO-style ✕/✓ toggle (SVG icons in the knob, no emoji). */
.a11y-toggle { width: 40px; height: 24px; border-radius: 12px; background: var(--bg-hover); cursor: pointer; position: relative; flex-shrink: 0; transition: background .18s var(--ease-out,ease); }
.a11y-toggle.on { background: var(--accent); }
.a11y-toggle .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .18s var(--ease-out,ease); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.a11y-toggle.on .knob { left: 19px; }
.a11y-toggle .knob svg { width: 10px; height: 10px; }
.a11y-toggle .knob .ic-on { display: none; color: var(--accent); }
.a11y-toggle .knob .ic-off { display: block; color: var(--text-muted); }
.a11y-toggle.on .knob .ic-on { display: block; }
.a11y-toggle.on .knob .ic-off { display: none; }
/* Segmented option buttons (UI density / chat display). */
.a11y-seg { display: inline-flex; background: var(--bg-void); border: 1px solid var(--border-strong); border-radius: 10px; padding: 3px; gap: 3px; }
.a11y-seg button { background: none; border: none; color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; font-family: inherit; }
.a11y-seg button.active { background: var(--bg-active); color: var(--text-primary); }
/* Range sliders in the a11y panel. */
.a11y-range { width: 100%; cursor: pointer; }

/* -- Global custom range sliders ------------------------------------------
   One polished, consistent look for every <input type=range> in the app.
   The accent-coloured fill is driven by --range-fill (a % set in JS from the
   value), so the filled portion always reflects the current position. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 16px; background: transparent; cursor: pointer; outline: none;
  margin: 0; vertical-align: middle;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--accent) 0%, var(--accent) var(--range-fill, 50%),
    var(--bg-deep, #16171b) var(--range-fill, 50%), var(--bg-deep, #16171b) 100%);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--bg-deep, #16171b); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -4.5px;
  border-radius: 50%; background: #fff; border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
  transition: transform .1s ease, box-shadow .12s ease;
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border: none; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.14); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); }
input[type="range"]:disabled { opacity: .5; cursor: default; }
.message-group:hover { background: var(--bg-hover); }
.message-group:hover .msg-timestamp-inline { opacity: 1; }
.message-group.continued { padding-top: 1px; margin-top: 0; }
/* Keep the 40px gutter (indent + the hover-timestamp slot) but collapse the avatar's
   HEIGHT to 0 - otherwise the hidden 40x40 avatar box forces every continued row to
   avatar height (~40px) even though the text is ~22px, spacing grouped messages apart. */
.message-group.continued .msg-avatar { visibility: hidden; height: 0; min-height: 0; margin-top: 0; }