/* Communications (cm-members.js, cm-ai.js, cm-stats.js, cm-reminders.js): one browser window, the club office's, a
   desktop window at every width (no phone layout); its pages cross-fade (reference.md §6d). Over it, the real messages
   the system wrote (Reminders), in the look of the other demos' message cards. */
.cm-win { left: 26px; top: 20px; width: 848px; height: 500px; }
.cm-win .dv-url-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cm-who { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 5px;
  font: 600 8.5px/1 Geist, Arial, sans-serif; color: #4a463d; white-space: nowrap; }
.cm-who i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 6.5px; letter-spacing: .02em; color: #fff; background: #204098; }

.cm-page { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.cm-zoom { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.cm-if { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.cm-later { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.cm-later.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.cm-loading .cm-page { visibility: hidden; }   /* an empty window while a page loads: never a page loading on camera */

/* A message the system wrote, arriving: a text, then an email, over the window's top right. */
.cm-card { position: absolute; z-index: 20; right: 18px; width: 300px; padding: 11px 14px 12px; border-radius: 14px; pointer-events: none;
  background: rgba(252, 252, 250, .98); box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 24px 44px -18px rgba(40, 30, 8, .5);
  font: 400 11px/1.45 Geist, Arial, sans-serif; color: #1b1a17;
  opacity: 0; transform: translateY(-14px) scale(.98); transition: opacity .35s ease, transform .55s cubic-bezier(.2, .85, .2, 1); }
.cm-card.is-on { opacity: 1; transform: none; }
.cm-card-top { display: flex; align-items: center; gap: 7px; font-size: 9.5px; color: #77736a; margin-bottom: 6px; }
.cm-card-top b { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.cm-card-to { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-card-app { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(#4a93ff, #1f6fe5); flex: none; }
.cm-card-sms .cm-card-app { background: linear-gradient(#5fd068, #2fb344); }
.cm-card-app svg { width: 12px; height: 12px; }
.cm-card-from { display: block; font-size: 11.5px; font-weight: 600; }
.cm-card-sub { display: block; font-size: 11px; }
.cm-card-sub:empty, .cm-card-from:empty { display: none; }
.cm-card-text { margin: 2px 0 0; font-size: 10.5px; line-height: 1.42; color: #5d5a52; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cm-card-sms .cm-card-text { color: #1b1a17; font-size: 11px; }

@media (prefers-reduced-motion: reduce) { .cm-later, .cm-later.is-on, .cm-card, .cm-card.is-on { transition: none; } }