#content { flex: 1; display: flex; flex-direction: column; background-color: var(--bg-color); min-width: 0; }
#note-stream-container { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; }
#note-stream { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }

.empty-state { 
    color: var(--secondary-color); 
    text-align: center; 
    margin-top: 2rem;
    width: 100%;
}

.note {
    display: grid;
    grid-template-columns: 95px 1fr auto;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    align-items: center;
    background-color: var(--card-bg);
    position: relative;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.note .timestamp { color: var(--timestamp-color); font-family: var(--font-mono); font-size: 0.85rem; padding-right: 0.5rem; }

/* Content wrapper: holds span + overlay textarea, locks size during editing */
.content-wrapper { position: relative; min-height: 1.4em; }
.content-wrapper .content { word-break: break-word; padding-left: 0.5rem; overflow: hidden; line-height: 1.4; display: block; transition: opacity 0.15s; white-space: pre-wrap; }

/* Edit textarea: absolutely positioned over the span — zero layout shift */
.edit-area {
    position: absolute; inset: 0;
    margin: 0;
    padding: inherit;
    border: none; border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit; font-size: inherit; line-height: inherit;
    letter-spacing: inherit; text-transform: inherit; text-align: inherit;
    resize: none; overflow: auto;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
    display: none;
    transition: opacity 0.15s;
}

.note.editing .content-wrapper .content { opacity: 0; pointer-events: none; }
.note.editing .content-wrapper .edit-area { display: block; opacity: 1; }

.note-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s; margin-left: 0.5rem; justify-content: flex-end; }
.note:hover .note-actions { opacity: 1; }
.note.editing .note-actions { opacity: 1; }