/* serve/machi_ui/diary/feedback.css — 意見回饋 bottom sheet + scrim (round-6 §D.3).
 * Component-only: all tokens come from diary.css :root. Same 台灣風土 vocabulary as the rest
 * of the shell — 宣紙 surfaces, 電鍋綠 actions, hairline borders. z-layers: scrim 70 / sheet 71
 * sit above the tabbar (20), live toast (30), ⓘ menu (65) and the safe-area mask (60). */

body.fbLock { overflow: hidden; }   /* the page holds still while the sheet is up */

.fbScrim {
  position: fixed;
  inset: 0;
  background: rgba(43, 42, 38, 0.38);   /* 墨 wash */
  z-index: 70;
}

.fbSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: var(--maxw);
  max-height: calc(100vh - 32px);                                    /* fallback */
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 32px);   /* never under the clock */
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(43, 42, 38, 0.22);
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 71;
  transform: translateY(100%);
  transition: transform 0.24s ease;
}
.fbSheet.up { transform: none; }

.fbHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.fbTitle {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.fbClose {
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.fbClose:hover { color: var(--text); background: var(--surface-2); }

/* category chips — single-select pills, 電鍋綠 when chosen */
.fbChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fbChip {
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fbChip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.fbText,
.fbContact {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
}
.fbText { min-height: 88px; resize: vertical; }
.fbText::placeholder,
.fbContact::placeholder { color: var(--faint); }

/* explicit transcript opt-in — default OFF; .off = no live transcript to attach */
.fbAttach {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fbAttach input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
}
.fbAttach.off { color: var(--faint); cursor: default; }

/* quiet fine print — what rides along automatically */
.fbFine {
  margin-top: 9px;
  font-size: 0.8rem;
  color: var(--faint);
  letter-spacing: 0.02em;
}

.fbSubmit {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 14px;
  border: none;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.fbSubmit:disabled { opacity: 0.45; cursor: default; }

/* 多謝，麻吉收到了！ */
.fbThanks {
  padding: 34px 10px 26px;
  text-align: center;
  font-family: var(--kai);
  font-size: 1.15rem;
  color: var(--brand);
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  .fbSheet { transition: none; }
  .fbChip { transition: none; }
}