/* ============================================================================================
   fa-assistant - the in-page Feedalto Assistant (wwwroot/js/fa-assistant.js).

   A panel docked to the right of the page on a desktop - the page stays usable beside it, because the
   Assistant points at and works on that page - and a bottom sheet on a phone-width browser. Above the
   "?" beacon (1040), below the tour's spotlight and card (1070+), so a spotlight it asks for is never
   hidden behind it.
   ============================================================================================ */

/* Scoped: this file loads on every page, and a global [hidden] rule could hide something a page shows
   by setting display itself. */
.fa-as-panel [hidden] { display: none !important; }

:root {
    --fa-as-w: 380px;
    --fa-as-ink: #0d1b3e;
    --fa-as-body: #3a4252;
    --fa-as-muted: #5b6475;
    --fa-as-line: #e7eaf0;
    --fa-as-soft: #f6f8fb;
    --fa-as-blue: #1b4fbc;
    --fa-as-green: #1e7b3a;
    --fa-as-amber: #8a4b00;
    --fa-as-red: #b42318;
}

/* ── The button, stacked above "?" ─────────────────────────────────────────────────────────── */
.fa-as-launch {
    position: fixed; right: 18px; bottom: 74px; z-index: 1040;
    width: 46px; height: 46px; border-radius: 50%; border: 0;
    background: linear-gradient(135deg, #0d1b3e 0%, #143a8c 100%); color: #fff;
    font-size: 19px; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 18px rgba(13, 27, 62, .35);
    transition: transform .16s ease, box-shadow .16s ease;
}
.fa-as-launch:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13, 27, 62, .45); }
.fa-as-launch:focus-visible { outline: 3px solid #9ec5fe; outline-offset: 2px; }
.fa-as-launch.fa-as-on { background: #f59e0b; }

/* ── The panel ─────────────────────────────────────────────────────────────────────────────── */
.fa-as-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050;
    width: var(--fa-as-w); max-width: 100vw;
    display: flex; flex-direction: column;
    background: #fff; color: var(--fa-as-body);
    border-left: 1px solid var(--fa-as-line);
    box-shadow: -10px 0 28px rgba(16, 22, 33, .14);
    transform: translateX(105%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
}
.fa-as-panel.fa-as-in { transform: none; visibility: visible; transition: transform .2s ease; }

/* Wide screens: the page makes room, so nothing it shows is hidden behind the panel. */
@media (min-width: 1200px) {
    body.fa-as-docked { padding-right: var(--fa-as-w); }
    body.fa-as-docked .fa-g-beacon,
    body.fa-as-docked .fa-as-launch { right: calc(var(--fa-as-w) + 18px); }
}

/* Phone-width browser: a bottom sheet, leaving the top of the page visible. */
@media (max-width: 767.98px) {
    .fa-as-panel {
        top: auto; left: 0; width: 100vw; height: 72vh;
        border-left: 0; border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 28px rgba(16, 22, 33, .2);
        transform: translateY(105%);
    }
}

.fa-as-head {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 12px 10px 16px; color: #fff;
    background: linear-gradient(135deg, #0d1b3e 0%, #143a8c 100%);
}
@media (max-width: 767.98px) { .fa-as-head { border-radius: 20px 20px 0 0; } }
.fa-as-titles { flex: 1 1 auto; min-width: 0; }
.fa-as-kicker { font-size: .68rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: #ffb27a; }
.fa-as-where { font-weight: 700; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-as-hbtn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; cursor: pointer;
}
.fa-as-hbtn:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.fa-as-hbtn:focus-visible { outline: 2px solid #9ec5fe; outline-offset: 1px; }

.fa-as-thread { flex: 1 1 auto; overflow-y: auto; padding: 14px; background: var(--fa-as-soft); }
.fa-as-line { display: flex; margin-bottom: .55rem; }
.fa-as-you { justify-content: flex-end; }
.fa-as-bubble {
    max-width: 86%; padding: .55rem .8rem; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere;
    background: #fff; border: 1px solid var(--fa-as-line); color: var(--fa-as-ink); font-size: .93rem;
}
.fa-as-you .fa-as-bubble { background: var(--fa-as-blue); border-color: var(--fa-as-blue); color: #fff; }
.fa-as-typing .fa-as-bubble { color: var(--fa-as-muted); letter-spacing: .2em; }

.fa-as-card {
    background: #fff; border: 1px solid var(--fa-as-line); border-left: 4px solid var(--fa-as-blue);
    border-radius: 12px; padding: .6rem .75rem; margin: 0 0 .6rem;
}
.fa-as-card.fa-as-tone-success { border-left-color: var(--fa-as-green); }
.fa-as-card.fa-as-tone-warning { border-left-color: #d97706; }
.fa-as-card.fa-as-tone-danger { border-left-color: var(--fa-as-red); }
.fa-as-card-title { font-weight: 700; color: var(--fa-as-ink); font-size: .92rem; }
.fa-as-card-sub { color: var(--fa-as-muted); font-size: .84rem; margin-top: 2px; }
.fa-as-item { margin-top: .4rem; }
.fa-as-item-title { font-weight: 650; font-size: .86rem; color: var(--fa-as-blue); }
.fa-as-item.fa-as-tone-success .fa-as-item-title { color: var(--fa-as-green); }
.fa-as-item.fa-as-tone-warning .fa-as-item-title { color: var(--fa-as-amber); }
.fa-as-item.fa-as-tone-danger .fa-as-item-title { color: var(--fa-as-red); }
.fa-as-item-sub { color: var(--fa-as-muted); font-size: .8rem; }
.fa-as-item-link { font-size: .8rem; }
.fa-as-card-link { margin-top: .5rem; }

.fa-as-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.fa-as-chips:empty { display: none; }
.fa-as-chip {
    border: 1px solid var(--fa-as-line); background: #fff; color: var(--fa-as-body);
    border-radius: 16px; padding: 4px 10px; font-size: .8rem; cursor: pointer; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fa-as-chip:hover { border-color: var(--fa-as-blue); color: var(--fa-as-blue); }

.fa-as-alert { margin: 8px 12px 0; padding: .45rem .7rem; border-radius: 10px; background: #fdecea; color: var(--fa-as-red); font-size: .85rem; }

.fa-as-ask { display: flex; gap: 6px; align-items: flex-end; padding: 10px 12px 4px; }
.fa-as-box { resize: none; min-height: 40px; max-height: 120px; font-size: .93rem; }
.fa-as-mic, .fa-as-send { flex: 0 0 auto; width: 42px; height: 40px; padding: 0; border-radius: 10px; }
.fa-as-mic { background: #fff; color: var(--fa-as-blue); border: 1px solid var(--fa-as-line); }
.fa-as-mic.is-listening { background: #d92d20; border-color: #d92d20; color: #fff; animation: fa-as-pulse 1.4s ease-in-out infinite; }
@keyframes fa-as-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .45); } 50% { box-shadow: 0 0 0 6px rgba(217, 45, 32, 0); } }
@media (prefers-reduced-motion: reduce) { .fa-as-mic.is-listening { animation: none; } .fa-as-panel { transition: none; } }

.fa-as-hint { color: var(--fa-as-muted); font-size: .8rem; margin: 2px 14px 0; }
.fa-as-foot { padding: 6px 14px 12px; border-top: 1px solid var(--fa-as-line); margin-top: 6px; }
.fa-as-speak { font-size: .8rem; color: var(--fa-as-muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.fa-as-disclaimer { font-size: .72rem; color: var(--fa-as-muted); margin: 4px 0 0; }

@media print { .fa-as-launch, .fa-as-panel { display: none !important; } }