*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #f4f7fb;
    --surface:   #ffffff;
    --border:    #d7dfec;
    --text:      #1f2937;
    --text-dim:  #6b7280;
    --accent:    #2563eb;
    --accent-hover: #1d4ed8;
    --danger:    #dc2626;
    --font:      'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --webchat-font: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --portal-navy: #001c39;
    --portal-muted: #52616f;
    --portal-muted-2: #6b7280;
    --portal-status-success-text: #166534;
    --portal-status-success-bg: #dcfce7;
    --portal-status-success-border: #bbf7d0;
    --portal-status-danger-text: #9f1239;
    --portal-status-danger-bg: #ffe4e6;
    --portal-status-danger-border: #fecdd3;
    --portal-status-warning-text: #6b4e16;
    --portal-status-warning-bg: #fef3c7;
    --portal-status-warning-border: #fde68a;
    --app-height: 100vh;
    --viewport-offset-top: 0px;
    --header-content-y: 0px;
    --chat-content-max-width: 920px;
    --safe-bottom: 0px;
    --chat-bottom-padding: 4px;
    --itbot-send-box-reserved-height: calc(83px + var(--chat-bottom-padding));
    --itbot-current-composer-height: 62px;
    --itbot-composer-fade-height: 76px;
    --itbot-transcript-bottom-padding: calc(var(--itbot-current-composer-height) + var(--chat-bottom-padding) + 29px);
    --itbot-send-button-size: 52px;
    --itbot-upload-button-size: 42px;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    :root {
        --safe-bottom: min(env(safe-area-inset-bottom, 0px), 12px);
        --chat-bottom-padding: max(4px, var(--safe-bottom));
    }
}

:root.keyboard-open {
    --chat-bottom-padding: 4px;
}

:root.ios-device {
    --header-content-y: -5px;
}

html, body {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    font-family: var(--font);
    font-weight: 300;
    background: #ffffff;
    color: var(--text);
    overscroll-behavior-y: none;
}

button,
input,
textarea,
select {
    font-family: var(--font);
    font-weight: inherit;
}

body {
    position: fixed;
    inset: 0;
    width: 100%;
}

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    height: var(--app-height);
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    transform: translateY(var(--viewport-offset-top));
}

/* ── Header ── */
.header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px; height: 56px;
    background: #001c39;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    flex-shrink: 0;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    transform: translateY(var(--header-content-y));
}
.header-left > div { min-width: 0; }
.logo-icon {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.logo-icon img { width: 32px; height: 32px; display: block; }
.header-title {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.15;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-subtitle {
    font-size: 12px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 4px;
    flex-shrink: 0;
    transform: translateY(var(--header-content-y));
}
.btn-new-chat,
.btn-signout {
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.btn-new-chat:hover,
.btn-signout:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.72);
    color: #ffffff;
}
.btn-new-chat:focus-visible,
.btn-signout:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ── Auth Screen ── */
.auth-screen {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #001c39;
}
.auth-card,
.auth-footer {
    position: relative;
    z-index: 1;
    min-width: 0;
}
.auth-marlink-logo {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 2;
    display: flex;
    align-items: center;
}
.auth-marlink-logo img {
    display: block;
    width: 290px;
    height: auto;
}
.auth-card {
    width: 100%;
    max-width: 520px;
    padding: 32px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}
.auth-card-logo {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2px;
    border: none;
    border-radius: 0;
    background: transparent;
}
.auth-card-logo img {
    width: 138px;
    height: auto;
    display: block;
    object-fit: contain;
}
.auth-card h1 {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 500;
    color: var(--text);
}
#auth-desc {
    max-width: 420px;
    margin: 0 auto 30px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-dim);
}
#btn-signin-label {
    min-width: 0;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}
.btn-signin {
    width: auto;
    min-width: 260px;
    max-width: 100%;
    min-height: 52px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, #0066aa 0%, #35a9e1 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn-signin:hover:not(:disabled) {
    background: linear-gradient(90deg, #005a96 0%, #259ad4 100%);
    box-shadow: 0 10px 24px rgba(0, 102, 170, 0.28);
}
.btn-signin:focus-visible {
    outline: 3px solid #003f66;
    outline-offset: 2px;
}
.btn-signin:disabled {
    color: rgba(255, 255, 255, 0.78);
    background: linear-gradient(90deg, rgba(0, 102, 170, 0.58) 0%, rgba(53, 169, 225, 0.58) 100%);
    opacity: 0.78;
    cursor: not-allowed;
}
.microsoft-logo {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: block;
    object-fit: contain;
}
.auth-security-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}
.auth-footer {
    width: 100%;
    max-width: 520px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}
@media (min-width: 720px) {
    .auth-screen { padding: 40px 24px; }
    .auth-card { padding: 40px; }
    .auth-card-logo img {
        width: 154px;
        height: auto;
    }
}
@media (max-width: 480px) {
    .auth-screen {
        justify-content: flex-start;
        gap: 16px;
        padding: clamp(138px, 22vh, 188px) 18px 24px;
    }
    .auth-marlink-logo {
        top: 18px;
        left: 18px;
    }
    .auth-marlink-logo img {
        width: 220px;
    }
    .auth-card {
        padding: 28px 20px;
        border-radius: 22px;
    }
    .auth-card-logo img {
        width: 122px;
        height: auto;
    }
    .auth-card h1 { font-size: 24px; }
    #auth-desc {
        margin-bottom: 24px;
        font-size: 14px;
    }
    .btn-signin {
        width: 100%;
        min-width: 0;
        font-size: 15px;
    }
    .user-info { gap: 6px; }
    .btn-new-chat,
    .btn-signout {
        padding: 5px 8px;
    }
}
@media (max-height: 720px) {
    .auth-screen {
        justify-content: flex-start;
        padding-top: 96px;
    }
}
@media (max-width: 480px) and (max-height: 720px) {
    .auth-screen {
        padding-top: clamp(112px, 20vh, 150px);
    }
}

/* ── Status bar ── */
.status-bar {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-dim);
    background: #ffffff;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.status-bar.is-online { display: none; }
.status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #35a9e1; margin-right: 6px; display: inline-block;
}
.status-dot.offline { background: var(--danger); }

/* ── Chat container ── */
#webchat-container {
    font-family: var(--font);
    font-weight: 300;
}
#webchat-container * {
    font-family: var(--font);
}
#webchat-container [class*="timestamp"],
#webchat-container time {
    display: none !important;
}
/* Keep native Web Chat typing visible when the channel sends typing events. */
#webchat-container .webchat__bubble__content:has(.webchat__typingIndicator),
#webchat-container .webchat__bubble__content:has([class*="typingIndicator"]),
#webchat-container .webchat__bubble__content:has([class*="typing-indicator"]) {
    background: #f5f5f5 !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
}
#webchat-container .webchat__typingIndicator {
    display: block !important;
    height: 20px !important;
    opacity: 1 !important;
    background-image:
        radial-gradient(circle, #6b7280 0 3px, transparent 3.5px),
        radial-gradient(circle, #6b7280 0 3px, transparent 3.5px),
        radial-gradient(circle, #6b7280 0 3px, transparent 3.5px) !important;
    background-position: 0 62%, 14px 62%, 28px 62%;
    background-repeat: no-repeat !important;
    background-size: 8px 8px, 8px 8px, 8px 8px !important;
    animation: native-typing-dots 1.2s ease-in-out infinite;
    width: 36px !important;
}
@keyframes native-typing-dots {
    0%, 70%, 100% {
        background-position: 0 62%, 14px 62%, 28px 62%;
    }
    15% {
        background-position: 0 32%, 14px 62%, 28px 62%;
    }
    35% {
        background-position: 0 62%, 14px 32%, 28px 62%;
    }
    55% {
        background-position: 0 62%, 14px 62%, 28px 32%;
    }
}
#webchat-container [data-activity-status],
#webchat-container [data-testid*="timestamp"],
#webchat-container [data-testid*="send-status"] {
    display: none !important;
}
#webchat-container .webchat__connectivityStatus,
#webchat-container .webchat__connectivity-status,
#webchat-container [class*="connectivityStatus"],
#webchat-container [class*="connectivity-status"],
#webchat-container [class*="connectionStatus"],
#webchat-container [class*="connection-status"] {
    display: none !important;
}
#chat-screen {
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
}
@media (max-width: 720px) {
    #chat-screen {
        padding-bottom: 0;
    }
}
#chat-screen.has-welcome-panel {
    background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
}
.portal-welcome-panel {
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    padding: 18px 20px 8px;
    background: transparent;
}
#chat-screen.has-welcome-panel .portal-welcome-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#chat-screen.has-compact-welcome-panel .portal-welcome-panel {
    flex: 0 0 auto;
    min-height: auto;
    padding: 10px 20px 0;
    overflow: visible;
}
.portal-welcome-panel[hidden] {
    display: none !important;
}
.portal-welcome-card {
    width: min(var(--chat-content-max-width), 100%);
    margin: 0 auto;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #c7d2e0;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 28, 57, 0.04), 0 8px 24px rgba(0, 28, 57, 0.08);
    overflow: hidden;
}
.portal-welcome-card[hidden] {
    display: none !important;
}
.portal-welcome-panel.is-collapsing {
    pointer-events: none;
}
.portal-welcome-panel.is-collapsing .portal-welcome-card {
    animation: portal-welcome-collapse-out 0.22s ease forwards;
    transform-origin: top center;
}
.portal-welcome-panel.is-compact .portal-quick-strip {
    animation: portal-quick-strip-in 0.22s ease both;
    transform-origin: top center;
}
.portal-welcome-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.portal-welcome-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 14px;
}
.portal-welcome-avatar img {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
}
.portal-welcome-title {
    margin: 0;
    color: #001c39;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;
}
.portal-welcome-subtitle {
    margin: 5px 0 0;
    color: #001c39;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
}
.portal-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.portal-quick-action {
    width: 100%;
    min-height: 88px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    text-align: left;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    color: #001c39;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.portal-quick-action:hover:not(:disabled) {
    border-color: #e5e7eb;
    box-shadow: 0 8px 22px rgba(0, 28, 57, 0.12);
}
.portal-quick-action:active:not(:disabled) {
    border-color: #e5e7eb;
}
.portal-quick-action:focus-visible {
    outline: 3px solid rgba(0, 28, 57, 0.28);
    outline-offset: 2px;
}
.portal-quick-action:disabled {
    cursor: default;
    opacity: 0.68;
}
.portal-quick-action.is-selected {
    background: #f8fafc;
    border-color: #e5e7eb;
    opacity: 1;
}
.portal-action-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 28, 57, 0.08);
    border-radius: 12px;
    color: #001c39;
}
.portal-action-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
}
.portal-action-title {
    display: block;
    color: #001c39;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: 0;
}
.portal-action-desc {
    display: block;
    margin-top: 4px;
    color: #001c39;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0;
}
.portal-action-state {
    width: 16px;
    height: 16px;
}
.portal-quick-action.is-loading .portal-action-state {
    border: 2px solid rgba(0, 28, 57, 0.22);
    border-top-color: #001c39;
    border-radius: 50%;
    animation: portal-action-spin 0.75s linear infinite;
}
.portal-quick-strip {
    width: min(var(--chat-content-max-width), 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid #c7d2e0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 28, 57, 0.04), 0 8px 24px rgba(0, 28, 57, 0.08);
    overflow: visible;
}
.portal-quick-strip[hidden] {
    display: none !important;
}
.portal-quick-strip-actions {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.portal-quick-strip-actions.has-horizontal-overflow {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 20px,
        #000 calc(100% - 20px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 20px,
        #000 calc(100% - 20px),
        transparent 100%
    );
}
.portal-quick-strip-actions::-webkit-scrollbar {
    display: none;
}
.portal-quick-chip {
    flex: 0 0 auto;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid #d9e3ee;
    border-radius: 12px;
    background: #ffffff;
    color: #001c39;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transform-origin: center;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.portal-quick-chip:hover:not(:disabled) {
    border-color: #d9e3ee;
    background: #f8fafc;
    color: #001c39;
    box-shadow: 0 6px 16px rgba(0, 28, 57, 0.12);
}
.portal-quick-chip:focus-visible {
    outline: 2px solid rgba(0, 28, 57, 0.28);
    outline-offset: 2px;
}
.portal-quick-chip:disabled {
    cursor: default;
    opacity: 0.68;
}
.portal-quick-chip.is-selected {
    border-color: #001c39;
    background: #f8fafc;
    color: #001c39;
    opacity: 1;
}
.portal-quick-chip.is-loading::after {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 28, 57, 0.22);
    border-top-color: #001c39;
    border-radius: 50%;
    animation: portal-action-spin 0.75s linear infinite;
}

.portal-device-picker {
    width: min(var(--chat-content-max-width), 100%);
    max-width: 100%;
    margin: 0 auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #c7d2e0;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 28, 57, 0.04), 0 8px 24px rgba(0, 28, 57, 0.08);
    color: #001c39;
    box-sizing: border-box;
    overflow: visible;
}
.portal-device-picker.is-collapsed {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    animation: portal-device-compact-in 0.2s ease both;
}
.portal-device-summary-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 28, 57, 0.07);
    color: #001c39;
}
.portal-device-summary-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}
.portal-device-summary-copy {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #001c39;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0;
}
.portal-device-picker-title {
    margin: 0;
    color: #001c39;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: 0;
}
.portal-device-picker-subtitle {
    margin: 5px 0 14px;
    color: #52616f;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
}
.portal-device-list-frame {
    position: relative;
    min-height: 0;
    margin: 0;
    background: transparent;
}
.portal-device-list-frame::before,
.portal-device-list-frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 12px;
    height: 22px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.16s ease;
}
.portal-device-list-frame::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}
.portal-device-list-frame::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}
.portal-device-list-frame.has-top-fade::before,
.portal-device-list-frame.has-bottom-fade::after {
    opacity: 1;
}
.portal-device-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 1 auto;
    max-height: min(44vh, 380px);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 6px 8px 10px 8px;
    background: transparent;
    scrollbar-width: thin;
}
.portal-device-row {
    width: 100%;
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 18px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    color: #001c39;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.portal-device-row:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cfd9e6;
    box-shadow: 0 4px 10px rgba(0, 28, 57, 0.07);
}
.portal-device-row:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 2px;
}
.portal-device-row.is-selected {
    background: #f4f8ff;
    border-color: #8fb7ff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}
.portal-device-row:disabled {
    cursor: default;
    opacity: 0.72;
}
.portal-device-select-indicator {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #a8b4c3;
    border-radius: 50%;
    background: #ffffff;
}
.portal-device-row.is-selected .portal-device-select-indicator {
    border-color: #2563eb;
    background: #2563eb;
}
.portal-device-row.is-selected .portal-device-select-indicator::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
}
.portal-device-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #001c39;
    background: rgba(0, 28, 57, 0.07);
    border-radius: 10px;
    flex: 0 0 34px;
}
.portal-device-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}
.portal-device-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.portal-device-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #001c39;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: 0;
}
.portal-device-hardware,
.portal-device-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0;
}
.portal-device-hardware {
    display: block;
    max-height: none;
    white-space: nowrap;
    overflow-wrap: normal;
    color: #52616f;
}
.portal-device-meta {
    white-space: nowrap;
    color: #6b7280;
}
.portal-device-badge,
.portal-device-detail-status {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portal-device-badge {
    justify-self: end;
    align-self: start;
    margin-top: 2px;
    max-width: 150px;
}
.portal-device-badge.is-compliant,
.portal-device-detail-status.is-healthy {
    color: var(--portal-status-success-text);
    background: var(--portal-status-success-bg);
    border: 1px solid var(--portal-status-success-border);
}
.portal-device-badge.is-noncompliant,
.portal-device-detail-status.is-attention {
    color: var(--portal-status-danger-text);
    background: var(--portal-status-danger-bg);
    border: 1px solid var(--portal-status-danger-border);
}
.portal-device-badge.is-unknown,
.portal-device-detail-status.is-unknown {
    color: var(--portal-status-warning-text);
    background: var(--portal-status-warning-bg);
    border: 1px solid var(--portal-status-warning-border);
}
.portal-device-picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    padding: 12px 0 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    position: static;
}
.portal-device-continue {
    min-height: 38px;
    min-width: 116px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #001c39;
    border-radius: 10px;
    background: #001c39;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.portal-device-continue:hover:not(:disabled) {
    background: #07305f;
    border-color: #07305f;
    box-shadow: 0 8px 18px rgba(0, 28, 57, 0.16);
}
.portal-device-continue:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.3);
    outline-offset: 2px;
}
.portal-device-continue:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    box-shadow: none;
}
.portal-device-continue.is-loading::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.44);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: portal-action-spin 0.75s linear infinite;
}
.portal-device-picker-error {
    margin-top: 10px;
    color: #b42318;
    font-size: 12px;
    line-height: 1.4;
}
.portal-device-detail {
    width: 100%;
    min-width: 0;
}
.portal-device-detail-header {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.portal-device-detail-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.portal-device-detail-eyebrow {
    color: #52616f;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: 0;
}
.portal-device-detail-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #001c39;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0;
}
.portal-device-detail-status {
    justify-self: end;
    max-width: 160px;
}
.portal-device-detail-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 12px 0 0;
    padding: 0;
}
.portal-device-detail-fact {
    min-width: 0;
}
.portal-device-detail-fact dt {
    margin: 0 0 2px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: 0;
}
.portal-device-detail-fact dd {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #001c39;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0;
}
.portal-device-detail-note {
    margin-top: 10px;
    color: #52616f;
    font-size: 14px;
    line-height: 1.45;
}
.portal-device-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.portal-device-detail-action {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #d9e3ee;
    border-radius: 9px;
    background: #ffffff;
    color: #001c39;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    cursor: pointer;
}
.portal-device-detail-action:hover:not(:disabled),
.portal-device-detail-action:focus-visible {
    border-color: #b9c9dc;
    background: #f8fafc;
}
.portal-device-detail-action:disabled {
    cursor: default;
    opacity: 0.55;
}
.portal-absorbed-activity {
    display: none !important;
}
@keyframes portal-action-spin {
    to { transform: rotate(360deg); }
}
@keyframes portal-device-compact-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes portal-welcome-collapse-out {
    from {
        opacity: 1;
        max-height: 720px;
        padding-top: 18px;
        padding-bottom: 18px;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        transform: translateY(-8px) scale(0.98);
    }
}
@keyframes portal-quick-strip-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .portal-welcome-panel.is-collapsing .portal-welcome-card,
    .portal-welcome-panel.is-compact .portal-quick-strip,
    .portal-device-picker.is-collapsed {
        animation: none !important;
        transition: none !important;
    }
}
@media (max-width: 720px) {
    .portal-welcome-panel {
        padding: 12px 12px 6px;
    }
    #chat-screen.has-compact-welcome-panel .portal-welcome-panel {
        padding: 8px 12px 0;
    }
    .portal-welcome-card {
        padding: 14px;
        border-radius: 16px;
    }
    .portal-welcome-heading {
        align-items: flex-start;
        margin-bottom: 12px;
    }
    .portal-welcome-title {
        font-size: 18px;
    }
    .portal-quick-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .portal-quick-action {
        min-height: 78px;
        grid-template-columns: 34px minmax(0, 1fr) 18px;
        padding: 11px 12px;
    }
    .portal-action-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }
    .portal-quick-strip {
        width: 100%;
        padding: 2px 9px;
        border-radius: 14px;
    }
    .portal-device-picker {
        padding: 14px;
        border-radius: 16px;
    }
    .portal-device-picker-title {
        font-size: 18px;
    }
    .portal-device-list {
        max-height: min(48vh, 360px);
    }
    .portal-device-row {
        grid-template-columns: 16px 32px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px 10px;
    }
    .portal-device-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }
    .portal-device-badge {
        max-width: 112px;
        padding: 4px 7px;
    }
    .portal-device-picker-actions {
        justify-content: stretch;
    }
    .portal-device-continue {
        width: 100%;
    }
    .portal-device-detail-header {
        grid-template-columns: 32px minmax(0, 1fr);
    }
    .portal-device-detail-status {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }
    .portal-device-detail-facts {
        grid-template-columns: 1fr;
    }
}
#webchat-container {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    display: flex;
    position: relative;
    background: transparent;
}
#chat-screen.has-welcome-panel #webchat-container {
    flex: 0 0 var(--itbot-send-box-reserved-height);
    min-height: var(--itbot-send-box-reserved-height);
    overflow: visible;
}
#chat-screen.has-welcome-panel .portal-welcome-panel,
#chat-screen.has-welcome-panel #webchat-container,
#chat-screen.has-welcome-panel #webchat-container > *,
#chat-screen.has-welcome-panel #webchat-container .webchat,
#chat-screen.has-welcome-panel #webchat-container .webchat__root,
#chat-screen.has-welcome-panel #webchat-container .webchat__surface,
#chat-screen.has-welcome-panel #webchat-container .webchat__basic-transcript,
#chat-screen.has-welcome-panel #webchat-container .webchat__basic-transcript__scrollable,
#chat-screen.has-welcome-panel #webchat-container .webchat__basic-transcript__transcript,
#chat-screen.has-welcome-panel #webchat-container .webchat__basic-transcript__filler,
#chat-screen.has-welcome-panel #webchat-container .webchat__basic-transcript__activity,
#chat-screen.has-welcome-panel #webchat-container [class*="basic-transcript__filler"],
#chat-screen.has-welcome-panel #webchat-container [class*="basic-transcript__activity"] {
    background: transparent !important;
    background-color: transparent !important;
}
#chat-screen.has-welcome-panel #webchat-container,
#chat-screen.has-welcome-panel #webchat-container > *,
#chat-screen.has-welcome-panel #webchat-container .webchat,
#chat-screen.has-welcome-panel #webchat-container .webchat__root,
#chat-screen.has-welcome-panel #webchat-container .webchat__surface {
    overflow: visible !important;
}
#chat-screen.has-welcome-panel #webchat-container .webchat__basic-transcript,
#chat-screen.has-welcome-panel #webchat-container .webchat__basic-transcript__scrollable,
#chat-screen.has-welcome-panel #webchat-container .webchat__basic-transcript__transcript,
#chat-screen.has-welcome-panel #webchat-container .webchat__basic-transcript__filler,
#chat-screen.has-welcome-panel #webchat-container [class*="basic-transcript__filler"] {
    display: none !important;
}
#webchat-container > * {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
#webchat-container .webchat,
#webchat-container .webchat__root,
#webchat-container .webchat__surface {
    height: 100% !important;
    min-height: 0 !important;
    position: relative !important;
    background: transparent !important;
}
#webchat-container .webchat__root,
#webchat-container .webchat__surface {
    display: flex !important;
    flex-direction: column !important;
}
#webchat-container .webchat__basic-transcript {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    background: transparent !important;
}
#webchat-container .webchat__send-box {
    flex-shrink: 0;
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: 100%;
    min-height: var(--itbot-send-box-reserved-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 5px 16px calc(var(--chat-bottom-padding) + 16px) !important;
    background: transparent !important;
    border-top: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
#webchat-container .webchat__send-box [class*="send-box"] {
    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
#webchat-container .webchat__send-box .itbot-composer-pill,
#webchat-container .webchat__send-box .itbot-upload-button {
    background: #ffffff !important;
}
#webchat-container .webchat__send-box button,
#webchat-container .webchat__send-box [role="button"],
#webchat-container .webchat__send-box .webchat__icon-button,
#webchat-container .webchat__send-box [class*="icon-button"] {
    border-radius: 999px !important;
    overflow: visible !important;
}
#webchat-container .webchat__send-box button:not(.itbot-send-button)::before,
#webchat-container .webchat__send-box button:not(.itbot-send-button)::after,
#webchat-container .webchat__send-box [role="button"]:not(.itbot-send-button)::before,
#webchat-container .webchat__send-box [role="button"]:not(.itbot-send-button)::after,
#webchat-container .webchat__send-box .webchat__icon-button:not(.itbot-send-button)::before,
#webchat-container .webchat__send-box .webchat__icon-button:not(.itbot-send-button)::after,
#webchat-container .webchat__send-box [class*="icon-button"]:not(.itbot-send-button)::before,
#webchat-container .webchat__send-box [class*="icon-button"]:not(.itbot-send-button)::after {
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
}
#webchat-container .webchat__send-box .webchat__send-box__main,
#webchat-container .webchat__send-box [class*="send-box__main"] {
    flex: 1 1 var(--chat-content-max-width) !important;
    max-width: var(--chat-content-max-width) !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}
#webchat-container .webchat__send-box .webchat__send-box__main > *,
#webchat-container .webchat__send-box [class*="send-box__main"] > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
}
#webchat-container .webchat__send-box .webchat__send-box__button,
#webchat-container .webchat__send-box .webchat__send-box__button--align-stretch,
#webchat-container .webchat__send-box .webchat__upload-button,
#webchat-container .webchat__send-box .webchat__send-button,
#webchat-container .webchat__send-box .webchat__send-box-text-box,
#webchat-container .webchat__send-box form.webchat__send-box-text-box {
    align-self: center !important;
    margin: 0 !important;
}
#webchat-container .webchat__send-box .webchat__upload-button,
#webchat-container .webchat__send-box .webchat__send-button {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
}
#webchat-container .webchat__send-box .webchat__auto-resize-textarea {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
#webchat-container .webchat__send-box .itbot-composer-pill {
    flex: 1 1 auto !important;
    max-width: var(--chat-content-max-width) !important;
    min-width: 0 !important;
    height: var(--itbot-composer-height, 62px) !important;
    min-height: 62px !important;
    max-height: 160px !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    background: #ffffff !important;
    border: 1px solid #c7d2e0 !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(0, 28, 57, 0.04), 0 8px 24px rgba(0, 28, 57, 0.08) !important;
    gap: 8px !important;
    padding: 10px 14px 10px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: translateY(-10px) !important;
    transition: height 0.18s ease, min-height 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#webchat-container .webchat__send-box .itbot-composer-pill:focus-within {
    border-color: #c7d2e0 !important;
    box-shadow: 0 1px 2px rgba(0, 28, 57, 0.04), 0 8px 24px rgba(0, 28, 57, 0.08) !important;
}
#webchat-container .webchat__send-box.itbot-composer-has-text .itbot-composer-pill {
    max-width: calc(var(--chat-content-max-width) - 12px - var(--itbot-send-button-size, 52px)) !important;
}
#webchat-container .webchat__send-box .itbot-composer-pill > * {
    margin: 0 !important;
    align-self: center !important;
}
#webchat-container .webchat__send-box textarea,
#webchat-container .webchat__send-box input,
#webchat-container .webchat__send-box [contenteditable="true"],
#webchat-container .webchat__send-box [role="textbox"] {
    width: 100% !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 116px !important;
    font-family: var(--webchat-font) !important;
    font-weight: 400 !important;
    color: #1f2937 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 4px !important;
    margin: 0 !important;
    line-height: 20px !important;
    vertical-align: middle !important;
    align-self: center !important;
    overflow: hidden !important;
    resize: none !important;
    scrollbar-width: none !important;
    transition: height 0.18s ease !important;
}
#webchat-container .webchat__send-box textarea::-webkit-scrollbar,
#webchat-container .webchat__send-box [contenteditable="true"]::-webkit-scrollbar,
#webchat-container .webchat__send-box [role="textbox"]::-webkit-scrollbar {
    display: none !important;
}
#webchat-container .webchat__send-box textarea::placeholder,
#webchat-container .webchat__send-box input::placeholder {
    color: #7b8794 !important;
    line-height: 20px !important;
}
#webchat-container .webchat__send-box .itbot-upload-button,
#webchat-container .webchat__send-box .itbot-send-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}
#webchat-container .webchat__send-box .itbot-send-button {
    width: var(--itbot-send-button-size, 52px) !important;
    height: var(--itbot-send-button-size, 52px) !important;
    min-width: var(--itbot-send-button-size, 52px) !important;
    min-height: var(--itbot-send-button-size, 52px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #d9e3ee !important;
    box-shadow: 0 10px 24px rgba(0, 28, 57, 0.12) !important;
    overflow: hidden !important;
    transition: opacity 0.18s ease, transform 0.18s ease, width 0.18s ease, min-width 0.18s ease, margin 0.18s ease !important;
}
#webchat-container .webchat__send-box .itbot-upload-button {
    flex: 0 0 44px !important;
    color: #001c39 !important;
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
#webchat-container .webchat__send-box .itbot-upload-button *,
#webchat-container .webchat__send-box .itbot-upload-button *::before,
#webchat-container .webchat__send-box .itbot-upload-button *::after {
    background: transparent !important;
    box-shadow: none !important;
}
#webchat-container .webchat__send-box .itbot-upload-button:hover,
#webchat-container .webchat__send-box .itbot-upload-button:focus-visible {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-color: transparent !important;
    color: #001c39 !important;
    transform: scale(1.04) !important;
}
#webchat-container .webchat__send-box .itbot-composer-pill > .webchat__upload-button,
#webchat-container .webchat__send-box .itbot-composer-pill > [class*="upload-button"]:has(.itbot-upload-button) {
    flex: 0 0 var(--itbot-upload-button-size, 42px) !important;
    width: var(--itbot-upload-button-size, 42px) !important;
    height: var(--itbot-upload-button-size, 42px) !important;
    min-width: var(--itbot-upload-button-size, 42px) !important;
    min-height: var(--itbot-upload-button-size, 42px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
#webchat-container .webchat__send-box .itbot-composer-pill .itbot-upload-button {
    flex: 0 0 var(--itbot-upload-button-size, 42px) !important;
    width: var(--itbot-upload-button-size, 42px) !important;
    height: var(--itbot-upload-button-size, 42px) !important;
    min-width: var(--itbot-upload-button-size, 42px) !important;
    min-height: var(--itbot-upload-button-size, 42px) !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
#webchat-container .webchat__send-box .itbot-composer-pill .itbot-upload-button:hover,
#webchat-container .webchat__send-box .itbot-composer-pill .itbot-upload-button:focus-visible {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
#webchat-container .webchat__send-box .itbot-composer-pill .webchat__upload-button--file-input,
#webchat-container .webchat__send-box .itbot-composer-pill input[type="file"] {
    inset: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
}
#webchat-container .webchat__send-box .itbot-composer-pill .webchat__auto-resize-textarea,
#webchat-container .webchat__send-box .itbot-composer-pill [class*="auto-resize-textarea"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
#webchat-container .webchat__send-box .itbot-send-arrow-icon {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    pointer-events: none !important;
    color: #ffffff !important;
    fill: none !important;
    stroke: currentColor !important;
}
#webchat-container .webchat__send-box .itbot-send-arrow-icon path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
#webchat-container .webchat__send-box .itbot-send-button svg:not(.itbot-send-arrow-icon) {
    display: none !important;
}
#webchat-container .webchat__send-box .itbot-upload-plus-icon {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    pointer-events: none !important;
    color: #001c39 !important;
    fill: currentColor !important;
    stroke: none !important;
}
#webchat-container .webchat__send-box .itbot-upload-plus-icon path {
    fill: currentColor !important;
    stroke: none !important;
}
#webchat-container .webchat__send-box .itbot-upload-button svg:not(.itbot-upload-plus-icon) {
    display: none !important;
}
#webchat-container .webchat__send-box .itbot-send-button {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 0 0 -12px !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(0.78) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    color: #ffffff !important;
    background: #001c39 !important;
    background-color: #001c39 !important;
    background-image: none !important;
    border-color: transparent !important;
}
#webchat-container .webchat__send-box .itbot-send-button:hover,
#webchat-container .webchat__send-box .itbot-send-button:focus,
#webchat-container .webchat__send-box .itbot-send-button:focus-visible,
#webchat-container .webchat__send-box .itbot-send-button:active,
#webchat-container .webchat__send-box .itbot-send-button[aria-pressed="true"] {
    color: #ffffff !important;
    background: #001c39 !important;
    background-color: #001c39 !important;
    background-image: none !important;
    border-color: transparent !important;
}
#webchat-container .webchat__send-box .itbot-send-button [class*="shade"],
#webchat-container .webchat__send-box .itbot-send-button [class*="overlay"],
#webchat-container .webchat__send-box .itbot-send-button [class*="ripple"],
#webchat-container .webchat__send-box .itbot-send-button:hover [class*="shade"],
#webchat-container .webchat__send-box .itbot-send-button:hover [class*="overlay"],
#webchat-container .webchat__send-box .itbot-send-button:hover [class*="ripple"],
#webchat-container .webchat__send-box .itbot-send-button:focus-visible [class*="shade"],
#webchat-container .webchat__send-box .itbot-send-button:focus-visible [class*="overlay"],
#webchat-container .webchat__send-box .itbot-send-button:focus-visible [class*="ripple"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
#webchat-container .webchat__send-box .itbot-send-button *,
#webchat-container .webchat__send-box .itbot-send-button:hover > *,
#webchat-container .webchat__send-box .itbot-send-button:focus-visible > *,
#webchat-container .webchat__send-box .itbot-send-button *::before,
#webchat-container .webchat__send-box .itbot-send-button *::after {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
#webchat-container .webchat__send-box .itbot-send-button svg,
#webchat-container .webchat__send-box .itbot-send-button path {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
#webchat-container .webchat__send-box .itbot-send-button .itbot-send-arrow-icon,
#webchat-container .webchat__send-box .itbot-send-button .itbot-send-arrow-icon path {
    fill: none !important;
    stroke: currentColor !important;
}
#webchat-container .webchat__send-box .itbot-send-button .itbot-send-arrow-icon path {
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
#webchat-container .webchat__send-box .itbot-send-button::before,
#webchat-container .webchat__send-box .itbot-send-button::after,
#webchat-container .webchat__send-box .itbot-send-button:hover::before,
#webchat-container .webchat__send-box .itbot-send-button:hover::after,
#webchat-container .webchat__send-box .itbot-send-button:focus-visible::before,
#webchat-container .webchat__send-box .itbot-send-button:focus-visible::after {
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
#webchat-container .webchat__send-box.itbot-composer-has-text .itbot-send-button {
    flex-basis: var(--itbot-send-button-size, 52px) !important;
    width: var(--itbot-send-button-size, 52px) !important;
    min-width: var(--itbot-send-button-size, 52px) !important;
    margin-left: 0 !important;
    opacity: 1 !important;
    transform: translateY(-10px) scale(1) !important;
    pointer-events: auto !important;
}
#webchat-container .webchat__send-box.itbot-composer-has-text .itbot-send-button,
#webchat-container .webchat__send-box.itbot-composer-has-text .itbot-send-button:hover,
#webchat-container .webchat__send-box.itbot-composer-has-text .itbot-send-button:focus,
#webchat-container .webchat__send-box.itbot-composer-has-text .itbot-send-button:focus-visible,
#webchat-container .webchat__send-box.itbot-composer-has-text .itbot-send-button:active,
#webchat-container .webchat__send-box.itbot-composer-has-text .itbot-send-button[aria-pressed="true"],
#webchat-container .webchat__send-box .webchat__send-button.itbot-send-button,
#webchat-container .webchat__send-box .webchat__send-button.itbot-send-button:hover,
#webchat-container .webchat__send-box .webchat__send-button.itbot-send-button:focus,
#webchat-container .webchat__send-box .webchat__send-button.itbot-send-button:focus-visible,
#webchat-container .webchat__send-box .webchat__send-button.itbot-send-button:active,
#webchat-container .webchat__send-box .webchat__send-button.itbot-send-button.webchat__icon-button--focus-visible {
    color: #ffffff !important;
    background: #001c39 !important;
    background-color: #001c39 !important;
    background-image: none !important;
    border-color: transparent !important;
}
#webchat-container .webchat__send-box .itbot-send-button:hover,
#webchat-container .webchat__send-box .itbot-send-button:focus-visible {
    background: #001c39 !important;
    box-shadow: 0 12px 28px rgba(0, 28, 57, 0.2) !important;
    transform: translateY(-10px) !important;
}
#webchat-container .webchat__send-box .itbot-upload-button.webchat__icon-button--focus-visible {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #d9e3ee !important;
    color: #001c39 !important;
}
#webchat-container .webchat__send-box .itbot-upload-button:focus-visible,
#webchat-container .webchat__send-box .itbot-send-button:focus-visible {
    outline: 3px solid rgba(0, 28, 57, 0.28) !important;
    outline-offset: 2px !important;
}
#webchat-container .webchat__basic-transcript,
#webchat-container .webchat__basic-transcript__scrollable,
#webchat-container [class*="basic-transcript__scrollable"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 28, 57, 0.32) transparent;
    scrollbar-gutter: stable;
}
#webchat-container .webchat__basic-transcript::-webkit-scrollbar,
#webchat-container .webchat__basic-transcript__scrollable::-webkit-scrollbar,
#webchat-container [class*="basic-transcript__scrollable"]::-webkit-scrollbar {
    width: 8px;
}
#webchat-container .webchat__basic-transcript::-webkit-scrollbar-track,
#webchat-container .webchat__basic-transcript__scrollable::-webkit-scrollbar-track,
#webchat-container [class*="basic-transcript__scrollable"]::-webkit-scrollbar-track {
    background: transparent;
}
#webchat-container .webchat__basic-transcript::-webkit-scrollbar-thumb,
#webchat-container .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb,
#webchat-container [class*="basic-transcript__scrollable"]::-webkit-scrollbar-thumb {
    background: rgba(0, 28, 57, 0.28);
    background-clip: content-box;
    border: 2px solid transparent;
    border-radius: 999px;
}
#webchat-container .webchat__basic-transcript::-webkit-scrollbar-thumb:hover,
#webchat-container .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb:hover,
#webchat-container [class*="basic-transcript__scrollable"]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 28, 57, 0.42);
    background-clip: content-box;
}
#webchat-container .webchat__basic-transcript {
    padding-bottom: 0 !important;
}
#webchat-container .webchat__basic-transcript__scrollable,
#webchat-container [class*="basic-transcript__scrollable"] {
    scroll-padding-bottom: var(--itbot-transcript-bottom-padding) !important;
}
#chat-screen:not(.has-welcome-panel) #webchat-container .webchat__basic-transcript__scrollable,
#chat-screen:not(.has-welcome-panel) #webchat-container [class*="basic-transcript__scrollable"] {
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - var(--itbot-composer-fade-height)),
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - var(--itbot-composer-fade-height)),
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
#webchat-container .webchat__basic-transcript__transcript::after,
#webchat-container [class*="basic-transcript__transcript"]::after {
    content: "";
    display: block;
    height: var(--itbot-transcript-bottom-padding);
}
/* Align the transcript's inner content with the composer pill.
   Composer pill sits inside .webchat__send-box (padding 16px / 10px on mobile);
   mirroring that padding here keeps bot bubbles flush with the pill's left edge. */
#webchat-container .webchat__basic-transcript,
#webchat-container .webchat__basic-transcript__scrollable,
#webchat-container [class*="basic-transcript__scrollable"] {
    padding-left: 16px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
}
#webchat-container .webchat__basic-transcript__activity .webchat__stacked-layout__message-row,
#webchat-container .webchat__basic-transcript__activity [class*="stacked-layout__message-row"],
#webchat-container .webchat__basic-transcript__activity .webchat__stacked-layout__attachment-row,
#webchat-container .webchat__basic-transcript__activity [class*="stacked-layout__attachment-row"] {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
#webchat-container .webchat__basic-transcript__activity:not(:has(.webchat__bubble--from-user)):not(:has([class*="bubble--from-user"])) .webchat__bubble__nub-pad,
#webchat-container .webchat__basic-transcript__activity:not(:has(.webchat__bubble--from-user)):not(:has([class*="bubble--from-user"])) [class*="bubble__nub-pad"],
#webchat-container .webchat__basic-transcript__activity:not(:has(.webchat__bubble--from-user)):not(:has([class*="bubble--from-user"])) .webchat__bubble__nub,
#webchat-container .webchat__basic-transcript__activity:not(:has(.webchat__bubble--from-user)):not(:has([class*="bubble--from-user"])) [class*="bubble__nub"]:not([class*="bubble__nub-pad"]):not([class*="bubble__nub-outline"]),
#webchat-container .webchat__basic-transcript__activity:not(:has(.webchat__bubble--from-user)):not(:has([class*="bubble--from-user"])) .webchat__bubble__nub-outline,
#webchat-container .webchat__basic-transcript__activity:not(:has(.webchat__bubble--from-user)):not(:has([class*="bubble--from-user"])) [class*="bubble__nub-outline"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
}
#webchat-container .webchat__basic-transcript__scroll-to-end-button,
#webchat-container .webchat__scroll-to-end-button,
#webchat-container [class*="scroll-to-end-button"] {
    background: #001c39 !important;
    background-color: #001c39 !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    transition: transform 0.15s ease !important;
}
#webchat-container .webchat__basic-transcript__scroll-to-end-button:hover,
#webchat-container .webchat__basic-transcript__scroll-to-end-button:focus,
#webchat-container .webchat__basic-transcript__scroll-to-end-button:focus-visible,
#webchat-container .webchat__basic-transcript__scroll-to-end-button:active,
#webchat-container .webchat__scroll-to-end-button:hover,
#webchat-container .webchat__scroll-to-end-button:focus,
#webchat-container .webchat__scroll-to-end-button:focus-visible,
#webchat-container .webchat__scroll-to-end-button:active,
#webchat-container [class*="scroll-to-end-button"]:hover,
#webchat-container [class*="scroll-to-end-button"]:focus,
#webchat-container [class*="scroll-to-end-button"]:focus-visible,
#webchat-container [class*="scroll-to-end-button"]:active {
    background: #001c39 !important;
    background-color: #001c39 !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    transform: scale(1.04) !important;
}
#webchat-container .webchat__basic-transcript__scroll-to-end-button *,
#webchat-container .webchat__scroll-to-end-button *,
#webchat-container [class*="scroll-to-end-button"] * {
    color: #ffffff !important;
}
#webchat-container .webchat__basic-transcript__scroll-to-end-button [class*="shade"],
#webchat-container .webchat__basic-transcript__scroll-to-end-button [class*="overlay"],
#webchat-container .webchat__basic-transcript__scroll-to-end-button [class*="ripple"],
#webchat-container .webchat__scroll-to-end-button [class*="shade"],
#webchat-container .webchat__scroll-to-end-button [class*="overlay"],
#webchat-container .webchat__scroll-to-end-button [class*="ripple"],
#webchat-container [class*="scroll-to-end-button"] [class*="shade"],
#webchat-container [class*="scroll-to-end-button"] [class*="overlay"],
#webchat-container [class*="scroll-to-end-button"] [class*="ripple"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
#webchat-container .webchat__basic-transcript__scroll-to-end-button svg,
#webchat-container .webchat__basic-transcript__scroll-to-end-button path,
#webchat-container .webchat__scroll-to-end-button svg,
#webchat-container .webchat__scroll-to-end-button path,
#webchat-container [class*="scroll-to-end-button"] svg,
#webchat-container [class*="scroll-to-end-button"] path {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
@media (min-width: 900px) {
    #webchat-container .webchat__basic-transcript__activity,
    #webchat-container [class*="basic-transcript__activity"],
    #webchat-container [role="listitem"]:has(.webchat__stacked-layout),
    #webchat-container [role="listitem"]:has([class*="stacked-layout"]),
    #webchat-container [role="listitem"]:has(.webchat__bubble),
    #webchat-container [role="listitem"]:has([class*="bubble"]),
    #webchat-container [role="listitem"]:has(.webchat__typingIndicator),
    #webchat-container [role="listitem"]:has([class*="typingIndicator"]),
    #webchat-container [role="listitem"]:has([class*="typing-indicator"]),
    #webchat-container .webchat__basic-transcript__activity:has(.webchat__typingIndicator),
    #webchat-container .webchat__basic-transcript__activity:has([class*="typingIndicator"]),
    #webchat-container .webchat__basic-transcript__activity:has([class*="typing-indicator"]),
    #webchat-container [class*="basic-transcript__activity"]:has(.webchat__typingIndicator),
    #webchat-container [class*="basic-transcript__activity"]:has([class*="typingIndicator"]),
    #webchat-container [class*="basic-transcript__activity"]:has([class*="typing-indicator"]),
    #webchat-container .webchat__basic-transcript__scrollable > *:has(.webchat__typingIndicator),
    #webchat-container .webchat__basic-transcript__scrollable > *:has([class*="typingIndicator"]),
    #webchat-container .webchat__basic-transcript__scrollable > *:has([class*="typing-indicator"]),
    #webchat-container [class*="basic-transcript__scrollable"] > *:has(.webchat__typingIndicator),
    #webchat-container [class*="basic-transcript__scrollable"] > *:has([class*="typingIndicator"]),
    #webchat-container [class*="basic-transcript__scrollable"] > *:has([class*="typing-indicator"]),
    #webchat-container [class*="basic-transcript__scrollable"] > *:has([class*="typing"]) {
        width: min(100%, var(--chat-content-max-width)) !important;
        max-width: var(--chat-content-max-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #webchat-container .webchat__scroll-to-end-button,
    #webchat-container [class*="scroll-to-end-button"],
    #webchat-container [class*="scroll-to-end"] {
        right: max(16px, calc((100% - var(--chat-content-max-width)) / 2 + 16px)) !important;
    }
}
@media (max-width: 720px) {
    :root {
        --itbot-send-box-reserved-height: calc(74px + var(--chat-bottom-padding));
        --itbot-current-composer-height: 56px;
    }
    #webchat-container .webchat__send-box {
        gap: 10px !important;
        min-height: var(--itbot-send-box-reserved-height) !important;
        padding: 5px 10px calc(var(--chat-bottom-padding) + 13px) !important;
    }
    #webchat-container .webchat__basic-transcript,
    #webchat-container .webchat__basic-transcript__scrollable,
    #webchat-container [class*="basic-transcript__scrollable"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    #webchat-container .webchat__send-box .webchat__send-box__main,
    #webchat-container .webchat__send-box [class*="send-box__main"] {
        gap: 10px !important;
    }
    #webchat-container .webchat__send-box .itbot-composer-pill {
        height: var(--itbot-composer-height, 56px) !important;
        min-height: 56px !important;
        max-height: 146px !important;
        border-radius: 18px !important;
        padding: 9px 12px 9px 8px !important;
        transform: translateY(-8px) !important;
    }
    #webchat-container .webchat__send-box .itbot-upload-button,
    #webchat-container .webchat__send-box.itbot-composer-has-text .itbot-send-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
    }
    #webchat-container .webchat__send-box .itbot-send-button {
        width: 0 !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        flex-basis: 0 !important;
        margin-left: -10px !important;
        transform: translateY(-8px) scale(0.78) !important;
    }
    #webchat-container .webchat__send-box.itbot-composer-has-text .itbot-send-button {
        width: 40px !important;
        min-width: 40px !important;
        flex-basis: 40px !important;
        margin-left: 0 !important;
        transform: translateY(-8px) scale(1) !important;
    }
    #webchat-container .webchat__send-box .itbot-send-button:hover,
    #webchat-container .webchat__send-box .itbot-send-button:focus-visible {
        transform: translateY(-8px) scale(1.04) !important;
    }
}
#webchat-container .webchat__defaultAvatar img,
#webchat-container [class*="defaultAvatar"] img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
#webchat-container .webchat__basic-transcript .webchat__stacked-layout:not(.webchat__stacked-layout--from-user),
#webchat-container .webchat__basic-transcript [class*="stacked-layout"]:not([class*="stacked-layout--from-user"]) {
    margin-left: 0 !important;
}
#webchat-container .webchat__basic-transcript .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__stacked-layout__avatar-gutter,
#webchat-container .webchat__basic-transcript [class*="stacked-layout"]:not([class*="stacked-layout--from-user"]) [class*="avatar-gutter"],
#webchat-container .webchat__basic-transcript .webchat__defaultAvatar:not(.webchat__defaultAvatar--fromUser),
#webchat-container .webchat__basic-transcript .webchat__initialsAvatar:not(.webchat__initialsAvatar--fromUser),
#webchat-container .webchat__basic-transcript [class*="defaultAvatar"]:not([class*="defaultAvatar--fromUser"]),
#webchat-container .webchat__basic-transcript [class*="initialsAvatar"]:not([class*="initialsAvatar--fromUser"]) {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#webchat-container .webchat__stacked-layout--from-user .webchat__stacked-layout__avatar-gutter,
#webchat-container [class*="stacked-layout--from-user"] [class*="avatar-gutter"],
#webchat-container .webchat__defaultAvatar--fromUser,
#webchat-container .webchat__initialsAvatar--fromUser,
#webchat-container [class*="defaultAvatar--fromUser"],
#webchat-container [class*="initialsAvatar--fromUser"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#webchat-container ul,
#webchat-container ol {
    margin: 0.5rem 0;
    padding-inline-start: 1.5rem;
}
#webchat-container li {
    margin: 0.25rem 0;
}
#webchat-container li > p {
    margin: 0;
}
#webchat-container .webchat__basic-transcript *:focus,
#webchat-container .webchat__basic-transcript *:focus-within,
#webchat-container .webchat__stacked-layout *:focus,
#webchat-container .webchat__stacked-layout *:focus-within,
#webchat-container [tabindex]:focus,
#webchat-container [tabindex]:focus-within,
#webchat-container [role="listitem"]:focus,
#webchat-container [role="listitem"]:focus-within {
    outline: none !important;
    box-shadow: none !important;
}
#webchat-container .webchat__basic-transcript__activity:focus,
#webchat-container .webchat__basic-transcript__activity:focus-within {
    outline: none !important;
    box-shadow: none !important;
}
#webchat-container .webchat__basic-transcript__activity:focus-visible {
    outline: 2px solid rgba(0, 28, 57, 0.25) !important;
    outline-offset: 3px;
    border-radius: 14px;
}

/* ── Adaptive cards — prevent overflow on mobile ── */
#webchat-container .ac-adaptiveCard,
#webchat-container [class*="ac-adaptiveCard"] {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
#webchat-container .webchat__bubble__content {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: #001c39 !important;
}
#webchat-container .webchat__basic-transcript__activity:has(.portal-device-picker),
#webchat-container [class*="basic-transcript__activity"]:has(.portal-device-picker),
#webchat-container [role="listitem"]:has(.portal-device-picker),
#webchat-container .webchat__stacked-layout:has(.portal-device-picker),
#webchat-container [class*="stacked-layout"]:has(.portal-device-picker),
#webchat-container .webchat__stacked-layout__attachment-row:has(.portal-device-picker),
#webchat-container [class*="attachment-row"]:has(.portal-device-picker),
#webchat-container .webchat__bubble:has(.portal-device-picker),
#webchat-container [class*="bubble"]:has(.portal-device-picker),
#webchat-container .webchat__bubble__content:has(.portal-device-picker),
#webchat-container [class*="bubble__content"]:has(.portal-device-picker) {
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#webchat-container .webchat__bubble__content,
#webchat-container .webchat__bubble__content * {
    font-family: var(--webchat-font) !important;
    font-weight: 400 !important;
    color: #001c39 !important;
}
#webchat-container .portal-device-picker,
#webchat-container .portal-device-picker * {
    font-family: var(--font) !important;
}
#webchat-container .portal-device-picker,
#webchat-container .portal-device-picker:focus-within {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #c7d2e0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    box-shadow: 0 1px 2px rgba(0, 28, 57, 0.04), 0 8px 24px rgba(0, 28, 57, 0.08) !important;
}
#webchat-container .portal-device-list {
    background: transparent !important;
}
#webchat-container .portal-device-list-frame {
    background: transparent !important;
}
#webchat-container .portal-device-picker-actions {
    position: static !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
#webchat-container .portal-device-picker,
#webchat-container .portal-device-row,
#webchat-container .portal-device-icon {
    color: #001c39 !important;
}
#webchat-container .portal-device-picker-title,
#webchat-container .portal-device-name,
#webchat-container .portal-device-continue {
    font-weight: 500 !important;
}
#webchat-container .portal-device-picker-title,
#webchat-container .portal-device-name {
    color: #001c39 !important;
}
#webchat-container .portal-device-picker-subtitle,
#webchat-container .portal-device-hardware {
    color: #52616f !important;
}
#webchat-container .portal-device-meta {
    color: #6b7280 !important;
}
#webchat-container .portal-device-badge.is-compliant {
    color: var(--portal-status-success-text) !important;
}
#webchat-container .portal-device-badge.is-noncompliant {
    color: var(--portal-status-danger-text) !important;
}
#webchat-container .portal-device-badge.is-unknown {
    color: var(--portal-status-warning-text) !important;
}
#webchat-container .portal-device-continue,
#webchat-container .portal-device-continue:disabled {
    color: #ffffff !important;
}
#webchat-container .portal-device-picker-error {
    color: #b42318 !important;
}
#webchat-container .webchat__basic-transcript__activity:has(.portal-absorbed-activity),
#webchat-container [class*="basic-transcript__activity"]:has(.portal-absorbed-activity),
#webchat-container [role="listitem"]:has(.portal-absorbed-activity) {
    display: none !important;
}
#webchat-container .webchat__bubble--from-user .webchat__bubble__content,
#webchat-container [class*="bubble--from-user"] .webchat__bubble__content,
#webchat-container .webchat__bubble--from-user [class*="bubble__content"],
#webchat-container [class*="bubble--from-user"] [class*="bubble__content"] {
    background: #eaf1f7 !important;
    background-color: #eaf1f7 !important;
    color: #001c39 !important;
}
#webchat-container .webchat__stacked-layout--from-user,
#webchat-container [class*="stacked-layout--from-user"] {
    margin-right: 2px !important;
}
#webchat-container .webchat__bubble--from-user .webchat__bubble__nub-pad,
#webchat-container [class*="bubble--from-user"] .webchat__bubble__nub-pad,
#webchat-container .webchat__bubble--from-user [class*="bubble__nub-pad"],
#webchat-container [class*="bubble--from-user"] [class*="bubble__nub-pad"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
}
@media (max-width: 720px) {
    #webchat-container .webchat__stacked-layout--from-user,
    #webchat-container [class*="stacked-layout--from-user"] {
        margin-right: 12px !important;
    }
}
/* Image attachments — show only the thumbnail, without bubble chrome. */
#webchat-container .webchat__bubble:has(.webchat__imageContent),
#webchat-container .webchat__bubble:has([class*="imageContent"]),
#webchat-container .webchat__bubble__content:has(.webchat__imageContent),
#webchat-container .webchat__bubble__content:has([class*="imageContent"]) {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}
#webchat-container .webchat__stacked-layout__attachment-row:has(.webchat__imageContent),
#webchat-container .webchat__stacked-layout__attachment-row:has([class*="imageContent"]),
#webchat-container .webchat__stacked-layout__message-row:has(.webchat__imageContent),
#webchat-container .webchat__stacked-layout__message-row:has([class*="imageContent"]) {
    width: auto !important;
    max-width: fit-content !important;
}
#webchat-container .webchat__basic-transcript__activity:has(.webchat__imageContent) .webchat__bubble__nub,
#webchat-container .webchat__basic-transcript__activity:has([class*="imageContent"]) .webchat__bubble__nub,
#webchat-container .webchat__basic-transcript__activity:has(.webchat__imageContent) .webchat__bubble__nub-outline,
#webchat-container .webchat__basic-transcript__activity:has([class*="imageContent"]) .webchat__bubble__nub-outline,
#webchat-container .webchat__basic-transcript__activity:has(.webchat__imageContent) .webchat__bubble__nub-pad,
#webchat-container .webchat__basic-transcript__activity:has([class*="imageContent"]) .webchat__bubble__nub-pad {
    display: none !important;
}

/* ── Image previews in chat ── */
/* Let Web Chat keep its internal ratio box; only constrain final size. */
#webchat-container [class*="imageContent"],
#webchat-container .webchat__imageContent {
    width: fit-content !important;
    max-width: min(320px, 100%) !important;
    overflow: visible !important;
}
#webchat-container [class*="imageContent"] > div,
#webchat-container .webchat__imageContent > div {
    max-width: 100% !important;
}
#webchat-container [class*="imageContent"] img,
#webchat-container .webchat__imageContent img,
#webchat-container img[src^="blob:"],
#webchat-container img[src^="data:"],
#webchat-container img[src*="/attachments/"] {
    display: block;
    max-width: min(320px, 100%) !important;
    max-height: min(70vh, 720px) !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 8px;
    cursor: pointer;
}
/* Lightbox overlay */
.itbot-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out;
    animation: itbot-lb-in 0.15s ease-out;
}
@keyframes itbot-lb-in { from { opacity: 0; } to { opacity: 1; } }
.itbot-lightbox img {
    max-width: 92vw; max-height: 92vh;
    object-fit: contain; border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
    image-rendering: auto;
}

/* ── Error banner ── */
.error-banner {
    background: rgba(247, 95, 95, 0.1); border: 1px solid var(--danger);
    color: var(--danger); padding: 10px 16px; font-size: 13px;
    text-align: center; display: none;
}
.error-banner.visible { display: block; }

/* ── Loading spinner ── */
.loading-spinner {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; flex: 1; gap: 12px;
    background: #ffffff;
}
.spinner {
    width: 32px; height: 32px; border: 3px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 13px; color: var(--text-dim); }