.tiptap {
    margin-top: 1rem;
    height: 50vh;
    margin:0;
    padding: 4;
    overflow: auto;
  }
  
  .tiptap :first-child {
    margin-top: 0;
  }
  
  .tiptap blockquote {
    border-left: 3px solid gray;
    margin: 1.5rem 0;
    padding-left: 1rem;
  }
  
  .tiptap ul,
  .tiptap ol {
    padding: 0 1rem;
    margin: 1.25rem 1rem 1.25rem 0.4rem;
  }
  .tiptap ul {
    list-style-type: disc;
  }
  .tiptap ol {
    list-style-type: decimal;
  }
  
  .tiptap ul li p,
  .tiptap ol li p {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
  }
  
  .tiptap pre {
    background: #313030;
    border-radius: 0.5rem;
    color: white;
    font-family: 'JetBrainsMono', monospace;
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    overflow-x: auto;
  }
  
  .tiptap pre code {
    background: none;
    color: inherit;
    font-size: 0.8rem;
    padding: 0;
  }
  
  /* Code syntax highlighting */
  .tiptap pre .hljs-comment,
  .tiptap pre .hljs-quote {
    color: #616161;
  }
  
  .tiptap pre .hljs-variable,
  .tiptap pre .hljs-template-variable,
  .tiptap pre .hljs-attribute,
  .tiptap pre .hljs-tag,
  .tiptap pre .hljs-regexp,
  .tiptap pre .hljs-link,
  .tiptap pre .hljs-name,
  .tiptap pre .hljs-selector-id,
  .tiptap pre .hljs-selector-class {
    color: #f98181;
  }
  
  .tiptap pre .hljs-number,
  .tiptap pre .hljs-meta,
  .tiptap pre .hljs-built_in,
  .tiptap pre .hljs-builtin-name,
  .tiptap pre .hljs-literal,
  .tiptap pre .hljs-type,
  .tiptap pre .hljs-params {
    color: #fbbc88;
  }
  
  .tiptap pre .hljs-string,
  .tiptap pre .hljs-symbol,
  .tiptap pre .hljs-bullet {
    color: #b9f18d;
  }
  
  .tiptap pre .hljs-title,
  .tiptap pre .hljs-section {
    color: #faf594;
  }
  
  .tiptap pre .hljs-keyword,
  .tiptap pre .hljs-selector-tag {
    color: #70cff8;
  }
  
  .tiptap pre .hljs-emphasis {
    font-style: italic;
  }
  
  .tiptap pre .hljs-strong {
    font-weight: 700;
  }
  
  .tiptap h1,
  .tiptap h2,
  .tiptap h3,
  .tiptap h4,
  .tiptap h5,
  .tiptap h6 {
    line-height: 1.1;
    margin-top: 2.5rem;
    text-wrap: pretty;
  }
  
  .tiptap h1,
  .tiptap h2 {
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
  }
  
  .tiptap h1 {
    font-size: 3rem;
  }
  
  .tiptap h2 {
    font-size: 2rem;
  }
  
  .tiptap h3 {
    font-size: 1.2rem;
  }
  
  .tiptap h4,
  .tiptap h5,
  .tiptap h6 {
    font-size: 1rem;
  }
  
  .tiptap hr {
    border: none;
    border-top: 1px solid gray;
    margin: 2rem 0;
    cursor: pointer;
  }
  
  .tiptap hr.ProseMirror-selectednode {
    border-top: 1px solid purple;
  }
  
  .tiptap table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    margin: 1rem 0;
  }
  
  .tiptap table td,
  .tiptap table th {
    border: 1px solid gray;
    padding: 6px 8px;
    position: relative;
    vertical-align: top;
    min-width: 1em;
  }
  
  .tiptap table th {
    background-color: red;
    font-weight: bold;
    text-align: left;
  }
  
  .tiptap table td > * {
    margin-bottom: 0;
  }
  
  .tiptap .selectedCell:after {
    content: "";
    background: yellow;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
  }
  
  .tiptap .column-resize-handle {
    background-color: purple;
    position: absolute;
    top: 0;
    right: -2px;
    bottom: -2px;
    width: 4px;
    pointer-events: none;
  }
  
  .tiptap .tableWrapper {
    margin: 1.5rem 0;
    overflow-x: auto;
  }
  
  .tiptap.resize-cursor {
    cursor: col-resize;
  }
  
  .tiptap mark {
    background-color: #FAF594;
    border-radius: 0.4rem;
    padding: 0.1rem 0.3rem;
    box-decoration-break: clone;
  }
  
  .tiptap code {
    background-color: purple;
    border-radius: 0.4rem;
    color: black;
    font-size: 0.85rem;
    padding: 0.25em 0.3em;
  }
  
  .tiptap a {
    color: purple;
    cursor: pointer;
    text-decoration: underline;
  }
  
  .tiptap a:hover {
    color: #711371;
  }
  
  /* Active toolbar button styling */
  .toolbar-button.is-active {
    background-color: yellow;
    border-radius: 4px;
  }
  