:root {
    --chat-max-width: 900px;
    --bubble-max-width: 78%;
}

body {
    background: #f6f7fb
}

/* Layout */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
}

.page-container {
    grid-row: 2;
}

.chat-page {
    display: grid;
    grid-template-rows: 1fr;
}

/* Messages area */
#messagesScroll {
    overflow-y: auto;
    scroll-behavior: smooth
}

#messages {
    max-width: var(--chat-max-width)
}

/* Message bubbles */
.message {
    width: 100%
}

.message .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600
}

.msg-bubble {
    display: inline-block;
    max-width: var(--bubble-max-width);
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    line-height: 1.35
}

.message-user .msg-bubble {
    background: #0d6efd;
    color: #fff
}

.message-assistant .msg-bubble {
    background: #fff;
    color: #212529;
    border: 1px solid #e9ecef
}

.msg-text p {
    margin-bottom: .5rem;
    white-space: pre-wrap
}

/* Attachments inside a message */
.msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem
}

.attach-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    color: #343a40;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .875rem
}

.message-user .attach-chip {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .15);
    color: #fff
}

/* Composer */
.composer {
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .05)
}

.attachment-bar {
    border: 1px dashed #ced4da;
    border-radius: .5rem;
    padding: .4rem;
    display: none
}

.attachment-bar.active {
    display: block
}

.attachment-bar .chip {
    border: 1px solid #dee2e6;
    border-radius: 999px;
    padding: .25rem .6rem;
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    background: #f8f9fa
}

.attachment-bar .chip .remove {
    cursor: pointer
}

textarea#chatInput {
    resize: none;
    max-height: 35vh
}

/* Offcanvas width tweak */
.offcanvas-start {
    width: min(85vw, 320px)
}

/* Utility */
.cursor-pointer {
    cursor: pointer
}