/* Source: icons.css */
/* Bootstrap Icons 1.13.1 (MIT), local SVG masks. Keep bi classes as JavaScript hooks. */
.bi { display: inline-block; flex-shrink: 0; line-height: 1; font-style: normal; vertical-align: -.125em
}
.bi::before { content: ""; display: block; width: 1em; height: 1em; background: currentColor; mask: var(--vh-icon) center/contain no-repeat; -webkit-mask: var(--vh-icon) center/contain no-repeat
}
.bi-arrow-clockwise { --vh-icon: url("icons/arrow-clockwise.svg")
}
.bi-arrow-left { --vh-icon: url("icons/arrow-left.svg")
}
.bi-arrow-repeat { --vh-icon: url("icons/arrow-repeat.svg")
}
.bi-arrow-return-left { --vh-icon: url("icons/arrow-return-left.svg")
}
.bi-arrow-right { --vh-icon: url("icons/arrow-right.svg")
}
.bi-arrow-up { --vh-icon: url("icons/arrow-up.svg")
}
.bi-arrow-up-right { --vh-icon: url("icons/arrow-up-right.svg")
}
.bi-arrows-fullscreen { --vh-icon: url("icons/arrows-fullscreen.svg")
}
.bi-at { --vh-icon: url("icons/at.svg")
}
.bi-bag { --vh-icon: url("icons/bag.svg")
}
.bi-bar-chart { --vh-icon: url("icons/bar-chart.svg")
}
.bi-bell { --vh-icon: url("icons/bell.svg")
}
.bi-bell-fill { --vh-icon: url("icons/bell-fill.svg")
}
.bi-bell-slash { --vh-icon: url("icons/bell-slash.svg")
}
.bi-bookmark-fill { --vh-icon: url("icons/bookmark-fill.svg")
}
.bi-box-arrow-in-right { --vh-icon: url("icons/box-arrow-in-right.svg")
}
.bi-box-arrow-right { --vh-icon: url("icons/box-arrow-right.svg")
}
.bi-box-arrow-up-right { --vh-icon: url("icons/box-arrow-up-right.svg")
}
.bi-broadcast-pin { --vh-icon: url("icons/broadcast-pin.svg")
}
.bi-calendar3 { --vh-icon: url("icons/calendar3.svg")
}
.bi-camera { --vh-icon: url("icons/camera.svg")
}
.bi-camera-video { --vh-icon: url("icons/camera-video.svg")
}
.bi-camera-video-fill { --vh-icon: url("icons/camera-video-fill.svg")
}
.bi-camera-video-off { --vh-icon: url("icons/camera-video-off.svg")
}
.bi-card-heading { --vh-icon: url("icons/card-heading.svg")
}
.bi-card-text { --vh-icon: url("icons/card-text.svg")
}
.bi-chat { --vh-icon: url("icons/chat.svg")
}
.bi-chat-dots { --vh-icon: url("icons/chat-dots.svg")
}
.bi-chat-dots-fill { --vh-icon: url("icons/chat-dots-fill.svg")
}
.bi-chat-fill { --vh-icon: url("icons/chat-fill.svg")
}
.bi-chat-heart { --vh-icon: url("icons/chat-heart.svg")
}
.bi-chat-left-text { --vh-icon: url("icons/chat-left-text.svg")
}
.bi-chat-square-heart { --vh-icon: url("icons/chat-square-heart.svg")
}
.bi-chat-square-text { --vh-icon: url("icons/chat-square-text.svg")
}
.bi-check-lg { --vh-icon: url("icons/check-lg.svg")
}
.bi-check2 { --vh-icon: url("icons/check2.svg")
}
.bi-check2-all { --vh-icon: url("icons/check2-all.svg")
}
.bi-check2-circle { --vh-icon: url("icons/check2-circle.svg")
}
.bi-chevron-left { --vh-icon: url("icons/chevron-left.svg")
}
.bi-chevron-right { --vh-icon: url("icons/chevron-right.svg")
}
.bi-circle-fill { --vh-icon: url("icons/circle-fill.svg")
}
.bi-circle-half { --vh-icon: url("icons/circle-half.svg")
}
.bi-clock-history { --vh-icon: url("icons/clock-history.svg")
}
.bi-cloud-arrow-up-fill { --vh-icon: url("icons/cloud-arrow-up-fill.svg")
}
.bi-compass { --vh-icon: url("icons/compass.svg")
}
.bi-copy { --vh-icon: url("icons/copy.svg")
}
.bi-dash-lg { --vh-icon: url("icons/dash-lg.svg")
}
.bi-display { --vh-icon: url("icons/display.svg")
}
.bi-display-fill { --vh-icon: url("icons/display-fill.svg")
}
.bi-download { --vh-icon: url("icons/download.svg")
}
.bi-emoji-frown { --vh-icon: url("icons/emoji-frown.svg")
}
.bi-emoji-smile { --vh-icon: url("icons/emoji-smile.svg")
}
.bi-envelope { --vh-icon: url("icons/envelope.svg")
}
.bi-envelope-at { --vh-icon: url("icons/envelope-at.svg")
}
.bi-envelope-check { --vh-icon: url("icons/envelope-check.svg")
}
.bi-envelope-open-fill { --vh-icon: url("icons/envelope-open-fill.svg")
}
.bi-exclamation-circle { --vh-icon: url("icons/exclamation-circle.svg")
}
.bi-exclamation-triangle { --vh-icon: url("icons/exclamation-triangle.svg")
}
.bi-eye { --vh-icon: url("icons/eye.svg")
}
.bi-file-earmark { --vh-icon: url("icons/file-earmark.svg")
}
.bi-file-earmark-arrow-down { --vh-icon: url("icons/file-earmark-arrow-down.svg")
}
.bi-file-earmark-fill { --vh-icon: url("icons/file-earmark-fill.svg")
}
.bi-file-earmark-x { --vh-icon: url("icons/file-earmark-x.svg")
}
.bi-file-music { --vh-icon: url("icons/file-music.svg")
}
.bi-file-post { --vh-icon: url("icons/file-post.svg")
}
.bi-filetype-gif { --vh-icon: url("icons/filetype-gif.svg")
}
.bi-forward { --vh-icon: url("icons/forward.svg")
}
.bi-fullscreen { --vh-icon: url("icons/fullscreen.svg")
}
.bi-gear { --vh-icon: url("icons/gear.svg")
}
.bi-gem { --vh-icon: url("icons/gem.svg")
}
.bi-gift { --vh-icon: url("icons/gift.svg")
}
.bi-gift-fill { --vh-icon: url("icons/gift-fill.svg")
}
.bi-graph-up { --vh-icon: url("icons/graph-up.svg")
}
.bi-grid { --vh-icon: url("icons/grid.svg")
}
.bi-grid-1x2-fill { --vh-icon: url("icons/grid-1x2-fill.svg")
}
.bi-grid-3x3-gap-fill { --vh-icon: url("icons/grid-3x3-gap-fill.svg")
}
.bi-grid-fill { --vh-icon: url("icons/grid-fill.svg")
}
.bi-hash { --vh-icon: url("icons/hash.svg")
}
.bi-heart { --vh-icon: url("icons/heart.svg")
}
.bi-heart-fill { --vh-icon: url("icons/heart-fill.svg")
}
.bi-image { --vh-icon: url("icons/image.svg")
}
.bi-images { --vh-icon: url("icons/images.svg")
}
.bi-inbox { --vh-icon: url("icons/inbox.svg")
}
.bi-info-circle { --vh-icon: url("icons/info-circle.svg")
}
.bi-journal-check { --vh-icon: url("icons/journal-check.svg")
}
.bi-journal-text { --vh-icon: url("icons/journal-text.svg")
}
.bi-key { --vh-icon: url("icons/key.svg")
}
.bi-laptop { --vh-icon: url("icons/laptop.svg")
}
.bi-life-preserver { --vh-icon: url("icons/life-preserver.svg")
}
.bi-lightning-charge-fill { --vh-icon: url("icons/lightning-charge-fill.svg")
}
.bi-link-45deg { --vh-icon: url("icons/link-45deg.svg")
}
.bi-list { --vh-icon: url("icons/list.svg")
}
.bi-lock { --vh-icon: url("icons/lock.svg")
}
.bi-lock-fill { --vh-icon: url("icons/lock-fill.svg")
}
.bi-mic { --vh-icon: url("icons/mic.svg")
}
.bi-mic-fill { --vh-icon: url("icons/mic-fill.svg")
}
.bi-mic-mute-fill { --vh-icon: url("icons/mic-mute-fill.svg")
}
.bi-moon-stars { --vh-icon: url("icons/moon-stars.svg")
}
.bi-music-note-beamed { --vh-icon: url("icons/music-note-beamed.svg")
}
.bi-palette { --vh-icon: url("icons/palette.svg")
}
.bi-paperclip { --vh-icon: url("icons/paperclip.svg")
}
.bi-patch-check { --vh-icon: url("icons/patch-check.svg")
}
.bi-patch-check-fill { --vh-icon: url("icons/patch-check-fill.svg")
}
.bi-pause-fill { --vh-icon: url("icons/pause-fill.svg")
}
.bi-pencil { --vh-icon: url("icons/pencil.svg")
}
.bi-pencil-square { --vh-icon: url("icons/pencil-square.svg")
}
.bi-people { --vh-icon: url("icons/people.svg")
}
.bi-people-fill { --vh-icon: url("icons/people-fill.svg")
}
.bi-person { --vh-icon: url("icons/person.svg")
}
.bi-person-badge { --vh-icon: url("icons/person-badge.svg")
}
.bi-person-bounding-box { --vh-icon: url("icons/person-bounding-box.svg")
}
.bi-person-check-fill { --vh-icon: url("icons/person-check-fill.svg")
}
.bi-person-dash { --vh-icon: url("icons/person-dash.svg")
}
.bi-person-fill { --vh-icon: url("icons/person-fill.svg")
}
.bi-person-heart { --vh-icon: url("icons/person-heart.svg")
}
.bi-person-lines-fill { --vh-icon: url("icons/person-lines-fill.svg")
}
.bi-person-plus { --vh-icon: url("icons/person-plus.svg")
}
.bi-person-plus-fill { --vh-icon: url("icons/person-plus-fill.svg")
}
.bi-person-slash { --vh-icon: url("icons/person-slash.svg")
}
.bi-person-video { --vh-icon: url("icons/person-video.svg")
}
.bi-person-x { --vh-icon: url("icons/person-x.svg")
}
.bi-person-x-fill { --vh-icon: url("icons/person-x-fill.svg")
}
.bi-phone { --vh-icon: url("icons/phone.svg")
}
.bi-pin-angle { --vh-icon: url("icons/pin-angle.svg")
}
.bi-pin-angle-fill { --vh-icon: url("icons/pin-angle-fill.svg")
}
.bi-pip { --vh-icon: url("icons/pip.svg")
}
.bi-play-fill { --vh-icon: url("icons/play-fill.svg")
}
.bi-plus-lg { --vh-icon: url("icons/plus-lg.svg")
}
.bi-reply { --vh-icon: url("icons/reply.svg")
}
.bi-reply-fill { --vh-icon: url("icons/reply-fill.svg")
}
.bi-search { --vh-icon: url("icons/search.svg")
}
.bi-send { --vh-icon: url("icons/send.svg")
}
.bi-send-fill { --vh-icon: url("icons/send-fill.svg")
}
.bi-shield-check { --vh-icon: url("icons/shield-check.svg")
}
.bi-shield-lock { --vh-icon: url("icons/shield-lock.svg")
}
.bi-shield-lock-fill { --vh-icon: url("icons/shield-lock-fill.svg")
}
.bi-slash-circle { --vh-icon: url("icons/slash-circle.svg")
}
.bi-sliders2 { --vh-icon: url("icons/sliders2.svg")
}
.bi-soundwave { --vh-icon: url("icons/soundwave.svg")
}
.bi-speedometer2 { --vh-icon: url("icons/speedometer2.svg")
}
.bi-star { --vh-icon: url("icons/star.svg")
}
.bi-star-fill { --vh-icon: url("icons/star-fill.svg")
}
.bi-stars { --vh-icon: url("icons/stars.svg")
}
.bi-sticky { --vh-icon: url("icons/sticky.svg")
}
.bi-sticky-fill { --vh-icon: url("icons/sticky-fill.svg")
}
.bi-sun { --vh-icon: url("icons/sun.svg")
}
.bi-telephone { --vh-icon: url("icons/telephone.svg")
}
.bi-telephone-fill { --vh-icon: url("icons/telephone-fill.svg")
}
.bi-telephone-x { --vh-icon: url("icons/telephone-x.svg")
}
.bi-telephone-x-fill { --vh-icon: url("icons/telephone-x-fill.svg")
}
.bi-three-dots { --vh-icon: url("icons/three-dots.svg")
}
.bi-toggles2 { --vh-icon: url("icons/toggles2.svg")
}
.bi-trash3 { --vh-icon: url("icons/trash3.svg")
}
.bi-volume-down { --vh-icon: url("icons/volume-down.svg")
}
.bi-volume-mute { --vh-icon: url("icons/volume-mute.svg")
}
.bi-volume-mute-fill { --vh-icon: url("icons/volume-mute-fill.svg")
}
.bi-volume-up { --vh-icon: url("icons/volume-up.svg")
}
.bi-volume-up-fill { --vh-icon: url("icons/volume-up-fill.svg")
}
.bi-wallet2 { --vh-icon: url("icons/wallet2.svg")
}
.bi-x-lg { --vh-icon: url("icons/x-lg.svg")
}
.bi-youtube { --vh-icon: url("icons/youtube.svg")
}

.bi-chevron-down { --vh-icon: url("icons/chevron-down.svg") }

.bi-lightning { --vh-icon: url("icons/lightning.svg") }

.bi-lightning-fill { --vh-icon: url("icons/lightning-fill.svg") }

.bi-play-circle { --vh-icon: url("icons/play-circle.svg") }

.bi-flag { --vh-icon: url("icons/flag.svg") }
.bi-translate { --vh-icon: url("icons/translate.svg") }
.bi-qr-code { --vh-icon: url("icons/qr-code.svg") }
.bi-keyboard { --vh-icon: url("icons/keyboard.svg") }
.bi-controller { --vh-icon: url("icons/controller.svg") }

/* Source: styles.css */
:root { --vh-bg: #080b14; --vh-panel: #0d1220; --vh-panel-2: #111827; --vh-panel-3: #151d2e; --vh-border: rgba(255,255,255,.065); --vh-text: #edf3ff; --vh-muted: #8390a8; --vh-accent: #7c5cff; --vh-accent-2: #4f8cff; --vh-green: #34d399; --vh-red: #fb7185; --vh-shadow: 0 24px 80px rgba(0,0,0,.35); --vh-radius: 14px

}
* { box-sizing: border-box
}
html,body { height: 100%; margin: 0
}
body { background: var(--vh-bg); color: var(--vh-text); font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif
}
.min-w-0 { min-width: 0
}
button,input,textarea { font: inherit
}
.modal-backdrop { backdrop-filter: blur(3px)
}
html[data-app-theme="dark"] { --background-primary: #0b0e14; --background-secondary: #10151d; --background-tertiary: #151b25; --background-elevated: #181f2b; --surface-soft: rgba(255,255,255,.036); --surface-hover: rgba(255,255,255,.062); --surface-active: rgba(130,108,255,.14); --border: rgba(255,255,255,.072); --border-strong: rgba(255,255,255,.12); --text-primary: #f3f5fa; --text-secondary: #a6afbf; --text-tertiary: #687386; --accent: #8b75ff; --accent-strong: #6d58f5; --accent-soft: rgba(139,117,255,.15); --success: #4adea4; --danger: #ff6b81; --warning: #f5bd68; --shadow-soft: 0 18px 60px rgba(0,0,0,.28); --shadow-float: 0 24px 80px rgba(0,0,0,.42)

}
html[data-app-theme="light"] { --background-primary: #edf1f7; --background-secondary: #f7f9fc; --background-tertiary: #ffffff; --background-elevated: #ffffff; --surface-soft: rgba(29,38,55,.045); --surface-hover: rgba(29,38,55,.07); --surface-active: rgba(109,88,245,.11); --border: rgba(27,35,52,.09); --border-strong: rgba(27,35,52,.14); --text-primary: #1c2432; --text-secondary: #5d6879; --text-tertiary: #929bad; --accent: #7058f4; --accent-strong: #5d45e4; --accent-soft: rgba(112,88,244,.12); --success: #1eaa77; --danger: #dc4c64; --warning: #b97817; --shadow-soft: 0 18px 60px rgba(43,55,78,.10); --shadow-float: 0 24px 70px rgba(43,55,78,.16)

}
/* Auth — intentionally preserved from the approved v2 design. */
/* Application theme system */
.vh-app { --background-primary: #0b0e14; --background-secondary: #10151d; --background-tertiary: #151b25; --background-elevated: #181f2b; --surface-soft: rgba(255,255,255,.036); --surface-hover: rgba(255,255,255,.062); --surface-active: rgba(130,108,255,.14); --border: rgba(255,255,255,.072); --border-strong: rgba(255,255,255,.12); --text-primary: #f3f5fa; --text-secondary: #a6afbf; --text-tertiary: #687386; --accent: #8b75ff; --accent-strong: #6d58f5; --accent-soft: rgba(139,117,255,.15); --success: #4adea4; --danger: #ff6b81; --warning: #f5bd68; --shadow-soft: 0 18px 60px rgba(0,0,0,.28); --shadow-float: 0 24px 80px rgba(0,0,0,.42); height: 100vh; position: relative; display: grid; grid-template-columns: 76px 296px minmax(0,1fr) 286px; overflow: hidden; background: var(--background-primary); color: var(--text-primary)
}
html[data-app-theme="light"] .vh-app { --background-primary: #edf1f7; --background-secondary: #f7f9fc; --background-tertiary: #ffffff; --background-elevated: #ffffff; --surface-soft: rgba(29,38,55,.045); --surface-hover: rgba(29,38,55,.07); --surface-active: rgba(109,88,245,.11); --border: rgba(27,35,52,.09); --border-strong: rgba(27,35,52,.14); --text-primary: #1c2432; --text-secondary: #5d6879; --text-tertiary: #929bad; --accent: #7058f4; --accent-strong: #5d45e4; --accent-soft: rgba(112,88,244,.12); --success: #1eaa77; --danger: #dc4c64; --warning: #b97817; --shadow-soft: 0 18px 60px rgba(43,55,78,.10); --shadow-float: 0 24px 70px rgba(43,55,78,.16)

}
.app-orb { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(80px); opacity: .13; z-index: 0
}
.app-orb-one { width: 420px; height: 420px; background: var(--accent); right: 12%; top: -260px
}
.app-orb-two { width: 300px; height: 300px; background: #339cff; left: 26%; bottom: -230px
}
.server-rail,.channel-sidebar,.chat-panel,.members-panel { position: relative; z-index: 1; min-width: 0
}
/* Server rail */
.server-rail { background: color-mix(in srgb,var(--background-primary) 88%,#000 12%); display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden
}
.server-logo,.server-action,.server-chip { border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-secondary); background: var(--surface-soft); transition: .18s ease; flex: 0 0 auto; box-shadow: none
}
.server-logo { color: #fff; border: 0; background: linear-gradient(145deg,#927cff,#5b6eff); font-size: 1.32rem; box-shadow: 0 12px 32px rgba(102,83,240,.28)
}
.server-chip { position: relative; font-weight: 800; font-size: .88rem; background: var(--background-secondary)
}
.server-chip:hover { color: var(--text-primary)
}
.server-chip.active { color: #fff; background: linear-gradient(145deg,var(--accent),#6673ff); border-color: transparent; box-shadow: 0 10px 24px rgba(107,87,242,.22)
}
.server-chip.active:before { content: ""; position: absolute; left: -11px; width: 4px; border-radius: var(--avatar-radius,50%); background: var(--text-primary)
}
.server-action { background: var(--background-secondary); color: var(--success)
}
.server-action:hover { color: white
}
.server-action.secondary { color: #7ca9ff
}
.server-action.secondary:hover { color: #fff
}
.rail-separator { width: 32px; height: 1px; background: var(--border); margin: 1px 0
}
.server-list { display: flex; flex-direction: column
}
.rail-spacer { flex: 1; min-height: 18px
}
/* Channel sidebar */
.channel-sidebar { background: color-mix(in srgb,var(--background-secondary) 95%,transparent); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden
}
.server-showcase { position: relative; border: 1px solid var(--border); background: linear-gradient(145deg,var(--background-elevated),color-mix(in srgb,var(--background-elevated) 82%,var(--accent) 18%)); overflow: hidden
}
.server-showcase-glow { position: absolute; width: 130px; height: 130px; border-radius: 50%; background: var(--accent); filter: blur(50px); opacity: .16; right: -55px; top: -65px
}
.server-showcase-top { position: relative; display: flex; align-items: center; justify-content: space-between
}
.workspace-label { letter-spacing: .16em; font-weight: 850; color: var(--text-tertiary)
}
.glass-icon-btn { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-secondary); display: grid; place-items: center
}
.glass-icon-btn:hover { color: var(--text-primary)
}
.server-showcase-body { position: relative; display: flex; align-items: center; gap: 11px
}
.server-mini-icon { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb,var(--accent) 22%,transparent)
}
.server-title { font-weight: 780; letter-spacing: -.015em
}
.server-subtitle { color: var(--text-secondary); margin-top: 2px
}
.sidebar-toolbar { display: flex; align-items: center; justify-content: space-between
}
.sidebar-toolbar-title { display: flex; flex-direction: column
}
.sidebar-toolbar-title span { font-weight: 760
}
.sidebar-toolbar-title small { color: var(--text-tertiary)
}
.icon-btn { border: 0; background: transparent; color: var(--text-secondary); width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; transition: .15s
}
.icon-btn:hover { color: var(--text-primary)
}
.channel-scroll { overflow-y: auto; flex: 1
}
.channel-group-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-tertiary); font-weight: 850; letter-spacing: .075em
}
.channel-group-head span { display: flex; align-items: center; gap: 6px
}
.channel-group-head button { width: 26px; height: 26px; border: 0; background: transparent; color: var(--text-tertiary); border-radius: 8px; display: grid; place-items: center
}
.channel-group-head button:hover { color: var(--text-primary)
}
.channel-stack { display: flex; flex-direction: column
}
.channel-item { width: 100%; border: 1px solid transparent; background: transparent; color: var(--text-secondary); display: flex; align-items: center; text-align: left; transition: .15s ease
}
.channel-item i { display: grid; place-items: center; color: var(--text-tertiary); background: var(--surface-soft); font-size: .86rem
}
.channel-item .channel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.channel-item:hover { color: var(--text-primary)
}
.channel-item.active { color: var(--text-primary); background: var(--surface-active); border-color: color-mix(in srgb,var(--accent) 20%,transparent)
}
.channel-item.active i { color: var(--accent); background: var(--accent-soft)
}
.channel-item.voice .join-pill { font-size: .59rem; font-weight: 700; padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb,var(--success) 12%,transparent); color: var(--success); opacity: 0; transition: .15s
}
.channel-item.voice:hover .join-pill { opacity: 1
}
/* Voice dock */
.voice-dock { border: 1px solid color-mix(in srgb,var(--success) 22%,var(--border)); background: linear-gradient(145deg,color-mix(in srgb,var(--success) 8%,var(--background-elevated)),var(--background-elevated)); box-shadow: var(--shadow-soft)
}
.voice-dock-head { display: flex; align-items: center; gap: 9px
}
.voice-state-icon { display: grid; place-items: center; color: var(--success); background: color-mix(in srgb,var(--success) 12%,transparent)
}
.voice-state { display: flex; flex-direction: column; flex: 1
}
.voice-state b { color: var(--success)
}
.voice-state span { color: var(--text-secondary)
}
.voice-live-pill { font-size: .52rem; font-weight: 900; border-radius: 999px; padding: 4px 6px; background: color-mix(in srgb,var(--success) 12%,transparent); color: var(--success)
}
.voice-controls { display: grid; grid-template-columns: 1fr 1fr 36px
}
.voice-controls button { border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: 6px
}
.voice-controls button:hover { color: var(--text-primary)
}
.voice-controls button.active { background: color-mix(in srgb,var(--danger) 12%,transparent); color: var(--danger); border-color: color-mix(in srgb,var(--danger) 25%,transparent)
}
.voice-controls .danger { font-size: .85rem
}
.voice-controls .danger:hover { color: #fff
}
/* User panel */
.user-panel { border-top: 1px solid var(--border); background: color-mix(in srgb,var(--background-primary) 48%,transparent); display: flex; align-items: center; gap: 9px
}
.user-presence-wrap { position: relative
}
.user-avatar,.member-avatar,.msg-avatar { border-radius: var(--avatar-radius,50%); display: grid; place-items: center; font-weight: 800; color: white; background: linear-gradient(145deg,#7d8ca7,#47536a); user-select: none
}
.self-presence { position: absolute; width: 11px; height: 11px; border-radius: 50%; right: -2px; bottom: -2px; background: var(--success); border: 2px solid var(--background-secondary)
}
.user-panel-name { font-size: .78rem
}
.user-panel small { display: block; font-size: .61rem; color: var(--text-tertiary); margin-top: 1px
}
.logout-btn:hover { color: var(--danger)
}
/* Chat */
.chat-panel { display: grid; grid-template-rows: 74px minmax(0,1fr) auto; background: color-mix(in srgb,var(--background-primary) 96%,transparent)
}
.chat-header { border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: color-mix(in srgb,var(--background-primary) 83%,transparent); backdrop-filter: blur(18px); gap: 14px
}
.channel-heading { display: flex; align-items: center
}
.channel-heading-icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); font-size: 1.08rem; font-weight: 900
}
.channel-title { letter-spacing: -.01em
}
.channel-private-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .05em
}
.channel-meta { min-height: 18px; display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); margin-top: 2px
}
.channel-meta #typing:not(:empty) { color: var(--success)
}
.channel-meta #typing:not(:empty)+#channelDescription { display: none
}
.chat-actions { display: flex; align-items: center
}
.message-search { border: 1px solid var(--border); display: flex; align-items: center; gap: 7px; padding: 0 9px; color: var(--text-tertiary); transition: .15s
}
.message-search:focus-within { border-color: color-mix(in srgb,var(--accent) 42%,var(--border)); background: var(--background-elevated)
}
.message-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: .72rem
}
.message-search input::placeholder { color: var(--text-tertiary)
}
.message-search kbd { font-size: .5rem; background: var(--surface-hover); color: var(--text-tertiary); border: 1px solid var(--border); box-shadow: none; border-radius: 5px; padding: 2px 4px
}
.header-action-btn { border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-secondary); display: grid; place-items: center
}
.header-action-btn:hover { color: var(--accent)
}
.status-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-tertiary); font-weight: 720
}
.status-badge i { font-size: .39rem
}
.status-badge.online { color: var(--success); border-color: color-mix(in srgb,var(--success) 21%,var(--border)); background: color-mix(in srgb,var(--success) 7%,transparent)
}
.status-badge.fallback { color: var(--warning); border-color: color-mix(in srgb,var(--warning) 22%,var(--border)); background: color-mix(in srgb,var(--warning) 7%,transparent)
}
.message-list { overflow-y: auto; padding: 26px max(20px,calc((100% - 880px)/2)) 18px; scroll-behavior: auto
}
.welcome-empty { height: 100%; min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-secondary); max-width: 500px; margin: auto
}
.welcome-empty h3 { color: var(--text-primary); font-size: 1.28rem; letter-spacing: -.025em; margin: .25rem 0 .55rem
}
.welcome-empty p { font-size: .8rem; line-height: 1.55; max-width: 430px; color: var(--text-tertiary)
}
.welcome-kicker { font-size: .58rem; letter-spacing: .16em; font-weight: 850; color: var(--accent); margin-top: 12px
}
.welcome-icon { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; background: linear-gradient(145deg,var(--accent-soft),var(--surface-soft)); border: 1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); color: var(--accent); font-size: 1.75rem; box-shadow: var(--shadow-soft)
}
.message-row { display: grid; transition: .12s
}
.message-row.search-hidden { display: none
}
.msg-avatar { margin-top: 1px; font-size: .72rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08)
}
.msg-head { display: flex; align-items: center
}
.msg-user { color: var(--text-primary)
}
.msg-content { margin-top: 2px; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word
}
.msg-attachment { margin-top: 8px; border: 1px solid var(--border); background: var(--surface-soft); color: color-mix(in srgb,var(--accent) 78%,var(--text-primary)); text-decoration: none; font-size: .73rem
}
.msg-sticker { margin-top: 8px
}
.reaction-bar { display: flex; flex-wrap: wrap
}
.reaction-btn { border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-secondary); font-size: .66rem
}
.reaction-btn:hover { color: var(--text-primary)
}
.reaction-btn.active { border-color: color-mix(in srgb,var(--accent) 30%,transparent)
}
.reaction-add { opacity: .55
}
.reaction-add:hover { opacity: 1
}
.message-actions { display: none; position: absolute; box-shadow: var(--shadow-soft)
}
/* Composer */
.composer-wrap { padding: 8px max(20px,calc((100% - 880px)/2)) 17px; background: linear-gradient(180deg,transparent,var(--background-primary) 35%)
}
.composer-box { border: 1px solid var(--border-strong); background: var(--background-elevated); display: flex; align-items: flex-end; box-shadow: 0 15px 38px rgba(0,0,0,.14); transition: .15s
}
.composer-box:focus-within { border-color: color-mix(in srgb,var(--accent) 45%,var(--border)); box-shadow: 0 15px 40px rgba(0,0,0,.14),0 0 0 3px var(--accent-soft)
}
.composer-box textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--text-primary); max-height: 160px
}
.composer-box textarea::placeholder { color: var(--text-tertiary)
}
.composer-btn { width: 38px; height: 38px; border: 0; border-radius: 11px; background: transparent; color: var(--text-tertiary); flex: 0 0 auto; display: grid; place-items: center
}
.composer-btn:hover { color: var(--text-primary)
}
.composer-btn.add-btn { color: var(--accent); border: 1px solid var(--border)
}
.composer-tools { display: flex; align-items: center; gap: 2px
}
.send-btn { width: 38px; height: 38px; border: 0; border-radius: 11px; background: linear-gradient(145deg,var(--accent),#6477ff); color: #fff; display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 8px 18px rgba(101,87,255,.2); font-size: 1.02rem
}
.send-btn:disabled { filter: grayscale(1); opacity: .45
}
.composer-hint { display: flex; justify-content: space-between; color: var(--text-tertiary)
}
.composer-hint i { margin-right: 4px; color: var(--success)
}
/* Members */
.members-panel { background: color-mix(in srgb,var(--background-secondary) 93%,transparent); border-left: 1px solid var(--border)
}
.members-topbar { border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between
}
.members-title { font-size: .82rem; font-weight: 760
}
.members-subtitle { font-size: .61rem; color: var(--text-tertiary); margin-top: 2px
}
.member-count-pill { min-width: 28px; height: 25px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: .65rem; font-weight: 800
}
.members-overview { display: grid; grid-template-columns: 1fr 1fr
}
.overview-stat { min-width: 0; border: 1px solid var(--border); background: var(--surface-soft); display: flex; align-items: center; gap: 8px
}
.overview-stat>i { color: var(--accent); font-size: .92rem
}
.overview-stat>div { display: flex; flex-direction: column; min-width: 0
}
.overview-stat b { font-size: .67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.overview-stat small { font-size: .52rem; color: var(--text-tertiary)
}
.overview-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-tertiary); box-shadow: 0 0 0 4px var(--surface-soft)
}
.overview-dot.online { background: var(--success)
}
.members-section-label { font-size: .57rem; letter-spacing: .12em; font-weight: 850; color: var(--text-tertiary)
}
.member-list { flex: 1
}
.member-item { transition: .12s
}
.member-avatar { font-size: .67rem; position: relative
}
.member-meta { flex: 1
}
.member-name { font-size: .72rem; color: var(--text-primary); font-weight: 650; white-space: nowrap; text-overflow: ellipsis; overflow: hidden
}
.member-role { font-size: .56rem; color: var(--text-tertiary); text-transform: none; margin-top: 1px
}
.member-status { position: absolute; width: 10px; height: 10px; border: 2px solid var(--background-secondary); border-radius: 50%; background: var(--success); right: -2px; bottom: -2px
}
.members-footer-note { margin: 8px 10px 11px; padding: 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); display: flex; gap: 8px; color: var(--text-tertiary); font-size: .55rem; line-height: 1.35
}
.members-footer-note i { color: var(--accent); flex: 0 0 auto
}
/* Floating media + pickers */
.picker-popover { position: absolute; width: min(380px,calc(100vw - 40px)); max-height: 340px; overflow: auto; background: var(--background-elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow-float); z-index: 20; grid-template-columns: repeat(7,1fr); gap: 6px
}
.picker-popover:not(.d-none) { display: grid
}
.picker-popover button { border: 0; background: var(--surface-soft); color: var(--text-primary); min-height: 41px; border-radius: 10px; font-size: 1.15rem
}
.picker-popover .wide { grid-column: 1/-1; font-size: .7rem; color: var(--text-secondary)
}
.picker-popover img { width: 42px; height: 42px; object-fit: contain
}
.media-stage { position: absolute; right: 22px; top: 88px; width: min(600px,52vw); overflow: auto; padding: 9px; border: 1px solid var(--border-strong); background: #05070b; border-radius: 18px; box-shadow: var(--shadow-float); z-index: 15
}
.media-stage video { width: 100%; max-height: 46vh; border-radius: 12px; background: #000; display: block; margin-bottom: 8px
}
.modal-modern { background: var(--background-elevated); border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: var(--shadow-float); color: var(--text-primary)
}
.modal-modern .btn-secondary { --bs-btn-bg: var(--surface-hover); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text-secondary); --bs-btn-hover-bg: var(--surface-active); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-hover-color: var(--text-primary)
}
.toast { background: var(--background-elevated); color: var(--text-primary); border: 1px solid var(--border)!important; box-shadow: var(--shadow-float)
}
/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--text-tertiary) 36%,transparent) transparent
}
::-webkit-scrollbar { width: 8px; height: 8px
}
::-webkit-scrollbar-track { background: transparent
}
::-webkit-scrollbar-thumb { background: color-mix(in srgb,var(--text-tertiary) 34%,transparent); border-radius: 999px
}
/* Responsive */
@media(max-width:1280px) {
  .vh-app { grid-template-columns: 76px 286px minmax(0,1fr)
}
  .members-panel { display: none
}
  .members-panel.mobile-open { display: flex; position: fixed; right: 0; top: 0; bottom: 0; width: min(310px,86vw); z-index: 60; box-shadow: -24px 0 70px rgba(0,0,0,.35)
}
  .message-search { width: 150px
}
  .message-search:focus-within { width: 190px
}
}
@media(max-width:920px) {
  .message-search { display: none
}
  .channel-private-badge { display: none
}
  .message-list,.composer-wrap { padding-left: 18px; padding-right: 18px
}
}
@media(max-width:760px) {
  .vh-app { grid-template-columns: 60px minmax(0,1fr)
}
  .server-rail { padding: 10px 5px
}
  .server-logo,.server-action,.server-chip { width: 46px; height: 46px; border-radius: 15px
}
  .server-chip { border-radius: var(--avatar-radius,50%)
}
  .channel-sidebar { position: fixed; left: 60px; top: 0; bottom: 0; width: min(304px,calc(100vw - 60px)); z-index: 55; transform: translateX(-105%); transition: .22s; box-shadow: 24px 0 70px rgba(0,0,0,.4)
}
  .channel-sidebar.mobile-open { transform: translateX(0)
}
  .chat-panel { grid-column: 2
}
  .chat-header { height: 66px; padding: 0 10px
}
  .chat-panel { grid-template-rows: 66px minmax(0,1fr) auto
}
  .channel-heading-icon { width: 36px; height: 36px; border-radius: 11px
}
  .channel-meta #channelDescription { display: none
}
  .status-badge { display: none
}
  .composer-hint { display: none
}
  .message-list { padding: 14px 8px
}
  .composer-wrap { padding: 4px 8px 8px
}
  .composer-box { border-radius: 14px
}
  .members-panel.mobile-open { width: min(310px,calc(100vw - 60px))
}
  .media-stage { left: 70px; right: 10px; top: 74px; width: auto; max-height: 45vh
}
  .picker-popover { right: 10px; bottom: 70px
}
  .voice-controls button span { display: none
}
}
/* v4 messaging + profile layer */
.user-avatar,.msg-avatar,.member-avatar,.profile-avatar,.member-profile-avatar { overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 45%,var(--background-elevated)),color-mix(in srgb,#3f86ff 38%,var(--background-elevated))); color: #fff; font-weight: 800
}
.user-avatar img,.msg-avatar img,.member-avatar img,.profile-avatar img,.member-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block
}
.user-panel-name { cursor: pointer
}
.user-avatar { cursor: pointer
}
.member-button { width: 100%; border: 0; background: transparent; text-align: left
}
.member-status.idle { background: var(--warning)
}
.member-status.dnd { background: var(--danger)
}
.member-status.invisible { background: var(--text-tertiary)
}
.channel-item.has-unread .channel-label { color: var(--text-primary); font-weight: 760
}
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-primary); box-shadow: 0 0 0 3px var(--surface-soft); margin-left: auto
}
.channel-item.has-unread .join-pill+.unread-dot { margin-left: 0
}
.msg-edited { color: var(--text-tertiary); font-style: italic
}
.msg-deleted { font-style: italic; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px
}
.message-row.deleted { opacity: .78
}
.msg-reply-preview { border: 0; border-left: 2px solid color-mix(in srgb,var(--accent) 55%,transparent); color: var(--text-tertiary); display: flex; align-items: center; gap: 7px; max-width: 100%; text-align: left; font-size: .64rem
}
.msg-reply-preview:hover { color: var(--text-secondary)
}
.msg-reply-preview span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.msg-reply-preview b { color: var(--text-secondary); margin-right: 4px
}
.msg-reply-preview i { color: var(--accent); flex: 0 0 auto
}
.reply-bar { margin: 0 0 7px; border: 1px solid var(--border); background: color-mix(in srgb,var(--background-elevated) 94%,var(--accent) 6%); border-radius: 13px; display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; align-items: center; gap: 7px; padding: 7px 9px; box-shadow: 0 9px 24px rgba(0,0,0,.1)
}
.reply-bar-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent)
}
.reply-bar-copy { display: flex; flex-direction: column; min-width: 0
}
.reply-bar-copy span { font-size: .68rem; color: var(--text-secondary)
}
.reply-bar-copy span b { color: var(--text-primary)
}
.reply-bar-copy small { font-size: .6rem; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.reply-bar>button { border: 0; background: transparent; color: var(--text-tertiary); width: 32px; height: 32px; border-radius: 9px
}
.reply-bar>button:hover { color: var(--text-primary)
}
.history-loader { position: sticky; top: 6px; z-index: 5; align-self: center; margin: 0 auto 10px; width: max-content; max-width: 90%; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb,var(--background-elevated) 92%,transparent); box-shadow: var(--shadow-soft); color: var(--text-secondary); font-size: .62rem; display: flex; align-items: center; gap: 7px; backdrop-filter: blur(10px)
}
.message-highlight { animation: messagePulse 1.6s ease
}
@keyframes messagePulse {
  0%,100% { background: transparent
}
  20%,65% { background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 26%,var(--border))
}
}
#messageEditInput,#profileBio { resize: vertical
}
.danger-modal-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb,var(--danger) 15%,transparent); color: var(--danger); font-size: 1.2rem
}
.profile-modal { overflow: hidden
}
.profile-cover { height: 112px; position: relative; background: linear-gradient(120deg,#5141aa,#655ff2 55%,#3f82d4)
}
.profile-cover-glow { position: absolute; width: 170px; height: 170px; border-radius: 50%; background: #b7aaff; filter: blur(55px); opacity: .32; right: -45px; top: -90px
}
.profile-close { position: absolute; right: 14px; top: 14px; filter: invert(1); opacity: .8
}
.profile-body { padding: 0 24px 8px
}
.profile-avatar-wrap { position: relative; width: 92px; margin-top: -46px
}
.profile-avatar { width: 92px; height: 92px; border-radius: var(--avatar-radius,50%); border: 5px solid var(--background-elevated); font-size: 1.4rem; box-shadow: 0 12px 30px rgba(0,0,0,.24)
}
.profile-avatar-edit { position: absolute; right: -4px; bottom: 1px; width: 33px; height: 33px; border-radius: var(--avatar-radius,50%); border: 3px solid var(--background-elevated); background: var(--accent); color: #fff; display: grid; place-items: center
}
.profile-identity { margin-top: 11px
}
.profile-identity span { color: var(--text-tertiary); font-size: .69rem
}
.profile-modal .form-label { font-size: .68rem; font-weight: 700; color: var(--text-secondary)
}
.profile-modal .form-select { background-color: var(--background-secondary); border-color: var(--border-strong); color: var(--text-primary)
}
.member-profile-card { overflow: hidden; position: relative
}
.member-profile-cover { background: linear-gradient(120deg,#4c459c,#4f7dcc); position: relative
}
.member-profile-avatar { border: 5px solid var(--background-elevated); margin: -41px 0 0 20px; position: relative; font-size: 1.25rem
}
.member-profile-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); font-size: .61rem; color: var(--text-secondary)
}
.member-profile-bio { margin: 13px 0 0; color: var(--text-secondary); font-size: .72rem; line-height: 1.5; white-space: pre-wrap
}
@media(max-width:760px) {
  .reply-bar { margin-bottom: 5px
}
  .profile-body { padding-left: 18px; padding-right: 18px
}
  .profile-cover { height: 96px
}
  .profile-avatar { width: 80px; height: 80px; border-radius: var(--avatar-radius,50%)
}
  .profile-avatar-wrap { width: 80px; margin-top: -40px
}
}
/* Avatar status dot must remain outside the member avatar crop. */
.member-avatar>img { border-radius: var(--avatar-radius,50%); overflow: hidden
}
/* v4 inner application redesign — auth/register styles above are intentionally untouched. */
html[data-app-theme="dark"] .vh-app { --background-primary: #07090e; --background-secondary: #0b0f17; --background-tertiary: #0f1520; --background-elevated: #121a27; --surface-soft: rgba(255,255,255,.035); --surface-hover: rgba(255,255,255,.065); --surface-active: rgba(126,104,255,.14); --border: rgba(255,255,255,.075); --border-strong: rgba(255,255,255,.12); --text-primary: #f4f7fb; --text-secondary: #a8b2c2; --text-tertiary: #68758a; --accent: #8a72ff; --accent-strong: #7257f4; --accent-soft: rgba(138,114,255,.14); --success: #46d8a2; --danger: #ff7186; --warning: #efbd67;
}
.vh-app { grid-template-columns: 72px 292px minmax(0,1fr) 294px; gap: 12px; padding: 12px; background: radial-gradient(circle at 16% -10%,rgba(117,90,255,.17),transparent 30%),
  radial-gradient(circle at 88% 110%,rgba(44,130,255,.10),transparent 32%),var(--background-primary)
}
.app-orb { display: none
}
.server-rail,.channel-sidebar,.chat-panel,.members-panel { border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 22px 70px rgba(0,0,0,.22); overflow: hidden
}
.server-rail { background: linear-gradient(180deg,color-mix(in srgb,var(--background-secondary) 94%,#151027 6%),color-mix(in srgb,var(--background-secondary) 96%,#07111b 4%)); border-right: 1px solid var(--border)
}
.server-logo { background: linear-gradient(145deg,#8f76ff,#5f73ff); box-shadow: 0 12px 28px rgba(102,83,240,.34)
}
.server-chip { background: rgba(255,255,255,.035)
}
.channel-sidebar { background: linear-gradient(180deg,color-mix(in srgb,var(--background-secondary) 96%,var(--accent) 4%),var(--background-secondary)); border-right: 1px solid var(--border)
}
.server-showcase { background: linear-gradient(145deg,rgba(133,104,255,.14),rgba(62,105,178,.08)),var(--background-elevated)
}
.server-showcase:after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg,rgba(255,255,255,.045),transparent 38%)
}
.channel-item.active { background: linear-gradient(90deg,var(--accent-soft),rgba(96,126,255,.06)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent)
}
.voice-dock { border: 1px solid color-mix(in srgb,var(--success) 24%,var(--border)); background: linear-gradient(145deg,color-mix(in srgb,var(--success) 7%,var(--background-elevated)),var(--background-elevated))
}
.user-panel { border: 1px solid var(--border); background: var(--surface-soft)
}
.user-avatar { width: 38px; height: 38px; border-radius: var(--avatar-radius,50%)
}
.chat-panel { background: linear-gradient(180deg,color-mix(in srgb,var(--background-primary) 97%,var(--accent) 3%),var(--background-primary)); grid-template-rows: 72px minmax(0,1fr) auto
}
.chat-header { border-bottom: 1px solid var(--border); background: color-mix(in srgb,var(--background-primary) 86%,transparent)
}
.channel-heading-icon { box-shadow: none
}
.channel-private-badge { background: var(--accent-soft); border: 1px solid color-mix(in srgb,var(--accent) 18%,transparent); color: color-mix(in srgb,var(--accent) 82%,#fff 18%)
}
.message-list { background: radial-gradient(circle at 50% 0,rgba(114,88,244,.045),transparent 30%); padding-top: 18px
}
.message-actions { box-shadow: 0 14px 34px rgba(0,0,0,.3)
}
.composer-wrap { padding-bottom: 14px; background: transparent
}
.composer-box { background: color-mix(in srgb,var(--background-elevated) 94%,transparent); box-shadow: 0 14px 34px rgba(0,0,0,.18); backdrop-filter: blur(18px)
}
.reply-bar { background: color-mix(in srgb,var(--background-elevated) 93%,var(--accent) 7%)
}
.members-panel { background: linear-gradient(180deg,var(--background-secondary),color-mix(in srgb,var(--background-secondary) 97%,#142033 3%)); border-left: 1px solid var(--border)
}
.overview-stat { background: rgba(255,255,255,.028)
}
.members-footer-note { background: rgba(255,255,255,.022)
}
.message-search { background: var(--surface-soft)
}
.header-action-btn,.status-badge { border-radius: 11px
}
html[data-app-theme="light"] .vh-app { background: radial-gradient(circle at 15% -10%,rgba(112,88,244,.09),transparent 30%),#eef2f7
}
@media(max-width:1280px) {
  .vh-app { grid-template-columns: 72px 286px minmax(0,1fr); gap: 10px; padding: 10px
}
  .members-panel.mobile-open { top: 10px; bottom: 10px; right: 10px; border-radius: 22px
}
}
@media(max-width:760px) {
  .vh-app { grid-template-columns: 58px minmax(0,1fr); gap: 8px; padding: 8px
}
  .server-rail { padding: 8px 4px; border-radius: 19px
}
  .server-logo,.server-action,.server-chip { width: 44px; height: 44px; border-radius: 14px
}
  .server-chip { border-radius: var(--avatar-radius,50%)
}
  .chat-panel { grid-column: 2; border-radius: 19px
}
  .channel-sidebar { left: 66px; top: 8px; bottom: 8px; width: min(304px,calc(100vw - 74px)); border-radius: 19px
}
  .members-panel.mobile-open { top: 8px; bottom: 8px; right: 8px; width: min(310px,calc(100vw - 74px)); border-radius: 19px
}
  .chat-header { height: 64px
}
  .chat-panel { grid-template-rows: 64px minmax(0,1fr) auto
}
}
/* v5 social hub + direct messages. Auth/register styles remain unchanged. */
.social-sidebar { scrollbar-width: thin
}
.social-quick-actions { display: grid; padding: 2px 0 13px
}
.social-nav-item { border: 1px solid transparent; background: transparent; color: var(--text-secondary); display: flex; align-items: center; gap: 10px; text-align: left; font-size: .78rem; font-weight: 650
}
.social-nav-item i { font-size: .94rem; color: var(--text-tertiary)
}
.social-nav-item:hover { color: var(--text-primary)
}
.social-nav-item.active { background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 15%,transparent); color: var(--text-primary)
}
.social-nav-item.active i { color: var(--accent)
}
.social-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; display: grid; place-items: center; font-size: .58rem; font-weight: 800
}
.social-section-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-tertiary); font-size: .57rem; font-weight: 800; letter-spacing: .09em
}
.dm-item { color: var(--text-secondary); display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px
}
.dm-item.active { background: linear-gradient(90deg,var(--accent-soft),rgba(96,126,255,.04)); border-color: color-mix(in srgb,var(--accent) 16%,var(--border))
}
.dm-avatar { background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 28%,var(--background-elevated)),var(--background-elevated)); display: grid; place-items: center; overflow: hidden; color: var(--text-primary); font-size: .68rem; font-weight: 800
}
.dm-avatar img { width: 100%; height: 100%; object-fit: cover
}
.dm-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px
}
.dm-copy b { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.dm-copy small { color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.dm-unread { border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft)
}
.social-dashboard { padding: 24px 26px 40px; overflow: auto; height: 100%
}
.social-hero { border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(140deg,color-mix(in srgb,var(--accent) 12%,var(--background-elevated)),var(--background-elevated)); padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; box-shadow: var(--shadow-soft)
}
.social-hero-copy h3 { margin: 0 0 6px; font-size: 1.18rem
}
.social-hero-copy p { margin: 0; color: var(--text-secondary); font-size: .74rem; line-height: 1.55; max-width: 560px
}
.social-hero-actions { display: flex; gap: 8px; flex-wrap: wrap
}
.social-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.8fr); gap: 18px; margin-top: 18px
}
.social-card { border: 1px solid var(--border); border-radius: 20px; background: color-mix(in srgb,var(--background-elevated) 94%,transparent); overflow: hidden
}
.social-card-head { min-height: 55px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px
}
.social-card-head h4 { font-size: .78rem; margin: 0
}
.social-card-head span { font-size: .59rem; color: var(--text-tertiary)
}
.friend-list,.request-list { display: grid; padding: 7px
}
.friend-row,.request-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px; border-radius: 14px; border: 1px solid transparent
}
.friend-avatar { width: 40px; height: 40px; border-radius: var(--avatar-radius,50%); background: var(--surface-soft); display: grid; place-items: center; overflow: hidden; font-size: .72rem; font-weight: 800
}
.friend-avatar img { width: 100%; height: 100%; object-fit: cover
}
.friend-meta { min-width: 0
}
.friend-meta b { display: block; color: var(--text-primary); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.friend-meta small { display: block; color: var(--text-tertiary); font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.friend-actions { display: flex; gap: 6px
}
.mini-action { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-secondary); display: grid; place-items: center
}
.mini-action:hover { color: var(--text-primary)
}
.mini-action.success:hover { color: var(--success)
}
.mini-action.danger:hover { color: var(--danger)
}
.social-empty { padding: 30px 18px; text-align: center; color: var(--text-tertiary); font-size: .66rem
}
.social-empty i { display: block; font-size: 1.25rem; margin-bottom: 8px; color: var(--text-secondary)
}
.group-friend-list { max-height: 290px; overflow: auto; display: grid; gap: 5px; border: 1px solid var(--border); border-radius: 14px; padding: 7px; background: var(--background-secondary)
}
.group-friend-option { display: grid; grid-template-columns: 36px minmax(0,1fr) 22px; gap: 10px; align-items: center; padding: 7px; border-radius: 11px; cursor: pointer
}
.group-friend-option input { accent-color: var(--accent)
}
.group-friend-option .friend-avatar { width: 36px; height: 36px; border-radius: var(--avatar-radius,50%)
}
.group-friend-option b { font-size: .7rem
}
.group-friend-option small { display: block; color: var(--text-tertiary); font-size: .57rem
}
.dm-read-state { margin-top: 4px; color: var(--text-tertiary); font-size: .54rem; display: flex; align-items: center; gap: 4px
}
.dm-read-state i { color: var(--accent)
}
.dm-context-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .56rem; font-weight: 700
}
.members-panel.social-mode .overview-stat:last-child { display: none
}
.members-panel.social-mode .members-overview { grid-template-columns: 1fr
}
.members-panel.social-mode .member-role-badge { display: none
}
.server-logo.active { box-shadow: 0 0 0 3px var(--accent-soft),0 12px 28px rgba(102,83,240,.34)
}
@media(max-width:980px) {
  .social-dashboard-grid { grid-template-columns: 1fr
}
  .social-hero { align-items: flex-start; flex-direction: column
}
  .social-dashboard { padding: 18px
}
}
@media(max-width:760px) {
  .social-sidebar { padding-bottom: 10px
}
  .social-dashboard { padding: 14px 12px 28px
}
  .social-hero { padding: 17px; border-radius: 17px
}
  .social-card { border-radius: 17px
}
  .friend-row,.request-row { grid-template-columns: 38px minmax(0,1fr) auto; padding: 7px
}
  .friend-actions { gap: 4px
}
  .mini-action { width: 32px; height: 32px
}
}
/* v6 · voice messages */
.voice-message-btn { color: color-mix(in srgb,var(--accent) 78%,var(--text-secondary))
}
.voice-message-btn:hover { color: var(--accent)
}
.voice-record-bar { min-height: 64px; border: 1px solid color-mix(in srgb,var(--danger) 28%,var(--border)); background: color-mix(in srgb,var(--background-elevated) 95%,var(--danger) 5%); border-radius: 18px; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; box-shadow: 0 14px 34px rgba(0,0,0,.18); backdrop-filter: blur(18px)
}
.voice-record-indicator { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb,var(--danger) 14%,var(--surface-soft)); color: var(--danger); position: relative; flex: 0 0 auto
}
.voice-record-indicator>span { position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 0 color-mix(in srgb,var(--danger) 40%,transparent); animation: voice-record-pulse 1.45s infinite
}
.voice-record-copy { display: flex; flex-direction: column; min-width: 128px
}
.voice-record-copy b { font-size: .72rem; color: var(--text-primary)
}
.voice-record-copy small { font-size: .62rem; color: var(--danger); font-variant-numeric: tabular-nums; margin-top: 1px
}
.voice-record-wave { height: 38px; flex: 1; min-width: 90px; display: flex; gap: 3px; align-items: center; overflow: hidden; padding: 0 2px
}
.voice-record-wave span { width: 3px; min-width: 3px; border-radius: 999px; background: color-mix(in srgb,var(--danger) 70%,var(--text-tertiary)); opacity: .62; transition: height .1s ease
}
.voice-record-action { width: 40px; height: 40px; border: 0; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto
}
.voice-record-action.cancel { background: var(--surface-soft); color: var(--text-secondary); border: 1px solid var(--border)
}
.voice-record-action.cancel:hover { color: var(--danger)
}
.voice-record-action.send { background: linear-gradient(145deg,var(--accent),#6477ff); color: #fff; box-shadow: 0 8px 18px rgba(101,87,255,.2)
}
@keyframes voice-record-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--danger) 38%,transparent)
}
  70% { box-shadow: 0 0 0 7px transparent
}
  100% { box-shadow: 0 0 0 0 transparent
}
}
.voice-message { width: min(460px,100%); margin-top: 8px; border: 1px solid var(--border); background: linear-gradient(145deg,color-mix(in srgb,var(--background-elevated) 96%,var(--accent) 4%),var(--surface-soft)); border-radius: 16px; padding: 10px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.08)
}
.voice-play-btn { width: 42px; height: 42px; border: 0; border-radius: 13px; background: linear-gradient(145deg,var(--accent),#6477ff); color: #fff; display: grid; place-items: center; font-size: 1rem; box-shadow: 0 8px 18px rgba(101,87,255,.18)
}
.voice-message-main { min-width: 0
}
.voice-waveform { height: 28px; display: flex; align-items: center; gap: 2px; cursor: pointer; overflow: hidden
}
.voice-waveform span { width: 3px; min-width: 3px; border-radius: 999px; background: var(--text-tertiary); opacity: .45; transition: opacity .12s,background .12s
}
.voice-waveform span.played { background: var(--accent); opacity: .95
}
.voice-message-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; color: var(--text-tertiary); font-size: .58rem
}
.voice-message-meta .voice-duration { font-variant-numeric: tabular-nums
}
.voice-message-meta .voice-label { display: flex; align-items: center; gap: 4px
}
.voice-message-download { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--text-tertiary); display: grid; place-items: center
}
.voice-message-download:hover { color: var(--text-primary)
}
.voice-message.loading .voice-play-btn { opacity: .65; pointer-events: none
}
.voice-message.error { border-color: color-mix(in srgb,var(--danger) 35%,var(--border))
}
@media(max-width:760px) {
  .voice-record-bar { border-radius: 14px; gap: 8px
}
  .voice-record-copy b { display: none
}
  .voice-record-copy { min-width: 42px
}
  .voice-record-wave { gap: 2px
}
  .voice-record-wave span { width: 2px; min-width: 2px
}
  .voice-message { grid-template-columns: 40px minmax(0,1fr); padding: 9px
}
  .voice-message-download { display: none
}
}
/* v7 — server roles & permissions */
.settings-eyebrow { font-size: .62rem; letter-spacing: .15em; font-weight: 850; color: var(--accent); margin-bottom: 4px
}
.settings-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px
}
.settings-section-head h4 { font-size: 1.05rem; margin: 0 0 4px; font-weight: 800
}
.settings-section-head p { margin: 0; color: var(--text-secondary); font-size: .78rem
}
.settings-card { border: 1px solid var(--border); background: var(--background-secondary); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-soft)
}
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px
}
.settings-stat { border: 1px solid var(--border); background: var(--surface-soft); border-radius: 15px; padding: 14px
}
.settings-stat small { display: block; color: var(--text-tertiary); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em
}
.settings-stat b { display: block; margin-top: 5px; font-size: 1rem
}
.role-manager { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 16px
}
.role-list { display: flex; flex-direction: column; gap: 7px
}
.role-list-item { border: 1px solid var(--border); background: var(--background-secondary); color: var(--text-secondary); border-radius: 13px; padding: 10px 11px; display: flex; align-items: center; gap: 9px; text-align: left
}
.role-list-item:hover { color: var(--text-primary)
}
.role-list-item.active { border-color: color-mix(in srgb,var(--accent) 50%,var(--border)); background: var(--accent-soft); color: var(--text-primary)
}
.role-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb,currentColor 15%,transparent); flex: 0 0 auto
}
.role-list-copy { min-width: 0; flex: 1
}
.role-list-copy b { display: block; font-size: .8rem
}
.role-list-copy small { display: block; font-size: .64rem; color: var(--text-tertiary); margin-top: 2px
}
.role-editor { border: 1px solid var(--border); background: var(--background-secondary); border-radius: 18px
}
.role-editor-top { display: grid; grid-template-columns: minmax(0,1fr) 90px; gap: 12px; margin-bottom: 18px
}
.permission-groups { display: flex; flex-direction: column
}
.permission-group { border-top: 1px solid var(--border)
}
.permission-group:first-child { border-top: 0; padding-top: 0
}
.permission-group-title { font-size: .68rem; font-weight: 850; letter-spacing: .1em; color: var(--text-tertiary); margin-bottom: 7px
}
.permission-row { display: flex; align-items: center; gap: 12px; border-radius: 10px
}
.permission-copy { min-width: 0; flex: 1
}
.permission-copy b { display: block; font-size: .78rem
}
.permission-copy small { display: block; color: var(--text-tertiary); font-size: .66rem; margin-top: 2px
}
.role-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border)
}
.settings-member-list { display: flex; flex-direction: column; gap: 8px
}
.settings-member-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(200px,340px); gap: 14px; border: 1px solid var(--border); background: var(--background-secondary); border-radius: 14px; padding: 11px 13px
}
.settings-member-identity { display: flex; align-items: center; gap: 10px; min-width: 0
}
.settings-member-avatar { width: 36px; height: 36px; border-radius: var(--avatar-radius,50%); background: var(--accent-soft); display: grid; place-items: center; overflow: hidden; font-size: .72rem; font-weight: 800
}
.settings-member-avatar img { width: 100%; height: 100%; object-fit: cover
}
.settings-member-identity b,.settings-member-identity small { display: block
}
.settings-member-identity b { font-size: .8rem
}
.settings-member-identity small { font-size: .65rem; color: var(--text-tertiary)
}
.role-checks { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap
}
.role-check-pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface-soft); font-size: .67rem; cursor: pointer
}
.role-check-pill.locked { opacity: .65; cursor: not-allowed
}
.override-toolbar { display: grid; grid-template-columns: minmax(160px,1fr) 150px minmax(180px,1fr) auto; gap: 10px; align-items: end; margin-bottom: 15px
}
.override-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px
}
.override-row { border: 1px solid var(--border); background: var(--background-secondary); border-radius: var(--ui-radius-sm); padding: 12px; display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 10px
}
.override-row b { display: block; font-size: 14px; line-height: 1.4
}
.override-row small { display: block; color: var(--text-secondary); font-size: 12px; line-height: 1.5; margin-top: 4px
}
.override-row select { font-size: .7rem
}
.audit-list { display: flex; flex-direction: column; gap: 8px
}
.audit-row { border: 1px solid var(--border); background: var(--background-secondary); border-radius: 13px; padding: 11px 13px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center
}
.audit-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent)
}
.audit-copy b { display: block; font-size: .75rem
}
.audit-copy small { display: block; color: var(--text-tertiary); font-size: .64rem; margin-top: 2px
}
.audit-time { font-size: .63rem; color: var(--text-tertiary)
}
.settings-empty { border: 1px dashed var(--border-strong); border-radius: 16px; padding: 28px; text-align: center; color: var(--text-secondary); font-size: .76rem
}
.settings-note { display: flex; gap: 9px; align-items: flex-start; border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); background: var(--accent-soft); border-radius: 13px; padding: 11px 12px; color: var(--text-secondary); font-size: .7rem
}
.settings-note i { color: var(--accent)
}
@media(max-width:900px) {
  .role-manager { grid-template-columns: 1fr
}
  .role-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr))
}
  .override-grid { grid-template-columns: 1fr
}
  .settings-member-row { grid-template-columns: 1fr
}
  .role-checks { justify-content: flex-start
}
}
@media(max-width:560px) {
  .settings-grid,.role-list { grid-template-columns: 1fr
}
  .override-toolbar { grid-template-columns: 1fr
}
  .role-editor-top { grid-template-columns: 1fr 74px
}
}
/* v8 realtime presence */
.presence { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border: 2px solid var(--background-secondary); border-radius: 50%; background: var(--text-tertiary); box-shadow: 0 0 0 1px color-mix(in srgb,var(--background-secondary) 70%,transparent)
}
.presence.online { background: var(--success)
}
.presence.idle { background: var(--warning)
}
.presence.dnd { background: var(--danger)
}
.presence.offline,.presence.invisible { background: var(--text-tertiary)
}
/* v9 · UI polish, media previews, stickers and sound preferences. Auth styles stay untouched. */
.member-item { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; text-align: left; color: var(--text-secondary);
}
.member-avatar { overflow: visible; flex: 0 0 auto
}
.member-meta { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.15
}
.member-meta .member-name { display: block; min-width: 0; color: var(--text-primary); font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.member-meta .member-role { display: block; min-width: 0; color: var(--text-tertiary); font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.member-role-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); color: var(--text-tertiary); font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: .015em
}
.member-role-badge.owner { color: color-mix(in srgb,var(--warning) 86%,var(--text-primary)); border-color: color-mix(in srgb,var(--warning) 32%,var(--border)); background: color-mix(in srgb,var(--warning) 9%,var(--surface-soft))
}
.member-role-badge.admin { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 30%,var(--border)); background: var(--accent-soft)
}
html[data-app-theme="light"] .member-role-badge { background: rgba(29,38,55,.035)
}
.msg-image-preview,.msg-sticker-wrap { border: 0; padding: 0; background: transparent; color: inherit; text-align: left
}
.msg-image-preview { position: relative; display: block; width: min(520px,100%); margin-top: 9px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--background-secondary); box-shadow: 0 10px 28px rgba(0,0,0,.12); cursor: zoom-in
}
.msg-image-preview>img { display: block; width: 100%; max-height: 390px; object-fit: contain; background: color-mix(in srgb,var(--background-primary) 92%,#000 8%)
}
.msg-media-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; color: var(--text-secondary); font-size: .62rem; background: color-mix(in srgb,var(--background-elevated) 96%,transparent)
}
.msg-media-caption>span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.msg-media-caption small { color: var(--text-tertiary); white-space: nowrap
}
.msg-video-preview,.msg-audio-preview { width: min(520px,100%); margin-top: 9px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--background-secondary); box-shadow: 0 10px 28px rgba(0,0,0,.10)
}
.msg-video-preview video { display: block; width: 100%; max-height: 390px; background: #000
}
.msg-audio-preview audio { display: block; width: calc(100% - 16px); margin: 0 8px 9px; height: 38px
}
.msg-attachment { display: grid; grid-template-columns: 40px minmax(0,1fr) 22px; align-items: center; gap: 10px; max-width: 520px; padding: 10px 11px; border-radius: 14px
}
.file-card-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 1rem
}
.file-card-copy { min-width: 0
}
.file-card-copy b,.file-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.file-card-copy b { font-size: .69rem; color: var(--text-primary)
}
.file-card-copy small { font-size: .55rem; color: var(--text-tertiary); margin-top: 2px
}
.file-card-open { color: var(--text-tertiary)
}
.msg-sticker-wrap { display: block; margin-top: 8px; border-radius: 17px; cursor: zoom-in
}
.msg-sticker { display: block; object-fit: contain; margin: 0; filter: drop-shadow(0 12px 22px rgba(0,0,0,.16)); transition: .16s ease
}
.picker-popover.sticker-mode { width: min(430px,calc(100vw - 40px)); padding: 11px
}
.picker-popover .sticker-picker-item { padding: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: .55rem; overflow: hidden
}
.picker-popover .sticker-picker-item img { object-fit: contain
}
.picker-popover .sticker-picker-item span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-tertiary)
}
.picker-popover .sticker-add { min-height: 38px
}
.picker-empty { grid-column: 1/-1; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-tertiary); gap: 5px; padding: 16px
}
.picker-empty i { font-size: 1.55rem; color: var(--accent)
}
.picker-empty b { color: var(--text-primary); font-size: .74rem
}
.picker-empty span { font-size: .61rem
}
.media-preview-modal { overflow: hidden
}
.media-preview-body { max-height: 78vh; padding: 14px; background: radial-gradient(circle at 50% 35%,var(--surface-soft),transparent 55%),color-mix(in srgb,var(--background-primary) 93%,#000 7%)
}
.media-preview-body img { display: block; max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 80px rgba(0,0,0,.28)
}
.sound-settings-card { border: 1px solid var(--border); border-radius: 15px; background: var(--surface-soft); padding: 12px 13px
}
.sound-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 14px
}
.sound-settings-head>div:first-child { min-width: 0
}
.sound-settings-head b { display: block; font-size: .75rem; color: var(--text-primary)
}
.sound-settings-head b i { color: var(--accent); margin-right: 5px
}
.sound-settings-head span { display: block; margin-top: 3px; font-size: .6rem; color: var(--text-tertiary)
}
.sound-volume-row { display: grid; grid-template-columns: 18px minmax(0,1fr) 42px auto; align-items: center; gap: 9px; margin-top: 11px
}
.sound-volume-row>i { color: var(--text-tertiary)
}
.sound-volume-row>span { font-size: .58rem; color: var(--text-tertiary); text-align: right; font-variant-numeric: tabular-nums
}
.sound-volume-row .form-range { margin: 0
}
.sound-volume-row .btn { font-size: .62rem
}
/* Messages: keep controls readable and avoid accidental overlap in narrow columns. */
.msg-head { padding-right: 82px
}
.message-row:hover .message-actions { display: flex
}
.message-row:focus-within { background: var(--surface-soft); border-color: var(--border)
}
@media(max-width:1280px) {
  .member-role-badge { max-width: 72px
}
  .members-overview { grid-template-columns: 1fr
}
  .members-overview .overview-stat:last-child { display: none
}
}
@media(max-width:760px) {
  .msg-image-preview,.msg-video-preview,.msg-audio-preview,.msg-attachment { max-width: 100%
}
  .msg-image-preview>img,.msg-video-preview video { max-height: 300px
}
  .picker-popover.sticker-mode { grid-template-columns: repeat(3,minmax(0,1fr)); width: min(360px,calc(100vw - 80px))
}
  .sound-volume-row { grid-template-columns: 18px minmax(0,1fr) 38px
}
  .sound-volume-row .btn { grid-column: 2/4
}
  .msg-head { padding-right: 0
}
  .message-actions { position: static; display: none; margin-top: 6px; width: max-content
}
  .message-row:hover .message-actions,.message-row:focus-within .message-actions { display: flex
}
}
.member-item { appearance: none; -webkit-appearance: none; background: transparent
}
#soundToggle.active { color: var(--danger); background: color-mix(in srgb,var(--danger) 10%,transparent)
}
/* v10 — internal UI rebuild. Auth/register styles above intentionally remain unchanged. */
.vh-app .form-control,.vh-app .form-select,.modal-modern .form-control,.modal-modern .form-select { background: var(--background-secondary); border: 1px solid var(--border-strong); color: var(--text-primary); box-shadow: none
}
.vh-app .form-control:focus,.vh-app .form-select:focus,.modal-modern .form-control:focus,.modal-modern .form-select:focus { border-color: color-mix(in srgb,var(--accent) 60%,var(--border)); color: var(--text-primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)
}
.vh-app .form-control::placeholder,.modal-modern .form-control::placeholder { color: var(--text-tertiary)
}
html[data-app-theme="light"] .modal-modern .btn-close { filter: none
}
html[data-app-theme="dark"] .modal-modern .btn-close { filter: invert(1) grayscale(1)
}
.channel-icon-img,.channel-heading-icon img { width: 24px; height: 24px; object-fit: cover; border-radius: 8px
}
.channel-icon-img { border-radius: var(--avatar-radius,50%)
}
.channel-heading-icon img { width: 100%; height: 100%; border-radius: 12px
}
.channel-item .voice-wave { display: none!important
}
/* Chat density and wallpaper */
.chat-panel { isolation: isolate
}
.message-list { padding: 20px clamp(12px,2.4vw,34px) 18px
}
.message-row { grid-template-columns: 42px minmax(0,1fr)
}
.message-post { margin-top: 7px; border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--border)); background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--background-elevated)),var(--background-secondary)); box-shadow: 0 10px 34px rgba(0,0,0,.08)
}
.message-post h4 { letter-spacing: -.015em
}
.message-post-content { word-break: break-word
}
.mention-token { display: inline-block
}
.mention-token.mention-me { background: color-mix(in srgb,var(--warning) 18%,transparent); color: var(--warning)
}
.mention-picker { position: fixed; z-index: 2000; width: 280px; max-height: 300px; overflow: auto; padding: 7px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--background-elevated); box-shadow: var(--shadow-float)
}
.mention-picker button { width: 100%; border: 0; background: transparent; color: var(--text-primary); padding: 8px; border-radius: 10px; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; align-items: center; text-align: left
}
.mention-avatar { width: 34px; height: 34px; border-radius: var(--avatar-radius,50%); display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); font-size: .65rem; font-weight: 800
}
.mention-avatar img { width: 100%; height: 100%; object-fit: cover
}
.mention-picker b,.mention-picker small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.mention-picker b { font-size: .72rem
}
.mention-picker small { font-size: .58rem; color: var(--text-tertiary)
}
/* Media/video */
.vh-video-player { overflow: hidden
}
.vh-video-stage { position: relative; background: #03050a; aspect-ratio: 16/9; display: grid; place-items: center
}
.vh-video-stage video { width: 100%; height: 100%; max-height: none!important; object-fit: contain; margin: 0!important; cursor: pointer
}
.vh-video-center { position: absolute; width: 56px; height: 56px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(10,14,24,.7); backdrop-filter: blur(10px); color: white; font-size: 1.55rem; transition: .15s
}
.vh-video-center.is-playing { opacity: 0
}
.vh-video-stage:hover .vh-video-center.is-playing { opacity: .65
}
.vh-video-controls { display: grid; grid-template-columns: 32px auto minmax(100px,1fr) 32px 32px; gap: 7px; align-items: center; padding: 8px 9px; background: #0b0f17; color: #fff
}
.vh-video-controls button { width: 32px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #fff
}
.vh-video-time { font-size: .58rem; color: #aab2c0; white-space: nowrap; font-variant-numeric: tabular-nums
}
.vh-video-seek { width: 100%; accent-color: var(--accent)
}
.media-stage { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 8px; width: min(760px,60vw); max-height: 62vh
}
.media-tile { position: relative; min-height: 180px; border-radius: 13px; overflow: hidden; background: #03050a; border: 1px solid rgba(255,255,255,.08)
}
.media-tile.screen-share { grid-column: 1/-1
}
.media-tile video { width: 100%; height: 100%; max-height: 56vh; object-fit: contain; margin: 0
}
.media-tile-label { position: absolute; left: 8px; bottom: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(4,7,13,.68); backdrop-filter: blur(10px); color: #fff; font-size: .6rem
}
/* Profile/account modals */
.member-profile-actions { margin-top: 14px
}
.compact-dialog { max-width: 520px
}
.appearance-choice { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--border)
}
.appearance-choice:last-child { border-bottom: 0
}
.appearance-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent)
}
.appearance-choice b,.appearance-choice span { display: block
}
.appearance-choice b { font-size: .78rem
}
.appearance-choice span { font-size: .62rem; color: var(--text-tertiary); margin-top: 2px
}
.account-security-modal { min-height: min(700px,88vh); overflow: hidden
}
.account-security-head { padding: 20px 22px; border-bottom: 1px solid var(--border)!important
}
.account-security-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 560px
}
.account-security-nav { padding: 14px 10px; border-right: 1px solid var(--border); background: var(--background-secondary); display: flex; flex-direction: column; gap: 5px
}
.account-security-nav button { border: 0; background: transparent; color: var(--text-secondary); border-radius: 11px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; text-align: left; font-weight: 700
}
.account-security-nav button:hover { color: var(--text-primary)
}
.account-security-nav button.active { background: var(--accent-soft); color: var(--accent)
}
.account-security-content { padding: 22px; overflow: auto
}
.security-loading { display: flex; gap: 8px; align-items: center; color: var(--text-secondary)
}
.security-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px
}
.security-section-head h4 { margin: 0; font-size: 1.05rem
}
.security-section-head p { margin: 5px 0 0; color: var(--text-tertiary); font-size: .69rem
}
.verification-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; font-size: .61rem; font-weight: 780; border: 1px solid var(--border)
}
.verification-pill.verified { color: var(--success); background: color-mix(in srgb,var(--success) 9%,transparent); border-color: color-mix(in srgb,var(--success) 25%,var(--border))
}
.verification-pill.pending { color: var(--warning); background: color-mix(in srgb,var(--warning) 8%,transparent); border-color: color-mix(in srgb,var(--warning) 24%,var(--border))
}
.security-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px
}
.security-card { border: 1px solid var(--border); border-radius: 16px; background: var(--background-secondary); padding: 16px; display: flex; flex-direction: column; gap: 8px
}
.security-card>i { font-size: 1.25rem; color: var(--accent)
}
.security-card h5 { margin: 0; font-size: .88rem
}
.security-card p { margin: 0 0 4px; color: var(--text-tertiary); font-size: .65rem
}
.security-card label { font-size: .63rem; font-weight: 700; color: var(--text-secondary); margin-top: 4px
}
.security-card .btn { margin-top: 5px
}
.session-list,.blocked-list { display: flex; flex-direction: column; gap: 8px
}
.session-card,.blocked-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 14px; background: var(--background-secondary); padding: 11px 12px
}
.session-card.current { border-color: color-mix(in srgb,var(--accent) 35%,var(--border))
}
.session-card.revoked { opacity: .55
}
.session-device-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-soft); color: var(--accent)
}
.session-copy b,.session-copy small,.blocked-row>div b,.blocked-row>div small { display: block
}
.session-copy b { font-size: .74rem
}
.session-copy b span { margin-left: 5px; color: var(--accent); font-size: .54rem
}
.session-copy small,.blocked-row>div small { font-size: .59rem; color: var(--text-tertiary); margin-top: 2px
}
.blocked-row>div b { font-size: .74rem
}
.incoming-call-icon { width: 68px; height: 68px; border-radius: 22px; margin: auto; display: grid; place-items: center; background: linear-gradient(145deg,var(--success),#3d9aff); color: #fff; font-size: 1.7rem; box-shadow: 0 18px 48px color-mix(in srgb,var(--success) 25%,transparent)
}
/* Settings redesign */
#serverSettingsModal .modal-dialog { max-width: min(1120px,calc(100vw - 40px))
}
#serverSettingsModal .modal-content { height: min(780px,calc(100vh - 40px)); min-height: 0; border-radius: 22px
}
.role-manager { grid-template-columns: 210px minmax(0,1fr); align-items: start
}
.role-editor { padding: 16px; box-shadow: none
}
.permission-groups { gap: 10px
}
.permission-group { padding-top: 10px
}
.permission-row { padding: 8px 4px; min-height: 47px
}
.permission-row .form-check-input { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-hover); position: relative; cursor: pointer; transition: .18s; margin: 0; box-shadow: none
}
.permission-row .form-check-input:before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; border-radius: 50%; background: var(--text-tertiary); transition: .18s
}
.permission-row .form-check-input:checked { background: var(--accent); border-color: var(--accent)
}
.permission-row .form-check-input:checked:before { transform: translateX(18px); background: #fff
}
.permission-row .form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-soft)
}
.role-check-pill input { accent-color: var(--accent)
}
.settings-section-head { position: sticky; top: -20px; z-index: 4; padding: 4px 0 12px; background: linear-gradient(var(--background-primary) 80%,transparent)
}
/* Mobile is a single-content surface with drawers, not squeezed desktop columns. */
@media(max-width:760px) {
  .vh-app { display: block; padding: 0; overflow: hidden
}
  .server-rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 62px; z-index: 70; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 6px 9px; display: flex; flex-direction: row; gap: 7px; background: color-mix(in srgb,var(--background-elevated) 94%,transparent); backdrop-filter: blur(20px); overflow-x: auto
}
  .server-logo,.server-action,.server-chip { width: 46px; height: 46px; flex: 0 0 46px
}
  .server-list { flex-direction: row; gap: 7px
}
  .rail-separator { width: 1px; height: 30px; flex: 0 0 1px
}
  .rail-spacer { display: none
}
  .chat-panel { position: absolute; inset: 0 0 62px 0; border: 0; border-radius: 0; grid-template-rows: 62px minmax(0,1fr) auto
}
  .channel-sidebar { left: 0; top: 0; bottom: 62px; width: min(330px,88vw); border-radius: 0; z-index: 80; transform: translateX(-105%)
}
  .members-panel.mobile-open { top: 0; bottom: 62px; right: 0; width: min(330px,88vw); border-radius: 0; z-index: 80
}
  .chat-header { height: 62px; padding: 0 9px
}
  .chat-actions { gap: 4px
}
  .chat-actions .header-action-btn { width: 34px; height: 34px
}
  .chat-actions #accountSecurityBtn { display: none
}
  .channel-heading { gap: 8px; min-width: 0
}
  .channel-heading-icon { width: 34px; height: 34px
}
  .channel-title { font-size: .84rem
}
  .message-list { padding: 10px 6px
}
  .message-row { grid-template-columns: 34px minmax(0,1fr); gap: 8px; padding: 8px 6px; border-radius: 10px
}
  .msg-avatar { width: 32px; height: 32px; border-radius: var(--avatar-radius,50%)
}
  .msg-body { padding-right: 0
}
  .msg-user { font-size: .73rem
}
  .msg-content { font-size: .8rem
}
  .message-actions { position: static; display: none; margin-top: 6px; width: max-content
}
  .message-row:hover .message-actions,.message-row:focus-within .message-actions { display: flex
}
  .composer-wrap { padding: 5px 6px 7px
}
  .composer-box { padding: 5px; border-radius: 14px
}
  .composer-box .composer-action { width: 34px; height: 34px
}
  .composer-box textarea { font-size: .82rem
}
  .media-stage { left: 8px; right: 8px; top: 70px; width: auto; max-height: 54vh; grid-template-columns: 1fr
}
  .media-tile { min-height: 170px
}
  .message-post { padding: 14px
}
  .vh-video-controls { grid-template-columns: 30px auto minmax(65px,1fr) 30px 30px; gap: 4px
}
  .vh-video-time { font-size: .52rem
}
  .picker-popover { bottom: 76px
}
  .mention-picker { width: min(280px,calc(100vw - 20px))
}
  #serverSettingsModal .modal-dialog,#accountSecurityModal .modal-dialog { margin: 0; max-width: none; width: 100%; height: 100%
}
  #serverSettingsModal .modal-content,#accountSecurityModal .modal-content { height: 100vh; max-height: none; border: 0; border-radius: 0
}
  .account-security-head { padding: 14px
}
  .account-security-layout { display: block; height: calc(100vh - 86px)
}
  .account-security-nav { height: 54px; display: flex; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 6px 8px; gap: 4px
}
  .account-security-nav button { flex: 0 0 auto; padding: 8px 10px
}
  .account-security-content { height: calc(100% - 54px); padding: 13px
}
  .role-manager { grid-template-columns: 1fr
}
  .role-list { display: flex; flex-direction: row; overflow-x: auto
}
  .role-list-item { min-width: 150px
}
  .security-grid { grid-template-columns: 1fr
}
  .settings-section-head { top: -13px
}
  .override-toolbar { grid-template-columns: 1fr
}
  .override-grid { grid-template-columns: 1fr
}
  .settings-member-row { grid-template-columns: 1fr
}
  .role-checks { justify-content: flex-start
}
  .appearance-choice { grid-template-columns: 38px minmax(0,1fr)
}
  .appearance-choice .btn { grid-column: 2
}
  .profile-modal-card { max-height: 95vh; overflow: auto
}
}
@media(max-width:420px) {
  .channel-meta { display: none
}
  .channel-private-badge { display: none
}
  .chat-actions #chatAppearanceBtn { display: none!important
}
  .chat-actions #realtimeBadge { display: none
}
  .member-role-badge { display: none
}
  .message-row { grid-template-columns: 30px minmax(0,1fr)
}
  .msg-avatar { width: 30px; height: 30px
}
  .vh-video-time { display: none
}
  .vh-video-controls { grid-template-columns: 30px minmax(80px,1fr) 30px 30px
}
  .security-section-head { display: block
}
  .verification-pill { margin-top: 8px
}
}
/* ===== VoiceHub v11: runtime UI polish ===== */
.channel-entry { display: flex; flex-direction: column; gap: 2px
}
.channel-entry+.channel-entry { margin-top: 2px
}
.channel-occupants { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid color-mix(in srgb,var(--border-strong) 72%,transparent)
}
.channel-occupant { border: 0; background: transparent; color: var(--text-secondary); display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 7px; width: 100%; padding: 3px 5px; border-radius: 9px; text-align: left; min-width: 0
}
.channel-occupant:hover { color: var(--text-primary)
}
.channel-occupant-avatar { position: relative; width: 24px; height: 24px; border-radius: var(--avatar-radius,50%); display: grid; place-items: center; background: var(--surface-active); overflow: visible; font-size: .57rem; font-weight: 800
}
.channel-occupant-avatar>img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--avatar-radius,50%)
}
.mini-presence { position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border-radius: 999px; border: 2px solid var(--background-secondary); background: var(--text-tertiary)
}
.mini-presence.online { background: var(--success)
}
.mini-presence.idle { background: #f3b740
}
.mini-presence.dnd { background: var(--danger)
}
.channel-occupant-copy { min-width: 0; display: flex; align-items: baseline; gap: 6px
}
.channel-occupant-copy>span { font-size: .68rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.channel-occupant-copy>small { font-size: .52rem; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.voice-occupants .channel-occupant-copy>span { color: color-mix(in srgb,var(--success) 68%,var(--text-primary))
}
.channel-occupant-more { padding: 2px 6px; color: var(--text-tertiary); font-size: .58rem
}
.social-sidebar { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden
}
.social-sidebar.d-none { display: none!important
}
.social-quick-actions,.social-section-head { flex: 0 0 auto
}
.dm-list { min-height: 0; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; padding-bottom: 8px
}
.user-panel { flex: 0 0 auto; margin-top: auto; position: relative; inset: auto; z-index: 3
}
.message-link { color: color-mix(in srgb,var(--accent) 82%,#72c6ff); text-decoration: none; overflow-wrap: anywhere
}
.message-link:hover { text-decoration: underline
}
.mention-token { border: 0; padding: 0 .2em; border-radius: .34em; background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 760; cursor: pointer
}
.mention-token.mention-me { background: color-mix(in srgb,var(--accent) 26%,transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)
}
.youtube-embed-card { width: min(640px,100%); margin-top: 9px; border: 1px solid var(--border); border-radius: 15px; overflow: hidden; background: var(--background-secondary); box-shadow: var(--shadow-soft)
}
.youtube-embed-card iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; background: #000
}
.youtube-embed-meta { height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 11px; color: var(--text-secondary); font-size: .65rem
}
.youtube-embed-meta i { color: #ff0033; font-size: .9rem
}
/* Consistent modern checkboxes. */
.modal-modern input[type="checkbox"],.server-settings-modal input[type="checkbox"],.account-security-modal input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; min-width: 20px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--background-primary); display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer; transition: .16s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.035)
}
.modal-modern input[type="checkbox"]::before,.server-settings-modal input[type="checkbox"]::before,.account-security-modal input[type="checkbox"]::before { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: .12s ease
}
.modal-modern input[type="checkbox"]:checked,.server-settings-modal input[type="checkbox"]:checked,.account-security-modal input[type="checkbox"]:checked { background: linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#a864ff)); border-color: transparent; box-shadow: 0 5px 14px color-mix(in srgb,var(--accent) 22%,transparent)
}
.modal-modern input[type="checkbox"]:checked::before,.server-settings-modal input[type="checkbox"]:checked::before,.account-security-modal input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1)
}
.modal-modern input[type="checkbox"]:focus-visible,.server-settings-modal input[type="checkbox"]:focus-visible,.account-security-modal input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--accent-soft)
}
.modal-modern input[type="checkbox"]:disabled,.server-settings-modal input[type="checkbox"]:disabled,.account-security-modal input[type="checkbox"]:disabled { opacity: .42; cursor: not-allowed
}
/* Permission toggles remain switches. */
.permission-row .form-check-input[type="checkbox"] { width: 44px; height: 25px; min-width: 44px; border-radius: 999px; display: block; padding: 0
}
.permission-row .form-check-input[type="checkbox"]::before { width: 19px; height: 19px; border: 0; border-radius: 50%; background: var(--text-tertiary); transform: none; margin: 0; position: absolute; left: 2px; top: 2px
}
.permission-row .form-check-input[type="checkbox"]:checked::before { transform: translateX(19px); background: #fff
}
#serverSettingsModal .modal-content { background: linear-gradient(150deg,var(--background-elevated),var(--background-primary)); border: 1px solid var(--border-strong)
}
.settings-card,.role-editor,.permission-group,.settings-member-row,.override-row,.audit-row { box-shadow: 0 8px 30px rgba(0,0,0,.08)
}
.role-check-pill { padding: 7px 10px; border-radius: 12px
}
.role-check-pill input { margin: 0 2px 0 0
}
.settings-member-row { align-items: start
}
.settings-member-identity { padding-top: 4px
}
#confirmModal { z-index: 2060!important
}
.member-profile-actions .btn { border-radius: 10px
}
.member-profile-actions #memberKickBtn { margin-left: auto
}
.mobile-scrim { position: fixed; inset: 0 0 62px 0; z-index: 75; background: rgba(3,7,18,.58); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: .2s ease
}
.mobile-scrim.show { opacity: 1; pointer-events: auto
}
.drawer-open { overscroll-behavior: none
}
@media(max-width:760px) {
  .channel-scroll { padding-bottom: 8px
}
  .channel-occupants { margin-left: 24px
}
  .channel-occupant { padding: 4px
}
  .channel-occupant-copy>small { display: none
}
  .social-sidebar { height: auto
}
  .dm-list { padding-bottom: 8px
}
  .user-panel { margin: 0 8px 8px; min-height: 58px
}
  .user-panel .icon-btn { width: 31px; height: 31px
}
  .user-panel-name { font-size: .72rem
}
  .user-panel small { font-size: .56rem
}
  .message-row { align-items: start
}
  .msg-body { min-width: 0
}
  .msg-content,.message-post-content { overflow-wrap: anywhere; word-break: break-word
}
  .youtube-embed-card { border-radius: 12px
}
  .youtube-embed-meta { height: 28px
}
  .member-role-badge { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
  .member-item { grid-template-columns: 38px minmax(0,1fr) auto; gap: 8px
}
  .member-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
  #serverSettingsModal .modal-content { height: calc(100dvh - 62px); margin-bottom: 62px
}
  .settings-section-head { position: static
}
  .settings-section-head h4 { font-size: 1rem
}
  .settings-section-head p { font-size: .66rem
}
  .permission-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px
}
  .permission-copy small { line-height: 1.35
}
  .settings-member-row { padding: 10px
}
  .role-checks { gap: 5px
}
  .role-check-pill { padding: 6px 8px; font-size: .62rem
}
  #confirmModal .modal-dialog { margin: 1rem auto; max-width: calc(100vw - 24px)
}
}
/* ===== VoiceHub v12: voice controls, group moderation and mobile polish ===== */
.voice-participant-list { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: auto
}
.voice-participant-row { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 40px; transition: .16s ease
}
.voice-participant-avatar { width: 32px; height: 32px; border-radius: var(--avatar-radius,50%); display: grid; place-items: center; position: relative; background: var(--surface-active); overflow: visible; font-size: .65rem; font-weight: 800
}
.voice-participant-avatar>img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--avatar-radius,50%)
}
.voice-speaking-ring { position: absolute; inset: -3px; border: 2px solid transparent; border-radius: 13px; pointer-events: none; transition: .14s ease
}
.voice-participant-row.speaking .voice-speaking-ring { border-color: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb,var(--success) 13%,transparent)
}
.voice-participant-copy { min-width: 0; display: flex; flex-direction: column
}
.voice-participant-copy b { font-size: .67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.voice-participant-copy small { font-size: .54rem; color: var(--text-tertiary); display: flex; align-items: center; gap: 5px
}
.voice-participant-controls { display: flex; align-items: center; gap: 6px
}
.voice-participant-controls>i { font-size: .7rem; color: var(--text-tertiary); width: 14px
}
.voice-participant-controls input[type="range"] { width: 72px; height: 3px; accent-color: var(--accent); cursor: pointer
}
.voice-participant-kick,.channel-occupant-disconnect,.member-inline-danger { border: 0; background: transparent; color: var(--text-tertiary); display: grid; place-items: center; border-radius: 8px; transition: .14s ease
}
.voice-participant-kick { width: 27px; height: 27px
}
.voice-participant-kick:hover,.channel-occupant-disconnect:hover,.member-inline-danger:hover { color: var(--danger)
}
.channel-occupant-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; min-width: 0
}
.channel-occupant-disconnect { width: 25px; height: 25px; margin-right: 2px; font-size: .62rem
}
.voice-occupants .channel-occupant-row:hover { border-radius: 9px
}
.member-item-actions { padding: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; overflow: hidden
}
.member-main-button { border: 0; background: transparent; color: inherit; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; padding: 8px 9px; text-align: left; min-width: 0
}
.member-inline-danger { width: 34px; height: 34px; align-self: center; margin-right: 7px
}
.conversation-leave-btn { width: calc(100% - 12px); margin: 12px 6px 4px; border: 1px solid color-mix(in srgb,var(--danger) 25%,var(--border)); background: color-mix(in srgb,var(--danger) 6%,transparent); color: color-mix(in srgb,var(--danger) 78%,var(--text-primary)); border-radius: 12px; padding: 9px 10px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .67rem; font-weight: 700
}
.picker-popover.picker-elevated,.picker-popover.sticker-mode { z-index: 2100; max-height: min(420px,55dvh); overflow: auto; box-shadow: 0 24px 70px rgba(0,0,0,.42)
}
.sticker-picker-item { position: relative; overflow: hidden
}
.sticker-picker-item img { background: linear-gradient(145deg,var(--surface-soft),transparent)
}
.sticker-picker-item.sticker-load-error img { opacity: .16
}
.sticker-picker-item.sticker-load-error:after { content: "Не загружен"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .54rem; color: var(--danger); pointer-events: none
}
.member-profile-actions { display: flex; flex-wrap: wrap; gap: 7px
}
.member-profile-actions .btn { flex: 1 1 auto; min-width: max-content
}
@media(max-width:1100px) {
  .voice-participant-controls input[type="range"] { width: 58px
}
}
@media(max-width:760px) {
  .vh-app { height: 100dvh; min-height: 100dvh; padding: 0; gap: 0
}
  .server-rail,.channel-sidebar,.chat-panel,.members-panel { border-radius: 0
}
  .chat-panel { min-height: 0
}
  .message-list { min-height: 0; overscroll-behavior: contain
}
  .composer-area { padding-bottom: max(8px,env(safe-area-inset-bottom))
}
  .channel-sidebar { height: 100dvh; max-height: 100dvh
}
  .channel-scroll { min-height: 0; overflow: auto
}
  .voice-dock { max-height: 44dvh
}
  .voice-participant-list { max-height: 160px
}
  .voice-participant-row { grid-template-columns: 30px minmax(0,1fr) auto
}
  .voice-participant-controls input[type="range"] { width: 58px
}
  .voice-participant-copy small { font-size: .51rem
}
  .members-panel { height: 100dvh; max-height: 100dvh
}
  .member-list { min-height: 0; overflow: auto
}
  .member-main-button { grid-template-columns: 34px minmax(0,1fr); padding: 8px
}
  .member-inline-danger { width: 32px; height: 32px
}
  .channel-occupants { margin-left: 21px; padding-left: 5px
}
  .channel-occupant-row { grid-template-columns: minmax(0,1fr) 26px
}
  .channel-occupant-disconnect { opacity: 1
}
  .channel-occupant-copy>span { font-size: .64rem
}
  .picker-popover { position: fixed!important; left: 10px!important; right: 10px!important; bottom: 76px!important; width: auto!important; max-width: none!important; max-height: 48dvh
}
  .member-profile-actions #memberKickBtn { margin-left: 0
}
  .member-profile-actions .btn { flex: 1 1 calc(50% - 4px)
}
  .modal { --bs-modal-margin: .5rem
}
  .modal-dialog { max-width: calc(100vw - 16px)
}
  .modal-modern { border-radius: 18px
}
  .modal-footer { gap: 7px
}
  .modal-footer>.btn { min-height: 40px
}
}
@media(hover:none) {
  .message-actions { opacity: 1; transform: none
}
  .channel-occupant-disconnect,.voice-participant-kick { opacity: 1
}
}
.v12-member-row { grid-template-columns: minmax(190px,.8fr) minmax(220px,1.5fr) auto; align-items: center
}
.settings-member-profile-btn { border: 0; background: transparent; color: inherit; text-align: left; border-radius: 11px; padding: 4px
}
.settings-member-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px
}
.settings-member-actions .btn { border-radius: 10px; white-space: nowrap
}
.settings-role-readonly { color: var(--text-tertiary); font-size: .64rem
}
@media(max-width:900px) {
  .v12-member-row { grid-template-columns: 1fr auto
}
  .v12-member-row .role-checks { grid-column: 1/-1; order: 3
}
  .settings-member-actions .btn span { display: none
}
  .settings-member-actions .btn { width: 36px; height: 36px; padding: 0; display: grid; place-items: center
}
}
/* ===== VoiceHub v13: cohesive chat UI + reliability states ===== */
.vh-app { grid-template-columns: 72px 286px minmax(0,1fr) 276px; background: radial-gradient(circle at 56% -18%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 34%),
  var(--background-primary)
}
.channel-sidebar,.members-panel { background: color-mix(in srgb,var(--background-secondary) 97%,transparent)
}
.chat-panel { background: var(--background-primary)
}
.chat-header { background: color-mix(in srgb,var(--background-primary) 89%,transparent); backdrop-filter: blur(22px); box-shadow: 0 1px 0 var(--border); border-bottom: 0
}
.chat-actions { gap: 6px
}
.header-action-btn,.message-search { height: 35px
}
.message-list { padding: 18px clamp(12px,2vw,30px) 14px
}
.message-row { width: min(100%,940px)
}
.message-actions { box-shadow: 0 8px 24px rgba(0,0,0,.2)
}
.msg-sticker { max-width: 176px; max-height: 176px
}
.composer-wrap { padding: 7px clamp(12px,2vw,30px) 13px; background: linear-gradient(180deg,transparent 0,var(--background-primary) 28%)
}
.composer-box { width: min(100%,940px); margin: 0 auto; border-color: var(--border); box-shadow: 0 10px 32px rgba(0,0,0,.12)
}
.composer-box:focus-within { border-color: color-mix(in srgb,var(--accent) 55%,var(--border)); box-shadow: 0 10px 32px rgba(0,0,0,.12),0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)
}
.composer-box textarea { min-height: 38px
}
.composer-btn.add-btn { border-color: transparent; background: var(--surface-soft)
}
.send-btn { box-shadow: none; background: var(--accent); transition: transform .12s ease,filter .12s ease,opacity .12s ease
}
.composer-wrap.is-sending .composer-box { border-color: color-mix(in srgb,var(--accent) 32%,var(--border))
}
.composer-wrap.is-sending textarea { opacity: .78
}
.composer-hint { width: min(100%,940px); margin: 0 auto
}
.composer-status { min-height: 14px; color: var(--accent); font-weight: 650
}
.reply-bar,.voice-record-bar { width: min(100%,940px); margin-left: auto; margin-right: auto
}
.voice-dock { box-shadow: none
}
.voice-controls { grid-template-columns: repeat(3,minmax(0,1fr)) 38px
}
.voice-controls button { min-width: 0; padding: 0 7px
}
.voice-controls button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.voice-controls .danger { padding: 0
}
.voice-participant-list { max-height: 200px
}
.members-overview { margin: 9px; border-radius: 13px
}
.picker-popover { right: 16px; bottom: 76px; border-radius: 16px; padding: 9px; box-shadow: 0 18px 55px rgba(0,0,0,.36)
}
.picker-popover.sticker-mode { grid-template-columns: repeat(4,minmax(0,1fr)); width: min(410px,calc(100vw - 34px)); gap: 7px
}
.picker-popover .sticker-picker-item { min-height: 92px; border: 1px solid transparent; background: var(--surface-soft); border-radius: 12px; transition: .12s ease
}
.picker-popover .sticker-picker-item:disabled { opacity: .5; transform: none
}
.picker-popover .sticker-picker-item img { width: 60px; height: 60px
}
.picker-error i { color: var(--danger)
}
.appearance-modal .modal-body { padding-top: 8px
}
.appearance-preview { --appearance-wallpaper: none; position: relative; min-height: 92px; margin-bottom: 10px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg,var(--background-secondary),var(--background-elevated))
}
.appearance-preview:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb,var(--background-primary) 56%,transparent),color-mix(in srgb,var(--background-primary) 72%,transparent)),var(--appearance-wallpaper); background-size: cover; background-position: center; opacity: 0; transition: .18s
}
.appearance-preview.has-preview:before { opacity: 1
}
.appearance-preview>* { position: relative
}
.appearance-preview-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb,var(--accent) 16%,var(--background-elevated)); color: var(--accent); font-size: 1.05rem
}
.appearance-preview b,.appearance-preview span { display: block
}
.appearance-preview b { font-size: .78rem
}
.appearance-preview span { margin-top: 3px; color: var(--text-secondary); font-size: .63rem
}
.appearance-choice { padding: 12px 2px
}
.appearance-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px
}
.appearance-actions .btn { white-space: nowrap; border-radius: 9px
}
@media(max-width:1180px) {
  .vh-app { grid-template-columns: 72px 276px minmax(0,1fr)
}
  .members-panel { display: none
}
  .message-search { width: 150px
}
  .message-search:focus-within { width: 190px
}
}
@media(max-width:900px) and (min-width:761px) {
  .vh-app { grid-template-columns: 68px 244px minmax(0,1fr)
}
  .server-rail { padding-left: 8px; padding-right: 8px
}
  .server-logo,.server-action,.server-chip { width: 48px; height: 48px
}
  .channel-sidebar { font-size: .95em
}
  .chat-actions .message-search { display: none
}
  .status-badge { display: none
}
  .voice-controls button span { display: none
}
}
@media(max-width:760px) {
  .vh-app { display: block
}
  .chat-panel { grid-template-rows: 60px minmax(0,1fr) auto
}
  .chat-header { height: 60px; padding: 0 8px
}
  .message-list { padding: 9px 5px 7px
}
  .message-row { padding: 7px 5px; gap: 8px
}
  .msg-body { padding-right: 0
}
  .msg-avatar { width: 32px; height: 32px
}
  .composer-wrap { padding: 5px 6px max(7px,env(safe-area-inset-bottom))
}
  .composer-box { border-radius: 13px; padding: 5px; min-height: 48px
}
  .composer-box textarea { padding: 8px 6px; min-height: 36px
}
  .composer-btn,.send-btn { width: 36px; height: 36px
}
  .composer-hint { display: none
}
  .picker-popover.sticker-mode { grid-template-columns: repeat(3,minmax(0,1fr))
}
  .picker-popover .sticker-picker-item { min-height: 82px
}
  .picker-popover .sticker-picker-item img { width: 52px; height: 52px
}
  .appearance-choice { grid-template-columns: 38px minmax(0,1fr)
}
  .appearance-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap
}
  .voice-controls { grid-template-columns: repeat(3,1fr) 38px
}
  .voice-controls button span { display: none
}
}
@media(max-width:420px) {
  .composer-tools { gap: 0
}
  .composer-btn#emojiBtn { display: none
}
  .picker-popover.sticker-mode { grid-template-columns: repeat(2,minmax(0,1fr))
}
  .appearance-preview { min-height: 82px; padding: 14px
}
}
@media(max-width:420px) {
  .chat-actions #chatAppearanceBtn:not(.d-none) { display: grid!important
}
}
.msg-missing-media { display: flex; align-items: center; gap: 8px; margin-top: 8px; max-width: 520px; padding: 9px 11px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-soft); color: var(--text-tertiary); font-size: .7rem
}
.msg-missing-media i { font-size: .92rem; color: var(--text-tertiary)
}
/* ===== VoiceHub v14: polished chat surfaces, compact DMs, post discussions ===== */
.vh-app { grid-template-columns: 70px 300px minmax(0,1fr) 288px
}
.channel-sidebar { border-right: 1px solid color-mix(in srgb,var(--border) 85%,transparent); box-shadow: 8px 0 30px rgba(0,0,0,.035)
}
.server-showcase { background: linear-gradient(145deg,color-mix(in srgb,var(--background-elevated) 94%,var(--accent) 6%),var(--background-elevated))
}
.sidebar-toolbar-title small { margin-top: 2px
}
.social-sidebar { padding: 6px 12px 12px
}
.social-quick-actions { gap: 4px; padding-bottom: 14px
}
.social-nav-item { min-height: 40px; border-radius: 11px; padding: 0 10px
}
.social-section-head { height: 28px; padding: 0 8px
}
.dm-list { padding: 0 0 8px
}
.dm-item { min-height: 52px; height: auto; align-self: start; border-radius: 12px; padding: 7px 8px; grid-template-columns: 36px minmax(0,1fr) auto
}
.dm-item.active { background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 6%,transparent)); border-color: color-mix(in srgb,var(--accent) 28%,var(--border)); box-shadow: inset 3px 0 0 color-mix(in srgb,var(--accent) 78%,transparent)
}
.dm-avatar { width: 36px; height: 36px; border-radius: var(--avatar-radius,50%)
}
.dm-copy b { font-size: .73rem; font-weight: 760
}
.dm-copy small { font-size: .59rem; line-height: 1.35
}
.dm-unread { width: 7px; height: 7px
}
.user-panel { margin: 8px 11px 10px; padding: 7px 8px; min-height: 58px; border-radius: 15px; border-color: var(--border); background: color-mix(in srgb,var(--background-elevated) 92%,transparent); box-shadow: 0 8px 24px rgba(0,0,0,.06)
}
.user-panel .icon-btn { width: 31px; height: 31px; border-radius: 9px
}
.user-panel-name { font-weight: 760
}
.chat-panel { background: linear-gradient(180deg,color-mix(in srgb,var(--background-primary) 98%,var(--accent) 2%),var(--background-primary))
}
.chat-header { border-bottom: 1px solid color-mix(in srgb,var(--border) 86%,transparent); background: color-mix(in srgb,var(--background-primary) 92%,transparent)
}
.channel-heading-icon { border: 1px solid var(--border); background: var(--surface-soft)
}
.channel-title { font-weight: 790
}
.channel-description { font-size: .61rem
}
.message-list { padding: 22px clamp(16px,2.5vw,42px) 18px
}
.message-row { width: min(100%,980px); margin: 1px auto; border: 1px solid transparent; gap: 11px; transition: background .14s ease,border-color .14s ease,box-shadow .14s ease
}
.msg-avatar { width: 39px; height: 39px; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--border) 75%,transparent)
}
.msg-head { min-height: 20px; gap: 7px
}
.msg-user { font-weight: 780; letter-spacing: -.01em
}
.msg-time { font-size: .57rem; color: var(--text-tertiary)
}
.msg-edited { font-size: .54rem
}
.msg-content { color: var(--text-primary); max-width: 790px
}
.msg-body { padding-right: 108px
}
.msg-reply-preview { margin: 2px 0 5px; border-left: 2px solid color-mix(in srgb,var(--accent) 65%,transparent); background: transparent; padding: 3px 8px; border-radius: 0 7px 7px 0
}
.message-actions { top: 5px; right: 8px; border: 1px solid var(--border); background: var(--background-elevated); box-shadow: 0 10px 28px rgba(0,0,0,.16)
}
.message-actions button { width: 31px; height: 29px
}
.reaction-btn { min-width: 31px; padding: 0 8px; background: var(--surface-soft); border-color: var(--border)
}
.reaction-btn.active { background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 35%,var(--border)); color: var(--accent)
}
.reaction-btn.is-pending { opacity: .55
}
.composer-wrap { padding: 9px clamp(16px,2.5vw,42px) 15px
}
.composer-box { width: min(100%,980px); background: color-mix(in srgb,var(--background-elevated) 95%,transparent); border: 1px solid color-mix(in srgb,var(--border-strong) 75%,transparent); box-shadow: 0 12px 35px rgba(0,0,0,.09)
}
.composer-box textarea { line-height: 1.4
}
.send-btn { background: linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#4c7cff 28%)); box-shadow: 0 7px 18px color-mix(in srgb,var(--accent) 20%,transparent)
}
.composer-hint { width: min(100%,980px); padding: 6px 6px 0
}
.composer-status { font-size: .58rem
}
.composer-wrap.is-sending .composer-box { box-shadow: 0 12px 35px rgba(0,0,0,.09),0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)
}
.reply-bar,.voice-record-bar { width: min(100%,980px)
}
/* posts */
.message-post { position: relative; margin: 5px 0 3px; border: 1px solid color-mix(in srgb,var(--border-strong) 92%,transparent); background: linear-gradient(150deg,color-mix(in srgb,var(--background-elevated) 96%,var(--accent) 4%),var(--background-elevated)); box-shadow: 0 12px 34px rgba(0,0,0,.07); overflow: hidden
}
.message-post:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 28%,transparent))
}
.post-eyebrow { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: .58rem; font-weight: 820; letter-spacing: .08em; text-transform: uppercase
}
.post-eyebrow i { font-size: .72rem
}
.message-post h4 { margin: 0; line-height: 1.3; letter-spacing: -.02em; font-weight: 800; color: var(--text-primary)
}
.message-post-content { font-size: .82rem; line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap
}
.post-footer { display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--border)
}
.post-action { border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font-size: .68rem; transition: .12s
}
.post-action:hover { color: var(--text-primary)
}
.post-action i { font-size: .8rem
}
.post-action span { font-weight: 800; color: var(--text-primary)
}
.post-action small { font-size: .6rem
}
.post-action.active { background: color-mix(in srgb,var(--danger) 10%,transparent); border-color: color-mix(in srgb,var(--danger) 28%,var(--border)); color: var(--danger)
}
.post-action.active span { color: var(--danger)
}
.post-comments-panel { border-top: 1px solid var(--border)
}
.post-comments-list { display: grid; gap: 4px
}
.post-comments-loading,.post-comments-error,.post-comments-empty { padding: 9px 3px; color: var(--text-tertiary); font-size: .64rem
}
.post-comments-loading { display: flex; align-items: center; gap: 7px
}
.post-comments-error { color: var(--danger)
}
.post-comment { display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 8px
}
.post-comment-avatar { width: 29px; height: 29px; border-radius: var(--avatar-radius,50%); display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); font-size: .56rem; font-weight: 800
}
.post-comment-avatar img { width: 100%; height: 100%; object-fit: cover
}
.post-comment-body { min-width: 0
}
.post-comment-head { display: flex; align-items: baseline; gap: 6px
}
.post-comment-head b { font-size: .67rem
}
.post-comment-head span { font-size: .52rem; color: var(--text-tertiary)
}
.post-comment-text { margin-top: 2px; font-size: .7rem; line-height: 1.45; white-space: pre-wrap; color: var(--text-secondary)
}
.post-comment-text.muted { font-style: italic; color: var(--text-tertiary)
}
.post-comment-reactions { display: flex; align-items: center; gap: 4px; margin-top: 5px; min-height: 23px
}
.post-comment-reaction,.post-comment-reaction-add,.post-comment-delete { height: 23px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); color: var(--text-secondary); font-size: .58rem; padding: 0 7px
}
.post-comment-reaction.active { background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 30%,var(--border)); color: var(--accent)
}
.post-comment-reaction-add,.post-comment-delete { width: 25px; padding: 0; display: grid; place-items: center; background: transparent
}
.post-comment-delete { color: var(--text-tertiary)
}
.post-comment-delete:hover { color: var(--danger)
}
.post-comment-form { display: grid; grid-template-columns: minmax(0,1fr) 32px; align-items: end; gap: 7px; margin-top: 9px; padding: 7px; border: 1px solid var(--border); background: var(--surface-soft)
}
.post-comment-form textarea { resize: none; border: 0; outline: 0; background: transparent; color: var(--text-primary); min-height: 30px; max-height: 100px; padding: 6px 7px; font-size: .69rem
}
.post-comment-form textarea::placeholder { color: var(--text-tertiary)
}
.post-comment-form > button[type=submit] { width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--accent); color: #fff
}
.post-comment-form > button[type=submit]:disabled { opacity: .55
}
/* DM/member panel polish */
.members-panel { border-left: 1px solid color-mix(in srgb,var(--border) 88%,transparent)
}
.members-overview { background: var(--surface-soft); box-shadow: none
}
.member-item { border: 1px solid transparent
}
.member-role-badge { font-size: .52rem; padding: 3px 6px
}
@media(max-width:1180px) {
  .vh-app { grid-template-columns: 70px 288px minmax(0,1fr)
}
}
@media(max-width:900px) and (min-width:761px) {
  .vh-app { grid-template-columns: 66px 258px minmax(0,1fr)
}
}
@media(max-width:760px) {
  .message-row { margin: 0
}
  .message-post { padding: 14px 14px 12px; border-radius: 14px
}
  .post-action small { display: none
}
  .post-action { padding: 0 9px
}
  .chat-header { padding: 0 9px
}
  .message-list { padding: 10px 6px 8px
}
  .composer-wrap { padding: 6px 7px max(8px,env(safe-area-inset-bottom))
}
  .dm-list { align-content: start
}
}
/* v14.1 — interaction and density pass */
.social-sidebar { gap: 0
}
.dm-search { height: 38px; margin: 0 3px 9px; padding: 0 9px; display: grid; grid-template-columns: 18px minmax(0,1fr) 24px; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 11px; background: color-mix(in srgb,var(--background-primary) 62%,transparent); color: var(--text-tertiary); transition: border-color .14s,background .14s,box-shadow .14s
}
.dm-search:focus-within { border-color: color-mix(in srgb,var(--accent) 40%,var(--border)); background: var(--background-elevated); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)
}
.dm-search>i { font-size: .72rem
}
.dm-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: .68rem
}
.dm-search input::placeholder { color: var(--text-tertiary)
}
.dm-search-clear { width: 24px; height: 24px; border: 0; border-radius: 7px; display: grid; place-items: center; background: transparent; color: var(--text-tertiary); font-size: .64rem
}
.dm-search-clear:hover { color: var(--text-primary)
}
.dm-list { display: grid; grid-auto-rows: min-content; align-content: start; gap: 3px
}
.dm-item { position: relative; width: 100%; border: 1px solid transparent; background: transparent; color: inherit; text-align: left; cursor: pointer
}
.dm-avatar-wrap { position: relative; width: 36px; height: 36px; display: block
}
.dm-avatar-wrap>.presence { right: -2px; bottom: -2px; border-color: var(--background-secondary)
}
.dm-item-top { min-width: 0; display: flex; align-items: center; gap: 7px
}
.dm-item-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.dm-item-time { flex: 0 0 auto; color: var(--text-tertiary); font-size: .49rem; font-variant-numeric: tabular-nums
}
.dm-item-preview { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.dm-item-tail { width: 16px; display: grid; place-items: center
}
.dm-kind-icon { font-size: .58rem; color: var(--text-tertiary)
}
.dm-item.has-unread .dm-item-name { color: var(--text-primary); font-weight: 830
}
.dm-item.has-unread .dm-item-preview { color: var(--text-secondary)
}
.dm-item.has-unread .dm-item-time { color: var(--accent)
}
.dm-empty { margin: 10px 4px; padding: 22px 14px!important; border: 1px dashed var(--border); border-radius: 13px; background: transparent!important; display: flex!important; flex-direction: column; align-items: center; text-align: center; gap: 5px!important
}
.dm-empty i { font-size: 1.05rem; color: var(--accent)
}
.dm-empty b { font-size: .67rem; color: var(--text-primary)
}
.dm-empty span { font-size: .56rem; line-height: 1.4; color: var(--text-tertiary)
}
.members-panel { display: flex; flex-direction: column; overflow: hidden
}
.members-topbar { flex: 0 0 auto
}
.members-overview { flex: 0 0 auto
}
.members-section-label { flex: 0 0 auto
}
.member-list { overflow-y: auto; min-height: 0
}
.member-group-title { padding: 0 7px; display: flex; align-items: center; justify-content: space-between; color: var(--text-tertiary); font-size: .54rem; font-weight: 850; letter-spacing: .08em
}
.member-group-title b { min-width: 21px; height: 19px; padding: 0 5px; border: 1px solid var(--border); border-radius: 999px; display: grid; place-items: center; background: var(--surface-soft); font-size: .49rem; letter-spacing: 0
}
.member-item { margin: 1px 0
}
.member-item.member-item-actions { padding: 0
}
.member-item.is-offline { opacity: .58
}
.member-item.is-offline:hover { opacity: .86
}
.member-main-button { min-height: 46px
}
.members-footer-note { flex: 0 0 auto; margin-top: auto; border-top: 1px solid var(--border); background: color-mix(in srgb,var(--background-secondary) 97%,transparent)
}
.message-row { outline: none
}
.message-row:focus-visible { border-color: color-mix(in srgb,var(--accent) 36%,var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)
}
.message-row.own-message .msg-avatar { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,var(--border)),0 0 0 3px color-mix(in srgb,var(--accent) 5%,transparent)
}
.message-row.own-message .msg-user { color: color-mix(in srgb,var(--accent) 78%,var(--text-primary))
}
.message-actions { opacity: 0; transform: translateY(-2px); pointer-events: none; transition: opacity .12s ease,transform .12s ease
}
.message-row:hover .message-actions,.message-row:focus-within .message-actions { opacity: 1; transform: none; pointer-events: auto
}
.message-actions button { border: 0; background: transparent; color: var(--text-tertiary)
}
.message-actions button:hover { color: var(--text-primary)
}
.message-actions button.danger:hover { color: var(--danger)
}
.composer-box { transition: border-color .14s,box-shadow .14s,transform .14s
}
.composer-btn,.send-btn { transition: background .12s,color .12s,transform .12s,filter .12s
}
.composer-hint>span:first-child { display: flex; align-items: center; gap: 2px
}
.composer-hint>span:first-child i { width: 14px; text-align: center
}
.voice-dock { padding: 0!important; border-color: color-mix(in srgb,var(--success) 22%,var(--border)); background: linear-gradient(160deg,color-mix(in srgb,var(--success) 7%,var(--background-elevated)),var(--background-elevated)); box-shadow: 0 10px 30px rgba(0,0,0,.10)!important
}
.voice-dock-badges { display: flex; align-items: center; gap: 5px
}
.voice-participant-count { min-width: 24px; height: 20px; padding: 0 6px; border: 1px solid color-mix(in srgb,var(--success) 24%,var(--border)); border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb,var(--success) 8%,transparent); color: var(--success); font-size: .53rem; font-weight: 850
}
.voice-participant-list { padding: 4px; border: 1px solid color-mix(in srgb,var(--border) 80%,transparent); border-radius: 11px; background: color-mix(in srgb,var(--background-primary) 38%,transparent)
}
.voice-participant-row { border-radius: 9px
}
.voice-controls button { border-radius: 9px; background: color-mix(in srgb,var(--surface-soft) 88%,transparent)
}
.voice-controls button.active { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--danger) 18%,transparent)
}
html[data-app-theme="light"] .dm-search { background: rgba(255,255,255,.62)
}
html[data-app-theme="light"] .voice-participant-list { background: rgba(255,255,255,.56)
}
@media(max-width:760px) {
  .dm-search { height: 40px; margin-bottom: 8px
}
  .message-actions { opacity: 1; transform: none; pointer-events: auto
}
  .member-list { padding-left: 7px; padding-right: 7px
}
  .voice-dock-badges { gap: 3px
}
}
@media(hover:none) {
  .message-actions { opacity: 1; transform: none; pointer-events: auto
}
}
/* v14.2 — conversation rhythm, context actions and composer menu */
.message-day-separator { position: relative; width: min(100%,980px); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: .54rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; user-select: none
}
.message-day-separator:before { content: ""; position: absolute; top: 50%; height: 1px; background: color-mix(in srgb,var(--border) 82%,transparent)
}
.message-day-separator span { position: relative; z-index: 1; padding: 4px 9px; border: 1px solid color-mix(in srgb,var(--border) 80%,transparent); border-radius: 999px; background: color-mix(in srgb,var(--background-primary) 94%,transparent); backdrop-filter: blur(8px)
}
.message-row.group-start { margin-top: 4px
}
.message-row.grouped-message { padding-top: 3px; padding-bottom: 3px; min-height: 29px
}
.message-row.grouped-message .msg-avatar { visibility: hidden; pointer-events: none
}
.message-row.grouped-message .msg-head { display: none
}
.message-row.grouped-message .msg-content { margin-top: 0
}
.message-row.grouped-message:before { content: attr(data-time); position: absolute; left: 7px; top: 50%; width: 42px; transform: translateY(-50%); text-align: center; color: var(--text-tertiary); font-size: .48rem; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .12s
}
.message-row.grouped-message:hover:before,.message-row.grouped-message:focus-within:before { opacity: .72
}
.message-row.grouped-message .msg-reply-preview { margin-top: 1px
}
.msg-avatar.msg-profile-trigger { border: 0; padding: 0; cursor: pointer
}
.msg-user.msg-profile-trigger { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer
}
.msg-user.msg-profile-trigger:hover { text-decoration: none
}
.post-comment-avatar.msg-profile-trigger { border: 0; padding: 0; cursor: pointer
}
.message-actions { border-radius: 11px!important; padding: 2px; gap: 1px; overflow: visible!important
}
.message-actions button { border-radius: 8px!important
}
.message-row.grouped-message .message-actions { top: -11px
}
.message-context-menu { position: fixed; z-index: 2300; width: 218px; padding: 6px; border: 1px solid var(--border-strong); border-radius: 14px; background: color-mix(in srgb,var(--background-elevated) 97%,transparent); box-shadow: 0 22px 70px rgba(0,0,0,.38); backdrop-filter: blur(18px); animation: contextIn .1s ease-out
}
.message-context-menu.d-none { display: none!important
}
@keyframes contextIn {
  from { opacity: 0; transform: translateY(-3px) scale(.985)
}
  to { opacity: 1; transform: none
}
}
.message-context-item { width: 100%; min-height: 37px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary); display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: center; text-align: left; font-size: .68rem
}
.message-context-item i { width: 25px; color: var(--text-tertiary); font-size: .78rem
}
.message-context-item:focus-visible { outline: 0; background: var(--surface-hover); color: var(--text-primary)
}
.message-context-item:hover { outline: 0; color: var(--text-primary)
}
.message-context-item:hover i { color: var(--accent)
}
.message-context-item.danger { color: color-mix(in srgb,var(--danger) 76%,var(--text-secondary))
}
.message-context-item.danger i { color: var(--danger)
}
.message-context-item.danger:hover { color: var(--danger)
}
.message-context-item:disabled { opacity: .4; pointer-events: none
}
.composer-btn.add-btn[aria-expanded="true"] { background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 30%,var(--border)); color: var(--accent)
}
.member-profile-card { border-radius: 24px!important
}
.member-profile-cover { height: 104px; background: radial-gradient(circle at 18% 30%,rgba(255,255,255,.17),transparent 28%),linear-gradient(125deg,color-mix(in srgb,var(--accent) 82%,#3e56a8),color-mix(in srgb,var(--accent) 34%,#338fd8));
}
.member-profile-avatar { width: 88px; height: 88px; border-radius: var(--avatar-radius,50%); margin: -44px 0 0 20px; box-shadow: 0 10px 24px rgba(0,0,0,.18)
}
.member-profile-content { padding: 11px 20px 21px
}
.member-profile-content h4 { font-size: 1.12rem; letter-spacing: -.025em
}
.member-profile-status { margin-top: 11px; background: color-mix(in srgb,var(--success) 8%,var(--surface-soft)); border-color: color-mix(in srgb,var(--success) 18%,var(--border))
}
.member-profile-bio { padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); min-height: 42px
}
.member-profile-actions { padding-top: 3px
}
.member-profile-actions .btn { min-height: 36px
}
.post-comment-form:focus-within { border-color: var(--border-strong); box-shadow: none
}
.post-comment-form textarea { overflow-y: auto; transition: height .08s
}
.post-comment-head b { letter-spacing: -.01em
}
html[data-app-theme="light"] .message-day-separator span { background: rgba(250,251,255,.92)
}
@media(max-width:760px) {
  .message-day-separator { height: 27px; margin: 7px auto 4px
}
  .message-row.grouped-message:before { left: 2px; width: 32px; font-size: .44rem
}
  .message-context-menu { width: min(230px,calc(100vw - 16px))
}
  .message-row.grouped-message .message-actions { top: auto
}
  .member-profile-cover { height: 92px
}
  .member-profile-avatar { width: 80px; height: 80px; border-radius: var(--avatar-radius,50%); margin-top: -40px
}
}
@media(hover:none) {
  .message-row.grouped-message:before { display: none
}
  .message-row.grouped-message .msg-avatar { visibility: hidden
}
}
.message-row.context-open { background: color-mix(in srgb,var(--surface-hover) 86%,transparent); border-color: color-mix(in srgb,var(--accent) 18%,var(--border))
}
.message-row.context-open .message-actions { opacity: 1; transform: none; pointer-events: auto
}
.message-day-separator.search-hidden { display: none
}
@media(max-width:760px) {
  .message-actions button:not(:last-child) { display: none
}
  .message-actions { display: flex!important; position: absolute!important; right: 5px; top: 3px; margin: 0!important; background: transparent; border-color: transparent; box-shadow: none
}
  .message-actions button:last-child { background: color-mix(in srgb,var(--background-elevated) 74%,transparent); border: 1px solid color-mix(in srgb,var(--border) 72%,transparent)!important
}
  .message-row.grouped-message .message-actions { top: 1px
}
  .message-row { padding-right: 42px
}
  .message-row.grouped-message { padding-right: 42px
}
}
/* v14.3 — unified application shell, clearer hierarchy and member discovery */
.vh-app { grid-template-columns: 72px 282px minmax(0,1fr) 276px
}
.server-rail { padding: 12px 9px; gap: 8px; background: color-mix(in srgb,var(--background-primary) 94%,#000 6%)
}
.server-logo,.server-action,.server-chip { width: 50px; height: 50px; border-radius: 16px
}
.server-chip { border-radius: var(--avatar-radius,50%)
}
.server-list { gap: 8px
}
.server-chip.active { border-radius: var(--avatar-radius,50%)
}
.server-chip.active:before { left: -10px; height: 22px
}
.channel-sidebar { background: color-mix(in srgb,var(--background-secondary) 97%,transparent)
}
.server-showcase { margin: 10px 10px 4px; padding: 12px 13px; border-radius: 16px; box-shadow: none; background: linear-gradient(150deg,color-mix(in srgb,var(--background-elevated) 97%,var(--accent) 3%),var(--background-elevated))
}
.server-showcase-body { margin-top: 12px
}
.server-mini-icon { width: 34px; height: 34px; border-radius: 10px
}
.server-title { font-size: .86rem
}
.server-subtitle { font-size: .62rem
}
.workspace-label { font-size: .54rem
}
.sidebar-toolbar { padding: 9px 15px 5px
}
.sidebar-toolbar-title span { font-size: .74rem
}
.sidebar-toolbar-title small { font-size: .58rem
}
.channel-scroll { padding: 4px 8px 10px
}
.channel-group { margin-bottom: 13px
}
.channel-group-head { padding: 7px 8px 5px; font-size: .59rem
}
.channel-stack { gap: 2px
}
.channel-entry { border-radius: 12px
}
.channel-item { min-height: 39px; padding: 6px 8px; border-radius: 10px; gap: 8px
}
.channel-item i { width: 23px; height: 23px; border-radius: 7px
}
.channel-item .channel-label { font-size: .76rem; font-weight: 650
}
.channel-item.active { box-shadow: inset 2px 0 0 color-mix(in srgb,var(--accent) 80%,transparent)
}
.channel-live-count { margin-left: auto; min-width: 25px; height: 21px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--text-tertiary); font-size: .5rem; font-weight: 800; background: var(--surface-soft); border: 1px solid transparent
}
.channel-live-count i { width: auto; height: auto; background: none!important; font-size: .5rem
}
.channel-live-count.has-users { color: var(--success); border-color: color-mix(in srgb,var(--success) 18%,transparent); background: color-mix(in srgb,var(--success) 7%,transparent)
}
.channel-live-count.text-active { color: var(--text-tertiary); background: transparent; padding: 0 3px
}
.channel-live-count.text-active i { font-size: .32rem; color: var(--success)
}
.channel-item.voice .join-pill { margin-left: 3px; flex: 0 0 auto
}
.channel-item.voice .channel-live-count+.join-pill { display: none
}
.channel-item.voice:hover .channel-live-count { display: none
}
.channel-item.voice:hover .join-pill { display: inline-flex; align-items: center
}
.channel-occupants { margin: 1px 4px 5px 31px; padding-left: 7px; border-left: 1px solid color-mix(in srgb,var(--border) 82%,transparent)
}
.chat-panel { grid-template-rows: 68px minmax(0,1fr) auto
}
.chat-header { height: 68px; padding: 0 15px 0 18px; background: color-mix(in srgb,var(--background-primary) 90%,transparent); box-shadow: 0 1px 0 color-mix(in srgb,var(--border) 72%,transparent)
}
.channel-heading { gap: 10px
}
.channel-heading-icon { width: 38px; height: 38px; border-radius: 12px
}
.channel-title { font-size: .9rem
}
.channel-private-badge { padding: 3px 7px; border: 1px solid color-mix(in srgb,var(--accent) 16%,transparent); font-size: .51rem
}
.channel-private-badge[data-tone="success"] { color: var(--success); background: color-mix(in srgb,var(--success) 9%,transparent); border-color: color-mix(in srgb,var(--success) 18%,transparent)
}
.channel-private-badge[data-tone="accent"] { color: var(--accent); background: var(--accent-soft)
}
.channel-meta { font-size: .61rem
}
.message-search { height: 34px; width: 174px; border-radius: 10px
}
.message-search:focus-within { width: 214px
}
.header-action-btn { width: 34px; height: 34px; border-radius: 10px
}
.status-badge { padding: 6px 8px; font-size: .57rem
}
.message-list { padding: 20px clamp(12px,2.25vw,31px) 16px; scrollbar-gutter: stable
}
.message-row { border-radius: 10px; padding: 7px 9px; transition: background .1s,border-color .1s
}
.message-row.context-open { background: var(--surface-hover)
}
.msg-avatar { border-radius: var(--avatar-radius,50%)
}
.msg-user { font-size: .77rem
}
.msg-content { font-size: .81rem; line-height: 1.5
}
.reaction-bar { gap: 4px; margin-top: 6px
}
.reaction-btn { height: 25px; border-radius: 8px; background: color-mix(in srgb,var(--surface-soft) 80%,transparent)
}
.message-day-separator { height: 28px; margin: 8px auto 4px
}
.message-day-separator:before { left: 4px; right: 4px
}
.message-day-separator span { font-size: .5rem; background: color-mix(in srgb,var(--background-primary) 96%,transparent)
}
.welcome-empty-v143 { max-width: 560px; min-height: 360px; padding: 32px 26px
}
.welcome-empty-v143 .welcome-icon { width: 68px; height: 68px; border-radius: 21px; font-size: 1.5rem; box-shadow: 0 16px 45px color-mix(in srgb,var(--accent) 10%,transparent)
}
.welcome-empty-v143 h3 { font-size: 1.18rem; margin-top: .35rem
}
.welcome-empty-v143 p { max-width: 480px; font-size: .77rem
}
.welcome-feature-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 15px
}
.welcome-feature-row span { height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .58rem; font-weight: 700
}
.welcome-feature-row i { color: var(--accent); font-size: .68rem
}
.composer-wrap { padding: 7px clamp(12px,2.25vw,31px) 14px
}
.composer-box { min-height: 52px; border-radius: 15px; padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.1)
}
.composer-box:focus-within { transform: none; box-shadow: 0 10px 28px rgba(0,0,0,.1),0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)
}
.composer-box textarea { font-size: .79rem; padding: 8px 9px
}
.composer-btn,.send-btn { width: 37px; height: 37px; border-radius: 10px
}
.composer-hint { padding-top: 5px; font-size: .54rem
}
.message-post { max-width: 800px; padding: 17px 18px 13px; border-radius: 15px; background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 5%,var(--background-elevated)),var(--background-elevated)); box-shadow: 0 8px 28px rgba(0,0,0,.06)
}
.message-post:before { width: 2px
}
.post-eyebrow { margin-bottom: 8px
}
.post-eyebrow em { margin-left: auto; font-style: normal; color: var(--text-tertiary); font-size: .5rem; font-weight: 700; letter-spacing: .02em; text-transform: none
}
.message-post h4 { font-size: 1.06rem
}
.message-post-content { margin-top: 8px
}
.post-footer { margin-top: 13px; padding-top: 10px
}
.post-action { height: 31px; border-radius: 9px
}
.post-comments-panel { margin-top: 11px; padding-top: 11px
}
.post-comment { padding: 7px; border-radius: 9px
}
.post-comment-form { border-radius: 11px; background: color-mix(in srgb,var(--surface-soft) 74%,transparent)
}
.members-panel { background: color-mix(in srgb,var(--background-secondary) 97%,transparent)
}
.members-topbar { height: 68px; padding: 0 14px
}
.members-overview { padding: 10px 9px 7px; gap: 6px
}
.overview-stat { border-radius: 11px; padding: 8px
}
.member-search { height: 36px; margin: 4px 9px 6px; padding: 0 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); transition: .12s
}
.member-search:focus-within { border-color: color-mix(in srgb,var(--accent) 34%,var(--border)); background: var(--background-elevated); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 6%,transparent)
}
.member-search>i { font-size: .68rem
}
.member-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: .65rem
}
.member-search input::placeholder { color: var(--text-tertiary)
}
.member-search-clear { width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--text-tertiary); display: grid; place-items: center; font-size: .62rem
}
.member-search-clear:hover { color: var(--text-primary)
}
.members-section-label { padding: 6px 14px 3px
}
.member-list { padding: 0 8px 10px
}
.member-group-title { height: 26px; margin-top: 5px
}
.member-item { min-height: 47px; padding: 6px 7px; border-radius: 10px
}
.member-avatar { width: 34px; height: 34px; border-radius: var(--avatar-radius,50%)
}
.member-meta .member-name { font-size: .71rem
}
.member-role-badge { max-width: 72px
}
.member-search-empty { min-height: 190px; padding: 26px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-tertiary)
}
.member-search-empty i { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 12px; display: grid; place-items: center; background: var(--surface-soft); color: var(--accent); font-size: .85rem; margin-bottom: 9px
}
.member-search-empty b { color: var(--text-secondary); font-size: .7rem
}
.member-search-empty span { margin-top: 3px; font-size: .56rem
}
.voice-dock { margin: 0 8px 8px!important; border-radius: 14px!important
}
.voice-dock-head { padding: 9px 9px 7px
}
.voice-state-icon { width: 32px; height: 32px; border-radius: 10px
}
.voice-state b { font-size: .63rem
}
.voice-state span { font-size: .66rem
}
.voice-participant-list { margin: 0 6px 6px
}
.voice-participant-row { padding: 5px 6px
}
.voice-controls { grid-template-columns: repeat(3,minmax(0,1fr)) 36px!important; gap: 5px!important; padding: 0 6px 7px!important; margin-top: 0!important
}
.voice-controls button { height: 35px!important; font-size: .6rem!important
}
.voice-controls .danger { width: 36px
}
html[data-app-theme="light"] .member-search { background: rgba(255,255,255,.62)
}
html[data-app-theme="light"] .message-day-separator span { background: rgba(246,249,253,.96)
}
@media(max-width:1100px) and (min-width:901px) {
  .vh-app { grid-template-columns: 68px 250px minmax(0,1fr) 246px
}
  .server-showcase { margin-left: 8px; margin-right: 8px
}
  .message-search { width: 150px
}
  .message-search:focus-within { width: 180px
}
  .post-eyebrow em { display: none
}
}
@media(max-width:900px) and (min-width:761px) {
  .vh-app { grid-template-columns: 68px 246px minmax(0,1fr)
}
  .members-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 276px; z-index: 60; transform: translateX(104%); transition: transform .2s; box-shadow: -22px 0 60px rgba(0,0,0,.25)
}
  .members-panel.mobile-open { transform: none
}
  .chat-panel { grid-template-rows: 68px minmax(0,1fr) auto
}
  .chat-header { height: 68px
}
  .member-search { margin-top: 5px
}
}
@media(max-width:760px) {
  .chat-panel { grid-template-rows: 60px minmax(0,1fr) auto
}
  .chat-header { height: 60px
}
  .channel-private-badge { display: none
}
  .welcome-empty-v143 { min-height: 300px; padding: 24px 18px
}
  .welcome-feature-row { gap: 5px
}
  .welcome-feature-row span { height: 28px; padding: 0 8px
}
  .post-eyebrow em { display: none
}
  .member-search { height: 38px; margin: 5px 8px 7px
}
  .message-row { padding-right: 42px
}
  .message-list { scrollbar-gutter: auto
}
  .voice-dock { margin: 0 7px 7px!important
}
  .voice-controls button span { display: none
}
}
/* === v15 public profiles ================================================= */
.profile-cover { background: linear-gradient(120deg,color-mix(in srgb,var(--profile-accent,#7c5cff) 82%,#30246d),color-mix(in srgb,var(--profile-accent,#7c5cff) 56%,#3f82d4)); background-position: center; background-size: cover
}
.profile-cover-actions { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; z-index: 2
}
.profile-cover-btn { height: 31px; padding: 0 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(9,12,20,.35); backdrop-filter: blur(12px); color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: .62rem; font-weight: 750
}
.profile-cover-btn.danger { color: #ffd8df
}
.profile-identity { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px
}
.profile-identity>div { min-width: 0
}
.profile-public-link { font-size: .62rem; color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px
}
.profile-public-link:hover { color: var(--text-primary)
}
.profile-accent-field { height: 38px; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 8px; align-items: center; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--background-secondary); padding: 4px 9px 4px 4px
}
.profile-accent-field .form-control-color { width: 34px; height: 28px; padding: 2px; border: 0; background: transparent
}
.profile-accent-field span { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .63rem; color: var(--text-secondary); text-transform: lowercase
}
/* Standalone profile route. */
.public-profile-page { --background-primary: #07090e; --background-secondary: #0b0f17; --background-elevated: #121a27; --surface-soft: rgba(255,255,255,.045); --surface-hover: rgba(255,255,255,.075); --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.13); --text-primary: #f4f7fb; --text-secondary: #a8b2c2; --text-tertiary: #68758a; --accent: var(--profile-accent,#7c5cff); --success: #46d8a2; --danger: #ff7186; min-height: 100%; height: auto; overflow: auto; background: radial-gradient(circle at 12% 0,color-mix(in srgb,var(--profile-accent,#7c5cff) 22%,transparent),transparent 30%),
    radial-gradient(circle at 88% 108%,rgba(48,126,255,.13),transparent 34%),#07090e; color: var(--text-primary)
}
.public-profile-page:before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom,rgba(0,0,0,.5),transparent 68%)
}
.public-profile-shell { width: min(1040px,calc(100% - 34px)); margin: 0 auto; padding: 24px 0 28px; position: relative; z-index: 1
}
.profile-topbar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px
}
.profile-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; font-size: .86rem
}
.profile-brand>span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg,var(--profile-accent,#7c5cff),#5578ff); box-shadow: 0 12px 30px color-mix(in srgb,var(--profile-accent,#7c5cff) 24%,transparent); font-size: 1rem
}
.profile-brand b { font-weight: 850; letter-spacing: -.02em
}
.profile-topbar-actions { display: flex; align-items: center; gap: 8px
}
.profile-icon-action { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); color: var(--text-secondary); display: grid; place-items: center; text-decoration: none; transition: .13s
}
.profile-icon-action:hover { color: var(--text-primary)
}
.profile-icon-action.danger:hover { color: var(--danger)
}
.public-profile-card { overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: linear-gradient(180deg,color-mix(in srgb,var(--background-elevated) 96%,var(--profile-accent,#7c5cff) 4%),var(--background-secondary)); box-shadow: 0 30px 90px rgba(0,0,0,.36)
}
.public-profile-banner { height: 250px; position: relative; background-position: center; background-size: cover; background-color: var(--profile-accent,#7c5cff); overflow: hidden
}
.public-profile-banner.no-image { background: radial-gradient(circle at 18% 35%,rgba(255,255,255,.18),transparent 24%),radial-gradient(circle at 76% 12%,rgba(255,255,255,.1),transparent 25%),linear-gradient(125deg,color-mix(in srgb,var(--profile-accent,#7c5cff) 88%,#251d55),color-mix(in srgb,var(--profile-accent,#7c5cff) 35%,#2879c8))
}
.public-profile-banner:after { content: ""; position: absolute; inset: auto 0 0; height: 92px; background: linear-gradient(transparent,rgba(8,11,18,.64))
}
.public-profile-banner-glow { position: absolute; width: 290px; height: 290px; border-radius: 50%; right: -60px; top: -145px; background: #fff; filter: blur(80px); opacity: .14
}
.public-profile-main { padding: 0 38px 34px
}
.public-profile-avatar-wrap { width: max-content; position: relative; margin-top: -72px; z-index: 2
}
.public-profile-avatar { width: 144px; height: 144px; border-radius: var(--avatar-radius,50%); border: 7px solid var(--background-elevated); background: linear-gradient(145deg,color-mix(in srgb,var(--profile-accent,#7c5cff) 46%,#151c2a),#1b2f50); box-shadow: 0 18px 42px rgba(0,0,0,.32); display: grid; place-items: center; overflow: hidden; font-size: 2rem; font-weight: 900; color: #fff
}
.public-profile-avatar img { width: 100%; height: 100%; object-fit: cover
}
.public-profile-presence { position: absolute; right: 8px; bottom: 8px; width: 25px; height: 25px; border-radius: 50%; border: 6px solid var(--background-elevated); background: #5b6475
}
.public-profile-presence.status-online { background: var(--success)
}
.public-profile-presence.status-idle { background: #f0b95f
}
.public-profile-presence.status-dnd { background: var(--danger)
}
.public-profile-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 22px; align-items: end; margin-top: 15px
}
.public-profile-name-row { display: flex; align-items: center; gap: 15px; min-width: 0
}
.public-profile-name-row h1 { margin: 0; font-size: clamp(1.55rem,3vw,2.1rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 880; overflow-wrap: anywhere
}
.public-profile-handle { margin-top: 5px; font-size: .76rem; color: var(--text-tertiary)
}
.public-profile-status { max-width: 250px; min-height: 31px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.public-profile-status i { font-size: .46rem; color: var(--success)
}
.public-profile-actions { display: flex; justify-content: flex-end; align-items: center; gap: 7px; flex-wrap: wrap
}
.public-profile-actions .btn { min-height: 39px; border-radius: 11px; font-size: .69rem; font-weight: 750; display: inline-flex; align-items: center; gap: 7px
}
.profile-action-note { min-height: 39px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: .66rem
}
.public-profile-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.8fr); gap: 15px; margin-top: 27px
}
.public-profile-panel { min-width: 0; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb,var(--background-elevated) 92%,transparent); padding: 18px
}
.profile-panel-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-tertiary); font-size: .58rem; letter-spacing: .09em; font-weight: 850
}
.profile-panel-head i { color: color-mix(in srgb,var(--profile-accent,#7c5cff) 78%,#fff 22%); font-size: .78rem
}
.public-profile-about>p { min-height: 70px; margin: 16px 0 20px; font-size: .8rem; line-height: 1.65; color: var(--text-secondary); white-space: normal; overflow-wrap: anywhere
}
.profile-empty-copy { color: var(--text-tertiary); font-style: italic
}
.profile-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px
}
.profile-facts>div { min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); padding: 10px 11px
}
.profile-facts span,.profile-facts b { display: block
}
.profile-facts span { font-size: .56rem; color: var(--text-tertiary)
}
.profile-facts span i { margin-right: 4px
}
.profile-facts b { margin-top: 4px; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.profile-server-list { display: grid; gap: 7px; margin-top: 14px
}
.profile-server-chip { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; padding: 7px; border-radius: 11px; border: 1px solid transparent
}
.profile-server-chip>span { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb,var(--profile-accent,#7c5cff) 16%,var(--background-secondary)); color: color-mix(in srgb,var(--profile-accent,#7c5cff) 72%,#fff 28%); display: grid; place-items: center; font-size: .56rem; font-weight: 900
}
.profile-server-chip b { font-size: .67rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.profile-empty-state { min-height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--text-tertiary); font-size: .63rem
}
.profile-empty-state i { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); display: grid; place-items: center; color: var(--profile-accent,#7c5cff); font-size: .85rem
}
.public-profile-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 5px 0; color: var(--text-tertiary); font-size: .58rem
}
.public-profile-footer a { color: var(--text-secondary); text-decoration: none
}
.public-profile-footer a:hover { color: var(--text-primary)
}
.profile-page-toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%,16px); opacity: 0; pointer-events: none; transition: .18s; padding: 10px 13px; border: 1px solid var(--border); border-radius: 11px; background: rgba(17,24,39,.94); backdrop-filter: blur(16px); box-shadow: 0 18px 46px rgba(0,0,0,.34); font-size: .67rem; color: #fff
}
.profile-page-toast.show { opacity: 1; transform: translate(-50%,0)
}
.profile-not-found-shell { min-height: 100vh; display: flex; flex-direction: column
}
.profile-not-found-card { margin: auto; width: min(520px,100%); padding: 34px; border: 1px solid var(--border); border-radius: 24px; background: var(--background-elevated); text-align: center; box-shadow: 0 28px 80px rgba(0,0,0,.3)
}
.profile-not-found-icon { width: 70px; height: 70px; border-radius: 22px; margin: 0 auto 18px; background: color-mix(in srgb,var(--profile-accent,#7c5cff) 14%,transparent); color: var(--profile-accent,#7c5cff); display: grid; place-items: center; font-size: 1.5rem
}
.profile-kicker { font-size: .56rem; letter-spacing: .12em; font-weight: 850; color: var(--text-tertiary)
}
.profile-not-found-card h1 { font-size: 1.5rem; margin: 9px 0
}
.profile-not-found-card p { color: var(--text-secondary); font-size: .76rem; margin-bottom: 18px
}
@media(max-width:760px) {
  .profile-cover-actions { left: 10px; top: 10px
}
  .profile-cover-btn span { display: none
}
  .profile-identity { align-items: flex-start; flex-direction: column; gap: 3px
}
  .profile-public-link { padding-left: 0
}
  .public-profile-shell { width: min(100% - 16px,1040px); padding: 10px 0 18px
}
  .profile-topbar { padding: 0 4px; margin-bottom: 9px
}
  .public-profile-card { border-radius: 20px
}
  .public-profile-banner { height: 180px
}
  .public-profile-main { padding: 0 16px 23px
}
  .public-profile-avatar-wrap { margin-top: -51px
}
  .public-profile-avatar { width: 104px; height: 104px; border-radius: var(--avatar-radius,50%); border-width: 5px
}
  .public-profile-presence { width: 21px; height: 21px; border-width: 5px; right: 4px; bottom: 4px
}
  .public-profile-heading { grid-template-columns: 1fr; gap: 13px; margin-top: 12px
}
  .public-profile-name-row { align-items: flex-start; flex-direction: column; gap: 9px
}
  .public-profile-status { max-width: 100%
}
  .public-profile-actions { justify-content: flex-start
}
  .public-profile-grid { grid-template-columns: 1fr; margin-top: 18px
}
  .profile-facts { grid-template-columns: 1fr
}
  .public-profile-footer { padding: 12px 6px 0; flex-direction: column; align-items: flex-start
}
  .profile-page-toast { bottom: 14px; max-width: calc(100vw - 20px); text-align: center
}
}
.friend-avatar.msg-profile-trigger,.friend-meta.msg-profile-trigger { cursor: pointer
}
.friend-meta.msg-profile-trigger:hover b { text-decoration: none
}
#meAvatar,#meName { cursor: pointer
}
/* ========================================================================
   v15.1 — in-app profile surface
   ======================================================================== */
.chat-panel.profile-mode { background: var(--background-primary)
}
.chat-panel.profile-mode .composer-wrap { display: none!important
}
.chat-panel.profile-mode .message-search,
.chat-panel.profile-mode #realtimeBadge,
.chat-panel.profile-mode #dmCallBtn,
.chat-panel.profile-mode #chatAppearanceBtn,
.chat-panel.profile-mode #accountSecurityBtn { display: none!important
}
.chat-panel.profile-mode .profile-only-action { display: grid!important
}
.chat-panel:not(.profile-mode) .profile-only-action { display: none!important
}
.chat-panel.profile-mode .chat-header { border-bottom-color: color-mix(in srgb,var(--border) 82%,var(--profile-accent,#7c5cff) 18%)
}
.chat-panel.profile-mode .channel-heading-icon { background: color-mix(in srgb,var(--accent) 16%,var(--surface-soft)); color: var(--accent)
}
.profile-surface-list { padding: 0!important; overflow: auto!important; scrollbar-gutter: stable; background: radial-gradient(circle at 50% -20%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 42%),var(--background-primary)
}
.profile-surface-loading { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-tertiary); font-size: .72rem
}
.profile-surface-loading .spinner-border { width: 30px; height: 30px; color: var(--accent)
}
.inapp-profile { --profile-accent: #7c5cff; width: min(980px,calc(100% - 42px)); margin: 26px auto 40px; animation: profileSurfaceIn .2s ease-out
}
@keyframes profileSurfaceIn {
  from { opacity: 0; transform: translateY(8px)
}
  to { opacity: 1; transform: none
}
}
.inapp-profile-hero { border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(180deg,color-mix(in srgb,var(--background-elevated) 96%,var(--profile-accent) 4%),var(--background-secondary)); overflow: hidden; box-shadow: 0 22px 58px rgba(0,0,0,.17)
}
.inapp-profile-banner { height: 215px; position: relative; background-position: center; background-size: cover; background-color: color-mix(in srgb,var(--profile-accent) 70%,#17223a); background-image: radial-gradient(circle at 18% 35%,rgba(255,255,255,.18),transparent 26%),radial-gradient(circle at 78% 12%,rgba(255,255,255,.12),transparent 25%),linear-gradient(125deg,color-mix(in srgb,var(--profile-accent) 86%,#241b4f),color-mix(in srgb,var(--profile-accent) 35%,#2879c8))
}
.inapp-profile-banner:before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(3,6,13,.03),rgba(3,6,13,.08) 54%,rgba(3,6,13,.5))
}
.inapp-profile-banner:after { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; right: -60px; top: -130px; background: #fff; opacity: .12; filter: blur(68px)
}
.inapp-profile-identity { position: relative; display: grid; grid-template-columns: 126px minmax(0,1fr); gap: 22px; padding: 0 28px 28px; margin-top: -54px; align-items: end
}
.inapp-profile-avatar { position: relative; width: 126px; height: 126px; border-radius: var(--avatar-radius,50%); border: 6px solid var(--background-elevated); background: linear-gradient(145deg,color-mix(in srgb,var(--profile-accent) 42%,#151c2a),#1b2f50); box-shadow: 0 16px 38px rgba(0,0,0,.28); display: grid; place-items: center; overflow: visible; font-size: 1.8rem; font-weight: 900; color: #fff
}
.inapp-profile-avatar>img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--avatar-radius,50%); overflow: hidden
}
.inapp-profile-avatar:not(:has(img)) { overflow: visible
}
.inapp-profile-presence { position: absolute; right: -1px; bottom: 4px; width: 24px; height: 24px; border-radius: 50%; border: 5px solid var(--background-elevated); background: #667085
}
.inapp-profile-presence.online { background: var(--success)
}
.inapp-profile-presence.idle { background: #f0b95f
}
.inapp-profile-presence.dnd { background: var(--danger)
}
.inapp-profile-copy { min-width: 0; padding-top: 64px
}
.inapp-profile-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px
}
.profile-view-kicker { margin-bottom: 4px; color: color-mix(in srgb,var(--profile-accent) 76%,#fff 24%); font-size: .56rem; font-weight: 900; letter-spacing: .12em
}
.inapp-profile-title-row h2 { margin: 0; color: var(--text-primary); font-size: clamp(1.45rem,2.4vw,2rem); line-height: 1.07; font-weight: 880; letter-spacing: -.04em; overflow-wrap: anywhere
}
.inapp-profile-handle { margin-top: 5px; color: var(--text-tertiary); font-size: .72rem
}
.inapp-profile-status { max-width: 260px; min-height: 32px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); color: var(--text-secondary); display: flex; align-items: center; gap: 7px; font-size: .63rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.inapp-profile-status i { font-size: .44rem; color: var(--success)
}
.inapp-profile-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px
}
.profile-inline-action { min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); color: var(--text-secondary); font-size: .66rem; font-weight: 760; display: inline-flex; align-items: center; gap: 7px; transition: .13s
}
.profile-inline-action:hover { color: var(--text-primary)
}
.profile-inline-action.primary { border-color: transparent; background: linear-gradient(135deg,var(--profile-accent),color-mix(in srgb,var(--profile-accent) 62%,#4a8cff)); color: #fff; box-shadow: 0 9px 22px color-mix(in srgb,var(--profile-accent) 17%,transparent)
}
.profile-inline-action.primary:hover { color: #fff
}
.profile-inline-action.danger:hover { color: var(--danger)
}
.profile-inline-note { min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); display: inline-flex; align-items: center; gap: 7px; color: var(--text-tertiary); font-size: .65rem
}
.inapp-profile-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(250px,.75fr); gap: 14px; margin-top: 14px
}
.inapp-profile-card { min-width: 0; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb,var(--background-elevated) 95%,transparent); padding: 18px; box-shadow: 0 12px 34px rgba(0,0,0,.08)
}
.inapp-profile-card-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-tertiary); font-size: .56rem; font-weight: 900; letter-spacing: .1em
}
.inapp-profile-card-head i { font-size: .8rem; color: color-mix(in srgb,var(--profile-accent) 78%,#fff 22%)
}
.inapp-profile-bio { min-height: 90px; margin: 16px 0 20px; color: var(--text-secondary); font-size: .78rem; line-height: 1.68; overflow-wrap: anywhere
}
.inapp-profile-bio>span { color: var(--text-tertiary); font-style: italic
}
.inapp-profile-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px
}
.inapp-profile-facts>div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft)
}
.inapp-profile-facts i { grid-row: 1/3; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb,var(--profile-accent) 10%,transparent); color: var(--profile-accent)
}
.inapp-profile-facts span { font-size: .54rem; color: var(--text-tertiary)
}
.inapp-profile-facts b { min-width: 0; margin-top: 2px; font-size: .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.inapp-profile-servers { display: grid; gap: 7px; margin-top: 14px
}
.inapp-profile-server { width: 100%; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 7px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text-secondary); text-align: left; transition: .13s
}
.inapp-profile-server:hover { color: var(--text-primary)
}
.inapp-profile-server>span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb,var(--profile-accent) 13%,var(--background-secondary)); color: color-mix(in srgb,var(--profile-accent) 76%,#fff 24%); font-size: .57rem; font-weight: 900
}
.inapp-profile-server b { font-size: .67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.inapp-profile-server>i { font-size: .62rem; color: var(--text-tertiary)
}
.inapp-profile-empty { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--text-tertiary); font-size: .62rem
}
.inapp-profile-empty i { width: 39px; height: 39px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); display: grid; place-items: center; color: var(--profile-accent); font-size: .88rem
}
.inapp-profile-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 4px 0; color: var(--text-tertiary); font-size: .57rem
}
.inapp-profile-footer>span { display: flex; align-items: center; gap: 6px
}
.inapp-profile-footer button { border: 0; background: transparent; color: var(--text-secondary); font-size: .58rem; display: inline-flex; align-items: center; gap: 6px
}
.inapp-profile-footer button:hover { color: var(--text-primary)
}
.profile-surface-error { min-height: 480px; max-width: 560px; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; color: var(--text-secondary)
}
.profile-surface-error>div { width: 68px; height: 68px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-soft); display: grid; place-items: center; color: var(--accent); font-size: 1.45rem; margin-bottom: 16px
}
.profile-surface-error>span { font-size: .56rem; letter-spacing: .12em; font-weight: 900; color: var(--text-tertiary)
}
.profile-surface-error h3 { margin: 7px 0 6px; color: var(--text-primary); font-size: 1.3rem; font-weight: 850
}
.profile-surface-error p { margin: 0 0 18px; font-size: .72rem; color: var(--text-tertiary)
}
@media(max-width:900px) {
  .inapp-profile { width: min(100% - 26px,900px); margin-top: 16px
}
  .inapp-profile-banner { height: 180px
}
  .inapp-profile-identity { grid-template-columns: 108px minmax(0,1fr); gap: 17px; padding: 0 20px 22px; margin-top: -46px
}
  .inapp-profile-avatar { width: 108px; height: 108px; border-radius: var(--avatar-radius,50%)
}
  .inapp-profile-avatar>img { border-radius: var(--avatar-radius,50%)
}
  .inapp-profile-copy { padding-top: 52px
}
  .inapp-profile-grid { grid-template-columns: 1fr
}
  .inapp-profile-bio { min-height: auto
}
}
@media(max-width:620px) {
  .chat-panel.profile-mode #toggleMembers { display: none!important
}
  .inapp-profile { width: 100%; margin: 0 auto 22px
}
  .inapp-profile-hero { border-width: 0 0 1px; border-radius: 0; box-shadow: none
}
  .inapp-profile-banner { height: 148px
}
  .inapp-profile-identity { grid-template-columns: 82px minmax(0,1fr); gap: 13px; padding: 0 14px 18px; margin-top: -36px; align-items: start
}
  .inapp-profile-avatar { width: 82px; height: 82px; border-width: 4px; border-radius: var(--avatar-radius,50%); font-size: 1.2rem
}
  .inapp-profile-avatar>img { border-radius: var(--avatar-radius,50%)
}
  .inapp-profile-presence { width: 19px; height: 19px; border-width: 4px; right: -1px; bottom: 1px
}
  .inapp-profile-copy { padding-top: 40px
}
  .inapp-profile-title-row { display: block
}
  .inapp-profile-status { max-width: 100%; width: max-content; margin-top: 9px
}
  .inapp-profile-actions { grid-column: 1/-1; margin-top: 12px
}
  .profile-inline-action { min-height: 36px
}
  .inapp-profile-grid { margin: 10px 10px 0
}
  .inapp-profile-card { padding: 15px; border-radius: 16px
}
  .inapp-profile-facts { grid-template-columns: 1fr
}
  .inapp-profile-footer { padding: 10px 14px 0; flex-direction: column; align-items: flex-start
}
  .profile-surface-list { scrollbar-gutter: auto
}
}
/* === VoiceHub v16: conversation tools, context panel and richer profiles === */
.header-action-btn.active { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 38%,var(--border)); background: color-mix(in srgb,var(--accent) 12%,var(--surface-soft)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 9%,transparent) inset
}
@media(min-width:1281px) {
  .vh-app.members-collapsed { grid-template-columns: 72px 292px minmax(0,1fr)!important
}
  .members-panel.panel-collapsed { display: none!important
}
}
.right-panel-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px 10px 6px; border-bottom: 1px solid var(--border)
}
.right-panel-tabs button { height: 34px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-tertiary); font-size: .61rem; font-weight: 760; display: flex; align-items: center; justify-content: center; gap: 6px
}
.right-panel-tabs button:hover { color: var(--text-secondary)
}
.right-panel-tabs button.active { background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 24%,var(--border)); color: var(--accent)
}
.people-panel-body,.attachments-panel-body { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden
}
.attachments-panel-body.d-none,.people-panel-body.d-none { display: none!important
}
.attachment-panel-head { padding: 12px 12px 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px
}
.attachment-panel-head>div { display: flex; min-width: 0; flex-direction: column
}
.attachment-panel-head b { font-size: .72rem
}
.attachment-panel-head span { font-size: .55rem; color: var(--text-tertiary); margin-top: 2px
}
.attachment-filter { display: flex; gap: 5px; padding: 0 10px 9px; overflow-x: auto; scrollbar-width: none
}
.attachment-filter::-webkit-scrollbar { display: none
}
.attachment-filter button { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-tertiary); border-radius: 999px; padding: 5px 8px; font-size: .54rem; font-weight: 730
}
.attachment-filter button.active { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 25%,var(--border))
}
.attachment-list { padding: 3px 9px 12px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 6px
}
.attachment-panel-item { display: grid; grid-template-columns: 44px minmax(0,1fr) 18px; align-items: center; gap: 9px; min-height: 54px; padding: 6px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; color: var(--text-secondary); background: transparent
}
.attachment-panel-item:hover { color: var(--text-primary)
}
.attachment-panel-preview { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--surface-soft); color: var(--accent); font-size: 1rem
}
.attachment-panel-preview img { width: 100%; height: 100%; object-fit: cover
}
.attachment-panel-copy { min-width: 0; display: flex; flex-direction: column
}
.attachment-panel-copy b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .64rem
}
.attachment-panel-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-tertiary); font-size: .5rem; margin-top: 3px
}
.attachment-panel-item>i { font-size: .65rem; color: var(--text-tertiary)
}
.attachment-panel-empty,.attachment-panel-loading { margin: auto 12px; padding: 22px 12px; text-align: center; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-tertiary); display: flex; flex-direction: column; align-items: center; gap: 5px
}
.attachment-panel-empty i { font-size: 1.25rem; color: var(--accent)
}
.attachment-panel-empty b,.attachment-panel-loading b { font-size: .66rem; color: var(--text-secondary)
}
.attachment-panel-empty span { font-size: .53rem; line-height: 1.4
}
.chat-details-section { border: 1px solid var(--border); background: var(--surface-soft); border-radius: 15px; padding: 14px; margin-bottom: 12px
}
.chat-details-section.is-readonly { opacity: .78
}
.chat-details-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px
}
.chat-details-head>div { display: flex; flex-direction: column
}
.chat-details-head b { font-size: .72rem
}
.chat-details-head span { font-size: .55rem; color: var(--text-tertiary); margin-top: 2px
}
.chat-details-section .form-label { font-size: .58rem; color: var(--text-tertiary); font-weight: 720
}
.chat-details-section .form-control { font-size: .7rem; background: var(--background-secondary)
}
.profile-account-card { border: 1px solid var(--border); background: var(--surface-soft); border-radius: 14px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px
}
.profile-account-card>div { display: flex; align-items: center; gap: 10px; min-width: 0
}
.profile-account-card>div>i { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent)
}
.profile-account-card span { display: flex; flex-direction: column; min-width: 0
}
.profile-account-card b { font-size: .67rem
}
.profile-account-card small { font-size: .53rem; color: var(--text-tertiary); margin-top: 2px
}
.chat-panel.profile-mode #chatAttachmentsBtn { display: none!important
}
.inapp-profile-tabs { display: flex; gap: 6px; margin: 14px 18px 0; padding: 5px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); overflow: auto; scrollbar-width: none
}
.inapp-profile-tabs::-webkit-scrollbar { display: none
}
.inapp-profile-tabs button { flex: 1; min-width: max-content; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--text-tertiary); font-size: .62rem; font-weight: 760; display: flex; align-items: center; justify-content: center; gap: 7px
}
.inapp-profile-tabs button:hover { color: var(--text-secondary)
}
.inapp-profile-tabs button.active { color: var(--profile-accent,#7c5cff); background: color-mix(in srgb,var(--profile-accent,#7c5cff) 14%,var(--background-elevated)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--profile-accent,#7c5cff) 18%,var(--border)) inset
}
.inapp-profile-tab-surface { margin-top: 10px
}
.profile-wide-card { margin: 0 18px
}
.profile-tab-grid { align-items: start
}
.profile-badge-list { display: flex; flex-wrap: wrap; gap: 7px
}
.profile-badge { height: 31px; padding: 0 10px; border: 1px solid color-mix(in srgb,var(--profile-accent,#7c5cff) 22%,var(--border)); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb,var(--profile-accent,#7c5cff) 9%,var(--surface-soft)); color: var(--text-secondary); font-size: .57rem; font-weight: 700
}
.profile-badge i { color: var(--profile-accent,#7c5cff)
}
.profile-badge.muted { border-color: var(--border); background: var(--surface-soft)
}
.profile-note-card p { font-size: .56rem; color: var(--text-tertiary); margin: -2px 0 9px
}
.profile-note-card textarea { font-size: .66rem; resize: vertical; margin-bottom: 8px; background: var(--background-secondary)
}
.profile-note-card .btn { width: 100%
}
.profile-activity-card { grid-column: 1/-1
}
.profile-activity-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px
}
.profile-activity-item { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); text-align: left; padding: 11px; color: var(--text-secondary)
}
.profile-activity-item span { display: flex; flex-direction: column; gap: 2px
}
.profile-activity-item b { font-size: .65rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.profile-activity-item small { font-size: .5rem; color: var(--text-tertiary)
}
.profile-activity-item p { font-size: .56rem; line-height: 1.45; margin: 7px 0 0; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden
}
.profile-server-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px
}
.profile-media-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px
}
.profile-media-item { min-width: 0; min-height: 105px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); overflow: hidden; color: var(--text-secondary); text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; gap: 6px
}
.profile-media-item.image { padding: 0
}
.profile-media-item.image img { width: 100%; height: 100%; min-height: 105px; object-fit: cover
}
.profile-media-item>span { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center
}
.profile-media-item b { max-width: 100%; font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.profile-media-item small { font-size: .49rem; color: var(--text-tertiary)
}
@media(max-width:900px) {
  .profile-media-grid { grid-template-columns: repeat(3,minmax(0,1fr))
}
  .profile-activity-list { grid-template-columns: 1fr
}
  .profile-server-grid { grid-template-columns: 1fr
}
}
@media(max-width:620px) {
  .inapp-profile-tabs { margin: 10px 10px 0
}
  .profile-wide-card { margin: 0 10px
}
  .profile-media-grid { grid-template-columns: repeat(2,minmax(0,1fr))
}
  .profile-account-card { align-items: flex-start; flex-direction: column
}
  .profile-account-card .btn { width: 100%
}
}
/* v16 channel management affordance */
.channel-entry { position: relative
}
.channel-entry>.channel-item { padding-right: 38px
}
.channel-config-btn { position: absolute; right: 6px; top: 5px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--text-tertiary); display: grid; place-items: center; opacity: 0; transform: translateX(2px); transition: .15s ease; z-index: 2
}
.channel-entry:focus-within>.channel-config-btn { opacity: 1; transform: none
}
.channel-entry:hover>.channel-config-btn { opacity: 1
}
.channel-config-btn:hover { color: var(--text-primary)
}
.channel-config-btn i { font-size: .82rem
}
.channel-entry>.channel-item.voice .join-pill { margin-right: 0
}
@media (hover:none) {
  .channel-config-btn { opacity: .8; transform: none
}
}
/* === VoiceHub v17: uploads, pins and media UX === */
.chat-panel { position: relative
}
.chat-drop-overlay { position: absolute; inset: 68px 12px 82px; z-index: 1200; border: 2px dashed color-mix(in srgb,var(--accent) 55%,var(--border)); border-radius: 20px; background: color-mix(in srgb,var(--background-primary) 86%,var(--accent) 14%); backdrop-filter: blur(14px); display: grid; place-items: center; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent),0 24px 70px rgba(0,0,0,.18)
}
.chat-drop-overlay.d-none { display: none!important
}
.chat-drop-overlay>div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--text-secondary)
}
.chat-drop-overlay i { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 1.5rem; box-shadow: 0 10px 30px color-mix(in srgb,var(--accent) 16%,transparent)
}
.chat-drop-overlay b { margin-top: 4px; font-size: .82rem; color: var(--text-primary)
}
.chat-drop-overlay span { font-size: .6rem; color: var(--text-tertiary)
}
.upload-queue { margin: 0 0 7px; padding: 7px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb,var(--background-elevated) 94%,transparent); display: flex; flex-direction: column; gap: 5px; box-shadow: 0 10px 28px rgba(0,0,0,.08)
}
.upload-queue.d-none { display: none!important
}
.upload-queue-item { display: grid; grid-template-columns: 42px minmax(0,1fr) 30px; align-items: center; gap: 9px; min-height: 52px; padding: 5px 6px; border-radius: 11px; background: var(--surface-soft); border: 1px solid transparent; transition: .15s
}
.upload-queue-item.uploading,.upload-queue-item.sending { border-color: color-mix(in srgb,var(--accent) 22%,var(--border)); background: color-mix(in srgb,var(--accent) 5%,var(--surface-soft))
}
.upload-queue-item.error { border-color: color-mix(in srgb,var(--danger) 28%,var(--border)); background: color-mix(in srgb,var(--danger) 6%,var(--surface-soft))
}
.upload-queue-preview { width: 42px; height: 42px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--background-secondary); color: var(--accent); font-size: 1rem
}
.upload-queue-preview img { width: 100%; height: 100%; object-fit: cover
}
.upload-queue-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px
}
.upload-queue-title { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px
}
.upload-queue-title b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .61rem; color: var(--text-primary)
}
.upload-queue-title small { flex: 0 0 auto; font-size: .48rem; color: var(--text-tertiary)
}
.upload-queue-status { font-size: .5rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.upload-queue-item.error .upload-queue-status { color: var(--danger)
}
.upload-queue-progress { height: 3px; border-radius: 999px; background: var(--border); overflow: hidden
}
.upload-queue-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .12s linear
}
.upload-queue-item.error .upload-queue-progress i { background: var(--danger)
}
.upload-queue-action { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--text-tertiary); display: grid; place-items: center
}
.upload-queue-action:hover { color: var(--text-primary)
}
.upload-queue-item.error .upload-queue-action { color: var(--danger)
}
.right-panel-tabs { grid-template-columns: repeat(3,minmax(0,1fr))
}
.right-panel-tabs button { min-width: 0; padding: 0 5px
}
.right-panel-tabs button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.people-panel-body,.attachments-panel-body,.pinned-panel-body { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden
}
.attachments-panel-body.d-none,.people-panel-body.d-none,.pinned-panel-body.d-none { display: none!important
}
.pinned-list { padding: 3px 9px 12px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 6px
}
.pinned-panel-item { width: 100%; display: grid; grid-template-columns: 36px minmax(0,1fr) 18px; align-items: start; gap: 8px; padding: 9px 8px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text-secondary); text-align: left
}
.pinned-avatar { width: 36px; height: 36px; border-radius: var(--avatar-radius,50%); display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); font-size: .62rem; font-weight: 800
}
.pinned-avatar img { width: 100%; height: 100%; object-fit: cover
}
.pinned-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px
}
.pinned-copy-top { display: flex; align-items: center; justify-content: space-between; gap: 8px
}
.pinned-copy-top b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .61rem; color: var(--text-primary)
}
.pinned-copy-top time { flex: 0 0 auto; font-size: .45rem; color: var(--text-tertiary)
}
.pinned-preview { font-size: .56rem; line-height: 1.4; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden
}
.pinned-copy small { font-size: .47rem; color: var(--text-tertiary)
}
.pinned-copy small i { color: var(--accent); margin-right: 3px
}
.pinned-jump { align-self: center; color: var(--text-tertiary); font-size: .62rem
}
.message-row.is-pinned { background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 56%)
}
.message-row.is-pinned:after { content: ""; position: absolute; right: 9px; bottom: 6px; color: color-mix(in srgb,var(--accent) 55%,var(--text-tertiary)); font-size: .58rem; opacity: .72; pointer-events: none; width: 12px; height: 12px; background: currentColor; mask: url("icons/pin-angle-fill.svg") center/contain no-repeat
}
.message-row.is-pinned:hover:after { opacity: 1
}
.message-row { position: relative
}
.attachment-list.gallery-mode { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 7px
}
.attachment-list.gallery-mode .attachment-panel-item { display: flex; position: relative; min-height: 112px; padding: 0; overflow: hidden; border-color: var(--border); background: var(--surface-soft)
}
.attachment-list.gallery-mode .attachment-panel-preview { width: 100%; height: 112px; border-radius: 0
}
.attachment-list.gallery-mode .attachment-panel-preview img { width: 100%; height: 100%; object-fit: cover
}
.attachment-list.gallery-mode .attachment-panel-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 7px 6px; background: linear-gradient(transparent,rgba(0,0,0,.72)); color: #fff
}
.attachment-list.gallery-mode .attachment-panel-copy b { color: #fff; font-size: .53rem
}
.attachment-list.gallery-mode .attachment-panel-copy small { color: rgba(255,255,255,.72); font-size: .43rem
}
.attachment-list.gallery-mode .attachment-panel-item>i { display: none
}
.chat-panel.profile-mode #chatPinnedBtn { display: none!important
}
/* More compact call dock and a clearer active-call hierarchy. */
.voice-dock { overflow: hidden
}
.voice-dock-head { position: relative
}
.voice-dock-head:after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 0; height: 1px; background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--success) 28%,var(--border)),transparent)
}
.voice-live-pill { letter-spacing: .08em
}
.voice-controls button:not(.danger) { border: 1px solid transparent
}
.voice-controls button.active { border-color: color-mix(in srgb,var(--danger) 28%,var(--border)); background: color-mix(in srgb,var(--danger) 10%,var(--surface-soft))
}
.media-stage:not(.d-none) { border: 1px solid var(--border); border-radius: 16px; margin: 8px 10px; background: color-mix(in srgb,var(--background-primary) 96%,#000 4%); box-shadow: 0 16px 45px rgba(0,0,0,.16)
}
@media(max-width:760px) {
  .chat-drop-overlay { inset: 60px 7px 74px; border-radius: 16px
}
  .upload-queue { margin-bottom: 5px; padding: 5px
}
  .upload-queue-item { grid-template-columns: 38px minmax(0,1fr) 28px; min-height: 48px
}
  .upload-queue-preview { width: 38px; height: 38px
}
  .right-panel-tabs button { font-size: .54rem; gap: 4px
}
  .right-panel-tabs button i { font-size: .66rem
}
  .attachment-list.gallery-mode { grid-template-columns: repeat(2,minmax(0,1fr)); padding-left: 7px; padding-right: 7px
}
}
/* === VoiceHub v18: inbox, search, favorites and group management === */
.message-search-wrap { position: relative; min-width: 0
}
.message-search-results { position: absolute; top: calc(100% + 10px); right: 0; width: min(430px,82vw); max-height: min(560px,65vh); overflow: auto; padding: 8px; background: color-mix(in srgb,var(--panel,#11131a) 96%,transparent); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 22px 70px rgba(0,0,0,.42); z-index: 1200; backdrop-filter: blur(24px)
}
.message-search-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 7px; color: var(--muted,#8f95a7); font-size: 10px; font-weight: 800; letter-spacing: .12em
}
.message-search-head b { font-size: 11px; letter-spacing: 0; background: rgba(255,255,255,.08); padding: 3px 7px; border-radius: 999px
}
.message-search-result { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: start; text-align: left; border: 0; background: transparent; color: inherit; padding: 10px; border-radius: 12px
}
.message-search-result:focus-visible { background: rgba(124,92,255,.12); outline: 0
}
.message-search-result:hover { outline: 0
}
.message-search-avatar { width: 36px; height: 36px; border-radius: var(--avatar-radius,50%); overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.08); font-weight: 800
}
.message-search-avatar img { width: 100%; height: 100%; object-fit: cover
}
.message-search-copy { min-width: 0; display: grid; gap: 4px
}
.message-search-copy>span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0
}
.message-search-copy b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.message-search-copy time { margin-left: auto; color: var(--muted,#8f95a7); font-size: 10px
}
.message-search-copy>span:last-child { font-size: 12px; color: var(--muted,#a5a9b6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.message-search-empty,.message-search-loading { display: grid; place-items: center; gap: 7px; text-align: center; padding: 26px 18px; color: var(--muted,#9ca2b3); font-size: 12px
}
.message-search-empty i { font-size: 22px
}
.message-search-empty b { color: var(--text,#eef0f7); font-size: 13px
}
.message-search-empty.error i { color: #ff7b8d
}
.inbox-btn { position: relative
}
.header-count-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; background: #ff4f75; color: white; font-size: 9px; font-weight: 900; border: 2px solid var(--panel,#11131a); box-shadow: 0 4px 12px rgba(255,79,117,.35)
}
.inbox-btn.has-alert { color: #ff7593; background: rgba(255,79,117,.1)
}
.inbox-modal .modal-body { padding-top: 4px
}
.inbox-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px
}
.inbox-summary>div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07)
}
.inbox-summary i { font-size: 20px; color: #8c78ff
}
.inbox-summary span { display: grid
}
.inbox-summary b { font-size: 19px; line-height: 1
}
.inbox-summary small { color: var(--muted,#959bad); font-size: 11px; margin-top: 4px
}
.inbox-section-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 850; letter-spacing: .13em; color: var(--muted,#9298aa); padding: 0 3px 8px
}
.inbox-list { display: grid; gap: 7px
}
.inbox-item { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; text-align: left; border: 1px solid transparent; background: rgba(255,255,255,.035); color: inherit; padding: 11px 12px; border-radius: 14px
}
.inbox-item-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(124,92,255,.13); color: #9e8dff
}
.inbox-item-copy { display: grid; gap: 3px; min-width: 0
}
.inbox-item-copy>span { display: flex; gap: 8px; align-items: center
}
.inbox-item-copy b { font-size: 13px
}
.inbox-item-copy time { margin-left: auto; color: var(--muted,#8f95a7); font-size: 10px
}
.inbox-item-copy small { font-size: 10px; color: #8f83e9
}
.inbox-item-copy p { margin: 1px 0 0; color: var(--muted,#adb1bf); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.inbox-empty { padding: 34px 16px; display: grid; place-items: center; text-align: center; gap: 7px; color: var(--muted,#9aa0b2)
}
.inbox-empty i { font-size: 26px; color: #65d49a
}
.inbox-empty b { color: var(--text,#eef0f7)
}
.nav-unread-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.1); display: inline-grid; place-items: center; font-size: 9px; font-weight: 900; margin-left: auto; color: #d9dce6
}
.nav-unread-badge.mention { background: #ff4f75; color: #fff; box-shadow: 0 4px 12px rgba(255,79,117,.22)
}
.channel-entry,.dm-entry { position: relative
}
.channel-favorite-btn,.dm-favorite-btn { border: 0; background: transparent; color: var(--muted,#73798c); display: grid; place-items: center; opacity: 0; transition: .16s ease; z-index: 3
}
.channel-favorite-btn { position: absolute; right: 33px; top: 8px; width: 25px; height: 25px; border-radius: 8px
}
.channel-entry:not(:has(.channel-config-btn)) .channel-favorite-btn { right: 7px
}
.dm-favorite-btn { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 27px; height: 27px; border-radius: 9px
}
.channel-entry:hover .channel-favorite-btn,.channel-favorite-btn.active,.dm-entry:hover .dm-favorite-btn,.dm-favorite-btn.active { opacity: 1
}
.channel-favorite-btn.active,.dm-favorite-btn.active { color: #f4c95d; background: rgba(244,201,93,.1)
}
.channel-favorite-btn:hover,.dm-favorite-btn:hover { color: #f4c95d
}
.dm-entry.favorite .dm-item { padding-right: 36px
}
.dm-subsection-label { display: flex; align-items: center; gap: 6px; padding: 10px 10px 5px; font-size: 9px; font-weight: 850; letter-spacing: .12em; color: #b6a46d
}
.dm-subsection-label i { font-size: 9px
}
.channel-entry.favorite>.channel-item { background-image: linear-gradient(90deg,rgba(244,201,93,.045),transparent 45%)
}
.conversation-add-btn,.conversation-leave-btn { width: calc(100% - 10px); margin: 6px 5px 0; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); color: var(--text,#e9ebf3); padding: 9px 10px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px
}
.conversation-add-btn:hover { color: #c9c1ff
}
.conversation-leave-btn:hover { color: #ff899d
}
.media-preview-body { position: relative; min-height: 280px; display: grid; place-items: center; overflow: hidden
}
.media-preview-body video { max-width: 100%; max-height: 75vh; border-radius: 10px; background: #000
}
.media-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 58px; border: 0; border-radius: 14px; background: rgba(10,11,16,.66); color: #fff; display: grid; place-items: center; font-size: 22px; z-index: 3; backdrop-filter: blur(12px)
}
.media-nav-prev { left: 14px
}
.media-nav-next { right: 14px
}
.media-preview-counter { position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); padding: 5px 10px; border-radius: 999px; background: rgba(10,11,16,.7); color: #fff; font-size: 10px; font-weight: 800; z-index: 3
}
@media (max-width:760px) {
  .message-search-results { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; max-height: 58vh
}
  .inbox-summary { grid-template-columns: 1fr 1fr
}
  .channel-favorite-btn,.dm-favorite-btn { opacity: 1
}
  .media-nav-btn { width: 38px; height: 50px
}
  .media-nav-prev { left: 7px
}
  .media-nav-next { right: 7px
}
}
/* v18.1: local text drafts */
.draft-hint { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: var(--bs-secondary-color); padding: 0 12px; flex-wrap: wrap
}
.draft-hint:has(#draftStatus:empty) { display: none
}
.draft-hint button { border: 0; background: transparent; color: inherit; text-decoration: underline; padding: 4px; cursor: pointer
}
/* v18.2 reliable text sending */
.pending-send { margin: 6px 12px; padding: 10px 12px; border: 1px solid var(--bs-border-color); border-radius: 10px; font-size: 12px; overflow-wrap: anywhere
}
.pending-send p { margin: 6px 0; max-height: 3.5em; overflow: auto; white-space: pre-wrap
}
.pending-send p:empty { display: none
}
.pending-send button { margin-top: 6px
}
/* Keep drawer layout authoritative after the older desktop style layers. */
@media(max-width:1280px) {
  .members-panel:not(.mobile-open) { display: none
}
}
@media(max-width:760px) {
  .chat-panel { position: absolute; inset: 0 0 62px; min-height: 0
}
  .channel-sidebar,.members-panel.mobile-open { height: calc(100dvh - 62px); max-height: calc(100dvh - 62px)
}
  .channel-sidebar:not(.mobile-open) { visibility: hidden; pointer-events: none
}
  .channel-sidebar.mobile-open { visibility: visible; pointer-events: auto
}
  .pending-send { margin: 6px 0; font-size: 12px
}
}

/* Source: call-stage.css */
.call-stage { position: fixed; inset: 24px; z-index: 1040; display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--border-strong); border-radius: 24px; background: var(--background-primary); color: var(--text-primary); box-shadow: 0 30px 100px #0009; min-height: 0
}
.call-stage.d-none { display: none!important
}
.call-stage-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex: 0 0 auto
}
.call-stage-head h2 { font-size: 20px; margin: 4px 0; font-weight: 750
}
.call-kicker { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--accent)
}
#callStageStatus { color: var(--text-secondary); font-size: 12px
}
.call-stage-head-actions { display: flex; gap: 6px; align-items: center
}
.call-icon-btn { border: 0; background: transparent; color: var(--text-secondary); border-radius: 9px; padding: 9px 12px; display: flex; gap: 6px; align-items: center
}
.call-stage-body { display: flex; gap: 12px; min-height: 0; flex: 1
}
.call-stage-tiles { flex: 1; min-width: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); grid-auto-rows: minmax(180px,1fr); gap: 12px; min-height: 0
}
.call-participant-tile { position: relative; display: grid; place-items: center; border: 2px solid transparent; border-radius: 18px; background: linear-gradient(145deg,var(--background-elevated),var(--background-secondary)); overflow: hidden; min-width: 0; min-height: 160px
}
.call-participant-tile.is-speaking { border-color: var(--success); box-shadow: inset 0 0 28px color-mix(in srgb,var(--success) 9%,transparent)
}
.call-tile-avatar { width: 86px; height: 86px; display: grid; place-items: center; border-radius: var(--avatar-radius,50%); background: var(--accent-soft); color: var(--accent); font-size: 28px; font-weight: 800
}
.call-tile-media { position: absolute; inset: 0
}
.call-tile-media video { width: 100%; height: 100%; object-fit: cover; display: block; background: #06080c
}
.call-participant-tile.has-video .call-tile-avatar { display: none
}
.call-tile-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 12px 10px; display: flex; gap: 9px; align-items: center; color: #fff; background: linear-gradient(transparent,#05060ccc); font-size: 12px
}
.call-tile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1
}
.call-tile-state { display: flex; gap: 7px
}
.call-tile-bottom button { color: #fff; background: #ffffff1c; border: 0; width: 32px; height: 32px; border-radius: 9px
}
.is-pinned .call-tile-pin { background: var(--accent)
}
.call-stage-tiles.has-focus { grid-template-columns: minmax(0,1fr) 220px; grid-template-rows: repeat(var(--preview-count,1),minmax(145px,1fr)); grid-auto-flow: row
}
.call-stage-tiles.has-focus .is-main { grid-column: 1; grid-row: 1 / span var(--preview-count,1)
}
.call-stage-tiles.has-focus>article:not(.is-main) { grid-column: 2; min-height: 145px
}
.call-stage-people { width: 230px; overflow: auto; border-radius: 14px; background: var(--surface-soft); padding: 8px
}
.call-stage-people button { width: 100%; padding: 12px; text-align: left; border: 0; border-radius: 10px; background: transparent; color: var(--text-primary); font-size: 12px
}
.call-stage-controls { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 14px
}
.call-stage-controls .voice-controls { display: flex!important; gap: 8px!important; margin: 0!important; padding: 0!important
}
.call-stage-controls button,.call-stage-controls .voice-controls button { height: 44px!important; min-width: 44px; width: 44px!important; display: flex!important; flex-direction: row; align-items: center; justify-content: center; gap: 0; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); color: var(--text-secondary); padding: 0!important
}
.call-stage-controls button span { display: block!important; font-size: 10px
}
.call-stage-controls .voice-controls .danger { background: #e5486240; color: #ff8295
}
.call-stage-controls .voice-controls button.active { background: var(--accent-soft); color: var(--accent)
}
.call-stage-controls button:disabled { opacity: .4
}
.call-stage-notice,.call-audio-unlock { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; color: var(--text-secondary); background: var(--surface-soft)
}
.call-devices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface-soft)
}
.call-devices label { font-size: 12px; min-width: 0
}
.call-devices small { grid-column: 1/-1; color: var(--text-secondary)
}
.call-stage.is-floating { inset: auto 20px 90px auto; width: min(720px,calc(100vw - 40px)); height: min(540px,calc(100dvh - 110px)); resize: both; overflow: hidden; padding: 12px; gap: 8px
}
.call-stage.is-floating .call-stage-head { cursor: move; touch-action: none
}
.is-floating .call-stage-head h2 { font-size: 15px
}
.is-floating .call-stage-controls { gap: 4px
}
.is-floating .call-stage-controls button { min-width: 46px; padding: 4px 7px!important
}
.is-floating .call-stage-tiles.has-focus { grid-template-columns: minmax(0,1fr) 140px
}
.is-floating .call-stage-tiles.has-focus>article:not(.is-main) { min-height: 100px
}
.open-call-stage { width: 100%; border: 0; border-radius: 10px; padding: 10px; color: var(--accent); background: var(--accent-soft); font-size: 12px; font-weight: 700
}
#voiceDock #voiceParticipantList { display: none!important
}
.participant-context-menu { position: fixed; z-index: 2200; min-width: 210px; max-width: calc(100vw - 16px); padding: 6px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--background-elevated); box-shadow: 0 15px 50px #0005
}
.participant-context-menu button { display: block; width: 100%; background: transparent; border: 0; border-radius: 8px; padding: 10px; color: var(--text-primary); text-align: left; font-size: 12px
}
.participant-context-menu .danger { color: var(--danger)
}
.participant-context-menu label { padding: 8px; font-size: 11px; display: grid; gap: 8px
}
.member-more-btn { border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); width: 32px; height: 32px; flex-shrink: 0
}
.incoming-call-card { overflow: hidden; text-align: center; background: radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--accent) 22%,var(--background-elevated)),var(--background-elevated))
}
.incoming-call-card .modal-body { padding: 32px 24px
}
.incoming-call-avatar { width: 90px; height: 90px; border-radius: var(--avatar-radius,50%); background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 800; box-shadow: 0 0 0 12px var(--accent-soft); margin: 20px auto 32px
}
.incoming-call-orbit { animation: call-breathe 2s ease-in-out infinite
}
.incoming-call-card h3 { font-size: 24px; margin: 12px 0 5px; overflow-wrap: anywhere
}
.incoming-call-card p,.incoming-call-card small { color: var(--text-secondary)
}
.incoming-call-actions { display: flex; justify-content: space-around; gap: 20px; margin: 28px 0
}
.incoming-call-actions button { border: 0; background: none; color: var(--text-secondary); font-size: 12px; display: grid; gap: 10px; justify-items: center
}
.incoming-call-actions i { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 22px; font-size: 24px; color: #fff
}
.incoming-accept i { background: #1caa7d
}
.incoming-decline i { background: #d44663
}
@keyframes call-breathe {
  50% { transform: scale(1.04)
}
}
@media(max-width:760px) {
  .call-stage,.call-stage.is-floating { inset: 0!important; width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; padding: 12px 10px max(12px,env(safe-area-inset-bottom)); resize: none
}
  .call-stage-head { align-items: flex-start; gap: 8px
}
  .call-stage-head h2 { font-size: 16px
}
  .call-kicker { font-size: 8px
}
  .call-icon-btn { padding: 8px
}
  .call-stage-head-actions { gap: 2px; flex-wrap: wrap; justify-content: flex-end
}
  .call-stage-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: minmax(155px,1fr); gap: 7px
}
  .call-stage-tiles.has-focus,.call-stage.is-floating .call-stage-tiles.has-focus { display: flex; flex-wrap: wrap; align-content: flex-start
}
  .call-stage-tiles.has-focus .is-main { width: 100%; height: 55%; min-height: 220px; flex: 0 0 100%; order: -1
}
  .call-stage-tiles.has-focus>article:not(.is-main) { width: calc(50% - 4px); height: 130px; flex: 1 0 40%; min-height: 130px
}
  .call-stage-controls { gap: 5px; padding-top: 10px
}
  .call-stage-controls button,.call-stage-controls .voice-controls button { min-width: 44px!important; padding: 6px 8px!important; height: 50px!important
}
  .call-stage-controls .voice-controls { gap: 5px!important
}
  .call-stage-controls button span { font-size: 9px
}
  .call-stage-people { position: absolute; right: 10px; top: 90px; bottom: 85px; z-index: 3; background: var(--background-elevated); box-shadow: 0 0 50px #0008
}
  .call-devices { grid-template-columns: 1fr; max-height: 40dvh; overflow: auto
}
  .call-tile-avatar { width: 58px; height: 58px; border-radius: var(--avatar-radius,50%); font-size: 20px
}
  .call-tile-bottom { padding-left: 7px; padding-right: 7px; gap: 5px; font-size: 10px
}
  .call-tile-state { gap: 3px
}
  .call-tile-bottom button { width: 27px; height: 27px
}
  #floatCallStage { display: none
}
}
@media(prefers-reduced-motion:reduce) {
  .incoming-call-orbit { animation: none
}
}
.call-tile-fullscreen { display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:#10121d99;color:white }
.call-participant-tile:fullscreen { width:100%;height:100%;border:0;border-radius:0;background:#10121d }
.call-participant-tile:fullscreen .call-tile-media { inset:0 }
.call-participant-tile:fullscreen .call-tile-media video { width:100%;height:100%;object-fit:contain }
.call-participant-tile:fullscreen .call-tile-bottom { bottom:max(16px,env(safe-area-inset-bottom)) }

/* Source: responsive.css */
/* Keep controls reachable instead of clipping them inside narrow chat columns. */
.chat-panel { grid-template-rows: auto minmax(0,1fr) auto; container-type: inline-size
}
.channel-heading { min-width: 0; flex: 1
}
.channel-heading>.min-w-0 { flex: 1; overflow: hidden
}
.channel-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis
}
.chat-actions { flex-shrink: 0
}
.header-action-btn { flex-shrink: 0
}
.composer-box { min-width: 0
}
.composer-box textarea { min-width: 0; width: 0; flex: 1
}
.composer-tools,.composer-btn,.send-btn { flex-shrink: 0
}
.call-stage.is-floating { min-width: min(340px,calc(100vw - 16px)); min-height: 300px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px)
}
.call-stage button:focus-visible,.participant-context-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px
}
.modal-body { overflow-wrap: anywhere
}
.modal-dialog-scrollable .modal-body { overscroll-behavior: contain
}
.member-item-actions>.member-item { width: auto
}
.mobile-chat-search { display: none
}
.chat-header { position: relative
}
@container(max-width:620px) {
  .mobile-chat-search { display: grid
}
  .chat-header.search-open .message-search-wrap { display: block; position: absolute; left: 8px; right: 8px; top: calc(100% + 4px); z-index: 95
}
  .chat-header.search-open .message-search { display: flex!important; width: 100%!important; background: var(--background-elevated); height: 44px
}
  .chat-header.search-open .message-search input { font-size: 16px
}
  .chat-header.search-open .message-search-results { width: 100%; max-height: 55dvh
}
  .msg-body { padding-right: 0
}
  .message-row { padding-right: 42px
}
  .chat-header { height: auto; min-height: 106px; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 8px 10px
}
  .channel-heading { width: 100%; flex: none; min-height: 38px
}
  .channel-meta { display: none
}
  .chat-actions { width: 100%; justify-content: flex-end; gap: 5px; min-height: 38px
}
  .chat-actions .message-search-wrap,.chat-actions #realtimeBadge { display: none
}
  .chat-actions .header-action-btn { width: 36px; height: 36px
}
  .composer-box { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 4px; padding: 6px
}
  .composer-box #fileBtn { grid-column: 1; grid-row: 1
}
  .composer-box #postBtn { grid-column: 1; grid-row: 2
}
  .composer-box textarea { grid-column: 2 / 4; grid-row: 1; width: 100%; font-size: 16px; max-height: 25dvh
}
  .composer-tools { grid-column: 2 / 4; grid-row: 2; display: flex; justify-content: flex-end; gap: 5px
}
  .composer-btn,.send-btn { width: 38px; height: 38px
}
}
@media(max-width:760px) {
  .vh-app { height: 100dvh
}
  .chat-panel { height: calc(100dvh - 62px - env(safe-area-inset-bottom))
}
  .server-rail { height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: calc(6px + env(safe-area-inset-bottom))
}
  .channel-sidebar,.members-panel.mobile-open { bottom: calc(62px + env(safe-area-inset-bottom))
}
  .modal input.form-control,.modal textarea.form-control,.modal select { font-size: 16px
}
  .call-stage-controls .voice-controls button span { display: block
}
  .call-stage-head h2 { overflow-wrap: anywhere
}
  .call-stage-head>div:first-child { min-width: 0
}
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { scroll-behavior: auto!important; animation-duration: .01ms!important; transition-duration: .01ms!important
}
}

/* Source: design-system.css */
/* VoiceHub 19.1 — shared visual system. Loaded after component/layout styles.
   Keep interaction rules in their component files; add new visual tokens here. */
:root, html[data-app-theme="dark"] { color-scheme: dark; --background-primary: #14161e; --background-secondary: #191c26; --background-tertiary: #202430; --background-elevated: #242836; --surface-soft: rgba(180,190,220,.045); --surface-hover: rgba(180,190,220,.09); --surface-active: rgba(165,146,255,.13); --border: #2b3040; --border-strong: #41485e; --text-primary: #f1f2f8; --text-secondary: #b8bfd1; --text-tertiary: #929cb4; --accent: #b4a3ff; --accent-strong: #7555df; --accent-soft: rgba(165,146,255,.14); --success: #61d6ad; --danger: #ff91a4; --warning: #ebc780; --shadow-soft: 0 8px 24px #08091218; --shadow-float: 0 24px 80px #08091266; --ui-primary: #7353d7; --ui-primary-hover: #6242c5; --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-space-6: 24px; --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 20px; --ui-control: 40px; --ui-header: 80px; --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  /* Aliases for older components and Bootstrap. */ --vh-bg: var(--background-primary); --vh-panel: var(--background-secondary); --vh-panel-2: var(--background-tertiary); --vh-panel-3: var(--background-elevated); --vh-text: var(--text-primary); --vh-muted: var(--text-secondary); --vh-border: var(--border); --vh-accent: var(--accent); --vh-green: var(--success); --vh-red: var(--danger); --panel: var(--background-elevated); --muted: var(--text-secondary); --text: var(--text-primary); --bs-body-color: var(--text-primary); --bs-body-bg: var(--background-primary); --bs-secondary-color: var(--text-secondary); --bs-tertiary-color: var(--text-tertiary); --bs-border-color: var(--border);
}
html[data-app-theme="light"] { color-scheme: light; --background-primary: #ffffff; --background-secondary: #f5f6fa; --background-tertiary: #eef0f6; --background-elevated: #ffffff; --surface-soft: rgba(39,48,72,.035); --surface-hover: rgba(39,48,72,.07); --surface-active: #ede8fc; --border: #e0e3ed; --border-strong: #b7bfd2; --text-primary: #242839; --text-secondary: #59627a; --text-tertiary: #69728a; --accent: #6741cb; --accent-strong: #5a36b8; --accent-soft: #ede8fc; --success: #147958; --danger: #be3551; --warning: #8b621b; --shadow-soft: 0 8px 24px #20284408; --shadow-float: 0 24px 80px #20284426;
}
/* The legacy shell declares its own palette. Inherit the shared palette instead. */
html .vh-app, html[data-app-theme="dark"] .vh-app, html[data-app-theme="light"] .vh-app, body.public-profile-page { --background-primary: inherit; --background-secondary: inherit; --background-tertiary: inherit; --background-elevated: inherit; --surface-soft: inherit; --surface-hover: inherit; --surface-active: inherit; --border: inherit; --border-strong: inherit; --text-primary: inherit; --text-secondary: inherit; --text-tertiary: inherit; --accent: inherit; --accent-strong: inherit; --accent-soft: inherit; --success: inherit; --danger: inherit; --warning: inherit; --shadow-soft: inherit; --shadow-float: inherit;
}
body { font-family: var(--ui-font); font-size: 14px; line-height: 1.5; background: var(--background-primary); color: var(--text-primary)
}
button, input, textarea, select { font-family: inherit
}
button, a, input, textarea, select { touch-action: manipulation
}
::selection { background: var(--accent-soft); color: var(--text-primary)
}
:is(button,a,[tabindex]):not(input,textarea,select,[contenteditable]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px
}
button:disabled { cursor: not-allowed
}
.app-orb, .server-showcase-glow { display: none
}
.vh-app { gap: 0; padding: 0; background: var(--background-primary)
}
.server-rail, .channel-sidebar, .chat-panel, .members-panel { border: 0; border-radius: 0; box-shadow: none
}
.server-rail, .channel-sidebar { border-right: 1px solid var(--border)
}
.members-panel { border-left: 1px solid var(--border)
}
.text-secondary { color: var(--text-secondary)!important
}
.modal-modern .btn-secondary { --bs-btn-color: var(--text-secondary); --bs-btn-border-color: var(--border-strong); --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: var(--surface-hover); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-active-bg: var(--surface-active); --bs-btn-active-color: var(--accent)
}
textarea::placeholder { color: var(--text-tertiary); opacity: 1
}
.form-check-input:checked { background-color: var(--ui-primary); border-color: var(--ui-primary)
}
input[type="checkbox"], input[type="range"] { accent-color: var(--ui-primary)
}
.form-text, .small, small { font-size: 12px; line-height: 1.5
}
.icon-btn, .glass-icon-btn, .header-action-btn, .composer-btn, .send-btn { width: var(--ui-control); height: var(--ui-control); min-width: var(--ui-control); border-radius: var(--ui-radius-sm); font-size: 17px; box-shadow: none; flex-shrink: 0
}
.icon-btn, .glass-icon-btn, .header-action-btn { border: 1px solid transparent; background: transparent; color: var(--text-secondary)
}
.icon-btn i, .glass-icon-btn i, .header-action-btn i, .composer-btn i, .send-btn i { font-size: 18px
}
.icon-btn:hover, .glass-icon-btn:hover, .header-action-btn:hover { color: var(--accent)
}
.header-action-btn.active, .header-action-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent)
}
.send-btn { background: var(--ui-primary); color: #fff; border: 0
}
.send-btn:disabled { opacity: .45
}
/* Shell and navigation. */
@media(min-width:1281px) {
  .vh-app { grid-template-columns: 72px 272px minmax(0,1fr) 272px
}
  .vh-app.members-collapsed { grid-template-columns: 72px 272px minmax(0,1fr)!important
}
}
@media(min-width:761px) and (max-width:1280px) {
  .vh-app, .vh-app.members-collapsed { grid-template-columns: 72px 256px minmax(0,1fr)!important
}
}
.server-rail { background: var(--background-secondary); padding: 16px 12px; gap: 12px
}
.server-logo, .server-chip, .server-action { width: 48px; height: 48px; border-radius: 16px; font-size: 14px; box-shadow: none
}
.server-chip { border-radius: var(--avatar-radius,50%)
}
.server-logo { background: var(--ui-primary); color: white; font-size: 22px
}
.server-chip { background: var(--background-tertiary); color: var(--text-secondary); border: 1px solid transparent
}
.server-chip.active { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb,var(--accent) 35%,transparent); box-shadow: none; border-radius: var(--avatar-radius,50%)
}
.server-chip.active:before { background: var(--accent); left: -13px
}
.server-list { gap: 12px
}
.channel-sidebar, .members-panel { background: var(--background-secondary)
}
.server-showcase { margin: 0; padding: 16px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; flex-shrink: 0
}
.server-showcase-body { margin-top: 12px; gap: 12px
}
.server-showcase:after { display: none
}
.workspace-label, .channel-group-head, .social-section-head, .members-section-label, .settings-eyebrow, .welcome-kicker, .call-kicker { font-size: 11px; font-weight: 650; letter-spacing: .08em; color: var(--text-tertiary)
}
.server-title { font-size: 16px; font-weight: 650
}
.server-subtitle { font-size: 12px; margin-top: 4px
}
.server-mini-icon { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 12px
}
.sidebar-toolbar { padding: 20px 20px 8px
}
.sidebar-toolbar-title span { font-size: 13px; font-weight: 600
}
.sidebar-toolbar-title small { display: none
}
.channel-scroll { padding: 0 12px 16px
}
.channel-group { margin-bottom: 20px
}
.channel-group-head { padding: 8px 8px 4px
}
.channel-group-head button { width: 32px; height: 32px; border-radius: 8px
}
.channel-item { min-height: 44px; border-radius: 8px; padding: 10px 12px; gap: 10px
}
.channel-item .channel-label { font-size: 14px; font-weight: 500
}
.channel-item i { background: transparent; font-size: 17px
}
.channel-item.active { border-color: transparent; background: var(--accent-soft); color: var(--accent)
}
.channel-item.active .channel-label { font-weight: 650
}
.channel-item.active i { background: transparent
}
.channel-entry:has(.channel-config-btn) .channel-item { padding-right: 76px
}
.channel-config-btn, .channel-favorite-btn { width: 32px; height: 32px; top: 6px; border-radius: 8px
}
.channel-config-btn { right: 4px
}
.channel-favorite-btn { right: 38px; color: var(--text-tertiary)
}
.channel-entry:not(:has(.channel-config-btn)) .channel-favorite-btn { right: 4px
}
.channel-entry:focus-within .channel-favorite-btn, .dm-entry:focus-within .dm-favorite-btn { opacity: 1
}
.channel-item.voice .join-pill { display: none
}
.user-panel { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 12px; margin: 0; padding: 16px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--background-secondary); box-shadow: none
}
.user-avatar { width: 40px; height: 40px; border-radius: var(--avatar-radius,50%); font-size: 14px
}
.user-panel-name { font-size: 14px; font-weight: 600; line-height: 20px
}
#connectionState { font-size: 12px; color: var(--text-tertiary)
}
.user-panel-actions { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 4px
}
.user-panel-actions .icon-btn { width: 40px; height: 36px; min-width: 36px
}
.chat-panel { background: var(--background-primary); grid-template-columns: minmax(0,1fr)
}
.chat-header, .composer-wrap, .message-list { min-width: 0
}
.chat-header { height: var(--ui-header); min-height: var(--ui-header); padding: 16px 24px; gap: 16px; border-bottom: 1px solid var(--border); background: var(--background-primary); box-shadow: none
}
.channel-heading { gap: 12px
}
.channel-heading-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); border: 0; box-shadow: none; font-size: 20px; flex-shrink: 0
}
.channel-title { font-size: 16px; line-height: 24px; font-weight: 650; letter-spacing: -.01em
}
.channel-meta { font-size: 12px; line-height: 18px; margin-top: 2px; color: var(--text-tertiary)
}
.channel-private-badge { display: none
}
.chat-actions { gap: 4px
}
.message-search { height: 40px; width: 180px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--background-secondary)
}
.message-search:focus-within { width: 180px; border-color: var(--accent)
}
.message-search input { font-size: 13px; color: var(--text-primary)
}
.message-search kbd { display: none
}
#realtimeBadge { display: none
}
/* Connection status remains in the account footer. */
.members-topbar { height: var(--ui-header); padding: 16px 20px
}
.members-title { font-size: 16px; font-weight: 650
}
.members-subtitle { font-size: 12px; margin-top: 2px; color: var(--text-tertiary)
}
.member-count-pill { font-size: 12px; background: var(--surface-hover); color: var(--text-secondary); box-shadow: none
}
.right-panel-tabs { margin: 12px; padding: 4px; border-radius: 10px; background: var(--background-tertiary); border: 0
}
.right-panel-tabs button { height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 3px; font-size: 11px; border-radius: 8px
}
.right-panel-tabs button i { font-size: 14px
}
.right-panel-tabs button.active { background: var(--background-elevated); color: var(--accent); box-shadow: var(--shadow-soft)
}
.members-overview { margin: 4px 16px 12px; padding: 0; border: 0; background: transparent; box-shadow: none
}
.overview-stat small { font-size: 12px
}
.overview-stat b { font-size: 13px
}
.overview-stat:nth-child(2), .members-footer-note { display: none
}
.member-search, .dm-search { min-height: 40px; border: 1px solid var(--border); border-radius: 8px; background: var(--background-primary); padding: 8px 12px
}
.member-search input, .dm-search input { font-size: 13px; color: var(--text-primary)
}
.members-section-label { padding: 16px 20px 8px
}
.member-list { padding: 0 12px 16px
}
.member-item { padding: 10px 8px; border-radius: 8px; gap: 12px
}
.member-avatar { width: 36px; height: 36px; border-radius: var(--avatar-radius,50%); font-size: 13px; flex-shrink: 0
}
.member-name { font-size: 14px; font-weight: 500
}
.member-meta .member-name { font-size: 14px; font-weight: 600
}
.member-meta .member-role { font-size: 12px; line-height: 18px
}
.member-item .member-role-badge { display: none
}
.member-item-actions { align-items: center
}
.member-group-title { font-size: 11px; font-weight: 600
}
.member-group-title b { font-size: 11px
}
.members-overview { display: block
}
.overview-stat { padding: 0 4px; background: transparent; border: 0; border-radius: 0
}
.overview-stat>div { flex-direction: row; gap: 6px; align-items: baseline
}
.member-role { font-size: 12px; margin-top: 2px; color: var(--text-tertiary)
}
.member-role-badge { font-size: 11px
}
.member-more-btn { width: 36px; height: 36px
}
/* Conversation, composer and secondary panels. */
.message-list { padding: 24px 16px; scroll-padding: 24px; background: transparent
}
.message-row { width: 100%; margin: 2px 0; padding: 10px 44px 10px 8px; grid-template-columns: 40px minmax(0,1fr); gap: 12px; border-radius: 8px
}
.msg-avatar { width: 40px; height: 40px; border-radius: var(--avatar-radius,50%); font-size: 14px; box-shadow: none; border: 0
}
.msg-body { min-width: 0; padding-right: 0
}
.msg-head { min-height: 22px; gap: 8px; flex-wrap: wrap
}
.msg-head b, .msg-head .msg-name { font-size: 14px; font-weight: 650
}
.msg-user { font-size: 14px; font-weight: 650; color: var(--text-primary)
}
.msg-user.msg-profile-trigger { font-size: 14px; font-weight: 650; color: var(--text-primary)
}
.message-day-separator { height: 32px; font-size: 11px; font-weight: 500; margin: 16px auto
}
html .message-day-separator span { font-size: 11px; font-weight: 500; letter-spacing: .02em; padding: 4px 12px; border: 0; background: var(--background-primary); color: var(--text-tertiary)
}
.msg-time, .msg-edited { font-size: 11px; color: var(--text-tertiary)
}
.msg-content { font-size: 15px; line-height: 1.6; margin-top: 2px; max-width: 840px; color: var(--text-primary)
}
.day-divider, .date-divider { font-size: 11px; color: var(--text-tertiary); margin: 20px 0
}
.day-divider span, .date-divider span { font-size: 11px; letter-spacing: .03em; padding: 4px 12px; background: var(--background-primary); color: var(--text-tertiary); border-color: var(--border); font-weight: 500
}
.message-reactions { gap: 6px; margin-top: 8px
}
.reaction-bar:has(>.reaction-add:only-child) { display: none
}
/* Also available in each message's actions. */
.reaction-btn { min-height: 28px; font-size: 12px; border-radius: 8px
}
.message-context-menu, .participant-context-menu, .picker-popover, .message-search-results { border: 1px solid var(--border); border-radius: 12px; background: var(--background-elevated); color: var(--text-primary); box-shadow: var(--shadow-float); backdrop-filter: none
}
.message-context-menu button, .participant-context-menu button { min-height: 40px; font-size: 13px; border-radius: 8px
}
.composer-wrap { padding: 8px 24px 16px; background: transparent
}
.composer-box { padding: 8px; gap: 8px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--background-secondary); box-shadow: none
}
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft)
}
.composer-box textarea { font-size: 15px; line-height: 24px; padding: 8px; min-height: 40px; color: var(--text-primary)
}
.composer-box:has(#fileBtn:not(.d-none)) #postBtn { display: none
}
/* Keep the shortcut when attachments are forbidden. */
.composer-tools { gap: 4px
}
.composer-btn { background: transparent; color: var(--text-secondary)
}
.composer-btn:hover { color: var(--text-primary)
}
.composer-btn.add-btn { background: var(--surface-hover); color: var(--text-secondary)
}
.composer-hint { padding: 8px 4px 0; font-size: 11px; color: var(--text-tertiary)
}
.draft-hint { padding: 6px 4px 0; font-size: 12px
}
.reply-bar { border-radius: 12px 12px 0; background: var(--accent-soft); border-color: var(--border)
}
.reply-bar-copy span { font-size: 13px
}
.reply-bar-copy small { font-size: 12px
}
.upload-queue-title b, .pinned-copy-top b, .attachment-panel-copy b { font-size: 13px
}
.upload-queue-title small, .upload-queue-status, .pinned-copy small, .pinned-copy-top time, .attachment-panel-copy small { font-size: 11px
}
.pinned-preview { font-size: 13px
}
.attachment-filter button { min-height: 32px; font-size: 11px
}
.attachment-panel-head b { font-size: 14px
}
.attachment-panel-head span { font-size: 12px
}
.conversation-add-btn, .conversation-leave-btn { min-height: 40px; border-color: var(--border); background: var(--surface-soft); color: var(--text-secondary); font-size: 13px; border-radius: 8px
}
.social-quick-actions { padding: 12px
}
.social-nav-item { min-height: 44px; font-size: 14px; border-radius: 8px
}
.social-section-head { padding: 16px 16px 8px
}
.dm-item { min-height: 64px; border-radius: 8px; padding: 10px 12px
}
.dm-name, .dm-copy b { font-size: 14px
}
.dm-preview, .dm-copy small { font-size: 12px
}
.dm-item .dm-item-name { font-size: 14px
}
.dm-item .dm-item-preview { font-size: 12px
}
.dm-item-time, .dm-subsection-label { font-size: 11px
}
.social-hero { padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--background-secondary); box-shadow: none
}
.social-hero h3 { font-size: 24px; font-weight: 650; letter-spacing: -.025em
}
.social-hero p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 550px
}
.social-dashboard-grid { gap: 16px; margin-top: 16px
}
.social-card { border: 1px solid var(--border); border-radius: 16px; background: var(--background-secondary); box-shadow: none
}
.social-card-head { padding: 16px
}
.social-card-head h4 { font-size: 16px
}
.friend-row, .request-row { padding: 12px; gap: 12px; border-radius: 8px; flex-wrap: wrap
}
.friend-meta b { font-size: 14px
}
.friend-meta small { font-size: 12px
}
.friend-actions button { min-width: 36px; min-height: 36px; border-radius: 8px
}
.social-empty, .settings-empty, .welcome-empty p { font-size: 14px; color: var(--text-secondary); line-height: 1.6
}
.welcome-empty h3 { font-size: 24px
}
.welcome-icon { box-shadow: none; background: var(--accent-soft); color: var(--accent)
}
/* Dialogs and settings use the same fields, surfaces and type scale. */
.modal-modern { border-radius: 20px; border: 1px solid var(--border); background: var(--background-elevated); box-shadow: var(--shadow-float)
}
.modal-modern .modal-header { padding: 24px; gap: 16px; align-items: flex-start; border-bottom: 1px solid var(--border)!important
}
.modal-modern .modal-title { font-size: 20px; line-height: 28px; font-weight: 650; letter-spacing: -.02em
}
.modal-modern .modal-body { padding: 24px
}
.modal-modern .modal-footer { padding: 16px 24px; gap: 8px; border-top: 1px solid var(--border)
}
.modal-modern .btn-close { box-sizing: border-box; width: 36px; height: 36px; padding: 10px; margin: -4px -4px -4px auto; flex-shrink: 0; border-radius: 8px
}
.modal-modern .modal-header small, .modal-modern .modal-header .small { display: block; margin-top: 4px; color: var(--text-secondary)
}
.account-security-modal .modal-body { padding: 0
}
.account-security-nav { padding: 16px; background: var(--background-secondary); border-color: var(--border)
}
.security-nav-item { padding: 12px; min-height: 44px; border-radius: 8px; font-size: 14px
}
.account-security-content { padding: 24px
}
.settings-section-head, .security-section-head { gap: 16px; flex-wrap: wrap
}
.settings-section-head h4, .security-section-head h4 { font-size: 20px; font-weight: 650
}
.settings-section-head p, .security-section-head p, .settings-note { font-size: 13px; line-height: 1.6; color: var(--text-secondary)
}
.settings-card, .security-card, .settings-stat, .sound-settings-card, .permission-group, .profile-about-card { border: 1px solid var(--border); border-radius: 12px; background: var(--background-secondary); box-shadow: none; padding: 16px
}
.settings-grid { gap: 12px
}
.settings-stat small { font-size: 12px; color: var(--text-secondary)
}
.settings-stat b { font-size: 20px; font-weight: 650; overflow-wrap: anywhere
}
.permission-copy b, .role-list-copy b, .security-card b { font-size: 14px
}
.permission-copy small, .role-list-copy small, .security-card small { font-size: 12px; color: var(--text-secondary); line-height: 1.5
}
.security-card label { font-size: 13px
}
.security-card p { font-size: 13px; line-height: 1.6
}
.security-card h5 { font-size: 16px
}
.permission-group-title { font-size: 11px; letter-spacing: .06em
}
.permission-row { padding: 12px 0; gap: 16px
}
.role-editor-top { gap: 12px
}
.role-editor-actions { gap: 8px; flex-wrap: wrap
}
.sound-settings-head b { font-size: 14px
}
.sound-settings-head span { font-size: 12px; line-height: 1.5
}
.profile-modal .form-label { font-size: 13px
}
.profile-modal .form-control, .profile-modal .form-select { min-height: 40px; font-size: 14px; border-radius: 8px
}
.profile-accent-field { height: 40px
}
.profile-accent-field .form-control-color { min-height: 28px; height: 28px
}
.profile-accent-field span, .profile-public-link { font-size: 12px
}
.profile-account-card { padding: 16px; border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; gap: 12px
}
.profile-account-card b { font-size: 14px
}
.profile-account-card small { font-size: 12px; line-height: 1.5
}
.profile-account-card .btn { white-space: nowrap
}
.sound-volume-row #soundVolumeValue, .sound-volume-row .btn { font-size: 12px
}
.profile-cover-btn { min-height: 36px; font-size: 12px
}
.inbox-summary>div, .inbox-item { background: var(--background-secondary); border-color: var(--border); border-radius: 12px
}
.inbox-summary small, .inbox-item-copy time, .inbox-item-copy small { font-size: 12px
}
.inbox-item-copy p { font-size: 14px
}
.inbox-section-head { font-size: 11px
}
.public-profile-page { background: var(--background-secondary)
}
.public-profile-card, .profile-not-found-card { border: 1px solid var(--border); border-radius: 20px; background: var(--background-primary); box-shadow: var(--shadow-soft)
}
.public-profile-heading h1 { font-size: 28px; letter-spacing: -.03em
}
.public-profile-grid { gap: 16px
}
.public-profile-bio { font-size: 15px; line-height: 1.65
}
.profile-panel-head { font-size: 11px; font-weight: 650
}
.profile-facts span, .inapp-profile-facts span { font-size: 12px
}
.profile-facts b, .inapp-profile-facts b { font-size: 14px; font-weight: 600
}
/* Welcome / login. */
/* Call surfaces share the same palette and control geometry. */
.call-stage { border-radius: 20px; padding: 24px; gap: 16px; background: var(--background-primary); box-shadow: var(--shadow-float)
}
.call-stage-head h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; font-weight: 650
}
#callStageStatus { font-size: 13px
}
.call-icon-btn { min-height: 40px; min-width: 40px; border-radius: 8px; font-size: 13px; justify-content: center
}
.call-participant-tile { border-radius: 16px; background: var(--background-secondary)
}
.call-tile-avatar { background: var(--accent-soft); color: var(--accent); border-radius: var(--avatar-radius,50%); font-weight: 650
}
.call-tile-bottom { font-size: 13px; padding: 32px 12px 12px
}
.call-tile-bottom button { width: 36px; height: 36px
}
.call-stage-controls { gap: 8px; padding-top: 16px
}
.call-stage-controls button, .call-stage-controls .voice-controls button { height: 60px!important; border-radius: 12px; background: var(--background-secondary); min-width: 72px; font-size: 18px
}
.call-stage-controls button span { font-size: 11px
}
.call-stage-controls button i { font-size: 20px
}
.call-stage-controls .voice-controls .danger { background: var(--ui-call-danger,#b83752); color: #fff; border-color: transparent
}
.call-stage-people button { font-size: 14px; min-height: 44px
}
.call-devices label, .call-stage-notice, .call-audio-unlock { font-size: 13px
}
.incoming-call-card { background: radial-gradient(ellipse at 50% 0,var(--accent-soft),transparent 75%),var(--background-elevated)
}
.incoming-call-card .modal-body { padding: 32px 24px
}
.incoming-call-avatar { background: var(--ui-primary); color: white; border-radius: var(--avatar-radius,50%)
}
.incoming-call-card h3 { font-size: 24px; font-weight: 650
}
.incoming-call-actions button { font-size: 14px; gap: 12px
}
.incoming-call-actions i { border-radius: 22px; width: 64px; height: 64px
}
.call-stage.is-floating { padding: 12px
}
.call-stage.is-floating .call-stage-controls button { height: 52px!important; min-width: 44px
}
/* Use the available chat width, including when a desktop side panel is open. */
@container(max-width:780px) {
  .mobile-chat-search { display: grid
}
  .chat-actions .message-search-wrap { display: none
}
  .chat-header.search-open .message-search-wrap { display: block; position: absolute; left: 12px; right: 12px; top: calc(100% + 4px); z-index: 95
}
  .chat-header.search-open .message-search { display: flex!important; width: 100%!important; height: 44px; background: var(--background-elevated)
}
  .chat-header.search-open .message-search input { font-size: 16px
}
  .chat-header.search-open .message-search-results { width: 100%; max-height: 55dvh; left: 0; right: 0; top: calc(100% + 8px); position: absolute
}
}
@container(max-width:620px) {
  .chat-header { height: auto; min-height: 112px; flex-direction: column; align-items: stretch; padding: 12px 16px; gap: 8px
}
  .channel-heading { min-height: 36px
}
  .channel-heading-icon { width: 36px; height: 36px
}
  .channel-meta { display: none
}
  .channel-title { font-size: 15px
}
  .chat-actions { width: 100%; justify-content: flex-end; gap: 4px; min-height: 40px
}
  .chat-actions .header-action-btn { width: 40px; height: 40px
}
  .chat-actions #chatPinnedBtn, .chat-actions #chatAttachmentsBtn { display: none
}
  .composer-btn#emojiBtn { display: grid
}
  .message-list { padding: 16px 8px
}
  .message-row { grid-template-columns: 36px minmax(0,1fr); gap: 10px; padding: 10px 36px 10px 8px
}
  .msg-avatar { width: 36px; height: 36px; font-size: 13px
}
  .msg-content { font-size: 15px; line-height: 1.55
}
  .composer-wrap { padding: 8px 12px 12px
}
  .composer-box { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; padding: 8px; gap: 4px
}
  .composer-box textarea { width: 100%; font-size: 16px; padding: 8px; max-height: 25dvh
}
  .composer-tools { gap: 4px
}
  .composer-btn, .send-btn { width: 40px; height: 40px
}
  .composer-hint { display: none
}
  .social-hero { padding: 20px
}
  .social-hero h3 { font-size: 22px
}
  .social-dashboard-grid { grid-template-columns: 1fr
}
  .friend-actions { margin-left: auto
}
}
@media(max-width:760px) {
  :root { --ui-control: 44px
}
  .vh-app { height: 100dvh
}
  .server-rail { height: calc(68px + env(safe-area-inset-bottom)); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 12px; background: var(--background-secondary)
}
  .server-list { gap: 12px
}
  .server-logo, .server-chip, .server-action { width: 48px; height: 48px; border-radius: 16px
}
  .server-chip { border-radius: var(--avatar-radius,50%)
}
  .chat-panel { inset: 0 0 calc(68px + env(safe-area-inset-bottom)); height: calc(100dvh - 68px - env(safe-area-inset-bottom))
}
  .channel-sidebar, .members-panel.mobile-open { bottom: calc(68px + env(safe-area-inset-bottom)); height: calc(100dvh - 68px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 68px - env(safe-area-inset-bottom)); width: min(320px,calc(100vw - 24px))
}
  .channel-sidebar { left: 0
}
  .chat-header { padding-left: 12px; padding-right: 12px
}
  .user-panel-actions .icon-btn { width: 44px; height: 44px
}
  .channel-config-btn, .channel-favorite-btn { width: 36px; height: 36px; top: 4px
}
  .channel-config-btn { opacity: 1; transform: none
}
  .channel-favorite-btn { right: 40px
}
  .member-search input, .dm-search input, .modal input.form-control, .modal textarea.form-control, .modal select { font-size: 16px
}
  .modal-dialog { margin: 12px
}
  .modal-dialog-centered { min-height: calc(100% - 24px)
}
  .modal-dialog-scrollable { height: calc(100% - 24px)
}
  .modal-modern { border-radius: 16px
}
  .modal-modern .modal-header { padding: 20px
}
  .modal-modern .modal-title { font-size: 20px
}
  .modal-modern .modal-body { padding: 20px
}
  .modal-modern .modal-footer { padding: 16px 20px
}
  .account-security-modal .modal-body { padding: 0
}
  .account-security-content { padding: 20px
}
  .account-security-nav { padding: 8px; gap: 4px
}
  .security-nav-item { font-size: 13px; padding: 10px 12px
}
  .settings-grid { grid-template-columns: repeat(2,minmax(0,1fr))
}
  .settings-stat b { font-size: 18px
}
  .role-editor-top { grid-template-columns: minmax(0,1fr) 72px
}
  .call-stage, .call-stage.is-floating { padding: 16px 12px max(16px,env(safe-area-inset-bottom)); border-radius: 0; gap: 12px; max-height: 100dvh
}
  .call-stage-head h2 { font-size: 18px
}
  .call-kicker { font-size: 10px
}
  .call-stage-head { flex-wrap: wrap; gap: 12px
}
  .call-stage-head-actions { margin-left: auto; gap: 4px
}
  .call-icon-btn { min-width: 40px; min-height: 40px; padding: 8px
}
  .call-stage-controls { gap: 8px
}
  .call-stage-controls button, .call-stage-controls .voice-controls button { min-width: 52px!important; height: 56px!important; padding: 6px 8px!important
}
  .call-stage-controls button span { font-size: 11px
}
  .call-stage-controls .voice-controls { gap: 8px!important
}
  .call-tile-bottom { font-size: 12px; padding: 24px 8px 8px
}
  .call-tile-bottom button { width: 32px; height: 32px
}
  .call-tile-state { gap: 4px
}
  .inbox-summary { grid-template-columns: 1fr
}
  .incoming-call-card .modal-body { padding: 32px 20px
}
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto!important; animation-duration: .01ms!important; transition-duration: .01ms!important
}
}

/* Source: community.css */
/* VoiceHub 20: compact controls, reliable overlays and community components. */
:root { --ui-radius-sm: 8px; --ui-radius-md: 10px; --ui-radius-lg: 16px
}
.chat-header { min-height: 72px; height: 72px; padding: 12px 20px
}
.chat-actions { width: auto; gap: 4px; flex-shrink: 0; min-height: 40px
}
.chat-actions #chatMoreBtn { order: 10
}
.chat-actions :is(#inboxBtn,#chatAppearanceBtn,#toggleMembers,#chatPinnedBtn,#chatAttachmentsBtn,#profileShareBtn) { display: none!important
}
.user-panel-actions { grid-column: 2; justify-content: flex-end
}
.user-panel-actions :is(#notificationSettingsBtn,#soundToggle,#themeToggle,#logout) { display: none!important
}
.user-panel { grid-template-columns: 40px minmax(0,1fr); gap: 8px; padding: 12px 16px
}
.user-panel-actions { position: absolute; right: 8px; bottom: 12px
}
.user-panel>.min-w-0 { padding-right: 80px
}
.user-panel-name { overflow: hidden; text-overflow: ellipsis
}
.user-panel-actions .icon-btn { width: 36px; min-width: 36px; height: 36px
}
.user-panel #connectionState { font-size: 11px
}
.channel-heading-icon { width: 36px; height: 36px; border-radius: 9px
}
.channel-sidebar .sidebar-toolbar { display: none
}
.channel-scroll { padding-top: 12px
}
.server-showcase { padding: 12px 16px
}
.server-showcase-top .workspace-label { display: none
}
.server-showcase-top { position: absolute; right: 8px; top: 10px
}
.server-showcase-body { margin: 0; padding-right: 64px; gap: 8px
}
.server-showcase-body .server-mini-icon { display: none
}
.server-title { font-size: 15px
}
.server-subtitle { font-size: 11px
}
.server-showcase-top .glass-icon-btn { width: 32px; min-width: 32px; height: 32px
}
.channel-item { padding-right: 70px!important; min-height: 42px
}
.channel-entry .channel-config-btn,.channel-entry .channel-favorite-btn { opacity: 0; transform: none
}
.channel-entry:hover .channel-config-btn,.channel-entry:hover .channel-favorite-btn,.channel-entry:focus-within .channel-config-btn,.channel-entry:focus-within .channel-favorite-btn,.channel-entry .channel-favorite-btn.active { opacity: 1
}
.channel-favorite-btn svg,.dm-favorite-btn svg { display: block; flex: none; width: 18px; height: 18px
}
.channel-favorite-btn.active svg,.dm-favorite-btn.active svg { fill: currentColor
}
.server-chip img,.server-mini-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit
}
.server-chip img { border-radius: var(--avatar-radius,50%)
}
.server-chip { overflow: hidden
}
.message-row { padding-top: 7px; padding-bottom: 7px; margin: 0
}
.message-row.own-message .msg-avatar { box-shadow: none
}
.message-actions button { width: 32px; height: 32px
}
.message-actions .bi { font-size: 16px
}
.msg-avatar,.user-avatar,.member-avatar,.profile-avatar,.member-profile-avatar,.public-profile-avatar,.inapp-profile-avatar,.mini-profile-avatar,.channel-heading-icon,.channel-occupant-avatar,.dm-avatar-wrap { flex-shrink: 0; overflow: hidden
}
:is(.msg-avatar,.user-avatar,.member-avatar,.profile-avatar,.member-profile-avatar,.public-profile-avatar,.inapp-profile-avatar,.mini-profile-avatar,.channel-heading-icon,.channel-occupant-avatar,.dm-avatar-wrap) img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover
}
.channel-heading-icon #channelIcon { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden
}
.composer-wrap { padding: 8px 16px 12px
}
.composer-hint { display: none
}
.composer-box { border-radius: 10px
}
#stickerBtn { display: none
}
/* Add menu includes stickers. */
#chatActionMenu,.message-context-menu,.participant-context-menu { position: fixed; z-index: 2400; max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid var(--border-strong); border-radius: 10px; padding: 6px; background: var(--background-elevated); box-shadow: var(--shadow-float)
}
:is(#chatActionMenu,.message-context-menu,.participant-context-menu)>button { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: center; text-align: left; width: 100%; min-height: 40px; padding: 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-primary); font-size: 13px; line-height: 20px
}
:is(#chatActionMenu,.message-context-menu,.participant-context-menu)>button.danger { color: var(--danger)
}
:is(#chatActionMenu,.message-context-menu,.participant-context-menu)>button>i { font-size: 17px; line-height: 1; width: 22px; text-align: center
}
#messageSearchResults { position: fixed!important; z-index: 2450!important; overflow: auto; overscroll-behavior: contain; border-radius: 10px; pointer-events: auto; box-shadow: var(--shadow-float)
}
#picker { position: fixed!important; z-index: 2460; max-height: min(440px,calc(100dvh - 100px)); border-radius: 12px; overscroll-behavior: contain
}
#picker.emoji-picker { padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; background: var(--background-elevated)
}
#picker.d-none { display: none!important
}
.emoji-toolbar { display: flex; gap: 8px; flex: none; align-items: center
}
.emoji-toolbar input { min-width: 0; font-size: 16px
}
.emoji-toolbar .icon-btn { flex: none; min-height: 40px; font-size: 16px; background: transparent
}
.emoji-categories { display: flex; gap: 4px; overflow-x: auto; flex: none; padding-bottom: 4px
}
#picker .emoji-categories button { font: 500 12px var(--ui-font); white-space: nowrap; min-height: 32px; padding: 6px 10px; border-radius: 6px; background: transparent; color: var(--text-secondary)
}
#picker .emoji-categories button.active { color: var(--accent); background: var(--accent-soft)
}
.emoji-results { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; overflow-y: auto; align-content: start
}
#picker .emoji-option { height: 40px; min-height: 40px; padding: 0; font: 26px 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; background: transparent; line-height: 40px; border-radius: 6px; overflow: hidden
}
.emoji-empty { grid-column: 1/-1; font-size: 13px; text-align: center; color: var(--text-secondary); padding: 12px
}
.modal-modern .modal-footer { flex-wrap: wrap
}
.modal-modern .modal-header>.min-w-0 { flex: 1; min-width: 0
}
.modal-footer>.btn { margin: 0; min-width: 96px
}
.mini-profile { border: 1px solid var(--border-strong); border-radius: 16px; background: var(--background-elevated); box-shadow: var(--shadow-float)
}
.mini-profile .modal-body { padding: 24px; position: relative
}
.mini-profile .btn-close { position: absolute; right: 16px; top: 16px
}
.mini-profile-avatar { width: 72px; height: 72px; border-radius: var(--avatar-radius,50%); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 24px; font-weight: 650; margin-bottom: 16px
}
.mini-profile h3 { font-size: 20px; font-weight: 650; margin-bottom: 4px; overflow-wrap: anywhere
}
#miniProfileUsername { font-size: 13px; color: var(--text-tertiary); overflow-wrap: anywhere
}
#miniProfileBio { font-size: 14px; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 120px; overflow: auto
}
.mini-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px
}
.mini-profile-actions .btn { flex: 1; white-space: nowrap; font-size: 13px
}
.verified-badge { color: #6da8ff; display: inline-block; font-size: 14px!important; margin-left: 6px; vertical-align: middle; flex: none
}
html[data-app-theme=light] .verified-badge { color: #2770c3
}
.wallet-balance { display: grid; gap: 6px; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--background-secondary); margin-bottom: 24px
}
.wallet-balance strong { font-size: 32px
}
.wallet-balance span,.wallet-balance small { color: var(--text-secondary)
}
.wallet-entry { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border)
}
.wallet-entry>div { min-width: 0; overflow-wrap: anywhere
}
.wallet-entry small { display: block; color: var(--text-tertiary)
}
.wallet-entry strong { white-space: nowrap
}
.credit { color: var(--success)
}
.debit { color: var(--danger)
}
.message-poll { width: min(100%,420px); padding: 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--background-secondary); margin-top: 8px
}
.message-poll h4 { font-size: 16px; line-height: 1.5; margin: 0 0 12px; overflow-wrap: anywhere
}
.poll-option { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; margin-top: 6px; text-align: left; color: var(--text-primary); background: linear-gradient(to right,var(--accent-soft) var(--poll-percent),transparent var(--poll-percent)); font-size: 14px; min-height: 44px
}
.poll-option span { overflow-wrap: anywhere; min-width: 0
}
.poll-option b { white-space: nowrap; color: var(--text-secondary); font-size: 12px
}
.poll-option.selected { border-color: var(--accent)
}
.poll-option:disabled { opacity: 1; cursor: default
}
.poll-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-tertiary); margin-top: 12px
}
.poll-footer button { border: 0; background: transparent; color: var(--accent); padding: 0; font-size: 12px
}
.system-message { display: block; text-align: center; color: var(--text-tertiary); font-size: 12px; padding: 12px!important
}
.post-photo-preview img { width: 100%; max-height: 240px; object-fit: contain; border-radius: 8px; margin-top: 12px
}
.audio-attachment { width: min(100%,420px); display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; margin-top: 8px
}
.audio-attachment b { font-size: 13px; overflow-wrap: anywhere
}
.audio-attachment audio { width: 100%; height: 40px; max-width: 100%
}
.server-identity-edit { margin-bottom: 20px
}
.server-photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px
}
.server-photo-preview { width: 64px; height: 64px; border: 1px solid var(--border); border-radius: var(--avatar-radius,50%); display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); font-size: 22px; color: var(--accent)
}
.server-photo-preview img { width: 100%; height: 100%; object-fit: cover
}
.call-stage { border-radius: 12px; padding: 20px; gap: 16px; border: 1px solid var(--border-strong)
}
.call-stage-head h2 { font-size: 18px; font-weight: 600
}
.call-kicker { font-size: 10px; letter-spacing: .06em
}
.call-layouts { border-radius: 8px; background: transparent; padding: 3px
}
.call-layouts button { border-radius: 5px; min-height: 34px
}
.call-participant-tile { border: 1px solid var(--border-strong); border-radius: 10px; background: var(--background-secondary)
}
.call-participant-tile.is-speaking { box-shadow: inset 0 0 0 1px var(--success); border-color: var(--success)
}
.call-tile-avatar { width: 72px; height: 72px; border-radius: var(--avatar-radius,50%); font-size: 24px; background: var(--surface-hover); color: var(--text-secondary)
}
.call-stage-controls { padding-top: 12px
}
.call-stage-controls .voice-controls { display: contents!important
}
.call-stage-controls button,.call-stage-controls .voice-controls button { height: 52px!important; min-width: 68px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--background-secondary)
}
.call-stage-controls button span { font-size: 11px
}
.call-tile-bottom { background: linear-gradient(transparent,#10121dd9)
}
.call-tile-bottom button { border-radius: 6px; width: 32px; height: 32px
}
@container(max-width:780px) {
  .chat-header { flex-direction: row; align-items: center; min-height: 68px; height: 68px; padding: 12px; gap: 8px
}
  .channel-heading { width: auto; flex: 1; min-width: 0
}
  .channel-heading>.min-w-0 { min-width: 0
}
  .channel-title { font-size: 15px
}
  .channel-meta { display: none
}
  .chat-actions { width: auto; flex: none; gap: 2px; justify-content: flex-end
}
  .chat-actions .header-action-btn { width: 36px; min-width: 36px; height: 40px
}
  .channel-heading-icon { display: none
}
  .chat-header.search-open { margin-bottom: 52px
}
  .chat-header.search-open .message-search-wrap { z-index: 95; top: calc(100% + 4px)
}
}
@media(max-width:760px) {
  .channel-entry .channel-config-btn { opacity: 1
}
  .channel-entry .channel-favorite-btn:not(.active) { opacity: 0
}
  .channel-entry:hover .channel-favorite-btn { opacity: 1
}
  .channel-item { padding-right: 42px!important
}
  .channel-entry:has(.channel-favorite-btn.active) .channel-item { padding-right: 78px!important
}
  .chat-panel { height: calc(var(--vh-viewport-height,100dvh) - 68px - env(safe-area-inset-bottom)); grid-template-rows: auto minmax(0,1fr) auto
}
  .composer-wrap { padding: 6px 10px 10px
}
  .composer-box { display: flex; align-items: flex-end; padding: 5px; gap: 2px; min-height: 50px
}
  .composer-box textarea { width: 0; flex: 1; min-width: 0; min-height: 40px; max-height: 120px; font-size: 16px; padding: 8px 4px; line-height: 24px
}
  .composer-tools { display: contents
}
  .composer-box #voiceMessageBtn { display: none
}
  .composer-box .composer-btn,.composer-box .send-btn { width: 36px; min-width: 36px; height: 40px; flex: none
}
  .composer-box #fileBtn { background: transparent
}
  .composer-box:has(#fileBtn.d-none) #postBtn { display: grid
}
  .message-list { padding: 12px 4px
}
  .message-row { grid-template-columns: 32px minmax(0,1fr); gap: 8px; padding: 7px 32px 7px 8px
}
  .msg-avatar { width: 32px; height: 32px; border-radius: var(--avatar-radius,50%)
}
  .msg-content { font-size: 15px; line-height: 1.5
}
  .msg-user.msg-profile-trigger { font-size: 13px
}
  .msg-time { font-size: 10px
}
  .message-actions { right: 0; top: 3px
}
  .message-actions button { width: 28px; min-width: 28px
}
  .user-panel-actions .icon-btn { width: 36px; min-width: 36px; height: 40px
}
  .user-panel { padding: 12px
}
  .modal-dialog { margin: 10px
}
  .modal-dialog-centered { min-height: calc(100% - 20px)
}
  .modal-dialog-scrollable { height: calc(100% - 20px)
}
  .modal-modern .modal-header,.modal-modern .modal-body { padding: 18px
}
  .modal-modern .modal-footer { padding: 12px 18px; justify-content: flex-end
}
  .modal-modern .modal-title { font-size: 18px
}
  .call-stage,.call-stage.is-floating { padding: 12px; border-radius: 0
}
  .call-stage-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px
}
  .call-stage-controls button,.call-stage-controls .voice-controls button { width: 100%!important; min-width: 0!important; border-radius: 7px; height: 50px!important
}
  .call-stage-controls button span { font-size: 10px
}
  .call-stage-head { gap: 6px
}
  .call-stage-head h2 { font-size: 16px
}
  .call-stage-tiles.has-focus .is-main { min-height: 160px
}
  #picker .emoji-option { font-size: 25px
}
}
@media(max-height:500px) and (orientation:landscape) {
  .chat-header { height: 56px; min-height: 56px
}
  .call-stage-head { flex-wrap: nowrap
}
  .call-stage-controls { display: flex; flex-wrap: nowrap
}
  .call-stage-controls button,.call-stage-controls .voice-controls button { height: 44px!important; flex: 1
}
  .call-stage-controls button span { display: none!important
}
  .call-stage-tiles.has-focus .is-main { min-height: 100px
}
  .call-stage-head h2 { font-size: 14px
}
}
.chat-actions #chatAppearanceBtn:not(.d-none) { display: none!important
}
.emoji-results { flex: 1; min-height: 0
}
#picker .emoji-empty { font-size: 13px; min-height: 40px
}
.member-inline-danger { display: none
}
/* Available in the participant menu. */
.incoming-call-card { background: var(--background-elevated)
}
.incoming-call-avatar { border-radius: var(--avatar-radius,50%); box-shadow: none; background: var(--accent-soft); color: var(--accent)
}
.incoming-call-actions i { border-radius: 50%
}
#callPrimaryControls { display: contents
}
.call-stage-controls #leaveVoice { order: 9
}
.call-stage-controls .voice-controls button span { display: block
}
@media(max-width:760px) {
  .call-stage-controls .voice-controls button span { display: block!important; font-size: 10px
}
  .call-stage-controls { align-items: stretch
}
}
@media(max-height:500px) and (orientation:landscape) {
  .call-stage-controls .voice-controls button span { display: none!important
}
}
.call-stage-controls button,.call-stage-controls .voice-controls button { display: flex!important; flex-direction: column; justify-content: center; align-items: center; padding: 6px!important
}
.call-stage-controls .voice-controls button span { width: auto; max-width: 100%; height: auto; opacity: 1
}
#confirmModal[data-destructive="false"] .danger-modal-icon { color: var(--accent); background: var(--accent-soft)
}
.call-stage-controls button>i { flex: 0 0 auto; line-height: 22px; height: 22px
}
.call-stage-controls button>span { flex: 0 0 auto; line-height: 14px; height: 14px!important; min-height: 14px
}
.call-stage-controls button,.call-stage-controls .voice-controls button { gap: 2px
}

/* Source: experience.css */
/* v21: understated controls and shared, responsive surfaces. */
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none
}
input::-ms-clear { display: none
}
.hidden-for-me { display: none!important
}
.no-composer #composer { display: none!important
}
#channelIcon img,.call-tile-avatar img,.invite-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--avatar-radius,50%); display: block
}
#channelIcon { overflow: hidden; flex-shrink: 0
}
.call-tile-avatar { overflow: hidden
}
.experience-hint { font-size: 13px; color: var(--muted,#8e94a7); line-height: 1.6; margin-top: 16px
}
.privacy-form { display: grid; gap: 18px
}
.privacy-form label { display: grid; gap: 8px; font-size: 14px
}
.experience-results { display: grid; gap: 8px; margin-top: 16px
}
.experience-person,.call-person-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 8px; border-bottom: 1px solid var(--border,#30333d)
}
.experience-person-copy { flex: 1; min-width: 0; display: grid; gap: 3px
}
.experience-person-copy b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.experience-person-copy small { font-size: 12px; color: var(--muted,#9095a7)
}
.experience-person .friend-avatar,.call-person-row .friend-avatar { width: 36px; height: 36px; flex: 0 0 36px; overflow: hidden; border-radius: var(--avatar-radius,50%)
}
.experience-person .btn { padding: 6px 10px; font-size: 12px
}
.gift-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px
}
.gift-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 8px; border: 1px solid var(--border,#343643); border-radius: 12px; background: var(--panel,#1c1e29); color: inherit; text-align: center; min-width: 0
}
.gift-card b,.gift-card small { max-width: 100%; overflow-wrap: anywhere
}
.gift-card small { font-size: 12px; color: var(--muted,#9095a7)
}
.gift-art { font-size: 40px; line-height: 1.3
}
.gift-review { text-align: center; font-size: 72px; margin: 8px 0 20px
}
.experience-private { padding: 28px; text-align: center; color: var(--muted,#9095a7)
}
.invite-preview { text-align: center; max-width: 480px; margin: 0 auto; padding: 20px; overflow-wrap: anywhere
}
.invite-avatar { width: 80px; height: 80px; border-radius: var(--avatar-radius,50%); overflow: hidden; display: grid; place-items: center; background: var(--panel,#252837); font-size: 28px; margin: 0 auto 16px
}
.invite-preview h3 { font-size: 22px
}
.invite-preview p { font-size: 14px; line-height: 1.6
}
.invite-preview small { color: var(--muted,#9095a7)
}
#authView>.invite-preview { grid-column: 1/-1; background: var(--panel,#1c1e29); border: 1px solid var(--border,#343643); border-radius: 16px; margin: 20px auto; width: calc(100% - 32px)
}
#callStagePeople { padding: 8px; max-height: min(50vh,420px); overflow: auto
}
#callStagePeople .call-person-row { width: 100%; text-align: left; background: transparent; border-radius: 0
}
#callStagePeople .icon-btn { width: 34px; height: 34px; min-width: 34px; padding: 0; display: grid; place-items: center
}
#callStagePeople .call-person-row:last-child { border-bottom: 0
}
#chatMoreBtn.has-alert { position: relative
}
#chatMoreBtn.has-alert::after { content: ''; position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent,#8878ff)
}
.panel-resizer { display: none
}
.resizing-panels { cursor: col-resize; user-select: none
}
@media(min-width:1281px) {
  .vh-app { grid-template-columns: 72px var(--vh-left-width,272px) minmax(0,1fr) var(--vh-right-width,272px)!important
}
  .vh-app.members-collapsed { grid-template-columns: 72px var(--vh-left-width,272px) minmax(0,1fr)!important
}
  #channelSidebar,#membersPanel { position: relative
}
  .panel-resizer { display: block; position: absolute; top: 0; bottom: 0; width: 7px; z-index: 8; cursor: col-resize; touch-action: none
}
  .panel-resizer.left { right: -3px
}
  .panel-resizer.right { left: -3px
}
  .panel-resizer:hover { background: color-mix(in srgb,var(--accent,#8878ff) 25%,transparent)
}
}
@media(max-width:480px) {
  .gift-grid { grid-template-columns: repeat(2,minmax(0,1fr))
}
  #deleteChoiceModal .modal-footer { display: grid; grid-template-columns: 1fr; width: 100%
}
  .call-person-row { gap: 8px; padding: 10px 2px
}
  .call-person-row .experience-person-copy small { font-size: 11px
}
}
.resizing-panels .vh-app { transition: none!important
}
#callStagePeople { width: min(320px,calc(100% - 24px)); height: auto; bottom: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--background-elevated)
}
.call-person-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}

/* Source: expansion.css */
/* v22. Flat surfaces, predictable spacing and bounded media. */
.server-showcase::before,.server-showcase::after,.server-showcase-glow,.server-texture { pointer-events: none!important
}
#serverSettings,#copyInvite { position: relative; z-index: 5; pointer-events: auto; flex-shrink: 0
}
.server-showcase .d-flex.gap-1 { position: relative; z-index: 6; isolation: isolate
}
.server-chip img,.server-photo-preview img { display: block!important; width: 100%!important; height: 100%!important; max-width: 100%; object-fit: contain!important; flex-shrink: 0
}
.server-photo-preview { aspect-ratio: 1; overflow: hidden; flex-shrink: 0
}
.settings-sidebar button { display: flex; align-items: center; gap: 10px; min-width: 0
}
.settings-sidebar .bi,.btn>.bi { flex-shrink: 0
}
.member-item-actions { display: flex; align-items: center; min-width: 0; gap: 3px; width: 100%
}
.member-item-actions>.member-item { flex: 1; min-width: 0
}
.member-quick-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 2px
}
.member-quick-actions .mini-action { width: 30px; height: 34px; padding: 0; display: grid; place-items: center
}
.member-item-actions .member-role-badge { display: none
}
.dm-entry { display: flex!important; align-items: center; position: relative
}
.dm-entry>.dm-item { flex: 1; min-width: 0; padding-right: 6px!important
}
.dm-entry>.dm-favorite-btn { position: static!important; inset: auto!important; transform: none!important; flex: 0 0 28px; width: 28px; height: 34px; margin-right: 4px; opacity: 1
}
.dm-kind-icon { position: static!important
}
.dm-item-tail { flex: 0 0 auto; min-width: 16px
}
.dm-item-name { align-items: center; gap: 5px
}
.muted-indicator { font-size: 12px; opacity: .65; flex-shrink: 0; margin-inline-start: 5px
}
.saved-messages-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin: 8px 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: 9px
}
.saved-messages-btn i { font-size: 18px
}
#chatPanel.direct-chat .message-row:not(.system-message) { display: flex; width: fit-content; max-width: 82%; margin: 6px auto 6px 0; padding: 10px 12px; gap: 9px; border: 1px solid var(--border); border-radius: 12px 12px 12px 3px; background: var(--background-elevated,#1b1e29)
}
#chatPanel.direct-chat .message-row.own-message:not(.system-message) { margin-left: auto; margin-right: 0; background: color-mix(in srgb,var(--accent,#8275f9) 13%,var(--background-elevated,#1b1e29)); border-radius: 12px 12px 3px 12px
}
#chatPanel.direct-chat .message-row .msg-avatar { display: none
}
#chatPanel.direct-chat .message-row .msg-body { flex: 1; min-width: 0
}
#chatPanel.direct-chat .msg-content { overflow-wrap: anywhere
}
#chatPanel.direct-chat .message-actions { top: -24px; right: 6px
}
.message-video { display: block; width: min(100%,560px); max-height: 420px; border-radius: 10px; background: #07090f
}
.voice-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px
}
.voice-message { max-width: 100%; min-width: 0
}
.voice-message-main { min-width: 0
}
.message-context-menu,.participant-context-menu { padding: 5px; border-radius: 10px; box-shadow: 0 12px 32px #0004; width: 250px; max-width: calc(100vw - 24px)
}
.message-context-menu>button,.participant-context-menu>button { min-height: 36px; padding: 8px 10px; gap: 10px; font-size: 13px; border-radius: 6px
}
.quick-reactions { display: flex; gap: 2px; padding: 5px 0 9px; margin-bottom: 4px; border-bottom: 1px solid var(--border)
}
.quick-reactions button { flex: 1; min-width: 0; padding: 3px!important; border: 0; font-size: 21px; background: none; min-height: 36px
}
.paid-post { display: grid; gap: 10px; min-width: 0
}
.paid-post small { font-size: 10px; letter-spacing: .12em; color: var(--text-secondary)
}
.paid-post h4 { margin: 0
}
.paid-post p { font-size: 13px; color: var(--text-secondary); margin: 0
}
.paid-post .btn { justify-self: start; white-space: normal; text-align: left
}
.message-poll details { font-size: 12px; line-height: 1.7; padding: 8px 0
}
.message-poll details div { overflow-wrap: anywhere
}
#callStage { border: 1px solid var(--border,#343744)!important; border-radius: 12px!important; background: var(--background-primary,#11131a)!important; box-shadow: 0 24px 80px #0006!important; overflow: hidden
}
#callStage::before,#callStage::after { display: none!important
}
.call-stage-header { background: var(--background-elevated,#191c25)!important; border-bottom: 1px solid var(--border)!important; padding: 14px 18px!important; border-radius: 0!important
}
.call-stage-header small { letter-spacing: .04em!important; font-size: 10px!important
}
#callStageGrid { background: none!important; padding: 14px; gap: 10px
}
.call-participant-tile { border: 1px solid var(--border,#343744)!important; border-radius: 9px!important; background: var(--background-elevated,#191c25)!important; box-shadow: none!important
}
.call-participant-tile.is-speaking { border-color: var(--accent,#8b7dfa)!important; box-shadow: inset 0 0 0 1px var(--accent,#8b7dfa)!important
}
.call-tile-bottom { border-radius: 0; border-top: 1px solid #ffffff10
}
.call-tile-name { font-size: 12px!important
}
.call-tile-avatar { border-radius: var(--avatar-radius,50%)!important; box-shadow: none!important; background: var(--background-secondary,#262a37)!important
}
.call-stage-controls { border-top: 1px solid var(--border)!important; background: var(--background-elevated,#191c25)!important; border-radius: 0!important; padding: 12px!important; gap: 8px!important
}
.call-participant-tile.is-mirrored-camera video { transform: scaleX(-1)
}
.profile-history-image { display: block; width: 100%; height: min(55vh,430px); object-fit: contain; border-radius: 10px; background: var(--background-primary,#13151e)
}
.photo-history-caption { text-align: center; color: var(--text-secondary); margin: 12px 0 0
}
.inapp-profile-avatar[role=button],#miniProfileAvatar { cursor: pointer
}
#usernameSettingsBtn { margin-right: 8px
}
.message-notice { position: fixed; right: 20px; top: max(20px,env(safe-area-inset-top)); z-index: 1095; width: min(320px,calc(100vw - 32px)); padding: 15px 18px; display: grid; gap: 4px; text-align: left; color: var(--text-primary,#eee); background: var(--background-elevated,#202330); border: 1px solid var(--border,#3b3e4a); border-radius: 12px; box-shadow: 0 12px 32px #0005
}
.message-notice[hidden] { display: none
}
.message-notice span { font-size: 13px; color: var(--text-secondary,#a4a9b9)
}
.persistent-audio { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(520px,calc(100vw - 24px)); display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border,#3b3e4a); border-radius: 10px; background: var(--background-elevated,#202330); box-shadow: 0 8px 28px #0004; z-index: 1060; color: var(--text-primary,#eee)
}
.persistent-audio[hidden] { display: none
}
.persistent-audio .btn { padding: 5px 8px; flex-shrink: 0
}
.persistent-audio-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px
}
.persistent-audio input { min-width: 30px; flex: 1; accent-color: var(--accent,#8b7dfa)
}
.persistent-audio small { white-space: nowrap; font-size: 10px
}
.dm-entry>.dm-item { display: flex!important; gap: 10px!important
}
.dm-avatar-wrap { flex: 0 0 36px
}
.dm-copy { flex: 1; min-width: 0
}
.dm-item-top { min-width: 0
}
.dm-item-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.dm-item-time { display: none
}
.dm-entry>.dm-favorite-btn:not(.active) { opacity: 0
}
.dm-entry:hover>.dm-favorite-btn,.dm-entry:focus-within>.dm-favorite-btn { opacity: 1
}
#callStage { padding: 0!important; gap: 0!important
}
.call-stage-head { padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--background-elevated)
}
.call-stage-body { padding: 14px
}
.call-stage-controls { margin: 0!important
}
.call-tile-bottom { padding: 9px 10px!important
}
.call-participant-tile:not(.has-video) .call-tile-avatar { transform: translateY(-18px)
}
@media(max-width:760px) {
  .call-stage-head { padding: 12px; flex-wrap: wrap
}
  .call-stage-body { padding: 10px
}
  .call-stage-tiles.has-focus .is-main { height: calc(100% - 140px); min-height: 220px
}
  .call-stage-tiles.has-focus>article:not(.is-main) { height: 130px
}
  .call-stage-head h2 { font-size: 15px
}
  .call-tile-bottom { gap: 5px; padding: 8px 6px!important
}
  .dm-entry>.dm-favorite-btn:not(.active) { opacity: 1
}
}
@media(max-width:600px) {
  #chatPanel.direct-chat .message-row:not(.system-message) { max-width: 92%; padding: 9px 11px
}
  .member-quick-actions .mini-action { width: 36px; height: 38px
}
  .message-context-menu>button,.participant-context-menu>button { min-height: 40px
}
  .voice-message { width: 100%
}
  .voice-label { max-width: 150px
}
  .persistent-audio { gap: 6px
}
  .persistent-audio-name { max-width: 86px
}
  .persistent-audio small { display: none
}
  #callStage { border-radius: 10px 10px 0 0!important
}
  .call-stage-header { padding: 11px 12px!important
}
  #callStageGrid { padding: 8px; gap: 6px
}
  .call-stage-controls { padding: 10px 6px max(10px,env(safe-area-inset-bottom))!important; gap: 5px!important
}
  .call-stage-controls button { min-width: 40px
}
  .modal-footer { gap: 8px
}
  .modal-footer>.btn { margin: 0; min-height: 40px; white-space: normal
}
  #photoHistoryModal .modal-footer { display: grid; grid-template-columns: 1fr 1fr
}
  .message-notice { right: 16px
}
}
#authView { padding-top: 0!important
}

/* Source: interface.css */
/* v23: one spacing system for the conversation shell and its surfaces. */
:root { --shell-header: 68px; --control-radius: 10px
}
html,#authView { scroll-behavior: smooth
}
html:has(#appView:not(.d-none)) { scroll-behavior: auto
}
.chat-header,.server-header,.members-header { box-sizing: border-box; min-height: var(--shell-header)!important; height: var(--shell-header)!important; margin: 0!important; border-bottom: 1px solid var(--border)!important
}
.chat-header { padding: 10px 16px!important; gap: 12px
}
.channel-heading { min-width: 0; gap: 10px
}
.channel-heading-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid!important; place-items: center; border-radius: 50%
}
.channel-heading-icon #channelIcon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--avatar-radius,50%); background: var(--surface-soft); font-size: 15px; font-weight: 700
}
.channel-meta { display: block!important; font-size: 11px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.channel-title[role=button] { cursor: pointer
}
.channel-title { font-size: 14px
}
.member-avatar,.dm-avatar-wrap,.channel-occupant-avatar,.inapp-profile-avatar,.profile-avatar { position: relative; overflow: visible!important
}
.member-avatar img,.dm-avatar img,.inapp-profile-avatar img,.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--avatar-radius,50%); display: block
}
.presence,.mini-presence,.inapp-profile-presence { position: absolute!important; right: -2px!important; bottom: -2px!important; z-index: 2; border: 3px solid var(--background-secondary)!important
}
.dm-entry { border: 0!important; border-radius: 12px; margin: 3px 0; background: transparent!important; min-width: 0; gap: 0
}
.dm-entry:has(.active) { background: var(--accent-soft)!important
}
.dm-entry>.dm-item { min-height: 66px; padding: 10px; border: 0; box-shadow: none; background: transparent; border-radius: 12px
}
.dm-entry>.dm-item::before,.dm-entry>.dm-item::after { display: none!important
}
.dm-avatar-wrap,.dm-avatar { width: 40px!important; height: 40px!important; flex-basis: 40px!important
}
.dm-avatar { border-radius: var(--avatar-radius,50%)
}
.dm-item-name { font-size: 13px; line-height: 1.4
}
.dm-item-name .dm-kind-icon { font-size: 12px; display: inline-block; margin-right: 5px; vertical-align: middle
}
.dm-item-preview { font-size: 12px; line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; display: block
}
.dm-copy { overflow: hidden
}
.dm-entry>.dm-favorite-btn { flex-basis: 28px!important; margin: 0 5px 0 0!important; position: static!important
}
.dm-item-tail:empty { display: none
}
.dm-section-head,.dm-list-label { position: static!important
}
.dm-list { padding-top: 6px
}
.message-search { gap: 8px; box-shadow: none!important
}
.message-search input { outline: 0!important
}
.message-search:focus-within { border-color: var(--border)!important; box-shadow: none!important
}
.message-search kbd { display: none!important
}
#closeSearchInterface { width: 26px; height: 26px; flex: 0 0 26px; padding: 0; color: var(--text-secondary)
}
.message-search-results { z-index: 1080!important; border-radius: 12px!important; box-shadow: 0 14px 40px #0002!important; overscroll-behavior: contain
}
.message-search-result { gap: 10px; min-height: 66px
}
.message-search-empty { padding: 24px!important; min-height: 130px!important
}
.message-search-head { padding: 10px 14px!important
}
.composer-box:focus-within { border-color: var(--border)!important; box-shadow: none!important
}
.draft-hint:has(#draftStatus:empty) { display: none!important
}
.composer-footer { display: none!important
}
.modal-footer { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 16px 20px
}
.modal-footer>.btn { margin: 0!important; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px
}
.invite-preview { padding: 20px 12px 26px
}
.invite-avatar { width: 88px; height: 88px; background: var(--surface-soft); border-radius: var(--avatar-radius,50%)
}
.invite-avatar img { object-fit: contain
}
.theme-choice { width: 100%; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; min-height: 46px
}
.theme-choice[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft)
}
.panel-resizer { z-index: 20!important
}
.panel-resizer::after { content: ''; position: absolute; top: 42%; bottom: 42%; width: 3px; left: 2px; border-radius: 4px; background: var(--border-strong,var(--border))
}
.panel-resizer:hover::after,.panel-resizer:focus-visible::after { background: var(--accent)
}
.inapp-profile { width: 100%; margin: 0 auto; border: 1px solid var(--border)!important; border-radius: 16px!important; box-shadow: none!important; background: var(--background-elevated)!important
}
.inapp-profile-banner { display: none!important
}
.inapp-profile-identity { padding: 28px!important; margin: 0!important; gap: 24px!important
}
.inapp-profile-avatar { width: 96px!important; height: 96px!important; flex: 0 0 96px!important; border: 0!important; border-radius: var(--avatar-radius,50%)!important; box-shadow: none!important; margin: 0!important
}
.profile-view-kicker { display: none
}
.inapp-profile h2 { font-size: 24px!important
}
.inapp-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px
}
.inapp-profile-actions button { min-height: 38px; box-shadow: none!important
}
.inapp-profile-tabs { overflow: auto; display: flex; flex-wrap: nowrap
}
.inapp-profile-tabs button { white-space: nowrap
}
.profile-cover { height: 60px!important; background: var(--background-elevated)!important; border-bottom: 1px solid var(--border)
}
.profile-cover-glow,.profile-cover-actions { display: none!important
}
.profile-avatar-wrap { margin-top: 0!important
}
.profile-body { padding: 22px!important
}
.profile-hero { padding: 20px!important
}
.profile-body [hidden] { display: none!important
}
.profile-accent-field { display: none!important
}
.profile-body>.btn { margin: 10px 8px 0 0
}
.profile-surface-list { padding: 24px!important
}
@container(max-width:780px) {
  .chat-header { flex-direction: row!important; align-items: center!important; height: 68px!important; min-height: 68px!important
}
  .channel-heading { width: auto!important; flex: 1!important
}
  .chat-actions { width: auto!important; flex: none!important; gap: 1px!important
}
  .chat-actions .header-action-btn { width: 32px!important; min-width: 32px!important
}
  .channel-heading-icon { width: 34px!important; height: 34px!important; flex-basis: 34px!important
}
  .channel-heading-icon #channelIcon { width: 34px; height: 34px
}
  .channel-meta { font-size: 10px
}
  .channel-context-badge,#channelContextBadge { display: none!important
}
  .chat-header.search-open { margin-bottom: 52px!important
}
  .chat-header.search-open .message-search-wrap { position: absolute!important; left: 10px!important; right: 10px!important; top: 72px!important; display: block!important
}
  .message-search { width: 100%!important
}
  .composer-box { display: flex!important; align-items: flex-end; gap: 3px!important; padding: 6px!important
}
  .composer-box textarea { width: 0!important; flex: 1!important; min-height: 38px!important; max-height: 130px
}
  .composer-tools { display: flex!important; gap: 1px!important
}
  .composer-btn,.send-btn { width: 34px!important; height: 38px!important
}
  .composer-tools #stickerBtn { display: none!important
}
  .composer-tools #voiceMessageBtn { display: grid!important
}
  .inapp-profile-identity { padding: 20px!important; gap: 16px!important
}
  .inapp-profile-avatar { width: 72px!important; height: 72px!important; flex-basis: 72px!important
}
  .inapp-profile-title-row { display: block!important
}
  .inapp-profile-status { margin-top: 8px
}
  .inapp-profile-actions { gap: 6px
}
  .profile-surface-list { padding: 12px!important
}
}
@media(max-width:760px) {
  .vh-app { height: var(--app-height,100dvh)!important; min-height: 0!important; grid-template-columns: minmax(0,1fr)!important; grid-template-rows: minmax(0,1fr)!important; overflow: hidden!important; padding: 0!important; gap: 0!important
}
  .chat-panel { grid-column: 1!important; grid-row: 1!important; height: var(--app-height,100dvh)!important; min-height: 0!important; padding-bottom: env(safe-area-inset-bottom)
}
  .server-rail { display: none!important
}
  .drawer-open:has(.channel-sidebar.mobile-open) .server-rail { display: flex!important; position: fixed!important; left: 0!important; top: var(--app-top,0px)!important; bottom: auto!important; width: 64px!important; height: var(--app-height,100dvh)!important; flex-direction: column!important; z-index: 1052!important; padding: 12px 6px!important; overflow-y: auto!important; overflow-x: hidden!important; border-right: 1px solid var(--border)
}
  .server-rail #serverList { flex-direction: column!important; width: 100%!important
}
  .channel-sidebar { position: fixed!important; left: 64px!important; top: var(--app-top,0px)!important; bottom: auto!important; width: calc(100vw - 84px)!important; max-width: 340px!important; height: var(--app-height,100dvh)!important; z-index: 1052!important; padding-bottom: env(safe-area-inset-bottom)
}
  .members-panel.mobile-open { top: var(--app-top,0px)!important; bottom: auto!important; height: var(--app-height,100dvh)!important; max-width: calc(100vw - 28px)!important; z-index: 1052!important
}
  .mobile-scrim.show { z-index: 1051!important; inset: 0!important
}
  .channel-sidebar .channel-list,.channel-sidebar .social-nav { min-height: 0; overflow-y: auto
}
  .dm-entry>.dm-item { min-height: 64px
}
  .dm-entry>.dm-favorite-btn { width: 26px!important; flex-basis: 26px!important
}
  .composer-wrap { padding: 8px!important; margin: 0!important
}
  .message-list { padding: 12px 10px!important
}
  .chat-header { padding: 8px!important; gap: 4px!important
}
  .channel-heading { gap: 6px
}
  .channel-title { font-size: 13px
}
  .modal-dialog { margin: 12px!important; max-width: calc(100vw - 24px)!important
}
  .modal-content { max-height: calc(var(--app-height,100dvh) - 24px)!important
}
  .modal-dialog-scrollable { height: calc(var(--app-height,100dvh) - 24px)!important
}
  .inapp-profile-identity { display: flex!important; flex-wrap: wrap
}
  .inapp-profile-copy { width: 100%; min-width: 0
}
  .inapp-profile-actions button { font-size: 12px; padding: 8px 10px
}
  .gift-grid { gap: 8px
}
}
@media(prefers-reduced-motion:reduce) {
  html,#authView { scroll-behavior: auto
}
}
.mobile-scrim:not(.show) { visibility: hidden; pointer-events: none
}
@media(max-width:760px) {
  .channel-sidebar,.members-panel.mobile-open { max-height: var(--app-height,100dvh)!important
}
}
.server-showcase,.members-topbar { box-sizing: border-box; min-height: 68px!important; height: 68px!important; max-height: 68px!important; flex-shrink: 0; padding: 12px 16px!important; border-bottom: 1px solid var(--border)
}
.server-showcase-top { position: absolute!important; right: 8px; top: 14px!important; z-index: 5
}
.server-showcase-top .workspace-label { display: none!important
}
.server-showcase-body { margin: 0!important; min-height: 43px; align-items: center
}
.server-showcase-body>.min-w-0 { padding-right: 66px; min-width: 0; width: 100%
}
.server-showcase:has(#serverSettings.d-none):has(#copyInvite.d-none) .server-showcase-body>.min-w-0 { padding-right: 0
}
.server-subtitle,.members-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px!important
}
.server-title { font-size: 14px!important
}
.members-topbar>div { min-width: 0
}
.right-panel-tabs { gap: 3px!important
}
.right-panel-tabs button { min-width: 0
}
.right-panel-tabs button span { font-size: 10px; overflow: hidden; text-overflow: ellipsis; max-width: 100%
}
.inapp-profile-hero { background: var(--background-elevated)!important; box-shadow: none!important; border: 0!important; border-bottom: 1px solid var(--border)!important; border-radius: 0!important
}
.inapp-profile-copy { padding-top: 0!important
}
.inapp-profile-identity { align-items: center!important; grid-template-columns: 96px minmax(0,1fr)!important
}
.inapp-profile-grid { grid-template-columns: minmax(0,1.5fr) minmax(220px,1fr)
}
.inapp-profile-card { box-shadow: none!important; border-radius: 12px!important
}
.inapp-profile-bio { min-height: 100px!important
}
.profile-inline-action { font-size: 12px!important
}
.inapp-profile-card h4,.inapp-profile-card p { font-size: 13px!important
}
.public-profile-page { background: var(--background-primary); color: var(--text-primary)
}
.public-profile-shell { width: min(920px,calc(100% - 32px)); margin: 0 auto; padding: 24px 0
}
.public-profile-banner { display: none!important
}
.public-profile-card { background: var(--background-elevated)!important; box-shadow: none!important; border-radius: 16px!important
}
.public-profile-main { padding: 28px!important
}
.public-profile-avatar-wrap { margin: 0!important
}
.public-profile-heading { padding-top: 0!important
}
.public-profile-avatar { width: 96px!important; height: 96px!important; border-radius: var(--avatar-radius,50%)!important; border: 0!important
}
.public-profile-grid { gap: 16px
}
.public-profile-panel { border-radius: 12px!important; box-shadow: none!important
}
@media(max-width:760px) {
  .composer-box textarea { height: 38px; padding: 8px 4px!important; line-height: 22px!important; white-space: pre-wrap
}
  .inapp-profile-grid { grid-template-columns: 1fr
}
  .public-profile-main { padding: 20px!important
}
  .public-profile-heading { width: 100%
}
  .public-profile-name-row { flex-direction: column; align-items: flex-start
}
  .public-profile-grid { grid-template-columns: 1fr
}
  .message-actions { opacity: 0!important; pointer-events: none!important
}
  .message-row:focus-within .message-actions { opacity: 1!important; pointer-events: auto!important
}
}
.removed-message { display: none!important
}
.forward-credit { font-size: 11px; color: var(--accent); border-left: 2px solid var(--accent); padding-left: 8px; margin-bottom: 8px
}
.forward-targets { display: grid; gap: 8px; margin-top: 16px
}
.forward-targets button { display: flex; align-items: center; gap: 12px; text-align: left
}
.forward-targets .friend-avatar { width: 34px; height: 34px; flex: 0 0 34px
}
.message-view-count { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-tertiary)
}
.channel-forwarding-setting { display: flex; align-items: center; gap: 10px; padding: 20px 0 0; font-size: 13px
}
.chat-skeleton { display: grid; gap: 20px; padding: 24px 10px
}
.chat-skeleton div { height: 54px; width: 65%; max-width: 500px; border-radius: 12px; background: linear-gradient(90deg,var(--surface-soft),var(--surface-hover),var(--surface-soft)); background-size: 200% 100%; animation: none
}
.chat-skeleton div:nth-child(3n) { margin-left: auto; width: 48%
}
.chat-skeleton div:nth-child(4n) { height: 100px
}
@keyframes skeleton-glide {
  to { background-position: -200% 0
}
}
.attachment-review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px
}
.attachment-review-grid figure { margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 0
}
.attachment-review-grid img { width: 100%; height: 140px; object-fit: contain; border-radius: 6px; background: var(--surface-soft)
}
.attachment-review-grid figcaption { font-size: 12px; overflow-wrap: anywhere; margin: 8px 0 3px
}
.attachment-review-grid small { font-size: 11px; color: var(--text-secondary)
}
.attachment-review-grid figure>i { height: 100px; display: grid; place-items: center; font-size: 32px; color: var(--accent)
}
.message-post { border: 1px solid var(--border)!important; border-radius: 12px!important; background: var(--background-elevated)!important; padding: 20px!important; box-shadow: none!important; max-width: 640px; min-width: 0
}
.post-eyebrow { font-size: 10px; letter-spacing: .06em
}
.post-eyebrow em { display: none
}
.message-post h4 { font-size: 21px!important; line-height: 1.3!important; margin: 8px 0 12px!important; overflow-wrap: anywhere
}
.message-post-content { font-size: 14px; line-height: 1.7
}
.post-footer { padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--border); gap: 8px
}
.post-action { min-height: 36px; border-radius: 8px; padding: 6px 10px!important; gap: 6px
}
.post-action small { font-size: 11px
}
.paid-preview { width: 100%; height: 170px; border-radius: 8px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 30% 20%,#6961a366,transparent),var(--surface-soft); display: grid; place-items: center
}
.paid-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover
}
.paid-preview>i { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #13151e99; color: white; border: 1px solid #ffffff35; font-size: 22px
}
.locked-publication>small { margin-top: 8px
}
.locked-publication>.btn { width: 100%; justify-content: center; min-height: 42px
}
.media-preview-body { position: relative; background: #0e1017!important
}
.media-preview-body img { object-fit: contain; max-height: 75dvh
}
#mediaPreviewOpen[hidden] { display: none!important
}
@media(max-width:600px) {
  .message-post { padding: 14px!important
}
  .message-post h4 { font-size: 18px!important
}
  .post-action small { display: none
}
  .attachment-review-grid img { height: 110px
}
  .chat-skeleton { padding: 12px 0
}
  .paid-preview { height: 150px
}
}
.msg-image-preview { width: min(420px,100%); max-width: 100%; overflow: hidden
}
.msg-image-preview img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover
}
.message-video { aspect-ratio: 16/9; object-fit: contain
}
.voice-record-action { flex: 0 0 38px
}
.voice-record-bar.is-paused .voice-record-indicator { animation: none; opacity: .5
}
.video-note-preview { display: block; width: min(300px,100%); aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #11131a; margin: auto; transform: scaleX(-1)
}
.video-note-timer { text-align: center; font-variant-numeric: tabular-nums; color: var(--text-secondary); margin: 18px 0 0
}
.video-note-message { position:relative;width: min(280px,100%); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #11131a;padding:3px;background:conic-gradient(var(--accent) var(--video-progress,0%),var(--border) 0)
}
.video-note-player { width: 100%; height: 100%; aspect-ratio: 1!important; object-fit: cover; border-radius: 50%
}
.video-note-message video { max-height: none!important
}
.video-note-toggle { position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);display:grid;place-items:center;border:0;border-radius:50%;padding:0;background:transparent;color:white;font-size:32px }
.video-note-toggle i { display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#15182488;transition:opacity .15s }
.video-note-message.is-playing .video-note-toggle:not(:hover):not(:focus-visible) i { opacity:0 }
.video-note-time { position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:3px 8px;border-radius:20px;background:#151824aa;color:white;font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none }
.video-note-toggle:focus-visible { outline:3px solid var(--accent);outline-offset:-5px }
#videoNoteModal .modal-footer { justify-content: center
}
.persistent-audio #audioPlaybackRate { font-size: 12px; font-weight: 700; min-width: 42px; padding: 5px
}
#voiceMessageBtn { display: grid!important
}
@media(max-width:480px) {
  #videoNoteModal .modal-footer { display: flex
}
  .video-note-message { width: 230px
}
}
.call-stage-tiles.has-focus[data-tile-count="1"] { grid-template-columns: minmax(0,1fr)!important
}
#callStage.is-floating { min-width: 430px; min-height: 360px; max-width: calc(100vw - 16px); max-height: calc(var(--app-height,100dvh) - 16px); resize: both
}
#callStageHandle { cursor: move; touch-action: none
}
.call-stage-controls .unsupported-control,#callStage [hidden] { display: none!important
}
.call-stage-controls { flex-wrap: nowrap!important
}
.call-stage-controls .voice-controls { flex-wrap: nowrap!important
}
#callDevicesPanel { display: none!important
}
.missed-call-card { display: flex!important; align-items: center; flex-wrap: wrap; gap: 10px!important; width: fit-content!important; margin: 16px auto!important; padding: 14px!important; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); font-size: 12px
}
.missed-call-card>i { color: var(--danger); font-size: 20px
}
.missed-call-card>span { color: var(--text-secondary)
}
.missed-call-card>.btn { font-size: 12px
}
.call-stage-tiles { align-content: stretch
}
.call-stage-head-actions { flex-wrap: wrap
}
@media(max-width:760px) {
  #callStage.is-floating { min-width: 0; width: 100%!important; height: var(--app-height,100dvh)!important; max-width: 100%; max-height: var(--app-height,100dvh); resize: none; border-radius: 0!important
}
  .call-stage-controls { gap: 3px!important
}
  .call-stage-controls .voice-controls { gap: 3px!important
}
  .call-stage-controls button,.call-stage-controls .voice-controls button { min-width: 38px!important; width: 38px!important; padding: 4px!important
}
  .call-stage-controls button span { font-size: 8px
}
  .call-stage-head { flex-wrap: nowrap!important
}
  .call-stage-head h2 { font-size: 14px
}
  .call-stage-tiles.has-focus { display: flex!important
}
  .call-stage-tiles.has-focus>.is-main { order: -1; flex: 0 0 100%; height: calc(100% - 130px)!important; min-height: 180px
}
  .call-stage-tiles.has-focus[data-tile-count="1"]>.is-main { height: 100%!important
}
}
@media(max-width:760px) {
  #callStage .call-stage-controls { display: flex!important; justify-content: center!important; gap: 5px!important; padding: 9px 5px calc(9px + env(safe-area-inset-bottom))!important; flex-wrap: nowrap!important
}
  #callStage .voice-controls { display: flex!important; gap: 5px!important; flex-wrap: nowrap!important
}
  #callStage .call-stage-controls button { flex: 0 0 38px!important; min-height: 46px
}
  #callStage .call-stage-controls #leaveVoice { order: 10
}
}
#callStage #leaveVoice { background: #bb3558; color: white; border-color: #bb3558; order: 10
}

.dm-voice-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--background-elevated);flex:none;min-width:0}.dm-voice-banner[hidden]{display:none}.dm-voice-faces{display:flex;flex:none;padding-left:4px}.dm-voice-faces .friend-avatar{width:30px;height:30px;margin-left:-4px;border:2px solid var(--background-elevated)}.dm-voice-copy{flex:1;min-width:0;display:grid;gap:2px}.dm-voice-copy b{font-size:13px}.dm-voice-copy small{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}.dm-voice-banner .btn{min-height:40px;font-size:12px;flex:none}@media(max-width:420px){.dm-voice-banner{gap:8px;padding:10px}.dm-voice-faces{display:none}.dm-voice-banner .btn{padding-inline:10px}}
.gift-artwork-preview{display:flex;align-items:center;gap:12px;margin-block:12px}.gift-artwork-preview img{width:80px;height:80px;object-fit:contain}

/* Source: shop.css */
.gift-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block
}
.gift-image-large { width: min(260px,100%); margin: 0 auto 20px
}
.gift-card { overflow: hidden; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 10px!important; border-radius: 16px!important; white-space: normal!important
}
.gift-card b,.gift-card small { padding: 0 4px
}
.gift-card small { color: var(--text-secondary); font-size: 11px
}
.gift-grid { display: grid!important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px
}
.gift-card img { transition: transform .2s
}
#giftCatalogModal .modal-dialog,#profileGiftsModal .modal-dialog,#shopModal .modal-dialog { max-width: 760px
}
.shop-pro { padding: 26px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(120deg,var(--surface-soft),#8973e51a)
}
.shop-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--accent)
}
.shop-pro h3 { margin: 10px 0 12px; font-size: 27px; font-weight: 750
}
.shop-pro p { max-width: 540px; color: var(--text-secondary); font-size: 14px; line-height: 1.7
}
.shop-pro small { display: block; margin: 10px 0
}
.shop-pro .btn { margin-top: 10px
}
.shop-balance { margin: 18px 0 25px; font-weight: 600
}
.decoration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 22px 0
}
.decoration-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 25px 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft)
}
.decoration-card small { color: var(--text-secondary); font-size: 11px
}
.decoration-preview { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--surface); font-weight: 700; font-size: 23px; position: relative; margin-bottom: 8px
}
.decoration-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit
}
.pro-badge { display: inline-flex; vertical-align: middle; margin-left: 8px; padding: 3px 7px; border: 1px solid #967ce766; border-radius: 6px; background: #8264e71c; color: var(--accent); font-size: 10px!important; font-weight: 800; letter-spacing: .06em
}
.inapp-profile-avatar>img { border-radius: var(--avatar-radius,50%)
}
.wallpaper-gallery { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px
}
.wallpaper-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 14px
}
.wallpaper-grid button { padding: 0!important; overflow: hidden; display: flex; flex-direction: column; gap: 6px; border-radius: 10px!important; white-space: normal; font-size: 10px!important
}
.wallpaper-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover
}
.wallpaper-grid span { padding: 0 4px 8px
}
#giftRecipientModal .modal-body { display: flex; flex-direction: column; gap: 10px
}
@media(max-width:540px) {
  .gift-grid,.decoration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px
}
  .shop-pro { padding: 20px
}
  .shop-pro h3 { font-size: 23px
}
  .wallpaper-grid { grid-template-columns: repeat(3,minmax(0,1fr))
}
  .decoration-card { padding: 24px 9px 14px
}
  #shopModal .modal-body { padding: 16px
}
}
@media(prefers-reduced-motion:reduce) {
  .gift-card img { transition: none
}
}
.modal-footer:empty { display: none
}
.gift-card>.gift-art { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 1; margin: 0; font-size: 70px; flex: none
}

/* Source: refinement.css */
#settingsModal .modal-dialog { max-width: 900px
}
#settingsModal .modal-body { padding: 0!important
}
#settingsModal .modal-content { max-height: calc(var(--app-height,100dvh) - 40px)
}
.settings-hub { display: grid; grid-template-columns: 205px minmax(0,1fr); min-height: 440px
}
.settings-hub-nav { padding: 18px 12px; border-right: 1px solid var(--border); background: var(--surface-soft); display: flex; flex-direction: column; gap: 5px
}
.settings-hub-nav button { justify-content: flex-start; border: 0; background: transparent; text-align: left; font-size: 13px; min-height: 42px; padding: 10px 12px; color: var(--text-secondary); white-space: nowrap
}
.settings-hub-nav button[aria-current=true] { background: var(--ui-hover); color: var(--accent); font-weight: 700
}
.settings-hub-pane { padding: 24px; min-width: 0
}
.settings-hub-pane>h3 { font-size: 20px; margin: 0 0 24px; font-weight: 700
}
.settings-hub-pane>h4 { font-size: 16px; margin: 24px 0 12px
}
.settings-hub-pane>.btn { margin-right: 8px; margin-bottom: 8px
}
.settings-form { display: grid; gap: 18px
}
.settings-field { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--text-secondary); font-weight: 600
}
.settings-form>.btn[type=submit] { justify-self: start; min-width: 120px
}
.settings-profile-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap
}
.settings-profile-head .btn { font-size: 12px
}
.settings-profile-avatar { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; border-radius: var(--avatar-radius,50%); font-size: 24px; font-weight: 700
}
.settings-username { justify-self: start
}
.settings-hub-pane .account-security-content { padding: 0; background: none
}
.settings-hub-pane .security-grid { grid-template-columns: 1fr; gap: 16px
}
.settings-hub-pane .security-card { padding: 18px
}
.settings-hub-pane .security-section-head { flex-wrap: wrap
}
.settings-hub-pane .security-section-head h4 { font-size: 16px
}
.settings-hub-pane .session-card { min-width: 0; flex-wrap: wrap
}
.settings-hub-pane .session-copy { overflow-wrap: anywhere; min-width: 0
}
.settings-hub-pane .theme-choice { margin: 0 0 10px; padding: 14px
}
.settings-loading { font-size: 13px; color: var(--text-secondary)
}
#accountSecurityModal [data-account-tab=privacy] span { font-size: 0
}
#accountSecurityModal [data-account-tab=privacy] span:after { content: 'Чёрный список'; font-size: 13px
}
.channel-entry.voice-joined .channel-item.voice { color: var(--accent); background: var(--ui-hover)
}
.join-pill[hidden] { display: none!important
}
.call-stage-people { padding: 8px; min-width: 260px
}
.call-person-row { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-bottom: 1px solid var(--border); min-width: 0
}
.call-person-row .friend-avatar { flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; border-radius: var(--avatar-radius,50%)
}
.call-person-row .experience-person-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px
}
.call-person-row b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.call-person-row small { font-size: 10px; color: var(--text-secondary)
}
.call-person-row .icon-btn { width: 30px; min-width: 30px; height: 32px; padding: 0
}
.poll-voter { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; color: var(--text-primary); border: 0; border-radius: 9px; padding: 9px; text-align: left
}
.poll-voter .experience-person-copy { display: flex; flex-direction: column; gap: 3px
}
.poll-voter b { font-size: 12px
}
.poll-voter small { font-size: 11px; color: var(--text-secondary)
}
#friendSearchModal [data-profile-link] { cursor: pointer
}
#friendSearchModal [data-profile-link]:hover b { color: inherit
}
.group-friend-option[hidden] { display: none!important
}
.social-card { border: 1px solid var(--border)!important; background: var(--background-elevated)!important; border-radius: 16px!important; padding: 20px!important; box-shadow: none!important
}
.social-card h3 { font-size: 17px
}
.social-card .social-empty { padding: 24px 12px; background: transparent
}
.social-card .friend-row,.social-card .request-row { border-radius: 10px; gap: 12px
}
.inapp-profile { max-width: 100%
}
.inapp-profile-identity { align-items: center!important; gap: 20px!important; padding: 24px!important
}
.inapp-profile-avatar { width: 80px!important; height: 80px!important; flex-basis: 80px!important; border-radius: var(--avatar-radius,50%)!important
}
.inapp-profile-copy { flex: 1; min-width: 0
}
.inapp-profile-actions { gap: 8px; margin-top: 14px
}
.inapp-profile-actions .profile-more { width: 38px; padding: 0
}
.inapp-profile-actions .profile-more i { font-size: 19px
}
.inapp-profile-grid.profile-grid-simple { grid-template-columns: minmax(0,1fr)!important; gap: 14px
}
.profile-grid-simple .inapp-profile-card { padding: 18px!important; min-height: 0!important
}
.inapp-profile-bio { min-height: 0!important; padding-bottom: 18px!important
}
.inapp-profile-facts { margin-top: 0!important; gap: 12px!important
}
.profile-grid-simple .profile-badge-list { padding: 0
}
.inapp-profile-card-head { margin-bottom: 14px
}
.inapp-profile-status { font-size: 11px!important
}
.inapp-profile-presence { right: -2px!important; bottom: -2px!important; width: 16px!important; height: 16px!important; border: 3px solid var(--background-elevated)!important
}
.decoration-card { overflow: visible
}
.decoration-preview { margin: 6px 0 12px
}
.chat-skeleton { gap: 12px; padding: 16px
}
.chat-skeleton div { height: 44px; width: 55%; max-width: 360px
}
.chat-skeleton div:nth-child(3n) { width: 42%
}
@media(max-width:760px) {
  .settings-hub { grid-template-columns: minmax(0,1fr); min-height: 0
}
  .settings-hub-nav { flex-direction: row; overflow: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px; gap: 4px
}
  .settings-hub-nav button { flex: 0 0 auto; font-size: 12px; min-height: 38px; padding: 8px 10px
}
  .settings-hub-pane { padding: 18px
}
  .settings-hub-pane>h3 { font-size: 18px; margin-bottom: 18px
}
  .settings-hub-pane .security-card { padding: 14px
}
  .settings-hub-pane .security-section-head { gap: 12px
}
  .settings-profile-head .btn { font-size: 11px
}
  .inapp-profile-identity { padding: 18px!important; gap: 14px!important
}
  .inapp-profile-copy { width: auto!important; flex-basis: calc(100% - 100px)
}
  .inapp-profile h2 { font-size: 20px!important
}
  .inapp-profile-status { margin-top: 8px!important
}
  .inapp-profile-actions .btn { min-height: 36px; font-size: 11px
}
  .inapp-profile-facts { grid-template-columns: 1fr!important
}
  .call-stage-people { min-width: 0
}
  .social-card { padding: 16px!important
}
}
.email-gate { display: flex; flex-direction: column; gap: 16px
}
.email-gate>i { font-size: 32px; color: var(--accent)
}
.email-gate h2 { font-size: 23px
}
.email-gate p { font-size: 14px; line-height: 1.6
}
.email-gate>p,.email-gate>h2 { margin: 0
}
.email-gate details { padding: 12px; border: 1px solid var(--border); border-radius: 10px
}
.email-gate summary { cursor: pointer; font-size: 13px
}
.email-gate details form { padding-top: 16px
}
.qr-login-button { width: 100%; margin-top: 16px
}
.qr-login-body,.qr-approve-body { text-align: center; display: flex; align-items: center; flex-direction: column; gap: 16px
}
.qr-login-body canvas { max-width: 100%; height: auto!important; border-radius: 12px
}
.qr-login-body p,.qr-approve-body p { font-size: 14px; line-height: 1.65; margin: 0
}
.qr-login-body small { font-size: 12px; color: var(--text-secondary)
}
.qr-comparison { font-size: 28px; letter-spacing: .2em; color: var(--accent)
}
.qr-camera { display: block; width: 100%; max-height: 55dvh; background: #14161e; border-radius: 14px; object-fit: cover
}
#qrApproveModal .modal-footer { flex-wrap: wrap
}
#qrApproveModal .modal-footer .btn { white-space: normal
}
@media(max-width:480px){.settings-stat{padding:12px}.settings-stat small{font-size:10px;letter-spacing:.04em}.settings-stat b{font-size:16px}.settings-grid{gap:10px}.settings-section-head{gap:12px}.settings-card{padding:14px}}
/* Server settings: one breakpoint owns both the navigation and content grid. */
.server-settings-modal{min-height:0;overflow:hidden}
.server-settings-header{padding:20px 24px;flex-shrink:0;background:var(--background-elevated);border-bottom:1px solid var(--border)}
.server-settings-modal .modal-body{padding:0;overflow:hidden;min-height:0}
.server-settings-layout{display:grid;grid-template-columns:190px minmax(0,1fr);height:min(680px,calc(var(--app-height,100dvh) - 164px));min-height:0}
.server-settings-nav{display:flex;flex-direction:column;gap:4px;padding:16px 10px;border-right:1px solid var(--border);background:var(--surface-soft);overflow:auto;min-width:0;min-height:0}
.settings-nav-item{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0;min-height:44px;padding:10px 12px;border:0;border-radius:var(--ui-radius-sm);background:transparent;color:var(--text-secondary);text-align:left;font-size:13px;font-weight:600;line-height:1.4}
.settings-nav-item:hover{color:var(--text-primary)}
.settings-nav-item.active{background:var(--accent-soft);color:var(--accent)}
.settings-nav-item i{flex-shrink:0;font-size:17px}
.server-settings-content{padding:24px;min-width:0;min-height:0;overflow:auto;background:var(--background-elevated);overscroll-behavior:contain;scrollbar-gutter:stable}
@media(max-width:900px){.server-settings-header{padding:16px}.server-settings-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:calc(var(--app-height,100dvh) - 156px)}.server-settings-nav{flex-direction:row;border-right:0;border-bottom:1px solid var(--border);padding:8px;gap:4px}.settings-nav-item{white-space:nowrap;min-height:44px;padding:10px}.server-settings-content{padding:16px}}

/* Source: support.css */
.support-workspace { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.5fr); gap: 20px
}
.support-filters { display: flex; gap: 10px; margin-bottom: 16px
}
.support-queue { display: flex; flex-direction: column; gap: 8px
}
.support-ticket-button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--text-primary); font-size: 13px
}
.support-ticket-button[aria-current=true] { background: var(--ui-hover); border-color: var(--accent)
}
.support-ticket-button b { overflow-wrap: anywhere
}
.support-ticket-button small { font-size: 11px; color: var(--text-secondary)
}
.support-thread { display: flex; flex-direction: column; gap: 14px; max-height: 52dvh; min-height: 150px; overflow: auto; padding: 8px 2px; margin: 16px 0; overscroll-behavior: contain
}
.support-message { padding: 14px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; max-width: 94%; font-size: 14px; align-self: flex-start
}
.support-message.staff { align-self: flex-end; background: var(--accent-soft)
}
.support-message header { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 8px
}
.support-message header img { width: 30px; height: 30px; border-radius: 10px; object-fit: cover
}
.support-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; line-height: 1.65
}
.support-message time { display: block; font-size: 10px; color: var(--text-secondary); margin-top: 7px
}
.support-actions { display: flex; gap: 8px; flex-wrap: wrap
}
.support-reply { display: grid; gap: 12px
}
.support-reply .btn { justify-self: end
}
.support-new { display: grid; gap: 16px
}
.support-new label { display: grid; gap: 6px; font-size: 13px
}
.support-dialog-list { display: grid; gap: 10px
}
.user-security-box { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 20px 0; margin-bottom: 24px; display: grid; gap: 14px
}
.user-security-box p,.user-security-box h3 { margin: 0
}
.user-security-box summary { font-size: 13px; cursor: pointer
}
.user-security-box .settings-form { display: grid; gap: 10px
}
.user-security-box .btn { justify-self: start
}
.registration-info { font-size: 12px; display: grid; gap: 4px; margin: 14px 0
}
.registration-info dt { color: var(--text-secondary)
}
.registration-info dd { margin: 0 0 8px; overflow-wrap: anywhere
}
#supportModal .modal-dialog { max-width: 740px
}
.support-empty { padding: 30px 10px; text-align: center; color: var(--text-secondary)
}
@media(max-width:1000px) {
  .support-workspace { grid-template-columns: 1fr
}
  .support-queue { max-height: 340px; overflow: auto
}
}
@media(max-width:500px) {
  .support-filters { flex-direction: column
}
  .support-message { max-width: 100%; font-size: 13px
}
  .support-actions .btn { flex: 1; font-size: 11px
}
  .support-thread { max-height: 45dvh
}
}

/* Source: polish.css */
/* v25: viewport, drawer and composer invariants, shared by browser and installed app. */
.mobile-scrim { inset: 0!important; z-index: 1050!important; backdrop-filter: none!important; background: rgba(12,15,26,.4)
}
@media(max-width:1280px) {
  .members-panel.mobile-open { z-index: 1052!important
}
}
.chat-panel.profile-mode .composer-wrap { display: none!important
}
.chat-panel.profile-mode { grid-template-rows: var(--shell-header,68px) minmax(0,1fr)!important
}
.channel-meta #channelDescription { display: inline!important
}
.channel-meta #typing:not(:empty)+#channelDescription { display: none!important
}
.channel-heading>div,.channel-title-row { min-width: 0
}
.channel-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%
}
.chat-panel.has-chat-wallpaper .msg-body { background: var(--background-elevated); border-radius: 12px; padding: 10px 12px
}
#composer #voiceMessageBtn { order: 5; width: 40px; height: 40px; color: var(--accent)
}
#composer #voiceMessageBtn[hidden],#composer #sendMessageBtn[hidden] { display: none!important
}
.photo-history-date { display: block; text-align: center; color: var(--text-secondary); font-size: 12px; margin-bottom: 12px
}
.channel-title .verified-badge { margin-left: 4px
}
.message-selection-bar { display: flex; align-items: center; gap: 12px; min-height: 48px
}
.message-selection-bar>strong { flex: 1; font-size: 13px
}
.message-selection-bar button { display: flex; align-items: center; gap: 6px; min-height: 40px
}
.is-selecting-messages #composer>:not(#messageSelectionBar) { display: none!important
}
.is-selecting-messages .message-row { cursor: pointer; user-select: none
}
.is-selecting-messages .message-row.message-selected { background: var(--accent-soft)!important; box-shadow: inset 3px 0 var(--accent)
}
.is-selecting-messages .message-row::after { content: '○'; position: absolute; right: 6px; top: 6px; color: var(--accent); font-size: 18px
}
.is-selecting-messages .message-row.message-selected::after { content: '✓'
}
.is-selecting-messages .message-actions { display: none!important
}
.call-participant-tile { cursor: pointer
}
.call-participant-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px
}
#callStage .call-participant-tile video { transform: none!important
}
#callStage .call-participant-tile.is-mirrored-camera video { transform: scaleX(-1)!important
}
#callStage #flipCallCamera[hidden] { display: none!important
}
@media(max-width:760px) {
  #channelSidebar { transition: transform .22s ease; transform: translateX(calc(-100% - 64px)); visibility: hidden; pointer-events: none
}
  #channelSidebar.mobile-open { transform: translateX(0); visibility: visible; pointer-events: auto
}
  html:has(#appView:not(.d-none)),body:has(#appView:not(.d-none)) { overflow: hidden; overscroll-behavior: none; height: 100%; min-height: 0
}
  #appView:not(.d-none) { position: fixed!important; top: var(--app-top,0px)!important; left: 0; right: 0; bottom: auto!important; height: var(--app-height,100dvh)!important; transition: none!important
}
  #chatPanel { position: relative!important; inset: auto!important; height: 100%!important; grid-template-rows: auto auto minmax(0,1fr) auto
}
  #chatPanel.profile-mode { grid-template-rows: 68px minmax(0,1fr)!important
}
  .keyboard-open #chatPanel { padding-bottom: 0!important
}
  #messages { min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none
}
  .channel-meta { display: block!important; min-height: 16px!important; font-size: 11px!important; line-height: 16px
}
  .chat-header .channel-heading { flex: 1; min-width: 0; overflow: hidden
}
  .chat-header .chat-actions { flex-shrink: 0
}
  .chat-header .channel-title { font-size: 14px!important
}
  .chat-header .channel-heading-icon { flex-shrink: 0
}
  .composer-box textarea { font-size: 16px!important; scroll-margin: 0; resize: none
}
  #composer .composer-tools { align-items: center
}
  #composer #voiceMessageBtn { width: 36px!important; height: 38px!important
}
  #callStage .call-stage-controls { overflow-x: auto; justify-content: flex-start!important; max-width: 100%; scrollbar-width: none
}
  #callStage .call-stage-controls .voice-controls { flex: 0 0 auto
}
  #callStage .call-stage-controls>button { flex: 0 0 auto
}
}
@media(max-width:460px) {
  #callStage .call-stage-controls button,#callStage .call-stage-controls .voice-controls button { min-width: 44px!important; width: 44px!important; height: 44px!important; padding: 0!important; display: grid; place-items: center
}
  #callStage .call-stage-controls button span { display: none!important
}
  #callStage .call-stage-controls button i { font-size: 18px
}
  #callPeopleBtn,#callChatBtn { display: none!important
}
  #callStage .call-stage-controls { justify-content: center!important; gap: 4px!important
}
  #callStage .call-stage-controls .voice-controls { gap: 4px!important
}
}
.forward-credit { display: flex; align-items: center; gap: 6px
}
.forward-avatar { position: relative; width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--avatar-radius,50%); display: grid; place-items: center; font-size: 10px
}
.forward-credit[role=button] { cursor: pointer
}
.gift-sender { display: flex; align-items: center; justify-content: center; gap: 8px
}
.gift-sender .friend-avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px
}
.gift-system-message { display: flex!important; justify-content: center; width: 100%!important; background: transparent!important
}
.gift-message-card { display: flex; align-items: center; flex-direction: column; gap: 10px; padding: 20px; width: min(300px,100%); border: 1px solid var(--border); border-radius: 16px; background: var(--background-elevated); color: var(--text-primary); white-space: normal; text-align: center
}
.gift-message-card .gift-image-large { width: 140px; height: 140px; object-fit: contain
}
.gift-message-card>small { color: var(--accent)
}
.gift-comment { margin: 16px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid var(--accent); padding: 12px 16px; background: var(--surface-soft); border-radius: 0 8px 8px 0
}
.gift-message-card>span { font-size: 13px
}
.gift-message-card>small { font-size: 12px
}
/* Fixed-size sidebar footers must not shrink when the conversation list grows. */
.channel-sidebar{min-width:0;min-height:0}
.channel-sidebar>.server-showcase,.channel-sidebar>.sidebar-toolbar,.channel-sidebar>.user-panel{flex-shrink:0}
.channel-sidebar>.social-sidebar,.channel-sidebar>.channel-scroll{flex:1 1 0;min-height:0}
#voiceDock{flex:0 0 auto;min-height:0;max-height:none;margin:8px 10px;border:1px solid var(--border);border-radius:var(--ui-radius-md);background:var(--background-elevated);overflow:visible}
#voiceDock .open-call-stage{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:auto;min-height:44px;padding:12px;border:0;border-radius:11px 11px 0 0;font-size:12px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
#voiceDock .voice-dock-head{padding:10px;min-height:54px;gap:8px;border-top:1px solid var(--border)}
#voiceDock .voice-dock-head:after{display:none}
#voiceDock .voice-state-icon{width:30px;height:30px;flex:0 0 30px;border-radius:9px;font-size:15px}
#voiceDock .voice-state b{font-size:10px;line-height:1.4;white-space:normal}
#voiceDock .voice-state span{font-size:11px;line-height:1.4}
#voiceDock .voice-live-pill{display:none}
.social-dashboard>*,.social-hero-copy,.social-hero-actions{min-width:0}
.social-hero-copy h3{font-size:clamp(22px,2.4vw,28px);line-height:1.25;letter-spacing:-.03em}
.social-hero-copy p{font-size:14px;line-height:1.7;max-width:580px}
.social-hero-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:760px){.channel-sidebar>.server-showcase{min-height:68px}#voiceDock{margin:8px}#voiceDock .open-call-stage{min-height:44px}.social-hero{padding:20px}.channel-title{max-width:100%}.chat-header .channel-meta{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settings-hub-nav button{min-height:44px}.right-panel-tabs button{min-height:44px}}
@media(max-width:480px){.social-hero-actions .btn{flex:1 1 140px}.social-hero-copy p{font-size:13px}.modal-footer:has(>.btn:nth-child(3)){justify-content:flex-start}.support-workspace{grid-template-columns:minmax(0,1fr)}}
/* A single participant fills the stage rather than leaving an empty grid column. */
#callStage .call-stage-tiles[data-tile-count="1"]{grid-template-columns:minmax(0,1fr)}

/* Source: ui-theme.css */
/* These tokens are shared by the messenger and the administration pages. */
:root,html[data-app-theme] { --ui-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif; --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-space-5: 20px; --ui-space-6: 24px; --ui-space-8: 32px; --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 16px; --ui-control: 40px; --ui-touch: 44px; --ui-primary: #7654d4; --ui-primary-hover: #6541c1; --ui-accent: var(--accent); --ui-hover: var(--surface-hover); --ui-danger: var(--danger); --ui-radius: var(--ui-radius-md); --shadow-soft: 0 8px 28px #20284409; --shadow-float: 0 16px 48px #20284422; --success: #147958; --danger: #b42c4c; --warning: #8b621b; --muted: var(--text-secondary); --panel: var(--background-elevated); --bs-secondary-color: var(--text-secondary); --bs-border-color: var(--border)
}
html[data-app-theme=dark] { --success: #61d6ad; --danger: #ff86a3; --warning: #ebc780; --shadow-soft: 0 8px 28px #0002; --shadow-float: 0 16px 48px #0005
}
html[data-app-theme=light] { color-scheme: light; --background-primary: #f6f6fa; --background-secondary: #f6f6fa; --background-tertiary: #fff; --background-elevated: #fff; --surface: #fff; --surface-soft: #f6f6fa; --surface-hover: #eeebf8; --surface-active: #ede8fb; --border: #dedfeb; --border-strong: #c8c7da; --text-primary: #252839; --text-secondary: #687088; --text-tertiary: #9398aa; --accent: #7654d4; --accent-strong: #6541c1; --accent-soft: #ede8fb; --text: var(--text-primary); --background: var(--background-primary); --bs-body-bg: var(--background-primary); --bs-body-color: var(--text-primary)
}
html[data-app-theme=dark] { color-scheme: dark; --background-primary: #14161e; --background-secondary: #191c26; --background-tertiary: #202430; --background-elevated: #1b1d29; --surface: #1b1d29; --surface-soft: #222431; --surface-hover: #302b43; --surface-active: #342c4d; --border: #353747; --border-strong: #4c4864; --text-primary: #ebedf7; --text-secondary: #a3a8bf; --text-tertiary: #7d8298; --accent: #b7a0ff; --accent-strong: #9475ef; --accent-soft: #342c4d; --text: var(--text-primary); --background: var(--background-primary); --bs-body-bg: var(--background-primary); --bs-body-color: var(--text-primary)
}

/* Source: ui-shared.css */
/* Shared controls. Loaded after feature styles on every application page. */
body { font-family: var(--ui-font); font-size: 14px; line-height: 1.5; background: var(--background-primary); color: var(--text-primary)
}
button,input,textarea,select { font-family: inherit; touch-action: manipulation
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ui-control); padding: 9px 14px; border-radius: var(--ui-radius-sm); font-size: 13px; font-weight: 600; line-height: 20px; box-shadow: none; white-space: normal
}
.btn-sm { min-height: 34px; padding: 6px 10px; font-size: 12px
}
.btn-lg { min-height: 48px; padding: 12px 18px; font-size: 15px
}
.btn>i,.message-context-item>i { flex-shrink: 0; width: 18px; line-height: 1; font-size: 17px; display: grid; place-items: center
}
.btn-primary { --bs-btn-bg: var(--ui-primary); --bs-btn-border-color: var(--ui-primary); --bs-btn-hover-bg: var(--ui-primary-hover); --bs-btn-hover-border-color: var(--ui-primary-hover); --bs-btn-active-bg: var(--ui-primary-hover); --bs-btn-active-border-color: var(--ui-primary-hover); --bs-btn-disabled-bg: var(--ui-primary); --bs-btn-disabled-border-color: var(--ui-primary); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; background-image: none; color: white
}
.btn-outline-secondary,.modal-modern .btn-secondary { --bs-btn-color: var(--text-secondary); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--surface-hover); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-hover-color: var(--text-primary); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-color: var(--accent); background-image: none
}
.form-control,.form-select { width: 100%; min-width: 0; max-width: 100%; min-height: var(--ui-control); padding: 9px 12px; font-size: 14px; line-height: 20px; border: 1px solid var(--border-strong); border-radius: var(--ui-radius-sm); background-color: var(--background-elevated); color: var(--text-primary); box-shadow: none
}
.form-select { padding-right: 34px
}
.form-control::placeholder { color: var(--text-tertiary); opacity: 1
}
.form-control:focus,.form-select:focus { background-color: var(--background-elevated); color: var(--text-primary); border-color: var(--border-strong); box-shadow: none; outline: none
}
.form-control:disabled,.form-select:disabled { background: var(--surface-soft); color: var(--text-tertiary)
}
.form-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px
}
textarea.form-control { resize: vertical; min-height: 88px
}
.form-control.is-invalid,.form-select.is-invalid,[aria-invalid=true] { border-color: var(--danger)
}
.invalid-feedback { color: var(--danger); font-size: 12px
}
button:disabled { cursor: not-allowed; opacity: .55
}
:where(button,a,[tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px
}
.modal-header,.modal-footer { gap: 12px; padding: 18px 20px; border-color: var(--border)
}
.modal-title { font-size: 18px; font-weight: 700; line-height: 1.35
}
.modal-body { padding: 20px; min-width: 0
}
.modal-footer:empty { display: none
}
.modal-footer>.btn { margin: 0
}
.modal-content { background: var(--background-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--ui-radius-lg); box-shadow: var(--shadow-float)
}
.modal-header { display:flex; align-items:center; flex-wrap:nowrap }
.modal-header>:first-child:not(.btn-close) { flex:1; min-width:0 }
.modal-header>:last-child { flex-shrink:0; margin-left:auto }
.modal-header .btn-close { flex: none; opacity: .65; padding: 12px; margin: -8px -8px -8px auto
}
.modal-dialog { min-width: 0
}
.modal-body>form { min-width: 0
}
.modal-body input[type=file] { max-width: 100%; min-width: 0
}
.message-context-item { min-height: 38px; gap: 10px; border-radius: var(--ui-radius-sm)
}
.message-context-item.danger { color: var(--danger)
}
@media(max-width:760px) {
  .form-control,.form-select { font-size: 16px
}
  .modal-header,.modal-footer { padding: 16px; gap: 8px
}
  .modal-body { padding: 16px
}
  .modal-title { font-size: 17px
}
  .modal-footer>.btn { min-height: 44px
}
  .modal-footer { flex-wrap: wrap
}
}
@media(pointer:coarse) {
  .btn,.form-control,.form-select { min-height: 44px
}
}
[data-avatar-tone] { color: white!important; background: var(--avatar-fill)!important
}
[data-avatar-tone="0"] { --avatar-fill: #765ba9
}
[data-avatar-tone="1"] { --avatar-fill: #b3633e
}
[data-avatar-tone="2"] { --avatar-fill: #40806d
}
[data-avatar-tone="3"] { --avatar-fill: #457c9b
}
[data-avatar-tone="4"] { --avatar-fill: #aa586d
}
[data-avatar-tone="5"] { --avatar-fill: #7c793a
}
[data-avatar-tone="6"] { --avatar-fill: #5468af
}
[data-avatar-tone="7"] { --avatar-fill: #8e6582
}
[data-avatar-tone]>img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit
}
.friend-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--avatar-radius,50%); font-size: 14px; font-weight: 700; overflow: hidden
}
.settings-error { color: var(--ui-danger); font-size: 13px; white-space: pre-wrap
}
.settings-error:empty { display: none
}
[hidden] { display: none!important
}
.ui-confirm { padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--background-elevated); color: var(--text-primary); max-width: 440px; width: calc(100% - 24px)
}
.ui-confirm::backdrop { background: #0006
}
.ui-confirm h2 { font-size: 18px; margin: 0 0 14px
}
.ui-confirm p { font-size: 14px; color: var(--text-secondary); line-height: 1.6
}
.ui-confirm .modal-footer { padding: 16px 0 0; border: 0
}
.admin-user { margin: 3px 0
}
.admin-user small { color: var(--text-secondary)
}
img.vh-emoji { display: inline-block!important; width: 1.25em!important; height: 1.25em!important; max-width: none!important; min-width: 0!important; object-fit: contain!important; margin: 0 .06em!important; vertical-align: -.23em!important; border: 0!important; border-radius: 0!important; box-shadow: none!important; pointer-events: none; background: transparent!important
}
.emoji-option img.vh-emoji { width: 28px!important; height: 28px!important; margin: 0!important
}
.emoji-option { display: grid; place-items: center
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior: auto!important
}
}
.admin-user>span:not(.friend-avatar) { flex: 1
}
.admin-user>.friend-avatar { position: relative; flex: 0 0 40px; overflow: hidden
}
.admin-user>.friend-avatar>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover
}
#selectedName { display: flex; align-items: center; gap: 10px
}
.user-activity { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border)
}
.user-activity-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 16px
}
.user-activity-stats>div { padding: 12px; background: var(--surface-soft); border-radius: 10px; display: grid; gap: 4px
}
.user-activity-stats strong { font-size: 22px
}
.user-activity-stats small { color: var(--text-secondary); font-size: 11px
}
.user-activity .form-select { margin: 16px 0 10px
}
.activity-row,.activity-session { padding: 12px 0; border-bottom: 1px solid var(--border); display: grid; gap: 6px; font-size: 12px; overflow-wrap: anywhere
}
.activity-heading { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap
}
.activity-row small,.activity-session small { color: var(--text-secondary); font-size: 11px
}
.activity-list { margin-bottom: 16px
}
.user-activity summary { cursor: pointer; font-size: 13px
}
.vh-tooltip { position:fixed;z-index:12000;max-width:min(280px,calc(100vw - 16px));padding:8px 11px;border:1px solid var(--border);border-radius:var(--ui-radius-sm);background:var(--background-elevated);color:var(--text-primary);box-shadow:var(--shadow-float);font:500 12px/1.5 system-ui,sans-serif;overflow-wrap:anywhere;pointer-events:none }
.vh-tooltip[hidden] { display:none }
input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible,[contenteditable]:focus-visible,.form-control:focus,.form-select:focus { outline:none!important; box-shadow:none!important }
.plan-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.plan-settings>h2,.plan-settings>p,.plan-settings>.gift-enabled { grid-column:1/-1 }
.plan-settings>label { display:grid; gap:8px; min-width:0; font-size:13px }
.plan-settings>.gift-enabled { display:flex; align-items:center }
.plan-settings>button { justify-self:start }
@media(max-width:600px) { .plan-settings { grid-template-columns:minmax(0,1fr) } }

.landing-security{padding-block:60px}.landing-security .landing-benefit-grid article{padding:26px;border:1px solid var(--border);border-radius:20px;background:var(--background-elevated)}.landing-security .landing-benefit-grid h3{font-size:18px;margin:16px 0 10px}.landing-security .landing-benefit-grid p{font-size:14px;line-height:1.7;color:var(--text-secondary)}.landing-security .landing-benefit-grid .bi{font-size:25px;color:var(--accent)}.landing-pro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;padding:40px;border:1px solid var(--border);border-radius:24px;background:var(--background-elevated);margin-bottom:48px}.landing-pro h2{font-size:clamp(24px,3vw,36px);letter-spacing:-.035em;margin:12px 0}.landing-pro p,.landing-pro li{font-size:14px;line-height:1.7;color:var(--text-secondary)}.landing-pro ul{padding-left:20px;margin:18px 0 0}.landing-pro-label{font-size:11px;letter-spacing:.12em;font-weight:750;color:var(--accent)}.landing-pro-offer{display:grid;gap:12px;min-width:0;padding:24px;border-radius:16px;background:var(--background-secondary)}.landing-pro-offer>span{font-size:12px;color:var(--text-secondary)}.landing-pro-offer strong{font-size:24px;overflow-wrap:anywhere}.landing-pro-offer p{font-size:12px;margin:0}.landing-pro-offer .btn{white-space:normal;min-height:44px}.shop-sounds-link{margin-top:16px}@media(max-width:767px){.landing-security{padding-block:32px}.landing-security .landing-benefit-grid{grid-template-columns:minmax(0,1fr)}.landing-pro{grid-template-columns:minmax(0,1fr);padding:22px;gap:22px}.landing-pro-offer{padding:18px}}

/* One close control on all surfaces, independent of Bootstrap's theme filter. */
body .btn-close,body .modal-modern .modal-header .btn-close,body .admin-editor-heading .btn-close {
  position:relative;display:inline-grid;place-items:center;box-sizing:border-box;
  width:32px!important;height:32px!important;min-width:32px;min-height:32px;
  flex:0 0 32px;padding:0!important;margin:0 0 0 auto!important;border:0;
  border-radius:8px;background:transparent!important;background-image:none!important;
  color:var(--text-secondary);opacity:1;filter:none!important;box-shadow:none;
}
body .btn-close::before,body .btn-close::after {content:'';position:absolute;top:15px;left:8px;width:16px;height:1.5px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
body .btn-close::after {transform:rotate(-45deg)}
body .btn-close:hover {color:var(--accent)}
body .btn-close>i {display:none}
body .btn-close:focus-visible {outline:2px solid var(--accent);outline-offset:2px}

/* Source: people.css */
/* One person-row pattern: identity on the left, actions on the right. */
:is(.person-row,.friend-row,.request-row,.experience-person,.poll-voter,.call-person-row,.group-friend-option) { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; min-height: 60px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text-primary); text-align: left; font: inherit; box-shadow: none
}
:is(.person-row,.friend-row,.request-row,.experience-person,.poll-voter,.call-person-row,.group-friend-option):last-child { border-bottom-color: transparent
}
.person-option,.poll-voter,.group-friend-option { cursor: pointer
}
:is(.person-option,.poll-voter,.group-friend-option):hover,.friend-row:hover { border-radius: var(--ui-radius-sm)
}
.person-option:focus-visible,.poll-voter:focus-visible { background: var(--surface-hover); outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--ui-radius-sm)
}
.friend-avatar { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--avatar-radius,50%); font-size: 13px; font-weight: 700; overflow: hidden
}
:is(.person-copy,.friend-meta,.request-meta,.experience-person-copy) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left
}
:is(.person-copy,.friend-meta,.request-meta,.experience-person-copy)>b,.group-friend-option b { font-size: 13px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; white-space: normal
}
:is(.person-copy,.friend-meta,.request-meta,.experience-person-copy)>small,.group-friend-option small { display: block; color: var(--text-secondary); font-size: 11px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.group-friend-option>div:not(.friend-avatar) { flex: 1; min-width: 0
}
.group-friend-option input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--accent)
}
.friend-actions,.request-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-shrink: 0
}
:is(.friend-actions,.request-actions) button,.member-quick-actions .mini-action { display: grid; place-items: center; width: 32px; min-width: 32px; height: 34px; min-height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--ui-radius-sm); background: var(--background-elevated); color: var(--text-secondary); font-size: 15px
}
:is(.friend-actions,.request-actions) button:hover,.member-quick-actions .mini-action:hover { color: var(--accent)
}
.member-item-actions { gap: 4px
}
.member-quick-actions { gap: 4px
}
.member-more-btn { width: 28px; min-width: 28px
}
.member-item-actions .member-item { padding-inline: 4px
}
.member-meta { min-width: 0
}
.member-name { overflow-wrap: anywhere
}
.verified-badge { display: inline-block; font-size: .85em; color: #2285df; margin-inline-start: 4px; vertical-align: -.1em; flex-shrink: 0
}
.social-card .friend-row,.social-card .request-row { padding: 10px 0; gap: 8px; border-radius: 0
}
.social-card .friend-row>.friend-avatar { flex-basis: 34px; width: 34px; height: 34px
}
#callStagePeople .call-person-row { padding: 10px 4px; gap: 8px; background: transparent; border-radius: 0
}
#callStagePeople .friend-avatar { width: 36px; height: 36px; flex-basis: 36px
}
#callStagePeople .call-person-row b { font-size: 13px; white-space: normal; overflow-wrap: anywhere
}
#callStagePeople .call-person-row small { font-size: 11px
}
#callStagePeople .icon-btn { flex: 0 0 34px; width: 34px; min-width: 34px; height: 36px
}
.admin-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text-primary); text-align: left; margin: 0
}
.admin-user[aria-current=true] { background: var(--surface-hover); border-radius: var(--ui-radius-sm)
}
.admin-user:hover { border-radius: var(--ui-radius-sm)
}
.admin-user>span:not(.friend-avatar) { min-width: 0; flex: 1; font-size: 13px; overflow-wrap: anywhere
}
.admin-user small { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 3px; overflow-wrap: anywhere
}
.admin-user>b { font-size: 12px; flex-shrink: 0; white-space: nowrap
}
.admin-user>.friend-avatar { position: relative
}
.admin-user>.friend-avatar img { position: absolute; inset: 0; object-fit: cover
}
.person-row+.person-row { margin-top: 0
}
@media(pointer:coarse) {
  :is(.friend-actions,.request-actions) button,.member-quick-actions .mini-action { width: 38px; min-width: 38px; height: 44px; min-height: 44px
}
  .member-more-btn { width: 32px; min-width: 32px; height: 44px
}
  #callStagePeople .icon-btn { min-height: 44px
}
}
@media(max-width:480px) {
  
  
  
  .social-card .friend-actions button { width: 40px; height: 40px
}
  .admin-user { padding-inline: 0
}
  .admin-user>.friend-avatar { width: 32px; height: 32px; flex-basis: 32px
}
  .admin-user>b { font-size: 11px
}
  .person-option { padding-inline: 4px
}
}

/* Source: menus.css */
/* Floating menus share geometry; composer rows include an explanatory second line. */
.composer-action-menu { position: fixed; display: flex; flex-direction: column; width: 320px; max-width: calc(100vw - 24px); max-height: min(540px,calc(100dvh - 96px)); padding: 6px; border: 1px solid var(--border); border-radius: var(--ui-radius-md); background: var(--background-elevated); box-shadow: var(--shadow-float); overflow-y: auto; overscroll-behavior: contain; z-index: 2200; gap: 2px
}
.composer-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--text-primary); text-align: left
}
.composer-menu-item:focus-visible { background: var(--surface-hover)
}
.composer-menu-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 19px
}
.composer-menu-item>span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0
}
.composer-menu-item b { font-size: 13px; font-weight: 650; line-height: 1.4
}
.composer-menu-item small { display: block; font-size: 11px; line-height: 1.5; font-weight: 400; color: var(--text-secondary)
}
.message-context-menu,.participant-context-menu { padding: 5px; border: 1px solid var(--border); border-radius: var(--ui-radius-md); background: var(--background-elevated); color: var(--text-primary); box-shadow: var(--shadow-float); max-width: calc(100vw - 24px); overflow: auto; overscroll-behavior: contain
}
.message-context-menu>button,.participant-context-menu>button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 9px 10px; font-size: 13px; line-height: 1.4; border: 0; border-radius: var(--ui-radius-sm); background: transparent; text-align: left; color: var(--text-primary)
}
.message-context-menu>button.danger,.participant-context-menu>button.danger { color: var(--danger)
}
.message-context-menu>button>i,.participant-context-menu>button>i { font-size: 17px; flex: 0 0 18px; color: var(--text-secondary)
}
.message-context-menu>button.danger>i,.participant-context-menu>button.danger>i { color: inherit
}
@media(pointer:coarse) {
  .message-context-menu>button,.participant-context-menu>button { min-height: 44px
}
  .quick-reactions button { min-height: 44px
}
}

/* Source: landing.css */
/* Public landing and authentication. No negative gutters or viewport-width children. */
.auth-view { min-height: 100dvh; height: auto; overflow: visible; position: relative; background: radial-gradient(ellipse at 15% 8%,var(--accent-soft),transparent 45%),var(--background-primary); color: var(--text-primary)
}
.auth-glow { display: none
}
#authView>.container { width: min(1120px,calc(100% - 48px)); max-width: none; padding: 0; margin-inline: auto
}
.landing-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1120px,calc(100% - 48px)); margin: auto; padding: 24px 0; border-bottom: 1px solid var(--border)
}
.landing-brand { display: inline-flex; flex-direction: column; gap: 4px; color: var(--text-primary); font-weight: 800; font-size: 18px; letter-spacing: .09em; text-decoration: none; flex-shrink: 0
}
.landing-brand span { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--text-secondary)
}
.landing-header nav,.landing-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px
}
.landing-header nav a,.landing-footer nav a { color: var(--text-secondary); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px
}
.landing-header nav a:hover,.landing-footer nav a:hover { color: var(--accent)
}
.landing-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.9fr); align-items: center; gap: clamp(24px,5vw,80px); padding: 64px 0 72px
}
.landing-hero>* { min-width: 0
}
.landing-copy h1 { font-size: clamp(34px,4.2vw,56px); line-height: 1.12; letter-spacing: -.045em; overflow-wrap: break-word
}
.landing-accent { color: var(--accent)
}
.landing-copy .lead { font-size: 17px; line-height: 1.75; color: var(--text-secondary)
}
.brand-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--background-elevated); font-size: 11px; font-weight: 750; letter-spacing: .08em
}
.brand-pill i { color: var(--accent); font-size: 16px
}
.landing-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin: 24px 0
}
.landing-note i { flex: none
}
.auth-features { --bs-gutter-x: 16px; --bs-gutter-y: 16px; margin-top: 12px
}
.auth-features .col-6>div { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: start; column-gap: 8px; row-gap: 4px
}
.auth-features i { color: var(--accent); font-size: 18px; grid-row: 1/3; margin-top: 2px
}
.auth-features b { font-size: 12px; font-weight: 650; overflow-wrap: anywhere
}
.auth-features span { font-size: 11px; line-height: 1.55; color: var(--text-secondary)
}
.auth-card { padding: clamp(20px,3vw,32px); border: 1px solid var(--border); border-radius: var(--ui-radius-lg); background: var(--background-elevated); box-shadow: var(--shadow-soft)
}
.auth-card h2 { font-size: 22px; letter-spacing: -.025em; line-height: 1.3
}
.brand-mark { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; background: var(--ui-primary); color: white; border-radius: 14px; font-size: 23px
}
.auth-tabs { padding: 4px; gap: 4px; display: flex; background: var(--surface-soft); border-radius: var(--ui-radius-md)
}
.auth-tabs .nav-link { color: var(--text-secondary); border: 0; border-radius: var(--ui-radius-sm); min-height: 40px; font-size: 13px; padding: 8px
}
.auth-tabs .nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600
}
.auth-link-btn { border: 0; background: transparent; color: var(--accent); min-height: 36px; padding: 4px 0; font-size: 12px
}
.input-icon { position: relative
}
.input-icon>i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none
}
.input-icon .form-control { padding-left: 40px
}
.landing-benefits,.install-guide { padding: 64px 0; border-top: 1px solid var(--border); scroll-margin-top: 24px
}
.landing-section-intro { max-width: 640px; margin-bottom: 32px
}
.landing-section-intro>span { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--accent)
}
.landing-section-intro h2 { font-size: clamp(25px,3.2vw,36px); line-height: 1.2; letter-spacing: -.035em; margin: 14px 0
}
.landing-section-intro p,.landing-benefit-grid p,.landing-bottom p { font-size: 15px; line-height: 1.7; color: var(--text-secondary)
}
.landing-benefit-grid,.install-cards,.landing-more { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px
}
.landing-benefit-grid article,.install-cards article { padding: 24px; border: 1px solid var(--border); border-radius: var(--ui-radius-lg); background: var(--background-elevated); min-width: 0
}
.landing-benefit-grid article>i { color: var(--accent); font-size: 26px
}
.landing-benefit-grid h3,.install-cards h3,.landing-more h3 { font-size: 18px; line-height: 1.4; margin: 18px 0 12px
}
.landing-benefit-grid p { margin: 0; font-size: 14px
}
.landing-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 28px
}
.landing-bottom p { margin: 0; font-size: 13px; display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px
}
.landing-bottom .btn { flex-shrink: 0
}
.install-art { display: block; width: 100%; height: auto; max-width: 100%; border-radius: var(--ui-radius-lg); margin: 24px 0 32px
}
.install-number { font-size: 11px; font-weight: 650; color: var(--accent)
}
.install-cards ol { padding-left: 20px; margin: 0
}
.install-cards li,.install-cards p,.landing-more p { font-size: 13px; line-height: 1.75; color: var(--text-secondary)
}
.install-cards li { padding-left: 4px; margin-bottom: 12px
}
.install-cards a { font-size: 12px; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px
}
.landing-more { padding: 0 0 48px
}
.landing-more article { min-width: 0
}
.landing-more h3 { margin-top: 0
}
.landing-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-secondary)
}
.landing-footer .landing-brand { font-size: 14px
}
html { scroll-behavior: smooth
}
#authForm { scroll-margin-top: 32px
}
@media(max-width:900px) {
  .landing-hero { grid-template-columns: minmax(0,1fr); gap: 32px; padding: 40px 0
}
  .auth-form-column { width: 100%; max-width: 520px; justify-self: center
}
  .landing-copy { max-width: 640px
}
  .landing-benefit-grid,.install-cards,.landing-more { grid-template-columns: minmax(0,1fr); gap: 16px
}
  .landing-benefit-grid article { padding: 24px
}
  .auth-features { max-width: 540px
}
  .landing-benefits,.install-guide { padding: 40px 0
}
}
@media(max-width:480px) {
  #authView>.container,.landing-header { width: calc(100% - 32px)
}
  .landing-header { gap: 12px; padding: 16px 0; align-items: flex-start
}
  .landing-header nav { gap: 12px; justify-content: flex-end
}
  .landing-header nav a { font-size: 12px
}
  .landing-header nav a:first-child { display: none
}
  .landing-brand { font-size: 16px
}
  .landing-copy h1 { font-size: 34px
}
  .landing-copy .lead { font-size: 15px
}
  .landing-hero { padding: 28px 0 36px
}
  .auth-features { display: none
}
  .auth-card { padding: 20px
}
  .auth-card h2 { font-size: 20px
}
  .landing-section-intro { margin-bottom: 24px
}
  .landing-footer { align-items: flex-start
}
  .landing-footer nav { width: 100%; gap: 20px
}
  .landing-bottom .btn { width: 100%
}
  .landing-benefit-grid article,.install-cards article { padding: 20px
}
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto
}
}
.status-page{width:min(480px,calc(100% - 32px));margin:clamp(24px,8vh,80px) auto;display:grid;gap:28px}.status-page h1{font-size:26px;line-height:1.3;letter-spacing:-.03em}.status-page p{font-size:14px;line-height:1.7;color:var(--text-secondary);margin:16px 0 24px}

/* Source: attachments.css */
.attachment-composer { grid-column:1 / -1;min-width:0;width:100%;margin:8px 0 }
.attachment-toolbar { display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:8px }
.attachment-toolbar small { font-size:11px;color:var(--text-secondary) }
.attachment-add,.attachment-remove { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--ui-radius-sm);background:var(--background-elevated);color:var(--text-secondary);font:inherit;font-size:12px }
.attachment-add:hover,.attachment-remove:hover {color:var(--accent) }
.attachment-preview-list,.message-attachments { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px;min-width:0 }
.attachment-preview,.attachment-card { display:flex;align-items:center;gap:10px;min-width:0;padding:8px;border:1px solid var(--border);border-radius:var(--ui-radius-sm);background:var(--background-elevated);color:var(--text-primary);text-align:left;text-decoration:none;font:inherit }
.attachment-thumb { display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;overflow:hidden;border-radius:8px;color:var(--accent);background:var(--accent-soft);font-size:20px }
.attachment-thumb img { width:100%;height:100%;object-fit:cover }
.attachment-copy { flex:1;min-width:0;display:flex;flex-direction:column;gap:3px }
.attachment-copy b { font-size:12px;font-weight:600;overflow-wrap:anywhere }
.attachment-copy small { color:var(--text-secondary);font-size:11px }
.attachment-remove { width:36px;flex:0 0 36px;padding:0 }
.attachment-viewer { width:min(900px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;border:1px solid var(--border);border-radius:var(--ui-radius-lg);background:var(--background-elevated);color:var(--text-primary);overflow:auto }
.attachment-viewer::backdrop { background:#121526aa }
.attachment-viewer h3 { margin:0 80px 16px 0;font-size:15px;overflow-wrap:anywhere }
.attachment-viewer>img,.attachment-viewer>video { display:block;max-width:100%;max-height:calc(100dvh - 140px);margin:auto;object-fit:contain }
.attachment-viewer>audio { width:100% }
.attachment-viewer-close { float:right;min-height:40px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--ui-radius-sm);background:var(--surface-soft);color:var(--text-primary) }
.support-reply .attachment-composer { margin:0 }
.post-comment-form .attachment-composer { flex-basis:100%;order:3 }
.post-comment-form { flex-wrap:wrap }

.soundboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.soundboard-card{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--background-elevated);min-width:0}.soundboard-copy{display:grid;gap:4px;overflow-wrap:anywhere}.soundboard-copy b{font-size:13px}.soundboard-copy small{font-size:11px;color:var(--text-secondary)}.soundboard-actions{display:flex;flex-wrap:wrap;gap:6px}.soundboard-actions .icon-btn{min-width:40px;min-height:40px}.soundboard-own{margin-top:24px}.soundboard-own h3{font-size:16px}.soundboard-upload{display:grid;gap:12px;margin-top:16px}.soundboard-upload label{display:grid;gap:6px;font-size:13px}.soundboard-credits{display:inline-block;margin-top:12px;font-size:11px;color:var(--text-secondary)}@media(max-width:360px){.soundboard-grid{grid-template-columns:minmax(0,1fr)}}
.gift-artwork-preview img{width:80px;height:80px;object-fit:contain}.gift-editor .attachment-composer{grid-column:1/-1}

/* Source: chat-ui.css */
/* v27: conversation grid and owned surfaces; no viewport overflow masking. */
#chatPanel:not(.profile-mode) { grid-template-rows:auto auto minmax(0,1fr) auto }
#chatPanel:not(.profile-mode)>.chat-header { grid-row:1 }
#chatPanel:not(.profile-mode)>#dmVoiceBanner { grid-row:2 }
#chatPanel:not(.profile-mode)>#messages { grid-row:3; min-height:0 }
#chatPanel:not(.profile-mode)>.composer-wrap { grid-row:4 }
.dm-voice-banner { position:relative; z-index:2; min-height:56px; margin:8px 12px; box-shadow:none; flex-wrap:wrap; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--accent) 4%,var(--background-elevated)) }
.dm-voice-banner[hidden] { display:none }
.dm-voice-banner>div { min-width:0 }
.dm-voice-banner button { margin-left:auto; flex-shrink:0; white-space:nowrap }
.chat-panel.has-chat-wallpaper .message-list { background-image:var(--chat-wallpaper); background-size:cover; background-position:center; background-attachment:scroll }
#messages:not(.profile-surface-list)>.message-row:not(.system-message) { width:fit-content; max-width:min(82%,780px); margin:5px auto 5px 0; padding:10px 12px; background:var(--background-elevated); border:1px solid var(--border); border-radius:14px 14px 14px 4px; backdrop-filter:none }
#messages:not(.profile-surface-list)>.message-row.own-message:not(.system-message) { margin-left:auto; margin-right:0; background:color-mix(in srgb,var(--accent) 9%,var(--background-elevated)); border-radius:14px 14px 4px 14px }
#messages .message-row .msg-body { min-width:0; padding:0; background:transparent }
#messages .message-row.message-selected { background:var(--accent-soft); border-color:var(--accent) }
#messages .message-row.context-open { border-color:var(--border-strong) }
.channel-heading { align-items:center }
.channel-heading>div,.channel-heading-text { min-width:0 }
.channel-title { margin:0; line-height:1.35 }
.channel-meta { margin:2px 0 0; line-height:1.3 }
.channel-occupant-avatar { width:28px; height:28px; min-width:28px; flex:0 0 28px; border-radius:50%; display:grid; place-items:center }
.channel-occupant-avatar img { width:100%; height:100%; max-width:100%; object-fit:cover; border-radius:50%; display:block }
.channel-occupant-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#messageSearchResults,#picker,#messageContextMenu,#chatActionMenu { position:fixed; z-index:1090 }
.quick-reactions { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px; padding:3px 0 8px }
.quick-reaction { display:grid; place-items:center; min-width:0; width:100%; height:36px; padding:0; border:0; border-radius:8px; background:transparent; font-size:22px }
.quick-reaction i { font-size:16px }
/* Fields have a stable border. Keyboard focus is retained on interactive buttons. */
input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible,[contenteditable]:focus-visible,.form-control:focus,.form-select:focus { outline:none!important; box-shadow:none!important }
.admin-upgrade-notice { position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:1100; display:flex; align-items:center; gap:12px; width:min(640px,calc(100% - 24px)); padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:var(--background-elevated); box-shadow:var(--shadow-float); font-size:13px }
.profile-v27 { position:relative; max-width:none; padding:24px; border-radius:20px!important }
.profile-v27 .inapp-profile-hero { background:none; border:0; padding:0 }
.profile-v27 .inapp-profile-banner.has-image { display:block!important; height:130px; border-radius:12px; margin-bottom:20px }
.profile-v27 .inapp-profile-identity { display:grid!important; grid-template-columns:80px minmax(0,1fr)!important; padding:16px 0 24px!important; align-items:start!important; gap:20px!important }
.profile-v27 .inapp-profile-avatar { width:80px!important; height:80px!important; flex-basis:80px!important }
.profile-v27 .inapp-profile-copy { min-width:0; flex:1 }
.profile-v27 .inapp-profile-title-row { align-items:flex-start; gap:12px; margin:0 }
.profile-v27 .inapp-profile-title-row h2 { font-size:24px!important; font-weight:700; letter-spacing:-.025em; line-height:1.3; margin:0 0 4px; overflow-wrap:anywhere }
.profile-v27 .inapp-profile-status { margin:0; padding:4px 0; background:none; border:0; white-space:nowrap; font-size:12px }
.profile-v27 .inapp-profile-actions { grid-column:1/-1; gap:8px; margin-top:0; flex-wrap:wrap }
.profile-v27 .inapp-profile-tabs { padding:0; margin:0; border:0; border-bottom:1px solid var(--border); border-radius:0; background:none; gap:12px }
.profile-v27 .inapp-profile-tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:none; padding:12px 8px; min-width:0; white-space:nowrap }
.profile-v27 .inapp-profile-tabs button.active { border-color:var(--accent); background:none }
.profile-v27 .inapp-profile-tab-surface { padding:24px 0 0 }
.profile-v27 .profile-tab-grid { display:grid!important; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important; gap:24px }
.profile-v27 .inapp-profile-card { border:0; border-radius:0; padding:0!important; background:none; box-shadow:none; min-width:0 }
.profile-v27 .inapp-profile-about { grid-column:1/-1; min-height:0 }
.profile-v27 .inapp-profile-card-head { margin-bottom:12px; letter-spacing:.06em; font-size:11px }
.profile-v27 .inapp-profile-bio { min-height:0; margin-bottom:20px; font-size:14px; line-height:1.65 }
.profile-v27 .inapp-profile-facts { margin:0; gap:12px }
.profile-v27 .inapp-profile-facts>div { background:var(--surface-soft); padding:12px; border:0; border-radius:10px }
.profile-v27 .inapp-profile-footer { padding:20px 0 0; margin-top:24px; border-top:1px solid var(--border); font-size:11px }
.profile-v27 .profile-back { position:absolute; top:12px; right:12px; z-index:2; width:32px; height:32px }
.profile-v27 .inapp-profile-identity { padding-right:20px!important }
.profile-collection { grid-column:1/-1; padding-top:20px; border-top:1px solid var(--border) }
.profile-collection h3,.profile-mutual h3 { font-size:15px; font-weight:650; margin:0 0 14px }
.profile-gifts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(115px,1fr)); gap:12px }
.profile-gift { display:flex; flex-direction:column; gap:6px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); padding:10px; min-width:0; text-align:left }
.profile-gift b { font-size:12px; overflow-wrap:anywhere }
.profile-gift small { font-size:11px; color:var(--text-secondary) }
.profile-mutual { grid-column:1/-1 }
.profile-mutual .person-option { max-width:420px }
.vh-video-player { overflow:hidden; border:1px solid var(--border); border-radius:14px; background:#11141b; color:#fff }
.vh-video-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; background:#181c26; color:#fff }
.vh-video-controls button { width:32px; height:32px; padding:0; color:inherit; border:0; border-radius:8px; background:transparent }
.vh-video-controls .vh-video-seek { order:-1; flex:1 0 100%; width:100%; height:12px; accent-color:var(--accent) }
.vh-video-time { flex:1; font-size:11px; font-variant-numeric:tabular-nums }
.video-speed { width:58px; border:0; border-radius:6px; background:#252b39; color:#fff; font-size:11px; padding:6px 3px }
.vh-video-player:fullscreen { width:100%; height:100%; display:flex; flex-direction:column; border:0; border-radius:0 }
.vh-video-player:fullscreen .vh-video-stage { min-height:0; flex:1; display:grid; place-items:center }
.vh-video-player:fullscreen video { width:100%; height:100%; max-height:100%; object-fit:contain }
.vh-video-player:fullscreen .msg-media-caption { display:none }
.social-embed { display:block; margin-top:10px; width:min(460px,100%); border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface-soft) }
.social-embed button { display:flex; align-items:center; gap:12px; padding:16px; border:0; background:transparent; width:100%; color:var(--text-primary); text-align:left }
.social-embed small { display:block; margin-top:4px; color:var(--text-secondary); font-size:11px }
.social-embed iframe { width:100%; aspect-ratio:16/9; border:0; display:block }
.social-embed.is-vertical iframe { aspect-ratio:9/16; max-height:600px }
.external-link-host { overflow-wrap:anywhere; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-soft) }
.external-link-url { overflow-wrap:anywhere; font-size:12px; color:var(--text-secondary) }
@media(max-width:600px) {
  #messages:not(.profile-surface-list)>.message-row:not(.system-message) { max-width:94%; padding:8px; gap:7px }
  .profile-v27 { padding:16px; border-radius:16px!important }
  .profile-v27 .inapp-profile-identity { grid-template-columns:64px minmax(0,1fr)!important; gap:14px!important; padding-top:24px!important; padding-right:0!important }
  .profile-v27 .inapp-profile-avatar { width:64px!important; height:64px!important; flex-basis:64px!important }
  .profile-v27 .inapp-profile-title-row { display:block }
  .profile-v27 .inapp-profile-title-row h2 { font-size:20px!important }
  .profile-v27 .inapp-profile-status { display:block; margin-top:4px }
  .profile-v27 .profile-tab-grid { grid-template-columns:minmax(0,1fr)!important; gap:20px }
  .profile-v27 .inapp-profile-tabs { gap:0 }
  .profile-v27 .inapp-profile-tabs button { font-size:11px; padding:12px 5px }
  .profile-v27 .inapp-profile-tabs button i { display:none }
  .profile-v27 .inapp-profile-actions .btn { padding:8px 10px; min-height:40px; font-size:12px }
  .profile-v27 .inapp-profile-facts { grid-template-columns:minmax(0,1fr) }
  .dm-voice-banner { display:grid; grid-template-columns:32px minmax(0,1fr); gap:8px; padding:10px; margin:6px 8px }
  .dm-voice-banner .dm-voice-faces { display:flex }
  .dm-voice-banner .dm-voice-faces .friend-avatar:not(:first-child) { display:none }
  .dm-voice-banner>.btn { grid-column:1/-1; width:100%; margin:0 }
}
@media(prefers-reduced-motion:reduce) { }

#chatAppearanceModal .appearance-preview { min-height:76px;padding:14px;margin:16px 0;border-radius:12px }
#chatAppearanceModal .appearance-choice { display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;padding:14px 0;margin:0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none }
#chatAppearanceModal .appearance-icon { width:32px;height:32px;font-size:16px }
#chatAppearanceModal .appearance-choice span { font-size:11px;line-height:1.5 }
#chatAppearanceModal .appearance-actions { display:flex;gap:6px;flex-wrap:wrap }
@media(max-width:480px){#chatAppearanceModal .appearance-choice{grid-template-columns:28px minmax(0,1fr)}#chatAppearanceModal .appearance-actions{grid-column:2}}
.message-price{display:block;padding:4px 8px 10px;font-size:11px;color:var(--text-secondary)}.message-price[hidden]{display:none}.read-only-conversation .composer-box{display:none!important}.read-only-conversation .message-price{padding:14px;text-align:center}

/* Source: avatars.css */
/* One image layer and one decoration layer, independent of the surrounding UI. */
.vh-avatar { position:relative; isolation:isolate; display:inline-grid; place-items:center; flex-shrink:0; aspect-ratio:1; min-width:0; min-height:0; padding:0; overflow:visible!important; border-radius:50%; line-height:1; box-sizing:border-box }
.vh-avatar.has-photo { background:transparent!important }
.vh-avatar>img { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border-radius:50%; object-fit:cover }
.vh-avatar>.presence,.vh-avatar>.mini-presence,.vh-avatar>.inapp-profile-presence { z-index:3 }
.vh-avatar[data-decoration]:not([data-decoration=""])::after { content:''; position:absolute; inset:0; z-index:2; border:2px solid var(--accent); border-radius:50%; box-sizing:border-box; pointer-events:none; box-shadow:inset 0 0 0 1px var(--background-elevated); animation:avatar-shimmer 5s ease-in-out infinite }
.vh-avatar[data-decoration=aurora]::after { border-color:#65c5ac #a88ade #e6aac7 #65c5ac }
.vh-avatar[data-decoration=frost]::after { border:3px double #91b8d9 }
.vh-avatar[data-decoration=rose]::after { border-color:#cd93a3 }
.vh-avatar[data-decoration=cosmos]::after { border-style:dotted }
.vh-avatar[data-decoration=laurel]::after { border:3px double #beab74 }
@keyframes avatar-shimmer { 50% { filter:brightness(1.25) } }
@media(prefers-reduced-motion:reduce) { .vh-avatar[data-decoration]::after { animation:none } }
.channel-heading-icon,.channel-heading-icon #channelIcon,.channel-heading-icon #channelIcon>img { border-radius:50%; overflow:hidden }
.channel-heading-icon #channelIcon>img { object-fit:cover }
.channel-occupant { display:flex; align-items:center; gap:8px; padding:6px 8px; min-width:0; width:100%; text-align:left; border-radius:8px }
.channel-occupant-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; gap:2px; line-height:1.25 }
.channel-occupant-copy>span { font-size:12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.channel-occupant-copy>small { font-size:10px; color:var(--text-secondary) }
.dm-voice-faces .vh-avatar { width:30px; height:30px; flex:0 0 30px; margin:0; border:2px solid var(--background-elevated) }
.dm-voice-faces .vh-avatar+.vh-avatar { margin-left:-7px }

.vh-avatar>img {pointer-events:none}
.vh-avatar[data-decoration]:not([data-decoration=""])::after {inset:-3px;border-width:3px;box-shadow:0 0 0 1px var(--background-elevated),0 0 10px color-mix(in srgb,var(--accent) 25%,transparent)}
.vh-avatar[data-decoration=orbit]::after {border-color:#9674e6 #62caca #9674e6 #62caca}
.vh-avatar[data-decoration=cosmos]::after {border-color:#a682de;border-width:3px;border-style:dotted}
.vh-avatar[data-decoration=laurel]::after {border-width:4px}
.settings-profile-head>.settings-profile-avatar.vh-avatar {width:64px;height:64px;flex:0 0 64px;align-self:center}
.channel-occupant .channel-occupant-avatar.vh-avatar {width:30px;height:30px;flex:0 0 30px;margin:0}
.dm-voice-faces>.friend-avatar.vh-avatar {width:30px;height:30px;flex:0 0 30px;align-self:center}
.admin-user>.friend-avatar.vh-avatar,#selectedName>.friend-avatar.vh-avatar {display:inline-grid;width:36px;height:36px;min-width:36px;max-width:36px;flex:0 0 36px;align-self:center;line-height:1;padding:0;margin:0}
.admin-user>.friend-avatar.vh-avatar>img,#selectedName>.friend-avatar.vh-avatar>img {width:100%;height:100%;max-width:none;object-fit:cover}
.call-person-row>.vh-avatar {flex-shrink:0}

/* Individually drawn vector frames: no filter or continuous paint animation. */
.vh-avatar[data-decoration]:not([data-decoration=""])::after { inset:-10%; border:0; border-radius:0; box-shadow:none; background-size:100% 100%; background-repeat:no-repeat; animation:none; filter:none; }
.vh-avatar[data-decoration=orbit]::after { border:0; background-image:url("decorations/orbit.svg"); }
.vh-avatar[data-decoration=aurora]::after { border:0; background-image:url("decorations/aurora.svg"); }
.vh-avatar[data-decoration=frost]::after { border:0; background-image:url("decorations/frost.svg"); }
.vh-avatar[data-decoration=rose]::after { border:0; background-image:url("decorations/rose.svg"); }
.vh-avatar[data-decoration=cosmos]::after { border:0; background-image:url("decorations/cosmos.svg"); }
.vh-avatar[data-decoration=laurel]::after { border:0; background-image:url("decorations/laurel.svg"); }

/* Animated circular Pro frames are shared with the admin user previews. */
.vh-avatar[data-decoration]:is([data-decoration=prism],[data-decoration=nova],[data-decoration=dragon])::after{inset:-10%;border-radius:50%;background:conic-gradient(from 0deg,#af84f4,#69e0d0,#ffca82,#f18cc6,#af84f4);padding:3px;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:vh-ring-spin 9s linear infinite}
.vh-avatar[data-decoration][data-decoration=nova]::after{background:conic-gradient(#b2d4ff,#8b77d9,#ffd79c,#b2d4ff);animation-duration:14s}
.vh-avatar[data-decoration][data-decoration=dragon]::after{background:conic-gradient(#5dd5be,#9878df,#a5f3c2,#5dd5be);animation-duration:12s}
@keyframes vh-ring-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.vh-avatar[data-decoration]::after{animation:none!important}}

/* Uploaded artwork variants */
.vh-avatar[data-decoration]:not([data-decoration=""])::after{inset:-10%;border:0;border-radius:50%;box-shadow:none;background-repeat:no-repeat;background-size:100% 100%;animation:none;filter:none}
.vh-avatar[data-decoration=prism]::after{background-image:url("decorations/generated/avatar-frame-01.png")}.vh-avatar[data-decoration=nova]::after{background-image:url("decorations/generated/avatar-frame-02.png")}.vh-avatar[data-decoration=laurel]::after{background-image:url("decorations/generated/avatar-frame-03.png")}.vh-avatar[data-decoration=cosmos]::after{background-image:url("decorations/generated/avatar-frame-04.png")}.vh-avatar[data-decoration=frost]::after{background-image:url("decorations/generated/avatar-frame-05.png")}.vh-avatar[data-decoration=dragon]::after{background-image:url("decorations/generated/avatar-frame-06.png")}
.vh-avatar[data-decoration=orbit]::after,.vh-avatar[data-decoration=aurora]::after,.vh-avatar[data-decoration=rose]::after{inset:-7%;background-image:url("decorations/generated/avatar-decoration-01.png");background-size:400% 400%}.vh-avatar[data-decoration=orbit]::after{background-position:0 0}.vh-avatar[data-decoration=aurora]::after{background-position:33.333% 0}.vh-avatar[data-decoration=rose]::after{background-position:66.666% 0}

/* Source: finish.css */
/* v28 component refinements. Layout stays intrinsic; wide data scrolls locally. */
.chat-panel,.modal-modern,.sidebar,.right-panel { font-family:var(--ui-font); letter-spacing:normal }
.channel-title { font-size:15px; font-weight:650; line-height:1.3 }
.channel-meta { font-size:12px; line-height:1.3; margin-top:3px }
.msg-head { gap:7px; font-size:13px; line-height:1.5 }
.msg-content { font-size:14px; line-height:1.6; overflow-wrap:anywhere }
.msg-content a { overflow-wrap:anywhere }
.channel-occupants { padding:4px 4px 6px 20px }
.channel-occupant-row { min-width:0; min-height:40px }
.channel-occupant-copy { min-width:0 }
.user-info { min-width:0 }
.call-stage-controls button>span { display:none }
.call-stage-controls .voice-controls { flex-wrap:wrap; justify-content:center }
.call-stage-controls { justify-content:center; gap:8px; padding:12px; border-top:1px solid var(--border) }
.call-stage-controls button i { font-size:20px }
.call-tile-avatar { width:80px; height:80px }
.call-participant-tile { background:var(--surface-soft); border:1px solid var(--border); box-shadow:none }
.call-tile-bottom { background:color-mix(in srgb,var(--background-elevated) 94%,transparent); color:var(--text-primary); border-top:1px solid var(--border); min-height:42px; padding:8px 12px }
.call-tile-name { font-size:12px; font-weight:600 }
.call-tile-bottom button { color:inherit; background:var(--surface-hover) }
.call-participant-tile.has-video .call-tile-bottom { background:#151823d9; color:#fff }
#incomingCallModal .modal-dialog { width:calc(100% - 32px); max-width:380px; margin-inline:auto }
.incoming-call-card { background:var(--background-elevated); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow-float) }
.incoming-call-card .modal-body { padding:28px 24px 24px }
.incoming-call-avatar { width:88px; height:88px; margin:6px auto 24px; box-shadow:0 0 0 6px var(--surface-soft) }
.incoming-call-orbit { animation:none }
.incoming-call-card .call-kicker { font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--text-secondary) }
.incoming-call-card h3 { font-size:24px; font-weight:650; margin:10px 0 6px; letter-spacing:-.025em }
.incoming-call-card p { font-size:13px; margin:0 }
.incoming-call-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0 16px }
.incoming-call-actions button { width:100%; min-height:76px; padding:12px; border:1px solid var(--border); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--surface-soft); font-size:12px; font-weight:600; color:var(--text-primary) }
.incoming-call-actions button i { width:24px; height:24px; font-size:24px; border-radius:0; background:transparent; color:inherit }
.incoming-call-actions .incoming-decline { background:color-mix(in srgb,var(--danger) 9%,var(--background-elevated)); color:var(--danger); border-color:transparent }
.incoming-call-actions .incoming-accept { background:var(--ui-primary); color:#fff; border-color:transparent }
.incoming-call-card small { font-size:11px }
.modal-modern .modal-header { column-gap:16px }
.modal-modern .modal-header .btn-close { align-self:start; margin:0; padding:8px; width:16px; height:16px }
.modal-modern .modal-title { font-size:18px; font-weight:650; line-height:1.4; letter-spacing:-.015em }
.modal-modern .modal-header .small { font-size:12px; line-height:1.5; margin-top:5px }
.shop-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:16px; border-top:1px solid var(--border); margin-top:22px }
.shop-actions .btn { margin:0 }
.decoration-card b { font-size:13px; line-height:1.4; text-align:center }
.decoration-card .btn { min-height:38px; font-size:12px; padding:8px 12px; width:100% }
.message-post { width:min(580px,100%); max-width:100%; margin:8px 0 0; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--background-elevated); box-shadow:none; overflow:hidden }
.message-post::before,.message-post::after { content:none }
.message-post .post-eyebrow { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:650; letter-spacing:.06em; color:var(--text-secondary); margin:0 0 10px }
.message-post .post-eyebrow em { display:none }
.message-post>h4 { font-size:20px; line-height:1.35; font-weight:650; letter-spacing:-.02em; margin:0 0 12px; overflow-wrap:anywhere }
.message-post-content { font-size:14px; line-height:1.65; overflow-wrap:anywhere; white-space:pre-wrap }
.message-post>img,.message-post .msg-attachment { max-width:100%; height:auto; border-radius:10px; margin-top:14px }
.message-post .post-footer { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 0; padding:12px 0 0; border-top:1px solid var(--border) }
.message-post .post-action { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-soft); color:var(--text-secondary); font-size:12px; line-height:1.4 }
.message-post .post-action.active { color:var(--accent); background:var(--accent-soft) }
.post-comments-panel { margin-top:12px; padding-top:12px; border-top:1px solid var(--border) }
#videoNoteModal .modal-dialog { max-width:420px }
#videoNoteModal .modal-body { display:grid; justify-items:center; gap:16px; padding:20px }
#videoNoteModal .video-note-preview { width:min(260px,100%); aspect-ratio:1; height:auto; margin:0; border-radius:50%; object-fit:cover }
#videoNoteModal .video-note-timer { margin:0; font-size:13px; font-variant-numeric:tabular-nums; color:var(--text-secondary) }
#videoNoteModal .modal-footer { justify-content:center; flex-wrap:nowrap; gap:10px; padding:16px }
#videoNoteModal .record-icon { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; flex:none; border-radius:12px; font-size:19px }
#videoNoteModal .record-icon.active { color:var(--accent); background:var(--accent-soft) }
#videoNoteModal .record-icon[hidden] { display:none }
@media(max-width:600px) {
  .message-post { padding:14px }
  .message-post>h4 { font-size:18px }
  .message-post .post-action small { display:none }
  .modal-modern .modal-title { font-size:17px }
  .channel-title { font-size:15px }
  .call-stage-controls { gap:6px; padding:10px 8px }
  .call-stage-controls button,.call-stage-controls .voice-controls button { min-width:40px!important; width:40px!important; height:44px!important; padding:0!important }
}
/* Safari must not zoom the viewport when the composer receives focus. */
@media(pointer:coarse) {
  input:not([type=checkbox]):not([type=radio]),textarea,select { font-size:16px }
  #messageInput { font-size:16px!important; line-height:1.5 }
}
#messageInput:focus,#messageInput:focus-visible { outline:0!important; box-shadow:none!important; border:0; -webkit-tap-highlight-color:transparent }

/* Source: evolution.css */
/* Predictable history layout: the latest page is painted once at its final position. */
#messages { scroll-behavior:auto; overflow-anchor:none }
#messages.history-pending>.message-row,#messages.history-pending>.message-day-separator { visibility:hidden }
.history-initial-hint { margin:auto; padding:24px; font-size:13px; color:var(--text-secondary); text-align:center }
#historyLoader { position:absolute; z-index:5; top:76px; left:50%; transform:translateX(-50%); margin:0; padding:8px 12px; border:1px solid var(--border); border-radius:20px; background:var(--background-elevated); color:var(--text-secondary); font-size:12px; pointer-events:none }
.msg-image-preview { width:min(380px,100%); max-width:100% }
.msg-image-preview>img { display:block; width:100%; aspect-ratio:4/3; height:auto; max-height:none; object-fit:cover; background:var(--surface-soft) }
/* Profile fills the conversation surface; content remains a responsive grid. */
#messages.profile-surface-list { padding:0!important; background:var(--background-elevated) }
#messages .inapp-profile { width:100%; min-height:100%; margin:0; max-width:none; border:0!important; border-radius:0!important; padding:clamp(18px,3vw,40px) }
.profile-v27 .inapp-profile-banner.has-image { height:clamp(140px,20vw,260px); margin-bottom:24px; border-radius:16px; background-size:cover; background-position:center }
.profile-v27 .inapp-profile-tabs { display:flex; flex-wrap:wrap; gap:4px; padding:5px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft) }
.profile-v27 .inapp-profile-tabs button { flex:1; padding:11px 12px; border:0; border-radius:8px; color:var(--text-secondary); font-size:13px; line-height:1.3 }
.profile-v27 .inapp-profile-tabs button.active { background:var(--background-elevated); color:var(--accent); box-shadow:0 1px 4px #0000000a }
.profile-v27 .inapp-profile-tabs button:hover { color:var(--accent) }
.profile-v27 .inapp-profile-title-row h2 { display:flex; flex-wrap:wrap; align-items:center; gap:7px }
.pro-badge { display:inline-flex; align-items:center; vertical-align:middle; padding:4px 8px; font-size:10px; line-height:1; letter-spacing:.08em; font-weight:800; border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); border-radius:6px; color:var(--accent); background:linear-gradient(120deg,var(--accent-soft),var(--background-elevated)); box-shadow:inset 0 1px 0 #ffffff40 }
.pro-badge::before { content:'✦'; margin-right:4px; font-size:12px }
.profile-banner-art[data-banner]:not([data-banner='']) { background-color:#1d1856; background-size:200% 200%; animation:banner-drift 18s ease-in-out infinite alternate }
.profile-banner-art[data-banner=aurora] { background-image:radial-gradient(ellipse at 20% 120%,#4beab5aa,transparent 55%),linear-gradient(125deg,#171a54,#4c2e90,#189c95,#292050) }
.profile-banner-art[data-banner=nebula] { background-image:radial-gradient(ellipse at 15% 20%,#fa80bfa0,transparent 45%),radial-gradient(ellipse at 85% 90%,#4c8fff,transparent 55%),linear-gradient(130deg,#351142,#111937,#5a2d90) }
.profile-banner-art[data-banner=circuit] { background-image:repeating-linear-gradient(45deg,transparent 0 28px,#7efbea35 29px 30px,transparent 31px 58px),linear-gradient(130deg,#0b2434,#16504d,#191c50) }
.profile-banner-art[data-banner=sunset] { background-image:radial-gradient(ellipse at 65% 80%,#ffba73,transparent 60%),linear-gradient(125deg,#5d337c,#d05e91,#ad584f) }
.profile-banner-art[data-banner=prism] { background-image:conic-gradient(from 40deg at 25% 40%,#7d7beb,#97def1,#d7b5fb,#f2bdce,#7d7beb) }
.profile-banner-art[data-banner=ocean] { background-image:radial-gradient(ellipse at 90% 0,#5ee3ec88,transparent 55%),repeating-radial-gradient(ellipse at 10% 140%,#163269 0 18px,#24608b 32px,#163269 65px) }
@keyframes banner-drift { from { background-position:10% 30% } to { background-position:90% 70% } }
.shop-banners { margin-top:24px }
.banner-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:12px; margin:16px 0 }
.banner-card { display:flex; flex-direction:column; gap:8px; min-width:0; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft) }
.banner-card small { color:var(--text-secondary) }
.banner-preview { width:100%; height:100px; border-radius:10px }
.banner-card .btn { margin-top:auto }
.banner-upload-preview { display:grid; place-items:center; min-height:150px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface-soft); color:var(--text-secondary); font-size:13px }
.banner-upload-preview img,.banner-upload-preview .banner-preview { width:100%; height:180px; object-fit:cover; border-radius:0 }
.banner-actions { display:flex; flex-wrap:wrap; gap:8px }
#messages:not(.profile-surface-list)>.message-row:not(.system-message) { border-color:color-mix(in srgb,var(--border) 70%,transparent); box-shadow:0 1px 2px #00000003 }
#messages .msg-text { line-height:1.55 }
.message-selection-bar { flex-wrap:wrap; gap:8px }
.message-selection-bar strong { margin-right:auto }
.message-selection-bar .btn { min-height:40px; white-space:nowrap }
@media (max-width:767px) {
  #socialSidebar .social-quick-actions { display:grid; grid-template-columns:minmax(0,1fr) 44px 44px; gap:4px; padding:6px 8px }
  #socialSidebar .social-nav-item { height:44px; min-height:44px; margin:0; padding:8px; gap:8px; font-size:13px }
  #socialSidebar #addFriendBtn,#socialSidebar #newGroupBtn { justify-content:center }
  #addFriendBtn>span,#newGroupBtn>span { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  #socialSidebar .dm-search { margin:0 8px 4px; min-height:40px; height:40px }
  #socialSidebar .social-section-head { padding:8px 12px; font-size:10px }
  #socialSidebar .dm-item { padding:8px; min-height:60px; margin-bottom:3px }
  #socialSidebar .dm-avatar { width:38px; height:38px; flex-basis:38px }
  #messages .inapp-profile { padding:16px }
  .profile-v27 .inapp-profile-banner.has-image { height:140px; margin-bottom:16px }
  .profile-v27 .inapp-profile-tabs { gap:2px }
  .profile-v27 .inapp-profile-tabs button { padding:10px 6px; font-size:12px; white-space:normal }
  .profile-v27 .inapp-profile-tabs button i { display:none }
  .profile-v27 .inapp-profile-identity { gap:12px!important }
  .message-selection-bar { padding:8px }
  .message-selection-bar .btn { padding:8px 10px }
}
@media (prefers-reduced-motion:reduce) { .profile-banner-art[data-banner]:not([data-banner='']) { animation:none } }

/* v30: coherent user pickers, icon-only call controls and a compact profile hero. */
#groupMemberModal .modal-content,#groupDmModal .modal-content {background:var(--background-elevated)}
#groupMemberFriendList,#groupFriendList {display:block;padding:0;margin:8px 0 0;border:0;border-radius:0;background:transparent;max-height:min(360px,45dvh);overflow-y:auto}
#groupMemberFriendList .group-friend-option,#groupFriendList .group-friend-option {display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 7px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none}
#groupMemberFriendList .group-friend-option:last-child,#groupFriendList .group-friend-option:last-child {border-bottom-color:transparent}
#groupMemberFriendList .group-friend-option:hover,#groupFriendList .group-friend-option:hover {border-radius:8px}
#groupMemberFriendList .group-friend-option:has(input:checked),#groupFriendList .group-friend-option:has(input:checked) {background:var(--accent-soft);border-radius:8px}
#groupMemberFriendList .group-friend-option[hidden],#groupFriendList .group-friend-option[hidden] {display:none!important}
#groupMemberFriendList .friend-avatar,#groupFriendList .friend-avatar {width:34px;height:34px;flex:0 0 34px}
#callStage .call-stage-controls {display:flex!important;justify-content:center!important;align-items:center;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none}
#callStage .call-stage-controls .voice-controls {display:flex;gap:8px;flex-wrap:nowrap;flex:0 0 auto}
#callStage .call-stage-controls button,#callStage .call-stage-controls .voice-controls button {display:grid!important;place-items:center;flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border-radius:10px;font-size:19px;line-height:1}
#callStage .call-stage-controls button>span {display:none!important}
#callStage .call-stage-controls button[hidden] {display:none!important}
#callStage .call-stage-controls button>i {margin:0!important;width:auto;height:auto}
#callStage .call-participant-tile.has-video .call-tile-bottom {background:rgba(18,21,30,.88);border-color:rgba(255,255,255,.12);color:#fff}
#callStage .call-participant-tile.has-video .call-tile-bottom button {background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.15);box-shadow:none}
#callStage .call-tile-bottom {padding:8px 10px;gap:8px}
#callStage .call-tile-bottom button {display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border-radius:8px}
#callStage .call-tile-name {flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#messages .inapp-profile {padding:20px}
#messages .profile-v27 .inapp-profile-hero {position:relative;isolation:isolate;min-height:200px;display:flex;align-items:flex-end;padding:52px 24px 22px;margin:0 0 20px;border-radius:16px;background:linear-gradient(120deg,#364c79,#245766);overflow:visible}
#messages .profile-v27 .inapp-profile-banner {display:block;position:absolute;inset:0;z-index:-2;width:100%;height:100%;min-height:0;margin:0;border-radius:16px;background-size:cover;background-position:center;overflow:hidden}
#messages .profile-v27 .inapp-profile-hero::before {content:'';position:absolute;inset:0;z-index:-1;border-radius:16px;background:linear-gradient(180deg,rgba(10,15,25,.1),rgba(10,15,25,.78));pointer-events:none}
#messages .profile-v27 .inapp-profile-identity {position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto!important;align-items:center!important;gap:18px!important;width:100%;padding:0!important;margin:0!important;background:transparent;color:#fff}
#messages .profile-v27 .inapp-profile-avatar {width:72px!important;height:72px!important;flex:0 0 72px;border:2px solid rgba(255,255,255,.85);box-shadow:none}
#messages .profile-v27 .inapp-profile-copy {min-width:0;padding:0;margin:0;color:#fff}
#messages .profile-v27 .inapp-profile-title-row {display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#messages .profile-v27 .inapp-profile-copy h2 {color:#fff;font-size:24px;margin:0 0 5px;line-height:1.25;overflow-wrap:anywhere}
#messages .profile-v27 .inapp-profile-handle,#messages .profile-v27 .inapp-profile-status {color:rgba(255,255,255,.85);font-size:12px}
#messages .profile-v27 .inapp-profile-status {margin:0;max-width:100%;overflow-wrap:anywhere}
#messages .profile-v27 .inapp-profile-actions {display:flex;grid-column:auto;flex-wrap:wrap;justify-content:flex-end;align-self:center;gap:8px;margin:0;padding:0;border:0}
#messages .profile-v27 .inapp-profile-actions .btn-outline-secondary {color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
#messages .profile-v27 .profile-back {position:absolute;right:12px;top:10px;left:auto;width:32px;height:32px;color:#fff;background:rgba(10,15,25,.28);border-radius:8px;margin:0}
#messages .profile-v27 .pro-badge {background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}
#messages .profile-v27 .inapp-profile-tabs {margin:0 0 18px}
.chat-history-skeleton {position:static!important;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;width:100%;min-height:100%;padding:24px 12px;margin:0;transform:none!important;border:0!important;border-radius:0!important;background:none!important;pointer-events:none}
.skeleton-message {display:flex;align-items:flex-end;gap:10px;width:min(420px,85%)}
.skeleton-message.skeleton-outgoing {align-self:flex-end;flex-direction:row-reverse}
.skeleton-avatar {width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--surface-hover)}
.skeleton-bubble {display:flex;flex-direction:column;gap:9px;flex:1;padding:16px;border-radius:14px;background:var(--surface-soft)}
.skeleton-bubble>i {display:block;height:9px;width:100%;border-radius:8px;background:var(--border);animation:none}
.skeleton-bubble>i:nth-child(2) {width:82%}.skeleton-bubble>i:last-child {width:55%}
.history-load-error {padding:24px;color:var(--text-secondary);text-align:center}
@keyframes history-skeleton-pulse {50%{opacity:.35}}
/* Crop only the chat thumbnail. Full-screen viewing and the original stay intact. */
#messages .msg-image-preview {display:block;position:relative;width:360px;max-width:100%;aspect-ratio:4/3;height:auto;overflow:hidden;border-radius:12px}
#messages .msg-image-preview>img {position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-height:none;object-fit:cover;object-position:center}
@media(max-width:600px){
  #messages .inapp-profile {padding:12px}
  #messages .profile-v27 .inapp-profile-hero {min-height:214px;padding:46px 16px 18px}
  #messages .profile-v27 .inapp-profile-identity {grid-template-columns:60px minmax(0,1fr)!important;gap:14px!important}
  #messages .profile-v27 .inapp-profile-avatar {width:60px!important;height:60px!important}
  #messages .profile-v27 .inapp-profile-copy h2 {font-size:21px}
  #messages .profile-v27 .inapp-profile-actions {grid-column:1/-1;justify-content:flex-start}
  #callStage .call-stage-controls,#callStage .call-stage-controls .voice-controls {gap:5px!important}
}
@media(prefers-reduced-motion:reduce){.skeleton-bubble>i {animation:none}}
/* Database-owned catalogs and pack management. */
.collection-manager {display:grid;gap:8px;margin-top:16px}
.collection-manager-row {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.collection-manager-row:last-child {border:0}.collection-manager-row>div {min-width:0;overflow-wrap:anywhere}.collection-manager-row small {display:block;margin-top:4px}.collection-manager-row p {margin:6px 0 0}.collection-manager-row>button {flex-shrink:0}
.gift-collection-section {margin-top:20px}.gift-collection-section h4 {font-size:16px;font-weight:650;margin-bottom:10px}
#giftArtworkPreview {aspect-ratio:1;width:min(180px,100%);margin:auto;display:grid;place-items:center}#giftArtworkPreview>img {width:100%;height:100%;object-fit:contain}
#giftCollectionFilter {min-width:180px}
#picker.packs-picker {display:flex!important;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 24px));max-height:min(520px,72dvh);padding:12px;overflow:hidden}
#picker.packs-picker.d-none {display:none!important}
.pack-picker-tabs {display:flex;align-items:center;gap:4px;flex-shrink:0}.pack-picker-tabs>button {width:auto!important;min-width:0;padding:7px 8px!important;font-size:12px!important;border-radius:8px}.pack-picker-tabs>button.active {color:var(--accent);background:var(--accent-soft)}
.pack-picker-content {min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px}.pack-picker-content h4 {font-size:15px;margin:6px 0}.pack-search {flex-shrink:0;font-size:13px}
.sticker-pack-card {display:flex!important;align-items:center;text-align:left;gap:12px;width:100%!important;height:auto!important;min-height:66px;padding:10px!important;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text-primary);overflow:hidden;cursor:pointer}.sticker-pack-card>img,.sticker-pack-card>i {display:block;width:48px!important;height:48px!important;flex:0 0 48px;object-fit:contain;font-size:28px!important}.sticker-pack-card .person-copy {display:flex;flex-direction:column;min-width:0;gap:3px;white-space:normal}.sticker-pack-card b {font-size:14px;overflow-wrap:anywhere}.sticker-pack-card small {font-size:11px;color:var(--text-secondary);white-space:normal}
.pack-sticker-grid,.pack-editor-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}.pack-sticker-grid .sticker-picker-item {width:100%!important;height:auto!important;aspect-ratio:1;padding:6px!important;background:var(--surface-soft);border:0}.pack-sticker-grid .sticker-picker-item img {width:100%;height:100%;object-fit:contain}
.pack-owner-list {display:grid;gap:8px;margin-top:14px}.pack-editor {display:grid;gap:12px}.pack-editor label,#myStickerPacksModal .modal-body>label {display:grid;gap:6px;font-size:13px;color:var(--text-secondary)}.pack-status {margin:12px 0;color:var(--text-secondary);font-size:12px}.pack-review-note {border-left:3px solid var(--accent);padding:10px;background:var(--accent-soft);border-radius:8px;font-size:13px;white-space:pre-wrap}
.pack-editor-grid {margin:16px 0}.pack-editor-sticker {position:relative;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border);border-radius:10px;min-width:0}.pack-editor-sticker img {aspect-ratio:1;object-fit:contain;width:100%;min-height:0}.pack-editor-sticker small {font-size:10px;overflow-wrap:anywhere}.pack-editor-sticker .btn-close {position:absolute;top:3px;right:3px;background-color:var(--surface)!important;border:1px solid var(--border)!important}.pack-creator {display:flex;align-items:center;gap:10px;font-size:13px;margin:8px 0 16px}.pack-loading {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px}.pack-loading span {aspect-ratio:1;background:var(--surface-soft);border-radius:12px;animation:none}
#packReviewDialog {width:min(700px,calc(100vw - 24px))}#packReviewContent {padding:0 18px}#packReviewContent h3 {font-size:18px;overflow-wrap:anywhere}#packReviewContent p {white-space:pre-wrap;overflow-wrap:anywhere}#myStickerPacksModal .modal-footer {flex-wrap:wrap}#myStickerPacksModal .modal-dialog {max-width:600px}
@media(max-width:480px){.pack-editor-grid {grid-template-columns:repeat(3,minmax(0,1fr))}.collection-manager-row {align-items:flex-start}.collection-manager-row>button {font-size:12px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.pack-loading span {animation:none}}
/* Local preview reflection never changes remote cameras or screen sharing. */
#callStage .call-participant-tile:not(.is-mirrored-camera) video {transform:none!important}
#callStage .call-participant-tile.is-mirrored-camera video {transform:scaleX(-1)!important}
#videoNoteModal .video-note-capture {position:relative;width:min(260px,100%);aspect-ratio:1;margin:auto;border-radius:50%;overflow:hidden;flex-shrink:0;background:#10121a}
#videoNoteModal .video-note-preview,#videoNoteModal .video-note-canvas {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;margin:0;transform:none!important}
#videoNoteModal .video-note-preview[data-mirrored=true]:not(.has-recording-canvas) {transform:scaleX(-1)!important}
#videoNoteModal .video-note-canvas {z-index:1;pointer-events:none}
#videoNoteModal .video-note-preview.has-recording-canvas {opacity:.001}
.recording-stream-probe {position:fixed;bottom:0;left:0;width:2px;height:2px;opacity:.001;pointer-events:none}
#videoNoteModal .modal-footer .record-icon[hidden] {display:none!important}
#messages .msg-image-preview>.msg-media-caption {position:absolute;bottom:0;left:0;right:0;z-index:1;color:#fff;background:rgba(18,21,30,.72)}
#messages .msg-image-preview>.msg-media-caption small {color:rgba(255,255,255,.85)}

/* Source: refresh.css */
/* v31. Component layout is independent of message count and modal contents. */
.icon-btn:hover,.glass-icon-btn:hover,.header-action-btn:hover,
body .modal .btn-close:hover,body .pack-editor-sticker .btn-close:hover { color:var(--accent);
}
.icon-btn,.header-action-btn,body .btn-close { transition:color .15s ease; }
.modal-header { flex-shrink:0; }
.modal-header .btn-close { align-self:center!important; }
.modal-header .modal-title { overflow-wrap:anywhere; }
.modal-footer { flex-shrink:0; align-items:center; flex-wrap:wrap; }
.modal-footer>.btn { margin:0; }
.modal-dialog { padding:0; }
.modal-content { min-width:0; }
.modal-body { min-width:0; overscroll-behavior:contain; }
#mediaPreviewModal .modal-dialog { width:calc(100% - 32px); max-width:1120px; margin:16px auto; min-height:calc(100% - 32px); }
#mediaPreviewModal .modal-content { max-height:calc(100dvh - 32px); }
#mediaPreviewModal .modal-header { min-height:72px; padding:16px 20px; gap:16px; }
#mediaPreviewModal .modal-header>div:last-child { flex:0 0 auto; }
#mediaPreviewModal .media-preview-body { min-height:0; height:min(720px,calc(100dvh - 112px)); max-height:none; padding:16px; overflow:hidden; }
#mediaPreviewModal .media-preview-body>img,#mediaPreviewModal .media-preview-body>video {
  width:100%; height:100%; max-height:100%; min-height:0; object-fit:contain; border-radius:8px; box-shadow:none;
}
#mediaPreviewActions { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; padding:0; }
.media-nav-btn { z-index:3; }
#settingsModal .modal-dialog { width:calc(100% - 32px); max-width:940px; }
#settingsModal .modal-content { height:min(740px,calc(100dvh - 40px)); max-height:calc(100dvh - 40px); }
#settingsModal .modal-body { flex:1; min-height:0; overflow:hidden; }
#settingsModal .modal-footer:empty { display:none; }
#settingsModal .settings-hub { height:100%; min-height:0; }
#settingsModal .settings-hub-nav,#settingsModal .settings-hub-pane { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.settings-hub-pane { padding:24px 28px; }
.settings-hub-pane>h3 { margin-bottom:22px; letter-spacing:-.02em; }
.settings-field { font-size:13px; }
.settings-form { gap:20px; }

/* The wallpaper paints against the viewport, never against scrolling content. */
.chat-panel.has-chat-wallpaper #messages { background-attachment:scroll; background-size:cover; background-repeat:no-repeat; background-position:center; }
#messages:not(.profile-surface-list) { padding:20px clamp(12px,2.4vw,32px) 16px; }
#messages:not(.profile-surface-list)>.message-row:not(.system-message) {
  display:flex; align-items:flex-start; gap:10px; width:fit-content; max-width:min(84%,700px);
  padding:10px 13px; margin-top:3px; margin-bottom:3px; border:1px solid color-mix(in srgb,var(--border) 55%,transparent);
  border-radius:17px 17px 17px 5px; background:var(--background-elevated); box-shadow:0 1px 2px #18213b06;
}
#messages:not(.profile-surface-list)>.message-row.own-message:not(.system-message) {
  border-radius:17px 17px 5px 17px; background:color-mix(in srgb,var(--accent) 8%,var(--background-elevated));
}
#messages:not(.profile-surface-list)>.message-row.group-start { margin-top:14px; }
#messages .message-row>.msg-avatar { width:30px; height:30px; flex:0 0 30px; margin-top:1px; }
#messages .message-row>.msg-body { flex:1; min-width:0; padding:0; background:transparent; }
#messages .msg-head { gap:7px; min-height:20px; margin:0 0 3px; align-items:center; }
#messages .msg-user { color:var(--text-primary); font-weight:650; font-size:12px; }
#messages .msg-time,#messages .msg-edited { font-size:10px; color:var(--text-tertiary); white-space:nowrap; }
#messages .msg-content { font-size:14px; line-height:1.55; margin:0; overflow-wrap:anywhere; }
#messages .message-row.grouped-message { padding-top:8px; padding-bottom:8px; }
#messages .message-row.grouped-message::before { display:none; }
#messages .message-row.grouped-message>.msg-avatar { display:none; }
#messages .message-row.grouped-message .msg-head { display:none; }
#messages .msg-image-preview { width:360px; max-width:100%; margin:6px 0 0; aspect-ratio:4/3; box-shadow:none; border:0; border-radius:11px; }
#messages .msg-image-preview>img { object-fit:contain; background:var(--surface-soft); }
#messages .msg-media-caption { padding:7px 10px; font-size:10px; line-height:1.4; }
#messages .msg-media-caption>span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#messages .reaction-bar:has(>.reaction-add:only-child) { display:none; }
#messages .reaction-bar { margin:7px 0 0; gap:4px; }
#messages .reaction-btn { font-size:12px; min-height:27px; padding:3px 8px; border-radius:9px; }
#messages .message-day-separator { margin:22px 0 14px; }
#messages .message-day-separator>span { padding:5px 11px; font-size:11px; font-weight:500; border:0; background:var(--surface-soft); }
.message-actions { border-radius:10px; }
.composer-wrap { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.chat-history-skeleton { animation:none; }
.skeleton-bubble>i,.pack-loading span { animation:none; }

/* Calm default artwork for every profile, including the settings preview. */
.profile-banner-default,.public-profile-banner.profile-banner-default,.banner-upload-preview:empty,.profile-settings-cover:not(.has-image) {
  background-color:#343965;
  background-image:radial-gradient(ellipse at 18% 0%,#9297d880,transparent 60%),radial-gradient(ellipse at 90% 105%,#6cb8b870,transparent 58%),linear-gradient(125deg,#454471,#242d48);
  background-size:cover; background-position:center;
}
#messages .profile-v27 .inapp-profile-banner { display:block!important; }
#messages .profile-v27 .inapp-profile-banner::before,#messages .profile-v27 .inapp-profile-banner::after { display:none; }
.public-profile-banner { display:block!important; height:clamp(160px,22vw,220px); }
.public-profile-banner-glow { display:none; }
#messages .profile-v27 .inapp-profile-presence {
  right:-1px!important; bottom:1px!important; width:17px!important; height:17px!important;
  border:3px solid #303953!important; box-shadow:0 0 0 1px #ffffff65; border-radius:50%;
}
#messages .inapp-profile-presence.online { background:#52d6ac; }
#messages .inapp-profile-presence.offline { background:#b6bed1; }
#messages .inapp-profile-presence.idle { background:#f0c678; }
#messages .inapp-profile-presence.dnd { background:#f38d98; }
#messages .profile-v27 .inapp-profile-status { white-space:normal; line-height:1.45; }
.profile-banner-art[data-banner]:not([data-banner='']) { animation:none; background-size:cover; }
.pack-editor>label { display:grid; gap:7px; margin-bottom:16px; font-size:13px; }
.pack-editor-grid { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }

@media (max-width:767px) {
  .modal-dialog { margin:12px; }
  .modal-header,.modal-modern .modal-header { padding:16px; gap:12px; }
  .modal-modern .modal-title { font-size:17px; }
  .modal-body { padding:16px; }
  #settingsModal .modal-dialog { width:calc(100% - 20px); margin:10px auto; }
  #settingsModal .modal-content { height:calc(100dvh - 20px); max-height:calc(100dvh - 20px); }
  #settingsModal .settings-hub { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  #settingsModal .settings-hub-nav { display:flex; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; border-right:0; border-bottom:1px solid var(--border); padding:8px; scrollbar-gutter:auto; }
  #settingsModal .settings-hub-nav button { flex:0 0 auto; min-height:40px; font-size:12px; }
  #settingsModal .settings-hub-pane { padding:20px 16px; }
  #mediaPreviewModal .modal-dialog { width:calc(100% - 16px); margin:8px auto; min-height:calc(100% - 16px); }
  #mediaPreviewModal .modal-content { max-height:calc(100dvh - 16px); }
  #mediaPreviewModal .modal-header { padding:12px; min-height:68px; gap:8px; }
  #mediaPreviewModal .media-preview-body { height:calc(100dvh - 100px); padding:6px; }
  #messages:not(.profile-surface-list) { padding:12px 10px; }
  #messages:not(.profile-surface-list)>.message-row:not(.system-message) { max-width:92%; padding:9px 11px; }
  #messages .msg-content { font-size:14px; }
  #messages .msg-image-preview { width:320px; }
  #callStage .call-stage-controls { justify-content:flex-start!important; scroll-padding:8px; }
  #callStage .call-stage-controls .voice-controls { margin-left:auto; }
  #callStage .call-stage-controls>#leaveVoice { margin-right:auto; }
  .appearance-choice { flex-wrap:wrap; }
  .appearance-actions { margin-left:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .icon-btn,.header-action-btn,body .btn-close { transition:none; }
}

/* Source: messenger-v32.css */
/* Message layout: the row arranges the avatar; only the body is a bubble. */
#messages:not(.profile-surface-list):not(.social-dashboard) { padding:20px clamp(12px,3vw,40px); }
#messages:not(.profile-surface-list)>.message-row:not(.system-message) {
  display:flex; gap:8px; width:fit-content; max-width:min(85%,660px); margin:3px 0; padding:0;
  background:transparent; border:0; border-radius:0; box-shadow:none; align-items:flex-end;
}
#messages:not(.profile-surface-list)>.message-row.own-message:not(.system-message) { margin-left:auto; background:transparent; border:0; }
#messages:not(.profile-surface-list)>.message-row.group-start { margin-top:12px; }
#messages .message-row>.msg-body {
  min-width:0; padding:9px 12px 6px; border:1px solid color-mix(in srgb,var(--border) 45%,transparent);
  border-radius:16px 16px 16px 5px; background:var(--background-elevated); box-shadow:0 1px 2px #1320390a;
}
#messages .message-row.own-message>.msg-body { background:color-mix(in srgb,var(--accent) 12%,var(--background-elevated)); border-color:color-mix(in srgb,var(--accent) 14%,transparent); border-radius:16px 16px 5px 16px; }
#messages .message-row.grouped-message>.msg-body { border-radius:12px; }
#messages .message-row>.msg-avatar { width:30px; height:30px; flex:0 0 30px; margin:0 0 4px; }
#messages .message-row.grouped-message>.msg-avatar { display:block; visibility:hidden; }
#messages .message-row.direct-message>.msg-avatar,#messages .message-row.own-message>.msg-avatar { display:none; }
#messages .message-row.direct-message .msg-head,#messages .message-row.own-message .msg-head,#messages .message-row.grouped-message .msg-head { display:none; }
#messages .msg-head { margin:0 0 4px; min-height:0; }
#messages .msg-user { color:var(--accent); font-size:12px; font-weight:650; }
#messages .msg-content { font-size:14px; line-height:1.5; overflow-wrap:anywhere; white-space:pre-wrap; }
#messages .msg-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; column-gap:6px; row-gap:2px; margin-top:4px; min-height:14px; color:var(--text-tertiary); line-height:1.3; }
#messages .msg-meta .msg-time,#messages .msg-meta .msg-edited { font-size:10px; line-height:1.3; }
#messages .dm-read-state { display:inline-flex; align-items:center; gap:3px; margin:0; font-size:10px; line-height:1.3; color:var(--text-tertiary); white-space:nowrap; }
#messages .dm-read-state i { font-size:14px; line-height:1; color:inherit; }
#messages .dm-read-state.is-read { color:var(--accent); }
#messages .message-view-count { display:inline-flex; align-items:center; gap:3px; font-size:10px; margin:0; }
#messages .msg-image-preview { margin:4px 0 0; width:350px; max-width:100%; aspect-ratio:auto; border-radius:11px; }
#messages .msg-image-preview>img { position:static; width:100%!important; height:auto!important; aspect-ratio:auto; max-height:440px; object-fit:cover; }
#messages .msg-image-preview>.msg-media-caption { background:linear-gradient(transparent,#142033b8); color:#fff; padding:14px 8px 6px; }
#messages .msg-reply-preview { display:block; width:100%; max-width:100%; padding:7px 9px; border:0; border-left:3px solid var(--accent); border-radius:5px; margin:2px 0 8px; background:color-mix(in srgb,var(--accent) 7%,transparent); text-align:left; }
#messages .msg-reply-preview>i { display:none; }
#messages .msg-reply-preview span { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#messages .msg-reply-preview b { display:block; color:var(--accent); }
#messages .reaction-bar { gap:4px; margin-top:6px; }
#messages .reaction-btn { background:color-mix(in srgb,var(--accent) 6%,var(--background-elevated)); border-color:transparent; padding:3px 8px; }
#messages .message-row.sticker-message>.msg-body { background:transparent; border:0; box-shadow:none; padding:2px; }
#messages .sticker-message .msg-meta { background:var(--background-elevated); border-radius:9px; padding:3px 7px; width:fit-content; margin-left:auto; }
#messages .message-actions { top:-18px; right:4px; left:auto; border-radius:10px; }
#messages .message-actions button { width:30px; height:30px; }
#messages .message-row:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:16px; }
#messages .message-day-separator { clear:both; text-align:center; margin:20px 0 14px; }
#messages .message-day-separator>span { background:color-mix(in srgb,var(--background-elevated) 88%,transparent); color:var(--text-secondary); box-shadow:0 1px 3px #00000008; }
.voice-message,.msg-video-preview,.msg-audio-preview,.msg-attachment,.paid-post-card,.poll-card { max-width:100%; min-width:0; }
.voice-message { width:300px; }
.msg-video-preview { width:350px; }
.forward-credit { font-size:11px; color:var(--accent); margin-bottom:5px; }

/* Keep dialog activity visible at every sidebar width. */
#dmList .dm-entry { position:relative; gap:0; border-radius:12px; margin:2px 4px; }
#dmList .dm-item { min-width:0; padding:11px 8px; gap:10px; border-radius:12px; }
#dmList .dm-copy { gap:5px; flex:1 1 auto; overflow:hidden; }
#dmList .dm-item-top { display:flex; align-items:center; gap:6px; }
#dmList .dm-item-name { font-size:13px; font-weight:600; flex:1; min-width:0; }
#dmList .dm-item-time { display:block; font-size:10px; flex-shrink:0; margin-left:auto; }
#dmList .dm-item-preview { font-size:12px; line-height:1.35; color:var(--text-secondary); }
#dmList .dm-item-tail { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:5px; width:auto; min-width:0; flex:0 0 auto; }
#dmList .dm-item-tail:empty { display:none; }
#dmList .dm-item.has-unread { background:color-mix(in srgb,var(--accent) 6%,transparent); box-shadow:inset 3px 0 var(--accent); }
#dmList .dm-item.has-unread .dm-item-name { font-weight:750; }
#dmList .dm-item.has-unread .dm-item-preview { color:var(--text-primary); font-weight:550; }
#dmList .dm-item.has-unread .dm-item-time { color:var(--accent); }
#dmList .dm-item.active { background:var(--accent-soft); }
#dmList .nav-unread-badge { display:inline-grid; place-items:center; min-width:21px; height:21px; padding:0 6px; font-size:11px; font-weight:700; background:var(--accent); color:#fff; border:0; border-radius:11px; }
#dmList .dm-unread-dot { width:10px; height:10px; border-radius:50%; background:var(--accent); }
#dmList .dm-entry>.dm-favorite-btn { display:none; }
#dmList .dm-entry>.dm-favorite-btn.active { display:grid; position:absolute!important; right:8px!important; top:7px!important; width:16px!important; height:16px!important; margin:0!important; opacity:1; pointer-events:none; }
#dmList .dm-entry.favorite .dm-item-time { margin-right:19px; }
#dmList .dm-avatar-wrap { flex:0 0 40px; width:40px; height:40px; }
#dmList .dm-avatar { width:40px; height:40px; }
#socialSidebar .social-quick-actions { display:flex; align-items:center; gap:6px; padding:8px 12px; }
#socialSidebar .social-nav-item { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; min-width:0; min-height:36px; height:36px; width:auto; margin:0; padding:7px 10px; gap:6px; font-size:12px; border:0; background:transparent; }
#socialSidebar #socialFriends { background:var(--accent-soft); color:var(--accent); }
#socialSidebar #addFriendBtn,#socialSidebar #newGroupBtn { width:36px; padding:0; }
#socialSidebar #addFriendBtn>span,#socialSidebar #newGroupBtn>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#socialSidebar .social-nav-item i { font-size:17px; }
#socialSidebar .dm-search { margin:4px 12px 8px; }
.open-call-stage { min-height:36px; padding:8px 12px; font-size:12px; }
.modal-title,.settings-section-head h4,.settings-section-head p { overflow-wrap:anywhere; }
.modal-header>* { min-width:0; }
.settings-grid,.settings-card,.settings-member-row,.profile-settings-card { min-width:0; }
.modal-footer { gap:8px; }
.form-control,.form-select { min-width:0; }
@media(max-width:767px) {
  #messages:not(.profile-surface-list):not(.social-dashboard) { padding:12px 10px 16px; }
  #messages:not(.profile-surface-list)>.message-row:not(.system-message) { max-width:92%; padding:0; }
  #messages .message-row>.msg-body { padding:8px 10px 5px; }
  #messages .msg-image-preview,#messages .msg-video-preview { width:300px; }
  #messages .message-actions { display:none; }
  #messages .message-row>.msg-avatar { width:24px; height:24px; flex-basis:24px; }
  #socialSidebar .social-quick-actions { padding:6px 10px; gap:5px; }
  #socialSidebar .social-nav-item { min-height:36px; height:36px; }
  #socialSidebar #socialFriends { max-width:130px; }
  #socialSidebar .dm-search { margin-inline:10px; }
  .modal-footer>.btn { min-height:40px; flex:0 1 auto; white-space:normal; }
  .dm-voice-banner { flex-wrap:wrap; gap:8px; padding:10px; }
  .dm-voice-banner>.btn { margin-left:auto; min-height:36px; padding:6px 12px; }
  .settings-section-head,.settings-member-row { flex-wrap:wrap; }
  .settings-member-identity { min-width:0; }
}
@media(max-width:380px) {
  #messages .msg-content { font-size:13px; }
  #messages .voice-message { width:250px; }
  .header-action-btn { width:32px; height:34px; }
}

/* Source: ui-v33.css */
/* Hover changes the foreground; backgrounds continue to express selection. */
body .btn {
  --bs-btn-hover-bg:var(--bs-btn-bg); --bs-btn-hover-border-color:var(--bs-btn-border-color);
  --bs-btn-hover-color:var(--accent);
}
body .btn-primary,body .btn-danger { --bs-btn-hover-color:var(--bs-btn-color); }
:where(button,.btn) { transition:color .15s ease; }
:where(button,.btn):not(:disabled):hover>.bi,
:where(button,.btn):not(:disabled):hover>span>.bi,
.channel-group-head button:not(:disabled):hover { color:var(--accent); }
:where(button,.btn):is(.danger,.cancel,.btn-outline-danger):not(:disabled):hover>.bi { color:var(--danger); }
:where(.btn-primary,.btn-danger,.profile-inline-action.primary,.send-btn,.voice-record-action.send,.voice-play-btn):hover>.bi { color:inherit; }
:where(button,a.btn):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#shopModal .modal-dialog { width:min(760px,calc(100% - 24px)); margin-inline:auto; }
#shopModal .modal-body { min-width:0; padding:22px; }
#shopModal .modal-content { min-height:min(640px,calc(100dvh - 48px)); }
#shopModal [hidden] { display:none!important; }
.account-shop-summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px; border:1px solid var(--border); border-radius:18px; background:var(--surface-soft); }
.account-shop-balance,.account-shop-plan { display:flex; flex-direction:column; gap:7px; min-width:0; }
.account-shop-balance>span,.account-shop-plan>small { color:var(--text-secondary); font-size:12px; }
.account-shop-balance>strong { font-size:clamp(23px,4vw,32px); line-height:1.2; letter-spacing:-.04em; overflow-wrap:anywhere; }
.account-shop-plan { text-align:right; font-size:14px; }
.account-shop-tabs { display:flex; gap:4px; margin:20px 0; border-bottom:1px solid var(--border); padding-bottom:4px; }
.account-shop-tabs .btn { display:flex; align-items:center; justify-content:center; gap:7px; flex:1; min-width:0; min-height:42px; padding:10px 6px; border:0; border-radius:10px; background:transparent; color:var(--text-secondary); font-size:13px; white-space:nowrap; box-shadow:none; }
.account-shop-tabs .btn[aria-selected=true] { color:var(--accent); background:var(--accent-soft); font-weight:650; }
.account-shop-panel { min-width:0; }
.account-shop-panel>h4 { font-size:16px; font-weight:650; margin-bottom:8px; }
.account-shop-panel .shop-pro { padding:22px; }
.account-shop-panel .shop-pro h3 { font-size:24px; line-height:1.2; }
.shop-pro-benefits { display:grid; gap:14px; padding:8px 0; list-style:none; margin:18px 0; }
.shop-pro-benefits li { display:flex; align-items:center; gap:11px; font-size:13px; }
.shop-pro-benefits .bi { color:var(--accent); font-size:18px; flex:none; }
.account-shop-panel .shop-actions { margin-top:16px; }
.wallet-history .wallet-entry { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.wallet-history .wallet-entry>div { min-width:0; display:flex; flex-direction:column; gap:5px; }
.wallet-history .wallet-entry b { font-size:13px; font-weight:550; overflow-wrap:anywhere; }
.wallet-history .wallet-entry small { font-size:11px; color:var(--text-tertiary); }
.wallet-history .wallet-entry>strong { font-size:13px; flex:none; white-space:nowrap; }
.wallet-history .credit { color:var(--success); }
.wallet-history .debit { color:var(--text-primary); }
#walletMore { margin-top:14px; }
.admin-collection-fold { margin-top:16px; }
.admin-collection-fold>summary { color:var(--text-secondary); font-size:13px; cursor:pointer; padding:8px 0; }
.admin-collection-fold>summary .admin-tag { margin-left:8px; }
[data-admin-page=gifts] .admin-collection-fold .collection-manager { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-height:440px; overflow:auto; padding:12px 2px; overscroll-behavior:contain; }
[data-admin-page=gifts] .admin-collection-fold .collection-manager-row { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:14px; border:1px solid var(--border); border-radius:12px; }
.admin-collection-fold .collection-manager-row>button { align-self:flex-start; }
.admin-collection-fold .collection-manager-row p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:0; }
@media(max-width:540px) {
  #shopModal .modal-body { padding:14px; }
  #shopModal .modal-dialog { width:calc(100% - 16px); }
  .account-shop-summary { padding:16px; gap:16px; align-items:flex-start; flex-direction:column; }
  .account-shop-plan { text-align:left; flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px 12px; }
  .account-shop-tabs { margin:16px 0; }
  .account-shop-tabs .btn { font-size:12px; gap:5px; }
  .account-shop-panel .shop-pro { padding:16px; }
  .account-shop-panel .shop-pro h3 { font-size:21px; }
  .wallet-history .wallet-entry { gap:10px; }
  [data-admin-page=gifts] .admin-collection-fold .collection-manager { grid-template-columns:minmax(0,1fr); max-height:380px; }
}
@media(prefers-reduced-motion:reduce) { :where(button,.btn) { transition:none; } }

/* Source: ui-v34.css */
/* Media and administration refinements, shared across themes. */
.msg-album{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;max-width:560px;overflow:hidden;border-radius:14px;min-width:0}
.msg-album .msg-image-preview{width:100%;height:100%;margin:0;border-radius:3px;aspect-ratio:1;border:0;overflow:hidden}
.msg-album .msg-image-preview img{width:100%;height:100%;max-height:310px;object-fit:cover;display:block}
.msg-album[data-count="3"]>:first-child,.msg-album[data-count="5"]>:first-child,.msg-album[data-count="7"]>:first-child,.msg-album[data-count="9"]>:first-child{grid-column:1/-1;aspect-ratio:2}
.msg-album .msg-attachment{grid-column:1/-1;min-width:0}
.msg-media-caption{display:none}.message-row:has(.msg-album) .msg-content{max-width:min(560px,100%)}
.crop-dialog{width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:1px solid var(--border);border-radius:24px;padding:22px;color:var(--text-primary);background:var(--surface);overflow:auto}
.crop-dialog::backdrop{background:rgba(10,14,25,.66)}.crop-dialog header{display:flex;gap:16px;justify-content:space-between;align-items:start}.crop-dialog h2{font-size:19px;font-weight:750;margin:0 0 7px}.crop-dialog p{font-size:13px;color:var(--text-secondary)}.crop-stage{background:var(--surface-soft);padding:14px;border-radius:16px;display:flex;justify-content:center;overflow:hidden}.crop-stage canvas{display:block;max-width:100%;max-height:50dvh;width:auto;height:auto;touch-action:none;cursor:grab}.crop-stage canvas.crop-circle{border-radius:50%}.crop-zoom{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;font-size:13px;margin:18px 0}.crop-zoom input{width:100%;accent-color:var(--accent)}.crop-dialog footer{display:flex;gap:8px;justify-content:flex-end}.crop-hint{margin:8px 0 18px}
.call-participant-tile:fullscreen .call-tile-bottom{bottom:0;padding:5px 10px max(5px,env(safe-area-inset-bottom));min-height:34px;background:linear-gradient(transparent,rgba(8,12,20,.7));transition:opacity .2s;gap:8px}
.call-participant-tile:fullscreen .call-tile-name{font-size:12px}.call-participant-tile:fullscreen .call-tile-bottom button{width:28px;height:28px;min-width:28px;padding:4px}
.call-participant-tile:fullscreen.controls-idle:not(:has(button:focus-visible,input:focus-visible)) .call-tile-bottom{opacity:0;pointer-events:none}.call-participant-tile:fullscreen.controls-idle{cursor:none}
.impersonation-bar{display:flex;gap:12px;align-items:center;justify-content:center;background:#352851;color:#fff;padding:8px 12px;font-size:13px;position:fixed;top:0;inset-inline:0;z-index:2000}.impersonation-bar button{border:1px solid #9b84c7;background:transparent;color:inherit;border-radius:8px;padding:5px 10px}.is-impersonating #appView{padding-top:48px}
@media(max-width:600px){.crop-dialog{padding:16px;border-radius:18px}.crop-dialog footer{flex-wrap:wrap}.crop-dialog footer button{flex:1}.msg-album{max-width:100%}.msg-album .msg-image-preview img{max-height:220px}.impersonation-bar{font-size:11px;gap:6px}.impersonation-bar button{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.call-participant-tile:fullscreen .call-tile-bottom{transition:none}}

.impersonation-fallback{position:fixed;bottom:10px;right:10px;padding:10px;border-radius:10px;background:var(--surface);z-index:3000;box-shadow:0 1px 10px #0003}.is-impersonating .impersonation-fallback{display:none}

#messages .msg-album .msg-image-preview{width:100%;margin:0;aspect-ratio:1;border-radius:3px}
#messages .msg-album .msg-image-preview>img{position:absolute;inset:0;width:100%!important;height:100%!important;max-height:none;object-fit:cover}
#messages .msg-album[data-count="3"]>.msg-image-preview:first-child,#messages .msg-album[data-count="5"]>.msg-image-preview:first-child,#messages .msg-album[data-count="7"]>.msg-image-preview:first-child,#messages .msg-album[data-count="9"]>.msg-image-preview:first-child{aspect-ratio:2}

.inapp-profile.profile-v27 .profile-tab-grid{gap:20px}
.inapp-profile.profile-v27 .profile-collection,.inapp-profile.profile-v27 .profile-mutual{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);margin-top:0}
.inapp-profile.profile-v27 .profile-collection h3,.inapp-profile.profile-v27 .profile-mutual h3{font-size:15px;letter-spacing:-.02em;margin-bottom:12px}
.inapp-profile.profile-v27 .profile-collection .experience-hint{font-size:13px;line-height:1.55;margin:0;color:var(--text-secondary)}
.inapp-profile-tabs button{min-height:40px}.inapp-profile-identity{min-width:0}.inapp-profile-name{overflow-wrap:anywhere}
@media(max-width:600px){.inapp-profile.profile-v27 .profile-tab-grid{gap:16px}.inapp-profile.profile-v27 .profile-collection,.inapp-profile.profile-v27 .profile-mutual{padding:16px;border-radius:14px}}

/* Source: controls-v35.css */
/* One checkbox across account settings, dialogs and administration. */
input[type=checkbox]:not([role=switch]){appearance:none;-webkit-appearance:none;inline-size:18px;block-size:18px;min-inline-size:18px;flex:0 0 18px;vertical-align:middle;margin:0;border:1.5px solid var(--border-strong,var(--border));border-radius:5px;background:var(--surface);display:inline-grid;place-content:center;cursor:pointer;box-shadow:none}
input[type=checkbox]:not([role=switch])::before{content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0)}
input[type=checkbox]:not([role=switch]):checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:not([role=switch]):checked::before{transform:translateY(-1px) rotate(-45deg)}
input[type=checkbox]:indeterminate::before{width:9px;height:0;border-left:0;transform:none}
input[type=checkbox]:indeterminate{background:var(--accent)}
input[type=checkbox]:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent);outline-offset:2px}
input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed}
@media(forced-colors:active){input[type=checkbox]:not([role=switch]){appearance:auto}}

/* Source: ui-v35.css */
/* Media has its own silhouette. Text, including media captions, keeps a bubble. */
#messages .message-row.media-message>.msg-body,#messages .message-row.own-message.media-message>.msg-body{padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
#messages .msg-album{width:420px;max-width:100%}
#messages .msg-body>.msg-image-preview:not(.media-ready){aspect-ratio:4/3;background:var(--surface-soft)}
#messages .msg-body>.msg-image-preview.media-ready{aspect-ratio:auto}
#messages .media-message>.msg-body>.msg-content:has(>.pro-gift-card){padding:0;border:0;background:none}
#messages .media-message>.msg-body:has(>.msg-album){flex:0 1 420px;max-width:100%}
#messages .media-message>.msg-body>.msg-content{padding:10px 13px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:6px}
#messages .own-message.media-message>.msg-body>.msg-content{background:var(--accent-soft);border-color:transparent}
#messages .media-message>.msg-body>.msg-head{padding:3px 8px 5px}
#messages .media-message .msg-meta{padding:3px 6px;border-radius:8px;background:color-mix(in srgb,var(--surface) 86%,transparent);width:max-content;margin-left:auto}
#messages .media-message :is(.voice-message,.msg-image-preview,.msg-file,.message-video,.video-circle-wrap){border:0;box-shadow:none}
#messages .media-message .voice-message{background:var(--surface-soft);border-radius:24px;padding:12px;min-width:min(280px,65vw)}
#messages .voice-play-btn>.bi,#messages .voice-play-btn:hover>.bi{color:#fff!important}
#messages .message-day-separator{display:flex;justify-content:center;align-self:stretch;width:100%;margin:16px 0;min-height:28px;padding:0;flex:none;text-align:center;transform:none}
#messages .message-day-separator>span{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:5px 12px;line-height:1.25;border:0;border-radius:20px;background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:0 1px 3px #00000008;font-size:11px;font-weight:600;color:var(--text-secondary)}
#chatAppearanceModal .modal-dialog{max-width:540px}
#chatAppearanceModal .modal-header{padding:18px 20px 12px}
#chatAppearanceModal .modal-header .small{display:none}
#chatAppearanceModal .modal-body{display:flex;flex-direction:column;gap:14px;padding:12px 20px 20px}
#chatAppearanceModal .chat-details-section{padding:0;border:0;margin:0;background:none}
#chatAppearanceModal .chat-details-head{margin-bottom:12px}
#chatAppearanceModal .chat-details-head span{font-size:11px;line-height:1.5}
#chatAppearanceModal .appearance-preview{margin:0;min-height:74px;padding:12px;border-radius:12px}
#chatAppearanceModal .appearance-choice{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;margin:0;padding:12px 0;border:0;border-top:1px solid var(--border);border-radius:0;background:none}
#chatAppearanceModal .appearance-choice span{font-size:11px;line-height:1.5}
#chatAppearanceModal .appearance-icon{width:28px;height:28px;font-size:17px;background:none}
#chatAppearanceModal .appearance-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:150px}
#chatNotificationsBtn{margin:0!important;min-height:38px;font-size:12px}
.settings-form{gap:16px}.settings-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}.settings-field .experience-hint{font-weight:400;margin:0;line-height:1.5}
.settings-form:has(input[name=username]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.settings-form:has(input[name=username])>.settings-field:has(textarea),.settings-form:has(input[name=username])>.settings-error{grid-column:1/-1}
.settings-form:has(input[name=username])>.settings-profile-head+.btn{align-self:center;justify-self:end;width:auto}
.settings-form:has(input[name=username])>button[type=submit]{grid-column:1/-1;justify-self:start;min-width:120px}
.settings-form:has(input[name=username])>.settings-error:empty{display:none}
.settings-profile-head{display:grid!important;grid-template-columns:64px minmax(0,1fr);gap:8px 14px;align-items:center;margin-bottom:0}
.settings-profile-head>.settings-profile-avatar{grid-row:1/3}.settings-profile-head>.btn{justify-self:start;min-height:32px;padding:6px 12px;font-size:12px}
.settings-scan-qr{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;max-width:100%;white-space:normal;min-height:40px;font-size:12px}
.settings-hub-pane>#accountSecurityContent .security-section-head h4:empty{display:none}
#homeButton.server-logo{background:transparent;color:var(--accent)}#homeButton.server-logo img{display:block;width:36px;height:36px;flex:none;object-fit:contain}#homeButton.server-logo:hover img{opacity:.85}
#leaveVoice,#leaveVoice:hover,#declineCallBtn,#declineCallBtn:hover{color:#fff!important;background:var(--danger,#d74760)!important}
#leaveVoice>.bi,#leaveVoice:hover>.bi,#declineCallBtn>.bi,#declineCallBtn:hover>.bi{color:#fff!important;opacity:1}
#callStage .call-stage-head{min-height:44px;padding:9px 16px;gap:12px}
#callStage .call-stage-head>div:first-child{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 12px;min-width:0}
#callStage .call-stage-head .call-kicker{display:none}
#callStage .call-stage-head h2{font-size:14px;line-height:1.4;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#callStageStatus{font-size:11px;white-space:nowrap}
#callStage .call-stage-head-actions .call-icon-btn{width:32px;height:32px;padding:7px;justify-content:center}
.channel-heading-icon{overflow:visible!important;flex-shrink:0;margin:4px}.channel-heading-icon #channelIcon{overflow:visible!important}.channel-heading{gap:10px}
.chat-header .vh-avatar[data-decoration]:not([data-decoration=''])::after{inset:-16%;z-index:3}
.profile-banner-default{background-image:url('brand/banner-v35.webp')!important;background-size:cover!important;background-position:center!important}
.profile-banner-default::before,.profile-banner-default::after{display:none!important}
.profile-dragon{position:absolute;left:8%;top:24px;width:100px;height:64px;object-fit:contain;pointer-events:none;z-index:2;animation:vh-dragon-flight 22s ease-in-out infinite;filter:drop-shadow(0 5px 8px #29185728)}
@keyframes vh-dragon-flight{0%,100%{transform:translate(0,0) rotate(-6deg)}45%{transform:translate(min(50vw,500px),28px) rotate(4deg) scale(.75)}50%{transform:translate(min(50vw,500px),28px) rotate(4deg) scale(-.75,.75)}95%{transform:translate(0,0) rotate(-6deg) scale(-1,1)}}
.social-quick-action .bi{font-size:17px}.social-quick-action{flex:0 0 34px!important;width:34px;padding:8px!important}
#persistentAudio{display:grid;grid-template-columns:38px minmax(70px,1fr) auto 32px;grid-template-rows:auto 10px;gap:4px 12px;padding:12px 16px;width:min(590px,calc(100vw - 24px));border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 10px 36px #0002}
#persistentAudio[hidden]{display:none!important}#persistentAudio>button:first-child{grid-column:1;grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--accent);color:#fff;padding:0}
#persistentAudio>button:first-child .bi{color:#fff!important;font-size:20px}#persistentAudio .persistent-audio-name{grid-column:2;grid-row:1;font-size:12px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#persistentAudio>input[type=range]{grid-column:2/4;grid-row:2;width:100%;height:8px;accent-color:var(--accent);margin:0}
#persistentAudio>small{grid-column:2;grid-row:1;justify-self:end;background:var(--surface);padding-left:8px;font-variant-numeric:tabular-nums;font-size:10px;align-self:end;display:none}
#persistentAudio #audioPlaybackRate{grid-column:3;grid-row:1;border:0;background:var(--surface-soft);color:var(--accent);border-radius:7px;padding:3px 7px;min-height:24px;font-size:11px}
#persistentAudio>.btn-close{grid-column:4;grid-row:1/3;align-self:center;justify-self:center}.persistent-audio-time{color:var(--text-tertiary);font-size:10px;font-weight:400;margin-left:8px}
#photoHistoryModal .modal-dialog{width:min(850px,calc(100% - 24px));max-width:850px}#photoHistoryModal .modal-body{position:relative;padding:12px 48px 16px;display:flex;flex-direction:column;align-items:center;gap:8px}#photoHistoryModal .profile-history-image{max-height:65dvh;width:100%;object-fit:contain;border-radius:10px;background:var(--surface-soft);margin:0}#photoHistoryModal .modal-footer{display:none}
.photo-side-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:44px;display:grid;place-items:center;padding:0;border:0;background:var(--surface);color:var(--text-primary);font-size:24px;z-index:2}.photo-side-arrow.previous{left:5px}.photo-side-arrow.next{right:5px}.photo-side-arrow:disabled{opacity:.25}.photo-history-more{margin-left:auto;margin-right:12px;border:0;background:none;padding:8px;color:var(--text-secondary)}
#supportModal .support-thread{background:var(--surface-soft);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;min-height:200px;max-height:45dvh}
#supportModal .support-message{align-self:flex-end;width:fit-content;max-width:88%;border:0;border-radius:16px 16px 4px 16px;background:var(--accent-soft);padding:10px 14px;margin:0;font-size:13px}
#supportModal .support-message.staff{align-self:flex-start;border-radius:16px 16px 16px 4px;background:var(--surface)}#supportModal .support-message header{gap:8px;margin-bottom:6px}#supportModal .support-message .friend-avatar{width:24px;height:24px;font-size:11px}#supportModal .support-message time{font-size:10px;display:block;text-align:right;color:var(--text-tertiary)}#supportModal .support-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 5px}#supportModal .support-reply{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:12px}#supportModal .support-reply>textarea{flex:1;min-width:150px;min-height:42px;max-height:120px;resize:vertical}
.pro-gift-card{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:18px;text-align:center;background:linear-gradient(135deg,var(--accent-soft),var(--surface));max-width:300px}.pro-gift-card>.bi{font-size:40px;color:var(--accent)}.pro-gift-card small{color:var(--text-secondary)}
.pro-gift-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pro-gift-options .btn{display:flex;flex-direction:column;gap:8px;padding:18px 8px;border-radius:16px}.pro-gift-options strong{font-size:20px}.pro-gift-options small{font-size:12px}
.push-nudge{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:1045;width:min(440px,calc(100% - 28px));padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 48px #0003;display:grid;grid-template-columns:36px 1fr;gap:8px 12px}.push-nudge>.bi{font-size:26px;color:var(--accent)}.push-nudge p{font-size:12px;color:var(--text-secondary);margin:6px 0 12px;line-height:1.5}.push-nudge-actions{display:flex;gap:8px;flex-wrap:wrap}.push-nudge .btn{font-size:12px}
@media(max-width:540px){#chatAppearanceModal .modal-body{padding:12px 16px 16px}#chatAppearanceModal .appearance-choice{grid-template-columns:24px minmax(0,1fr)}#chatAppearanceModal .appearance-actions{grid-column:2;justify-content:flex-start;max-width:none}#callStage .call-stage-head{padding:7px 10px}#callStage .call-stage-head>div:first-child{display:flex;align-items:flex-start;flex-direction:column;gap:2px}#callStageStatus{font-size:10px}.pro-gift-options{gap:6px}.pro-gift-options strong{font-size:16px}#photoHistoryModal .modal-body{padding-inline:36px}.photo-side-arrow{width:28px}#persistentAudio{gap:4px 8px;padding:10px 12px}#persistentAudio .persistent-audio-name{font-size:11px}#supportModal .support-thread{padding:12px}.profile-dragon{width:70px}}
@media(prefers-reduced-motion:reduce){.vh-avatar[data-decoration]::after,.profile-dragon{animation:none!important}.profile-dragon{display:none}}
.persistent-audio-time{grid-column:2;grid-row:2;display:none}
#persistentAudio>.persistent-audio-name{align-self:start;padding-bottom:13px;max-width:none}#persistentAudio>.persistent-audio-time{display:block;grid-row:1;align-self:end;line-height:1;margin:0;pointer-events:none}.effects-optin{display:flex;gap:10px;align-items:center;margin-bottom:12px;font-size:13px}.effect-upside-down{transform:rotate(180deg);transform-origin:center}.call-effect-static{position:absolute;left:50%;top:35%;transform:translateX(-50%);font-size:26px;padding:24px;border-radius:18px;background:var(--surface);color:var(--accent)}

#messages .gift-system-message{display:flex;flex-direction:column;gap:4px;align-items:center;padding:10px 0}#messages .gift-message-card{display:flex;align-items:center;flex-direction:column;width:min(280px,75vw);padding:20px;border:0;border-radius:22px;background:linear-gradient(150deg,var(--accent-soft),var(--surface));box-shadow:none;color:var(--text-primary);gap:9px}#messages .gift-message-card .gift-sender{font-size:11px;color:var(--text-secondary);gap:6px}#messages .gift-message-card .gift-sender .friend-avatar{width:22px;height:22px}#messages .gift-message-card .gift-image-large{width:150px;height:150px;object-fit:contain}#messages .gift-message-card>strong{font-size:16px}#messages .gift-message-card>span:not(.gift-sender){font-size:12px}#messages .gift-message-card>small{font-size:10px;color:var(--text-tertiary)}#messages .gift-system-message>.msg-meta{font-size:10px;opacity:.8}
#giftCatalogModal .modal-dialog{max-width:740px}#giftCatalogModal .gift-picker-filters{display:flex;gap:10px;margin:16px 0}#giftCatalogModal .gift-picker-filters>*{min-width:0;flex:1;font-size:12px}#giftCatalogModal .gift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}#giftCatalogModal .gift-card{padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft);display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}#giftCatalogModal .gift-card>img{width:96px;height:96px;object-fit:contain}#giftCatalogModal .gift-card b{font-size:12px;line-height:1.4}#giftCatalogModal .gift-card small{padding:4px 9px;background:var(--accent-soft);color:var(--accent);border-radius:20px;font-size:11px}#giftCatalogModal .gift-collection-section h4{font-size:15px;margin:20px 0 12px}
.landing-playground{padding:60px 0}.landing-demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.landing-demo{min-width:0;padding:24px;border:1px solid var(--border);border-radius:22px;background:var(--surface)}.landing-demo>i{font-size:28px;color:var(--accent)}.landing-demo h3{font-size:18px;margin:20px 0 10px}.landing-demo p{font-size:13px;color:var(--text-secondary);line-height:1.7}.demo-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.demo-buttons .btn{font-size:11px;padding:7px 10px;border-radius:20px}.landing-profile-demo{overflow:hidden}.demo-profile-cover{height:95px;margin:-24px -24px 35px;position:relative;isolation:isolate}.demo-profile-avatar{position:absolute;bottom:-20px;left:24px;width:56px;height:56px;background:var(--accent);color:white;font-size:23px;border:3px solid var(--surface)}.landing-profile-demo>.demo-buttons{margin-bottom:0}.landing-profile-demo>small{font-size:11px;color:var(--accent)}.landing-demo .profile-dragon{width:70px;top:10px;animation:none;left:auto;right:14px}.landing-pro{border-radius:24px;background-image:linear-gradient(100deg,#352653ed,#352653c4),url('brand/banner-v35.webp');background-size:cover;background-position:center}.landing-pro,.landing-pro h2,.landing-pro p,.landing-pro li,.landing-pro strong,.landing-pro span{color:#fff}.landing-pro-offer{background:#ffffff14;border-color:#ffffff30}
@media(max-width:850px){.landing-demo-grid{grid-template-columns:1fr}.landing-demo{padding:22px}.demo-profile-cover{margin:-22px -22px 35px;height:145px}.landing-playground{padding:36px 0}}
@media(max-width:540px){#giftCatalogModal .gift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#giftCatalogModal .gift-picker-filters{flex-direction:column}.account-shop-tabs .btn{gap:4px;padding:8px 4px}.account-shop-tabs .btn .bi{display:none}}
@media(max-width:600px){.settings-form:has(input[name=username]){grid-template-columns:1fr}.settings-form:has(input[name=username])>.settings-profile-head+.btn{justify-self:start}}

/* Source: ui-v36.css */
/* Media width is independent of caption and timestamp intrinsic sizes. */
#messages:not(.profile-surface-list)>.message-row:has(.msg-album){width:598px;max-width:92%}
#messages .media-message>.msg-body:has(>.msg-album){flex:1 1 560px;min-width:0;max-width:100%}
#messages .msg-album{width:100%;max-width:560px}
#messages .msg-sticker-wrap{display:inline-flex;width:176px;height:176px;max-width:100%;align-items:center;justify-content:center;cursor:default;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#messages .msg-sticker{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none}
#picker.packs-picker{padding:0;gap:0;overflow:hidden;display:flex;flex-direction:column;min-height:240px}
#picker.packs-picker.d-none{display:none!important}
.pack-picker-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 8px 6px;gap:3px;flex:none;border-bottom:1px solid var(--border)}
.pack-picker-tabs .pack-picker-tab{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-width:0;min-height:46px;padding:5px 2px;background:transparent;border:0;border-radius:10px;color:var(--text-secondary);font-size:10px;line-height:1.25;white-space:normal}
.pack-picker-tab .bi{font-size:18px}.pack-picker-tab.active,.pack-picker-tab.active .bi{color:var(--accent)}
.pack-picker-content{min-height:0;overflow:auto;overscroll-behavior:contain;flex:1;padding:10px}
.packs-picker .pack-search{margin:8px 10px 0;width:calc(100% - 20px);flex:none;font-size:13px;min-height:36px}
.packs-picker .pack-sticker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:2px}
.packs-picker .sticker-picker-item{display:grid;place-items:center;width:100%;height:auto;aspect-ratio:1;min-width:0;padding:5px;border:0;background:transparent}
.packs-picker .sticker-picker-item img{width:100%;height:100%;max-height:76px;object-fit:contain;-webkit-user-drag:none}
.pack-picker-footer{flex:none;border-top:1px solid var(--border);padding:5px 10px}.pack-picker-footer button{width:100%;min-height:34px;display:flex;gap:8px;align-items:center;justify-content:center;font-size:11px;background:none;border:0;color:var(--text-secondary)}
.pack-detail-heading{display:flex;gap:8px;align-items:center;margin-bottom:12px}.pack-detail-heading>.person-copy{flex:1;min-width:0;white-space:normal}.pack-detail-heading b{font-size:13px;overflow-wrap:anywhere}.pack-detail-heading button{flex:none;font-size:11px;min-height:32px;padding:4px 7px}.pack-report-button{width:100%;font-size:11px;border:0;background:none;color:var(--text-secondary);margin-top:12px;padding:8px}.pack-picker-content .sticker-pack-card{width:100%;min-width:0;padding:8px;gap:12px;border:0}.pack-picker-content .sticker-pack-card>img{width:44px;height:44px;flex:none;object-fit:contain}
#soundboardModal .modal-dialog{max-width:560px}#soundboardModal .modal-body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.soundboard-tabs{display:flex;gap:6px;flex:none}.soundboard-tabs button{flex:1;min-width:0;font-size:12px;min-height:36px;padding:6px}.soundboard-tabs button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.soundboard-section[hidden],.soundboard-list .soundboard-card[hidden]{display:none}.soundboard-list{display:flex;flex-direction:column;gap:0}
.soundboard-list .soundboard-card{display:flex;flex-direction:row;text-align:start;align-items:center;gap:10px;padding:11px 0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;min-width:0}
.soundboard-symbol{color:var(--accent);font-size:22px;width:28px;flex:none;text-align:center}.soundboard-copy{flex:1;min-width:0}.soundboard-copy b{display:block;font-size:13px;overflow-wrap:anywhere}.soundboard-copy small{display:block;line-height:1.4;font-size:11px;color:var(--text-secondary);overflow-wrap:anywhere}
.soundboard-actions{display:flex;flex-wrap:nowrap;flex:none;gap:2px;align-items:center}.soundboard-actions .icon-btn{width:32px;height:36px;min-width:32px;margin:0;padding:5px}.sound-publication-status{color:var(--accent)!important}.sound-upload-details{border-top:1px solid var(--border);padding-top:12px}.sound-upload-details>summary{font-size:13px;font-weight:600;color:var(--accent);padding:6px 0}.sound-upload-details form{margin-top:12px}
.report-form{display:grid;gap:14px}.report-form label{display:grid;gap:7px;font-size:13px}.report-form .settings-error:empty{display:none}
.voice-recovery-notice{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));inset-inline:16px;margin-inline:auto;z-index:1100;max-width:610px;display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface);color:var(--text-primary);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-float);font-size:13px}
.voice-recovery-notice>span{flex:1;min-width:0}.voice-recovery-notice>.bi{color:var(--accent);font-size:20px}.voice-recovery-notice button{font-size:12px;flex:none;padding:6px 10px;min-height:34px}
@media(max-width:600px){
 #messages:not(.profile-surface-list)>.message-row:has(.msg-album){width:100%;max-width:100%}
 #soundboardModal .modal-body{padding:12px}.soundboard-list .soundboard-card{gap:6px}.soundboard-actions .icon-btn{width:30px;min-width:30px}
 .voice-recovery-notice{inset-inline:8px;gap:7px;flex-wrap:wrap;padding:10px}.voice-recovery-notice>span{flex-basis:calc(100% - 40px)}.voice-recovery-notice>button:first-of-type{margin-inline-start:auto}
}

.pack-picker-tab span{min-height:25px;display:flex;align-items:center;justify-content:center}

/* Source: ui-v37.css */
/* v37: consistent geometry for chat, profile, dialogs and call controls. */
body{font-family:var(--ui-font,system-ui,sans-serif)}
.btn.btn-primary .bi,.btn.btn-primary:hover .bi,#acceptCallBtn .bi,#acceptCallBtn:hover .bi{color:var(--bs-btn-color,#fff)!important;opacity:1!important}
.btn .bi::before{background-color:currentColor}
#messages:not(.profile-surface-list)>.message-row:has(.voice-message),#messages:not(.profile-surface-list)>.message-row:has(.msg-video-preview){margin-block:14px!important}
#messages:not(.profile-surface-list)>.message-row:has(.voice-message)+.message-row{margin-top:14px!important}
#messages .message-row>.msg-avatar{width:32px!important;height:32px!important;min-width:32px;min-height:32px;flex:0 0 32px!important;aspect-ratio:1;padding:0;align-self:start}
#messages .msg-avatar>img{display:block;width:100%;height:100%;object-fit:cover;flex:none;max-width:none}
#messages .own-message .msg-video-preview,#messages .own-message .msg-audio-preview,#messages .own-message .vh-video-player{margin-inline-start:auto}
#messages .media-message>.msg-body{min-width:0;align-items:stretch}
#messages .own-message .msg-meta{align-self:flex-end}
.gift-sender{display:flex!important;align-items:center!important;justify-content:center;gap:9px;min-height:34px;margin-bottom:6px}
.gift-sender>.friend-avatar{flex:0 0 26px;width:26px;height:26px;overflow:visible}.gift-sender>b{line-height:1.3}.gift-sender>.verified-badge{margin-inline-start:0}
/* Input text and its icon share the same vertical centre. */
#socialSidebar .input-icon,#channelSidebar .input-icon,.dm-search{position:relative}
.input-icon>input.form-control{display:block;box-sizing:border-box;padding-block:9px;line-height:20px;min-height:40px}
.input-icon>.bi{position:absolute;top:50%;transform:translateY(-50%);line-height:1;margin-top:0;pointer-events:none}
#dmSearch{font-family:var(--ui-font);font-size:13px;height:40px;min-height:40px;line-height:20px;padding-block:9px}
#dmList .dm-item{font-family:var(--ui-font);padding-inline:10px 12px;gap:11px}
#dmList .dm-item-name{font-size:13px;font-weight:600;line-height:1.4}
.dm-subsection-label{display:flex;align-items:center;gap:7px;font:600 11px/1.4 var(--ui-font);letter-spacing:.035em;color:var(--text-secondary);padding:12px 12px 6px}
.dm-subsection-label .bi{font-size:12px;color:var(--accent)}
#dmList .dm-entry>.dm-favorite-btn.active{display:none!important}
.dm-favorite-mark{font-size:11px;color:var(--accent);margin-inline-end:5px;vertical-align:0}
#dmList .dm-item-tail{align-self:center;min-width:20px;padding:0;display:flex;justify-content:flex-end;gap:4px}
#dmList .dm-item-top{align-items:baseline;gap:8px}#dmList .dm-item-time{margin:0;font-size:10px;flex:none}
#savedMessagesBtn,.saved-messages-btn{font-family:var(--ui-font);font-weight:500}.social-hero-actions>.btn{white-space:nowrap}
.inapp-profile-actions .btn-primary .bi{color:#fff!important}
.inapp-profile-card-head:has(+.profile-badge-list)>.bi{display:none}
/* All post content, media and discussion controls belong to one card. */
#messages .message-row:has(.message-post){max-width:min(94%,650px)!important;width:650px!important}
#messages .message-row:has(.message-post)>.msg-body{width:100%;min-width:0;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
#messages .message-post{width:100%;padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--background-elevated);overflow:hidden;box-shadow:none;display:flex;flex-direction:column;gap:12px}
#messages .message-post>.post-eyebrow{margin:0;font-size:10px;line-height:1.4}#messages .post-eyebrow em{display:none}
#messages .message-post h4{font-size:18px;line-height:1.35;letter-spacing:-.015em;margin:0;overflow-wrap:anywhere}
#messages .message-post-content{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
#messages .message-post>.post-media{width:100%;min-width:0;border-radius:12px;overflow:hidden}
#messages .post-media .msg-image-preview,#messages .post-media .msg-video-preview,#messages .post-media .msg-album{width:100%;max-width:100%;margin:0}
#messages .post-media img{width:100%;max-height:520px;object-fit:contain;display:block}
#messages .post-footer{display:flex;align-items:center;gap:16px;padding:12px 0 0;margin:0;border-top:1px solid var(--border)}
/* Branded call header with a stable two-line title. */
#callStage .call-stage-head{min-height:62px;padding:10px 16px;align-items:center}
#callStage .call-stage-head>div:first-child{display:grid!important;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 10px;align-items:center;min-width:0}
.call-brand-logo{grid-column:1;grid-row:1/3;width:32px;height:32px;object-fit:contain;align-self:center}
#callStageTitle{grid-column:2;grid-row:1;font-size:14px;line-height:20px!important;font-weight:600}
#callStageStatus{grid-column:2;grid-row:2;font-size:11px;line-height:16px;white-space:normal}
#callStage .call-stage-head-actions{margin-inline-start:auto;flex:none}
#callStage .call-person-row .icon-btn,#callStage .call-person-row .icon-btn:hover,#callStage .call-person-row .icon-btn:active{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
#callStage .call-person-row .icon-btn:hover .bi{color:var(--accent)}
#callStageControls,#callPrimaryControls{justify-content:center!important;align-items:center;gap:6px}
#callStageControls{flex-wrap:wrap;padding:10px 12px max(10px,env(safe-area-inset-bottom));margin-inline:0}
#callStageControls button:not(#leaveVoice):hover{background:transparent!important;box-shadow:none!important}
#callStageControls button:not(#leaveVoice):hover .bi{color:var(--accent)}
.call-person-row .experience-person-copy{min-width:0}.call-person-row .friend-avatar{flex-shrink:0}
.call-rtt{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:10px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4;color:var(--text-secondary)}
.call-rtt[data-quality=good]{color:var(--success,#18856a)}.call-rtt[data-quality=slow]{color:var(--danger,#b3294f)}
.call-rtt[data-quality=fair]{color:#aa7914}.call-rtt[data-quality=poor]{color:var(--danger,#b3294f)}.call-person-row .call-rtt{margin-inline-start:6px}
.call-tile-bottom .call-rtt{color:inherit;opacity:.8;margin-inline-start:5px}
.call-tile-avatar>.call-rtt{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;background:var(--surface);border:1px solid var(--border);padding:3px 7px;border-radius:7px;line-height:1.3}
[dir=rtl] .call-tile-avatar>.call-rtt{transform:translateX(50%)}
.effect-symbol{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:18px;flex:none}
/* Stronger notification contrast without blocking the chat. */
.toast-container:has(#appToast){z-index:12000!important;top:max(18px,env(safe-area-inset-top))!important;bottom:auto!important;inset-inline-end:16px!important;padding:0!important;width:min(420px,calc(100vw - 32px));pointer-events:none}
#appToast{width:100%;pointer-events:auto;background:#252239!important;color:#fff!important;border:1px solid #8270d8!important;border-inline-start:4px solid #a895ff!important;border-radius:14px;box-shadow:0 12px 40px #0004;font-size:14px;line-height:1.5}
#appToast .toast-body{padding:15px 16px;overflow-wrap:anywhere;flex:1}#appToast .btn-close{color:#fff!important;opacity:1!important;flex:none}
/* Wallpaper choices have separate preview, copy and controls. */
#chatAppearanceModal .modal-body{display:flex;flex-direction:column;gap:14px;padding:18px 22px}
#chatAppearanceModal .appearance-choice{display:grid;grid-template-columns:36px minmax(0,1fr);gap:6px 12px;padding:16px;margin:0;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);align-items:start}
#chatAppearanceModal .appearance-icon{grid-column:1;grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;font-size:20px;color:var(--accent)}
#chatAppearanceModal .appearance-choice>div:not(.appearance-icon):not(.appearance-actions){grid-column:2;min-width:0}
#chatAppearanceModal .appearance-actions{grid-column:2;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;margin-top:8px}
#chatAppearanceModal .appearance-actions .btn{font-size:12px;min-height:36px;padding:7px 11px}
#chatAppearanceModal .appearance-preview{margin:0;min-height:106px;flex:none;display:flex;align-items:center;background-size:cover;background-position:center}
/* Keep role editor headings in flow: they must not overlap scrolled permission rows. */
.server-settings-layout{min-height:0;overflow:hidden}.server-settings-content{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}
.server-settings-content .section-heading,.server-settings-content .settings-section-head{position:static!important;top:auto;z-index:auto;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:0 16px;background:var(--background-elevated)}
.server-settings-content .section-heading>div{min-width:0;flex:1}.server-settings-content .section-heading p{line-height:1.5;margin:6px 0 0}
.server-settings-content .permission-row{gap:16px;align-items:center}.server-settings-content .permission-row>div{min-width:0}.server-settings-content .form-switch{flex:none}
@media(max-width:600px){
 #callStage .call-stage-head{padding:9px 12px;gap:8px}#callStage .call-stage-head>div:first-child{grid-template-columns:28px minmax(0,1fr);gap:2px 8px}.call-brand-logo{width:26px;height:26px}
 #callStageControls{justify-content:center!important;gap:5px;padding-inline:8px}#callPrimaryControls{gap:5px}
 #callStageControls button{width:38px!important;height:40px!important;min-width:38px!important;min-height:40px!important;padding:0!important;margin:0!important;flex:0 0 38px}
 .social-hero-actions{display:flex;flex-wrap:wrap;gap:7px}.social-hero-actions>.btn{font-size:11px;min-height:38px;padding:7px 10px;gap:5px}
 #dashAddFriend .bi,#dashGroup .bi{margin:0!important;font-size:15px;width:15px}
 #messages .message-post{padding:13px;border-radius:14px}#messages .message-post h4{font-size:16px}
 #chatAppearanceModal .modal-body{padding:12px;gap:10px}#chatAppearanceModal .appearance-choice{padding:13px;grid-template-columns:28px minmax(0,1fr);gap:6px 9px}
 .server-settings-content{padding:16px!important}.server-settings-content .section-heading{gap:10px}
}
@media(prefers-reduced-motion:reduce){#appToast{transition:none!important}}
/* The call footer previously inherited fixed widths from three older sheets. */
#callStage #callStageControls{justify-content:center!important;flex-wrap:wrap!important;overflow:visible!important;gap:6px!important;padding:10px!important}
#callStage #callPrimaryControls,#callStage #callPrimaryControls .voice-controls{display:contents!important}
#callStage #callStageControls button{flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;margin:0!important}
#dmList .dm-avatar-wrap{width:36px;height:36px;min-width:36px;flex:0 0 36px;align-self:center}
#dmList .dm-avatar{display:inline-grid!important;width:36px!important;height:36px!important;min-width:36px;min-height:36px;aspect-ratio:1;flex-shrink:0}
#dmList .dm-avatar>img{width:100%!important;height:100%!important;object-fit:cover;max-width:none}
.inapp-profile-actions .btn-primary,.incoming-call-actions .btn-primary{color:#fff!important}
@media(max-width:600px){#callStage #callStageControls{gap:5px!important;padding:10px 8px!important}#callStage #callStageControls button{flex:0 0 40px!important;width:40px!important;min-width:40px!important;height:42px!important;min-height:42px!important}}
@media(max-width:360px){#callStage #callStageControls{display:grid!important;grid-template-columns:repeat(4,40px);justify-content:center!important;gap:6px!important}}.effect-symbol{min-width:32px}
body:has(#callStage:not(.d-none):not(.is-floating)) .voice-recovery-notice{bottom:max(82px,calc(env(safe-area-inset-bottom) + 82px))}
@media(max-width:600px){}
@media(max-width:360px){body:has(#callStage:not(.d-none):not(.is-floating)) .voice-recovery-notice{bottom:max(128px,calc(env(safe-area-inset-bottom) + 128px))}}

/* Source: ui-v38.css */
/* VoiceHub v38 polish: keep controls calm and move emphasis to the icon. */
.vh-language-control{min-height:38px;display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid color-mix(in srgb,var(--border,#dfdcea) 92%,transparent);border-radius:12px;background:color-mix(in srgb,var(--surface,#fff) 94%,var(--accent,#7953d7));box-shadow:0 4px 14px rgba(55,42,110,.06);transition:border-color .16s ease,box-shadow .16s ease}
.vh-language-control:hover{border-color:color-mix(in srgb,var(--accent,#7953d7) 55%,var(--border,#dfdcea));box-shadow:0 6px 18px rgba(55,42,110,.1)}
.vh-language-control>i{font-size:15px;color:var(--accent,#7953d7);line-height:1}
.vh-language-control select{min-height:28px;padding:3px 22px 3px 2px;border-radius:7px}
body .btn-close:focus,body .btn-close:focus-visible{outline:0!important;box-shadow:none!important}
#dmSearch{height:auto;min-height:0;padding-block:0;line-height:1.4}
#dmList .dm-entry{background:transparent!important;box-shadow:none!important}
#dmList .dm-entry>.dm-item[aria-current="true"],#dmList .dm-entry>.dm-item.active{background:var(--accent-soft,#eee8ff)!important;box-shadow:inset 2px 0 var(--accent,#7953d7)!important}
#dmList .dm-entry>.dm-item:not([aria-current="true"]):not(.active){box-shadow:none!important}
.channel-favorite-btn,.dm-favorite-btn{background:transparent!important;border-color:transparent!important;box-shadow:none!important;border-radius:50%!important}
.channel-favorite-btn:hover,.channel-favorite-btn:focus-visible,.dm-favorite-btn:hover,.dm-favorite-btn:focus-visible{background:transparent!important;color:var(--accent,#7953d7)!important;box-shadow:none!important}
.channel-favorite-btn.active,.dm-favorite-btn.active{background:transparent!important;color:#e6ad2e!important}
.channel-favorite-btn svg,.dm-favorite-btn svg{fill:none!important;transition:color .16s ease,transform .16s ease}
.channel-favorite-btn.active svg,.dm-favorite-btn.active svg{fill:currentColor!important;transform:scale(1.08)}
/* Camera preview is mirrored consistently for every participant. Screen shares stay readable. */
.call-participant-tile:not(.is-screen) .call-tile-media video{transform:scaleX(-1)!important}
.call-participant-tile.is-screen .call-tile-media video,.call-participant-tile .call-tile-media video[data-screen-share="1"]{transform:none!important}
.call-tile-name .call-rtt{display:inline-flex;align-items:center;gap:3px;margin-inline-start:6px;padding:2px 5px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:10px;line-height:1.2}
.call-tile-name .call-rtt i{font-size:10px}
.call-tile-avatar>.call-rtt{position:static;transform:none;background:transparent;border:0;padding:0;margin:0}
.call-tile-avatar>.call-rtt{display:none}
.mini-profile-banner{height:142px;margin:-16px -16px 34px;border-radius:14px 14px 0 0;background:linear-gradient(135deg,#7b5ce5,#bba4ff 52%,#e9e3ff);background-position:center;background-size:cover;position:relative;overflow:hidden}
.mini-profile-banner.has-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(9,11,22,.35))}
.mini-profile-banner .profile-dragon{position:absolute;z-index:1;right:8px;bottom:-4px;width:min(110px,34%);height:92px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(24,16,61,.28));animation:vh-mini-dragon 7s ease-in-out infinite}
@keyframes vh-mini-dragon{0%,100%{transform:translate3d(0,3px,0) rotate(-2deg)}50%{transform:translate3d(-8px,-5px,0) rotate(2deg)}}
.mini-profile .mini-profile-avatar{position:absolute;z-index:3;left:18px;bottom:-30px;width:76px;height:76px;margin:0;border:3px solid var(--surface,#fff);border-radius:50%;box-shadow:0 8px 20px rgba(20,17,40,.22)}
.mini-profile-report{width:100%;margin-top:8px}
.message-row.is-pinned:after{right:14px;bottom:8px;opacity:.9}
.push-nudge{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;width:min(430px,calc(100vw - 28px));padding:20px 22px;border:1px solid color-mix(in srgb,var(--accent,#7953d7) 22%,var(--border,#dfdcea));border-radius:18px;box-shadow:0 18px 50px rgba(31,24,60,.2)}
.push-nudge>i{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:var(--accent-soft,#eee8ff);color:var(--accent,#7953d7);font-size:20px}
.push-nudge p{margin:5px 0 12px;line-height:1.5}.push-nudge-actions{display:flex;gap:8px;flex-wrap:wrap}
.pack-picker-footer .btn,.pack-picker-footer button{min-height:40px;border-radius:12px;font-weight:650}
.pack-picker-footer .btn-outline-secondary{border-color:var(--accent,#7953d7);color:var(--accent,#7953d7);background:transparent}
.sticker-server-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;border:1px dashed color-mix(in srgb,var(--accent,#7953d7) 48%,var(--border));border-radius:12px;background:var(--accent-soft,#eee8ff);color:var(--accent,#7953d7);font-weight:650}
@media(max-width:600px){.vh-language-control{min-height:36px}.mini-profile-banner{height:122px}.mini-profile .mini-profile-avatar{left:14px;bottom:-26px;width:68px;height:68px}.push-nudge{padding:16px}}
@media(prefers-reduced-motion:reduce){.mini-profile-banner .profile-dragon{animation:none}}

/* Source: server-boosts.css */
/* Keep boost component styles in the manifest, never only in app-styles.css. */
.server-boost-trigger{color:var(--accent)!important;background:var(--accent-soft)!important}
.server-boost-modal{overflow:hidden;background:var(--background-elevated);color:var(--text-primary)}
.server-boost-summary{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(135deg,var(--accent-soft),var(--background-elevated));margin-bottom:18px}
.server-boost-summary-icon,.server-boost-level-icon{display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,#9b6cff,#6941d9);box-shadow:0 8px 20px rgba(105,65,217,.26)}
.server-boost-summary-icon{width:54px;height:54px;border-radius:17px;font-size:24px}
.server-boost-summary h3{margin:2px 0 3px;font-size:20px;overflow-wrap:anywhere}
.server-boost-summary p{margin:0;color:var(--text-secondary)}
.boost-kicker{font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:800}
.server-boost-action{margin-inline-start:auto;white-space:nowrap}
.server-boost-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.server-boost-level{min-width:0;padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--background-secondary);transition:transform .18s ease,box-shadow .18s ease}
.server-boost-level:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(60,35,130,.1)}
#serverBoostModal .server-boost-level.reached{border-color:var(--success,#299b73)!important;background:linear-gradient(180deg,rgba(98,201,162,.12),transparent 65%),var(--background-secondary)!important}
.server-boost-level-head{display:flex;align-items:center;gap:10px;min-width:0}
.server-boost-level-icon{width:36px;height:36px;border-radius:12px;font-size:16px}
.server-boost-level-head>div{min-width:0}
.server-boost-level-head b{display:block;font-size:14px;line-height:1.4}
.server-boost-level-head small{display:block;font-size:12px;line-height:1.4;color:var(--text-secondary);margin-top:2px}
.server-boost-check{margin-inline-start:auto;color:var(--success,#299b73);font-size:20px;flex:none}
.server-boost-level ul{list-style:none;padding:12px 0 0;margin:12px 0 0;border-top:1px solid var(--border)}
.server-boost-level li{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.5;color:var(--text-secondary);padding:4px 0}
.server-boost-level li i{width:16px;flex:0 0 16px;color:var(--accent)}
.boost-loading{padding:32px;text-align:center;color:var(--text-secondary)}
.boost-loading i{display:block;font-size:24px;margin-bottom:8px;color:var(--accent);animation:vh-boost-spin 1s linear infinite}
@keyframes vh-boost-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.server-boost-summary{align-items:flex-start;flex-wrap:wrap}.server-boost-action{width:100%;margin-inline-start:0}.server-boost-levels{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.server-boost-level{transition:none}.server-boost-level:hover{transform:none}.boost-loading i{animation:none}}

/* Source: ui-v39.css */
/* Shared theme tokens also apply to surfaces mounted outside #appView. */
#miniProfileModal .mini-profile{border-radius:20px;overflow:visible;width:320px;max-width:calc(100vw - 32px)}
#miniProfileModal .modal-body{padding:20px;position:relative;overflow:visible}
#miniProfileModal .mini-profile-banner{height:148px!important;margin:-20px -20px 46px!important;overflow:visible;background:none;border-radius:20px 20px 0 0}
#miniProfileModal .mini-profile-banner:after{display:none}
#miniProfileModal .mini-profile-cover{position:absolute;inset:0;border-radius:19px 19px 0 0;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--accent-soft));background-size:cover;background-position:center}
#miniProfileModal .mini-profile-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,#15142633);pointer-events:none}
#miniProfileModal #miniProfileAvatar{position:absolute!important;inset:auto auto -28px 20px!important;width:80px!important;height:80px!important;min-width:80px;max-width:80px;margin:0!important;border:4px solid var(--surface)!important;box-shadow:0 4px 14px #16122b18!important;z-index:3;overflow:visible}
#miniProfileModal .profile-dragon{width:88px!important;height:72px!important;right:14px!important;left:auto!important;bottom:6px!important;top:auto!important;z-index:2!important}
#miniProfileModal .btn-close{position:absolute;top:12px;right:12px;z-index:5;width:24px;height:24px;padding:5px;border-radius:50%;background-color:var(--surface);opacity:.9}
#miniProfileName{font-size:19px;line-height:1.25;font-weight:600;margin:0 0 4px!important}
#miniProfileUsername{font-size:12px;margin:0 0 12px;color:var(--text-secondary)}
#miniProfileBio{font-size:13px;line-height:1.5;margin:12px 0 16px;color:var(--text-secondary)}
#miniProfileActions{gap:8px}#miniProfileActions .btn{font-size:12px;font-weight:500;min-height:38px}
.member-meta{display:flex;flex-direction:column;justify-content:center;gap:1px}
.member-meta .member-name{line-height:1.3;margin:0}.member-meta .vh-presence{margin:0!important;padding:0;line-height:1.2;gap:3px}
.vh-presence-status{align-items:center;line-height:1.25}.vh-presence-status i{font-size:6px}
#appToast{background:var(--surface)!important;color:var(--text-primary)!important;border:1px solid var(--border)!important;border-inline-start:3px solid var(--accent)!important;border-radius:14px;box-shadow:var(--shadow-float);width:min(380px,calc(100vw - 32px))}
#appToast .toast-body{padding:14px 16px;font:400 13px/1.5 var(--ui-font);color:inherit}#appToast .btn-close{filter:none!important;color:var(--text-secondary);margin:14px!important;opacity:.7}
html[data-app-theme=dark] #appToast .btn-close{filter:invert(1)!important}
.vh-notification-card.message-notice{background:var(--surface)!important;color:var(--text-primary)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-float)!important;border-radius:16px;min-height:88px}
.vh-notification-card .vh-notification-head{display:grid!important;gap:4px!important;justify-items:start}
.vh-notification-card .vh-notification-head b{font-weight:600;font-size:13px}.vh-notification-card .vh-notification-head small{margin:0;padding:0;background:none!important;line-height:1.1;font-size:9px;letter-spacing:.04em;font-weight:500;color:var(--accent)}
.vh-notification-card .vh-notification-copy>span{margin-top:3px;color:var(--text-secondary)!important;font-size:12px}
.windows-download{margin:24px 0;display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:28px;padding:32px;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:var(--shadow-soft)}
.windows-download h3{font-size:26px;font-weight:600;margin:8px 0 12px;letter-spacing:-.025em}.windows-download p{color:var(--text-secondary);max-width:520px;line-height:1.6}.download-platform{font-size:11px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
.windows-download .btn{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;font-weight:500}.download-meta{display:block;margin-top:9px;color:var(--text-tertiary);font-size:11px}.download-steps{display:grid;gap:14px;margin:0;padding:20px;list-style:none;border-radius:16px;background:var(--surface-soft)}.download-steps li{display:flex;gap:10px;align-items:start;color:var(--text-secondary);font-size:12px}.download-steps b{flex:0 0 24px;height:24px;display:grid;place-items:center;border-radius:8px;color:var(--accent);background:var(--accent-soft);font-weight:500}
.growth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.growth-card{padding:18px;border:1px solid var(--border);background:var(--surface);border-radius:16px}.growth-card h4{font-size:15px;font-weight:600;margin:0 0 12px}.growth-card p{color:var(--text-secondary);font-size:13px}.growth-card strong{display:block;font-size:24px;font-weight:500;margin:6px 0}.growth-card progress{width:100%;accent-color:var(--accent)}.growth-card .btn{margin-top:10px}.growth-ledger{overflow:auto}.growth-ledger table{width:100%;font-size:12px}.growth-ledger td,.growth-ledger th{padding:10px;text-align:start;border-bottom:1px solid var(--border);font-weight:400}
@media(max-width:640px){.windows-download{grid-template-columns:1fr;padding:22px}.windows-download h3{font-size:22px}}
/* Keep the pin badge away from message timestamps and hover controls. */
.message-row.is-pinned{padding-inline-end:30px!important}.message-row.is-pinned:after{right:9px!important;top:9px!important;bottom:auto!important;width:13px;height:13px;z-index:1}.message-row.is-pinned:hover{background:color-mix(in srgb,var(--accent,#7656dd) 9%,var(--surface,#fff))}
/* Profile actions share one visual language and keep secondary actions compact. */
.inapp-profile-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.inapp-profile-actions .btn{min-height:38px;border-radius:11px;padding:8px 13px;font-weight:600;box-shadow:none}.inapp-profile-actions .btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px color-mix(in srgb,var(--accent,#7656dd) 16%,transparent)}.inapp-profile-actions .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.inapp-profile-actions .profile-more{width:40px;padding:0;display:grid;place-items:center}.inapp-profile-actions .profile-more i{font-size:17px}
/* Sticker pack controls stay aligned in light and dark themes. */
.pack-detail-heading button,.pack-report-button{border-radius:11px!important;min-height:36px;padding:8px 12px!important;font-weight:600!important;transition:background .16s,border-color .16s,color .16s,transform .16s}.pack-detail-heading button{border:1px solid var(--border)!important;background:var(--surface)!important;color:var(--text-primary)!important}.pack-detail-heading button:hover{border-color:var(--accent)!important;background:var(--accent-soft)!important;color:var(--accent)!important;transform:translateY(-1px)}.pack-report-button{border:1px solid color-mix(in srgb,var(--danger,#d9536f) 38%,var(--border))!important;background:color-mix(in srgb,var(--danger,#d9536f) 7%,var(--surface))!important;color:var(--danger,#d9536f)!important}.pack-report-button:hover{background:color-mix(in srgb,var(--danger,#d9536f) 14%,var(--surface))!important;transform:translateY(-1px)}
/* Support avatars have one fixed box; broken images fall back to the initial. */
#supportModal .support-message .friend-avatar{width:30px!important;height:30px!important;min-width:30px!important;display:grid;place-items:center;overflow:hidden;border-radius:50%}.support-message .friend-avatar img{width:100%;height:100%;object-fit:cover;display:block}.support-message header b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.inapp-profile-actions .btn{flex:1;min-width:0}.inapp-profile-actions .profile-more{flex:0 0 40px}.game-list-heading{align-items:stretch;flex-direction:column}.game-list-heading input{max-width:none}}
.channel-item.info{color:var(--text-secondary)}.channel-item.info.active{color:var(--accent);background:var(--accent-soft)}.info-channel-group .channel-group-head{color:var(--text-secondary)}.info-channel-view{display:grid;place-items:start center;padding:clamp(20px,6vw,72px) clamp(14px,6vw,80px);overflow:auto}.channel-info-card{width:min(760px,100%);padding:clamp(22px,4vw,44px);border:1px solid var(--border);border-radius:24px;background:linear-gradient(145deg,var(--background-elevated),var(--surface-soft));box-shadow:0 18px 56px color-mix(in srgb,var(--accent) 10%,transparent)}.channel-info-kicker{display:block;margin-bottom:10px;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.14em}.channel-info-card h1{margin:0 0 24px;font-size:clamp(25px,4vw,38px)}.channel-info-body{color:var(--text-secondary);font-size:15px;line-height:1.75}.channel-info-body p{margin:0 0 14px;white-space:pre-wrap}.channel-info-body h3{margin:24px 0 8px;color:var(--text-primary);font-size:18px}.channel-info-edit{margin-top:26px}.info-channel-loading{display:flex;align-items:center;gap:9px;color:var(--text-secondary)}
.desktop-auth-shell{min-height:100vh}.desktop-auth-shell .landing-header{padding-bottom:0}.desktop-auth-shell .landing-header nav>a[href^="#landing"],.desktop-auth-shell .landing-header nav>a[href="#installGuide"]{display:none}.desktop-auth-shell .landing-hero{min-height:calc(100vh - 92px);align-items:center;justify-content:center}.desktop-auth-shell .landing-copy,.desktop-auth-shell #landingFeatures,.desktop-auth-shell #landingSecurity,.desktop-auth-shell #landingPro,.desktop-auth-shell #installGuide,.desktop-auth-shell .landing-more,.desktop-auth-shell .landing-footer{display:none}.desktop-auth-shell .auth-form-column{width:min(460px,100%)}.desktop-auth-shell .auth-card{box-shadow:0 24px 90px #17122d2b}
.forward-target{display:grid!important;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;width:100%;padding:10px 12px!important;text-align:start;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text-primary)}.forward-target:hover{background:var(--accent-soft);color:var(--text-primary)}.forward-target .friend-avatar{grid-row:1/3;width:36px;height:36px}.forward-target-title{font-weight:600;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forward-target-subtitle{font-size:11px;color:var(--text-secondary)}.saved-forward-avatar{display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}



/* Source: ui-revision.css */
/* Reuse VoiceHub's theme tokens; scope layout changes to the requested surfaces. */
#downloadDesktop{flex-shrink:0}
#shopModal.vh-store .modal-dialog{width:min(1120px,calc(100vw - 32px));max-width:1120px}
.vh-store .modal-body{padding:0!important;overflow:auto;max-height:80dvh}
.vh-store .modal-footer:empty{display:none}
.vh-store-layout{display:grid;grid-template-columns:205px minmax(0,1fr);min-height:600px}
.vh-store-nav{padding:20px 12px;border-right:1px solid var(--border);background:var(--background-secondary);display:flex;flex-direction:column;gap:5px}
.vh-store-nav>button{display:flex;gap:12px;align-items:center;text-align:left;border:0;background:transparent;color:var(--text-secondary);border-radius:10px;padding:13px 12px;font-size:13px;font-weight:600}
.vh-store-nav>button[aria-current=true]{background:var(--accent-soft);color:var(--accent)}
.vh-store-nav>button:hover{background:var(--surface-hover)}
.vh-store-nav>button>i{font-size:19px;flex:0 0 22px}
.vh-store-main{padding:22px 26px;min-width:0}
.vh-store-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--border)}
.vh-store-summary>button{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--background-elevated);color:var(--text-primary);font-weight:700;font-size:14px}
.vh-store-plan{font-size:12px;color:var(--accent);font-weight:700}
.vh-store-panel h3{font-size:21px;margin:0 0 18px;font-weight:700}.vh-store-section-title{margin-top:28px!important}
.vh-store-search{margin-bottom:18px!important;max-width:400px}
.vh-store-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vh-store-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;overflow:hidden;padding:0 14px 14px;background:var(--background-elevated);gap:8px}
.vh-store-art{height:154px;position:relative;display:grid;place-items:center;margin:0 -14px 4px;background:var(--background-secondary);overflow:hidden}
.vh-store-art>img{width:85%;height:85%;object-fit:contain;position:relative;z-index:1}.vh-store-art.profile_banner>img{width:100%;height:100%;object-fit:cover}
.vh-store-art>i{font-size:48px;color:var(--accent)}.vh-store-avatar{position:absolute!important;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);font-size:30px;color:var(--accent)}
.vh-store-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.vh-store-kind{color:var(--text-tertiary);font-size:10px}.vh-store-card h4{font-size:14px;font-weight:700;margin:0;overflow-wrap:anywhere}
.vh-store-description{font-size:12px;line-height:1.5;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.vh-store-price{font-size:12px;color:var(--accent);margin-top:auto}.vh-store-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.vh-store-actions>button{flex:1;padding:8px 10px;min-height:34px;font-size:12px;border-radius:8px;border:1px solid var(--border);background:var(--background-secondary);color:var(--text-primary)}
.vh-store-actions>.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.vh-store-empty{grid-column:1/-1;padding:28px 16px;text-align:center;border:1px dashed var(--border);border-radius:12px;color:var(--text-secondary);font-size:13px}
.vh-store .shop-pro{border-radius:16px;background:linear-gradient(125deg,var(--accent-soft),var(--background-secondary));border:1px solid var(--border);padding:22px}
.vh-store .shop-pro h3{font-size:24px;max-width:420px;margin:8px 0 12px}.vh-store .shop-pro-benefits{font-size:13px;gap:10px}
/* A single media picker: tabs, one search, category rail, content and preview. */
#picker.vh-media-picker{width:540px;max-width:calc(100vw - 24px);height:min(520px,calc(100dvh - 130px));max-height:calc(100dvh - 100px);padding:0;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;background:var(--background-elevated);color:var(--text-primary);box-shadow:var(--shadow-float);border:1px solid var(--border-strong);z-index:1100}
#picker.vh-media-picker.d-none{display:none!important}
.vh-media-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px;gap:8px;flex-shrink:0}
.vh-media-tabs{display:flex;gap:5px}.vh-media-tabs button{padding:7px 12px;border:0;border-radius:7px;font-size:12px;font-weight:700;background:transparent;color:var(--text-secondary)}
.vh-media-tabs button.active{background:var(--surface-hover);color:var(--text-primary)}.vh-media-tabs button:disabled{opacity:.4}
.vh-media-toolbar{display:flex;gap:10px;padding:6px 14px 12px;flex-shrink:0;border-bottom:1px solid var(--border)}
.vh-media-toolbar input{min-width:0;font-size:12px!important;height:34px;min-height:34px!important;padding:6px 10px!important;background:var(--background-secondary)}
.vh-media-toolbar button{white-space:nowrap;font-size:11px;padding:6px 12px;min-height:34px!important;border-radius:7px}
.vh-media-body{min-height:0;flex:1;display:grid;grid-template-columns:48px minmax(0,1fr);overflow:hidden}
.vh-media-rail{overflow:auto;padding:8px 5px;display:flex;flex-direction:column;gap:6px;background:var(--background-secondary);scrollbar-width:none}
.vh-media-rail button{flex:0 0 34px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--text-secondary);font-size:22px;padding:5px}
.vh-media-rail button:hover,.vh-media-rail button:focus-visible{background:var(--accent-soft);outline:1px solid var(--accent)}
.vh-media-rail button img{width:26px;height:26px;object-fit:contain;border-radius:6px}.vh-media-rail button i{font-size:20px}
.vh-media-scroll{overflow:auto;overscroll-behavior:contain;min-width:0;padding:8px 12px 14px;scrollbar-width:thin}
.vh-media-group{border:0;margin:0 0 10px}.vh-media-group summary{display:flex;align-items:center;gap:7px;padding:5px 0 9px;cursor:pointer;font-size:12px;font-weight:700;list-style:none}.vh-media-group summary::-webkit-details-marker{display:none}.vh-media-group:not([open]) summary>i{transform:rotate(-90deg)}.vh-media-group summary>i{font-size:10px;color:var(--text-secondary)}
.vh-media-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
.vh-media-item{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;width:100%;padding:4px;border:0;border-radius:8px;background:transparent;color:var(--text-primary);overflow:hidden}
.vh-media-item:hover,.vh-media-item:focus-visible{background:var(--surface-hover);outline:1px solid var(--border-strong)}
.vh-media-item>img{width:100%;height:100%;object-fit:contain}.vh-media-emoji{font-size:30px;line-height:1;display:block}.vh-media-emoji img.emoji{width:30px;height:30px}
.vh-media-item.is-locked>img{opacity:.45}.vh-media-item>.vh-media-lock{position:absolute;inset:auto 3px 3px auto;font-size:13px;color:var(--text-primary);filter:drop-shadow(0 1px 2px var(--background-elevated))}
.vh-media-empty{padding:12px;color:var(--text-secondary);font-size:12px;grid-column:1/-1}.vh-media-more{display:block;width:100%;border:0;background:transparent;color:var(--accent);font-size:12px;padding:9px}
.vh-media-footer{display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 14px;border-top:1px solid var(--border);background:var(--background-secondary);font-size:12px;flex-shrink:0;color:var(--text-secondary)}
.vh-media-preview{width:36px;height:36px;object-fit:contain;font-size:30px;display:grid;place-items:center}.vh-media-preview img.emoji{width:30px;height:30px}
.vh-media-footer b,.vh-media-footer small{display:block}.vh-media-footer b{color:var(--text-primary);font-size:12px}.vh-media-footer small{font-size:11px;margin-top:3px}
@media(max-width:900px){.vh-store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vh-store-layout{grid-template-columns:180px minmax(0,1fr)}.vh-store-main{padding:18px}}
@media(max-width:620px){#shopModal.vh-store .modal-dialog{width:calc(100vw - 12px);max-width:calc(100vw - 12px);margin:6px}.vh-store-layout{display:block;min-height:0}.vh-store-nav{flex-direction:row;overflow:auto;position:sticky;top:0;z-index:2;border:0;border-bottom:1px solid var(--border);padding:8px}.vh-store-nav>button{white-space:nowrap;font-size:12px;padding:8px;gap:6px}.vh-store-nav>button>i{display:none}.vh-store-main{padding:14px}.vh-store-art{height:128px}.vh-store-grid{gap:10px}.vh-media-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.vh-media-toolbar{padding:5px 10px 10px;gap:6px}.vh-media-toolbar button{font-size:10px;padding:6px}.vh-media-scroll{padding:8px}.vh-media-tabs button{padding:7px 9px}}

#picker.vh-media-picker{gap:0}
#picker .vh-media-tabs button{min-height:30px;border-radius:7px;background:transparent;color:var(--text-secondary);font-size:12px}
#picker .vh-media-tabs button.active{background:var(--surface-hover);color:var(--text-primary)}
#picker .vh-media-toolbar .btn-primary{background:var(--accent);color:white;font-size:12px}
#picker .vh-media-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}
#picker .vh-media-item{min-height:0;background:transparent;border-radius:7px}
#picker .vh-media-item:hover,#picker .vh-media-item:focus-visible{background:var(--surface-hover)}
#picker .vh-media-item>img{width:100%;height:100%;object-fit:contain}
#picker .vh-media-emoji img.emoji,#picker .vh-media-preview img.emoji{width:30px;height:30px;max-width:100%}
#picker .vh-media-rail button{min-height:34px;background:transparent}
#picker .vh-media-rail img{width:26px;height:26px}
#picker .vh-media-footer>img{width:36px;height:36px}
#shopModal.vh-store .shop-pro-benefits{grid-template-columns:1fr 1fr}
#shopModal.vh-store .vh-store-art>img{width:auto;max-width:90%;height:130px;max-height:90%;object-fit:contain}
#shopModal.vh-store .vh-store-art.profile_banner>img{width:100%;max-width:100%;height:100%;max-height:100%;object-fit:cover}
#shopModal.vh-store .vh-store-avatar{top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px}
@media(max-width:620px){#shopModal.vh-store .shop-pro-benefits{grid-template-columns:1fr}#picker .vh-media-grid{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))}}

#picker .vh-media-emoji{display:grid;place-items:center;line-height:1;width:100%;min-width:0}
#picker .vh-media-emoji img.vh-emoji,#picker .vh-media-preview img.vh-emoji{width:30px!important;height:30px!important;max-width:100%;max-height:100%;object-fit:contain;vertical-align:middle;margin:0}

/* Source: icons-complete.css */
/* Additional Bootstrap Icons 1.13.1, MIT; local assets only. */
.bi-arrow-clockwise{--vh-icon:url("icons/arrow-clockwise.svg")}
.bi-arrow-left{--vh-icon:url("icons/arrow-left.svg")}
.bi-arrow-repeat{--vh-icon:url("icons/arrow-repeat.svg")}
.bi-arrow-return-left{--vh-icon:url("icons/arrow-return-left.svg")}
.bi-arrow-right{--vh-icon:url("icons/arrow-right.svg")}
.bi-arrow-up{--vh-icon:url("icons/arrow-up.svg")}
.bi-arrow-up-right{--vh-icon:url("icons/arrow-up-right.svg")}
.bi-arrows-fullscreen{--vh-icon:url("icons/arrows-fullscreen.svg")}
.bi-at{--vh-icon:url("icons/at.svg")}
.bi-bag{--vh-icon:url("icons/bag.svg")}
.bi-bag-heart{--vh-icon:url("icons/bag-heart.svg")}
.bi-bar-chart{--vh-icon:url("icons/bar-chart.svg")}
.bi-bell{--vh-icon:url("icons/bell.svg")}
.bi-bell-fill{--vh-icon:url("icons/bell-fill.svg")}
.bi-bell-slash{--vh-icon:url("icons/bell-slash.svg")}
.bi-bell-slash-fill{--vh-icon:url("icons/bell-slash-fill.svg")}
.bi-bookmark-fill{--vh-icon:url("icons/bookmark-fill.svg")}
.bi-bounding-box{--vh-icon:url("icons/bounding-box.svg")}
.bi-box-arrow-in-right{--vh-icon:url("icons/box-arrow-in-right.svg")}
.bi-box-arrow-right{--vh-icon:url("icons/box-arrow-right.svg")}
.bi-box-arrow-up-right{--vh-icon:url("icons/box-arrow-up-right.svg")}
.bi-box-seam{--vh-icon:url("icons/box-seam.svg")}
.bi-broadcast-pin{--vh-icon:url("icons/broadcast-pin.svg")}
.bi-calendar3{--vh-icon:url("icons/calendar3.svg")}
.bi-camera{--vh-icon:url("icons/camera.svg")}
.bi-camera-video{--vh-icon:url("icons/camera-video.svg")}
.bi-camera-video-fill{--vh-icon:url("icons/camera-video-fill.svg")}
.bi-camera-video-off{--vh-icon:url("icons/camera-video-off.svg")}
.bi-card-heading{--vh-icon:url("icons/card-heading.svg")}
.bi-card-text{--vh-icon:url("icons/card-text.svg")}
.bi-chat{--vh-icon:url("icons/chat.svg")}
.bi-chat-dots{--vh-icon:url("icons/chat-dots.svg")}
.bi-chat-dots-fill{--vh-icon:url("icons/chat-dots-fill.svg")}
.bi-chat-fill{--vh-icon:url("icons/chat-fill.svg")}
.bi-chat-heart{--vh-icon:url("icons/chat-heart.svg")}
.bi-chat-left-text{--vh-icon:url("icons/chat-left-text.svg")}
.bi-chat-square-heart{--vh-icon:url("icons/chat-square-heart.svg")}
.bi-chat-square-text{--vh-icon:url("icons/chat-square-text.svg")}
.bi-check-lg{--vh-icon:url("icons/check-lg.svg")}
.bi-check2{--vh-icon:url("icons/check2.svg")}
.bi-check2-all{--vh-icon:url("icons/check2-all.svg")}
.bi-check2-circle{--vh-icon:url("icons/check2-circle.svg")}
.bi-chevron-down{--vh-icon:url("icons/chevron-down.svg")}
.bi-chevron-left{--vh-icon:url("icons/chevron-left.svg")}
.bi-chevron-right{--vh-icon:url("icons/chevron-right.svg")}
.bi-circle-fill{--vh-icon:url("icons/circle-fill.svg")}
.bi-circle-half{--vh-icon:url("icons/circle-half.svg")}
.bi-clock-history{--vh-icon:url("icons/clock-history.svg")}
.bi-cloud-arrow-up{--vh-icon:url("icons/cloud-arrow-up.svg")}
.bi-cloud-arrow-up-fill{--vh-icon:url("icons/cloud-arrow-up-fill.svg")}
.bi-compass{--vh-icon:url("icons/compass.svg")}
.bi-controller{--vh-icon:url("icons/controller.svg")}
.bi-copy{--vh-icon:url("icons/copy.svg")}
.bi-dash-lg{--vh-icon:url("icons/dash-lg.svg")}
.bi-display{--vh-icon:url("icons/display.svg")}
.bi-display-fill{--vh-icon:url("icons/display-fill.svg")}
.bi-download{--vh-icon:url("icons/download.svg")}
.bi-emoji-frown{--vh-icon:url("icons/emoji-frown.svg")}
.bi-emoji-smile{--vh-icon:url("icons/emoji-smile.svg")}
.bi-envelope{--vh-icon:url("icons/envelope.svg")}
.bi-envelope-at{--vh-icon:url("icons/envelope-at.svg")}
.bi-envelope-check{--vh-icon:url("icons/envelope-check.svg")}
.bi-envelope-open-fill{--vh-icon:url("icons/envelope-open-fill.svg")}
.bi-exclamation-circle{--vh-icon:url("icons/exclamation-circle.svg")}
.bi-exclamation-triangle{--vh-icon:url("icons/exclamation-triangle.svg")}
.bi-eye{--vh-icon:url("icons/eye.svg")}
.bi-file-earmark{--vh-icon:url("icons/file-earmark.svg")}
.bi-file-earmark-arrow-down{--vh-icon:url("icons/file-earmark-arrow-down.svg")}
.bi-file-earmark-fill{--vh-icon:url("icons/file-earmark-fill.svg")}
.bi-file-earmark-x{--vh-icon:url("icons/file-earmark-x.svg")}
.bi-file-music{--vh-icon:url("icons/file-music.svg")}
.bi-file-post{--vh-icon:url("icons/file-post.svg")}
.bi-filetype-gif{--vh-icon:url("icons/filetype-gif.svg")}
.bi-film{--vh-icon:url("icons/film.svg")}
.bi-flag{--vh-icon:url("icons/flag.svg")}
.bi-forward{--vh-icon:url("icons/forward.svg")}
.bi-fullscreen{--vh-icon:url("icons/fullscreen.svg")}
.bi-gear{--vh-icon:url("icons/gear.svg")}
.bi-gem{--vh-icon:url("icons/gem.svg")}
.bi-gift{--vh-icon:url("icons/gift.svg")}
.bi-gift-fill{--vh-icon:url("icons/gift-fill.svg")}
.bi-graph-up{--vh-icon:url("icons/graph-up.svg")}
.bi-grid{--vh-icon:url("icons/grid.svg")}
.bi-grid-1x2-fill{--vh-icon:url("icons/grid-1x2-fill.svg")}
.bi-grid-3x3-gap-fill{--vh-icon:url("icons/grid-3x3-gap-fill.svg")}
.bi-grid-fill{--vh-icon:url("icons/grid-fill.svg")}
.bi-hash{--vh-icon:url("icons/hash.svg")}
.bi-heart{--vh-icon:url("icons/heart.svg")}
.bi-heart-fill{--vh-icon:url("icons/heart-fill.svg")}
.bi-house{--vh-icon:url("icons/house.svg")}
.bi-image{--vh-icon:url("icons/image.svg")}
.bi-images{--vh-icon:url("icons/images.svg")}
.bi-inbox{--vh-icon:url("icons/inbox.svg")}
.bi-info-circle{--vh-icon:url("icons/info-circle.svg")}
.bi-journal-check{--vh-icon:url("icons/journal-check.svg")}
.bi-journal-text{--vh-icon:url("icons/journal-text.svg")}
.bi-key{--vh-icon:url("icons/key.svg")}
.bi-keyboard{--vh-icon:url("icons/keyboard.svg")}
.bi-laptop{--vh-icon:url("icons/laptop.svg")}
.bi-life-preserver{--vh-icon:url("icons/life-preserver.svg")}
.bi-lightning{--vh-icon:url("icons/lightning.svg")}
.bi-lightning-charge-fill{--vh-icon:url("icons/lightning-charge-fill.svg")}
.bi-lightning-fill{--vh-icon:url("icons/lightning-fill.svg")}
.bi-link-45deg{--vh-icon:url("icons/link-45deg.svg")}
.bi-list{--vh-icon:url("icons/list.svg")}
.bi-lock{--vh-icon:url("icons/lock.svg")}
.bi-lock-fill{--vh-icon:url("icons/lock-fill.svg")}
.bi-mic{--vh-icon:url("icons/mic.svg")}
.bi-mic-fill{--vh-icon:url("icons/mic-fill.svg")}
.bi-mic-mute-fill{--vh-icon:url("icons/mic-mute-fill.svg")}
.bi-moon-stars{--vh-icon:url("icons/moon-stars.svg")}
.bi-music-note-beamed{--vh-icon:url("icons/music-note-beamed.svg")}
.bi-palette{--vh-icon:url("icons/palette.svg")}
.bi-paperclip{--vh-icon:url("icons/paperclip.svg")}
.bi-patch-check{--vh-icon:url("icons/patch-check.svg")}
.bi-patch-check-fill{--vh-icon:url("icons/patch-check-fill.svg")}
.bi-pause-fill{--vh-icon:url("icons/pause-fill.svg")}
.bi-pencil{--vh-icon:url("icons/pencil.svg")}
.bi-pencil-square{--vh-icon:url("icons/pencil-square.svg")}
.bi-people{--vh-icon:url("icons/people.svg")}
.bi-people-fill{--vh-icon:url("icons/people-fill.svg")}
.bi-person{--vh-icon:url("icons/person.svg")}
.bi-person-badge{--vh-icon:url("icons/person-badge.svg")}
.bi-person-bounding-box{--vh-icon:url("icons/person-bounding-box.svg")}
.bi-person-check-fill{--vh-icon:url("icons/person-check-fill.svg")}
.bi-person-circle{--vh-icon:url("icons/person-circle.svg")}
.bi-person-dash{--vh-icon:url("icons/person-dash.svg")}
.bi-person-fill{--vh-icon:url("icons/person-fill.svg")}
.bi-person-heart{--vh-icon:url("icons/person-heart.svg")}
.bi-person-lines-fill{--vh-icon:url("icons/person-lines-fill.svg")}
.bi-person-plus{--vh-icon:url("icons/person-plus.svg")}
.bi-person-plus-fill{--vh-icon:url("icons/person-plus-fill.svg")}
.bi-person-slash{--vh-icon:url("icons/person-slash.svg")}
.bi-person-video{--vh-icon:url("icons/person-video.svg")}
.bi-person-x{--vh-icon:url("icons/person-x.svg")}
.bi-person-x-fill{--vh-icon:url("icons/person-x-fill.svg")}
.bi-phone{--vh-icon:url("icons/phone.svg")}
.bi-pin-angle{--vh-icon:url("icons/pin-angle.svg")}
.bi-pin-angle-fill{--vh-icon:url("icons/pin-angle-fill.svg")}
.bi-pip{--vh-icon:url("icons/pip.svg")}
.bi-play-circle{--vh-icon:url("icons/play-circle.svg")}
.bi-play-fill{--vh-icon:url("icons/play-fill.svg")}
.bi-plus-circle{--vh-icon:url("icons/plus-circle.svg")}
.bi-plus-lg{--vh-icon:url("icons/plus-lg.svg")}
.bi-qr-code{--vh-icon:url("icons/qr-code.svg")}
.bi-question-circle{--vh-icon:url("icons/question-circle.svg")}
.bi-reply{--vh-icon:url("icons/reply.svg")}
.bi-reply-fill{--vh-icon:url("icons/reply-fill.svg")}
.bi-rocket-takeoff{--vh-icon:url("icons/rocket-takeoff.svg")}
.bi-search{--vh-icon:url("icons/search.svg")}
.bi-send{--vh-icon:url("icons/send.svg")}
.bi-send-fill{--vh-icon:url("icons/send-fill.svg")}
.bi-shield-check{--vh-icon:url("icons/shield-check.svg")}
.bi-shield-lock{--vh-icon:url("icons/shield-lock.svg")}
.bi-shield-lock-fill{--vh-icon:url("icons/shield-lock-fill.svg")}
.bi-slash-circle{--vh-icon:url("icons/slash-circle.svg")}
.bi-sliders2{--vh-icon:url("icons/sliders2.svg")}
.bi-soundwave{--vh-icon:url("icons/soundwave.svg")}
.bi-speedometer2{--vh-icon:url("icons/speedometer2.svg")}
.bi-star{--vh-icon:url("icons/star.svg")}
.bi-star-fill{--vh-icon:url("icons/star-fill.svg")}
.bi-stars{--vh-icon:url("icons/stars.svg")}
.bi-sticky{--vh-icon:url("icons/sticky.svg")}
.bi-sticky-fill{--vh-icon:url("icons/sticky-fill.svg")}
.bi-sun{--vh-icon:url("icons/sun.svg")}
.bi-symmetry-vertical{--vh-icon:url("icons/symmetry-vertical.svg")}
.bi-telephone{--vh-icon:url("icons/telephone.svg")}
.bi-telephone-fill{--vh-icon:url("icons/telephone-fill.svg")}
.bi-telephone-x{--vh-icon:url("icons/telephone-x.svg")}
.bi-telephone-x-fill{--vh-icon:url("icons/telephone-x-fill.svg")}
.bi-three-dots{--vh-icon:url("icons/three-dots.svg")}
.bi-toggles2{--vh-icon:url("icons/toggles2.svg")}
.bi-translate{--vh-icon:url("icons/translate.svg")}
.bi-trash3{--vh-icon:url("icons/trash3.svg")}
.bi-volume-down{--vh-icon:url("icons/volume-down.svg")}
.bi-volume-mute{--vh-icon:url("icons/volume-mute.svg")}
.bi-volume-mute-fill{--vh-icon:url("icons/volume-mute-fill.svg")}
.bi-volume-up{--vh-icon:url("icons/volume-up.svg")}
.bi-volume-up-fill{--vh-icon:url("icons/volume-up-fill.svg")}
.bi-wallet2{--vh-icon:url("icons/wallet2.svg")}
.bi-x-lg{--vh-icon:url("icons/x-lg.svg")}
.bi-youtube{--vh-icon:url("icons/youtube.svg")}
.bi::before{mask:var(--vh-icon,url("icons/question-circle.svg")) center/contain no-repeat;-webkit-mask:var(--vh-icon,url("icons/question-circle.svg")) center/contain no-repeat}

/* VoiceHub editor outline glyphs. */
.bi-type-h1{--vh-icon:url("icons/editor-type-h1.svg")}
.bi-type-h2{--vh-icon:url("icons/editor-type-h2.svg")}
.bi-paragraph{--vh-icon:url("icons/editor-paragraph.svg")}
.bi-type-bold{--vh-icon:url("icons/editor-type-bold.svg")}
.bi-type-italic{--vh-icon:url("icons/editor-type-italic.svg")}
.bi-list-ul{--vh-icon:url("icons/editor-list-ul.svg")}
.bi-list-ol{--vh-icon:url("icons/editor-list-ol.svg")}
.bi-quote{--vh-icon:url("icons/editor-quote.svg")}
.bi-arrow-counterclockwise{--vh-icon:url("icons/editor-arrow-counterclockwise.svg")}

.bi-headphones{--vh-icon:url("icons/v52-headphones.svg")}

.bi-arrows-move{--vh-icon:url("icons/v52-arrows-move.svg")}

.bi-grip-vertical{--vh-icon:url("icons/v52-grip-vertical.svg")}

/* Theme and welcome symbols drawn for the local icon set. */
.bi-water{--vh-icon:url("icons/water.svg")}
.bi-tree{--vh-icon:url("icons/tree.svg")}
.bi-door-open{--vh-icon:url("icons/door-open.svg")}
.bi-theme-ash{--vh-icon:url("icons/theme-ash.svg")}
.bi-eggplant{--vh-icon:url("icons/eggplant.svg")}
.bi-globe2{--vh-icon:url("icons/globe2.svg")}

/* Source: store-profile-v45.css */
/* Product previews share the actual profile assets and the current theme. */
.product-preview-dialog{width:min(960px,calc(100vw - 32px));max-width:960px;height:min(650px,calc(100dvh - 40px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--border-strong);border-radius:18px;background:var(--background-elevated);color:var(--text-primary);overflow:auto}
.product-preview-dialog[open]{display:grid;grid-template-columns:340px minmax(0,1fr)}
.product-preview-dialog::backdrop,.store-recipient-dialog::backdrop{background:#090a12bd;backdrop-filter:blur(3px)}
.product-preview-close{position:absolute;right:14px;top:14px;z-index:5;border:0;border-radius:50%;width:32px;height:32px;background:#1119;color:#fff;display:grid;place-items:center}
.product-preview-info{display:flex;flex-direction:column;min-width:0;padding:30px 28px;background:var(--background-secondary);border-right:1px solid var(--border)}
.product-preview-art{min-height:220px;flex:1;display:flex;align-items:center;justify-content:center;padding:20px 0}.product-preview-art img{max-width:100%;max-height:220px;object-fit:contain}.product-preview-art>i{font-size:80px;color:var(--accent)}.product-preview-art .banner-preview{width:100%;height:140px}.product-preview-art .preview-avatar{position:relative;width:140px;height:140px;font-size:40px}
.product-preview-copy h2{font-size:22px;line-height:1.3;font-weight:750;margin:0 0 12px}.product-preview-copy p{font-size:13px;color:var(--text-secondary);line-height:1.6}.product-preview-price{display:block;font-size:22px;margin:22px 0 16px}.product-preview-actions{display:flex;gap:8px}.product-preview-actions button{min-height:44px;border:1px solid var(--border);border-radius:9px;background:var(--surface-hover);color:var(--text-primary);padding:10px 14px}.product-preview-actions>.btn-primary{flex:1;background:var(--accent);border-color:var(--accent);color:#fff}.product-preview-error{color:var(--danger)!important;font-size:12px;margin:12px 0 0}.product-preview-copy textarea{margin-bottom:14px;font-size:12px}
.product-preview-stage{min-width:0;display:grid;place-items:center;padding:50px 40px;background:radial-gradient(ellipse at 50% 20%,var(--accent-soft),transparent 75%),var(--background-primary);overflow:hidden}
.preview-profile{position:relative;width:min(320px,100%);border:1px solid var(--border);border-radius:14px;background:var(--background-elevated);box-shadow:0 20px 50px #0003;background-size:cover}
.preview-profile-banner{height:112px;border-radius:13px 13px 0 0;background:linear-gradient(110deg,var(--accent),var(--accent-soft));background-size:cover;background-position:center;position:relative}
.preview-banner-frame,.managed-banner-frame{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);object-fit:fill;pointer-events:none;z-index:2}.inapp-profile-banner.has-banner-frame{overflow:visible}
.preview-profile-avatar{position:relative!important;display:grid;place-items:center;width:80px;height:80px;border-radius:50%;margin:-40px 0 0 20px;background:var(--background-elevated);border:5px solid var(--background-elevated);font-size:24px;z-index:3}.preview-profile-avatar>img:not(.managed-avatar-decoration){width:100%;height:100%;border-radius:50%;object-fit:cover}.preview-profile-avatar .managed-avatar-decoration{position:absolute;inset:-12%;width:124%;height:124%;object-fit:contain;pointer-events:none}
.preview-profile-copy{padding:12px 18px 18px}.preview-profile-copy h3{font-size:21px;margin:0 0 4px}.preview-profile-copy>small{font-size:12px;color:var(--text-secondary)}.preview-example-button{display:block;text-align:center;font-size:12px;font-weight:600;background:var(--accent);color:#fff;border-radius:7px;padding:9px;margin-top:18px}.preview-profile-effect{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.preview-members{width:100%;max-width:340px;padding:20px 14px;background:var(--background-elevated);border:1px solid var(--border);border-radius:14px}.preview-member{display:flex;align-items:center;gap:10px;height:52px;margin:8px 0;padding:8px;border-radius:8px;background-size:cover;background-position:center}.preview-member b{font-size:14px}.preview-member-avatar,.preview-placeholder-avatar{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);flex-shrink:0}.preview-member-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.preview-placeholder-name{width:120px;height:9px;border-radius:6px;background:var(--surface-hover)}.preview-placeholder-avatar{background:var(--surface-hover)}.preview-message{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;padding:28px;border-radius:16px;background:var(--background-elevated);border:1px solid var(--border)}.preview-message>img{max-width:100%;max-height:230px;object-fit:contain}.preview-message>i{font-size:68px;color:var(--accent)}.preview-message>small{color:var(--text-secondary);font-size:12px}
.store-recipient-dialog{width:min(480px,calc(100vw - 24px));max-height:80dvh;border:1px solid var(--border);border-radius:14px;padding:22px;background:var(--background-elevated);color:var(--text-primary)}.store-recipient-dialog header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.store-recipient-dialog header h3{font-size:20px;margin:0}.store-recipient-list{display:flex;flex-direction:column;gap:6px;margin-top:16px}.store-recipient-list>button{display:flex;align-items:center;gap:10px;text-align:left;padding:12px;background:var(--background-secondary);border:1px solid var(--border);border-radius:10px;color:var(--text-primary)}.store-recipient-list small{margin-left:auto;color:var(--text-secondary);font-size:11px}.store-gift-filters{display:flex;gap:12px;margin:0 0 18px}.store-gift-filters>*{min-width:0;flex:1}.store-gift-card>button{font-size:12px;padding:10px;border-radius:8px}.store-gift-card .gift-art{font-size:70px}.store-gift-card .gift-image{max-width:100%;max-height:130px;object-fit:contain}
.community-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:750;line-height:1;white-space:nowrap;vertical-align:middle;padding:4px 5px;border-radius:5px;background:var(--surface-hover);color:var(--text-primary);margin-left:6px}.community-tag>img{width:15px;height:15px;object-fit:contain}.managed-nameplate{background-size:cover;background-position:center;border-radius:7px;padding:5px 9px!important;min-height:28px}.server-tag-settings{padding:24px 0 0;margin-top:24px;border-top:1px solid var(--border)}.server-tag-settings h3{font-size:18px}.server-tag-current{margin:14px 0}.server-tag-current .community-tag{font-size:14px;padding:8px}.server-tag-current .community-tag img{width:24px;height:24px}.server-tag-form{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;margin-top:20px}.server-tag-form>.settings-error{grid-column:1/-1}.server-tag-form button{font-size:12px}
.activity-surface{display:block!important;max-width:760px;margin:0 auto;padding:26px!important;width:100%}.activity-section-title{font-size:13px;font-weight:700;margin:0 0 12px}.activity-section-title:not(:first-child){margin-top:30px}.activity-current,.activity-game-row{border-radius:14px;border:1px solid var(--border);background:var(--background-secondary)}.activity-current{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:18px}.activity-current>small{grid-column:1/-1;font-size:11px;font-weight:600}.activity-game-art{width:64px;height:64px;flex:0 0 64px;border-radius:12px;overflow:hidden;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}.activity-game-art img{width:100%;height:100%;object-fit:cover}.activity-game-art i{font-size:28px}.activity-current .activity-game-art{width:90px;height:90px;border-radius:12px}.activity-game-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:8px}.activity-game-copy b{font-size:14px;font-weight:700;line-height:1.4}.activity-game-copy small{font-size:11px;color:var(--text-secondary);display:flex;align-items:center;gap:5px}.activity-live{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--success);font-variant-numeric:tabular-nums}.activity-recent{display:flex;flex-direction:column;gap:12px}.activity-game-row>summary{display:flex;align-items:center;gap:14px;padding:14px;cursor:pointer;list-style:none}.activity-game-row>summary::-webkit-details-marker{display:none}.activity-game-row>summary:after{content:'›';margin-left:auto;color:var(--text-secondary);font-size:20px}.activity-game-row[open]>summary:after{transform:rotate(90deg)}.activity-game-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 18px 18px}.activity-game-details small,.activity-game-details b{display:block;font-size:11px;margin-bottom:5px}.activity-game-details small{color:var(--text-secondary)}.activity-empty{color:var(--text-secondary);font-size:12px;padding:18px;border:1px dashed var(--border);border-radius:12px}.activity-statistics{margin:22px 0 0;font-size:12px;color:var(--text-secondary)}.activity-statistics p{font-size:12px;margin:12px 0 0}
/* Desktop shows the account form immediately, without the website landing page. */
html.desktop-auth #authView:not(.d-none){display:flex!important;min-height:100dvh;align-items:center;justify-content:center;padding:36px 16px;background:radial-gradient(ellipse at top,var(--accent-soft),transparent 65%),var(--background-primary)}
html.desktop-auth #authView>.landing-header,html.desktop-auth #authView>.landing-footer,html.desktop-auth #authView .landing-copy,html.desktop-auth #authView .landing-benefits,html.desktop-auth #authView .landing-security,html.desktop-auth #authView #installGuide,html.desktop-auth #authView .landing-offer,html.desktop-auth #authView .landing-footer{display:none!important}
html.desktop-auth #authView>.container{max-width:460px!important;width:100%;padding:0!important;margin:0!important}html.desktop-auth #authView>.container>:not(.landing-hero){display:none!important}html.desktop-auth #authView .landing-hero{display:block!important;min-height:0!important;padding:0!important;margin:0!important}html.desktop-auth #authView .auth-form-column{width:100%!important;max-width:none!important;padding:0!important}html.desktop-auth #authView .auth-card{margin:0!important;padding:30px!important;border-radius:18px!important;width:100%!important}
@media(max-width:700px){.product-preview-dialog[open]{grid-template-columns:1fr;height:auto}.product-preview-info{border-right:0;padding:24px}.product-preview-art{min-height:150px}.product-preview-art img{max-height:150px}.product-preview-stage{min-height:320px;padding:35px 24px}.product-preview-copy h2{font-size:20px}.activity-surface{padding:16px!important}.activity-game-details{grid-template-columns:1fr 1fr}.activity-current{grid-template-columns:72px 1fr}.activity-current .activity-game-art{width:72px;height:72px}.server-tag-form{grid-template-columns:1fr}.store-gift-filters{flex-direction:column}}

/* Source: content-activity.css */
.managed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:16px 0}.managed-card{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:18px;border:1px solid #83839a44;border-radius:16px;background:var(--bs-body-bg,#fff);color:var(--bs-body-color,#202238)}.managed-card>img{width:100%;height:140px;object-fit:contain}.managed-card small{opacity:.75}.managed-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:18px 0}.managed-form label{display:flex;flex-direction:column;gap:6px}.asset-preview img,.asset-preview audio{max-width:180px;max-height:100px}.managed-game{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #8883}.managed-game>img{width:40px;height:40px;object-fit:contain}.managed-game p{flex-basis:100%;margin:0}.managed-history{margin:20px}.managed-profile-badge{max-width:180px;max-height:40px;object-fit:contain}.managed-profile-effect{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:.45}.vh-avatar{position:relative}.vh-avatar>img.managed-avatar-decoration{position:absolute!important;inset:-12%!important;width:124%!important;height:124%!important;object-fit:contain!important;border-radius:0!important;pointer-events:none}.managed-picker-tabs{display:flex;gap:8px;padding:8px;position:sticky;top:0;background:var(--bs-body-bg,#fff);z-index:2}.managed-picker-items{padding:8px}.managed-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.managed-picker-grid img{width:70px;height:70px;object-fit:contain}.download-page{font:16px system-ui;background:#f3f2fa;color:#252237;margin:0;padding:40px}.download-page main{max-width:1000px;margin:auto}.download-link{padding:12px;background:#7657da;color:white;border-radius:8px;text-align:center;text-decoration:none}.recommended-release{border-color:#7657da}#chatActionMenu.vh-context-submenu,.message-context-menu.vh-context-submenu{position:fixed;z-index:11000;width:280px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto}
.vh-context-label{display:flex;align-items:center;gap:10px;min-width:0;overflow-wrap:normal}
.vh-context-label>.vh-context-arrow{margin-left:auto;flex:0 0 auto;font-size:12px;width:12px}
.vh-context-submenu>button:hover,.vh-context-submenu>button:focus-visible{background:var(--surface-hover);outline:none}
.vh-context-submenu>button:disabled{opacity:.4}
.vh-context-submenu>[role=separator]{height:1px;background:var(--border);margin:5px 4px}
.managed-picker-items .form-control,.managed-picker-items .form-select{margin-bottom:6px}

.managed-card details>button{display:block;width:100%;margin-top:6px}.managed-card details summary{cursor:pointer;padding:8px}.managed-card>span{font-size:28px;text-align:center}.managed-form label:has(input[type=checkbox]){flex-direction:row;align-items:center}.managed-form textarea{min-height:78px}
.managed-invite-banner{display:block;width:100%;height:160px;object-fit:cover;border-radius:12px}.managed-server-header{background-size:cover;background-position:center;background-blend-mode:soft-light}.managed-reaction{width:22px;height:22px;object-fit:contain;vertical-align:middle}

/* Source: community-v46.css */
/* v46 community surfaces use the same theme tokens as the rest of VoiceHub. */
#shopModal .vh-store-nav>button{justify-content:flex-start!important;text-align:left!important}
#shopModal .vh-store-nav>button>span{text-align:left;flex:1}
.channel-stack[hidden],.jump-to-latest[hidden],.server-cover-image[hidden],.server-community-links[hidden]{display:none!important}
.channel-group-head .channel-group-toggle{display:flex!important;align-items:center;gap:7px;width:auto!important;height:auto!important;flex:1;justify-content:flex-start;padding:7px 0!important;border:0;background:transparent;color:inherit;font:inherit;text-align:left}
.channel-group-toggle>.bi-chevron-down{font-size:10px;transition:transform .15s}
.channel-group-toggle[aria-expanded=false]>.bi-chevron-down{transform:rotate(-90deg)}
.channel-group-head{gap:8px}.channel-group-head>button:not(.channel-group-toggle){flex-shrink:0}
.muted-indicator{margin-left:6px;flex-shrink:0;color:var(--text-secondary);font-size:16px}
.voice-channel-time{font-size:11px;color:#35a665;font-variant-numeric:tabular-nums;margin-left:auto;flex-shrink:0}
.voice-media-indicators{display:flex;align-items:center;gap:7px;flex-shrink:0;padding-right:7px;color:var(--text-secondary);font-size:13px}
.voice-live-badge{color:white;background:#d9414b;border-radius:5px;font-size:9px;font-weight:800;white-space:nowrap;padding:2px 5px}
.channel-occupant{min-width:0}.channel-occupant-copy{min-width:0}.channel-occupant-copy>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jump-to-latest{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;margin:0 20px 8px;border:1px solid var(--border);background:var(--background-elevated);border-radius:10px;flex-shrink:0;font-size:12px;box-shadow:0 3px 14px #0001}
.jump-to-latest .btn{font-size:12px;padding:7px 10px}
.friends-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:300px;text-align:center;padding:40px 20px;color:var(--text-primary)}
#messages>.friends-empty-state{min-height:65%}.friends-empty-state>.bi{font-size:44px}.friends-empty-state h3{font-size:18px;margin:0}.friends-empty-state>p{font-size:13px;max-width:350px;margin:0;color:var(--text-secondary)}
.friends-share-card{display:flex;align-items:center;gap:14px;max-width:640px;width:100%;padding:18px;text-align:left;border:1px solid var(--border);border-radius:10px;background:var(--background-secondary)}
.friends-share-card>div{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.friends-share-card small{color:var(--text-secondary)}.friends-share-card code{font-size:11px;overflow-wrap:anywhere;color:var(--text-primary)}.friends-share-card .btn{flex-shrink:0}.friends-share-card>.bi{font-size:22px}.empty-friends-requests{max-width:680px;margin:auto;padding:20px}
#inviteFriendsModal .modal-dialog{max-width:520px}#inviteFriendsModal .modal-body{padding:20px 24px 0}#inviteFriendsModal .modal-footer{display:flex;flex-direction:column;align-items:stretch;padding:20px 24px;gap:10px}#inviteFriendsModal .modal-footer>p{font-size:12px;margin:0}#inviteFriendsModal .modal-footer small{font-size:11px;color:var(--text-secondary)}.invite-channel{font-size:13px;color:var(--text-secondary);margin-top:-6px}.invite-friend-list{min-height:240px;max-height:340px;overflow-y:auto;padding:12px 0}.invite-friend-list .friends-empty-state{min-height:230px;padding:24px 8px}.invite-friend-row{display:flex;align-items:center;gap:12px;padding:9px 0}.invite-friend-row>div{flex:1;min-width:0;display:flex;flex-direction:column}.invite-friend-row small{color:var(--text-secondary)}.invite-friend-row .btn{font-size:12px;padding:8px 10px}.invite-link-line{display:flex;gap:8px}.invite-link-line input{min-width:0}.invite-link-line button{flex-shrink:0}
/* Status shapes are legible without relying on color alone. */
.presence,.mini-presence,.inapp-profile-presence,#meStatusDot{--status-bg:var(--background-elevated,#242429);border:3px solid var(--status-bg)!important;box-sizing:content-box;background:#80848e;border-radius:50%;min-width:9px;min-height:9px;box-shadow:none!important}
.presence.online,.mini-presence.online,.inapp-profile-presence.online,#meStatusDot.online{background:#3ba55d!important}
.presence.idle,.mini-presence.idle,.inapp-profile-presence.idle,#meStatusDot.idle{background:#faa61a!important;overflow:hidden}
.presence.idle:after,.mini-presence.idle:after,.inapp-profile-presence.idle:after,#meStatusDot.idle:after{content:'';position:absolute;top:-3px;left:-3px;width:80%;height:80%;background:var(--status-bg);border-radius:50%}
.presence.dnd,.mini-presence.dnd,.inapp-profile-presence.dnd,#meStatusDot.dnd{background:#ed4245!important}
.presence.dnd:after,.mini-presence.dnd:after,.inapp-profile-presence.dnd:after,#meStatusDot.dnd:after{content:'';position:absolute;left:15%;top:40%;height:20%;width:70%;border-radius:1px;background:var(--status-bg)}
.presence.offline,.mini-presence.offline,.inapp-profile-presence.offline,#meStatusDot.offline{background:#80848e!important}
.presence.offline:after,.mini-presence.offline:after,.inapp-profile-presence.offline:after,#meStatusDot.offline:after{content:'';position:absolute;inset:25%;border-radius:50%;background:var(--status-bg)}
#miniProfileAvatar>.mini-presence{position:absolute;right:0;bottom:0;width:14px;height:14px;z-index:5}#miniProfileAvatar{overflow:visible!important}.mini-profile-cover{overflow:visible!important}.mini-profile-banner .managed-banner-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.mini-profile-effect{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;pointer-events:none}.mini-game-activity{position:relative;border:1px solid var(--border);background:var(--background-secondary);border-radius:10px;padding:12px;margin:14px 0}.mini-game-activity>small{display:block;font-weight:700;font-size:11px;margin-bottom:9px}.mini-game-activity>div{display:flex;align-items:center;gap:12px}.mini-game-activity .activity-game-art{width:46px;height:46px;flex-shrink:0}.mini-game-activity>div>div{display:flex;flex-direction:column;gap:5px}.mini-game-activity b{font-size:13px}.mini-game-activity small>i{margin-right:5px}.mini-game-activity time{color:#3ba55d;font-size:11px}
.server-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.server-showcase.has-server-cover{min-height:155px;position:relative;background:#181a20;overflow:hidden;padding-bottom:15px}.server-showcase.has-server-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0008,transparent 35%,#000a);pointer-events:none;z-index:1}.server-showcase.has-server-cover .server-showcase-top,.server-showcase.has-server-cover .server-showcase-body{position:relative;z-index:2;color:#fff}.has-server-cover #serverName,.has-server-cover #serverSubtitle,.has-server-cover .workspace-label,.has-server-cover .glass-icon-btn{color:#fff!important;text-shadow:0 1px 5px #000}.has-server-cover .server-showcase-body{margin-top:40px}.server-community-links{display:flex;flex-direction:column;gap:3px;padding:8px 14px 12px;border-bottom:1px solid var(--border)}.server-community-links>.btn{text-align:left;justify-content:flex-start;display:flex;gap:10px;border:0;padding:8px;background:transparent;font-size:13px}.server-community-links>.server-boost-progress{display:flex;align-items:center;justify-content:space-between;border:0;border-radius:8px;padding:6px 8px;font-size:11px;color:var(--text-primary);background:linear-gradient(90deg,var(--accent-soft) var(--boost-progress),var(--background-secondary) var(--boost-progress));margin-bottom:4px}.server-banner-settings{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}.server-banner-preview{display:block;width:100%;max-height:200px;object-fit:cover;border-radius:10px;margin:12px 0}.server-banner-settings input{margin:12px 0}
.profile-banner-default{background-image:linear-gradient(135deg,var(--accent-soft),var(--background-secondary))!important}
.shop-pro.pro-store-card{padding:0;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--background-secondary);display:block}.pro-offer-hero{position:relative;overflow:hidden;padding:42px 28px 30px;background:radial-gradient(ellipse at 85% 0%,#b32b87aa,transparent 65%),linear-gradient(130deg,#382345,#17141e);color:#fff;min-height:190px}.pro-offer-kicker{display:inline-block;border:1px solid #ffffff66;background:#ffffff17;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:1px}.pro-offer-hero h2{font-weight:900;font-style:italic;font-size:34px;margin:12px 0 8px;letter-spacing:-1px;color:#fff!important}.pro-offer-hero p{position:relative;z-index:1;max-width:370px;font-size:14px;margin:0;color:#e5dfe9!important}.pro-offer-symbol{position:absolute;right:27px;top:32px;font-size:110px;color:#f956b0;filter:drop-shadow(0 4px 12px #0006);transform:rotate(-15deg);opacity:.65}.pro-offer-body{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:20px 24px}.pro-offer-body>p{width:100%;margin:0!important}.pro-store-price{font-size:22px;margin-right:auto}.product-preview-dialog.pro-offer-dialog{width:min(680px,calc(100vw - 24px));display:block;padding:0;max-height:90dvh;overflow:auto;background:var(--background-elevated)}.pro-offer-dialog .product-preview-info{width:100%;display:block;padding:0;background:transparent}.pro-offer-dialog .product-preview-copy{padding:24px;display:flex;flex-direction:column;gap:12px}.pro-offer-dialog .product-preview-copy>h2{display:none}.pro-offer-dialog .product-preview-copy>p{margin:0}.pro-offer-dialog .product-preview-copy>h3{font-size:13px;letter-spacing:1px;color:#e33894;order:-2}.pro-offer-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;order:-1}.pro-offer-benefits>div{display:flex;align-items:center;gap:10px;padding:13px 10px;border-radius:12px;background:var(--background-secondary)}.pro-offer-benefits i{font-size:22px;color:var(--accent);flex-shrink:0}.pro-offer-benefits b{font-size:12px;line-height:1.3}.pro-offer-dialog .product-preview-price{font-size:29px;color:#e33894;margin-top:8px}.pro-period{color:var(--text-secondary);font-size:12px}.pro-offer-dialog .product-preview-actions{display:flex;gap:8px}.pro-offer-dialog .product-preview-actions>.btn{flex:1;min-width:0;font-size:13px}.pro-offer-dialog .product-preview-close{z-index:5}.pro-offer-dialog .product-preview-error:empty{display:none}
@media(max-width:767px){#downloadDesktop{display:none!important}.jump-to-latest{margin:0 8px 6px;padding:8px;flex-wrap:wrap;gap:5px}.jump-to-latest .btn{width:100%}.friends-share-card{flex-wrap:wrap}.friends-share-card>.btn{width:100%}.pro-offer-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.pro-offer-hero{padding:30px 20px}.pro-offer-symbol{font-size:80px;right:12px;opacity:.4}.pro-offer-hero h2{font-size:28px}.pro-offer-dialog .product-preview-copy{padding:18px}.invite-link-line{flex-wrap:wrap}.invite-link-line button{width:100%}}
.vh-avatar[data-presence-device=mobile]>.presence.online,.vh-avatar[data-presence-device=mobile]>.mini-presence.online{border-radius:4px;width:9px!important;height:14px!important;background:#3ba55d!important}
.vh-avatar[data-presence-device=mobile]>.presence.online:after,.vh-avatar[data-presence-device=mobile]>.mini-presence.online:after{content:'';position:absolute;inset:2px 2px 4px;background:var(--status-bg);border-radius:1px}
.vh-avatar[data-presence-device=mobile]>.presence.online:before,.vh-avatar[data-presence-device=mobile]>.mini-presence.online:before{content:'';position:absolute;bottom:1px;left:4px;width:2px;height:2px;background:var(--status-bg);border-radius:50%}
.server-showcase.has-server-cover{height:160px!important;min-height:160px!important;max-height:160px!important}
.server-showcase.has-server-cover:after{display:block}
.server-showcase.has-server-cover .server-showcase-body{position:absolute;left:16px;right:16px;bottom:12px;margin:0!important}
.server-showcase.has-server-cover .server-showcase-body>.min-w-0{max-width:none;width:100%}
.server-showcase.has-server-cover #serverName{max-width:none}
.server-showcase.has-server-cover .glass-icon-btn{background:#0004!important;border-radius:7px;color:white!important}.server-showcase.has-server-cover .glass-icon-btn .bi{color:white!important;opacity:1}
.voice-occupants .channel-occupant-row{display:flex;flex-wrap:nowrap;gap:3px;align-items:center}.voice-occupants .channel-occupant{flex:1;width:auto;min-width:0}.voice-occupants .channel-occupant-copy>small{display:none}.voice-occupants .voice-media-indicators{padding:0;gap:4px;margin-left:auto}.voice-occupants .channel-occupant-disconnect{position:static;order:3;flex:0 0 18px;width:18px}
.channel-entry:has(.voice-channel-time)>.channel-item{padding-right:42px!important}.channel-entry:has(.voice-channel-time) .channel-live-count,.channel-entry:has(.voice-channel-time) .join-pill{display:none!important}

/* Source: community-v47.css */
/* Store cards show the product itself. Inventory controls live in the detail sheet. */
.vh-store-card{position:relative;overflow:hidden;padding:0 0 18px!important;border:1px solid var(--border)!important;border-radius:18px!important;background:var(--background-secondary)!important;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer}
.vh-store-card:hover,.vh-store-card:focus-visible{transform:translateY(-4px);border-color:var(--accent)!important;box-shadow:0 12px 30px #0002;outline:2px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:2px}
.vh-store-card:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 35%,#ffffff10 50%,transparent 65%);transform:translateX(-110%);transition:transform .5s}
.vh-store-card:hover:after{transform:translateX(110%)}
.vh-store-card>:is(h4,p,b,small){margin:8px 16px 0;display:block}.vh-store-card h4{font-size:15px}.vh-store-kind{color:var(--text-muted);font-size:11px}.vh-store-description{font-size:12px;max-height:3em;overflow:hidden}.vh-store-price{color:var(--accent);font-size:13px}
.vh-store-card>.product-preview-stage{min-height:190px;height:190px;width:100%;padding:12px;overflow:hidden;pointer-events:none;border-bottom:1px solid var(--border);background:radial-gradient(ellipse at 80% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--background-primary)}
.store-inline-preview .preview-profile{width:200px;min-width:200px;transform:scale(.7);transform-origin:center;flex-shrink:0}.store-inline-preview .preview-profile-copy{padding:12px}.store-inline-preview .preview-profile-copy h3{font-size:18px}.store-inline-preview .preview-example-button{display:none}.store-inline-preview .preview-members{width:100%;padding:16px}.store-inline-preview .preview-member{font-size:12px;min-height:34px}.store-inline-preview .preview-message{padding:8px;max-width:100%;box-shadow:none;background:none}.store-inline-preview .preview-message>img{max-width:130px;max-height:115px;object-fit:contain}.store-inline-preview .preview-message>small{display:none}.store-inline-preview .preview-message>b{font-size:12px}
.vh-store-art{min-height:190px;height:190px;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--accent) 16%,transparent),transparent)}.vh-store-nav{justify-content:flex-start!important;align-items:stretch!important;text-align:left!important}.vh-store-nav>button{justify-content:flex-start!important;text-align:left!important}
.has-member-nameplate{background-image:linear-gradient(90deg,var(--background-primary) 5%,transparent 65%),var(--member-nameplate)!important;background-position:center!important;background-size:cover!important;border-radius:9px;isolation:isolate}.has-member-nameplate:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
#miniProfileModal.mini-profile-popover{pointer-events:none!important;background:transparent!important}#miniProfileModal.mini-profile-popover .modal-dialog{position:fixed;margin:0!important;transform:none!important;pointer-events:auto;max-width:320px;overflow:auto;overscroll-behavior:contain}#miniProfileModal.mini-profile-popover .modal-content{border:1px solid var(--border-strong);border-radius:16px;box-shadow:0 16px 48px #0006;overflow:hidden;min-height:0!important}#miniProfileModal.mini-profile-popover .modal-body{padding:0 16px 16px!important;background-size:cover;position:relative;isolation:isolate;overflow:visible}
#miniProfileModal.mini-profile-popover .mini-profile-banner{position:relative!important;height:150px!important;margin:0 -16px 34px!important;padding:0!important;border:0;overflow:visible!important;background:none!important;border-radius:0!important}
#miniProfileModal.mini-profile-popover .mini-profile-cover{position:absolute!important;inset:0!important;height:150px!important;border-radius:0!important;background-color:var(--accent-soft);background-size:cover;background-position:center;overflow:visible!important;opacity:1!important}
.mini-banner-frame{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:fill!important;pointer-events:none;z-index:2;max-width:none!important}
#miniProfileModal.mini-profile-popover #miniProfileAvatar{position:absolute!important;left:16px;bottom:-24px!important;top:auto!important;margin:0!important;width:80px!important;height:80px!important;border:5px solid var(--background-primary);box-shadow:none;z-index:3}
.mini-profile-tools{position:absolute;right:9px;top:9px;display:flex;gap:5px;z-index:5}.mini-profile-tools button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#15151dba;color:white;font-size:14px}.mini-profile-tools button:hover{background:#15151d}
#miniProfileModal.mini-profile-popover #miniProfileName{font-size:20px;line-height:1.25;margin:0 0 4px;text-align:left}.mini-profile-identity{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px}#miniProfileModal.mini-profile-popover #miniProfileUsername{margin:0;color:var(--text-primary)}#miniProfileModal.mini-profile-popover #miniProfileBio{font-size:12px;line-height:1.4;white-space:pre-wrap;margin:14px 0 8px}.mini-profile-bio:empty{display:none}#miniProfileModal.mini-profile-popover .mini-profile-actions{display:grid;grid-template-columns:1fr;margin-top:12px}#miniProfileModal.mini-profile-popover .mini-profile-actions button{width:100%;font-size:13px;min-height:36px}#miniProfileModal.mini-profile-popover .mini-profile-effect{z-index:-1}#miniProfileModal.mini-profile-popover .mini-game-activity{margin:12px 0}#miniProfileModal.mini-profile-popover #miniProfilePresence{font-size:11px}.mini-mutual{display:block;margin-top:10px;color:var(--text-secondary)}
.tag-pack-dialog,.server-tag-dialog,.boost-purchase-dialog{border:1px solid var(--border-strong);border-radius:16px;padding:24px;background:var(--background-primary);color:var(--text-primary);width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 24px 100px #0007}.tag-pack-dialog::backdrop,.server-tag-dialog::backdrop,.boost-purchase-dialog::backdrop{background:#0009}.tag-pack-dialog header,.server-tag-dialog header,.boost-purchase-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.tag-pack-dialog h2,.server-tag-dialog h2,.boost-purchase-dialog h2{font-size:22px;margin:0}.tag-pack-dialog>p{color:var(--text-secondary);font-size:13px}
.tag-pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.tag-pack-card{padding:20px;background:var(--background-secondary);border:1px solid var(--border);border-radius:12px}.tag-pack-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding:20px 25px;min-height:150px;align-content:center}.tag-pack-icon{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}.tag-pack-card h3{font-size:16px}.tag-pack-card small{display:block;color:var(--text-secondary);margin:8px 0}.tag-pack-card>button{width:100%}.server-tag-icon-picker{display:flex;flex-wrap:wrap;gap:7px;max-height:210px;overflow:auto;padding:4px}.server-tag-icon-picker button{padding:6px}.server-tag-icon-picker button[aria-pressed=true]{outline:2px solid var(--accent);background:var(--accent-soft)}.server-tag-icon-picker button:disabled{opacity:.28}.server-tag-form{display:flex;flex-direction:column;gap:12px}.server-tag-dialog-body{display:grid;grid-template-columns:1fr 1fr;gap:24px}.server-tag-dialog-body section>button{display:block;width:100%;margin:12px 0}.tag-server-card{display:flex;align-items:center;justify-content:space-between;padding:20px 12px;background:var(--background-secondary);border:1px solid var(--border);border-radius:10px;gap:12px}.tag-member-examples{display:flex;flex-direction:column;justify-content:center;gap:20px}.tag-sample-member{display:flex;gap:10px;align-items:center}.tag-sample-member>div{display:flex;flex-direction:column;gap:2px}.tag-sample-member b{font-size:13px;display:flex;gap:7px}.tag-sample-member small{font-size:12px}.tag-sample-member.is-muted{opacity:.3}.my-server-tags{display:flex;flex-direction:column;gap:10px}.my-server-tags button{display:flex;gap:12px;justify-content:space-between;align-items:center}#serverName[role=button]{cursor:pointer}#serverName[role=button]:after{content:'⌄';padding-left:12px}
.boost-purchase-dialog{max-width:470px}.boost-purchase-dialog form{display:flex;flex-direction:column;gap:12px}.boost-purchase-dialog p{font-size:13px;line-height:1.6}.boost-purchase-total{font-size:26px;margin:6px 0}.boost-history{padding:20px 0}.boost-history h3{font-size:16px}.boost-history-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}.boost-history-row>div{display:flex;flex:1;flex-direction:column}.boost-history-row small{font-size:11px;color:var(--text-secondary)}.boost-history-row strong{font-size:13px;color:var(--accent)}.store-gift-receipt img{width:110px;height:110px;object-fit:contain}.store-gift-receipt>i{font-size:30px;color:var(--accent)}
@media(max-width:600px){.server-tag-dialog-body{grid-template-columns:1fr}.tag-member-examples{display:none}.tag-pack-grid{gap:10px}.tag-pack-card{padding:12px}.tag-pack-icons{gap:10px;padding:12px 0;min-height:105px}.tag-pack-icon{width:32px;height:32px}.tag-pack-dialog{padding:16px}.tag-pack-card h3{font-size:13px}.vh-store-card>.product-preview-stage{height:165px;min-height:165px}#miniProfileModal.mini-profile-popover .modal-dialog{width:min(320px,calc(100vw - 20px))!important}}
@media(prefers-reduced-motion:reduce){.vh-store-card,.vh-store-card:after{transition:none}.vh-store-card:hover{transform:none}}
#miniProfileModal.mini-profile-popover .modal-dialog{display:block!important;min-height:0!important;height:auto!important}#miniProfileModal.mini-profile-popover .modal-content{width:100%;margin:0!important}
.tag-pack-icons{width:220px;max-width:100%;margin:auto;padding:20px;gap:20px}
@media(max-width:480px){.vh-store-grid{grid-template-columns:minmax(0,1fr)!important}.store-inline-preview .preview-members{max-width:290px}.store-inline-preview .preview-member b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}}
.store-inline-preview .preview-profile{transform:none;width:180px;min-width:180px;height:158px;position:relative;overflow:hidden}.store-inline-preview .preview-profile-banner{height:70px;min-height:70px}.store-inline-preview .preview-profile-avatar{width:50px;height:50px;top:44px;left:12px}.store-inline-preview .preview-profile-copy{padding:28px 12px 10px}.store-inline-preview .preview-profile-copy h3{font-size:13px;margin:0}.store-inline-preview .preview-profile-copy small{font-size:10px}.store-inline-preview .preview-profile-copy>.community-tag{display:none}


/* Source: call-workspace.css */
.vh-app.call-workspace{grid-template-columns:72px 280px minmax(260px,1fr) minmax(300px,360px)!important;grid-template-rows:minmax(0,1fr)}
.call-workspace>#channelSidebar{grid-column:2;grid-row:1}.call-workspace>.server-rail{grid-column:1;grid-row:1}.call-workspace>#chatPanel{grid-column:4;grid-row:1;border-left:1px solid var(--border);width:100%;min-width:0}.call-workspace>.members-panel{display:none!important}
#appView.call-workspace>#callStage{position:relative!important;inset:auto!important;grid-column:3;grid-row:1;width:auto!important;height:auto!important;min-width:0;min-height:0;max-width:none!important;max-height:none!important;border:0;border-radius:0;z-index:5;padding:0;gap:0;box-shadow:none;resize:none;background:#050506;color:#f3f3f5;overflow:hidden}
.call-workspace.call-chat-hidden{grid-template-columns:72px 280px minmax(260px,1fr)!important}.call-workspace.call-chat-hidden>#chatPanel{display:none!important}
#callStage .call-stage-head{padding:12px 16px;background:#101012;flex-shrink:0;min-height:58px}#callStage .call-stage-head h2{font-size:15px;color:#eee;margin:0 0 3px}#callStage .call-kicker{display:none}#callStageStatus{color:#90909d;font-size:11px}.call-stage-head-actions>button{background:none;color:#bbb;border:0;width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:8px}.call-stage-head-actions>button>span{display:none}.call-stage-head-actions>button[aria-pressed=true]{color:white;background:#ffffff1a}
#callStage .call-stage-body{padding:12px 16px 0;min-height:0;flex:1}.call-workspace #callStageTiles.has-focus{display:grid!important;grid-template-columns:repeat(var(--preview-count),minmax(140px,200px))!important;grid-template-rows:minmax(140px,1fr) 112px!important;grid-auto-flow:column;justify-content:center;gap:10px;overflow:auto;padding-bottom:12px;width:100%}.call-workspace #callStageTiles.has-focus>.is-main{grid-column:1 / -1!important;grid-row:1!important;min-height:0;min-width:0;aspect-ratio:auto!important;border-radius:4px;background:black}.call-workspace #callStageTiles.has-focus>article:not(.is-main){grid-row:2!important;grid-column:auto!important;min-height:100px!important;max-height:112px;min-width:140px;aspect-ratio:auto!important;border-radius:8px}.call-workspace .is-screen .call-tile-media video{object-fit:contain!important}.call-workspace .is-main .call-tile-media video{object-fit:contain}.call-workspace #callStageTiles:not(.has-focus){grid-auto-rows:minmax(140px,1fr);padding-bottom:12px;align-content:center}.call-workspace .call-participant-tile{background:#232329;border-radius:10px;min-height:140px}.call-workspace .call-tile-avatar{width:70px;height:70px}.call-workspace .call-tile-bottom{font-size:11px;padding:20px 8px 8px}
#callStageControls{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:12px;border:0;margin:0;padding:14px 48px;background:#050506;flex-shrink:0;min-height:78px}#callStageControls .call-control-group{display:flex;border:1px solid #303036;border-radius:12px;overflow:hidden;background:#151518}#callStageControls button{width:46px!important;height:46px!important;min-width:0!important;background:#151518!important;color:#ececf1!important;border:0!important;border-radius:0!important;padding:0!important;font-size:20px;display:flex!important;align-items:center;justify-content:center}#callStageControls button:hover{background:#2c2c32!important}#callStageControls button span{display:none!important}#callStageControls button.call-device-chevron{width:22px!important;font-size:11px}#callStageControls #muteBtn.active{color:#ff505a!important;background:#392227!important}#callStageControls #leaveVoice{border-radius:12px!important;width:64px!important;background:#ff4145!important;color:white!important}#callStageControls #callStageFullscreen{position:absolute;right:8px;bottom:16px;width:32px!important;background:none!important;font-size:18px}#callStageControls .call-line-icon:before{display:none!important}#callStageControls .call-line-icon{font-size:0}#callStageControls svg{display:block;width:23px;height:23px}#callStageControls #screenBtn.active{background:#2b4f3c!important;color:#64efa2!important}
#callDevicesPanel{position:absolute;z-index:20;bottom:84px;left:16px;right:16px;background:#24242b;color:white;box-shadow:0 12px 40px #0008}#callDevicesPanel select{background:#15151a;color:white;border-color:#444}#callStagePeople{background:#17171d;color:#eee;max-width:200px}#callStagePeople button{color:#ddd}
#closeCallChat{display:none}.call-workspace #closeCallChat{display:grid;place-items:center;background:none;border:0;color:var(--text-secondary);width:28px;height:30px;flex-shrink:0}.call-workspace #chatPanel .chat-header{padding:8px 12px;gap:6px}.call-workspace #chatPanel .chat-header .chat-search{display:none}.call-workspace #chatPanel #messageSearch{max-width:90px}.call-workspace #chatPanel #messages{padding-inline:12px}.call-workspace #chatPanel .msg-content{overflow-wrap:anywhere}.call-workspace #chatPanel #composer{margin-inline:8px}.call-workspace #chatPanel .message-row{max-width:100%}
@media(max-width:1150px) and (min-width:761px){.vh-app.call-workspace{grid-template-columns:64px 220px minmax(230px,1fr) 290px!important}.vh-app.call-workspace.call-chat-hidden{grid-template-columns:64px 220px minmax(230px,1fr)!important}#callStageControls{padding-inline:12px;gap:6px}#callStageControls #callStageFullscreen{display:none}}
@media(max-width:760px){.vh-app.call-workspace,.vh-app.call-workspace.call-chat-hidden{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(230px,48%) minmax(0,1fr)}#appView.call-workspace>#callStage{grid-column:1!important;grid-row:1!important}.call-workspace>#chatPanel{display:flex!important;grid-column:1;grid-row:2;border-left:0;border-top:1px solid var(--border)}.vh-app.call-workspace.call-chat-hidden{grid-template-rows:minmax(0,1fr)!important}.call-workspace.call-chat-hidden>#chatPanel{display:none!important}.call-workspace .server-rail,.call-workspace>#channelSidebar{grid-row:1 / -1!important}.call-workspace #callStage .call-stage-body{padding:4px 8px 0}.call-workspace #callStageTiles.has-focus{grid-template-rows:minmax(100px,1fr) 64px!important;grid-template-columns:repeat(var(--preview-count),minmax(70px,95px))!important}.call-workspace #callStageTiles.has-focus>article:not(.is-main){min-height:58px!important;max-height:64px;min-width:70px}.call-workspace .call-tile-avatar{width:40px;height:40px}.call-workspace .call-tile-state{display:none}#callStageControls{min-height:60px;padding:8px;gap:6px}#callStageControls button{width:36px!important;height:38px!important}#callStageControls button.call-device-chevron{width:17px!important}#callStageControls #leaveVoice{width:46px!important}#callStageControls #callStageFullscreen{display:none}#callStage .call-stage-head{padding:8px 12px;min-height:44px}.call-workspace #callStageTiles:not(.has-focus){grid-auto-rows:minmax(80px,1fr)}.call-workspace #callStageTiles:not(.has-focus) .call-participant-tile{min-height:80px}}
#callStage:fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;display:flex!important;background:#050506}
.call-workspace #callStageTiles.has-focus{grid-template-columns:repeat(var(--preview-count),minmax(0,1fr))!important;justify-content:stretch}.call-workspace #callStageTiles.has-focus>.is-main{width:100%!important;max-width:none!important}.call-workspace #callStageTiles.has-focus>article:not(.is-main){width:100%;max-width:200px;min-width:0;justify-self:center}
#callStage #callStageControls{background:#050506!important}#appView.call-workspace>#callStage .call-stage-body{background:#050506!important}.call-workspace .call-participant-tile{background:#232329!important}
#callStage #callDevicesPanel:not(.d-none){display:grid!important;visibility:visible!important}#callStage #callDevicesPanel.d-none{display:none!important}
@media(max-width:760px){.call-workspace #callStageTiles.has-focus{grid-template-columns:repeat(var(--preview-count),minmax(0,1fr))!important}.call-workspace #callStageTiles.has-focus>article:not(.is-main){max-width:95px;min-width:0}}
@media(max-width:760px){#appView.vh-app.call-workspace{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(220px,48%) minmax(0,1fr)!important}#appView.vh-app.call-workspace>#chatPanel{grid-column:1!important;grid-row:2!important;height:auto!important;min-height:0!important;max-height:none!important}#appView.vh-app.call-workspace.call-chat-hidden{grid-template-rows:minmax(0,1fr)!important}}
@media(max-width:760px){#appView.vh-app.call-workspace>#chatPanel{display:flex!important;flex-direction:column!important;overflow:hidden}#appView.vh-app.call-workspace>#chatPanel>#messages{flex:1;min-height:0;overflow:auto}#appView.vh-app.call-workspace>#chatPanel>.chat-header,#appView.vh-app.call-workspace>#chatPanel>#composer{flex-shrink:0}#callStageControls #callStageFullscreen{display:none!important}}
#appView.call-workspace .call-participant-tile .call-tile-bottom{background:#15151c!important;color:#f3f3f5!important}
#appView.call-workspace .call-tile-actions>button{background:#ffffff12!important;color:#eee!important}#callStage .call-stage-head-actions #callChatBtn{display:grid!important}

/* Source: community-v48.css */
/* Shared semantic tokens keep new surfaces readable in every application theme. */
#serverBoostModal .modal-content,#serverBoostModal .modal-header,#serverBoostModal .modal-body,#serverBoostModal .modal-footer,
#inviteFriendsModal .modal-content,#myStickerPacksModal .modal-content{background:var(--background-elevated)!important;color:var(--text-primary)!important;border-color:var(--border)!important}
#serverBoostModal :is(h2,h3,h4,b,strong,label),#serverBoostModal .modal-title{color:var(--text-primary)!important}
#serverBoostModal :is(p,small,.text-muted){color:var(--text-secondary)!important}
#serverBoostModal :is(input,select),.information-editor textarea{background:var(--background-primary)!important;color:var(--text-primary)!important;border:1px solid var(--border-strong)!important}
#serverBoostModal hr{border-color:var(--border)!important;opacity:1}
#serverBoostModal .server-boost-level{background:var(--background-secondary)!important;border-color:var(--border-strong)!important}
.boost-credit-card{margin:18px 0;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--background-secondary)}
.boost-credit-card>div{font-weight:700}.boost-credit-card p{margin:8px 0;font-size:12px}.boost-credit-card form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.boost-credit-card input{width:90px}.boost-credit-card .text-danger:empty{display:none}
.vh-store-actions{display:none!important}
.vh-store-nav{align-content:start;justify-content:flex-start!important;text-align:left!important}.vh-store-nav button{justify-content:flex-start!important;text-align:left!important}
.preview-profile-banner{height:auto;aspect-ratio:3/1;min-height:0;background-size:cover}
.preview-profile-avatar{top:auto!important;left:auto!important;position:relative!important;margin:-32px 0 0 18px!important;width:76px;height:76px}
.preview-profile-copy{position:relative;padding:14px 18px 18px!important}.preview-profile-copy h3{overflow-wrap:anywhere}
.store-inline-preview .preview-profile{height:auto;min-height:142px;max-width:100%;width:190px;min-width:0;overflow:hidden}
.store-inline-preview .preview-profile-banner{height:auto!important;min-height:0!important;aspect-ratio:3/1}
.store-inline-preview .preview-profile-avatar{width:46px;height:46px;border-width:3px;margin:-20px 0 0 14px!important;top:auto!important;left:auto!important}
.store-inline-preview .preview-profile-copy{padding:10px 14px 13px!important}.store-inline-preview .preview-profile-copy h3{line-height:1.3;font-size:13px}
.store-inline-preview .preview-profile-copy small{display:block;line-height:1.5}.preview-banner-frame{inset:0;width:100%;height:100%}
.managed-profile-effect,.mini-profile-effect,.preview-profile-effect{opacity:.3!important;pointer-events:none!important;user-select:none;z-index:4;object-fit:fill!important}
#miniProfileModal.mini-profile-popover .mini-profile-effect{z-index:4!important}
#miniProfileModal.mini-profile-popover .mini-profile-banner{height:auto!important;aspect-ratio:3/1;margin-bottom:40px!important}
#miniProfileModal.mini-profile-popover .mini-profile-cover{height:100%!important}
.subscription-intro{padding:26px;border:1px solid var(--border);border-radius:18px;margin-bottom:24px;background:radial-gradient(ellipse at right top,var(--accent-soft),transparent 75%),var(--background-secondary)}
.subscription-intro h2{font-size:32px;margin:12px 0}.subscription-intro p{font-size:14px;color:var(--text-secondary);max-width:650px}
.pro-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-bottom:30px}.pro-plan-card{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--background-secondary)}
.pro-plan-card>i{font-size:28px;color:var(--accent)}.pro-plan-card h3{font-size:23px;margin:0}.pro-plan-card small,.pro-plan-card p{font-size:12px;color:var(--text-secondary);margin:0}.pro-plan-card strong{font-size:20px;margin-top:10px}.pro-plan-card .btn-primary{margin-top:auto}
.pro-benefit-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pro-benefit-list>div{display:flex;align-items:center;gap:12px;padding:16px;background:var(--background-secondary);border:1px solid var(--border);border-radius:12px;font-size:13px}.pro-benefit-list i{color:var(--accent);font-size:20px}
/* A normal-flow avatar prevents overlap with the name in compact product cards. */
.profile-surface-list:has(.profile-card48){padding:24px!important;background:var(--background-primary)}
.inapp-profile.profile-card48{display:grid!important;grid-template-columns:minmax(260px,.88fr) minmax(310px,1.12fr);position:relative;isolation:isolate;max-width:1050px;margin:auto!important;min-height:650px;padding:0!important;gap:0!important;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--background-elevated)!important}
.profile-card-identity{min-width:0;background:color-mix(in srgb,var(--profile-accent) 8%,var(--background-elevated));border-right:1px solid var(--border)}
.profile-card48 .inapp-profile-hero{border:0!important;background:none!important;overflow:visible!important;box-shadow:none!important}
.profile-card48 .inapp-profile-banner{display:block!important;height:auto!important;aspect-ratio:3/1;border-radius:0!important;margin:0!important}
.profile-card48 .inapp-profile-identity{display:flex!important;flex-direction:column;align-items:stretch;gap:16px!important;padding:0 26px 20px!important;margin:-32px 0 0!important}
.profile-card48 .inapp-profile-avatar{width:92px!important;height:92px!important;flex:0 0 92px!important;border:5px solid var(--background-elevated)!important;z-index:3}
.profile-card48 .inapp-profile-title-row{display:block!important}.profile-card48 .inapp-profile-title-row h2{font-size:24px}.profile-card48 .profile-view-kicker{display:none}
.profile-card48 .inapp-profile-status{margin-top:8px}.profile-card48 .inapp-profile-actions{margin-top:18px;gap:7px}.profile-card48 .inapp-profile-actions button{font-size:12px;padding:8px 10px}
.profile-card48 .inapp-profile-copy{min-width:0;width:100%}.profile-card-about{padding:0 26px 26px;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.profile-card-about p{white-space:pre-wrap}.profile-card-about>small{color:var(--text-secondary);font-size:11px}
.profile-card-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}.profile-card-badges span{padding:4px 8px;border-radius:20px;border:1px solid var(--border);font-size:11px}.profile-card-badges i{margin-right:5px}
.profile-card-activity{min-width:0;padding:24px 20px;max-height:850px;overflow:auto}.profile-card48 .inapp-profile-tabs{display:flex;flex-wrap:wrap;padding:0 32px 12px 0!important;margin:0!important;gap:8px!important;border:0!important}.profile-card48 .inapp-profile-tabs button{font-size:12px;padding:8px!important;white-space:normal}
.profile-card48 .inapp-profile-tab-surface{padding:18px 0!important;margin:0!important;max-width:none}.profile-card48 .profile-tab-grid{grid-template-columns:1fr!important}
.profile-card-close{position:absolute;right:14px;top:14px;z-index:6;width:30px;height:30px;border-radius:9px;background:var(--surface-hover);color:var(--text-primary);border:1px solid var(--border);display:grid;place-items:center}
.profile-card48 .activity-current,.profile-card48 .activity-game-row{background:color-mix(in srgb,var(--profile-accent) 5%,var(--background-secondary))}
.profile-card48 .inapp-profile-footer{padding:16px 26px;font-size:11px}
#composer:has(.jump-to-latest:not([hidden])){flex-wrap:wrap!important}.jump-to-latest{flex:0 0 100%;width:100%;grid-column:1/-1;order:-5;margin:0 0 8px!important;box-sizing:border-box;background:var(--background-elevated)!important;color:var(--text-primary)!important}
.channel-entry:has(.voice-channel-time)>.channel-item{padding-right:38px!important;gap:7px!important;min-width:0}.channel-item .channel-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.voice-channel-time{font-size:10px;flex:0 0 auto!important;margin-left:auto!important;min-width:49px;text-align:right;font-variant-numeric:tabular-nums}.channel-entry:has(.voice-channel-time)>.channel-favorite-btn{right:8px!important;top:10px!important;width:22px!important;height:24px!important}
#meStatusDot{width:14px!important;height:14px!important;position:absolute;right:-1px;bottom:-1px;top:auto;left:auto;border:3px solid var(--background-elevated);border-radius:50%;z-index:5}
.vh-media-picker{width:min(508px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;height:min(480px,calc(100dvh - 110px))!important;max-height:calc(100dvh - 110px)!important;display:flex!important;flex-direction:column;padding:0!important;overflow:hidden!important;background:var(--background-elevated)!important;color:var(--text-primary)!important;border:1px solid var(--border-strong)!important;border-radius:14px!important;box-shadow:0 18px 50px #0004}
.vh-media-picker.d-none{display:none!important}.vh-media-header{display:flex;align-items:center;padding:12px 12px 6px;background:none!important}.vh-media-tabs{display:flex;gap:8px;flex:1}.vh-media-tabs button{font-size:13px;border:0!important;background:transparent!important;color:var(--text-secondary)!important;border-radius:8px;padding:8px 12px}.vh-media-tabs button.active{background:var(--surface-hover)!important;color:var(--text-primary)!important;font-weight:700}
.vh-media-toolbar{display:flex;gap:10px;padding:6px 12px 12px;border-bottom:1px solid var(--border)}.vh-media-toolbar input{min-width:0;flex:1;font-size:12px;background:var(--background-primary)!important;color:var(--text-primary)!important}.vh-media-toolbar button{font-size:12px;white-space:nowrap}
.vh-media-body{display:flex;flex:1;min-height:0;overflow:hidden}.vh-media-rail{flex:0 0 46px;overflow:auto;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:6px;padding:8px 4px}.vh-media-rail button{width:34px;height:34px;flex:0 0 34px;padding:6px;border:0;border-radius:8px;background:transparent;color:var(--text-primary)}.vh-media-rail button:hover{background:var(--surface-hover)}.vh-media-rail img{width:100%;height:100%;object-fit:contain}
.vh-media-scroll{flex:1;min-width:0;overflow:auto;overscroll-behavior:contain;padding:6px 10px 14px}.vh-media-group summary{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;padding:10px 0;list-style:none}.vh-media-group summary i{font-size:9px}.vh-media-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.vh-media-item{min-width:0;aspect-ratio:1;border:0!important;padding:4px;position:relative;border-radius:8px;background:transparent!important;color:var(--text-primary);display:grid;place-items:center}.vh-media-item:hover,.vh-media-item:focus-visible{background:var(--surface-hover)!important;outline:1px solid var(--border-strong)}.vh-media-item img{width:100%;height:100%;object-fit:contain}.vh-media-emoji{font-size:27px;line-height:1.2}.vh-media-lock{position:absolute;bottom:3px;right:3px;font-size:13px;text-shadow:0 1px 3px #000;background:var(--background-secondary);border-radius:4px;padding:2px}.vh-media-item.is-locked img{opacity:.5}
.vh-media-picker[data-managed-tab=sticker] .vh-media-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.vh-media-picker[data-managed-tab=gif] .vh-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vh-media-picker[data-managed-tab=gif] .vh-media-item{aspect-ratio:1.5}.vh-media-picker[data-managed-tab=gif] .vh-media-item img{border-radius:7px;object-fit:cover}
.vh-media-footer{display:flex;align-items:center;gap:10px;flex:0 0 48px;padding:8px 12px;border-top:1px solid var(--border);font-size:11px;color:var(--text-secondary);overflow:hidden}.vh-media-preview{width:30px;height:30px;font-size:25px;object-fit:contain}.vh-media-footer>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}.vh-media-footer b{color:var(--text-primary)}.vh-media-empty{font-size:12px;padding:16px;color:var(--text-secondary)}
.information-editor{width:min(1050px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--border-strong);border-radius:16px;background:var(--background-elevated);color:var(--text-primary);overflow:auto}.information-editor::backdrop{background:#0009}.information-editor>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.information-editor h2{font-size:20px;margin:0}.information-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 14px}.information-toolbar button{font-size:12px;padding:6px 10px}.information-editor-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.information-editor-columns h3{font-size:12px;color:var(--text-secondary);margin:0 0 12px}.information-editor textarea{resize:vertical;width:100%;min-height:350px;line-height:1.6;font-size:14px;font-family:ui-monospace,Consolas,monospace;padding:16px}.information-preview{max-height:520px;overflow:auto;background:var(--background-primary);border:1px solid var(--border);border-radius:12px;padding:16px}.information-editor footer{display:flex;gap:12px;align-items:center;margin-top:18px}.information-editor footer small{margin-right:auto;color:var(--text-secondary)}
.information-markup{font-size:14px;line-height:1.65;overflow-wrap:anywhere}.information-markup :is(h2,h3,h4){margin:16px 0 10px;color:var(--text-primary)}.information-markup p{white-space:pre-wrap;margin:0 0 8px}.information-markup blockquote{margin:12px 0;border-left:3px solid var(--accent);padding:8px 16px;background:var(--accent-soft)}.information-markup pre{padding:14px;white-space:pre-wrap;background:var(--background-secondary);border:1px solid var(--border);border-radius:9px}.information-markup code{color:var(--accent-strong)}
.community-link-card{width:min(300px,100%);border:1px solid var(--border-strong);border-radius:16px;overflow:hidden;background:var(--background-elevated);margin:12px 0;position:relative}.community-link-banner{aspect-ratio:3/1;background:linear-gradient(120deg,var(--accent-soft),var(--background-secondary));background-size:cover;background-position:center}.community-link-avatar{position:relative;display:grid;place-items:center;width:56px;height:56px;margin:-26px 0 0 16px;border:4px solid var(--background-elevated);border-radius:15px;background:var(--background-secondary);font-size:20px}.community-link-avatar>img{width:100%;height:100%;object-fit:cover;border-radius:11px}.community-link-copy{padding:14px 16px 16px}.community-link-copy h3{font-size:17px;margin:0 0 6px}.community-link-copy>small{display:block;color:var(--text-secondary);font-size:11px;margin:4px 0}.community-link-copy>p{font-size:12px;color:var(--text-secondary);margin:12px 0}.community-link-copy>button{width:100%;margin-top:14px;font-size:12px}.community-link-copy>b{display:block;font-size:12px;margin:8px 0}
.referral-link{display:flex;gap:10px;margin:18px 0}.reward-progress-card{display:grid;grid-template-columns:1fr auto;gap:12px;padding:18px;border:1px solid var(--border);border-radius:14px;margin:12px 0;background:var(--background-secondary)}.reward-progress-card progress{width:100%;grid-column:1/-1;accent-color:var(--accent)}.reward-progress-card small{color:var(--text-secondary)}
@media(max-width:950px){.inapp-profile.profile-card48{grid-template-columns:1fr;min-height:0;max-width:600px}.profile-card-identity{border-right:0;border-bottom:1px solid var(--border)}.profile-card48 .inapp-profile-banner{aspect-ratio:3/1}.profile-card-activity{max-height:none}.profile-card-close{background:var(--background-elevated)}.pro-benefit-list{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.information-editor{padding:16px}.information-editor-columns{grid-template-columns:1fr}.information-editor textarea{min-height:230px}.information-editor footer{flex-wrap:wrap}.information-editor footer small{width:100%}.profile-surface-list:has(.profile-card48){padding:10px!important}.profile-card48 .inapp-profile-identity{padding:0 20px 18px!important}.profile-card-about{padding:0 20px 20px}.profile-card-activity{padding:18px 16px}.pro-benefit-list{grid-template-columns:1fr}.vh-media-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.vh-media-toolbar button{padding:8px;font-size:11px}.referral-link{flex-wrap:wrap}.subscription-intro{padding:20px}.pro-plan-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.managed-profile-effect,.mini-profile-effect,.preview-profile-effect{display:none!important}}

#messages.profile-surface-list:has(.profile-card48){padding:22px!important}
#messages .profile-card48 .inapp-profile-hero{display:block!important;min-height:0!important;padding:0!important;margin:0!important;position:relative}
#messages .profile-card48 .inapp-profile-hero:before{display:none!important}
#messages .profile-card48 .inapp-profile-banner{position:relative!important;inset:auto!important;z-index:auto!important;height:auto!important;aspect-ratio:3/1;width:100%}
#messages .profile-card48 .inapp-profile-identity{align-items:stretch!important;flex-wrap:nowrap!important}
#messages .profile-card48 .inapp-profile-avatar{align-self:flex-start!important;position:relative!important;inset:auto!important;transform:none!important;flex-shrink:0}
#messages .profile-card48 .inapp-profile-actions{align-self:stretch;justify-content:flex-start;margin-top:0!important}
#messages .profile-card48 .inapp-profile-hero .profile-back{display:none}
@media(max-width:600px){#messages.profile-surface-list:has(.profile-card48){padding:8px!important}}

.channel-entry:has(.voice-channel-time)>.channel-item{padding-right:72px!important}
.channel-entry:has(.voice-channel-time)>.channel-favorite-btn{right:36px!important}
.channel-entry:has(.voice-channel-time)>.channel-config-btn{right:8px!important;top:10px!important;width:22px!important;height:24px!important}
#meStatusDot{width:9px!important;height:9px!important}

/* Source: community-v49.css */
/* Profile surfaces: consistent spacing, compact navigation and visible artwork edges. */
#messages .profile-card49{border:1px solid var(--border)!important;border-radius:22px!important;min-height:620px;background:var(--background-elevated)!important;animation:profile-enter49 .24s ease-out}
#messages .profile-card49 .profile-card-identity{background:linear-gradient(160deg,color-mix(in srgb,var(--profile-accent) 10%,var(--background-elevated)),var(--background-elevated));display:flex;flex-direction:column}
#messages .profile-card49 .inapp-profile-banner{border-radius:21px 0 0 0!important;isolation:isolate}
#messages .profile-card49 .inapp-profile-identity{gap:18px!important;padding:0 24px 24px!important;margin-top:-34px!important}
#messages .profile-card49 .inapp-profile-avatar{width:94px!important;height:94px!important;flex-basis:94px!important;background:var(--background-elevated)}
#messages .profile-card49 .inapp-profile-title-row h2{font-size:25px;letter-spacing:-.5px;line-height:1.25;display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 6px}
#messages .profile-card49 .inapp-profile-handle{color:var(--text-secondary);font-size:13px}
#messages .profile-card49 .inapp-profile-status{display:inline-flex;padding:0;background:none;border:0;font-size:12px;margin-top:12px}
#messages .profile-card49 .inapp-profile-actions{display:flex!important;gap:8px!important;flex-wrap:wrap;width:100%}
#messages .profile-card49 .inapp-profile-actions>button{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;height:40px;min-height:40px;padding:0 14px!important;border-radius:10px;font-size:12px;line-height:1.25;position:static!important}
#messages .profile-card49 .inapp-profile-actions>.profile-more{width:40px;flex:0 0 40px;padding:0!important}
#messages .profile-card49 .profile-card-about{padding:0 24px 24px;line-height:1.65}.profile-section-label{text-transform:uppercase;letter-spacing:.07em;font-weight:750;font-size:10px;color:var(--text-secondary);margin:4px 0 12px}
#messages .profile-card49 .inapp-profile-footer{margin-top:auto;border-top:1px solid var(--border);padding:18px 24px;display:grid;gap:12px;background:none}
#messages .profile-card49 .inapp-profile-footer button{justify-self:start;border:0;background:none;color:var(--accent);padding:0;font-weight:600}
#messages .profile-card49 .profile-card-activity{padding:24px;scrollbar-width:thin}
#messages .profile-card49 .inapp-profile-tabs{display:flex!important;flex-wrap:wrap!important;gap:3px!important;padding:0 28px 12px 0!important;background:none!important;border-radius:0!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important;min-height:0!important}
#messages .profile-card49 .inapp-profile-tabs>.profile-tab49{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;padding:9px 10px!important;border:0!important;border-radius:9px!important;background:none!important;color:var(--text-secondary)!important;font-size:12px!important;font-weight:650;flex:0 1 auto!important;min-width:0!important;height:36px!important;white-space:nowrap}
#messages .profile-card49 .inapp-profile-tabs>.active{background:var(--accent-soft)!important;color:var(--accent)!important}
#messages .profile-card49 .inapp-profile-tabs>button:hover{background:var(--surface-hover)!important}
#messages .profile-card49 .activity-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin:6px 0 12px}
#messages .profile-card49 .activity-empty{background:var(--background-secondary);border:1px solid var(--border);padding:20px;border-radius:13px;line-height:1.6;font-size:12px;margin-bottom:26px}
#messages .profile-card49 .activity-game-row{border:1px solid var(--border);border-radius:14px;margin-bottom:10px;background:var(--background-secondary);transition:background .16s,border-color .16s}
#messages .profile-card49 .activity-game-row:hover{border-color:var(--border-strong);background:var(--surface-hover)}
#messages .profile-card49 .activity-game-row summary{padding:14px;gap:14px}.profile-card49 .activity-game-art{border-radius:12px;overflow:hidden}.profile-card49 .activity-game-copy>b{font-size:13px}.profile-card49 .activity-game-copy small{font-size:11px;margin-top:6px}
#miniProfileModal.mini-profile49 .modal-dialog{max-width:340px!important;scrollbar-width:none;border-radius:18px}
#miniProfileModal.mini-profile49 .modal-content{box-shadow:none!important;border:1px solid var(--border-strong)!important;border-radius:18px!important;overflow:hidden!important;background:var(--background-elevated)!important}
#miniProfileModal.mini-profile49 .modal-body{padding:0 18px 18px!important;background-color:var(--background-elevated)!important;color:var(--text-primary);min-height:260px}
#miniProfileModal.mini-profile49 .mini-profile-banner{margin:0 -18px 43px!important;aspect-ratio:3/1;border-radius:0!important}
#miniProfileModal.mini-profile49 .mini-banner-frame{object-fit:fill!important;inset:0!important;max-width:100%!important;border-radius:16px 16px 0 0}
#miniProfileModal.mini-profile49 #miniProfileAvatar{left:18px!important;bottom:-28px!important;border:5px solid var(--background-elevated)!important;width:82px!important;height:82px!important;overflow:visible!important}
#miniProfileModal.mini-profile49 #miniProfileName{font-size:21px;letter-spacing:-.35px;line-height:1.3;display:flex;align-items:center;flex-wrap:wrap;gap:5px}
#miniProfileModal.mini-profile49 .mini-profile-identity{font-size:12px;gap:4px;color:var(--text-secondary)}
#miniProfileModal.mini-profile49 .mini-profile-tools{gap:5px;right:10px;top:10px}
#miniProfileModal.mini-profile49 .mini-profile-tools button{position:static!important;display:grid!important;place-items:center;width:30px!important;height:30px!important;min-width:30px;padding:0!important;border-radius:10px!important;background:#14141dbf!important;color:white!important;border:1px solid #ffffff20!important;box-shadow:none!important;line-height:1}
#miniProfileModal.mini-profile49 #miniProfileActions{position:static!important;display:flex!important;flex-direction:column!important;gap:8px!important;margin:16px 0 0!important;padding:14px 0 0!important;border-top:1px solid var(--border);width:100%;transform:none!important}
#miniProfileModal.mini-profile49 #miniProfileActions>button{position:static!important;display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%!important;height:40px!important;min-height:40px!important;margin:0!important;padding:0 12px!important;border-radius:10px!important;line-height:1.2!important;font-weight:650;font-size:12px!important;transform:none!important;white-space:normal}
#miniProfileModal.mini-profile49 .mini-game-activity{border:1px solid var(--border);border-radius:12px;background:var(--background-secondary);padding:13px}
#miniProfileModal.mini-profile49 #miniProfilePresence{margin:12px 0 0;line-height:1.5}.profile-enter49{animation:profile-enter49 .2s ease-out}
.has-member-nameplate{background-image:linear-gradient(90deg,var(--background-primary) 0%,color-mix(in srgb,var(--background-primary) 60%,transparent) 45%,transparent 85%),var(--member-nameplate)!important;background-size:cover!important;background-position:center right!important}
@keyframes profile-enter49{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
/* Development modal has distinct surfaces rather than a single long form. */
#serverBoostModal .modal-dialog{width:min(900px,calc(100vw - 24px));max-width:900px;margin:24px auto}
#serverBoostModal .modal-header{padding:22px 26px!important;border-bottom:1px solid var(--border);gap:16px}
#serverBoostModal .modal-body{padding:24px!important;overflow:auto;scrollbar-width:thin}
#serverBoostContent.boost-layout49{display:block!important;padding:0!important}
.boost-layout49 .server-boost-summary{display:grid!important;grid-template-columns:54px minmax(0,1fr) auto!important;align-items:center;gap:16px!important;margin:0!important;padding:22px!important;border:1px solid var(--border)!important;border-radius:16px!important;background:linear-gradient(120deg,var(--accent-soft),var(--background-elevated))!important}
.boost-layout49 .server-boost-summary h3{font-size:20px;margin:4px 0 8px}.boost-layout49 .server-boost-summary p{margin:0;font-size:12px}.boost-layout49 .server-boost-summary-icon{width:50px;height:50px;border-radius:15px;font-size:23px}.boost-layout49 .server-boost-action{min-height:40px;padding:9px 18px!important;border-radius:10px}
.boost-tabs49{display:flex;gap:6px;margin:22px 0;padding:5px;border-radius:12px;background:var(--background-secondary);border:1px solid var(--border)}.boost-tabs49 button{flex:1;min-width:0;border:0!important;background:transparent;color:var(--text-secondary);padding:10px 12px;border-radius:8px;font-weight:650;font-size:12px}.boost-tabs49 button[aria-current=true]{background:var(--background-elevated);color:var(--accent);box-shadow:0 2px 5px #00000009}
.boost-pane49 .boost-credit-card{margin:0 0 20px;padding:18px 20px;border-radius:13px}.boost-pane49 .boost-credit-card form{gap:10px}.boost-pane49 .boost-credit-card form p:empty{display:none}
.boost-pane49 .server-boost-levels{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important;margin:0!important}.boost-pane49 .server-boost-level{padding:20px!important;border-radius:14px!important;min-width:0}.boost-pane49 .server-boost-level h4{font-size:15px}.boost-pane49 .server-boost-level li{font-size:12px;line-height:1.5;margin-top:9px}
.boost-pane49 .server-tag-settings,.boost-pane49 .boost-history{margin:0!important;padding:0!important;border:0!important}.boost-pane49 h3{font-size:18px;margin:0 0 10px}.boost-pane49 p{font-size:13px;line-height:1.6}
.boost-pane49 .server-tag-form{grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--background-secondary)}.boost-pane49 .server-tag-form input{grid-column:1/-1;max-width:280px}.boost-pane49 .server-tag-icon-picker{grid-column:1/-1;max-height:230px;overflow:auto;padding:10px;gap:8px;grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}.boost-pane49 .server-tag-icon-picker button{width:40px;height:40px;border-radius:8px}.boost-pane49 .boost-history-row{padding:14px;margin-bottom:8px;border:1px solid var(--border);border-radius:12px;background:var(--background-secondary)}
@media(max-width:700px){#messages .profile-card49 .profile-card-activity{padding:18px}#messages .profile-card49 .inapp-profile-tabs{padding-right:0!important}#messages .profile-card49 .inapp-profile-banner{border-radius:21px 21px 0 0!important}#serverBoostModal .modal-header,#serverBoostModal .modal-body{padding:16px!important}.boost-layout49 .server-boost-summary{grid-template-columns:44px minmax(0,1fr)!important;padding:16px!important}.boost-layout49 .server-boost-action{grid-column:1/-1}.boost-pane49 .server-boost-levels{grid-template-columns:1fr}.boost-tabs49{gap:0}.boost-tabs49 button{font-size:11px;padding:10px 6px}.boost-pane49 .server-tag-form{grid-template-columns:1fr}.boost-pane49 .server-tag-form>*{grid-column:1!important}}
@media(prefers-reduced-motion:reduce){#messages .profile-card49,.profile-enter49{animation:none!important}}

.boost-pane49 .server-banner-settings{margin:0;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--background-secondary)}
@media(max-width:600px){.boost-tabs49{display:grid;grid-template-columns:1fr 1fr;gap:4px}}

/* Source: call-gallery.css */
#callStage.call-gallery49{background:#080809!important;color:#f5f5f7}
#callStage.call-gallery49 .call-brand-logo,#callStage.call-gallery49 .call-kicker{display:none!important}
#callStage.call-gallery49 .call-stage-head{padding:16px 20px!important;min-height:58px;border:0;background:#080809!important}
#callStage.call-gallery49 .call-heading49{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px!important;min-width:0}
#callStage #callStageHandle>.call-heading49{display:flex!important;grid-template-columns:none!important;grid-template-rows:none!important;flex-direction:row!important;align-items:center!important}
#callStage.call-gallery49 #callStageTitle{font-size:14px!important;margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:700;color:#f5f5f7}
.call-heading-icon49{font-size:21px;color:white}.call-connection49{width:9px;height:9px;flex:0 0 9px;background:#e2ad45;border-radius:50%}#callStage[data-connection=connected] .call-connection49{background:#3ac575}
#callStage.call-gallery49 #callStageStatus{font-size:12px!important;color:#4abf7d!important;white-space:nowrap}
#appView.call-workspace>#callStage.call-gallery49 .call-stage-body{background:#080809!important;padding:12px 22px!important;justify-content:center;overflow:hidden}
#callStage.call-gallery49 #callStageTiles:not(.has-focus){display:grid!important;grid-template-columns:repeat(var(--call-columns49,2),minmax(0,1fr))!important;grid-auto-flow:row!important;grid-auto-rows:max-content!important;align-content:center!important;align-items:stretch!important;gap:8px!important;width:100%;max-width:1100px;margin:0 auto;padding:0!important;scrollbar-width:thin}
#callStage.call-gallery49 #callStageTiles:not(.has-focus){align-content:safe center!important}
#appView #callStage.call-gallery49 .call-participant-tile{background:var(--call-tile-color,#29292e)!important;border:2px solid transparent!important;border-radius:10px!important;aspect-ratio:16/9;min-height:0!important;overflow:hidden}
#appView #callStage.call-gallery49 .call-participant-tile.is-speaking{border-color:#55c783!important;box-shadow:none!important}
#callStage.call-gallery49 .call-tile-avatar{width:clamp(46px,6vw,84px)!important;height:clamp(46px,6vw,84px)!important;box-shadow:none!important}
#appView #callStage.call-gallery49 .call-tile-bottom{position:absolute!important;inset:auto 0 0!important;padding:10px!important;background:transparent!important;gap:6px!important;min-height:42px;pointer-events:none}
#appView #callStage.call-gallery49 .call-tile-bottom{border:0!important;color:white!important}
#callStage.call-gallery49 .call-tile-name{flex:0 1 auto!important;max-width:calc(100% - 86px);padding:6px 8px!important;border-radius:7px;background:#111115a6;color:white;font-size:12px;font-weight:650;line-height:18px}
#callStage.call-gallery49 .call-tile-state{display:flex!important;background:#111115a6;border-radius:7px;font-size:12px;color:#eee;padding:6px;order:-1}.call-gallery49 .call-tile-state:empty{display:none!important}
#callStage.call-gallery49 .call-tile-state:empty{display:none!important}
#callStage.call-gallery49 .call-tile-menu{margin-left:auto;pointer-events:auto;border-radius:8px;background:#111115a6!important;opacity:0;transition:opacity .15s}
#callStage.call-gallery49 .call-participant-tile:hover .call-tile-menu,#callStage.call-gallery49 .call-participant-tile:focus-within .call-tile-menu{opacity:1}
#callStage.call-gallery49 .call-tile-fullscreen{pointer-events:auto;background:#111115a6!important}.tile-screen-icon49{margin-right:6px}
.call-live49{position:absolute;right:8px;top:8px;color:white;background:#d94250;font-size:9px;font-weight:800;border-radius:5px;padding:3px 6px;line-height:1;z-index:2}
#callStage.call-gallery49 .call-rtt{position:absolute;right:82px;top:7px;padding:3px 5px;background:#151518a6;border-radius:5px;color:#6fc58b;line-height:1;font-size:10px}
#appView #callStage.call-gallery49 .call-rtt{position:fixed!important;inset:auto!important;display:none!important}
#appView #callStage.call-gallery49 .call-tile-name{position:static!important}
#appView #callStage.call-gallery49 .call-participant-tile>.call-quality49{position:absolute;top:7px;right:83px;display:flex;gap:4px;align-items:center;font-size:10px;color:#62c783;background:#13131988;border-radius:5px;padding:3px 5px;z-index:2}
#callStage.call-gallery49 .is-screen video{object-fit:contain!important;background:#070708}
.stream-stopped49 .call-tile-media{filter:blur(3px);opacity:.25}.watch-stream49{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #ffffff20;border-radius:24px;background:#24242b;color:white;padding:12px 18px;font-size:12px;font-weight:700;white-space:nowrap}.watch-stream49:hover{background:#353540}
#callStage.call-gallery49 #callStageControls{background:#080809!important;padding-top:16px;padding-bottom:18px}
.call-mini-player49{position:fixed;right:24px;bottom:24px;width:min(380px,calc(100vw - 24px));z-index:2050;background:#141419;color:white;border:1px solid #ffffff24;border-radius:12px;overflow:hidden;box-shadow:0 12px 40px #0005}.call-mini-player49 header{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:move;touch-action:none;font-size:12px}.call-mini-player49 header span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.call-mini-player49 header button{display:grid;place-items:center;width:25px;height:25px;padding:0;border:0;background:transparent;color:#fff;border-radius:6px}.call-mini-player49 video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.stream-volume49{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 10px;color:var(--text-primary);font-size:12px}.stream-volume49 input{grid-column:1/-1;width:100%;accent-color:var(--accent)}.stream-volume49 output{color:var(--text-secondary)}
.participant-menu49{min-width:245px!important;padding:9px!important;border-radius:12px!important;background:var(--background-elevated)!important;color:var(--text-primary)!important}.participant-menu49 button{display:flex;align-items:center;gap:10px;padding:10px!important;font-size:12px!important}.participant-menu49 button:hover{background:var(--surface-hover)}.participant-menu49 label{border-bottom:1px solid var(--border);margin:0 4px 5px;padding:9px 5px 15px!important;font-size:12px!important}.participant-menu49 input{accent-color:var(--accent);width:100%}
@media(hover:none){#callStage.call-gallery49 .call-tile-menu{opacity:1}}
@media(max-width:760px){#callStage.call-gallery49 .call-stage-head{padding:10px 12px!important;min-height:44px}.call-heading-icon49{font-size:17px}#callStage.call-gallery49 #callStageTitle{font-size:12px!important}#appView.call-workspace>#callStage.call-gallery49 .call-stage-body{padding:4px 8px!important}#callStage.call-gallery49 #callStageTiles:not(.has-focus){align-content:start!important}#callStage.call-gallery49 .call-tile-bottom{padding:5px!important}#callStage.call-gallery49 .call-tile-name{font-size:10px;padding:4px 6px!important}#callStage.call-gallery49 .call-tile-state{padding:4px}#callStage.call-gallery49 #callStageControls{padding:8px!important}}
@media(prefers-reduced-motion:reduce){#callStage.call-gallery49 .call-tile-menu{transition:none}}

/* Source: community-v50.css */
/* A bounded identity surface keeps effects away from activity and navigation. */
#messages .profile-card49{grid-template-columns:minmax(290px,.9fr) minmax(0,1.1fr)!important;max-width:1080px!important;border-radius:24px!important;box-shadow:0 14px 50px #00000012!important;min-height:min(700px,calc(100dvh - 120px))}
#messages .profile-card49 .profile-card-identity{position:relative;isolation:isolate;overflow:hidden;border-radius:23px 0 0 23px;border-right:1px solid var(--border);background:linear-gradient(155deg,color-mix(in srgb,var(--profile-accent) 14%,var(--background-elevated)),var(--background-elevated) 72%)}
#messages .profile-card49 .profile-card-identity>.managed-profile-effect{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;opacity:.25!important;pointer-events:none!important;user-select:none;z-index:3!important;border-radius:inherit}
#messages .profile-card49 .inapp-profile-hero{background:none!important;border:0!important;overflow:visible!important}
#messages .profile-card49 .inapp-profile-banner{height:172px!important;border-radius:23px 0 0 0!important}
#messages .profile-card49 .inapp-profile-identity{padding:0 28px 22px!important;gap:16px!important;margin-top:-36px!important}
#messages .profile-card49 .inapp-profile-avatar{width:100px!important;height:100px!important;flex-basis:100px!important;border:6px solid var(--background-elevated)!important}
#messages .profile-card49 .inapp-profile-copy{min-width:0;width:100%}
#messages .profile-card49 .inapp-profile-title-row h2{font-size:27px;letter-spacing:-.7px;overflow-wrap:anywhere}
#messages .profile-card49 .inapp-profile-actions{margin-top:20px!important}
#messages .profile-card49 .inapp-profile-actions>button{height:38px!important;min-height:38px!important;font-size:12px;border-radius:11px}
#messages .profile-card49 .profile-card-about{margin:0 20px 20px;padding:18px!important;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--background-elevated) 75%,transparent);font-size:13px}
#messages .profile-card49 .profile-card-about p{margin:0 0 16px;white-space:pre-wrap;overflow-wrap:anywhere}
#messages .profile-card49 .profile-section-label{margin:0 0 12px;color:var(--text-secondary);font-size:10px}
#messages .profile-card49 .profile-card-about small{display:block;color:var(--text-secondary);font-size:11px}
#messages .profile-card49 .profile-card-activity{background:var(--background-primary);padding:26px!important;min-width:0}
#messages .profile-card49 .inapp-profile-tabs{margin-bottom:24px!important;gap:4px!important;padding-right:26px!important}
#messages .profile-card49 .inapp-profile-tabs>.profile-tab49{height:auto!important;min-height:34px;font-size:11px!important;padding:8px!important}
#messages .profile-card49 .activity-game-row{background:var(--background-elevated);border-radius:15px;margin-bottom:12px}
#messages .profile-card49 .activity-game-row summary{padding:15px}.profile-card49 .activity-game-art{box-shadow:0 3px 10px #00000012}
#messages .profile-card49 .profile-card-close{top:16px;right:16px;width:30px;height:30px;background:var(--background-elevated);border:1px solid var(--border);border-radius:10px;color:var(--text-secondary);z-index:5}

/* All mini-profile actions use the same square glass control as server settings. */
#miniProfileModal.mini-profile49 #miniProfileActions{flex-direction:row!important;justify-content:flex-start!important;gap:8px!important;padding-top:12px!important;margin-top:14px!important}
#miniProfileModal.mini-profile49 #miniProfileActions>.glass-icon-btn,#miniProfileModal.mini-profile49 .mini-profile-tools>.glass-icon-btn{position:static!important;display:grid!important;place-items:center!important;flex:0 0 36px!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;margin:0!important;padding:0!important;border:1px solid var(--border)!important;border-radius:10px!important;background:var(--background-secondary)!important;color:var(--text-secondary)!important;font-size:17px!important;line-height:1!important;box-shadow:none!important;transform:none!important}
#miniProfileModal.mini-profile49 .mini-profile-tools>.glass-icon-btn{flex-basis:30px!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;background:color-mix(in srgb,var(--background-elevated) 88%,transparent)!important;backdrop-filter:blur(8px);font-size:15px!important}
#miniProfileModal.mini-profile49 .glass-icon-btn:hover{background:var(--surface-hover)!important;color:var(--accent)!important}
#miniProfileModal.mini-profile49 .glass-icon-btn:focus-visible,.referral-copy:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.referral-link{display:flex!important;align-items:center;gap:10px!important}.referral-link input{flex:1;min-width:0;height:42px!important;font-size:12px!important}.referral-link>.referral-copy{flex:0 0 42px;width:42px;height:42px;padding:0;border-radius:11px;font-size:17px}

#chatAppearanceModal.chat-settings50 .modal-dialog{width:calc(100% - 24px);max-width:590px}
#chatAppearanceModal.chat-settings50 .modal-header{padding:22px 24px 16px!important;border-bottom:1px solid var(--border)!important}
#chatAppearanceModal.chat-settings50 .modal-header .small{font-size:12px;margin-top:5px}
#chatAppearanceModal.chat-settings50 .modal-body{padding:18px 24px 24px!important;display:block!important;max-height:min(580px,calc(100dvh - 160px))}
.chat-settings-tabs50{display:flex;gap:4px;border:1px solid var(--border);border-radius:12px;padding:4px;background:var(--background-secondary);margin-bottom:20px}
.chat-settings-tabs50 button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;padding:10px 8px;border:0;border-radius:8px;background:none;color:var(--text-secondary);font-size:12px;font-weight:650}
.chat-settings-tabs50 button[aria-selected=true]{background:var(--background-elevated);color:var(--accent);box-shadow:0 2px 6px #00000009}.chat-settings-tabs50 button:focus-visible{outline:2px solid var(--accent)}
.chat-settings-pane50[hidden]{display:none!important}.chat-settings-pane50{min-height:240px}.chat-settings-pane50 h3{font-size:16px}.chat-settings-pane50 .chat-details-section{margin:0!important;padding:0!important;border:0!important;background:none!important}.chat-settings-pane50 .chat-details-head{margin-bottom:16px}.chat-settings-pane50 .form-label{font-size:12px}.chat-settings-pane50 .form-control{font-size:13px;min-height:38px}
#chatAppearanceModal.chat-settings50 .appearance-preview{height:94px;min-height:94px;padding:16px;border-radius:12px;margin-bottom:12px}
#chatAppearanceModal.chat-settings50 .appearance-choice{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:14px 0;margin:0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none}
#chatAppearanceModal.chat-settings50 .appearance-choice .appearance-icon{width:30px;height:30px;font-size:17px}.chat-settings50 .appearance-choice b{font-size:12px}.chat-settings50 .appearance-choice span{font-size:11px;line-height:1.5}.chat-settings50 .appearance-actions{gap:6px}.chat-settings50 .appearance-actions button{font-size:11px;padding:7px 10px;white-space:nowrap}
.vh-store-card{content-visibility:auto;contain-intrinsic-size:auto 310px}
.chat-wallpapers50{margin-top:16px;border:1px solid var(--border);border-radius:12px;padding:13px;color:var(--text-primary);font-size:12px}.chat-wallpapers50 summary{cursor:pointer;font-weight:650}.chat-wallpapers50 .wallpaper-gallery{margin:12px 0 0!important;padding:0!important;border:0!important;max-height:180px;overflow:auto}.chat-wallpapers50 .wallpaper-gallery h5{display:none}.chat-wallpapers50 .wallpaper-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.chat-wallpapers50 .wallpaper-grid img{height:66px;object-fit:cover}
@media(min-width:701px){#chatAppearanceModal.chat-settings50 .appearance-actions{grid-column:3!important;grid-row:1!important;margin:0!important}}

@media(min-width:1151px){#appView.vh-app.call-workspace:not(.call-chat-hidden){grid-template-columns:72px 260px minmax(330px,1fr) clamp(390px,34vw,600px)!important}}
@media(min-width:761px) and (max-width:1150px){#appView.vh-app.call-workspace:not(.call-chat-hidden){grid-template-columns:64px 200px minmax(240px,1fr) minmax(300px,.95fr)!important}}
#appView.call-workspace #callStage.call-gallery49 #callStageTiles:not(.has-focus){max-width:760px!important;gap:10px!important}
#appView.call-workspace:not(.call-chat-hidden) #callStage.call-gallery49 #callStageTiles:not(.has-focus){max-width:640px!important}
#appView.call-workspace #callStage.call-gallery49 .call-tile-avatar{width:58px!important;height:58px!important}
#appView.call-workspace #callStage.call-gallery49 .call-tile-name{font-size:11px!important;padding:4px 7px!important}
#appView.call-workspace #callStageControls{gap:7px;padding:12px 40px 12px 10px;min-height:70px}
#appView.call-workspace #callStageControls button{width:37px!important;height:40px!important}
#appView.call-workspace #callStageControls button.call-device-chevron{width:17px!important}
#appView.call-workspace #callStageControls #leaveVoice{width:50px!important}
#appView.call-workspace #callStageControls #callStageFullscreen{width:28px!important;right:4px}
@media(max-width:700px){#messages .profile-card49{grid-template-columns:minmax(0,1fr)!important;border-radius:18px!important}#messages .profile-card49 .profile-card-identity{border-right:0;border-bottom:1px solid var(--border);border-radius:17px 17px 0 0}#messages .profile-card49 .inapp-profile-banner{border-radius:17px 17px 0 0!important;height:145px!important}#messages .profile-card49 .profile-card-activity{padding:18px!important}#messages .profile-card49 .inapp-profile-identity{padding-inline:22px!important}#chatAppearanceModal.chat-settings50 .modal-header{padding:18px!important}#chatAppearanceModal.chat-settings50 .modal-body{padding:16px!important}.chat-settings-tabs50 button{font-size:11px;gap:4px;padding:10px 5px}#chatAppearanceModal.chat-settings50 .appearance-choice{grid-template-columns:26px minmax(0,1fr)}.chat-settings50 .appearance-actions{grid-column:2;justify-content:flex-start}.referral-link input{font-size:11px!important}}
@media(max-width:760px){#appView.call-workspace #callStage.call-gallery49 .call-tile-avatar{width:42px!important;height:42px!important}#appView.call-workspace #callStageControls{padding:8px;min-height:58px}}
@media(min-width:761px) and (max-width:900px){#appView.vh-app.call-workspace:not(.call-chat-hidden){grid-template-columns:64px 200px minmax(0,1fr)!important;grid-template-rows:minmax(220px,48%) minmax(0,1fr)!important}#appView.call-workspace>.server-rail,#appView.call-workspace>#channelSidebar{grid-row:1/-1!important}#appView.call-workspace>#callStage{grid-column:3!important;grid-row:1!important}#appView.call-workspace>#chatPanel{grid-column:3!important;grid-row:2!important;height:auto;min-height:0;overflow:hidden}#appView.call-workspace #messages{min-height:0;flex:1;overflow:auto}#appView.call-workspace #composer{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){#messages .profile-card49{animation:none!important}}

/* Source: community-v51.css */
#miniProfileModal #miniProfilePresence{display:none!important}
#miniProfileModal .mini-game-activity>div{display:flex!important;align-items:center!important;gap:12px!important;min-width:0}
#miniProfileModal .mini-game-activity .activity-game-art{display:grid!important;place-items:center;flex:0 0 52px!important;width:52px!important;height:52px!important;min-width:52px!important;max-width:52px!important;border-radius:10px!important;overflow:hidden!important;background:var(--background-primary);box-sizing:border-box;padding:0!important}
#miniProfileModal .mini-game-activity .activity-game-art>img{display:block!important;position:static!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;transform:none!important;margin:0!important;border-radius:0!important}
#miniProfileModal .mini-game-activity>div>div{min-width:0;flex:1}.mini-game-activity b{overflow-wrap:anywhere}.mini-game-activity small{display:flex;align-items:center;gap:5px}.mini-game-activity small>i{flex-shrink:0;margin:0!important}
.vh-presence-status{display:none!important}.vh-presence{min-width:0;display:flex!important;align-items:center;gap:0!important;line-height:1.4!important}.vh-presence:empty{display:none!important}.vh-presence-game{display:flex!important;align-items:center;gap:5px;min-width:0;max-width:100%;padding:0!important;margin:0!important;font-size:11px!important;line-height:1.4!important;color:var(--text-secondary)}.vh-presence-game:before{content:none!important}.vh-presence-game>i{flex:0 0 13px;font-size:12px;color:var(--success,#3ba55d)}.vh-presence-game>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-info,.member-copy,.friend-info{min-width:0}
.has-member-nameplate{background-size:calc(100% + 5px) calc(100% + 4px)!important;background-position:center!important;background-repeat:no-repeat!important;border:0!important;outline:0;box-shadow:none!important;overflow:hidden}
#appView #callStage{border-radius:0!important}.call-workspace .call-stage-head,.call-workspace .call-stage-controls{border-radius:0!important}
#appView #chatPanel #composer:not(.d-none){width:100%!important;max-width:none!important;box-sizing:border-box;margin:0!important;padding:10px 16px 12px!important;align-self:stretch!important}#composer .composer-box{display:flex!important;width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box}#composer #messageInput{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:none!important;align-self:center}#composer .composer-tools,#composer .add-btn{flex-shrink:0}
.toast-container.toast-position51:has(#appToast){position:fixed!important;inset:auto 20px 20px auto!important;inset-inline-end:20px!important;width:max-content!important;padding:0!important;z-index:12000!important;max-width:calc(100vw - 32px);pointer-events:none}#appToast.toast51{width:max-content!important;max-width:min(360px,calc(100vw - 32px))!important;min-width:220px;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--background-elevated)!important;color:var(--text-primary)!important;box-shadow:0 8px 28px #0002!important;overflow:hidden;pointer-events:auto}#appToast.toast51:before,#appToast.toast51:after{content:none!important}#appToast.toast51>.d-flex{display:flex!important;align-items:center!important;gap:10px;padding:12px!important}#appToast.toast51 .toast-body{padding:0!important;flex:1;min-width:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}#appToast.toast51 .toast-icon51{color:var(--accent);font-size:18px;flex-shrink:0}#appToast.toast51 .btn-close{flex:0 0 22px;width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;margin:0!important;background-color:transparent!important;filter:none!important;color:var(--text-secondary)!important}
.server-title-line51{display:flex!important;align-items:center;gap:8px;width:100%;min-width:0}.server-title-line51 #serverName{flex:1;min-width:0;font-size:14px;cursor:default!important}.server-title-line51 #serverName:after{content:none!important}#serverMenuToggle51{flex:0 0 30px;width:30px;height:30px;min-width:30px}#serverMenuToggle51[hidden]{display:none!important}#serverMenuToggle51[aria-expanded=true] .bi{transform:rotate(180deg)}.server-title-line51 #serverSubtitle{display:none!important}
.server-showcase.server-context51 .server-showcase-body{display:flex!important;align-items:center;gap:8px;padding:10px 12px!important;min-height:48px}.server-showcase.has-server-cover.server-context51 .server-showcase-body{position:absolute;top:0!important;bottom:auto!important;left:0;right:0;width:100%;background:linear-gradient(#10121bba,#10121b33);color:white;z-index:2}.server-showcase.has-server-cover.server-context51 #serverName{color:white}.server-showcase.has-server-cover.server-context51 #serverMenuToggle51{background:#17192555;border-color:#ffffff25;color:white}.server-context-menu51{min-width:240px!important;padding:8px!important}.server-context-menu51 .message-context-item{padding:12px!important;min-height:40px}.server-context-menu51 [role=separator]{height:1px;margin:7px 8px;background:var(--border)}
#serverBoostModal .modal-header{min-height:62px;padding-block:18px!important}#serverBoostModal .settings-eyebrow{margin:0!important}
.emoji-input51{display:flex;align-items:center;gap:8px;min-width:0;width:100%}.emoji-input51>.form-control{flex:1;min-width:0}.emoji-input51>.glass-icon-btn{flex:0 0 36px;width:36px;height:36px}.text-emoji-picker51{position:fixed;z-index:12500;width:320px;max-width:calc(100vw - 16px);height:310px;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:var(--background-elevated);border:1px solid var(--border);box-shadow:0 12px 36px #0003;color:var(--text-primary)}.text-emoji-picker51 header{display:flex;gap:8px;align-items:center}.text-emoji-picker51 header input{min-width:0;height:36px;font-size:12px}.text-emoji-grid51{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;overflow:auto;align-content:start}.text-emoji-grid51 button{font-size:23px;border:0;background:none;padding:5px;height:38px;border-radius:8px}.text-emoji-grid51 button:hover{background:var(--accent-soft)}
#messages.info-channel-view{padding:28px!important;align-items:stretch!important}.channel-info-card{width:100%!important;max-width:100%!important;margin:0!important;padding:26px 30px!important;border:1px solid var(--border)!important;border-radius:16px!important;background:var(--background-elevated)!important;box-shadow:none!important}.channel-info-card>h1{font-size:28px!important;line-height:1.3;margin:10px 0 24px!important;padding-bottom:20px;border-bottom:1px solid var(--border)}.channel-info-kicker{font-size:10px!important;letter-spacing:.1em;color:var(--text-secondary)}.channel-info-body{max-width:100%!important}.information-markup{font-size:14px;line-height:1.8;color:var(--text-primary);overflow-wrap:anywhere}.information-markup h2{font-size:23px;margin:26px 0 14px;line-height:1.4}.information-markup h3{font-size:19px;margin:22px 0 12px}.information-markup p{margin:0 0 10px}.information-markup li{margin:5px 0}.information-markup blockquote{border-left:3px solid var(--accent);margin:16px 0;padding:10px 16px;background:var(--accent-soft);border-radius:0 9px 9px 0}.information-markup pre{padding:16px;background:var(--background-secondary);border:1px solid var(--border);border-radius:10px;overflow:auto}.channel-info-edit{margin-top:26px!important}
#linkedMessageModal .modal-dialog{max-width:700px}#linkedMessageModal .message-row{margin:0!important;max-width:100%!important}#linkedMessageModal .message-actions{display:none}
@media(max-width:760px){#appView #chatPanel #composer:not(.d-none){padding:8px!important}.toast-container.toast-position51:has(#appToast){right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important}#messages.info-channel-view{padding:12px!important}.channel-info-card{padding:20px!important}.channel-info-card>h1{font-size:23px!important}.information-markup{font-size:13px}}

dialog.information-editor51{width:min(1040px,calc(100vw - 32px));height:min(820px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);padding:0;overflow:hidden;grid-template-rows:auto auto auto minmax(0,1fr) auto;border:1px solid var(--border);border-radius:20px;background:var(--background-elevated);color:var(--text-primary);box-shadow:0 24px 80px #0005}dialog.information-editor51[open]{display:grid}dialog.information-editor51::backdrop{background:#090b145e;backdrop-filter:blur(3px)}.information-editor51>header{padding:22px 26px!important;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--border)}.information-editor51 header h2{font-size:22px;margin:5px 0}.information-editor51 header p{font-size:12px;color:var(--text-secondary);margin:0}.information-editor51 header small{font-size:9px;letter-spacing:.12em;color:var(--accent)}.information-tabs51{display:flex;gap:5px;padding:10px 24px;border-bottom:1px solid var(--border)}.information-tabs51 button{border:0;background:transparent;padding:8px 14px;border-radius:8px;color:var(--text-secondary);font-size:12px}.information-tabs51 button.active{background:var(--accent-soft);color:var(--accent);font-weight:700}.information-toolbar51{display:flex;gap:5px;flex-wrap:wrap;padding:10px 24px;background:var(--background-secondary);border-bottom:1px solid var(--border)}.information-toolbar51 .glass-icon-btn{width:34px;height:34px;min-width:34px;font-size:17px}.information-toolbar51[hidden],.information-body51>[hidden]{display:none!important}.information-body51{min-height:0;overflow:auto;background:var(--background-elevated)}.information-rich51,.information-preview51{padding:26px 34px;min-height:100%;outline:none}.information-rich51:focus{box-shadow:inset 3px 0 var(--accent-soft)}.information-source51{width:100%;height:100%;min-height:320px;resize:none;border:0;border-radius:0;font-family:ui-monospace,monospace;font-size:13px;padding:26px;line-height:1.8;background:var(--background-elevated)}.information-editor51>footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px!important;border-top:1px solid var(--border)}.information-editor51>footer small{margin-right:auto;color:var(--text-secondary);font-size:11px}.information-link51{display:flex;gap:8px;flex:1 0 100%;padding-top:8px}.information-link51 input{min-width:0}.information-link51 button{white-space:nowrap}@media(max-width:600px){dialog.information-editor51{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);height:calc(100dvh - 12px);border-radius:14px}.information-editor51>header{padding:16px!important}.information-tabs51,.information-toolbar51{padding:8px 12px}.information-rich51,.information-preview51{padding:20px}.information-editor51>footer{padding:12px!important}.information-editor51>footer small{font-size:9px}.information-link51{flex-wrap:wrap}}

.information-editor51>header{grid-row:1}.information-editor51>.information-tabs51{grid-row:2}.information-editor51>.information-toolbar51{grid-row:3}.information-editor51>.information-body51{grid-row:4}.information-editor51>footer{grid-row:5}

.server-showcase.server-context51 .server-showcase-top{display:none!important}.server-showcase.server-context51 .server-showcase-body{width:100%!important;padding-right:12px!important}.server-showcase.server-context51 .server-title-line51{flex:1;padding-right:0!important}.server-context-menu51{width:250px!important;max-width:calc(100vw - 24px)}

/* Source: community-v52.css */
/* Categories share the same geometry across desktop, touch and keyboard input. */
#serverChannelNav>.channel-group{display:none!important}.category-list52{padding:4px 8px 20px}.category-head52{display:flex;align-items:center;gap:2px;padding:12px 3px 5px;color:var(--text-secondary)}.category-head52 button{border:0;background:transparent;color:inherit;border-radius:6px;padding:5px}.category-toggle52{display:flex;align-items:center;gap:7px;min-width:0;flex:1;text-align:left;font-size:12px;font-weight:650;overflow-wrap:anywhere}.category-toggle52 i{font-size:10px}.category-add52,.category-more52{flex:none;width:26px;height:26px;display:grid;place-items:center}.category-head52 button:hover{background:var(--accent-soft);color:var(--accent)}.is-collapsed>.category-channels52{display:none}.is-collapsed .category-toggle52>i{transform:rotate(-90deg)}.category-create52{width:100%;margin-top:14px;padding:10px;background:transparent;border:1px dashed var(--border);color:var(--text-secondary);border-radius:9px;font-size:12px}.category-create52>i{margin-right:7px}.channel-drag52{position:absolute;z-index:2;left:-5px;top:10px;width:15px;height:22px;padding:0;border:0;background:var(--background-secondary);color:var(--text-secondary);border-radius:4px;cursor:grab;touch-action:none;opacity:0}.channel-entry:hover>.channel-drag52,.channel-drag52:focus-visible{opacity:1}.channel-entry.is-dragging{opacity:.4}.drop-target52{box-shadow:inset 0 2px var(--accent)!important}.channel-category52 .channel-entry{position:relative}.category-head52.drop-target52{background:var(--accent-soft)}
.channel-create-dialog52{width:min(500px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--background-elevated);color:var(--text-primary);overflow:auto}.channel-create-dialog52::backdrop{background:#0009}.channel-create-dialog52 form{display:grid;gap:15px}.channel-create-dialog52 header{display:flex;align-items:center;justify-content:space-between}.channel-create-dialog52 h2{font-size:21px;margin:0}.channel-create-dialog52 label{font-size:13px}.channel-create-dialog52 label>.form-control,.channel-create-dialog52 label>.form-select{margin-top:8px}.channel-type52{display:flex;align-items:center;gap:13px;border-radius:10px;padding:15px;background:var(--background-secondary);cursor:pointer;border:1px solid transparent}.channel-type52:has(input:checked){background:var(--accent-soft);border-color:var(--accent)}.channel-type52 small{display:block;color:var(--text-secondary);font-size:12px;margin-top:4px}.channel-type52>i{font-size:22px}.channel-private52{display:flex;align-items:center;gap:9px}.channel-private52 input{margin-left:auto;width:20px;height:20px;accent-color:var(--accent)}.channel-private-members52{max-height:180px;overflow:auto;padding:12px;border:1px solid var(--border);border-radius:8px}.channel-private-members52 label{display:flex;gap:8px;padding:4px}.channel-create-dialog52 footer{display:flex;gap:12px}.channel-create-dialog52 footer>button{flex:1}.channel-create-dialog52 .text-danger:empty{display:none}
/* Fixed neutral glass palette is intentionally independent of the chosen theme. */
html body .glass-icon-btn,html body .glass-icon-btn:hover,html body .glass-icon-btn:focus-visible,html body #miniProfileModal .glass-icon-btn,html body #serverSettings.glass-icon-btn{background:#f0eef7!important;color:#71688e!important;box-shadow:none!important}.glass-icon-btn>.bi{color:inherit!important}
/* A compact text row keeps the activity icon directly below the user's name. */
.member-item .vh-presence,.friend-row .vh-presence{margin-top:2px!important;align-self:start}.member-item .vh-presence-game,.friend-row .vh-presence-game{font-size:10px!important;color:var(--text-secondary)}.member-item .vh-presence-game>i,.friend-row .vh-presence-game>i{color:var(--success)!important;font-size:11px}.activity-game-row>summary{list-style:none;cursor:default}.activity-game-row>summary::marker,.activity-game-row>summary::-webkit-details-marker{display:none}
/* Nameplates are decoration only; their overlay never intercepts row controls. */
.has-member-nameplate{position:relative!important;isolation:isolate;border-radius:8px!important;overflow:hidden!important;background-image:none!important}.has-member-nameplate:before{content:''!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;background:var(--member-nameplate) center/cover no-repeat!important;opacity:.3!important;transition:opacity .15s ease;border-radius:8px;pointer-events:none;z-index:-1!important}.has-member-nameplate:hover:before{opacity:.42!important}.has-member-nameplate:after{display:none!important}
/* Continuous chat rows, including the current user's messages. */
#messages:not(.profile-surface-list)>.message-row{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;gap:0 12px!important;align-self:stretch!important;justify-content:initial!important;width:100%!important;max-width:none!important;padding:8px 12px!important;margin:9px 0 0!important;border-radius:4px!important;position:relative;background:transparent!important;box-sizing:border-box}
#messages:not(.profile-surface-list)>.message-row:hover,#messages:not(.profile-surface-list)>.message-row:focus-within{background:var(--surface-soft)!important}
#messages:not(.profile-surface-list)>.message-row>.msg-avatar{display:block!important;grid-column:1;grid-row:1;width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;margin:0!important;position:relative!important;visibility:visible!important}
#messages:not(.profile-surface-list)>.message-row>.msg-body{grid-column:2;grid-row:1;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;width:100%!important;max-width:none!important;align-items:flex-start!important;min-width:0}
#messages:not(.profile-surface-list) .message-row .msg-head{display:flex!important;align-items:center;flex-wrap:wrap;justify-content:flex-start!important;gap:7px;margin:0 0 4px!important;min-height:18px}
#messages:not(.profile-surface-list) .msg-head .msg-meta{position:static!important;display:flex!important;align-self:center!important;margin:0!important;padding:0!important;opacity:1!important;background:none!important;color:var(--text-secondary);font-size:10px;white-space:nowrap}
#messages:not(.profile-surface-list) .msg-content{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;line-height:1.55;font-size:14px;text-align:start!important}
#messages:not(.profile-surface-list) .msg-body>.msg-image-preview,#messages:not(.profile-surface-list) .msg-body>.msg-video-preview,#messages:not(.profile-surface-list) .msg-body>.msg-album{align-self:flex-start!important;margin:4px 0!important;max-width:min(500px,100%)!important}
#messages:not(.profile-surface-list)>.grouped-message52{margin-top:0!important;padding-block:2px!important;min-height:24px}#messages:not(.profile-surface-list)>.grouped-message52>.msg-avatar{visibility:hidden!important;height:0!important;min-height:0!important}#messages:not(.profile-surface-list)>.grouped-message52 .msg-head{display:none!important}#messages:not(.profile-surface-list)>.grouped-message52:hover:before{content:attr(data-time);position:absolute;left:10px;top:6px;width:40px;font-size:9px;color:var(--text-secondary);text-align:center}
#messages .message-row>.message-actions{position:absolute!important;right:12px;left:auto!important;top:-14px!important;bottom:auto!important;z-index:4;border:1px solid var(--border);border-radius:7px;background:var(--background-secondary);padding:2px;box-shadow:none;gap:0}
.msg-sticker-wrap[role=button]{cursor:pointer}.msg-sticker-wrap[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
/* Images and video keep their intrinsic ratio against a dimmed workspace. */
#mediaPreviewModal.media-lightbox52 .modal-dialog{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;pointer-events:none}
#mediaPreviewModal.media-lightbox52 .modal-content{height:100%!important;max-height:none!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;pointer-events:none}
#mediaPreviewModal.media-lightbox52 .modal-header{position:absolute;right:24px;top:20px;z-index:3;padding:0;background:transparent!important;border:0;pointer-events:auto}#mediaPreviewModal.media-lightbox52 .modal-header>.min-w-0{display:none}#mediaPreviewModal.media-lightbox52 .modal-header .glass-icon-btn{width:40px;height:40px;border-radius:8px!important;margin:0;padding:10px;display:grid;place-items:center;opacity:1}
#mediaPreviewModal.media-lightbox52 .media-preview-body{display:flex;align-items:center;justify-content:center;flex:1;padding:80px 64px!important;overflow:hidden;pointer-events:auto;background:transparent!important}
#mediaPreviewModal.media-lightbox52 #mediaPreviewImage,#mediaPreviewModal.media-lightbox52 #mediaPreviewVideo{width:auto!important;height:auto!important;max-width:100%!important;max-height:calc(100dvh - 160px)!important;object-fit:contain;border-radius:8px!important;box-shadow:none;background:transparent}
.media-lightbox-backdrop52{opacity:.88!important;background:#09090b!important}.media-lightbox52 .media-preview-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;background:#0007;padding:4px 10px;border-radius:7px}
.pro-media-modal52 .modal-body{text-align:center;padding:24px}.pro-media-modal52 .modal-body>img{width:140px;height:140px;object-fit:contain;margin:0 auto 18px}.pro-media-symbol52{font-size:90px;color:var(--accent)}.pro-media-modal52 h2{font-size:24px}.pro-media-modal52 p{font-size:15px;line-height:1.6;color:var(--text-secondary)}.pro-media-modal52 .modal-footer{display:grid;grid-template-columns:1fr 1fr}.sticker-preview-grid52{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.sticker-preview-grid52>button{position:relative;border:0;padding:0;background:var(--background-secondary);border-radius:8px;aspect-ratio:1;overflow:hidden}.sticker-preview-grid52 img{width:100%;height:100%;object-fit:contain}.sticker-preview-grid52 i{position:absolute;bottom:5px;right:5px;background:var(--background-elevated);padding:4px;border-radius:5px}.sticker-pack-preview52 .modal-footer>button{width:100%}
.profile-badges52{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-inline:4px}.profile-badge52{display:grid;place-items:center;border:0;background:transparent;padding:0;width:25px;height:25px;border-radius:6px}.profile-badge52:focus-visible{outline:2px solid var(--accent)}.profile-badge52 img{width:100%;height:100%;object-fit:contain}.badge-tooltip52{position:fixed;z-index:13000;display:grid;justify-items:center;gap:8px;width:240px;padding:20px;border-radius:12px;background:linear-gradient(155deg,#29364e,#202028);box-shadow:0 12px 32px #0006;border:1px solid #536583;color:#fff;text-align:center;pointer-events:none}.badge-tooltip52 img{width:110px;height:110px;object-fit:contain}.badge-tooltip52 strong{font-size:16px}.badge-tooltip52 span{font-size:12px;color:#c6cbd5}
/* Native and custom progress indicators use the boost meter's compact silhouette. */
progress,.progress{height:22px!important;min-height:22px;border:0!important;border-radius:8px!important;overflow:hidden;background:var(--background-secondary)!important;accent-color:var(--accent)}progress::-webkit-progress-bar{border-radius:8px;background:var(--background-secondary)}progress::-webkit-progress-value{border-radius:8px;background:var(--accent-soft)}progress::-moz-progress-bar{border-radius:8px;background:var(--accent)}.progress-bar{border-radius:8px;background:var(--accent-soft)!important}
@media(max-width:600px){.media-lightbox52 .media-preview-body{padding:75px 12px!important}.sticker-preview-grid52{grid-template-columns:repeat(4,minmax(0,1fr))}.channel-drag52{opacity:.7}.channel-create-dialog52{padding:18px}#messages:not(.profile-surface-list)>.message-row{padding-inline:6px!important;grid-template-columns:32px minmax(0,1fr)!important;column-gap:9px!important}#messages:not(.profile-surface-list)>.message-row>.msg-avatar{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important}.pro-media-modal52 .modal-footer{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.has-member-nameplate:before{transition:none}}

.activity-game-summary52{display:flex;align-items:center;gap:14px;padding:12px}.activity-game-summary52 .activity-game-copy{flex:1;min-width:0}.activity-game-summary52 small{display:flex;gap:5px;align-items:center;color:var(--text-secondary)}
.upload-queue-progress{height:22px!important;min-height:22px;border-radius:8px!important;background:var(--background-secondary)!important;overflow:hidden}.upload-queue-progress>i{height:100%!important;background:var(--accent-soft)!important;border-radius:8px!important}
html body #miniProfileModal.mini-profile49 #miniProfileActions>.glass-icon-btn,html body #miniProfileModal.mini-profile49 .mini-profile-tools>.glass-icon-btn{background:#f0eef7!important;color:#71688e!important;backdrop-filter:none;text-shadow:none}

.channel-private52 input{appearance:none;width:40px;height:24px;border-radius:20px;background:var(--text-secondary);position:relative;cursor:pointer;flex:none}.channel-private52 input:before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .15s}.channel-private52 input:checked{background:var(--accent)}.channel-private52 input:checked:before{transform:translateX(16px)}.channel-private52 input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

#mediaPreviewModal.media-lightbox52 .modal-header{min-height:40px!important;padding:0!important;border:0!important;top:20px;right:24px}
html body #mediaPreviewModal.media-lightbox52 .modal-header .glass-icon-btn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border:1px solid #dcd8e9!important;background:#f0eef7!important;color:#71688e!important;border-radius:8px!important;box-shadow:none!important}
#mediaPreviewModal #mediaPreviewActions{display:none!important}
#mediaPreviewModal .modal-footer:empty{display:none}

/* Source: call-v52.css */
#appView{--panel-left52:clamp(280px,calc(100vw - 1509px),411px);--panel-chat52:449px;--panel-members52:300px}
#channelSidebar,#chatPanel,.members-panel{position:relative}.panel-resizer52{position:absolute;top:0;bottom:0;width:7px;z-index:30;cursor:col-resize;touch-action:none;background:transparent}.panel-resizer52.right{right:-3px}.panel-resizer52.left{left:-3px}.panel-resizer52:hover,.panel-resizer52:focus-visible{background:var(--accent-soft);outline:none;border-inline:1px solid var(--accent)}.resizing-panel52,.resizing-panel52 *{cursor:col-resize!important;user-select:none!important}#chatPanel>.panel-resizer52{display:none}.call-workspace #chatPanel>.panel-resizer52{display:block}
@media(min-width:1100px){#appView.vh-app.call-workspace:not(.call-chat-hidden){grid-template-columns:72px min(var(--panel-left52),30vw) minmax(280px,1fr) minmax(280px,min(var(--panel-chat52),35vw))!important}#appView.vh-app.call-workspace.call-chat-hidden{grid-template-columns:72px min(var(--panel-left52),30vw) minmax(280px,1fr)!important}#appView.vh-app:not(.call-workspace){grid-template-columns:72px min(var(--panel-left52),30vw) minmax(260px,1fr) minmax(240px,min(var(--panel-members52),30vw))!important}#appView.vh-app:not(.call-workspace):is(.members-collapsed,:has(>.members-panel.d-none),:has(>.members-panel.panel-collapsed)){grid-template-columns:72px min(var(--panel-left52),30vw) minmax(260px,1fr)!important}}
@media(min-width:761px) and (max-width:1099px){#appView.vh-app.call-workspace:not(.call-chat-hidden){grid-template-columns:64px minmax(230px,1fr) minmax(280px,min(var(--panel-chat52),42vw))!important;grid-template-rows:minmax(0,1fr)!important}#appView.vh-app.call-workspace>#callStage{grid-column:2!important;grid-row:1!important}#appView.vh-app.call-workspace>#chatPanel{grid-column:3!important;grid-row:1!important}#appView.vh-app.call-workspace>#channelSidebar{display:none!important}#appView.vh-app.call-workspace.call-chat-hidden{grid-template-columns:64px minmax(0,1fr)!important}}
#appView #callStage #callStageTiles.has-focus{gap:8px!important;grid-template-rows:minmax(120px,1fr) 90px!important;padding-bottom:8px!important;align-content:stretch!important}
#appView #callStage #callStageTiles.has-focus>.call-participant-tile:not(.is-main){height:90px!important;min-height:90px!important;max-height:90px!important;width:min(160px,100%)!important;max-width:160px!important;transform:translateX(var(--focus-shift52,0px));transition:none}
#appView #callStage #callStageTiles.has-focus>.call-participant-tile:not(.is-main) .call-tile-avatar{width:48px!important;height:48px!important}
#appView #callStage.call-gallery49 #callStageTiles:not(.has-focus){gap:8px!important;max-width:900px!important}
/* Compact connected-call panel above the persistent account controls. */
#voiceDock{padding:12px!important;margin:8px 8px 0!important;border:1px solid var(--border)!important;border-bottom:0!important;border-radius:10px 10px 0 0!important;background:var(--background-elevated)!important;box-shadow:none!important;gap:10px}
#voiceDock #openCallStageBtn,#voiceDock .voice-dock-badges,#voiceDock #voiceParticipantList{display:none!important}#voiceDock .voice-dock-head{display:flex;align-items:center;gap:9px;padding:0!important}#voiceDock .voice-state-icon{width:34px;height:34px;flex:none;border-radius:9px;background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success);display:grid;place-items:center}#voiceDock .voice-state{flex:1;cursor:pointer}#voiceDock .voice-state b{font-weight:600;font-size:13px;color:var(--success)}#voiceDock .voice-state span{display:block;font-size:11px;color:var(--text-secondary);max-width:250px}.dock-disconnect52{border:0!important;background:transparent!important;color:var(--text-secondary)!important;padding:6px!important;width:30px;height:30px;font-size:18px}
.voice-dock-actions52{display:flex;gap:8px;margin-top:10px}.voice-dock-actions52>button{flex:1;height:32px;border:1px solid var(--border-strong);background:var(--background-secondary);color:var(--text-primary);border-radius:7px;padding:3px;font-size:18px}.voice-dock-actions52>button.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
#channelSidebar>.user-panel{margin:0 8px 8px;padding:10px!important;gap:8px!important;border:1px solid var(--border)!important;border-radius:0 0 10px 10px!important;background:var(--background-elevated)!important;flex-wrap:nowrap!important;min-height:58px}#voiceDock.d-none~.user-panel{border-radius:10px!important}.user-panel>.min-w-0{min-width:0!important;flex:1}.user-panel-actions{display:flex;align-items:center;gap:4px!important;flex:none!important}.user-panel-actions>.dock-device52{display:flex;align-items:center;border-radius:6px;overflow:hidden}.dock-device52 button{height:30px;border:0!important;background:transparent;color:var(--text-secondary);padding:4px;width:27px;font-size:17px}.dock-device52 button+button{width:17px;font-size:9px}.dock-device52 button.active{background:#ff59641a;color:#ed4656}.user-panel #notificationSettingsBtn,.user-panel #soundToggle,.user-panel #themeToggle,.user-panel #logout,.user-panel .user-more50{display:none!important}.user-panel #profileSettings{width:30px!important;height:30px!important}.user-panel-name{font-size:12px!important}.user-panel #connectionState{font-size:10px!important}.device-volume52{padding:10px 7px;display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12px}.device-volume52 input{grid-column:1/-1;width:100%;accent-color:var(--accent)}
/* Soundboard retains search, upload and per-sound actions in a compact grid. */
#soundboardModal.soundboard-popover52{pointer-events:none;background:none!important}#soundboardModal.soundboard-popover52 .modal-dialog{width:min(510px,calc(100vw - 20px));max-width:none;margin:0;position:absolute;left:50%;bottom:90px;transform:translateX(-50%)!important;pointer-events:auto;max-height:min(480px,calc(100dvh - 150px))}
#soundboardModal.soundboard-popover52 .modal-content{background:var(--background-elevated)!important;color:var(--text-primary);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 15px 50px #0005;max-height:inherit}
#soundboardModal.soundboard-popover52 .modal-header{height:56px;min-height:56px;padding:10px 12px;justify-content:flex-end;border:0;background:var(--background-elevated)}#soundboardModal .modal-title{display:none}.soundboard-popover52 .sound-preview-toggle52{border:0;background:var(--background-secondary);color:var(--text-primary);border-radius:8px;width:32px;height:32px;padding:0;font-size:17px;margin-right:8px}
#soundboardModal.soundboard-popover52 .modal-body{display:block;position:static;padding:10px 12px 12px 58px;overflow-y:auto;min-height:240px;border-top:1px solid var(--border)}#soundboardModal.soundboard-popover52 .modal-body>.experience-hint{display:none}#soundboardModal .sound-search52{position:absolute;left:12px;top:10px;width:calc(100% - 112px);height:34px;min-height:0;margin:0!important;font-size:12px}
#soundboardModal .soundboard-tabs{position:absolute;left:8px;top:65px;bottom:10px;display:flex;flex-direction:column;gap:8px;padding:0;width:36px;margin:0;background:none;border:0}#soundboardModal .soundboard-tabs button{flex:none;padding:0;border:0;width:32px;height:32px;min-height:0;border-radius:8px;color:var(--text-secondary);background:transparent;font-size:18px}#soundboardModal .soundboard-tabs button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}#soundboardModal .soundboard-tabs button:last-child{font-size:10px;font-weight:800}
#soundboardModal .soundboard-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#soundboardModal .soundboard-card{display:flex!important;align-items:center;gap:5px;padding:10px 8px!important;border:1px solid transparent!important;border-radius:8px!important;background:var(--background-secondary)!important;min-width:0;min-height:43px;position:relative;cursor:pointer}#soundboardModal .soundboard-card[hidden]{display:none!important}#soundboardModal .soundboard-card:focus-visible,#soundboardModal .soundboard-card:hover{border-color:var(--accent)!important}#soundboardModal .soundboard-symbol{flex:none;font-size:16px;color:var(--accent);width:auto;margin:0}#soundboardModal .soundboard-copy{min-width:0}#soundboardModal .soundboard-copy b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}#soundboardModal .soundboard-copy>small{display:none}#soundboardModal .soundboard-actions{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:var(--background-elevated);border-radius:7px;gap:2px}#soundboardModal .soundboard-card:hover .soundboard-actions,#soundboardModal .soundboard-card:focus-within .soundboard-actions{display:flex}#soundboardModal .soundboard-actions button{width:26px;height:28px;padding:3px;font-size:14px}#soundboardModal .modal-footer:empty{display:none}#soundboardModal .soundboard-section[hidden]{display:none!important}#soundboardModal .soundboard-upload-box{margin-top:12px}#soundboardModal .soundboard-credits{font-size:10px;display:block;margin-top:12px}
@media(max-width:760px){.panel-resizer52{display:none!important}#appView #callStage #callStageTiles.has-focus{grid-template-rows:minmax(80px,1fr) 64px!important}#appView #callStage #callStageTiles.has-focus>.call-participant-tile:not(.is-main){height:64px!important;min-height:64px!important;max-height:64px!important;max-width:95px!important}#appView #callStage #callStageTiles.has-focus>.call-participant-tile:not(.is-main) .call-tile-avatar{width:32px!important;height:32px!important}.soundboard-popover52 .modal-dialog{bottom:72px!important;max-height:calc(100dvh - 115px)!important}#soundboardModal .soundboard-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:1200px) and (min-width:1100px){#channelSidebar .user-panel{flex-wrap:wrap!important}#channelSidebar .user-panel-actions{margin-left:auto}}
#soundboardModal.soundboard-popover52 .modal-dialog{top:auto!important;min-height:0!important;margin:0!important;bottom:90px!important;align-items:stretch!important}
#soundboardModal.soundboard-popover52 .sound-preview-toggle52{position:absolute;right:54px;top:11px;min-width:32px;width:32px;max-width:32px;flex:none;margin:0}
#soundboardModal.soundboard-popover52 .modal-header .btn-close{position:absolute;right:17px;top:21px;margin:0!important}

#channelSidebar{container-type:inline-size}
@container(max-width:330px){#channelSidebar>.user-panel{flex-wrap:wrap!important}.user-panel-actions{flex-basis:100%!important;justify-content:flex-end}.user-panel-actions>.dock-device52{flex:none}.category-toggle52{font-size:11px}}
#soundboardModal.soundboard-popover52 .modal-dialog,#soundboardModal.soundboard-popover52 .modal-content{height:auto!important;max-height:min(480px,calc(100dvh - 150px))!important}
#soundboardModal.soundboard-popover52 .modal-body{flex:0 1 auto}
@container(max-width:330px){#channelSidebar>.user-panel{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:6px 9px!important}.user-panel>.user-presence-wrap{grid-column:1;grid-row:1}.user-panel>.min-w-0{grid-column:2;grid-row:1}.user-panel>.user-panel-actions{grid-column:1/-1;grid-row:2;justify-self:end}}

@media(min-width:1100px) and (max-width:1280px){#appView.vh-app:not(.call-workspace){grid-template-columns:72px min(var(--panel-left52),30vw) minmax(0,1fr)!important}}

/* Source: surfaces-v53.css */
/* Shared compact menus and popup chrome. Feature layouts keep their own width. */
:root{--popup-radius:12px;--popup-pad:20px;--menu-width:232px;--popup-shadow:0 12px 38px #12142624}
body :is(.message-context-menu,.participant-context-menu,.composer-action-menu){animation:none!important;transition:none!important;transform:none!important}
.server-tag-form .tag-locked-toggle53{font-size:12px;justify-self:start}.server-tag-form .tag-icon-hidden53{display:none!important}
body :is(.message-context-menu,.participant-context-menu,.composer-action-menu){box-sizing:border-box;width:var(--menu-width)!important;min-width:0!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px);overflow-y:auto;padding:6px!important;border:1px solid var(--border)!important;border-radius:9px!important;background:var(--background-elevated)!important;color:var(--text-primary)!important;box-shadow:var(--popup-shadow)!important;backdrop-filter:none!important}
body :is(.message-context-menu,.participant-context-menu,.composer-action-menu)>:is(button,.message-context-item){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;box-sizing:border-box;width:100%!important;min-width:0!important;min-height:32px!important;height:auto!important;margin:0!important;padding:7px 9px!important;border:0!important;border-radius:5px!important;box-shadow:none!important;background:transparent!important;color:inherit;font-size:12px!important;line-height:17px!important;text-align:left;white-space:normal;font-weight:500!important}
body :is(.message-context-menu,.participant-context-menu,.composer-action-menu)>button:is(:hover,:focus-visible){background:var(--background-secondary)!important;outline:0}
body :is(.message-context-menu,.participant-context-menu,.composer-action-menu)>button:is(.danger,.text-danger){color:var(--danger)!important}
body :is(.message-context-menu,.participant-context-menu,.composer-action-menu)>button>i{display:grid!important;place-items:center!important;flex:0 0 16px!important;width:16px!important;height:16px!important;font-size:15px!important;line-height:1!important;margin:0!important}
body :is(.message-context-menu,.participant-context-menu,.composer-action-menu) .vh-context-label{position:relative;flex:1;min-width:0;padding-right:0;white-space:normal}
body .vh-context-label:has(.vh-context-arrow){padding-right:18px}body .vh-context-arrow{position:absolute;right:0;top:50%;transform:translateY(-50%);width:12px;height:12px;font-size:12px}
body :is(.message-context-menu,.participant-context-menu,.composer-action-menu) :is([role=separator],hr){height:1px!important;min-height:1px!important;margin:6px 9px!important;padding:0!important;border:0!important;background:var(--border)!important}
body :is(.message-context-menu,.participant-context-menu) label{box-sizing:border-box;width:100%;font-size:12px;padding:8px 9px!important;gap:8px}
body :is(.message-context-menu,.participant-context-menu) input[type=range]{width:100%;height:18px;margin:4px 0}
body .modal .modal-content{border-radius:var(--popup-radius);border-color:var(--border);box-shadow:var(--popup-shadow)}
body .modal :is(.modal-header,.modal-footer){padding:16px var(--popup-pad);gap:12px;border-color:var(--border)}
body .modal .modal-header{min-height:58px;align-items:center}body .modal .modal-title{font-size:17px;line-height:1.4;margin:0}
body .modal .modal-header .btn-close{box-sizing:content-box;width:14px;height:14px;padding:7px;margin:0 0 0 auto;flex-shrink:0}
body dialog{border:1px solid var(--border);border-radius:var(--popup-radius);box-shadow:var(--popup-shadow);color:var(--text-primary);background:var(--background-elevated);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
body dialog>header,body dialog>form>header{display:flex;align-items:center;justify-content:space-between;gap:12px}body dialog header h2{font-size:17px;line-height:1.4;margin:0}
body dialog::backdrop{background:#0b10245c;backdrop-filter:none}
.glass-icon-btn{display:inline-grid;place-items:center;line-height:1;padding:0;flex-shrink:0}.glass-icon-btn>i{display:grid;place-items:center;line-height:1;width:18px;height:18px;margin:0!important;font-size:17px}.glass-icon-btn>i:before{width:1em;height:1em;margin:0;vertical-align:0}
#serverMenuToggle51{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important;margin:0!important;align-self:center}#serverMenuToggle51>i{width:16px;height:16px;font-size:16px}
/* A dedicated background never inherits a grid column or displaces row actions. */
.has-member-nameplate:before,.has-member-nameplate:after{display:none!important}
.has-member-nameplate{position:relative!important;isolation:isolate;border-radius:8px!important;overflow:hidden!important;background-image:none!important}
.has-member-nameplate>.member-nameplate-art53{position:absolute!important;inset:0!important;display:block!important;margin:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:0!important;border:0!important;border-radius:8px!important;overflow:hidden;background:var(--member-nameplate) right center/cover no-repeat!important;opacity:.3;transition:opacity .15s ease;pointer-events:none!important;z-index:-1!important;grid-area:auto!important;transform:none!important}
.has-member-nameplate:hover>.member-nameplate-art53{opacity:.38}.invite-friend-row.has-member-nameplate{padding:9px 10px}.invite-friend-row>.btn{flex-shrink:0}.settings-member-row.has-member-nameplate{background-color:var(--background-secondary)}
#miniProfileModal.is-profile-loading53 .modal-body{min-height:96px!important;height:96px!important;padding:20px!important;background:var(--background-elevated)!important;display:grid;place-items:center}
#miniProfileModal.is-profile-loading53 .modal-content{min-height:0!important;overflow:hidden}.profile-loader53{display:grid;place-items:center;min-height:50px}.loading-ring53{display:block;width:24px;height:24px;border:2px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:loader53 .8s linear infinite}
@keyframes loader53{to{transform:rotate(360deg)}}
.community-tag[data-server-id]{cursor:pointer}.community-tag[data-server-id]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.server-preview53{position:fixed;margin:0;padding:0;inset:auto;width:300px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto;border:1px solid var(--border);border-radius:12px;color:var(--text-primary);background:var(--background-elevated);box-shadow:var(--popup-shadow);z-index:11000}
.server-preview53::backdrop{background:transparent}.server-preview53 .server-preview-cover{height:108px;background:linear-gradient(130deg,var(--accent),var(--accent-soft));background-position:center;background-size:cover}.server-preview53 .server-preview-copy{padding:0 16px 16px}.server-preview53 .server-preview-icon{display:grid;place-items:center;width:60px;height:60px;object-fit:cover;border:4px solid var(--background-elevated);border-radius:13px;background:var(--accent-soft);color:var(--accent);margin-top:-28px;margin-bottom:10px;position:relative;font-size:23px;font-weight:700}.server-preview53 h3{font-size:17px;line-height:1.3;margin:0 0 6px;overflow-wrap:anywhere}.server-preview53 .server-preview-counts{font-size:12px;color:var(--text-secondary);display:flex;gap:12px;flex-wrap:wrap}.server-preview53 .server-preview-counts span:first-child:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);margin-right:5px}.server-preview53 p{font-size:12px;line-height:1.55;margin:12px 0;white-space:pre-wrap;overflow-wrap:anywhere}.server-preview53 .btn-primary{width:100%;margin-top:12px}.server-preview53>.glass-icon-btn{position:absolute;top:8px;right:8px;width:26px;height:26px}.server-preview53 .profile-loader53{height:96px}
.server-tag-settings{display:grid;grid-template-columns:minmax(0,1fr);gap:14px!important;padding:20px!important;border:1px solid var(--border);border-radius:12px;background:var(--background-elevated)}.server-tag-settings>h3{font-size:17px;margin:0}.server-tag-settings>p{font-size:12px;line-height:1.6;margin:0;color:var(--text-secondary)}.server-tag-current{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;background:var(--background-secondary);border:1px solid var(--border);border-radius:10px}.server-tag-current .community-tag{font-size:15px;padding:8px 10px}.server-tag-settings>button{justify-self:start}.server-tag-settings .server-tag-form{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:100%}.server-tag-form>label{display:grid;gap:7px;font-size:12px;font-weight:600}.server-tag-form input{max-width:280px}.server-tag-icon-picker{display:flex!important;flex-wrap:wrap;gap:8px!important;max-height:210px;overflow:auto;padding:8px!important;border:1px solid var(--border);border-radius:10px}.server-tag-icon-picker>button{width:44px!important;height:44px!important;min-height:44px!important;padding:8px!important;flex:none}.server-tag-icon-picker>button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px;background:var(--accent-soft)}.server-tag-icon-picker img{width:26px;height:26px;object-fit:contain}.server-tag-form>button{justify-self:start}.server-tag-form>p:empty{display:none}.server-tag-live53{display:flex;align-items:center;gap:8px;padding:14px;background:var(--background-secondary);border-radius:8px;font-size:13px}.server-tag-live53>small{margin-left:auto;color:var(--text-secondary);font-size:11px}
#appView #callStage.call-gallery49 .call-participant-tile>.call-quality49{right:auto;left:8px;top:8px;width:20px;height:20px;padding:3px;justify-content:center;background:#11111999;color:#99a0af;pointer-events:auto}#appView #callStage .call-quality49>span{display:none}#appView #callStage .call-quality49>i{font-size:13px;line-height:1}
html.vh-background53 :is(.managed-avatar-decoration,.mini-profile-effect,.member-nameplate-art53){visibility:hidden}html.vh-background53 *{animation-play-state:paused!important}
@media(max-width:480px){:root{--popup-pad:16px}body .modal .modal-dialog{margin:12px}.server-tag-current{flex-wrap:wrap;gap:10px}.server-tag-live53{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.member-nameplate-art53,.loading-ring53{animation:none!important;transition:none!important}}

/* Source: desktop-v54.css */
/* Source picker is a dark media surface in both application themes. */
.bi-window{--vh-icon:url('icons/window.svg')}
#vhNotificationStack>.vh-notification-card.message-notice{position:relative!important;inset:auto!important;transform:none!important;margin:0!important}
.desktop-settings54 h4{font-size:15px!important;margin:6px 0 0!important;padding:0!important}.desktop-settings54 p{margin:0}.desktop-settings54 .desktop-setting54 input[type=checkbox]{appearance:none!important;width:38px!important;height:22px!important;min-width:38px!important;position:relative!important;border:0!important;border-radius:20px!important;background:#9695a3!important;padding:0!important;box-shadow:none!important}.desktop-settings54 .desktop-setting54 input[type=checkbox]::before{display:none!important}.desktop-settings54 .desktop-setting54 input[type=checkbox]::after{content:''!important;position:absolute!important;left:3px!important;top:3px!important;width:16px!important;height:16px!important;border-radius:50%!important;background:#fff!important;transform:none!important;transition:left .15s ease}.desktop-settings54 .desktop-setting54 input[type=checkbox]:checked{background:var(--accent)!important}.desktop-settings54 .desktop-setting54 input[type=checkbox]:checked::after{left:19px!important}
.screen-picker54{position:fixed;inset:0;z-index:14000;display:grid;place-items:center;background:#0009;padding:14px}.screen-picker-panel54{display:flex;flex-direction:column;width:min(800px,100%);height:min(780px,calc(100dvh - 28px));min-height:240px;background:#1b1b1f;color:#f4f4f7;border:1px solid #3c3c42;border-radius:13px;padding:16px;box-shadow:0 18px 70px #0007}.screen-picker-tabs54{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;border-radius:9px;background:#111113;gap:3px}.screen-picker54 button,.screen-picker54 summary{font:inherit;color:inherit;cursor:pointer}.screen-picker-tabs54 button{display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:6px;background:none;font-size:14px;padding:8px 5px;font-weight:600}.screen-picker-tabs54 button[aria-selected=true]{background:#28282e}.screen-picker-tabs54 i{color:#9e9ea9}.screen-picker-grid54{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:18px 14px;padding:14px 0}.screen-picker54 .screen-source54{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;border:0;background:transparent;padding:0;text-align:left;border-radius:8px}.screen-source-preview54{width:100%;aspect-ratio:16/9;object-fit:contain;background:#060607;border:2px solid transparent;border-radius:8px;display:grid;place-items:center}.screen-source-preview54>.bi{font-size:44px;color:#a3a0b2}.screen-source54:hover .screen-source-preview54,.screen-source54:focus-visible .screen-source-preview54{border-color:#9672ff}.screen-source-name54{display:flex;gap:5px;align-items:center;font-size:12px;font-weight:600;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.screen-source-name54 img{width:17px;height:17px;object-fit:contain}.screen-picker54 footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px}.screen-picker-cancel54{padding:12px 16px;border-radius:8px;background:#323239;border:1px solid #383840;font-size:13px}.screen-picker-options54{display:flex;align-items:center;gap:8px}.screen-option54{position:relative;font-size:13px}.screen-option54>summary{list-style:none;min-width:100px;border:1px solid #3b3b44;border-radius:8px;background:#222226;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:16px}.screen-option54:not(.screen-picker-settings54)>summary::after{content:'⌄'}.screen-option54 summary::-webkit-details-marker{display:none}.screen-option-list54,.screen-picker-settings54>label{position:absolute;right:0;bottom:calc(100% + 8px);background:#2b2b32;border:1px solid #404049;box-shadow:0 10px 28px #0005;border-radius:9px;min-width:180px;overflow:hidden;padding:5px;z-index:2}.screen-option-list54 button{width:100%;border:0;padding:10px;text-align:left;background:none;border-radius:5px;display:flex;justify-content:space-between;font-size:13px}.screen-option-list54 button:hover,.screen-option-list54 button[aria-checked=true]{background:#3b3b43}.screen-option-list54 button[aria-checked=true]::after{content:'✓'}.screen-option-list54 button.locked{color:#e790d0}.screen-picker-settings54>summary{min-width:44px;justify-content:center;padding:13px}.screen-picker-settings54>label{width:250px;display:flex;justify-content:space-between;align-items:center;padding:16px;gap:12px;font-size:12px}.screen-picker-error54{color:#f2a4be;font-size:12px;margin:0}.screen-picker-empty54{grid-column:1/-1;padding:24px;color:#aeabbc}.screen-picker54 :focus-visible{outline:2px solid #aa8dff;outline-offset:2px}.screen-picker54 button:disabled{opacity:.5}
.desktop-settings54{display:grid;gap:20px}.desktop-setting54{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--border)}.desktop-setting54>span{display:grid;gap:5px;font-size:13px}.desktop-setting54 small{color:var(--text-secondary);font-size:12px}.desktop-setting54 select{max-width:230px}.desktop-setting54 input[type=checkbox]{width:36px;height:20px;accent-color:var(--accent);cursor:pointer}.overlay-preview54{display:grid;align-content:center;gap:12px;min-height:180px;background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;padding:20px}.overlay-preview54>div{display:flex;align-items:center;justify-content:center;gap:10px}.overlay-preview54 .avatar{display:grid;place-items:center;width:var(--avatar-size,36px);height:var(--avatar-size,36px);border-radius:50%;background:#7353bd;color:#fff}.overlay-preview54 .speaking{border:2px solid #55c992}.overlay-preview54 b{background:var(--surface);border-radius:6px;padding:3px 8px;font-size:12px}.desktop-note54{padding:14px;border:1px solid #a8884350;background:#ba8a1810;border-radius:8px;font-size:12px}.desktop-shortcut54{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.desktop-shortcut54 kbd{margin-right:auto;padding:8px}.desktop-settings54 .restart54{font-size:12px;color:var(--text-secondary)}
/* Bound the notification avatar independently of generic profile selectors. */
#vhNotificationStack{position:fixed;top:20px;right:20px;z-index:15000;width:min(360px,calc(100vw - 24px));display:grid;gap:8px;pointer-events:none}#vhNotificationStack>.vh-notification-card.message-notice{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;padding:14px!important;width:100%!important;max-height:132px;min-height:76px!important;text-align:left;pointer-events:auto;border-radius:12px!important}#vhNotificationStack .vh-notification-avatar{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;max-height:42px!important;flex:0 0 42px!important;border-radius:50%;font-size:17px!important}#vhNotificationStack .vh-notification-avatar>img:not(.managed-avatar-decoration){width:100%;height:100%;object-fit:cover}#vhNotificationStack .vh-notification-copy{min-width:0;display:grid;gap:3px}#vhNotificationStack .vh-notification-copy>span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:0}#vhNotificationStack .vh-notification-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.screen-picker54{padding:6px}.screen-picker-panel54{padding:10px;height:calc(100dvh - 12px)}.screen-picker-tabs54 button{font-size:11px;gap:4px}.screen-picker54 footer{flex-wrap:wrap}.screen-picker-options54{flex:1;justify-content:flex-end;gap:4px}.screen-option54>summary{min-width:64px;padding:10px 7px;gap:6px}.screen-picker-cancel54{padding:10px}.screen-picker-settings54>summary{min-width:34px}.desktop-setting54{gap:12px}.desktop-setting54 select{max-width:150px}}

/* Source: coins-v54.css */
.vh-coin54{display:inline-block;width:1.25em;height:1.25em;background:url('brand/vhcoin.svg') center/contain no-repeat;vertical-align:-.23em;flex:0 0 1.25em;margin-inline-end:.2em}.vh-currency54{display:inline;white-space:nowrap}.bi-coin::before,.bi-currency-exchange::before{background: url('brand/vhcoin.svg') center/contain no-repeat!important;mask:none!important;-webkit-mask:none!important;width:1.15em;height:1.15em}.guest-profile-card{position:relative;isolation:isolate}.guest-profile-frame54{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:1}.guest-profile-effect54{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:.35;z-index:-1}.guest-profile-avatar{position:relative;overflow:visible!important}.guest-profile-avatar>.guest-decoration54{position:absolute;inset:-13%;width:126%;height:126%;max-width:none;object-fit:contain;pointer-events:none;border-radius:0}.guest-profile-badge54{width:24px;height:24px;object-fit:contain}.guest-nameplate54{position:relative;isolation:isolate}.guest-nameplate54:before{content:'';position:absolute;inset:-4px -8px;border-radius:8px;background:var(--guest-nameplate) right center/cover no-repeat;opacity:.3;pointer-events:none;z-index:-1}
.guest-profile-identity,.guest-profile-cta{position:relative;z-index:2}.guest-profile-effect54{z-index:0}.guest-profile-grid,.guest-profile-tabs{background:color-mix(in srgb,var(--surface,#fff) 92%,transparent)}

/* Source: chrome-v55.css */
/* Shared controls for the website and administration pages. */
html body .glass-icon-btn,html body .glass-icon-btn:hover,html body .glass-icon-btn:focus-visible,html body #miniProfileModal .glass-icon-btn,html body #serverSettings.glass-icon-btn,html body #miniProfileModal.mini-profile49 :is(#miniProfileActions,.mini-profile-tools)>.glass-icon-btn,html body #mediaPreviewModal.media-lightbox52 .modal-header .glass-icon-btn{background:#20202dcc!important;color:#f5f5f8!important;border:0!important;box-shadow:none!important;backdrop-filter:blur(6px);border-radius:8px!important}
body input[type=range]{accent-color:var(--accent);height:16px;max-width:100%;min-width:0}
body input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px}
body input[type=range]::-webkit-slider-thumb{width:11px;height:11px;margin-top:-3px}
body input[type=range]::-moz-range-track{height:4px;border-radius:4px}body input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%}
body input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;padding:0;border:0;box-shadow:none}
body input[type=range]::-webkit-slider-runnable-track{background:var(--border-strong,#7776)}body input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;border:0;border-radius:50%;background:var(--accent);box-shadow:none}
body :is(button,nav,[role=menu],[role=tablist],.channel-entry,.member-item,.user-panel,.call-participant-tile,.modal,dialog,[popover]){user-select:none;-webkit-user-select:none}
body :is(input,textarea,[contenteditable=true],.msg-content,.message-content,.post-comment-text,.profile-card-about p,.mini-profile-bio,.server-preview-copy p){user-select:text;-webkit-user-select:text}
body :is(.modal,dialog,[popover]) :is(input,textarea,[contenteditable=true]){user-select:text;-webkit-user-select:text}
body :is(.modal,dialog,[popover]) :not(input,textarea,[contenteditable=true]){user-select:none;-webkit-user-select:none}

/* Source: interface-v55.css */
/* Controls keep one neutral, translucent treatment in both themes. */
.bi-wifi{--vh-icon:url('icons/wifi-55.svg')}.bi-mic,.bi-mic-fill{--vh-icon:url('icons/mic-55.svg')}.bi-mic-mute,.bi-mic-mute-fill{--vh-icon:url('icons/mic-mute-55.svg')}
html body .panel-resizer52:hover,html body .panel-resizer52:focus-visible{background:transparent!important;border:0!important;outline:0!important}
.panel-resizer52:focus-visible:after{content:'';position:absolute;top:45%;bottom:45%;left:3px;width:1px;background:var(--text-secondary)}
.dock-audio55{display:flex;align-items:center;gap:1px;flex:none}.dock-audio55 .dock-device52{display:flex;align-items:center;flex:none}.dock-audio55 button{padding:3px;width:24px}.dock-audio55 button+button{width:15px}
#voiceDock .voice-dock-head{flex-wrap:wrap;gap:6px!important}#voiceDock .voice-state{min-width:65px;flex:1 1 65px}#voiceDock .voice-state span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#voiceDock .voice-state-icon{width:27px;height:30px}#voiceDock .dock-disconnect52{width:26px;flex:none}#voiceDock.d-none .dock-audio55{display:none}
#channelSidebar>.user-panel .user-panel-actions{max-width:70px}.user-panel-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.has-member-nameplate>.member-nameplate-art53{background-size:auto 100%!important;background-position:right center!important;opacity:.3!important}.has-member-nameplate:hover>.member-nameplate-art53{opacity:.4!important}
body :is(.message-context-menu,.participant-context-menu,.composer-action-menu){overflow-x:hidden!important;scrollbar-width:thin}
body :is(.message-context-menu,.participant-context-menu) label{width:auto!important;min-width:0!important;max-width:100%;margin:0!important;padding:6px 8px!important}
body :is(.message-context-menu,.participant-context-menu) input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:14px;margin:4px 0;background:transparent;padding:0;border:0;box-shadow:none}
body :is(.message-context-menu,.participant-context-menu) input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--border-strong,#7776);border-radius:4px}
body :is(.message-context-menu,.participant-context-menu) input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:var(--accent);width:11px;height:11px;border-radius:50%;margin-top:-3.5px;box-shadow:none;border:0}
#appView #callStage,body #callStage:fullscreen{border:0!important;outline:0!important;box-shadow:none!important}#appView #callStage #callStageControls{border-top:1px solid #ffffff14!important}
#appView #callStage #callStageTiles.has-focus>.call-participant-tile:not(.is-main) .call-tile-avatar{position:absolute!important;top:42%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:40px!important;height:40px!important}
#appView #callStage .call-tile-avatar>img:not(.managed-avatar-decoration){width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%}
#appView #callStage .call-tile-avatar>.managed-avatar-decoration{width:130%!important;height:130%!important;max-width:none!important;inset:-15%!important;object-fit:contain!important}
#appView #callStage #callStageTiles.has-focus>.call-participant-tile:not(.is-main) .call-tile-bottom{padding:5px!important;min-height:25px!important}#appView #callStage #callStageTiles.has-focus>.call-participant-tile:not(.is-main) .call-tile-name{padding:2px 5px!important;line-height:16px;font-size:10px;max-width:calc(100% - 24px)}
#appView #callStage #callStageTiles.has-focus>.call-participant-tile:not(.is-main) .call-tile-menu{width:22px;height:22px;min-width:22px;padding:3px}

#chatPanel.profile-mode>.panel-resizer52,#chatPanel.profile-mode #closeCallChat{display:none!important}#chatPanel.profile-mode .profile-card48{max-width:1050px!important;width:100%!important;margin:auto!important}
html body .voice-message{display:flex!important;align-items:center;gap:10px;width:min(550px,100%);max-width:100%;min-width:0;padding:7px 10px!important;border:1px solid var(--border)!important;border-radius:26px!important;background:transparent!important;box-shadow:none!important}
html body .voice-message .voice-play-btn{width:32px!important;height:32px!important;min-width:32px!important;border:0;border-radius:50%;background:#5479df;color:white;padding:6px!important;display:grid;place-items:center}
html body .voice-message .voice-message-main{display:flex!important;align-items:center;gap:12px;flex:1;min-width:30px}.voice-message .voice-label{display:none!important}.voice-message .voice-message-meta{margin:0!important;flex:none}.voice-message .voice-duration{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}.voice-message .voice-waveform{height:20px!important;min-width:20px;flex:1;gap:2px!important;align-items:center}.voice-message .voice-waveform span{height:6px!important;min-width:2px;width:2px;border-radius:0!important;flex:1;background:var(--text-secondary);opacity:.4}.voice-message .voice-waveform span.played{background:var(--accent);opacity:1}.voice-speed55,.voice-volume55{flex:none;display:grid;place-items:center;height:24px;border:0;border-radius:4px;background:var(--background-secondary);color:var(--text-secondary);padding:3px 7px;font-size:11px}.voice-volume55{width:24px;padding:3px;background:transparent;font-size:16px}
.server-menu-tag55{margin-left:auto;pointer-events:none;flex:none}.server-context-menu51 .vh-context-label{display:flex;align-items:center;gap:8px}
/* Server navigation and its content share the full height of one settings window. */
#serverSettingsModal.server-settings55 .modal-dialog{width:calc(100vw - 40px);max-width:1400px;height:calc(100dvh - 64px);max-height:none;margin:32px auto}
#serverSettingsModal.server-settings55 .modal-content{height:100%;max-height:100%;display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-rows:50px minmax(0,1fr);overflow:hidden}
#serverSettingsModal.server-settings55 .modal-header{grid-column:2;grid-row:1;padding:12px 18px;min-height:50px;z-index:1}#serverSettingsModal .server-settings-header :is(.settings-eyebrow,#serverSettingsSubtitle){display:none}#serverSettingsModal .modal-title{font-size:14px!important}
#serverSettingsModal.server-settings55 .modal-body{display:contents}#serverSettingsModal.server-settings55 .server-settings-layout{display:contents}#serverSettingsModal.server-settings55 .server-settings-nav{grid-column:1;grid-row:1/3;width:auto;display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:20px 16px;overflow:auto;border-right:1px solid var(--border);background:var(--background-secondary)}
.server-nav-label55{font-size:10px;color:var(--text-secondary);font-weight:700;margin:8px 10px;overflow:hidden;text-overflow:ellipsis}.server-nav-label55:not(:first-child){border-top:1px solid var(--border);padding-top:18px;margin-top:16px}
#serverSettingsModal.server-settings55 .settings-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;min-height:36px;width:100%;font-size:13px;text-align:start;border:0;border-radius:7px}.server-settings55 .settings-nav-item i{width:18px;height:18px;font-size:18px;flex:none}
#serverSettingsModal.server-settings55 .server-settings-content{grid-column:2;grid-row:2;min-width:0;overflow:auto;padding:50px clamp(20px,5vw,90px)}
.server-profile-form55{display:flex;flex-direction:column;gap:26px;max-width:664px;margin:0 auto;width:100%;min-width:0}.server-field55{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:13px}.server-field55 .form-control{font-weight:400;min-height:42px}.server-field55 textarea{height:116px;resize:vertical}.server-description-label55{display:flex;justify-content:space-between;gap:10px}.server-description-label55 small{font-weight:400;color:var(--text-secondary)}.server-icon-field55>label{font-size:13px;font-weight:600;display:block;margin-bottom:9px}.server-profile-form55 .server-photo-row{display:flex;align-items:center;gap:12px}.server-upload55{position:relative;width:80px;height:80px;display:grid;place-items:center;border:2px dashed var(--text-secondary)!important;border-radius:10px;padding:0!important;overflow:hidden}.server-upload55 .server-photo-preview{margin:0;width:100%;height:100%;border:0;border-radius:0}.server-upload55 img{width:100%;height:100%;object-fit:cover}.server-upload55>i{position:absolute;inset:0;display:grid;place-items:center;font-size:27px;background:#0006;color:white;opacity:0}.server-upload55:hover>i{opacity:1}.server-profile-save55{display:flex;justify-content:flex-end}
@media(max-width:760px){#serverSettingsModal.server-settings55 .modal-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);margin:8px}#serverSettingsModal.server-settings55 .modal-content{grid-template-columns:1fr;grid-template-rows:48px auto minmax(0,1fr)}#serverSettingsModal.server-settings55 .modal-header{grid-column:1;grid-row:1}#serverSettingsModal.server-settings55 .server-settings-nav{grid-column:1;grid-row:2;flex-direction:row;overflow:auto;padding:8px;border:0;border-bottom:1px solid var(--border)}.server-settings55 .server-nav-label55{display:none}#serverSettingsModal.server-settings55 .settings-nav-item{width:auto;flex:none;white-space:nowrap}#serverSettingsModal.server-settings55 .server-settings-content{grid-column:1;grid-row:3;padding:24px 16px}html body .voice-message{gap:6px}.voice-message .voice-message-main{gap:6px!important}.voice-message .voice-duration{font-size:10px}}

.bi-tag{--vh-icon:url('icons/tag-55.svg')}.bi-upload{--vh-icon:url('icons/upload-55.svg')}.bi-shield-lock{--vh-icon:url('icons/shield-lock-55.svg')}
.server-upload55 .server-photo-preview:not(:has(img)){visibility:hidden}.server-upload55:has(.server-photo-preview:not(:has(img)))>i{opacity:1;background:transparent;color:var(--text-secondary)}
.server-tag-pane55 #serverBoostContent>.server-boost-summary,.server-tag-pane55 #serverBoostContent>.boost-tabs49{display:none!important}.server-tag-pane55 #serverBoostContent{max-width:720px;margin:auto}
html body .voice-message .voice-waveform{gap:0!important}html body .voice-message .voice-waveform span{color:var(--text-secondary);background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px)!important}html body .voice-message .voice-waveform span.played{color:var(--accent)}

/* Source: interface-v56.css */
/* Anchored, theme-aware pickers share geometry and motion. */
@keyframes picker-enter56{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.floating-picker56{animation:picker-enter56 .18s ease-out;isolation:isolate}
body #picker.vh-media-picker{border:1px solid var(--border)!important;border-radius:14px!important;background:var(--surface)!important;color:var(--text-primary)!important;box-shadow:var(--shadow-float);overflow:hidden;padding:0!important}
#picker .vh-media-header{padding:12px;background:var(--surface-soft);border-bottom:1px solid var(--border)}
#picker .vh-media-tabs{display:flex;gap:4px;background:var(--background-primary);border-radius:9px;padding:3px}
#picker .vh-media-tabs button{border:0;border-radius:7px;background:transparent;padding:8px 14px;color:var(--text-secondary)}
#picker .vh-media-tabs button[aria-pressed=true]{background:var(--surface-hover);color:var(--text-primary)}
.vh-media-empty[role=status],.picker-loading56{display:flex;gap:12px;align-items:center;justify-content:center;min-height:130px;color:var(--text-secondary);font-size:13px}
.picker-loading56 .loading-ring53,.vh-media-empty .loading-ring53{display:inline-block;width:22px;height:22px;flex:0 0 22px}
body #soundboardModal.floating-sound56 .modal-dialog{position:fixed!important;bottom:auto!important;transform:none!important;min-height:0!important;max-height:min(530px,calc(100dvh - 20px))!important}
body #soundboardModal.floating-sound56 .modal-content{max-height:inherit!important;border-radius:14px!important;background:var(--surface)!important;color:var(--text-primary);box-shadow:var(--shadow-float)}
body #soundboardModal.floating-sound56 .modal-body{min-height:180px;overscroll-behavior:contain}
body #soundboardModal .soundboard-section[hidden]{display:none!important}
body #soundboardModal .soundboard-list>:is(.picker-loading56,.experience-hint,.text-danger){grid-column:1/-1}
.text-emoji-picker51.floating-picker56{background:var(--surface);color:var(--text-primary);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-float)}
.screen-picker-panel54{background:var(--surface);color:var(--text-primary);border-color:var(--border);box-shadow:var(--shadow-float);animation:picker-enter56 .18s ease-out}
.screen-picker-tabs54{background:var(--background-primary)}.screen-picker-tabs54 button[aria-selected=true]{background:var(--surface-hover)}.screen-picker-tabs54 i{color:var(--text-secondary)}
.screen-picker54 .bi{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex:none;width:18px;height:18px;font-size:18px;line-height:1}
.screen-picker54 .bi:before{width:1em;height:1em;line-height:1}
.screen-picker-cancel54,.screen-option54>summary{background:var(--surface-soft);border-color:var(--border);height:44px}
.screen-picker-cancel54:hover,.screen-option54>summary:hover{background:var(--surface-hover)}
.screen-option54:not(.screen-picker-settings54)>summary:after{content:'';width:14px;height:14px;flex:0 0 14px;background:currentColor;mask:url('icons/chevron-down.svg') center/contain no-repeat;-webkit-mask:url('icons/chevron-down.svg') center/contain no-repeat;transition:rotate .15s ease}
.screen-option54[open]>summary:after{rotate:180deg}
.screen-option54[open]>summary{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.screen-option-list54,.screen-picker-settings54>label{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-float);animation:picker-enter56 .14s ease-out}
.screen-option-list54 button{min-height:40px;align-items:center;gap:20px}.screen-option-list54 button:hover,.screen-option-list54 button[aria-checked=true]{background:var(--surface-hover)}
.screen-option-list54 button[aria-checked=true]:after{content:'';width:16px;height:16px;background:currentColor;mask:url('icons/check2.svg') center/contain no-repeat;-webkit-mask:url('icons/check2.svg') center/contain no-repeat}
.screen-option-list54 button.locked{color:var(--text-secondary)}.screen-picker-error54{color:var(--danger)}.screen-picker-empty54{color:var(--text-secondary)}
.screen-picker-settings54>summary{padding:0;min-width:44px}.screen-picker-options54{gap:10px}
/* System events have no avatar/body columns. */
#messages:not(.profile-surface-list)>.message-row.system-message{display:block!important;grid-template-columns:none!important;width:auto!important;max-width:100%!important;padding:10px 16px!important;white-space:normal;overflow-wrap:anywhere;text-align:center;color:var(--text-secondary);font-size:12px}
#messages:not(.profile-surface-list)>.message-row.missed-call-card{display:grid!important;grid-template-columns:32px minmax(0,1fr) auto!important;grid-template-rows:auto auto;gap:4px 12px!important;align-items:center;align-self:center!important;justify-content:initial!important;width:min(460px,100%)!important;padding:14px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--surface)!important;text-align:left}
#messages>.missed-call-card>i{grid-column:1;grid-row:1/3;font-size:23px;color:var(--danger);align-self:center}#messages>.missed-call-card>b{grid-column:2;grid-row:1;color:var(--text-primary)}#messages>.missed-call-card>span{grid-column:2;grid-row:2;white-space:normal;overflow-wrap:anywhere}#messages>.missed-call-card>button{grid-column:3;grid-row:1/3;min-width:0;width:auto!important;padding:8px 12px;align-self:center}
#messages:not(.profile-surface-list)>.message-row.gift-system-message{display:block!important;grid-template-columns:none!important}
/* Call controls remain legible when the sidebar is narrow. */
#voiceDock .voice-dock-head{gap:10px!important}#voiceDock .dock-audio55{gap:10px}#voiceDock .dock-audio55 .dock-device52{gap:2px;align-items:center}
#voiceDock .dock-call-actions56{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
#voiceDock .dock-audio55 button,#voiceDock .dock-disconnect52{display:inline-flex;align-items:center;justify-content:center;width:28px;min-width:28px;height:32px;padding:0;line-height:1;margin:0}
#voiceDock .dock-audio55 button+button{width:18px;min-width:18px}#voiceDock .dock-audio55 .bi,#voiceDock .dock-disconnect52 .bi{display:inline-block;width:18px;height:18px;font-size:18px;line-height:1}#voiceDock .dock-audio55 button+button .bi{width:13px;height:13px;font-size:13px}
.service-profile56{cursor:default!important;pointer-events:none!important;opacity:1!important}
@media(max-width:450px){#messages:not(.profile-surface-list)>.message-row.missed-call-card{grid-template-columns:28px minmax(0,1fr)!important}#messages>.missed-call-card>button{grid-column:2;grid-row:3;justify-self:start;margin-top:4px}}
@media(prefers-reduced-motion:reduce){.floating-picker56,.screen-picker-panel54,.screen-option-list54,.screen-picker-settings54>label{animation:none}.screen-option54>summary:after{transition:none}}

.server-showcase-top{display:none!important}

/* Source: interface-v57.css */
/* Profile navigation is part of the normal app layout. */
#chatPanel.profile-mode,#chatPanel.profile-mode *,.guest-profile-card,.guest-profile-card *{-webkit-user-select:none!important;user-select:none!important}
#chatPanel.profile-mode :is(input,textarea,[contenteditable=true]){-webkit-user-select:text!important;user-select:text!important}
.has-member-nameplate>.member-nameplate-art53.nameplate-image57,.preview-member>.nameplate-image57{width:100%!important;height:100%!important;object-fit:cover;object-position:right center;opacity:1!important;background:none!important;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 30%,black 100%)!important;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 30%,black 100%)!important;pointer-events:none}
.preview-member.is-preview{position:relative;isolation:isolate;overflow:hidden}.preview-member>.nameplate-image57{position:absolute;inset:0;z-index:-1}.has-member-nameplate::before{background:none!important}
body .server-preview53>.glass-icon-btn{width:36px!important;height:36px!important;min-width:36px!important;flex:0 0 36px;display:grid;place-items:center;padding:0!important}
body #soundboardModal.soundboard-popover52 .modal-header .btn-close{top:10px!important;right:10px!important;width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;margin:0!important;box-sizing:border-box;background-position:center!important;background-size:14px!important;display:grid;place-items:center}
body #soundboardModal .sound-preview-toggle52{top:10px!important;right:52px!important;width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;padding:0!important;display:grid;place-items:center}
body #soundboardModal .sound-search52{height:36px!important;width:calc(100% - 112px)!important}
body #soundboardModal .btn-close::before,body #soundboardModal .btn-close::after{top:50%!important;left:50%!important;transform:translate(-50%,-50%) rotate(45deg)!important}body #soundboardModal .btn-close::after{transform:translate(-50%,-50%) rotate(-45deg)!important}
.store-loader57{padding:28px;min-height:480px}.store-loader57.is-compact{padding:12px 0;min-height:240px}.store-loading-status57{display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:13px;margin-bottom:26px}.store-loading-status57 .loading-ring53{width:24px;height:24px}
.store-skeleton-grid57{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.store-skeleton57{border:1px solid var(--border);border-radius:16px;padding-bottom:18px;overflow:hidden}.store-skeleton57>div{height:160px;background:var(--background-secondary)}.store-skeleton57>span{display:block;width:70%;height:12px;margin:16px;background:var(--border);border-radius:4px}.store-skeleton57>span:last-child{width:40%}.store-skeleton57{animation:store-pulse57 1.4s ease-in-out infinite alternate}@keyframes store-pulse57{to{opacity:.45}}
#shopModal .vh-store-grid{gap:18px;align-items:stretch}#shopModal .vh-store-card{padding:0 0 16px!important;gap:0;border-radius:16px;box-shadow:0 2px 6px #00000004;transition:border-color .15s,box-shadow .15s,transform .15s}#shopModal .vh-store-card:after{display:none}#shopModal .vh-store-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 8px 22px #0000000d}#shopModal .vh-store-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#shopModal .vh-store-card :is(.vh-store-art,.product-preview-stage){height:180px;min-height:180px;border-bottom:1px solid var(--border);margin:0 0 6px}#shopModal .vh-store-card h4{font-size:14px;line-height:1.4;margin:6px 16px 0}#shopModal .vh-store-description{margin:6px 16px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text-secondary);line-height:1.5;height:36px;max-height:36px}
.store-card-foot57{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:auto 16px 0;padding-top:18px}.store-card-foot57 .vh-store-price{margin:0;display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--text-primary)}.store-card-foot57>i{color:var(--text-secondary);font-size:16px}.vh-store-card .vh-store-kind{margin-top:10px!important}
.pro-hero57{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px;border-radius:18px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border));background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--background-elevated)}.pro-kicker57{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--accent)}.pro-hero57 h2{font-size:clamp(23px,2.3vw,32px);font-weight:750;letter-spacing:-.7px;margin:10px 0}.pro-hero57 p{font-size:13px;color:var(--text-secondary);max-width:440px;line-height:1.7;margin:0}.pro-symbol57{width:88px;height:88px;border-radius:25px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);flex:none;font-size:46px;transform:rotate(-8deg)}.pro-active57{display:inline-flex;align-items:center;gap:7px;margin-top:16px;border-radius:20px;padding:7px 12px;background:color-mix(in srgb,#2ea574 12%,var(--surface));color:#21865e;font-size:11px;font-weight:600}
.pro-tabs57{display:flex;gap:24px;border-bottom:1px solid var(--border);margin:24px 0}.pro-tabs57 button{border:0;border-radius:0;background:none;padding:12px 0;color:var(--text-secondary);font-size:13px;border-bottom:2px solid transparent}.pro-tabs57 button[aria-current=true]{color:var(--accent);border-bottom-color:var(--accent)}.pro-benefit-grid57{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:24px}.pro-benefit-grid57 article{padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--background-elevated)}.pro-benefit-grid57 i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent);font-size:21px;margin-bottom:16px}.pro-benefit-grid57 h4{font-size:13px;font-weight:700;line-height:1.4;margin:0 0 7px}.pro-benefit-grid57 p{font-size:12px;line-height:1.6;color:var(--text-secondary);margin:0}.pro-plan-grid57{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:22px}.pro-plan57{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--background-elevated)}.pro-plan57>small{font-size:11px;color:var(--text-secondary)}.pro-plan57>h4{font-size:22px;margin:0}.pro-plan57>strong{display:flex;align-items:center;gap:7px;font-size:26px}.pro-saving57{font-size:11px;color:var(--accent);background:var(--accent-soft);padding:4px 9px;border-radius:6px}.pro-plan-actions57{display:grid;gap:8px;width:100%;margin-top:auto;padding-top:10px}.pro-offers57>h3{font-size:18px}
@media(max-width:900px){.pro-benefit-grid57,.store-skeleton-grid57{grid-template-columns:repeat(2,minmax(0,1fr))}.pro-hero57{padding:22px}.pro-symbol57{width:66px;height:66px;font-size:36px}}
@media(max-width:500px){.pro-benefit-grid57{grid-template-columns:1fr}.pro-symbol57{display:none}.pro-hero57{padding:20px}.store-loader57{padding:18px}.store-skeleton57>div{height:120px}.pro-plan-grid57{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.store-skeleton57{animation:none}#shopModal .vh-store-card{transition:none}}

/* Source: interface-v58.css */
/* Shared settings layout: one sidebar, fixed header, independently scrolling content. */
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .modal-dialog{width:calc(100vw - 40px);max-width:1400px;height:calc(100dvh - 64px);max-height:none;margin:32px auto}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .modal-content{height:100%;max-height:100%;display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-rows:50px minmax(0,1fr) auto;overflow:hidden}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .modal-header{grid-column:2;grid-row:1;padding:8px 18px;min-height:50px;margin:0;border-bottom:1px solid var(--border)}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .modal-title{font-size:14px!important;margin:0}
html body #settingsModal .modal-body,html body #settingsModal .settings-hub,html body #chatAppearanceModal.settings-shell58 .modal-body{display:contents!important}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 :is(.settings-hub-nav,.chat-settings-tabs50,.channel-settings-nav58){grid-column:1;grid-row:1/4;display:flex;flex-direction:column;align-items:stretch;gap:3px;width:auto;overflow:auto;min-height:0;padding:20px 16px;margin:0;border:0;border-right:1px solid var(--border);border-radius:0;background:var(--background-secondary)}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 :is(.settings-hub-nav,.chat-settings-tabs50,.channel-settings-nav58)>button{display:flex;align-items:center;gap:10px;flex:none;width:100%;min-height:36px;padding:9px 10px;margin:0;border:0;border-radius:7px;background:transparent;color:var(--text-secondary);font-size:13px;text-align:left;white-space:normal}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 :is(.settings-hub-nav,.chat-settings-tabs50,.channel-settings-nav58)>button:is([aria-current=true],[aria-selected=true]){background:var(--hover-bg,var(--border));color:var(--text-primary);font-weight:600}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 nav button>i{width:18px;height:18px;flex:none;display:grid;place-items:center;font-size:18px;line-height:1}
.settings-nav-label58{margin:8px 10px;font-size:10px;font-weight:700;color:var(--text-secondary)}.settings-nav-label58:not(:first-child){border-top:1px solid var(--border);margin-top:16px;padding-top:18px}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 :is(.settings-hub-pane,.chat-settings-pane50){grid-column:2;grid-row:2/4;overflow:auto;min-width:0;min-height:0;padding:40px clamp(20px,5vw,90px);margin:0}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 :is(.settings-hub-pane,.chat-settings-pane50)>*{width:100%;max-width:664px;margin-left:auto;margin-right:auto;box-sizing:border-box}
html body #settingsModal .settings-hub-pane>h3{display:none}html body #settingsModal .settings-form{max-width:664px;gap:22px}html body #settingsModal .settings-field{font-size:13px;font-weight:600;gap:8px}html body #settingsModal .settings-field :is(input,textarea,select){font-weight:400;min-height:42px}
html body #channelSettingsModal.settings-shell58 .modal-body{grid-column:2;grid-row:2;min-height:0;overflow:auto;padding:40px max(20px,calc((100% - 664px)/2))}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .modal-footer{grid-column:2;grid-row:3;padding:12px 24px;margin:0}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 [hidden]{display:none!important}
/* Auxiliary purchase/tag/recipient dialogs reuse the standard modal chrome. */
html body dialog.common-dialog58{padding:0;width:min(760px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--background-primary,var(--bg-primary,#191a1f));color:var(--text-primary);box-shadow:0 20px 70px #0004;user-select:none}
html body dialog.common-dialog58[open]{display:flex;flex-direction:column}
html body .common-dialog58.boost-purchase-dialog{width:min(500px,calc(100vw - 32px))}
html body .common-dialog58::backdrop{background:#0007}
html body .common-dialog58 .common-dialog-header58{display:flex;align-items:center;justify-content:space-between;flex:none;gap:16px;padding:12px 18px;min-height:58px;margin:0;border-bottom:1px solid var(--border)}
html body .common-dialog-header58 h5{font-size:16px;line-height:1.35;font-weight:600;margin:0;min-width:0}
html body .common-dialog-close58{display:grid;place-items:center;flex:none;width:36px;height:36px;min-width:36px;padding:0;border:0!important;border-radius:8px;background:transparent;color:var(--text-secondary)}
html body .common-dialog-close58:hover{background:var(--hover-bg,var(--border))}.common-dialog-close58 i{width:18px;height:18px;display:grid;place-items:center;line-height:1}
html body .common-dialog-body58{overflow:auto;overscroll-behavior:contain;min-height:0;padding:22px 24px;font-size:14px;line-height:1.5}
html body .common-dialog-body58 :is(input,textarea){user-select:text}
html body .common-dialog58 :is(.server-tag-dialog-body,.tag-pack-grid,.vh-store-grid){margin:0;padding:0}
html body .common-dialog58 .tag-pack-grid{gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
html body .common-dialog58 .tag-pack-card{padding:18px;gap:10px;min-width:0}html body .common-dialog58 .tag-pack-card h3{font-size:16px;margin:0}html body .common-dialog58 .tag-pack-icons{min-height:120px;gap:18px}
html body .common-dialog58.boost-purchase-dialog form{display:flex;flex-direction:column;gap:16px}html body .common-dialog58.boost-purchase-dialog form>*{margin:0}
/* The artwork belongs to the full member row, including its quick actions. */
html body .member-item-actions.has-member-nameplate{position:relative;isolation:isolate;overflow:hidden;border-radius:8px}
html body .member-item-actions.has-member-nameplate>.member-nameplate-art53{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none;opacity:1!important;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 30%,black 100%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 30%,black 100%)}
html body .member-item-actions.has-member-nameplate>.member-item{background:transparent!important;isolation:auto;min-width:0;flex:1}
html body .member-item-actions.has-member-nameplate>.member-quick-actions{position:relative;z-index:1;padding-right:5px;flex:none}
html body .profile-badge52{display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle;line-height:1!important;flex-shrink:0;width:25px!important;height:25px!important;padding:0!important;margin:0!important}
html body .profile-badge52 :is(img,svg,i){display:block;object-fit:contain;flex:none;max-width:100%;max-height:100%;margin:0;line-height:1}
/* Composer modes occupy the original input area. */
.composer-edit58{display:flex;align-items:center;gap:8px;min-height:38px;padding:5px 10px;border-left:3px solid var(--accent);font-size:12px}.composer-edit58[hidden]{display:none}.composer-edit58>button{margin-left:auto;flex:none;width:30px;height:30px}.composer-edit-error58{color:var(--danger,#e64e65)}
#composer.is-editing58 :is(.draft-hint,#pendingSend){display:none!important}
html body #voiceRecordBar{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;width:100%;margin:0;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--background-secondary);box-sizing:border-box}
html body #voiceRecordBar.d-none{display:none!important}html body #voiceRecordBar .voice-record-copy{flex:none;min-width:0}html body #voiceRecordBar .voice-record-copy b,html body #voiceRecordBar .voice-record-indicator i{display:none}html body #voiceRecordTimer{font:600 12px/1 monospace;color:var(--text-primary)}
html body #voiceRecordBar .voice-record-indicator{width:7px;height:7px;min-width:7px;padding:0;border:0;background:transparent}html body #voiceRecordBar .voice-record-indicator>span{position:static;display:block;width:7px;height:7px;background:#e95858;border-radius:50%}
html body #voiceRecordWave{height:28px;display:flex;align-items:center;justify-content:space-between;gap:3px;flex:1;min-width:20px;overflow:hidden}html body #voiceRecordWave>span{display:block;flex:0 0 2px;min-width:2px;width:2px;max-width:2px;border-radius:2px;background:var(--text-primary);transition:height 80ms linear}
html body #voiceRecordBar .voice-record-action{display:grid;place-items:center;flex:none;width:28px;height:32px;min-width:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-secondary)}
html body #voiceRecordBar #voiceRecordSend{width:40px;height:40px;background:#ee434e;color:white;border-radius:50%;font-size:20px}.voice-record-hint58{font-size:12px;color:var(--text-secondary);white-space:nowrap}
html body .voice-record-lock58{position:absolute;bottom:calc(100% + 10px);right:10px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 10px;border:1px solid var(--border);border-radius:22px;background:var(--background-secondary);color:var(--text-secondary);font-size:16px}.voice-record-lock58[hidden]{display:none!important}
html body #voiceRecordBar.is-paused .voice-record-indicator>span{animation:none}
/* Media remain operable in narrow call sidebars and on phones. */
html body .voice-message{container-type:inline-size;overflow:hidden}html body .voice-message .voice-message-main{gap:8px!important}html body .voice-message .voice-waveform{overflow:hidden}html body .voice-message .voice-waveform:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html body :is(.vh-video-player,.message-video){max-width:100%;min-width:0}html body .vh-video-stage video{width:100%;max-height:65dvh;object-fit:contain}html body .vh-video-controls{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;padding:8px}html body .vh-video-seek{flex:1;min-width:45px;width:auto}html body .vh-video-controls button{display:grid;place-items:center;width:28px;height:28px;flex:none;padding:0}html body .vh-video-time{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}html body .video-speed{max-width:62px;padding:4px;font-size:11px}
html body .persistent-audio{max-width:calc(100vw - 24px);box-sizing:border-box;gap:8px}.persistent-audio-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html body .persistent-audio input[type=range]{min-width:40px;flex:1}
@container(max-width:300px){.voice-message .voice-waveform span:nth-child(n+25){display:none}.voice-message .voice-duration{font-size:10px!important}.voice-message .voice-speed55{padding:3px}.voice-message .voice-message-main{gap:4px!important}}
@media(max-width:760px){html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .modal-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);margin:8px}html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .modal-content{grid-template-columns:minmax(0,1fr);grid-template-rows:48px auto minmax(0,1fr) auto}html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .modal-header{grid-column:1;grid-row:1}html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 :is(.settings-hub-nav,.chat-settings-tabs50,.channel-settings-nav58){grid-column:1;grid-row:2;flex-direction:row;padding:8px;gap:6px;overflow:auto;border-right:0;border-bottom:1px solid var(--border)}html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 nav>button{width:auto!important;white-space:nowrap!important}html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .settings-nav-label58{display:none}html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 :is(.settings-hub-pane,.chat-settings-pane50),html body #channelSettingsModal.settings-shell58 .modal-body{grid-column:1;grid-row:3;padding:20px 16px}html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .modal-footer{grid-column:1;grid-row:4}.voice-record-hint58{display:none}html body #voiceRecordBar{gap:8px;padding:7px 9px}html body .common-dialog-body58{padding:18px}html body .common-dialog58 .server-tag-dialog-body{grid-template-columns:1fr}html body .common-dialog58 .tag-member-examples{display:none}html body .persistent-audio-name{max-width:85px}}
@media(max-width:430px){html body .common-dialog58 .tag-pack-grid{grid-template-columns:1fr}html body .vh-video-seek{order:10;flex-basis:100%}.persistent-audio>small{display:none}}
@media(prefers-reduced-motion:reduce){html body #voiceRecordWave>span{transition:none}}

html body #composer .composer-box.d-none{display:none!important}
html body #settingsModal .settings-form{display:flex;flex-direction:column}
html body #chatAppearanceModal.settings-shell58 .modal-header{padding:8px 18px!important}
html body #chatAppearanceModal.settings-shell58 .modal-header .small{display:none}
html body .profile-badges52{gap:6px;line-height:1;align-items:center}
html body #settingsModal .settings-form>button[type=submit]{align-self:flex-end;width:auto;min-width:112px}
html body #settingsModal .settings-form>button:not([type=submit]){align-self:flex-start;width:auto}
html body #chatAppearanceModal.settings-shell58 .chat-settings-tabs50>button{justify-content:flex-start}
html body #chatAppearanceModal.settings-shell58 .chat-settings-pane50>*{margin-inline:auto}
html body dialog.crop-dialog>header{padding-bottom:12px;border-bottom:1px solid var(--border);gap:16px}
html body dialog.crop-dialog>header h2{font-size:16px;line-height:1.35;margin:0 0 6px}
html body dialog.crop-dialog .crop-close,html body .product-preview-dialog .product-preview-close{width:36px;height:36px;min-width:36px;display:grid;place-items:center;padding:0;border-radius:8px}

/* Source: interface-v59.css */
/* Selection belongs to conversation content. Inputs keep native editing and caret behavior. */
html body,html body *{-webkit-user-select:none!important;user-select:none!important}
html body #messages:not(.profile-surface-list),html body #messages:not(.profile-surface-list) *{-webkit-user-select:text!important;user-select:text!important}
/* One nameplate covers the entire row, including action buttons and checkboxes. */
html body .has-member-nameplate{position:relative;isolation:isolate;overflow:hidden;border-radius:8px}
html body .has-member-nameplate:before{display:none!important}
html body .has-member-nameplate>.member-nameplate-art53{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover;z-index:-1!important;pointer-events:none;opacity:1!important;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 30%,black 100%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 30%,black 100%)}
html body :is(.group-friend-option,.experience-person,.call-person-row).has-member-nameplate{padding:10px;gap:12px;min-width:0}
html body .group-friend-option.has-member-nameplate>input{flex:none}
html body .call-participant-tile .call-tile-bottom{display:flex;align-items:center;gap:5px;min-width:0}
html body .call-participant-tile .call-tile-name{display:inline-flex!important;align-items:center!important;gap:4px;min-width:0;max-width:100%!important;overflow:hidden;padding:5px 7px;line-height:1.2!important;white-space:nowrap}
html body .call-participant-tile .call-tile-label59{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
html body .call-participant-tile .call-tile-name>:not(.call-tile-label59){flex:0 0 auto;margin:0!important}
html body .call-participant-tile :is(.call-tile-state,.call-tile-menu,.call-tile-fullscreen){flex:0 0 auto}
html body .call-participant-tile .call-tile-state:empty{display:none}
html body #callStageTiles.has-focus>.call-participant-tile:not(.is-main) .call-tile-bottom{inset:auto 5px 5px;padding:0!important;gap:3px}
html body #callStageTiles.has-focus>.call-participant-tile:not(.is-main) .call-tile-name{font-size:10px!important;padding:4px 5px;max-width:100%!important}
html body #callStageTiles.has-focus>.call-participant-tile:not(.is-main) .community-tag{display:none!important}
/* The cover clips its image; the frame has a separate layer below the avatar. */
html body .profile-banner-wrap59{position:relative;isolation:isolate;overflow:visible;z-index:1}
html body .profile-banner-wrap59>:is(.managed-banner-frame,.preview-banner-frame),html body #miniProfileModal .mini-profile-banner>.managed-banner-frame{position:absolute;inset:-4%;width:108%;height:108%;object-fit:fill;pointer-events:none;z-index:2}
html body #messages .profile-card49,html body #messages .profile-card49 :is(.profile-card-identity,.inapp-profile-hero){overflow:visible!important}
html body #messages .profile-card49 .profile-card-identity{border-radius:21px 0 0 21px}
html body #messages .profile-card49 .inapp-profile-banner{overflow:hidden!important;z-index:0!important;height:auto!important;aspect-ratio:3/1}
html body #messages .profile-card49 .inapp-profile-identity{position:relative;z-index:3!important}
html body #messages .profile-card49 .inapp-profile-avatar{z-index:5!important}
html body #miniProfileModal:is(.mini-profile49,.mini-profile-popover) :is(.modal-content,.modal-body,.mini-profile-banner){overflow:visible!important}
html body #miniProfileModal .modal-body{border-radius:inherit}
html body #miniProfileModal .mini-profile-banner{isolation:isolate;background:none!important;z-index:2}
html body #miniProfileModal .mini-profile-cover{overflow:hidden!important;border-radius:16px 16px 0 0}
html body #miniProfileModal .mini-profile-avatar{z-index:5!important}
html body #miniProfileModal .mini-profile-top-actions{z-index:6!important}
html body .preview-profile{overflow:visible!important;border-radius:14px}
html body .preview-profile .preview-profile-banner{border-radius:14px 14px 0 0;overflow:hidden}
html body .preview-profile-avatar{position:relative;z-index:5!important}
html body .pack-items59{display:flex;flex-direction:column;gap:10px;margin:8px 0 16px;min-width:0}
html body .pack-count59,html body .pack-selected59{font-size:12px;color:var(--text-secondary);margin:0;line-height:1.5}
html body .pack-choices59{display:flex;gap:8px;flex-wrap:wrap}
html body .pack-item59{width:56px;height:56px;display:grid;place-items:center;border:2px solid transparent;background:var(--background-secondary);border-radius:12px;padding:5px;overflow:hidden}
html body .pack-item59[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--background-elevated))}
html body .pack-item59 :is(img,.preview-avatar){width:100%!important;height:100%!important;object-fit:contain}
html body .pack-item59:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html body #persistentAudio.audio-dock59{display:flex!important;align-items:center;gap:10px;width:560px;max-width:calc(100vw - 24px);padding:12px;border-radius:14px;grid-template-columns:none;min-height:68px;box-shadow:0 8px 28px #0002}
html body #persistentAudio.audio-dock59[hidden]{display:none!important}
html body #persistentAudio.audio-dock59 .voice-play-btn{width:38px;height:38px;min-width:38px;display:grid;place-items:center;border-radius:50%;padding:0;background:var(--accent);color:#fff;border:0}
html body .audio-dock-main59{display:flex;flex-direction:column;flex:1;min-width:0;gap:4px}
html body .audio-dock-wave59{position:relative;height:26px;min-width:0}
html body .audio-dock-bars59{height:100%;display:flex;gap:2px;align-items:center;background:linear-gradient(to right,var(--accent) var(--audio-progress59,0%),var(--text-secondary) var(--audio-progress59,0%));opacity:.85}
html body .audio-dock-bars59>span{flex:1;min-width:1px;background:var(--background-elevated);box-shadow:0 -24px 0 10px var(--background-elevated),0 24px 0 10px var(--background-elevated);border-radius:2px}
html body .audio-dock-bars59{overflow:hidden}
html body .audio-dock-wave59 input[type=range]{position:absolute;inset:0;width:100%!important;height:100%!important;min-width:0!important;opacity:0;margin:0;cursor:pointer}
html body .audio-dock-wave59:focus-within{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
html body .audio-dock-meta59{display:flex;justify-content:space-between;gap:8px;align-items:center;min-width:0}
html body #persistentAudio.audio-dock59 .persistent-audio-name{font-size:10px!important;color:var(--text-secondary);max-width:none}
html body #persistentAudio.audio-dock59 small{display:block!important;white-space:nowrap;font-size:10px;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
html body #persistentAudio.audio-dock59 :is(#audioPlaybackRate,.voice-volume55,.audio-dock-close59){position:static;display:grid;place-items:center;flex:none;height:28px;min-width:28px;width:28px;border:0;border-radius:6px;padding:0;background:transparent;color:var(--text-secondary);font-size:13px}
html body #persistentAudio.audio-dock59 #audioPlaybackRate{background:var(--background-secondary);font-size:11px;width:34px}
html body .vh-custom-emoji59{display:inline-block!important;width:1.35em!important;height:1.35em!important;min-width:0!important;max-height:none!important;object-fit:contain;vertical-align:-.25em;margin:0 .08em;pointer-events:none}
html body #soundboardModal .modal-header{padding-right:52px!important}
@media(max-width:600px){html body #persistentAudio.audio-dock59{gap:7px;padding:10px;width:calc(100vw - 24px)}html body #persistentAudio.audio-dock59 .persistent-audio-name{max-width:72px}html body .audio-dock-bars59>span:nth-child(n+33){display:none}html body .pack-item59{width:48px;height:48px}html body .profile-banner-wrap59>.managed-banner-frame{inset:-4%;width:108%;height:108%}}

html body .audio-dock-bars59{background:none;gap:2px}html body .audio-dock-bars59>span{background:var(--text-secondary);box-shadow:none;opacity:.5}html body .audio-dock-bars59>span.played{background:var(--accent);opacity:1}

html body #miniProfileModal .mini-profile-banner>.mini-banner-frame{inset:-4%!important;width:108%!important;height:108%!important;max-width:none!important;border-radius:0!important;object-fit:fill!important;pointer-events:none;z-index:2}
html body #miniProfileModal .mini-profile-tools{z-index:6!important}

html body #miniProfileModal .modal-dialog{overflow:visible!important}
html body .product-preview-dialog{height:min(720px,calc(100dvh - 40px))}
html body .product-preview-info{min-height:0;max-height:100%;overflow-y:auto}
html body .product-preview-art{min-height:120px;max-height:190px;padding:10px 0}
html body .product-preview-art img{max-height:170px}
html body .pack-choices59{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior:contain;padding-bottom:4px;scrollbar-width:thin}
html body .pack-item59{width:48px;height:48px;flex:none}
@media(max-width:700px){html body .product-preview-info{max-height:none;overflow:visible}html body .product-preview-art{min-height:110px;max-height:160px}}

/* Source: interface-v60.css */
/* Pro checkout shares the native preview dialog, with a compact two-column form. */
html body .product-preview-dialog.pro-offer-dialog{width:min(940px,calc(100vw - 32px));height:fit-content;min-height:0;max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:hidden;display:block;scrollbar-gutter:auto}
html body .pro-offer-dialog .product-preview-info{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);width:100%;padding:0;max-height:calc(100dvh - 34px);overflow:auto;align-items:stretch;scrollbar-width:thin}
html body .pro-details60{min-width:0;background:var(--background-secondary);border-right:1px solid var(--border);padding:0 24px 24px}
html body .pro-details60 .pro-offer-hero{margin:0 -24px 20px;padding:28px 24px;min-height:160px}
html body .pro-details60 .pro-offer-hero h2{font-size:28px}
html body .pro-details60 .pro-offer-hero p{font-size:12px;max-width:280px}
html body .pro-details60 .pro-offer-symbol{font-size:90px;right:8px;top:28px;opacity:.35}
html body .pro-details60>h3{font-size:11px;letter-spacing:.08em;color:var(--text-secondary);margin:0 0 12px}
html body .pro-details60 .pro-offer-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
html body .pro-details60 .pro-offer-benefits>div{padding:9px 8px;gap:8px;background:var(--background-elevated);min-height:46px}
html body .pro-details60 .pro-offer-benefits i{font-size:18px}
html body .pro-details60 .pro-offer-benefits b{font-size:11px}
html body .pro-offer-dialog .product-preview-copy{padding:52px 26px 26px;min-width:0;display:flex;flex-direction:column;gap:12px;justify-content:center}
html body .pro-offer-dialog .product-preview-copy>h2{display:block;margin:0;font-size:23px;line-height:1.25}
html body .pro-offer-dialog .product-preview-price{margin:6px 0 0;color:var(--text-primary);font-size:30px}
html body .pro-offer-dialog .product-preview-copy textarea{min-height:70px;height:80px;max-height:140px;resize:vertical}
html body .pro-offer-dialog .product-preview-actions{margin-top:8px;flex-wrap:wrap}
html body .pro-offer-dialog .product-preview-actions>.btn{flex:1 1 160px;min-height:42px}
html body .pro-offer-dialog .product-preview-close{position:absolute;top:10px;right:10px;width:36px;height:36px;display:grid;place-items:center;padding:0;background:var(--background-elevated);color:var(--text-primary);border:1px solid var(--border);z-index:10}
html body .pro-offer-dialog .pro-period{line-height:1.5}
html body .pro-offer-dialog .product-preview-recipient{padding-top:12px;border-top:1px solid var(--border);overflow-wrap:anywhere}
@media(max-width:640px){html body .product-preview-dialog.pro-offer-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}html body .pro-offer-dialog .product-preview-info{display:block;max-height:calc(100dvh - 22px)}html body .pro-details60{padding:0 18px 18px;border:0;border-bottom:1px solid var(--border)}html body .pro-details60 .pro-offer-hero{margin:0 -18px 14px;min-height:0;padding:22px 52px 22px 18px}html body .pro-details60 .pro-offer-hero h2{font-size:23px}html body .pro-offer-dialog .product-preview-copy{padding:22px 18px}html body .pro-details60 .pro-offer-benefits{grid-template-columns:repeat(3,minmax(0,1fr))}html body .pro-details60 .pro-offer-benefits>div{flex-direction:column;text-align:center;gap:5px;padding:8px 5px}html body .pro-details60 .pro-offer-benefits b{font-size:10px}html body .pro-offer-dialog .product-preview-copy textarea{height:64px;min-height:64px}}
/* Animated character GIFs keep the profile readable and periodically fade away. */
html body :is(.managed-profile-effect,.mini-profile-effect,.preview-profile-effect)[src*="motion=v60"]{object-fit:contain;animation:profile-character60 8s ease-in-out infinite;transform-origin:center;opacity:0}
@keyframes profile-character60{0%,8%,100%{opacity:0;transform:translateY(6px)}24%,65%{opacity:.92;transform:translateY(-3px)}84%{opacity:.35;transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){html body :is(.managed-profile-effect,.mini-profile-effect,.preview-profile-effect)[src*="motion=v60"]{animation:none;opacity:.55}}

/* Source: decoration-layout.css */
/* Shared media layers. Banner dimensions belong to the card, never to its frame. */
html body .vh-avatar{isolation:isolate}
html body .vh-avatar>.vh-avatar-surface{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;border-radius:50%;overflow:hidden;pointer-events:none;z-index:0;font:inherit;line-height:inherit;color:inherit}
html body .vh-avatar>.vh-avatar-surface>img{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center;border-radius:inherit!important;margin:0!important;transform:none!important}
html body .vh-art-slot{position:absolute;display:block;pointer-events:none!important;user-select:none;line-height:0;background:none;border:0;padding:0;margin:0}
html body .vh-avatar>.vh-avatar-decoration-slot{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;z-index:2;overflow:visible!important;box-sizing:border-box;border-radius:0;mask:none!important;-webkit-mask:none!important}
html body .vh-art-slot>:is(img,video){position:absolute!important;display:block!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;pointer-events:none!important}
html body .vh-avatar-decoration-slot>img,
html body :is(#messages,#miniProfileModal) .vh-avatar-decoration-slot>img{inset:auto!important;left:var(--art-x,0%)!important;top:var(--art-y,0%)!important;width:var(--art-width,100%)!important;height:var(--art-height,100%)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;object-fit:fill!important;border-radius:0!important;transform:none!important;translate:none!important;rotate:none!important;scale:none!important;animation:none!important}
html body .vh-avatar>:is(.presence,.mini-presence,.inapp-profile-presence){z-index:4!important}
/* Restore the full-width 3:1 cover. No source-image coordinates resize the card. */
html body .profile-banner-wrap59.vh-banner-canvas,
html body .vh-guest-hero>.vh-banner-canvas{display:block;position:relative;isolation:isolate;aspect-ratio:3/1;height:auto!important;min-height:0!important;width:100%;padding:0;border:0;overflow:visible;z-index:1}
html body .profile-banner-wrap59.vh-banner-canvas>.vh-banner-surface,
html body #messages .inapp-profile .profile-banner-wrap59.vh-banner-canvas>.inapp-profile-banner.vh-banner-surface,
html body .vh-guest-hero>.vh-banner-canvas>.guest-profile-banner{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;box-sizing:border-box;background-size:cover!important;background-position:center!important;object-fit:cover!important;overflow:hidden!important;z-index:0!important}
/* The image already supplies the alpha mask. Only the banner itself clips media;
   the decoration is a sibling plane and must not inherit the banner's rounding. */
html body .vh-banner-canvas>.vh-banner-frame-slot{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:visible!important;z-index:2;box-sizing:border-box;border:0;border-radius:0;mask:none!important;-webkit-mask:none!important}
html body .vh-banner-canvas>.vh-banner-frame-slot>img,
html body :is(#messages,#miniProfileModal) .vh-banner-canvas>.vh-banner-frame-slot>img{inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;border-radius:0!important;transform:none!important;translate:none!important;rotate:none!important;scale:none!important;animation:none!important}
/* 2172x724 reference: a 3:1 corner plane at 82% of the cover width,
   displaced 4% left / 12% up. All dimensions follow the actual banner box. */
html body .vh-banner-canvas>.vh-banner-frame-slot[data-frame-layout=corner]{inset:auto!important;left:-4%!important;top:-12%!important;width:82%!important;height:82%!important}
html body .vh-banner-canvas>.vh-banner-frame-slot[data-frame-layout=custom]{inset:auto!important;left:var(--frame-x,0%)!important;top:var(--frame-y,0%)!important;width:var(--frame-w,100%)!important;height:var(--frame-h,100%)!important}
html body .vh-banner-canvas>.vh-banner-frame-slot:not([data-frame-layout]){visibility:hidden}
/* Keep each surface's original corner radius, with and without a frame. */
html body .preview-profile:has(.vh-has-banner-frame){overflow:visible!important}
/* The avatar and profile text remain above the banner artwork. */
html body #messages .profile-card49 .inapp-profile-identity{position:relative;z-index:5!important;margin-top:-34px!important;padding-left:24px!important}
html body .inapp-profile-avatar,html body .guest-profile-avatar{margin-bottom:max(0px,calc(var(--avatar-art-bottom-px,0px) - 12px))!important}
html body .preview-profile-avatar{position:relative;z-index:5!important;margin-top:-40px!important;margin-bottom:var(--avatar-art-bottom-px,0px)!important;margin-left:max(20px,var(--avatar-art-left-px,0px))!important}
html body #miniProfileModal.mini-profile49 .mini-profile-banner.vh-banner-canvas{position:relative!important;isolation:isolate;aspect-ratio:3/1;height:auto!important;min-height:0!important;width:auto!important;max-width:none!important;margin:0 -18px var(--mini-after-px,43px)!important;padding:0!important;border:0;border-radius:17px 17px 0 0!important;overflow:visible!important;z-index:1}
html body #miniProfileModal.mini-profile49 .mini-profile-banner.vh-banner-canvas>.mini-profile-cover{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;background-size:cover!important;background-position:center!important;overflow:hidden!important;border-radius:17px 17px 0 0!important;z-index:0}
html body #miniProfileModal.mini-profile49 #miniProfileAvatar{position:absolute!important;inset:auto auto -28px 18px!important;width:82px!important;height:82px!important;min-width:82px!important;max-width:82px!important;min-height:82px!important;max-height:82px!important;margin:0!important;z-index:5!important;overflow:visible!important}
html body #miniProfileModal.mini-profile49 .modal-content{border-radius:18px!important;overflow:visible!important;background-clip:padding-box}
html body #miniProfileModal.mini-profile49 .modal-body{border-radius:17px!important}
html body #miniProfileModal .modal-dialog{box-sizing:border-box;padding:var(--mini-frame-pad-top,0px) var(--mini-frame-pad-right,0px) 0 var(--mini-frame-pad-left,0px)!important}
html body #miniProfileModal .modal-dialog:has(.vh-banner-frame-slot:is([data-frame-layout=corner],[data-frame-layout=custom])){border-radius:0!important;max-width:calc(100vw - 20px)!important}
html body #miniProfileModal .mini-profile-tools{z-index:6!important}
html body #miniProfileModal .modal-body>:not(.vh-art-slot,.mini-profile-banner){position:relative;z-index:5}
html body .profile-card-identity,html body .preview-profile{position:relative;isolation:isolate}
html body .vh-effect-slot{inset:0 0 auto;width:100%;height:auto;aspect-ratio:2/3;max-height:100%;z-index:4;overflow:hidden;border-radius:inherit}
html body .vh-effect-slot>:is(img,video){object-fit:contain!important}
html body .vh-effect-slot[data-effect-layout=custom]>:is(img,video),
html body :is(#messages,#miniProfileModal) .vh-effect-slot[data-effect-layout=custom]>:is(img,video){inset:auto!important;left:var(--effect-x,0%)!important;top:var(--effect-y,0%)!important;width:var(--effect-w,100%)!important;height:var(--effect-h,100%)!important}
/* Public profile keeps its original identity below the cover. */
html body .guest-profile-hero.vh-guest-hero{display:block;min-height:0;padding:0;background:var(--background-elevated);color:var(--text-primary)}
html body .guest-profile-hero.vh-guest-hero:before{display:none}
html body .vh-guest-hero .guest-profile-banner{border-radius:21px 21px 0 0}
html body .vh-guest-hero>.guest-profile-identity{position:relative;z-index:5;align-items:flex-start;margin:-34px 0 0;padding:0 28px 20px}
html body .vh-guest-hero .guest-profile-copy{padding-top:44px}
html body .vh-guest-hero .guest-profile-copy h1{color:var(--text-primary)}
html body .vh-guest-hero :is(.guest-profile-handle,.guest-profile-presence){color:var(--text-secondary)}
html body .vh-guest-hero>.guest-profile-cta{position:relative;z-index:5;display:inline-flex;margin:0 28px 22px}
html body .vh-guest-hero .guest-profile-badges .pro-badge{color:var(--accent);background:var(--accent-soft);border-color:var(--border)}
html body .guest-profile-card:has(.vh-has-banner-frame){overflow:visible}
/* WebM uses the same cover box as a still image. */
html body .vh-banner-video{display:block;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;border-radius:inherit;pointer-events:none}
html body .banner-upload-preview>:is(img,video){display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:inherit}
html body .vh-art-slot>[data-profile-motion]{background:none!important;box-shadow:none!important;outline:none!important}
html body .product-art-image:is(video){max-width:100%;max-height:100%;object-fit:contain}
html body :is(.community-link-banner,#profileCoverPreview){position:relative;overflow:hidden}
html body #profileCoverPreview>.vh-banner-video{z-index:0}
html body #profileCoverPreview>:not(.vh-banner-video){position:relative;z-index:1}
html body .asset-preview>video{display:block;max-width:100%;max-height:200px;object-fit:contain;border-radius:10px}
html body #contentList video{display:block;width:72px;height:72px;object-fit:contain;flex-shrink:0;border-radius:8px}

/* Draggable guides use the same renderer as the profile and store. */
.art-anchor-editor[hidden]{display:none!important}.art-anchor-editor>p{grid-column:1/-1;line-height:1.5}
.art-anchor-editor [hidden]{display:none!important}
.art-anchor-columns{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(180px,1fr);gap:36px;align-items:center;padding:18px}
.art-anchor-source{position:relative;width:100%;max-height:420px;background:repeating-conic-gradient(#d8d9df 0 25%,#f5f5f8 0 50%) 0/16px 16px;overflow:hidden}
.art-anchor-source>img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.art-anchor-window{position:absolute;border:2px solid #39e39e;background:#39e39e18;box-shadow:0 0 0 1px #102c28;cursor:move;touch-action:none;box-sizing:border-box}
[data-kind=avatar] .art-anchor-window{border-radius:50%}
.art-anchor-resize{position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;min-height:0;padding:0;background:#39e39e;border:1px solid #102c28;border-radius:3px;cursor:nwse-resize;touch-action:none}
[data-kind=avatar] .art-anchor-resize{right:9%;bottom:9%}
.art-anchor-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.art-anchor-controls label{font-size:12px}
.art-anchor-demo{display:grid;place-items:center;min-height:230px;padding:36px;overflow:visible}
.art-anchor-target{position:relative;isolation:isolate;flex:none}.art-anchor-target.vh-avatar{width:90px;height:90px;aspect-ratio:1}
.art-anchor-target.vh-banner-canvas{width:100%;aspect-ratio:3/1;background:linear-gradient(130deg,#1f3760,#9a6bdd,#d1a6c1);border-radius:10px}
.art-anchor-sample{display:grid;place-items:center;position:absolute;inset:0;background:linear-gradient(135deg,#89c5a3,#5b5590);color:#fff;font-size:24px;font-weight:700;border-radius:50%}
.art-anchor-target.vh-banner-canvas>.art-anchor-sample{border-radius:10px;font-size:16px}
.art-anchor-workspace{min-width:0}
.art-anchor-card{width:100%;min-width:0}.art-anchor-card>.vh-avatar{margin:auto}
.art-anchor-profile-copy{display:none}
.art-anchor-editor:is([data-kind=banner],[data-kind=effect]) .art-anchor-columns{gap:24px;overflow:hidden;padding:30px 16px}
.art-anchor-editor:is([data-kind=banner],[data-kind=effect]) .art-anchor-workspace{padding:36px 20px;min-width:0}
.art-anchor-editor[data-kind=banner] .art-anchor-source{aspect-ratio:3/1;overflow:visible;background:linear-gradient(130deg,#1f3760,#9a6bdd,#d1a6c1);border-radius:10px}
.art-anchor-editor[data-kind=banner] .art-anchor-source>img{position:absolute;max-width:none;max-height:none;object-fit:contain;border-radius:0}
.art-anchor-editor:is([data-kind=banner],[data-kind=effect]) .art-anchor-demo{padding:32px 16px;min-width:0}
.art-anchor-editor:is([data-kind=banner],[data-kind=effect]) .art-anchor-card{border:1px solid var(--border,#d8d9df);border-radius:11px;background:var(--background-elevated,#fff);max-width:320px}
.art-anchor-editor:is([data-kind=banner],[data-kind=effect]) .art-anchor-sample{background:linear-gradient(130deg,#1f3760,#9a6bdd,#d1a6c1);border-radius:10px 10px 0 0;font-size:0}
.art-anchor-editor:is([data-kind=banner],[data-kind=effect]) .art-anchor-profile-copy{position:relative;z-index:5;display:grid;gap:6px;padding:0 16px 20px}
.art-anchor-profile-avatar{display:grid;place-items:center;width:54px;height:54px;border:4px solid var(--background-elevated,#fff);border-radius:50%;margin:-20px 0 8px;color:white;background:#7761ce;font-weight:700;box-sizing:border-box}
.art-anchor-profile-copy>small{opacity:.65}
.art-anchor-source-profile{display:none}
.art-anchor-editor[data-kind=effect] .art-anchor-source{aspect-ratio:2/3;max-width:280px;margin:auto;overflow:hidden;isolation:isolate;border:1px solid var(--border,#d8d9df);border-radius:11px;background:var(--background-elevated,#fff)}
.art-anchor-editor[data-kind=effect] .art-anchor-card{position:relative;isolation:isolate;aspect-ratio:2/3;max-width:280px;overflow:hidden}
.art-anchor-editor[data-kind=effect] .art-anchor-source-profile{display:block;position:absolute;inset:0;pointer-events:none}
.art-anchor-source-banner{height:22.222222%;background:linear-gradient(130deg,#1f3760,#9a6bdd,#d1a6c1)}
html body .art-anchor-editor[data-kind=effect] .art-anchor-source>.art-anchor-media{position:absolute;display:block;max-width:none;max-height:none;object-fit:contain!important;border-radius:0;pointer-events:none;z-index:4}
.art-anchor-editor[data-kind=effect] .art-anchor-window{z-index:6}
.art-anchor-editor[data-kind=effect] .preview-profile-effect{opacity:.3!important}
@media(max-width:650px){.art-anchor-columns{grid-template-columns:1fr}.art-anchor-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* One fixed clipping plane per member; only its image moves and scales. */
html body .vh-nameplate-slot{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;box-sizing:border-box;overflow:hidden!important;border-radius:inherit;z-index:-1;clip-path:inset(0 round 10px);opacity:1!important;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 30%,black 100%)!important;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 30%,black 100%)!important}
html body .vh-nameplate-slot>img{inset:auto!important;left:var(--nameplate-x,0%)!important;top:var(--nameplate-y,0%)!important;width:var(--nameplate-w,100%)!important;height:var(--nameplate-h,100%)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:right center!important}
.art-anchor-member-content{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:8px;pointer-events:none;z-index:1;line-height:1.3}
.art-anchor-member-avatar{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#7761ce;color:white;font-size:11px;font-weight:700}
.art-anchor-member-content>strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.art-anchor-member-actions{display:flex;gap:4px;margin-left:auto;flex:none}.art-anchor-member-actions>i{display:grid;place-items:center;width:27px;height:29px;border:1px solid var(--border,#d8d9df);border-radius:7px;background:var(--background-elevated,#fff);color:var(--text-secondary,#687088);font-size:13px}
.art-anchor-editor[data-kind=nameplate] .art-anchor-columns{gap:24px;padding:30px 0;overflow:hidden}
.art-anchor-editor[data-kind=nameplate] .art-anchor-workspace{padding:30px 16px}
.art-anchor-editor[data-kind=nameplate] .art-anchor-demo{padding:30px 8px;min-height:0;min-width:0}
.art-anchor-editor[data-kind=nameplate] .art-anchor-card{max-width:340px}
.art-anchor-editor[data-kind=nameplate] :is(.art-anchor-source,.vh-nameplate-target){position:relative;width:100%;aspect-ratio:6/1;min-height:52px;background:var(--background-secondary,#f6f6fa);border-radius:10px;isolation:isolate;overflow:visible}
.art-anchor-editor[data-kind=nameplate] .art-anchor-window{z-index:2}


/* Source: interface-v61.css */
/* A nameplate belongs to one participant row, including that row's actions. */
html body #memberList :is(.member-item-actions,.member-item).has-member-nameplate{position:relative!important;isolation:isolate;overflow:visible!important;border-radius:10px!important;margin-block:4px!important;background-image:none!important;box-sizing:border-box;width:100%;height:60px!important;min-height:60px!important;max-height:60px!important;flex-shrink:0}
html body #memberList .has-member-nameplate>.member-nameplate-art53{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;margin:0!important;box-sizing:border-box;object-fit:cover;clip-path:inset(0 round 10px);border-radius:10px!important;background:none!important;z-index:-1!important;pointer-events:none;opacity:1!important}
html body #memberList .member-item-actions.has-member-nameplate{padding:0!important;align-items:center}
html body #memberList .has-member-nameplate>.member-item{background:transparent!important;box-sizing:border-box;height:100%;min-height:0;max-height:100%;margin:0;padding-block:8px}
html body #memberList .has-member-nameplate .member-meta{max-height:42px;min-width:0;overflow:hidden}
html body #memberList .has-member-nameplate .member-name{line-height:20px;white-space:nowrap}
html body #memberList .has-member-nameplate .member-role{line-height:18px;white-space:nowrap}
/* A link preview is a separate card, never glued to the message's text link. */
html body #messages .message-link-preview{display:flex!important;align-items:center;gap:12px;box-sizing:border-box;max-width:100%;width:360px;margin:10px 0 2px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--background-secondary);text-decoration:none!important;color:var(--text-primary);line-height:1.4;white-space:normal;overflow:hidden}
html body #messages .message-link-preview-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:9px;background:var(--accent-soft);font-size:22px;color:var(--accent)}
html body #messages .message-link-preview-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
html body #messages .message-link-preview-copy>b{font-size:13px;overflow-wrap:anywhere;text-decoration:none}
html body #messages .message-link-preview-copy>small{font-size:12px;color:var(--text-secondary);overflow-wrap:anywhere;text-decoration:none}
/* Compact reaction chips, with a stable image/count baseline in both themes. */
html body #messages .reaction-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px;max-width:100%}
html body #messages .reaction-bar>.reaction-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;min-width:0;width:auto;height:32px;min-height:32px;padding:4px 10px;border:1px solid transparent;border-radius:9px;background:color-mix(in srgb,var(--text-primary) 7%,var(--background-primary));color:var(--text-secondary);font-size:13px;font-weight:600;line-height:20px;white-space:nowrap;box-shadow:none}
html body #messages .reaction-bar>.reaction-btn:hover{background:var(--surface-hover,var(--accent-soft));color:var(--text-primary)}
html body #messages .reaction-bar>.reaction-btn.active{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}
html body #messages .reaction-bar>.reaction-btn>.managed-reaction{display:block;width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important;object-fit:contain;margin:0!important;flex:0 0 20px;border-radius:0}
html body #messages .reaction-bar>.reaction-btn[data-emoji="＋"]{width:32px;padding:4px;font-size:20px;font-weight:400;color:var(--text-secondary)}
html body .channel-heading-icon{display:grid;place-items:center;flex-shrink:0;overflow:hidden}
html body .channel-heading-icon>#channelIcon{max-width:100%;max-height:100%}

html body .reaction-symbol{font-size:20px;line-height:20px;display:block}html body .reaction-count{font-variant-numeric:tabular-nums;font-size:13px}

/* A profile pending navigation must never flash inside the call chat column. */
.call-workspace #chatPanel.profile-mode{visibility:hidden}

/* Product artwork follows the same clipping plane and placement as a member row. */
.product-nameplate-art{position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:6/1;border-radius:10px;background:var(--background-secondary)}
.product-preview-art:has(>.product-nameplate-art){flex:0;min-height:112px;padding-block:26px}
.pack-item59>.product-nameplate-art{width:100%;min-width:0}

/* Source: landing-v61.css */
/* Public page only; messenger and desktop login keep their own layouts. */
/* Short entrance transitions, with no rendering loop while the page is idle. */
@keyframes vh-welcome-enter{from{opacity:.25;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vh-scene-enter{from{opacity:.55;transform:scale(1.025)}to{opacity:1;transform:none}}
.landing-slide:not([hidden]) .landing-slide-copy{animation:vh-welcome-enter .55s ease-out both}
.landing-slide:not([hidden]) .landing-scene{animation:vh-scene-enter .75s ease-out both}
#authView .auth-card{position:relative;border:1px solid var(--border);background:var(--background-elevated);padding:32px;border-radius:26px;box-shadow:0 24px 70px #20144214}
#authView .auth-card::before{content:"";position:absolute;top:-1px;left:28px;right:28px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);border-radius:99px;pointer-events:none}
#authView .auth-card .brand-mark{width:48px;height:48px;flex-shrink:0;border-radius:16px;background:linear-gradient(135deg,var(--accent),#a685ff);color:#fff;box-shadow:0 7px 20px #7350cf28}
#authView #authHeading{font-size:24px;line-height:1.15;font-weight:750;letter-spacing:-.035em}
#authView #authDescription{display:block;font-size:12px;line-height:1.6;margin-top:7px}
#authView .auth-tabs{padding:5px;gap:5px;border:1px solid var(--border);border-radius:14px;background:var(--background-primary)}
#authView .auth-tabs .nav-link{border-radius:10px;min-height:42px;color:var(--text-secondary);font-weight:650;transition:background .18s,color .18s,box-shadow .18s}
#authView .auth-tabs .nav-link.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px #7350cf24}
#authForm .form-label{font-size:12px;font-weight:650;margin-bottom:8px;color:var(--text-primary)}
#authForm .input-icon{position:relative}
#authForm .form-control{min-height:50px;border-radius:13px;background:var(--background-primary);border:1px solid var(--border);padding-left:43px;transition:box-shadow .18s,border-color .18s}
#authForm .form-control:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
#authForm #password{padding-right:49px}
#authForm .auth-password-toggle{position:absolute;right:5px;top:5px;bottom:5px;width:40px;display:grid;place-items:center;border:0;background:transparent;border-radius:9px;color:var(--text-secondary)}
#authForm .auth-password-toggle i{position:static;transform:none;color:inherit;pointer-events:none}
#authForm .auth-password-toggle:hover{background:var(--accent-soft);color:var(--accent)}
#authForm .auth-password-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#authForm .btn[type=submit]{min-height:50px;border-radius:13px;font-size:14px;font-weight:700;box-shadow:0 8px 24px #7350cf28;transition:transform .18s,box-shadow .18s}
#authForm .btn[type=submit]:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 28px #7350cf36}
#authForm[data-mode=register] #usernameWrap{animation:vh-welcome-enter .22s ease-out both}
#authView .landing-benefit-grid article{transition:transform .2s,border-color .2s,box-shadow .2s}
@media(hover:hover){#authView .landing-benefit-grid article:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 16px 36px #3020600e}}
#authView .vh-reveal.is-visible{animation:vh-welcome-enter .6s ease-out both}
#authView :is(.install-guide,.landing-security,.landing-more){content-visibility:auto;contain-intrinsic-size:auto 500px}
.social-dashboard .social-hero{position:relative;isolation:isolate;overflow:hidden;min-height:268px;border:1px solid var(--border);border-radius:24px;padding:30px;background:linear-gradient(110deg,var(--background-elevated),var(--accent-soft));box-shadow:0 12px 35px #30206008}
.social-dashboard .social-hero::after{content:"";position:absolute;z-index:-1;inset:0 0 0 45%;background:linear-gradient(90deg,var(--background-elevated),transparent 45%),url('landing/play-800.webp') center right / cover no-repeat;opacity:.4;pointer-events:none}
.social-dashboard .social-hero-copy{position:relative;max-width:70%}
.social-dashboard .social-hero h3{font-size:clamp(24px,2.5vw,34px);font-weight:750;line-height:1.16;letter-spacing:-.035em;margin:12px 0;overflow-wrap:anywhere}
.social-dashboard .social-hero p{font-size:13px;line-height:1.75;max-width:470px;color:var(--text-secondary)}
.social-dashboard .social-hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;margin-top:22px}
.social-dashboard .social-hero-actions .btn{border-radius:11px;min-height:42px;font-size:12px;display:inline-flex;align-items:center;gap:8px}
.social-home-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;font-size:12px}
.social-home-stats>span{display:inline-flex;gap:7px;align-items:center;padding:6px 10px;border-radius:99px;background:var(--background-elevated);border:1px solid var(--border)}
.social-home-stats i{color:var(--success,#42ab81);font-size:7px}
.social-dashboard .social-card{border-radius:19px;box-shadow:0 4px 16px #30206004}
.social-dashboard .friend-row,.social-dashboard .request-row{border-radius:12px;transition:background .16s}
.social-dashboard .friend-row:hover,.social-dashboard .request-row:hover{background:var(--accent-soft)}
.social-dashboard .friends-empty-state{padding:24px 18px;min-height:0}
.social-dashboard .friends-share-card{max-width:100%;flex-wrap:wrap;text-align:left}
.social-dashboard .friends-share-card>div{min-width:0;flex:1 1 160px}
.social-dashboard .friends-share-card code{overflow-wrap:anywhere;white-space:normal}
@media(max-width:600px){#authView .auth-card{padding:24px 20px}.social-dashboard .social-hero{padding:24px 20px}.social-dashboard .social-hero-copy{max-width:100%}.social-dashboard .social-hero::after{opacity:.12;inset:0}.social-dashboard .social-hero-actions{flex-direction:row}}
@media(prefers-reduced-motion:reduce){#authView *,#authView *::before,#authView *::after,.social-dashboard *{animation:none!important;transition:none!important}#authView .landing-benefit-grid article:hover,#authForm .btn[type=submit]:hover{transform:none}}
#authView:not(.desktop-auth-shell){background:radial-gradient(ellipse at 85% 0%,var(--accent-soft),transparent 38%),var(--background-primary)}
#authView:not(.desktop-auth-shell)>.container,#authView:not(.desktop-auth-shell)>.landing-header{width:min(1200px,calc(100% - 48px))}
#authView:not(.desktop-auth-shell) .landing-header{padding-block:22px;border-bottom:0}
.landing-carousel{position:relative;margin:16px 0 0;isolation:isolate;border-radius:28px;overflow:hidden;background:#261545;color:#fff;box-shadow:0 24px 64px #30206018}
.landing-slide{position:relative;min-height:530px;display:flex;align-items:center}
.landing-slide[hidden]{display:none!important}
.landing-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.landing-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,12,62,.87),rgba(36,14,72,.58) 33%,transparent 70%);pointer-events:none}
.landing-slide-copy{position:relative;z-index:1;padding:54px 52px 100px;max-width:54%;box-sizing:border-box}
.landing-eyebrow{display:block;color:#ded0ff;font-size:10px;font-weight:750;letter-spacing:.15em;line-height:1.7}
.landing-slide-copy :is(h1,h2){color:#fff;font-size:clamp(32px,4.2vw,54px);font-weight:800;line-height:1.06;letter-spacing:-.045em;margin:20px 0;max-width:450px}
.landing-slide-copy p{color:#efe7ff;font-size:15px;line-height:1.75;max-width:345px;margin:0 0 26px}
.landing-start{display:inline-flex;align-items:center;gap:22px;min-height:48px;padding:12px 20px;border-radius:13px;background:#fff;color:#392065;text-decoration:none;font-size:14px;font-weight:750;box-shadow:0 5px 24px #21113c26}
.landing-start:hover{background:#e9dfff;color:#291644}.landing-start:focus-visible,.landing-carousel button:focus-visible{outline:3px solid #decaff;outline-offset:4px}
.landing-slide-copy small{display:block;font-size:10px;line-height:1.7;color:#e4d8f7;margin-top:20px;max-width:310px}
.landing-carousel-controls{position:absolute;z-index:2;left:52px;right:30px;bottom:22px;display:flex;align-items:center;gap:6px}
.landing-carousel-controls button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff40;border-radius:50%;color:#fff;background:#28134655}
.landing-carousel-controls button:hover{background:#ffffff24}.landing-slide-dots{display:flex;align-items:center;gap:1px;margin-right:12px}
.landing-slide-dots button{width:30px;border:0;background:transparent}.landing-slide-dots button span{width:6px;height:6px;border-radius:99px;background:#ffffff65;transition:width .2s}
.landing-slide-dots button[aria-pressed=true] span{width:22px;background:#fff}
.landing-slide-counter{font-size:11px;font-variant-numeric:tabular-nums;color:#eadfff;margin-right:auto}
#authView:not(.desktop-auth-shell) .landing-hero{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(32px,7vw,100px);padding:80px 28px}
.landing-auth-title{font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.04em;margin:22px 0}
.landing-auth-points{display:grid;gap:16px;margin-top:28px;font-size:13px;font-weight:550}.landing-auth-points>span{display:flex;align-items:center;gap:12px}.landing-auth-points i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--accent-soft);color:var(--accent);font-size:18px}
#authView:not(.desktop-auth-shell) .auth-card{border-radius:24px;box-shadow:0 18px 65px #3020600b}
#authView:not(.desktop-auth-shell) :is(.landing-benefits,.install-guide,.landing-security){padding:64px 28px}
#authView:not(.desktop-auth-shell) .landing-benefit-grid article{border-radius:22px;background:var(--background-elevated);box-shadow:0 8px 24px #30206004}
#authView:not(.desktop-auth-shell) .landing-pro{margin:24px 0 44px;padding:44px;border-radius:26px;background:linear-gradient(120deg,var(--accent-soft),var(--background-elevated));border:1px solid var(--border)}
#authView .landing-pro,#authView .landing-pro :is(h2,strong){color:var(--text-primary)}
#authView .landing-pro :is(p,li,.landing-pro-offer>span){color:var(--text-secondary)}
#authView .landing-pro .landing-pro-label{color:var(--accent)}
#authView .landing-pro .vh-currency54{color:inherit}
#authView .landing-pro-offer{background:var(--background-elevated);border:1px solid var(--border)}
#authView .landing-pro .btn-primary,#authView .landing-pro .btn-primary span{color:#fff}
#authView:not(.desktop-auth-shell) .landing-more{padding:24px 28px 64px}
.desktop-auth-shell .landing-carousel{display:none}
@media(max-width:960px){.landing-slide-copy{padding-left:32px;max-width:57%}.landing-carousel-controls{left:32px}.landing-slide{min-height:500px}#authView:not(.desktop-auth-shell) .landing-hero{gap:32px;padding:52px 0}}
@media(max-width:760px){.landing-carousel{border-radius:22px}.landing-slide{min-height:650px;align-items:flex-start}.landing-scene{height:350px;object-fit:cover;object-position:80% center}.landing-slide::after{background:linear-gradient(0deg,#261545 0%,#261545 43%,transparent 78%)}.landing-slide-copy{padding:294px 24px 86px;max-width:100%;width:100%}.landing-slide-copy :is(h1,h2){font-size:34px;max-width:360px;margin:12px 0}.landing-slide-copy p{font-size:14px;line-height:1.6;max-width:440px;margin-bottom:20px}.landing-slide-copy small{font-size:10px;margin-top:14px}.landing-eyebrow{font-size:9px}.landing-carousel-controls{left:24px;right:20px;bottom:18px}#authView:not(.desktop-auth-shell) .landing-hero{grid-template-columns:1fr;padding:48px 0}#authView:not(.desktop-auth-shell) :is(.landing-benefits,.install-guide,.landing-security){padding:44px 0}#authView:not(.desktop-auth-shell) .landing-pro{padding:28px 22px}#authView:not(.desktop-auth-shell) .landing-more{padding:12px 0 36px}}
@media(max-width:480px){#authView:not(.desktop-auth-shell)>.container,#authView:not(.desktop-auth-shell)>.landing-header{width:calc(100% - 28px)}.landing-header nav{gap:8px}.landing-header nav a{font-size:11px}.landing-slide-copy{padding-inline:22px}.landing-slide-copy :is(h1,h2){font-size:32px}.landing-slide-dots{margin-right:4px}.landing-carousel-controls{gap:5px}.landing-carousel-controls button{width:34px;height:34px}.landing-slide-dots button{width:28px}.landing-auth-title{font-size:34px}}
@media(prefers-reduced-motion:reduce){.landing-slide-dots button span{transition:none}}

/* Source: community-controls.css */
/* Shared spacing for controls in both the messenger and administration. */
html body .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 16px;line-height:1.35;vertical-align:middle;border-radius:8px;white-space:normal}
html body .btn.btn-sm{min-height:32px;padding:6px 12px}
html body .btn>i{flex-shrink:0;line-height:1;margin:0}
html body :is(.form-control,.form-select):not(textarea){min-height:42px;padding-block:10px;line-height:1.4}
html body textarea.form-control{padding:12px;line-height:1.5}
html body .modal .modal-header{gap:16px;padding:20px 24px}
html body .modal .modal-body{padding:20px 24px}
html body .modal .modal-footer{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 24px}
html body .modal .modal-footer>*{margin:0}
html body :is(.settings-actions,.admin-actions,.content-editor-footer,.managed-form-actions,.profile-action-row,.form-actions){display:flex;align-items:center;flex-wrap:wrap;gap:12px}
html body :is(.settings-form,.managed-form)>.form-label{margin:0 0 8px}
html body :is(.admin-card,.settings-card) :is(h2,h3,h4){line-height:1.35}
html body :is(.modal,dialog,.admin-card) .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.vh-setting-field{display:grid;gap:8px;margin-top:20px;text-align:start}
.vh-setting-field[hidden],.vh-slowmode-hint[hidden]{display:none!important}
.vh-setting-field>label{font-size:14px;font-weight:650;margin:0}
.vh-field-help{color:var(--text-secondary);font-size:12px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.vh-slowmode-hint{display:flex;align-items:center;gap:8px;width:100%;min-width:0;grid-column:1/-1;padding:2px 12px 8px;font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}

html body #messages:not(.profile-surface-list)>.message-row.system-message.vh-call-event{display:flex!important;align-items:center;justify-content:flex-start!important;gap:10px!important;width:100%!important;max-width:none!important;min-height:30px;margin:2px 0!important;padding:5px 20px!important;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--text-secondary);font-size:13px;line-height:20px;text-align:start}
html body #messages .vh-call-event:hover{background:var(--surface-hover)}
#messages .vh-call-event>i{width:24px;flex:0 0 24px;font-size:20px;color:#ef505d}
#messages .vh-call-event.call-started>i{color:#4fb979}
#messages .vh-call-event .vh-call-event-text{min-width:0;overflow-wrap:anywhere}
#messages .vh-call-event time{flex-shrink:0;font-size:11px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;margin-inline-start:-6px}
#messages .vh-call-author{padding:0 3px;margin:0;border:0;border-radius:3px;background:var(--accent-soft);color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
#messages .vh-call-author:hover{text-decoration:underline}
.vh-new-messages{display:flex;align-items:center;gap:0;margin:14px 16px 10px;min-height:14px;color:#f34e5c;position:relative;clear:both;flex-shrink:0}
.vh-new-messages::before{content:"";height:1px;flex:1;background:currentColor}
.vh-new-messages>span{background:#f34e5c;color:#fff;font-size:10px;line-height:15px;font-weight:750;padding:0 6px;border-radius:8px 3px 3px 8px}

html body :is(.vh-person-choice,.group-friend-option.vh-person-choice){display:flex;align-items:center;gap:12px;min-height:60px;width:100%;box-sizing:border-box;padding:10px 12px;margin:0;border:1px solid transparent;border-radius:8px;background:transparent;text-align:start;color:var(--text-primary);box-shadow:none}
html body :is(.vh-person-choice,.group-friend-option.vh-person-choice):hover{background:var(--surface-hover)}
html body .vh-person-choice.is-selected{background:var(--surface-active)}
html body .vh-person-choice>.friend-avatar{width:40px;height:40px;min-width:40px;flex:0 0 40px;border-radius:50%;overflow:hidden;margin:0}
html body .vh-person-choice>:is(.person-copy,div:not(.friend-avatar)){display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;margin:0}
html body .vh-person-choice :is(b,strong){font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .vh-person-choice small{font-size:12px;line-height:17px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .vh-person-choice>input[type=checkbox]{appearance:none;flex:0 0 20px;width:20px;height:20px;padding:0;margin:0 0 0 auto;border:1px solid var(--border-strong);border-radius:6px;background:transparent;cursor:pointer;display:grid;place-items:center}
html body .vh-person-choice>input[type=checkbox]:checked{background:#5865db;border-color:#5865db}
html body .vh-person-choice>input[type=checkbox]::after{content:none}
html body .vh-person-choice>input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vh-person-choice-action{margin-inline-start:auto;font-size:14px;color:var(--text-tertiary)}
.vh-single-selection .vh-person-choice::after{content:"";width:20px;height:20px;flex:0 0 20px;margin-inline-start:auto;border:1px solid var(--border-strong);border-radius:6px}
.vh-single-selection .vh-person-choice.is-selected::after{content:"✓";display:grid;place-items:center;background:#5865db;border-color:#5865db;color:white;font-size:14px}
.vh-selected-people{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:44px;max-height:140px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;background:var(--background-secondary);padding:6px 8px;margin-bottom:12px}
html body .vh-selected-people>input.form-control{flex:1 1 120px;width:auto;min-width:100px;border:0;box-shadow:none;background:transparent;min-height:30px;padding:3px 4px}
html body .vh-person-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;max-width:100%;padding:3px 7px;border:0;border-radius:5px;background:var(--surface-hover);color:var(--text-primary);font:inherit;font-size:12px}
.vh-person-chip>.friend-avatar{width:22px!important;height:22px!important;min-width:22px!important;flex:0 0 22px!important;border-radius:50%;overflow:hidden}
.vh-person-chip>span:not(.friend-avatar){max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vh-people-dialog .modal-footer>.btn{flex:1;min-height:44px}
html body :is(#groupFriendList,#groupMemberFriendList,.forward-targets,.people-list){gap:4px}

.vh-media-upload-modal .modal-dialog{max-width:780px}
.vh-media-upload-layout{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:24px;align-items:start}
html body .vh-media-drop{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;aspect-ratio:1;min-width:0;width:100%;padding:20px;border:1px dashed var(--border-strong);border-radius:8px;color:var(--text-secondary);background-color:var(--background-secondary);background-image:conic-gradient(color-mix(in srgb,var(--text-primary) 5%,transparent) 25%,transparent 0 50%,color-mix(in srgb,var(--text-primary) 5%,transparent) 0 75%,transparent 0);background-size:24px 24px;overflow:hidden}
.vh-media-drop>i{font-size:32px}.vh-media-drop>span{font-size:14px;font-weight:600}.vh-media-drop>small{font-size:12px}
.vh-media-drop.is-dragging,.vh-media-drop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vh-media-drop>img{width:100%;height:100%;object-fit:contain;min-height:0}
.vh-media-upload-fields{display:grid;gap:8px;min-width:0}.vh-media-upload-fields>label{font-size:13px;font-weight:600;margin:12px 0 0}
.vh-field-kicker{font-size:11px;font-weight:650;color:var(--text-tertiary)}
.vh-emoji-preview{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.vh-emoji-preview>div{height:100px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--background-secondary);border-radius:8px;color:var(--text-secondary)}
.vh-emoji-preview-reaction>img{width:22px;height:22px;object-fit:contain}.vh-emoji-preview-large>img{width:48px;height:48px;object-fit:contain}.vh-emoji-preview-large>span{font-size:24px}
.vh-emoji-preview.vh-file-preview{grid-template-columns:1fr}.vh-file-preview>div{height:180px}.vh-file-preview .vh-emoji-preview-large>img{width:100%;height:100%;padding:12px;object-fit:contain}
.vh-media-toolbar{flex-wrap:wrap;gap:8px}.vh-media-toolbar>input{flex:1 1 160px;min-width:0}.vh-media-toolbar>.btn{font-size:12px;min-height:36px;padding:7px 10px}
@media(max-width:600px){html body .modal .modal-header,html body .modal .modal-body{padding:16px}html body .modal .modal-footer{padding:14px 16px;gap:10px}.vh-media-upload-layout{grid-template-columns:1fr}.vh-media-drop{max-height:280px;aspect-ratio:auto;min-height:220px}.vh-media-upload-fields{grid-template-columns:1fr}.vh-emoji-preview>div{height:64px}html body #messages .vh-call-event{padding-inline:12px!important}.vh-new-messages{margin-inline:8px}}
.profile-content-tabs{display:flex;justify-content:flex-start;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:24px}
.profile-content-tabs .btn{min-width:100px}.profile-content-tabs [aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.profile-content-manager{display:grid;gap:20px}.profile-content-manager h4{margin:0;font-size:18px}.profile-content-body{display:grid;gap:18px;min-width:0}.profile-content-body .pack-editor{display:grid;gap:18px}.profile-content-body label{display:grid;gap:8px;font-size:13px}.profile-content-body .pack-owner-list{display:grid;gap:10px}.profile-content-body .pack-editor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}.profile-content-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;padding-top:16px;border-top:1px solid var(--border)}.profile-content-actions:empty{display:none}.pack-upload-preview{display:grid;gap:12px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.pack-upload-preview[hidden]{display:none}.pack-upload-image{width:100%;height:240px;object-fit:contain}.pack-upload-thumbs{display:flex;gap:8px;overflow:auto;padding:4px}.pack-upload-thumbs button{flex:0 0 64px;width:64px;height:64px;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}.pack-upload-thumbs img{width:100%;height:100%;object-fit:contain}.pack-upload-thumbs [aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 :is(.settings-hub-nav,.chat-settings-tabs50,.channel-settings-nav58)>button{justify-content:flex-start;text-align:left}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 .settings-nav-label58{text-align:left;align-self:stretch}
html body :is(#settingsModal,#chatAppearanceModal,#channelSettingsModal).settings-shell58 :is(.settings-hub-pane,.chat-settings-pane50)>*{margin-left:auto;margin-right:auto}
.profile-content-body :is(.pack-editor,.pack-editor>label,.pack-status,.pack-owner-list,.pack-editor-grid,.experience-hint){margin:0}.profile-content-body .pack-editor-grid:empty{display:none}.profile-content-body .pack-editor-sticker>img{height:100px;object-fit:contain}.profile-content-body .pack-upload-preview .experience-hint{overflow-wrap:anywhere}

/* The same image treatment keeps names readable on profile cards and shop previews. */
html body .has-profile-theme,html body #messages .profile-card49 .profile-card-identity.has-profile-theme{background-image:linear-gradient(color-mix(in srgb,var(--background-elevated) 76%,transparent),color-mix(in srgb,var(--background-elevated) 76%,transparent)),var(--profile-theme-image);background-size:cover;background-position:center;background-repeat:no-repeat}

/* Source: settings-controls.css */
/* One content column, with left-aligned fields and explicit action groups. */
html body #settingsModal.settings-shell58 .settings-hub-pane{padding:32px clamp(20px,4vw,64px);text-align:left}
html body #settingsModal.settings-shell58 .settings-hub-pane>:not(h3){max-width:720px}
html body #settingsModal .settings-form{display:grid;gap:20px;margin-block:0}
html body #settingsModal .settings-form>button{width:auto;justify-self:start;margin:0}
html body #settingsModal .settings-form>.settings-error:empty{display:none}
html body .settings-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px;min-width:0;margin:0}
html body .settings-actions>.btn,html body .settings-actions>button{width:auto;flex:0 1 auto;margin:0;min-height:40px;white-space:normal}
html body .settings-form-actions{border-top:1px solid var(--border);padding-top:20px}
html body .settings-icon-button{display:inline-grid;place-items:center;flex:0 0 40px!important;width:40px!important;height:40px;padding:0!important;font-size:18px}
html body .settings-section{display:grid;gap:18px;padding:22px;border:1px solid var(--border);border-radius:12px;background:var(--background-primary);min-width:0;text-align:left}
html body .settings-section :is(h4,p){margin:0}
html body .settings-section h4{font-size:16px;font-weight:650}
html body #settingsModal .settings-device-notifications{margin-top:28px}
html body #settingsModal .settings-shortcut-card{display:grid;gap:12px;padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--background-secondary)}
html body #settingsModal .settings-shortcut-title{font-size:16px;margin:0}
html body .settings-shortcut-row,html body .settings-input-action{display:flex;align-items:center;gap:10px;min-width:0}
html body .settings-shortcut-row>input,html body .settings-input-action>input{min-width:0;flex:1 1 0;width:auto;margin:0}
html body .settings-shortcut-row>button{flex:0 0 auto;min-height:42px;margin:0}
html body #settingsModal .settings-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html body #settingsModal .settings-theme-grid>.theme-choice{display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center;padding:20px;min-height:110px;margin:0;text-align:left;width:100%;border:1px solid var(--border);border-radius:12px;background:var(--background-secondary)}
html body #settingsModal .theme-choice>i{font-size:24px}
html body #settingsModal .theme-choice[aria-pressed=true]{background:var(--accent-soft,#7855dc15);border-color:var(--accent);color:var(--accent)}
html body #settingsModal #accountSecurityContent{padding:0;min-width:0;width:100%;background:transparent}
html body #settingsModal .security-section{padding:0;margin:0}
html body #settingsModal .security-section-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:16px;margin:0 0 20px;padding:0}
html body #settingsModal .security-section-head>div:first-child{flex:1 1 260px;min-width:0}
html body #settingsModal .security-section-head h4{font-size:18px;margin:0 0 8px}
html body #settingsModal .security-section-head p{margin:0;line-height:1.6}
html body #settingsModal .session-actions{flex:0 1 auto}
html body #settingsModal .session-list{display:grid;gap:10px;margin:0}
html body #settingsModal .session-card{display:flex;align-items:center;gap:14px;padding:16px;margin:0;min-width:0;border-radius:12px}
html body #settingsModal .session-copy{flex:1;min-width:0;overflow-wrap:anywhere}
html body #settingsModal .session-copy b{display:flex;flex-wrap:wrap;gap:8px}
html body #settingsModal .session-copy small{display:block;margin-top:5px;line-height:1.5}
html body .settings-invitations{display:grid;gap:20px;text-align:left}
html body .settings-invitations>:is(h3,p){margin:0}
html body .settings-invitations .settings-field{display:grid;gap:8px;font-size:13px;font-weight:600}
html body .settings-invite-editor{display:grid;gap:16px;padding-top:20px;border-top:1px solid var(--border)}
html body .settings-status:empty{display:none}
html body .server-tag-form{display:grid;gap:18px}
html body .server-tag-form>.settings-actions{width:100%;grid-column:1/-1}
html body #channelSettingsModal.settings-shell58 .modal-body{padding:32px clamp(20px,4vw,64px)}
html body #channelSettingsModal .settings-channel-content{max-width:720px;width:100%;margin-inline:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:left}
html body #channelSettingsModal .settings-channel-content>.settings-actions{margin:4px 0 20px}
html body #channelSettingsModal .settings-channel-content>.vh-setting-field{margin-top:20px}
html body #channelSettingsModal .settings-channel-content .form-label{margin:0 0 8px}
html body #channelSettingsModal .settings-channel-content :is(.form-control,.form-select){min-width:0;min-height:42px}
html body #channelSettingsModal .input-group{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0}
html body #channelSettingsModal .input-group>input{flex:1 1 0;width:0}
html body #channelSettingsModal .input-group>button{flex:none;width:44px;margin:0}
html body #channelSettingsModal .modal-footer{gap:10px;align-items:center;justify-content:flex-end}
html body #channelSettingsModal .modal-footer>button{margin:0;min-height:40px}
html body #channelSettingsModal .emoji-input51{display:flex;align-items:center;gap:10px;margin-bottom:20px}
html body #channelSettingsModal .emoji-input51>input{flex:1 1 0;width:0;margin:0!important}
html body #channelSettingsModal .emoji-input51>button{flex:0 0 42px;width:42px;height:42px;margin:0;border:1px solid var(--border)!important;background:var(--background-secondary)!important;color:var(--text-secondary)!important;border-radius:8px}
html body .vh-pro-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;text-align:left}
html body .vh-pro-benefits>li{display:flex;align-items:flex-start;gap:12px;min-width:0;margin:0;padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--background-secondary);color:var(--text-primary);font-size:13px}
html body .vh-pro-benefits>li>i{flex:none;font-size:20px;color:var(--accent);line-height:1.4}
html body .vh-pro-benefits>li>div{display:grid;gap:6px;min-width:0}
html body .vh-pro-benefits b{font-size:14px;line-height:1.5}
html body .vh-pro-benefits span{color:var(--text-secondary);font-size:12px;line-height:1.6}
html body .landing-pro .vh-pro-benefits,html body .pro-media-modal52 .vh-pro-benefits{grid-template-columns:1fr}
html body .landing-pro .vh-pro-benefits>li{padding:10px 0;border:0;background:transparent}
html body .pro-benefits57>.btn{margin-top:20px}
html body .pro-media-modal52 .modal-body{overflow:auto}
html body .pro-media-modal52 .modal-dialog{max-width:720px}
html body .pro-media-modal52 .modal-content{max-height:calc(100dvh - 48px)}
html body .pro-media-modal52 .vh-pro-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
html body .pro-media-modal52 .pro-media-symbol52{font-size:48px}
html body .pro-details60 .vh-pro-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html body .pro-details60 .vh-pro-benefits>li{padding:12px}
/* The same person option is used by gifts, invitations, sharing and groups. */
html body .person-row.person-option.vh-person-choice{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:10px 12px;min-height:64px;width:100%;min-width:0;margin:0;border:1px solid transparent;border-radius:10px;text-align:left;background:transparent;color:var(--text-primary)}
html body .person-row.person-option.vh-person-choice:hover{background:var(--background-secondary)}
html body .person-row.person-option.vh-person-choice:is([aria-checked=true],.is-selected){background:var(--accent-soft,#7855dc12);border-color:var(--accent)}
html body .person-row.person-option.vh-person-choice>.friend-avatar{flex:0 0 40px;width:40px;height:40px;margin:0}
html body .person-row.person-option.vh-person-choice>div:not(.friend-avatar),html body .person-row.person-option.vh-person-choice>.person-copy{flex:1 1 0;display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
html body .person-row.person-option.vh-person-choice>input[type=checkbox]{flex:0 0 20px;width:20px;height:20px;margin:0 0 0 auto}
html body .person-row.person-option.vh-person-choice>button{flex:0 0 auto;margin:0}
html body .person-row.person-option.vh-person-choice small{font-size:12px;color:var(--text-secondary);line-height:1.4;margin:0;text-align:left;align-self:stretch}
/* Fixed square portraits: old group-specific dimensions must not compress them. */
html body :is(#groupFriendList,#groupMemberFriendList,.people-list) .vh-person-choice>.friend-avatar{display:grid;place-items:center;flex:0 0 40px;inline-size:40px;block-size:40px;width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;aspect-ratio:1;margin:0;padding:0}
html body .vh-person-choice>input[type=checkbox]{inline-size:20px;block-size:20px;min-inline-size:20px;place-content:center}
html body .vh-person-choice>input[type=checkbox]::after{content:none!important}
html body .vh-person-choice>input[type=checkbox]::before{margin:0;width:9px;height:5px;border:0;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0)}
html body .vh-person-choice>input[type=checkbox]:checked::before{transform:translateY(-1px) rotate(-45deg)}
html body .vh-recipient-dialog .modal-dialog{width:calc(100% - 32px);max-width:500px;margin-inline:auto}
html body .vh-recipient-dialog .modal-body{display:flex;flex-direction:column;gap:12px;padding:20px 24px;min-height:0}
html body .vh-recipient-dialog .vh-selected-people{flex:none;margin:0}
html body .vh-recipient-dialog .people-list{display:flex;flex-direction:column;min-height:80px;max-height:min(380px,45dvh);overflow-y:auto;overflow-x:hidden;padding:2px}
html body .vh-recipient-dialog .vh-field-help{margin:0}
html body .vh-recipient-dialog .modal-footer{display:flex;align-items:stretch;gap:12px;padding:16px 24px}
html body .vh-recipient-dialog .modal-footer>.btn{flex:1 1 0;margin:0;min-width:0;min-height:44px}
.gift-delivery-status{display:grid;gap:6px;max-height:160px;overflow:auto}
.gift-delivery-person{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.gift-delivery-person>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gift-delivery-person>small{flex:none;color:var(--text-secondary);font-size:11px}
.gift-delivery-person.is-sent>small{color:var(--success,#35a579)}
@media(max-width:700px){
 html body .vh-pro-benefits{grid-template-columns:1fr}
 html body .pro-media-modal52 .vh-pro-benefits{grid-template-columns:1fr}
 html body .pro-details60 .vh-pro-benefits{grid-template-columns:1fr}
 html body #settingsModal.settings-shell58 .settings-hub-pane,html body #channelSettingsModal.settings-shell58 .modal-body{padding:20px 16px}
 html body #settingsModal .settings-theme-grid{grid-template-columns:1fr}
 html body #settingsModal .settings-theme-grid>.theme-choice{flex-direction:row;justify-content:flex-start;align-items:center;min-height:60px;padding:16px}
 html body #settingsModal .session-card{flex-wrap:wrap;padding:12px;gap:10px}
 html body #settingsModal .session-card>.btn{margin-left:50px}
 html body .settings-section{padding:16px}
 html body .settings-shortcut-row{flex-wrap:wrap}
 html body .settings-shortcut-row>input{flex-basis:160px}
}

/* Source: profile-polish.css */
/* Consistent controls for recipient, group and forwarding selection. */
html body :is(#groupFriendList,#groupMemberFriendList,.vh-people-dialog .people-list,.vh-people-dialog .forward-targets){display:flex;flex-direction:column;gap:4px;padding:2px;min-width:0}
html body .vh-people-dialog .vh-person-choice{flex-shrink:0;border-radius:10px;padding:10px 12px;min-height:64px}
html body .vh-people-dialog .vh-person-choice:is(.is-selected,[aria-pressed=true]){background:var(--surface-active,var(--accent-soft));border:1px solid var(--accent)}
html body .vh-people-dialog .vh-person-choice:is(.is-selected,[aria-pressed=true]):hover{background:var(--surface-active,var(--accent-soft))}
html body .vh-person-choice>input[type=checkbox],html body .vh-single-selection .vh-person-choice::after{appearance:none;box-sizing:border-box;display:block;position:static;flex:0 0 20px;width:20px;height:20px;min-width:20px;min-height:20px;margin:0 0 0 auto;padding:0;border:1px solid var(--border-strong);border-radius:6px;background:transparent;box-shadow:none;transform:none;content:''}
html body .vh-person-choice>input[type=checkbox]::before,html body .vh-person-choice>input[type=checkbox]::after{content:none!important}
html body .vh-person-choice>input[type=checkbox]:checked,html body .vh-single-selection .vh-person-choice.is-selected::after{content:'';background:#5865db url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;border-color:#5865db}
html body .vh-person-choice .friend-avatar i,html body .vh-person-chip .friend-avatar i{color:inherit!important}
html body :is(.btn-primary,.profile-inline-action.primary),html body :is(.btn-primary,.profile-inline-action.primary):is(:hover,:focus-visible,:active,.active){color:#fff!important;--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}
html body :is(.btn-primary,.profile-inline-action.primary) :is(i,.bi,span),html body :is(.btn-primary,.profile-inline-action.primary):is(:hover,:focus-visible,:active) :is(i,.bi,span){color:inherit!important}
/* Rich text surface uses the existing textarea-compatible composer API. */
html body #messageInput.message-editor{font:inherit;font-size:15px;line-height:24px;min-height:40px;max-height:160px;overflow-y:auto;overflow-x:hidden;padding:8px;background:transparent;color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere;border:0;outline:0;cursor:text;box-sizing:border-box}
#messageInput.message-editor[data-empty=true]::before{content:attr(data-placeholder);color:var(--text-tertiary);pointer-events:none;float:left;height:0}
#messageInput.message-editor[aria-disabled=true]{cursor:default;opacity:.65}
#messageInput .composer-emoji{display:inline-block;width:24px;height:24px;max-width:24px;object-fit:contain;vertical-align:-5px;margin:0 1px;user-select:all}
@media(max-width:760px){html body #messageInput.message-editor{font-size:16px;padding:8px 4px}}

/* Source: media-settings.css */
/* Width is determined by the chat column, including the narrow in-call sidebar. */
html body #voiceRecordBar{box-sizing:border-box;width:100%;max-width:100%;min-width:0;gap:8px;container-type:inline-size}
html body #voiceRecordWave{flex:1 1 70px;min-width:16px;width:auto;max-width:none}
html body #voiceRecordBar .voice-record-hint58{flex:0 1 auto;min-width:0;white-space:normal;font-size:11px;line-height:1.35;overflow-wrap:break-word}
@container (max-width: 420px){html body #voiceRecordBar .voice-record-hint58{display:none}}
.media-settings{display:grid;gap:28px;width:100%;max-width:720px;min-width:0;text-align:start}
.media-settings>section,.media-settings>div{min-width:0;max-width:100%;box-sizing:border-box}.media-settings .form-select{max-width:100%}
.media-settings h4{font-size:20px;margin:0 0 14px;font-weight:700}.media-settings p{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.6}
.media-settings section+section{border-top:1px solid var(--border);padding-top:26px}.media-settings label{margin:0}.media-settings .settings-field{display:grid;gap:9px;font-size:13px;font-weight:650;min-width:0}
.media-setting-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.media-setting-grid select{min-width:0;text-overflow:ellipsis}
.media-choice{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid transparent;border-radius:10px;margin:4px 0!important;cursor:pointer;background:transparent}
.media-choice:has(input:checked){background:var(--surface-active);border-color:color-mix(in srgb,var(--accent) 32%,var(--border))}.media-choice:hover{background:var(--surface-hover)}
.media-choice input[type=radio]{appearance:auto!important;flex:0 0 20px;width:20px!important;height:20px!important;margin:0!important;accent-color:var(--accent);box-shadow:none!important;padding:0!important;border:0!important}
.media-choice-copy{display:grid;gap:4px;min-width:0}.media-choice-copy b{font-size:14px}.media-choice-copy small{font-size:12px;color:var(--text-secondary);line-height:1.5}
.media-setting-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 0}.media-setting-row>div{min-width:0}.media-setting-row b{display:block;font-size:14px;margin-bottom:6px}.media-setting-row select{width:200px;flex:0 0 200px}
.media-settings input[role=switch]{appearance:none!important;width:42px!important;height:24px!important;flex:0 0 42px;min-height:24px!important;padding:0!important;margin:0!important;border:0!important;border-radius:99px!important;background:var(--text-tertiary)!important;position:relative;cursor:pointer;box-shadow:none!important}
.media-settings input[role=switch]:before{content:''!important;display:block!important;position:absolute!important;width:18px!important;height:18px!important;border:0!important;border-radius:50%!important;background:#fff!important;top:3px!important;left:3px!important;transform:none!important;transition:left .15s}.media-settings input[role=switch]:checked{background:var(--accent)!important}.media-settings input[role=switch]:checked:before{left:21px!important}.media-settings input[role=switch]:after{display:none!important}
.media-settings input[type=range]{width:100%;accent-color:var(--accent);min-height:18px}.media-range-caption{display:flex;align-items:center;justify-content:space-between;gap:12px}.media-range-caption output{font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.media-mic-test{display:flex;align-items:center;gap:18px;margin-top:24px}.media-mic-test button{flex:0 0 auto}.media-meter{display:flex;align-items:center;gap:4px;height:32px;flex:1;min-width:0;overflow:hidden}.media-meter i{width:4px;flex:1;max-width:5px;height:24px;border-radius:3px;background:var(--border)}.media-meter i.lit{background:var(--accent)}
.media-shortcut-section{display:grid;gap:10px}.media-shortcut-control{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--border);border-radius:9px;min-width:0}.media-shortcut-control kbd{margin-right:auto;background:transparent;color:var(--text-primary);box-shadow:none;font:650 14px inherit;overflow-wrap:anywhere}.media-shortcut-control button{flex:0 0 auto;white-space:nowrap}
.media-notice{padding:14px 16px;border:1px solid color-mix(in srgb,#d9a53f 50%,var(--border));background:color-mix(in srgb,#d9a53f 9%,var(--background-elevated));border-radius:9px}.media-notice b{display:block;margin-bottom:6px}.media-footnote{padding:16px;border-radius:9px;background:var(--surface-soft)}
.media-video-preview{display:block;aspect-ratio:16/9;width:100%;object-fit:contain;border-radius:12px;background:var(--background-secondary);margin:16px 0}.media-video-preview.is-mirrored{transform:scaleX(-1)}
.media-settings .settings-error:empty{display:none}.media-settings .settings-error{color:var(--danger)}
html[data-streamer] [data-streamer-private],html[data-streamer] [data-streamer-invite]{visibility:hidden!important;pointer-events:none!important;user-select:none!important}
html[data-streamer] :is(.message-notice,.notification-toast,.game-activity-notice){display:none!important}
@media(max-width:600px){.media-setting-grid{grid-template-columns:1fr;gap:20px}.media-settings{gap:22px}.media-settings h4{font-size:18px}.media-setting-row{gap:16px}.media-setting-row select{width:140px;flex-basis:140px}.media-shortcut-control{flex-wrap:wrap}.media-shortcut-control kbd{flex:1 0 100%}.media-mic-test{flex-wrap:wrap}.media-mic-test .media-meter{flex:1 0 100%}}

html[data-streamer] :is(a[href*='?invite='],a[href*='&invite='],a[href*='/invite/'],.inapp-profile-handle,.profile-mode #channelDescription){visibility:hidden!important;pointer-events:none!important}
.quick-switch-results{display:grid;gap:6px;margin-top:14px}.quick-switch-results button{justify-content:space-between;gap:16px;text-align:start}.quick-switch-results small{color:var(--text-secondary);flex:none}

html[data-streamer] :is(.dm-item-preview,.vh-call-author){visibility:hidden!important;pointer-events:none!important;user-select:none!important}
/* Highlights conceal just the handle without changing message/editor DOM or caret offsets. */
html[data-streamer] ::highlight(vh-streamer-handles){color:transparent;text-shadow:none;text-decoration-color:transparent}
html[data-streamer] [data-streamer-handle-text]::selection{color:transparent;text-shadow:none}
html[data-streamer] [data-streamer-handle-field],html[data-streamer] [data-streamer-handle-fallback]{color:transparent!important;text-shadow:none!important;caret-color:var(--text-primary)}
html[data-streamer] [data-streamer-handle-field]::selection,html[data-streamer] [data-streamer-handle-fallback]::selection{color:transparent;text-shadow:none}
html[data-streamer] select[data-streamer-handle-fallback]{visibility:hidden!important}

/* Source: theme-palettes.css */
/* Palette variants share dark-mode component rules, with independent tokens. */
html[data-app-theme=dark][data-theme-preference=ocean]{
  --background-primary:#13242e;--background-secondary:#0f1c25;--background-tertiary:#1a303c;--background-elevated:#1a303c;
  --surface:#1a303c;--surface-soft:#203946;--surface-hover:#294452;--surface-active:#244657;
  --border:#2d4857;--border-strong:#4b6979;--text-primary:#edf5f8;--text-secondary:#b1c7d2;--text-tertiary:#8daab8;
  --accent:#8fd4ef;--accent-strong:#6cc2e6;--accent-soft:#203e50;--ui-primary:#216d91;--ui-primary-hover:#195c7c;
}
html[data-app-theme=dark][data-theme-preference=forest]{
  --background-primary:#1c2924;--background-secondary:#16211c;--background-tertiary:#25372e;--background-elevated:#25372e;
  --surface:#25372e;--surface-soft:#2c4036;--surface-hover:#354e41;--surface-active:#32513f;
  --border:#3b5246;--border-strong:#577662;--text-primary:#f0f5ef;--text-secondary:#bdcdbf;--text-tertiary:#98af9d;
  --accent:#a6d8ad;--accent-strong:#86c99b;--accent-soft:#2d4938;--ui-primary:#367249;--ui-primary-hover:#2a603c;
}
html[data-theme-preference=ocean],html[data-theme-preference=forest]{
  --bg:var(--background-primary);--bg2:var(--background-secondary);--card:var(--surface);--text:var(--text-primary);--muted:var(--text-secondary);
  --bs-primary:var(--ui-primary);--bs-link-color:var(--accent);--bs-link-hover-color:var(--accent-strong);--bs-tertiary-bg:var(--surface-soft);
}
html[data-theme-preference=ocean] body,html[data-theme-preference=forest] body{background:var(--background-primary);color:var(--text-primary)}
html[data-theme-preference=ocean] .btn-primary,html[data-theme-preference=forest] .btn-primary{--bs-btn-bg:var(--ui-primary);--bs-btn-border-color:var(--ui-primary);--bs-btn-hover-bg:var(--ui-primary-hover);--bs-btn-hover-border-color:var(--ui-primary-hover);background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;color:#fff!important}
html body .theme-choice[data-theme-choice=ocean]>i{background:#13242e;color:#8fd4ef}
html body .theme-choice[data-theme-choice=forest]>i{background:#1c2924;color:#a6d8ad}
html[data-app-theme=dark][data-theme-preference=ash]{
  --background-primary:#28292e;--background-secondary:#222327;--background-tertiary:#303136;--background-elevated:#303136;
  --surface:#303136;--surface-soft:#35363c;--surface-hover:#3c3d44;--surface-active:#3b4260;
  --border:#3e3f47;--border-strong:#555762;--text-primary:#f1f1f3;--text-secondary:#b7b8c2;--text-tertiary:#92949f;
  --accent:#a5b5ff;--accent-strong:#768fea;--accent-soft:#363e5b;--ui-primary:#526dcc;--ui-primary-hover:#465fbb;
}
html[data-app-theme=dark][data-theme-preference=eggplant]{
  --background-primary:#2b242e;--background-secondary:#211c24;--background-tertiary:#332b37;--background-elevated:#332b37;
  --surface:#332b37;--surface-soft:#3a303f;--surface-hover:#44364a;--surface-active:#4b3856;
  --border:#46394c;--border-strong:#625069;--text-primary:#f5eff7;--text-secondary:#c2b5c8;--text-tertiary:#9c8ca3;
  --accent:#d2acee;--accent-strong:#b083d2;--accent-soft:#493452;--ui-primary:#8553aa;--ui-primary-hover:#734498;
}
html[data-theme-preference=ash],html[data-theme-preference=eggplant]{
  --bg:var(--background-primary);--bg2:var(--background-secondary);--card:var(--surface);--text:var(--text-primary);--muted:var(--text-secondary);
  --bs-primary:var(--ui-primary);--bs-link-color:var(--accent);--bs-link-hover-color:var(--accent-strong);--bs-tertiary-bg:var(--surface-soft);
}
html[data-theme-preference=ash] body,html[data-theme-preference=eggplant] body{background:var(--background-primary);color:var(--text-primary)}
html[data-theme-preference=ash] .btn-primary,html[data-theme-preference=eggplant] .btn-primary{--bs-btn-bg:var(--ui-primary);--bs-btn-border-color:var(--ui-primary);--bs-btn-hover-bg:var(--ui-primary-hover);--bs-btn-hover-border-color:var(--ui-primary-hover);background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;color:#fff!important}
html body #settingsModal .settings-theme-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
html body .theme-choice[data-theme-choice]>i{display:grid;place-items:center;width:48px;height:36px;border:1px solid #ffffff30;border-radius:8px;background:#191c26;color:#ebedf7;font-size:20px}
html body .theme-choice[data-theme-choice=light]>i{background:#f6f6fa;color:#252839;border-color:#dedfeb}
html body .theme-choice[data-theme-choice=ash]>i{background:#28292e;color:#f1f1f3}
html body .theme-choice[data-theme-choice=eggplant]>i{background:#2b242e;color:#d2acee}
html body .theme-choice[data-theme-choice=system]>i{background:linear-gradient(90deg,#f6f6fa 50%,#191c26 50%);color:#8c86b0;border-color:#858099}
@media(max-width:520px){html body #settingsModal .settings-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}html body #settingsModal .settings-theme-grid>.theme-choice{flex-direction:column!important;align-items:flex-start!important;padding:16px;font-size:12px;word-break:normal;overflow-wrap:normal;white-space:normal}html body #settingsModal .settings-theme-grid>.theme-choice>i{flex:0 0 36px;width:48px}}

html body .theme-choice[data-theme-choice=ocean]>i{background:#13242e;color:#8fd4ef;border-color:#4b6979}
html body .theme-choice[data-theme-choice=forest]>i{background:#1c2924;color:#a6d8ad;border-color:#577662}

/* Source: server-tools.css */
/* Compact, consistent settings controls in every palette. */
html body .pro-tabs57{display:flex;gap:6px;width:max-content;max-width:100%;padding:5px;margin:24px 0;border:1px solid var(--border);border-radius:10px;background:var(--background-secondary)}
html body .pro-tabs57 button{padding:10px 18px;min-height:40px;border:0;border-radius:7px;margin:0;background:transparent;color:var(--text-secondary);font-weight:600;white-space:normal}
html body .pro-tabs57 button[aria-current=true]{background:var(--ui-primary,var(--accent));color:#fff!important;box-shadow:0 2px 5px #00000014}
html body .pro-tabs57 button:not([aria-current=true]):hover{background:var(--surface-hover);color:var(--text-primary)}
html body .vh-selected-people>.form-control:focus{background:transparent!important;box-shadow:none}
html body #settingsModal .settings-profile-head{grid-column:1/-1;display:flex;align-items:center;gap:20px;margin:0 0 4px}
html body #settingsModal .settings-profile-avatar{flex:0 0 72px;width:72px;height:72px;margin:0}
html body #settingsModal .settings-profile-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
html body #settingsModal .settings-profile-actions>button{margin:0;min-height:40px;width:auto;white-space:nowrap}
html body #attachmentList.is-empty{display:flex!important;flex:1;flex-direction:column;min-height:240px;grid-template-columns:none;padding:12px}
html body #attachmentList.is-empty>.attachment-panel-empty{width:100%;max-width:none;min-width:0;margin:auto 0;padding:24px 16px;box-sizing:border-box;gap:8px}
html body .attachment-panel-empty b{font-size:12px}html body .attachment-panel-empty span{font-size:11px;line-height:1.5}
html body dialog.common-dialog58.quick-switch-dialog{width:min(560px,calc(100vw - 28px));max-width:560px;max-height:min(680px,calc(100dvh - 40px));padding:0}
html body .quick-switch-dialog .common-dialog-body58{display:flex;flex-direction:column;gap:14px;padding:20px;overflow:hidden;min-height:0}
html body .quick-switch-results{display:flex;flex-direction:column;gap:5px;overflow:auto;max-height:min(430px,calc(100dvh - 230px));margin:0;padding:3px}
html body .quick-switch-row{display:flex;align-items:center;gap:12px;flex:none;width:100%;min-height:64px;padding:10px 12px;text-align:left;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-primary)}
html body .quick-switch-row:hover,html body .quick-switch-row[aria-selected=true]{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 55%,var(--border));color:var(--text-primary)}
.quick-switch-avatar{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--surface-hover);font-size:20px;overflow:hidden}.quick-switch-avatar img{width:100%;height:100%;object-fit:cover}
.quick-switch-copy{flex:1;min-width:0;display:grid;gap:3px}.quick-switch-copy>b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quick-switch-copy>small{font-size:11px;color:var(--text-secondary)}.quick-switch-kind{flex:none;font-size:10px;color:var(--text-secondary)}.quick-switch-hint{padding:0 3px;color:var(--text-secondary);font-size:11px}.quick-switch-empty{padding:24px;text-align:center;color:var(--text-secondary)}
.server-tools-pane{width:100%;max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:22px}.server-tools-pane>p{margin:0}.server-tools-pane h3{font-size:16px;font-weight:650;margin:0 0 14px}.server-tools-pane .settings-field{display:grid;gap:8px;font-size:13px}.server-tools-pane .settings-form{display:grid;gap:20px}.server-tools-pane .settings-form>button{justify-self:start;min-height:40px}.server-tools-toggle{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--border);font-weight:600}.server-tools-toggle input{flex:none;width:22px;height:22px;margin:0}.server-welcome-preview{padding:20px;border:1px solid var(--border);border-radius:10px;background:var(--background-secondary);white-space:pre-wrap;overflow-wrap:anywhere}
.server-tools-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.server-tools-toolbar>button{width:auto;min-height:42px;margin:0}.server-media-drop{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 16px;width:100%;padding:22px;text-align:left;border:2px dashed var(--border);border-radius:12px;background:transparent;color:var(--text-primary)}.server-media-drop>i{font-size:26px;color:var(--text-secondary)}.server-media-drop>small{flex-basis:100%;font-size:12px;color:var(--text-secondary)}.server-media-drop.is-dragging{background:var(--accent-soft);border-color:var(--accent)}
.server-tools-list{border:1px solid var(--border);border-radius:12px;overflow:hidden}.server-tools-row{display:flex;align-items:center;gap:18px;padding:16px;min-width:0}.server-tools-row+.server-tools-row{border-top:1px solid var(--border)}.server-tools-copy{flex:1;min-width:0;display:grid;gap:7px}.server-tools-copy>small{color:var(--text-secondary);font-size:12px;overflow-wrap:anywhere}.server-media-art{width:40px;height:40px;flex:none;object-fit:contain;font-size:25px;display:grid;place-items:center}.server-tools-actions{display:flex;flex:none;gap:8px}.server-tools-actions>.server-tool-icon{display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;margin:0;border-radius:8px}.server-tool-danger{color:var(--danger,#db5265)!important}.server-tool-danger:hover{background:color-mix(in srgb,#db5265 12%,var(--surface))!important}.server-tools-empty{display:grid;justify-items:center;gap:10px;padding:32px 20px;color:var(--text-secondary);text-align:center}.server-tools-empty>i{font-size:26px}.server-tools-empty>b{font-size:13px}.server-ban-form{display:grid;gap:12px}.server-ban-form>button{justify-self:start}.server-tools-person{display:flex;align-items:center;gap:12px;min-width:0}.server-tools-person>.avatar{width:38px;height:38px;flex:none;overflow:hidden;border-radius:50%}.server-tools-person-copy{min-width:0;display:grid;gap:3px}.server-tools-person-copy small{font-size:12px;color:var(--text-secondary)}
/* Text inputs keep native form semantics; visible text uses the chat editor. */
html body input.vh-rich-source,html body textarea.vh-rich-source{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)}
html body .vh-rich-field{min-width:0;min-height:42px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;line-height:1.5;display:block;overflow:auto;max-height:160px}
html body .vh-rich-field:not(.vh-rich-multiline){white-space:pre;overflow-x:auto;overflow-y:hidden;max-height:44px}
html body .vh-rich-field[data-empty=true]:before{content:attr(data-placeholder);color:var(--text-tertiary);pointer-events:none}.vh-rich-field[aria-disabled=true]{opacity:.6}.vh-rich-field[aria-invalid=true]{border-color:var(--danger,#db5265)}
html body .vh-rich-field .composer-emoji{display:inline-block;width:1.35em;height:1.35em;object-fit:contain;vertical-align:-.28em;margin:0 1px}
html body .emoji-input51>.vh-rich-field{flex:1 1 0;width:0;margin:0}html body .vh-selected-people>.vh-rich-field{flex:1 1 120px;min-height:30px;padding:3px 4px;border:0;box-shadow:none;background:transparent}.vh-rich-multiline{min-height:100px!important}
@media(max-width:760px){#serverSettingsModal.server-settings55 .settings-nav-label58{display:none}.server-tools-row{gap:10px;padding:12px}.server-tools-toolbar{align-items:flex-start;flex-direction:column}.server-tools-row>.btn{font-size:12px}.quick-switch-kind{display:none}html body #settingsModal .settings-profile-head{align-items:flex-start}.settings-profile-actions{flex-direction:column;align-items:stretch!important}}

/* Keep the public Pro overview balanced without a long empty offer column. */
html body #authView .landing-pro{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
html body #authView .landing-pro .vh-pro-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
html body #authView .landing-pro .vh-pro-benefits>li{padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--background-primary)}
html body #authView .landing-pro-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;padding:24px;align-items:center}
html body #authView .landing-pro-offer>strong{grid-column:1;font-size:24px;margin:0}
html body #authView .landing-pro-offer>p{grid-column:1;margin:0}
html body #authView .landing-pro-offer>.btn{grid-column:2;grid-row:1/4;max-width:320px;width:100%;margin:0}
@media(max-width:1000px){html body #authView .landing-pro .vh-pro-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){html body #authView .landing-pro .vh-pro-benefits{grid-template-columns:1fr}html body #authView .landing-pro-offer{grid-template-columns:1fr}html body #authView .landing-pro-offer>.btn{grid-column:1;grid-row:auto;max-width:none}}

/* Align emoji actions with the name field, keeping uploader text below it. */
html body .server-tools-row:has(input){align-items:flex-start}
html body .server-tools-row:has(input) .server-tools-actions{align-self:flex-start;margin:0;padding:0;align-items:center;height:42px;gap:8px}
html body .server-tools-row:has(input) .server-media-art{margin-top:1px}
html body .server-tools-row:has(input) .server-tool-icon{flex:0 0 36px;width:36px;height:36px;min-height:36px;max-height:36px;margin:0}
@media(max-width:480px){html body .server-tools-row:has(input){display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px 12px}html body .server-tools-row:has(input) .server-tools-actions{grid-column:2;justify-self:end;height:auto}}

/* Source: profile-effects.css */
.vh-procedural-effect{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:inherit;background-size:100% 100%}
.vh-procedural-effect.is-animated{background-size:300% 300%;animation:vh-profile-gradient 12s ease-in-out infinite alternate}
@keyframes vh-profile-gradient{from{background-position:0% 50%}to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.vh-procedural-effect.is-animated{animation:none!important;background-position:50% 50%}}
.content-effect-swatch{position:relative;inset:auto;flex:0 0 56px;width:56px;height:56px;border-radius:10px}
.profile-effect-colors{display:flex;gap:16px;flex-wrap:wrap}.profile-effect-colors label{flex:1;min-width:100px}.profile-effect-colors input{width:100%;height:44px;padding:4px}
.profile-effect-live-preview{position:relative;isolation:isolate;min-height:160px;border:1px solid var(--border);border-radius:12px;background:var(--background-secondary);overflow:hidden}.profile-effect-sample{position:relative;z-index:1;padding:65px 24px;font-size:16px;font-weight:650;text-align:center;color:var(--text-primary)}

.product-effect-art{position:relative;inset:auto;width:120px;height:120px;flex:none;border-radius:16px}
html body .vh-procedural-effect{opacity:var(--vh-effect-opacity,.45)!important}
html body .vh-effect-slot:has(>.vh-procedural-effect){inset:0;height:100%;aspect-ratio:auto;z-index:0}
html body :is(.preview-profile,.inapp-profile-hero,.guest-profile-hero):has(>.vh-effect-slot>.vh-procedural-effect){position:relative;isolation:isolate}
html body :is(.preview-profile,.inapp-profile-hero,.guest-profile-hero):has(>.vh-effect-slot>.vh-procedural-effect)>:not(.vh-effect-slot){position:relative;z-index:1}
html body #miniProfileModal .modal-body:has(>.vh-procedural-effect){isolation:isolate}
html body #miniProfileModal .modal-body>.vh-procedural-effect{position:absolute!important;z-index:0!important}
@media(prefers-reduced-motion:reduce){html body .vh-procedural-effect{display:block!important;animation:none!important}}

html[data-theme-preference=ocean] .preview-example-button,html[data-theme-preference=forest] .preview-example-button{background:var(--ui-primary);color:#fff}

/* Source: landing-public.css */
/* Public site layout. All dimensions are contained within the page column. */
html body #authView:not(.desktop-auth-shell){background:var(--background-primary);overflow-x:clip}
html body #authView:not(.desktop-auth-shell)>.container,
html body #authView:not(.desktop-auth-shell)>.lp-header62{width:min(1200px,calc(100% - 64px));max-width:none;margin-inline:auto;padding-inline:0}
html body #authView .public-only62{box-sizing:border-box;min-width:0}
html.desktop-auth .public-only62,html body #authView.desktop-auth-shell .public-only62{display:none!important}
#authView :is(.lp-section62,.lp-pro62,#landingAccount){scroll-margin-top:24px}
#authView :is(.lp-hero62,.lp-section62,.lp-pro62,.lp-install-grid62,.lp-header62,.lp-footer62) :is(a,button,summary):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
#authView .lp-header62{display:flex;align-items:center;gap:28px;padding:24px 0;border-bottom:1px solid var(--border)}
.lp-brand62{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:800;letter-spacing:-.5px;text-decoration:none;color:var(--text-primary);flex:none}
.lp-brand62 img{flex:none}.lp-brand62:hover{color:var(--accent)}
.lp-nav62{display:flex;align-items:center;gap:26px;margin-inline:auto;min-width:0}
.lp-nav62>a,.lp-footer62 nav>a{display:flex;align-items:center;min-height:44px;color:var(--text-secondary);text-decoration:none;font-size:13px;font-weight:550}
.lp-nav62>a:hover,.lp-footer62 nav>a:hover{color:var(--accent)}
.lp-header-actions62{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.lp-header-actions62 .locale-switcher{max-width:145px}.lp-header-actions62 .locale-switcher select{max-width:100%}
html body #authView .lp-menu62{display:none;width:42px;height:42px;padding:0;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--background-elevated);color:var(--text-primary);font-size:22px}
html body #authView .lp-login62{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 18px;white-space:nowrap;border:1px solid var(--border);border-radius:10px;color:var(--text-primary);text-decoration:none;font-size:13px;font-weight:650;background:var(--background-elevated)}
#authView .lp-hero62{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:52px;padding:76px 0 56px}
.lp-eyebrow62{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:750;letter-spacing:.14em;line-height:1.7;color:var(--accent)}
.lp-eyebrow62>.bi{font-size:18px}
#authView .lp-hero-copy62{min-width:0}
#authView .lp-hero-copy62 h1{font-size:clamp(34px,3.6vw,50px);font-weight:800;line-height:1.14;letter-spacing:-.04em;color:var(--text-primary);margin:20px 0}
#authView .lp-hero-copy62 h1>span{color:var(--accent)}
#authView .lp-hero-copy62>p{font-size:16px;line-height:1.8;color:var(--text-secondary);max-width:510px;margin:0 0 28px}
#authView .lp-hero-copy62>small{display:block;font-size:11px;color:var(--text-secondary);line-height:1.8;margin-top:17px}
.lp-actions62{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html body #authView :is(.lp-actions62,.lp-start62,.lp-install-grid62,.lp-pro-offer62) .btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:46px;padding:12px 18px;border-radius:10px;line-height:1.5;font-size:13px;font-weight:650;white-space:normal;text-align:center;max-width:100%;margin:0}
html body #authView :is(.lp-actions62,.lp-start62,.lp-install-grid62,.lp-pro-offer62) .btn-primary{background:var(--ui-primary,var(--accent));border-color:var(--ui-primary,var(--accent));color:#fff!important}
html body #authView :is(.lp-actions62,.lp-start62,.lp-install-grid62,.lp-pro-offer62) .btn-primary:hover{background:var(--ui-primary-hover,var(--accent-strong));border-color:var(--ui-primary-hover,var(--accent-strong));color:#fff!important}
html body #authView :is(.lp-actions62,.lp-start62,.lp-install-grid62,.lp-pro-offer62) .btn-primary .bi{color:inherit}
.lp-hero-art62{position:relative;min-width:0;padding-bottom:28px}
.lp-hero-art62>img{display:block;width:100%;height:380px;object-fit:cover;object-position:73% center;border-radius:28px;background:#ad85f6;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border))}
.lp-voice-card62{position:absolute;left:24px;right:24px;bottom:0;display:flex;align-items:center;gap:14px;padding:18px;background:var(--background-elevated);border:1px solid var(--border);border-radius:15px;box-shadow:0 14px 30px #21163412;color:var(--text-primary)}
.lp-voice-card62>div{display:grid;gap:6px;min-width:0;flex:1}.lp-voice-card62 b{font-size:14px}.lp-voice-card62 div>span{font-size:11px;color:var(--text-secondary);line-height:1.5}.lp-voice-card62>.bi{font-size:24px;color:var(--accent)}
.lp-voice-icon62{display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--accent-soft);color:var(--accent);border-radius:12px;font-size:23px}
.lp-highlights62{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0}
.lp-highlights62>span{display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px;font-weight:600;color:var(--text-secondary)}.lp-highlights62 .bi{font-size:19px;color:var(--accent)}
#authView .lp-section62{padding:76px 0;content-visibility:visible}
.lp-section-heading62{max-width:780px;margin-bottom:32px}
#authView .lp-section-heading62 h2{font-size:clamp(26px,3vw,36px);font-weight:750;letter-spacing:-.03em;line-height:1.2;color:var(--text-primary);margin:14px 0}
.lp-section-heading62 p{font-size:15px;line-height:1.8;color:var(--text-secondary);margin:0}
.lp-feature-grid62{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-feature-grid62>article{min-width:0;padding:26px;border:1px solid var(--border);border-radius:16px;background:var(--background-elevated)}
.lp-feature-grid62>article>.bi,.lp-install-grid62>article>.bi{display:grid;place-items:center;width:42px;height:42px;margin-bottom:20px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-size:22px}
#authView :is(.lp-feature-grid62,.lp-install-grid62) h3{font-size:17px;line-height:1.4;font-weight:700;color:var(--text-primary);margin:0 0 10px}
.lp-feature-grid62 p,.lp-install-grid62 p{font-size:13px;line-height:1.8;color:var(--text-secondary);margin:0}
.lp-start62{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:40px;margin-top:32px;padding:32px;background:var(--background-secondary);border-radius:18px;border:1px solid var(--border)}
#authView .lp-start62 h3{font-size:25px;line-height:1.25;letter-spacing:-.02em;margin:12px 0 24px;color:var(--text-primary)}
.lp-start62 ol{list-style:none;margin:0;padding:0;display:grid;gap:22px}.lp-start62 li{display:flex;align-items:flex-start;gap:18px}.lp-start62 li>b{font-size:14px;font-weight:750;color:var(--accent);border:1px solid var(--border);border-radius:10px;min-width:38px;height:38px;display:grid;place-items:center;background:var(--background-elevated)}.lp-start62 li>div{display:grid;gap:5px}.lp-start62 strong{font-size:14px;font-weight:650}.lp-start62 li span{font-size:12px;color:var(--text-secondary);line-height:1.6}
html body #authView .lp-pro62{padding:36px;margin:0;border:1px solid var(--border);border-radius:24px;background:linear-gradient(125deg,var(--accent-soft),var(--background-elevated))}
html body #authView .lp-pro62 .vh-pro-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
html body #authView .lp-pro62 .vh-pro-benefits>li{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--background-primary);margin:0}
html body #authView .lp-pro62 .vh-pro-benefits>li>.bi{width:20px;flex:0 0 20px;font-size:20px;color:var(--accent);margin:2px 0 0}
html body #authView .lp-pro62 .vh-pro-benefits>li>div{display:grid;gap:8px;min-width:0}
html body #authView .lp-pro62 .vh-pro-benefits b{font-size:13px;line-height:1.5;color:var(--text-primary)}
html body #authView .lp-pro62 .vh-pro-benefits span{font-size:12px;line-height:1.7;color:var(--text-secondary)}
.lp-pro-offer62{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:24px;padding:24px;border:1px solid var(--border);border-radius:14px;background:var(--background-elevated)}
.lp-pro-offer62>div{display:grid;gap:8px;min-width:0}.lp-pro-offer62>div>span{font-size:11px;color:var(--text-secondary)}.lp-pro-offer62 strong{font-size:22px;line-height:1.35;color:var(--text-primary)}.lp-pro-offer62 p{font-size:12px;color:var(--text-secondary);line-height:1.7;margin:0}.lp-pro-offer62>button{flex:none;max-width:300px!important}
.lp-install-grid62{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-install-grid62>article{min-width:0;border:1px solid var(--border);border-radius:16px;padding:26px;background:var(--background-elevated)}
.lp-install-grid62>article>p{margin-bottom:22px}.lp-install-grid62>article>small{display:block;font-size:11px;color:var(--text-secondary);margin-top:14px}.lp-install-grid62 #installApp{margin-top:12px}html body #authView #installApp[hidden]{display:none}
.lp-install-grid62 details{border-top:1px solid var(--border)}.lp-install-grid62 summary{padding:14px 0;font-size:13px;font-weight:650;cursor:pointer}.lp-install-grid62 details p{padding-bottom:16px;font-size:12px}
html body #authView:not(.desktop-auth-shell) #landingAccount{padding:44px;gap:64px;margin:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--background-secondary);border:1px solid var(--border);border-radius:24px}
html body #authView:not(.desktop-auth-shell) #landingAccount .landing-auth-title{font-size:36px;line-height:1.15}
html body #authView:not(.desktop-auth-shell) #landingAccount .lead{font-size:15px;line-height:1.8}
html body #authView:not(.desktop-auth-shell) #landingAccount .auth-card{box-shadow:none;padding:28px;border-radius:18px}
html body #authView .lp-faq62{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px}
.lp-faq62 details{border-bottom:1px solid var(--border)}.lp-faq62 details:first-child{border-top:1px solid var(--border)}.lp-faq62 summary{padding:20px 6px;font-size:15px;font-weight:650;line-height:1.6;cursor:pointer;color:var(--text-primary)}.lp-faq62 details p{font-size:13px;line-height:1.9;color:var(--text-secondary);padding:0 6px 20px;margin:0}
.lp-privacy62{display:flex;align-items:flex-start;gap:20px;padding:28px;border-radius:16px;border:1px solid var(--border);background:var(--background-secondary)}.lp-privacy62>.bi{font-size:28px;color:var(--accent)}
#authView .lp-privacy62 h2{font-size:19px;font-weight:700;margin:0 0 10px;line-height:1.4}.lp-privacy62 p{font-size:13px;line-height:1.8;color:var(--text-secondary);margin:0;max-width:900px}
.lp-footer62{display:flex;align-items:center;gap:24px;padding:32px 0;margin-top:24px;border-top:1px solid var(--border)}.lp-footer62>span{font-size:12px;color:var(--text-secondary)}.lp-footer62 nav{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap}
@media(max-width:1060px){#authView .lp-header62{gap:18px}.lp-nav62{gap:16px}.lp-hero62{gap:30px!important}.lp-hero-art62>img{height:360px}.lp-voice-card62{left:14px;right:14px}.lp-feature-grid62,.lp-install-grid62{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-install-grid62>.lp-windows62{grid-column:1/-1}.lp-install-grid62>.lp-windows62>p{max-width:650px}html body #authView .lp-pro62 .vh-pro-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}html body #authView:not(.desktop-auth-shell) #landingAccount{gap:28px;padding:28px}}
@media(max-width:760px){
 html body #authView:not(.desktop-auth-shell)>.container,html body #authView:not(.desktop-auth-shell)>.lp-header62{width:calc(100% - 32px)}
 #authView .lp-header62{position:relative;gap:12px;padding-block:16px;flex-wrap:wrap}.lp-brand62{font-size:18px;gap:8px}.lp-brand62 img{width:30px;height:30px}.lp-header-actions62{gap:7px}
 .lp-header-actions62 .locale-switcher{max-width:110px}.lp-header-actions62 .locale-switcher button{max-width:110px}
 html body #authView .lp-menu62{display:grid}html body #authView .lp-login62{padding:9px 12px}
 .lp-nav62{display:none;order:3;flex:1 0 100%;padding:12px 0 0;border-top:1px solid var(--border);margin:4px 0 0;gap:6px}.lp-nav62[data-open=true]{display:flex;flex-wrap:wrap}.lp-nav62>a{flex:1 1 calc(50% - 6px);padding:6px 12px;border-radius:8px;background:var(--background-secondary)}
 #authView .lp-hero62{grid-template-columns:1fr;padding:42px 0 32px;gap:28px!important}.lp-hero-copy62 h1{font-size:36px!important;max-width:550px}.lp-hero-copy62>p{font-size:15px!important;max-width:580px!important}.lp-hero-art62>img{height:300px;object-position:center 58%;border-radius:20px}
 .lp-highlights62{gap:12px;padding:18px 0}.lp-highlights62>span{flex-direction:column;text-align:center;font-size:11px;line-height:1.5;gap:8px}
 #authView .lp-section62{padding:44px 0}.lp-section-heading62{margin-bottom:24px}.lp-section-heading62 p{font-size:14px}.lp-feature-grid62>article,.lp-install-grid62>article{padding:22px}.lp-start62{grid-template-columns:1fr;gap:26px;padding:24px;margin-top:24px}
 html body #authView .lp-pro62{padding:24px;border-radius:18px}.lp-pro-offer62{flex-direction:column;align-items:stretch;gap:20px;padding:20px}.lp-pro-offer62>button{max-width:none!important;width:100%}
 html body #authView:not(.desktop-auth-shell) #landingAccount{grid-template-columns:1fr;padding:24px;gap:24px}html body #authView:not(.desktop-auth-shell) #landingAccount .landing-auth-title{font-size:29px;margin:18px 0}#landingAccount .landing-auth-points{display:none}html body #authView:not(.desktop-auth-shell) #landingAccount .auth-card{padding:22px}html body #authView .lp-faq62{grid-template-columns:1fr;gap:0}
 .lp-privacy62{padding:22px;gap:14px}.lp-footer62{flex-wrap:wrap;gap:12px 20px;padding:24px 0}.lp-footer62 nav{margin:0;flex-basis:100%;gap:24px}
}
@media(max-width:480px){
 .lp-header-actions62 .locale-switcher{max-width:90px}.lp-header-actions62 .locale-button{font-size:11px;padding:7px;gap:4px}.lp-header62 .lp-brand62{font-size:0}.lp-header62 .lp-brand62 img{width:34px;height:34px}.lp-header-actions62{flex:1;justify-content:flex-end}
 .lp-hero-copy62 h1{font-size:32px!important}.lp-hero-art62>img{height:245px;object-position:68% center}.lp-actions62{align-items:stretch;gap:10px}.lp-actions62>.btn{width:100%}.lp-voice-card62{padding:14px;gap:10px;left:12px;right:12px}.lp-voice-card62 .lp-voice-icon62{width:36px;height:36px}.lp-voice-card62>.bi{display:none}
 .lp-feature-grid62,.lp-install-grid62{grid-template-columns:1fr}.lp-install-grid62>.lp-windows62{grid-column:auto}.lp-feature-grid62>article{padding:22px}.lp-feature-grid62>article>.bi{margin-bottom:15px}
 html body #authView .lp-pro62{padding:20px 16px}html body #authView .lp-pro62 .vh-pro-benefits{grid-template-columns:1fr}html body #authView .lp-pro62 .vh-pro-benefits>li{padding:16px}.lp-pro-offer62{padding:18px}.lp-pro-offer62 strong{font-size:21px}
 html body #authView:not(.desktop-auth-shell) #landingAccount{padding:20px 14px}html body #authView:not(.desktop-auth-shell) #landingAccount .auth-card{padding:20px 16px}.lp-privacy62>.bi{display:none}.lp-privacy62{padding:22px}
}
@media(prefers-reduced-motion:reduce){#authView{scroll-behavior:auto}}

/* Source: segmented-tabs.css */
/* Horizontal tab controls share the Pro switch's shape and active state.
   Explicit selectors leave vertical settings navigation and category chips intact. */
html body :is(.media-tabs,.pro-tabs57,.boost-tabs49,.inapp-profile-tabs,.profile-content-tabs,.right-panel-tabs,.account-shop-tabs,.vh-media-tabs,.pack-picker-tabs,.managed-picker-tabs,.screen-picker-tabs54,.information-tabs51,.auth-tabs,.content-admin-tabs,.control-tabs,.admin-page-tabs){
  display:flex;align-items:center;flex-wrap:wrap;gap:6px!important;
  width:fit-content;max-width:100%;min-width:0;box-sizing:border-box;
  padding:5px!important;border:1px solid var(--border)!important;border-radius:10px!important;
  background:var(--background-secondary)!important;box-shadow:none!important;
}
html body :is(.media-tabs,.pro-tabs57,.boost-tabs49,.inapp-profile-tabs,.profile-content-tabs,.right-panel-tabs,.account-shop-tabs,.vh-media-tabs,.pack-picker-tabs,.managed-picker-tabs,.screen-picker-tabs54,.information-tabs51,.auth-tabs,.content-admin-tabs,.control-tabs,.admin-page-tabs)>:is(button,a){
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  flex:0 1 auto;min-width:0;max-width:100%;height:auto!important;min-height:40px;
  margin:0;padding:10px 18px!important;border:0!important;border-radius:7px!important;
  background:transparent!important;color:var(--text-secondary)!important;box-shadow:none!important;
  font-size:13px;font-weight:600;line-height:1.4;text-align:center;text-decoration:none;
  white-space:normal;overflow-wrap:anywhere;transition:background-color .15s,color .15s;
}
html body :is(.media-tabs,.pro-tabs57,.boost-tabs49,.inapp-profile-tabs,.profile-content-tabs,.right-panel-tabs,.account-shop-tabs,.vh-media-tabs,.pack-picker-tabs,.managed-picker-tabs,.screen-picker-tabs54,.information-tabs51,.auth-tabs,.content-admin-tabs,.control-tabs,.admin-page-tabs)>:is(button,a):hover{
  background:var(--surface-hover)!important;color:var(--text-primary)!important;
}
html body :is(.media-tabs,.pro-tabs57,.boost-tabs49,.inapp-profile-tabs,.profile-content-tabs,.right-panel-tabs,.account-shop-tabs,.vh-media-tabs,.pack-picker-tabs,.managed-picker-tabs,.screen-picker-tabs54,.information-tabs51,.auth-tabs,.content-admin-tabs,.control-tabs,.admin-page-tabs)>:is(button,a):is(.active,[aria-selected=true],[aria-current=true],[aria-pressed=true]){
  background:var(--ui-primary,var(--accent))!important;color:#fff!important;box-shadow:0 2px 5px #00000014!important;
}
html body :is(.media-tabs,.pro-tabs57,.boost-tabs49,.inapp-profile-tabs,.profile-content-tabs,.right-panel-tabs,.account-shop-tabs,.vh-media-tabs,.pack-picker-tabs,.managed-picker-tabs,.screen-picker-tabs54,.information-tabs51,.auth-tabs,.content-admin-tabs,.control-tabs,.admin-page-tabs)>:is(button,a):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
html body :is(.media-tabs,.pro-tabs57,.boost-tabs49,.inapp-profile-tabs,.profile-content-tabs,.right-panel-tabs,.account-shop-tabs,.vh-media-tabs,.pack-picker-tabs,.managed-picker-tabs,.screen-picker-tabs54,.information-tabs51,.auth-tabs,.content-admin-tabs,.control-tabs,.admin-page-tabs)>:is(button,a)>.bi{color:inherit!important}
html body :is(.media-tabs,.pro-tabs57,.boost-tabs49,.inapp-profile-tabs,.profile-content-tabs,.right-panel-tabs,.account-shop-tabs,.vh-media-tabs,.pack-picker-tabs,.managed-picker-tabs,.screen-picker-tabs54,.information-tabs51,.auth-tabs,.content-admin-tabs,.control-tabs,.admin-page-tabs)>button:disabled{opacity:.45;cursor:default}
/* These strips live in narrow panels; keep their existing equal-width layout. */
html body :is(.right-panel-tabs,.auth-tabs){width:100%}
html body :is(.right-panel-tabs,.auth-tabs)>button{flex:1 1 0;padding-inline:8px!important}
html body .media-tabs{margin-bottom:24px}
html body .information-tabs51{margin:10px 24px}
/* Older profile and picker sheets used ID selectors with !important. */
html body #messages .profile-card49 .inapp-profile-tabs{padding:5px!important;gap:6px!important;border:1px solid var(--border)!important;border-radius:10px!important;background:var(--background-secondary)!important}
html body #messages .profile-card49 .inapp-profile-tabs>.profile-tab49{padding:10px 14px!important;height:auto!important;border-radius:7px!important;background:transparent!important;color:var(--text-secondary)!important}
html body #messages .profile-card49 .inapp-profile-tabs>.profile-tab49:hover{background:var(--surface-hover)!important;color:var(--text-primary)!important}
html body #messages .profile-card49 .inapp-profile-tabs>.profile-tab49.active{background:var(--ui-primary,var(--accent))!important;color:#fff!important}
html body :is(.vh-media-tabs,.pack-picker-tabs)>button{padding-inline:10px!important}
@media(max-width:600px){html body .information-tabs51{margin:8px 12px}html body .media-tabs{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){html body :is(.media-tabs,.pro-tabs57,.boost-tabs49,.inapp-profile-tabs,.profile-content-tabs,.right-panel-tabs,.account-shop-tabs,.vh-media-tabs,.pack-picker-tabs,.managed-picker-tabs,.screen-picker-tabs54,.information-tabs51,.auth-tabs,.content-admin-tabs,.control-tabs,.admin-page-tabs)>:is(button,a){transition:none}}

/* The soundboard uses a vertical icon rail, so only its active color changes. */
html body #soundboardModal .soundboard-tabs>button[aria-pressed=true]{background:var(--ui-primary,var(--accent));color:#fff}
html body #soundboardModal .soundboard-tabs>button>.bi{color:inherit}