* { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0; padding: 0;
    background: #0e0e10; color: #e8e8ea;
    line-height: 1.5;
}
header {
    background: #1a1a1d; padding: 1rem 2rem;
    border-bottom: 1px solid #2a2a2d;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
}
header h1 { margin: 0; font-size: 1.4rem; }
header h1 a { color: #e8e8ea; text-decoration: none; }
nav a {
    color: #a0a0a8; text-decoration: none; margin-right: 1rem;
    padding: 0.3rem 0.6rem; border-radius: 4px;
}
nav a:hover { background: #2a2a2d; color: #fff; }
main { max-width: 1100px; margin: 0 auto; padding: 2rem; }

.noise-toggle {
    display: flex; gap: 0.8rem; align-items: center;
    background: #16161a; border: 1px solid #2a2a2d;
    padding: 0.5rem 1rem; border-radius: 6px; margin-bottom: 1.5rem;
    font-size: 0.85rem;
}
.noise-on { color: #ffd97a; }
.noise-off { color: #888; }
.noise-link { color: #4dd0e1; text-decoration: none; }
.noise-link:hover { color: #fff; }

.bucket { margin-bottom: 2.5rem; }
.bucket h2 {
    font-size: 1.1rem; color: #c0c0c8;
    border-bottom: 1px solid #2a2a2d; padding-bottom: 0.5rem;
}
.bucket .count {
    background: #2a2a2d; padding: 0.1rem 0.5rem; border-radius: 10px;
    font-size: 0.85rem; color: #a0a0a8; margin-left: 0.5rem;
}
.bucket-me h2 { color: #ff7a7a; }
.bucket-them h2 { color: #ffd97a; }

.conv-list { list-style: none; padding: 0; margin: 0; }
.conv-item { margin-bottom: 0.5rem; }
.conv-link {
    display: block;
    background: #1a1a1d;
    border: 1px solid #2a2a2d;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    text-decoration: none; color: inherit;
    transition: border-color 0.15s;
}
.conv-link:hover { border-color: #4a4a55; }
.conv-row {
    display: flex; align-items: center; gap: 0.8rem;
    margin-bottom: 0.3rem;
}
.conv-topic { flex: 1; font-weight: 500; }
.conv-meta { font-size: 0.85rem; color: #888; }
.conv-sub { font-size: 0.85rem; color: #888; }

.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-me { background: #5a1c1c; color: #ff9a9a; }
.badge-them { background: #5a4a1c; color: #ffd97a; }
.badge-stalled { background: #2a2a2d; color: #888; }
.badge-other { background: #2a2a2d; color: #aaa; }

.empty { color: #666; font-style: italic; }
.back { color: #888; text-decoration: none; display: inline-block; margin-bottom: 1rem; }
.back:hover { color: #fff; }

.detail-header { margin-bottom: 2rem; }
.detail-header h2 { margin: 0 0 0.5rem; }
.detail-meta { display: flex; gap: 1.2rem; color: #888; font-size: 0.9rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.participants { color: #c0c0c8; font-size: 0.95rem; }

.timeline { list-style: none; padding: 0; border-left: 2px solid #2a2a2d; padding-left: 1.5rem; }
.event {
    background: #1a1a1d; border-radius: 6px;
    padding: 0.8rem 1rem; margin-bottom: 0.8rem;
    position: relative;
}
.event::before {
    content: ""; position: absolute;
    left: -1.7rem; top: 1rem;
    width: 8px; height: 8px; border-radius: 50%;
    background: #4a4a55;
}
.event-in::before { background: #5a4a1c; }
.event-out::before { background: #1c5a3a; }

.event-header {
    display: flex; gap: 0.8rem; flex-wrap: wrap;
    font-size: 0.85rem; color: #a0a0a8; margin-bottom: 0.3rem;
}
.event-time { font-family: monospace; }
.event-channel { background: #2a2a2d; padding: 0.05rem 0.4rem; border-radius: 3px; font-size: 0.75rem; }
.event-sender { color: #c0c0c8; font-weight: 500; }
.event-subject { font-weight: 500; margin-bottom: 0.3rem; }
.event-summary { color: #c0c0c8; font-size: 0.9rem; }

/* LLM enrichment indicators */
.conv-openitems {
    background: #5a3a1c; color: #ffb84d;
    padding: 0.05rem 0.5rem; border-radius: 10px;
    font-size: 0.7rem; font-weight: 600;
}
.conv-llmguess {
    background: #1a3a4a; color: #4dd0e1;
    padding: 0.05rem 0.5rem; border-radius: 10px;
    font-size: 0.7rem; font-style: italic;
}
.topic-original {
    color: #666; font-size: 0.8rem; font-style: italic;
    margin-top: -0.4rem; margin-bottom: 0.6rem;
}
.ac-tag {
    background: #2a2a2d; color: #c0c0c8;
    padding: 0.1rem 0.5rem; border-radius: 3px;
    font-size: 0.78rem;
}
.ac-resolved { background: #1c4a52; color: #4dd0e1; }
.ac-blocked  { background: #5a4a1c; color: #ffd97a; }
.ac-uncertain { background: #2a2a2d; color: #888; }
.ac-continued { background: #1a1a1d; color: #888; }

.open-items {
    background: #1a1a1d; border: 1px solid #5a3a1c; border-radius: 6px;
    padding: 0.8rem 1rem; margin-bottom: 1.5rem;
}
.open-items h3 { margin-top: 0; color: #ffb84d; font-size: 1rem; }
.open-items ul { margin: 0; padding-left: 1.2rem; }
.open-items li { margin-bottom: 0.3rem; color: #e8e8ea; }

/* ─── Agent Actions ─── */
.agent-actions { margin-bottom: 1.5rem; }
.agent-actions h3 { margin: 0 0 0.8rem; font-size: 1rem; color: #c0c0c8; }
.agent-actions h3 .count {
    background: #2a2a2d; color: #a0a0a8;
    padding: 0.1rem 0.5rem; border-radius: 10px;
    font-size: 0.75rem; margin-left: 0.3rem;
}
.aa-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.aa-item {
    background: #1a1a1d; border: 1px solid #2a2a2d; border-radius: 6px;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid #4a4a55;
}
.aa-status-pending, .aa-status-sent { border-left-color: #ffd97a; }
.aa-status-done { border-left-color: #4dd0e1; }
.aa-status-error { border-left-color: #ff5a5a; }
.aa-status-accepted { border-left-color: #6fe09a; opacity: 0.7; }
.aa-status-dismissed { border-left-color: #8a8a90; opacity: 0.5; }
.aa-head { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.3rem; }
.aa-agent { font-weight: 600; color: #4dd0e1; }
.aa-badge {
    padding: 0.05rem 0.5rem; border-radius: 3px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.4px;
    text-transform: uppercase;
}
.aa-badge-pending, .aa-badge-sent { background: #5a4a1c; color: #ffd97a; }
.aa-badge-done { background: #1c4a52; color: #4dd0e1; }
.aa-badge-error { background: #5a1c1c; color: #ff9a9a; }
.aa-badge-accepted { background: #1c4a1c; color: #6fe09a; }
.aa-badge-dismissed { background: #2a2a2d; color: #888; }
.aa-time { color: #666; font-family: monospace; font-size: 0.75rem; margin-left: auto; }
.aa-prompt {
    background: #0e0e10; border-radius: 4px; padding: 0.45rem 0.6rem;
    font-size: 0.85rem; color: #c0c0c8; margin-bottom: 0.4rem;
    font-style: italic;
}
.aa-response {
    background: #16282b; border-radius: 4px; padding: 0.6rem 0.9rem;
    font-size: 0.9rem; color: #e8e8ea; white-space: pre-wrap;
    margin-bottom: 0.4rem;
}
/* Markdown-rendered agent response overrides */
.aa-markdown { white-space: normal; }
.aa-markdown > :first-child { margin-top: 0; }
.aa-markdown > :last-child { margin-bottom: 0; }
.aa-markdown h1, .aa-markdown h2, .aa-markdown h3, .aa-markdown h4, .aa-markdown h5 {
    font-size: 0.95rem; color: #4dd0e1; margin: 0.8rem 0 0.3rem;
    font-weight: 600;
}
.aa-markdown h1 { font-size: 1.05rem; }
.aa-markdown h2 { font-size: 1rem; }
.aa-markdown p { margin: 0.4rem 0; }
.aa-markdown ul, .aa-markdown ol { margin: 0.4rem 0; padding-left: 1.4rem; }
.aa-markdown li { margin-bottom: 0.2rem; }
.aa-markdown code {
    background: #0e0e10; padding: 0.05rem 0.35rem; border-radius: 3px;
    font-size: 0.82rem; color: #ffb84d;
}
.aa-markdown pre {
    background: #0e0e10; border: 1px solid #2a2a2d; border-radius: 4px;
    padding: 0.6rem 0.8rem; overflow-x: auto; margin: 0.4rem 0;
}
.aa-markdown pre code { background: none; padding: 0; color: #e8e8ea; font-size: 0.82rem; }
.aa-markdown blockquote {
    border-left: 3px solid #4a4a55; padding-left: 0.8rem; margin: 0.4rem 0;
    color: #a0a0a8;
}
.aa-markdown a { color: #4dd0e1; }
.aa-markdown table {
    border-collapse: collapse; margin: 0.4rem 0; font-size: 0.85rem;
}
.aa-markdown th, .aa-markdown td {
    border: 1px solid #2a2a2d; padding: 0.3rem 0.6rem;
}
.aa-markdown th { background: #16282b; color: #4dd0e1; }
.aa-markdown hr {
    border: none; border-top: 1px solid #2a2a2d; margin: 0.8rem 0;
}
.aa-markdown strong { color: #e8e8ea; }
.aa-error {
    background: #3a1c1c; border-radius: 4px; padding: 0.5rem 0.7rem;
    font-size: 0.85rem; color: #ff9a9a; font-family: monospace;
    margin-bottom: 0.4rem;
}
.aa-controls { display: flex; gap: 0.5rem; }
.aa-form { margin: 0; }
.btn-mini {
    background: #2a2a2d; color: #6fe09a; border: 1px solid #1c4a1c;
    padding: 0.3rem 0.7rem; border-radius: 4px; cursor: pointer;
    font-size: 0.78rem;
}
.btn-mini:hover { background: #1c4a1c; color: #fff; }
.btn-mini-dismiss { color: #888; border-color: #2a2a2d; }
.btn-mini-dismiss:hover { background: #5a1c1c; color: #fff; border-color: #5a1c1c; }
.btn-mini-reply { color: #4dd0e1; border-color: #1c4a52; }
.btn-mini-reply:hover { background: #1c4a52; color: #fff; }

.aa-thread-marker { color: #4dd0e1; font-weight: 700; margin-right: 0.3rem; }
.aa-depth-1, .aa-depth-2, .aa-depth-3, .aa-depth-4, .aa-depth-5 {
    border-left-color: #1c4a52;
}

.aa-reply-form {
    margin-top: 0.6rem;
    background: #0e0e10; border: 1px solid #2a2a2d; border-radius: 4px;
    padding: 0.6rem;
}
.aa-reply-form textarea {
    width: 100%; background: #16161a; border: 1px solid #2a2a2d;
    color: #e8e8ea; border-radius: 4px; padding: 0.5rem 0.7rem;
    font-family: inherit; font-size: 0.9rem; resize: vertical;
    margin-bottom: 0.5rem;
}
.aa-reply-controls { display: flex; gap: 0.5rem; }

/* ─── Dispatch Form ─── */
.dispatch-form {
    background: #1a1a1d; border: 1px solid #2a2a2d; border-radius: 6px;
    padding: 0.8rem 1rem; margin-bottom: 1.5rem;
}
.dispatch-form h3 { margin: 0 0 0.6rem; font-size: 1rem; color: #c0c0c8; }
.dispatch-ui { display: grid; gap: 0.6rem; }
.dispatch-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.dispatch-ui select {
    background: #0e0e10; border: 1px solid #2a2a2d; color: #e8e8ea;
    padding: 0.45rem 0.6rem; border-radius: 4px; font-size: 0.9rem;
    min-width: 240px;
}
.dispatch-ui textarea {
    background: #0e0e10; border: 1px solid #2a2a2d; color: #e8e8ea;
    padding: 0.5rem 0.7rem; border-radius: 4px; font-size: 0.9rem;
    font-family: inherit; width: 100%; resize: vertical;
}
.dispatch-hint { color: #888; font-size: 0.8rem; }

/* ─── Persons / Identity Management ─── */
.auto-merge-form {
    background: #16161a; border: 1px solid #2a2a2d; border-radius: 6px;
    padding: 0.8rem 1rem; margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 1rem;
}
.btn-primary {
    background: #4dd0e1; color: #0e0e10; border: none;
    padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer;
    font-weight: 600; font-size: 0.9rem;
}
.btn-primary:hover { background: #6de0f0; }
.hint { color: #888; font-size: 0.85rem; }

.candidates { margin-bottom: 2.5rem; }
.candidates h2 .count {
    background: #5a4a1c; color: #ffd97a;
    padding: 0.1rem 0.5rem; border-radius: 10px;
    font-size: 0.85rem; margin-left: 0.5rem;
}
.cand-group {
    background: #1a1a1d; border: 1px solid #2a2a2d; border-radius: 6px;
    padding: 0.8rem 1rem; margin-bottom: 0.8rem;
}
.cand-header { margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: baseline; }
.cand-reason { color: #888; font-size: 0.85rem; }
.cand-members { display: grid; gap: 0.5rem; }
.cand-member {
    background: #0e0e10; border: 1px solid #2a2a2d; border-radius: 4px;
    padding: 0.5rem 0.8rem;
    display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem;
}
.cand-member.primary { border-color: #4dd0e1; }
.cm-head { font-size: 0.95rem; }
.cm-name { color: #e8e8ea; }
.cm-org { color: #888; margin-left: 0.4rem; font-size: 0.85rem; }
.cm-tag { color: #4dd0e1; margin-left: 0.6rem; font-size: 0.75rem; font-weight: 600; }
.cm-stats { font-size: 0.8rem; color: #888; grid-column: 1 / 2; display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.cm-id {
    background: #2a2a2d; color: #c0c0c8;
    padding: 0.05rem 0.4rem; border-radius: 3px; font-family: monospace;
    font-size: 0.78rem;
}
.cm-form { grid-column: 2; align-self: center; margin: 0; }
.btn-merge {
    background: #5a4a1c; color: #ffd97a; border: none;
    padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer;
    font-size: 0.85rem;
}
.btn-merge:hover { background: #6a5a2c; color: #fff; }

.all-persons h2 .count {
    background: #2a2a2d; color: #a0a0a8;
    padding: 0.1rem 0.5rem; border-radius: 10px;
    font-size: 0.85rem; margin-left: 0.5rem;
}
.persons-table {
    width: 100%; border-collapse: collapse;
    background: #1a1a1d; border-radius: 6px; overflow: hidden;
    margin-top: 0.8rem;
}
.persons-table th, .persons-table td {
    text-align: left; padding: 0.5rem 0.8rem;
    border-bottom: 1px solid #2a2a2d; font-size: 0.9rem;
    vertical-align: top;
}
.persons-table th { color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
.persons-table .num { text-align: right; font-family: monospace; color: #888; }
.persons-table .ids-cell { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.persons-table .owner-row { background: #16282b; }
.persons-table .skipped-row { opacity: 0.55; }
.persons-table .person-link { color: inherit; text-decoration: none; }
.persons-table .person-link:hover { color: #4dd0e1; text-decoration: underline; }

.skip-tag {
    background: #5a1c1c; color: #ff9a9a;
    padding: 0.05rem 0.4rem; border-radius: 3px;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px;
    margin-right: 0.3rem;
}

.skip-form { margin: 0; }
.btn-skip {
    background: #2a2a2d; color: #ff9a9a; border: 1px solid #5a1c1c;
    padding: 0.25rem 0.7rem; border-radius: 4px; cursor: pointer;
    font-size: 0.78rem;
}
.btn-skip:hover { background: #5a1c1c; color: #fff; }
.btn-unskip {
    background: transparent; color: #888; border: none;
    cursor: pointer; font-size: 1.1rem; padding: 0 0.4rem;
}
.btn-unskip:hover { color: #ff9a9a; }

.skip-rules { margin-top: 2.5rem; }
.skip-rules h3 .count {
    background: #2a2a2d; color: #a0a0a8;
    padding: 0.1rem 0.5rem; border-radius: 10px;
    font-size: 0.85rem; margin-left: 0.5rem;
}
.env-skip-list {
    margin-bottom: 1rem; background: #1a1a1d;
    border: 1px solid #2a2a2d; border-radius: 6px; padding: 0.5rem 0.8rem;
}
.env-skip-list summary { cursor: pointer; color: #a0a0a8; font-size: 0.9rem; }
.env-skip-list .env-list { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }

.rules-table {
    width: 100%; border-collapse: collapse;
    background: #1a1a1d; border-radius: 6px; overflow: hidden;
}
.rules-table th, .rules-table td {
    text-align: left; padding: 0.4rem 0.7rem;
    border-bottom: 1px solid #2a2a2d; font-size: 0.85rem;
    vertical-align: middle;
}
.rules-table th { color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
.rules-table code { background: #0e0e10; padding: 0.05rem 0.4rem; border-radius: 3px; font-size: 0.78rem; }
.rules-table .rule-notes { color: #888; font-size: 0.8rem; }
.rules-table .rule-time { color: #666; font-family: monospace; font-size: 0.75rem; }

/* ─── Peer detail / sequence diagram ─── */
.peer-header { margin-bottom: 2rem; }
.peer-header h2 { margin: 0 0 0.5rem; }
.peer-meta { display: flex; gap: 1.2rem; color: #888; font-size: 0.9rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.peer-meta strong { color: #c0c0c8; }
.peer-ids { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.thread {
    background: #1a1a1d; border: 1px solid #2a2a2d; border-radius: 8px;
    padding: 1rem 1.2rem; margin-bottom: 1.5rem;
}
.thread-header { margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid #2a2a2d; }
.thread-topic {
    font-size: 1.1rem; font-weight: 500;
    color: #e8e8ea; text-decoration: none; display: block; margin-bottom: 0.3rem;
}
.thread-topic:hover { color: #4dd0e1; }
.thread-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: #888; align-items: center; }

.seq-diagram {
    display: grid;
    grid-template-columns: 110px 1fr 110px;
    gap: 0;
    position: relative;
}
.seq-actor {
    grid-row: 1;
    text-align: center;
    font-weight: 600;
    padding: 0.5rem 0.8rem;
    background: #16282b;
    color: #4dd0e1;
    border-radius: 4px;
    font-size: 0.85rem;
}
.seq-actor-me { grid-column: 1; }
.seq-actor-peer { grid-column: 3; background: #2a2a2d; color: #c0c0c8; }

.seq-track {
    grid-row: 2 / -1;
    width: 2px;
    background: #2a2a2d;
    justify-self: center;
}
.seq-track-me { grid-column: 1; }
.seq-track-peer { grid-column: 3; }

.seq-event {
    display: contents;
}
.seq-event > * {
    padding: 0.5rem 0.8rem;
    margin-top: 0.4rem;
}
.seq-time {
    grid-column: 1;
    text-align: right;
    color: #666; font-family: monospace; font-size: 0.78rem;
    align-self: center;
}
.seq-event-out .seq-time { grid-column: 1; text-align: right; }
.seq-event-in  .seq-time { grid-column: 3; text-align: left; }

.seq-arrow {
    grid-column: 2;
    display: flex; align-items: center; gap: 0;
    padding: 0;
    margin-top: 0.4rem;
}
.arrow-line {
    flex: 1; height: 1.5px;
}
.arrow-line-out { background: linear-gradient(to right, #1c5a3a 0%, #4dd0e1 100%); margin-right: 4px; }
.arrow-line-in  { background: linear-gradient(to left, #5a4a1c 0%, #ffb84d 100%); margin-left: 4px; }
.arrow-head {
    color: #4dd0e1; font-size: 0.9rem; line-height: 1;
}
.arrow-head-out { color: #4dd0e1; }
.arrow-head-in  { color: #ffb84d; }

.seq-content {
    background: #0e0e10;
    border: 1px solid #2a2a2d;
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    grid-column: 2;
    /* spans into next row to allow arrow above */
    position: relative;
    margin-top: -0.6rem;
    z-index: 1;
}
.seq-subject { font-weight: 500; margin-bottom: 0.3rem; color: #e8e8ea; }
.seq-summary { color: #c0c0c8; font-size: 0.85rem; }
.seq-channel {
    margin-top: 0.3rem; font-size: 0.7rem; color: #666;
    background: #2a2a2d; display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px;
}