/* ===========================================================================
   Feedback subsystem — the floating "send a note" button and its form.

   Built entirely from the tokens declared in sender.css: colours, radii, and
   fonts are all var() references, so this file carries no palette of its own
   and follows the design system rather than sitting next to it.

   Radii in particular are tokens here (--r-md, --r-lg, --r-pill) and not
   numbers. This site names four radius steps; writing 12px would step outside
   the system on the first line.
   =========================================================================== */

.fb-form { display: grid; gap: 12px; font-family: var(--font); }
.fb-lab { color: var(--c-text-2); font-size: 12px; font-weight: 600; letter-spacing: .02em; }

.fb-input {
    background: var(--c-bg-deep);
    border: 1px solid var(--c-hairline);
    border-radius: var(--r-md);
    color: var(--c-text);
    font: inherit;
    font-size: 14px;
    padding: 10px 13px;
    width: 100%;
}
.fb-input::placeholder { color: var(--c-text-3); }
.fb-input:focus-visible {
    border-color: var(--c-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--c-primary-ring);
}
textarea.fb-input { min-height: 100px; resize: vertical; }

.fb-kinds { border: 0; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; }
.fb-kinds legend { color: var(--c-text-2); font-size: 12px; font-weight: 600; margin-bottom: 7px; padding: 0; }
.fb-chip { cursor: pointer; display: inline-block; }
.fb-chip input { position: absolute; opacity: 0; pointer-events: none; }
/* input:checked + span, not :has(): an older browser that cannot paint the
   checked state turns a radio group into a guessing game. */
.fb-chip span {
    background: var(--c-surface-2);
    border: 1px solid var(--c-hairline);
    border-radius: var(--r-pill);
    color: var(--c-text);
    display: inline-block;
    font-size: 13px;
    padding: 7px 16px;
}
.fb-chip input:checked + span {
    background: var(--c-primary-tint);
    border-color: var(--c-primary);
    color: var(--c-primary-text);
    font-weight: 600;
}
.fb-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--c-primary-ring); }

.fb-actions { align-items: center; display: flex; gap: 14px; flex-wrap: wrap; }
.fb-send {
    background: var(--c-primary);
    border: 0;
    border-radius: var(--r-pill);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
}
.fb-send:hover { background: var(--c-primary-hover); }
.fb-mine { color: var(--c-text-2); font-size: 13px; }
.fb-note { color: var(--c-text-3); font-size: 12px; line-height: 1.55; margin: 0; }

/* Bot trap. Hidden by class — never by an inline style attribute. */
.fb-hp { position: absolute; width: 1px; height: 1px; margin: -1px;
         overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.fb-bad {
    background: var(--c-danger-tint);
    border-left: 3px solid var(--c-danger);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    color: var(--c-text);
    margin: 0 0 16px;
    padding: 11px 15px;
}
.fb-ok {
    background: var(--c-surface);
    border: 1px solid var(--c-hairline);
    border-radius: var(--r-lg);
    padding: 20px 22px;
}
.fb-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.fb-item {
    background: var(--c-surface);
    border: 1px solid var(--c-hairline);
    border-radius: var(--r-lg);
    padding: 16px 20px;
}
.fb-meta { align-items: center; display: flex; gap: 12px; margin: 0 0 8px; }
.fb-tag { border-radius: var(--r-pill); font-size: 11px; font-weight: 700; padding: 3px 11px; }
.fb-tag-idea { background: var(--c-primary-tint); color: var(--c-primary-text); }
.fb-tag-problem { background: var(--c-warning-tint); color: var(--c-warning); }
.fb-date, .fb-from { color: var(--c-text-3); font-size: 12px; font-family: var(--font-mono); }
.fb-body { color: var(--c-text); line-height: 1.6; margin: 0; white-space: pre-wrap; word-break: break-word; }
.fb-empty { color: var(--c-text-3); }

/* --- the floating button ------------------------------------------------- */
/* Flat values first so a browser that does not understand env() still gets a
   margin; viewport-fit=cover in the page meta is what makes env() non-zero. */
.fb-fab { bottom: 18px; left: 18px; position: fixed; z-index: 90; font-family: var(--font); }
@supports (padding: env(safe-area-inset-bottom)) {
    .fb-fab { bottom: calc(18px + env(safe-area-inset-bottom));
              left:   calc(18px + env(safe-area-inset-left)); }
}
.fb-fab > summary {
    align-items: center;
    background: var(--c-surface-2);
    border: 1px solid var(--c-hairline-2);
    border-radius: var(--r-pill);
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    list-style: none;
    padding: 10px 19px;
}
.fb-fab > summary::-webkit-details-marker { display: none; }
.fb-fab > summary:hover { border-color: var(--c-primary); color: var(--c-primary-text); }
.fb-fab > summary:focus-visible { box-shadow: 0 0 0 3px var(--c-primary-ring); }

.fb-panel {
    background: var(--c-surface-2);
    border: 1px solid var(--c-hairline-2);
    border-radius: var(--r-lg);
    bottom: 52px;
    left: 0;
    padding: 20px;
    position: absolute;
    width: min(365px, calc(100vw - 36px));
    animation: fb-in .16s ease-out;
}
@keyframes fb-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .fb-panel { animation: none; } }
.fb-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px; }
.fb-intro { color: var(--c-text-2); font-size: 13px; line-height: 1.55; margin: 0 0 13px; }
/* The ✕ stays hidden until the script declares itself, so it is never a button
   that does nothing. */
.fb-x { display: none; }
html.js .fb-x {
    background: none; border: 0; color: var(--c-text-3); cursor: pointer;
    display: block; font-size: 16px; line-height: 1; padding: 4px;
}
@media (max-width: 430px) { .fb-panel { width: calc(100vw - 36px); } }