/* My notes as a chat room (js/brain-notes/room.js): newest at the bottom, the message box below. */
.mt-layer.bn-room { top: var(--notes-vv-top, 0px); bottom: auto; height: var(--notes-vv-height, 100dvh); background: #fff; color: #20211f; white-space: normal; }
.bn-room [hidden] { display: none !important; }
.bn-room .bn-picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* The top bar like Circle's: plain ‹, the My notes mark and title in the middle, search on the right,
   with no background: the notes slide under it. */
.bn-head { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; height: calc(env(safe-area-inset-top, 0px) + 52px); box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); background: none; pointer-events: none; }
.bn-head > * { pointer-events: auto; }
.bn-list { padding-top: calc(env(safe-area-inset-top, 0px) + 52px); }
.bn-room:has(.bn-find:not([hidden])) .bn-list { padding-top: 0; }
.bn-icon, .bn-room .mt-back { justify-self: center; width: 44px; height: 44px; border: 0; border-radius: 0; background: none; color: #20211f; display: grid; place-items: center; padding: 0; font: inherit; cursor: pointer; }
.bn-title { justify-self: center; min-width: 0; display: flex; align-items: center; gap: 8px; }
.bn-title strong { font-size: 17px; font-weight: 600; }
.bn-title-mark { flex: none; }
.bn-find { flex: none; padding: calc(env(safe-area-inset-top, 0px) + 58px) 14px 8px; border-bottom: 1px solid #f0efea; background: #fff; }
.bn-find-box { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: #f2f2f0; color: #9a9b94; }
.bn-find-box input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: #20211f; outline: none; }
.bn-find-tags { display: flex; gap: 8px; margin: 10px -14px 0; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.bn-find-tags::-webkit-scrollbar { display: none; }
.bn-chip { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #f6f5f2; color: #20211f; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.bn-chip.is-on { background: #20211f; color: #fff; }
.bn-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #9a9b94); }

.bn-list { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bn-stream { margin-top: auto; width: 100%; max-width: 640px; box-sizing: border-box; margin-left: auto; margin-right: auto; padding: 0 16px 24px; }
.bn-day { margin: 14px 0 4px; text-align: center; }
.bn-day span { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #f2f2f0; color: #6c6d67; font-size: 12px; font-weight: 600; }
.bn-earlier { margin: 12px 0 0; text-align: center; }
.bn-earlier button, .bn-none button { border: 0; background: none; color: #2563eb; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.bn-none { margin: 40px 0; text-align: center; color: #6c6d67; font-size: 15px; }
.bn-empty { display: grid; justify-items: center; gap: 8px; margin: 40px auto 24px; max-width: 300px; text-align: center; }
.bn-empty-icon { width: 56px; height: 56px; border-radius: 18px; background: #f6f5f2; color: #6c6d67; display: grid; place-items: center; }
.bn-empty strong { font-size: 17px; font-weight: 650; }
.bn-empty p { margin: 0; color: #6c6d67; font-size: 14.5px; line-height: 1.45; }

.bn-note { padding: 12px 0; }
.bn-note + .bn-note { border-top: 1px solid #f0efea; }
.bn-note.is-pending { opacity: .55; }
.bn-note-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.bn-tag, .bn-addtag { min-width: 0; max-width: 62%; height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bn-tag { border: 0; background: #f6f5f2; color: #20211f; }
.bn-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-addtag { gap: 5px; border: 1.5px dashed #cfcfca; background: #fff; color: #6c6d67; }
.bn-when { flex: none; display: flex; align-items: center; gap: 4px; color: #9a9b94; font-size: 12.5px; white-space: nowrap; }
.bn-dots { width: 32px; height: 32px; margin-right: -7px; border: 0; background: none; color: #b0b1aa; display: grid; place-items: center; padding: 0; cursor: pointer; }
.bn-source { margin: 6px 0 0; color: #9a9b94; font-size: 12.5px; }
.bn-text { margin: 8px 0 0; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Photos: Row slides sideways to the screen's edges; Grid shows them all as squares. */
.bn-photos { margin-top: 10px; }
.bn-photos.is-row { display: flex; gap: 6px; margin-left: -16px; margin-right: -16px; padding: 0 16px; overflow-x: auto; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.bn-photos.is-row::-webkit-scrollbar { display: none; }
.bn-photo { flex: none; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #f2f2f0; cursor: zoom-in; }
.bn-photos.is-row .bn-photo { height: 150px; width: calc(150px * var(--a, 1)); }
.bn-photos.is-row .bn-photo:only-child { height: 220px; width: min(100%, calc(220px * var(--a, 1))); }
.bn-photo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.bn-photos.is-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 300px; }
.bn-photos.is-grid.is-3 { grid-template-columns: repeat(3, 1fr); max-width: 380px; }
.bn-photos.is-grid .bn-photo { aspect-ratio: 1; border-radius: 12px; }

.bn-place, .bn-link, .bn-file { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: inherit; text-decoration: none; }
.bn-place { padding: 8px; border: 1px solid #ecebe6; border-radius: 16px; background: #fff; }
.bn-map { flex: none; position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #e7efe5; }
.bn-map > svg { display: block; }
.bn-map-pin { position: absolute; left: 21px; top: 13px; color: #e8794f; }
.bn-card-words { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bn-card-words strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-card-words small { font-size: 13px; color: #6c6d67; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-card-words em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #2563eb; }
.bn-link, .bn-file { gap: 10px; padding: 10px 12px; border-radius: 14px; background: #f6f5f2; }
.bn-card-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #20211f; color: #fff; display: grid; place-items: center; }
.bn-file .bn-card-icon { background: #3b82f6; }

.bn-checklist { list-style: none; margin: 6px 0 0; padding: 0; }
.bn-check { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 10px; padding: 2px 0; border: 0; background: none; color: #20211f; font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; }
.bn-tick { flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #cfcfca; border-radius: 50%; color: transparent; display: grid; place-items: center; }
.bn-check.is-done .bn-tick { border: 0; background: #10a37f; color: #fff; }
.bn-check.is-done > span:last-child { color: #9a9b94; text-decoration: line-through; }

/* The message box: + on the left, send on the right; photos sit tiny inside the box until sent. */
.bn-dock { flex: none; position: relative; background: #fff; border-top: 1px solid #f0efea; padding-bottom: env(safe-area-inset-bottom, 0px); }
html.bn-keyboard .bn-dock { padding-bottom: 0; }
.bn-editing { display: flex; align-items: center; justify-content: space-between; max-width: 640px; margin: 0 auto; padding: 8px 16px 0; color: #6c6d67; font-size: 13px; font-weight: 600; }
.bn-editing button { border: 0; background: none; padding: 4px 0; color: #2563eb; font: inherit; font-weight: 600; cursor: pointer; }
.bn-bar { display: flex; align-items: flex-end; gap: 8px; max-width: 640px; margin: 0 auto; padding: 10px 12px; box-sizing: border-box; }
.bn-plus, .bn-send { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; }
.bn-plus { background: #f2f2f0; color: #30343a; transition: transform .18s ease, background-color .18s ease; }
.bn-plus[aria-expanded="true"] { background: #20211f; color: #fff; transform: rotate(45deg); }
.bn-send { background: #20211f; color: #fff; }
.bn-send:disabled { background: #e7e6e1; cursor: default; }
.bn-box { flex: 1; min-width: 0; border: 1px solid #e7e6e1; border-radius: 20px; background: #fafaf8; }
.bn-box textarea { display: block; width: 100%; min-height: 38px; max-height: 140px; box-sizing: border-box; padding: 8px 14px; border: 0; background: none; color: #20211f; font: inherit; font-size: 16px; line-height: 1.4; resize: none; outline: none; overflow-y: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.bn-attach { display: flex; gap: 10px; padding: 10px 10px 2px; overflow-x: auto; scrollbar-width: none; }
.bn-attach::-webkit-scrollbar { display: none; }
.bn-thumb { position: relative; flex: none; width: 52px; height: 52px; border-radius: 10px; background: #eceae4; }
.bn-thumb img { display: block; width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.bn-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; background: #20211f; color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; }
.bn-att { position: relative; flex: none; max-width: 210px; height: 52px; box-sizing: border-box; padding: 0 22px 0 10px; border-radius: 12px; background: #f0efea; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.bn-att > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-att.is-busy { color: #6c6d67; }
.bn-ci-list { padding: 0 8px 8px 14px; }
.bn-ci { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.bn-ci-dot { flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid #cfcfca; border-radius: 50%; }
.bn-ci input { flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none; color: #20211f; font: inherit; font-size: 16px; outline: none; }
.bn-ci-remove { flex: none; width: 28px; height: 28px; border: 0; background: none; color: #9a9b94; display: grid; place-items: center; padding: 0; cursor: pointer; }
.bn-ci-add { border: 0; background: none; padding: 6px 0 2px; color: #2563eb; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* Under the box: the + tray, or the small Place / Link panel. */
.bn-panel { max-width: 640px; margin: 0 auto; padding: 4px 16px 14px; box-sizing: border-box; }
.bn-tray { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 14px; padding-top: 6px; }
.bn-tray button { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #20211f; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.bn-tray-icon { width: 56px; height: 56px; border-radius: 18px; background: #f6f5f2; color: var(--c); display: grid; place-items: center; }
.bn-panel-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; }
.bn-panel-head strong { font-size: 16px; font-weight: 650; }
.bn-panel-head button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f2f2f0; color: #30343a; display: grid; place-items: center; padding: 0; cursor: pointer; }
.bn-input { display: block; width: 100%; height: 44px; box-sizing: border-box; margin-bottom: 8px; padding: 0 12px; border: 1px solid #e7e6e1; border-radius: 12px; background: #fafaf8; color: #20211f; font: inherit; font-size: 16px; outline: none; }
.bn-input:focus { border-color: #20211f; }
.bn-hits { max-height: min(240px, 34vh); overflow-y: auto; }
.bn-hits button { width: 100%; display: grid; gap: 2px; padding: 10px 2px; border: 0; border-top: 1px solid #f0efea; background: none; color: #20211f; font: inherit; text-align: left; cursor: pointer; }
.bn-hits strong { font-size: 15px; font-weight: 600; }
.bn-hits small { font-size: 13px; color: #6c6d67; }
.bn-panel-error { margin: 0 0 8px; color: #b42318; font-size: 13.5px; }
.bn-panel-add { height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: #20211f; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.bn-panel > .bn-panel-add { width: 100%; }

/* ⋯ on a note: a sheet inside the page, so its New tag field stays above the keyboard. */
.bn-scrim { position: absolute; inset: 0; z-index: 5; background: rgb(20 20 18 / .32); opacity: 0; transition: opacity .2s; }
.bn-scrim.show { opacity: 1; }
.bn-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-width: 560px; max-height: 88%; margin: 0 auto; overflow-y: auto; box-sizing: border-box; padding: 8px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -10px 30px rgb(0 0 0 / .12); transform: translateY(24px); opacity: 0; transition: transform .25s ease, opacity .2s; }
.bn-sheet.show { transform: translateY(0); opacity: 1; }
html.bn-keyboard .bn-sheet { padding-bottom: 14px; }
.bn-grabber { display: block; width: 38px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: #dedcd6; }
.bn-sh-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bn-sh-head strong { font-size: 17px; }
.bn-sh-head button { padding: 6px 2px; border: 0; background: none; color: #2563eb; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.bn-sh-label { margin: 0 0 8px; color: #6c6d67; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.bn-seg { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; padding: 3px; border-radius: 12px; background: #f2f2f0; }
.bn-seg button { height: 36px; border: 0; border-radius: 10px; background: none; color: #6c6d67; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.bn-seg button[aria-pressed="true"] { background: #fff; color: #20211f; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.bn-sh-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bn-sh-tags .bn-chip { height: 34px; font-size: 14px; }
.bn-newtag { gap: 5px; border: 1.5px dashed #cfcfca; background: #fff; color: #6c6d67; }
.bn-newtag-form { display: flex; gap: 8px; width: 100%; }
.bn-newtag-form .bn-input { flex: 1; margin: 0; }
.bn-use { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 2px; border: 0; border-top: 1px solid #f0efea; background: none; color: #20211f; font: inherit; text-align: left; cursor: pointer; }
.bn-use-icon { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.bn-use-icon.is-circle { background: #f2f6f8; }
.bn-use-icon.is-meet { background: #fff1ea; color: #e8794f; }
.bn-use-words { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bn-use-words strong { font-size: 16px; font-weight: 600; }
.bn-use-words small { color: #6c6d67; font-size: 13px; line-height: 1.35; }
.bn-use > svg { flex: none; color: #b0b1aa; }
.bn-sh-rows { margin-top: 8px; }
.bn-sh-rows button { width: 100%; height: 48px; display: flex; align-items: center; padding: 0 2px; border: 0; border-top: 1px solid #f0efea; background: none; color: #20211f; font: inherit; font-size: 16px; cursor: pointer; }
.bn-sh-rows button.danger { color: #b42318; }
.bn-sh-confirm { margin-top: 8px; padding-top: 12px; border-top: 1px solid #f0efea; }
.bn-sh-confirm p { margin: 0 0 10px; font-size: 15px; }
.bn-sh-confirm div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bn-sh-confirm button { height: 44px; border: 0; border-radius: 12px; background: #f2f2f0; color: #20211f; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.bn-sh-confirm button.danger { background: #b42318; color: #fff; }