/* ============================================================
 * 企業道OS 常駐マスコット（黒猫＝ミステリアス相棒／黒犬＝元気で忠実な相棒）
 * 2026-07-07 社長要望。純CSS/SVG・自己完結。<link rel="stylesheet" href="mascot.css"> ＋ <script src="mascot.js">。
 * 黒いシルエット＋淡いリムライト＋光る目で、暗い司令室UIでも見えつつ黒シルエットに見える設計。
 * ============================================================ */
:root{
  --m-fill:#241f18;              /* 黒に近いが暗地でも見える */
  --m-rim:rgba(240,234,220,.30); /* 影から浮かぶ縁 */
  --m-cat-eye:#8fb0a0;           /* 猫＝セージの瞳（ミステリアス） */
  --m-dog-eye:#d6ab57;           /* 犬＝山吹の瞳（あたたかい） */
}
#os-mascots{ position:fixed; z-index:120; display:flex; align-items:flex-end; gap:12px; pointer-events:none; }
#os-mascots.pos-br{ right:18px; bottom:14px; }
#os-mascots.pos-bl{ left:18px; bottom:14px; flex-direction:row-reverse; }
#os-mascots .m{ position:relative; pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#os-mascots .m svg{ display:block; width:auto; overflow:visible; filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)); }
#os-mascots.size-s .m svg{ height:48px; }
#os-mascots.size-m .m svg{ height:66px; }
#os-mascots.size-l .m svg{ height:88px; }
/* 右下では左（画面中央）を向く／左下では右を向く */
#os-mascots.pos-br .m .flip{ transform:scaleX(-1); transform-origin:center; }

/* シルエット塗り・縁・目 */
.m .sil{ fill:var(--m-fill); stroke:var(--m-rim); stroke-width:1.1; }
.m .eye{ transform-box:fill-box; transform-origin:center; }
.m.cat .eye{ fill:var(--m-cat-eye); filter:drop-shadow(0 0 3px var(--m-cat-eye)); }
.m.dog .eye{ fill:var(--m-dog-eye); filter:drop-shadow(0 0 3px var(--m-dog-eye)); }

/* ===== 吹き出し ===== */
.m .bubble{
  position:absolute; bottom:100%; left:50%; transform:translate(-50%,-6px) scale(.9);
  margin-bottom:8px; white-space:nowrap; font-family:var(--sans,system-ui,sans-serif);
  font-size:11.5px; line-height:1; color:var(--text,#f0eadc);
  background:var(--bg2,#211d15); border:1px solid var(--border-strong,rgba(240,234,220,.3));
  border-radius:12px; padding:7px 11px; box-shadow:0 8px 20px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.m .bubble::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--bg2,#211d15); }
.m .bubble.show{ opacity:1; transform:translate(-50%,0) scale(1); }

/* ===== モーション（動きの量は data-motion で強弱、reduce/OFFで停止） ===== */
@media (prefers-reduced-motion:no-preference){
  #os-mascots:not([data-motion="off"]) .m.cat .tail{ transform-box:fill-box; transform-origin:50% 100%; animation:catTail 3.2s ease-in-out infinite; }
  #os-mascots:not([data-motion="off"]) .m.dog .tail{ transform-box:fill-box; transform-origin:50% 100%; animation:dogTail 1.1s ease-in-out infinite; }
  #os-mascots:not([data-motion="off"]) .m .eyes{ animation:blink 6s steps(1) infinite; }
  #os-mascots[data-motion="high"] .m.cat .tail{ animation-duration:2.4s; }
  #os-mascots[data-motion="high"] .m.dog .tail{ animation-duration:.8s; }
  #os-mascots[data-motion="low"] .m.dog .tail{ animation-duration:1.7s; }
  #os-mascots[data-motion="low"] .m .eyes{ animation-duration:9s; }
}
@keyframes catTail{ 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(7deg)} }
@keyframes dogTail{ 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(16deg)} }
@keyframes blink{ 0%,96%,100%{transform:scaleY(1)} 98%{transform:scaleY(.12)} }

/* イベント反応（JSがクラス付与、finite→自動解除） */
.m.react-happy{ animation:mJump .6s ease 2; }          /* 喜ぶ：小ジャンプ */
@keyframes mJump{ 0%,100%{transform:translateY(0)} 35%{transform:translateY(-10px)} 60%{transform:translateY(-2px)} }
.m.react-wagbig .tail{ animation:dogTail .5s ease-in-out 6 !important; }  /* 大きくしっぽ */
.m.react-alert{ animation:mBack .5s ease; }             /* 警戒：少し後ずさり */
@keyframes mBack{ 0%,100%{transform:none} 40%{transform:translateX(6px)} }
.m.react-alert .ear{ transform-box:fill-box; transform-origin:50% 100%; animation:earUp .4s ease forwards; }
@keyframes earUp{ to{ transform:translateY(-2px) rotate(-6deg) } }
.m.react-startle{ animation:mStartle .5s ease; }        /* びっくり */
@keyframes mStartle{ 0%{transform:translateY(0)} 25%{transform:translateY(-7px) scale(1.04)} 100%{transform:none} }
.m.react-tap .paw{ transform-box:fill-box; transform-origin:50% 0; animation:paw .35s ease 3; }  /* ちょんちょん */
@keyframes paw{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-16deg)} }
.m.react-sleep{ opacity:.72; }
.m.react-sleep .z{ opacity:1 !important; animation:zfloat 3s ease-in-out infinite; }
@keyframes zfloat{ 0%{opacity:0; transform:translate(0,0)} 30%{opacity:.8} 100%{opacity:0; transform:translate(6px,-12px)} }
.m .z{ opacity:0; font-family:var(--serif,serif); }
.m.react-look .flip{ animation:mLook 1.4s ease; }       /* カードの方を見る */
@keyframes mLook{ 0%,100%{transform:scaleX(-1) rotate(0)} 40%,70%{transform:scaleX(-1) rotate(-5deg)} }
#os-mascots.pos-bl .m.react-look .flip{ animation:mLookL 1.4s ease; }
@keyframes mLookL{ 0%,100%{transform:rotate(0)} 40%,70%{transform:rotate(5deg)} }

/* たまに歩く（左右に少し移動して戻る） */
.m.react-walk{ animation:mWalk 3.4s ease-in-out; }
@keyframes mWalk{ 0%{transform:translateX(0)} 50%{transform:translateX(-26px)} 100%{transform:translateX(0)} }

/* 設定パネル */
#os-mascot-gear{ position:fixed; z-index:121; width:24px; height:24px; border-radius:50%;
  background:var(--glass,rgba(240,234,220,.05)); border:1px solid var(--border,rgba(240,234,220,.15));
  color:var(--muted,#9c937f); font-size:12px; line-height:22px; text-align:center; cursor:pointer; opacity:.5;
  transition:opacity .15s; pointer-events:auto; }
#os-mascot-gear:hover{ opacity:1; }
#os-mascots.pos-br ~ #os-mascot-gear, #os-mascot-gear.pos-br{ right:14px; }
#os-mascot-panel{ position:fixed; z-index:200; bottom:52px; width:230px; padding:14px 15px;
  background:var(--bg2,#211d15); border:1px solid var(--border-strong,rgba(240,234,220,.3)); border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.55); font-family:var(--sans,system-ui,sans-serif); font-size:12px; color:var(--text,#f0eadc);
  display:none; }
#os-mascot-panel.open{ display:block; }
#os-mascot-panel h4{ font-family:var(--serif-jp,serif); font-weight:600; margin:0 0 10px; font-size:14px; letter-spacing:.04em; }
#os-mascot-panel .row{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin:7px 0; }
#os-mascot-panel .row label{ color:var(--muted,#9c937f); }
#os-mascot-panel select,#os-mascot-panel button{ font:inherit; color:var(--text,#f0eadc);
  background:var(--glass,rgba(240,234,220,.05)); border:1px solid var(--border,rgba(240,234,220,.15)); border-radius:6px; padding:4px 7px; cursor:pointer; }
#os-mascot-panel .seg{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
#os-mascot-panel .seg button.on{ background:rgba(143,176,160,.22); border-color:var(--accent,#8fb0a0); color:var(--accent,#8fb0a0); }
#os-mascot-panel .tests{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border,rgba(240,234,220,.15)); display:flex; gap:6px; flex-wrap:wrap; }
#os-mascot-panel .tests button{ font-size:11px; }

/* スマホ：狭い画面は小さく＆1匹（JS側でも制御） */
@media (max-width:640px){
  #os-mascots.size-l .m svg,#os-mascots.size-m .m svg{ height:46px; }
  #os-mascots{ gap:6px; }
  #os-mascot-panel{ width:200px; }
}
/* reduce設定：動き停止 */
#os-mascots[data-motion="off"] .m *{ animation:none !important; }
@media (prefers-reduced-motion:reduce){ #os-mascots .m *{ animation:none !important; } }

/* ===== 位置調整（右下の検索FABを隠さない） ===== */
#os-mascots.pos-br{ right:78px; bottom:16px; }   /* FABの左に置く */
#os-mascots.pos-bl{ left:18px; bottom:16px; }

/* ===== 肉球スタンプ ===== */
.os-paw-stamp{ position:fixed; z-index:119; pointer-events:none; opacity:0; transform:scale(.4) rotate(-12deg); animation:pawStamp 2.1s ease forwards; }
@keyframes pawStamp{ 0%{opacity:0; transform:scale(.4) rotate(-12deg)} 16%{opacity:.9; transform:scale(1.12) rotate(-6deg)} 32%{transform:scale(1) rotate(-6deg)} 76%{opacity:.7} 100%{opacity:0} }
/* ===== ミニ紙吹雪 ===== */
.os-confetti{ position:fixed; inset:0; z-index:210; pointer-events:none; overflow:hidden; }
.os-confetti i{ position:absolute; top:-14px; width:8px; height:8px; border-radius:1px; opacity:.9; animation:confFall 2.4s cubic-bezier(.3,.5,.5,1) forwards; }
@keyframes confFall{ 0%{transform:translateY(0) translateX(0) rotate(0)} 100%{transform:translateY(84vh) translateX(var(--x,0)) rotate(400deg); opacity:0} }
/* ===== 称号バッジ ===== */
.os-badge{ position:fixed; top:66px; right:16px; z-index:210; pointer-events:none; font-family:var(--sans,system-ui,sans-serif); font-size:12.5px;
  color:var(--text,#f0eadc); background:var(--bg2,#211d15); border:1px solid var(--gold,#d6ab57); border-radius:999px; padding:7px 14px;
  box-shadow:0 8px 22px rgba(0,0,0,.5); opacity:0; transform:translateY(-8px); transition:opacity .35s ease, transform .35s ease; }
.os-badge.show{ opacity:1; transform:translateY(0); }
.os-badge b{ color:var(--gold,#d6ab57); font-weight:600; }
/* ===== 季節レイヤー（控えめ） ===== */
.os-season{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.os-season i{ position:absolute; top:-16px; opacity:.4; color:var(--muted,#9c937f); animation:seasonFall linear infinite; }
.os-season[data-season="autumn"] i{ color:#c2823c; } .os-season[data-season="spring"] i{ color:#d8a7b0; }
.os-season[data-season="winter"] i,.os-season[data-season="xmas"] i{ color:#cfe0e6; } .os-season[data-season="halloween"] i{ color:#d68a4f; }
@keyframes seasonFall{ 0%{transform:translateY(0) translateX(0) rotate(0)} 100%{transform:translateY(104vh) translateX(28px) rotate(160deg)} }
@media (prefers-reduced-motion:reduce){ .os-confetti,.os-season,.os-paw-stamp{ display:none !important; } }

/* ===== 文字ちょんちょん（対象の一時的な揺れ・可読性維持／実テキストは非変更） ===== */
.mascot-wiggle{ animation:mascotWiggle .58s ease; }
@keyframes mascotWiggle{ 0%,100%{transform:none} 25%{transform:translateY(-1.5px) rotate(-.6deg) scale(1.015)} 60%{transform:translateY(0) rotate(.5deg)} }
.os-jare{ position:fixed; z-index:119; width:4px; height:4px; border-radius:50%; background:var(--m-cat-eye,#8fb0a0); pointer-events:none; opacity:0; box-shadow:0 0 4px var(--m-cat-eye,#8fb0a0); animation:jarePop .65s ease forwards; }
@keyframes jarePop{ 0%{opacity:0; transform:scale(.4)} 30%{opacity:.95; transform:scale(1)} 100%{opacity:0; transform:translateY(-9px) scale(.55)} }
@media (prefers-reduced-motion:reduce){ .mascot-wiggle,.os-jare{ animation:none !important; } }