/* avatar.css — shared styling for the read-along avatar widget (all tiers) */
#uol-avatar{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:180px; background:#fff; border:1px solid #e3e3e8; border-radius:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.16); overflow:hidden;
  font:12px/1.4 -apple-system,Segoe UI,Roboto,sans-serif; user-select:none;
  transition:opacity .3s, transform .3s;
}
#uol-avatar.uol-idle{ opacity:.85; }
#uol-avatar .uol-stage{ position:relative; background:linear-gradient(160deg,#f4f1ff,#eaf2ff); }
#uol-avatar svg{ display:block; width:100%; height:auto; }
#uol-avatar .uol-bar{
  display:flex; align-items:center; gap:8px; padding:7px 10px; border-top:1px solid #eee;
}
#uol-avatar .uol-name{ font-weight:600; color:#333; }
#uol-avatar .uol-state{ margin-left:auto; color:#7a5cff; font-size:11px; }
#uol-avatar .uol-dot{ width:7px; height:7px; border-radius:50%; background:#bbb; display:inline-block; }
#uol-avatar.uol-speaking .uol-dot{ background:#7a5cff; box-shadow:0 0 0 0 rgba(122,92,255,.5); animation:uol-pulse 1.2s infinite; }
#uol-avatar .uol-hide{ position:absolute; top:6px; right:8px; cursor:pointer; color:#999; font-size:14px; line-height:1; }
#uol-avatar .uol-hide:hover{ color:#555; }
@keyframes uol-pulse{ 0%{box-shadow:0 0 0 0 rgba(122,92,255,.5)} 70%{box-shadow:0 0 0 7px rgba(122,92,255,0)} 100%{box-shadow:0 0 0 0 rgba(122,92,255,0)} }
/* gentle idle sway only while speaking */
#uol-avatar.uol-speaking .uol-stage svg{ animation:uol-sway 4.5s ease-in-out infinite; transform-origin:50% 80%; }
@keyframes uol-sway{ 0%,100%{transform:rotate(-1.1deg)} 50%{transform:rotate(1.1deg)} }
@media(max-width:900px){ #uol-avatar{ width:130px; right:10px; bottom:10px; } }

/* Tier-2 3D panel + transport (book-avatar.js) */
#uol-av3d{position:fixed;right:22px;bottom:22px;z-index:80;width:224px;background:#fff;
 border:1px solid #e3e3e8;border-radius:16px;box-shadow:0 10px 34px rgba(0,0,0,.18);overflow:hidden;
 font:12px/1.3 -apple-system,Segoe UI,Roboto,sans-serif}
#uol-av3d canvas{width:224px;height:226px;display:block;background:linear-gradient(160deg,#f4f1ff,#eaf2ff)}
#uol-av3d .uol-av3d-x{position:absolute;top:5px;right:9px;cursor:pointer;color:#bbb;font-size:15px;line-height:1;z-index:2}
#uol-av3d .uol-av3d-x:hover{color:#666}
.uol-tx{padding:8px 12px 11px;border-top:1px solid #eee}
.uol-tx-title{font-weight:600;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:15px}
.uol-tx-seek{height:5px;background:#ececf2;border-radius:3px;cursor:pointer;overflow:hidden;margin:7px 0}
.uol-tx-fill{height:100%;width:0;background:var(--accent,#7a5cff)}
.uol-tx-row{display:flex;align-items:center;gap:6px}
.uol-tx-b{border:none;background:#f1eefc;color:#5a3ed6;border-radius:8px;height:28px;min-width:30px;cursor:pointer;font-size:12px;padding:0 7px}
.uol-tx-b:hover{background:#e6e0fb}
.uol-tx-pp{background:var(--accent,#7a5cff);color:#fff;min-width:36px}
.uol-tx-pp:hover{filter:brightness(.95)}
.uol-tx-time{margin-left:auto;color:#999;font-variant-numeric:tabular-nums;font-size:11px}
@media(max-width:900px){#uol-av3d{width:170px}#uol-av3d canvas{width:170px;height:150px}}