/* V47 — Flomo-inspired structure using the user's existing features; no copied assets. */
:root{--nav:0px}
body{background:#f8f9f8}
.app-shell{background:#f8f9f8}
.flomo-topbar{z-index:14;position:relative;display:flex;flex:0 0 78px;height:78px;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 18px 0;background:#f8f9f8}
.flomo-topbar-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#292d2a;box-shadow:0 5px 18px rgba(15,25,18,.035)}
.flomo-topbar-btn svg{width:23px;height:23px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.flomo-header-title{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:720;letter-spacing:-.5px;padding:10px 5px;color:#303633}
.flomo-header-title svg{width:14px;height:14px;stroke:#969d98;fill:none;stroke-width:2}
body.mobile-editor-open .flomo-topbar{display:none}
#notesView>.sidebar>.section-header{display:none}
#notesView:has(.note-list.selecting)>.sidebar>.section-header{display:flex}
#notesView .sidebar{width:100%}
#notesView .note-list{padding:6px 2px 85px;gap:12px}
#notesView .note-row{box-shadow:0 1px 8px rgba(20,30,25,.018);border-radius:16px}
#notesView .note-row-front{min-height:84px}
#notesView .note-item{padding:19px 18px}
#notesView .note-title{font-size:15.5px;line-height:1.75;font-weight:500;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
#notesView .note-excerpt{font-size:14px;line-height:1.65;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
#notesView .note-date{font-size:12px;color:#aaa}
body:not(.mobile-editor-open) .app-shell .view{padding-bottom:calc(env(safe-area-inset-bottom) + 95px)}
body[data-view="notes"] #bottomDock{display:none!important}
body[data-view="notes"] #bottomDock:has(#noteSelectionBar:not([hidden])){display:block!important;bottom:0}
body[data-view="notes"] #bottomDock #normalDockRow{display:none!important}
body[data-view="notes"] #notesView .sidebar{display:block}
body[data-view="notes"] #notesView.mobile-editor-open .sidebar{display:none}
body[data-view="notes"] #notesView.mobile-editor-open .editor-area{display:flex}
body[data-view="notes"] #notesView.mobile-editor-open{padding:0}
body:not([data-view="notes"]) #bottomDock{bottom:env(safe-area-inset-bottom)}
body:not([data-view="notes"]) .view{padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom) + 20px)}
body:not([data-view="notes"]) .flomo-fab{display:none!important}
.flomo-fab{position:absolute;right:23px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:15;width:55px;height:55px;border-radius:18px;background:#29c980;color:#fff;font-size:37px;font-weight:300;box-shadow:0 6px 17px rgba(13,145,83,.2);display:grid;place-items:center}
.flomo-fab[hidden]{display:none!important}
body.mobile-editor-open .flomo-fab,body.flomo-composing .flomo-fab,body.workspace-open .flomo-fab,body.search-open .flomo-fab{display:none!important}
.flomo-sidebar-backdrop,.flomo-tag-backdrop{position:absolute;inset:0;z-index:50;background:rgba(16,21,18,.36)}
.flomo-sidebar{position:absolute;inset:0 auto 0 0;z-index:51;width:min(305px,84vw);padding:calc(env(safe-area-inset-top) + 26px) 17px calc(env(safe-area-inset-bottom) + 28px);background:#fff;box-shadow:12px 0 45px rgba(0,0,0,.11);display:flex;flex-direction:column;gap:7px}
.flomo-sidebar[hidden],.flomo-sidebar-backdrop[hidden],.flomo-tag-backdrop[hidden],.flomo-tag-panel[hidden]{display:none!important}
.flomo-sidebar-heading{display:flex;align-items:center;justify-content:space-between;padding:0 8px 28px;font-size:23px;font-weight:720}
.flomo-sidebar-heading button{font-size:30px;color:#8c918d;width:38px;height:38px}
.flomo-sidebar-nav{display:flex;flex-direction:column;gap:5px}
.flomo-sidebar-item{display:flex;align-items:center;gap:14px;text-align:left;width:100%;height:51px;padding:0 15px;border-radius:14px;color:#353d37;font-size:16px}
.flomo-sidebar-item svg{height:21px;width:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.flomo-sidebar-item.active{background:#eef8f1;color:#159960;font-weight:650}
.flomo-sidebar-item:active{background:#f1f3f1}
.flomo-sidebar-spacer{flex:1}
.flomo-sidebar-settings{border-top:1px solid #f1f2ef;padding-top:14px;border-radius:0}
.flomo-tag-backdrop{z-index:54;background:rgba(18,25,20,.16)}
.flomo-tag-panel{position:absolute;z-index:55;left:17px;right:17px;top:calc(env(safe-area-inset-top) + 75px);max-height:min(65vh,570px);overflow:hidden;background:#fff;border-radius:20px;box-shadow:0 18px 42px rgba(0,0,0,.12)}
.flomo-tag-title{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font-size:16px;font-weight:700}
.flomo-tag-title button{width:32px;height:32px;font-size:23px;color:#777}
.flomo-tag-list{max-height:min(50vh,430px);overflow-y:auto;padding:0 10px 13px}
.flomo-tag-option{height:48px;width:100%;padding:0 16px;text-align:left;border-radius:11px;color:#465048;font-size:15px}
.flomo-tag-option:active{background:#f0f7f1}
.flomo-tags-empty{color:#999;font-size:13px;padding:12px 16px 20px}
.flomo-composer-layer{position:fixed;z-index:90;left:0;right:0;top:var(--viewport-top,0px);height:var(--viewport-height,100dvh);display:flex;justify-content:center;align-items:flex-end;pointer-events:auto}
.flomo-composer-layer[hidden]{display:none!important}
.flomo-composer-backdrop{position:absolute;inset:-500px 0 0;background:rgba(12,12,12,.77)}
.flomo-composer{position:relative;z-index:1;display:flex;flex-direction:column;overflow:hidden;width:min(100%,920px);height:clamp(245px,57%,490px);background:#fff;border-radius:26px 26px 0 0;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -5px 18px rgba(0,0,0,.04);transition:height 230ms cubic-bezier(.2,.8,.2,1),border-radius 200ms ease}
.flomo-composer-layer.flomo-fullscreen .flomo-composer{height:100%;border-radius:24px 24px 0 0}
.flomo-grip{height:30px;flex:0 0 30px;width:100%;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:pointer}
.flomo-grip-dots{width:34px;height:6px;border-radius:8px;background:radial-gradient(circle,#c8cdcb 1px,transparent 1.4px) 0 0/6px 6px;opacity:.72}
.flomo-composer-close{position:absolute;right:9px;top:3px;width:34px;height:30px;color:#b2b9b5;font-size:20px}
.flomo-composer-main{flex:1;min-height:0;display:flex;flex-direction:column}
.flomo-composer .quick-note,.flomo-composer .quick-note:focus-within{position:static!important;z-index:auto;width:100%;height:100%!important;max-height:none!important;min-height:0!important;display:flex;flex-direction:column;flex:1;border:none!important;box-shadow:none!important;background:#fff;border-radius:0;overflow:hidden}
.flomo-composer .quick-note textarea,.flomo-composer .quick-note:focus-within textarea{flex:1;display:block;width:100%;height:100%;min-height:0;max-height:none;resize:none;background:transparent;color:#343e37;font-size:17px;line-height:1.7;letter-spacing:.05px;padding:10px 22px 14px;overflow:auto;border:0;outline:0;box-shadow:none!important}
.flomo-composer .quick-note textarea::placeholder{color:#b5bbb6}
.flomo-composer-toolbar{height:67px;flex:0 0 67px;display:flex;align-items:center;gap:17px;padding:4px 18px;border-top:0}
.flomo-composer-toolbar button{width:40px;height:40px;display:grid;place-items:center;color:#525a55;border-radius:12px}
.flomo-composer-toolbar button:active{background:#f4f5f4}
.flomo-composer-toolbar button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.flomo-composer-spacer{flex:1}
.flomo-composer .quick-note button[type=submit]{display:none!important}
.flomo-composer-toolbar .flomo-send{flex:0 0 43px;width:43px;height:43px;border-radius:50%;background:#29c980;color:white;font-size:26px}
.flomo-composer-toolbar .flomo-send:disabled{background:#ecedec;color:#c5cac7}
.flomo-image-strip{display:flex;gap:8px;padding:0 20px 4px;max-height:62px;overflow:auto}
.flomo-image-strip[hidden]{display:none!important}
.flomo-image-thumb{width:52px;height:52px;object-fit:cover;border-radius:10px}
body.flomo-composing .flomo-topbar{pointer-events:none}
body.flomo-composing .bottom-dock{visibility:hidden}
body.flomo-composing .flomo-fab{display:none!important}
body.mobile-editor-open .flomo-topbar{display:none}
body.workspace-open .flomo-topbar{visibility:hidden}
body.search-open .flomo-topbar{visibility:hidden}
body[data-view="notes"] #notesView .note-list .note-date{order:-1}
@media(min-width:760px){.flomo-topbar{padding-left:38px;padding-right:38px}.flomo-composer{height:min(55vh,520px);border-radius:24px 24px 0 0}.flomo-tag-panel{max-width:430px;left:50%;right:auto;transform:translateX(-50%)}}
@media(max-width:759px){.flomo-topbar{flex-basis:76px;height:76px;padding:env(safe-area-inset-top) 20px 0}.flomo-composer{height:55%}.flomo-composer-layer.flomo-fullscreen .flomo-composer{height:100%}body[data-view="notes"] #notesView .sidebar{padding:0 18px}#notesView .note-list{padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){.flomo-composer{transition:none}}

/* Feed cards: date first, then the complete note preview, as in a capture-first journal. */
#notesView .note-heading{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
#notesView .note-heading .note-date{order:-1;font-weight:400}
#notesView .note-heading .note-title{width:100%}
#notesView .note-row .note-excerpt{margin-top:9px}
@media(max-width:759px){body[data-view="notes"] #notesView .sidebar{padding:0 18px}}