/* EgyptAuth — integrations area (docs/DESIGN_SYSTEM.md §4): Variables, Webhooks, API relay and Chat
   (staff/pages/variables.js, webhooks.js, relay.js, chat.js). Semantic tokens only.
   Owns: .var-* .wh-* .http-code .rl-* .ch-* */

/* Operational references and working tables use the same ruled composition as the directory. */
:is(.var-page, .wh-page, .rl-page) .table-card { border-top: 2px solid var(--accent); }
:is(.var-page, .wh-page, .rl-page) .table-toolbar { padding: 14px 18px; background: var(--surface-2); }
@media (max-width: 640px) { :is(.var-page, .wh-page, .rl-page) .table-toolbar { padding: 12px 14px; } }

/* ---------- Variables ---------- */
/* Value preview: one mono line in ink, its shape and size underneath. */
.var-preview { display: flex; flex-direction: column; min-width: 0; }
.var-preview-value { display: block; color: var(--ink-1); }
/* Access is a neutral fact: icon + word in secondary ink, never a coloured chip. */
.var-access { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.var-access .icon { width: 14px; height: 14px; color: var(--ink-3); }
.var-size { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: calc(-1 * var(--s2)); }
.var-size.is-over { color: var(--danger-text); }
.var-facts { grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); }

/* ---------- Webhooks ---------- */
/* Endpoint cell: the URL with its host in ink and scheme/path receding; the full address is in the tooltip. */
.wh-endpoint-link { display: block; min-width: 0; color: inherit; }
.wh-endpoint-link:hover .wh-url-host { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.wh-url { display: flex; min-width: 0; max-width: 100%; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; white-space: nowrap; }
/* The path gives way first: the host is what identifies an endpoint. */
.wh-url-host { color: var(--ink-1); font-weight: 500; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wh-url-path { color: var(--ink-3); flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wh-events { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; max-width: 340px; }
.wh-more { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; cursor: default; }
/* HTTP response: mono code with a dot. 2xx is routine and stays neutral; every failure is red, dot and text. */
.http-code { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; cursor: default; font-variant-numeric: tabular-nums; }
.http-code::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral); }
.http-code.is-bad { color: var(--danger-text); }
.http-code.is-bad::before { background: var(--danger); }

/* Onboarding: what webhooks do and how to start, beside a real example delivery. */
.wh-onboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border: 1px solid var(--line-1); border-top: 2px solid var(--brand); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-1); }
.wh-onboard-main { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; }
.wh-onboard-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line-1); color: var(--ink-3); }
.wh-onboard-title { max-width: 24ch; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; font-weight: 600; letter-spacing: -.035em; }
.wh-onboard-text { font-size: var(--fs-sm); color: var(--ink-2); max-width: 58ch; line-height: 1.6; }
.wh-steps { counter-reset: wh-step; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.wh-steps > li { counter-increment: wh-step; display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-1); line-height: 1.5; }
.wh-steps > li::before { content: counter(wh-step); flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 11px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wh-onboard-example { display: flex; flex-direction: column; min-width: 0; background: var(--surface-sunken); border-inline-start: 1px solid var(--line-1); }
.wh-ex-head { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line-1); }
.wh-example.code-block { flex: 1; display: flex; }
.wh-example > .code { flex: 1; margin: 0; border: 0; border-radius: 0; background: transparent; max-height: none; padding: 14px 44px 14px 18px; }
@media (max-width: 960px) {
  .wh-onboard { grid-template-columns: minmax(0, 1fr); }
  .wh-onboard-example { border-inline-start: 0; border-top: 1px solid var(--line-1); }
  .wh-onboard-main { padding: 20px; }
}

/* Delivery contract: a folded reference strip that opens into facts, headers, the signature rule and a verified snippet. */
.wh-contract { border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--surface-2); }
.wh-contract-sum { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; cursor: var(--cursor-action, pointer); list-style: none; font-size: var(--fs-sm); user-select: none; border-radius: var(--r-lg); }
.wh-contract-sum::-webkit-details-marker { display: none; }
.wh-contract-sum:hover { background: var(--state-hover); }
.wh-contract-sum:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.wh-contract-sum > .icon:first-child { color: var(--ink-3); }
.wh-contract-title { font-weight: 600; color: var(--ink-1); white-space: nowrap; }
.wh-contract-line { flex: 1; min-width: 0; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); }
.wh-chev { margin-inline-start: auto; color: var(--ink-3); transition: transform var(--t) var(--ease); }
.wh-contract[open] .wh-chev { transform: rotate(180deg); }
.wh-contract[open] .wh-contract-sum { border-bottom: 1px solid var(--line-1); border-end-start-radius: 0; border-end-end-radius: 0; }
.wh-contract-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; padding: 16px; background: var(--surface-1); border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); }
.wh-contract-ref { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wh-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.wh-fact dt, .wh-sub-title { font-family: var(--label-font); font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.wh-fact dd { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.55; }
.wh-headers dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin-top: 6px; }
.wh-headers dl > div { display: contents; }
.wh-headers dt { font-size: 11.5px; color: var(--ink-1); }
.wh-headers dd { font-size: var(--fs-xs); color: var(--ink-3); }
.wh-sig p { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.55; }
.wh-formula { display: block; margin-top: 8px; padding: 8px 10px; border-radius: var(--r); background: var(--surface-sunken); border: 1px solid var(--line-1); font-size: 11.5px; color: var(--ink-1); overflow-wrap: anywhere; }
.wh-snippet { display: flex; flex-direction: column; gap: 6px; align-self: start; min-width: 0; }
.wh-snippet .code { font-size: 11.5px; max-height: 320px; }
.wh-snippet-hint { font-size: var(--fs-xs); color: var(--ink-3); }
@media (max-width: 1100px) { .wh-contract-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .wh-facts { grid-template-columns: minmax(0, 1fr); }
  .wh-contract-line { display: none; }
  .wh-headers dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .wh-headers dd { margin-bottom: 6px; }
}

/* Related integration (Discord log forwarding): one quiet ruled line under the list. */
.wh-related { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--surface-1); }
.wh-related-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.wh-related-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); }
.wh-related-text { font-size: var(--fs-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.wh-related > .btn { flex: none; }
@media (max-width: 640px) { .wh-related { flex-wrap: wrap; } .wh-related > .btn { width: 100%; } }

/* One endpoint (drawer and page): why it is not delivering, then four readings. */
.wh-notice > .grow { flex: 1 1 0; }
.wh-notice .grow > div + div { margin-top: 2px; }
.wh-notice > .btn { flex: none; align-self: center; }
.wh-readings { background: var(--surface-2); }
.wh-readings .stat-value { font-family: var(--figure-font); font-size: 26px; letter-spacing: -.045em; }
@media (max-width: 640px) {
  .wh-notice { flex-wrap: wrap; }
  .wh-notice > .btn { flex: 0 0 calc(100% - 26px); margin-inline-start: 26px; }
  .wh-endpoint-page .page-meta .vsep { display: none; }
}
.wh-kv { max-width: none; }
.wh-kv dd .cell-sub { flex-basis: 100%; }
.wh-chip-group { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; }
.wh-chip-label { font-size: var(--fs-xs); color: var(--ink-3); padding-top: 3px; }
.wh-drawer { gap: var(--s6); }
.wh-page-url .mono { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.wh-endpoint-page .page-title > [data-endpoint-host] { min-width: 0; overflow-wrap: anywhere; }
.wh-secret-prefix { width: auto; }
.wh-log-heading { margin-bottom: 0; align-items: flex-end; }
.resource-aside .wh-chip-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.resource-aside .chip { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }

/* Delivery log: the timeline template — a left rule with one dot per delivery, rows that disclose the payload and
   response. Only failures are red; retries are held (amber); routine deliveries stay neutral. */
.wh-log { container-type: inline-size; }
.wh-log-list { position: relative; margin: 0; padding: 0; list-style: none; }
.wh-log-list::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 20px; width: 1px; background: var(--line-1); }
.wh-log-item { position: relative; border-bottom: 1px solid var(--line-1); }
.wh-log-item:last-child { border-bottom: 0; }
.wh-log-node { position: absolute; z-index: 1; inset-inline-start: 16px; top: calc(var(--row-h) / 2 - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--line-3); pointer-events: none; }
.wh-log-item.is-failed .wh-log-node { border-color: var(--danger); background: var(--danger); }
.wh-log-item.is-retrying .wh-log-node { border-color: var(--warn); }
.wh-log-row {
  display: grid; grid-template-columns: minmax(92px, 120px) minmax(0, 1fr) minmax(100px, auto) minmax(84px, auto) minmax(76px, auto) 16px;
  grid-template-areas: "time event state code attempts chev"; align-items: center; column-gap: 16px;
  width: 100%; min-height: var(--row-h); padding: 6px 14px 6px 40px; color: var(--ink-2); font-size: var(--fs-sm); text-align: start;
  transition: background-color var(--t-fast);
}
button.wh-log-row:hover { background: var(--state-row-hover); }
.wh-log-row:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.wh-log-time { grid-area: time; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wh-log-event { grid-area: event; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-log-state { grid-area: state; }
.wh-log-code { grid-area: code; }
.wh-log-attempts { grid-area: attempts; color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: end; }
.wh-log-chev { grid-area: chev; color: var(--ink-3); transition: transform var(--t) var(--ease); }
.wh-log-item.is-open .wh-log-chev { transform: rotate(180deg); }
.wh-log-item.is-open > .wh-log-row { background: var(--state-row-expanded); }
.wh-log-detail { position: relative; z-index: 1; padding: 14px 16px 18px 40px; background: var(--surface-sunken); border-top: 1px solid var(--line-1); }
.wh-log-item.is-skeleton .wh-log-row { grid-template-columns: 92px minmax(0, 1fr) 80px; grid-template-areas: none; }
.wh-log-kv { grid-template-columns: minmax(96px, 22%) minmax(0, 1fr); }
.wh-log-actions { padding-top: 2px; }
.wh-log-foot { justify-content: space-between; }
/* The log sits in a page column, a drawer or a phone: it lays out by its own width, not the viewport's.
   Narrow logs flow on two lines: event · state, then time · response · attempts (the break is a zero-height item). */
.wh-log-break { display: none; }
@container (max-width: 640px) {
  .wh-log-list::before { inset-inline-start: 17px; }
  .wh-log-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 12px 9px 36px; }
  .wh-log-event { order: 1; flex: 1 1 0; }
  .wh-log-state { order: 2; }
  .wh-log-chev { order: 3; }
  .wh-log-break { display: block; order: 4; flex-basis: 100%; height: 0; }
  .wh-log-time { order: 5; }
  .wh-log-code { order: 6; }
  .wh-log-attempts { order: 7; margin-inline-start: auto; }
  .wh-log-node { top: 15px; inset-inline-start: 13px; }
  .wh-log-item.is-skeleton .wh-log-row { display: grid; }
  .wh-log-detail { padding: 12px 12px 14px; }
  .wh-log-kv { grid-template-columns: minmax(0, 1fr); }
}

/* Endpoint form: grouped event checkboxes. */
.wh-group .check-grid { max-height: none; }
.wh-group-title { margin-bottom: 0; }
.wh-groups.is-disabled { opacity: 0.55; }
.wh-groups.is-disabled .check-row { cursor: not-allowed; }

/* ---------- API relay ---------- */
/* "How it works": a folded reference strip, the same anatomy as the webhook delivery contract. */
.rl-how { border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--surface-2); }
.rl-how-sum { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 8px 14px; cursor: var(--cursor-action, pointer); list-style: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); user-select: none; border-radius: var(--r-lg); }
.rl-how-sum::-webkit-details-marker { display: none; }
.rl-how-sum:hover { background: var(--state-hover); }
.rl-how-sum:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.rl-how-sum > .icon:first-child { color: var(--ink-3); }
.rl-how-chev { color: var(--ink-3); transition: transform var(--t) var(--ease); }
.rl-how[open] .rl-how-chev { transform: rotate(180deg); }
.rl-how[open] .rl-how-sum { border-bottom: 1px solid var(--line-1); border-end-start-radius: 0; border-end-end-radius: 0; }
.rl-how-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface-1); border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); }
.rl-points { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); }
.rl-points li { display: flex; align-items: flex-start; gap: 8px; }
.rl-points .icon { flex: none; margin-top: 3px; color: var(--ink-3); }

/* Relay rows: name (+ a neutral "Disabled" fact), method chip, URL template with its {placeholders} as code. */
.rl-name { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.rl-name > .mono { white-space: nowrap; }
.rl-name .cell-sub .badge { height: 18px; }
.rl-target { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rl-target > .rl-url { flex: 1; }
.rl-readings .stat-foot { gap: 6px; }
.rl-url { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 12px; }
.rl-url.is-full { white-space: normal; overflow-wrap: anywhere; }
.rl-ph { color: var(--code-accent); }
.rl-method { flex: none; min-inline-size: 52px; justify-content: center; color: var(--ink-1); }
.rl-last { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* Drawer: usage readings (.stat-row.cols-2), the program's call as code, then the editor. */
.rl-drawer { gap: var(--s6); }
.rl-snippet { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rl-snippet-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.rl-phs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rl-phs .chip.rl-bad { border-color: var(--danger-line); color: var(--danger-text); }
.rl-hsaved { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--surface-sunken); }
.rl-hrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: var(--s2); align-items: center; }
.rl-herr.is-shown { display: flex; }

/* Test dialog: the upstream response, as text. */
.rl-resp { display: flex; flex-direction: column; gap: 8px; }
.rl-resp-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.rl-resp-wait { display: flex; align-items: center; gap: var(--s2); padding: 16px 0; }
.rl-pre { max-height: 360px; margin: 0; }
@media (max-width: 560px) {
  .rl-hrow { grid-template-columns: minmax(0, 1fr) auto; }
  .rl-hrow > [data-hvalue] { grid-column: 1; grid-row: 2; }
  .rl-hrow > [data-hremove] { grid-row: 1 / span 2; }
}

/* ---------- In-app chat: the channels beside a moderation log (timeline template) ---------- */
.ch-shell { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; height: clamp(520px, calc(100dvh - 210px), 1100px); }
.ch-side, .ch-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); }
.ch-shell.is-empty { grid-template-columns: minmax(0, 1fr); }
.ch-shell.is-empty .ch-main { display: none; }
.ch-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 12px 14px; border-bottom: 1px solid var(--line-1); background: var(--surface-2); }
.ch-side-title { font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-3); }
.ch-side-count { font-size: var(--fs-xs); color: var(--ink-3); }
.ch-channels { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.ch-loading { display: grid; place-items: center; flex: 1; min-height: 160px; color: var(--ink-3); }
.ch-item { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border-radius: var(--r); color: inherit; transition: background-color var(--t-fast); }
.ch-item + .ch-item { margin-top: 2px; }
.ch-item:hover { background: var(--state-hover); }
.ch-item:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.ch-item.is-active { background: var(--state-selected); }
.ch-item.is-active::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 8px; width: 2px; border-radius: 0 2px 2px 0; background: var(--accent); }
.ch-hash { flex: none; width: 16px; font-family: var(--font-mono); font-weight: 600; color: var(--ink-3); text-align: center; line-height: 1.5; }
.ch-item.is-active .ch-hash { color: var(--accent-text); }
.ch-item-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ch-item-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ch-item-name { flex: 1; min-width: 0; font-weight: 500; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-item-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.ch-item-slug { font-size: 11.5px; color: var(--ink-3); }
.ch-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.ch-chip-text { max-inline-size: 110px; }

/* Channel head: title, slug, message count and the channel facts; administrators edit or delete it. */
.ch-head { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; border-bottom: 1px solid var(--line-1); }
.ch-back { display: none; }
.ch-head-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ch-head-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-head-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-xs); color: var(--ink-3); }
.ch-head-actions { display: flex; flex: none; gap: 4px; }

/* The log: a left rule with a dot per author group; time · author · text, actions at the end of the row.
   Staff messages are told apart by their tag and a filled neutral dot, never by the accent. */
.ch-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ch-stream { padding: 6px 0 12px; }
.ch-state { display: grid; place-items: center; min-height: 240px; padding: 16px; }
.ch-older { display: flex; justify-content: center; padding: 4px 0 8px; }
.ch-log { position: relative; margin: 0; padding: 0; list-style: none; }
.ch-log::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 86px; width: 1px; background: var(--line-1); }
.ch-day { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; padding-inline: 16px; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-day::after { content: ""; flex: 1; height: 1px; background: var(--line-1); }
.ch-day > span { padding: 2px 8px; border: 1px solid var(--line-1); border-radius: var(--r-pill); background: var(--surface-1); }
.ch-msg { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 28px; align-items: start; padding: 4px 16px; }
.ch-msg:not(.is-cont) { padding-top: 10px; }
.ch-msg:hover { background: var(--state-row-hover); }
.ch-msg-node { position: absolute; z-index: 1; inset-inline-start: 82px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--line-3); }
.ch-msg.is-cont .ch-msg-node { display: none; }
.ch-msg.is-staff .ch-msg-node { border-color: var(--ink-3); background: var(--ink-3); }
.ch-msg-time { font-size: var(--fs-xs); line-height: 22px; color: var(--ink-3); text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ch-msg-main { min-width: 0; }
.ch-msg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 2px; }
.ch-author { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); overflow-wrap: anywhere; }
.ch-msg-text { font-size: var(--fs-base); line-height: 1.55; color: var(--ink-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-msg.is-deleted .ch-author { color: var(--ink-3); }
.ch-deleted { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-3); font-style: italic; }
.ch-msg-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--t-fast); }
.ch-msg:hover .ch-msg-actions, .ch-msg:focus-within .ch-msg-actions { opacity: 1; }
@media (hover: none) { .ch-msg-actions { opacity: 1; } }

/* Staff composer */
.ch-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--line-1); background: var(--surface-1); }
.ch-composer { display: flex; flex-direction: column; gap: 8px; }
.ch-input { min-height: 64px; max-height: 200px; resize: none; field-sizing: content; }
.ch-composer-foot { display: flex; align-items: center; gap: 10px; }
.ch-hint { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.ch-limit { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-limit.is-over { color: var(--danger-text); }

/* Moderation: quoted message, when a mute ends, the muted users drawer. */
.ch-quote { margin: 0; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-sunken); color: var(--ink-2); font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow-y: auto; }
.ch-mute-ends { margin-top: calc(-1 * var(--s2)); font-size: var(--fs-xs); color: var(--ink-3); }
.ch-mutes { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line-1); border-radius: var(--r-lg); }
.ch-mute { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-1); }
.ch-mute:last-child { border-bottom: 0; }
.ch-mute-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; }
.ch-mute-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ch-mute-reason { font-size: var(--fs-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.ch-mute-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--ink-3); }

/* Below 900px one pane at a time (channels, then the log with a back button). */
@media (max-width: 900px) {
  .ch-shell { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 180px); min-height: 480px; }
  .ch-shell:not(.has-thread) .ch-main { display: none; }
  .ch-shell.has-thread .ch-side { display: none; }
  .ch-back { display: inline-grid; }
  .ch-head { gap: 8px; padding-inline: 10px; }
}
@media (max-width: 560px) {
  .ch-log::before { inset-inline-start: 67px; }
  .ch-msg { grid-template-columns: 50px minmax(0, 1fr) auto; column-gap: 14px; padding-inline: 10px; }
  .ch-msg-node { inset-inline-start: 63px; }
  .ch-msg-time { font-size: 11px; }
  .ch-day { padding-inline: 10px; }
  .ch-foot { padding-inline: 10px; }
}