/* ============================================
   Vairo Notes Editor — Tiptap Simple Editor
   ============================================ */

/* Editor container */
.vairo-notes-editor {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    overflow: hidden;
}

.vairo-notes-editor--readonly {
    border-color: transparent;
    background: transparent;
}

/* Tiptap content area */
.vairo-notes-editor .tiptap {
    padding: var(--space-4) var(--space-5);
    min-height: 160px;
    outline: none;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: 1.3;
    color: var(--color-text-primary);
}

.vairo-notes-editor--compact .tiptap {
    padding: var(--space-3) var(--space-4);
    min-height: 80px;
}

/* Placeholder */
.vairo-notes-editor .tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: var(--color-text-tertiary);
    float: left;
    height: 0;
    pointer-events: none;
}

/* ============================================
   Fixed Toolbar
   ============================================ */

.vairo-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px var(--space-3);
    background: transparent;
    border-bottom: 1px solid var(--color-border-default);
    flex-wrap: wrap;
}

.vairo-toolbar-group {
    display: flex;
    align-items: center;
    gap: 1px;
}

.vairo-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--color-border-default);
    margin: 0 4px;
    flex-shrink: 0;
}

.vairo-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 100ms ease;
    position: relative;
    padding: 0;
}

.vairo-toolbar-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.vairo-toolbar-btn.active {
    color: var(--color-accent-primary);
    background: var(--color-accent-primary-subtle);
}

/* Color dot indicator under highlight/color buttons */
.vairo-toolbar-color-dot {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

/* Color dropdown */
.vairo-toolbar-dropdown-wrap {
    position: relative;
}

.vairo-toolbar-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 100;
    gap: 4px;
    flex-wrap: wrap;
    width: max-content;
}

.vairo-toolbar-dropdown.open {
    display: flex;
}

.vairo-toolbar-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 100ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.vairo-toolbar-color-swatch:hover {
    border-color: var(--color-border-strong);
    transform: scale(1.1);
}

.vairo-toolbar-color-remove {
    background: var(--color-bg-tertiary);
}

.vairo-toolbar-color-remove:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* Heading trigger button — wider to show label */
.vairo-toolbar-heading-trigger {
    width: auto !important;
    padding: 0 8px !important;
    gap: 2px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    min-width: 70px;
}

.vairo-toolbar-heading-label {
    white-space: nowrap;
}

/* Heading dropdown items */
.vairo-toolbar-heading-dropdown {
    min-width: 160px;
    padding: var(--space-1) !important;
    left: 0 !important;
    transform: none !important;
}

.vairo-toolbar-heading-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 100ms ease;
    color: var(--color-text-secondary);
}

.vairo-toolbar-heading-item:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.vairo-toolbar-heading-item.active {
    background: var(--color-accent-primary-subtle);
    color: var(--color-accent-primary);
}

.vairo-toolbar-heading-item svg {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
}

.vairo-toolbar-heading-item:hover svg,
.vairo-toolbar-heading-item.active svg {
    color: inherit;
}

/* Table controls — smaller buttons */
.vairo-toolbar-btn--sm {
    width: 28px;
    height: 28px;
}

.vairo-toolbar-btn--danger:hover {
    color: var(--color-error) !important;
    background: var(--color-error-bg) !important;
}

/* ============================================
   Editor Content Typography
   ============================================ */

.vairo-notes-editor .tiptap p {
    margin: 0 0 var(--space-1) 0;
}

.vairo-notes-editor .tiptap p:last-child {
    margin-bottom: 0;
}

.vairo-notes-editor .tiptap h1,
.vairo-notes-editor .tiptap h2,
.vairo-notes-editor .tiptap h3 {
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
    margin: var(--space-3) 0 var(--space-1) 0;
}

.vairo-notes-editor .tiptap h1:first-child,
.vairo-notes-editor .tiptap h2:first-child,
.vairo-notes-editor .tiptap h3:first-child {
    margin-top: 0;
}

.vairo-notes-editor .tiptap h1 { font-size: var(--text-xl); }
.vairo-notes-editor .tiptap h2 { font-size: var(--text-lg); }
.vairo-notes-editor .tiptap h3 { font-size: var(--text-md); }

/* Lists */
.vairo-notes-editor .tiptap ul,
.vairo-notes-editor .tiptap ol {
    margin: var(--space-1) 0;
    padding-left: var(--space-6);
}

.vairo-notes-editor .tiptap li { margin: 2px 0; }
.vairo-notes-editor .tiptap li p { margin: 0; }

/* Task list */
.vairo-notes-editor .tiptap ul[data-type="taskList"] {
    list-style: none;
    padding-left: 0;
}

.vairo-notes-editor .tiptap ul[data-type="taskList"] li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.vairo-notes-editor .tiptap ul[data-type="taskList"] li label {
    flex-shrink: 0;
    margin-top: 3px;
}

.vairo-notes-editor .tiptap ul[data-type="taskList"] li[data-checked="true"] > div > p {
    color: var(--color-text-tertiary);
    text-decoration: line-through;
}

.vairo-notes-editor .tiptap ul[data-type="taskList"] input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent-primary);
    cursor: pointer;
}

/* Blockquote */
.vairo-notes-editor .tiptap blockquote {
    margin: var(--space-2) 0;
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-accent-primary);
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Code */
.vairo-notes-editor .tiptap pre {
    margin: var(--space-2) 0;
    padding: var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.vairo-notes-editor .tiptap pre code {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-primary);
    background: transparent;
    padding: 0;
}

.vairo-notes-editor .tiptap code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 1px 4px;
    background: var(--color-bg-tertiary);
    border-radius: 3px;
}

/* Horizontal rule */
.vairo-notes-editor .tiptap hr {
    border: none;
    height: 1px;
    background: var(--color-border-default);
    margin: var(--space-4) 0;
}

/* Table */
.vairo-notes-editor .tiptap table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--space-2) 0;
    font-size: var(--text-sm);
}

.vairo-notes-editor .tiptap th,
.vairo-notes-editor .tiptap td {
    border: 1px solid var(--color-border-default);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    min-width: 80px;
}

.vairo-notes-editor .tiptap th {
    background: var(--color-bg-secondary);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
}

.vairo-notes-editor .tiptap .selectedCell {
    background: var(--color-accent-primary-subtle);
}

/* Inline formatting */
.vairo-notes-editor .tiptap u { text-decoration: underline; text-underline-offset: 2px; }
.vairo-notes-editor .tiptap s { text-decoration: line-through; }
.vairo-notes-editor .tiptap mark { padding: 1px 3px; border-radius: 3px; }
.vairo-notes-editor .tiptap a { color: var(--color-accent-primary); text-decoration: none; cursor: pointer; }
.vairo-notes-editor .tiptap a:hover { text-decoration: underline; }
.vairo-notes-editor .tiptap strong { font-weight: var(--font-semibold); }

/* Images */
.vairo-notes-editor .tiptap img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-2) 0;
    cursor: default;
}

.vairo-notes-editor .tiptap img.ProseMirror-selectednode {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

/* Image resize handles */
.vairo-notes-editor .tiptap .image-resizer {
    display: inline-flex;
    position: relative;
    max-width: 100%;
}

.vairo-notes-editor .tiptap .image-resizer .resize-trigger {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 12px;
    height: 12px;
    background: var(--color-accent-primary);
    border: 2px solid white;
    border-radius: 2px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 150ms ease;
}

.vairo-notes-editor .tiptap .image-resizer:hover .resize-trigger,
.vairo-notes-editor .tiptap .image-resizer.resizing .resize-trigger {
    opacity: 1;
}

/* ============================================
   Read-only rendered content (static HTML)
   ============================================ */

.note-rendered-content { font-family: var(--font-primary); font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-primary); }
.note-rendered-content p { margin: 0 0 var(--space-2) 0; }
.note-rendered-content p:last-child { margin-bottom: 0; }
.note-rendered-content h1, .note-rendered-content h2, .note-rendered-content h3 { font-weight: var(--font-semibold); color: var(--color-text-primary); margin: var(--space-3) 0 var(--space-2) 0; line-height: 1.3; }
.note-rendered-content h1 { font-size: var(--text-xl); }
.note-rendered-content h2 { font-size: var(--text-lg); }
.note-rendered-content h3 { font-size: var(--text-md); }
.note-rendered-content h1:first-child, .note-rendered-content h2:first-child, .note-rendered-content h3:first-child { margin-top: 0; }
.note-rendered-content ul, .note-rendered-content ol { margin: var(--space-2) 0; padding-left: var(--space-5); }
.note-rendered-content li { margin: 2px 0; }
.note-rendered-content ul.checklist { list-style: none; padding-left: 0; }
.note-rendered-content .checklist-item { display: flex; align-items: flex-start; gap: var(--space-2); padding: 2px 0; }
.note-rendered-content .checklist-item.checked { color: var(--color-text-tertiary); text-decoration: line-through; }
.note-rendered-content .checklist-checkbox { flex-shrink: 0; font-size: 16px; line-height: 1; margin-top: 1px; }
.note-rendered-content table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-2) 0; border: 1px solid var(--color-border-default); }
.note-rendered-content th, .note-rendered-content td { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-default); text-align: left; }
.note-rendered-content th { background: var(--color-bg-secondary); font-weight: var(--font-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-secondary); }
.note-rendered-content blockquote { margin: var(--space-2) 0; padding-left: var(--space-3); border-left: 3px solid var(--color-accent-primary); color: var(--color-text-secondary); font-style: italic; }
.note-rendered-content hr { border: none; height: 1px; background: var(--color-border-default); margin: var(--space-4) 0; }
.note-rendered-content pre { margin: var(--space-2) 0; padding: var(--space-3); background: var(--color-bg-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow-x: auto; }
.note-rendered-content pre code { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--color-text-primary); }
.note-rendered-content strong { font-weight: var(--font-semibold); }
.note-rendered-content u { text-decoration: underline; text-underline-offset: 2px; }
.note-rendered-content s { text-decoration: line-through; }
.note-rendered-content mark { padding: 1px 3px; border-radius: 3px; }
.note-rendered-content a { color: var(--color-accent-primary); text-decoration: none; }
.note-rendered-content a:hover { text-decoration: underline; }
.note-rendered-content img { max-width: 100%; height: auto; border-radius: 6px; margin: var(--space-2) 0; }