.pipi-tasks { position: fixed; z-index: 250; display: none; touch-action: none; user-select: none; -webkit-user-select: none; transition: left .28s cubic-bezier(.2,.8,.2,1), top .28s cubic-bezier(.2,.8,.2,1); }
.pipi-tasks.is-on { display: block; animation: ptIn .32s cubic-bezier(.2,.8,.2,1); }
.pipi-tasks.is-dragging { transition: none; }
.pipi-tasks.is-dragging .pt-capsule { transform: scale(1.04); box-shadow: 0 18px 40px -10px rgba(0,60,140,.35); }
.pt-capsule { position: relative; display: flex; align-items: center; gap: 10px; width: 256px; padding: 8px 8px 10px 8px; border-radius: 22px; background: rgba(255,255,255,.9); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgba(0,122,255,.14); box-shadow: 0 10px 30px -8px rgba(0,60,140,.25); cursor: grab; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.pt-capsule:active { cursor: grabbing; }
.pt-avatar { position: relative; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,122,255,.22); }
.pt-avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; pointer-events: none; }
.pt-pen { position: absolute; right: -5px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.pt-pen::before { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 11px; margin: -6px 0 0 -1.5px; border-radius: 1px 1px 2px 2px; background: linear-gradient(#ff9f0a 0 70%, #3a3a3c 70%); transform: rotate(35deg); transform-origin: 50% 90%; }
.pipi-tasks.is-working .pt-avatar img { animation: ptNod 1.8s ease-in-out infinite; }
.pipi-tasks.is-working .pt-pen::before { animation: ptWrite .5s ease-in-out infinite alternate; }
.pipi-tasks.is-waiting .pt-avatar img { animation: ptBreath 3.2s ease-in-out infinite; }
.pipi-tasks.is-waiting .pt-pen::before { background: none; width: auto; height: auto; margin: 0; transform: translate(-50%,-55%); content: 'z'; font: 700 10px/1 -apple-system, sans-serif; color: var(--primary, #007aff); }
.pipi-tasks.is-done .pt-pen { background: var(--success, #34c759); }
.pipi-tasks.is-done .pt-pen::before { background: none; width: 8px; height: 4px; margin: -3px 0 0 -4px; border: solid #fff; border-width: 0 0 2px 2px; border-radius: 0; transform: rotate(-45deg); }
.pt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-title { font-size: 14px; font-weight: 600; color: var(--text-primary, #1c1c1e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-sub { font-size: 11.5px; color: var(--text-secondary, #6e6e73); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-count { flex-shrink: 0; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--primary, #007aff); }
.pt-count:empty { display: none; }
.pt-refresh, .pt-head-refresh { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: none; background: rgba(0,122,255,.1); color: var(--primary, #007aff); cursor: pointer; }
.pt-refresh { width: 30px; height: 30px; border-radius: 50%; }
.pt-refresh svg, .pt-head-refresh svg { width: 15px; height: 15px; }
.pt-refresh:active, .pt-head-refresh:active { background: rgba(0,122,255,.2); }
.pipi-tasks.is-loading .pt-refresh svg, .pipi-tasks.is-loading .pt-head-refresh svg { animation: ptSpin .8s linear infinite; }
.pt-bar { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 2px; background: rgba(0,122,255,.1); overflow: hidden; }
.pt-bar > i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #5ac8fa, var(--primary, #007aff)); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.pipi-tasks.is-done .pt-bar > i { background: var(--success, #34c759); }
.pt-panel { position: absolute; width: min(340px, calc(100vw - 24px)); max-height: min(62vh, 460px); display: none; flex-direction: column; border-radius: 20px; background: rgba(255,255,255,.96); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border: 1px solid rgba(0,0,0,.06); box-shadow: 0 24px 60px -16px rgba(0,40,100,.32); overflow: hidden; user-select: text; -webkit-user-select: text; touch-action: auto; }
.pipi-tasks.is-open .pt-panel { display: flex; animation: ptPop .24s cubic-bezier(.2,.8,.2,1); }
.pipi-tasks[data-side="right"] .pt-panel { right: 0; transform-origin: bottom right; }
.pipi-tasks[data-side="left"] .pt-panel { left: 0; transform-origin: bottom left; }
.pipi-tasks[data-up="1"] .pt-panel { bottom: calc(100% + 8px); }
.pipi-tasks[data-up="0"] .pt-panel { top: calc(100% + 8px); }
.pt-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 16px; border-bottom: 1px solid rgba(0,0,0,.05); }
.pt-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-head b { font-size: 15px; font-weight: 600; color: var(--text-primary, #1c1c1e); }
.pt-head small { font-size: 12px; color: var(--text-secondary, #6e6e73); line-height: 1.4; }
.pt-head-refresh { height: 28px; padding: 0 10px; border-radius: 14px; font-size: 12px; font-variant-numeric: tabular-nums; }
.pt-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pt-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 16px; }
.pt-item + .pt-item { border-top: 1px solid rgba(0,0,0,.04); }
.pt-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary, #c7c7cc); }
.pt-item.is-processing .pt-dot { background: var(--primary, #007aff); box-shadow: 0 0 0 0 rgba(0,122,255,.45); animation: ptPulse 1.6s ease-out infinite; }
.pt-item.is-scheduled .pt-dot { background: #af52de; }
.pt-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-item-main b { font-size: 13.5px; font-weight: 500; color: var(--text-primary, #1c1c1e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-item-main small { font-size: 12px; color: var(--text-secondary, #6e6e73); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-item-bar { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: rgba(0,122,255,.1); overflow: hidden; }
.pt-item-bar > i { display: block; height: 100%; background: var(--primary, #007aff); border-radius: 2px; }
.pt-stop { flex-shrink: 0; border: none; background: rgba(255,59,48,.1); color: var(--danger, #ff3b30); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.pt-stop:active { background: rgba(255,59,48,.2); }
.pt-busy { flex-shrink: 0; font-size: 11.5px; color: var(--text-tertiary, #8e8e93); }
.pt-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px 16px; border-top: 1px solid rgba(0,0,0,.05); font-size: 11.5px; color: var(--text-tertiary, #8e8e93); }
.pt-foot span { flex: 1; min-width: 0; }
.pt-stop-all { flex-shrink: 0; border: none; background: none; color: var(--danger, #ff3b30); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
.pt-empty { padding: 28px 16px; text-align: center; color: var(--success, #34c759); }
.pt-empty svg { width: 28px; height: 28px; }
.pt-empty p { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary, #6e6e73); }
@keyframes ptIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ptPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ptNod { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-6deg) translateY(1px); } 60% { transform: rotate(4deg) translateY(1px); } }
@keyframes ptWrite { from { transform: rotate(25deg) translateX(-1px); } to { transform: rotate(45deg) translateX(1px); } }
@keyframes ptBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }
@keyframes ptSpin { to { transform: rotate(360deg); } }
@keyframes ptPulse { 0% { box-shadow: 0 0 0 0 rgba(0,122,255,.45); } 100% { box-shadow: 0 0 0 7px rgba(0,122,255,0); } }
@media (prefers-reduced-motion: reduce) { .pipi-tasks, .pipi-tasks *, .pipi-tasks *::before { animation: none !important; transition: none !important; } }
@media (prefers-color-scheme: dark) {
  .pt-capsule, .pt-panel { background: rgba(36,36,40,.92); border-color: rgba(255,255,255,.08); }
  .pt-title, .pt-head b, .pt-item-main b { color: #f2f2f7; }
  .pt-pen { background: #3a3a3c; }
  .pt-item + .pt-item, .pt-head, .pt-foot { border-color: rgba(255,255,255,.06); }
}