@import url("../shared/design-system.css");

html,
body {
    background: transparent;
    font-family: var(--ds-font-sans);
    color: var(--ds-text);
}

[hidden] {
    display: none !important;
}

body {
    padding: 0 0 calc(92px + env(safe-area-inset-bottom, 0px));
}

.iosAppShell {
    padding-top: 18px;
    padding-bottom: 24px;
}

.appTopBar {
    position: sticky;
    top: 0;
    z-index: 50;
    margin-bottom: 18px;
}

.appTopBarInner {
    padding: 16px;
}

.appTopBarRow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
}

.appTopBarHint {
    margin-top: 8px;
    max-width: 36ch;
}

.appTopBarStatus {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.appShell {
    display: grid;
    grid-template-columns: 88px 320px minmax(0, 1fr) 300px;
    grid-template-areas: "rail channels content members";
    gap: 18px;
    min-height: calc(100vh - 210px);
    height: auto;
}

.serversRail {
    grid-area: rail;
}

.channelsSidebar {
    grid-area: channels;
}

.contentArea {
    grid-area: content;
}

.membersSidebar {
    grid-area: members;
}

.serversRail,
.channelsSidebar,
.contentArea,
.membersSidebar {
    min-width: 0;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-line);
    backdrop-filter: var(--ds-blur);
    -webkit-backdrop-filter: var(--ds-blur);
    box-shadow: var(--ds-shadow-s);
}

.serversRail {
    padding: 14px 0;
    gap: 16px;
    border-right: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-xl);
}

.serversRailHead {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2px 0 6px;
}

.serversList {
    gap: 12px;
}

.homeBtn,
.serverBtn {
    width: 54px;
    height: 54px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.95rem;
    letter-spacing: -0.03em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(15, 23, 42, 0.14);
    transition: transform 160ms ease, filter 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.homeBtn {
    background: linear-gradient(180deg, #7bc0ff 0%, var(--ds-system-blue-hover) 22%, var(--ds-system-blue) 100%);
    color: #ffffff;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}

.homeBtn:hover {
    transform: translateY(-1px);
    filter: saturate(1.04) brightness(1.02);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 24px rgba(10, 132, 255, 0.24);
}

.serverBtn {
    background: rgba(255,255,255,0.08);
}

.serverBtn:hover,
.serverBtn.active {
    background: var(--ds-accent-soft);
    border-radius: 20px;
}

.channelsSidebar,
.membersSidebar,
.contentArea {
    border-radius: var(--ds-radius-xl);
    overflow: hidden;
}

.contentArea {
    padding: 18px;
    gap: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.sidebarHead,
.chatSectionHead {
    min-height: auto;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--ds-line);
    box-shadow: none;
}

.shellSectionEyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.serverHeadTitle,
.membersHeadTitle,
.chatSectionTitle,
.voiceDockTitle,
.invitePanelTitle,
.streamViewerTitle {
    color: var(--ds-text);
}

.serverHeadTitle {
    font-size: 1.1rem;
    font-weight: 650;
}

.serverHeadRow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.serverSettingsBtn {
    min-width: 42px;
    padding-inline: 0;
    font-size: 1rem;
}

.sidebarBody,
.membersList {
    padding: 16px;
}

.sidebarBody {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sidebarFoot {
    padding: 0 16px 16px;
}

.streamViewerHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--ds-line);
}

.streamViewerHead > div {
    min-width: 0;
}

.streamViewerBody {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.28);
}

.streamViewerVideo {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: rgba(15, 23, 42, 0.72);
    border-radius: 0;
}

.channelGroupTitle,
.fieldLabel,
.memberMeta,
.channelMeta,
.invitePanelMeta,
.inviteCardMeta,
.voiceDockMeta,
.contentMeta,
.streamViewerMeta,
.membersHeadMeta,
.meSub {
    color: var(--ds-text-soft);
}

.channelBtn,
.memberRow,
.peer,
.messageCard,
.inviteCard,
.invitePanel,
.meCard,
.voiceDock,
.streamViewer,
.debugSection,
.contentPlaceholder,
.messageComposer {
    border-radius: var(--ds-radius-l);
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.channelBtn {
    padding: 12px 14px;
    border-radius: var(--ds-radius-m);
    color: var(--ds-text-soft);
}

.channelBtn:hover,
.channelBtn.active,
.memberRow:hover {
    background: rgba(10, 132, 255, 0.12);
    color: var(--ds-text);
}

.channelGroup {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.channelGroupHead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.channelGroupActions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.channelList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invitePanel,
.serverDangerPanel,
.channelCreatePanel {
    padding: 16px;
}

.serverSettingsPanel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.serverSettingsHead {
    align-items: flex-start;
    gap: 12px;
}

.serverSettingsPlaceholder {
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
}

.serverSettingsPlaceholderTitle {
    font-weight: 650;
    color: var(--ds-text);
}

.serverSettingsPlaceholderMeta {
    margin-top: 6px;
    color: var(--ds-text-soft);
    line-height: 1.45;
}

.invitePanelControls {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.inviteList {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inviteCard {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inviteCardHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.inviteCardTitle {
    font-weight: 650;
    color: var(--ds-text);
}

.inviteCardMeta {
    display: block;
    padding-top: 6px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.inviteCardActions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.textInput,
.messageComposer textarea {
    border-radius: var(--ds-radius-m);
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: var(--ds-text);
}

.textInput {
    min-height: 48px;
    width: 100%;
    padding: 12px 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.primaryBtn,
.ghostBtn,
.dangerBtn,
.smallBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.2;
    font-weight: 600;
    transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease, background 160ms ease;
}

.primaryBtn {
    background: linear-gradient(180deg, var(--ds-system-blue-hover), var(--ds-system-blue));
    color: #ffffff;
}

.ghostBtn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.08);
}

.dangerBtn {
    background: rgba(255,69,58,0.16);
    border-color: rgba(255,69,58,0.24);
}

.primaryBtn:hover,
.ghostBtn:hover,
.dangerBtn:hover {
    transform: translateY(-1px);
}

.pill {
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    min-height: 34px;
}

.chatSection {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contentPlaceholder {
    padding: 24px;
}

.messagesList {
    gap: 12px;
    padding: 0;
}

.messageCard {
    padding: 14px 16px;
}

.messageComposer {
    padding: 14px;
}

.voiceDock,
.debugSection {
    padding: 16px;
    border-top: 0;
}

.voiceDockHead {
    align-items: flex-start;
}

.voiceDockActions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.membersList {
    gap: 10px;
}

.memberRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

.memberLeft {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.debugSection details {
    margin-top: 0;
}

.appTabBar {
    position: sticky;
    bottom: 12px;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    margin-top: 18px;
}

.tabBarItem {
    min-height: 62px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: var(--ds-text-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.tabBarItemActive {
    background: var(--ds-accent-soft);
    color: var(--ds-text);
}

.tabBarIcon {
    font-size: 1.1rem;
    line-height: 1;
}

.serverBtn {
    width: 100%;
    min-height: 70px;
    height: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.serverBtnAvatar {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    color: var(--ds-text);
    font-size: 0.88rem;
    font-weight: 700;
}

.serverBtn.active .serverBtnAvatar,
.serverBtn:hover .serverBtnAvatar {
    background: rgba(255,255,255,0.18);
}

.serverBtnLabel {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.15;
    color: var(--ds-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatContextTitle {
    margin-bottom: 6px;
}

.channelBtnRow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.channelIcon {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    color: var(--ds-text-soft);
    font-size: 0.85rem;
    font-weight: 700;
}

.channelIcon.voice {
    background: var(--ds-accent-soft);
    color: var(--ds-accent);
}

.channelCopy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.voiceChannelItem {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--ds-radius-m);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}

.voiceChannelItem.active > .channelBtn {
    background: rgba(10, 132, 255, 0.12);
    color: var(--ds-text);
}

.voiceChannelItem > .channelBtn {
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.voiceChannelRoster {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 6px 6px 10px;
}

.voiceChannelUser {
    min-height: 30px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 10px;
    color: var(--ds-text-soft);
    cursor: default;
}

.voiceChannelUser:hover {
    background: rgba(255,255,255,0.06);
    color: var(--ds-text);
}

.voiceChannelUserAvatar {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    color: var(--ds-text);
    font-size: 0.58rem;
    font-weight: 700;
}

.voiceChannelUserName {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.84rem;
}

.voiceChannelUserBadges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.voiceChannelUserActions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.voiceChannelUser:hover .voiceChannelUserActions,
.voiceChannelUser:focus-within .voiceChannelUserActions {
    opacity: 1;
    pointer-events: auto;
}

.voiceChannelUserAction {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    color: var(--ds-text-soft);
    font-size: 0.72rem;
}

.voiceChannelUserAction:hover {
    background: rgba(255,255,255,0.16);
    color: var(--ds-text);
}

.voiceChannelUserBadge {
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.08);
}

.voiceChannelUserBadge.live {
    background: rgba(255, 69, 58, 0.18);
    color: #ffb0aa;
    cursor: pointer;
}

.channelTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.messageEmptyState {
    padding: 22px;
    border-radius: var(--ds-radius-l);
    color: var(--ds-text-soft);
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.12);
}

.messageCard {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
}

.messageAvatar {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--ds-accent-soft);
    color: var(--ds-text);
    font-size: 0.85rem;
    font-weight: 700;
}

.messageBubble {
    min-width: 0;
    flex: 1;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.memberAvatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    color: var(--ds-text);
    font-size: 0.8rem;
    font-weight: 700;
}

.memberCopy {
    min-width: 0;
}

.composerTopRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.composerHint {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.voiceDockHead {
    gap: 18px;
}

.voiceDockIntro {
    min-width: 0;
}

.voiceDockActionGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 720px);
    margin-left: auto;
}

.voiceDockActionGroup {
    padding: 12px;
    border-radius: var(--ds-radius-m);
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
}

:root[data-theme="light"] .serverBtn,
:root[data-theme="light"] .ghostBtn,
:root[data-theme="light"] .pill,
:root[data-theme="light"] .serverBtnAvatar,
:root[data-theme="light"] .channelIcon,
:root[data-theme="light"] .memberAvatar,
:root[data-theme="light"] .voiceDockActionGroup,
:root[data-theme="light"] .messageBubble,
:root[data-theme="light"] .messageEmptyState,
:root[data-theme="light"] .channelBtn,
:root[data-theme="light"] .memberRow,
:root[data-theme="light"] .peer,
:root[data-theme="light"] .contentPlaceholder,
:root[data-theme="light"] .messageComposer,
:root[data-theme="light"] .streamViewer,
:root[data-theme="light"] .debugSection,
:root[data-theme="light"] .invitePanel,
:root[data-theme="light"] .inviteCard,
:root[data-theme="light"] .meCard {
    background: rgba(28, 28, 30, 0.045);
    border-color: rgba(60, 60, 67, 0.12);
    color: #1C1C1E;
}

:root[data-theme="light"] .messageEmptyState {
    border-style: dashed;
}

:root[data-theme="light"] .memberMeta,
:root[data-theme="light"] .membersHeadMeta,
:root[data-theme="light"] .voiceDockMeta,
:root[data-theme="light"] .contentMeta,
:root[data-theme="light"] .streamViewerMeta,
:root[data-theme="light"] .invitePanelMeta,
:root[data-theme="light"] .inviteCardMeta,
:root[data-theme="light"] .channelMeta,
:root[data-theme="light"] .fieldLabel,
:root[data-theme="light"] .meSub,
:root[data-theme="light"] .composerHint,
:root[data-theme="light"] .shellSectionEyebrow {
    color: rgba(72, 72, 74, 0.92);
}

:root[data-theme="light"] .primaryBtn {
    color: #ffffff;
    background: linear-gradient(180deg, #5caeff 0%, #2b8fff 100%);
    border-color: rgba(10, 132, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.46), 0 8px 18px rgba(10, 132, 255, 0.18);
}

:root[data-theme="light"] .ghostBtn,
:root[data-theme="light"] .dangerBtn,
:root[data-theme="light"] .smallBtn {
    color: #1C1C1E;
}

:root[data-theme="light"] .ghostBtn {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(60, 60, 67, 0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 6px 16px rgba(28, 28, 30, 0.08);
}

:root[data-theme="light"] .dangerBtn {
    background: rgba(255, 69, 58, 0.12);
    border-color: rgba(255, 69, 58, 0.2);
    color: #a1261d;
}

:root[data-theme="light"] .voiceDockActions .primaryBtn,
:root[data-theme="light"] .voiceDockActions .ghostBtn,
:root[data-theme="light"] .voiceDockActions .dangerBtn {
    min-height: 44px;
    padding-inline: 18px;
}

:root[data-theme="light"] .homeBtn {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 10px 22px rgba(10, 132, 255, 0.18);
}

:root[data-theme="light"] .serverSettingsPlaceholder {
    background: rgba(255,255,255,0.68);
    border-color: rgba(60, 60, 67, 0.12);
}

:root[data-theme="light"] .textInput {
    background: rgba(255,255,255,0.86);
    border-color: rgba(60, 60, 67, 0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 4px 12px rgba(28, 28, 30, 0.04);
}

:root[data-theme="light"] .peer .dot {
    background: rgba(60, 60, 67, 0.22);
    box-shadow: 0 0 0 4px rgba(60, 60, 67, 0.05);
}

:root[data-theme="light"] .peer.speaking .dot {
    box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.18);
}

:root[data-theme="light"] .meActionBtnGhost {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 6px 16px rgba(28, 28, 30, 0.08);
}

:root[data-theme="light"] .meActionBtnPrimary {
    background: linear-gradient(180deg, #5caeff 0%, #2b8fff 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.46), 0 8px 18px rgba(10, 132, 255, 0.18);
}

:root[data-theme="light"] .meActionBtnDanger {
    background: linear-gradient(180deg, rgba(255, 105, 97, 0.94), rgba(255, 69, 58, 1));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 8px 18px rgba(255, 69, 58, 0.16);
}

:root[data-theme="light"] .meVoiceIcon {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

:root[data-theme="light"] .meStatusDot {
    border-color: rgba(255, 255, 255, 0.95);
}

:root[data-theme="light"] .voiceChannelUser:hover {
    background: rgba(28, 28, 30, 0.05);
}

:root[data-theme="light"] .voiceChannelUserAvatar {
    background: rgba(60, 60, 67, 0.12);
}

.voiceDockActionLabel {
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.voiceDockActions {
    justify-content: flex-start;
}

.voiceDockBody {
    margin-top: 12px;
}

.meCard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.meIdentity {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.meAvatarWrap {
    position: relative;
    width: 32px;
    height: 32px;
}

.meAvatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(10, 132, 255, 0.9), rgba(94, 92, 230, 0.9));
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
}

.meStatusDot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #30d158;
    border: 2px solid rgba(32, 34, 37, 0.92);
}

.meMain {
    min-width: 0;
}

.meNameRow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meName {
    font-weight: 700;
    color: var(--ds-text);
    letter-spacing: -0.02em;
}

.meVoiceIcon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--ds-accent);
    background: var(--ds-accent-soft);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.meVoiceMeta {
    margin-top: 6px;
    color: var(--ds-text-soft);
    font-size: 0.75rem;
    line-height: 1.35;
}

.meControls {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.meActionBtn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--ds-text);
    background: rgba(255,255,255,0.08);
    transition: transform 160ms ease, filter 160ms ease, background 160ms ease;
}

.meActionBtn:hover {
    transform: translateY(-1px);
}

.meActionBtnPrimary {
    color: #ffffff;
    background: linear-gradient(180deg, var(--ds-system-blue-hover), var(--ds-system-blue));
}

.meActionBtnDanger {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(255, 105, 97, 0.92), rgba(255, 69, 58, 0.95));
}

.meActionBtnGhost {
    background: rgba(255,255,255,0.08);
}

.meActionBtnHidden {
    display: none !important;
}

.meActionBtn:disabled {
    opacity: 0.55;
    filter: grayscale(0.1);
}

.memberName,
.messageAuthor,
.name,
.channelTitle {
    letter-spacing: -0.02em;
}

.messageHead {
    margin-bottom: 8px;
}

.messageBody {
    color: var(--ds-text);
}

.peer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    cursor: context-menu;
}

.peer .left {
    min-width: 0;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
    flex: 1;
}

.peer .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.03);
}

.peer.speaking .dot {
    background: var(--ds-success);
    box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.14);
}

.peer .name,
.peer .meta {
    grid-column: 2;
}

.peer .name {
    font-weight: 650;
    color: var(--ds-text);
}

.peer .meta {
    color: var(--ds-text-soft);
    font-size: 0.82rem;
}

.peer .right {
    display: none;
}

.range {
    accent-color: var(--ds-accent);
}

.voiceMemberMenu {
    position: fixed;
    z-index: 120;
    width: min(320px, calc(100vw - 24px));
    padding: 14px;
}

.voiceMemberMenu[hidden] {
    display: none;
}

.voiceMemberMenuHead {
    margin-bottom: 10px;
}

.voiceMemberMenuName {
    font-weight: 700;
    color: var(--ds-text);
}

.voiceMemberMenuMeta {
    margin-top: 4px;
    color: var(--ds-text-soft);
    font-size: 0.84rem;
}

.voiceMemberMenuVolumeLabel {
    display: block;
    margin-bottom: 8px;
    color: var(--ds-text-soft);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.voiceMemberVolumeRange {
    width: 100%;
    margin-bottom: 14px;
}

.voiceMemberMenuActions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (max-width: 1360px) {
    .appShell {
        grid-template-columns: 88px 300px minmax(0, 1fr);
        grid-template-areas:
            "rail channels content"
            "rail members content";
    }

    .membersSidebar {
        display: flex;
    }
}

@media (max-width: 1080px) {
    .appTopBarRow {
        flex-direction: column;
    }

    .appTopBarStatus {
        justify-content: flex-start;
    }

    .appShell {
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-areas:
            "rail content"
            "rail channels"
            "rail members";
    }

    .channelsSidebar,
    .membersSidebar {
        display: flex;
    }

    .voiceDockActionGrid {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    }

    .iosAppShell {
        padding-top: 12px;
    }

    .appShell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "channels"
            "members";
        gap: 12px;
    }

    .serversRail {
        display: none;
    }

    .channelsSidebar,
    .membersSidebar {
        display: flex;
    }

    .channelsSidebar .sidebarBody,
    .membersSidebar .membersList {
        max-height: none;
    }

    .contentArea {
        padding: 14px;
    }

    .appTopBarStatus {
        width: 100%;
        gap: 8px;
    }

    .themeToggleBtn {
        width: 100%;
    }

    .voiceDockHead,
    .voiceDockActionGrid,
    .voiceDockActions {
        flex-direction: column;
        align-items: stretch;
    }

    .voiceDockActions {
        justify-content: flex-start;
    }

    .voiceDockActionGrid {
        grid-template-columns: 1fr;
    }

    .meCard {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .meIdentity {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .meControls {
        justify-content: flex-start;
    }

    .messageCard {
        gap: 10px;
    }

    .messageAvatar,
    .memberAvatar {
        width: 34px;
        height: 34px;
        border-radius: 13px;
    }

    .chatSectionHead,
    .sidebarHead {
        padding: 16px 16px 12px;
    }

    .appTabBar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        bottom: 0;
        border-radius: 28px 28px 0 0;
    }
}