/* 反馈: the button sits on the right edge above the bottom bars (批量保存, the boss's purchase bar) so it never
   covers them; the sheet opens from the bottom like the other quick dialogs. */
.feedback-fab {
    position: fixed;
    right: 12px;
    bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    /* Solid brand blue so it stands out from the white cards (the first, white version was easy to miss). */
    background: var(--classic-btn-primary-end, #1457e4);
    color: #fff;
    box-shadow: 0 8px 20px rgba(20, 87, 228, 0.35);
    cursor: pointer;
    transition: right 0.3s ease, width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
}
.feedback-fab:active { transform: scale(0.96); }
/* A while after the app opens, the round button tucks into a narrow tab on the right edge: still there and
   one tap away, but no longer over the page. */
.feedback-fab.is-docked {
    right: 0;
    width: 30px;
    height: 76px;
    gap: 4px;
    border-right: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 6px 14px rgba(20, 87, 228, 0.3);
}
.feedback-fab.is-docked .feedback-fab-icon { width: 16px; height: 16px; }
.feedback-fab.is-docked .feedback-fab-label { writing-mode: vertical-rl; letter-spacing: 2px; }
.feedback-fab.is-docked .feedback-fab-dot { top: -8px; right: auto; left: -8px; }
@media (prefers-reduced-motion: reduce) { .feedback-fab { transition: none; } }
.feedback-fab.hidden { display: none; }
.feedback-fab:focus-visible { outline: 3px solid var(--classic-blue, #2563eb); outline-offset: 2px; }
.feedback-fab-icon { width: 24px; height: 24px; }
.feedback-fab-label { font-size: 12px; font-weight: 700; line-height: 1.1; }
/* Shown next to the button the first few times a staff member opens the app, and again whenever the boss has
   acted on their feedback (or, for the boss, new feedback came in) with what changed. */
.feedback-fab-hint {
    position: fixed;
    right: 80px;
    bottom: calc(152px + env(safe-area-inset-bottom, 0px));
    z-index: 1500;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: var(--classic-text, #1f2937);
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.2);
    cursor: pointer;
}
.feedback-fab-hint::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent var(--classic-text, #1f2937);
}
.feedback-fab-hint.hidden { display: none; }

.feedback-fab-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--classic-red-strong, #dc2626);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}
.feedback-fab-dot.hidden { display: none; }

.feedback-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(15, 23, 42, 0.42);
}
.feedback-panel {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: var(--classic-surface, #fff);
    color: var(--classic-text, #1f2937);
}
.feedback-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.feedback-head h3 { margin: 0; font-size: 18px; }
.feedback-close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--classic-text-soft, #64748b);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.feedback-hint { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--classic-text-soft, #5f6b7a); }
.feedback-form textarea,
.feedback-reply-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* iOS does not zoom into inputs of 16px or more */
}
.feedback-photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.feedback-photo-btn { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.feedback-send { width: 100%; min-height: 48px; margin-top: 10px; }
.feedback-mine-title { margin: 18px 0 8px; font-size: 15px; }

.feedback-filters { display: flex; gap: 6px; margin-bottom: 10px; }
.feedback-filters button {
    flex: 1;
    min-height: 44px;
    border: 1px solid var(--classic-line, #dce3ec);
    border-radius: 10px;
    background: transparent;
    color: var(--classic-text-soft, #475569);
    font-size: 14px;
    cursor: pointer;
}
.feedback-filters button.active {
    border-color: var(--classic-blue, #2563eb);
    background: var(--classic-blue-soft, #eaf1ff);
    color: var(--classic-blue-strong, #1d4ed8);
    font-weight: 700;
}

.feedback-dm { margin-bottom: 10px; }
.feedback-dm-open { min-height: 44px; }
.feedback-dm-form select { width: 100%; min-height: 44px; font-size: 16px; }
.feedback-list { display: grid; gap: 10px; }
.feedback-item {
    padding: 12px;
    border: 1px solid var(--classic-line, #e2e8f0);
    border-radius: 12px;
}
.feedback-item.is-new,
.feedback-item.is-updated { border-color: var(--classic-blue, #2563eb); }
.feedback-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.feedback-content { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
/* The conversation reads like a chat: my messages on the right in blue, the other side's on the left in grey. */
.feedback-thread { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.feedback-bubble {
    align-self: flex-start;
    max-width: 85%;
    padding: 8px 10px;
    border-radius: 4px 12px 12px 12px;
    background: var(--classic-surface-soft, #edf1f6);
    font-size: 14px;
    line-height: 1.5;
}
.feedback-bubble.is-mine {
    align-self: flex-end;
    border-radius: 12px 4px 12px 12px;
    background: var(--classic-blue-soft, #eaf1ff);
}
.feedback-bubble-name { font-size: 12px; font-weight: 700; color: var(--classic-text-soft, #475569); }
.feedback-bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-bubble-time { margin-top: 2px; font-size: 12px; color: var(--classic-text-soft, #5f6b7a); }
.feedback-bubble.is-mine .feedback-bubble-time { text-align: right; }
.feedback-followup { margin-top: 6px; }
.feedback-followup-open { min-height: 44px; }
.feedback-photo { display: inline-block; margin-top: 8px; }
.feedback-photo img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--classic-line, #dce3ec);
}
.feedback-reply-input { margin-top: 10px; }
.feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.feedback-actions .small-btn { min-height: 44px; }

.feedback-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    background: var(--classic-surface-soft, #edf1f6);
    color: var(--classic-text-soft, #475569);
}
.feedback-status-new { background: var(--classic-red-soft, #fde8e8); color: var(--classic-red-strong, #b91c1c); }
.feedback-status-doing { background: var(--classic-amber-soft, #fef3c7); color: var(--classic-amber-strong, #92400e); }
.feedback-status-dm { background: var(--classic-blue-soft, #eaf1ff); color: var(--classic-blue-strong, #1d4ed8); }
.feedback-status-done { background: var(--classic-green-soft, #dcfce7); color: var(--classic-green-strong, #166534); }