/* Feedback tile and note form (public/feedback.js). The tile is a plain .icon-btn in
   #chrome-top-right, so its size, gap, scale and on-state come from style.css. The card
   opens beside it at full size (opened panes are not scaled) with the same surface as
   every other pane. Theme tokens only, so light, dark and neon all work.
   No motion token exists in design-tokens.css yet; --pc-fb-ease is the one duration
   here and must match EASE_MS in feedback.js. */
.pc-fb-root { position: fixed; top: 0; right: 0; width: 0; height: 0; z-index: 27; font-family: var(--v-font); }
body.pc-painting .pc-fb-root, body.chrome-hidden .pc-fb-root { display: none; }
.pc-fb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pc-fb-card {
  --pc-fb-ease: 180ms;
  --pc-fb-resize: 200ms; /* must match RESIZE_MS in feedback.js */
  --pc-fb-err: color-mix(in srgb, var(--v-live) 62%, black); /* light: --v-live alone is 3.16:1 on the card */
  position: fixed; right: var(--pc-fb-right, 80px); top: var(--pc-fb-top, 20px);
  width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box;
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 17.3px 20.2px; border-radius: 18.7px;
  background: var(--v-surf); color: var(--v-ink); border: 1px solid var(--v-edge);
  box-shadow: inset 0 0 0 1px var(--v-hair), var(--v-sh);
  font: 500 15px/1.45 var(--v-font);
  opacity: 0; transform: translateX(6px) scale(.98); transform-origin: top right;
  transition: opacity var(--pc-fb-ease) ease-out, transform var(--pc-fb-ease) ease-out;
}
.pc-fb-card.is-open { opacity: 1; transform: none; }
:root[data-theme="dark"] .pc-fb-card, :root[data-theme="neon"] .pc-fb-card { --pc-fb-err: var(--v-live); }
.pc-fb-card.is-resizing {
  overflow: hidden;
  transition: opacity var(--pc-fb-ease) ease-out, transform var(--pc-fb-ease) ease-out, height var(--pc-fb-resize) ease-out;
}
.pc-fb-thanks:focus { outline: none; }
.pc-fb-card[hidden], .pc-fb-form[hidden], .pc-fb-thanks[hidden] { display: none; }
.pc-fb-card .pc-ph b { font: 700 19px/1.2 var(--v-font); }

.pc-fb-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8.6px; margin-bottom: 12px; }
.pc-fb-kind { padding: 6.5px 4px; }
.pc-fb-kind { align-items: stretch; transition: border-color var(--pc-fb-ease) ease-out, box-shadow var(--pc-fb-ease) ease-out; }
.pc-fb-kind em { font: 600 14px/1.25 var(--v-font); text-wrap: balance; overflow-wrap: anywhere; padding-bottom: 2px; }
.pc-fb-kind-ic {
  display: grid; place-items: center; height: 40px; border-radius: 8px;
  background: var(--v-surf); color: var(--v-ic); transition: color var(--pc-fb-ease) ease-out;
}
.pc-fb-kind-ic .pc-icon { width: 22px; height: 22px; }
.pc-fb-kind.on .pc-fb-kind-ic { color: var(--v-acc); }

.pc-fb-text {
  display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 104px; max-height: var(--pc-fb-text-max, 260px);
  padding: 10px 12px; border-radius: 12px;
  background: var(--v-surf2); color: var(--v-ink); border: 1px solid var(--v-line);
  font: 500 15px/1.45 var(--v-font);
}
.pc-fb-text::placeholder { color: var(--v-mut); opacity: 1; }
.pc-fb-text:focus { outline: 2px solid var(--v-acc); outline-offset: 1px; }

.pc-fb-count { margin: 4px 2px 0; text-align: right; font: 500 13px/1.3 var(--v-font); color: var(--v-mut); font-variant-numeric: tabular-nums; }
.pc-fb-count.is-warn { color: var(--pc-fb-err); }

.pc-fb-check { display: flex; gap: 9px; align-items: center; margin-top: 10px; font: 500 15px/1.35 var(--v-font); color: var(--v-mut); cursor: pointer; }
.pc-fb-check input { color-scheme: light; width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--v-acc); cursor: pointer; }

.pc-fb-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pc-fb-status { flex: 1; min-width: 0; margin: 0; font: 500 14px/1.35 var(--v-font); color: var(--v-mut); }
.pc-fb-status.is-error { color: var(--pc-fb-err); }
.pc-fb-send {
  flex: none; height: 40px; padding: 0 22px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--v-acc); color: var(--v-accink); font: 700 15px/1 var(--v-font);
}
.pc-fb-send[aria-disabled="true"] { opacity: .55; cursor: default; }

.pc-fb-thanks { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 6px; }
.pc-fb-thanks-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--v-surf2); color: var(--v-acc); margin-bottom: 10px; }
.pc-fb-thanks-ic .pc-icon { width: 34px; height: 34px; }
.pc-fb-thanks p { margin: 0 0 4px; color: var(--v-mut); font: 500 15px/1.45 var(--v-font); }
.pc-fb-thanks .pc-fb-thanks-big { color: var(--v-ink); font: 700 17px/1.3 var(--v-font); }
.pc-fb-thanks .pc-fb-thanks-shot[hidden] { display: none; }

.pc-fb-kind[aria-disabled="true"] { cursor: default; }
.pc-fb-kind:focus-visible, .pc-fb-send:focus-visible, .pc-fb-x:focus-visible { outline: 2px solid var(--v-acc); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .pc-fb-card, .pc-fb-card.is-resizing, .pc-fb-kind, .pc-fb-kind-ic { transition: none; } }

/* Web desktop only: the phone layout (max-width 600px, same breakpoint as f13-chrome.css) has no feedback button. */
@media (max-width: 600px) { .pc-fb-root { display: none; } }
@media (max-width: 600px) { #pc-fb-btn { display: none; } }

:root[data-theme="dark"] .pc-fb-check input, :root[data-theme="neon"] .pc-fb-check input { color-scheme: dark; }