/* Version 1/16/2026 */

/* 
@media options:
    Extra small is 0 - 400 width (Not to be added until after some spare time) (iphone 13 mini size)
    Small is 401 - 600 width
    Default is 601-950 width
    Big is 951 - 1400 width
    Extra big is 1401 - 2000 width (add later?)
*/

header {
    background-color: lightgreen;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
body {
    margin: 0px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#toptitle {
    margin: 1vw 3vw;
    font-size: 5vw;
    text-decoration: none;
    color: black;
    flex: 2;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}
#menuIconButton, #settingsIconButton {
    flex: 1; /* This makes both buttons take up equal available space */
    display: flex;
    max-width: 50px; /* Limits the "slot" so they don't crush the title */
}
#menuIconButton {
    /* Use vw but add a minimum pixel size for mobile usability */
    width: 7vw; 
    height: 7vw;
    min-width: 40px; 
    min-height: 40px;

    margin: 0.5vw;
    background-color: lightgreen;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 50%; /* standard circle */
}

#menuIcon {
    width: 60%; 
    height: 60%;
    
    background-image: url('/chat/hamburger.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}
#settingsIcon {
    width: 100%; 
    height: 100%;
    
    background-image: url('/chat/settings.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}
#settingsIconButton {
    width: 6vw; 
    height: 6vw;
    min-width: 40px; 
    min-height: 40px;

    margin: 0.5vw;
    
    border: none;
    cursor: pointer;
    
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    border-radius: 50%;
}
#main {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    height: 100%;
    background-color: lightgray;
    overflow: hidden; 
}
#chatsBox {
    flex: 2;
    transition: all 0.5s ease;
    backface-visibility: hidden;
    transform: translateZ(0);
    overflow: hidden;
    min-width: 10vw;
    display: flex;
    flex-direction: column;
    height: 100%;
}
#chatsTitle {
    padding: 0px;
    font-size: 2vw;
    margin: 0px;
    text-align: center;
}
#chatsList {
    background-color: rgb(200, 200, 200);
    padding: 1vw;
    flex: 1;
    overflow-y: auto;
}
.hidden-sidebar {
    flex: none !important;
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    pointer-events: none;
}
.hidden-sidebar + #resizer {
    display: none;
}
.chats, #chatCreate {
    border-radius: 2vw;
    padding: 0.5px 1vw;
    background-color: rgb(228, 228, 228);
    margin-bottom: 1vw;
    cursor: pointer;
}
.chats:hover, #chatCreate:hover {
    background-color: rgb(220, 220, 220);
    cursor: pointer;
}
#resizer {
    touch-action: none;
    width: 1vw;
    flex-shrink: 0;
    cursor: col-resize;
    background-color: rgb(150, 150, 150);
    height: 100%;
    z-index: 10;
}

#resizer:hover {
    background-color: rgb(100, 100, 100);
}
.resizing-active {
    cursor: col-resize !important;
}
.resizing-active * {
    pointer-events: none !important; /* Disables all hover effects/logic in chat */
    user-select: none !important;    /* Stops text selection */
    transition: none !important;
}
#messagesBox {
    flex: 5;
    min-width: 30vw;
    display: flex;
    height: 100%;
    flex-direction: column;
    background-color: white;
}
#chatTitle {
    font-size: 3vw;
}
#chatBar {
    background-color: rgb(200, 200, 200);
    color: black;
    font-size: 2vw;
    padding: 0.5vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#messages {
    flex: 1;
    padding: 0.5vw;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
}
.timestamp {
    text-align: center;
}
.posts {
    border-radius: 2vw;
    padding: 0px 1vw;
    margin: 1vw;
    margin-top: 0px;
    width: fit-content;
    max-width: 80%;
}
.right {
    margin-left: auto;
    background-color: rgb(228, 228, 255);
    border-bottom-right-radius: 0px;
}
.left {
    margin-right: auto;
    background-color: rgb(228, 228, 228);
    border-bottom-left-radius: 0px;
}
div.posts div.replyBox {
    background-color: rgb(208, 208, 205);
    border-radius: 2vw;
    padding: 0.5vw;
    margin-top: 1vw;
}
.replyBox p {
    padding: 0.5vw;
    margin: 0px;
}
#replyBar {
    background-color: rgb(225, 225, 225);
}
#replyBar p {
    padding: 0px 5vw;
}
#typeBar {
    background-color: rgb(235, 235, 235);
    padding: 15px;
    display: flex;
    align-items: flex-end; /* Align button to the bottom of the input */
    gap: 10px;
}
#typeForm {
    display: flex;
    width: 100%;
    align-items: flex-end;
    gap: 10px;
    margin: 0 auto;
    max-width: 800px; /* Keeps the chat bar centered and readable */
}
#typeInput {
    width: 100%; /* Fill the container */
    max-width: 600px; /* Prevent it from getting too wide on desktop */
    min-height: 40px;
    max-height: 150px; /* Stop growing after a certain point */
    
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 10px 15px;
    
    font-family: inherit;
    font-size: 16px; /* 16px prevents iOS from zooming in automatically */
    resize: none; /* Hide the manual resize handle */
    outline: none;
    transition: lightgreen 0.2s;
}
#typeInput:focus {
    border-color: lightgreen;
}
#typeBar button {
    background-color: lightgreen;
    height: 40px; /* Match the min-height of the input */
    padding: 0 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
}
#typeBar button:hover {
    background-color: rgb(164, 255, 164);
}
footer {
    font-size: 2.5vw;
    background-color: lightgreen;
    text-align: center;
    padding: 1vw 0px;
    width: 100vw;
}
.footer {
    display: inline;
    text-decoration: none;
    color: black;
    margin: 0px 1vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
button#lightmode:hover {
    cursor: pointer;
}
button#lightmode {
    font-size: 2.5vw;
    border-width: 0px;
    font-family: 'Times New Roman', Times, serif;
    background-color: lightgreen;
}
h2#settingsTitle, h2#contextMenuTitle {
    margin: 1vw 0px;
}
h2#createChatTitle {
    margin: 0px 0px 1vw 0px;
}
#createChatBox, #settingsBox{
    position: absolute;
    background-color: lightgreen;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3vw;
    padding: 2vw;
    z-index: 1000;
}
#contextMenuBox {
    position: absolute;
    background-color: lightgreen;
    z-index: 1001;
    border-radius: 3vw;
    padding: 2vw;
}
h2#contextMenuTitle {
    display: inline;
    margin-right: 1vw;
}
#contextMenuCopy, #contextMenuReply, #contextMenuEdit {
    margin: 0.5vw 0px;
    background-color: rgb(164, 255, 164);
    padding: 0.5vw 1vw;
    border-radius: 3vw;
}
#contextMenuCopy:hover, #contextMenuReply:hover, #contextMenuEdit:hover {
    background-color: green;
    cursor: pointer;
}
h2#settingsTitle {
    display: inline;
    margin: 0px;
}
#settingsCancel, #contextMenuClose {
    color: black;
    display: inline;
    margin: 0px;
}
#settingsCancel:hover, #contextMenuClose {
    cursor: pointer;
}
#settingsTopBox {
    display: flex;
    justify-content: space-between;
}
#addUserTitle {
    margin: 0px;
}
/* Darkmode settings */
body.darkmode {
    color: #f2f2f2;
}
header.darkmode {
    background-color: darkgreen;
}
#menuIconButton.darkmode {
    background-color: darkgreen;
}
#settingsIconButton.darkmode:hover {
    background-color: #626262;
}
#toptitle.darkmode {
    color: #f2f2f2;
}
div#chatsList.darkmode {
    background-color: #424242;
}
div#chatsBox.darkmode {
    background-color: #323232;
}
div#chatCreate.darkmode, div.chats.darkmode {
    background-color: #222222;
}
div#chatCreate.darkmode:hover, div.chats.darkmode:hover {
    background-color: #323232;
}
div#resizer.darkmode, #settingsIconButton.darkmode {
    background-color: #525252;
}
div#resizer.darkmode:hover {
    background-color: #727272;
}
div#messagesBox.darkmode {
    background-color: #121212;
}
div#chatBar.darkmode {
    background-color: #424242;
    color: #f2f2f2;
}
div.posts.right.darkmode {
    background-color: #000080;
}
div.posts.left.darkmode {
    background-color: #323240;
}
div.posts.darkmode div.replyBox.darkmode {
    background-color: #424250;
}
div#typeBar.darkmode {
    background-color: #323232;
}
textarea#typeInput.darkmode {
    background-color: #424242;
    border-color: #727272;
    color: #f2f2f2;
}
textarea#typeInput.darkmode:focus {
    border-color: darkgreen;
}
footer.darkmode, .footer.darkmode, button#lightmode.darkmode {
    background-color: darkgreen;
    color: #f2f2f2;
}
#typeBar button.darkmode {
    background-color: darkgreen;
    color: #f2f2f2;
    border-color: #525252;
}
#typeBar button.darkmode:hover {
    background-color: green;
    border-color: #727272;
}
#contextMenuCopy.darkmode, #contextMenuReply.darkmode, #contextMenuEdit.darkmode, #contextMenuBox.darkmode, #settingsBox.darkmode, #createChatBox.darkmode {
    background-color: darkgreen;
}
#contextMenuCopy.darkmode:hover, #contextMenuReply.darkmode:hover, #contextMenuEdit.darkmode:hover {
    background-color: green;
}
#settingsBox a.darkmode {
    color: #f2f2f2;
    text-decoration: none;
}
#settingsCancel.darkmode, #contextMenuClose.darkmode {
    color: #f2f2f2;
}
@media (max-width: 600px) {
    #main {
        display: block;
        position: relative;
        overflow: hidden; /* Prevents horizontal scrolling when chat is off-screen */
    }

    #chatsBox {
        width: 100% !important;
        height: 100%;
        /* The list stays put at the base layer */
    }

    #messagesBox {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100%;
        background-color: white;
        z-index: 10;
        
        /* START STATE: Hidden to the right */
        transform: translateX(100%); 
        transition: translateX(100%) 0.3s ease-in-out;
    }
    /* ACTIVE STATE: When we want to see the messages */
    body.chat-open #messagesBox {
        transform: translateX(0%);
    }

    #resizer {
        display: none !important;
    }
    
    #menuIconButton {
        visibility: hidden;
        width: 7vw;
        height: 7vw;
    }
    #settingsIconButton:hover {
        background-color: lightgreen;
    }
    body.chat-open #menuIconButton {
        visibility: visible;
    }
    footer, button#lightmode {
        font-size: 4vw;
    }
    #toptitle {
        font-size: 5vw;
    }
    #chatTitle{
        font-size: 4vw;
    }
    #chatsTitle {
        font-size: 3vw;
    }
    #settingsIconButton {
        height: 7vw;
        width: 7vw;
    }
}
@media (min-width: 951px) {
    #settingsIconButton:hover {
        background-color: lightgray;
    }
    #toptitle {
        font-size: 3vw;
    }
    #chatsTitle {
        font-size: 1.5vw;
    }
    #chatTitle{
        font-size: 2vw;
    }
    #menuIconButton {
        width: 6vw;
        height: 6vw;
    }
    #settingsIconButton{
        width: 3.5vw;
        height: 3.5vw;
    }
    .posts {
        font-size: 1.5vw;
    }
    footer, button#lightmode {
        font-size: 1.5vw;
    }
}
@media (min-width: 1401px) {
    #toptitle {
        font-size: max(calc(60px - 1vw), 10px);
    }
    #chatsTitle {
        font-size: max(calc(35px - 1vw), 10px);
    }
    #chatTitle{
        font-size: max(calc(50px - 1vw), 10px);
    }
    .posts, footer, button#lightmode {
        font-size: max(calc(35px - 1vw), 10px);
    }
}