experimental-a2 0.20.0 → 0.22.0

package/examples/playground/app/a2slack/a2slack.css

@@ -0,0 +1,1067 @@
+/* a2slack: the group chat example, full-window. Its tokens live on the page
+   root, so they never meet the playground's own `--bg`, `--ink`, and so on. */
+
+body:has(.a2slack-page) {
+  height: 100dvh;
+  overflow: hidden;
+  background-color: #fafafa;
+}
+
+main:has(> .a2slack-page) {
+  max-width: none;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.a2slack-page {
+  --a2slack-bg: #fafafa;
+  --a2slack-bright: #040404;
+  --a2slack-dim: #303030;
+  --a2slack-muted: #646464;
+  --a2slack-faint: #909090;
+  --a2slack-hairline: #d9d9d9;
+  --a2slack-shade: #f0f0f0;
+  --a2slack-shade-hover: #e3e3e3;
+  --a2slack-accent: #0072e4;
+  --a2slack-yellow: #c78f00;
+  --a2slack-red: #c70000;
+  --a2slack-green: #1a7f37;
+  --a2slack-selection: rgba(199, 143, 0, 0.26);
+  --a2slack-sans:
+    var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
+    sans-serif;
+  --a2slack-mono:
+    var(--font-geist-mono), ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  height: 100%;
+  /* What the playground's body sets, back to the browser's defaults. */
+  font-size: 16px;
+  line-height: normal;
+  letter-spacing: normal;
+  -webkit-font-smoothing: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+  body:has(.a2slack-page) {
+    background-color: #040404;
+  }
+
+  .a2slack-page {
+    --a2slack-bg: #040404;
+    --a2slack-bright: #fafafa;
+    --a2slack-dim: #dedede;
+    --a2slack-muted: #909090;
+    --a2slack-faint: #646464;
+    --a2slack-hairline: #252525;
+    --a2slack-shade: #161616;
+    --a2slack-shade-hover: #1b1b1b;
+    --a2slack-accent: #4c9fef;
+    --a2slack-yellow: #ffcc49;
+    --a2slack-red: #ff7b72;
+    --a2slack-green: #3fb950;
+    --a2slack-selection: rgba(255, 204, 73, 0.22);
+  }
+}
+
+.a2slack-page ::selection {
+  background-color: var(--a2slack-selection);
+}
+
+/* The playground styles bare buttons, forms, and focus rings. Undo what no
+   class below sets, so the page renders as the group chat does. */
+.a2slack-page button {
+  font-weight: 400;
+}
+
+.a2slack-page button:hover:not(:disabled) {
+  filter: none;
+}
+
+.a2slack-page button:disabled {
+  opacity: 1;
+}
+
+.a2slack-page :focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+
+.a2slack-input:focus-visible,
+.a2slack-gate-input:focus-visible,
+.a2slack-composer-textarea:focus-visible,
+.a2slack-edit-area:focus-visible,
+.a2slack-menu-popup:focus-visible,
+.a2slack-menu-item:focus-visible {
+  outline: none;
+}
+
+/* ── shell ───────────────────────────────────────────────────────── */
+
+.a2slack-shell {
+  display: flex;
+  height: 100%;
+  background-color: var(--a2slack-bg);
+  color: var(--a2slack-dim);
+  font-family: var(--a2slack-sans);
+}
+
+.a2slack-main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.a2slack-loading {
+  margin: 1em 0;
+}
+
+/* ── home ────────────────────────────────────────────────────────── */
+
+.a2slack-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 100%;
+}
+
+.a2slack-empty-title {
+  margin: 1em 0;
+  color: var(--a2slack-bright);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-empty-hint {
+  margin: 1em 0;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+}
+
+/* ── sidebar ─────────────────────────────────────────────────────── */
+
+.a2slack-sidebar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+/* The playground's site nav, as tall as the channel header beside it. */
+.a2slack-sidebar .a2slack-head {
+  flex-shrink: 0;
+  height: 46px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--a2slack-hairline);
+  font-family: var(--a2slack-mono);
+}
+
+.a2slack-list {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 1px;
+  padding: 12px 8px;
+  overflow-y: auto;
+}
+
+.a2slack-label {
+  padding: 0 8px 6px;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.a2slack-channel {
+  padding: 5px 8px;
+  overflow: hidden;
+  background-color: transparent;
+  color: var(--a2slack-muted);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  letter-spacing: -0.02em;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.a2slack-channel:hover,
+.a2slack-channel[aria-current='page'] {
+  background-color: var(--a2slack-shade);
+  color: var(--a2slack-bright);
+}
+
+/* The inbox: a row like a channel's, with the unread count at its end. */
+.a2slack-inbox-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  border-style: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.a2slack-label-spaced {
+  margin-top: 12px;
+}
+
+.a2slack-unread {
+  min-width: 18px;
+  padding: 2px 5px;
+  background-color: var(--a2slack-accent);
+  color: var(--a2slack-bg);
+  font-family: var(--a2slack-mono);
+  font-size: 10px;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  text-align: center;
+}
+
+.a2slack-form {
+  display: block;
+  margin: 0;
+  padding: 10px 16px;
+  border: 0;
+  border-top: 1px solid var(--a2slack-hairline);
+  background: none;
+}
+
+.a2slack-search {
+  border-top: 0;
+  border-bottom: 1px solid var(--a2slack-hairline);
+}
+
+.a2slack-input {
+  width: 100%;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  background-color: transparent;
+  color: var(--a2slack-bright);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-input::placeholder {
+  color: var(--a2slack-faint);
+}
+
+.a2slack-you {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 16px;
+  overflow: hidden;
+  border-top: 1px solid var(--a2slack-hairline);
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.a2slack-lag-link {
+  color: var(--a2slack-faint);
+  text-decoration: none;
+}
+
+.a2slack-lag-link:hover {
+  color: var(--a2slack-bright);
+}
+
+.a2slack-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  z-index: 5;
+  width: 7px;
+  cursor: col-resize;
+}
+
+.a2slack-handle-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 3px;
+  width: 1px;
+  background-color: var(--a2slack-hairline);
+  transition: background-color 0.12s;
+}
+
+.a2slack-handle-line:hover {
+  background-color: var(--a2slack-muted);
+}
+
+.a2slack-handle-line[data-active] {
+  background-color: var(--a2slack-accent);
+}
+
+/* ── name gate ───────────────────────────────────────────────────── */
+
+.a2slack-gate {
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--a2slack-bg);
+}
+
+.a2slack-gate-wrapper {
+  position: relative;
+}
+
+.a2slack-gate-box {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  width: 300px;
+  margin: 0;
+  padding: 22px 24px 24px;
+  border: 1px solid var(--a2slack-dim);
+  background-color: var(--a2slack-bg);
+}
+
+.a2slack-gate-title {
+  margin: 0;
+  color: var(--a2slack-bright);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-gate-label {
+  margin: 0;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-gate-input {
+  padding: 4px 0;
+  border: 0 solid var(--a2slack-hairline);
+  border-bottom-width: 1px;
+  border-radius: 0;
+  outline: none;
+  background-color: transparent;
+  color: var(--a2slack-bright);
+  font-family: var(--a2slack-sans);
+  font-size: 16px;
+}
+
+.a2slack-gate-input::placeholder {
+  color: var(--a2slack-faint);
+}
+
+.a2slack-gate-input:focus {
+  border-color: var(--a2slack-bright);
+}
+
+.a2slack-gate-hint {
+  margin: 0;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 11px;
+  letter-spacing: -0.02em;
+}
+
+/* ── dots shadow ─────────────────────────────────────────────────── */
+
+.a2slack-dots {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ── menus ───────────────────────────────────────────────────────── */
+
+.a2slack-menu-trigger {
+  padding: 2px 4px;
+  border-style: none;
+  background-color: transparent;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.a2slack-menu-trigger:hover,
+.a2slack-menu-trigger[data-popup-open] {
+  color: var(--a2slack-bright);
+}
+
+.a2slack-menu-positioner {
+  z-index: 50;
+}
+
+.a2slack-menu-wrapper {
+  position: relative;
+}
+
+.a2slack-menu-popup {
+  position: relative;
+  z-index: 50;
+  min-width: 160px;
+  padding: 6px;
+  border: 1px solid var(--a2slack-dim);
+  outline: none;
+  background-color: var(--a2slack-bg);
+}
+
+.a2slack-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  outline: none;
+  background-color: transparent;
+  color: var(--a2slack-muted);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  letter-spacing: -0.02em;
+  cursor: default;
+}
+
+.a2slack-menu-item[data-highlighted] {
+  background-color: var(--a2slack-shade);
+  color: var(--a2slack-bright);
+}
+
+.a2slack-menu-item[data-danger],
+.a2slack-menu-item[data-danger][data-highlighted] {
+  color: var(--a2slack-red);
+}
+
+.a2slack-menu-separator {
+  height: 1px;
+  margin-block: 4px;
+  background-color: var(--a2slack-hairline);
+}
+
+.a2slack-emoji-row {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.a2slack-menu-item.a2slack-emoji-item {
+  justify-content: center;
+  padding: 6px 0;
+  font-size: 15px;
+  line-height: 1;
+  text-align: center;
+}
+
+/* ── channel ─────────────────────────────────────────────────────── */
+
+.a2slack-split {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+}
+
+.a2slack-view {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.a2slack-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--a2slack-hairline);
+}
+
+.a2slack-header-name {
+  color: var(--a2slack-bright);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-status {
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 11px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-status[data-status='live'] {
+  color: var(--a2slack-green);
+}
+
+.a2slack-status[data-status='connecting'] {
+  color: var(--a2slack-yellow);
+}
+
+/* ── lag ─────────────────────────────────────────────────────────── */
+
+.a2slack-lag {
+  flex-grow: 1;
+  min-height: 0;
+  padding: 12px 20px;
+  overflow: auto;
+  font-family: var(--a2slack-mono);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-lag table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.a2slack-lag th {
+  padding: 6px 12px 6px 0;
+  border-bottom: 1px solid var(--a2slack-hairline);
+  color: var(--a2slack-faint);
+  font-weight: 400;
+  text-align: left;
+}
+
+.a2slack-lag td {
+  padding: 6px 12px 6px 0;
+  color: var(--a2slack-dim);
+  white-space: nowrap;
+}
+
+.a2slack-lag tr[data-behind='yes'] td {
+  color: var(--a2slack-yellow);
+}
+
+.a2slack-lag .a2slack-lag-error {
+  max-width: 28ch;
+  overflow: hidden;
+  color: var(--a2slack-red);
+  text-overflow: ellipsis;
+}
+
+.a2slack-lag-title {
+  margin: 20px 0 6px;
+  color: var(--a2slack-faint);
+}
+
+/* ── feed ────────────────────────────────────────────────────────── */
+
+.a2slack-feed {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  padding-block: 12px;
+  overflow-y: auto;
+}
+
+.a2slack-older {
+  align-self: flex-start;
+  margin-inline: 16px;
+  margin-bottom: 8px;
+  padding: 3px 4px;
+  border-style: none;
+  background-color: transparent;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+  cursor: pointer;
+}
+
+.a2slack-older:hover {
+  background-color: var(--a2slack-shade);
+  color: var(--a2slack-bright);
+}
+
+.a2slack-older:disabled {
+  cursor: pointer;
+}
+
+.a2slack-day {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 14px;
+  padding-inline: 20px;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 11px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-day-line {
+  flex-grow: 1;
+  height: 1px;
+  background-color: var(--a2slack-hairline);
+}
+
+.a2slack-feed-empty {
+  margin: auto;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+}
+
+/* ── message ─────────────────────────────────────────────────────── */
+
+.a2slack-row {
+  position: relative;
+  padding: 2px 20px 2px 68px;
+}
+
+.a2slack-row[data-thread] {
+  padding-inline: 14px;
+}
+
+.a2slack-row[data-spaced] {
+  margin-top: 14px;
+}
+
+.a2slack-row[data-hover] {
+  background-color: var(--a2slack-shade);
+}
+
+.a2slack-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.a2slack-author {
+  color: var(--a2slack-bright);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.a2slack-time {
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 11px;
+  letter-spacing: -0.02em;
+}
+
+/* What triage called a top-level message. */
+.a2slack-badge {
+  padding: 1px 5px;
+  border: 1px solid var(--a2slack-hairline);
+  color: var(--a2slack-muted);
+  font-family: var(--a2slack-mono);
+  font-size: 10px;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.a2slack-text .a2slack-badge {
+  margin-left: 6px;
+  vertical-align: 1px;
+}
+
+.a2slack-gutter-time {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  width: 56px;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 10px;
+  letter-spacing: -0.02em;
+  text-align: right;
+}
+
+.a2slack-text {
+  margin: 0;
+  color: var(--a2slack-dim);
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.a2slack-tombstone {
+  margin: 0;
+  color: var(--a2slack-faint);
+  font-size: 13px;
+  font-style: italic;
+  line-height: 1.5;
+}
+
+.a2slack-edited {
+  margin-left: 6px;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 10px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-actions {
+  position: absolute;
+  top: -12px;
+  right: 20px;
+  z-index: 5;
+  display: flex;
+  border: 1px solid var(--a2slack-hairline);
+  background-color: var(--a2slack-bg);
+}
+
+.a2slack-actions[data-thread] {
+  right: 14px;
+}
+
+.a2slack-action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 26px;
+  padding: 0 6px;
+  border-style: none;
+  background-color: transparent;
+  color: var(--a2slack-muted);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.a2slack-action-button:hover {
+  background-color: var(--a2slack-shade);
+  color: var(--a2slack-bright);
+}
+
+.a2slack-quick-emoji {
+  font-size: 14px;
+}
+
+.a2slack-reactions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.a2slack-chip {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 7px;
+  border: 1px solid var(--a2slack-hairline);
+  background-color: var(--a2slack-shade);
+  color: var(--a2slack-muted);
+  font-family: var(--a2slack-mono);
+  font-size: 11px;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.a2slack-chip:hover {
+  background-color: var(--a2slack-shade-hover);
+}
+
+.a2slack-chip[data-mine] {
+  border-color: var(--a2slack-accent);
+  color: var(--a2slack-accent);
+}
+
+.a2slack-thread-pill {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-top: 4px;
+  padding: 0;
+  border-style: none;
+  background-color: transparent;
+  color: var(--a2slack-accent);
+  font-family: var(--a2slack-mono);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+  text-decoration-line: none;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
+.a2slack-thread-pill:hover {
+  text-decoration-line: underline;
+}
+
+.a2slack-thread-pill-time {
+  color: var(--a2slack-faint);
+}
+
+.a2slack-edit-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.a2slack-edit-area {
+  padding: 8px 10px;
+  border: 1px solid var(--a2slack-hairline);
+  outline: none;
+  background-color: var(--a2slack-bg);
+  color: var(--a2slack-dim);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  line-height: 1.5;
+  resize: none;
+}
+
+.a2slack-edit-area:focus {
+  border-color: var(--a2slack-muted);
+}
+
+.a2slack-edit-hint {
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 11px;
+  letter-spacing: -0.02em;
+}
+
+/* ── composer ────────────────────────────────────────────────────── */
+
+.a2slack-composer {
+  flex-shrink: 0;
+  padding: 4px 20px 16px;
+}
+
+.a2slack-composer[data-compact] {
+  padding: 4px 14px 14px;
+}
+
+.a2slack-composer-box {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--a2slack-hairline);
+  background-color: var(--a2slack-bg);
+}
+
+.a2slack-composer-box:focus-within {
+  border-color: var(--a2slack-muted);
+}
+
+.a2slack-composer-textarea {
+  max-height: 160px;
+  padding: 9px 10px 2px;
+  overflow-y: auto;
+  border-style: none;
+  outline: none;
+  background-color: transparent;
+  color: var(--a2slack-dim);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  letter-spacing: normal;
+  line-height: 1.5;
+  resize: none;
+}
+
+.a2slack-composer-textarea::placeholder {
+  color: var(--a2slack-faint);
+}
+
+.a2slack-composer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+  padding: 0 10px 5px;
+}
+
+.a2slack-typing {
+  overflow: hidden;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 11px;
+  letter-spacing: -0.02em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.a2slack-send {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0;
+  border-style: none;
+  background-color: transparent;
+  color: var(--a2slack-muted);
+  font-family: var(--a2slack-mono);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+  text-decoration-line: none;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
+.a2slack-send:hover {
+  color: var(--a2slack-bright);
+  text-decoration-line: underline;
+}
+
+.a2slack-send:disabled {
+  color: var(--a2slack-faint);
+  text-decoration-line: none;
+  cursor: default;
+}
+
+/* ── thread ──────────────────────────────────────────────────────── */
+
+.a2slack-thread {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 360px;
+  min-height: 0;
+  border-left: 1px solid var(--a2slack-hairline);
+}
+
+.a2slack-thread-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 14px 13px;
+  border-bottom: 1px solid var(--a2slack-hairline);
+}
+
+.a2slack-thread-title {
+  color: var(--a2slack-bright);
+  font-family: var(--a2slack-mono);
+  font-size: 13px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-close {
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  border-style: none;
+  background-color: transparent;
+  color: var(--a2slack-faint);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.a2slack-close:hover {
+  color: var(--a2slack-bright);
+}
+
+.a2slack-thread-scroll {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  padding-block: 8px;
+  overflow-y: auto;
+}
+
+.a2slack-divider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px 2px;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 11px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-divider-line {
+  flex-grow: 1;
+  height: 1px;
+  background-color: var(--a2slack-hairline);
+}
+
+/* ── search ──────────────────────────────────────────────────────── */
+
+/* Over the channel, which stays mounted (and live) underneath. */
+.a2slack-results {
+  position: absolute;
+  inset: 0;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--a2slack-bg);
+}
+
+.a2slack-results-list {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  padding-block: 12px;
+  overflow-y: auto;
+}
+
+.a2slack-results-hint {
+  margin: 0;
+  padding: 2px 20px;
+  color: var(--a2slack-faint);
+  font-family: var(--a2slack-mono);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-result {
+  display: block;
+  padding: 8px 20px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.a2slack-result:hover {
+  background-color: var(--a2slack-shade);
+}
+
+.a2slack-result[data-unread] .a2slack-result-text {
+  color: var(--a2slack-bright);
+}
+
+.a2slack-result-channel {
+  color: var(--a2slack-muted);
+  font-family: var(--a2slack-mono);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+}
+
+.a2slack-result-text {
+  margin: 0;
+  color: var(--a2slack-dim);
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.a2slack-result-text mark {
+  background-color: var(--a2slack-selection);
+  color: var(--a2slack-bright);
+}