/* Import must be first */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

        /* Scoped vars */
        #chat-widget {
            --bs-blue: #2c7be5;
            --bs-indigo: #727cf5;
            --bs-purple: #6b5eae;
            --bs-pink: #ff679b;
            --bs-red: #e63757;
            --bs-orange: #fd7e14;
            --bs-yellow: #f6c343;
            --bs-green: #00d97e;
            --bs-teal: #02a8b5;
            --bs-cyan: #39afd1;
            --bs-black: #12263f;
            --bs-white: #fff;
            --bs-gray: #95aac9;
            --bs-gray-dark: #3b506c;
            --bs-gray-100: #f9fbfd;
            --bs-gray-200: #edf2f9;
            --bs-gray-300: #e3ebf6;
            --bs-gray-400: #d2ddec;
            --bs-gray-500: #b1c2d9;
            --bs-gray-600: #95aac9;
            --bs-gray-700: #6e84a3;
            --bs-gray-800: #3b506c;
            --bs-gray-900: #283e59;
            --bs-primary: #2c7be5;
            --bs-secondary: #6e84a3;
            --bs-success: #00d97e;
            --bs-info: #39afd1;
            --bs-warning: #f6c343;
            --bs-danger: #e63757;
            --bs-light: #edf2f9;
            --bs-dark: #12263f;
            --bs-primary-rgb: 44, 123, 229;
            --bs-secondary-rgb: 110, 132, 163;
            --bs-success-rgb: 0, 217, 126;
            --bs-info-rgb: 57, 175, 209;
            --bs-warning-rgb: 246, 195, 67;
            --bs-danger-rgb: 230, 55, 87;
            --bs-light-rgb: 237, 242, 249;
            --bs-dark-rgb: 18, 38, 63;
            --bs-primary-text-emphasis: #12315c;
            --bs-secondary-text-emphasis: #2c3541;
            --bs-success-text-emphasis: #005732;
            --bs-info-text-emphasis: #174654;
            --bs-warning-text-emphasis: #624e1b;
            --bs-danger-text-emphasis: #5c1623;
            --bs-light-text-emphasis: #6e84a3;
            --bs-dark-text-emphasis: #6e84a3;
            --bs-primary-bg-subtle: #d5e5fa;
            --bs-secondary-bg-subtle: #e2e6ed;
            --bs-success-bg-subtle: #ccf7e5;
            --bs-info-bg-subtle: #d7eff6;
            --bs-warning-bg-subtle: #fdf3d9;
            --bs-danger-bg-subtle: #fad7dd;
            --bs-light-bg-subtle: #fbfcfe;
            --bs-dark-bg-subtle: #d0d4d9;
            --bs-primary-border-subtle: #abcaf5;
            --bs-secondary-border-subtle: #c5ceda;
            --bs-success-border-subtle: #99f0cb;
            --bs-info-border-subtle: #b0dfed;
            --bs-warning-border-subtle: #fbe7b4;
            --bs-danger-border-subtle: #f5afbc;
            --bs-light-border-subtle: #edf2f9;
            --bs-dark-border-subtle: #b1c2d9;
            --bs-white-rgb: 255, 255, 255;
            --bs-black-rgb: 18, 38, 63;
            --bs-font-sans-serif: "Cerebri Sans", sans-serif;
            --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            --bs-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, .15), hsla(0, 0%, 100%, 0));
            --bs-body-font-family: var(--bs-font-sans-serif);
            --bs-body-font-size: 0.9375rem;
            --bs-body-font-weight: 400;
            --bs-body-line-height: 1.5;
            --bs-body-color: #12263f;
            --bs-body-color-rgb: 18, 38, 63;
            --bs-body-bg: #f9fbfd;
            --bs-body-bg-rgb: 249, 251, 253;
            --bs-emphasis-color: #12263f;
            --bs-emphasis-color-rgb: 18, 38, 63;
            --bs-secondary-color: #95aac9;
            --bs-secondary-color-rgb: 149, 170, 201;
            --bs-secondary-bg: #edf2f9;
            --bs-secondary-bg-rgb: 237, 242, 249;
            --bs-tertiary-color: rgba(18, 38, 63, .5);
            --bs-tertiary-color-rgb: 18, 38, 63;
            --bs-tertiary-bg: #f9fbfd;
            --bs-tertiary-bg-rgb: 249, 251, 253;
            --bs-heading-color: inherit;
            --bs-link-color: #2c7be5;
            --bs-link-color-rgb: 44, 123, 229;
            --bs-link-decoration: none;
            --bs-link-hover-color: #1657af;
            --bs-link-hover-color-rgb: 22, 87, 175;
            --bs-link-hover-decoration: none;
            --bs-code-color: #2c7be5;
            --bs-highlight-color: #12263f;
            --bs-highlight-bg: #fdf3d9;
            --bs-border-width: 1px;
            --bs-border-style: solid;
            --bs-border-color: #e3ebf6;
            --bs-border-color-translucent: rgba(18, 38, 63, .175);
            --bs-border-radius: 0.375rem;
            --bs-border-radius-sm: 0.25rem;
            --bs-border-radius-lg: 0.5rem;
            --bs-border-radius-xl: 1rem;
            --bs-border-radius-xxl: 2rem;
            --bs-border-radius-2xl: var(--bs-border-radius-xxl);
            --bs-border-radius-pill: 50rem;
            --bs-box-shadow: 0 0.5rem 1rem rgba(18, 38, 63, .15);
            --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(18, 38, 63, .075);
            --bs-box-shadow-lg: 0 1rem 3rem rgba(18, 38, 63, .175);
            --bs-box-shadow-inset: inset 0 1px 2px rgba(18, 38, 63, .075);
            --bs-focus-ring-width: 0.25rem;
            --bs-focus-ring-opacity: 0.25;
            --bs-focus-ring-color: rgba(44, 123, 229, .25);
            --bs-form-valid-color: #00d97e;
            --bs-form-valid-border-color: #00d97e;
            --bs-form-invalid-color: #e63757;
            --bs-form-invalid-border-color: #e63757;
            --bs-breakpoint-xs: 0;
            --bs-breakpoint-sm: 576px;
            --bs-breakpoint-md: 768px;
            --bs-breakpoint-lg: 992px;
            --bs-breakpoint-xl: 1200px;
            --bs-breakpoint-xxl: 1400px;
            --bs-lighter: #f9fbfd;
            --bs-lighter-rgb: 249, 251, 253;
            --bs-auth-bg: #fff;
            --bs-auth-bg-rgb: 255, 255, 255;
            --bs-card-bg-rgb: 255, 255, 255;
            --bs-gray-100-rgb: 249, 251, 253;
            --bs-gray-200-rgb: 237, 242, 249;
            --bs-gray-300-rgb: 227, 235, 246;
            --bs-gray-400-rgb: 210, 221, 236;
            --bs-gray-500-rgb: 177, 194, 217;
            --bs-gray-600-rgb: 149, 170, 201;
            --bs-gray-700-rgb: 110, 132, 163;
            --bs-gray-800-rgb: 59, 80, 108;
            --bs-gray-900-rgb: 40, 62, 89;
            --bs-chart-gray-300: #e3ebf6;
            --bs-chart-gray-600: #95aac9;
            --bs-chart-gray-700: #6e84a3;
            --bs-chart-gray-800: #3b506c;
            --bs-chart-gray-900: #283e59;
            --bs-chart-primary-100: #d2ddec;
            --bs-chart-primary-300: #a6c5f7;
            --bs-chart-primary-700: #2c7be5;
            --bs-chart-default-color: #95aac9;
            --bs-chart-default-font-color: #95aac9;
            --bs-chart-arc-border-color: #fff;
            --bs-chart-arc-hover-border-color: #fff;
            --bs-chart-grid-line-color: #e3ebf6
        }

        /* Minimal POW widget CSS (scoped) */
        #chat-widget.hidden,
        #chat-widget .hidden {
            display: none !important;
        }

        #chat-widget .h1,
        #chat-widget .h2,
        #chat-widget .h3,
        #chat-widget .h4,
        #chat-widget .h5,
        #chat-widget .h6,
        #chat-widget h1,
        #chat-widget h2,
        #chat-widget h3,
        #chat-widget h4,
        #chat-widget h5,
        #chat-widget h6 {
            color: var(--bs-heading-color);
            font-weight: 500;
            line-height: 1.1;
            margin: 0 0 1.125rem;
        }

        #chat-widget .h4,
        #chat-widget h4 {
            font-size: .9375rem
        }

        #chat-widget .row {
            --bs-gutter-x: 1.5rem;
            --bs-gutter-y: 0;
            display: flex;
            flex-wrap: wrap;
            margin-left: calc(var(--bs-gutter-x)*-.5);
            margin-right: calc(var(--bs-gutter-x)*-.5);
            margin-top: calc(var(--bs-gutter-y)*-1)
        }

        #chat-widget .row>* {
            flex-shrink: 0;
            margin-top: var(--bs-gutter-y);
            max-width: 100%;
            padding-left: calc(var(--bs-gutter-x)*.5);
            padding-right: calc(var(--bs-gutter-x)*.5);
            width: 100%
        }

        #chat-widget .col {
            flex: 1 0 0%
        }

        #chat-widget .col-auto {
            flex: 0 0 auto;
            width: auto
        }

        #chat-widget .form-control {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-clip: padding-box;
            background-color: #fff;
            border: var(--bs-border-width) solid var(--bs-gray-400);
            border-radius: var(--bs-border-radius);
            color: var(--bs-body-color);
            display: block;
            font-size: .9375rem;
            font-weight: 400;
            line-height: 1.5;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            width: 100%
        }

        #chat-widget .form-control[type=file] {
            overflow: hidden
        }

        #chat-widget .form-control[type=file]:not(:disabled):not([readonly]) {
            cursor: pointer
        }

        #chat-widget .form-control:focus {
            background-color: #fff;
            border-color: var(--bs-primary);
            box-shadow: none;
            color: var(--bs-body-color);
            outline: 0
        }

        #chat-widget .form-control::-moz-placeholder {
            color: var(--bs-gray-500);
            opacity: 1
        }

        #chat-widget .form-control::placeholder {
            color: var(--bs-gray-500);
            opacity: 1
        }

        #chat-widget .form-control:disabled {
            background-color: #fff;
            opacity: 1
        }

        #chat-widget .btn-check:disabled+.btn,
        #chat-widget .btn-check[disabled]+.btn {
            filter: none;
            opacity: .65;
            pointer-events: none
        }

        #chat-widget .fw-bold,
        #chat-widget .fw-semibold {
            font-weight: 600 !important
        }

        #chat-widget .btn {
            --bs-btn-padding-x: .75rem;
            --bs-btn-padding-y: .5rem;
            --bs-btn-font-size: .9375rem;
            --bs-btn-font-weight: 400;
            --bs-btn-line-height: 1.5;
            --bs-btn-color: var(--bs-body-color);
            --bs-btn-bg: transparent;
            --bs-btn-border-width: var(--bs-border-width);
            --bs-btn-border-color: transparent;
            --bs-btn-border-radius: var(--bs-border-radius);
            --bs-btn-hover-border-color: transparent;
            --bs-btn-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .15), 0 1px 1px rgba(18, 38, 63, .075);
            --bs-btn-disabled-opacity: .65;
            --bs-btn-focus-box-shadow: 0 0 0 0.15rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
            background-color: var(--bs-btn-bg);
            border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
            border-radius: var(--bs-btn-border-radius);
            color: var(--bs-btn-color);
            cursor: pointer;
            display: inline-block;
            font-family: var(--bs-btn-font-family);
            font-size: var(--bs-btn-font-size);
            font-weight: var(--bs-btn-font-weight);
            line-height: var(--bs-btn-line-height);
            padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
            text-align: center;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            vertical-align: middle
        }

        #chat-widget .btn:hover {
            background-color: var(--bs-btn-hover-bg);
            border-color: var(--bs-btn-hover-border-color);
            color: var(--bs-btn-hover-color)
        }

        #chat-widget .btn:focus-visible {
            background-color: var(--bs-btn-hover-bg);
            border-color: var(--bs-btn-hover-border-color);
            box-shadow: var(--bs-btn-focus-box-shadow);
            color: var(--bs-btn-hover-color);
            outline: 0
        }

        #chat-widget .btn:disabled {
            background-color: var(--bs-btn-disabled-bg);
            border-color: var(--bs-btn-disabled-border-color);
            color: var(--bs-btn-disabled-color);
            opacity: var(--bs-btn-disabled-opacity);
            pointer-events: none
        }

        #chat-widget .btn-success {
            --bs-btn-color: #fff;
            --bs-btn-bg: #00d97e;
            --bs-btn-border-color: #00d97e;
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: #00b86b;
            --bs-btn-hover-border-color: #00ae65;
            --bs-btn-focus-shadow-rgb: 38, 223, 145;
            --bs-btn-active-color: #fff;
            --bs-btn-active-bg: #00ae65;
            --bs-btn-active-border-color: #00a35f;
            --bs-btn-active-shadow: inset 0 3px 5px rgba(18, 38, 63, .125);
            --bs-btn-disabled-color: #fff;
            --bs-btn-disabled-bg: #00d97e;
            --bs-btn-disabled-border-color: #00d97e
        }

        #chat-widget .btn-lg {
            --bs-btn-padding-y: .75rem;
            --bs-btn-padding-x: 1.25rem;
            --bs-btn-font-size: .9375rem;
            --bs-btn-border-radius: var(--bs-border-radius-lg)
        }

        #chat-widget .card {
            --bs-card-spacer-y: 1.5rem;
            --bs-card-spacer-x: 1.5rem;
            --bs-card-title-spacer-y: .5rem;
            --bs-card-border-width: var(--bs-border-width);
            --bs-card-border-color: var(--bs-gray-200);
            --bs-card-border-radius: var(--bs-border-radius-lg);
            --bs-card-box-shadow: 0 .75rem 1.5rem rgba(var(--bs-black-rgb), .03);
            --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
            --bs-card-cap-padding-y: 1rem;
            --bs-card-cap-padding-x: var(--bs-card-spacer-x);
            --bs-card-cap-bg: transparent;
            --bs-card-bg: #fff;
            --bs-card-img-overlay-padding: 1.5rem;
            --bs-card-group-margin: .75rem;
            word-wrap: break-word;
            background-clip: border-box;
            background-color: var(--bs-card-bg);
            border: var(--bs-card-border-width) solid var(--bs-card-border-color);
            border-radius: var(--bs-card-border-radius);
            color: var(--bs-body-color);
            display: flex;
            flex-direction: column;
            height: var(--bs-card-height);
            min-width: 0;
            position: relative;
            margin-bottom: 1.5rem;
            border-color: var(--bs-gray-200)
        }

        #chat-widget .card>* {
            flex-shrink: 0
        }

        #chat-widget .card-header {
            align-items: center;
            display: flex;
            flex-direction: row;
            height: 60px;
            padding-bottom: calc(var(--bs-card-spacer-y)*.5);
            padding-top: calc(var(--bs-card-spacer-y)*.5);
            background-color: var(--bs-card-cap-bg);
            border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color)
        }

        #chat-widget .card-header:first-child {
            border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0
        }

        #chat-widget .card-header+.card-footer {
            border-top-width: 0
        }

        #chat-widget .card-header>:first-child {
            flex: 1
        }

        #chat-widget .card-header-title {
            margin-bottom: 0
        }

        #chat-widget .card-body {
            color: var(--bs-card-color);
            flex: 1 1 auto;
            padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x)
        }

        #chat-widget .card-footer {
            background-color: var(--bs-card-cap-bg);
            border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
            color: var(--bs-card-cap-color);
            padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x)
        }

        #chat-widget .card-footer:last-child {
            border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)
        }

        #chat-widget .visually-hidden {
            clip: rect(0, 0, 0, 0) !important;
            border: 0 !important;
            height: 1px !important;
            margin: -1px !important;
            overflow: hidden !important;
            padding: 0 !important;
            white-space: nowrap !important;
            width: 1px !important;
            position: absolute !important
        }

        #chat-widget .position-absolute {
            position: absolute !important
        }

        #chat-widget .top-0 {
            top: 0 !important
        }

        #chat-widget .end-0 {
            right: 0 !important
        }

        #chat-widget .w-100 {
            width: 100% !important
        }

        #chat-widget .align-items-center {
            align-items: center !important
        }

        #chat-widget .mt-2 {
            margin-top: .375rem !important
        }

        #chat-widget .mb-0 {
            margin-bottom: 0 !important
        }

        #chat-widget .mb-3 {
            margin-bottom: .75rem !important
        }

        #chat-widget .ms-n2 {
            margin-left: -.375rem !important
        }

        #chat-widget .p-3 {
            padding: .75rem !important
        }

        #chat-widget .text-end {
            text-align: right !important
        }

        #chat-widget .text-white {
            --bs-text-opacity: 1;
            color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important
        }

        #chat-widget .bg-success {
            --bs-bg-opacity: 1;
            background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important
        }

        #chat-widget .rounded-4 {
            border-radius: var(--bs-border-radius-xl) !important
        }

        #chat-widget .rounded-circle {
            border-radius: 50% !important
        }

        #chat-widget .rounded-top-4 {
            border-top-left-radius: var(--bs-border-radius-xl) !important;
            border-top-right-radius: var(--bs-border-radius-xl) !important
        }

        #chat-widget .h4,
        #chat-widget .h5,
        #chat-widget .h6,
        #chat-widget h4,
        #chat-widget h5,
        #chat-widget h6 {
            margin-bottom: .5625rem
        }

        #chat-widget .h1>a,
        #chat-widget .h2>a,
        #chat-widget .h3>a,
        #chat-widget .h4>a,
        #chat-widget .h5>a,
        #chat-widget .h6>a,
        #chat-widget h1>a,
        #chat-widget h2>a,
        #chat-widget h3>a,
        #chat-widget h4>a,
        #chat-widget h5>a,
        #chat-widget h6>a {
            color: inherit
        }

        #chat-widget .h1,
        #chat-widget .h2,
        #chat-widget .h3,
        #chat-widget .h4,
        #chat-widget .h5,
        #chat-widget .h6,
        #chat-widget h1,
        #chat-widget h2,
        #chat-widget h3,
        #chat-widget h4,
        #chat-widget h5,
        #chat-widget h6 {
            letter-spacing: -.02em
        }

        #chat-widget .form-control {
            --bs-input-bg: #fff;
            --bs-input-border-color: var(--bs-gray-400);
            --bs-input-color: var(--bs-body-color);
            --bs-input-focus-bg: #fff;
            --bs-input-focus-border-color: var(--bs-primary);
            --bs-input-focus-color: var(--bs-body-color);
            --bs-input-disabled-bg: #fff;
            --bs-input-placeholder-color: var(--bs-gray-500);
            background-color: var(--bs-input-bg);
            border-color: var(--bs-input-border-color);
            color: var(--bs-input-color)
        }

        #chat-widget .form-control::placeholder {
            color: var(--bs-input-placeholder-color)
        }

        #chat-widget .form-control:focus {
            background-color: var(--bs-input-focus-bg);
            border-color: var(--bs-input-focus-border-color);
            color: var(--bs-input-focus-color)
        }

        #chat-widget .form-control:disabled {
            background-color: var(--bs-input-disabled-bg);
            border-color: var(--bs-input-disabled-border-color);
            color: var(--bs-input-disabled-color)
        }

        #chat-widget .form-control-flush {
            background-color: transparent !important;
            border-color: transparent !important;
            padding-left: 0;
            resize: none
        }

        #chat-widget .btn-lg {
            line-height: 1.5
        }

        #chat-widget .btn-white {
            --bs-btn-bg: var(--bs-white);
            --bs-btn-border-color: var(--bs-gray-300);
            --bs-btn-hover-bg: var(--bs-gray-100);
            --bs-btn-hover-border-color: var(--bs-gray-400);
            --bs-btn-active-bg: var(--bs-gray-100);
            --bs-btn-active-border-color: var(--bs-gray-400);
            --bs-btn-disabled-bg: var(--bs-white);
            --bs-btn-disabled-border-color: var(--bs-gray-300)
        }

        #chat-widget .btn-rounded-circle {
            --bs-btn-padding-x: 0;
            --bs-btn-border-radius: 50%;
            --bs-btn-circle-width: calc(1em*var(--bs-btn-line-height) + 1rem + var(--bs-btn-border-width)*2);
            width: var(--bs-btn-circle-width)
        }

        #chat-widget .btn-rounded-circle.btn-lg {
            --bs-btn-circle-width: calc(1.5em + 1.5rem + var(--bs-btn-border-width)*2)
        }

        #chat-widget .btn-rounded-circle.btn-sm {
            --bs-btn-circle-width: calc(1.75em + .25rem + var(--bs-btn-border-width)*2)
        }

        #chat-widget .avatar {
            --bs-avatar-size: 3rem;
            --bs-avatar-title-bg: var(--bs-gray-500);
            --bs-avatar-title-color: #fff;
            display: inline-block;
            font-size: calc(var(--bs-avatar-size)/3);
            height: var(--bs-avatar-size);
            position: relative;
            width: var(--bs-avatar-size)
        }

        #chat-widget .avatar-img {
            height: 100%;
            object-fit: cover;
            width: 100%
        }

        #chat-widget .avatar-sm {
            --bs-avatar-size: 2.5rem
        }

        #chat-widget .comment {
            --bs-comment-margin-bottom: 1rem;
            --bs-comment-body-padding-y: 1rem;
            --bs-comment-body-padding-x: 1.25rem;
            --bs-comment-body-bg: var(--bs-body-bg);
            --bs-comment-body-border-radius: var(--bs-border-radius-lg);
            --bs-comment-body-font-size: .8125rem;
            --bs-comment-time-margin-bottom: .5625rem;
            --bs-comment-time-font-size: .625rem;
            --bs-comment-time-color: var(--bs-secondary-color);
            margin-bottom: var(--bs-comment-margin-bottom)
        }

        #chat-widget .comment-body {
            background-color: var(--bs-comment-body-bg);
            border-radius: var(--bs-comment-body-border-radius);
            display: inline-block;
            padding: var(--bs-comment-body-padding-y) var(--bs-comment-body-padding-x)
        }

        #chat-widget .comment-time {
            color: var(--bs-comment-time-color);
            display: block;
            font-size: var(--bs-comment-time-font-size);
            margin-bottom: var(--bs-comment-time-margin-bottom)
        }

        #chat-widget .comment-text {
            font-size: var(--bs-comment-body-font-size)
        }

        #chat-widget .comment-text:last-child {
            margin-bottom: 0
        }

        #chat-widget .textarea-container {
            position: relative;
            width: 100%
        }

        /* Utilities */
        #chat-widget .badge {
            display: inline-block;
            padding: .35em .65em;
            font-size: .75rem;
            font-weight: 600;
            line-height: 1;
            border-radius: .375rem
        }

        #chat-widget .rounded-pill {
            border-radius: 50rem
        }

        #chat-widget .bg-danger {
            background-color: #e63757 !important;
            color: #fff
        }

        #chat-widget .shadow {
            box-shadow: 0 .5rem 1rem rgba(18, 38, 63, .15) !important
        }

        #chat-widget .small {
            font-size: .875em
        }

        #chat-widget .text-muted {
            color: #6e84a3 !important
        }

        #chat-widget .d-flex {
            display: flex !important
        }

        #chat-widget .gap-2 {
            gap: .5rem
        }

        #chat-widget .justify-content-between {
            justify-content: space-between !important
        }

        #chat-widget .flex-fill {
            flex: 1 1 auto !important
        }

        /* 1) Header padding + tidy grid inside header */

        #chat-widget .card-header .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        #chat-widget .card-header .row>* {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        #chat-widget h4.card-header-title {
            margin: 0 !important;
        }

        /* (Removed redundant FAB badge block — final version lives in hardlock-3) */
        /* A) Lock typographic baseline so host CSS can’t invert colors or sizes */
        #chat-widget {
            font: 16px/1.5 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji" !important;
            color: #111827 !important;
            /* add this line */
        }

        #chat-widget *,
        #chat-widget *::before,
        #chat-widget *::after {
            font-family: inherit;
            color: inherit
        }

        /* B) Header: comfortable padding + clear white title */
        #chat-widget .card-header {
            display: flex;
            align-items: center;
            min-height: 56px;
            padding: .75rem 1.25rem !important;
        }

        #chat-widget h4.card-header-title {
            font-size: 18px !important;
            line-height: 1.25;
            color: #fff !important;
            font-weight: 700 !important;
        }

        /* C) Message bubble headline always readable */
        #chat-widget h5.comment-title {
            color: #111827 !important;
            font-weight: 700
        }

        /* D) Input/textarea */
        #chat-widget input,
        #chat-widget textarea,
        #chat-widget select,
        #chat-widget .form-control {
            color: #111827 !important;
            -webkit-text-fill-color: #111827 !important;
            background: #fff !important;
            caret-color: #111827;
            border: 1px solid #e5e7eb !important;
        }

        #chat-widget ::placeholder {
            color: #9ca3af;
            opacity: 1
        }

        #chat-widget .fs-4 {
            font-size: 1.5rem;
        }

        #chat-widget .textarea-container {
            display: flex;
            align-items: center;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: .75rem;
            padding: .25rem .75rem;
            min-height: 52px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .06);
        }

        #chat-widget .textarea-container .form-control {
            border: 0 !important;
            background: transparent !important;
            padding: .5rem 2.75rem .5rem .25rem;
            resize: none;
            width: 100%;
            outline: 0;
            box-shadow: none;
        }

        #chat-widget #send-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            stroke: #111827;
            opacity: .85;
            cursor: pointer;
        }

        /* E) FAB (outside #chat-widget) + circular red badge */
        #chat-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 2147483647;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border: 0;
            border-radius: 9999px;
            background: #22c55e !important;
            color: #fff !important;
            /*    box-shadow: 0 10px 20px rgba(0, 0, 0, .15);*/
        }

        #chat-toggle .notification-bubble {
            position: absolute !important;
            top: 0;
            right: 0;
            transform: translate(45%, -45%) !important;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 9999px;
            background: #ef4444 !important;
            color: #fff !important;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            box-shadow: 0 0 0 2px #fff;
            pointer-events: none;
        }

        /* F) Scrollbars + no horizontal scroll inside */
        #chat-widget .card-body,
        #chat-widget #chat-container {
            overflow-x: hidden
        }

        #chat-widget,
        #chat-widget * {
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, .25) transparent
        }

        #chat-widget *::-webkit-scrollbar {
            width: 8px;
            height: 8px
        }

        #chat-widget *::-webkit-scrollbar-track {
            background: transparent
        }

        #chat-widget *::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, .25);
            border-radius: 8px
        }

        #chat-widget *::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0
        }

        /* G) Buttons re-affirmed */
        #chat-widget .btn {
            font-weight: 600;
            border-radius: .75rem;
            border: 1px solid #e5e7eb !important
        }

        #chat-widget .btn-success {
            background: #22c55e !important;
            border-color: #22c55e !important;
            color: #fff !important
        }

        #chat-widget .btn-white {
            background: #fff !important;
            color: #111827 !important
        }

        /* prevent any accidental overflow */
        #chat-widget {
            box-sizing: border-box;
        }

        /* Full-screen takeover on small screens */
        @media (max-width: 680px) {

            /* Stop the iframe document from scrolling; only content area may scroll */
            html,
            body {
                height: 100%;
                overflow: hidden;
                overscroll-behavior: none;
            }

            /* Widget container fills the dynamic viewport and does not scroll */
            #chat-widget {
                position: fixed !important;
                inset: 0 !important;
                width: 100vw !important;
                height: 100dvh !important;
                /* modern dynamic viewport unit */
                max-width: none !important;
                max-height: none !important;
                padding: 0 !important;
                margin: 0 !important;
                z-index: 2147483647 !important;
                overscroll-behavior: contain;
                overflow: hidden !important;
                /* <- key so only inner area scrolls */
            }

            /* Fallback if 100dvh isn't supported */
            @supports not (height: 100dvh) {
                #chat-widget {
                    height: calc(var(--vh, 1vh) * 100) !important;
                }
            }

            #chat-widget .card {
                height: 100%;
                display: flex;
                flex-direction: column;
                border-radius: 0 !important;
                /* edge-to-edge */
                box-shadow: none !important;
            }

            #chat-widget .card-header {
                position: sticky;
                top: 0;
                z-index: 2;
                padding-top: calc(12px + env(safe-area-inset-top, 0));
            }

            #chat-widget .card-body {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                min-height: 0;
                /* critical so chat-container can shrink/scroll */
                padding-bottom: 0;
            }

            #chat-widget #chat-container {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                padding-bottom: 8px;
                /* breathing space above footer */
                scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0) + 72px);
            }

            #widget-footer {
                position: sticky;
                bottom: 0;
                z-index: 2;
                padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
                background: #fff;
                border-top: 1px solid rgba(0, 0, 0, .06);
                min-height: 70px;
            }

            /* Hide FAB when widget is open */
            #chat-widget:not(.hidden)~#chat-toggle {
                display: none !important;
            }

            #chat-toggle {
                bottom: calc(16px + env(safe-area-inset-bottom, 0)) !important;
                right: 16px !important;
            }

            /* Avoid iOS zoom-on-focus quirks */
            #chat-input,
            #chat-widget textarea,
            #chat-widget input {
                font-size: 16px;
            }

        }

        #pow-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .28);
            z-index: 2147483646;
        }

        #pow-backdrop.hidden {
            display: none;
        }

        /* Lock page scroll while the widget is open (especially helpful on mobile) */
        html.pow-widget-open,
        body.pow-widget-open {
            overflow: hidden !important;
            height: 100dvh !important;
            touch-action: none;
        }

        /* Force inner scrolling on desktop and tablets */
        @media (min-width: 577px) {

            /* Give the widget a real height, so inner flex can size correctly */
            #chat-widget {
                height: min(600px, calc(100vh - 140px)) !important;
                max-height: 600px !important;
                width: min(420px, 100%) !important;
                right: 20px !important;
            }

            /* Make the card fill the widget, and become a flex column */
            #chat-widget .card {
                height: 100% !important;
                display: flex !important;
                flex-direction: column !important;
            }

            /* Let the body be a flex column too, with a shrinkable middle */
            #chat-widget .card-body {
                display: flex !important;
                flex-direction: column !important;
                min-height: 0 !important;
                /* critical for nested scroll */
                padding-bottom: 0 !important;
            }

            /* The scrollable region */
            #chat-widget #chat-container {
                flex: 1 1 auto !important;
                min-height: 0 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                padding-right: 10px;
            }

            /* Keep footer visible as you scroll */
            #widget-footer {
                position: sticky !important;
                bottom: 0 !important;
                z-index: 2;
                background: #fff;
            }
        }

        /* Only when the lead form is present */
        #chat-widget .card-footer:has(#lead-form) {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        #chat-widget .card-footer:has(#lead-form) .textarea-container {
            margin-left: var(--bs-card-cap-padding-x) !important;
            margin-right: var(--bs-card-cap-padding-x) !important;
            width: auto !important;
        }