/* ================================================================
   RegionOne AI Chat widget (ProfessionalDev / OmniTrack)
   Single source of truth for widget layout, icons, modals, cards,
   footer, mobile behavior, per-message Report, and General Feedback.
   ================================================================ */

/* Design tokens */

:root {
    --ro-ai-primary: #1565c0;
    --ro-ai-primary-hover: #0f55a5;
    --ro-ai-navy: #0d1b3e;
    --ro-ai-navy-hover: #142755;
    --ro-ai-surface: #ffffff;
    --ro-ai-surface-secondary: #f6f8fc;
    --ro-ai-surface-tertiary: #eef2f8;
    --ro-ai-text: #161b28;
    --ro-ai-text-soft: #5f6677;
    --ro-ai-text-muted: #8790a3;
    --ro-ai-border: rgba(13, 27, 62, .14);
    --ro-ai-border-soft: rgba(13, 27, 62, .09);
    --ro-ai-white-muted: rgba(255, 255, 255, .66);
    --ro-ai-white-border: rgba(255, 255, 255, .24);
    --ro-ai-success: #22a06b;
    --ro-ai-danger: #b42318;
    --ro-ai-window-shadow: 0 18px 46px rgba(13, 27, 62, .18);
    --ro-ai-fab-glow: 0 0 0 1px rgba(21, 101, 192, .48), 0 0 18px rgba(21, 101, 192, .42), 0 6px 18px rgba(0, 0, 0, .24);
    --ro-ai-panel-w: 450px;
    --ro-ai-panel-h: 600px;
    --ro-ai-header-h: 62px;
    --ro-ai-footer-h: 84px;
}

/* Widget shell and reset */

.ro-ai-chat {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2147483000;
    color: var(--ro-ai-text);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
}

    .ro-ai-chat,
    .ro-ai-chat *,
    .ro-ai-chat *::before,
    .ro-ai-chat *::after {
        box-sizing: border-box;
    }

        .ro-ai-chat button,
        .ro-ai-chat textarea {
            font-family: "Segoe UI", Arial, sans-serif;
        }

/* Launcher */

.ro-ai-chat__launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    border: 1px solid rgba(21, 101, 192, .45);
    border-radius: 999px;
    padding: 11px 20px 11px 14px;
    color: #ffffff;
    background: var(--ro-ai-navy);
    box-shadow: var(--ro-ai-fab-glow);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

    .ro-ai-chat__launcher::before {
        content: "";
        display: inline-block;
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        border-radius: 50%;
        background-color: #ffffff;
        opacity: .92;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.477 2 2 6.253 2 11.5c0 2.304.878 4.41 2.326 6.016L3.05 21.243a.75.75 0 0 0 .98.98l3.7-1.285A10.47 10.47 0 0 0 12 21c5.523 0 10-4.253 10-9.5S17.523 2 12 2z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.477 2 2 6.253 2 11.5c0 2.304.878 4.41 2.326 6.016L3.05 21.243a.75.75 0 0 0 .98.98l3.7-1.285A10.47 10.47 0 0 0 12 21c5.523 0 10-4.253 10-9.5S17.523 2 12 2z'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: center;
        mask-position: center;
    }

    .ro-ai-chat__launcher:hover {
        background: var(--ro-ai-navy-hover);
        transform: translateY(-2px);
        box-shadow: 0 0 0 1px rgba(21, 101, 192, .58), 0 0 22px rgba(21, 101, 192, .48), 0 8px 20px rgba(0, 0, 0, .28);
    }

.ro-ai-chat--open .ro-ai-chat__launcher {
    opacity: 0;
    pointer-events: none;
}

.ro-ai-chat__launcher:focus,
.ro-ai-chat__icon-button:focus,
.ro-ai-chat__send:focus,
.ro-ai-chat__quick-action:focus,
.ro-ai-chat__source-link:focus {
    outline: 3px solid rgba(21, 101, 192, .22);
    outline-offset: 2px;
}

/* Panel */

.ro-ai-chat__panel {
    position: fixed;
    right: 24px;
    bottom: 82px;
    width: var(--ro-ai-panel-w);
    height: var(--ro-ai-panel-h);
    min-width: 340px;
    min-height: 440px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: .5px solid var(--ro-ai-border);
    border-radius: 16px;
    color: var(--ro-ai-text);
    background: var(--ro-ai-surface);
    box-shadow: var(--ro-ai-window-shadow);
    transition: width .24s ease, height .24s ease, right .24s ease, bottom .24s ease, left .24s ease, top .24s ease, border-radius .24s ease;
}

    .ro-ai-chat__panel[hidden] {
        display: none !important;
    }

.ro-ai-chat--expanded .ro-ai-chat__panel {
    right: auto;
    bottom: auto;
    left: var(--ro-ai-chat-expanded-left, 24px);
    top: var(--ro-ai-chat-expanded-top, 24px);
    width: var(--ro-ai-chat-expanded-width, min(680px, calc(100vw - 48px)));
    height: var(--ro-ai-chat-expanded-height, min(78vh, calc(100vh - 48px)));
    min-width: 0;
    min-height: 0;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    resize: none;
    border-radius: 18px;
}

/* Header / brand
   Every header property below is `!important` because OmniTrack's legacy site-wide CSS otherwise
   bleeds into this fixed-position widget (inherited padding/line-height/box-sizing from ambient
   selectors). Do not remove these without re-testing inside the live OmniTrack page chrome. */

.ro-ai-chat__header {
    flex: 0 0 var(--ro-ai-header-h) !important;
    height: var(--ro-ai-header-h) !important;
    min-height: var(--ro-ai-header-h) !important;
    max-height: var(--ro-ai-header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    color: #ffffff;
    background: var(--ro-ai-navy);
}

.ro-ai-chat__brand {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
    margin: 0 !important;
    padding: 0 !important;
}

.ro-ai-chat__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px;
    color: #ffffff;
    background: var(--ro-ai-primary);
    line-height: 0;
}

.ro-ai-chat__brand-copy {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.ro-ai-chat__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 !important;
}

.ro-ai-chat__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
    margin: 2px 0 0 !important;
    color: var(--ro-ai-white-muted);
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.2;
}

.ro-ai-chat--expanded .ro-ai-chat__subtitle {
    max-width: 470px;
}

.ro-ai-chat__window-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
}

.ro-ai-chat__icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: .5px solid var(--ro-ai-white-border);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    line-height: 1 !important;
    text-align: center;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

    .ro-ai-chat__icon-button:hover {
        background: rgba(255, 255, 255, .14);
        border-color: rgba(255, 255, 255, .34);
        transform: translateY(-1px);
    }

.ro-ai-chat__close {
    font-size: 20px;
}

/* Icons (header brand sparkle)
   Each context below sizes/centers the sparkle icon independently - do not make the base
   `.ro-ai-chat__sparkle-icon` rule bigger to "fix" one context, since it is shared by both. */

.ro-ai-chat__sparkle-icon {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
}

.ro-ai-chat__avatar .ro-ai-chat__sparkle-icon {
    width: 28px;
    height: 28px;
    display: block;
    flex: 0 0 auto;
    margin: 0;
    transform: translateY(2px);
}

.ro-ai-chat__sender .ro-ai-chat__sparkle-icon {
    width: 15px;
    height: 15px;
    display: block;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    transform: translate(1px, 1px);
}

/* Status bar */

.ro-ai-chat__status-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 25px;
    padding: 5px 14px;
    border-bottom: .5px solid var(--ro-ai-border-soft);
    color: var(--ro-ai-text-soft);
    background: var(--ro-ai-surface-secondary);
    font-size: 10.5px;
    line-height: 1.25;
}

.ro-ai-chat__status-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ro-ai-success);
}

/* Messages */

.ro-ai-chat__messages {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 14px;
    background: var(--ro-ai-surface);
    scroll-behavior: smooth;
}

.ro-ai-chat--expanded .ro-ai-chat__messages {
    padding: 16px 18px;
    gap: 13px;
    font-size: 13px;
}

.ro-ai-chat__messages::-webkit-scrollbar {
    width: 9px;
}

.ro-ai-chat__messages::-webkit-scrollbar-track {
    background: transparent;
}

.ro-ai-chat__messages::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background-color: rgba(13, 27, 62, .18);
}

.ro-ai-chat__message-shell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 88%;
    min-width: 0;
}

.ro-ai-chat--expanded .ro-ai-chat__message-shell {
    max-width: min(620px, 82%);
}

.ro-ai-chat__message-shell--assistant,
.ro-ai-chat__message-shell--error {
    align-self: flex-start;
}

.ro-ai-chat__message-shell--user {
    align-self: flex-end;
    align-items: flex-end;
}

.ro-ai-chat__message-shell--welcome {
    width: auto;
    max-width: min(100%, 430px);
}

.ro-ai-chat--expanded .ro-ai-chat__message-shell--welcome {
    max-width: min(100%, 520px);
}

.ro-ai-chat__sender {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ro-ai-text-muted);
    font-size: 10.5px;
    line-height: 1.2;
}

.ro-ai-chat--expanded .ro-ai-chat__sender {
    font-size: 11px;
}

.ro-ai-chat__message {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.ro-ai-chat--expanded .ro-ai-chat__message {
    font-size: 13px;
    line-height: 1.5;
    padding: 11px 13px;
}

.ro-ai-chat__message p {
    margin: 0;
}

.ro-ai-chat__message--assistant {
    border: .5px solid var(--ro-ai-border-soft);
    border-radius: 6px 15px 15px 15px;
    color: var(--ro-ai-text);
    background: var(--ro-ai-surface-secondary);
}

.ro-ai-chat__message--user {
    border-radius: 15px 6px 15px 15px;
    color: rgba(255, 255, 255, .96);
    background: var(--ro-ai-navy);
}

.ro-ai-chat__message--error {
    border: .5px solid rgba(180, 35, 24, .18);
    border-radius: 6px 15px 15px 15px;
    color: var(--ro-ai-danger);
    background: #fff5f3;
}

.ro-ai-chat__message--welcome {
    width: auto;
    padding: 13px 14px !important;
    line-height: 1.4;
    white-space: normal !important;
}

.ro-ai-chat--expanded .ro-ai-chat__message--welcome {
    padding: 14px 15px !important;
}

.ro-ai-chat__welcome-title {
    margin: 0 0 7px !important;
    color: var(--ro-ai-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
}

.ro-ai-chat--expanded .ro-ai-chat__welcome-title {
    font-size: 13.5px;
}

.ro-ai-chat__welcome-text {
    margin: 0 !important;
    color: var(--ro-ai-text-soft);
    font-size: 12.5px;
    line-height: 1.45;
}

.ro-ai-chat--expanded .ro-ai-chat__welcome-text {
    font-size: 13px;
    line-height: 1.5;
}

.ro-ai-chat__warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: .5px solid rgba(217, 119, 6, .30);
    border-left: 3px solid #d97706;
    border-radius: 8px;
    padding: 9px 10px;
    color: #5f370e;
    background: #fff7ed;
    font-size: 11.75px;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(13, 27, 62, .06);
}

.ro-ai-chat__warning-label {
    flex: 0 0 auto;
    font-weight: 700;
}

.ro-ai-chat__warning-text {
    min-width: 0;
    word-break: break-word;
}

/* Quick actions */

.ro-ai-chat__quick-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
}

.ro-ai-chat__quick-action {
    flex: 0 1 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 210px;
    min-height: 30px !important;
    height: auto !important;
    margin: 0 !important;
    border: .5px solid var(--ro-ai-border);
    border-radius: 999px;
    padding: 6px 11px !important;
    color: var(--ro-ai-text-soft);
    background: #ffffff;
    background-image: none !important;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.ro-ai-chat--expanded .ro-ai-chat__quick-action {
    min-height: 31px !important;
    padding: 6px 12px !important;
    font-size: 11.25px;
}

.ro-ai-chat__quick-action:hover {
    color: var(--ro-ai-text);
    border-color: rgba(21, 101, 192, .34);
    background: #f2f7ff;
    transform: translateY(-1px);
}

.ro-ai-chat__message-meta {
    color: var(--ro-ai-text-muted);
    font-size: 10.5px;
    line-height: 1.35;
}

/* Cards (structured response cards) */

.ro-ai-chat__cards {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 2px;
}

.ro-ai-chat__card {
    border: .5px solid rgba(21, 101, 192, .18);
    border-radius: 13px;
    padding: 11px;
    color: var(--ro-ai-text);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 8px 18px rgba(13, 27, 62, .07);
}

.ro-ai-chat__card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ro-ai-chat__card-title {
    min-width: 0;
    color: var(--ro-ai-text);
    font-size: 12.75px;
    font-weight: 700;
    line-height: 1.3;
}

.ro-ai-chat--expanded .ro-ai-chat__card-title {
    font-size: 13.25px;
}

.ro-ai-chat__card-badge {
    flex: 0 0 auto;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: .5px solid rgba(21, 101, 192, .16);
    border-radius: 999px;
    padding: 3px 7px;
    color: var(--ro-ai-primary);
    background: rgba(21, 101, 192, .08);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
}

.ro-ai-chat__card-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.ro-ai-chat__card-restriction-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 0;
    border: 1px solid #d32f2f;
    border-radius: 999px;
    padding: 3px 9px;
    color: #d32f2f;
    background: rgba(211, 47, 47, .06);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
}

.ro-ai-chat__card-temporal-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
}

/* Ongoing: green, still happening right now. */
.ro-ai-chat__card-temporal-badge--ongoing {
    border: 1px solid #2e7d32;
    color: #2e7d32;
    background: rgba(46, 125, 50, .08);
}

.ro-ai-chat__card-temporal-badge--ongoing::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #2e7d32;
}

/* Ended: neutral gray, already finished. */
.ro-ai-chat__card-temporal-badge--ended {
    border: 1px solid #757575;
    color: #757575;
    background: rgba(117, 117, 117, .08);
}

.ro-ai-chat__card-meta {
    margin-top: 7px;
    color: var(--ro-ai-text-soft);
    font-size: 11.25px;
    line-height: 1.38;
}

.ro-ai-chat--expanded .ro-ai-chat__card-meta {
    font-size: 11.75px;
}

.ro-ai-chat__card-description {
    margin-top: 8px;
    color: var(--ro-ai-text);
    font-size: 12px;
    line-height: 1.45;
}

.ro-ai-chat--expanded .ro-ai-chat__card-description {
    font-size: 12.5px;
}

.ro-ai-chat__card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.ro-ai-chat__card-fact {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    border: .5px solid var(--ro-ai-border-soft);
    border-radius: 999px;
    padding: 4px 8px;
    color: var(--ro-ai-text-soft);
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
}

.ro-ai-chat__card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 29px;
    margin-top: 10px;
    border-radius: 999px;
    padding: 7px 11px;
    color: #ffffff;
    background: var(--ro-ai-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

    .ro-ai-chat__card-action:hover {
        color: #ffffff;
        background: var(--ro-ai-primary-hover);
        text-decoration: none;
        transform: translateY(-1px);
    }

/* Downloadable reference file link (see buildAttachmentAction in regionone-ai-chat.js). Deliberately
   lighter-weight than .ro-ai-chat__card-action - opening a reference document is a secondary, informational
   action, never the same visual priority as View/Register on a workshop card. */
.ro-ai-chat__attachment-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    margin-top: 10px;
    border-radius: 999px;
    padding: 6px 13px;
    color: var(--ro-ai-primary);
    background: #ffffff;
    border: 1.5px solid var(--ro-ai-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

    .ro-ai-chat__attachment-action:hover {
        color: #ffffff;
        background: var(--ro-ai-primary);
        text-decoration: none;
        transform: translateY(-1px);
    }

    .ro-ai-chat__attachment-action svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }

/* Step answers (numbered instruction answers) */

.ro-ai-chat__message--steps {
    white-space: normal;
}

.ro-ai-chat__step-intro {
    margin: 0 0 9px;
    white-space: pre-wrap;
}

.ro-ai-chat__steps {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    border: .5px solid rgba(21, 101, 192, .16);
    border-radius: 13px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 6px 14px rgba(13, 27, 62, .06);
}

.ro-ai-chat__step {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.ro-ai-chat__step-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--ro-ai-primary);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

.ro-ai-chat--expanded .ro-ai-chat__step-badge {
    width: 21px;
    height: 21px;
    font-size: 11px;
}

.ro-ai-chat__step-text {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 1px;
    color: var(--ro-ai-text);
    font-size: 12.5px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.ro-ai-chat--expanded .ro-ai-chat__step-text {
    font-size: 13px;
}

.ro-ai-chat__step-note {
    margin: 9px 0 0;
    color: var(--ro-ai-text-soft);
    font-size: 11.75px;
    line-height: 1.4;
    white-space: pre-wrap;
}

/* Sources */

.ro-ai-chat__sources {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px;
    border: .5px solid var(--ro-ai-border-soft);
    border-radius: 12px;
    background: var(--ro-ai-surface-secondary);
}

.ro-ai-chat__sources-title {
    color: var(--ro-ai-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.ro-ai-chat__source-link {
    display: block;
    border: .5px solid var(--ro-ai-border-soft);
    border-radius: 10px;
    padding: 8px 9px;
    color: var(--ro-ai-text);
    background: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}

    .ro-ai-chat__source-link:hover {
        border-color: rgba(21, 101, 192, .28);
        background: #fbfdff;
        text-decoration: none;
    }

.ro-ai-chat__source-type {
    display: block;
    margin-top: 2px;
    color: var(--ro-ai-text-muted);
    font-size: 10.5px;
    font-weight: 400;
}

/* Typing indicator */

.ro-ai-chat__typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 10px 12px;
    border: .5px solid var(--ro-ai-border-soft);
    border-radius: 6px 15px 15px 15px;
    background: var(--ro-ai-surface-secondary);
}

    .ro-ai-chat__typing span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--ro-ai-primary);
        animation: roAiChatTyping 1s infinite ease-in-out;
    }

        .ro-ai-chat__typing span:nth-child(2) {
            animation-delay: .14s;
        }

        .ro-ai-chat__typing span:nth-child(3) {
            animation-delay: .28s;
        }

@keyframes roAiChatTyping {
    0%, 80%, 100% {
        opacity: .30;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* Footer / input */

.ro-ai-chat__form {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 10px 12px 11px;
    border-top: .5px solid var(--ro-ai-border-soft);
    background: #ffffff;
}

.ro-ai-chat--expanded .ro-ai-chat__form {
    padding: 10px 14px 11px;
}

.ro-ai-chat__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
}

.ro-ai-chat__input-shell {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    border: .5px solid var(--ro-ai-border);
    border-radius: 14px;
    padding: 7px;
    background: var(--ro-ai-surface-secondary);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ro-ai-chat__input-shell:focus-within {
        border-color: rgba(21, 101, 192, .42);
        box-shadow: 0 0 0 3px rgba(21, 101, 192, .12);
    }

.ro-ai-chat__input {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    min-height: 34px;
    max-height: 110px;
    resize: none;
    border: 0;
    padding: 4px 2px;
    color: var(--ro-ai-text);
    background: transparent;
    font: inherit;
    font-size: 12.75px;
    line-height: 1.35;
    outline: none;
}

.ro-ai-chat--expanded .ro-ai-chat__input {
    min-height: 34px;
    font-size: 13px;
}

.ro-ai-chat__input:focus {
    outline: none;
}

.ro-ai-chat__input::placeholder {
    color: var(--ro-ai-text-muted);
}

.ro-ai-chat__send {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    background: var(--ro-ai-primary);
    cursor: pointer;
    font-size: 16px;
    font-weight: 650;
    line-height: 1 !important;
    text-align: center;
    box-shadow: none;
    transition: background .15s ease, transform .15s ease, opacity .15s ease;
}

    .ro-ai-chat__send:hover {
        background: var(--ro-ai-primary-hover);
        transform: translateY(-1px);
    }

    .ro-ai-chat__send:disabled {
        cursor: not-allowed;
        opacity: .55;
        transform: none;
    }

.ro-ai-chat__meta {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    min-height: 14px;
    margin: 6px 0 0 !important;
    padding: 0 2px;
    color: var(--ro-ai-text-muted);
    font-size: 10.75px;
    line-height: 1.2;
}

.ro-ai-chat__meta-primary {
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ro-ai-chat__counter {
    text-align: center;
    white-space: nowrap;
}

.ro-ai-chat__status {
    grid-column: 3;
    justify-self: end;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

    .ro-ai-chat__status:empty {
        display: none;
    }

.ro-ai-chat__clear {
    display: none;
}

.ro-ai-chat__disclosure {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ro-ai-text-muted);
    text-align: center;
}

/* Feedback footer trigger (opens the General Feedback modal - see that section below) */

.ro-ai-chat__feedback-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--ro-ai-primary);
    font: inherit;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px;
    margin: 0;
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
    transform: translate(-3px, -1.5px);
    transition: color .15s ease, background .15s ease;
}

    .ro-ai-chat__feedback-button:hover {
        color: var(--ro-ai-primary-hover);
        background: var(--ro-ai-surface-secondary);
    }

    .ro-ai-chat__feedback-button:focus-visible {
        outline: 2px solid var(--ro-ai-primary);
        outline-offset: 1px;
    }

    .ro-ai-chat__feedback-button-icon {
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }

.ro-ai-chat__feedback-button .ro-ai-chat__feedback-button-icon {
    transform: translateY(1px);
}

/* Widget Notices & Maintenance Banners */

.ro-ai-chat__notices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 0;
}

.roi-chat-notice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 34px 10px 12px;
    border: 1px solid var(--ro-ai-border);
    border-left: 4px solid var(--ro-ai-primary);
    border-radius: 8px;
    background: var(--ro-ai-surface-secondary);
    color: var(--ro-ai-text);
    font-size: 12.5px;
    line-height: 1.4;
}

    .roi-chat-notice__body {
        flex: 1 1 auto;
        min-width: 0;
    }

    .roi-chat-notice__title {
        font-weight: 600;
        margin-bottom: 2px;
    }

    .roi-chat-notice__message {
        color: var(--ro-ai-text-soft);
        white-space: pre-wrap;
        word-break: break-word;
    }

    .roi-chat-notice__close {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 22px;
        height: 22px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--ro-ai-text-muted);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
    }

        .roi-chat-notice__close:hover {
            background: rgba(13, 27, 62, .08);
            color: var(--ro-ai-text);
        }

/* Severity / style variants. styleKey or lowercased severity drives the class. */

.roi-chat-notice-info {
    border-left-color: #1a73e8;
    background: #e8f0fe;
    color: #174ea6;
}

.roi-chat-notice-success {
    border-left-color: #34a853;
    background: #e6f4ea;
    color: #0b6b2e;
}

.roi-chat-notice-warning {
    border-left-color: #f9ab00;
    background: #fef7e0;
    color: #7a5900;
}

.roi-chat-notice-maintenance {
    border-left-color: #5b6ee1;
    background: #eef0fb;
    color: #2a357d;
}

.roi-chat-notice-outage,
.roi-chat-notice-critical {
    border-left-color: #d93025;
    background: #fce8e6;
    color: #8c1d16;
}

    .roi-chat-notice-info .roi-chat-notice__message,
    .roi-chat-notice-success .roi-chat-notice__message,
    .roi-chat-notice-warning .roi-chat-notice__message,
    .roi-chat-notice-maintenance .roi-chat-notice__message,
    .roi-chat-notice-outage .roi-chat-notice__message,
    .roi-chat-notice-critical .roi-chat-notice__message {
        color: inherit;
        opacity: .85;
    }

/* Per-message Report (user feedback / safety on one specific response)
   Distinct from General Feedback below: this is tied to one message and reports it via the small
   "Report" pill under the assistant bubble. Shared modal chrome (backdrop/modal/close/header/title/
   subtitle/comment/actions/submit/cancel) lives in "Shared modal utilities" at the end of this file. */

.ro-ai-chat__report-action {
    margin-top: 4px;
}

.ro-ai-chat__report-button {
    appearance: none;
    border: 1px solid var(--ro-ai-border-soft);
    background: transparent;
    color: var(--ro-ai-text-muted);
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

    .ro-ai-chat__report-button .ro-ai-chat__feedback-button-icon {
        width: 12px;
        height: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 12px;
        margin: 0;
        transform: translateY(2px);
    }

    .ro-ai-chat__report-button .ro-ai-chat__feedback-button-svg {
        width: 11px;
        height: 11px;
        display: block;
    }

    .ro-ai-chat__report-button:hover:not(:disabled) {
        color: var(--ro-ai-danger);
        border-color: var(--ro-ai-danger);
        background: rgba(180, 35, 24, .06);
    }

    .ro-ai-chat__report-button:disabled {
        cursor: default;
        opacity: .7;
    }

.ro-ai-chat__report-snippet-wrap {
    margin-bottom: 14px;
    padding: 10px 11px;
    border: .5px solid var(--ro-ai-border-soft);
    border-radius: 11px;
    background: var(--ro-ai-surface-secondary);
}

.ro-ai-chat__report-snippet-label {
    margin-bottom: 3px;
    color: var(--ro-ai-text-muted);
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ro-ai-chat__report-snippet {
    margin: 0;
    color: var(--ro-ai-text-soft);
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
    word-break: break-word;
}

.ro-ai-chat__report-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.ro-ai-chat__report-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--ro-ai-border-soft);
    border-radius: 11px;
    color: var(--ro-ai-text);
    background: var(--ro-ai-surface);
    font-size: 12.75px;
    line-height: 1.3;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .ro-ai-chat__report-option:hover {
        border-color: rgba(21, 101, 192, .3);
        background: var(--ro-ai-surface-secondary);
    }

.ro-ai-chat__report-option-radio {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--ro-ai-primary);
    cursor: pointer;
}

.ro-ai-chat__report-option-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 1;
    color: var(--ro-ai-text-muted);
    transition: color .15s ease;
}

    .ro-ai-chat__report-option-icon svg {
        width: 14px;
        height: 14px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Red is reserved for "Something inappropriate" - every other reason icon stays neutral gray by
   default. Selected state (below) still wins and turns every icon blue regardless of this class. */
.ro-ai-chat__report-option-icon--danger {
    color: var(--ro-ai-danger);
}

.ro-ai-chat__report-option-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ro-ai-chat__report-option--selected {
    border-color: var(--ro-ai-primary);
    background: rgba(21, 101, 192, .09);
    color: var(--ro-ai-primary);
    font-weight: 650;
}

    .ro-ai-chat__report-option--selected .ro-ai-chat__report-option-icon {
        color: var(--ro-ai-primary);
    }

/* General Feedback (footer modal: 1-5 star rating + optional comment, never tied to one message) */

.ro-ai-chat__feedback-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.ro-ai-chat__feedback-rating-help {
    margin-bottom: 12px;
    color: var(--ro-ai-text-soft);
    font-size: 11.5px;
    line-height: 1.35;
}

.ro-ai-chat__feedback-star {
    appearance: none;
    border: none;
    background: transparent;
    color: #c5cfdd;
    line-height: 1;
    padding: 2px;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}

    .ro-ai-chat__feedback-star:hover {
        transform: scale(1.08);
    }

    .ro-ai-chat__feedback-star:focus-visible {
        outline: 2px solid var(--ro-ai-primary);
        outline-offset: 2px;
    }

    .ro-ai-chat__feedback-star--filled {
        color: #f2a900;
    }

.ro-ai-chat__feedback-selected-label {
    min-height: 18px;
    margin: -2px 0 4px;
    color: var(--ro-ai-text);
    font-size: 12px;
    font-weight: 700;
}

/* Shared modal utilities
   Report and Feedback are two different features (see the sections above), but their modal chrome -
   backdrop, shell, close button, navy header/title/subtitle, comment field, status line, actions row,
   and submit/cancel buttons - is intentionally identical, so it lives here once instead of twice. */

.ro-ai-chat__report-backdrop,
.ro-ai-chat__feedback-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 27, 62, .42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 20;
    border-radius: inherit;
}

.ro-ai-chat__report-modal,
.ro-ai-chat__feedback-modal {
    position: relative;
    width: 100%;
    max-width: 360px;
    max-height: 100%;
    overflow-y: auto;
    background: var(--ro-ai-surface);
    border: 1px solid var(--ro-ai-border);
    border-radius: 16px;
    box-shadow: var(--ro-ai-window-shadow);
    padding: 0 18px 16px;
    color: var(--ro-ai-text);
}

.ro-ai-chat__report-close,
.ro-ai-chat__feedback-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    appearance: none;
    border: none;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, .16);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

    .ro-ai-chat__report-close:hover,
    .ro-ai-chat__feedback-close:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, .24);
    }

.ro-ai-chat__report-header,
.ro-ai-chat__feedback-header {
    margin: 0 -18px 14px;
    padding: 16px 48px 14px 18px;
    color: #ffffff;
    background: var(--ro-ai-navy);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.ro-ai-chat__report-title,
.ro-ai-chat__feedback-title {
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.3;
    margin-bottom: 3px;
}

.ro-ai-chat__report-subtitle,
.ro-ai-chat__feedback-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, .82);
    line-height: 1.35;
}

.ro-ai-chat__report-comment-label,
.ro-ai-chat__feedback-comment-label {
    display: block;
    font-size: 12px;
    color: var(--ro-ai-text-soft);
    margin-bottom: 4px;
}

.ro-ai-chat__report-comment,
.ro-ai-chat__feedback-comment {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid var(--ro-ai-border);
    border-radius: 10px;
    padding: 9px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--ro-ai-text);
    background: var(--ro-ai-surface-secondary);
}

.ro-ai-chat__report-counter,
.ro-ai-chat__feedback-counter {
    margin-top: 3px;
    color: var(--ro-ai-text-muted);
    font-size: 10.5px;
    text-align: right;
}

.ro-ai-chat__report-status,
.ro-ai-chat__feedback-status {
    min-height: 16px;
    font-size: 12px;
    color: var(--ro-ai-danger);
    margin: 8px 0;
}

.ro-ai-chat__report-actions,
.ro-ai-chat__feedback-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.ro-ai-chat__report-submit,
.ro-ai-chat__report-cancel,
.ro-ai-chat__feedback-submit,
.ro-ai-chat__feedback-cancel {
    appearance: none;
    border-radius: 999px;
    padding: 9px 16px;
    font: inherit;
    font-size: 12.75px;
    font-weight: 650;
    cursor: pointer;
    border: 1px solid var(--ro-ai-border);
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.ro-ai-chat__report-submit,
.ro-ai-chat__feedback-submit {
    background: var(--ro-ai-primary);
    border-color: var(--ro-ai-primary);
    color: #fff;
}

    .ro-ai-chat__report-submit:hover:not(:disabled),
    .ro-ai-chat__feedback-submit:hover:not(:disabled) {
        background: var(--ro-ai-primary-hover);
        transform: translateY(-1px);
    }

    .ro-ai-chat__report-submit:disabled,
    .ro-ai-chat__report-cancel:disabled,
    .ro-ai-chat__feedback-submit:disabled,
    .ro-ai-chat__feedback-cancel:disabled {
        opacity: .55;
        cursor: default;
        transform: none;
    }

.ro-ai-chat__report-cancel,
.ro-ai-chat__feedback-cancel {
    background: var(--ro-ai-surface);
    color: var(--ro-ai-text-soft);
}

    .ro-ai-chat__report-cancel:hover:not(:disabled),
    .ro-ai-chat__feedback-cancel:hover:not(:disabled) {
        border-color: var(--ro-ai-border);
        background: var(--ro-ai-surface-secondary);
    }

.ro-ai-chat__icon-svg,
.ro-ai-chat__feedback-close-svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ro-ai-chat__feedback-button-svg {
    width: 12px;
    height: 12px;
    display: block;
    fill: currentColor;
}

.ro-ai-chat__feedback-star-svg {
    width: 28px;
    height: 28px;
    display: block;
    fill: currentColor;
}

/* Toast (used by both Report and Feedback success confirmations) */

.ro-ai-chat__toast {
    position: absolute;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    z-index: 22;
    background: var(--ro-ai-navy);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.35;
    padding: 9px 14px;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(13, 27, 62, .28);
    opacity: 1;
    transition: opacity .5s ease, transform .5s ease;
}

.ro-ai-chat__toast--out {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
}

/* Responsive */

@media (max-width: 760px) {
    .ro-ai-chat {
        right: 14px;
        bottom: 14px;
    }

    .ro-ai-chat__launcher {
        right: 16px;
        bottom: 16px;
        min-height: 44px;
        padding: 12px 22px 12px 15px;
    }

    .ro-ai-chat__panel,
    .ro-ai-chat--expanded .ro-ai-chat__panel {
        left: 14px;
        top: auto;
        right: auto;
        bottom: 74px;
        width: calc(100vw - 28px);
        height: calc(100vh - 96px);
        min-width: 0;
        min-height: 0;
        max-width: calc(100vw - 28px);
        max-height: calc(100vh - 96px);
        resize: none;
        border-radius: 16px;
    }

    .ro-ai-chat--expanded .ro-ai-chat__messages,
    .ro-ai-chat__messages {
        padding: 13px;
        gap: 12px;
    }

    .ro-ai-chat--expanded .ro-ai-chat__message-shell,
    .ro-ai-chat__message-shell {
        max-width: 94%;
    }

    .ro-ai-chat--expanded .ro-ai-chat__message-shell--welcome,
    .ro-ai-chat__message-shell--welcome {
        max-width: 100%;
    }

    .ro-ai-chat--expanded .ro-ai-chat__message,
    .ro-ai-chat__message {
        font-size: 13px;
        line-height: 1.45;
        padding: 10px 12px;
    }

    .ro-ai-chat--expanded .ro-ai-chat__message--welcome,
    .ro-ai-chat__message--welcome {
        padding: 12px 13px !important;
    }

    .ro-ai-chat--expanded .ro-ai-chat__form,
    .ro-ai-chat__form {
        padding: 10px 12px 11px;
    }

    .ro-ai-chat__steps {
        padding: 9px;
        gap: 6px;
    }

    .ro-ai-chat--expanded .ro-ai-chat__step-text,
    .ro-ai-chat__step-text {
        font-size: 12.5px;
    }

    .ro-ai-chat__report-modal,
    .ro-ai-chat__feedback-modal {
        max-width: 100%;
        padding: 0 14px 14px;
    }

    .ro-ai-chat__report-option {
        padding: 8px 9px;
    }

    .ro-ai-chat__feedback-button {
        font-size: 10.5px;
    }
}

@media (max-width: 460px) {
    :root {
        --ro-ai-header-h: 60px;
    }

    .ro-ai-chat__header {
        padding: 8px 10px !important;
    }

    .ro-ai-chat__avatar {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .ro-ai-chat__avatar .ro-ai-chat__sparkle-icon {
        width: 22px;
        height: 22px;
    }

    .ro-ai-chat__title {
        font-size: 12.5px;
    }

    .ro-ai-chat__subtitle {
        max-width: 190px;
        font-size: 10px;
    }

    .ro-ai-chat__icon-button {
        width: 29px !important;
        height: 29px !important;
        min-width: 29px !important;
        min-height: 29px !important;
    }

    .ro-ai-chat__quick-actions {
        align-items: stretch;
    }

    .ro-ai-chat__quick-action {
        max-width: 100%;
        justify-content: center !important;
    }
}