.ProseMirror {
  position: relative;
}

.ProseMirror {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection {
  background: transparent;
}
.ProseMirror-hideselection *::-moz-selection {
  background: transparent;
}
.ProseMirror-hideselection {
  caret-color: transparent;
}

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

/* TipTap placeholder styles */
.ProseMirror p.is-editor-empty:first-child::before {
  color: #9ca3af;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.ProseMirror.is-editor-empty::before {
  color: #9ca3af;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Rich text editor focus styles */
.rich-text-editor .ProseMirror:focus {
  outline: none;
}

/* Mention styles */
.mention {
  background-color: #e0e7ff;
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  color: #4338ca;
  font-weight: 500;
}

/* Own mention styles - highlighted in yellow like Slack */
.mention--own {
  background-color: #FEF0C7; /* warning-100 */
  color: #B54708; /* warning-700 */
}

/* Channel mention styles */
.channel-mention {
  background-color: #fef3c7;
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  color: #92400e;
}

/* Code block styles for editor */
.ProseMirror pre {
  background-color: #1f2937;
  color: #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  overflow-x: auto;
}

.ProseMirror pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* Inline code styles */
.ProseMirror code {
  background-color: #f3f4f6;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  color: #dc2626;
}

/* Blockquote styles */
.ProseMirror blockquote {
  border-left: 4px solid #e5e7eb;
  padding-left: 1rem;
  margin-left: 0;
  color: #6b7280;
  font-style: italic;
}

/* List styles */
.ProseMirror ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.ProseMirror ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}

/* Heading styles */
.ProseMirror h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.ProseMirror h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

.ProseMirror h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}