/* =========================
   0) Reset & Base
   ========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;

  min-height: 100vh;
  padding: 22px 16px 18px; /* 顶部留多一点，避免猫头贴边 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* 给整页一个最大宽度并居中（桌面更好看） */
body > * {
  width: min(1200px, 94vw);
}

/* =========================
   1) Cat (强制居中)
   ========================= */
.cat-wrap{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.music-toggle{
  position: absolute;
  left: -56px;
  top: 50%;
  transform: translateY(-50%);

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 44px;
}

.music-toggle.on{
  border-color: #ff9f43;
}

@media (max-width: 600px){
  .music-toggle{
    left: -46px;
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}

#fatcat{
  width: 440px;          /* 桌面更大 */
  max-width: 92vw;
  height: auto;

  display: block;        /* ✅ 避免 inline 导致偏左 */
  margin: 0 auto;        /* ✅ 强制水平居中 */

  user-select: none;
  transform-origin: 50% 100%; /* 从脚底缩放，避免上下跳 */
}

#fatcat.speaking {
  transform: scale(0.82); /* 说话帧构图更大：统一视觉大小 */
}

/* =========================
   2) Chat wrap
   - 让消息区 + 输入区纵向排布
   ========================= */
.chat-wrap{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================
   3) Messages box
   - 继续用 max-height，保证不无限拉长
   - 桌面再扁一点，避免把猫挤出视野
   ========================= */
.messages{
  max-height: 300px;     /* ✅ 桌面更扁，避免滚动时挡住猫 */
  overflow-y: auto;
  overflow-x: hidden;

  padding: 14px;
  border-radius: 18px;
  background: rgba(245,245,245,0.92);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);

  display: flex;
  flex-direction: column;
  gap: 10px;

  -webkit-overflow-scrolling: touch;
}

/* =========================
   4) Chat bubbles
   ========================= */
.bubble{
  max-width: min(860px, 92%);
  padding: 10px 12px;
  border-radius: 16px;
  line-height: 1.45;
  font-size: 16px;
  word-break: break-word;
  white-space: pre-wrap;
}

.bubble.user{
  align-self: flex-end;
  margin-left: auto;
  background: rgba(255,159,67,0.16);
}

.bubble.cat{
  align-self: flex-start;
  margin-right: auto;
  background: rgba(0,0,0,0.045);
}

/* =========================
   5) Input area (永远可见) ✅修复：选择器对齐 HTML
   HTML 实际是：
   <div class="input-bar">
     <input id="input" ... />
     <button id="send">→</button>
   </div>
   ========================= */
.input-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  width: 100%;
}

#input{
  flex: 1 1 auto;
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid #ddd;
  outline: none;

  font-size: 16px; /* iPhone 不自动放大 */
  line-height: 1.2;
  background: #fff;
}

#input:focus{
  border-color: #ff9f43;
}

#send{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  background: #ff9f43;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  flex: 0 0 auto;
}

#send:hover{
  background: #ff8c1a;
}

/* =========================
   6) Mobile tuning
   - 猫更大
   - 对话框更矮 30%
   ========================= */
@media (max-width: 600px){
  body{
    padding: 16px 12px 14px;
    gap: 10px;
  }

  body > * {
    width: 96vw;
  }

  #fatcat{
    width: 300px;     /* 手机猫更大 */
    max-width: 96vw;
  }

  .messages{
    max-height: 220px; /* 手机更矮 */
    padding: 12px;
  }

  .bubble{ font-size: 15px; }

  #send{
    width: 42px;
    height: 42px;
  }
}

/* =========================
   7) Mic button & hint
   ========================= */
#mic{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 46px;
}

#mic:hover{
  border-color: #ff9f43;
}

#mic.recording{
  border-color: #ff3b30;
  box-shadow: 0 0 0 4px rgba(255,59,48,0.12);
}

.hint{
  min-height: 18px;
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  padding: 0 4px;
}

@media (max-width: 600px){
  #mic{
    width: 42px;
    height: 42px;
    line-height: 42px;
  }
}