:root {
    /* Light Color Palette */
    --system-background: white;
    --system-secondary-background: rgba(221, 221, 221, 0.911);

    --border-color: rgba(1, 1, 1, 0.2);

    --selection-color: lightblue;
    --separator-color: #ccc;
}

html, body {
    /* To disable bounce scrolling on the outer layer */
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Color Palette */
        --system-background: #222;
        --system-secondary-background: #444;

        --text-color: white;
        --border-color: rgba(0, 0, 0, 0.2);

        --selection-color: #1aa;
        --separator-color: #444;
    }
}

body {
    display: flex;
    flex-direction: row;
    font-family: sans-serif;
    font-size: 12pt;
    margin: 0;
    padding: 0;
    color: var(--text-color);
}

#ConversationList-Container {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: var(--system-secondary-background);
    border-right: 1px solid var(--separator-color);
    z-index: 10;

    /* Animation */
    transition: transform 0.2s ease-in-out;
}

#PrimaryPane {
    /* Height is computed in JS, because we can't have 100% viewport height and */
    /* account for safe area insets in css */
    height: var(--doc-height);

    display: flex;
    flex-direction: column;
    z-index: 5;
}

.ConversationList-Cell {
    background-color: var(--system-background);
    height: 40pt;
    line-height: 18pt;
    padding: 10pt;
    overflow: hidden;
    user-select: none;
    border-bottom: 1px solid var(--separator-color);
    cursor: default;
}

.ConversationList-Cell.selected {
    background-color: var(--selection-color);
}

.ConversationList-Cell .sender {
    width: 100%;
    display: inline-block;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ConversationList-Cell .preview {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#MessageList {
    background: var(--system-background);
    width: auto;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
}

#MessageList-Container {
    overflow-x: hidden;
    width: 100%;

    display: flex;
    flex-direction: column-reverse;
}

#MessageList-Container * {
    overflow-anchor: none;
}

#MessageList-Container .anchor {
    overflow-anchor: auto;
    height: 1px;
}

.bubble {
    text-overflow: clip;
    margin: 10px;
    max-width: 70%;
}

.bubble .textContainer {
    word-wrap: break-word;
    word-break: break-word;

    display: inline-block;
    background-color: var(--system-secondary-background);
    padding: 10px;
    border-radius: 12px;
}

.bubble .textContainer img {
    width: 100%;
}

.bubble.mine {
    margin-left: auto;
}

.bubble.mine .textContainer {
    text-align: left;
    background-color: var(--selection-color);
}

.bubble .sender {
    font-size: 8pt;
    color: #666;
    padding-bottom: 5px;
    padding-left: 5px;
}

#LoginWindow {
    /* dimming BG - do not theme */
    background-color: rgba(0, 0, 0, 0.192);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
}

#LoginWindow-Content {
    position: absolute;
    background-color: var(--system-background);
    height: auto;
    box-shadow: 0px 4px 15px 6px rgba(0, 0, 0, 0.10);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    padding: 44px;
}

#LoginWindow-Content > input {
    font-size: 16pt;
}

#ComposeView {
    position: relative;
    bottom: 0;
    height: 44px;

    display: flex;
    padding: 14px;
    flex-shrink: 0;

    border-top: 1px solid var(--border-color);
    background: var(--system-secondary-background);
}

#ComposeView #TextField {
    color: var(--text-color);
    background-color: var(--system-background);
    flex-grow: 1;
    margin-right: 16px;
    font-size: 12pt;
}

#ComposeView #SendButton {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16pt;
    position: relative;
    
    /* Center Y */
    top: 50%;
    transform: translate(0, -50%);
}

#NavigationBar {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    height: 64px;
    background-color: var(--system-secondary-background);
    border-bottom: 1px solid var(--border-color);
}

#NavigationBar h1 {
    margin: 0;
    padding: 0;
    font-size: 16pt;
    line-height: 64px;
    padding-left: 16px;
    font-weight: bold;
    user-select: none;
}

#NavigationBar-BackButton {
    border: none;
    background: none;
    outline: none;

    font-size: 16pt;
    padding: 16px;
    cursor: pointer;
}

#NavigationBar-BackButton:active {
    transform: scale(0.9);
    background-color: var(--system-background);
    border-radius: 10%;
}

/* Desktop layout */
@media (min-width: 768px) {
    #ConversationList-Container {
        width: 30%; 
    }

    #PrimaryPane {
        width: 70%;
    }

    #NavigationBar-BackButton {
        display: none;
    }
}
  
/* Mobile layout */
@media (max-width: 767px) {
    #ConversationList-Container {
        position: absolute;
        width: 100%;
        height: 100vh;
        z-index: 10;
        transform: translateX(0);
    }

    #PrimaryPane {
        width: 100%;
    }

    #ConversationList-Container.collapsed {
        transform: translateX(-100%);
    }

    #NavigationBar-BackButton {
        display: visible;
    }
}