/* ============================================================================
 * Inline feedback widget — .ui-fb*
 *   A "Give feedback" pill on text selection + a composer modal (quoted excerpt,
 *   note, Send, spinner, success check, error). Ported from the strategy portal,
 *   remapped onto kit tokens and made accent-aware: the pill and primary button
 *   follow --accent / --accent-strong, so the widget re-themes with the sub-theme.
 *   Behaviour lives in wireFeedback(); markup in feedbackWidget().
 * ========================================================================== */

:root {
  --ui-fb-pill-grad: linear-gradient(135deg, var(--accent), var(--accent-strong));
  --ui-fb-sel: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Selection highlight kept while the composer is open */
.ui-fbmark { background: var(--ui-fb-sel); border-radius: 3px; box-shadow: 0 0 0 3px var(--ui-fb-sel); }

/* The floating pill anchored above the selection */
.ui-fbpill {
  position: absolute; z-index: 60; left: 0; top: 0; opacity: 0; pointer-events: none;
  transform: translate(-50%, -100%) translateY(-4px) scale(.82); transform-origin: bottom center;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ui-fb-pill-grad); color: var(--accent-contrast);
  /* The pill is a click target the kit renders as a bare <div>, so the consumer who
     needs it from the keyboard writes it as a <button> — which brings a 2px outset
     frame around the gradient, a centred line and `font: 400 13.3333px Arial`. Stated
     here rather than taken from the element. `font` and not `font-family`, because
     Chrome's rule is the shorthand; the three longhands after it keep what the pill
     wants and only the leading comes from the shorthand, which is the 1.62 the pill
     already inherits as a div. `text-align` paints nothing on an inline-flex box
     either way and is declared because leaving it to the element is the dependency
     this refuses. why: #251 */
  border: 0; text-align: center; font: inherit;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .01em;
  padding: 9px 17px 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden;
  /* The pill cast two layers of ink and an accent glow until #295, and grew both on
     hover. Nothing casts now, and it takes no hairline either: it is the accent at full
     fill strength on the page, found the way the solid toast is found. What is left is an
     inset sheen — gloss on the surface, not a shadow under it — so the hover is the travel
     alone and the box-shadow it transitioned went with it.
     why: docs/foundations.md#elevation */
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sheen) 28%, transparent);
  transition:
    transform var(--dur-fast) var(--ease-spring),
    opacity var(--dur-fast) var(--ease);
}
.ui-fbpill.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -100%) translateY(-9px) scale(1); }
.ui-fbpill:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.ui-fbpill.show:hover { transform: translate(-50%, -100%) translateY(-12px) scale(1.04); }
.ui-fbpill:active { transform: translate(-50%, -100%) translateY(-8px) scale(.98); }
.ui-fbpill svg { width: 16px; height: 16px; stroke-width: 2.4; color: currentColor; }
.ui-fbpill::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--sheen) 55%, transparent), transparent); transform: skewX(-18deg);
}
.ui-fbpill.show::before { animation: uiFbSheen 1.15s ease .12s 1; } /* motion: ambient — a decorative sheen crossing the pill; its length is the width it travels, not a response */
.ui-fbpill:hover::before { animation: uiFbSheen .7s ease 1; } /* motion: ambient — the same sweep, quicker on hover so it finishes inside the gesture */
@keyframes uiFbSheen { 0% { left: -60%; } 100% { left: 130%; } }

/* Scrim behind the open composer */
.ui-fbscrim {
  position: fixed; inset: 0; z-index: 70; background: var(--scrim);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease);
}
.ui-fbscrim.show { opacity: 1; pointer-events: auto; }

/* The composer panel (bottom-centre) */
.ui-fbcomposer {
  position: fixed; z-index: 71; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  width: min(520px, calc(100vw - 32px)); background: var(--bg-elevated); border-radius: 18px;
  /* The shadow was its only edge until #295, which replaced it with the hairline; since
     #490 light is back on the drop and dark keeps the line.
     why: docs/foundations.md#elevation */
  border: 1px solid var(--float-edge);
  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); overflow: hidden;
}
.ui-fbcomposer.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.ui-fbc__head { display: flex; align-items: center; gap: 12px; padding: 17px 20px 0; }
.ui-fbc__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--strong); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-fbc__chip svg { width: 14px; height: 14px; flex: none; opacity: .85; stroke-width: 2.7; }
.ui-fbc__x { margin-left: auto; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ /* muted-ink: glyph — dismiss icon */ color: var(--dim); border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; font: inherit; }
.ui-fbc__x:hover { color: var(--strong); }
.ui-fbc__x:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.ui-fbc__x svg { width: 14px; height: 14px; stroke-width: 2.7; }
.ui-fbc__quote { margin: 14px 20px 0; background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ border-radius: 12px; padding: 12px 15px; display: flex; gap: 11px; }
.ui-fbc__qm { color: var(--text); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
.ui-fbc__quote q { quotes: none; color: var(--text); font-style: italic; font-size: calc(var(--text-sm) + 0.5px); line-height: 1.55; }
.ui-fbc__body { padding: 14px 20px 0; }
.ui-fbcomposer textarea {
  width: 100%; min-height: 96px; resize: vertical; font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55;
  color: var(--strong); background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ border: 1px solid var(--field-edge); border-radius: 12px; padding: 13px 15px; transition: box-shadow var(--dur-fast) var(--ease);
}
.ui-fbcomposer textarea::placeholder { /* muted-ink: placeholder — empty feedback field */ color: var(--muted); }
.ui-fbcomposer textarea:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.ui-fbc__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 20px 18px; }

.ui-fbbtn { font-family: var(--font-sans); font-size: calc(var(--text-sm) + 0.5px); font-weight: var(--weight-semibold); border-radius: 10px; padding: 9px 17px; cursor: pointer; border: 0; transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ui-fbbtn.ghost { background: transparent; color: var(--text); }
.ui-fbbtn.ghost:hover { color: var(--strong); background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
.ui-fbbtn:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.ui-fbbtn.primary { background: var(--accent-strong); color: var(--accent-contrast); display: inline-flex; align-items: center; gap: 9px; }
.ui-fbbtn.primary:hover { filter: brightness(1.08); }
/* Same flat pair as .ui-btn:disabled, for the same reason (#220). */
.ui-fbbtn.primary:disabled {
  background: var(--disabled-surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
  /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
  cursor: default;
  filter: none;
}
.ui-fbc__send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ui-fbspin { flex: none; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 40%, transparent); border-top-color: currentColor; animation: uiFbSpin .7s linear infinite; } /* motion: ambient — a spinner turns until the request answers */
@keyframes uiFbSpin { to { transform: rotate(360deg); } }

/* Success state */
.ui-fbc__done { padding: 30px 26px 24px; text-align: center; background: radial-gradient(112% 60% at 50% 0%, var(--glow-green), transparent 62%); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
.ui-fbc__ck { width: 88px; height: 88px; margin: 0 auto 13px; display: grid; place-items: center; }
.ui-fbck { width: 88px; height: 88px; overflow: visible; display: block; transform-origin: center; animation: uiFbCkSpring 1s cubic-bezier(.22,1,.3,1) both; } /* motion: choreographed — the frame the mark and the comet are timed against */
.ui-fbck-t { fill: none; stroke: var(--surface); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ui-fbck-m { fill: none; stroke: var(--green); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 118; stroke-dashoffset: 118; animation: uiFbCkDraw .6s cubic-bezier(.5,0,.3,1) .1s forwards; /* motion: choreographed — the mark draws while the spring is still settling */ }
.ui-fbck-s { fill: none; stroke: var(--sheen); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15 400; stroke-dashoffset: 133; filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 15px var(--green)); opacity: 0; animation: uiFbCkComet .6s cubic-bezier(.5,0,.3,1) .1s forwards; /* motion: choreographed — the comet rides the mark, so it shares its duration and delay exactly */ }
.ui-fbc__done h4 { color: var(--strong); font-size: calc(var(--text-lg) + 1px); font-weight: var(--weight-semibold); letter-spacing: -.01em; margin-bottom: 7px; }
.ui-fbc__done p { color: var(--text); font-size: calc(var(--text-sm) + 0.5px); line-height: 1.55; max-width: var(--prose-caption); margin: 0 auto; }
.ui-fbc__done p b { color: var(--text); font-weight: var(--weight-semibold); }
.ui-fbc__done .row { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
@keyframes uiFbCkDraw { to { stroke-dashoffset: 0; } }
@keyframes uiFbCkComet { 0% { stroke-dashoffset: 133; opacity: 1; } 82% { opacity: 1; } 100% { stroke-dashoffset: 15; opacity: 0; } }
@keyframes uiFbCkSpring { 0% { transform: scale(1.32); } 62% { transform: scale(.965); } 82% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* Error banner */
.ui-fbc__err { margin: 14px 20px 0; background: color-mix(in srgb, var(--pink) 14%, transparent); /* code-bg: inherit — text-only validation message has no nested focus target. */ color: var(--chip-danger-ink); font-size: var(--text-sm); padding: 11px 15px; border-radius: 11px; display: none; }
.ui-fbc__err.show { display: block; /* motion: still — the React Feedback renders the error already shown; its fade is the is-entering animation beside it. */ }
/* A failed send's line fades in; wireFeedback() adds the class as it shows it. */
.ui-fbc__err.is-entering { animation: m-fade var(--dur-fast) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .ui-fbpill, .ui-fbpill::before, .ui-fbcomposer, .ui-fbscrim, .ui-fbck, .ui-fbck-m, .ui-fbck-s { animation: none !important; transition: none !important; }
  .ui-fbck-m { stroke-dashoffset: 0; } .ui-fbck-s { display: none; } .ui-fbck { transform: scale(1); }
}
@media (max-width: 560px) {
  .ui-fbcomposer { left: 8px; right: 8px; transform: none; bottom: 8px; width: auto; }
  .ui-fbcomposer.show { transform: none; }
}