/* ============================================ FRIXION — style.css Discord-style client, theme-driven via CSS vars ============================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Discord's UI chrome isn't selectable — dragging across buttons, names, and labels shouldn't highlight text. Message content, bios, notes, and anything you'd actually type into stay selectable. */ * { user-select: none; -webkit-user-select: none; -moz-user-select: none; } input, textarea, .msg-text, .native-emoji, .pinned-row .pr-text, .code-display, .profile-section, .profile-username, .mfc-name, .ue-notes li, .help-row, .toast { user-select: text; -webkit-user-select: text; -moz-user-select: text; } :root { /* ---- default "Frixion Dark" theme ---- */ --bg-deepest: #1e1f22; /* server rail */ --bg-secondary: #2b2d31; /* channel/dm sidebar */ --bg-primary: #313338; /* chat / main content */ --bg-floating: #1e1f22; /* modals, popouts */ --bg-tertiary: #232428; /* user controls / settings navigation */ --bg-input: #383a40; --bg-modifier-hover: rgba(78,80,88,.35); --bg-modifier-selected: rgba(78,80,88,.6); --accent: #5865f2; --accent-hover: #4752c4; --accent-soft: rgba(88,101,242,.15); --premium-grad: linear-gradient(135deg,#f4a4ff,#5865f2); --text-normal: #f2f3f5; --text-muted: #949ba4; --text-faint: #6d6f78; --text-link: #00a8fc; --online: #23a55a; --idle: #f0b232; --dnd: #f23f42; --offline: #80848e; --danger: #da373c; --danger-hover: #a12828; --divider: rgba(255,255,255,.06); --scrollbar-thumb: #1a1b1e; --message-hover: rgba(0,0,0,.08); --shadow-color: rgba(0,0,0,.48); --font: 'Inter', 'gg sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } /* ---- Other Discord appearance themes, applied as a class on ---- */ /* Light: white background, dark grey text */ body.theme-light { --bg-deepest: #e3e5e8; --bg-secondary: #f2f3f5; --bg-primary: #ffffff; --bg-floating: #ffffff; --bg-tertiary: #e3e5e8; --bg-input: #ebedef; --bg-modifier-hover: rgba(0,0,0,.04); --bg-modifier-selected: rgba(0,0,0,.07); --accent-soft: rgba(88,101,242,.12); --text-normal: #060607; --text-muted: #5c5e66; --text-faint: #87898c; --text-link: #006ce7; --divider: rgba(0,0,0,.09); --scrollbar-thumb: rgba(0,0,0,.22); --message-hover: rgba(6,6,7,.045); --shadow-color: rgba(0,0,0,.16); } /* Ash: mid-gray background, white text (Premium) */ body.theme-ash { --bg-deepest: #3f4147; --bg-secondary: #44474e; --bg-primary: #4a4d55; --bg-input: #54575f; --bg-floating: #3a3c42; --bg-tertiary: #3a3c42; } /* Onyx: gray and black background, white text (Premium) */ body.theme-onyx { --bg-deepest: #0a0a0b; --bg-secondary: #111113; --bg-primary: #18181a; --bg-input: #202023; --bg-floating: #0a0a0b; --bg-tertiary: #0a0a0b; } html, body { /* Mobile/tablet browsers don't always resize the layout viewport for the software keyboard — script.js keeps --mobile-viewport-height in sync with the actual visible viewport on touch devices (see syncMobileViewport), so the composer stays docked right above the keyboard instead of being covered by it or leaving a gap. On desktop the variable is never set, so this just falls back to 100dvh. */ height: var(--mobile-viewport-height, 100dvh); min-height: var(--mobile-viewport-height, 100dvh); font-family: var(--font); background: var(--bg-deepest); color: var(--text-normal); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Block pinch-zoom and double-tap-zoom on touch devices. Panning (scroll lists, drag-to-reorder, etc.) stays allowed — only the zoom gestures are excluded. The viewport meta tag's user-scalable=no covers older browsers; this covers modern ones that ignore that. */ touch-action: pan-x pan-y; } body { display: flex; flex-direction: column; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea { font-family: inherit; color: inherit; } a { color: var(--text-link); text-decoration: none; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } .hidden { display: none !important; } /* ============ TITLE BAR (desktop-app style, matches the app's window chrome) ============ */ #title-bar { height: 32px; flex-shrink: 0; display: flex; align-items: center; background: var(--bg-deepest); border-bottom: 1px solid var(--divider); padding: 0 8px 0 12px; -webkit-app-region: drag; user-select: none; position: relative; z-index: 60; } .tb-left { display: flex; align-items: center; gap: 6px; } .tb-brand-mark { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tb-brand-word { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .2px; } .tb-drag { flex: 1; height: 100%; } .tb-right { display: flex; align-items: center; gap: 2px; -webkit-app-region: no-drag; } .tb-icon-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--text-muted); } .tb-icon-btn:hover { background: var(--bg-modifier-hover); color: var(--text-normal); } .tb-sep { width: 1px; height: 16px; background: var(--divider); margin: 0 6px; } .tb-win-btn { width: 30px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); border-radius: 3px; } .tb-win-btn:hover { background: var(--bg-modifier-hover); color: var(--text-normal); } .tb-win-btn.tb-close:hover { background: var(--danger); color: #fff; } /* inbox / help popovers anchored under the title bar */ #inbox-popover, #help-popover { position: fixed; top: 36px; right: 8px; width: 300px; background: var(--bg-floating); border-radius: 8px; box-shadow: 0 8px 30px var(--shadow-color); z-index: 70; padding: 16px; } .ip-head { font-weight: 700; font-size: 15px; margin-bottom: 4px; } .ip-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 8px 8px; color: var(--text-muted); } .ip-empty svg { color: var(--online); margin-bottom: 4px; } .ip-empty-t { color: var(--text-normal); font-weight: 600; font-size: 14px; } .ip-empty-d { font-size: 12.5px; } .help-rows { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; } .help-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); } .help-row kbd { background: var(--bg-input); border: 1px solid var(--divider); border-radius: 4px; padding: 2px 6px; font-size: 11px; font-family: inherit; color: var(--text-normal); } .help-foot { font-size: 12px; color: var(--text-faint); border-top: 1px solid var(--divider); padding-top: 10px; } #page-body { flex: 1; min-height: 0; position: relative; } /* ============ BOOT SPLASH ============ */ #boot-screen { position: fixed; inset: 0; z-index: 500; background: var(--bg-deepest); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .boot-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--accent); display: flex; align-items: center; justify-content: center; } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--bg-input); border-top-color: var(--accent); animation: spin .7s linear infinite; } .spinner.small { width: 16px; height: 16px; border-width: 2px; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } #loading-view { flex: 1; display: flex; align-items: center; justify-content: center; } .msg-loading { flex: 1; display: flex; align-items: center; justify-content: center; } /* ============ AUTH SCREEN ============ */ #auth-screen { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 18% 20%, var(--accent-soft), transparent 42%), radial-gradient(circle at 82% 78%, var(--accent-soft), transparent 42%), var(--bg-deepest); } .auth-card { width: 420px; max-width: 100%; background: var(--bg-secondary); border-radius: 8px; padding: 32px; box-shadow: 0 8px 40px rgba(0,0,0,.5); flex-shrink: 0; } .auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; } .brand-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-mark svg { display: block; } .brand-word { font-size: 20px; font-weight: 800; letter-spacing: .1px; color: var(--text-normal); } .auth-card h1 { font-size: 21px; font-weight: 700; text-align: center; margin-bottom: 6px; } .auth-card p.sub { color: var(--text-muted); text-align: center; font-size: 14px; margin-bottom: 20px; line-height: 1.4; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .setting-row-text { flex: 1; } .setting-row-title { font-size: 15px; font-weight: 500; color: var(--text-normal); margin-bottom: 2px; } .setting-row-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; } /* Quick Text list in Settings → Keyboard */ #quicktext-list { display: flex; flex-direction: column; gap: 8px; } .quicktext-row { display: flex; align-items: center; gap: 8px; } .quicktext-row .quicktext-input { flex: 1; padding: 9px 11px; border-radius: 4px; border: none; background: var(--bg-input); color: var(--text-normal); font-size: 14px; outline: none; font-family: inherit; } .quicktext-row .quicktext-input:focus { box-shadow: 0 0 0 2px var(--accent); } .quicktext-remove { width: 34px; height: 34px; flex-shrink: 0; border-radius: 4px; background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .quicktext-remove:hover { background: var(--bg-modifier-selected); color: var(--danger); } .field input, .field textarea, .field select { width: 100%; padding: 10px 12px; border-radius: 4px; border: none; background: var(--bg-input); color: var(--text-normal); font-size: 15px; outline: none; font-family: inherit; } .field textarea { resize: vertical; min-height: 70px; line-height: 1.4; } .field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 2px var(--accent); } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .btn-primary { width: 100%; background: var(--accent); color: #fff; padding: 11px; border-radius: 4px; font-weight: 600; font-size: 15px; transition: background .12s; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { opacity: .5; cursor: default; } .auth-switch { margin-top: 14px; font-size: 14px; color: var(--text-muted); text-align: center; } .auth-switch a { cursor: pointer; } .auth-error { color: #f87171; font-size: 13px; margin-bottom: 12px; min-height: 16px; } /* ============ APP LAYOUT ============ */ #app { height: 100%; display: grid; grid-template-columns: 72px 240px 1fr; grid-template-rows: 100%; } #app.member-list-open { grid-template-columns: 72px 240px 1fr 240px; } /* ---- server rail ---- */ #server-rail { background: var(--bg-deepest); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 8px; overflow-y: auto; } .rail-item { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; position: relative; transition: border-radius .15s ease, background .15s ease; flex-shrink: 0; } .rail-item::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 8px; border-radius: 0 4px 4px 0; background: var(--text-normal); opacity: 0; transition: height .15s ease, opacity .15s ease; } .rail-item:hover::before { height: 20px; opacity: 1; } .rail-item.active::before, .rail-item.dm-item.active::before { height: 40px; opacity: 1; } .rail-item:hover, .rail-item.active { border-radius: 16px; background: var(--accent); color: #fff; } .rail-divider { width: 32px; height: 2px; background: var(--divider); border-radius: 1px; margin: 4px 0; } .rail-item.action { color: var(--online); } .rail-item.action:hover { color: #fff; background: var(--online); } .rail-item.explore-btn { color: var(--text-muted); } .rail-item.explore-btn:hover { color: #fff; background: var(--accent); } /* ---- second column: channel/dm sidebar ---- */ #side-panel { background: var(--bg-secondary); display: flex; flex-direction: column; min-width: 0; } #side-header { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; box-shadow: 0 1px 0 var(--divider); flex-shrink: 0; font-weight: 700; font-size: 15px; cursor: pointer; } #side-header:hover { background: var(--bg-modifier-hover); } #channel-list, #dm-list { flex: 1; overflow-y: auto; padding: 8px; } .side-section-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; padding: 12px 8px 4px; letter-spacing: .3px; display: flex; justify-content: space-between; align-items: center; } .channel-row, .dm-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 4px; margin-bottom: 2px; color: var(--text-muted); font-size: 15px; font-weight: 500; cursor: pointer; position: relative; } .channel-row:hover, .dm-row:hover { background: var(--bg-modifier-hover); color: var(--text-normal); } .channel-row.active, .dm-row.active { background: var(--bg-modifier-selected); color: var(--text-normal); } .channel-row .hash { opacity: .7; font-size: 18px; font-weight: 400; } .channel-row .del-channel { margin-left: auto; opacity: 0; font-size: 12px; color: var(--text-faint); } .channel-row:hover .del-channel { opacity: 1; } .channel-row .del-channel:hover { color: var(--danger); } .dm-row { padding: 9px 8px; margin-bottom: 6px; gap: 10px; } .dm-row .avatar { width: 32px; height: 32px; } .dm-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .dm-row .dm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-preview { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); font-size: 12px; line-height: 1.25; } /* user panel (bottom-left) */ #user-panel { height: 54px; background: var(--bg-tertiary); display: flex; align-items: center; gap: 8px; padding: 0 8px; flex-shrink: 0; } #user-panel .avatar { width: 32px; height: 32px; } #user-panel .who { flex: 1; min-width: 0; cursor: pointer; padding: 4px 6px; border-radius: 4px; } #user-panel .who:hover { background: var(--bg-modifier-hover); } #user-panel .uname { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:flex; align-items:center; gap:4px;} #user-panel .utag { font-size: 12px; color: var(--text-muted); } #user-panel .icon-btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } #user-panel .icon-btn:hover { background: var(--bg-modifier-hover); color: var(--text-normal); } /* ---- avatars ---- */ .avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; position: relative; user-select: none; /* No overflow:hidden here on purpose: the img below clips itself (it has its own border-radius), and keeping this box unclipped means the status dot (positioned right at the corner) renders as a full circle instead of getting sliced by this element's own circular clip path. */ } .avatar.has-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .avatar .status-dot { /* Size and position are set inline per-avatar (see avatarHTML in script.js) so they scale correctly with whatever size that avatar is rendered at. The avatar itself gets a mask cutout so this dot always sits on a clean punched hole instead of a border trying to guess the background color. */ position: absolute; border-radius: 50%; } .status-dot.online { background: var(--online); } .status-dot.idle { background: var(--idle); } .status-dot.dnd { background: var(--dnd); } .status-dot.offline { background: var(--offline); } /* ---- main chat column ---- */ #main-col { display: flex; flex-direction: column; min-width: 0; background: var(--bg-primary); } #chat-header { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; box-shadow: 0 1px 0 var(--divider); flex-shrink: 0; } #chat-header .hash { font-size: 22px; color: var(--text-muted); } #chat-header .title { font-weight: 700; font-size: 15px; } .mobile-back-btn { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text-muted); border-radius: 4px; flex-shrink: 0; cursor: pointer; } .mobile-back-btn:hover { color: var(--text-normal); background: var(--bg-modifier-hover); } .chat-header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } .hdr-icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 4px; color: var(--text-muted); cursor: pointer; } .hdr-icon-btn:hover { color: var(--text-normal); background: var(--bg-modifier-hover); } .hdr-icon-btn.on { color: var(--text-normal); } #chat-header .members-toggle { color: var(--text-muted); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 4px; cursor: pointer; } #chat-header .members-toggle:hover { color: var(--text-normal); background: var(--bg-modifier-hover); } #search-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-input); margin: 10px 16px 0; border-radius: 4px; color: var(--text-muted); flex-shrink: 0; } #search-bar input { flex: 1; background: none; border: none; outline: none; color: var(--text-normal); font-size: 14px; } #search-bar input::placeholder { color: var(--text-faint); } #search-count { font-size: 12px; color: var(--text-faint); white-space: nowrap; } #search-bar .hdr-icon-btn { width: 22px; height: 22px; font-size: 13px; } #welcome-view { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: 10px; text-align: center; padding: 20px; } .welcome-icon { width: 76px; height: 76px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 6px; } #welcome-view h2 { color: var(--text-normal); font-size: 20px; font-weight: 700; } #welcome-view p { font-size: 14px; max-width: 320px; } #messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 0 8px; display: flex; flex-direction: column; } .msg-group { padding: 2px 16px; display: flex; gap: 16px; position: relative; } .msg-group:hover { background: var(--message-hover); } .msg-group .avatar { width: 40px; height: 40px; margin-top: 2px; cursor: pointer; } .msg-body { flex: 1; min-width: 0; } .msg-meta { display: flex; align-items: baseline; gap: 8px; } .msg-meta .author { font-weight: 600; font-size: 15px; cursor: pointer; } .msg-meta .author:hover { text-decoration: underline; } .msg-meta .author.own { color: var(--accent); } .msg-meta .time { font-size: 11px; color: var(--text-faint); } .msg-text { font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .edited-tag { font-size: 10px; color: var(--text-faint); margin-left: 4px; } /* Reply reference — its own block sibling above .msg-row-wrap (not nested inside it), so it never shares row-wrap's flex-wrap context or competes with the hover toolbar. Everything here — icon included — stays inside the row's own normal bounds rather than reaching left into the avatar column: #messages scrolls vertically (overflow-y: auto) with no overflow-x set, and per spec that silently forces overflow-x to "auto" too, which clips off anything positioned to the left of a row's own edge. A negatively-positioned connector rendered there, but invisibly. */ .msg-reply-ref { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); margin: 0 0 3px 0; cursor: pointer; min-width: 0; } .msg-reply-ref .reply-corner-icon { display: inline-flex; flex-shrink: 0; color: var(--text-faint); } .msg-reply-ref .reply-corner-icon svg { display: block; } .msg-reply-ref:hover { color: var(--text-normal); } .msg-reply-ref:hover .reply-corner-icon { color: var(--text-muted); } .msg-reply-ref .reply-avatar { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } .msg-reply-ref .mrr-user { font-weight: 600; color: var(--text-normal); flex-shrink: 0; font-size: 13px; } .msg-reply-ref:hover .mrr-user { text-decoration: underline; } .msg-reply-ref .mrr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; min-width: 0; } .msg-reply-ref:hover .mrr-text { opacity: 1; } .msg-edit-box { width: 100%; } .msg-edit-input { display: block; width: 100%; background: var(--bg-input); border: 1px solid var(--accent); border-radius: 6px; color: var(--text-normal); font-size: 15px; line-height: 1.4; padding: 8px 10px; resize: none; outline: none; font-family: inherit; } .msg-edit-hint { font-size: 11px; color: var(--text-faint); margin-top: 4px; } .msg-edit-hint a { color: var(--accent); cursor: pointer; } .msg-edit-hint a:hover { text-decoration: underline; } @keyframes msgFlash { from { background: var(--accent-soft); } to { background: transparent; } } .flash-highlight { animation: msgFlash 1.2s ease; border-radius: 6px; } .msg-line { position: relative; } /* Reserves room for the hover toolbar so it can never land on top of the message's own text — previously the toolbar was purely absolutely positioned with nothing accounting for its footprint, so a first line of text running close to the right edge would end up hidden underneath it while hovering. The toolbar's own position is unchanged (still flush with the row's top-right corner); this just stops content from ever reaching that corner in the first place. Costs a bit of wrap width on every message, which is the trade-off for the toolbar never covering anything. */ .msg-row-wrap { padding-right: 138px; } /* Row content shrinks to fit (image, text, whatever it is) instead of stretching across the whole message column — that's what lets the hover toolbar below sit right next to the actual content instead of drifting off to the far right of a mostly-empty row. min-width keeps very short messages (a single short word, say) wide enough that the toolbar still has room to sit within the row instead of overhanging off its left edge into the username line above. */ .msg-row-wrap { position: relative; display: inline-flex; max-width: 100%; min-width: 138px; align-items: flex-start; gap: 6px; flex-wrap: wrap; } /* Pinned highlight: treat text vs. media differently. Plain text turns gold rather than getting boxed in, and media (images/GIFs/stickers/ files) gets a border that hugs its own exact edges via a negative outline-offset, so the highlight can never bleed upward into the username line sitting above the message. */ .msg-line.is-pinned .msg-text { color: #f0b132; } .msg-line.is-pinned .msg-attachment img, .msg-line.is-pinned .msg-sticker { outline: 2px solid #f0b132; outline-offset: -2px; border-radius: 8px; } .msg-line.is-pinned .msg-file-card { outline: 2px solid #f0b132; outline-offset: -2px; background: rgba(240, 177, 50, .07); } /* top: 0 keeps the toolbar's top edge flush with its own row's top edge instead of floating above it — reaching upward (even a little) was what let it land on top of the username line for the first message in a group, or the previous message's text for a grouped one directly below it. This way it only ever overlaps its own row, never a different line. */ .msg-hover-actions { display: none; position: absolute; top: 0; right: 0; align-items: center; gap: 1px; background: var(--bg-primary); border: 1px solid var(--divider); border-radius: 8px; padding: 3px; box-shadow: 0 2px 10px var(--shadow-color); z-index: 6; } .msg-line:hover .msg-hover-actions { display: inline-flex; } .hover-icon-btn { display: inline-flex; cursor: pointer; color: var(--text-muted); padding: 5px; border-radius: 4px; } .hover-icon-btn:hover { color: var(--text-normal); background: var(--bg-modifier-hover); } .hover-icon-btn.del-msg:hover { color: var(--danger); } .hover-icon-btn.pin-msg.on { color: var(--accent); } .custom-emoji { height: 1.375em; width: auto; vertical-align: -0.4em; margin: 0 1px; } .native-emoji { font-size: 1.1em; } .reaction-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; } .reaction-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-input); border: 1px solid transparent; border-radius: 10px; padding: 2px 8px; font-size: 13px; cursor: pointer; } .reaction-pill:hover { border-color: var(--text-faint); } .reaction-pill.mine { background: var(--accent-soft); border-color: var(--accent); } .reaction-pill span { font-size: 11px; color: var(--text-muted); font-weight: 600; } .reaction-emoji-img { width: 16px; height: 16px; object-fit: contain; } .react-popover { position: fixed; z-index: 200; background: var(--bg-floating); border-radius: 8px; padding: 6px; display: flex; gap: 2px; box-shadow: 0 4px 20px var(--shadow-color); } .react-pick { font-size: 20px; padding: 5px; border-radius: 6px; line-height: 1; } .react-pick:hover { background: var(--bg-modifier-hover); } .full-react-popover { flex-direction: column; gap: 0; padding: 10px 10px 0; overflow: hidden; } .full-react-popover .ep-search input { margin-bottom: 8px; } .full-react-popover .ep-scroll { max-height: none; flex: 1; overflow-y: auto; padding-bottom: 10px; } /* ---- mobile long-press message action sheet ---- */ .action-sheet-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; animation: sheetFadeIn .15s ease; } @keyframes sheetFadeIn { from { opacity: 0; } to { opacity: 1; } } .action-sheet { width: 100%; max-width: 480px; background: var(--bg-floating); border-radius: 14px 14px 0 0; padding: 14px 8px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 24px var(--shadow-color); animation: sheetSlideUp .18s ease; } @keyframes sheetSlideUp { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } } .as-quick-react { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: var(--bg-input); border-radius: 24px; padding: 6px 10px; margin: 0 6px 12px; } .as-quick-emoji { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 20px; border-radius: 50%; line-height: 1; color: var(--text-muted); } .as-quick-emoji:hover, .as-quick-emoji:active { background: var(--bg-modifier-hover); } .as-quick-emoji.as-more-react .i svg { width: 16px; height: 16px; } .as-actions { display: flex; flex-direction: column; } .as-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 8px; font-size: 15px; color: var(--text-normal); } .as-item:hover, .as-item:active { background: var(--bg-modifier-hover); } .as-item .i svg { width: 18px; height: 18px; } .as-item.as-danger { color: var(--danger); } body.action-sheet-open { overflow: hidden; } .day-divider { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 12px; font-weight: 600; margin: 16px 16px 8px; } .day-divider::before, .day-divider::after { content: ''; flex: 1; height: 1px; background: var(--divider); } #composer-wrap { padding: 0 16px 24px; flex-shrink: 0; position: relative; } /* :empty + visibility:hidden (not display:none) reserves the row's height always, so it never shifts the composer up when someone starts/stops typing. */ .typing-indicator { min-height: 20px; padding: 0 16px; margin-bottom: 4px; font-size: 13px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .typing-indicator:empty { visibility: hidden; } .typing-dots { display: inline-flex; gap: 2px; } .typing-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); animation: typingBounce 1.2s infinite ease-in-out; } .typing-dots span:nth-child(2) { animation-delay: .15s; } .typing-dots span:nth-child(3) { animation-delay: .3s; } @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } } #reply-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg-input); border-radius: 8px 8px 0 0; padding: 8px 12px; font-size: 13px; color: var(--text-muted); margin-bottom: -1px; } #reply-bar.hidden { display: none; } #reply-bar .rb-text b { color: var(--text-normal); } #reply-bar .rb-close { cursor: pointer; color: var(--text-muted); font-size: 14px; padding: 2px 4px; border-radius: 4px; } #reply-bar .rb-close:hover { color: var(--text-normal); background: var(--bg-modifier-hover); } #composer { background: var(--bg-input); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; gap: 4px; min-height: 44px; position: relative; } #composer textarea { flex: 1; background: none; border: none; outline: none; resize: none; max-height: 200px; font-size: 15px; line-height: 1.4; color: var(--text-normal); padding: 11px 4px; } #composer textarea::placeholder { color: var(--text-faint); } /* Absolutely positioned so it never changes #composer's own height/layout when it appears or disappears — that height-jump was the original bug. */ .composer-char-count { position: absolute; right: 10px; bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-faint); background: var(--bg-input); padding: 1px 6px; border-radius: 8px; pointer-events: none; line-height: 1.6; } .composer-char-count.over-limit { color: #fff; background: #da373c; } .composer-right-icons { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .composer-icon-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--text-muted); border-radius: 6px; flex-shrink: 0; font-size: 11px; font-weight: 800; } .composer-icon-btn:hover { color: var(--text-normal); background: var(--bg-modifier-hover); } .composer-icon-btn svg { display: block; } #gift-btn.hidden { display: none; } /* ---- custom on-screen keyboard (mobile composer, edit box, and any wired search field) ---- */ #custom-keyboard { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)); margin-top: 8px; background: var(--bg-deepest); border-radius: 10px; user-select: none; -webkit-user-select: none; } #custom-keyboard.hidden { display: none; } .ck-row { display: flex; gap: 5px; } .ck-tool-row { gap: 6px; padding: 0 2px 2px; } .ck-key.ck-tool { flex: 1; height: 30px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-input); border-radius: 5px; box-shadow: none; } .ck-key.ck-tool:active { background: var(--bg-modifier-hover); color: var(--text-normal); } .ck-key { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--bg-input); color: var(--text-normal); border-radius: 6px; font-size: 16px; font-weight: 500; box-shadow: 0 1px 0 rgba(0,0,0,.25); } .ck-key:active { background: var(--bg-modifier-hover); transform: translateY(1px); } .ck-key.ck-wide { flex: 1.6; font-size: 13px; } .ck-key .i svg { width: 18px; height: 18px; display: block; } .ck-shift.on, .ck-shift.caps { color: var(--accent); } .ck-shift.caps { background: var(--accent-soft, rgba(88,101,242,.18)); } .ck-bottom-row { align-items: stretch; } .ck-key.ck-tag { flex: 1; font-size: 13px; font-weight: 700; } .ck-key.ck-tag.on { color: var(--accent); background: var(--accent-soft, rgba(88,101,242,.18)); } .ck-key.ck-space { flex: 4; font-size: 13px; color: var(--text-muted); } .ck-key.ck-enter { flex: 1.4; background: var(--accent); color: #fff; } .ck-key.ck-enter:active { background: var(--accent-hover); } .ck-key.ck-enter .i svg { width: 17px; height: 17px; } /* the keyboard's own emoji page (tapping the smiley key swaps in these rows in place, same shell as letters/symbols, instead of hiding the keyboard and popping the separate floating emoji-picker-panel open) */ .ck-emoji-scroll { max-height: 148px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; } .ck-emoji-key { font-size: 20px; } .ck-emoji-key img { width: 22px; height: 22px; object-fit: contain; display: block; } /* the popover the keyboard's own "Quick Text" tool-row button opens */ .ck-quicktext-popover { position: fixed; z-index: 250; background: var(--bg-floating); border-radius: 8px; padding: 6px; box-shadow: 0 8px 30px var(--shadow-color); display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; } .ck-qt-item { text-align: left; padding: 9px 10px; border-radius: 4px; font-size: 14px; color: var(--text-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-qt-item:hover { background: var(--bg-modifier-hover); } .ck-qt-empty { padding: 10px; font-size: 13px; color: var(--text-muted); max-width: 240px; } /* the tap-feedback / long-press-for-alternates bubble above a key */ .ck-press-bubble { position: fixed; z-index: 260; display: flex; background: var(--bg-floating); border-radius: 8px; box-shadow: 0 4px 14px var(--shadow-color); padding: 4px; pointer-events: none; } .ck-press-char { min-width: 30px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: var(--text-normal); border-radius: 6px; padding: 0 4px; } .ck-press-char.active { background: var(--accent); color: #fff; } /* Custom blinking cursor — readOnly fields don't reliably show a native caret, so this is drawn separately and positioned via JS (measureCaretOffset/positionCkCursor) to track wherever the selection currently is in whichever field is active. */ #ck-cursor { position: fixed; display: none; width: 2px; background: var(--accent); z-index: 250; pointer-events: none; border-radius: 1px; } #ck-cursor.ck-blink { animation: ckCursorBlink 1s step-end infinite; } @keyframes ckCursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* "Select All" visual feedback on whichever field is targeted */ .ck-all-selected { background: var(--accent-soft, rgba(88,101,242,.25)) !important; } /* ---- "+" button menu: upload a file / create a poll ---- */ /* Anchored to the left, matching where the attach button sits. */ .composer-action-menu { position: absolute; bottom: 74px; left: 16px; width: 220px; background: var(--bg-floating); border-radius: 8px; padding: 6px; box-shadow: 0 8px 30px var(--shadow-color); z-index: 50; display: flex; flex-direction: column; gap: 2px; } .composer-action-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 4px; color: var(--text-normal); font-size: 14px; font-weight: 500; text-align: left; } .composer-action-menu button span:first-child { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 17px; } .composer-action-menu button:hover:not(:disabled) { background: var(--bg-modifier-hover); } .composer-action-menu button:hover:not(:disabled) span:first-child { color: var(--text-normal); } .composer-action-menu button:disabled { color: var(--text-faint); cursor: default; } .composer-action-menu button small { margin-left: auto; background: var(--bg-modifier-selected); color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 5px; border-radius: 3px; } /* ---- emoji picker popover above composer ---- */ /* Anchored to the right, matching where the emoji/GIF/sticker buttons actually sit in the composer, instead of popping up over on the left. */ #emoji-picker-panel { position: absolute; bottom: 74px; right: 16px; width: 340px; max-width: calc(100% - 32px); background: var(--bg-floating); border-radius: 8px; padding: 12px 12px 0; box-shadow: 0 8px 30px var(--shadow-color); z-index: 50; display: flex; flex-direction: column; } /* Reused for picking a poll answer's emoji — floats near the answer row's emoji button, above the poll modal, instead of its usual composer spot. */ #emoji-picker-panel.ep-anchored { position: fixed; bottom: auto; right: auto; z-index: 220; } .ep-poll-clear { margin-bottom: 8px; } .ep-poll-clear button { width: 100%; text-align: left; font-size: 12px; color: var(--text-muted); padding: 6px 8px; border-radius: 4px; background: var(--bg-input); } .ep-poll-clear button:hover { color: var(--danger); } .ep-search input { width: 100%; padding: 8px 10px; border-radius: 4px; border: none; background: var(--bg-input); color: var(--text-normal); font-size: 14px; outline: none; margin-bottom: 10px; } .ep-cats { display: flex; gap: 2px; border-bottom: 1px solid var(--divider); padding-bottom: 8px; margin-bottom: 8px; flex-wrap: wrap; } .ep-cat-btn { font-size: 16px; padding: 4px 6px; border-radius: 6px; line-height: 1; } .ep-cat-btn:hover { background: var(--bg-modifier-hover); } .ep-scroll { max-height: 240px; overflow-y: auto; padding-bottom: 10px; } .ep-section-label { font-size: 11px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin: 8px 0 6px; } .ep-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .ep-grid button { display: flex; align-items: center; justify-content: center; font-size: 20px; height: 32px; padding: 0; border-radius: 6px; text-align: center; line-height: 1; } .ep-grid button:hover { background: var(--bg-modifier-hover); } .ep-grid img { width: 22px; height: 22px; object-fit: contain; } .ep-empty { grid-column: 1 / -1; font-size: 12px; color: var(--text-faint); padding: 6px 2px; } /* ---- member sidebar (3rd/4th col) ---- */ #member-panel { background: var(--bg-secondary); overflow-y: auto; padding: 16px 8px; display: none; } #app.member-list-open #member-panel { display: block; } .member-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; cursor: pointer; } .member-row:hover { background: var(--bg-modifier-hover); } .member-row .avatar { width: 32px; height: 32px; } .member-row .mname { font-size: 15px; color: var(--text-muted); font-weight: 500; } .member-row .mname.online-name { color: var(--text-normal); } .member-row .premium-badge { font-size: 12px; } /* ============ MODALS ============ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-box { background: var(--bg-floating); border-radius: 8px; width: 460px; max-width: 92vw; max-height: 86vh; overflow-y: auto; padding: 24px; } .modal-box.wide { width: 720px; } .modal-box h2 { font-size: 20px; margin-bottom: 4px; } .modal-box p.desc { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; } .modal-close { position: absolute; } .modal-header-row { display: flex; justify-content: space-between; align-items: flex-start; } .modal-header-row .x { color: var(--text-muted); font-size: 22px; cursor: pointer; } .modal-header-row .x:hover { color: var(--text-normal); } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .btn-secondary { background: var(--bg-input); color: var(--text-normal); padding: 10px 18px; border-radius: 4px; font-weight: 600; } .btn-secondary:hover { background: var(--bg-modifier-selected); } .btn-danger { background: var(--danger); color: #fff; padding: 10px 18px; border-radius: 4px; font-weight: 600; } .btn-danger:hover { background: var(--danger-hover); } .btn-accent-inline { background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 4px; font-weight: 600; } .btn-accent-inline:hover { background: var(--accent-hover); } /* Gift Premium is opened from the gift button over on the right side of the composer/profile panel, so it makes more sense anchored there than dead-center like the rest of the modals. */ #gift-modal { justify-content: flex-end; padding-right: 60px; } /* ---- explore servers ---- */ .explore-server-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; } .explore-server-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px; background: var(--bg-secondary); } .explore-server-row .explore-server-icon { width: 44px; height: 44px; flex-shrink: 0; font-size: 16px; background: var(--bg-tertiary); } .explore-server-info { flex: 1; min-width: 0; } .explore-server-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .explore-server-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .explore-server-join { flex-shrink: 0; } .explore-server-join.joined { background: transparent; border: 1px solid var(--bg-modifier-selected); } .explore-server-join.joined:hover { background: var(--bg-modifier-hover); } .explore-loading, .explore-empty { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: 14px; } /* ---- create-a-poll modal ---- */ .poll-modal-box { width: 480px; } .poll-modal-title { display: flex; align-items: center; gap: 10px; } .poll-modal-icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; } .poll-char-count { text-align: right; font-size: 11px; color: var(--text-faint); margin-top: 4px; } .poll-answer-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .poll-answer-row { display: flex; align-items: center; gap: 8px; } .poll-answer-row .poll-answer-input { flex: 1; padding: 10px 12px; border-radius: 6px; border: 1px solid transparent; background: var(--bg-input); color: var(--text-normal); font-size: 14px; outline: none; font-family: inherit; transition: border-color .1s ease; } .poll-answer-row .poll-answer-input:focus { border-color: var(--accent); } .poll-answer-row .poll-answer-input::placeholder { color: var(--text-faint); } .poll-answer-emoji-btn, .poll-answer-remove { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 16px; overflow: hidden; transition: background .1s ease, color .1s ease; } .poll-answer-emoji-btn img.custom-emoji { width: 18px; height: 18px; } .poll-answer-emoji-btn:hover { background: var(--bg-modifier-selected); color: var(--text-normal); } .poll-answer-remove:hover { background: var(--bg-modifier-selected); color: var(--danger); } .poll-answer-remove.hidden { visibility: hidden; } .poll-add-answer { width: 100%; text-align: center; } .poll-multiple-row { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--divider); } /* ---- poll message card (in the chat itself) ---- */ .poll-card { border: 1px solid var(--divider); border-radius: 8px; padding: 12px 14px; margin-top: 4px; max-width: 440px; background: var(--bg-secondary); } .poll-card-question { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: 15px; color: var(--text-normal); margin-bottom: 12px; line-height: 1.3; } .poll-card-question .i { flex-shrink: 0; margin-top: 1px; color: var(--text-muted); } .poll-card-question .i svg { width: 17px; height: 17px; } .poll-options { display: flex; flex-direction: column; gap: 6px; } .poll-option { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--bg-modifier-selected); overflow: hidden; background: var(--bg-primary); color: var(--text-normal); font-size: 14px; cursor: pointer; } .poll-option:hover:not(.locked) { border-color: var(--accent); } .poll-option.voted { border-color: var(--accent); } .poll-option.locked { cursor: default; } .poll-option.winning { border-color: var(--online); } .poll-option-fill { position: absolute; inset: 0; width: 0; background: var(--bg-modifier-selected); transition: width .25s ease; z-index: 0; } .poll-option.voted .poll-option-fill { background: var(--accent-soft, rgba(88,101,242,.25)); } .poll-option.winning .poll-option-fill { background: rgba(35,165,90,.22); } .poll-option-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .poll-option-check { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--text-muted); display: flex; align-items: center; justify-content: center; color: transparent; } .poll-option.voted .poll-option-check { border-color: var(--accent); background: var(--accent); } .poll-option-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .poll-option-emoji { margin-right: 2px; } .poll-option-emoji img.custom-emoji { width: 16px; height: 16px; vertical-align: -3px; } .poll-option-pct { position: relative; z-index: 1; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); } .poll-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--text-muted); } .poll-multi-tag { font-style: italic; } /* settings modal layout */ #settings-modal .modal-box { display: flex; padding: 0; width: 780px; height: 560px; max-height: 86vh; } #settings-nav { width: 220px; background: var(--bg-tertiary); padding: 20px 10px; flex-shrink: 0; overflow-y: auto; } #settings-nav .nav-item { padding: 8px 10px; border-radius: 4px; color: var(--text-muted); font-weight: 600; font-size: 15px; cursor: pointer; margin-bottom: 2px; } #settings-nav .nav-item:hover { background: var(--bg-modifier-hover); color: var(--text-normal); } #settings-nav .nav-item.active { background: var(--bg-modifier-selected); color: var(--text-normal); } #settings-nav .nav-label { font-size: 12px; text-transform: uppercase; color: var(--text-faint); font-weight: 700; padding: 14px 10px 4px; } #settings-content { flex: 1; padding: 30px 40px; overflow-y: auto; position: relative; } #settings-content h2 { font-size: 20px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: .3px; } .settings-close { position: absolute; top: 24px; right: 24px; } /* ---- update log ---- */ .update-entry { padding: 16px 0; border-bottom: 1px solid var(--divider); } .update-entry:last-child { border-bottom: none; } .ue-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .ue-ver { background: var(--bg-input); color: var(--text-muted); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; } .ue-title { font-weight: 700; font-size: 15px; } .ue-date { color: var(--text-faint); font-size: 12px; margin-left: auto; } .ue-latest { background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; letter-spacing: .3px; } .ue-notes { list-style: none; display: flex; flex-direction: column; gap: 6px; } .ue-notes li { position: relative; padding-left: 16px; font-size: 14px; color: var(--text-muted); line-height: 1.45; } .ue-notes li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); } /* ---- quests ---- */ .quest-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--divider); } .quest-row:last-child { border-bottom: none; } .quest-info { flex: 1; min-width: 0; } .quest-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; } .quest-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .quest-bar { height: 6px; border-radius: 3px; background: var(--bg-input); overflow: hidden; margin-bottom: 4px; } .quest-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .2s ease; } .quest-progress { font-size: 11px; color: var(--text-faint); font-weight: 600; } .quest-reward { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; } .quest-claimed { font-size: 12px; color: var(--online); font-weight: 700; } .quest-locked { font-size: 12px; color: var(--text-faint); } .color-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; position: relative; } .swatch.locked-swatch { filter: saturate(.35) brightness(.65); display: flex; align-items: center; justify-content: center; } .swatch-lock { color: #fff; width: 13px; height: 13px; } .swatch.selected { border-color: #fff; } .status-picker { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .status-opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; cursor: pointer; } .status-opt:hover { background: var(--bg-modifier-hover); } .status-opt.selected { background: var(--bg-modifier-selected); } .status-opt .dot { width: 10px; height: 10px; border-radius: 50%; } /* premium modal */ .orb-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .orb-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-input); color: var(--text-normal); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 20px; } .orb-chip svg, .orb-chip .i { color: #f0b232; width: 16px; height: 16px; } .orb-chip.small { padding: 3px 9px; font-size: 12px; } .orb-chip.small svg { width: 13px; height: 13px; } .orb-hint { font-size: 12.5px; color: var(--text-muted); } .premium-hero { border-radius: 8px; padding: 28px; text-align: center; margin-bottom: 20px; background: var(--premium-grad); color: #fff; } .premium-hero h2 { font-size: 24px; margin-bottom: 6px; } .premium-hero p { opacity: .9; font-size: 14px; } .perk-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .perk { display: flex; gap: 12px; align-items: flex-start; } .perk .icon { font-size: 20px; } .perk .t { font-weight: 600; font-size: 14px; } .perk .d { font-size: 13px; color: var(--text-muted); } .premium-active-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--premium-grad); color: #fff; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; } /* theme grid (premium perk) */ .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; } .theme-card { border-radius: 8px; height: 90px; cursor: pointer; position: relative; overflow: hidden; border: 2px solid transparent; padding: 10px; font-weight: 700; font-size: 13px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); display: flex; flex-direction: column; justify-content: flex-end; } .theme-card.selected { border-color: var(--accent); } .theme-card.locked { filter: saturate(.4) brightness(.6); } .theme-card .lock-badge { position: absolute; top: 8px; right: 8px; color: #fff; } .theme-swatch-dark { background: linear-gradient(135deg,#313338,#1e1f22); } .theme-swatch-light { background: linear-gradient(135deg,#ffffff,#c9cdd2); } .theme-swatch-sync { background: linear-gradient(135deg,#ffffff 49%,#1e1f22 51%); } .theme-swatch-ash { background: linear-gradient(135deg,#54575f,#3a3c42); } .theme-swatch-onyx { background: linear-gradient(135deg,#232326,#000000); } /* create/join server modal choices */ .big-choice-row { display: flex; flex-direction: column; gap: 12px; } .big-choice { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 8px; background: var(--bg-input); cursor: pointer; } .big-choice:hover { background: var(--bg-modifier-selected); } .big-choice .em { font-size: 26px; } .big-choice .t { font-weight: 700; font-size: 15px; } .big-choice .d { font-size: 13px; color: var(--text-muted); } .back-link { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; cursor: pointer; display: inline-block; } .back-link:hover { color: var(--text-normal); } /* toast */ #toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 999; } .toast { background: var(--bg-floating); border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 4px; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.4); min-width: 220px; } .toast.error { border-color: var(--danger); } /* premium sparkle badge next to usernames */ .premium-star { color: #f4a4ff; font-size: 13px; } /* scrollable modal helper */ .field small.hint { color: var(--text-faint); display: block; margin-top: 4px; font-size: 12px; } /* ---- pinned messages modal ---- */ #pinned-list { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; margin-top: 6px; } .pinned-row { display: flex; gap: 10px; padding: 10px 8px; border-radius: 6px; } .pinned-row:hover { background: var(--bg-modifier-hover); } .pinned-row .avatar { width: 34px; height: 34px; flex-shrink: 0; } .pinned-row .pr-body { flex: 1; min-width: 0; } .pinned-row .pr-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .pinned-row .pr-author { font-weight: 600; font-size: 14px; } .pinned-row .pr-time { font-size: 11px; color: var(--text-faint); } .pinned-row .pr-text { font-size: 14px; color: var(--text-muted); line-height: 1.4; word-break: break-word; } .pinned-row .pr-unpin { color: var(--text-faint); align-self: flex-start; cursor: pointer; padding: 4px; border-radius: 4px; } .pinned-row .pr-unpin:hover { color: var(--danger); background: var(--bg-modifier-hover); } /* ---- search match highlight ---- */ .search-hit { background: rgba(240,178,50,.35); border-radius: 2px; padding: 0 1px; } /* ---- tablet: narrow the rail/sidebar, still 3-pane like desktop ---- */ @media (max-width: 900px) and (min-width: 601px) { #app, #app.member-list-open { grid-template-columns: 60px 200px 1fr; } #app.member-list-open #member-panel { display: none; } } /* Narrow windows in general — a resized or split-screen desktop browser window is just as tight as a phone, even with a mouse. This mirrors the phone layout below (single pane at a time, sliding panel nav) without the touch-only bits like long-press or on-screen-keyboard tracking, which live in the touch-scoped media query further down. */ @media (max-width: 700px) { #app, #app.member-list-open { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; } #server-rail { grid-column: 1; grid-row: 1; width: 56px; padding: 8px 0; } .rail-item { width: 42px; height: 42px; font-size: 13px; } #side-panel, #main-col { grid-row: 1; min-width: 0; display: flex; transition: transform .28s cubic-bezier(.25,.75,.4,1); } #side-panel { grid-column: 2 / 3; transform: translateX(0); } #main-col { grid-column: 1 / -1; z-index: 2; transform: translateX(100%); } #app.mobile-show-chat #side-panel { transform: translateX(-100%); } #app.mobile-show-chat #main-col { transform: translateX(0); } .mobile-back-btn { display: flex; } #member-panel { display: none; } #app.member-list-open #member-panel { display: block; position: fixed; inset: 0; top: 32px; z-index: 45; width: 100%; height: calc(100% - 32px); padding: 16px 12px; } #settings-modal .modal-box { flex-direction: column; height: 88vh; } #settings-nav { width: 100%; display: flex; flex-wrap: wrap; gap: 2px; padding: 10px; } #settings-nav .nav-label { display: none; } .admin-layout { flex-direction: column; height: auto; } .admin-left { width: 100%; } .admin-right { border-left: none; border-top: 1px solid var(--divider); padding-left: 0; padding-top: 16px; } } /* ============ ICONS (no emoji anywhere — plain inline SVG) ============ */ .i { display: inline-flex; width: 14px; height: 14px; vertical-align: middle; flex-shrink: 0; } .i svg { width: 100%; height: 100%; display: block; } .premium-star { color: #f4a4ff; width: 12px; height: 12px; margin-left: 3px; } .owner-crown { color: var(--idle); width: 13px; height: 13px; margin-left: 3px; } .del-msg .i, .del-channel .i { width: 13px; height: 13px; } .lock-badge { width: 13px; height: 13px; opacity: .8; } .big-choice .em { display: flex; align-items: center; justify-content: center; color: var(--text-muted); width: 26px; } /* ============ ROLE / STATE TAGS ============ */ .op-tag, .ban-tag, .owner-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; margin-left: 5px; vertical-align: middle; letter-spacing: .3px; } .op-tag { background: var(--accent-soft); color: var(--accent); } .ban-tag { background: rgba(218,55,60,.18); color: var(--danger); } .owner-tag { background: rgba(240,177,50,.18); color: #f0b132; } /* inline-flex + align-items:center centers the checkmark against the text using true vertical centering instead of vertical-align (which drifts depending on font metrics) */ .bot-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px 1px 5px; border-radius: 3px; margin-left: 5px; letter-spacing: .3px; background: var(--accent-soft); color: var(--accent); vertical-align: middle; } .bot-tag .i { width: 10px; height: 10px; } /* ============ PURGE CONFIRMATION CARD (Sapphire) ============ */ .purge-card { display: inline-flex; align-items: center; gap: 8px; background: rgba(59,165,93,.08); border-left: 3px solid #3ba55d; padding: 8px 12px; border-radius: 4px; font-size: 14px; color: var(--text-normal); } .purge-card .i { color: #3ba55d; width: 16px; height: 16px; flex-shrink: 0; } /* ============ ADMIN PANEL ============ */ .admin-box { width: 820px; } .admin-tabs { display: flex; gap: 4px; margin: 14px 0 4px; border-bottom: 1px solid var(--divider); } .admin-tab { padding: 8px 14px; font-weight: 600; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; } .admin-tab:hover { color: var(--text-normal); } .admin-tab.on { color: var(--text-normal); border-color: var(--accent); } .admin-pane { margin-top: 10px; } .fld-label { display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; font-weight: 700; letter-spacing: .3px; } .hint { color: var(--text-faint); display: block; margin-top: 8px; font-size: 12px; } .admin-emoji-list { display: flex; flex-wrap: wrap; gap: 10px; max-height: 220px; overflow-y: auto; } .admin-emoji-chip { display: flex; align-items: center; gap: 7px; background: var(--bg-input); padding: 6px 10px; border-radius: 20px; font-size: 13px; } .admin-emoji-chip img { width: 22px; height: 22px; } .admin-emoji-chip .rm { display: inline-flex; cursor: pointer; color: var(--text-faint); } .admin-emoji-chip .rm:hover { color: var(--danger); } .admin-layout { display: flex; gap: 16px; height: 460px; margin-top: 10px; } .admin-left { width: 260px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } .fld-input { width: 100%; padding: 9px 11px; border-radius: 4px; border: none; background: var(--bg-input); color: var(--text-normal); font-size: 14px; outline: none; } .fld-input:focus { box-shadow: 0 0 0 2px var(--accent); } .admin-user-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .admin-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; } .admin-row:hover { background: var(--bg-modifier-hover); } .admin-row.on { background: var(--bg-modifier-selected); } .admin-row .ar-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-right { flex: 1; overflow-y: auto; border-left: 1px solid var(--divider); padding-left: 20px; } .admin-right .empty { color: var(--text-faint); font-size: 14px; padding-top: 10px; } .admin-sel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .admin-sel-head .as-name { font-weight: 700; font-size: 16px; } .admin-sel-head .as-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .admin-block { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--divider); } .admin-block:last-child { border-bottom: none; } .ab-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; letter-spacing: .3px; } .ab-row { display: flex; gap: 8px; align-items: center; } .ab-note { flex: 1; font-size: 13px; color: var(--text-muted); } .btn-secondary.slim, .btn-accent-inline.slim, .btn-danger.slim { padding: 6px 12px; font-size: 13px; } /* ============ HOME NAV (Friends / Quests / Codes) ============ */ #home-nav { padding: 8px; } .home-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; color: var(--text-muted); font-weight: 600; font-size: 15px; cursor: pointer; margin-bottom: 2px; position: relative; } .home-nav-item:hover { background: var(--bg-modifier-hover); color: var(--text-normal); } .home-nav-item.active { background: var(--bg-modifier-selected); color: var(--text-normal); } .hn-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; } .hn-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px; padding: 1px 6px; min-width: 16px; text-align: center; } /* ============ MAIN-CONTENT PAGE VIEWS (Friends / Quests / Codes) ============ */ .main-page-view { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .mp-header { height: 48px; display: flex; align-items: center; gap: 24px; padding: 0 20px; font-weight: 700; font-size: 16px; box-shadow: 0 1px 0 var(--divider); flex-shrink: 0; } .mp-body { flex: 1; overflow-y: auto; padding: 20px; } .friends-tabs { display: flex; gap: 4px; } .friends-tab { padding: 6px 12px; border-radius: 4px; font-weight: 600; font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .friends-tab:hover { background: var(--bg-modifier-hover); color: var(--text-normal); } .friends-tab.on { background: var(--bg-modifier-selected); color: var(--text-normal); } .friend-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--divider); } .friend-row-name { flex: 1; font-weight: 600; font-size: 15px; cursor: pointer; } .friend-row-name:hover { text-decoration: underline; } .friend-row-actions { display: flex; align-items: center; gap: 8px; } .group-avatar { background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .group-avatar .i { width: 16px; height: 16px; } .friend-picker { max-height: 240px; overflow-y: auto; margin: 12px 0; border: 1px solid var(--divider); border-radius: 6px; padding: 6px; } .friend-pick-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; cursor: pointer; font-size: 14px; } .friend-pick-row:hover { background: var(--bg-modifier-hover); } .friend-pick-row input { accent-color: var(--accent); } /* ============ CHANNEL CATEGORIES ============ */ .category-header { display: flex; align-items: center; gap: 6px; padding: 14px 4px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: .3px; cursor: pointer; } .category-header:hover { color: var(--text-normal); } .cat-chevron { transition: transform .12s ease; } .cat-chevron.collapsed { transform: rotate(-90deg); } /* ============ BEGINNING-OF-CONVERSATION STATE ============ */ .convo-start { padding: 24px 16px 12px; } .convo-start-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-secondary); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; margin-bottom: 12px; } .convo-start-icon .i { width: 26px; height: 26px; } .convo-start h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; } .convo-start p { color: var(--text-muted); font-size: 14px; } /* ============ CODE DISPLAY ============ */ .code-display { background: var(--bg-input); border-radius: 6px; padding: 16px; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 1px; font-family: monospace; margin: 6px 0 4px; color: var(--accent); } /* ============ PROFILE MODAL ============ */ .profile-box { width: 460px; padding: 0; overflow: hidden; position: relative; } .profile-close { position: absolute; top: 12px; right: 12px; color: #fff; background: rgba(0,0,0,.35); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; z-index: 2; } .profile-banner { height: 90px; } .profile-main { padding: 0 20px 20px; margin-top: -40px; } .profile-avatar-wrap { margin-bottom: 10px; position: relative; width: 80px; } .profile-avatar { border: 6px solid var(--bg-floating); } .avatar-edit-btn { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-input); color: var(--text-normal); display: flex; align-items: center; justify-content: center; border: 3px solid var(--bg-floating); } .avatar-edit-btn:hover { background: var(--accent); color: #fff; } .remove-avatar-link { display: block; font-size: 12.5px; color: var(--text-link); cursor: pointer; margin-bottom: 14px; } .remove-avatar-link:hover { text-decoration: underline; } .profile-body { background: var(--bg-secondary); border-radius: 8px; padding: 16px; } .profile-name-row { display: flex; align-items: center; gap: 6px; } .profile-username { font-size: 20px; font-weight: 700; } .profile-handle { font-size: 13px; color: var(--text-muted); margin-top: 1px; } .profile-pronouns { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .profile-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 4px; } .profile-section { font-size: 14px; color: var(--text-normal); line-height: 1.4; } .profile-action-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .profile-note-input { width: 100%; min-height: 60px; background: var(--bg-input); border: none; border-radius: 4px; padding: 8px 10px; color: var(--text-normal); font-size: 13px; resize: vertical; outline: none; } /* ============ TOGGLE SWITCH (admin conversations list) ============ */ .toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-input); border-radius: 20px; transition: background .15s ease; } .toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: var(--text-muted); border-radius: 50%; transition: transform .15s ease, background .15s ease; } .toggle-switch input:checked + .toggle-slider { background: var(--accent-soft); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); background: var(--accent); } .conv-row { display: flex; align-items: center; gap: 12px; } .conv-row .ar-name { flex: 1; } /* ============ MESSAGE ATTACHMENTS / FILES ============ */ .msg-attachment { margin-top: 4px; max-width: 360px; flex-basis: 100%; } .msg-attachment img { max-width: 100%; max-height: 300px; border-radius: 8px; display: block; } .msg-file-card { display: flex; align-items: center; gap: 10px; background: var(--bg-input); border-radius: 8px; padding: 10px 14px; margin-top: 4px; max-width: 320px; color: var(--text-normal); } .msg-file-card:hover { background: var(--bg-modifier-selected); } .mfc-icon { display: flex; color: var(--text-muted); flex-shrink: 0; width: 22px; height: 22px; } .mfc-body { display: flex; flex-direction: column; min-width: 0; } .mfc-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mfc-size { font-size: 12px; color: var(--text-faint); } #upload-progress { padding: 6px 4px 0; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); } .msg-attachment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-width: 400px; } .msg-attachment-grid img { width: 100%; height: 140px; max-height: 140px; object-fit: cover; } .msg-att-item { position: relative; } .msg-att-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .1s ease; cursor: pointer; } .msg-att-item:hover .msg-att-del { opacity: 1; } .msg-att-del:hover { background: var(--danger); } .msg-att-del .i svg { width: 12px; height: 12px; } /* ============ STAGED ATTACHMENTS (draft strip above composer) ============ */ .attachment-draft { display: flex; gap: 10px; padding: 12px 16px 0; overflow-x: auto; } .draft-card { flex-shrink: 0; width: 88px; } .draft-card-thumb { position: relative; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; background: var(--bg-input); display: flex; align-items: center; justify-content: center; } .draft-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .draft-file-icon { color: var(--text-muted); width: 32px; height: 32px; } .draft-card-actions { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .1s ease; } .draft-card-thumb:hover .draft-card-actions { opacity: 1; } .draft-action-btn { width: 26px; height: 26px; border-radius: 50%; background: rgba(30,31,34,.85); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .draft-action-btn .i { width: 14px; height: 14px; } .draft-action-btn:hover { background: var(--bg-modifier-selected); } .draft-action-btn.danger:hover { background: var(--danger); } .draft-card-name { font-size: 11px; color: var(--text-muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============ MENTIONS ============ */ .mention-pill { color: var(--text-link); background: var(--accent-soft); border-radius: 3px; padding: 0 2px; font-weight: 500; } .msg-link:hover { text-decoration: underline; } .mention-pill.mention-glow { color: #fff; background: rgba(88,101,242,.4); } .mention-pill.mention-glow.mention-self { font-weight: 700; } #mention-popup { position: fixed; width: 240px; max-width: calc(100% - 32px); background: var(--bg-floating); border-radius: 8px; padding: 6px; box-shadow: 0 8px 30px var(--shadow-color); z-index: 60; } .mention-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; } .mention-row .avatar { flex-shrink: 0; } .mention-row-name { font-size: 14px; font-weight: 500; color: var(--text-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mention-row-you { margin-left: auto; font-size: 11px; color: var(--text-faint); flex-shrink: 0; } .mention-row.selected { background: var(--accent); } .mention-row.selected .mention-row-name, .mention-row.selected .mention-row-you { color: #fff; } .mention-hint { font-size: 11px; color: var(--text-faint); padding: 6px 8px 2px; border-top: 1px solid var(--divider); margin-top: 4px; } /* ============ IMAGE PREVIEW MODAL (staged attachment eye icon) ============ */ .image-preview-box { position: relative; max-width: 92vw; max-height: 90vh; } .image-preview-box img { display: block; max-width: 92vw; max-height: 90vh; border-radius: 8px; } .image-preview-close { position: absolute; top: -32px; right: 0; color: #fff; font-size: 22px; cursor: pointer; } .image-preview-close:hover { color: var(--text-muted); } /* ============ STICKERS ============ */ /* inline-block (not block) so this shrinks to the sticker's own width — same reasoning as .msg-row-wrap above, so the hover toolbar sits next to the sticker instead of off to the right of the whole row. */ .msg-row-wrap.is-sticker { display: inline-block; min-width: 138px; } .msg-sticker { width: 128px; height: 128px; object-fit: contain; display: block; } #sticker-picker-panel { position: absolute; bottom: 74px; right: 16px; width: 300px; max-width: calc(100% - 32px); background: var(--bg-floating); border-radius: 8px; padding: 12px; box-shadow: 0 8px 30px var(--shadow-color); z-index: 50; } .sticker-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; max-height: 260px; overflow-y: auto; } .sticker-grid button { height: auto !important; padding: 4px !important; } .sticker-grid img { width: 100%; height: 80px; object-fit: contain; } .admin-sticker-list { display: flex; flex-wrap: wrap; gap: 10px; max-height: 260px; overflow-y: auto; } /* ============ GIF PICKER (Tenor) ============ */ #gif-picker-panel { position: absolute; bottom: 74px; right: 16px; width: 340px; max-width: calc(100% - 32px); background: var(--bg-floating); border-radius: 8px; padding: 12px; box-shadow: 0 8px 30px var(--shadow-color); z-index: 50; } .gif-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 300px; overflow-y: auto; } .gif-thumb { border-radius: 6px; overflow: hidden; padding: 0; } .gif-thumb img { width: 100%; display: block; border-radius: 6px; } .gif-thumb:hover img { opacity: .85; } .gif-attribution { font-size: 10px; color: var(--text-faint); text-align: right; margin-top: 6px; } /* ============================================================ PHONE LAYOUT (not tablets — iPad's narrowest width is 768px, safely above this threshold). One pane visible at a time: the server rail stays put, and the channel/DM list slides for the chat area via a class on #app. This has to trigger the same way in landscape as it does in portrait, or rotating the phone drops back into the desktop layout. Checking max-width alone only catches portrait — a phone turned sideways reports a viewport width around 700-900px, which used to fall into the tablet/desktop breakpoint instead. So this checks whichever dimension is the "short" one (width in portrait, height in landscape), scoped to touch devices via (hover: none) and (pointer: coarse) so a resized desktop browser window doesn't get mistaken for a phone. ============================================================ */ @media (hover: none) and (pointer: coarse) and (max-width: 600px), (hover: none) and (pointer: coarse) and (max-height: 600px) { #title-bar { display: none; } #page-body { height: 100%; min-height: 0; } /* Hover doesn't really exist on touch — hold a message to bring up the action sheet instead (see setupMessageLongPress in script.js). */ .msg-line:hover .msg-hover-actions, .msg-hover-actions { display: none !important; } /* Keep the compact rail in the conversation list, but let the active chat span the entire screen. Keeping it beside the chat was what made the composer and messages feel cramped on narrow phones. */ #app, #app.member-list-open { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; } /* #main-col spans column 1/-1 (so it can slide over the rail) and #side-panel is pinned to column 2 — both have explicit placement. Without an explicit placement of its own, #server-rail's auto-placement finds row 1 already fully claimed by those two spans and drops itself into a new implicit row instead, which is what pushed it below the rest of the layout instead of beside it. Pin it explicitly so it always lands in row 1, column 1. */ #server-rail { grid-column: 1; grid-row: 1; width: 56px; padding: 8px 0; } .rail-item { width: 42px; height: 42px; font-size: 13px; } #side-panel, #main-col { grid-row: 1; min-width: 0; display: flex; transition: transform .28s cubic-bezier(.25,.75,.4,1); } #side-panel { grid-column: 2 / 3; } #main-col { grid-column: 1 / -1; z-index: 2; } #side-panel { transform: translateX(0); } #main-col { transform: translateX(100%); } #app.mobile-show-chat #side-panel { transform: translateX(-100%); } #app.mobile-show-chat #main-col { transform: translateX(0); } #app.mobile-dragging #side-panel, #app.mobile-dragging #main-col { transition: none; } .mobile-back-btn { display: flex; } /* member list becomes a full-screen overlay instead of a 4th column */ #member-panel { display: none; } #app.member-list-open #member-panel { display: block; position: fixed; inset: 0; top: 32px; z-index: 45; width: 100%; height: calc(100% - 32px); padding: 16px 12px; } #chat-header { height: 52px; padding: 0 8px; gap: 6px; } #chat-header .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-header-actions { gap: 0; } .hdr-icon-btn, #chat-header .members-toggle { width: 28px; height: 30px; } #messages { padding-top: 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .msg-group { gap: 10px; padding: 2px 12px; } .msg-group .avatar { width: 36px; height: 36px; } .msg-text { font-size: 15px; } /* A one-line preview keeps DM navigation readable without turning the list into a second message view. It is deliberately phone-only. */ .dm-row { padding: 8px; margin-bottom: 2px; align-items: center; } .dm-preview { display: block; } .dm-row.active .dm-preview { color: var(--text-muted); } #composer-wrap { padding: 0 8px max(10px, env(safe-area-inset-bottom)); background: var(--bg-primary); z-index: 3; } #composer { min-height: 48px; border-radius: 8px; padding: 0 8px; gap: 2px; } #composer textarea { min-width: 0; min-height: 46px; padding: 12px 4px; font-size: 16px; } .composer-icon-btn { width: 32px; height: 34px; } #emoji-picker-panel, #sticker-picker-panel, #gif-picker-panel, .composer-action-menu { bottom: 66px; } /* modals: fit the screen, stack multi-column layouts */ .modal-box, .modal-box.wide, .admin-box, .profile-box { width: 94vw; max-width: 94vw; } #settings-modal .modal-box { width: 94vw; height: 88vh; flex-direction: column; } #gift-modal { justify-content: center; padding-right: 0; } #settings-nav { width: 100%; display: flex; flex-wrap: wrap; gap: 2px; padding: 10px; } #settings-nav .nav-label { display: none; } #settings-content { padding: 20px; } .admin-layout { flex-direction: column; height: auto; } .admin-left { width: 100%; } .admin-right { border-left: none; border-top: 1px solid var(--divider); padding-left: 0; padding-top: 16px; } .ab-row { flex-wrap: wrap; } #emoji-picker-panel, #sticker-picker-panel, #gif-picker-panel { left: 8px; right: 8px; width: auto; } .composer-action-menu { left: 8px; width: 200px; } .mp-header { gap: 12px; padding: 0 12px; flex-wrap: wrap; height: auto; min-height: 48px; padding-top: 8px; padding-bottom: 8px; } .friends-tabs { flex-wrap: wrap; } /* polls: give the card the full message width instead of a fixed max */ .poll-card { max-width: 100%; } .poll-modal-box { width: 94vw; } } /* Keep the essentials reachable on very narrow phone screens. */ @media (max-width: 350px) { #gift-btn, #gif-btn, #sticker-btn { display: none; } #composer { padding: 0 6px; } .composer-icon-btn { width: 30px; } }