body {
    font-family: "Bitcount Single", sans-serif;
    margin: 0;
    background: var(--bg, #111);
    color: white;
}

.sbb {
    width: auto;
}

.dark-auth {
    padding: 80px;
    text-align: center;
    background: #111;
    color: white;
}

.dark {
    background: #111;
    color: white;
}

.auth-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aimg {
    width:120px;
    margin-bottom:20px;
}

.bimg {
    width: 100%;
}

.auth-form button {
    padding:10px 25px;
    cursor:pointer;
    width: auto;
}

.auth-form input {
    padding:10px;
    width:250px;
    margin:10px;
}

/* ---------- AUTH ---------- */
.auth-box {
    background: #1c1c1c;
    text-align: center;
    padding:30px;
    display:inline-block;
    border-radius:10px;
    text-align:center;
}

/* ---------- OPEN BUTTON ---------- */
#openSidebarBtn {
    position: fixed;
    top: 15px;
    left: 15px;
    font-size: 22px;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 2000;
    height: 65px;
    width: 65px;
    background: none;
}

#homeBtn {
    position: fixed;
    background-color: white;
    top: 15px;
    left: 15px;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 20;
    height: 75px;
    width: 75px;
}

/* ---------- SIDEBAR ---------- */
.sidebar {
    width: 200px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: #222;
    color: white;
    padding: 20px;
    transition: transform 0.3s ease;
    z-index: 15;
}

.sidebar.closed {
    transform: translateX(-100%);
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    margin-bottom: 20px;
}

/* ---------- CHAT ---------- */
.chat-container {
    margin-left: 220px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease;
    position: relative;
    z-index: 1;
}

.chat-container.full {
    margin-left: 0;
}

#messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.message {
    margin-bottom: 8px;
}

.me {
    color: var(--me, dodgerblue);
}

.other {
    color: var(--other, #ccc);
}

.dark .other {
    color: #ccc;
}

/* ---------- DELETE ICON ---------- */
.message:hover .delete {
    visibility: visible;
}

.delete {
    visibility: hidden;
    cursor: pointer;
    margin-left: 8px;
    color: red;
}

/* ---------- INPUT ---------- */
form {
    display: flex;
}

input {
    padding: 10px;
    width: 90%;
}

button {
    padding: 10px;
    width: 10%;
    cursor:pointer;
}