/* ==========================================================================
   virtual-meetings.css — "My Virtual Meetings" module view.
   Ported from Helix-Integration-prototype/my-virtual-meetings.html, scoped under
   #virtualMeetingsView with vm- class names. Brand/surface/ink/line map to the
   app's --cw-* tokens; semantic green/amber/red + WhatsApp colours stay local.
   Loaded BEFORE module-shell.css so the shell's responsive rules still win.
   ========================================================================== */
#virtualMeetingsView {
  --vm-surface: var(--cw-surface, #fff);
  --vm-ink: var(--cw-text, #1b1b1f);
  --vm-ink-2: var(--cw-text, #3c3c43);
  --vm-muted: var(--cw-text-muted, #6b6b76);
  --vm-faint: var(--cw-text-subtle, #9a9aa3);
  --vm-line: var(--cw-border, #e8e8ec);
  --vm-line-2: var(--cw-surface-muted, #f0f0f3);
  --vm-brand: var(--cw-accent, #4f46e5);
  --vm-brand-2: color-mix(in srgb, var(--cw-accent, #4f46e5) 78%, #ffffff);
  --vm-brand-weak: var(--cw-accent-tint, #eef0fe);
  --vm-brand-ink: var(--cw-accent-text, #3a32c4);
  --vm-green: #1da955; --vm-green-weak: #e7f6ee; --vm-green-ink: #147a3d;
  --vm-amber: #f0a823; --vm-amber-weak: #fdf3e0; --vm-amber-ink: #9a6b09;
  --vm-red: #e5484d;
  --vm-wa-weak: #e7f6ee;
  --vm-radius: 16px; --vm-radius-sm: 10px;
  --vm-shadow: 0 1px 2px rgba(20,20,30,.05), 0 6px 20px rgba(20,20,30,.05);
  --vm-shadow-hover: 0 2px 4px rgba(20,20,30,.06), 0 12px 30px rgba(20,20,30,.10);
}

/* header */
#virtualMeetingsView .vm-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
#virtualMeetingsView .vm-eyebrow { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--vm-faint); margin:0 0 6px; }
#virtualMeetingsView .vm-h1 { font-size:26px; font-weight:700; letter-spacing:-.01em; margin:0; line-height:1.15; color:var(--vm-ink); }
#virtualMeetingsView .vm-sub { margin:6px 0 0; color:var(--vm-muted); font-size:14px; max-width:48ch; }
#virtualMeetingsView .vm-btn-primary {
  appearance:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px; color:#fff; background:var(--vm-brand);
  border:1px solid var(--vm-brand); border-radius:var(--vm-radius-sm); padding:11px 16px;
  box-shadow:var(--vm-shadow); transition:filter .15s, transform .05s; white-space:nowrap;
}
#virtualMeetingsView .vm-btn-primary:hover { filter:brightness(1.06); }
#virtualMeetingsView .vm-btn-primary:active { transform:translateY(1px); }
#virtualMeetingsView .vm-btn-primary:focus-visible { outline:2px solid var(--vm-brand); outline-offset:2px; }

/* section label */
#virtualMeetingsView .vm-sec { margin:26px 0 12px; display:flex; align-items:center; gap:10px; }
#virtualMeetingsView .vm-sec h2 { font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--vm-muted); margin:0; }
#virtualMeetingsView .vm-rule { flex:1; height:1px; background:var(--vm-line); }
#virtualMeetingsView .vm-n { font-size:12px; font-weight:700; color:var(--vm-faint); font-variant-numeric:tabular-nums; }

/* up-next hero */
#virtualMeetingsView .vm-hero { background:linear-gradient(135deg,var(--vm-surface),#fbfbff); border:1px solid var(--vm-line); border-radius:20px; box-shadow:var(--vm-shadow); padding:22px; display:flex; gap:22px; align-items:center; flex-wrap:wrap; position:relative; overflow:hidden; }
#virtualMeetingsView .vm-hero::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(var(--vm-brand-2),var(--vm-brand)); }
#virtualMeetingsView .vm-hero.live::before { background:linear-gradient(var(--vm-green),#15924a); }
#virtualMeetingsView .vm-hero-when { min-width:128px; }
#virtualMeetingsView .vm-hero-time { font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--vm-ink); }
#virtualMeetingsView .vm-hero-time small { display:block; font-size:13px; font-weight:500; color:var(--vm-muted); margin-top:6px; letter-spacing:0; }
#virtualMeetingsView .vm-hero-mid { flex:1; min-width:200px; }
#virtualMeetingsView .vm-hero-cust { display:flex; align-items:center; gap:11px; margin-bottom:8px; }
#virtualMeetingsView .vm-hero-cust .vm-lead-name { font-size:18px; font-weight:700; margin:0; }
#virtualMeetingsView .vm-hero-agenda { font-size:13.5px; color:var(--vm-ink-2); line-height:1.4; margin:0; }
#virtualMeetingsView .vm-hero-meta { font-size:12.5px; color:var(--vm-muted); margin:8px 0 0; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
#virtualMeetingsView .vm-hero-actions { display:flex; flex-direction:column; gap:8px; min-width:172px; }

/* meeting grid + cards */
#virtualMeetingsView .vm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; }
#virtualMeetingsView .vm-card { background:var(--vm-surface); border:1px solid var(--vm-line); border-radius:var(--vm-radius); box-shadow:var(--vm-shadow); padding:16px 16px 14px; display:flex; flex-direction:column; gap:13px; transition:box-shadow .18s, transform .18s, border-color .18s; }
#virtualMeetingsView .vm-card:hover { box-shadow:var(--vm-shadow-hover); transform:translateY(-2px); border-color:#e0e0e6; }
#virtualMeetingsView .vm-row1 { display:flex; gap:12px; align-items:flex-start; }
#virtualMeetingsView .vm-timecol { flex:0 0 auto; text-align:center; min-width:60px; padding-top:1px; }
#virtualMeetingsView .vm-timecol .vm-t { font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1; color:var(--vm-ink); }
#virtualMeetingsView .vm-timecol .vm-ampm { font-size:11px; font-weight:600; color:var(--vm-muted); }
#virtualMeetingsView .vm-timecol .vm-day { font-size:11px; color:var(--vm-faint); margin-top:3px; }
#virtualMeetingsView .vm-vsep { width:1px; align-self:stretch; background:var(--vm-line-2); }
#virtualMeetingsView .vm-who { flex:1; min-width:0; }
#virtualMeetingsView .vm-name-row { display:flex; align-items:center; gap:8px; }
#virtualMeetingsView .vm-lead-name { font-size:15.5px; font-weight:700; letter-spacing:-.005em; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--vm-ink); }
#virtualMeetingsView .vm-rag { flex:0 0 auto; width:8px; height:8px; border-radius:50%; }
#virtualMeetingsView .vm-rag.Red { background:var(--vm-red); } #virtualMeetingsView .vm-rag.Amber { background:var(--vm-amber); } #virtualMeetingsView .vm-rag.Green { background:var(--vm-green); }
#virtualMeetingsView .vm-agenda { font-size:13px; color:var(--vm-ink-2); margin:3px 0 0; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#virtualMeetingsView .vm-mm { font-size:12px; color:var(--vm-muted); margin:6px 0 0; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
#virtualMeetingsView .vm-dot { width:3px; height:3px; border-radius:50%; background:var(--vm-faint); }
#virtualMeetingsView .vm-src { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--vm-ink-2); background:var(--vm-line-2); border-radius:999px; padding:3px 8px; }

/* badges */
#virtualMeetingsView .vm-badge { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; border-radius:999px; padding:4px 10px; letter-spacing:.01em; }
#virtualMeetingsView .vm-badge.live { background:var(--vm-green-weak); color:var(--vm-green-ink); }
#virtualMeetingsView .vm-badge.soon { background:var(--vm-amber-weak); color:var(--vm-amber-ink); }
#virtualMeetingsView .vm-badge.up { background:var(--vm-brand-weak); color:var(--vm-brand-ink); }
#virtualMeetingsView .vm-badge.ended { background:var(--vm-line-2); color:var(--vm-muted); }
#virtualMeetingsView .vm-pulse { width:7px; height:7px; border-radius:50%; background:var(--vm-green); animation:vm-pulse 1.6s infinite; }
@keyframes vm-pulse { 0%{box-shadow:0 0 0 0 rgba(29,169,85,.45)} 70%{box-shadow:0 0 0 6px rgba(29,169,85,0)} 100%{box-shadow:0 0 0 0 rgba(29,169,85,0)} }

/* actions */
#virtualMeetingsView .vm-actions { display:flex; gap:8px; margin-top:auto; padding-top:13px; border-top:1px solid var(--vm-line-2); }
#virtualMeetingsView .vm-btn { appearance:none; cursor:pointer; text-decoration:none; font-family:inherit; font-size:13px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--vm-radius-sm); padding:9px 12px; border:1px solid transparent; transition:filter .15s, background .15s, transform .05s; }
#virtualMeetingsView .vm-btn:active { transform:translateY(1px); }
#virtualMeetingsView .vm-btn:focus-visible { outline:2px solid var(--vm-brand); outline-offset:2px; }
#virtualMeetingsView .vm-btn.join { flex:1; background:var(--vm-brand); color:#fff; border-color:var(--vm-brand); }
#virtualMeetingsView .vm-btn.join.live { background:var(--vm-green); border-color:var(--vm-green); }
#virtualMeetingsView .vm-btn.join:hover { filter:brightness(1.06); }
#virtualMeetingsView .vm-btn.ghost { background:transparent; border-color:var(--vm-line); color:var(--vm-ink-2); }
#virtualMeetingsView .vm-btn.ghost:hover { background:var(--vm-line-2); border-color:#dcdce2; }
#virtualMeetingsView .vm-btn.vaia { background:var(--vm-brand-weak); color:var(--vm-brand-ink); border-color:transparent; flex:1; }
#virtualMeetingsView .vm-btn.vaia:hover { filter:brightness(.98); }
#virtualMeetingsView .vm-icon-btn { appearance:none; cursor:pointer; background:transparent; border:1px solid var(--vm-line); color:var(--vm-ink-2); border-radius:var(--vm-radius-sm); width:38px; min-height:38px; display:grid; place-items:center; transition:background .15s,border-color .15s; }
#virtualMeetingsView .vm-icon-btn:hover { background:var(--vm-line-2); border-color:#dcdce2; }
#virtualMeetingsView .vm-icon-btn.wa { color:var(--vm-green-ink); }
#virtualMeetingsView .vm-icon-btn:focus-visible { outline:2px solid var(--vm-brand); outline-offset:2px; }
#virtualMeetingsView .vm-icon-btn[aria-disabled="true"] { opacity:.4; pointer-events:none; }

#virtualMeetingsView .vm-avatar { flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; }
#virtualMeetingsView .vm-avatar.lg { width:46px; height:46px; font-size:16px; border-radius:13px; }

#virtualMeetingsView .vm-empty { grid-column:1/-1; text-align:center; padding:30px 20px; color:var(--vm-muted); background:var(--vm-surface); border:1px dashed var(--vm-line); border-radius:var(--vm-radius); }
#virtualMeetingsView .vm-empty p { margin:0; font-size:14px; }

/* ---- modal ---- */
#virtualMeetingsView .vm-scrim { position:fixed; inset:0; background:rgba(24,24,32,.42); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; padding:20px; z-index:90; }
#virtualMeetingsView .vm-scrim.open { display:flex; }
#virtualMeetingsView .vm-modal { background:var(--vm-surface); border-radius:18px; box-shadow:0 20px 60px rgba(20,20,30,.28); width:100%; max-width:440px; overflow:hidden; animation:vm-rise .18s ease; }
@keyframes vm-rise { from{transform:translateY(8px);opacity:.6} to{transform:none;opacity:1} }
#virtualMeetingsView .vm-modal-head { display:flex; align-items:center; gap:11px; padding:18px 20px; border-bottom:1px solid var(--vm-line-2); }
#virtualMeetingsView .vm-vico { width:34px; height:34px; border-radius:10px; background:var(--vm-brand-weak); display:grid; place-items:center; color:var(--vm-brand); }
#virtualMeetingsView .vm-modal-head h3 { margin:0; font-size:16px; font-weight:700; color:var(--vm-ink); }
#virtualMeetingsView .vm-modal-head p { margin:2px 0 0; font-size:12.5px; color:var(--vm-muted); }
#virtualMeetingsView .vm-modal-x { margin-left:auto; appearance:none; cursor:pointer; background:transparent; border:none; color:var(--vm-faint); font-size:22px; line-height:1; width:30px; height:30px; border-radius:8px; }
#virtualMeetingsView .vm-modal-x:hover { background:var(--vm-line-2); color:var(--vm-ink); }
#virtualMeetingsView .vm-modal-body { padding:18px 20px 22px; }
#virtualMeetingsView .vm-field-label { font-size:12px; font-weight:600; color:var(--vm-muted); margin:0 0 7px; letter-spacing:.02em; }
#virtualMeetingsView .vm-search { width:100%; box-sizing:border-box; font-family:inherit; font-size:14px; padding:11px 12px; border:1px solid var(--vm-line); border-radius:var(--vm-radius-sm); outline:none; transition:border-color .15s, box-shadow .15s; }
#virtualMeetingsView .vm-search:focus { border-color:var(--vm-brand); box-shadow:0 0 0 3px var(--vm-brand-weak); }
#virtualMeetingsView .vm-lead-list { margin-top:10px; max-height:230px; overflow:auto; display:flex; flex-direction:column; gap:4px; }
#virtualMeetingsView .vm-lead-opt { appearance:none; cursor:pointer; text-align:left; font-family:inherit; width:100%; display:flex; align-items:center; gap:11px; padding:9px 10px; border:1px solid transparent; border-radius:10px; background:transparent; }
#virtualMeetingsView .vm-lead-opt:hover { background:var(--vm-line-2); }
#virtualMeetingsView .vm-lead-opt:focus-visible { outline:2px solid var(--vm-brand); outline-offset:1px; }
#virtualMeetingsView .vm-lead-opt .vm-nm { font-size:14px; font-weight:600; color:var(--vm-ink); }
#virtualMeetingsView .vm-lead-opt .vm-ph { font-size:12px; color:var(--vm-muted); }

/* room view */
#virtualMeetingsView .vm-room-card { background:linear-gradient(135deg,var(--vm-brand-weak),#f6f4ff); border:1px solid #e4e1fb; border-radius:14px; padding:16px; text-align:center; margin-bottom:16px; }
#virtualMeetingsView .vm-room-card .vm-with { font-size:13px; color:var(--vm-muted); margin:0 0 4px; }
#virtualMeetingsView .vm-room-card .vm-nm { font-size:17px; font-weight:700; margin:0 0 12px; color:var(--vm-ink); }
#virtualMeetingsView .vm-room-link { display:flex; gap:8px; align-items:center; background:#fff; border:1px solid var(--vm-line); border-radius:10px; padding:6px 6px 6px 12px; }
#virtualMeetingsView .vm-room-link input { flex:1; min-width:0; border:none; outline:none; font-family:inherit; font-size:13px; color:var(--vm-ink-2); background:transparent; }
#virtualMeetingsView .vm-copy-btn { appearance:none; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; background:var(--vm-brand); color:#fff; border:none; border-radius:8px; padding:8px 12px; white-space:nowrap; }
#virtualMeetingsView .vm-copy-btn.done { background:var(--vm-green); }
#virtualMeetingsView .vm-share-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:14px 0 4px; }
#virtualMeetingsView .vm-share-btn { appearance:none; cursor:pointer; text-decoration:none; font-family:inherit; font-size:13.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; padding:11px; border:1px solid transparent; }
#virtualMeetingsView .vm-share-btn.wa { background:var(--vm-wa-weak); color:var(--vm-green-ink); }
#virtualMeetingsView .vm-share-btn.mail { background:var(--vm-line-2); color:var(--vm-ink-2); }
#virtualMeetingsView .vm-share-btn[aria-disabled="true"] { opacity:.45; pointer-events:none; }
#virtualMeetingsView .vm-join-now { width:100%; box-sizing:border-box; margin-top:12px; appearance:none; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:9px; color:#fff; background:var(--vm-green); border:none; border-radius:12px; padding:13px; }
#virtualMeetingsView .vm-join-now:hover { filter:brightness(1.05); }
#virtualMeetingsView .vm-back-link { margin-top:14px; text-align:center; }
#virtualMeetingsView .vm-back-link button { appearance:none; cursor:pointer; background:none; border:none; color:var(--vm-muted); font-family:inherit; font-size:13px; }
#virtualMeetingsView .vm-back-link button:hover { color:var(--vm-ink); text-decoration:underline; }

@media (max-width:560px) {
  #virtualMeetingsView .vm-h1 { font-size:22px; }
  #virtualMeetingsView .vm-grid { grid-template-columns:1fr; }
  #virtualMeetingsView .vm-hero { padding:18px; }
  #virtualMeetingsView .vm-hero-actions { min-width:0; width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  #virtualMeetingsView .vm-pulse { animation:none; }
  #virtualMeetingsView .vm-modal { animation:none; }
}

/* ===== Set up a VC (schedule-first rework) ================================= */
#virtualMeetingsView .vm-sec-sub { margin:-6px 0 12px; font-size:13px; color:var(--vm-muted); }
#virtualMeetingsView .vm-btn.sched { background:var(--vm-brand); color:#fff; }
#virtualMeetingsView .vm-btn.sched:hover { filter:brightness(1.06); }
#virtualMeetingsView .vm-btn.ghost[disabled] { opacity:.55; cursor:not-allowed; }
#virtualMeetingsView .vm-instant-link { appearance:none; border:none; background:transparent; cursor:pointer; font-family:inherit; font-size:12px; color:var(--vm-muted); text-decoration:underline; text-underline-offset:3px; padding:6px 2px 0; align-self:flex-start; }
#virtualMeetingsView .vm-instant-link:hover { color:var(--vm-brand); }

/* schedule dialog */
#virtualMeetingsView .vm-form { display:flex; flex-direction:column; gap:12px; }
#virtualMeetingsView .vm-form-row { display:flex; gap:10px; }
#virtualMeetingsView .vm-form-row label, #virtualMeetingsView .vm-form-note { flex:1; display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--vm-muted); }
#virtualMeetingsView .vm-form input, #virtualMeetingsView .vm-form select, #virtualMeetingsView .vm-form textarea { border:1px solid var(--vm-line); border-radius:var(--vm-radius-sm); padding:9px 10px; font-size:13.5px; font-family:inherit; color:var(--vm-ink); background:var(--vm-surface); }
#virtualMeetingsView .vm-form input:focus, #virtualMeetingsView .vm-form select:focus, #virtualMeetingsView .vm-form textarea:focus { outline:none; border-color:var(--vm-brand); }
#virtualMeetingsView .vm-form-err { margin:0; font-size:12.5px; color:#e5484d; }
#virtualMeetingsView .vm-form-hint { margin:8px 0 0; font-size:12px; color:var(--vm-muted); }
#virtualMeetingsView .vm-booked-when { margin:6px 0 0; font-size:13px; font-weight:600; color:var(--vm-ink); }

@media (max-width:640px) {
  #virtualMeetingsView .vm-form-row { flex-direction:column; }
}