/* 页面与状态层. 令牌与通用组件在 styles.css, 本文件只消费变量, 不写字面颜色. */

/* ---- 导航栏右侧 ---- */
/* 品牌区可点: 回到首页. 外观保持标题原样, 只加可点的手感. */
.brand {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  font: inherit; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--r-btn);
}
.brand:hover { color: var(--p-hover); }
.brand:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; }

.nav-right { display: flex; align-items: center; gap: var(--sp-2); }
/* 清单头部的操作按钮组: 清空 / 取消 同一时间只出现一个. */
.row-actions { display: flex; gap: var(--sp-1); flex: none; }
/* 完成态只剩下"继续发送", 靠右对齐才落回原来发送按钮的位置. */
#continue { margin-left: auto; }
/* 语言下拉复用设备下拉的形态, 但触发器在导航栏右侧, 面板要右对齐. */
.lang { position: relative; }
.picker-menu-right { left: auto; right: 0; }
#lang-cur { font-weight: 650; }

/* ---- 连接行: 连接中/失败是阻塞态, 占住内容区居中 ---- */
.connection-bar { display: flex; align-items: center; gap: var(--sp-2); }
.connection-bar p { margin: var(--sp-1) 0; }
.connection-bar .btn { flex-shrink: 0; white-space: nowrap; }
.connection-bar.is-blocking {
  flex-direction: column; justify-content: center; gap: var(--sp-3);
  text-align: center; padding: 0 var(--sp-3);
  min-height: min(46vh, 22rem);
}
.connection-bar.is-blocking p { margin: 0; font-size: 1.02rem; color: var(--text); }
/* 失败时"重试"是整屏唯一的操作, 用主档高度. */
.connection-bar.is-blocking .btn { height: 2.75rem; min-height: 2.75rem; padding: 0 1.4rem; }

#connection.loading::before {
  content: ''; display: inline-block; width: 1rem; height: 1rem; margin-right: 0.5rem;
  border: 2px solid var(--border); border-top-color: var(--p); border-radius: 50%;
  animation: spin .7s linear infinite; vertical-align: -2px;
}
.connection-bar.is-blocking #connection.loading::before { width: 1.4rem; height: 1.4rem; border-width: 3px; vertical-align: -4px; }
#connection.error { color: var(--er); }
#connection.warn { color: var(--wa); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #connection.loading::before { animation: none; } }

/* ---- 错误提示: 给一块自己的底, 而不是一行容易略过的小字 ---- */
#notice {
  color: var(--er); overflow-wrap: anywhere;
  margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3);
  background: var(--er-soft);
  border-left: 3px solid var(--er); border-radius: var(--r-input);
  font-size: var(--fs-detail);
}
#notice:empty { display: none; }

/* ---- 拖放热区 ----
   与已选清单同样是 .card(白底 + 描边 + 柔和投影), 只在这里覆盖内边距与拖拽态. */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2.25rem 1.25rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.drop h2 { font-size: 1.1rem; margin: 0; }
.drop .row { margin-top: var(--sp-3); }
/* 拖拽悬停: 主色描边 + 辉光, 把"可以放这里"说清楚. */
.drop.over { border-color: var(--p); background: var(--p-soft); box-shadow: var(--ring-primary); }
.drop.is-locked { background: var(--bg); }
.drop.is-locked > * { opacity: .45; }

/* 三块区域按 #main-ui 的 data-stage 渐进出现, JS 只切这一个属性:
   empty    只有拖放入口
   selected 拖放条(收成细带, 仍可继续拖入) + 清单 + 操作行(发送给/发送)
   sending  只剩清单, 取消挪到清单头部
   done     清单(逐项结果) + 操作行(继续发送) */
#selection, .send-row { display: none; }
#main-ui[data-stage="selected"] #selection,
#main-ui[data-stage="sending"] #selection,
#main-ui[data-stage="done"] #selection { display: block; }
#main-ui[data-stage="selected"] .send-row,
#main-ui[data-stage="done"] .send-row { display: flex; }
#main-ui[data-stage="sending"] #drop,
#main-ui[data-stage="done"] #drop { display: none; }
#main-ui[data-stage="selected"] #drop {
  flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;
  text-align: left; padding: 0.7rem 1rem;
}
#main-ui[data-stage="selected"] #drop h2 { font-size: var(--fs-body); letter-spacing: 0; }
#main-ui[data-stage="selected"] #drop .row { margin-top: 0; }
/* 收到 .btn-xs 那一档, 别自成第三档尺寸. */
#main-ui[data-stage="selected"] #drop .btn { height: 2.25rem; min-height: 2.25rem; padding: 0 0.8rem; font-size: var(--fs-detail); }

/* ---- 已选清单 ---- */
#selection { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
#selection #selected-bar { margin-top: 0; }
/* 给得高一些, 常见规模(十来个文件)就不会出滚动条. */
#selected { width: 100%; text-align: left; max-height: min(28rem, 55vh); overflow: auto; }
#selected-bar { margin-bottom: 0.1rem; }

/* ---- 发送动作区 ---- */
.send-row { margin-top: var(--sp-3); padding: 0.9rem var(--sp-4); }
.target-slot { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1 1 auto; }
#target-prefix { flex: none; }
#target-label { min-width: 0; overflow-wrap: anywhere; }

/* ---- 自绘下拉(设备 + 语言共用) ---- */
#target-picker { position: relative; min-width: 0; max-width: 100%; }
.picker-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; max-width: 100%;
  font: inherit; font-size: var(--fs-detail); font-weight: 650; color: var(--text);
  background: var(--surface); border: var(--bw) solid var(--border-strong);
  border-radius: var(--r-pill); padding: 0.45rem 0.9rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.picker-btn:hover { border-color: var(--p); }
.picker-btn:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.picker-btn .chev { color: var(--text-muted); font-size: 0.65rem; flex: none; }
#target-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-menu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
  display: none; min-width: 11rem; max-width: min(20rem, 82vw);
  background: var(--surface); border: var(--bw) solid var(--border);
  border-radius: var(--r-btn); padding: 0.35rem;
  box-shadow: var(--shadow-lg);
}
.picker-menu.open { display: block; }
.picker-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--r-input);
  padding: 0.55rem 0.7rem; font: inherit; font-size: var(--fs-detail); color: var(--text);
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-menu button:hover:not(:disabled) { background: var(--bg); }
/* 离线设备留在列表里(能看出设备还在), 但不可选. */
.picker-menu button:disabled { color: var(--text-faint); cursor: not-allowed; }
.picker-menu button[aria-current="true"] { color: var(--p-hover); font-weight: 700; }

/* ---- 绑定卡 ---- */
#bind-card { padding: 2.25rem 1.75rem; text-align: center; }
#bind-card .hint { margin: var(--sp-2) 0 var(--sp-3); }
#bind-card textarea { margin: 0 0 var(--sp-3); }
.row.center { justify-content: center; }
.qr { display: flex; align-items: center; justify-content: center; min-height: 8rem; margin: var(--sp-3) 0 var(--sp-2); }
.qr svg { width: min(220px, 100%); height: auto; background: #fff; padding: 0.5rem; border-radius: var(--r-input); border: var(--bw) solid var(--border); }
#paste-panel { margin: var(--sp-3) 0 var(--sp-1); }
#paste-panel > summary { cursor: pointer; font-size: var(--fs-detail); color: var(--text-muted); text-align: center; }
#paste-panel[open] > summary { margin-bottom: var(--sp-2); }

/* ---- 传输卡 ---- */
#transfer { margin-top: var(--sp-3); }
.transfer-head { margin-top: 0; align-items: center; }
.transfer-head h2 { font-size: 1.05rem; }
.transfer-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
#status { margin: var(--sp-2) 0 var(--sp-1); }
#transfer-hint { margin: var(--sp-2) 0 0; }
/* 完成后收成一行汇总: 主色描边 + 辉光, 呼应参考站的"推荐卡"处理. */
#transfer.is-done { padding: 1.05rem var(--sp-4); border-color: var(--p-ring); box-shadow: var(--ring-primary); }
#transfer.is-done #status { margin: var(--sp-1) 0 0; font-size: 1.05rem; font-weight: 700; color: var(--su); }
#transfer.is-done #progress,
#transfer.is-done #transfer-hint,
#transfer.is-done #cancel { display: none; }

/* ---- 设备弹窗 ---- */
#settings { width: min(34rem, 92vw); max-height: 88vh; overflow: auto; }
#settings > .row:first-child { margin: 0 0 0.2rem; }
/* 三块各自划界: 分割线 + 段头 + 说明文字.
   三块都只有 1-2 个控件, 做成 tab 会把信息藏起来, 点击成本大于收益. */
.settings-section { border-top: var(--bw) solid var(--border); padding: var(--sp-3) 0; }
.settings-section h3 { font-size: var(--fs-body); margin: 0 0 0.3rem; }
.settings-section .detail { margin: 0 0 0.75rem; }
.settings-section .row { margin-top: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 0.3rem; }
.section-head h3 { margin: 0; }
#settings #alias { min-width: 0; flex: 1; width: 10rem; }
#settings-notice { color: var(--er); overflow-wrap: anywhere; margin-top: var(--sp-2); font-size: var(--fs-detail); }
#settings-notice:empty { display: none; }

/* ---- 表单与弹窗通用 ---- */
input, textarea, select {
  font: inherit; max-width: 100%; padding: 0.65rem 0.75rem;
  border: var(--bw) solid var(--border-strong); border-radius: var(--r-input);
  background: var(--surface); color: var(--text);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--p); outline-offset: 1px; border-color: var(--p);
}
textarea { width: 100%; resize: vertical; margin: 0.7rem 0; }
button, a, summary { touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
small { font-size: var(--fs-micro); color: var(--text-muted); }
a { color: var(--p-hover); }
#downloads a { display: block; margin: var(--sp-2) 0; overflow-wrap: anywhere; }
dialog {
  max-width: min(32rem, 90vw); border: var(--bw) solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-4); box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: color-mix(in srgb, var(--text) 45%, transparent); }
.online { color: var(--su); }
.offline { color: var(--text-faint); }
#peers li { grid-template-columns: minmax(0, 1fr) auto auto; }

/* 页脚链接别把末尾的箭头拆到下一行. */
footer a { white-space: nowrap; margin-left: 0.3rem; }

@media (max-width: 480px) {
  /* 窄屏导航栏挤不下品牌后缀, 会折成两行; 它只是说明"这是网页版", 小屏可省. */
  h1 small { display: none; }
  h1 { font-size: 1.1rem; }
  .card { padding: var(--sp-3); }
  /* 窄屏上 .card 的内边距会盖掉 .drop 的(同特异性且媒体查询在后), 显式给回. */
  .drop { padding: 1.75rem 1rem; }
  .wrap { padding: var(--sp-3) 0.75rem var(--sp-5); }
  .navbar-inner { padding: 0 0.75rem; }
  .row { gap: 0.5rem; }
  #bind-card { padding: var(--sp-4) var(--sp-3); }
  #selection { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .send-row { padding: var(--sp-2) var(--sp-3); }
}
/* 触控目标: 行内档也过 44px. */
@media (pointer: coarse) { .btn-xs, #main-ui[data-stage="selected"] #drop .btn { min-height: 2.75rem; } }