/* 手机端 H5 样式：深色移动优先，与桌面面板同色系；仅供局域网服务静态伺服（无构建步骤） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #171a26;
  color: #e6e9f5;
  overscroll-behavior: none;
}

.hidden { display: none !important; }
.screen { height: 100%; display: flex; flex-direction: column; }

/* ---- 连接屏 ---- */
#connect-screen { align-items: center; justify-content: center; padding: 24px; }
.connect-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; }
.connect-logo {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 12px;
  background: linear-gradient(135deg, #39c5bb, #2f7bff);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #fff;
}
.connect-title { text-align: center; font-size: 18px; margin-bottom: 8px; }
.connect-tip { font-size: 12px; color: #9aa0b8; line-height: 1.6; margin-bottom: 20px; text-align: center; }
.connect-label { font-size: 12px; color: #9aa0b8; margin: 10px 0 4px; }
.connect-input {
  height: 44px; border-radius: 10px; border: 1px solid #2c3145; background: #1e2233;
  color: #fff; padding: 0 12px; font-size: 15px; outline: none;
}
.connect-input:focus { border-color: #39c5bb; }
.connect-btn {
  margin-top: 20px; height: 46px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #39c5bb, #2f9e97); color: #fff; font-size: 16px; font-weight: 600;
}
.connect-btn:active { opacity: 0.85; }
.connect-error { margin-top: 10px; min-height: 18px; font-size: 12px; color: #ff8a85; text-align: center; }

/* ---- 主屏骨架 ---- */
.app-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: #1e2233; border-bottom: 1px solid #2c3145;
}
.app-title { font-size: 16px; font-weight: 700; }
.net-state { flex: 1; font-size: 11px; color: #9aa0b8; }
.net-state.online { color: #39c5bb; }
.net-state.offline { color: #ff8a85; }
.header-btn { border: 1px solid #2c3145; background: transparent; color: #9aa0b8; border-radius: 8px; padding: 4px 10px; font-size: 12px; }

.tab-page { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.tab-bar {
  display: flex; border-top: 1px solid #2c3145; background: #1e2233;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-btn {
  flex: 1; border: none; background: transparent; color: #9aa0b8;
  padding: 12px 0; font-size: 14px;
}
.tab-btn.active { color: #39c5bb; font-weight: 600; }

/* ---- 聊天页 ---- */
/* 对话区改为 flex 列，消息行与时间分割线依次纵向排列（对齐桌面主面板观感） */
.chat-list { flex: 1; overflow-y: auto; padding: 12px 12px 4px; display: flex; flex-direction: column; }
/* 消息行：头像 + 气泡（助手在左、用户在右，每条带头像） */
.msg-row { display: flex; align-items: flex-start; gap: 8px; max-width: 88%; margin-bottom: 10px; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.assistant { align-self: flex-start; }
/* 行内头像：助手用青蓝渐变 ♪ 占位，用户用「我」字圆 */
.row-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-style: normal; color: #fff;
}
.msg-row.assistant .row-avatar {
  background: linear-gradient(135deg, #37d3c4 0%, #2f8dff 100%);
  box-shadow: 0 0 0 1px rgba(53, 197, 207, 0.4);
}
.msg-row.user .row-avatar {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px; color: #e4e9f2;
}
.bubble {
  min-width: 0; padding: 9px 12px; border-radius: 8px; font-size: 15px; line-height: 1.5;
  word-break: break-word; white-space: pre-wrap;
}
/* 用户气泡：微信扁平风——纯色、无描边/无投影/无收角（对齐桌面） */
.msg-row.user .bubble {
  background: #2f8dff; color: #fff; border-radius: 8px; box-shadow: none;
}
/* 助手气泡：微信扁平风——纯色底、无描边（对齐桌面） */
.msg-row.assistant .bubble {
  background: #2b2f3c; border: none; color: #e6e9f0; border-radius: 8px;
}
.bubble.streaming { opacity: 0.85; }
.time-divider { text-align: center; font-size: 11px; color: rgba(150, 155, 168, 0.9); margin: 10px 0 6px; user-select: none; }

.chat-input-bar {
  display: flex; gap: 8px; padding: 8px 10px; background: #1e2233; border-top: 1px solid #2c3145;
}
.chat-input {
  flex: 1; height: 40px; border-radius: 20px; border: 1px solid #2c3145; background: #171a26;
  color: #fff; padding: 0 14px; font-size: 15px; outline: none;
}
/* 发送按钮：描边幽灵风（与桌面面板一致）——透明底 + 1px 品牌描边 + 品牌色文字 */
.chat-send {
  width: 64px; border: 1px solid #2f7bff; border-radius: 10px; background: transparent;
  color: #5b95ff; font-size: 15px; font-weight: 600;
}
.chat-send:active { background: rgba(47, 123, 255, 0.16); }
.chat-send:disabled { opacity: 0.5; border-color: #444652; color: #6f737f; }

/* ---- 动态页 ---- */
.feed-actions { padding: 14px 12px 6px; }
.primary-action {
  width: 100%; height: 46px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #ff7eb3, #ff5e8a); color: #fff; font-size: 16px; font-weight: 600;
}
.primary-action:active { opacity: 0.85; }
.feed-hint { margin-top: 8px; font-size: 11px; color: #9aa0b8; text-align: center; }
.feed-list { flex: 1; overflow-y: auto; padding: 8px 12px; }
.feed-item {
  background: #1e2233; border: 1px solid #2c3145; border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
.feed-item .feed-text { font-size: 14px; line-height: 1.55; word-break: break-word; }
.feed-item .feed-meta { margin-top: 4px; font-size: 11px; color: #9aa0b8; }

/* ---- 状态页 ---- */
.status-card {
  margin: 14px 12px; background: #1e2233; border: 1px solid #2c3145; border-radius: 12px; overflow: hidden;
}
.status-row { display: flex; padding: 13px 14px; border-bottom: 1px solid #2c3145; }
.status-row:last-child { border-bottom: none; }
.status-k { width: 84px; flex-shrink: 0; font-size: 13px; color: #9aa0b8; }
.status-v { flex: 1; font-size: 13px; line-height: 1.5; word-break: break-word; }