/* as-notes.css — Notes timeline component (v0.1.17) */

.as-notes-timeline { margin-top: 4px; }
.as-notes-add { margin-bottom: 12px; display: flex; flex-direction: column; }
/* v0.9.43: composer rules scoped with #as-app so their padding beats the global
 * reset `#as-app * { padding:0 }` (specificity 100 vs the old unscoped 10). */
#as-app .as-note-input {
    width: 100%; padding: 8px 10px; border: 1px solid var(--b); border-radius: var(--rs);
    font-family: inherit; font-size: 12px; resize: vertical; background: var(--inp-bg); color: var(--t1);
}
.as-note-submit { align-self: flex-end; }

/* v0.8.63: moderate rich-text editor for notes */
#as-app .as-note-toolbar {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    padding: 4px 4px; border: 1px solid var(--b); border-bottom: none;
    border-radius: var(--rs) var(--rs) 0 0; background: var(--sa);
}
#as-app .as-note-tb-btn {
    min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid transparent;
    background: none; cursor: pointer; font-size: 12px; line-height: 1; color: var(--t2);
    border-radius: 4px; font-family: inherit;
}
#as-app .as-note-tb-btn:hover { background: var(--inp-bg); color: var(--t1); border-color: var(--b); }
#as-app .as-note-tb-btn b, #as-app .as-note-tb-btn i, #as-app .as-note-tb-btn u { pointer-events: none; }
.as-note-tb-sep { width: 1px; align-self: stretch; margin: 3px 4px; background: var(--b); }
#as-app .as-note-rte {
    width: 100%; min-height: 76px; max-height: 260px; overflow-y: auto;
    padding: 11px 13px; border: 1px solid var(--b); border-radius: 0 0 var(--rs) var(--rs);
    font-family: inherit; font-size: 12px; line-height: 1.55; background: var(--inp-bg); color: var(--t1);
    box-sizing: border-box;
}
#as-app .as-note-rte:focus { outline: none; border-color: var(--ac); }
#as-app .as-note-rte:empty:before {
    content: attr(data-ph); color: var(--t3); pointer-events: none;
}
.as-note-rte ul, .as-note-rte ol { margin: 4px 0 4px 20px; padding: 0; }
.as-note-rte a { color: var(--bl); }

/* Rendered note content: lists + links visible (content is HTML now) */
.as-note-content ul, .as-note-content ol { margin: 4px 0 4px 20px; padding: 0; }
.as-note-content li { margin: 1px 0; }
.as-note-content a { color: var(--bl); word-break: break-word; }
.as-note-content p { margin: 0 0 6px; }
.as-note-content p:last-child { margin-bottom: 0; }
.as-notes-list { display: flex; flex-direction: column; gap: 8px; }
.as-note-item {
    display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--b);
}
.as-note-item:last-child { border-bottom: none; }
.as-note-pinned { background: color-mix(in srgb, var(--ac) 6%, transparent); padding: 8px; border-radius: 6px; border-bottom: none; }
.as-note-avatar {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.as-note-body { flex: 1; min-width: 0; }
.as-note-meta {
    display: flex; align-items: center; gap: 8px; font-size: 11px; margin-bottom: 4px;
}
.as-note-author { font-weight: 600; color: var(--t1); }
.as-note-time { color: var(--t3); }
.as-note-pin { font-size: 10px; }
.as-note-actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.as-note-item:hover .as-note-actions { opacity: 1; }
.as-note-btn {
    background: none; border: none; cursor: pointer; font-size: 11px; padding: 2px 4px;
    color: var(--t3); border-radius: 3px;
}
.as-note-btn:hover { background: var(--sa); color: var(--t1); }
.as-note-content { font-size: 12px; color: var(--t2); line-height: 1.5; word-wrap: break-word; }