.note-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.5rem 0; }
.note-toolbar .btn, .note-asset-chooser .btn, #note-attachments .btn {
  color:var(--white); background:var(--neutral-500, #384365); border:1px solid var(--neutral-700, #252b41);
  padding:clamp(.15rem, .35vw, .24rem) clamp(.42rem, .8vw, .68rem); border-radius:12px;
  cursor:pointer; font-size:clamp(.7rem, .88vw, .84rem); line-height:1.25; touch-action:manipulation;
}
.note-toolbar .btn { min-width:44px; min-height:44px; }
.note-asset-chooser { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
.note-asset-chooser .btn[aria-pressed="true"] { background:var(--neutral-300, #686c7c); border-color:var(--blue-300, #6ea8ff); }
#note-attachments { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.5rem; margin-top:.75rem; }
#note-attachments figure { border:1px solid var(--mist-200); border-radius:.5rem; padding:.4rem; margin:0; display:flex; flex-direction:column; gap:.35rem; min-width:0; }
#note-attachments img, #note-attachments .note-file-icon { width:100%; height:120px; object-fit:cover; border-radius:.4rem; border:1px solid var(--mist-200); }
#note-attachments .note-file-icon { display:grid; place-items:center; font-size:2.2rem; }
#note-attachments figcaption { font-size:.8rem; display:flex; justify-content:space-between; gap:.35rem; align-items:center; }
#note-attachments figcaption span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%; }