/* In-app feedback — card (rail "Feedback") + one-time micro-prompt.
   Shares the tour's visual language (white panel, orange primary #ff8c1a),
   copied here under an fb- prefix so it doesn't depend on tour.css.
   Card overlay sits just under the tour (21000) at 20500; the prompt at 20000
   floats above toasts (3000) / flashes (4000). See feedback.js. */

/* ---------------- shared bits ---------------- */
.fb-card, .fb-prompt{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:#26303f; box-sizing:border-box;
}
.fb-card *, .fb-prompt *{ box-sizing:border-box; }

.fb-btn{ font-size:13px; font-weight:700; padding:9px 16px; border-radius:8px;
    border:1px solid transparent; cursor:pointer; min-height:40px; }
.fb-btn.fb-ghost{ background:transparent; color:#7b8598; }
.fb-btn.fb-ghost:hover{ color:#45526a; }
.fb-btn.fb-pri{ background:#ff8c1a; color:#fff; }
.fb-btn.fb-pri:hover{ background:#f07d0a; }
.fb-btn.fb-pri:disabled{ background:#f6c68f; cursor:default; }

/* ---------------- feedback card ---------------- */
.fb-overlay{
    position:fixed; inset:0; z-index:20500; display:flex;
    align-items:center; justify-content:center;
    background:rgba(10,14,22,.5); padding:16px;
}
.fb-card{
    width:420px; max-width:100%; background:#fff; border-radius:12px;
    padding:20px 22px 18px; box-shadow:0 16px 44px rgba(0,0,0,.34);
}
.fb-card h4{ margin:0 0 3px; font-size:18px; font-weight:700; color:#141a26; }
.fb-card .fb-sub{ margin:0 0 14px; font-size:13px; color:#7b8598; line-height:1.4; }

.fb-chips{ display:flex; gap:8px; margin-bottom:12px; }
.fb-chip{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 6px; border-radius:9px; border:1px solid #dbe0ea; background:#fff;
    font-size:13px; font-weight:600; color:#45526a; cursor:pointer;
    min-height:40px; white-space:nowrap;
}
.fb-chip:hover{ border-color:#c3cad8; }
.fb-chip.fb-on{ border-color:#ff8c1a; background:#fff6ea; color:#c47f16; }
.fb-chip .fb-emoji{ font-size:15px; }

.fb-card textarea{
    width:100%; min-height:104px; resize:vertical; padding:11px 12px;
    border:1px solid #dbe0ea; border-radius:9px; font-size:14px; line-height:1.45;
    color:#26303f; font-family:inherit; outline:none;
}
.fb-card textarea:focus{ border-color:#ff8c1a; box-shadow:0 0 0 3px rgba(255,140,26,.18); }

.fb-ctx{ margin:8px 0 0; font-size:11.5px; color:#9aa4b6; }
.fb-err{ margin:8px 0 0; font-size:12.5px; color:#d64545; font-weight:600; display:none; }
.fb-err.fb-show{ display:block; }

.fb-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

/* phone: reuse the app's bottom-sheet chrome (.sheetoverlay/.sheet) */
.fb-sheet .sheet{ padding:14px 18px calc(16px + env(safe-area-inset-bottom)); }
.fb-sheet .fb-grab{ width:38px; height:4px; border-radius:2px; background:#d7dce4;
    margin:2px auto 12px; }
.fb-sheet h4{ margin:0 0 3px; font-size:18px; font-weight:700; color:#141a26; }

/* ---------------- micro-prompt ---------------- */
.fb-prompt{
    position:fixed; z-index:20000; background:#fff; border-radius:12px;
    box-shadow:0 12px 34px rgba(0,0,0,.28); padding:14px 16px 13px;
    width:300px; max-width:calc(100vw - 24px);
    transition:opacity .28s ease, transform .28s ease;
}
.fb-prompt.fb-desktop{ right:20px; bottom:20px; }
.fb-prompt.fb-phone{ left:12px; right:12px; bottom:12px; width:auto; }
.fb-prompt.fb-hide{ opacity:0; transform:translateY(8px); }

.fb-prompt-x{ position:absolute; top:7px; right:9px; font-size:18px; line-height:1;
    color:#9aa4b6; background:transparent; border:0; cursor:pointer; padding:4px 7px; }
.fb-prompt-x:hover{ color:#6a7488; }

.fb-prompt-q{ margin:0 18px 11px 0; font-size:14px; font-weight:700; color:#141a26; }
.fb-emojis{ display:flex; gap:8px; }
.fb-emoji-btn{ flex:1; font-size:24px; line-height:1; padding:8px 0; background:#f6f8fb;
    border:1px solid #e6eaf1; border-radius:9px; cursor:pointer; min-height:46px; }
.fb-emoji-btn:hover{ background:#eef2f8; border-color:#d3dae6; }

.fb-prompt textarea{
    width:100%; min-height:64px; resize:vertical; margin-top:2px; padding:9px 11px;
    border:1px solid #dbe0ea; border-radius:9px; font-size:13.5px; line-height:1.4;
    color:#26303f; font-family:inherit; outline:none;
}
.fb-prompt textarea:focus{ border-color:#ff8c1a; box-shadow:0 0 0 3px rgba(255,140,26,.18); }
.fb-prompt-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.fb-prompt .fb-btn{ font-size:12.5px; padding:8px 13px; min-height:38px; }

@media (max-width:560px){
    .fb-card{ padding:16px 16px 14px; }
    .fb-card h4, .fb-sheet h4{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){
    .fb-prompt{ transition:none; }
}