/* ============================================================================
 * ファイル名: contact_widget.css
 * パス: app/assets/stylesheets/contact_widget.css
 * 作成日: 2026-07-02
 *
 * 概要: 画面右下の問い合わせウィジェット（案C: チャット風ポップオーバー）の意匠。
 *   ログインユーザー向けに全アプリ画面（application レイアウト）で表示する。
 *   デスクトップ = 右下から上方向に展開するポップオーバー、モバイル(<=640px) = 画面下から
 *   迫り上がるボトムシートに切り替わる。色・角丸・影は theme_variables.css のトークンを
 *   参照し、ダーク/ライト/ウッド/桜の各テーマに自動追従する。金色文字は --lx-gold-text を
 *   用いる（ライトで --gold-primary を文字色に使うと白背景で可読性が落ちるため）。
 *
 * Propshaft により本ファイルは自動配信される（config/initializers/assets.rb への
 * precompile 登録は不要）。読み込み: application.html.erb の stylesheet_link_tag "contact_widget"。
 *
 * 【リファクタリング基準】CSS（コメント除外）:
 *   500未満=完璧 / 800未満=問題なし / 1200未満=注意喚起 / 1200以上=リファクタリング必須
 *   現状 358 行 = 完璧（コメント行は除外）。デスクトップ/モバイル/横向き/RTL/5テーマを1ファイルに集約しても
 *   500行を大きく下回り分割不要。付与日: 2026-07-06
 *
 * 【関連ファイル】
 *   - app/views/shared/_contact_widget.html.erb（markup）
 *   - app/javascript/controllers/contact_widget_controller.js（開閉/送信/×消去/focus trap）
 *
 * 【変更履歴】
 *   2026-07-06: 自動入力注記（prefill-note）を破線ボーダー箱→ゴールド左ボーダー callout へ変更
 *     （入力欄と同じ視覚言語で textarea に誤認されたため。5案レビューの採用案2）。
 *   2026-07-06: <select> の options ポップアップ配色を追加（color-scheme + option の background/color 明示）。
 *     未指定だと Windows Chrome の白ポップアップに白文字が継承され選択肢が不可視だった不具合の修正。
 *     checked 行は半透明 rgba が白地合成で不可読になるため不透明 hex をテーマ別直書き（task_imports.css 同値）。
 *   2026-07-03: 各表示モード充足監査に基づき light/wood の質感を調整（FAB/×の drop-shadow を
 *     影トークン言語へ追従・<select> シェブロン色を既存慣習 #555/#c8956a へ・ライトの FAB/×
 *     フォーカスリングを --lx-gold-text へ）。ダーク描画は base ルールのまま完全不変。
 *   2026-07-03: 未使用の .contact-widget__success-close 規則を削除（成功ビューにボタンは無く
 *     参照ゼロのデッドコード・描画への影響なし）。
 * ============================================================================ */

/* 固定コンテナ（パネル＋FAB を内包・右下）
   pointer-events: none が必須（2026-07-07 修正）: 閉じたパネルは visibility:hidden でも
   レイアウト寸法（約380×560px）を保持するため、コンテナの当たり判定ボックスが右下の
   広い矩形に膨らむ。コンテナ自体が hit target だと、その透明矩形の下にあるページ内の
   ボタン・リンク（例: タスク管理一覧の編集ボタン）へのクリックを全部吸ってしまう。
   コンテナは判定を持たず、実要素（__panel / __fab-wrap）だけ auto で復活させる。 */
.contact-widget {
  position: fixed;
  right: calc(24px + var(--safe-area-right, 0px));
  bottom: calc(24px + var(--safe-area-bottom, 0px));
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

/* コンテナ直下の実要素のみクリック可能に戻す。閉じたパネルは visibility:hidden のため
   auto でも hit target にならない（開いた時だけ操作可能になる）。 */
.contact-widget__panel,
.contact-widget__fab-wrap {
  pointer-events: auto;
}
.contact-widget[hidden] { display: none; } /* ×で消去したとき（フルリロードまで復活しない） */

/* ---- FAB（チャットボタン）＋ 消去× ---- */
.contact-widget__fab-wrap { position: relative; }
.contact-widget__fab {
  width: 60px;
  height: 60px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full, 9999px);
  background: var(--gold-gradient-primary);
  color: var(--text-on-gold, #000000);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), var(--gold-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-widget__fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(var(--gold-primary-rgb, 255, 215, 0), 0.5);
}
.contact-widget__fab:focus-visible { outline: 2px solid var(--gold-primary, #FFD700); outline-offset: 3px; }
.contact-widget__fab-icon { width: 26px; height: 26px; }

/* 小さな×（ウィジェット自体を消す・FAB 右上角に重ねる） */
.contact-widget__dismiss {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border-primary);
  background: var(--bg-elevated, #161616);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.contact-widget__dismiss:hover { color: var(--text-primary); border-color: var(--gold-border-medium); }
.contact-widget__dismiss:focus-visible { outline: 2px solid var(--gold-primary, #FFD700); outline-offset: 2px; }
.contact-widget__dismiss::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; } /* タップ標的を約34pxへ拡大（見た目は22pxのまま・FABと分離） */

/* ---- パネル（ポップオーバー） ---- */
.contact-widget__panel {
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: min(560px, calc(100dvh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, #161616);
  border: 1px solid var(--gold-border-light);
  border-radius: var(--radius-2xl, 1.5rem);
  box-shadow: var(--shadow-elevated), var(--gold-glow);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  /* visibility も遷移対象に含める: 閉じても即 display:none にせずフェード完了まで hidden を遅らせ、focus 対象からは閉じ切ってから外す */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.contact-widget__panel.is-open { opacity: 1; visibility: visible; transform: none; }

/* フォーム表示 / 成功表示の切替コンテナ */
.contact-widget__form-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.contact-widget__form-view[hidden] { display: none; }

/* header */
.contact-widget__header {
  position: relative;
  flex-shrink: 0;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border-secondary);
}
.contact-widget__header::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -1px;
  width: 56px;
  height: 2px;
  background: var(--gold-gradient-primary);
}
/* padding-inline-end で右上の閉じる×とタイトルの重なりを防ぐ（論理プロパティなので RTL でも自動で反転） */
.contact-widget__title { font-size: 17px; font-weight: 700; color: var(--lx-gold-text, #FFD700); padding-inline-end: 48px; }
.contact-widget__subtitle { margin-top: 4px; font-size: 12px; color: var(--text-muted); padding-inline-end: 48px; }
.contact-widget__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border-primary);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-widget__close:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.contact-widget__close::before { content: ""; position: absolute; inset: -6px; } /* タップ標的を約44pxへ拡大（見た目は32pxのまま） */

/* inline error */
.contact-widget__error {
  flex-shrink: 0;
  margin: 12px 22px 0;
  padding: 9px 12px;
  font-size: 12.5px;
  white-space: pre-line;
  color: var(--color-danger, #ef4444);
  background: rgba(var(--color-danger-rgb, 239, 68, 68), 0.1);
  border: 1px solid rgba(var(--color-danger-rgb, 239, 68, 68), 0.35);
  border-radius: var(--radius-md, 0.5rem);
}
.contact-widget__error[hidden] { display: none; }

/* form + scrollable fields */
.contact-widget__form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.contact-widget__fields { flex: 1; overflow-y: auto; padding: 18px 22px; }

/* 自動入力注記は「Note」風のゴールド左ボーダー callout（2026-07-06 レビュー採用案）。
   旧: 破線全周ボーダー＋薄背景 → 入力欄と同じ視覚言語で textarea に誤認されたため廃止。
   左線＋淡金地のみで囲わず、入力欄と輪郭を差別化する。border/角丸は論理プロパティで RTL 自動ミラー */
.contact-widget__prefill-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  background: rgba(var(--gold-primary-rgb, 255, 215, 0), 0.06);
  border-inline-start: 3px solid var(--gold-primary, #FFD700);
  border-start-end-radius: var(--radius-md, 0.5rem);
  border-end-end-radius: var(--radius-md, 0.5rem);
  padding: 8px 11px;
  margin-bottom: 16px;
}
.contact-widget__field { margin-bottom: 15px; }
.contact-widget__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.contact-widget__req { color: var(--lx-gold-text, #FFD700); margin-inline-start: 3px; }
.contact-widget__input,
.contact-widget__select,
.contact-widget__textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md, 0.5rem);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-widget__textarea { resize: vertical; min-height: 96px; }
.contact-widget__input::placeholder,
.contact-widget__textarea::placeholder { color: var(--text-muted); }
.contact-widget__input:focus,
.contact-widget__select:focus,
.contact-widget__textarea:focus {
  outline: none;
  border-color: var(--gold-border-medium);
  box-shadow: 0 0 0 3px rgba(var(--gold-primary-rgb, 255, 215, 0), 0.18);
}
.contact-widget__input[readonly] { opacity: 0.65; cursor: not-allowed; }
.contact-widget__hint { margin-top: 5px; font-size: 11px; color: var(--text-muted); }
.contact-widget__counter { margin-top: 5px; text-align: right; font-size: 11px; color: var(--text-muted); }
.contact-widget__select {
  appearance: none;
  -webkit-appearance: none;
  /* options ポップアップは OS ネイティブ描画。color-scheme 未指定だと Windows Chrome が白地で
     ポップアップを描き、select から継承した --text-primary(白) の選択肢文字が不可視になる。
     base=dark（dark/wood/sakura_night をカバー）とし、light/sakura_day は下の theme 節で light へ上書き */
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* options ポップアップの行配色。背景は不透明トークン --bg-elevated を使う
   （--bg-surface は半透明でポップアップの白地に負ける）。トークンが 5 テーマで定義済みのため
   通常行の per-theme 上書きは不要。hover はスタイル不能な OS ネイティブ描画のため指定しない */
.contact-widget__select option {
  background-color: var(--bg-elevated, #161616);
  color: var(--text-primary);
}
/* checked 行は不透明 hex 直書き（task_imports.css の option:checked と同値の deployed 前例）。
   Chrome は checked 行の半透明背景をポップアップ暗地ではなく白地に合成するため、
   rgba だと淡黄背景×白文字で不可読になる（2026-07-06 実機確認）。テーマ別上書きは theme 節参照 */
.contact-widget__select option:checked {
  background-color: #3a3217;
  color: #ffd700;
}

/* footer ボタン。旧: 構造は luxury_buttons.css 依存（色バリアントのみ定義）だったが、board レイアウトは
   luxury_buttons.css を意図的に非読込で、後読みの kanban_modal_buttons.css の .luxury-btn
   （8px16px・font 12px・border:none・nowrap）が単クラス後勝ちして構造を破壊していた（キャンセルの枠線消失）。
   そこで luxury_buttons.css base と同値の構造を (0,2,0) スコープで固定し、両レイアウトで描画を一致させる
   （2026-07-07 レスポンシブ監査）。application レイアウトでは同値上書きのため描画不変。 */
.contact-widget__footer { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--border-secondary); }
.contact-widget__footer .luxury-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-lg, 12px); /* デザイントークン（0.75rem=12px）。luxury_buttons.css base の 12px と既定同値 */
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: normal; /* kanban 版の nowrap を打ち消し、長い多言語ラベルの折返しを維持 */
  min-width: 0;        /* 狭幅で flex 収縮を許容（kanban 版 min-width:auto の打ち消し） */
}
/* シマーエフェクト（luxury_buttons.css と同値）。board では kanban 版 ::before（left 走査型）を本定義が上書きする */
.contact-widget__footer .luxury-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.contact-widget__footer .luxury-btn:hover::before { left: 0; transform: translateX(100%); }
/* 色バリアント（border-color は kanban 版 border:none ショートハンドに負けないよう (0,2,0) で指定） */
.contact-widget__footer .contact-widget__submit { flex: 1; background: var(--gold-gradient-primary); color: var(--text-on-gold, #000000); border-color: transparent; }
.contact-widget__footer .contact-widget__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.contact-widget__footer .contact-widget__cancel { background: transparent; color: var(--text-secondary); border-color: var(--border-primary); }
.contact-widget__footer .contact-widget__cancel:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

/* success state */
.contact-widget__success { padding: 34px 24px 38px; text-align: center; }
.contact-widget__success[hidden] { display: none; }
.contact-widget__success-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(var(--color-success-rgb, 34, 197, 94), 0.12);
  border: 1px solid rgba(var(--color-success-rgb, 34, 197, 94), 0.4);
  color: var(--color-success, #22c55e);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-widget__success-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.contact-widget__success-body { font-size: 13px; color: var(--text-secondary); margin-bottom: 22px; }

/* ---- モバイル(<=640px): ボトムシート化 ---- */
@media (max-width: 640px) {
  .contact-widget {
    right: calc(16px + var(--safe-area-right, 0px));
    bottom: calc(16px + var(--safe-area-bottom, 0px));
  }
  .contact-widget__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    border-radius: var(--radius-2xl, 1.5rem) var(--radius-2xl, 1.5rem) 0 0;
    transform-origin: bottom center;
    transform: translateY(100%);
    /* home indicator に加え、対応ブラウザではソフトキーボード高さも確保（未対応時は 0px で no-op） */
    padding-bottom: max(var(--safe-area-bottom, 0px), env(keyboard-inset-height, 0px));
  }
  .contact-widget__panel.is-open { transform: translateY(0); }

  /* タッチ標的を 44px 以上に確保（textarea は min-height:96px のため対象外） */
  .contact-widget__input,
  .contact-widget__select,
  .contact-widget__submit,
  .contact-widget__cancel { min-height: 44px; }
}

/* ---- 横向きスマホ・短い縦幅（幅>640px の横向き端末はデスクトップ popover 経路になるため補正） ----
   hover:none でタッチ端末に限定（短くリサイズしたデスクトップ窓・縦向き・通常デスクトップには一切影響しない）。
   高さを dvh＋safe-area で cap し、余白と textarea を圧縮して短い縦幅でも収まりよく表示する。 */
@media (hover: none) and (orientation: landscape) and (max-height: 600px) {
  .contact-widget__panel {
    max-height: min(560px, calc(100dvh - 112px - var(--safe-area-bottom, 0px) - var(--safe-area-top, 0px)));
  }
  .contact-widget__header { padding: 12px 22px 10px; }
  .contact-widget__footer { padding: 10px 22px 12px; }
  .contact-widget__fields { padding: 12px 22px; }
  .contact-widget__field { margin-bottom: 10px; }
  .contact-widget__textarea { min-height: 56px; }
}

/* ---- テーマ別の質感調整（ダークは各 base ルールのまま＝描画不変・light/wood のみ上書き） ----
   影は theme_variables.css の shadow トークン言語に合わせ、light は淡く・wood は茶系インク(20,12,6)へ。
   共有トークン(theme_variables.css)には手を入れず、コンポーネント内で完結させる（C5 方針）。 */

/* FAB / 消去× の drop-shadow をテーマ追従（gold-glow 部分は既にトークンで適応済み） */
[data-theme="light"] .contact-widget__fab {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), var(--gold-glow);
}
[data-theme="light"] .contact-widget__fab:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20), 0 0 26px rgba(var(--gold-primary-rgb, 255, 215, 0), 0.5);
}
[data-theme="light"] .contact-widget__dismiss {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
[data-theme="wood"] .contact-widget__fab {
  box-shadow: 0 8px 24px rgba(20, 12, 6, 0.45), var(--gold-glow);
}
[data-theme="wood"] .contact-widget__fab:hover {
  box-shadow: 0 12px 30px rgba(20, 12, 6, 0.55), 0 0 26px rgba(var(--gold-primary-rgb, 255, 215, 0), 0.5);
}
[data-theme="wood"] .contact-widget__dismiss {
  box-shadow: 0 2px 6px rgba(20, 12, 6, 0.35);
}

/* <select> シェブロン: data-URI 内で var() が使えないため、テーマごとに stroke だけ差し替える。
   ダークは base(#999) を維持＝描画不変。light=#555 / wood=#c8956a は既存 select 慣習
   (home_widgets_theme.css) に一致。background-image のみ上書きし repeat/position/padding は継承。
   light はライト地テーマのため options ポップアップの color-scheme も light へ上書きする。 */
[data-theme="light"] .contact-widget__select {
  color-scheme: light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="wood"] .contact-widget__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c8956a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* checked 行のテーマ別不透明 hex（task_imports.css の light/wood option:checked と同値）。
   light は琥珀（明地＋暗文字）・wood は銅系アクセント。ダークは base（#3a3217/#ffd700）のまま */
[data-theme="light"] .contact-widget__select option:checked {
  background-color: #fef3c7;
  color: #b45309;
}
[data-theme="wood"] .contact-widget__select option:checked {
  background-color: #2a241c;
  color: #c8956a;
}

/* ライトのみ: FAB/× のフォーカスリング色を --gold-primary(#FFD700・白背景で 1.33:1) から
   --lx-gold-text(#b45309・約4.7:1) へ上書きしキーボードフォーカスを可視化（"2px solid"/offset は継承）。
   dark(#FFD700)/wood(コッパー #c8956a) は base のまま＝不変。 */
[data-theme="light"] .contact-widget__fab:focus-visible,
[data-theme="light"] .contact-widget__dismiss:focus-visible {
  outline-color: var(--lx-gold-text, #b45309);
}

/* ---- RTL（ar-SA 等）: 右下→左下へミラー ---- */
[dir="rtl"] .contact-widget { right: auto; left: calc(24px + var(--safe-area-left, 0px)); align-items: flex-start; }
[dir="rtl"] .contact-widget__dismiss { right: auto; left: -8px; }
[dir="rtl"] .contact-widget__fab-icon { transform: scaleX(-1); } /* チャットバブルの向きを RTL でミラー */
[dir="rtl"] .contact-widget__panel { transform-origin: bottom left; }
[dir="rtl"] .contact-widget__header::after { left: auto; right: 22px; }
[dir="rtl"] .contact-widget__close { right: auto; left: 16px; }
[dir="rtl"] .contact-widget__counter { text-align: left; }
[dir="rtl"] .contact-widget__select { background-position: left 12px center; padding-right: 12px; padding-left: 32px; }
@media (max-width: 640px) {
  [dir="rtl"] .contact-widget { left: calc(16px + var(--safe-area-left, 0px)); }
}

/* ---- モバイルでサイドバードロワーが開いている間は FAB/ウィジェットを隠す（重なり・タップ乗っ取り防止） ----
   .sidebar.is-open は既存サイドバー機能の状態クラス。:has で読み取るのみ（サイドバーは一切改変しない）。
   クラス構造が変わっても本ルールは自然に無効化＝現行挙動へフェイルセーフ。ドロワー breakpoint(768px) に合わせる。 */
@media (max-width: 768px) {
  /* .board-container は board レイアウト（カンバン/ガント/リスト等）の同型コンテナ（2026-07-06 追加） */
  .main-container:has(.sidebar.is-open) ~ .contact-widget,
  .board-container:has(.sidebar.is-open) ~ .contact-widget {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  /* 退避中は「開いたパネル」も明示無効化する（下記カンバンモーダル退避と同じ理由・2026-07-08）。 */
  .main-container:has(.sidebar.is-open) ~ .contact-widget .contact-widget__panel,
  .main-container:has(.sidebar.is-open) ~ .contact-widget .contact-widget__fab-wrap,
  .board-container:has(.sidebar.is-open) ~ .contact-widget .contact-widget__panel,
  .board-container:has(.sidebar.is-open) ~ .contact-widget .contact-widget__fab-wrap {
    visibility: hidden;
    pointer-events: none;
  }
}

/* ---- カンバン系モーダル（.kanban-modal.active）表示中はウィジェット全体を退避（全幅・2026-07-08） ----
   board レイアウトでは .board-main の backdrop-filter + z-index:5 がスタッキングコンテキストを
   作り、モーダル（z-index:2000）は root 階層では z:5 に閉じ込められる。その結果 body 直下の
   本ウィジェット（z-index:1400）が「開いたモーダルより上」に浮き、FAB がモーダル右下に重なる。
   モーダル表示中はウィジェットを隠して操作の邪魔をしない（サイドバードロワー時の既存ルールと
   同型。.kanban-modal / .active のクラス構造が変われば自然に無効化＝現行挙動へフェイルセーフ）。 */
.main-container:has(.kanban-modal.active) ~ .contact-widget,
.board-container:has(.kanban-modal.active) ~ .contact-widget {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* ---- 退避中は「開いたパネル」も明示無効化する（2026-07-08・敵対レビュー指摘の是正）----
   コンテナへの visibility:hidden / pointer-events:none は、開いたパネルには効かない:
   .contact-widget__panel.is-open が visibility:visible を、base ルール（L58-61）が
   pointer-events:auto を再有効化するため（子の明示値は親の値を継承しない）。かつ container の
   opacity:0 はサブツリーを不可視化するだけで hit-testing は止めない。放置すると「開いたパネル」が
   透明なクリック吸収矩形としてモーダル上に残り、まさに本 work stream（hotfix #412）が潰した
   click-shield バグを再演する。退避状態では実要素も明示的に hidden + none にする。 */
.main-container:has(.kanban-modal.active) ~ .contact-widget .contact-widget__panel,
.main-container:has(.kanban-modal.active) ~ .contact-widget .contact-widget__fab-wrap,
.board-container:has(.kanban-modal.active) ~ .contact-widget .contact-widget__panel,
.board-container:has(.kanban-modal.active) ~ .contact-widget .contact-widget__fab-wrap {
  visibility: hidden;
  pointer-events: none;
}

/* ===== 桜テーマ（夜桜/昼桜）— stale-base 追従 2026-07-05・contact_widget.css の wood/light ミラー ===== */

/* sakura_night（夜桜）— [data-theme="wood"] ミラー */
[data-theme="sakura_night"] .contact-widget__fab {
  box-shadow: 0 8px 24px rgba(15, 8, 14, 0.45), var(--gold-glow);
}
[data-theme="sakura_night"] .contact-widget__fab:hover {
  box-shadow: 0 12px 30px rgba(15, 8, 14, 0.55), 0 0 26px rgba(var(--gold-primary-rgb, 255, 215, 0), 0.5);
}
[data-theme="sakura_night"] .contact-widget__dismiss {
  box-shadow: 0 2px 6px rgba(15, 8, 14, 0.35);
}
[data-theme="sakura_night"] .contact-widget__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff9dc4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* 夜桜: checked 行を暗紫地＋桜ピンク文字に（task_imports.css の sakura_night option:checked と同値・wood ミラー） */
[data-theme="sakura_night"] .contact-widget__select option:checked {
  background-color: #33243a;
  color: #ff9dc4;
}

/* sakura_day（昼桜）— [data-theme="light"] ミラー */
[data-theme="sakura_day"] .contact-widget__fab {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), var(--gold-glow);
}
[data-theme="sakura_day"] .contact-widget__fab:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20), 0 0 26px rgba(var(--gold-primary-rgb, 255, 215, 0), 0.5);
}
[data-theme="sakura_day"] .contact-widget__dismiss {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
[data-theme="sakura_day"] .contact-widget__select {
  /* 昼桜はライト地のため options ポップアップの color-scheme も light へ（[data-theme="light"] ミラー） */
  color-scheme: light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* 昼桜: checked 行を薄ピンク地＋濃ローズ文字に（task_imports.css の sakura_day option:checked と同値・light ミラー） */
[data-theme="sakura_day"] .contact-widget__select option:checked {
  background-color: #ffdce8;
  color: #c2185b;
}
[data-theme="sakura_day"] .contact-widget__fab:focus-visible,
[data-theme="sakura_day"] .contact-widget__dismiss:focus-visible {
  outline-color: var(--lx-gold-text, #c2185b);
}