/* 天気カードの操作とは別のボタンを、画像の左下へ重ねる。 */
.folio-reference .ref-weather-block {container:folio-weather / size}
.folio-reference .ref-weather-block #weatherTime {font-size:clamp(18px,2.4vw,24px)}
.folio-weather-companion {
  --companion-paper:#fff8e9;
  --companion-ink:#4b463b;
  --companion-mint:#abd6c2;
  --companion-rule:#769d88;
  position:absolute;inset:0;z-index:4;pointer-events:none;
}
.folio-reference #folioCompanion {
  position:absolute;left:18px;bottom:7px;height:clamp(44px,32%,78px);aspect-ratio:1;
  --companion-travel:18px;--companion-hop:-10px;
  display:block;min-width:44px;min-height:44px;padding:0;border:0;border-radius:12px;
  background:transparent;box-shadow:none;pointer-events:auto;cursor:pointer;
}
.folio-companion-image {
  display:block;width:100%;height:100%;object-fit:contain;
  transform-origin:50% 88%;pointer-events:none;user-select:none;
}
/* 横へ動いた先もロボットのタッチ範囲にし、背後の天気を誤って開かない。 */
#folioCompanion::before {content:"";position:absolute;inset:-12px -28px -2px -8px}
.folio-companion-dot {
  position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;
  background:var(--companion-rule);box-shadow:0 0 0 2px var(--companion-paper);
}
#folioCompanionNotice {
  position:absolute;bottom:14px;left:124px;right:82px;z-index:5;
  width:fit-content;max-width:calc(100% - 206px);padding:6px 9px;border:1px solid var(--companion-rule);
  border-radius:12px 12px 12px 2px;background:var(--companion-paper);color:var(--companion-ink);
  box-shadow:0 3px 9px #4b463b22;font:13px/1.5 var(--body);pointer-events:none;
}
.folio-companion-dot[hidden],#folioCompanionNotice[hidden] {display:none}
#folioCompanion:focus-visible {outline:3px solid var(--companion-rule);outline-offset:3px}
#folioCompanion[data-resting="false"] .folio-companion-image {animation:folio-companion-idle 12s ease-in-out infinite}
#folioCompanion.is-notifying .folio-companion-image {animation:folio-companion-hop .8s ease-out 1}
#folioCompanion.is-tapped .folio-companion-image {animation:folio-companion-hop .55s ease-out 1}
/* 横へ小さく歩き、二度跳ねて戻る。1周期の後半は静止する。 */
@keyframes folio-companion-idle {
  0%,4%,32%,100% {transform:translate(0,0) rotate(0)}
  8% {transform:translate(calc(var(--companion-travel,8px) * .45),-4px) rotate(-10deg)}
  12% {transform:translate(var(--companion-travel,8px),0) rotate(12deg)}
  17% {transform:translate(calc(var(--companion-travel,8px) * .65),var(--companion-hop,-10px)) rotate(0)}
  21% {transform:translate(calc(var(--companion-travel,8px) * .3),0) rotate(-10deg)}
  26% {transform:translate(0,calc(var(--companion-hop,-10px) * .7)) rotate(0)}
}
@keyframes folio-companion-hop {
  0%,100% {transform:translateY(0) rotate(0)}
  20% {transform:translateY(2px) scale(1.06,.94)}
  48% {transform:translateY(var(--companion-hop,-10px)) rotate(0)}
  72% {transform:translateY(1px) rotate(8deg)}
}
#appShell[inert] #folioCompanion .folio-companion-image,
#folioCompanion[data-paused="true"] .folio-companion-image {animation:none}
#appShell[inert] #folioCompanionNotice {display:none}
.folio-reference.dark .folio-weather-companion {--companion-paper:#414638;--companion-ink:#f3e6cd;--companion-rule:#abd6c2}
/* 天気枠が低い場合も、時刻とロボットの間に動く余白を確保する。 */
@container folio-weather (height < 190px) {
  .folio-reference .ref-weather-block .weather-copy {top:5px}
  .folio-reference .ref-weather-block .ref-weather-main strong {font-size:28px}
  .folio-reference .ref-weather-block #weatherTime {font-size:18px;line-height:1.1}
  .folio-reference .ref-weather-block .ref-weather-main>.eyebrow {font-size:11px;line-height:1.1}
}
@media (prefers-reduced-motion:reduce) {
  #folioCompanion .folio-companion-image {animation:none!important}
}

/* 各ページの案内は紙面内に置き、入力欄へ重ねない。 */
.folio-reference {
  --guide-paper:#fff8e9;--guide-ink:#4b463b;--guide-mint:#dcebdc;--guide-rule:#91ad96;
}
.folio-reference.dark {
  --guide-paper:#414638;--guide-ink:#f3e6cd;--guide-mint:#515d42;--guide-rule:#abd6c2;
}
#folioHomeHelp {
  position:absolute;left:124px;bottom:14px;min-height:44px;padding:6px 12px;
  pointer-events:auto;border:1px solid var(--guide-rule);border-radius:12px 12px 12px 2px;
  background:var(--guide-paper);color:var(--guide-ink);font:13px/1.4 var(--body);
}
.folio-weather-companion:has(#folioCompanionNotice:not([hidden])) #folioHomeHelp {visibility:hidden}
.folio-page-guide {
  display:flex;align-items:center;gap:10px;flex:none;min-width:0;min-height:54px;
  margin:0 0 12px;padding:3px 8px;border-bottom:1px solid var(--guide-rule);
  color:var(--guide-ink);font:13px/1.5 var(--body);
}
.folio-page-guide .folio-guide-robot {
  flex:0 0 70px;width:70px;height:68px;padding:6px 7px;border:0;border-radius:8px;
  background:transparent;box-shadow:none;cursor:pointer;
}
.folio-guide-robot img {display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 88%;pointer-events:none}
.folio-page-guide .folio-guide-copy {flex:1;min-width:0;margin:0;font:inherit;overflow-wrap:anywhere}
.folio-page-guide .folio-guide-help {
  flex:none;min-height:44px;padding:6px 10px;border:1px solid var(--guide-rule);border-radius:5px;
  background:var(--guide-paper);color:var(--guide-ink);font:inherit;white-space:nowrap;
}
.folio-page-guide[data-paused="false"] .folio-guide-robot img {animation:folio-companion-idle 12s ease-in-out infinite}
.folio-page-guide.is-speaking[data-paused="false"] .folio-guide-robot img {animation:folio-companion-hop .8s ease-out 1}
.folio-page-guide.is-speaking .folio-guide-copy {background:var(--guide-mint);border-radius:8px;padding:6px 9px}
.folio-dialog-tip {display:flex;align-items:center;gap:8px;font:13px/1.6 var(--body);color:var(--guide-ink)}
.folio-dialog-tip::before {
  content:"";flex:0 0 34px;width:34px;height:40px;
  background:url("media/characters/folio-robot-polygon-v1.png") center/contain no-repeat;
}
.folio-reference .portal-paper:has(>.folio-page-guide) {grid-template-rows:auto auto minmax(0,1fr)}
.portal-paper>.folio-page-guide {margin:0;padding:4px 12px}
.portal-fullscreen .portal-paper>.folio-page-guide {display:none}
.folio-calendar-help {display:flex;align-items:center;gap:3px;min-height:44px;color:var(--guide-ink);font:12px var(--body)}
.folio-calendar-help img {display:block;width:32px;height:32px;object-fit:contain}
.folio-reference #folioSupportDialog {
  box-sizing:border-box;width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 40px);
  overflow:auto;overscroll-behavior:contain;padding:20px;border:2px solid var(--guide-rule);
  border-radius:16px;background:var(--guide-paper);color:var(--guide-ink);font:15px/1.75 var(--body);
}
#folioSupportDialog::backdrop {background:#292d2866}
#folioSupportDialog header {display:flex;align-items:center;gap:12px}
#folioSupportDialog header img {flex:none;object-fit:contain}
#folioSupportDialog h2 {flex:1;margin:0;font:600 21px/1.4 var(--body)}
#folioSupportDialog header button {flex:none;font-size:24px}
#folioSupportDialog ol {padding-left:1.5em}
#folioSupportDialog li {margin-bottom:12px}
#folioSupportDialog button {
  min-width:44px;min-height:44px;padding:7px 12px;border:1px solid var(--guide-rule);border-radius:6px;
  background:var(--guide-paper);color:var(--guide-ink);font:inherit;
}
#folioSupportActions,#folioSupportDialog footer {display:flex;gap:8px;flex-wrap:wrap}
#folioSupportActions button {background:var(--guide-mint)}
#folioSupportDialog footer {margin-top:18px;padding-top:14px;border-top:1px solid var(--guide-rule)}
.folio-page-guide button:focus-visible,#folioHomeHelp:focus-visible,.folio-calendar-help:focus-visible,
#folioSupportDialog button:focus-visible {outline:3px solid var(--guide-rule);outline-offset:2px}
.folio-reference #toast {
  display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 14px;
  bottom:max(64px,calc(env(safe-area-inset-bottom) + 64px));text-align:left;
  box-sizing:border-box;width:max-content;max-width:min(480px,calc(100vw - 32px));
  overflow-wrap:anywhere;font:14px/1.5 var(--body);
}
#toast::before {
  content:"";flex:0 0 42px;width:42px;height:46px;
  background:url("media/characters/folio-robot-polygon-v1.png") center/contain no-repeat;
}
#appShell[inert] #toast {visibility:hidden}
#appShell[inert] .folio-guide-robot img {animation:none}
@media (width < 700px) {
  .folio-page-guide {gap:6px;padding-inline:0;font-size:12px}
  .folio-page-guide .folio-guide-robot {flex-basis:64px;width:64px;height:64px;padding:6px}
  .folio-page-guide .folio-guide-help {padding:6px}
  .folio-reference #folioSupportDialog {padding:14px;font-size:14px}
}
@media (prefers-reduced-motion:reduce) {.folio-guide-robot img {animation:none!important}}