/* 접힌 폰(600px 이하): 우하단에 지금 대화 중인 비서 초상화를 띄우고, 누르면 다른 비서가 부채꼴로 촤르르 펼쳐진다 */
.agent-fab { display:none; }
@media (max-width:600px) {
  .agent-fab {
    display:block; position:fixed; z-index:30; right:calc(12px + env(safe-area-inset-right));
    bottom:calc(var(--composer-h,150px) + 12px); width:62px; height:62px;
  }

  .agent-fab-main, .agent-fab-item {
    --ring:#e2bfa8; position:absolute; right:0; bottom:0; display:grid; place-items:center; padding:0;
    border:2px solid var(--ring); border-radius:50%; background:#5d4a5c; overflow:hidden; cursor:pointer;
    box-shadow:0 0 0 3px #00000030,0 8px 18px -6px #000c; -webkit-tap-highlight-color:transparent;
  }
  .agent-fab-main { z-index:2; width:62px; height:62px; transition:transform .2s ease, box-shadow .2s ease; }
  .agent-fab.open .agent-fab-main { transform:scale(.92); box-shadow:0 0 0 3px #c3a2e266,0 0 18px #d2b2f2aa; }
  .agent-fab img { position:absolute; left:50%; top:-22%; width:300%; height:auto; max-width:none; transform:translateX(-50%); pointer-events:none; }
  .agent-fab img[src*="/mascots-v1/"] { position:static; width:100%; height:100%; object-fit:contain; object-position:center; transform:none; }
  .agent-fab .fab-auto { color:#ecd7f7; font-size:22px; line-height:1; }
  .agent-fab-codex { --ring:#c6dce2; }
  .agent-fab-gemini { --ring:#c6a5ea; }
  .agent-fab-beiko { --ring:#e4b7c4; }
  .agent-fab-auto { --ring:#d9bde9; }
  .agent-fab-main.is-working::after, .agent-fab-item.is-working::after {
    content:''; position:absolute; right:5px; bottom:5px; width:9px; height:9px; border-radius:50%;
    background:#8fdcb7; box-shadow:0 0 0 2px #2a2131,0 0 6px #8fdcb7;
  }

  /* 펼쳐지는 비서: 처음엔 버튼 뒤에 겹쳐 있다가 순서대로 제자리로 날아간다 */
  .agent-fab-item {
    z-index:1; width:50px; height:50px; right:6px; bottom:6px; overflow:visible; opacity:0; pointer-events:none;
    transform:translate(0,0) scale(.4); transition:transform .32s cubic-bezier(.2,1.3,.4,1), opacity .2s ease;
    transition-delay:calc((var(--n) - 1 - var(--i)) * 25ms);
  }
  .agent-fab-item:nth-child(1) { --x:0px; --y:-104px; --i:0; --n:4; }
  .agent-fab-item:nth-child(2) { --x:-52px; --y:-90px; --i:1; --n:4; }
  .agent-fab-item:nth-child(3) { --x:-90px; --y:-52px; --i:2; --n:4; }
  .agent-fab-item:nth-child(4) { --x:-104px; --y:0px; --i:3; --n:4; }
  .agent-fab-item .fab-face { position:absolute; inset:0; border-radius:50%; overflow:hidden; display:grid; place-items:center; }
  .agent-fab.open .agent-fab-item {
    opacity:1; pointer-events:auto; transform:translate(var(--x),var(--y)) scale(1);
    transition-delay:calc(var(--i) * 45ms);
  }
  .agent-fab-item:disabled { filter:grayscale(1); opacity:0; }
  .agent-fab.open .agent-fab-item:disabled { opacity:.45; cursor:default; }
  .agent-fab-label {
    position:absolute; left:50%; top:calc(100% + 2px); transform:translateX(-50%); padding:1px 6px; border-radius:99px;
    background:#2a2131e6; color:#f3e6f6; font-size:10px; font-weight:600; line-height:1.5; white-space:nowrap; pointer-events:none;
  }
  .agent-fab-scrim { position:fixed; inset:0; z-index:29; background:#0000; pointer-events:none; transition:background .2s ease; }
  .agent-fab-scrim.open { background:#0005; pointer-events:auto; }
}
@media (max-width:600px) and (prefers-reduced-motion:reduce) {
  .agent-fab-item, .agent-fab.open .agent-fab-item { transition:opacity .15s ease; transition-delay:0s; }
}