:root{
    --bg:#05030b;
    --glass:rgba(18,20,40,0.92);
    --accent:#ff7cfb;
    --accent-soft:#7af3ff;
    --border-soft:rgba(255,255,255,0.06);
    --text-main:#f9fbff;
    --text-soft:rgba(249,251,255,0.65);
    --danger:#ff6b81;
    --nc-theme-gradient: linear-gradient(135deg, rgba(122,243,255,0.18), rgba(255,124,251,0.16));
    --nc-bg-blob-1: rgba(255,124,251,0.16);
    --nc-bg-blob-2: rgba(122,243,255,0.16);
    --nc-bg-blob-3: rgba(122,243,255,0.18);
    --nc-bg-l1: rgba(255,124,251,0.14);
    --nc-bg-l2: rgba(122,243,255,0.14);

    /* Appearance runtime vars (updated by Settings → Внешний вид) */
    --nc-ui-zoom: 1;
    --nc-glass-blur: 26px;
    --nc-theme-opacity: 0.98;
    --nc-panel-tint: 0.42;

    /* Outer page padding (requested): adds a small frame around the whole app */
    --nc-outer-pad: 0.3cm;

}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
    background:var(--bg);
    overscroll-behavior:none;
}

body{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--text-main);
}

.space-bg{
    position:fixed;
    /* Expand by 1px to cover rare 1px seams at the viewport edges (Windows/Chrome/GPU rounding) */
    inset:-1px;
    width:100%;
    /* Prefer stable viewport units, but keep vh fallback */
    height:100vh;
    height:100svh;
    min-height:100vh;
    min-height:100svh;

    z-index:0;
    overflow:hidden;
    background:
        radial-gradient(circle at 10% 0%, var(--nc-bg-blob-1) 0, transparent 55%),
        radial-gradient(circle at 80% 100%, var(--nc-bg-blob-2) 0, transparent 55%),
        radial-gradient(circle at 0% 100%, var(--nc-bg-blob-3) 0, transparent 60%),
        var(--nc-theme-gradient),
        var(--bg);
    display:flex;
    align-items:stretch;
    justify-content:center;
    padding:var(--nc-outer-pad);
}

/* Strong, Discord-like full-site theme wash (behind everything) */
.space-bg::before{
    content:"";
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:-3;
    pointer-events:none;
}

.space-bg::after{
    content:"";
    position:fixed;
    inset:-28%;
    background:var(--nc-theme-gradient);
    opacity:var(--nc-theme-opacity, 0.98);
    filter:saturate(1.35) contrast(1.02);
    transform:translateZ(0);
    z-index:-2;
    pointer-events:none;
}



.app-root{
    width:100%;
    max-width:none;
    height:100%;
    flex:1 1 auto;
    min-height:0;
    position:relative;
    z-index:1;
}

.glass-card{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg, var(--glass), rgba(0,0,0,0.14)),
        linear-gradient(135deg, var(--nc-bg-l1), var(--nc-bg-l2));
    border-radius:20px;
    border:1px solid var(--border-soft);
    /* Softer shadow to avoid a dark "stripe" at the very bottom on some GPUs */
    box-shadow:0 14px 45px rgba(0,0,0,0.55);
    backdrop-filter:blur(var(--nc-glass-blur, 26px));
}

/* Strong panel tint (so changes are clearly visible like Discord) */
.glass-card::before{
    content:"";
    position:absolute;
    inset:-120px;
    background:var(--nc-theme-gradient);
    opacity:var(--nc-panel-tint, 0.42);
    filter:saturate(1.45);
    transform:translateZ(0);
    pointer-events:none;
}

/* UI Zoom (Discord-like UI scale) */
body.nc-ui-zoomed .app-root{
  transform: scale(var(--nc-ui-zoom, 1));
  transform-origin: top left;
  width: calc(100% / var(--nc-ui-zoom, 1));
  height: calc(100vh / var(--nc-ui-zoom, 1));
}

/* Motion controls */
body.nc-motion-off *,
body.nc-motion-off *::before,
body.nc-motion-off *::after{
  transition: none !important;
  animation: none !important;
}
body.nc-motion-reduced *,
body.nc-motion-reduced *::before,
body.nc-motion-reduced *::after{
  transition-duration: 120ms !important;
  animation-duration: 120ms !important;
}

/* Glass intensity presets */
body.nc-glass-off .glass-card{
  backdrop-filter:none !important;
  background:rgba(16,18,26,0.92) !important;
}
body.nc-glass-low .glass-card{
  backdrop-filter:blur(var(--nc-glass-blur, 14px)) !important;
}
body.nc-glass-high .glass-card{
  backdrop-filter:blur(var(--nc-glass-blur, 26px)) !important;
}

.glass-card > *{
    position:relative;
    z-index:1;
}

/* auth */

.auth-wrapper{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.auth-card{
    width:360px;
    padding:28px 24px 24px;
}

.logo{
    margin:0 0 4px;
    font-size:22px;
    letter-spacing:1px;
}

.auth-title{
    margin:0 0 16px;
    font-size:18px;
    color:var(--text-soft);
}

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

.auth-form label{
    font-size:12px;
    color:var(--text-soft);
}

.auth-form input{
    border-radius:10px;
    border:1px solid var(--border-soft);
    background:rgba(5,5,15,0.9);
    padding:8px 10px;
    color:var(--text-main);
}

.auth-form input:focus{
    outline:none;
    border-color:var(--accent-soft);
}

.auth-row{
    display:flex;
    gap:10px;
    align-items:center;
}

.auth-row input{ flex:1; }

.btn-secondary{
    border:none;
    border-radius:999px;
    padding:8px 12px;
    background:rgba(255,255,255,0.08);
    color:var(--text-main);
    cursor:pointer;
    white-space:nowrap;
}

.btn-secondary:hover{ background:rgba(255,255,255,0.12); }

.auth-help{
    font-size:12px;
    color:var(--text-soft);
    opacity:0.85;
    margin-top:-4px;
}

.btn-primary{
    border:none;
    border-radius:999px;
    padding:8px 14px;
    background:linear-gradient(135deg,var(--accent-soft),var(--accent));
    color:#05030b;
    font-weight:600;
    cursor:pointer;
}

.btn{
    border-radius:999px;
    border:1px solid var(--border-soft);
    background:transparent;
    color:var(--text-soft);
    padding:6px 12px;
    cursor:pointer;
}

.auth-alt{
    font-size:13px;
    color:var(--text-soft);
}

.auth-alt a{
    color:var(--accent-soft);
    text-decoration:none;
}

/* layout */

.layout{
    display:grid;
    grid-template-columns:260px minmax(0,1fr) 260px;
    gap:10px;
    height:100%;
}

.sidebar,
.chat-main,
.rightbar{
    padding:10px;
}

.chat-main{
    display:flex;
    flex-direction:column;
    min-height:0;
}

/* Right sidebar: DM/Friends profile panel like Discord */
.rightbar{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:0;
    overflow:auto;
}

.nc-friends-mode .rightbar.glass-card{
    background:rgba(16,18,24,0.62);
}

.nc-friends-mode #user-mini-card{
    background:rgba(18,20,28,0.78);
    backdrop-filter: blur(10px);
}

.nc-friends-mode #user-mini-card .user-mini-header{
    font-size:12px;
    opacity:0.85;
}


/* sidebar */

.server-header{
    padding:6px 6px 12px;
    border-bottom:1px solid var(--border-soft);
    margin-bottom:10px;
}

.server-logo{
    font-size:16px;
    font-weight:600;
}

.server-sub{
    font-size:11px;
    color:var(--text-soft);
}

.sidebar-block + .sidebar-block{
    margin-top:12px;
}

.sidebar-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
    font-size:12px;
    color:var(--text-soft);
    margin-bottom:4px;
}

.sidebar-title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    text-transform:uppercase;
    letter-spacing:.08em;
}

.icon-btn{
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,0.04);
    color:var(--text-soft);
    padding:4px 8px;
    cursor:pointer;
    font-size:12px;
    max-width:100%;
    white-space:nowrap;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    line-height:1;
    -webkit-tap-highlight-color: transparent;
}

.icon-btn:hover{
    background:rgba(255,255,255,0.12);
}

.icon-btn.danger{
    background: rgba(255,64,88,0.20);
    color: rgba(255,255,255,0.95);
}
.icon-btn.danger:hover{
    background: rgba(255,64,88,0.28);
}

/* muted slash inside inline svgs (used by mic/deafen like Discord) */
.icon-btn .muted-slash{ opacity:0; }
.icon-btn.danger .muted-slash{ opacity:1; }

.channel-list,
.friend-list{
    list-style:none;
    margin:0;
    padding:0;
}

.channel-item{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 6px;
    border-radius:10px;
    cursor:pointer;
    font-size:13px;
}

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

.channel-item.active{
    background:linear-gradient(135deg, rgba(122,243,255,0.18), rgba(255,124,251,0.16));
}

.channel-item.voice-connected{
    box-shadow: inset 0 0 0 1px rgba(122,243,255,0.25);
}
.channel-item.voice-connected .channel-hash{
    opacity: .9;
}

.channel-label{
    display:flex;
    align-items:center;
    gap:4px;
    min-width:0;
}

.channel-lock{
    opacity:.75;
    flex:0 0 auto;
}

.channel-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.channel-hash{
    opacity:.5;
}

.channel-delete{
    border:none;
    background:transparent;
    color:var(--text-soft);
    cursor:pointer;
    font-size:14px;
}

.friend-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px 6px;
    border-radius:10px;
    cursor:pointer;
}

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

.friend-item.active{
    background:linear-gradient(135deg, rgba(122,243,255,0.18), rgba(255,124,251,0.16));
}

.avatar-circle{
    width:22px;
    height:22px;
    border-radius:999px;
    background:radial-gradient(circle at 30% 0%, #fff, #888);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    color:#05030b;
    flex-shrink:0;
    position:relative;
}

.avatar-circle.xl{
    width:40px;
    height:40px;
    font-size:18px;
}

.friend-meta{
    display:flex;
    flex-direction:column;
    gap:1px;
}

.friend-name{
    font-size:13px;
}

.friend-sub{
    font-size:11px;
    color:var(--text-soft);
}

.sidebar-bottom{
    margin-top:auto;
    padding-top:10px;
    border-top:1px solid var(--border-soft);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
}

.current-user{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:6px 6px;
    border-radius:12px;
}

.current-user-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.current-user-left .user-meta{ min-width:0; }

.current-user-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.current-user-actions .icon-btn.sm{ width:32px; height:32px; padding:0; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; }
.current-user-actions .icon-btn.sm .i{ width:20px; height:20px; }

.user-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.user-name{
    font-size:13px;
}

.user-sub{
    font-size:11px;
    color:var(--text-soft);
}

.btn-logout{
    border-radius:999px;
    padding:4px 10px;
    border:1px solid var(--border-soft);
    color:var(--text-soft);
    font-size:11px;
    text-decoration:none;
}

/* chat main */

.chat-main{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.chat-header{
    padding:4px 6px 6px;
    border-bottom:1px solid var(--border-soft);
    font-size:14px;
}

.chat-messages{
    flex:1;
    overflow-y:auto;
    padding:8px 6px;
    font-size:13px;
}

.placeholder{
    margin-top:20px;
    text-align:center;
    color:var(--text-soft);
}

.message-row{
    margin-bottom:4px;
}

.message-meta{
    color:var(--text-soft);
    font-size:11px;
}

.chat-input{
    padding:6px;
    border-top:1px solid var(--border-soft);
}

#message-form{
    display:flex;
    gap:6px;
}

#message-input{
    flex:1;
    border-radius:999px;
    border:1px solid var(--border-soft);
    background:rgba(5,5,15,0.95);
    color:var(--text-main);
    padding:6px 10px;
}



.call-bar{
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 16px;
    margin:10px 10px 6px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(90deg, rgba(88,101,242,0.9), rgba(20,22,30,0.98));
    box-shadow:0 14px 32px rgba(0,0,0,0.55);
    position:relative;
    overflow:hidden;
}

.call-bar::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 0 0, rgba(255,255,255,0.16), transparent 55%);
    opacity:0.9;
    pointer-events:none;
}

.call-avatar{
    position:relative;
    z-index:1;
    width:32px;
    height:32px;
    border-radius:999px;
    background:radial-gradient(circle at 20% 0%, #fff, #888);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:600;
    color:#05030b;
    box-shadow:0 0 0 2px rgba(0,0,0,0.4);
}

.call-info{
    position:relative;
    z-index:1;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.call-peer-name{
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.call-status{
    font-size:11px;
    color:var(--text-soft);
}

.call-controls{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:8px;
}

.call-timer{
    font-size:12px;
    min-width:52px;
    text-align:right;
    opacity:0.9;
}

.call-controls .icon-btn{
    border-radius:999px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.06);
    transition:background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.call-controls .icon-btn:hover{
    transform:translateY(-1px);
    background:rgba(0,0,0,0.55);
    box-shadow:0 4px 12px rgba(0,0,0,0.55);
}

.call-end{
    background:rgba(255,107,129,0.24);
    border-color:rgba(255,107,129,0.5);
}

.call-end:hover{
    background:rgba(255,107,129,0.35);
}
/* rightbar */

.voice-card{
    padding:8px 8px 10px;
    border-radius:14px;
    border:1px solid var(--border-soft);
    margin-bottom:10px;
}

.voice-title{
    font-size:13px;
    margin-bottom:2px;
}

.voice-sub{
    font-size:11px;
    color:var(--text-soft);
    margin-bottom:8px;
}

.voice-controls{
    display:flex;
    gap:6px;
}


.user-mini-card{
    padding:8px 8px 10px;
    border-radius:14px;
    border:1px solid var(--border-soft);
    margin-top:10px;
    margin-bottom:6px;
}

.user-mini-header{
    font-size:13px;
    margin-bottom:6px;
}

.user-mini-body{
    display:flex;
    align-items:center;
    gap:10px;
}

.user-mini-body.empty{
    justify-content:center;
    padding:6px 2px;
    color:var(--text-soft);
    font-size:11px;
    text-align:center;
}

.user-mini-body.filled{
    display:flex;
}

.user-mini-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
}

.user-mini-name{
    font-size:13px;
    font-weight:600;
}

.user-mini-sub{
    font-size:11px;
    color:var(--text-soft);
}

.user-mini-actions{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.btn-xs{
    border:none;
    outline:none;
    padding:3px 8px;
    border-radius:999px;
    font-size:11px;
    cursor:pointer;
    background:rgba(255,255,255,0.04);
    color:var(--text-main);
}

.btn-xs.primary{
    background:linear-gradient(135deg, var(--accent), var(--accent-soft));
    color:#05030b;
}

.btn-xs.subtle{
    background:rgba(255,255,255,0.04);
}

.btn-xs:hover{
    background:rgba(255,255,255,0.09);
}

.btn-xs.primary:hover{
    filter:brightness(1.05);
}

.avatar-circle.lg{
    width:32px;
    height:32px;
    font-size:14px;
}

.user-mini-placeholder{
    max-width:140px;
}

.profile-card{
    padding:8px;
    border-radius:14px;
    border:1px solid var(--border-soft);
    margin-top:10px;
}

.profile-title{
    font-size:13px;
    margin-bottom:6px;
}

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

.profile-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
}


.avatar-circle.has-image{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:transparent;
}

.user-mini-modal{
    max-width:360px;
}

.user-mini-modal-body{
    display:flex;
    align-items:center;
    gap:12px;
}

.user-mini-modal-main{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.user-mini-modal-username{
    font-size:14px;
    font-weight:600;
}

.user-mini-modal-status{
    font-size:12px;
    color:var(--text-soft);
}

/* profile edit modal */

.profile-edit-modal{
    max-width:420px;
}

.profile-edit-body{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.edit-profile-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:6px;
}

.edit-profile-fields{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.edit-profile-username{
    font-size:12px;
    color:var(--text-soft);
}

.file-input-label{
    margin-top:4px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    cursor:pointer;
    background:rgba(255,255,255,0.04);
}

.file-input-label input[type="file"]{
    display:none;
}

.edit-profile-status-label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:12px;
}

#edit-profile-status{
    width:100%;
    border-radius:8px;
    border:1px solid var(--border-soft);
    background:rgba(0,0,0,0.2);
    padding:6px 8px;
    font-size:12px;
    color:var(--text-main);
    resize:vertical;
}

/* Ensure profile edit modal does not overlap the bottom user controls */
#modal-edit-profile.modal-backdrop{
    align-items:flex-start;
    padding:72px 12px 120px;
    overflow:auto;
}
#modal-edit-profile.modal-backdrop .modal{
    margin:0 auto;
    max-height:calc(100vh - 72px - 120px);
    overflow:auto;
}


/* modal */

.modal-backdrop{
    position:fixed;
    pointer-events:none;
    inset:0;
    background:rgba(0,0,0,0.6);
    display:none;
    align-items:center;
    justify-content:center;
    z-index: 30000;
}

.modal-backdrop.active{
    display:flex;
    pointer-events:auto;

    z-index:30050;
}

.modal-backdrop[aria-hidden="true"]{ display:none !important; pointer-events:none !important; }

.modal{
    width:min(420px, calc(100vw - 24px));
    padding:10px 10px 12px;
}

.modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
}

.modal-body{
    font-size:13px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.modal-body input{
    border-radius:10px;
    border:1px solid var(--border-soft);
    background:rgba(5,5,15,0.95);
    color:var(--text-main);
    padding:6px 8px;
}

.modal-hint{
    font-size:11px;
    color:var(--text-soft);
}

.modal-result{
    font-size:12px;
    min-height:14px;
}

.modal-actions{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.modal-actions .btn,
.modal-actions .btn-primary{
    max-width:100%;
}


/* group call modal (2026) */
.modal.modal-groupcall{
    width:min(720px, calc(100vw - 24px));
    padding:14px;
}

.gc-head{
    gap:10px;
    padding-bottom:8px;
    border-bottom:1px solid var(--border-soft);
}

.gc-title h3{
    margin:0;
    font-size:14px;
    letter-spacing:0.2px;
}

.gc-sub{
    margin-top:2px;
    font-size:11px;
    color:var(--text-soft);
}

.gc-body{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap:12px;
    margin-top:10px;
}

.gc-left, .gc-right{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:340px;
}

.gc-search input{
    width:100%;
    border-radius:12px;
    border:1px solid var(--border-soft);
    background:rgba(5,5,15,0.85);
    color:var(--text-main);
    padding:8px 10px;
}

.gc-list-wrap{
    flex:1;
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    overflow:hidden;
}

.group-call-friend-list{
    margin:0;
    padding:6px;
    list-style:none;
    max-height:100%;
    overflow:auto;
}

.group-call-friend-item{
    border-radius:12px;
}

.group-call-friend-item + .group-call-friend-item{
    margin-top:4px;
}

.gc-friend{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:12px;
    cursor:pointer;
    user-select:none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.gc-friend:hover{
    background:rgba(255,255,255,0.05);
}

.gc-friend input[type="checkbox"]{
    width:16px;
    height:16px;
    accent-color: #7c5cff;
}

.group-call-friend-item[data-disabled="1"] .gc-friend{
    opacity:0.6;
    cursor:not-allowed;
}

.gc-friend-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.gc-friend-meta .friend-name{
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.gc-status{
    font-size:11px;
    color:var(--text-soft);
}

.gc-selected{
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    padding:10px;
}

.gc-selected-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--text-soft);
    font-size:11px;
    margin-bottom:8px;
}

.gc-count{
    font-size:11px;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid var(--border-soft);
    background:rgba(0,0,0,0.25);
    color:var(--text-main);
}

.gc-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    min-height:34px;
}

.gc-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 8px;
    border-radius:999px;
    border:1px solid var(--border-soft);
    background:rgba(0,0,0,0.22);
    color:var(--text-main);
    font-size:12px;
}

.gc-chip .x{
    width:18px;
    height:18px;
    border-radius:8px;
    border:1px solid var(--border-soft);
    background:rgba(255,255,255,0.04);
    color:var(--text-soft);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.gc-preview{
    flex:1;
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12));
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.gc-preview-head{
    font-size:11px;
    color:var(--text-soft);
}

.gc-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    overflow:auto;
    padding-right:2px;
}

.gc-tile{
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:rgba(0,0,0,0.22);
    padding:10px;
    display:flex;
    align-items:center;
    gap:10px;
}

.gc-tile .avatar-circle{
    flex:0 0 auto;
}

.gc-tile .name{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.gc-tile .name .t{
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.gc-tile .name .s{
    font-size:11px;
    color:var(--text-soft);
}

.gc-actions{
    justify-content:space-between;
}

#btn-start-group-call-selected[disabled]{
    opacity:0.55;
    cursor:not-allowed;
}

@media (max-width: 720px){
    .gc-body{
        grid-template-columns: 1fr;
    }
    .gc-left, .gc-right{
        min-height:auto;
    }
    .gc-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
    .gc-tile{
        flex-direction:column;
        align-items:flex-start;
    }
}

.modal-section{
    margin-top:12px;
    font-size:12px;
}

.modal-subtitle{
    font-size:12px;
    color:var(--text-soft);
    margin-bottom:4px;
}

.request-list{
    list-style:none;
    margin:0;
    padding:0;
}

.request-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    padding:4px 0;
}

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

.btn-accept{
    border-radius:999px;
    border:none;
    padding:3px 8px;
    font-size:11px;
    background:rgba(122,243,255,0.2);
    color:var(--accent-soft);
    cursor:pointer;
}

.btn-reject{
    border-radius:999px;
    border:none;
    padding:3px 8px;
    font-size:11px;
    background:rgba(255,107,129,0.16);
    color:var(--danger);
    cursor:pointer;
}

/* voice settings */

.settings-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
}

.settings-text{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.settings-title{
    font-size:13px;
}

.settings-sub{
    font-size:11px;
    color:var(--text-soft);
}

/* toggle switch */

.switch{
    position:relative;
    display:inline-block;
    width:40px;
    height:20px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(255,255,255,0.12);
    border-radius:999px;
    transition:.2s;
}

.slider:before{
    position:absolute;
    content:"";
    height:14px;
    width:14px;
    left:3px;
    top:3px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 6px rgba(0,0,0,.6);
    transition:.2s;
}

.switch input:checked + .slider{
    background:linear-gradient(135deg,#7af3ff,#ff91f2);
    box-shadow:0 0 10px rgba(122,243,255,.6);
}

.switch input:checked + .slider:before{
    transform:translateX(18px);
}

.settings-select{
    min-width:200px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.4);
    color:var(--text-main);
    font-size:13px;
}

.settings-options{
    display:flex;
    gap:6px;
}

.radio-pill{
    position:relative;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(0,0,0,0.35);
    padding:4px 10px;
    font-size:12px;
    cursor:pointer;
}

.radio-pill input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.radio-pill span{
    position:relative;
    z-index:0;
}

.radio-pill input:checked + span{
    color:#050811;
    font-weight:500;
}

.radio-pill input:checked + span::before{
    content:"";
    position:absolute;
    inset:-2px -8px;
    border-radius:999px;
    background:linear-gradient(135deg,#7af3ff,#ff91f2);
    z-index:-1;
    box-shadow:0 0 14px rgba(122,243,255,0.7);
}
/* toggled state */

.icon-btn.toggled{
    background:rgba(122,243,255,0.25);
    color:var(--accent-soft);
}


.chat-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 16px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.chat-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    min-width:0;
    transition:opacity 160ms ease, transform 160ms ease;
}

.chat-header-actions.is-hidden{
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
}

.chat-header-actions .icon-btn{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Ensure header call buttons are always clickable above any tint/glass overlays */
.chat-header{ position:relative; }
.chat-header > *{ position:relative; z-index:2; }
.chat-header-actions{ position:relative; z-index:6; pointer-events:auto; }
#btn-header-call,
#btn-header-group-call{ position:relative; z-index:7; pointer-events:auto; }

body.nc-theme-tinted .dc-layout .chat-header{ position:relative; }
body.nc-theme-preview-open .dc-layout .chat-header{ position:relative; }
body.nc-theme-tinted .dc-layout .chat-header > *,
body.nc-theme-preview-open .dc-layout .chat-header > *{ position:relative; z-index:2; }
body.nc-theme-tinted .dc-layout .chat-header-actions,
body.nc-theme-preview-open .dc-layout .chat-header-actions{ position:relative; z-index:6; pointer-events:auto; }


.screen-share-container{
    display:none;
    margin-top:6px;
    margin-bottom:6px;
    padding:4px;
    border-radius:10px;
    border:1px solid var(--border-soft);
    background:rgba(0,0,0,0.55);
}

.screen-share-container.active{
    display:block;
}

.remote-screen-video{
    width:100%;
    max-height:260px;
    border-radius:8px;
    background:#05070c;
    object-fit:contain;
}


/* ======================
   NEONCHAT RECAST OVERRIDES
   ====================== */

body{
    background:
        radial-gradient(circle at 0% 0%, #151740 0, transparent 55%),
        radial-gradient(circle at 100% 0%, #301346 0, transparent 55%),
        radial-gradient(circle at 50% 100%, #0b3645 0, transparent 55%),
        #02030a;
    color:var(--text-main);
}

.layout{
    width:100%;
    margin:0 auto;
    height:100%;
    display:grid;
    grid-template-columns:260px minmax(0, 1.5fr) 280px;
    gap:14px;
}

.glass-card{
    background:radial-gradient(circle at 0 0, rgba(122,243,255,0.09), transparent 60%),
               radial-gradient(circle at 100% 100%, rgba(255,124,251,0.12), transparent 60%),
               rgba(8,10,30,0.96);
    border-radius:22px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 26px 60px rgba(0,0,0,0.85);
    backdrop-filter:blur(26px);
}

/* sidebar / rightbar */

.sidebar,
.rightbar{
    padding:14px 14px 10px;
    display:flex;
    flex-direction:column;
}

.server-header{
    margin-bottom:16px;
}

.server-logo{
    font-size:18px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.server-sub{
    font-size:11px;
    color:var(--text-soft);
}

.sidebar-block{
    padding:10px 10px 8px;
    border-radius:16px;
    background:rgba(0,0,0,0.18);
    border:1px solid rgba(255,255,255,0.04);
}

.sidebar-block + .sidebar-block{
    margin-top:10px;
}

/* lists */

.channel-list,
.friend-list{
    max-height:none;
    padding-right:4px;
}

.channel-item,
.friend-item{
    border-radius:12px;
    padding:6px 8px;
    margin-bottom:4px;
    background:transparent;
    transition:background .14s ease, transform .12s ease;
}

.channel-item.active,
.friend-item.active{
    background:linear-gradient(90deg, rgba(122,243,255,0.08), rgba(255,124,251,0.12));
    transform:translateY(-1px);
}

.channel-item:hover,
.friend-item:hover{
    background:rgba(255,255,255,0.04);
}

/* avatars */

.avatar-circle{
    width:28px;
    height:28px;
    border-radius:999px;
    background:radial-gradient(circle at 20% 0, #fff, #888);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    font-size:13px;
    color:#05030b;
    box-shadow:0 0 0 2px rgba(0,0,0,0.5);
}

.avatar-circle.has-image{
    background-size:cover;
    background-position:center;
    color:transparent;
}

/* center chat */

.chat-main{
    padding:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.chat-header{
    padding:10px 16px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    backdrop-filter:blur(18px);
    background:linear-gradient(90deg, rgba(6,10,30,0.96), rgba(8,12,36,0.98));
}

.chat-messages{
    padding:12px 16px 10px;
}

/* сообщения */

.message-row{
    margin-bottom:10px;
}

.message-bubble{
    display:inline-block;
    padding:6px 10px;
    border-radius:12px;
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(255,255,255,0.03);
}

.message-meta{
    font-size:11px;
    color:var(--text-soft);
    margin-bottom:2px;
}

/* инпут */

.chat-input{
    padding:8px 10px 10px;
    border-top:1px solid rgba(255,255,255,0.06);
    background:linear-gradient(180deg, rgba(5,8,20,0.96), rgba(2,3,12,0.98));
}

#message-input{
    border-radius:999px;
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.06);
    color:var(--text-main);
}

/* call bar override stronger */

.call-bar{
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 16px;
    margin:8px 10px 0;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.12);
    background:linear-gradient(90deg, rgba(88,101,242,0.95), rgba(9,12,34,0.98));
    box-shadow:0 18px 40px rgba(0,0,0,0.85);
    position:relative;
    overflow:hidden;
}

.call-bar::before{
    content:"";
    position:absolute;
    inset:-20%;
    background:
        radial-gradient(circle at 0 0, rgba(255,255,255,0.18), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(122,243,255,0.22), transparent 60%);
    opacity:0.9;
    pointer-events:none;
}

.call-avatar{
    position:relative;
    z-index:0;
}

.call-info,
.call-controls,
.call-timer{
    position:relative;
    z-index:0;
}

/* screen share */

.screen-share-container{
    margin:8px 10px 0;
    padding:8px;
    border-radius:16px;
    border:1px solid rgba(122,243,255,0.22);
    background:radial-gradient(circle at 0 0, rgba(122,243,255,0.18), transparent 55%),
               radial-gradient(circle at 100% 100%, rgba(255,124,251,0.2), transparent 60%);
    display:none;
}

.screen-share-container.active{
    display:block;
}

.remote-screen-video{
    width:100%;
    max-height:320px;
    border-radius:12px;
    background:#02040d;
    object-fit:contain;
}

/* right bar */

.rightbar{
    padding:14px 14px 10px;
}

.voice-card{
    padding:10px 10px 8px;
    border-radius:16px;
    background:rgba(0,0,0,0.26);
    border:1px solid rgba(255,255,255,0.06);
}

/* user mini card */

.user-mini-card{
    border-radius:16px;
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.06);
}

/* ======================
   CALL HUD (-ish)
   ====================== */

.chat-main{
    position:relative;
}

/* overlay container */
.call-hud{
    display:none;
    position:absolute;
    inset:0;
    z-index:25;
    padding:18px;
    /* важно: иначе клики по кнопкам внутри окна звонка не проходят */
    pointer-events:auto;
}

.call-hud::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(12px);
    z-index:0;
    pointer-events:none;
}

/* main window */
.call-window{
    pointer-events:auto;
    position:relative;
    z-index:1;
    margin:auto;
    width:min(980px, 100%);
    height:min(640px, calc(100% - 36px));
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(16,18,26,0.88);
    backdrop-filter:blur(10px);
    box-shadow:0 22px 70px rgba(0,0,0,0.75);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.call-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 16px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    background:rgba(0,0,0,0.18);
}

.call-top-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.call-avatar{
    width:40px;
    height:40px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    letter-spacing:0.4px;
    color:#fff;
    background:radial-gradient(circle at 30% 30%, rgba(138,99,255,0.9), rgba(0,255,214,0.25));
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.45),
        0 8px 24px rgba(0,0,0,0.55);
    flex-shrink:0;
}

.call-avatar.big{
    width:46px;
    height:46px;
    border-radius:16px;
}

.call-info{
    min-width:0;
}

.call-peer-name{
    font-size:15px;
    font-weight:750;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.call-subrow{
    display:flex;
    align-items:center;
    gap:8px;
    opacity:0.78;
    font-size:12.5px;
}

.call-dot{
    opacity:0.65;
}

.call-top-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-width:0;
}

.call-icon-btn{
    width:36px;
    height:36px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(0,0,0,0.26);
    color:var(--text-main);
    cursor:pointer;
    transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.call-icon-btn:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,255,255,0.16);
}

.call-stage{
    flex:1;
    display:flex;
    gap:16px;
    padding:16px;
}

.call-stage-main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    min-width:0;
}

/* --- Inline screenshare inside call window (Discord-like) --- */
.call-screen-stage{
    width:100%;
    flex:1 1 auto;
    min-height:280px;
}

.call-screen-stage .screen-share-frame{
    height:100%;
}

.call-screen-stage .remote-screen-video{
    width:100%;
    height:100%;
    min-height:280px;
    max-height:none;
    object-fit:contain;
    background:#000;
    display:block;
    /* Видео должно принимать ПКМ (контекстное меню).
       Кнопки поверх остаются кликабельными за счет overlay. */
    pointer-events:auto;
}

.call-ss-toolbar{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    pointer-events:none;
}

.call-ss-toolbar .ss-toolbar-left{
    pointer-events:none;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.call-ss-toolbar .ss-toolbar-actions{
    pointer-events:auto;
    display:flex;
    gap:8px;
}

.call-hud.has-screen .call-stage-main{
    align-items:stretch;
    justify-content:flex-start;
    flex-direction:column;
    gap:12px;
}

.call-hud.has-screen .call-participants{
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}

.call-hud.has-screen .call-empty{
    display:none !important;
}

/* --- Theater mode (Discord-like) for inline screenshare --- */
.call-icon-btn.active{
    border-color:rgba(0,255,214,0.40);
    box-shadow:0 0 0 3px rgba(0,255,214,0.10);
}

.call-hud.theater.has-screen .call-stage-main{
    align-items:stretch;
}

.call-hud.theater.has-screen .call-screen-stage{
    flex:1 1 auto;
    min-height:360px;
}

.call-hud.theater.has-screen .call-participants{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:10px;
    padding:2px 2px 0;
    align-items:stretch;
    scroll-snap-type:x proximity;
}

.call-hud.theater.has-screen .participant-tile{
    flex:0 0 auto;
    width:210px;
    padding:12px 10px 10px;
    border-radius:18px;
    scroll-snap-align:start;
}

.call-hud.theater.has-screen .participant-avatar{
    width:56px;
    height:56px;
    font-size:18px;
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.55),
        0 10px 22px rgba(0,0,0,0.50);
}

.call-hud.theater.has-screen .participant-name{
    margin-top:8px;
    font-size:13px;
}

.call-hud.theater.has-screen .participant-sub{
    display:none;
}

.call-hud.theater.has-screen .voice-bars{
    margin-top:8px;
    height:10px;
}

@media (max-width: 980px){
    .call-hud.theater.has-screen .participant-tile{ width:180px; }
}


.call-participants{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
    align-content:start;
}

.participant-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 12px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(0,0,0,0.22);
}

.participant-avatar{
    width:44px;
    height:44px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    letter-spacing:0.3px;
    color:#fff;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.10);
    flex-shrink:0;
}

.participant-meta{
    min-width:0;
}

.participant-name{
    font-weight:750;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.participant-sub{
    font-size:12px;
    opacity:0.7;
}

.call-empty{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    opacity:0.85;
    padding:18px;
    pointer-events:none;
}

.call-empty-title{
    font-size:16px;
    font-weight:800;
}

.call-empty-sub{
    margin-top:6px;
    font-size:13px;
    opacity:0.72;
    max-width:520px;
}

.call-stage-side{
    width:320px;
    flex-shrink:0;
    display:flex;
    align-items:stretch;
}

.screen-share-container{
    width:100%;
    display:none;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(0,0,0,0.18);
    padding:10px;
}

.screen-share-container.active{
    display:block;
}

.screen-share-title{
    font-size:12px;
    opacity:0.75;
    margin-bottom:8px;
}

.call-bottom{
    padding:12px 16px 14px;
    border-top:1px solid rgba(255,255,255,0.06);
    background:rgba(0,0,0,0.18);
    display:flex;
    justify-content:center;
}

.call-controls-main,
.call-controls-incoming{
    display:flex;
    align-items:center;
    gap:10px;
}

.call-controls-incoming{
    display:none;
    gap:12px;
}

.call-control{
    width:44px;
    height:44px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(0,0,0,0.25);
    color:var(--text-main);
    cursor:pointer;
    transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.call-control:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,255,255,0.16);
}

.call-control.toggled{
    background:rgba(255,255,255,0.09);
    border-color:rgba(0,255,214,0.35);
    box-shadow:0 0 0 3px rgba(0,255,214,0.12);
}

.call-control.danger{
    border-color:rgba(255,110,110,0.35);
    background:rgba(255,110,110,0.18);
}

.call-control.danger:hover{
    border-color:rgba(255,110,110,0.55);
    background:rgba(255,110,110,0.26);
}

.call-cta{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.22);
    color:var(--text-main);
    cursor:pointer;
    font-weight:750;
}

.call-cta.accept{
    border-color:rgba(109,255,176,0.35);
    background:rgba(109,255,176,0.16);
}

.call-cta.reject{
    border-color:rgba(255,110,110,0.35);
    background:rgba(255,110,110,0.16);
}

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

.call-cta-icon{
    font-weight:900;
}

/* modes */
.call-hud[data-mode="incoming"] .call-controls-incoming{
    display:flex;
}

.call-hud[data-mode="incoming"] .call-controls-main{
    display:none;
}

/* voice channel join modal (Discord-like) */
.call-hud[data-mode="vc_join"] .call-controls-incoming{
    display:flex;
}
.call-hud[data-mode="vc_join"] .call-controls-main{
    display:none;
}
.call-hud[data-mode="vc_join"] .call-badge{ display:none; }
.call-hud[data-mode="vc_join"] .call-top-actions{ display:none; }
.call-hud[data-mode="vc_join"] .call-participants{ display:none; }
.call-hud[data-mode="vc_join"] .call-empty{ display:flex; }
.call-hud[data-mode="vc_join"] .call-empty-title{ font-size:18px; }
.call-hud[data-mode="vc_join"] .call-empty-sub{ opacity:.9; }

.call-hud[data-mode="idle"]{
    display:none;
}

/* minimized (picture-in-picture-ish) */
.call-hud[data-min="1"]{
    inset:auto;
    left:16px;
    bottom:16px;
    width:360px;
    padding:0;
}

.call-hud[data-min="1"]::before{
    display:none;
}

.call-hud[data-min="1"] .call-window{
    pointer-events:auto;
    position:relative;
    z-index:1;
    margin:auto;
    width:min(980px, 100%);
    height:min(640px, calc(100% - 36px));
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(16,18,26,0.88);
    backdrop-filter:blur(10px);
    box-shadow:0 22px 70px rgba(0,0,0,0.75);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.call-hud[data-min="1"] .call-stage{
    display:none;
}

.call-hud[data-min="1"] .call-bottom{
    justify-content:flex-start;
}

/* smaller screens */
@media (max-width: 720px){
    .call-stage-side{ display:none; }
    .call-window{ height:min(640px, calc(100% - 18px)); }
}


/* modals */

.modal{
    border-radius:20px;
}

/* small buttons */

.btn-xs.subtle{
    border-radius:999px;
}

/* end recast overrides */



/* =====================================
   2026 CALL HUD refresh (round + -ish)
   ===================================== */

/* shared svg icon */
.i{
    width:18px;
    height:18px;
    display:block;
}

/* make everything rounder */
.call-avatar,
.call-avatar.big,
.participant-avatar,
.call-icon-btn,
.call-control{
    border-radius:999px !important;
}

.call-top{
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.10));
}

.call-window{
    pointer-events:auto;
    position:relative;
    z-index:1;
    margin:auto;
    width:min(980px, 100%);
    height:min(640px, calc(100% - 36px));
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(16,18,26,0.88);
    backdrop-filter:blur(10px);
    box-shadow:0 22px 70px rgba(0,0,0,0.75);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.call-icon-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    background:rgba(0,0,0,0.22);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 8px 20px rgba(0,0,0,0.35);
}

.call-icon-btn .i{ width:19px; height:19px; }

.call-control{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.22);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 10px 24px rgba(0,0,0,0.38);
}

.call-control .i{ width:20px; height:20px; }

.call-control:hover,
.call-icon-btn:hover{
    background:rgba(255,255,255,0.06);
}

.call-control.toggled{
    border-color:rgba(0,255,214,0.45);
    box-shadow:
        0 0 0 3px rgba(0,255,214,0.12),
        0 10px 24px rgba(0,0,0,0.38);
}

.call-control.danger{
    background:rgba(255,64,128,0.14);
    border-color:rgba(255,64,128,0.38);
}

.call-control.danger:hover{
    background:rgba(255,64,128,0.22);
    border-color:rgba(255,64,128,0.60);
}

.call-badge.demo{
    margin-left:8px;
    padding:3px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:850;
    letter-spacing:0.6px;
    background:rgba(255,64,128,0.16);
    border:1px solid rgba(255,64,128,0.35);
    color:rgba(255,255,255,0.92);
}

/* reconnect pill */
.call-pill-btn{
    display:flex;
    align-items:center;
    gap:8px;
    height:38px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.22);
    color:var(--text-main);
    cursor:pointer;
    transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.call-pill-btn .i{ width:18px; height:18px; }

.call-pill-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.18); }

.call-pill-btn.is-hidden{ display:none; }

.call-pill-timer{
    margin-left:4px;
    opacity:0.75;
    font-weight:750;
    font-size:12px;
}

/* participants -> round tiles */
.call-participants{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:14px;
}

.participant-card{ display:none; }

.participant-tile{
    position:relative;
    padding:18px 14px 16px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(0,0,0,0.18);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    overflow:hidden;
}

.participant-tile::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
        radial-gradient(240px 140px at 20% 0%, rgba(138,99,255,0.18), transparent 60%),
        radial-gradient(220px 140px at 90% 10%, rgba(0,255,214,0.14), transparent 60%);
    opacity:0.9;
    pointer-events:none;
}

.participant-tile > *{ position:relative; }

.participant-avatar{
    width:88px;
    height:88px;
    border-radius:999px;
    position:relative;
    overflow:visible;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:900;
    letter-spacing:0.6px;
    background:radial-gradient(circle at 30% 30%, rgba(138,99,255,0.85), rgba(0,255,214,0.22));
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.55),
        0 14px 34px rgba(0,0,0,0.55);

    /* Voice reaction (set by JS analyser). Default values keep it still. */
    transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg));
    will-change: transform;
    transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out;
}

.participant-name{
    margin-top:12px;
    font-size:15px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}

.participant-sub{
    margin-top:4px;
    font-size:12px;
    opacity:0.72;
}

.voice-bars{
    display:flex;
    gap:4px;
    height:14px;
    margin-top:12px;
    opacity:0.75;
}

.voice-bars span{
    width:4px;
    background:rgba(255,255,255,0.70);
    border-radius:999px;
    transform-origin:bottom;
    animation:voiceBars 1.15s ease-in-out infinite;
}

.voice-bars span:nth-child(2){ animation-delay:0.12s; }
.voice-bars span:nth-child(3){ animation-delay:0.24s; }
.voice-bars span:nth-child(4){ animation-delay:0.36s; }

@keyframes voiceBars{
    0%,100%{ transform:scaleY(0.25); opacity:0.55; }
    50%{ transform:scaleY(1.0); opacity:0.95; }
}

/* speaking ring */
.participant-tile[data-speaking="1"] .participant-avatar{
    border-color:rgba(0,255,214,0.45);
}

.participant-tile[data-speaking="1"] .participant-avatar::after{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:999px;
    border:3px solid rgba(0,255,214,0.45);
    box-shadow:0 0 28px rgba(0,255,214,0.28);
    animation:speakerPulse 1.05s ease-in-out infinite;
    pointer-events:none;
}

/* DM stage: make speaking ring more obvious (closer to Discord) */
.call-hud[data-layout="dm"] .participant-tile[data-speaking="1"] .participant-avatar::after{
    inset:-10px;
    border-width:4px;
    border-color:rgba(0,255,214, var(--ringAlpha, 0.55));
    box-shadow:
        0 0 0 2px rgba(0,255,214,0.12),
        0 0 var(--ringGlow, 34px) rgba(0,255,214,0.28);
}

@keyframes speakerPulse{
    0%,100%{ transform:scale(0.96); opacity:0.55; }
    50%{ transform:scale(1.08); opacity:0.95; }
}

/* when not speaking, freeze bars a bit */
.participant-tile[data-speaking="0"] .voice-bars span{
    animation-play-state:paused;
    transform:scaleY(0.25);
    opacity:0.55;
}


/* premium spotlight */
.participant-tile{ --speak:0; --scale:1; --salpha1:0.10; --salpha2:0.10; --salpha3:0.04; --glow1:0px; --glow2:0px; --ringGlow:0px; --ringAlpha:0.30; transition: transform 180ms ease, filter 180ms ease, border-color 180ms ease; }
.call-participants.spotlight-on .participant-tile{ filter:saturate(0.92) brightness(0.90); }
.call-participants.spotlight-on .participant-tile.spotlight{
    filter:saturate(1.18) brightness(1.06);
    transform:scale(1.05);
    border-color:rgba(255,255,255,0.16);
}

.call-participants.spotlight-on .participant-tile:not(.spotlight)::before{
    opacity:0.55;
}

.participant-tile.spotlight::before{
    opacity:1;
    background:
        radial-gradient(260px 180px at 30% 0%, rgba(0,255,214, var(--salpha1)), transparent 60%),
        radial-gradient(260px 180px at 80% 18%, rgba(138,99,255, var(--salpha2)), transparent 60%),
        radial-gradient(520px 260px at 50% 110%, rgba(255,255,255, var(--salpha3)), transparent 62%);
}

.participant-tile.spotlight .participant-avatar{
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.55),
        0 18px 44px rgba(0,0,0,0.60),
        0 0 var(--glow1) rgba(0,255,214,0.28),
        0 0 var(--glow2) rgba(138,99,255,0.18);
}

.participant-tile[data-speaking="1"] .participant-avatar::after{
    box-shadow:0 0 var(--ringGlow) rgba(0,255,214, var(--ringAlpha));
    opacity:1;
}
/* dropped / reconnect state */
.call-hud[data-mode="dropped"] .call-controls-incoming{ display:none; }

/* screen share panel polish */
.screen-share-container{
    background:rgba(0,0,0,0.16);
}

.remote-screen-video{
    width:100%;
    height:240px;
    border-radius:14px;
    background:rgba(0,0,0,0.35);
    object-fit:cover;
}

/* ==============================
   2026 polish pack (chat + calls)
   ============================== */

/* generic utility */
.is-hidden{ display:none !important; }

/* sidebar/friends search (button -> opens modal) */
.sidebar-search{ padding:6px 6px 10px; }
.nc-search-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background:rgba(5,5,15,0.85);
  color:rgba(249,251,255,0.78);
  padding:10px 12px;
  outline:none;
  cursor:text;
  transition:border-color 120ms ease, background 120ms ease;
}
.nc-search-btn:hover{ border-color:rgba(255,255,255,0.16); background:rgba(5,5,15,0.92); }
.nc-search-btn:active{ transform: translateY(0.5px); }
.nc-search-ico{ opacity:0.75; }
.nc-search-ph{ opacity:0.75; font-size:13px; }

/* make center relative for floating button */
.chat-main{ position:relative; }

/* message bubbles */
.msg-row{ display:flex; align-items:flex-end; gap:10px; margin:10px 4px; }
.msg-row.mine{ justify-content:flex-end; flex-direction:row-reverse; }
.msg-avatar{

  width:28px; height:28px; border-radius:999px;
  background:linear-gradient(135deg, rgba(122,243,255,0.45), rgba(255,124,251,0.35));
  border:1px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800;
  color:rgba(5,3,11,0.95);
  flex:0 0 auto;
}
.msg-avatar.has-image{ background-size:cover; background-position:center; color:transparent; }
.msg-row.mine .msg-avatar{
 display:flex; }
.msg-body{ min-width:0; max-width:min(560px, 86%); }
.msg-head{ display:flex; gap:8px; align-items:baseline; margin:0 0 4px 2px; }
.msg-row.mine .msg-head{ justify-content:flex-end; margin:0 2px 4px 0; }
.msg-user{ font-size:12px; font-weight:750; color:rgba(249,251,255,0.88); }
.msg-time{ font-size:11px; color:rgba(249,251,255,0.45); }
.msg-bubble{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.18);
  box-shadow:0 10px 24px rgba(0,0,0,0.28);
  line-height:1.35;
  white-space:pre-wrap;
  word-wrap:break-word;
}
.msg-row.mine .msg-bubble{
  background:linear-gradient(135deg, rgba(122,243,255,0.24), rgba(255,124,251,0.18));
  border-color:rgba(122,243,255,0.22);
}
.msg-row.compact .msg-head{ display:none; }
.msg-row.compact .msg-avatar{
 visibility:hidden; }

.msg-row.pop{ animation:msgpop 240ms ease-out; }
@keyframes msgpop{ from{ transform:translateY(6px); opacity:0.0; } to{ transform:translateY(0); opacity:1; } }

/* input (textarea) */
#message-input{
  border-radius:18px;
  border:1px solid var(--border-soft);
  background:rgba(5,5,15,0.92);
  color:var(--text-main);
  padding:10px 12px;
  resize:none;
  line-height:1.25;
  max-height:160px;
  overflow-y:auto;
  scrollbar-width:none;
}
#message-input:focus{ outline:none; border-color:rgba(122,243,255,0.55); }

/* jump to latest */
.jump-latest{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:74px;
  z-index:20;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.24);
  backdrop-filter:blur(22px);
  color:var(--text-main);
  padding:8px 14px;
  cursor:pointer;
  box-shadow:0 14px 32px rgba(0,0,0,0.45);
  transition:transform 140ms ease, background 140ms ease;
}
.jump-latest:hover{ transform:translateX(-50%) translateY(-1px); background:rgba(255,255,255,0.08); }

/* Ensure this chat-only UI doesn't stay visible above other app views/overlays */
body.modal-open .jump-latest{ display:none !important; }
body.nc-friends-mode .jump-latest{ display:none !important; }

/* screen share toolbar */
.screen-share-container{ padding:0 !important; background:transparent !important; border:none !important; }
.screen-share-frame{ position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.24); }
.remote-screen-video{ width:100%; height:100%; min-height:200px; max-height:420px; object-fit:contain; background:#000; display:block; }
.screen-share-toolbar{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  border:none;
  background: transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:3;
}
.screen-share-toolbar .icon-btn{ padding:6px 8px; }

/* theater mode: widen side panel */
.call-window.screen-theater .call-stage-side{ width:520px; }

/* volume sheet */
.volume-sheet{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%) translateY(18px);
  opacity:0;
  pointer-events:none;
  z-index:9999;
  transition:opacity 160ms ease, transform 160ms ease;
}
.volume-sheet.active{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.volume-sheet-inner{
  width:min(520px, 92vw);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.26);
  backdrop-filter:blur(28px);
  box-shadow:0 22px 60px rgba(0,0,0,0.55);
  padding:10px 12px;
}
.volume-row{ display:flex; align-items:center; gap:10px; padding:8px 6px; }
#volume-row-screen{ display:none; }
#volume-row-screen.active{ display:flex; }
.volume-icon{
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform 120ms ease, background 120ms ease;
}
.volume-icon:hover{ transform:translateY(-1px); background:rgba(255,255,255,0.10); }
.volume-icon.toggled{ border-color:rgba(255,110,110,0.40); background:rgba(255,110,110,0.18); }
.volume-label{ width:64px; font-size:12px; color:rgba(249,251,255,0.70); }
.volume-slider{ flex:1; }

/* small screens */
@media (max-width: 920px){
  .layout{ grid-template-columns:220px minmax(0,1fr); }
  .rightbar{ display:none; }
}
@media (max-width: 720px){
  .layout{ grid-template-columns:minmax(0,1fr); }
  .sidebar{ display:none; }
}

#message-input::-webkit-scrollbar{ width:0; height:0; }

/* Screen share fullscreen fix */
.screen-share-frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
.screen-share-frame:fullscreen,
.screen-share-frame:-webkit-full-screen{
  width:100vw;
  height:100vh;
  margin:0;
  border-radius:0;
  padding:0;
}
.screen-share-frame:fullscreen .remote-screen-video,
.screen-share-frame:-webkit-full-screen .remote-screen-video{
  width:100vw;
  height:100vh;
  max-height:none;
  border-radius:0;
  object-fit:contain;
}
.remote-screen-video:fullscreen,
.remote-screen-video:-webkit-full-screen{
  width:100vw;
  height:100vh;
  max-height:none;
  border-radius:0;
  object-fit:contain;
}


/* fullscreen screen-share fix */
.screen-share-frame:fullscreen,
.screen-share-frame:-webkit-full-screen{
  width:100vw;
  height:100vh;
  border-radius:0;
}
.screen-share-frame:fullscreen .remote-screen-video,
.screen-share-frame:-webkit-full-screen .remote-screen-video{
  width:100vw;
  height:100vh;
  max-height:none;
  object-fit:contain;
}


/* --- Fullscreen: make screen share actually fill the screen --- */
.screen-share-frame:fullscreen,
.remote-screen-video:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
}

.screen-share-frame:fullscreen .remote-screen-video,
.remote-screen-video:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* iOS-ish textarea: hide scrollbars/arrows */
.chat-input textarea::-webkit-scrollbar { width: 0; height: 0; }
.chat-input textarea { scrollbar-width: none; -ms-overflow-style: none; }


/* JS warning (shows only if main.js didn't run). Does not block clicks. */
.js-warning{position:fixed;left:12px;bottom:12px;z-index:99999;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,80,80,0.16);backdrop-filter:blur(18px);color:rgba(255,230,230,0.92);font-size:12px;pointer-events:none;}
html[data-nc-js="1"] .js-warning{display:none;}

/* ============================
   ScreenShare custom modal (-ish)
   ============================ */
.ss-overlay[hidden]{
    display:none !important;
}

.ss-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.ss-card{
    width:min(460px, 94vw);
    max-height:84vh;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
    display:flex;
    flex-direction:column;
}

/* ============================
   DM call: Discord-like avatar layering (hard overrides)
   ============================ */
/* The DM stage boot styles use an orbital "shadow-disc" (::before) under avatars.
   Users asked for circles to read as fully ABOVE the green background (no "embedded" disc).
   So we disable those discs and keep only outer glow/shadow on the avatar itself. */
.call-hud[data-layout="dm"] .participant-tile::before{
    display:none !important;
    content:none !important;
}

/* Ensure the DM control bar and mini controls are always clickable above the stage. */
.call-hud[data-layout="dm"] .call-bottom{
    z-index: 50;
}
.call-hud[data-layout="dm"] .voice-mini,
.call-hud[data-layout="dm"] .call-top,
.call-hud[data-layout="dm"] .call-stage-main,
.call-hud[data-layout="dm"] .call-participants{
    position: relative;
    z-index: 10;
}

.ss-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    background:rgba(15,18,32,0.55);
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.ss-head-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.ss-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background: radial-gradient(circle at 30% 30%, rgba(180,120,255,1), rgba(35,255,210,0.9));
    box-shadow: 0 0 18px rgba(180,120,255,0.5);
    flex:0 0 auto;
}

.ss-head-text{ min-width:0; }

.ss-title{
    font-weight:700;
    letter-spacing:0.2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ss-sub{
    font-size:12px;
    opacity:0.75;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ss-head-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-width:0;
}

.ss-body{
    padding:12px 12px 10px;
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:1;
    min-height:0;
    overflow:auto;
}

/* Preview: чистое видео без слоёв, чтобы не "затемнять" картинку */
.ss-preview{
    position:relative;
    height:220px;
    border-radius:18px;
    overflow:hidden;
    background:#000;
}

#ss-video{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
    pointer-events:none;
}

/* Actionbar всегда поверх, кликабельный даже в full/expanded */
.ss-actionbar{
    position:sticky;
    bottom:0;
    z-index:5;
    pointer-events:auto;
}


.ss-tabs{
    display:flex;
    gap:8px;
    padding:4px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(0,0,0,0.32);
    width:fit-content;
}

.ss-tab{
    appearance:none;
    border:0;
    background:transparent;
    color:rgba(255,255,255,0.78);
    font-size:12px;
    padding:8px 12px;
    border-radius:999px;
    cursor:pointer;
    transition:background 160ms ease, color 160ms ease, transform 160ms ease;
}

.ss-tab:hover{ background:rgba(255,255,255,0.06); }

.ss-tab.is-active{
    background:linear-gradient(135deg, rgba(122,243,255,0.30), rgba(255,145,242,0.26));
    color:#070a12;
    font-weight:650;
    box-shadow:0 0 18px rgba(122,243,255,0.30);
}

.ss-tab-hint{
    font-size:12px;
    opacity:0.7;
    line-height:1.35;
    margin-top:2px;
}

.ss-settings{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    margin-top:12px;
}

.ss-setting{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px 10px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(0,0,0,0.22);
}

.ss-label{
    font-size:12px;
    opacity:0.72;
}

.ss-seg{
    display:flex;
    gap:8px;
    padding:4px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(0,0,0,0.30);
}

.ss-chip{
    flex:1;
    appearance:none;
    border:0;
    background:transparent;
    color:rgba(255,255,255,0.80);
    font-size:12px;
    padding:8px 10px;
    border-radius:999px;
    cursor:pointer;
    transition:background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.ss-chip:hover{ background:rgba(255,255,255,0.06); }

.ss-chip.is-active{
    background:linear-gradient(135deg, rgba(122,243,255,0.35), rgba(255,145,242,0.30));
    color:#070a12;
    font-weight:650;
    box-shadow:0 0 18px rgba(122,243,255,0.30);
}

.ss-select{
    width:100%;
    padding:10px 12px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(0,0,0,0.32);
    color:var(--text-main);
    outline:none;
}

.ss-select:focus{
    border-color:rgba(122,243,255,0.35);
    box-shadow:0 0 0 3px rgba(122,243,255,0.12);
}

.ss-live{
    grid-column:1 / -1;
    text-align:center;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(0,0,0,0.28);
    font-size:12px;
    opacity:0.82;
}

@media (max-width: 720px){
    .ss-settings{ grid-template-columns:1fr; }
}

.ss-preview{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:rgba(0,0,0,0.55);
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.10);
}

.ss-preview video{
    width:100%;
    height:100%;
    object-fit:contain;
    background:rgba(0,0,0,0.85);
}

.ss-preview-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:18px;
    font-size:13px;
    line-height:1.35;
    opacity:0.82;
    pointer-events:none;
}

.ss-actionbar{
    padding:12px 16px;
    background:rgba(15,18,32,0.55);
    border-top:1px solid rgba(255,255,255,0.08);
}

.ss-overlay[data-mode="remote"] #ss-actionbar{
    display:none;
}


.ss-foot{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.ss-local-controls,
.ss-remote-controls{
    display:none;
}

.ss-overlay[data-mode="start"] #ss-local-controls,
.ss-overlay[data-mode="local"] #ss-local-controls{
    display:block;
}

.ss-overlay[data-mode="remote"] #ss-remote-controls{
    display:block;
}

.ss-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    opacity:0.9;
    user-select:none;
}

.ss-toggle input{
    width:18px;
    height:18px;
}

.ss-btnrow{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

.ss-note,
.ss-remote-hint{
    margin-top:10px;
    font-size:12px;
    opacity:0.72;
    line-height:1.35;
}

.ss-note.is-error{
    opacity:1;
    color:rgba(255, 120, 160, 0.95);
}

.btn-xs.danger{
    background:rgba(255, 75, 120, 0.18);
    border-color:rgba(255, 75, 120, 0.35);
}

.btn-xs.danger:hover{
    background:rgba(255, 75, 120, 0.26);
}

@media (max-width: 720px){
    .ss-overlay{ padding:14px; }
    .ss-card{ border-radius:22px; }
    .ss-body{ padding:12px; }
    .ss-preview{ border-radius:18px; }
}


/* ============================
   ScreenShare minimized pill (-ish)
   ============================ */
.ss-mini{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:80;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:18px;
    background:rgba(15,18,32,0.55);
    border:1px solid rgba(255,255,255,0.12);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

.ss-mini[hidden]{ display:none !important; }

.ss-mini-pill{
    display:flex;
    align-items:center;
    gap:10px;
    background:transparent;
    border:0;
    color:rgba(255,255,255,0.92);
    cursor:pointer;
    padding:6px 8px;
    border-radius:14px;
    user-select:none;
}

.ss-mini-pill:hover{
    background:rgba(255,255,255,0.06);
}

.ss-mini-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background: radial-gradient(circle at 30% 30%, rgba(180,120,255,1), rgba(35,255,210,0.9));
    box-shadow: 0 0 18px rgba(180,120,255,0.5);
    flex:0 0 auto;
}

.ss-mini-label{
    font-weight:700;
    font-size:13px;
    letter-spacing:0.2px;
    max-width:220px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ss-mini-action{
    width:40px;
    height:40px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.92);
    display:grid;
    place-items:center;
    cursor:pointer;
}

.ss-mini-action:hover{
    background:rgba(255,255,255,0.10);
}

.ss-mini-action.danger{
    background:rgba(255, 75, 120, 0.18);
    border-color:rgba(255, 75, 120, 0.35);
}

.ss-mini-action.danger:hover{
    background:rgba(255, 75, 120, 0.26);
}

@media (max-width: 720px){
    .ss-mini{ right:12px; bottom:12px; padding:9px 10px; border-radius:16px; }
    .ss-mini-action{ width:38px; height:38px; border-radius:15px; }
}


/* ===== Uploads (-ish) + iOS 2026 vibes ===== */

.nc-toast{
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  pointer-events: none;
  z-index: 10050;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(20, 20, 28, 0.72);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 35px rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  letter-spacing: 0.2px;
  transition: 180ms ease;
}
.nc-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


.nc-cross-tab-notice{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  pointer-events: none;
  z-index: 1000005;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(20, 20, 28, 0.72);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 35px rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  letter-spacing: 0.2px;
  transition: 180ms ease;
}
.nc-cross-tab-notice.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.drop-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.drop-overlay[hidden]{ display:none; }
/* Extra safety: if hidden attribute gets removed but aria-hidden remains true */
.drop-overlay[aria-hidden="true"]{ display:none !important; pointer-events:none !important; }
.drop-card{
  width: min(520px, 92vw);
  padding: 22px 18px;
  border-radius: 22px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(16, 18, 28, 0.55);
  box-shadow: 0 28px 80px rgba(0,0,0,0.55);
}
.drop-icon{
  font-size: 26px;
  margin-bottom: 10px;
  opacity: 0.9;
}
.drop-title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.drop-sub{
  font-size: 13px;
  opacity: 0.8;
}

.upload-panel{
  margin: 0 14px 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(12, 14, 24, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.upload-panel.is-hidden{ display:none; }
.upload-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.upload-title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  opacity: 0.9;
}
.upload-close{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
}
.upload-close:hover{
  background: rgba(255,255,255,0.10);
}
.upload-items{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.upload-items::-webkit-scrollbar{ height: 0; width:0; }
.upload-item{
  min-width: 210px;
  max-width: 280px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}
.upload-thumb{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.07);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font-size: 18px;
}
.upload-thumb.is-image{
  color: transparent;
}
.upload-meta{
  flex: 1 1 auto;
  min-width: 0;
}
.upload-name{
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.upload-size{
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}
.upload-remove{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
}
.upload-remove:hover{
  background: rgba(255,255,255,0.10);
}
.upload-hint{
  font-size: 12px;
  opacity: 0.7;
  margin-top: 8px;
}

.upload-progress{
  position: relative;
  height: 10px;
  border-radius: 999px;
  margin-top: 10px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.upload-progress.is-hidden{ display:none; }
.upload-progress-bar{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(98,205,255,0.95), rgba(198,120,255,0.95));
}
.upload-progress-text{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: 0.9;
}

/* Composer tweaks */
.composer{
  display:flex;
  align-items:flex-end;
  gap: 10px;
}
.composer-attach{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
  flex: 0 0 auto;
}
.composer-attach:hover{ background: rgba(255,255,255,0.10); }
.composer-attach .i{ width: 20px; height: 20px; }

/* Attachments in messages */
.msg-attachments{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.msg-image{
  max-width: min(360px, 70vw);
  max-height: 360px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
}
.msg-file{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  text-decoration:none;
  color: inherit;
}
.msg-file:hover{
  background: rgba(255,255,255,0.08);
}
.msg-file-ico{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 auto;
}
.msg-file-meta{ min-width: 0; }
.msg-file-name{
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 44vw;
}
.msg-file-size{
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}


/* Attachment action buttons */
.msg-att-actions{
  display:flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap:wrap;
  min-width:0;
}
.msg-att-btn{
  display:inline-flex;
  flex:1 1 auto;
  min-width:110px;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: 700;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
.msg-att-btn:hover{ background: rgba(255,255,255,0.10); }
.msg-att-btn:active{ transform: translateY(1px); }

/* New attachment cards */
.msg-image-card{
  display:inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.msg-file-card{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}
.msg-file-card:hover{ background: rgba(255,255,255,0.08); }
.msg-file-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

/* Image viewer (in-app "Смотреть") */
.nc-viewer{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.nc-viewer.is-hidden{ display:none; }
.nc-viewer-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(10px);
}
.nc-viewer-card{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(16,18,30,0.84);
  box-shadow: 0 20px 80px rgba(0,0,0,0.55);
  overflow:hidden;
  display:flex;
  flex-direction: column;
}
.nc-viewer-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.nc-viewer-title{
  font-size: 13px;
  font-weight: 800;
  opacity: 0.92;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.nc-viewer-actions{
  display:flex;
  gap: 10px;
}
.nc-viewer-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: 700;
  text-decoration:none;
  cursor:pointer;
}
.nc-viewer-btn:hover{ background: rgba(255,255,255,0.10); }
.nc-viewer-body{
  padding: 12px;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nc-viewer-img{
  max-width: 100%;
  max-height: calc(100vh - 140px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}


/* ============================
   Auth UI extras (2026)
   ============================ */
.pw-row{display:flex;gap:10px;align-items:center}
.pw-row input{flex:1}
.pw-gen{white-space:nowrap}
.hint{opacity:.7;font-weight:500;font-size:12px}
.pw-rules{margin-top:6px;font-size:12px;line-height:1.35;opacity:.75}

/* Password strength mini-indicator (UX only; server-side checks still apply) */
.pw-meter{margin-top:10px}
.pw-meter-track{height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.08)}
.pw-meter-bar{height:100%;width:0%;border-radius:999px;transition:width .18s ease, opacity .18s ease}
.pw-meter-bar.lvl-0{background:var(--danger);opacity:.9}
.pw-meter-bar.lvl-1{background:rgba(255,124,251,0.55);opacity:.95}
.pw-meter-bar.lvl-2{background:var(--accent-soft);opacity:1}
.pw-meter-bar.lvl-3{background:var(--accent);opacity:1}
.pw-meter-text{margin-top:6px;font-size:12px;opacity:.9}
.pw-meter-list{margin:6px 0 0;padding-left:16px;font-size:12px;line-height:1.35;opacity:.78}
.pw-meter-list li{margin:2px 0}
.flash-warn{background:rgba(255,200,0,.12);border:1px solid rgba(255,200,0,.25);color:rgba(255,240,200,.95)}

/* ============================
   Profiles (2026-ish polish)
   ============================ */

.user-mini-card,
.profile-card{
    position:relative;
    overflow:hidden;
}

.user-mini-banner,
.profile-banner,
.user-mini-modal-banner{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:72px;
    pointer-events:none;
    background:
        radial-gradient(circle at 10% 30%, rgba(255,124,251,0.35), transparent 55%),
        radial-gradient(circle at 90% 20%, rgba(122,243,255,0.30), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent 70%);
    opacity:0.95;
}

.user-mini-card{ padding:10px 10px 12px; }
.profile-card{ padding:10px 10px 12px; }

.user-mini-head,
.profile-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    position:relative;
    z-index:1;
    margin-bottom:8px;
}

.user-mini-header,
.profile-title{
    font-size:13px;
    letter-spacing:0.2px;
}

.user-mini-chip{
    font-size:11px;
    padding:3px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(0,0,0,0.26);
    color:rgba(249,251,255,0.82);
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.user-mini-chip::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:999px;
    background:rgba(122,243,255,0.95);
    box-shadow:0 0 0 3px rgba(122,243,255,0.12);
}

.profile-body{
    position:relative;
    z-index:0;
}

.profile-avatar-wrap{
    position:relative;
    flex-shrink:0;
}

/* Edit hint (2026): subtle, non-annoying */
.edit-hint{
    margin-top:10px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 11px;
    border-radius:999px;
    font-size:11px;
    line-height:1;
    color:rgba(249,251,255,0.78);
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(12,14,22,0.55);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.35);
    user-select:none;
}

.edit-hint .hint-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(120,255,231,0.9);
    box-shadow:
        0 0 0 3px rgba(120,255,231,0.15),
        0 0 18px rgba(120,255,231,0.45);
}

.edit-hint.is-hidden{ display:none; }




.profile-me .avatar-circle.xl{
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.55),
        0 14px 34px rgba(0,0,0,0.55);
}

#profile-avatar{
    cursor:pointer;
}

#profile-avatar:focus{
    outline:none;
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.55),
        0 0 0 4px rgba(120,255,231,0.18),
        0 14px 34px rgba(0,0,0,0.55);
}


.profile-id{
    font-size:11px;
    color:rgba(249,251,255,0.6);
}

/* Mini profile card layout */
.user-mini-body.filled{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
}

.user-mini-hero{
    display:flex;
    align-items:center;
    gap:10px;
}

.user-mini-actions{
    flex-direction:row;
    gap:8px;
}

.user-mini-actions .btn-xs{
    flex:1;
    padding:6px 10px;
    font-size:12px;
}

/* Right sidebar profile panel: "Full profile" footer */
.user-mini-side-footer{
    margin-top:10px;
    display:flex;
}
.user-mini-side-footer .btn-link{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:9px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.06);
    color:rgba(249,251,255,0.92);
}
.user-mini-side-footer .btn-link:hover{
    background:rgba(255,255,255,0.09);
    border-color:rgba(122,243,255,0.22);
}

/* Friend list: turn into tiny profile rows */
.friend-item{
    position:relative;
    padding:10px 10px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(0,0,0,0.24);
    transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.friend-item:hover{
    transform:translateY(-1px);
    border-color:rgba(122,243,255,0.18);
    background:rgba(255,255,255,0.06);
}

.friend-item::after{
    content:"";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:8px;
    height:8px;
    border-radius:999px;
    background:rgba(122,243,255,0.95);
    box-shadow:0 0 0 4px rgba(122,243,255,0.10);
    opacity:0.85;
}

/* Bottom user panel: only nickname opens edit profile modal */
.sidebar-bottom .current-user{ cursor:default; }
.sidebar-bottom .current-user:hover{ background:transparent; }
.sidebar-bottom .current-user .user-meta .user-name{ cursor:pointer; }
.sidebar-bottom .current-user .user-meta .user-name:hover{ text-decoration:underline; text-underline-offset:3px; }

/* User mini modal: add hero + banner */
.user-mini-modal{
    position:relative;
    overflow:hidden;
}

/* User mini modal popout (closer to Discord profile sheet) */
.user-mini-modal.user-mini-popout{
    padding:0;
    width:min(390px, calc(100vw - 24px));
    border-radius:16px;
    background:rgba(43,45,49,0.98);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 18px 46px rgba(0,0,0,0.55);
    backdrop-filter:none;
}

.user-mini-modal.user-mini-popout .user-mini-modal-banner{
    height:118px;
    opacity:1;
    background:
        radial-gradient(circle at 20% 25%, rgba(255,124,251,0.16) 0, transparent 55%),
        radial-gradient(circle at 80% 55%, rgba(122,243,255,0.12) 0, transparent 60%),
        linear-gradient(180deg, rgba(14,14,18,0.95) 0, rgba(10,10,14,0.85) 60%, rgba(43,45,49,0.98) 100%);
}

.user-mini-topbar{
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    z-index:3;
    display:flex;
    justify-content:flex-end;
}

.user-mini-top-actions{
    display:flex;
    gap:8px;
}

.user-mini-top-actions .icon-btn{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.28);
    color:rgba(249,251,255,0.92);
}

.user-mini-top-actions .icon-btn:hover{
    background:rgba(255,255,255,0.08);
    border-color:rgba(122,243,255,0.25);
}

.user-mini-modal.user-mini-popout .modal-body{
    padding:86px 14px 10px;
    gap:10px;
}

.user-mini-modal.user-mini-popout .user-mini-modal-hero{
    align-items:flex-start;
    gap:12px;
}

.user-mini-modal.user-mini-popout #modal-user-avatar{
    margin-top:-34px;
    box-shadow:
        0 0 0 4px rgba(43,45,49,0.98),
        0 14px 34px rgba(0,0,0,0.55);
}

.user-mini-modal-title{
    font-size:18px;
    font-weight:800;
    letter-spacing:0.2px;
    line-height:1.15;
}

.user-mini-modal.user-mini-popout .user-mini-modal-username{
    font-size:12px;
    opacity:0.86;
}

.user-mini-modal.user-mini-popout .user-mini-modal-status{
    font-size:12px;
    opacity:0.78;
}

.user-mini-modal.user-mini-popout .user-mini-modal-stats{
    background:rgba(35,37,40,0.95);
    border:1px solid rgba(255,255,255,0.08);
}

.user-mini-modal.user-mini-popout .user-mini-footer{
    padding:10px 14px 14px;
}

.user-mini-modal.user-mini-popout .user-mini-footer .btn-link{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.06);
    color:rgba(249,251,255,0.92);
}

.user-mini-modal.user-mini-popout .user-mini-footer .btn-link:hover{
    background:rgba(255,255,255,0.09);
    border-color:rgba(122,243,255,0.22);
}

.user-mini-modal .modal-header,
.user-mini-modal .modal-body,
.user-mini-modal .modal-actions{
    position:relative;
    z-index:0;
}

.user-mini-modal-body{
    display:block;
}

.user-mini-modal-hero{
    display:flex;
    align-items:center;
    gap:14px;
}

.user-mini-modal-username{ font-size:15px; }
.user-mini-modal-status{
    font-size:12px;
    line-height:1.35;
    color:rgba(249,251,255,0.72);
}


/* ================================
   2026 Profiles v3: prettier + stable
   (UX: меньше дёрганий, больше красоты)
   ================================ */

.user-mini-card,
.profile-card{
    border:1px solid transparent;
    background:
        linear-gradient(var(--glass), var(--glass)) padding-box,
        linear-gradient(135deg,
            rgba(255,124,251,0.35),
            rgba(122,243,255,0.22),
            rgba(255,255,255,0.10)) border-box;
    box-shadow:
        0 8px 22px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.user-mini-card{
    position:relative;
    overflow:hidden;
    min-height:128px; /* стабильная высота: пусто/заполнено */
}

.user-mini-banner{
    height:26px;
    border-radius:12px;
    background:
        radial-gradient(circle at 15% 25%, rgba(255,124,251,0.25) 0, transparent 55%),
        radial-gradient(circle at 85% 65%, rgba(122,243,255,0.18) 0, transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    background-size:200% 200%;
    filter:saturate(1.05);
    margin-bottom:8px;
}

.user-mini-header{
    display:flex;
    align-items:center;
    gap:8px;
}

.user-mini-chip{
    margin-left:auto;
    font-size:11px;
    padding:3px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.07);
    background:rgba(0,0,0,0.18);
    color:var(--text-main);
}

.user-mini-body.empty,
.user-mini-body.filled{
    display:none;
}

.user-mini-card.is-empty .user-mini-body.empty{
    display:flex;
}

.user-mini-card.is-filled .user-mini-body.filled{
    display:flex;
}

.user-mini-body{
    min-height:86px;
    width:100%;
    padding:10px 8px;
    border-radius:12px;
    background:rgba(0,0,0,0.18);
    border:1px solid rgba(255,255,255,0.06);
    transition:opacity 160ms ease, transform 160ms ease;
}

.user-mini-card.is-switching .user-mini-body{
    opacity:0.72;
    transform:translateY(1px);
}

.user-mini-hero{
    gap:12px;
}

.user-mini-meta{
    min-width:0;
}

.user-mini-name{
    font-size:14px;
    font-weight:700;
    letter-spacing:0.2px;
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.user-mini-sub-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:4px;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    color:var(--text-soft);
    max-width:200px;
}

.user-mini-sub{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-soft));
    box-shadow:0 0 0 3px rgba(255,124,251,0.12);
    flex:0 0 auto;
}

.user-mini-actions{
    display:flex;
    gap:6px;
    margin-top:10px;
}

.user-mini-actions .btn-xs{
    flex:1 1 0;
    height:30px;
    border-radius:999px;
    justify-content:center;
}

/* Мой профиль */

.profile-card.profile-me{
    position:relative;
    overflow:hidden;
}

.profile-banner{
    height:34px;
    border-radius:12px;
    background:
        radial-gradient(circle at 20% 35%, rgba(255,124,251,0.26) 0, transparent 60%),
        radial-gradient(circle at 80% 65%, rgba(122,243,255,0.20) 0, transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    background-size:200% 200%;
    animation:ncProfileBanner 14s ease-in-out infinite;
    margin-bottom:8px;
}

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

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

.profile-title{
    letter-spacing:0.2px;
}

.profile-body{
    gap:12px;
    min-width:0;
    align-items:center;
}

.profile-meta{
    min-width:0;
}

.profile-name{
    font-size:15px;
    font-weight:800;
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.profile-id{
    font-size:12px;
    color:var(--text-soft);
}

.profile-status-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:4px;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(0,0,0,0.18);
    border:1px solid rgba(255,255,255,0.06);
    max-width:220px;
}

.profile-status-pill .status-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.avatar-circle{
    aspect-ratio:1/1;
}

.avatar-circle.xl{
    box-shadow:
        0 10px 22px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.06),
        0 0 0 6px rgba(255,124,251,0.08);
}



/* Уважение к людям, которых укачивает */
@media (prefers-reduced-motion: reduce){
    .profile-banner{ animation:none; }
    .user-mini-body{ transition:none; }
}


/* --- Presence (online/offline) dot overlay --- */
.avatar-initial{ position:relative; z-index:1; }
/* Only hide initials once the avatar image is confirmed loaded (prevents blank circles on 404). */
.avatar-circle.has-image .avatar-initial{ opacity:1; transition:opacity .18s ease; }
.avatar-circle.has-image.avatar-ok .avatar-initial{ opacity:0; }

.presence-dot{
    position:absolute;
    right:-1px;
    bottom:-1px;
    width:8px;
    height:8px;
    border-radius:999px;
    border:2px solid rgba(10, 8, 18, .9);
    background:rgba(160,160,170,.95);
    box-shadow:0 0 10px rgba(0,0,0,.35);
    z-index:2;
    pointer-events:none;
}
.presence-dot.is-online{
    background:rgba(74,255,150,.98);
    box-shadow:0 0 14px rgba(74,255,150,.55);
}
.presence-dot.is-offline{
    background:rgba(150,150,160,.95);
    box-shadow:0 0 10px rgba(0,0,0,.35);
}
.avatar-circle.lg .presence-dot{ width:10px; height:10px; border-width:2px; }
.avatar-circle.xl .presence-dot{ width:12px; height:12px; border-width:2px; }

/*
  Hotfix: if a .presence-dot element ends up outside of an avatar container,
  it may appear as a “stray” dot in a corner of the UI. To keep the UI clean,
  we hide presence dots by default and only show them when they are inside
  an avatar.
*/
.presence-dot{ display:none !important; }
.avatar-circle .presence-dot{ display:block !important; }

/* Hide offline dots entirely (only show online) */
.avatar-circle .presence-dot.is-offline{ display:none !important; }

/* mini-profile stats */
.user-mini-stats{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:10px 10px;
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:rgba(255,255,255,.02);
}
.user-mini-modal-stats{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:10px 10px;
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:rgba(255,255,255,.02);
}
.mini-stat{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    color:var(--text-soft);
}
.mini-stat .mini-k{ opacity:.85; }
.mini-stat .mini-v{ color:var(--text); font-weight:600; }



/* --- Chat header typing indicator --- */
.channel-title-wrap{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}
.typing-indicator{
    font-size:12px;
    color:var(--text-soft);
    opacity:.85;
    letter-spacing:.2px;
}
.typing-indicator.is-hidden{ display:none; }

/* --- Friend list preview + unread --- */
.friend-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-width:0;
}
.friend-row.sub{
    justify-content:flex-start;
    gap:10px;
}
.friend-preview{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    color:rgba(255,255,255,.55);
}

/* Pending friend requests badges (Discord-like red count) */
.pending-count-badge{
    min-width:18px;
    height:18px;
    padding:0 6px;
    border-radius:999px;
    font-size:11px;
    line-height:18px;
    text-align:center;
    font-weight:700;
    color:#fff;
    background:rgba(255, 64, 64, .96);
    box-shadow:0 0 18px rgba(255, 64, 64, .28);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.pending-count-badge.is-hidden{ display:none; }

.dc-brand-btn{ position:relative; }
.dc-brand-btn .pending-count-badge{
    position:absolute;
    top:-4px;
    right:-4px;
}

.dm-home-item{ position:relative; }
.dm-home-badge{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
}

.friends-tab{ position:relative; }
.friends-tab-badge{
    margin-left:8px;
    transform:translateY(-1px);
}

.unread-badge{
    min-width:18px;
    height:18px;
    padding:0 6px;
    border-radius:999px;
    font-size:11px;
    line-height:18px;
    text-align:center;
    color:#0b0812;
    background:rgba(74,255,150,.95);
    box-shadow:0 0 18px rgba(74,255,150,.35);
}
.unread-badge.is-hidden{ display:none; }

.unread-badge.is-pulse{
    animation: unreadPulse .7s ease-out 1;
}

.channel-item .unread-badge{
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
}

.unread-pop{
    position:absolute;
    right:26px;
    top:50%;
    transform:translateY(-50%);
    padding:2px 6px;
    border-radius:999px;
    font-size:11px;
    line-height:16px;
    color:#07060c;
    background:rgba(120,210,255,.95);
    box-shadow:0 0 22px rgba(120,210,255,.45);
    pointer-events:none;
    animation: unreadPop 1.1s ease-out 1;
}

@keyframes unreadPulse{
    0%{ filter:brightness(1); box-shadow:0 0 18px rgba(74,255,150,.35); }
    40%{ filter:brightness(1.2); box-shadow:0 0 30px rgba(120,210,255,.55); }
    100%{ filter:brightness(1); box-shadow:0 0 18px rgba(74,255,150,.35); }
}

@keyframes unreadPop{
    0%{ opacity:0; transform:translateY(-50%) translateY(8px) scale(.9); }
    20%{ opacity:1; }
    100%{ opacity:0; transform:translateY(-50%) translateY(-14px) scale(1.05); }
}


/* --- Presence modes --- */
.presence-dot.is-away{
    background:rgba(255,205,94,.98);
    box-shadow:0 0 14px rgba(255,205,94,.45);
}
.presence-dot.is-dnd{
    background:rgba(255,110,110,.98);
    box-shadow:0 0 14px rgba(255,110,110,.45);
}
.presence-dot.is-invisible{
    background:rgba(170,140,255,.95);
    box-shadow:0 0 14px rgba(170,140,255,.35);
}

/* --- Presence menu (bottom-left avatar) --- */
.presence-menu{
    position:absolute;
    left:14px;
    bottom:74px;
    width:230px;
    padding:10px;
    border-radius:16px;
    border:1px solid var(--border-soft);
    background:rgba(10,8,18,.82);
    backdrop-filter: blur(18px);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    z-index:50;
}
.presence-menu-title{
    font-size:12px;
    color:rgba(255,255,255,.65);
    margin:2px 6px 8px 6px;
}
.presence-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 10px;
    border-radius:14px;
    border:1px solid transparent;
    background:transparent;
    color:rgba(255,255,255,.9);
    cursor:pointer;
    transition: background .15s ease, border-color .15s ease;
}
.presence-item:hover{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.06);
}
.presence-item.is-active{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.10);
}
.presence-swatch{
    width:10px;
    height:10px;
    border-radius:999px;
    border:2px solid rgba(10, 8, 18, .9);
    background:rgba(150,150,160,.95);
    box-shadow:0 0 10px rgba(0,0,0,.35);
}
.presence-swatch.is-online{ background:rgba(74,255,150,.98); box-shadow:0 0 14px rgba(74,255,150,.55); }
.presence-swatch.is-away{ background:rgba(255,205,94,.98); box-shadow:0 0 14px rgba(255,205,94,.45); }
.presence-swatch.is-dnd{ background:rgba(255,110,110,.98); box-shadow:0 0 14px rgba(255,110,110,.45); }
.presence-swatch.is-offline{ background:rgba(150,150,160,.95); box-shadow:0 0 10px rgba(0,0,0,.35); }
.presence-swatch.is-invisible{ background:rgba(170,140,255,.95); box-shadow:0 0 14px rgba(170,140,255,.35); }

/* --- Message receipts --- */
.msg-receipt{
    margin-left:8px;
    font-size:12px;
    color:rgba(255,255,255,.55);
    user-select:none;
}
.msg-receipt.is-delivered{ color:rgba(255,255,255,.70); }
.msg-receipt.is-read{ color:rgba(74,255,150,.90); text-shadow:0 0 10px rgba(74,255,150,.25); }


.sidebar{position:relative;}
.sidebar-bottom{position:relative;}


/* 2026 Scrollbar */
:root{
  --nc-scroll-thumb: rgba(255,255,255,.18);
  --nc-scroll-thumb-hover: rgba(255,255,255,.28);
  --nc-scroll-track: rgba(255,255,255,.04);
}

.sidebar, .friend-list, .channel-list, .chat-messages, .messages, .modal, .glass-card{
  scrollbar-width: thin;
  scrollbar-color: var(--nc-scroll-thumb) transparent;
}

.sidebar::-webkit-scrollbar,
.friend-list::-webkit-scrollbar,
.channel-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.messages::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.glass-card::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.sidebar::-webkit-scrollbar-track,
.friend-list::-webkit-scrollbar-track,
.channel-list::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.messages::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.glass-card::-webkit-scrollbar-track{
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb,
.friend-list::-webkit-scrollbar-thumb,
.channel-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.glass-card::-webkit-scrollbar-thumb{
  background: var(--nc-scroll-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.friend-list::-webkit-scrollbar-thumb:hover,
.channel-list::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover,
.messages::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover,
.glass-card::-webkit-scrollbar-thumb:hover{
  background: var(--nc-scroll-thumb-hover);
  background-clip: content-box;
}

/* Hide scrollbar arrow buttons that some browsers draw (hello 2009) */
.sidebar::-webkit-scrollbar-button,
.friend-list::-webkit-scrollbar-button,
.channel-list::-webkit-scrollbar-button,
.chat-messages::-webkit-scrollbar-button,
.messages::-webkit-scrollbar-button,
.modal::-webkit-scrollbar-button,
.glass-card::-webkit-scrollbar-button{
  width:0;
  height:0;
  display:none;
}


/* Context menus */
.context-menu{
    position:fixed;
    /* Must sit above ALL overlays (settings modal, mini modals, drag/drop overlay, etc.) */
    z-index: 30060;
    min-width:180px;
    width:260px;
    max-width:min(92vw, 320px);
    max-height:min(80vh, 620px);
    overflow-x:hidden;
    overflow-y:auto;
    padding:6px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(10, 8, 18, 0.88);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    display:none;
}
.context-menu .ctx-close{
    position:absolute;
    top:8px;
    right:8px;
    width:28px;
    height:28px;
    border:none;
    border-radius:8px;
    background:transparent;
    color:rgba(255,255,255,0.75);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.context-menu .ctx-close:hover{ background:rgba(255,255,255,0.06); }
.context-menu .ctx-close .i{ width:18px; height:18px; }
.context-menu.active{
    display:block;
}
.context-item{
    width:100%;
    text-align:left;
    border:none;
    background:transparent;
    color:var(--text);
    padding:10px 10px;
    border-radius:12px;
    cursor:pointer;
    font-size:13px;
}
.context-item:hover{
    background:rgba(255,255,255,0.06);
}
.context-item.danger{
    color:rgba(255,120,120,0.95);
}
.context-item.danger:hover{
    background:rgba(255,120,120,0.10);
}


.ctx-arrow{
    float:right;
    opacity:0.7;
    font-size:14px;
    margin-left:10px;
}

.ctx-check{
    float:right;
    opacity:0.9;
    font-size:14px;
    margin-left:10px;
}


.context-sep{
    height:1px;
    margin:6px 6px;
    background:rgba(255,255,255,0.08);
    border-radius:999px;
}

.context-item.disabled,
.context-item:disabled{
    opacity:0.45;
    cursor:default;
}
.context-item.disabled:hover,
.context-item:disabled:hover{
    background:transparent;
}

/* Context menu: rows + toggles (Discord-like) */
.context-sub{
    display:block;
    margin-top:2px;
    font-size:11px;
    opacity:0.65;
}
.context-row{
    padding:8px 10px;
    border-radius:12px;
}
.context-row-title{
    font-size:12px;
    opacity:0.85;
    margin-bottom:6px;
}
.context-range{
    width:100%;
}
.context-check{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 10px;
    border-radius:12px;
    cursor:pointer;
    user-select:none;
    font-size:13px;
    color:var(--text);
}
.context-check:hover{
    background:rgba(255,255,255,0.06);
}
.context-check.danger{
    color:rgba(255,120,120,0.95);
}
.context-check.danger:hover{
    background:rgba(255,120,120,0.10);
}
.context-check.disabled{
    opacity:0.55;
    pointer-events:none;
}
.context-check input[type="checkbox"]{
    width:16px;
    height:16px;
}

/* Screen-share context menu (Discord-like) */
.ctx-range-wrap{
    width:100%;
    padding:10px 10px 12px;
    border-radius:12px;
}
.ctx-range-wrap:hover{
    background:rgba(255,255,255,0.06);
}
.ctx-range-title{
    font-size:12px;
    opacity:0.85;
    margin-bottom:8px;
}

/* v14.1: DnD helpers for guild categories/channels */
.guild-cat.is-drag-over > .guild-cat-head{
    background:rgba(255,255,255,0.06);
}
.guild-channel-item.is-dragging,
.guild-cat.is-dragging{
    opacity:0.55;
}

/* v14.22: locked channels (show with lock) */
.guild-channel-lock{
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0.7;
}
.guild-channel-lock .i{ width:14px; height:14px; }
.guild-channel-item.is-locked{
    opacity:0.55;
    cursor:not-allowed;
}
.guild-channel-item.is-locked:hover{ background:transparent; }
.guild-channel-item.is-locked::before{ opacity:0; }

.dnd-insert-line{
    height:2px;
    margin:2px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.65);
    box-shadow:0 0 0 1px rgba(0,0,0,0.25);
    pointer-events:none;
}
.guild-drop-indicator{
    height:2px;
    border-radius:999px;
    background:rgba(255,255,255,0.18);
    margin:2px 10px;
}


/* Emoji picker + reactions */
.emoji-insert-btn{
    width:36px;
    height:36px;
    border-radius:14px;
    font-size:16px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 8px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.10);
}
.emoji-insert-btn:hover{
    background:rgba(255,255,255,0.09);
}.emoji-pop{
    position:fixed;
    z-index:10000;
    padding:10px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(10, 8, 18, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    display:none;
    max-width:260px;
}
.emoji-pop.active{ display:block; }
.emoji-pop .emoji-pick{
    width:38px;
    height:38px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    color:var(--text);
    cursor:pointer;
    font-size:18px;
    margin:4px;
}
.emoji-pop .emoji-pick:hover{
    background:rgba(255,255,255,0.08);
}
.context-emoji-row{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 4px 10px 4px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    margin-bottom:6px;
}
.emoji-quick{
    width:34px;
    height:34px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    cursor:pointer;
    font-size:16px;
}
.emoji-quick:hover{ background:rgba(255,255,255,0.08); }

/* Message meta: pinned/edited + reactions row */
.msg-row.pinned .msg-body{
    outline:1px solid rgba(255,255,255,0.10);
    border-radius:18px;
}
.msg-pin{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:8px;
    padding:2px 8px;
    border-radius:999px;
    font-size:11px;
    color:rgba(255,255,255,0.80);
    background:rgba(255,255,255,0.06);
}
.msg-edited{
    margin-left:8px;
    font-size:11px;
    color:rgba(255,255,255,0.55);
}
.msg-reactions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:6px;
}
.reaction-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    cursor:pointer;
    font-size:12px;
}
.reaction-pill.mine{
    background:rgba(120,255,210,0.10);
    border-color:rgba(120,255,210,0.25);
}
.reaction-pill:hover{
    background:rgba(255,255,255,0.08);
}



/* === Friends Drawer (2026) === */
.friends-launch{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: inherit;
  cursor: pointer;
}
.friends-launch:hover{ background: rgba(255,255,255,.05); }
.friends-launch:active{ transform: translateY(1px); }
.friends-launch-icon{ opacity: .9; }
.friends-launch-text{ font-weight: 600; letter-spacing: .2px; }
#friends-unread-total{
  margin-left: auto;
}
.drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(4px);
  z-index: 60;
}
.friends-drawer{
  position: fixed;
  top: 16px;
  left: 16px;
  bottom: 16px;
  width: 340px;
  max-width: calc(100vw - 32px);
  z-index: 61;
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.friends-drawer[hidden]{ display:none !important; }
.drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 10px 2px;
}
.drawer-title{ font-size: 14px; font-weight: 700; opacity: .92; }
.drawer-actions{ display:flex; align-items:center; gap: 8px; }
.drawer-search{
  padding: 6px 0 10px 0;
}
.drawer-search input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: inherit;
  outline: none;
}
.friends-drawer .friend-list{
  overflow: auto;
  padding-right: 2px;
  flex: 1;
}
.friends-drawer .friend-item{
  position: relative;
}
.friend-item .friend-meta{ padding-right: 44px; }

@media (max-width: 900px){
  .friends-drawer{ width: min(92vw, 380px); }
}



/* --- Sidebar tabs (Channels / Friends) --- */
.sidebar-mid{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-tabs{
  display:flex;
  gap:10px;
  padding: 2px 2px 0;
}

.sidebar-tab{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
  color: var(--text-soft);
  border-radius: 16px;
  padding: 10px 12px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.sidebar-tab:hover{ background: rgba(255,255,255,0.07); }
.sidebar-tab:active{ transform: translateY(1px); }

.sidebar-tab.is-active{
  background: rgba(255,255,255,0.10);
  color: var(--text-main);
  border-color: rgba(255,255,255,0.12);
}

.sidebar-tab .unread-badge{
  position: static;
  transform: none;
  font-size: 11px;
  padding: 2px 7px;
}

.sidebar-pane{
  display:none;
  min-height:0;
  overflow:hidden;
}

.sidebar-pane.is-active{
  display:block;
}

.sidebar-pane .sidebar-block{
  height: 100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.sidebar-pane .channel-list,
.sidebar-pane .friend-list{
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right: 6px;
}

/* Make sidebar itself not scroll, only panes */
.sidebar{
  overflow:hidden;
}




/* ===== Channels (-ish) panel + type picker ===== */

.channel-type-picker{
  display:flex;
  gap:10px;
  margin:8px 0 4px;
}
.type-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  user-select:none;
  font-size:13px;
}
.type-pill input{ display:none; }
.type-pill .type-ico{ width:18px; text-align:center; opacity:.9;}
.type-pill:has(input:checked){
  background:rgba(154,160,255,.14);
  border-color:rgba(154,160,255,.35);
  box-shadow:0 0 0 1px rgba(154,160,255,.10) inset;
}

.channel-panel-card{
  margin-top:12px;
  padding:12px;
}
.channel-panel-card.is-hidden{ display:none; }

/* --- Legacy modal-style channel/group settings --- */
#modal-channel-panel{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.58);
  backdrop-filter: blur(2px);
  z-index:1000;
}
#modal-channel-panel.is-hidden{ display:none; }

.channel-panel-card.is-modal{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:min(980px, calc(100vw - 44px));
  max-height:min(86vh, 780px);
  overflow:hidden;
  z-index:1001;
  margin:0;
  padding:14px;
}
.channel-panel-card.is-modal .channel-panel-body{
  max-height: calc(86vh - 150px);
  max-height: calc(min(86vh, 780px) - 150px);
  overflow:auto;
  padding-right:6px;
}
.channel-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.channel-panel-title{ display:flex; flex-direction:column; gap:6px; }
.channel-panel-name{ font-size:15px; font-weight:700; letter-spacing:.2px; }
.channel-panel-meta .chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.channel-panel-tabs{
  display:flex;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.cp-tab{
  flex:1;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
  font-size:12.5px;
  cursor:pointer;
}
.cp-tab.is-active{
  background:rgba(154,160,255,.14);
  border-color:rgba(154,160,255,.35);
}
.channel-panel-body{ margin-top:10px; }
.cp-pane{ display:none; }
.cp-pane.is-active{ display:block; }

.channel-panel-body .form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.channel-panel-body label{ font-size:12px; opacity:.85; }
.channel-panel-body input[type="text"], .channel-panel-body select, .channel-panel-body textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  color:rgba(255,255,255,.95);
  outline:none;
}
.channel-panel-body textarea{ resize:none; }

.cp-actions{ display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap; min-width:0; }
.cp-result{ margin-top:8px; font-size:12px; opacity:.9; min-height:16px; }

.roles-list{ display:flex; flex-direction:column; gap:8px; }
.role-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.role-left{ display:flex; align-items:center; gap:10px; }
.role-grip{
  opacity:.55;
  font-weight:800;
  letter-spacing:-1px;
  user-select:none;
  cursor:grab;
}
.role-row[draggable="true"] .role-grip{ cursor:grab; }
.role-row.is-dragging .role-grip{ cursor:grabbing; }
.role-swatch{
  width:12px; height:12px; border-radius:4px; background:#9aa0ff;
  box-shadow:0 0 0 2px rgba(0,0,0,.22);
}
.role-name{ font-weight:650; font-size:13px; }
.role-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0; }

.roles-create{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.roles-create-title{ font-size:12px; opacity:.85; margin-bottom:8px; }
.roles-create-row{ display:flex; gap:8px; align-items:center; }
.roles-create-row input[type="text"]{ flex:1; }

.members-list{ display:flex; flex-direction:column; gap:8px; }
.member-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.member-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.member-name{ font-weight:650; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-role-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}
.member-role-dot{ width:8px; height:8px; border-radius:3px; background:#9aa0ff; }
.member-actions select{
  max-width:140px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.95);
}


/* Pending role indicator */
.channel-pending {
    margin-left: 6px;
    opacity: 0.75;
    font-size: 12px;
    line-height: 1;
    flex: 0 0 auto;
}

.chip.chip-pending {
    margin-left: 8px;
    white-space: nowrap;
}


/* v9 invite ui */
.chip-role{
  opacity: .9;
}
.cp-invite{
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.cp-invite-title{
  font-weight: 700;
  margin-bottom: 8px;
}
.cp-invite-row{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cp-invite-row input{
  flex: 1 1 220px;
  min-width: 0;
}
.cp-invite-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.cp-invite-hint{
  margin-top: 8px;
  opacity: .85;
  font-size: 12px;
  line-height: 1.3;
}

/* v15: Discord-like server create wizard */
.modal-serverwizard{
  width: min(560px, 92vw);
  max-height: 82vh;
  overflow: hidden;
}
.csw-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.csw-title{
  flex:1 1 auto;
  text-align:center;
  margin:0;
}
.csw-back{
  width:34px;
  height:34px;
}
.csw-body{
  padding: 14px 16px 18px;
}
.csw-sub{
  opacity:.9;
  font-size:13px;
  line-height:1.35;
  margin-bottom: 12px;
}
.csw-cardlist{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.csw-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: inherit;
  text-align:left;
}
.csw-card:hover{
  background: rgba(255,255,255,.06);
}
.csw-card-ico{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: rgba(0,0,0,.25);
}
.csw-card-text{
  font-weight:700;
}
.csw-card-arrow{
  margin-left:auto;
  opacity:.8;
}
.csw-join{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.csw-join-title{ font-weight:700; }
.csw-join-btn{ white-space:nowrap; }
.csw-skip{
  margin-top: 12px;
  width:100%;
}

.csw-brand{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 520px){
  .csw-brand{ grid-template-columns: 1fr; }
}
.csw-avatar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.csw-avatar-circle{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.20);
  display:grid;
  place-items:center;
  font-size: 28px;
  background: rgba(0,0,0,.22);
}
.csw-avatar-circle.has-image{
  border-style: solid;
  border-color: rgba(255,255,255,.18);
  background-size: cover;
  background-position: center;
}
.csw-avatar-hint{ opacity:.85; font-size: 12px; }
.csw-form .csw-label{ display:block; opacity:.85; font-size: 12px; margin-bottom: 6px; letter-spacing:.08em; }
.csw-hint{ margin-top: 8px; opacity:.85; font-size: 12px; line-height:1.3; }

/* v15: category header actions (plus on hover like Discord) */
.guild-cat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.guild-cat-actions{
  display:flex;
  align-items:center;
  gap: 6px;
}
.guild-cat-add{
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}
.guild-cat:hover .guild-cat-add,
.guild-cat-head:focus-within .guild-cat-add{
  opacity: 1;
  pointer-events: auto;
}

/* v15: Category header actions (+) */
.guild-cat-head{
  position:relative;
}
.guild-cat-actions{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.guild-cat-add{
  width: 22px; height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: inherit;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease;
}
.guild-cat:hover .guild-cat-add{ opacity: 1; }
.guild-cat-add:hover{ background: rgba(255,255,255,.08); }

/* v15: Welcome board for empty channels */
.welcome-board{
  padding: 18px 16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.welcome-hero{ display:flex; flex-direction:column; gap:6px; }
.welcome-hero-ico{
  width:56px; height:56px; border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  display:grid; place-items:center;
  font-size: 26px;
}
.welcome-hero-title{ font-size: 20px; font-weight: 800; letter-spacing: .2px; }
.welcome-hero-sub{ font-size: 13px; opacity: .92; line-height: 1.35; }
.welcome-cards{ display:grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap:10px; }
@media (min-width: 920px){
  .welcome-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.welcome-card{
  display:flex;
  gap:10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
}
.welcome-card-ico{
  width:36px; height:36px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  display:grid; place-items:center;
}
.welcome-card-title{ font-weight: 800; }
.welcome-card-sub{ font-size: 12.5px; opacity: .9; line-height: 1.35; margin-top:2px; }

/* Context menu: mute hint */
.context-menu .ctx-hint{opacity:.7;font-size:12px;margin-left:6px;}


/* ===== User mini modal footer ===== */
.user-mini-footer{padding:10px 14px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:center;}
.btn-link{background:transparent;border:0;color:rgba(255,255,255,.75);cursor:pointer;font-weight:600;padding:8px 10px;border-radius:10px;}
.btn-link:hover{background:rgba(255,255,255,.06);color:#fff;}

/* ===== Full user profile modal (Discord-like) ===== */
.user-full-modal{
  width:min(980px, calc(100vw - 48px));
  max-width:980px;
  max-height:calc(100vh - 48px);
  overflow:hidden;
  position:relative;
  padding:0;
}
.user-full-close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:5;
}
.user-full-grid{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:0;
  height: min(720px, calc(100vh - 48px));
}
.user-full-left{
  border-right:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.16);
  overflow:hidden;
}
.user-full-banner{
  height:140px;
  background:linear-gradient(135deg, rgba(0,255,209,.20), rgba(126,58,242,.18));
}
.user-full-left-inner{
  padding:16px 18px 18px 18px;
  position:relative;
}
.user-full-avatar{
  margin-top:-54px;
  border:6px solid rgba(20,20,24,.95);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.avatar-circle.xxl{width:96px;height:96px;border-radius:50%;}
.user-full-name{
  margin-top:12px;
  font-size:22px;
  font-weight:800;
  letter-spacing:.2px;
}
.user-full-username{
  margin-top:2px;
  color:rgba(255,255,255,.65);
  font-weight:600;
}
.user-full-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  align-items:center;
}
.user-full-actions .icon-only{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
}
.user-full-meta{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.user-full-meta-k{
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:700;
  text-transform:none;
}
.user-full-meta-v{
  margin-top:4px;
  font-weight:700;
}
.user-full-note input{
  margin-top:6px;
  width:100%;
}
.user-full-right{
  padding:14px 16px 16px 16px;
  overflow:hidden;
}
.user-full-tabs{
  display:flex;
  gap:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.user-full-tab{
  background:transparent;
  border:0;
  cursor:pointer;
  padding:10px 2px 12px 2px;
  color:rgba(255,255,255,.62);
  font-weight:800;
  letter-spacing:.2px;
  border-bottom:2px solid transparent;
}
.user-full-tab.is-active{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.88);
}
.user-full-panels{
  padding-top:16px;
  height:calc(100% - 44px);
  overflow:auto;
}
.user-full-panel{display:none;}
.user-full-panel.is-active{display:block;}
.user-full-empty{
  color:rgba(255,255,255,.55);
  font-weight:700;
  padding:26px 8px;
}
.user-full-activity-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:320px;
  text-align:center;
  gap:12px;
}
.user-full-activity-title{
  font-weight:900;
  font-size:16px;
}
.user-full-activity-sub{
  color:rgba(255,255,255,.65);
  font-weight:700;
  max-width:520px;
}
@media (max-width: 860px){
  .user-full-grid{grid-template-columns: 1fr;}
  .user-full-left{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);}
}


/* Center mini profile like Discord popout (requested) */
#modal-user-mini.modal-backdrop{
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
}
#modal-user-mini .user-mini-popout{
    margin:0 !important;
}



/* ===== Discord-exact Full Profile (v58) ===== */
#modal-user-full.modal-backdrop{
  align-items:center;
  justify-content:center;
  padding:0;
}

.user-full-modal.glass-card{
  background:#2b2d31 !important;
  backdrop-filter:none !important;
  border:1px solid rgba(0,0,0,.35);
  box-shadow:0 0 0 1px rgba(0,0,0,.22), 0 12px 40px rgba(0,0,0,.65);
  border-radius:10px;
}

.user-full-modal{
  width:min(920px, calc(100vw - 40px)) !important;
  max-width:920px !important;
  max-height:calc(100vh - 80px) !important;
}

.user-full-grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  height:min(650px, calc(100vh - 110px));
}

.user-full-left{
  background:#232428;
  border-right:1px solid #1e1f22;
  border-radius:10px 0 0 10px;
}

.user-full-right{
  background:#2b2d31;
  border-radius:0 10px 10px 0;
  padding:22px 24px 20px;
}

.user-full-banner{
  height:120px;
  background:#111214;
  border-radius:10px 0 0 0;
}

.user-full-left-inner{
  padding:0 18px 18px;
}

.user-full-avatar{
  width:88px;
  height:88px;
  margin-top:-44px;
  border:6px solid #232428;
  border-radius:50%;
  box-shadow:none;
}

.user-full-name{
  margin-top:10px;
  font-size:20px;
  font-weight:800;
  line-height:1.2;
}

.user-full-username{
  margin-top:3px;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.6);
}

.user-full-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  align-items:center;
}

.user-full-actions .btn-xs.primary{
  background:#5865f2;
  border:0;
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  font-weight:800;
}
.user-full-actions .btn-xs.primary:hover{filter:brightness(1.08);}

.user-full-actions .btn-xs.subtle.icon-only{
  width:36px;
  height:36px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
}
.user-full-actions .btn-xs.subtle.icon-only:hover{background:rgba(255,255,255,.10);}

.user-full-meta{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.user-full-meta-row{
  background:#1e1f22;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:12px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.user-full-meta-k{
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.72);
}
.user-full-meta-v{
  font-size:12px;
  font-weight:900;
  color:rgba(255,255,255,.90);
}

.user-full-note{
  background:#1e1f22;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:12px 12px;
}

.user-full-note .user-mini-note{
  margin-top:8px;
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  border-radius:8px;
  padding:10px 10px;
}

/* ------------------------------
   User popout (Discord-like)
   ------------------------------ */

.user-popout{
  position: fixed;
  inset: 0;
  z-index: 30040;
  pointer-events: none; /* allow clicks to pass unless on the card */
}

.user-popout-card{
  width: 340px;
  max-width: calc(100vw - 24px);
  position: fixed;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: auto;
}

.user-popout-banner{
  height: 88px;
  background: linear-gradient(120deg, rgba(76, 184, 255, .55), rgba(170, 92, 255, .40));
}

.user-popout-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding: 10px 12px 0;
}

.user-popout-avatar{
  margin-top: -34px;
  border: 6px solid rgba(18,18,18,.85);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}

.user-popout-hero-actions{
  display:flex;
  gap:8px;
  padding-top: 6px;
}

.user-popout-body{
  padding: 10px 12px 12px;
}

.user-popout-name{
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  margin-top: 6px;
}

.user-popout-handle{
  color: rgba(255,255,255,.65);
  font-size: 13px;
  margin-top: 2px;
}

.user-popout-status{
  color: rgba(255,255,255,.75);
  font-size: 13px;
  margin-top: 8px;
  min-height: 16px;
}

.user-popout-role-row{ margin-top: 10px; }

.user-popout-role-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

.user-popout-role-pill::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--role-color, rgba(255,255,255,.55));
}

.user-popout-promo{
  margin-top: 12px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(168, 94, 255, .45);
  background: rgba(168, 94, 255, .12);
}

.user-popout-promo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 8px;
}

.user-popout-promo-title{
  font-weight: 800;
  font-size: 13px;
}

.user-popout-promo-btn{
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  margin-top: 8px;
}

.user-popout-promo-btn:hover{ background: rgba(0,0,0,.34); }

.user-popout-primary{
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 0;
  font-weight: 800;
  background: rgba(88, 101, 242, .90);
  color: white;
}

.user-popout-primary:hover{ filter: brightness(1.05); }


.user-full-tabs{
  display:flex;
  gap:22px;
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:0 0 10px 0;
}

.user-full-tab{
  color:rgba(255,255,255,.58);
  font-weight:900;
  font-size:14px;
  padding:0 0 10px 0;
  border-bottom:2px solid transparent;
}

.user-full-tab.is-active{
  color:#fff;
  border-bottom-color:#fff;
}

.user-full-panels{
  padding-top:18px;
  height:calc(100% - 42px);
  overflow:auto;
}

.user-full-activity-empty{
  background:transparent;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  text-align:center;
  padding:24px 10px;
}

.user-full-activity-title{
  font-size:16px;
  font-weight:900;
  color:#fff;
}
.user-full-activity-sub{
  max-width:520px;
  color:rgba(255,255,255,.70);
  font-weight:800;
  line-height:1.35;
}

.user-full-activity-empty .btn{
  margin-top:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  border-radius:8px;
  padding:8px 12px;
  font-weight:800;
}
.user-full-activity-empty .btn:hover{background:rgba(255,255,255,.10);}

.user-full-close{
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.user-full-close:hover{background:rgba(0,0,0,.38);}

/* responsive */
@media (max-width: 920px){
  .user-full-modal{width:calc(100vw - 24px) !important;}
  .user-full-grid{grid-template-columns: 1fr; height:auto;}
  .user-full-left{border-right:0; border-radius:10px 10px 0 0;}
  .user-full-right{border-radius:0 0 10px 10px;}
  .user-full-banner{border-radius:10px 10px 0 0;}
}



/* ===== Full Profile pixel match (v59) ===== */
.user-full-name-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.user-full-badges{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:2px;
}
.user-badge{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  background:rgba(0,0,0,.32);
  color:#b5bac1;
}
.user-badge .ub-i{width:14px;height:14px;display:block;}

.user-full-presence{
  margin-top:4px;
  font-size:12px;
  line-height:1.2;
  color:#b5bac1;
}
.user-full-custom-status{
  margin-top:6px;
  font-size:13px;
  line-height:1.25;
  color:#dbdee1;
  display:flex;
  align-items:center;
  gap:6px;
}
.user-full-custom-status .cs-dot{
  width:6px;height:6px;border-radius:50%;
  background:#3ba55d;
  flex:0 0 6px;
}
.user-full-custom-status .cs-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 260px;}

/* Buttons alignment */
.user-full-actions .btn-xs{
  height:32px;
  padding:0 12px;
  border-radius:4px;
  font-size:14px;
  font-weight:600;
  line-height:32px;
}
.user-full-actions .btn-xs.btn-with-icon{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.user-full-actions .btn-xs.btn-with-icon .i{
  width:16px;height:16px;
}
.user-full-actions .btn-xs.subtle.icon-only{
  width:32px;height:32px;
  padding:0;
  border-radius:4px;
}
.user-full-actions .btn-xs.subtle.icon-only svg{
  width:18px;height:18px;
}



/* DM call: expand center area (hide right sidebar) to match Discord */
.layout.is-dm-call .rightbar{
    display:none !important;
}
.layout.dc-layout.is-dm-call{
    grid-template-columns:72px 290px minmax(0,1fr) !important;
}

/* DM call (Discord-like) layout: stage in-flow (pushes chat down) + avatar mute badges */
.call-hud[data-layout="dm"]{
    display:block;
    position:relative !important;
    inset:auto !important;
    padding:0;
    margin:0;
    /* DM call sits as an in-chat panel (Discord-like), not a full takeover */
    height: min(300px, 44vh);
    z-index:3;
    pointer-events:auto;
}

/* Slightly taller when screenshare is active (still in-flow; chat remains visible below) */
.call-hud[data-layout="dm"].has-screen{
    height: min(360px, 52vh);
}

/* DM call panel resizer (drag bottom edge like Discord) */
.call-hud[data-layout="dm"] #nc-dmcall-resizer{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:18px;
  cursor: ns-resize;
  z-index: 30;
  /* Keep the grab area, but remove the visible bottom strip */
  background: transparent;
  pointer-events:auto;
  touch-action:none;
}
.call-hud[data-layout="dm"] #nc-dmcall-resizer::before{
  content:"";
  display:none;/* hide grab bar */ 
  position:absolute;
  left:50%;
  top:7px;
  transform:translateX(-50%);
  width:46px;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 1px 0 rgba(0,0,0,0.6);
  opacity:0.75;
}
.call-hud[data-layout="dm"]:hover #nc-dmcall-resizer::before{ opacity:0.95; }
.call-hud[data-layout="dm"].is-resizing #nc-dmcall-resizer::before{ opacity:1; }


/* Group/Voice call: when screenshare is active we want the same 3-tile row as in Discord
   (share + up to two participant tiles). */
.call-hud[data-layout="group"].has-screen .call-stage-main{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  align-content: center !important;
}
.call-hud[data-layout="group"].has-screen #call-participants{
  display: contents !important;
}
.call-hud[data-layout="group"].has-screen .call-screen-stage{
  width: auto !important;
  min-height: 260px !important;
}
.call-hud[data-layout="group"].has-screen .call-screen-stage .screen-share-frame{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(0,0,0,0.28) !important;
}
.call-hud[data-layout="group"].has-screen .participant-tile{
  min-height: 260px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(0,0,0,0.20) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.call-hud[data-layout="group"].has-screen .participant-name,
.call-hud[data-layout="group"].has-screen .participant-sub,
.call-hud[data-layout="group"].has-screen .voice-bars{
  display: none !important;
}
.call-hud[data-layout="group"].has-screen .participant-avatar{
  width: 92px !important;
  height: 92px !important;
  border-radius: 999px !important;
}
.call-hud[data-layout="dm"]::before{ display:none; }

.call-hud[data-layout="dm"]::before{ display:none; }

.call-hud[data-layout="dm"] .call-window{
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
    margin:0;
    border:none;
    border-radius:0;
    background:transparent;
    backdrop-filter:none;
    box-shadow:none;
    overflow:hidden;
    pointer-events:auto;
    display:flex;
    flex-direction:column;
}

.call-hud[data-layout="dm"] .call-top{ display:none; }

.call-hud[data-layout="dm"] .call-stage{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    background: transparent;
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,0.06);
    padding:0;
    position:relative;
}

/* DM call background: glass + theme gradient (matches global theme). */
.call-hud[data-layout="dm"] .call-stage::before{
    content:"";
    position:absolute;
    inset:-32px;
    background: var(--nc-theme-gradient, radial-gradient(1200px 520px at 20% 20%, rgba(0, 200, 180, 0.22), rgba(0,0,0,0)));
    opacity: var(--nc-theme-opacity, .65);
    filter: blur(18px) saturate(var(--nc-theme-sat, 1)) contrast(var(--nc-theme-contrast, 1));
    transform: scale(1.06);
    pointer-events:none;
    z-index:-1;
}

/* Ensure participant orbits sit ABOVE the stage background (Discord-like layering) */
.call-hud[data-layout="dm"] .call-stage{
    isolation:isolate; /* creates a clean stacking context so children are "on top" of the background */
}
.call-hud[data-layout="dm"] .call-stage::after{
    content:"";
    position:absolute;
    inset:0;
    /* subtle vignette to keep depth WITHOUT dimming avatars */
    background:
        radial-gradient(1100px 520px at 50% 35%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.22) 72%),
        radial-gradient(1200px 680px at 50% 100%, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.00) 62%);
    pointer-events:none;
    z-index:0;
}

/* When screensharing, do NOT render the DM stage blur/vignette layers.
   They can appear as a huge oval/circle overlay on top of the stream. */
.call-hud[data-layout="dm"].has-screen .call-stage::before,
.call-hud[data-layout="dm"].has-screen .call-stage::after{
    display:none !important;
    opacity:0 !important;
}

/* DM stage layering: keep background/vignette confirms behind participants */
.call-hud[data-layout="dm"] .call-stage-main{
    z-index: 1;
    overflow: visible; /* do not clip avatar rings/shadows */
}
.call-hud[data-layout="dm"] .call-participants{
    position: relative;
    z-index: 2;
}
.call-hud[data-layout="dm"] .participant-tile{
    position: relative;
    z-index: 2;
    overflow: visible;
    border-radius: 0;

}

.call-hud[data-layout="dm"] .call-stage-main{
    position:relative;
    z-index:2;
}
.call-hud[data-layout="dm"] .call-participants{
    position:relative;
    z-index:2;
}
.call-hud[data-layout="dm"] .participant-tile{
    position:relative;
    z-index:2;
}
/* Orbital shadow-disc to "seat" the circles onto the background */
.call-hud[data-layout="dm"] .participant-tile::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:142px;
    height:142px;
    border-radius:999px;
    background: radial-gradient(circle at 50% 55%, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.00) 72%);
    filter: blur(0.2px);
    z-index:0;
    pointer-events:none;
}
.call-hud[data-layout="dm"] .participant-avatar{ position:relative; z-index:1; }
.call-hud[data-layout="dm"] .participant-avatar::after{
    z-index:2;
}

.call-hud[data-layout="dm"] .call-stage-main{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:0 18px;
    padding-bottom:82px; /* space for controls bar */
}

.call-hud[data-layout="dm"] .call-participants{
    display:flex;
    justify-content:center;
    gap:24px;
    padding:0;
}

.call-hud[data-layout="dm"] .participant-tile{
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
}

/*
  DM stage: make circles read as ON TOP of the stage (Discord-like).
  We use a soft shadow-disc behind each avatar (the "orbit"), and we also
  make the avatar background more opaque so it doesn't look "under" the stage
  gradient.
*/
.call-hud[data-layout="dm"] .participant-tile::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:148px;
    height:148px;
    border-radius:999px;
    background:
        radial-gradient(circle at 50% 58%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.00) 72%),
        radial-gradient(circle at 50% 50%, rgba(0,255,214,0.10) 0%, rgba(0,255,214,0.00) 70%);
    filter: blur(0.6px);
    z-index:0;
    pointer-events:none;
}
.call-hud[data-layout="dm"] .participant-name,
.call-hud[data-layout="dm"] .participant-sub,
.call-hud[data-layout="dm"] .voice-bars{ display:none !important; }

.call-hud[data-layout="dm"] .participant-avatar{
    width:104px;
    height:104px;
    border-radius:999px;
    /* Make the avatar clearly sit ON TOP of the stage */
    border:1px solid rgba(255,255,255,0.18);
    background:
        radial-gradient(140px 120px at 32% 28%, rgba(0,255,214,0.20) 0%, rgba(0,255,214,0.00) 58%),
        radial-gradient(160px 140px at 74% 78%, rgba(76,124,255,0.18) 0%, rgba(76,124,255,0.00) 62%),
        radial-gradient(260px 220px at 50% 120%, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.00) 62%),
        linear-gradient(180deg, rgba(28,32,42,0.98), rgba(12,14,18,0.96));
    position:relative;
    /* IMPORTANT: speaking ring is rendered with ::after and must not be clipped */
    overflow:visible;
    transform: translateY(var(--lift, 0px)) translateZ(0) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
    will-change: transform, box-shadow, filter;
    transition: transform 130ms ease-out, box-shadow 130ms ease-out, filter 130ms ease-out;
    box-shadow:
        0 0 0 1px rgba(0,255,214,0.10),
        0 0 0 2px rgba(0,0,0,0.48),
        0 22px 64px rgba(0,0,0,0.72),
        0 0 var(--glow1, 0px) rgba(0,255,214,0.28),
        0 0 var(--glow2, 0px) rgba(76,124,255,0.20);
}

/* Subtle gloss + inner depth so the circle reads above the background */
.call-hud[data-layout="dm"] .participant-avatar::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:
        radial-gradient(120px 90px at 30% 25%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 62%);
    box-shadow:
        inset 0 0 0 1px rgba(0,255,214,0.10),
        inset 0 -18px 30px rgba(0,0,0,0.32);
    pointer-events:none;
    z-index:0;
}
.call-hud[data-layout="dm"] .participant-avatar > *{
    position:relative;
    z-index:0;
}

/* ...but keep the avatar clip wrapper absolute so it fills the circle */
.call-hud[data-layout="dm"] .participant-avatar .participant-avatar-inner{
    position:absolute;
    inset:0;
    z-index:0;
}

/* ensure mute/deafen badge sits above ring/glow */
.call-hud[data-layout="dm"] .participant-avatar .avatar-badge{ z-index:3; }

/* v55: DM call avatars should be SIMPLE circles (no glass tiles / no shadow-disc halos). */
.call-hud[data-layout="dm"] .participant-tile::before{
    content: none !important;
    display: none !important;
}

.call-hud[data-layout="dm"] .participant-avatar{
    /* remove glassy gradients */
    background: transparent !important;
    border: none !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.55) !important;
}

.call-hud[data-layout="dm"] .participant-avatar::before{
    content: none !important;
    display: none !important;
}

.call-hud[data-layout="dm"] .participant-avatar .participant-avatar-inner{
    border-radius: 999px;
    overflow: hidden;
}

/* speaking indicator: keep it subtle (outline only), no big halos */
.call-hud[data-layout="dm"] .participant-tile[data-speaking="1"] .participant-avatar::after{
    inset: -6px !important;
    border-width: 3px !important;
    box-shadow: none !important;
}

.call-hud[data-layout="dm"] .participant-tile.is-self .participant-avatar{
    box-shadow:
        0 0 0 2px rgba(0,255,214,0.28),
        0 0 0 6px rgba(0,0,0,0.72),
        0 14px 40px rgba(0,0,0,0.70);
}

.participant-avatar .participant-avatar-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Clip avatar media inside the circle without clipping speaking ring/orbit */
.participant-avatar .participant-avatar-inner{
    position:absolute;
    inset:0;
    border-radius:inherit;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Show initials unless the image has successfully loaded */
.participant-avatar .participant-avatar-initial{
    position:relative;
    z-index:2;
    transition:opacity 120ms ease;
}
.participant-avatar.has-avatar .participant-avatar-initial{
    opacity:0;
}

.participant-avatar .participant-avatar-initial{
    font-size:34px;
    font-weight:900;
    color:#fff;
}

.participant-avatar .avatar-badge{
    position:absolute;
    right:2px;
    bottom:2px;
    width:26px;
    height:26px;
    border-radius:999px;
    background:#ed4245;
    border:3px solid rgba(0,0,0,0.72);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 14px 30px rgba(0,0,0,0.55);
}

.participant-avatar .avatar-badge svg{
    width:15px;
    height:15px;
    display:block;
    stroke:#fff;
}

.call-hud[data-layout="dm"] .call-bottom{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    padding:0;
    margin:0;
    background:transparent;
    border:none;
    width:auto;
    display:flex;
    justify-content:center;
}

/* In DM layout we render a Discord-like control bar with split buttons */
.call-hud[data-layout="dm"] #call-controls-dm{ display:flex !important; justify-content:center; }
.call-hud[data-layout="dm"] #call-controls-dm[hidden]{ display:none !important; }

.call-hud[data-layout="dm"] .dm-call-bar{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-radius:999px;
    background:rgba(32,34,37,0.86);
    border:1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(10px);
    box-shadow:0 18px 44px rgba(0,0,0,0.55);
}

.call-hud[data-layout="dm"] .dm-split{
    display:flex;
    align-items:center;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.05);
}

.call-hud[data-layout="dm"] .dm-btn{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    color:inherit;
    cursor:pointer;
}

.call-hud[data-layout="dm"] .dm-btn .i{ width:18px; height:18px; }

.call-hud[data-layout="dm"] .dm-btn:hover{ background:rgba(255,255,255,0.06); }
.call-hud[data-layout="dm"] .dm-btn:active{ transform:translateY(0.5px); }

.call-hud[data-layout="dm"] .dm-btn.caret{
    width:28px;
    font-size:12px;
    border-left:1px solid rgba(255,255,255,0.10);
}

.call-hud[data-layout="dm"] .dm-btn.danger{
    width:54px;
    background:rgba(237,66,69,0.92);
    border:1px solid rgba(255,255,255,0.10);
    border-radius:16px;
}

.call-hud[data-layout="dm"] .dm-btn.danger:hover{ background:rgba(237,66,69,1); }

.call-hud[data-layout="dm"] .dm-btn.is-toggled,
.call-hud[data-layout="dm"] .dm-btn.toggled{
    background:rgba(237,66,69,0.24);
}

.call-hud[data-layout="dm"] .dm-btn[disabled]{
    opacity:0.45;
    cursor:not-allowed;
}

.call-hud[data-layout="dm"] #call-stage-empty{ display:none !important; }

/* DM call mini panel in DM sidebar bottom */
.voice-mini.dm-call-mini .voice-mini-conn-ico{
    background:rgba(0,255,214,0.18);
    border:1px solid rgba(0,255,214,0.28);
}

.call-hud[data-layout="dm"] .call-empty{ display:none !important; }

/* DM (Discord-like) control bar inside the stage */
.call-hud[data-layout="dm"] .call-bottom{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    padding:0;
    margin:0;
    background:transparent;
    border:none;
    width:auto;
    display:flex;
    justify-content:center;
    pointer-events:auto;
}

.call-hud[data-layout="dm"] .call-controls-outgoing{
    display:none !important;
}
.call-hud[data-layout="dm"] .call-controls-incoming{
    display:none !important;
}

/* DM incoming: show Answer/Decline like Discord */
.call-hud[data-layout="dm"][data-mode="incoming"] #call-controls-dm,
.call-hud[data-layout="dm"][data-mode="incoming"] .call-controls-main{
    display:none !important;
}
.call-hud[data-layout="dm"][data-mode="incoming"] .call-controls-incoming{
    display:flex !important;
    position:absolute;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    padding:10px 12px;
    border-radius:14px;
    background:rgba(32,34,37,0.92);
    border:1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(10px);
    box-shadow:0 18px 44px rgba(0,0,0,0.55);
    gap:10px;
    z-index:5;
}
.call-hud[data-layout="dm"][data-mode="incoming"] .call-controls-incoming .call-cta{
    height:40px;
    padding:0 12px;
    border-radius:12px;
}
.call-hud[data-layout="dm"][data-mode="incoming"] .call-controls-incoming .call-cta-text{
    display:inline-block;
    font-weight:700;
    letter-spacing:.2px;
}
.call-hud[data-layout="dm"][data-mode="incoming"] .call-stage-main{
    padding-bottom:18px;
}

.call-hud[data-layout="dm"] .call-controls-main{
    display:flex !important;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(20,20,20,0.92);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 10px 40px rgba(0,0,0,0.55);
}

.call-hud[data-layout="dm"] .call-control{
    width:40px;
    height:40px;
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.10);
}

.call-hud[data-layout="dm"] .call-control:hover{
    background:rgba(255,255,255,0.10);
}

.call-hud[data-layout="dm"] .call-control.danger{
    width:48px;
    background:rgba(237,66,69,0.95);
    border-color:rgba(237,66,69,1);
}
.call-hud[data-layout="dm"] .call-control.danger:hover{
    filter:brightness(1.05);
}

/* toggled states */
.call-hud[data-layout="dm"] .call-control.is-on{
    background:rgba(80,200,120,0.18);
    border-color:rgba(80,200,120,0.35);
}
.call-hud[data-layout="dm"] .call-control.is-off{
    background:rgba(237,66,69,0.18);
    border-color:rgba(237,66,69,0.35);
}

/* Discord-like mute/deafen badge on avatars */
.participant-avatar .avatar-badge{
    position:absolute;
    right:-4px;
    bottom:-4px;
    width:22px;
    height:22px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #000;
    box-shadow:0 6px 18px rgba(0,0,0,0.55);
}
.participant-avatar .avatar-badge svg{
    width:14px;
    height:14px;
    stroke:#fff;
}
.participant-avatar .avatar-badge.mic{ background:#ed4245; }
.participant-avatar .avatar-badge.deaf{ background:#5865f2; }

/* In DM, toggled mic/deafen should look like Discord (red-ish) */
.call-hud[data-layout="dm"] #btn-toggle-mic.toggled{
    background:rgba(237,66,69,0.25);
    border-color:rgba(237,66,69,0.55);
}
.call-hud[data-layout="dm"] #btn-toggle-sound.toggled{
    background:rgba(237,66,69,0.25);
    border-color:rgba(237,66,69,0.55);
}



/* DM call controls – Discord-like pill in Neon Pulsar palette */
.call-hud[data-layout="dm"] .call-controls-main{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(8,18,36,0.86), rgba(8,68,78,0.72));
  border: 1px solid rgba(0, 220, 200, 0.18);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  z-index:6;
}
.call-hud[data-layout="dm"] .call-controls-main::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:16px;
  padding:1px;
  background: linear-gradient(135deg, rgba(0, 220, 200, 0.55), rgba(70, 120, 255, 0.42));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:0.55;
}
.call-hud[data-layout="dm"] .call-control{
  width:40px;
  height:40px;
  border-radius:12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.call-hud[data-layout="dm"] .call-control:hover{
  background: rgba(255,255,255,0.10);
}
.call-hud[data-layout="dm"] .call-control.active{
  background: rgba(0, 220, 200, 0.14);
  border-color: rgba(0, 220, 200, 0.30);
}

/* === User request: remove nickname overlays, remove three-dots, remove glass bar background === */
/* 1) No nickname overlay on tiles */
.tile-name-badge{ display:none !important; }
.voice-participant .vp-tag{ display:none !important; }

/* 2) Remove three-dots buttons on tiles */
.tile-more-btn,
.vp-more-btn{ display:none !important; }

/* 3) Remove three-dots in call control bar */
#btn-more,
.call-control.more,
.call-control.btn-more{ display:none !important; }

/* 4) Make the DM call controls bar non-glassy (no pill background) */
.call-hud[data-layout="dm"] .call-controls-main{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  /* Keep some hit-area so the bar can be dragged like Discord */
  padding: 8px 10px !important;
  transform: translate3d(-50%, 0, 0) translate3d(0, var(--nc-callbar-y, 0px), 0) !important;
  cursor: grab;
  touch-action: none;
}
.call-hud[data-layout="dm"] .call-controls-main::before{ display:none !important; }
.call-hud[data-layout="dm"] .call-controls-main.dragging{
  cursor: grabbing;
  user-select: none;
}
.call-hud[data-layout="dm"] .call-controls-main.dragging{ cursor: grabbing; user-select:none; }

#nc-callbar-dragzone{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:64px;
  cursor: ns-resize;
  background: transparent;
  z-index:5; /* under call-controls-main (z-index:6) */
  pointer-events:auto;
  touch-action:none;
}
.call-hud[data-layout="dm"] .call-control.danger{
  background: rgba(237, 66, 69, 0.18);
  border-color: rgba(237, 66, 69, 0.32);
}



/* Incoming call modal – Neon Pulsar palette */
#modal-incoming-call .modal{
  border-radius:18px;
  background: linear-gradient(135deg, rgba(8,18,36,0.92), rgba(8,68,78,0.82));
  border: 1px solid rgba(0, 220, 200, 0.20);
  box-shadow: 0 24px 90px rgba(0,0,0,0.65);
}
#modal-incoming-call .modal-header{
  background: linear-gradient(90deg, rgba(0, 220, 200, 0.14), rgba(70, 120, 255, 0.10));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#modal-incoming-call .btn-primary{
  background: linear-gradient(135deg, rgba(0, 220, 200, 0.92), rgba(70, 120, 255, 0.55));
  border: none;
}
#modal-incoming-call .btn-primary:hover{
  filter: brightness(1.05);
}
#modal-incoming-call .btn{
  border: 1px solid rgba(255,255,255,0.10);
}


.call-hud[data-layout="dm"] .call-control.ghost{
  opacity:0.55;
}
.call-hud[data-layout="dm"] .call-control.ghost:disabled{
  cursor:not-allowed;
}


/* ===== v83: DM call orbit alignment (circles must sit ON the stage) ===== */
.call-hud[data-layout="dm"] .participant-tile::before{ content:none !important; }

.call-hud[data-layout="dm"] .participant-avatar{
    overflow: visible !important; /* allow orbit/ring to extend without clipping */
}

/* Orbit disc is anchored to the avatar itself (not the tile) so it never drifts */
.call-hud[data-layout="dm"] .participant-avatar .avatar-orbit{
    position:absolute;
    left:50%;
    top:calc(50% + 14px); /* pedestal sits slightly below the avatar, like Discord */
    width:172px;
    height:172px;
    transform:translate(-50%,-50%);
    border-radius:999px;
    background:
        radial-gradient(circle at 50% 62%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.00) 66%),
        radial-gradient(circle at 50% 50%, rgba(0,255,214,0.18) 0%, rgba(0,255,214,0.00) 70%),
        radial-gradient(circle at 50% 50%, rgba(76,124,255,0.14) 0%, rgba(76,124,255,0.00) 74%);
    filter: blur(1.2px);
    box-shadow:
        0 26px 60px rgba(0,0,0,0.70),
        0 0 0 1px rgba(255,255,255,0.06);
    pointer-events:none;
    z-index:-1;
}

/* When speaking, slightly “wake up” the orbit so it feels attached to the ring */
.call-hud[data-layout="dm"] .participant-tile[data-speaking="1"] .participant-avatar .avatar-orbit{
    box-shadow:
        0 18px 44px rgba(0,0,0,0.55),
        0 0 0 1px rgba(0,255,214,0.10),
        0 0 34px rgba(0,255,214,0.16);
}


/* === DM call: Discord-like circles (ensure avatars sit above the stage; remove "seating disc") === */
.call-hud[data-layout="dm"] .call-stage,
.call-hud[data-layout="dm"] .call-stage-main{
    overflow: visible;
}

.call-hud[data-layout="dm"] .participant-tile::before{
    display:none !important;
    content:none !important;
}

.call-hud[data-layout="dm"] .participant-avatar{
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 10px 26px rgba(0,0,0,0.55));
}


/* === Incoming call modal (round Discord-like buttons) === */
#modal-incoming-call.modal-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 14px;
  background: rgba(0,0,0,0.55);
  z-index: 30000;
}

#modal-incoming-call.modal-backdrop.active{
  display: flex;

    z-index:30050;
}

/* Force incoming call modal above any other overlays (theme preview, call HUD, etc.) */
#modal-incoming-call.modal-backdrop,
#modal-incoming-call.modal-backdrop.active{
  z-index: 999999 !important;
}

#modal-incoming-call.modal-backdrop.active{
  display:flex !important;
  pointer-events:auto !important;
}

.incoming-call-card{
  width: min(640px, calc(100vw - 28px));
  border-radius: 22px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(1100px 420px at 12% 0%, rgba(120,255,220,0.10), transparent 55%),
    radial-gradient(900px 360px at 95% 0%, rgba(120,120,255,0.12), transparent 50%),
    linear-gradient(135deg, rgba(18,20,40,0.92), rgba(12,14,30,0.96));
  backdrop-filter: blur(24px);
  box-shadow: 0 30px 90px rgba(0,0,0,0.65);
}

.incoming-call-header{
  display: flex;
  align-items: center;
  gap: 14px;
}

.incoming-call-avatar{
  position: relative;
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
}

.incoming-call-avatar-ring{
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: conic-gradient(from 180deg,
    rgba(68, 230, 200, 0.55),
    rgba(112, 118, 255, 0.55),
    rgba(255, 99, 190, 0.45),
    rgba(68, 230, 200, 0.55)
  );
  opacity: 0.95;
  animation: incomingCallSpin 2.8s linear infinite;
}

@keyframes incomingCallSpin{
  to { transform: rotate(360deg); }
}

.incoming-call-avatar-inner{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.incoming-call-avatar-fallback{
  font-weight: 900;
  font-size: 22px;
  color: rgba(255,255,255,0.94);
  text-transform: uppercase;
}

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

.incoming-call-kicker{
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.incoming-call-title{
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.incoming-call-sub{
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}

.incoming-call-actions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.call-round{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.95);
  box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}

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

.call-round:active{
  transform: translateY(0px) scale(0.98);
}

.call-round-decline{
  background: rgba(237,66,69,0.96);
}

.call-round-accept{
  background: rgba(35,165,90,0.96);
}

@media (max-width: 420px){
  .incoming-call-card{ padding: 16px 14px 14px; }
  .incoming-call-actions{ justify-content: space-between; }
  .call-round{ width: 54px; height: 54px; }
}



/* =========================
   Incoming call modal v2
   (Discord-like: compact, premium, round actions)
   ========================= */
#modal-incoming-call.modal-backdrop{
  align-items:center;
  justify-content:center;
  padding:24px 12px;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(0,255,214,0.14), transparent 55%),
    radial-gradient(900px 500px at 90% 12%, rgba(106,124,255,0.16), transparent 55%),
    rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}

#modal-incoming-call.modal-backdrop.active .incoming-call-card{
  animation: incCallIn 220ms ease-out both;
}

@keyframes incCallIn{
  from{ transform: translateY(10px) scale(0.985); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

#modal-incoming-call .incoming-call-card{
  width:min(560px, calc(100vw - 24px));
  border-radius:26px;
  padding:18px 18px 14px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 420px at 10% 0%, rgba(0,255,214,0.10), transparent 62%),
    radial-gradient(900px 360px at 95% 0%, rgba(106,124,255,0.12), transparent 58%),
    linear-gradient(135deg, rgba(10,14,28,0.94), rgba(8,34,42,0.92));
  box-shadow:
    0 34px 110px rgba(0,0,0,0.72),
    0 0 0 1px rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(24px);
}

#modal-incoming-call .incoming-call-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:28px;
  background: conic-gradient(from 180deg,
    rgba(0,255,214,0.55),
    rgba(106,124,255,0.55),
    rgba(255,91,190,0.40),
    rgba(0,255,214,0.55)
  );
  opacity:0.35;
  filter: blur(10px);
  pointer-events:none;
}

#modal-incoming-call .incoming-call-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 22% 18%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(520px 180px at 82% 12%, rgba(255,255,255,0.06), transparent 60%);
  opacity:0.55;
  pointer-events:none;
}

#modal-incoming-call .incoming-call-header{
  display:flex;
  gap:14px;
  align-items:center;
  position:relative;
  z-index:1;
}

#modal-incoming-call .incoming-call-avatar{
  position:relative;
  width:76px;
  height:76px;
  flex:0 0 76px;
}

#modal-incoming-call .incoming-call-avatar-ring{
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background: conic-gradient(from 90deg,
    rgba(0,255,214,0.60),
    rgba(106,124,255,0.55),
    rgba(255,91,190,0.45),
    rgba(0,255,214,0.60)
  );
  opacity:0.95;
  animation: incRingSpin 3.2s linear infinite, incRingPulse 1.2s ease-in-out infinite;
  filter: saturate(1.1);
}

@keyframes incRingSpin{
  to{ transform: rotate(360deg); }
}
@keyframes incRingPulse{
  0%,100%{ opacity:0.85; filter: blur(0px); }
  50%{ opacity:1; filter: blur(0.2px); }
}

#modal-incoming-call .incoming-call-avatar-inner{
  position:absolute;
  inset:0;
  border-radius:999px;
  background: rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,255,214,0.10);
}

#modal-incoming-call .incoming-call-avatar-inner::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:999px;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.12), transparent 55%);
  pointer-events:none;
}

#modal-incoming-call .incoming-call-avatar-fallback{
  font-weight:900;
  font-size:22px;
  color: rgba(255,255,255,0.96);
  letter-spacing:0.2px;
  text-transform:uppercase;
  text-shadow: 0 10px 26px rgba(0,0,0,0.55);
}

#modal-incoming-call .incoming-call-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  position:relative;
  z-index:1;
}

#modal-incoming-call .incoming-call-kicker{
  font-size:11px;
  color: rgba(255,255,255,0.65);
  letter-spacing:0.32px;
  text-transform:uppercase;
}

#modal-incoming-call .incoming-call-title{
  font-size:20px;
  font-weight:900;
  line-height:1.1;
  color: rgba(255,255,255,0.98);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#modal-incoming-call .incoming-call-sub{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: rgba(255,255,255,0.62);
}

#modal-incoming-call .incoming-call-sub-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(0,255,214,0.78);
  box-shadow: 0 0 0 3px rgba(0,255,214,0.10);
}

#modal-incoming-call .incoming-call-dots{
  margin-left:4px;
  display:inline-flex;
  gap:4px;
  align-items:center;
  opacity:0.75;
}

#modal-incoming-call .incoming-call-dots i{
  width:4px;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,0.72);
  display:inline-block;
  animation: incDots 1.0s ease-in-out infinite;
}

#modal-incoming-call .incoming-call-dots i:nth-child(2){ animation-delay: 120ms; }
#modal-incoming-call .incoming-call-dots i:nth-child(3){ animation-delay: 240ms; }

@keyframes incDots{
  0%,100%{ transform: translateY(0); opacity:0.55; }
  50%{ transform: translateY(-2px); opacity:1; }
}

#modal-incoming-call .incoming-call-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:18px;
  position:relative;
  z-index:1;
}

#modal-incoming-call .call-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

#modal-incoming-call .call-round-label{
  font-size:12px;
  color: rgba(255,255,255,0.70);
  letter-spacing:0.2px;
}

#modal-incoming-call .call-round{
  width:64px;
  height:64px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  position:relative;
  overflow:hidden;
}

#modal-incoming-call .call-round::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 55%);
  transform: rotate(15deg);
  pointer-events:none;
}

#modal-incoming-call .call-round:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 22px 54px rgba(0,0,0,0.60);
  filter: saturate(1.05);
}

#modal-incoming-call .call-round:active{
  transform: translateY(0) scale(0.98);
}

#modal-incoming-call .call-round-accept{
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.14), transparent 58%),
              linear-gradient(135deg, rgba(37,196,120,0.96), rgba(25,130,90,0.92));
}

#modal-incoming-call .call-round-accept::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  box-shadow: 0 0 0 6px rgba(37,196,120,0.14), 0 0 38px rgba(37,196,120,0.24);
  pointer-events:none;
}

#modal-incoming-call .call-round-decline{
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.14), transparent 58%),
              linear-gradient(135deg, rgba(237,66,69,0.96), rgba(158,30,40,0.92));
}

#modal-incoming-call .call-round-decline::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  box-shadow: 0 0 0 6px rgba(237,66,69,0.14), 0 0 38px rgba(237,66,69,0.22);
  pointer-events:none;
}

/* Mobile – keep it tight */
@media (max-width: 420px){
  #modal-incoming-call .incoming-call-card{ padding:16px 14px 12px; border-radius:24px; }
  #modal-incoming-call .incoming-call-avatar{ width:68px; height:68px; flex-basis:68px; }
  #modal-incoming-call .incoming-call-title{ font-size:18px; }
  #modal-incoming-call .incoming-call-actions{ justify-content:space-around; }
}



/* === Call ended modal (premium) === */

#modal-call-ended.modal-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 14px;
  z-index: 30000;
  background:
    radial-gradient(1000px 520px at 18% 12%, rgba(0,255,214,0.14), transparent 55%),
    radial-gradient(900px 520px at 88% 10%, rgba(106,124,255,0.16), transparent 55%),
    rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}
#modal-call-ended.modal-backdrop.active{ display:flex; 
    z-index:30050;
}

#modal-call-ended.modal-backdrop.active .call-ended-card{ animation: callEndedIn 220ms ease-out both; }

@keyframes callEndedIn{
  from{ transform: translateY(10px) scale(0.985); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

.call-ended-card{
  width: min(520px, calc(100vw - 28px));
  border-radius: 26px;
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(900px 340px at 18% 0%, rgba(0,255,214,0.10), transparent 62%),
    radial-gradient(760px 320px at 92% 0%, rgba(106,124,255,0.10), transparent 60%),
    linear-gradient(135deg, rgba(10,14,28,0.94), rgba(8,34,42,0.92));
  backdrop-filter: blur(24px);
  box-shadow:
    0 34px 110px rgba(0,0,0,0.72),
    0 0 0 1px rgba(255,255,255,0.08);
}

.call-ended-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:28px;
  background: conic-gradient(from 180deg,
    rgba(0,255,214,0.50),
    rgba(106,124,255,0.50),
    rgba(255,91,190,0.34),
    rgba(0,255,214,0.50)
  );
  opacity:0.22;
  filter: blur(12px);
  pointer-events:none;
}

.call-ended-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(560px 220px at 20% 18%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(520px 200px at 84% 14%, rgba(255,255,255,0.06), transparent 60%);
  opacity:0.55;
  pointer-events:none;
}

.call-ended-content{
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.call-ended-head{
  display:flex;
  align-items: center;
  gap: 12px;
}

.call-ended-icon{
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.94);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 55%),
    rgba(237,66,69,0.92);
  box-shadow:
    0 18px 46px rgba(0,0,0,0.60),
    0 0 0 1px rgba(255,255,255,0.14);
}

.call-ended-texts{ min-width: 0; }

.call-ended-title{
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,0.96);
  line-height: 1.15;
}

.call-ended-sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.66);
}

.call-ended-message{
  font-size: 13px;
  color: rgba(255,255,255,0.80);
  line-height: 1.35;
}

.call-ended-actions{
  display:flex;
  justify-content:flex-end;
}

.call-ended-ok{
  border: none;
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color: rgba(255,255,255,0.96);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(135deg, rgba(0,255,214,0.28), rgba(106,124,255,0.24));
  box-shadow:
    0 14px 36px rgba(0,0,0,0.52),
    0 0 0 1px rgba(255,255,255,0.12);
}

.call-ended-ok:hover{ transform: translateY(-1px); }
.call-ended-ok:active{ transform: translateY(0) scale(0.985); }

@media (max-width: 420px){
  .call-ended-card{ padding: 14px 14px 12px; border-radius: 24px; }
  .call-ended-icon{ width: 44px; height: 44px; flex-basis:44px; }
  .call-ended-actions{ justify-content: stretch; }
  .call-ended-ok{ width: 100%; justify-content:center; }
}



/* ==========================================================
   Chat UI Premium (Discord-ish) – 2026-01-11
   ========================================================== */

.chat-main{
  position:relative;
  border-radius:22px;
  overflow:hidden;
}

/* Header */
.chat-header{
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(122,243,255,0.10), transparent 55%),
    radial-gradient(700px 240px at 90% 0%, rgba(255,124,251,0.10), transparent 55%),
    linear-gradient(180deg, rgba(8,10,20,0.72), rgba(8,10,20,0.18));
  backdrop-filter: blur(18px);
}

.chat-header .channel-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.chat-header .channel-title{
  font-size:14px;
  font-weight:850;
  letter-spacing:0.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#typing-indicator{
  margin-left:10px;
  font-size:12px;
  color: rgba(255,255,255,0.60);
}

/* Messages area */
.chat-messages{
  position:relative;
  padding:14px 14px 12px;
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(20,255,210,0.07), transparent 60%),
    radial-gradient(900px 450px at 100% 40%, rgba(255,120,245,0.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.18));
}

/* nicer scrollbars */
.chat-messages::-webkit-scrollbar{ width:10px; }
.chat-messages::-webkit-scrollbar-track{ background:transparent; }
.chat-messages::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.10);
  border-radius:999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.chat-messages::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.18); }

/* Placeholder */
.chat-messages .placeholder{
  margin-top:22px;
  padding:18px 14px;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.62);
}

/* -------------------------------------------------------------------------
   DM intro (Discord-like) when the DM history is empty.
   ------------------------------------------------------------------------- */
.dm-intro{
  margin-top: 18px;
  padding: 10px;
}

.dm-intro-left{
  max-width: 560px;
}

.dm-intro-avatar{
  width: 84px;
  height: 84px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.dm-intro-name{
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.05;
  color: rgba(255,255,255,0.92);
}

.dm-intro-handle{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.62);
}

.dm-intro-start{
  margin-top: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.58);
}

.dm-intro-rel{
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

.dm-intro-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dm-intro-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  border-radius: 10px;
  padding: 9px 14px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.dm-intro-btn:hover{
  background: rgba(255,255,255,0.09);
}

.dm-intro-btn:disabled{
  opacity: .55;
  cursor: default;
}

.dm-intro-btn.primary{
  background: rgba(88,101,242,0.85);
  border-color: rgba(88,101,242,0.45);
}

.dm-intro-btn.primary:hover{
  background: rgba(88,101,242,0.95);
}

.dm-intro-wave{
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.84);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.dm-intro-wave:hover{
  background: rgba(255,255,255,0.07);
}

/* Message rows */
.msg-row{
  margin:10px 2px;
  gap:12px;
}

.msg-row.pop{ will-change: transform, opacity; }

.msg-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  background: linear-gradient(135deg, rgba(122,243,255,0.48), rgba(255,124,251,0.34));
}

.msg-row.compact{
  margin-top:3px;
}
.msg-row.compact .msg-avatar{
  opacity:0;
  pointer-events:none;
}

/* Header inside message */
.msg-head{
  margin:0 0 6px 2px;
}
.msg-user{
  font-size:12.5px;
  font-weight:900;
  color: rgba(255,255,255,0.92);
}
.msg-time{
  font-size:11px;
  color: rgba(255,255,255,0.46);
}

/* Bubble */
.msg-bubble{
  max-width: min(680px, 78vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(500px 180px at 20% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.22));
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}

.msg-row.mine .msg-bubble{
  border-color: rgba(122,243,255,0.22);
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(122,243,255,0.16), transparent 60%),
    radial-gradient(700px 240px at 90% 0%, rgba(255,124,251,0.14), transparent 60%),
    linear-gradient(180deg, rgba(10,12,26,0.22), rgba(0,0,0,0.26));
}

.msg-row:hover .msg-bubble{
  border-color: rgba(255,255,255,0.18);
}

/* receipts inside header keep subtle */
.msg-receipt{
  opacity: 0.75;
}

/* Composer (input bar) */
.chat-input{
  position:relative;
  overflow:hidden;
  padding:12px 14px 14px;
  margin:10px 12px 12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.24));
  backdrop-filter: blur(var(--nc-glass-blur, 18px));
  box-shadow: 0 18px 50px rgba(0,0,0,0.34);
}

.chat-input::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:var(--nc-theme-gradient);
  opacity:var(--nc-panel-tint, 0.42);
  filter:saturate(1.6) contrast(1.04);
  pointer-events:none;
}

.chat-input::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,0.12), transparent 60%);
  opacity:0.55;
  pointer-events:none;
}

.composer{
  gap:10px;
  align-items:flex-end;
}

.composer-attach,
.emoji-insert-btn{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}
.composer-attach:hover,
.emoji-insert-btn:hover{ background: rgba(255,255,255,0.10); }

#message-input{
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,0.05), transparent 60%),
    rgba(0,0,0,0.28);
  padding:12px 14px;
  min-height:44px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

#message-input:focus{
  border-color: rgba(122,243,255,0.45);
  box-shadow: 0 0 0 3px rgba(122,243,255,0.12), 0 12px 28px rgba(0,0,0,0.22);
}

/* Send button (if class exists) */
.btn-send, #btn-send{
  height:44px;
  min-width:44px;
  padding:0 14px;
  border-radius:16px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.30);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height:1;
}



/* ===========================
   Chat UX pack v2 (Discord-ish)
   =========================== */
.msg-row{ position: relative; }
.msg-body{ position: relative; }

/* Hover actions bar */
.msg-actions{
  position:absolute;
  top:-10px;
  right:10px;
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.24);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
  opacity:0;
  pointer-events:none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
  z-index: 8;
}
.msg-row:hover .msg-actions,
.msg-row:focus-within .msg-actions{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

.msg-act{
  width:34px;
  height:34px;
  border-radius:12px;
  border:none;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}
.msg-act:hover{ background: rgba(255,255,255,0.10); transform: translateY(-1px); }
.msg-act:active{ transform: translateY(0); }
.msg-act .i{ width:18px; height:18px; }

.msg-act.danger{ background: rgba(237,66,69,0.16); color: rgba(255,255,255,0.92); }
.msg-act.danger:hover{ background: rgba(237,66,69,0.26); }

/* Better grouping (compact rows) */
.msg-row.compact{ margin-top:2px; }
.msg-row.compact .msg-bubble{ border-top-left-radius:14px; border-top-right-radius:14px; }
.msg-row.mine.compact .msg-bubble{ border-top-left-radius:14px; border-top-right-radius:14px; }

/* Show time only on hover for compact rows (keeps chat cleaner) */
.msg-row.compact .msg-time{ display:none; }
.msg-row.compact:hover .msg-time{ display:inline; }


/* =============================
   Discord-ish Chat Theme v3
   ============================= */

/* Center panel background like Discord */
.dc-layout .chat-main.glass-card{
  background: #313338 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Header bar */
.dc-layout .chat-header{
  height: 48px;
  padding: 0 16px;
  background: #2b2d31 !important;
  border-bottom: 1px solid #1f2124 !important;
}
.dc-layout .chat-header .channel-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--nc-dc-text) !important;
}
.dc-layout .chat-header-actions .icon-btn{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--nc-dc-muted);
}
.dc-layout .chat-header-actions .icon-btn:hover{
  background: var(--nc-dc-hover-bg);
  color: var(--nc-dc-text);
}

/* Messages scene */
.dc-layout .chat-messages{
  padding: 14px 0 12px !important;
  background: #313338 !important;
}

/* When a custom theme is active, tint Discord-like panels with the theme gradient
   (this is what makes Neon Chat match Discord's theme preview feel). */
body.nc-theme-tinted .dc-layout .chat-main.glass-card,
body.nc-theme-preview-open .dc-layout .chat-main.glass-card,
body.nc-theme-tinted .dc-layout .sidebar.glass-card,
body.nc-theme-preview-open .dc-layout .sidebar.glass-card,
body.nc-theme-tinted .dc-layout .rightbar.glass-card,
body.nc-theme-preview-open .dc-layout .rightbar.glass-card{
  background: var(--nc-dc-panel-bg) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: 0 0 40px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(var(--nc-glass-blur, 26px)) !important;
  position: relative;
  overflow: hidden;
}
body.nc-theme-tinted .dc-layout .chat-main.glass-card::before,
body.nc-theme-preview-open .dc-layout .chat-main.glass-card::before,
body.nc-theme-tinted .dc-layout .sidebar.glass-card::before,
body.nc-theme-preview-open .dc-layout .sidebar.glass-card::before,
body.nc-theme-tinted .dc-layout .rightbar.glass-card::before,
body.nc-theme-preview-open .dc-layout .rightbar.glass-card::before{
  content:"";
  position:absolute;
  inset:-120px;
  background: var(--nc-theme-gradient);
  opacity: var(--nc-panel-tint, 0.42);
  filter:saturate(1.35) contrast(1.02);
  pointer-events:none;
}

body.nc-theme-tinted .dc-layout .chat-header,
body.nc-theme-preview-open .dc-layout .chat-header{
  background: var(--nc-dc-header-bg) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  backdrop-filter: blur(var(--nc-glass-blur, 26px)) !important;
}

body.nc-theme-tinted .dc-layout .chat-messages,
body.nc-theme-preview-open .dc-layout .chat-messages{
  background: var(--nc-dc-messages-bg) !important;
}

/* Discord-like message rows (no speech bubbles, full width) */
.dc-layout .msg-row{
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 2px 0 !important;
  padding: 4px 16px !important;
  border-radius: 8px;
}

/* In Discord, your messages are not right-aligned in channel view */
.dc-layout .msg-row.mine{
  justify-content: flex-start !important;
  flex-direction: row !important;
}

.dc-layout .msg-row:hover{
  background: var(--nc-dc-hover-bg);
}

.dc-layout .msg-avatar{
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
  background: var(--nc-dc-avatar-bg);
  color: var(--nc-dc-text);
  font-weight: 700;
}

/* Compact grouping: hide avatar but keep left gutter */
.dc-layout .msg-row.compact{
  padding-left: 68px !important; /* 16 + 40 + 12 */
}
.dc-layout .msg-row.compact .msg-avatar{
  display: none !important;
}

.dc-layout .msg-body{
  max-width: none !important;
  width: 100%;
}

.dc-layout .msg-head{
  margin: 0 0 2px 0 !important;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dc-layout .msg-user{
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--nc-dc-text) !important;
}

.dc-layout .msg-time{
  font-size: 12px !important;
  color: var(--nc-dc-time) !important;
}

/* Message text without bubble */
.dc-layout .msg-bubble{
  max-width: none !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  color: var(--nc-dc-body-text) !important;
  line-height: 1.375;
  white-space: pre-wrap;
}

.dc-layout .msg-row.mine .msg-bubble{
  color: var(--nc-dc-body-text) !important;
}

/* Attachments: big image with subtle border */
.dc-layout .msg-attachments{ margin-top: 6px; }

.dc-layout .msg-image-card{
  background: transparent;
}

.dc-layout .msg-image{
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.08);
  max-width: min(600px, calc(100vw - 420px));
  height: auto;
}

/* Hide attachment action buttons until hover (Discord vibe) */
.dc-layout .msg-att-actions{
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.dc-layout .msg-image-card:hover .msg-att-actions,
.dc-layout .msg-file-card:hover .msg-att-actions{
  opacity: 1;
  transform: translateY(0);
}

/* Hover toolbar like Discord */
.dc-layout .msg-actions{
  top: -12px;
  right: 18px;
  border-radius: 10px;
  background: var(--nc-dc-toolbar-bg);
  border: 1px solid var(--nc-dc-toolbar-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}
.dc-layout .msg-act{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  color: var(--nc-dc-muted);
}
.dc-layout .msg-act:hover{
  background: var(--nc-dc-hover-bg);
  color: var(--nc-dc-text);
  transform: none;
}

/* Composer like Discord */
.dc-layout .chat-input{
  padding: 10px 16px 16px !important;

  /* Glassy input bar (Discord-like) */
  margin: 10px 12px 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

  /* Theme wash + dark glass */
  background:
    radial-gradient(1000px 240px at 30% 0%, rgba(255,255,255,0.07), transparent 60%),
    linear-gradient(180deg, rgba(6,8,16,0.18), rgba(6,8,16,0.72)),
    var(--nc-theme-gradient, linear-gradient(135deg, rgba(0,245,160,0.18), rgba(255,124,251,0.14))) !important;
  background-blend-mode: overlay, normal, normal;

  backdrop-filter: blur(var(--nc-glass-blur, 26px)) saturate(1.15) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.45) !important;
}

.dc-layout .composer{
  gap: 10px;
  align-items: center;
}

.dc-layout .composer-attach,
.dc-layout .emoji-insert-btn{
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: none !important;
  background: var(--nc-dc-hover-bg) !important;
  box-shadow: none !important;
  color: var(--nc-dc-muted);
}

.dc-layout .composer-attach:hover,
.dc-layout .emoji-insert-btn:hover{
  background: var(--nc-dc-hover-bg) !important;
  color: var(--nc-dc-text);
}

.dc-layout #message-input{
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,0.06), transparent 60%),
    rgba(0,0,0,0.20) !important;
  color: var(--nc-dc-body-text) !important;
  padding: 12px 14px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.30) !important;
  backdrop-filter: blur(calc(var(--nc-glass-blur, 26px) * 0.55)) saturate(1.10) !important;
}

.dc-layout #message-input::placeholder{ color: var(--nc-dc-input-placeholder); }

/* Send button: icon-only, Discord-ish */
.dc-layout #btn-send{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  padding: 0;
  min-width: 40px;
}
.dc-layout #btn-send span{ display:none; }
.dc-layout #btn-send .i{ width: 18px; height: 18px; }



/* --- Chat: Discord-like date separators + system call events --- */
.date-sep{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 18px 0 10px;
  height: 24px;
  user-select:none;
}
.date-sep::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:1px;
  background: rgba(255,255,255,0.08);
  transform: translateY(-50%);
}
.date-sep-label{
  position: relative;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.65);
  background: rgba(18,20,26,0.92);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.sys-call-group{
  margin: 10px 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}

.sys-call-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
}

.sys-call-item + .sys-call-item{
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sys-call-ico{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(120,255,220,0.10);
  border: 1px solid rgba(120,255,220,0.20);
  color: rgba(220,255,245,0.95);
  flex: 0 0 28px;
  font-size: 14px;
}
.sys-call-text{
  min-width:0;
  flex:1 1 auto;
  font-size: 13px;
  color: rgba(255,255,255,0.84);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.sys-call-text strong{
  color: rgba(255,255,255,0.95);
  font-weight: 700;
}
.sys-call-time{
  flex:0 0 auto;
  font-size: 11px;
  color: rgba(255,255,255,0.50);
}

.sys-call-dash{
  color: rgba(255,255,255,0.55);
}

.sys-call-join{
  color: var(--accent-soft);
  text-decoration: none;
  font-weight: 700;
}
.sys-call-join:hover{
  text-decoration: underline;
}

/* =========================================================
   Telegram-like chat layout (reference screenshot)
   ========================================================= */

.dc-layout .chat-messages{
  background: rgba(44,46,50,1);
  padding: 12px 0 18px;
}

.dc-layout .date-sep{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 10px 0;
}
.dc-layout .date-sep-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}

.dc-layout .msg-row{
  margin: 0;
  padding: 8px 18px;
  gap: 12px;
  align-items: flex-start;
  border-radius: 10px;
}
.dc-layout .msg-row:hover{
  background: rgba(255,255,255,0.03);
}

.dc-layout .msg-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 40px;
}

.dc-layout .msg-body{
  max-width: 860px;
  width: 100%;
}

.dc-layout .msg-head{
  display:flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 2px;
}
.dc-layout .msg-user{
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,0.95);
}
.dc-layout .msg-time{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* Messages are mostly bubbleless in the reference; keep attachments rounded */
.dc-layout .msg-bubble{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  line-height: 1.38;
}

/* Outgoing: right aligned, no avatar, time+checks inside message block */
.dc-layout .msg-row.mine{
  /* Telegram-like: outgoing message column on the right with a big empty left gutter */
  justify-content: flex-end;
  flex-direction: row;
  padding-left: min(42vw, 360px);
}
.dc-layout .msg-row.mine .msg-avatar{
  display:none !important;
}
.dc-layout .msg-row.mine .msg-head{
  display:none !important;
}
.dc-layout .msg-row.mine .msg-body{
  width: auto;
  max-width: min(560px, 78vw);
  display:flex;
  flex-direction: column;
  align-items: flex-end;
}
.dc-layout .msg-row.mine .msg-bubble{
  position: relative;
  padding-right: 54px !important;
  /* Telegram-like: text starts at left edge of the right column */
  text-align: left;
}

.dc-layout .msg-row.mine .msg-attachments{
  width: 100%;
  max-width: min(560px, 78vw);
  align-self: flex-end;
}
.dc-layout .msg-row.mine .msg-meta{
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.dc-layout .msg-row.mine .msg-meta-under{
  position: static;
  margin-top: 6px;
}
.dc-layout .msg-meta-receipt{
  font-size: 12px;
  letter-spacing: -0.5px;
}
.dc-layout .msg-meta-receipt.is-delivered{
  color: rgba(140, 200, 255, 0.8);
}
.dc-layout .msg-meta-receipt.is-read{
  color: rgba(120, 255, 210, 0.9);
}

/* Attachments */
.dc-layout .msg-attachments{
  margin-top: 6px;
  width: 100%;
}

.dc-layout .msg-row.mine .msg-attachments{
  width: min(560px, 78vw);
  align-self: flex-end;
}
.dc-layout .msg-image-card{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
.dc-layout .msg-image{
  display:block;
  width:100%;
  max-height: 520px;
  object-fit: cover;
}

/* System call events in feed: centered pill-like row */
.dc-layout .sys-call-event{
  margin: 8px 18px;
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
}



/* --- CHAT REFERENCE STYLE OVERRIDES v20260111 --- */

/* Reference-like DM chat: same look for you and friend (no Telegram right bubbles). */
.dc-layout .messages{
  padding: 10px 12px 18px;
}

.dc-layout .msg-row{
  position: relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding: 8px 10px;
  margin: 0 0 2px 0;
  border-radius: 10px;
}

/* Ensure mine is NOT reversed/right-bubbled (override older rules with !important) */
.dc-layout .msg-row.mine{
  padding-left: 10px !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
}
.dc-layout .msg-row.mine .msg-avatar{
  display:flex !important;
}
.dc-layout .msg-row.mine .msg-head{
  display:flex !important;
}
.dc-layout .msg-row.mine .msg-body{
  width:auto !important;
  max-width:none !important;
  align-items: stretch !important;
}
.dc-layout .msg-row.mine .msg-bubble{
  padding-right: 0 !important;
  text-align:left !important;
}

.dc-layout .msg-row:hover{
  background: rgba(255,255,255,0.04);
}

.dc-layout .msg-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 40px;
  margin-top: 2px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.dc-layout .msg-body{
  flex:1;
  min-width:0;
}

.dc-layout .msg-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin: 0 0 2px 0;
}

.dc-layout .msg-user{
  font-weight: 700;
  color: rgba(255,255,255,0.94);
}

.dc-layout .msg-time{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* Text: no bubble background */
.dc-layout .msg-bubble{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.88);
  line-height: 1.35;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.dc-layout .msg-attachments{ margin-top: 8px; }
.dc-layout .msg-attachments img{
  max-width: 760px;
  width: min(760px, 100%);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

/* Compact grouping */
.dc-layout .msg-row.compact{ padding-top: 2px; padding-bottom: 2px; }
.dc-layout .msg-row.compact .msg-avatar{ opacity: 0; pointer-events: none; }
.dc-layout .msg-row.compact .msg-head{ display:none; }

/* Hover actions bar */
.dc-layout .msg-actions{ position:absolute; top: 8px; right: 12px; transform: none; }
.dc-layout .msg-row:hover .msg-actions,
.dc-layout .msg-row:focus-within .msg-actions{ opacity: 1; pointer-events: auto; }

/* Date separator (JS uses .date-sep-label) */
.dc-layout .date-sep{ position: relative; display:flex; justify-content:center; margin: 14px 0; }
.dc-layout .date-sep::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: rgba(255,255,255,0.06); }
.dc-layout .date-sep-label{
  position: relative;
  z-index:1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
  font-size: 12px;
}

/* System call events (JS uses .sys-call-event) */
.dc-layout .sys-call-event{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.76);
}

/* Clyde-style DM failure notice (Discord-like) */
.dc-layout .msg-row.sys-clyde{ align-items: flex-start; }
.dc-layout .msg-row.sys-clyde .msg-avatar.clyde-avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}
.dc-layout .msg-row.sys-clyde .msg-head{ gap: 8px; }
.dc-layout .msg-row.sys-clyde .msg-bot-badge{
    font-size: 11px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(88,101,242,0.28);
    color: rgba(255,255,255,0.95);
}
.dc-layout .msg-row.sys-clyde .msg-bubble.sys-clyde-bubble{
    background: rgba(88,101,242,0.18);
    border: 1px solid rgba(88,101,242,0.22);
    color: rgba(255,255,255,0.92);
    line-height: 1.35;
}
.dc-layout .msg-row.sys-clyde .sys-clyde-link{
    color: rgba(155, 170, 255, 0.95);
    text-decoration: none;
}
.dc-layout .msg-row.sys-clyde .sys-clyde-link:hover{ text-decoration: underline; }
.dc-layout .msg-row.sys-clyde .sys-clyde-foot{
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.dc-layout .msg-row.sys-clyde .sys-clyde-remove{
    color: rgba(255,255,255,0.75);
    text-decoration: underline;
    cursor: pointer;
}
.dc-layout .sys-call-ico{
  width: 28px; height: 28px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
}
.dc-layout .sys-call-text{ flex:1; min-width:0; }
.dc-layout .sys-call-who{ color: rgba(255,255,255,0.90); font-weight: 700; }
.dc-layout .sys-call-msg{ color: rgba(255,255,255,0.70); }
.dc-layout .sys-call-time{ font-size: 12px; color: rgba(255,255,255,0.55); white-space: nowrap; }


/* --- CHAT REFERENCE ALIGN OVERRIDES v20260111 --- */

/* Make DM chat look like the provided reference: same layout for you and friend */
.dc-layout .messages{
  padding: 10px 12px 18px;
}

.dc-layout .msg-row{
  position: relative;
  display:flex;
  align-items:flex-start;
  gap: 12px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
}

/* Mine should look exactly the same as others */
.dc-layout .msg-row.mine{
  padding-left: 10px !important;
  justify-content:flex-start !important;
  flex-direction: row !important;
}
.dc-layout .msg-row.mine .msg-avatar{ display:flex !important; }
.dc-layout .msg-row.mine .msg-head{ display:flex !important; }
.dc-layout .msg-row.mine .msg-body{
  width:auto !important;
  max-width:none !important;
  align-items:stretch !important;
}
.dc-layout .msg-row.mine .msg-bubble{ padding-right: 0 !important; }

.dc-layout .msg-row:hover{ background: rgba(255,255,255,0.04); }

.dc-layout .msg-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 40px;
  margin-top: 2px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.dc-layout .msg-body{ flex:1; min-width:0; }

.dc-layout .msg-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin: 0 0 2px 0;
}

.dc-layout .msg-user{ font-weight: 700; color: rgba(255,255,255,0.94); }
.dc-layout .msg-time{ font-size: 12px; color: rgba(255,255,255,0.55); }

/* No bubble background */
.dc-layout .msg-bubble{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.88);
  line-height: 1.35;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.dc-layout .msg-attachments{ margin-top: 8px; }

.dc-layout .msg-attachments img{
  max-width: 760px;
  width: min(760px, 100%);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

/* Compact grouping: hide avatar + header */
.dc-layout .msg-row.compact{ padding-top: 2px; padding-bottom: 2px; }
.dc-layout .msg-row.compact .msg-avatar{ opacity: 0; pointer-events:none; }
.dc-layout .msg-row.compact .msg-head{ display:none; }

/* Actions bar in top-right */
.dc-layout .msg-actions{
  position:absolute;
  top: 6px;
  right: 10px;
  transform:none;
}

/* Date separator (JS uses .date-sep-label) */
.dc-layout .date-sep{
  position: relative;
  display:flex;
  justify-content:center;
  margin: 14px 0;
}
.dc-layout .date-sep::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:1px;
  background: rgba(255,255,255,0.06);
}
.dc-layout .date-sep-label{
  position: relative;
  z-index:1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
  font-size: 12px;
}

/* System call events (JS uses .sys-call-event) */
.dc-layout .sys-call-event{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.76);
}
.dc-layout .sys-call-ico{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
}
.dc-layout .sys-call-text{ flex:1; min-width:0; }
.dc-layout .sys-call-who{ color: rgba(255,255,255,0.90); font-weight: 700; }
.dc-layout .sys-call-msg{ color: rgba(255,255,255,0.70); }
.dc-layout .sys-call-time{ font-size: 12px; color: rgba(255,255,255,0.55); white-space:nowrap; }


/* --- CHAT REFERENCE OVERRIDES v20260111 --- */

/* Reference-like chat: same layout for you and friend (no Telegram right column) */
.dc-layout .messages{
  padding: 10px 12px 18px;
}

.dc-layout .msg-row{
  position: relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding: 8px 10px;
  margin: 0;
  border-radius: 10px;
}

/* Make mine identical to others */
.dc-layout .msg-row.mine{
  padding-left: 10px !important;
  justify-content:flex-start !important;
  flex-direction: row !important;
}
.dc-layout .msg-row.mine .msg-avatar{
  display:flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.dc-layout .msg-row.mine .msg-head{
  display:flex !important;
}
.dc-layout .msg-row.mine .msg-body{
  width: auto !important;
  max-width: none !important;
  align-items: stretch !important;
}
.dc-layout .msg-row.mine .msg-bubble{
  padding-right: 0 !important;
}

.dc-layout .msg-row:hover{
  background: rgba(255,255,255,0.04);
}

.dc-layout .msg-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 40px;
  margin-top: 2px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.dc-layout .msg-body{
  flex:1;
  min-width:0;
}

.dc-layout .msg-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin: 0 0 2px 0;
}

.dc-layout .msg-user{
  font-weight: 700;
  color: rgba(255,255,255,0.94);
}

.dc-layout .msg-time{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* Text like in reference: no bubble background */
.dc-layout .msg-bubble{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.88);
  line-height: 1.35;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.dc-layout .msg-attachments{ margin-top: 8px; }

.dc-layout .msg-attachments img{
  max-width: 760px;
  width: min(760px, 100%);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

/* Compact grouping */
.dc-layout .msg-row.compact{ padding-top: 2px; padding-bottom: 2px; }
.dc-layout .msg-row.compact .msg-avatar{ opacity: 0; pointer-events: none; }
.dc-layout .msg-row.compact .msg-head{ display:none; }

/* Hover actions bar */
.dc-layout .msg-actions{
  position:absolute;
  top: 8px;
  right: 12px;
  transform: none;
}

/* Date separator like reference (pill centered with line) */
.dc-layout .date-sep{
  position: relative;
  display:flex;
  justify-content:center;
  margin: 14px 0;
}
.dc-layout .date-sep::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background: rgba(255,255,255,0.06);
}
.dc-layout .date-sep-label{
  position: relative;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
  font-size: 12px;
}

/* System call events */
.dc-layout .sys-call-event{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.76);
}
.dc-layout .sys-call-ico{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
}
.dc-layout .sys-call-text{ flex:1; min-width:0; }
.dc-layout .sys-call-who{ color: rgba(255,255,255,0.90); font-weight:700; }
.dc-layout .sys-call-msg{ color: rgba(255,255,255,0.70); }
.dc-layout .sys-call-time{ font-size:12px; color: rgba(255,255,255,0.55); white-space:nowrap; }

/* === Chat reference style (matches user's screenshot) === */
.dc-layout .chat-messages{
  background: rgba(26,27,31,0.96);
}

.dc-layout .msg-row{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}

.dc-layout .msg-row:hover{
  background: rgba(255,255,255,0.04);
}

/* Same look for your messages and friend's messages */
.dc-layout .msg-row.mine{
  justify-content: flex-start !important;
  flex-direction: row !important;
}

.dc-layout .msg-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 40px;
  margin-top: 2px;
}

.dc-layout .msg-body{ min-width:0; flex:1; }

.dc-layout .msg-head{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.dc-layout .msg-user{
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.dc-layout .msg-time{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* Remove bubble look: text sits directly on background */
.dc-layout .msg-bubble{
  background: transparent !important;
  border: none !important;
  padding: 2px 0 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  color: rgba(255,255,255,0.88);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Disable compact grouping visual differences */
.dc-layout .msg-row.compact .msg-head{ display:flex !important; }
.dc-layout .msg-row.compact .msg-avatar{ opacity: 1 !important; pointer-events:auto !important; }
.dc-layout .msg-row.compact{ padding-top:10px; padding-bottom:10px; }

/* Actions on hover (top-right like screenshot) */
.dc-layout .msg-actions{
  position: absolute;
  top: 6px;
  right: 10px;
  background: rgba(16,17,20,0.86);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

/* Inline editor like screenshot */
.dc-layout .msg-row.is-editing .msg-actions{ display:none; }
.dc-layout .msg-edit-wrap{
  margin-top: 8px;
  position: relative;
}
.dc-layout .msg-edit-input{
  width: 100%;
  min-height: 44px;
  resize: none;
  padding: 12px 44px 12px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  outline: none;
  font: inherit;
  line-height: 1.35;
}
.dc-layout .msg-edit-input:focus{
  border-color: rgba(120,255,220,0.32);
  box-shadow: 0 0 0 3px rgba(120,255,220,0.10);
}
.dc-layout .msg-edit-emoji{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dc-layout .msg-edit-emoji:hover{ background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); }
.dc-layout .msg-edit-emoji .i{ width: 18px; height: 18px; }
.dc-layout .msg-edit-hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.dc-layout .msg-edit-hint .k{
  color: rgba(120,255,220,0.85);
  font-weight: 700;
}


/* === Chat reference layout: unified left (Discord/Telegram hybrid) === */
.dc-layout .msg-meta,
.dc-layout .msg-receipt{
  display:none !important;
}

.dc-layout .chat-messages{
  background: rgba(0,0,0,0.0);
}

.dc-layout .msg-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 14px;
  margin:0 10px;
  border-radius:10px;
  position:relative;
}

.dc-layout .msg-row:hover{
  background: rgba(255,255,255,0.04);
}

.dc-layout .msg-row.mine{
  justify-content:flex-start;
}

.dc-layout .msg-avatar{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  background-size:cover;
  background-position:center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  overflow:hidden;
}

.dc-layout .msg-avatar.has-image{
  background-color: transparent;
}

.dc-layout .msg-body{
  flex:1 1 auto;
  min-width:0;
}

.dc-layout .msg-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  line-height:1.1;
}

.dc-layout .msg-user{
  font-weight:800;
  font-size:15px;
  color: rgba(255,255,255,0.95);
}

.dc-layout .msg-time{
  font-size:12px;
  color: rgba(255,255,255,0.45);
}

.dc-layout .msg-bubble{
  margin-top:4px;
  padding:0;
  border:none;
  background: transparent;
  color: rgba(255,255,255,0.92);
  font-size:15px;
  line-height:1.45;
  max-width:none;
  white-space:pre-wrap;
  word-break:break-word;
}

.dc-layout .msg-row.compact{
  padding-top:6px;
}

.dc-layout .msg-row.compact .msg-avatar{
  opacity:0;
}

.dc-layout .msg-row.compact .msg-head{
  display:none;
}

/* Date separators: pill + side lines */
.dc-layout .date-sep{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:14px 0;
}

.dc-layout .date-sep:before,
.dc-layout .date-sep:after{
  content:"";
  height:1px;
  flex:1 1 auto;
  background: rgba(255,255,255,0.06);
  margin:0 12px;
}

.dc-layout .date-sep-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  color: rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}

/* System call events in feed */
.dc-layout .sys-call-event{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  margin:0 10px;
  border-radius:10px;
  color: rgba(255,255,255,0.78);
}

.dc-layout .sys-call-event:hover{
  background: rgba(255,255,255,0.04);
}

.dc-layout .sys-call-ico{
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
}

.dc-layout .sys-call-time{
  margin-left:auto;
  font-size:12px;
  color: rgba(255,255,255,0.45);
}

/* Inline editor look (as your screenshot) */
.dc-layout .msg-row.is-editing{
  background: rgba(255,255,255,0.03);
}

.dc-layout .msg-edit-wrap{
  position:relative;
  margin-top:6px;
}

.dc-layout .msg-edit-ta{
  width:100%;
  min-height:44px;
  resize:vertical;
  border-radius:10px;
  padding:12px 44px 12px 12px;
  background: rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  outline:none;
}

.dc-layout .msg-edit-emoji{
  position:absolute;
  right:10px;
  top:10px;
  width:28px;
  height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
}

.dc-layout .msg-edit-hint{
  margin-top:6px;
  font-size:12px;
  color: rgba(255,255,255,0.55);
}


/* === Chat alignment fixes (reference) === */
.chat-messages{ --chatPadX: 16px; }

/* Center date separators across the full chat width (ignoring container padding) */
.chat-messages .date-sep{
  width: calc(100% + (var(--chatPadX) * 2));
  margin-left: calc(-1 * var(--chatPadX));
  margin-right: calc(-1 * var(--chatPadX));
  justify-content: center !important;
}
.chat-messages .date-sep-label{
  margin: 0 auto;
  text-align: center;
}

/* Force ALL message rows (including mine) to be left-aligned like the reference */
.msg-row.mine,
.msg-row.mine.compact{
  justify-content: flex-start !important;
  flex-direction: row !important;
  padding-left: 0 !important;
}

/* Ensure avatar stays visible and circular */
.msg-avatar{
  border-radius: 999px !important;
  overflow: hidden;
}
.msg-row.mine .msg-avatar{
  display: flex !important;
}

/* Prevent any right-side meta layout for mine */
.msg-row.mine .msg-bubble,
.msg-row.mine .msg-body{
  align-items: flex-start !important;
  text-align: left !important;
}


/* === FINAL OVERRIDES (single-side reference layout) ===
   Over time, multiple chat skins were appended. Some of them (notably
   `.dc-layout .msg-row.mine` rules) can re-introduce Telegram-like right-side
   layout (extra timestamps/receipts on the right). The reference screenshot
   requires: ALL messages left-aligned with avatar + username + time.
   These rules are placed at the very end to win the cascade.
*/

/* Date separator: force true center regardless of container padding */
.chat-messages .date-sep{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 14px 0 !important;
  height: 24px;
}
.chat-messages .date-sep::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,0.08);
  transform: translateY(-50%);
}
.chat-messages .date-sep-label{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  text-align: center;
}

/* Single-side message layout for BOTH mine and others */
.dc-layout .msg-row,
.dc-layout .msg-row.mine,
.msg-row,
.msg-row.mine{
  justify-content: flex-start !important;
  flex-direction: row !important;
  padding-left: 0 !important;
}

/* Ensure avatar + header are always visible for mine */
.dc-layout .msg-row.mine .msg-avatar,
.msg-row.mine .msg-avatar{
  display: flex !important;
}
.dc-layout .msg-row.mine .msg-head,
.msg-row.mine .msg-head{
  display: flex !important;
}

/* Neutralize Telegram-like "meta" blocks (extra time/receipts on the right) */
.dc-layout .msg-meta,
.dc-layout .msg-row.mine .msg-meta,
.dc-layout .msg-row.mine .msg-meta-under,
.msg-meta,
.msg-meta-under{
  display: none !important;
}

/* Keep message body consistent */
.dc-layout .msg-row.mine .msg-body,
.msg-row.mine .msg-body{
  width: auto !important;
  max-width: none !important;
  align-items: flex-start !important;
}

/* Hard round avatars */
.dc-layout .msg-avatar,
.msg-avatar{
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* === Chat layout final overrides (force left layout + avatar nudge) === */
.msg-row.mine{
  justify-content:flex-start !important;
  flex-direction:row !important;
}
.msg-row.mine .msg-head{
  justify-content:flex-start !important;
  margin:0 0 4px 2px !important;
}
.msg-avatar{
  margin-left:8px !important; /* nudge avatars slightly to the right */
  overflow:hidden !important; /* ensure images clip to circle */
}


/* Sys call duration */
.sys-call-dur{
  color: rgba(255,255,255,0.68);
  font-weight: 600;
}

/* ---- Presence dot hard-fix (prevent stray/offline dots) ---- */
.presence-dot{ display:none !important; }
.avatar-circle{ position:relative; }
.avatar-circle .presence-dot{ display:block !important; }
.avatar-circle .presence-dot.is-offline,
.avatar-circle .presence-dot.is-invisible{ display:none !important; }
/* ----------------------------------------------------------- */



/* Context menu: pending friend requests (hidden by default, toggled in JS) */
#friend-context-menu .pending-only,
#friend-context-menu .pending-in-only,
#friend-context-menu .pending-out-only{
  display: none;
}


/* Call requires friend modal */
#modal-call-requires-friend .icon-btn{
  position: absolute;
  top: 10px;
  right: 10px;
}
#modal-call-requires-friend .incoming-call-card{
  position: relative;
}


/* Neon Chat Settings Modal (Discord-like) */
.nc-settings-overlay{
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.nc-settings-overlay.is-hidden{ display:none !important; }

.nc-settings-modal{
  position: relative;
  width: min(1200px, calc(100vw - 80px));
  height: min(760px, calc(100vh - 80px));
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 320px 1fr;
  background: rgba(35,36,41,.92);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

.nc-settings-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(20,20,22,.35);
  color: rgba(255,255,255,.85);
  font-size: 22px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  z-index: 3;
}
.nc-settings-close:hover{ background: rgba(20,20,22,.55); }

.nc-settings-nav{
  background: rgba(26,27,31,.92);
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 18px 12px 14px;
  display:flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
}
.nc-settings-me{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.nc-settings-me-ava{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.25);
  border: 2px solid rgba(98, 255, 200, .35);
}
.nc-settings-me-ava-img{ width:100%; height:100%; object-fit: cover; }
.nc-settings-me-ava-fb{ font-weight: 800; color: rgba(255,255,255,.9); }
.nc-settings-me-name{ font-weight: 800; color: rgba(255,255,255,.9); font-size: 14px; }
.nc-settings-me-sub{ color: rgba(255,255,255,.55); font-size: 12px; margin-top: 2px; }

.nc-settings-search{
  padding: 0 6px;
}
.nc-settings-search-input{
  width: 100%;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.88);
  padding: 0 12px;
  outline: none;
  font-size: 13px;
}
.nc-settings-search-input::placeholder{ color: rgba(255,255,255,.45); }
.nc-settings-nav-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 8px;
  display:flex;
  flex-direction: column;
  gap: 2px;
}

/* Settings scrollbars (Discord-like: blend with background, show on hover) */
.nc-settings-nav-scroll,
.nc-settings-content-scroll{
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: transparent transparent;
}
.nc-settings-nav-scroll:hover,
.nc-settings-content-scroll:hover{
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.nc-settings-nav-scroll::-webkit-scrollbar,
.nc-settings-content-scroll::-webkit-scrollbar{
  width: 10px;
}
.nc-settings-nav-scroll::-webkit-scrollbar-track,
.nc-settings-content-scroll::-webkit-scrollbar-track{
  background: transparent;
}
.nc-settings-nav-scroll::-webkit-scrollbar-thumb,
.nc-settings-content-scroll::-webkit-scrollbar-thumb{
  background-color: transparent;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.nc-settings-nav-scroll:hover::-webkit-scrollbar-thumb,
.nc-settings-content-scroll:hover::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,.18);
}
.nc-settings-nav-scroll:hover::-webkit-scrollbar-thumb:hover,
.nc-settings-content-scroll:hover::-webkit-scrollbar-thumb:hover{
  background-color: rgba(255,255,255,.28);
}

.nc-settings-group{
  margin: 12px 8px 6px;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(255,255,255,.45);
}
.nc-settings-item{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.68);
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  display:flex;
  align-items:center;
  gap: 8px;
}

.nc-settings-ico{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  flex: 0 0 18px;
}
.nc-settings-ico svg{ width: 18px; height: 18px; display:block; }
.nc-settings-label{ flex: 1 1 auto; }

.nc-settings-item:hover .nc-settings-ico{ color: rgba(255,255,255,.75); }
.nc-settings-item.is-active .nc-settings-ico{ color: rgba(255,255,255,.88); }
.nc-settings-item.danger .nc-settings-ico{ color: rgba(255,140,140,.85); }
.nc-settings-item:hover{ background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.nc-settings-item.is-active{
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.92);
}
.nc-settings-item.danger{ color: rgba(255,120,120,.85); }
.nc-settings-item.danger:hover{ background: rgba(255,90,90,.10); color: rgba(255,160,160,.95); }

.nc-settings-sep{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 10px 8px;
}

.nc-settings-footer{
  margin: 10px 8px 4px;
  padding-bottom: 6px;
}
.nc-settings-footer-muted{
  color: rgba(255,255,255,.35);
  font-size: 11px;
  margin-bottom: 6px;
}
.nc-settings-footer-links{
  color: rgba(255,255,255,.40);
  font-size: 11px;
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nc-settings-footer-link{
  color: rgba(140, 200, 255, .8);
  text-decoration: none;
}
.nc-settings-footer-link:hover{ text-decoration: underline; }
.nc-settings-footer-dot{ opacity: .55; }

.nc-settings-content{
  background: rgba(42,43,49,.92);
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.nc-settings-content-scroll{
  height: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px 26px 26px;
}
.nc-settings-title{
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  margin: 0 0 10px;
}
.nc-settings-tabs{
  display:flex;
  gap: 18px;
  align-items:center;
  padding: 6px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 14px;
}
.nc-settings-tab{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.55);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nc-settings-tab.is-active{
  color: rgba(255,255,255,.9);
  border-bottom-color: rgba(120, 200, 255, .85);
}
.nc-settings-page{ display:none; }
.nc-settings-page.is-active{ display:block; }

.nc-account-card{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(25,26,30,.65);
}
.nc-account-banner{
  height: 88px;
  background: linear-gradient(90deg, rgba(46,200,128,1), rgba(46,200,128,1));
}
.nc-account-card-body{ padding: 16px; }
.nc-account-toprow{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: -42px;
}
.nc-account-ava{
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  border: 5px solid rgba(42,43,49,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.nc-account-ava-img{ width:100%; height:100%; object-fit: cover; }
.nc-account-ava-fb{ font-weight: 900; font-size: 22px; color: rgba(255,255,255,.9); }
.nc-account-id{ flex: 1; min-width: 0; }
.nc-account-name{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  font-size: 16px;
}
.nc-account-ellipsis{ color: rgba(255,255,255,.55); margin-top: 2px; }

.nc-account-fields{ margin-top: 14px; display:flex; flex-direction: column; gap: 10px; }
.nc-field-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.nc-field-label{ color: rgba(255,255,255,.55); font-size: 12px; }
.nc-field-value{ color: rgba(255,255,255,.92); font-size: 13px; margin-top: 4px; }

.nc-settings-section{ margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.nc-settings-h3{ margin: 0 0 10px; color: rgba(255,255,255,.92); font-size: 14px; font-weight: 900; }
.nc-settings-muted{ color: rgba(255,255,255,.55); font-size: 13px; margin-top: 10px; line-height: 1.3; }
.nc-settings-actions{ display:flex; gap: 10px; margin-top: 14px; }

.nc-settings-subsection{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 1;
}

/* Ensure the authenticator button is always on top of local layered elements */
#nc-btn-enable-auth-app{
  position: relative;
  z-index: 6;
}
.nc-settings-subtitle{
  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 900;
  margin: 0 0 6px;
}

.nc-btn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.nc-btn:hover{ background: rgba(255,255,255,.10); }
.nc-btn.primary{
  border-color: rgba(120, 140, 255, .30);
  background: rgba(120, 140, 255, .22);
}
.nc-btn.primary:hover{ background: rgba(120, 140, 255, .30); }
.nc-btn.ghost{ background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.08); }
.nc-btn.ghost:hover{ background: rgba(0,0,0,.30); }
.nc-btn.danger{
  border-color: rgba(255,90,90,.25);
  background: rgba(255,90,90,.18);
  color: rgba(255,200,200,.95);
}
.nc-btn.danger:hover{ background: rgba(255,90,90,.25); }

/* ===========================
   Voice & Video settings (Emerald)
   =========================== */
.nc-settings-modal{ --vv-accent: rgba(46, 200, 128, 1); --vv-accent-soft: rgba(46, 200, 128, .22); }

.nc-vv-tabs{
  display:flex;
  gap: 22px;
  align-items:flex-end;
  padding: 6px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 16px;
}
.nc-vv-tab{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.55);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
}
.nc-vv-tab:hover{ color: rgba(255,255,255,.75); }
.nc-vv-tab.is-active{
  color: rgba(255,255,255,.92);
  border-bottom-color: var(--vv-accent);
}

.nc-vv-pane{ display:none; }
.nc-vv-pane.is-active{ display:block; }

.nc-vv-section{ margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.nc-vv-h3{ margin: 0 0 10px; color: rgba(255,255,255,.92); font-size: 14px; font-weight: 900; }
.nc-vv-muted{ color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.35; }
.nc-vv-help{ margin-top: 10px; color: rgba(255,255,255,.55); font-size: 13px; }
.nc-vv-link{ color: rgba(120, 200, 255, .95); text-decoration: none; }
.nc-vv-link:hover{ text-decoration: underline; }

.nc-vv-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nc-vv-grid-sliders{ margin-top: 14px; }
.nc-vv-col{ min-width:0; }
.nc-vv-label{ color: rgba(255,255,255,.65); font-size: 12px; font-weight: 800; margin-bottom: 8px; }

.nc-vv-select select{
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.9);
  padding: 10px 12px;
  outline: none;
  font-weight: 700;
}
.nc-vv-select select:focus{ border-color: rgba(46,200,128,.45); box-shadow: 0 0 0 3px rgba(46,200,128,.12); }

.nc-vv-range{ display:flex; gap: 12px; align-items:center; }
.nc-vv-range input[type="range"]{
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 9px;
  border-radius: 999px;
  outline: none;
  --fill: 0;
  background:
    linear-gradient(90deg,
      rgba(50,255,195,1) 0%,
      rgba(46,200,128,1) 55%,
      rgba(0,160,120,1) 100%) 0 0 / calc(var(--fill) * 1%) 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.nc-vv-range input[type="range"]:hover{
  box-shadow: inset 0 0 0 1px rgba(50,255,195,.18), 0 0 0 3px rgba(50,255,195,.06);
}
.nc-vv-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(50,255,195,.70);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 4px rgba(50,255,195,.08);
}
.nc-vv-range input[type="range"]::-webkit-slider-runnable-track{ height: 6px; border-radius: 999px; }
.nc-vv-range input[type="range"]::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(0,0,0,.35);
}
.nc-vv-range input[type="range"]::-moz-range-track{ height: 6px; border-radius: 999px; background: rgba(255,255,255,.10); }
.nc-vv-range-value{ width: 54px; text-align:right; color: rgba(255,255,255,.75); font-weight: 800; font-size: 12px; }

.nc-btn.vv{
  border-color: rgba(46,200,128,.30);
  background: rgba(46,200,128,.22);
}
.nc-btn.vv:hover{ background: rgba(46,200,128,.30); }

.nc-vv-test-row{ display:flex; align-items:center; gap: 14px; margin-top: 10px; }
.nc-vv-bars{
  flex: 1;
  height: 24px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  padding: 5px 10px;
  display:flex;
  gap: 3px;
  align-items:flex-end;
  overflow:hidden;
}
.nc-vv-bar{
  width: 3px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255,255,255,.20);
}
.nc-vv-bars.is-live .nc-vv-bar{ background: rgba(46,200,128,.55); }

.nc-vv-radio-card{
  position: relative;
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  margin-top: 10px;
  cursor: pointer;
}
.nc-vv-radio-card:hover{ background: rgba(255,255,255,.05); }
.nc-vv-radio-card input{ position:absolute; opacity:0; pointer-events:none; }
.nc-vv-radio-dot{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.20);
  margin-top: 2px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nc-vv-radio-dot:after{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}
.nc-vv-radio-card input:checked + .nc-vv-radio-dot{ border-color: rgba(46,200,128,.85); }
.nc-vv-radio-card input:checked + .nc-vv-radio-dot:after{ background: rgba(46,200,128,.95); }
.nc-vv-radio-title{ font-weight: 900; color: rgba(255,255,255,.92); font-size: 13px; }
.nc-vv-radio-desc{ margin-top: 2px; color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.3; }

.nc-vv-toggle-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.nc-vv-toggle-title{ font-weight: 900; color: rgba(255,255,255,.92); font-size: 13px; margin-bottom: 4px; }
.nc-vv-switch{
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.10);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  z-index: 3;
  pointer-events: auto;
  user-select: none;
}
.nc-vv-switch .nc-vv-switch-knob{
  position:absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.90);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: transform .16s ease;
}
.nc-vv-switch.is-on{
  background: linear-gradient(135deg, rgba(8, 170, 120, .96), rgba(52, 224, 168, .86));
  border-color: rgba(52, 224, 168, .70);
  box-shadow: 0 10px 26px rgba(16, 185, 129, .22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.nc-vv-switch.is-on .nc-vv-switch-knob{
  transform: translateX(20px);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 2px rgba(16,185,129,.35);
}

@media (max-width: 960px){
  .nc-vv-grid{ grid-template-columns: 1fr; }
  .nc-vv-test-row{ flex-direction: column; align-items: stretch; }
}

@media (max-width: 960px){
  .nc-settings-modal{ width: calc(100vw - 24px); height: calc(100vh - 24px); grid-template-columns: 280px 1fr; }
}
@media (max-width: 720px){
  .nc-settings-modal{ grid-template-columns: 1fr; }
  .nc-settings-nav{ display:none; }
}

body.nc-modal-open{ overflow: hidden; }

/* Settings scrollbars (Discord-like: blend with background, show on hover) */
.nc-settings-nav-scroll,
.nc-settings-content-scroll{
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: transparent transparent;
}
.nc-settings-nav-scroll:hover,
.nc-settings-content-scroll:hover{
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.nc-settings-nav-scroll::-webkit-scrollbar,
.nc-settings-content-scroll::-webkit-scrollbar{
  width: 10px;
}
.nc-settings-nav-scroll::-webkit-scrollbar-track,
.nc-settings-content-scroll::-webkit-scrollbar-track{
  background: transparent;
}
.nc-settings-nav-scroll::-webkit-scrollbar-thumb,
.nc-settings-content-scroll::-webkit-scrollbar-thumb{
  background-color: transparent;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.nc-settings-nav-scroll:hover::-webkit-scrollbar-thumb,
.nc-settings-content-scroll:hover::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,.18);
}
.nc-settings-nav-scroll:hover::-webkit-scrollbar-thumb:hover,
.nc-settings-content-scroll:hover::-webkit-scrollbar-thumb:hover{
  background-color: rgba(255,255,255,.28);
}

/* Settings scrollbars (Discord-like: blend with background, show on hover) */
.nc-settings-nav-scroll,
.nc-settings-content-scroll{
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: transparent transparent;
}
.nc-settings-nav-scroll:hover,
.nc-settings-content-scroll:hover{
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.nc-settings-nav-scroll::-webkit-scrollbar,
.nc-settings-content-scroll::-webkit-scrollbar{
  width: 10px;
}
.nc-settings-nav-scroll::-webkit-scrollbar-track,
.nc-settings-content-scroll::-webkit-scrollbar-track{
  background: transparent;
}
.nc-settings-nav-scroll::-webkit-scrollbar-thumb,
.nc-settings-content-scroll::-webkit-scrollbar-thumb{
  background-color: transparent;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.nc-settings-nav-scroll:hover::-webkit-scrollbar-thumb,
.nc-settings-content-scroll:hover::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,.18);
}
.nc-settings-nav-scroll:hover::-webkit-scrollbar-thumb:hover,
.nc-settings-content-scroll:hover::-webkit-scrollbar-thumb:hover{
  background-color: rgba(255,255,255,.28);
}

/* Settings scrollbars (Discord-like: blend with background, show on hover) */
.nc-settings-nav-scroll,
.nc-settings-content-scroll{
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: transparent transparent;
}
.nc-settings-nav-scroll:hover,
.nc-settings-content-scroll:hover{
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.nc-settings-nav-scroll::-webkit-scrollbar,
.nc-settings-content-scroll::-webkit-scrollbar{
  width: 10px;
}
.nc-settings-nav-scroll::-webkit-scrollbar-track,
.nc-settings-content-scroll::-webkit-scrollbar-track{
  background: transparent;
}
.nc-settings-nav-scroll::-webkit-scrollbar-thumb,
.nc-settings-content-scroll::-webkit-scrollbar-thumb{
  background-color: transparent;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.nc-settings-nav-scroll:hover::-webkit-scrollbar-thumb,
.nc-settings-content-scroll:hover::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,.18);
}
.nc-settings-nav-scroll:hover::-webkit-scrollbar-thumb:hover,
.nc-settings-content-scroll:hover::-webkit-scrollbar-thumb:hover{
  background-color: rgba(255,255,255,.28);
}

/* Settings scrollbars (Discord-like: blend with background, show on hover) */
.nc-settings-nav-scroll,
.nc-settings-content-scroll{
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: transparent transparent;
}
.nc-settings-nav-scroll:hover,
.nc-settings-content-scroll:hover{
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.nc-settings-nav-scroll::-webkit-scrollbar,
.nc-settings-content-scroll::-webkit-scrollbar{
  width: 10px;
}
.nc-settings-nav-scroll::-webkit-scrollbar-track,
.nc-settings-content-scroll::-webkit-scrollbar-track{
  background: transparent;
}
.nc-settings-nav-scroll::-webkit-scrollbar-thumb,
.nc-settings-content-scroll::-webkit-scrollbar-thumb{
  background-color: transparent;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.nc-settings-nav-scroll:hover::-webkit-scrollbar-thumb,
.nc-settings-content-scroll:hover::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,.18);
}
.nc-settings-nav-scroll:hover::-webkit-scrollbar-thumb:hover,
.nc-settings-content-scroll:hover::-webkit-scrollbar-thumb:hover{
  background-color: rgba(255,255,255,.28);
}

/* Voice & Video custom profile visibility */
.nc-vv-hidden{ display:none !important; }

/* Krisp card */
.nc-vv-krisp-card{
  margin-top: 10px;
  padding: 14px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  gap: 14px;
}
.nc-vv-krisp-logo{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #7c5cff;
  text-transform: lowercase;
  line-height: 1;
}
.nc-vv-link{
  color: rgba(122, 243, 255, .95);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}
.nc-vv-link:hover{ text-decoration: underline; }


/* Account inner tabs (Security / Reputation) */
.nc-account-tab{display:none;}
.nc-account-tab.is-active{display:block;}

/* Reputation widget */
.nc-rep-wrap{max-width:920px;margin:28px auto 0;padding:0 12px;}
.nc-rep-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:22px 22px 18px;}
.nc-rep-header{display:flex;align-items:center;gap:18px;}
.nc-rep-badge{width:84px;height:84px;border-radius:999px;background:rgba(27,200,125,0.15);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px rgba(27,200,125,0.06) inset;}
.nc-rep-badge-inner{width:62px;height:62px;border-radius:999px;background:rgba(27,200,125,0.22);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.92);}
.nc-rep-title{font-size:20px;font-weight:700;letter-spacing:.2px;}
.nc-rep-title-accent{color:#3ddc97;}
.nc-rep-desc{margin-top:6px;color:rgba(255,255,255,0.68);font-size:13px;line-height:1.35;}
.nc-rep-link{color:rgba(120,190,255,0.95);text-decoration:none;}
.nc-rep-link:hover{text-decoration:underline;}

.nc-rep-scale{margin-top:18px;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.nc-rep-node-wrap{display:flex;flex-direction:column;align-items:center;min-width:130px}
.nc-rep-node{width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.02);}
.nc-rep-node-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,0.18);}
.nc-rep-node.is-active{border-color:rgba(61,220,151,0.95);background:rgba(61,220,151,0.12);}
.nc-rep-node.is-active .nc-rep-node-dot{background:rgba(61,220,151,0.95);}
.nc-rep-node.is-past{border-color:rgba(61,220,151,0.55);background:rgba(61,220,151,0.08);}
.nc-rep-node.is-past .nc-rep-node-dot{background:rgba(61,220,151,0.55);}

.nc-rep-line{flex:1;height:2px;background:rgba(255,255,255,0.10);margin-top:8px;min-width:64px;border-radius:999px;}
.nc-rep-line.is-filled{background:rgba(61,220,151,0.55);}

.nc-rep-label{margin-top:8px;font-size:12px;color:rgba(255,255,255,0.68);text-align:center;line-height:1.2;max-width:150px;}

@media (max-width: 760px){
  .nc-rep-header{flex-direction:column;align-items:flex-start;}
  .nc-rep-node-wrap{min-width:120px}
  .nc-rep-scale{gap:10px;}
  .nc-rep-line{min-width:36px;}
}


/* Mini modal (Account edit) */
.nc-mini-modal{
  position: fixed;
  inset: 0;
  z-index: 11050;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.nc-mini-modal.is-hidden{ display:none !important; }
.nc-mini-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.nc-mini-modal-card{
  position: relative;
  width: min(520px, calc(100vw - 28px));
  border-radius: 14px;
  background: rgba(35,36,41,.96);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 70px rgba(0,0,0,.6);
  overflow: hidden;
  padding: 14px 14px 12px;
}

/* 2FA setup modal (Discord-like) */
.nc-2fa-modal-card{
  position: relative;
  width: min(720px, calc(100vw - 28px));
  border-radius: 14px;
  background: rgba(35,36,41,.98);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 70px rgba(0,0,0,.6);
  overflow: hidden;
  padding: 14px 14px 12px;
}
.nc-2fa-body{ padding: 4px 2px 6px; }
.nc-2fa-col{ display:flex; flex-direction:column; gap: 12px; }
.nc-2fa-step{ display:flex; gap: 14px; align-items:flex-start; }
.nc-2fa-step-grow{ flex:1; }
.nc-2fa-icon{ width: 62px; height: 62px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.75); flex: 0 0 62px; }
.nc-2fa-step-title{ font-size: 13px; font-weight: 900; color: rgba(255,255,255,.92); }
.nc-2fa-step-text{ font-size: 12px; color: rgba(255,255,255,.62); line-height: 1.35; margin-top: 4px; }
.nc-2fa-step-text a{ color: rgba(99,135,255,.95); text-decoration: none; }
.nc-2fa-step-text a:hover{ text-decoration: underline; }
.nc-2fa-divider{ height:1px; background: rgba(255,255,255,.08); margin: 2px 0; }
.nc-2fa-qr-wrap{ width: 164px; height: 164px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; flex: 0 0 164px; }
.nc-2fa-qr{ width: 150px; height: 150px; image-rendering: crisp-edges; border-radius: 6px; background: #fff; }
.nc-2fa-manual{ font-size: 12px; font-weight: 800; color: rgba(255,255,255,.80); margin-bottom: 4px; }
.nc-2fa-secret{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; color: rgba(255,255,255,.85); letter-spacing: .4px; }
.nc-2fa-activate-row{ display:flex; gap: 10px; align-items:center; margin-top: 10px; }
.nc-2fa-code{ width: 140px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(20,20,22,.35); color: rgba(255,255,255,.92); padding: 0 12px; outline: none; }
.nc-2fa-code:focus{ border-color: rgba(99,135,255,.65); box-shadow: 0 0 0 3px rgba(99,135,255,.18); }

@media (max-width: 760px){
  .nc-2fa-step{ flex-direction: column; }
  .nc-2fa-qr-wrap{ width: 150px; height: 150px; }
  .nc-2fa-qr{ width: 136px; height: 136px; }
}
.nc-mini-modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 10px;
}
.nc-mini-modal-title{
  font-size: 15px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
.nc-mini-modal-x{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(20,20,22,.35);
  color: rgba(255,255,255,.85);
  font-size: 22px;
  cursor: pointer;
}
.nc-mini-modal-x:hover{ background: rgba(20,20,22,.55); }

.nc-mini-modal-body{ padding: 4px 2px 10px; }
.nc-mini-modal-label{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,.60);
  margin-bottom: 6px;
}
.nc-mini-modal-input{
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  padding: 0 12px;
  outline: none;
  font-size: 13px;
}
.nc-mini-modal-input:focus{
  border-color: rgba(61,220,151,.55);
  box-shadow: 0 0 0 3px rgba(61,220,151,.10);
}
.nc-mini-modal-error{
  min-height: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,120,120,.92);
}
.nc-mini-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 6px 2px 2px;
}


.nc-req{color:#ff4d4f;font-weight:700;}

/* ===== Security keys unified panel (v18) ===== */
.nc-expand-panel{
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.24);
}
.nc-expand-panel.is-collapsed{ display: none; }

.nc-expand-title{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}

.nc-expand-sep{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 14px 0;
}

.nc-recovery-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 12px;
}

.nc-recovery-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}

.nc-recovery-item input{
  width: 16px;
  height: 16px;
}

.nc-recovery-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.2px;
}

.nc-sec-key-list{ margin-top: 10px; }
.nc-sec-key-empty{ opacity: 0.75; }


/* === Content & Communication (Settings) === */

.nc-content-tabs{ display:flex; gap: 10px; padding: 6px 0 14px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 18px; }
.nc-content-tab{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.65);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.nc-content-tab:hover{ background: rgba(255,255,255,.05); color: rgba(255,255,255,.82); }
.nc-content-tab.is-active{ background: rgba(255,255,255,.07); color: rgba(255,255,255,.92); }

.nc-content-pane{ display:none; }
.nc-content-pane.is-active{ display:block; }

.nc-ct-row{ display:flex; gap: 18px; align-items:flex-start; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.06); }
.nc-ct-row:first-of-type{ border-top: 0; }
.nc-ct-left{ flex: 1 1 auto; min-width: 260px; }
.nc-ct-label{ font-weight: 900; color: rgba(255,255,255,.92); font-size: 14px; }
.nc-ct-sub{ color: rgba(255,255,255,.55); font-size: 12px; margin-top: 6px; line-height: 1.35; }

.nc-ct-options{ flex: 0 0 360px; display:flex; flex-direction: column; gap: 10px; }
.nc-ct-option{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.nc-ct-option-title{ color: rgba(255,255,255,.82); font-size: 12px; font-weight: 800; }

.nc-ct-select{
  width: 120px;
  height: 34px;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  padding: 0 10px;
  outline: none;
  cursor: pointer;
}

.nc-ct-radio-group{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.nc-ct-radio{ display:flex; gap: 10px; align-items:flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.nc-ct-radio input{ margin-top: 3px; }
.nc-ct-radio .nc-ct-radio-title{ font-weight: 900; color: rgba(255,255,255,.90); font-size: 13px; }
.nc-ct-radio .nc-ct-radio-sub{ color: rgba(255,255,255,.55); font-size: 12px; margin-top: 4px; }

.nc-ct-toggle-row{ display:flex; align-items:center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); }
.nc-ct-toggle-title{ font-weight: 900; color: rgba(255,255,255,.92); font-size: 13px; }
.nc-ct-toggle-sub{ color: rgba(255,255,255,.55); font-size: 12px; margin-top: 4px; line-height: 1.35; }

/* Switch (Content) */
.nc-ct-switch{
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.10);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  z-index: 3;
  pointer-events: auto;
  user-select: none;
}
.nc-ct-switch .nc-ct-switch-knob{
  position:absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.90);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: transform .16s ease;
}
.nc-ct-switch.is-on{
  background: linear-gradient(135deg, rgba(8, 170, 120, .96), rgba(52, 224, 168, .86));
  border-color: rgba(52, 224, 168, .70);
  box-shadow: 0 10px 26px rgba(16, 185, 129, .22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.nc-ct-switch.is-on .nc-ct-switch-knob{ transform: translateX(20px); background: rgba(255,255,255,.95); box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 2px rgba(16,185,129,.35); }
.nc-ct-switch.is-disabled{ opacity: .45; cursor: not-allowed; filter: grayscale(0.3); }

/* Blocked list */
.nc-ct-blocked{
  margin-top: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.nc-ct-blocked-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.nc-ct-blocked-item:first-child{ border-top: 0; }
.nc-ct-blocked-ava{ width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.08); flex: 0 0 auto; display:flex; align-items:center; justify-content:center; }
.nc-ct-blocked-ava img{ width:100%; height:100%; object-fit: cover; }
.nc-ct-blocked-ava .fb{ font-weight: 900; color: rgba(255,255,255,.85); }
.nc-ct-blocked-meta{ flex: 1 1 auto; min-width: 0; }
.nc-ct-blocked-name{ font-weight: 900; color: rgba(255,255,255,.92); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-ct-blocked-sub{ color: rgba(255,255,255,.55); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-ct-blocked-btn{ height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color: rgba(255,255,255,.86); font-weight: 900; cursor: pointer; }
.nc-ct-blocked-btn:hover{ background: rgba(255,255,255,.10); }

@media (max-width: 960px){
  .nc-ct-row{ flex-direction: column; }
  .nc-ct-options{ width: 100%; flex: 1 1 auto; }
  .nc-ct-select{ width: 100%; }
  .nc-ct-option{ flex-direction: column; align-items: stretch; }
}


/* ===========================
   Appearance (Внешний вид)
   =========================== */

:root{
  --nc-chat-font: 16px;
  --nc-msg-gap: 10px; /* vertical margin for msg-row */

  /* Discord-like layout base colors (used by .dc-layout overrides)
     Important: these variables make the базовые темы (Light/Dim/Dark/System)
     actually change the UI, even when theme tinting is enabled. */
  --nc-dc-panel-bg: rgba(16,18,26,0.55);
  --nc-dc-header-bg: rgba(16,18,26,0.40);
  --nc-dc-messages-bg: rgba(16,18,26,0.18);
  --nc-dc-hover-bg: rgba(2,2,2,0.18);
  --nc-dc-avatar-bg: rgba(30,31,34,0.85);
  --nc-dc-text: #f2f3f5;
  --nc-dc-muted: #b5bac1;
  --nc-dc-body-text: #dbdee1;
  --nc-dc-time: #949ba4;
  --nc-dc-toolbar-bg: rgba(30,31,34,0.92);
  --nc-dc-toolbar-border: rgba(255,255,255,0.08);
  --nc-dc-input-bg: rgba(30,31,34,0.90);
  --nc-dc-input-placeholder: #949ba4;
}

/* Theme classes override core variables */
body.nc-theme-light{
  --bg:#f2f3f5;
  --glass:rgba(255,255,255,0.88);
  --border-soft:rgba(0,0,0,0.10);
  --text-main:#14151a;
  --text-soft:rgba(20,21,26,0.62);

  /* Discord-like layout colors for Light */
  --nc-dc-panel-bg: rgba(255,255,255,0.72);
  --nc-dc-header-bg: rgba(255,255,255,0.62);
  --nc-dc-messages-bg: rgba(255,255,255,0.22);
  --nc-dc-hover-bg: rgba(0,0,0,0.06);
  --nc-dc-avatar-bg: rgba(0,0,0,0.08);
  --nc-dc-text: #1f2328;
  --nc-dc-muted: rgba(31,35,40,0.62);
  --nc-dc-body-text: rgba(31,35,40,0.92);
  --nc-dc-time: rgba(31,35,40,0.52);
  --nc-dc-toolbar-bg: rgba(255,255,255,0.82);
  --nc-dc-toolbar-border: rgba(0,0,0,0.10);
  --nc-dc-input-bg: rgba(255,255,255,0.86);
  --nc-dc-input-placeholder: rgba(31,35,40,0.52);
}
body.nc-theme-dim{
  --bg:#1e1f22;
  --glass:rgba(35,36,40,0.92);
  --border-soft:rgba(255,255,255,0.08);
  --text-main:#f2f3f5;
  --text-soft:rgba(242,243,245,0.64);

  /* Discord-like layout colors for Dim */
  --nc-dc-panel-bg: rgba(35,36,40,0.68);
  --nc-dc-header-bg: rgba(35,36,40,0.52);
  --nc-dc-messages-bg: rgba(35,36,40,0.22);
  --nc-dc-hover-bg: rgba(0,0,0,0.14);
  --nc-dc-avatar-bg: rgba(30,31,34,0.88);
  --nc-dc-text: #f2f3f5;
  --nc-dc-muted: #b5bac1;
  --nc-dc-body-text: #dbdee1;
  --nc-dc-time: #949ba4;
  --nc-dc-toolbar-bg: rgba(30,31,34,0.92);
  --nc-dc-toolbar-border: rgba(255,255,255,0.08);
  --nc-dc-input-bg: rgba(30,31,34,0.90);
  --nc-dc-input-placeholder: #949ba4;
}
body.nc-theme-dark{
  /* default vars already match dark; keep class for state */

  /* Discord-like layout colors for Dark */
  --nc-dc-panel-bg: rgba(16,18,26,0.55);
  --nc-dc-header-bg: rgba(16,18,26,0.40);
  --nc-dc-messages-bg: rgba(16,18,26,0.18);
  --nc-dc-hover-bg: rgba(2,2,2,0.18);
  --nc-dc-avatar-bg: rgba(30,31,34,0.85);
  --nc-dc-text: #f2f3f5;
  --nc-dc-muted: #b5bac1;
  --nc-dc-body-text: #dbdee1;
  --nc-dc-time: #949ba4;
  --nc-dc-toolbar-bg: rgba(30,31,34,0.92);
  --nc-dc-toolbar-border: rgba(255,255,255,0.08);
  --nc-dc-input-bg: rgba(30,31,34,0.90);
  --nc-dc-input-placeholder: #949ba4;
}

/* Density classes */
body.nc-density-compact .friend-item{ padding:6px 10px; }
body.nc-density-spacious .friend-item{ padding:14px 10px; }
body.nc-density-compact .channel-item{ padding:2px 6px; }
body.nc-density-spacious .channel-item{ padding:7px 6px; }

/* Chat display */
body.nc-chat-compact .msg-row .msg-head{ display:none; }
body.nc-chat-compact .msg-row .msg-avatar{ opacity:0; pointer-events:none; }
body.nc-chat-compact .msg-row{ margin-top:2px !important; }

/* Live vars applied from settings */
.msg-row{ margin: var(--nc-msg-gap) 2px !important; }
.msg-bubble{ font-size: var(--nc-chat-font) !important; }
#message-input{ font-size: var(--nc-chat-font) !important; }

/* Appearance page UI */
.nc-ap-section{ padding: 16px 0; border-top: 1px solid rgba(255,255,255,.06); }
.nc-settings-page[data-page="appearance"] .nc-ap-section:first-of-type{ border-top:0; padding-top: 6px; }
.nc-ap-h{ font-weight: 900; font-size: 14px; color: rgba(255,255,255,.92); }
.nc-ap-sub{ margin-top: 6px; color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.35; }

.nc-ap-theme-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.nc-ap-theme{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 10px; padding: 10px 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: rgba(255,255,255,.86); cursor: pointer; }
.nc-ap-theme:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.nc-ap-theme.is-active{ border-color: rgba(16,185,129,.55); box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
.nc-ap-theme-swatch{ width: 64px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); position: relative; overflow:hidden; }
.nc-ap-theme-swatch::after{ content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(122,243,255,0.32), rgba(255,124,251,0.26)); opacity:.45; }
.nc-ap-theme-swatch.is-light{ background: #f2f3f5; border-color: rgba(0,0,0,.12); }
.nc-ap-theme-swatch.is-dim{ background: #1e1f22; }
.nc-ap-theme-swatch.is-dark{ background: #0f1115; }
.nc-ap-theme-swatch.is-system{ background: linear-gradient(90deg, #f2f3f5 0 50%, #1e1f22 50% 100%); border-color: rgba(255,255,255,.12); }
.nc-ap-theme-name{ font-size: 12px; font-weight: 900; }

.nc-ap-colors{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.nc-ap-color{ width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, var(--c1), var(--c2)); cursor: pointer; position: relative; }
.nc-ap-color:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.nc-ap-color.is-active::after{ content:"✓"; position:absolute; right: 8px; top: 6px; font-weight: 900; font-size: 13px; color: rgba(255,255,255,.92); text-shadow: 0 2px 10px rgba(0,0,0,.55); }

.nc-ap-row{ margin-top: 12px; display:flex; gap: 10px; align-items:center; }
.nc-ap-preview-btn{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
  font-weight: 900;
  cursor: pointer;
}
.nc-ap-preview-btn:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }

.nc-ap-ghost-btn{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  cursor: pointer;
}
.nc-ap-ghost-btn:hover{ background: rgba(255,255,255,.06); }

.nc-ap-radio{ display:flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.nc-ap-radio-row{ display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); cursor: pointer; }
.nc-ap-radio-row:hover{ background: rgba(255,255,255,.06); }
.nc-ap-radio-row input{ margin: 0 2px 0 0; }

.nc-ap-slider{ margin-top: 12px; }
.nc-ap-subtitle{ font-weight: 900; color: rgba(255,255,255,.90); font-size: 13px; margin-bottom: 8px; }

.nc-ap-range input[type="range"]{
  width:100%;
  accent-color: #10b981;
}
.nc-ap-range-scale{ display:flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.55); margin-top: 8px; }
.nc-ap-range-val{ color: rgba(16,185,129,.95); font-weight: 900; }
.nc-ap-hint{ margin-top: 8px; color: rgba(255,255,255,.50); font-size: 12px; }

@media (max-width: 960px){
  .nc-ap-theme-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ===== Theme Preview Sidebar (Appearance) ===== */

.nc-theme-preview{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:380px;
  z-index:20040;
  background:transparent;
  padding:12px;
  display:flex;
  flex-direction:column;
  /* Important: the container itself must not block clicks outside the panel.
     Only the inner panel should be interactive. */
  pointer-events:none;
}
.nc-theme-preview.is-hidden{ display:none; }

/* Make the preview panel feel like Discord: translucent + theme-tinted */
.nc-theme-preview-inner{
  height:100%;
  border-radius:22px;
  background:rgba(16,18,26,0.55) !important;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:-30px 0 70px rgba(0,0,0,0.55);
  backdrop-filter:blur(24px);
  position:relative;
  overflow:hidden;
  pointer-events:auto;
}

.nc-theme-preview-inner::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:var(--nc-theme-gradient);
  opacity:0.55;
  filter:saturate(1.35);
  pointer-events:none;
}

.nc-theme-preview-head{
  padding:14px 14px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.nc-theme-preview-title{ font-weight:700; font-size:16px; }

.nc-theme-preview-close{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,0.04);
  color:var(--text-main);
  cursor:pointer;
}

.nc-theme-preview-body{
  padding:0 14px 14px;
  overflow:auto;
}

.nc-tp-card{
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,0.045);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
}
.nc-tp-card-h{ font-weight:700; margin-bottom:4px; }
.nc-tp-card-sub{ color:var(--text-soft); font-size:12px; margin-bottom:10px; }

.nc-tp-btn{
  width:100%;
  border:none;
  border-radius:12px;
  padding:10px 12px;
  background:linear-gradient(135deg,var(--accent-soft),var(--accent));
  color:#06101a;
  font-weight:800;
  cursor:pointer;
}

.nc-tp-section-title{ font-weight:700; margin:10px 0 8px; }

.nc-tp-stops{
  display:flex;
  gap:10px;
  align-items:center;
  margin:6px 0 10px;
}

.nc-tp-stop{
  width:22px;
  height:22px;
  border-radius:6px;
  border:2px solid rgba(255,255,255,0.18);
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,0.5) inset;
}

.nc-tp-stop.is-active{
  border-color:rgba(255,255,255,0.85);
  box-shadow:0 0 0 2px rgba(0,0,0,0.6) inset, 0 0 0 2px rgba(255,255,255,0.16);
}

.nc-tp-stop-actions{ margin-left:auto; display:flex; gap:8px; }

.nc-tp-mini{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,0.04);
  color:var(--text-main);
  cursor:pointer;
  font-weight:900;
}

/* --- Discord-like gradient preview strip + picker --- */
.nc-tp-gradient-strip{
  height:34px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
  margin:8px 0 10px;
  background:var(--nc-theme-gradient);
}

.nc-tp-picker{ display:flex; flex-direction:column; gap:10px; }

.nc-tp-sv{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.22);
  box-shadow:0 14px 34px rgba(0,0,0,0.35);
}

.nc-tp-sv canvas{
  display:block;
  width:100%;
  height:auto;
}

.nc-tp-sv-cursor{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.95);
  box-shadow:0 0 0 2px rgba(0,0,0,0.55), 0 10px 18px rgba(0,0,0,0.35);
  transform:translate(-50%, -50%);
  pointer-events:none;
}

.nc-tp-hue input[type=range]{
  width:100%;
  accent-color:#10b981;
}

.nc-tp-hex-row{ display:flex; gap:10px; align-items:center; }

.nc-tp-color{
  width:44px;
  height:34px;
  border:none;
  background:transparent;
  padding:0;
}

.nc-tp-hex{
  flex:1;
  height:34px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:rgba(0,0,0,0.35);
  color:var(--text-main);
  padding:0 10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.nc-tp-slider{ margin-top:10px; }

.nc-tp-slider-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--text-soft);
  font-size:12px;
  margin-bottom:6px;
}

.nc-tp-slider input[type=range]{ width:100%; }

.nc-tp-actions{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }

.nc-tp-ghost{
  width:100%;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,0.04);
  color:var(--text-main);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
}

.nc-tp-danger{ background:rgba(255,107,129,0.12); border-color:rgba(255,107,129,0.35); }

body.nc-theme-preview-open .app-root{
  /* keep layout stable; sidebar overlays */
}

/*
  Theme Preview Sidebar should not make the underlying UI feel "unclickable".
  When the preview panel is open on the right, reserve space for it (Discord-like)
  so header actions (call / add-friend, etc.) remain visible and clickable.
*/
body.nc-theme-preview-open .layout.dc-layout{
  width: calc(100% - 392px);
  max-width: calc(100% - 392px);
}

@media (max-width: 980px){
  /* On small screens keep the layout full-width and let the preview overlay as a drawer */
  body.nc-theme-preview-open .layout.dc-layout{
    width: 100%;
    max-width: 100%;
  }
}

/* ============================
   Click-safety overrides (v39)
   Prevent hidden overlays from intercepting clicks.
   ============================ */

#nc-theme-preview.is-hidden,
#nc-theme-preview[aria-hidden="true"]{
  display:none !important;
  pointer-events:none !important;
}

#nc-settings-overlay.is-hidden,
#nc-settings-overlay[aria-hidden="true"]{
  display:none !important;
  pointer-events:none !important;
}

#drop-overlay.is-hidden,
#drop-overlay[aria-hidden="true"],
#drop-overlay[hidden]{
  display:none !important;
  pointer-events:none !important;
}

.modal-backdrop.is-hidden,
.modal-backdrop[aria-hidden="true"],
.modal-backdrop[hidden]{
  display:none !important;
  pointer-events:none !important;
}

/* Theme preview container never blocks underlying UI; only inner panel is interactive */
#nc-theme-preview{ pointer-events:none !important; }
#nc-theme-preview .nc-theme-preview-inner{ pointer-events:auto !important; }


/* v54: DM call avatars should be pure circles (no rounded-square tile clipping) */
.call-hud[data-layout="dm"] .participant-tile{
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.call-hud[data-layout="dm"] .participant-tile::before{
    border-radius: 999px !important;
}


/* v56: DM call avatars must be plain circles with NO orbital discs/halos behind them. */
.call-hud[data-layout="dm"] .participant-tile::before{
    content: none !important;
    display: none !important;
}
.call-hud[data-layout="dm"] .participant-tile::after{
    content: none !important;
    display: none !important;
}
/* Also remove any leftover halo pseudo-elements on the avatar itself (keep only actual image + speaking outline). */
.call-hud[data-layout="dm"] .participant-avatar::before{
    content: none !important;
    display: none !important;
}


/* ===== v57: DM call avatars should be plain circles (no glass discs / no orbit halos) ===== */
.call-hud[data-layout="dm"] .participant-avatar .avatar-orbit{
  display:none !important;
}
.call-hud[data-layout="dm"] .participant-avatar::before,
.call-hud[data-layout="dm"] .participant-avatar::after,
.call-hud[data-layout="dm"] .participant-tile::before,
.call-hud[data-layout="dm"] .participant-tile::after{
  content:none !important;
  display:none !important;
}
.call-hud[data-layout="dm"] .participant-avatar{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 5;
}
.call-hud[data-layout="dm"] .participant-tile[data-speaking="1"] .participant-avatar{
  box-shadow: 0 0 0 3px rgba(0,255,214,0.55) !important;
}

/* =========================
   v66: DM screenshare layout (Discord-like tiles + watch button)
   ========================= */

/* DM stage background: restore glass + theme background (as it was),
   but keep layers BEHIND all tiles/video so nothing looks like an overlay. */
.call-hud[data-layout="dm"] .call-stage{
  background: rgba(16,18,26,0.14) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.call-hud[data-layout="dm"] .call-stage::before{
  display:block !important;
  z-index:-2 !important;
  opacity: var(--nc-theme-opacity, .65) !important;
}
.call-hud[data-layout="dm"] .call-stage::after{
  display:block !important;
  z-index:-1 !important;
  opacity: .35 !important;
}

/* Default DM stage: center tiles without heavy effects */
.call-hud[data-layout="dm"] .call-stage-main{
  padding: 18px 18px 92px !important;
  gap: 14px !important;
}

/* When screenshare is active in DM call:
   3 tiles in one row, stretched to full available size (no "tiny squares").
   Screenshare gets a bit more width like Discord, participants stay equal. */
.call-hud[data-layout="dm"].has-screen .call-stage-main{
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  align-content: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Make participant wrapper transparent so its children become grid items */
.call-hud[data-layout="dm"].has-screen #call-participants{
  display: contents !important;
}

/* Screenshare tile dimensions */
.call-hud[data-layout="dm"].has-screen .call-screen-stage{
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
}
.call-hud[data-layout="dm"].has-screen .call-screen-stage .screen-share-frame{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(0,0,0,0.28) !important;
}

/* Participant tiles in DM when screenshare is active: use rectangular tiles (Discord-ish) */
.call-hud[data-layout="dm"].has-screen .participant-tile{
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(0,0,0,0.20) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Keep avatars centered; hide labels in tile mode */
.call-hud[data-layout="dm"].has-screen .participant-name,
.call-hud[data-layout="dm"].has-screen .participant-sub,
.call-hud[data-layout="dm"].has-screen .voice-bars{
  display: none !important;
}

/* Reduce avatar size a bit so it sits nicely inside a tile */
.call-hud[data-layout="dm"].has-screen .participant-avatar{
  width: 92px !important;
  height: 92px !important;
  border-radius: 999px !important;
}

/* Watch overlay inside screenshare tile */
.call-ss-watch{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.call-ss-watch.is-hidden{ display: none !important; }
.call-ss-watch-btn{
  pointer-events: auto;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: var(--text-main);
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 14px 32px rgba(0,0,0,0.55);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.call-ss-watch-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.26);
}

/* Keep the call controls readable over tiles */
.call-hud[data-layout="dm"] .dm-call-bar{
  background: rgba(32,34,37,0.92) !important;
}


/* =========================
   v67: ScreenShare Quick Quality modal + fixes
   ========================= */

/* When screenshare is active, never paint heavy stage vignette/blur above the content */
.call-hud.has-screen .call-stage::before,
.call-hud.has-screen .call-stage::after{
  content:none !important;
  display:none !important;
}

/* Keep the screenshare frame always on top */
.call-hud.has-screen .call-screen-stage{
  position:relative;
  z-index: 10;
}
.call-hud.has-screen .call-participants{
  position:relative;
  z-index: 1;
}


/* DM screenshare: ensure participant tiles stay clickable (PKM menu) */
.call-hud[data-layout="dm"].has-screen .call-screen-stage{
  z-index: 1 !important;
}
.call-hud[data-layout="dm"].has-screen .participant-tile{
  position: relative !important;
  z-index: 5 !important;
}
/* Remote screenshare preview (before user clicks "Смотреть стрим") */
.screen-share-frame.is-preview{
  background: #000 !important;
}

.screen-share-frame.is-preview .remote-screen-video{
  background: transparent !important;
}

/* Quick quality picker modal (small, Discord-like) */
.ssq-overlay[hidden]{ display:none !important; }
.ssq-overlay{
  position:fixed;
  inset:0;
  z-index:10050;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px;
}
.ssq-card{
  width: min(420px, 92vw);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(16,18,26,0.88);
  box-shadow: 0 22px 70px rgba(0,0,0,0.70);
  overflow:hidden;
}
.ssq-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.20);
}
.ssq-title{ font-weight: 900; font-size: 14px; letter-spacing: .2px; }
.ssq-close{
  appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-main);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor:pointer;
}
.ssq-body{ padding: 12px 14px 14px; display:flex; flex-direction:column; gap:12px; }
.ssq-row{ display:flex; flex-direction:column; gap:8px; }
.ssq-label{ font-size: 12px; opacity: 0.72; }
.ssq-seg{
  display:flex;
  gap:8px;
  padding:4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.26);
}
.ssq-opt{
  flex:1;
  appearance:none;
  border:0;
  background: transparent;
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  padding: 10px 10px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}
.ssq-opt:hover{ background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.ssq-opt.is-active{
  background: linear-gradient(135deg, rgba(0,255,214,0.34), rgba(106,124,255,0.22));
  color: #070a12;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(0,255,214,0.10);
}
.ssq-actions{ display:flex; gap:10px; margin-top: 2px; }
.ssq-btn{
  flex:1;
  appearance:none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-main);
  border-radius: 14px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 900;
}
.ssq-btn.primary{
  border: none;
  background: linear-gradient(135deg, rgba(0,255,214,0.88), rgba(106,124,255,0.45));
  color: #061016;
}
.ssq-btn:active{ transform: translateY(0.6px); }

/* Reconnect button removed/disabled (requested) */
#btn-call-reconnect{display:none !important;}


/* =========================
   v72: Discord-like call tiles (DM + Voice) + user context menu triggers
   ========================= */

/* 1) Make DM call stage neutral black (Discord-ish) */
.call-hud[data-layout="dm"] .call-stage{
  background:#000 !important;
}
.call-hud[data-layout="dm"] .call-stage::before,
.call-hud[data-layout="dm"] .call-stage::after{
  content:none !important;
  display:none !important;
}

/* 2) DM layout: tiles in a row, equal sizes */
.call-hud[data-layout="dm"] .call-stage-main{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  padding:18px !important;
}
.call-hud[data-layout="dm"].has-screen .call-stage-main{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* Let participant tiles become direct grid items */
.call-hud[data-layout="dm"] #call-participants{
  display: contents !important;
}


/* Screenshare tile in DM should match tile sizing */
.call-hud[data-layout="dm"] .call-screen-stage{
  width:auto !important;
  min-height:240px !important;
  aspect-ratio: 16 / 9;
}
.call-hud[data-layout="dm"] .call-screen-stage .screen-share-frame{
  height:100% !important;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  overflow:hidden;
}
/* 3) Participant tile look: flat colored rectangle like Discord */
.call-hud[data-layout="dm"] .participant-tile,
.voice-participant{
  position:relative;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  overflow:hidden;
  background: hsl(var(--tile-h, 210), 45%, 40%);
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}
.call-hud[data-layout="dm"] .participant-tile{ 
  aspect-ratio: 16 / 9;
  min-height: 240px;
  padding: 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.call-hud[data-layout="dm"] .participant-tile::before,
.call-hud[data-layout="dm"] .participant-tile::after{
  content:none !important;
  display:none !important;
}

/* Hide legacy labels inside tile; we use overlay badge instead */
.call-hud[data-layout="dm"] .participant-name,
.call-hud[data-layout="dm"] .participant-sub,
.call-hud[data-layout="dm"] .voice-bars{
  display:none !important;
}

/* Avatar in tile: centered, no rings/orbits */
.call-hud[data-layout="dm"] .participant-avatar{
  width: 96px !important;
  height: 96px !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
  background: rgba(0,0,0,0.20) !important;
}
.call-hud[data-layout="dm"] .avatar-orbit{ display:none !important; }
.call-hud[data-layout="dm"] .participant-avatar-inner{
  width:100%;
  height:100%;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.call-hud[data-layout="dm"] .participant-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.call-hud[data-layout="dm"] .participant-avatar-initial{
  font-weight:900;
  font-size:34px;
  color:rgba(255,255,255,0.92);
}

/* 4) Overlay badge + three-dots button (opens user ctx) */
.tile-name-badge{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:6px 10px;
  border-radius:10px;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  font-size:12px;
  font-weight:800;
  line-height:1;
  max-width: calc(100% - 72px);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events:none;
}
.tile-more-btn{
  position:absolute;
  right:10px;
  bottom:10px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.40);
  color: rgba(255,255,255,0.90);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  pointer-events:auto;
}
.tile-more-btn:hover{ background: rgba(0,0,0,0.55); }
.tile-more-btn .i{ width:18px; height:18px; fill: currentColor; }

/* Voice tiles: keep existing layout but add the dots button */
.voice-participant{ background: hsl(var(--tile-h, 210), 45%, 40%) !important; }
.vp-more-btn{
  position:absolute;
  right:10px;
  bottom:10px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.40);
  color: rgba(255,255,255,0.90);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.vp-more-btn .i{ width:18px; height:18px; fill: currentColor; }
.vp-more-btn:hover{ background: rgba(0,0,0,0.55); }

/* Keep the VP name-tag readable over bright backgrounds */
.voice-participant .vp-tag{
  background: rgba(0,0,0,0.40);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
}


/* ===== v91: DM screenshare tiles should be GLASS and WIDE (no tall pillars) ===== */
.call-hud[data-layout="dm"].has-screen .call-stage{
  align-items: center !important; /* center the grid vertically so it doesn't stretch down */
}

/* Let the grid size itself by tile aspect-ratio instead of filling full height */
.call-hud[data-layout="dm"].has-screen .call-stage-main{
  height: auto !important;
  min-height: 0 !important;
  align-content: center !important;
}

/* Screenshare tile: keep it wide (16:9) */
.call-hud[data-layout="dm"].has-screen .call-screen-stage{
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}
.call-hud[data-layout="dm"].has-screen .call-screen-stage .screen-share-frame{
  height: 100% !important;
  background: rgba(16,18,26,0.45) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.50) !important;
}

/* Participant tiles: wide + glass */
.call-hud[data-layout="dm"].has-screen .participant-tile{
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  background: rgba(16,18,26,0.42) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.50) !important;
}

/* Re-enable subtle glass sheen inside DM tiles (was disabled by older overrides) */
.call-hud[data-layout="dm"].has-screen .participant-tile::before{
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(280px 160px at 18% 6%, rgba(138,99,255,0.16), transparent 60%),
    radial-gradient(260px 160px at 92% 12%, rgba(0,255,214,0.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 42%);
  opacity: 0.95;
  pointer-events: none;
}

/* ===== v91: DM screenshare tiles should be GLASS and WIDE (no tall pillars) ===== */
.call-hud[data-layout="dm"].has-screen .call-stage{
  align-items: center !important; /* do not stretch tiles vertically */
}

.call-hud[data-layout="dm"].has-screen .call-stage-main{
  height: auto !important;
  min-height: 0 !important;
  align-content: center !important;
}

/* Make the 3-up row feel like Discord: share a bit wider, tiles keep 16:9 */
.call-hud[data-layout="dm"].has-screen .call-stage-main{
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: 16px !important;
}

/* v78: Hide participants without video (checkbox in user context menu) */
.call-hud.hide-novideo.has-screen #call-participants{
  display:none !important;
}
.call-hud.hide-novideo.has-screen .call-stage-main{
  grid-template-columns: 1fr !important;
}
.call-hud.hide-novideo.has-screen .call-screen-stage{
  grid-column: 1 / -1 !important;
}


.call-hud[data-layout="dm"].has-screen .call-screen-stage{
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

.call-hud[data-layout="dm"].has-screen .call-screen-stage .screen-share-frame{
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  background: rgba(16,18,26,0.45) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,0.55) !important;
}

/* Participant tiles: glass + 16:9, no full-height stretching */
.call-hud[data-layout="dm"].has-screen .participant-tile{
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(16,18,26,0.40) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,0.55) !important;
}

/* Restore a subtle "glass sheen" inside the tile (safe: inside tile only) */
.call-hud[data-layout="dm"].has-screen .participant-tile::before{
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(240px 140px at 25% 0%, rgba(138,99,255,0.16), transparent 62%),
    radial-gradient(220px 140px at 90% 10%, rgba(0,255,214,0.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 55%);
  opacity: 0.90;
  pointer-events: none;
}

/* Keep video inside share tile centered and not clipped */
.call-hud[data-layout="dm"].has-screen .call-screen-stage .remote-screen-video{
  object-fit: contain !important;
  background: #000 !important;
}

/* ===== v91b: Call HUD backdrop should stay glass (not pure black) ===== */
.call-hud::before{
  background: linear-gradient(135deg, rgba(14,18,40,0.40), rgba(0,140,130,0.18)) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

/* =========================
   v69: Restore "glass" theme background in DM call stage + fix tile stretching
   User request: return the original Pulsar/teal glass background (no black void)
   and make tiles stretch horizontally (not tall columns).
   ========================= */

/* Softer HUD dim so the app theme is still visible behind the call window */
.call-hud::before{
  background:
    radial-gradient(circle at 18% 12%, rgba(0,255,214,0.14) 0, transparent 58%),
    radial-gradient(circle at 82% 86%, rgba(138,99,255,0.16) 0, transparent 60%),
    rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

/* Make stage itself carry the theme wash (inside the call window) */
.call-hud[data-layout="dm"] .call-stage{
  position: relative !important;
  overflow: hidden !important;
  background: rgba(16,18,26,0.10) !important;
}

/* IMPORTANT: keep these even when screenshare is active (override v67 kill-switch) */
.call-hud[data-layout="dm"] .call-stage::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--bg) !important;
  opacity: 1 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.call-hud[data-layout="dm"] .call-stage::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -28% !important;
  background: var(--nc-theme-gradient) !important;
  opacity: var(--nc-theme-opacity, 0.92) !important;
  filter: saturate(1.35) contrast(1.02) !important;
  transform: translateZ(0) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Stage content above the theme wash */
.call-hud[data-layout="dm"] .call-stage > *{
  position: relative !important;
  z-index: 1 !important;
}

/* DM screenshare: keep 3 tiles in one row, but DO NOT force full height (prevents tall "columns") */
.call-hud[data-layout="dm"].has-screen .call-stage-main{
  grid-template-rows: auto !important;
  align-items: center !important;
  height: auto !important;
}

.call-hud[data-layout="dm"].has-screen .call-screen-stage{
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
}

.call-hud[data-layout="dm"].has-screen .call-screen-stage .screen-share-frame{
  height: 100% !important;
}

.call-hud[data-layout="dm"].has-screen .participant-tile{
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
}

/* Make tiles feel more "glass" */
.call-hud[data-layout="dm"].has-screen .participant-tile,
.call-hud[data-layout="dm"].has-screen .call-screen-stage .screen-share-frame{
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  background: rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}


/* =========================
   v71: DM call (NO screenshare) — place the 2 avatar circles closer (Discord spacing)
   ========================= */
.call-hud[data-layout="dm"]:not(.has-screen) .call-stage-main{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  min-height:0 !important;
  padding: 0 18px 82px !important; /* keep room for the DM control bar */
}

.call-hud[data-layout="dm"]:not(.has-screen) #call-participants{
  display:flex !important;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;
  padding:0 !important;
  margin:0 !important;
  gap: clamp(56px, 10vw, 140px) !important;
}

/* Remove any leftover "tile" layout in DM (no screenshare): we only want the circles */
.call-hud[data-layout="dm"]:not(.has-screen) .participant-tile{
  width:auto !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* =========================
   v72: DM call (WITH screenshare) — Discord-like layout
   Big stream on the left, participant tiles stacked on the right.
   ========================= */
.call-hud[data-layout="dm"].has-screen .call-stage-main{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px) !important;
  grid-template-rows: 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  align-content: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 18px 18px 92px !important; /* room for bottom call bar */
}

/* Left: screenshare stage fills the whole left column */
.call-hud[data-layout="dm"].has-screen .call-screen-stage{
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}
.call-hud[data-layout="dm"].has-screen .call-screen-stage .screen-share-frame{
  height: 100% !important;
  border-radius: 14px !important;
  overflow: hidden;
}

/* Right: participants become a vertical column */
.call-hud[data-layout="dm"].has-screen #call-participants{
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
}

.call-hud[data-layout="dm"].has-screen .participant-tile{
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(0,0,0,0.20) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Keep avatars nicely sized inside the right tiles */
.call-hud[data-layout="dm"].has-screen .participant-avatar{
  width: 86px !important;
  height: 86px !important;
  border-radius: 999px !important;
}

/* Hide orbital discs in tile mode (only for screenshare) */
.call-hud[data-layout="dm"].has-screen .participant-tile::before{
  display: none !important;
  content: none !important;
}

/* Mobile / narrow: stack participants under the stream */
@media (max-width: 820px){
  .call-hud[data-layout="dm"].has-screen .call-stage-main{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .call-hud[data-layout="dm"].has-screen .call-screen-stage{
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  .call-hud[data-layout="dm"].has-screen #call-participants{
    grid-column: 1 !important;
    grid-row: 2 !important;
    flex-direction: row !important;
    height: auto !important;
  }
  .call-hud[data-layout="dm"].has-screen .participant-tile{
    flex: 1 1 0 !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
}

/* =========================
   v73: DM call (WITH screenshare) — cap screenshare width (closer to Discord)
   The stream frame should not stretch to a super-wide "wall" on ultrawide windows.
   ========================= */
.call-hud[data-layout="dm"].has-screen .call-screen-stage{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
}

.call-hud[data-layout="dm"].has-screen .call-screen-stage .screen-share-frame{
  width: 100% !important;
  /* Wider than the modal cap, but still not a "wall" on ultrawide monitors */
  max-width: clamp(680px, 64vw, 1280px) !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: 100% !important;
}

.call-hud[data-layout="dm"].has-screen .call-screen-stage .remote-screen-video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  max-height: none !important;
}

/* =========================
   v74: Screenshare should actually use the whole viewport (Discord-like)
   The old modal cap (980x640) made fullscreen look tiny.
   ========================= */

/* Expand the call window to fill the call overlay whenever screenshare is active
   (but keep the small "minimized" state intact). */
.call-hud.has-screen:not([data-min="1"]) .call-window{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

/* =========================
   v75: TRUE fullscreen screenshare view (Discord-like)
   - Remove the centered modal cap when a call is sharing screen
   - Works both in normal view and Fullscreen API mode
   ========================= */

.call-hud.has-screen:not([data-min="1"]):not([data-layout="dm"]){
  position: fixed !important;
  inset: 0 !important;
  padding: 0 !important;
}

/* No dark modal backdrop in screenshare view (Discord style) */
.call-hud.has-screen:not([data-min="1"]):not([data-layout="dm"])::before{
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Make the call window fill the whole viewport */
.call-hud.has-screen:not([data-min="1"]):not([data-layout="dm"]) .call-window{
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

/* If user triggers Fullscreen API on the call window, remove caps too */
.call-window:fullscreen,
.call-window:-webkit-full-screen{
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* If user triggers Fullscreen API on the inline stage, make it occupy the whole screen */
#call-screen-stage:fullscreen,
#call-screen-stage:-webkit-full-screen{
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background: rgba(0,0,0,0.85) !important;
  padding: 0 !important;
}

/* Ensure stage content uses full height in the full-view screenshare mode */
.call-hud.has-screen:not([data-min="1"]):not([data-layout="dm"]) .call-stage{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.call-hud.has-screen:not([data-min="1"]):not([data-layout="dm"]) .call-stage-main{
  height: 100% !important;
  min-height: 0 !important;
}


/* =========================
   v76: DM call (WITH screenshare) — Discord GRID view (3 tiles in a row)
   Target: like Discord screenshot (share tile + 2 participant tiles, same row)
   ========================= */

/* Force 3-up grid for DM screenshare (overrides older stacked-right layout) */
.call-hud[data-layout="dm"].has-screen .call-stage{
  /* Keep your glass theme, but add a subtle dark wash so tiles read like Discord */
  background: rgba(0,0,0,0.18) !important;
}

.call-hud[data-layout="dm"].has-screen .call-stage-main{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  align-content: center !important;
  padding: 18px 18px 92px !important; /* room for bottom call bar */
  height: 100% !important;
  min-height: 0 !important;
}

/* Make participant container transparent so tiles become direct grid items */
.call-hud[data-layout="dm"].has-screen #call-participants{
  display: contents !important;
}

/* Screenshare tile: same proportions as Discord grid tiles */
.call-hud[data-layout="dm"].has-screen .call-screen-stage{
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  aspect-ratio: 16 / 9 !important;
}
.call-hud[data-layout="dm"].has-screen .call-screen-stage .screen-share-frame{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  overflow: hidden !important;
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

/* Participant tiles: match size/shape of screenshare tile */
.call-hud[data-layout="dm"].has-screen .participant-tile{
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Make avatar tiles look like your glass cards (centered, slightly bigger) */
.call-hud[data-layout="dm"].has-screen .participant-avatar{
  width: 96px !important;
  height: 96px !important;
  border-radius: 999px !important;
}

/* Hide labels inside tiles (Discord grid look) */
.call-hud[data-layout="dm"].has-screen .participant-name,
.call-hud[data-layout="dm"].has-screen .participant-sub,
.call-hud[data-layout="dm"].has-screen .voice-bars{
  display: none !important;
}

/* Narrow screens: stack tiles vertically */
@media (max-width: 980px){
  .call-hud[data-layout="dm"].has-screen .call-stage-main{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
}