/* =========================================================================
   サポートチャット（クマ）
   -------------------------------------------------------------------------
   右下にずっと出しておく。閉じているときは**クマだけ**で、ひとことを添える。
   押すと上にパネルが開き、クマはその上ふちにつかまる（LPの bear-cta と同じ形）。

   トンマナ：面は角丸なし・影で立たせる。丸いのは「印」だけなので、
   ひとことのふきだしと未読の点だけがピル／円（app-square.css の並びに足してある）。
   ========================================================================= */

.bs-wrap{
  position:fixed; z-index:9000;                 /* モーダル(99000)より下＝重ならない */
  right:clamp(10px,2vw,22px); bottom:clamp(10px,2vw,20px);
  display:flex; flex-direction:column; align-items:flex-end; gap:0;
  /* ⚠ 枠そのものは素通しにする。クマの絵の外側（透明なところ）で下のボタンを
     受け止めてしまうと、押せないものが増える。押せるのは中の部品だけにする。 */
  pointer-events:none;
}
.bs-wrap > *{ pointer-events:auto; }
/* 保護者・生徒には出さない。デモのスマホ枠の中でも邪魔なので出さない */
body.role-parent .bs-wrap,
body.role-student .bs-wrap,
body.demo-shell .bs-wrap{ display:none; }

/* ---- 閉じているとき：クマだけ ---- */
.bs-open{
  position:relative; display:block; border:0; background:none; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.bs-open-bear{
  display:block; width:clamp(76px,8vw,104px); height:auto;
  filter:drop-shadow(0 8px 14px rgba(20,50,100,.22));
  animation:bsBob 4.2s ease-in-out infinite; transform-origin:50% 100%;
}
@keyframes bsBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@media(prefers-reduced-motion:reduce){ .bs-open-bear{animation:none} }

/* ひとこと。クマの左上に出す（右端に寄せると画面から出るので左へ）
   ⚠ 面の色を #fff で直書きしないこと。文字は var(--text) なので、
     ダークモードだと**白の上に白**になって「サポートはこちら」が消える
     （2026-09-09 にユーザーから指摘）。ふきだしの尾（::after）も同じ色にする。 */
.bs-say{
  position:absolute; right:calc(100% - 14px); bottom:58%;
  white-space:nowrap; font-size:12px; font-weight:800; line-height:1;
  color:var(--text,#0f1b2e); background:var(--surface,#fff); padding:9px 13px;
  box-shadow:0 6px 18px rgba(20,50,100,.18); border:1px solid var(--border,#e3e8f0);
}
.bs-say::after{                                  /* ふきだしの尾 */
  content:''; position:absolute; left:100%; bottom:9px;
  border:6px solid transparent; border-left-color:var(--surface,#fff);
}
.bs-open:hover .bs-say{ background:var(--primary-fill,#0369A1); color:#fff; border-color:transparent; }
.bs-open:hover .bs-say::after{ border-left-color:var(--primary-fill,#0369A1); }
@media(max-width:520px){ .bs-say{ display:none; } }

/* ---- 開いているとき ---- */
.bs-panel{
  position:relative; width:min(370px,calc(100vw - 24px));
  background:var(--surface,#fff); border:1px solid var(--border,#e3e8f0);
  box-shadow:0 24px 60px rgba(15,35,80,.26), 0 4px 12px rgba(15,35,80,.10);
  display:flex; flex-direction:column; overflow:visible;
  margin-top:52px;                                /* 上ふちのクマのぶん空ける */
}
/* パネルの上ふちにつかまるクマ。絵は 760x418 で、下のほうに手がある */
.bs-grab{
  position:absolute; left:14px; bottom:calc(100% - 10px);
  width:124px; height:auto; pointer-events:none; user-select:none;
  filter:drop-shadow(0 -2px 8px rgba(20,50,100,.14));
  clip-path:inset(3% 0 0 0);   /* 絵の上端に薄い横線が入っているので落とす（耳は7%から） */
}
.bs-head{
  display:flex; align-items:center; gap:8px; padding:11px 12px 11px 146px;
  border-bottom:1px solid var(--border,#e3e8f0); min-height:46px;
}
.bs-title{ font-size:13px; font-weight:900; color:var(--text,#0f1b2e); }
.bs-sub{ font-size:10.5px; color:var(--text-3,#7a8699); font-weight:700; }
.bs-close{
  margin-left:auto; border:0; background:none; cursor:pointer; padding:6px;
  color:var(--text-3,#7a8699); font-size:17px; line-height:1;
}
.bs-close:hover{ color:var(--text,#0f1b2e); }

.bs-body{
  padding:12px; overflow-y:auto; overscroll-behavior:contain;
  min-height:120px; max-height:min(62vh,470px); display:flex; flex-direction:column; gap:10px;
  background:var(--surface-2,#f6f8fc);
}
/* ---- 選択肢（やりたいこと → 具体的なこと） ---- */
.bs-lead{ font-size:12.5px; font-weight:800; color:var(--text-2,#33415c); line-height:1.7; }
.bs-opts{ display:flex; flex-direction:column; gap:7px; }
/* 言葉で探す（2026-09-10・ユーザー指示）。打つたびに下の案内が絞り込まれる。 */
.bs-search{ position:relative; display:flex; align-items:center; }
.bs-search-ic{ position:absolute; left:10px; width:14px; height:14px; color:var(--text-3,#55637a);
  pointer-events:none; }
.bs-search-in{ width:100%; box-sizing:border-box; padding:9px 30px 9px 30px; font-family:inherit;
  font-size:12.5px; font-weight:700; color:var(--text,#0f172a);
  background:var(--bg-secondary,#f1f5f9); border:1px solid var(--border,#e2e8f0); }
.bs-search-in::placeholder{ color:var(--text-3,#55637a); font-weight:600; }
.bs-search-in:focus{ outline:none; border-color:var(--primary,#2f6bff); }
.bs-search-x{ position:absolute; right:6px; width:20px; height:20px; border:0; padding:0; cursor:pointer;
  background:none; color:var(--text-3,#55637a); font-size:12px; line-height:1; }
.bs-search-x:hover{ color:var(--text,#0f172a); }
/* ⚠ ✕ は打っている最中でも作り直さないため、いつも置いて hidden で出し入れする
   （app-support.js の注記）。この1行を消すと、空のときに ✕ が出たままになる。 */
.bs-search-x[hidden]{ display:none; }
/* 「よくある質問」「◯件」などの小見出し */
.bs-sec{ font-size:11px; font-weight:800; color:var(--text-3,#55637a); margin:2px 0 -2px; }
/* 検索の結果は、どの枝のものかも一緒に出す（同じ言葉が別の枝にもあるため） */
.bs-opt-t{ display:block; }
.bs-opt-p{ display:block; font-size:10.5px; font-weight:700; color:var(--text-3,#55637a); margin-top:2px; }
.bs-none{ font-size:12px; color:var(--text-2,#33415c); line-height:1.8; }
.bs-opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--border,#e3e8f0); background:var(--surface,#fff);
  color:var(--text,#0f1b2e); font:inherit; font-size:12.5px; font-weight:700;
  line-height:1.6; padding:11px 30px 11px 13px; position:relative;
  box-shadow:0 2px 8px rgba(20,50,100,.09);
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.bs-opt::after{                                  /* 右端の矢印 */
  content:''; position:absolute; right:13px; top:50%; width:6px; height:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-50%) rotate(-45deg); opacity:.45;
  /* app-square.css が *::after まで角を丸めるので、ここだけ角に戻す（丸いと矢印に見えない） */
  border-radius:0 !important;
}
.bs-opt:hover{ border-color:var(--primary,#2f6bff); color:var(--primary-ink,#2f6bff); transform:translateX(2px); }
.bs-opt:focus-visible{ outline:2px solid var(--primary,#2f6bff); outline-offset:1px; }
/* お問い合わせは、いつも並びのいちばん下。他の選択肢と見分けがつくように控えめに */
.bs-opt.contact{
  margin-top:5px; background:none; border-style:dashed; box-shadow:none;
  color:var(--text-3,#7a8699); font-weight:700;
}
.bs-opt.contact:hover{ color:var(--primary-ink,#2f6bff); border-color:var(--primary,#2f6bff); }
/* ---- お問い合わせ（パネルの中で書いて送る） ---- */
.bs-form{ display:flex; flex-direction:column; gap:8px; }
.bs-in{
  width:100%; border:1px solid var(--border,#e3e8f0); background:var(--surface,#fff);
  color:var(--text,#0f1b2e); font:inherit; font-size:12.5px; line-height:1.6;
  padding:10px 11px; box-shadow:0 2px 8px rgba(20,50,100,.06);
}
.bs-in:focus{ outline:2px solid var(--primary,#2f6bff); outline-offset:-1px; }
.bs-ta{ resize:vertical; min-height:88px; max-height:200px; }
.bs-note{ font-size:10.5px; color:var(--text-3,#7a8699); line-height:1.6; }
.bs-err{ font-size:11.5px; font-weight:700; color:#b91c1c; min-height:1em; line-height:1.5; }
.bs-send{
  border:0; background:var(--primary-fill,#0369A1); color:#fff; cursor:pointer;
  font:inherit; font-size:13px; font-weight:900; padding:11px 14px;
  box-shadow:0 8px 20px rgba(47,107,255,.28);
}
.bs-send:hover{ filter:brightness(1.07); }
.bs-send:disabled{ opacity:.5; cursor:default; box-shadow:none; }
/* 送り終えたあと */
.bs-done{ background:var(--surface,#fff); padding:16px 14px; box-shadow:0 2px 8px rgba(20,50,100,.10); }
.bs-done-t{ font-size:14px; font-weight:900; color:var(--primary-ink,#2f6bff); margin-bottom:5px; }
.bs-done-b{ font-size:12.5px; color:var(--text-2,#33415c); line-height:1.8; }

/* 枠の一番上の「サポートを表示しない」。
   選択肢（.bs-opt）と間違えて押されないよう、白い板にせず、下線つきの控えめな帯にする。 */
/* ⚠ 「サポートを表示しない」は**いちばん下**（2026-09-10・ユーザー指示。探しに来た人が
   最初に見るのが「消す」では困る）。HTMLは下に移したのに、**`order:-1` が残っていて
   見た目だけ先頭のまま**だった（2026-09-14に発見。確認スクリプトはずっと赤かった）。
   ⚠ 仕切りの線も、上に置くときの `border-bottom` から `border-top` へ。 */
.bs-hide{
  margin-top:2px; display:flex; flex-direction:column; gap:2px; text-align:left;
  border:0; border-top:1px solid var(--border,#e3e9f2); background:none;
  cursor:pointer; font:inherit; padding:9px 2px 0;
}
.bs-hide-t{ font-size:11.5px; font-weight:800; color:var(--text-3,#7a8699); }
.bs-hide-s{ font-size:10.5px; font-weight:600; color:var(--text-4,#9aa5b6); line-height:1.5; }
.bs-hide:hover .bs-hide-t{ color:var(--primary-ink,#2f6bff); }

.bs-back{
  align-self:flex-start; border:0; background:none; cursor:pointer; font:inherit;
  font-size:11.5px; font-weight:800; color:var(--text-3,#7a8699); padding:4px 0;
}
.bs-back:hover{ color:var(--primary-ink,#2f6bff); }
@media(prefers-reduced-motion:reduce){ .bs-opt{transition:none} .bs-opt:hover{transform:none} }

/* ⚠ スマホの代表(オーナー)には下にフッターメニューが出る（#owner-footer-nav）。
   そのまま置くとクマが上に乗ってメニューを隠すので、フッターのぶん持ち上げる。
   高さは アイコン21 + すき間3 + 文字 + 上下の余白6×2 ＝ おおよそ58px。 */
@media(max-width:900px){
  body.role-store .bs-wrap{ bottom:calc(64px + env(safe-area-inset-bottom,0px)); }
  /* サイドメニューを開いている間はフッターが消えるので、クマも元の位置へ */
  body.role-store:has(.sidebar.open) .bs-wrap{ bottom:clamp(10px,2vw,20px); }
}

@media(max-width:520px){
  /* 横は端末の幅に合わせる。切り欠き（safe-area）のぶんも空ける */
  .bs-panel{
    /* 右の余白（.bs-wrap の right:10px）と同じだけ左にも残す＝左右対称に収まる */
    width:calc(100vw - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
    max-width:calc(100vw - 20px);
  }
  .bs-body{ max-height:min(56vh,400px); }
  .bs-grab{ width:88px; } .bs-head{ padding-left:110px; }
  /* ⚠ **入力欄は 16px を切らない**（ユーザー指摘 2026-09-10）。
     iOS は 16px 未満の欄に触れると**画面ごと拡大する**。拡大されると、
     もう横幅が端末に収まらなくなり、指で戻すまで元に戻らない。
     文字を小さく見せたいときも、ここだけは下げないこと。 */
  .bs-search-in, .bs-in{ font-size:16px; }
}