/* ===============================================================
   Quill Editor — override skin agar sesuai desain Jetonomy/Dictio
   Tambahkan ke jetonomy-custom.css (atau enqueue terpisah)
   =============================================================== */

/* Wrap container */
.jt-quill-wrap {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* Toolbar */
.jt-quill-toolbar.ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid #e8e8e8;
  background: #fafafa;
  padding: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.jt-quill-toolbar .ql-formats {
  margin-right: 4px;
}

/* Tombol toolbar */
.jt-quill-toolbar .ql-toolbar button,
.jt-quill-toolbar button.jt-ql-image,
.jt-quill-toolbar button.jt-ql-html {
  width: 28px !important;
  height: 28px !important;
  padding: 4px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #555 !important;
  transition: background .12s, color .12s;
}

.jt-quill-toolbar .ql-toolbar button:hover,
.jt-quill-toolbar button.jt-ql-image:hover,
.jt-quill-toolbar button.jt-ql-html:hover {
  background: #eef2ff !important;
  color: #4f46e5 !important;
}

.jt-quill-toolbar .ql-toolbar button.ql-active {
  background: #eef2ff !important;
  color: #4f46e5 !important;
}

/* Stroke & fill SVG icon Quill */
.jt-quill-toolbar .ql-toolbar button .ql-stroke {
  stroke: currentColor !important;
}
.jt-quill-toolbar .ql-toolbar button .ql-fill,
.jt-quill-toolbar .ql-toolbar button .ql-even.ql-fill {
  fill: currentColor !important;
}

/* Dropdown header */
.jt-quill-toolbar .ql-header.ql-picker {
  color: #555;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
}
.jt-quill-toolbar .ql-picker-label {
  border: 1px solid #e8e8e8 !important;
  border-radius: 6px !important;
  padding: 0 8px !important;
  height: 28px !important;
  line-height: 26px !important;
}
.jt-quill-toolbar .ql-picker-options {
  border-radius: 8px !important;
  border: 1px solid #e8e8e8 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
}

/* Area tulis */
.jt-quill-wrap .ql-container.ql-snow {
  border: none !important;
  font-family: inherit;
  font-size: 14px;
}

.jt-quill-wrap .ql-editor {
  min-height: 160px;
  padding: 12px 14px;
  line-height: 1.6;
  color: #111;
}

/* Reply composer sedikit lebih pendek */
.jt-editor .jt-quill-wrap .ql-editor {
  min-height: 110px;
}

.jt-quill-wrap .ql-editor.ql-blank::before {
  color: #aaa;
  font-style: normal;
  left: 14px;
}

/* Blockquote */
.jt-quill-wrap .ql-editor blockquote {
  border-left: 3px solid #4f46e5;
  margin: 8px 0;
  padding: 4px 12px;
  background: #eef2ff;
  border-radius: 0 6px 6px 0;
  color: #555;
}

/* Gambar di dalam editor */
.jt-quill-wrap .ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 6px 0;
}

/* Mobile */
@media (max-width: 600px) {
  .jt-quill-toolbar.ql-toolbar.ql-snow {
    padding: 5px 6px;
  }
  .jt-quill-wrap .ql-editor {
    min-height: 120px;
    font-size: 15px; /* sedikit lebih besar untuk touch */
  }
  .jt-editor .jt-quill-wrap .ql-editor {
    min-height: 90px;
  }
}