/* ── Calendar — forms ──
   Create-event modal, recurrence/all-day toggles, Notion-style
   participant picker, and the keyboard quick-create popover. */

  /* ── Create-event modal ── */
  .create-event-modal {
    position: fixed; z-index: 1100; inset: 0;
    background: rgba(0,0,0,0.7); display: none;
    align-items: center; justify-content: center;
    /* Inset gutter so the box never touches the viewport edge — click
       on this strip lands on the overlay (`event.target === this`) and
       triggers the inline `if(event.target===this) closeX()` handler.
       Top inset accounts for the Wails desktop titlebar; browsers see
       `--kc-titlebar-h: 0`, the desktop shell sets it to 32px so the
       modal never overlaps the «Чаты» chrome (same pattern as
       #settingsModal). */
    padding: calc(24px + var(--kc-titlebar-h, 0px)) 24px 24px;
    box-sizing: border-box;
  }
  .create-event-modal.open { display: flex; }
  .create-event-box {
    background: var(--raised); border-radius: var(--radius-xl); padding: var(--space-xl) 32px;
    width: 420px; max-height: 100%; overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-l);
    backdrop-filter: blur(var(--blur));
  }
  /* When the box opts into the header / body / footer layout by
     wrapping its scrolling middle in `.create-event-body`, switch to
     flex-column and hand the scroll to the body. The box itself stays
     `overflow: hidden` so the scrollbar can never visually escape the
     border-radius. Modals without `.create-event-body` keep their
     single-block scroll on the box (legacy, short content). */
  .create-event-box:has(.create-event-body) {
    display: flex; flex-direction: column; gap: var(--space-lg);
    overflow: hidden;
  }
  .create-event-box:has(.create-event-body) > h3 { margin-bottom: 0; }
  .create-event-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Pull the scroll gutter into the box's existing right padding —
       text still aligns with the heading, scrollbar sits well inside
       the rounded corner. */
    margin-right: -16px;
    padding-right: 16px;
  }
  .create-event-actions { flex: 0 0 auto; }
  .create-event-box h3 { font-size: 18px; font-weight: 700; margin-bottom: var(--space-lg); }
  .ce-field { margin-bottom: var(--space-md); }
  .ce-label { font-size: var(--font-xs); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-xs); }
  .ce-input {
    width: 100%; padding: 10px var(--space-md); background: var(--deep);
    border: 1px solid var(--border-mid); border-radius: var(--radius-s);
    color: var(--ink); font-family: inherit; font-size: var(--font-md); outline: none;
    transition: border-color var(--transition); box-sizing: border-box;
  }
  .ce-input:focus { border-color: var(--accent); }
  .ce-input::placeholder { color: var(--ink-ghost); }

  /* K.2 — Find a Time results. One `.ft-day` per local date with a
     short label + a row of `.ft-slot` chips the user clicks to
     prefill the create-event panel. */
  .ft-results {
    margin-top: var(--space-md);
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .ft-day {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ft-day-label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .ft-day-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ft-slot {
    padding: 6px 12px;
    border-radius: var(--radius-s);
    background: var(--surface);
    border: 1px solid var(--border-mid);
    color: var(--ink);
    font: inherit;
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
  }
  .ft-slot:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }

  /* PR D1 — event-kind selector. Sibling row with conferencing, same
     compact rounded look. Native <select> is acceptable here since we
     just have four short options and don't need icons/colors inside
     the menu. */
  .ce-kind-select {
    padding: 6px var(--space-md);
    background: var(--deep);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-s);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--font-sm);
    outline: none;
    cursor: pointer;
  }
  .ce-kind-select:focus { border-color: var(--accent); }
  .ce-row { display: flex; gap: var(--space-sm); }
  .ce-row .ce-field { flex: 1; }
  .ce-allday-toggle {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    cursor: pointer; font-size: var(--font-sm); color: var(--ink-secondary); user-select: none;
  }
  .ce-allday-toggle input { margin: 0; }
  .ce-byday-row {
    display: flex; gap: var(--space-xs); flex-wrap: wrap;
  }
  .ce-byday-row label {
    display: inline-flex; align-items: center; gap: var(--space-xs); padding: 4px 8px;
    border: 1px solid var(--border-mid); border-radius: var(--radius-s);
    background: var(--deep); color: var(--ink-secondary); font-size: var(--font-xs);
    cursor: pointer; user-select: none;
  }
  .ce-byday-row label:has(input:checked) {
    background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
  }
  .ce-type-row { display: flex; gap: var(--space-md); }
  .ce-type-option {
    display: flex; align-items: center; gap: var(--space-xs); cursor: pointer;
    font-size: var(--font-sm); color: var(--ink-secondary);
  }
  /* DS path: Surface/radio/accent/default. accent-color paints both
     the native radio fill (checked) and the outline. */
  .ce-type-option input[type="radio"] { accent-color: var(--surface-radio-accent-default); }
  .ce-type-option input[type="radio"]:disabled { accent-color: var(--surface-radio-accent-disabled); }
  .ce-participants-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
  .ce-participant-chip {
    display: flex; align-items: center; gap: var(--space-xs); padding: 4px 10px;
    background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-full);
    font-size: var(--font-xs); font-weight: 500;
  }
  .ce-participant-chip .remove { cursor: pointer; opacity: 0.6; }
  .ce-participant-chip .remove:hover { opacity: 1; }
  .ce-participant-chip--external {
    background: var(--surface); color: var(--ink-secondary);
    border: 1px dashed var(--border-mid);
  }

  /* Eye-toggle inside an attendee chip — only rendered in edit mode.
     Click pushes the user into CALENDAR_OVERLAY_USERS so the renderer
     paints striped busy blocks behind the hour grid. .active reuses
     the chip's accent color, just darker, so the user can scan which
     of the chips they've turned on. */
  .ce-participant-overlay-toggle {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; background: transparent; border: none;
    border-radius: var(--radius-full);
    color: inherit; opacity: 0.55; cursor: pointer;
    transition: opacity var(--transition), background var(--transition);
  }
  .ce-participant-overlay-toggle:hover { opacity: 1; }
  .ce-participant-overlay-toggle.active {
    opacity: 1;
    background: var(--accent);
    color: #fff;
  }
  .ce-participant-chip--external .ce-participant-overlay-toggle.active {
    background: var(--accent); color: #fff;
  }

  /* Notion-style vertical attendee list — used in edit mode instead
     of the compact chips. avatar | name (+ subtitle) | rsvp + actions. */
  .ce-participants-list:has(.ce-participant-row) {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: var(--space-xs);
  }
  .ce-participant-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center; gap: 10px;
    padding: 6px 6px;
    border-radius: var(--radius-s);
    transition: background var(--transition);
  }
  .ce-participant-row:hover { background: var(--surface); }
  .ce-participant-row-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    font-size: var(--font-2xs); font-weight: 600;
  }
  .ce-participant-row-body { min-width: 0; }
  .ce-participant-row-name {
    font-size: var(--font-sm); color: var(--ink); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ce-participant-row-sub {
    font-size: var(--font-2xs); color: var(--ink-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ce-participant-row-tail {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .ce-participant-row-tail .ce-participant-overlay-toggle {
    width: 22px; height: 22px;
    color: var(--ink-muted);
  }
  .ce-participant-row-tail .ce-participant-overlay-toggle.active {
    background: var(--accent); color: #fff;
  }
  .ce-participant-row-remove {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; background: transparent; border: none;
    border-radius: var(--radius-full);
    color: var(--ink-muted); cursor: pointer; opacity: 0;
    transition: opacity var(--transition), background var(--transition);
  }
  .ce-participant-row:hover .ce-participant-row-remove { opacity: 1; }
  .ce-participant-row-remove:hover {
    background: var(--surface-elevated, var(--surface));
    color: var(--ink);
  }

  /* RSVP status badges. Solid 18×18 circle with the icon centered;
     muted-state uses ghost outline so awaiting attendees don't shout. */
  .ce-participant-rsvp {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: var(--font-2xs); font-weight: 700;
    flex-shrink: 0;
  }
  .ce-participant-rsvp--yes { background: var(--success); color: #fff; }
  .ce-participant-rsvp--no { background: var(--danger); color: #fff; }
  .ce-participant-rsvp--maybe { background: var(--warning); color: #fff; }
  .ce-participant-rsvp--awaiting {
    background: transparent;
    border: 1px dashed var(--border-mid);
    color: var(--ink-muted);
    font-size: 10px;
  }

  /* ── Notion-style participant picker ────────────────────────────── */
  .kc-pp-root { position: relative; }
  .kc-pp-input {
    width: 100%; padding: 10px var(--space-md); background: var(--deep);
    border: 1px solid var(--border-mid); border-radius: var(--radius-s);
    color: var(--ink); font-family: inherit; font-size: var(--font-md); outline: none;
    transition: border-color var(--transition); box-sizing: border-box;
  }
  .kc-pp-input:focus { border-color: var(--accent); }
  .kc-pp-input::placeholder { color: var(--ink-ghost); }
  .kc-pp-dropdown {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--elevated); border: 1px solid var(--border);
    border-radius: var(--radius-m); box-shadow: var(--shadow-m);
    z-index: 100; max-height: 320px; overflow-y: auto;
  }
  .kc-pp-row {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md); cursor: pointer;
  }
  .kc-pp-row.highlight,
  .kc-pp-row:hover { background: var(--surface); }
  .kc-pp-row.external .kc-pp-primary { color: var(--accent); }
  .kc-pp-avatar {
    width: var(--avatar-sm); height: var(--avatar-sm); border-radius: var(--radius-full); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--on-accent); font-size: var(--font-2xs); font-weight: 600;
  }
  .kc-pp-avatar--external {
    background: var(--surface); color: var(--ink-muted);
    border: 1px dashed var(--border-mid);
  }
  .kc-pp-info { flex: 1; min-width: 0; }
  .kc-pp-primary {
    font-size: var(--font-sm); color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .kc-pp-secondary {
    font-size: var(--font-2xs); color: var(--ink-muted); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .kc-pp-clock { color: var(--ink-muted); flex-shrink: 0; }
  .ce-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); justify-content: flex-end; }
  .ce-cancel {
    padding: 10px 20px; border-radius: var(--radius-s); background: var(--surface);
    color: var(--ink-secondary); border: none; font-family: inherit; font-size: var(--font-md);
    font-weight: 500; cursor: pointer; transition: background var(--transition);
  }
  .ce-cancel:hover { background: var(--elevated); }
  .ce-submit {
    padding: 10px 24px; border-radius: var(--radius-s); background: var(--accent);
    color: white; border: none; font-family: inherit; font-size: var(--font-md);
    font-weight: 600; cursor: pointer; transition: background var(--transition);
  }
  .ce-submit:hover { background: var(--accent-hover); }
  .add-friend-success {
    margin-top: var(--space-md); padding: var(--space-md);
    background: var(--live-soft); border-radius: var(--radius-s);
    color: var(--live); font-size: var(--font-sm); font-weight: 500; display: none;
  }
  .friend-request-item {
    display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md);
    border-bottom: 1px solid var(--border);
  }
  .fr-direction { font-size: var(--font-2xs); color: var(--ink-ghost); }
  .fr-actions { display: flex; gap: var(--space-xs); margin-left: auto; }
  .fr-accept {
    padding: 6px 16px; background: var(--live); color: white; border: none;
    border-radius: var(--radius-s); font-family: inherit; font-size: var(--font-xs);
    font-weight: 600; cursor: pointer;
  }
  .fr-decline, .fr-cancel {
    padding: 6px 16px; background: var(--elevated); color: var(--ink-muted);
    border: none; border-radius: var(--radius-s); font-family: inherit;
    font-size: var(--font-xs); font-weight: 600; cursor: pointer;
  }

  /* Quick-create popover (keyboard 'c' / ⌘K) */
  .cal-quick-create {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    display: none; align-items: flex-start; justify-content: center;
    z-index: 1200; padding-top: 16vh;
  }
  .cal-quick-create.open { display: flex; }
  .cal-quick-create-box {
    width: 440px; max-width: 92vw;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-m); padding: var(--space-lg);
    box-shadow: var(--shadow-l);
  }
  .cal-quick-create-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-md); font-weight: 600; font-size: var(--font-sm);
    color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em;
  }
  .cal-quick-create-kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-2xs); padding: 2px 8px; border-radius: 4px;
    background: var(--elevated); color: var(--ink-muted);
    border: 1px solid var(--border); letter-spacing: 0;
  }
  .cal-quick-create-title {
    width: 100%; font-size: var(--font-lg); font-weight: 500;
    margin-bottom: var(--space-md);
  }
  .cal-quick-create-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  .cal-quick-create-actions {
    display: flex; align-items: center; gap: var(--space-sm);
  }
  .cal-quick-create-more {
    background: none; border: none; color: var(--ink-muted);
    font-family: inherit; font-size: var(--font-xs); cursor: pointer;
    padding: 6px 0;
  }
  .cal-quick-create-more:hover { color: var(--accent); }