:root {
    --bg:#0e0e23;
    --panel:#1c1c38;
    --msgU:#ff2a6d;
    --msgB:#16213e;
    --text:#e0e0ff;
    --accent:#05d9e8;
    --notif:#ff2a6d;
    --radius:18px;
    --shadow:0 8px 32px #0006;
}

html.light {
    --bg:#f0f4ff;
    --panel:#fff;
    --msgU:#ff006e;
    --msgB:#d0e0ff;
    --text:#112244;
    --accent:#0077ff;
}

* { box-sizing:border-box; font-family:Segoe UI,Arial; }

body {
    margin:0;
    height:100vh;
    display:flex;
    background:var(--bg);
    color:var(--text);
}

/* SIDEBAR */
.sidebar {
    width:260px;
    background:var(--panel);
    padding:1rem;
    display:flex;
    flex-direction:column;
    gap:.6rem;
}

.sidebar button {
    border:none;
    padding:.6rem;
    border-radius:var(--radius);
    background:var(--accent);
    color:#fff;
    cursor:pointer;
}

.sidebar input {
    display:none;
    padding:.6rem;
    border-radius:var(--radius);
    border:1px solid var(--accent);
    background:transparent;
    color:var(--text);
}

.sidebar ul {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:.4rem;
}

.sidebar li {
    padding:.6rem;
    background:#ffffff11;
    border-radius:var(--radius);
    display:flex;
    gap:.5rem;
    cursor:pointer;
}

.sidebar li.active {
    background:var(--accent);
    color:#fff;
}

/* CHAT */
.chatbox {
    flex:1;
    display:flex;
    flex-direction:column;
}

.chatbox header {
    padding:1rem;
    background:var(--panel);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

#modeToggle {
    border:none;
    border-radius:20px;
    padding:.3rem .7rem;
    background:var(--accent);
    color:#fff;
    cursor:pointer;
}

.messages {
    flex:1;
    padding:1rem;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:.7rem;
}

.bulle {
    max-width:70%;
    padding:.7rem 1rem;
    border-radius:var(--radius);
    position:relative;
}

.bulle.user {
    align-self:flex-end;
    background:var(--msgU);
    color:#fff;
}

.bulle.bot {
    align-self:flex-start;
    background:var(--msgB);
}

.bulle:hover::after {
    content:attr(data-time);
    position:absolute;
    bottom:-16px;
    font-size:.65rem;
    opacity:.6;
}

/* FORM */
#formMsg {
    display:flex;
    gap:.5rem;
    padding:1rem;
    background:var(--panel);
}

#inpMsg {
    flex:1;
    padding:.6rem;
    border-radius:20px;
    border:1px solid var(--accent);
    background:transparent;
    color:var(--text);
}

#formMsg button {
    border:none;
    border-radius:50%;
    width:40px;
    background:var(--accent);
    color:#fff;
    cursor:pointer;
}

/* TOAST */
.toast {
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%) translateY(100px);
    background:var(--accent);
    color:#fff;
    padding:.6rem 1.2rem;
    border-radius:var(--radius);
    transition:.4s;
}

.toast.show {
    transform:translateX(-50%) translateY(0);
}

/* THEME BUTTON */
#themeToggle {
<<<<<<< HEAD
    position:fixed;
    bottom:15px;
    right:15px;
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    cursor:pointer;
}
=======
    position: fixed;
    bottom: 15px;
    right: 1390px;
    z-index: 999;
    background: var(--accent);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px #0003;
    transition: transform .2s;
}

#themeToggle:hover {
    transform: scale(1.1);
}

/* ----------  MOBILE ---------- */
@media (max-width:700px) {
    body {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        max-height: 190px;
        border-radius: 0 0 var(--radius) var(--radius);
    }

    .chatbox {
        height: calc(100vh - 190px);
    }
}
>>>>>>> fbd1488d84a662e9e9a71ad1d27d44be5bda0300