/* ============================================================
   SHARED · FeedbackWidget styles  (pairs with feedback-widget.js)

   Ported from the APPROVED prototype (arcanium-dot-living.html).
   The SVG geometry, gradient, easing curves, and durations are
   locked — every animation/transition value below is verbatim from
   the prototype. Only these structural adaptations were made:
     - class names namespaced .fbw-* (prototype used .seed/.panel/
       .chip etc., too generic for the global stylesheet)
     - den/panel are position:fixed (prototype staged them absolute
       inside a mock page)
     - color tokens scoped to .fbw-root instead of :root
     - prefers-reduced-motion scoped to the widget, not the page
     - small additions the prototype lacked: disabled Send state and
       the error/rate-limit line
   The demo-only bits (Cards due toggle, stage mock, Attach screen)
   are omitted — screenshot capture is out of scope by design.
   ============================================================ */

.fbw-root {
    --fbw-ink: #111111;
    --fbw-muted: #6B6B6B;
    --fbw-line: #E4E4E1;
    --fbw-paper: #FFFFFF;
    --fbw-wash: #F7F6F3;
    --fbw-deep: #0B6BC9;
    font: 400 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    color: var(--fbw-ink);
}

/* ---------- ambient life ---------- */
.fbw-float { animation: fbwFloat 4.5s ease-in-out infinite; }
@keyframes fbwFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3.5px); }
}

.fbw-breathe { animation: fbwBreathe 3.2s ease-in-out infinite; transform-origin: 50px 50px; }
@keyframes fbwBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.fbw-beat {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 17px;
    height: 17px;
    margin: -8.5px 0 0 -8.5px;
    border-radius: 50%;
    border: 1.5px solid #1284F5;
    opacity: 0;
    pointer-events: none;
}
.fbw-beat.fbw-thump { animation: fbwThump 1.5s cubic-bezier(.2,.7,.4,1); }
@keyframes fbwThump {
    0% { transform: scale(1); opacity: .34; }
    75%, 100% { transform: scale(2.6); opacity: 0; }
}

.fbw-seed:hover .fbw-float, .fbw-seed.fbw-big .fbw-float,
.fbw-seed:hover .fbw-breathe, .fbw-seed.fbw-big .fbw-breathe { animation-play-state: paused; }

/* The app's global `button` rule (styles.css) paints a blue gradient,
   a large soft box-shadow, and a hover translateY on EVERY button.
   The widget resets bg/border per-class, but the leaked shadow drew a
   soft square "halo" behind the resting dot. Neutralize every leak
   here — the dot must sit on a fully transparent background. */
.fbw-seed, .fbw-x, .fbw-cat, .fbw-send {
    box-shadow: none;
}
.fbw-seed:hover, .fbw-x:hover, .fbw-send:hover, .fbw-cat:hover {
    transform: none;
}
.fbw-seed, .fbw-x, .fbw-send {
    transition: none;
}

/* ---------- widget ---------- */
.fbw-den {
    position: fixed;
    right: 24px;
    bottom: 24px;
    /* Above the full-screen Arena/assessment session page (z-index
       1300), below the overlays that must beat that session: the Lab
       Values panel (1400), lightboxes (4000+), and the tour (12000). */
    z-index: 1350;
}
.fbw-seed {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    position: relative;
}
.fbw-grow {
    width: 64px;
    height: 64px;
    transform: scale(.26);
    transition: transform .36s cubic-bezier(.2,1.5,.45,1);
}
.fbw-arc {
    stroke-dasharray: 92;
    stroke-dashoffset: 92;
    transition: stroke-dashoffset .16s ease-in;
}
.fbw-eye {
    opacity: 0;
    transform: scale(.1);
    transform-origin: 34px 34px;
    transition: opacity .12s, transform .12s;
}
.fbw-seed:hover .fbw-grow, .fbw-seed.fbw-big .fbw-grow { transform: scale(1); }
.fbw-seed:hover .fbw-arc, .fbw-seed.fbw-big .fbw-arc {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .52s cubic-bezier(.3,.9,.3,1) .1s;
}
.fbw-seed:hover .fbw-eye, .fbw-seed.fbw-big .fbw-eye {
    opacity: 1;
    transform: scale(1);
    transition: opacity .2s .26s, transform .3s cubic-bezier(.2,1.7,.4,1) .26s;
}
.fbw-spin { animation: fbwSpin 1.05s cubic-bezier(.45,.05,.3,1); }
@keyframes fbwSpin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

/* ---------- panel ---------- */
.fbw-panel {
    position: fixed;
    right: 24px;
    bottom: 96px;
    width: 326px;
    background: var(--fbw-paper);
    border: 1px solid var(--fbw-line);
    border-radius: 14px;
    padding: 16px;
    z-index: 1350; /* keep in lockstep with .fbw-den */
    box-shadow: 0 14px 36px rgba(17,17,17,.14);
    opacity: 0;
    transform: translateY(12px) scale(.95);
    pointer-events: none;
    transition: opacity .2s, transform .2s cubic-bezier(.2,.9,.3,1);
}
.fbw-panel.fbw-show { opacity: 1; transform: none; pointer-events: auto; }
.fbw-phead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.fbw-ptitle { font-size: 15px; font-weight: 500; }
.fbw-x {
    cursor: pointer;
    color: var(--fbw-muted);
    background: none;
    border: none;
    font-size: 19px;
    line-height: 1;
    padding: 0;
}
.fbw-ctx { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.fbw-chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--fbw-wash);
    color: var(--fbw-muted);
}
.fbw-chip.fbw-id {
    background: #E4F3FE;
    color: var(--fbw-deep);
    font-family: ui-monospace, Menlo, monospace;
}
.fbw-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fbw-cat {
    font: 400 12.5px/1 inherit;
    padding: 7px 11px;
    border-radius: 7px;
    cursor: pointer;
    background: none;
    border: 1px solid var(--fbw-line);
    color: var(--fbw-muted);
    transition: all .14s;
}
.fbw-cat.fbw-on { background: #E4F3FE; border-color: #1284F5; color: var(--fbw-deep); }
.fbw-panel textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 0; /* the app's global textarea min-height would inflate the 2-row box */
    border: 1px solid var(--fbw-line);
    border-radius: 8px;
    padding: 9px 11px;
    font: 400 13.5px/1.5 inherit;
    color: var(--fbw-ink);
    resize: none;
    background: var(--fbw-paper);
}
.fbw-panel textarea:focus { outline: none; border-color: #B8B8B3; }
.fbw-err {
    font-size: 12.5px;
    line-height: 1.45;
    color: #B4232A;
    margin-top: 8px;
}
.fbw-prow { display: flex; align-items: center; justify-content: flex-end; margin-top: 11px; }
.fbw-send {
    font: 400 13.5px/1 inherit;
    padding: 9px 17px;
    border-radius: 8px;
    border: none;
    background: var(--fbw-deep);
    color: #fff;
    cursor: pointer;
    min-width: 76px;
}
.fbw-send:disabled { opacity: .45; cursor: default; }
.fbw-done { display: none; text-align: center; padding: 22px 8px; }
.fbw-done.fbw-show { display: block; }
.fbw-dtitle { font-size: 14.5px; font-weight: 500; margin-top: 10px; }
.fbw-dsub { font-size: 12.5px; color: var(--fbw-muted); margin-top: 4px; }
.fbw-dref { font-family: ui-monospace, Menlo, monospace; color: var(--fbw-deep); }
.fbw-check {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: fbwDraw .34s .1s forwards ease-out;
}
@keyframes fbwDraw {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fbw-root *, .fbw-root {
        animation: none !important;
        transition-duration: .01s !important;
    }
}

/* ---- Structured detail step (question reports) ----
   Appears under the category chips for Wrong module / Wrong subject / Typo:
   one short question, then buttons — no typing needed. */
.fbw-detail {
    margin: 2px 0 10px;
    padding: 10px 11px 9px;
    border-radius: 9px;
    background: #F4F8FD;
    border: 1px solid #DCE8F7;
}
.fbw-detail[hidden] { display: none; }
.fbw-dq {
    font: 400 12.5px/1.45 inherit;
    color: var(--fbw-ink);
    margin-bottom: 8px;
}
.fbw-dq strong { font-weight: 700; }
.fbw-dhint { color: var(--fbw-muted); }
.fbw-dopts { display: flex; flex-wrap: wrap; gap: 6px; }
.fbw-dopt {
    font: 500 12px/1 inherit;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--fbw-line);
    color: var(--fbw-ink);
    transition: all .14s;
}
.fbw-dopt:hover { border-color: #1284F5; }
.fbw-dopt.fbw-on { background: #1284F5; border-color: #1284F5; color: #fff; }
.fbw-dopt.fbw-dim { opacity: .45; text-decoration: line-through; }
.fbw-dopt.fbw-dim.fbw-on { opacity: 1; text-decoration: none; }