/* VibeNoter widget — isolated under #vibenoter-root; must never depend on app styles. Design source: Documents/Mocks/01-widget-capture.html. Light theme, no left colour bars. */ #vibenoter-root { --vn-line:#e6e3dc; --vn-ink:#20242b; --vn-mut:#6f7480; --vn-amber:#b45309; --vn-amber-bg:#fef3e2; font:14px/1.5 -apple-system,'Segoe UI',Roboto,sans-serif; color:var(--vn-ink); } /* ONE ACCENT PER KIND. Set on the root by `setKind`, so everything that should echo the current kind reads it: the "Say more about…" button, the active category button, and Save. Two stops each so the gradient stays a tint rather than a colour block — the point is to tell you where you are, not to decorate. Fallback (no data-c) is the change/blue accent. */ #vibenoter-root{--vn-acc:#1d4ed8;--vn-acc2:#3b82f6;--vn-acc-soft:#eef3fe;--vn-acc-edge:#c7d7f8;--vn-acc-ink:#1e3a8a} #vibenoter-root[data-c=issue]{--vn-acc:#b91c1c;--vn-acc2:#ef4444;--vn-acc-soft:#fdecec;--vn-acc-edge:#f3c9c9;--vn-acc-ink:#7f1d1d} #vibenoter-root[data-c=change]{--vn-acc:#1d4ed8;--vn-acc2:#3b82f6;--vn-acc-soft:#eef3fe;--vn-acc-edge:#c7d7f8;--vn-acc-ink:#1e3a8a} #vibenoter-root[data-c=addition]{--vn-acc:#15803d;--vn-acc2:#22c55e;--vn-acc-soft:#e9f7ef;--vn-acc-edge:#c2e5d0;--vn-acc-ink:#14532d} #vibenoter-root[data-c=question]{--vn-acc:#6d28d9;--vn-acc2:#a855f7;--vn-acc-soft:#f3eefc;--vn-acc-edge:#ddd0f7;--vn-acc-ink:#4c1d95} #vibenoter-root *{box-sizing:border-box;margin:0} #vibenoter-root .vn-fab{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%; /* BURROW BUILD'S OWN COLOURS, SHIMMERING THE WAY THE BRAIN DOES. Same gold pair as the brand shimmer in `electron/shell.html` and the Burrow Brain title in `electron/widget.html` — #F4CC21 with #F9E242 — and the same motion: 200% background-size swept from 200% to -200% over 5s, ease-in-out, infinite. Nothing was invented here; it is the app's own brand treatment, on the launcher. The ICON goes dark on gold. White on #F4CC21 is unreadable, and dark-on-gold is what the app already does for gold chips (`.wdg-tone` is #000 on the accent). */ background:linear-gradient(90deg,#F4CC21 0%,#F9E242 25%,#F4CC21 50%,#F9E242 75%,#F4CC21 100%); background-size:200% 100%;animation:vn-fab-shimmer 5s ease-in-out infinite; color:#1c1c1e;border:0;cursor:pointer; box-shadow:0 6px 20px rgba(244,204,33,.40),0 2px 8px rgba(0,0,0,.25); display:flex;align-items:center;justify-content:center;z-index:2147483000} /* the Burrow Brain title's sweep, verbatim (`brain-shimmer` in electron/widget.html) */ @keyframes vn-fab-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* NO `prefers-reduced-motion` OPT-OUT HERE, deliberately. There was one, and the shimmer never ran: this machine reports reduce-motion, so the guard silently cancelled the very thing that was asked for by name. The sweep is a slow tint on one 46px button — decoration with no information in it — and the request was explicit, so the button shimmers for everyone. */ #vibenoter-root .vn-fab:hover{transform:scale(1.05)} #vibenoter-root .vn-fab svg{width:20px;height:20px} #vibenoter-root .vn-q{position:absolute;top:-4px;right:-4px;background:var(--vn-amber);color:#fff; font-size:10px;font-weight:700;border-radius:9px;padding:1px 5px} /* ── AUTO — the third way to FILL the box, in the row with Save and the mic ──────────────────── Not a floating button: it belongs with the other things you do to a note you are writing. */ #vibenoter-root .vn-autofill{display:inline-flex;align-items:center;gap:6px;margin-left:8px;flex:none; border-radius:8px;border:1px solid var(--vn-line);background:#fff;color:var(--vn-mut); font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:9px 12px} #vibenoter-root .vn-autofill svg{width:15px;height:15px;flex:none} #vibenoter-root .vn-autofill:hover{border-color:#c9c4ba;color:var(--vn-ink)} #vibenoter-root .vn-autofill:hover svg{color:#6d28d9} #vibenoter-root .vn-ai{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%); width:min(560px,92vw);background:#fff;border:1px solid var(--vn-line);border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.28);z-index:2147483006;overflow:hidden} #vibenoter-root .vn-ai[hidden]{display:none} #vibenoter-root .vn-ai header{display:flex;align-items:center;gap:8px;padding:13px 16px 0} #vibenoter-root .vn-ai-t{font-weight:700;font-size:14px} #vibenoter-root .vn-ai-x{margin-left:auto;background:none;border:0;font-size:16px;color:var(--vn-mut);cursor:pointer} #vibenoter-root .vn-ai-body{padding:10px 16px 16px} #vibenoter-root .vn-ai-blob{width:100%;min-height:150px;border:1px solid var(--vn-line);border-radius:9px; padding:11px 12px;font:inherit;resize:vertical;background:#fff;color:inherit} #vibenoter-root .vn-ai-blob:focus{outline:2px solid #20242b;outline-offset:-1px} #vibenoter-root .vn-ai-actions{display:flex;align-items:center;gap:10px;margin-top:10px} #vibenoter-root .vn-ai-go{background:linear-gradient(135deg,#6d28d9 0%,#2563eb 100%);color:#fff;border:0; border-radius:8px;padding:9px 18px;font:inherit;font-weight:600;cursor:pointer} #vibenoter-root .vn-ai-go[disabled]{opacity:.6;cursor:default} #vibenoter-root .vn-ai-mic{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--vn-line); background:#fff;color:var(--vn-mut);cursor:pointer;display:flex;align-items:center;justify-content:center} #vibenoter-root .vn-ai-mic svg{width:17px;height:17px} #vibenoter-root .vn-ai-mic.on{background:#b91c1c;border-color:#b91c1c;color:#fff} #vibenoter-root .vn-ai-msg{font-size:12px;color:var(--vn-mut);flex:1} #vibenoter-root .vn-ai-msg.bad{color:#b91c1c} #vibenoter-root .vn-ai-note{margin-top:9px;font-size:11.5px;color:var(--vn-mut);line-height:1.5} #vibenoter-root .vn-panel{position:fixed;right:22px;bottom:80px;max-width:calc(100vw - 44px); /* the real guarantee: whatever is open, the panel never runs past the screen. The questions column CAN make it taller (the column's own height is content-driven) — that is fine, and it is NOT what was wrong before — but the moment it would reach the edges, the column scrolls inside instead (`.vn-mscroll` below). The closed panel never changes height with the kind. */ max-height:calc(100vh - 108px); background:#fff;border:1px solid var(--vn-line);border-radius:14px; box-shadow:0 10px 34px rgba(0,0,0,.14);z-index:2147483001;overflow:hidden;display:flex;align-items:stretch} #vibenoter-root .vn-panel[hidden]{display:none} #vibenoter-root .vn-main{width:400px;flex:none;display:flex;flex-direction:column} #vibenoter-root .vn-panel header{display:flex;align-items:center;gap:8px;padding:12px 16px 0} #vibenoter-root .vn-t{font-weight:700;font-size:14px} /* the way into the dashboard. Words, not a bare glyph: nobody clicks a mystery icon. */ #vibenoter-root .vn-open{margin-left:auto;background:#fbfaf8;border:1px solid var(--vn-line);border-radius:8px; padding:5px 10px;font:inherit;font-size:12px;font-weight:600;color:var(--vn-mut);cursor:pointer;white-space:nowrap} #vibenoter-root .vn-open:hover{border-color:#c9c4ba;color:var(--vn-ink);background:#fff} #vibenoter-root .vn-open+.vn-x{margin-left:2px} #vibenoter-root .vn-x{background:none;border:0;font-size:16px;color:var(--vn-mut);cursor:pointer;padding:2px 4px} #vibenoter-root .vn-cats{display:flex;gap:6px;padding:12px 16px 0} #vibenoter-root .vn-cats button{flex:1;padding:8px 0;border:1px solid var(--vn-line);background:#fbfaf8; border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--vn-mut); display:flex;align-items:center;justify-content:center;gap:7px;font-family:inherit} #vibenoter-root .vn-cats button i{width:9px;height:9px;border-radius:3px;display:inline-block} #vibenoter-root .vn-cats [data-c=issue] i{background:linear-gradient(135deg,#b91c1c,#ef4444)} #vibenoter-root .vn-cats [data-c=change] i{background:linear-gradient(135deg,#1d4ed8,#3b82f6)} #vibenoter-root .vn-cats [data-c=addition] i{background:linear-gradient(135deg,#15803d,#22c55e)} #vibenoter-root .vn-cats [data-c=question] i{background:linear-gradient(135deg,#6d28d9,#a855f7)} /* the active button wears the gradient of ITS OWN colour, so the panel tells you which kind you are on without a legend */ #vibenoter-root .vn-cats button.on{color:var(--vn-acc-ink);border-color:var(--vn-acc-edge); background:linear-gradient(180deg,#fff 0%,var(--vn-acc-soft) 100%);box-shadow:0 1px 3px rgba(0,0,0,.06)} #vibenoter-root .vn-body{padding:12px 16px 16px} #vibenoter-root .vn-note{width:100%;border:1px solid var(--vn-line);border-radius:9px;padding:10px 12px; font:inherit;resize:vertical;min-height:74px;background:#fff;color:inherit} #vibenoter-root .vn-note:focus{outline:2px solid #20242b;outline-offset:-1px} /* ── the title and the priority: the two things every row needs ──────────────────────────────── Both rows are ALWAYS present, with the same height in every kind, so switching kinds still moves nothing. A question swaps the priority dropdown for a sentence of the same height rather than removing the row — a block that appears and disappears is exactly the jump we removed once. */ #vibenoter-root .vn-rlab{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--vn-mut);flex:none;width:52px} #vibenoter-root .vn-trow,#vibenoter-root .vn-prow{display:flex;align-items:center;gap:8px;margin-top:8px; height:34px}#vibenoter-root .vn-title{flex:1;min-width:0;border:1px solid var(--vn-line);border-radius:9px;padding:8px 11px; font:inherit;font-size:13px;background:#fff;color:inherit} #vibenoter-root .vn-title:focus{outline:2px solid #20242b;outline-offset:-1px} #vibenoter-root .vn-title::placeholder{color:#a8a294} #vibenoter-root .vn-trow.typed .vn-title{border-color:#c9c4ba} #vibenoter-root .vn-tcount{font-size:11px;color:var(--vn-mut);flex:none;width:34px;text-align:right} #vibenoter-root .vn-prio{flex:none;width:74px;border:1px solid var(--vn-line);border-radius:9px;padding:7px 9px; font:inherit;font-size:12.5px;background:#fff;color:inherit;cursor:pointer} #vibenoter-root .vn-prio:focus{outline:2px solid #20242b;outline-offset:-1px} /* The sentence WRAPS rather than being cut. It was `nowrap` + an ellipsis, which turned the user's own words into "Do this when we come to the fixes rela…" — the same sentence clipped twice, once in the dropdown and once beside it. Two lines fit inside the row's fixed 34px, and the row keeps that height for every kind (including a question, which has no dropdown), so nothing jumps. */ #vibenoter-root .vn-pmean{flex:1;min-width:0;font-size:11.5px;color:var(--vn-mut);line-height:1.2} /* GROUP — the same 34px row as Title and Priority, so switching kind moves nothing. Its list is a POP-UP (absolute) over whatever is under it: a layer that pushes the panel's contents down is not a layer, it is a broken layout (Mocks/README). */ #vibenoter-root .vn-grow{position:relative;display:flex;align-items:center;gap:8px;margin-top:8px;height:34px} #vibenoter-root .vn-group{flex:1;min-width:0;border:1px solid var(--vn-line);border-radius:9px;padding:8px 11px; font:inherit;font-size:13px;background:#fff;color:inherit} #vibenoter-root .vn-group:focus{outline:2px solid #20242b;outline-offset:-1px} #vibenoter-root .vn-group::placeholder{color:#a8a294} #vibenoter-root .vn-glist{flex:none;border:1px solid var(--vn-line);border-radius:9px;background:#fff;color:var(--vn-mut); font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:9px 12px} #vibenoter-root .vn-glist:hover{border-color:#c9c4ba;color:var(--vn-ink)} #vibenoter-root .vn-gpop{position:absolute;left:60px;right:0;top:38px;z-index:6;background:#fff;border:1px solid var(--vn-line); border-radius:11px;box-shadow:0 10px 26px rgba(0,0,0,.14);max-height:228px;overflow:auto;padding:5px} #vibenoter-root .vn-gitem{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;font:inherit; font-size:13px;color:inherit;text-align:left;padding:8px 9px;border-radius:8px;cursor:pointer} #vibenoter-root .vn-gitem:hover{background:#f4f2ee} #vibenoter-root .vn-gitem b{font-weight:600} #vibenoter-root .vn-gitem span{margin-left:auto;font-size:11.5px;color:var(--vn-mut)} #vibenoter-root .vn-gnone{font-size:12px;color:var(--vn-mut);padding:9px} /* There is deliberately no console-log hint block here any more: it appeared and disappeared as you switched kinds, which shoved the whole panel up and down. The hint is ghost text inside the box instead (fields.js HINT) plus a line on the save toast — neither of which moves anything. */ /* The optional questions open as a SECOND COLUMN beside the box, never as a taller one: the panel grows wider, so it can never run off the bottom of the screen, and the box itself does not move. `visibility` (not `hidden`) keeps the closed column out of the tab order and the accessibility tree while still letting the width animate. */ /* The questions column. While closed it must take NO space in either direction: `width:0` alone still leaves the content laying out, and at zero width every placeholder wraps to one character per line — which stretched the whole panel to ~900px of empty white. `height:0` + `overflow:hidden` is what actually removes it; `visibility` (not `hidden`) keeps it out of the tab order and lets the width still animate on open, and `height:auto` hands it back to `align-items:stretch` when open. */ #vibenoter-root .vn-more{width:0;height:0;visibility:hidden;overflow:hidden;background:#fbfaf8; transition:width .26s ease, visibility .26s ease;display:flex;flex-direction:column} #vibenoter-root .vn-panel.wide .vn-more{width:330px;height:auto;visibility:visible;border-left:1px solid var(--vn-line)} #vibenoter-root .vn-mhead{padding:12px 14px 0;font-weight:700;font-size:13px;white-space:nowrap} #vibenoter-root .vn-msub{padding:4px 14px 0;font-size:11.5px;color:var(--vn-mut);white-space:nowrap} /* the inner scroll is what guarantees the panel never grows taller than the box */ #vibenoter-root .vn-mscroll{padding:8px 14px 14px;overflow-y:auto;flex:1;min-height:0} /* the question field styles themselves live in shared-ui.css, because the desktop box needs the same ones inside its window. Duplicating them here is exactly the drift this avoids. */ /* the way in: a button in the box, never the fields themselves. It wears the current kind's accent so the line you read and the button you press agree with the category you picked. */ #vibenoter-root .vn-toggle{width:100%;text-align:left;background:#fbfaf8;border:1px solid var(--vn-line); border-radius:9px;padding:9px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--vn-mut);cursor:pointer; margin-top:10px;display:flex;justify-content:space-between;align-items:center} #vibenoter-root .vn-toggle:hover{border-color:var(--vn-acc-edge);color:var(--vn-acc-ink)} #vibenoter-root .vn-toggle .vn-tlabel{color:var(--vn-acc-ink)} #vibenoter-root .vn-toggle .vn-chev{color:var(--vn-acc);font-weight:700} #vibenoter-root .vn-toggle.on{background:linear-gradient(180deg,#fff 0%,var(--vn-acc-soft) 100%); color:var(--vn-acc-ink);border-color:var(--vn-acc-edge)} #vibenoter-root .vn-chev{transition:transform .2s} #vibenoter-root .vn-toggle.on .vn-chev{transform:rotate(90deg)} /* on a narrow screen wider is not an option, so it stacks instead of clipping */ @media (max-width:900px){ #vibenoter-root .vn-panel{left:22px;right:22px} #vibenoter-root .vn-panel.open{flex-direction:column} #vibenoter-root .vn-main{width:100%} #vibenoter-root .vn-more,#vibenoter-root .vn-panel.wide .vn-more{width:100%;border-left:0} #vibenoter-root .vn-panel.wide .vn-more{border-top:1px solid var(--vn-line)} #vibenoter-root .vn-mhead,#vibenoter-root .vn-msub,#vibenoter-root .vn-more label{white-space:normal} } /* Add payload: the way into the payload window (§5d). It carries its words — nobody guesses what a paperclip means, unlike a mic. */ #vibenoter-root .vn-payload{margin-left:auto;background:#fff;border:1px solid var(--vn-line); border-radius:8px;padding:8px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--vn-mut); cursor:pointer;display:flex;align-items:center;gap:6px} #vibenoter-root .vn-payload:hover{border-color:#c9c4ba;color:var(--vn-ink)} #vibenoter-root .vn-pcount{background:#20242b;color:#fff;border-radius:9px;padding:1px 6px; font-size:10.5px;font-weight:700} #vibenoter-root .vn-actions{display:flex;align-items:center;margin-top:12px} /* Save carries the current kind's colour as a gradient of itself — you can see at a glance which kind you are about to file, without a single extra label. */ #vibenoter-root .vn-save{background:linear-gradient(135deg,var(--vn-acc) 0%,var(--vn-acc2) 100%);color:#fff; border:0;border-radius:8px;padding:9px 22px;font:inherit;font-weight:600;cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.14)} #vibenoter-root .vn-save:hover{filter:brightness(1.07)} /* the mic sits next to Save: dictation is a button, not a mode (design framework.md §5) */ #vibenoter-root .vn-mic{width:38px;height:38px;margin-left:10px;flex:none;border-radius:50%; border:1px solid var(--vn-line);background:#fff;color:var(--vn-mut);cursor:pointer; display:flex;align-items:center;justify-content:center} #vibenoter-root .vn-mic svg{width:17px;height:17px} #vibenoter-root .vn-mic:hover{border-color:#c9c4ba;color:var(--vn-ink)} @keyframes vn-mic-pulse{0%{box-shadow:0 0 0 0 rgba(185,28,28,.55)} 70%{box-shadow:0 0 0 10px rgba(185,28,28,0)}100%{box-shadow:0 0 0 0 rgba(185,28,28,0)}} #vibenoter-root .vn-mic[data-on="1"]{background:#b91c1c;border-color:#b91c1c;color:#fff; animation:vn-mic-pulse 1.6s ease-out infinite} /* Recording has stopped and Whisper is being asked. A THIRD state, between "listening" (red, pulsing) and "idle": solid and still, because nothing is being captured any more and a pulse would say it was. */ #vibenoter-root .vn-mic.busy,#vibenoter-root .vn-ai-mic.busy{background:#0f766e;border-color:#0f766e;color:#fff; animation:none;cursor:progress} #vibenoter-root .vn-mic.busy svg,#vibenoter-root .vn-ai-mic.busy svg{animation:vn-mic-think 1s ease-in-out infinite} @keyframes vn-mic-think{0%,100%{opacity:1}50%{opacity:.35}} #vibenoter-root .vn-toast{position:fixed;right:22px;bottom:80px;background:#20242b;color:#fff;border-radius:9px; padding:9px 14px;font-size:13px;z-index:2147483002;box-shadow:0 6px 18px rgba(0,0,0,.2)} #vibenoter-root .vn-toast.amber{background:var(--vn-amber)} /* ══════════════════════════════════════════════════════════════════════════════════════════════ THE CHECKLIST FACE OF THE PANEL The structure, the colours and every `.vnc-*` rule live in `checklists.css`, because the same markup is drawn in this panel and in the notes window and two copies would drift within a week. What is HERE is only what is true of the SMALL panel: the header toggle, the +, the scrolling body, and the handful of places where 360px needs tighter spacing than a full window. ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── the Notes / Checklist toggle, and the + that only exists on the checklist side ────────────── The user's own description of this control: "we can put checklist [at the top], and when we click checklist, it'll switch the widget from Note It to the checklist widget … we'll have that same button that'll flip it back to the normal notes. … And when we're inside of the checklist, to the right of that, we'll have a plus button. That simple." So: ONE button, and its label is always the place you would go TO — never the mode you are already in, which is the one thing that makes a toggle ambiguous. And a + beside it that is not a menu. */ #vibenoter-root .vn-mode{margin-left:auto;background:#fbfaf8;border:1px solid var(--vn-line); border-radius:8px;padding:5px 11px;font:inherit;font-size:12px;font-weight:700;color:var(--vn-mut); cursor:pointer;white-space:nowrap} #vibenoter-root .vn-mode:hover{border-color:#c9c4ba;color:var(--vn-ink);background:#fff} #vibenoter-root .vn-mode.on{background:#fff;border-color:var(--vn-acc-edge);color:var(--vn-acc-ink)} #vibenoter-root .vn-newcheck{flex:none;width:27px;height:27px;padding:0;border:1px solid var(--vn-acc-edge); background:#fff;color:var(--vn-acc);border-radius:8px;font:inherit;font-size:17px;font-weight:700; line-height:1;cursor:pointer} #vibenoter-root .vn-newcheck:hover{background:var(--vn-acc-soft)} /* The `hidden` attribute is silently defeated by almost any author `display`, and a + that will not go away on the notes side would be a permanent mystery on screen. Say it explicitly. */ #vibenoter-root .vn-newcheck[hidden]{display:none} /* Both buttons would otherwise claim the free space, leaving a gap between them. The mode button takes it; Full view sits still beside the +. */ #vibenoter-root .vn-mode ~ .vn-open{margin-left:0} /* ── the checklist body ──────────────────────────────────────────────────────────────────────── In checklist mode the panel takes a real height rather than growing with its content, so the list can SCROLL. Without this the panel's own `overflow:hidden` clips a long checklist and the bottom items become unreachable with nothing on screen to say anything is missing. */ #vibenoter-root .vn-panel.checkmode{height:calc(100vh - 108px)} #vibenoter-root .vn-checkbody{flex:1;min-height:0;overflow-y:auto;padding:12px 16px 16px} #vibenoter-root .vn-checkbody[hidden]{display:none} #vibenoter-root .vn-body[hidden],#vibenoter-root .vn-cats[hidden]{display:none} /* the prompts column belongs to a note; a checklist is not one, so it folds away with the note face */ #vibenoter-root .vn-panel.checkmode .vn-more{display:none} /* ── the picker: a dropdown in here, a card grid in the full view ──────────────────────────────── A