.cinformabot-backdrop {
    position: fixed;
    inset: 0;

    z-index: 91;

    background:
        rgba(16, 24, 40, 0.28);
}

.cinformabot-backdrop[hidden] {
    display: none;
}


.cinformabot-drawer {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 92;

    width: 100%;
    max-width: 460px;

    display: flex;
    flex-direction: column;

    background:
        var(--surface);

    border-left:
        1px solid var(--border);

    box-shadow:
        -18px 0 50px
        rgba(16, 24, 40, 0.14);
}

.cinformabot-drawer[hidden] {
    display: none;
}


.cinformabot-header {
    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding:
        max(
            14px,
            env(safe-area-inset-top)
        )
        16px
        12px;

    border-bottom:
        1px solid var(--border);
}

.cinformabot-heading {
    min-width: 0;
}

.cinformabot-heading p {
    margin:
        0 0 3px;

    color:
        var(--primary);

    font-size:
        0.66rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;
}

.cinformabot-heading h2 {
    margin: 0;

    font-size:
        1.15rem;
}


.cinformabot-body {
    flex:
        1 1 auto;

    min-height:
        0;

    overflow-y:
        auto;

    padding:
        16px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.cinformabot-welcome {
    padding:
        14px;

    border:
        1px solid var(--border);

    border-radius:
        14px;

    background:
        var(--surface-soft);
}

.cinformabot-welcome strong {
    display:
        block;

    margin-bottom:
        5px;
}

.cinformabot-welcome p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.86rem;

    line-height:
        1.45;
}


.cinformabot-message {
    max-width:
        88%;

    padding:
        10px 12px;

    border-radius:
        14px;

    font-size:
        0.88rem;

    line-height:
        1.45;

    white-space:
        pre-wrap;
}

.cinformabot-message-user {
    align-self:
        flex-end;

    background:
        var(--surface);

    color:
        var(--text);

    border:
        2px solid var(--primary);

    font-weight:
        600;
}

.cinformabot-message-bot {
    align-self:
        flex-start;

    border:
        1px solid var(--border);

    background:
        var(--surface-soft);

    color:
        var(--text);
}


.cinformabot-result-list {
    display:
        grid;

    gap:
        8px;

    margin-top:
        8px;
}

.cinformabot-result-card {
    padding:
        10px;

    border:
        1px solid var(--border);

    border-radius:
        11px;

    background:
        var(--surface);
}

.cinformabot-result-card strong {
    display:
        block;

    margin-bottom:
        3px;
}

.cinformabot-result-card small {
    display:
        block;

    color:
        var(--muted);
}


.cinformabot-status {
    min-height:
        20px;

    color:
        var(--muted);

    font-size:
        0.76rem;
}


.cinformabot-form {
    flex:
        0 0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        8px;

    padding:
        12px
        14px
        max(
            12px,
            env(safe-area-inset-bottom)
        );

    border-top:
        1px solid var(--border);

    background:
        var(--surface);
}

.cinformabot-input {
    min-width:
        0;

    min-height:
        44px;

    padding:
        10px 12px;

    border:
        1px solid var(--border);

    border-radius:
        11px;

    background:
        var(--surface);

    color:
        var(--text);

    font:
        inherit;
}

.cinformabot-input:focus {
    outline:
        2px solid
        var(--primary);

    outline-offset:
        1px;
}

.cinformabot-send {
    min-height:
        44px;

    padding:
        0 15px;

    border:
        0;

    border-radius:
        11px;

    background:
        var(--primary);

    color:
        white;

    font-weight:
        800;

    cursor:
        pointer;
}

.cinformabot-send:disabled {
    opacity:
        0.55;

    cursor:
        default;
}


@media (min-width: 700px) {
    .cinformabot-drawer {
        top:
            var(--topbar-height);

        right:
            18px;

        bottom:
            18px;

        width:
            min(
                440px,
                calc(
                    100vw - 36px
                )
            );

        max-width:
            440px;

        border:
            1px solid var(--border);

        border-radius:
            var(--radius-lg);

        overflow:
            hidden;

        box-shadow:
            var(--shadow);
    }

    .cinformabot-header {
        padding:
            14px 16px;
    }
}


@media (
    prefers-reduced-motion:
    reduce
) {
    .cinformabot-drawer {
        transition:
            none;
    }
}


/* ==========================================================
   CinformaBot guided conversation
   CA-2C.3J.5-A8-B3
   ========================================================== */

.cinformabot-option-list {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        9px;
}


.cinformabot-option-button {
    min-height:
        36px;

    max-width:
        100%;

    padding:
        7px 10px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        var(--surface);

    color:
        var(--text);

    font:
        inherit;

    font-size:
        0.8rem;

    font-weight:
        700;

    line-height:
        1.25;

    text-align:
        left;

    cursor:
        pointer;
}


.cinformabot-option-button:hover:not(:disabled) {
    border-color:
        var(--primary);
}


.cinformabot-option-button:focus-visible {
    outline:
        2px solid var(--primary);

    outline-offset:
        2px;
}


.cinformabot-option-action {
    border-color:
        var(--primary);

    color:
        var(--primary);
}


.cinformabot-option-button:disabled {
    opacity:
        0.5;

    cursor:
        default;
}


.cinformabot-input:disabled {
    opacity:
        0.7;
}


/* ==========================================================
   CinformaBot · authenticated GO student result cards
   P9-F4
   ========================================================== */

.cinformabot-student-card {
    display:
        grid;

    gap:
        4px;
}


.cinformabot-student-status {
    font-weight:
        700;
}


.cinformabot-student-score {
    color:
        var(--text)
        !important;

    font-weight:
        800;
}


.cinformabot-student-feedback {
    margin-top:
        5px;

    padding-top:
        6px;

    border-top:
        1px solid
        var(--border);

    color:
        var(--text);

    font-size:
        0.8rem;

    line-height:
        1.4;

    white-space:
        pre-wrap;
}


/* ==========================================================
   CinformaBot · authenticated facilitator result cards
   P9-G4
   ========================================================== */

.cinformabot-facilitator-card {
    display:
        grid;

    gap:
        4px;
}


.cinformabot-facilitator-assignment {
    color:
        var(--text)
        !important;

    font-weight:
        700;
}


.cinformabot-facilitator-status {
    font-weight:
        700;
}


.cinformabot-facilitator-highlight {
    margin-top:
        4px;

    padding:
        7px 9px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    background:
        var(--surface-soft);

    color:
        var(--text);

    font-size:
        0.8rem;

    font-weight:
        800;
}


.cinformabot-facilitator-summary {
    display:
        grid;

    gap:
        5px;

    margin-top:
        7px;
}


.cinformabot-facilitator-summary-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        5px 0;

    border-bottom:
        1px solid
        var(--border);

    font-size:
        0.8rem;
}


.cinformabot-facilitator-summary-row:last-child {
    border-bottom:
        0;
}


.cinformabot-facilitator-summary-row strong {
    margin:
        0;

    font-size:
        0.85rem;
}