/* =========================================================
   通通訂 — 角色式 LINE 通知 · 手機跳通知（A/B/C 共用）
   一支手機，依「事件 × 角色」逐則跳出 LINE 通知；
   總部含金額、現場／分店不含。比抽象卡片更貼近店裡的真實情境。
   沿用 Design System token；尊重 prefers-reduced-motion。
   ========================================================= */

.phone-notify{ --pw:248px; --pr:38px; display:flex; justify-content:center; }

/* ---- 手機外框 ---- */
.phone{
  position:relative; width:var(--pw); flex:0 0 auto; aspect-ratio:191 / 400;
  background:#0a0a0c; border-radius:var(--pr); padding:8px;
  box-shadow:0 0 0 1px oklch(1 0 0 / .08), 0 1px 0 1px oklch(1 0 0 / .05) inset,
             0 44px 80px -34px rgba(0,0,0,.85), 0 18px 40px -28px rgba(0,0,0,.6);
}
/* 側鍵 */
.phone::after{ content:''; position:absolute; left:-2px; top:96px; width:2px; height:54px;
  background:#26262b; border-radius:2px 0 0 2px; }

.phone-screen{
  position:relative; height:100%; border-radius:calc(var(--pr) - 8px); overflow:hidden;
  background:
    radial-gradient(115% 52% at 50% -6%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(80% 40% at 88% 6%, oklch(0.62 0.05 250 / .28), transparent 70%),
    linear-gradient(180deg, #15120f 0%, #100f12 42%, #0b0b0e 100%);
  display:flex; flex-direction:column;
  padding:10px 9px 13px;
  font-family:var(--font-sans);
}

/* 瀏海 / 動態島 */
.ps-island{ position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:33%; height:15px; background:#000; border-radius:999px; z-index:5; }

/* 狀態列 */
.ps-status{ display:flex; align-items:center; justify-content:space-between;
  padding:1px 8px 0; color:#fff; }
.ps-status .ps-time{ font-size:11px; font-weight:600; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.ps-status .ps-sys{ display:flex; align-items:center; gap:5px; }
.ps-status .ps-sys svg{ height:11px; width:auto; fill:#fff; }
.ps-status .ps-sys svg.str{ fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* 鎖定畫面時鐘 */
.ps-lock{ text-align:center; color:#fff; margin:16px 0 14px; }
.ps-lock .ps-date{ font-size:12px; font-weight:500; opacity:.86; letter-spacing:.02em; }
.ps-lock .ps-clock{ font-size:52px; font-weight:600; line-height:1; letter-spacing:-.02em; margin-top:2px;
  font-variant-numeric:tabular-nums; text-shadow:0 1px 18px rgba(0,0,0,.3); }

/* 通知堆疊 */
.ps-stack{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }

/* ---- 單則 LINE 通知 ---- */
.ln-card{ display:flex; gap:9px; align-items:flex-start; text-align:left;
  background:oklch(0.98 0.004 280 / .9); border:1px solid oklch(1 0 0 / .55);
  border-radius:16px; padding:9px 11px;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  will-change:transform, opacity; }
/* 較舊的通知略微退到背後 */
.ps-stack .ln-card:nth-child(2){ opacity:.82; transform:scale(.975); }
.ps-stack .ln-card:nth-child(3){ opacity:.6; transform:scale(.95); }

.ln-icon{ width:30px; height:30px; border-radius:8px; overflow:hidden; flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.25); }
.ln-icon img{ width:100%; height:100%; display:block; }

.ln-main{ flex:1; min-width:0; }
.ln-row1{ display:flex; align-items:center; gap:6px; }
.ln-row1 .ln-app{ font-size:12px; font-weight:700; color:#1a1a1f; letter-spacing:.01em; }
.ln-row1 .ln-time{ margin-left:auto; font-size:10px; color:#8a8a90; flex-shrink:0; }

.ln-row2{ display:flex; align-items:center; gap:6px; margin:3px 0 2px; }
.ln-to{ font-size:10.5px; font-weight:700; color:var(--accent);
  display:inline-flex; align-items:center; gap:3px; }
.ln-to::before{ content:'→'; font-weight:700; opacity:.8; }
.ln-vis{ font-size:9px; font-weight:600; padding:1.5px 7px; border-radius:999px; white-space:nowrap; }
.ln-vis.amt{ color:#0a6b3b; background:oklch(0.86 0.10 150 / .55); }
.ln-vis.off{ color:#6b6b72; background:oklch(0.7 0.01 280 / .4); }

.ln-msg{ font-size:11.5px; line-height:1.5; color:#34343a; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ln-msg b{ color:#1a1a1f; font-weight:700; }
.ln-msg b.amt{ color:var(--accent); }

/* ---- 進場 / 離場 ---- */
.ln-card{ opacity:0; transform:translateY(-12px) scale(.97);
  transition:opacity .34s ease, transform .34s ease; }
.ln-card.in{ opacity:1; transform:none; }
.ps-stack .ln-card.in:nth-child(2){ opacity:.82; transform:scale(.975); }
.ps-stack .ln-card.in:nth-child(3){ opacity:.6; transform:scale(.95); }
.ln-card.out{ opacity:0 !important; transform:translateY(-8px) scale(.96) !important; }

/* ---- 說明文字（手機外） ---- */
.phone-cap{ font-size:13px; color:var(--text-2); line-height:1.65; margin:0; }
.phone-cap b{ color:var(--accent-text); font-weight:600; }

/* =========================================================
   緊湊變體（home-a：懸浮在儀表板右下角）
   ========================================================= */
.phone-notify.compact{ --pw:132px; --pr:26px; }
.phone-notify.compact .phone-screen{ padding:7px 6px 10px; }
.phone-notify.compact .ps-island{ height:11px; top:7px; }
.phone-notify.compact .ps-status .ps-time{ font-size:9px; }
.phone-notify.compact .ps-status .ps-sys svg{ height:9px; }
.phone-notify.compact .ps-lock{ margin:8px 0 9px; }
.phone-notify.compact .ps-lock .ps-date{ font-size:8.5px; }
.phone-notify.compact .ps-lock .ps-clock{ font-size:28px; }
.phone-notify.compact .ps-stack{ gap:6px; }
.phone-notify.compact .ln-card{ gap:6px; padding:6px 8px; border-radius:11px; }
.phone-notify.compact .ln-icon{ width:22px; height:22px; border-radius:6px; }
.phone-notify.compact .ln-row1 .ln-app{ font-size:10px; }
.phone-notify.compact .ln-row1 .ln-time{ font-size:8px; }
.phone-notify.compact .ln-to{ font-size:9px; }
.phone-notify.compact .ln-vis{ font-size:7.5px; padding:1px 5px; }
.phone-notify.compact .ln-msg{ font-size:9.5px; -webkit-line-clamp:2; }

/* home-a：懸浮在儀表板右下角，盡量不擋住 KPI 與折線圖 */
.hero .hero-visual .phone-notify.compact{ position:absolute; right:-18px; bottom:-40px; z-index:3; display:block; }
@media (max-width:880px){
  .hero .hero-visual .phone-notify.compact{ position:static; right:auto; bottom:auto; margin:26px auto 0; }
  .phone-notify.compact{ --pw:206px; }
  .phone-notify.compact .ps-lock .ps-clock{ font-size:42px; }
  .phone-notify.compact .ln-msg{ -webkit-line-clamp:3; }
}

/* =========================================================
   home-c：手機 + 事件→對象 對照清單
   ========================================================= */
.nphone{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:46px; align-items:center; }
.nphone .nphone-stage{ display:flex; justify-content:center; }
.nfeed{ display:flex; flex-direction:column; gap:0; }
.nfeed .nf-row{ display:grid; grid-template-columns:118px 1fr auto; align-items:center; gap:14px;
  padding:15px 4px; border-bottom:1px solid var(--border-1); transition:background .25s ease, border-color .25s ease; }
.nfeed .nf-row:last-child{ border-bottom:0; }
.nfeed .nf-evt{ font-size:13.5px; font-weight:600; color:var(--text-2); }
.nfeed .nf-arrow{ display:flex; align-items:center; gap:9px; }
.nfeed .nf-arrow svg{ width:16px; height:16px; stroke:var(--text-4); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.nfeed .nf-role{ font-size:14px; font-weight:600; color:var(--text-1); }
.nfeed .nf-vis{ font-size:10px; font-weight:600; padding:2.5px 9px; border-radius:999px; white-space:nowrap; }
.nfeed .nf-vis.amt{ color:var(--status-success); background:var(--status-success-bg); border:1px solid var(--status-success-border); }
.nfeed .nf-vis.off{ color:var(--text-3); background:var(--bg-2); border:1px solid var(--border-1); }
.nfeed .nf-row.hot{ background:var(--accent-soft); border-color:var(--accent-border); border-radius:8px; }
.nfeed .nf-row.hot .nf-evt{ color:var(--accent-text); }
.nfeed .nf-row.hot .nf-arrow svg{ stroke:var(--accent); }

@media (max-width:860px){
  .nphone{ grid-template-columns:1fr; gap:30px; }
  .nfeed{ max-width:520px; margin:0 auto; }
}
@media (max-width:520px){
  .nfeed .nf-row{ grid-template-columns:1fr auto; gap:6px 12px; }
  .nfeed .nf-evt{ grid-column:1 / -1; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .ln-card{ transition:none; }
}