/* Djot Editor - Mobile-First */

/* Container */
.djot-editor-container { border: 1px solid #d1d5db; border-radius: 0.375rem; background: #fff; }
.djot-editor-container.fullscreen-mode { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; border-radius: 0; display: flex; flex-direction: column; }
.djot-editor-container.fullscreen-mode .djot-editor-toolbar { flex-shrink: 0; }
.djot-editor-container.fullscreen-mode .djot-editor-wrapper { flex: 1; min-height: 0; }
.djot-editor-container.fullscreen-mode .djot-editor-input,
.djot-editor-container.fullscreen-mode .djot-editor-preview { flex: 1; overflow-y: auto; }
.djot-editor-container.fullscreen-mode .djot-editor-input { resize: none; }

/* Toolbar */
.djot-editor-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem; background: #f9fafb; border-bottom: 1px solid #d1d5db; border-radius: 0.375rem 0.375rem 0 0; }
.djot-editor-btn { padding: 0.375rem 0.625rem; background: #fff; border: 1px solid #d1d5db; border-radius: 0.25rem; color: #374151; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.djot-editor-btn:hover { background: #e5e7eb; border-color: #9ca3af; }
.djot-editor-btn:active, .djot-editor-btn.active { background: #dbeafe; border-color: #3b82f6; color: #1d4ed8; }
.djot-editor-separator { color: #d1d5db; padding: 0 0.25rem; user-select: none; display: inline-flex; align-items: center; }

/* Wrapper & Split Mode */
.djot-editor-wrapper { display: flex; position: relative; }
.djot-editor-wrapper.split-mode { display: grid; grid-template-columns: 1fr 1fr; }
.djot-editor-wrapper.split-mode .djot-editor-input { border-right: 1px solid #d1d5db; border-radius: 0; overflow-y: auto; }
.djot-editor-wrapper.split-mode .djot-editor-preview { border-radius: 0; }

/* Input & Preview */
.djot-editor-input { width: 100%; padding: 1rem; border: none; border-radius: 0 0 0.375rem 0.375rem; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.875rem; line-height: 1.65; color: #374151; resize: vertical; outline: none; background: #fff; }
.djot-editor-input:focus { box-shadow: 0 0 0 2px #3b82f6; }
.djot-editor-preview { width: 100%; padding: 1rem; overflow-y: auto; background: #fff; border-radius: 0 0 0.375rem 0.375rem; }

/* Monospace Mode */
.djot-editor-container.monospace-mode .djot-editor-input { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.djot-editor-container.monospace-mode #font-btn { background: #dbeafe; border-color: #3b82f6; }

/* Scrollbars (WebKit) */
.djot-editor-input::-webkit-scrollbar, .djot-editor-preview::-webkit-scrollbar { width: 8px; height: 8px; }
.djot-editor-input::-webkit-scrollbar-track, .djot-editor-preview::-webkit-scrollbar-track { background: #f3f4f6; }
.djot-editor-input::-webkit-scrollbar-thumb, .djot-editor-preview::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.djot-editor-input::-webkit-scrollbar-thumb:hover, .djot-editor-preview::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Mobile */
@media (max-width: 639px) {
    .djot-editor-wrapper.split-mode { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
    .djot-editor-wrapper.split-mode .djot-editor-input { border-right: none; border-bottom: 1px solid #d1d5db; }
    .djot-editor-toolbar { gap: 0.125rem; padding: 0.375rem; }
    .djot-editor-btn { padding: 0.25rem 0.5rem; min-width: 28px; height: 28px; font-size: 0.8125rem; }
    .djot-editor-input, .djot-editor-preview { padding: 0.5rem; }
    #split-btn { display: none; }
    .fullscreen-mode #split-btn { display: inline-flex; }
    .fullscreen-mode .djot-editor-wrapper.split-mode { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .fullscreen-mode .djot-editor-wrapper.split-mode .djot-editor-input { border-right: 1px solid #d1d5db; border-bottom: none; }
}

/* Desktop */
@media (min-width: 640px) {
    .djot-editor-input, .djot-editor-preview { min-height: 300px; }
}