/*
          Feedback Widget — CSS
          Matches the dashboard look: indigo primary, rounded corners,
          soft shadows, Nunito/Inter type. Pulls colors from this page's
          existing --primary / --text / etc. custom properties.
        */
        #feedback-fab,
        .feedback-overlay,
        .feedback-overlay * {
            --fb-primary: var(--primary, #4338CA);
            --fb-primary-dark: var(--primary-dark, #3730A3);
            --fb-primary-light: var(--primary-light, #EEF2FF);
            --fb-text: var(--text, #1C2439);
            --fb-text-muted: var(--text-muted, #5B6478);
            --fb-card-bg: var(--card-bg, #ffffff);
            --fb-line: var(--line-dashed, #C7CEDB);
            --fb-font: var(--font-display, 'Baloo 2', 'Andika', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
            box-sizing: border-box;
        }

        #feedback-fab {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 1350;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 12px 18px;
            border: none;
            border-radius: 999px;
            background: var(--fb-primary);
            color: #fff;
            font-family: var(--fb-font);
            font-weight: 800;
            font-size: 14px;
            box-shadow: 0 8px 20px rgba(67, 56, 202, 0.35), 0 2px 6px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
                        background 160ms ease;
        }
        #feedback-fab:hover {
            background: var(--fb-primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 12px 26px rgba(67, 56, 202, 0.4), 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        #feedback-fab:active { transform: translateY(0) scale(0.97); }
        #feedback-fab:focus-visible { outline: 3px solid var(--fb-primary-light); outline-offset: 2px; }

        @media (max-width: 640px) {
            #feedback-fab {
                right: 14px;
                bottom: max(14px, env(safe-area-inset-bottom));
                padding: 10px 14px;
                font-size: 13px;
            }
        }

        /* Below ~800px (phones + iPad portrait) the card is nearly edge-to-edge, so a
           bottom-right fixed FAB lands on top of full-width primary buttons (e.g. Check
           Answer). Shrink it to an icon and stack it with the other corner buttons instead,
           where it scrolls away with the page rather than sitting on top of the answer area. */
        @media (max-width: 800px) {
            #feedback-fab {
                position: absolute;
                top: 142px; /* clears the taller two-row mobile header */
                right: 24px;
                left: auto;
                bottom: auto;
                width: 44px;
                height: 44px;
                padding: 0;
                border-radius: 50%;
                justify-content: center;
                font-size: 1.1rem;
            }
            #feedback-fab .feedback-fab-text { display: none; }
        }

        /* The quiz/skills/speed-burst ✕ (.practice-close-btn) lands in this same
           top-right corner while a question is in focus (#quiz-close-btn /
           #skills-close-btn toggle to display:flex there) — hide the fab rather
           than let its higher z-index cover the only way out of the session. */
        @media (max-width: 800px) {
            body:has(#quiz-close-btn[style*="flex"]) #feedback-fab,
            body:has(#skills-close-btn[style*="flex"]) #feedback-fab,
            body:has(#maze-door-overlay[style*="flex"]) #feedback-fab {
                display: none;
            }
        }

        .feedback-overlay {
            position: fixed;
            inset: 0;
            z-index: 1450;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            background: rgba(28, 36, 57, 0.55);
            backdrop-filter: blur(2px);
            opacity: 0;
            transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .feedback-overlay.feedback-open { opacity: 1; }
        .feedback-overlay[hidden] { display: none; }

        .feedback-modal {
            position: relative;
            width: 100%;
            max-width: 420px;
            max-height: calc(100vh - 32px);
            overflow-y: auto;
            background: var(--fb-card-bg);
            border: 1px solid var(--fb-line);
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(28, 36, 57, 0.25);
            padding: 28px 24px 24px;
            transform: translateY(12px) scale(0.98);
            opacity: 0;
            transition: transform 200ms cubic-bezier(0.22, 1.6, 0.4, 1),
                        opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .feedback-overlay.feedback-open .feedback-modal { transform: translateY(0) scale(1); opacity: 1; }

        .feedback-close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 50%;
            background: var(--fb-primary-light);
            color: var(--fb-primary);
            font-size: 14px;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 140ms ease, transform 140ms ease;
        }
        .feedback-close:hover { background: var(--fb-primary); color: #fff; transform: rotate(90deg); }

        .feedback-title {
            font-family: var(--fb-font);
            font-weight: 800;
            font-size: 20px;
            color: var(--fb-text);
            margin: 0 28px 4px 0;
        }
        .feedback-subtitle { font-size: 13.5px; color: var(--fb-text-muted); margin: 0 0 18px 0; }

        .feedback-field { margin-bottom: 16px; }
        .feedback-field label { display: block; font-size: 13px; font-weight: 700; color: var(--fb-text); margin-bottom: 6px; }
        .feedback-optional { font-weight: 400; color: var(--fb-text-muted); }

        .feedback-field select,
        .feedback-field textarea,
        .feedback-field input[type="email"] {
            width: 100%;
            padding: 10px 12px;
            border: 1.5px solid var(--fb-line);
            border-radius: 12px;
            background: #fff;
            font-family: inherit;
            font-size: 16px;
            color: var(--fb-text);
            transition: border-color 140ms ease, box-shadow 140ms ease;
        }
        .feedback-field textarea { resize: vertical; min-height: 90px; }
        .feedback-field select:focus,
        .feedback-field textarea:focus,
        .feedback-field input[type="email"]:focus {
            outline: none;
            border-color: var(--fb-primary);
            box-shadow: 0 0 0 3px var(--fb-primary-light);
        }

        .feedback-hidden-field { position: absolute; left: -9999px; }

        .feedback-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
        .feedback-btn {
            padding: 10px 16px;
            border-radius: 12px;
            border: none;
            font-family: var(--fb-font);
            font-weight: 800;
            font-size: 13.5px;
            cursor: pointer;
            transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
        }
        .feedback-btn:active { transform: scale(0.97); }
        .feedback-btn-secondary { background: transparent; color: var(--fb-text-muted); }
        .feedback-btn-secondary:hover { background: var(--fb-primary-light); color: var(--fb-text); }
        .feedback-btn-primary { background: var(--fb-primary); color: #fff; box-shadow: 0 6px 16px rgba(67, 56, 202, 0.3); }
        .feedback-btn-primary:hover { background: var(--fb-primary-dark); }
        .feedback-btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

        .feedback-thanks { text-align: center; padding: 24px 8px 12px; }
        .feedback-thanks-emoji { font-size: 40px; margin-bottom: 8px; animation: feedback-pop 420ms cubic-bezier(0.22, 1.6, 0.4, 1); }
        .feedback-thanks p { font-weight: 700; color: var(--fb-text); }
        @keyframes feedback-pop {
            0% { transform: scale(0.5); opacity: 0; }
            70% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); }
        }