/* =========================================================
   ITPulse Custom Live Chat
   Visitor Interface
   ========================================================= */

:root {
    --chat-width: 370px;
    --chat-gap: 25px;
    --chat-radius: 14px;
    --chat-border: #cfd5dc;
    --chat-text: #222;
    --chat-muted: #777;
    --chat-bg: #fff;
    --page-bg: #f5f7fa;
}


/* =========================================================
   Base
   ========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--page-bg);
}


/* =========================================================
   Demo Page
   ========================================================= */

.page-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 25px;
}

.page-content h1 {
    margin-bottom: 10px;
}


/* =========================================================
   Chat Launcher
   ========================================================= */

.chat-launcher {
    position: fixed;
    right: var(--chat-gap);
    bottom: var(--chat-gap);

    width: 60px;
    height: 60px;

    border: 0;
    border-radius: 50%;

    cursor: pointer;
    font-size: 26px;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}

.chat-launcher[data-status="online"] { background: #16784b; color: #fff; }
.chat-launcher[data-status="offline"] { background: #6b7280; color: #fff; }
.chat-launcher[data-status="checking"] { background: #d9dde3; }

.chat-status-balloon {
    position: fixed;
    right: calc(var(--chat-gap) + 72px);
    bottom: calc(var(--chat-gap) + 8px);
    max-width: 260px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #222;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: 150ms ease;
    z-index: 1001;
}

.chat-launcher:hover + .chat-status-balloon,
.chat-launcher:focus-visible + .chat-status-balloon,
.chat-status-balloon.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================================
   Chat Window
   ========================================================= */

.chat-window {
    position: fixed;

    right: var(--chat-gap);
    bottom: 95px;

    width: var(--chat-width);
    max-width: calc(100vw - 30px);

    /*
     * Natural height.
     * The content determines the window height.
     * The maximum only prevents the window from exceeding
     * the available viewport on smaller screens.
     */
    
    display: none;
    flex-direction: column;

    overflow: hidden;

    background: var(--chat-bg);
    border-radius: var(--chat-radius);

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);

    z-index: 1000;
}

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


/* =========================================================
   Header
   ========================================================= */

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px;

    background: #222;
    color: #fff;
}

.chat-header-title {
    font-size: 17px;
    font-weight: 700;
}

.chat-header-subtitle {
    margin-top: 4px;

    font-size: 12px;
    opacity: 0.8;
}

.chat-close {
    border: 0;
    background: transparent;
    color: #fff;

    font-size: 22px;
    cursor: pointer;
}


/* =========================================================
   Chat Body
   ========================================================= */

.chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}


/* =========================================================
   Welcome
   ========================================================= */

.chat-welcome {
    margin-bottom: 20px;
}

.chat-welcome h2 {
    margin-top: 0;
    font-size: 20px;
}

.chat-welcome p {
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   Form
   ========================================================= */

.chat-form-group {
    margin-bottom: 14px;
}

.chat-form-group label {
    display: block;

    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 700;
}

.chat-form-group label span {
    font-weight: 400;
    opacity: 0.7;
}

.chat-form-group input,
.chat-form-group select {
    width: 100%;

    padding: 10px 11px;

    border: 1px solid var(--chat-border);
    border-radius: 7px;

    background: #fff;
    color: var(--chat-text);

    font-family: inherit;
    font-size: 14px;

    outline: none;
}

.chat-form-group input:focus,
.chat-form-group select:focus {
    border-color: #777;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.chat-form-group select {
    height: 42px;
    padding: 9px 12px;
    cursor: pointer;
}

.chat-form-group input::placeholder {
    color: var(--chat-muted);
}

.chat-form-group input:focus::placeholder {
    color: #aaa;
}

.chat-help-text {
    margin-top: 5px;

    color: var(--chat-muted);

    font-size: 11px;
    line-height: 1.4;
}


/* =========================================================
   Start Chat Button
   ========================================================= */

.chat-start-button {
    width: 100%;

    padding: 12px;

    border: 0;
    border-radius: 7px;

    cursor: pointer;

    font-size: 14px;
    font-weight: 700;
}

/* =========================================================
   Conversation Messages
   ========================================================= */

.chat-message {
    width: fit-content;
    max-width: 84%;

    margin-bottom: 10px;
    padding: 10px 12px;

    border-radius: 10px;

    font-size: 14px;
    line-height: 1.4;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-message--visitor {
    margin-left: auto;

    background: #e8f0fe;
    color: #172033;

    text-align: left;

    border-bottom-right-radius: 3px;
}

.chat-message--operator {
    margin-right: auto;

    background: #f0f1f3;
    color: #222;

    text-align: left;

    border-bottom-left-radius: 3px;
}


/* =========================================================
   System Notices
   ========================================================= */

.chat-system-notice {
    width: 94%;

    margin: 8px auto 14px;
    padding: 11px 13px;

    border: 1px solid transparent;
    border-radius: 9px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    text-align: center;
}

.chat-system-notice--waiting {
    background: #fff8df;
    border-color: #ead68a;
    color: #69520a;
}

.chat-inactivity-warning {
    display: none;
    margin: 10px 0;
    padding: 11px 13px;
    border: 1px solid #e0a800;
    border-radius: 8px;
    background: #fff8dc;
    color: #684f00;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 2px 8px rgba(104, 79, 0, 0.10);
}

.chat-system-notice--waiting::before {
    content: "●";
    display: inline-block;

    margin-right: 7px;

    color: #c39200;

    animation: waitingPulse 1.4s infinite;
}

.chat-system-notice--joined {
    background: #eaf8f0;
    border-color: #9bd0b2;
    color: #17623b;
}

.chat-system-notice--joined::before {
    content: "✓";
    display: inline-block;

    margin-right: 7px;

    font-weight: 800;
}

.chat-system-notice--ended {
    margin-top: 15px;

    background: #f3f4f6;
    border-color: #cfd3d8;
    color: #4b5563;
}

.chat-system-notice--ended::before {
    content: "■";
    display: inline-block;

    margin-right: 7px;

    color: #737b86;
    font-size: 9px;
}

.chat-system-notice--information {
    background: #eef4ff;
    border-color: #b7caf0;
    color: #274b7a;
}

@keyframes waitingPulse {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.85);
    }

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


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 480px) {

    .chat-window {
        right: 10px;
        bottom: 80px;

        width: calc(100vw - 20px);

        max-height: calc(100vh - 100px);
    }

    .chat-launcher {
        right: 15px;
        bottom: 15px;
    }
}

@media (max-height: 800px) {
    .chat-window {
        max-height: calc(100vh - 92px);
    }

    .chat-header { padding: 11px 15px; }
    .chat-header-title { font-size: 15px; }
    .chat-header-subtitle { margin-top: 2px; font-size: 10px; }
    .chat-close { font-size: 19px; }
    .chat-body { padding: 12px 16px; }
    .chat-welcome { margin-bottom: 10px; }
    .chat-welcome h2 { margin-bottom: 7px; font-size: 18px; }
    .chat-welcome p { margin: 0; font-size: 12px; line-height: 1.35; }
    .chat-form-group { margin-bottom: 7px; }
    .chat-form-group label { margin-bottom: 3px; font-size: 11px; }
    .chat-form-group input { padding: 7px 9px; font-size: 12px; }
    .service-picker-button { min-height: 36px; padding: 7px 9px; font-size: 12px; }
    .field-error { min-height: 9px; margin-top: 2px; font-size: 9px; line-height: 1.1; }
    .chat-help-text { margin-top: 3px; font-size: 9px; }
    .chat-start-button { padding: 9px; font-size: 12px; }
}

.chat-form-group input.is-invalid,
.service-picker-button.is-invalid {
    border-color: #b42318;
    box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.08);
}

.chat-form-group input.is-valid,
.service-picker-button.is-valid { border-color: #16805a; }

.field-error {
    min-height: 15px;
    margin-top: 4px;
    color: #b42318;
    font-size: 11px;
    line-height: 1.3;
}

.native-service-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.service-picker { position: relative; }

.service-picker-button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--chat-border);
    border-radius: 7px;
    background: #fff;
    color: var(--chat-text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.service-picker-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    display: none;
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--chat-border);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    z-index: 20;
}

.service-picker-list.open { display: block; }

.service-picker-option {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.service-picker-option:hover,
.service-picker-option:focus {
    background: #eef2f7;
    outline: none;
}


/* V201.2.5 — pre-chat form sizing and dropdown overflow isolation */
.chat-window.prechat-mode {
    height: auto;
    max-height: calc(100vh - 105px);
    overflow: visible;
}
.chat-window.prechat-mode .chat-header {
    border-radius: var(--chat-radius) var(--chat-radius) 0 0;
}
.chat-window.prechat-mode .chat-body {
    overflow: visible;
    background: var(--chat-bg);
    border-radius: 0 0 var(--chat-radius) var(--chat-radius);
}
.chat-window.conversation-mode {
    overflow: hidden;
}
@media (max-height: 760px) {
    .chat-window.prechat-mode {
        height: calc(100vh - 86px);
        max-height: calc(100vh - 86px);
        bottom: 76px;
    }
    .chat-window.prechat-mode .chat-body {
        overflow-y: auto;
    }
}


/* V202.0.0 — compact natural pre-chat footer spacing */
.chat-window.prechat-mode .chat-body { padding-bottom: 10px; }
.chat-window.prechat-mode .visitor-form { margin-bottom: 0; }
.chat-window.prechat-mode .form-actions,
.chat-window.prechat-mode .chat-form-actions { margin-bottom: 0; padding-bottom: 0; }

/* V203 carried V202 polish */
.chat-window.prechat-mode .chat-body{padding-bottom:4px;}
.chat-window.prechat-mode .chat-help-text{margin-bottom:4px;}
.chat-window.prechat-mode .chat-start-button{margin-bottom:0;}

/* V204 offline message workflow */
.offline-message-group textarea{width:100%;box-sizing:border-box;border:1px solid #cbd3dc;border-radius:6px;padding:9px 10px;font:inherit;resize:vertical;min-height:82px;max-height:150px;}
.offline-message-group textarea:focus{outline:none;border-color:#16805a;box-shadow:0 0 0 2px rgba(22,128,90,.08);}
.offline-message-group textarea.is-invalid{border-color:#c64545;}
.offline-submit-status{font-size:12px;line-height:1.4;margin:4px 0 7px;color:#555;}
.offline-submit-status.success{padding:9px 10px;border:1px solid #9fd6bb;background:#effaf4;color:#17663f;border-radius:6px;}
.offline-submit-status.error{padding:9px 10px;border:1px solid #efb4b4;background:#fff3f3;color:#9a2d2d;border-radius:6px;}
.chat-window.prechat-mode .chat-body{padding-bottom:8px;}


/* V205 carried V204 offline-message success actions */
.offline-success-actions {
    gap: 8px;
    margin: 8px 0 4px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.offline-secondary-button {
    border: 1px solid #b9c1ca;
    background: #fff;
    color: #222;
    border-radius: 6px;
    padding: 8px 11px;
    font: inherit;
    cursor: pointer;
}
.offline-secondary-button:hover { background: #f3f5f7; }

/* V206 carried V205/V204 polish — keep offline success actions visible at 100% zoom */
.chat-window.prechat-mode.offline-mode {
    bottom: 72px;
    max-height: calc(100vh - 84px);
}
.chat-window.prechat-mode.offline-mode .chat-form-group {
    margin-bottom: 11px;
}
.chat-window.prechat-mode.offline-mode .offline-message-group textarea {
    min-height: 70px;
}
.chat-window.prechat-mode.offline-success-state .chat-help-text {
    margin-bottom: 2px;
}
.chat-window.prechat-mode.offline-success-state .offline-success-actions {
    margin-top: 5px;
    margin-bottom: 0;
}


/* V208 carried visitor Offline Message layout refinement — exact compact 100% zoom composition */
.chat-window.prechat-mode.offline-mode .chat-body {
    padding-top: 12px;
    padding-bottom: 8px;
}
.chat-window.prechat-mode.offline-mode .chat-welcome {
    margin-bottom: 8px;
}
.chat-window.prechat-mode.offline-mode .chat-form-group {
    margin-bottom: 6px;
}
.chat-window.prechat-mode.offline-mode .chat-form-group label {
    margin-bottom: 3px;
}
.chat-window.prechat-mode.offline-mode .field-error {
    min-height: 6px;
    margin-top: 1px;
}
.chat-window.prechat-mode.offline-mode .service-picker-button {
    min-height: 38px;
}
.chat-window.prechat-mode.offline-mode #serviceIdError {
    min-height: 0;
    margin: 0;
}
.chat-window.prechat-mode.offline-mode .service-picker + #serviceIdError + .chat-help-text {
    margin-top: 2px;
    margin-bottom: 2px;
}
.chat-window.prechat-mode.offline-mode .offline-message-group {
    margin-top: 0;
    margin-bottom: 4px;
}
.chat-window.prechat-mode.offline-mode .offline-message-group textarea {
    min-height: 64px;
    max-height: 108px;
}
.chat-window.prechat-mode.offline-mode .offline-submit-status {
    margin-top: 3px;
}

/* Secure chat attachments */
.visitor-attachment-row{display:flex;align-items:center;gap:8px;margin-top:7px;min-width:0}.visitor-attach-button{flex:0 0 auto;padding:7px 10px!important;width:auto!important;margin:0!important;border:1px solid #b9c0c7;border-radius:6px;background:#fff;cursor:pointer}.visitor-attachment-row span{font-size:10px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-attachment-card{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #cfd6dd;border-radius:7px;background:#fff}.chat-attachment-card a{font-weight:700;color:#245f8b;text-decoration:none}.chat-attachment-meta{display:block;font-size:10px;color:#777;margin-top:2px}

/* =====================================================================
   V210.0.0 REBUILT — visitor conversation state + attachment workspace
   ===================================================================== */
.chat-window.conversation-mode {
    height: min(640px, calc(100vh - 115px));
    max-height: calc(100vh - 100px);
}
.chat-window.conversation-mode .chat-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 14px;
}
.visitor-message-list {
    flex: 1 1 auto;
    min-height: 180px;
    overflow-y: auto;
    padding: 4px 2px 8px;
    margin-bottom: 10px;
}
.visitor-message-form {
    flex: 0 0 auto;
    border-top: 1px solid #dde2e7;
    padding-top: 10px;
}
.visitor-message-form textarea {
    width: 100%;
    min-height: 72px;
    max-height: 140px;
    padding: 10px;
    border: 1px solid #b9c0c7;
    border-radius: 6px;
    resize: vertical;
    font: inherit;
    box-sizing: border-box;
}
.visitor-composer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.visitor-send-button {
    min-width: 92px;
    padding: 9px 15px;
    border: 1px solid #aeb6bf;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font: inherit;
}
.visitor-send-button:disabled,
.visitor-attach-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.visitor-attachment-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    min-width: 0;
}
.visitor-attach-button {
    flex: 0 0 auto;
    padding: 7px 10px !important;
    width: auto !important;
    margin: 0 !important;
    border: 1px solid #b9c0c7;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.visitor-attachment-status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    color: #6b7280;
}
.conversation-ended-panel {
    flex: 0 0 auto;
    border-top: 1px solid #dde2e7;
    padding: 12px 2px 2px;
}
.conversation-ended-title {
    font-weight: 700;
    color: #6f2b2b;
    margin-bottom: 4px;
}
.conversation-ended-copy {
    font-size: 12px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 9px;
}
.start-new-chat-button {
    padding: 8px 11px;
    border: 1px solid #aeb6bf;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font: inherit;
}

/* Remove historical attachment rule compression; cards remain transcript-only. */
.chat-attachment-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #cfd6dd;
    border-radius: 7px;
    background: #fff;
}
.chat-attachment-card a { font-weight: 700; color: #245f8b; text-decoration: none; }
.chat-attachment-meta { display: block; font-size: 10px; color: #777; margin-top: 2px; }


/* V210.0.0 integrated visitor-state correction */
.chat-window.conversation-mode{height:min(650px,calc(100vh - 120px));max-height:calc(100vh - 105px)}
.chat-window.conversation-mode .chat-body{display:flex;flex-direction:column;overflow:hidden;min-height:0;padding:12px 14px}
#conversationInterface{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.visitor-message-list{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0;padding:4px 2px 10px}
.visitor-message-form{flex:0 0 auto;background:#fff;border-top:1px solid #dde2e7;padding-top:10px;margin:0}
.visitor-message-form textarea{min-height:68px;max-height:110px;resize:vertical}
.visitor-attachment-row{margin-top:7px}
.visitor-composer-actions{margin-top:7px}
.conversation-ended-panel{flex:0 0 auto;background:#fff;border-top:1px solid #dde2e7;padding:12px 0 0}
.start-new-chat-button{display:block;margin-top:8px}
@media(max-height:720px){.chat-window.conversation-mode{height:calc(100vh - 92px);bottom:78px}.visitor-message-form textarea{min-height:58px;max-height:82px}}


/* V210 integrated composition polish */
.chat-window.prechat-mode:not(.offline-mode) .chat-help-text{margin-top:3px;margin-bottom:7px;line-height:1.25}
.chat-window.prechat-mode:not(.offline-mode) .chat-start-button{margin-top:0}
.visitor-composer-actions{justify-content:space-between;align-items:center;gap:10px}
.visitor-end-chat-button{padding:9px 12px;border:1px solid #d29a9a;border-radius:6px;background:#fff8f8;color:#8d2c2c;cursor:pointer;font:inherit;white-space:nowrap}
.visitor-end-chat-button:hover{background:#fff0f0}
.visitor-end-chat-button:disabled{opacity:.5;cursor:not-allowed}


/* V211 carried visitor refinement — service guidance is visually part of the picker, never the Start button. */
.service-help-inline{margin:4px 2px 0;padding:0;color:#6b7280;font-size:10px;line-height:1.25;}
.chat-window.prechat-mode .chat-form-group:has(.service-help-inline){margin-bottom:12px;}
.chat-window.prechat-mode.offline-mode .service-help-inline{margin-top:3px;margin-bottom:0;}

/* V212.2 acceptance repair — the floating picker owns its scrollbar. */
.chat-window.prechat-mode.service-picker-open,
.chat-window.prechat-mode.service-picker-open .chat-body {
    overflow: visible;
}