/* ==========================================================================
   Editor Styling (Code & Text Input with Line Numbers)
   ========================================================================== */

.editor-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  background-color: var(--color-bg-surface);
  overflow: hidden;
}

/* Line Numbers Column */
.line-numbers {
  width: 48px;
  min-width: 48px;
  padding: 1.25rem 0.5rem 1.25rem 0.25rem;
  background-color: var(--color-bg-base);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: right;
  user-select: none;
  overflow: hidden;
  opacity: 0.7;
}

.line-numbers span {
  display: block;
  padding: 0 4px;
  border-radius: var(--radius-xs, 4px);
  transition: all 0.15s ease;
}

.line-numbers span.active-line-num {
  color: var(--color-primary);
  font-weight: 700;
  background-color: var(--color-primary-light);
  opacity: 1;
}

/* Textarea Container & Collab Overlay Layer */
.editor-textarea-container {
  position: relative;
  flex: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
}

.editor-collab-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

/* Textarea Editor */
.editor-textarea {
  flex: 1;
  height: 100%;
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: transparent;
  color: var(--color-text-primary);
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-persian), var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.6;
  tab-size: 2;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  direction: rtl; /* Can be toggled */
  text-align: right;
  transition: color var(--transition-fast);
}

.editor-textarea::selection {
  background-color: var(--color-primary-light);
  color: var(--color-text-primary);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}