/* Your calendar, in the Desk's panel: days, then each item with its time and a colour bar by kind. */
.cal-agenda { display: grid; gap: 14px; margin-top: 10px; }
.cal-day { display: grid; gap: 6px; }
.cal-day-label { margin: 0; font: 700 11px/1.2 ui-monospace, "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--dk-muted, #8ea2bf); }
.cal-day.is-today .cal-day-label { color: #4be3ff; }
.cal-item { appearance: none; position: relative; display: grid; grid-template-columns: 4px 64px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--dk-line, rgba(140, 200, 255, .16)); background: linear-gradient(160deg, rgba(20, 32, 58, .92), rgba(10, 16, 32, .92)); color: #eef4ff; cursor: pointer; font: inherit; }
.cal-bar { align-self: stretch; border-radius: 3px; background: #4be3ff; }
.cal-item.is-event .cal-bar { background: #34d399; } .cal-item.is-event.is-hosting .cal-bar { background: #ffd76a; } .cal-item.is-event.is-waitlist .cal-bar { background: #a78bfa; }
.cal-item.is-task .cal-bar { background: #fbbf24; } .cal-item.is-feed .cal-bar { background: #8b9dff; }
.cal-when { display: grid; gap: 2px; font: 700 13px/1.2 Inter, system-ui, sans-serif; color: #fff; }
.cal-when small { font-weight: 500; color: var(--dk-muted, #8ea2bf); }
.cal-main { display: grid; gap: 3px; min-width: 0; }
.cal-main b { font: 600 15px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.cal-main small { color: var(--dk-muted, #8ea2bf); font-size: 12.5px; overflow-wrap: anywhere; }
.desk-note-line { margin: 8px 0 0; color: var(--dk-muted, #8ea2bf); font-size: 13px; }

/* the dots on the calendar and messages tools: something new */
.welcome-tool { position: relative; }
.welcome-tool-dot { position: absolute; top: 5px; right: 5px; min-width: 9px; height: 9px; border-radius: 5px; background: #e5484d; box-shadow: 0 0 0 2px #0a1020, 0 0 10px rgba(229, 72, 77, .6); font: 700 9px/9px Inter, system-ui, sans-serif; color: #fff; text-align: center; padding: 0 2px; }
.welcome-tool-dot.has-count { height: 15px; min-width: 15px; line-height: 15px; top: 2px; right: 2px; border-radius: 8px; }
.welcome-tool-dot.is-soon { background: #ffd76a; box-shadow: 0 0 0 2px #0a1020, 0 0 12px rgba(255, 215, 106, .7); animation: cal-soon 1.4s ease-in-out infinite; }
@keyframes cal-soon { 50% { transform: scale(1.35); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .welcome-tool-dot.is-soon { animation: none; } }

/* the inbox in the panel */
.msp-list { display: grid; gap: 6px; margin-top: 10px; }
.msp-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--dk-line, rgba(140, 200, 255, .16)); background: linear-gradient(160deg, rgba(20, 32, 58, .92), rgba(10, 16, 32, .92)); color: #eef4ff; text-decoration: none; }
.msp-row.is-unread { border-color: rgba(75, 227, 255, .45); }
.msp-face { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #1d2a48; color: #cfe3ff; font: 700 15px/1 Inter, system-ui, sans-serif; }
.msp-face img { width: 100%; height: 100%; object-fit: cover; }
.msp-text { display: grid; gap: 2px; min-width: 0; }
.msp-text b { font: 600 15px/1.25 Inter, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msp-text small { color: var(--dk-muted, #8ea2bf); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msp-row.is-unread .msp-text small { color: #dbe9ff; }
.msp-side { display: grid; justify-items: end; gap: 4px; font-size: 11.5px; color: var(--dk-muted, #8ea2bf); }
.msp-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 7px; background: #4be3ff; color: #04121c; font: 700 11.5px/20px Inter, system-ui, sans-serif; text-align: center; }