/* =====================================================================
   外壁塗装ラボ カラーシミュレーション — キャラクター/ロゴ オーバーレイ
   追加専用レイヤー（アプリ本体のReactロジックには一切触れない）
   - ヘッダー：左＝外壁塗装ラボ公式ロゴ／右＝公式3キャラ
   - ガイド：ステップ連動でキャラ＋吹き出し（写真・AI認識画面では非表示）
   ブランド色：深緑 #1a5c4a
   ===================================================================== */

:root{
  --labo-green:#1a5c4a;
  --labo-green-d:#144a3b;
}

/* アプリ既存の白ヘッダーを隠し、ブランドヘッダーに置き換える */
#root header{ display:none !important; }

/* ===== ブランドヘッダー ===== */
#labo-ov-header{
  position:sticky; top:0; z-index:50;
  background:var(--labo-green);
  box-shadow:0 1px 6px rgba(0,0,0,.12);
}
#labo-ov-header .labo-ov-h-inner{
  max-width:768px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 16px;
}
#labo-ov-header .labo-ov-logo{ display:flex; align-items:center; line-height:0; }
#labo-ov-header .labo-ov-logo img{
  height:26px; width:auto; display:block;
}
#labo-ov-header .labo-ov-chars{
  display:flex; align-items:flex-end; gap:2px;
}
#labo-ov-header .labo-ov-chars img{
  height:32px; width:auto; display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
@media (min-width:480px){
  #labo-ov-header .labo-ov-logo img{ height:30px; }
  #labo-ov-header .labo-ov-chars img{ height:36px; }
}

/* ===== ステップ連動ガイド（キャラ＋吹き出し） ===== */
#labo-ov-guide{
  position:fixed; left:10px; bottom:84px; z-index:40;
  display:none;                 /* is-on で表示 */
  align-items:flex-end; gap:6px;
  max-width:94vw;
  pointer-events:none;          /* 操作を絶対に邪魔しない */
}
#labo-ov-guide.is-on{ display:flex; }
#labo-ov-guide .labo-ov-figs{ display:flex; align-items:flex-end; gap:1px; }
#labo-ov-guide .labo-ov-figs img{
  height:66px; width:auto; display:block;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));
  animation:labo-pop .32s ease-out;
}
#labo-ov-guide.is-complete .labo-ov-figs img{ height:50px; }

#labo-ov-guide .labo-ov-bubble{
  position:relative;
  background:#fff; color:var(--labo-green-d);
  font-weight:700; font-size:13px; line-height:1.35;
  padding:8px 12px; border-radius:14px;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
  border:1.5px solid rgba(26,92,74,.18);
  white-space:nowrap; margin-bottom:14px;
  animation:labo-pop .32s ease-out;
}
/* 吹き出しのしっぽ（キャラ側／左下向き） */
#labo-ov-guide .labo-ov-bubble::after{
  content:""; position:absolute; left:-7px; bottom:8px;
  border-width:6px 8px 6px 0; border-style:solid;
  border-color:transparent #fff transparent transparent;
  filter:drop-shadow(-1px 1px 0 rgba(26,92,74,.12));
}
/* ガイドは［キャラ→吹き出し］の並び。しっぽが左を向くよう順序を入替 */
#labo-ov-guide{ flex-direction:row; }
#labo-ov-guide .labo-ov-bubble{ order:2; }
#labo-ov-guide .labo-ov-figs{ order:1; }

@media (max-width:360px){
  #labo-ov-guide .labo-ov-figs img{ height:56px; }
  #labo-ov-guide .labo-ov-bubble{ font-size:12px; padding:7px 10px; }
}

@keyframes labo-pop{
  0%{ transform:translateY(6px) scale(.96); opacity:0; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  #labo-ov-guide .labo-ov-figs img,
  #labo-ov-guide .labo-ov-bubble{ animation:none; }
}