.compact-dialog.note-compose-dialog {
  width: min(1180px, calc(100vw - 48px));
  max-height: min(90dvh, calc(100dvh - 48px));
  padding: 26px 30px;
}
.note-composer-text, .note-composer-tags { min-width: 0; }
.note-editor-toolbar, .note-tag-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.note-editor-mode { display: inline-flex; gap: 4px; padding: 4px; background: #eef3ef; border: 1px solid var(--line, #dce4dc); border-radius: 10px; }
.note-editor-mode button { min-height: 36px; padding: 6px 15px; border: 0; border-radius: 7px; color: var(--muted, #68766b); background: transparent; font-size: 14px; }
.note-editor-mode button[aria-pressed="true"] { background: #fff; color: var(--primary, #315c48); box-shadow: 0 1px 4px #243e2f12; font-weight: 600; }
.note-character-count, .note-tag-count { flex: 0 0 auto; color: var(--muted, #68766b); font-size: 12px; font-variant-numeric: tabular-nums; }
.note-markdown-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.note-markdown-tools[hidden] { display: none; }
.note-markdown-tools button { min-height: 34px; padding: 6px 11px; border: 1px solid var(--line, #dce4dc); border-radius: 6px; background: #f8faf7; color: var(--text, #25352c); font-size: 13px; }
.note-markdown-tools button:hover { color: var(--primary, #315c48); background: #eef4ee; border-color: #bed0c0; }
.note-markdown-tools > span { color: var(--muted, #68766b); font-size: 12px; margin-left: 4px; }
.note-format-feedback { margin: 7px 0 0; color: #b83c3c; font-size: 12px; line-height: 1.5; }
.note-format-feedback:empty { display: none; }
.note-editor-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 16px; }
[data-note-editor-mode="markdown"] .note-editor-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.note-composer-text .note-source-field { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.note-composer-text .note-source-field > span, .note-preview-panel > h3 { margin: 0 0 9px; color: var(--muted, #68766b); font-size: 13px; font-weight: 500; }
.note-composer-text .note-source-field textarea { display: block; width: 100%; min-height: 330px; margin: 0; padding: 16px; font-size: 16px; line-height: 1.8; border-radius: 10px; resize: vertical; }
[data-note-editor-mode="markdown"] .note-source-field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.85; }
.note-preview-panel { display: flex; flex-direction: column; min-width: 0; }
.note-preview-panel[hidden] { display: none; }
.note-live-preview { min-height: 330px; max-height: 540px; height: 100%; padding: 16px 20px; border: 1px solid var(--line, #dce4dc); border-radius: 10px; background: #fbfcfa; overflow: auto; overflow-wrap: anywhere; }
.note-live-preview h1 { font-size: 24px; }
.note-mode-help, .note-tag-help { margin: 10px 0 0; color: var(--muted, #68766b); font-size: 12px; line-height: 1.6; }
.note-composer-tags { margin-top: 20px; padding: 16px 0; border-top: 1px solid var(--line, #dce4dc); border-bottom: 1px solid var(--line, #dce4dc); }
.note-tag-heading > h3 { margin: 0; font-size: 14px; font-weight: 600; }
.note-tag-heading > h3 .muted { margin-left: 5px; font-size: 12px; font-weight: 400; }
.note-selected-tags, .note-history-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.note-selected-tags { margin: 12px 0; min-height: 34px; }
.note-tag-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 5px 3px 10px; border: 1px solid #d2dfd4; border-radius: 7px; color: #315c48; background: #edf4ee; font-size: 13px; }
.note-tag-chip > span { min-width: 0; overflow-wrap: anywhere; }
.note-tag-chip > button { flex: 0 0 auto; min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #627d6c; font-size: 19px; }
.note-tag-chip > button:hover { background: #dfece1; }
.note-tag-entry-row { display: flex; gap: 8px; align-items: stretch; max-width: 460px; }
.note-tag-entry-row > input { flex: 1 1 auto; width: 0; min-width: 0; min-height: 38px; padding: 8px 11px; border: 1px solid var(--line, #dce4dc); border-radius: 7px; background: #fff; color: var(--text, #25352c); font-size: 14px; }
.note-tag-entry-row > button { flex: 0 0 auto; min-height: 38px; padding: 7px 13px; border: 1px solid #d4e0d6; border-radius: 7px; background: #f4f8f3; color: #315c48; font-size: 13px; }
.note-tag-feedback { margin: 6px 0 0; color: #b83c3c; font-size: 12px; line-height: 1.5; }
.note-tag-feedback:empty { display: none; }
.note-tag-history { margin-top: 12px; }
.note-tag-history > summary { width: fit-content; padding: 5px 0; color: var(--primary, #315c48); font-size: 13px; cursor: pointer; }
.note-history-tags { margin-top: 9px; max-height: 160px; overflow-y: auto; padding: 3px; }
.note-history-tags > button { max-width: 100%; min-height: 32px; padding: 5px 9px; border: 1px solid var(--line, #dce4dc); border-radius: 6px; background: #fff; color: #62756a; font-size: 12px; overflow-wrap: anywhere; text-align: left; }
.note-history-tags > button:hover { background: #edf4ee; color: #315c48; border-color: #b9d3c0; }
.note-tag-empty { color: var(--muted, #68766b); font-size: 12px; }
.note-composer-text button:focus-visible, .note-composer-tags button:focus-visible { outline: 2px solid var(--primary, #315c48); outline-offset: 3px; }
@media (max-width: 760px) {
  .compact-dialog.note-compose-dialog { width: min(100%, calc(100vw - 28px)); padding: 18px; max-height: calc(100dvh - 32px); }
  [data-note-editor-mode="markdown"] .note-editor-columns { grid-template-columns: minmax(0, 1fr); }
  .note-editor-toolbar { gap: 8px; flex-wrap: wrap; }
  .note-editor-mode button { padding-inline: 12px; }
  .note-composer-text .note-source-field textarea { min-height: 240px; font-size: 16px; }
  .note-live-preview { min-height: 200px; max-height: 320px; padding: 14px; }
  .note-tag-entry-row { max-width: none; }
}