/* 云秀互动官网 · 小蝶 Dia 页 叙事演示 v2（0929 工作台版 · 二稿）
   —— 服务于 /dia/ 页的四个演示：hero 演示面板（右栏）/ 漏点轨道 / 客服对话对比 / 24h 时钟。
   默认全部可读（无 JS、减少动态时保持静态示意的最终态）；仅 html.motion + .is-playing 时进入播放态。
   命名空间：d2-*。 */

/* ——— hero 两栏 ——— */
.dia-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}

/* ——— hero：演示面板（右栏，紧凑）——— */
.d2-hero{width:100%;max-width:520px;justify-self:end}
.d2-hero-panel{border:1px solid #e3ecf7;border-radius:22px;background:#fff;box-shadow:0 30px 70px rgba(20,60,120,.12);overflow:hidden}
.d2-hero-bar{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid #edf2f9;background:linear-gradient(180deg,#fbfdff,#f6faff);font-size:12px;font-weight:700;color:#3d5a7d}
.d2-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#5b7695}
.d2-live i{width:7px;height:7px;border-radius:50%;background:#2fa56f;box-shadow:0 0 0 3px rgba(47,165,111,.15)}
html.motion .d2-hero.is-playing .d2-live i{animation:d2Pulse 2.2s ease-in-out infinite}
@keyframes d2Pulse{0%,100%{box-shadow:0 0 0 3px rgba(47,165,111,.15)}50%{box-shadow:0 0 0 6px rgba(47,165,111,.05)}}
.d2-hero-stream{display:flex;flex-direction:column;gap:9px;height:488px;padding:16px 18px 14px;overflow:hidden}
.d2-hero-note{margin:0;padding:10px 18px 13px;border-top:1px dashed #e8eef7;font-size:11px;color:#8a9db3}
.d2-edge{align-self:flex-start;font-size:10px;letter-spacing:.16em;font-weight:700;color:#8a9db3}
.d2-card{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:10px 13px;border-radius:14px;border:1px solid #d8e9ff;background:linear-gradient(135deg,#f0f7ff,#f4fbff)}
.d2-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.d2-card-tag{font-size:10px;letter-spacing:.16em;font-weight:700;color:#4a7bb5}
.d2-card-act{font-size:11.5px;font-weight:700;color:#1f7a52}
.d2-card-chips{display:flex;flex-wrap:wrap;gap:6px}
.d2-card-chips b{font-size:12px;font-weight:600;color:#2b4a70;background:#fff;border:1px solid #dce8f6;border-radius:999px;padding:3px 8px}
.d2-card-why{margin:0;font-size:11.5px;color:#54708f}
.d2-card-why em{font-style:normal;font-weight:700;color:#1f7a52}

/* ——— 通用序列 ——— */
.d2-seq{display:flex;flex-direction:column;gap:10px}
.d2-line{display:flex;flex-direction:column;gap:5px;max-width:min(88%,460px)}
.d2-line.is-c{align-self:flex-start;align-items:flex-start}
.d2-line.is-d{align-self:flex-end;align-items:flex-end}
.d2-who{font-size:10px;letter-spacing:.14em;color:#8a9db3;font-weight:700}
.d2-bubble{position:relative;margin:0;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.55;background:#f0f3f7;color:#354b61}
.d2-line.is-c .d2-bubble{border-bottom-left-radius:6px}
.d2-line.is-d .d2-bubble{background:#eaf3ff;color:#31506f;border-bottom-right-radius:6px}
.d2-end{align-self:flex-start;margin:2px 0 0;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px}
.d2-end.is-dead{background:#fdeeeb;color:#a8564a;border:1px solid #f3d5cf}
.d2-end.is-win{background:#e8f6ef;color:#1f7a52}
.d2-note{display:block;margin:14px 0 0;color:#7d8ea6}
.d2-caption{margin:16px 0 0;color:#5d7089}

/* 输入中：气泡内显示三点（纯 CSS，无需额外 DOM） */
.d2-line.is-typing .d2-bubble{color:transparent!important}
.d2-line.is-typing .d2-bubble::after{content:"";position:absolute;left:13px;top:50%;width:26px;height:6px;transform:translateY(-50%);background-image:radial-gradient(circle,#9db4cc 2.6px,transparent 3.2px);background-size:9px 6px;background-repeat:repeat-x;opacity:.6}
html.motion .d2-line.is-typing .d2-bubble::after{animation:d2Dots 1.1s ease-in-out infinite}
@keyframes d2Dots{0%,100%{opacity:.35}50%{opacity:.85}}

/* 播放态：仅 html.motion + .is-playing */
html.motion .is-playing .d2-line.is-c{transform:translate(-6px,9px)}
html.motion .is-playing .d2-line.is-d{transform:translate(6px,9px)}
html.motion .is-playing .d2-line,
html.motion .is-playing .d2-end,
html.motion .is-playing .d2-edge,
html.motion .is-playing .d2-card,
html.motion .is-playing .d2-morning,
html.motion .is-playing .d2-leak3-item{opacity:0;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
html.motion .is-playing .d2-line.is-on,
html.motion .is-playing .d2-end.is-on,
html.motion .is-playing .d2-edge.is-on,
html.motion .is-playing .d2-card.is-on,
html.motion .is-playing .d2-morning.is-on,
html.motion .is-playing .d2-leak3-item.is-on{opacity:1;transform:none}

/* ——— 漏在哪：三处漏点诊断（纯痛点，不重复后文的接住方案）——— */
.d2-leak3{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.d2-leak3-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.d2-leak3-item{position:relative;display:flex;flex-direction:column;gap:6px;margin:0;padding:16px 16px 14px;border-radius:16px;border:1px solid #e9eff7;background:#fff;transition:border-color .4s,background .4s,box-shadow .4s}
.d2-lg-no{font-size:10px;letter-spacing:.14em;font-weight:700;color:#9aabc2}
.d2-leak3-item b{font-size:14.5px;color:#22344c}
.d2-leak3-item i{font-style:normal;font-size:12px;line-height:1.5;color:#7d8ea6}
.d2-leak3-item em{position:absolute;top:12px;right:12px;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:#d64b43;border-radius:999px;padding:3px 9px;opacity:0;transform:scale(.7);transition:opacity .35s,transform .35s}
.d2-leak3-item.is-on{border-color:#f0c9c4;background:#fff9f8;box-shadow:0 12px 30px rgba(214,98,88,.1)}
.d2-leak3-item.is-on b{color:#96605a}
.d2-leak3-item.is-on em{opacity:1;transform:scale(1)}
/* 继续了解：4 卡改 2×2，避免 3+1 断行 */
#more .dia-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
.d2-punch{margin:4px 0 0;color:#22344c}

/* ——— 客服 vs 销售 ——— */
.d2-vs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.d2-vs-panel{display:flex;flex-direction:column;gap:14px;padding:18px 18px 20px;border:1px solid #e2ebf6;border-radius:22px;background:#fff}
.d2-vs-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.d2-tag{font-size:12.5px;font-weight:700;color:#22344c;padding:6px 11px;border-radius:999px;background:#f1f5fa}
.d2-vs-head i{font-style:normal;font-size:11px;color:#8a9db3}
.d2-vs-panel.is-dia{border-color:#cfe2ff;box-shadow:0 18px 50px rgba(20,80,160,.1)}
.d2-vs-panel.is-dia .d2-tag{background:#e8f1ff;color:#1b4d90}
.d2-vs-panel.is-bot .d2-line.is-d .d2-bubble{background:#f4f5f7;color:#5b6472}

/* ——— 24h 时钟 ——— */
.d2-clock{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,700px);gap:42px;align-items:center;justify-content:center;margin-top:10px}
.d2-clock-dial{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(90,169,255,.22),transparent 62%),conic-gradient(from -30deg,rgba(9,184,238,.1),rgba(18,104,255,.05) 45%,rgba(7,21,37,.4));border:1px solid rgba(120,170,230,.28)}
.d2-clock-dial::before{content:"";position:absolute;inset:9%;border-radius:50%;border:1px dashed rgba(140,180,230,.3)}
.d2-clock-dial::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(150,190,240,.42) 0 .6deg,transparent .6deg 15deg);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);opacity:.5}
.d2-dial-hand{position:absolute;left:50%;top:50%;width:2px;height:38%;border-radius:2px;background:linear-gradient(180deg,#8fc3ff,#1268ff);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(200deg)}
html.motion .d2-clock.is-playing .d2-dial-hand{animation:d2Dial 24s linear infinite}
@keyframes d2Dial{to{transform:translate(-50%,-100%) rotate(560deg)}}
.d2-dial-time{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:24px;font-weight:700;letter-spacing:.06em;color:#dbeaff}
.d2-dial-glow{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,rgba(90,169,255,.35),transparent 70%)}
.d2-clock-scene{display:flex;flex-direction:column;gap:12px}
.dark-band .d2-who{color:#8fb0d8}
.dark-band .d2-bubble{background:rgba(255,255,255,.1);color:#e2ecf7}
.dark-band .d2-line.is-d .d2-bubble{background:rgba(90,169,255,.18);color:#e8f2ff}
.dark-band .d2-end.is-win{background:rgba(46,160,105,.2);color:#9fe3c2}
.dark-band .d2-line.is-typing .d2-bubble::after{background-image:radial-gradient(circle,#7fa3cc 2.6px,transparent 3.2px)}
.dark-band .d2-note{color:#8fb0d8}

/* ——— 早上交接卡（24h 节的「结果」）——— */
.d2-morning{display:flex;flex-direction:column;gap:5px;margin-top:4px;padding:13px 15px;border-radius:14px;border:1px solid rgba(140,215,180,.45);background:linear-gradient(135deg,rgba(46,160,105,.14),rgba(90,169,255,.10))}
.d2-morning-h{font-size:10.5px;letter-spacing:.14em;font-weight:700;color:#9fe3c2}
.d2-morning b{font-size:13.5px;color:#eaf3ff}
.d2-morning p{margin:0;font-size:12px;color:#b9cde3}
.d2-morning i{font-style:normal;font-size:12px;font-weight:700;color:#9fe3c2}

/* ——— 响应式 ——— */
@media(max-width:1100px){
  .dia-hero-grid{gap:38px}
}
@media(max-width:980px){
  .dia-hero-grid{grid-template-columns:1fr;gap:34px}
  .d2-hero{max-width:560px;justify-self:start}
  .d2-clock{grid-template-columns:1fr;gap:26px}
  .d2-clock-dial{max-width:230px;margin:0 auto}
}
@media(max-width:720px){
  #more .dia-cases{grid-template-columns:1fr}
  .d2-hero-stream{height:auto;min-height:0}
  .d2-vs{grid-template-columns:1fr}
  .d2-leak3-list{grid-template-columns:1fr}
  .d2-clock-dial{max-width:190px}
}