/* ひとこと（全画面の左下のフィードバック。2026-10-25 指示書 M 32 で作り直し）。中身は feedback.js が作る。
   動きは style-tests/motion-2026-10-16/index.html のポップアップ・シートと同じ値。
   色はエディターの役割どおり: 送る = オレンジ、ふつうの文字 = 墨、空のまま送ろうとした欄 = 赤。 */
.hfb, .hfb-dlg, .hfb-toast {
  --hfb-ink: #25313b; --hfb-sub: #4b5560; --hfb-line: #d9dde2; --hfb-orange: #ff651c; --hfb-orange-hi: #f25710; --hfb-red: #d93a2b;
  --hfb-font: "Noto Sans JP", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --pop-dur: 460ms; --pop-ease: cubic-bezier(.2, .9, .3, 1.02);
  --pop-out-dur: 240ms; --pop-out-ease: cubic-bezier(.45, 0, .8, .4);
  --sheet-dur: 500ms; --state-dur: 150ms;
  font-family: var(--hfb-font);
}
@supports (transition-timing-function: linear(0, 1)) {
  .hfb-dlg { --pop-ease: linear(0, 0.028, 0.099, 0.195, 0.303, 0.413, 0.519, 0.617, 0.704, 0.778, 0.841, 0.892, 0.932, 0.964, 0.987, 1.003, 1.014, 1.021, 1.024, 1.025, 1.025, 1.023, 1.021, 1.018, 1.015, 1.012, 1.01, 1.008, 1.006, 1.004, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .hfb, .hfb-dlg, .hfb-toast { --pop-dur: 0ms; --pop-out-dur: 0ms; --sheet-dur: 0ms; --state-dur: 0ms; }
}
.hfb-dlg [hidden] { display: none !important; }
.hfb button, .hfb-dlg button { font: inherit; font-size: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* 左下の小さなピル（吹き出し + 「ひとこと」）。z-index: ふつうの中身（カートのボタン 40 など）より上、案内（2000）と知らせ（2200）より下。
   ほかの窓が開いている間は feedback.js が窓の中へ移す（PC）か隠す（スマホ） */
.hfb-pill {
  position: fixed; z-index: 1900;
  left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + max(var(--cart-h, 0px), var(--takeout-h, 0px)) + env(safe-area-inset-bottom, 0px)); /* スマホの店内: 下に固定したカゴ・お会計（--cart-h）や持ち帰りの帯（--takeout-h）の上。どちらも editor.js が入れる。トップは 0 */
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 40px; margin: 0; padding: 0 16px 0 12px;
  border: 1px solid #e3e6ea; border-radius: 999px; background: #fff; color: var(--hfb-ink);
  font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(8, 14, 24, .10);
  transition: border-color var(--state-dur), opacity var(--state-dur), visibility var(--state-dur);
}
.hfb[data-page="top"] .hfb-pill { left: auto; right: calc(16px + env(safe-area-inset-right, 0px)); } /* トップは右下（左下はヒーローの「無料で部屋をつくる」。2026-10-25 統括） */
.hfb-pill::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; } /* 押せる高さは 44px */
.hfb-pill:hover { border-color: var(--hfb-ink); }
.hfb-ic { flex: none; display: block; color: var(--hfb-orange); }
.hfb-pill:focus-visible, .hfb-dlg button:focus-visible { outline: 3px solid rgba(255, 101, 28, .45); outline-offset: 2px; }
.hfb[data-open="true"] .hfb-pill, .hfb[data-away="true"] .hfb-pill { opacity: 0; visibility: hidden; pointer-events: none; }
/* 狭い幅はアイコンだけの丸いボタン（44px）。トップは 759px 以下（ヒーロー下の札にかぶるため）。エディターは下のとおりいつも丸。
   文字は見えないだけで残す（読み上げは aria-label「ご意見・ご感想」）。2026-10-25 統括 */
@media (max-width: 759px) {
  .hfb[data-page="top"] .hfb-pill { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; }
  .hfb[data-page="top"] .hfb-pill-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
/* エディター・街の画面は幅に関係なくアイコンだけの丸（44px）を左下 12px に（2026-10-26 指示書 U 45: 品の欄の「部屋に置く」・窓・札に重なっていた）。
   品の欄（body[data-pick-open]。editor.js の renderPickBar）と窓（dialog。feedback.js の syncHost）が開いている間は隠す。いつでも「…」の「ご意見・ご感想」から開ける */
.hfb[data-page="app"] .hfb-pill { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(12px + max(var(--cart-h, 0px), var(--takeout-h, 0px)) + env(safe-area-inset-bottom, 0px)); }
.hfb[data-page="app"] .hfb-pill::before { top: 0; bottom: 0; }
.hfb[data-page="app"] .hfb-pill-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
body[data-pick-open="true"] .hfb[data-page="app"] .hfb-pill,
body[data-step="4"][data-view4="room"] .hfb[data-page="app"] .hfb-pill { opacity: 0; visibility: hidden; pointer-events: none; } /* 2026-10-26 X 74: 持ち物・宅配の欄（おうちの step 4）が開いている間も隠す */
/* 2026-10-26 Y 80: スマホ（759px 以下）のエディターではピルを出さない（店の一覧・部屋の一覧の角に重なっていた）。「…」の「ご意見・ご感想」から開ける。
   トップページ（data-page="top"）と、エディターの外で開いた街のページ（body に data-step が無い）は今のまま */
@media (max-width: 759px) {
  body[data-step] .hfb[data-page="app"] .hfb-pill { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* 窓（PC: 中央 420px。ピルからふわっと開く） */
dialog.hfb-dlg {
  box-sizing: border-box; width: min(420px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; overflow: auto;
  padding: 20px 20px 18px; border: 0; border-radius: 20px; background: #fff; color: var(--hfb-ink);
  box-shadow: 0 18px 48px rgba(8, 14, 24, .26), 0 0 0 1px rgba(8, 14, 24, .05);
}
dialog.hfb-dlg:focus { outline: none; }
dialog.hfb-dlg::backdrop { background: rgba(8, 14, 24, .45); }
.hfb-form { display: grid; gap: 12px; margin: 0; }
.hfb-title { margin: 0; padding: 0; color: var(--hfb-ink); font: 900 20px/1.3 var(--hfb-font); letter-spacing: .02em; }
.hfb-text, .hfb-contact {
  box-sizing: border-box; display: block; width: 100%; margin: 0; padding: 10px 12px;
  border: 1px solid var(--hfb-line); border-radius: 12px; background: #fff; color: var(--hfb-ink);
  font: 400 16px/1.5 var(--hfb-font); /* 16px: iPhone で入力時に拡大しない */
  transition: border-color var(--state-dur), box-shadow var(--state-dur);
}
.hfb-text { min-height: calc(4 * 1.5em + 22px); max-height: 40vh; resize: vertical; }
.hfb-contact { height: 44px; }
.hfb-text::placeholder { color: #8a929a; }
.hfb-text:focus, .hfb-contact:focus { outline: none; border-color: var(--hfb-ink); box-shadow: 0 0 0 3px rgba(37, 49, 59, .12); }
.hfb-text[aria-invalid="true"] { border-color: var(--hfb-red); box-shadow: 0 0 0 3px rgba(217, 58, 43, .18); } /* 空のまま「送る」 */
.hfb-label { display: block; margin: 2px 0 -4px; color: var(--hfb-sub); font-weight: 700; font-size: 13.5px; line-height: 1.5; }
.hfb-pp { margin: -6px 0 0; font-size: 12.5px; line-height: 1.5; } /* 連絡先の下の小さなリンク（2026-10-27 点検 2-2） */
.hfb-pp a { color: var(--hfb-sub); text-decoration: underline; text-underline-offset: 2px; }
.hfb-pp a:hover { color: var(--hfb-ink); }
.hfb-err { margin: 0; color: var(--hfb-red); font-weight: 700; font-size: 14px; line-height: 1.4; }
.hfb-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
.hfb-cancel, .hfb-send { min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 800; font-size: 15px; transition: background-color var(--state-dur), border-color var(--state-dur), opacity var(--state-dur); }
.hfb-cancel { border: 1px solid var(--hfb-line); background: #fff; color: var(--hfb-ink); }
.hfb-cancel:hover { border-color: var(--hfb-ink); }
.hfb-send { min-width: 108px; border: 0; background: var(--hfb-orange); color: #fff; }
.hfb-send:hover:not(:disabled) { background: var(--hfb-orange-hi); }
.hfb-send:disabled { opacity: .55; cursor: default; }

/* スマホ: 下からのシート。キーボードが出たらその上に乗る（--hfb-kb は feedback.js が入れる） */
@media (max-width: 759px) {
  dialog.hfb-dlg {
    width: 100%; max-width: 100%; margin: 0; inset: auto 0 var(--hfb-kb, 0px) 0;
    max-height: calc(100dvh - var(--hfb-kb, 0px) - 24px);
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0;
  }
  .hfb-acts > button { flex: 1 1 0; }
}
.hfb-nb { display: inline-block; } /* 「（X の ID かメール）」は途中で折り返さない */

/* 短い知らせ（トップ用。エディターの .ed-toast と同じ見た目） */
.hfb-toast {
  position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 2200; /* ピル（下から 16〜56px）の上 */
  box-sizing: border-box; max-width: calc(100vw - 32px); margin: 0; padding: 10px 18px; border-radius: 999px;
  background: rgba(37, 49, 59, .96); color: #fff; font: 700 14px/1.4 var(--hfb-font); text-align: center;
  box-shadow: 0 10px 28px rgba(8, 14, 24, .28); pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px); transition: opacity .4s ease, transform .4s ease;
}
.hfb-toast.show { opacity: 1; transform: translate(-50%, 0); transition-duration: .2s; }
@media (prefers-reduced-motion: reduce) { .hfb-pill, .hfb-toast { transition: none; } }