/* ============================================================
   My Car Mentors — Portal interactivity (modals, toasts, forms)
   ============================================================ */

/* Toasts */
.toast-wrap{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--brand-1);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);
  font-size:.9rem;animation:toastIn .3s var(--ease);will-change:transform}
.toast.ok{border-left-color:var(--success)}
.toast.warn{border-left-color:var(--warn)}
.toast.err{border-left-color:var(--danger)}
.toast b{font-family:var(--display);display:block;margin-bottom:1px;color:var(--ink)}
.toast span{color:var(--slate)}
.toast .ti{font-size:1.1rem;line-height:1}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .3s var(--ease) forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* Modal */
.modal-back{position:fixed;inset:0;z-index:9000;background:rgba(8,17,29,.55);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.modal-back.open{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:var(--radius-lg);width:100%;max-width:480px;max-height:90vh;overflow:auto;
  box-shadow:var(--shadow-lg);transform:translateY(20px) scale(.98);transition:transform .25s var(--ease)}
.modal-back.open .modal{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:1.15rem}
.modal-head .x{background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted)}
.modal-head .x:hover{color:var(--ink)}
.modal-body{padding:22px}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}

/* Confirm */
.confirm-msg{color:var(--slate);font-size:.95rem}

/* Empty state */
.empty-row{text-align:center;color:var(--muted);padding:30px 0}

/* Editable cell pulse when saved */
@keyframes saved{0%{background:rgba(39,192,147,.18)}100%{background:transparent}}
.saved-flash{animation:saved 1s ease}

/* Demo data reset chip in sidebar */
.demo-tools{margin-top:14px;padding:0 8px}
.demo-tools button{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#aac1d6;border-radius:10px;padding:9px;font-family:var(--display);font-weight:600;font-size:.82rem;cursor:pointer}
.demo-tools button:hover{background:rgba(255,255,255,.12);color:#fff}

/* Small inline add-row button */
.add-inline{display:inline-flex;align-items:center;gap:6px;background:var(--brand-grad-soft);color:var(--brand-1);
  border:none;border-radius:8px;padding:8px 14px;font-family:var(--display);font-weight:700;font-size:.85rem;cursor:pointer}
.add-inline:hover{filter:brightness(.97)}

/* clickable phase hint */
.phase[data-build-phase]{cursor:pointer;transition:.15s}
.phase[data-build-phase]:hover{border-color:var(--brand-2);box-shadow:0 0 0 2px rgba(70,189,234,.12)}

/* live badge */
.live-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:#159e76;
  background:rgba(39,192,147,.12);padding:3px 9px;border-radius:999px}
.live-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#27c093;animation:pulse2 1.6s infinite}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.3}}

/* call window (demo video) */
.callwin{position:fixed;inset:0;z-index:9500;background:radial-gradient(800px 500px at 70% 20%,rgba(70,189,234,.18),transparent),#0a1626;
  display:none;flex-direction:column;color:#fff}
.callwin.open{display:flex}
.callwin .stage{flex:1;display:grid;place-items:center;position:relative}
.callwin .peer{width:min(80%,520px);aspect-ratio:16/10;border-radius:18px;background:linear-gradient(135deg,#16324d,#0d2236);
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.12)}
.callwin .selfcam{position:absolute;right:24px;bottom:24px;width:150px;aspect-ratio:4/3;border-radius:12px;
  background:#0e2438;border:2px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#7AD7F2;font-size:.8rem}
.callwin .bar{display:flex;gap:14px;justify-content:center;padding:22px}
.callwin .cbtn{width:54px;height:54px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;
  font-size:1.2rem;cursor:pointer;display:grid;place-items:center}
.callwin .cbtn:hover{background:rgba(255,255,255,.22)}
.callwin .cbtn.end{background:#ef5a6f}
.callwin .meta{position:absolute;top:20px;left:24px;font-size:.9rem;color:#bcd2e4}
.callwin .timer{font-variant-numeric:tabular-nums}