* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #14161d;
  color: #eef0f6;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.app {
  max-width: 420px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 46px 20px 12px;   /* 顶部留出给固定角标，左右 20，底部小间隔 */
}

#face {
  width: 180px;
  height: 180px;
  display: block;
  align-self: center;           /* 水平居中，紧挨上方耗时行 */
  flex: 0 0 auto;
  margin-top: 2px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));
}

.status {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10;
  font-size: 14px;
  color: #9aa4b8;
  letter-spacing: 1px;
  padding: 4px 8px;
  background: rgba(20,22,29,.6);
  border-radius: 8px;
}

/* 对话记录：占满中间剩余空间 */
.log {
  width: 100%;
  flex: 1 1 auto;
  min-height: 60px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}

.log__row {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  animation: rise .25s ease;
}

.log__row--user { align-self: flex-end; background: #3b6bff; color: #fff; border-bottom-right-radius: 4px; }
.log__row--ai { align-self: flex-start; background: #262b38; color: #dde3f0; border-bottom-left-radius: 4px; }
.log__row--delta { color: #8fa3d0; font-size: 13px; }

.log__row--hint { align-self: center; color: #6b7280; font-size: 12px; background: none; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 麦克风按钮：底部居中，距底一小段 */
.mic {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2px solid #3b6bff;
  background: rgba(59,107,255,.14);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  align-self: center;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: 92px;
  min-height: 92px;
  margin-bottom: 8px;
  box-sizing: border-box;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

.mic__icon { font-size: 28px; }
.mic__label { font-size: 12px; color: #cdd6ea; }

.mic:active, .mic.recording {
  background: rgba(255, 90, 120, .35);
  border-color: #ff5a78;
  transform: scale(.94);
  box-shadow: 0 0 30px rgba(255,90,120,.35);
}

/* 松开后 → 思考中 loading */
.mic.loading {
  border-color: #8a93b0;
  background: rgba(120,130,160,.16);
  animation: micPulse 1.2s ease-in-out infinite;
}
.mic.loading .mic__icon { opacity: .7; }
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(140,150,180,.35); }
  50%      { box-shadow: 0 0 0 12px rgba(140,150,180,0); }
}

.conn {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  font-size: 12px;
  color: #5b6472;
  padding: 4px 8px;
  background: rgba(20,22,29,.6);
  border-radius: 8px;
}
.conn.ok { color: #37d67a; }
.conn.err { color: #ff6b6b; }