/* Page bindings only, tokens only. Components and their appearance live in design/ (copied unchanged). */
.dc .conversation-inner, .dc .composer-inner, .dc .messages { min-width: 0; }
.dc .context-row { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.dc .notice:not(:empty), .dc .sending:not([hidden]) { margin-bottom: var(--space-3); }
.dc .access input { flex: 1; min-width: 0; font: 400 var(--text-body)/1.45 var(--font-sans); color: var(--fg); background: var(--slate); border: 1px solid var(--edge); border-radius: 0; padding: var(--space-3) var(--space-4); min-height: var(--control-l); caret-color: var(--sodium); }
.dc .access input:focus { outline: 2px solid var(--fg-2); outline-offset: 0; }
.dc .compose textarea:disabled { color: var(--fg-2); cursor: not-allowed; }
.dc a.status { text-decoration: none; }
.dc .dev-banner { white-space: nowrap; }
.dc .rail .alert { margin-bottom: var(--space-4); }
/* The diagram above the three checks: who can read the chat. */
.dc .rail .flow-caption { margin-bottom: var(--space-4); }
/* The rail: three checks, each a mark, its claim and one line (row 1 also its fingerprints); the rest in Details. */
.dc .check-line { margin-top: var(--space-1); }
/* Row 1 shows its SHA-256 fingerprints without a click, each label above its value. */
.dc .check-shown:not(:empty) { margin-top: var(--space-3); }
.dc .check-shown .label { margin: 0; }
.dc .check-shown .facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.dc .check-shown .note { margin-top: var(--space-2); }
.dc .rail .exact, .dc .reply-badge .exact { margin: var(--space-1) 0 0; }
.dc .rail .exact summary, .dc .reply-badge .exact summary { width: fit-content; min-height: var(--control); padding: 0; font: 400 var(--text-caption)/var(--control) var(--font-sans); color: var(--fg-2); }
.dc .rail .exact summary:hover, .dc .reply-badge .exact summary:hover { color: var(--fg); }
.dc .rail .exact p, .dc .reply-badge .exact p { margin: var(--space-2) 0 0; font: 400 var(--text-caption)/1.5 var(--font-sans); color: var(--fg-2); max-width: var(--measure); overflow-wrap: anywhere; }
.dc .rail .exact p.check-prompt { font: 400 var(--text-mono-s)/1.5 var(--font-mono); color: var(--fg); white-space: pre-wrap; }
/* Under the rows, always shown: how to verify without this page. */
.dc .check-cli { margin: var(--space-4) 0 0; font: 400 var(--text-caption)/1.5 var(--font-sans); color: var(--fg-2); max-width: var(--measure); overflow-wrap: anywhere; }
/* A reply's badge: ticks for the checks that passed, one muted line for the rest, Details. */
.dc .reply-badge { margin-top: var(--space-3); }
.dc .reply-ticks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; }
.dc .reply-ticks .status { color: var(--fg); }
.dc .reply-badge > .note { margin-top: var(--space-1); }
.dc .reply-badge .facts { margin-top: var(--space-2); }
.dc .reply-badge .lines { margin-top: var(--space-2); max-width: var(--measure); }
.dc .msg .actions { margin-top: var(--space-2); }
.dc .msg .actions .btn { padding: var(--space-1) var(--space-3); font-size: var(--text-caption); }