/* Rich editor — Quill skin matching forum design */



.ryb-editor-wrap {

  position: relative;

  display: flex;

  flex-direction: column;

  border: 1px solid var(--c-border);

  border-radius: var(--r-md, 10px);

  background: var(--c-surface);

  overflow: hidden;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}

.ryb-editor-wrap:focus-within {

  border-color: var(--c-green);

  box-shadow: 0 0 0 3px var(--c-green-soft);

}



/* Toolbar */

.ryb-editor-wrap .ql-toolbar.ql-snow {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 4px;

  flex-shrink: 0;

  padding: var(--s-2, 8px) var(--s-3, 12px);

  border: 0;

  border-bottom: 1px solid var(--c-border);

  background: var(--c-surface-2);

  font-family: var(--f-ui);

}

.ryb-editor-wrap .ql-toolbar.ql-snow .ql-formats {

  display: inline-flex;

  align-items: center;

  gap: 2px;

  margin-right: 6px;

}

.ryb-editor-wrap .ql-toolbar.ql-snow .ql-formats:not(:last-child)::after {

  content: '';

  display: inline-block;

  width: 1px;

  height: 24px;

  margin-left: 6px;

  background: var(--c-border);

  vertical-align: middle;

}



/* Touch-friendly buttons (44px targets) */

.ryb-editor-wrap .ql-snow button {

  width: 44px;

  height: 44px;

  padding: 10px;

  border-radius: var(--r-sm, 6px);

  transition: background 0.12s ease;

}

.ryb-editor-wrap .ql-snow button:hover,

.ryb-editor-wrap .ql-snow button:focus-visible {

  background: var(--c-surface-3, var(--c-surface-2));

}

.ryb-editor-wrap .ql-snow button.ql-active {

  background: var(--c-green-soft);

}



/* Editor area */

.ryb-editor-wrap .ql-container.ql-snow {

  border: 0;

  font-family: 'Golos Text', Inter, system-ui, -apple-system, sans-serif;

  font-size: 16px;

  min-height: 200px;

  max-height: 480px;

  overflow: hidden;

  flex: 1 1 auto;

  background: var(--c-surface);

}

.ryb-editor-wrap .ql-editor {

  min-height: 200px;

  max-height: 480px;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  padding: var(--space-4, 16px) var(--space-5, 20px);

  line-height: 1.65;

  color: var(--c-text);

}

.ryb-editor-wrap .ql-editor.ql-blank::before {

  color: var(--c-text-dim);

  font-style: normal;

  left: var(--space-5, 20px);

  right: var(--space-5, 20px);

}



/* Icons & colors */

.ryb-editor-wrap .ql-snow .ql-stroke { stroke: var(--c-text-mute); }

.ryb-editor-wrap .ql-snow .ql-fill { fill: var(--c-text-mute); }

.ryb-editor-wrap .ql-snow button:hover .ql-stroke,

.ryb-editor-wrap .ql-snow button.ql-active .ql-stroke { stroke: var(--c-green-dark); }

.ryb-editor-wrap .ql-snow button:hover .ql-fill,

.ryb-editor-wrap .ql-snow button.ql-active .ql-fill { fill: var(--c-green-dark); }



/* Link tooltip */

.ryb-editor-wrap .ql-snow .ql-tooltip {

  border: 1px solid var(--c-border);

  border-radius: var(--r-sm);

  box-shadow: var(--sh-2);

  font-family: var(--f-ui);

  background: var(--c-surface);

  color: var(--c-text);

  z-index: 20;

  padding: 8px 12px;

}

.ryb-editor-wrap .ql-snow .ql-tooltip input[type=text] {

  border: 1px solid var(--c-border);

  border-radius: var(--r-xs);

  background: var(--c-surface-2);

  color: var(--c-text);

  padding: 6px 10px;

}

.ryb-editor-wrap .ql-snow .ql-tooltip a.ql-action,

.ryb-editor-wrap .ql-snow .ql-tooltip a.ql-remove {

  color: var(--c-link);

}



/* Drag-and-drop highlight */

.ryb-editor-wrap.ryb-editor-wrap--drag .ql-editor {

  outline: 2px dashed var(--c-green);

  outline-offset: -4px;

  background: var(--c-green-soft);

}



/* Meta row below editor */

.ryb-editor-meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-3);

  margin-top: var(--space-3);

  font-size: var(--fs-12);

  color: var(--c-text-mute);

}

.ryb-editor-meta__count.is-warn { color: var(--c-clay); }



/* Preview panel */

.ryb-editor-preview {

  margin-top: var(--s-3);

  padding: var(--s-3) var(--s-4);

  border: 1px dashed var(--c-border);

  border-radius: var(--r-sm);

  background: var(--c-surface-2);

}

.ryb-editor-preview__label {

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--c-text-dim);

  margin-bottom: var(--s-2);

}



/* Content inside editor & posts */

.ryb-editor-wrap .ql-editor blockquote {

  border-left: 3px solid var(--c-green);

  padding-left: var(--s-4);

  margin: var(--s-3) 0;

  color: var(--c-text-2);

}



.post-body .video-embed,

.ryb-editor-wrap .video-embed,

.ql-editor .video-embed {

  position: relative;

  width: 100%;

  max-width: 640px;

  margin: var(--s-4) 0;

  border-radius: var(--r-sm);

  overflow: hidden;

  background: #000;

  aspect-ratio: 16 / 9;

}

.post-body .video-embed iframe,

.ryb-editor-wrap .video-embed iframe,

.ql-editor .video-embed iframe {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  border: 0;

}



.post-body img,

.ryb-editor-wrap .ql-editor img {

  max-width: 100%;

  height: auto;

  border-radius: var(--r-sm);

  margin: var(--s-2) 0;

}



/* Reply composer — slightly shorter */

.composer .ryb-editor-wrap .ql-container.ql-snow,

.composer .ryb-editor-wrap .ql-editor {

  min-height: 160px;

}



@media (max-width: 767px) {

  .ryb-editor-wrap .ql-container.ql-snow,

  .ryb-editor-wrap .ql-editor {

    max-height: 50vh;

  }

}



@media (max-width: 640px) {

  .ryb-editor-wrap .ql-toolbar.ql-snow {

    flex-wrap: nowrap;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    padding: var(--s-2) var(--s-2);

  }

  .ryb-editor-wrap .ql-toolbar.ql-snow::-webkit-scrollbar { display: none; }

  .ryb-editor-wrap .ql-toolbar.ql-snow .ql-formats { flex-shrink: 0; }

  .ryb-editor-wrap .ql-toolbar.ql-snow .ql-formats:not(:last-child)::after { display: none; }

}



@media (max-width: 480px) {

  .card--editor { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

}