/* =============================================================================
   discord-sim.css — Alloy cinematic redesign · SA-2 Discord UI Component Kit
   -----------------------------------------------------------------------------
   Pixel-faithful Discord DARK-THEME component library, rebuilt in original CSS.
   Single source of truth for values: docs/alloy/discord-reference/discord-tokens.json
   (SA-1). Every hex / spacing below is mirrored from that token file within the
   project's ~2px / exact-hex tolerance.

   SCOPING
   - All design tokens are namespaced `--discord-*` so they NEVER collide with the
     warm-cream cinematic page tokens (--bg, --accent, …) when a sim island is
     mounted into Act 1 / Act 4 of site/index.html.
   - All component classes are namespaced `ds-*` and live under a `.discord-sim`
     root so the styles are self-contained and portable.

   FONTS (offline substitution)
   - Discord ships proprietary "gg sans" + "gg mono". We are NOT allowed to bundle
     them. This file substitutes "Inter" / "JetBrains Mono" and otherwise falls
     back to the system UI sans. NO @import / NO CDN — renders fully offline.
     Anywhere "pixel-faithful" is claimed, it is modulo the gg sans → Inter swap.

   TRADEMARK
   - Rebuild every glyph/shape (hash, BOT tag, presence dots, picker, send) in CSS
     or original SVG. Do NOT embed Discord's logo / wordmark / Clyde assets.
   ============================================================================= */

:root {
  /* ---- Backgrounds (tokens.color.background) ---- */
  --discord-bg-primary:        #313338; /* main chat column */
  --discord-bg-secondary:      #2b2d31; /* channel sidebar, member list, embed */
  --discord-bg-secondary-alt:  #232428; /* user-panel footer strip */
  --discord-bg-tertiary:       #1e1f22; /* guild rail, deepest frame */
  --discord-bg-quaternary:     #181a1e; /* rare deepest well */
  --discord-bg-floating:       #111214; /* popouts, tooltips, command picker */
  --discord-channeltextarea-bg:#383a40; /* composer input fill */
  --discord-bg-modifier-hover:    rgba(78, 80, 88, 0.30);
  --discord-bg-modifier-selected: rgba(78, 80, 88, 0.60);
  --discord-bg-modifier-active:   rgba(78, 80, 88, 0.48);
  --discord-bg-message-hover:     #2e3035;
  --discord-bg-mentioned:         rgba(88, 101, 242, 0.10);
  --discord-bg-mentioned-hover:   rgba(88, 101, 242, 0.08);

  /* ---- Text (tokens.color.text) ---- */
  --discord-header-primary:    #f2f3f5;
  --discord-text-normal:       #dbdee1;
  --discord-header-secondary:  #b5bac1;
  --discord-text-muted:        #949ba4;
  --discord-text-faint:        #80848e;
  --discord-text-link:         #00a8fc;
  --discord-text-positive:     #2dc770;
  --discord-text-warning:      #f0b232;
  --discord-text-danger:       #fa777c;
  --discord-text-brand:        #c9cdfb;
  --discord-channels-default:  #949ba4;
  --discord-interactive-normal:#b5bac1;
  --discord-interactive-hover: #dbdee1;
  --discord-interactive-active:#ffffff;
  --discord-interactive-muted: #4e5058;

  /* ---- Brand / blurple (tokens.color.brand) ---- */
  --discord-brand-500: #5865f2; /* primary blurple */
  --discord-brand-560: #4752c4; /* hover/pressed */
  --discord-brand-600: #3c45a5; /* deepest pressed */
  --discord-brand-360: #7984f5; /* lighter tint */
  --discord-blurple-legacy: #7289da;

  /* ---- Semantic / status (tokens.color.semantic) ---- */
  --discord-status-online:  #23a55a;
  --discord-status-idle:    #f0b232;
  --discord-status-dnd:     #f23f43;
  --discord-status-offline: #80848e;
  --discord-green:  #23a55a;
  --discord-red:    #f23f43;
  --discord-yellow: #f0b232;

  /* ---- Role color examples (tokens.color.role_color_examples) ---- */
  --discord-role-admin:     #f04747;
  --discord-role-moderator: #5865f2;
  --discord-role-vip:       #faa61a;
  --discord-role-teal:      #1abc9c;
  --discord-role-green:     #2ecc71;
  --discord-role-blue:      #3498db;
  --discord-role-purple:    #9b59b6;
  --discord-role-magenta:   #e91e63;
  --discord-role-orange:    #e67e22;
  --discord-role-grey:      #99aab5;

  /* ---- Scrollbar (tokens.color.scrollbar) ---- */
  --discord-scrollbar-thumb: #1a1b1e;
  --discord-scrollbar-track: #2b2d31;

  /* ---- Typography (tokens.typography) ---- */
  --discord-font-primary: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --discord-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, Monaco, monospace;

  /* ---- Radii (tokens.radius) ---- */
  --discord-radius-xs: 4px;  /* embed, channel row, button-legacy */
  --discord-radius-sm: 8px;  /* composer, reaction pill, tooltip, picker */
  --discord-radius-md: 16px; /* guild icon squircle */

  /* ---- Elevation (tokens.elevation) ---- */
  --discord-elevation-low: 0 1px 0 rgba(4,4,5,0.2), 0 1.5px 0 rgba(6,6,7,0.05), 0 2px 0 rgba(4,4,5,0.05);
  --discord-elevation-medium: 0 4px 4px rgba(0,0,0,0.16);
  --discord-elevation-high: 0 8px 16px rgba(0,0,0,0.24);

  /* ---- Layout (tokens.layout) ---- */
  --discord-guild-rail-w:     72px;
  --discord-channel-sidebar-w:240px;
  --discord-member-list-w:    240px;
  --discord-channel-header-h: 48px;

  /* Deep frame behind a sim island ("island" feel on cream page) */
  --discord-island-frame: #0b0c0e;
}

/* =============================================================================
   ROOT / APP SHELL
   ============================================================================= */

.discord-sim,
.discord-sim * { box-sizing: border-box; }

.discord-sim {
  font-family: var(--discord-font-primary);
  font-size: 16px;
  line-height: 1.375; /* canonical 22px @ 16px message line-height */
  color: var(--discord-text-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The actual flex client island. Use .ds-app inside .discord-sim, or apply both. */
.ds-app {
  display: flex;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  background: var(--discord-bg-tertiary);
}

/* Optional outer frame helper for standalone showcase / fixture */
.ds-frame {
  background: var(--discord-island-frame);
}

/* -------------------- Guild rail (72px) -------------------- */
.ds-guild-rail {
  width: var(--discord-guild-rail-w);
  flex: 0 0 var(--discord-guild-rail-w);
  background: var(--discord-bg-tertiary);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow-y: auto;
}
.ds-guild {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--discord-bg-primary);
  color: var(--discord-interactive-active);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  transition: border-radius .15s ease, background .15s ease;
  user-select: none;
}
.ds-guild:hover { border-radius: var(--discord-radius-md); background: var(--discord-brand-500); }
.ds-guild.is-active { border-radius: var(--discord-radius-md); background: var(--discord-brand-500); }
/* white pill indicator (4×40 active, 4×20 hover) */
.ds-guild::before {
  content: "";
  position: absolute;
  left: -16px;
  width: 4px;
  height: 0;
  background: #fff;
  border-radius: 0 4px 4px 0;
  transition: height .15s ease;
}
.ds-guild:hover::before { height: 20px; }
.ds-guild.is-active::before { height: 40px; }
.ds-guild.is-home { background: var(--discord-brand-500); border-radius: var(--discord-radius-md); }
.ds-guild.is-add { background: var(--discord-bg-primary); color: var(--discord-green); font-size: 24px; }
.ds-guild.is-add:hover { background: var(--discord-green); color: #fff; }
.ds-rail-divider { width: 32px; height: 2px; background: #2b2d31; border-radius: 1px; margin: 4px 0; }

/* -------------------- Channel sidebar (240px) -------------------- */
.ds-sidebar {
  width: var(--discord-channel-sidebar-w);
  flex: 0 0 var(--discord-channel-sidebar-w);
  background: var(--discord-bg-secondary);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ds-server-header {
  height: var(--discord-channel-header-h);
  flex: 0 0 var(--discord-channel-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-weight: 600;
  font-size: 15px;
  color: var(--discord-header-primary);
  box-shadow: var(--discord-elevation-low);
  cursor: pointer;
}
.ds-server-header .ds-chev { color: var(--discord-header-secondary); font-size: 12px; }
.ds-channel-scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.ds-cat {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 18px 8px 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--discord-header-secondary);
  cursor: pointer;
}
.ds-cat .ds-caret { font-size: 10px; }
.ds-channel {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  margin: 1px 0;
  border-radius: var(--discord-radius-xs);
  color: var(--discord-channels-default);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
}
.ds-channel .ds-hash { font-size: 20px; color: var(--discord-text-muted); line-height: 1; font-weight: 400; }
.ds-channel:hover { background: var(--discord-bg-modifier-hover); color: var(--discord-interactive-hover); }
.ds-channel:hover .ds-hash { color: var(--discord-interactive-hover); }
.ds-channel.is-active { background: var(--discord-bg-modifier-selected); color: var(--discord-interactive-active); }
.ds-channel.is-active .ds-hash { color: var(--discord-interactive-active); }
.ds-channel.is-unread { color: var(--discord-header-primary); }
.ds-channel.is-unread::before {
  content: ""; position: absolute; left: -8px; width: 4px; height: 8px;
  background: #fff; border-radius: 0 4px 4px 0;
}
.ds-channel .ds-mention-badge {
  margin-left: auto; background: var(--discord-red); color: #fff;
  font-size: 12px; font-weight: 700; border-radius: 8px; padding: 0 6px;
  min-width: 16px; text-align: center; line-height: 16px;
}

/* user panel footer */
.ds-user-panel {
  flex: 0 0 auto;
  background: var(--discord-bg-secondary-alt);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-user-panel .ds-avatar { width: 32px; height: 32px; font-size: 13px; }
.ds-user-panel .ds-u-meta { line-height: 1.1; min-width: 0; }
.ds-user-panel .ds-u-name { font-size: 14px; font-weight: 600; color: var(--discord-header-primary); }
.ds-user-panel .ds-u-sub { font-size: 12px; color: var(--discord-text-muted); }
.ds-user-panel .ds-u-icons { margin-left: auto; display: flex; gap: 4px; }

.ds-icon-btn {
  width: 32px; height: 32px; border-radius: var(--discord-radius-xs);
  display: flex; align-items: center; justify-content: center;
  color: var(--discord-interactive-normal); cursor: pointer; font-size: 16px;
  background: none; border: 0;
}
.ds-icon-btn:hover { background: var(--discord-bg-modifier-hover); color: var(--discord-interactive-hover); }

/* -------------------- Main chat column -------------------- */
.ds-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--discord-bg-primary);
  min-width: 0;
  min-height: 0;
}
.ds-channel-header {
  height: var(--discord-channel-header-h);
  flex: 0 0 var(--discord-channel-header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  box-shadow: var(--discord-elevation-low);
  z-index: 2;
}
.ds-channel-header .ds-hash { font-size: 24px; color: var(--discord-channels-default); font-weight: 400; line-height: 1; }
.ds-channel-header .ds-ch-name { font-weight: 600; font-size: 16px; color: var(--discord-header-primary); }
.ds-channel-header .ds-ch-sep { width: 1px; height: 24px; background: #3f4147; margin: 0 8px; }
.ds-channel-header .ds-ch-topic { font-size: 14px; color: var(--discord-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-channel-header .ds-ch-actions { margin-left: auto; display: flex; gap: 8px; }

/* -------------------- Thread banner -------------------- */
/* Breadcrumb header shown when a thread panel is open (atlas §11). */
.ds-thread-banner {
  height: var(--discord-channel-header-h);
  flex: 0 0 var(--discord-channel-header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--discord-bg-primary);
  box-shadow: var(--discord-elevation-low);
  z-index: 2;
  font-size: 14px;
}
.ds-thread-banner .ds-tb-icon { color: var(--discord-interactive-normal); display: inline-flex; }
.ds-thread-banner .ds-tb-parent { color: var(--discord-text-muted); }
.ds-thread-banner .ds-tb-parent .ds-hash { font-size: 16px; vertical-align: -1px; }
.ds-thread-banner .ds-tb-sep { color: var(--discord-text-muted); }
.ds-thread-banner .ds-tb-name { color: var(--discord-header-primary); font-weight: 600; }
.ds-thread-banner .ds-tb-close { margin-left: auto; }

/* -------------------- Messages -------------------- */
.ds-chat {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: 24px;
}
.ds-day-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 16px 0; color: var(--discord-text-muted); font-size: 12px; font-weight: 600;
}
.ds-day-divider::before, .ds-day-divider::after { content: ""; flex: 1; height: 1px; background: #3f4147; }

.ds-msg {
  position: relative;
  padding: 2px 48px 2px 72px; /* 72px text offset = 16 gutter + 40 avatar + 16 gap */
  margin-top: 17px;           /* group top margin */
}
.ds-msg.is-grouped { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }
.ds-msg:hover { background: var(--discord-bg-message-hover); }
.ds-msg.is-mentioned { background: var(--discord-bg-mentioned); box-shadow: inset 2px 0 0 var(--discord-brand-500); }
.ds-msg.is-mentioned:hover { background: var(--discord-bg-mentioned-hover); }
.ds-msg > .ds-avatar {
  position: absolute; left: 16px; top: 2px;
  width: 40px; height: 40px;
}
.ds-msg-head { display: flex; align-items: baseline; gap: 8px; line-height: 22px; flex-wrap: wrap; }
.ds-msg-author { font-size: 16px; font-weight: 500; color: var(--discord-header-primary); }
.ds-msg-time { font-size: 12px; color: var(--discord-text-muted); }
.ds-msg-body { font-size: 16px; line-height: 22px; color: var(--discord-text-normal); }
.ds-msg-body p { margin: 0; }
.ds-msg-body p + p { margin-top: 4px; }
.ds-msg.is-grouped .ds-gutter-time {
  position: absolute; left: 0; width: 72px; top: 3px;
  text-align: center; font-size: 11px; color: var(--discord-text-muted);
  opacity: 0; transition: opacity .08s;
}
.ds-msg.is-grouped:hover .ds-gutter-time { opacity: 1; }

/* Compact message variant — denser rows, 32px avatar, reduced offset. */
.ds-msg.is-compact { padding-left: 56px; margin-top: 8px; }
.ds-msg.is-compact > .ds-avatar { width: 32px; height: 32px; top: 2px; left: 16px; }
.ds-msg.is-compact .ds-msg-head { line-height: 20px; }

/* Role-tinted usernames (also settable via inline color) */
.ds-role-admin     { color: var(--discord-role-admin); }
.ds-role-moderator { color: var(--discord-role-moderator); }
.ds-role-vip       { color: var(--discord-role-vip); }
.ds-role-teal      { color: var(--discord-role-teal); }
.ds-role-green     { color: var(--discord-role-green); }
.ds-role-blue      { color: var(--discord-role-blue); }
.ds-role-purple    { color: var(--discord-role-purple); }
.ds-role-magenta   { color: var(--discord-role-magenta); }
.ds-role-orange    { color: var(--discord-role-orange); }
.ds-role-grey      { color: var(--discord-role-grey); }
.ds-role-brand     { color: var(--discord-brand-360); }

/* -------------------- Bot tag (Grunt = "BOT") -------------------- */
.ds-bot-tag {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--discord-brand-500); color: #fff;
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  padding: 0 4px; height: 15px; border-radius: var(--discord-radius-xs);
  vertical-align: middle; letter-spacing: 0.02em; line-height: 15px;
}
.ds-bot-tag .ds-check { width: 9px; height: 9px; display: inline-block; }

/* -------------------- Inline mention pill / link / code -------------------- */
.ds-mention {
  background: rgba(88,101,242,0.30); color: var(--discord-text-brand);
  padding: 0 2px; border-radius: 3px; font-weight: 500; cursor: pointer;
}
.ds-mention:hover { background: var(--discord-brand-500); color: #fff; }
.ds-inline-code {
  font-family: var(--discord-font-mono); font-size: 0.85em;
  background: #2b2d31; padding: 1px 4px; border-radius: var(--discord-radius-xs);
  color: #e3e5e8;
}
.ds-link { color: var(--discord-text-link); text-decoration: none; }
.ds-link:hover { text-decoration: underline; }

/* -------------------- Avatars (original CSS — no Discord assets) -------------------- */
.ds-avatar {
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; color: #fff; flex: 0 0 auto;
  background: var(--discord-brand-500);
  position: relative;
  overflow: visible;
  font-size: 15px;
  user-select: none;
}
.ds-avatar.av-grunt { background: linear-gradient(135deg, #5865f2, #7984f5); }
.ds-avatar.av-owner { background: linear-gradient(135deg, #c17f59, #b8860b); }
.ds-avatar.av-mara  { background: linear-gradient(135deg, #1abc9c, #16a085); }
.ds-avatar.av-you   { background: linear-gradient(135deg, #3498db, #2980b9); }
.ds-avatar.av-muted { background: var(--discord-interactive-muted); }
.ds-avatar .ds-status {
  position: absolute; right: -2px; bottom: -2px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--discord-bg-primary);
}
/* status ring matches the surface it sits on */
.ds-user-panel .ds-avatar .ds-status,
.ds-members .ds-avatar .ds-status { border-color: var(--discord-bg-secondary-alt); }
.ds-status.is-online  { background: var(--discord-status-online); }
.ds-status.is-idle    { background: var(--discord-status-idle); }
.ds-status.is-dnd     { background: var(--discord-status-dnd); }
.ds-status.is-offline { background: var(--discord-status-offline); }

/* -------------------- Rich embed card -------------------- */
.ds-embed {
  margin-top: 8px;
  max-width: 432px;
  display: grid;
  grid-template-columns: 4px 1fr; /* 4px color bar + body */
  background: var(--discord-bg-secondary);
  border-radius: var(--discord-radius-xs);
  overflow: hidden;
}
.ds-embed .ds-embed-bar { background: var(--discord-brand-500); } /* embed.color → left bar; overridable inline */
.ds-embed .ds-embed-body { padding: 8px 16px 16px 12px; min-width: 0; }
.ds-embed-author { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--discord-header-primary); margin-bottom: 8px; }
.ds-embed-author .ds-embed-author-icon { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg,#5865f2,#7984f5); flex: 0 0 auto; }
.ds-embed-title { font-size: 16px; font-weight: 600; color: #fff; margin: 4px 0; }
.ds-embed-title.is-link { color: var(--discord-text-link); cursor: pointer; }
.ds-embed-desc { font-size: 14px; line-height: 1.3; color: var(--discord-text-normal); margin: 4px 0; }
.ds-embed-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ds-embed-field.is-full { grid-column: 1 / -1; }
.ds-embed-field .ds-f-name { font-size: 14px; font-weight: 600; color: var(--discord-header-primary); margin-bottom: 2px; }
.ds-embed-field .ds-f-val { font-size: 14px; color: var(--discord-text-normal); }
.ds-embed-image { margin-top: 12px; border-radius: var(--discord-radius-xs); max-width: 100%; display: block; }
.ds-embed-footer { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; font-weight: 500; color: var(--discord-header-secondary); }
.ds-embed-footer .ds-f-icon { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg,#5865f2,#7984f5); flex: 0 0 auto; }
.ds-embed-footer .ds-dot { opacity: .6; }

/* -------------------- Reactions -------------------- */
.ds-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ds-reaction {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 6px; border-radius: var(--discord-radius-sm);
  background: rgba(255,255,255,0.04); border: 1px solid transparent;
  font-size: 14px; color: var(--discord-interactive-normal); cursor: pointer;
}
.ds-reaction:hover { background: rgba(255,255,255,0.08); }
.ds-reaction.is-me { background: rgba(88,101,242,0.15); border-color: var(--discord-brand-500); color: var(--discord-text-brand); }
.ds-reaction .ds-emoji { font-size: 16px; }
.ds-reaction.is-add { color: var(--discord-text-muted); }

/* -------------------- Thread accessory + system line -------------------- */
.ds-thread-accessory {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 6px 8px; border-radius: var(--discord-radius-sm);
  background: rgba(255,255,255,0.02); width: fit-content; cursor: pointer;
  color: var(--discord-header-secondary); font-size: 14px;
}
.ds-thread-accessory:hover { background: var(--discord-bg-modifier-hover); }
.ds-thread-accessory .ds-t-name { color: var(--discord-text-link); font-weight: 600; }
.ds-thread-accessory .ds-t-count { color: var(--discord-text-muted); font-size: 13px; }
.ds-system-line {
  padding: 2px 16px 2px 72px; margin-top: 12px;
  color: var(--discord-text-muted); font-size: 14px;
}
.ds-system-line .ds-s-strong { color: var(--discord-header-primary); font-weight: 500; }
.ds-system-line .ds-link { color: var(--discord-text-link); }

/* -------------------- Typing indicator -------------------- */
.ds-typing {
  height: 24px; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; font-size: 14px; color: var(--discord-text-normal);
}
.ds-typing .ds-dots { display: inline-flex; gap: 3px; }
.ds-typing .ds-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--discord-interactive-normal);
  display: inline-block; animation: ds-typing-bounce 1.4s infinite ease-in-out;
}
.ds-typing .ds-dots i:nth-child(2) { animation-delay: .2s; }
.ds-typing .ds-dots i:nth-child(3) { animation-delay: .4s; }
.ds-typing b { font-weight: 600; }
@keyframes ds-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* -------------------- Composer + slash command picker -------------------- */
.ds-composer-wrap { position: relative; padding: 0 16px 24px; }
.ds-composer {
  display: flex; align-items: center; gap: 12px;
  background: var(--discord-channeltextarea-bg);
  border-radius: var(--discord-radius-sm);
  min-height: 44px; padding: 11px 16px;
}
.ds-composer .ds-attach {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--discord-interactive-normal); color: var(--discord-channeltextarea-bg);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
  cursor: pointer; flex: 0 0 auto; border: 0;
}
.ds-composer .ds-field { flex: 1 1 auto; color: #6d6f78; font-size: 16px; min-width: 0; }
.ds-composer .ds-field.is-typed { color: var(--discord-text-normal); }
.ds-composer .ds-field .ds-slash { color: var(--discord-text-muted); }
.ds-composer .ds-field .ds-caret { color: var(--discord-text-normal); animation: ds-blink 1s step-end infinite; }
@keyframes ds-blink { 50% { opacity: 0; } }
.ds-composer .ds-tools { display: flex; gap: 12px; color: var(--discord-interactive-normal); flex: 0 0 auto; }
.ds-composer .ds-tools svg { display: block; }
.ds-composer .ds-tools svg:hover { color: var(--discord-interactive-hover); }

/* slash command picker overlay (floats above composer) */
.ds-command-picker {
  position: absolute;
  left: 16px; right: 16px; bottom: calc(100% - 8px);
  background: var(--discord-bg-floating);
  border-radius: var(--discord-radius-sm);
  box-shadow: var(--discord-elevation-high);
  overflow: hidden;
}
.ds-cp-header {
  padding: 16px 16px 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--discord-header-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 8px;
}
.ds-cp-header .ds-cp-app { display: inline-flex; align-items: center; gap: 6px; }
.ds-cp-header .ds-a-icon { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg,#5865f2,#7984f5); flex: 0 0 auto; }
.ds-cp-list { padding: 8px; max-height: 240px; overflow-y: auto; }
.ds-cp-row {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 8px; border-radius: var(--discord-radius-xs);
  cursor: pointer;
}
.ds-cp-row:hover, .ds-cp-row.is-selected { background: var(--discord-bg-modifier-hover); }
.ds-cp-row .ds-cmd-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg,#5865f2,#7984f5);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto;
}
.ds-cp-row .ds-cmd-name { color: var(--discord-header-primary); font-size: 15px; font-weight: 500; }
.ds-cp-row .ds-cmd-name .ds-slash { color: var(--discord-text-muted); }
.ds-cp-row .ds-cmd-arg { color: var(--discord-text-muted); font-size: 14px; }
.ds-cp-row .ds-cmd-app { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--discord-text-muted); font-size: 13px; }
.ds-cp-row .ds-cmd-app .ds-a-icon { width: 18px; height: 18px; }

/* -------------------- Member list (optional column) -------------------- */
.ds-members {
  width: var(--discord-member-list-w);
  flex: 0 0 var(--discord-member-list-w);
  background: var(--discord-bg-secondary);
  padding: 16px 8px;
  overflow-y: auto;
}
.ds-members .ds-m-cat { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--discord-header-secondary); padding: 16px 8px 4px; }
.ds-member {
  display: flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 8px; border-radius: var(--discord-radius-xs); cursor: pointer;
}
.ds-member:hover { background: var(--discord-bg-modifier-hover); }
.ds-member .ds-avatar { width: 32px; height: 32px; font-size: 13px; }
.ds-member .ds-m-name { font-size: 16px; font-weight: 500; color: var(--discord-channels-default); display: flex; align-items: center; gap: 6px; min-width: 0; }
.ds-member.is-offline .ds-avatar { opacity: .4; }
.ds-member.is-offline .ds-m-name { color: var(--discord-text-muted); }

/* -------------------- Scrollbars (Discord dark) -------------------- */
.discord-sim ::-webkit-scrollbar { width: 16px; height: 16px; }
.discord-sim ::-webkit-scrollbar-thumb { background: var(--discord-scrollbar-thumb); border: 4px solid transparent; background-clip: padding-box; border-radius: 8px; }
.discord-sim ::-webkit-scrollbar-track { background: transparent; }
.discord-sim .ds-channel-scroll::-webkit-scrollbar,
.discord-sim .ds-members::-webkit-scrollbar { width: 8px; }
.discord-sim .ds-channel-scroll::-webkit-scrollbar-thumb,
.discord-sim .ds-members::-webkit-scrollbar-thumb { border-width: 2px; }

/* -------------------- Responsive (sim island collapse) -------------------- */
@media (max-width: 1100px) {
  .discord-sim .ds-members { display: none; }
}
@media (max-width: 720px) {
  .discord-sim .ds-sidebar { display: none; }
  .discord-sim .ds-msg { padding-right: 16px; }
}

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  .discord-sim .ds-typing .ds-dots i,
  .discord-sim .ds-composer .ds-field .ds-caret { animation: none; }
}