/* Discord layer (1.1.0): Discord's metrics and structure on top of the minimal layer, in Nexus colours.
   Loaded last. Theme variables (--nx-*) still drive every colour, so themes and BetterDiscord imports apply. */

/* Columns: 72px rail · 240px channels · chat · 240px members */
.nx-app { grid-template-columns:72px 240px minmax(0,1fr) 240px; }
@media (max-width:1180px) { .nx-app { grid-template-columns:72px 240px minmax(0,1fr); } }
@media (max-width:760px) { .nx-app { grid-template-columns:72px minmax(0,1fr); } }

/* Rail: the home button keeps its brand mark centred; the morph is a touch quicker, like Discord's. */
.nx-rail { gap:8px; scrollbar-width:none; }
.nx-rail::-webkit-scrollbar { display:none; }
.nx-server { transition:border-radius .12s ease-out, background-color .12s ease-out, color .12s ease-out; }
.nx-server .nx-badge { right:-4px; bottom:-4px; top:auto; min-width:16px; height:16px; padding:0 4px; border-radius:8px; font-size:11px; line-height:16px; box-shadow:0 0 0 3px var(--nx-rail); background:#f23f43; }

/* Channels: unread channels get Discord's little white pill on the left edge. */
.nx-channel-row { position:relative; }
.nx-channel-row:has(.nx-room.has-unread:not(.is-active))::before { content:''; position:absolute; left:-8px; top:50%; width:4px; height:8px; margin-top:-4px; border-radius:0 4px 4px 0; background:var(--nx-text); }
.nx-room { min-height:34px; }
.nx-room.is-active { background:color-mix(in srgb,var(--nx-accent) 22%,#ffffff0d); }
.nx-room .nx-count { margin-left:auto; min-width:16px; height:16px; padding:0 5px; border-radius:8px; background:#f23f43; color:#fff; font-size:11px; font-weight:700; line-height:16px; text-align:center; }
.nx-voice-occupant { display:flex; align-items:center; gap:8px; padding:3px 8px 3px 36px; font-size:14px; color:var(--nx-muted); }
.nx-voice-occupant .nx-avatar { --avatar:24px; font-size:10px; }
.nx-voice-occupant .nx-icon { width:14px; height:14px; margin-left:auto; color:var(--nx-muted); }

/* User panel: 52px, you on the left, Mute / Deafen / Settings on the right. */
.nx-user-panel { display:flex; align-items:center; gap:2px; min-height:52px; padding:0 8px; background:color-mix(in srgb,var(--nx-rail) 85%,transparent); }
.nx-user-panel:hover { background:color-mix(in srgb,var(--nx-rail) 85%,transparent); }
.nx-user-panel-me { flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:4px 4px 4px 2px; border:0; border-radius:6px; background:none; color:inherit; text-align:left; }
.nx-user-panel-me:hover { background:var(--nx-hover); }
.nx-user-panel-me > span:last-child { min-width:0; flex:1; }
.nx-user-panel-me strong { display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nx-user-panel-me small { display:block; font-size:12px; color:var(--nx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nx-user-panel > .nx-icon-button { width:32px; height:32px; border-radius:6px; flex-shrink:0; }
.nx-user-panel > .nx-icon-button:hover { background:var(--nx-hover); color:var(--nx-text); }
.nx-user-panel > .nx-icon-button .nx-icon { width:20px; height:20px; }
.nx-user-panel > .nx-icon-button.is-off { color:#f23f43; }

/* Chat header: 48px, name · topic · tools. */
.nx-header { min-height:48px; height:48px; }
.nx-header-actions { gap:4px; }
.nx-header-actions .nx-icon-button { width:32px; height:32px; }
.nx-header-actions .nx-icon { width:22px; height:22px; }

/* Messages: 40px avatars in a 72px gutter, follow-ups tucked under the first message. */
.nx-history { padding-top:16px; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--nx-rail) 90%,transparent) transparent; }
.nx-message { margin-top:17px; padding:2px 48px 2px 16px; min-height:44px; }
.nx-message.is-grouped { margin-top:0; min-height:0; padding-left:72px; }
.nx-message.is-grouped > .nx-avatar-button { display:none; }
.nx-message.is-grouped .nx-message-meta { position:absolute; left:0; top:4px; width:72px; margin:0; justify-content:center; }
.nx-message.is-grouped .nx-message-meta > :not(time) { display:none; }
.nx-message.is-grouped .nx-message-meta time { font-size:11px; opacity:0; }
.nx-message.is-grouped:hover .nx-message-meta time { opacity:1; }
.nx-message:hover { background:color-mix(in srgb,var(--nx-rail) 28%,transparent); }
.nx-message-actions { right:16px; top:-16px; padding:2px; gap:0; }
.nx-message-actions .nx-icon-button { width:32px; height:32px; border-radius:6px; }
.nx-message-actions .nx-icon-button:hover { background:var(--nx-hover); }
.nx-message-actions .nx-icon { width:18px; height:18px; }
.nx-mention { padding:0 2px; border:0; border-radius:3px; background:color-mix(in srgb,var(--nx-accent) 24%,transparent); color:color-mix(in srgb,var(--nx-accent) 40%,#fff); font:inherit; font-weight:500; cursor:pointer; }
.nx-mention:hover { background:var(--nx-accent); color:#fff; }
.nx-app .nx-message p code { padding:1px 4px; border-radius:4px; background:color-mix(in srgb,var(--nx-rail) 80%,transparent); font-size:.85em; }

/* Composer: 8px radius, + on the left. */
.nx-composer { border-radius:8px; min-height:44px; }
.nx-composer > .nx-icon-button:first-child { color:var(--nx-soft); }
.nx-composer > .nx-icon-button:first-child:hover { color:var(--nx-text); }

/* Members: role group headings like Discord's "ONLINE — 3". */
.nx-details { padding:0 8px; }
.nx-details > header, .nx-member-list > h3, .nx-list-heading { font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--nx-muted); }
.nx-member { padding:6px 8px; margin:1px 0; border-radius:6px; }
.nx-member:hover { background:var(--nx-hover); }
.nx-member .nx-avatar { --avatar:32px; }
.nx-member strong { font-size:15px; font-weight:500; }

/* Focus: one clear ring everywhere, only for keyboard users. */
.nx-app :is(button,a,[tabindex]):focus-visible { outline:2px solid color-mix(in srgb,var(--nx-accent) 70%,#fff); outline-offset:2px; }

/* Messages v2: replies, reactions, spoilers, search (docs/messages-v2.md). */
.nx-reply-line { position:relative; display:flex; align-items:center; gap:6px; max-width:100%; margin:0 0 2px; padding:0 0 0 4px; border:0; background:none; color:var(--nx-muted); font:inherit; font-size:13px; line-height:18px; text-align:left; cursor:pointer; }
.nx-reply-line::before { content:''; position:absolute; left:-34px; top:9px; width:30px; height:10px; border:2px solid color-mix(in srgb,var(--nx-muted) 55%,transparent); border-right:0; border-bottom:0; border-top-left-radius:6px; }
.nx-reply-line .nx-avatar { --avatar:16px; width:16px; height:16px; font-size:9px; flex-shrink:0; }
.nx-reply-line strong { color:var(--nx-accent); font-weight:600; white-space:nowrap; }
.nx-reply-line span:last-child { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.nx-reply-line:hover span:last-child { color:var(--nx-text); }
.nx-message.is-highlighted { animation:nx-highlight 1.8s ease-out; }
@keyframes nx-highlight { from { background:color-mix(in srgb,var(--nx-accent) 28%,transparent); } to { background:transparent; } }

.nx-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.nx-reaction { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 7px; border:1px solid transparent; border-radius:8px; background:color-mix(in srgb,var(--nx-text) 7%,transparent); color:var(--nx-soft); font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background-color .12s, border-color .12s; }
.nx-reaction:hover:not(:disabled) { border-color:color-mix(in srgb,var(--nx-text) 22%,transparent); }
.nx-reaction.is-mine { border-color:var(--nx-accent); background:color-mix(in srgb,var(--nx-accent) 20%,transparent); color:var(--nx-text); }
.nx-reaction-emoji { font-size:15px; line-height:1; }
.nx-reaction-add { opacity:0; color:var(--nx-muted); }
.nx-reaction-add .nx-icon { width:16px; height:16px; }
.nx-message:hover .nx-reaction-add, .nx-reaction-add:focus-visible { opacity:1; }
.nx-reaction-picker { position:fixed; z-index:1000; display:flex; gap:2px; padding:6px; border-radius:10px; background:var(--nx-panel, #1e1b26); border:1px solid color-mix(in srgb,var(--nx-text) 10%,transparent); box-shadow:0 8px 24px rgba(0,0,0,.45); }
.nx-reaction-picker button { width:36px; height:36px; border:0; border-radius:8px; background:none; font-size:20px; cursor:pointer; }
.nx-reaction-picker button:hover, .nx-reaction-picker button:focus-visible { background:var(--nx-hover); outline:none; transform:scale(1.08); }

.nx-spoiler { padding:0 2px; border-radius:4px; background:color-mix(in srgb,var(--nx-text) 85%,#000); color:transparent; cursor:pointer; user-select:none; transition:background-color .15s, color .15s; }
.nx-spoiler * { visibility:hidden; }
.nx-spoiler:hover { background:color-mix(in srgb,var(--nx-text) 75%,#000); }
.nx-spoiler.is-revealed { background:color-mix(in srgb,var(--nx-text) 12%,transparent); color:inherit; cursor:text; user-select:text; }
.nx-spoiler.is-revealed * { visibility:visible; }

.nx-reply-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 -6px; padding:6px 8px 12px 14px; border-radius:8px 8px 0 0; background:color-mix(in srgb,var(--nx-rail) 70%,transparent); color:var(--nx-muted); font-size:13px; }
.nx-reply-bar[hidden] { display:none; }
.nx-reply-bar strong { color:var(--nx-text); }
.nx-reply-bar .nx-icon-button { width:24px; height:24px; }

.nx-search-results { display:flex; flex-direction:column; gap:4px; max-height:55vh; overflow:auto; margin-top:12px; }
.nx-search-result { display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border:0; border-radius:8px; background:color-mix(in srgb,var(--nx-text) 5%,transparent); color:inherit; font:inherit; text-align:left; cursor:pointer; }
.nx-search-result:hover { background:var(--nx-hover); }
.nx-search-result small { margin-left:6px; color:var(--nx-muted); font-size:11px; }
.nx-search-result p { margin:2px 0 0; color:var(--nx-soft); font-size:14px; overflow-wrap:anywhere; }
@media (prefers-reduced-motion: reduce) { .nx-message.is-highlighted { animation:none; outline:2px solid var(--nx-accent); } }