/* CometFare chat unified stylesheet: base + dark ui + reforge */
body[data-page="channels"] {
    --bg-0: #000000;
    --bg-1: #030405;
    --surface-0: #06080b;
    --surface-1: #0c0f14;
    --surface-2: #11161d;
    --accent: #e8eef8;
    --accent-2: #cfd7e4;
    --glow: #ffffff;
    --text: #edf3fb;
    --muted: #8b929d;
    --success: #7ce6a4;
    --warn: #f4c27a;
    --danger: #ff8e9f;
}

body[data-page="channels"] {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    color: var(--text);
    font-family: 'Quicksand', sans-serif;
    overflow: hidden;
}

/* Ensure interactive elements aren't blocked by window dragging */
.chat-input, 
.composer-textarea, 
.message-bubble, 
.admin-soft-field, 
.admin-soft-button, 
.message-action-btn, 
.avatar-pill-clickable,
.top-rail-btn,
.top-rail-pill,
.window-control-btn,
.status-pill,
.presence-pill,
.message-action-btn,
[onclick],
body[data-page="channels"] button,
body[data-page="channels"] input,
body[data-page="channels"] textarea {
    -webkit-app-region: no-drag;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
}

.msg-bubble-user {
    background:
        linear-gradient(180deg, rgba(22, 26, 33, 0.96), rgba(10, 12, 17, 1)),
        linear-gradient(180deg, var(--cf-theme-surface-strong, rgba(255, 255, 255, 0)), transparent);
    border: 1px solid var(--cf-theme-border, rgba(255, 255, 255, 0.09));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42);
    border-bottom-right-radius: 8px !important;
}

.msg-bubble-other {
    background: linear-gradient(180deg, rgba(7, 9, 13, 0.98), rgba(2, 4, 6, 1));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
    border-bottom-left-radius: 8px !important;
}

.chat-input {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
    background: linear-gradient(180deg, rgba(3, 5, 8, 0.98), rgba(2, 3, 5, 1));
}

.composer-textarea {
    min-height: 52px;
    max-height: 176px;
    resize: none;
    overflow-y: auto;
    line-height: 1.5;
    scrollbar-width: none;
}

.composer-textarea::-webkit-scrollbar {
    display: none;
}


.chat-input:focus {
    border-color: rgba(125, 211, 252, 0.3);
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.2), 0 0 28px rgba(125, 211, 252, 0.1);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-1px);
}

.admin-sidebar-stack {
    min-height: 0;
    box-sizing: border-box;
    align-items: stretch;
    gap: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    border-color: rgba(120, 127, 139, 0.18);
}

.admin-sidebar-panel {
    position: static;
    z-index: auto;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--cf-theme-border, rgba(255, 255, 255, 0.08));
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.9), rgba(3, 4, 7, 0.98));
}

.admin-soft-field {
    background: rgba(3, 5, 7, 0.82);
    border: 1px solid var(--cf-theme-border, rgba(255, 255, 255, 0.08));
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.admin-soft-field:focus {
    border-color: var(--cf-theme-border-strong, rgba(255, 255, 255, 0.14));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 18px var(--cf-theme-glow, rgba(255, 255, 255, 0));
    background: rgba(2, 4, 6, 0.9);
}

.admin-soft-button {
    border: 1px solid rgba(67, 124, 198, 0.18);
}

.admin-soft-button:hover {
    border-color: rgba(90, 170, 255, 0.24);
}

.admin-list-stack {
    width: 100%;
    box-sizing: border-box;

}

.admin-row-card {
    border: 1px solid rgba(64, 119, 193, 0.16);
    background: linear-gradient(180deg, rgba(6, 13, 24, 0.8), rgba(3, 10, 19, 0.88));
}

.admin-row-card-active {
    border: 1px solid rgba(96, 205, 255, 0.26);
    background: linear-gradient(180deg, rgba(12, 38, 66, 0.52), rgba(4, 18, 34, 0.84));
    box-shadow: inset 0 1px 0 rgba(126, 231, 255, 0.05), 0 18px 30px rgba(0, 0, 0, 0.26);
}

.admin-row-button {
    border: 1px solid rgba(67, 124, 198, 0.18);
    background: rgba(6, 16, 28, 0.62);
}

.admin-row-button:hover {
    background: rgba(9, 24, 41, 0.82);
    border-color: rgba(90, 170, 255, 0.24);
}

.message-group {
    animation: fadeSlideIn 0.22s ease both;
    overflow: visible;
}

.message-shell {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.message-shell.is-left {
    justify-content: flex-start;
    padding-right: 2.7rem;
}

.message-shell.is-right {
    justify-content: flex-end;
    padding-left: 2.7rem;
}

.message-bubble {
    position: relative;
    transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
    animation: fadeSlideIn 0.22s ease both;
    overflow: visible;
}

.message-bubble:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(8, 16, 28, 0.32);
}

.message-bubble-pending {
    opacity: 0.72;
    border-style: dashed;
}

.message-bubble-error {
    background: rgba(84, 33, 48, 0.38);
    border-color: rgba(255, 142, 159, 0.34);
}

.message-bubble-mentioned,
.message-plain-mentioned {
    border-color: rgba(125, 211, 252, 0.22) !important;
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.08), 0 18px 30px rgba(9, 24, 41, 0.28);
    background-image:
        linear-gradient(180deg, rgba(26, 43, 64, 0.14), rgba(5, 10, 17, 0)),
        linear-gradient(180deg, rgba(7, 9, 13, 0.98), rgba(2, 4, 6, 1));
}

.message-target-highlight {
    animation: messageTargetPulse 1.45s ease;
}

.message-shell.message-target-highlight .message-bubble,
.message-shell.message-target-highlight .message-plain {
    animation: messageTargetPulse 1.45s ease;
}

.soft-orb {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 9999px;
    background: rgba(126, 231, 255, 0.46);
    box-shadow: 0 0 20px rgba(126, 231, 255, 0.24);
    animation: softPulse 2.4s ease-in-out infinite;
}

.ambient-shell,
.ambient-shell::before,
.ambient-shell::after {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.ambient-shell::before,
.ambient-shell::after {
    content: '';
    filter: blur(70px);
    opacity: 0.28;
    animation: floatGlow 16s ease-in-out infinite alternate;
}

.ambient-shell::before {
    background: radial-gradient(circle at 20% 25%, rgba(84, 200, 255, 0.18), transparent 42%);
}

.ambient-shell::after {
    background: radial-gradient(circle at 78% 18%, rgba(79, 124, 255, 0.18), transparent 40%);
    animation-delay: 2s;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border-radius: 9999px;
    border: 1px solid rgba(70, 131, 212, 0.18);
    background: rgba(2, 10, 19, 0.74);
    color: rgba(230, 243, 255, 0.74);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.status-pill-live {
    border-color: rgba(102, 255, 171, 0.18);
    background: rgba(5, 18, 11, 0.92);
    box-shadow: 0 0 26px rgba(76, 255, 145, 0.14);
}

.status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: rgba(102, 255, 171, 0.94);
    box-shadow: 0 0 0 0 rgba(76, 255, 145, 0.36);
    animation: statusPulse 2.6s ease-in-out infinite;
}

.presence-strip {
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 1.5rem;
    overflow: hidden;
}

.presence-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    border-radius: 9999px;
    border: 1px solid rgba(84, 200, 255, 0.16);
    background: rgba(3, 12, 22, 0.78);
    color: rgba(232, 244, 255, 0.66);
    font-size: 11px;
    line-height: 1;
    animation: fadeSlideIn 0.22s ease both;
}

.typing-row {
    min-height: 1.5rem;
}

.typing-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.85rem;
    border-radius: 9999px;
    background: rgba(3, 11, 20, 0.78);
    border: 1px solid rgba(70, 131, 212, 0.16);
    color: rgba(232, 244, 255, 0.58);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.typing-dots {
    display: inline-flex;
    gap: 0.28rem;
    align-items: center;
}

.typing-dots span {
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 9999px;
    background: rgba(126, 231, 255, 0.74);
    animation: typingWave 1.2s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.12s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.24s;
}

.avatar-pill {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(12, 19, 28, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(8, 16, 28, 0.24);
    overflow: hidden;
    border: 1px solid transparent;
}

.avatar-pill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-pill-avatar {
    width: 2.7rem;
    height: 3.15rem;
    flex-basis: 2.7rem;
    border-radius: 1rem;
    background: transparent;
    color: rgba(244, 247, 251, 0.92);
    box-shadow: none;
}

.avatar-pill-avatar img {
    object-fit: contain;
    object-position: bottom center;
}

.avatar-pill-clickable {
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.avatar-pill-clickable:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 22px rgba(8, 16, 28, 0.32);
}

.message-group-side {
    gap: 0.85rem;
    align-items: flex-start;
    max-width: min(88%, 52rem);
}

.message-meta-side {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    min-width: 0;
    padding-top: 0.15rem;
}

.message-meta-side-copy {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

.message-meta-inline-row {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.message-presence-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.52);
    background: rgba(255, 255, 255, 0.04);
}

.message-presence-label.is-online {
    color: rgba(167, 243, 208, 0.96);
    border-color: rgba(16, 185, 129, 0.22);
    background: rgba(6, 36, 25, 0.72);
}

.message-presence-label.is-offline {
    color: rgba(255, 255, 255, 0.42);
}

.message-reply-preview {
    width: 100%;
    display: grid;
    gap: 0.28rem;
    margin-bottom: 0.7rem;
    padding: 0.72rem 0.8rem;
    border: none;
    border-radius: 1rem;
    border-left: 2px solid rgba(125, 211, 252, 0.38);
    background: rgba(255, 255, 255, 0.035);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.message-reply-preview:hover {
    background: rgba(255, 255, 255, 0.055);
}

.message-reply-preview.is-unavailable {
    cursor: default;
    border-left-color: rgba(255, 255, 255, 0.12);
}

.message-reply-label {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.36);
}

.message-reply-author {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.86);
}

.message-reply-text {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.52);
    white-space: pre-wrap;
}

.message-text {
    white-space: pre-wrap;
}

.message-mention {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.36rem;
    margin: 0 0.04rem;
    border-radius: 0.62rem;
    background: rgba(255, 215, 0, 0.09);
    color: rgba(186, 230, 253, 0.98);
    border: none;
    box-shadow: none;
    font-weight: 700;
    cursor: pointer;
}

.message-mention:hover {
    background: rgba(255, 215, 0, 0.14);
}

.message-reply-preview.is-targeted {
    background: rgba(255, 215, 0, 0.08);
    border-left-color: rgba(255, 215, 0, 0.42);
}

.message-reply-preview.is-targeted .message-reply-label,
.message-reply-preview.is-targeted .message-reply-author {
    color: rgba(255, 226, 138, 0.96);
}

.message-action-rail {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.24rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 10, 14, 0.96);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 3;
}

.message-shell.is-left .message-action-rail {
    right: 0.12rem;
    transform: translateY(-50%) translateX(8px);
}

.message-shell.is-right .message-action-rail {
    left: 0.12rem;
    transform: translateY(-50%) translateX(-8px);
}

.message-shell.is-header-anchor .message-action-rail {
    top: 0.18rem;
}

.message-shell.is-header-anchor.is-left .message-action-rail {
    transform: translateX(8px);
}

.message-shell.is-header-anchor.is-right .message-action-rail {
    transform: translateX(-8px);
}

.message-shell:hover .message-action-rail,
.message-shell:focus-within .message-action-rail {
    opacity: 1;
    pointer-events: auto;
}

.message-shell:hover.is-left .message-action-rail,
.message-shell:focus-within.is-left .message-action-rail {
    transform: translateY(-50%) translateX(0);
}

.message-shell:hover.is-right .message-action-rail,
.message-shell:focus-within.is-right .message-action-rail {
    transform: translateY(-50%) translateX(0);
}

.message-shell:hover.is-header-anchor.is-left .message-action-rail,
.message-shell:focus-within.is-header-anchor.is-left .message-action-rail,
.message-shell:hover.is-header-anchor.is-right .message-action-rail,
.message-shell:focus-within.is-header-anchor.is-right .message-action-rail {
    transform: translateX(0);
}

.message-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(246, 249, 252, 0.82);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.message-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.reply-composer-state {
    width: 100%;
    max-width: 980px;
    margin: 0 auto 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-left: 3px solid rgba(125, 211, 252, 0.6);
    background:
        linear-gradient(90deg, rgba(125, 211, 252, 0.06), transparent 40%),
        rgba(6, 10, 16, 0.88);
    backdrop-filter: blur(18px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    animation: reply-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes reply-slide-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reply-composer-state.hidden,
.mention-suggestion-box.hidden {
    display: none;
}

.reply-composer-copy {
    min-width: 0;
    display: grid;
    gap: 0.26rem;
}

.reply-composer-kicker {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.82);
}

.reply-composer-author {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.reply-composer-preview {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.54);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-suggestion-box {
    width: 100%;
    max-width: 980px;
    margin: 0 auto 0.55rem;
    padding: 0.5rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(12, 16, 24, 0.96), rgba(6, 8, 14, 0.98));
    backdrop-filter: blur(28px) saturate(140%);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: mention-slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mention-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mention-suggestion-list {
    display: grid;
    gap: 0.32rem;
}

.mention-suggestion-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.72rem 0.82rem;
    border-radius: 0.92rem;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.mention-suggestion-item.is-active,
.mention-suggestion-item:hover {
    background: rgba(168, 183, 255, 0.06);
    border-color: rgba(168, 183, 255, 0.18);
    box-shadow: 0 2px 12px rgba(168, 183, 255, 0.06);
}

.mention-suggestion-handle {
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.message-meta-side-copy.is-right {
    align-items: flex-end;
    text-align: right;
}

.message-plain {
    position: relative;
    overflow: visible;
    padding: 0.1rem 0.15rem;
    max-width: min(100%, 42rem);
}

.message-plain-user {
    color: rgba(247, 249, 252, 0.92);
}

.message-plain-other {
    color: rgba(244, 247, 251, 0.78);
}

.message-inline-status {
    margin-top: 0.45rem;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.profile-popover {
    position: fixed;
    z-index: 70;
    width: min(424px, calc(100vw - 1.5rem));
    pointer-events: auto;
    transition: width 0.2s ease;
}

.profile-popover.is-expanded {
    width: min(520px, calc(100vw - 1.5rem));
}

.profile-popover.hidden {
    display: none;
}

.profile-popover.is-opening .profile-popover-card,
.profile-popover.is-opening .v2-dynamic-profile-container {
    animation: profilePopoverReveal 0.24s cubic-bezier(0.22, 0.86, 0.22, 1) both;
    transform-origin: var(--popover-origin-x, 50%) var(--popover-origin-y, 50%);
}

.profile-popover.is-closing .profile-popover-card,
.profile-popover.is-closing .v2-dynamic-profile-container {
    animation: profilePopoverHide 0.2s cubic-bezier(0.4, 0.14, 0.3, 1) both;
    transform-origin: var(--popover-origin-x, 50%) var(--popover-origin-y, 50%);
}

.profile-popover-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.45rem;
    border: none;
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    color: rgba(241, 244, 248, 0.96);
    background:
        linear-gradient(var(--popover-direction, 180deg), rgba(1, 4, 10, 0.14), rgba(1, 4, 10, 0.4)),
        linear-gradient(var(--popover-direction, 180deg), var(--popover-start, #252a33), var(--popover-end, #3a414d));
    min-height: 304px;
}

.profile-popover-card::before {
    display: none;
}

.profile-popover-card.mode-standard {
    --popover-direction: 180deg;
}

.profile-popover-card.mode-card {
    --popover-direction: 270deg;
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(160px, 42%);
    gap: 0.35rem;
    align-items: stretch;
    min-height: 210px;
    aspect-ratio: 21 / 9;
    max-height: 210px;
    background-image:
        var(--popover-card-overlay, linear-gradient(270deg, rgba(3, 5, 11, 0.14), rgba(3, 5, 11, 0.34))),
        var(--popover-card-surface, linear-gradient(270deg, var(--popover-start, #252a33), var(--popover-end, #3a414d)));
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.profile-popover-card.mode-avatar {
    min-height: 312px;
    background:
        linear-gradient(180deg, rgba(4, 8, 14, 0.34), rgba(4, 8, 14, 0.58)),
        linear-gradient(180deg, var(--popover-start, #252a33), var(--popover-end, #3a414d));
    background-size: cover, cover;
    background-position: center, center;
}

.profile-popover-banner {
    height: 101px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.14)),
        linear-gradient(135deg, rgba(8, 12, 20, 0.72), rgba(18, 24, 36, 0.42));
    background-size: cover;
    background-position: center;
}

.profile-popover-banner.is-image {
    background-color: rgba(255, 255, 255, 0.04);
}

.profile-popover-standard-body {
    padding: 0.28rem 1rem 0.95rem;
    margin-top: -1.16rem;
}

.profile-popover-identity {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.profile-popover-avatar {
    width: 84px;
    height: 84px;
    border-radius: 9999px;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.42rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: rgba(244, 247, 251, 0.92);
    box-shadow: none;
}

.profile-popover-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-popover-card-avatar-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.85rem 0.85rem 0.7rem 0.2rem;
}

.profile-popover-card-avatar-wrap .profile-popover-avatar {
    width: min(128px, calc(100% - 0.25rem));
    height: min(128px, calc(100% - 0.25rem));
}

.profile-popover-copy {
    min-width: 0;
    flex: 1 1 auto;
    padding-top: 0.74rem;
}

.profile-popover-name {
    font-size: 1.34rem;
    line-height: 1.05;
    font-weight: 700;
    color: rgba(245, 248, 252, 0.98);
}

.profile-popover-username {
    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.48);
    text-transform: none;
    line-height: 1.35;
}

.profile-popover-bio {
    margin-top: 0.72rem;
    border-radius: 1rem;
    border: none;
    background: rgba(9, 12, 18, 0.42);
    padding: 0.76rem 0.88rem;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(244, 247, 251, 0.78);
    box-shadow: none;
    word-break: break-word;
}

.profile-popover-since {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    color: rgba(244, 247, 251, 0.66);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    max-width: 100%;
    width: fit-content;
    margin-top: 0.48rem;
    white-space: normal;
}

.profile-popover-presence-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.profile-presence-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 1.35rem;
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(244, 247, 251, 0.74);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-presence-chip.is-online {
    border-color: rgba(74, 222, 128, 0.22);
    background: rgba(22, 101, 52, 0.18);
    color: rgba(220, 252, 231, 0.95);
}

.profile-presence-chip.is-offline {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(30, 41, 59, 0.18);
    color: rgba(226, 232, 240, 0.82);
}

.profile-presence-chip-label {
    color: rgba(255, 255, 255, 0.45);
}

.profile-popover-card-copy {
    padding: 0.88rem 0.58rem 0.78rem 0.92rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.76rem;
    min-width: 0;
}

.profile-popover-avatar-layout {
    display: grid;
    grid-template-columns: minmax(104px, 34%) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: end;
    padding: 1rem 1rem 1rem 1.05rem;
    min-height: 312px;
}

.profile-popover-avatar-stage {
    min-height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.profile-popover-avatar-art {
    width: 100%;
    max-width: 156px;
    max-height: 238px;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.28));
}

.profile-popover-avatar-fallback {
    width: 110px;
    height: 110px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    font-size: 1.8rem;
    font-weight: 700;
}

.profile-popover-avatar-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    gap: 1.12rem;
    padding-bottom: 0.3rem;
}

.profile-popover-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-top: 0.7rem;
}

.profile-popover-action-btn {
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(246, 249, 252, 0.92);
    border-radius: 999px;
    padding: 0.72rem 0.95rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.profile-popover-action-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.09);
}

.profile-popover-action-btn[disabled] {
    opacity: 0.62;
    cursor: wait;
    transform: none;
}

.profile-popover-status {
    min-height: 1rem;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.58);
}

.profile-popover-premium-preview {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.profile-popover-premium-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.profile-popover-stack {
    display: grid;
    gap: 0.7rem;
}

.profile-premium-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.38rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(246, 249, 252, 0.88);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.profile-premium-chip-label {
    position: relative;
    z-index: 1;
}

button.profile-premium-chip {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

button.profile-premium-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
}

@keyframes voyagerChipGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.profile-premium-chip.plus {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    overflow: hidden;
    background-size: 200% auto !important;
    animation: voyagerChipGradientShift 5s linear infinite !important;
}

.profile-premium-chip.plus::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, var(--popover-start, #ffffff), var(--popover-end, #ff6fb7), var(--popover-start, #ffffff));
    background-size: 220% 220%;
    opacity: 0.78;
    mix-blend-mode: multiply;
    animation: voyagerChipGradientShift 7s linear infinite;
}

.profile-premium-chip.plus::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
    z-index: 0;
    pointer-events: none;
}

button.profile-premium-chip.plus:hover {
    border-color: rgba(255, 255, 255, 0.94);
    background: rgba(255, 255, 255, 0.96);
}

.profile-premium-chip.supporter {
    border-color: rgba(250, 204, 21, 0.38);
    background: rgba(250, 204, 21, 0.18);
    color: rgba(255, 246, 185, 0.97);
}

.profile-account-since {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    max-width: min(100%, 260px);
    min-height: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    color: rgba(242, 245, 249, 0.66);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.profile-account-since.hidden {
    display: none;
}

.profile-popover-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0.56rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(236, 244, 252, 0.84);
    text-decoration: none;
    font-size: 12px;
}

.profile-popover-gallery-panel {
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 12, 18, 0.5);
    padding: 0.75rem;
}

.profile-popover-gallery-panel.hidden {
    display: none;
}

.profile-popover-gallery-grid {
    display: grid;
    gap: 0.65rem;
}

.profile-popover-scene-panel {
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 12, 18, 0.5);
    padding: 0.75rem;
}

.profile-popover-scene-panel.hidden {
    display: none;
}

.profile-popover-scene-shell {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(10, 14, 22, 0.82), rgba(5, 8, 13, 0.92)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
    min-height: 254px;
}

.profile-popover-scene-viewer {
    display: block;
    width: 100%;
    height: 254px;
    background: transparent;
}

.profile-popover-scene-placeholder {
    min-height: 254px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    color: rgba(244, 247, 251, 0.58);
    font-size: 12px;
    line-height: 1.55;
}

.profile-popover-scene-placeholder.is-error {
    color: rgba(252, 165, 165, 0.92);
}

.profile-popover-gallery-card {
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
    color: inherit;
}

.profile-popover-gallery-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
}

.profile-popover-gallery-card-copy {
    padding: 0.68rem 0.78rem 0.8rem;
}

.profile-popover-spotify {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.68rem;
    align-items: center;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 12, 18, 0.44);
    padding: 0.62rem 0.72rem;
}

.profile-popover-spotify img {
    width: 42px;
    height: 42px;
    border-radius: 0.85rem;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
}

.profile-popover-spotify-copy {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.profile-popover-spotify-progress {
    display: grid;
    gap: 0.28rem;
    margin-top: 0.28rem;
}

.profile-popover-spotify-progress-bar {
    position: relative;
    width: 100%;
    height: 0.26rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.profile-popover-spotify-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.74), rgba(96, 165, 250, 0.92));
    transition: width 0.9s linear;
}

.profile-popover-spotify-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.48);
}

.message-bubble {
    position: relative;
}

.chat-stage {
    position: relative;
    isolation: isolate;
}

.chat-background-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.34;
    filter: blur(0px);
    transform: scale(1.04);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.chat-background-overlay.hidden {
    display: none;
}

.chat-stage>#chat-messages,
.chat-stage>#new-messages-indicator,
.chat-stage>#typing-row {
    position: relative;
    z-index: 1;
}

.message-report-trigger,
.profile-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(246, 249, 252, 0.8);
    font-size: 15px;
    line-height: 1;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.message-report-trigger-inline {
    width: 1.65rem;
    height: 1.65rem;
    font-size: 12px;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.message-report-trigger:hover,
.profile-menu-trigger:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.cf-action-menu {
    position: fixed;
    z-index: 120;
    min-width: 10rem;
    padding: 0.45rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.97), rgba(4, 6, 9, 0.98));
    box-shadow: 0 26px 46px rgba(0, 0, 0, 0.36);
}

.cf-action-menu.hidden {
    display: none;
}

.cf-action-menu button {
    width: 100%;
    border: none;
    background: transparent;
    color: rgba(246, 249, 252, 0.9);
    text-align: left;
    border-radius: 0.8rem;
    padding: 0.72rem 0.8rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cf-action-menu button:hover {
    background: rgba(255, 255, 255, 0.06);
}

.cf-action-menu button.is-danger {
    color: rgba(254, 202, 202, 0.98);
}

.cf-action-menu button.is-moderation {
    color: rgba(255, 228, 189, 0.96);
}

.cf-action-menu button.is-moderation.is-danger {
    color: rgba(254, 202, 202, 0.98);
    background: rgba(127, 29, 29, 0.08);
}

.cf-action-menu-section {
    padding: 0.55rem 0.8rem 0.4rem;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.36);
}

.cf-action-menu-section.is-moderation {
    color: rgba(255, 215, 170, 0.82);
}

.cf-action-menu-divider {
    height: 1px;
    margin: 0.32rem 0.4rem;
    background: rgba(255, 255, 255, 0.08);
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 5, 10, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.image-lightbox.hidden {
    display: none;
}

.image-lightbox-shell {
    position: relative;
    max-width: min(92vw, 1280px);
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-lightbox-shell img {
    display: block;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48);
}

.image-lightbox-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 11, 18, 0.94);
    color: rgba(255, 255, 255, 0.88);
    font-size: 20px;
    line-height: 1;
}

.report-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 4, 10, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.report-modal-backdrop.hidden {
    display: none;
}

.report-modal {
    width: min(480px, calc(100vw - 1.5rem));
    border-radius: 1.45rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(10, 14, 20, 0.96), rgba(5, 8, 12, 0.98));
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.42);
    padding: 1.15rem;
}

.report-field,
.report-select {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(246, 249, 252, 0.94);
    padding: 0.85rem 0.95rem;
    outline: none;
}

.report-field {
    min-height: 7.5rem;
    resize: vertical;
}

.composer-shell {
    background: linear-gradient(180deg, rgba(7, 9, 13, 0.92), rgba(4, 5, 8, 0.98));
}

.composer-bubble {
    width: min(100%, 980px);
    margin: 0 auto;
    border-radius: 999px;
    border: 1px solid var(--cf-theme-border, rgba(255, 255, 255, 0.08));
    background:
        linear-gradient(180deg, rgba(8, 10, 14, 0.96), rgba(3, 4, 7, 0.98)),
        linear-gradient(180deg, var(--cf-theme-surface, rgba(255, 255, 255, 0)), transparent);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.send-button {
    background:
        linear-gradient(180deg, rgba(18, 20, 24, 0.98), rgba(10, 12, 16, 1)),
        linear-gradient(180deg, var(--cf-theme-surface-strong, rgba(255, 255, 255, 0)), transparent);
    border-color: var(--cf-theme-border, rgba(255, 255, 255, 0.08));
    box-shadow: 0 8px 22px rgba(11, 24, 38, 0.24);
}

.send-button:hover {
    transform: translateY(-1px);
    border-color: var(--cf-theme-border-strong, rgba(255, 255, 255, 0.16));
    box-shadow: 0 14px 28px rgba(11, 24, 38, 0.34), 0 0 24px var(--cf-theme-glow, rgba(255, 255, 255, 0));
}

.send-button:disabled,
.composer-attach-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.composer-attach-button {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.76);
    background: rgba(255, 255, 255, 0.045);
    transition: transform 0.16s ease, background-color 0.18s ease, color 0.18s ease;
}

.composer-attach-button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.075);
    color: rgba(255, 255, 255, 0.96);
}

.composer-attachment-preview {
    width: min(100%, 980px);
    margin: 0.8rem auto 0;
    border-radius: 1.2rem;
    background: rgba(6, 9, 13, 0.92);
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0.85rem 1rem;
}

.composer-attachment-thumb {
    width: 64px;
    height: 64px;
    border-radius: 0.95rem;
    overflow: hidden;
    flex: 0 0 64px;
    background: rgba(255, 255, 255, 0.04);
}

.composer-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.composer-attachment-remove {
    margin-left: auto;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.composer-attachment-remove:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.96);
}

.message-image-attachment {
    width: min(100%, 420px);
    overflow: hidden;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.26);
}

.message-image-attachment img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.message-image-expired {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.55rem 0.85rem;
}

.empty-state-shell {
    width: min(420px, 100%);
    padding: 1.4rem;
    border-radius: 1.6rem;
    border: 1px solid rgba(127, 150, 184, 0.14);
    background: linear-gradient(180deg, rgba(24, 32, 46, 0.92), rgba(17, 24, 35, 0.95));
    box-shadow: 0 24px 40px rgba(7, 14, 24, 0.32);
}

#chat-view,
#channel-sidebar,
#admin-sidebar,
#chat-view>div:first-child,
.composer-shell,
.glass-panel,
.admin-sidebar-panel,
.admin-row-card,
.admin-row-card-active,
.admin-row-button,
.admin-soft-button,
.admin-soft-field,
.msg-bubble-user,
.msg-bubble-other,
.status-pill,
.presence-pill,
.typing-chip,
.composer-bubble,
.chat-input,
.send-button,
.empty-state-shell,
.hint-card,
#new-messages-indicator,
#server-auth-entry {
    border: none !important;
}

#chat-view {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: 100vh !important;
}

#chat-view>div:first-child {
    background: transparent !important;
}

#channel-sidebar,
#admin-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#channel-sidebar {
    padding-right: 1rem;
}

#admin-sidebar {
    padding-left: 1rem;
}

.admin-sidebar-panel,
.admin-row-card,
.admin-row-card-active {
    background: rgba(14, 17, 22, 0.94) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22) !important;
}

.admin-row-card-active {
    background: rgba(18, 22, 28, 0.96) !important;
}

.admin-row-button,
.admin-soft-button,
.status-pill,
.presence-pill,
.typing-chip,
.send-button {
    background: rgba(22, 25, 31, 0.96) !important;
    box-shadow: none !important;
}

.admin-soft-field,
.chat-input,
.composer-bubble {
    background: rgba(6, 8, 11, 0.96) !important;
    box-shadow: none !important;
}

.msg-bubble-user {
    background: rgba(26, 31, 38, 0.96) !important;
}

.msg-bubble-other {
    background: rgba(12, 14, 18, 0.96) !important;
}

.empty-state-shell,
.hint-card {
    background: rgba(17, 20, 26, 0.96) !important;
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.24) !important;
}

.hint-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.hint-card {
    border-radius: 1rem;
    border: 1px solid rgba(127, 150, 184, 0.14);
    background: rgba(19, 27, 38, 0.78);
    padding: 0.85rem;
    text-align: left;
}

.hint-card-label {
    color: rgba(230, 237, 247, 0.78);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hint-card-copy {
    color: rgba(151, 163, 186, 0.84);
    font-size: 11px;
    line-height: 1.45;
    margin-top: 0.5rem;
}

.inline-banner {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.hidden-banner {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.visible-banner {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes profilePopoverReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(0.978);
        filter: blur(14px) saturate(1.08);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
}

@keyframes profilePopoverHide {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.978);
        filter: blur(10px) saturate(1.02);
    }
}

@keyframes softPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes typingWave {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.42;
    }

    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@keyframes messageTargetPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.34);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(125, 211, 252, 0);
    }
}

@keyframes floatGlow {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-18px, 16px, 0) scale(1.08);
    }
}

@keyframes statusPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(126, 231, 255, 0.2);
        opacity: 0.74;
    }

    50% {
        box-shadow: 0 0 0 8px rgba(126, 231, 255, 0);
        opacity: 1;
    }
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 9999px;
}

.channels-header-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.channels-header-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
}

.channels-header-count {
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.38rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(126, 231, 255, 0.16);
    color: rgba(236, 254, 255, 0.96);
    border: 1px solid rgba(126, 231, 255, 0.22);
    font-size: 10px;
    letter-spacing: normal;
}

.channels-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.channels-shell.is-right-collapsed {
    grid-template-columns: minmax(300px, 336px) minmax(0, 1fr);
}

.channels-sidebar-shell,
.channels-center-shell,
.channels-right-sidebar {
    min-height: 0;
}

.channels-center-shell {
    min-width: 0;
}

.channels-sidebar-shell,
.channels-left-main {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-height: 0;
}

.channels-left-main {
    overflow: hidden;
}

.channels-panel {
    border-radius: 1.7rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(6, 10, 16, 0.76), rgba(4, 8, 13, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    padding: 1rem;
}

.channels-utility-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.channels-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.channels-quick-action-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.4rem;
    padding: 0.55rem 0.75rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(13, 18, 28, 0.94), rgba(7, 10, 16, 0.98)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    filter: brightness(0.84);
}

.channels-quick-action-btn:hover,
.channels-quick-action-btn:focus-visible {
    filter: brightness(1);
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
    outline: none;
}

.channels-quick-action-btn[data-quick-add="channel"] {
    grid-column: 1 / -1;
    min-height: 3.45rem;
}

.channels-quick-action-btn[data-quick-add="friend"] {
    background:
        linear-gradient(180deg, rgba(17, 22, 35, 0.92), rgba(8, 12, 18, 0.98)),
        linear-gradient(135deg, rgba(91, 173, 255, 0.28), rgba(54, 89, 190, 0.18));
    border-color: rgba(110, 184, 255, 0.28);
}

.channels-quick-action-btn[data-quick-add="group"] {
    background:
        linear-gradient(180deg, rgba(18, 20, 33, 0.92), rgba(8, 11, 17, 0.98)),
        linear-gradient(135deg, rgba(182, 117, 255, 0.26), rgba(102, 80, 228, 0.18));
    border-color: rgba(178, 133, 255, 0.26);
}

.channels-quick-action-btn[data-quick-add="channel"] {
    background:
        linear-gradient(180deg, rgba(23, 18, 10, 0.9), rgba(11, 8, 4, 0.98)),
        linear-gradient(135deg, rgba(247, 148, 29, 0.32), rgba(199, 89, 16, 0.2));
    border-color: rgba(248, 166, 68, 0.34);
}

.channels-quick-action-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.96);
}

.channels-quick-action-copy {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
}

.channels-quick-action-copy strong {
    font-size: 11px;
    line-height: 1.2;
}

.channels-quick-action-copy span {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.62);
}

.channels-section-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
}

.channels-section-title {
    margin-top: 0.45rem;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
}

.channels-browser-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#joined-channel-list {
    gap: 0.5rem !important;
}

.channels-right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.channels-member-search-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.channels-sidebar-search {
    width: 100%;
    min-height: 2.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.86);
    padding: 0 1rem;
    font-size: 13px;
    outline: none;
}

.channels-sidebar-search::placeholder {
    color: rgba(255, 255, 255, 0.34);
}

.channels-sidebar-search:focus {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

.channels-staff-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.channels-nav-grid {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.channels-nav-btn {
    width: 3.1rem;
    height: 3.1rem;
    flex: 0 0 3.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.76);
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
    filter: brightness(0.72);
}

.channels-nav-btn:hover,
.channels-nav-btn.is-active {
    transform: translateY(-1px);
    filter: brightness(1);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.98);
}

.channels-nav-btn svg {
    width: 1.15rem;
    height: 1.15rem;
}

.sidebar-mode-switch,
.add-flow-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.sidebar-mode-btn,
.channels-add-btn,
.channels-add-select {
    min-height: 2.8rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: filter 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    filter: brightness(0.6);
}

.sidebar-mode-btn.is-active,
.sidebar-mode-btn:hover,
.channels-add-btn:hover,
.channels-add-select:hover {
    filter: brightness(1);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.96);
}

.channels-add-select {
    padding: 0 0.9rem;
    appearance: none;
}

.channels-conversation-card {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 1.15rem;
    border: 1px solid var(--conversation-border, rgba(255, 255, 255, 0.12));
    background:
        linear-gradient(180deg, rgba(15, 14, 12, 0.16), rgba(8, 8, 8, 0.26)),
        linear-gradient(135deg, var(--conversation-start, #3f4b66), var(--conversation-end, #181f2d));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 36px rgba(0, 0, 0, 0.2);
    transition: filter 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    filter: brightness(0.84) saturate(1.08);
}

.channels-conversation-card::after,
.channels-member-card::after,
.channels-self-card-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%);
    border-radius: inherit;
    pointer-events: none;
}

.channels-conversation-card:hover,
.channels-conversation-card.is-active,
.channels-member-card:hover,
.channels-member-card.is-active,
.channels-self-card-pill:hover {
    filter: brightness(1) saturate(1.12);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 42px rgba(0, 0, 0, 0.24);
}

.channels-conversation-card.is-unread {
    filter: brightness(1.12) saturate(1.16);
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 22px 40px rgba(0, 0, 0, 0.22);
}

.channels-conversation-card.is-channel .channels-conversation-avatar {
    border-radius: 1rem;
}

.channels-conversation-avatar-channel {
    border-radius: 1rem;
}

.channels-conversation-card.is-channel .channels-conversation-button {
    padding-right: 2.8rem;
}

.channels-conversation-button {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.6rem 0.85rem;
    color: inherit;
    min-width: 0;
}

.channels-conversation-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(10, 12, 16, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    border: 2px solid rgba(0, 0, 0, 0.28);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
}

.channels-conversation-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channels-conversation-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.26rem;
}

.channels-conversation-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.channels-conversation-title {
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.97);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channels-conversation-secondary {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.74);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channels-conversation-meta-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.62);
}

.channels-conversation-meta-note {
    color: rgba(255, 255, 255, 0.48);
}

.channels-unread-badge,
.conversation-kind-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.45rem;
    padding: 0.24rem 0.54rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.channels-unread-badge {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 255, 255, 0.18);
}

.channels-favorite-btn {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.74);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    z-index: 2;
}

.channels-favorite-btn:hover,
.channels-favorite-btn:focus-visible {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.96);
    outline: none;
}

.channels-favorite-btn.is-favorite {
    color: rgba(254, 240, 138, 0.98);
    border-color: rgba(250, 204, 21, 0.24);
    background: rgba(250, 204, 21, 0.14);
}

.channels-self-panel {
    padding: 0.5rem 0.7rem;
}

.channels-self-card {
    display: block;
}

.channels-self-card-pill {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    min-height: 2.6rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--conversation-border, rgba(255, 255, 255, 0.12));
    background:
        linear-gradient(180deg, rgba(15, 14, 12, 0.12), rgba(8, 8, 8, 0.2)),
        linear-gradient(135deg, var(--conversation-start, #3f4b66), var(--conversation-end, #181f2d));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 36px rgba(0, 0, 0, 0.18);
    transition: filter 0.18s ease, transform 0.18s ease;
    filter: brightness(0.88) saturate(1.08);
}

.channels-self-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(10, 12, 16, 0.48);
    border: 2px solid rgba(0, 0, 0, 0.28);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
}

.channels-self-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channels-self-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.18rem;
}

.channels-self-activity {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.74);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channels-member-card {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 1.5rem;
    border: 1px solid var(--member-border, rgba(255, 255, 255, 0.14));
    background:
        linear-gradient(180deg, rgba(15, 14, 12, 0.14), rgba(8, 8, 8, 0.24)),
        linear-gradient(135deg, var(--member-start, #3f4b66), var(--member-end, #181f2d));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 34px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
    filter: brightness(0.88) saturate(1.08);
}

.channels-member-card-body {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding: 1rem 1.05rem;
}

.channels-member-avatar {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 54px;
    background: rgba(10, 12, 16, 0.48);
    border: 2px solid rgba(0, 0, 0, 0.28);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.channels-member-status {
    margin-top: 0.32rem;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.74);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channels-member-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.channels-member-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.4rem;
    padding: 0.22rem 0.56rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.channels-member-chip.is-live {
    border-color: rgba(110, 231, 183, 0.18);
    background: rgba(16, 84, 58, 0.18);
    color: rgba(209, 250, 229, 0.94);
}

.channels-member-chip.is-away {
    color: rgba(255, 255, 255, 0.58);
}

.channels-member-quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.86);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.channels-context-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.channels-context-meta {
    min-width: 0;
}

.channels-self-card .channels-self-copy {
    min-width: 0;
}

.channels-empty-state.hidden {
    display: none;
}

.channels-empty-card {
    width: min(460px, calc(100% - 2.5rem));
    padding: 1.4rem;
    border-radius: 1.7rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(2, 6, 12, 0.62);
    backdrop-filter: blur(20px);
    text-align: center;
}

.channels-empty-eyebrow {
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
}

.channels-empty-title {
    margin: 0.7rem 0 0;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
}

.channels-empty-copy {
    margin: 0.8rem auto 0;
    max-width: 34rem;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.56);
}

.channels-header-btn[data-collapsed="1"] {
    background: rgba(109, 211, 255, 0.1);
    border-color: rgba(109, 211, 255, 0.16);
    color: rgba(224, 242, 254, 0.96);
}

.channels-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.channels-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 12, 0.72);
    backdrop-filter: blur(16px);
}

.channels-modal-card {
    position: relative;
    width: min(720px, calc(100vw - 2rem));
    max-height: min(82vh, 920px);
    overflow: auto;
    border-radius: 1.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(11, 16, 24, 0.96), rgba(6, 10, 16, 0.98));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
    padding: 1.35rem;
}

.channels-modal-card-compact {
    width: min(560px, calc(100vw - 2rem));
}

.channels-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.channels-modal-eyebrow {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
}

.channels-modal-title {
    margin: 0.45rem 0 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
}

.channels-modal-copy {
    margin-top: 0.45rem;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
}

.channels-modal-close,
.channels-modal-primary,
.channels-modal-secondary,
.channels-notification-read {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.72rem 1rem;
}

.channels-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.channels-modal-list {
    display: grid;
    gap: 0.85rem;
}

.channels-notification-card {
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.035);
    padding: 0.95rem 1rem;
}

.channels-notification-card.is-unread {
    border-color: rgba(126, 231, 255, 0.16);
    background: rgba(126, 231, 255, 0.08);
}

@media (max-width: 768px) {
    .hint-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="channels"] {
        overflow-y: auto;
        min-height: 100vh;
    }

    #chat-view {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        max-width: none !important;
        width: 100% !important;
        height: 100vh !important;
    }

    #chat-view>.px-6 {
        padding: 1rem;
    }

    #chat-banner {
        margin-inline: 1rem;
    }

    #channel-sidebar,
    #admin-sidebar {
        width: 100%;
        min-width: 0;
        padding: 1rem;
    }

    .channels-nav-grid {
        grid-template-columns: 1fr;
    }

    .sidebar-mode-switch,
    .add-flow-row {
        grid-template-columns: 1fr;
    }

    #chat-messages {
        padding: 1rem;
        gap: 0.85rem;
    }

    .composer-shell {
        padding: 0.85rem;
    }

    .composer-bubble {
        gap: 0.7rem;
        padding: 0.8rem;
    }

    .chat-input.composer-textarea {
        font-size: 16px;
        min-height: 48px;
        padding-inline: 1rem;
    }

    .send-button,
    .composer-attach-button {
        width: 48px;
        height: 48px;
    }

    .profile-popover {
        width: min(94vw, 420px);
        max-width: min(94vw, 420px);
    }
}

@media (min-width: 1024px) {

    #channels-shell,
    body.layout-v1 #channels-shell,
    body.layout-v2 #channels-shell,
    body.layout-v3 #channels-shell {
        display: grid !important;
        grid-template-columns: minmax(300px, 336px) minmax(0, 1fr) minmax(300px, 336px) !important;
        transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* --- V1 (Default) --- */
/* Currently natively handled by the existing classes */

/* --- V2 (Floating Islands) --- */
body.layout-v2 #channels-shell {
    gap: 1.5rem;
    padding: 1.5rem;
    background: transparent;
}

body.layout-v2 #channel-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.layout-v2 .channels-center-shell {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.02) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* --- V3 (Theater / Edge-to-Edge) --- */
body.layout-v3 #chat-view {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: 100vh !important;
}

body.layout-v3 #channel-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.layout-v3 .channels-context-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

body.layout-v3 .channels-center-shell {
    background: transparent !important;
    border-left: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
}



/* ---- cometfare-dark-ui.css ---- */

:root {
    color-scheme: dark;
    --cf-bg-0: #000000;
    --cf-bg-1: #06080c;
    --cf-bg-2: #0c1015;
    --cf-surface-0: rgba(7, 9, 12, 0.96);
    --cf-surface-1: rgba(13, 15, 19, 0.98);
    --cf-surface-2: rgba(20, 23, 29, 0.99);
    --cf-border: rgba(255, 255, 255, 0.08);
    --cf-border-strong: rgba(255, 255, 255, 0.14);
    --cf-text: #f3f5f8;
    --cf-muted: #8c939d;
    --cf-muted-soft: rgba(243, 245, 248, 0.42);
    --cf-theme-soft: rgba(255, 255, 255, 0);
    --cf-theme-surface: rgba(255, 255, 255, 0);
    --cf-theme-surface-strong: rgba(255, 255, 255, 0);
    --cf-theme-border: rgba(255, 255, 255, 0.08);
    --cf-theme-border-strong: rgba(255, 255, 255, 0.14);
    --cf-theme-glow: rgba(255, 255, 255, 0);
    --cf-theme-text: rgba(243, 245, 248, 0.84);
    --accent: rgba(var(--cf-theme-rgb, 255, 255, 255), 0.72);
    --accent-2: rgba(var(--cf-theme-rgb, 255, 255, 255), 0.58);
    --glow: rgba(var(--cf-theme-rgb, 255, 255, 255), 0.16);
    --text: var(--cf-text);
    --muted: var(--cf-muted);
}

body[data-page="channels"] {
    background: #04070c !important;
    color: var(--cf-text) !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px;
}

.ambient-shell::before,
.ambient-shell::after,
.ambient-glow {
    opacity: 0 !important;
    background: none !important;
}

.ambient-shell::before,
.ambient-glow {
    background: none !important;
}

.ambient-shell::after {
    background: none !important;
}

.particle {
    background: rgba(255, 255, 255, 0.06) !important;
}

.particles-container,
.ambient-glow {
    display: none !important;
}

.glass-panel,
.glass-card,
.project-card,
.admin-sidebar-panel,
.admin-row-card,
.admin-row-card-active,
.profile-panel,
.settings-drawer,
.message-style-modal,
.showcase-hero,
.showcase-media-panel,
.showcase-detail-panel,
.floating-download,
.back-btn,
.main-btn,
.composer-bubble,
.empty-state-shell,
.hint-card {
    background: var(--cf-surface-1) !important;
    border: none !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.72) !important;
}

.glass-card:hover,
.project-card:hover,
.main-btn:hover,
.floating-download:hover,
.back-btn:hover,
.ghost-button:hover,
.admin-row-button:hover,
.admin-soft-button:hover {
    border-color: var(--cf-theme-border-strong) !important;
    box-shadow: 0 22px 62px rgba(0, 0, 0, 0.76), 0 0 20px var(--cf-theme-glow) !important;
}

.ghost-button,
.admin-row-button,
.admin-soft-button,
.glass-button,
.status-pill,
.presence-pill,
.typing-chip,
.tag,
.project-card .card-tag,
.subtle-chip,
.project-card.active {
    border: none !important;
    background: rgba(16, 18, 23, 0.94) !important;
    color: var(--cf-theme-text) !important;
}

.status-pill-live,
.admin-row-card-active {
    background: rgba(12, 14, 18, 0.98) !important;
    border: none !important;
    box-shadow: 0 0 18px var(--cf-theme-glow) !important;
}

.msg-bubble-user {
    background: rgba(24, 28, 34, 0.98) !important;
    border: none !important;
}

.msg-bubble-other {
    background: rgba(10, 12, 16, 0.99) !important;
    border: none !important;
}

.chat-input,
.admin-soft-field,
input,
textarea,
select,
.drawer-field,
.settings-color-label {
    background: rgba(5, 6, 8, 0.99) !important;
    border: none !important;
    color: var(--cf-text) !important;
    box-shadow: none !important;
}

.chat-input:focus,
.admin-soft-field:focus,
input:focus,
textarea:focus,
select:focus,
.drawer-field:focus {
    border-color: var(--cf-theme-border-strong) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 18px var(--cf-theme-glow) !important;
    background: rgba(4, 5, 7, 1) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(243, 245, 248, 0.34) !important;
}

.project-card::before,
.floating-download::before,
.main-btn::before {
    background: none !important;
}

.section-divider {
    background: rgba(255, 255, 255, 0.08) !important;
}

.page-title {
    background: none !important;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: #f3f5f8 !important;
    filter: drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.1)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.86)) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.94)) !important;
}

.soft-orb,
.typing-dots span,
.status-dot {
    background: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.1) !important;
}

.send-button {
    background: rgba(12, 14, 18, 1) !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34), 0 0 18px var(--cf-theme-glow) !important;
}

.profile-popover-card,
.profile-popover-banner,
.composer-shell,
.composer-bubble,
.showcase,
.showcase-header,
.project-selector,
.settings-section {
    color: inherit;
}

body[data-page="channels"] #channel-sidebar,
body[data-page="channels"] #admin-sidebar,
body[data-page="channels"] #chat-view>.border-b,
body[data-page="channels"] #chat-banner,
body[data-page="channels"] .composer-shell,
body[data-page="channels"] .composer-bubble,
body[data-page="channels"] .chat-input,
body[data-page="channels"] .send-button,
body[data-page="channels"] .status-pill,
body[data-page="channels"] .typing-chip,
body[data-page="channels"] .admin-soft-field,
body[data-page="channels"] .admin-soft-button,
body[data-page="channels"] .admin-sidebar-panel,
body[data-page="channels"] .admin-row-card,
body[data-page="channels"] .admin-row-card-active,
body[data-page="channels"] .admin-row-button,
body[data-page="channels"] .tag,
body[data-page="friends"] .glass-panel,
body[data-page="friends"] .ghost-button,
body[data-page="friends"] .subtle-chip,
body[data-page="friends"] article,
body[data-page="servers"] .glass-panel,
body[data-page="servers"] .ghost-button,
body[data-page="servers"] article,
body[data-page="servers"] #joined-list>article,
body[data-page="main"] .glass-panel,
body[data-page="main"] .ghost-button,
body[data-page="downloads"] .glass-panel,
body[data-page="downloads"] .ghost-button,
body[data-page="downloads"] .project-card,
body[data-page="downloads"] .project-card .card-tag {
    border: none !important;
}

body[data-page="channels"] [class*="border-"],
body[data-page="friends"] [class*="border-"],
body[data-page="servers"] [class*="border-"] {
    border: none !important;
}

body[data-page="channels"] #channel-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body[data-page="channels"] #channel-sidebar .admin-sidebar-panel {
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body[data-page="channels"] #channel-sidebar .admin-row-card,
body[data-page="channels"] #room-member-list .admin-row-card {
    background: rgba(9, 10, 13, 0.98) !important;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5) !important;
}

body[data-page="channels"] #channel-sidebar .admin-row-card-active,
body[data-page="channels"] #room-member-list .admin-row-card-active {
    background: rgba(13, 14, 18, 0.99) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.54) !important;
}

body[data-page="channels"] #admin-sidebar,
body[data-page="channels"] #channel-sidebar,
body[data-page="channels"] #chat-view>.px-6,
body[data-page="channels"] .composer-shell {
    background: rgba(6, 7, 10, 0.92) !important;
}

body[data-page="friends"] article,
body[data-page="servers"] article,
body[data-page="servers"] #joined-list>article {
    background: rgba(10, 11, 13, 0.96) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.46) !important;
}


/* ---- cometfare-chat-reforge.css ---- */

/*
 * Chat reforge shell:
 * Keeps the stable chat logic and profile/composer systems intact while
 * rebuilding the page layout into a 4-part glass structure.
 */

:root {
    --chat-reforge-border: rgba(208, 214, 226, 0.15);
    --chat-reforge-border-soft: rgba(208, 214, 226, 0.09);
    --chat-reforge-bg: linear-gradient(156deg, rgba(8, 10, 14, 0.98), rgba(5, 7, 10, 0.99));
    --chat-reforge-panel: linear-gradient(180deg, rgba(17, 19, 24, 0.9), rgba(12, 14, 18, 0.94));
    --chat-reforge-panel-soft: linear-gradient(180deg, rgba(28, 32, 40, 0.64), rgba(19, 22, 29, 0.74));
    --chat-reforge-text-soft: rgba(239, 242, 248, 0.72);
}

body[data-page="channels"] {
    background:
        radial-gradient(1200px 620px at 10% -8%, rgba(160, 170, 190, 0.11), transparent 65%),
        radial-gradient(900px 540px at 95% 10%, rgba(130, 136, 150, 0.09), transparent 62%),
        linear-gradient(180deg, #040507 0%, #0a0c10 46%, #0b0d12 100%);
}

#chat-view {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: 100vh !important;
}

.channels-context-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--chat-reforge-border-soft) !important;
    background: linear-gradient(180deg, rgba(17, 20, 26, 0.88), rgba(12, 15, 21, 0.74));
    backdrop-filter: blur(13px) saturate(118%);
    -webkit-backdrop-filter: blur(13px) saturate(118%);
}

.channels-context-meta h3 {
    letter-spacing: 0.025em;
    font-size: 0.94rem;
}

.channels-header-btn {
    border: 1px solid var(--chat-reforge-border-soft) !important;
    background: linear-gradient(180deg, rgba(32, 36, 45, 0.82), rgba(19, 23, 31, 0.84)) !important;
    color: rgba(241, 244, 249, 0.82) !important;
}

.channels-header-discover-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.channels-header-btn:hover,
.channels-header-btn:focus-visible,
.channels-header-discover-btn:hover,
.channels-header-discover-btn:focus-visible {
    border-color: rgba(214, 220, 232, 0.38) !important;
    background: linear-gradient(180deg, rgba(42, 48, 59, 0.86), rgba(26, 32, 41, 0.88)) !important;
    color: #f3f9ff !important;
}

.channels-control-menu {
    position: relative;
}

.channels-control-menu summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.channels-control-menu summary::-webkit-details-marker {
    display: none;
}

.channels-control-menu-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 170px;
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(205, 212, 224, 0.22);
    background: linear-gradient(180deg, rgba(21, 24, 31, 0.96), rgba(14, 17, 23, 0.98));
    box-shadow: 0 18px 40px rgba(3, 8, 16, 0.58);
}

.channels-control-menu:not([open]) .channels-control-menu-pop {
    display: none;
}

.channels-control-menu-pop a {
    text-decoration: none;
    color: rgba(233, 245, 255, 0.76);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 8px 10px;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.channels-control-menu-pop a:hover {
    border-color: rgba(207, 214, 224, 0.32);
    background: rgba(227, 233, 243, 0.08);
    color: #ffffff;
}

#channels-shell {
    display: flex !important;
    flex-direction: row !important;
    min-height: 0;
    height: 100%;
    border-top: 1px solid rgba(208, 214, 226, 0.08);
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.56), rgba(7, 9, 13, 0.72));
}

.server-access-rail {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-right: 1px solid var(--chat-reforge-border-soft);
    background: linear-gradient(180deg, rgba(16, 19, 25, 0.93), rgba(12, 15, 21, 0.95));
    padding: 14px 10px 12px;
}

.server-access-top,
.server-access-bottom {
    display: grid;
    gap: 8px;
}

.server-access-list {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 8px;
    padding: 4px 0;
}

.server-access-btn,
.server-rail-item {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(209, 216, 228, 0.22);
    background: linear-gradient(180deg, rgba(39, 44, 54, 0.86), rgba(25, 29, 37, 0.9));
    color: rgba(233, 245, 255, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.server-access-btn:hover,
.server-access-btn:focus-visible,
.server-rail-item:hover,
.server-rail-item:focus-visible,
.server-rail-item.is-active {
    transform: translateY(-1px);
    border-color: rgba(223, 229, 240, 0.58);
    box-shadow: 0 0 0 1px rgba(223, 229, 240, 0.3), 0 10px 25px rgba(12, 14, 19, 0.46);
    color: #ffffff;
}

.server-access-btn.is-home {
    font-size: 11px;
    letter-spacing: 0.14em;
}

.server-access-btn.is-create {
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
}

.server-rail-item img,
.server-rail-item .server-rail-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.server-rail-item .server-rail-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(243, 249, 255, 0.95);
}

.server-rail-item .server-rail-tooltip {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(208, 215, 226, 0.32);
    background: rgba(17, 20, 27, 0.94);
    color: rgba(236, 247, 255, 0.92);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 30;
}

.server-rail-item:hover .server-rail-tooltip,
.server-rail-item:focus-visible .server-rail-tooltip {
    opacity: 1;
}

#channel-sidebar,
#admin-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#channel-sidebar {
    border-right: 1px solid var(--chat-reforge-border-soft) !important;
}

#admin-sidebar {
    border-left: 1px solid var(--chat-reforge-border-soft) !important;
}

.channels-panel {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.admin-sidebar-panel {
    border-radius: 14px !important;
    border-color: rgba(216, 223, 234, 0.16) !important;
    background: var(--chat-reforge-panel-soft) !important;
}

.channels-utility-panel,
.channels-browser-panel {
    padding: 0 !important;
}

.channels-utility-panel .channels-nav-grid,
.channels-utility-panel #channels-quick-actions {
    border-radius: 16px;
    border: 1px solid rgba(216, 223, 234, 0.16);
    background: linear-gradient(180deg, rgba(40, 45, 56, 0.42), rgba(28, 32, 41, 0.46));
    backdrop-filter: blur(12px) saturate(112%);
    -webkit-backdrop-filter: blur(12px) saturate(112%);
    padding: 10px;
}

.channels-utility-panel #channels-quick-actions {
    margin-top: 10px;
}

.channels-browser-panel .sidebar-mode-switch {
    border-radius: 16px;
    border: 1px solid rgba(216, 223, 234, 0.15);
    background: linear-gradient(180deg, rgba(37, 42, 53, 0.42), rgba(25, 29, 38, 0.48));
    padding: 8px;
}

.channels-browser-panel #joined-channel-list {
    border-radius: 16px;
    border: 1px solid rgba(216, 223, 234, 0.14);
    background: linear-gradient(180deg, rgba(36, 41, 51, 0.38), rgba(24, 28, 36, 0.46));
    backdrop-filter: blur(11px) saturate(110%);
    -webkit-backdrop-filter: blur(11px) saturate(110%);
    padding: 10px;
}

.channels-browser-panel #joined-channel-empty {
    margin-top: 10px;
    border-radius: 12px;
    border: 1px solid rgba(216, 223, 234, 0.12);
    background: rgba(34, 39, 49, 0.42);
    padding: 9px 10px;
}

.channels-center-shell {
    background:
        linear-gradient(180deg, rgba(12, 15, 21, 0.58), rgba(9, 12, 17, 0.69)),
        radial-gradient(800px 500px at 15% -20%, rgba(190, 198, 212, 0.06), transparent 65%);
}

.chat-stage {
    border-left: 1px solid rgba(214, 220, 231, 0.04);
    border-right: 1px solid rgba(214, 220, 231, 0.04);
}

#chat-messages {
    padding: 16px 18px 8px !important;
}

.composer-shell {
    border-top: 1px solid var(--chat-reforge-border-soft) !important;
    background: linear-gradient(180deg, rgba(9, 16, 27, 0.84), rgba(6, 11, 20, 0.92));
}

.composer-bubble {
    border-radius: 18px;
    border: 1px solid rgba(214, 220, 232, 0.2);
    background: linear-gradient(180deg, rgba(23, 26, 33, 0.92), rgba(16, 19, 25, 0.94));
    box-shadow: inset 0 1px 0 rgba(236, 240, 248, 0.06);
}

.channels-self-card,
.channels-member-card,
.channels-conversation-card {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

body[data-server-mode="1"] #channel-sidebar .sidebar-mode-switch,
body[data-server-mode="1"] #channel-sidebar #channels-quick-actions {
    display: none !important;
}

body[data-server-mode="1"] #joined-channel-subheading {
    color: rgba(221, 227, 236, 0.74) !important;
}

.server-channel-card {
    border: 1px solid rgba(217, 224, 236, 0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(37, 42, 53, 0.8), rgba(24, 28, 37, 0.9));
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

.server-channel-card:hover,
.server-channel-card.is-active {
    border-color: rgba(228, 234, 244, 0.5);
    background: linear-gradient(180deg, rgba(54, 60, 73, 0.82), rgba(33, 38, 48, 0.9));
}

.server-message {
    border: 1px solid rgba(217, 224, 236, 0.13);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(28, 33, 43, 0.84), rgba(18, 22, 30, 0.9));
}

.server-create-modal-card {
    max-width: 480px;
}

.server-create-step {
    display: grid;
    gap: 8px;
}

.server-create-field-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232, 237, 245, 0.68);
    font-weight: 700;
}

.server-create-field {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(214, 221, 232, 0.22);
    background: rgba(26, 30, 38, 0.72);
    color: rgba(246, 248, 252, 0.92);
    padding: 11px 13px;
    outline: none;
}

.server-create-field:focus {
    border-color: rgba(231, 236, 244, 0.56);
    box-shadow: 0 0 0 1px rgba(231, 236, 244, 0.34);
}

.server-create-field-area {
    resize: vertical;
    min-height: 82px;
}

.server-create-help {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(221, 227, 237, 0.54);
}

@media (max-width: 1260px) {
    #channels-shell {
        grid-template-columns: 70px 300px minmax(0, 1fr) 290px;
    }
}

@media (max-width: 1060px) {
    #channels-shell {
        grid-template-columns: 66px 280px minmax(0, 1fr);
    }

    #admin-sidebar {
        display: none !important;
    }
}

@media (max-width: 860px) {
    #chat-view {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        max-width: none !important;
        width: 100% !important;
        height: 100vh !important;
    }

    .channels-context-bar {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #channels-shell {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    #channel-sidebar {
        display: none !important;
    }
}


/* ---- v3.5.0 chat overrides ---- */
body[data-page="channels"] {
    --cf-mention-highlight: rgba(255, 221, 87, 0.15);
    --cf-mention-line: rgba(255, 231, 132, 0.42);
    --cf-voyager-glow-soft: rgba(122, 214, 255, 0.18);
}

#channel-sidebar {
    padding: 0.9rem !important;
}

.channels-left-main {
    gap: 0.7rem;
}

.channels-panel {
    border-radius: 1.5rem !important;
}

.channels-utility-panel {
    padding-bottom: 0.8rem !important;
}

.channels-conversation-card {
    position: relative;
    overflow: hidden;
    min-height: 24px;
    padding: 0.08rem;
    border-radius: 1rem !important;
    border: 1px solid transparent;
    background: transparent !important;
    box-shadow: none !important;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.channels-conversation-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.channels-conversation-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color 0.18s ease;
}

.channels-conversation-card:hover {
    background: rgba(148, 163, 184, 0.05) !important;
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: none !important;
}

.channels-conversation-card:hover::after {
    border-color: rgba(148, 163, 184, 0.3);
}

.channels-conversation-card.is-active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        linear-gradient(135deg, var(--conversation-start, #42506e), var(--conversation-end, #1b2432));
    border-color: color-mix(in srgb, var(--conversation-start, #ffffff) 60%, white 20%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), 0 0 14px var(--cf-voyager-glow-soft);
}

.channels-conversation-card.is-active::before {
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.15), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.06));
    opacity: 0.7;
}

.channels-conversation-card.is-active::after {
    border-color: color-mix(in srgb, var(--conversation-start, #ffffff) 58%, rgba(255, 255, 255, 0.3));
}

.channels-conversation-card.is-unread {
    border-color: rgba(123, 214, 255, 0.2);
}

.channels-conversation-button {
    min-height: 22px;
    padding: 0.24rem 0.58rem !important;
    border-radius: 1rem !important;
    gap: 0.5rem !important;
    background: transparent !important;
}

.channels-conversation-avatar {
    width: 1.55rem !important;
    height: 1.55rem !important;
    border-radius: 50% !important;
}

.channels-conversation-title {
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
}

.channels-conversation-secondary,
.channels-conversation-meta-line,
.channels-conversation-meta-note {
    font-size: 0.64rem !important;
}

.channels-self-card-pill {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 0 24px rgba(122, 214, 255, 0.1);
}

.message-shell {
    position: relative;
}

.message-shell-mentioned::before {
    content: "";
    position: absolute;
    top: -0.35rem;
    bottom: -0.35rem;
    left: -1.35rem;
    right: -1.35rem;
    border-radius: 1.05rem;
    background: linear-gradient(90deg, rgba(255, 230, 128, 0), var(--cf-mention-highlight) 12%, var(--cf-mention-highlight) 88%, rgba(255, 230, 128, 0));
    border: 1px solid rgba(255, 235, 151, 0.1);
    pointer-events: none;
}

.message-bubble-mentioned,
.message-plain-mentioned {
    border-left: 2px solid rgba(255, 215, 0, 0.5) !important;
    box-shadow: inset 40px 0 50px -30px rgba(255, 215, 0, 0.05) !important;
    background: transparent !important;
}

.message-mention {
    border-radius: 999px;
    border: none !important;
    background: rgba(255, 215, 0, 0.08) !important;
    color: #ffd700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    box-shadow: none !important;
}

.message-mention:hover {
    background: rgba(255, 215, 0, 0.14) !important;
}

.chat-day-separator {
    width: min(100%, 18rem);
    margin: 1rem auto 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    color: rgba(235, 241, 248, 0.46);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.chat-day-separator::before,
.chat-day-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
}

.message-image-attachment,
.message-image-expired {
    border-radius: 1rem !important;
    overflow: hidden;
}

.message-image-attachment.is-video video,
.message-image-attachment img {
    display: block;
    width: 100%;
    max-width: min(100%, 30rem);
    max-height: 28rem;
    object-fit: cover;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.28);
}

.message-image-attachment.is-video {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.profile-popover-card,
.profile-popover-gallery-panel,
.profile-popover-scene-panel {
    overflow: hidden;
}

.profile-popover-side-media {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.profile-popover-side-media-art {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    min-height: 10rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.profile-popover-side-media-art img,
.profile-popover-side-media-art video {
    width: 100%;
    height: 100%;
    min-height: 10rem;
    object-fit: cover;
    transform-origin: center;
}

.profile-popover-side-helper {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.profile-popover-side-helper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
}

@media (max-width: 1100px) {
    #channel-sidebar {
        padding: 0.78rem !important;
    }

    .channels-conversation-button {
        min-height: 32px;
        padding: 0.34rem 0.62rem !important;
    }

    .channels-conversation-avatar {
        width: 1.85rem !important;
        height: 1.85rem !important;
    }
}

/* ---- v3.5.0 shared motion + glow ---- */
.channels-conversation-card,
.channels-self-card-pill,
.channels-member-card,
.profile-popover-card {
    position: relative;
}

.channels-conversation-card {
    box-shadow: none !important;
}

.channels-self-card-pill {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26), 0 0 24px color-mix(in srgb, var(--conversation-glow-start, #ffffff) 16%, transparent);
}

.channels-member-card {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24), 0 0 20px color-mix(in srgb, var(--member-glow-start, #ffffff) 16%, transparent);
}

.profile-popover-card {
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34), 0 0 28px color-mix(in srgb, var(--popover-glow-start, #ffffff) 18%, transparent);
}

.profile-popover-card.is-banner-tall .profile-popover-banner {
    min-height: 10.5rem;
}

.cf-gradient-motion-aurora,
.cf-gradient-motion-pulse,
.cf-gradient-motion-sheen,
.cf-gradient-motion-orbit,
.cf-gradient-motion-prism,
.cf-gradient-motion-ripple {
    background-size: 180% 180%;
}

.cf-gradient-motion-aurora {
    animation: cfGradientAurora 12s ease-in-out infinite;
}

.cf-gradient-motion-pulse {
    animation: cfGradientPulse 4.8s ease-in-out infinite;
}

.cf-gradient-motion-sheen {
    overflow: hidden;
}

.cf-gradient-motion-sheen::before {
    animation: cfGradientSheen 4.8s linear infinite;
}

.cf-gradient-motion-orbit {
    animation: cfGradientOrbit 10s linear infinite;
}

.cf-gradient-motion-prism {
    animation: cfGradientPrism 8s ease-in-out infinite;
}

.cf-gradient-motion-ripple {
    animation: cfGradientRipple 6.2s ease-in-out infinite;
}

@keyframes cfGradientAurora {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes cfGradientPulse {

    0%,
    100% {
        transform: translateY(0);
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26), 0 0 18px color-mix(in srgb, var(--conversation-glow-start, var(--member-glow-start, var(--popover-glow-start, #ffffff))) 12%, transparent);
    }

    50% {
        transform: translateY(-1px);
        box-shadow: 0 24px 40px rgba(0, 0, 0, 0.3), 0 0 26px color-mix(in srgb, var(--conversation-glow-start, var(--member-glow-start, var(--popover-glow-start, #ffffff))) 20%, transparent);
    }
}

@keyframes cfGradientSheen {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@keyframes cfGradientOrbit {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes cfGradientPrism {

    0%,
    100% {
        background-position: 0% 50%;
        filter: saturate(1);
    }

    35% {
        background-position: 100% 20%;
        filter: saturate(1.15);
    }

    70% {
        background-position: 25% 100%;
        filter: saturate(1.05);
    }
}

@keyframes cfGradientRipple {

    0%,
    100% {
        background-size: 160% 160%;
    }

    50% {
        background-size: 205% 205%;
    }
}


/* V2 DYNAMIC PROFILE ENGINE */
.v2-dynamic-profile-container {
    position: relative;
    --v2-card-width-scale: 1;
    --v2-card-height-scale: 1;
    --v2-card-render-width: calc(720px * var(--v2-card-width-scale));
    --v2-avatar-size: calc(92px * var(--v2-card-height-scale));
    --v2-side-helper-size: calc(56px * var(--v2-card-height-scale));
    width: min(var(--v2-card-render-width), calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    border-radius: 1.35rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    isolation: isolate;
}

@media (max-width: 768px) {
    .v2-dynamic-profile-container {
        width: min(100%, var(--v2-card-render-width));
        max-width: 100%;
        border-radius: 1.1rem;
    }
}

.v2-edge-glow-layer {
    position: absolute;
    inset: -10px;
    border-radius: 1.7rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(135deg, var(--popover-glow-start, transparent), var(--popover-glow-end, transparent));
    filter: blur(24px) saturate(1.1);
    opacity: 0.82;
    mix-blend-mode: screen;
}

.v2-profile-surface {
    position: relative;
    width: 100%;
    min-height: calc(320px * var(--v2-card-height-scale));
    background: linear-gradient(var(--popover-direction, 135deg), var(--popover-start, #252a33), var(--popover-end, #3a414d));
    border-radius: 1.32rem;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 16px 34px rgba(0, 0, 0, 0.16);
}

.v2-banner-header {
    position: relative;
    width: 100%;
    min-height: calc(110px * var(--v2-card-height-scale));
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    overflow: visible;
    box-shadow: none;
}

.v2-dynamic-profile-container.is-banner-tall .v2-banner-header {
    min-height: calc(158px * var(--v2-card-height-scale));
}

.v2-overlay-host {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}


.v2-overlay-host-card {
    z-index: 2;
    overflow: hidden;
}

.v2-overlay-host-inside {
    z-index: 4;
    overflow: hidden;
}

.v2-overlay-host-floating {
    z-index: 5;
    overflow: visible;
}

.v2-overlay-layer {
    position: absolute;
    pointer-events: none;
    transform-origin: center;
    will-change: transform;
    backface-visibility: hidden;
}

.v2-effect-layer {
    inset: 0;
    will-change: transform;
}

.v2-scene-layer {
    inset: 0;
}

.v2-scene-layer model-viewer {
    width: 100%;
    height: 100%;
    display: block;
}

.v2-png-layer {
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: max-content;
    will-change: transform;
    backface-visibility: hidden;
}

.v2-profile-effect-media {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: normal;
    background: transparent !important;
    display: block;
    transform-origin: center;
}

/* Light Mode Contrast Overrides */
.v2-dynamic-profile-container.is-light-mode .profile-popover-name,
.v2-dynamic-profile-container.is-light-mode .v2-profile-bio,
.v2-dynamic-profile-container.is-light-mode .v2-live-activity-title,
.v2-dynamic-profile-container.is-light-mode .v2-gallery-item-label,
.profile-preview-shell.is-light-mode .text-2xl,
.profile-preview-shell.is-light-mode .text-xl,
.profile-preview-shell.is-light-mode .profile-bio {
    color: rgba(0, 0, 0, 0.9) !important;
}

.v2-dynamic-profile-container.is-light-mode .profile-popover-username,
.v2-dynamic-profile-container.is-light-mode .v2-live-activity-subtitle,
.v2-dynamic-profile-container.is-light-mode .v2-card-kicker,
.v2-dynamic-profile-container.is-light-mode .profile-popover-presence,
.v2-dynamic-profile-container.is-light-mode .profile-popover-joined,
.profile-preview-shell.is-light-mode .opacity-70,
.profile-preview-shell.is-light-mode .text-inherit\/60 {
    color: rgba(0, 0, 0, 0.5) !important;
}

.v2-dynamic-profile-container.is-light-mode .v2-bio-link-bar {
    color: rgba(0, 0, 0, 0.7) !important;
    background: rgba(0, 0, 0, 0.05);
}

.v2-dynamic-profile-container.is-light-mode .v2-gallery-card,
.v2-dynamic-profile-container.is-light-mode .v2-live-activity {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.v2-dynamic-profile-container.is-light-mode .v2-avatar-frame {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}


.v2-png-layer img {
    position: relative;
    display: block;
    max-width: none;
    width: auto;
    height: auto;
    background: transparent;
    max-width: min(60vw, 420px);
    max-height: min(60vh, 420px);
    pointer-events: none;
    backface-visibility: hidden;
}

.v2-dynamic-profile-container::before {
    content: '';
    position: absolute;
    top: -38%;
    left: -18%;
    right: -18%;
    bottom: -18%;
    pointer-events: none;
    z-index: -10;
}

.v2-profile-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(calc(var(--v2-avatar-size) + 20px), calc(var(--v2-avatar-size) + 44px)) minmax(0, 1fr);
    gap: calc(1rem * var(--v2-card-height-scale));
    padding: 0 1rem calc(1rem * var(--v2-card-height-scale));
    margin-top: calc(-2rem * var(--v2-card-height-scale));
    z-index: 3;
    align-items: start;
}

.v2-side-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.v2-side-stack {
    width: 100%;
    display: grid;
    gap: 0.55rem;
}

.v2-side-thumbnail-card {
    position: relative;
    width: 100%;
    aspect-ratio: 0.9;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.v2-side-thumbnail-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
    pointer-events: none;
}

.v2-side-thumbnail,
.v2-side-helper-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    display: block;
}

.v2-side-helper-thumb {
    width: var(--v2-side-helper-size);
    height: var(--v2-side-helper-size);
    margin-left: auto;
    border-radius: 0.95rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.v2-content-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(0.8rem * var(--v2-card-height-scale));
    padding-top: calc(2.35rem * var(--v2-card-height-scale));
}

.v2-header-block {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.v2-name-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.v2-bio-link-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.26rem 0.62rem;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.88);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}

.v2-bio-link-bar:hover,
.v2-bio-link-bar:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.42);
    color: var(--v2-theme-accent, #2563eb);
    outline: none;
}

.v2-avatar-frame {
    width: var(--v2-avatar-size);
    height: var(--v2-avatar-size);
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 22px rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.v2-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-profile-bio {
    font-size: 12.5px;
    line-height: 1.58;
    color: rgba(244, 247, 251, 0.76);
    word-break: break-word;
}

.v2-profile-addons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: flex-start;
}

.v2-profile-addons .profile-popover-actions {
    margin-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.v2-profile-addons .profile-popover-status {
    flex-basis: 100%;
}

.v2-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.v2-gallery-card,
.v2-live-activity {
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0.85rem;
    min-width: 0;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.v2-gallery-card {
    background: transparent;
    border: none;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.v2-card-kicker {
    margin-bottom: 0.65rem;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    font-weight: 700;
}

.v2-gallery-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 0.55rem;
}

.v2-gallery-item {
    display: grid;
    gap: 0.42rem;
    position: relative;
    min-height: 0;
    border-radius: 1rem;
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    transition: none;
    border: none;
    text-decoration: none;
    color: inherit;
    padding: 0.34rem;
    box-shadow: inset 0 0 0 1px transparent;
}

.v2-gallery-item:hover,
.v2-gallery-item:focus-visible {
    transform: none;
    background: var(--v2-theme-accent-soft, rgba(255, 255, 255, 0.16));
    box-shadow: inset 0 0 0 1px var(--v2-theme-accent-strong, rgba(255, 255, 255, 0.26));
    outline: none;
}

.v2-gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1.04;
    object-fit: cover;
    display: block;
    border-radius: 0.76rem;
}

.v2-gallery-item-label {
    position: static;
    padding: 0 0.06rem 0.02rem;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    background: transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.35;
}

.v2-live-activity-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
}

.v2-live-activity-row img,
.v2-live-activity-art {
    width: 52px;
    height: 52px;
    border-radius: 0.9rem;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
}

.v2-live-activity-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-live-activity-subtitle {
    margin-top: 0.18rem;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.56);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 680px) {
    .v2-profile-body {
        grid-template-columns: 1fr;
        padding: 0 0.85rem 0.85rem;
        margin-top: -1.4rem;
        gap: 0.85rem;
    }

    .v2-side-rail {
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .v2-avatar-frame {
        width: 82px;
        height: 82px;
    }

    .v2-side-stack {
        width: min(148px, 42vw);
    }

    .v2-content-column {
        padding-top: 0.2rem;
    }

    .v2-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- /chat renovation overrides ---- */
#left-sidebar-toggle {
    display: none !important;
    transition: none !important;
}

#left-sidebar-backdrop {
    display: none;
}

#channels-shell {
    display: grid !important;
    grid-template-columns: minmax(300px, 336px) minmax(0, 1fr) minmax(280px, 336px);
    min-height: 0;
}

#channels-shell.is-right-collapsed {
    grid-template-columns: minmax(300px, 336px) minmax(0, 1fr) !important;
}

#channel-sidebar,
.channels-center-shell,
.channels-right-sidebar {
    min-width: 0;
    min-height: 0;
}

#channel-sidebar,
#channel-sidebar .channels-sidebar-shell,
#channel-sidebar .channels-panel,
#channel-sidebar .channels-browser-panel,
#channel-sidebar .channels-self-panel,
#joined-channel-list,
#channel-sidebar .sidebar-mode-switch {
    border: none !important;
    box-shadow: none !important;
}

#channel-sidebar .channels-sidebar-shell,
#channel-sidebar .channels-panel,
#channel-sidebar .channels-browser-panel,
#channel-sidebar .channels-self-panel,
#joined-channel-list,
#channel-sidebar .sidebar-mode-switch {
    background: transparent !important;
}

#joined-channel-list {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.1rem;
}

.sidebar-mode-btn,
.channels-add-btn,
.channels-add-select,
.channels-nav-btn,
#right-sidebar-toggle,
#left-sidebar-toggle,
.channels-context-bar,
#channels-quick-actions button,
.channels-quick-action-btn,
.channels-favorite-btn,
.composer-bubble,
.composer-attach-button,
.send-button,
.new-messages-indicator,
.channels-notification-read,
.reply-composer-state,
.mention-suggestion-box,
.message-action-btn,
.channels-conversation-card,
.channels-conversation-button,
.channels-self-card-pill {
    transition: none !important;
    animation: none !important;
}

.sidebar-mode-btn:hover,
.channels-add-btn:hover,
.channels-add-select:hover,
.channels-nav-btn:hover,
#right-sidebar-toggle:hover,
#left-sidebar-toggle:hover,
#channels-quick-actions button:hover,
.channels-quick-action-btn:hover,
.channels-favorite-btn:hover,
.composer-attach-button:hover,
.send-button:hover,
.new-messages-indicator:hover,
.message-action-btn:hover,
.channels-conversation-card:hover,
.channels-conversation-button:hover,
.channels-self-card-pill:hover {
    transform: none !important;
}

.sidebar-mode-btn,
.channels-add-btn,
.channels-add-select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.58) !important;
    filter: none !important;
}

.sidebar-mode-btn.is-active,
.sidebar-mode-btn:hover,
.channels-add-btn:hover,
.channels-add-select:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.96) !important;
}

.channels-conversation-card {
    min-height: 56px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 1.2rem !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.channels-conversation-card::before,
.channels-conversation-card::after,
.channels-self-card-pill::before,
.channels-self-card-pill::after {
    display: none !important;
}

.channels-conversation-card:not(.is-active):hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.channels-conversation-card.is-active {
    background: linear-gradient(135deg, var(--conversation-start, #404858), var(--conversation-end, #222a38)) !important;
}

.channels-conversation-card.is-light-surface.is-active {
    box-shadow: none !important;
}

.channels-conversation-button {
    min-height: 56px !important;
    padding: 0.8rem 0.95rem !important;
    gap: 0.8rem !important;
    border-radius: 1.2rem !important;
    background: transparent !important;
    align-items: center !important;
}

.channels-conversation-avatar {
    width: 2.35rem !important;
    height: 2.35rem !important;
}

.channels-conversation-meta {
    min-width: 0;
    overflow: visible !important;
    display: grid;
    gap: 0.18rem;
}

.channels-conversation-title-row,
.channels-conversation-meta-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.channels-conversation-title {
    min-width: 0;
    font-size: 0.96rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channels-conversation-secondary {
    min-width: 0;
    font-size: 0.74rem !important;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.56) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channels-conversation-meta-line {
    min-height: 0.82rem;
    font-size: 0.64rem !important;
    color: rgba(255, 255, 255, 0.42) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.channels-conversation-meta-line.is-empty {
    opacity: 0.76;
}

.channels-conversation-unread {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    color: rgba(255, 255, 255, 0.92) !important;
}

.channels-unread-dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #facc15;
    flex-shrink: 0;
}

.channels-conversation-meta-note,
.conversation-kind-chip {
    color: inherit !important;
}

.channels-conversation-card.is-unread .channels-conversation-title {
    font-weight: 800 !important;
}

.channels-conversation-card.is-unread .channels-conversation-secondary {
    color: rgba(255, 255, 255, 0.78) !important;
}

.channels-conversation-card.is-active .channels-conversation-secondary,
.channels-conversation-card.is-active .channels-conversation-meta-line {
    color: rgba(255, 255, 255, 0.84) !important;
}

.channels-conversation-card.is-light-surface.is-active .channels-conversation-title,
.channels-conversation-card.is-light-surface.is-active .channels-conversation-secondary,
.channels-conversation-card.is-light-surface.is-active .channels-conversation-meta-line {
    color: rgba(11, 16, 24, 0.92) !important;
}

.channels-favorite-btn {
    top: 0.62rem !important;
    right: 0.62rem !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.18) !important;
    box-shadow: none !important;
}

.channels-self-card,
.channels-self-card-pill {
    overflow: visible !important;
}

.channels-self-card-pill {
    min-height: 56px !important;
    padding: 0.7rem 0.9rem !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.channels-self-card-pill:hover,
.channels-self-card-pill:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none;
}

.channels-self-name {
    color: #ffffff !important;
}

.channels-self-activity {
    color: rgba(255, 255, 255, 0.54) !important;
}

.message-shell-mentioned::before {
    inset: -0.28rem -0.8rem !important;
    border-radius: 0.95rem !important;
    background: rgba(250, 204, 21, 0.2) !important;
    border: none !important;
    box-shadow: none !important;
}

.message-bubble-mentioned,
.message-plain-mentioned {
    border-left: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

.reply-composer-state,
.message-reply-preview {
    border-top-left-radius: 0.3rem !important;
    border-bottom-left-radius: 0.3rem !important;
    border-top-right-radius: 1.15rem !important;
    border-bottom-right-radius: 1.15rem !important;
}

.composer-bubble {
    border: none !important;
    border-radius: 999px !important;
    background: rgba(7, 10, 15, 0.94) !important;
    box-shadow: none !important;
}

.chat-input.composer-textarea {
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
}

.send-button,
.composer-attach-button {
    border: none !important;
    box-shadow: none !important;
}

.message-time-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 9px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3) !important;
    opacity: 0.7;
}

@media (max-width: 1260px) {
    #channels-shell {
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(250px, 300px);
    }
}

@media (max-width: 1060px) {
    #channels-shell {
        grid-template-columns: minmax(260px, 296px) minmax(0, 1fr) minmax(220px, 264px);
    }
}

@media (max-width: 860px) {
    #left-sidebar-toggle {
        display: inline-flex !important;
    }

    #channels-shell,
    #channels-shell.is-right-collapsed {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .channels-right-sidebar {
        display: none !important;
    }

    #channel-sidebar {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .channels-shell.is-left-open #channel-sidebar {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    #left-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgba(3, 5, 10, 0.62);
    }

    #left-sidebar-backdrop.hidden {
        display: none;
    }
}

.dock-tooltip {
    transition: none !important;
}

/* ---- /chat final refinement pass ---- */
body[data-page="channels"] .channels-center-shell {
    position: relative !important;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(64, 68, 76, 0.18), rgba(23, 27, 33, 0.4)),
        radial-gradient(1100px 700px at 12% -14%, rgba(255, 255, 255, 0.08), transparent 60%) !important;
}

body[data-page="channels"] .chat-stage {
    background:
        linear-gradient(180deg, rgba(79, 84, 92, 0.14), rgba(26, 30, 36, 0.4)),
        rgba(35, 39, 45, 0.48) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body[data-page="channels"] .chat-background-overlay {
    opacity: 0.18 !important;
    transition: none !important;
}

body[data-page="channels"] .channels-context-bar {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(24px) saturate(160%) brightness(1.06) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(1.06) !important;
}

body[data-page="channels"] .channels-context-bar:hover {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

#channel-sidebar .channels-nav-grid,
#channel-sidebar #channels-quick-actions {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}

#channel-sidebar .channels-nav-grid {
    gap: 0.48rem !important;
    margin-bottom: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

#channel-sidebar .channels-nav-btn {
    width: 2.55rem !important;
    height: 2.55rem !important;
    flex: 0 0 2.55rem !important;
}

#channels-quick-actions {
    gap: 0.45rem !important;
    justify-content: flex-start !important;
}

#channels-quick-actions button {
    min-height: 2.25rem !important;
    padding: 0 0.85rem !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.1em !important;
}

.channels-self-card {
    width: 100%;
}

.channels-self-card-pill {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.6rem !important;
    justify-content: flex-start !important;
    text-align: left !important;
    min-height: 48px !important;
    padding: 0.56rem 0.82rem !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
        linear-gradient(135deg, var(--self-card-start, #54617e), var(--self-card-end, #202a3f)) !important;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18) !important;
}

.channels-self-card-pill:hover,
.channels-self-card-pill:focus-visible {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        linear-gradient(135deg, var(--self-card-start, #54617e), var(--self-card-end, #202a3f)) !important;
}

.channels-self-copy {
    align-items: flex-start !important;
    min-width: 0;
}

.channels-self-name {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
}

.channels-self-activity {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.68rem !important;
    color: rgba(255, 255, 255, 0.68) !important;
}

body[data-page="channels"] .channels-right-sidebar,
body[data-page="channels"] .channels-right-sidebar .channels-panel,
body[data-page="channels"] #room-member-panel {
    border: none !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-right-sidebar {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}

body[data-page="channels"] .channels-member-search-panel,
body[data-page="channels"] #room-member-panel {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 1.35rem !important;
}

#room-member-list {
    gap: 0.6rem !important;
}

.channels-member-card {
    min-height: 92px !important;
    max-height: 92px !important;
    border: none !important;
    border-radius: 1.3rem !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        linear-gradient(135deg, var(--member-start, #4c5568), var(--member-end, #242a34)) !important;
    box-shadow: none !important;
    filter: none !important;
}

.channels-member-card.is-active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        linear-gradient(135deg, var(--member-start, #52607c), var(--member-end, #283142)) !important;
}

.channels-member-card-body {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 0.75rem !important;
    align-items: center !important;
    padding: 0.85rem 0.95rem !important;
}

.channels-member-avatar {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.channels-member-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.16rem;
}

.channels-member-top-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.channels-member-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.96rem !important;
    color: #ffffff !important;
}

.channels-member-handle {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channels-member-status {
    margin-top: 0.08rem !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    white-space: normal !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.channels-member-meta {
    margin-top: 0.28rem !important;
    gap: 0.28rem !important;
}

.channels-member-chip {
    min-height: 1rem !important;
    padding: 0.14rem 0.42rem !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.09) !important;
    font-size: 0.52rem !important;
    letter-spacing: 0.08em !important;
}

.channels-member-menu-btn {
    margin-left: auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.82);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

body[data-page="channels"] #chat-banner {
    position: absolute !important;
    top: 1rem;
    left: 1.1rem;
    right: 1.1rem;
    z-index: 6;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

body[data-page="channels"] #presence-strip {
    position: absolute !important;
    top: 4.2rem;
    left: 1.1rem;
    right: 1.1rem;
    z-index: 5;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

body[data-page="channels"] .presence-pill {
    pointer-events: auto;
    border: none !important;
    background: rgba(255, 255, 255, 0.11) !important;
    color: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

body[data-page="channels"] #chat-messages {
    padding: 6.2rem 1.45rem 8.6rem !important;
    scroll-padding-bottom: 7.75rem;
    overflow-x: hidden !important;
}

body[data-page="channels"] #chat-messages::after {
    content: '';
    display: block;
    height: 1.25rem;
    flex: 0 0 1.25rem;
}

body[data-page="channels"] #typing-row {
    position: absolute !important;
    left: 1rem;
    right: 1rem;
    bottom: 5.4rem;
    z-index: 5;
    padding: 0 !important;
    pointer-events: none;
}

body[data-page="channels"] .typing-chip {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
}

body[data-page="channels"] #new-messages-indicator {
    bottom: 6rem !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

body[data-page="channels"] .composer-shell {
    position: absolute !important;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 7;
    padding: 0.75rem 0.8rem 0.8rem !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 1.75rem !important;
    background: rgba(255, 255, 255, 0.11) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(26px) saturate(160%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%) brightness(1.05) !important;
}

body[data-page="channels"] .composer-bubble {
    min-height: 50px !important;
    padding: 0.45rem 0.55rem 0.45rem 0.7rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body[data-page="channels"] .chat-input.composer-textarea {
    min-height: 40px !important;
    max-height: 140px !important;
    padding: 0.55rem 0.9rem !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
}

body[data-page="channels"] .composer-attach-button {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

body[data-page="channels"] .send-button {
    width: 42px !important;
    height: 42px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow: none !important;
}

body[data-page="channels"] .reply-composer-state {
    margin: 0 0 0.45rem 0 !important;
    padding: 0.75rem 0.9rem !important;
    border: none !important;
    border-radius: 1.05rem !important;
    background: rgba(255, 244, 210, 0.1) !important;
    box-shadow: none !important;
}

body[data-page="channels"] .reply-composer-copy {
    font-family: Arial, Helvetica, sans-serif !important;
}

body[data-page="channels"] .message-shell-mentioned::before {
    inset: -0.22rem -0.65rem !important;
    border-radius: 0.95rem !important;
    background: rgba(250, 204, 21, 0.08) !important;
}

body[data-page="channels"] .message-bubble-mentioned,
body[data-page="channels"] .message-plain-mentioned {
    background-image: none !important;
    box-shadow: none !important;
}

body[data-page="channels"] .message-reply-preview {
    padding: 0.58rem 0.72rem !important;
    border: none !important;
    border-left: 2px solid rgba(255, 202, 82, 0.52) !important;
    border-radius: 0.95rem !important;
    background: rgba(255, 233, 177, 0.1) !important;
}

body[data-page="channels"] .message-reply-preview:hover {
    background: rgba(255, 233, 177, 0.14) !important;
}

body[data-page="channels"] .message-reply-preview.is-targeted {
    background: rgba(255, 221, 133, 0.14) !important;
    border-left-color: rgba(255, 208, 86, 0.62) !important;
}

body[data-page="channels"] .message-reply-author {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.82rem !important;
}

body[data-page="channels"] .message-reply-text {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.66) !important;
}

body[data-page="channels"] #chat-messages .avatar-pill {
    width: 2.7rem !important;
    height: 2.7rem !important;
    flex: 0 0 2.7rem !important;
}

body[data-page="channels"] .message-meta-side {
    gap: 0.9rem !important;
    align-items: flex-start !important;
}

body[data-page="channels"] .message-meta-side-copy {
    gap: 0.12rem !important;
}

body[data-page="channels"] .message-meta-side-copy>span:first-child,
body[data-page="channels"] [data-group-meta]>span:nth-child(2) {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.92rem !important;
    line-height: 1.1 !important;
}

body[data-page="channels"] [data-group-meta] {
    gap: 0.55rem !important;
}

body[data-page="channels"] .message-text,
body[data-page="channels"] .message-bubble,
body[data-page="channels"] .message-plain,
body[data-page="channels"] .message-meta-inline-row,
body[data-page="channels"] .message-time-label,
body[data-page="channels"] .chat-day-separator,
body[data-page="channels"] .typing-chip,
body[data-page="channels"] .presence-pill,
body[data-page="channels"] #chat-banner,
body[data-page="channels"] #composer-feedback {
    font-family: Arial, Helvetica, sans-serif !important;
}

body[data-page="channels"] .message-time-label {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, 0.34) !important;
    opacity: 0.7 !important;
}

body[data-page="channels"] .message-text {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body[data-page="channels"] .message-bubble-pending {
    opacity: 1 !important;
    border-style: solid !important;
}

body[data-page="channels"] .message-bubble-pending .message-text,
body[data-page="channels"] .message-bubble-pending .message-time-label {
    color: rgba(196, 204, 214, 0.58) !important;
}

body[data-page="channels"] .message-mention {
    font-family: 'Quicksand', sans-serif !important;
}

body[data-page="channels"] .chat-day-separator {
    width: 100% !important;
    margin: 1.1rem 0 0.8rem !important;
    color: rgba(255, 255, 255, 0.42) !important;
}

body[data-page="channels"] .chat-day-separator::before,
body[data-page="channels"] .chat-day-separator::after {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

body[data-page="channels"] .message-bubble,
body[data-page="channels"] .message-plain,
body[data-page="channels"] .channels-member-card,
body[data-page="channels"] .typing-dots span,
body[data-page="channels"] .status-dot,
body[data-page="channels"] .soft-orb {
    transition: none !important;
    animation: none !important;
}

body[data-page="channels"] .message-bubble:hover,
body[data-page="channels"] .channels-member-card:hover,
body[data-page="channels"] .message-plain:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.v2-effect-layer,
.v2-overlay-layer,
.v2-profile-effect-media,
.profile-side-media-art,
.profile-side-media-art video {
    background: transparent !important;
}

.profile-side-media-art {
    box-shadow: none !important;
}

/* Chat stabilization pass */
body[data-page="channels"] .channels-context-bar {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(52, 56, 63, 0.42) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(30px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(170%) !important;
}

body[data-page="channels"] .channels-context-meta {
    padding-right: 0 !important;
    margin-right: 0 !important;
    border-right: none !important;
}

body[data-page="channels"] .dock-action-btn {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    transition: none !important;
    transform: none !important;
}

body[data-page="channels"] .dock-action-btn:hover,
body[data-page="channels"] .dock-action-btn:focus-visible {
    background: rgba(255, 255, 255, 0.09) !important;
    transform: none !important;
}

body[data-page="channels"] .dock-tooltip {
    transition: none !important;
}

body[data-page="channels"] .channels-conversation-card {
    min-height: 50px !important;
    border-radius: 1.05rem !important;
}

body[data-page="channels"] .channels-conversation-button {
    min-height: 50px !important;
    padding: 0.64rem 0.88rem !important;
    gap: 0.7rem !important;
    border-radius: 1.05rem !important;
}

body[data-page="channels"] .channels-conversation-avatar {
    width: 2.18rem !important;
    height: 2.18rem !important;
}

body[data-page="channels"] .channels-conversation-title {
    font-size: 0.9rem !important;
}

body[data-page="channels"] .channels-conversation-secondary {
    font-size: 0.7rem !important;
}

body[data-page="channels"] .channels-conversation-meta-line {
    font-size: 0.58rem !important;
}

body[data-page="channels"] .channels-self-panel,
body[data-page="channels"] #channels-self-card,
body[data-page="channels"] .channels-self-card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-self-card-pill {
    min-height: 44px !important;
    padding: 0.5rem 0.78rem !important;
    border: none !important;
    box-shadow: none !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)),
        linear-gradient(135deg, var(--self-card-start, #54617e), var(--self-card-end, #202a3f)) !important;
}

body[data-page="channels"] .channels-self-card-pill:hover,
body[data-page="channels"] .channels-self-card-pill:focus-visible {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        linear-gradient(135deg, var(--self-card-start, #54617e), var(--self-card-end, #202a3f)) !important;
}

body[data-page="channels"] .channels-member-search-panel,
body[data-page="channels"] #room-member-panel,
body[data-page="channels"] .channels-right-sidebar {
    border: none !important;
    box-shadow: none !important;
}

body[data-page="channels"] #room-member-list {
    gap: 0.5rem !important;
}

body[data-page="channels"] .channels-member-card {
    position: relative !important;
    min-height: 84px !important;
    max-height: 84px !important;
    border: none !important;
    border-radius: 1.15rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-member-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

body[data-page="channels"] .channels-member-card.is-active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        linear-gradient(135deg, var(--member-start, #4c5568), var(--member-end, #242a34)) !important;
}

body[data-page="channels"] .channels-member-card-body {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 0.68rem !important;
    padding: 0.7rem 0.82rem !important;
    align-items: center !important;
}

body[data-page="channels"] .channels-member-avatar {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    border: none !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-member-copy {
    position: relative !important;
    gap: 0.1rem !important;
    padding-right: 0.1rem !important;
}

body[data-page="channels"] .channels-member-top-row {
    position: relative !important;
    gap: 0.28rem !important;
    padding-right: 1.55rem !important;
    flex-wrap: nowrap !important;
}

body[data-page="channels"] .channels-member-name {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.84rem !important;
    line-height: 1.1 !important;
}

body[data-page="channels"] .channels-member-handle {
    font-size: 0.61rem !important;
}

body[data-page="channels"] .channels-member-status {
    margin-top: 0.02rem !important;
    font-size: 0.67rem !important;
    line-height: 1.28 !important;
    color: rgba(255, 255, 255, 0.64) !important;
}

body[data-page="channels"] .channels-member-meta {
    margin-top: 0.18rem !important;
    gap: 0.22rem !important;
}

body[data-page="channels"] .channels-member-chip {
    min-height: 0.92rem !important;
    padding: 0.12rem 0.34rem !important;
    font-size: 0.47rem !important;
    letter-spacing: 0.08em !important;
}

body[data-page="channels"] .channels-member-menu-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 1.24rem !important;
    height: 1.24rem !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

body[data-page="channels"] .chat-stage {
    background: linear-gradient(180deg, rgba(60, 64, 70, 0.34), rgba(34, 37, 43, 0.48)) !important;
}

body[data-page="channels"] #chat-messages {
    padding: 6rem 1.35rem 7rem !important;
    scroll-padding-bottom: 6.4rem !important;
}

body[data-page="channels"] #chat-messages::after {
    height: 1.55rem !important;
    flex-basis: 1.55rem !important;
}

body[data-page="channels"] #typing-row {
    bottom: 4.7rem !important;
}

body[data-page="channels"] .composer-shell {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: 0.75rem !important;
    padding: 0.16rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-page="channels"] .composer-bubble {
    min-height: 44px !important;
    gap: 0.48rem !important;
    padding: 0.34rem 0.4rem 0.34rem 0.48rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;
    background: rgba(31, 34, 40, 0.78) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26) !important;
    backdrop-filter: blur(28px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
}

body[data-page="channels"] .chat-input.composer-textarea,
body[data-page="channels"] #message-input {
    min-height: 34px !important;
    max-height: 110px !important;
    padding: 0.42rem 0.72rem !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
}

body[data-page="channels"] .composer-attach-button,
body[data-page="channels"] .send-button {
    width: 34px !important;
    height: 34px !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

body[data-page="channels"] .reply-composer-state {
    margin: 0 0 0.35rem 0 !important;
    padding: 0.58rem 0.76rem !important;
    border-radius: 0.96rem !important;
    background: rgba(255, 231, 167, 0.08) !important;
}

body[data-page="channels"] .message-shell-mentioned::before {
    background: rgba(250, 204, 21, 0.05) !important;
}

body[data-page="channels"] .message-reply-preview {
    padding: 0.52rem 0.68rem !important;
    border-left: 1px solid rgba(246, 205, 101, 0.36) !important;
    border-radius: 0.95rem !important;
    background: rgba(246, 205, 101, 0.06) !important;
}

body[data-page="channels"] .message-reply-preview:hover {
    background: rgba(246, 205, 101, 0.08) !important;
}

body[data-page="channels"] .message-reply-preview.is-targeted {
    background: rgba(246, 205, 101, 0.1) !important;
    border-left-color: rgba(246, 205, 101, 0.42) !important;
}

body[data-page="channels"] #chat-messages .avatar-pill {
    width: 2.22rem !important;
    height: 2.22rem !important;
    flex: 0 0 2.22rem !important;
}

body[data-page="channels"] .message-meta-side {
    gap: 0.7rem !important;
}

body[data-page="channels"] .message-meta-side-copy {
    gap: 0.08rem !important;
}

body[data-page="channels"] .message-meta-side-copy>span:first-child,
body[data-page="channels"] .message-meta-side-copy>span:first-child *,
body[data-page="channels"] [data-group-meta]>span:nth-child(2),
body[data-page="channels"] [data-group-meta]>span:nth-child(2) * {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
}

body[data-page="channels"] .message-text,
body[data-page="channels"] .message-bubble,
body[data-page="channels"] .message-plain,
body[data-page="channels"] .message-meta-inline-row,
body[data-page="channels"] .message-time-label,
body[data-page="channels"] .chat-day-separator,
body[data-page="channels"] .typing-chip,
body[data-page="channels"] .presence-pill,
body[data-page="channels"] #chat-banner,
body[data-page="channels"] #composer-feedback {
    font-family: Arial, Helvetica, sans-serif !important;
}

body[data-page="channels"] .message-time-label {
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    opacity: 0.68 !important;
}

body[data-page="channels"] .v2-overlay-host,
body[data-page="channels"] .v2-overlay-layer,
body[data-page="channels"] .v2-effect-layer,
body[data-page="channels"] .v2-profile-effect-media,
body[data-page="channels"] .v2-profile-surface,
body[data-page="channels"] .profile-side-media-art,
body[data-page="channels"] .profile-side-media-art video {
    background-color: transparent !important;
}

body[data-page="channels"] .v2-profile-surface {
    isolation: isolate !important;
}

.v2-overlay-host,
.v2-overlay-layer,
.v2-effect-layer,
.v2-profile-effect-media,
.v2-profile-surface,
.profile-side-media-art,
.profile-side-media-art video {
    background-color: transparent !important;
}

.v2-profile-surface {
    isolation: isolate !important;
}

body[data-page="channels"] .ambient-shell::before,
body[data-page="channels"] .ambient-shell::after {
    animation: none !important;
}

body[data-page="channels"] .composer-shell.is-hidden {
    display: none !important;
}

body[data-page="channels"] .channels-context-bar {
    background: rgba(31, 34, 39, 0.64) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: blur(28px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
    transition: none !important;
}

body[data-page="channels"] .dock-action-btn,
body[data-page="channels"] .dock-tooltip,
body[data-page="channels"] .channels-nav-btn,
body[data-page="channels"] #new-messages-indicator,
body[data-page="channels"] .typing-chip {
    transition: none !important;
}

body[data-page="channels"] .dock-action-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}

body[data-page="channels"] #channels-quick-actions {
    gap: 0.4rem !important;
}

body[data-page="channels"] .sidebar-mode-switch {
    gap: 0.26rem !important;
}

body[data-page="channels"] .channels-conversation-card {
    min-height: 0 !important;
    border-radius: 1rem !important;
}

body[data-page="channels"] .channels-conversation-button {
    min-height: 50px !important;
    padding: 0.58rem 0.72rem !important;
    gap: 0.68rem !important;
}

body[data-page="channels"] .channels-conversation-title,
body[data-page="channels"] .channels-conversation-secondary,
body[data-page="channels"] .channels-conversation-meta-line,
body[data-page="channels"] .channels-member-handle,
body[data-page="channels"] .channels-member-status,
body[data-page="channels"] .channels-member-chip,
body[data-page="channels"] .channels-self-activity,
body[data-page="channels"] .message-text,
body[data-page="channels"] .message-bubble,
body[data-page="channels"] .message-plain,
body[data-page="channels"] .message-meta-inline-row,
body[data-page="channels"] .message-time-label,
body[data-page="channels"] .chat-day-separator,
body[data-page="channels"] #composer-feedback,
body[data-page="channels"] .reply-composer-preview,
body[data-page="channels"] .reply-composer-author {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
}

body[data-page="channels"] .channels-self-name {
    font-family: "Quicksand", "Trebuchet MS", sans-serif !important;
    font-size: 0.86rem !important;
    text-align: left !important;
}

body[data-page="channels"] .channels-self-card,
body[data-page="channels"] #channels-self-card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-self-card-pill {
    width: 100% !important;
    min-height: 52px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0.68rem !important;
    padding: 0.5rem 0.78rem !important;
    border: none !important;
    box-shadow: none !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--self-card-start, #4f5d89) 74%, rgba(255, 255, 255, 0.1)), color-mix(in srgb, var(--self-card-end, #1e2940) 86%, rgba(255, 255, 255, 0.04))) !important;
}

body[data-page="channels"] .channels-self-card-pill::before,
body[data-page="channels"] .channels-self-card-pill::after {
    display: none !important;
}

body[data-page="channels"] .channels-self-copy {
    min-width: 0 !important;
    align-items: flex-start !important;
}

body[data-page="channels"] .channels-self-activity {
    text-align: left !important;
}

body[data-page="channels"] .channels-member-card {
    min-height: 84px !important;
    max-height: 84px !important;
    border: none !important;
    border-radius: 1.08rem !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        linear-gradient(135deg, color-mix(in srgb, var(--member-start, #445066) 86%, rgba(255, 255, 255, 0.08)), color-mix(in srgb, var(--member-end, #1b212c) 88%, rgba(0, 0, 0, 0.12))) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body[data-page="channels"] .channels-member-card:hover,
body[data-page="channels"] .channels-member-card.is-active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        linear-gradient(135deg, color-mix(in srgb, var(--member-start, #445066) 92%, rgba(255, 255, 255, 0.1)), color-mix(in srgb, var(--member-end, #1b212c) 92%, rgba(0, 0, 0, 0.08))) !important;
}

body[data-page="channels"] .channels-member-card-body {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 0.66rem !important;
    padding: 0.7rem 0.78rem !important;
    align-items: center !important;
}

body[data-page="channels"] .channels-member-avatar {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
}

body[data-page="channels"] .channels-member-copy {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    gap: 0.18rem !important;
}

body[data-page="channels"] .channels-member-top-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.3rem !important;
    padding-right: 0 !important;
}

body[data-page="channels"] .channels-member-name {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 1.14 !important;
    min-width: 0 !important;
}

body[data-page="channels"] .channels-member-menu-btn {
    position: static !important;
    margin-left: auto !important;
    width: 1.3rem !important;
    height: 1.3rem !important;
    flex: 0 0 1.3rem !important;
}

body[data-page="channels"] .channels-member-status {
    font-size: 0.64rem !important;
    line-height: 1.26 !important;
}

body[data-page="channels"] .channels-member-meta {
    gap: 0.18rem !important;
}

body[data-page="channels"] .chat-stage {
    background: linear-gradient(180deg, rgba(46, 49, 55, 0.74), rgba(17, 19, 23, 0.9)) !important;
}

body[data-page="channels"] #chat-messages {
    padding: 6rem 1.25rem 7.25rem !important;
    scroll-padding-bottom: 6.6rem !important;
}

body[data-page="channels"] #chat-messages .avatar-pill {
    width: 1.92rem !important;
    height: 1.92rem !important;
    flex: 0 0 1.92rem !important;
}

body[data-page="channels"] .message-meta-side {
    gap: 0.64rem !important;
}

body[data-page="channels"] .message-meta-side-copy>span:first-child,
body[data-page="channels"] .message-meta-side-copy>span:first-child *,
body[data-page="channels"] [data-group-meta]>span:nth-child(2),
body[data-page="channels"] [data-group-meta]>span:nth-child(2) * {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
}

body[data-page="channels"] .message-author-button {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
}

body[data-page="channels"] .message-author-button:hover,
body[data-page="channels"] .message-author-button:focus-visible {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.12em !important;
    outline: none !important;
}

body[data-page="channels"] .cf-role-tag {
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
}

body[data-page="channels"] .message-time-label {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.28) !important;
    opacity: 0.62 !important;
}

body[data-page="channels"] .chat-day-separator {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.7rem !important;
    width: 100% !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

body[data-page="channels"] .chat-day-separator::before,
body[data-page="channels"] .chat-day-separator::after {
    width: 100% !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border-radius: 999px !important;
}

body[data-page="channels"] .composer-shell {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0.8rem 1rem 1rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-page="channels"] .composer-bubble {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 0.5rem !important;
    min-height: 42px !important;
    padding: 0.34rem 0.42rem 0.34rem 0.46rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 999px !important;
    background: rgba(19, 21, 25, 0.72) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(30px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
}

body[data-page="channels"] .composer-attach-button,
body[data-page="channels"] .send-button {
    align-self: end !important;
    justify-self: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

body[data-page="channels"] .chat-input.composer-textarea,
body[data-page="channels"] #message-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    max-height: 108px !important;
    padding: 0.46rem 0.34rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
    resize: none !important;
}

body[data-page="channels"] .chat-input.composer-textarea::placeholder,
body[data-page="channels"] #message-input::placeholder {
    color: rgba(255, 255, 255, 0.42) !important;
}

body[data-page="channels"] .reply-composer-state {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 0 0.38rem 0 !important;
    padding: 0.54rem 0.72rem !important;
    border: none !important;
    border-radius: 0.9rem !important;
    background: rgba(245, 206, 92, 0.08) !important;
}

body[data-page="channels"] .message-shell-mentioned::before {
    background: rgba(245, 206, 92, 0.08) !important;
}

body[data-page="channels"] .message-reply-preview {
    padding: 0.54rem 0.7rem !important;
    border-left: none !important;
    border-radius: 0.92rem !important;
    background: rgba(245, 206, 92, 0.08) !important;
}

body[data-page="channels"] .message-reply-preview:hover,
body[data-page="channels"] .message-reply-preview.is-targeted {
    background: rgba(245, 206, 92, 0.12) !important;
}

body[data-page="channels"] .message-mention {
    font-family: "Quicksand", "Trebuchet MS", sans-serif !important;
}

body[data-page="channels"] .v2-dynamic-profile-container .profile-popover-name {
    font-family: "Quicksand", "Trebuchet MS", sans-serif !important;
    font-weight: 700 !important;
}

body[data-page="channels"] .v2-dynamic-profile-container .profile-popover-username {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
}

body[data-page="channels"] .spotify-live-indicator {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1rem !important;
    height: 1rem !important;
    flex: 0 0 1rem !important;
    color: rgba(74, 222, 128, 0.96) !important;
}

body[data-page="channels"] .spotify-live-indicator-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1rem !important;
    height: 1rem !important;
    border: 1px solid rgba(74, 222, 128, 0.5) !important;
    border-radius: 999px !important;
    background: rgba(10, 20, 12, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.08) inset !important;
}

body[data-page="channels"] .spotify-live-indicator-icon svg {
    width: 0.72rem !important;
    height: 0.72rem !important;
}

body[data-page="channels"] .spotify-live-indicator-tooltip {
    position: absolute !important;
    left: 50% !important;
    z-index: 30 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.34rem !important;
    min-width: max-content !important;
    padding: 0.34rem 0.54rem !important;
    border: 1px solid rgba(74, 222, 128, 0.34) !important;
    border-radius: 999px !important;
    background: rgba(12, 18, 13, 0.94) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28) !important;
    color: rgba(220, 252, 231, 0.96) !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(0.18rem) !important;
    transition: none !important;
}

body[data-page="channels"] .spotify-live-indicator-above .spotify-live-indicator-tooltip {
    bottom: calc(100% + 0.4rem) !important;
}

body[data-page="channels"] .spotify-live-indicator-below .spotify-live-indicator-tooltip {
    top: calc(100% + 0.4rem) !important;
}

body[data-page="channels"] .spotify-live-indicator:hover .spotify-live-indicator-tooltip,
body[data-page="channels"] .spotify-live-indicator:focus-within .spotify-live-indicator-tooltip {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

body[data-page="channels"] .spotify-live-indicator-tooltip-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 0.84rem !important;
    height: 0.84rem !important;
    color: #1ed760 !important;
}

body[data-page="channels"] .spotify-live-indicator-tooltip-logo svg {
    width: 100% !important;
    height: 100% !important;
}

body[data-page="channels"] .channels-self-name-row,
body[data-page="channels"] .channels-conversation-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.34rem !important;
}

body[data-page="channels"] .reply-composer-state.hidden,
body[data-page="channels"] .mention-suggestion-box.hidden {
    display: none !important;
}

body[data-page="channels"] .composer-bubble {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.48rem !important;
    min-height: 44px !important;
    padding: 0.36rem 0.46rem 0.36rem 0.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: clamp(18px, 2vw, 24px) !important;
    background: linear-gradient(180deg, rgba(15, 18, 22, 0.82), rgba(11, 13, 17, 0.88)) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(26px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(135%) !important;
}

body[data-page="channels"] .composer-bubble.is-multiline {
    align-items: end !important;
    border-radius: clamp(16px, 1.8vw, 21px) !important;
    padding-top: 0.42rem !important;
    padding-bottom: 0.42rem !important;
}

body[data-page="channels"] .composer-attach-button,
body[data-page="channels"] .send-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 0 !important;
}

body[data-page="channels"] .composer-bubble.is-multiline .composer-attach-button,
body[data-page="channels"] .composer-bubble.is-multiline .send-button {
    align-self: end !important;
    margin-bottom: 0.08rem !important;
}

body[data-page="channels"] .chat-input.composer-textarea,
body[data-page="channels"] #message-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    max-height: 108px !important;
    padding: 0.48rem 0.3rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.42 !important;
    resize: none !important;
}

body[data-page="channels"] .chat-input.composer-textarea::placeholder,
body[data-page="channels"] #message-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

body[data-page="channels"] .reply-composer-state {
    width: min(100%, 980px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.56rem !important;
    margin: 0 auto 0.38rem auto !important;
    padding: 0.56rem 0.76rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: clamp(16px, 2vw, 22px) !important;
    background: linear-gradient(180deg, rgba(20, 23, 28, 0.74), rgba(13, 16, 20, 0.82)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(24px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(130%) !important;
}

body[data-page="channels"] .reply-composer-copy {
    min-width: 0 !important;
    gap: 0.18rem !important;
}

body[data-page="channels"] .reply-composer-author {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.86) !important;
}

body[data-page="channels"] .reply-composer-preview {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.56) !important;
}

body[data-page="channels"] .reply-composer-state [data-reply-cancel] {
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.76) !important;
    padding: 0.48rem 0.72rem !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

body[data-page="channels"] .message-shell-mentioned::before {
    inset: -0.22rem -0.62rem !important;
    border-radius: 0.94rem !important;
    background: rgba(245, 206, 92, 0.045) !important;
    border: none !important;
    box-shadow: none !important;
}

body[data-page="channels"] .message-reply-preview {
    padding: 0.54rem 0.7rem !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: none !important;
    border-radius: 0.96rem !important;
    background: linear-gradient(180deg, rgba(245, 206, 92, 0.05), rgba(255, 255, 255, 0.03)) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
}

body[data-page="channels"] .message-reply-preview:hover,
body[data-page="channels"] .message-reply-preview.is-targeted {
    background: linear-gradient(180deg, rgba(245, 206, 92, 0.08), rgba(255, 255, 255, 0.04)) !important;
}

body[data-page="channels"] .message-text {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-weight: 400 !important;
}

body[data-page="channels"] .message-author-button,
body[data-page="channels"] .message-author-button * {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
}

body[data-page="channels"] .cf-role-tag {
    font-size: 0.66rem !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

body[data-page="channels"] .channels-modal-card {
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: linear-gradient(180deg, rgba(18, 21, 28, 0.78), rgba(12, 15, 20, 0.88)) !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(30px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(140%) !important;
}

body[data-page="channels"] .channels-modal-close,
body[data-page="channels"] .channels-modal-primary,
body[data-page="channels"] .channels-modal-secondary {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

body[data-page="channels"] #channel-join-modal .admin-soft-field {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1.1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
}

/* v5 polish batch: profile typography, sidebar cards, reply strip, and tag cleanup */
body[data-page="channels"] .message-group {
    animation: none !important;
}

body[data-page="channels"] .channels-self-card-pill {
    min-height: 50px !important;
    padding: 0.44rem 0.76rem !important;
    border-radius: 1.12rem !important;
}

body[data-page="channels"] .channels-self-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.08rem !important;
}

body[data-page="channels"] .channels-self-name-row {
    align-items: center !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
}

body[data-page="channels"] .channels-self-name {
    line-height: 1.02 !important;
    font-weight: 700 !important;
}

body[data-page="channels"] .channels-self-activity {
    margin-top: 0 !important;
    line-height: 1.12 !important;
    font-size: 0.69rem !important;
    color: rgba(255, 255, 255, 0.58) !important;
}

body[data-page="channels"] .admin-sidebar-stack {
    gap: 0.88rem !important;
    padding: 1rem 1rem 1rem 0.96rem !important;
}

body[data-page="channels"] .admin-sidebar-panel {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1.18rem !important;
    background: linear-gradient(180deg, rgba(20, 24, 31, 0.8), rgba(13, 16, 22, 0.88)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
    overflow: hidden !important;
}

body[data-page="channels"] #room-member-list {
    gap: 0.68rem !important;
    padding-right: 0.12rem !important;
}

body[data-page="channels"] .channels-member-card {
    min-height: 90px !important;
    max-height: none !important;
    border-radius: 1.16rem !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-member-card:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.03)),
        linear-gradient(135deg, color-mix(in srgb, var(--member-start, #445066) 88%, rgba(255, 255, 255, 0.1)), color-mix(in srgb, var(--member-end, #1b212c) 90%, rgba(0, 0, 0, 0.08))) !important;
}

body[data-page="channels"] .channels-member-card.is-active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
        linear-gradient(135deg, color-mix(in srgb, var(--member-start, #445066) 94%, rgba(255, 255, 255, 0.1)), color-mix(in srgb, var(--member-end, #1b212c) 92%, rgba(0, 0, 0, 0.07))) !important;
}

body[data-page="channels"] .channels-member-card-body {
    padding: 0.76rem 0.84rem !important;
    gap: 0.72rem !important;
    align-items: start !important;
}

body[data-page="channels"] .channels-member-copy {
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 2.36em) auto !important;
    gap: 0.22rem !important;
}

body[data-page="channels"] .channels-member-top-row {
    align-items: center !important;
    gap: 0.36rem !important;
    min-width: 0 !important;
}

body[data-page="channels"] .channels-member-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.84rem !important;
    line-height: 1.1 !important;
}

body[data-page="channels"] .channels-member-handle {
    margin: 0 !important;
    font-size: 0.71rem !important;
    line-height: 1.16 !important;
    color: rgba(255, 255, 255, 0.42) !important;
}

body[data-page="channels"] .channels-member-status {
    display: -webkit-box !important;
    min-height: 2.36em !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.69rem !important;
    line-height: 1.22 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

body[data-page="channels"] .channels-member-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.28rem !important;
    margin-top: 0.04rem !important;
}

body[data-page="channels"] .channels-member-chip {
    font-size: 0.57rem !important;
    letter-spacing: 0.06em !important;
}

body[data-page="channels"] .channels-member-menu-btn {
    margin-left: auto !important;
    align-self: center !important;
    width: 1.45rem !important;
    height: 1.45rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.62) !important;
    line-height: 1 !important;
}

body[data-page="channels"] .channels-member-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

body[data-page="channels"] .reply-composer-state {
    width: min(100%, 980px) !important;
    gap: 0.62rem !important;
    margin: 0 auto 0.42rem auto !important;
    padding: 0.64rem 0.82rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1.18rem !important;
    background: linear-gradient(180deg, rgba(20, 24, 30, 0.8), rgba(12, 15, 20, 0.88)) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(26px) saturate(132%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(132%) !important;
}

body[data-page="channels"] .reply-composer-copy {
    gap: 0.14rem !important;
}

body[data-page="channels"] .reply-composer-kicker {
    display: inline-flex !important;
    align-items: center !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.42) !important;
}

body[data-page="channels"] .reply-composer-author {
    font-size: 0.84rem !important;
    line-height: 1.12 !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

body[data-page="channels"] .reply-composer-preview {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.76rem !important;
    line-height: 1.28 !important;
    color: rgba(255, 255, 255, 0.58) !important;
}

body[data-page="channels"] .reply-composer-cancel-btn,
body[data-page="channels"] .reply-composer-state [data-reply-cancel] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
}

body[data-page="channels"] .reply-composer-cancel-btn:hover,
body[data-page="channels"] .reply-composer-state [data-reply-cancel]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.94) !important;
}

body[data-page="channels"] :where(.message-meta-side, [data-group-meta], .channels-member-top-row, .channels-conversation-title-row, .channels-self-name-row) .cf-role-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 1.18rem !important;
    padding: 0 0.44rem !important;
    border-radius: 999px !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}

body[data-page="channels"] :where(.message-meta-side, [data-group-meta], .channels-member-top-row, .channels-conversation-title-row, .channels-self-name-row) .cf-role-tag-developer {
    background: rgba(82, 194, 255, 0.12) !important;
    border-color: rgba(82, 194, 255, 0.18) !important;
    color: rgba(214, 243, 255, 0.92) !important;
}

body[data-page="channels"] :where(.message-meta-side, [data-group-meta], .channels-member-top-row, .channels-conversation-title-row, .channels-self-name-row) .cf-role-tag-support {
    background: rgba(52, 211, 153, 0.12) !important;
    border-color: rgba(52, 211, 153, 0.18) !important;
    color: rgba(221, 255, 243, 0.92) !important;
}

body[data-page="channels"] :where(.message-meta-side, [data-group-meta], .channels-member-top-row, .channels-conversation-title-row, .channels-self-name-row) .cf-role-tag-tester {
    background: rgba(167, 139, 250, 0.13) !important;
    border-color: rgba(167, 139, 250, 0.18) !important;
    color: rgba(238, 231, 255, 0.92) !important;
}

body[data-page="channels"] .v2-dynamic-profile-container .v2-name-row {
    align-items: flex-start !important;
    gap: 0.46rem !important;
}

body[data-page="channels"] .v2-dynamic-profile-container .profile-popover-name {
    font-family: "Quicksand", "Trebuchet MS", sans-serif !important;
    font-size: clamp(1.58rem, 2.8vw, 1.94rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
    line-height: 0.92 !important;
    color: rgba(248, 251, 255, 0.98) !important;
}

body[data-page="channels"] .v2-dynamic-profile-container .profile-popover-username {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em !important;
    color: rgba(236, 241, 248, 0.56) !important;
}

body[data-page="channels"] .v2-dynamic-profile-container .profile-premium-chip.plus {
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    animation: voyagerChipGradientShift 5s linear infinite !important;
    background-size: 200% auto !important;
}

body[data-page="channels"] .v2-dynamic-profile-container .profile-premium-chip.plus::before,
body[data-page="channels"] .v2-dynamic-profile-container .profile-premium-chip.plus::after {
    display: none !important;
}

body[data-page="channels"] .v2-dynamic-profile-container .profile-premium-chip.plus .profile-premium-chip-label {
    font-family: "Quicksand", "Trebuchet MS", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

body[data-page="channels"] #channel-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 0.88rem 1rem !important;
    border-radius: 1.45rem !important;
    background:
        linear-gradient(180deg, rgba(30, 34, 40, 0.76), rgba(17, 20, 26, 0.88)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(32px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(155%) !important;
}

body[data-page="channels"] .channels-context-meta {
    min-width: 0 !important;
    display: grid !important;
    gap: 0.52rem !important;
    flex: 1 1 auto !important;
}

body[data-page="channels"] .channels-context-kicker-row,
body[data-page="channels"] .channels-context-title-row,
body[data-page="channels"] .channels-context-actions {
    display: flex !important;
    align-items: center !important;
}

body[data-page="channels"] .channels-context-kicker-row {
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
}

body[data-page="channels"] .channels-context-title-row {
    gap: 0.62rem !important;
    min-width: 0 !important;
}

body[data-page="channels"] .channels-context-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 0.12rem !important;
}

body[data-page="channels"] .channels-context-subtitle {
    margin: 0 !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.74rem !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.52) !important;
}

body[data-page="channels"] .channels-context-chip,
body[data-page="channels"] .channels-context-presence-pill,
body[data-page="channels"] .context-action-pill {
    border-radius: 999px !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

body[data-page="channels"] .channels-context-chip,
body[data-page="channels"] .channels-context-presence-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 1.7rem !important;
    padding: 0 0.7rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(242, 246, 255, 0.88) !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

body[data-page="channels"] .channels-context-actions {
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 0.46rem !important;
}

body[data-page="channels"] .context-action-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.42rem !important;
    min-height: 2.15rem !important;
    padding: 0 0.86rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(245, 248, 255, 0.88) !important;
    box-shadow: none !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

body[data-page="channels"] .context-action-pill.is-active {
    background: rgba(125, 211, 252, 0.14) !important;
    border-color: rgba(125, 211, 252, 0.22) !important;
    color: rgba(224, 242, 254, 0.95) !important;
}

body[data-page="channels"] .context-action-pill.is-danger {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: rgba(248, 113, 113, 0.16) !important;
    color: rgba(254, 226, 226, 0.9) !important;
}

body[data-page="channels"] .channels-mission-panel {
    display: grid !important;
    gap: 0.8rem !important;
}

body[data-page="channels"] .channels-cluster-block {
    display: grid !important;
    gap: 0.72rem !important;
    padding: 0.94rem !important;
    border-radius: 1.12rem !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

body[data-page="channels"] .channels-cluster-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
}

body[data-page="channels"] .channels-cluster-kicker {
    margin: 0 0 0.22rem !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.63rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

body[data-page="channels"] .channels-cluster-title {
    margin: 0 !important;
    font-size: 0.96rem !important;
    line-height: 1.1 !important;
    color: rgba(255, 255, 255, 0.94) !important;
}

body[data-page="channels"] .channels-cluster-copy {
    margin: 0 !important;
    max-width: 18rem !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

body[data-page="channels"] .channels-nav-grid-reforge {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
}

body[data-page="channels"] .mission-nav-btn,
body[data-page="channels"] .channels-mission-action-btn {
    position: relative !important;
    display: grid !important;
    gap: 0.18rem !important;
    min-height: 3.25rem !important;
    padding: 0.78rem !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: rgba(245, 248, 255, 0.92) !important;
    text-align: left !important;
    box-shadow: none !important;
}

body[data-page="channels"] .mission-nav-btn {
    grid-template-rows: auto auto !important;
    place-items: start !important;
    justify-content: start !important;
}

body[data-page="channels"] .mission-nav-btn svg {
    width: 1.02rem !important;
    height: 1.02rem !important;
}

body[data-page="channels"] .mission-nav-btn.is-active,
body[data-page="channels"] .channels-mission-action-btn.is-primary {
    background: linear-gradient(180deg, rgba(125, 211, 252, 0.14), rgba(56, 189, 248, 0.08)) !important;
    border-color: rgba(125, 211, 252, 0.18) !important;
}

body[data-page="channels"] .channels-nav-btn-label,
body[data-page="channels"] .channels-mission-action-title {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

body[data-page="channels"] .channels-action-grid {
    display: grid !important;
    gap: 0.48rem !important;
}

body[data-page="channels"] .channels-mission-action-copy {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.7rem !important;
    line-height: 1.28 !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

body[data-page="channels"] .friends-workspace {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 5.75rem 1.2rem 1.2rem !important;
}

body[data-page="channels"] .friends-workspace-shell {
    display: grid !important;
    gap: 0.9rem !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 1rem !important;
    border-radius: 1.5rem !important;
    background:
        linear-gradient(180deg, rgba(25, 28, 34, 0.82), rgba(14, 17, 22, 0.92)) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body[data-page="channels"] .friends-workspace-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}

body[data-page="channels"] .friends-workspace-kicker {
    margin: 0 0 0.28rem !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(125, 211, 252, 0.72) !important;
}

body[data-page="channels"] .friends-workspace-title {
    margin: 0 !important;
    font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
    line-height: 1.04 !important;
    color: rgba(248, 251, 255, 0.96) !important;
}

body[data-page="channels"] .friends-workspace-copy {
    margin: 0.38rem 0 0 !important;
    max-width: 40rem !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

body[data-page="channels"] .friends-workspace-launchers,
body[data-page="channels"] .friends-workspace-tabs,
body[data-page="channels"] .friends-workspace-card-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

body[data-page="channels"] .friends-workspace-launchers,
body[data-page="channels"] .friends-workspace-tabs {
    flex-wrap: wrap !important;
}

body[data-page="channels"] .friends-workspace-launch-btn,
body[data-page="channels"] .friends-workspace-tab,
body[data-page="channels"] .friends-workspace-action-btn,
body[data-page="channels"] .friends-workspace-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.2rem !important;
    padding: 0 0.88rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(243, 246, 255, 0.86) !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

body[data-page="channels"] .friends-workspace-tab.is-active,
body[data-page="channels"] .friends-workspace-launch-btn,
body[data-page="channels"] .friends-workspace-action-btn.is-primary {
    background: rgba(125, 211, 252, 0.14) !important;
    border-color: rgba(125, 211, 252, 0.22) !important;
    color: rgba(224, 242, 254, 0.95) !important;
}

body[data-page="channels"] .friends-workspace-status {
    margin: 0 !important;
    min-height: 1.2rem !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.52) !important;
}

body[data-page="channels"] .friends-workspace-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-right: 0.3rem !important;
    display: grid !important;
    gap: 1rem !important;
}

body[data-page="channels"] .friends-workspace-section,
body[data-page="channels"] .friends-workspace-letter-stack,
body[data-page="channels"] .friends-workspace-card-stack {
    display: grid !important;
    gap: 0.72rem !important;
}

body[data-page="channels"] .friends-workspace-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.8rem !important;
}

body[data-page="channels"] .friends-workspace-section-head h3,
body[data-page="channels"] .friends-workspace-section-head span,
body[data-page="channels"] .friends-workspace-letter {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
}

body[data-page="channels"] .friends-workspace-section-head h3 {
    margin: 0 !important;
    font-size: 0.92rem !important;
    color: rgba(248, 251, 255, 0.94) !important;
}

body[data-page="channels"] .friends-workspace-section-head span,
body[data-page="channels"] .friends-workspace-letter {
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

body[data-page="channels"] .friends-workspace-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.9rem !important;
    padding: 0.86rem 0.94rem !important;
    border-radius: 1.12rem !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

body[data-page="channels"] .friends-workspace-card.is-online {
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.05), rgba(255, 255, 255, 0.02)) !important;
    border-color: rgba(74, 222, 128, 0.08) !important;
}

body[data-page="channels"] .friends-workspace-card-main {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.78rem !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    color: inherit !important;
}

body[data-page="channels"] .friends-workspace-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

body[data-page="channels"] .friends-workspace-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body[data-page="channels"] .friends-workspace-card-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 0.18rem !important;
}

body[data-page="channels"] .friends-workspace-card-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.34rem !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
}

body[data-page="channels"] .friends-workspace-card-name {
    min-width: 0 !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: rgba(248, 251, 255, 0.96) !important;
}

body[data-page="channels"] .friends-workspace-card-handle,
body[data-page="channels"] .friends-workspace-card-bio {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
}

body[data-page="channels"] .friends-workspace-card-handle {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.46) !important;
}

body[data-page="channels"] .friends-workspace-card-bio {
    font-size: 0.75rem !important;
    line-height: 1.34 !important;
    color: rgba(255, 255, 255, 0.56) !important;
}

body[data-page="channels"] .friends-workspace-card-side {
    display: grid !important;
    align-content: center !important;
    justify-items: end !important;
    gap: 0.55rem !important;
}

body[data-page="channels"] .friends-workspace-card-state {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 1.55rem !important;
    padding: 0 0.58rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.58) !important;
}

body[data-page="channels"] .friends-workspace-card-state.is-online {
    color: rgba(220, 252, 231, 0.92) !important;
    border-color: rgba(74, 222, 128, 0.16) !important;
    background: rgba(74, 222, 128, 0.09) !important;
}

body[data-page="channels"] .friends-workspace-card-state.is-pending {
    color: rgba(253, 230, 138, 0.92) !important;
    border-color: rgba(251, 191, 36, 0.16) !important;
    background: rgba(245, 158, 11, 0.1) !important;
}

body[data-page="channels"] .friends-workspace-menu-btn {
    min-width: 2.2rem !important;
    padding: 0 !important;
}

body[data-page="channels"] .friends-workspace-empty,
body[data-page="channels"] .friends-workspace-launch-card p,
body[data-page="channels"] .friends-workspace-launch-card h3 {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
}

body[data-page="channels"] .friends-workspace-empty {
    padding: 1.15rem !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
    color: rgba(255, 255, 255, 0.56) !important;
}

body[data-page="channels"] .friends-workspace-launch-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.78rem !important;
}

body[data-page="channels"] .friends-workspace-launch-card {
    display: grid !important;
    gap: 0.5rem !important;
    padding: 1rem !important;
    border-radius: 1.15rem !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)) !important;
}

body[data-page="channels"] .friends-workspace-launch-kicker {
    margin: 0 !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(125, 211, 252, 0.72) !important;
}

body[data-page="channels"] .friends-workspace-launch-card h3 {
    margin: 0 !important;
    font-size: 0.92rem !important;
    color: rgba(248, 251, 255, 0.95) !important;
}

body[data-page="channels"] .friends-workspace-launch-card p {
    margin: 0 !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.56) !important;
}

body[data-page="channels"] #channels-shell.is-friends-view .chat-stage {
    display: none !important;
}

body[data-page="channels"] #channels-shell.is-friends-view .friends-workspace {
    display: flex !important;
}

@media (max-width: 1180px) {
    body[data-page="channels"] #channel-header-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body[data-page="channels"] .channels-context-actions {
        justify-content: flex-start !important;
    }

    body[data-page="channels"] .friends-workspace-launch-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 860px) {
    body[data-page="channels"] .friends-workspace {
        padding: 6.45rem 0.75rem 0.85rem !important;
    }

    body[data-page="channels"] .friends-workspace-shell {
        padding: 0.82rem !important;
        border-radius: 1.2rem !important;
    }

    body[data-page="channels"] .friends-workspace-header,
    body[data-page="channels"] .friends-workspace-card {
        grid-template-columns: 1fr !important;
    }

    body[data-page="channels"] .friends-workspace-header,
    body[data-page="channels"] .friends-workspace-card,
    body[data-page="channels"] .friends-workspace-card-side {
        justify-items: start !important;
    }

    body[data-page="channels"] .channels-nav-grid-reforge {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Blue Pill Sidebar Layout */
.blue-nav-container {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.5rem;
}

.blue-nav-row {
    display: flex;
    gap: 0.8rem;
    align-items: stretch;
}

.blue-glossy-btn {
    background: linear-gradient(135deg, rgba(30, 110, 160, 0.4), rgba(20, 70, 110, 0.6));
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.95);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', sans-serif;
    cursor: pointer;
}

.blue-glossy-btn:hover {
    background: linear-gradient(135deg, rgba(40, 130, 190, 0.5), rgba(30, 90, 140, 0.7));
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 12px 32px rgba(0, 0, 0, 0.3);
    color: #fff;
}

.blue-glossy-btn:active {
    transform: translateY(0);
}

.blue-glossy-btn.is-round {
    border-radius: 999px;
    width: 3.8rem;
    height: 3.8rem;
    flex: 0 0 3.8rem;
    font-size: 1.4rem;
    font-weight: 700;
}

.blue-glossy-btn.is-pill {
    border-radius: 999px;
    flex: 1;
    height: 3.8rem;
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: capitalize;
}

.blue-pill-group {
    background: linear-gradient(135deg, rgba(20, 60, 90, 0.3), rgba(15, 40, 60, 0.5));
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    width: 100%;
}

.blue-pill-inner-btn {
    background: linear-gradient(135deg, rgba(40, 120, 180, 0.3), rgba(20, 80, 130, 0.5));
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.blue-pill-inner-btn:hover {
    background: linear-gradient(135deg, rgba(50, 140, 210, 0.4), rgba(30, 100, 160, 0.6));
    color: #fff;
    transform: translateY(-1px);
}

.blue-pill-inner-btn.is-small {
    width: 3.5rem;
    flex: 0 0 3.5rem;
    font-size: 0.8rem;
}

.blue-pill-inner-btn.is-flex {
    flex: 1;
}

/* Friends Page Layout - Card Grid */
.friends-workspace-card-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .friends-workspace-card-stack {
        grid-template-columns: 1fr 1fr;
        /* 2 columns on larger screens */
    }
}

.friends-workspace-card {
    height: 80px;
    width: 100%;
    background: linear-gradient(135deg, rgba(30, 80, 120, 0.4), rgba(20, 60, 100, 0.6));
    border-radius: 16px;
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.friends-workspace-card:hover {
    background: linear-gradient(135deg, rgba(40, 100, 150, 0.5), rgba(30, 80, 130, 0.7));
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 12px 32px rgba(0, 0, 0, 0.3);
}

.friends-workspace-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.friends-workspace-card-main {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 0;
}

.friends-workspace-card-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.friends-workspace-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.friends-workspace-card-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friends-workspace-card-handle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.friends-workspace-card-bio {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.friends-workspace-card-side {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.friends-workspace-card-state {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.friends-workspace-card-state.is-online {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.friends-workspace-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.friends-workspace-card-actions button {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.friends-workspace-card-actions button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}



/* =========================================
   FINAL GLOSSY BLUR DESIGN OVERHAUL
   ========================================= */

/* Left Sidebar Navigation (Compact Dock) */
body[data-page="channels"] .channels-nav-grid-reforge {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    width: max-content;
    margin: 0 auto;
}

body[data-page="channels"] .channels-nav-grid-reforge .channels-nav-btn {
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    width: 3.2rem !important;
    height: 3.2rem !important;
    flex: 0 0 3.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

body[data-page="channels"] .channels-nav-grid-reforge .channels-nav-btn svg {
    width: 1.4rem !important;
    height: 1.4rem !important;
    display: block !important;
}

body[data-page="channels"] .channels-nav-grid-reforge .channels-nav-btn:hover,
body[data-page="channels"] .channels-nav-grid-reforge .channels-nav-btn.is-active {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body[data-page="channels"] .channels-nav-grid-reforge .channels-nav-btn-label {
    display: none !important;
}

/* Top Center UI (Friends Workspace Header) */
body[data-page="channels"] .friends-workspace-header {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-radius: 16px !important;
    padding: 0.8rem 1.5rem !important;
    margin: 1rem 1.5rem 0 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
}

body[data-page="channels"] .friends-workspace-header-title-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;
}

body[data-page="channels"] .friends-workspace-kicker {
    font-family: "Segoe UI", sans-serif !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 !important;
}

body[data-page="channels"] .friends-workspace-title {
    font-family: "Quicksand", sans-serif !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

body[data-page="channels"] .friends-workspace-launchers {
    display: flex !important;
    gap: 0.6rem !important;
}

body[data-page="channels"] .friends-workspace-launch-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 999px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    font-family: "Quicksand", sans-serif !important;
    transition: all 0.2s ease !important;
}

body[data-page="channels"] .friends-workspace-launch-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* Friends Page Grid & Cards */
body[data-page="channels"] .friends-workspace-card-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    padding: 1rem 1.5rem !important;
    width: 100% !important;
}

@media (min-width: 1024px) {
    body[data-page="channels"] .friends-workspace-card-stack {
        grid-template-columns: 1fr 1fr !important;
    }
}

body[data-page="channels"] .friends-workspace-card {
    height: auto !important;
    min-height: 64px !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.6rem 1rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    margin: 0 !important;
}

body[data-page="channels"] .friends-workspace-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    transform: translateY(-1px) !important;
}

body[data-page="channels"] .friends-workspace-card-main {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    padding: 0 !important;
}

body[data-page="channels"] .friends-workspace-avatar {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 50% !important;
}

body[data-page="channels"] .friends-workspace-card-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    gap: 0.1rem !important;
}

body[data-page="channels"] .friends-workspace-card-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

body[data-page="channels"] .friends-workspace-card-name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: "Quicksand", sans-serif !important;
}

body[data-page="channels"] .friends-workspace-card-handle {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: "Segoe UI", sans-serif !important;
}

body[data-page="channels"] .friends-workspace-card-bio {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body[data-page="channels"] .friends-workspace-card-side {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    flex-shrink: 0 !important;
}

body[data-page="channels"] .friends-workspace-card-state {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: "Quicksand", sans-serif !important;
}

body[data-page="channels"] .friends-workspace-card-state.is-online {
    background: rgba(46, 204, 113, 0.15) !important;
    color: #2ecc71 !important;
}

body[data-page="channels"] .friends-workspace-card-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

body[data-page="channels"] .friends-workspace-card-actions button {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

body[data-page="channels"] .friends-workspace-card-actions button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    transform: scale(1.05) !important;
}


/* =========================================
   AGGRESSIVE STABILIZATION PASS
   ========================================= */

/* 1. Nuke the Massive Top Header (.channels-context-bar) */
body[data-page="channels"] .channels-context-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 8px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: unset !important;
    border-radius: 0 !important;
}

body[data-page="channels"] .channels-context-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

body[data-page="channels"] .channels-context-kicker-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="channels"] .channels-context-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="channels"] .channels-context-title-row h3 {
    font-size: 13px !important;
    margin: 0 !important;
}

body[data-page="channels"] .channels-context-subtitle {
    display: none !important;
    /* Hide the verbose subtitle in the top header */
}

body[data-page="channels"] .channels-context-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="channels"] .channels-context-actions .dock-action-btn,
body[data-page="channels"] .channels-context-presence-pill {
    padding: 4px 10px !important;
    font-size: 11px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.02) !important;
    margin: 0 !important;
}

/* 2. Fix Exorbitant Friends Workspace Spacing */
body[data-page="channels"] .friends-workspace {
    padding: 0 !important;
    margin: 0 !important;
}

body[data-page="channels"] .friends-workspace-shell {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    /* Tighten the gap between header, tabs, and list */
}

body[data-page="channels"] .friends-workspace-header {
    margin: 0 !important;
    border-radius: 0 0 16px 16px !important;
    /* Flatten top to align with window */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

body[data-page="channels"] .friends-workspace-tabs {
    margin: 0 1.5rem !important;
    padding: 0 !important;
}

body[data-page="channels"] .friends-workspace-list {
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="channels"] .friends-workspace-section {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

body[data-page="channels"] .friends-workspace-card-stack {
    padding: 0 1.5rem 1.5rem 1.5rem !important;
    margin: 0 !important;
}

/* Fix massive empty gaps */
body[data-page="channels"] .friends-workspace-section-head {
    margin: 0 1.5rem 8px 1.5rem !important;
    padding: 0 !important;
}

body[data-page="channels"] .friends-workspace-letter-group {
    margin-bottom: 12px !important;
}

body[data-page="channels"] .friends-workspace-letter {
    margin: 0 1.5rem 4px 1.5rem !important;
    padding: 0 !important;
    font-size: 11px !important;
}

/* --- Final UI Refinement Overrides --- */

/* Top Header Redesign */
.channels-context-bar.floating-dock {
    height: 48px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(32px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}

#room-actions-island {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Sidebar Utility Grid */
.sidebar-mode-switch {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.sidebar-mode-btn {
    transition: all 0.2s ease;
}

.sidebar-mode-btn.is-active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
}

/* Friends Workspace Cleanup */
.friends-workspace-card {
    height: 76px !important;
    margin-bottom: 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    transition: all 0.2s ease;
}

.friends-workspace-card:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.friends-workspace-card-bio {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px !important;
    opacity: 0.4 !important;
}

.friends-workspace-section-head {
    display: none !important;
    /* Hide redundant section headers */
}

/* Launch Cards (Add Friends) */
.friends-workspace-launch-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Abolish Blue & Egg Shapes */
.dock-action-btn,
.sidebar-mode-btn,
.friends-workspace-launch-btn {
    border-radius: 9999px !important;
    /* Circular/Pill but not egg-shaped */
}

.text-blue-300,
.text-blue-400 {
    color: rgba(255, 255, 255, 0.6) !important;
}



/* --- Final Aesthetic Refinement: Abolish Blue & Frosted Pill --- */

:root {
    --cometfare-primary: rgba(255, 255, 255, 0.9) !important;
    --cometfare-accent: rgba(255, 255, 255, 0.7) !important;
}

/* Force all blue-ish elements to be white/glassy */
.text-blue-400,
.text-blue-300,
.text-sky-400,
.text-sky-300 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.bg-blue-500,
.bg-blue-600,
.bg-sky-500,
.bg-sky-600 {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
}

/* Header Frosted Pill Island - Nuked Squircle */
.channels-context-bar.floating-dock {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 8px 0 !important;
}

/* Friends Workspace Launch Cards - Thinner */
.friends-workspace-launch-card {
    padding: 12px 16px !important;
    height: auto !important;
    min-height: 80px !important;
}

.friends-workspace-launch-card h3 {
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

.friends-workspace-launch-card p {
    font-size: 11px !important;
    opacity: 0.5 !important;
}

/* Open DM Button in Friend Card - Pure Circular Icon */
[data-friend-open-dm] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

[data-friend-open-dm]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    transform: scale(1.05);
}

/* Remove all remaining blue gradients */
[style*="7bd6ff"] {
    --tw-gradient-from: rgba(255, 255, 255, 0.2) !important;
    --tw-gradient-to: rgba(255, 255, 255, 0.05) !important;
}

/* TOTAL SQUIRCLE ANNIHILATION */
[id='channel-header-bar'],
.channels-context-bar,
.floating-dock {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* --- FINAL UI POLISH: PFP SIZING & CARD TIGHTENING --- */
body[data-page='channels'] #chat-messages .avatar-pill {
    width: 2.32rem !important;
    height: 2.32rem !important;
    flex: 0 0 2.32rem !important;
}

body[data-page='channels'] .channels-member-card {
    min-height: unset !important;
    height: auto !important;
    padding-bottom: 0.2rem !important;
}

body[data-page='channels'] .channels-member-card-body {
    align-items: center !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

body[data-page='channels'] .channels-member-status {
    min-height: unset !important;
    margin-bottom: 0.1rem !important;
}

body[data-page='channels'] .channels-member-copy {
    grid-template-rows: repeat(4, auto) !important;
    gap: 0.15rem !important;
}

body[data-chat-design-theme="liquid-flow"] {
    background:
        radial-gradient(circle at 12% 18%, rgba(106, 230, 255, 0.22), transparent 32%),
        radial-gradient(circle at 78% 16%, rgba(172, 145, 255, 0.18), transparent 28%),
        radial-gradient(circle at 48% 92%, rgba(95, 255, 203, 0.16), transparent 34%),
        linear-gradient(135deg, #141820 0%, #202432 42%, #171f27 100%);
}

body[data-chat-design-theme="liquid-flow"] .ambient-shell::before,
body[data-chat-design-theme="liquid-flow"] .ambient-shell::after {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        conic-gradient(from 120deg, rgba(88, 214, 255, 0.08), rgba(164, 126, 255, 0.12), rgba(75, 240, 207, 0.10), rgba(88, 214, 255, 0.08));
    filter: blur(40px);
    animation: cf-liquid-flow 18s ease-in-out infinite alternate;
}

body[data-chat-design-theme="liquid-flow"] .ambient-shell::after {
    animation-duration: 24s;
    animation-direction: alternate-reverse;
    opacity: 0.58;
}

@keyframes cf-liquid-flow {
    from {
        transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1);
    }

    to {
        transform: translate3d(4%, 3%, 0) rotate(16deg) scale(1.08);
    }
}

body[data-chat-design-theme="liquid-flow"] #chat-view,
body[data-chat-design-theme="liquid-flow"] .channels-panel,
body[data-chat-design-theme="liquid-flow"] .channels-sidebar-shell,
body[data-chat-design-theme="liquid-flow"] .friends-workspace-shell {
    border-color: rgba(255, 255, 255, 0.13) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(12, 16, 22, 0.54) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 28px 80px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(28px) saturate(1.12);
    -webkit-backdrop-filter: blur(28px) saturate(1.12);
}

body.chat-structure-split-studio .channels-center-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
}

body.chat-structure-split-studio #room-member-panel {
    display: flex !important;
    min-width: 260px;
}

body.chat-structure-command-rail .channels-sidebar-shell {
    width: 96px !important;
    min-width: 96px !important;
}

body.chat-structure-command-rail .channels-sidebar-shell h4,
body.chat-structure-command-rail .channels-sidebar-shell p,
body.chat-structure-command-rail .channels-sidebar-shell .channels-conversation-copy,
body.chat-structure-command-rail .channels-sidebar-shell .friends-workspace-launchers span {
    display: none !important;
}

body.chat-structure-command-rail .channels-mission-panel .grid {
    grid-template-columns: 1fr;
}

body.chat-structure-liquid-flow .chat-stage {
    padding: clamp(8px, 1.5vw, 18px);
}

body.chat-structure-liquid-flow #chat-messages {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cf-call-surface {
    position: relative;
    z-index: 5;
    margin: 68px clamp(12px, 2vw, 24px) 0;
    min-height: min(42vh, 420px);
    max-height: 48vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(14px, 2vw, 22px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
        rgba(8, 12, 18, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 70px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}

.cf-call-surface.hidden {
    display: none !important;
}

.cf-call-header,
.cf-call-controls,
.cf-call-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cf-call-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(126, 231, 255, 0.78);
}

.cf-call-title {
    margin-top: 3px;
    font-size: 18px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.92);
}

.cf-call-grid {
    flex: 1;
    min-height: 170px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.cf-call-participant {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: linear-gradient(135deg, rgba(45, 74, 96, 0.9), rgba(33, 39, 57, 0.92));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.cf-call-participant video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cf-call-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    color: white;
    font-weight: 900;
    font-size: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cf-call-name {
    position: absolute;
    left: 12px;
    bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    font-weight: 800;
}

.cf-call-control,
.cf-call-icon-button {
    min-height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.78);
    padding: 0 14px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.cf-call-icon-button {
    width: 38px;
    padding: 0;
    display: grid;
    place-items: center;
}

.cf-call-control:hover,
.cf-call-icon-button:hover,
.cf-call-control.is-active,
.cf-call-icon-button.is-active {
    background: #fff;
    color: #111;
    transform: translateY(-1px);
}

.cf-call-control-danger:hover {
    background: rgba(255, 93, 117, 0.95);
    color: #fff;
}

/* --- Ultra-Premium Voyager Gift Overhaul (Holo-Glass Edition) --- */

.cf-gift-surface {
    width: min(480px, 100%);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: 
        radial-gradient(120% 120% at 50% 150%, rgba(138, 43, 226, 0.45) 0%, transparent 60%),
        radial-gradient(100% 100% at 0% -20%, rgba(255, 105, 180, 0.35) 0%, transparent 50%),
        radial-gradient(100% 100% at 100% -20%, rgba(65, 105, 225, 0.35) 0%, transparent 50%),
        linear-gradient(135deg, rgba(20, 20, 25, 0.7) 0%, rgba(10, 10, 15, 0.85) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(255, 255, 255, 0.1),
        0 0 40px rgba(138, 43, 226, 0.15);
    padding: 40px;
    color: #fff;
    position: relative;
    overflow: hidden;
    font-family: "Outfit", sans-serif;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
    animation: cfGiftFloat 6s ease-in-out infinite;
}

@keyframes cfGiftFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.cf-gift-surface:hover {
    animation-play-state: paused;
    transform: perspective(1000px) rotateX(4deg) rotateY(-2deg) scale(1.02);
    box-shadow: 
        0 60px 100px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        0 0 60px rgba(255, 105, 180, 0.25);
}

.cf-gift-shimmer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 80%);
    background-size: 250% 250%;
    animation: cfGiftShimmer 8s linear infinite;
    mix-blend-mode: overlay;
    border-radius: inherit;
}

@keyframes cfGiftShimmer {
    0% { background-position: 200% center; }
    20%, 100% { background-position: -100% center; }
}

.cf-gift-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.08;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
    mix-blend-mode: color-dodge;
}

.cf-gift-badge {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(255, 140, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.6);
    text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}

.cf-gift-kicker {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cf-gift-title {
    position: relative;
    z-index: 3;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    margin: 0;
    background: linear-gradient(to right, #fff 20%, #f0caff 40%, #a2d2ff 60%, #fff 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cfGiftTitleGlimmer 6s linear infinite;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.cf-gift-status {
    position: relative;
    z-index: 3;
    margin-top: 16px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.cf-gift-action-wrap {
    position: relative;
    z-index: 3;
    margin-top: 40px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
    padding: 2px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.cf-gift-action {
    width: 100%;
    height: 56px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: #111;
    border: none;
    border-radius: 18px;
    font-weight: 900;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.8);
    position: relative;
    overflow: hidden;
}

.cf-gift-action::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.cf-gift-action:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.8), 0 12px 24px rgba(255, 105, 180, 0.3);
}

.cf-gift-action:not(:disabled):hover::after {
    transform: translateX(100%);
}

.cf-gift-action:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 8px rgba(0,0,0,0.2);
}

.cf-gift-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

.cf-gift-action:disabled::after {
    display: none;
}

.cf-gift-icon-wrap {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 260px;
    height: 260px;
    pointer-events: none;
    z-index: 2;
    opacity: 0.15;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cf-gift-surface:hover .cf-gift-icon-wrap {
    opacity: 0.25;
    transform: scale(1.1) rotate(-8deg) translate(-10px, 10px);
    filter: drop-shadow(0 0 30px rgba(255, 105, 180, 0.4));
}

.cf-gift-icon-wrap svg {
    width: 100%;
    height: 100%;
    stroke: url(#giftIconGradient);
}

/* Ensure the SVG stroke color applies properly, falling back to white if gradient not present */
.cf-gift-icon-wrap svg path,
.cf-gift-icon-wrap svg rect,
.cf-gift-icon-wrap svg line,
.cf-gift-icon-wrap svg polyline {
    stroke: rgba(255, 255, 255, 0.8);
}



.profile-premium-chip.plus,
.premium-chip-plus,
.developer-tag[data-role="voyager"] {
    border-radius: 999px !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07)),
        rgba(166, 224, 232, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.94) !important;
}

@media (max-width: 760px) {
    .cf-call-surface {
        margin-top: 76px;
        max-height: 54vh;
    }

    .cf-call-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    body.chat-structure-split-studio .channels-center-shell {
        display: flex;
    }
}

/* Call polish, shared state, and chat media controls */
.cf-call-controls {
    justify-content: center !important;
}

.cf-call-settings {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.18);
}

.cf-call-settings label {
    display: grid;
    gap: 5px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.cf-call-settings select {
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 800;
}

.cf-call-surface.is-expanded {
    position: absolute;
    inset: 0;
    margin: 68px 12px 12px;
    max-height: none;
    min-height: 0;
    z-index: 40;
}

body.call-expanded #chat-messages,
body.call-expanded .composer-shell,
body.call-expanded #typing-row,
body.call-expanded #admin-sidebar,
body.call-expanded #room-member-panel,
body.call-expanded .channels-members-shell {
    display: none !important;
}

.cf-call-surface.is-expanded .cf-call-grid {
    min-height: 0;
}

.cf-call-surface.is-audio-only .cf-call-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 150px));
    justify-content: center;
    align-content: center;
}

.cf-call-surface.is-audio-only .cf-call-participant {
    min-height: 130px;
}

.cf-call-participant.is-deafened {
    filter: brightness(0.58) saturate(0.72);
}

.cf-call-participant-state {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cf-call-participant-state span,
.cf-call-fullscreen-btn {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.42);
    color: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    font-weight: 900;
    padding: 5px 8px;
}

.cf-call-fullscreen-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
}

.channels-call-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ff4d6d;
    box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.14), 0 0 16px rgba(255, 77, 109, 0.7);
    flex: 0 0 auto;
    animation: call-pulse 2s infinite ease-in-out;
}

@keyframes call-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0px rgba(255, 77, 109, 0.4);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 77, 109, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0px rgba(255, 77, 109, 0);
    }
}

.channels-conversation-card.has-active-call {
    box-shadow: inset 0 0 0 1px rgba(255, 77, 109, 0.36), 0 0 24px rgba(255, 77, 109, 0.14) !important;
}

.channels-self-card-pill {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.55rem !important;
    align-items: center !important;
}

.channels-self-profile-button {
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    text-align: left;
    color: inherit;
    border: 0;
    background: transparent;
    padding: 0;
}

.channels-self-voice-row {
    display: flex;
    align-items: center;
    gap: 0.36rem;
}

.channels-self-voice-btn {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.72);
}

.channels-self-voice-btn.is-active,
.channels-self-voice-btn:hover {
    background: #fff;
    color: #10151d;
}

body.image-lightbox-open {
    overflow: hidden;
}

.image-lightbox-shell img {
    transform-origin: center center;
    transition: transform 90ms ease-out;
    cursor: zoom-out;
}

.message-text.is-emoji-only {
    font-size: 2.2em !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

.message-group-system,
.message-shell-system {
    align-self: center !important;
}

.message-system-bubble {
    max-width: min(92%, 560px);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.62);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.message-image-attachment.is-audio {
    width: min(100%, 420px);
    padding: 14px;
    display: grid;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
}

.message-image-attachment.is-audio audio {
    width: 100%;
}

.message-audio-title {
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    font-weight: 800;
}

.message-image-attachment.is-sticker {
    width: auto;
    max-width: 240px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.message-image-attachment.is-sticker img {
    max-width: 220px;
    max-height: 220px;
    object-fit: contain;
}

.composer-attachment-audio-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(126, 231, 255, 0.13);
    color: rgba(220, 248, 255, 0.92);
    font-size: 12px;
    font-weight: 900;
}

.cf-emoji-picker {
    position: absolute;
    left: 1.25rem;
    bottom: calc(100% + 8px);
    z-index: 99;
    width: min(412px, calc(100vw - 2.5rem));
    height: min(512px, 62vh);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 14, 21, 0.88);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(36px) saturate(160%);
    -webkit-backdrop-filter: blur(36px) saturate(160%);
    overflow: hidden;
    animation: emojiPickerAppear 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

@keyframes emojiPickerAppear {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cf-emoji-picker.hidden {
    display: none !important;
}

.cf-emoji-tabs,
.cf-emoji-nav,
.cf-emoji-recent {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    shrink: 0;
}

.cf-emoji-tabs button,
.cf-emoji-nav button,
.cf-emoji-recent button,
.cf-emoji-grid button {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.72);
    transition: all 0.16s ease;
    cursor: pointer;
}

.cf-emoji-tabs button:hover,
.cf-emoji-nav button:hover,
.cf-emoji-recent button:hover,
.cf-emoji-grid button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}

.cf-emoji-tabs button {
    min-height: 36px;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cf-emoji-tabs button.is-active {
    background: #fff;
    color: #0c1119;
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.12);
}

.cf-emoji-picker input {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    padding: 0 16px;
    outline: none;
    font-size: 14px;
    transition: border-color 0.18s ease;
}

.cf-emoji-picker input:focus {
    border-color: rgba(255, 255, 255, 0.2);
}

.cf-emoji-recent span,
.cf-emoji-grid p,
.cf-sticker-empty {
    color: rgba(255, 255, 255, 0.38);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cf-emoji-recent button,
.cf-emoji-grid button {
    width: 42px;
    height: 42px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
}

.cf-emoji-grid {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-right: 6px;
    min-height: 0;
}

.cf-emoji-grid::-webkit-scrollbar {
    width: 6px;
}

.cf-emoji-grid::-webkit-scrollbar-track {
    background: transparent;
}

.cf-emoji-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 99px;
}

.cf-emoji-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.cf-emoji-grid section div,
.cf-sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.cf-sticker-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow-y: auto;
}

.cf-sticker-item {
    aspect-ratio: 1;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: all 0.18s ease;
    cursor: pointer;
}

.cf-sticker-item-wrap {
    position: relative;
    aspect-ratio: 1;
}

.cf-sticker-item-wrap .cf-sticker-item {
    width: 100%;
    height: 100%;
}

.cf-sticker-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.cf-sticker-item img {
    width: 84%;
    height: 84%;
    object-fit: contain;
}

.cf-sticker-upload {
    margin-top: auto;
    width: 100%;
}

.cf-sticker-delete {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(230, 43, 63, 0.94);
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
    opacity: 0.78;
    transform: translateY(0) scale(0.96);
    transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.cf-sticker-item-wrap:hover .cf-sticker-delete,
.cf-sticker-delete:focus-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cf-sticker-delete:hover {
    background: #ff304f;
}

.v2-desktop-activity-line {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.42rem;
    margin-top: 0.55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.26);
    padding: 0.42rem 0.7rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
}

.v2-desktop-activity-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Cinematic chat rail refinement --- */
@keyframes cfCinematicGlassDrift {
    0% {
        background-position: 0% 42%, 100% 0%, 0% 100%;
    }

    50% {
        background-position: 100% 58%, 0% 20%, 100% 70%;
    }

    100% {
        background-position: 0% 42%, 100% 0%, 0% 100%;
    }
}

body[data-page="channels"] {
    background:
        linear-gradient(118deg, rgba(17, 28, 40, 0.94), rgba(28, 33, 48, 0.92) 38%, rgba(12, 18, 29, 0.96)),
        linear-gradient(72deg, rgba(49, 103, 128, 0.36), rgba(46, 70, 112, 0.22), rgba(30, 118, 132, 0.2)) !important;
    background-size: 190% 190%, 220% 220% !important;
    animation: cfCinematicGlassDrift 22s ease-in-out infinite !important;
}

body[data-page="channels"]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(100deg, transparent 0%, rgba(157, 229, 237, 0.09) 30%, transparent 58%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 44%, rgba(69, 132, 154, 0.07));
    background-size: 260% 260%, 180% 180%;
    mix-blend-mode: screen;
    opacity: 0.78;
    animation: cfCinematicGlassDrift 28s ease-in-out infinite reverse;
}

body[data-page="channels"] .ambient-shell {
    display: block !important;
    opacity: 1 !important;
    background: transparent !important;
}

body[data-page="channels"] .ambient-shell::before,
body[data-page="channels"] .ambient-shell::after {
    display: block !important;
    opacity: 0.58 !important;
    background:
        linear-gradient(110deg, rgba(173, 244, 255, 0.1), transparent 34%, rgba(112, 164, 255, 0.08), transparent 70%) !important;
    filter: blur(28px) saturate(130%) !important;
    animation: cfCinematicGlassDrift 30s ease-in-out infinite !important;
}

body[data-page="channels"] #channels-shell {
    position: relative !important;
    z-index: 1 !important;
}

body[data-page="channels"] #channel-sidebar {
    width: 278px !important;
    min-width: 278px !important;
    flex: 0 0 278px !important;
    padding: 0.9rem 0.74rem !important;
    background: rgba(255, 255, 255, 0.052) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.025) !important;
    backdrop-filter: blur(30px) saturate(145%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(30px) saturate(145%) brightness(1.08) !important;
}

body[data-page="channels"] #channel-sidebar .channels-panel {
    background: rgba(255, 255, 255, 0.052) !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

body[data-page="channels"] #admin-sidebar {
    width: 300px !important;
    min-width: 300px !important;
    flex: 0 0 300px !important;
    padding: 1rem 0.72rem 0.85rem !important;
    gap: 0.48rem !important;
    background: transparent !important;
    border-left: 1px solid rgba(255, 255, 255, 0.055) !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-member-search-panel {
    margin: 0 0 0.55rem !important;
    padding: 0 0.36rem !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-member-search-panel>div,
body[data-page="channels"] #room-member-panel>div:first-child {
    display: none !important;
}

body[data-page="channels"] #room-member-search.channels-sidebar-search {
    min-height: 0 !important;
    height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.085) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    padding: 0 1.08rem !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.76rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

body[data-page="channels"] #room-member-search.channels-sidebar-search::placeholder {
    color: rgba(255, 255, 255, 0.42) !important;
}

body[data-page="channels"] #room-member-search.channels-sidebar-search:focus {
    background: rgba(255, 255, 255, 0.96) !important;
    color: rgba(13, 18, 25, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

body[data-page="channels"] #room-member-panel {
    margin: 0 !important;
    padding: 0 0.28rem 0.3rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body[data-page="channels"] #room-member-list {
    gap: 0.42rem !important;
    padding: 0.12rem 0.12rem 0.25rem !important;
    overflow-y: auto !important;
}

body[data-page="channels"] #room-member-empty {
    margin: 0.65rem 0.65rem 0 !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

body[data-page="channels"] .channels-member-card {
    width: calc(100% - 0.24rem) !important;
    min-height: 56px !important;
    max-height: none !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
        linear-gradient(135deg, var(--member-start, #3e78a6), var(--member-end, #17315c)) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    filter: saturate(1.08) brightness(0.98) !important;
}

body[data-page="channels"] .channels-member-card:hover,
body[data-page="channels"] .channels-member-card.is-active {
    transform: translateY(-1px) !important;
    filter: saturate(1.12) brightness(1.04) !important;
}

body[data-page="channels"] .channels-member-card-body {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.52rem !important;
    padding: 0.42rem 0.54rem 0.42rem 0.48rem !important;
}

body[data-page="channels"] .channels-member-avatar {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

body[data-page="channels"] .channels-member-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.08rem !important;
    min-width: 0 !important;
    padding: 0 !important;
}

body[data-page="channels"] .channels-member-top-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
    padding: 0 !important;
}

body[data-page="channels"] .channels-member-name {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    font-family: "Quicksand", "Segoe UI", sans-serif !important;
    font-size: 0.77rem !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body[data-page="channels"] .channels-member-top-row .cf-role-tag,
body[data-page="channels"] .channels-member-top-row .cf-role-tag-developer,
body[data-page="channels"] .channels-member-top-row .cf-role-tag-support,
body[data-page="channels"] .channels-member-top-row .cf-role-tag-tester {
    padding: 0.16rem 0.38rem !important;
    min-height: 1rem !important;
    font-size: 0.52rem !important;
    line-height: 1 !important;
}

body[data-page="channels"] .channels-member-status {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif !important;
    font-size: 0.63rem !important;
    line-height: 1.18 !important;
    color: rgba(255, 255, 255, 0.64) !important;
}

body[data-page="channels"] .channels-member-handle,
body[data-page="channels"] .channels-member-meta,
body[data-page="channels"] .channels-member-chip {
    display: none !important;
}

body[data-page="channels"] .channels-member-menu-btn {
    position: static !important;
    align-self: center !important;
    justify-self: end !important;
    width: 1.42rem !important;
    height: 1.42rem !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 0.78rem !important;
}

body[data-page="channels"] .group-chat-toggle-btn {
    width: calc(100% - 1rem);
    height: 34px;
    margin: 0.18rem auto 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.075);
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

body[data-page="channels"] .group-chat-toggle-btn.hidden {
    display: none !important;
}

body[data-page="channels"] .group-chat-toggle-btn.is-open,
body[data-page="channels"] .group-chat-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.94);
    color: rgba(11, 16, 22, 0.94);
}

body[data-page="channels"] #group-chat-panel {
    margin: 0.1rem 0.42rem 0 !important;
    padding: 0.86rem !important;
    border-radius: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

body[data-page="channels"] #group-chat-panel.hidden {
    display: none !important;
}

body[data-page="channels"] #room-actions-island.hidden {
    display: none !important;
}

body[data-page="channels"] .channels-self-panel,
body[data-page="channels"] .channels-self-card,
body[data-page="channels"] #channels-self-card {
    position: relative !important;
    overflow: visible !important;
}

body[data-page="channels"] .channels-self-panel {
    padding-top: 1.35rem !important;
}

body[data-page="channels"] .channels-self-role-float {
    position: absolute;
    left: 0.78rem;
    top: -1.18rem;
    z-index: 4;
    pointer-events: none;
}

body[data-page="channels"] .channels-self-role-float .cf-role-tag,
body[data-page="channels"] .channels-self-role-float .cf-role-tag-developer,
body[data-page="channels"] .channels-self-role-float .cf-role-tag-support,
body[data-page="channels"] .channels-self-role-float .cf-role-tag-tester {
    min-height: 1.24rem !important;
    padding: 0.24rem 0.62rem !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

@media (max-width: 1023px) {

    body[data-page="channels"] #channel-sidebar,
    body[data-page="channels"] #admin-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }
}

/* --- Left rail compact cards + friends workspace spacing --- */
body[data-page="channels"] #channel-sidebar .channels-utility-panel {
    padding: 0.82rem 0.4rem 0.74rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body[data-page="channels"] #channel-sidebar .channels-mission-panel,
body[data-page="channels"] #channel-sidebar .channels-mission-panel .grid {
    padding: 0 !important;
    margin: 0 !important;
}

body[data-page="channels"] #channel-sidebar .cf-liquid-switcher {
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-page="channels"] #channel-sidebar .cf-liquid-switcher-option,
body[data-page="channels"] #channel-sidebar .sidebar-mode-btn {
    min-height: 38px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="channels"] #channel-sidebar .sidebar-mode-btn.is-active,
body[data-page="channels"] #channel-sidebar .sidebar-mode-btn:hover {
    background: rgba(255, 255, 255, 0.09) !important;
}

body[data-page="channels"] .channels-browser-panel {
    padding: 0.54rem 0.12rem 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-browser-panel>.flex:first-child,
body[data-page="channels"] #joined-channel-subheading,
body[data-page="channels"] #joined-channel-heading,
body[data-page="channels"] #joined-channel-count {
    display: none !important;
}

body[data-page="channels"] #joined-channel-list {
    gap: 0.34rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

body[data-page="channels"] #joined-channel-empty {
    margin: 0.35rem 0.5rem !important;
    padding: 0 !important;
}

body[data-page="channels"] .channels-conversation-card {
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible !important;
}

body[data-page="channels"] .channels-conversation-card:hover,
body[data-page="channels"] .channels-conversation-card.is-active {
    background: rgba(255, 255, 255, 0.075) !important;
    transform: none !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-conversation-card.is-unread {
    background: rgba(255, 255, 255, 0.055) !important;
}

body[data-page="channels"] .channels-conversation-card::before,
body[data-page="channels"] .channels-conversation-card::after {
    display: none !important;
}

body[data-page="channels"] .channels-conversation-button {
    min-height: 40px !important;
    height: 40px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 0.54rem !important;
    align-items: center !important;
    padding: 0.22rem 0.42rem !important;
    border-radius: 999px !important;
}

body[data-page="channels"] .channels-conversation-avatar,
body[data-page="channels"] .channels-conversation-avatar-channel {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-conversation-meta {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

body[data-page="channels"] .channels-conversation-title-row {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.28rem !important;
    flex-wrap: nowrap !important;
}

body[data-page="channels"] .channels-conversation-title {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

body[data-page="channels"] .channels-conversation-secondary,
body[data-page="channels"] .channels-conversation-meta-line,
body[data-page="channels"] .channels-unread-badge,
body[data-page="channels"] .conversation-kind-chip,
body[data-page="channels"] .channels-conversation-meta-note,
body[data-page="channels"] .channels-favorite-btn {
    display: none !important;
}

body[data-page="channels"] .channels-conversation-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    min-height: 1rem;
    padding: 0 0.42rem;
    border-radius: 999px;
    background: rgba(255, 77, 109, 0.14);
    border: 1px solid rgba(255, 77, 109, 0.22);
    color: rgba(255, 174, 190, 0.96);
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif;
    font-size: 0.52rem;
    font-weight: 800;
    line-height: 1;
}

body[data-page="channels"] .channels-conversation-live-tag span {
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 999px;
    background: currentColor;
}

body[data-page="channels"] .channels-conversation-title-row .spotify-live-indicator {
    flex: 0 0 auto !important;
    transform: scale(0.86) !important;
    transform-origin: left center !important;
}

body[data-page="channels"] .friends-workspace {
    padding: 7rem 1.5rem 1.45rem !important;
}

body[data-page="channels"] .friends-workspace-shell {
    padding: 0.85rem 0.9rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="channels"] .friends-workspace-header {
    margin: 0 0.18rem 0.55rem !important;
}

body[data-page="channels"] .friends-workspace-tabs {
    margin: 0 0.18rem 0.2rem !important;
}

body[data-page="channels"] .friends-workspace-status {
    margin: 0 0.22rem 0.45rem !important;
}

body[data-page="channels"] .friends-workspace-list {
    padding: 0.15rem 0.18rem 0.35rem !important;
}

body[data-page="channels"] .friends-workspace-empty {
    margin: 0 !important;
    padding: 1.15rem 1.25rem !important;
    border-radius: 1.05rem !important;
}

@media (max-width: 860px) {
    body[data-page="channels"] .friends-workspace {
        padding: 7.4rem 1rem 1rem !important;
    }
}

/* --- Hard boxless left rail cleanup --- */
body[data-page="channels"] #channel-sidebar .channels-left-main,
body[data-page="channels"] #channel-sidebar .channels-panel,
body[data-page="channels"] #channel-sidebar .channels-utility-panel,
body[data-page="channels"] #channel-sidebar .channels-browser-panel,
body[data-page="channels"] #channel-sidebar .channels-self-panel,
body[data-page="channels"] #channel-sidebar .channels-mission-panel,
body[data-page="channels"] #channel-sidebar #joined-channel-list,
body[data-page="channels"] #channel-sidebar #channels-self-card,
body[data-page="channels"] #channel-sidebar .channels-self-card {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-left-main {
    gap: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-utility-panel {
    padding: 0.82rem 0.18rem 0.74rem !important;
    margin: 0 0 0.48rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.105) !important;
}

body[data-page="channels"] #channel-sidebar .channels-browser-panel {
    padding: 0 !important;
    margin: 0 !important;
}

body[data-page="channels"] #channel-sidebar #joined-channel-list {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.28rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-panel {
    padding: 1.35rem 0.18rem 0 !important;
    margin: 0.55rem 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.085) !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card,
body[data-page="channels"] #channel-sidebar .channels-conversation-card:hover,
body[data-page="channels"] #channel-sidebar .channels-conversation-card.is-unread {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card.is-active {
    background:
        linear-gradient(90deg, rgba(88, 153, 255, 0.34), rgba(28, 91, 214, 0.72)) !important;
    border: 0 !important;
    box-shadow: none !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-card-pill {
    min-height: 42px !important;
    padding: 0.34rem 0.44rem !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-card-pill:hover,
body[data-page="channels"] #channel-sidebar .channels-self-card-pill:focus-visible {
    background: rgba(255, 255, 255, 0.06) !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-card-pill::before,
body[data-page="channels"] #channel-sidebar .channels-self-card-pill::after,
body[data-page="channels"] #channel-sidebar .channels-conversation-card::before,
body[data-page="channels"] #channel-sidebar .channels-conversation-card::after {
    display: none !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-role-float {
    left: 0.42rem !important;
}

/* --- No-box left rail correction --- */
body[data-page="channels"] #channel-sidebar,
body[data-page="channels"] #admin-sidebar,
body[data-page="channels"] .channels-center-shell,
body[data-page="channels"] .chat-stage {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

body[data-page="channels"] #channel-sidebar .channels-left-main,
body[data-page="channels"] #channel-sidebar .channels-panel,
body[data-page="channels"] #channel-sidebar .channels-utility-panel,
body[data-page="channels"] #channel-sidebar .channels-browser-panel,
body[data-page="channels"] #channel-sidebar .channels-self-panel,
body[data-page="channels"] #channel-sidebar .channels-mission-panel,
body[data-page="channels"] #channel-sidebar .channels-mission-panel>.grid,
body[data-page="channels"] #channel-sidebar .channels-mission-panel>.grid>div,
body[data-page="channels"] #channel-sidebar #joined-channel-list,
body[data-page="channels"] #channel-sidebar .channels-self-card,
body[data-page="channels"] #channel-sidebar #channels-self-card {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-utility-panel {
    padding: 0.82rem 0.18rem 0.62rem !important;
    margin: 0 0 0.42rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-browser-panel {
    padding: 0 !important;
    margin: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-panel {
    padding: 0.5rem 0.18rem 0 !important;
    margin: 0.55rem 0 0 !important;
}

body[data-page="channels"] #channel-sidebar .cf-liquid-nav-button,
body[data-page="channels"] #channel-sidebar .sidebar-mode-btn {
    box-shadow: none !important;
}

body[data-page="channels"] #channel-sidebar .cf-liquid-switcher,
body[data-page="channels"] #channel-sidebar .cf-liquid-switcher:hover {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body[data-page="channels"] #channel-sidebar .sidebar-mode-btn,
body[data-page="channels"] #channel-sidebar .sidebar-mode-btn:hover,
body[data-page="channels"] #channel-sidebar .sidebar-mode-btn.is-active {
    background: none !important;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.68) !important;
}

body[data-page="channels"] #channel-sidebar .sidebar-mode-btn.is-active {
    color: rgba(255, 255, 255, 0.92) !important;
}

body[data-page="channels"] #channel-sidebar #joined-channel-list {
    gap: 0.18rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card,
body[data-page="channels"] #channel-sidebar .channels-conversation-card:hover,
body[data-page="channels"] #channel-sidebar .channels-conversation-card.is-unread {
    min-height: 36px !important;
    max-height: 36px !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card:hover .channels-conversation-title {
    color: rgba(255, 255, 255, 0.92) !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card.is-active {
    background:
        linear-gradient(90deg, var(--conversation-start, #4f5d89), var(--conversation-end, #1e2940)) !important;
    box-shadow: none !important;
    filter: saturate(1.22) brightness(1.02) !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-button {
    min-height: 36px !important;
    height: 36px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 0.48rem !important;
    padding: 0.18rem 0.38rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-avatar,
body[data-page="channels"] #channel-sidebar .channels-conversation-avatar-channel {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-title {
    font-family: "Quicksand", "Trebuchet MS", sans-serif !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    letter-spacing: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card.is-active .channels-conversation-title {
    color: rgba(255, 255, 255, 0.98) !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-role-float,
body[data-page="channels"] #channel-sidebar .channels-self-name-row .cf-role-tag,
body[data-page="channels"] #channel-sidebar .channels-self-name-row .cf-role-tag-developer,
body[data-page="channels"] #channel-sidebar .channels-self-name-row .cf-role-tag-support,
body[data-page="channels"] #channel-sidebar .channels-self-name-row .cf-role-tag-tester {
    display: none !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-card-pill {
    min-height: 44px !important;
    padding: 0.42rem 0.62rem !important;
    border-radius: 999px !important;
    border: 0 !important;
    background:
        linear-gradient(90deg, var(--self-card-start, #4f5d89), var(--self-card-end, #1e2940)) !important;
    box-shadow: none !important;
    filter: saturate(1.22) brightness(1.03) !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-card-pill:hover,
body[data-page="channels"] #channel-sidebar .channels-self-card-pill:focus-visible {
    background:
        linear-gradient(90deg, var(--self-card-start, #4f5d89), var(--self-card-end, #1e2940)) !important;
}

/* --- CometFare creature-state final pass: keep the identity layer authoritative --- */
body[data-page="channels"] {
    --cf-phase-glow: rgba(246, 220, 116, 0.78);
    --cf-card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028));
    --cf-card-surface-active: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.044));
    background: #000 !important;
}

body[data-page="channels"]::before {
    content: "" !important;
    position: fixed !important;
    inset: auto -10vw 0 !important;
    height: 42vh !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(ellipse at 30% 100%, rgba(255, 219, 91, 0.18), transparent 58%),
        radial-gradient(ellipse at 68% 100%, rgba(160, 116, 255, 0.18), transparent 60%),
        radial-gradient(ellipse at 52% 108%, rgba(83, 228, 132, 0.08), transparent 52%) !important;
}

body[data-page="channels"] #channel-sidebar,
body[data-page="channels"] .channels-center-shell,
body[data-page="channels"] .chat-stage,
body[data-page="channels"] .channels-right-sidebar,
body[data-page="channels"] #room-member-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

body[data-page="channels"] #channel-sidebar {
    width: 302px !important;
    min-width: 302px !important;
    flex-basis: 302px !important;
}

body[data-page="channels"] .composer-shell,
body[data-page="channels"] .channels-context-bar,
body[data-page="channels"] .channels-panel {
    border-color: transparent !important;
}

body[data-page="channels"] .channels-conversation-card,
body[data-page="channels"] .channels-member-card,
body[data-page="channels"] .channels-self-card-pill {
    position: relative !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: var(--cf-card-surface) !important;
    box-shadow:
        inset 4px 0 0 var(--cf-phase-glow),
        0 12px 28px rgba(0, 0, 0, 0.22),
        0 0 20px rgba(246, 220, 116, 0.08) !important;
    overflow: hidden !important;
    filter: none !important;
}

body[data-page="channels"] .channels-conversation-card:hover,
body[data-page="channels"] .channels-conversation-card:focus-within,
body[data-page="channels"] .channels-conversation-card.is-active,
body[data-page="channels"] .channels-member-card:hover,
body[data-page="channels"] .channels-member-card.is-active,
body[data-page="channels"] .channels-self-card-pill:hover,
body[data-page="channels"] .channels-self-card-pill:focus-visible {
    background: var(--cf-card-surface-active) !important;
    box-shadow:
        inset 4px 0 0 var(--cf-phase-glow),
        0 14px 30px rgba(0, 0, 0, 0.26),
        0 0 24px rgba(160, 116, 255, 0.1) !important;
}

body[data-page="channels"] #joined-channel-list {
    gap: 0.4rem !important;
    padding: 0 0.34rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card {
    min-height: 56px !important;
    max-height: none !important;
    margin: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-button {
    min-height: 56px !important;
    height: auto !important;
    grid-template-columns: 39px minmax(0, 1fr) !important;
    gap: 0.62rem !important;
    padding: 0.48rem 0.62rem 0.48rem 0.72rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-avatar,
body[data-page="channels"] #channel-sidebar .channels-conversation-avatar-channel {
    width: 39px !important;
    height: 39px !important;
    flex-basis: 39px !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-title,
body[data-page="channels"] .channels-member-name,
body[data-page="channels"] .channels-self-name {
    font-family: "Quicksand", "Nunito", sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
}

body[data-page="channels"] .channels-conversation-title-row,
body[data-page="channels"] .channels-member-name-row,
body[data-page="channels"] .channels-self-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.32rem !important;
    min-width: 0 !important;
}

body[data-page="channels"] .channels-conversation-subtitle,
body[data-page="channels"] .channels-member-handle,
body[data-page="channels"] .channels-member-status,
body[data-page="channels"] .channels-self-meta {
    color: rgba(255, 255, 255, 0.54) !important;
    font-size: 0.68rem !important;
}

body[data-page="channels"] .channels-right-sidebar {
    width: 286px !important;
    min-width: 286px !important;
    flex-basis: 286px !important;
}

body[data-page="channels"] .channels-member-search-panel {
    padding: 0.45rem 0.28rem !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body[data-page="channels"] .channels-member-search-panel input,
body[data-page="channels"] #room-member-search {
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
}

body[data-page="channels"] #room-member-list {
    gap: 0.36rem !important;
    padding: 0 0.26rem !important;
}

body[data-page="channels"] .channels-member-card {
    min-height: 48px !important;
    padding: 0 !important;
}

body[data-page="channels"] .channels-member-card-body {
    min-height: 48px !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 0.56rem !important;
    padding: 0.42rem 0.52rem 0.42rem 0.68rem !important;
}

body[data-page="channels"] .channels-member-avatar {
    width: 34px !important;
    height: 34px !important;
}

body[data-page="channels"] #channels-self-card,
body[data-page="channels"] .channels-self-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0.58rem 0.34rem 0 !important;
}

body[data-page="channels"] .channels-self-card-pill {
    min-height: 58px !important;
    padding: 0.52rem 0.7rem !important;
    border-radius: 15px !important;
}

body[data-page="channels"] .channels-self-expanded {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 0.48rem !important;
    padding-bottom: 0.48rem !important;
}

body[data-page="channels"] .cf-friends-nav-button {
    justify-content: flex-start !important;
    border: 0 !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        inset 4px 0 14px rgba(255, 219, 91, 0.16),
        inset -4px 0 14px rgba(164, 118, 255, 0.15),
        inset 0 -8px 18px rgba(82, 227, 125, 0.08) !important;
}

body[data-page="channels"] .developer-tag[data-role="voyager"],
body[data-page="channels"] .premium-chip-plus {
    border-color: transparent !important;
}

/* CometFare creature-state redesign overrides */
body[data-page="channels"] {
    font-family: "Quicksand", "Trebuchet MS", sans-serif !important;
    background: #000 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body[data-page="channels"]::before {
    content: "";
    position: fixed;
    inset: auto -10vw 0 -10vw;
    height: min(46vh, 430px);
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(45% 72% at 28% 100%, rgba(255, 225, 107, 0.16), transparent 72%),
        radial-gradient(46% 76% at 68% 100%, rgba(136, 93, 255, 0.2), transparent 74%),
        radial-gradient(28% 52% at 52% 100%, rgba(70, 238, 140, 0.105), transparent 72%);
    filter: blur(8px);
}

body[data-page="channels"] .ambient-shell,
body[data-page="channels"] .chat-background-overlay {
    display: none !important;
}

body[data-page="channels"] #chat-view,
body[data-page="channels"] #channels-shell,
body[data-page="channels"] #channel-sidebar,
body[data-page="channels"] .channels-left-main,
body[data-page="channels"] .channels-center-shell,
body[data-page="channels"] .chat-stage,
body[data-page="channels"] #chat-messages,
body[data-page="channels"] #admin-sidebar,
body[data-page="channels"] #room-member-panel,
body[data-page="channels"] .channels-panel,
body[data-page="channels"] .admin-sidebar-panel {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body[data-page="channels"] #chat-view {
    position: relative !important;
    isolation: isolate !important;
}

body[data-page="channels"] #chat-view::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(60% 90% at 24% 100%, rgba(255, 217, 95, 0.12), transparent 72%),
        radial-gradient(62% 94% at 74% 100%, rgba(149, 111, 255, 0.16), transparent 74%),
        radial-gradient(28% 54% at 50% 100%, rgba(71, 240, 144, 0.09), transparent 72%);
}

body[data-page="channels"] #channel-dot,
body[data-page="channels"] #socket-status-dot,
body[data-page="channels"] .status-dot,
body[data-page="channels"] #context-open-friends-btn {
    display: none !important;
}

body[data-page="channels"] #channel-header-bar {
    gap: 0.6rem !important;
}

body[data-page="channels"] #channel-header-bar>div {
    border-radius: 16px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

body[data-page="channels"] #channel-header-bar button {
    border-radius: 12px !important;
}

body[data-page="channels"] #admin-sidebar.hidden,
body[data-page="channels"] .channels-right-sidebar.hidden {
    display: none !important;
}

body[data-page="channels"] #admin-sidebar {
    width: 286px !important;
    min-width: 286px !important;
    flex-basis: 286px !important;
    padding: 0.85rem !important;
}

body[data-page="channels"] .channels-member-search-panel {
    padding: 0.45rem 0.35rem 0.35rem !important;
}

body[data-page="channels"] #room-member-search,
body[data-page="channels"] .channels-sidebar-search {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

body[data-page="channels"] #channel-sidebar .channels-nav-primary-row {
    grid-template-columns: 36px minmax(0, 1fr) !important;
}

body[data-page="channels"] #channel-sidebar .cf-friends-nav-button {
    justify-content: flex-start !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 0 !important;
    box-shadow:
        inset 1px 0 0 rgba(255, 229, 112, 0.36),
        inset 0 1px 0 rgba(155, 114, 255, 0.22),
        inset 0 -1px 0 rgba(72, 241, 151, 0.18) !important;
    padding-inline: 0.8rem !important;
}

body[data-page="channels"] #channel-sidebar #joined-channel-list {
    gap: 0.32rem !important;
    padding: 0 0.2rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card,
body[data-page="channels"] .channels-member-card,
body[data-page="channels"] #channel-sidebar .channels-self-card-pill,
body[data-page="channels"] .friends-workspace-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow:
        inset 3px 0 0 var(--cf-phase-glow, rgba(216, 200, 255, 0.72)),
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        0 10px 22px rgba(0, 0, 0, 0.2) !important;
    filter: none !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card::after,
body[data-page="channels"] .channels-member-card::after,
body[data-page="channels"] #channel-sidebar .channels-self-card-pill::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 42px;
    pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--cf-phase-glow, #d8c8ff) 28%, transparent), transparent);
    opacity: 0.56;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card {
    min-height: 50px !important;
    max-height: none !important;
    margin: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card.is-active {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--conversation-start, #4f5d89) 22%, rgba(255, 255, 255, 0.055)), rgba(255, 255, 255, 0.07)) !important;
    box-shadow:
        inset 3px 0 0 var(--cf-phase-glow, rgba(255, 225, 107, 0.82)),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 12px 26px rgba(0, 0, 0, 0.25) !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-button {
    height: auto !important;
    min-height: 50px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 0.58rem !important;
    padding: 0.46rem 0.58rem !important;
    align-items: center !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-avatar,
body[data-page="channels"] #channel-sidebar .channels-conversation-avatar-channel,
body[data-page="channels"] .friends-workspace-avatar {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 12px !important;
}

body[data-page="channels"] .channels-conversation-title,
body[data-page="channels"] .channels-member-name,
body[data-page="channels"] .channels-self-name,
body[data-page="channels"] .profile-popover-name,
body[data-page="channels"] .message-author-button,
body[data-page="channels"] .friends-workspace-card-name {
    font-family: "Quicksand", "Trebuchet MS", sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

body[data-page="channels"] .channels-conversation-title,
body[data-page="channels"] .channels-member-name,
body[data-page="channels"] .channels-self-name,
body[data-page="channels"] .friends-workspace-card-name {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.32rem !important;
    min-width: 0 !important;
}

body[data-page="channels"] .channels-conversation-subtitle {
    margin-top: 0.18rem !important;
    font-size: 0.64rem !important;
    line-height: 1.1 !important;
    color: rgba(255, 255, 255, 0.42) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="channels"] .channels-member-card {
    margin: 0 !important;
    min-height: 48px !important;
}

body[data-page="channels"] .channels-member-card-body {
    padding: 0.44rem 0.54rem !important;
    gap: 0.58rem !important;
}

body[data-page="channels"] .channels-member-status {
    font-size: 0.66rem !important;
    color: rgba(255, 255, 255, 0.42) !important;
}

body[data-page="channels"] .channels-member-avatar,
body[data-page="channels"] .avatar-pill.channels-member-avatar {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 12px !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-panel {
    padding: 0.5rem 0.2rem 0 !important;
    margin: 0.48rem 0 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-card-pill {
    min-height: 58px !important;
    padding: 0 !important;
}

body[data-page="channels"] .channels-self-expanded {
    border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
    padding: 0.55rem 0.62rem 0.5rem !important;
}

body[data-page="channels"] .channels-self-expanded-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.55rem !important;
}

body[data-page="channels"] .channels-self-expanded-copy {
    display: grid !important;
    min-width: 0 !important;
}

body[data-page="channels"] .channels-self-expanded-kicker {
    font-size: 0.55rem !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.38) !important;
    letter-spacing: 0.12em !important;
}

body[data-page="channels"] .channels-self-expanded-title,
body[data-page="channels"] .channels-self-expanded-time {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 700 !important;
}

body[data-page="channels"] .channels-self-expanded-action,
body[data-page="channels"] .channels-self-voice-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    display: inline-grid !important;
    place-items: center !important;
}

body[data-page="channels"] .channels-self-profile-button {
    min-height: 58px !important;
    padding: 0.55rem 0.62rem !important;
    gap: 0.58rem !important;
}

body[data-page="channels"] .channels-self-avatar {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
}

body[data-page="channels"] .cf-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.42rem !important;
    min-height: 30px !important;
    padding: 0.18rem 0.64rem 0.18rem 0.22rem !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #07070a !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

body[data-page="channels"] .cf-status-icon-circle {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07) !important;
    vertical-align: middle !important;
}

body[data-page="channels"] .cf-card-status-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
}

body[data-page="channels"] .cf-status-icon-img,
body[data-page="channels"] .cf-state-icon-img {
    width: 70% !important;
    height: 70% !important;
    object-fit: contain !important;
}

body[data-page="channels"] .cf-time-state-icon {
    width: 15px !important;
    height: 15px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
}

body[data-page="channels"] .cf-avatar-badge {
    position: absolute !important;
    left: -3px !important;
    bottom: -3px !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    display: inline-grid !important;
    place-items: center !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.26) !important;
}

body[data-page="channels"] .cf-avatar-badge .cf-time-state-icon {
    width: 12px !important;
    height: 12px !important;
}

body[data-page="channels"] .spotify-live-indicator-icon,
body[data-page="channels"] .spotify-live-indicator-tooltip-logo {
    background: transparent !important;
    color: #52e37d !important;
    border: 0 !important;
    box-shadow: none !important;
}

body[data-page="channels"] .cf-music-icon {
    width: 16px !important;
    height: 16px !important;
    color: #52e37d !important;
}

body[data-page="channels"] .message-action-btn,
body[data-page="channels"] .channels-member-menu-btn,
body[data-page="channels"] .friends-workspace-menu-btn {
    display: inline-grid !important;
    place-items: center !important;
    text-align: center !important;
}

body[data-page="channels"] .message-action-btn svg,
body[data-page="channels"] .channels-member-menu-btn svg,
body[data-page="channels"] .friends-workspace-menu-btn svg {
    display: block !important;
}

body[data-page="channels"] .profile-presence-chip {
    border-radius: 999px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body[data-page="channels"] .cf-presence-time-chip {
    padding-inline: 0.45rem !important;
}

body[data-page="channels"] .soft-orb {
    display: none !important;
}

/* --- End-of-file override guard: chat request pass --- */
body[data-page="channels"] {
    --cf-left-column-bg: #101318;
    --cf-middle-column-bg: #12171d;
    --cf-right-column-bg: #151b22;
    --cf-column-border: rgba(229, 236, 248, 0.115);
}

body[data-page="channels"] #channel-sidebar,
body[data-page="channels"] .channels-left-main {
    background: var(--cf-left-column-bg) !important;
    border-right: 1px solid var(--cf-column-border) !important;
}

body[data-page="channels"] .channels-center-shell,
body[data-page="channels"] .chat-stage,
body[data-page="channels"] #chat-messages {
    background: var(--cf-middle-column-bg) !important;
}

body[data-page="channels"] #admin-sidebar,
body[data-page="channels"] #room-member-panel,
body[data-page="channels"] .channels-members-shell {
    background: var(--cf-right-column-bg) !important;
    border-left: 1px solid var(--cf-column-border) !important;
}

body[data-page="channels"] .chat-stage {
    border-left: 1px solid rgba(229, 236, 248, 0.07) !important;
    border-right: 1px solid rgba(229, 236, 248, 0.07) !important;
}

body[data-page="channels"] #channel-sidebar .channels-nav-primary-row {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 0.44rem !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button,
body[data-page="channels"] #channel-sidebar .cf-friends-nav-button {
    height: 36px !important;
    min-height: 36px !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button {
    width: 36px !important;
    min-width: 36px !important;
}

body[data-page="channels"] #channel-sidebar .cf-friends-nav-button {
    padding: 0 18px !important;
    font-size: 0.68rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card {
    margin: 0.1rem 0.38rem !important;
}

body[data-page="channels"] .message-shell.is-pending .message-text,
body[data-page="channels"] .message-shell.is-pending .message-plain,
body[data-page="channels"] .message-plain-pending,
body[data-page="channels"] .message-bubble-pending .message-text {
    color: rgba(188, 197, 210, 0.62) !important;
}

body[data-page="channels"] .message-shell.is-pending {
    opacity: 0.78 !important;
}

body[data-page="channels"] .cf-call-control.cf-call-control-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-grid !important;
    place-items: center !important;
}

body[data-page="channels"] .cf-call-control.cf-call-control-icon.is-active {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #05070a !important;
}

body[data-page="channels"] .cf-call-surface.is-audio-only .cf-call-grid {
    gap: clamp(8px, 1.4vw, 14px) !important;
}

body[data-page="channels"] .cf-call-surface.is-video-mode .cf-call-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
}

body[data-page="channels"] .cf-call-surface.is-video-mode .cf-call-participant {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
}

body[data-page="channels"] .cf-call-video-slot,
body[data-page="channels"] .cf-call-video-slot>div,
body[data-page="channels"] .cf-call-video-slot video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

body[data-page="channels"] .cf-call-grid.has-focus {
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)) !important;
    align-content: start !important;
}

body[data-page="channels"] .cf-call-grid.has-focus .cf-call-participant.is-focused {
    grid-column: 1 / -1 !important;
    min-height: min(72vh, 80%) !important;
    aspect-ratio: 16 / 9 !important;
}

body[data-page="channels"] .cf-call-grid.has-focus .cf-call-participant:not(.is-focused) {
    min-height: 88px !important;
    max-height: 128px !important;
    aspect-ratio: 16 / 9 !important;
}

/* --- Final override order guard for the current chat pass --- */
body[data-page="channels"] #channel-sidebar,
body[data-page="channels"] .channels-left-main {
    background: var(--cf-left-column-bg, #101318) !important;
    border-right: 1px solid var(--cf-column-border, rgba(229, 236, 248, 0.115)) !important;
}

body[data-page="channels"] .channels-center-shell,
body[data-page="channels"] .chat-stage,
body[data-page="channels"] #chat-messages {
    background: var(--cf-middle-column-bg, #12171d) !important;
}

body[data-page="channels"] #admin-sidebar,
body[data-page="channels"] #room-member-panel,
body[data-page="channels"] .channels-members-shell {
    background: var(--cf-right-column-bg, #151b22) !important;
    border-left: 1px solid var(--cf-column-border, rgba(229, 236, 248, 0.115)) !important;
}

body[data-page="channels"] .chat-stage {
    border-left: 1px solid rgba(229, 236, 248, 0.07) !important;
    border-right: 1px solid rgba(229, 236, 248, 0.07) !important;
}

body[data-page="channels"] #channel-sidebar .channels-nav-primary-row {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 0.44rem !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button,
body[data-page="channels"] #channel-sidebar .cf-friends-nav-button {
    height: 36px !important;
    min-height: 36px !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button {
    width: 36px !important;
    min-width: 36px !important;
}

body[data-page="channels"] #channel-sidebar .cf-friends-nav-button {
    padding: 0 18px !important;
    font-size: 0.68rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card {
    margin: 0.1rem 0.38rem !important;
}

body[data-page="channels"] .cf-call-control.cf-call-control-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

body[data-page="channels"] .cf-call-surface.is-video-mode .cf-call-participant {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
}

body[data-page="channels"] .cf-call-video-slot,
body[data-page="channels"] .cf-call-video-slot>div,
body[data-page="channels"] .cf-call-video-slot video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

body[data-page="channels"] .cf-call-grid.has-focus .cf-call-participant.is-focused {
    grid-column: 1 / -1 !important;
    min-height: min(72vh, 80%) !important;
}

/* --- Current chat/call polish pass --- */
body[data-page="channels"] {
    --cf-left-column-bg: #101318;
    --cf-middle-column-bg: #12171d;
    --cf-right-column-bg: #151b22;
    --cf-column-border: rgba(229, 236, 248, 0.115);
}

body[data-page="channels"] #channels-shell {
    background: transparent !important;
    border-top: 1px solid var(--cf-column-border) !important;
}

body[data-page="channels"] #channel-sidebar,
body[data-page="channels"] .channels-left-main {
    background: var(--cf-left-column-bg) !important;
}

body[data-page="channels"] .channels-center-shell,
body[data-page="channels"] .chat-stage,
body[data-page="channels"] #chat-messages {
    background: var(--cf-middle-column-bg) !important;
}

body[data-page="channels"] #admin-sidebar,
body[data-page="channels"] #room-member-panel,
body[data-page="channels"] .channels-members-shell {
    background: var(--cf-right-column-bg) !important;
}

body[data-page="channels"] #channel-sidebar {
    border-right: 1px solid var(--cf-column-border) !important;
}

body[data-page="channels"] #admin-sidebar,
body[data-page="channels"] #room-member-panel {
    border-left: 1px solid var(--cf-column-border) !important;
}

body[data-page="channels"] .chat-stage {
    border-left: 1px solid rgba(229, 236, 248, 0.07) !important;
    border-right: 1px solid rgba(229, 236, 248, 0.07) !important;
}

body[data-page="channels"] .channels-context-bar,
body[data-page="channels"] .composer-shell {
    border-color: var(--cf-column-border) !important;
}

body[data-page="channels"] #channel-sidebar .channels-nav-cluster {
    gap: 0.34rem !important;
    padding-inline: 0.34rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-nav-primary-row {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 0.44rem !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
}

body[data-page="channels"] #channel-sidebar .cf-friends-nav-button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 18px !important;
    font-size: 0.68rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card {
    margin: 0.1rem 0.38rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card:not(.is-active):hover,
body[data-page="channels"] #channel-sidebar .channels-conversation-card:not(.is-active):focus-within {
    background: rgba(255, 255, 255, 0.09) !important;
}

body[data-page="channels"] .message-shell.is-pending .message-text,
body[data-page="channels"] .message-shell.is-pending .message-plain,
body[data-page="channels"] .message-plain-pending,
body[data-page="channels"] .message-bubble-pending .message-text {
    color: rgba(188, 197, 210, 0.62) !important;
}

body[data-page="channels"] .message-shell.is-pending {
    opacity: 0.78 !important;
}

body[data-page="channels"] .composer-attachment-preview {
    display: grid !important;
    gap: 0.42rem !important;
    margin: 0.5rem auto 0 !important;
    max-width: 980px !important;
    width: 100% !important;
}

body[data-page="channels"] .composer-attachment-preview.hidden {
    display: none !important;
}

body[data-page="channels"] .composer-attachment-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.42rem !important;
    align-items: center !important;
}

body[data-page="channels"] .composer-attachment-pill {
    min-width: 0 !important;
    max-width: min(240px, 100%) !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.38rem !important;
    border-radius: 999px !important;
    padding: 0 0.34rem 0 0.72rem !important;
    border: 1px solid rgba(230, 238, 250, 0.13) !important;
    background: linear-gradient(135deg, rgba(70, 94, 120, 0.42), rgba(31, 42, 58, 0.78)) !important;
    color: rgba(255, 255, 255, 0.84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body[data-page="channels"] .composer-attachment-pill.is-uploading {
    color: rgba(214, 224, 240, 0.68) !important;
}

body[data-page="channels"] .composer-attachment-pill.is-failed {
    border-color: rgba(255, 96, 112, 0.28) !important;
    background: linear-gradient(135deg, rgba(100, 34, 44, 0.5), rgba(36, 20, 28, 0.82)) !important;
}

body[data-page="channels"] .composer-attachment-pill-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

body[data-page="channels"] .composer-attachment-pill-size,
body[data-page="channels"] .composer-attachment-summary {
    font-size: 0.62rem !important;
    color: rgba(255, 255, 255, 0.42) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

body[data-page="channels"] .composer-attachment-pill-remove {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.13) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1 !important;
    font-size: 0.78rem !important;
}

body[data-page="channels"] .composer-attachment-pill-remove:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #05070a !important;
}

body[data-page="channels"] .composer-attachment-pill-spinner {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.18) !important;
    border-top-color: rgba(255, 255, 255, 0.78) !important;
    animation: cfSpin 0.85s linear infinite !important;
}

@keyframes cfSpin {
    to {
        transform: rotate(360deg);
    }
}

body[data-page="channels"] .message-media-grid {
    display: grid !important;
    gap: 0.42rem !important;
    max-width: min(620px, 88vw) !important;
    width: fit-content !important;
}

body[data-page="channels"] .message-media-grid[data-media-count="2"] {
    grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
}

body[data-page="channels"] .message-media-grid[data-media-count="3"],
body[data-page="channels"] .message-media-grid[data-media-count="4"] {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
}

body[data-page="channels"] .message-media-grid[data-media-count="5"],
body[data-page="channels"] .message-media-grid[data-media-count="6"],
body[data-page="channels"] .message-media-grid[data-media-count="7"],
body[data-page="channels"] .message-media-grid[data-media-count="8"],
body[data-page="channels"] .message-media-grid[data-media-count="9"],
body[data-page="channels"] .message-media-grid[data-media-count="10"] {
    grid-template-columns: repeat(3, minmax(118px, 1fr)) !important;
}

body[data-page="channels"] .message-image-attachment.is-grid-item {
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
}

body[data-page="channels"] .message-image-attachment.is-grid-item.is-video,
body[data-page="channels"] .message-image-attachment.is-grid-item.is-audio {
    aspect-ratio: 16 / 10 !important;
}

body[data-page="channels"] .message-image-attachment.is-grid-item img,
body[data-page="channels"] .message-image-attachment.is-grid-item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body[data-page="channels"] .cf-call-controls {
    justify-content: center !important;
    gap: 0.7rem !important;
}

body[data-page="channels"] .cf-call-control.cf-call-control-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-grid !important;
    place-items: center !important;
}

body[data-page="channels"] .cf-call-control.cf-call-control-icon.is-active {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #05070a !important;
}

body[data-page="channels"] .cf-call-control-danger {
    background: rgba(210, 42, 62, 0.82) !important;
    color: #ffffff !important;
}

body[data-page="channels"] .cf-call-surface.is-audio-only .cf-call-grid {
    gap: clamp(8px, 1.4vw, 14px) !important;
}

body[data-page="channels"] .cf-call-surface.is-video-mode .cf-call-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    align-items: start !important;
}

body[data-page="channels"] .cf-call-surface.is-video-mode .cf-call-participant {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
}

body[data-page="channels"] .cf-call-video-slot,
body[data-page="channels"] .cf-call-video-slot>div,
body[data-page="channels"] .cf-call-video-slot video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

body[data-page="channels"] .cf-call-grid.has-focus {
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)) !important;
    align-content: start !important;
}

body[data-page="channels"] .cf-call-grid.has-focus .cf-call-participant.is-focused {
    grid-column: 1 / -1 !important;
    min-height: min(72vh, 80%) !important;
    aspect-ratio: 16 / 9 !important;
}

body[data-page="channels"] .cf-call-grid.has-focus .cf-call-participant:not(.is-focused) {
    min-height: 88px !important;
    max-height: 128px !important;
    aspect-ratio: 16 / 9 !important;
}

body[data-page="channels"] .cf-call-surface.is-audio-only .cf-call-grid.has-focus .cf-call-participant.is-focused {
    width: 128px !important;
    height: 128px !important;
    min-width: 128px !important;
    min-height: 128px !important;
}

body[data-page="channels"] .cf-call-surface.is-audio-only .cf-call-grid.has-focus .cf-call-participant:not(.is-focused) {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
}

body[data-page="channels"] .cf-call-surface.is-audio-only .cf-call-grid.has-focus .cf-call-participant:not(.is-focused) .cf-call-avatar,
body[data-page="channels"] .cf-call-surface.is-audio-only .cf-call-grid.has-focus .cf-call-participant:not(.is-focused) .cf-call-avatar-shell {
    width: 52px !important;
    height: 52px !important;
}

/* --- Call surface + top nav final pass --- */
body[data-page="channels"] #channel-sidebar .channels-nav-cluster {
    display: grid !important;
    gap: 0.56rem !important;
    padding-inline: 0.38rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-nav-primary-row {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 0.55rem !important;
    align-items: center !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button {
    position: relative !important;
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button .cf-home-icon {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    transition: opacity 0.16s ease, transform 0.16s ease !important;
    pointer-events: none !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button .cf-home-icon-raw {
    opacity: 1 !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button .cf-home-icon-hover {
    opacity: 0 !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button:hover .cf-home-icon-raw,
body[data-page="channels"] #channel-sidebar .cf-home-nav-button:focus-visible .cf-home-icon-raw {
    opacity: 0 !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button:hover .cf-home-icon-hover,
body[data-page="channels"] #channel-sidebar .cf-home-nav-button:focus-visible .cf-home-icon-hover {
    opacity: 1 !important;
}

body[data-page="channels"] #channel-sidebar .cf-home-nav-button:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.28) !important;
    outline-offset: 2px !important;
}

body[data-page="channels"] #channel-sidebar .cf-friends-nav-button {
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 24px !important;
    gap: 0.52rem !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body[data-page="channels"] #channel-sidebar .cf-friends-nav-button span {
    display: inline-block !important;
}

body[data-page="channels"] #channel-sidebar .channels-nav-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="channels"] .cf-call-surface {
    --call-top-safe: 76px;
    position: relative !important;
    z-index: 35 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 250px !important;
    max-height: none !important;
    margin: 60px 0 0 !important;
    padding: var(--call-top-safe) clamp(18px, 2.4vw, 28px) 18px !important;
    resize: none !important;
    overflow: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-page="channels"] .cf-call-surface.hidden {
    display: none !important;
}

body[data-page="channels"] .cf-call-surface.is-expanded {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    resize: none !important;
    overflow: hidden !important;
    background: #000 !important;
    z-index: 60 !important;
}

body[data-page="channels"] .cf-call-header,
body[data-page="channels"] .cf-call-controls,
body[data-page="channels"] .cf-call-header-actions {
    position: relative !important;
    z-index: 3 !important;
}

body[data-page="channels"] .cf-call-title {
    color: rgba(255, 255, 255, 0.94) !important;
}

body[data-page="channels"] .cf-call-eyebrow {
    color: rgba(255, 255, 255, 0.52) !important;
}

body[data-page="channels"] .cf-call-grid {
    position: relative !important;
    z-index: 2 !important;
    min-height: 0 !important;
    gap: 14px !important;
}

body[data-page="channels"] .cf-call-surface.is-audio-only .cf-call-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 3vw, 34px) !important;
}

body[data-page="channels"] .cf-call-surface.is-audio-only .cf-call-participant {
    width: 92px !important;
    min-width: 92px !important;
    height: 92px !important;
    min-height: 92px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body[data-page="channels"] .cf-call-surface.is-audio-only .cf-call-name {
    display: none !important;
}

body[data-page="channels"] .cf-call-surface.is-video-mode .cf-call-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    align-content: stretch !important;
}

body[data-page="channels"] .cf-call-surface.is-video-mode .cf-call-participant {
    min-height: 210px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #050505 !important;
    box-shadow: none !important;
}

body[data-page="channels"] .cf-call-video-slot {
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
}

body[data-page="channels"] .cf-call-video-slot:fullscreen,
body[data-page="channels"] .cf-call-participant:fullscreen {
    background: #000 !important;
}

body[data-page="channels"] .cf-call-avatar-shell {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 72px !important;
    height: 72px !important;
}

body[data-page="channels"] .cf-call-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

body[data-page="channels"] .cf-call-avatar-state {
    position: absolute !important;
    right: -5px !important;
    bottom: -5px !important;
    width: 27px !important;
    height: 27px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 3px solid #000 !important;
    background: #ef2438 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42) !important;
    z-index: 4 !important;
}

body[data-page="channels"] .cf-call-avatar-state.is-deafened {
    background: #d8162d !important;
}

body[data-page="channels"] .cf-call-avatar-state.cf-call-video-state {
    right: 12px !important;
    bottom: 12px !important;
}

body[data-page="channels"] .cf-call-participant.is-deafened {
    filter: none !important;
}

body[data-page="channels"] .cf-call-surface.is-audio-only .cf-call-participant.is-deafened .cf-call-avatar {
    filter: brightness(0.48) saturate(0.62) !important;
}

body[data-page="channels"] .cf-call-surface.is-video-mode .cf-call-participant.is-deafened::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.52) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body[data-page="channels"] .cf-call-fullscreen-btn,
body[data-page="channels"] .cf-call-name,
body[data-page="channels"] .cf-call-avatar-state {
    z-index: 5 !important;
}

body[data-page="channels"] .cf-call-fullscreen-btn {
    top: 12px !important;
    right: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(0, 0, 0, 0.72) !important;
    color: #fff !important;
}

@media (max-width: 760px) {
    body[data-page="channels"] .cf-call-surface {
        --call-top-safe: 70px;
        height: 46vh !important;
        min-height: 240px !important;
    }

    body[data-page="channels"] #channel-sidebar .channels-nav-primary-row {
        grid-template-columns: 52px minmax(0, 1fr) !important;
    }

    body[data-page="channels"] #channel-sidebar .cf-home-nav-button {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    body[data-page="channels"] #channel-sidebar .cf-friends-nav-button {
        height: 52px !important;
        min-height: 52px !important;
        padding-inline: 18px !important;
    }
}

/* --- Final left rail balance: boxless containers, designed buttons, themed rows --- */
body[data-page="channels"] #channel-sidebar {
    background: rgba(20, 24, 30, 0.98) !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: brightness(0.91) !important;
}

body[data-page="channels"] .channels-center-shell,
body[data-page="channels"] .chat-stage {
    background: #23272e !important;
    border: 0 !important;
    box-shadow: none !important;
}

body[data-page="channels"] #channel-sidebar :where(.channels-left-main,
    .channels-panel,
    .channels-utility-panel,
    .channels-browser-panel,
    .channels-self-panel,
    .channels-mission-panel,
    .channels-mission-panel > .grid,
    .channels-mission-panel > .grid > div,
    #joined-channel-list,
    #channels-self-card,
    .channels-self-card) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-left-main {
    gap: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-utility-panel {
    padding: 0.72rem 0.12rem 0.58rem !important;
    margin: 0 0 0.5rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-mission-panel .grid {
    gap: 0.5rem !important;
}

body[data-page="channels"] #channel-sidebar .cf-liquid-nav-button {
    min-height: 44px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.075)) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 20px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

body[data-page="channels"] #channel-sidebar .cf-liquid-nav-button:hover,
body[data-page="channels"] #channel-sidebar .cf-liquid-nav-button.is-active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.105)) !important;
    color: #ffffff !important;
}

body[data-page="channels"] #channel-sidebar .cf-liquid-switcher {
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="channels"] #channel-sidebar .sidebar-mode-btn,
body[data-page="channels"] #channel-sidebar .sidebar-mode-btn:hover,
body[data-page="channels"] #channel-sidebar .sidebar-mode-btn.is-active {
    min-height: 34px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.66) !important;
    font-size: 0.56rem !important;
}

body[data-page="channels"] #channel-sidebar .sidebar-mode-btn:hover,
body[data-page="channels"] #channel-sidebar .sidebar-mode-btn.is-active {
    color: rgba(255, 255, 255, 0.94) !important;
}

body[data-page="channels"] #channel-sidebar .channels-browser-panel {
    padding: 0 !important;
    margin: 0 !important;
}

body[data-page="channels"] #channel-sidebar #joined-channel-list {
    gap: 0.28rem !important;
    padding: 0 0.38rem !important;
    margin: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card {
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card:not(.is-active):hover,
body[data-page="channels"] #channel-sidebar .channels-conversation-card:not(.is-active):focus-within {
    background: rgba(255, 255, 255, 0.085) !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card.is-active {
    background:
        linear-gradient(90deg, var(--conversation-start, #4f5d89), var(--conversation-end, #1e2940)) !important;
    filter: saturate(1.18) brightness(1.05) !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-button {
    height: 38px !important;
    min-height: 38px !important;
    grid-template-columns: 29px minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0.2rem 0.46rem !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-avatar,
body[data-page="channels"] #channel-sidebar .channels-conversation-avatar-channel {
    width: 29px !important;
    height: 29px !important;
    flex-basis: 29px !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-title {
    font-family: "Quicksand", "Trebuchet MS", sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    letter-spacing: 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-conversation-card.is-active .channels-conversation-title {
    color: #ffffff !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-panel {
    padding: 0.62rem 0.38rem 0 !important;
    margin: 0.55rem 0 0 !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-card-pill {
    min-height: 46px !important;
    padding: 0.42rem 0.62rem !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, var(--self-card-start, #4f5d89), var(--self-card-end, #1e2940)) !important;
    filter: saturate(1.18) brightness(1.05) !important;
}

body[data-page="channels"] #channel-sidebar .channels-self-card-pill:hover,
body[data-page="channels"] #channel-sidebar .channels-self-card-pill:focus-visible {
    background:
        linear-gradient(90deg, var(--self-card-start, #4f5d89), var(--self-card-end, #1e2940)) !important;
}