/* ===========================================
   Help menu and the feedback form to the team (partials/_help.html, _feedback_form.html),
   the assistant's feedback card, and the superadmin Feedback page.
   =========================================== */

.top-nav .user-menu .help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--fill-1);
    color: var(--label-1);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
}
.top-nav .user-menu .help-btn:hover { background: var(--fill-2); }
.help-btn svg { width: 15px; height: 15px; color: var(--label-2); }

/* The Help menu: its rows lead to the team, the form or the docs. */
.help-menu { display: flex; flex-direction: column; gap: 2px; }
.help-menu[hidden] { display: none; }
.help-head { display: flex; flex-direction: column; gap: 3px; padding: 4px 10px 10px; }
.help-head b { color: var(--label-1); font-size: 14.5px; font-weight: 600; }
.help-head span { color: var(--label-2); font-size: 12.5px; }
.help-item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: var(--r-md); background: none; color: var(--label-1); text-align: left; text-decoration: none; cursor: pointer; }
.help-item:hover { background: var(--fill-1); color: var(--label-1); }
.help-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.help-text b { font-size: 13.5px; font-weight: 500; }
.help-text small { color: var(--label-3); font-size: 12.5px; }
.help-ic { display: grid; flex-shrink: 0; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--fill-1); color: var(--label-2); }
.help-ic svg { width: 15px; height: 15px; }
.help-go { flex-shrink: 0; width: 13px; height: 13px; color: var(--label-3); }

/* Rendered after the header (base.html) and placed under the pill. */
.feedback-popover { position: fixed; top: 3.6rem; right: 1rem; width: 380px; padding: 0.9rem; }
.feedback-form:not([hidden]) { display: flex; flex-direction: column; align-items: stretch; gap: 0.7rem; margin: 0; }
.feedback-loading { margin: 0; color: var(--text-muted); font-size: 0.82rem; }
.feedback-title { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.feedback-title [data-help-back] { display: grid; flex-shrink: 0; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--label-2); cursor: pointer; }
.feedback-title [data-help-back]:hover { background: var(--fill-1); color: var(--label-1); }
.feedback-title [data-help-back] svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feedback-sub { margin: -0.35rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-muted); }
.feedback-form .preset-tabs { align-self: flex-start; }
.feedback-text { width: 100%; box-sizing: border-box; margin: 0; resize: vertical; min-height: 6rem; background: var(--input-bg); border: 1px solid var(--border); font-size: 0.86rem; }
.feedback-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--text-muted); }
.feedback-contact { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.82rem; color: var(--text-secondary); }
.feedback-contact > label:last-child { display: flex; flex-direction: column; gap: 0.1rem; margin: 0; cursor: pointer; }
.feedback-contact small, .feedback-extra small { font-size: 0.74rem; color: var(--text-muted); }
.feedback-extra { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.feedback-extra input { width: 100%; box-sizing: border-box; margin: 0; background: var(--input-bg); border: 1px solid var(--border); font-size: 0.84rem; }
.feedback-error { margin: 0; font-size: 0.8rem; color: var(--c-danger-bold); }
.feedback-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.feedback-actions .btn { flex-shrink: 0; }
.feedback-done:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.8rem 0.5rem 1.1rem; text-align: center; color: var(--text-secondary); font-size: 0.86rem; }
.feedback-done b { margin-top: 1.1rem; color: var(--text-primary); font-size: 1.05rem; animation: feedback-rise 0.4s 0.25s var(--ease-out) both; }
.feedback-done-sub { animation: feedback-rise 0.4s 0.35s var(--ease-out) both; }

/* Thank-you burst: the check pops in a glowing circle and draws itself, a halo
   ring spreads, and eight sparkles fly out in the role colours. Ring and sparkles
   rest invisible, so without motion only the check remains. */
.feedback-burst { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; }
.feedback-burst svg {
    position: relative;
    width: 52px; height: 52px; padding: 12px; box-sizing: border-box;
    border-radius: 50%;
    background: var(--c-success-ghost);
    color: var(--c-success);
    box-shadow: 0 0 22px color-mix(in srgb, var(--c-success), transparent 65%);
    stroke-dasharray: 20;
    animation: feedback-pop 0.5s var(--ease-out) both, feedback-draw 0.35s 0.2s ease-out both;
}
.feedback-burst-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--c-success);
    opacity: 0;
    animation: feedback-ring 0.7s 0.1s var(--ease-out) both;
}
.feedback-burst i {
    --a: 0deg;
    --d: 46px;
    --c: var(--c-special);
    position: absolute; top: 50%; left: 50%;
    width: 9px; height: 9px; margin: -4.5px;
    background: var(--c);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
    animation: feedback-spark 0.8s 0.12s var(--ease-out) both;
}
.feedback-burst i:nth-of-type(2) { --a: 45deg;  --c: var(--c-success); --d: 34px; width: 6px; height: 6px; margin: -3px; }
.feedback-burst i:nth-of-type(3) { --a: 90deg;  --c: var(--c-warning); }
.feedback-burst i:nth-of-type(4) { --a: 135deg; --c: var(--c-info); --d: 34px; width: 6px; height: 6px; margin: -3px; }
.feedback-burst i:nth-of-type(5) { --a: 180deg; --c: var(--c-special); }
.feedback-burst i:nth-of-type(6) { --a: 225deg; --c: var(--c-warning); --d: 34px; width: 6px; height: 6px; margin: -3px; }
.feedback-burst i:nth-of-type(7) { --a: 270deg; --c: var(--c-success); }
.feedback-burst i:nth-of-type(8) { --a: 315deg; --c: var(--c-info); --d: 34px; width: 6px; height: 6px; margin: -3px; }

/* Shrinks over the time left before the popover closes itself (feedback.js sets it). */
.feedback-countdown {
    align-self: stretch;
    height: 2px; margin-top: 0.9rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-success), var(--c-special));
    transform-origin: left;
    animation: feedback-countdown var(--feedback-close) linear both;
}

@keyframes feedback-pop {
    0%   { transform: scale(0) rotate(-30deg); }
    60%  { transform: scale(1.15) rotate(6deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes feedback-draw { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes feedback-ring {
    from { transform: scale(0.6); opacity: 0.9; }
    to   { transform: scale(2.1); opacity: 0; }
}
@keyframes feedback-spark {
    0%   { transform: rotate(var(--a)) translateY(0) scale(0); opacity: 1; }
    55%  { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1.2) rotate(90deg); opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(calc(-1.25 * var(--d))) scale(0) rotate(180deg); opacity: 0; }
}
@keyframes feedback-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes feedback-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    .feedback-done * { animation: none !important; }
    .feedback-countdown { display: none; }
}

/* Phones: an icon-only button, and the panel as a bottom sheet. */
@media (max-width: 600px) {
    .top-nav .user-menu .help-btn { padding: 0 8px; }
    .help-btn-label { display: none; }
    .feedback-popover {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: 88dvh;
        border-radius: 18px 18px 0 0;
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }
}

/* Assistant feedback card (partials/assistant/_macros.html → feedback_card) */
.asst-feedback { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.65rem 0.85rem 0; }
.asst-feedback textarea { width: 100%; box-sizing: border-box; margin: 0; resize: vertical; min-height: 3.2rem; background: var(--input-bg); border: 1px solid var(--border); font-size: 0.86rem; }
.asst-feedback .feedback-extra input { font-size: 0.82rem; }
.asst-feedback-text { margin: 0; color: var(--text-primary); white-space: pre-wrap; }
.asst-outcome.sent { color: var(--c-success-bold); }
.asst-feedback + .asst-change-foot { margin-top: 0.65rem; }

/* The Superadmin button's and its menu's unreviewed count. */
.superadmin-btn .feedback-count { margin-left: 0.1rem; }