.blogery-editor-shell {
    --blogery-editor-border: #d7dce2;
    --blogery-editor-muted: #667085;
    --blogery-editor-surface: #f8fafc;
    --blogery-editor-primary: #1678c2;
    border: 1px solid var(--blogery-editor-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
    overflow: hidden;
}

.blogery-editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 9px;
    border-bottom: 1px solid var(--blogery-editor-border);
    background: rgba(248, 250, 252, .97);
    backdrop-filter: blur(8px);
}

.blogery-editor-toolbar[hidden] {
    display: none;
}

.blogery-editor-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding-right: 6px;
    margin-right: 2px;
    border-right: 1px solid var(--blogery-editor-border);
}

.blogery-editor-toolbar-group:last-child {
    border-right: 0;
}

.blogery-editor-toolbar button,
.blogery-editor-toolbar select {
    min-width: 34px;
    min-height: 34px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #344054;
    background: transparent;
    cursor: pointer;
}

.blogery-editor-toolbar button:hover,
.blogery-editor-toolbar select:hover {
    border-color: #cbd5e1;
    background: #fff;
}

.blogery-editor-toolbar button:focus-visible,
.blogery-editor-toolbar select:focus-visible,
.blogery-tiptap-content:focus-visible,
.blogery-editor-source:focus-visible {
    outline: 3px solid rgba(22, 120, 194, .22);
    outline-offset: -1px;
}

.blogery-editor-toolbar button.is-active {
    border-color: rgba(22, 120, 194, .28);
    color: var(--blogery-editor-primary);
    background: rgba(22, 120, 194, .1);
}

.blogery-editor-toolbar button:disabled,
.blogery-editor-toolbar button.is-source-disabled {
    opacity: .42;
}

.blogery-editor-toolbar button.is-source-disabled {
    pointer-events: none;
}

.blogery-editor-toolbar select {
    min-width: 132px;
    padding: 0 28px 0 9px;
}

.blogery-editor-canvas {
    min-height: 64vh;
    max-height: 80vh;
    overflow-y: auto;
}

.tiptap-editor-standard-shell .blogery-editor-canvas,
.tiptap-editor-standard-shell .blogery-tiptap-content,
.tiptap-editor-standard-shell .blogery-editor-source {
    min-height: var(--tiptap-editor-min-height, 220px);
}

.tiptap-editor-standard-shell .blogery-editor-canvas,
.tiptap-editor-standard-shell .blogery-editor-source {
    max-height: min(70vh, 720px);
}

.tiptap-editor-standard-shell .blogery-tiptap-content,
.tiptap-editor-standard-shell .blogery-editor-source {
    padding: 18px 20px;
    font-size: 15px;
    line-height: 1.65;
}

.tiptap-editor-standard-shell.is-compact .blogery-editor-canvas,
.tiptap-editor-standard-shell.is-compact .blogery-tiptap-content,
.tiptap-editor-standard-shell.is-compact .blogery-editor-source {
    min-height: var(--tiptap-editor-min-height, 52px);
    max-height: 180px;
}

.tiptap-editor-standard-shell.is-compact .blogery-tiptap-content,
.tiptap-editor-standard-shell.is-compact .blogery-editor-source {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.45;
}

.tiptap-editor-standard-shell.is-compact {
    border-radius: 8px;
    box-shadow: none;
}

.blogery-editor-canvas[hidden] {
    display: none;
}

.blogery-tiptap-content,
.blogery-editor-source {
    min-height: 64vh;
    width: 100%;
    padding: clamp(20px, 4vw, 48px);
    border: 0;
    color: #1d2939;
    background: #fff;
    font: 400 17px/1.75 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing: border-box;
}

.blogery-editor-source {
    display: block;
    max-height: 80vh;
    resize: vertical;
    color: #d6e4ff;
    background: #101828;
    font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    tab-size: 2;
}

.blogery-editor-source[hidden] {
    display: none;
}

.blogery-tiptap-content > *:first-child {
    margin-top: 0;
}

.blogery-tiptap-content > *:last-child {
    margin-bottom: 0;
}

.blogery-tiptap-content h1,
.blogery-tiptap-content h2,
.blogery-tiptap-content h3,
.blogery-tiptap-content h4 {
    margin: 1.4em 0 .55em;
    color: #101828;
    line-height: 1.2;
}

.blogery-tiptap-content p.is-editor-empty:first-child::before {
    float: left;
    height: 0;
    color: #98a2b3;
    content: attr(data-placeholder);
    pointer-events: none;
}

.blogery-tiptap-content blockquote {
    margin: 1.25em 0;
    padding: .45em 1.25em;
    border-left: 4px solid var(--blogery-editor-primary);
    color: #475467;
    background: #f8fafc;
}

.blogery-tiptap-content pre {
    overflow-x: auto;
    padding: 16px 18px;
    border-radius: 8px;
    color: #e4e7ec;
    background: #101828;
}

.blogery-tiptap-content code {
    border-radius: 4px;
    padding: .12em .3em;
    background: #eef2f6;
}

.blogery-tiptap-content pre code {
    padding: 0;
    background: transparent;
}

.blogery-tiptap-content a {
    color: var(--blogery-editor-primary);
    text-decoration: underline;
}

.tiptap-mention {
    border-radius: 4px;
    padding: .08em .28em;
    color: #075985;
    background: #e0f2fe;
    font-weight: 600;
}

.tiptap-mention-menu {
    position: fixed;
    z-index: 100000;
    display: grid;
    min-width: 190px;
    max-width: min(360px, calc(100vw - 16px));
    max-height: 240px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(16, 24, 40, .18);
}

.tiptap-mention-option {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    color: #344054;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.tiptap-mention-menu[hidden] {
    display: none;
}

.tiptap-mention-option {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.tiptap-mention-option__handle {
    flex: 0 0 auto;
    font-weight: 600;
}

.tiptap-mention-option__name {
    min-width: 0;
    overflow: hidden;
    color: #667085;
    font-size: .92em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tiptap-mention-option:hover,
.tiptap-mention-option.is-selected {
    color: #075985;
    background: #f0f9ff;
}

.blogery-tiptap-content ul,
.blogery-tiptap-content ol {
    padding-left: 1.6em;
}

.blogery-tiptap-content .blogery-inline-image-frame,
.blogery-tiptap-content img {
    max-width: 100%;
}

.blogery-tiptap-content .blogery-inline-image-frame.ProseMirror-selectednode,
.blogery-tiptap-content img.ProseMirror-selectednode {
    outline: 4px solid rgba(22, 120, 194, .3);
}

.blogery-tiptap-content .tableWrapper {
    overflow-x: auto;
    margin: 1.5em 0;
}

.blogery-tiptap-content table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.blogery-tiptap-content th,
.blogery-tiptap-content td {
    position: relative;
    min-width: 80px;
    padding: 9px 10px;
    border: 1px solid #cbd5e1;
    vertical-align: top;
}

.blogery-tiptap-content th {
    background: #f1f5f9;
    font-weight: 650;
}

.blogery-tiptap-content .selectedCell::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    background: rgba(22, 120, 194, .12);
    pointer-events: none;
}

.blogery-editor-footer {
    display: flex;
    justify-content: flex-end;
    padding: 7px 12px;
    border-top: 1px solid var(--blogery-editor-border);
    color: var(--blogery-editor-muted);
    background: var(--blogery-editor-surface);
    font-size: 12px;
}

.blogery-editor-count.is-near-limit {
    color: #b54708;
}

.blogery-editor-count.is-over-limit {
    color: #b42318;
    font-weight: 700;
}

@media (max-width: 767px) {
    .blogery-editor-toolbar {
        position: static;
    }

    .blogery-editor-toolbar-group {
        padding-right: 3px;
        border-right: 0;
    }

    .blogery-editor-toolbar select {
        min-width: 112px;
    }

    .blogery-tiptap-content,
    .blogery-editor-source {
        min-height: 56vh;
        padding: 20px 16px;
    }

    .tiptap-editor-standard-shell .blogery-editor-canvas,
    .tiptap-editor-standard-shell .blogery-tiptap-content,
    .tiptap-editor-standard-shell .blogery-editor-source {
        min-height: var(--tiptap-editor-min-height, 180px);
    }

    .tiptap-editor-standard-shell.is-compact .blogery-editor-canvas,
    .tiptap-editor-standard-shell.is-compact .blogery-tiptap-content,
    .tiptap-editor-standard-shell.is-compact .blogery-editor-source {
        min-height: var(--tiptap-editor-min-height, 52px);
    }
}