/* Fhellow — S6 user-feedback widget (frontend-only overlay, no fork).
 *
 * One corner button ("의견 보내기") on every screen opens a small, NON-BLOCKING dialog
 * in the bottom-right corner: one free-text field + a celadon send button, then a ✓
 * state.
 *
 * 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 (the entry point, every screen) ───────────────────────── */
.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: they share this corner. */
.fh-fb-fab.fh-fb-hidden { display: none; }
/* No width rule takes the button away any more: the script measures the composer
   and steps the button above it when the two would meet, so the label stays and
   the narrow screens keep their way in. */

/* 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;
}

/* ── 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);
}

/* The hint sits at one end and the button at the other, so the row reads left to
   right as "here is the other way out" → "or send this note". align-items keeps the
   two-line hint centred against the single-line button. */
.fh-fb-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.7rem;
}
/* Quiet on purpose: this is the fallback, not the action. Breaking the address onto
   its own line keeps it whole on a narrow dialog instead of splitting mid-address. */
.fh-fb-hint {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--fh-sans);
  font-size: 0.76rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--fh-ink, #14110d) 55%, transparent);
  text-align: left;
  user-select: text;
}
.fh-fb-send {
  appearance: none;
  border: none;
  /* The hint shares this row now. Without these the flex row steals width from the
     button first and 보내기 wraps to two lines; the hint is the side that should
     give way, so the button keeps its width and the hint wraps instead. */
  flex: 0 0 auto;
  white-space: nowrap;
  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; }
}


/* ── Sign-in card: the contact line ──────────────────────────────────────────
 * One quiet grey line under the sign-up link. Text, not a link: see the note in
 * the script. It must not compete with 계속 or 가입하기, which are what almost
 * everyone on this screen actually wants. */
.fh-fb-support {
  margin: 0.25rem 0 0;
  font-family: var(--fh-sans);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: color-mix(in srgb, var(--fh-ink, #14110d) 50%, transparent);
  user-select: text;
}
.dark .fh-fb-support {
  color: color-mix(in srgb, var(--fh-paper, #f1e9d9) 55%, transparent);
}