/* Author: fe-ui-builder */
/* 真实 App 相对原型的差异层。原型的 tokens.css / base.css 一行不改（它们是 Stage 0.5
   的产出，改动会让原型与实装漂移）；这里只加"原型是静态页、App 是单页"带来的补充。
   色值仍然只引 token，不出现字面量。 */

/* 原型的 body 是比稿画布（居中卡片 + 灰底）。真实 App 在手机上要铺满，
   在桌面浏览器上保留手机框更好读——所以只在窄屏解掉框。 */
@media (max-width: 480px) {
  body { padding: 0; gap: 0; }
  .phone {
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .homebar { display: none; }
}

/* 空态 / 错误态：原型里是 mocknote，实装需要一个能占位又不喧宾夺主的块 */
.emptystate {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-card-body);
  line-height: 1.7;
}
.emptystate .retry {
  color: var(--accent);
  font-weight: 600;
}

/* 设备登记入口（S-05 落地前的最小形态，见 render.js renderDeviceEnroll） */
.emptystate .enroll {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0 8px;
}
.emptystate .enroll input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 220px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-card-body);
}
.emptystate .enroll button {
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--surface);
  font-size: var(--fs-card-body);
  font-weight: 600;
  cursor: pointer;
}
.emptystate .hint {
  font-size: var(--fs-ts);
  line-height: 1.6;
}

/* 未读数徽标（原型 S-01 的 .side 位只放了时间，实装这里放未读） */
.unread {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--surface);
  font-size: var(--fs-ts);
  font-weight: 700;
  text-align: center;
}