/* ============================================
   Mopella — Liquid Glass Design System v2
   Production-Ready Futuristic UI
   ============================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
    --neon-blue: #00d4ff;
    --neon-purple: #7b2ff7;
    --neon-cyan: #0ef6cc;
    --neon-pink: #f72f8e;
    --neon-violet: #a855f7;

    --surface-bg: #080a14;
    --surface-1: rgba(15, 18, 35, 0.65);
    --surface-2: rgba(20, 24, 48, 0.55);
    --surface-3: rgba(30, 35, 65, 0.45);
    --surface-inner: rgba(255, 255, 255, 0.03);

    --glass-bg: rgba(16, 18, 40, 0.55);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.15);
    --glass-blur: 20px;
    --glass-glow: 0 0 30px rgba(0, 212, 255, 0.08);

    --text-primary: rgba(255, 255, 255, 0.92);
    --text-secondary: rgba(255, 255, 255, 0.55);
    --text-tertiary: rgba(255, 255, 255, 0.3);
    --text-accent: var(--neon-cyan);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 999px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow-blue: 0 0 20px rgba(0, 212, 255, 0.15), 0 0 60px rgba(0, 212, 255, 0.05);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
}

/* ---------- RESET & BASE ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--surface-bg);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* ---------- LAYOUT CORE ---------- */
.app-shell {
    display: flex;
    width: 100vw;
    height: 100vh;
    background: var(--bg-deep);
    color: var(--text-primary);
    overflow: hidden;
    padding: 16px;
    gap: 16px;
    align-items: stretch;
}

/* Workspace Switcher (Far Left Discord-style bar) */
.ws-switcher {
    width: 72px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.ws-switcher__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 12px;
    flex: 1;
    min-height: 0;
}

.ws-switcher__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 12px;
}

.ws-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
}

.ws-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Webkit */
}

.ws-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s var(--ease-spring);
    border: 2px solid transparent;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    position: relative;
}

.ws-icon:hover {
    border-radius: var(--radius-lg);
    background: rgba(0, 212, 255, 0.12);
    color: var(--neon-cyan);
}

.ws-icon--active {
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(123, 47, 247, 0.15)) !important;
    border-color: var(--neon-cyan) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

.ws-icon--active::before {
    content: '';
    position: absolute;
    left: -8px;
    width: 3px;
    height: 32px;
    border-radius: 0 3px 3px 0;
    background: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(14, 246, 204, 0.5);
}

.ws-icon--dm {
    background: rgba(0, 212, 255, 0.08);
    color: var(--neon-cyan);
}

.ws-icon--add {
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, 0.12);
    color: var(--text-tertiary);
}

.ws-icon--add:hover {
    border-color: rgba(14, 246, 204, 0.4);
    color: var(--neon-cyan);
    background: rgba(14, 246, 204, 0.06);
}

.ws-divider {
    width: 32px;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1px;
    margin: 4px 0;
}

/* Sidebar (Channel/DM Panel - now without the nav strip) */
.sidebar {
    width: 260px;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    background: rgba(15, 18, 35, 0.3);
    flex-shrink: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Nav Tabs (horizontal row inside sidebar) */
.sidebar__nav-tabs {
    display: flex;
    gap: 2px;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent;
    white-space: nowrap;
}

.nav-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.nav-tab--active {
    color: var(--neon-cyan);
    background: rgba(0, 212, 255, 0.08);
}

.sidebar__footer-actions {
    display: flex;
    gap: 4px;
}

/* Workspace Nav Icons (Home, Tasks, Messages in switcher) */
.ws-icon--nav {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}

.ws-icon--nav:hover {
    background: rgba(123, 47, 247, 0.12);
    color: var(--neon-purple);
    border-radius: var(--radius-lg);
}

.ws-icon--nav.ws-icon--active {
    background: linear-gradient(135deg, rgba(123, 47, 247, 0.2), rgba(0, 212, 255, 0.12)) !important;
    border-color: var(--neon-purple) !important;
    color: var(--text-primary) !important;
}

/* Workspace Header Button */
.ws-header-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-primary);
    text-align: left;
}

.ws-header-btn h3 {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.ws-header-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--text-tertiary);
}

.ws-header-btn:hover .ws-header-arrow {
    color: var(--text-primary);
}

.ws-header-btn.ws-dropdown-open .ws-header-arrow {
    transform: rotate(90deg);
    color: var(--neon-cyan);
}

/* Workspace Dropdown Menu */
.ws-dropdown {
    position: absolute;
    top: 58px;
    left: 8px;
    right: 8px;
    z-index: 100;
    background: rgba(18, 20, 44, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    padding: 12px 0;
    animation: wsDropIn 0.2s var(--ease-spring);
    overflow: hidden;
}

@keyframes wsDropIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }

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

.ws-dropdown__header {
    padding: 8px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ws-dropdown__header h4 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.ws-dropdown__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.ws-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3ba55d;
    display: inline-block;
}

.ws-dropdown__actions {
    display: flex;
    justify-content: space-around;
    padding: 12px 12px 8px;
}

.ws-dropdown__action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border: none;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.65rem;
    font-weight: 500;
    min-width: 64px;
}

.ws-dropdown__action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.ws-dropdown__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 12px;
}

.ws-dropdown__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.ws-dropdown__item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.ws-dropdown__item--danger {
    color: #ed4245;
}

.ws-dropdown__item--danger:hover {
    background: rgba(237, 66, 69, 0.1);
    color: #ff5558;
}

.ws-dropdown__toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Toggle Switch */
.ws-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.ws-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ws-toggle__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    transition: 0.3s;
}

.ws-toggle__slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.ws-toggle input:checked+.ws-toggle__slider {
    background: var(--neon-cyan);
}

.ws-toggle input:checked+.ws-toggle__slider::before {
    transform: translateX(18px);
}

.sidebar-nav-strip {
    width: 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    background: rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    transition: width var(--duration-slow) var(--ease-out);
    overflow: hidden;
    flex-shrink: 0;
}

.nav-strip__top,
.nav-strip__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.sidebar-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.workspace-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.workspace-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.workspace-icon:hover {
    transform: scale(1.1);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.nav-divider {
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: -8px 0;
}

.sidebar-nav-strip .nav-btn {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 10px;
    box-sizing: border-box;
}

.sidebar-nav-strip .nav-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-nav-strip .nav-btn--active {
    color: var(--neon-cyan);
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.sidebar-nav-strip.expanded .nav-btn {
    justify-content: flex-start;
    height: auto;
    padding: 10px 14px;
}

.sidebar__header {
    padding: 20px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.sidebar__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--text-primary);
}

.sidebar__title h3 {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__search {
    padding: 14px;
}

.sidebar__menu {
    padding: 0 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: all 0.2s;
    cursor: pointer;
    width: 100%;
    border: none;
    background: transparent;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.channel-list-scroller {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 20px;
}

.sidebar__footer {
    padding: 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar__user {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-width: 0;
}

.sidebar__user .user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar__user .user-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
    border: none;
    background: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--neon-cyan);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

::-webkit-scrollbar {
    width: 5px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ---------- ANIMATED BACKGROUND ---------- */
.bg-environment {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0,0,0);
}

.bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(123, 47, 247, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(14, 246, 204, 0.04) 0%, transparent 60%),
        linear-gradient(180deg, #060812 0%, #0a0e1a 50%, #080a14 100%);
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat 20s ease-in-out infinite;
    will-change: transform;
    transform: translate3d(0,0,0);
}

.bg-orb--1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.12), transparent 70%);
    top: -10%;
    left: -5%;
    animation-duration: 25s;
}

.bg-orb--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(123, 47, 247, 0.15), transparent 70%);
    bottom: -10%;
    right: -5%;
    animation-duration: 22s;
    animation-delay: -5s;
}

.bg-orb--3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(14, 246, 204, 0.08), transparent 70%);
    top: 40%;
    left: 50%;
    animation-duration: 18s;
    animation-delay: -10s;
}

.bg-orb--4 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(247, 47, 142, 0.06), transparent 70%);
    top: 10%;
    right: 20%;
    animation-duration: 28s;
    animation-delay: -7s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0)scale(1)
    }

    25% {
        transform: translate(30px, -20px)scale(1.05)
    }

    50% {
        transform: translate(-20px, 30px)scale(0.95)
    }

    75% {
        transform: translate(20px, 20px)scale(1.02)
    }
}

.bg-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.015)1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015)1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%);
}

.bg-noise {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.light-streak {
    position: absolute;
    width: 200%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), rgba(123, 47, 247, 0.2), transparent);
    animation: streakMove 8s ease-in-out infinite;
    opacity: 0.4;
    will-change: transform;
    transform: translate3d(0,0,0);
}

.light-streak--1 {
    top: 20%;
    transform: rotate(-5deg);
    animation-duration: 10s
}

.light-streak--2 {
    top: 60%;
    transform: rotate(3deg);
    animation-duration: 12s;
    animation-delay: -4s
}

.light-streak--3 {
    top: 85%;
    transform: rotate(-2deg);
    animation-duration: 14s;
    animation-delay: -8s;
    opacity: 0.2
}

@keyframes streakMove {

    0%,
    100% {
        transform: translateX(-50%)rotate(-5deg);
        opacity: 0
    }

    20% {
        opacity: 0.4
    }

    50% {
        transform: translateX(0%)rotate(-5deg);
        opacity: 0.3
    }

    80% {
        opacity: 0.4
    }
}

/* ---------- GLASS PANEL ---------- */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur))saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur))saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), var(--glass-glow);
    position: relative;
    overflow: hidden;
}

.glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06), transparent);
    z-index: 1;
}

.glass-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03)0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.glass-panel-inner {
    background: var(--surface-inner);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

/* ---------- AUTH SCREEN ---------- */
.auth-screen {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 36px 32px;
    margin: auto;
    animation: authIn 0.6s var(--ease-spring) both;
}

@keyframes authIn {
    from {
        opacity: 0;
        transform: translateY(24px)scale(0.97)
    }

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

.auth-card__logo {
    text-align: center;
    margin-bottom: 28px;
}

.auth-logo-img {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.4));
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.3))
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6))
    }
}

.auth-brand {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.auth-brand span {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-tagline {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}

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

.form-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-out);
    color: var(--text-tertiary);
}

.form-input-wrap:focus-within {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.06);
}

.form-input-wrap input,
.form-input-wrap select {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-input-wrap input::placeholder {
    color: var(--text-tertiary);
}

.form-input-wrap select {
    cursor: pointer;
    appearance: none;
}

.form-input-wrap select option {
    background: #1a1a2e;
    color: var(--text-primary);
}

.password-toggle {
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color var(--duration-fast);
    display: flex;
}

.password-toggle:hover {
    color: var(--text-primary);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.auth-divider span {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.auth-footer {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-top: 20px;
}

/* Avatar Upload */
.avatar-upload-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.avatar-upload {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out);
}

.avatar-upload:hover {
    border-color: rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.05);
}

.avatar-upload img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-upload__placeholder {
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-upload__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--duration-fast);
    color: white;
}

.avatar-upload:hover .avatar-upload__overlay {
    opacity: 1;
}

.avatar-upload__label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* ---------- BUTTONS ---------- */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

.icon-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.glow-btn {
    position: relative;
}

.glow-btn::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
    z-index: -1;
    filter: blur(8px);
}

.glow-btn:hover::after {
    opacity: 0.4;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    white-space: nowrap;
}

.btn--primary {
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    color: white;
    box-shadow: 0 2px 12px rgba(0, 212, 255, 0.2);
}

.btn--primary:hover {
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.35);
    transform: translateY(-1px);
}

.btn--ghost {
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
}

.btn--ghost:hover {
    color: var(--text-primary);
    border-color: var(--glass-border-hover);
    background: rgba(255, 255, 255, 0.05);
}

.btn--full {
    width: 100%;
    justify-content: center;
}

.btn--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn--danger:hover {
    background: rgba(239, 68, 68, 0.25);
}

.text-gradient {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- AVATARS ---------- */
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.avatar--online::after,
.avatar--away::after,
.avatar--offline::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--surface-bg);
    z-index: 2;
}

.avatar--online::after {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.avatar--away::after {
    background: #f59e0b;
}

.avatar--offline::after {
    background: #6b7280;
}

.avatar--small {
    width: 32px;
    height: 32px;
}

.avatar--small::after {
    width: 8px;
    height: 8px;
}

.avatar--tiny {
    width: 24px;
    height: 24px;
}

.avatar--tiny::after {
    width: 7px;
    height: 7px;
    border-width: 1.5px;
}

.avatar-initials {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- MOBILE HEADER ---------- */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    z-index: 50;
    background: rgba(8, 10, 20, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 12px;
    align-items: center;
    justify-content: space-between;
}

.mobile-header__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1rem;
}

.mobile-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: inline-block;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 45;
}

.sidebar-overlay.active {
    display: block;
}

/* ---------- APP SHELL ---------- */
.app-shell {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100vh;
    padding: 10px;
    gap: 10px;
}

/* ---------- SIDEBAR (see line ~76 for primary rule) ---------- */

.sidebar__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 0 16px;
    overflow: hidden;
}

.sidebar-logo-img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
    animation: logoPulse 3s ease-in-out infinite;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-text {
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: none;
    white-space: nowrap;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.nav-label {
    display: none;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 500;
}

.sidebar-nav-strip.expanded {
    width: 180px;
}

.sidebar-nav-strip.expanded .nav-btn {
    justify-content: flex-start;
    padding: 10px 16px;
}

.sidebar-nav-strip.expanded .nav-label {
    display: inline;
}

.sidebar-nav-strip.expanded .workspace-icon {
    margin: 0 auto;
}

.sidebar-nav-strip.expanded #nav-strip-toggle svg {
    transform: rotate(180deg);
}

.nav-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.nav-btn--active {
    color: var(--neon-cyan);
    background: rgba(14, 246, 204, 0.08);
}

.nav-btn--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 3px;
    background: var(--neon-cyan);
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    box-shadow: 0 0 8px var(--neon-cyan);
}

.nav-btn--logout {
    color: var(--text-tertiary);
}

.nav-btn--logout:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.08);
}

.sidebar__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.sidebar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-normal) var(--ease-out);
    width: 100%;
    justify-content: center;
}

.sidebar__user:hover {
    background: rgba(255, 255, 255, 0.05);
}

.user-info {
    display: none;
    flex-direction: column;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.user-status {
    font-size: 0.7rem;
    color: var(--neon-cyan);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* ---------- MAIN CONTENT ---------- */
.main-content {
    flex: 1;
    min-width: 0;
    position: relative;
}

.panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--duration-slow) var(--ease-out);
}

.panel--active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.panel--dashboard,
.panel--tasks,
.panel--inbox {
    overflow-y: auto !important;
    overflow-x: hidden;
    padding-bottom: 40px;
    -webkit-overflow-scrolling: touch;
}


/* Custom Scrollbar for Full Screen Panels */
.panel--dashboard::-webkit-scrollbar,
.panel--tasks::-webkit-scrollbar {
    width: 6px;
}

.panel--dashboard::-webkit-scrollbar-thumb,
.panel--tasks::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.dashboard-layout,
.kanban-board {
    min-height: min-content;
}

/* ---------- CHAT PANEL ---------- */
.chat-layout {
    display: flex;
    height: 100%;
    gap: 10px;
}

.channel-list {
    width: 240px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 0;
    overflow: hidden;
}

.channel-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    position: relative;
    z-index: 2;
}

.channel-list__header h2 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.channel-list__search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    position: relative;
    z-index: 2;
}

.channel-list__search input {
    width: 100%;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.channel-list__search input::placeholder {
    color: var(--text-tertiary);
}

.channel-list__channels {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 12px;
    position: relative;
    z-index: 2;
}

.channel-group {
    margin-bottom: 16px;
}

.channel-group__label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    padding: 4px 8px 6px;
    text-transform: uppercase;
}

.channel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.channel-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.channel-item--active {
    background: rgba(14, 246, 204, 0.08);
    color: var(--text-primary);
}

.channel-hash {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-tertiary);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.channel-item--active .channel-hash {
    color: var(--neon-cyan);
}

.channel-name {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    color: white;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* Chat Main */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

.chat-main__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 2;
}

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

.chat-header-logo {
    width: 22px;
    height: 22px;
    opacity: 0.5;
    display: none;
    object-fit: contain;
}

.channel-hash-lg {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--neon-cyan);
    opacity: 0.6;
}

.chat-header__left h3 {
    font-size: 1rem;
    font-weight: 600;
}

.channel-back-btn {
    display: none;
}

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

/* Messages */
.chat-main__messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 80px;
    /* Added padding for composer clearance */
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 2;
}

.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 40px;
}

.mobile-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.sidebar-logo-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.empty-state__logo {
    width: 48px;
    height: 48px;
    opacity: 0.4;
    object-fit: contain;
    margin: 0 auto;
}

.empty-state h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.empty-state p {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    max-width: 320px;
}

.message-date-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    position: relative;
    justify-content: center;
}

.message-date-divider::before,
.message-date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.message-date-divider span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    text-transform: none;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.message {
    display: flex;
    gap: 12px;
    position: relative;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-out);
    animation: messageIn var(--duration-slow) var(--ease-out);
}

.message--standard {
    padding: 8px 16px;
    margin-top: 6px;
}

.message--grouped {
    padding: 2px 16px 2px 60px;
    margin-top: 0;
}

.message:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Hover time for grouped messages */
.message__hover-time {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: var(--text-tertiary);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
    font-weight: 500;
}

.message--grouped:hover .message__hover-time {
    opacity: 1;
}

/* Enhanced Floating Actions Bar (Discord-style) */
.message-actions-bar {
    position: absolute;
    right: 20px;
    top: -14px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(20, 24, 40, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 3px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 212, 255, 0.08);
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
    transform: translateY(6px) scale(0.95);
}

.message:hover .message-actions-bar {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.action-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s var(--ease-out);
    font-size: 0.9rem;
    position: relative;
}

.action-bar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: scale(1.08);
}

.action-bar-btn:active {
    transform: scale(0.95);
}

.action-bar-btn--danger:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
}

/* Tap-to-reveal on touch/mobile + persistent when message is active */
.message.message--active .message-actions-bar {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.message.message--active {
    background: rgba(0, 212, 255, 0.05);
    border-left: 2px solid var(--neon-cyan);
    padding-left: 14px;
}

.action-bar-btn--active {
    color: var(--neon-cyan);
    background: rgba(0, 212, 255, 0.15);
}

.action-bar-btn--active:hover {
    background: rgba(0, 212, 255, 0.22);
}

/* Mobile & Touch Optimizations */
@media (hover: none) and (pointer: coarse) {
    .message-actions-bar {
        opacity: 0;
        right: 12px;
        top: 8px;
        padding: 4px;
        gap: 3px;
        background: rgba(15, 23, 42, 0.92);
        backdrop-filter: blur(12px);
        border-radius: 12px;
    }
    
    .message.message--active .message-actions-bar,
    .message:active .message-actions-bar {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
    
    .action-bar-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .message--standard { padding-right: 60px; }
    .message--grouped { padding-right: 60px; }
}

/* Small Screen Responsive */
@media (max-width: 720px) {
    .message--standard {
        padding: 8px 12px;
    }
    
    .message--grouped {
        padding: 2px 12px 2px 52px;
    }
    
    .message-actions-bar {
        right: 8px;
        top: 6px;
        padding: 3px;
        gap: 2px;
    }
    
    .action-bar-btn {
        width: 30px;
        height: 30px;
    }
    
    .message--standard { padding-right: 52px; }
    .message--grouped { padding-right: 52px; }
}

/* ===== Forward modal ===== */
.forward-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 16px;
    animation: fadeIn 160ms ease-out;
}
.forward-modal {
    width: 100%; max-width: 480px; max-height: 80vh;
    display: flex; flex-direction: column;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg, 12px);
    padding: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.forward-modal .modal__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.forward-modal .modal__header h3 { margin: 0; font-size: 1rem; color: var(--text-primary); }
.forward-modal__preview {
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--neon-cyan);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
}
.forward-modal__author { color: var(--neon-cyan); font-weight: 600; margin-bottom: 4px; }
.forward-modal__text { color: var(--text-secondary); white-space: pre-wrap; max-height: 80px; overflow: hidden; }
.forward-modal__search { width: 100%; margin-bottom: 10px; }
.forward-modal__list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.forward-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    background: transparent; border: none; color: var(--text-primary);
    text-align: left; cursor: pointer; width: 100%;
    transition: background 120ms ease;
}
.forward-row:hover { background: rgba(0, 212, 255, 0.08); }
.fwd-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.fwd-icon--ch { background: rgba(123, 47, 247, 0.2); color: var(--neon-violet); }
.fwd-meta { flex: 1; min-width: 0; }
.fwd-label { font-size: 0.9rem; font-weight: 600; }
.fwd-sub { font-size: 0.75rem; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwd-send { font-size: 0.75rem; color: var(--neon-cyan); opacity: 0; transition: opacity 120ms; }
.forward-row:hover .fwd-send { opacity: 1; }

/* Context menu polish (used by message ⋯ menu and notif mute menu) */
.context-menu {
    min-width: 200px;
    padding: 6px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex; flex-direction: column;
}
.context-menu__item {
    display: block; width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: transparent; border: none; color: var(--text-primary);
    font-size: 0.85rem; border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease;
}
.context-menu__item:hover { background: rgba(0, 212, 255, 0.1); }
.context-menu__item--danger { color: #ef4444; }
.context-menu__item--danger:hover { background: rgba(239, 68, 68, 0.12); }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

@keyframes messageIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

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

.message__content {
    flex: 1;
    min-width: 0;
}

.message__header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.message__author {
    font-size: 0.85rem;
    font-weight: 600;
}

.message__author--you {
    color: var(--neon-cyan);
}

.message__time {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

.message__text {
    font-size: 0.95rem;
    line-height: 1.6;
    /* Brighter, more readable chat text in DMs and channels */
    color: var(--text-primary, #f5f7fb);
    font-weight: 450;
    word-break: break-word;
}
.message__text a,
.message__text .msg-link { color: var(--neon-cyan, #67e8f9); }

/* Message attachments */
.message__files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.message-file {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}

.message-file img {
    max-width: 280px;
    max-height: 200px;
    display: block;
    border-radius: var(--radius-md);
}

.message-file audio {
    display: block;
    margin: 8px;
}

.message-file video {
    max-width: 320px;
    max-height: 200px;
    display: block;
    border-radius: var(--radius-md);
}

.message-file-generic {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: var(--neon-blue);
    cursor: pointer;
}

/* Reactions */
.message__reactions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.reaction {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.reaction span {
    color: var(--text-tertiary);
    font-size: 0.7rem;
}

.reaction:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.reaction--active {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.2);
}

.reaction--active span {
    color: var(--neon-cyan);
}

/* File Preview Bar */
.file-preview-bar {
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.15);
}

.file-preview-items {
    display: flex;
    gap: 8px;
    flex: 1;
    overflow-x: auto;
}

.file-preview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.file-preview-item img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
}

.file-preview-item .remove-file {
    cursor: pointer;
    color: var(--text-tertiary);
    display: flex;
    transition: color var(--duration-fast);
}

.file-preview-item .remove-file:hover {
    color: #f87171;
}

/* Composer */
.chat-main__composer {
    padding: 12px 16px 16px;
    position: relative;
    z-index: 5;
}

.composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.composer:focus-within {
    border-color: rgba(0, 212, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.05);
}

.composer input[type="text"] {
    flex: 1;
    padding: 6px 4px;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.composer input[type="text"]::placeholder {
    color: var(--text-tertiary);
}

.composer__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.send-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    color: white;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* ---------- EMOJI PICKER ---------- */
.emoji-picker {
    position: absolute;
    bottom: 72px;
    right: 16px;
    width: 320px;
    z-index: 20;
    padding: 0;
    overflow: hidden;
    animation: fadeInUp 0.25s var(--ease-spring) both;
}

.emoji-picker__header {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
}

.emoji-picker__header input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.emoji-picker__header input::placeholder {
    color: var(--text-tertiary);
}

.emoji-picker__tabs {
    display: flex;
    padding: 4px 8px;
    gap: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
}

.emoji-tab {
    flex: 1;
    padding: 6px;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast);
}

.emoji-tab:hover {
    background: rgba(255, 255, 255, 0.05);
}

.emoji-tab--active {
    background: rgba(0, 212, 255, 0.1);
}

.emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    max-height: 200px;
    overflow-y: auto;
    position: relative;
    z-index: 2;
}

.emoji-picker__grid button {
    padding: 6px;
    font-size: 1.2rem;
    text-align: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast);
    background: none;
    border: none;
    line-height: 1;
}

.emoji-picker__grid button:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- KANBAN ---------- */
.panel--tasks {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.kanban-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
    gap: 16px;
    flex-shrink: 0;
}

.kanban-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.kanban-header__left h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
}

.kanban-search-wrap {
    position: relative;
    width: 240px;
}

.kanban-search-wrap .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}

.kanban-search-wrap .search-input {
    width: 100%;
    padding: 8px 12px 8px 36px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-size: 0.8rem !important;
    height: 36px !important;
    transition: all var(--duration-fast) var(--ease-out) !important;
}

.kanban-search-wrap .search-input:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.08) !important;
}

.kanban-header__filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.kanban-header__filters select {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
    padding: 0 24px 0 12px !important;
    height: 36px !important;
    min-width: 130px;
    cursor: pointer;
    outline: none !important;
    transition: all var(--duration-fast) var(--ease-out);
}

.kanban-header__filters select:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.kanban-header__filters select:focus {
    border-color: rgba(0, 212, 255, 0.2) !important;
}

.filter-reset-btn {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 0.8rem !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-tertiary) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.filter-reset-btn:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

.kanban-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-view-switcher {
    display: flex;
    padding: 4px !important;
    border-radius: var(--radius-md) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.task-view-switcher button {
    border-radius: var(--radius-sm) !important;
    padding: 6px 10px !important;
    height: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-out);
}

.task-view-switcher button.btn--active {
    background: rgba(0, 212, 255, 0.1) !important;
    color: var(--neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
}

#new-task-btn {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 0.8rem !important;
    border-radius: var(--radius-md) !important;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2) !important;
    transition: all var(--duration-normal) var(--ease-out) !important;
}

#new-task-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.35) !important;
}

.kanban-board {
    display: flex;
    gap: 12px;
    flex: 1;
    padding: 0 12px 12px;
    overflow-x: auto;
    min-height: 0;
}

.kanban-column {
    flex: 1;
    min-width: 260px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.kanban-column__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
}

.column-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.column-indicator--todo {
    background: var(--neon-blue);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

.column-indicator--inprogress {
    background: var(--neon-violet);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.column-indicator--done {
    background: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(14, 246, 204, 0.4);
}

.kanban-column__header h3 {
    font-size: 0.85rem;
    font-weight: 600;
    flex: 1;
}

.column-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.kanban-column__cards {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 2;
    min-height: 80px;
}

.kanban-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 60px;
}

.kanban-empty-state p {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.task-card {
    padding: 14px;
    cursor: grab;
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
}

.task-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.task-card:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.task-card.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.task-card__tags {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tag {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}

.tag--design {
    background: rgba(247, 47, 142, 0.12);
    color: var(--neon-pink);
    border: 1px solid rgba(247, 47, 142, 0.2);
}

.tag--backend {
    background: rgba(0, 212, 255, 0.1);
    color: var(--neon-blue);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.tag--frontend {
    background: rgba(14, 246, 204, 0.1);
    color: var(--neon-cyan);
    border: 1px solid rgba(14, 246, 204, 0.2);
}

.tag--ux {
    background: rgba(168, 85, 247, 0.1);
    color: var(--neon-violet);
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.tag--high {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.tag--medium {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.tag--low {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.task-card__title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.3;
}

.task-card__desc {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.45;
    margin-bottom: 10px;
}

.task-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-card__assignees {
    display: flex;
}

.task-card__assignees .avatar--tiny {
    margin-left: -4px;
    border: 2px solid rgba(30, 35, 65, 0.8);
}

.task-card__assignees .avatar--tiny:first-child {
    margin-left: 0;
}

.task-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

.kanban-column.drag-over .kanban-column__cards {
    background: rgba(0, 212, 255, 0.03);
    border-radius: var(--radius-md);
}

/* ---------- CALLS PANEL ---------- */
.call-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.call-header {
    padding: 14px 20px;
}

.call-header__left h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.call-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 40px;
}

.call-empty-state h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.call-empty-state p {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    max-width: 320px;
}

/* ---------- FILES PANEL ---------- */
.panel--files {
    display: flex;
    flex-direction: column;
}

.files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    flex-shrink: 0;
}

.files-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

.files-grid {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    align-content: start;
}

.files-empty-state {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
}

.files-empty-state h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.files-empty-state p {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    max-width: 300px;
}

.file-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.file-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.file-card__preview {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.file-card__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-card__preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-card__info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-card__name {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-card__meta {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

/* ---------- MODAL ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-normal) var(--ease-out);
}

.modal-overlay--active {
    opacity: 1;
    visibility: visible;
}

.modal {
    width: 90%;
    max-width: 480px;
    transform: translateY(20px)scale(0.95);
    transition: transform var(--duration-slow) var(--ease-spring);
    overflow: hidden;
}

.modal-overlay--active .modal {
    transform: translateY(0)scale(1);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 2;
}

.modal__header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.modal__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 2;
    overflow-y: auto;
    max-height: 80vh;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.form-input {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all var(--duration-fast) var(--ease-out);
}

.form-input:focus {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.05);
}

.form-input::placeholder {
    color: var(--text-tertiary);
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.form-select option {
    background: #1a1a2e;
    color: var(--text-primary);
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row .form-group {
    flex: 1;
}
/* Username Input with @ Prefix */
.input-with-prefix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix {
    position: absolute;
    left: 14px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    pointer-events: none;
    z-index: 1;
}

.input-with-prefix .form-input {
    padding-left: 28px;
}

/* Form Hints */
.form-hint {
    font-size: 0.75rem;
    margin-top: 4px;
    transition: all var(--duration-fast) var(--ease-out);
}

.form-hint.success {
    color: #10b981;
}

.form-hint.error {
    color: #ef4444;
}

/* DM Search Results */
.dm-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: rgba(16, 18, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.dm-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dm-search-result-item:last-child {
    border-bottom: none;
}

.dm-search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dm-search-result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.dm-search-result-info {
    flex: 1;
    min-width: 0;
}

.dm-search-result-username {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}

.dm-search-result-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-search-no-results {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-tertiary);
/* Friends Modal Styles */
.friends-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.friends-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-out);
}

.friends-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.friends-tab.active {
    background: rgba(0, 212, 255, 0.1);
    color: var(--neon-cyan);
}

.friends-pane {
    min-height: 400px;
}

.friends-search-box {
    position: relative;
    margin-bottom: 16px;
}

.friends-search-box svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}

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

.friend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
}

.friend-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.friend-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.friend-item-info {
    flex: 1;
    min-width: 0;
}

.friend-item-username {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}

.friend-item-status {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.friend-item-actions {
    display: flex;
    gap: 8px;
}

.friend-item-actions .btn {
    padding: 6px 12px;
    font-size: 0.75rem;
}

.friend-search-results {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.friend-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
}

.friend-search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.friend-search-no-results {
    padding: 32px;
/* Info Panel Tabs */
.info-panel-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
}

.info-panel-tabs::-webkit-scrollbar {
    display: none;
}

.info-panel-tab {
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    position: relative;
}

.info-panel-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.info-panel-tab.active {
    color: var(--neon-cyan);
    background: rgba(0, 212, 255, 0.05);
}

.info-panel-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--neon-cyan);
}

.info-panel-pane {
    display: none;
}

.info-panel-pane.active {
    display: block;
}

/* Info Panel Content */
.info-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-tertiary);
}

.info-empty-state svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

.info-empty-state p {
    font-size: 0.85rem;
}

.info-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 12px;
}

.info-media-item {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out);
}

.info-media-item:hover {
    transform: scale(1.05);
}

.info-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-pins-list,
.info-links-list,
.info-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.info-pin-item,
.info-link-item,
.info-file-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
    cursor: pointer;
}

.info-pin-item:hover,
.info-link-item:hover,
.info-file-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.info-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.info-item-author {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.info-item-time {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

.info-item-content {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.info-link-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.info-link-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

.info-link-details {
    flex: 1;
    min-width: 0;
}

.info-link-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-link-url {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-file-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

    font-size: 0.85rem;
}


.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 2;
}

/* ---------- CHANNEL INFO PANEL ---------- */
.channel-info-panel {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.info-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 2;
}

.info-panel__header h3 {
    font-size: 0.95rem;
    font-weight: 600;
}

.info-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    position: relative;
    z-index: 2;
}

.info-section {
    margin-bottom: 20px;
}

.info-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info-section h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-desc {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.member-count-badge {
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    font-weight: 600;
}

.header-member-count {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    margin-left: 4px;
}

.info-member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--duration-fast);
}

.info-member-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.info-member-item .member-details {
    flex: 1;
    min-width: 0;
}

.info-member-item .member-name {
    font-size: 0.8rem;
    font-weight: 500;
    display: block;
}

.info-member-item .member-role {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn--small {
    padding: 5px 10px;
    font-size: 0.75rem;
}

/* ---------- MEMBERS / PEOPLE PANEL ---------- */
.panel--members {
    display: flex;
    flex-direction: column;
}

.members-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    flex-shrink: 0;
}

.members-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

.members-grid {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    align-content: start;
}

.member-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.member-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.member-card .avatar {
    width: 44px;
    height: 44px;
}

.member-card__info {
    flex: 1;
    min-width: 0;
}

.member-card__name {
    font-size: 0.9rem;
    font-weight: 600;
    display: block;
}

.member-card__role {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    display: block;
    margin-top: 2px;
}

.member-card__actions {
    display: flex;
    gap: 4px;
}

/* ---------- PROFILE VIEW ---------- */
.modal--profile {
    max-width: 360px;
}

.profile-view__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
    gap: 12px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.profile-view__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-view__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-view__name {
    font-size: 1.1rem;
    font-weight: 700;
}

.profile-view__role {
    font-size: 0.8rem;
    color: var(--neon-cyan);
}

.profile-view__email {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.profile-view__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.profile-view__status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

/* ---------- VIDEO CALL ---------- */
.call-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.call-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}

.call-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.call-duration {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', monospace;
}

.video-grid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.call-empty-state {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 40px;
}

.call-empty-state h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.call-empty-state p {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    max-width: 320px;
}

.video-tile {
    width: calc(50% - 5px);
    max-width: 480px;
    aspect-ratio: 16/10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    background: rgba(15, 18, 35, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.video-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.video-tile__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 2;
}

.call-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    margin: 12px auto;
    border-radius: var(--radius-xl);
    width: fit-content;
}

.call-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.call-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: scale(1.08);
}

.call-btn--active {
    background: rgba(14, 246, 204, 0.1);
    color: var(--neon-cyan);
    border-color: rgba(14, 246, 204, 0.2);
}

.call-btn--end {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.25);
}

.call-btn--end:hover {
    background: rgba(239, 68, 68, 0.25);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.call-controls__divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 8px;
}

/* ---------- INVITE / DM SEARCH ---------- */
.invite-member-search {
    position: relative;
}

.invite-results,
.dm-search-results,
.add-member-results {
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--duration-fast);
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.search-result-item .result-name {
    font-size: 0.85rem;
    font-weight: 500;
    flex: 1;
}

.search-result-item .result-role {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

.search-result-item .result-added {
    font-size: 0.7rem;
    color: var(--neon-cyan);
}

.invited-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.invited-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    color: var(--neon-cyan);
}

.invited-tag button {
    display: flex;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color var(--duration-fast);
}

.invited-tag button:hover {
    color: #f87171;
}

.invite-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.invite-link-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 0.8rem;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    word-break: break-all;
}

.invite-link-box span {
    flex: 1;
}

.invite-note {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 12px;
    font-style: italic;
}

/* ---------- LIGHTBOX ---------- */
.modal-overlay--lightbox {
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
}

.lightbox-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    color: white;
    opacity: 0.6;
    transition: opacity 0.2s;
    z-index: 10;
}

.lightbox-close:hover {
    opacity: 1;
}

.lightbox-media {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lightbox-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2xl);
}

.lightbox-media video {
    max-width: 90%;
    max-height: 80%;
}

.lightbox-info {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
    font-size: 0.9rem;
}

/* ---------- TASK DETAIL (JIRA) ---------- */
.modal--lg {
    max-width: 900px;
    width: 90%;
    height: 85vh;
    display: flex;
    flex-direction: column;
}

.task-id-badge {
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.5px;
}

.task-detail {
    display: flex;
    gap: 30px;
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 24px;
}

.task-detail__main {
    flex: 3;
    overflow: visible;
    padding-right: 10px;
}

.task-detail__side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding-left: 24px;
    padding-right: 8px;
    overflow: visible;
}

/* Scrollbar styling for unified detail pane */
.task-detail::-webkit-scrollbar {
    width: 8px;
}

.task-detail::-webkit-scrollbar-track {
    background: transparent;
}

.task-detail::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
}

.task-detail::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

.task-detail__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-primary);
    padding: 4px 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.task-detail__title:focus {
    outline: none;
    border-color: rgba(0, 212, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
}

.task-detail__section {
    margin-bottom: 30px;
}

.task-detail__section h4 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-comments {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.task-comment {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
}

.comment-author {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.comment-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.comment-time {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-left: 8px;
    font-weight: 400;
}

.comment-composer {
    display: flex;
    gap: 10px;
}

.detail-side-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.reporter-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
}

/* ---------- PROFILE VIEW (ENHANCED) ---------- */
.profile-view__content {
    position: relative;
    padding-bottom: 24px;
}

.profile-view__banner {
    height: 100px;
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));
    opacity: 0.3;
}

.profile-view__avatar-wrap {
    margin-top: -65px;
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 12px;
}

.profile-view__avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 5px solid var(--surface-1);
    background: var(--surface-2);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-view__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-view__status-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #22c55e;
    border: 4px solid var(--surface-1);
    position: absolute;
    bottom: 6px;
    left: calc(50% + 35px);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.profile-view__details {
    padding: 20px 24px 0;
    text-align: center;
}

.profile-view__name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    text-align: center;
}

.profile-view__role {
    font-size: 0.95rem;
    color: var(--neon-cyan);
    margin-top: 4px;
    font-weight: 500;
    text-align: center;
}

.profile-view__meta {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.profile-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ---------- GLOBAL TAGS ---------- */
.tag {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.tag--low {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
}

.tag--medium {
    background: rgba(234, 179, 8, 0.1);
    color: #facc15;
}

.tag--high {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.tag--frontend {
    border: 1px solid rgba(0, 212, 255, 0.25);
    color: var(--neon-cyan);
}

.tag--backend {
    border: 1px solid rgba(181, 71, 255, 0.25);
    color: var(--neon-purple);
}

.tag--design {
    border: 1px solid rgba(255, 107, 107, 0.25);
    color: #ff6b6b;
}

.tag--ux {
    border: 1px solid rgba(14, 246, 204, 0.25);
    color: var(--accent-cyan);
}

/* ---------- TOAST ---------- */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 12px 20px;
    border-radius: var(--radius-md);
    background: rgba(16, 18, 40, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    animation: toastIn 0.4s var(--ease-spring) both;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast--success {
    border-color: rgba(34, 197, 94, 0.3);
}

.toast--error {
    border-color: rgba(239, 68, 68, 0.3);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(20px)
    }

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

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(20px)
    }
}

/* ---------- RESPONSIVE ---------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

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

/* ---------- PREMIUM TOUCHES ---------- */
.video-tile--screen {
    width: 80% !important;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
}

.task-id-badge {
    cursor: default;
    transition: background 0.2s;
}

.task-id-badge:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal__header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---------- MESSAGE ACTIONS & REACTIONS ---------- */
.message__header {
    position: relative;
    overflow: visible;
}

.message-actions {
    position: absolute;
    top: -20px;
    right: 0;
    display: none;
    gap: 4px;
    background: rgba(15, 18, 35, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 4px;
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

.message:hover .message-actions {
    display: flex;
}

.msg-action-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s;
}

.msg-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.reaction-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.reaction-tag:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.reaction-tag--active {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.25);
    color: var(--neon-cyan);
}

.reaction-tag span {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ─── Dashboard Panel ───────────────────────────── */
.dashboard-layout {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    overflow-y: auto;
}

.welcome-banner {
    padding: 32px 40px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(14, 246, 204, 0.08) 0%, rgba(123, 47, 247, 0.06) 50%, transparent 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(14, 246, 204, 0.1);
    gap: 24px;
    flex-wrap: wrap;
}

.welcome-banner__content h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #fff 0%, var(--neon-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.welcome-banner__content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.welcome-banner__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.welcome-banner__time {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', monospace;
}

.welcome-banner__actions {
    display: flex;
    gap: 10px;
}

/* Stats Row */
.dash-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.stat-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card__icon--cyan {
    background: rgba(14, 246, 204, 0.12);
    color: var(--neon-cyan);
}

.stat-card__icon--purple {
    background: rgba(123, 47, 247, 0.12);
    color: var(--neon-purple);
}

.stat-card__icon--pink {
    background: rgba(247, 47, 142, 0.12);
    color: var(--neon-pink);
}

.stat-card__icon--green {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.stat-card__data {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Dashboard Grid & Widgets */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.dash-widget {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dash-activity {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Assignee Autocomplete Search */
.assignee-search-wrap {
    position: relative;
}

.assignee-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(15, 18, 35, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    margin-top: 4px;
    display: none;
    box-shadow: var(--shadow-lg);
}

.assignee-results.show {
    display: block;
}

.assignee-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.assignee-result-item:hover {
    background: rgba(14, 246, 204, 0.08);
}

.assignee-result-item .result-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.assignee-result-item .result-role {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-left: auto;
}

.assigned-user-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-top: 6px;
    background: rgba(14, 246, 204, 0.08);
    border: 1px solid rgba(14, 246, 204, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    color: var(--neon-cyan);
}

.assigned-user-tag .remove-assignee {
    cursor: pointer;
    color: var(--text-tertiary);
    display: flex;
    transition: color 0.15s;
    background: none;
    border: none;
    padding: 0;
    margin-left: auto;
}

.assigned-user-tag .remove-assignee:hover {
    color: #f87171;
}

/* ─── Settings Modal ───────────────────────────── */
.settings-layout {
    display: flex;
    gap: 20px;
    height: 400px;
    padding: 0 !important;
}

.settings-sidebar {
    width: 200px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    padding: 16px 0;
}

.settings-tab {
    padding: 14px 24px;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.settings-tab:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

.settings-tab.active {
    color: var(--neon-cyan);
    border-left-color: var(--neon-cyan);
    background: linear-gradient(90deg, rgba(14, 246, 204, 0.08) 0%, transparent 100%);
}

.settings-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.settings-pane h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.theme-options {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-secondary);
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    color: var(--text-secondary);
}

/* ---------- SIDEBAR COLLAPSE ---------- */
.sidebar {
    transition: width var(--duration-slow) var(--ease-spring);
}

.sidebar.collapsed {
    width: 64px;
}

.sidebar.collapsed .sidebar__title h3,
.sidebar.collapsed .sidebar__search,
.sidebar.collapsed .channel-group__label,
.sidebar.collapsed .channel-name,
.sidebar.collapsed .member-count-badge,
.sidebar.collapsed .user-info {
    display: none;
}

.sidebar.collapsed .sidebar__header {
    justify-content: center;
    padding: 16px 0;
}

.sidebar.collapsed .sidebar__title svg {
    display: none;
}

.sidebar.collapsed .channel-item {
    justify-content: center;
    padding: 10px;
}

.sidebar.collapsed .channel-hash {
    width: auto;
    font-size: 1.2rem;
}

/* ─── Dashboard Widgets ───────────────────────────── */
.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.widget-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.widget-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.widget-body::-webkit-scrollbar {
    width: 6px;
}

.widget-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.widget-body::-webkit-scrollbar-track {
    background: transparent;
}

.toggle-icon.collapsed {
    transform: rotate(-90deg);
}

.dash-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s;
}

.dash-task-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px);
}

/* ─── Inbox / Notifications ───────────────────────────── */
.panel--inbox {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.inbox-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inbox-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inbox-item {
    padding: 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--neon-cyan);
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.inbox-item.unread {
    background: rgba(14, 246, 204, 0.05);
}

.nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: bold;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- RESPONSIVE DESIGN (LIQUID GLASS MOBILE) ---------- */

/* Desktop & Large Tablet */
@media (min-width:1025px) {
    .chat-header-logo {
        display: block;
    }
}

/* Tablet */
@media (max-width:1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dash-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .welcome-banner {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .welcome-banner__right {
        align-items: flex-start;
    }

    .welcome-banner__content h1 {
        font-size: 1.5rem;
    }

    .settings-layout {
        flex-direction: column;
        height: auto;
    }

    .settings-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .channel-list {
        width: 220px;
    }

    .kanban-column {
        min-width: 260px;
    }

    .channel-info-panel {
        width: 240px;
    }

    .task-detail {
        gap: 15px;
    }
}

/* Default: hide mobile-only elements on desktop */
.mobile-only-nav { display: none; }
.mobile-header { display: none; }

/* Mobile (Global Fix) */
@media (max-width:768px) {
    .app-shell {
        flex-direction: column;
        padding: 0 !important;
        padding-top: 0 !important; /* Fixed: Removed top gap */
        height: 100vh;
        gap: 0;
        overflow: hidden;
    }

    /* Hide the desktop workspace switcher on mobile */
    .ws-switcher {
        display: none !important;
    }

    .mobile-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        height: 60px !important; /* Increased height for better reach */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(10, 12, 30, 0.9) !important;
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        z-index: 9999 !important; /* Ensure it's above everything */
        pointer-events: auto !important;
    }

    .navigation-bar {
        display: none;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        bottom: 0;
        width: 280px;
        border-radius: 0;
        z-index: 60;
        padding: 0;
        transition: left 0.4s var(--ease-out);
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
        flex-direction: column;
        display: flex !important;
    }

    .sidebar.open {
        left: 0;
    }

    .sidebar-nav-strip {
        display: none;
    }

    .sidebar-main-content {
        height: 100%;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 55;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .main-content {
        flex: 1;
        height: calc(100vh - 60px);
        margin-top: 60px !important;
        overflow: hidden;
    }

    .chat-layout {
        flex-direction: column;
        position: relative;
    }

    .channel-list {
        position: absolute;
        inset: 0;
        width: 100%;
        z-index: 5;
        border-radius: 0;
        background: var(--surface-1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .channel-list.hidden {
        display: none;
    }

    .channel-back-btn {
        display: flex !important;
    }

    .chat-header-logo {
        display: none;
    }

    .chat-main__header {
        padding: 8px 12px;
        height: 50px;
    }

    .chat-main__messages {
        padding: 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chat-main__composer {
        padding: 8px 12px 12px;
    }

    .channel-info-panel {
        display: none !important;
    }

    .kanban-board {
        padding: 10px 12px;
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kanban-column {
        min-width: 85vw;
    }

    .emoji-picker {
        width: calc(100% - 24px);
        left: 12px !important;
        right: 12px !important;
        bottom: 70px !important;
        top: auto !important;
    }

    .members-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .members-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        padding: 16px 12px;
    }

    /* Dashboard Mobile */
    .dashboard-layout {
        padding: 16px;
        gap: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dash-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 14px;
        gap: 10px;
    }

    .stat-number {
        font-size: 1.2rem;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .welcome-banner {
        padding: 24px 20px;
        border-radius: var(--radius-md);
        margin-bottom: 8px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .welcome-banner__content h1 {
        font-size: 1.25rem;
        margin-bottom: 4px;
    }

    .welcome-banner__content p {
        font-size: 0.8rem;
        opacity: 0.8;
    }

    .welcome-banner__actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .welcome-banner__actions .btn {
        width: 100%;
        justify-content: center;
    }

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

    .inbox-header {
        padding: 16px;
    }

    .inbox-list {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Jira Task Detail Mobile */
    .modal--lg {
        width: 95%;
        height: 90vh;
        top: 5vh;
        border-radius: var(--radius-lg);
    }

    .task-detail {
        flex-direction: column;
        overflow-y: auto;
        padding: 16px;
        gap: 20px;
    }

    .task-detail__main {
        padding-right: 0;
    }

    .task-detail__side {
        border-left: none;
        padding-left: 0;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .task-detail__title {
        font-size: 1.3rem;
    }

    /* Video Calls Mobile */
    .video-grid {
        padding: 10px;
        gap: 10px;
    }

    .video-tile {
        width: 100%;
        aspect-ratio: 4/3;
    }

    .video-tile--screen {
        width: 100% !important;
    }

    .call-controls {
        width: 90%;
        padding: 10px;
    }

    .call-btn {
        width: 42px;
        height: 42px;
    }

    /* Auth Mobile */
    .auth-card {
        width: 90%;
        padding: 24px 20px;
    }

    @media (max-width:480px) {
        .modal {
            width: 96%;
        }

        .auth-brand {
            font-size: 1.8rem;
        }

        .dash-stats-row {
            grid-template-columns: 1fr;
        }

        .stat-card__icon {
            width: 36px;
            height: 36px;
        }

        .welcome-banner__right {
            width: 100%;
        }
    }

    /* Profile Modal */
    .modal--profile {
        max-width: 480px;
        padding: 0;
        overflow: hidden;
    }

    .profile-banner {
        height: 120px;
        background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
    }

    .profile-header {
        padding: 0 16px;
        margin-top: -45px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .profile-avatar-large {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        border: 6px solid var(--surface-1);
        background: var(--surface-2);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
    }

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

    .profile-header-actions {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }

    .profile-body {
        padding: 16px;
    }

    .profile-main-info h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #fff;
    }

    .profile-tag {
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

    .profile-section {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .profile-section h4 {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-tertiary);
        margin-bottom: 8px;
    }

    .profile-section p {
        font-size: 0.9rem;
        color: var(--text-secondary);
        line-height: 1.5;
    }

    /* ========== SCROLLING FIX (CRITICAL) ========== */
    .chat-main__messages,
    .channel-list-scroller,
    .dashboard-layout,
    .members-grid,
    .inbox-list,
    .kanban-board,
    .members-rp-content,
    .info-panel__body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    }

    .chat-main__messages::-webkit-scrollbar,
    .channel-list-scroller::-webkit-scrollbar,
    .dashboard-layout::-webkit-scrollbar,
    .members-rp-content::-webkit-scrollbar {
        width: 6px;
    }

    .chat-main__messages::-webkit-scrollbar-thumb,
    .channel-list-scroller::-webkit-scrollbar-thumb,
    .dashboard-layout::-webkit-scrollbar-thumb,
    .members-rp-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .dashboard-layout {
        max-height: calc(100vh - 80px);
    }

    .main-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ========== DM RICH LIST ITEMS ========== */
    .dm-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease-out);
    }

    .dm-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .dm-item--active {
        background: rgba(0, 212, 255, 0.08);
        border-left: 2px solid var(--neon-cyan);
    }

    .dm-item__avatar-wrap {
        position: relative;
        flex-shrink: 0;
    }

    .dm-item__info {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1;
    }

    .dm-item__name {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dm-item__preview {
        font-size: 0.75rem;
        color: var(--text-tertiary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 2px;
    }

    .dm-empty-state {
        padding: 30px 20px;
        text-align: center;
    }

    .dm-empty-state p {
        font-size: 0.8rem;
        color: var(--text-tertiary);
    }

    /* ========== STATUS DOTS ========== */
    .status-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid var(--surface-bg);
        position: absolute;
        bottom: -1px;
        right: -1px;
    }

    .status-dot--online {
        background: #22c55e !important;
        border-color: var(--surface-bg) !important;
    }

    .status-dot--idle {
        background: #f59e0b;
    }

    .status-dot--dnd {
        background: #ef4444;
    }

    .status-dot--offline,
    .status-dot--invisible {
        display: none !important;
    }

    /* ========== MEMBERS RIGHT PANEL ========== */
    .members-right-panel {
        width: 240px;
        min-width: 240px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        border-left: 1px solid var(--glass-border);
        overflow: hidden;
    }

    .members-rp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--glass-border);
    }

    .members-rp-header h4 {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .members-rp-content {
        flex: 1;
        padding: 8px 0;
    }

    .members-group-label {
        padding: 12px 16px 6px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--text-tertiary);
        text-transform: uppercase;
    }

    .member-rp-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 16px;
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease-out);
    }

    .member-rp-item:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    .member-rp-item--offline {
        opacity: 0.5;
    }

    .member-rp-avatar {
        position: relative;
        flex-shrink: 0;
    }

    .member-rp-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .member-rp-name {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .member-rp-role {
        font-size: 0.7rem;
        color: var(--text-tertiary);
    }

    /* ========== HEADER SEARCH BAR ========== */
    .header-search {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: var(--radius-sm);
        min-width: 120px;
        max-width: 180px;
    }

    .header-search input {
        background: none;
        border: none;
        outline: none;
        color: var(--text-primary);
        font-size: 0.8rem;
        width: 100%;
    }

    .header-search input::placeholder {
        color: var(--text-tertiary);
    }

    /* ========== WS LOGO ICON ========== */
    .ws-icon--logo {
        background: rgba(0, 212, 255, 0.1);
        border: 1px solid rgba(0, 212, 255, 0.2);
        border-radius: 16px;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-out);
    }

    .ws-icon--logo:hover {
        background: rgba(0, 212, 255, 0.18);
        border-color: rgba(0, 212, 255, 0.35);
        transform: scale(1.05);
    }

    /* ========== WORKSPACE SETTINGS ========== */
    .ws-settings-icon-section {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 12px 0;
    }

    .ws-settings-icon-preview {
        width: 64px;
        height: 64px;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ws-role-item {
        padding: 14px;
        border-radius: var(--radius-sm);
        margin-bottom: 10px;
    }

    .ws-role-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }

    .ws-role-name {
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--text-primary);
    }

    .ws-role-count {
        font-size: 0.75rem;
        color: var(--text-tertiary);
    }

    .ws-role-desc {
        font-size: 0.78rem;
        color: var(--text-secondary);
        line-height: 1.4;
    }

    /* ========== FORM ROW FIX ========== */
    .form-row {
        display: flex;
        gap: 12px;
    }

    .form-row>.form-group {
        flex: 1;
        min-width: 0;
    }

    /* ========== CHAT LAYOUT FIX ========== */
    .chat-layout {
        display: flex;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
}

/* ========== RESPONSIVE FIXES ========== */
    @media (max-width: 768px) {
        .members-right-panel {
            display: none !important;
        }

        .header-search {
            display: none;
        }

        .form-row {
            flex-direction: column;
        }

        .auth-screen {
            align-items: flex-start;
            padding: 16px;
        }

        .auth-card {
            max-width: 100%;
            margin: 16px auto;
        }

        .mobile-only-nav {
            display: block !important;
            padding: 10px 0;
        }

        .sidebar-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            color: var(--text-secondary);
            margin: 4px 8px;
            border-radius: 8px;
            cursor: pointer;
        }

        .sidebar-item.active {
            background: rgba(99, 102, 241, 0.15);
            color: #818cf8;
        }
    }
}

/* ==========================================
   ADVANCED JIRA-STYLE TASK DETAIL UPGRADES
   ========================================== */
.task-detail {
    display: flex;
    gap: 32px;
    flex: 1;
    overflow-y: auto;
    padding: 0 28px 28px;
}

.task-detail__main {
    flex: 3;
    overflow: visible;
    padding-right: 12px;
}

.task-detail__section {
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02), 0 4px 20px rgba(0, 0, 0, 0.18);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.task-detail__section:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.03), 0 8px 30px rgba(0, 0, 0, 0.28);
}

.task-detail__section h4 {
    font-size: 0.76rem;
    color: var(--neon-cyan);
    margin-top: 0;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(14, 246, 204, 0.25);
}

.task-detail__title {
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-primary);
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.01);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    line-height: 1.3;
}

.task-detail__title:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.08);
}

.task-detail__title:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 16px rgba(14, 246, 204, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.task-detail__section .form-textarea {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 14px 18px;
    font-size: 0.88rem;
    line-height: 1.5;
    transition: all 0.2s ease;
    resize: vertical;
    width: 100%;
}

.task-detail__section .form-textarea:focus {
    border-color: var(--neon-purple);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.18);
    background: rgba(0, 0, 0, 0.3);
}

/* Translucent Attachment Cards */
.attachment-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.attachment-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--neon-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15);
}

/* Chat bubble styling for comments */
.task-comment {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg) !important;
    transition: all 0.2s ease;
}

.task-comment:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}

.comment-composer {
    display: flex;
    gap: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 6px 6px 6px 14px;
    align-items: center;
}

.comment-composer input {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-primary);
    font-size: 0.88rem;
    flex: 1;
}

.comment-composer input:focus {
    outline: none;
    box-shadow: none;
}

/* Sidebar Custom Enhancements */
.detail-side-item {
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s ease;
}

.detail-side-item:hover {
    background: rgba(255, 255, 255, 0.022);
    border-color: rgba(255, 255, 255, 0.06);
}

.detail-side-item label {
    display: block;
    font-size: 0.7rem !important;
    font-weight: 750 !important;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.detail-side-item select.form-input,
.detail-side-item input.form-input {
    background: rgba(0, 0, 0, 0.26) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    padding: 10px 14px !important;
    font-size: 0.84rem !important;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.detail-side-item select.form-input:focus,
.detail-side-item input.form-input:focus {
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 12px rgba(14, 246, 204, 0.2) !important;
    background: rgba(0, 0, 0, 0.36) !important;
}

/* Countdown dynamically alert */
#detail-task-countdown {
    font-size: 0.74rem;
    font-weight: 700;
    margin-top: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(14, 246, 204, 0.08);
    color: var(--neon-cyan);
    border: 1px solid rgba(14, 246, 204, 0.2);
    box-shadow: 0 0 12px rgba(14, 246, 204, 0.05);
    transition: all 0.2s ease;
}

#detail-task-countdown.overdue {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.25);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.12);
}

#detail-task-countdown.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.12);
}

/* Assigned user tags customization */
.assigned-user-tag {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--radius-md) !important;
    padding: 6px 10px !important;
    transition: all 0.2s ease;
}

.assigned-user-tag:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.task-id-badge {
    background: rgba(14, 246, 204, 0.08) !important;
    border: 1px solid rgba(14, 246, 204, 0.2) !important;
    color: var(--neon-cyan) !important;
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(14, 246, 204, 0.3) !important;
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   TASK VIEWS (LIST & CALENDAR)
   ========================================================================== */

/* Task List View */
.list-view-header {
    background: rgba(18, 20, 44, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.list-view-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.list-view-row::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: transparent;
    transition: all 0.3s ease;
}

.list-view-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(14, 246, 204, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(14, 246, 204, 0.1);
}

.list-view-row:hover::before {
    background: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(14, 246, 204, 0.8);
}

.list-task-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Task Calendar View */
.cal-day {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 120px;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02);
}

.cal-day.cal-today {
    background: rgba(14, 246, 204, 0.03);
    border-color: rgba(14, 246, 204, 0.3);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02), 0 0 20px rgba(14, 246, 204, 0.1);
}

.cal-day:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.cal-date-number {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.cal-day.cal-today .cal-date-number {
    background: var(--neon-cyan);
    color: #0b0d1e;
    text-shadow: none;
    box-shadow: 0 0 12px rgba(14, 246, 204, 0.5);
}

.cal-day.cal-other-month .cal-date-number {
    color: rgba(255, 255, 255, 0.15);
}

.cal-task-pill {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cal-task-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.cal-task-pill--todo { border-left-color: rgba(255, 255, 255, 0.5); }
.cal-task-pill--inprogress { border-left-color: var(--neon-purple); background: rgba(168, 85, 247, 0.05); }
.cal-task-pill--review { border-left-color: var(--neon-cyan); background: rgba(14, 246, 204, 0.05); }
.cal-task-pill--done { border-left-color: #10b981; background: rgba(16, 185, 129, 0.05); }
.cal-task-pill--testing { border-left-color: var(--neon-blue); background: rgba(0, 212, 255, 0.05); }
.cal-task-pill--blocked { border-left-color: var(--neon-pink); background: rgba(247, 47, 142, 0.05); }

.task-view-switcher .icon-btn.btn--active {
    background: rgba(14, 246, 204, 0.1) !important;
    color: var(--neon-cyan) !important;
    border-color: rgba(14, 246, 204, 0.3) !important;
    box-shadow: 0 0 15px rgba(14, 246, 204, 0.2), inset 0 0 8px rgba(14, 246, 204, 0.1) !important;
}

/* ========== CLERK AUTH CUSTOM GLASS THEMING ========== */
/* Outermost containers */
.cl-rootBox,
.cl-cardBox,
.cl-card,
.cl-signIn-start,
.cl-signUp-start,
.cl-main,
.cl-pageScrollable {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Hide Clerk's internal brand titles since we already display a gorgeous animated logo at the top */
.cl-headerTitle,
.cl-headerSubtitle,
.cl-header .cl-logoImage,
.cl-header .cl-logoBox {
    display: none !important;
}

/* Social Login buttons (e.g. Google, Apple) */
.cl-socialButtonsIconButton,
.cl-socialButtonsBlockButton {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f8fafc !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.25s var(--ease-out) !important;
    height: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.cl-socialButtonsIconButton:hover,
.cl-socialButtonsBlockButton:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Ensure Google and Apple logos / icons are always visible on mobile & desktop */
.cl-socialButtonsBlockButtonIcon,
.cl-socialButtonsIconButtonIcon,
.cl-socialButtonsProviderIcon,
.cl-providerIcon,
.cl-socialButtonsBlockButton svg,
.cl-socialButtonsBlockButton img,
.cl-socialButtonsIconButton svg,
.cl-socialButtonsIconButton img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
}

/* Social Buttons text & icon */
.cl-socialButtonsBlockButtonText {
    color: #f8fafc !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
}

/* Form field input styling */
.cl-formFieldInput {
    width: 100% !important;
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-md) !important;
    color: #f8fafc !important;
    font-size: 0.85rem !important;
    transition: all 0.2s var(--ease-out) !important;
    height: auto !important;
}

.cl-formFieldInput:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2) !important;
    outline: none !important;
}

/* Labels and captions */
.cl-formFieldLabel {
    color: var(--text-secondary) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.cl-formFieldWarningText,
.cl-formFieldErrorText {
    font-size: 0.75rem !important;
}

/* Primary Button (Continue, Sign In, Sign Up) */
.cl-formButtonPrimary {
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 20px !important;
    height: auto !important;
    transition: all 0.3s var(--ease-out) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2) !important;
    cursor: pointer !important;
}

.cl-formButtonPrimary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.35) !important;
}

/* Divider styling */
.cl-dividerRow {
    margin: 16px 0 !important;
}

.cl-dividerLine {
    background: rgba(255, 255, 255, 0.08) !important;
}

.cl-dividerText {
    color: var(--text-tertiary) !important;
    font-size: 0.75rem !important;
    background: transparent !important;
    padding: 0 8px !important;
}

/* Footer links and action styling */
.cl-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px !important;
    padding-top: 12px !important;
}

.cl-footerActionText {
    color: var(--text-tertiary) !important;
    font-size: 0.8rem !important;
}

.cl-footerActionLink {
    color: var(--neon-cyan) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    transition: all 0.2s var(--ease-out) !important;
    text-decoration: none !important;
}

.cl-footerActionLink:hover {
    color: var(--neon-purple) !important;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.4) !important;
}

/* Profile pre-view info */
.cl-identityPreview {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 12px !important;
}

.cl-identityPreviewText {
    color: #f8fafc !important;
}

.cl-identityPreviewEditButton {
    color: var(--neon-cyan) !important;
}

.cl-identityPreviewEditButton:hover {
    color: var(--neon-purple) !important;
}

/* User Profile & Other Components */
.cl-userButtonPopoverCard {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.cl-userButtonPopoverActionButton {
    color: var(--text-secondary) !important;
}

.cl-userButtonPopoverActionButton:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}
/* ---- Clerk: checkbox rows (e.g. reset password → "Sign out of all other devices") ---- */
.cl-formFieldRow:has(input[type="checkbox"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}
.cl-formFieldRow:has(input[type="checkbox"]) .cl-formFieldLabel,
.cl-formFieldLabel__signOutOfOtherSessions {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    color: var(--text-primary) !important;
    text-align: left !important;
    min-width: 0 !important;
}
.cl-formFieldRow input[type="checkbox"],
.cl-checkbox,
.cl-formFieldInput[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: var(--neon-cyan, #00d4ff) !important;
    cursor: pointer !important;
}
/* Make the reset-password card breathe so the row has room */
.cl-card, .cl-cardBox, .cl-rootBox {
    width: 100% !important;
    max-width: 100% !important;
}

/* =====================================================================
   SLICE 1 — Responsive refinements (tablet + mobile)
   Extends existing breakpoints without replacing them.
   ===================================================================== */

/* ---------- Modal scroll hygiene (all sizes) ---------- */
.modal { display: flex; flex-direction: column; }
.modal__header { position: sticky; top: 0; background: inherit; backdrop-filter: blur(20px); }
.modal__footer { position: sticky; bottom: 0; background: inherit; backdrop-filter: blur(20px); }
.modal__body {
    /* Single scroll container — prevents double scrollbars in nested content */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.modal__body > *,
.task-detail__main,
.task-detail__side {
    overflow: visible !important;
}

/* ---------- Tablet (769px – 1180px), e.g. iPad portrait/landscape ---------- */
@media (min-width: 769px) and (max-width: 1180px) {
    /* Narrower sidebar gives the board more room */
    .sidebar { width: 240px; min-width: 240px; }

    /* Collapse workspace switcher rail to icon-only */
    .ws-switcher { width: 56px; min-width: 56px; }
    .ws-switcher .ws-name,
    .ws-switcher .ws-label { display: none; }

    /* Task board: 2 columns instead of 4 on tablet, horizontal scroll for overflow */
    .kanban-board { gap: 14px; padding: 14px; }
    .kanban-column { min-width: 280px; max-width: 360px; flex: 1 1 280px; }

    /* Task detail: stack side panel below main on narrow viewports */
    .task-detail { gap: 18px; }
    .task-detail__main { flex: 1 1 100%; min-width: 0; }
    .task-detail__side {
        flex: 1 1 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-left: 0;
        padding-top: 18px;
    }

    /* Modals: give breathing room without exceeding viewport */
    .modal { max-width: 92vw; }
    .modal--lg { max-width: 94vw; height: 88vh; top: 6vh; }
    .modal__body { max-height: calc(88vh - 130px); }

    /* Dashboard: 2-col stats, single-col grid */
    .dash-stats-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .dashboard-grid { grid-template-columns: 1fr; }

    /* Channel info panel narrower */
    .channel-info-panel { width: 220px; }

    /* Tighter chat composer */
    .chat-main__header { padding: 10px 14px; }
    .chat-main__messages { padding: 14px; }

    /* Attachments grid: 3 columns max */
    .detail-attachments-list { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- Mobile polish (<=768) ---------- */
@media (max-width: 768px) {
    /* Compact typography across the board */
    body { font-size: 14px; }
    h1 { font-size: 1.35rem !important; }
    h2 { font-size: 1.15rem !important; }
    h3 { font-size: 1rem !important; }
    .btn { padding: 8px 12px; font-size: 0.8rem; }
    .btn--small { padding: 6px 10px; font-size: 0.7rem; }

    /* Task detail becomes a full-screen sheet */
    .modal--lg {
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
    .modal--lg .modal__body { max-height: calc(100vh - 110px); }

    /* Task detail spacing */
    .task-detail { padding: 12px; gap: 16px; }
    .task-detail__title { font-size: 1.15rem !important; line-height: 1.3; }
    .task-detail__section { padding: 12px 0; }
    .task-detail__section h4 { font-size: 0.75rem; }

    /* Attachments: 2 columns on phones */
    .detail-attachments-list { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }

    /* Kanban one column full-width with snap scroll */
    .kanban-board { scroll-snap-type: x mandatory; }
    .kanban-column { scroll-snap-align: start; min-width: 88vw; }

    /* Dashboard tightening */
    .welcome-banner { padding: 18px 16px !important; }
    .dash-stats-row { gap: 8px; }
    .stat-card { padding: 12px; }
    .stat-number { font-size: 1.1rem; }

    /* Sticky comment composer in task detail */
    .task-detail .comments-composer,
    .task-detail__comments-input {
        position: sticky;
        bottom: 0;
        background: rgba(10, 12, 30, 0.92);
        backdrop-filter: blur(20px);
        padding: 10px 0;
        margin: 0 -12px -12px;
        padding-left: 12px;
        padding-right: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Avoid horizontal overflow on long titles/desc */
    .task-detail, .modal__body { word-break: break-word; }

    /* Mobile header avatar/buttons larger tap targets */
    .mobile-header button,
    .mobile-header .icon-btn { min-width: 40px; min-height: 40px; }

    /* Settings: full-width tabs become wrapping pills */
    .settings-sidebar { padding: 8px; gap: 6px; flex-wrap: nowrap; }
    .settings-sidebar button { font-size: 0.75rem; padding: 8px 10px; white-space: nowrap; }

    /* Forms: stack rows */
    .form-row { flex-direction: column; gap: 10px; }
}

/* ---------- Small phones (<=420) ---------- */
@media (max-width: 420px) {
    .detail-attachments-list { grid-template-columns: 1fr !important; }
    .dash-stats-row { grid-template-columns: 1fr !important; }
    .modal__header { padding: 14px 14px; }
    .modal__footer { padding: 12px 14px; flex-direction: column-reverse; gap: 8px; }
    .modal__footer .btn { width: 100%; }
    .task-detail__side { padding-top: 12px; }
}

/* ============================================================
   MOBILE / TABLET DRAWER — Show real desktop rail + sidebar
   shrunken inside the slide-in drawer (instead of a separate
   "mobile-only-nav" list). Triggered by body.mobile-nav-open.
   ============================================================ */
@media (max-width: 1024px) {
    /* Mobile menu: show ONLY the menu list, not the desktop rail or
       the workspace sidebar contents underneath it. */
    body.mobile-nav-open .ws-switcher { display: none !important; }
    body.mobile-nav-open .sidebar.open .sidebar-main-content { display: none !important; }
    body.mobile-nav-open .sidebar.open {
        left: 0 !important;
        top: 60px;
        width: min(86vw, 320px);
        max-width: 320px;
        bottom: 0;
        box-shadow: 18px 0 40px rgba(0,0,0,0.55);
        display: flex !important;
        flex-direction: column;
        animation: drawerSlideIn 0.28s var(--ease-out, ease-out);
    }
    body.mobile-nav-open .mobile-only-nav {
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        padding: 12px 8px;
        overflow-y: auto;
    }
    body.mobile-nav-open .mobile-only-nav .sidebar-item {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px; border-radius: 10px;
        color: var(--text-secondary, #b8c0d0);
        cursor: pointer; font-size: 0.9rem;
        transition: background 0.15s, color 0.15s;
    }
    body.mobile-nav-open .mobile-only-nav .sidebar-item:hover,
    body.mobile-nav-open .mobile-only-nav .sidebar-item--active {
        background: rgba(0,212,255,0.08);
        color: var(--neon-cyan, #00d4ff);
    }
    body.mobile-nav-open .mobile-only-nav .mws-icon {
        width: 32px; height: 32px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.06);
        font-weight: 700; font-size: 0.85rem;
        color: var(--text-primary, #fff);
    }

    @keyframes drawerSlideIn {
        from { transform: translateX(-100%); opacity: 0.3; }
        to   { transform: translateX(0);     opacity: 1; }
    }
}

/* ============================================
   DISCORD-LEVEL MESSAGE FEATURES (additive)
   ============================================ */
.message-reply-quote {
  display: flex; gap: 8px; align-items: center;
  padding: 4px 10px; margin: 0 0 4px 0;
  border-left: 2px solid var(--neon-cyan, #00d4ff);
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  font-size: 0.78rem; cursor: pointer;
  color: var(--text-secondary, #b8c0d0);
  max-width: 100%;
  transition: background 0.15s;
}
.message-reply-quote:hover { background: rgba(0,212,255,0.08); }
.message-reply-quote--missing { opacity: 0.5; cursor: default; font-style: italic; }
.reply-quote-author { color: var(--neon-cyan, #00d4ff); font-weight: 600; }
.reply-quote-text { color: var(--text-tertiary, #8892a8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg-pinned-badge { margin-left: 6px; font-size: 0.7rem; opacity: 0.8; }
.msg-edited-tag { font-size: 0.7rem; color: var(--text-tertiary, #8892a8); margin-left: 4px; }

.reply-preview-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 0 14px 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,212,255,0.3);
  background: rgba(0,212,255,0.06);
  font-size: 0.8rem;
}
.reply-preview-label { color: var(--neon-cyan, #00d4ff); font-weight: 500; }
.reply-preview-text { color: var(--text-secondary, #b8c0d0); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.message--flash {
  animation: msgFlash 1.4s ease-out;
}
@keyframes msgFlash {
  0% { background: rgba(0,212,255,0.25); }
  100% { background: transparent; }
}

/* Context / mute menu */
.context-menu {
  z-index: 9999; padding: 6px; min-width: 200px;
  border-radius: 10px;
  background: rgba(20,22,32,0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.context-menu__item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: 6px;
  background: transparent; border: 0; color: var(--text-primary, #fff);
  font-size: 0.82rem; cursor: pointer;
}
.context-menu__item:hover { background: rgba(0,212,255,0.12); color: var(--neon-cyan, #00d4ff); }

.icon-btn--muted { color: var(--neon-cyan, #00d4ff); position: relative; }
.icon-btn--muted::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%;
  height: 2px; background: currentColor; transform: rotate(-25deg);
  border-radius: 2px;
}

/* Pinned panel modal */
.pinned-panel-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn 0.18s ease-out;
}
.pinned-panel {
  width: min(560px, 100%); max-height: 80vh;
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
}
.pinned-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pinned-panel__header h3 { margin: 0; font-size: 1rem; }
.pinned-panel__body { padding: 12px; overflow-y: auto; }
.pinned-item {
  padding: 10px 12px; margin-bottom: 8px; border-radius: 8px;
  background: rgba(255,255,255,0.04); cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s, border-color 0.15s;
}
.pinned-item:hover { background: rgba(0,212,255,0.08); border-color: rgba(0,212,255,0.3); }
.pinned-item__author { font-size: 0.75rem; font-weight: 600; color: var(--neon-cyan, #00d4ff); margin-bottom: 4px; }
.pinned-item__time { color: var(--text-tertiary, #8892a8); font-weight: 400; margin-left: 6px; }
.pinned-item__text { font-size: 0.85rem; color: var(--text-secondary, #b8c0d0); line-height: 1.4; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   DISCORD-STYLE CONVERSATION INTRO + DM PROFILE PANEL
   (Liquid-glass aesthetic preserved)
   ============================================================ */

.convo-intro {
  padding: 48px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  margin-bottom: 16px;
  position: relative;
}
.convo-intro--channel { align-items: flex-start; }
.convo-intro--dm { align-items: flex-start; }

.convo-intro__hashbubble {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(120,90,255,0.25), rgba(0,200,255,0.18));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px -10px rgba(120,90,255,0.45);
  font-size: 36px; color: var(--text-primary, #fff); font-weight: 700;
}
.convo-intro__avatar .avatar { width: 76px; height: 76px; font-size: 28px; }
.convo-intro__avatar .avatar img { width: 100%; height: 100%; object-fit: cover; }

.convo-intro__title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800;
  margin: 4px 0 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.convo-intro__handle {
  font-size: 0.95rem;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  margin: 0;
}
.convo-intro__sub {
  font-size: 0.95rem;
  color: var(--text-secondary, rgba(255,255,255,0.7));
  margin: 0;
  max-width: 600px;
  line-height: 1.5;
}
.convo-intro__chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.intro-chip {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  color: var(--text-secondary, rgba(255,255,255,0.8));
  font-size: 0.82rem;
  cursor: pointer;
  transition: all .2s ease;
}
.intro-chip:hover {
  background: rgba(120,90,255,0.18);
  border-color: rgba(120,90,255,0.45);
  color: #fff;
  transform: translateY(-1px);
}

.convo-empty-hint {
  padding: 20px 32px;
  color: var(--text-tertiary, rgba(255,255,255,0.5));
  font-size: 0.9rem;
}

/* DM Profile Right Panel */
.dm-profile-panel {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  margin-left: 12px;
  background: rgba(20, 22, 36, 0.55);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.dm-profile-banner {
  height: 100px;
  background: linear-gradient(135deg, #7b5cff 0%, #00c8ff 100%);
  position: relative;
}
.dm-profile-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(255,255,255,0.15), transparent 60%);
}
.dm-profile-avatar-wrap {
  position: relative;
  margin: -60px auto 0;
  width: 120px; height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dm-profile-avatar-wrap .avatar,
.dm-profile-avatar-wrap > div > .avatar {
  width: 120px; height: 120px;
  border: 5px solid rgba(20,22,36,0.95);
  border-radius: 50%;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,0.6);
  font-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-profile-avatar-wrap .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dm-profile-status-dot {
  position: absolute;
  bottom: 6px; right: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 4px solid rgba(20,22,36,0.95);
}
.dm-profile-status-dot.status-dot--online { background: #23d160; }
.dm-profile-status-dot.status-dot--offline { background: #6b7280; }

.dm-profile-body {
  padding: 14px 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dm-profile-name {
  font-size: 1.5rem; font-weight: 800; margin: 10px 0 4px;
  letter-spacing: -0.01em;
  text-align: center;
}
.dm-profile-handle {
  font-size: 0.85rem; color: var(--text-tertiary, rgba(255,255,255,0.55)); margin: 0 0 14px;
  text-align: center;
}
.dm-profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; justify-content: center; }
.dm-badge {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary, rgba(255,255,255,0.8));
}
.dm-badge--admin {
  background: linear-gradient(135deg, rgba(255,180,0,0.2), rgba(255,90,90,0.15));
  border-color: rgba(255,180,0,0.4);
  color: #ffd479;
}
.dm-profile-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.dm-profile-section h5 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary, rgba(255,255,255,0.5));
  margin: 0 0 6px;
  font-weight: 700;
}
.dm-profile-bio, .dm-profile-meta {
  font-size: 0.85rem; color: var(--text-secondary, rgba(255,255,255,0.78));
  margin: 0; line-height: 1.45;
}
.dm-profile-mutual { display: flex; flex-direction: column; gap: 6px; }
.mutual-ws {
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary, rgba(255,255,255,0.85));
  border: 1px solid rgba(255,255,255,0.06);
}

/* Refine xl avatar size */
.avatar--xl { width: 120px !important; height: 120px !important; font-size: 44px !important; }

/* Mobile: hide DM profile panel */
@media (max-width: 1100px) {
  .dm-profile-panel { display: none !important; }
}

/* === Channel header refinements === */
.icon-btn--caret { padding: 4px 6px !important; margin-left: -6px; opacity: 0.7; }
.icon-btn--caret:hover { opacity: 1; }
#current-channel-name { cursor: default; }
.icon-btn--muted { color: #ef4444 !important; position: relative; }
.icon-btn--muted::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 22px; height: 2px; background: #ef4444; transform: rotate(-45deg);
    border-radius: 2px; pointer-events: none;
}

/* ============ HIDE CLERK DEVELOPMENT BADGE ============ */
.cl-internal-1dauvpw,
.cl-internal-b3fm6y,
.cl-developmentModeIndicator,
.cl-development-mode,
[class*="cl-internal"][class*="evelopment"],
[data-clerk-internal-dev-mode-badge],
a[href*="clerk.com"][class*="cl-internal"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============ CALL BUTTONS ============ */
.call-btn { color: var(--text-muted, #c8d2e0); transition: color .15s, background .15s; }
.call-btn:hover { color: var(--neon-cyan, #22d3ee); background: rgba(34,211,238,0.10); }
.call-btn--active { color: #22d3ee !important; background: rgba(34,211,238,0.16) !important; }

/* ============ CALL OVERLAY ============ */
.call-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: radial-gradient(ellipse at top, rgba(20,30,55,0.92), rgba(5,10,20,0.96));
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    display: flex; align-items: center; justify-content: center;
    animation: callFadeIn .25s ease;
}
.call-overlay.call-overlay--mini {
    inset: auto 20px 20px auto; width: 320px; height: 220px;
    background: transparent; backdrop-filter: none;
}
.call-overlay.call-overlay--mini .call-shell { width: 100%; height: 100%; }
.call-overlay.call-overlay--mini .call-header__info > div:not(.call-timer) { display:none; }

@keyframes callFadeIn { from { opacity: 0; transform: scale(.96);} to {opacity:1; transform:scale(1);} }

.call-shell {
    width: min(960px, 94vw); height: min(640px, 88vh);
    display: flex; flex-direction: column;
    border-radius: 22px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10, 18, 36, 0.78);
    box-shadow: 0 30px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(34,211,238,0.06);
}
.call-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.call-header__info { display: flex; flex-direction: column; gap: 2px; }
.call-status { font-size: .72rem; color: #22d3ee; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.call-title { font-size: 1.05rem; font-weight: 600; color: #fff; }
.call-timer { font-size: .8rem; color: #94a3b8; font-variant-numeric: tabular-nums; }

.call-stage {
    flex: 1; position: relative; background: #050912;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#call-remote-video {
    width: 100%; height: 100%; object-fit: cover; background: #050912;
}
#call-local-video {
    position: absolute; bottom: 100px; right: 18px;
    width: 140px; height: 200px;
    object-fit: cover; border-radius: 16px;
    border: 2px solid rgba(34,211,238,0.4);
    background: #0a1224; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    transform: scaleX(-1);
    z-index: 5;
}
.call-empty {
    position: absolute; color: #94a3b8; font-size: .9rem;
    padding: 14px 22px; border-radius: 999px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}

.call-controls {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 18px; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.05);
}
.call-ctrl {
    width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06); color: #e6eef9;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform .15s, background .15s, color .15s;
}
.call-ctrl:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); }
.call-ctrl.call-ctrl--off { background: rgba(239,68,68,0.18); color: #fca5a5; border-color: rgba(239,68,68,0.4); }
.call-ctrl.call-ctrl--on  { background: rgba(34,211,238,0.20); color: #67e8f9; border-color: rgba(34,211,238,0.45); }
.call-ctrl--end { background: #ef4444; border-color: #ef4444; color: #fff; }
.call-ctrl--end:hover { background: #dc2626; }
.call-ctrl--accept { background: #10b981; border-color: #10b981; color: #fff; }
.call-ctrl--accept:hover { background: #059669; }

/* Incoming call toast */
.incoming-call {
    position: fixed; top: 20px; right: 20px; z-index: 10000;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; min-width: 280px;
    border-radius: 14px; border: 1px solid rgba(34,211,238,0.35);
    background: rgba(10,18,36,0.92); backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(34,211,238,0.15);
    animation: callFadeIn .2s ease, incomingPulse 1.4s ease-in-out infinite;
}
@keyframes incomingPulse {
    0%,100% { box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 0 rgba(34,211,238,0.4); }
    50%     { box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 8px rgba(34,211,238,0); }
}
.incoming-call__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #22d3ee, #6366f1);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: .95rem; flex-shrink: 0;
}
.incoming-call__body { flex: 1; min-width: 0; }
.incoming-call__name { color: #fff; font-weight: 600; font-size: .92rem; }
.incoming-call__type { color: #94a3b8; font-size: .75rem; margin-top: 2px; }
.incoming-call__actions { display: flex; gap: 8px; }
.incoming-call__actions .call-ctrl { width: 38px; height: 38px; }

@media (max-width: 720px) {
    .call-shell { width: 100vw; height: 100vh; border-radius: 0; }
    #call-local-video { width: 120px; height: 170px; bottom: 90px; right: 12px; border-radius: 14px; }
    .incoming-call { left: 12px; right: 12px; top: 12px; min-width: 0; }
}

/* ============================================
   MOBILE SLIDE-OUT NAV
   ============================================ */
.mobile-slide-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  z-index: 10000;
  background: rgba(10, 12, 28, 0.97);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: 20px 0 60px rgba(0,0,0,0.7);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-slide-nav.open {
  transform: translateX(0);
}
.mobile-slide-nav__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-weight: 700;
  font-size: 1rem;
}
.mobile-slide-nav__header .icon-btn {
  margin-left: auto;
}
.mobile-slide-nav__items {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}
.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.mobile-nav-item:hover,
.mobile-nav-item.active {
  background: rgba(0, 212, 255, 0.08);
  color: var(--neon-cyan);
}
.mobile-nav-item.active {
  border-left: 3px solid var(--neon-cyan);
}
.mobile-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 8px 20px;
}
.mobile-nav-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  padding: 8px 20px 4px;
  text-transform: uppercase;
}
.mobile-ws-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.mobile-ws-item:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.mobile-ws-item.active { background: rgba(0, 212, 255, 0.08); color: var(--neon-cyan); }
.mobile-ws-item .ws-icon {
  width: 36px; height: 36px; font-size: 0.85rem;
  border-radius: 12px; flex-shrink: 0;
}
.mobile-slide-nav__channels {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}
.mobile-nav-back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s;
}
.mobile-nav-back:hover { color: var(--neon-cyan); }
.mobile-ch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.mobile-ch-item:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.mobile-ch-item.active { background: rgba(0, 212, 255, 0.08); color: var(--neon-cyan); }

/* ============================================
   FUTURISTIC LOADING SPINNER
   ============================================ */
.nexus-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 18, 0.95);
  backdrop-filter: blur(20px);
}
.nexus-loader {
  position: relative;
  width: 80px;
  height: 80px;
}
.nexus-loader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}
.nexus-loader__ring--outer {
  border-top-color: var(--neon-cyan);
  border-right-color: rgba(0, 212, 255, 0.3);
  animation: nexusSpin 1.2s linear infinite;
}
.nexus-loader__ring--middle {
  inset: 8px;
  border-bottom-color: var(--neon-purple);
  border-left-color: rgba(123, 47, 247, 0.3);
  animation: nexusSpin 1.8s linear infinite reverse;
}
.nexus-loader__ring--inner {
  inset: 16px;
  border-top-color: var(--neon-pink);
  border-right-color: rgba(247, 47, 142, 0.2);
  animation: nexusSpin 2.4s linear infinite;
}
.nexus-loader__core {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.3), transparent 70%);
  animation: nexusPulse 2s ease-in-out infinite;
}
@keyframes nexusSpin {
  to { transform: rotate(360deg); }
}
@keyframes nexusPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}
.nexus-loader-text {
  margin-top: 24px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  animation: nexusTextPulse 2s ease-in-out infinite;
}
@keyframes nexusTextPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ============================================
   FUTURISTIC PIN BUTTON
   ============================================ */
.nexus-pin-btn {
  position: relative;
}
.nexus-pin-btn:hover svg {
  filter: drop-shadow(0 0 4px var(--neon-cyan));
  color: var(--neon-cyan);
}
.nexus-pin-btn.has-pins::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 6px var(--neon-cyan);
}

/* ============================================
   RIGHT-CLICK CONTEXT MENU
   ============================================ */
.nexus-context-menu {
  position: fixed;
  z-index: 99990;
  min-width: 200px;
  max-width: 260px;
  background: rgba(14, 16, 36, 0.97);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  padding: 6px 0;
  animation: ctxIn 0.15s var(--ease-spring);
}
@keyframes ctxIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.nexus-context-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.nexus-context-menu__item:hover {
  background: rgba(0, 212, 255, 0.1);
  color: var(--text-primary);
}
.nexus-context-menu__item--danger { color: #ed4245; }
.nexus-context-menu__item--danger:hover { background: rgba(237,66,69,0.12); color: #ff5558; }
.nexus-context-menu__sep {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 8px;
}

/* ============================================
   MESSAGE REACTIONS INLINE
   ============================================ */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.msg-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
}
.msg-reaction:hover {
  background: rgba(0, 212, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.3);
}
.msg-reaction.reacted {
  background: rgba(0, 212, 255, 0.15);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

/* ============================================
   REPLY THREAD INDICATOR
   ============================================ */
.msg-reply-ref {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  border-left: 2px solid var(--neon-purple);
  border-radius: 0 4px 4px 0;
  background: rgba(123, 47, 247, 0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.msg-reply-ref:hover {
  background: rgba(123, 47, 247, 0.12);
  color: var(--text-secondary);
}

/* ============================================
   PINNED MESSAGE BADGE IN MESSAGES
   ============================================ */
.msg-pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: var(--neon-cyan);
  margin-left: 8px;
  opacity: 0.7;
}

/* ============================================
   DOUBLE SCROLLBAR FIX
   ============================================ */
.app-shell { overflow: hidden !important; }
.main-content { overflow: hidden !important; }
.chat-main { overflow: hidden !important; display: flex; flex-direction: column; }
.chat-main__messages {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* ============================================
   MEMBER PANEL TOGGLE-ONLY
   ============================================ */
.member-panel-toggle-active {
  color: var(--neon-cyan) !important;
  background: rgba(0, 212, 255, 0.1) !important;
}

/* ============================================
   DM USER DISCOVERY SEARCH
   ============================================ */
.dm-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: rgba(14, 16, 36, 0.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  z-index: 100;
}
.dm-search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  color: var(--text-primary);
}
.dm-search-result-item:hover {
  background: rgba(0, 212, 255, 0.08);
}
.dm-search-result-item .user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dm-search-result-item .user-name {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-search-result-item .user-email {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   PASSWORD TOGGLE EYE ICON FIX
   ============================================ */
.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.password-toggle-btn:hover { color: var(--text-primary); }

/* ============================================
   ENHANCED MEMBER PANEL (Online/Offline groups)
   ============================================ */
.member-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 12px 16px 4px;
}
.member-group-label:first-child { padding-top: 8px; }

/* Optimistic UI styling */
.message--optimistic {
    opacity: 0.6;
    pointer-events: none;
}

.avatar-edit-container:hover {
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}
#edit-avatar-preview-trigger:hover .avatar-edit-badge {
    transform: scale(1.1);
    background-color: #fff !important;
}

/* ============================================================
   THEME SYSTEM — data-theme on <html>
   Defaults to "glass" (existing liquid-glass aesthetic).
   ============================================================ */
html[data-theme="dark"] {
    --surface-bg: #07080f;
    --surface-1: rgba(20, 22, 32, 0.92);
    --surface-2: rgba(26, 28, 40, 0.9);
    --surface-3: rgba(34, 36, 50, 0.9);
    --glass-bg: rgba(18, 20, 30, 0.92);
    --glass-border: rgba(255,255,255,0.06);
    --glass-blur: 0px;
}
html[data-theme="dark"] .bg-orb,
html[data-theme="dark"] .light-streak,
html[data-theme="dark"] .bg-grid { opacity: 0.18 !important; }

html[data-theme="light"] {
    --surface-bg: #f4f6fb;
    --surface-1: rgba(255, 255, 255, 0.92);
    --surface-2: rgba(248, 250, 255, 0.9);
    --surface-3: rgba(240, 244, 252, 0.95);
    --surface-inner: rgba(0, 0, 0, 0.02);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-border-hover: rgba(15, 23, 42, 0.16);
    --glass-blur: 14px;
    --glass-glow: 0 0 30px rgba(99, 102, 241, 0.08);
    --text-primary: rgba(15, 23, 42, 0.92);
    --text-secondary: rgba(15, 23, 42, 0.62);
    --text-tertiary: rgba(15, 23, 42, 0.38);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 18px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] body { color: var(--text-primary); background: var(--surface-bg); }
html[data-theme="light"] .bg-orb,
html[data-theme="light"] .light-streak { opacity: 0.35 !important; mix-blend-mode: multiply; }
html[data-theme="light"] .bg-grid { opacity: 0.06 !important; }
html[data-theme="light"] .bg-noise { opacity: 0.02 !important; }

/* ============================================================
   MOBILE MENU REWRITE — mirror desktop sidebar, shrunk.
   Replaces the old mobile-only-nav list.
   ============================================================ */
@media (max-width: 900px) {
    body.mobile-nav-open .mobile-only-nav { display: none !important; }
    body.mobile-nav-open .ws-switcher {
        display: flex !important;
        position: fixed; left: 0; top: 0; bottom: 0;
        width: 60px; z-index: 1001;
        transform: translateX(0) !important;
    }
    body.mobile-nav-open .sidebar.open {
        left: 60px !important;
        width: calc(100vw - 60px) !important;
        max-width: 320px;
        z-index: 1000;
    }
    body.mobile-nav-open .sidebar.open .sidebar-main-content { display: flex !important; }
    .ws-switcher .ws-icon { width: 44px; height: 44px; }
}

/* ============================================================
   FRIENDS PANEL
   ============================================================ */
.friends-tabs {
    display: flex; gap: 4px; padding: 8px 12px;
    border-bottom: 1px solid var(--glass-border);
    overflow-x: auto;
}
.friends-tab {
    padding: 6px 12px; border-radius: var(--radius-md);
    background: transparent; border: none; color: var(--text-secondary);
    font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-out);
}
.friends-tab:hover { background: var(--surface-2); color: var(--text-primary); }
.friends-tab.active { background: var(--neon-cyan); color: #001016; }
.friends-tab .badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    border-radius: 999px; background: var(--neon-pink); color: white;
    font-size: 10px; font-weight: 700;
}
.friend-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-md);
    cursor: pointer; transition: background var(--duration-fast);
}
.friend-row:hover { background: var(--surface-2); }
.friend-row__info { flex: 1; min-width: 0; }
.friend-row__name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.friend-row__sub { font-size: 11px; color: var(--text-tertiary); }
.friend-row__actions { display: flex; gap: 6px; }
.friend-action-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--glass-border);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-secondary);
    transition: all var(--duration-fast);
}
.friend-action-btn:hover { background: var(--surface-3); color: var(--text-primary); }
.friend-action-btn.accept:hover { background: rgba(34,197,94,0.2); color: #4ade80; }
.friend-action-btn.decline:hover { background: rgba(239,68,68,0.2); color: #f87171; }
.friend-empty {
    text-align: center; padding: 32px 16px; color: var(--text-tertiary); font-size: 12px;
}

/* Add Friend form */
.add-friend-form { padding: 12px; }
.add-friend-form input {
    width: 100%; padding: 10px 14px; border-radius: var(--radius-md);
    background: var(--surface-2); border: 1px solid var(--glass-border);
    color: var(--text-primary); font-size: 13px;
}
.add-friend-form input:focus { outline: none; border-color: var(--neon-cyan); }
.add-friend-results { margin-top: 8px; max-height: 320px; overflow-y: auto; }

/* ============================================================
   PROFILE VIEWER MODAL
   ============================================================ */
.profile-viewer { max-width: 420px; width: 92vw; padding: 0 !important; overflow: hidden; }
.profile-viewer__banner {
    height: 110px; background: linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));
    position: relative;
}
.profile-viewer__avatar {
    width: 96px; height: 96px; border-radius: 50%;
    border: 5px solid var(--surface-bg);
    position: absolute; left: 20px; bottom: -48px;
    background-size: cover; background-position: center;
    background-color: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; font-weight: 700; color: white;
    cursor: zoom-in;
}
.profile-viewer__body { padding: 60px 20px 20px; }
.profile-viewer__name { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.profile-viewer__handle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.profile-viewer__about {
    margin-top: 14px; padding: 12px; border-radius: var(--radius-md);
    background: var(--surface-2); font-size: 13px; color: var(--text-secondary);
    line-height: 1.5; white-space: pre-wrap;
}
.profile-viewer__section-label {
    margin-top: 16px; font-size: 11px; font-weight: 700;
    color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em;
}
.profile-viewer__mutuals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.profile-viewer__mutual-chip {
    padding: 4px 10px; border-radius: 999px; background: var(--surface-2);
    border: 1px solid var(--glass-border); font-size: 11px; color: var(--text-secondary);
}
.profile-viewer__actions { display: flex; gap: 8px; margin-top: 18px; }
.profile-viewer__actions .btn { flex: 1; }

/* Avatar lightbox (zoomed) */
.avatar-lightbox {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out; animation: fadeIn 200ms var(--ease-out);
}
.avatar-lightbox img { max-width: 80vw; max-height: 80vh; border-radius: 16px; box-shadow: var(--shadow-lg); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* ===== Mobile DM blank-page fix + rounded card list =====
   On mobile the #dm-panel reused .sidebar's slide-out positioning,
   so it sat at left:-280px when the user tapped "Direct Messages".
   Pin it to full screen instead, and let the chat panel cover it
   when an actual conversation is opened. */
@media (max-width: 768px) {
    /* Pretty up the DM list to feel like the reference screenshot:
       rounded message cards, generous spacing, pill search/add bar. */
    #dm-panel .dm-list { padding: 8px 12px 90px; }
    #dm-panel .dm-item {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 18px;
        padding: 12px 14px;
        margin-bottom: 10px;
        gap: 12px;
    }
    #dm-panel .dm-item--active {
        background: rgba(99, 102, 241, 0.18);
        border-color: rgba(99, 102, 241, 0.4);
    }
    [data-theme="light"] #dm-panel .dm-item {
        background: #ffffff;
        border-color: rgba(0,0,0,0.06);
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
}

/* ===== Small screens: remove hamburger drawer, keep desktop layout compressed ===== */
@media (max-width: 900px) {
    .mobile-header,
    .mobile-slide-nav,
    .mobile-only-nav,
    .sidebar-overlay,
    body.mobile-nav-open .mobile-slide-nav,
    body.mobile-nav-open .mobile-only-nav,
    body.mobile-nav-open .sidebar-overlay {
        display: none !important;
    }

    .app-shell {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 6px !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .ws-switcher,
    body.mobile-nav-open .ws-switcher {
        display: flex !important;
        position: relative !important;
        inset: auto !important;
        width: 46px !important;
        min-width: 46px !important;
        height: auto !important;
        padding: 8px 0 !important;
        border-radius: 14px !important;
        z-index: 1 !important;
        transform: none !important;
    }

    .ws-switcher__top,
    .ws-switcher__bottom,
    .ws-list { gap: 6px !important; padding: 0 5px !important; }
    .ws-icon,
    .ws-switcher .ws-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 0.72rem !important;
    }
    .ws-icon img { width: 22px !important; height: 22px !important; }
    .ws-icon svg { width: 17px !important; height: 17px !important; }
    .ws-divider { width: 24px !important; margin: 2px 0 !important; }
    .ws-icon--active::before { left: -6px !important; height: 22px !important; }

    /* Responsive layout toggles based on whether a conversation is active */
    body.nx-mode-workspace:not(.nx-convo-active) .sidebar,
    body.nx-mode-dm:not(.nx-convo-active) #dm-panel,
    body.mobile-nav-open .sidebar.open,
    body.mobile-nav-open #dm-panel.sidebar {
        display: flex !important;
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        transition: none !important;
        z-index: 1 !important;
        overflow: hidden !important;
    }

    body.nx-mode-workspace:not(.nx-convo-active) .main-content,
    body.nx-mode-dm:not(.nx-convo-active) .main-content,
    body.nx-mode-dm-chat:not(.nx-convo-active) .main-content {
        display: none !important;
    }

    body.nx-convo-active .sidebar,
    body.nx-convo-active #dm-panel {
        display: none !important;
    }

    body.nx-convo-active .main-content {
        display: flex !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin-top: 0 !important;
        overflow: hidden !important;
        position: relative !important;
    }

    body.nx-convo-active .main-content #panel-chat.panel--active {
        position: relative !important;
        inset: auto !important;
        z-index: auto !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
    }

    body.nx-convo-active #panel-chat .channel-back-btn {
        display: flex !important;
    }

    .sidebar-main-content,
    body.mobile-nav-open .sidebar.open .sidebar-main-content {
        display: flex !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .chat-layout {
        flex-direction: row !important;
        height: 100% !important;
        gap: 0 !important;
    }
    .chat-main { border-radius: 14px !important; min-width: 0 !important; }
    .chat-main__header { height: 46px !important; padding: 8px 10px !important; gap: 6px !important; }
    .chat-header__left { min-width: 0 !important; gap: 6px !important; }
    #current-channel-name { font-size: 0.88rem !important; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .header-member-count,
    .header-search,
    #header-notif-caret { display: none !important; }
    #panel-chat .channel-back-btn { display: none; }
    .chat-header__right { gap: 2px !important; flex-shrink: 0 !important; }
    .chat-header__right .icon-btn { width: 30px !important; height: 30px !important; }
    .chat-main__messages { padding: 10px !important; }
    .chat-main__composer { padding: 8px !important; }
    .composer { min-height: 42px !important; padding: 6px 8px !important; gap: 6px !important; }
    .composer__actions { gap: 2px !important; }
    .composer .icon-btn { width: 30px !important; height: 30px !important; }

    .sidebar__header { min-height: 46px !important; padding: 8px 10px !important; }
    .sidebar__header h3,
    .sidebar__title h3 { font-size: 0.82rem !important; }
    .sidebar__search { padding: 6px 8px !important; }
    .search-box { height: 34px !important; padding: 0 8px !important; }
    .search-box input { font-size: 0.75rem !important; }
    .channel-list-scroller { min-height: 0 !important; }
    .channel-item,
    #dm-panel .dm-item {
        border-radius: 9px !important;
        padding: 7px 8px !important;
        margin: 1px 5px 4px !important;
        gap: 7px !important;
        font-size: 0.78rem !important;
    }
    #dm-panel .dm-item { background: transparent; border: 0; }
    #dm-panel .dm-item--active { background: rgba(0, 212, 255, 0.08); border-left: 2px solid var(--neon-cyan); }
    .dm-item__preview,
    .channel-group__label,
    .user-info { font-size: 0.68rem !important; }
    .sidebar__footer { padding: 7px !important; }
    .sidebar__footer-actions .icon-btn,
    .sidebar__user .avatar { width: 26px !important; height: 26px !important; }

    .nx-mode-dashboard .sidebar,
    .nx-mode-dashboard #dm-panel,
    .nx-mode-tasks .sidebar,
    .nx-mode-tasks #dm-panel { display: none !important; }
    .nx-mode-workspace #dm-panel { display: none !important; }
    .nx-mode-dm .sidebar:not(#dm-panel),
    .nx-mode-dm-chat .sidebar:not(#dm-panel) { display: none !important; }
}

@media (max-width: 430px) {
    .app-shell { gap: 4px !important; padding: 4px !important; }
    .ws-switcher { width: 40px !important; min-width: 40px !important; }
    .ws-icon,
    .ws-switcher .ws-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; }
    .sidebar,
    #dm-panel.sidebar { width: 136px !important; min-width: 136px !important; }
    #current-channel-name { max-width: 28vw; }
    .chat-header__right .icon-btn { width: 28px !important; height: 28px !important; }
    .chat-header__right .icon-btn svg { width: 14px !important; height: 14px !important; }
    .composer__actions .icon-btn:not(#send-btn) { display: none !important; }
}

/* =====================================================================
   DM PANEL v2 — Messages card redesign
   ===================================================================== */
#dm-panel.dm-panel-v2 {
    flex-direction: column;
    padding: 10px 10px 10px 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.dm-panel-v2 .messages-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 16px 14px 12px;
    backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .dm-panel-v2 .messages-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.dm-panel-v2 .messages-card__header { padding: 2px 4px 10px; }
.dm-panel-v2 .messages-card__title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

.dm-panel-v2 .messages-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 12px;
}

.dm-panel-v2 .msg-icon-btn {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.dm-panel-v2 .msg-icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
[data-theme="light"] .dm-panel-v2 .msg-icon-btn {
    background: #f3f4f6; border-color: transparent; color: #111827;
}
[data-theme="light"] .dm-panel-v2 .msg-icon-btn:hover { background: #e5e7eb; }

.dm-panel-v2 .msg-add-friends,
.dm-panel-v2 .msg-add-friend-bar {
    flex: 1;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: 8px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background .15s ease;
}
.dm-panel-v2 .msg-add-friends:hover,
.dm-panel-v2 .msg-add-friend-bar:hover { background: rgba(255, 255, 255, 0.12); }
[data-theme="light"] .dm-panel-v2 .msg-add-friends,
[data-theme="light"] .dm-panel-v2 .msg-add-friend-bar {
    background: #f3f4f6; border-color: transparent; color: #111827;
}
[data-theme="light"] .dm-panel-v2 .msg-add-friends:hover,
[data-theme="light"] .dm-panel-v2 .msg-add-friend-bar:hover { background: #e5e7eb; }

.dm-panel-v2 .msg-new-btn {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: #5865F2;
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.dm-panel-v2 .msg-new-btn:hover { background: #4752c4; transform: translateY(-1px); }

.dm-panel-v2 .messages-card__search { padding: 4px 0 10px; }
.dm-panel-v2 .messages-card__search input {
    width: 100%;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    padding: 0 14px;
    font-size: 0.85rem;
    outline: none;
}
[data-theme="light"] .dm-panel-v2 .messages-card__search input {
    background: #f3f4f6; border-color: transparent; color: #111827;
}

.dm-panel-v2 .messages-card__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 2px 8px;
    margin: 0 -4px;
}

.dm-panel-v2 .dm-friends-row {
    display: flex;
    gap: 8px;
    padding: 4px 4px 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dm-panel-v2 .dm-friends-row::-webkit-scrollbar { display: none; }
.dm-panel-v2 .dm-friend-card {
    flex: 0 0 auto;
    width: 88px; height: 88px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
    padding: 0;
}
.dm-panel-v2 .dm-friend-card:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
[data-theme="light"] .dm-panel-v2 .dm-friend-card {
    background: #f8fafc; border-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .dm-panel-v2 .dm-friend-card:hover { background: #f1f5f9; }
.dm-panel-v2 .dm-friend-card__avatar { position: relative; }
.dm-panel-v2 .dm-friend-card__avatar .avatar { width: 56px; height: 56px; }
.dm-panel-v2 .dm-friend-card__avatar .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dm-panel-v2 .dm-friend-card__avatar .status-dot {
    position: absolute; right: -2px; bottom: -2px;
    width: 16px; height: 16px;
}

.dm-panel-v2 .dm-rows { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.dm-panel-v2 .dm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease;
    color: var(--text-primary);
}
.dm-panel-v2 .dm-row:hover { background: rgba(255, 255, 255, 0.06); }
.dm-panel-v2 .dm-row--active {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .dm-panel-v2 .dm-row:hover { background: #f3f4f6; }
[data-theme="light"] .dm-panel-v2 .dm-row--active { background: #f3f4f6; border-color: rgba(0, 0, 0, 0.04); }

.dm-panel-v2 .dm-row__avatar { position: relative; flex-shrink: 0; }
.dm-panel-v2 .dm-row__avatar .avatar { width: 44px; height: 44px; }
.dm-panel-v2 .dm-row__avatar .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dm-panel-v2 .dm-row__avatar .status-dot {
    position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px;
}

.dm-panel-v2 .dm-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-panel-v2 .dm-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dm-panel-v2 .dm-row__name {
    font-size: 0.95rem; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-panel-v2 .dm-row__ts {
    font-size: 0.72rem; color: var(--text-tertiary); flex-shrink: 0;
}
.dm-panel-v2 .dm-row__preview {
    font-size: 0.82rem; color: var(--text-tertiary);
    display: flex; align-items: center; gap: 8px;
}
.dm-panel-v2 .dm-row__preview-text {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-row__unread-badge,
.convo-unread-badge {
    flex-shrink: 0;
    min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff; font-size: 0.7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}
.dm-row--unread .dm-row__name,
.dm-row--unread .dm-row__preview-text { color: var(--text-primary); font-weight: 600; }
.channel-item--unread .channel-name { color: var(--text-primary); font-weight: 600; }
.channel-item .convo-unread-badge { margin-left: auto; }
.dm-search-results .dm-search-msg:hover,
.dm-search-results .dm-search-user:hover { background: rgba(255,255,255,0.06); }


.dm-panel-v2 .messages-card__invite {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 6px 2px;
    margin-top: 8px;
}
.dm-panel-v2 .invite-label { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.dm-panel-v2 .invite-actions { display: flex; gap: 8px; }
.dm-panel-v2 .invite-icon-btn {
    width: 32px; height: 32px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s ease;
}
.dm-panel-v2 .invite-icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
[data-theme="light"] .dm-panel-v2 .invite-icon-btn {
    background: #f3f4f6; border-color: transparent; color: #374151;
}
[data-theme="light"] .dm-panel-v2 .invite-icon-btn:hover { background: #e5e7eb; }

.dm-panel-v2 .messages-card__profile {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}
[data-theme="light"] .dm-panel-v2 .messages-card__profile {
    background: #ffffff; border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.dm-panel-v2 .profile-avatar-wrap { position: relative; flex-shrink: 0; }
.dm-panel-v2 .profile-avatar-wrap .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dm-panel-v2 .profile-avatar-wrap .status-dot {
    position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
}
.dm-panel-v2 .profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.dm-panel-v2 .profile-name { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.dm-panel-v2 .profile-status { font-size: 0.74rem; color: var(--text-tertiary); }

/* Back button: always visible inside an open DM conversation */
body.nx-mode-dm-chat #channel-back-btn { display: inline-flex !important; }
body.nx-mode-dm #channel-back-btn { display: none !important; }

/* Make the DM panel wider on desktop so the new card breathes */
@media (min-width: 1025px) {
    #dm-panel.dm-panel-v2.sidebar { width: 340px !important; min-width: 340px !important; }
}

/* ============================================================
   New Message modal + Add Friends popover + live DM search
   ============================================================ */

/* DM search results dropdown (Supabase profiles autocomplete) */
.dm-search-results {
    position: relative;
    margin: 0 0 8px;
    max-height: 320px;
    overflow-y: auto;
    border-radius: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px) saturate(140%);
    padding: 4px;
    z-index: 5;
}
.dm-search-results .dm-search-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.82rem;
}
.dm-search-result-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 10px;
    background: transparent; border: 0; border-radius: 10px;
    color: var(--text-primary); cursor: pointer; text-align: left;
}
.dm-search-result-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .dm-search-result-item:hover { background: #f1f5f9; }
.dm-search-result-item .user-info { display: flex; flex-direction: column; min-width: 0; }
.dm-search-result-item .user-name { font-weight: 600; font-size: 0.88rem; }
.dm-search-result-item .user-email { font-size: 0.72rem; color: var(--text-tertiary); }

/* Add Friends popover (anchored dropdown) */
.nx-friends-popover {
    position: fixed;
    z-index: 9999;
    width: 360px;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(28px) saturate(160%);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    overflow: hidden;
}
.nx-fp__header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 6px; }
.nx-fp__header h3 { margin:0; font-size: 1rem; }
.nx-fp__close { background: transparent; border: 0; color: var(--text-secondary); font-size: 22px; cursor: pointer; line-height: 1; }
.nx-fp__tabs { display:flex; gap:6px; padding: 6px 12px 0; flex-wrap: wrap; }
.nx-fp__tab {
    background: transparent; border: 0; color: var(--text-secondary);
    padding: 6px 12px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.82rem;
}
.nx-fp__tab.active { background: rgba(255,255,255,0.10); color: var(--text-primary); }
[data-theme="light"] .nx-fp__tab.active { background: #e2e8f0; }
.nx-fp__tab--cta { background: #5865f2; color: #fff; }
.nx-fp__tab--cta.active { background: #4752c4; color: #fff; }
.nx-fp__search { padding: 10px 12px 4px; }
.nx-fp__search input {
    width: 100%; padding: 9px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
    color: var(--text-primary); font-size: 0.85rem; outline: none;
}
[data-theme="light"] .nx-fp__search input { background: #fff; }
.nx-fp__body { flex:1; overflow-y:auto; padding: 6px 8px 12px; }
.nx-fp__label { padding: 8px 10px; font-size: 0.7rem; color: var(--text-tertiary); font-weight: 700; letter-spacing: 0.06em; }
.nx-fp__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
.nx-fp__row:hover { background: rgba(255,255,255,0.05); }
[data-theme="light"] .nx-fp__row:hover { background: #f1f5f9; }
.nx-fp__row-info { flex:1; min-width: 0; }
.nx-fp__row-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.nx-fp__row-sub { font-size: 0.74rem; color: var(--text-tertiary); }
.nx-fp__row-actions { display: flex; gap: 6px; }
.nx-fp__btn-add, .nx-fp__btn-msg, .nx-fp__btn-x {
    background: rgba(255,255,255,0.08); border: 0; color: var(--text-primary);
    padding: 6px 10px; border-radius: 10px; cursor: pointer; font-size: 0.78rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
}
.nx-fp__btn-add { background: #5865f2; color: #fff; }
.nx-fp__btn-add:hover { background: #4752c4; }
.nx-fp__btn-x:hover { background: rgba(255,0,0,0.18); color: #ff6b6b; }
.nx-fp__btn-msg { width: 32px; height: 32px; padding: 0; }
.nx-fp__empty { padding: 24px 16px; text-align: center; color: var(--text-tertiary); font-size: 0.85rem; }
.nx-fp__addwrap { padding: 6px 8px; }
.nx-fp__addwrap input {
    width: 100%; padding: 10px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
    color: var(--text-primary); font-size: 0.85rem; outline: none; margin-bottom: 8px;
}
[data-theme="light"] .nx-fp__addwrap input { background: #fff; }

/* New Message modal */
.nx-newmsg-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.nx-newmsg {
    width: 100%; max-width: 460px;
    max-height: 88vh;
    display: flex; flex-direction: column;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    backdrop-filter: blur(28px) saturate(160%);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.nx-newmsg__header {
    display:flex; align-items:center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-border);
}
.nx-newmsg__header h3 { margin:0; font-size: 1rem; font-weight: 800; text-align: center; flex: 1; }
.nx-newmsg__close { background: transparent; border: 0; color: var(--text-primary); font-size: 26px; cursor: pointer; width: 28px; line-height: 1; }
.nx-newmsg__search { padding: 12px 16px 6px; }
.nx-newmsg__search input {
    width: 100%; padding: 11px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.08); border: 1px solid var(--glass-border);
    color: var(--text-primary); font-size: 0.9rem; outline: none;
}
[data-theme="light"] .nx-newmsg__search input { background: #f1f5f9; }
.nx-newmsg__quick {
    margin: 6px 12px; padding: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
}
[data-theme="light"] .nx-newmsg__quick { background: #fff; }
.nx-newmsg__quick-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px 10px;
    background: transparent; border: 0; color: var(--text-primary);
    cursor: pointer; text-align: left; border-radius: 10px;
}
.nx-newmsg__quick-row + .nx-newmsg__quick-row { border-top: 1px solid var(--glass-border); border-radius: 0; }
.nx-newmsg__quick-row:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .nx-newmsg__quick-row:hover { background: #f1f5f9; }
.nx-newmsg__qi { width: 36px; height: 36px; display:flex; align-items:center; justify-content:center; }
.nx-newmsg__qt { flex:1; font-weight: 700; font-size: 0.92rem; }
.nx-newmsg__qa { color: var(--text-tertiary); font-size: 18px; }
.nx-newmsg__list { flex:1; overflow-y:auto; padding: 8px 12px 16px; }
.nx-newmsg__group-label { padding: 10px 4px 6px; font-size: 0.78rem; color: var(--text-tertiary); font-weight: 700; }
.nx-newmsg__row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: 12px; margin-bottom: 6px;
    color: var(--text-primary); cursor: pointer; text-align: left;
}
[data-theme="light"] .nx-newmsg__row { background: #fff; }
.nx-newmsg__row:hover { transform: translateY(-1px); }
.nx-newmsg__info { display: flex; flex-direction: column; min-width: 0; }
.nx-newmsg__name { font-weight: 700; font-size: 0.92rem; }
.nx-newmsg__sub { font-size: 0.74rem; color: var(--text-tertiary); }

/* Workspace switcher — rounded glass tone, matching the Messages card */
.workspace-switcher,
#workspace-switcher,
.ws-switcher {
    border-radius: 22px !important;
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    overflow: hidden;
}
.workspace-switcher .ws-item,
.workspace-switcher .workspace-item {
    border-radius: 14px !important;
}

/* Ensure new message + button uses the brand pill */
.dm-panel-v2 .msg-new-btn { background: #5865f2; color: #fff; }
.dm-panel-v2 .msg-new-btn:hover { background: #4752c4; }

/* Mobile: New Message modal should look like the screenshot */
@media (max-width: 540px) {
    .nx-newmsg {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 18px 18px 0 0;
        align-self: flex-end;
    }
    .nx-newmsg-overlay { align-items: flex-end; padding: 0; }
    .nx-friends-popover { width: calc(100vw - 16px) !important; left: 8px !important; }
}

/* ============ MOPELLA — Clerk dev-mode hiding & friend-row polish ============ */
.cl-internal-1dauvpw,
[class*="cl-internal-"][class*="badge"],
.cl-badge,
.cl-developmentMode,
[data-localization-key*="developmentMode"],
.cl-footerPagesLink__terms,
.cl-footerPagesLink__privacy { display: none !important; }
#clerk-auth-container .cl-card,
#clerk-auth-container .cl-cardBox { background: transparent !important; box-shadow: none !important; border: none !important; }
#clerk-auth-container .cl-footer { padding-top: 12px !important; }

/* Online friends row polish */
.dm-friends-row__label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  color: rgba(248,250,252,.55); text-transform: uppercase;
  padding: 14px 18px 6px;
}
.dm-friend-card__name {
  font-size: 10.5px; font-weight: 500; margin-top: 4px;
  color: rgba(248,250,252,.78); text-align: center;
  max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =========================================================
   Mopella Tools Hub — native panel styles
   ========================================================= */
#panel-tools.panel--tools {
    overflow-y: auto;
    padding: 28px 28px 48px;
}
.tools-hub {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    animation: toolsFade .5s ease both;
}
@keyframes toolsFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hero */
.tools-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 36px;
    border-radius: 22px;
}
.tools-hero__orb {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .35;
    pointer-events: none;
}
.tools-hero__orb--1 { background: var(--neon-cyan, #0ef6cc); top: -140px; right: -100px; }
.tools-hero__orb--2 { background: var(--neon-pink, #f72f8e); bottom: -160px; left: -80px; opacity: .25; }
.tools-hero__inner { position: relative; z-index: 1; }
.tools-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--text-secondary);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tools-hero h1 {
    margin: 16px 0 10px;
    font-size: clamp(2rem, 3.2vw, 2.85rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-primary);
}
.tools-gradient {
    background: linear-gradient(120deg, var(--neon-cyan, #0ef6cc), var(--neon-blue, #00d4ff), var(--neon-pink, #f72f8e));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tools-hero p {
    color: var(--text-secondary);
    max-width: 680px;
    line-height: 1.6;
    margin: 0 0 24px;
}
.tools-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    max-width: 560px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tools-search:focus-within {
    box-shadow: 0 0 0 2px rgba(14, 246, 204, .25);
}
.tools-search svg { color: var(--text-tertiary); flex-shrink: 0; }
.tools-search input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--text-primary);
    font-size: .92rem;
}
.tools-search__clear {
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: .75rem;
    padding: 4px 8px;
    border-radius: 8px;
}
.tools-search__clear:hover { color: var(--text-primary); background: rgba(255, 255, 255, .05); }

/* Stats */
.tools-stats {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.tools-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
}
.tools-stat__label { color: var(--text-tertiary); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.tools-stat__value {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(120deg, var(--neon-cyan, #0ef6cc), var(--neon-blue, #00d4ff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Categories */
.tools-categories { display: flex; flex-direction: column; gap: 28px; }
.tools-category__head { margin-bottom: 14px; }
.tools-category__head h2 {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.tools-category__emoji { font-size: 1.4rem; }
.tools-category__head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .88rem;
    max-width: 760px;
    line-height: 1.55;
}

/* Cards */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.tool-card {
    position: relative;
    padding: 22px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
}
.tool-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(14, 246, 204, .12), transparent 40%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.tool-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14, 246, 204, .35);
    box-shadow: 0 18px 50px -20px rgba(14, 246, 204, .35);
}
.tool-card:hover::after { opacity: 1; }
.tool-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.tool-card__icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 246, 204, .18), rgba(0, 212, 255, .1));
    border: 1px solid rgba(14, 246, 204, .25);
    color: var(--neon-cyan, #0ef6cc);
    box-shadow: 0 0 22px -6px rgba(14, 246, 204, .55);
    transition: transform .25s ease;
}
.tool-card:hover .tool-card__icon { transform: scale(1.08) rotate(-3deg); }
.tool-card__tag {
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--text-secondary);
}
.tool-card__tag--security {
    color: var(--neon-pink, #f72f8e);
    border-color: rgba(247, 47, 142, .35);
    background: rgba(247, 47, 142, .08);
}
.tool-card__tag--productivity {
    color: var(--neon-cyan, #0ef6cc);
    border-color: rgba(14, 246, 204, .3);
    background: rgba(14, 246, 204, .08);
}
.tool-card__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.tool-card__desc { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.55; flex: 1; }
.tool-card__cta {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    color: #001a14;
    background: linear-gradient(120deg, var(--neon-cyan, #0ef6cc), var(--neon-blue, #00d4ff));
    box-shadow: 0 8px 30px -10px rgba(14, 246, 204, .6);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tool-card__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 40px -10px rgba(14, 246, 204, .8);
}

.tools-empty {
    text-align: center;
    color: var(--text-tertiary);
    padding: 40px;
    border: 1px dashed rgba(255, 255, 255, .08);
    border-radius: 16px;
}

@media (max-width: 700px) {
    #panel-tools.panel--tools { padding: 18px 14px 40px; }
    .tools-hero { padding: 28px 22px; }
    .tools-grid { grid-template-columns: 1fr; }
}

/* ===== Mopella Tool Viewer (in-app iframe) ===== */
.tool-viewer{display:flex;flex-direction:column;gap:14px;height:100%;animation:toolsFade .35s ease both}
.tool-viewer__bar{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:14px;flex-wrap:wrap}
.tool-viewer__back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--text-secondary);font:inherit;cursor:pointer;padding:6px 10px;border-radius:8px;transition:background .2s,color .2s}
.tool-viewer__back:hover{background:rgba(255,255,255,.06);color:var(--text-primary)}
.tool-viewer__title{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.tool-viewer__icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(56,189,248,.18));color:#fff}
.tool-viewer__name{font-weight:600;font-size:.95rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.tool-viewer__url{font-size:.72rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.tool-viewer__actions{margin-left:auto;display:flex;gap:8px}
.tool-viewer__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#22d3ee);color:#fff;text-decoration:none;font-size:.78rem;font-weight:600;box-shadow:0 10px 28px -14px rgba(99,102,241,.7)}
.tool-viewer__frame-wrap{position:relative;flex:1;min-height:0;border-radius:18px;padding:6px;overflow:hidden}
.tool-viewer__loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-tertiary);font-size:.85rem;backdrop-filter:blur(6px);background:rgba(8,10,20,.35);border-radius:14px;z-index:1}
.tool-viewer__frame{width:100%;height:calc(100vh - 150px);min-height:500px;border:0;border-radius:14px;background:#0b0e1a;display:block}
.tool-viewer__note{font-size:.72rem;color:var(--text-tertiary);text-align:center;margin:0}
@media (max-width:720px){
  .tool-viewer__frame{height:calc(100vh - 180px);min-height:400px;}
  .tool-viewer__name,.tool-viewer__url{max-width:60vw}
}

/* ===== Pass 1: bare online-friends row (no card, just avatar + dot + name) ===== */
.dm-panel-v2 .dm-friend-card--bare {
    width: auto;
    height: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 6px !important;
    flex-direction: column;
    gap: 6px;
    min-width: 64px;
}
.dm-panel-v2 .dm-friend-card--bare:hover {
    background: transparent !important;
    transform: translateY(-1px);
}
.dm-panel-v2 .dm-friend-card--bare .dm-friend-card__avatar .avatar {
    width: 44px; height: 44px;
}
.dm-panel-v2 .dm-friend-card--bare .dm-friend-card__avatar .status-dot {
    width: 12px; height: 12px;
    background: #22c55e;
    border: 2px solid var(--bg-card, #0f172a);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(34,197,94,.4), 0 0 8px rgba(34,197,94,.5);
}
.dm-panel-v2 .dm-friend-card--bare .dm-friend-card__name {
    font-size: 0.7rem;
    color: var(--text-secondary, #b8c0d0);
    text-align: center;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-panel-v2 .dm-friends-row--bare {
    padding: 6px 4px 10px;
    border-bottom: 0;
    margin-bottom: 2px;
}
.dm-panel-v2 .dm-friends-row__label { display: none !important; }

/* Tool viewer: hide leftover URL line if any cached markup still renders it */
.tool-viewer__url { display: none !important; }

/* ============================================================
   Small-screen polish — remove top gaps and stabilize tool preview
   ============================================================ */
@media (max-width: 900px) {
    .mobile-header { display: none !important; }

    .app-shell {
        padding: 4px !important;
        gap: 4px !important;
    }

    .main-content {
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #panel-dashboard,
    #panel-tools,
    #panel-tasks,
    #panel-inbox,
    #panel-files,
    #panel-members {
        padding-top: 0 !important;
    }

    .dashboard-layout {
        padding: 0 12px 20px !important;
        gap: 14px !important;
    }

    #panel-dashboard { padding: 0 0 24px !important; }
    #panel-dashboard > *:first-child,
    .dashboard-layout > *:first-child {
        margin-top: 0 !important;
    }

    .welcome-banner {
        padding: 24px 16px 24px !important;
        margin-top: 0 !important;
        gap: 12px !important;
        justify-content: space-between !important;
    }

    .welcome-banner__content h1 {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
    }

    .welcome-banner__content p { font-size: 0.82rem !important; }

    .welcome-banner__right {
        width: 100%;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    #panel-tools.panel--tools { padding: 0 0 24px !important; }
    .tools-hub { gap: 18px !important; }
    .tools-hero {
        padding: 14px 14px 16px !important;
        border-radius: 18px !important;
    }

    .tools-hero h1 {
        margin: 12px 0 8px !important;
        font-size: 1.55rem !important;
    }

    .tools-hero p {
        margin-bottom: 16px !important;
        font-size: 0.82rem !important;
    }

    .tools-stats { margin-top: 16px !important; }
}

/* Tools preview floating header — keep only back button + icon + tool name,
   and ensure the header stays visible above the iframe on every screen. */
#panel-tools:has(.tool-viewer) {
    padding: 0 !important;
    overflow: hidden !important;
}

.tool-viewer {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
}

.tool-viewer__url,
.tool-viewer__actions,
.tool-viewer__note { display: none !important; }

.tool-viewer__bar {
    position: relative !important;
    flex-shrink: 0;
    z-index: 8;
    gap: 12px;
    min-height: 52px;
    padding: 10px 16px;
    flex-wrap: nowrap;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.tool-viewer__bar > * {
    position: relative;
    z-index: 2;
}

.tool-viewer__back {
    flex-shrink: 0;
    color: var(--text-primary);
}

.tool-viewer__title { min-width: 0; }

.tool-viewer__name {
    max-width: min(60vw, 520px);
    font-size: 0.95rem;
    color: var(--text-primary);
}

.tool-viewer__frame-wrap {
    flex: 1 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.tool-viewer__loading {
    border-radius: 0 !important;
}

.tool-viewer__frame {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

@media (max-width: 720px) {
    .tool-viewer__bar {
        gap: 8px;
        padding: 8px 12px;
    }

    .tool-viewer__back span { display: none; }

    .tool-viewer__name {
        max-width: 62vw;
        font-size: 0.9rem;
    }

    .tool-viewer__icon { width: 30px; height: 30px; }

    .tool-viewer__frame {
        height: 100% !important;
        min-height: 0 !important;
    }
}

/* Mobile tasks — keep header readable, stack controls, smooth horizontal kanban */
@media (max-width: 768px) {
    .panel--tasks { padding: 0 !important; }
    .kanban-header {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    .kanban-header__left { width: 100%; gap: 10px !important; }
    .kanban-header__left h2 { font-size: 1.05rem !important; }
    .kanban-search-wrap { width: 100% !important; }
    .kanban-header__filters { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
    .kanban-header__filters select { flex: 1 1 auto; min-width: 0; }
    .kanban-header__right { width: 100%; justify-content: space-between; }
    .kanban-board {
        display: flex !important;
        gap: 10px !important;
        padding: 10px 12px 20px !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .kanban-column {
        flex: 0 0 86vw;
        scroll-snap-align: start;
        min-width: 86vw;
    }
}

/* Pull auth and panel content to the top on mobile/tablet */
@media (max-width: 900px) {
    .auth-screen {
        align-items: flex-start !important;
        justify-content: center !important;
        padding: max(6px, env(safe-area-inset-top)) 12px 12px !important;
    }

    .auth-card {
        margin: 6px auto 0 !important;
        padding: 18px 18px !important;
        max-width: 100% !important;
    }

    .auth-card__logo { margin-bottom: 12px !important; }

    #clerk-auth-container { min-height: 340px !important; }

    /* Ensure the main app panels start flush with no fake top offset */
    .main-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #panel-tools,
    #panel-tasks,
    #panel-inbox,
    #panel-files,
    #panel-members { padding-top: 4px !important; }
    .panel > *:first-child,
    .panel--active > *:first-child { margin-top: 0 !important; }
}

/* ===== Mopella auth tab switcher (sign-in / sign-up) ===== */
.mopella-auth-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin: 0 0 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(12px);
}
.mopella-auth-tab {
    position: relative;
    z-index: 2;
    background: transparent;
    border: 0;
    color: rgba(248, 250, 252, 0.6);
    font: 600 0.85rem/1 'Inter', system-ui, sans-serif;
    letter-spacing: 0.01em;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: color 220ms cubic-bezier(.4, 0, .2, 1);
}
.mopella-auth-tab:hover { color: rgba(248, 250, 252, 0.85); }
.mopella-auth-tab.is-active { color: #f8fafc; }
.mopella-auth-tab__indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.22), rgba(124, 58, 237, 0.22));
    border: 1px solid rgba(0, 212, 255, 0.4);
    box-shadow: 0 6px 18px -6px rgba(0, 212, 255, 0.45);
    transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
    z-index: 1;
    pointer-events: none;
}
.mopella-auth-tabs[data-active="sign-up"] .mopella-auth-tab__indicator {
    transform: translateX(100%);
}

/* ===== FORWARD TARGET STYLES ===== */
.forward-target-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    width: 100%;
}
.forward-target-item:hover, .forward-target-item--selected {
    background: rgba(14, 246, 204, 0.08);
    border-color: rgba(14, 246, 204, 0.3);
}
.forward-target-item--selected {
    box-shadow: 0 0 10px rgba(14, 246, 204, 0.15);
}

/* ===== NOTIFICATION BELL BADGE ===== */
.notif-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
    animation: notifBadgePulse 2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes notifBadgePulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 2px 16px rgba(239, 68, 68, 0.8); }
}

/* ===== NOTIFICATION POPOVER ===== */
.nx-notif-popover {
    position: fixed;
    z-index: 9999;
    width: 360px;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(28px) saturate(160%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: notifPopoverIn 200ms cubic-bezier(.4, 0, .2, 1);
}
@keyframes notifPopoverIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.nx-notif__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--glass-border);
}
.nx-notif__header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.nx-notif__close {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    transition: color 150ms;
}
.nx-notif__close:hover { color: var(--text-primary); }
.nx-notif__body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px 12px;
}
.nx-notif__loading {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}
.nx-notif__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.nx-notif__label {
    padding: 8px 10px 4px;
    font-size: 0.68rem;
    color: var(--text-tertiary);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.nx-notif__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 150ms;
}
.nx-notif__item:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .nx-notif__item:hover { background: #f1f5f9; }
.nx-notif__item-info { flex: 1; min-width: 0; }
.nx-notif__item-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nx-notif__item-sub {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 1px;
}
.nx-notif__item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.nx-notif__btn-accept,
.nx-notif__btn-decline {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    transition: all 150ms ease;
}
.nx-notif__btn-accept {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.nx-notif__btn-accept:hover {
    background: rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
    transform: scale(1.1);
}
.nx-notif__btn-decline {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.nx-notif__btn-decline:hover {
    background: rgba(239, 68, 68, 0.25);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
    transform: scale(1.1);
}

@media (max-width: 600px) {
    .nx-notif-popover {
        width: calc(100vw - 16px) !important;
        left: 8px !important;
    }
}

/* ===== Discord-standard settings appearance cards ===== */
.settings-sidebar--discord { background: color-mix(in srgb, var(--glass-bg) 45%, transparent); }
.theme-options--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-card {
    border: 1px solid var(--glass-border);
    background: var(--surface-2);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.theme-card.is-active { border-color: var(--neon-cyan); box-shadow: 0 0 0 2px rgba(14, 246, 204, 0.16); }
.theme-card__swatch { height: 54px; border-radius: 10px; border: 1px solid var(--glass-border); }
.theme-card__swatch--glass { background: linear-gradient(135deg, rgba(123,47,247,.9), rgba(14,246,204,.85)); }
.theme-card__swatch--dark { background: linear-gradient(135deg, #07080f, #232636); }
.theme-card__swatch--light { background: linear-gradient(135deg, #f8fafc, #ffffff); }
.theme-card small { color: var(--text-tertiary); }
@media (max-width: 640px) { .theme-options--cards { grid-template-columns: 1fr; } }

/* ===== Advanced settings states ===== */
.settings-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--glass-border); }
.mopella-compact-messages .message--standard { padding-top: 4px; padding-bottom: 4px; margin-top: 2px; }
.mopella-compact-messages .message--grouped { padding-top: 0; padding-bottom: 0; }
.mopella-compact-messages .chat-main__messages { gap: 0; }
html.mopella-reduce-motion *, html.mopella-reduce-motion *::before, html.mopella-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }

/* ===== Mopella redesign: clickable chat title + DM intro + mobile info sheet ===== */
.chat-header-title-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:8px;color:inherit;font:inherit;}
.chat-header-title-btn:hover{background:rgba(255,255,255,0.06);}
.chat-header-title-btn h3{margin:0;font-size:1rem;font-weight:700;}
.chat-header-title-caret{opacity:.55;flex:none;}
.chat-header-title-btn:hover .chat-header-title-caret{opacity:.9;}

.convo-intro__mutual{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.05);font-size:.82rem;color:var(--text-secondary);font-weight:600;}
.convo-intro__mutual-icon{color:var(--neon-cyan);}
.convo-intro__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px;}
.convo-intro__action{padding:9px 18px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:var(--text-primary);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s ease;}
.convo-intro__action:hover{background:rgba(255,255,255,0.1);transform:translateY(-1px);}
.convo-intro__action--primary{background:linear-gradient(135deg,#00d4ff,#7c3aed);border-color:transparent;color:#fff;}
.convo-intro__action--danger{color:#ef4444;border-color:rgba(239,68,68,.35);}
.convo-intro__action--danger:hover{background:rgba(239,68,68,.12);}

/* Mobile: DM intro hero + full-screen info / profile sheet */
@media (max-width:768px){
  .convo-intro--dm{padding:28px 20px 18px;text-align:left;align-items:flex-start;}
  .convo-intro--dm .convo-intro__avatar img,.convo-intro--dm .convo-intro__avatar .avatar{width:88px!important;height:88px!important;}
  .convo-intro--dm .convo-intro__title{font-size:1.8rem;}
  .convo-intro__actions{justify-content:flex-start;}

  #channel-info-panel.info-panel--open{
    position:fixed;inset:0;z-index:2000;width:100%!important;max-width:none!important;height:100%;
    display:flex!important;flex-direction:column;border-radius:0;
  }
  #channel-info-panel .info-panel__header{padding-top:calc(env(safe-area-inset-top,0) + 14px);}
  #channel-info-panel .info-panel-tabs{overflow-x:auto;}
}

/* ============================================================
   Custom Mopella Auth (in-page Clerk headless flow)
   ============================================================ */
.mauth { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 360px; margin: 0 auto; text-align: left; animation: fadeIn 260ms ease; }
.mauth__title { font-size: 1.35rem; font-weight: 700; color: #f8fafc; margin: 0; text-align: center; letter-spacing: -0.01em; }
.mauth__sub { font-size: 0.85rem; color: rgba(248,250,252,0.6); margin: -6px 0 4px; text-align: center; }
.mauth__sub strong { color: #00d4ff; }
.mauth__row { display: flex; gap: 10px; }
.mauth__row .mauth__field { flex: 1; }
.mauth__field { display: flex; flex-direction: column; gap: 6px; }
.mauth__field > span { font-size: 0.78rem; font-weight: 500; color: rgba(248,250,252,0.78); }
.mauth__input {
  width: 100%; padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  color: #f8fafc; font-size: 0.9rem; outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease; backdrop-filter: blur(12px);
}
.mauth__input::placeholder { color: rgba(248,250,252,0.35); }
.mauth__input:focus { border-color: rgba(0,212,255,0.55); box-shadow: 0 0 0 3px rgba(0,212,255,0.18); }
.mauth__input--otp { text-align: center; letter-spacing: 0.5em; font-size: 1.3rem; font-weight: 600; padding-left: 0.5em; }
.mauth__pw { position: relative; display: block; }
.mauth__pw .mauth__input { padding-right: 44px; width: 100%; }
.mauth__pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  color: rgba(248,250,252,0.55); transition: color .15s, background .15s;
}
.mauth__pw-toggle:hover { color: rgba(248,250,252,0.9); background: rgba(255,255,255,0.06); }
.mauth__pw-toggle--on { color: #00d4ff; }
.mauth__btn {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: none;
  font-size: 0.9rem; font-weight: 600; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform 200ms cubic-bezier(.4,0,.2,1), box-shadow 200ms, opacity 200ms;
}
.mauth__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.mauth__btn--busy { position: relative; color: transparent; }
.mauth__btn--busy::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: spin 700ms linear infinite;
}
.mauth__btn--primary { background: linear-gradient(135deg, #00d4ff, #7c3aed); box-shadow: 0 8px 24px -8px rgba(0,212,255,0.45); }
.mauth__btn--primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 12px 32px -8px rgba(0,212,255,0.6); }
.mauth__btn--google { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #f8fafc; }
.mauth__btn--google:not(:disabled):hover { background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.mauth__btn--apple { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #f8fafc; }
.mauth__btn--apple:not(:disabled):hover { background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.mauth__waiting { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.85rem; color: rgba(248,250,252,0.7); padding: 6px 0; }
.mauth__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0,212,255,0.25); border-top-color: #00d4ff; animation: spin 0.7s linear infinite; display: inline-block; }
.mauth__divider { display: flex; align-items: center; gap: 12px; color: rgba(248,250,252,0.45); font-size: 0.75rem; }
.mauth__divider::before, .mauth__divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.10); }
.mauth__switch { font-size: 0.82rem; color: rgba(248,250,252,0.6); text-align: center; margin: 2px 0 0; }
.mauth__switch a { color: #00d4ff; text-decoration: none; font-weight: 500; }
.mauth__switch a:hover { text-decoration: underline; }
.mauth__error { display: none; color: #fca5a5; font-size: 0.8rem; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); padding: 9px 11px; border-radius: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mopella auth — compact OAuth row + gradient continue button (matches design ref) */
.mauth__oauth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mauth__oauth {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: #f8fafc; font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: all 0.18s ease;
}
.mauth__oauth:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }
.mauth__oauth svg { flex: none; }
.mauth__btn-arrow { display: inline-block; margin-left: 6px; font-size: 0.85em; transform: translateY(-1px); }
.mauth__aux { font-size: 0.78rem; text-align: right; margin: -6px 0 0; }
.mauth__aux a { color: rgba(248,250,252,0.6); text-decoration: none; }
.mauth__aux a:hover { color: #00d4ff; }
.mauth__btn--primary { border-radius: 999px !important; padding: 14px 18px !important; font-weight: 700 !important; letter-spacing: 0.01em; }

/* ===== Discord-style member list polish + presence popover ===== */
.members-empty { padding: 24px 16px; font-size: 0.78rem; color: var(--text-tertiary); text-align: center; }
.member-rp-item { border-radius: 6px; margin: 0 8px; padding: 6px 8px; }
.member-rp-item:hover { background: rgba(255,255,255,0.06); }
.member-rp-avatar .avatar { width: 32px; height: 32px; }
.presence-popover { background: rgba(20, 22, 32, 0.96); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 18px 40px -12px rgba(0,0,0,0.6); backdrop-filter: blur(20px); }
.presence-popover__item:hover { background: rgba(255,255,255,0.08) !important; }
#sidebar-avatar { position: relative; }
#sidebar-avatar .status-dot { position: absolute; bottom: -2px; right: -2px; }

/* ============================================================
   v2 INFO PANEL — mobile full-screen + populated panes
   Added 2026-06-16: members online/offline split, media/links/files,
   threads tab, New Workspace friend picker.
   ============================================================ */

/* Members section headers (Online — N / Offline — N) */
.info-members-section-header {
    padding: 14px 16px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.info-member-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
    transition: background 160ms ease;
}
.info-member-item:hover { background: rgba(255,255,255,0.04); }
.info-member-name { flex: 1; font-size: 0.85rem; color: var(--text-primary); }
.info-member-role {
    font-size: 0.62rem; padding: 2px 8px; border-radius: 6px;
    background: rgba(0,212,255,0.10); color: #00d4ff;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.info-member-item .status-dot {
    position: absolute; right: -2px; bottom: -2px;
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid #0a0e15;
}

/* Media grid tiles */
.info-media-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    padding: 8px;
}
.info-media-tile {
    aspect-ratio: 1; border-radius: 8px; overflow: hidden;
    cursor: pointer; background: rgba(255,255,255,0.03);
}
.info-media-tile img, .info-media-tile video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 220ms ease;
}
.info-media-tile:hover img, .info-media-tile:hover video { transform: scale(1.04); }

/* Link list */
.info-link-item {
    display: block; padding: 12px 14px; margin: 6px 8px;
    border-radius: 10px; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    text-decoration: none; color: inherit;
    transition: border-color 160ms, background 160ms;
}
.info-link-item:hover { background: rgba(255,255,255,0.04); border-color: rgba(0,212,255,0.30); }
.info-link-item__host { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.info-link-item__url { font-size: 0.7rem; color: #00d4ff; word-break: break-all; margin-top: 2px; }
.info-link-item__meta { font-size: 0.68rem; color: var(--text-tertiary); margin-top: 4px; }

/* File list */
.info-file-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin: 6px 8px;
    border-radius: 10px; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    text-decoration: none; color: inherit;
    transition: background 160ms;
}
.info-file-item:hover { background: rgba(255,255,255,0.04); }
.info-file-item svg { color: #00d4ff; flex-shrink: 0; }
.info-file-item__body { flex: 1; min-width: 0; }
.info-file-item__name { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-file-item__meta { font-size: 0.68rem; color: var(--text-tertiary); margin-top: 2px; }

/* Threads list */
.info-thread-item {
    padding: 12px 14px; margin: 6px 8px;
    border-radius: 10px; background: rgba(255,255,255,0.02);
    border-left: 3px solid #00d4ff;
    cursor: pointer; transition: background 160ms;
}
.info-thread-item:hover { background: rgba(255,255,255,0.05); }
.info-thread-item__top { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
.info-thread-item__meta { font-weight: 400; color: var(--text-tertiary); font-size: 0.68rem; }
.info-thread-item__body { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }

/* New Workspace picker (opens from DM info panel) */
.new-ws-picker { max-width: 460px; width: calc(100% - 32px); padding: 0; border-radius: 18px; overflow: hidden; }
.new-ws-picker__label, .new-ws-picker__sub {
    display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-tertiary); margin: 14px 0 6px;
}
.new-ws-picker__search { margin-bottom: 6px; }
.new-ws-picker__list { max-height: 320px; overflow-y: auto; margin: 4px -8px -8px; padding: 4px 8px; }
.new-ws-picker__row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: 10px; cursor: pointer;
    transition: background 140ms;
}
.new-ws-picker__row:hover { background: rgba(255,255,255,0.04); }
.new-ws-picker__row input[type=checkbox] { accent-color: #00d4ff; width: 16px; height: 16px; cursor: pointer; }
.new-ws-picker__row-info { flex: 1; min-width: 0; }
.new-ws-picker__row-name { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
.new-ws-picker__row-handle { font-size: 0.7rem; color: var(--text-tertiary); margin-top: 1px; }
.new-ws-picker__empty { padding: 30px 16px; text-align: center; font-size: 0.8rem; color: var(--text-tertiary); }

/* ===== MOBILE: full-screen info panel triggered by ">" beside name ===== */
@media (max-width: 1024px) {
    #channel-info-panel.info-panel--open {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        z-index: 9000;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column;
        background: var(--bg-primary, #0a0e15);
    }
    #channel-info-panel.info-panel--open .info-panel__header {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        flex-shrink: 0;
    }
    #channel-info-panel.info-panel--open .info-panel-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        flex-shrink: 0;
    }
    #channel-info-panel.info-panel--open .info-panel-tabs::-webkit-scrollbar { display: none; }
    #channel-info-panel.info-panel--open .info-panel__body {
        flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .info-media-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   v3 INFO PANEL — mobile liquid-glass full-screen sheet
   (DM "New Workspace" + Channel members/online · offline,
    matches WhatsApp-style reference layout, Mopella dark glass)
   ============================================================ */

/* Hide the mobile top action bar & hero close on desktop;
   keep the legacy compact h3 header behaviour. */
.info-panel__topbar { display: none; }
.info-panel__hero { display: none; }
.info-panel__hero-back { display: none; }
@media (min-width: 1025px) {
    /* Desktop sidebar: show only the compact title row */
    .info-panel__hero {
        display: flex; align-items: center; gap: 10px;
        padding: 14px 14px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .info-panel__hero-back {
        display: grid; place-items: center;
        width: 30px; height: 30px; flex: none;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        color: var(--text-primary, #f8fafc);
        border-radius: 8px; cursor: pointer;
        transition: background 140ms ease, transform 140ms ease;
    }
    .info-panel__hero-back:hover { background: rgba(255,255,255,0.10); }
    .info-panel__hero-icon {
        width: 36px; height: 36px; flex: none;
        display: grid; place-items: center;
        background: transparent; border: 0; padding: 0;
        font-size: 1rem; color: var(--text-secondary);
        cursor: pointer; border-radius: 50%;
        overflow: hidden;
    }
    .info-panel__hero-icon--avatar { width: 36px; height: 36px; }
    .info-panel__hero-icon--avatar .avatar { width: 36px !important; height: 36px !important; border-radius: 50% !important; }
    .info-panel__hero-text { flex: 1; min-width: 0; }
    .info-panel__hero-text h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .info-panel__hero-sub {
        display: block; margin: 1px 0 0;
        font-size: 0.72rem; color: var(--text-tertiary);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .info-panel__hero-close { flex: none; }
}

/* ===== Mobile (<=1024px): full-screen liquid-glass sheet ===== */
@media (max-width: 1024px) {
    #channel-info-panel.info-panel--open {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important; max-width: 100% !important; height: 100% !important;
        z-index: 9000;
        border-radius: 0 !important;
        display: flex !important; flex-direction: column;
        /* layered liquid glass — deep base + glow + blur */
        background:
            radial-gradient(120% 60% at 50% -10%, rgba(124,58,237,0.22), transparent 60%),
            radial-gradient(80% 50% at 100% 0%, rgba(0,212,255,0.18), transparent 65%),
            linear-gradient(180deg, rgba(10,14,21,0.92), rgba(10,14,21,0.98));
        backdrop-filter: blur(28px) saturate(160%);
        animation: infoSheetIn 220ms cubic-bezier(.4,0,.2,1);
    }
    @keyframes infoSheetIn {
        from { transform: translateY(16px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    /* Top action bar */
    #channel-info-panel.info-panel--open .info-panel__topbar {
        display: flex; align-items: center; gap: 10px;
        padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 8px;
        flex-shrink: 0;
    }
    .info-topbar-spacer { flex: 1; }
    .info-topbar-btn {
        display: grid; place-items: center;
        background: transparent; border: none; cursor: pointer;
        color: var(--text-primary, #f8fafc);
        padding: 8px; border-radius: 10px;
        transition: background 160ms ease, transform 160ms ease;
    }
    .info-topbar-btn:hover, .info-topbar-btn:active { background: rgba(255,255,255,0.08); }
    .info-topbar-btn--circle {
        width: 38px; height: 38px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 999px;
        backdrop-filter: blur(12px);
    }
    .info-topbar-btn--circle:hover { background: rgba(255,255,255,0.12); }

    /* Hero header: avatar + name + subtitle */
    #channel-info-panel.info-panel--open .info-panel__hero {
        display: flex; align-items: center; gap: 14px;
        padding: 4px 18px 14px; flex-shrink: 0;
    }
    #channel-info-panel.info-panel--open .info-panel__hero-close { display: none; }
    .info-panel__hero-icon {
        width: 56px; height: 56px; flex: none;
        border-radius: 16px;
        display: grid; place-items: center;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
        color: var(--text-secondary);
        font-size: 1.5rem; font-weight: 700;
        overflow: hidden;
    }
    .info-panel__hero-icon--avatar { background: transparent; border: none; padding: 0; }
    .info-panel__hero-icon--avatar .avatar { width: 56px !important; height: 56px !important; border-radius: 50% !important; }
    .info-panel__hero-text { flex: 1; min-width: 0; }
    .info-panel__hero-text h3 {
        margin: 0; font-size: 1.35rem; font-weight: 800;
        color: var(--text-primary, #f8fafc); letter-spacing: -0.01em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .info-panel__hero-sub {
        margin: 2px 0 0; font-size: 0.85rem; color: var(--text-tertiary);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Hide the legacy compact header on mobile (we use the hero instead) */
    #channel-info-panel.info-panel--open .info-panel__header { display: none !important; }

    /* Segmented tabs with underline indicator */
    #channel-info-panel.info-panel--open .info-panel-tabs {
        display: flex; gap: 22px;
        padding: 4px 18px 0; margin: 0;
        overflow-x: auto; scrollbar-width: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        flex-shrink: 0;
    }
    #channel-info-panel.info-panel--open .info-panel-tabs::-webkit-scrollbar { display: none; }
    #channel-info-panel.info-panel--open .info-panel-tab {
        position: relative;
        padding: 12px 0; margin: 0; border: none; background: transparent;
        font-size: 0.95rem; font-weight: 600;
        color: var(--text-tertiary);
        cursor: pointer; white-space: nowrap;
        transition: color 160ms ease;
    }
    #channel-info-panel.info-panel--open .info-panel-tab.active { color: #00d4ff; }
    #channel-info-panel.info-panel--open .info-panel-tab.active::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
        height: 2.5px; border-radius: 2px;
        background: linear-gradient(90deg, #00d4ff, #7c3aed);
        box-shadow: 0 0 12px rgba(0,212,255,0.55);
    }

    /* Body: padded scroll surface */
    #channel-info-panel.info-panel--open .info-panel__body {
        flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 16px 14px 32px;
    }

    /* White-glass section cards (the rounded "white cards" from the ref) */
    #channel-info-panel.info-panel--open .info-section {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
        backdrop-filter: blur(18px) saturate(140%);
        border-radius: 18px;
        padding: 4px;
        margin-bottom: 14px;
        box-shadow: 0 12px 32px -16px rgba(0,0,0,0.55);
    }
    #channel-info-panel.info-panel--open .info-section + .info-section { margin-top: 0; }

    /* Section heading sits OUTSIDE / above the card */
    #channel-info-panel.info-panel--open .info-members-section-header {
        padding: 6px 6px 8px; margin-top: 6px;
        font-size: 0.78rem; font-weight: 700;
        color: var(--text-tertiary); letter-spacing: 0.02em; text-transform: none;
    }
    /* When a section-header is the first child inside a card, pull it out visually */
    #channel-info-panel.info-panel--open .info-members-list .info-members-section-header:first-child { padding-top: 4px; }

    /* CTA row inside members card (Invite Members / New Workspace) */
    #channel-info-panel.info-panel--open .info-section__header { padding: 0; margin: 0 0 6px; }
    #channel-info-panel.info-panel--open #info-add-member-btn {
        width: 100% !important;
        display: flex; align-items: center; gap: 14px;
        padding: 16px 16px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 14px !important;
        color: var(--text-primary, #f8fafc) !important;
        font-size: 1rem !important; font-weight: 700;
        justify-content: flex-start !important;
        text-align: left;
        position: relative;
    }
    #channel-info-panel.info-panel--open #info-add-member-btn::before {
        content: '';
        width: 40px; height: 40px; border-radius: 12px;
        background: rgba(0,212,255,0.12);
        border: 1px solid rgba(0,212,255,0.20);
        display: inline-block;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='8.5' cy='7' r='4'/><line x1='20' y1='8' x2='20' y2='14'/><line x1='23' y1='11' x2='17' y2='11'/></svg>");
        background-repeat: no-repeat; background-position: center;
        flex: none;
    }
    #channel-info-panel.info-panel--open #info-add-member-btn::after {
        content: '›';
        margin-left: auto;
        font-size: 1.4rem; color: var(--text-tertiary);
        line-height: 1;
    }
    #channel-info-panel.info-panel--open #info-add-member-btn svg { display: none; }
    #channel-info-panel.info-panel--open #info-add-member-btn:hover { background: rgba(255,255,255,0.04) !important; }

    /* Member rows: stacked inside the card with hairline separators */
    #channel-info-panel.info-panel--open .info-members-list { padding: 0; }
    #channel-info-panel.info-panel--open .info-member-item {
        padding: 14px 16px; gap: 14px;
        border-radius: 0; margin: 0;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    #channel-info-panel.info-panel--open .info-members-list .info-member-item:first-of-type,
    #channel-info-panel.info-panel--open .info-members-list .info-members-section-header + .info-member-item {
        border-top: none;
    }
    #channel-info-panel.info-panel--open .info-member-item .avatar { width: 38px !important; height: 38px !important; }
    #channel-info-panel.info-panel--open .info-member-name { font-size: 1rem; font-weight: 600; }
    #channel-info-panel.info-panel--open .info-member-item .status-dot {
        width: 12px; height: 12px;
        border: 2.5px solid #0a0e15;
    }

    /* Pins / Links / Files / Threads cards inside .info-section */
    #channel-info-panel.info-panel--open .info-pin-item,
    #channel-info-panel.info-panel--open .info-link-item,
    #channel-info-panel.info-panel--open .info-file-item,
    #channel-info-panel.info-panel--open .info-thread-item {
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,0.06);
        padding: 14px 16px !important;
    }
    #channel-info-panel.info-panel--open .info-pin-item:first-child,
    #channel-info-panel.info-panel--open .info-link-item:first-child,
    #channel-info-panel.info-panel--open .info-file-item:first-child,
    #channel-info-panel.info-panel--open .info-thread-item:first-child { border-top: none; }

    /* Media grid stays gridded but inside a card */
    #channel-info-panel.info-panel--open .info-media-grid {
        padding: 6px;
        gap: 6px;
        grid-template-columns: repeat(3, 1fr);
    }
    #channel-info-panel.info-panel--open .info-media-tile { border-radius: 12px; }

    /* Empty states get more breathing room on the big sheet */
    #channel-info-panel.info-panel--open .info-empty-state {
        padding: 40px 20px; text-align: center; color: var(--text-tertiary);
    }
    #channel-info-panel.info-panel--open .info-empty-state svg { opacity: 0.6; margin-bottom: 8px; }

    /* Make sure the title chevron in the chat header is large enough to tap */
    .chat-header-title-btn { padding: 6px 8px !important; }
    .chat-header-title-caret { width: 18px !important; height: 18px !important; opacity: 0.75 !important; }

    /* New Workspace picker becomes a near full-screen sheet on mobile */
    .new-ws-picker-overlay { padding: 0 !important; }
    .new-ws-picker {
        max-width: none !important; width: 100% !important;
        height: 100vh; max-height: 100vh;
        border-radius: 0 !important;
        display: flex; flex-direction: column;
    }
    .new-ws-picker .modal__body { flex: 1; overflow-y: auto; }
    .new-ws-picker__list { max-height: none !important; }
}

/* On phones, force the info button area to never compete with the title tap */
@media (max-width: 768px) {
    #header-info-toggle { display: none !important; }
}

/* ============================================================
   Mopella — Mobile DM/Channel polish (small screens only)
   All rules scoped to (max-width: 768px) so desktop is untouched.
   ============================================================ */
@media (max-width: 768px) {
  body.mop-mdrawer-open { overflow: hidden; }

  .mop-mglass-btn {
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-primary, #e8eaf0);
    cursor: pointer; transition: transform .15s ease, background .15s;
  }
  .mop-mglass-btn:hover { background: rgba(255,255,255,0.1); }
  .mop-mglass-btn:active { transform: scale(0.94); }

  /* Drawer */
  .mop-mdrawer {
    position: fixed; inset: 0; z-index: 9000;
    display: none;
  }
  .mop-mdrawer.is-open { display: block; }
  .mop-mdrawer__sheet {
    position: absolute; inset: 0;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(120,80,255,0.10), transparent 60%),
      linear-gradient(180deg, rgba(20,22,32,0.96), rgba(14,16,22,0.98));
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    color: var(--text-primary, #e8eaf0);
    padding: 16px 14px 28px;
    overflow-y: auto;
    animation: mopSlideUp .26s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes mopSlideUp { from { transform: translateY(8%); opacity: 0; } to { transform: none; opacity: 1; } }

  .mop-mdrawer__topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mop-mdrawer__topbar-right { display: flex; gap: 10px; }

  .mop-mdrawer__id { display: flex; align-items: center; gap: 14px; padding: 18px 4px 12px; }
  .mop-mdrawer__avatar { position: relative; width: 56px; height: 56px; border-radius: 999px; overflow: hidden; flex: 0 0 56px; background: rgba(255,255,255,0.08); display: grid; place-items: center; font-weight: 700; }
  .mop-mdrawer__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mop-mdrawer__avatar--sm, .mop-mavatar--sm { width: 40px; height: 40px; flex-basis: 40px; }
  .mop-pres-dot { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 999px; border: 2px solid rgba(14,16,22,1); }
  .mop-pres-online { background: #22c55e; }
  .mop-pres-idle   { background: #f59e0b; }
  .mop-pres-busy   { background: #ef4444; }
  .mop-pres-offline { background: #6b7280; }

  .mop-mdrawer__name { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
  .mop-mdrawer__handle { font-size: 0.92rem; color: var(--text-tertiary, #8b8fa3); margin-top: 2px; }

  .mop-mdrawer__tabs {
    display: flex; gap: 4px; padding: 6px 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto; scrollbar-width: none;
  }
  .mop-mdrawer__tabs::-webkit-scrollbar { display: none; }
  .mop-mtab {
    background: transparent; border: 0; color: var(--text-tertiary, #8b8fa3);
    padding: 12px 14px; font-size: 0.95rem; font-weight: 600;
    border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  }
  .mop-mtab.is-active { color: var(--accent, #7c5cff); border-bottom-color: var(--accent, #7c5cff); }

  .mop-mdrawer__body { padding-top: 14px; display: flex; flex-direction: column; gap: 14px; }

  .mop-mcard {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px; backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 4px 0; overflow: hidden;
  }
  .mop-mlist > * { padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
  .mop-mlist > .has-sep { border-top: 1px solid rgba(255,255,255,0.06); }
  .mop-msection-label { color: var(--text-tertiary, #8b8fa3); font-size: 0.78rem; font-weight: 600; padding: 2px 6px; }

  .mop-mcta { width: 100%; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 18px 16px; text-align: left; }
  .mop-mcta-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.06); }
  .mop-mcta-text { flex: 1; min-width: 0; }
  .mop-mcta-title { font-weight: 700; font-size: 1.05rem; }
  .mop-mcta-sub { color: var(--text-tertiary, #8b8fa3); font-size: 0.85rem; margin-top: 2px; }
  .mop-mcta-chev { color: var(--text-tertiary, #8b8fa3); }

  .mop-mmember-row { padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
  .mop-mmember-name { font-weight: 600; font-size: 0.98rem; display: flex; gap: 8px; align-items: center; }
  .mop-mrole { font-size: 0.7rem; padding: 2px 8px; border-radius: 8px; background: rgba(124,92,255,0.18); color: #c8b8ff; font-weight: 700; }

  .mop-mavatar { position: relative; width: 40px; height: 40px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); display: grid; place-items: center; font-weight: 700; flex: 0 0 40px; }
  .mop-mavatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .mop-mempty { text-align: center; color: var(--text-tertiary, #8b8fa3); padding: 28px 12px; }
  .mop-mmedia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .mop-mmedia-tile { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.05); cursor: pointer; }
  .mop-mmedia-tile img, .mop-mmedia-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mop-mmedia-placeholder { display: grid; place-items: center; font-size: 0.7rem; color: var(--text-tertiary,#8b8fa3); padding: 6px; }

  .mop-mfile-row, .mop-mlink-row, .mop-mpin-row { cursor: pointer; text-decoration: none; color: inherit; }
  .mop-mfile-icon, .mop-mlink-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.06); display: grid; place-items: center; flex: 0 0 40px; }
  .mop-mfile-meta { min-width: 0; flex: 1; }
  .mop-mfile-name { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mop-mfile-sub { color: var(--text-tertiary,#8b8fa3); font-size: 0.78rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Settings bottom sheet */
  .mop-msheet { position: fixed; inset: 0; z-index: 9500; }
  .mop-msheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity .22s; }
  .mop-msheet.is-open .mop-msheet__backdrop { opacity: 1; }
  .mop-msheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(28,30,42,0.98), rgba(18,20,28,0.99));
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-top-left-radius: 24px; border-top-right-radius: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 8px 14px 28px;
    transform: translateY(100%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
    display: flex; flex-direction: column; gap: 12px;
    max-height: 80vh; overflow: auto;
  }
  .mop-msheet.is-open .mop-msheet__panel { transform: none; }
  .mop-msheet__handle { width: 44px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); margin: 8px auto 4px; }
  .mop-msheet__head { display: flex; align-items: center; gap: 14px; padding: 6px 8px 10px; }
  .mop-msheet-row { width: 100%; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 16px; display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 1.02rem; text-align: left; }
  .mop-msheet-row.has-sep { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .mop-mci { width: 32px; display: grid; place-items: center; color: var(--text-secondary, #b8bccd); }

  /* Mute menu and In-chat search styles moved to global scope at the bottom of the file */
}

/* Unread badge — visible on all sizes (count is updated regardless) */
.mop-unread-badge {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: #ef4444; color: #fff; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
  box-shadow: 0 0 0 2px rgba(20,22,32,0.6);
}
.dm-row { position: relative; }

/* ============================================================
   DM Info Panel — "New Workspace" glass card (matches image 2)
   ============================================================ */
#info-add-member-btn.info-newws-card {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(20px) saturate(160%);
  color: var(--text-primary, #fff) !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
  cursor: pointer;
}
#info-add-member-btn.info-newws-card:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(0,212,255,0.35) !important;
}
#info-add-member-btn.info-newws-card svg { width: 18px; height: 18px; }
.info-newws-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,212,255,0.18), rgba(120,80,255,0.18));
  color: #00d4ff;
  flex-shrink: 0;
}
.info-newws-card__icon svg { width: 22px; height: 22px; }
.info-newws-card__text { flex: 1; min-width: 0; }
.info-newws-card__chev { color: var(--text-tertiary, rgba(255,255,255,0.45)); display:inline-flex; }

/* Mobile (image 1): light surface look */
@media (max-width: 768px) {
  #info-add-member-btn.info-newws-card {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(0,0,0,0.06) !important;
    color: #1a1a1a !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  #info-add-member-btn.info-newws-card .info-newws-card__icon {
    background: rgba(0,0,0,0.06);
    color: #4a4a4a;
  }
  #info-add-member-btn.info-newws-card .info-newws-card__chev { color: rgba(0,0,0,0.35); }
}

/* Desktop: make info panel resizable from its left edge */
@media (min-width: 1025px) {
  #channel-info-panel.info-panel--open {
    resize: horizontal;
    overflow: auto;
    min-width: 320px;
    max-width: 560px;
  }
}

/* New Workspace card — two-line title + subtitle */
.info-newws-card__text { display: flex; flex-direction: column; gap: 2px; }
.info-newws-card__title { font-weight: 700; font-size: 0.98rem; line-height: 1.2; }
.info-newws-card__sub {
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  #info-add-member-btn.info-newws-card .info-newws-card__sub { color: rgba(0,0,0,0.55); }
}

/* ============================================================
   DESKTOP "Takeover" Mode for Info Panel
   When the info panel is open on desktop, it replaces the chat
   area entirely. The user goes "back" via the back button in
   the topbar to return to the conversation.
   ============================================================ */
@media (min-width: 1025px) {
  /* Hide chat-main and the right profile panel when info is open */
  .chat-layout:has(#channel-info-panel.info-panel--open) .chat-main,
  .chat-layout:has(#channel-info-panel.info-panel--open) #dm-profile-panel {
    display: none !important;
  }
  /* Make info panel fill the entire chat area */
  #channel-info-panel.info-panel--open {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    resize: none !important;
    border-radius: 16px !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    background:
      radial-gradient(120% 60% at 50% -10%, rgba(124,58,237,0.18), transparent 60%),
      radial-gradient(80% 50% at 100% 0%, rgba(0,212,255,0.14), transparent 65%),
      linear-gradient(180deg, rgba(10,14,21,0.92), rgba(10,14,21,0.98));
  }
  /* Show the mobile-style topbar (Back · Search · Bell · Settings) */
  #channel-info-panel.info-panel--open .info-panel__topbar {
    display: flex !important;
    align-items: center; gap: 10px;
    padding: 16px 20px 10px;
    flex-shrink: 0;
  }
  #channel-info-panel.info-panel--open .info-topbar-spacer { flex: 1; }
  #channel-info-panel.info-panel--open .info-topbar-btn {
    display: grid; place-items: center;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-primary, #f8fafc);
    padding: 8px; border-radius: 10px;
    transition: background 160ms ease;
  }
  #channel-info-panel.info-panel--open .info-topbar-btn:hover { background: rgba(255,255,255,0.08); }
  #channel-info-panel.info-panel--open .info-topbar-btn--circle {
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
  }
  #channel-info-panel.info-panel--open .info-topbar-btn--circle:hover { background: rgba(255,255,255,0.12); }

  /* Show the large hero (avatar + name + handle), hide the compact desktop header */
  #channel-info-panel.info-panel--open .info-panel__header { display: none !important; }
  #channel-info-panel.info-panel--open .info-panel__hero {
    display: flex !important; align-items: center; gap: 16px;
    padding: 6px 24px 18px;
    border-bottom: none;
    flex-shrink: 0;
  }
  #channel-info-panel.info-panel--open .info-panel__hero-close { display: none !important; }
  #channel-info-panel.info-panel--open .info-panel__hero-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 1.6rem; font-weight: 700;
    overflow: hidden;
  }
  #channel-info-panel.info-panel--open .info-panel__hero-icon--avatar {
    background: transparent; border: none;
  }
  #channel-info-panel.info-panel--open .info-panel__hero-icon--avatar .avatar {
    width: 64px !important; height: 64px !important; border-radius: 50% !important;
  }
  #channel-info-panel.info-panel--open .info-panel__hero-text { flex: 1; min-width: 0; }
  #channel-info-panel.info-panel--open .info-panel__hero-text h3 {
    margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #channel-info-panel.info-panel--open .info-panel__hero-sub {
    display: block; margin: 2px 0 0;
    font-size: 0.9rem; color: var(--text-tertiary, rgba(255,255,255,0.55));
  }

  /* Tabs row — underlined like the mobile/reference style */
  #channel-info-panel.info-panel--open .info-panel-tabs {
    display: flex; gap: 28px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto;
    flex-shrink: 0;
  }
  #channel-info-panel.info-panel--open .info-panel-tabs::-webkit-scrollbar { display: none; }
  #channel-info-panel.info-panel--open .info-panel-tab {
    background: transparent; border: none;
    padding: 14px 0; position: relative;
    font-size: 1rem; font-weight: 600;
    color: var(--text-tertiary, rgba(255,255,255,0.55));
    cursor: pointer;
  }
  #channel-info-panel.info-panel--open .info-panel-tab.active { color: #00d4ff; }
  #channel-info-panel.info-panel--open .info-panel-tab.active::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: #00d4ff; border-radius: 2px;
  }

  /* Body padding + roomy section spacing */
  #channel-info-panel.info-panel--open .info-panel__body {
    flex: 1; overflow-y: auto;
    padding: 20px 24px;
  }

  /* New Workspace card — keep dark glass look on desktop takeover */
  #channel-info-panel.info-panel--open #info-add-member-btn.info-newws-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--text-primary, #fff) !important;
    border-radius: 14px !important;
    padding: 16px !important;
  }
  #channel-info-panel.info-panel--open #info-add-member-btn.info-newws-card::before { display: none !important; }
  #channel-info-panel.info-panel--open #info-add-member-btn.info-newws-card .info-newws-card__icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(0,212,255,0.18), rgba(120,80,255,0.18));
    border: none;
    color: #00d4ff;
  }
  #channel-info-panel.info-panel--open #info-add-member-btn.info-newws-card .info-newws-card__sub {
    color: var(--text-tertiary, rgba(255,255,255,0.55));
  }
}

/* ============================================================
   DM INFO PANEL — DESKTOP REDESIGN (split view, Mopella aesthetic)
   Larger, breathable info panel on desktop matching mobile structure.
   Scoped to min-width: 1025px so mobile stays untouched.
   ============================================================ */
@media (min-width: 1025px) {
  /* Wider, glassy info panel as the right half of the split view */
  .channel-info-panel {
    width: 420px !important;
    min-width: 360px;
    max-width: 560px;
    border-left: 1px solid rgba(255,255,255,0.06);
    background:
      radial-gradient(120% 60% at 100% -10%, rgba(124,58,237,0.14), transparent 60%),
      radial-gradient(80% 50% at 0% 0%, rgba(0,212,255,0.10), transparent 65%),
      linear-gradient(180deg, rgba(14,18,28,0.92), rgba(10,14,21,0.98));
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
  }
  /* Make the chat-main and info-panel sit as a true split */
  .chat-main { flex: 1 1 auto; min-width: 0; }

  /* Hide the legacy compact header — we use the rich hero instead */
  #channel-info-panel .info-panel__header { display: none !important; }

  /* Show topbar (back/search/bell/settings) on desktop too */
  #channel-info-panel .info-panel__topbar {
    display: flex !important; align-items: center; gap: 10px;
    padding: 14px 18px 4px;
    flex-shrink: 0;
  }
  /* Back arrow visible on desktop too (lets you collapse the info panel) */
  #channel-info-panel #info-panel-back { display: inline-flex !important; }
  #channel-info-panel .info-topbar-spacer { flex: 1; }
  #channel-info-panel .info-topbar-btn {
    display: grid; place-items: center;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-primary, #f8fafc);
    padding: 8px; border-radius: 10px;
    transition: background 160ms ease, transform 160ms ease;
  }
  #channel-info-panel .info-topbar-btn:hover { background: rgba(255,255,255,0.08); }
  #channel-info-panel .info-topbar-btn--circle {
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
  }
  #channel-info-panel .info-topbar-btn--circle:hover { background: rgba(255,255,255,0.12); }
  #channel-info-panel .info-topbar-btn.is-active {
    background: rgba(0,212,255,0.15);
    border-color: rgba(0,212,255,0.35);
    color: #00d4ff;
  }

  /* Hero: big avatar, name, handle */
  #channel-info-panel .info-panel__hero {
    display: flex !important; align-items: center; gap: 16px;
    padding: 14px 22px 18px;
    border-bottom: none;
    flex-shrink: 0;
  }
  #channel-info-panel .info-panel__hero-icon {
    width: 68px; height: 68px; flex: none;
    border-radius: 20px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary);
    font-size: 1.7rem; font-weight: 800;
    overflow: hidden;
  }
  #channel-info-panel .info-panel__hero-icon--avatar { background: transparent; border: none; }
  #channel-info-panel .info-panel__hero-icon--avatar .avatar { width: 68px !important; height: 68px !important; border-radius: 50% !important; }
  #channel-info-panel .info-panel__hero-text { flex: 1; min-width: 0; }
  #channel-info-panel .info-panel__hero-text h3 {
    margin: 0; font-size: 1.5rem; font-weight: 800;
    color: var(--text-primary, #f8fafc); letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
  }
  #channel-info-panel .info-panel__hero-sub {
    display: block; margin: 4px 0 0; font-size: 0.92rem;
    color: var(--text-tertiary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #channel-info-panel .info-panel__hero-close { display: none !important; }

  /* Tabs row — clean, underline indicator */
  #channel-info-panel .info-panel-tabs {
    display: flex; gap: 26px;
    padding: 6px 22px 0; margin: 0;
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
  }
  #channel-info-panel .info-panel-tabs::-webkit-scrollbar { display: none; }
  #channel-info-panel .info-panel-tab {
    position: relative;
    padding: 12px 0; margin: 0; border: none; background: transparent;
    font-size: 0.95rem; font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer; white-space: nowrap; border-radius: 0;
    transition: color 160ms ease;
  }
  #channel-info-panel .info-panel-tab:hover { color: var(--text-secondary); background: transparent; }
  #channel-info-panel .info-panel-tab.active { color: #00d4ff; background: transparent; }
  #channel-info-panel .info-panel-tab.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2.5px; border-radius: 2px;
    background: linear-gradient(90deg, #00d4ff, #7c3aed);
    box-shadow: 0 0 12px rgba(0,212,255,0.55);
  }

  /* Body */
  #channel-info-panel .info-panel__body {
    flex: 1; overflow-y: auto;
    padding: 18px 18px 28px;
  }

  /* Section as a glass card */
  #channel-info-panel .info-section {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 4px;
    margin-bottom: 14px;
  }
  #channel-info-panel .info-members-section-header {
    padding: 8px 10px 8px; margin: 6px 0 0;
    font-size: 0.78rem; font-weight: 700;
    color: var(--text-tertiary); letter-spacing: 0.02em;
  }

  /* Member rows */
  #channel-info-panel .info-members-list { padding: 0; }
  #channel-info-panel .info-member-item {
    padding: 12px 14px; gap: 12px;
    border-radius: 0; margin: 0;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  #channel-info-panel .info-members-list .info-member-item:first-of-type,
  #channel-info-panel .info-members-list .info-members-section-header + .info-member-item { border-top: none; }
  #channel-info-panel .info-member-item .avatar { width: 36px !important; height: 36px !important; }
  #channel-info-panel .info-member-name { font-size: 0.95rem; font-weight: 600; }

  /* Pins / Links / Files / Threads cards inside .info-section */
  #channel-info-panel .info-pin-item,
  #channel-info-panel .info-link-item,
  #channel-info-panel .info-file-item,
  #channel-info-panel .info-thread-item {
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 12px 14px !important;
    display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit;
  }
  #channel-info-panel .info-pin-item:first-child,
  #channel-info-panel .info-link-item:first-child,
  #channel-info-panel .info-file-item:first-child,
  #channel-info-panel .info-thread-item:first-child { border-top: none; }
  #channel-info-panel .info-file-item__body, #channel-info-panel .info-file-item__name { min-width: 0; }
  #channel-info-panel .info-file-item__name { font-weight: 600; font-size: 0.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #channel-info-panel .info-file-item__meta,
  #channel-info-panel .info-link-item__meta { color: var(--text-tertiary); font-size: 0.78rem; margin-top: 2px; }
  #channel-info-panel .info-link-item__host { font-weight: 700; font-size: 0.92rem; }
  #channel-info-panel .info-link-item__url { color: var(--text-tertiary); font-size: 0.78rem; word-break: break-all; }

  /* Media grid inside its card */
  #channel-info-panel .info-media-grid {
    padding: 6px; gap: 6px;
    grid-template-columns: repeat(3, 1fr);
  }
  #channel-info-panel .info-media-item, #channel-info-panel .info-media-tile {
    aspect-ratio: 1; border-radius: 12px; overflow: hidden; cursor: pointer;
  }
  #channel-info-panel .info-media-tile img,
  #channel-info-panel .info-media-tile video {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }

  /* Empty states */
  #channel-info-panel .info-empty-state { padding: 40px 20px; }
}

/* ============================================================
   In-panel SEARCH bar (shared mobile + desktop)
   Filters items within the currently-visible pane.
   ============================================================ */
#info-panel-searchbar {
  display: none;
  padding: 8px 18px 4px;
  flex-shrink: 0;
}
#info-panel-searchbar.is-open { display: block; }
#info-panel-searchbar .info-search__wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  backdrop-filter: blur(12px);
}
#info-panel-searchbar input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--text-primary, #f8fafc); font-size: 0.92rem;
}
#info-panel-searchbar input::placeholder { color: var(--text-tertiary); }
#info-panel-searchbar .info-search__clear {
  background: transparent; border: 0; color: var(--text-tertiary);
  cursor: pointer; padding: 4px; border-radius: 6px;
}
#info-panel-searchbar .info-search__clear:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.info-search-hidden { display: none !important; }

/* ============================================================
   v4 INFO PANEL — Take-over overlay at ALL viewport widths
   Mobile: full-screen sheet (kept).
   Desktop/tablet: absolute overlay covering .chat-main only.
   Hero (avatar+name+@handle), topbar (back/search/bell/gear),
   tabs, and glass section cards apply at every width.
   ============================================================ */

.chat-layout { position: relative; }

#channel-info-panel.info-panel--open {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    z-index: 60;
    border-radius: 14px;
    display: flex !important;
    flex-direction: column;
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(124,58,237,0.22), transparent 60%),
        radial-gradient(80% 50% at 100% 0%, rgba(0,212,255,0.18), transparent 65%),
        linear-gradient(180deg, rgba(10,14,21,0.96), rgba(10,14,21,0.99));
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    animation: infoSheetIn 220ms cubic-bezier(.4,0,.2,1);
}

/* Topbar — visible on all widths */
#channel-info-panel.info-panel--open .info-panel__topbar {
    display: flex !important; align-items: center; gap: 10px;
    padding: 14px 16px 8px; flex-shrink: 0;
}
#channel-info-panel.info-panel--open .info-topbar-spacer { flex: 1; }
#channel-info-panel.info-panel--open .info-topbar-btn {
    display: grid; place-items: center;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-primary, #f8fafc);
    padding: 8px; border-radius: 10px;
    transition: background 160ms ease, transform 160ms ease;
}
#channel-info-panel.info-panel--open .info-topbar-btn:hover { background: rgba(255,255,255,0.08); }
#channel-info-panel.info-panel--open .info-topbar-btn--circle {
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
}
#channel-info-panel.info-panel--open .info-topbar-btn--circle:hover { background: rgba(255,255,255,0.12); }
#channel-info-panel.info-panel--open .info-topbar-btn.is-active { background: rgba(0,212,255,0.18); color:#00d4ff; }

/* Hero — visible on all widths */
#channel-info-panel.info-panel--open .info-panel__hero {
    display: flex !important; align-items: center; gap: 14px;
    padding: 6px 20px 16px; flex-shrink: 0;
}
#channel-info-panel.info-panel--open .info-panel__hero-close { display: none !important; }
#channel-info-panel.info-panel--open .info-panel__hero-icon {
    width: 60px; height: 60px; flex: none;
    border-radius: 18px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary);
    font-size: 1.6rem; font-weight: 700;
    overflow: hidden; padding: 0;
}
#channel-info-panel.info-panel--open .info-panel__hero-icon--avatar { background: transparent; border: none; }
#channel-info-panel.info-panel--open .info-panel__hero-icon--avatar .avatar {
    width: 60px !important; height: 60px !important; border-radius: 50% !important;
}
#channel-info-panel.info-panel--open .info-panel__hero-text { flex: 1; min-width: 0; }
#channel-info-panel.info-panel--open .info-panel__hero-text h3 {
    margin: 0; font-size: 1.5rem; font-weight: 800;
    color: var(--text-primary, #f8fafc); letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#channel-info-panel.info-panel--open .info-panel__hero-sub {
    display: block !important;
    margin: 2px 0 0; font-size: 0.92rem; color: var(--text-tertiary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Hide old compact header at all widths */
#channel-info-panel.info-panel--open .info-panel__header { display: none !important; }

/* Tabs */
#channel-info-panel.info-panel--open .info-panel-tabs {
    display: flex; gap: 24px;
    padding: 4px 20px 0; margin: 0;
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
#channel-info-panel.info-panel--open .info-panel-tabs::-webkit-scrollbar { display: none; }
#channel-info-panel.info-panel--open .info-panel-tab {
    position: relative;
    padding: 12px 0; margin: 0; border: none; background: transparent;
    font-size: 0.95rem; font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer; white-space: nowrap;
    transition: color 160ms ease;
}
#channel-info-panel.info-panel--open .info-panel-tab:hover { color: var(--text-secondary); }
#channel-info-panel.info-panel--open .info-panel-tab.active { color: #00d4ff; }
#channel-info-panel.info-panel--open .info-panel-tab.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2.5px; border-radius: 2px;
    background: linear-gradient(90deg, #00d4ff, #7c3aed);
    box-shadow: 0 0 12px rgba(0,212,255,0.55);
}

/* Body + glass section cards */
#channel-info-panel.info-panel--open .info-panel__body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 18px 18px 32px;
}
#channel-info-panel.info-panel--open .info-section {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(18px) saturate(140%);
    border-radius: 18px;
    padding: 4px;
    margin-bottom: 14px;
    box-shadow: 0 12px 32px -16px rgba(0,0,0,0.55);
}
#channel-info-panel.info-panel--open .info-section + .info-section { margin-top: 0; }

/* Section heading inside list */
#channel-info-panel.info-panel--open .info-members-section-header {
    padding: 8px 10px 8px; margin-top: 4px;
    font-size: 0.78rem; font-weight: 700;
    color: var(--text-tertiary); letter-spacing: 0.02em; text-transform: none;
}

/* New Workspace / Invite Members CTA */
#channel-info-panel.info-panel--open .info-section__header { padding: 0; margin: 0 0 6px; }
#channel-info-panel.info-panel--open #info-add-member-btn {
    width: 100% !important;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 14px !important;
    color: var(--text-primary, #f8fafc) !important;
    font-size: 1rem !important; font-weight: 700;
    justify-content: flex-start !important;
    text-align: left;
    position: relative;
    cursor: pointer;
}
#channel-info-panel.info-panel--open #info-add-member-btn .info-newws-card__icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(0,212,255,0.12);
    border: 1px solid rgba(0,212,255,0.20);
    display: grid; place-items: center;
    color: #00d4ff; flex: none;
}
#channel-info-panel.info-panel--open #info-add-member-btn .info-newws-card__text { flex: 1; }
#channel-info-panel.info-panel--open #info-add-member-btn .info-newws-card__chev { color: var(--text-tertiary); }
#channel-info-panel.info-panel--open #info-add-member-btn:not(.info-newws-card)::before {
    content: '';
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(0,212,255,0.12);
    border: 1px solid rgba(0,212,255,0.20);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='8.5' cy='7' r='4'/><line x1='20' y1='8' x2='20' y2='14'/><line x1='23' y1='11' x2='17' y2='11'/></svg>");
    background-repeat: no-repeat; background-position: center;
    flex: none;
}
#channel-info-panel.info-panel--open #info-add-member-btn:not(.info-newws-card) svg { display: none; }
#channel-info-panel.info-panel--open #info-add-member-btn:hover { background: rgba(255,255,255,0.04) !important; }

/* Member rows */
#channel-info-panel.info-panel--open .info-members-list { padding: 0; }
#channel-info-panel.info-panel--open .info-member-item {
    padding: 14px 16px; gap: 14px;
    border-radius: 0; margin: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center;
    cursor: pointer;
}
#channel-info-panel.info-panel--open .info-members-list .info-member-item:first-of-type,
#channel-info-panel.info-panel--open .info-members-list .info-members-section-header + .info-member-item {
    border-top: none;
}
#channel-info-panel.info-panel--open .info-member-item .avatar { width: 38px !important; height: 38px !important; }
#channel-info-panel.info-panel--open .info-member-name { font-size: 1rem; font-weight: 600; }
#channel-info-panel.info-panel--open .info-member-item:hover { background: rgba(255,255,255,0.03); }

/* Pins / Links / Files / Threads list rows */
#channel-info-panel.info-panel--open .info-pin-item,
#channel-info-panel.info-panel--open .info-link-item,
#channel-info-panel.info-panel--open .info-file-item,
#channel-info-panel.info-panel--open .info-thread-item {
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 14px 16px !important;
}
#channel-info-panel.info-panel--open .info-pin-item:first-child,
#channel-info-panel.info-panel--open .info-link-item:first-child,
#channel-info-panel.info-panel--open .info-file-item:first-child,
#channel-info-panel.info-panel--open .info-thread-item:first-child { border-top: none; }

/* Media grid */
#channel-info-panel.info-panel--open .info-media-grid {
    display: grid; padding: 6px; gap: 6px;
    grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 900px) {
    #channel-info-panel.info-panel--open .info-media-grid { grid-template-columns: repeat(4, 1fr); }
}
#channel-info-panel.info-panel--open .info-media-tile { aspect-ratio: 1; border-radius: 12px; overflow: hidden; }

/* Empty states */
#channel-info-panel.info-panel--open .info-empty-state {
    padding: 40px 20px; text-align: center; color: var(--text-tertiary);
}

/* In-panel search bar */
#channel-info-panel.info-panel--open #info-panel-searchbar {
    display: none; padding: 0 18px 10px;
}
#channel-info-panel.info-panel--open #info-panel-searchbar.is-open { display: block; }
#channel-info-panel.info-panel--open .info-search__wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: var(--text-tertiary);
}
#channel-info-panel.info-panel--open .info-search__wrap input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text-primary); font-size: 0.95rem;
}
#channel-info-panel.info-panel--open .info-search__clear {
    background: transparent; border: none; color: var(--text-tertiary); cursor: pointer;
    padding: 2px; display: grid; place-items: center;
}
.info-search-hidden { display: none !important; }

/* On mobile: take over the entire viewport (existing behaviour) */
@media (max-width: 1024px) {
    #channel-info-panel.info-panel--open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 9000;
        border-radius: 0 !important;
    }
}

/* ============================================================
   Mopella unified back button (matches reference image:
   small circular dark glass pill with white chevron-left)
   ============================================================ */
.mopella-back-btn,
#channel-back-btn,
#info-panel-back,
#info-panel-hero-back,
#mnav-back,
.mop-mdrawer .mop-mglass-btn[data-act="close"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.14), transparent 55%),
        rgba(255,255,255,0.05) !important;
    box-shadow:
        0 2px 10px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(18px) saturate(160%);
    color: #fff !important;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.mopella-back-btn:hover,
#channel-back-btn:hover,
#info-panel-back:hover,
#info-panel-hero-back:hover,
#mnav-back:hover,
.mop-mdrawer .mop-mglass-btn[data-act="close"]:hover {
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.18), transparent 55%),
        rgba(255,255,255,0.10) !important;
}
.mopella-back-btn:active,
#channel-back-btn:active,
#info-panel-back:active,
#info-panel-hero-back:active,
#mnav-back:active,
.mop-mdrawer .mop-mglass-btn[data-act="close"]:active { transform: scale(0.94); }
.mopella-back-btn svg,
#channel-back-btn svg,
#info-panel-back svg,
#info-panel-hero-back svg,
#mnav-back svg,
.mop-mdrawer .mop-mglass-btn[data-act="close"] svg {
    width: 16px; height: 16px; stroke: #fff; stroke-width: 2.4;
}
#mnav-back { width: auto !important; padding: 0 14px 0 10px !important; gap: 8px; font-size: 0.85rem; color: #fff !important; }

/* ============================================================
   Channel/DM info panel — Mopella gradient + liquid glass
   ============================================================ */
.channel-info-panel.glass-panel {
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(123,92,255,0.18), transparent 55%),
        radial-gradient(120% 60% at 0% 100%, rgba(0,200,255,0.14), transparent 55%),
        linear-gradient(180deg, rgba(18,20,30,0.78), rgba(12,14,22,0.86)) !important;
    backdrop-filter: blur(28px) saturate(180%);
    border-left: 1px solid rgba(255,255,255,0.08);
    position: relative;
}
.channel-info-panel.glass-panel::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%);
    z-index: 1;
}

/* Mobile drawer — gap above, rounded top, gradient liquid glass */
@media (max-width: 768px) {
    .mop-mdrawer__sheet {
        top: 14px !important;
        border-radius: 22px 22px 0 0 !important;
        background:
            radial-gradient(120% 60% at 100% 0%, rgba(123,92,255,0.18), transparent 55%),
            radial-gradient(120% 60% at 0% 100%, rgba(0,200,255,0.12), transparent 55%),
            linear-gradient(180deg, rgba(20,22,32,0.92), rgba(14,16,22,0.96)) !important;
        box-shadow: 0 -8px 28px rgba(0,0,0,0.45);
        padding-top: 14px !important;
    }
    .mop-mdrawer { background: rgba(0,0,0,0.55); }

    /* Default-blue gradient avatar fallback (matches desktop) */
    .mop-mdrawer__avatar:not(:has(img)),
    .mop-mavatar:not(:has(img)) {
        background: linear-gradient(135deg, #4f7cff 0%, #7b5cff 100%) !important;
        color: #fff;
    }
    .mop-mdrawer__avatar > span,
    .mop-mavatar > span { color: #fff; font-weight: 800; font-size: 1.05rem; }
    .mop-mdrawer__avatar > span { font-size: 1.5rem; }
}

/* New Workspace picker must float over the mobile info drawer (z 9000) */
.new-ws-picker-overlay { z-index: 9999 !important; }

/* Member rows feel clickable */
.mop-mmember-row { cursor: pointer; }
.mop-mmember-row:active { background: rgba(255,255,255,0.04); }

/* ============================================================
   Fix-up: hide duplicate hero back, refine panel gradient to
   match reference (deep navy + subtle top glow), and lighten
   unified back button so it sits as glass on the panel.
   ============================================================ */
#channel-info-panel.info-panel--open .info-panel__hero-back { display: none !important; }

#channel-info-panel.info-panel--open {
    background:
        radial-gradient(80% 40% at 50% -10%, rgba(124,58,237,0.18), transparent 70%),
        radial-gradient(60% 30% at 100% 0%, rgba(0,212,255,0.10), transparent 70%),
        linear-gradient(180deg, #0a0e15 0%, #0a0e15 100%) !important;
}

/* Back button — translucent glass that sits on the panel gradient */
#channel-info-panel.info-panel--open #info-panel-back,
.mop-mdrawer #mnav-back,
.mop-mdrawer .mop-mglass-btn[data-act="close"] {
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.10), transparent 55%),
        rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: #fff !important;
}
#channel-info-panel.info-panel--open #info-panel-back:hover {
    background: rgba(255,255,255,0.10) !important;
}

/* ===================================================================
   Late overrides — task views, mobile scrolling, info panel polish
   =================================================================== */

/* Remove stray ">" chevron next to the Invite Members button */
#channel-info-panel.info-panel--open #info-add-member-btn::after { content: none !important; }

/* Move "Invite Members" to the bottom of the members list */
#channel-info-panel.info-panel--open #info-pane-members .info-section { display: flex; flex-direction: column; }
#channel-info-panel.info-panel--open #info-pane-members .info-section__header { order: 2; margin-top: 8px; }
#channel-info-panel.info-panel--open #info-pane-members .info-members-list { order: 1; }

/* Mobile: scrollable task boards (two-axis) */
@media (max-width: 768px) {
    #kanban-board-view,
    #list-board-view,
    #calendar-board-view {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 200px);
        padding-bottom: 80px;
    }
    #kanban-board-view { overflow-x: auto !important; }
    .kanban-column { min-width: 280px; }

    /* Mobile list view: stacked cards */
    #list-board-view .list-view-header { display: none !important; }
    #list-board-view .list-view-row {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 12px 14px;
        border-radius: 12px;
        margin: 8px 10px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.06);
        width: auto;
    }
    #list-board-view .list-view-row > * {
        text-align: left !important;
        font-size: 0.85rem;
    }
    #list-board-view .list-view-row .list-view-cell-title,
    #list-board-view .list-view-row [data-cell="title"] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    /* Calendar view: tighten on mobile */
    #calendar-board-view { padding: 4px !important; }
    #calendar-board-view .calendar-grid,
    #calendar-board-view .calendar-view-grid { font-size: 0.65rem; gap: 4px !important; }
    #calendar-board-view .calendar-cell,
    #calendar-board-view .calendar-day-cell { min-height: 42px !important; padding: 2px !important; }
    #calendar-board-view .calendar-header,
    #calendar-board-view .calendar-toolbar { padding: 2px 4px !important; }
    #calendar-board-view .calendar-toolbar button,
    #calendar-board-view .calendar-nav-btn { padding: 3px 6px !important; font-size: 0.7rem !important; }

    /* Shrink task view-switcher + action buttons on mobile so they fit one row */
    .task-view-switcher { gap: 2px !important; }
    .task-view-switcher button,
    .task-view-switcher .icon-btn {
        padding: 4px 6px !important;
        font-size: 0.7rem !important;
        min-width: 0 !important;
        height: 28px !important;
    }
    .task-view-switcher button svg { width: 12px !important; height: 12px !important; }
    #tasks-panel .btn,
    #tasks-panel .icon-btn { padding: 4px 8px !important; font-size: 0.7rem !important; height: 28px !important; }
    #tasks-panel .panel-header { padding: 6px 8px !important; gap: 4px !important; flex-wrap: wrap; }
    #tasks-panel #task-search-input { font-size: 0.8rem !important; height: 32px !important; }
}

/* Always force-hide the inactive view containers as a safety net */
.task-view-active--kanban   #list-board-view,
.task-view-active--kanban   #calendar-board-view { display: none !important; }
.task-view-active--list     #kanban-board-view,
.task-view-active--list     #calendar-board-view { display: none !important; }
.task-view-active--calendar #kanban-board-view,
.task-view-active--calendar #list-board-view     { display: none !important; }


/* ===================================================================
   Profile modal: reference-styled layout (banner + avatar + actions)
   =================================================================== */
.modal--profile .profile-view__content { padding: 0 0 16px; }
.modal--profile .profile-view__banner {
    height: 110px;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(124,58,237,0.55), transparent 60%),
        radial-gradient(120% 80% at 100% 0%, rgba(0,212,255,0.30), transparent 60%),
        linear-gradient(135deg, #4b1e8a 0%, #2a1057 100%);
    border-radius: 14px 14px 0 0;
}
.modal--profile .profile-view__avatar-wrap {
    margin: -44px 0 0 18px;
    width: 92px; height: 92px;
}
.modal--profile .profile-view__avatar {
    width: 92px; height: 92px;
    border-radius: 50%;
    border: 5px solid var(--bg-secondary, #0a0e15);
    overflow: hidden;
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
}
.modal--profile .profile-view__avatar img { width: 100%; height: 100%; object-fit: cover; }
.modal--profile .profile-view__details { padding: 12px 18px 4px; text-align: left; }
.modal--profile .profile-view__name { font-size: 1.6rem; font-weight: 800; margin: 0 0 2px; }
.modal--profile .profile-view__role { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 10px; }
.profile-view__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 18px 16px !important;
}
.btn--profile-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-primary, #f8fafc);
    border-radius: 999px;
    font-size: 0.95rem; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.btn--profile-action:hover { background: rgba(255,255,255,0.10); }
.btn--profile-action:active { transform: scale(0.98); }

@media (max-width: 768px) {
    .modal--profile .profile-view__banner { height: 130px; border-radius: 14px 14px 0 0; }
    .modal--profile .profile-view__avatar-wrap,
    .modal--profile .profile-view__avatar { width: 96px; height: 96px; }
    .modal--profile .profile-view__name { font-size: 1.7rem; }
}

/* ===================================================================
   Info panel: liquid-glass background matching the messages section
   (deep navy with purple bottom glow + subtle cyan top glow), plus
   consistent glass styling for back/search/bell/settings buttons.
   =================================================================== */
#channel-info-panel.info-panel--open {
    background:
        radial-gradient(90% 50% at 50% 100%, rgba(124,58,237,0.28), transparent 70%),
        radial-gradient(70% 40% at 100% 0%, rgba(0,212,255,0.12), transparent 70%),
        radial-gradient(60% 35% at 0% 0%, rgba(120,80,255,0.10), transparent 70%),
        linear-gradient(180deg, #0a0e15 0%, #0c1226 60%, #131036 100%) !important;
    backdrop-filter: blur(22px) saturate(140%);
    border-left: 1px solid rgba(255,255,255,0.06);
}

/* Liquid-glass pills for every action button on the info panel topbar */
#channel-info-panel.info-panel--open .info-topbar-btn,
#channel-info-panel.info-panel--open .info-topbar-btn--circle,
#channel-info-panel.info-panel--open #info-panel-back,
#channel-info-panel.info-panel--open #info-panel-search,
#channel-info-panel.info-panel--open #info-panel-bell,
#channel-info-panel.info-panel--open #info-panel-settings {
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.14), transparent 55%),
        rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
    backdrop-filter: blur(10px) saturate(140%);
    border-radius: 999px !important;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.1s;
}
#channel-info-panel.info-panel--open .info-topbar-btn:hover,
#channel-info-panel.info-panel--open #info-panel-back:hover,
#channel-info-panel.info-panel--open #info-panel-search:hover,
#channel-info-panel.info-panel--open #info-panel-bell:hover,
#channel-info-panel.info-panel--open #info-panel-settings:hover {
    background: rgba(255,255,255,0.12) !important;
}

/* Force the New Workspace / Invite CTA off in DM info panels.
   It was hidden inline by JS, but also kill it via CSS as belt-and-braces. */
#channel-info-panel.info-panel--open[data-mode="dm"] #info-add-member-btn,
#channel-info-panel.info-panel--open #info-add-member-btn[style*="display: none"] {
    display: none !important;
}

/* Mobile drawer: match the same liquid-glass background */
.mop-mdrawer.is-open .mop-mdrawer__panel,
.mop-mdrawer.is-open .mop-mdrawer__sheet {
    background:
        radial-gradient(90% 50% at 50% 100%, rgba(124,58,237,0.30), transparent 70%),
        radial-gradient(70% 40% at 100% 0%, rgba(0,212,255,0.14), transparent 70%),
        linear-gradient(180deg, #0a0e15 0%, #0c1226 60%, #131036 100%) !important;
    backdrop-filter: blur(22px) saturate(140%);
}

/* Mobile: calendar view — tighten further and use a clean grid */
@media (max-width: 768px) {
    #calendar-board-view {
        padding: 8px !important;
        font-size: 0.78rem;
    }
    #calendar-board-view .calendar-header,
    #calendar-board-view .calendar-view-header {
        font-size: 0.85rem; padding: 6px 4px;
    }
    #calendar-board-view .calendar-grid,
    #calendar-board-view .calendar-view-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }
    #calendar-board-view .calendar-day,
    #calendar-board-view .calendar-cell {
        min-height: 42px !important;
        padding: 2px !important;
        border-radius: 6px !important;
        font-size: 0.72rem;
    }
    #calendar-board-view .calendar-task,
    #calendar-board-view .calendar-event {
        font-size: 0.65rem !important;
        padding: 2px 4px !important;
        margin-top: 2px !important;
        border-radius: 4px !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Task list view: ensure full clean stacked card */
    #list-board-view .list-view-row {
        box-shadow: 0 1px 0 rgba(255,255,255,0.04);
    }
}

/* ===================================================================
   Remove stray '>' (header info toggle chevron) in chat header.
   The chat title + caret already opens the info panel, so this
   duplicate chevron button is redundant on both desktop and mobile.
   =================================================================== */
#header-info-toggle { display: none !important; }

/* ===================================================================
   Desktop: never show the chat back button. Going back to chat from
   the info panel happens via the liquid-glass back button inside
   the info panel itself.
   =================================================================== */
@media (min-width: 769px) {
    #channel-back-btn,
    #panel-chat .channel-back-btn { display: none !important; }
}

/* Small label between sections in the DM search dropdown */
.dm-search-section-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #8b95a8);
    padding: 8px 12px 4px;
    font-weight: 700;
}

/* ============================================================
   DM Messages card — extend Add Friends bar across the row
   after removing the "new message" button.
   ============================================================ */
.messages-card__actions { display: flex; align-items: center; gap: 8px; }
.messages-card__actions .msg-add-friend-bar {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

/* ===================================================================
   FORWARD SHEET (Mopella "Forward To" modal) — mobile + desktop
   =================================================================== */
#forward-message-overlay { z-index: 10000; }
#forward-message-overlay .forward-sheet {
    width: min(440px, 100vw);
    max-width: 100vw;
    max-height: 92vh;
    background: #ffffff;
    color: #111827;
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.45);
}
@media (min-width: 700px) {
    #forward-message-overlay .forward-sheet {
        border-radius: 18px;
        max-height: 80vh;
        box-shadow: 0 20px 80px rgba(0,0,0,0.4);
    }
}
.forward-sheet__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 10px;
    background: #f3f4f6;
}
.forward-sheet__title {
    flex: 1;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}
.forward-sheet__icon-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 10px;
    color: #111827; cursor: pointer;
}
.forward-sheet__icon-btn:hover { background: rgba(0,0,0,0.06); }
.forward-sheet__search-wrap {
    position: relative;
    margin: 0 12px 10px;
    background: #ececef;
    border-radius: 12px;
    display: flex; align-items: center;
}
.forward-sheet__search-icon {
    display: inline-flex; padding: 0 10px; color: #6b7280;
}
.forward-sheet__search-wrap input {
    flex: 1; border: 0; outline: none; background: transparent;
    padding: 11px 12px 11px 0; font-size: 0.95rem; color: #111827;
}
.forward-sheet__list-wrap {
    flex: 1; min-height: 120px;
    overflow-y: auto;
    background: #ffffff;
    margin: 0 12px;
    border-radius: 14px;
    border: 1px solid #ececef;
}
.forward-target-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f2f4;
    cursor: pointer;
    transition: background 0.12s ease;
}
.forward-target-row:last-child { border-bottom: 0; }
.forward-target-row:hover { background: #f7f7f9; }
.forward-target-row.is-checked { background: #f1f5ff; }
.forward-target-row__icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #ececef; color: #6b7280; font-weight: 700; font-size: 1rem;
    flex-shrink: 0; overflow: hidden;
}
.forward-target-row__icon--avatar { background: transparent; }
.forward-target-row__icon--hash { color: #8b5cf6; }
.forward-target-row__meta {
    flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.forward-target-row__name {
    font-size: 0.95rem; font-weight: 600; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forward-target-row__sub {
    font-size: 0.78rem; color: #6b7280; text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forward-target-row__check {
    width: 22px; height: 22px; accent-color: #7c3aed; cursor: pointer;
}
.forward-sheet__empty {
    padding: 32px 16px; text-align: center; color: #6b7280; font-size: 0.9rem;
}
.forward-sheet__preview-row {
    display: flex; gap: 10px; align-items: stretch;
    margin: 12px 14px 0;
    padding: 8px 0;
}
.forward-sheet__preview-bar {
    width: 3px; border-radius: 2px; background: #7c3aed;
}
.forward-sheet__preview-text {
    flex: 1; font-size: 0.9rem; color: #374151;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forward-sheet__composer {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 12px 14px;
    background: #ffffff;
    border-top: 1px solid #f1f2f4;
}
.forward-sheet__composer-field {
    flex: 1; display: flex; align-items: center;
    background: #ececef; border-radius: 22px; padding: 4px 4px 4px 14px;
}
.forward-sheet__composer-field input {
    flex: 1; border: 0; outline: none; background: transparent;
    padding: 10px 0; font-size: 0.95rem; color: #111827;
}
.forward-sheet__emoji {
    width: 34px; height: 34px; border-radius: 50%;
    background: transparent; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: #6b7280;
}
.forward-sheet__send {
    padding: 10px 22px; border-radius: 22px;
    background: linear-gradient(135deg,#a78bfa,#7c3aed);
    color: #ffffff; font-weight: 600; border: 0; cursor: pointer;
    font-size: 0.95rem;
}
.forward-sheet__send:disabled {
    background: #cdb8f6; color: #ffffff; cursor: not-allowed; opacity: 0.7;
}

/* ===================================================================
   DM chat back button — desktop: hide (per Mopella spec, back lives in
   the info panel only); mobile: keep the existing behavior.
   =================================================================== */
@media (min-width: 1025px) {
    body.nx-mode-dm-chat #channel-back-btn { display: none !important; }
}

/* ===================================================================
   Info panel — make Members section breathe, bold names + online label
   =================================================================== */
@media (min-width: 1025px) {
    .channel-info-panel { width: 360px !important; min-width: 360px !important; }
}
.info-panel__body .info-member-item {
    padding: 10px 14px;
    gap: 12px;
    border-radius: 10px;
}
.info-panel__body .info-member-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    overflow: visible;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
}
.info-panel__body .info-members-section-header,
.info-panel__body .info-members-online-header,
#info-pane-members > .info-members-section-title {
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--text-secondary) !important;
    padding: 12px 14px 6px !important;
}

/* ===================================================================
   PWA — install banner (suggests installing Mopella)
   =================================================================== */
.pwa-install-banner {
    position: fixed;
    bottom: 18px; right: 18px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(20, 18, 36, 0.92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    color: #f5f5f7;
    z-index: 12000;
    box-shadow: 0 18px 50px rgba(0,0,0,0.5);
    animation: pwaSlideIn 0.35s ease;
}
.pwa-install-banner img { width: 36px; height: 36px; border-radius: 9px; }
.pwa-install-banner__text { display: flex; flex-direction: column; line-height: 1.15; }
.pwa-install-banner__title { font-weight: 700; font-size: 0.92rem; }
.pwa-install-banner__sub { font-size: 0.78rem; color: rgba(245,245,247,0.7); }
.pwa-install-banner__btn {
    background: linear-gradient(135deg,#a78bfa,#7c3aed);
    color: #fff; border: 0; padding: 8px 16px; border-radius: 999px;
    font-weight: 600; cursor: pointer; font-size: 0.85rem;
}
.pwa-install-banner__close {
    background: transparent; border: 0; color: rgba(255,255,255,0.6);
    cursor: pointer; padding: 4px 6px; font-size: 1.1rem;
}
@keyframes pwaSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 600px) {
    .pwa-install-banner { left: 12px; right: 12px; bottom: 12px; }
}

/* ============================================================
   Workspace settings, account hero, channel settings (2026-06-24)
   ============================================================ */

/* Push the only call button right to the edge of the chat header. */
.chat-header__right .call-btn--edge { margin-right: 0; }
.chat-header__right { padding-right: 0; }

/* ----- Account profile hero (general settings) ----- */
.account-profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 18px;
    margin-bottom: 22px;
    background: linear-gradient(145deg, rgba(124,58,237,0.08), rgba(56,189,248,0.06));
    border: 1px solid rgba(255,255,255,0.06);
}
.account-avatar-hero {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    flex: none;
    background: transparent;
    box-shadow: 0 12px 32px -12px rgba(0,0,0,0.55), 0 0 0 3px rgba(124,58,237,0.35);
    transition: transform .15s ease, box-shadow .2s ease;
}
.account-avatar-hero:hover { transform: scale(1.03); box-shadow: 0 16px 36px -12px rgba(0,0,0,0.6), 0 0 0 3px rgba(124,58,237,0.55); }
.account-avatar-hero__img {
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    background: var(--bg-glass-strong, rgba(255,255,255,0.06));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 36px; color: var(--text-primary, #f5f5f7);
}
.account-avatar-hero__img img,
.account-avatar-hero__img .avatar,
.account-avatar-hero__img > * { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; }
.account-avatar-hero__edit {
    position: absolute; right: 2px; bottom: 2px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--neon-purple, #7c3aed);
    color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.account-profile-card__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.account-profile-card__name { font-size: 1.15rem; font-weight: 700; color: var(--text-primary,#f5f5f7); }
.account-profile-card__email { font-size: 0.8rem; color: var(--text-tertiary,#9ca3af); margin-bottom: 6px; }
.account-profile-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- Workspace profile card ----- */
.ws-profile-card {
    display: flex; gap: 18px; align-items: center;
    padding: 18px; border-radius: 18px; margin-bottom: 18px;
    background: linear-gradient(145deg, rgba(56,189,248,0.07), rgba(124,58,237,0.05));
    border: 1px solid rgba(255,255,255,0.06);
}
.ws-profile-card__avatar {
    position: relative; width: 92px; height: 92px; border-radius: 22px;
    border: none; padding: 0; cursor: pointer; background: transparent; flex: none;
    box-shadow: 0 10px 28px -12px rgba(0,0,0,0.5), 0 0 0 3px rgba(56,189,248,0.25);
    transition: transform .15s ease, box-shadow .2s ease;
}
.ws-profile-card__avatar:hover { transform: scale(1.03); box-shadow: 0 14px 32px -12px rgba(0,0,0,0.55), 0 0 0 3px rgba(56,189,248,0.5); }
.ws-profile-card__avatar[disabled] { cursor: not-allowed; opacity: 0.7; }
.ws-profile-card__avatar-img {
    width: 100%; height: 100%; border-radius: 22px; overflow: hidden;
    background: var(--bg-glass-strong, rgba(255,255,255,0.06));
    display: flex; align-items: center; justify-content: center;
}
.ws-profile-card__avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.ws-profile-card__avatar-fallback { font-size: 2.1rem; font-weight: 800; color: var(--text-primary,#f5f5f7); }
.ws-profile-card__avatar-edit {
    position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px;
    border-radius: 50%; background: var(--neon-cyan, #38bdf8); color: #0b1220;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.ws-profile-card__body { min-width: 0; }
.ws-profile-card__title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary,#f5f5f7); }
.ws-profile-card__sub { font-size: 0.78rem; color: var(--text-tertiary,#9ca3af); margin-top: 2px; }
.ws-profile-card__hint { font-size: 0.74rem; color: #f59e0b; margin-top: 8px; }

/* ----- Permissions list ----- */
.settings-pane__intro { font-size: 0.8rem; color: var(--text-secondary,#cbd5e1); margin: 0 0 14px; }
.ws-perm-list { display: flex; flex-direction: column; gap: 10px; }
.ws-perm-row {
    display: flex; gap: 14px; align-items: center;
    padding: 14px 16px; border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.05);
}
.ws-perm-row__text { flex: 1; min-width: 0; }
.ws-perm-row__title { font-size: 0.92rem; font-weight: 600; color: var(--text-primary,#f5f5f7); }
.ws-perm-row__sub { font-size: 0.74rem; color: var(--text-tertiary,#9ca3af); margin-top: 2px; }
.ws-perm-select { width: auto !important; min-width: 160px; padding: 8px 12px !important; font-size: 0.82rem !important; }
.ws-perm-footnote { font-size: 0.74rem; color: var(--text-tertiary,#9ca3af); margin-top: 12px; }

/* ----- Channel settings modal ----- */
.channel-settings-hero {
    display: flex; gap: 14px; align-items: center;
    padding: 14px; border-radius: 14px; margin-bottom: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
}
.channel-settings-hero__hash {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, rgba(124,58,237,0.35), rgba(56,189,248,0.3));
    font-size: 1.6rem; font-weight: 800; color: #fff;
}
.channel-settings-hero__name { font-size: 1.05rem; font-weight: 700; color: var(--text-primary,#f5f5f7); }
.channel-settings-hero__sub { font-size: 0.76rem; color: var(--text-tertiary,#9ca3af); margin-top: 2px; }
.channel-settings-readonly { font-size: 0.78rem; color: #f59e0b; margin-top: 4px; }

/* ----- Responsive (mobile) ----- */
@media (max-width: 720px) {
    .account-profile-card,
    .ws-profile-card { flex-direction: column; align-items: flex-start; text-align: left; }
    .ws-perm-row { flex-direction: column; align-items: stretch; }
    .ws-perm-select { width: 100% !important; }
}

/* =====================================================================
   MODAL + SETTINGS SHELL FIXES
   Goals (from screenshot annotations):
   1. Edit Profile modal: tall content (Danger zone + Save) was being
      pushed off-screen because .modal had no height cap and .modal__body
      grew to 80vh + sibling sections + footer overflowed the viewport.
      Cap the whole modal to 90vh and let the body flex-shrink with its
      own scroll, so the Save Changes button is always reachable.
   2. Preferences & Settings modal: side-by-side layout used a fixed
      height: 400px, leaving a large empty rectangle below the tabs and
      content. Make the settings-layout fill the parent modal--lg so
      the right pane uses the full available height beside the tabs.
   ===================================================================== */

.modal {
    /* Cap total modal height so header/body/footer always fit on screen */
    max-height: 90vh;
    /* display: flex; flex-direction: column already set earlier in file */
}

.modal__body {
    /* Let the body share available space inside the capped modal, instead
       of expanding to a viewport-relative max that can push the footer
       (Save Changes) off the bottom of the screen. */
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* Tablet/desktop override of the older modal__body max-height calc.
   Without this, the Settings modal still uses the fixed 400px below. */
@media (min-width: 769px) {
    .modal__body { max-height: none; }
}

/* Make the Settings modal's side-by-side layout fill the modal--lg height
   so the right-hand content pane occupies the whole space beside the tabs
   (the previously-empty rectangle in the user's screenshot). */
.modal__body.settings-layout {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    /* Force side-by-side: .modal__body sets flex-direction:column, which
       would stack the sidebar above the content pane and leave the right
       area empty. Override to row so tabs sit beside the pane. */
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0 !important;
}

.modal__body.settings-layout > .settings-sidebar {
    flex: 0 0 200px;
}
.modal__body.settings-layout > .settings-content {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 768px) {
    .modal__body.settings-layout {
        flex-direction: column;
    }
    .modal__body.settings-layout > .settings-sidebar {
        flex: 0 0 auto;
    }
}

.modal--lg .settings-content {
    /* Tabs scroll on the left, content scrolls on the right — together
       they fill the modal vertically, never leaving a blank gap. */
    min-height: 0;
    height: 100%;
}

.modal--lg .settings-sidebar {
    min-height: 0;
    overflow-y: auto;
}

/* Mobile: keep stacked layout but make each pane height behave so
   content is reachable without a blank gap. */
@media (max-width: 768px) {
    .modal__body.settings-layout {
        height: auto;
        min-height: 0;
    }
    .modal--lg .settings-content {
        height: auto;
        min-height: 0;
    }
}

/* ========== FILE UPLOAD SPINNER & STATES ========== */
.file-preview-item--uploading {
    position: relative;
    opacity: 0.7;
    pointer-events: none;
}
.file-preview-item--uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: 1;
}
.file-preview-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--neon-cyan, #00d4ff);
    border-radius: 50%;
    z-index: 2;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== SYSTEM / CALL HISTORY MESSAGES ========== */
.message--system {
    padding: 4px 16px 4px 56px;
    text-align: center;
}
.message--system .message__text {
    font-style: italic;
    color: var(--text-tertiary);
    font-size: 0.8rem;
}
.message--system .message__content {
    text-align: center;
}
.message--system .message-actions-bar {
    display: none;
}

/* ========== PROFILE ACTION BUTTON VARIANTS ========== */
.btn--profile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.8rem;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.btn--profile-action.btn--primary {
    background: linear-gradient(135deg, var(--neon-blue, #0ea5e9), var(--neon-purple, #a855f7));
    color: #fff;
    border-color: transparent;
}
.btn--profile-action.btn--primary:hover {
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.3);
    transform: translateY(-1px);
}
.btn--profile-action.btn--secondary {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    border-color: rgba(255,255,255,0.1);
}
.btn--profile-action.btn--danger {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}
.btn--profile-action.btn--danger:hover {
    background: rgba(239, 68, 68, 0.22);
}
.btn--profile-action.btn--danger-ghost {
    background: transparent;
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.15);
}
.btn--profile-action.btn--danger-ghost:hover {
    background: rgba(239, 68, 68, 0.1);
}
.btn--profile-action:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* ========== DISCORD-STYLE PROFILE VIEW CARD ========== */
.pv-card {
    width: 90%;
    max-width: 440px;
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: transform var(--duration-slow, 0.4s) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
    display: flex;
    flex-direction: column;
    background: rgba(20, 22, 36, 0.92);
    backdrop-filter: blur(32px) saturate(170%);
    -webkit-backdrop-filter: blur(32px) saturate(170%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 80px -12px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
}
.modal-overlay--active .pv-card {
    transform: translateY(0) scale(1);
}

/* Close Button */
.pv-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    transition: background 0.15s ease;
}
.pv-close:hover {
    background: rgba(255,255,255,0.12);
}

/* Banner */
.pv-banner {
    height: 120px;
    background: linear-gradient(135deg, #7b5cff 0%, #00c8ff 50%, #a855f7 100%);
    position: relative;
    flex-shrink: 0;
}
.pv-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,0.18), transparent 65%);
}

/* Avatar */
.pv-avatar-wrap {
    position: relative;
    margin: -55px 0 0 24px;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    z-index: 3;
}
.pv-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 6px solid rgba(20, 22, 36, 0.95);
    background: rgba(30, 32, 50, 0.9);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px -6px rgba(0,0,0,0.55);
}
.pv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.pv-avatar span {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-primary, #fff);
}
.pv-status-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 5px solid rgba(20, 22, 36, 0.95);
    background: #6b7280;
    z-index: 4;
}
.pv-status-dot.status-dot--online { background: #23d160; }
.pv-status-dot.status-dot--idle { background: #fbbf24; }
.pv-status-dot.status-dot--dnd { background: #ef4444; }
.pv-status-dot.status-dot--offline { background: #6b7280; }

/* Body */
.pv-body {
    padding: 10px 22px 22px;
    overflow-y: auto;
    max-height: 55vh;
}
.pv-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary, #fff);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.pv-handle {
    font-size: 0.82rem;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    margin: 0 0 14px;
    font-weight: 500;
}

/* Action Buttons */
.pv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.pv-actions .btn--profile-action {
    padding: 7px 16px;
    font-size: 0.78rem;
    border-radius: 20px;
}
.pv-actions .btn--profile-action:not(.btn--primary):not(.btn--danger):not(.btn--danger-ghost):not(.btn--secondary) {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary, rgba(255,255,255,0.8));
    border: 1px solid rgba(255,255,255,0.1);
}
.pv-actions .btn--profile-action:not(.btn--primary):not(.btn--danger):not(.btn--danger-ghost):not(.btn--secondary):hover {
    background: rgba(255,255,255,0.12);
}

/* Divider */
.pv-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin-bottom: 14px;
}

/* Sections */
.pv-section {
    margin-bottom: 14px;
}
.pv-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    margin: 0 0 4px;
    font-weight: 700;
}
.pv-section-text {
    font-size: 0.85rem;
    color: var(--text-secondary, rgba(255,255,255,0.78));
    margin: 0;
    line-height: 1.5;
}

/* Meta rows (email, location, etc.) */
.pv-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary, rgba(255,255,255,0.78));
}
.pv-meta-row svg {
    flex-shrink: 0;
    opacity: 0.55;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
    .pv-card {
        width: 95%;
        max-width: none;
    }
    .pv-avatar-wrap {
        margin: -50px auto 0;
    }
    .pv-body {
        text-align: center;
    }
    .pv-actions {
        justify-content: center;
    }
    .pv-meta-row {
        justify-content: center;
    }
}

/* ========== GLOBAL IN-CHAT SEARCH & MUTE POPUP OVERLAYS ========== */
.mop-msearch {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 600px;
    z-index: 9100;
}
.mop-msearch__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(18, 20, 28, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #e8eaf0);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.mop-msearch__bar input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: inherit;
    font-size: 0.95rem;
    padding: 6px 4px;
}
.mop-msearch__bar button {
    background: rgba(255, 255, 255, 0.06);
    border: 0;
    color: inherit;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.mop-msearch__bar button:hover {
    background: rgba(255, 255, 255, 0.12);
}
.mop-msearch__count {
    color: var(--text-tertiary, #8b8fa3);
    font-size: 0.78rem;
}
.mop-msearch-hit {
    outline: 2px solid rgba(124, 92, 255, 0.5);
    outline-offset: 2px;
    border-radius: 8px;
}
.mop-msearch-hit--active {
    outline-color: #22d3ee;
    background: rgba(34, 211, 238, 0.08);
}

/* In-chat search when embedded inside the chat-main container on desktop */
@media (min-width: 769px) {
    .chat-main .mop-msearch {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: none;
        z-index: 10;
        padding: 8px 20px;
        background: rgba(18, 20, 28, 0.4);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: none;
    }
    .chat-main .mop-msearch__bar {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 6px 12px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }
}

.friend-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(124, 92, 255, 0.15);
    color: var(--text-link, #a78bfa);
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}


.mop-mmute-menu {
    position: fixed;
    z-index: 9600;
    width: 250px;
    background: linear-gradient(180deg, rgba(28, 30, 42, 0.96), rgba(18, 20, 28, 0.98));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
.mop-mmute-menu.is-open {
    transform: none;
    opacity: 1;
}
.mop-mmute-title {
    padding: 10px 12px 6px;
    color: var(--text-tertiary, #8b8fa3);
    font-size: 0.78rem;
    font-weight: 600;
}
.mop-mmute-menu button {
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s;
}
.mop-mmute-menu button:hover,
.mop-mmute-menu button:active {
    background: rgba(255, 255, 255, 0.06);
}

/* Hide existing right-panels on mobile in favor of our drawer */
@media (max-width: 768px) {
    #members-right-panel, #dm-profile-panel { display: none !important; }
}

/* Desktop info-panel hero search button (mirrors topbar search on mobile) */
@media (min-width: 1025px) {
    .info-panel__hero-search {
        display: grid; place-items: center;
        width: 30px; height: 30px; flex: none;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        color: var(--text-primary, #f8fafc);
        border-radius: 8px; cursor: pointer;
        transition: background 140ms ease;
        padding: 0; border: 1px solid rgba(255,255,255,0.08);
    }
    .info-panel__hero-search:hover { background: rgba(255,255,255,0.10); }
}
@media (max-width: 1024px) {
    .info-panel__hero-search { display: none !important; }
}


/* ===================================================================
   ✦ FORWARDED MESSAGE CARD — advanced styling
   =================================================================== */
.msg-forward-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    margin: 0 0 6px;
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(34,211,238,0.10));
    border: 1px solid rgba(124,58,237,0.28);
    border-left: 3px solid var(--neon-purple, #a855f7);
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--text-secondary, #cbd5e1);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.msg-forward-card:hover {
    background: linear-gradient(135deg, rgba(124,58,237,0.20), rgba(34,211,238,0.16));
    transform: translateX(2px);
}
.msg-forward-card svg { color: var(--neon-cyan, #22d3ee); flex-shrink: 0; }
.msg-forward-card strong { color: var(--text-primary, #fff); font-weight: 600; margin-left: 2px; }

/* ===================================================================
   ✦ TASK WORKFLOW CARD (in-channel task announcement)
   =================================================================== */
.msg-task-card {
    display: flex;
    gap: 0;
    margin: 6px 0 4px;
    max-width: 460px;
    background: linear-gradient(135deg, rgba(15,23,42,0.55), rgba(30,41,59,0.55));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(124,58,237,0.32);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.msg-task-card:hover {
    transform: translateY(-1px);
    border-color: rgba(34,211,238,0.55);
    box-shadow: 0 8px 24px rgba(124,58,237,0.30);
}
.msg-task-card__accent {
    width: 4px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--neon-cyan,#22d3ee), var(--neon-purple,#a855f7));
}
.msg-task-card__body { flex: 1; padding: 10px 14px 12px; min-width: 0; }
.msg-task-card__meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-secondary, #94a3b8); font-weight: 700;
}
.msg-task-card__meta svg { color: var(--neon-cyan,#22d3ee); }
.msg-task-card__id {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(124,58,237,0.20);
    color: #d8b4fe;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
}
.msg-task-card__title {
    margin-top: 6px;
    font-size: 0.98rem; font-weight: 600; line-height: 1.35;
    color: var(--text-primary, #fff);
    word-break: break-word;
}
.msg-task-card__cta {
    margin-top: 8px;
    font-size: 0.78rem; font-weight: 600;
    color: var(--neon-cyan, #22d3ee);
}

/* ===================================================================
   ✦ CHAT TOP SEARCH (in-conversation search bar, opened from info-panel)
   =================================================================== */
.chat-top-search {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(15,23,42,0.55), rgba(30,41,59,0.55));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(124,58,237,0.25);
    animation: chatSearchSlide 0.18s ease;
}
@keyframes chatSearchSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.chat-top-search svg { color: var(--text-secondary,#94a3b8); flex-shrink: 0; }
.chat-top-search input {
    flex: 1; background: transparent; border: 0; outline: none;
    color: var(--text-primary,#fff); font-size: 0.92rem;
}
.chat-top-search input::placeholder { color: var(--text-secondary,#94a3b8); opacity: 0.7; }
.message--search-hidden { display: none !important; }
.message--search-hit { background: rgba(34,211,238,0.06); border-radius: 8px; }

/* ===================================================================
   ✦ FORWARD MODAL — Mopella glass overlay (overrides plain white sheet)
   =================================================================== */
#forward-message-overlay .forward-sheet {
    background: linear-gradient(150deg, rgba(15,23,42,0.92), rgba(30,27,75,0.92)) !important;
    color: var(--text-primary,#fff) !important;
    border: 1px solid rgba(124,58,237,0.35);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 30px 80px rgba(124,58,237,0.30), 0 -2px 0 rgba(255,255,255,0.04) inset !important;
}
#forward-message-overlay .forward-sheet__header {
    background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(34,211,238,0.08)) !important;
    border-bottom: 1px solid rgba(124,58,237,0.25);
}
#forward-message-overlay .forward-sheet__title { color: #fff !important; }
#forward-message-overlay .forward-sheet__icon-btn { color: #fff !important; }
#forward-message-overlay .forward-sheet__icon-btn:hover { background: rgba(255,255,255,0.08) !important; }
#forward-message-overlay .forward-sheet__search-wrap {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08);
}
#forward-message-overlay .forward-sheet__search-wrap input { color: #fff !important; }
#forward-message-overlay .forward-sheet__search-icon { color: rgba(255,255,255,0.6); }
#forward-message-overlay .forward-sheet__list-wrap {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
#forward-message-overlay .forward-target-row { border-bottom-color: rgba(255,255,255,0.06) !important; }
#forward-message-overlay .forward-target-row:hover { background: rgba(124,58,237,0.14) !important; }
#forward-message-overlay .forward-target-row.is-checked { background: rgba(34,211,238,0.12) !important; }
#forward-message-overlay .forward-target-row__icon { background: rgba(255,255,255,0.08); color: #cbd5e1; }
#forward-message-overlay .forward-target-row__name { color: #fff !important; }
#forward-message-overlay .forward-target-row__sub { color: rgba(203,213,225,0.7) !important; }
#forward-message-overlay .forward-sheet__preview-bar {
    background: linear-gradient(180deg, var(--neon-cyan,#22d3ee), var(--neon-purple,#a855f7)) !important;
}
#forward-message-overlay .forward-sheet__preview-text { color: rgba(226,232,240,0.95) !important; }
#forward-message-overlay .forward-sheet__composer {
    background: transparent !important;
    border-top-color: rgba(255,255,255,0.06) !important;
}
#forward-message-overlay .forward-sheet__composer-field {
    background: rgba(255,255,255,0.06) !important;
}
#forward-message-overlay .forward-sheet__composer-field input { color: #fff !important; }
#forward-message-overlay .forward-sheet__composer-field input::placeholder { color: rgba(203,213,225,0.55); }
#forward-message-overlay .forward-sheet__send {
    background: linear-gradient(135deg, var(--neon-cyan,#22d3ee), var(--neon-purple,#a855f7)) !important;
    box-shadow: 0 4px 16px rgba(124,58,237,0.40);
}
#forward-message-overlay .forward-sheet__send:disabled {
    background: rgba(124,58,237,0.30) !important;
    box-shadow: none;
}

/* ===== Chat search nav controls (prev/next/count) ===== */
.chat-top-search__count {
    font-size: 11px; color: var(--text-secondary,#94a3b8);
    min-width: 36px; text-align: center; user-select: none;
    font-variant-numeric: tabular-nums;
}
.chat-top-search .icon-btn { width: 26px; height: 26px; flex-shrink: 0; }
.message--search-hit { background: rgba(34,211,238,0.06); border-radius: 8px; }
.message--search-active {
    background: rgba(168,85,247,0.22) !important;
    box-shadow: 0 0 0 2px rgba(168,85,247,0.65), 0 8px 24px rgba(168,85,247,0.35);
    border-radius: 10px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================================
   Mobile polish — settings desktop-shrunk + profile sheet
   (2026-06-27 — info-panel UX pass)
   ============================================================ */

/* Mute menu must sit above the drawer */
.mop-mmute-menu { z-index: 10010 !important; }
.mop-msheet { z-index: 10005; }

/* On mobile, force Preferences/Workspace settings to use the desktop
   side-by-side layout (tabs left, content right), just shrunk. */
@media (max-width: 768px) {
    .modal__body.settings-layout,
    #settings-overlay .modal__body,
    #ws-settings-overlay .modal__body {
        flex-direction: row !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    .modal__body.settings-layout > .settings-sidebar,
    #settings-overlay .settings-sidebar,
    #ws-settings-overlay .settings-sidebar {
        flex: 0 0 132px !important;
        width: 132px !important;
        flex-direction: column !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border-right: 1px solid rgba(255,255,255,0.06) !important;
        border-bottom: none !important;
        padding: 10px 8px !important;
        gap: 4px !important;
    }
    .modal__body.settings-layout .settings-tab,
    #settings-overlay .settings-tab,
    #ws-settings-overlay .settings-tab,
    .modal__body.settings-layout .settings-sidebar button,
    #settings-overlay .settings-sidebar button,
    #ws-settings-overlay .settings-sidebar button {
        width: 100% !important;
        text-align: left !important;
        font-size: 0.78rem !important;
        padding: 8px 10px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }
    .modal__body.settings-layout > .settings-content,
    #settings-overlay .settings-content,
    #ws-settings-overlay .settings-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 14px 14px 18px !important;
        overflow-y: auto !important;
        font-size: 0.85rem !important;
    }
    .modal__body.settings-layout .settings-content h4 { font-size: 0.95rem !important; margin-bottom: 10px !important; }
    .modal__body.settings-layout .form-input,
    #settings-overlay .form-input,
    #ws-settings-overlay .form-input { font-size: 0.85rem !important; }
    .modal__body.settings-layout .account-profile-card { padding: 12px !important; gap: 12px !important; }
    .modal__body.settings-layout .account-avatar-hero { width: 72px !important; height: 72px !important; }
    .modal__body.settings-layout .account-profile-card__name { font-size: 1rem !important; }
    .modal__body.settings-layout .account-profile-card__email { font-size: 0.75rem !important; }
    #settings-overlay .modal,
    #ws-settings-overlay .modal,
    #channel-settings-overlay .modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100vh - 32px) !important;
        max-height: calc(100vh - 32px) !important;
        margin: 8px auto !important;
    }
}

/* ---- Profile bottom sheet (big avatar) ---- */
.mop-profile-sheet__panel {
    padding-bottom: 28px;
}
.mop-profile-sheet__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 16px 22px;
    text-align: center;
}
.mop-profile-sheet__avatar {
    position: relative;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 36px rgba(124, 58, 237, 0.35), 0 0 0 6px rgba(124,58,237,0.08);
    cursor: pointer;
    padding: 0;
}
.mop-profile-sheet__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mop-profile-sheet__avatar .mop-pres-dot {
    position: absolute; bottom: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid var(--bg-primary, #0a0a0f);
}
.mop-profile-sheet__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 6px;
}
.mop-profile-sheet__handle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.mop-profile-sheet__since {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* ===== Native <select> dropdown option visibility (dark theme) =====
   In the screenshot the user reported the dropdown options appeared as a
   white blank panel; the option text only showed on hover. Force a dark
   background + light text on every <option> so all items are visible at rest. */
select,
.permission-select,
select.permission-select {
    color: var(--text-primary, #e6edf3);
    background-color: var(--bg-elev-2, #11162a);
}
select option,
.permission-select option {
    color: #e6edf3 !important;
    background-color: #11162a !important;
}
select option:checked,
.permission-select option:checked {
    background: linear-gradient(0deg, rgba(99,102,241,.35), rgba(99,102,241,.35)) #11162a !important;
    color: #fff !important;
}
@media (prefers-color-scheme: light) {
    body.light-theme select option,
    body.light-theme .permission-select option { color: #0b1020 !important; background-color: #ffffff !important; }
}

/* ===== Global search typeahead suggestions ===== */
.global-search-pop {
    position: fixed;
    background: linear-gradient(180deg, rgba(17,22,42,.98), rgba(11,15,28,.98));
    border: 1px solid rgba(99,102,241,.35);
    border-radius: 14px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 6px;
    max-height: 360px;
    overflow-y: auto;
    z-index: 9999;
    animation: gspFade .15s ease-out;
}
@keyframes gspFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.global-search-pop .gsp__row {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: 0; border-radius: 10px;
    color: var(--text-primary, #e6edf3);
    cursor: pointer; text-align: left;
    transition: background .12s ease;
}
.global-search-pop .gsp__row:hover,
.global-search-pop .gsp__row:focus-visible {
    background: linear-gradient(90deg, rgba(99,102,241,.18), rgba(56,189,248,.10));
    outline: none;
}
.global-search-pop .gsp__ic { display:flex; align-items:center; justify-content:center; width:30px; height:30px; }
.global-search-pop .gsp__hash {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:8px;
    background: rgba(99,102,241,.18); color:#a5b4fc; font-weight:700; font-size:14px;
}
.global-search-pop .gsp__av { width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; }
.global-search-pop .gsp__av--ph {
    display:inline-flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg,#6366f1,#06b6d4); color:#fff; font-weight:700; font-size:12px;
}
.global-search-pop .gsp__body { display:flex; flex-direction:column; min-width:0; flex:1; }
.global-search-pop .gsp__name { font-size:.88rem; font-weight:600; color:#e6edf3; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-search-pop .gsp__sub  { font-size:.72rem; color:rgba(230,237,243,.55); line-height:1.2; }
.global-search-pop .gsp__empty { padding: 14px 12px; font-size:.85rem; color:rgba(230,237,243,.6); text-align:center; }

/* ===== Mobile: Kanban horizontal swipe ===== */
@media (max-width: 900px) {
    .task-view-active--kanban #kanban-board-view.kanban-board,
    .task-view-active--kanban .kanban-board {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        padding: 12px !important;
        scroll-padding-left: 12px;
    }
    .kanban-board::-webkit-scrollbar { display: none; }
    .kanban-column {
        flex: 0 0 86vw !important;
        max-width: 86vw !important;
        min-width: 86vw !important;
        scroll-snap-align: start;
        height: calc(100vh - 220px) !important;
        max-height: calc(100vh - 220px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .kanban-column__cards {
        overflow-y: auto !important;
        flex: 1 !important;
        padding: 8px !important;
    }
    /* Subtle swipe-hint dots above board */
    .kanban-board::before {
        content: "← swipe →";
        position: sticky; left: 0;
        font-size: 10px; letter-spacing: 2px;
        color: rgba(165,180,252,.6);
        text-transform: uppercase;
        align-self: flex-start;
        padding: 2px 6px;
        flex-shrink: 0;
    }
}

/* ===== Mobile: List view fits screen ===== */
@media (max-width: 900px) {
    #list-board-view.task-list-view,
    .task-list-view {
        padding: 8px 8px 16px !important;
    }
    .task-list-view .task-list-row,
    .task-list-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 6px 10px !important;
        padding: 10px 12px !important;
        margin: 6px 0 !important;
        border-radius: 12px !important;
        background: linear-gradient(180deg, rgba(17,22,42,.6), rgba(11,15,28,.6)) !important;
        border: 1px solid rgba(255,255,255,.06) !important;
        font-size: .82rem !important;
    }
    .task-list-row > * { min-width: 0; }
    .task-list-row .task-list-cell--title { grid-column: 1 / -1; font-weight: 600; }
}

/* ===== Mobile: Calendar — compact grid + tap-to-popup ===== */
@media (max-width: 900px) {
    #calendar-board-view.task-calendar-view,
    .task-calendar-view {
        padding: 8px 8px 12px !important;
        overflow-y: auto !important;
    }
    .task-calendar-view .calendar-grid,
    .calendar-grid {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 2px !important;
    }
    .calendar-day {
        min-height: 56px !important;
        padding: 4px !important;
        font-size: .7rem !important;
        border-radius: 8px !important;
    }
    .calendar-day .calendar-task-pill,
    .calendar-task-pill {
        font-size: .62rem !important;
        padding: 2px 4px !important;
        line-height: 1.1 !important;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

/* Calendar day popup (when tapping a date on mobile) */
.cal-day-popup {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    animation: gspFade .15s ease-out;
}
.cal-day-popup__panel {
    width: 100%; max-width: 540px;
    background: linear-gradient(180deg, rgba(17,22,42,.98), rgba(11,15,28,.98));
    border-top: 1px solid rgba(99,102,241,.35);
    border-radius: 18px 18px 0 0;
    padding: 16px 14px 22px;
    max-height: 78vh; overflow-y: auto;
    box-shadow: 0 -20px 60px -10px rgba(0,0,0,.6);
}
.cal-day-popup__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cal-day-popup__title { font-weight:700; color:#e6edf3; }
.cal-day-popup__close { background:none; border:0; color:#a5b4fc; font-size:22px; cursor:pointer; }
.cal-day-popup__task {
    display: block; width: 100%; text-align: left;
    padding: 10px 12px; margin: 6px 0;
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(6,182,212,.08));
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 12px; color: #e6edf3;
    cursor: pointer; transition: transform .12s ease;
}
.cal-day-popup__task:hover { transform: translateY(-1px); }
.cal-day-popup__task small { display:block; color: rgba(230,237,243,.6); font-size:.72rem; margin-top:2px; }

/* ── Auto-linkified URLs in messages ──────────────────────────── */
.message a.msg-link {
  color: var(--neon-cyan, #22d3ee);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.message a.msg-link:hover { filter: brightness(1.2); }

/* ── Emoji-only messages: larger, clearer ─────────────────────── */
.message--emoji-only .message__text,
.message--emoji-only .message__body {
  font-size: 44px !important;
  line-height: 1.2 !important;
  background: transparent !important;
  padding: 2px 0 !important;
  letter-spacing: 0;
}
.message--emoji-only .message-reactions { margin-top: 6px; }

/* ── Inline mention chips clickable ───────────────────────────── */
.msg-mention { transition: filter .15s ease; }
.msg-mention:hover { filter: brightness(1.3); text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   Inline attachment previews (image / video / audio / pdf)
   Goal: WhatsApp-style — show media in the bubble, not as a link.
   ───────────────────────────────────────────────────────────── */
.message__files {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    max-width: 100%;
}
.message-file--image img {
    max-width: min(360px, 70vw);
    max-height: 320px;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    cursor: zoom-in;
    background: rgba(255,255,255,0.03);
}
.message-file--video video {
    max-width: min(380px, 72vw);
    max-height: 340px;
    width: 100%;
    border-radius: 12px;
    background: #000;
    display: block;
}
.message-file--audio {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 6px 10px;
    max-width: min(340px, 72vw);
}
.message-file--audio audio { flex: 1; min-width: 0; height: 34px; }
.message-file--audio .file-info__name {
    font-size: 0.72rem;
    color: var(--text-secondary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.message-file--pdf {
    width: min(360px, 72vw);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
}
.message-file--pdf .pdf-preview {
    width: 100%;
    height: 240px;
    border: 0;
    background: #1a1a1f;
}
.message-file--pdf .pdf-preview__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.message-file--pdf .pdf-preview__bar .file-info__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.message-file--pdf .pdf-preview__open {
    color: var(--neon-cyan, #0ef6cc);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.78rem;
}

/* ── iPhone / mobile dashboard welcome card polish ──────────── */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        #panel-dashboard {
            padding-top: max(env(safe-area-inset-top), 8px) !important;
            padding-left: max(env(safe-area-inset-left), 0px) !important;
            padding-right: max(env(safe-area-inset-right), 0px) !important;
        }
    }
}
@media (max-width: 480px) {
    .welcome-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px 14px !important;
        gap: 12px !important;
        border-radius: 18px !important;
        margin: 8px 10px 0 !important;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(6, 182, 212, 0.15)) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
    }
    .welcome-banner__content h1 {
        font-size: 1.1rem !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
        font-weight: 700 !important;
    }
    .welcome-banner__content p {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        opacity: 0.75 !important;
    }
    .welcome-banner__right {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding-top: 10px !important;
    }
    .welcome-banner__time {
        font-size: 0.72rem !important;
        opacity: 0.8;
    }
    .welcome-banner__actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    .welcome-banner__actions .btn {
        padding: 5px 8px !important;
        font-size: 0.7rem !important;
        border-radius: 8px !important;
        height: 28px !important;
        white-space: nowrap !important;
    }
}

/* ── Mobile File Preview Polish ──────────── */
@media (max-width: 768px) {
    .file-preview-bar {
        padding: 6px 10px !important;
        background: rgba(10, 14, 21, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }
    .file-preview-items {
        gap: 6px !important;
    }
    .file-preview-item {
        padding: 4px 8px !important;
        max-width: 140px !important;
        overflow: hidden !important;
    }
    .file-preview-item span {
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* ── Brighter chat text ───────────── */
.message__text { 
    color: #ffffff !important; 
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* ── Selection Action Bar & Checkbox ───────────── */
.selection-action-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: min(500px, 92vw);
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(16, 18, 27, 0.95), rgba(28, 30, 43, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(20px);
}
.selection-info {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}
.selection-actions {
    display: flex;
    gap: 6px;
}
.message-select-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.message-select-checkbox--checked {
    background: var(--neon-cyan) !important;
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 8px rgba(14, 246, 204, 0.4) !important;
}
.message--selectable {
    cursor: pointer !important;
    padding-left: 10px !important;
}
.message--selectable:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}
.message--selected {
    background: rgba(14, 246, 204, 0.08) !important;
    border-left: 3px solid var(--neon-cyan) !important;
}

/* ── Multi-select checkboxes ────────────────────────────────── */
.msg-select-checkbox {
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
    z-index: 5;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.msg-select-checkbox:hover { opacity: 1; }
.message { position: relative; }

/* ── Floating selection action bar ──────────────────────────── */
.selection-action-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(20, 20, 30, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 10px 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 9999;
    animation: selBarSlideUp 0.25s cubic-bezier(0.22,1,0.36,1);
}
@keyframes selBarSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.sel-bar-count {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--neon-cyan, #0ef6cc);
    min-width: 70px;
}
.sel-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.sel-bar-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}
.sel-bar-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sel-bar-fwd { color: var(--neon-cyan, #0ef6cc); }
.sel-bar-del { color: #ff6b6b; }
.sel-bar-cancel { color: rgba(255,255,255,0.6); }

/* ── Mobile attachment preview polish ───────────────────────── */
@media (max-width: 768px) {
    .selection-action-bar {
        bottom: 80px;
        left: 8px;
        right: 8px;
        transform: none;
        width: auto;
        padding: 8px 12px;
        gap: 6px;
        border-radius: 14px;
    }
    @keyframes selBarSlideUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .sel-bar-btn {
        padding: 6px 10px;
        font-size: 0.72rem;
    }
    .sel-bar-count { font-size: 0.74rem; min-width: auto; }

    /* Attachment preview bar in composer */
    .attachment-previews,
    .nx-attachment-previews,
    #attachment-previews {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        max-height: 120px !important;
        overflow-y: auto !important;
        padding: 6px 4px !important;
    }
    .attachment-previews > *,
    .nx-attachment-previews > *,
    #attachment-previews > * {
        flex: 0 0 auto !important;
        max-width: 100px !important;
        font-size: 0.7rem !important;
    }
    .attachment-previews img,
    .nx-attachment-previews img,
    #attachment-previews img {
        max-width: 80px !important;
        max-height: 80px !important;
        border-radius: 8px !important;
        object-fit: cover !important;
    }
    /* Message checkbox position on mobile */
    .msg-select-checkbox {
        left: -2px;
        top: 8px;
        transform: none;
    }
}

/* ── WhatsApp-Style Calling UI/UX ───────────────────────────── */
.call-min-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.call-min-btn:hover {
    background: rgba(255,255,255,0.12) !important;
}

.call-avatar-container {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

/* WhatsApp-style pulsing ring animation */
.call-pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(14, 246, 204, 0.3);
    border-radius: 50%;
    animation: callPulse 2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
    opacity: 0;
}

@keyframes callPulse {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.call-avatar-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
    border: 4px solid rgba(255,255,255,0.1);
    box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 0 1px rgba(14,246,204,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    z-index: 2;
    overflow: hidden;
}

/* Group Calling Grid (WhatsApp Group Call Style) */
.call-group-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    align-content: center;
}

.call-participant-card {
    position: relative;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s, transform 0.2s;
}

.call-participant-card.is-speaking {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 12px rgba(14, 246, 204, 0.3);
    transform: scale(1.02);
}

.participant-avatar-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    z-index: 2;
}

.group-call-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-call-avatar-placeholder {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.participant-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: #050912;
}

.participant-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 8px;
    z-index: 3;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 4px;
}

.participant-mute-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    background: rgba(239, 68, 68, 0.35);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Join Call Banner */
.join-call-banner {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(59, 130, 246, 0.1));
    border-bottom: 1px solid rgba(16, 185, 129, 0.25);
    animation: joinCallSlideIn 300ms ease-out;
}

@keyframes joinCallSlideIn {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

.join-call-banner__pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    animation: joinPulse 1.5s infinite;
    flex-shrink: 0;
}

@keyframes joinPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.join-call-banner__text {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: #10b981;
}

.join-call-banner__btn {
    background: #10b981;
    color: #fff;
    border: none;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 200ms, transform 100ms;
}

.join-call-banner__btn:hover {
    background: #059669;
    transform: scale(1.02);
}

/* Floating Pill-Shaped Controls (WhatsApp Style) */
.call-shell {
    position: relative;
    background: rgba(10, 15, 30, 0.9) !important;
}

.call-controls {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 41, 59, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9999px;
    padding: 10px 24px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    gap: 16px !important;
    z-index: 10;
}

@media (max-width: 768px) {
    .call-controls {
        bottom: 16px;
        padding: 8px 16px !important;
        gap: 12px !important;
    }
    .call-ctrl {
        width: 44px !important;
        height: 44px !important;
    }
}


/* ── MOBILE WELCOME BANNER — force full card layout ─────────── */
@media (max-width: 768px) {
    .welcome-banner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 20px 18px !important;
        gap: 12px !important;
        border-radius: 20px !important;
        margin: 12px 12px 0 !important;
        background: linear-gradient(135deg,
            rgba(99, 102, 241, 0.18),
            rgba(6, 182, 212, 0.14)) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35) !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .welcome-banner__content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .welcome-banner__content h1 {
        display: block !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
        color: #fff !important;
        background: linear-gradient(135deg, #fff 0%, var(--neon-cyan, #22d3ee) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    .welcome-banner__content p {
        display: block !important;
        visibility: visible !important;
        opacity: 0.85 !important;
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
        color: var(--text-secondary, #94a3b8) !important;
        -webkit-text-fill-color: initial !important;
        margin: 0 !important;
    }
    .welcome-banner__right {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-top: 12px !important;
        margin-top: 4px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .welcome-banner__time {
        display: block !important;
        visibility: visible !important;
        opacity: 0.8 !important;
        font-size: 0.75rem !important;
        color: var(--text-tertiary, #6b7280) !important;
        -webkit-text-fill-color: initial !important;
    }
    .welcome-banner__actions {
        display: flex !important;
        visibility: visible !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .welcome-banner__actions .btn {
        flex: 1 !important;
        justify-content: center !important;
        height: 38px !important;
        font-size: 0.82rem !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
    }
}

/* ── WhatsApp-Style Group Call Card Polish ───────────────────── */
.call-group-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 10px !important;
    padding: 12px !important;
}
.call-participant-card {
    aspect-ratio: 3/4 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.7), rgba(5, 10, 20, 0.9)) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.participant-avatar-wrap {
    width: 72px !important;
    height: 72px !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(6, 182, 212, 0.2)) !important;
}
.participant-label {
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    max-width: calc(100% - 16px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
@media (max-width: 480px) {
    .call-group-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .participant-avatar-wrap {
        width: 56px !important;
        height: 56px !important;
    }
}

/* ─── Typing Indicator ───────────────────────────────────────────── */
.typing-indicator-bar {
    position: absolute;
    top: -26px;
    left: 16px;
    font-size: 0.74rem;
    color: var(--neon-cyan, #22d3ee);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    background: rgba(10, 15, 30, 0.7);
    border-radius: 8px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.06);
    z-index: 10;
    animation: fadeInUp 0.2s ease;
    pointer-events: none;
}
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--neon-cyan, #22d3ee);
    animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Read Receipt Ticks ─────────────────────────────────────────── */
.msg-tick {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
    cursor: default;
    transition: color 0.2s ease;
}
.msg-tick svg { display: inline-block; vertical-align: middle; }

/* ─── Channel Item Timestamp ─────────────────────────────────────── */
.channel-item__ts {
    font-size: 0.68rem;
    color: var(--text-tertiary, rgba(255,255,255,0.35));
    margin-left: auto;
    padding-left: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}