.yjs-editor-shell {
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  background: #fff;
}

.yjs-status-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 12px;
  color: #555;
  background: #f3f3f3;
  border-bottom: 1px solid #ddd;
}
.yjs-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.yjs-status-connected { background: #4caf50; }
.yjs-status-disconnected { background: #e05d44; }

.yjs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  background: #fafafa;
  border-bottom: 1px solid #ddd;
}
.yjs-toolbar button {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
  min-width: 28px;
}
.yjs-toolbar button:hover { background: #e8e8e8; border-color: #ccc; }
.yjs-toolbar-sep { width: 1px; background: #ddd; margin: 2px 4px; }

.yjs-editor-content { padding: 10px 14px; min-height: 240px; }
.yjs-editor-content .ProseMirror { outline: none; min-height: 220px; }
.yjs-editor-content p { margin: 0 0 0.6em; }
.yjs-editor-content h1, .yjs-editor-content h2, .yjs-editor-content h3 { margin: 0.4em 0; }
.yjs-editor-content blockquote { border-left: 3px solid #ccc; margin: 0.5em 0; padding-left: 10px; color: #555; }
.yjs-editor-content ul, .yjs-editor-content ol { padding-left: 1.4em; }

/* Toggle Box node view */
.pm-toggle-box {
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  margin: 0.6em 0;
  overflow: hidden;
}
.pm-toggle-box-header {
  display: flex;
  align-items: center;
  background: #2c3a47;
  color: #fff;
}
.pm-toggle-box-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: inherit;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.pm-toggle-box-toggle::before {
  content: '\25b6';
  font-size: 10px;
  transition: transform 0.15s;
  display: inline-block;
}
.pm-toggle-box-open .pm-toggle-box-toggle::before { transform: rotate(90deg); }
.pm-toggle-box-btn {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.75;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
}
.pm-toggle-box-btn:hover { opacity: 1; }
.pm-toggle-box-body { padding: 10px 12px; background: #fafafa; }
.pm-toggle-box-body > *:last-child { margin-bottom: 0; }

/* Tabs node view */
.pm-tabs { border: 1px solid #c8c8c8; border-radius: 6px; margin: 0.6em 0; overflow: hidden; }
.pm-tabs-strip { display: flex; background: #eee; border-bottom: 1px solid #c8c8c8; }
.pm-tabs-tab {
  background: none;
  border: none;
  border-right: 1px solid #ddd;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.pm-tabs-tab-active { background: #fff; font-weight: 600; }
.pm-tabs-add { margin-left: auto; padding: 6px 10px; border: none; background: none; cursor: pointer; opacity: 0.6; }
.pm-tabs-add:hover { opacity: 1; }
.pm-tabs-panels { padding: 10px 12px; background: #fff; }
.pm-tab-panel > *:last-child { margin-bottom: 0; }

/* y-prosemirror remote cursor/selection rendering */
.ProseMirror-yjs-cursor {
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
  word-break: normal;
  pointer-events: none;
}
.ProseMirror-yjs-cursor > div {
  position: absolute;
  top: -1.05em;
  left: -1px;
  font-size: 11px;
  background: inherit;
  font-family: system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  user-select: none;
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}