/* ================================================================
   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;
    /* Shared content gutter. Every major text surface - trust bar, message list, composer, and the footer
       notices - starts and ends on this inset so the widget reads as one column rather than several
       independently-padded strips. Two tokens rather than one because the footer is visually tighter than
       the conversation area; anything beyond these two would be abstraction for its own sake. */
    --ro-ai-panel-gutter: 14px;
    --ro-ai-footer-gutter: 12px;
}

/* 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;
}

/* Shared keyboard focus indicator.
   This was `3px solid rgba(21, 101, 192, .22)`, which composites to rgb(203,221,241) on a white host page -
   1.38:1, far below the 3:1 that WCAG 2.1 SC 1.4.11 requires of a focus indicator, and effectively invisible
   on the launcher a keyboard user must find first. The colour is now fully opaque (5.75:1 on white), and a
   white outer ring is layered behind it via box-shadow so the indicator also stays visible against the navy
   header and the primary-blue send button, where a blue ring alone would disappear.
   The offset stays positive so the ring is never drawn over the control's own label. */
.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: 2px solid var(--ro-ai-primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .95) !important;
}

    /* Pointer users keep the previous quiet appearance; keyboard users get the ring above. Declared after
       the :focus rule so engines that understand :focus-visible win, and engines that do not simply keep
       the always-on ring rather than losing focus indication entirely. */
    .ro-ai-chat__launcher:focus:not(:focus-visible),
    .ro-ai-chat__icon-button:focus:not(:focus-visible),
    .ro-ai-chat__send:focus:not(:focus-visible),
    .ro-ai-chat__quick-action:focus:not(:focus-visible),
    .ro-ai-chat__source-link:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }

/* 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;
    /* Per CSS 2.1 §10.7 min-height WINS over max-height, so a bare `min-height: 440px` overrode the
       max-height below on a short or zoomed viewport: the panel was forced to 440px, and because it is
       anchored from the bottom its top edge moved ABOVE the viewport - taking the header, the status bar and
       most of the required AI disclosure off screen with no way to scroll to them. Clamping the minimum to
       the space actually available keeps the panel fully on screen at every zoom level. */
    min-height: min(440px, calc(100vh - 96px));
    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);
}

/* Combined trust + AI disclosure bar
   ---------------------------------
   This replaces two previously separate bands - a green "approved information" status strip and a taller AI
   disclosure block - with one compact bar. Both pieces of required content survive: line one identifies the
   assistant and its information source, line two states in plain language that responses are AI-generated.
   The result is roughly one band of vertical chrome instead of two, with nothing removed.

   The declarations that make this a DISCLOSURE - that it is displayed at all, at a readable size, in a
   readable colour - are !important for the same documented reason the header block is (see the note above
   .ro-ai-chat__header): the widget renders into the host page's light DOM with no shadow root, so a host
   stylesheet or a future OmniTrack theme could otherwise hide, shrink, or grey out a legally required
   notice with no error anywhere. Cosmetic properties (gap, padding, radius) are left overridable.

   Colour: --ro-ai-text-soft is #5f6677 on white = 5.75:1, clearing WCAG 2.1 AA for normal text. Do not
   switch this to --ro-ai-text-muted (3.21:1), which fails.

   flex: 0 0 auto keeps the panel's flex column intact so the scrollable message list absorbs the height. */

/* Icon column + text column. `align-items: flex-start` keeps the icon on the first line's optical baseline
   while the text column owns BOTH lines, so line one and line two share one starting x-coordinate. */
.ro-ai-chat__trust {
    flex: 0 0 auto;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: flex-start;
    gap: 7px;
    padding: 6px var(--ro-ai-panel-gutter) 7px;
    border-bottom: .5px solid var(--ro-ai-border-soft);
    background: var(--ro-ai-surface-secondary) !important;
    color: var(--ro-ai-text-soft) !important;
    font-size: 11px !important;
    line-height: 1.3;
}

.ro-ai-chat__trust-icon {
    flex: 0 0 auto;
    display: block;
    width: 12px;
    /* Optical centring against the first text line rather than the whole block. */
    margin-top: 1px;
    color: var(--ro-ai-primary);
}

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

/* The single text column. The whole disclosure is one inline flow here, so it sits on one line at the normal
   expanded width and wraps naturally when narrow - and because this column is a flex sibling of the icon,
   a wrapped line starts under the first character rather than under the icon. */
.ro-ai-chat__trust-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

/* The complete visible disclosure - one short statement, deliberately styled the way the earlier two-part
   badge was (bold, primary colour) so it still reads as the widget's identity line rather than as an
   ordinary caption. Wraps naturally at narrow widths - no nowrap, and no separate small-width wording. */
.ro-ai-chat__trust-statement {
    color: var(--ro-ai-primary) !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Messages */

.ro-ai-chat__messages {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    /* Same horizontal gutter as the trust bar above, so the conversation column and the disclosure share
       one starting edge. */
    padding: 14px var(--ro-ai-panel-gutter);
    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 var(--ro-ai-footer-gutter) 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;
    /* Kept in step with INPUT_MAX_HEIGHT in regionone-ai-chat.js. */
    max-height: 110px;
    resize: none;
    /* No idle scrollbar on an empty composer - an unused scrollbar beside the send button reads as a broken
       control. autoSizeInput() switches this to `auto` the moment content genuinely exceeds max-height, so
       long input remains scrollable rather than stranded. */
    overflow-y: hidden;
    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;
    }

/* Footer toolbar.
   ================
   Feedback is centred against the FULL toolbar width, not against the space left over between its
   neighbours. It gets there by spanning every column and centring inside that span, rather than by sitting
   in a middle `auto` track between two `1fr` tracks. The `1fr auto 1fr` form was tried first and is not
   good enough here: equal outer tracks make the LEFT column as wide as the RIGHT one, so the documents get
   only half the free space. Measured, the documents need 152px on one line while the counter needs 39px, so
   symmetric tracks demand 2x152 + 70 + 24 = 398px of toolbar width. The default panel offers 354px, and the
   documents wrapped to two lines with the separator left dangling at the end of the first.

   So the counter and the documents are placed on their own tracks and pushed to the outer edges, and
   Feedback floats centred across the whole row independently of both. Their combined intrinsic width
   (39 + 70 + 152 + gaps = 285px) fits inside 354px, so nothing collides.

   Documents start on their own row and are promoted onto the toolbar row only when the footer is actually
   wide enough to hold them beside a centred button - see the @container rule below. */
.ro-ai-chat__meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 3px var(--ro-ai-footer-gutter);
    min-height: 14px;
    margin: 5px 0 0 !important;
    padding: 0;
    color: var(--ro-ai-text-muted);
    font-size: 10.75px;
    line-height: 1.2;
}

.ro-ai-chat__counter {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    white-space: nowrap;
}

/* Spans the full row and centres inside that span - this is what makes it centred in the WIDGET. */
.ro-ai-chat__meta-primary {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

/* One shared gap spaces the separator identically on both sides, so the dot reads as part of a group
   rather than as a floating character. */
.ro-ai-chat__doc-links {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: end;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px 7px;
    min-width: 0;
}

/* The footer is the query container, NOT the panel: the report and feedback modals are appended inside
   .ro-ai-chat__panel, and giving the panel a container-type would make it the containing block for their
   fixed positioning. The form has no such descendants and its inline size tracks the panel exactly. */
.ro-ai-chat__form {
    container-type: inline-size;
    container-name: ro-ai-chat-footer;
}

/* Promote the documents onto the toolbar row once the footer can actually hold them beside a centred
   button. 410px is measured, not guessed: the documents need 152px at the right edge and the centred button
   occupies the middle 70px, so the button's right edge lands at 240px and the documents begin at 258px -
   18px of clearance. Below this the documents keep their own row, which is also what a browser without
   container-query support gets, and that fallback is a tidy two-row footer rather than a broken one. */
@container ro-ai-chat-footer (min-width: 410px) {

    .ro-ai-chat__doc-links {
        grid-row: 1;
        grid-column: 2;
    }
}

/* The live status region spans the full row beneath the toolbar and collapses when empty, so it never
   reserves space or pushes the three columns out of alignment. */
.ro-ai-chat__status {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

    /* Collapses when empty so it never reserves a row beneath the toolbar. */
    .ro-ai-chat__status:empty {
        display: none;
    }


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

/* Public AI compliance document links (AI System Facts / AI Notice)
   Underlined as well as colored, so they are distinguishable without relying on color alone (WCAG 1.4.1).
   #1565c0 on the form's white background is 5.75:1, clearing AA for normal text. The widget renders into
   the host page's light DOM with no shadow root, so the properties that carry the affordance are marked
   !important for the same reason the header block is - a host stylesheet must not be able to strip the
   underline or recolor the link into invisibility. */

/* The two documents share the toolbar's right-hand grid cell; that cell's layout lives in
   .ro-ai-chat__doc-links above. Only the link affordance itself lives here. */

.ro-ai-chat__doc-link {
    display: inline-block;
    /* Vertical padding lifts the hit area from ~15px to ~25px so the links clear the WCAG 2.2 target-size
       minimum and cannot be mis-tapped into the adjacent Feedback button on touch. Negative margin keeps the
       added padding from changing the visual spacing of the footer. */
    padding: 5px 4px;
    margin: -5px 0;
    color: var(--ro-ai-primary) !important;
    font-size: 11px !important;
    text-decoration: underline !important;
    border-radius: 3px;
}

    .ro-ai-chat__doc-link:hover,
    .ro-ai-chat__doc-link:active {
        color: var(--ro-ai-primary-hover) !important;
        text-decoration: underline !important;
    }

    /* A visible, high-contrast focus ring - the links must be usable by keyboard alone.
       :focus is declared FIRST as the fallback: engines that do not understand :focus-visible discard that
       rule as an invalid selector, and the host page's Bootstrap 3 would otherwise supply the only focus
       style - a 1px dotted ring with outline-offset:-2px, drawn INSIDE the link and over its own text.
       Browsers that do support :focus-visible apply the second rule and suppress the ring for mouse users. */
    .ro-ai-chat__doc-link:focus {
        outline: 2px solid var(--ro-ai-primary) !important;
        outline-offset: 1px !important;
    }

    .ro-ai-chat__doc-link:focus:not(:focus-visible) {
        outline: none !important;
    }

    .ro-ai-chat__doc-link:focus-visible {
        outline: 2px solid var(--ro-ai-primary) !important;
        outline-offset: 1px !important;
    }

.ro-ai-chat__doc-link-separator {
    color: var(--ro-ai-text-muted);
}

/* Visually hidden but announced - same technique as .ro-ai-chat__label. Used for the "(opens in a new tab)"
   hint so the visible link text remains the start of the accessible name (WCAG 2.5.3 Label in Name). */
.ro-ai-chat__link-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
}

/* Required AI limitation disclaimer.
   CENTRED. The wording was shortened ("AI may make mistakes. Verify important information in <app>.") for
   this release specifically so it could be centred without the earlier ragged-wrap problem: the previous,
   longer sentence wrapped to two uneven lines at ordinary panel widths, and centring THAT text looked
   ragged, which is why it was left-aligned in the prior pass. This shorter text wraps evenly (verified at
   340/380/420/520px), so centring now reads as intended - subordinate, and visually paired with the
   logging notice below it rather than lined up with the composer above.

   Uses --ro-ai-text-soft rather than the lighter --ro-ai-text-muted so that a required accuracy warning
   meets AA contrast (5.75:1) instead of the ~3.2:1 the muted token would give. */
.ro-ai-chat__ai-limitations {
    margin-top: 7px !important;
    display: block !important;
    visibility: visible !important;
    font-size: 11px !important;
    line-height: 1.4;
    color: var(--ro-ai-text-soft) !important;
    text-align: center;
}

/* Privacy/logging notice. The WORDING is fixed compliance text and is unchanged; only the colour token
   moved. --ro-ai-text-muted (#8790a3) is 3.21:1 on white and fails WCAG 1.4.3 for normal text;
   --ro-ai-text-soft (#5f6677) is 5.75:1 and passes. This notice sits beside the AI limitation disclaimer,
   which already uses the darker token, so this also removes the visual demotion between two notices that
   carry equal weight. */
.ro-ai-chat__disclosure {
    /* CENTRED, deliberately unlike the disclaimer above it. This is a short single line at every supported
       width, so it does not develop a ragged wrapped edge, and centring reads as the closing line of the
       panel rather than as a second paragraph of the disclaimer. The small gap keeps the two readable as two
       separate statements. Wording is fixed compliance text and is not changed here. */
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ro-ai-text-soft);
    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;
    }
}

/* Compliance chrome on small screens
   The two breakpoints above tune every other band of the widget but had no rule for the AI disclosure, the
   document links, or the AI limitation disclaimer. Without these, the fixed chrome grows while the panel
   shrinks (the panel is overflow:hidden, so the overflow is clipped rather than scrolled) and the required
   disclaimer can be pushed off the bottom of a short or zoomed viewport. These rules keep the required text
   present and legible while giving the message list back as much room as possible. Font sizes are held at
   or above 11px - shrinking a legal notice to win layout space would be exactly the wrong trade. */

@media (max-width: 760px) {

    .ro-ai-chat__trust {
        gap: 3px 6px;
        padding: 6px 12px 7px;
        line-height: 1.3;
    }

    .ro-ai-chat__meta {
        margin-top: 5px !important;
    }

    .ro-ai-chat__ai-limitations {
        margin-top: 6px !important;
        line-height: 1.35;
    }
}

@media (max-width: 460px) {

    /* Match the header's tighter horizontal inset at this breakpoint so the disclosure text lines up with
       the header content above it instead of sitting 4px further in. */
    .ro-ai-chat__trust {
        padding: 6px 10px 7px;
    }

    /* The two-row footer is now the default at every width, so this breakpoint only widens the touch
       spacing between the two documents. */
    .ro-ai-chat__doc-links {
        gap: 2px 10px;
    }

    /* A larger tap target matters more on touch, not less. */
    .ro-ai-chat__doc-link {
        padding: 6px 6px;
        margin: -6px 0;
    }
}

/* SCROLL OWNERSHIP
   ================
   The conversation area is the ONLY scrollable region. The composer and everything below it - the toolbar,
   the AI limitation notice, and the logging notice - stay visible at all times.

   Why this is spelled out: an earlier revision gave the footer `flex: 0 1 auto; overflow-y: auto` so that
   nothing could be clipped at high zoom. That solved clipping but created a worse problem - the composer and
   the compliance notices became an independently scrollable strip, so a user with a long result list had to
   scroll the footer itself to reach the input. Required content that you must scroll a secondary region to
   find is barely better than content that is clipped.

   The priority when vertical space runs short is therefore, in order:
     1. the conversation area shrinks,
     2. the conversation area scrolls,
     3. the composer and footer stay visible.
   Only when the panel is physically too short to hold the fixed chrome at all does the footer fall back to
   scrolling itself - see the max-height block at the end of this section. */

.ro-ai-chat__form {
    /* Never shrinks and never scrolls in ordinary use: the composer and the compliance notices below it are
       always on screen. Scrolling belongs to .ro-ai-chat__messages. */
    flex: 0 0 auto;
    overflow: visible;
}

@media (max-height: 620px) {

    /* Reclaim vertical space from decoration before anything compliance-bearing has to give. */
    .ro-ai-chat__trust {
        padding: 5px var(--ro-ai-panel-gutter) 6px;
        line-height: 1.3;
    }

    .ro-ai-chat__messages {
        padding: 10px var(--ro-ai-panel-gutter);
        gap: 9px;
    }

    .ro-ai-chat__form {
        padding: 8px var(--ro-ai-footer-gutter) 9px;
    }

    .ro-ai-chat__meta,
    .ro-ai-chat__ai-limitations {
        margin-top: 5px !important;
    }

    .ro-ai-chat__disclosure {
        margin-top: 5px;
    }
}

@media (max-height: 400px) {

    /* LAST RESORT ONLY.
       Below roughly 400px of viewport height the panel cannot hold the fixed chrome even with the
       conversation area collapsed - a 1366x768 laptop at 200% zoom, or a small landscape phone. Clipping
       required compliance text is not an option, so here, and only here, the footer becomes scrollable so
       every notice remains reachable. At every ordinary desktop and tablet size the footer is fixed. */
    /* The conversation list yields FIRST and yields ALL the way to its 48px floor. A bare `min-height` was
       not enough: .ro-ai-chat__messages is `flex: 1 1 auto`, so it still grew into the free space and left
       the composer with 33px of a 157px footer - a nearly unusable scroll stub, and the exact inversion of
       the priority order documented above. Pinning the basis makes the list take 48px and no more. */
    .ro-ai-chat__messages {
        flex: 0 0 auto;
        height: 48px;
        min-height: 48px;
    }

    /* The footer takes everything the list gave up, and only scrolls for whatever still does not fit. */
    .ro-ai-chat__form {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}