/* ── Calendar event create — Notion-style side panel ──
   Slides in from the right, 380px wide. The .chat-area container
   gets .with-create-panel which pushes #messagesScroller's right
   padding (mirrors the same layout the event-detail slide-in uses,
   so they don't fight each other for the right column).

   Lives outside the modal-stack — calendar grid stays interactive
   while the panel is open. */

  /* position:fixed so the panel is anchored to the viewport regardless
     of where it lives in the DOM — a position:absolute against an
     ancestor would only work if we re-parented the node into .chat-area
     on every open (the event-detail panel does that, but this panel is
     statically declared in app.html). */
  .cal-event-create-panel {
    position: fixed;
    /* Stretch from the top of the *content* area: 0 in the browser,
       --kc-titlebar-h (32px) below the Wails desktop titlebar. The
       previous fixed 52px left a black gap; setting 0 instead made
       the desktop titlebar cover the panel header. The token-driven
       value handles both shells with one rule. */
    top: var(--kc-titlebar-h, 0); right: 0; bottom: 0;
    width: 380px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-m);
    z-index: 50;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    display: flex; flex-direction: column;
    overflow: hidden;
    visibility: hidden;
  }
  .cal-event-create-panel.open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Calendar content gets squeezed when the panel is open. The view
     keeps its own scroll, the panel has its own. */
  .chat-area.with-create-panel #messagesScroller {
    padding-right: 380px;
  }

  .cesp-header {
    height: 52px; flex-shrink: 0;
    padding: 0 var(--space-md);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }
  .cesp-header-actions {
    display: flex; align-items: center; gap: 6px;
  }
  .cesp-icon-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    border-radius: var(--radius-s);
    color: var(--ink-muted); cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .cesp-icon-btn:hover { background: var(--accent-soft); color: var(--ink); }
  .cesp-icon-btn--danger:hover { background: var(--coral-soft); color: var(--coral); }

  /* Notion-style kebab menu — '...' trigger inside .cesp-header-actions
     opens a small dropdown with edit-mode actions (Delete first; more
     coming with R2.x polish). */
  .cesp-kebab-wrap { position: relative; }
  .cesp-kebab-menu {
    position: absolute; top: 100%; right: 0;
    margin-top: 4px;
    min-width: 180px;
    padding: 4px;
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
    z-index: 50;
    display: flex; flex-direction: column; gap: 2px;
  }
  .cesp-kebab-menu[hidden] { display: none; }
  .cesp-kebab-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: transparent; border: none;
    border-radius: var(--radius-s);
    color: var(--ink); font: inherit; font-size: var(--font-sm);
    text-align: left; cursor: pointer;
    transition: background var(--transition), color var(--transition);
  }
  .cesp-kebab-item:hover { background: var(--surface); }
  .cesp-kebab-item--danger { color: var(--coral); }
  .cesp-kebab-item--danger:hover { background: var(--coral-soft); }

  /* Edit-only sections — visible only when the panel runs in edit
     mode (data-mode="edit"). Default state is hidden so the create
     flow stays unchanged. */
  [data-mode="create"] .cesp-edit-only { display: none !important; }
  [data-mode="edit"] .cesp-edit-only { display: revert; }
  /* Header buttons stay inline-flex when shown. */
  [data-mode="edit"] .cesp-header-actions .cesp-edit-only {
    display: inline-flex;
  }
  /* Notion-style autosave: in edit mode every field commits on
     change/blur, so the explicit "Сохранить" button is redundant.
     Hide it; the create flow still uses the same button. */
  .cal-event-create-panel[data-mode="edit"] #cespSubmitBtn { display: none !important; }

  /* «Показывать как» (busy_free) is hidden in the UI — overlapped
     with Visibility (Notion has just one). The <select> stays in DOM
     so _kcReadEventForm reads its default. Inline `hidden` attribute
     loses to .cesp-section { display:flex } (equal specificity, later
     in source order); id-selector here is +100 and wins cleanly. */
  #cespBusyFreeRow { display: none !important; }
  .cesp-close {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    border-radius: var(--radius-s);
    color: var(--ink-muted); font-size: var(--font-md); cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .cesp-close:hover { background: var(--accent-soft); color: var(--ink); }

  .cesp-submit {
    height: 32px; padding: 0 16px;
    background: var(--accent); color: #fff;
    border: none; border-radius: var(--radius-s);
    font: inherit; font-size: var(--font-sm); font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
  }
  .cesp-submit:hover { background: var(--accent-hover); }
  .cesp-submit:disabled {
    opacity: 0.5; cursor: not-allowed;
  }

  .cesp-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    display: flex; flex-direction: column;
    gap: var(--space-md);
  }

  /* Title — large editable line, no border. Mimics Notion's h1-like
     title input. */
  .cesp-title {
    width: 100%;
    background: transparent; border: none;
    padding: 4px 0;
    color: var(--ink);
    font: inherit; font-size: var(--font-xl); font-weight: 600;
    outline: none;
  }
  .cesp-title::placeholder { color: var(--ink-muted); font-weight: 500; }

  /* A "row" is one form line: icon + content. Used for time, date,
     conferencing-type. */
  .cesp-row {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    min-height: 32px;
  }
  .cesp-row-icon {
    width: 20px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: flex-start;
    color: var(--ink-muted);
  }

  /* Time / date triggers inside a row — narrower than full-width form
     inputs. Borderless until hover so the row reads as one breath, not
     three boxed fields. */
  .cesp-row .kc-tp-trigger,
  .cesp-row .kc-dp-trigger {
    width: auto;
    min-width: 76px;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid transparent;
  }
  .cesp-row .kc-tp-trigger:hover,
  .cesp-row .kc-dp-trigger:hover,
  .cesp-row .kc-tp-trigger[aria-expanded="true"],
  .cesp-row .kc-dp-trigger[aria-expanded="true"] {
    background: var(--accent-soft);
    border-color: transparent;
  }

  .cesp-arrow {
    color: var(--ink-muted);
    font-size: var(--font-xs);
  }
  .cesp-duration {
    color: var(--ink-muted);
    font-size: var(--font-xs);
    margin-left: 4px;
  }

  .cesp-toggles {
    display: flex; gap: var(--space-md);
    margin-left: 30px; /* align under row content (icon + gap) */
  }
  .cesp-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-muted);
    font-size: var(--font-xs);
    cursor: pointer;
  }
  .cesp-toggle:hover { color: var(--ink); }

  /* iOS/Notion-style toggle switch. Visually-hidden input keeps the
     native form semantics (label-click fires onchange handler) while
     the .kc-toggle-track sibling renders the visual switch. Reusable
     pair — used by ceAllDay; future toggles can drop in the same
     <input class="kc-toggle-input"/><span class="kc-toggle-track"/>. */
  .kc-toggle-input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
  }
  .kc-toggle-track {
    position: relative; flex-shrink: 0;
    width: 30px; height: 18px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
  }
  .kc-toggle-track::before {
    content: ''; position: absolute;
    top: 50%; left: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--ink-muted);
    transform: translateY(-50%);
    transition: left var(--transition), background var(--transition);
  }
  .kc-toggle-input:checked + .kc-toggle-track {
    background: var(--accent);
    border-color: var(--accent);
  }
  .kc-toggle-input:checked + .kc-toggle-track::before {
    left: 14px;
    background: #fff;
  }
  .kc-toggle-input:focus-visible + .kc-toggle-track {
    box-shadow: 0 0 0 2px var(--accent-soft);
  }

  .cesp-toggle--repeat select {
    background: transparent; border: none;
    color: inherit; font: inherit; font-size: var(--font-xs);
    cursor: pointer;
  }

  /* Section block — used for Participants, Description, Reminder.
     Less dense than rows; carries a small label above the input. */
  .cesp-section {
    display: flex; flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border);
    padding-top: var(--space-md);
  }
  .cesp-section-label {
    font-size: var(--font-2xs); font-weight: 600; color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  /* Description block: textarea + linkified preview share the same
     box. data-mode toggles which one is visible — preview is the
     default once non-empty so URLs are clickable; click flips back
     to edit. */
  .cesp-desc-wrap { width: 100%; position: relative; }
  .cesp-desc-input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: var(--elevated); border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink);
    font: inherit; font-size: var(--font-sm);
    line-height: 1.45;
    resize: none;            /* JS handles autosize */
    overflow: hidden;
    min-height: 36px;
    box-sizing: border-box;
  }
  .cesp-desc-preview {
    display: none;
    width: 100%;
    padding: 8px 10px;
    background: var(--elevated); border: 1px solid transparent;
    border-radius: var(--radius-s);
    color: var(--ink);
    font-size: var(--font-sm); line-height: 1.45;
    cursor: text;
    white-space: pre-wrap; word-wrap: break-word;
    box-sizing: border-box;
    transition: border-color var(--transition);
  }
  .cesp-desc-preview:hover { border-color: var(--border); }
  .cesp-desc-preview a { color: var(--accent); text-decoration: underline; }
  .cesp-desc-preview a:hover { color: var(--accent-hover); }
  /* D4 — rich-text in the description preview. kcMdToHtml emits
     <strong>/<em>/<u>/<s>/<code>/<pre>/<ul>/<ol>/<blockquote>; give
     them sensible inline styling so the preview reads like the chat
     message bubble's renderer without leaking message-specific
     visuals (mentions, custom emoji). */
  .cesp-desc-preview strong { font-weight: 600; }
  .cesp-desc-preview em     { font-style: italic; }
  .cesp-desc-preview code {
    padding: 1px 6px;
    background: var(--surface);
    border-radius: var(--radius-s);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
  }
  .cesp-desc-preview pre {
    margin: var(--space-xs) 0;
    padding: 8px 10px;
    background: var(--surface);
    border-radius: var(--radius-s);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    overflow-x: auto;
  }
  .cesp-desc-preview pre code { padding: 0; background: transparent; }
  .cesp-desc-preview ul,
  .cesp-desc-preview ol {
    margin: var(--space-xs) 0;
    padding-left: var(--space-lg);
  }
  .cesp-desc-preview li { margin: 2px 0; }
  .cesp-desc-preview blockquote {
    margin: var(--space-xs) 0;
    padding: 2px 10px;
    border-left: 3px solid var(--border-mid);
    color: var(--ink-secondary);
  }
  .cesp-desc-wrap[data-mode="preview"] .cesp-desc-input { display: none; }
  .cesp-desc-wrap[data-mode="edit"] .cesp-desc-preview { display: none; }
  .cesp-section--reminder select,
  .cesp-section--busy-free select,
  .cesp-section--visibility select {
    align-self: flex-start;
    padding: 6px 10px;
    background: var(--elevated); border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink);
    font: inherit; font-size: var(--font-sm);
    cursor: pointer;
  }
  /* Epic N — buffer / travel time row. Two paired selects with inline
     "До" / "После" labels. */
  .cesp-buffer-row {
    display: flex; align-items: center; gap: var(--space-sm);
    flex-wrap: wrap;
  }
  .cesp-buffer-label {
    color: var(--ink-muted);
    font-size: var(--font-sm);
  }
  .cesp-buffer-select {
    padding: 6px 10px;
    background: var(--elevated); border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink);
    font: inherit; font-size: var(--font-sm);
    cursor: pointer;
  }
  /* E.3 — multi-reminder picker. One row per lead, with a small ×
     remove button. "Добавить" link sits below the list. */
  .cesp-reminder-list {
    display: flex; flex-direction: column;
    gap: var(--space-xs);
  }
  .cesp-reminder-row {
    display: flex; align-items: center;
    gap: var(--space-xs);
  }
  .cesp-reminder-row .cesp-reminder-item {
    flex: 1;
    padding: 6px 10px;
    background: var(--elevated); border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink);
    font: inherit; font-size: var(--font-sm);
    cursor: pointer;
  }
  .cesp-reminder-remove {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    padding: 0;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-s);
    color: var(--ink-secondary);
    font-size: 16px; line-height: 1;
    cursor: pointer;
  }
  .cesp-reminder-remove:hover {
    background: var(--elevated); border-color: var(--border);
    color: var(--ink);
  }
  .cesp-reminder-add {
    align-self: flex-start;
    margin-top: 2px;
    padding: 4px 8px;
    background: transparent; border: 0;
    color: var(--accent);
    font: inherit; font-size: var(--font-sm);
    cursor: pointer;
  }
  .cesp-reminder-add:hover { text-decoration: underline; }
  /* O.2 — colour swatch row in the create-event panel. 7 round
     swatches + a "default" pill that clears the override. Active
     swatch has a thin outer ring (Notion convention). */
  .cesp-color-row {
    display: flex; flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
  }
  .cesp-color-swatch {
    width: 22px; height: 22px;
    padding: 0;
    background: var(--cal-color-gray);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
  }
  .cesp-color-swatch:hover { transform: scale(1.08); }
  /* Colour SELECTION = the pure solid hue, consistent with the
     connected-calendar picker (.cal-row-color-swatch) and Google. The
     softened tint is only the grid fill, never the picker. */
  .cesp-color-swatch.color-red    { background: var(--cal-color-red); }
  .cesp-color-swatch.color-orange { background: var(--cal-color-orange); }
  .cesp-color-swatch.color-yellow { background: var(--cal-color-yellow); }
  .cesp-color-swatch.color-green  { background: var(--cal-color-green); }
  .cesp-color-swatch.color-blue   { background: var(--cal-color-blue); }
  .cesp-color-swatch.color-purple { background: var(--cal-color-purple); }
  .cesp-color-swatch.color-gray   { background: var(--cal-color-gray); }
  .cesp-color-swatch--default {
    width: 22px; height: 22px;
    background: transparent;
    border: 1px dashed var(--border-mid);
    color: var(--ink-muted);
    font-size: 13px; line-height: 1;
  }
  .cesp-color-swatch--default:hover {
    color: var(--ink); border-color: var(--ink-secondary);
  }
  .cesp-color-swatch--active {
    box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--ink);
  }
  /* D2.4 — the two new "Показывать как" / "Видимость" rows want the
     full-width look (matches the Description box) so the labels
     don't push everything tight. */
  .cesp-section--busy-free select,
  .cesp-section--visibility select { width: 100%; align-self: stretch; }

  /* The repeat-custom byday row is more legacy modal layout — keep it
     readable in the slim panel. */
  #ceRecurrenceCustomField .ce-byday-row {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  #ceRecurrenceCustomField .ce-byday-row label {
    font-size: var(--font-xs); color: var(--ink);
    display: inline-flex; align-items: center; gap: 4px;
  }

  /* Conferencing dropdown (replaced the legacy video/audio radios).
     Notion-style: single trigger pill + popover menu of providers. */
  .cesp-row--conferencing .ce-conferencing { position: relative; flex: 1; }
  .ce-conferencing-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: var(--surface);
    /* User feedback: при transparent-бордере кнопка сливалась с фоном —
       не читалась как интерактивный элемент. Постоянный border делает её
       визуально на уровне инпутов рядом. */
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink); font-family: inherit; font-size: var(--font-sm); font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
  }
  .ce-conferencing-trigger:hover {
    background: var(--elevated);
    border-color: var(--accent);
  }
  .ce-conferencing-trigger[aria-expanded="true"] {
    background: var(--surface);
    border-color: var(--accent);
  }
  /* Epic I — empty-state placeholder (Notion convention): muted ink
     so the trigger reads as "ничего не выбрано" until the user picks. */
  .ce-conferencing-label--empty { color: var(--ink-muted); }

  /* Epic I follow-up — meeting-link section (Notion parity). Appears
     below the conferencing trigger after the user picks Kinescope
     Speak. Three rows: link, code, provider footer.
     `[hidden]` loses to `.cesp-section { display: flex }` (same
     specificity, later in source order). Same trap as cespBusyFreeRow
     — fix via id-selector with !important. */
  #ceMeetingLinkSection[hidden] { display: none !important; }
  .cesp-section--meeting-link { gap: 4px; }
  /* Loading skeleton — `data-state="loading"` (set during the
     /calendar/rooms/draft roundtrip) dims the rows so the user sees
     "Создаём комнату…" feedback instead of empty fields with stale
     copy buttons. Notion ships the same pattern for Google Meet
     auto-creation. */
  #ceMeetingLinkSection[data-state="loading"] .cesp-mlink-copy {
    opacity: 0.4;
    pointer-events: none;
  }
  #ceMeetingLinkSection[data-state="loading"] .cesp-mlink-label {
    color: var(--ink-secondary);
    font-style: italic;
  }
  #ceMeetingLinkSection[data-state="loading"] .cesp-mlink-url::before,
  #ceMeetingLinkSection[data-state="loading"] .cesp-mlink-code::before {
    content: '—';
    color: var(--ink-ghost);
  }
  /* Error state — hide the URL/code rows and surface the inline error
     block (Notion-style: "не удалось… повторить"). Default state hides
     the error block. */
  #ceMeetingLinkSection .cesp-mlink-error { display: none; }
  #ceMeetingLinkSection[data-state="error"] .cesp-mlink-row { display: none; }
  #ceMeetingLinkSection[data-state="error"] .cesp-mlink-error {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0;
    color: var(--ink-secondary);
    font-size: var(--font-sm);
  }
  .cesp-mlink-error-text { flex: 1; min-width: 0; }
  .cesp-mlink-retry {
    flex: 0 0 auto;
    padding: 4px 10px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: var(--transition);
  }
  .cesp-mlink-retry:hover { background: var(--elevated); border-color: var(--accent); }
  .cesp-mlink-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
  }
  .cesp-mlink-label {
    flex: 0 0 auto;
    color: var(--ink-muted);
    font-size: var(--font-sm);
    min-width: 60px;
  }
  .cesp-mlink-url {
    flex: 1; min-width: 0;
    color: var(--ink);
    font-size: var(--font-sm);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cesp-mlink-url:hover { color: var(--accent); text-decoration: underline; }
  .cesp-mlink-code {
    flex: 1; min-width: 0;
    color: var(--ink);
    font-size: var(--font-sm);
    font-family: var(--font-mono, monospace);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cesp-mlink-copy {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    color: var(--ink-muted);
    cursor: pointer;
    transition: var(--transition);
  }
  .cesp-mlink-copy:hover {
    color: var(--ink);
    background: var(--elevated);
    border-color: var(--border);
  }
  .cesp-mlink-provider {
    display: flex; align-items: center; gap: 8px;
    margin-top: 4px;
    padding: 4px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    color: var(--ink-muted);
    font-size: var(--font-sm);
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
  }
  .cesp-mlink-provider:hover {
    background: var(--elevated);
    border-color: var(--border);
    color: var(--ink);
  }
  .cesp-mlink-provider-chev {
    margin-left: auto;
    color: var(--ink-muted);
    flex: 0 0 auto;
  }
  .cesp-mlink-provider-icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px;
    font-size: var(--font-xs); font-weight: 700;
    background: var(--accent); color: var(--on-accent, #fff);
  }
  /* position:fixed so the menu escapes `.cesp-body { overflow-y: auto }`
     — earlier draft used position:absolute and the scroll container
     clipped the "Скоро" rows below the fold. JS toggle handler now
     pins left/top from trigger.getBoundingClientRect() on open. */
  .ce-conferencing-menu {
    position: fixed;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
    background: var(--deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-l);
    z-index: 100;
    display: flex; flex-direction: column; gap: 1px;
  }
  .ce-conferencing-menu[hidden] { display: none; }
  .ce-conferencing-item {
    display: grid;
    grid-template-columns: 22px 1fr 14px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent; border: none;
    border-radius: var(--radius-s);
    color: var(--ink); font: inherit; font-size: var(--font-sm);
    text-align: left; cursor: pointer;
    transition: background var(--transition);
  }
  .ce-conferencing-item:hover { background: var(--accent-soft); }
  .ce-conferencing-item .ce-conferencing-check { opacity: 0; color: var(--accent); }
  .ce-conferencing-item.active .ce-conferencing-check { opacity: 1; }
  .ce-conferencing-item.active .ce-conferencing-item-label { font-weight: 600; }
  .ce-conferencing-item-icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px;
    font-size: var(--font-xs); font-weight: 700;
  }
  .ce-conferencing-item-icon--speak {
    background: var(--accent); color: var(--on-accent, #fff);
  }
  /* Epic I — Kinescope Rooms / Скоро placeholders. Rooms shares the
     accent paint with Speak (both Kinescope products); the disabled
     placeholders use a neutral surface tint so they read as inactive. */
  .ce-conferencing-item-icon--rooms {
    background: var(--accent); color: var(--on-accent, #fff);
  }
  .ce-conferencing-item-icon--meet,
  .ce-conferencing-item-icon--telemost,
  .ce-conferencing-item-icon--zoom {
    background: var(--surface); color: var(--ink-muted);
  }
  .ce-conferencing-item-icon--none {
    background: var(--surface); color: var(--ink-muted);
  }
  .ce-conferencing-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
  }
  .ce-conferencing-item--soon {
    cursor: not-allowed;
    opacity: 0.55;
  }
  .ce-conferencing-item--soon:hover { background: transparent; }
  .ce-conferencing-soon-tag {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-muted);
    font-size: var(--font-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* ── Live preview block on the calendar grid ──
     Painted by _kcRenderEventPreview when the side-panel is open;
     mirrors the chosen date+start+end window so the user sees where
     their event will land before hitting "Создать". Visually quieter
     than a real event chip — dashed border, accent-soft fill — and
     pointer-events disabled so the user can keep dragging the grid. */
  .cal-event-preview {
    position: absolute;
    background: var(--accent);
    border: 1px dashed var(--on-accent);
    border-radius: var(--radius-s);
    padding: 4px 6px;
    font-size: var(--font-xs);
    color: var(--on-accent);
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
  }

  /* All-day twin of .cal-event-preview — sits inside the all-day lane
     using grid-column placement (set inline by JS). Same dashed-accent
     skin so the preview reads as «event in progress», then stays the
     same accent color when it becomes a real .cal-week-allday-bar. */
  .cal-allday-preview {
    align-self: center;
    margin: 1px 2px;
    padding: 1px 6px;
    background: var(--accent);
    border: 1px dashed var(--on-accent);
    border-radius: 4px;
    color: var(--on-accent);
    font-size: var(--font-2xs); font-weight: 600;
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
    z-index: 2;
  }

  /* Colour variants mirror the real chip palette (.cal-week-event.color-*
     / .cal-week-allday-bar.color-*) so the draft reads as the colour the
     event will actually be saved with. The dashed border is kept as the
     "not saved yet" cue; only the hue follows the picker. Default (no
     class) stays solid accent, matching an uncoloured chip. */
  .cal-event-preview.color-red,    .cal-allday-preview.color-red    { background: var(--cal-color-red-soft);    border-color: var(--cal-color-red);    color: var(--ink); }
  .cal-event-preview.color-orange, .cal-allday-preview.color-orange { background: var(--cal-color-orange-soft); border-color: var(--cal-color-orange); color: var(--ink); }
  .cal-event-preview.color-yellow, .cal-allday-preview.color-yellow { background: var(--cal-color-yellow-soft); border-color: var(--cal-color-yellow); color: var(--ink); }
  .cal-event-preview.color-green,  .cal-allday-preview.color-green  { background: var(--cal-color-green-soft);  border-color: var(--cal-color-green);  color: var(--ink); }
  .cal-event-preview.color-blue,   .cal-allday-preview.color-blue   { background: var(--cal-color-blue-soft);   border-color: var(--cal-color-blue);   color: var(--ink); }
  .cal-event-preview.color-purple, .cal-allday-preview.color-purple { background: var(--cal-color-purple-soft); border-color: var(--cal-color-purple); color: var(--ink); }
  .cal-event-preview.color-gray,   .cal-allday-preview.color-gray   { background: var(--cal-color-gray-soft);   border-color: var(--cal-color-gray);   color: var(--ink); }

  /* Status ribbon — sits above the title, surfaces cancelled / tentative
     state at a glance. Cancelled = coral, tentative = amber. */
  .cesp-status-ribbon {
    padding: 6px 10px;
    border-radius: var(--radius-s);
    font-size: var(--font-xs); font-weight: 600;
    margin-bottom: var(--space-sm);
  }
  .cesp-status-ribbon[data-status="cancelled"] {
    background: var(--coral-soft); color: var(--coral);
  }
  .cesp-status-ribbon[data-status="tentative"] {
    background: var(--amber-soft); color: var(--amber);
  }

  /* TZ badge — quiet pill next to the time row that names the event's
     timezone. Only rendered when event.eventTz differs from viewerTz. */
  .cesp-tz-badge {
    display: inline-flex; align-items: center;
    padding: 2px 6px;
    background: var(--accent-soft);
    border-radius: var(--radius-s);
    color: var(--accent);
    font-size: var(--font-2xs); font-weight: 600;
    margin-left: 4px;
    cursor: default;
  }

  /* Propose-time button — non-host workflow. Lives inside the RSVP
     section, styled like a ghost button to stay subordinate to the
     primary RSVP choice. */
  .cesp-propose-btn {
    margin-top: var(--space-sm);
    width: 100%;
    height: 32px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-s);
    color: var(--ink-secondary);
    font: inherit; font-size: var(--font-sm);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .cesp-propose-btn:hover {
    background: var(--accent-soft);
    color: var(--accent); border-color: var(--accent);
  }

  /* RSVP row — three buttons that toggle accepted/maybe/declined. The
     active selection picks up var(--accent) so the user sees their
     current answer at a glance. */
  .cesp-rsvp-row {
    display: flex; gap: var(--space-sm);
  }
  .cesp-rsvp-btn {
    flex: 1;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink); font: inherit; font-size: var(--font-sm);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .cesp-rsvp-btn:hover { background: var(--accent-soft); }
  .cesp-rsvp-btn.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
  }

  /* ── Mobile: full-screen panel ── */
  @media (max-width: 800px) {
    .cal-event-create-panel { width: 100%; }
    .chat-area.with-create-panel #messagesScroller { padding-right: 0; }
  }