.agent-config {padding:16px; color:var(--ink); background:var(--surface);}
.agent-config header {display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
.agent-config h1 {font-size:18px;margin:0;}
.agent-config textarea {display:block;width:100%;height:60vh;resize:vertical;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:13px/1.55 monospace;box-sizing:border-box;}
.agent-config button {margin:10px 8px 0 0;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);}
.agent-config button:disabled {opacity:.55;}
.agent-config .config-help,.agent-config .config-meta {font-size:13px;line-height:1.45;max-width:88ch;}
.agent-config .config-error {color:var(--ink);background:var(--surface);border-left:3px solid currentColor;padding-left:10px;}
.agent-config .config-actions {display:flex;flex-wrap:wrap;gap:0 6px;}
.agent-config textarea:focus-visible,.agent-config button:focus-visible {outline:2px solid var(--ink);outline-offset:2px;}
@media(max-width:620px) {.agent-config {padding:10px;} .agent-config textarea {height:52vh;} .agent-config header {gap:6px;} }

.agent-config .config-help a {color:var(--ink);background:var(--surface);text-decoration:underline;}
.agent-config {--diff-add-bg:#dcfce7;--diff-add-ink:#14532d;--diff-del-bg:#fee2e2;--diff-del-ink:#7f1d1d;--diff-note-ink:#374151;}
:where(html[data-theme="dark"]) .agent-config{--diff-add-bg:#0f3a22;--diff-add-ink:#bbf7d0;--diff-del-bg:#4a1717;--diff-del-ink:#fecaca;--diff-note-ink:#d1d5db;}
.agent-config .config-history-bar {display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:4px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--surface);}
.agent-config .config-history-bar:focus-visible {outline:2px solid var(--ink);outline-offset:2px;}
.agent-config .config-history-bar p {flex:1;min-width:0;margin:0;font-size:13px;line-height:1.4;overflow-wrap:anywhere;user-select:text;}
.agent-config .config-history-bar .history-position {font-weight:600;}
.agent-config .history-arrow {margin:0;width:34px;height:30px;padding:0;font-size:20px;line-height:1;flex:none;}
.agent-config .config-history-view {height:60vh;margin:0;padding:12px 0;overflow:auto;border:1px solid var(--line);border-radius:10px;box-sizing:border-box;font:13px/1.55 monospace;color:var(--ink);background:var(--surface);user-select:text;}
.agent-config .config-history-view span {display:block;min-height:1.55em;padding:0 12px;white-space:pre-wrap;overflow-wrap:anywhere;}
.agent-config .config-history-view .line-add {color:var(--diff-add-ink);background:var(--diff-add-bg);box-shadow:inset 3px 0 var(--diff-add-ink);}
.agent-config .config-history-view .line-del {color:var(--diff-del-ink);background:var(--diff-del-bg);box-shadow:inset 3px 0 var(--diff-del-ink);text-decoration:line-through;}
.agent-config .config-history-view .line-note {color:var(--diff-note-ink);background:var(--surface);font-style:italic;}
@media(max-width:620px) {.agent-config .config-history-view {height:52vh;}}