@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {
    --bg-app: #1e1f22;
    --bg-rail: #111214;
    --bg-sidebar: #2b2d31;
    --bg-chat: #313338;
    --bg-panel: #232428;
    --bg-input: #1e1f22;
    --bg-hover: #35373c;
    --bg-hover-2: #404249;
    --accent: #5865f2;
    --accent-hover: #4752c4;
    --accent-active: #3c45a5;
    --green: #23a55a;
    --green-hover: #1a8347;
    --red: #f23f43;
    --red-hover: #c93438;
    --text: #dbdee1;
    --text-strong: #f2f3f5;
    --text-muted: #949ba4;
    --text-faint: #80848e;
    --border: #232428;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Nunito Sans", sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-app);
    color: var(--text);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #1a1b1e; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }

/* ---------- Auth overlay ---------- */
#authOverlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: linear-gradient(135deg, #404eed, #5865f2 60%, #3c45a5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 420px;
    max-width: 92vw;
    background: var(--bg-chat);
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}

.auth-card .logo {
    text-align: center;
    margin-bottom: 22px;
}

.auth-card .logo i {
    font-size: 42px;
    color: var(--accent);
    margin-bottom: 10px;
}

.auth-card .logo h1 {
    font-size: 22px;
    color: var(--text-strong);
    font-weight: 800;
}

.auth-card .logo p {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
}

.auth-card .form-group { margin-bottom: 16px; }

.auth-card label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: .5px;
}

.auth-card input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid #111;
    border-radius: 4px;
    color: var(--text);
    font-size: 15px;
    outline: none;
}

.auth-card input:focus { border-color: var(--accent); }

.auth-card .submit-btn {
    width: 100%;
    padding: 11px;
    margin-top: 6px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.auth-card .submit-btn:hover { background: var(--accent-hover); }
.auth-card .submit-btn:disabled { opacity: .6; cursor: default; }

.auth-switch {
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-muted);
}

.auth-switch a {
    color: #00a8fc;
    cursor: pointer;
    text-decoration: none;
}

.auth-switch a:hover { text-decoration: underline; }

.auth-msg {
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 14px;
}
.auth-msg.error { background: rgba(242, 63, 67, .12); color: #f78488; border: 1px solid var(--red); }
.auth-msg.success { background: rgba(35, 165, 90, .12); color: #6fd39a; border: 1px solid var(--green); }

/* ---------- Main layout ---------- */
main {
    width: 100%;
    height: 100vh;
    display: flex;
}

aside {
    width: 72px;
    flex-shrink: 0;
    padding: 12px 0;
    background-color: var(--bg-rail);
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    gap: 8px;
}

aside .rail-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--text);
    background-color: var(--bg-sidebar);
    border-radius: 50%;
    cursor: pointer;
    transition: all .15s ease-in-out;
}

aside .rail-btn.brand { background-color: var(--accent); color: #fff; }
aside .rail-btn:hover { border-radius: 16px; background-color: var(--accent); color: #fff; }
aside .rail-btn.active { border-radius: 16px; background-color: var(--accent); color: #fff; }
aside .rail-btn.logout:hover { background-color: var(--red); }

aside hr {
    width: 32px;
    border: none;
    border-top: 2px solid #2b2d31;
    border-radius: 2px;
}

aside .spacer { flex: 1; }

/* ---------- Sidebar chat ---------- */
.sidebar-chat {
    width: 240px;
    flex-shrink: 0;
    height: 100vh;
    background-color: var(--bg-sidebar);
    position: relative;
    display: flex;
    flex-direction: column;
}

.sidebar-chat .top-nav {
    padding: 10px;
    border-bottom: 1px solid #202225;
    flex-shrink: 0;
}

.sidebar-chat .top-nav input {
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    background-color: var(--bg-input);
    border: none;
    outline: none;
    color: var(--text);
    font-size: 14px;
}

.sidebar-chat .scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.sidebar-chat .list { display: flex; flex-direction: column; gap: 2px; }

.list-item {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all .1s ease-in-out;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 15px;
}

.list-item svg path { fill: var(--text-muted); }
.list-item:hover { background-color: var(--bg-hover); color: var(--text-strong); }
.list-item:hover svg path { fill: var(--text-strong); }
.list-item.active { background-color: var(--bg-hover-2); color: #fff; }
.list-item.active svg path { fill: #fff; }

.dm { margin-top: 14px; }

.dm h1 {
    padding: 8px 10px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-faint);
    cursor: pointer;
}
.dm h1:hover { color: var(--text-muted); }

.friends { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

.f-li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
}

.f-li:hover { background-color: var(--bg-hover); }
.f-li.active { background-color: var(--bg-hover-2); }

.f-li p {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 15px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.f-li:hover p, .f-li.active p { color: var(--text-strong); }

.img-wrapper {
    width: 32px;
    height: 32px;
    position: relative;
    flex-shrink: 0;
}

.img-wrapper img,
.avatar-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.avatar-fallback {
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #80848e;
    border: 3px solid var(--bg-sidebar);
    box-sizing: content-box;
}
.status-dot.online { background-color: var(--green); }
.status-dot.dnd { background-color: var(--red); }
.status-dot.invisible, .status-dot.offline { background-color: #80848e; }

.f-li .unread-badge, .list-item .unread-badge {
    background: var(--red);
    color: #fff;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
}

/* profile panel */
.profile {
    background-color: var(--bg-panel);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    flex-shrink: 0;
}

.profile .left { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.profile .left .txt { line-height: 16px; overflow: hidden; }
.profile .left .txt p { font-weight: 700; font-size: 14px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile .left .txt span { font-weight: 400; font-size: 12px; color: var(--text-muted); }

.profile .right { display: flex; align-items: center; gap: 4px; font-size: 16px; }
.profile .right i {
    cursor: pointer;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.profile .right i:hover { background: var(--bg-hover); color: var(--text-strong); }
.profile .right i.muted { color: var(--red); }

/* ---------- Right area ---------- */
.rightside-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-chat);
    min-width: 0;
}

.rightside-area .top-bar {
    height: 48px;
    flex-shrink: 0;
    padding: 0 16px;
    border-bottom: 1px solid #26272b;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

.rightside-area .top-bar .tb-icon { color: var(--text-muted); font-size: 20px; }
.rightside-area .top-bar h2 { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.rightside-area .top-bar .divider { width: 1px; height: 24px; background: #3f4147; margin: 0 4px; }

.tb-tabs { display: flex; gap: 8px; margin-left: 8px; }
.tb-tabs button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
}
.tb-tabs button:hover { background: var(--bg-hover); color: var(--text-strong); }
.tb-tabs button.active { background: var(--bg-hover-2); color: #fff; }
.tb-tabs button.add-btn { background: var(--green); color: #fff; }
.tb-tabs button.add-btn:hover { background: var(--green-hover); }

/* ---------- Views ---------- */
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Friends list */
#friendsView .friends-scroll { flex: 1; overflow-y: auto; padding: 16px; }
.f-group-title {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: .5px;
    margin: 14px 4px 8px;
}
.f-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-top: 1px solid #3a3c42;
    cursor: pointer;
    border-radius: 6px;
}
.f-row:hover { background: var(--bg-hover); }
.f-info { flex: 1; overflow: hidden; }
.f-name { font-weight: 700; color: var(--text-strong); font-size: 15px; }
.f-uname { font-size: 13px; color: var(--text-muted); }
.f-actions { display: flex; gap: 8px; }
.f-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--bg-panel);
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.f-btn:hover { background: #2a2c30; color: var(--text-strong); }
.f-btn.accept:hover { color: var(--green); }
.f-btn.chat:hover { color: var(--accent); }
.f-btn.decline:hover, .f-btn.remove:hover { color: var(--red); }

.friends-empty {
    text-align: center;
    color: var(--text-muted);
    margin-top: 60px;
    font-size: 15px;
}
.friends-empty .empty-icon { font-size: 48px; color: #3a3c42; margin-bottom: 12px; }

.add-friend-form { padding: 8px 4px 20px; border-bottom: 1px solid #3a3c42; }
.add-friend-form h3 { color: var(--text-strong); font-size: 16px; margin-bottom: 4px; }
.add-friend-form p { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; }
.add-friend-row { display: flex; gap: 8px; background: var(--bg-input); border-radius: 8px; padding: 8px; }
.add-friend-row input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 15px;
}
.add-friend-row button {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 16px;
    font-weight: 600;
    cursor: pointer;
}
.add-friend-row button:hover { background: var(--accent-hover); }

/* Chat view (global + DM) */
#chatView .messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-welcome {
    margin: 20px 0;
    padding-bottom: 8px;
}
.chat-welcome h1 { font-size: 28px; color: var(--text-strong); }
.chat-welcome p { color: var(--text-muted); margin-top: 4px; }

.message-group {
    display: flex;
    gap: 16px;
    padding: 4px 8px;
    border-radius: 4px;
}
.message-group:hover { background: rgba(0,0,0,.08); }
.message-group:hover .message-actions { display: flex; }

.message-avatar { width: 40px; height: 40px; flex-shrink: 0; }
.message-avatar img, .message-avatar .avatar-fallback { width: 40px; height: 40px; border-radius: 50%; }

.message-content { flex: 1; min-width: 0; position: relative; }
.message-header { display: flex; align-items: baseline; gap: 8px; }
.message-author { font-weight: 700; color: var(--text-strong); font-size: 15px; }
.message-timestamp { font-size: 11px; color: var(--text-faint); }
.message-text { color: var(--text); font-size: 15px; line-height: 1.375; word-wrap: break-word; white-space: pre-wrap; }
.message-text.deleted-text, .deleted-text { color: var(--text-faint); font-style: italic; }
.message-text .edited { font-size: 10px; color: var(--text-faint); margin-left: 4px; }

.message-image { max-width: 400px; max-height: 300px; border-radius: 8px; margin-top: 4px; cursor: pointer; display: block; }

.message-actions {
    display: none;
    position: absolute;
    top: -12px;
    right: 8px;
    background: var(--bg-panel, #2b2d31);
    border: 1px solid var(--border, #1f2023);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    overflow: hidden;
    z-index: 10;
}
.msg-action {
    background: transparent;
    border: none;
    color: var(--text-muted, #949ba4);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    transition: all .12s ease;
}
.msg-action:hover { background: var(--bg-hover, #35373c); color: var(--text-strong, #fff); }
.msg-action.danger:hover { color: var(--red, #da373c); background: rgba(218, 55, 60, 0.15); }

.edit-box-container {
    width: 100%;
    margin-top: 4px;
}
.edit-input {
    width: 100%;
    background: var(--bg-input, #383a40);
    border: 1px solid var(--accent, #5865f2);
    border-radius: 6px;
    color: var(--text-strong, #fff);
    padding: 8px 12px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}
.edit-help {
    font-size: 11px;
    color: var(--text-muted, #949ba4);
    margin-top: 4px;
    user-select: none;
}
.edit-btn-cancel, .edit-btn-save {
    color: var(--accent, #5865f2);
    cursor: pointer;
    text-decoration: underline;
}
.edit-btn-cancel:hover, .edit-btn-save:hover {
    color: #fff;
}

/* composer */
.composer {
    padding: 0 16px 24px;
    flex-shrink: 0;
}
.composer .box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #383a40;
    border-radius: 8px;
    padding: 0 16px;
}
.composer .box i { color: var(--text-muted); font-size: 20px; cursor: pointer; }
.composer .box i:hover { color: var(--text-strong); }
.composer input.msg-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 15px;
    padding: 12px 0;
}

/* pending attachment chip (attached, not yet sent) */
.attach-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2b2d31;
    border: 1px solid #3f4147;
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    width: fit-content;
    max-width: 320px;
}
.attach-chip img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.attach-chip .attach-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.attach-chip span {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.attach-chip i { cursor: pointer; color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
.attach-chip i:hover { color: var(--text-strong); }

/* Profile modal */
#profileModal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-modal-card {
    width: 440px;
    max-width: 92vw;
    background: var(--bg-chat);
    border-radius: 10px;
    padding: 24px;
}
.profile-modal-card h2 { color: var(--text-strong); margin-bottom: 18px; }
.profile-modal-card .pm-avatar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.profile-modal-card .pm-avatar img, .profile-modal-card .pm-avatar .avatar-fallback { width: 72px; height: 72px; border-radius: 50%; }
.profile-modal-card label { display: block; font-size: 12px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin: 12px 0 6px; }
.profile-modal-card input, .profile-modal-card textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid #111;
    border-radius: 4px;
    color: var(--text);
    padding: 9px 10px;
    font-size: 15px;
    outline: none;
    resize: vertical;
}
.profile-modal-card input:disabled { opacity: .6; }
.pm-btns { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }

/* Low RAM mode toggle */
.pm-lowram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--bg-chat, #2b2d31);
    border-radius: 8px;
}
.pm-lowram .lr-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-lowram .lr-text b { color: var(--text-strong); font-size: 14px; }
.pm-lowram .lr-text span { color: var(--text-muted); font-size: 11.5px; line-height: 1.35; }
.pm-lowram .switch {
    position: relative;
    width: 44px; height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}
.pm-lowram .switch input { opacity: 0; width: 0; height: 0; }
.pm-lowram .slider {
    position: absolute;
    inset: 0;
    background: #4e5058;
    border-radius: 24px;
    transition: background .15s;
}
.pm-lowram .slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.pm-lowram .switch input:checked + .slider { background: var(--green, #23a55a); }
.pm-lowram .switch input:checked + .slider::before { transform: translateX(20px); }
.pm-btns button {
    padding: 9px 18px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { text-decoration: underline; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: var(--red-hover); }
.pm-small-btns { display: flex; gap: 8px; }
.pm-small-btns button { padding: 6px 12px; font-size: 13px; border: none; border-radius: 4px; cursor: pointer; }

/* toast */
#toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-panel);
    color: var(--text-strong);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: all .2s;
    z-index: 3000;
    font-size: 14px;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* status menu */
#statusMenu {
    position: absolute;
    bottom: 60px;
    left: 10px;
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    z-index: 1200;
    width: 180px;
}
.status-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
}
.status-opt:hover { background: var(--bg-hover); }
.status-opt .dot { width: 10px; height: 10px; border-radius: 50%; }
.status-opt .dot.online { background: var(--green); }
.status-opt .dot.dnd { background: var(--red); }
.status-opt .dot.invisible { background: #80848e; }

/* ============================================================
   CALL UI (Fully Adaptive)
   ============================================================ */
#callInterface {
    flex-shrink: 0;
    background: #1e1f22;
    border-top: 1px solid #111214;
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 85vh;
    min-height: 180px;
    height: 340px;
    overflow: hidden;
    box-sizing: border-box;
}

#callResize {
    height: 8px;
    cursor: ns-resize;
    background: transparent;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
}
#callResize::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    transition: all .15s ease;
}
#callResize:hover, #callResize.dragging {
    background: rgba(88, 101, 242, 0.2);
}
#callResize:hover::before, #callResize.dragging::before {
    background: var(--accent, #5865f2);
    width: 64px;
}

.call-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    flex-shrink: 0;
    background: #1e1f22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.call-head-left { display: flex; align-items: center; gap: 10px; }
.call-head-left #callTitle { font-weight: 700; color: var(--text-strong, #fff); font-size: 14px; }
.call-status-text { font-size: 12px; color: var(--green, #23a55a); font-weight: 600; }

.call-live-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--green, #23a55a);
    animation: pulse 1.8s infinite;
}

.call-x {
    background: transparent;
    border: none;
    color: var(--text-muted, #949ba4);
    font-size: 15px;
    cursor: pointer;
    width: 30px; height: 30px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.call-x:hover { background: var(--bg-hover, #35373c); color: var(--text-strong, #fff); }

/* Screen-share stage (Adaptive) */
.stage {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    padding: 8px 16px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}
.stage:has(.stage-item:only-child),
.stage:not(:has(.stage-item:nth-child(2))) {
    display: flex;
    align-items: center;
    justify-content: center;
}
.stage-item {
    position: relative;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .4;
    transition: opacity .2s;
}
.stage-item.ready { opacity: 1; }
.stage-item video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}
.stage-label {
    position: absolute;
    left: 10px; bottom: 10px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}
.stage-controls {
    position: absolute;
    top: 8px; right: 8px;
    display: flex;
    gap: 6px;
    z-index: 10;
}
.stage-fs {
    width: 32px; height: 32px;
    border-radius: 6px;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.stage-fs:hover { background: var(--accent, #5865f2); transform: scale(1.05); }

.stage-restore {
    margin: 6px 16px;
    padding: 6px 14px;
    background: var(--bg-hover-2, #35373c);
    color: var(--text-strong, #fff);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    align-self: flex-start;
    transition: all .15s ease;
}
.stage-restore:hover { background: var(--accent, #5865f2); color: #fff; }

.share-hint {
    margin: 0 16px 6px;
    color: var(--green, #23a55a);
    font-size: 12px;
    font-weight: 600;
}

/* Audio peers grid (Adaptive Layout) */
.peers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    padding: 10px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    align-content: center;
    align-items: center;
}

/* When Screen Share is active, audio grid becomes a compact horizontal strip */
#callInterface.has-stage .peers-grid,
#callInterface:has(#stageVideo:not(.hidden)) .peers-grid {
    flex: 0 0 auto;
    max-height: 80px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 4px 16px 8px;
    align-content: stretch;
}
#callInterface.has-stage .audio-tile,
#callInterface:has(#stageVideo:not(.hidden)) .audio-tile {
    min-width: 150px;
    max-width: 220px;
    padding: 6px 10px;
    flex-shrink: 0;
    border-radius: 8px;
}
#callInterface.has-stage .participant-avatar,
#callInterface:has(#stageVideo:not(.hidden)) .participant-avatar {
    width: 32px; height: 32px;
}
#callInterface.has-stage .participant-avatar img,
#callInterface.has-stage .participant-avatar .avatar-fallback,
#callInterface:has(#stageVideo:not(.hidden)) .participant-avatar img,
#callInterface:has(#stageVideo:not(.hidden)) .participant-avatar .avatar-fallback {
    width: 32px; height: 32px; font-size: 14px;
}

.audio-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-chat, #2b2d31);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    box-sizing: border-box;
    transition: transform .15s ease, background .15s ease;
    width: 100%;
}
.audio-tile:hover {
    background: var(--bg-hover, #35373c);
}
.audio-tile.speaking { box-shadow: 0 0 0 2px var(--green, #23a55a); }
.participant-avatar {
    position: relative;
    width: 42px; height: 42px;
    flex-shrink: 0;
}
.participant-avatar img, .participant-avatar .avatar-fallback {
    width: 42px; height: 42px; border-radius: 50%;
}
.participant-avatar .status-dot { border-color: var(--bg-chat, #2b2d31); }
.participant-name {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    color: var(--text-strong, #fff);
    font-weight: 600;
    font-size: 13.5px;
    min-width: 0;
}
.participant-name .pn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.participant-name .call-mini-icon { color: var(--text-muted, #949ba4); font-size: 12px; }
.participant-name .call-mini-icon.on { color: var(--green, #23a55a); }
.audio-tile .tile-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-panel, #1e1f22);
    color: var(--text-muted, #949ba4);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
    flex-shrink: 0;
}
.audio-tile .tile-btn:hover { color: var(--text-strong, #fff); background: var(--bg-hover, #35373c); }

/* Controls bar (Adaptive Bottom) */
.call-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 16px;
    flex-shrink: 0;
    background: #18191c;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.call-ctrl {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--bg-hover-2, #35373c);
    color: var(--text-strong, #fff);
    cursor: pointer;
    font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.call-ctrl:hover { background: #4e5058; transform: scale(1.06); }
.call-ctrl.active { background: #fff; color: #1e1f22; }
.call-ctrl.hangup { background: var(--red, #da373c); color: #fff; }
.call-ctrl.hangup:hover { background: var(--red-hover, #a12828); transform: scale(1.06); }

/* minimized call chip */
.call-minimized {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 3400;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-panel);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.cm-live-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 1.8s infinite;
    flex-shrink: 0;
}
.cm-text { display: flex; flex-direction: column; max-width: 200px; }
.cm-text #callMinimizedTitle {
    color: var(--text-strong);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-text #callMinimizedStatus {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--bg-hover-2);
    color: var(--text-strong);
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cm-btn:hover { background: #4e5058; }
.cm-btn.hangup-mini { background: var(--red); color: #fff; }
.cm-btn.hangup-mini:hover { background: var(--red-hover); }
.call-status.muted {
    color: var(--text-muted);
    font-size: 13px;
    padding: 16px;
    width: 100%;
    text-align: center;
}
.audio-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-chat);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 200px;
}
.audio-tile.speaking { box-shadow: 0 0 0 2px var(--green); }
.participant-avatar {
    position: relative;
    width: 40px; height: 40px;
    flex-shrink: 0;
}
.participant-avatar img, .participant-avatar .avatar-fallback {
    width: 40px; height: 40px; border-radius: 50%;
}
.participant-avatar .status-dot { border-color: var(--bg-chat); }
.participant-name {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    color: var(--text-strong);
    font-weight: 600;
    font-size: 14px;
}
.participant-name .pn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.participant-name .call-mini-icon { color: var(--text-muted); }
.participant-name .call-mini-icon.on { color: var(--green); }
.audio-tile .tile-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--bg-panel);
    color: var(--text-muted);
    cursor: pointer;
}
.audio-tile .tile-btn:hover { color: var(--text-strong); background: #2a2c30; }

/* controls bar */
.call-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px;
    flex-shrink: 0;
    background: #1e1f22;
}
.call-ctrl {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--bg-hover-2);
    color: var(--text-strong);
    cursor: pointer;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.call-ctrl:hover { background: #4e5058; }
.call-ctrl.active { background: #fff; color: #1e1f22; }
.call-ctrl.hangup { background: var(--red); color: #fff; }
.call-ctrl.hangup:hover { background: var(--red-hover); }

/* ============================================================
   FULLSCREEN DEMO MODE
   ============================================================ */
body.demo-fs #callInterface {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 99999 !important;
    background: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
body.demo-fs #stageVideo.stage,
body.demo-fs .stage {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #000 !important;
}
body.demo-fs .stage-item {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.demo-fs .stage-item video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    background: #000 !important;
}
body.demo-fs .peers-grid,
body.demo-fs .call-head,
body.demo-fs .call-controls,
body.demo-fs #callResize,
body.demo-fs .share-hint,
body.demo-fs .stage-restore {
    display: none !important;
}

/* incoming call popup */
#incomingCall {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 3500;
}
.incoming-card {
    background: var(--bg-panel);
    border-radius: 12px;
    padding: 20px;
    width: 260px;
    box-shadow: 0 8px 30px rgba(0,0,0,.5);
    text-align: center;
    animation: slideIn .25s ease;
}
@keyframes slideIn { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.incoming-avatar { width: 72px; height: 72px; margin: 0 auto 12px; }
.incoming-avatar img, .incoming-avatar .avatar-fallback {
    width: 72px; height: 72px; border-radius: 50%;
    font-size: 28px;
}
.incoming-name { font-weight: 700; color: var(--text-strong); font-size: 17px; }
.incoming-sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.incoming-btns { display: flex; justify-content: center; gap: 20px; margin-top: 18px; }
.inc-btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}
.inc-btn.accept { background: var(--green); }
.inc-btn.accept:hover { background: var(--green-hover); }
.inc-btn.decline { background: var(--red); }
.inc-btn.decline:hover { background: var(--red-hover); }

/* ============================================================
   SCREEN PICKER MODAL
   ============================================================ */
#screenPickerModal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
#screenPickerModal.hidden { display: none; }
.screen-picker-card {
    background: var(--bg-panel, #2b2d31);
    border: 1px solid var(--border, #1f2023);
    border-radius: 12px;
    width: 680px;
    max-width: 94vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: spPop .2s ease;
}
@keyframes spPop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sp-header h2 { font-size: 17px; font-weight: 700; color: var(--text-strong, #fff); margin: 0; }
.sp-close-btn {
    background: none; border: none; color: var(--text-muted, #949ba4);
    font-size: 16px; cursor: pointer; padding: 6px; border-radius: 6px;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.sp-close-btn:hover { color: var(--text-strong, #fff); background: var(--bg-hover, #35373c); }
.sp-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 20px 0 20px;
}
.sp-tabs button {
    background: transparent; border: none; color: var(--text-muted, #949ba4);
    font-size: 14px; font-weight: 600; padding: 7px 16px; border-radius: 6px;
    cursor: pointer; transition: all .15s;
}
.sp-tabs button:hover { color: var(--text-strong, #fff); background: var(--bg-hover, #35373c); }
.sp-tabs button.active { color: #fff; background: var(--accent, #5865f2); }
.sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    padding: 16px 20px;
    overflow-y: auto;
    max-height: 420px;
    flex: 1;
}
.sp-item {
    background: var(--bg-chat, #1e1f22);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all .15s;
}
.sp-item:hover {
    border-color: var(--accent, #5865f2);
    background: var(--bg-hover, #35373c);
    transform: translateY(-2px);
}
.sp-thumb {
    width: 100%;
    height: 105px;
    border-radius: 6px;
    object-fit: cover;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.sp-thumb-icon {
    font-size: 32px;
    color: var(--text-muted, #949ba4);
}
.sp-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong, #fff);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted, #949ba4);
    padding: 40px 0;
    font-size: 14px;
}
.sp-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--bg-chat, #1e1f22);
}

/* ============================================================
   GROUPS & HOST CONTROLS STYLES
   ============================================================ */

.groups-section {
    margin-top: 16px;
}
.group-header-actions {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
    font-size: 13px;
}
.group-header-actions i {
    cursor: pointer;
    color: var(--text-muted, #949ba4);
    transition: color .15s;
}
.group-header-actions i:hover {
    color: var(--text-strong, #fff);
}

.chat-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-subtitle {
    font-size: 12px;
    color: var(--text-muted, #949ba4);
}

/* Host Badge & Kick Button on Call Peer Tiles */
.call-host-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(254, 192, 1, 0.2);
    border: 1px solid rgba(254, 192, 1, 0.6);
    color: #fec001;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
    pointer-events: none;
}
.call-peer-kick-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(218, 55, 60, 0.85);
    border: none;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background .15s;
    z-index: 6;
}
.peer-card:hover .call-peer-kick-btn {
    opacity: 1;
}
.call-peer-kick-btn:hover {
    background: #da373c;
}

.call-head-btn.host-only {
    background: rgba(88, 101, 242, 0.2);
    border: 1px solid var(--accent, #5865f2);
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    transition: all .15s;
}
.call-head-btn.host-only:hover {
    background: var(--accent, #5865f2);
}

/* Modals & Checkboxes */
.group-modal-card {
    width: 460px;
    max-width: 90vw;
}
.group-settings-card {
    width: 520px;
    max-width: 92vw;
    min-height: 480px;
    display: flex;
    flex-direction: column;
}
.cg-option {
    margin: 14px 0;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text, #dbdee1);
    cursor: pointer;
    user-select: none;
}
.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent, #5865f2);
    cursor: pointer;
}

/* Group Settings Tabs */
.gs-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border, #26272b);
    padding-bottom: 8px;
    margin-bottom: 16px;
}
.gs-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #949ba4);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
}
.gs-tab-btn:hover {
    color: var(--text-strong, #fff);
    background: var(--bg-hover, #35373c);
}
.gs-tab-btn.active {
    color: #fff;
    background: var(--accent, #5865f2);
}

.gs-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.gs-invite-box {
    margin: 12px 0;
}
.gs-invite-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.gs-invite-row input {
    flex: 1;
    background: var(--bg-chat, #1e1f22);
    border: 1px solid var(--border, #26272b);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text-strong, #fff);
    font-size: 13px;
}

.gs-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.gs-add-row input {
    flex: 1;
    background: var(--bg-chat, #1e1f22);
    border: 1px solid var(--border, #26272b);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text-strong, #fff);
    font-size: 14px;
}

.gs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 280px;
    flex: 1;
}
.gs-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-chat, #1e1f22);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
}
.gs-item-user {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gs-item-name {
    font-weight: 600;
    color: var(--text-strong, #fff);
    font-size: 14px;
}
.gs-item-role {
    font-size: 11px;
    color: var(--accent, #5865f2);
    font-weight: 600;
    margin-left: 6px;
}
.gs-item-role.owner {
    color: #fec001;
}
.gs-item-actions {
    display: flex;
    gap: 6px;
}
.gs-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all .15s;
}
.gs-btn-sm.accept {
    background: #23a55a;
    color: #fff;
}
.gs-btn-sm.accept:hover {
    background: #1f9450;
}
.gs-btn-sm.decline {
    background: #da373c;
    color: #fff;
}
.gs-btn-sm.decline:hover {
    background: #c03136;
}
.gs-btn-sm.kick {
    background: rgba(218, 55, 60, 0.15);
    color: #da373c;
    border: 1px solid rgba(218, 55, 60, 0.3);
}
.gs-btn-sm.kick:hover {
    background: #da373c;
    color: #fff;
}


/* ============================================================
   UNIVERSAL AVATAR CONSTRAINTS (Prevent image stretch)
   ============================================================ */

.avatar-wrap,
.img-wrapper,
.message-avatar,
.participant-avatar,
.incoming-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: visible;
    user-select: none;
    box-sizing: border-box;
}

.avatar-wrap {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
}

.avatar-wrap img,
.avatar-img,
.img-wrapper img,
.message-avatar img,
.participant-avatar img,
.incoming-avatar img,
.friend-left img,
.f-li img,
.gs-item-user img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.avatar-fallback,
.avatar-wrap .avatar-fallback {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: var(--accent, #5865f2);
    color: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    flex-shrink: 0 !important;
    user-select: none;
}

/* Sidebar Profile (bottom left) */
.profile .img-wrapper,
.profile .avatar-wrap,
#meAvatarBox {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
}

/* Sidebar DMs & Groups */
.f-li .avatar-wrap,
.f-li .img-wrapper,
.f-li .avatar-fallback {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
}

/* Chat Messages */
.message-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    margin-top: 2px;
}
.message-avatar .avatar-wrap {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
}

/* Friends Tab List */
.friend-left .avatar-wrap,
.friend-left .img-wrapper {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
}
.friends-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted, #949ba4);
    margin: 16px 8px 8px;
}
.friend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin: 1px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
.friend-row:hover {
    background: var(--bg-hover, #35373c);
}
.friend-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.friend-info {
    flex: 1;
    min-width: 0;
}
.friend-display {
    font-weight: 700;
    color: var(--text-strong, #fff);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.friend-user {
    font-size: 12px;
    color: var(--text-muted, #949ba4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.friend-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}
.circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-panel, #2b2d31);
    color: var(--text-muted, #949ba4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all .15s;
}
.circle-btn:hover {
    background: var(--bg-chat, #1e1f22);
    color: var(--text-strong, #fff);
}
.circle-btn.accept:hover {
    color: #23a55a;
}
.circle-btn.danger:hover {
    color: #da373c;
}
.add-friend-panel {
    padding: 20px;
}
.add-friend-panel h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-strong, #fff);
    margin-bottom: 8px;
}
.add-friend-panel p {
    font-size: 14px;
    color: var(--text-muted, #949ba4);
    margin-bottom: 16px;
}
.add-box {
    display: flex;
    gap: 12px;
    background: var(--bg-chat, #1e1f22);
    border: 1px solid var(--border, #26272b);
    border-radius: 8px;
    padding: 10px 14px;
}
.add-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-strong, #fff);
    font-size: 14px;
}

/* Voice Call Participants */
.participant-avatar,
.audio-tile .avatar-wrap {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
}

/* Incoming Call */
.incoming-avatar,
.incoming-avatar .avatar-wrap {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    max-width: 72px;
    max-height: 72px;
}

/* Profile Modal */
.profile-modal-card .pm-avatar,
.profile-modal-card .pm-avatar .avatar-wrap {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    max-width: 72px;
    max-height: 72px;
}
.profile-modal-card #profileAvatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Group Settings List */
.gs-item-user .avatar-wrap {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
}


/* ============================================================
   MODAL OVERLAYS & CARDS (Unified Discord / Luma theme)
   ============================================================ */

.modal-overlay,
#profileModal,
#screenPickerModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2500 !important;
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    animation: modalFadeIn 0.15s ease-out !important;
}

.modal-overlay.hidden,
#profileModal.hidden,
#screenPickerModal.hidden,
#incomingCall.hidden,
.hidden {
    display: none !important;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.profile-card,
.profile-modal-card,
.screen-picker-card,
.group-modal-card,
.group-settings-card,
.call-invite-card {
    background: var(--bg-chat, #2b2d31) !important;
    border: 1px solid var(--border, #35373c) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
    color: var(--text, #dbdee1) !important;
    box-sizing: border-box !important;
}

.group-modal-card,
.call-invite-card {
    width: 460px !important;
    max-width: 92vw !important;
}

.group-settings-card {
    width: 540px !important;
    max-width: 94vw !important;
    min-height: 480px !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.pm-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    padding-bottom: 4px !important;
}
.pm-header h2,
.profile-modal-card h2,
.screen-picker-card h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-strong, #ffffff) !important;
    margin: 0 !important;
}
.pm-close,
.sp-close-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted, #949ba4) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 6px !important;
    transition: all 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
}
.pm-close:hover,
.sp-close-btn:hover {
    color: var(--text-strong, #ffffff) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Modal Form Labels & Inputs */
.profile-card label,
.profile-modal-card label,
.group-modal-card label,
.group-settings-card label,
.call-invite-card label {
    display: block !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    color: var(--text-muted, #949ba4) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin: 14px 0 6px !important;
}

.profile-card input[type="text"],
.profile-card input[type="password"],
.profile-card textarea,
.profile-modal-card input,
.profile-modal-card textarea,
.group-modal-card input,
.group-modal-card textarea,
.group-settings-card input[type="text"],
.group-settings-card textarea,
.call-invite-card input {
    width: 100% !important;
    background: var(--bg-input, #1e1f22) !important;
    border: 1px solid var(--border, #1f2023) !important;
    border-radius: 8px !important;
    color: var(--text-strong, #ffffff) !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    outline: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    box-sizing: border-box !important;
}

.profile-card input:focus,
.profile-card textarea:focus,
.profile-modal-card input:focus,
.profile-modal-card textarea:focus,
.group-modal-card input:focus,
.group-modal-card textarea:focus,
.group-settings-card input:focus,
.group-settings-card textarea:focus,
.call-invite-card input:focus {
    border-color: var(--accent, #5865f2) !important;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.25) !important;
}

.profile-card input::placeholder,
.profile-card textarea::placeholder,
.group-modal-card input::placeholder,
.group-modal-card textarea::placeholder,
.call-invite-card input::placeholder {
    color: var(--text-faint, #6d737e) !important;
}

.pm-btns {
    display: flex !important;
    gap: 12px !important;
    margin-top: 24px !important;
    justify-content: flex-end !important;
}

/* Primary, Ghost & Danger buttons */
.btn-primary {
    background: var(--accent, #5865f2) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.05s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.btn-primary:hover {
    background: var(--accent-hover, #4752c4) !important;
}
.btn-primary:active {
    transform: scale(0.98) !important;
}
.btn-primary:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.btn-ghost {
    background: transparent !important;
    color: var(--text-strong, #fff) !important;
    border: 1px solid var(--border, #35373c) !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--text-muted, #949ba4) !important;
}

.btn-danger {
    background: var(--red, #da373c) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.btn-danger:hover {
    background: #c03136 !important;
}

/* Checkbox option styling */
.cg-option {
    margin: 16px 0 !important;
    padding: 12px 14px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--border, #1f2023) !important;
    border-radius: 8px !important;
}
.checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13.5px !important;
    color: var(--text-strong, #fff) !important;
    cursor: pointer !important;
    user-select: none !important;
}
.checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--accent, #5865f2) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Group Settings Tabs */
.gs-tabs {
    display: flex !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--border, #35373c) !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}
.gs-tab-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted, #949ba4) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
.gs-tab-btn:hover {
    color: var(--text-strong, #fff) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.gs-tab-btn.active {
    color: #fff !important;
    background: var(--accent, #5865f2) !important;
}

.gs-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
.gs-invite-box {
    margin: 14px 0 !important;
}
.gs-invite-row {
    display: flex !important;
    gap: 8px !important;
    margin-top: 6px !important;
}
.gs-invite-row input {
    flex: 1 !important;
    background: var(--bg-input, #1e1f22) !important;
    border: 1px solid var(--border, #1f2023) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: var(--text-strong, #fff) !important;
    font-size: 13px !important;
}
.gs-add-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}
.gs-add-row input {
    flex: 1 !important;
    background: var(--bg-input, #1e1f22) !important;
    border: 1px solid var(--border, #1f2023) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: var(--text-strong, #fff) !important;
    font-size: 14px !important;
}

.gs-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: auto !important;
    max-height: 280px !important;
    flex: 1 !important;
    padding-right: 4px !important;
}
.gs-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: var(--bg-input, #1e1f22) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}
.gs-item-user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.gs-item-name {
    font-weight: 600 !important;
    color: var(--text-strong, #fff) !important;
    font-size: 14px !important;
}
.gs-item-role {
    font-size: 11.5px !important;
    color: var(--accent, #5865f2) !important;
    font-weight: 600 !important;
    margin-left: 6px !important;
}
.gs-item-role.owner {
    color: #fec001 !important;
}
.gs-item-actions {
    display: flex !important;
    gap: 8px !important;
}
.gs-btn-sm {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.15s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.gs-btn-sm.accept {
    background: #23a55a !important;
    color: #fff !important;
}
.gs-btn-sm.accept:hover {
    background: #1f9450 !important;
}
.gs-btn-sm.decline {
    background: #da373c !important;
    color: #fff !important;
}
.gs-btn-sm.decline:hover {
    background: #c03136 !important;
}
.gs-btn-sm.kick {
    background: rgba(218, 55, 60, 0.15) !important;
    color: #da373c !important;
    border: 1px solid rgba(218, 55, 60, 0.3) !important;
}
.gs-btn-sm.kick:hover {
    background: #da373c !important;
    color: #fff !important;
}


/* ============================================================
   PERFECT MODAL & GROUP SETTINGS STYLES (Discord / Luma Dark)
   ============================================================ */

.modal-overlay,
#profileModal,
#screenPickerModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3000 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(5px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    animation: modalFadeIn 0.15s ease-out !important;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.profile-card,
.profile-modal-card,
.screen-picker-card,
.group-modal-card,
.group-settings-card,
.call-invite-card {
    background: #2b2d31 !important;
    border: 1px solid #35373c !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7) !important;
    color: #dbdee1 !important;
    box-sizing: border-box !important;
}

.group-modal-card,
.call-invite-card,
.profile-modal-card {
    width: 460px !important;
    max-width: 92vw !important;
}

.group-settings-card {
    width: 560px !important;
    max-width: 94vw !important;
    min-height: 520px !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.pm-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.pm-header h2,
.profile-modal-card h2,
.screen-picker-card h2 {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
}
.pm-close,
.sp-close-btn {
    background: transparent !important;
    border: none !important;
    color: #949ba4 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 6px !important;
    transition: all 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
}
.pm-close:hover,
.sp-close-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Modal Form Labels & Inputs */
.profile-card label,
.profile-modal-card label,
.group-modal-card label,
.group-settings-card label,
.call-invite-card label {
    display: block !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    color: #949ba4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin: 14px 0 6px !important;
}

.profile-card input[type="text"],
.profile-card input[type="password"],
.profile-card textarea,
.profile-modal-card input,
.profile-modal-card textarea,
.group-modal-card input,
.group-modal-card textarea,
.group-settings-card input[type="text"],
.group-settings-card textarea,
.call-invite-card input {
    width: 100% !important;
    background: #1e1f22 !important;
    border: 1px solid #1f2023 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    outline: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    box-sizing: border-box !important;
}

.profile-card input:focus,
.profile-card textarea:focus,
.profile-modal-card input:focus,
.profile-modal-card textarea:focus,
.group-modal-card input:focus,
.group-modal-card textarea:focus,
.group-settings-card input:focus,
.group-settings-card textarea:focus,
.call-invite-card input:focus {
    border-color: #5865f2 !important;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3) !important;
}

.profile-card input::placeholder,
.profile-card textarea::placeholder,
.group-modal-card input::placeholder,
.group-modal-card textarea::placeholder,
.call-invite-card input::placeholder {
    color: #6d737e !important;
}

.pm-btns {
    display: flex !important;
    gap: 12px !important;
    margin-top: 24px !important;
    justify-content: flex-end !important;
}

/* Primary, Ghost & Danger buttons */
.btn-primary {
    background: #5865f2 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.05s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.btn-primary:hover {
    background: #4752c4 !important;
}
.btn-primary:active {
    transform: scale(0.98) !important;
}
.btn-primary:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.btn-ghost {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid #35373c !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #949ba4 !important;
}

.btn-danger {
    background: #da373c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.btn-danger:hover {
    background: #c03136 !important;
}

/* Checkbox option styling */
.cg-option {
    margin: 16px 0 !important;
    padding: 12px 14px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid #1f2023 !important;
    border-radius: 8px !important;
}
.checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13.5px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    user-select: none !important;
}
.checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #5865f2 !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Group Settings Tabs */
.gs-tabs {
    display: flex !important;
    gap: 8px !important;
    border-bottom: 1px solid #35373c !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}
.gs-tab-btn {
    background: transparent !important;
    border: none !important;
    color: #949ba4 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
.gs-tab-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.gs-tab-btn.active {
    color: #ffffff !important;
    background: #5865f2 !important;
}

/* Tab Bodies - only active one shows */
.gs-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.gs-body.hidden {
    display: none !important;
}

.gs-invite-box {
    margin: 14px 0 !important;
}
.gs-invite-row {
    display: flex !important;
    gap: 8px !important;
    margin-top: 6px !important;
}
.gs-invite-row input {
    flex: 1 !important;
    background: #1e1f22 !important;
    border: 1px solid #1f2023 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    font-size: 13px !important;
}
.gs-add-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}
.gs-add-row input {
    flex: 1 !important;
    background: #1e1f22 !important;
    border: 1px solid #1f2023 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    font-size: 14px !important;
}

.gs-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: auto !important;
    max-height: 280px !important;
    flex: 1 !important;
    padding-right: 4px !important;
}
.gs-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: #1e1f22 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.gs-item-user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.gs-item-name {
    font-weight: 600 !important;
    color: #ffffff !important;
    font-size: 14px !important;
}
.gs-item-role {
    font-size: 11.5px !important;
    color: #5865f2 !important;
    font-weight: 600 !important;
    margin-left: 6px !important;
}
.gs-item-role.owner {
    color: #fec001 !important;
}
.gs-item-actions {
    display: flex !important;
    gap: 8px !important;
}
.gs-btn-sm {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.15s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.gs-btn-sm.accept {
    background: #23a55a !important;
    color: #ffffff !important;
}
.gs-btn-sm.accept:hover {
    background: #1f9450 !important;
}
.gs-btn-sm.decline {
    background: #da373c !important;
    color: #ffffff !important;
}
.gs-btn-sm.decline:hover {
    background: #c03136 !important;
}
.gs-btn-sm.kick {
    background: rgba(218, 55, 60, 0.15) !important;
    color: #da373c !important;
    border: 1px solid rgba(218, 55, 60, 0.3) !important;
}
.gs-btn-sm.kick:hover {
    background: #da373c !important;
    color: #ffffff !important;
}

/* ABSOLUTE HIDDEN PRECEDENCE */
.hidden,
.modal-overlay.hidden,
.gs-body.hidden,
.gs-tab-btn.hidden,
.host-only.hidden,
div.hidden,
button.hidden,
span.hidden,
[hidden] {
    display: none !important;
}


/* ============================================================
   HOST BADGE & TILE ACTIONS LAYOUT FIX (No Overlap)
   ============================================================ */

.audio-tile {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: #2b2d31 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
}

.audio-tile .participant-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.participant-name {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

.participant-name .pn {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 150px !important;
}

.call-host-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(254, 192, 1, 0.18) !important;
    border: 1px solid rgba(254, 192, 1, 0.5) !important;
    color: #fec001 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    position: static !important;
    user-select: none !important;
}

.tile-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.call-peer-kick-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(218, 55, 60, 0.2) !important;
    color: #da373c !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    position: static !important;
    opacity: 1 !important;
}
.call-peer-kick-btn:hover {
    background: #da373c !important;
    color: #ffffff !important;
}


/* Missed Call Pill in Chat */
.message-text.missed-call-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(218, 55, 60, 0.12) !important;
    border: 1px solid rgba(218, 55, 60, 0.3) !important;
    color: #f23f43 !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    user-select: none !important;
}
.message-text.missed-call-pill i {
    font-size: 14px !important;
    color: #f23f43 !important;
}