/* Customer feedback control, modal, and screenshot preview/redaction UI.
   Paired with templates/_feedback_modal.html and static/js/feedback.js.

   Extracted from base.html, whose feedback block was ~200 lines of inline
   style= attributes. Everything here is built from the :root design tokens in
   style.css so the modal matches the rest of the product instead of carrying
   its own private palette. Geometry mirrors the shared .cnx-confirm dialog. */

/* ── the launcher ──────────────────────────────────────────────────────── */

.feedback-toggle {
    position: fixed;
    bottom: 4rem;
    right: 4.25rem;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-xl);
    background: var(--bg-card-alt);
    border: 1px solid #555;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: var(--fs-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 200;
}
.feedback-toggle:hover { background: var(--bg-hover); }
.feedback-toggle:focus-visible {
    outline: 2px solid var(--info-fg);
    outline-offset: 2px;
}
.feedback-toggle-icon { margin-right: 5px; }

/* ── overlay + card ────────────────────────────────────────────────────── */

.feedback-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
/* The overlay is shown/hidden with el.hidden (no inline style), so the author
   display:flex above must yield to the attribute rather than outrank it. */
.feedback-overlay[hidden] { display: none; }

.feedback-card {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    max-width: 30rem;
    width: 100%;
    padding: 1rem;
    /* A preview of a 16:9 desktop capture plus four action buttons is tall.
       Scroll the CARD, never the page — a page-level scrollbar next to a
       fixed overlay is the classic source of horizontal overflow on the
       Fold 5 cover screen. */
    max-height: 100dvh;
    overflow-y: auto;
}
.feedback-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.feedback-heading {
    margin: 0;
    color: var(--text-bright);
    font-size: var(--fs-lg);
}
.feedback-close {
    background: none;
    border: none;
    color: var(--text-dim);
}
.feedback-intro {
    color: var(--text-nav);
    font-size: var(--fs-md);
    margin: 0 0 0.85rem 0;
}

/* ── form fields ───────────────────────────────────────────────────────── */

.feedback-label {
    display: block;
    color: var(--text);
    font-size: var(--fs-md);
    margin-bottom: 0.25rem;
}
.feedback-input {
    width: 100%;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    background: var(--bg-body);
    color: var(--text-bright);
    border: 1px solid var(--border-input);
    margin-bottom: 0.75rem;
    font-family: inherit;
    font-size: var(--fs-md);
}
.feedback-textarea {
    resize: vertical;
    margin-bottom: 0.85rem;
}
.feedback-input:focus-visible {
    outline: 2px solid var(--info-fg);
    outline-offset: 1px;
}

/* Screenshot / anonymity opt-in rows. A class rather than inline styles so
   the template does not add to the #996 inline-style count. */
.feedback-check {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    margin-bottom: 0.75rem;
    cursor: pointer;
}
.feedback-check input { margin-top: 2px; }
.feedback-hint {
    color: var(--text-nav);
    font-size: var(--fs-xs);
    margin: -0.5rem 0 0.75rem 1.4rem;
}

/* ── the preview + redaction surface ───────────────────────────────────── */

.feedback-shot {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--gap-sm);
    margin-bottom: 0.75rem;
}
.feedback-shot[hidden] { display: none; }
.feedback-shot-head {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: var(--gap-sm);
}
.feedback-shot-title {
    color: var(--text-bright);
    font-size: var(--fs-sm);
}
/* The frame establishes the positioning context the overlay canvas is pinned
   into. max-width:100% keeps a 1600px raster inside the card on every
   viewport, which is what stops page-level horizontal overflow. */
.feedback-shot-frame {
    position: relative;
    max-width: 100%;
    line-height: 0;
    background: var(--bg-body);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.feedback-shot-img {
    display: block;
    width: 100%;
    height: auto;
}
.feedback-shot-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Pointer Events only — touch-action:none stops the browser from
       scroll-hijacking a drag that is meant to draw a redaction box. */
    touch-action: none;
    cursor: crosshair;
}
.feedback-shot-overlay:focus-visible {
    outline: 2px solid var(--info-fg);
    outline-offset: -2px;
}
.feedback-shot-overlay:focus { outline: 2px solid var(--info-fg); outline-offset: -2px; }
.feedback-shot-overlay:focus:not(:focus-visible) { outline: none; }

/* .feedback-hint carries a -0.5rem top margin so it tucks under a checkbox
   label. Inside the preview panel there is no checkbox above it, so that
   negative margin slid the instructions UP BEHIND the picture and clipped
   their first line. Reset it here rather than weakening the checkbox rule. */
.feedback-shot .feedback-hint {
    margin: var(--gap-sm) 0 var(--gap-sm) 0;
}

.feedback-shot-meta {
    color: var(--text-nav);
    font-size: var(--fs-xs);
    margin: var(--gap-xs) 0 var(--gap-sm) 0;
    min-height: 1em;
}
.feedback-shot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

/* ── status line + actions ─────────────────────────────────────────────── */

.feedback-status {
    font-size: var(--fs-md);
    color: var(--text-nav);
    margin-bottom: 0.5rem;
    min-height: 1em;
}
/* Replaces the raw #ff8888 / #7fdc7f / #aaa the old JS wrote into
   statusEl.style.color. Semantic tokens, legible on the dark card. */
.feedback-status--ok { color: var(--success-fg); }
.feedback-status--warn { color: var(--warning-fg); }
.feedback-status--error { color: var(--danger-fg); }

.feedback-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}
.feedback-cancel {
    background: var(--bg-hover);
    color: var(--text);
    border: 1px solid #555;
}
.feedback-send {
    background: var(--brand-primary);
    color: var(--text-bright);
    border: 1px solid var(--brand-primary);
}
.feedback-send[disabled],
.feedback-shot-actions button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── touch ─────────────────────────────────────────────────────────────── */

/* style.css raises buttons to the 44px touch floor at max-width:480px. That
   misses the Galaxy Z Fold 5 OPEN screen (690px CSS px, touch only): measured
   at 25.6px, which is a finger-sized miss on the one control that decides
   whether a picture of the customer's screen leaves the building. Keyed on the
   INPUT rather than the width, and scoped to this modal so no other page's
   layout moves. */
@media (pointer: coarse) {
    .feedback-actions button,
    .feedback-shot-actions button,
    .feedback-close,
    .feedback-toggle {
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .feedback-check input { min-width: 20px; min-height: 20px; }
}

/* ── phone / cover-screen ──────────────────────────────────────────────── */

@media (max-width: 480px) {
    .feedback-card { padding: 0.75rem; }
    /* Touch-target floor. style.css raises button/.btn-sm to 44px at this
       breakpoint; the redaction row wraps rather than overflowing, and the
       buttons are given room to stretch instead of being clipped. */
    .feedback-shot-actions button { flex: 1 1 auto; }
    .feedback-actions button { min-height: 44px; }
    .feedback-toggle {
        right: 0.75rem;
        bottom: 4rem;
        min-height: 44px;
    }
}