* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: #111;
    color: #ddd;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
}


/* =========================
   TOP BAR
   ========================= */

.topbar {
    height: 64px;

    background: #1c1c1c;

    border-bottom: 1px solid #050505;

    box-shadow:
        inset 0 -1px 0 #3b3b3b,
        0 2px 6px #000;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 18px;
}


.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}


.brand-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    font-weight: bold;

    color: #eee;

    background: #252525;

    border: 1px solid #080808;

    border-radius: 4px;

    box-shadow:
        inset 1px 1px 0 #4a4a4a,
        inset -1px -1px 0 #111,
        1px 1px 0 #000;
}


.brand-name {
    color: #eee;
    font-weight: bold;
    font-size: 17px;
}


.brand-subtitle {
    color: #777;
    font-size: 10px;
    margin-top: 2px;
}


nav {
    display: flex;
    gap: 5px;
}


/* =========================
   BUTTONS
   ========================= */

.button,
.nav-button,
.small-button {
    font-family: Tahoma, Arial, sans-serif;

    color: #ddd;

    background: #292929;

    border: 1px solid #090909;

    border-radius: 3px;

    box-shadow:
        inset 1px 1px 0 #505050,
        inset -1px -1px 0 #111,
        1px 1px 0 #000;

    cursor: pointer;

    text-decoration: none;

    transition: none;
}


.button {
    padding: 8px 13px;
}


.nav-button {
    display: block;
    padding: 7px 12px;
}


.small-button {
    padding: 5px 10px;
    font-size: 11px;
}


.button:hover,
.nav-button:hover,
.small-button:hover {
    background: #303030;
    color: #fff;
}


.button:active,
.nav-button:active,
.small-button:active {
    background: #202020;

    box-shadow:
        inset -1px -1px 0 #454545,
        inset 1px 1px 0 #080808;
}


.nav-button.active {
    background: #202020;

    box-shadow:
        inset -1px -1px 0 #444,
        inset 1px 1px 0 #080808;
}


/* =========================
   MAIN APPLICATION
   ========================= */

.app {
    width: calc(100% - 30px);
    max-width: 1400px;

    min-height: calc(100vh - 115px);

    margin: 15px auto;

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 10px;
}


.panel {
    background: #1b1b1b;

    border: 1px solid #080808;

    border-radius: 5px;

    box-shadow:
        inset 1px 1px 0 #3b3b3b,
        inset -1px -1px 0 #080808,
        1px 2px 5px #000;
}


/* =========================
   SIDEBAR
   ========================= */

.sidebar {
    padding: 10px;

    display: flex;
    flex-direction: column;
}


.new-chat {
    width: 100%;
}


.sidebar-title {
    margin-top: 18px;
    margin-bottom: 7px;

    padding-bottom: 5px;

    color: #777;

    font-size: 10px;
    font-weight: bold;

    border-bottom: 1px solid #333;
}


.chat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.chat-item {
    width: 100%;

    text-align: left;

    padding: 8px;

    color: #aaa;

    background: #202020;

    border: 1px solid transparent;

    border-radius: 3px;

    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;

    cursor: pointer;
}


.chat-item:hover {
    color: #ddd;
    background: #262626;
}


.chat-item.selected {
    color: #eee;

    background: #292929;

    border-color: #080808;

    box-shadow:
        inset 1px 1px 0 #444,
        inset -1px -1px 0 #111;
}


.chat-icon {
    color: #777;
    margin-right: 5px;
}


.sidebar-bottom {
    margin-top: auto;
}


.status-box {
    padding: 7px;

    color: #888;

    background: #151515;

    border: 1px solid #090909;

    box-shadow:
        inset 1px 1px 0 #080808,
        inset -1px -1px 0 #333;

    font-size: 10px;
}


.status-dot {
    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 5px;

    background: #777;

    border: 1px solid #111;

    border-radius: 50%;
}


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

.chat {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.chat-header {
    min-height: 58px;

    padding: 10px 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #202020;

    border-bottom: 1px solid #090909;

    box-shadow:
        inset 0 -1px 0 #353535;
}


.chat-title {
    color: #eee;
    font-weight: bold;
    font-size: 14px;
}


.chat-status {
    color: #666;
    font-size: 10px;
    margin-top: 3px;
}


/* =========================
   MESSAGES
   ========================= */

.messages {
    flex: 1;

    padding: 15px;

    overflow-y: auto;

    background: #151515;
}


.message {
    max-width: 850px;

    margin-bottom: 12px;

    padding: 10px;

    border: 1px solid #090909;

    border-radius: 4px;

    box-shadow:
        inset 1px 1px 0 #333,
        inset -1px -1px 0 #0a0a0a;
}


.budge-message {
    background: #202020;
}


.user-message {
    margin-left: auto;

    background: #242424;
}


.message-header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 7px;

    padding-bottom: 5px;

    border-bottom: 1px solid #333;
}


.message-name {
    font-size: 10px;
    font-weight: bold;
    color: #aaa;
}


.message-time {
    font-size: 9px;
    color: #555;
}


.message-content {
    color: #ccc;

    line-height: 1.5;

    white-space: pre-wrap;
}


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

.input-area {
    padding: 10px;

    background: #1c1c1c;

    border-top: 1px solid #080808;

    box-shadow:
        inset 0 1px 0 #353535;
}


textarea {
    width: 100%;

    resize: vertical;

    min-height: 65px;

    padding: 9px;

    color: #ddd;

    background: #111;

    border: 1px solid #050505;

    border-radius: 3px;

    outline: none;

    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;

    box-shadow:
        inset 1px 1px 0 #050505,
        inset -1px -1px 0 #333;
}


textarea:focus {
    border-color: #444;
}


textarea::placeholder {
    color: #555;
}


.input-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 7px;
}


.input-info {
    color: #555;
    font-size: 9px;
}


.send-button {
    min-width: 75px;
}


/* =========================
   FOOTER
   ========================= */

footer {
    width: calc(100% - 30px);
    max-width: 1400px;

    margin: 0 auto 12px;

    display: flex;
    justify-content: space-between;

    color: #555;

    font-size: 10px;
}


/* =========================
   SCROLLBAR
   ========================= */

::-webkit-scrollbar {
    width: 12px;
}


::-webkit-scrollbar-track {
    background: #111;

    border-left: 1px solid #252525;
}


::-webkit-scrollbar-thumb {
    background: #292929;

    border: 1px solid #080808;

    box-shadow:
        inset 1px 1px 0 #444,
        inset -1px -1px 0 #111;
}


::-webkit-scrollbar-thumb:hover {
    background: #333;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

    .topbar {
        height: auto;

        padding: 10px;

        gap: 10px;

        flex-direction: column;
        align-items: stretch;
    }

    nav {
        width: 100%;
    }

    .nav-button {
        flex: 1;
        text-align: center;
    }

    .app {
        width: calc(100% - 16px);

        grid-template-columns: 1fr;

        min-height: calc(100vh - 145px);
    }

    .sidebar {
        display: none;
    }

    footer {
        width: calc(100% - 16px);
    }

}