/* ── GhostCord — Discord dark theme ─────────────────────────────────────── */
:root {
  /* Discord dark palette */
  --bg-primary: #313338;        /* chat area */
  --bg-secondary: #2b2d31;      /* channel sidebar + member panel */
  --bg-secondary-alt: #232428;  /* user panel */
  --bg-tertiary: #1e1f22;       /* server rail */
  --bg-floating: #111214;       /* context menus / tooltips */
  --bg-input: #1e1f22;          /* auth inputs */
  --bg-textarea: #383a40;       /* message box */
  --bg-modifier-hover: #35373c;
  --bg-modifier-selected: #404249;
  --bg-msg-hover: #2e3035;

  --header-primary: #f2f3f5;
  --text: #dbdee1;
  --text-muted: #949ba4;
  --text-faint: #6d6f78;
  --channels-default: #80848e;
  --interactive-normal: #b5bac1;
  --interactive-hover: #dbdee1;
  --interactive-active: #fff;

  --brand: #5865f2;
  --brand-hover: #4752c4;
  --brand-active: #3c45a5;
  --green: #23a55a;
  --red: #f23f43;
  --red-hover: #da373c;
  --yellow: #f0b232;
  --link: #00a8fc;
  --mention: rgba(88,101,242,0.3);
  --mention-text: #c9cdfb;

  --divider: #3f4147;
  --scrollbar-thumb: #1a1b1e;
  --scrollbar-track: #2b2d31;

  --font: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", monospace;
  --elevation-low: 0 1px 0 rgba(2,2,2,0.2), 0 1.5px 0 rgba(6,6,7,0.05), 0 2px 0 rgba(2,2,2,0.05);
  --elevation-high: 0 8px 16px rgba(0,0,0,0.24);

  --rail: 72px;
  --sidebar: 240px;
  --members: 240px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg-tertiary); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.375; -webkit-font-smoothing: antialiased; }
button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }
input, textarea { font: inherit; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 700; }

/* ── Scrollbars (Discord-style) ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; min-height: 40px; }
#messages::-webkit-scrollbar { width: 14px; }
#messages::-webkit-scrollbar-track { background: var(--bg-primary); border: 3px solid var(--bg-primary); }
#messages::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 3px solid var(--bg-primary); border-radius: 7px; }

/* ── Screens ────────────────────────────────────────────────────────────── */
.screen { width: 100%; height: 100%; display: flex; }
.hidden { display: none !important; }

/* ── Auth (Discord login style) ─────────────────────────────────────────── */
#authScreen {
  align-items: center; justify-content: center;
  background: linear-gradient(160deg, #5865f2 0%, #404eed 40%, #3442d9 100%);
}
.auth-wrap {
  width: 480px; padding: 32px; background: var(--bg-primary);
  border-radius: 5px;
  box-shadow: var(--elevation-high);
}
.auth-logo { text-align: center; margin-bottom: 20px; }
.ghost-icon { font-size: 40px; display: block; margin-bottom: 8px; }
.auth-logo h1 { font-size: 24px; font-weight: 600; color: var(--header-primary); }
.auth-logo p { color: var(--interactive-normal); font-size: 16px; margin-top: 8px; }
.auth-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--divider); }
.auth-tab { flex: 1; padding: 10px; color: var(--text-muted); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.auth-tab.active { color: var(--header-primary); border-bottom-color: var(--brand); }
.auth-tab:hover:not(.active) { color: var(--interactive-hover); }
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--interactive-normal); }
.form-group label::after { content: ' *'; color: var(--red); }
.hint-text { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; margin-left: 6px; color: var(--text-muted); }
.form-group input {
  background: var(--bg-input); border: none;
  border-radius: 3px; color: var(--text); padding: 10px;
  font-size: 16px; outline: none; height: 40px;
  transition: box-shadow .15s;
}
.form-group input:focus { box-shadow: 0 0 0 1px var(--brand); }
.form-error { background: rgba(242,63,67,.1); border: 1px solid var(--red); color: #fa777c; padding: 10px 12px; border-radius: 3px; font-size: 13px; }
.btn-primary {
  background: var(--brand); color: #fff; border-radius: 3px;
  padding: 2px 16px; height: 44px; font-size: 16px; font-weight: 500; width: 100%;
  transition: background-color .17s ease;
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { background: var(--brand-active); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.auth-note { color: var(--text-muted); font-size: 12px; text-align: center; }

/* ── App layout ─────────────────────────────────────────────────────────── */
#appScreen { display: flex; }
#leftWrap { display: flex; flex-shrink: 0; }
.mobile-only { display: none !important; }
#drawerBackdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 450;
}
#btnMobileMenu {
  width: 32px; height: 32px; margin-right: 4px; border-radius: 4px;
  color: var(--interactive-normal); font-size: 20px;
  align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── Server rail ────────────────────────────────────────────────────────── */
#hauntRail {
  width: var(--rail); min-width: var(--rail);
  background: var(--bg-tertiary); display: flex; flex-direction: column;
  align-items: center; padding: 12px 0 8px; gap: 8px; overflow-y: auto;
  scrollbar-width: none;
}
#hauntRail::-webkit-scrollbar { display: none; }
.rail-item {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer;
  transition: border-radius .15s ease-out, background-color .15s ease-out;
  background: var(--bg-primary); color: var(--interactive-normal); position: relative;
  flex-shrink: 0;
}
.rail-item:hover, .rail-item.active { border-radius: 16px; }
.rail-item.active { background: var(--brand); color: #fff; }
.rail-item:hover:not(.active):not(.rail-add) { background: var(--brand); color: #fff; }
.rail-dm { font-size: 24px; }
.rail-add { font-size: 24px; font-weight: 300; color: var(--green); }
.rail-add:hover { background: var(--green); color: #fff; }
.rail-settings { font-size: 18px; }
.rail-settings:hover { background: var(--bg-modifier-hover); color: var(--interactive-hover); border-radius: 16px; }
.rail-separator { width: 32px; height: 2px; background: var(--bg-primary); border-radius: 1px; margin: 0; flex-shrink: 0; }
.rail-spacer { flex: 1; }
.haunt-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-primary); color: var(--text); cursor: pointer;
  font-weight: 600; font-size: 18px;
  transition: border-radius .15s ease-out, background-color .15s ease-out;
  flex-shrink: 0; position: relative;
}
.haunt-icon:hover, .haunt-icon.active { border-radius: 16px; }
.haunt-icon:hover:not(.active) { background: var(--brand); color: #fff; }
.haunt-icon.active { background: var(--brand); color: #fff; }
.haunt-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.haunt-pip {
  position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; margin-left: 4px;
  background: #fff; border-radius: 0 4px 4px 0;
  transition: height .15s ease-out; height: 0;
}
.haunt-icon:hover .haunt-pip { height: 20px; }
.haunt-icon.active .haunt-pip { height: 40px; }

/* ── Channel sidebar ────────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar); min-width: var(--sidebar);
  background: var(--bg-secondary); display: flex; flex-direction: column;
  overflow: hidden;
}
#sidebarHeader {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 48px; box-shadow: var(--elevation-low);
  font-weight: 600; font-size: 16px; flex-shrink: 0; color: var(--header-primary);
  cursor: pointer; transition: background-color .1s; z-index: 2;
}
#sidebarHeader:hover { background: var(--bg-modifier-hover); }
#sidebarHeader button { color: var(--interactive-normal); font-size: 16px; padding: 4px 6px; border-radius: 4px; }
#sidebarHeader button:hover { color: var(--interactive-hover); }
#channelList { flex: 1; overflow-y: auto; padding: 8px 0 8px 8px; }
#channelList::-webkit-scrollbar-thumb { background: transparent; }
#channelList:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }

.channel-section { margin-bottom: 4px; }
.channel-section-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 8px 4px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; color: var(--channels-default); cursor: pointer;
}
.channel-section-label:hover { color: var(--interactive-hover); }
.channel-section-label .add-btn { font-size: 18px; font-weight: 400; color: var(--interactive-normal); opacity: 0; transition: opacity .1s; line-height: 1; }
.channel-section-label:hover .add-btn { opacity: 1; }
.channel-section-label .add-btn:hover { color: var(--interactive-hover); }

.channel-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 4px; margin: 1px 8px 1px 0;
  cursor: pointer; color: var(--channels-default); transition: none;
  font-size: 16px; font-weight: 500; position: relative;
}
.channel-item:hover { background: var(--bg-modifier-hover); color: var(--interactive-hover); }
.channel-item.active { background: var(--bg-modifier-selected); color: var(--interactive-active); }
.channel-item .ch-icon { font-size: 20px; font-weight: 400; flex-shrink: 0; color: var(--channels-default); width: 20px; text-align: center; }
.channel-item.active .ch-icon { color: var(--interactive-hover); }
.channel-item .ch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-item .unread-badge {
  background: var(--red); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 8px; padding: 0 5px; min-width: 16px; height: 16px;
  line-height: 16px; text-align: center;
}

.dm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 8px; margin: 1px 8px 1px 0; border-radius: 4px;
  cursor: pointer; color: var(--channels-default); height: 42px;
  font-size: 16px; font-weight: 500;
}
.dm-item:hover { background: var(--bg-modifier-hover); color: var(--interactive-hover); }
.dm-item.active { background: var(--bg-modifier-selected); color: var(--interactive-active); }
.dm-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; position: relative; }
.dm-avatar-inner { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #fff; }
.status-dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 3px solid var(--bg-secondary); background: #80848e;
}
.status-dot.online { background: var(--green); }

/* ── User panel (bottom-left, like Discord) ─────────────────────────────── */
#userPanel {
  height: 52px; background: var(--bg-secondary-alt); flex-shrink: 0;
  display: flex; align-items: center; padding: 0 8px; gap: 4px;
}
.user-panel-info {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  padding: 4px; border-radius: 4px; cursor: pointer;
}
.user-panel-info:hover { background: var(--bg-modifier-hover); }
.user-panel-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #fff; position: relative; }
.user-panel-avatar .status-dot { border-color: var(--bg-secondary-alt); }
.user-panel-names { min-width: 0; }
.user-panel-name { font-size: 14px; font-weight: 600; color: var(--header-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; }
.user-panel-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 13px; }
.user-panel-btns { display: flex; }
.user-panel-btns button {
  width: 32px; height: 32px; border-radius: 4px; color: var(--interactive-normal);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.user-panel-btns button:hover { background: var(--bg-modifier-hover); color: var(--interactive-hover); }

/* ── Main area ──────────────────────────────────────────────────────────── */
/* header spans full width; below it: chat column + member panel side by side */
#main { flex: 1; display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden; min-width: 0; background: var(--bg-primary); }

#channelHeader {
  width: 100%; height: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; flex-shrink: 0;
  background: var(--bg-primary); box-shadow: var(--elevation-low); z-index: 2;
}
#channelHeaderLeft { display: flex; align-items: center; gap: 8px; min-width: 0; }
#channelIcon { font-size: 24px; font-weight: 400; color: var(--channels-default); flex-shrink: 0; }
#channelName { font-weight: 600; font-size: 16px; color: var(--header-primary); white-space: nowrap; }
.channel-topic { color: var(--text-muted); font-size: 14px; border-left: 1px solid var(--divider); padding-left: 12px; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#channelHeaderRight { display: flex; gap: 0; flex-shrink: 0; }
#channelHeaderRight button { padding: 4px 8px; border-radius: 4px; color: var(--interactive-normal); font-size: 18px; }
#channelHeaderRight button:hover { color: var(--interactive-hover); }

/* ── Content area ───────────────────────────────────────────────────────── */
#contentArea { flex: 1; display: flex; flex-direction: column; overflow: hidden; height: calc(100% - 48px); min-width: 0; }

/* ── Messages ───────────────────────────────────────────────────────────── */
#messages {
  flex: 1; overflow-y: auto; padding: 16px 0 24px;
  display: flex; flex-direction: column; min-height: 0;
}

.msg-group { display: flex; gap: 16px; padding: 2px 48px 2px 16px; position: relative; }
.msg-group:hover { background: var(--bg-msg-hover); }
.msg-group:hover .msg-actions { opacity: 1; }
.msg-group.new-sender { margin-top: 17px; }

.msg-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; color: #fff; cursor: pointer; margin-top: 2px; }
.msg-avatar:hover { box-shadow: var(--elevation-high); }
.msg-avatar.compact { width: 40px; height: 0; visibility: hidden; margin: 0; }

.msg-content { flex: 1; min-width: 0; }
.msg-header { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-weight: 500; font-size: 16px; color: var(--header-primary); cursor: pointer; }
.msg-author:hover { text-decoration: underline; }
.msg-time { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.msg-text { font-size: 16px; line-height: 1.375rem; color: var(--text); word-break: break-word; white-space: pre-wrap; font-weight: 400; }
.msg-text code { background: var(--bg-secondary) !important; border-radius: 4px; padding: 2.4px 4.8px !important; font-size: 85% !important; font-family: var(--mono) !important; }
.msg-text.encrypted { color: var(--text-muted); font-style: italic; font-size: 14px; }
.msg-edited { color: var(--text-muted); font-size: 10px; margin-left: 4px; user-select: none; }

.msg-actions {
  position: absolute; right: 16px; top: -16px;
  display: flex; gap: 0; opacity: 0; transition: opacity .1s;
  background: var(--bg-primary); border: 1px solid var(--bg-secondary-alt);
  border-radius: 8px; padding: 2px; box-shadow: var(--elevation-low);
}
.msg-action-btn { padding: 6px 8px; border-radius: 4px; color: var(--interactive-normal); font-size: 16px; line-height: 1; }
.msg-action-btn:hover { background: var(--bg-modifier-hover); color: var(--interactive-hover); }
.msg-action-btn.danger:hover { background: var(--bg-modifier-hover); color: var(--red); }

.system-msg { text-align: center; color: var(--text-muted); font-size: 14px; padding: 16px; }

.mention { background: var(--mention); border-radius: 3px; color: var(--mention-text); padding: 0 2px; font-weight: 500; cursor: pointer; }
.mention:hover { background: var(--brand); color: #fff; }
.channel-link { color: var(--mention-text); background: var(--mention); border-radius: 3px; padding: 0 2px; cursor: pointer; }
.channel-link:hover { background: var(--brand); color: #fff; }

.day-divider {
  display: flex; align-items: center; gap: 8px; margin: 24px 16px 8px;
  color: var(--text-muted); font-size: 12px; font-weight: 600;
}
.day-divider::before, .day-divider::after { content: ''; flex: 1; height: 1px; background: var(--divider); }

/* ── Typing bar ─────────────────────────────────────────────────────────── */
#typingBar { height: 24px; padding: 0 16px; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.typing-dots span { animation: blink 1.2s infinite; display: inline-block; color: var(--text-muted); }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ── Input area ─────────────────────────────────────────────────────────── */
#inputArea {
  display: flex; align-items: flex-start; gap: 0;
  margin: 0 16px 24px; background: var(--bg-textarea); border-radius: 8px;
  flex-shrink: 0; position: relative; padding: 0 0 0 16px;
}
.input-btn { width: 40px; height: 44px; color: var(--interactive-normal); font-size: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.input-btn:hover { color: var(--interactive-hover); }
#btnAttach { margin-left: -16px; width: 56px; }
#msgInputWrap {
  flex: 1; min-height: 44px; display: flex; align-items: center;
}
#msgInput {
  flex: 1; padding: 11px 8px 11px 0; outline: none; min-height: 22px; max-height: 50vh;
  overflow-y: auto; font-size: 16px; line-height: 1.375rem; word-break: break-word;
  color: var(--text);
}
#msgInput:empty::before { content: attr(data-placeholder); color: var(--text-faint); pointer-events: none; }

/* ── Emoji picker ───────────────────────────────────────────────────────── */
.emoji-picker {
  position: absolute; bottom: 56px; right: 0;
  background: var(--bg-secondary); border: 1px solid var(--bg-tertiary);
  border-radius: 8px; padding: 12px; width: 328px; z-index: 100;
  box-shadow: var(--elevation-high);
}
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-btn { font-size: 24px; padding: 4px; border-radius: 4px; cursor: pointer; text-align: center; transition: background .1s; }
.emoji-btn:hover { background: var(--bg-modifier-hover); }

/* ── Member panel ───────────────────────────────────────────────────────── */
#memberPanel {
  width: var(--members); min-width: var(--members); height: calc(100% - 48px);
  background: var(--bg-secondary);
  overflow-y: auto; padding: 8px 0 16px 8px;
}
#memberPanel::-webkit-scrollbar-thumb { background: transparent; }
#memberPanel:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
.member-section-label { padding: 24px 8px 4px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--channels-default); }
.member-item {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 8px; border-radius: 4px; margin: 1px 8px 1px 0;
  cursor: pointer; color: var(--channels-default); height: 42px;
}
.member-item:hover { background: var(--bg-modifier-hover); color: var(--interactive-hover); }
#membersOffline .member-item { opacity: .3; }
#membersOffline .member-item:hover { opacity: 1; }
.member-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #fff; position: relative; }
.member-avatar .status-dot { border-color: var(--bg-secondary); }
.member-name { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.member-role { font-size: 12px; color: var(--text-muted); }

/* ── Modals (Discord style) ─────────────────────────────────────────────── */
#modalOverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
#modal {
  background: var(--bg-primary); border-radius: 4px; padding: 24px;
  min-width: 440px; max-width: 440px; width: 100%;
  max-height: 80vh; overflow-y: auto;
  box-shadow: var(--elevation-high);
  animation: modalIn .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes modalIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.modal-title { font-size: 20px; font-weight: 600; color: var(--header-primary); margin-bottom: 16px; }
.modal-body { display: flex; flex-direction: column; gap: 14px; }
.modal-body .form-group label::after { content: ''; }
.modal-body .form-group input { background: var(--bg-input); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 16px -24px -24px; padding: 16px 24px; background: var(--bg-secondary); border-radius: 0 0 4px 4px; }
.btn-secondary { background: transparent; color: var(--text); border-radius: 3px; padding: 2px 16px; height: 38px; font-size: 14px; font-weight: 500; }
.btn-secondary:hover { text-decoration: underline; }
.btn-danger { background: var(--red-hover); color: #fff; border-radius: 3px; padding: 2px 16px; height: 38px; font-size: 14px; font-weight: 500; }
.btn-danger:hover { background: #a12828; }
.modal-actions .btn-primary { width: auto; height: 38px; font-size: 14px; }
.invite-code {
  background: var(--bg-input); border-radius: 3px; padding: 12px 16px;
  font-family: var(--mono); font-size: 18px; text-align: center; letter-spacing: 2px;
  color: var(--header-primary); cursor: pointer;
}
.invite-code:hover { color: var(--link); }
.invite-hint { color: var(--text-muted); font-size: 12px; text-align: center; }

/* ── Context menu (Discord style) ───────────────────────────────────────── */
#contextMenu {
  position: fixed; z-index: 2000; background: var(--bg-floating);
  border-radius: 4px; padding: 6px 8px; min-width: 188px; max-width: 320px;
  box-shadow: var(--elevation-high);
}
.ctx-item { padding: 6px 8px; margin: 2px 0; border-radius: 2px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--interactive-normal); }
.ctx-item:hover { background: var(--brand); color: #fff; }
.ctx-item.danger { color: var(--red); }
.ctx-item.danger:hover { background: var(--red-hover); color: #fff; }
.ctx-separator { height: 1px; background: var(--bg-modifier-hover); margin: 4px; }

/* ── Avatar colors (Discord default avatar palette) ─────────────────────── */
.av-0 { background: #5865f2; } .av-1 { background: #757e8a; } .av-2 { background: #23a55a; }
.av-3 { background: #f0b232; } .av-4 { background: #f23f43; } .av-5 { background: #eb459f; }
.av-6 { background: #3ba3a3; } .av-7 { background: #9b59b6; }

/* ── Utility ────────────────────────────────────────────────────────────── */
.flex { display: flex; }
.gap-8 { gap: 8px; }
.w-full { width: 100%; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 14px; }
.mt-8 { margin-top: 8px; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
#toastContainer { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 3000; }
.toast {
  background: var(--bg-floating); border-radius: 8px;
  padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--text); min-width: 220px;
  box-shadow: var(--elevation-high); animation: toastIn .2s ease;
}
.toast.success { border-left: 4px solid var(--green); }
.toast.error   { border-left: 4px solid var(--red); }
.toast.info    { border-left: 4px solid var(--brand); }
@keyframes toastIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } }

/* ── Status colors ──────────────────────────────────────────────────────── */
.status-dot.online { background: var(--green); }
.status-dot.idle { background: var(--yellow); }
.status-dot.dnd { background: var(--red); }
.status-dot.offline { background: #80848e; }

/* ── Reply bar (above input) ────────────────────────────────────────────── */
#replyBar {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 16px; padding: 8px 16px; background: var(--bg-secondary);
  border-radius: 8px 8px 0 0; font-size: 14px; color: var(--text-muted);
  flex-shrink: 0;
}
#replyBarText strong { color: var(--header-primary); font-weight: 600; }
#replyBarClose { color: var(--interactive-normal); font-size: 14px; padding: 0 4px; border-radius: 50%; }
#replyBarClose:hover { color: var(--interactive-hover); }

/* ── Attachment queue (pending uploads) ─────────────────────────────────── */
#attachQueue {
  display: flex; gap: 8px; margin: 0 16px; padding: 8px 12px;
  background: var(--bg-textarea); border-bottom: 1px solid var(--bg-modifier-hover);
  border-radius: 8px 8px 0 0; overflow-x: auto; flex-shrink: 0;
}
#inputArea.input-flat { border-top-left-radius: 0; border-top-right-radius: 0; }
.attach-chip {
  position: relative; width: 180px; flex-shrink: 0;
  background: var(--bg-secondary); border-radius: 4px; padding: 8px;
}
.attach-chip img { width: 100%; height: 96px; object-fit: cover; border-radius: 3px; }
.attach-chip .attach-file-icon { height: 96px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.attach-chip .attach-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; }
.attach-chip .attach-remove {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  background: var(--bg-primary); border-radius: 4px; color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  box-shadow: var(--elevation-low);
}
.attach-chip .attach-remove:hover { background: var(--red); color: #fff; }
.attach-chip.uploading { opacity: .5; }

/* ── Message reply preview (above message, Discord style) ───────────────── */
.msg-reply-ref {
  display: flex; align-items: center; gap: 6px; margin-left: 56px; margin-bottom: -2px;
  padding: 2px 16px 0 0; font-size: 14px; color: var(--text-muted);
  cursor: pointer; position: relative; white-space: nowrap; overflow: hidden;
}
.msg-reply-ref::before {
  content: ''; position: absolute; left: -36px; top: 50%; width: 28px; height: 9px;
  border-left: 2px solid #4e5058; border-top: 2px solid #4e5058;
  border-top-left-radius: 6px;
}
.msg-reply-ref .reply-author { color: var(--header-primary); font-weight: 600; flex-shrink: 0; }
.msg-reply-ref .reply-snippet { overflow: hidden; text-overflow: ellipsis; }
.msg-reply-ref:hover .reply-snippet { color: var(--text); }
.msg-group.is-reply { margin-top: 17px; }

/* highlight a message when jumped to */
.msg-group.flash { background: var(--mention); animation: flashFade 2s ease forwards; }
@keyframes flashFade { from { background: var(--mention); } to { background: transparent; } }

/* ── Reactions ──────────────────────────────────────────────────────────── */
.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-secondary); border: 1px solid transparent;
  border-radius: 8px; padding: 2px 8px; font-size: 14px; cursor: pointer;
  min-height: 26px;
}
.reaction-chip:hover { border-color: var(--text-faint); }
.reaction-chip.mine { background: var(--mention); border-color: var(--brand); }
.reaction-chip .reaction-count { font-size: 13px; font-weight: 600; color: var(--interactive-normal); }
.reaction-chip.mine .reaction-count { color: var(--mention-text); }
.reaction-add-btn {
  display: none; align-items: center; justify-content: center;
  background: var(--bg-secondary); border-radius: 8px; padding: 2px 8px;
  font-size: 14px; cursor: pointer; min-height: 26px; color: var(--interactive-normal);
}
.msg-group:hover .reaction-add-btn { display: inline-flex; }
.msg-reactions:not(:empty) .reaction-add-btn { display: inline-flex; }

/* ── Inline edit ────────────────────────────────────────────────────────── */
.msg-edit-box {
  background: var(--bg-textarea); border-radius: 8px; padding: 11px 12px;
  font-size: 16px; line-height: 1.375rem; color: var(--text);
  outline: none; margin: 4px 0; word-break: break-word; white-space: pre-wrap;
}
.msg-edit-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.msg-edit-hint .kbd { color: var(--link); cursor: pointer; }
.msg-edit-hint .kbd:hover { text-decoration: underline; }

/* ── Attachments in messages ────────────────────────────────────────────── */
.msg-attachments { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.msg-attachment-img { max-width: 400px; max-height: 300px; border-radius: 8px; cursor: pointer; display: block; }
.msg-attachment-file {
  display: flex; align-items: center; gap: 8px; max-width: 400px;
  background: var(--bg-secondary); border: 1px solid var(--bg-secondary-alt);
  border-radius: 8px; padding: 10px 12px;
}
.msg-attachment-file .file-icon { font-size: 28px; }
.msg-attachment-file .file-name { color: var(--link); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-attachment-file .file-name:hover { text-decoration: underline; }
.msg-attachment-file .file-size { color: var(--text-muted); font-size: 12px; }

/* ── Markdown extras ────────────────────────────────────────────────────── */
.msg-text .spoiler {
  background: var(--bg-floating); color: transparent; border-radius: 4px;
  padding: 0 2px; cursor: pointer; user-select: none;
}
.msg-text .spoiler.revealed { background: rgba(255,255,255,0.1); color: var(--text); cursor: auto; user-select: auto; }
.msg-text pre {
  background: var(--bg-secondary); border: 1px solid var(--bg-secondary-alt);
  border-radius: 4px; padding: 8px; margin: 4px 0; max-width: 90%;
  font-family: var(--mono); font-size: 14px; overflow-x: auto; white-space: pre-wrap;
}
.msg-text blockquote {
  border-left: 4px solid #4e5058; border-radius: 0 4px 4px 0;
  padding: 0 8px 0 12px; margin: 2px 0;
}
.msg-text del { color: var(--text-muted); }

/* ── Popout (profile / status picker / pins) ────────────────────────────── */
#popout {
  position: fixed; z-index: 2500;
  background: var(--bg-floating); border-radius: 8px;
  box-shadow: var(--elevation-high); overflow: hidden;
  animation: popIn .12s ease;
}
@keyframes popIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }

.profile-card { width: 300px; }
.profile-banner { height: 60px; background: var(--brand); }
.profile-body { padding: 0 12px 12px; position: relative; }
.profile-avatar-lg {
  width: 80px; height: 80px; border-radius: 50%; border: 6px solid var(--bg-floating);
  margin-top: -44px; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 32px; color: #fff; position: relative;
}
.profile-avatar-lg .status-dot { width: 22px; height: 22px; border-width: 5px; border-color: var(--bg-floating); bottom: 0; right: 0; }
.profile-info { background: #111214; border: 1px solid #2e2f34; border-radius: 8px; padding: 12px; margin-top: 10px; }
.profile-name { font-size: 20px; font-weight: 700; color: var(--header-primary); }
.profile-username { font-size: 14px; color: var(--text); }
.profile-divider { height: 1px; background: var(--bg-modifier-hover); margin: 12px 0; }
.profile-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--header-primary); margin-bottom: 6px; }
.profile-bio { font-size: 14px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.profile-actions { margin-top: 12px; display: flex; gap: 8px; }
.profile-actions .btn-primary { height: 36px; font-size: 14px; }

.status-menu { width: 220px; padding: 6px 8px; }
.status-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 2px; cursor: pointer; font-size: 14px; color: var(--interactive-normal);
}
.status-menu-item:hover { background: var(--brand); color: #fff; }
.status-menu-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.status-menu-sub { font-size: 11px; color: var(--text-muted); }
.status-menu-item:hover .status-menu-sub { color: #fff; }

.pins-popout { width: 420px; max-height: 500px; display: flex; flex-direction: column; }
.pins-header { padding: 12px 16px; font-weight: 600; color: var(--header-primary); background: var(--bg-tertiary); flex-shrink: 0; }
.pins-list { overflow-y: auto; padding: 8px; }
.pin-item { background: var(--bg-primary); border: 1px solid var(--bg-secondary-alt); border-radius: 4px; padding: 10px; margin-bottom: 8px; cursor: pointer; }
.pin-item:hover { border-color: var(--text-faint); }
.pin-item .pin-author { font-weight: 600; color: var(--header-primary); font-size: 14px; }
.pin-item .pin-content { font-size: 14px; color: var(--text); margin-top: 2px; word-break: break-word; }
.pins-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* ── Channel welcome block ──────────────────────────────────────────────── */
.channel-welcome { padding: 16px; margin-top: auto; }
.channel-welcome .welcome-icon {
  width: 68px; height: 68px; border-radius: 50%; background: #41434a;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; color: #fff; margin-bottom: 8px;
}
.channel-welcome h2 { font-size: 32px; font-weight: 700; color: var(--header-primary); margin-bottom: 4px; }
.channel-welcome p { font-size: 16px; color: var(--text-muted); }

/* ── Member list role grouping ──────────────────────────────────────────── */
.member-owner-crown { font-size: 12px; margin-left: 4px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Narrow desktop: auto-hide member panel (still toggleable via 👥) */
@media (min-width: 769px) and (max-width: 900px) {
  #memberPanel { display: none; }
}

/* Keep wide popouts/pickers on screen at any size */
.profile-card { max-width: calc(100vw - 16px); }
.pins-popout { max-width: calc(100vw - 16px); }
.emoji-picker { max-width: calc(100vw - 24px); }

/* ── Mobile (Discord mobile app layout) ─────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-only { display: flex !important; }

  html, body, .screen { height: 100dvh; }

  /* Left drawer: rail + channel sidebar slide over the chat */
  #leftWrap {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; z-index: 500;
    transform: translateX(-100%); transition: transform .22s ease;
    will-change: transform;
  }
  #leftWrap.open { transform: translateX(0); box-shadow: 8px 0 24px rgba(0,0,0,.45); }
  #sidebar { width: min(280px, calc(100vw - var(--rail) - 40px)); min-width: 0; }
  #hauntRail { padding-top: max(12px, env(safe-area-inset-top)); }
  #userPanel { padding-bottom: env(safe-area-inset-bottom); height: calc(52px + env(safe-area-inset-bottom)); }

  /* Member list: right-side drawer */
  #memberPanel {
    position: fixed; top: 0; right: 0; bottom: 0;
    height: 100dvh; z-index: 500;
    width: min(280px, calc(100vw - 56px)); min-width: 0;
    transform: translateX(100%); transition: transform .22s ease;
    will-change: transform;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  #memberPanel.open { transform: translateX(0); box-shadow: -8px 0 24px rgba(0,0,0,.45); }

  /* Main chat fills the screen */
  #main { width: 100vw; }
  #channelHeader { padding: 0 8px; padding-top: env(safe-area-inset-top); height: calc(48px + env(safe-area-inset-top)); }
  #contentArea { height: calc(100% - 48px - env(safe-area-inset-top)); }
  .channel-topic { display: none; }
  #channelName { overflow: hidden; text-overflow: ellipsis; max-width: 45vw; }

  /* Messages: tighter padding, no hover toolbar (long-press instead) */
  .msg-group { padding: 2px 12px; gap: 12px; }
  .msg-group, .msg-group * { -webkit-touch-callout: none; }
  .msg-group { -webkit-user-select: none; user-select: none; }
  .msg-actions { display: none !important; }
  .msg-reply-ref { margin-left: 52px; }
  .msg-reply-ref::before { left: -34px; }
  .msg-attachment-img { max-width: 100%; }
  .msg-attachment-file { max-width: 100%; }
  .msg-text pre { max-width: 100%; }
  .reaction-add-btn { display: inline-flex; }

  /* Input: smaller margins + safe area; 16px font stops iOS auto-zoom */
  #inputArea { margin: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  #replyBar, #attachQueue { margin: 0 8px; }
  #typingBar { height: 20px; font-size: 12px; }
  #msgInput { font-size: 16px; }

  /* Modals: near-full-width sheets */
  #modal { min-width: 0; width: calc(100vw - 24px); max-width: 440px; padding: 16px; }
  .modal-actions { margin: 16px -16px -16px; padding: 12px 16px; }

  /* Popouts clamp to viewport */
  #popout { max-width: calc(100vw - 12px); }
  .pins-popout { width: calc(100vw - 12px); }
  .status-menu { width: min(220px, calc(100vw - 24px)); }

  /* Auth screen: full-bleed card */
  #authScreen { align-items: flex-start; padding-top: env(safe-area-inset-top); }
  .auth-wrap { width: 100%; min-height: 100dvh; padding: 32px 20px; border-radius: 0; }

  /* Bigger touch targets */
  #channelHeaderRight button { padding: 6px 10px; font-size: 20px; }
  .channel-item, .dm-item { padding-top: 8px; padding-bottom: 8px; }
  .channel-section-label .add-btn { opacity: 1; }
  .msg-edited { font-size: 10px; }
  .input-btn { width: 44px; }
  .emoji-btn { font-size: 26px; padding: 6px; }
}

@media (max-width: 380px) {
  :root { --rail: 60px; }
  .rail-item, .haunt-icon { width: 44px; height: 44px; }
}