.lbn-player-note-button { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; margin-left: 0.35rem; padding: 0; border: 1px solid var(--color-border-light-primary, #7a695a); border-radius: 4px; background: rgba(0, 0, 0, 0.18); color: var(--color-text-light-highlight, #f0f0e0); cursor: pointer; } .lbn-player-note-button:hover { background: rgba(255, 255, 255, 0.12); } .lbn-notes-window { position: fixed; z-index: 100000; left: 140px; top: 120px; width: 420px; height: 330px; min-width: 260px; min-height: 180px; display: flex; flex-direction: column; resize: both; overflow: hidden; border: 1px solid var(--color-border-dark, #000); border-radius: 6px; background: var(--color-bg, #1f1f1f); box-shadow: 0 0 16px rgba(0, 0, 0, 0.55); } .lbn-notes-window[hidden] { display: none; } .lbn-titlebar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2rem; padding: 0.25rem 0.4rem; background: rgba(0, 0, 0, 0.34); color: var(--color-text-light-highlight, #f0f0e0); cursor: move; user-select: none; } .lbn-title, .lbn-controls { display: inline-flex; align-items: center; gap: 0.4rem; } .lbn-status { opacity: 0.75; font-size: 0.78rem; white-space: nowrap; } .lbn-controls button { width: 1.55rem; height: 1.55rem; padding: 0; border: 1px solid var(--color-border-light-primary, #7a695a); border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; } .lbn-controls button:hover { background: rgba(255, 255, 255, 0.16); } .lbn-textarea { flex: 1 1 auto; width: 100%; min-height: 0; box-sizing: border-box; resize: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 0.65rem; font-family: var(--font-primary, sans-serif); font-size: 0.95rem; line-height: 1.4; color: var(--color-text-light-highlight, #f0f0e0); background: rgba(255, 255, 255, 0.045); outline: none; }