/* ==========================================================================
                   MOBILE-FIRST CHAT INTERFACE STYLES
                   ========================================================================== */

/* Variables for consistent theming */
:root {
    --primary-color: #6399AE;
    --primary-dark: #003366;
    --background-light: #f8f9fa;
    --background-lighter: #ffffff;
    --border-color: #dee2e6;
    --border-hover: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --user-message-bg: #A1C2CE;
    --user-message-text: #453F39;
    --border-radius-sm: 12px;
    --border-radius-md: 18px;
    --border-radius-lg: 24px;
    --transition-base: all 0.2s ease;
    --shadow-focus: 0 0 0 0.2rem rgba(0, 51, 102, 0.1);
    --huckleberry-blue-10: #EAF3F8; /* Example light blue */
    --huckleberry-blue-30: #6399AE; /* Example medium blue */
}

/* ==========================================================================
                   BASE LAYOUT - MOBILE FIRST
                   ========================================================================== */

.chat-container {
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 1rem;
}

/* ==========================================================================
                   INITIAL STATE - CENTERED INPUT
                   ========================================================================== */

.initial-chat-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 1rem;
}

.chat-notes {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
}

.centered-chat-input {
    width: 100%;
    max-width: 100%;
    text-align: center;
}

.title-row {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    flex-wrap: wrap;
    justify-content: left;
    font-size: 0.9rem;
    gap: 16px; /* Only define once */
}

    .title-row h3 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .title-row img.me-2 {
        position: relative;
        top: 2px; /* Adjust this value as needed */
    }

.title-subtext {
    font-family: Verdana;
    font-weight: 400;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0%;
    color: #453F39;
    text-align: left;
    margin-top: 0;
    margin-bottom: 15px;
}

.title-spacer-line {
    display: block;
    font-size: 16px;
    line-height: 110%;
}

/* Simplified, shared style for chat input notes (centered for both
               the main centered input and the bottom fixed input). */
.chat-input-note,
.bottom-input-area .chat-input-note {
    font-family: Verdana;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
    text-align: center;
    color: #666666;
    background: transparent;
    max-width: 720px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.input-wrapper-centered {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    align-items: flex-end;
}

/* When mobile keyboard is active, fix the centered chat form to viewport bottom */
.chat-form-centered.mobile-keyboard-active-input {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1051 !important;
    background: var(--background-lighter);
    padding: 1rem !important;
    margin: 0 !important;
}

.chat-input-centered {
    width: 558px;
    min-height: 35px;
    border: 1px solid #C9C5C1;
    border-radius: 4px;
    font-family: Verdana;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    word-spacing: normal;
    flex: 1;
    resize: none;
    overflow: hidden;
    padding-top: 4px;
    padding-bottom: 4px;
}

    .chat-input-centered:focus {
        border: 1px solid #C9C5C1; /* or #6399AE for a blue focus */
        outline: none;
        border-radius: 4px;
        box-shadow: var(--shadow-focus); /* Optional: subtle shadow for accessibility */
    }

    .chat-input-centered::placeholder {
        font-family: Verdana;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: normal;
        word-spacing: normal;
    }

    /* Custom scrollbar for chat input areas */
    .chat-input-centered::-webkit-scrollbar,
    .chat-input-bottom::-webkit-scrollbar {
        width: 4px;
        background: transparent;
    }

    .chat-input-centered::-webkit-scrollbar-thumb,
    .chat-input-bottom::-webkit-scrollbar-thumb {
        background: #D9D9D9;
        border-radius: 8px;
        min-height: 58px;
        opacity: 1;
    }

    .chat-input-centered::-webkit-scrollbar-track,
    .chat-input-bottom::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 8px;
    }

    /* Hide scrollbar buttons (arrows) in WebKit browsers */
    .chat-input-centered::-webkit-scrollbar-button,
    .chat-input-bottom::-webkit-scrollbar-button {
        display: none;
        height: 0;
        width: 0;
    }

/* Firefox */
.chat-input-centered,
.chat-input-bottom {
    scrollbar-width: thin;
    scrollbar-color: #D9D9D9 transparent;
    border-radius: 8px;
}

/* Suppress all transitions during window resize to prevent flash */
body.resize-in-progress * {
    transition: none !important;
}

.send-button-centered {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    color: white;
    background: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    font-size: 0.8rem;
    border: none;
    flex-shrink: 0;
}

    .send-button-centered.active {
        background: var(--primary-color);
        color: white;
    }

    .send-button-centered:disabled {
        cursor: not-allowed;
        color: white;
        background: #999999;
    }

/* ==========================================================================
                   SUGGESTION QUESTIONS - MOBILE FIRST
                   ========================================================================== */

.suggestion-questions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 4px;
    /* Ensure enough space for expanded input on desktop */
    padding-bottom: 0.5rem;
}

.suggestion-item {
    /* Your specific font properties */
    font-family: Verdana;
    font-weight: 400;
    font-size: 16px;
    line-height: 110%; /* 110% = 1.1 in CSS */
    letter-spacing: 0%;
    font-style: italic;
    color: #453F39;
    /* Layout properties */
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    text-align: left;
    color: var(--text-primary);
    cursor: default;
    transition: none;
    margin: 0; /* Reset any inherited margins */
}

    /* Remove hover effects */
    .suggestion-item:hover {
        background: none;
        border: none;
        transform: none;
    }

    /* Hide icons */
    .suggestion-item i {
        display: none;
    }
/* Mobile: 4px gap between suggestion questions */
@media (max-width: 767px) {
    .suggestion-questions {
        gap: 4px; /* 4px gap for mobile only */
    }
}

/* ==========================================================================
                   CHAT MESSAGES STATE
                   ========================================================================== */

.chat-messages-state {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.messages-container {
    flex: 1;
    /* Use a more compatible overflow value to ensure consistent behavior
               across browsers — 'overlay' is non-standard and can cause
               scrolling issues on some platforms. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    padding: 1rem 0 100px;
    width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
                   MESSAGES - MOBILE FIRST
                   ========================================================================== */

.message {
    margin-bottom: 3rem;
    animation: fadeIn 0.3s ease-in;
}

.user-message {
    display: flex;
    justify-content: flex-end;
}

    .user-message .message-content {
        background: var(--huckleberry-blue-10);
        color: var(--user-message-text);
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--huckleberry-blue-30);
        border-radius: var(--border-radius-md) var(--border-radius-md) 4px var(--border-radius-md);
        max-width: 90%;
        word-wrap: break-word;
        font-size: 0.9rem;
        line-height: 1.4;
    }

.assistant-message .message-header {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.assistant-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.assistant-message .message-content {
    background: var(--background-lighter);
    padding: 0.75rem 0.75rem 0.75rem 0;
    border-radius: 4px var(--border-radius-md) var(--border-radius-md) var(--border-radius-md);
    color: var(--text-primary);
    /* Force consistent typography so headings, lists and bold
               text inside assistant messages don't appear larger or use
               a different font. */
    line-height: 1.5;
    /* User-requested typography */
    font-size: 14px; /* explicit px as requested */
    font-family: Verdana, 'WorkSafeBC Halis R', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* Ensure common child elements inherit the exact sizing and family
           so bullets and paragraph text remain visually consistent. */
    .assistant-message .message-content,
    .assistant-message .message-content p,
    .assistant-message .message-content ul,
    .assistant-message .message-content ol,
    .assistant-message .message-content li,
    .assistant-message .message-content a,
    .assistant-message .message-content code,
    .assistant-message .message-content pre,
    .assistant-message .message-content h1,
    .assistant-message .message-content h2,
    .assistant-message .message-content h3 {
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
    }

/* ==========================================================================
                   BOTTOM INPUT AREA - MOBILE FIRST
                   ========================================================================== */

.bottom-input-area {
    position: fixed !important;
    bottom: var(--footer-height) !important; /* Above footer */
    left: 0;
    right: 0;
    background: var(--background-lighter);
    padding: 1.25rem 12px 0.75rem 0.75rem !important; /* Increased top padding from 0.75rem to 1.25rem */
    z-index: 1051 !important; /* Above footer (z-index: 1050) */
    margin: 0;
    width: 100%;
    display: none;
}

    /* NEW: When mobile keyboard is active, anchor bottom input to viewport bottom */
    .bottom-input-area.mobile-keyboard-active-input {
        position: fixed !important;
        bottom: 0 !important; /* Override the default bottom: 90px */
        left: 0 !important;
        right: 0 !important;
        z-index: 1051 !important; /* Above footer z-index (1050) */
    }

    /* Center the info/note text under the bottom input area so it matches
           the centered behavior of the initial input form. This fixes a
           layout difference where the note was left-aligned. */

    .bottom-input-area.d-none {
        display: none !important;
    }

    .bottom-input-area:not(.d-none) {
        display: block !important;
    }


.input-wrapper-bottom {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    align-items: flex-end;
}

.chat-input-bottom {
    width: 558px;
    min-height: 35px;
    border: 1px solid #C9C5C1;
    border-radius: 4px;
    padding-bottom: 1px;
    font-family: Verdana;
    font-size: 14px;
    font-weight: 400;
    flex: 1;
    resize: none;
    overflow: hidden;
    min-height: 35px;
    max-height: 65px;
    overflow-y: auto;
    padding-top: 4px;
    padding-bottom: 4px;
    letter-spacing: normal;
    word-spacing: normal;
}

    .chat-input-bottom:focus {
        border: 1px solid #C9C5C1;
        outline: none;
        box-shadow: var(--shadow-focus);
        border-radius: 4px;
    }

    .chat-input-bottom::placeholder {
        font-family: Verdana;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: normal;
        word-spacing: normal;
    }

.send-button-bottom {
    width: 35px;
    height: 35px;
    background: #999999;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    font-size: 0.8rem;
    border-radius: 4px;
    border: none;
    flex-shrink: 0;
}

    .send-button-bottom.active {
        background: var(--primary-color);
        color: white;
    }

    .send-button-bottom:disabled {
        cursor: not-allowed;
        color: white;
        background: #999999;
    }


/* ==========================================================================
                   ANIMATIONS
                   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.message.animation-complete {
    animation: none !important;
}

/* ==========================================================================
                   MESSAGE CONTENT TYPOGRAPHY - MOBILE FIRST
                   ========================================================================== */

.message-content h1,
.message-content h2,
.message-content h3 {
    margin-bottom: 0.4rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.message-content h1 {
    font-size: 1.1rem;
}

.message-content h2 {
    font-size: 1rem;
}

.message-content h3 {
    font-size: 0.95rem;
}

.message-content ul,
.message-content ol {
    margin: 0.4rem 0;
    padding-left: 1.25rem;
}

.message-content li {
    margin-bottom: 0.2rem;
    line-height: 1.4;
}

.message-content p {
    margin-bottom: 0.6rem;
    line-height: 1.5;
}

.message-content strong,
.message-content b {
    /* Keep bold styling but inherit sizing and line-height so
               toggling bold does not change layout or perceived size. */
    color: var(--text-primary);
    font-weight: 600;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
}

.message-content code {
    background: var(--background-light);
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
    font-size: 0.85em;
    color: #d63384;
}

/* ==========================================================================
                   SYSTEM MESSAGES
                   ========================================================================== */

.error-message .alert,
.info-message .alert {
    margin-bottom: 0;
    font-size: 0.85rem;
}

/* ==========================================================================
                   LOADING INDICATOR
                   ========================================================================== */

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-left: 32px;
}

.loading-text {
    color: #453F39;
    font-family: Verdana;
    font-weight: 700;
    font-size: 14px;
    line-height: 0%;
    letter-spacing: 0%;
}

.sk-four-bounce {
    width: 60px;
    text-align: center;
    margin-left: 0;
    display: inline-block;
}

    .sk-four-bounce .sk-child {
        width: 6px;
        height: 6px;
        border-radius: 100%;
        display: inline-block;
        animation: sk-four-bounce 1.4s ease-in-out 0s infinite both;
        background-color: var(--text-secondary);
        margin-right: 3px;
        background-color: #ED8B00;
    }

    .sk-four-bounce .sk-bounce1 {
        animation-delay: 0s;
        width: 4px;
        height: 4px;
    }

    .sk-four-bounce .sk-bounce2 {
        animation-delay: 0.16s;
        width: 6px;
        height: 6px;
    }

    .sk-four-bounce .sk-bounce3 {
        animation-delay: 0.32s;
        width: 8px;
        height: 8px;
    }

    .sk-four-bounce .sk-bounce4 {
        animation-delay: 0.48s;
        width: 10px;
        height: 10px;
    }

@keyframes sk-four-bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================================================
                                   Star icon for all devices with exceptions on mobile
                                   ========================================================================== */

.title-row img[src*="star-icon.svg"] {
    margin-top: 8px;
    margin-left: 0;
}


/* ==========================================================================
                           MOBILE FIX FOR CENTER INPUT FORM
                           ========================================================================== */

/* Mobile: Fix input form to bottom */
@media (max-width: 767px) {
    .chat-form-centered {
        position: fixed !important;
        bottom: 90px; /* Above footer (80px) + some spacing */
        left: 0;
        right: 0;
        background: white;
        padding: 0.75rem 1rem;
        z-index: 200; /* Above footer but below modals */
        margin: 0;
    }
        /* NEW: When mobile keyboard is active, anchor input to viewport bottom */
        .chat-form-centered.mobile-keyboard-active-input {
            bottom: 0 !important; /* Override the default bottom: 90px */
            z-index: 1051 !important; /* Above footer z-index (1050) */
        }

    .chat-input-centered {
        max-height: 75px; /* Maximum height for mobile */
        overflow-y: auto; /* Enable scroll when content exceeds max-height */
    }

    .chat-input-bottom {
        max-height: 75px;
        overflow-y: auto;
    }

    .input-wrapper-centered {
        max-width: 100%;
        margin: 0;
    }
    /* Add bottom spacing to content so it doesn't get hidden behind fixed input */
    .centered-chat-input {
        padding-bottom: 100px; /* Space for fixed input + some extra */
    }
    /* Keep title and suggestions in normal flow */
    .title-row,
    .suggestion-questions {
        position: static;
        /* These stay in their normal positions */
    }
}

/* ==========================================================================
                   SMALL MOBILE - LEFT ALIGN TITLE ROW (457px and smaller)
                   ========================================================================== */

@media (max-width: 575px) {
    .title-row {
        justify-content: flex-start; /* ✅ Left align the title row */
        text-align: left; /* ✅ Left align the text */
    }

        .title-row h3 {
            text-align: left; /* ✅ Ensure h3 is also left aligned */
        }
}

/* for the initial chat part */

@media (min-width: 576px) {

    .suggestion-item {
        text-align: left; /* ✅ Keeps individual items left-aligned */
    }
    /* title row */
    .title-row {
        text-align: center;
        margin-bottom: 8px;
        /* ✅ WorkSafeBC Halis R font properties for desktop */
        font-family: 'WorkSafeBC Halis R';
        font-weight: 700;
        font-size: 21px;
        line-height: 110%;
        letter-spacing: 0%;
        color: #453F39;
    }
    /* NEW: Make suggestions container align with the text portion of title-row */
    .suggestion-questions {
        margin-left: 48px;
        margin-right: auto;
        width: fit-content;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 40px !important;
    }
}

/* ==========================================================================
                   DESKTOP+ STYLES (min-width: 768px)
                   ========================================================================== */

/* when the footer big green curve showing V1, position the bottom input */
@media (min-width: 961px) {
    /* Only push input up when footer is visible (non-chat-mode) */
    html:not(.chat-mode) .bottom-input-area {
        bottom: 149px !important; /* Above desktop footer */
        padding: 1rem 0 0.75rem 0 !important;
        z-index: 1051 !important;
        background: var(--background-lighter) !important;
        margin: 0 !important;
    }

    /* In chat-mode the footer is hidden; honour the CSS variable (0px) */
    html.chat-mode .bottom-input-area {
        bottom: var(--footer-height) !important;
        padding: 1rem 0 0.75rem 0 !important;
        z-index: 1051 !important;
        background: var(--background-lighter) !important;
        margin: 0 !important;
    }
}


@media (min-width: 768px) {
    /* others */
    .chat-container {
        padding: 2rem;
    }

    .initial-chat-state {
        min-height: 60vh;
        padding: 2rem;
        align-items: flex-start; /* Change from center to flex-start on desktop */
        padding-top: 15vh
    }

    .chat-form-centered {
        margin-top: 0; /* Override the margin-top: auto on desktop */
    }

    .centered-chat-input {
        max-width: 600px;
    }

    .input-wrapper-centered {
        max-width: 720px;
    }

    .chat-input-centered {
        min-height: 35px;
        max-height: 140px; /* Maximum height for desktop */
        overflow-y: hidden; /* Enable scroll when content exceeds max-height */
    }

    .messages-container {
        padding: 2rem 0 120px;
        width: 600px;
        max-width: 860px;
    }

    .chat-messages-state.session-limit-reached .messages-container {
        padding-bottom: 2rem;
    }

    .new-session-cta {
        width: 100%;
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
    }

    .user-message .message-content {
        max-width: 70%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        background: #E0EBEF;
        border: 1px solid #A1C2CE;  
    }

    .assistant-message .message-header {
        font-size: 0.9rem;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .assistant-icon {
        width: 18px;
        height: 18px;
    }

    .assistant-message .message-content {
        padding: 0 1rem 1rem 0;
        font-size: 1rem;
    }

    .input-wrapper-bottom {
        max-width: 600px;
    }

    .chat-input-bottom {
        min-height: 35px;
        max-height: 140px;
    }

    .message-content h1 {
        font-size: 1.25rem;
    }

    .message-content h2 {
        font-size: 1.1rem;
    }

    .message-content h3 {
        font-size: 1rem;
    }
}

/* ==========================================================================
                   FEEDBACK SYSTEM STYLES
                   ========================================================================== */

/* Feedback Container */
.message-feedback {
    max-width: 600px;
    width: 100%;
    height: auto;
    gap: 16px;
    opacity: 1;
    border-radius: 8px;
    padding: 16px;
    transition: none;
}

    /* Only show border when a thumb is selected */
    .message-feedback:has(.thumb-btn.selected) {
        border: 1px solid #CCCCCC;
        transition: none;
    }

    /* Collapsed state for message-feedback - HIGHER SPECIFICITY to override border */
    .message-feedback.collapsed {
        border: none !important;
        padding: 0;
        transition: all 0.3s ease;
    }

        .message-feedback.collapsed .feedback-detail {
            display: none;
        }

/* Thumbs Buttons */
.feedback-thumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 5px;
}

.thumb-btn {
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #999999;
    width: 32px;
}

    .thumb-btn i {
        font-size: 18px;
        border-radius: 2px;
    }

    .thumb-down i {
        transform: translateY(0.11em); /* needed due to font awesome glyphs */
    }

    .thumb-btn:hover {
        background: #E0EBEF;
        opacity: 1;
        border-radius: 4px;
        color: #6399AE;
    }

    /* If a sibling thumb is selected, keep unselected thumb grey on hover */
    .thumb-btn.selected ~ .thumb-btn:hover,
    .thumb-btn:has(~ .thumb-btn.selected):hover {
        color: #999999;
    }

    .thumb-btn.selected {
        color: #6399AE;
    }

        .thumb-btn.selected:hover {
            color: #6399AE;
        }

    .thumb-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Detail panel (reasons + notes + submit) - Hidden until a thumb is selected */
.feedback-detail {
    display: none;
    margin-top: 1rem;
}

    .feedback-detail.expanded {
        display: block;
    }

/* Only one reason group (positive/negative) is shown at a time */
.feedback-mcq {
    display: none;
}

    .feedback-mcq.expanded {
        display: block;
    }

.mcq-prompt {
    font-weight: 400;
    font-family: Verdana;
    margin-bottom: 0.75rem;
    color: #453F39;
    font-size: 1rem;
}

.mcq-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
}

.mcq-option {
    display: flex;
    align-items: flex-start;
    border-radius: 6px;
    cursor: pointer;
    font-family: Verdana;
    font-weight: 400;
    font-size: 1rem;
}

    .mcq-option input[type="checkbox"] {
        margin-right: 0.5rem;
        margin-top: 2px;
        cursor: pointer;
        width: 17px;
        height: 17px;
        flex-shrink: 0;
    }

    .mcq-option span {
        cursor: pointer;
    }

/* "Tell us more" free-text box + disclaimers */
.feedback-notes {
    margin-top: 1rem;
}

.feedback-notes-label {
    display: block;
    font-family: Verdana;
    font-weight: 400;
    font-size: 1rem;
    color: #453F39;
    margin-bottom: 0.4rem;
}

.feedback-notes-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 60px;
    max-height: 80px;
    padding: 8px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    font-family: Verdana;
    font-size: 0.95rem;
    color: #453F39;
    text-align: left;
}

    .feedback-notes-input:focus {
        outline: none;
        border-color: #6399AE;
    }

    .feedback-notes-input::placeholder {
        text-align: left;
    }

.feedback-disclaimer {
    font-family: Verdana;
    font-size: 0.8rem;
    color: #6B6B6B;
    margin: 0.35rem 0 0 0;
}

/* Submit button */
.feedback-submit-btn {
    margin-top: 1rem;
    padding: 8px 20px;
    background: #486B7A;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-family: Verdana;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .feedback-submit-btn:hover {
        background: #6399AE;
    }

    .feedback-submit-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Thank-you confirmation (shown after submit) */
.feedback-thankyou {
    font-family: Verdana;
    font-weight: 400;
    font-size: 0.95rem;
    color: #453F39;
    padding-top: 5px;
    margin-left: 0.25rem;
}

/* Variant shown when the rating saved but the free-text comment could not be
   (PII redaction unavailable). The panel stays open behind this message so the
   user can resubmit, so it needs to read as a prompt to act, not a confirmation. */
.feedback-thankyou-warning {
    color: #A6300F;
    font-weight: 600;
}

/* Session limit CTA card */
.new-session-cta {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
}

.new-session-cta__title {
    font-family: Verdana;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #453F39;
    text-align: center;
    margin: 0;
    margin-bottom: 4px;
}

.new-session-cta__subtitle {
    font-family: Verdana;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #453F39;
    text-align: center;
    margin: 0;
    margin-bottom: 12px; 
}

.new-session-cta .btn {
    width: 100%;
    max-width: 400px;
}

.new-session-cta-disclaimer {
    padding-top: 0;
    margin-top: 8px;
    padding-bottom: 1rem;
}

/* Mobile Responsive - Feedback System */
@media (max-width: 767px) {
    .new-session-cta {
        border: none;
        border-top: 1px solid #CCCCCC;
        border-radius: 0;
        margin-left: -1rem;
        margin-right: -1rem;
    }

    /* Remove the large padding-bottom reserved for the fixed input once it's hidden */
    .chat-messages-state.session-limit-reached .messages-container {
        padding-bottom: 1rem;
    }

    .new-session-cta__title {
        font-size: 14px;
    }

    .new-session-cta__subtitle {
        font-size: 13px;
    }

    .thumb-btn {
        padding: 0.2rem 0.3rem;
        font-size: 15px;
    }

        .thumb-btn i {
            font-size: 15px;
        }

    .mcq-prompt {
        font-size: 0.85rem;
    }

    .mcq-option {
        padding: 0.4rem 0;
        font-size: 0.85rem;
    }

    .feedback-notes-label,
    .feedback-thankyou,
    .feedback-submit-btn {
        font-size: 0.85rem;
    }

    .feedback-disclaimer {
        font-size: 0.75rem;
    }
}