/* settings: styles of this screen only, classes start with .settings- */
.settings-list { display: flex; flex-direction: column; gap: 10px; max-width: 880px; }
.settings-row { display: flex; align-items: center; gap: 20px; padding: 16px 18px; background: var(--s1); border: 1px solid var(--line-2); }
.settings-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.settings-text h2 { font-size: 15px; font-weight: 600; }
.settings-text p { color: var(--ink-2); }
.settings-call { font-size: 10.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.settings-seg { display: flex; flex: none; border: 1px solid var(--line-2); background: var(--s2); }
.settings-seg button { all: unset; cursor: pointer; padding: 7px 13px; font-size: 12.5px; color: var(--ink-3); border-left: 1px solid var(--line-2); white-space: nowrap; }
.settings-seg button:first-child { border-left: 0; }
.settings-seg button.active { background: var(--s3); color: var(--ink); }
.settings-seg button:focus-visible { outline: 1px solid var(--signal); outline-offset: 2px; }
.settings-agent { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: 360px; }
@media (max-width: 760px) {
  .settings-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .settings-agent { justify-content: flex-start; }
}

.settings-other { margin-top: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.settings-url { font-family: var(--mono, monospace); font-size: 12px; border: 1px solid var(--line-2); background: var(--s2); padding: 8px 10px; white-space: pre-wrap; word-break: break-all; max-width: 100%; }
.settings-link { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 100%; }