.chat-tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:1px dotted #1a3300; }

.chat-tab { flex:1; background:transparent; border:none; border-bottom:2px solid transparent; color:#1a5500; font-family:"Handjet",sans-serif; font-size:18px; letter-spacing:3px; padding:10px 0; cursor:pointer; transition:all 0.2s ease; }

.chat-tab:hover { color:#48ff00; }

.chat-tab.active { color:#48ff00; border-bottom:2px solid #48ff00; }

.chat-tab .badge { display:inline-block; background:#ff4444; color:#000; font-size:12px; font-weight:bold; padding:1px 6px; margin-left:6px; vertical-align:middle; min-width:18px; text-align:center; }

.sidebar-section { display:none; }

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

.user-list-title { color:#1a5500; font-size:13px; letter-spacing:3px; margin:12px 0 6px; font-family:"Handjet",sans-serif; }

.user-item { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; transition:all 0.2s ease; font-size:17px; font-family:"Handjet",sans-serif; color:#48ff00; position:relative; }

.user-item:hover { background:rgba(72,255,0,0.08); color:#aa00ff; }

.user-item.active-chat { background:rgba(170,0,255,0.12); color:#aa00ff; border-left:2px solid #aa00ff; }

.user-item .dot { width:8px; height:8px; background:#48ff00; flex-shrink:0; box-shadow:0 0 4px #48ff00; border-radius: 10px;}

.user-item .dot.offline { background:#333; box-shadow:none; border-radius: 10px;}

.user-item .unread-badge { position:absolute; right:10px; background:#ff4444; color:#000; font-size:11px; font-weight:bold; padding:1px 6px; min-width:18px; text-align:center; }

.user-item .admin-tag { font-size:11px; background:#aa00ff; color:#000; padding:1px 5px; }

.user-msg { color:#48ff00; font-size:19px; padding:6px 12px; border-left:2px dotted #48ff00; background:rgba(72,255,0,0.04); margin-bottom:4px; font-family:"Handjet",sans-serif; }

.user-msg.mine { border-left-color:#aa00ff; background:rgba(170,0,255,0.05); color:#cc88ff; text-align:right; border-left:none; border-right:2px dotted #aa00ff; }

.msg-meta { font-size:13px; color:#1a5500; margin-bottom:2px; font-family:"Handjet",sans-serif; }

.msg-meta.mine { text-align:right; color:#440055; }

.msg-meta .author { color:#48ff00; }
        
.msg-meta .author.me { color:#aa00ff; }
        
.msg-delete { display:none; background:transparent; border:none; color:#ff4444; cursor:pointer; font-size:13px; padding:0 4px; font-family:"Handjet",sans-serif; vertical-align:middle; }
        
.user-msg:hover .msg-delete, .msg-meta:hover .msg-delete { display:inline; }
        
.private-header { display:none; align-items:center; gap:12px; padding:8px 0 12px; border-bottom:1px dotted #1a3300; margin-bottom:8px; }
        
.private-header.visible { display:flex; }
        
.private-header .pvt-name { font-size:22px; color:#48ff00; font-family:"Handjet",sans-serif; }
        
.private-header .pvt-dot { width:10px; height:10px; background:#48ff00; box-shadow:0 0 6px #48ff00; }
        
.private-header .pvt-dot.offline { background:#333; box-shadow:none; }
        
.no-chat-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#1a3300; font-size:22px; font-family:"Handjet",sans-serif; gap:16px; }
        
.new-pvt-btn { width:100%; background:transparent; border:1px dotted #48ff00; color:#48ff00; font-family:"Handjet",sans-serif; font-size:16px; padding:8px; cursor:pointer; transition:all 0.2s ease; margin-bottom:12px; }
        
.new-pvt-btn:hover { border-color:#aa00ff; color:#aa00ff; background:rgba(170,0,255,0.08); }
        
.modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.85); z-index:200; align-items:center; justify-content:center; }
        
.modal-overlay.open { display:flex; }
        
.modal-box { background:#000; border:1px dotted #48ff00; padding:32px; width:380px; max-height:70vh; overflow-y:auto; }
        
.modal-box h3 { color:#48ff00; font-family:"Handjet",sans-serif; font-size:22px; margin:0 0 20px; text-align:center; }
        
.modal-close { display:block; width:100%; background:transparent; border:1px dotted #ff4444; color:#ff4444; font-family:"Handjet",sans-serif; font-size:16px; padding:8px; cursor:pointer; margin-top:16px; transition:all 0.2s ease; }
        
.modal-close:hover { background:rgba(255,68,68,0.1); }
        
.all-user-item { display:flex; align-items:center; gap:10px; padding:10px; cursor:pointer; border-bottom:1px dotted #0a1f00; transition:all 0.2s ease; font-family:"Handjet",sans-serif; font-size:18px; color:#48ff00; }
        
.all-user-item:hover { background:rgba(72,255,0,0.08); color:#aa00ff; }
        
.input-hidden { display:none !important; }
        
.msg-avatar { width:22px; height:22px; object-fit:cover; vertical-align:middle; margin-right:5px; border:1px solid #1a3300; flex-shrink:0; border-radius: 10px;}
        
.msg-meta { display:flex; align-items:center; gap:4px; }
        
.msg-meta.mine { justify-content:flex-end; }
        
.author-link { color:#48ff00; text-decoration:none; }
        
.author-link:hover { color:#aa00ff; text-decoration:underline; }
        
.author-link.me { color:#aa00ff; }
        
.user-item-avatar { width:20px; height:20px; object-fit:cover; border:1px solid #1a3300; flex-shrink:0; border-radius: 10px;}

#input-container {
    width: 100%; margin: 0; display: flex; gap: 10px;
    border-top: 1px dotted #1a3300; padding-top: 16px;
}
#input-container input {
    flex: 1; background: transparent; border: 1px dotted #48ff00; color: #48ff00;
    font-family: "Handjet", sans-serif; font-size: 20px; padding: 12px 16px;
    outline: none; transition: all 0.3s ease;
}

/* =========================
   CHAT LAYOUT
========================= */

.chat-container {
    display: flex;
    gap: 20px;
    max-width: 1600px;
    margin: 20px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.sidebar {
    width: 280px;
    background: rgba(72,255,0,0.03);
    border: 1px dotted #48ff00;
    padding: 16px;
    flex-shrink: 0;
    overflow-y: auto;
}

.main-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 700px;
    background: rgba(72,255,0,0.02);
    border: 1px dotted #48ff00;
    padding: 20px;
    box-sizing: border-box;
}

/* =========================
   CHAT HEADER
========================= */

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dotted #1a3300;
}

#chat-title {
    margin: 0;
    padding: 0;
    font-size: 42px;
    letter-spacing: 6px;
    color: #48ff00;
    text-align: left;
    line-height: 1;
}

#chat-title:hover {
    transform: none;
    color: #aa00ff;
}

/* =========================
   ADMIN BADGE
========================= */

.admin-badge {
    border: 1px dotted #aa00ff;
    color: #aa00ff;
    padding: 4px 12px;
    font-size: 14px;
    animation: glow 2s infinite;
    font-family: "Handjet", sans-serif;
}

/* =========================
   CHAT AREA
========================= */

#chat {
    flex: 1;
    overflow-y: auto;
    min-height: 500px;
    max-height: 70vh;
    padding: 12px;
    border: 1px dotted #1a3300;
    background: rgba(72,255,0,0.02);
    margin-bottom: 16px;
}

#chat::-webkit-scrollbar {
    width: 6px;
}

#chat::-webkit-scrollbar-track {
    background: #000;
}

#chat::-webkit-scrollbar-thumb {
    background: #48ff00;
}

/* =========================
   SEND BUTTON
========================= */

#input-container button {
    background: transparent;
    border: 1px dotted #48ff00;
    color: #48ff00;
    font-family: "Handjet", sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.25s ease;
}

#input-container button:hover {
    color: #aa00ff;
    border-color: #aa00ff;
    background: rgba(170,0,255,0.08);
}

#input-container button:active {
    transform: scale(0.95);
}

/* =========================
   INPUT FOCUS
========================= */

#message:focus {
    border-color: #aa00ff;
    box-shadow: 0 0 10px rgba(170,0,255,0.25);
}

/* =========================
   ONLINE LIST
========================= */

#onlineList,
#contactList {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* =========================
   MODAL USER LIST
========================= */

#allUsersList {
    display: flex;
    flex-direction: column;
}

/* =========================
   ONLINE TICKER
========================= */

#onlineTicker {
    will-change: transform;
}

/* =========================
   PROFILE LINK
========================= */

#profileLink {
    text-decoration: none;
    color: inherit;
}

/* =========================
   USER AREA
========================= */

#userArea {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =========================
   BADGE UNREAD TOTALE
========================= */

#totalUnreadBadge {
    animation: pulse 1.5s infinite;
}