/* 右下にいるアカさん（template-parts/aka-guide.php）。トップページだけ読み込みます */
.aka{position:fixed;right:16px;bottom:84px;z-index:60}   /* スマホは下の「LINEで相談する」の上 */
@media(min-width:900px){.aka{right:24px;bottom:24px}}      /* パソコンは下のボタンが無いので角に */

.aka-btn{display:grid;justify-items:center;gap:2px;padding:6px 6px 5px;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);
  color:var(--ink);font:inherit;transition:transform .2s}
.aka-btn:hover{transform:translateY(-2px)}
.aka-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aka-btn img{display:block;width:56px;height:56px;image-rendering:pixelated}
.aka-label{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.08em;line-height:1}
.aka.is-open .aka-btn{display:none}

/* 吹き出し */
.aka-bubble{position:absolute;right:0;bottom:calc(100% + 10px);display:flex;align-items:flex-start;
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);
  animation:aka-in .35s ease-out}
.aka-bubble[hidden]{display:none}
.aka-bubble::after{content:"";position:absolute;right:26px;bottom:-7px;width:12px;height:12px;
  background:var(--surface);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transform:rotate(45deg)}
.aka-bubble-open{background:none;border:0;cursor:pointer;font:inherit;font-size:13px;line-height:1.6;
  color:var(--ink);text-align:left;padding:10px 4px 10px 14px;white-space:nowrap}
.aka-bubble-x{background:none;border:0;cursor:pointer;font-size:16px;line-height:1;color:var(--ink-soft);padding:8px 10px}
@keyframes aka-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* パネル。スマホは下から出る板、パソコンは右下の小窓 */
.aka-panel{position:fixed;left:0;right:0;bottom:0;max-height:86vh;display:flex;flex-direction:column;
  background:var(--ground);border-top:1px solid var(--rule);border-radius:18px 18px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,.18);animation:aka-in .25s ease-out}
.aka-panel[hidden]{display:none}
@media(min-width:900px){
  .aka-panel{left:auto;right:24px;bottom:24px;width:400px;max-height:min(640px,calc(100vh - 48px));
    border:1px solid var(--rule);border-radius:16px}
}
.aka-panel-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--rule)}
.aka-panel-head img{width:36px;height:36px;image-rendering:pixelated}
.aka-panel-head p{margin:0;font-family:var(--disp);font-weight:700;font-size:15px;flex:1}
.aka-close{background:none;border:0;cursor:pointer;font-size:22px;line-height:1;color:var(--ink-soft);
  width:40px;height:40px;border-radius:50%}
.aka-close:hover{background:var(--accent-wash)}
.aka-panel-body{overflow-y:auto;padding:14px 16px 18px;overscroll-behavior:contain}
.aka-panel .srs-panel{background:var(--surface)}
.aka-panel .fg-answer{font-size:14.5px;line-height:1.9;color:var(--ink-soft);margin:6px 0 18px}
.aka-panel .fg-answer strong{color:var(--ink);font-weight:500}
.aka-panel .fg-answer a{color:var(--accent);text-underline-offset:3px}
.aka-panel .fg-acts{margin-top:20px}

@media (prefers-reduced-motion:reduce){.aka-bubble,.aka-panel{animation:none}.aka-btn{transition:none}}