/*
 * Editor shell and floating chrome.
 *
 * This file owns ProseMirror root behavior, placeholder text, NodeView layout,
 * and editor-only floating controls. Rich prose typography lives in prose.css.
 */

.rich-text-editor.ProseMirror {
  color: var(--foreground);
  caret-color: var(--foreground);
}

.rich-text-editor.ProseMirror:focus {
  outline: none;
}

/* Placeholder */
.rich-text-editor .is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--muted-foreground);
  pointer-events: none;
  height: 0;
}

/* Readonly mode overrides */
.rich-text-editor.readonly.ProseMirror {
  caret-color: transparent;
  cursor: default;
}

/* Mention NodeView inline layout fix */
.rich-text-editor [data-node-view-wrapper] {
  display: inline;
  vertical-align: middle;
}

/* Block-level NodeViews (fileCard) need to override the inline default above */
.rich-text-editor .file-card-node {
  display: block !important;
}

/* Bubble menu — floating toolbar pill */
.bubble-menu {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0.25rem;
  background: var(--popover);
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: var(--radius);
  box-shadow:
    0 4px 12px color-mix(in srgb, black 12%, transparent),
    0 0 0 1px color-mix(in srgb, black 4%, transparent);
}

/* Link edit mode — inline URL input */
.bubble-menu-link-edit {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--popover);
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: var(--radius);
  box-shadow:
    0 4px 12px color-mix(in srgb, black 12%, transparent),
    0 0 0 1px color-mix(in srgb, black 4%, transparent);
  min-width: 300px;
}

/* Link hover card — shows URL + actions on link hover */
.link-hover-card {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  background: var(--popover);
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: var(--radius);
  box-shadow:
    0 4px 12px color-mix(in srgb, black 12%, transparent),
    0 0 0 1px color-mix(in srgb, black 4%, transparent);
  max-width: min(360px, calc(100vw - 2rem));
  white-space: nowrap;
}