html,
        body {
            height: 100%;
            font-family: "Open Sans", sans-serif;
        }
        
        body {
            background-image: linear-gradient(180deg, #01002E 0%, #720101 100%);
            background-size: contain;
        }
        
        .css-eycyw2 {
            background-color: #FAF9F8;
        }
        
        .main {
            background-color: #F1F0F0;
            margin: 15px;
        }
        
        .css-eycyw2 .main {
            border-top: none;
        }
        
        .css-1vieo9r {
            background-color: #F1F0F0;
        }
        
        .css-o3xlyv {
            background-color: #F1F0F0;
            font-size: 14px;
            line-height: 20px;
        }
        
        .chat-window {
            display: flex;
        }
        
        .chat-window .logo {
            width: 250px;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .chat-window .logo img {
            height: 120px;
        }
        
        .from-user .css-o3xlyv {
            background-color: #ffffff;
        }
        
        .css-mhj5i1.from-user,
        [data-css-mhj5i1].from-user {
            border-radius: 10px;
        }
        
        .css-mhj5i1:not(.from-user),
        [data-css-mhj5i1]:not(.from-user) {
            border-radius: 10px;
        }
        
        body {
            margin: 0;
        }
        
        #chatwindow {
            height: 100vh;
            overflow: hidden;
            width: calc(100% - 250px);
            background-color: #fff;
            position: relative; /* anchor for the floating "Start New Chat" button */
        }
        
        #heading {
            height: 50px;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 0 12px;
            border-bottom: 1px solid #e1e2e3;
            background-color: #fff;
        }
        
        .css-1fyy09s {
            background-color: rgb(255, 255, 255);
        }
        
        h1 {
            margin: 0;
            font-size: 18px;
            line-height: 30px;
        }
        
        #webchat {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            height: calc(100% - 50px);
            overflow: hidden;
        }

        #webchat * {
            font-family: "Open Sans", sans-serif !important;
        }

        /* Make the Web Chat send box (input area) taller. Targets the classic
           Web Chat structure (form[role="form"] > .main > textarea/input) and
           the newer variant-copilot structure simultaneously. */
        #webchat form[role="form"] {
            min-height: 120px !important;
        }

        #webchat form[role="form"] .main,
        #webchat .webchat__send-box,
        #webchat form.sendbox {
            min-height: 100px !important;
            align-items: stretch !important;
        }

        #webchat form[role="form"] .main > div,
        #webchat .webchat__send-box-text-box,
        #webchat .sendbox__sendbox-text-area,
        #webchat .text-area {
            min-height: 88px !important;
        }

        #webchat form[role="form"] textarea,
        #webchat form[role="form"] input[type="text"],
        #webchat form[role="form"] [role="textbox"],
        #webchat .webchat__send-box-text-box input,
        #webchat .webchat__send-box-text-box textarea,
        #webchat [role="textbox"] {
            min-height: 80px !important;
            line-height: 1.4 !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }

        /* End-of-conversation lock: grey out and block all interaction with
           the send box once the bot's closing message has been received. */
        body.conversation-ended #webchat form[role="form"],
        body.conversation-ended #webchat .webchat__send-box,
        body.conversation-ended #webchat form.sendbox,
        body.conversation-ended #webchat [class*="sendbox"] {
            display: none !important;
        }

        /* Reversible chat lock — grey out and block the send box only while a
           specific marker class is present in the Web Chat DOM. Re-enabled
           automatically when the marker disappears. */
        body.chat-locked #webchat form[role="form"],
        body.chat-locked #webchat .webchat__send-box,
        body.chat-locked #webchat form.sendbox,
        body.chat-locked #webchat [class*="sendbox"]:not([class*="text"]):not([class*="button"]):not([class*="controls"]):not([class*="attachment"]) {
            opacity: 0.55 !important;
            pointer-events: none !important;
            cursor: not-allowed !important;
            background-color: #f5f5f5 !important;
        }

        /* Disabled cursor only inside the send box — NOT on suggested action
           buttons (Yes/No chips, hero card buttons, etc.) which stay clickable. */
        body.chat-locked #webchat form[role="form"] input,
        body.chat-locked #webchat form[role="form"] textarea,
        body.chat-locked #webchat form[role="form"] [role="textbox"],
        body.chat-locked #webchat form[role="form"] button,
        body.chat-locked #webchat .webchat__send-box input,
        body.chat-locked #webchat .webchat__send-box textarea,
        body.chat-locked #webchat .webchat__send-box button,
        body.chat-locked #webchat form.sendbox input,
        body.chat-locked #webchat form.sendbox textarea,
        body.chat-locked #webchat form.sendbox button {
            cursor: not-allowed !important;
        }

        /* Suggested-action buttons (Yes/No quick replies and similar) keep the
           hand cursor and remain interactive even while the send box is locked. */
        body.chat-locked #webchat .css-gtdio3 button,
        body.chat-locked #webchat [class*="suggested-action"] button,
        body.chat-locked #webchat [class*="suggestedAction"] button,
        body.chat-locked #webchat ul[role="list"] button,
        body.chat-locked #webchat ul[role="toolbar"] button,
        body.chat-locked #webchat [role="group"] button,
        body.chat-locked #webchat .webchat__suggested-actions button {
            cursor: pointer !important;
            pointer-events: auto !important;
            opacity: 1 !important;
        }

        /* "Start New Chat" button — replaces the (hidden) disabled send box at
           the bottom of the chat window once the conversation has ended. */
        #new-chat-btn {
            display: none;
        }

        body.conversation-ended #new-chat-btn {
            display: inline-block;
            position: fixed;
            left: calc(250px + (100% - 250px) / 2); /* horizontal centre of the chat area */
            bottom: 24px;
            transform: translateX(-50%);
            margin: 0;
            padding: 10px 28px;
            background: linear-gradient(180deg, #01002E 0%, #720101 100%);
            color: #ffffff;
            border: none;
            border-radius: 24px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
            z-index: 100;
            white-space: nowrap;
            transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
        }

        body.conversation-ended #new-chat-btn:hover {
            filter: brightness(1.15);
            transform: translateX(-50%) translateY(-1px);
            box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
        }

        body.conversation-ended #new-chat-btn:disabled {
            opacity: 0.7;
            cursor: progress;
            filter: none;
        }

        @media screen and (max-width: 767px) {
            body.conversation-ended #new-chat-btn {
                left: 50%; /* sidebar collapses on mobile */
            }
        }

        /* Shrink user-message bubbles that contain only an inline image so
           the bubble matches the image's size exactly (no extra padding/blank
           space around the picture). The data attribute is set by the image
           attachment observer in home.index.js. */
        [data-image-bubble="1"] {
            width: -moz-fit-content !important;
            width: fit-content !important;
            max-width: fit-content !important;
            padding: 2px !important;
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
            /* Push to the right side (user side) of the chat. Works in both
               flex parents (margin-left:auto) and block parents (margin-right:0). */
            margin-left: auto !important;
            margin-right: 0 !important;
        }

        [data-image-bubble="1"] img {
            display: block;
            margin: 0 0 0 auto; /* keep the image itself right-aligned within the bubble */
        }

        /* If the marked element is the row container, also right-justify its
           children so the bubble sits on the user side. */
        .webchat__row[data-image-bubble="1"],
        [class*="webchat__row"][data-image-bubble="1"] {
            justify-content: flex-end !important;
            text-align: right !important;
        }
        
        .css-2p02md > .content > .webchat__row > .bubble,
        [data-css-2p02md] > .content > .webchat__row > .bubble,
        .css-2p02md > .content > .webchat__row > .timestamp,
        [data-css-2p02md] > .content > .webchat__row > .timestamp {
            max-width: 90% !important;
        }

        .css-2p02md > .content > .webchat__row > .bubble.from-user,
        [data-css-2p02md] > .content > .webchat__row > .bubble.from-user,
        .css-2p02md > .content > .webchat__row > .timestamp,
        [data-css-2p02md] > .content > .webchat__row > .timestamp {
            max-width: 70% !important;
        }
        
        .css-1tdb3h1>img,
        [data-css-1tdb3h1]>img {
            transform: translate(-50%, -50%);
            height: 26px;
            width: auto;
        }
        
        .css-1dgbgmu,
        [data-css-1dgbgmu] {
            background: linear-gradient(180deg, #01002E 0%, #720101 100%);
        }
        
        @media screen and (max-width:767px) {
            .chat-window {
                flex-wrap: wrap;
            }
            #chatwindow {
                width: 100%;
            }
            .chat-window .logo {
                width: 100%;
            }
            .chat-window .logo img {
                height: 60px;
            }
            #chatwindow {
                height: calc(100vh - 90px);
            }
        }