* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; }
body {
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: #3D2C29; background: #FDF6EF;
}

.view { display:none; height:100%; flex-direction:column; }
.view.active { display:flex; }

/* ===== 小窝 ===== */
#view-home { position:relative; }
#view-home .sky {
  position:absolute; inset:0; transition: background 2s;
}
.sky.day { background: linear-gradient(180deg, #FFE8C8, #FFF5E0 50%, #FDE8D8); }
.sky.sunset { background: linear-gradient(180deg, #D4A5C9, #F4B8A8 50%, #F8D4B8); }
.sky.night { background: linear-gradient(180deg, #2A2545, #3D3555 60%, #4A3F5F); }

.nest {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; position:relative; z-index:1;
}
.thought {
  padding:8px 20px; background:rgba(255,255,255,.85); border-radius:20px;
  font-size:14px; color:#6B5A52; margin-bottom:30px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.sky.night ~ .nest .thought { background:rgba(255,255,255,.15); color:#ddd; }

.monster { width:180px; height:200px; position:relative; }
.monster .m-body {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:170px; height:155px;
  background: radial-gradient(circle at 35% 30%, #E8D5F5, #C9A8E8);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { transform:translateX(-50%) scale(1); }
  50% { transform:translateX(-50%) scale(1.04); }
}
.monster .ear {
  position:absolute; top:15px; width:36px; height:50px;
  background:#C9A8E8; border-radius:50% 50% 0 0; z-index:-1;
}
.monster .ear.left { left:22px; transform:rotate(-15deg); }
.monster .ear.right { right:22px; transform:rotate(15deg); }

/* 眼睛：默认睁开 */
.monster .m-eye {
  position:absolute; top:70px; width:16px; height:22px; background:#3D2C29;
  border-radius:50%; z-index:2; transition: all .3s;
}
.monster .m-eye::after {
  content:''; position:absolute; top:4px; left:4px; width:6px; height:6px; background:#fff; border-radius:50%;
}
.monster .m-eye.left { left:50px; }
.monster .m-eye.right { right:50px; }

/* 闭眼状态（睡觉） */
.monster.sleeping .m-eye {
  height:3px; top:78px; background:#3D2C29; border-radius:0;
  border-bottom:3px solid #3D2C29;
}
.monster.sleeping .m-eye::after { display:none; }

/* 开心弯弯眼 */
.monster.happy .m-eye {
  height:3px; top:78px; background:#3D2C29; border-radius:0;
  border-bottom:3px solid #3D2C29; border-radius:0 0 10px 10px;
}
.monster.happy .m-eye::after { display:none; }

.monster .m-cheek {
  position:absolute; top:95px; width:24px; height:16px; background:#F4A9B8;
  border-radius:50%; opacity:.7; z-index:2;
}
.monster .m-cheek.left { left:28px; }
.monster .m-cheek.right { right:28px; }
.monster .m-mouth {
  position:absolute; top:105px; left:50%; transform:translateX(-50%);
  width:20px; height:10px; border-bottom:3px solid #3D2C29;
  border-radius:0 0 50% 50%; z-index:2; transition: all .3s;
}
/* 睡觉张嘴打呼 */
.monster.sleeping .m-mouth {
  width:12px; height:12px; border-bottom:none;
  background:#8B6F9E; border-radius:50%;
}
.monster .foot {
  position:absolute; bottom:-6px; width:40px; height:18px; background:#B895D9;
  border-radius:50%; z-index:-1;
}
.monster .foot.left { left:35px; }
.monster .foot.right { right:35px; }

/* Zzz */
.zzz {
  position:absolute; top:-20px; right:20px; z-index:5;
  font-size:24px; color:#B8C4E0; opacity:0;
}
.monster.sleeping ~ .zzz, .zzz.show {
  opacity:1; animation: zzzFloat 2s ease-in-out infinite;
}
@keyframes zzzFloat {
  0% { opacity:0; transform: translateY(0) scale(.8); }
  50% { opacity:1; transform: translateY(-10px) scale(1); }
  100% { opacity:0; transform: translateY(-20px) scale(1.2); }
}

/* ===== Header ===== */
.view-header {
  padding:16px 20px; padding-top: calc(16px + env(safe-area-inset-top));
  background:#FDF6EF; border-bottom:1px solid #f0e6dc; text-align:center;
}
.header-title { font-size:17px; font-weight:600; }
.header-sub { font-size:11px; color:#8a7a72; margin-top:2px; }

/* ===== 聊天 ===== */
#view-chat { background:#FDF6EF; }
.messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg { display:flex; gap:8px; align-items:flex-end; }
.msg.me { justify-content:flex-end; }
.bubble {
  max-width:75%; padding:10px 14px; border-radius:16px;
  font-size:14px; line-height:1.55; white-space:pre-wrap;
}
.msg.them .bubble { background:#fff; border-bottom-left-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,.04); }
.msg.me .bubble {
  background:linear-gradient(135deg,#FF8FA3,#F4A9B8); color:#fff; border-bottom-right-radius:4px;
}
.typing { display:flex; gap:4px; padding:12px 14px; }
.typing span {
  width:6px; height:6px; border-radius:50%; background:#C4B5AE; animation:bounce 1.2s infinite;
}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

.input-area {
  display:flex; gap:10px; padding:12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background:#FDF6EF; border-top:1px solid #f0e6dc;
}
.input-area input {
  flex:1; padding:12px 18px; border:none; border-radius:24px;
  background:#fff; font-size:15px; outline:none;
}
.input-area button {
  width:44px; height:44px; border-radius:50%; border:none;
  background:linear-gradient(135deg,#FF8FA3,#E8A87C); color:#fff;
  font-size:20px; cursor:pointer; flex-shrink:0;
}

/* ===== 动态 ===== */
.feed-list { flex:1; overflow-y:auto; padding:16px; }
.feed-card {
  background:#fff; border-radius:16px; padding:16px; margin-bottom:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.feed-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.feed-avatar {
  width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#E8D5F5,#C9A8E8);
}
.feed-name { font-size:14px; font-weight:600; }
.feed-time { font-size:11px; color:#B5A89E; }
.feed-content { font-size:15px; line-height:1.6; margin-bottom:10px; }
.feed-like {
  display:flex; align-items:center; gap:4px; font-size:13px; color:#B5A89E; cursor:pointer;
}
.feed-like.liked { color:#FF8FA3; }

/* ===== 关系 ===== */
.me-content { flex:1; overflow-y:auto; padding:24px 20px; }
.me-card {
  background:#fff; border-radius:20px; padding:24px; margin-bottom:16px;
  text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.me-card .big-num { font-size:36px; font-weight:700; color:#E8A87C; }
.me-card .label { font-size:13px; color:#8a7a72; margin-top:4px; }
.me-stats { display:flex; gap:12px; margin-bottom:16px; }
.me-stats .me-card { flex:1; margin-bottom:0; }
.memory-list { text-align:left; }
.memory-item {
  padding:12px 16px; background:#FFF8F0; border-radius:12px; margin-bottom:8px;
  font-size:14px; color:#6B5A52;
}
.memory-title { font-size:15px; font-weight:600; margin:20px 0 10px; }
.timeline-item {
  padding:10px 0; border-left:2px solid #E8D5F5; padding-left:14px;
  margin-bottom:10px; font-size:13px; color:#6B5A52;
}
.timeline-item .t-time { font-size:11px; color:#B5A89E; }

/* ===== Tab栏 ===== */
.tabbar {
  display:flex; background:#fff; border-top:1px solid #f0e6dc;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex:1; padding:8px 0; text-align:center; cursor:pointer;
  color:#B5A89E; font-size:10px;
}
.tab svg { width:24px; height:24px; margin:0 auto 2px; display:block; }
.tab.active { color:#E8A87C; }

/* ===== 弹窗 ===== */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
.modal-card {
  background:#fff; border-radius:24px; padding:36px 28px;
  width:85%; max-width:320px; text-align:center;
}
.modal-card h2 { font-size:22px; margin-bottom:10px; }
.modal-card p { font-size:13px; color:#8a7a72; margin-bottom:20px; }
.modal-card input {
  width:100%; padding:14px; border:2px solid #E8D5F5; border-radius:14px;
  font-size:16px; text-align:center; outline:none;
}
.modal-card button {
  margin-top:16px; width:100%; padding:14px; border:none; border-radius:16px;
  background:linear-gradient(135deg,#FF8FA3,#E8A87C); color:#fff;
  font-size:16px; font-weight:600; cursor:pointer;
}

/* ===== 互动道具栏 ===== */
.action-bar {
  display:flex; gap:8px; padding:10px 16px;
  background:#FDF6EF; border-bottom:1px solid #f0e6dc;
}
.action-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 0; border-radius:14px; cursor:pointer;
  background:#fff; transition: transform .15s;
}
.action-btn:active { transform: scale(.92); }
.action-icon { font-size:22px; }
.action-label { font-size:10px; color:#8a7a72; }

/* ===== 场景元素 ===== */
.scene-elements { position:absolute; inset:0; pointer-events:none; z-index:0; }
.sun {
  position:absolute; top:10%; right:15%; width:60px; height:60px;
  background: radial-gradient(circle, #FFE08A, #FFD060);
  border-radius:50%; opacity:.8;
}
.sky.night ~ .scene-elements .sun, .sky.sunset ~ .scene-elements .sun { opacity:.3; }
.cloud {
  position:absolute; width:80px; height:24px; background:rgba(255,255,255,.6);
  border-radius:20px; animation: drift 30s linear infinite;
}
.cloud1 { top:15%; left:10%; }
.cloud2 { top:25%; right:20%; animation-duration: 45s; }
@keyframes drift {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(400px); }
}
.cat {
  position:absolute; bottom:20px; right:20px; font-size:28px;
  opacity:.7; animation: sit 4s ease-in-out infinite;
}
@keyframes sit { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.plant {
  position:absolute; bottom:20px; left:20px; font-size:28px;
  opacity:.7;
}
.sky.night ~ .scene-elements .cat,
.sky.night ~ .scene-elements .cloud,
.sky.night ~ .scene-elements .plant { opacity:.2; }

/* 上传按钮 */
.upload-btn {
  width:44px; height:44px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; flex-shrink:0;
}