/* ATS Bridge の案内キャラクター。サイドパネルと補助ツールの画面で同じ見た目にする。 */
/* ---------- characters ---------- */
.g-ch {
  display: inline-block;
  flex: 0 0 auto;
  position: relative;
  width: 1.16em;
  height: 1em;
  font-size: 44px;
  line-height: 0;
  --ch-color: var(--g-blue);
}
.g-ch-mini { font-size: 26px; }
.ch-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ch-body, .ch-leaf { fill: var(--ch-color); }
.ch-stem { fill: none; stroke: var(--ch-color); stroke-width: 4; stroke-linecap: round; }
.ch-shine { fill: #fff; opacity: .28; }
.ch-eye, .ch-mouth { fill: #121318; }
.ch-line { fill: none; stroke: #121318; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.ch-cheek { fill: #fff; opacity: .45; }
.ch-drop { fill: #8fd0ff; stroke: #fff; stroke-width: 1.2; }
.ch-fx { fill: var(--ch-color); opacity: 0; }
.ch-fx-joy { fill: #ffc531; }

.ch-accent { fill: var(--ch-accent, #ffc531); }
.ch-ink { fill: #121318; }
.ch-ink-stroke { fill: none; stroke: #121318; stroke-width: 3.2; stroke-linecap: round; }
.ch-ink-thin { fill: none; stroke: #121318; stroke-width: 2.6; }
.ch-glint { fill: #fff; }
.ch-thin { stroke-width: 2.4; }

.ch-move, .ch-squash, .ch-eye, .ch-leaf { transform-box: fill-box; }
.ch-move { transform-origin: 50% 100%; }
.ch-squash { transform-origin: 50% 100%; }
.ch-eye { transform-origin: center; }
.ch-leaf { transform-origin: 0% 100%; }

/* オーブ: dark round body with light visor eyes; the orbit ring carries the step colour */
.ch-pattern { fill: #fff; opacity: .26; }
.ch-dark .ch-pattern { fill: var(--ch-color); opacity: .32; }
.ch-acc-fill { fill: var(--ch-accent, #ffc531); }
.ch-acc-band { fill: #121318; opacity: .22; }
.ch-acc-stroke { fill: none; stroke: var(--ch-accent, #121318); stroke-width: 3.4; stroke-linecap: round; }
.ch-acc-line { fill: none; stroke: #121318; stroke-width: 2.6; stroke-linecap: round; }
.ch-acc-shade { fill: #121318; opacity: .92; }
.ch-acc-glare { opacity: .7; }
.ch-dark .ch-acc-line { stroke: #f4f6ff; }
.ch-dark .ch-acc-shade { fill: #f4f6ff; opacity: .16; stroke: #f4f6ff; stroke-width: 2; }
.ch-ring { fill: none; stroke: var(--ch-color); stroke-width: 5; stroke-linecap: round; }
.ch-spark-tail { fill: none; stroke: var(--ch-accent, #fff); stroke-width: 3; stroke-linecap: round; opacity: .75; }
.ch-dark .ch-body { fill: #16171c; }
.ch-dark .ch-shine { fill: var(--ch-color); opacity: .35; }
.ch-dark .ch-eye, .ch-dark .ch-mouth { fill: #f4f6ff; }
.ch-dark .ch-line { stroke: #f4f6ff; }
.ch-dark .ch-line.ch-out { stroke: #16171c; }
.ch-dark .ch-mouth.ch-out { fill: #16171c; }
.ch-dark .ch-cheek { fill: var(--ch-color); opacity: .7; }
.ch-dark .ch-eye { filter: drop-shadow(0 0 1.6px rgba(170, 200, 255, .9)); }
.ch-dark .ch-fx-working { fill: #16171c; }
.ch-dark .ch-ink-stroke, .ch-dark .ch-ink-thin { stroke: #f4f6ff; }
.ch-dark .ch-ink { fill: #f4f6ff; }

/* idle: breathe, sway a little, blink now and then */
.g-ch[data-ch-state="idle"] .ch-squash { animation: ch-breathe 3.4s ease-in-out infinite; }
.g-ch[data-ch-state="idle"] .ch-move { animation: ch-sway 6s ease-in-out infinite; }
.g-ch[data-ch-face="normal"] .ch-eye, .g-ch[data-ch-face="smile"] .ch-eye, .g-ch[data-ch-face="sweat"] .ch-eye { animation: ch-blink 5.6s infinite; }
.g-ch[data-ch-role="review"] .ch-eye { animation-delay: 1.9s; }
.g-ch[data-ch-role="fill"] .ch-eye { animation-delay: 3.3s; }
.g-ch[data-ch-role="teach"] .ch-eye { animation-delay: 4.4s; }
.g-ch[data-ch-role="review"] .ch-move { animation-delay: -2s; }
.g-ch[data-ch-role="fill"] .ch-move { animation-delay: -4s; }
.g-ch[data-ch-state="idle"] .ch-leaf { animation: ch-leaf 4s ease-in-out infinite; }

/* working: quick hop and a thinking trail */
.g-ch[data-ch-state="working"] .ch-move { animation: ch-work .55s ease-in-out infinite; }
.g-ch[data-ch-state="working"] .ch-fx-working { opacity: 1; }
.g-ch[data-ch-state="working"] .ch-fx-working circle { animation: ch-dot 1.1s ease-in-out infinite; }
.g-ch[data-ch-state="working"] .ch-fx-working circle:nth-child(2) { animation-delay: .18s; }
.g-ch[data-ch-state="working"] .ch-fx-working circle:nth-child(3) { animation-delay: .36s; }
.g-ch[data-ch-state="working"] .ch-leaf { animation: ch-leaf .5s ease-in-out infinite; }

/* joy: one big hop, then a happy bounce with sparkles */
.g-ch[data-ch-state="joy"] .ch-move { animation: ch-joy .9s cubic-bezier(.34,1.42,.64,1) 1, ch-bounce 1.2s ease-in-out .9s infinite; }
.g-ch[data-ch-state="joy"] .ch-fx-joy { animation: ch-spark 1.2s ease-out infinite; }

/* trouble: a short shake, then a small worried wobble */
.g-ch[data-ch-state="trouble"] .ch-move { animation: ch-shake .45s ease-in-out 2, ch-worry 2.4s ease-in-out .9s infinite; }
.g-ch[data-ch-state="trouble"] .ch-squash { transform: scale(1.02, .95); }

@keyframes ch-breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.035,.955); } }
@keyframes ch-sway { 0%,100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
@keyframes ch-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes ch-leaf { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes ch-work { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7%) rotate(1.5deg); } }
@keyframes ch-dot { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes ch-joy { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(0) scale(1.08,.88); } 55% { transform: translateY(-26%) scale(.94,1.08); } 100% { transform: translateY(0) scale(1); } }
@keyframes ch-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes ch-spark { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes ch-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6%) rotate(-4deg); } 75% { transform: translateX(6%) rotate(4deg); } }
@keyframes ch-worry { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(2%); } }


/* ---------- 陶器・やわらかい粘土の見た目（3.6.0） ---------- */
/* 体の上に光と影を重ね、からだ全体にやわらかい影を落とす。足もとに丸い影（接地の影）を置く。 */
.ch-clay { pointer-events: none; }
/* 色を少しだけ白に寄せ、粘土のような落ちついた色にする */
.ch-clay-veil { fill: #fffaf4; opacity: .2; }
.ch-dark .ch-clay-veil { opacity: 0; }
.ch-squash { filter: drop-shadow(0 1.6px 1.2px rgba(60, 44, 34, .16)) drop-shadow(0 5px 6px rgba(60, 44, 34, .10)); }
.ch-ground { fill: #3a2c24; opacity: .13; filter: blur(2.2px); transform-box: fill-box; transform-origin: center; }
.ch-shine { opacity: .38; filter: blur(.9px); }
.ch-ear { filter: brightness(.95); }
.ch-eye { fill: #1d1a1a; }
.ch-cheek { fill: #ff9a9a; opacity: .38; filter: blur(.6px); }
.ch-pattern { opacity: .34; }
.ch-acc { filter: drop-shadow(0 1px .8px rgba(40, 30, 24, .22)); }
.ch-dark .ch-clay-light { opacity: .45; }
.ch-dark .ch-clay-shade { opacity: .6; }
.ch-dark .ch-shine { opacity: .45; }
/* 跳ねるときは接地の影も小さくなる */
.g-ch[data-ch-state="idle"] .ch-ground { animation: ch-ground-breathe 3.4s ease-in-out infinite; }
.g-ch[data-ch-state="working"] .ch-ground { animation: ch-ground-hop .55s ease-in-out infinite; }
.g-ch[data-ch-state="joy"] .ch-ground { animation: ch-ground-hop 1.2s ease-in-out .9s infinite; }
@keyframes ch-ground-breathe { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.05); } }
@keyframes ch-ground-hop { 0%,100% { transform: scaleX(1); opacity: .13; } 50% { transform: scaleX(.8); opacity: .07; } }
/* 表情が変わるときは、顔だけをそっと入れかえる */
.ch-face { animation: ch-face-in .28s cubic-bezier(.22,.9,.32,1); transform-box: fill-box; transform-origin: center; }
@keyframes ch-face-in { from { opacity: .4; transform: scale(.94); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .ch-ground { fill: #000; opacity: .32; }
[data-theme="dark"] .ch-squash { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }

/* the static blob pseudo eyes do not apply to characters */
.g-ch::before, .g-ch::after { content: none !important; }

@media (prefers-reduced-motion: reduce) {
  .g-ch *, .g-ch { animation: none !important; transition: none !important; }
  .g-ch[data-ch-state="working"] .ch-fx-working,
  .g-ch[data-ch-state="joy"] .ch-fx-joy { opacity: 1; }

}

/* ---------- 3D の絵（3.7.2） ---------- */
/* 設定の見本と同じ 3D を描いた絵。動き（待機・作業中・できた・困った）は絵ごと動かす。 */
.g-ch[data-ch-mode="3d"] { line-height: 0; }
.ch-3d-move, .ch-3d-squash { display: block; width: 100%; height: 100%; transform-origin: 50% 88%; }
.ch-3d { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.g-ch[data-ch-state="idle"] .ch-3d-squash { animation: ch-breathe 3.4s ease-in-out infinite; }
.g-ch[data-ch-state="idle"] .ch-3d-move { animation: ch-sway 6s ease-in-out infinite; }
.g-ch[data-ch-role="review"] .ch-3d-move { animation-delay: -2s; }
.g-ch[data-ch-role="fill"] .ch-3d-move { animation-delay: -4s; }
.g-ch[data-ch-state="working"] .ch-3d-move { animation: ch-work .55s ease-in-out infinite; }
.g-ch[data-ch-state="joy"] .ch-3d-move { animation: ch-joy .9s cubic-bezier(.34,1.42,.64,1) 1, ch-bounce 1.2s ease-in-out .9s infinite; }
.g-ch[data-ch-state="trouble"] .ch-3d-move { animation: ch-shake .45s ease-in-out 2, ch-worry 2.4s ease-in-out .9s infinite; }
@media (prefers-reduced-motion: reduce) { .ch-3d-move, .ch-3d-squash { animation: none !important; } }

/* Companion motion language: hold → anticipation → fast action → long settle.
   Face updates keep these body groups mounted, so a blink never restarts a reaction. */
.ch-satin .ch-squash { filter: none; }
.ch-satin .ch-ground { filter: none; opacity: 1; }
.ch-satin .ch-ear { filter: none; }
.g-ch[data-ch-state="idle"] .ch-squash,
.g-ch[data-ch-state="idle"] .ch-move,
.g-ch[data-ch-state="idle"] .ch-ground,
.g-ch[data-ch-state="idle"] .ch-leaf { animation: none; }
.g-ch[data-ch-face="normal"] .ch-eye,
.g-ch[data-ch-face="smile"] .ch-eye { animation: companion-blink 7.8s linear infinite; }
.g-ch[data-ch-state="working"] .ch-move { animation: companion-consider 4.8s linear infinite; }
.g-ch[data-ch-state="working"] .ch-leaf { animation: none; }
.g-ch[data-ch-state="working"] .ch-ground { animation: none; }
.g-ch[data-ch-state="working"] .ch-fx-working { opacity: 1; }
.g-ch[data-ch-state="working"] .ch-fx-working circle { animation: companion-dot 1.6s ease-in-out infinite; }
.g-ch[data-ch-state="working"] .ch-fx-working circle:nth-child(2) { animation-delay: .18s; }
.g-ch[data-ch-state="working"] .ch-fx-working circle:nth-child(3) { animation-delay: .36s; }
.g-ch[data-ch-state="joy"] .ch-move { animation: companion-joy 1.28s linear 1; }
.g-ch[data-ch-state="joy"] .ch-ground { animation: companion-land 1.28s linear 1; }
.g-ch[data-ch-state="joy"] .ch-fx-joy { animation: companion-spark 1.28s linear 1; }
.g-ch[data-ch-state="trouble"] .ch-move { animation: companion-notice 1.5s linear 1; }
.g-ch[data-ch-state="trouble"] .ch-squash { transform: none; }
.g-ch[data-ch-state="trouble"] .ch-ground { animation: none; }
.ch-face { animation: none; }
@keyframes companion-blink { 0%,74%,78%,100% { transform:scaleY(1); } 75.5%,76% { transform:scaleY(.12); } }
@keyframes companion-consider {
  0%,9%,100% { transform:translateY(0) rotate(0deg); animation-timing-function:cubic-bezier(.4,0,.8,.2); }
  13% { transform:translateY(1%) rotate(-2deg); animation-timing-function:cubic-bezier(.15,.75,.2,1); }
  19% { transform:translateY(-.5%) rotate(4deg); animation-timing-function:cubic-bezier(.1,.6,.2,1); }
  37%,77% { transform:translateY(0) rotate(2.6deg); animation-timing-function:cubic-bezier(.35,0,.2,1); }
  90% { transform:translateY(0) rotate(0deg); }
}
@keyframes companion-joy {
  0% { transform:translateY(0) scale(1); animation-timing-function:cubic-bezier(.45,0,.8,.35); }
  18% { transform:translateY(2%) scale(1.045,.93); animation-timing-function:cubic-bezier(.12,.68,.2,1); }
  33% { transform:translateY(-12%) scale(.97,1.04) rotate(-3deg); animation-timing-function:cubic-bezier(.55,0,.8,.4); }
  51% { transform:translateY(0) scale(1.05,.94) rotate(1.5deg); animation-timing-function:cubic-bezier(.15,.7,.2,1); }
  64% { transform:translateY(-1.2%) scale(.995,1.01) rotate(-.7deg); animation-timing-function:cubic-bezier(.15,.6,.2,1); }
  100% { transform:translateY(0) scale(1) rotate(0deg); }
}
@keyframes companion-land {
  0%,18%,100% { transform:scaleX(1); opacity:1; }
  33% { transform:scaleX(.75); opacity:.55; }
  51% { transform:scaleX(1.15); opacity:1; }
  64% { transform:scaleX(.98); }
}
@keyframes companion-notice {
  0% { transform:rotate(0); animation-timing-function:cubic-bezier(.4,0,.8,.3); }
  13% { transform:rotate(1deg) translateY(1%); animation-timing-function:cubic-bezier(.1,.7,.2,1); }
  24% { transform:rotate(-5deg); animation-timing-function:cubic-bezier(.15,.7,.2,1); }
  56% { transform:rotate(-2.5deg); animation-timing-function:cubic-bezier(.2,.3,.2,1); }
  100% { transform:rotate(0); }
}
@keyframes companion-dot { 0%,75%,100% { opacity:.25; } 25%,45% { opacity:1; } }
@keyframes companion-spark { 0%,21%,100% { opacity:0; } 33%,46% { opacity:.85; } 72% { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .g-ch *, .g-ch { animation: none !important; transition: none !important; }
  .g-ch[data-ch-state="working"] .ch-fx-working,
  .g-ch[data-ch-state="joy"] .ch-fx-joy { opacity: 1; }
}

/* Family acting. Whole-body 2.5D poses, not independently rigged arms. */
.g-ch[data-ch-state="joy"] .ch-kind-mochi .ch-move,
.g-ch[data-ch-state="joy"] .ch-kind-cloud .ch-move { animation: companion-soft-joy 1.5s linear 1; }
.g-ch[data-ch-state="joy"] .ch-kind-bunny .ch-move,
.g-ch[data-ch-state="joy"] .ch-kind-chick .ch-move,
.g-ch[data-ch-state="joy"] .ch-kind-drop .ch-move { animation: companion-spring-joy 1.2s linear 1; }
.g-ch[data-ch-state="joy"] .ch-kind-pebble .ch-move,
.g-ch[data-ch-state="joy"] .ch-kind-bear .ch-move,
.g-ch[data-ch-state="joy"] .ch-kind-robot .ch-move { animation: companion-weighty-joy 1.6s linear 1; }
.g-ch[data-ch-state="joy"] .ch-kind-cat .ch-move,
.g-ch[data-ch-state="joy"] .ch-kind-sprout .ch-move,
.g-ch[data-ch-state="joy"] .ch-kind-ghost .ch-move { animation: companion-curious-joy 1.55s linear 1; }
.g-ch[data-ch-state="working"] .ch-kind-robot .ch-move { animation: companion-precise-work 4s linear infinite; }
.g-ch[data-ch-state="working"] .ch-kind-bear .ch-move,
.g-ch[data-ch-state="working"] .ch-kind-pebble .ch-move { animation-duration:6.2s; }
.g-ch[data-ch-state="working"] .ch-kind-bunny .ch-move,
.g-ch[data-ch-state="working"] .ch-kind-chick .ch-move { animation-duration:3.8s; }
@keyframes companion-soft-joy {
  0% { transform:scale(1); animation-timing-function:cubic-bezier(.4,0,.8,.2); }
  22% { transform:translateY(2%) scale(1.09,.86); animation-timing-function:cubic-bezier(.12,.8,.2,1); }
  37% { transform:translateY(-5%) scale(.96,1.04); animation-timing-function:cubic-bezier(.5,0,.8,.4); }
  55% { transform:scale(1.05,.95); animation-timing-function:cubic-bezier(.12,.65,.2,1); }
  100% { transform:scale(1); }
}
@keyframes companion-spring-joy {
  0% { transform:translateY(0) scale(1); animation-timing-function:cubic-bezier(.4,0,.8,.2); }
  17% { transform:translateY(1%) scale(1.04,.91); animation-timing-function:cubic-bezier(.1,.7,.2,1); }
  31% { transform:translateY(-13%) scale(.97,1.03); animation-timing-function:cubic-bezier(.5,0,.8,.4); }
  46% { transform:translateY(0) scale(1.04,.94); animation-timing-function:cubic-bezier(.1,.7,.2,1); }
  58% { transform:translateY(-3.5%) scale(.99,1.01); animation-timing-function:cubic-bezier(.5,0,.8,.4); }
  72% { transform:translateY(0) scale(1.01,.99); animation-timing-function:cubic-bezier(.15,.6,.2,1); }
  100% { transform:translateY(0) scale(1); }
}
@keyframes companion-weighty-joy {
  0% { transform:rotate(0) scale(1); animation-timing-function:cubic-bezier(.4,0,.7,.3); }
  20% { transform:rotate(-1deg) scale(1.025,.96); animation-timing-function:cubic-bezier(.1,.7,.2,1); }
  34% { transform:translateY(-2%) rotate(2.5deg) scale(1); animation-timing-function:cubic-bezier(.2,.65,.2,1); }
  61% { transform:rotate(-.7deg) scale(1.01,.99); animation-timing-function:cubic-bezier(.2,.4,.2,1); }
  100% { transform:rotate(0) scale(1); }
}
@keyframes companion-curious-joy {
  0% { transform:rotate(0); animation-timing-function:cubic-bezier(.4,0,.7,.3); }
  16% { transform:rotate(-2deg) translateY(1%); animation-timing-function:cubic-bezier(.1,.7,.2,1); }
  30% { transform:rotate(5deg) translateY(-3%); animation-timing-function:cubic-bezier(.15,.6,.2,1); }
  57% { transform:rotate(-1deg); animation-timing-function:cubic-bezier(.15,.6,.2,1); }
  100% { transform:rotate(0); }
}
@keyframes companion-precise-work {
  0%,8%,100% { transform:rotate(0); animation-timing-function:cubic-bezier(.3,0,.8,.2); }
  12% { transform:rotate(-1deg) scale(1,.985); animation-timing-function:cubic-bezier(.1,.8,.2,1); }
  18%,68% { transform:rotate(3deg); animation-timing-function:cubic-bezier(.2,.6,.2,1); }
  82% { transform:rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .g-ch *, .g-ch { animation:none !important; transition:none !important; } }
/* Weighty/tilting characters stay planted instead of borrowing Orb's jump shadow. */
.g-ch[data-ch-state="joy"] .ch-matte:not(.ch-kind-orb) .ch-ground { animation:none; }