/*
    ================= 🧩 图层顺序总表（z-index）=================
    数值越大越靠上，改动前先看这张表，别随手加大数字。

      400   （已废弃，背包/亚空间改用弹窗，见下方485/490）
      420   （已废弃）
      465   （预留）
      480   .status-panel       状态栏抽屉
      485   #backpack-mask      背包弹窗（桌面居中弹窗/手机底部抽屉，必须盖过状态栏、但让桌宠露在上面方便拖食物）
      490   #pocket-space-mask  亚空间弹窗（桌面大弹窗/手机底部抽屉，同样让桌宠露在上面方便拖进去）
      500   #pet-wrap           桌宠本体（含气泡 #pet-bubble、聊天面板 #chat-panel，
                                 这两个是桌宠的绝对定位子元素，跟着父级层级走，不用单独设）
      900   #pocket-space-fullscreen 亚空间全屏播放层（盖过桌宠和抽屉，打开时会强制收起状态栏/背包/亚空间弹窗）
      1000  #shop-mask / #pomodoro-mask  商店弹层 / 番茄钟卡片弹层（互斥使用，不会同时开）
      1500  #drag-food-ghost    背包食物拖拽中的幽灵元素（必须盖过一切，含商店）
      1600  #space-smoke-fx     进入亚空间瞬间的一次性烟雾特效（短暂出现，盖过桌宠）
    ============================================================
  */

  /* ================= 桌宠本体 ================= */
  #pet-wrap{
    position:fixed; right:24px; bottom:150px; z-index:500;
    width:150px; height:190px;
    cursor:grab; user-select:none; touch-action:none;
    transition:width .28s cubic-bezier(.34,1.56,.64,1), height .28s cubic-bezier(.34,1.56,.64,1),
               left .28s cubic-bezier(.34,1.56,.64,1), top .28s cubic-bezier(.34,1.56,.64,1);
  }
  #pet-wrap.dragging{ cursor:grabbing; transition:none; } /* 拖拽中不要过渡，跟手 */

  /* 贴边悬浮球（docked）：默认状态，仿手机悬浮球贴在屏幕边缘，露出一部分方便一眼看到、一点就能拖出来 */
  #pet-wrap.docked{
    width:clamp(46px, 12vw, 56px); height:clamp(46px, 12vw, 56px);
    border-radius:50%; overflow:hidden;
    box-shadow:0 8px 22px rgba(0,0,0,.4);
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.25), rgba(30,24,60,.35));
    backdrop-filter:blur(6px);
  }
  #pet-wrap.docked #pet-headzone,
  #pet-wrap.docked #pet-bubble,
  #pet-wrap.docked #chat-panel{ display:none; }
  #pet-wrap.docked #pet-img{
    object-fit:cover; filter:none;
    transform:scale(1.7) translateY(8%);
  }

  /* 首次进入页面的开场动作动画：贴右边缘播完welcome-pet逐帧序列，再淡出切换成悬浮球，
     素材放 images/pet/pet-intro-sheet.png（8列x4行，共32帧，140x187/帧） */
  #pet-intro{
    position:fixed; z-index:499; right:-10px; pointer-events:none;
    width:140px; height:187px;
    background-image:url('images/pet/pet-intro-sheet.png');
    background-repeat:no-repeat;
    background-size:1120px 748px;
    opacity:0; transition:opacity .35s ease;
  }
  #pet-intro.show{ opacity:1; }

  #pet-body{
    position:relative; width:100%; height:100%;
    transition:transform .15s ease;
  }
  #pet-wrap.dragging #pet-body{transform:scale(1.05);}
  #pet-wrap.falling #pet-body{animation:fallBounce .65s cubic-bezier(.35,0,.55,1.6);}
  @keyframes fallBounce{
    0%{transform:translateY(0) scale(1.05,.95);}
    38%{transform:translateY(64px) scale(1.08,.9);}
    60%{transform:translateY(64px) scale(.94,1.08);}
    80%{transform:translateY(-10px) scale(1.03,.97);}
    100%{transform:translateY(0) scale(1);}
  }

  /* 完整展示全身（不裁腿），图片按比例撑满容器 */
  #pet-img{
    display:block; width:100%; height:100%; object-fit:contain;
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.45));
    pointer-events:none;
  }

  /* 头部感应区域（不可见，用来判定"摸头"），占整体高度前45%（大头chibi比例） */
  #pet-headzone{
    position:absolute; top:0; left:0; width:100%; height:45%;
  }

  /* 气泡 */
  #pet-bubble{
    position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    margin-bottom:6px; min-width:150px; max-width:230px;
    background:rgba(255,255,255,.95); color:#2a2340;
    border:2px solid var(--pink); border-radius:14px; padding:10px 14px;
    font-size:13px; line-height:1.6; text-align:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.3);
  }
  #pet-bubble.show{opacity:1;}
  #pet-bubble::after{
    content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:8px solid transparent; border-top-color:var(--pink);
  }
  #pet-bubble .caret{
    display:inline-block; width:2px; height:12px; background:#2a2340;
    vertical-align:-2px; margin-left:1px; animation:caretBlink .8s steps(1) infinite;
  }
  @keyframes caretBlink{ 50%{ opacity:0; } }

  /* ================= 聊天面板：作为角色容器的子元素，始终贴在角色下方，跟随拖拽移动 ================= */
  #chat-panel{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    margin-top:10px; width:230px; display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  }
  #chat-body{
    display:flex; flex-direction:column; gap:8px; width:100%;
  }
  #quick-replies{
    display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;
  }
  #quick-replies button{
    font-size:11px; padding:5px 10px; border-radius:999px; cursor:pointer;
    background:var(--glass); border:1px solid var(--glass-border); color:#e4e1fa;
    backdrop-filter:blur(6px); transition:background .2s ease, transform .15s ease;
    font-family:inherit;
  }
  #quick-replies button:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
  /* 手机端呼出输入框用的图标按钮，桌面端始终不需要，直接隐藏 */
  #chat-input-toggle{ display:none; }
  #chat-input-row{
    display:flex; gap:6px;
  }
  #chat-input{
    flex:1; min-width:0; padding:9px 12px; border-radius:12px; font-size:16px;
    border:1px solid var(--glass-border); background:rgba(255,255,255,.12); color:#fff;
    outline:none; font-family:inherit;
  }
  #chat-input::placeholder{ color:#a8a4cc; }
  #chat-input:focus{ border-color:var(--pink); background:rgba(255,255,255,.18); }
  #chat-send{
    padding:9px 14px; border-radius:12px; border:none; cursor:pointer;
    background:linear-gradient(135deg,var(--pink),var(--violet)); color:#fff; font-size:12px;
    font-family:inherit; flex-shrink:0;
  }
  #chat-send:active{ transform:scale(.96); }

  /* ================= 状态栏抽屉：默认收起，只露出右侧拉手，点开后整块滑出 ================= */
  .status-panel{
    position:fixed; left:24px; bottom:24px; z-index:480;
    display:flex; align-items:stretch;
    transform:translateX(calc(-100% + 44px));
    transition:transform .32s cubic-bezier(.22,1,.36,1);
  }
  .status-panel.open{ transform:translateX(0); }
  .status-panel-body{
    background:var(--glass); border:1px solid var(--glass-border); border-right:none;
    border-radius:14px 0 0 14px;
    backdrop-filter:blur(10px); padding:14px 18px; font-size:12px; color:#c9c6e8;
    font-family:'JetBrains Mono',monospace; line-height:1.9; white-space:nowrap;
  }
  .status-panel-body b{color:var(--aqua);}
  .status-panel-body .credits{color:#ffd27a;}
  #status-panel-handle{
    flex-shrink:0; width:44px; align-self:stretch;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:0 14px 14px 0; backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    font-size:17px; color:#fff; cursor:pointer;
  }
  /* 桌宠旁边呼出状态栏抽屉的按钮：只在手机端出现，桌面端用不到（桌面还是拉手那一套） */
  #pet-menu-btn{ display:none; }

  #shop-btn{
    display:inline-flex; align-items:center; gap:6px; margin-top:8px;
    padding:6px 12px; border-radius:999px; cursor:pointer; border:none;
    background:linear-gradient(135deg,var(--coral),var(--pink)); color:#fff;
    font-size:12px; font-family:inherit;
  }
  /* 状态栏里的背包/亚空间小按钮，共用一套样式 */
  .sp-mini-btn{
    margin-top:8px; margin-left:6px; padding:6px 12px; border-radius:999px; cursor:pointer;
    border:1px solid var(--glass-border); background:var(--glass); color:#c9c6e8;
    font-size:12px; font-family:inherit;
  }
  #demo-checkin-btn{
    display:inline-flex; align-items:center; gap:4px; margin-top:8px; margin-left:6px;
    padding:6px 10px; border-radius:999px; cursor:pointer;
    background:var(--glass); border:1px solid var(--glass-border); color:#c9c6e8;
    font-size:11px; font-family:inherit;
  }

  /* ================= 商店弹窗（不做背景虚化，只留一层淡淡的遮罩） ================= */
  #shop-mask{
    position:fixed; inset:0; z-index:1000; background:rgba(10,8,30,.45);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  #shop-mask.show{ opacity:1; pointer-events:auto; }
  #shop-panel{
    position:relative;
    width:min(420px, 88vw); max-height:80vh; overflow-y:auto;
    background:linear-gradient(160deg,#221a45,#1a1436); border:1px solid var(--glass-border);
    border-radius:20px; padding:22px; box-shadow:0 20px 50px rgba(0,0,0,.5);
    transform:translateY(16px); opacity:0; transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  }
  #shop-mask.show #shop-panel{ transform:translateY(0); opacity:1; }
  #shop-drag-handle{ display:none; }
  #shop-fullscreen-toggle{ display:none; }
  #shop-panel h3{margin:0 0 4px; font-size:16px; color:#fff;}
  #shop-panel .shop-sub{font-size:12px; color:#a8a4cc; margin-bottom:16px;}
  #shop-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  }
  .food-card{
    background:var(--glass); border:1px solid var(--glass-border); border-radius:14px;
    padding:12px 8px; text-align:center; cursor:pointer; transition:transform .15s ease, background .2s ease;
  }
  .food-card:hover{background:rgba(255,255,255,.18); transform:translateY(-2px);}
  .food-card:active{transform:scale(.96);}
  .food-card.disabled{opacity:.4; cursor:not-allowed; transform:none;}
  .food-emoji{font-size:28px; display:block; margin-bottom:6px;}
  .food-name{font-size:12px; color:#fff; margin-bottom:2px;}
  .food-price{font-size:11px; color:#ffd27a;}
  #shop-close{
    display:block; margin:18px auto 0; padding:8px 22px; border-radius:999px; border:none;
    cursor:pointer; background:var(--glass); border:1px solid var(--glass-border); color:#fff;
    font-size:12px; font-family:inherit;
  }

  /* ================= 背包弹窗：桌面居中弹窗，手机底部抽屉，和商店同一套动效语言 ================= */
  /* z-index 故意比桌宠(500)低，这样桌宠依旧露在弹窗上面，方便把食物从背包拖到她身上 */
  #backpack-mask{
    position:fixed; inset:0; z-index:485; background:rgba(10,8,30,.4);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  #backpack-mask.show{ opacity:1; pointer-events:auto; }
  #backpack-panel{
    position:relative;
    width:min(300px, 88vw); max-height:74vh; overflow-y:auto;
    background:var(--glass); border:1px solid var(--glass-border); border-radius:20px;
    backdrop-filter:blur(14px); padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.5);
    transform:translateY(16px); opacity:0; transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  }
  #backpack-mask.show #backpack-panel{ transform:translateY(0); opacity:1; }
  #backpack-drag-handle{ display:none; }
  #backpack-panel h4{margin:0 0 8px; font-size:13px; color:#fff;}
  #backpack-empty{font-size:12px; color:#a8a4cc; text-align:center; padding:10px 0;}
  #backpack-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;}
  #backpack-close{
    display:block; margin:16px auto 0; padding:6px 20px; border-radius:999px; border:none;
    cursor:pointer; background:rgba(255,255,255,.1); border:1px solid var(--glass-border); color:#c9c6e8;
    font-size:11px; font-family:inherit;
  }
  .bp-item{
    position:relative; background:rgba(255,255,255,.08); border:1px solid var(--glass-border);
    border-radius:12px; padding:8px 4px; text-align:center; cursor:grab; user-select:none; touch-action:none;
  }
  .bp-item:active{cursor:grabbing;}
  .bp-item .bp-emoji{font-size:22px; display:block;}
  .bp-item .bp-count{
    position:absolute; top:-6px; right:-6px; background:var(--pink); color:#fff;
    font-size:10px; border-radius:999px; width:16px; height:16px; line-height:16px;
  }

  /* 拖拽中跟随手指/鼠标的浮动食物图标 */
  #drag-food-ghost{
    position:fixed; z-index:1500; font-size:30px; pointer-events:none; display:none;
    transform:translate(-50%,-50%); transition:transform .18s ease, opacity .18s ease;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));
  }

  /* 角色"蹦跳"期待反应：食物在远处晃悠时角色会小幅度上下跳 */
  #pet-wrap.food-excited #pet-body{ animation:petBounce .5s ease-in-out infinite; }
  @keyframes petBounce{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-12px); }
  }
  /* 食物靠近时角色期待地微微前倾 */
  #pet-wrap.food-near #pet-body{ animation:petLean .4s ease-in-out infinite alternate; }
  @keyframes petLean{
    0%{ transform:scale(1.03) rotate(-1deg); }
    100%{ transform:scale(1.06) rotate(1deg); }
  }

  /* ================= 🌌 亚空间系统 ================= */
  /* 入口弹窗：桌面居中大弹窗（几乎占满），手机底部抽屉，和商店/背包同一套动效语言 */
  /* z-index 比背包高一点、但依然比桌宠低，桌宠拖进来时始终露在弹窗上面 */
  #pocket-space-mask{
    position:fixed; inset:0; z-index:490; background:rgba(10,8,30,.5);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  #pocket-space-mask.show{ opacity:1; pointer-events:auto; }
  #pocket-space-panel{
    position:relative;
    width:min(1040px, 94vw); height:min(860px, 86vh); overflow-y:auto;
    background:linear-gradient(160deg,#221a45,#1a1436); border:1px solid var(--glass-border);
    border-radius:26px; padding:30px; box-shadow:0 24px 60px rgba(0,0,0,.55);
    transform:translateY(18px); opacity:0; transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  }
  #pocket-space-mask.show #pocket-space-panel{ transform:translateY(0); opacity:1; }
  #pocket-space-drag-handle{ display:none; }
  #pocket-space-panel h3{ margin:0 0 4px; font-size:18px; color:#fff; }
  #pocket-space-panel .ps-sub{ font-size:12px; color:#a8a4cc; margin-bottom:20px; }
  #pocket-space-close{
    position:absolute; top:20px; right:22px; width:34px; height:34px; border-radius:50%;
    border:1px solid var(--glass-border); background:rgba(255,255,255,.1); color:#fff;
    font-size:15px; cursor:pointer;
  }
  #pocket-space-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:20px;
  }
  .pocket-space-entry{
    position:relative; border-radius:16px; overflow:hidden; cursor:pointer;
    border:2px solid var(--glass-border); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .pocket-space-entry img{ display:block; width:100%; height:200px; object-fit:cover; }
  .pocket-space-entry span{
    position:absolute; left:0; right:0; bottom:0; padding:8px 10px; font-size:12px; color:#fff;
    background:linear-gradient(0deg,rgba(0,0,0,.6),transparent); text-align:center;
  }
  /* 桌宠拖到入口附近时的高亮态：轻微放大+发光边框，提示"松手可以放进去" */
  .pocket-space-entry.drag-hover{
    transform:scale(1.04); border-color:var(--aqua);
    box-shadow:0 0 0 4px rgba(92,225,230,.25), 0 8px 20px rgba(0,0,0,.4);
  }
  /* 桌宠"撞了一下"入口的橡皮筋弹跳，复用 petBounce 曲线的思路 */
  .pocket-space-entry.entry-bump{ animation:entryBump .5s cubic-bezier(.34,1.56,.64,1); }
  @keyframes entryBump{
    0%{ transform:scale(1); } 30%{ transform:scale(1.18); }
    55%{ transform:scale(.92); } 100%{ transform:scale(1); }
  }
  /* 桌宠被吸进去之后，小小地"住"在亚空间缩略图里，直到番茄钟结束再冒出来 */
  .ps-resident-pet{
    position:absolute; left:50%; bottom:10px; width:30%; max-width:70px;
    transform:translateX(-50%) scale(0); transform-origin:bottom center;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1); pointer-events:none;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  }
  .pocket-space-entry.pet-resident .ps-resident-pet{ transform:translateX(-50%) scale(1); }

  /* 桌宠被"吸入"亚空间时的缩小淡出动画 */
  #pet-wrap.entering-space #pet-body{
    animation:petEnterSpace .5s cubic-bezier(.45,0,.55,1) forwards;
  }
  @keyframes petEnterSpace{
    0%{ transform:scale(1); opacity:1; }
    100%{ transform:scale(.25); opacity:0; }
  }
  /* 桌宠从亚空间重新"冒出来"的反向动画 */
  #pet-wrap.emerging-space #pet-body{
    animation:petEmergeSpace .55s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes petEmergeSpace{
    0%{ transform:scale(.2); opacity:0; } 60%{ transform:scale(1.1); opacity:1; } 100%{ transform:scale(1); opacity:1; }
  }

  /* 进入瞬间叠在入口位置的一次性烟雾特效 */
  #space-smoke-fx{
    position:fixed; width:160px; height:160px; z-index:1600;
    pointer-events:none; display:none; transform:translate(-50%,-50%);
    background-size:cover; background-position:center;
  }

  /* 番茄钟弹窗（卡片态，还不是全屏） */
  #pomodoro-mask{
    position:fixed; inset:0; z-index:1000; background:rgba(10,8,30,.45);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  #pomodoro-mask.show{ opacity:1; pointer-events:auto; }
  #pomodoro-card{
    width:min(320px, 88vw); background:linear-gradient(160deg,#221a45,#1a1436);
    border:1px solid var(--glass-border); border-radius:22px; padding:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.5); text-align:center;
  }
  #pomodoro-card h3{ margin:0 0 4px; font-size:16px; color:#fff; }
  #pomodoro-card .pm-sub{ font-size:11px; color:#a8a4cc; margin-bottom:16px; }
  .pm-tabs{ display:flex; gap:6px; background:rgba(255,255,255,.06); border-radius:999px; padding:4px; margin-bottom:16px; }
  .pm-tab{
    flex:1; padding:8px 0; border-radius:999px; border:none; cursor:pointer;
    background:transparent; color:#c9c6e8; font-size:12px; font-family:inherit; transition:.2s;
  }
  .pm-tab.active{ background:linear-gradient(135deg,var(--pink),var(--violet)); color:#fff; }
  .pm-presets{ display:flex; gap:8px; justify-content:center; margin-bottom:10px; flex-wrap:wrap; }
  .pm-preset{
    padding:7px 14px; border-radius:999px; cursor:pointer; font-size:12px; font-family:inherit;
    background:var(--glass); border:1px solid var(--glass-border); color:#e4e1fa; transition:.2s;
  }
  .pm-preset.active{ background:linear-gradient(135deg,var(--coral),var(--pink)); color:#fff; border-color:transparent; }
  #pm-custom-row{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:18px; }
  #pm-custom-row input{
    width:64px; text-align:center; padding:6px 8px; border-radius:10px; font-size:13px;
    border:1px solid var(--glass-border); background:rgba(255,255,255,.1); color:#fff; font-family:inherit;
  }
  #pm-custom-row span{ font-size:11px; color:#a8a4cc; }
  #pm-start-btn{
    width:96px; height:96px; border-radius:50%; border:none; cursor:pointer; margin:0 auto;
    background:linear-gradient(135deg,var(--aqua),var(--violet)); color:#12102b;
    font-size:16px; font-weight:700; font-family:inherit; box-shadow:0 10px 24px rgba(92,225,230,.4);
    transition:transform .15s ease;
  }
  #pm-start-btn:active{ transform:scale(.94); }
  #pomodoro-close{
    display:block; margin:16px auto 0; padding:6px 20px; border-radius:999px; border:none;
    cursor:pointer; background:var(--glass); border:1px solid var(--glass-border); color:#c9c6e8;
    font-size:11px; font-family:inherit;
  }
  /* 321 准备倒数：盖住卡片内容，大数字用圆体字 */
  #pm-countdown{
    display:none; font-family:'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif;
    font-size:72px; color:#fff; padding:30px 0; text-shadow:0 4px 14px rgba(0,0,0,.4);
  }

  /* ================= 全屏播放层 ================= */
  #pocket-space-fullscreen{
    position:fixed; inset:0; height:100vh; height:100dvh; z-index:900;
    display:none; background:#0e1a3a;
  }
  #pocket-space-fullscreen.show{ display:block; }
  #ps-bg{
    position:absolute; inset:0; background-size:cover; background-position:center;
  }
  #pocket-space-canvas{
    position:absolute; inset:0; width:100%; height:100%;
  }
  #pomodoro-widget{
    position:absolute; left:24px; top:24px;
    text-align:left; color:#fff;
  }
  #pomodoro-widget .pw-time{
    font-family:'ZCOOL KuaiLe','Noto Sans SC',sans-serif; font-size:clamp(32px,5vw,56px);
    text-shadow:0 4px 18px rgba(0,0,0,.5); letter-spacing:1px;
  }
  #pomodoro-widget .pw-label{ font-size:12px; color:#e4e1fa; opacity:.85; margin-top:2px; }
  #pomodoro-widget .pw-controls{ margin-top:14px; display:flex; gap:10px; justify-content:flex-start; }
  #pomodoro-widget button{
    padding:9px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.35); cursor:pointer;
    background:rgba(255,255,255,.14); backdrop-filter:blur(8px); color:#fff; font-size:12px; font-family:inherit;
  }
  #ps-real-fullscreen-btn{
    position:absolute; right:calc(18px + env(safe-area-inset-right)); top:calc(18px + env(safe-area-inset-top));
    width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.12); color:#fff; font-size:15px; cursor:pointer;
  }
  #pomodoro-toast{
    position:absolute; left:50%; bottom:14%; transform:translateX(-50%) translateY(20px);
    background:rgba(255,255,255,.95); color:#2a2340; padding:12px 20px; border-radius:16px;
    font-size:13px; box-shadow:0 10px 26px rgba(0,0,0,.35); opacity:0; pointer-events:none;
    transition:opacity .35s ease, transform .35s ease;
  }
  #pomodoro-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }


  @media (max-width:760px){
    /* 桌宠本体缩小，避免占屏过多；贴底距离 = 底座自己的 bottom偏移 + 底座总高度 + 一点呼吸间隙，
       这样不管屏幕多宽多窄，桌宠都刚好贴在📊/🔍底座正上方，绝不会压住按钮 */
    #pet-wrap{
      right:12px;
      bottom:calc(var(--dock-bottom) + var(--dock-height) + clamp(14px, 4vw, 20px) + env(safe-area-inset-bottom));
      width:104px; height:134px;
    }

    /* 聊天面板：不再以桌宠为中心居中（会溢出屏幕右边），改成贴右对齐，宽度自适应视口 */
    #chat-panel{
      left:auto; right:0; transform:none;
      width:min(230px, calc(100vw - 24px));
    }
    #quick-replies{ justify-content:flex-end; }

    /* 快捷回复 + 输入框默认都收起，一起藏在💬图标背后；
       这个图标本身也不常驻显示，要在角色身上快速点两下才会冒出来，省地方也避免手滑误触 */
    #chat-body{ display:none; }
    #chat-panel.input-open #chat-body{ display:flex; }
    #chat-input-toggle{
      display:none;
      align-items:center; justify-content:center;
      width:30px; height:30px; padding:0; border-radius:50%;
      font-size:14px; line-height:1;
      background:var(--glass); border:1px solid var(--glass-border); color:#fff;
      backdrop-filter:blur(8px);
    }
    #pet-wrap.chat-icon-on #chat-input-toggle{ display:inline-flex; }

    /* 气泡同理，避免溢出 */
    #pet-bubble{
      left:auto; right:0; transform:none; max-width:min(230px, calc(100vw - 24px));
    }
    #pet-bubble::after{ left:auto; right:20px; transform:none; }

    /* 状态栏在手机端不再用"半隐藏拉手"，改成跟角色放一起的独立按钮（现在收进了 #mobile-action-dock 底座里，
       和搜索/导航按钮同一水平线、同大小、上下堆叠），点开后整块内容从屏幕底部滑上来，
       和商店/背包/亚空间是同一套底部抽屉语言 */
    #status-panel-handle{ display:none; }
    #pet-menu-btn{
      display:flex; align-items:center; justify-content:center;
      background:rgba(255,255,255,.14); color:#fff; border:none; cursor:pointer;
    }
    .status-panel{
      left:0; right:0; bottom:0; width:100%;
      transform:translateY(100%);
      transition:transform .32s cubic-bezier(.22,1,.36,1);
    }
    .status-panel.open{ transform:translateY(0); }
    .status-panel-body{
      width:100%; flex:1; max-width:none;
      border:1px solid var(--glass-border); border-bottom:none;
      border-radius:24px 24px 0 0;
      padding:20px 20px calc(20px + env(safe-area-inset-bottom));
      font-size:12px;
    }

    /* 背包弹窗：手机上改成底部抽屉 */
    #backpack-mask{ align-items:flex-end; }
    #backpack-panel{
      width:100%; max-width:100%; max-height:78vh;
      border-radius:24px 24px 0 0;
      padding:14px 20px calc(20px + env(safe-area-inset-bottom));
      transform:translateY(100%);
    }
    #backpack-mask.show #backpack-panel{ transform:translateY(0); }
    #backpack-drag-handle{
      display:block; width:40px; height:4px; border-radius:999px;
      background:rgba(255,255,255,.35); margin:2px auto 14px;
    }

    /* 亚空间弹窗：手机上同样改成底部抽屉，缩略图矮一点 */
    #pocket-space-mask{ align-items:flex-end; }
    #pocket-space-panel{
      width:100%; max-width:100%; height:82vh;
      border-radius:24px 24px 0 0;
      padding:16px 20px calc(20px + env(safe-area-inset-bottom));
      transform:translateY(100%);
    }
    #pocket-space-mask.show #pocket-space-panel{ transform:translateY(0); }
    #pocket-space-drag-handle{
      display:block; width:40px; height:4px; border-radius:999px;
      background:rgba(255,255,255,.35); margin:2px auto 14px;
    }
    #pocket-space-close{ top:14px; right:16px; }
    #pocket-space-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
    .pocket-space-entry img{ height:110px; }

    /* 番茄钟卡片弹窗：跟商店一样改成底部滑入，手机上更好操作 */
    #pomodoro-mask{ align-items:flex-end; }
    #pomodoro-card{
      width:100%; max-width:100%; border-radius:24px 24px 0 0;
      padding:22px 22px calc(22px + env(safe-area-inset-bottom));
    }
    #pomodoro-widget{ left:16px; top:calc(16px + env(safe-area-inset-top)); }

    /* 全屏播放层里的真全屏按钮避让刘海/挖孔屏 */
    #ps-real-fullscreen-btn{
      top:calc(14px + env(safe-area-inset-top));
    }

    /* 商店：改为从底部滑入的抽屉，而不是居中弹窗 */
    #shop-mask{ align-items:flex-end; }
    #shop-panel{
      width:100%; max-width:100%; max-height:82vh;
      border-radius:24px 24px 0 0;
      padding:14px 20px calc(20px + env(safe-area-inset-bottom));
      transform:translateY(100%);
    }
    #shop-mask.show #shop-panel{ transform:translateY(0); }
    #shop-panel.fullscreen{
      max-height:100vh; height:100vh; border-radius:0;
      padding-top:calc(14px + env(safe-area-inset-top));
    }
    #shop-drag-handle{
      display:block; width:40px; height:4px; border-radius:999px;
      background:rgba(255,255,255,.35); margin:2px auto 14px;
    }
    #shop-fullscreen-toggle{
      display:flex; align-items:center; justify-content:center;
      position:absolute; top:14px; right:16px; width:32px; height:32px;
      border-radius:50%; background:rgba(255,255,255,.1); border:1px solid var(--glass-border);
      color:#fff; font-size:15px; cursor:pointer; z-index:1;
    }
    #shop-grid{ grid-template-columns:repeat(4, 1fr); }
  }
/* ============ 动作包引擎：带字图片气泡 ============ */
#pet-bubble .pet-bubble-img{display:block;max-width:210px;width:100%;border-radius:10px;margin:0 auto;pointer-events:none}
#pet-bubble:has(.pet-bubble-img){padding:6px;background:rgba(255,255,255,.97)}