/* BASE */

body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    background: #0b141a;
    color: #e9edef;
}

/* LAYOUT */

.app {
    display: flex;
    height: 100vh;
}

/* TIMELINE */

#timeline {
    width: 200px;
    background: #111b21;
    padding: 10px;
    overflow-y: auto;
    border-right: 1px solid #222;
}

#timeline div {
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 6px;
}

#timeline div:hover {
    background: #202c33;
}

/* CHAT */

#chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* TOPBAR */

.topbar {
    background: #202c33;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* CHAT AREA */

#chat {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* MESSAGE WRAPPER */

.message {
    display: flex;
}

/* ALIGNEMENT */

.message.me {
    justify-content: flex-end;
}

.message.other {
    justify-content: flex-start;
}

/* BULLE */

.bubble {
    max-width: 60%;
    padding: 10px 12px;
    border-radius: 10px;
    position: relative;
    word-wrap: break-word;
}

/* COULEURS */

.message.me .bubble {
    background: #005c4b;
}

.message.other .bubble {
    background: #202c33;
}

/* HEURE */

.time {
    font-size: 11px;
    opacity: 0.6;
    text-align: right;
    margin-top: 4px;
}
html, body {
    height: 100%;
    margin: 0;
}

.app {
    display: flex;
    height: 100vh;
}

#timeline {
    width: 200px;
    background: #111b21;
    overflow-y: auto;
}

.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#chat {
    flex: 1;
    overflow-y: auto;
}