/* Styles for the Notes component (extracted from inline styles) */
.notes-card { display: flex; flex-direction: column; color: var(--text-color-dark); padding-left: 12px; max-height: 100%; border-left: 1px solid #e6e9ee; }

.notes-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }

.notes-title { font-size: 1.05rem; font-weight: 700; margin: 0; }

.notes-messages { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; gap: 18px; max-height: 100%; padding-right: 8px; /* room for the scrollbar */ }

.note-item { display: flex; gap: 12px; align-items: flex-start; }

    .note-item.me { flex-direction: row-reverse; }

.note-avatar { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; font-size: 0.95rem; }

.avatar-a { background: #8b5cf6; }
.avatar-j { background: #1e90ff; }

.note-content { display: flex; flex-direction: column; max-width: 72%; }

.note-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--text-color-light); font-size: 0.82rem; margin-bottom: 6px; }

.note-bubble { background: #f3f4f6; padding: 12px 14px; border-radius: 12px; color: var(--text-color-dark); line-height: 1.4; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); word-break: break-word; }

/* Slightly different bubble for "me" messages */
.note-item.me .note-bubble { background: #ffffff; border: 1px solid #eef2ff; }

/* Composer (input) */
.notes-composer { display: flex; gap: 10px; align-items: center; padding-top: 12px; margin-top: 12px; border-top: 1px solid #eef2f5; }

    .notes-composer textarea { flex: 1 1 auto; min-height: 46px; max-height: 140px; resize: none; padding: 10px 12px; border-radius: 10px; border: 1px solid #e6e9ee; font-family: var(--font-family); font-size: 0.95rem; color: var(--text-color-dark); }

.notes-send-btn { width: 44px; height: 44px; border-radius: 50%; background: #1380ff; border: none; display: inline-flex; align-items: center; justify-content: center; color: white; cursor: pointer; box-shadow: 0 6px 12px rgba(19, 128, 255, 0.16); }

    .notes-send-btn:active { transform: translateY(1px); }

/* small responsive tweak */
@media (max-width: 640px) {
    .note-content { max-width: 78%; }
}