/* ═══════════════════════════════════════════════════════════
   demo.html 覆盖样式
   原型是一个独立页面（居中的手机 + 说明文字）；官网首屏只要那台
   手机本身，嵌在 iframe 里、透明背景、完全不可交互。
   ═══════════════════════════════════════════════════════════ */

/* 没有 color-scheme 时，浏览器在浅色模式下会把 iframe 画布刷成白色，
   于是机身圆角外面露出一圈白边。声明成深色，画布才真正透明。 */
:root { color-scheme: dark; }

html, body {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

/* 原型自己的说明头和页脚：只能藏，不能从 DOM 里删——
   初始化脚本会往 .hint 里的 #brandSprite 写内容，删了它第一行就抛异常。 */
.hint, .foot { display: none !important; }

.device { margin: 0 !important; }

/* ───────── 壁纸 ─────────
   原型自带的是 10 款纯 CSS 渐变，首屏换成一张真实壁纸：
   既更像一台真手机，也顺带把「背景可换」这件事说出来了。
   原型的 applyWall() 会往 #wall / #drawer 写**行内** style，
   所以这里必须 !important，否则压不住。 */
/* 锁屏的壁纸层写在同一条选择器里——这正是「锁屏与桌面是同一套壁纸」
   那句话的实现：不是两张图碰巧一样，是同一条规则。 */
#wall,
#drawer,
.cx-lockwall {
  background: url('demo-wall.webp') center / cover no-repeat !important;
}

/* 这是自动播放的展示，不接受任何输入——鼠标、触摸、键盘焦点都挡掉。
   iframe 外层还会再加一层 pointer-events:none，保证页面滚动不被吃掉。 */
.device, .device * {
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
}
.device input { pointer-events: none !important; }

/* 展示里用不到的入口，藏掉以免播放时被误触发出现 */
.edge { display: none !important; }

/* ───────── 说明片：每段演示之前先讲一句这是什么 ─────────
   盖满整块屏，连灵动岛（z-index 60）和状态栏（58）一起盖住，所以这里用 70。
   说明片是画外音，不是手机界面的一部分；露出半截手机零件反而像没对齐。
   「灵动岛显示 4」那一拍不受影响——片子在并行开始前就已经收起来了。 */
#demo-slide {
  position: absolute; inset: 0; z-index: 70;
  /* 自己带圆角：backdrop-filter 会另起层叠上下文，
     在 Chromium 里能逃出 .scr 的 overflow:hidden 圆角裁剪，四角会方出来。
     数值和 .scr 的 border-radius 一致。 */
  border-radius: 40px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 11px; padding: 0 36px; text-align: center;
  /* 这是要读的字，不是装饰层——背板必须够厚，让下面的对话彻底退开 */
  background: rgba(9, 11, 12, .93);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
  opacity: 0; pointer-events: none;
  transition: opacity .3s cubic-bezier(.3, .9, .3, 1);
}
#demo-slide.on { opacity: 1; }

#demo-slide .ds-k {
  font: 700 10px var(--mono); letter-spacing: 1.4px;
  color: var(--glow); text-transform: uppercase;
}
#demo-slide .ds-t {
  font-size: 19px; font-weight: 750;
  letter-spacing: -.3px; line-height: 1.35; color: var(--paper);
}
#demo-slide .ds-b {
  font-size: 12.5px; line-height: 1.65; color: var(--fog);
}

/* ═══════════ 移植组件的样式 ═══════════
   全部加 cx- 前缀：原型里已经有 .card / .chip / .btn / .msg / .chips，
   不加前缀会直接覆盖掉原型自己的建议气泡和按钮。 */

.cx-card{
  margin:4px 0 13px;border-radius:16px;padding:13px 14px;position:relative;overflow:hidden;
  background:var(--g-card);border:1px solid var(--g-brd);
  -webkit-backdrop-filter:var(--blur-md);backdrop-filter:var(--blur-md);
  animation:rise .3s ease;
}
.cx-hd{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;}
.cx-tick{color:var(--glow);}
.cx-sp{
  width:11px;height:11px;border:2px solid var(--glow-deep);border-top-color:var(--glow);
  border-radius:50%;animation:sp .8s linear infinite;flex:0 0 11px;
}

/* 输入框的打字态：给个闪烁光标，让「有人在打字」这件事看得见 */
.inbar input.cx-typing{color:var(--paper);}

/* 分段控件 */
.cx-seg{
  display:flex;padding:3px;border-radius:12px;margin-top:11px;
  background:var(--g-thick);border:1px solid var(--g-brd);
}
.cx-seg div{
  flex:1;text-align:center;font-size:12px;color:var(--fog);
  padding:7px 0;border-radius:9px;font-weight:500;transition:.2s;
}
.cx-seg div.on{background:rgba(255,255,255,.18);color:var(--paper);font-weight:600;}

.cx-lbl{font-size:11.5px;color:var(--fog);margin-top:12px;}
.cx-lbl.s{font-size:10.5px;color:var(--faint);margin-top:0;margin-bottom:4px;}

.cx-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px;}
.cx-chip{
  border-radius:999px;padding:7px 13px;font-size:12px;color:var(--fog);transition:.2s;
  background:var(--g-ctrl);border:1px solid var(--g-brd);
}
.cx-chip.on{background:rgba(91,157,249,.16);border-color:var(--blue);color:var(--paper);font-weight:600;}

.cx-dates{display:flex;gap:9px;margin-top:7px;}
.cx-dates>div{flex:1;}
.cx-dv{
  border-radius:10px;padding:8px 11px;font-size:12.5px;font-weight:600;
  display:flex;align-items:center;transition:.2s;
  background:var(--g-ctrl);border:1px solid var(--g-brd);
}
.cx-dv span{flex:1;}
.cx-dv.open{border-color:var(--blue);}

.cx-month{
  margin-top:9px;border-radius:12px;padding:10px;
  background:var(--g-card);border:1px solid var(--g-brd);
}
.cx-month .mh{display:flex;align-items:center;font-size:12.5px;font-weight:600;}
.cx-month .mh span{flex:1;text-align:center;}
.cx-month .mh b{padding:0 8px;font-weight:700;}
.cx-month .wk,.cx-month .wr{display:grid;grid-template-columns:repeat(7,1fr);}
.cx-month .wk div{font-size:10.5px;color:var(--faint);text-align:center;padding:6px 0 4px;}
.cx-month .wr div{height:30px;display:flex;align-items:center;justify-content:center;font-size:11.5px;position:relative;}
.cx-month .wr div.past{color:var(--faint);}
.cx-month .wr div.in::before{content:"";position:absolute;left:0;right:0;height:24px;background:rgba(91,157,249,.16);}
.cx-month .wr div.se{color:var(--ink);font-weight:700;}
.cx-month .wr div.se::after{
  content:attr(data-d);position:absolute;width:26px;height:26px;border-radius:50%;
  background:var(--blue);display:flex;align-items:center;justify-content:center;
}

.cx-row{display:flex;align-items:center;margin-top:12px;font-size:12.5px;}
.cx-row .t{flex:1;}
.cx-sw{width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;flex:0 0 38px;transition:.2s;}
.cx-sw.on{background:var(--blue-deep);}
.cx-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#5a6f68;transition:.2s;}
.cx-sw.on::after{left:19px;background:var(--blue);}
.cx-step{display:flex;align-items:center;gap:10px;}
.cx-step b{width:18px;text-align:center;font:700 13.5px var(--mono);}
.cx-step i{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-weight:700;background:var(--g-ctrl);border:1px solid var(--g-brd);
}

.cx-btns{display:flex;gap:9px;margin-top:14px;}
.cx-btns>*{flex:1;}
.cx-btn{border-radius:12px;padding:12px;text-align:center;font-weight:700;font-size:13.5px;transition:.15s;}
.cx-btn.blue{background:var(--blue);color:var(--ink);}
.cx-btn.amber{background:var(--amber);color:#2a1c08;}
.cx-btn.neutral{background:var(--g-ctrl);color:var(--paper);border:1px solid var(--g-brd);}

.cx-done{font-size:12px;color:var(--glow);margin-top:9px;}

/* 并行卡 */
.cx-par{border-color:var(--glow-deep);}
.cx-par.ok{border-color:var(--g-brd);}
.cx-prow{display:flex;align-items:center;gap:9px;margin-top:7px;font-size:12.5px;}
.cx-prow .dot{width:6px;height:6px;border-radius:50%;background:var(--glow);flex:0 0 6px;}
.cx-prow.ok .dot{background:var(--glow-deep);}
.cx-prow .n{width:68px;font-weight:600;}
.cx-prow .s{color:var(--glow);font-size:11.5px;}
.cx-prow.ok .s{color:var(--fog);}

/* 选择卡 */
.cx-opt{
  border-radius:12px;padding:10px 12px;margin-top:8px;transition:.2s;
  background:var(--g-card);border:1px solid var(--g-brd);
}
.cx-opt.on{background:rgba(91,157,249,.10);border-color:var(--blue);}
.cx-opt .t{display:flex;align-items:center;font-size:13px;font-weight:700;}
.cx-opt .t span{flex:1;}
.cx-opt .t b{font:700 14px var(--mono);}
.cx-opt .l2{font-size:11.5px;color:var(--fog);margin-top:2px;}
.cx-opt .tags{display:flex;gap:10px;font-size:10.5px;color:var(--faint);margin-top:5px;}
.cx-none{border-top:1px solid var(--g-brd);margin-top:10px;padding-top:9px;font-size:12px;color:var(--blue);font-weight:600;}

/* 交还卡 v2：一句话 + 一个大按钮 */
.cx-hand{background:rgba(240,179,102,.10);border-color:var(--amber-deep);}
.cx-hand .line{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:600;line-height:1.45;}
.cx-hand .why{font-size:11.5px;color:var(--fog);margin-top:9px;}

/* ───────── 锁屏 ─────────
   z-index 57：压在状态栏（58）和灵动岛（60）之下，所以锁屏上也看得见
   时间和那只精灵——和真机一致。上滑退场用 transform，背景不动。 */
.cx-lock{
  position:absolute;inset:0;z-index:57;border-radius:40px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .42s cubic-bezier(.3,.9,.3,1),opacity .34s ease;
}
.cx-lock.off{transform:translateY(-30%);opacity:0;pointer-events:none;}
.cx-lockwall{position:absolute;inset:0;z-index:-1;}
.cx-lock .d{margin-top:118px;font-size:13px;color:var(--fog);letter-spacing:1px;font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.5);}
.cx-lock .t{font-size:78px;font-weight:200;letter-spacing:-2px;line-height:1;margin-top:8px;
  text-shadow:0 1px 6px rgba(0,0,0,.45);}
.cx-lock .pill{
  position:absolute;bottom:46px;border-radius:999px;padding:9px 16px;font-size:12px;font-weight:500;
  background:var(--g-ctrl);border:1px solid var(--g-brd);color:var(--paper);
  -webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
}

/* ───────── 状态栏遮罩 ─────────
   内容从状态栏下面滚过时，会和时间、信号、电量叠在一起。这里加一层
   自上而下渐隐的蒙版把下面的内容压暗、压糊。

   用渐变而不是实色条：设计规格第 4 条要求「屏幕是一整块，没有分界线」，
   一条实色状态栏会切出硬边，正是规格要避免的。

   z-index 34 的位置是算出来的：要压住正文（无 z-index），
   又要让 .topfloat（35）、状态栏（58）、灵动岛（60）留在上面。
   原型把 .scr::after 置成了 content:none，这里正好接管。 */
.scr::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:58px;
  z-index:34; pointer-events:none;
  border-radius:40px 40px 0 0;        /* 跟随屏幕圆角，否则上面两角会方出来 */
  background:linear-gradient(180deg,
    rgba(10,12,13,.62) 0%,
    rgba(10,12,13,.30) 55%,
    transparent 100%);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  /* 蒙版让模糊本身也渐隐，不然模糊区会在 58px 处留一条可见的边 */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);
}

/* 「思考中」只让眼睛左右看，不跳。
   跳动是「正在干活」的信号，得留给后台真有任务的时候（那时是奔跑精灵 +
   数字球 + 活动条）。没有任务在执行却在跳，等于报了个假状态。 */
.island.thinking .sprite{ animation: none !important; }

/* 锁屏时灵动岛只剩摄像头。
   手机锁着的时候没有会话，「待命」和那只精灵都不该出现——
   那是在报一个并不存在的状态。 */
.cx-locked .island .idle-sprite,
.cx-locked .island .ball,
.cx-locked .island .run-sprite,
.cx-locked .island .bars{ display:none !important; }
.cx-locked .island{ justify-content:center; padding:0; }

/* 托管开关被改动时闪一下，否则在小屏上根本注意不到 */
.srow.cx-flash{background:rgba(240,179,102,.14);transition:background .2s;}

/* 用户降低动效偏好时，导演脚本会停在主屏不播——这里把持续动画也一并停掉 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}