:root {
  --xp-green:#355e4b;
  --xp-sage:#a7bfa4;
  --xp-coral:#ff8a65;
  --xp-cream:#fffaf2;
}

.xiao-p-host {
  --xp-look-x:0px;
  --xp-look-y:0px;
  --xp-look-r:0deg;
  position:fixed;
  right:22px;
  bottom:84px;
  z-index:2147483600;
  width:116px;
  height:130px;
  color:#263d32;
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans SC",sans-serif;
  touch-action:none;
  user-select:none;
}

.xiao-p-launcher {
  position:relative;
  width:100%;
  height:100%;
  border:0;
  background:none;
  padding:0;
  cursor:grab;
  filter:drop-shadow(0 8px 8px rgba(13,38,27,.3));
}

.xiao-p-host.is-dragging .xiao-p-launcher {
  cursor:grabbing;
  filter:drop-shadow(0 5px 5px rgba(13,38,27,.24));
}

.xiao-p-pose {
  display:block;
  width:100%;
  height:100%;
  transform-origin:50% 92%;
  animation:xpIdle 3.2s ease-in-out infinite;
}

.xiao-p-launcher:focus-visible {
  outline:3px solid var(--xp-coral);
  outline-offset:2px;
  border-radius:14px;
}

.xiao-p-mascot {
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  transform:translate(var(--xp-look-x),var(--xp-look-y)) rotate(var(--xp-look-r)) scaleY(1);
  transform-origin:50% 55%;
  transition:transform 180ms cubic-bezier(.22,1,.36,1);
}

.xiao-p-host.is-blinking .xiao-p-mascot {
  transform:translate(var(--xp-look-x),calc(var(--xp-look-y) + 2px)) rotate(var(--xp-look-r)) scaleY(.965);
  transition-duration:70ms;
}

.xiao-p-host[data-state="delivery"] .xiao-p-pose { animation:xpWave 1.25s ease-in-out infinite alternate; }
.xiao-p-host[data-state="reminder"] .xiao-p-pose { animation:xpNudge 1.8s ease-in-out infinite; }
.xiao-p-host[data-state="celebrate"] .xiao-p-pose { animation:xpCelebrate .72s ease-in-out infinite alternate; }
.xiao-p-host[data-state="sleep"] .xiao-p-pose { animation:xpSleep 3.4s ease-in-out infinite; }

.xiao-p-bubble {
  position:absolute;
  right:94px;
  bottom:76px;
  width:max-content;
  max-width:210px;
  padding:9px 12px;
  border:1px solid rgba(53,94,75,.26);
  border-radius:14px 14px 4px 14px;
  background:#fffef9;
  color:#355e4b;
  box-shadow:0 5px 8px rgba(25,58,43,.15);
  font-size:12px;
  font-weight:700;
  line-height:1.45;
  pointer-events:none;
}

.xiao-p-host[data-side="left"] .xiao-p-bubble {
  right:auto;
  left:94px;
  border-radius:14px 14px 14px 4px;
}

.xiao-p-host.is-open .xiao-p-bubble {
  opacity:0;
  transform:translateY(4px);
}

.xiao-p-dot {
  position:absolute;
  right:2px;
  top:5px;
  min-width:24px;
  height:24px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  border-radius:999px;
  background:var(--xp-coral);
  color:#fff;
  font-size:11px;
  font-weight:900;
  pointer-events:none;
}

.xiao-p-panel {
  position:fixed;
  left:0;
  top:0;
  width:min(390px,calc(100vw - 28px));
  max-height:min(650px,calc(100vh - 28px));
  display:none;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(53,94,75,.2);
  border-radius:16px;
  background:#fffaf2;
  box-shadow:0 18px 42px rgba(8,35,23,.3);
  user-select:text;
}

.xiao-p-panel.is-open {
  display:flex;
  animation:xpPanelIn .2s ease-out;
}

.xiao-p-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 17px 13px;
  border-bottom:1px solid rgba(53,94,75,.13);
  background:#edf3e9;
}

.xiao-p-brand {
  color:var(--xp-green);
  font-weight:800;
  font-size:18px;
}

.xiao-p-brand small {
  display:block;
  margin-top:3px;
  color:#647c6d;
  font-size:11px;
  font-weight:650;
}

.xiao-p-mood { color:#355e4b; }

.xiao-p-close {
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:rgba(53,94,75,.1);
  color:var(--xp-green);
  cursor:pointer;
  font-size:18px;
}

.xiao-p-close:hover { background:rgba(53,94,75,.16); }
.xiao-p-close:focus-visible,
.xiao-p-action:focus-visible,
.xiao-p-check:focus-visible,
.xiao-p-go:focus-visible {
  outline:3px solid rgba(255,138,101,.48);
  outline-offset:2px;
}

.xiao-p-wallet {
  margin-right:8px;
  color:#a8681f;
  font-size:13px;
  font-weight:900;
}

.xiao-p-content {
  overflow-y:auto;
  padding:15px 17px 18px;
  overscroll-behavior:contain;
}

.xiao-p-greeting {
  margin:0 0 13px;
  color:#355e4b;
  font-size:14px;
  line-height:1.55;
}

.xiao-p-progress {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}

.xiao-p-track {
  flex:1;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#dfe9df;
}

.xiao-p-fill {
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#76a482,#ff8a65);
  transition:width .25s ease-out;
}

.xiao-p-progress strong {
  min-width:38px;
  color:var(--xp-green);
  font-size:12px;
  text-align:right;
}

.xiao-p-group { margin-bottom:15px; }

.xiao-p-group-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 8px;
  color:#355e4b;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
}

.xiao-p-group-title span {
  color:#687e70;
  font-weight:600;
}

.xiao-p-task {
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:10px 9px;
  margin-bottom:7px;
  border:1px solid rgba(53,94,75,.13);
  border-radius:13px;
  background:#fff;
}

.xiao-p-task.is-done {
  opacity:.7;
  background:#f1f5ef;
}

.xiao-p-task.is-locked { background:#fff8f4; }

.xiao-p-check {
  width:24px;
  height:24px;
  border:1.5px solid #8da895;
  border-radius:8px;
  background:#fff;
  color:#fff;
  cursor:pointer;
  font-size:13px;
}

.xiao-p-task.is-done .xiao-p-check {
  border-color:#5f8c6b;
  background:#5f8c6b;
}

.xiao-p-task-main { min-width:0; }

.xiao-p-task-title {
  overflow:hidden;
  color:#2b4337;
  font-size:13px;
  font-weight:750;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.xiao-p-task-note {
  margin-top:2px;
  overflow:hidden;
  color:#687c70;
  font-size:10.5px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.xiao-p-task.is-locked .xiao-p-task-note {
  color:#a5543d;
  white-space:normal;
}

.xiao-p-go {
  padding:6px 8px;
  border:0;
  border-radius:8px;
  background:#eaf0e7;
  color:#355e4b;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}

.xiao-p-go:hover { background:#dce9db; }
.xiao-p-go.is-locked {
  background:#f1e7e1;
  color:#9a5d4a;
  cursor:not-allowed;
}

.xiao-p-empty {
  padding:20px 12px;
  border:1px dashed #a7bca9;
  border-radius:14px;
  color:#60796b;
  text-align:center;
  font-size:12.5px;
  line-height:1.65;
}

.xiao-p-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

.xiao-p-action {
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(53,94,75,.24);
  border-radius:11px;
  background:#fff;
  color:#355e4b;
  padding:9px 7px;
  cursor:pointer;
  font:700 12px/1.25 inherit;
  text-align:center;
  text-decoration:none;
}

.xiao-p-action:hover { background:#f3f7f1; }

.xiao-p-action--main {
  border-color:var(--xp-coral);
  background:var(--xp-coral);
  color:#fff;
}

.xiao-p-action--main:hover { background:#ef7c59; }

.xiao-p-assignment {
  grid-column:1 / -1;
  justify-content:space-between;
  padding-inline:12px;
}

.xiao-p-assignment[hidden] { display:none; }

.xiao-p-assignment-count {
  min-width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#355e4b;
  color:#fff;
  font-size:11px;
}

.xiao-p-self-form {
  display:none;
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  background:#edf3e9;
}

.xiao-p-self-form.is-open { display:block; }

.xiao-p-self-form label {
  display:block;
  margin-bottom:7px;
  color:#52695b;
  font-size:11px;
  font-weight:700;
}

.xiao-p-self-form input {
  width:100%;
  margin-top:4px;
  padding:8px 10px;
  border:1px solid #a7bca9;
  border-radius:9px;
  background:#fff;
  color:#2d4338;
  font:12px inherit;
  outline:none;
}

.xiao-p-self-form input:focus { border-color:var(--xp-coral); }

.xiao-p-form-help {
  margin:4px 0 9px;
  color:#667d6e;
  font-size:10.5px;
  line-height:1.45;
}

.xiao-p-status {
  min-height:17px;
  margin-top:8px;
  color:#a94f36;
  font-size:11px;
  line-height:1.45;
}

@keyframes xpIdle { 50% { transform:translateY(-4px) rotate(1deg); } }
@keyframes xpWave { to { transform:translateY(-3px) rotate(-2deg); } }
@keyframes xpNudge { 50% { transform:translateX(-5px) rotate(-2deg); } }
@keyframes xpCelebrate { to { transform:translateY(-7px) rotate(2deg) scale(1.03); } }
@keyframes xpSleep { 50% { transform:translateY(3px) rotate(-1deg); } }
@keyframes xpPanelIn { from { opacity:0; transform:translateY(6px) scale(.985); } }

@media (max-width:620px) {
  .xiao-p-host {
    right:10px;
    bottom:72px;
    width:94px;
    height:108px;
  }
  .xiao-p-bubble {
    right:76px;
    bottom:66px;
    max-width:176px;
  }
  .xiao-p-host[data-side="left"] .xiao-p-bubble {
    left:76px;
  }
  .xiao-p-host.is-open .xiao-p-launcher,
  .xiao-p-host.is-open .xiao-p-dot {
    visibility:hidden;
    opacity:0;
    transform:scale(.94);
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .xiao-p-pose,
  .xiao-p-mascot,
  .xiao-p-panel {
    animation:none !important;
    transition:none !important;
  }
  .xiao-p-fill { transition:none; }
}