/* Your Agent World - Guide UI (dock + fold + snap) */
:root{
  --yawc-accent:#00ffff;
  --yawc-gap:10px;
  --yawc-margin:18px;
}

/* LEFT ONLY POSITIONS */
.yawc-guide{
  position: fixed;
  left: var(--yawc-margin);
  top: 50%;
  transform: translateY(-50%);
}

.yawc-guide--pos-top{
  top: var(--yawc-margin);
  transform: none;
}

.yawc-guide--pos-middle{
  top: 50%;
  transform: translateY(-50%);
}

.yawc-guide--pos-bottom{
  bottom: var(--yawc-margin);
  top: auto;
  transform: none;
}

/* host container (position controlled by classes) */
/*.yawc-guide{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  left: var(--yawc-margin);
  top: var(--yawc-margin);
}*/

/* 6 snap positions */
/*.yawc-guide--pos-lt{ left: var(--yawc-margin); top: var(--yawc-margin); right:auto; bottom:auto; }
.yawc-guide--pos-lm{ left: var(--yawc-margin); top: 50%; transform: translateY(-50%); right:auto; bottom:auto; }
.yawc-guide--pos-lb{ left: var(--yawc-margin); bottom: var(--yawc-margin); top:auto; right:auto; }

.yawc-guide--pos-rt{ right: var(--yawc-margin); top: var(--yawc-margin); left:auto; bottom:auto; }
.yawc-guide--pos-rm{ right: var(--yawc-margin); top: 50%; transform: translateY(-50%); left:auto; bottom:auto; }
.yawc-guide--pos-rb{ right: var(--yawc-margin); bottom: var(--yawc-margin); top:auto; left:auto; }*/

/* dock wrapper */
.yawc-guide__dock{
  display:flex;
  align-items:center;
  gap: var(--yawc-gap);
  pointer-events:auto;
}

/* the floating button (drag + toggle) */
.yawc-guide__fab{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  outline:none;
  touch-action: pan-y; /* allow pointer drag */
}

/*少し光らせる*/
.yawc-guide__fab-ring{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,255,.35);
  box-shadow: 0 0 0 2px rgba(0,0,0,.35) inset;
  display:block;
}

.yawc-guide__fab-ring{
  border: 1px solid var(--yawc-accent);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.35) inset,
    0 0 12px rgba(0,255,255,.15);
}

.yawc-guide__fab-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--yawc-accent);
  position:absolute;
  box-shadow: 0 0 10px rgba(0,255,255,.25);
}

/* actual guide buttons */
.yawc-guide__inner{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.yawc-guide__btn{
  --yawc-sub: rgba(0,255,255,.8);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  text-decoration:none;
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  font-size: 12px;
  line-height: 1;
}

/* hover: per-agent color */
.yawc-guide__btn:hover{
  transform: translateY(-1px);
  color:#fff;
}

.yawc-guide__btn.is-active{
  color:#fff;
}

/* Modern (PC/Tablet) */
@supports (background: color-mix(in srgb, #000 50%, #fff)) {

  .yawc-guide__btn:hover{
    border-color: color-mix(in srgb, var(--yawc-sub) 45%, rgba(255,255,255,.18));
    background:   color-mix(in srgb, var(--yawc-sub) 10%, rgba(255,255,255,.03));
  }

  .yawc-guide__btn.is-active{
    border-color: color-mix(in srgb, var(--yawc-sub) 65%, rgba(255,255,255,.18));
    background:   color-mix(in srgb, var(--yawc-sub) 14%, rgba(255,255,255,.03));
  }
}

/* Fallback (if color-mix unsupported) */
@supports not (background: color-mix(in srgb, #000 50%, #fff)) {

  .yawc-guide__btn:hover{
    border-color: var(--yawc-sub);
    background: rgba(255,255,255,.06);
  }

  .yawc-guide__btn.is-active{
    border-color: var(--yawc-sub);
    background: rgba(255,255,255,.10);
  }
}

.yawc-guide__btn:active{
  border-color: var(--yawc-sub);
  background: color-mix(in srgb, var(--yawc-sub) 12%, rgba(255,255,255,.03));
}

/*タップ時に色を出す*/
.yawc-guide__icon{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
}

.yawc-guide__icon img{ width:100%; height:100%; object-fit:cover; display:block; }

.yawc-guide__dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--yawc-sub);
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
}

.yawc-guide__label{ opacity:.92; letter-spacing:.02em; }

/* collapsed state: hide inner, keep only fab */
.yawc-guide.is-collapsed .yawc-guide__inner{ display:none; }
.yawc-guide.is-collapsed .yawc-guide__dock{ gap: 0; }
.yawc-guide.is-collapsed .yawc-guide__fab{
  border-color: rgba(0,255,255,.25);
  background: rgba(0,0,0,.45);
}

/* admin bar offset */
body.admin-bar .yawc-guide--pos-lt,
body.admin-bar .yawc-guide--pos-rt{ top: 50px; }

/* AI LED States */

.yawc-led-idle .yawc-guide__fab-dot{
  animation: yawcBreath 3.5s ease-in-out infinite;
}

.yawc-led-observing .yawc-guide__fab-dot{
  animation: yawcPulse 1.4s ease-in-out infinite;
}

.yawc-led-active .yawc-guide__fab-dot{
  animation: yawcFlash .8s ease-out;
}

@keyframes yawcBreath{
  0%,100%{ opacity:.6; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.15); }
}

@keyframes yawcPulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.25); }
}

@keyframes yawcFlash{
  0%{ opacity:1; transform:scale(1.4); }
  100%{ opacity:.8; transform:scale(1); }
}

/* Idle (breathing) */
.yawc-led-idle .yawc-guide__fab-dot{
  animation: yawcBreath 3.5s ease-in-out infinite;
}

/* Observing */
.yawc-led-observing .yawc-guide__fab-dot{
  animation: yawcPulse 1.3s ease-in-out infinite;
}

/* Active flash */
.yawc-led-active .yawc-guide__fab-dot{
  animation: yawcFlash .8s ease-out;
}

/* Collapsed (calm glow) */
.yawc-led-collapsed .yawc-guide__fab-dot{
  animation: yawcCollapsed 4s ease-in-out infinite;
  opacity:.5;
}

@keyframes yawcCollapsed{
  0%,100%{ opacity:.4; transform:scale(1); }
  50%{ opacity:.7; transform:scale(1.1); }
}

/* ----------------------------------
   Persona Specific LED Modifiers
-----------------------------------*/

/* Aile → 静かな観測（弱い脈動） */
.yawc-persona-aile.yawc-led-idle .yawc-guide__fab-dot{
  animation: yawcBreath 5s ease-in-out infinite;
  opacity:.7;
}

/* Lia → 少し理知的（規則正しい脈） */
.yawc-persona-lia .yawc-guide__fab-dot{
  animation-duration: 2.8s;
}

/* Rina → 少し弾む */
.yawc-persona-rina .yawc-guide__fab-dot{
  animation: yawcBounce 2.4s ease-in-out infinite;
}

@keyframes yawcBounce{
  0%,100%{ transform:scale(1); }
  40%{ transform:scale(1.25); }
  60%{ transform:scale(1.05); }
}

/* Mkun / owner → 強めの呼吸 */
.yawc-persona-owner .yawc-guide__fab-dot{
  animation-duration: 2.5s;
}

/* Collapsed Persona Variants */

.yawc-persona-aile.yawc-led-collapsed .yawc-guide__fab-dot{
  animation-duration: 6s;
  opacity:.45;
}

.yawc-persona-lia.yawc-led-collapsed .yawc-guide__fab-dot{
  animation-duration: 4s;
}

.yawc-persona-rina.yawc-led-collapsed .yawc-guide__fab-dot{
  animation: yawcBounce 3.2s ease-in-out infinite;
  opacity:.7;
}

.yawc-persona-owner.yawc-led-collapsed .yawc-guide__fab-dot{
  animation-duration: 3s;
}

.yawc-guide__fab{
  position:relative;
  overflow:hidden;
}

.yawc-guide__fab-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.yawc-guide__fab-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.yawc-particle{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--yawc-accent);
  opacity:.6;
}

.yawc-guide__fab-particles::after{
  animation-delay:1.4s;
}

@keyframes yawcParticle{
  0%{ transform:translate(50%,50%) scale(0.5); opacity:.2; }
  50%{ transform:translate(10%,20%) scale(1); opacity:.8; }
  100%{ transform:translate(50%,50%) scale(0.5); opacity:.2; }
}

@keyframes yawcParticleFloat{
  0%{ transform:translate(0,0) scale(0.6); opacity:.2; }
  50%{ transform:translate(-6px,-8px) scale(1); opacity:.8; }
  100%{ transform:translate(0,0) scale(0.6); opacity:.2; }
}

.yawc-guide__btn.is-active{
  border-color: color-mix(in srgb, var(--yawc-sub) 55%, rgba(255,255,255,.18));
  background: color-mix(in srgb, var(--yawc-sub) 14%, rgba(255,255,255,.03));
}

/* FAB layering: ring < particles < dot */
.yawc-guide__fab-ring{ position:relative; z-index:1; }
.yawc-guide__fab-particles{ position:absolute; inset:0; z-index:2; }
.yawc-guide__fab-dot{ position:absolute; z-index:3; }

/*モバイルだけ選択が入らないなら、原因はだいたい 透明レイヤーが被ってる対策*/
.yawc-guide__inner{ pointer-events:auto; }
.yawc-guide__btn{ pointer-events:auto; }

/*GPUレイヤー強制*/
.yawc-guide__fab{
  will-change: transform;
  transform: translateZ(0);
}