/* ============================================ 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 { height: 100%; 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; } 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; } .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); } .rail-item.premium-btn { color: #f4a4ff; } .rail-item.premium-btn:hover { background: var(--premium-grad); color: #fff; } /* ---- 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; overflow: hidden; } .avatar.has-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .avatar .status-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; bottom: -1px; right: -1px; border: 3px solid var(--bg-secondary); box-sizing: content-box; } .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; 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; } .msg-reply-ref { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); margin-bottom: 3px; cursor: pointer; width: 100%; min-width: 0; } .msg-reply-ref:hover { color: var(--text-normal); } .msg-reply-ref .i svg { width: 13px; height: 13px; } .msg-reply-ref .mrr-user { font-weight: 600; color: var(--text-normal); flex-shrink: 0; } .msg-reply-ref .mrr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .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; } /* 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: 130px; 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); } .msg-hover-actions { display: none; position: absolute; top: -16px; 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; } #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; } #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); } .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; } /* ---- 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; } .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; } /* 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 { 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); } /* ============ 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-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; } .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); } /* ============ 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: 130px; } .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) { /* Mobile browsers do not always resize the layout viewport for the software keyboard. script.js keeps this variable in sync with the visible viewport, so the composer stays immediately above it. */ html, body { height: var(--mobile-viewport-height, 100dvh); min-height: var(--mobile-viewport-height, 100dvh); } #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: 24px; 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 { 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; } .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; } } /* 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; } }