.ray-editor-content {
   border: 1px solid black;
   border-radius: 4px;
   z-index: 1;
   position: relative;
   padding: 10px;
   background-color: white;
   overflow: auto;
}

.ray-editor-content p,
.ray-editor-content h1,
.ray-editor-content h2,
.ray-editor-content h3,
.ray-editor-content h4,
.ray-editor-content h5,
.ray-editor-content h6 {
   margin: 0;
   padding: 0;
   outline: none;
}

.ray-editor-toolbar {
   padding: 10px;
   border-bottom: 1px solid black;
   position: sticky;
   z-index:2;
   top: 0;
   background-color: white;
}

.ray-content-editor:focus-within {
   outline: none;
}

.ray-editor-content code {
   color: red;
   font-family: monospace;
   font-size: 0.95em;
   padding: 0.2em 0.4em;
   border-radius: 4px;
   white-space: pre-wrap;
   outline: none;
}
.ray-code-block {
  background-color: #1e1e1e;
  color: #dcdcdc;
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 1em;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.ray-code-block pre code {
  color: #fff;
}

.ray-link {
   text-decoration: underline;
   color: hsl(220, 100%, 50%);
   background-color: hsl(220, 100%, 96%);
   border-radius: 2px;
   padding: 0 2px;
}

/* Modal backdrop */
.ray-editor-link-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.4);
   /* semi-transparent background */
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
}

/* Modal content box */
.ray-editor-link-modal .modal-content {
   background: white;
   padding: 20px 24px;
   border-radius: 8px;
   max-width: 400px;
   width: 90%;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   font-family: sans-serif;
   animation: fadeInScale 0.2s ease-in-out;
}

/* Simple animation */
@keyframes fadeInScale {
   0% {
      opacity: 0;
      transform: scale(0.95);
   }

   100% {
      opacity: 1;
      transform: scale(1);
   }
}

/* Modal form styling */
.ray-editor-link-modal label {
   display: block;
   margin: 10px 0 5px;
   font-weight: 500;
}

.ray-editor-link-modal input[type="text"],
.ray-editor-link-modal select {
   width: 100%;
   padding: 8px;
   margin-bottom: 10px;
   box-sizing: border-box;
   border: 1px solid #ccc;
   border-radius: 4px;
}

/* Modal buttons */
.ray-editor-link-modal button {
   padding: 8px 12px;
   margin-top: 8px;
   margin-right: 8px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-weight: 500;
}

#insert-link {
   background-color: hsl(220, 100%, 56%);
   color: white;
}

#cancel-link {
   background-color: #eee;
   color: #333;
}

.ray-code-block {
   background-color: #282c34;
   color: #f8f8f2;
   font-family: 'Courier New', Courier, monospace;
   border-radius: 6px;
   margin: 1em 0;
   padding: 1em;
   overflow-x: auto;
   position: relative;
}

.ray-editor-link-edit-remove {
   position: absolute;
   background: white;
   border: 1px solid #ccc;
   padding: 6px 8px;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   z-index: 1001;
   display: flex;
   gap: 8px;
}

.ray-editor-link-edit-remove button {
   padding: 4px 6px;
   font-size: 0.85rem;
   cursor: pointer;
}

/* Optional: subtle scrollbar */
.ray-code-block::-webkit-scrollbar {
   height: 6px;
}

.ray-code-block::-webkit-scrollbar-thumb {
   background: #444;
   border-radius: 3px;
}

.ray-code-content {
   outline: none;
   white-space: pre-wrap;
   font-size: 14px;
   min-height: 1em;
   margin-bottom: 0;
}

#ray-editor-watermark {
   text-align: right;
   font-size: 0.9rem;
   color: #999;
   font-style: italic;
}

#ray-editor-watermark a {
   color: #555;
   text-decoration: none;
   border-bottom: 1px dashed #aaa;
}

#ray-editor-watermark a:hover {
   color: #000;
}

.upload-placeholder {
   font-style: italic;
   background: #f5f5f5;
   padding: 8px;
   margin: 10px 0;
   border: 1px dashed #bbb;
   color: #555;
}

.ray-btn svg {
   width: 18px;
   height: 18px;
   stroke: currentColor;
   display: block;
   margin: auto;
}

.ray-editor-toolbar {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 8px;
   background: #f9f9f9;
   border: 1px solid #ddd;
   margin-bottom: 5px;
}

.ray-editor-toolbar-inline {
   display: none;
}

.ray-editor-toolbar select {
   padding: 6px 10px;
   border: 1px solid #ccc;
   border-radius: 6px;
   font-size: 14px;
}

.ray-btn {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 6px;
   padding: 6px 10px;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 36px;
   min-height: 36px;
   line-height: 1;
}

.ray-btn:hover {
   background-color: #f0f0f0;
}

.ray-btn.active {
   background-color: #CDF6E4;
   border-color: #4a90e2;
   color: #1a73e8;
}

.ray-btn b,
.ray-btn i,
.ray-btn u,
.ray-btn s {
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
}

.ray-btn {
   position: relative;
}

.ray-btn::after {
   content: attr(data-tooltip);
   position: absolute;
   transform: translateX(-50%);
   background-color: #333;
   color: white;
   padding: 6px 8px;
   border-radius: 4px;
   white-space: nowrap;
   font-size: 12px;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease-in-out;
   z-index: 10;
   bottom: auto;
   top: 120%;
}

.ray-btn:hover::after {
   opacity: 1;
}

.ray-editor-table {
   width: 100%;
   border-collapse: collapse;
   margin: 10px 0;
}

.ray-editor-table td {
   border: 1px solid #ccc;
   padding: 8px;
   min-width: 50px;
}

.ray-editor-table-modal{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
}

.ray-editor-table-modal-content {
   background: #fff;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.ray-table-context-menu {
   position: absolute;
   background: #fff;
   border: 1px solid #ccc;
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
   padding: 8px;
   z-index: 99999;
   display: flex;
   flex-direction: column;
}

.ray-table-context-menu button {
   padding: 5px 10px;
   margin: 2px 0;
   background: none;
   border: none;
   text-align: left;
   cursor: pointer;
}

.ray-table-context-menu button:hover {
   background: #f0f0f0;
}
table.ray-editor-table-highlighted{
   border: 2px solid #007BFF; /* Blue border for highlighting */
   box-shadow: 0 0 10px rgba(0, 123, 255, 0); /* Subtle blue glow */
}
.ray-mention {
   text-decoration: underline;
   font-weight: bold;
}
.ray-mention:hover {
   cursor: pointer;
}
.ray-toolbar-overflow-dropdown button, .ray-toolbar-overflow-dropdown select {
  width: 100%;
  text-align: center;
  border: none;
  background: none;
  padding: 8px 12px;
  cursor: pointer;
}
.ray-toolbar-overflow-dropdown button:hover {
  background: #f0f0f0;
}
.ray-toolbar-overflow-dropdown {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  text-align: center;
  overflow-x: hidden;
  padding: 2.5px;
  background: #fff;
  z-index: 1000;
}
.ray-toolbar-overflow-dropdown::-webkit-scrollbar {
  width: 8px;
}
.ray-toolbar-overflow-dropdown::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.ray-editor-sourcearea {
  font-family: monospace;
  font-size: 14px;
  box-sizing: border-box;
  resize: vertical;
  min-height: 200px;
}
/* Dark mode for RayEditor */
.ray-editor-dark .ray-editor-toolbar,
.ray-editor-toolbar.ray-editor-dark {
  background: #23272e;
  border-color: #333;
}

.ray-editor-dark .ray-btn,
.ray-editor-toolbar.ray-editor-dark .ray-btn,
.ray-toolbar-overflow-dropdown.ray-editor-dark {
  background: #23272e;
  color: #e0e0e0;
  border-color: #444;
}

.ray-editor-dark .ray-btn:hover,
.ray-editor-toolbar.ray-editor-dark .ray-btn:hover,
.ray-editor-content.ray-editor-dark {
  background: #2c313a;
  color: #fff;
}

.ray-editor-dark .ray-btn.active,
.ray-editor-toolbar.ray-editor-dark .ray-btn.active {
  background: #2e4a3f;
  border-color: #4a90e2;
  color: #7ed9a7;
}

.ray-editor-dark .ray-toolbar-overflow-dropdown,
.ray-editor-toolbar.ray-editor-dark,
 .ray-toolbar-overflow-dropdown.ray-editor-dark,
 .ray-editor-dark select {
  background: #23272e;
  color: #e0e0e0;
  border-color: #333;
}

.ray-editor-dark .ray-toolbar-overflow-dropdown button,
.ray-editor-dark .ray-toolbar-overflow-dropdown select,
.ray-editor-toolbar.ray-editor-dark .ray-toolbar-overflow-dropdown button,
.ray-editor-toolbar.ray-editor-dark .ray-toolbar-overflow-dropdown select {
  background: #23272e;
  color: #e0e0e0;
}

.ray-editor-dark .ray-toolbar-overflow-dropdown button:hover,
.ray-editor-toolbar.ray-editor-dark .ray-toolbar-overflow-dropdown button:hover {
  background: #2c313a;
}

.ray-editor-dark .ray-btn::after,
.ray-editor-toolbar.ray-editor-dark .ray-btn::after {
  background-color: #111;
  color: #eee;
}