/* ====================================================== */
:root {
    --card-bg: #fff;
    --border: #e8eaee;
    --in-bg: #e5e5ea;
    --in-fg: #000;
    --out1: #0b93f6;
    --out2: #007aff;
    --out-fg: #fff;
    --label: #6b7280;
    --label-strong: #111827;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    --bubble-radius: 18px;
}

/* ========== Modal cleanup and curve ========== */
.notes-modal .modal-dialog {
    border-radius: 20px; /* gives overall curve */
    max-height: 800px;
    overflow: hidden;
}

.notes-modal .modal-content {
    max-height: 800px;
    border: none !important;
    box-shadow: var(--shadow) !important;
    border-radius: 20px !important; /* rounded corners for modal */
    background: var(--card-bg) !important;
    overflow: hidden;
}

.notes-modal .modal-body {
    padding: 0 !important;
    background: transparent !important;
}



/* ========== Close (X) button ========== */
.chat-close {
    position: absolute;
    top: 12px;
    right: 16px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 24px;
    font-weight: 500;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s ease;
}

    .chat-close:hover {
        color: #111;
    }

/* ========== Chat container ========== */
.notes-chat {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 420px;
    background: var(--card-bg);
    border: none;
    border-radius: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
    padding-top: 30px; /* space for close button */
}

/* ========== Messages area ========== */
.messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 16px 12px;
    background: #fff;
    border-radius: 20px;
}

/* Each message row */
.msg {
    display: block;
    width: 100%;
    margin: 10px 0;
}

.msg--in {
    text-align: left;
}

.msg--out {
    text-align: right;
}

/* Stack for label + bubble */
.stack {
    display: inline-block;
    max-width: 80%;
    text-align: inherit;
}

/* Message label (above bubble) */
.msg-label {
    display: block;
    font-size: 12px;
    color: var(--label);
    margin-bottom: 4px;
}

    .msg-label .name {
        font-weight: 600;
        color: var(--label-strong);
    }

    .msg-label .sep {
        padding: 0 6px;
        opacity: 0.6;
    }

/* ========== Bubble (shared style both sides) ========== */
.bubble {
    display: inline-block;
    width: auto;
    max-width: 100%;
    padding: 10px 14px;
    border-radius: var(--bubble-radius);
    line-height: 1.35;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-size: 15px;
}

/* Incoming (grey) */
.msg--in .bubble {
    background: var(--in-bg);
    color: var(--in-fg);
    border-top-left-radius: 6px;
}

/* Outgoing (blue) */
.msg--out .bubble {
    background: #81d4ca;
    color: #fff;
    border-top-right-radius: 6px;
}

/* ========== Inline timestamp ========== */
.msg-label--out {
    text-align: right;
}

.time--inline {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.85;
    color: currentColor;
    text-align: right;
}

/* Grouping (same side tightens) */
.msg + .msg {
    margin-top: 8px;
}

.msg--in + .msg--in .bubble {
    border-top-left-radius: var(--bubble-radius);
}

.msg--out + .msg--out .bubble {
    border-top-right-radius: var(--bubble-radius);
}

/* ========== Composer ========== */
.composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

    .composer input {
        flex: 1 1 auto;
        height: 44px;
        padding: 0 14px;
        border: 1px solid var(--border);
        background: #fff;
        border-radius: 22px;
        font-size: 15px;
        outline: none;
    }

        .composer input:focus {
            border-color: #b9d7ff;
            box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.15);
        }

    .composer button {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 22px;
        background: #81d4ca;
        color: #fff;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(129, 212, 202, 0.35);
        transition: transform 0.06s ease, filter 0.15s ease;
    }

        .composer button:hover {
            filter: brightness(0.95);
        }

        .composer button:active {
            transform: translateY(1px);
        }

/* ========== Scrollbar ========== */
.messages::-webkit-scrollbar {
    width: 10px;
}

.messages::-webkit-scrollbar-thumb {
    background: #d9dbe0;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* ========== Responsive ========== */
media(max-width: 540px) {
    .messages

{
    padding: 14px 10px 8px;
}

.stack {
    max-width: 90%;
}

.bubble {
    font-size: 14px;
}
/* ===== Chat Header ===== */
.chat-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
    position: relative;
    z-index: 5;
}

    .chat-header h5 {
        font-size: 17px;
        font-weight: 600;
        margin: 0;
        color: #111827;
    }

.chat-subtitle {
    font-size: 13px;
    color: var(--label);
    margin-top: 2px;
}

/* --- Handle scroll overflow properly --- */

/* Make the modal body and chat container fill the viewport height up to a limit */
.notes-modal .modal-dialog {
    max-height: 90vh; /* prevent overflowing screen */
}

.notes-chat {
    display: flex;
    flex-direction: column;
    height: 70vh; /* total chat height inside modal */
    max-height: 70vh;
    overflow: hidden; /* prevent entire chat from scrolling */
    border-radius: 20px;
}

/* Only messages area scrolls */
.messages {
    flex: 1 1 auto;
    overflow-y: auto; /* vertical scroll only */
    overflow-x: hidden;
    padding: 20px 16px 12px;
    background: #fff;
    border-radius: 20px;
    min-height: 0; /* crucial for flex scrolling */
}

/* Make sure long text wraps correctly */
.bubble {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


#notes-input {
    width: 100%;
    resize: none;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
}