/*@import url("pico-overrides.css");*/

.layout {
    display: flex;
    height: 100vh;
    overflow: hidden; /* Prevents whole page from scrolling */
}

/* The Sidebar */
.sidebar {
    width: 300px;
    transition: width 0.3s ease; /* Smooth collapsing animation */
    overflow: hidden; /* Hides text when collapsed */
    white-space: nowrap; /* Prevents text wrapping during animation */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:1rem;
}

/* The collapsed state class applied via JavaScript */
.sidebar.collapsed {
    width: 3rem;
}
#nav-list.collapsed {
    display:none;
}
#navBtn {
    cursor: pointer;
}
.spec-note {
    color:var(--pico-primary-background);
}

/* The Main Content Area */
.main-panel {
    flex-grow: 1; /* Takes up all remaining space */
    padding: 20px;
    overflow-y: auto; /* Enables vertical scrolling just for this panel */
    padding:1rem;
    padding-top:20vh;
    padding-bottom: 30vh;
}
.main-header, #prompt-form {
    position:absolute;
    top:0px;
    padding: 1rem;
    background-color: var(--pico-background-color);
    width: stretch;
    z-index: 9999999;
}

#prompt-form {
    top:unset;
    bottom:0px;
    width: stretch;
}
.welcome-msg, #conversation-feed, .prompt-box {
    width:clamp(200px,80%,960px);
    margin: 0.75rem auto;
}
.prompt-inputs {
    display:flex;
    flex-direction: row;
    gap:.5rem;
    justify-content: flex-start;
    align-items: center;
}
#conversation-feed {
    display: flex;
    flex-direction: column;
}

/* MESSAGES */
.message {
    padding: 0.75rem 1rem;
    border-radius: var(--pico-border-radius);
    
    width: auto;
}

.message.user {
    background-color: var(--pico-card-background-color);
    color: var(--pico-primary-inverse);
    align-self: flex-end;
}

.message.assistant {
    background-color: var(--pico-contrast-inverse);
    align-self: flex-start;
}

/* SYNTH MODULES */
.synth-module {
    padding: 1rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
}

.key.active {
    background: var(--pico-primary);
}