/* ============================================================
   Clawd 桌宠组件样式 —— clawd-pet.css
   自带 Claude 暗色主题。想换配色:覆盖下面这些 --clawd-* 变量即可。
   ============================================================ */
:root{
  --clawd-accent:#DA7756;
  --clawd-bg:#20201F;      /* 面板背景 */
  --clawd-surface:#181818; /* 卡片/气泡背景 */
  --clawd-sunken:#1A1A19;  /* 凹槽/进度条底 */
  --clawd-border:rgba(236,234,228,.10);
  --clawd-text:#ECEAE4;
  --clawd-text2:#A6A39A;
  --clawd-font:-apple-system,BlinkMacSystemFont,system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --clawd-radius:14px;
  --clawd-shadow:0 8px 30px rgba(0,0,0,.28);
}

/* ---------- 浮动桌宠 ---------- */
#clawdPet{position:fixed;right:16px;bottom:16px;width:84px;height:84px;z-index:2147483000;pointer-events:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));
  transition:transform .18s cubic-bezier(.22,.61,.36,1),filter .18s ease}
#clawdPet .clawd-hit{position:absolute;left:26%;top:46%;width:48%;height:54%;pointer-events:auto;cursor:grab;touch-action:none}
#clawdPet.clawd-dragging{filter:drop-shadow(0 16px 24px rgba(0,0,0,.55));transform:scale(1.1)}
#clawdPet.clawd-dragging .clawd-hit{cursor:grabbing}
#clawdPet img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
#clawdPet:active{transform:scale(.9)}
#clawdPet.clawd-poke{animation:clawdPoke .55s ease}
@keyframes clawdPoke{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-12px) scale(1.08) rotate(-6deg)}55%{transform:translateY(0) scale(.96) rotate(5deg)}80%{transform:translateY(-3px)}}
#clawdPet.clawd-hidden{display:none}
/* 桌宠头顶小气泡(say() 用) */
#clawdPetBubble{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--clawd-surface);border:1px solid var(--clawd-border);border-radius:12px;
  padding:6px 11px;font:13px/1.3 var(--clawd-font);color:var(--clawd-text);white-space:nowrap;max-width:220px;
  box-shadow:var(--clawd-shadow);pointer-events:none;opacity:0;transition:opacity .2s ease}
#clawdPetBubble.show{opacity:1}
body.clawd-house-open #clawdPet{display:none}

/* ---------- 螃蟹屋面板 ---------- */
#clawdHouse{position:fixed;inset:0;z-index:2147483001;display:none;flex-direction:column;
  background:var(--clawd-bg);color:var(--clawd-text);font-family:var(--clawd-font)}
#clawdHouse.show{display:flex}
.clawd-head{flex:none;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px}
.clawd-back{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;
  background:var(--clawd-surface);border:1px solid var(--clawd-border);color:var(--clawd-text);cursor:pointer}
.clawd-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.clawd-title{text-align:center;font-size:19px;font-weight:600}
.clawd-house-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;
  gap:22px;padding:14px 20px calc(env(safe-area-inset-bottom) + 28px)}
.clawd-stage{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center;margin-top:6px}
#clawdHouseImg{width:170px;height:170px;object-fit:contain;animation:clawdBob 3.2s ease-in-out infinite}
@keyframes clawdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.clawd-house-bubble{position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  background:var(--clawd-surface);border:1px solid var(--clawd-border);border-radius:14px;
  padding:7px 13px;font-size:14px;color:var(--clawd-text);white-space:nowrap;box-shadow:var(--clawd-shadow);z-index:2}
.clawd-house-bubble.hidden{display:none}
#clawdName{font-size:15px;color:var(--clawd-text);text-align:center;cursor:pointer;margin-top:-8px}
.clawd-stats{width:100%;max-width:320px;display:flex;flex-direction:column;gap:11px}
.clawd-stat{display:flex;align-items:center;gap:10px}
.clawd-stat .l{width:34px;font-size:13px;color:var(--clawd-text2);flex:none}
.clawd-bar{flex:1;height:9px;border-radius:6px;background:var(--clawd-sunken);overflow:hidden}
.clawd-bar i{display:block;height:100%;width:60%;border-radius:6px;transition:width .45s cubic-bezier(.22,.61,.36,1)}
#clawdFull{background:linear-gradient(90deg,#d99a5b,#c77b43)}
#clawdMood{background:linear-gradient(90deg,#6fae8f,#4f9070)}
#clawdLove{background:linear-gradient(90deg,#d98fb0,#c76f93)}
.clawd-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:340px}
.clawd-btn{padding:13px 0;font-size:15px;border:1px solid var(--clawd-border);border-radius:var(--clawd-radius);
  background:var(--clawd-surface);color:var(--clawd-text);font-family:var(--clawd-font);cursor:pointer}
.clawd-btn:active{transform:scale(.94);background:var(--clawd-sunken)}
.clawd-tip{font-size:13px;color:var(--clawd-text2);min-height:18px;text-align:center}

/* 跟 newfe 七套皮膚同步，避免螃蟹屋像跳到另一個 app */
html[data-theme] #clawdHouse{
  background:var(--app-bg-image) center/cover fixed!important;
  color:var(--text-primary)!important;
  font-family:var(--font-sans)!important;
  isolation:isolate;
}
html[data-theme] #clawdHouse::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--card-bg);
  -webkit-backdrop-filter:blur(calc(var(--card-blur) + 8px)) saturate(1.3);
  backdrop-filter:blur(calc(var(--card-blur) + 8px)) saturate(1.3);
}
html[data-theme] .clawd-head{padding:calc(env(safe-area-inset-top) + 14px) 18px 10px}
html[data-theme] .clawd-back,
html[data-theme] .clawd-house-bubble,
html[data-theme] .clawd-btn{
  background:var(--card-bg)!important;
  border-color:var(--card-border)!important;
  color:var(--text-primary)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.18)!important;
  -webkit-backdrop-filter:blur(var(--card-blur));
  backdrop-filter:blur(var(--card-blur));
}
html[data-theme] .clawd-title,
html[data-theme] #clawdName{color:var(--text-primary)!important}
html[data-theme] .clawd-stat .l,
html[data-theme] .clawd-tip{color:var(--text-secondary)!important}
html[data-theme] .clawd-bar{background:var(--bg-sunken)!important}
html[data-theme] #clawdFull,
html[data-theme] #clawdMood,
html[data-theme] #clawdLove{background:linear-gradient(90deg,var(--accent),var(--accent-hover))!important}
@media(min-width:761px){
  html[data-theme] #clawdHouse{
    left:50%!important;
    right:auto!important;
    width:min(460px,100vw)!important;
    transform:translateX(-50%)!important;
    box-shadow:0 0 80px rgba(0,0,0,.5);
  }
}

/* 螃蟹屋:大小/归位 行(4 列) */
#clawdHouse .clawd-size-row{grid-template-columns:repeat(4,1fr);margin-top:10px}