/* ============================================================
   跨设备传输助手 — Apple iOS/macOS Liquid Glass 简约风格
   低饱和柔和配色 · 毛玻璃 · 大圆角 · 留白 · 分层 · 轻量
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg-0: #eef3fa;                 /* 页面底层 */
  --bg-1: #f6f9fd;                 /* 玻璃后的浅底 */
  --tint: #7aa8e8;                 /* 主色调 柔和蓝 */
  --tint-soft: rgba(122,168,232,.20);
  --tint-2: #a8c6ef;
  --accent: #8ab8a8;               /* 辅助 柔和绿 */
  --danger: #e7938f;               /* 柔和红 */
  --text-1: #3a4350;               /* 主文字 */
  --text-2: #8a94a6;               /* 次文字 */
  --text-3: #b6c0cf;               /* 弱文字 */
  --glass-bg: rgba(255,255,255,.55);
  --glass-bg-hi: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.75);   /* 玻璃高光边 */
  --line-lo: rgba(120,150,190,.16);/* 玻璃描边 */
  --shadow-soft: 0 8px 30px rgba(120,150,190,.16), 0 2px 8px rgba(120,150,190,.08);
  --radius-lg: 30px;
  --radius-md: 22px;
  --radius-sm: 16px;
  --blur: 22px;
}

html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  color: var(--text-1);
  /* 柔和多色渐变底，制造玻璃后的色彩氛围 */
  background:
    radial-gradient(120% 80% at 8% 0%,  rgba(170,200,255,.55) 0%, transparent 55%),
    radial-gradient(120% 90% at 95% 12%, rgba(170,225,210,.45) 0%, transparent 55%),
    radial-gradient(130% 90% at 50% 110%, rgba(200,180,255,.35) 0%, transparent 60%),
    linear-gradient(180deg, #eef3fa 0%, #e9eef7 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 应用壳：桌面端呈现悬浮玻璃卡片 ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 760px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  body { padding: 22px 0 34px; }
  .app {
    height: calc(100vh - 56px);
    max-height: 900px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5);
    backdrop-filter: blur(var(--blur)) saturate(1.5);
    border: 1px solid var(--line-lo);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft), inset 0 1px 0 var(--line);
    overflow: hidden;
  }
}
@media (max-width: 639px) {
  /* 移动端全屏，仅底部/顶部保留玻璃条 */
  .app { background: transparent; }
}

/* ---------- 玻璃工具类 ---------- */
.glass {
  background: var(--glass-bg-hi);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
  backdrop-filter: blur(var(--blur)) saturate(1.6);
  border-bottom: 1px solid var(--line-lo);
  box-shadow: inset 0 1px 0 var(--line);
}

/* ---------- 顶部栏 ---------- */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  position: relative;
  z-index: 3;
}
.title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: .3px;
}
.title-dot {
  width: 10px; height: 10px; border-radius: 4px;
  background: linear-gradient(135deg, var(--tint), var(--accent));
  box-shadow: 0 2px 6px rgba(122,168,232,.5);
}
.status {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2);
  background: rgba(255,255,255,.6);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-lo);
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(138,184,168,.25);
  transition: background .3s;
}
body.offline .status-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(231,147,143,.25); }
body.offline #statusText { color: var(--danger); }

/* 顶栏右侧：连接状态 + 一键清空 */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.clear-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line-lo);
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, transform .12s;
}
.clear-btn:hover { background: rgba(231,147,143,.14); }
.clear-btn:active { transform: scale(.94); }
.clear-btn:disabled { opacity: .55; pointer-events: none; }
/* 极窄屏：让标题、状态、清空不换行挤压 */
@media (max-width: 420px) {
  .topbar { padding: 14px 16px; }
  .title { font-size: 17px; }
  #statusText { display: none; }        /* 超窄屏隐藏连接文字，仅留圆点+清空 */
}

/* ---------- 消息区 ---------- */
.list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.list::-webkit-scrollbar { width: 6px; }
.list::-webkit-scrollbar-thumb { background: rgba(150,170,200,.35); border-radius: 6px; }

.msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  animation: rise .35s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 文字气泡：液态玻璃 */
.bubble {
  position: relative;
  background: var(--glass-bg-hi);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5);
  backdrop-filter: blur(var(--blur)) saturate(1.5);
  border: 1px solid var(--line-lo);
  border-radius: var(--radius-md);
  border-top-left-radius: 8px;
  padding: 13px 17px;
  font-size: 15.5px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 84%;
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--line);
}

/* 文件卡片 */
.filecard {
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.5));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
  backdrop-filter: blur(var(--blur)) saturate(1.4);
  border: 1px solid var(--line-lo);
  border-radius: var(--radius-md);
  padding: 15px 18px;
  min-width: 230px;
  max-width: 88%;
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
}
.file-ico {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--tint);
  background: var(--tint-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.file-info { min-width: 0; flex: 1 1 auto; }
.fname { font-size: 15px; font-weight: 550; word-break: break-all; }
.fsize { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }

/* 操作按钮行 */
.ops {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-left: 2px;
}
.ops button {
  border: none;
  background: var(--glass-bg-hi);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid var(--line-lo);
  color: var(--tint);
  font-size: 13px;
  font-weight: 550;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s, background .2s, box-shadow .2s;
  box-shadow: 0 1px 3px rgba(120,150,190,.10), inset 0 1px 0 var(--line);
}
.ops button:hover { background: var(--glass-bg); transform: translateY(-1px); }
.ops button:active { transform: scale(.96); }
.ops button.copy { color: var(--tint); }
.ops button.download { color: var(--accent); }
.ops button.del { color: var(--danger); }

/* 时间戳 */
.meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
  padding-left: 6px;
  letter-spacing: .2px;
}

/* ---------- 底部输入栏 ---------- */
.composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  margin-top: 6px;
  position: relative;
  z-index: 3;
}
@media (min-width: 640px) {
  .composer { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
}

.icon-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--tint);
  cursor: pointer;
  background: var(--glass-bg-hi);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid var(--line-lo);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--line);
  transition: transform .12s, background .2s;
}
.icon-btn:hover { background: var(--glass-bg); }
.icon-btn:active { transform: scale(.94); }

#textInput {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--line-lo);
  border-radius: 18px;
  padding: 11px 16px;
  font-size: 15.5px;
  font-family: inherit;
  line-height: 1.45;
  max-height: 130px;
  outline: none;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-1);
  box-shadow: inset 0 1px 3px rgba(120,150,190,.08);
  transition: box-shadow .2s, background .2s;
}
#textInput:focus {
  background: rgba(255,255,255,.85);
  border-color: rgba(122,168,232,.5);
  box-shadow: 0 0 0 4px var(--tint-soft), inset 0 1px 3px rgba(120,150,190,.05);
}
#textInput::placeholder { color: var(--text-3); }

.send-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: none;
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--tint), #6f9ae0);
  box-shadow: 0 6px 16px rgba(122,168,232,.4), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s, box-shadow .2s, opacity .2s;
}
.send-btn:hover { box-shadow: 0 8px 20px rgba(122,168,232,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.send-btn:active { transform: scale(.94); }
.send-btn:disabled { opacity: .45; box-shadow: none; }

/* ---------- Toast 复制/操作提示 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 20px);
  max-width: 82vw;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 550;
  background: rgba(48,58,74,.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 12px 30px rgba(40,55,80,.28), inset 0 1px 0 rgba(255,255,255,.2);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .toast-ico { width: 18px; height: 18px; }

/* 文件选择框：视觉隐藏但保留可聚焦/可触发，确保 iOS/Android 调 click() 能弹出系统选择器
   （不用 display:none / hidden，避免部分移动浏览器静默失败） */
.file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}