/* ============================================================
   SITE FOOTER: INPUT FRAME INSIDE STICKY FOOTER
   ============================================================ */

/* Outer frame around the message input in the footer */
.footer-frame {
    background: #ffffff; /* white card on gray band */
    border: 1px solid var(--color-soft-cyan); /* subtle accent border */
    border-radius: 24px;
    padding: 12px 12px;
    display: block;
    width: 100%;
}

    /* Prevent bootstrap .btn from reintroducing borders inside the frame */
    .footer-frame .btn-app,
    .footer-frame .btn-app-primary {
        border: none;
        box-shadow: none;
    }

/* Form inside the footer: simple horizontal flex row */
.sticky-footer .footer-send-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
}

    /* Let the Fluent text-area take all remaining space */
    .sticky-footer .footer-send-form fluent-text-area.footer-input {
        flex: 1 1 auto;
        min-width: 0;
    }

.sticky-footer fluent-text-area.footer-input::part(control) {
    min-height: 32px;  
    max-height: 120px; /* still cap it if you like */
    resize: none;
    font-size: 16px;
    line-height: 1.4;
}