/* ── Calendar — event detail ──
   Slide-in panel (right side of the calendar view), the hover popup that
   surfaces from a month-grid event chip, and the TZ + recurrence pills
   shown inside the panel. */

  /* ── Event detail slide-in panel ── */
  .cal-event-panel {
    position: absolute; top: 52px; right: 0; bottom: 0; width: 360px;
    background: var(--deep);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform var(--transition);
    display: flex; flex-direction: column;
    z-index: 10;
  }
  .cal-event-panel.visible { transform: translateX(0); }
  /* When the slide-in panel is open, push the calendar scroller in by the
     panel's width so the grid isn't covered. The panel still uses absolute
     positioning (so it can animate from off-screen), but the scroller's
     right padding makes the visible content area shrink. */
  .chat-area.with-event-panel #messagesScroller {
    padding-right: 360px;
    transition: padding-right var(--transition);
  }
  .chat-area #messagesScroller { transition: padding-right var(--transition); }
  .cal-event-panel-head {
    display: flex; justify-content: flex-end;
    padding: 8px; border-bottom: 1px solid var(--border);
  }
  .cal-event-close {
    background: none; border: none; color: var(--ink-muted);
    width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: var(--font-lg);
  }
  .cal-event-close:hover { background: var(--surface); color: var(--ink); }
  .cal-event-panel-body {
    flex: 1; overflow-y: auto; padding: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-md);
  }
  .cal-event-title { font-size: var(--font-xl); font-weight: 700; color: var(--ink); margin: 0; }
  .cal-event-title-input {
    font-size: var(--font-xl); font-weight: 700; color: var(--ink);
    background: transparent; border: 1px solid transparent;
    padding: 4px 8px; margin: -4px -8px 0; border-radius: var(--radius-s);
    font-family: inherit; outline: none; width: 100%; box-sizing: border-box;
  }
  .cal-event-title-input:hover:not([readonly]) { border-color: var(--border); }
  .cal-event-title-input:focus { border-color: var(--accent); background: var(--surface); }
  .cal-event-meta { font-size: var(--font-sm); color: var(--ink-muted); }
  .cal-event-time-row {
    display: flex; align-items: center; gap: var(--space-sm);
    font-size: var(--font-sm); color: var(--ink-secondary);
    padding: 6px 8px; margin: 0 -8px;
    border-radius: var(--radius-s);
    cursor: pointer;
  }
  .cal-event-time-row:hover { background: var(--surface); }
  .cal-event-time-range { font-weight: 600; color: var(--ink); }
  .cal-event-time-duration { color: var(--ink-muted); }
  .cal-event-time-date { margin-left: auto; color: var(--ink-muted); font-size: var(--font-xs); }
  .cal-event-time-editor {
    display: none; gap: 6px; align-items: center; flex-wrap: wrap;
    padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-s);
  }
  .cal-event-time-editor input {
    background: var(--deep); border: 1px solid var(--border-mid); color: var(--ink);
    padding: 6px 8px; border-radius: var(--radius-s); font-family: inherit; font-size: var(--font-sm);
  }
  .cal-event-status-ribbon {
    padding: 6px 10px; border-radius: var(--radius-s);
    font-size: var(--font-xs); font-weight: 600;
    margin-bottom: 4px;
  }
  .cal-event-status-ribbon.status-cancelled {
    background: rgba(245,75,72,0.12); color: var(--coral);
  }
  .cal-event-status-ribbon.status-tentative {
    background: rgba(255,142,12,0.12); color: var(--amber);
  }
  .cal-event-join-kbd {
    font-size: var(--font-2xs); font-weight: 500; opacity: 0.7;
    margin-left: 8px;
    background: var(--color-white-16);
    padding: 1px 6px; border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .cal-event-attendee-info { flex: 1; min-width: 0; }
  .cal-event-attendee-role {
    font-size: var(--font-2xs); color: var(--ink-muted); margin-top: 1px;
  }
  .cal-event-row-actions {
    display: flex; gap: 2px; opacity: 0;
    transition: opacity var(--transition);
  }
  .cal-event-attendee:hover .cal-event-row-actions { opacity: 1; }
  .cal-event-row-btn {
    width: 24px; height: 24px; border-radius: 4px;
    background: transparent; border: none; color: var(--ink-muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: var(--font-sm);
  }
  .cal-event-row-btn:hover { background: var(--surface); color: var(--ink); }
  .cal-event-row-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .cal-event-add-row { margin-top: 6px; }
  .cal-event-add-input {
    width: 100%; padding: 8px 10px; background: var(--deep);
    border: 1px dashed var(--border-mid); border-radius: var(--radius-s);
    color: var(--ink); font-family: inherit; font-size: var(--font-sm);
    outline: none; box-sizing: border-box;
  }
  .cal-event-add-input:focus { border-color: var(--accent); border-style: solid; }
  .cal-event-join {
    background: var(--accent); color: var(--on-accent); border: none;
    padding: 10px 14px; border-radius: var(--radius-s);
    font-weight: 600; cursor: pointer; font-size: var(--font-md);
  }
  .cal-event-join:hover { background: var(--accent-hover); }
  .cal-event-rsvp-group { display: flex; gap: 6px; }
  .cal-rsvp-btn {
    flex: 1; padding: 8px 10px; border-radius: 6px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--ink-secondary); font-size: var(--font-xs); cursor: pointer;
    font-family: inherit;
  }
  .cal-rsvp-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .cal-rsvp-btn:hover { color: var(--ink); }
  .cal-event-desc {
    font-size: var(--font-sm); color: var(--ink-secondary);
    white-space: pre-wrap; line-height: 1.5;
    background: var(--surface);
    padding: 10px 12px; border-radius: 6px;
    overflow-wrap: anywhere;
  }
  .cal-event-desc a {
    color: var(--accent); text-decoration: underline;
  }
  .cal-event-desc a:hover { color: var(--accent-hover); }
  .cal-event-section-title {
    font-size: var(--font-2xs); font-weight: 600; color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
  }
  .cal-event-attendee {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 6px 0;
  }
  /* Creator block shown near the bottom of the event panel — surfaces
     whose calendar the event belongs to (Notion-style). */
  .cal-event-creator {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border);
    margin-top: var(--space-sm);
  }
  .cal-event-creator-avatar { width: var(--avatar-xs); height: var(--avatar-xs); }
  .cal-event-creator-info { flex: 1; min-width: 0; }
  .cal-event-creator-name {
    font-size: var(--font-sm); color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cal-event-creator-role {
    font-size: var(--font-2xs); color: var(--ink-muted); margin-top: 1px;
  }
  .cal-event-avatar {
    width: var(--avatar-sm); height: var(--avatar-sm); border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    color: var(--on-accent); font-size: var(--font-2xs); font-weight: 600;
  }
  .cal-event-attendee-name { flex: 1; font-size: var(--font-sm); color: var(--ink); }
  .cal-event-rsvp-badge {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-2xs);
  }
  .cal-event-rsvp-badge.rsvp-accepted { background: rgba(22,163,74,0.2); color: var(--event-type-audio); }
  .cal-event-rsvp-badge.rsvp-declined { background: rgba(245,75,72,0.2); color: var(--coral); }
  .cal-event-rsvp-badge.rsvp-maybe    { background: rgba(255,142,12,0.2); color: var(--amber); }
  .cal-event-rsvp-badge.rsvp-pending  { background: var(--surface); color: var(--ink-muted); }
  .cal-event-delete {
    margin-top: auto;
    background: transparent;
    border: 1px solid rgba(245,75,72,0.3);
    color: var(--coral);
    padding: var(--space-sm) var(--space-md); border-radius: 6px; cursor: pointer;
    font-family: inherit; font-size: var(--font-sm);
  }
  .cal-event-delete:hover { background: var(--color-red-8); }

  /* ── Hover popup over a month-grid event chip ── */
  .event-detail-popup {
    position: fixed; z-index: 999; background: var(--raised); border: 1px solid var(--border-mid);
    border-radius: var(--radius-l); padding: var(--space-xl); width: 340px;
    box-shadow: var(--shadow-l); display: none;
    backdrop-filter: blur(var(--blur));
  }
  .event-detail-popup h4 { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-xs); }
  .event-detail-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); font-size: var(--font-sm); color: var(--ink-secondary); }
  .event-detail-row svg { color: var(--ink-muted); flex-shrink: 0; }
  .event-participants { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-sm); }
  .event-participant {
    display: flex; align-items: center; gap: var(--space-xs); padding: 4px 10px;
    background: var(--surface); border-radius: var(--radius-full); font-size: var(--font-xs); color: var(--ink-secondary);
  }
  .event-detail-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
  .event-detail-actions button {
    flex: 1; padding: 10px; border-radius: var(--radius-s); font-family: inherit;
    font-size: var(--font-sm); font-weight: 600; cursor: pointer; border: none;
    transition: background var(--transition);
  }
  .event-join-btn { background: var(--accent); color: white; }
  .event-join-btn:hover { background: var(--accent-hover); }
  .event-delete-btn { background: var(--surface); color: var(--coral); }
  .event-delete-btn:hover { background: var(--elevated); }

  /* ── TZ badge in event panel (P1-8) ─────────────────────────── */
  .cal-event-tz-badge {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    margin: var(--space-xs) 0 var(--space-sm);
    padding: 3px 8px;
    font-size: var(--font-2xs); font-weight: 600; color: var(--ink-muted);
    background: var(--elevated);
    border: 1px solid var(--border); border-radius: 10px;
    font-variant-numeric: tabular-nums;
  }

  /* ── Recurrence badge (P1-11) ────────────────────────────────── */
  .cal-event-recurrence-badge {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    margin: var(--space-xs) 0 var(--space-sm);
    padding: 3px 8px;
    font-size: var(--font-2xs); font-weight: 600; color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent); border-radius: 10px;
  }