@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');

:root {
    --main-background: #121412;
    --main-color: #D6DAD7;
    --sidebar-background: #101210;
    --expander-background: #1A1C1A;
    --expander-background-hover: #262A26;
    --expander-border: #262A26;
    --button-color: #fff;
    --button-background: #5CA882;
    --button-background-hover: #72C09A;
    --button-border: #5CA882;
    --danger-button-color: #fff;
    --danger-button-background: #AA6868;
    --danger-button-background-hover: #C08080;
    --danger-button-border: #AA6868;
    --green: #5CA882;
    --gray: #5C645E;
    --red: #AA6868;
}

body {
    font-family: 'JetBrains Mono', monospace;
    background: #121412;
    color: #D6DAD7;
}

/* Sidebar */
#buffer-list {
    background: var(--sidebar-background);
    border-right: 1px solid #262A26;
}

#buffer-list .active {
    background: rgba(92, 168, 130, 0.06);
    border-left: 2px solid #5CA882;
}

/* Nick colors */
.nick-1 { color: #68AA82; }
.nick-2 { color: #AA9E68; }
.nick-3 { color: #68A0AA; }
.nick-4 { color: #AA68A0; }
.nick-5 { color: #88AA58; }
.nick-6 { color: #68AA82; }
.nick-7 { color: #AA9E68; }
.nick-8 { color: #68A0AA; }
.nick-9 { color: #AA68A0; }
.nick-10 { color: #88AA58; }
.nick-11 { color: #68AA82; }
.nick-12 { color: #AA9E68; }
.nick-13 { color: #68A0AA; }
.nick-14 { color: #AA68A0; }
.nick-15 { color: #88AA58; }
.nick-16 { color: #68AA82; }

/* Input */
input, textarea {
    background: #101210;
    border: 1px solid #262A26;
    border-radius: 3px;
    color: #D6DAD7;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
}

input:focus, textarea:focus {
    border-color: #5CA882;
}

input::placeholder, textarea::placeholder {
    color: #363C38;
}

/* Buttons */
button, input[type="submit"] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    border-radius: 3px;
}

/* Connect form */
form label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #8A928C;
}

/* Dialog */
.dialog {
    background: #1A1C1A;
    border: 1px solid #262A26;
    border-radius: 4px;
}

.dialog-header {
    border-bottom: 1px solid #262A26;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #121412;
}

::-webkit-scrollbar-thumb {
    background: #262A26;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #363C38;
}

/* Date/unread separators */
.date-separator, .unread-separator {
    border-color: #262A26;
    color: #5C645E;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
}

/* Links */
a {
    color: #5CA882;
}

a:hover {
    color: #72C09A;
}

/* Timestamps */
time {
    color: #363C38;
    font-size: 10.5px;
}

/* Status indicators */
.status-here { color: #5CA882; }
.status-gone { color: #AA9E68; }
.status-offline { color: #5C645E; }