/* Fhellow — S6 user-feedback widget (frontend-only overlay, no fork).
 *
 * A chip in the composer toolbar ("의견 보내기") opens a small, NON-BLOCKING dialog
 * in the bottom-right corner: one free-text field + a celadon send button, then a ✓
 * state. A corner button is the fallback on wide screens that have no composer.
 *
 * Privacy: the widget captures ONLY the typed comment (see fhellow-feedback.js).
 * No query text, no conversation, no screenshot. Matches the product's privacy model.
 *
 * Palette tokens (--fh-*) come from fhellow-tone.css. Loaded by a <link> that
 * build_tone_overlay.py injects into the image's own index.html.
 */

/* ── Corner button (fallback) ────────────────────────────────────────────── */
.fh-fb-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.62rem 1rem;
  font-family: var(--fh-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fh-paper, #f1e9d9);
  background: var(--fh-celadon, #5e7e6e);
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(20, 17, 13, 0.28);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.fh-fb-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(20, 17, 13, 0.34);
  background: color-mix(in srgb, var(--fh-celadon, #5e7e6e) 88%, #000);
}
.fh-fb-fab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fh-celadon, #5e7e6e) 45%, transparent);
  outline-offset: 2px;
}
/* Hidden while the dialog is open, and whenever the composer chip is mounted. */
.fh-fb-fab.fh-fb-hidden { display: none; }
/* Below 1400px the composer, centred right of an open sidebar, reaches under this
   button and it lands on the send, stop and mic controls. The chip is the only
   entry point there. */
@media (max-width: 1400px) {
  .fh-fb-fab { display: none; }
}

/* Local Material icon (ChatBubbleOutlineRounded), masked so it inherits the
   button's text color. SVG served from the bind-mounted /icons folder. */
.fh-fb-ic {
  width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: url(/icons/chat_bubble_outline_rounded.svg) center / contain no-repeat;
  mask: url(/icons/chat_bubble_outline_rounded.svg) center / contain no-repeat;
}

/* ── Composer chip (state 1: closed) ─────────────────────────────────────── */
/* Wears .fh-composer-chip from tone.css, so it matches the 판례·법령 pill beside it
   and goes icon-only under 520px with it. Only the <button> defaults that rule
   leaves standing are undone here. */
.fh-fb-chip {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}
.fh-fb-chip:focus-visible { outline: 2px solid var(--fh-celadon, #5e7e6e); outline-offset: 1px; }
/* Match the ⚖ glyph beside it in height and colour. */
.fh-fb-chip .fh-fb-ic { width: 0.95em; height: 0.95em; color: var(--fh-clay, #b5643f); }

/* ── Dialog (states 2 & 3) ───────────────────────────────────────────────── */
.fh-fb-panel[hidden] { display: none; }
.fh-fb-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  width: 320px;
  max-width: calc(100vw - 32px);
  font-family: var(--fh-sans);
  color: var(--fh-ink, #14110d);
  background: var(--fh-paper, #f1e9d9);
  border: 1px solid var(--border-medium, #ddd0b6);
  border-radius: 0.9rem;
  box-shadow: 0 16px 44px rgba(20, 17, 13, 0.30);
  padding: 0.9rem 0.95rem 1rem;
  animation: fh-fb-in 0.16s ease;
  display: flex;
  flex-direction: column;
  /* min-height (not a rigid height) gives a stable card size while still letting
     it grow to contain its content — so the 보내기 button can never overflow the
     card's bottom edge (issue #89). */
  min-height: 210px;
}
@keyframes fh-fb-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fh-fb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.fh-fb-title { font-size: 0.95rem; font-weight: 700; }
.fh-fb-panel.is-sent .fh-fb-title { visibility: hidden; } /* keep only ✕ in the sent state */

.fh-fb-x {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary, #6b6459);
  font-size: 1rem;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}
.fh-fb-x:hover { color: var(--fh-ink, #14110d); background: rgba(20, 17, 13, 0.06); }
.fh-fb-x:focus-visible { outline: 2px solid var(--fh-celadon, #5e7e6e); outline-offset: 1px; }

/* Form (state 2) fills the fixed-height card so submitting doesn't resize it. */
.fh-fb-form { display: flex; flex-direction: column; flex: 1 1 auto; }

/* Field (state 2) */
.fh-fb-ta {
  width: 100%;
  min-height: 92px;
  flex: 1 1 auto;
  resize: none;
  box-sizing: border-box;
  font-family: var(--fh-sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fh-ink, #14110d);
  background: var(--surface-primary, #fbf7ee);
  border: 1px solid var(--border-medium, #ddd0b6);
  border-radius: 0.6rem;
  padding: 0.6rem 0.7rem;
}
.fh-fb-ta::placeholder { color: var(--text-secondary, #9a9182); }
.fh-fb-ta:focus-visible {
  outline: none;
  border-color: var(--fh-celadon, #5e7e6e);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fh-celadon, #5e7e6e) 22%, transparent);
}

.fh-fb-actions { display: flex; justify-content: flex-end; margin-top: 0.7rem; }
.fh-fb-send {
  appearance: none;
  border: none;
  padding: 0.5rem 1.05rem;
  font-family: var(--fh-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fh-paper, #f1e9d9);
  background: var(--fh-celadon, #5e7e6e);
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.fh-fb-send:hover { background: color-mix(in srgb, var(--fh-celadon, #5e7e6e) 88%, #000); }
.fh-fb-send:focus-visible { outline: 3px solid color-mix(in srgb, var(--fh-celadon, #5e7e6e) 45%, transparent); outline-offset: 2px; }
.fh-fb-send:disabled { opacity: 0.45; cursor: not-allowed; }

/* Confirmation (state 3) */
.fh-fb-sent { display: none; flex-direction: column; align-items: center; text-align: center; padding: 0.4rem 0.2rem 0.2rem; }
.fh-fb-panel.is-sent .fh-fb-form { display: none; }
.fh-fb-panel.is-sent .fh-fb-sent { display: flex; }
/* Sent state: float the ✕ to the corner (so the message isn't pushed down by the
   header row) and vertically center the acknowledgement in a compact card. */
.fh-fb-panel.is-sent { justify-content: center; }
.fh-fb-panel.is-sent .fh-fb-head { position: absolute; top: 8px; right: 10px; margin: 0; padding: 0; border: none; }

.fh-fb-check {
  width: 40px; height: 40px;
  margin: 0.2rem auto 0.6rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700;
  color: var(--fh-paper, #f1e9d9);
  background: var(--fh-celadon, #5e7e6e);
  border-radius: 999px;
}
.fh-fb-thanks { font-size: 0.9rem; line-height: 1.6; margin: 0 0 0.85rem; }
.fh-fb-thanks b { font-weight: 700; }
.fh-fb-again {
  appearance: none;
  border: 1px solid var(--border-medium, #ddd0b6);
  background: transparent;
  color: var(--fh-celadon, #5e7e6e);
  font-family: var(--fh-sans);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.42rem 0.9rem;
  border-radius: 0.6rem;
  cursor: pointer;
}
.fh-fb-again:hover { background: color-mix(in srgb, var(--fh-celadon, #5e7e6e) 10%, transparent); }
.fh-fb-again:focus-visible { outline: 2px solid var(--fh-celadon, #5e7e6e); outline-offset: 1px; }

/* ── Dark mode ───────────────────────────────────────────────────────────── */
.dark .fh-fb-panel {
  color: var(--fh-paper, #f1e9d9);
  background: #1f1c17;
  border-color: #3a352c;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
}
.dark .fh-fb-ta {
  color: var(--fh-paper, #f1e9d9);
  background: #14110d;
  border-color: #3a352c;
}
.dark .fh-fb-x:hover { color: var(--fh-paper, #f1e9d9); background: rgba(241, 233, 217, 0.08); }
.dark .fh-fb-again { border-color: #3a352c; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fh-fb-panel { animation: none; }
  .fh-fb-fab { transition: none; }
}