.settings-select { position: relative; min-width: 0; width: 100%; }
.settings-select[hidden], .settings-picker-popup[hidden], .settings-picker-popup > [hidden] { display: none !important; }
/* Keep the native field's geometry, validation and form ownership intact. */
.workspace .settings-select > select.settings-select-native { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; pointer-events: none; margin: 0; }
.settings-select-trigger { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--border, #29323e); border-radius: 6px; background: var(--surface-elevated, #171e28); color: var(--text-primary, #e1e6ee); font: inherit; font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.settings-select-trigger > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-select-trigger > i { flex: none; font-size: 12px; color: var(--text-muted, #8b99ac); }
.settings-select-trigger > i:last-child { font-size: 10px; transition: transform .15s; }
.settings-select-trigger[aria-expanded="true"] > i:last-child { transform: rotate(180deg); }
.settings-select-trigger:hover:not(:disabled) { border-color: var(--border-hover, #465467); background: var(--surface, #151b24); }
.settings-select-trigger:focus-visible, .settings-select-trigger[aria-expanded="true"] { outline: 2px solid var(--accent, #3578fa); outline-offset: 2px; }
.settings-select-trigger[aria-invalid="true"] { border-color: var(--danger, #ef8395); }
.settings-select-trigger:disabled, .settings-mode > button:disabled { opacity: .48; cursor: not-allowed; }
.settings-select-trigger, .settings-mode > button, .settings-option { touch-action: manipulation; }
.settings-mode { box-sizing: border-box; display: flex; min-height: 44px; padding: 3px; gap: 3px; border: 1px solid var(--border, #29323e); border-radius: 6px; background: var(--background, #0b1016); }
.settings-mode > button { flex: 1 1 0; min-width: 0; padding: 7px 9px; border: 1px solid transparent; border-radius: 4px; color: var(--text-muted, #8b99ac); background: transparent; font: inherit; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; cursor: pointer; transition: background .15s, color .15s; }
.settings-mode > button[aria-checked="true"] { color: var(--text-primary, #e1e6ee); border-color: var(--border-hover, #465467); background: var(--surface-elevated, #171e28); }
.settings-mode > button:hover:not(:disabled) { color: var(--text-primary, #e1e6ee); }
.settings-mode > button:focus-visible { outline: 2px solid var(--accent, #3578fa); outline-offset: -2px; }
.settings-select:has(> select[aria-invalid="true"]) .settings-mode { border-color: var(--danger, #ef8395); }
.settings-picker-popup { position: fixed; z-index: 1500; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 7px; border: 1px solid var(--border-hover, #465467); border-radius: 8px; background: var(--background-secondary, #10161e); color: var(--text-primary, #e1e6ee); box-shadow: 0 10px 28px #00000050; font-family: var(--font-body, sans-serif); animation: settings-picker-in .12s ease-out; }
.settings-picker-popup > input { box-sizing: border-box; flex: none; width: 100%; min-width: 0; height: 38px; min-height: 38px; padding: 8px 10px; border: 1px solid var(--border, #29323e); border-radius: 4px; background: var(--surface-elevated, #171e28); color: inherit; font: inherit; font-size: 12px; }
.settings-picker-popup > input:focus { outline: none; border-color: var(--accent, #3578fa); }
.settings-picker-popup > input::placeholder { color: var(--text-muted, #8b99ac); }
.settings-options { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-hover, #465467) transparent; }
.settings-options { -webkit-overflow-scrolling: touch; }
.settings-option { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 10px; border-radius: 4px; color: var(--text-secondary, #b7c2d1); font-size: 12px; line-height: 1.5; cursor: pointer; }
.settings-option > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.settings-option > i { flex: none; color: var(--text-muted, #8b99ac); font-size: 11px; }
.settings-option > i:last-child { visibility: hidden; color: var(--accent, #3578fa); }
.settings-option[aria-selected="true"] { color: var(--text-primary, #e1e6ee); background: color-mix(in srgb, var(--accent, #3578fa) 10%, transparent); }
.settings-option[aria-selected="true"] > i:last-child { visibility: visible; }
.settings-option:hover:not([aria-disabled="true"]), .settings-option.is-highlighted { background: var(--surface-elevated, #171e28); color: var(--text-primary, #e1e6ee); }
.settings-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.settings-option-group { padding: 9px 10px 4px; color: var(--text-muted, #8b99ac); font-size: 11px; }
.settings-picker-empty { margin: 0; padding: 16px 10px; color: var(--text-muted, #8b99ac); font-size: 12px; text-align: center; }
.workspace .settings-ux .settings-section-body.form-grid { gap: 20px 24px; padding-block: 8px 22px; }
.workspace .settings-ux .settings-disclosure > summary { min-height: 56px; gap: 10px; }
.workspace .settings-disclosure > summary > .settings-section-icon { width: 18px; color: var(--text-muted); font-size: 12px; transform: none; text-align: center; }
.workspace .settings-disclosure > summary > strong { flex: 1; }
.workspace .settings-ux label:has(> .settings-select) { align-content: start; }
.workspace .settings-ux .setting-row > .settings-select { flex: 0 1 260px; width: min(260px, 100%); }
.workspace .settings-ux .integration-provider-preview { margin-bottom: 12px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.workspace .settings-ux .integration-provider-preview p { font-size: 11px; line-height: 1.6; }
.workspace .settings-ux .integration-provider-preview small { font-size: 10px; font-weight: 500; text-transform: none; color: var(--text-muted); }
.workspace .control-center-layout { grid-template-columns: minmax(420px, 1.08fr) minmax(340px, .92fr); gap: 24px; }
@media (max-width: 1250px) { .workspace .control-center-layout { grid-template-columns: minmax(0, 1fr); } }
.workspace .settings-ux textarea { min-height: 112px; resize: vertical; line-height: 1.65; padding: 12px 14px; }
.workspace .settings-ux textarea:disabled { opacity: .55; }
.workspace .settings-ux .form-grid > label > small, .workspace .settings-ux .settings-field-help { font-size: 11px !important; line-height: 1.6; }
.workspace .settings-ux label:has(> .field-character-count) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 8px; }
.workspace .settings-ux label:has(> .field-character-count) > :first-child { grid-column: 1; grid-row: 1; }
.workspace .settings-ux label:has(> .field-character-count) > :not(:first-child):not(.field-character-count) { grid-column: 1 / -1; }
.workspace .settings-ux label > .field-character-count { grid-column: 2; grid-row: 1; align-self: start; margin: 0; padding-top: 2px; font-size: 10px !important; line-height: 1.8; white-space: nowrap; color: var(--text-muted); }
.workspace .settings-ux label > .field-character-count.near-limit { color: var(--warning, #edc968); }
.workspace .settings-ux label > .field-character-count.at-limit { color: var(--danger, #ef8395); }
.workspace .settings-ux .form-block:not(.emergency-block) { padding: 20px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.workspace .settings-ux .form-block:first-child { padding-top: 0; }
.workspace .settings-ux .multi-choice-list { min-height: 100px; max-height: 210px; background: var(--surface-elevated); border-color: var(--border); }
.workspace .settings-ux .multi-choice-item { min-height: 36px; }
.workspace .settings-ux .multi-choice-item:hover { background: var(--surface); }
.workspace .settings-ux .multi-choice-item:has(input:checked) { color: var(--text-primary); border-color: color-mix(in srgb, var(--accent) 25%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.workspace .settings-ux .multi-choice-check { background: var(--background-secondary); border-color: var(--border-hover); color: #fff; }
.workspace .settings-ux .multi-choice-item input:checked + .multi-choice-check { background: var(--accent); border-color: var(--accent); }
.workspace .settings-ux input[type="checkbox"] { accent-color: var(--accent); }
.workspace .settings-ux .form-actions { gap: 10px; padding-top: 18px; }
.workspace .settings-ux .form-actions .button-danger { margin-right: auto; }
.workspace .settings-ux .form-actions .form-change-indicator { font-size: 11px; }
.workspace .settings-ux .form-actions .button { border-radius: 6px; }
@keyframes settings-picker-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .workspace .settings-ux .settings-section-body.form-grid { gap: 18px; } .settings-select-trigger { font-size: 12px; } .settings-mode > button { padding-inline: 6px; } .workspace .settings-ux .setting-row > .settings-select { flex-basis: auto; width: 100%; } }
@media (any-pointer: coarse), (max-width: 700px) {
  .settings-picker-popup > input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .settings-picker-popup { animation: none; } .settings-select-trigger, .settings-select-trigger > i, .settings-mode > button { transition: none; } }