/* costudy.css — Live Co-Study panel for Split View (Seminary tier). v1 */

/* ─── Panel wrapper ─────────────────────────────────────────────────────── */
#costudy-panel {
  flex: 0 0 340px;
  width: 340px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform .25s ease;
  position: relative;
  z-index: 12;
}

#split-root.costudy-open #costudy-panel {
  transform: translateX(0);
}

/* When panel is closed, hide it from layout */
#split-root:not(.costudy-open) #costudy-panel {
  flex: 0 0 0;
  width: 0;
  border-left: none;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.cs-header {
  flex: 0 0 auto;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
}
.cs-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cs-title {
  font: 600 13px/1.2 "Inter", system-ui;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cs-title-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 5px var(--acc-glow);
  flex: 0 0 7px;
  animation: cs-pulse 2s ease-in-out infinite;
}
@keyframes cs-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.cs-close-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--ink-3);
  border-radius: var(--r-md);
  cursor: pointer;
  flex: 0 0 28px;
  transition: background .12s, color .12s;
}
.cs-close-btn:hover { background: var(--surface-2); color: var(--ink); }

/* Code row */
.cs-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 10px;
}
.cs-code-label {
  font: 700 9px/1 "Inter", system-ui;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.cs-code-value {
  font: 700 14px/1 "Inter", system-ui;
  letter-spacing: .15em;
  color: var(--ink);
  flex: 1 1 auto;
}
.cs-copy-btn {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font: 600 10px/1 "Inter", system-ui;
  padding: 3px 8px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.cs-copy-btn:hover { border-color: var(--acc-border); color: var(--acc); background: var(--acc-tint); }
.cs-copy-btn.copied { border-color: #27ae60; color: #27ae60; background: rgba(39,174,96,.08); }

/* ─── Presence list ──────────────────────────────────────────────────────── */
.cs-presence-section {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.cs-presence-label {
  font: 700 9px/1 "Inter", system-ui;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 7px;
  display: block;
}
.cs-presence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 100px;
  overflow-y: auto;
}
.cs-presence-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 12px/1.3 "Inter", system-ui;
  color: var(--ink-2);
}
.cs-presence-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
}
.cs-presence-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-presence-verse {
  font-size: 10px;
  color: var(--ink-3);
  margin-left: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ─── Chat thread ────────────────────────────────────────────────────────── */
.cs-chat-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.cs-chat-thread::-webkit-scrollbar { width: 4px; }
.cs-chat-thread::-webkit-scrollbar-track { background: transparent; }
.cs-chat-thread::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.cs-message {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-message-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cs-message-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.cs-message-name {
  font: 600 11px/1 "Inter", system-ui;
  color: var(--ink-2);
}
.cs-message-time {
  font: 400 10px/1 "Inter", system-ui;
  color: var(--ink-muted);
  margin-left: auto;
}
.cs-message-text {
  font: 400 13px/1.5 "Inter", system-ui;
  color: var(--ink);
  word-break: break-word;
  padding-left: 14px;
}

.cs-chat-empty {
  text-align: center;
  color: var(--ink-muted);
  font: 400 12px/1.5 "Inter", system-ui;
  padding: 20px 0;
}

/* ─── Chat footer ────────────────────────────────────────────────────────── */
.cs-chat-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  gap: 7px;
  align-items: stretch;
  background: var(--surface);
}
.cs-chat-input {
  flex: 1 1 auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font: 400 13px/1.3 "Inter", system-ui;
  resize: none;
  min-height: 36px;
  max-height: 80px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  overflow-y: auto;
}
.cs-chat-input:focus {
  border-color: var(--acc-border);
  box-shadow: 0 0 0 3px var(--acc-tint);
}
.cs-chat-input::placeholder { color: var(--ink-muted); }
.cs-send-btn {
  flex: 0 0 auto;
  background: var(--acc);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 0 12px;
  font: 600 12px/1 "Inter", system-ui;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
  align-self: flex-end;
  height: 36px;
}
.cs-send-btn:hover { background: var(--acc-h); }
.cs-send-btn:disabled { opacity: .5; cursor: default; }

/* ─── Leave button ───────────────────────────────────────────────────────── */
.cs-leave-section {
  flex: 0 0 auto;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
}
.cs-leave-btn {
  width: 100%;
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-3);
  font: 500 12px/1 "Inter", system-ui;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cs-leave-btn:hover {
  background: rgba(192,57,43,.08);
  border-color: rgba(192,57,43,.4);
  color: #c0392b;
}

/* ─── Start/Join modal ───────────────────────────────────────────────────── */
#costudy-modal {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(400px, 94vw);
}
#costudy-modal::backdrop {
  background: rgba(4,4,6,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes csmIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
#costudy-modal[open] { animation: csmIn .2s cubic-bezier(.22,1,.36,1) both; }

.csm-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-dialog);
  overflow: hidden;
}
.csm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.csm-head strong {
  font: 600 16px/1.2 "EB Garamond", Georgia, serif;
  color: var(--ink);
}
.csm-close {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  border-radius: var(--r-md);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, color .12s;
}
.csm-close:hover { background: var(--surface-2); color: var(--ink); }

.csm-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.csm-start-btn {
  width: 100%;
  padding: 12px;
  background: var(--acc);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font: 600 14px/1 "Inter", system-ui;
  cursor: pointer;
  transition: background .12s;
}
.csm-start-btn:hover { background: var(--acc-h); }
.csm-start-btn:disabled { opacity: .6; cursor: default; }

.csm-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-muted);
  font: 400 11px/1 "Inter", system-ui;
}
.csm-divider::before,
.csm-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.csm-join-row {
  display: flex;
  gap: 8px;
}
.csm-join-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font: 400 13px/1 "Inter", system-ui;
  text-transform: uppercase;
  letter-spacing: .12em;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.csm-join-input:focus {
  border-color: var(--acc-border);
  box-shadow: 0 0 0 3px var(--acc-tint);
}
.csm-join-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-muted);
}
.csm-join-btn {
  flex: 0 0 auto;
  padding: 0 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink);
  font: 600 13px/1 "Inter", system-ui;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.csm-join-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.csm-join-btn:disabled { opacity: .6; cursor: default; }

.csm-status {
  font: 400 12px/1.4 "Inter", system-ui;
  color: var(--ink-3);
  text-align: center;
  min-height: 18px;
}
.csm-status.error { color: #c0392b; }

/* ═══════════════════════════════════════════════════════════════════════════
   Co-Study workspace — tabs + panes, Docs pane, Inbox pane, Share modal, Toast
   Appended v2. Uses the same design tokens and visual language as above:
   13px Inter UI, 9–10px uppercase labels, subtle 1px borders, rounded corners.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Panel width: narrow-screen overrides ───────────────────────────────── */
/* Wider panel (340px) is set on #costudy-panel above for the in-panel editor.
   On tablets, trim to 300px so it leaves room for the split content. */
@media (max-width: 900px) {
  #costudy-panel {
    flex: 0 0 300px;
    width: 300px;
  }
}
/* On phones split.css hides the split content at 640px; keep the panel usable
   at a fixed 300px rather than a percentage. */
@media (max-width: 640px) {
  #costudy-panel {
    flex: 0 0 300px;
    width: 300px;
  }
}

/* ─── Workspace tabs ─────────────────────────────────────────────────────── */
.cs-tabs {
  display: flex;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex: 0 0 auto;
}
.cs-tab {
  flex: 1;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font: 600 11px/1 "Inter", system-ui;
  padding: 8px 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.cs-tab:hover { color: var(--ink); }
.cs-tab.active {
  color: var(--acc);
  border-bottom-color: var(--acc);
}
/* Small count pill inside a tab (e.g. unread inbox items). */
.cs-tab-badge {
  background: var(--acc);
  color: #fff;
  border-radius: 99px;
  font: 700 9px/1 "Inter", system-ui;
  padding: 2px 5px;
  min-width: 14px;
}

/* ─── Panes ──────────────────────────────────────────────────────────────── */
.cs-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cs-pane[hidden] { display: none; }
/* .cs-pane-chat reuses the existing flexing .cs-chat-thread as its scroller. */

/* ─── Docs pane (markup built by costudy-docs-ui.js) ─────────────────────── */
.csd-toolbar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
/* Primary / secondary small buttons in the docs toolbar. */
.csd-new-btn,
.csd-fromnotebook-btn {
  border-radius: var(--r-md);
  font: 600 11px/1 "Inter", system-ui;
  padding: 7px 10px;
  cursor: pointer;
}
.csd-new-btn {
  background: var(--acc);
  color: #fff;
  border: none;
}
.csd-fromnotebook-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
}

/* Docs list of saved notes. */
.csd-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.csd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.csd-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.csd-item-title {
  font: 600 12px/1.3 "Inter", system-ui;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csd-item-meta {
  font: 400 10px/1.3 "Inter", system-ui;
  color: var(--ink-muted);
}
/* Row actions — text buttons sized like the header .cs-copy-btn. */
.csd-item-open,
.csd-item-del {
  background: none;
  border: none;
  font: 600 11px/1 "Inter", system-ui;
  cursor: pointer;
  padding: 3px 4px;
  flex: 0 0 auto;
}
.csd-item-open { color: var(--acc); }
.csd-item-del { color: var(--ink-muted); }
.csd-item-del:hover { color: #c0392b; }

.csd-empty {
  text-align: center;
  color: var(--ink-muted);
  font: 400 12px/1.6 "Inter", system-ui;
  padding: 24px 16px;
}

/* Docs editor. */
.csd-editor {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.csd-editor-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
/* Icon-ish square buttons used for back / focus. */
.csd-back-btn,
.csd-focus-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 26px;
}
.csd-editor-title {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--ink);
  font: 600 13px/1.2 "Inter", system-ui;
  outline: none;
}
.csd-editor-body {
  flex: 1 1 auto;
  min-height: 120px;
  resize: none;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: none;
  background: var(--surface);
  color: var(--ink);
  font: 400 13px/1.6 "Inter", system-ui;
  outline: none;
  overflow-y: auto;
  /* Long unbroken tokens (URLs, refs) must not blow past the 340px panel. */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Live presence chips above the editor body. */
.csd-presence {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.csd-presence:empty { display: none; }
.csd-presence-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 400 10px/1 "Inter", system-ui;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 7px;
}
.csd-pchip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
}

/* Editor footer: references + controls. */
.csd-editor-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}
.csd-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: var(--r-md);
  font: 600 11px/1 "Inter", system-ui;
  padding: 7px 10px;
  cursor: pointer;
}
.csd-btn-primary {
  background: var(--acc);
  color: #fff;
  border: none;
}
.csd-btn-danger {
  background: transparent;
  border-color: rgba(192,57,43,.4);
  color: #c0392b;
}
.csd-refs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.csd-ref {
  font: 400 11px/1.4 "Inter", system-ui;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 7px;
}
.csd-ref-add {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font: 400 12px/1.3 "Inter", system-ui;
  padding: 6px 8px;
  outline: none;
}
.csd-meta-note {
  font: 400 10px/1.4 "Inter", system-ui;
  color: var(--ink-muted);
}

/* Focus mode: full-screen distraction-free editing surface. */
.csd-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: rgba(4,4,6,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* Native [hidden] would otherwise lose to the .csd-focus-overlay display:flex
   above, leaving this full-screen overlay visible on load (empty white card
   that can't be closed and blocks the whole Split View). */
.csd-focus-overlay[hidden] { display: none; }
.csd-focus-inner {
  position: relative;
  width: min(760px, 94vw);
  height: min(80vh, 720px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-dialog);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.csd-focus-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--ink-3);
  border-radius: var(--r-md);
  cursor: pointer;
}
.csd-focus-close:hover { background: var(--surface-2); color: var(--ink); }
/* The focus overlay gives the editor all remaining height. */
.csd-focus-inner .csd-editor { height: 100%; }
.csd-focus-inner .csd-editor-body { flex: 1; }

/* ─── Inbox pane ─────────────────────────────────────────────────────────── */
.csi-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.csi-toolbar-label {
  font: 700 9px/1 "Inter", system-ui;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.csi-refresh-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
  border-radius: var(--r-md);
  font: 600 11px/1 "Inter", system-ui;
  padding: 7px 10px;
  cursor: pointer;
}
.csi-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.csi-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.csi-type {
  font: 700 9px/1 "Inter", system-ui;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acc);
}
.csi-title {
  font: 600 12px/1.3 "Inter", system-ui;
  color: var(--ink);
}
.csi-msg {
  font: 400 11px/1.4 "Inter", system-ui;
  color: var(--ink-2);
  font-style: italic;
}
.csi-meta {
  font: 400 10px/1.3 "Inter", system-ui;
  color: var(--ink-muted);
}
.csi-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
/* Compact inbox actions. */
.csi-add-btn,
.csi-import-btn,
.csi-dismiss-btn {
  font: 600 10px/1 "Inter", system-ui;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.csi-add-btn {
  background: var(--acc);
  color: #fff;
  border: none;
}
.csi-import-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
}
.csi-dismiss-btn {
  background: transparent;
  border: none;
  color: var(--ink-muted);
}
.csi-empty {
  text-align: center;
  color: var(--ink-muted);
  font: 400 12px/1.6 "Inter", system-ui;
  padding: 24px 16px;
}

/* ─── Share modal (<dialog id="cs-share-modal">) ──────────────────────────── */
#cs-share-modal {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(420px, 94vw);
}
#cs-share-modal::backdrop {
  background: rgba(4,4,6,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cssm-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-dialog);
  overflow: hidden;
}
.cssm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.cssm-head strong {
  font: 600 16px/1.2 "EB Garamond", Georgia, serif;
  color: var(--ink);
}
.cssm-close {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  border-radius: var(--r-md);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, color .12s;
}
.cssm-close:hover { background: var(--surface-2); color: var(--ink); }
.cssm-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
}
.cssm-friend-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.cssm-friend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font: 400 12px/1.3 "Inter", system-ui;
  color: var(--ink);
}
.cssm-msg {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font: 400 12px/1.4 "Inter", system-ui;
  padding: 8px 10px;
  outline: none;
}
.cssm-status {
  font: 400 11px/1.4 "Inter", system-ui;
  color: var(--ink-3);
  min-height: 16px;
  text-align: center;
}
.cssm-status.error { color: #c0392b; }
.cssm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.cssm-send {
  background: var(--acc);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font: 600 12px/1 "Inter", system-ui;
  padding: 8px 14px;
  cursor: pointer;
}
.cssm-cancel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  border-radius: var(--r-md);
  font: 600 12px/1 "Inter", system-ui;
  padding: 8px 14px;
  cursor: pointer;
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.cs-toast {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 64px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font: 500 11px/1.4 "Inter", system-ui;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
  z-index: 30;
}
.cs-toast.show {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Co-Study workspace — v3 additions
   Styles for classes emitted by split/costudy-docs-ui.js that previously had
   no rule: the editor footer Save/Share buttons, the ref row label/text, and
   the "From Notebook" chooser dialog (csnb-*). Same tokens/visual language as
   the share modal above (var(--surface)/--border/--r-2xl/--shadow-dialog).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reference row parts inside .csd-ref — label is the verse ref, text a preview. */
.csd-ref-label {
  font: 600 11px/1.4 "Inter", system-ui;
  color: var(--acc);
  margin-right: 6px;
}
.csd-ref-text {
  color: var(--ink-3);
}

/* Editor footer buttons. .csd-save-btn mirrors .csd-btn-primary;
   .csd-share-btn mirrors the secondary .csd-btn. They also carry .csd-btn,
   so these set the accent/secondary treatment explicitly. */
.csd-save-btn {
  background: var(--acc);
  color: #fff;
  border: none;
}
.csd-save-btn:hover { background: var(--acc-h); }
.csd-share-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
}
.csd-share-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }

/* ─── From Notebook chooser (<dialog id="cs-notebook-modal">) ──────────────── */
/* Mirrors the share modal: centered panel above the panel/de overlays. */
#cs-notebook-modal {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(420px, 94vw);
  z-index: 9700;
}
#cs-notebook-modal::backdrop {
  background: rgba(4,4,6,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* The centered panel element. */
.csnb-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-dialog);
  overflow: hidden;
}
/* Header bar with the serif dialog title + close button. */
.csnb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.csnb-head strong {
  font: 600 16px/1.2 "EB Garamond", Georgia, serif;
  color: var(--ink);
}
.csnb-close {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  border-radius: var(--r-md);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, color .12s;
}
.csnb-close:hover { background: var(--surface-2); color: var(--ink); }
/* Scrollable column of importable notes. */
.csnb-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px 16px;
  max-height: 60vh;
  overflow-y: auto;
}
/* Clickable note row. */
.csnb-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.csnb-item:hover { background: var(--surface-3); border-color: var(--border-strong); }
.csnb-item-title {
  font: 600 12px/1.3 "Inter", system-ui;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csnb-item-meta {
  font: 400 10px/1.3 "Inter", system-ui;
  color: var(--ink-muted);
  flex: 0 0 auto;
}
.csnb-empty {
  text-align: center;
  color: var(--ink-muted);
  font: 400 12px/1.6 "Inter", system-ui;
  padding: 24px 16px;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #costudy-panel, .cs-title-dot, #costudy-modal,
  .cs-close-btn, .cs-copy-btn, .cs-send-btn, .cs-leave-btn,
  .cs-chat-input, .csm-start-btn, .csm-join-btn, .csm-join-input,
  .cs-tab, .csd-item-open, .csd-item-del, .csd-back-btn, .csd-focus-btn,
  .csd-btn, .csi-refresh-btn, .csi-add-btn, .csi-import-btn, .csi-dismiss-btn,
  .cssm-close, .cssm-send, .cssm-cancel, .cs-toast, .csd-focus-close,
  .csd-save-btn, .csd-share-btn, .csnb-close, .csnb-item, #cs-notebook-modal {
    transition: none !important;
    animation: none !important;
  }
}