/* MeshChat：微信配色 + Galaxy 风格干净圆角/柔和阴影，不用紫蓝渐变 */
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #111; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.phone { max-width: 480px; margin: 0 auto; background: #fff; min-height: 100vh; position: relative; padding-bottom: 56px; }
.topbar { background: #fff; padding: 14px 16px 8px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; z-index: 5; }
.appname { font-size: 20px; font-weight: 700; }
.badge { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #d9d9d9; box-shadow: 0 1px 4px rgba(0,0,0,.08); white-space: nowrap; }
.badge.online { color: #07c160; border-color: #07c160; }
.badge.mesh { color: #576b95; border-color: #576b95; }
.badge.offline { color: #999; }
.view { display: none; }
.view.active { display: block; }
.search { padding: 10px 12px; }
.search input { width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: #fff; font-size: 14px; outline: none; }
.chatlist { background: #fff; }
.chatitem { display: flex; gap: 12px; padding: 12px; border-bottom: 1px solid #ededed; cursor: pointer; align-items: center; }
.chatitem:active { background: #f2f2f2; }
.avatar { width: 44px; height: 44px; border-radius: 8px; background: #07c160; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.avatar.big { width: 60px; height: 60px; border-radius: 10px; font-size: 24px; }
.meta { flex: 1; min-width: 0; }
.meta .row { display: flex; justify-content: space-between; }
.name { font-size: 15px; }
.time { font-size: 12px; color: #999; }
.preview { font-size: 13px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.hint { padding: 12px; font-size: 12px; color: #888; line-height: 1.6; }
.section-title { padding: 14px 12px 6px; font-size: 13px; color: #666; }
.actions { padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.btn { padding: 10px 14px; border-radius: 999px; border: 1px solid #d9d9d9; background: #fff; font-size: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.btn:active { transform: scale(.98); }
.btn.primary { background: #07c160; border-color: #07c160; color: #fff; }
.btn.danger { color: #e64340; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.log { background: #fff; margin: 0 12px 12px; padding: 12px; border-radius: 10px; min-height: 160px; font-size: 12px; line-height: 1.7; color: #333; white-space: pre-wrap; word-break: break-all; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.me-card { background: #fff; display: flex; gap: 14px; padding: 16px; align-items: center; }
.me-name { font-size: 18px; font-weight: 700; }
.me-id { font-size: 12px; color: #888; margin-top: 4px; word-break: break-all; }
.field { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 12px; margin-top: 10px; font-size: 14px; gap: 10px; }
.field input, .field select { flex: 1; padding: 8px 10px; border: 1px solid #d9d9d9; border-radius: 8px; font-size: 14px; background: #fff; }
.chatview { background: #ededed; }
.chat-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #ededed; border-bottom: 1px solid #d9d9d9; position: sticky; top: 53px; z-index: 4; }
#chatTitle { font-weight: 700; }
#chatVia { font-size: 12px; color: #888; }
.msglist { padding: 14px 12px 10px; display: flex; flex-direction: column; gap: 12px; min-height: 50vh; }
.msg { display: flex; gap: 8px; align-items: flex-start; }
.msg.self { flex-direction: row-reverse; }
.msg .bubble { max-width: 72%; padding: 9px 12px; border-radius: 10px; font-size: 15px; line-height: 1.5; word-break: break-word; box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.msg.self .bubble { background: #95ec69; }
.msg.other .bubble { background: #fff; }
.msg .who { font-size: 11px; color: #888; margin-bottom: 2px; }
.msg .tag { font-size: 11px; color: #999; margin-top: 3px; }
.composer { display: flex; gap: 8px; padding: 10px 12px; background: #f7f7f7; border-top: 1px solid #d9d9d9; position: sticky; bottom: 56px; }
.composer input { flex: 1; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 8px; font-size: 15px; outline: none; background: #fff; }
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; display: flex; background: #f7f7f7; border-top: 1px solid #d9d9d9; z-index: 10; }
.tab { flex: 1; padding: 14px 0; border: 0; background: none; font-size: 13px; color: #666; cursor: pointer; }
.tab.active { color: #07c160; font-weight: 700; }
.fab { position: fixed; right: 16px; bottom: 72px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #07c160; color: #fff; font-size: 26px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 9; }
.reg { padding: 40px 24px; text-align: center; }
.reg-title { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.reg-sub { font-size: 14px; color: #666; margin-bottom: 20px; }
.reg input { width: 100%; padding: 12px 14px; border: 1px solid #d9d9d9; border-radius: 10px; font-size: 16px; background: #fff; outline: none; }
.btn.big { width: 100%; padding: 13px; font-size: 16px; margin-top: 14px; }
.reqdetail { background: #fff; margin: 0 12px 12px; padding: 14px; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.08); font-size: 14px; }
@media (min-width: 520px) { body { background: #fff; } .phone { box-shadow: none; } }

/* ============ Galaxy 组件（这次是真的用了仓库代码，不是只借风格） ============
   来源：uiverse-io/galaxy（MIT 开源，github.com/uiverse-io/galaxy），
   本地已拉取：~/workspace/galaxy-upstream（sparse，只拉 Buttons/Inputs/Cards/Toggle-switches）
   1) .galaxy-input：原样取自 Inputs/Anas92876_terrible-owl-47.html（作者 Anas92876）
      原 CSS：max-width 400px / padding 1rem / border-radius 1rem / border none /
      box-shadow 2px 2px 30px 2px lightgrey。未改数值，只加了高优先级选择器适配现有布局。
   2) .galaxy-cta：改编自 Buttons/0x-Sarthak_hungry-penguin-30.html（作者 0x-Sarthak）
      结构、圆角、白色圆圈展开、箭头滑动动画全部保留；唯一改动：颜色 #552da8（紫）
      → #07c160（微信绿），悬停圆圈背景 #1c1c1c 保留。原组件是紫色，不改色会和微信绿冲突。
   其余界面（微信布局、气泡、Tab、卡片）仍是本项目自写 CSS，不是 Galaxy 的。 */
.search input.galaxy-input,
.composer input.galaxy-input,
.reg input.galaxy-input,
.field input.galaxy-input {
  max-width: 400px;
  padding: 1rem;
  border-radius: 1rem;
  border: none;
  box-shadow: 2px 2px 30px 2px lightgrey;
  outline: none;
}
.galaxy-cta {
  position: relative;
  margin: 12px auto 0 auto;
  display: block;
  padding: 11.5px 18px;
  transition: all 0.2s ease;
  border: 3px solid #07c160;
  border-radius: 50px;
  background: #07c160;
  cursor: pointer;
  overflow: hidden;
}
.galaxy-cta:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  border-radius: 50px;
  background: white;
  width: 45px;
  height: 45px;
  transition: all 0.8s ease;
}
.galaxy-cta span {
  position: relative;
  font-size: 18px;
  color: white;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.galaxy-cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: white;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.5s ease;
}
.galaxy-cta:hover:before {
  width: 100%;
  background: #1c1c1c;
}
.galaxy-cta:hover svg {
  transform: translateX(0);
  transition: all 2s ease;
}
.galaxy-cta:active {
  transform: scale(0.95);
  transition: all 2s ease;
}

/* 2026-10-26 手机实测反馈修正：去掉 Galaxy 大阴影/白圆圈按钮，改回微信式简洁样式 */
.search input.galaxy-input,
.composer input.galaxy-input,
.reg input.galaxy-input,
.field input.galaxy-input {
  max-width: none !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #d9d9d9 !important;
  box-shadow: none !important;
}
.galaxy-cta {
  width: 100% !important;
  padding: 13px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #07c160 !important;
  color: #fff !important;
  font-size: 16px !important;
  overflow: visible !important;
}
.galaxy-cta:before { display: none !important; }
.galaxy-cta span { color: #fff !important; font-size: 16px !important; }
.galaxy-cta svg { display: none !important; }
.reg { padding: 48px 24px 24px; text-align: left; }
.reg-title { text-align: center; }
.reg-sub { text-align: center; }

/* 2026-10-26 用户反馈修正2：微信→消息已改；整体去灰、去阴影、去悬浮按钮 */
* { -webkit-tap-highlight-color: transparent; }
body, .phone, .topbar, .chatview, .chat-header, .composer, .tabbar, .chatlist, .search { background: #fff !important; }
.chat-header { border-bottom: 1px solid #e5e5e5 !important; }
.composer { border-top: 1px solid #e5e5e5 !important; }
.composer input { background: #f5f5f5 !important; border: 0 !important; }
.search input { background: #f5f5f5 !important; }
.tabbar { background: #fff !important; border-top: 1px solid #e5e5e5 !important; box-shadow: none !important; }
.tab { font-size: 12px !important; color: #666 !important; }
.tab.active { color: #07c160 !important; }
.btn { box-shadow: none !important; border-radius: 8px !important; border-color: #e5e5e5 !important; }
.badge, .avatar, .msg .bubble, .log, .reqdetail { box-shadow: none !important; }
.msg.other .bubble { border: 1px solid #e5e5e5 !important; }
.log, .reqdetail { border: 1px solid #e5e5e5 !important; }
.fab { display: none !important; }

/* ===== 2026-10-26 修复：比例 / 底部空隙 / 不再过素 / 角标 / 头像 / 图片 ===== */
.topbar { min-height: 48px; padding: 12px 16px; }
.appname { font-size: 19px; }
body.in-chat .phone { padding-bottom: 0; }
.chat-header { background: #fff; padding: 10px 12px; gap: 10px; align-items: center; }
.chat-header .btnBack { flex-shrink: 0; white-space: nowrap; padding: 8px 12px; font-size: 14px; }
.chat-head-meta { flex: 1; min-width: 0; }
#chatTitle { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatVia { display: block; font-size: 11px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.view.chatview.active { display: flex; flex-direction: column; min-height: calc(100dvh - 49px); }
.chatview { background: #f5f5f5; }
.msglist { flex: 1; overflow-y: auto; background: #f5f5f5; }
.chatview .composer { position: static; background: #fff; border-top: 1px solid #e5e5e5; }
#queueHint:empty { display: none; }
.tab { position: relative; }
.tab-badge { position: absolute; top: 5px; right: 16px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e64340; color: #fff; font-size: 11px; display: none; align-items: center; justify-content: center; }
#friendToast { position: fixed; left: 50%; transform: translateX(-50%); top: 60px; z-index: 30; background: #111; color: #fff; padding: 10px 14px; border-radius: 12px; font-size: 14px; display: none; max-width: 92%; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
#friendToast button { margin-left: 10px; }
.avatar-picker { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 12px 12px; }
.avatar-opt { width: 44px; height: 44px; border-radius: 10px; background: #07c160; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; border: 2px solid transparent; }
.avatar-opt.selected { border-color: #111; }
.msg .pic { max-width: 220px; border-radius: 10px; display: block; }
.msg .dl { display: inline-block; margin-top: 6px; font-size: 12px; color: #576b95; }
.search { display: flex; gap: 8px; align-items: center; }
.search input { flex: 1; }
#btnClearSearch, #btnSearchBack { white-space: nowrap; flex-shrink: 0; }

/* 图片查看器：全屏黑底，点图进，圆形下载/分享 */
#imageViewer { position: fixed; inset: 0; background: #000; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; }
#imageViewer.open { display: flex; }
#viewerImg { max-width: 100%; max-height: 78vh; object-fit: contain; }
#viewerClose { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; font-size: 24px; cursor: pointer; }
#viewerToolbar { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; gap: 12px; justify-content: center; }
.vbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.22); color: #fff; font-size: 18px; cursor: pointer; }
#viewerSharePanel { position: absolute; bottom: 100px; left: 12px; right: 12px; background: #fff; border-radius: 14px; padding: 12px; max-height: 40vh; overflow-y: auto; color: #111; }
#viewerHint { position: absolute; bottom: 100px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; }
.msg .bubble.pic-bubble { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.msg .pic { max-width: 220px; border-radius: 12px; display: block; cursor: pointer; }

/* 2026-10-26 修复：气泡按文字收窄，不再留大段空白 */
.msg > div:last-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg.other > div:last-child { align-items: flex-start; }
.msg.self > div:last-child { align-items: flex-end; }
.msg .avatar { flex: none !important; width: 44px !important; height: 44px !important; }
.msg .bubble { width: fit-content; max-width: 100%; }
.msg .tag, .msg .who { width: fit-content; max-width: 100%; }
.msg .bubble.pic-bubble { width: fit-content; }

/* 撤回：气泡不再可选中，长按不弹系统菜单；已撤回变灰 */
.msg .bubble { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.msg .bubble.recalled { color: #888 !important; background: #f0f0f0 !important; font-size: 13px; }
.reedit-btn { background: none; border: 0; color: #576b95; font-size: 13px; cursor: pointer; padding: 0 0 0 6px; }
#recallMenu .btn { margin: 0; }