/* ==========================================================================
   MSI Chat Widget Styles
   Floating chat widget for customer portal AI assistant.
   Brand colors: #003468 (primary), #122F53 (navy), #E1EFF2 (accent)
   ========================================================================== */

/* ---------- Launcher Button ---------- */
.msi-chat-launcher {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #122F53;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    /* Highest of the two default widget layers so the launcher always sits above
       the chat window (it stays visible even while the window is open, to toggle
       it closed). See .msi-chat-window for the paired z-index. */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.msi-chat-launcher:hover {
    background-color: #003468;
    transform: scale(1.05);
}

.msi-chat-launcher:focus-visible {
    outline: 3px solid #3D78D8;
    outline-offset: 2px;
}

.msi-chat-launcher .chat-icon {
    font-size: 24px;
    line-height: 1;
}

.msi-chat-launcher .chat-close-icon {
    display: none;
    font-size: 20px;
    line-height: 1;
}

.msi-chat-launcher.active .chat-icon {
    display: none;
}

.msi-chat-launcher.active .chat-close-icon {
    display: inline;
}

/* ---------- Chat Window ---------- */
.msi-chat-window {
    position: fixed;
    bottom: 92px;
    right: 24px;
    width: min(480px, calc(100vw - 48px));
    height: min(760px, calc(100vh - 120px));
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    /* One below the launcher (see .msi-chat-launcher) so the launcher button
       remains clickable on top of the open window. */
    z-index: 9998;
    /* Hidden by default; JS toggles the .open class to show the window instead of
       relying on inline styles, so the flex layout below only applies once open. */
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Montserrat', 'Ubuntu', sans-serif;
}

.msi-chat-window.open {
    display: flex;
}

/* ---------- Header ---------- */
.msi-chat-header {
    background-color: #122F53;
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.msi-chat-header-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.msi-chat-header-actions {
    display: flex;
    gap: 12px;
}

.msi-chat-header-actions button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.msi-chat-header-actions button:hover {
    opacity: 1;
}

.msi-chat-header-actions button:focus-visible {
    outline: 2px solid #E1EFF2;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Body (everything below header) ---------- */
.msi-chat-body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ---------- End Session Confirm Prompt ---------- */
.msi-chat-confirm-close {
    /* Absolutely positioned to fully cover the body (status bar, messages,
       suggestions, input area) so the confirmation reads as a modal overlay
       within the chat window rather than a new panel. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 24px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Only needs to clear the sibling content within .msi-chat-body, which has no
       other stacking context above 1, so a small value is sufficient here. */
    z-index: 5;
}

.msi-chat-confirm-close.visible {
    display: flex;
}

/* ---------- Status Bar ---------- */
.msi-chat-status {
    padding: 8px 18px;
    font-size: 12px;
    color: #666;
    background-color: #f0f6f8;
    border-bottom: 1px solid #e0e8ec;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
}

.msi-chat-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2e8b57;
    flex-shrink: 0;
}

/* ---------- Message Area ---------- */
.msi-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #fff;
}

.msi-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.msi-chat-messages::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

/* ---------- Message Bubbles ---------- */
.msi-chat-message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.msi-chat-message.ai {
    align-self: flex-start;
    background-color: #E1EFF2;
    color: #122F53;
    border-bottom-left-radius: 4px;
}

.msi-chat-message.customer {
    align-self: flex-end;
    background-color: #122F53;
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* ---------- In-line PDF Attachment Card ---------- */
.msi-chat-message-text {
    display: block;
    white-space: pre-wrap;
}

.msi-chat-attachment {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px 10px 10px;
    margin-top: 10px;
    background: #fff;
    border: 1px solid #C9DDE2;
    border-radius: 10px;
    text-decoration: none;
    color: #122F53;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.08s;
    cursor: pointer;
    min-width: 0;
}

.msi-chat-attachment:hover {
    border-color: #122F53;
    box-shadow: 0 2px 8px rgba(27, 54, 93, 0.12);
    text-decoration: none;
    color: #122F53;
}

.msi-chat-attachment:active {
    transform: translateY(1px);
}

/* Adds spacing only when an attachment card immediately follows message text in an
   AI bubble, so a bubble containing only attachments (no text) does not get an
   extra top gap before the first card. */
.msi-chat-message.ai > .msi-chat-message-text + .msi-chat-attachment {
    margin-top: 10px;
}

.msi-chat-att-thumb {
    width: 44px;
    height: 56px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.msi-chat-att-page {
    position: relative;
    width: 40px;
    height: 52px;
    background: #fff;
    border: 1px solid #C9DDE2;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Diagonal two-color gradient split at 50% simulates a folded page corner on the
   faux document thumbnail; the JS (msi-chat.js buildAttachmentCard) builds a
   generic thumbnail regardless of actual file type, so this is purely decorative. */
.msi-chat-att-page-fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 11px;
    height: 11px;
    background: linear-gradient(225deg, #E1ECEF 0%, #E1ECEF 50%, #fff 50%, #fff 100%);
    border-left: 1px solid #C9DDE2;
    border-bottom: 1px solid #C9DDE2;
}

.msi-chat-att-page-lines {
    position: absolute;
    top: 16px;
    left: 5px;
    right: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.msi-chat-att-page-lines span {
    height: 2px;
    background: #DCEAEE;
    border-radius: 1px;
    display: block;
}

.msi-chat-att-page-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font: 700 7px/1 'Courier New', monospace;
    color: #fff;
    background: #C0392B;
    padding: 3px 0;
    letter-spacing: 0.5px;
}

.msi-chat-att-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.msi-chat-att-name {
    font: 600 12.5px/1.3 'Montserrat', sans-serif;
    color: #122F53;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msi-chat-att-sub {
    font: 500 11px/1.2 'Montserrat', sans-serif;
    color: #6C7A89;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.msi-chat-att-type {
    color: #122F53;
    font-weight: 600;
}

.msi-chat-att-dot {
    color: #C0CAD3;
}

.msi-chat-att-action {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #EEF4F6;
    color: #122F53;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.msi-chat-attachment:hover .msi-chat-att-action {
    background: #122F53;
    color: #fff;
}

.msi-chat-att-action .fa {
    font-size: 12px;
}

/* ---------- Typing Indicator ---------- */
.msi-chat-typing {
    align-self: flex-start;
    padding: 12px 16px;
    background-color: #E1EFF2;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    display: none;
    gap: 4px;
    align-items: center;
}

.msi-chat-typing.visible {
    display: flex;
}

.msi-chat-typing .dot {
    width: 7px;
    height: 7px;
    background-color: #888;
    border-radius: 50%;
    animation: msi-chat-bounce 1.4s infinite ease-in-out both;
}

/* Negative, staggered animation-delay values start each dot partway through the
   shared bounce keyframes so the three dots bounce in sequence rather than in
   unison, producing the familiar "typing" wave effect. */
.msi-chat-typing .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.msi-chat-typing .dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes msi-chat-bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* ---------- Suggested Actions ---------- */
.msi-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 18px;
    flex-shrink: 0;
    border-top: 1px solid #e0e8ec;
}

/* Collapses the suggestions bar's padding and top border when JS has cleared it
   to no buttons (e.g. after a message is sent), so an empty strip does not remain
   visible between the messages area and the input area. */
.msi-chat-suggestions:empty {
    display: none;
}

.msi-chat-suggestion-btn {
    background-color: #fff;
    color: #122F53;
    border: 1.5px solid #122F53;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.msi-chat-suggestion-btn:hover {
    background-color: #122F53;
    color: #fff;
}

.msi-chat-suggestion-btn:focus-visible {
    outline: 3px solid #3D78D8;
    outline-offset: 2px;
}

/* ---------- Input Area ---------- */
.msi-chat-input-area {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid #e0e8ec;
    background-color: #fff;
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.msi-chat-char-count {
    width: 100%;
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: -6px;
    order: 3;
}

.msi-chat-char-count-warn {
    color: #B00020;
}

.msi-chat-input {
    flex: 1;
    border: 1.5px solid #ccc;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: 'Montserrat', 'Ubuntu', sans-serif;
    outline: none;
    transition: border-color 0.15s ease;
}

.msi-chat-input:focus {
    border-color: #122F53;
}

.msi-chat-input::placeholder {
    color: #999;
}

.msi-chat-send-btn {
    background-color: #122F53;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.msi-chat-send-btn:hover {
    background-color: #003468;
}

.msi-chat-send-btn:focus-visible {
    outline: 3px solid #3D78D8;
    outline-offset: 2px;
}

.msi-chat-send-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.msi-chat-send-btn .fa {
    font-size: 16px;
}

/* ---------- Error State ---------- */
.msi-chat-error {
    align-self: center;
    background-color: #fef2f2;
    color: #B00020;
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    text-align: center;
}

/* ---------- Responsive: Tablet ---------- */
/* Shrinks the floating window and tightens its offsets on smaller viewports so it
   never overflows the screen while still floating above the page like on desktop. */
@media (max-width: 768px) {
    .msi-chat-window {
        width: min(420px, calc(100vw - 32px));
        height: min(640px, calc(100vh - 110px));
        bottom: 88px;
        right: 16px;
    }

    .msi-chat-launcher {
        bottom: 16px;
        right: 16px;
    }
}

/* ---------- Responsive: Mobile ---------- */
/* On phones the window becomes a full-screen sheet instead of a floating card, so
   its z-index is raised above the launcher's default 9999 (and the launcher's own
   z-index raised further still) to guarantee the launcher/close control on top of
   the full-screen widget and above any other fixed portal chrome. */
@media (max-width: 480px) {
    .msi-chat-window {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0;
        z-index: 10000;
    }

    .msi-chat-launcher {
        bottom: 16px;
        right: 16px;
        z-index: 10001;
    }
}