/* ===========================================================
   feedback-bar 共通スタイル — 配信: /css/feedback-bar.css
   §3.6 再改定 (2026-06-11): 全アプリで本ファイルを読み込み、各アプリの
   インライン/個別 feedback CSS は撤去する (コピペ方式を廃止 = 不統一の温床)。

   PC (>=769px) : 「💬 フィードバック」フル表示・§3.6 寸法。
   スマホ(<=768px): 「フィードバック」の文字のみ非表示・💬 は残す・input 全幅。
                    💬 と入力欄の間隔は 8px (バーの gap)。
   本ファイルは各ページで「最後に読み込む」こと (他 CSS に勝たせる)。
   =========================================================== */

.feedback-bar,
.feedback-bar-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--bg-card);
  border-top: 1px solid var(--border-main);
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  margin: 0;
  /* auto-hide (スマホ) 用の滑らかな出入り。PC でも常時 translateY(0) なので無害。 */
  transition: transform .25s ease;
  will-change: transform;
}

.feedback-bar .feedback-label,
.feedback-bar-fixed .feedback-label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

/* input は `[type="text"]` 付きの高詳細度版も併記し、各アプリ/mobile-base の汎用
   `input[type="text"]{...}` (詳細度 0,1,1) に必ず勝つようにする (不統一の主因だった)。 */
.feedback-bar input,
.feedback-bar input[type="text"],
.feedback-bar-fixed input,
.feedback-bar-fixed input[type="text"] {
  flex: 1;
  min-width: 0;
  width: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-main);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  /* 高さを px 固定 (border-box) — フォント差・行高・描画で高さがブレず全アプリ完全一致。 */
  min-height: 32px;
  height: 32px;
  box-sizing: border-box;
}
.feedback-bar input::placeholder,
.feedback-bar-fixed input::placeholder { color: var(--text-tertiary); }
.feedback-bar input:focus,
.feedback-bar input[type="text"]:focus,
.feedback-bar-fixed input:focus,
.feedback-bar-fixed input[type="text"]:focus { border-color: var(--border-accent); }

.feedback-bar button,
.feedback-bar-fixed button {
  flex-shrink: 0;
  background: var(--btn-bg, #534ab7);
  color: #fff;
  border: none;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  font-family: inherit;
  min-height: 0;
  white-space: nowrap;
}
.feedback-bar button:hover,
.feedback-bar-fixed button:hover { opacity: .85; }

/* ===== スマホ (<=768px): 文字のみ隠し 💬 は残す ===== */
@media (max-width: 768px) {
  /* ラベルのテキスト (💬 含む) を一旦消し、::before で 💬 のみ復元。
     全アプリ同一手法 (font-size:0 + 絵文字 ::before)。 */
  .feedback-bar .feedback-label,
  .feedback-bar-fixed .feedback-label {
    font-size: 0;
  }
  .feedback-bar .feedback-label::before,
  .feedback-bar-fixed .feedback-label::before {
    content: "💬";
    font-size: 15px;
    line-height: 1;
  }
  /* input は flex:1 のため、ラベルが 💬 のみに縮むと自動で全幅化する。 */

  /* ===== auto-hide: 下スクロールで隠す (スマホのみ) =====
     /js/feedback-autohide.js が付与/除去する .fb-hidden で transform を切替える。
     110% は safe-area-inset-bottom 分の padding を含めて完全に画面外へ逃がすための余裕。
     body の padding-bottom は固定のままなのでレイアウトは飛ばない。
     本ルールは @media (max-width:768px) 内にあるため PC では一切効かない (= 常時表示)。 */
  .feedback-bar.fb-hidden,
  .feedback-bar-fixed.fb-hidden {
    transform: translateY(110%);
  }
}