/* ================================================
   Stitch Design System
   Light-first theme with dark mode alternate
   ================================================ */

/* ========== Design Tokens - Light Mode (default) ========== */
:root, [data-theme="light"] {
  --background: #f7f9fb;
  --foreground: #191c1e;
  --card: #ffffff;
  --card-foreground: #191c1e;
  --primary: #000000;
  --primary-foreground: #ffffff;
  --secondary: #f2f4f6;
  --secondary-foreground: #191c1e;
  --muted: #eceef0;
  --muted-foreground: #45464d;
  --accent: #e6e8ea;
  --accent-foreground: #191c1e;
  --destructive: #ba1a1a;
  --destructive-foreground: #ffffff;
  --border: #c6c6cd;
  --input: #eceef0;
  --ring: #7a003c;
  --radius: 0.125rem;
  --surface-tint: #7a003c;
  --accent-blue: #7a003c;
  --accent-blue-hover: #5c002d;
  --online: #22c55e;
  --away: #eab308;
  --offline: #76777d;
  --sidebar-bg: #f1f0f1;
  --sidebar-hover: rgba(122, 0, 60, 0.08);
  --sidebar-active: rgba(122, 0, 60, 0.12);
  --message-hover: #f4f2f3;
  --success: #16a34a;
  --success-foreground: #ffffff;
  --success-muted: rgba(22, 163, 74, 0.12);
  --warning: #a16207;
  --warning-foreground: #ffffff;
  --warning-muted: rgba(234, 179, 8, 0.12);
  --danger: #b91c1c;
  --danger-foreground: #ffffff;
  --danger-muted: rgba(185, 28, 28, 0.1);
  --cal-event-bg: #7a003c;
  --cal-event-fg: #ffffff;
  --cal-event-muted: rgba(122, 0, 60, 0.15);
  --cal-event-muted-fg: #7a003c;
  --cal-today-bg: #f7e9f0;
  --cal-other-bg: #f0eef0;
}

/* ========== Dark Mode ========== */
[data-theme="dark"] {
  --background: #121212;
  --foreground: #e8e6e7;
  --card: #1e1e1e;
  --card-foreground: #e8e6e7;
  --primary: #e8e6e7;
  --primary-foreground: #1a1a1a;
  --secondary: #242424;
  --secondary-foreground: #e8e6e7;
  --muted: #242424;
  --muted-foreground: #9a9498;
  --accent: #2c2c2c;
  --accent-foreground: #e8e6e7;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #383838;
  --input: #2c2c2c;
  --ring: #e84a82;
  --surface-tint: #e84a82;
  --accent-blue: #e84a82;
  --accent-blue-hover: #f06a9b;
  --sidebar-bg: #181818;
  --sidebar-hover: rgba(122, 0, 60, 0.22);
  --sidebar-active: rgba(122, 0, 60, 0.32);
  --message-hover: #1a1a1a;
  --success: #4ade80;
  --success-foreground: #052e16;
  --success-muted: rgba(74, 222, 128, 0.12);
  --warning: #facc15;
  --warning-foreground: #422006;
  --warning-muted: rgba(250, 204, 21, 0.12);
  --danger: #f87171;
  --danger-foreground: #450a0a;
  --danger-muted: rgba(248, 113, 113, 0.1);
  --cal-event-bg: #c2185b;
  --cal-event-fg: #ffffff;
  --cal-event-muted: rgba(232, 74, 130, 0.25);
  --cal-event-muted-fg: #e84a82;
  --cal-today-bg: rgba(122, 0, 60, 0.18);
  --cal-other-bg: #181818;
}

/* ========== Reset & Base ========== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--background);
  color: var(--foreground);
  height: 100vh;
  overflow: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 800;
}

/* ========== Login Page ========== */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--background);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(55, 85, 195, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(55, 85, 195, 0.03) 0%, transparent 50%);
}

[data-theme="dark"] .login-page {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(96, 124, 236, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(96, 124, 236, 0.04) 0%, transparent 50%);
}

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 400px;
  padding: 3rem 2.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(25, 28, 30, 0.06);
}

[data-theme="dark"] .login-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.login-card h1 {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  margin-bottom: 0.25rem;
  color: var(--foreground);
}

.login-card p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 2rem;
}

.login-page {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--foreground);
}

.login-card h1 {
  font-family: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
}

.login-alert {
  width: 100%;
  margin-bottom: 1rem;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.login-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

.login-submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
  padding: 0.6rem;
}

.login-divider {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 1.25rem 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-divider span {
  padding: 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.login-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--secondary);
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 150ms ease, border-color 150ms ease;
}

.login-google:hover {
  background: var(--accent);
  border-color: var(--muted-foreground);
}

.login-footer {
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  opacity: 0.7;
  text-align: center;
}

/* ========== Alert (flash / error) ========== */
.alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  line-height: 1.4;
  margin-top: 1rem;
}

.alert-destructive {
  background: rgba(186, 26, 26, 0.08);
  border: 1px solid rgba(186, 26, 26, 0.2);
  color: var(--destructive);
}

[data-theme="dark"] .alert-destructive {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.25);
  color: var(--danger);
}

.alert-destructive svg {
  flex-shrink: 0;
  color: var(--destructive);
}

[data-theme="dark"] .alert-destructive svg {
  color: var(--danger);
}

.alert-success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--success);
}

[data-theme="dark"] .alert-success {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: var(--success);
}

/* Flash messages */
.flash {
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.875rem;
}

.flash-error {
  background: var(--destructive);
  color: var(--destructive-foreground);
}

.flash-success {
  background: var(--online);
  color: #ffffff;
}

/* Legacy support */
.error-text {
  color: var(--destructive);
  margin-top: 1rem;
  font-size: 0.875rem;
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  outline: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--foreground);
}

.btn-outline:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.btn-destructive {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: var(--destructive);
}

.btn-destructive:hover {
  opacity: 0.9;
}

.btn-ghost {
  background: transparent;
  color: var(--foreground);
}

.btn-ghost:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.btn-google {
  width: 100%;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 150ms ease, border-color 150ms ease;
}

.btn-google:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.btn-google svg {
  flex-shrink: 0;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 0.375rem;
  border-radius: var(--radius);
  font-size: 1rem;
  transition: background 150ms ease, color 150ms ease;
  text-decoration: none;
  line-height: 1;
}

.btn-icon:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.btn-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.btn-icon svg {
  flex-shrink: 0;
}

.btn-danger {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: var(--destructive);
}

.btn-danger:hover {
  opacity: 0.85;
}

/* ========== Chat Layout ========== */
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ========== Sidebar ========== */
.sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  border-right: none;
}

.sidebar-header {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  height: 3.5rem;
}

[data-theme="dark"] .sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.sidebar-header h2 {
  font-size: 1rem;
  letter-spacing: -0.025em;
}

#sidebar-close {
  display: none;
}

.channel-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.category {
  margin-bottom: 0.25rem;
}

.category-header {
  padding: 0.5rem 1rem 0.25rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
  color: var(--muted-foreground);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  user-select: none;
}

.category-header:hover {
  color: var(--foreground);
}

.category-chevron {
  display: inline-flex;
  transition: transform 0.15s ease;
}

.category-chevron.collapsed {
  transform: rotate(-90deg);
}

.channel-item {
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  color: var(--muted-foreground);
  display: flex;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  border-radius: var(--radius);
  margin: 1px 0.5rem;
  transition: background 150ms ease, color 150ms ease;
}

.channel-item:hover {
  background: var(--sidebar-hover);
  color: var(--foreground);
}

.channel-item.active {
  background: var(--sidebar-active);
  color: var(--foreground);
  font-weight: 600;
}

.channel-hash {
  color: var(--muted-foreground);
  font-weight: 500;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.dm-section {
  border-top: 1px solid var(--border);
  padding: 0.5rem 0;
}

[data-theme="dark"] .dm-section {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.dm-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dm-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.dm-avatar-wrap .status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--sidebar-bg);
}

.dm-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-xs {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

/* DM user picker modal */
.dm-user-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.1s;
}

.dm-user-option:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .dm-user-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dm-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dm-user-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.dm-user-email {
  font-size: 0.75rem;
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-user-option.selected {
  background: hsl(var(--accent));
}

.dm-group-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 14px;
}

.dm-user-option.existing {
  cursor: default;
  opacity: 0.72;
}

.dm-user-check {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: hsl(var(--primary));
}

.dm-selected-bar {
  display: none;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.dm-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: hsl(var(--accent));
  font-size: 0.8rem;
  font-weight: 500;
}

.dm-chip-remove {
  border: none;
  background: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  line-height: 1;
}

.dm-chip-remove:hover {
  color: hsl(var(--destructive));
}

.dm-chip-existing {
  color: var(--muted-foreground);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem 0.25rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted-foreground);
  letter-spacing: 0.1em;
}

/* ========== Main Content ========== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--background);
}

.channel-header {
  padding: 0 1rem;
  height: 3.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--secondary);
  flex-shrink: 0;
}

[data-theme="dark"] .channel-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.channel-info {
  flex: 1;
  min-width: 0;
}

.channel-info h3 {
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.channel-topic {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-actions {
  display: flex;
  gap: 0.125rem;
}

.mobile-menu {
  display: none;
}

/* ========== Messages ========== */
/* No padding of its own: #messages already carries px-4 py-4, and doubling it
   up left a thick blank band between the feed and the input box. */
.messages-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Anchor the feed to the bottom: when a channel's history is shorter than the
   viewport the spare height goes above the first message, not under the most
   recent one. margin-top:auto (not justify-content:flex-end, which breaks
   scrolling to the top of an overflowing feed) does the anchoring. */
.messages-container > .messages {
  margin-top: auto;
  width: 100%;
  flex-shrink: 0;
  /* py-4 on the element gives 1rem; retain a little breathing room before the
     dedicated typing-status row below. */
  padding-bottom: 0.5rem;
}

.messages-container.drag-over {
  background: rgba(55, 85, 195, 0.04);
  outline: 2px dashed var(--accent-blue);
  outline-offset: -4px;
  border-radius: var(--radius);
}

[data-theme="dark"] .messages-container.drag-over {
  background: rgba(96, 124, 236, 0.04);
}

.message {
  display: flex;
  flex-direction: column;
  padding: 0.375rem 0.5rem;
  position: relative;
  border-radius: var(--radius);
  transition: background 150ms ease;
}

.message-row {
  display: flex;
  gap: 0.75rem;
}

/* ---- Grouped messages ----
   A run of messages from the same person collapses: the repeated avatar and
   name go, and the text keeps its indent so the block reads as one turn. */
/* Zero, not merely small. The gap between two grouped messages is then just
   the content line-height, exactly the same as between two wrapped lines
   inside one message, so a run reads as continuous writing rather than as
   separate turns. Any padding here would make consecutive messages sit
   further apart than consecutive lines and break that illusion. */
.message.grouped {
  padding-top: 0;
  padding-bottom: 0;
}

/* The head of a block keeps its avatar and name, so it is not .grouped and
   still carries the 0.375rem that separates it from the previous speaker.
   That padding must not also apply underneath it, or the run it introduces
   starts 6px lower than the lines that follow. Its top padding stays, so the
   block as a whole is still spaced away from whatever came before.
   A browser without :has() simply keeps the old 6px step. */
.message:has(+ .message.grouped) {
  padding-bottom: 0;
}

.message.grouped .message-header {
  display: none;
}

/* display, NOT visibility. A hidden-but-present avatar still occupies its
   40px of height, which silently sets the row height and leaves a grouped
   line nearly twice as tall as its text no matter what the padding says. It
   has to leave the layout entirely. */
.message.grouped .avatar {
  display: none;
}

/* Taking the avatar out of the flow also takes the indent with it, so the
   gutter is rebuilt here: avatar width (40px) plus the row gap (0.75rem).
   Keeps grouped text aligned with the first message of the block. */
.message.grouped .message-row {
  padding-left: calc(40px + 0.75rem);
}

/* The timestamp moves into the empty avatar gutter, on hover only, so a
   grouped line can still be placed in time without cluttering the feed. */
.message.grouped .message-row::before {
  content: attr(data-time);
  position: absolute;
  left: 0.5rem;
  width: 40px;
  text-align: center;
  font-size: 0.65rem;
  line-height: 1.4;
  color: var(--muted-foreground);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.message.grouped:hover .message-row::before {
  opacity: 1;
}

.message:hover {
  background: var(--message-hover);
}

.message:hover .message-actions {
  opacity: 1;
  pointer-events: auto;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-sm {
  width: 28px;
  height: 28px;
}

.message-body {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}

.message-author {
  font-weight: 600;
  font-size: 0.875rem;
}

.message-time {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

.edited {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  font-style: italic;
}

.pinned {
  font-size: 0.75rem;
}

.message-content {
  line-height: 1.625;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 0.875rem;
  color: var(--foreground);
}

.message-content code {
  background: var(--secondary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius);
  font-size: 0.8125em;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: var(--foreground);
}

.message-content pre {
  background: var(--muted);
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 0.5rem 0;
}

[data-theme="dark"] .message-content pre {
  background: var(--sidebar-bg);
}

.message-content pre code {
  background: none;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--foreground);
}

.message-content a {
  color: var(--accent-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message-content a:hover {
  color: var(--accent-blue-hover);
}

/* Discord-compatible webhook embeds. */
.message-embeds {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.message-embed {
  width: min(520px, 100%);
  overflow: hidden;
  border: 1px solid var(--border);
  border-left: 4px solid var(--message-embed-color, var(--accent-blue));
  border-radius: 4px;
  background: var(--secondary);
  color: var(--foreground);
}

.message-embed-layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.message-embed-main {
  min-width: 0;
  flex: 1;
}

.message-embed-author,
.message-embed-footer {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.message-embed-author {
  margin-bottom: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.message-embed-author a,
.message-embed-title a {
  color: inherit;
  text-decoration: none;
}

.message-embed-author a:hover,
.message-embed-title a:hover {
  text-decoration: underline;
}

.message-embed-author-icon,
.message-embed-footer-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.message-embed-title {
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.message-embed-description,
.message-embed-field-value {
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.message-embed-description + .message-embed-fields {
  margin-top: 0.75rem;
}

.message-embed-fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.7rem 0.75rem;
}

.message-embed-field {
  grid-column: 1 / -1;
  min-width: 0;
}

.message-embed-field.inline {
  grid-column: span 4;
}

.message-embed-field-name {
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.message-embed-thumbnail {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  border-radius: 4px;
  object-fit: cover;
}

.message-embed-image-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 1rem 1rem;
}

.message-embed-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 320px;
  border-radius: 4px;
  object-fit: contain;
}

.message-embed-footer {
  margin-top: 0.75rem;
  color: var(--muted-foreground);
  font-size: 0.68rem;
}

.message-embed-footer-icon {
  width: 18px;
  height: 18px;
}

.message-embed-footer-dot {
  margin: 0 0.35rem;
}

@media (max-width: 520px) {
  .message-embed-field.inline {
    grid-column: 1 / -1;
  }

  .message-embed-thumbnail {
    width: 64px;
    height: 64px;
  }
}

.message-actions {
  position: absolute;
  top: -0.5rem;
  right: 0.5rem;
  opacity: 0;
  pointer-events: none;
  display: flex;
  gap: 0.125rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.125rem;
  transition: opacity 150ms ease;
  box-shadow: 0 4px 20px rgba(25, 28, 30, 0.06);
}

[data-theme="dark"] .message-actions {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.message-actions .btn-icon {
  padding: 0.25rem;
}

/* ========== Reactions ========== */
.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.375rem;
}

/* The container is rendered for every message whether or not it has any
   reactions, so without this its margin adds dead space under all of them.
   Harmless in a loose layout, but in a grouped run it puts more space below a
   line than above it and the rhythm visibly breaks. */
.message-reactions:empty {
  display: none;
}

.reaction {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--muted-foreground);
  transition: background 150ms ease, border-color 150ms ease;
  line-height: 1.5;
}

.reaction:hover {
  background: var(--accent);
  border-color: var(--muted-foreground);
}

.reaction.active {
  background: rgba(55, 85, 195, 0.1);
  border-color: rgba(55, 85, 195, 0.35);
  color: var(--accent-blue);
}

[data-theme="dark"] .reaction.active {
  background: rgba(96, 124, 236, 0.12);
  border-color: rgba(96, 124, 236, 0.4);
}

.reaction-picker {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.5rem;
  display: flex;
  gap: 0.125rem;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(25, 28, 30, 0.1);
}

[data-theme="dark"] .reaction-picker {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.reaction-option {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius);
  transition: background 150ms ease;
  line-height: 1;
}

.reaction-option:hover {
  background: var(--accent);
}

/* Custom emoji sizing */
.custom-emoji-inline {
  display: inline;
  height: 1.375em;
  width: auto;
  vertical-align: text-bottom;
  margin: 0 0.05em;
}

.custom-emoji-reaction {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: middle;
}

.custom-emoji-picker {
  height: 1.25rem;
  width: auto;
}

.reaction-picker-divider {
  width: 1px;
  background: var(--border);
  margin: 0.25rem 0;
  align-self: stretch;
}

/* ========== Attachments & Gallery ========== */
.attachment-gallery {
  display: grid;
  gap: 4px;
  margin-top: 0.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 500px;
}

.attachment-single {
  display: block;
}

.attachment-single .gallery-img {
  max-width: 400px;
  max-height: 300px;
  border-radius: var(--radius);
}

.grid-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

.grid-3 .gallery-img:first-child {
  grid-column: 1 / -1;
}

.grid-4plus {
  grid-template-columns: 1fr 1fr;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 150ms ease;
  border: 1px solid var(--border);
  min-height: 80px;
  max-height: 200px;
}

.gallery-img:hover {
  opacity: 0.85;
}

/* ========== File Preview (upload queue) ========== */
.file-preview {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--secondary);
}

.file-preview-item {
  position: relative;
  flex-shrink: 0;
}

.file-preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.file-preview-file {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.file-preview-name {
  font-size: 0.65rem;
  text-align: center;
  padding: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  color: var(--muted-foreground);
}

.file-preview-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--destructive);
  color: white;
  border: none;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ========== Lightbox ========== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The figure is the click target that dismisses along with the backdrop, so it
   fills the gap between the arrows rather than hugging the picture. */
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 92vw;
  max-height: 92vh;
}

.lightbox-img {
  max-width: 90vw;
  /* Leaves room for the caption underneath without the picture overflowing. */
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox-caption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 90vw;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}

.lightbox-caption.is-untitled .lightbox-title {
  display: none;
}

.lightbox-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lightbox-download {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms ease;
}

.lightbox-download:hover {
  color: #ffffff;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 5001;
  opacity: 0.7;
  transition: opacity 150ms ease;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  opacity: 0.6;
  transition: opacity 150ms ease, background 150ms ease;
}

.lightbox-prev {
  left: 1rem;
}

.lightbox-next {
  right: 1rem;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.attachment-video {
  max-width: 400px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-top: 0.5rem;
}

.attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent-blue);
  margin-top: 0.5rem;
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 150ms ease, border-color 150ms ease;
}

.attachment-file:hover {
  background: var(--accent);
  border-color: var(--muted-foreground);
}

/* ========== PDF attachment thumbnail ========== */
.pdf-attachment {
  display: inline-flex;
  flex-direction: column;
  width: 200px;
  max-width: 100%;
  margin-top: 0.5rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  vertical-align: top;
  transition: background 150ms ease, border-color 150ms ease;
}

.pdf-attachment:hover {
  background: var(--accent);
  border-color: var(--muted-foreground);
}

.pdf-thumb {
  position: relative;
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}

.pdf-thumb canvas {
  display: none;
  max-width: 100%;
}

.pdf-attachment.pdf-rendered .pdf-thumb canvas {
  display: block;
}

.pdf-attachment.pdf-rendered .pdf-thumb-fallback {
  display: none;
}

.pdf-thumb-fallback {
  font-size: 48px;
  color: var(--accent-blue);
  opacity: 0.7;
}

.pdf-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  min-width: 0;
}

.pdf-meta-icon {
  font-size: 16px;
  color: var(--accent-blue);
  flex-shrink: 0;
}

.pdf-meta-name {
  font-size: 0.75rem;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== Message Input ========== */
/* A dedicated row keeps typing status from covering the newest message. */
.typing-indicator {
  height: 1.25rem;
  pointer-events: none;
  padding: 0 1.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-style: italic;
  display: flex;
  align-items: center;
}

/* Keep the status visually connected to the composer. */
.typing-indicator:not(:empty) {
  background: var(--background);
}

/* The typing-indicator row directly above supplies the breathing room. */
.message-input-container {
  display: block;
  padding: 0 1.5rem 1rem;
  background: var(--background);
  flex-shrink: 0;
}

.input-wrapper {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px -4px rgba(25, 28, 30, 0.06);
}

[data-theme="dark"] .input-wrapper {
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.3);
}

.input-toolbar {
  display: flex;
  gap: 0.125rem;
  border-bottom: 1px solid var(--border);
}

#message-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  resize: none;
  min-height: 48px;
  max-height: 150px;
  outline: none;
  line-height: 1.5;
  /* contenteditable: newlines are plain "\n" text nodes, so the composer needs
     pre-wrap to render them, and its own scrollbar past the max height. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  cursor: text;
}

#message-input:empty::before {
  content: attr(data-placeholder);
  color: var(--muted-foreground);
  pointer-events: none;
}

/* Custom emoji rendered inline in the composer. contenteditable="false" makes
   the browser treat each one as a single atomic character for caret movement
   and backspace. */
.composer-emoji {
  display: inline-block;
  height: 1.25rem;
  width: auto;
  vertical-align: -0.25rem;
  margin: 0 1px;
}

#message-input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.send-btn {
  background: var(--primary);
  color: var(--primary-foreground);
  transition: opacity 150ms ease;
}

.send-btn:hover {
  opacity: 0.9;
}

/* ========== Edit Mode ========== */
.edit-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  resize: none;
  min-height: 60px;
  outline: none;
  line-height: 1.5;
  transition: box-shadow 150ms ease;
}

.edit-input:focus {
  box-shadow: 0 0 0 2px rgba(55, 85, 195, 0.15);
}

[data-theme="dark"] .edit-input:focus {
  box-shadow: 0 0 0 2px rgba(96, 124, 236, 0.2);
}

.edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.save-edit {
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  transition: opacity 150ms ease;
}

.save-edit:hover {
  opacity: 0.9;
}

.cancel-edit {
  background: var(--secondary);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}

.cancel-edit:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* ========== User List Panel ========== */
.user-list-panel {
  width: 256px;
  min-width: 256px;
  background: var(--secondary);
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0;
  overflow-y: auto;
}

[data-theme="dark"] .user-list-panel {
  border-left-color: rgba(255, 255, 255, 0.05);
}

.user-list-panel h3 {
  font-size: 0.875rem;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.user-list-panel.open {
  right: 0;
}

@media (min-width: 769px) {
  .user-list-panel.collapsed {
    display: none;
  }
}

.member-group-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 0.75rem 0 0.375rem;
  letter-spacing: 0.1em;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.375rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  border-radius: var(--radius);
  transition: background 150ms ease;
  position: relative;
  cursor: pointer;
}

.member-item:hover {
  background: var(--accent);
}

.member-item .avatar-sm {
  position: relative;
}

.member-item .status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  border: 2px solid var(--sidebar-bg);
}

.member-info {
  min-width: 0;
  flex: 1;
}

.member-status-text {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.member-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.member-avatar-wrap .status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  border: 2px solid var(--secondary);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-online {
  background: var(--online);
}

.status-away {
  background: var(--away);
}

.status-offline {
  background: var(--offline);
}

/* ========== Context Menu ========== */
.context-menu {
  position: fixed;
  z-index: 2000;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem;
  min-width: 180px;
  box-shadow: 0 4px 20px rgba(25, 28, 30, 0.1);
}

[data-theme="dark"] .context-menu {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.context-menu-item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: none;
  border: none;
  color: var(--foreground);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 100ms ease;
}

.context-menu-item:hover {
  background: var(--accent);
}

.context-menu-header {
  padding: 0.4rem 0.75rem 0.25rem;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.context-menu-separator {
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0.5rem;
}

.context-menu-danger {
  color: var(--destructive);
}

.context-menu-danger:hover {
  background: rgba(186, 26, 26, 0.08);
}

[data-theme="dark"] .context-menu-danger:hover {
  background: rgba(220, 38, 38, 0.15);
}

/* ========== Modals ========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}

.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(25, 28, 30, 0.1);
}

[data-theme="dark"] .modal {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.modal-lg {
  width: 560px;
}

.modal-wide {
  width: 560px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 1rem;
}

.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}

.modal-description {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
}

/* ========== Dialogs (alert / confirm / prompt) ========== */
/* Same furniture as .modal, but a separate class on purpose: chat.js's
   closeModal() removes the first .modal-overlay it finds, and it must never
   reach a dialog whose promise is still pending. Sits above modals so a
   confirmation raised from inside one is not buried by it. */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 3100;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

[data-theme="dark"] .dialog-overlay {
  background: rgba(0, 0, 0, 0.6);
}

.dialog {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(25, 28, 30, 0.1);
}

[data-theme="dark"] .dialog {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.dialog-header {
  padding: 1rem 1.25rem 0.5rem;
}

.dialog-title {
  font-size: 1rem;
  font-weight: 600;
}

.dialog-body {
  padding: 0 1.25rem 0.5rem;
}

.dialog-message {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  /* Long channel names and error strings must not widen the box. */
  overflow-wrap: anywhere;
}

.dialog-input {
  margin-top: 0.75rem;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1rem;
}

/* ========== Forms ========== */
.form-group {
  margin-bottom: 0.75rem;
}

.form-group label {
  display: block;
  font-size: 10px;
  color: var(--muted-foreground);
  margin-bottom: 0.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.form-input {
  width: 100%;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 150ms ease;
}

[data-theme="dark"] .form-input {
  background: var(--input);
  border-color: var(--border);
}

.form-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(55, 85, 195, 0.1);
}

[data-theme="dark"] .form-input:focus {
  box-shadow: 0 0 0 2px rgba(96, 124, 236, 0.15);
}

.form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-select {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
}

/* ========== Toggle Switch ========== */
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle input {
  display: none;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: background 200ms ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 200ms ease;
}

.toggle input:checked + .toggle-slider {
  background: var(--accent-blue);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.toggle-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
}

/* ========== Channel Settings Modal (Discord-style) ========== */
.channel-settings-modal {
  width: 960px;
  max-width: 95vw;
  height: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: row;
  padding: 0;
}

/* Server settings carries the full admin surface now, so it takes over almost
   the whole viewport rather than sitting in a fixed-size dialog. The small
   inset keeps the chat visible behind it so it still reads as a modal. */
.server-settings-modal {
  width: calc(100vw - 3rem);
  max-width: none;
  height: calc(100vh - 3rem);
  max-height: none;
}

.ss-admin-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  text-decoration: none;
}

/* An embedded admin page manages its own padding and scrolling, so the pane
   around it collapses to a bare frame. */
#ss-content.ss-content-embed {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
}

.ss-admin-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
}

.cs-sidebar {
  width: 200px;
  min-width: 200px;
  background: var(--secondary);
  border-right: 1px solid var(--border);
  border-radius: 12px 0 0 12px;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}

[data-theme="dark"] .cs-sidebar {
  background: var(--sidebar-bg);
  border-color: var(--border);
}

.cs-channel-name {
  padding: 0 1rem 0.75rem;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.cs-nav {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem;
  flex: 1;
}

.cs-nav-item {
  padding: 0.4rem 0.75rem;
  background: none;
  border: none;
  color: var(--muted-foreground);
  text-align: left;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 100ms ease, color 100ms ease;
}

.cs-nav-item:hover {
  background: var(--accent);
  color: var(--foreground);
}

[data-theme="dark"] .cs-nav-item:hover {
  background: var(--accent);
}

.cs-nav-item.active {
  background: var(--sidebar-active);
  color: var(--foreground);
}

[data-theme="dark"] .cs-nav-item.active {
  background: var(--accent);
}

.cs-sidebar-bottom {
  padding: 0.5rem;
  border-top: 1px solid var(--border);
}

.cs-delete-btn {
  width: 100%;
  padding: 0.4rem 0.75rem;
  background: none;
  border: none;
  color: var(--destructive);
  text-align: left;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 100ms ease;
}

.cs-delete-btn:hover {
  background: rgba(186, 26, 26, 0.08);
}

[data-theme="dark"] .cs-delete-btn:hover {
  background: rgba(220, 38, 38, 0.15);
}

.cs-main {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.cs-header h2 {
  font-size: 1.15rem;
}

.cs-desc {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

.cs-private-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}

[data-theme="dark"] .cs-private-toggle {
  background: var(--muted);
  border-color: var(--border);
}

.cs-private-toggle strong {
  font-size: 0.95rem;
}

.cs-private-toggle p {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin-top: 0.15rem;
}

/* Permissions layout */
.cs-permissions-layout {
  display: flex;
  gap: 1px;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 0;
}

.cs-role-list {
  width: 180px;
  min-width: 180px;
  background: var(--secondary);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

[data-theme="dark"] .cs-role-list {
  background: var(--sidebar-bg);
}

.cs-role-list-header {
  padding: 0.6rem 0.75rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}

.cs-role-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: background 100ms ease, color 100ms ease;
}

.cs-role-item:hover {
  background: var(--accent);
  color: var(--foreground);
}

[data-theme="dark"] .cs-role-item:hover {
  background: var(--accent);
}

.cs-role-item.active {
  background: var(--sidebar-active);
  color: var(--foreground);
}

[data-theme="dark"] .cs-role-item.active {
  background: var(--accent);
}

.cs-role-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cs-perm-panel {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.cs-perm-panel h3 {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.cs-perm-category {
  margin-bottom: 1.25rem;
}

.cs-perm-category-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}

.cs-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--muted);
}

[data-theme="dark"] .cs-perm-row {
  border-color: var(--border);
}

.cs-perm-info {
  flex: 1;
  min-width: 0;
}

.cs-perm-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.cs-perm-desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.15rem;
}

.cs-perm-toggles {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 1rem;
}

.cs-perm-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms ease, color 100ms ease;
  background: var(--muted);
  color: var(--muted-foreground);
}

[data-theme="dark"] .cs-perm-btn {
  background: var(--accent);
}

.cs-perm-btn:hover {
  background: var(--accent);
}

[data-theme="dark"] .cs-perm-btn:hover {
  background: var(--border);
}

.cs-perm-deny.active {
  background: #b91c1c;
  color: white;
}

.cs-perm-inherit.active {
  background: var(--muted-foreground);
  color: white;
}

.cs-perm-allow.active {
  background: #16a34a;
  color: white;
}

.cs-sync-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  background: hsl(var(--accent));
  border: 1px solid hsl(var(--border));
}

/* ========== Search Panel ========== */
.search-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.search-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.search-input {
  flex: 1;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 150ms ease;
}

.search-input:focus {
  border-color: var(--accent-blue);
}

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.search-result {
  padding: 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 0.25rem;
  transition: background 150ms ease;
}

.search-result:hover {
  background: var(--accent);
}

.search-result-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.search-result-content {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

.search-result-content em {
  color: var(--accent-blue);
  font-style: normal;
  font-weight: 600;
}

.search-empty {
  text-align: center;
  padding: 2rem;
  color: var(--muted-foreground);
}

/* ========== Drag & Drop ========== */
.channel-item.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.category.drag-target {
  outline: 2px dashed rgba(55, 85, 195, 0.4);
  outline-offset: -2px;
  border-radius: 4px;
}

[data-theme="dark"] .category.drag-target {
  outline-color: rgba(96, 124, 236, 0.4);
}

/* ========== Server Settings - Create Role ========== */
.ss-create-role {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* ========== Member list enhancements ========== */
.member-role-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.member-role-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 150ms ease;
}

.member-role-toggle:hover {
  background: var(--accent);
}

/* ========== Admin Pages ========== */
.admin-page {
  overflow: auto;
}

.admin-container {
  display: flex;
  min-height: 100vh;
}

/* Admin pages rendered inside the Server Settings modal. The modal supplies
   the nav and the surrounding panel, so drop the sidebar-era spacing and let
   the page fill the iframe. */
.admin-embed {
  background: transparent;
}

.admin-embed .admin-main {
  padding: 1.25rem 1.5rem 2rem;
}

.admin-embed .admin-main h1 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.admin-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 1rem 0;
}

.admin-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem 1rem;
  border-bottom: 1px solid var(--border);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

.admin-nav-item {
  padding: 0.5rem 0.75rem;
  color: var(--muted-foreground);
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  transition: background 150ms ease, color 150ms ease;
}

.admin-nav-item:hover {
  background: var(--accent);
  color: var(--foreground);
}

.admin-nav-item.active {
  background: rgba(55, 85, 195, 0.1);
  color: var(--accent-blue);
}

[data-theme="dark"] .admin-nav-item.active {
  background: rgba(96, 124, 236, 0.15);
  color: var(--accent-blue);
}

.admin-main {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.admin-main h1 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(25, 28, 30, 0.03);
}

[data-theme="dark"] .admin-card {
  box-shadow: none;
}

.admin-card h2 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.admin-table th {
  color: var(--muted-foreground);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* One table per category, each in its own card. With the default auto layout
   every table measures its own content, so Type and Actions land at a
   different x in every card. Fixing the layout and pinning the widths makes
   the columns line up down the whole page. Topic is left unpinned and soaks
   up the remaining width. */
.channels-table {
  table-layout: fixed;
}

.channels-table th:nth-child(1),
.channels-table td:nth-child(1) {
  width: 24%;
}

.channels-table th:nth-child(3),
.channels-table td:nth-child(3) {
  width: 7.5rem;
}

.channels-table th:nth-child(4),
.channels-table td:nth-child(4) {
  width: 8rem;
}

/* Fixed columns no longer widen to fit, so a long name or topic has to be
   truncated rather than spill into the next column. */
.channels-table td:nth-child(1),
.channels-table td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== Social group icons ========== */
/* Groups with an uploaded icon show it down the sidebar; the rest show their
   initials on a chip in the group's colour. Both use the same box so names
   stay aligned however many of each a workspace has. */
.social-group-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 5px;
  object-fit: cover;
  background: var(--secondary);
}

.social-group-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Two characters in a 20px box: small, tight, and never wrapping. The text
     colour is set inline from the background's luminance. */
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* The composer's group button carries a 10px swatch, too small for either an
   image or two characters, so it grows for both. The id keeps this ahead of
   the utility classes on the element. */
#social-group-picker-dot.has-icon,
#social-group-picker-dot.has-initials {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

#social-group-picker-dot.has-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

/* Admin > Roles icon field */
.role-icon-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.role-icon-thumb {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
}

.role-icon-thumb-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.role-icon-remove {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.form-hint {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

/* ========== Social group banner ========== */
.social-banner {
  position: relative;
  border-bottom: 1px solid var(--border);
  /* The controls sit on top of the image, so this is the positioning root. */
}

.social-banner.is-uploading {
  opacity: 0.6;
  pointer-events: none;
}

/* The banner takes the shape of whatever was uploaded: full width with
   height:auto keeps the natural ratio, so nothing is cropped, zoomed or
   squashed. What you upload is what appears.
   max-height stops a square or portrait image from filling the whole feed;
   object-fit only comes into play in that case, and contain keeps the ratio
   intact rather than distorting to fit the clamp. */
/* Always fills the banner edge to edge: no letterboxing, no empty space.
   height:auto means a normal wide banner keeps its exact ratio and nothing is
   cropped. max-height only bites on a square or portrait upload, and there
   object-fit:cover zooms it to fill the strip and crops the overflow, rather
   than shrinking it into bars at the sides. */
.social-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 20rem;
  object-fit: cover;
  /* Centres the crop, so the middle of a tall image is what survives. */
  object-position: center;
  background: var(--secondary);
}

/* Placeholder shown only to someone who can actually set a banner. */
.social-banner-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  aspect-ratio: 8 / 1;
  background: var(--secondary);
  border: 1px dashed var(--border);
  color: var(--muted-foreground);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.social-banner-hint {
  font-size: 0.7rem;
  opacity: 0.7;
}

.social-banner-empty:hover {
  background: var(--muted);
  color: var(--foreground);
}

/* Revealed on hover so the banner itself stays clean while reading. */
.social-banner-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.35rem;
  opacity: 0;
  transition: opacity 150ms ease;
}

.social-banner:hover .social-banner-actions,
.social-banner:focus-within .social-banner-actions {
  opacity: 1;
}

/* Touch has no hover, so leave the controls visible there. */
@media (hover: none) {
  .social-banner-actions {
    opacity: 1;
  }
}

/* ---- In-flight buttons ----
   Server-rendered admin forms navigate on submit, so a slow request looks
   like a dead page. The submitting button spins until the new page arrives. */
.btn.is-busy {
  pointer-events: none;
  opacity: 0.75;
}

.btn.is-busy::before {
  content: '';
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.4em;
  vertical-align: -0.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Respect a reduced-motion preference: still clearly busy, just not spinning. */
@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::before {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.5;
  }
}

/* ========== Badges ========== */
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
}

[data-theme="dark"] .badge-success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.badge-warning {
  background: rgba(234, 179, 8, 0.12);
  color: var(--warning);
}

[data-theme="dark"] .badge-warning {
  background: rgba(234, 179, 8, 0.15);
  color: var(--warning);
}

.badge-danger {
  background: rgba(186, 26, 26, 0.1);
  color: var(--danger);
}

[data-theme="dark"] .badge-danger {
  background: rgba(220, 38, 38, 0.15);
  color: var(--danger);
}

.badge-muted {
  background: var(--muted);
  color: var(--muted-foreground);
}

/* Password column on the users page. "Set" and "None" are different widths, so
   without a fixed track the pill pushes the field and buttons to a different
   offset on every row. */
.pw-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pw-badge {
  min-width: 3.25rem;
  text-align: center;
}

.pw-input {
  width: 130px;
  font-size: 0.8rem;
}

/* ========== Checkbox Grid ========== */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--foreground);
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  transition: background 150ms ease;
  text-transform: capitalize;
}

.checkbox-grid label:hover {
  background: var(--accent);
}

/* ========== Custom Checkbox ========== */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 150ms ease, border-color 150ms ease;
}

input[type="checkbox"]:hover {
  border-color: var(--muted-foreground);
}

input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--primary-foreground);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* ========== Custom Select ========== */
select,
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  outline: none;
  transition: border-color 150ms ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2345464d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}

[data-theme="dark"] select,
[data-theme="dark"] .form-select {
  background-color: var(--input);
  border-color: var(--border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8d93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select:hover,
.form-select:hover {
  border-color: var(--muted-foreground);
}

select:focus,
.form-select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(55, 85, 195, 0.1);
}

[data-theme="dark"] select:focus,
[data-theme="dark"] .form-select:focus {
  box-shadow: 0 0 0 2px rgba(96, 124, 236, 0.15);
}

/* ========== Custom Color Input ========== */
input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 3px;
  background: var(--input);
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 1px;
}

/* ========== Custom Number Input ========== */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

/* ========== Permission Override Form ========== */
.perm-override-form {
  font-size: 0.875rem;
}

/* ========== Scrollbars ========== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(69, 70, 77, 0.2);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(69, 70, 77, 0.35);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(139, 141, 147, 0.2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 141, 147, 0.35);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(69, 70, 77, 0.2) transparent;
}

[data-theme="dark"] * {
  scrollbar-color: rgba(139, 141, 147, 0.2) transparent;
}

/* ========== Mobile Responsive ========== */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -240px;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transition: left 300ms ease;
    box-shadow: none;
  }

  .sidebar.open {
    left: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }

  [data-theme="dark"] .sidebar.open {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }

  #sidebar-close {
    display: flex;
  }

  .mobile-menu {
    display: flex;
  }

  .user-list-panel {
    position: fixed;
    right: -256px;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transition: right 300ms ease;
    box-shadow: none;
  }

  .user-list-panel.open {
    right: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  }

  [data-theme="dark"] .user-list-panel.open {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
  }

  .channel-header {
    padding: 0 0.75rem;
  }

  .message-input-container {
    padding: 0.5rem 0.75rem 0.75rem;
  }

  /* Larger touch targets on mobile */
  .context-menu-item {
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
  }

  .channel-item {
    padding: 0.4rem 0.5rem;
    -webkit-user-select: none;
    user-select: none;
  }

  .message {
    -webkit-user-select: text;
    user-select: text;
  }

  .member-item {
    padding: 0.4rem 0.5rem;
    -webkit-user-select: none;
    user-select: none;
  }

  .modal {
    max-height: 85vh;
  }

  .attachment-img {
    max-width: 100%;
  }

  .attachment-video {
    max-width: 100%;
  }

  .channel-settings-modal {
    flex-direction: column;
    height: 90vh;
  }

  .cs-sidebar {
    width: 100%;
    min-width: unset;
    flex-direction: row;
    border-radius: 12px 12px 0 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.5rem;
  }

  .cs-channel-name {
    display: none;
  }

  .cs-nav {
    flex-direction: row;
  }

  .cs-sidebar-bottom {
    border-top: none;
    border-left: 1px solid var(--border);
    display: flex;
    align-items: center;
  }

  /* The sidebar is a horizontal strip on mobile, so the admin link sits beside
     the tabs rather than under them. */
  .ss-admin-link {
    white-space: nowrap;
  }

  .server-settings-modal .cs-nav {
    overflow-x: auto;
  }

  /* On a phone the admin surface needs every pixel, so it goes edge to edge. */
  .server-settings-modal {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .cs-permissions-layout {
    flex-direction: column;
  }

  .cs-role-list {
    width: 100%;
    min-width: unset;
    max-height: 120px;
  }

  /* Mobile bottom tab bar - in document flow, not fixed */
  .mobile-tab-bar {
    display: flex !important;
    flex-shrink: 0;
    height: 60px;
    background: hsl(var(--card));
    border-top: 1px solid hsl(var(--border));
    align-items: center;
    justify-content: space-around;
    padding: 0 0.25rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    height: 100%;
    border: none;
    background: none;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: color 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-tab .material-symbols-outlined {
    font-size: 22px;
    transition: color 150ms ease;
  }

  .mobile-tab-label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .mobile-tab.active {
    color: hsl(var(--primary));
  }

  .mobile-tab:active {
    color: hsl(var(--primary));
    opacity: 0.8;
  }

  /* Social sidebar drawer */
  .social-sidebar {
    position: fixed;
    left: -240px;
    top: 0;
    bottom: 0;
    z-index: 1000;
    width: 240px;
    transition: left 300ms ease;
  }

  .social-sidebar.open {
    left: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }

  [data-theme="dark"] .social-sidebar.open {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }

  .social-sidebar.open #social-sidebar-close {
    display: flex !important;
  }

  /* Social mobile tweaks */
  #social-composer {
    padding: 0.75rem;
  }

  #social-composer .flex.gap-3 {
    gap: 0.5rem;
  }

  #social-composer textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  .social-post-actions button {
    min-height: 2rem;
    padding: 0.35rem 0.5rem;
  }

  .comment-input-area input {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  .user-settings-popup {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 60px;
    width: 100%;
    max-width: 100%;
    border-radius: 12px 12px 0 0;
  }

  /* Make body a flex column so tab bar sits below app content */
  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .app-container {
    flex: 1;
    min-height: 0;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .user-list-panel {
    width: 200px;
    min-width: 200px;
  }
}

/* ========== Mobile Tab Bar ========== */

/* ========== Calendar ========== */
.rail-page[data-page="calendar"] {
  width: 100%;
}

.cal-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--card);
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
}

.cal-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---- Calendar filter (shared calendars) ---- */
.cal-calendar-filter {
  position: relative;
}

.cal-filter-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.375rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(25, 28, 30, 0.12);
}

[data-theme="dark"] .cal-filter-menu {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.cal-filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  cursor: pointer;
}

.cal-filter-item:hover {
  background: var(--muted);
}

.cal-filter-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.cal-filter-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-view-tabs {
  display: flex;
  background: var(--muted);
  border-radius: var(--radius);
  padding: 2px;
}

.cal-view-btn {
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: none;
  border: none;
  color: var(--muted-foreground);
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: all 150ms ease;
}

.cal-view-btn:hover {
  color: var(--foreground);
}

.cal-view-btn.active {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.cal-body {
  flex: 1;
  overflow: auto;
  padding: 0;
  background: var(--background);
}

/* Month view */
.cal-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(6, 1fr);
  height: 100%;
  min-height: 100%;
}

.cal-weekday-header {
  padding: 0.5rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.cal-day {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.25rem;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
  transition: background 100ms ease;
}

.cal-day:nth-child(7n) {
  border-right: none;
}

.cal-day:hover {
  background: var(--accent);
}

.cal-day.other-month {
  opacity: 0.35;
  background: var(--cal-other-bg);
}

.cal-day.today {
  background: var(--cal-today-bg);
}

.cal-day.today .cal-day-number {
  background: var(--accent-blue);
  color: var(--primary-foreground);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.cal-day-number {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 2px;
  display: inline-block;
  padding: 1px 4px;
}

.cal-event {
  font-size: 0.7rem;
  padding: 1px 4px;
  margin-bottom: 1px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.4;
  transition: filter 100ms ease;
}

.cal-event:hover {
  filter: brightness(1.15);
}

.cal-event-timed {
  background: var(--cal-event-bg);
  color: var(--cal-event-fg);
}

.cal-event-allday {
  background: var(--cal-event-muted);
  color: var(--cal-event-muted-fg);
  font-weight: 600;
}

.cal-event-more {
  font-size: 0.65rem;
  color: var(--muted-foreground);
  padding: 0 4px;
  cursor: pointer;
}

.cal-event-more:hover {
  color: var(--foreground);
}

/* Week view */
/* Column count is set inline per view (--cal-days), so week and 3-day share
   this grid. Falls back to a full week. */
.cal-week {
  display: grid;
  grid-template-columns: 60px repeat(var(--cal-days, 7), 1fr);
  height: 100%;
  overflow: auto;
}

.cal-week-header {
  display: contents;
}

.cal-week-header-cell {
  padding: 0.5rem 0.25rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}

.cal-week-header-cell .cal-week-day-num {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
}

.cal-week-header-cell.today .cal-week-day-num {
  background: var(--accent-blue);
  color: #fff;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cal-week-time-gutter {
  font-size: 0.65rem;
  color: var(--muted-foreground);
  text-align: right;
  padding: 0 6px 0 0;
  border-right: 1px solid var(--border);
  height: 48px;
  position: relative;
}

.cal-week-time-gutter span {
  position: relative;
  top: -0.5em;
}

.cal-week-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  height: 48px;
  position: relative;
}

.cal-week-cell:nth-child(8n) {
  border-right: none;
}

.cal-week-event {
  position: absolute;
  left: 2px;
  right: 2px;
  background: var(--cal-event-bg);
  color: var(--cal-event-fg);
  font-size: 0.65rem;
  padding: 2px 4px;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  line-height: 1.3;
}

.cal-week-event:hover {
  filter: brightness(1.15);
}

/* Day view */
.cal-day-view {
  display: grid;
  grid-template-columns: 60px 1fr;
  overflow: auto;
  height: 100%;
}

.cal-day-header {
  grid-column: 1 / -1;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}

.cal-day-time-gutter {
  font-size: 0.65rem;
  color: var(--muted-foreground);
  text-align: right;
  padding: 0 6px 0 0;
  border-right: 1px solid var(--border);
  height: 48px;
  position: relative;
}

.cal-day-time-gutter span {
  position: relative;
  top: -0.5em;
}

.cal-day-slot {
  border-bottom: 1px solid var(--border);
  height: 48px;
  position: relative;
}

.cal-day-event {
  position: absolute;
  left: 4px;
  right: 4px;
  background: var(--cal-event-bg);
  color: var(--cal-event-fg);
  font-size: 0.75rem;
  padding: 4px 6px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
}

.cal-day-event:hover {
  filter: brightness(1.15);
}

/* Event popover */
.cal-event-popover {
  position: fixed;
  z-index: 1000;
  width: 340px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  overflow: hidden;
}

.cal-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.cal-popover-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--foreground);
}

.cal-popover-body {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cal-popover-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

.cal-popover-row .material-symbols-outlined {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.cal-popover-gcal-link {
  margin-top: 0.5rem;
  text-align: center;
  text-decoration: none;
  font-size: 0.8rem;
}

.cal-popover-close {
  font-size: 1.2rem;
}

/* ========== PWA Install & Notification Banners ========== */
.pwa-install-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-width: 480px;
  width: calc(100% - 2rem);
  transition: transform 0.3s ease;
}

.pwa-install-banner.visible {
  transform: translateX(-50%) translateY(0);
}

[data-theme="dark"] .pwa-install-banner {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pwa-install-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.pwa-install-text strong {
  font-size: 0.85rem;
}

.pwa-install-text span {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.pwa-install-dismiss {
  background: none;
  border: none;
  color: var(--muted-foreground);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

/* ========== Unread Indicators (Discord-style) ========== */
.channel-item {
  position: relative;
}

.channel-item .channel-name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* White unread dot - left pill indicator */
.channel-item.has-unread::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 8px;
  border-radius: 0 4px 4px 0;
  background: var(--foreground);
  transition: height 0.15s ease;
}

.channel-item.has-unread:hover::before {
  height: 16px;
}

.channel-item.active::before {
  height: 24px;
}

/* Bold text for unread channels */
.channel-item.has-unread {
  font-weight: 600;
  color: var(--foreground);
}

/* Draft pencil - marks a channel holding unsent text. Sits on ::after because
   ::before is the unread pill, and stays muted so it reads as a hint rather
   than competing with the unread and mention indicators. */
.channel-item.has-draft::after {
  content: 'edit';
  font-family: 'Material Symbols Outlined';
  font-size: 14px;
  line-height: 1;
  margin-left: auto;
  padding-left: 0.35rem;
  color: var(--muted-foreground);
  opacity: 0.75;
  flex-shrink: 0;
}

/* A mention badge already claims the right-hand slot, so the pencil gives way
   rather than pushing it out of the row. */
.channel-item.has-draft:has(.mention-badge)::after {
  margin-left: 0.35rem;
}

/* Red mention badge */
.mention-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ed4245;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}

/* Muted channel styling */
.channel-item.muted {
  opacity: 0.4;
}

.channel-item.muted.has-unread::before {
  display: none;
}

.channel-item.muted .mention-badge {
  opacity: 0.5;
}

/* ========== @Mention Autocomplete ========== */
.mention-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  margin-bottom: 4px;
  z-index: 100;
  display: none;
}

[data-theme="dark"] .mention-popup {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.mention-item:hover,
.mention-item.selected {
  background: var(--accent);
}

.mention-item .avatar {
  flex-shrink: 0;
}

/* ========== Slash Command Popup ========== */
.slash-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  margin-bottom: 4px;
  z-index: 100;
  display: none;
}

[data-theme="dark"] .slash-popup {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

.slash-popup-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 100ms ease;
}

.slash-popup-item:hover,
.slash-popup-item.active {
  background: hsl(var(--accent));
}

.slash-popup-name {
  font-weight: 600;
  color: hsl(var(--foreground));
  min-width: 80px;
}

.slash-popup-desc {
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
}

/* ========== Ephemeral Messages ========== */
.ephemeral-message {
  padding: 0.3rem 1.5rem;
  opacity: 0.7;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  animation: ephemeral-fade 10s ease-out forwards;
}

@keyframes ephemeral-fade {
  0%, 80% { opacity: 0.7; }
  100% { opacity: 0; }
}

/* ========== Command Modal Extras ========== */
.poll-option-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.poll-option-row .form-input {
  flex: 1;
}

.poll-remove-opt {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: none;
  background: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font-size: 1.1rem;
}

.poll-remove-opt:hover {
  background: hsl(var(--destructive));
  color: white;
}

/* ========== @Mention Highlights in Messages ========== */
.mention {
  background: rgba(55, 85, 195, 0.15);
  color: var(--accent-blue);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 600;
  cursor: default;
}

.mention-me {
  background: rgba(55, 85, 195, 0.25);
}

.mention-everyone {
  background: var(--warning-muted);
  color: var(--warning);
}

[data-theme="dark"] .mention {
  background: rgba(55, 85, 195, 0.3);
}

[data-theme="dark"] .mention-me {
  background: rgba(55, 85, 195, 0.45);
}

/* mention-everyone now uses CSS variables - no separate dark rule needed */

/* ========== Reply Styles ========== */
/* Reply reference - compact original message above */
.reply-reference {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0 0.25rem 3.25rem;
  margin-bottom: 0.1rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  cursor: pointer;
  position: relative;
}

/* Curved connector: starts at avatar center, goes up and right to the reply text */
.reply-ref-connector {
  position: absolute;
  left: 1.25rem;
  bottom: 0;
  width: 1.5rem;
  height: 50%;
  border-left: 2px solid var(--border);
  border-top: 2px solid var(--border);
  border-top-left-radius: 6px;
  pointer-events: none;
}

.reply-reference:hover {
  color: var(--foreground);
}

.reply-reference:hover .reply-ref-connector {
  border-color: var(--muted-foreground);
}

.avatar-xxs {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.reply-author {
  font-weight: 600;
  color: var(--accent-blue);
  flex-shrink: 0;
  font-size: 0.75rem;
}

.reply-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 0.75rem;
}

.reply-reference:hover .reply-snippet {
  color: var(--foreground);
}

/* ========== GIF picker ========== */
.giphy-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  max-height: 340px;
  overflow-y: auto;
}

@media (max-width: 480px) {
  .giphy-results {
    grid-template-columns: repeat(2, 1fr);
  }
}

.giphy-item {
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--secondary);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

/* Subtle lift on focus/hover rather than a full inversion. */
.giphy-item:hover,
.giphy-item:focus-visible {
  border-color: var(--accent-blue);
  outline: none;
}

.giphy-item img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.giphy-status {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.5rem 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

/* Thread footer - the "N replies" strip under a message that opened a thread.
   It is the only route into a thread's replies, so it sits inline in the
   message body rather than hiding behind a hover action. */
.thread-footer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  background: none;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  /* Normal text colour rather than the brand accent, which reads as maroon in
     light mode. This is near-white in dark mode and near-black in light. */
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  margin-top: 0.2rem;
  text-align: left;
}

/* A gentle lift off the message background, matching the thread panel rows. */
.thread-footer:hover {
  background: var(--accent);
  border-color: var(--border);
}

.thread-footer-faces {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Overlapping faces, each ringed in the page background so they read as a
   stack rather than a smear. */
.thread-footer-faces .avatar {
  margin-right: -0.3rem;
  border: 1.5px solid var(--background);
  border-radius: 50%;
}

.thread-footer-faces .avatar:last-child {
  margin-right: 0.15rem;
}

.thread-footer-count {
  white-space: nowrap;
}

.thread-footer-time {
  /* --muted-foreground is a hex, so it must not be wrapped in hsl(): that
     produces an invalid colour, the declaration is dropped, and the text
     silently inherits the footer's colour instead. */
  color: var(--muted-foreground);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-footer-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--muted-foreground);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.thread-footer:hover .thread-footer-chevron {
  opacity: 1;
}

/* Quoted reference shown when a reply targets another reply inside a thread. */
.thread-reply-quote {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.6875rem;
  padding-left: 0.5rem;
  margin-bottom: 0.15rem;
  border-left: 2px solid var(--border);
  color: var(--muted-foreground);
  overflow: hidden;
}

.thread-reply-quote .reply-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== Thread Panel ========== */
.thread-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  height: 100%;
  background: var(--background);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: -4px 0 12px rgba(0,0,0,0.08);
}

.thread-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.thread-panel-header h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
}

.thread-panel-close {
  font-size: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  padding: 0.25rem;
  border-radius: 0.25rem;
}

.thread-panel-close:hover {
  background: var(--accent);
  color: var(--foreground);
}

.thread-parent {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.thread-divider {
  padding: 0.4rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.thread-replies {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.thread-reply {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
}

.thread-reply:hover {
  background: var(--accent);
}

.thread-input-area {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  align-items: flex-end;
}

.thread-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  background: var(--background);
  color: var(--foreground);
  min-height: 2.25rem;
  max-height: 6rem;
}

.thread-input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

@media (max-width: 768px) {
  .thread-panel {
    width: 100%;
  }
}

/* ========== Link Previews ========== */
.link-preview {
  margin-top: 0.4rem;
  max-width: 420px;
  border-left: 3px solid var(--accent-blue);
  border-radius: 0.25rem;
  overflow: hidden;
  background: var(--secondary);
}

.link-preview-inner {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: inherit;
}

.link-preview-inner:hover {
  background: var(--accent);
}

.link-preview-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.link-preview-text {
  min-width: 0;
  flex: 1;
}

.link-preview-site {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.15rem;
}

.link-preview-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-blue);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-preview-desc {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

/* ========== Activity Feed ========== */
.activity-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.activity-item:hover {
  background: var(--accent);
}

.activity-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  border-radius: 50%;
  color: hsl(var(--muted-foreground));
}

.activity-icon .material-symbols-outlined {
  font-size: 16px;
}

.activity-body {
  min-width: 0;
  flex: 1;
}

.activity-label {
  font-size: 0.8125rem;
  line-height: 1.4;
}

.activity-snippet {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-time {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.2rem;
}

.activity-filter {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
}

.activity-filter.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* ========== Files Grid ========== */
.files-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  align-content: start;
}

.file-card {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

.file-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.file-card-preview {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.file-card-icon {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: hsl(var(--muted-foreground));
}

.file-card-icon .material-symbols-outlined {
  font-size: 36px;
}

.file-card-info {
  padding: 0.5rem 0.625rem;
}

.file-card-name {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-card-meta {
  display: flex;
  gap: 0.4rem;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.2rem;
  flex-wrap: wrap;
}

.file-card-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 0.4rem;
}

.file-card-date {
  font-size: 0.625rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.15rem;
}

.files-filter {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
}

.files-filter.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

.message.highlight {
  background: rgba(55, 85, 195, 0.1);
  transition: background 0.3s ease;
}

[data-theme="dark"] .message.highlight {
  background: rgba(55, 85, 195, 0.2);
}

/* ========== Profile Card ========== */
.profile-card {
  position: fixed;
  z-index: 3500;
  width: 280px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

[data-theme="dark"] .profile-card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.profile-card-banner {
  height: 48px;
  opacity: 0.8;
}

.profile-card-body {
  position: relative;
  z-index: 1;
  padding: 0 1rem 1rem;
  margin-top: -24px;
}

.profile-card-avatar {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid var(--card);
  object-fit: cover;
}

.profile-card-name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.25rem 0 0;
}

.profile-card-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.15rem;
}

.profile-card-status .status-dot {
  position: static;
  width: 8px;
  height: 8px;
}

.profile-card-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.profile-card-role {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border: 1.5px solid;
  border-radius: 4px;
  background: transparent;
}

.profile-card-status-text {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-style: italic;
  margin-top: 0.15rem;
}

.profile-card-status-edit {
  margin-top: 0.4rem;
}

.profile-card-meta {
  font-size: 0.7rem;
  color: var(--muted-foreground);
  margin-top: 0.5rem;
}

/* ========== Quick Switcher (Cmd+K) ========== */
.quick-switcher {
  align-items: flex-start;
  padding-top: 15vh;
}

.quick-switcher-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 480px;
  max-width: 90vw;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

[data-theme="dark"] .quick-switcher-box {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.quick-switcher-box .form-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background: transparent;
}

.qs-results {
  max-height: 300px;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.qs-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.qs-item:hover,
.qs-item.selected {
  background: var(--accent);
}

.qs-icon {
  width: 20px;
  text-align: center;
  opacity: 0.6;
}

.qs-empty {
  padding: 1rem;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.85rem;
}

/* ========== Bookmark Button ========== */
.bookmark-btn.bookmarked {
  color: hsl(var(--primary));
}

/* ========== Bookmarks Page ========== */
.bookmarks-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.bookmarks-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}

.bookmarks-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.bookmarks-search-wrap {
  max-width: 400px;
}

.bookmarks-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.bookmark-item {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 150ms ease;
  border: 1px solid transparent;
}

.bookmark-item:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--border));
}

.bookmark-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
}

.bookmark-author {
  font-weight: 600;
}

.bookmark-channel {
  color: hsl(var(--muted-foreground));
}

.bookmark-time {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  margin-left: auto;
}

.bookmark-remove {
  opacity: 0;
  transition: opacity 150ms ease;
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
}

.bookmark-item:hover .bookmark-remove {
  opacity: 1;
}

.bookmark-remove:hover {
  color: hsl(var(--destructive));
}

.bookmark-content {
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--foreground));
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.bookmark-attachments {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

.bookmarks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.bookmarks-loading {
  text-align: center;
  padding: 2rem;
  color: hsl(var(--muted-foreground));
}

/* ========== User Settings Popup ========== */
.user-settings-popup {
  position: fixed;
  z-index: 5000;
  width: 280px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

[data-theme="dark"] .user-settings-popup {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.user-settings-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--accent);
  border-bottom: 1px solid var(--border);
}

.user-settings-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.user-settings-email {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.user-settings-section {
  padding: 0.5rem 1rem;
}

.user-settings-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  margin-bottom: 0.35rem;
}

.user-settings-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.user-settings-theme-btns {
  display: flex;
  gap: 0.35rem;
}

.user-settings-divider {
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0;
}

.user-settings-logout {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.85rem;
  color: var(--danger);
  cursor: pointer;
  transition: background 150ms ease;
}

.user-settings-logout:hover {
  background: var(--accent);
}

/* ========== Emoji Picker (emoji-mart) ========== */
.emoji-picker-container {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  z-index: 2000;
}

/* Override emoji-mart shadow DOM styles where possible */
.emoji-picker-container {
  max-width: calc(100vw - 16px);
  overflow: hidden;
}

.emoji-picker-container em-emoji-picker {
  --border-radius: 12px;
  --font-family: inherit;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 640px) {
  .emoji-picker-container {
    right: -0.5rem;
    left: -0.5rem;
  }
  .emoji-picker-container em-emoji-picker {
    width: 100% !important;
  }
}

/* ---- Acknowledgment Messages ---- */
.ack-message {
  border-left: 3px solid var(--away);
  background: var(--warning-muted);
  border-radius: 0.25rem;
  padding-left: 0.75rem;
}

.ack-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ack-btn-pending {
  background: var(--accent-blue);
  color: var(--primary-foreground);
}
.ack-btn-pending:hover {
  background: var(--accent-blue-hover);
}

.ack-btn-done {
  background: var(--success-muted);
  color: var(--success);
  cursor: default;
}

.ack-badge {
  transition: all 0.15s ease;
}
.ack-badge:hover {
  opacity: 0.8;
}

/* ========== Social Enhancements (post types) ========== */

/* Composer type tabs */
.social-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  color: hsl(var(--muted-foreground));
  background: var(--secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.social-type-tab:hover { background: var(--accent); }
.social-type-tab.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Feed type filter chips */
.social-type-filter {
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 999px;
  color: hsl(var(--muted-foreground));
  background: var(--secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.social-type-filter:hover { background: var(--accent); }
.social-type-filter.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Type ribbon on cards */
.social-type-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 0.25rem;
  color: #fff;
}
.social-type-ribbon.type-announcement { background: hsl(25 95% 53%); }
.social-type-ribbon.type-question { background: hsl(262 83% 58%); }
.social-type-ribbon.type-poll { background: var(--accent-blue); }
.social-type-ribbon.type-praise { background: hsl(142 71% 45%); }

/* Type accent borders */
.social-post.type-announcement { border-left: 3px solid hsl(25 95% 53%); }
.social-post.type-praise { border-left: 3px solid hsl(142 71% 45%); }

.social-answered {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: hsl(142 71% 40%);
}

/* Polls */
.social-poll { display: flex; flex-direction: column; gap: 0.35rem; }
.social-poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--background);
  cursor: pointer;
  overflow: hidden;
  font-size: 0.8125rem;
  transition: border-color 0.15s ease;
}
.social-poll-opt:hover:not(:disabled) { border-color: var(--accent-blue); }
.social-poll-opt:disabled { cursor: default; }
.social-poll-opt.voted { border-color: var(--accent-blue); }
.poll-opt-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(232, 74, 130, 0.15);
  transition: width 0.4s ease;
  z-index: 0;
}
.poll-opt-text { position: relative; z-index: 1; }
.poll-opt-pct {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}
.social-poll-meta {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.1rem;
}

/* Praise banner */
.social-praise-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: hsl(142 71% 45% / 0.08);
  border: 1px solid hsl(142 71% 45% / 0.25);
  border-radius: 0.375rem;
  flex-wrap: wrap;
}
.praise-badge-chip {
  font-size: 0.8125rem;
  font-weight: 700;
  color: hsl(142 71% 35%);
}
[data-theme="dark"] .praise-badge-chip { color: hsl(142 71% 60%); }
.praise-recipient {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* Praise composer badge options */
.social-badge-opt {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  background: var(--secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.social-badge-opt:hover { background: var(--accent); }
.social-badge-opt.active {
  background: hsl(142 71% 45% / 0.15);
  border-color: hsl(142 71% 45%);
}

/* Announcement meta (seen-by + ack) */
.social-ann-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.ann-seen {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
}
.ann-acked {
  font-size: 0.7rem;
  font-weight: 600;
  color: hsl(142 71% 40%);
}
.social-ack-btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 0.375rem;
  background: hsl(25 95% 53%);
  color: #fff;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s ease;
}
.social-ack-btn:hover { opacity: 0.9; }

/* Clickable "seen by / acknowledged" (author + mods) */
.ann-seen-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.ann-seen-btn:hover { color: var(--accent-blue); }

/* Acknowledgement status modal */
.ack-status-modal {
  width: 420px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.ack-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.5rem;
}
.ack-status-header h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.ack-status-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--border);
}
.ack-status-tab {
  flex: 1;
  padding: 0.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.ack-status-tab.active {
  color: var(--foreground);
  border-bottom-color: var(--accent-blue);
}
.ack-tab-count {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--muted-foreground);
}
.ack-status-tab.active .ack-tab-count {
  background: var(--accent-blue);
  color: #fff;
}
.ack-status-body {
  padding: 0.5rem 1.25rem 1rem;
  overflow-y: auto;
}
.ack-status-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
}
.ack-status-name { font-size: 0.85rem; flex: 1; min-width: 0; }
.ack-status-time { font-size: 0.7rem; color: var(--muted-foreground); }
.ack-status-empty, .ack-status-loading {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  padding: 1.5rem 0;
}

/* Best answer highlight */
.social-comment.best-answer {
  background: hsl(142 71% 45% / 0.08);
  border-radius: 0.375rem;
  padding: 0.4rem;
  margin: -0.2rem 0;
}
.best-answer-label {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: hsl(142 71% 40%);
  margin-left: 0.3rem;
}

/* Praise recipient dropdown */
#social-praise-dropdown { max-height: 12rem; }

/* Composer dropdowns must paint above the textarea/fields below them.
   Don't rely on the CDN Tailwind z-50 utility, force it here. */
#social-group-picker,
#social-praise-fields > .relative {
  position: relative;
  z-index: 60;
}
#social-group-picker-dropdown,
#social-praise-dropdown {
  z-index: 60;
}

/* Mobile: type tabs scroll horizontally */
@media (max-width: 768px) {
  #social-type-tabs, #social-type-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .social-type-tab, .social-type-filter { flex-shrink: 0; }
}