@firedrill-tools/slack 0.1.1

package/firedrill/tools/slack/app/site/styles.css

@@ -0,0 +1,2719 @@
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./assets/fonts/lato-latin-400.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./assets/fonts/lato-latin-700.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("./assets/fonts/lato-latin-900.woff2") format("woff2");
+}
+
+/* Aubergine theme tokens */
+:root {
+  color-scheme: light;
+  --shell: #350d36;
+  --sidebar: #3f0e40;
+  --sidebar-hover: rgba(255, 255, 255, 0.1);
+  --sidebar-active: #1164a3;
+  --sidebar-text: rgba(255, 255, 255, 0.72);
+  --sidebar-text-strong: #ffffff;
+  --sidebar-border: rgba(255, 255, 255, 0.1);
+  --badge: #cd2553;
+  --surface: #ffffff;
+  --surface-2: #f8f8f8;
+  --surface-3: #f2f2f2;
+  --hover: rgba(29, 28, 29, 0.04);
+  --border: rgba(29, 28, 29, 0.13);
+  --border-strong: rgba(29, 28, 29, 0.3);
+  --text: #1d1c1d;
+  --text-2: #616061;
+  --text-3: #868686;
+  --link: #1264a3;
+  --link-hover: #0b4c8c;
+  --primary: #007a5a;
+  --primary-hover: #148567;
+  --danger: #e01e5a;
+  --danger-hover: #c41a4f;
+  --focus: #1d9bd1;
+  --reaction-own-bg: #e8f5fa;
+  --reaction-own-border: #1d9bd1;
+  --mention-bg: #e8f5fa;
+  --mention-text: #1264a3;
+  --highlight: #fff8e1;
+  --shadow-1: 0 0 0 1px rgba(29, 28, 29, 0.13), 0 4px 12px 0 rgba(0, 0, 0, 0.12);
+  --shadow-2: 0 0 0 1px rgba(29, 28, 29, 0.13), 0 18px 48px 0 rgba(0, 0, 0, 0.35);
+  --rail-width: 70px;
+  --sidebar-width: 260px;
+  --panel-width: 400px;
+  --topbar-height: 44px;
+  --header-height: 49px;
+  --font: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  height: 100%;
+}
+body {
+  font: 15px/1.46668 var(--font);
+  color: var(--text);
+  background: var(--shell);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+h1,
+h2,
+h3,
+p,
+pre,
+ul,
+dl,
+dd,
+figure {
+  margin: 0;
+}
+ul {
+  padding: 0;
+  list-style: none;
+}
+button,
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+button {
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+  text-align: left;
+}
+button:disabled {
+  cursor: default;
+}
+[hidden] {
+  display: none !important;
+}
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+:is(button, input, textarea, a, [tabindex]):focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 1px;
+}
+.sidebar :is(button, a):focus-visible,
+.rail button:focus-visible,
+.topbar :is(button, input):focus-visible {
+  outline-color: #fff;
+}
+.icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+html[data-busy] {
+  cursor: progress;
+}
+
+/* ---------------------------------------------------------------------------------------------
+   Shell: top bar, rail, workspace panel
+--------------------------------------------------------------------------------------------- */
+.shell {
+  height: 100%;
+  display: grid;
+  grid-template-columns: var(--rail-width) 1fr;
+  grid-template-rows: var(--topbar-height) 1fr;
+  grid-template-areas:
+    "topbar topbar"
+    "rail workspace";
+}
+.topbar {
+  grid-area: topbar;
+  display: grid;
+  grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--rail-width);
+  align-items: center;
+  height: var(--topbar-height);
+  color: #fff;
+  padding: 0 8px 0 0;
+}
+.topbar-start {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+  padding-right: 4px;
+  grid-column: 1;
+  min-width: 0;
+}
+.topbar-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  grid-column: 3;
+}
+.topbar-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.85);
+}
+.topbar-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+}
+.topbar-btn:disabled {
+  color: rgba(255, 255, 255, 0.35);
+}
+#nav-menu {
+  display: none;
+}
+.topbar-search {
+  grid-column: 2;
+  position: relative;
+  height: 26px;
+  width: min(100%, 732px);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 6px;
+  padding: 0 8px;
+  gap: 8px;
+}
+.topbar-search:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.topbar-search:focus-within {
+  background: #fff;
+  color: var(--text);
+  border-color: #fff;
+  box-shadow: 0 0 0 1px #fff;
+}
+.topbar-search .search-glyph {
+  color: inherit;
+  width: 16px;
+  height: 16px;
+  opacity: 0.85;
+  order: 2;
+}
+.topbar-search:focus-within .search-glyph {
+  order: 0;
+}
+.topbar-search input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+  color: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  text-align: center;
+  height: 24px;
+  order: 1;
+}
+.topbar-search:focus-within input,
+.topbar-search.has-value input {
+  text-align: left;
+  font-weight: 400;
+}
+.topbar-search input::placeholder {
+  color: inherit;
+  opacity: 0.85;
+}
+.topbar-search:focus-within input::placeholder {
+  color: var(--text-2);
+}
+.search-clear {
+  order: 3;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+.search-clear .icon {
+  width: 14px;
+  height: 14px;
+}
+
+.rail {
+  grid-area: rail;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px 0 8px;
+  gap: 4px;
+  color: #fff;
+}
+.rail-workspace {
+  width: 36px;
+  height: 36px;
+  margin-bottom: 8px;
+  border-radius: 8px;
+}
+.rail-tile {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  color: var(--sidebar);
+  font-size: 18px;
+  font-weight: 900;
+  box-shadow: 0 0 0 0 transparent;
+  transition: transform 0.1s;
+}
+.rail-workspace:hover .rail-tile {
+  transform: scale(1.06);
+}
+.rail-items {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.rail-item {
+  width: 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  color: rgba(255, 255, 255, 0.85);
+}
+.rail-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.rail-item:hover .rail-icon {
+  background: rgba(255, 255, 255, 0.14);
+}
+.rail-item[aria-current="page"] .rail-icon {
+  background: rgba(255, 255, 255, 0.22);
+  color: #fff;
+}
+.rail-item[aria-current="page"] {
+  color: #fff;
+}
+.rail-label {
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+.rail-bottom {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.rail-plus {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+}
+.rail-plus:hover {
+  background: rgba(255, 255, 255, 0.24);
+}
+.rail-avatar {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+}
+.rail-avatar .avatar {
+  width: 36px;
+  height: 36px;
+  font-size: 16px;
+  border-radius: 8px;
+}
+.rail-avatar .presence {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--shell);
+}
+
+.workspace {
+  grid-area: workspace;
+  display: grid;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
+  min-height: 0;
+  margin: 0 4px 4px 0;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--sidebar-border);
+  background: var(--surface);
+}
+
+/* ---------------------------------------------------------------------------------------------
+   Sidebar
+--------------------------------------------------------------------------------------------- */
+.sidebar {
+  background: var(--sidebar);
+  color: var(--sidebar-text);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid var(--sidebar-border);
+}
+.sidebar-header {
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px 0 16px;
+  border-bottom: 1px solid var(--sidebar-border);
+  flex-shrink: 0;
+}
+.sidebar-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 900;
+  height: 34px;
+  padding: 0 8px 0 8px;
+  margin-left: -8px;
+  border-radius: 6px;
+  min-width: 0;
+}
+.sidebar-title:hover {
+  background: var(--sidebar-hover);
+}
+.sidebar-title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sidebar-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.sidebar-filter,
+.sidebar-compose {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.sidebar-filter:hover {
+  background: var(--sidebar-hover);
+}
+.sidebar-compose {
+  background: rgba(255, 255, 255, 0.14);
+}
+.sidebar-compose:hover {
+  background: rgba(255, 255, 255, 0.24);
+}
+.sidebar-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 0 8px;
+  min-height: 0;
+}
+.sidebar-section {
+  padding: 0 0 8px;
+}
+.section-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  width: calc(100% - 16px);
+  margin: 0 8px;
+  padding: 0 8px;
+  border-radius: 6px;
+  color: var(--sidebar-text);
+  font-size: 15px;
+}
+.section-toggle:hover {
+  background: var(--sidebar-hover);
+  color: #fff;
+}
+.section-chevron {
+  width: 18px;
+  height: 18px;
+  transition: transform 0.15s;
+}
+.section-toggle[aria-expanded="false"] .section-chevron {
+  transform: rotate(-90deg);
+}
+.sidebar-list {
+  display: flex;
+  flex-direction: column;
+}
+.sb-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  width: calc(100% - 16px);
+  margin: 0 8px;
+  padding: 0 8px 0 26px;
+  border-radius: 6px;
+  color: var(--sidebar-text);
+  font-size: 15px;
+  white-space: nowrap;
+}
+.sb-link:hover {
+  background: var(--sidebar-hover);
+  color: #fff;
+}
+.sb-link[aria-current="page"] {
+  background: var(--sidebar-active);
+  color: #fff;
+}
+.sb-link.unread {
+  color: #fff;
+  font-weight: 900;
+}
+.sb-glyph {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+}
+.sb-glyph .icon {
+  width: 16px;
+  height: 16px;
+}
+.sb-glyph .avatar.sm {
+  border-radius: 4px;
+}
+.sb-glyph .presence {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  border: 2px solid var(--sidebar);
+}
+.sb-link[aria-current="page"] .sb-glyph .presence {
+  border-color: var(--sidebar-active);
+}
+.sb-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
+}
+.sb-meta {
+  font-size: 13px;
+  opacity: 0.8;
+}
+.sb-badge {
+  background: var(--badge);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 9px;
+  padding: 0 6px;
+  line-height: 18px;
+}
+.sidebar-add {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  width: calc(100% - 16px);
+  margin: 0 8px;
+  padding: 0 8px 0 26px;
+  border-radius: 6px;
+  color: var(--sidebar-text);
+}
+.sidebar-add:hover {
+  background: var(--sidebar-hover);
+  color: #fff;
+}
+.add-box {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.add-box .icon {
+  width: 14px;
+  height: 14px;
+}
+.sidebar-denied,
+.sidebar-empty,
+.sidebar-note {
+  margin: 4px 16px 8px 34px;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--sidebar-text);
+}
+.sidebar-denied {
+  margin: 0 12px 12px;
+  padding: 12px;
+  border: 1px solid var(--sidebar-border);
+  border-radius: 8px;
+  color: #fff;
+}
+.sidebar-denied strong {
+  display: block;
+  margin-bottom: 4px;
+}
+.sidebar-footer {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.5);
+  border-top: 1px solid var(--sidebar-border);
+}
+.sk-side {
+  height: 14px;
+  margin: 7px 16px 7px 34px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.12);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+.presence {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.72);
+}
+.presence.active {
+  background: #2bac76;
+  border-color: #2bac76;
+  color: #2bac76;
+}
+
+/* ---------------------------------------------------------------------------------------------
+   Main pane
+--------------------------------------------------------------------------------------------- */
+.pane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: var(--surface);
+}
+.pane-header {
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 16px 0 20px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.pane-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.pane-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 30px;
+  padding: 0 8px;
+  margin-left: -8px;
+  border-radius: 6px;
+  font-size: 18px;
+  font-weight: 900;
+  color: var(--text);
+  min-width: 0;
+}
+.pane-title:hover {
+  background: var(--hover);
+}
+.pane-title-glyph {
+  display: inline-flex;
+  align-items: center;
+}
+.pane-title-glyph .icon {
+  width: 18px;
+  height: 18px;
+}
+.pane-title-glyph .avatar {
+  margin-right: 6px;
+}
+.pane-title-glyph .presence {
+  position: absolute;
+  right: 2px;
+  bottom: -2px;
+  border: 2px solid #fff;
+  color: var(--text-2);
+}
+.pane-title-glyph.with-avatar {
+  position: relative;
+}
+.pane-title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pane-title-chevron {
+  width: 18px;
+  height: 18px;
+  color: var(--text-2);
+}
+.pane-topic {
+  font-size: 13px;
+  color: var(--text-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  height: 26px;
+  padding: 0 6px;
+  border-radius: 4px;
+}
+.pane-topic:hover {
+  background: var(--hover);
+  color: var(--text);
+}
+.pane-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.members-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px 0 4px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-2);
+  font-size: 13px;
+  font-weight: 700;
+}
+.members-pill:hover {
+  background: var(--hover);
+  color: var(--text);
+}
+.members-stack {
+  display: inline-flex;
+}
+.members-stack .avatar {
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  border-radius: 4px;
+  border: 1px solid #fff;
+  margin-right: -6px;
+}
+.members-stack .avatar:last-child {
+  margin-right: 0;
+}
+.icon-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-2);
+}
+.icon-btn:hover:not(:disabled) {
+  background: var(--hover);
+  color: var(--text);
+}
+.icon-btn:disabled {
+  opacity: 0.4;
+}
+.pane-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 38px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.pane-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 38px;
+  padding: 0 8px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-2);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.pane-tab .icon {
+  width: 16px;
+  height: 16px;
+}
+.pane-tab:hover {
+  color: var(--text);
+}
+.pane-tab[aria-current="page"] {
+  color: var(--text);
+  border-bottom-color: var(--text);
+}
+.tab-count {
+  font-size: 12px;
+  color: var(--text-2);
+  font-weight: 400;
+}
+.tab-count:empty {
+  display: none;
+}
+.pane-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.message-scroll {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.message-list {
+  margin-top: auto;
+  padding: 8px 0 12px;
+}
+.pane-footer {
+  flex-shrink: 0;
+  padding: 0 20px 24px;
+}
+
+/* Day divider */
+.day-divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  margin: 12px 20px 8px;
+}
+.day-divider::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  border-top: 1px solid var(--border);
+}
+.day-pill {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 28px;
+  padding: 0 8px 0 12px;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  background: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+.day-pill .icon {
+  width: 16px;
+  height: 16px;
+  color: var(--text-2);
+}
+.day-pill:hover {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* Messages */
+.msg {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  padding: 8px 20px;
+}
+.msg:hover,
+.msg:focus-within {
+  background: var(--surface-2);
+}
+.msg.continued {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.msg.highlight {
+  background: var(--highlight);
+}
+.msg-gutter {
+  width: 36px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.msg-gutter .avatar {
+  cursor: pointer;
+}
+.msg-hover-time {
+  font-size: 12px;
+  color: var(--text-2);
+  line-height: 22px;
+  visibility: hidden;
+  white-space: nowrap;
+}
+.msg.continued:hover .msg-hover-time,
+.msg.continued:focus-within .msg-hover-time {
+  visibility: visible;
+}
+.msg-main {
+  flex: 1;
+  min-width: 0;
+}
+.msg-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  line-height: 22px;
+}
+.msg-author {
+  font-weight: 900;
+  color: var(--text);
+  border-radius: 4px;
+}
+.msg-author:hover {
+  text-decoration: underline;
+  color: var(--link-hover);
+}
+.app-badge {
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 14px;
+  padding: 0 4px;
+  border-radius: 2px;
+  background: var(--border);
+  color: var(--text-2);
+  text-transform: uppercase;
+  align-self: center;
+}
+.msg-time {
+  font-size: 12px;
+  color: var(--text-2);
+  border-radius: 4px;
+}
+.msg-time:hover {
+  text-decoration: underline;
+}
+.msg-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 22px;
+}
+.msg-edited {
+  font-size: 12px;
+  color: var(--text-2);
+  margin-left: 4px;
+}
+.msg-broadcast {
+  font-size: 13px;
+  color: var(--text-2);
+  line-height: 20px;
+}
+.msg.system .msg-text,
+.msg.system .msg-head {
+  color: var(--text-2);
+  font-size: 15px;
+}
+.msg.system .msg-gutter {
+  visibility: hidden;
+}
+.msg.tombstone .msg-text {
+  font-style: italic;
+  color: var(--text-2);
+}
+.msg-code {
+  font-family: var(--mono);
+  font-size: 12px;
+  padding: 2px 3px 1px;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--surface-2);
+  color: var(--danger);
+}
+.msg-pre {
+  display: block;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.5;
+  padding: 8px;
+  margin: 4px 0;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--surface-2);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.mention,
+.channel-link {
+  display: inline;
+  padding: 0 2px;
+  border-radius: 3px;
+  background: var(--mention-bg);
+  color: var(--mention-text);
+  font: inherit;
+  line-height: inherit;
+}
+.mention:hover,
+.channel-link:hover {
+  background: #d3e9f5;
+  text-decoration: underline;
+}
+.msg-link {
+  color: var(--link);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+.msg-link:hover {
+  text-decoration: underline;
+}
+.msg-emoji {
+  font-size: 1.15em;
+  line-height: 1;
+  vertical-align: -0.1em;
+}
+.msg-text.emoji-only {
+  font-size: 32px;
+  line-height: 40px;
+}
+
+.msg-reactions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+.reaction {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 8px 0 6px;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  background: var(--hover);
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-2);
+}
+.reaction:hover {
+  border-color: var(--border-strong);
+  background: #fff;
+}
+.reaction[aria-pressed="true"] {
+  background: var(--reaction-own-bg);
+  border-color: var(--reaction-own-border);
+  color: var(--link);
+}
+.reaction-emoji {
+  font-size: 15px;
+  line-height: 1;
+}
+.reaction-add {
+  width: 30px;
+  justify-content: center;
+  padding: 0;
+  color: var(--text-2);
+}
+.reaction-add .icon {
+  width: 16px;
+  height: 16px;
+}
+
+.msg-thread {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 6px -6px 0;
+  padding: 4px 6px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  width: fit-content;
+  max-width: 100%;
+}
+.msg-thread:hover {
+  background: #fff;
+  border-color: var(--border);
+}
+.thread-avatars {
+  display: inline-flex;
+  gap: 2px;
+}
+.thread-avatars .avatar {
+  width: 24px;
+  height: 24px;
+  font-size: 11px;
+  border-radius: 4px;
+}
+.thread-link {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--link);
+}
+.msg-thread:hover .thread-link {
+  text-decoration: underline;
+}
+.thread-last {
+  font-size: 13px;
+  color: var(--text-2);
+}
+.thread-view {
+  display: none;
+  font-size: 13px;
+  color: var(--text-2);
+  margin-left: auto;
+  align-items: center;
+}
+.msg-thread:hover .thread-last {
+  display: none;
+}
+.msg-thread:hover .thread-view {
+  display: inline-flex;
+}
+
+/* Hover toolbar */
+.msg-actions {
+  position: absolute;
+  top: -16px;
+  right: 20px;
+  display: none;
+  align-items: center;
+  gap: 0;
+  padding: 2px;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  z-index: 2;
+}
+.msg:hover .msg-actions,
+.msg:focus-within .msg-actions,
+.msg.menu-open .msg-actions {
+  display: inline-flex;
+}
+.msg-actions .icon-btn,
+.msg-actions .quick-reaction {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+}
+.quick-reaction {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+}
+.quick-reaction:hover {
+  background: var(--hover);
+}
+
+/* Load older / intro / states */
+.load-more {
+  display: block;
+  margin: 8px auto 4px;
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  background: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--link);
+}
+.load-more:hover {
+  background: var(--surface-2);
+}
+.channel-intro {
+  padding: 24px 20px 16px;
+}
+.intro-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  background: var(--surface-3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+.intro-icon .icon {
+  width: 28px;
+  height: 28px;
+}
+.intro-title {
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1.3;
+  margin-bottom: 8px;
+  overflow-wrap: anywhere;
+}
+.intro-text {
+  color: var(--text-2);
+  margin-bottom: 12px;
+}
+.intro-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.state-card {
+  margin: 24px 20px;
+  padding: 24px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  text-align: center;
+  max-width: 560px;
+  align-self: center;
+  width: calc(100% - 40px);
+}
+.state-card.error {
+  border-color: rgba(224, 30, 90, 0.4);
+  background: #fff6f8;
+}
+.state-title {
+  font-size: 18px;
+  font-weight: 900;
+  margin-bottom: 8px;
+}
+.state-text {
+  color: var(--text-2);
+  margin-bottom: 12px;
+}
+.state-text:last-child {
+  margin-bottom: 0;
+}
+.state-actions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+.skeleton {
+  padding: 12px 20px;
+}
+.sk-row {
+  display: flex;
+  gap: 8px;
+  padding: 8px 0;
+}
+.sk-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: var(--surface-3);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.sk-lines {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 4px;
+}
+.sk-line {
+  height: 12px;
+  border-radius: 6px;
+  background: var(--surface-3);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.sk-line.short {
+  width: 30%;
+}
+.sk-line.medium {
+  width: 60%;
+}
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Composer */
+.composer {
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.composer:focus-within {
+  border-color: var(--text-2);
+  box-shadow: 0 0 0 1px rgba(29, 28, 29, 0.12);
+}
+.composer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px;
+  background: var(--surface-2);
+}
+.composer.hide-toolbar .composer-toolbar {
+  display: none;
+}
+.fmt-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-2);
+}
+.fmt-btn .icon {
+  width: 16px;
+  height: 16px;
+}
+.fmt-btn:hover:not(:disabled) {
+  background: var(--hover);
+  color: var(--text);
+}
+.fmt-btn[aria-pressed="true"] {
+  background: rgba(29, 28, 29, 0.08);
+  color: var(--text);
+}
+.fmt-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--border);
+  margin: 0 4px;
+}
+.composer textarea {
+  border: 0;
+  outline: none;
+  resize: none;
+  padding: 10px 12px 6px;
+  min-height: 40px;
+  max-height: 40vh;
+  font-size: 15px;
+  line-height: 22px;
+  color: var(--text);
+  background: transparent;
+}
+.composer textarea::placeholder {
+  color: var(--text-2);
+}
+.composer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px 6px 6px 8px;
+}
+.composer-actions-start,
+.composer-actions-end {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.composer-plus {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--hover);
+  color: var(--text-2);
+  margin-right: 4px;
+}
+.composer-plus:hover {
+  background: rgba(29, 28, 29, 0.1);
+  color: var(--text);
+}
+.send-btn {
+  width: 32px;
+  height: 28px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--primary);
+  color: #fff;
+}
+.send-btn .icon {
+  width: 18px;
+  height: 18px;
+}
+.send-btn:hover:not(:disabled) {
+  background: var(--primary-hover);
+}
+.send-btn:disabled {
+  background: transparent;
+  color: rgba(29, 28, 29, 0.3);
+}
+.composer.disabled {
+  opacity: 0.6;
+}
+.composer-note {
+  margin: 6px 4px 0;
+  font-size: 13px;
+  color: var(--danger);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.composer-note .link-btn {
+  color: var(--link);
+  font-weight: 700;
+}
+.composer-hint {
+  margin: 4px 8px 0;
+  font-size: 12px;
+  color: var(--text-2);
+  text-align: right;
+}
+.composer-banner {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--surface-2);
+  text-align: center;
+}
+.composer-banner p {
+  color: var(--text-2);
+  margin-bottom: 12px;
+}
+.composer-banner p:last-child {
+  margin-bottom: 0;
+}
+.composer-banner .banner-title {
+  font-weight: 900;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+.composer-banner .banner-actions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+.join-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface-2);
+}
+.join-bar .join-title {
+  font-size: 18px;
+  font-weight: 900;
+}
+.join-bar .join-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 4px;
+  border: 1px solid var(--border-strong);
+  background: #fff;
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--text);
+  white-space: nowrap;
+}
+.btn .icon {
+  width: 16px;
+  height: 16px;
+}
+.btn:hover:not(:disabled) {
+  background: var(--surface-2);
+}
+.btn.primary {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #fff;
+}
+.btn.primary:hover:not(:disabled) {
+  background: var(--primary-hover);
+}
+.btn.danger {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: #fff;
+}
+.btn.danger:hover:not(:disabled) {
+  background: var(--danger-hover);
+}
+.btn.danger-outline {
+  color: var(--danger);
+}
+.btn.small {
+  height: 28px;
+  font-size: 13px;
+  padding: 0 10px;
+}
+.btn:disabled {
+  opacity: 0.5;
+}
+.btn.joined {
+  color: var(--primary);
+  border-color: transparent;
+  background: transparent;
+  cursor: default;
+  opacity: 1;
+}
+.link-btn {
+  color: var(--link);
+  font: inherit;
+  padding: 0;
+}
+.link-btn:hover {
+  text-decoration: underline;
+}
+
+/* Avatars */
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #fff;
+  font-weight: 900;
+  border-radius: 8px;
+  width: 36px;
+  height: 36px;
+  font-size: 16px;
+  line-height: 1;
+  user-select: none;
+}
+.avatar.sm {
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  border-radius: 4px;
+}
+.avatar.md {
+  width: 24px;
+  height: 24px;
+  font-size: 11px;
+  border-radius: 6px;
+}
+.avatar.lg {
+  width: 36px;
+  height: 36px;
+  font-size: 16px;
+  border-radius: 8px;
+}
+.avatar.xl {
+  width: 72px;
+  height: 72px;
+  font-size: 32px;
+  border-radius: 12px;
+}
+.avatar.xxl {
+  width: 100%;
+  aspect-ratio: 1;
+  height: auto;
+  font-size: 96px;
+  border-radius: 12px;
+}
+.avatar.hexa {
+  border-radius: 8px;
+}
+
+/* ---------------------------------------------------------------------------------------------
+   Right side panel (thread / profile)
+--------------------------------------------------------------------------------------------- */
+.side-panel {
+  width: var(--panel-width);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: #fff;
+}
+.side-header {
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px 0 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.side-title-wrap {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+.side-title {
+  font-size: 18px;
+  font-weight: 900;
+}
+.side-subtitle {
+  font-size: 13px;
+  color: var(--text-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.side-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.thread-messages {
+  padding: 8px 0;
+}
+.thread-messages .msg {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.thread-messages .msg-actions {
+  right: 16px;
+}
+.replies-divider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: 13px;
+  color: var(--text-2);
+}
+.replies-divider::after {
+  content: "";
+  flex: 1;
+  border-top: 1px solid var(--border);
+}
+.thread-composer {
+  padding: 0 16px 16px;
+  margin-top: auto;
+}
+.thread-composer .composer textarea {
+  min-height: 36px;
+}
+.broadcast-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-2);
+  padding: 0 8px 6px;
+}
+.broadcast-check input {
+  margin: 0;
+  accent-color: var(--primary);
+}
+
+/* Profile panel */
+.profile {
+  padding: 16px;
+}
+.profile-avatar-wrap {
+  padding: 0 16px 16px;
+}
+.profile-name {
+  font-size: 22px;
+  font-weight: 900;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow-wrap: anywhere;
+}
+.profile-handle,
+.profile-title {
+  color: var(--text-2);
+  font-size: 15px;
+}
+.profile-status {
+  margin-top: 8px;
+  font-size: 15px;
+}
+.profile-time {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  color: var(--text-2);
+  font-size: 15px;
+}
+.profile-time .icon {
+  width: 16px;
+  height: 16px;
+}
+.profile-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+.profile-section {
+  border-top: 1px solid var(--border);
+  margin-top: 16px;
+  padding-top: 16px;
+}
+.profile-section h3 {
+  font-size: 15px;
+  font-weight: 900;
+  margin-bottom: 12px;
+}
+.profile-section dl {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.profile-section dt {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-2);
+}
+.profile-section dd {
+  color: var(--link);
+  overflow-wrap: anywhere;
+}
+.profile-section dd.plain {
+  color: var(--text);
+}
+.deactivated-badge {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+/* ---------------------------------------------------------------------------------------------
+   Pins, search, browse views
+--------------------------------------------------------------------------------------------- */
+.view-scroll {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+.pins-list {
+  padding: 12px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pin-item {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.pin-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px 0;
+  font-size: 12px;
+  color: var(--text-2);
+}
+.pin-meta .icon {
+  width: 14px;
+  height: 14px;
+}
+.pin-item .msg {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.pin-item .msg-actions {
+  right: 12px;
+}
+.pin-actions {
+  display: flex;
+  gap: 8px;
+  padding: 0 12px 12px 56px;
+}
+
+.results-header {
+  padding: 16px 20px 0;
+  border-bottom: 1px solid var(--border);
+}
+.results-query {
+  font-size: 22px;
+  font-weight: 900;
+  overflow-wrap: anywhere;
+  margin-bottom: 8px;
+}
+.results-tabs {
+  display: flex;
+  gap: 4px;
+}
+.results-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 38px;
+  padding: 0 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-2);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.results-tab[aria-current="page"] {
+  color: var(--text);
+  border-bottom-color: var(--text);
+}
+.results-tab .count {
+  font-size: 12px;
+  font-weight: 700;
+  padding: 0 6px;
+  border-radius: 9px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  line-height: 18px;
+}
+.results-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 0 8px 0 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 14px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+  background: #fff;
+}
+.filter-chip .icon {
+  width: 16px;
+  height: 16px;
+  color: var(--text-2);
+}
+.filter-chip:hover {
+  background: var(--surface-2);
+}
+.filter-chip[aria-pressed="true"] {
+  background: var(--sidebar-active);
+  border-color: var(--sidebar-active);
+  color: #fff;
+}
+.filter-chip[aria-pressed="true"] .icon {
+  color: #fff;
+}
+.results-sort {
+  margin-left: auto;
+  font-size: 13px;
+  color: var(--text-2);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.result {
+  display: block;
+  width: 100%;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.result:hover {
+  background: var(--surface-2);
+}
+.result-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+  font-size: 13px;
+  color: var(--text-2);
+  flex-wrap: wrap;
+}
+.result-channel {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-weight: 700;
+  color: var(--text);
+}
+.result-channel .icon {
+  width: 14px;
+  height: 14px;
+}
+.result-body {
+  display: flex;
+  gap: 8px;
+}
+.result-author {
+  font-weight: 900;
+  color: var(--text);
+  margin-right: 6px;
+}
+.result-text {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  line-height: 22px;
+}
+.result-text mark {
+  background: #fff3b0;
+  color: inherit;
+  font-weight: 700;
+}
+.results-pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  font-size: 13px;
+  color: var(--text-2);
+}
+.pager-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-2);
+}
+.pager-btn:hover:not(:disabled) {
+  background: var(--surface-2);
+}
+.pager-btn:disabled {
+  opacity: 0.4;
+}
+.results-note {
+  padding: 12px 20px;
+  font-size: 13px;
+  color: var(--text-2);
+}
+
+.browse-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 20px 12px;
+}
+.browse-header h2 {
+  font-size: 22px;
+  font-weight: 900;
+}
+.browse-tools {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 20px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+.browse-tools .field {
+  flex: 1;
+  min-width: 200px;
+}
+.browse-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.browse-row:hover {
+  background: var(--surface-2);
+}
+.browse-main {
+  flex: 1;
+  min-width: 0;
+}
+.browse-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-weight: 900;
+  color: var(--text);
+}
+.browse-name .icon {
+  width: 16px;
+  height: 16px;
+}
+.browse-name:hover {
+  text-decoration: underline;
+}
+.browse-meta {
+  font-size: 13px;
+  color: var(--text-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.browse-meta .dot::before {
+  content: "·";
+  margin: 0 4px;
+}
+.archived-badge {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  margin-left: 6px;
+  vertical-align: middle;
+}
+.browse-join {
+  opacity: 0;
+}
+.browse-row:hover .browse-join,
+.browse-row:focus-within .browse-join,
+.browse-join.joined {
+  opacity: 1;
+}
+
+/* ---------------------------------------------------------------------------------------------
+   Menus, emoji picker, tooltips
+--------------------------------------------------------------------------------------------- */
+.menu {
+  position: fixed;
+  z-index: 40;
+  min-width: 220px;
+  max-width: min(360px, calc(100vw - 16px));
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
+  padding: 12px 0;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: var(--shadow-1);
+  color: var(--text);
+}
+.menu-header {
+  padding: 4px 24px 8px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-2);
+}
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 28px;
+  padding: 0 24px;
+  color: var(--text);
+  font-size: 15px;
+  white-space: nowrap;
+}
+.menu-item:hover:not(:disabled),
+.menu-item:focus-visible {
+  background: var(--sidebar-active);
+  color: #fff;
+  outline: none;
+}
+.menu-item.danger {
+  color: var(--danger);
+}
+.menu-item.danger:hover:not(:disabled),
+.menu-item.danger:focus-visible {
+  background: var(--danger);
+  color: #fff;
+}
+.menu-item:disabled {
+  color: var(--text-3);
+}
+.menu-icon {
+  width: 18px;
+  height: 18px;
+  color: inherit;
+}
+.menu-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.menu-detail {
+  font-size: 13px;
+  color: var(--text-2);
+}
+.menu-item:hover .menu-detail,
+.menu-item:focus-visible .menu-detail {
+  color: rgba(255, 255, 255, 0.8);
+}
+.menu-divider {
+  border-top: 1px solid var(--border);
+  margin: 8px 0;
+}
+.menu-note {
+  padding: 4px 24px 0;
+  font-size: 13px;
+  color: var(--text-2);
+  white-space: normal;
+}
+.menu .avatar.sm {
+  border-radius: 4px;
+}
+
+.emoji-picker {
+  width: 300px;
+  padding: 8px;
+}
+.emoji-search {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  margin-bottom: 8px;
+  outline: none;
+}
+.emoji-search:focus {
+  border-color: var(--focus);
+  box-shadow: 0 0 0 3px rgba(29, 155, 209, 0.3);
+}
+.emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 2px;
+}
+.emoji-cell {
+  height: 34px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  line-height: 1;
+}
+.emoji-cell:hover,
+.emoji-cell:focus-visible {
+  background: var(--surface-3);
+}
+.emoji-custom {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+  align-items: center;
+}
+.emoji-custom input {
+  flex: 1;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  outline: none;
+  font-size: 13px;
+}
+.emoji-empty {
+  padding: 12px;
+  text-align: center;
+  color: var(--text-2);
+  font-size: 13px;
+}
+
+/* ---------------------------------------------------------------------------------------------
+   Modals
+--------------------------------------------------------------------------------------------- */
+.modal {
+  border: 0;
+  padding: 0;
+  border-radius: 12px;
+  width: min(520px, calc(100vw - 32px));
+  max-height: calc(100vh - 48px);
+  box-shadow: var(--shadow-2);
+  color: var(--text);
+  overflow: visible;
+}
+.modal::backdrop {
+  background: rgba(29, 28, 29, 0.6);
+}
+.modal form {
+  display: contents;
+}
+.modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 28px 12px;
+}
+.modal-header h2 {
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1.3;
+}
+.modal-subtitle {
+  font-size: 15px;
+  color: var(--text-2);
+  margin-top: 2px;
+}
+.modal-close {
+  margin: -4px -8px 0 0;
+}
+.modal-body {
+  padding: 4px 28px 24px;
+  overflow-y: auto;
+  max-height: calc(100vh - 220px);
+}
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 28px 24px;
+}
+.modal-error {
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--danger);
+  font-weight: 700;
+}
+.field-label {
+  display: block;
+  font-size: 15px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+.field {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  border: 1px solid var(--border-strong);
+  border-radius: 4px;
+  padding: 0 12px;
+  gap: 8px;
+  background: #fff;
+}
+.field:focus-within {
+  border-color: var(--focus);
+  box-shadow: 0 0 0 4px rgba(29, 155, 209, 0.3);
+}
+.field input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-size: 15px;
+}
+.field-prefix {
+  color: var(--text-2);
+  display: inline-flex;
+}
+.field-prefix .icon {
+  width: 18px;
+  height: 18px;
+}
+.field-counter {
+  font-size: 13px;
+  color: var(--text-2);
+}
+.field-hint {
+  font-size: 13px;
+  color: var(--text-2);
+  margin-top: 8px;
+}
+.field-textarea {
+  width: 100%;
+  border: 1px solid var(--border-strong);
+  border-radius: 4px;
+  padding: 10px 12px;
+  font-size: 15px;
+  resize: vertical;
+  outline: none;
+}
+.field-textarea:focus {
+  border-color: var(--focus);
+  box-shadow: 0 0 0 4px rgba(29, 155, 209, 0.3);
+}
+.visibility {
+  border: 0;
+  padding: 0;
+  margin: 20px 0 0;
+}
+.radio {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 6px 0;
+  cursor: pointer;
+}
+.radio input {
+  margin: 4px 0 0;
+  accent-color: var(--sidebar-active);
+}
+.radio small {
+  color: var(--text-2);
+}
+.confirm-preview {
+  margin-top: 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px 0;
+}
+.confirm-preview .msg {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.confirm-preview .msg:hover {
+  background: transparent;
+}
+.confirm-preview .msg-actions {
+  display: none !important;
+}
+
+.people-selected {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+.people-selected:empty {
+  display: none;
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 4px 0 4px;
+  border-radius: 4px;
+  background: var(--surface-3);
+  font-size: 13px;
+  font-weight: 700;
+}
+.chip .avatar.sm {
+  border-radius: 3px;
+}
+.chip-remove {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: var(--text-2);
+}
+.chip-remove .icon {
+  width: 14px;
+  height: 14px;
+}
+.chip-remove:hover {
+  background: rgba(29, 28, 29, 0.1);
+}
+.people-list {
+  margin-top: 12px;
+  max-height: 280px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.person-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 12px;
+}
+.person-row:hover:not(:disabled),
+.person-row[aria-selected="true"] {
+  background: var(--surface-2);
+}
+.person-row:disabled {
+  opacity: 0.5;
+}
+.person-name {
+  font-weight: 700;
+}
+.person-handle {
+  color: var(--text-2);
+  font-size: 13px;
+  margin-left: 6px;
+}
+.person-title {
+  font-size: 13px;
+  color: var(--text-2);
+}
+.person-check {
+  margin-left: auto;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--border-strong);
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.person-row[aria-selected="true"] .person-check {
+  background: var(--sidebar-active);
+  border-color: var(--sidebar-active);
+}
+.person-check .icon {
+  width: 14px;
+  height: 14px;
+}
+.people-empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--text-2);
+  font-size: 13px;
+}
+
+.details-title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.details-title .icon {
+  width: 20px;
+  height: 20px;
+}
+.modal-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 0 28px;
+  border-bottom: 1px solid var(--border);
+}
+.modal-tab {
+  height: 38px;
+  padding: 0 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-2);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.modal-tab[aria-current="page"] {
+  color: var(--text);
+  border-bottom-color: var(--text);
+}
+.details-body {
+  padding: 16px 28px 24px;
+  min-height: 240px;
+}
+.detail-block {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 0;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+.detail-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+}
+.detail-row + .detail-row {
+  border-top: 1px solid var(--border);
+}
+.detail-label {
+  font-weight: 900;
+  font-size: 15px;
+  margin-bottom: 2px;
+}
+.detail-value {
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+.detail-value.muted {
+  color: var(--text-2);
+}
+.detail-edit {
+  color: var(--link);
+  font-weight: 700;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+.detail-edit:hover {
+  text-decoration: underline;
+}
+.detail-footer {
+  font-size: 12px;
+  color: var(--text-3);
+  margin-top: 8px;
+}
+.member-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  width: 100%;
+  border-radius: 6px;
+}
+.member-row:hover {
+  background: var(--surface-2);
+}
+.member-main {
+  min-width: 0;
+  flex: 1;
+}
+.member-name {
+  font-weight: 900;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.member-sub {
+  font-size: 13px;
+  color: var(--text-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.members-toolbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.members-toolbar .field {
+  flex: 1;
+  height: 36px;
+}
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+}
+.settings-row + .settings-row {
+  border-top: 1px solid var(--border);
+}
+
+.about-body {
+  padding-top: 8px;
+}
+.about-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.about-wordmark {
+  height: 24px;
+  width: auto;
+}
+.about-list {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 16px;
+  font-size: 15px;
+  margin-bottom: 12px;
+}
+.about-list dt {
+  font-weight: 700;
+  color: var(--text-2);
+}
+.about-list dd {
+  overflow-wrap: anywhere;
+}
+
+/* Toast */
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  z-index: 50;
+  background: var(--text);
+  color: #fff;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  max-width: min(600px, calc(100vw - 32px));
+}
+.toast[data-error="true"] {
+  background: var(--danger);
+}
+
+/* ---------------------------------------------------------------------------------------------
+   Responsive
+--------------------------------------------------------------------------------------------- */
+@media (max-width: 1100px) {
+  :root {
+    --panel-width: 340px;
+  }
+}
+@media (max-width: 900px) {
+  .side-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: min(var(--panel-width), 100%);
+    z-index: 20;
+    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
+  }
+  .workspace {
+    position: relative;
+  }
+}
+@media (max-width: 768px) {
+  :root {
+    --rail-width: 0px;
+    --sidebar-width: 280px;
+  }
+  .rail {
+    display: none;
+  }
+  .shell {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "topbar"
+      "workspace";
+  }
+  .topbar {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    padding: 0 8px;
+  }
+  .topbar-start {
+    padding-right: 8px;
+  }
+  #nav-menu {
+    display: inline-flex;
+  }
+  #nav-back,
+  #nav-forward,
+  #nav-history {
+    display: none;
+  }
+  .workspace {
+    grid-template-columns: minmax(0, 1fr);
+    margin: 0;
+    border-radius: 0;
+    border: 0;
+  }
+  .sidebar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--sidebar-width);
+    z-index: 30;
+    transform: translateX(-100%);
+    transition: transform 0.2s;
+    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.3);
+  }
+  .shell.sidebar-open .sidebar {
+    transform: translateX(0);
+  }
+  .side-panel {
+    width: 100%;
+  }
+  .pane-header {
+    padding: 0 8px 0 12px;
+  }
+  .pane-footer {
+    padding: 0 12px 12px;
+  }
+  .msg {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  .msg-actions {
+    right: 12px;
+  }
+  .day-divider {
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+  .members-count {
+    display: none;
+  }
+  .pane-topic {
+    display: none;
+  }
+  .modal-header,
+  .modal-body,
+  .modal-footer,
+  .modal-tabs,
+  .details-body {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .state-card {
+    margin: 16px 12px;
+    width: calc(100% - 24px);
+    padding: 16px;
+  }
+}