/* ============================================================
   Global feedback / troubleshoot pill + modal form
   Self-contained so it renders consistently on every shell
   (base_standardized, base_buchhaltung Play-CDN, commentary).
   Theme-aware via CSS custom properties with safe fallbacks.
   ============================================================ */

/* ---- The hovering pill ------------------------------------ */
/* The WRAP owns the position; the pill and its dismiss button sit inside it.
   feedback.js writes inline right/bottom here while dragging and restores them
   from localStorage on load. */
.feedback-pill-wrap {
    position: fixed;
    right: 20px;
    bottom: 84px;
    /* Above UnifiedModal (modal layer 2010 + 10/stacked, dialog 2030) so the
       pill stays reachable while another modal is open — but below the
       notification layer (3000) and the toast container (100000, top-right).
       While the feedback modal ITSELF is open the pill is hidden (see
       body.fb-modal-open below) so it never covers its own footer. */
    z-index: 2900;
    display: inline-flex;
    /* Pointer Events must not be stolen by the page's scroll gesture. */
    touch-action: none;
}
.feedback-pill-wrap[hidden] {
    display: none;
}
.feedback-pill-wrap.is-dragging {
    cursor: grabbing;
}
.feedback-pill-wrap.is-dragging .feedback-pill {
    /* Snapping to the pointer must be instant, and the hover lift must not
       fight the drag. */
    transition: none;
    transform: none;
    cursor: grabbing;
}

.feedback-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 999px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    color: var(--theme-btn-primary-text, #fff);
    background: var(--theme-brand-gradient, linear-gradient(135deg, #e91e8c, #00bcd4));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.feedback-pill:hover,
.feedback-pill:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
    color: var(--theme-btn-primary-text, #fff);
    text-decoration: none;
    outline: none;
}
.feedback-pill:active {
    transform: translateY(0);
}
.feedback-pill i {
    font-size: 1rem;
}
.feedback-pill__label {
    white-space: nowrap;
}

/* ---- Dismiss (×) ------------------------------------------
   Revealed on hover/focus so it doesn't clutter the resting pill. On touch
   there is no hover, so it stays visible (see the coarse-pointer rule below). */
.feedback-pill__close {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    font-size: 0.6rem;
    line-height: 1;
    color: #fff;
    background: #4b5563;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.feedback-pill-wrap:hover .feedback-pill__close,
.feedback-pill-wrap:focus-within .feedback-pill__close {
    opacity: 1;
    transform: scale(1);
}
.feedback-pill__close:hover,
.feedback-pill__close:focus-visible {
    background: #111827;
    outline: none;
}
/* Never show the × mid-drag — the pointer is captured and a stray tap on it
   would dismiss the pill the user is trying to move. */
.feedback-pill-wrap.is-dragging .feedback-pill__close {
    opacity: 0;
    pointer-events: none;
}
/* Touch devices can't hover: keep the × visible so it stays discoverable. */
@media (hover: none) {
    .feedback-pill__close {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hide the pill while the feedback modal itself is open (set by feedback.js),
   so it doesn't float over its own send button — especially on mobile. */
body.fb-modal-open .feedback-pill-wrap {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ---- Dismiss choreography + guided reveal -----------------
   Hiding the pill hands the user off to its new home in the header user menu:
   the pill drifts up toward the header as it fades, then that menu opens and
   the "Feedback geben" item lights up so the eye follows it there. Classes are
   toggled by feedback.js. (Desktop; on mobile the menu sits behind the
   hamburger, so .fb-point pulses that instead.) */

/* Pill leaving — fade, shrink, drift toward the top-right header. */
.feedback-pill-wrap.is-dismissing {
    animation: fb-pill-leave 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}
@keyframes fb-pill-leave {
    to { opacity: 0; transform: translate(14px, -18px) scale(0.84); }
}

/* Pill returning — a quick settle so a restore doesn't blink into the corner. */
.feedback-pill-wrap.is-restoring {
    animation: fb-pill-return 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fb-pill-return {
    0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.04); }
    100% { opacity: 1; transform: none; }
}

/* The menu item lighting up. The brand pink ties it back to the pill the user
   just dismissed; a full inset ring frames it (never a side stripe). */
.dropdown-item.fb-spotlight {
    background: var(--theme-dropdown-hover-bg);
    box-shadow: inset 0 0 0 2px rgba(233, 30, 140, 0.55);
    animation: fb-spotlight-pulse 900ms ease-out 3;
}
.dropdown-item.fb-spotlight i {
    color: #e91e8c;
}
@keyframes fb-spotlight-pulse {
    0%, 100% { background: var(--theme-dropdown-hover-bg); }
    45%      { background: rgba(233, 30, 140, 0.16); }
}

/* Mobile — the menu is collapsed behind the hamburger, so point at it. */
.nav-toggle.fb-point {
    border-radius: 8px;
    animation: fb-point-pulse 800ms ease-out 3;
}
@keyframes fb-point-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233, 30, 140, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(233, 30, 140, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
    /* No motion, but the state still changes: pill vanishes, item + hamburger
       hold a static highlight for the dwell (JS removes it). */
    .feedback-pill-wrap.is-dismissing { animation: none; opacity: 0; }
    .feedback-pill-wrap.is-restoring { animation: none; }
    .dropdown-item.fb-spotlight { animation: none; }
    .nav-toggle.fb-point {
        animation: none;
        box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.45);
    }
}

/* Compact (icon-only) on narrow screens to avoid crowding. */
@media (max-width: 640px) {
    .feedback-pill-wrap {
        right: 16px;
        bottom: 80px;
    }
    .feedback-pill {
        padding: 0.7rem;
    }
    .feedback-pill__label {
        display: none;
    }
    /* Lift above the full-width manager bulk-action bar when it is visible —
       but only while the pill still sits at its default spot. Once the user has
       dragged it (.is-placed), their choice wins and we don't move it for them.
       (The inline right/bottom would override this anyway; the guard keeps the
       intent explicit.) */
    body:has(.sc-bulk-bar:not([hidden]):not(.d-none)) .feedback-pill-wrap:not(.is-placed) {
        bottom: 148px;
    }
}

/* ---- The feedback modal form ------------------------------
   The UnifiedModal card is ALWAYS white (unified-modal.css:
   .um-dialog { background-color: white }) regardless of the page
   theme, so every control here uses fixed light-surface colors —
   never --theme-input-* (which follow the theme and turn dark).
   Local accent tokens mirror the Puggle brand pink but are pinned
   to contrast-safe values on white. ----------------------------- */
.fb-form {
    --fb-ink: #111827;          /* input text            */
    --fb-label: #1f2937;        /* field labels          */
    --fb-muted: #6b7280;        /* hints (4.6:1 on white)*/
    --fb-intro: #4b5563;        /* intro (7:1 on white)  */
    --fb-border: #d1d5db;       /* resting field border  */
    --fb-accent: #db2777;       /* brand pink, 4.7:1     */
    --fb-accent-soft: #fdf2f8;  /* selected fill         */
    --fb-danger: #dc2626;
    --fb-radius: 0.625rem;

    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    font-family: 'Outfit', system-ui, sans-serif;
    color: var(--fb-ink);
}
.fb-intro {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--fb-intro);
}
.fb-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.fb-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fb-label);
}
.fb-label .fb-req {
    color: var(--fb-danger);
}
.fb-label .fb-optional {
    font-weight: 400;
    color: var(--fb-muted);
}

/* Text controls ------------------------------------------------ */
.fb-input,
.fb-select,
.fb-textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    background: #fff;
    color: var(--fb-ink);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fb-input::placeholder,
.fb-textarea::placeholder {
    color: var(--fb-muted);   /* 4.6:1 — readable, not the washed-out default */
}
.fb-textarea {
    resize: vertical;
    min-height: 104px;
}
.fb-input:focus,
.fb-select:focus,
.fb-textarea:focus {
    outline: none;
    border-color: var(--fb-accent);
    box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.15);
}

/* Native select → custom chevron on a white field */
.fb-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    cursor: pointer;
}

/* File control → styled selector button */
.fb-file {
    width: 100%;
    font-size: 0.85rem;
    color: var(--fb-muted);
}
.fb-file::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--fb-border);
    border-radius: 0.5rem;
    background: #f9fafb;
    color: var(--fb-label);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.fb-file::file-selector-button:hover {
    background: #f3f4f6;
}
.fb-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--fb-muted);
}

/* Severity → segmented control with intensity dots ------------- */
.fb-severity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.fb-seg {
    position: relative;
    flex: 1 1 120px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    background: #fff;
    font-size: 0.85rem;
    color: var(--fb-label);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.fb-seg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.fb-seg__dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9ca3af;
}
.fb-seg__dot--blocking { background: #ef4444; }
.fb-seg__dot--annoying { background: #f59e0b; }
.fb-seg__dot--minor    { background: #9ca3af; }
.fb-seg:hover {
    border-color: #9ca3af;
}
.fb-seg:has(input:checked) {
    border-color: var(--fb-accent);
    background: var(--fb-accent-soft);
    box-shadow: inset 0 0 0 1px var(--fb-accent);
    font-weight: 600;
}
.fb-seg:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.18);
}

.fb-error {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fb-danger);
}

@media (prefers-reduced-motion: reduce) {
    .fb-input, .fb-select, .fb-textarea, .fb-seg,
    .fb-file::file-selector-button {
        transition: none;
    }
}

/* Visually-hidden honeypot — kept in normal flow for bots, hidden from humans. */
.fb-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}