and would otherwise sit on top of an 8px transparent strip and eat every pointer event aimed at it. The pill is always faintly visible so the handle is findable without hunting for a dead zone. */ .voice-resize { height: 11px; flex: 0 0 11px; cursor: ns-resize; background: transparent; touch-action: none; position: relative; z-index: 7; display: flex; align-items: center; justify-content: center; } .voice-resize::before { content: ''; width: 46px; height: 3px; border-radius: 999px; background: var(--line); opacity: .8; transition: background .12s ease, width .12s ease, opacity .12s ease; } .voice-resize:hover::before { background: var(--blue); width: 78px; opacity: 1; } /* Minimized voice room: keep the audio alive but render nothing here — the sidebar "On Voice" panel is the control surface. */ .voice-dock.mini { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } .voice-bg { position: absolute; width: 0; height: 0; overflow: hidden; } /* Shared drawing overlay + tools + cursors */ .draw-wrap { position: absolute; inset: 0; pointer-events: none; } .draw-canvas { position: absolute; inset: 0; pointer-events: none; } .draw-canvas.active { pointer-events: auto; cursor: crosshair; touch-action: none; } .draw-canvas.erasing { cursor: cell; } .draw-cursors { position: absolute; inset: 0; pointer-events: none; } .draw-cursor { position: absolute; transform: translate(-3px, -3px); display: flex; align-items: center; gap: 4px; } .dc-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); flex-shrink: 0; } .dc-name { color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,.45); } .draw-tools { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.55); border-radius: 999px; padding: 5px 8px; pointer-events: auto; } .draw-tools .dt { background: transparent; color: #fff; font-size: 15px; padding: 2px 6px; border-radius: 6px; cursor: pointer; } .draw-tools .dt.on { background: var(--accent); } .draw-tools .dt-color { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); cursor: pointer; } .draw-tools .dt-color.sel { border-color: #fff; transform: scale(1.12); } .draw-tools .dt-size { width: 84px; accent-color: var(--accent); cursor: pointer; } /* Voice channel you're connected to */ .chan.in-voice .cn { color: var(--green, #3ba55d); font-weight: 600; } .in-voice-dot { color: var(--green, #3ba55d); font-size: 9px; margin-left: auto; } /* Persistent voice dock */ .voice-dock.expanded { display: flex; flex-direction: column; max-height: 46vh; min-height: 200px; overflow: hidden; border-bottom: 1px solid var(--line); } .voice-dock.expanded .voice-room { flex: 1; min-height: 0; } .voice-cta { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-1); } .voice-cta img { width: 40px; height: 40px; opacity: .9; } .voice-cta .vcta-text { display: flex; flex-direction: column; min-width: 0; } .voice-cta .vcta-text b { font-size: 15px; } .voice-cta .vcta-text span { color: var(--dim); font-size: 13px; } .voice-cta .btn-primary { margin-left: auto; flex-shrink: 0; } /* New-DM member picker */ .dm-empty { width: 100%; text-align: left; color: var(--dim); font-size: 13px; padding: 6px 8px; border-radius: 6px; cursor: pointer; } .dm-empty:hover { background: var(--hover); color: var(--text); } .dm-search { width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--text); outline: none; font-size: 14px; } .dm-search:focus { border-color: var(--accent); } .dm-pick-list { margin-top: 12px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .dm-pick-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; } .dm-pick-row:hover { background: var(--hover); } .dpr-meta { min-width: 0; } .dpr-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .dpr-user { font-size: 12px; color: var(--dim); } .dm-pick-row.picked { background: var(--active); } .dm-pick-row.picked .dpr-user { color: inherit; opacity: 0.75; } .dpr-check { margin-left: auto; color: var(--accent); } .dm-pick-row.picked .dpr-check { color: inherit; } /* Multi-select "To:" chips (group DMs) */ .dm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; } .dm-chips-to { color: var(--dim); font-size: 13px; margin-right: 2px; } .dm-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 13px; } .dm-chip .x { cursor: pointer; color: var(--dim); display: inline-flex; } .dm-chip .x:hover { color: var(--text); } /* Group-DM sidebar avatar: member-count square, Slack-style */ .gdm-ava { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--line); color: var(--dim); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dm-row.active .gdm-ava { color: inherit; } /* GIF (Giphy) picker + emoji board */ .gif-btn { background: var(--bg-3); color: var(--dim); border-radius: 999px; padding: 0 12px; font-weight: 800; font-size: 11px; letter-spacing: .6px; } .gif-btn:hover { color: var(--text); } .emoji-btn { background: transparent; font-size: 18px; padding: 0 6px; line-height: 1; } .emoji-backdrop { position: fixed; inset: 0; z-index: 200; } .emoji-popover { position: absolute; bottom: calc(100% + 10px); right: 8px; z-index: 201; box-shadow: 0 16px 44px rgba(0,0,0,.5); border-radius: 10px; } .giphy-modal { max-width: 560px; } .giphy-attr { margin-left: 10px; font-size: 10px; color: var(--faint); letter-spacing: 1.5px; align-self: center; } .giphy-grid { columns: 3; column-gap: 8px; margin-top: 12px; max-height: 52vh; overflow-y: auto; } .giphy-cell { display: block; width: 100%; margin: 0 0 8px; padding: 0; border: none; background: var(--bg-1); border-radius: 8px; overflow: hidden; cursor: pointer; break-inside: avoid; } .giphy-cell img { width: 100%; display: block; } .giphy-cell:hover { outline: 2px solid var(--accent); outline-offset: -2px; } .gif-embed { cursor: pointer; max-width: 320px; border-radius: 8px; } /* Discord-style profile card */ .profile-card.themed { width: 320px; background: linear-gradient(165deg, var(--c1, #14b8a6), var(--c2, #3b82f6)); border: 1px solid rgba(0,0,0,.4); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 55px rgba(0,0,0,.6); } .profile-card .pc-banner { height: 120px; background-size: cover; background-position: center; } .profile-card .pc-inner { position: relative; margin: 12px; padding: 66px 16px 16px; background: rgba(14,15,19,.68); border: 1px solid rgba(0,0,0,.45); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); text-align: center; } /* Avatar: 25% larger (84 -> 105) and centered to the frame. */ .pc-av { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); width: 105px; height: 105px; } .pc-av .avatar.xl { width: 105px; height: 105px; font-size: 37px; border: 3px solid var(--c2, #3b82f6); border-radius: 50%; box-sizing: border-box; } .pc-dot { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--c2, #3b82f6); box-sizing: border-box; } .pc-dot.online { background: #3ba55d; } .pc-dot.idle { background: #f0b232; } .pc-dot.dnd { background: #ed4245; } .pc-dot.offline { background: #80848e; } .profile-card .pc-name { color: #fff; font-size: 20px; font-weight: 800; line-height: 1.2; } .profile-card .pc-sub { color: rgba(255,255,255,.66); font-size: 13px; margin-top: 1px; } .pc-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 8px 0 2px; } .profile-card .pc-status { color: rgba(255,255,255,.92); font-size: 13px; margin-top: 10px; } .profile-card .pc-bio { color: rgba(255,255,255,.82); font-size: 13px; margin-top: 8px; white-space: pre-wrap; } .profile-card .pc-row { color: rgba(255,255,255,.7); font-size: 12px; margin-top: 8px; } .pc-edit { width: 100%; margin-top: 14px; } .pc-localtime { color: #fff; font-weight: 600; } /* DM box: a fully-rounded pill with a leading paper-plane icon that hides once you start typing. The input keeps a constant left pad so text doesn't jump. */ .pc-dm { position: relative; margin-top: 14px; text-align: left; } .pc-dm-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.5); font-size: 13px; pointer-events: none; } .pc-dm-input { width: 100%; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 11px 18px 11px 40px; color: #fff; outline: none; font-size: 13px; box-sizing: border-box; } .pc-dm-input::placeholder { color: rgba(255,255,255,.45); } .pc-dm-input:focus { border-color: rgba(255,255,255,.32); } /* Profile banner editor */ .pf-banner-preview { height: 100px; border-radius: 10px; background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 32px; } .pf-banner-preview .avatar.xl { width: 72px; height: 72px; font-size: 24px; border: 4px solid var(--bg-2); margin-bottom: -28px; } .banner-tabs { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; } .seg { border: 1px solid var(--line); background: transparent; color: var(--text); padding: 5px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; } .seg.on { background: var(--accent); border-color: var(--accent); color: #fff; } .banner-colors { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .bc-row { display: flex; align-items: center; gap: 10px; } .bc-label { width: 60px; font-size: 12px; color: var(--dim); } .crop-stage.banner { width: 320px; height: 120px; border-radius: 10px; } /* Settings */ .row-actions { white-space: nowrap; } .row-actions .mini { margin-left: 4px; } .mini.danger { color: var(--red, #ed4245); border-color: var(--red, #ed4245); } .tag-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; } .tag-toggle { border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 12px; padding: 3px 10px; font-size: 12px; cursor: pointer; } .tag-toggle.on { color: #fff; } .tag-create { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .swatches { display: flex; gap: 5px; flex-wrap: wrap; } .swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .swatch.sel { border-color: var(--text); } .tag-list { display: flex; flex-direction: column; gap: 8px; } .tag-row { display: flex; align-items: center; gap: 10px; } .audit-list { display: flex; flex-direction: column; gap: 6px; } .audit-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 6px; background: var(--bg-1); font-size: 13px; } .audit-when { color: var(--faint); font-size: 11px; white-space: nowrap; min-width: 130px; } .audit-text { color: var(--dim); } .audit-text b { color: var(--text); } /* ---- Profile card v2: single surface, banner fades into body ---- */ .profile-card.v2 { width: 328px; border-radius: 16px; overflow: hidden; position: fixed; z-index: 240; animation: pc2-pop 0.34s cubic-bezier(0.34, 1.5, 0.64, 1) both; transform-origin: 50% 85%; } @keyframes pc2-pop { from { opacity: 0; transform: scale(0.93) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @media (prefers-reduced-motion: reduce) { .profile-card.v2 { animation: none; } } .pc2-banner { position: absolute; inset: 0 0 auto 0; height: 132px; } .pc2-fade { position: absolute; inset: 0 0 auto 0; height: 132px; pointer-events: none; background: linear-gradient(180deg, rgba(10,12,16,0) 34%, rgba(10,12,16,0.55) 66%, rgba(10,12,16,0.92) 100%); } .pc2-body { position: relative; padding: 64px 18px 16px; } .pc2-head { display: flex; align-items: flex-end; justify-content: space-between; } .pc2-av { position: relative; width: 86px; height: 86px; border-radius: 50%; flex: none; box-shadow: 0 0 0 5px rgba(10, 12, 16, 0.9), 0 6px 22px rgba(0, 0, 0, 0.45); } .pc2-av .avatar, .pc2-av .av { width: 86px !important; height: 86px !important; font-size: 30px; } .pc2-av img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; display: block; } .pc2-dot { position: absolute; right: 1px; bottom: 1px; width: 18px; height: 18px; border-radius: 50%; border: 4px solid rgba(10, 12, 16, 0.95); } .pc2-dot.online { background: var(--green, #3ba55d); } .pc2-dot.idle { background: #f0b232; } .pc2-dot.dnd { background: #ed4245; } .pc2-dot.offline { background: #80848e; } .pc2-actions { display: flex; gap: 6px; margin-bottom: 4px; } .pc2-actions button { width: 32px; height: 32px; border-radius: 9px; color: #d6dbe2; font-size: 13px; cursor: pointer; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.12); } .pc2-actions button:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } .pc2-name { color: #fff; font-size: 21px; font-weight: 800; line-height: 1.15; margin-top: 12px; } .pc2-user { color: rgba(255, 255, 255, 0.62); font-size: 13px; margin-top: 2px; } .pc2-pronouns { color: rgba(255, 255, 255, 0.45); } .pc2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .pc2-context { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: #b8e6c6; background: rgba(59, 165, 93, 0.14); border: 1px solid rgba(59, 165, 93, 0.35); padding: 7px 11px; border-radius: 9px; } .pc2-context b { color: #dff5e6; } .pc2-context-wave { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; } .pc2-context-wave i { width: 3px; background: #3ba55d; border-radius: 2px; animation: pc2-wave 1s ease-in-out infinite; } .pc2-context-wave i:nth-child(1) { height: 6px; } .pc2-context-wave i:nth-child(2) { height: 11px; animation-delay: 0.18s; } .pc2-context-wave i:nth-child(3) { height: 8px; animation-delay: 0.34s; } @keyframes pc2-wave { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } } .pc2-status { color: rgba(255, 255, 255, 0.9); font-size: 13.5px; margin-top: 12px; font-style: italic; } .pc2-bio { color: rgba(255, 255, 255, 0.78); font-size: 13px; margin-top: 10px; line-height: 1.5; white-space: pre-wrap; } .pc2-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .pc2-row { color: rgba(255, 255, 255, 0.66); font-size: 12.5px; display: flex; align-items: center; gap: 8px; } .pc2-row i { width: 14px; text-align: center; color: rgba(255, 255, 255, 0.45); } .pc2-row-dim { color: rgba(255, 255, 255, 0.4); } .pc2-edit { width: 100%; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; } .pc2-dm { position: relative; margin-top: 16px; } .pc2-dm-input { width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.35); color: #eef2f6; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 10px 44px 10px 15px; font-size: 13.5px; outline: none; } .pc2-dm-input::placeholder { color: rgba(255, 255, 255, 0.4); } .pc2-dm-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } .pc2-send { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; color: rgba(255, 255, 255, 0.45); font-size: 12px; cursor: pointer; background: transparent; } .pc2-send.ready { background: var(--accent); color: #fff; } /* v2 glass tint, darkened for guaranteed text contrast even with bright user banner colors (overrides glass.css's lighter mix via specificity). */ .profile-card.themed.v2 { background: linear-gradient(170deg, color-mix(in srgb, var(--c1, #14b8a6) 30%, rgba(9, 11, 15, 0.94)), color-mix(in srgb, var(--c2, #3b82f6) 22%, rgba(9, 11, 15, 0.96)) 60%, rgba(9, 11, 15, 0.97)); } /* ---- Profile card v3: wavy banner, horizontal identity, docked actions ---- */ .profile-card.v3 .pc2-banner { height: 112px; } .pc3-wave { /* Wavy bottom edge — the Dogfish signature, instead of Discord's straight cut. */ clip-path: path('M0 0 H328 V90 C300 106 268 84 236 94 C204 104 176 80 144 92 C112 104 80 86 48 96 C28 102 12 98 0 90 Z'); } .profile-card.v3 .pc2-fade { display: none; } .profile-card.v3 .pc2-body { padding-top: 56px; } .pc3-head { display: flex; align-items: flex-end; gap: 14px; } .pc3-id { min-width: 0; padding-bottom: 7px; } .profile-card.v3 .pc2-name { margin-top: 0; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-card.v3 .pc2-user { margin-top: 1px; } .pc3-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 2; } .pc3-actions button { width: 30px; height: 30px; border-radius: 9px; color: #fff; font-size: 12.5px; cursor: pointer; background: rgba(8, 10, 14, 0.45); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .pc3-actions button:hover { background: rgba(8, 10, 14, 0.7); } /* Avatar halo fix: the initials-gradient background peeked out ~1px around photo avatars. Pin the image over the whole circle and overscale a hair. */ .pc2-av .avatar { background-clip: padding-box; } .pc2-av .av-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transform: scale(1.02); } /* GIF framing stage (banner-ratio window, drag/zoom the animated GIF). */ .crop-stage.gif-stage { width: 320px; height: 110px; border-radius: 12px; background-color: #000; } /* ---- Two-factor section (Edit Profile) ---- */ .tfa { background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .tfa-row { display: flex; align-items: center; gap: 10px; } .tfa-row .muted { flex: 1; font-size: 13px; } .tfa-on { flex: 1; color: var(--green, #3ba55d); font-size: 13px; display: flex; align-items: center; gap: 8px; } .tfa-setup { display: flex; gap: 14px; align-items: flex-start; } .tfa-qr { width: 132px; height: 132px; border-radius: 10px; background: #fff; padding: 6px; flex: none; } .tfa-steps { display: flex; flex-direction: column; gap: 8px; font-size: 13px; min-width: 0; } .tfa-steps code { font-family: var(--mono); font-size: 11px; word-break: break-all; background: var(--bg-0); padding: 2px 6px; border-radius: 5px; } .tfa-confirm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tfa-confirm input { width: 110px; font-family: var(--mono); letter-spacing: 3px; } /* ---- "New version available" banner (versionCheck.ts). Theme-driven. ---- */ .kp-upd { position: fixed; /* Clear the mobile status bar / notch — it also swallowed taps before. */ top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 2147483646; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(94vw, 480px); padding: 8px 10px 8px 16px; border-radius: 16px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); font-size: 13.5px; font-weight: 500; -webkit-app-region: no-drag; } /* Electron: the 40px custom titlebar is above everything and draggable — sit below it or the banner is clipped and unclickable. */ .kp-upd.desktop { top: 52px; } .kp-upd-msg { flex: 1 1 auto; min-width: 0; } .kp-upd .btn-primary { white-space: nowrap; flex: 0 0 auto; } .kp-upd-x { background: transparent; border: none; color: var(--text-dim, var(--text)); cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 8px; flex: 0 0 auto; } .kp-upd-x:hover { color: var(--text); } /* Voice state badges in the DM list (streaming / muted / deafened). */ .dm-row .dm-voice { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding-left: 6px; font-size: 12px; flex-shrink: 0; } .dm-row .dm-voice .dv-stream { color: var(--text); opacity: 0.85; } .dm-row .dm-voice .dv-alert { color: #ff6b6b; animation: dv-blink 1.6s ease-in-out infinite; } @keyframes dv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* When a DM row has both an unread badge and voice icons, keep them apart. */ .dm-row .dm-voice + .badge { margin-left: 6px; } /* ---- Focused-workspace layout (big tools auto-collapse the side panels) ---- */ @media (min-width: 761px) { .app.tool-focus { transition: grid-template-columns .18s ease; } .app.tool-focus .sidebar, .app.tool-focus .right { overflow: hidden; } .app.tool-left-collapsed { --col-l: 0px; } .app.tool-right-collapsed { --col-r: 0px; } } /* Small edge tabs to collapse/expand each panel while in a tool. */ .tool-edge { position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; width: 20px; height: 48px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-2); color: var(--dim); border: 1px solid var(--line); cursor: pointer; opacity: 0.65; transition: opacity .12s ease, background .12s ease, color .12s ease; font-size: 12px; } .tool-edge:hover { opacity: 1; color: var(--text); background: var(--bg-3); } .tool-edge.left { left: 0; border-left: none; border-radius: 0 8px 8px 0; } .tool-edge.right { right: 0; border-right: none; border-radius: 8px 0 0 8px; } /* Right panel is hidden below 1100px anyway; drop its tab there. Both tabs go on phones, where tools already use the full width. */ @media (max-width: 1100px) { .tool-edge.right { display: none; } } @media (max-width: 760px) { .tool-edge { display: none; } } /* Favourite star on pinned DM/group rows. */ .dm-row .dm-fav-star { color: var(--yellow, #f0b232); font-size: 11px; margin-left: 6px; flex-shrink: 0; } /* ---- Whiteboards ---- */ /* Sidebar entry (pinned above the channel list). */ .wb-nav-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; color: var(--text); border: none; cursor: pointer; padding: 7px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; margin-bottom: 4px; } .wb-nav-btn:hover { background: var(--hover); } .wb-nav-btn.active { background: var(--active, var(--hover)); color: var(--accent); } .wb-nav-btn .npi { font-size: 15px; } /* Sidebar: collapsible live list of boards under the Whiteboards entry. */ .wb-nav { margin-bottom: 4px; } .wb-nav .wb-nav-btn { margin-bottom: 2px; } .wb-nav-toggle { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; opacity: .55; font-size: 11px; } .wb-nav-toggle:hover { opacity: 1; background: rgba(255,255,255,.1); } .wb-nav-list { display: flex; flex-direction: column; margin: 0 0 4px 12px; padding-left: 8px; border-left: 1px solid var(--line); } .wb-nav-note { font-size: 12px; color: var(--text-2); padding: 4px 8px; } .wb-nav-sub { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); padding: 6px 8px 2px; } .wb-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: 13px; min-width: 0; } .wb-nav-item:hover { background: var(--hover); } .wb-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wb-nav-item.is-active .wb-item-name { font-weight: 600; } .wb-item-count { flex: none; font-size: 11px; color: var(--text-2); background: rgba(255,255,255,.09); border-radius: 9px; padding: 0 6px; line-height: 16px; } .wb-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: wb-live-pulse 2s infinite; } @keyframes wb-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 70% { box-shadow: 0 0 0 5px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } .wb-item-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); opacity: .35; } /* Tiny board cover in the sidebar list; a green ring marks an active board. */ .wb-item-cover { flex: none; width: 18px; height: 18px; border-radius: 4px; background-size: cover; background-position: center; background-color: var(--bg-2); } .wb-item-cover.live { box-shadow: 0 0 0 1px var(--bg-1), 0 0 0 2px #10b981; } /* Launcher */ .wb-launcher { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg-2); } .wb-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .wb-crumbs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; } .wb-crumb-wrap { display: inline-flex; align-items: center; gap: 4px; } .wb-crumb { background: transparent; border: none; color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: 6px; } .wb-crumb:hover { background: var(--hover); } .wb-sep { color: var(--faint); } .wb-actions { display: flex; gap: 6px; flex-shrink: 0; } .btn-ghost.sm, .btn-primary.sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; } .wb-grid { flex: 1; overflow: auto; padding: 16px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-content: start; } .wb-card { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-1); cursor: pointer; text-align: left; transition: border-color .12s, transform .08s; } .wb-card:hover { border-color: var(--accent); transform: translateY(-1px); } .wb-thumb { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 34px; color: rgba(255,255,255,.55); } /* Board cover image: cropped to fill the tile, consistent across all boards. */ .wb-cover { background-size: cover; background-position: center; background-repeat: no-repeat; } .wb-folder-thumb { background: linear-gradient(160deg, #2a2f37, #1b1e24); color: #cdd3dc; } /* Department-colored folder cards (color set inline via --dept). */ .wb-folder { border-color: color-mix(in srgb, var(--dept, var(--line)) 40%, var(--line)); } .wb-card-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); } .wb-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-dots { color: var(--dim); padding: 0 4px; border-radius: 6px; font-weight: 700; } .wb-dots:hover { background: var(--hover); color: var(--text); } .wb-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--dim); } /* Board view */ .wb-board { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg-2); } .wb-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); } .wb-back { background: var(--bg-3); border: none; color: var(--text); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px; } .wb-back:hover { background: var(--hover); } .wb-title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .wb-title { display: inline-flex; align-items: center; gap: 8px; cursor: text; } .wb-title-edit-btn { opacity: 0; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 5px; flex-shrink: 0; } .wb-title:hover .wb-title-edit-btn { opacity: 0.75; } .wb-title-edit-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); } .wb-title-edit { flex: 1; min-width: 0; max-width: 340px; font-weight: 700; font-size: 15px; color: var(--text); background: var(--bg-0); border: 1px solid var(--accent); border-radius: 7px; padding: 5px 9px; outline: none; } .wb-peers { display: flex; gap: -6px; align-items: center; } .wb-peer { display: inline-flex; margin-left: -6px; border-radius: 50%; outline: 2px solid var(--accent); outline-offset: 0; background: var(--bg-2); } .wb-peer:first-child { margin-left: 0; } .wb-canvas { position: relative; flex: 1; min-height: 0; } .wb-canvas .excalidraw { height: 100%; } .wb-canvas > div { height: 100%; } .wb-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--dim); font-size: 14px; } .wb-overlay { position: absolute; inset: 0; background: var(--bg-2); } /* Keep the Excalidraw editor below our app modals/menus. */ .excalidraw { --zIndex-layerUI: 4; } @media (max-width: 760px) { .wb-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 12px; } } /* "Liquid glass" treatments — frosted blur + a bright top rim + soft shadow, PLUS true refraction via the #kp-glass SVG displacement filter (defined in index.html), the same technique BYD uses. The plain blur is the fallback; the url() line adds the warp on browsers that support SVG filters in backdrop-filter (Chromium: Chrome/Edge). Firefox/Safari keep just the blur. */ /* ===================================================================== Global glass buttons — every chrome button across the app is round and glassy. Neutral controls get a dark tint; primary actions get the accent color; leave/danger get red; the composer Send stays gold (below). Tiny inline controls (reactions, message-hover icons, color swatches, context-menu rows, the emoji picker) keep their own styles so menus and pickers stay usable. */ .icon-btn, .members-btn, .hamburger, .ws-gear, .add, .add-cat, .notepad-btn, .wb-nav-btn, .wb-back, .vctrl, .vs-btn, .modal-close, .seg, .tab, .mini, .theater-fs, .load-older, .dm-empty, .pc-edit, .sc-watch, .vbtn, .tag-toggle, .btn-ghost, .btn-primary { border-radius: 999px; -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.14); border-top-color: rgba(255, 255, 255, 0.32); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* Neutral dark-tinted glass. */ .icon-btn, .members-btn, .hamburger, .ws-gear, .add, .add-cat, .notepad-btn, .wb-nav-btn, .wb-back, .vctrl, .vs-btn, .modal-close, .seg, .tab, .mini, .theater-fs, .load-older, .dm-empty, .pc-edit, .vbtn, .tag-toggle, .btn-ghost { background: rgba(14, 18, 24, 0.42); color: #e8ebf1; } .icon-btn:hover, .members-btn:hover, .hamburger:hover, .ws-gear:hover, .add:hover, .add-cat:hover, .notepad-btn:hover, .wb-nav-btn:hover, .wb-back:hover, .vctrl:hover, .vs-btn:hover, .modal-close:hover, .seg:hover, .tab:hover, .mini:hover, .theater-fs:hover, .load-older:hover, .dm-empty:hover, .pc-edit:hover, .vbtn:hover, .tag-toggle:hover, .btn-ghost:hover { background: rgba(30, 36, 46, 0.52); border-color: rgba(255, 255, 255, 0.24); color: #fff; } /* Primary / selected = accent glass (driven by --accent). */ .btn-primary, .seg.on, .tab.active, .tag-toggle.on, .vctrl.on, .vs-btn.on { background: color-mix(in srgb, var(--accent) 74%, transparent); color: #fff; border: 1px solid color-mix(in srgb, var(--accent) 55%, #ffffff); border-top-color: color-mix(in srgb, var(--accent) 25%, #ffffff); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, transparent); color: #fff; } /* Leave / danger = red glass. */ .vctrl.leave, .vs-hang, .mini.danger, .tile-kick { border-radius: 999px; background: rgba(220, 60, 62, 0.72); color: #fff; border: 1px solid rgba(255, 175, 175, 0.5); border-top-color: rgba(255, 222, 222, 0.85); box-shadow: 0 5px 16px rgba(120, 20, 20, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4); } .vctrl.leave:hover, .vs-hang:hover, .mini.danger:hover { background: rgba(237, 76, 78, 0.9); } .btn-primary:disabled, .btn-ghost:disabled { opacity: 0.55; } /* ===================================================================== Floating top info bar that OVERLAYS the message list, so the chat frosts and refracts through it as it scrolls behind. Fully pill-shaped, like the message bar. Absolutely positioned inside .chat-pane (which sits BELOW the voice panel in flow, so they never collide). */ .chat-pane { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .main-head { position: absolute; top: 10px; left: 14px; right: 14px; z-index: 7; height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); border-top-color: rgba(255, 255, 255, 0.34); background: rgba(14, 18, 24, 0.4); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: url(#kp-glass) blur(10px) saturate(1.5); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18); } /* Reserve space so content begins below the floating bar. */ .chat-pane .messages { padding-top: 76px; } .chat-pane .voice-cta { margin-top: 76px; } .chat-pane .voice-cta + .messages { padding-top: 14px; } /* Header buttons stay subtle (no nested glass). */ .main-head .icon-btn, .main-head .members-btn, .main-head .hamburger { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .main-head .icon-btn:hover, .main-head .members-btn:hover, .main-head .hamburger:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } [data-theme='light'] .main-head, [data-theme='sakura'] .main-head { background: rgba(255, 255, 255, 0.5); } [data-theme='light'] .main-head .icon-btn, [data-theme='sakura'] .main-head .icon-btn, [data-theme='light'] .main-head .members-btn, [data-theme='sakura'] .main-head .members-btn, [data-theme='light'] .main-head .hamburger, [data-theme='sakura'] .main-head .hamburger { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); } @media (max-width: 760px) { .main-head { top: 8px; left: 8px; right: 8px; } .chat-pane .messages { padding-top: 72px; } .chat-pane .voice-cta { margin-top: 72px; } } /* Emoji picker opened from a modal (channel-name editor): centered, so it escapes the modal's clipped overflow. */ .emoji-popover.center { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); } /* ---- Message field: a rounded, multi-line box that grows with content (auto-sized in JS, capped at 200px). ---- */ .composer textarea { flex: 1; resize: none; min-height: 56px; max-height: 200px; overflow-y: auto; border-radius: 22px; padding: 15px 22px; font-family: inherit; font-size: 15px; line-height: 1.45; box-sizing: border-box; outline: none; color: var(--text); background: rgba(255, 255, 255, 0.09); -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: url(#kp-glass) blur(7px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.16); border-top-color: rgba(255, 255, 255, 0.4); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .composer textarea::placeholder { color: rgba(255, 255, 255, 0.55); } .composer textarea:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); border-top-color: rgba(255, 255, 255, 0.5); } [data-theme='light'] .composer textarea, [data-theme='sakura'] .composer textarea { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.6); border-top-color: rgba(255, 255, 255, 0.9); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7); } [data-theme='light'] .composer textarea::placeholder, [data-theme='sakura'] .composer textarea::placeholder { color: rgba(20, 22, 27, 0.5); } /* ---- Round, glassy controls around the field; buttons sit at the bottom so they stay aligned with the last line as the box grows. ---- */ .composer { align-items: flex-end; } .composer .send { border-radius: 999px; height: 56px; padding: 0 26px; } .composer .gif-btn { border-radius: 999px; height: 56px; padding: 0 20px; } .composer .attach-btn, .composer .emoji-btn { width: 56px; min-width: 56px; height: 56px; flex: 0 0 56px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .composer .attach-btn, .composer .emoji-btn, .composer .gif-btn, .composer .send { -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: url(#kp-glass) blur(7px) saturate(1.4); } .composer .attach-btn, .composer .emoji-btn, .composer .gif-btn { background: rgba(14, 18, 24, 0.42); color: #e8ebf1; border: 1px solid rgba(255, 255, 255, 0.14); border-top-color: rgba(255, 255, 255, 0.34); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .composer .attach-btn:hover, .composer .emoji-btn:hover, .composer .gif-btn:hover { background: rgba(30, 36, 46, 0.5); border-color: rgba(255, 255, 255, 0.24); color: #fff; } /* Golden glass Send with dark text — no outer glow. */ .composer .send { background: rgba(240, 192, 64, 0.74); color: #241b00; font-weight: 700; border: 1px solid rgba(255, 226, 140, 0.6); border-top-color: rgba(255, 248, 214, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .composer .send:hover { background: rgba(248, 206, 88, 0.86); color: #241b00; } .composer .send:disabled { opacity: 0.55; } @media (max-width: 760px) { .composer .send, .composer .gif-btn { height: 48px; } .composer textarea { min-height: 48px; padding: 12px 18px; } .composer .attach-btn, .composer .emoji-btn { width: 48px; min-width: 48px; height: 48px; flex-basis: 48px; } } /* ---- Float the composer over the message list so chat content frosts AND refracts through the glass input as it scrolls behind it. ---- */ .main .messages { padding-bottom: 94px; } .composer-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none; } .composer-dock > * { pointer-events: auto; } @media (max-width: 760px) { .main .messages { padding-bottom: 80px; } } /* ---- Profile card: frosted glass tinted by the user's own gradient colors (--c1/--c2), with the same refraction warping the chat behind it. ---- */ .profile-card.themed { background: linear-gradient(165deg, color-mix(in srgb, var(--c1, #14b8a6) 58%, transparent), color-mix(in srgb, var(--c2, #3b82f6) 58%, transparent)); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: url(#kp-glass) blur(18px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.18); border-top-color: rgba(255, 255, 255, 0.42); box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); } /* ===================================================================== Modal / dialog windows (Create channel, New message, Workspace settings, etc.) — dark-tinted liquid glass that frosts and refracts the app behind. The scrim is softened so the refraction stays visible. */ .overlay { background: rgba(8, 9, 11, 0.5); } .modal { background: rgba(16, 20, 27, 0.62); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: url(#kp-glass) blur(16px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.12); border-top-color: rgba(255, 255, 255, 0.26); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14); } /* The wiz footer sits OUTSIDE the padded .modal-body, so its buttons were flush against the modal edges. Inset them to match the body's padding. */ .modal .wiz-foot { padding: 0 22px 22px; } /* Light theme: a bright frosted panel instead of the dark tint. */ [data-theme='light'] .overlay, [data-theme='sakura'] .overlay { background: rgba(18, 22, 30, 0.34); } [data-theme='light'] .modal, [data-theme='sakura'] .modal { background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.6); border-top-color: rgba(255, 255, 255, 0.92); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7); } /* Loaded LAST so these rules win over styles.css and features.css. */ /* Right-aligned modal footer (fixes the odd Cancel/Save spacing). */ .wiz-foot.end { justify-content: flex-end; gap: 10px; } /* Mobile nav toggles — hidden on desktop. */ .hamburger { display: none; width: 32px; height: 32px; border-radius: 6px; align-items: center; justify-content: center; font-size: 18px; color: var(--dim); margin-right: 4px; flex-shrink: 0; } .hamburger:hover { background: var(--hover); color: var(--text); } .members-btn { display: none; width: 32px; height: 32px; border-radius: 6px; align-items: center; justify-content: center; font-size: 15px; color: var(--dim); flex-shrink: 0; } .members-btn:hover { background: var(--hover); color: var(--text); } .nav-backdrop, .right-backdrop { display: none; } /* Emoji board container hugs the picker (emoji-mart renders a fixed width), and never overflows a narrow viewport. */ .emoji-popover { width: max-content; max-width: min(360px, calc(100vw - 16px)); } /* Floating "jump to newest" button (Slack/Discord style). */ .main { position: relative; } .jump-bottom { position: absolute; left: 50%; transform: translateX(-50%); bottom: 80px; z-index: 50; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.4); cursor: pointer; } .jump-bottom:hover { filter: brightness(1.08); } @media (max-width: 760px) { .app { grid-template-columns: 1fr !important; } /* Left channel sidebar slides in. The `display:flex !important` overrides the old `.sidebar { display:none }` mobile rule in styles.css that was hiding it. */ .sidebar { display: flex !important; position: fixed; left: 0; top: 0; bottom: 0; width: 84vw; max-width: 300px; z-index: 120; transform: translateX(-102%); transition: transform .2s ease; } .sidebar.open { transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,.6); } /* Right members panel slides in from the right (toggled by the 👥 button). Kept narrower than the nav drawer so a decent slice of the chat stays visible — that's the tap-away area that closes the panel. */ .right { display: flex !important; position: fixed; right: 0; top: 0; bottom: 0; width: 70vw; max-width: 240px; z-index: 120; transform: translateX(102%); transition: transform .2s ease; } .right.open { transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,.6); } .hamburger, .members-btn { display: flex; } /* Tools (Whiteboards / Currents) are desktop experiences — hide the section on phones. `.chan-section > .chan-label` is the "Tools" heading (category and DM headings live inside .chan-group, so they're unaffected). */ .wb-nav, .wb-nav-btn, .chan-section > .chan-label { display: none; } .nav-backdrop, .right-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 110; } .modal { max-width: 100% !important; max-height: 92vh; } .att-image, .att-video, .gif-embed { max-width: 100%; } .messages { padding: 12px 0; } .composer, .composer-readonly { margin: 0; } .composer { padding: 0 10px 12px; gap: 6px; } .composer .send { padding: 0 14px; } .gif-btn { padding: 0 9px; } .main-head { padding: 0 10px; } .main-head .topic { display: none; } .main-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .head-actions { gap: 0; } .giphy-grid { columns: 2; } .emoji-popover { left: 8px; right: auto; } .voice-cta { flex-wrap: wrap; } .voice-cta .btn-primary { margin-left: 0; } .voice-dock.expanded { max-height: 52vh; } /* Profile card on phones: centered, opaque sheet. The desktop position is anchored to the tap point and the glass look needs backdrop blur (disabled on mobile) — anchored + translucent reads as a broken overlap over chat. */ .profile-card, .profile-card.themed { left: 50% !important; top: 50% !important; right: auto !important; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 24px)) !important; max-height: 86vh; overflow-y: auto; } /* v2 card on phones: opaque body (glass blur is disabled on mobile) and no pop animation — its transform would fight the translate(-50%,-50%) centering. */ .profile-card.themed { background: rgba(10, 12, 16, 0.96) !important; } .profile-card.v2 { animation: none; } /* Modals share the glass translucency problem on phones — go opaque. */ .modal { background: var(--bg-2) !important; } } /* Avatar crop */ .crop-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; } .crop-stage { width: 280px; height: 280px; border-radius: 50%; overflow: hidden; background: #000; cursor: grab; touch-action: none; box-shadow: 0 0 0 4px var(--bg-3); } .crop-stage:active { cursor: grabbing; } .crop-stage canvas { display: block; } .crop-controls { width: 280px; max-width: 100%; } .theme-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } /* ===================================================================== Mobile overhaul (phones / installed PWA). - No pinch zoom, no whole-page scrolling: only the message list, channel list, and member list scroll. - The liquid-glass blur doesn't render well on mobile — everything goes flat, using the theme's own surface colors. - Simpler composer: just [+] [message] [Send]; GIF + attachments live in the + menu, and the phone's keyboard provides emoji. */ @media (max-width: 760px) { /* --- lock the frame; scroll only inside designated panes --- */ html, body, #root { height: 100dvh; } body { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; } .app { height: 100dvh; max-width: 100vw; overflow: hidden; } .main { max-width: 100vw; overflow-x: hidden; } .messages, .chan-section, .right-scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* --- flat surfaces: kill every blur/glass effect --- */ * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Top bar: full-width flat bar under the status bar (safe-area aware). */ .main-head { top: 0 !important; left: 0 !important; right: 0 !important; border-radius: 0 !important; background: var(--bg-1) !important; border: none !important; border-bottom: 1px solid var(--line) !important; box-shadow: none !important; height: calc(52px + env(safe-area-inset-top)) !important; padding: env(safe-area-inset-top) 10px 0 10px !important; } .chat-pane .messages { padding-top: calc(60px + env(safe-area-inset-top)); } .chat-pane .voice-cta { margin-top: calc(60px + env(safe-area-inset-top)); } .main-head .icon-btn, .main-head .members-btn, .main-head .hamburger { background: transparent !important; border: none !important; box-shadow: none !important; } /* Admin-only header actions hide on phones (still available via menus). */ .head-actions .adm { display: none !important; } /* Drawers respect the notch and go flat. */ .sidebar, .right { padding-top: env(safe-area-inset-top); } /* --- composer: [+] [field] [Send], flat, roomy, no iOS focus-zoom --- */ .composer { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); gap: 8px; } /* Solid, themed bar behind the composer so messages don't show through it. */ .composer-dock { background: var(--bg-1); border-top: 1px solid var(--line); pointer-events: auto !important; } /* Clear the whole composer height (field + padding + notch) so the last message is never clipped behind it. */ .main .messages { padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important; } .composer .gif-btn, .composer .emoji-btn { display: none !important; } .composer textarea { min-height: 44px !important; max-height: 120px; padding: 11px 16px !important; border-radius: 22px !important; font-size: 16px !important; /* <16px makes iOS zoom into the field */ background: var(--bg-3) !important; border: 1px solid var(--line) !important; box-shadow: none !important; } .composer .send { height: 44px !important; padding: 0 18px !important; background: var(--accent) !important; color: #fff !important; border: none !important; box-shadow: none !important; } .composer .attach-btn { width: 44px !important; min-width: 44px !important; height: 44px !important; flex-basis: 44px !important; background: var(--bg-3) !important; border: 1px solid var(--line) !important; box-shadow: none !important; } /* Buttons/pills elsewhere: flat theme surfaces instead of glass. */ .icon-btn, .members-btn, .hamburger, .ws-gear, .add, .add-cat, .notepad-btn, .vctrl, .vs-btn, .modal-close, .seg, .tab, .mini, .load-older, .btn-ghost { background: var(--bg-3); border-color: var(--line); box-shadow: none; } .btn-primary { background: var(--accent); border-color: var(--accent); box-shadow: none; } } /* The "+" menu above the composer (mobile). */ .plus-pop { position: absolute; bottom: 64px; left: 10px; z-index: 60; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); overflow: hidden; min-width: 180px; } .plus-row { display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-size: 14px; cursor: pointer; } .plus-row:hover { background: var(--hover); } .plus-row i { color: var(--dim); width: 16px; text-align: center; } /* Font Awesome icon alignment. Icons are rendered as