/* Element defaults and shared accessible controls. Page layouts live in pages.css. */
*, *::before, *::after { box-sizing: border-box; }
/* Reserve the transparent track even where styled scrollbars ignore stable
   gutters, so async lists cannot move page controls horizontally. */
html { font-family: var(--font); font-size: 14px; line-height: 22.75px; background: var(--canvas); color: var(--ink); overflow-y: scroll; scrollbar-gutter: stable; }
body { margin: 0; min-width: 280px; font-weight: 400; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-underline-offset: 3px; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-height); padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius); background: var(--brand); color: var(--on-brand); font-weight: 500; line-height: 22.75px; cursor: pointer; transition: background-color var(--motion),border-color var(--motion),color var(--motion); }
button:hover:not(:disabled) { background: var(--brand-hover); }
button:active:not(:disabled) { filter: brightness(.96); }
button:disabled, [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus-border); outline-offset: 2px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { display: block; width: 100%; min-width: 0; min-height: var(--control-height); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--input-surface); line-height: 1.5; }
/* Focus indicates the active control; selection keeps its own accent treatment. */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea):focus-visible {
  outline: none; border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-shadow);
}
:is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { transition: border-color var(--motion),box-shadow var(--motion); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-subtle); color: var(--muted); cursor: not-allowed; opacity: .65; }
input[readonly], textarea[readonly] { background: var(--surface-subtle); }
textarea { resize: vertical; min-height: 100px; }
input[type="search"] { padding-left: 36px!important; background-image: var(--search-icon); background-repeat: no-repeat; background-position: 11px center; background-size: 16px; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }
label { display: grid; gap: 6px; min-width: 0; align-content: start; }
label > span:first-child, label > strong:first-child { color: var(--muted); font-size: 14px; line-height: 22.75px; }
/* Required fields use the same quiet marker as OpenRouter; the field itself
   remains readable and the help icon carries the longer explanation. */
label:not([data-form-required]):has(> input:required, > select:required, > textarea:required) > :is(span:first-child,strong:first-child)::after { content: " *"; color: var(--muted); font-weight: 600; }
.form-required-marker { color: var(--muted); font-weight: 600; white-space: pre; }
.form-required-marker[hidden] { display: none; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 8px; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
fieldset:disabled { opacity: .65; }
h1,h2,h3,h4,p { margin: 0; }
h1 { font-size: 20px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
h3 { font-size: 14px; line-height: 24px; font-weight: 600; }
h4 { font-size: 13px; }
p { line-height: 22.75px; }
small { color: var(--muted); font-size: 12px; line-height: 18px; }
strong { font-weight: 600; }
code { overflow-wrap: anywhere; word-break: break-word; }
pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 12px; }
img,svg { max-width: 100%; vertical-align: middle; }
[hidden],.hidden { display: none!important; }
.sr-only,.ai-schemes-sr-only,.nav-symbols { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip-path: inset(50%); white-space: nowrap; border: 0!important; }
.secondary,.btn-secondary,.row-action-button,.small-button.secondary,.list-action-button,.ghost,.danger-outline,.btn-danger-outline,.ghost-danger { background: var(--surface); color: var(--ink); border-color: var(--line); }
.secondary:hover:not(:disabled),.btn-secondary:hover:not(:disabled),.row-action-button:hover:not(:disabled),.list-action-button:hover:not(:disabled),.ghost:hover:not(:disabled) { background: var(--hover); border-color: var(--line-strong); }
.text-button,.text-action { min-height:32px;padding:4px 8px;color:var(--brand);border:1px solid transparent;background:transparent;font-weight:500;line-height:20px; }
.text-button:hover:not(:disabled),.text-action:hover:not(:disabled) {color:var(--brand-hover);border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:3px;}
.text-button:active:not(:disabled),.text-action:active:not(:disabled) {background:transparent;filter:none;}
@media(max-width:768px) {.text-button,.text-action {min-height:40px;}}
.danger,.btn-danger { background: var(--danger); color: var(--on-danger); }
.danger:hover:not(:disabled),.btn-danger:hover:not(:disabled) { background: var(--danger); filter: brightness(.94); }
.danger-outline,.btn-danger-outline,.ghost-danger,.danger-text { color: var(--danger-text); }
.danger-outline:hover:not(:disabled),.btn-danger-outline:hover:not(:disabled),.ghost-danger:hover:not(:disabled) { background: var(--danger-tint); }
.small-button,.compact-button,.row-action-button,.list-action-button { min-height: var(--compact-height); padding: 5px 10px; font-size: 13px; }
svg:has(> use),.ui-icon,.nav-icon,.theme-control-icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon > svg,.theme-control-icon > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.title-help-button { display: inline-grid; place-items: center; width: 16px; height: 16px; min-height: 16px; flex: 0 0 16px; padding: 0; border: 0; background: transparent; color: var(--muted); vertical-align: middle; font-size: 0; border-radius: 4px; }
.title-help-button::before { content: ""; width: 16px; height: 16px; background: currentColor; mask: url("icons/info.svg") center / contain no-repeat; }
.title-help-button:hover:not(:disabled) { background: var(--hover); color: var(--brand); }
.help-title-inline,.field-label-with-help,.field-label,.speech-library-filter-label { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }
.help-tooltip-layer { position: fixed; z-index: 20000; max-width: min(340px,calc(100vw - 24px)); max-height: min(240px,calc(100dvh - 24px)); padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 12px; line-height: 1.65; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--motion),visibility 0s linear var(--motion); overflow: auto; overscroll-behavior: contain; scrollbar-width: var(--scrollbar-width); overflow-wrap: anywhere; }
.help-tooltip-layer.visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--motion),visibility 0s linear 0s; }
input.toggle-switch-input { appearance: none; width: var(--switch-width); height: var(--switch-height); flex: 0 0 var(--switch-width); border: 2px solid transparent; border-radius: 999px; background: var(--switch-off); padding: 0; transition: background 250ms cubic-bezier(.77,0,.175,1),box-shadow var(--motion); position: relative; }
input.toggle-switch-input::before { content: ""; position: absolute; left: 0; top: 0; display: block; height: var(--switch-thumb); width: var(--switch-thumb); background: var(--on-brand); border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform 250ms cubic-bezier(.77,0,.175,1),width 250ms cubic-bezier(.77,0,.175,1); }
input.toggle-switch-input:checked { background: var(--brand); }
input.toggle-switch-input:checked::before { transform: translateX(20px); }
input.toggle-switch-input:active::before { width: 24px; }
input.toggle-switch-input:checked:active::before { transform: translateX(16px); }
input.toggle-switch-input:disabled { opacity: .4; cursor: not-allowed; }
.switch-label,.switch-row,.modal-switch-row,.automation-editor-switch,.automation-list-switch { display: flex; align-items: center; gap: 10px; }
.switch-label,.automation-editor-switch,.automation-list-switch { width: 100%; }
.switch-label > input.toggle-switch-input,.automation-editor-switch > input.toggle-switch-input,.automation-list-switch > input.toggle-switch-input,.modal-switch-row > input.toggle-switch-input { margin-left: auto; }
.field-error,.form-error { color: var(--danger-text); }
.field-error:not(.hidden) { display: block; margin-top: 6px; font-size: 12px; line-height: 18px; }
.form-field-error[hidden],.form-submit-error[hidden] { display: none; }
.form-field-error:not([hidden]) { font-size: 14px; line-height: 1.625; margin: 6px 0 0; }
.form-submit-error { margin: 0 0 16px; }
:is(input,textarea,select,button,[role="group"])[aria-invalid="true"] { scroll-margin-block: 16px; }
:is(input,select,textarea)[aria-invalid="true"] { color: var(--ink); border-color: var(--danger)!important; background: var(--danger-tint); box-shadow: 0 0 0 3px color-mix(in srgb,var(--danger) 12%,transparent); }
:is(input,select,textarea)[aria-invalid="true"]:focus-visible { border-color: var(--danger)!important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent); }
.field-helper-text,.panel-note,.ai-schemes-muted { color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.form-error { background: var(--danger-tint); padding: 12px; border-radius: var(--radius); }
.form-error { border: 1px solid color-mix(in srgb,var(--danger) 24%,var(--line)); }
@media(max-width:768px) {
  button { min-height: var(--touch-height); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea { font-size: 16px; min-height: var(--touch-height); }
  .small-button,.compact-button,.row-action-button,.list-action-button { min-height: 40px; }
  .title-help-button { min-height: 16px; width: 16px; height: 16px; flex-basis: 16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto!important; transition: none!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; } }

/* Slim tracks do not change width when the thumb appears or fades. */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.is-scrolling { scrollbar-color: var(--scrollbar-thumb) transparent; }
@supports selector(::-webkit-scrollbar) {
  /* Chromium native scrollbar-color overrides the 3px WebKit track. */
  * { scrollbar-width: auto !important; scrollbar-color: auto !important; }
  ::-webkit-scrollbar { width: 3px; height: 3px; }
  ::-webkit-scrollbar-track,::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
  .is-scrolling::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
}
/* Desktop navigation reserves no gutter. On mobile the native track stays
   attached to the moving drawer and uses the shared thin, auto-hide styles. */
@media (min-width: 1024px) {
  #workspaceSidebar { scrollbar-width: none !important; }
  #workspaceSidebar::-webkit-scrollbar { display: none; }
}
@media (max-width: 1023px) {
  .sidebar-scroll-thumb { display: none; }
}
.sidebar-scroll-thumb { position: fixed; z-index: 61; width: 3px; min-height: 24px; border-radius: 99px; background: var(--scrollbar-thumb); opacity: 0; transition: opacity 180ms; pointer-events: none; }
.sidebar-scroll-thumb.visible { opacity: 1; pointer-events: auto; cursor: grab; }
.sidebar-scroll-thumb.dragging { cursor: grabbing; }

.help-tooltip-layer { transform: none; }
.help-tooltip-layer[role="dialog"] { padding-right: 36px; }
.help-tooltip-copy { white-space: pre-wrap; }
.help-tooltip-close { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 20px; }
.help-tooltip-close:hover { background: var(--hover); }