@vibes.diy/base 14.3.274 → 14.3.276

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/components/VibesWindowFrame.d.ts +1 -0
  2. package/components/VibesWindowFrame.js +10 -3
  3. package/components/VibesWindowFrame.js.map +1 -1
  4. package/components/VibesWindowFrame.styles.d.ts +1 -1
  5. package/components/VibesWindowFrame.styles.js +51 -0
  6. package/components/VibesWindowFrame.styles.js.map +1 -1
  7. package/components/vibe-menu/VibeMenu.js +2 -1
  8. package/components/vibe-menu/VibeMenu.js.map +1 -1
  9. package/components/vibe-menu/cards/AccountCard.d.ts +4 -1
  10. package/components/vibe-menu/cards/AccountCard.js +39 -0
  11. package/components/vibe-menu/cards/AccountCard.js.map +1 -1
  12. package/components/vibe-menu/cards/CodeCard.js +19 -4
  13. package/components/vibe-menu/cards/CodeCard.js.map +1 -1
  14. package/components/vibe-menu/cards/CodeTabRow.d.ts +10 -1
  15. package/components/vibe-menu/cards/CodeTabRow.js +13 -4
  16. package/components/vibe-menu/cards/CodeTabRow.js.map +1 -1
  17. package/components/vibe-menu/cards/HomeCard.d.ts +6 -0
  18. package/components/vibe-menu/cards/HomeCard.js +11 -2
  19. package/components/vibe-menu/cards/HomeCard.js.map +1 -1
  20. package/components/vibe-menu/moments.d.ts +2 -0
  21. package/components/vibe-menu/moments.js +7 -1
  22. package/components/vibe-menu/moments.js.map +1 -1
  23. package/components/vibe-menu/parts/CardTabRow.d.ts +1 -1
  24. package/components/vibe-menu/slices.d.ts +4 -0
  25. package/components/vibe-menu/slices.js.map +1 -1
  26. package/components/vibe-menu/vibe-menu.styles.d.ts +1 -1
  27. package/components/vibe-menu/vibe-menu.styles.js +11 -0
  28. package/components/vibe-menu/vibe-menu.styles.js.map +1 -1
  29. package/package.json +7 -7
package/components/vibe-menu/vibe-menu.styles.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
2
  export declare const VIBE_MENU_LIGHT_VARS = "\n color-scheme: light;\n --section-home: oklch(76.02% 0.1832 146.61);\n --section-account: oklch(57.46% 0.2126 29.55);\n --section-code: oklch(89.78% 0.1857 98.22);\n --section-share: oklch(64.39% 0.1304 231.41);\n --vibes-black: #000000;\n --vibes-cream: #fffff0;\n --menu-ink: #1a1a1a;\n --card-bg: var(--vibes-cream);\n --ink: #111111;\n --muted: #555555;\n --line: #111111;\n --line-card: #111111;\n --line-hairline: #1111112e;\n --placeholder: var(--muted);\n --suggest-border: #11111173;\n --share-tint: #009ace1f;\n --share-tint-strong: #009ace40;\n --on-home: var(--menu-ink);\n --on-account: var(--vibes-cream);\n --on-code: var(--menu-ink);\n --on-share: var(--menu-ink);\n --badge: var(--section-account);\n --on-badge: var(--vibes-cream);\n --cancel-cap: #f3d6d2;\n --on-cancel-cap: #9c2318;\n --obsidian-fill: rgba(6, 9, 10, 0.94);\n --obsidian-edge: rgba(255, 255, 255, 0.17);\n --obsidian-highlight: rgba(255, 255, 255, 0.32);\n --obsidian-rim: rgba(255, 255, 255, 0.1);\n --font-display: \"Alte Haas Grotesk\", Inter, sans-serif;\n --font-tab: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --space-9: 9px;\n --space-2: 2px;\n --space-4: 4px;\n --space-6: 6px;\n --space-8: 8px;\n --space-10: 10px;\n --space-12: 12px;\n --space-14: 14px;\n --space-16: 16px;\n --space-18: 18px;\n --space-24: 24px;\n --radius-card: 16px;\n --radius-full: 999px;\n --radius-bar-end: 25px;\n --radius-access-line: 24px;\n --radius-input: 22px;\n --radius-done: 21px;\n --radius-copy: 18px;\n --radius-chip: 14px;\n --radius-moment: 12px;\n --radius-switch: 10px;\n --radius-meter: 7px;\n --obsidian-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.02);\n --swatch-selected: 0 0 0 2px #fffff0, 0 0 0 4px #111111;\n --stroke-rule: 2px;\n --stroke-hairline: 1px;\n --stroke-mini: 1.5px;\n --stroke-focus: 3px;\n --stroke-glyph: 2.4px;\n --size-icon-circle: 28px;\n --size-icon-circle-phone: 22px;\n --size-glyph: 14px;\n --size-glyph-cta: 20px;\n --size-bar: 50px;\n --size-tab: 176px;\n --size-home-extra: 14px;\n --size-bar-end: 63px;\n --size-pill-w: 120px;\n --size-pill-h: 44px;\n --size-ring: 3px;\n --size-edge: 24px;\n --size-edge-phone: 16px;\n --size-pill-flat-inset: 19px;\n --size-band: 8px;\n --size-row: 46px;\n --size-row-compact: 42px;\n --size-chip: 28px;\n --size-copy: 36px;\n --size-input: 44px;\n --size-composer: 48px;\n --size-access-line: 48px;\n --size-segment: 32px;\n --size-segment-mini: 24px;\n --size-switch-w: 36px;\n --size-meter: 14px;\n --size-card-max: 480px;\n --size-card-max-phone: 560px;\n --size-log-max: 160px;\n --size-log-peek: 120px;\n --size-code-mode-max-w: 1200px;\n --opacity-tab-inactive: 0.73;\n --opacity-row-disabled: 0.35;\n --provider-disc: #ffffff;\n --provider-ink: #111111;";
3
3
  export declare const VIBE_MENU_DARK_VARS = "\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line-card: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --cancel-cap: #4a2420;\n --on-cancel-cap: #f1b5ad;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;";
4
- export declare const VIBE_MENU_CSS = "\n/* ---------- tokens (tokens.json), light, then both dark arms ----------\n Detached layers (portalled out of the menu root) carry\n data-vibe-menu-detached, so every token block lists them too. */\n[data-vibe-menu],\n[data-vibe-menu-detached] {\n color-scheme: light;\n --section-home: oklch(76.02% 0.1832 146.61);\n --section-account: oklch(57.46% 0.2126 29.55);\n --section-code: oklch(89.78% 0.1857 98.22);\n --section-share: oklch(64.39% 0.1304 231.41);\n --vibes-black: #000000;\n --vibes-cream: #fffff0;\n --menu-ink: #1a1a1a;\n --card-bg: var(--vibes-cream);\n --ink: #111111;\n --muted: #555555;\n --line: #111111;\n --line-card: #111111;\n --line-hairline: #1111112e;\n --placeholder: var(--muted);\n --suggest-border: #11111173;\n --share-tint: #009ace1f;\n --share-tint-strong: #009ace40;\n --on-home: var(--menu-ink);\n --on-account: var(--vibes-cream);\n --on-code: var(--menu-ink);\n --on-share: var(--menu-ink);\n --badge: var(--section-account);\n --on-badge: var(--vibes-cream);\n --cancel-cap: #f3d6d2;\n --on-cancel-cap: #9c2318;\n --obsidian-fill: rgba(6, 9, 10, 0.94);\n --obsidian-edge: rgba(255, 255, 255, 0.17);\n --obsidian-highlight: rgba(255, 255, 255, 0.32);\n --obsidian-rim: rgba(255, 255, 255, 0.1);\n --font-display: \"Alte Haas Grotesk\", Inter, sans-serif;\n --font-tab: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --space-9: 9px;\n --space-2: 2px;\n --space-4: 4px;\n --space-6: 6px;\n --space-8: 8px;\n --space-10: 10px;\n --space-12: 12px;\n --space-14: 14px;\n --space-16: 16px;\n --space-18: 18px;\n --space-24: 24px;\n --radius-card: 16px;\n --radius-full: 999px;\n --radius-bar-end: 25px;\n --radius-access-line: 24px;\n --radius-input: 22px;\n --radius-done: 21px;\n --radius-copy: 18px;\n --radius-chip: 14px;\n --radius-moment: 12px;\n --radius-switch: 10px;\n --radius-meter: 7px;\n --obsidian-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.02);\n --swatch-selected: 0 0 0 2px #fffff0, 0 0 0 4px #111111;\n --stroke-rule: 2px;\n --stroke-hairline: 1px;\n --stroke-mini: 1.5px;\n --stroke-focus: 3px;\n --stroke-glyph: 2.4px;\n --size-icon-circle: 28px;\n --size-icon-circle-phone: 22px;\n --size-glyph: 14px;\n --size-glyph-cta: 20px;\n --size-bar: 50px;\n --size-tab: 176px;\n --size-home-extra: 14px;\n --size-bar-end: 63px;\n --size-pill-w: 120px;\n --size-pill-h: 44px;\n --size-ring: 3px;\n --size-edge: 24px;\n --size-edge-phone: 16px;\n --size-pill-flat-inset: 19px;\n --size-band: 8px;\n --size-row: 46px;\n --size-row-compact: 42px;\n --size-chip: 28px;\n --size-copy: 36px;\n --size-input: 44px;\n --size-composer: 48px;\n --size-access-line: 48px;\n --size-segment: 32px;\n --size-segment-mini: 24px;\n --size-switch-w: 36px;\n --size-meter: 14px;\n --size-card-max: 480px;\n --size-card-max-phone: 560px;\n --size-log-max: 160px;\n --size-log-peek: 120px;\n --size-code-mode-max-w: 1200px;\n --opacity-tab-inactive: 0.73;\n --opacity-row-disabled: 0.35;\n --provider-disc: #ffffff;\n --provider-ink: #111111;\n}\n@media (prefers-color-scheme: dark) {\n [data-vibe-menu],\n [data-vibe-menu-detached] {\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line-card: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --cancel-cap: #4a2420;\n --on-cancel-cap: #f1b5ad;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n }\n}\n.dark [data-vibe-menu],\n.dark [data-vibe-menu-detached] {\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line-card: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --cancel-cap: #4a2420;\n --on-cancel-cap: #f1b5ad;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n}\n\n/* ---------- the root: the phone container ---------- */\n[data-vibe-menu] {\n container-name: vibe-menu;\n container-type: inline-size;\n color: var(--ink);\n font-family: var(--font-display);\n}\n\n/* Scrollbars (smoke F15): thin, in the menu's hairline, both themes, never the\n native dark bar inside the cream card. The colour is set on the root AND\n every descendant, for every scroller the menu hosts (drills, the Embed box,\n injected panels): the app's global sheet sets scrollbar-color on *, which\n beats a colour only inherited from the root. The width rule has zero\n specificity so a part that hides its bar (the Code mode tab strip) still\n wins. The webkit arm is for engines without the standard properties; Chrome\n ignores it once they are set. */\n[data-vibe-menu],\n[data-vibe-menu] *,\n[data-vibe-menu-detached],\n[data-vibe-menu-detached] * {\n scrollbar-color: var(--line-hairline) transparent;\n}\n:where([data-vibe-menu]),\n:where([data-vibe-menu]) :where(*) {\n scrollbar-width: thin;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n background: transparent;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar-thumb {\n border-radius: var(--radius-full);\n background: var(--line-hairline);\n}\n\n/* A section is set by data-section on any ancestor (or the root), using the\n code keys: home | settings (Account) | vibe (Code) | share. It sets --accent\n (the section colour) and --on-accent (its label colour). */\n[data-vibe-menu][data-section=\"home\"],\n[data-vibe-menu] [data-section=\"home\"] {\n --accent: var(--section-home);\n --on-accent: var(--on-home);\n}\n[data-vibe-menu][data-section=\"settings\"],\n[data-vibe-menu] [data-section=\"settings\"] {\n --accent: var(--section-account);\n --on-accent: var(--on-account);\n}\n[data-vibe-menu][data-section=\"vibe\"],\n[data-vibe-menu] [data-section=\"vibe\"] {\n --accent: var(--section-code);\n --on-accent: var(--on-code);\n}\n[data-vibe-menu][data-section=\"share\"],\n[data-vibe-menu] [data-section=\"share\"] {\n --accent: var(--section-share);\n --on-accent: var(--on-share);\n}\n\n[data-vibe-menu],\n[data-vibe-menu] * {\n box-sizing: border-box;\n}\n/* the card's surface and side padding, so rows can bleed edge to edge */\n[data-vibe-menu] .vm-card-body {\n position: relative;\n padding: var(--space-14) var(--space-16) var(--space-16);\n background: var(--card-bg);\n color: var(--ink);\n font: 400 14px/20px var(--font-display);\n}\n[data-vibe-menu] .vm-card-body.is-framed {\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-card) var(--radius-card) 0 0;\n overflow: hidden;\n}\n\n/* ---------- shared ---------- */\n/* Zero specificity: every vm-* rule wins over it, and so does any utility\n class on content a host injects into the card (slots). */\n:where([data-vibe-menu]) :where(button) {\n font: inherit;\n color: inherit;\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n touch-action: manipulation;\n}\n[data-vibe-menu] .vm-glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--stroke-glyph);\n stroke-linecap: round;\n stroke-linejoin: round;\n flex: none;\n}\n[data-vibe-menu] .vm-label,\n[data-vibe-menu] .vm-seg button,\n[data-vibe-menu] .vm-chip {\n font: 700 14px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n[data-vibe-menu] .vm-label.is-plain {\n font: 700 16px/1.1 var(--font-display);\n letter-spacing: 0;\n text-transform: none;\n}\n[data-vibe-menu] .vm-kicker,\n[data-vibe-menu] .vm-subhead {\n margin: 0 0 var(--space-8);\n font: 700 10.5px/1.3 var(--font-tab);\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-subhead {\n margin: var(--space-16) 0 0;\n padding-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-sub {\n margin: var(--space-8) 0 var(--space-14);\n font-size: 13px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-app-name {\n white-space: nowrap;\n}\n/* ---------- SectionStrip: the bar ---------- */\n[data-vibe-menu] .vm-menu {\n position: relative;\n}\n[data-vibe-menu] .vm-strip {\n position: relative;\n width: calc(var(--size-tab) * 4 + var(--size-home-extra) + var(--size-bar-end) + 2px);\n height: var(--size-bar);\n}\n[data-vibe-menu] .vm-strip-slide {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: flex-end;\n border: var(--stroke-rule) solid var(--line);\n border-right: 0;\n border-radius: var(--bar-tl, var(--radius-bar-end)) 0 0 var(--radius-bar-end);\n overflow: hidden;\n background: var(--card-bg);\n /* #7329: the bar under the switch belongs to no tab's box. */\n padding-right: var(--size-bar-end);\n}\n[data-vibe-menu] .vm-tab {\n position: relative;\n width: var(--size-tab);\n flex: none;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border: 0;\n padding: 0 0 0 var(--space-9);\n cursor: pointer;\n background: var(--accent);\n}\n[data-vibe-menu] .vm-tab-circle {\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border-radius: 50%;\n background: var(--menu-ink);\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n}\n[data-vibe-menu] .vm-tab svg {\n width: calc(var(--size-icon-circle) / 2);\n height: calc(var(--size-icon-circle) / 2);\n fill: none;\n stroke: var(--vibes-cream);\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex: none;\n}\n[data-vibe-menu] .vm-tab-label {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 0 0 1.9px;\n font-family: var(--font-tab);\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 1.9px;\n text-transform: uppercase;\n white-space: nowrap;\n pointer-events: none;\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] {\n width: calc(var(--size-tab) + var(--size-home-extra));\n padding-left: calc(var(--space-9) + var(--size-home-extra) / 2);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] .vm-tab-label {\n left: calc(var(--size-home-extra) / 2);\n}\n/* #7329: Share's box ends where the switch begins; its colour runs on under\n the pill as a child painted beyond the box. */\n[data-vibe-menu] .vm-tab-run {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 100%;\n width: var(--size-bar-end);\n background: inherit;\n}\n[data-vibe-menu] .vm-tab:focus-visible {\n outline: var(--stroke-focus) solid var(--line);\n outline-offset: -3px;\n}\n/* Port change (smoke F5): the DS inset line ring vanished on the black pill\n and drew square corners. The pill's ring is cream, sits in the obsidian\n glass's 3px rim (offset 0), and follows the stadium (the pill's radius). */\n[data-vibe-menu] .vm-pill:focus-visible {\n outline: var(--stroke-focus) solid var(--vibes-cream);\n outline-offset: 0;\n}\n[data-vibe-menu] .vm-menu.has-card .vm-tab:not(.is-active) {\n opacity: var(--opacity-tab-inactive);\n}\n[data-vibe-menu] .vm-badge {\n position: absolute;\n top: -4px;\n right: 6px;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: var(--radius-full);\n background: var(--badge);\n color: var(--on-badge);\n font: 700 11px/18px var(--font-display);\n text-align: center;\n}\n/* the bar sits against the pill: it runs half the glass under it */\n[data-vibe-menu] .vm-bar-anchor {\n position: relative;\n height: var(--size-bar);\n}\n[data-vibe-menu] .vm-bar-anchor .vm-strip {\n position: absolute;\n left: 0;\n bottom: 0;\n}\n[data-vibe-menu] .vm-bar-anchor .vm-glass {\n position: absolute;\n right: 0;\n bottom: 0;\n}\n/* phones: the bar spans the width; tabs sized to their content, icon above label */\n[data-vibe-menu] .vm-strip.is-phone {\n width: 100%;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab {\n width: auto;\n flex: 1 1 auto;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-width: 0;\n padding: 4px 2px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-circle {\n width: var(--size-icon-circle-phone);\n height: var(--size-icon-circle-phone);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab svg {\n width: 12px;\n height: 12px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"home\"] {\n padding: 4px 2px 4px calc(2px + var(--size-home-extra) * 0.7);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"share\"] {\n flex-grow: 1;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-label {\n position: static;\n display: block;\n font-size: 9.6px;\n letter-spacing: 1px;\n padding: 0 0 0 1px;\n}\n\n/* ---------- VibesSwitch: the pill in its obsidian glass ---------- */\n[data-vibe-menu] .vm-glass {\n position: relative;\n width: calc(var(--size-pill-w) + 2 * var(--size-ring));\n height: calc(var(--size-pill-h) + 2 * var(--size-ring));\n border-radius: var(--radius-full);\n flex: none;\n background:\n linear-gradient(to right, transparent, var(--obsidian-highlight), transparent) top / 100% 1px no-repeat,\n linear-gradient(to bottom, var(--obsidian-highlight), transparent, var(--obsidian-edge)) left / 1px 100% no-repeat,\n var(--obsidian-fill);\n box-shadow: var(--obsidian-shadow);\n}\n[data-vibe-menu] .vm-pill {\n position: absolute;\n left: var(--size-ring);\n top: var(--size-ring);\n width: var(--size-pill-w);\n height: var(--size-pill-h);\n padding: 0;\n border: 0;\n border-radius: var(--radius-full);\n background: none;\n cursor: pointer;\n}\n/* Touching, holding or dragging on the switch never selects text, raises the\n iOS callout and magnifier, or drags an image (owner 2026-10-16). The letters\n are paths drawn twice, the second copy clipped to the knob: both sit under\n .vm-pill, so the descendant rule covers them. */\n[data-vibe-menu] .vm-glass,\n[data-vibe-menu] .vm-pill,\n[data-vibe-menu] .vm-pill * {\n -webkit-user-select: none;\n user-select: none;\n -webkit-touch-callout: none;\n}\n/* A held press slides the knob 3/4 of the way and waits (owner 2026-10-16).\n An overshooting spring would carry it past 3/4, so the held leg eases out\n with no overshoot; the release finishes on the host's own curve. */\n[data-vibe-menu] .vm-pill[data-progress=\"0.75\"] {\n --vibes-switch-slide: 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n}\n/* Reduced motion: the switch jumps between poses. Its paths carry inline\n transitions (the knob's d and 3px nudge, the letters' fills and on-knob clip), so\n only an !important rule here stops every leg, not just the d slide. */\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-pill {\n --vibes-switch-slide: 0s;\n }\n [data-vibe-menu] .vm-pill svg path {\n transition: none !important;\n }\n}\n[data-vibe-menu] .vm-switch-art {\n width: 100%;\n height: 100%;\n display: block;\n}\n[data-vibe-menu] .vm-pill .vm-badge {\n top: -6px;\n right: 4px;\n}\n/* #7079: the guest maker's save-time ask: a dot, not a count. */\n[data-vibe-menu] .vm-badge.is-dot {\n min-width: 10px;\n width: 10px;\n height: 10px;\n padding: 0;\n}\n[data-vibe-menu] .vm-chiclet {\n display: inline-block;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n background: var(--section-code);\n /* Port change: bundle.css writes #111111 (ink); text on a section colour is\n menu-ink (Global Constraints), which --on-code resolves to in both themes. */\n color: var(--on-code);\n font: 700 11px/18px var(--font-display);\n letter-spacing: 0.06em;\n}\n/* #4291. The chiclet's shape, so the two read as one row \u2014 but in the badge\n colour (the identity lane) so elevation never looks like a publish state. */\n[data-vibe-menu] .vm-admin-badge {\n display: inline-block;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n background: var(--badge);\n color: var(--on-badge);\n font: 700 11px/18px var(--font-display);\n letter-spacing: 0.06em;\n}\n\n/* ---------- MenuCard: the card, its band and the folder-tab join, drawn once ---------- */\n[data-vibe-menu] .vm-frame {\n position: relative;\n}\n[data-vibe-menu] .vm-frame .vm-card {\n position: absolute;\n left: 0;\n top: 0;\n background: var(--card-bg);\n color: var(--ink);\n overflow: hidden;\n border-radius: var(--radius-card) var(--radius-card) 0 0;\n}\n[data-vibe-menu] .vm-frame .vm-card .vm-card-body {\n padding-bottom: calc(var(--space-16) + var(--size-band));\n}\n[data-vibe-menu] .vm-outline {\n position: absolute;\n left: 0;\n top: 0;\n overflow: visible;\n pointer-events: none;\n}\n[data-vibe-menu] .vm-outline .vm-band,\n[data-vibe-menu] .vm-outline .vm-cover {\n fill: var(--accent);\n}\n[data-vibe-menu] .vm-outline .vm-edge {\n fill: none;\n stroke: var(--line);\n stroke-width: 2;\n stroke-linejoin: miter;\n}\n\n/* ---------- ActionPill: the card's one main action ---------- */\n[data-vibe-menu] .vm-ask {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-12);\n width: 100%;\n padding: var(--space-14) var(--space-18);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n background: var(--accent);\n color: var(--on-accent);\n font: 700 21px/1 var(--font-display);\n letter-spacing: -0.02em;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-ask.is-solo {\n margin-bottom: var(--space-14);\n}\n[data-vibe-menu] .vm-ask .vm-glyph {\n width: var(--size-glyph-cta);\n height: var(--size-glyph-cta);\n transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-ask:hover .vm-glyph {\n transform: translateX(4px);\n}\n[data-vibe-menu] .vm-ask.is-phone {\n font-size: 18px;\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) > span {\n flex: 1;\n}\n\n/* ---------- Chip ---------- */\n[data-vibe-menu] .vm-chip {\n height: var(--size-chip);\n padding: 0 var(--space-12);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-chip);\n background: var(--accent);\n color: var(--on-accent);\n font-size: 11px;\n flex: none;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-chip.is-ghost {\n background: transparent;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-chip.is-name {\n font: 700 14px/1 var(--font-display);\n letter-spacing: 0;\n text-transform: none;\n}\n[data-vibe-menu] .vm-chip.vm-copy {\n height: var(--size-copy);\n padding: 0 var(--space-14);\n border-radius: var(--radius-copy);\n flex-shrink: 0;\n align-self: center;\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-6);\n}\n/* Port change (smoke F9): codegen writes long chips, so a chip wraps inside\n the card (DS \"text that can outgrow its track wraps\") instead of running\n past its edge; a one-line chip keeps the 28px chip height. */\n[data-vibe-menu] .vm-suggest {\n min-height: var(--size-chip);\n max-width: 100%;\n min-width: 0;\n padding: var(--space-2) var(--space-12);\n text-align: left;\n overflow-wrap: anywhere;\n border: var(--stroke-mini) solid var(--suggest-border);\n border-radius: var(--radius-chip);\n background: none;\n color: var(--ink);\n font: 400 13px/20px var(--font-display);\n cursor: pointer;\n}\n[data-vibe-menu] .vm-suggest:hover,\n[data-vibe-menu] .vm-suggest.is-hover,\n[data-vibe-menu] .vm-suggest[aria-busy=\"true\"] {\n border-color: var(--line-card);\n background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n/* A pressed chip holds the row while its answer is on the way (a lookup, a\n fork): it stays lit, and the row takes no second press. */\n[data-vibe-menu] .vm-suggest:disabled {\n cursor: default;\n}\n[data-vibe-menu] .vm-suggest:disabled:not([aria-busy=\"true\"]) {\n opacity: 0.5;\n}\n/* The pressed one is disabled too (the row takes no second press), so it\n must outrank the app's global button:disabled dim (theme/global-styles.ts). */\n[data-vibe-menu] .vm-suggest[aria-busy=\"true\"] {\n opacity: 1;\n}\n/* The same hold on the inline links at the end of the chat: the pressed link\n keeps its lit underline, the others read as disabled (dimmed above). */\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest[aria-busy=\"true\"] {\n text-decoration-color: currentColor;\n}\n/* The gold option (#6768): the one capability the agent offered, a chip in the\n same row and the same order as the others. It wears the lit state the others\n take on hover, a full-ink outline and a filled star before the label, so it\n reads as the offer without a second colour on the card. */\n[data-vibe-menu] .vm-suggest.is-gold {\n display: inline-flex;\n align-items: center;\n gap: var(--space-6);\n border-color: var(--line-card);\n background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n[data-vibe-menu] .vm-suggest.is-gold .vm-glyph {\n flex: none;\n fill: currentColor;\n}\n[data-vibe-menu] .vm-picks {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6);\n}\n\n/* ---------- Composer: the logo pill's shape, 48px tall (owner pick B, 2026-10-26:\n near the switch's 44px curve with a full 44px cap) ---------- */\n[data-vibe-menu] .vm-composer {\n display: flex;\n align-items: stretch;\n min-height: var(--size-composer);\n margin-bottom: var(--space-16);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n overflow: hidden;\n background: var(--card-bg);\n}\n[data-vibe-menu] .vm-composer:focus-within,\n[data-vibe-menu] .vm-composer.is-focus {\n box-shadow: 0 0 0 3px var(--accent);\n}\n[data-vibe-menu] .vm-composer textarea {\n flex: 1;\n min-width: 0;\n align-self: center;\n margin: 0 var(--space-12) 0 2px;\n padding: 0;\n resize: none;\n border: 0;\n outline: 0;\n background: transparent;\n color: var(--ink);\n font: 700 16px/1.2 var(--font-display);\n letter-spacing: -0.02em;\n field-sizing: content;\n max-height: 2.4em;\n}\n[data-vibe-menu] .vm-composer textarea::placeholder {\n color: var(--placeholder);\n}\n[data-vibe-menu] .vm-composer .vm-attach {\n order: -1;\n width: var(--size-copy);\n height: var(--size-copy);\n margin-left: var(--space-10);\n align-self: center;\n border-radius: 50%;\n display: grid;\n place-items: center;\n flex: none;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-composer .vm-attach:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-composer .vm-glyph {\n width: 16px;\n height: 16px;\n}\n[data-vibe-menu] .vm-cap {\n flex: none;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--space-24) 0 20px;\n border-left: var(--stroke-rule) solid var(--line-card);\n background: var(--section-code);\n color: var(--on-code);\n font: 700 13px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-cap:hover {\n background: color-mix(in oklch, var(--section-code), var(--menu-ink) 10%);\n}\n[data-vibe-menu] .vm-composer.is-building .vm-cap[data-send],\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-stop] {\n display: none;\n}\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-send] {\n display: flex;\n}\n/* Rewrite mode (the settings tab's sharing rewrite): no attach button, so the\n field takes the attach's inset; a dim red X cap sits left of the action cap. */\n[data-vibe-menu] .vm-composer.is-rewrite {\n position: relative;\n}\n[data-vibe-menu] .vm-composer.is-rewrite textarea {\n margin-left: var(--space-24);\n}\n[data-vibe-menu] .vm-cap[data-cancel] {\n padding: 0 var(--space-16);\n background: var(--cancel-cap);\n color: var(--on-cancel-cap);\n}\n[data-vibe-menu] .vm-cap[data-cancel]:hover {\n background: color-mix(in oklch, var(--cancel-cap), var(--on-cancel-cap) 12%);\n}\n[data-vibe-menu] .vm-rewrite-shimmer {\n position: absolute;\n left: var(--space-24);\n top: 50%;\n width: 28%;\n height: var(--space-12);\n margin-top: calc(var(--space-12) / -2);\n border-radius: var(--radius-full);\n background: var(--placeholder);\n opacity: 0.3;\n pointer-events: none;\n animation: vm-rewrite-shimmer 1.4s ease-in-out infinite;\n}\n@keyframes vm-rewrite-shimmer {\n 50% {\n opacity: 0.12;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-rewrite-shimmer {\n animation: none;\n }\n}\n[data-vibe-menu] .vm-queue-note {\n display: none;\n margin: -10px 0 12px 18px;\n font-size: 12px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-composer:has(textarea:not(:placeholder-shown)) + .vm-queue-note {\n display: block;\n}\n/* The change box's hint (#7803 #7878): one quiet line under the box while the\n person types, in the queue note's muted voice, whose button is the second door. */\n[data-vibe-menu] .vm-door-line {\n margin: -10px 0 12px 18px;\n font-size: 12px;\n line-height: 18px;\n color: var(--muted);\n}\n/* A refused empty Send's idea (#7916): one idea, one row, ellipsized. */\n[data-vibe-menu] .vm-door-line[data-refused-send-idea] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n[data-vibe-menu] .vm-door-line .vm-door {\n all: unset;\n cursor: pointer;\n color: var(--ink);\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-color: var(--muted);\n}\n[data-vibe-menu] .vm-door-line .vm-door:focus-visible {\n outline: 2px solid var(--ink);\n outline-offset: 2px;\n border-radius: 2px;\n}\n[data-vibe-menu] .vm-composer.is-phone textarea {\n margin-right: var(--space-6);\n font-size: 16px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-attach {\n margin-left: 4px;\n width: 28px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-cap {\n padding: 0 var(--space-18) 0 var(--space-14);\n}\n\n/* ---------- Row: the bar's tab grammar inside the card ---------- */\n[data-vibe-menu] .vm-group {\n border-top: var(--stroke-rule) solid var(--line-card);\n margin: 0 calc(-1 * var(--space-16));\n}\n[data-vibe-menu] .vm-group.is-flush {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row {\n display: flex;\n align-items: center;\n gap: var(--space-12);\n width: 100%;\n height: var(--size-row);\n padding: 0 var(--space-16);\n}\n[data-vibe-menu] .vm-row.is-compact {\n height: var(--size-row-compact);\n}\n[data-vibe-menu] .vm-row + .vm-row {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row .vm-label {\n flex: 1;\n}\n[data-vibe-menu] .vm-dot {\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border-radius: 50%;\n background: var(--ink);\n color: var(--card-bg);\n display: grid;\n place-items: center;\n flex: none;\n}\n[data-vibe-menu] button.vm-row:hover .vm-dot:not(.vm-app),\n[data-vibe-menu] .vm-row.is-hover .vm-dot:not(.vm-app) {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-row.is-quiet .vm-dot {\n background: transparent;\n color: var(--ink);\n box-shadow: inset 0 0 0 2px var(--line-card);\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] {\n opacity: 0.35;\n cursor: default;\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] .vm-dot {\n background: var(--ink) !important;\n color: var(--card-bg) !important;\n}\n[data-vibe-menu] .vm-app,\n[data-vibe-menu] .vm-initial {\n font: 700 12px/1 var(--font-tab);\n box-shadow: inset 0 0 0 2px var(--line-card);\n}\n[data-vibe-menu] .vm-app {\n background: var(--app);\n color: var(--menu-ink);\n}\n[data-vibe-menu] .vm-initial {\n background: transparent;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-chev {\n display: grid;\n color: var(--muted);\n transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-chev.is-open {\n transform: rotate(90deg);\n}\n[data-vibe-menu] .vm-count {\n font: 700 12px/1 var(--font-tab);\n letter-spacing: 0.08em;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-count.is-handle {\n max-width: 45%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n letter-spacing: 0.02em;\n}\n[data-vibe-menu] .vm-switch {\n position: relative;\n width: var(--size-switch-w);\n height: 20px;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-switch);\n flex: none;\n}\n[data-vibe-menu] .vm-switch::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--ink);\n}\n[data-vibe-menu] .vm-switch.is-on {\n background: var(--accent);\n}\n[data-vibe-menu] .vm-switch.is-on::after {\n left: 18px;\n}\n\n/* ---------- BackRow and DoneButton: a drill-in's frame ---------- */\n[data-vibe-menu] .vm-back {\n display: flex;\n align-items: center;\n gap: var(--space-12);\n width: calc(100% + 2 * var(--space-16));\n height: var(--size-row-compact);\n margin: 0 calc(-1 * var(--space-16));\n padding: 0 var(--space-16);\n border-top: var(--stroke-rule) solid var(--line-card);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n}\n/* A drill that replaces the whole card body (Share, Account) sits on the card's\n top edge, which the outline already draws: no rule, and it takes the body's\n top padding so no empty band shows above it (cards-hero.css .card-title + .h-back). */\n[data-vibe-menu] .vm-back.is-top {\n margin-top: calc(-1 * var(--space-14));\n border-top: 0;\n}\n[data-vibe-menu] .vm-back .vm-label {\n flex: none;\n}\n[data-vibe-menu] .vm-back-name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font: 400 16px/1.1 var(--font-display);\n color: var(--muted);\n}\n[data-vibe-menu] .vm-back:hover .vm-dot,\n[data-vibe-menu] .vm-back.is-hover .vm-dot {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-drill {\n padding-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-sec + .vm-drill-sec {\n margin-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-line {\n margin: 0 0 var(--space-14);\n font: 700 18px/1.25 var(--font-display);\n letter-spacing: -0.01em;\n}\n[data-vibe-menu] .vm-done {\n display: block;\n width: 100%;\n height: var(--size-row-compact);\n margin-top: var(--space-16);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-done);\n background: var(--accent);\n color: var(--on-accent);\n text-align: center;\n font: 700 14px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-textbtn {\n display: block;\n width: 100%;\n height: 40px;\n margin-top: var(--space-4);\n text-align: center;\n font: 700 12px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-textbtn:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-faq {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-12);\n width: 100%;\n padding: var(--space-12) 0;\n font: 400 16px/1.3 var(--font-display);\n}\n[data-vibe-menu] .vm-faq + .vm-faq {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n\n/* ---------- MomentLine: the current moment ---------- */\n[data-vibe-menu] .vm-moments {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment {\n margin: 0;\n font: 400 16px/1.3 var(--font-display);\n color: var(--ink);\n}\n[data-vibe-menu] .vm-moment.is-pinned {\n padding: var(--space-10) var(--space-12) var(--space-12) var(--space-14);\n border: var(--stroke-rule) solid var(--line-card);\n border-left: var(--size-band) solid var(--accent);\n border-radius: var(--radius-moment);\n}\n/* A primary pinned item's main action (#7782): the full-width pill, then its quiet second ways. */\n[data-vibe-menu] .vm-moment.is-pinned > .vm-ask + .vm-moment-actions {\n margin-top: var(--space-10);\n}\n[data-vibe-menu] .vm-moment-actions:empty {\n display: none;\n}\n[data-vibe-menu] .vm-moment-text {\n margin: 0 0 var(--space-10);\n text-wrap: pretty;\n}\n/* A pinned heads-up (#6816): the summary line's muted voice, its action a text link. */\n[data-vibe-menu] .vm-moment.is-quiet {\n padding: 0 var(--space-2);\n font-size: 14px;\n color: var(--muted);\n text-wrap: pretty;\n}\n[data-vibe-menu] button.vm-moment-link {\n margin: 0;\n padding: 0;\n border: 0;\n background: none;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-moment-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6);\n}\n[data-vibe-menu] .vm-moment-hint {\n font-size: 12px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-progress,\n[data-vibe-menu] .vm-moment.is-summary {\n display: flex;\n align-items: center;\n gap: var(--space-10);\n padding: 0 var(--space-2);\n}\n[data-vibe-menu] .vm-moment.is-summary {\n color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-expander {\n width: 100%;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment.is-expander:hover {\n color: var(--ink);\n}\n/* The live line's link (the first build's real address, #6451 S9c): pointer\n events back on, since the layer takes no hits of its own. */\n[data-vibe-menu] .vm-moment-link {\n display: inline-block;\n margin: 0 var(--space-2);\n font: 400 14px/1.3 var(--font-display);\n color: var(--ink);\n text-decoration: underline;\n text-underline-offset: 3px;\n overflow-wrap: anywhere;\n pointer-events: auto;\n}\n[data-vibe-menu] .vm-live .vm-chev {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-log-clip {\n overflow: hidden;\n}\n/* Port addition (RULINGS R1): the log clip is always rendered (RECONCILE \u00A75c),\n so the base stylesheet owns its shut and open states. The shell's per-frame\n tween (T11) writes an inline height, which overrides these during motion.\n C's VIBE_MENU_SHELL_CSS does not repeat them. */\n[data-vibe-menu] .vm-log-clip[data-open=\"false\"] {\n height: 0;\n overflow: hidden;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"] {\n height: auto;\n /* Known adjustment (plan header): room for .vm-log's own 160px cap plus its\n 8px margin-top and two hairline borders, so the clip never scrolls on top\n of the log. */\n max-height: calc(var(--size-log-max, 160px) + var(--space-8) + 2 * var(--stroke-hairline));\n overflow: auto;\n /* Smoke F15: the shell's height tween makes the clip overflow for a moment;\n .vm-log scrolls itself, so the clip never shows a bar. */\n scrollbar-width: none;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"]::-webkit-scrollbar {\n display: none;\n}\n/* The peek (owner 2026-10-16): a send opens the fold about two lines high, the\n person's own words its last visible line, before the composer has cleared.\n The triangle stays folded; the peek is an invite (a tap, a wheel or a swipe in\n it opens the full log, MomentLine). Its column is bottom-aligned so the\n overflow falls off the top, and its inner scrollers cap at the same height\n so their bottom pin shows the newest line. Never part of the open\n [data-history] flex chain below. */\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] {\n height: auto;\n max-height: var(--size-log-peek);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n cursor: pointer;\n -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ink) 14px);\n mask-image: linear-gradient(to bottom, transparent, var(--ink) 14px);\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] > * {\n flex: none;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-log,\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-agent-history {\n max-height: var(--size-log-peek);\n overflow-y: hidden;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-suggestions {\n display: none;\n}\n/* The fold over the full chat (slots.agentLog): the history caps and scrolls\n itself (AgentLogHistory's compact box), so the clip drops the flat log's cap. */\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"][data-history] {\n max-height: none;\n overflow: hidden;\n}\n[data-vibe-menu] .vm-log-history {\n margin-top: var(--space-8);\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n}\n/* One scroller: the tab-row card with the full chat open. The history's own\n cap (AgentLogHistory's compact box) knows nothing of what else the card\n holds, and the first build's request headline can take a third of it: the\n card then overflowed and scrolled too, the composer slid under the row, and\n the chat's end was out of reach. Here the card is a column whose fold gives\n up exactly what the card lacks, so the history scrolls and the card never\n does. Everything else in the card keeps its own height. */\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history]) {\n display: flex;\n flex-direction: column;\n}\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history])::before {\n flex: none;\n}\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history]) .vm-card-body,\n[data-vibe-menu] .vm-ctab:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-moments:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-live:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history],\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history] .vm-log-history {\n display: flex;\n flex-direction: column;\n flex: 0 1 auto;\n min-height: 0;\n}\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history] .vm-log-history > * {\n min-height: 0;\n}\n[data-vibe-menu] .vm-ctab:has(.vm-log-clip[data-open=\"true\"][data-history]) > :not(.vm-moments),\n[data-vibe-menu] .vm-ctab .vm-live:has(.vm-log-clip[data-open=\"true\"][data-history]) > :not(.vm-log-clip) {\n flex-shrink: 0;\n}\n[data-vibe-menu] .vm-agent-history-tail {\n padding: var(--space-10) 4px var(--space-14) var(--space-24);\n}\n/* Suggestions at the end of the chat: wrapped inline links, not chips. */\n[data-vibe-menu] .vm-suggestions.is-inline {\n gap: var(--space-6) var(--space-14);\n margin-bottom: 0;\n}\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest {\n min-height: 0;\n padding: 0;\n border: none;\n border-radius: 0;\n background: none;\n text-decoration: underline;\n text-decoration-color: var(--suggest-border);\n text-decoration-thickness: 1px;\n text-underline-offset: 3px;\n}\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest:hover,\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest.is-hover,\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest.is-gold {\n background: none;\n text-decoration-color: currentColor;\n}\n[data-vibe-menu] .vm-log {\n max-height: var(--size-log-max);\n overflow-y: auto;\n overscroll-behavior: contain;\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n margin-top: var(--space-8);\n padding: var(--space-10) 4px var(--space-10) var(--space-24);\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n font-size: 13.5px;\n line-height: 1.35;\n}\n[data-vibe-menu] .vm-log-line {\n margin: 0;\n}\n[data-vibe-menu] .vm-log-line:first-child {\n margin-top: auto;\n}\n[data-vibe-menu] .vm-log-line b {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--muted);\n margin-right: 4px;\n}\n\n/* ---------- AccessToggle: Restricted | Public and its line ---------- */\n[data-vibe-menu] .vm-access {\n display: flex;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n[data-vibe-menu] .vm-access button {\n flex: 1;\n height: var(--size-bar);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-10);\n text-align: center;\n font: 700 24px/1 var(--font-display);\n letter-spacing: -0.02em;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-access button + button {\n border-left: var(--stroke-rule) solid var(--line-card);\n}\n[data-vibe-menu] .vm-access button.is-active {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-access button:not(.is-active):hover {\n background: color-mix(in srgb, var(--accent) 20%, transparent);\n}\n/* Settings still loading (preflight ruling P14): dimmed and inert. */\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] {\n opacity: var(--opacity-row-disabled);\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button {\n cursor: default;\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button:not(.is-active):hover {\n background: transparent;\n}\n[data-vibe-menu] .vm-access-line {\n display: flex;\n align-items: center;\n gap: var(--space-10);\n min-height: var(--size-access-line);\n margin: var(--space-10) 0 var(--space-12);\n padding: var(--space-6) var(--space-6) var(--space-6) var(--space-14);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-access-line);\n background: var(--share-tint);\n font-size: 16.5px;\n line-height: 1.25;\n}\n[data-vibe-menu] .vm-access-line > span {\n flex: 1;\n min-width: 0;\n}\n[data-vibe-menu] .vm-access-line .vm-glyph {\n width: 16px;\n height: 16px;\n}\n[data-vibe-menu] .vm-publish {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n padding: 5px 5px 5px var(--space-10);\n border: var(--stroke-rule) solid var(--line-card);\n border-left: var(--size-band) solid var(--accent);\n border-radius: var(--radius-moment);\n}\n[data-vibe-menu] .vm-publish b {\n font: 700 11px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\n[data-vibe-menu] .vm-publish span {\n flex: 1;\n min-width: 0;\n font-size: 13px;\n line-height: 1.25;\n color: var(--muted);\n}\n\n/* ---------- GrantControls ---------- */\n[data-vibe-menu] .vm-seg {\n display: flex;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n[data-vibe-menu] .vm-seg button {\n flex: 1;\n height: var(--size-segment);\n text-align: center;\n font-size: 11px;\n}\n[data-vibe-menu] .vm-seg button + button {\n border-left: var(--stroke-rule) solid var(--line-card);\n}\n[data-vibe-menu] .vm-seg button.is-active {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-seg.is-mini {\n margin: 0;\n border-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-seg.is-mini button {\n flex: none;\n height: var(--size-segment-mini);\n padding: 0 var(--space-8);\n font-size: 10px;\n}\n[data-vibe-menu] .vm-seg.is-mini button + button {\n border-left-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-grants {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6) var(--space-12);\n}\n[data-vibe-menu] .vm-grant-ctl {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n[data-vibe-menu] .vm-grant-name {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-grant-fixed {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--ink);\n}\n\n/* ---------- MemberRow ---------- */\n[data-vibe-menu] .vm-input {\n width: 100%;\n height: var(--size-input);\n margin-bottom: var(--space-14);\n padding: 0 var(--space-18);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-input);\n background: transparent;\n color: var(--ink);\n font: inherit;\n}\n[data-vibe-menu] .vm-members-head {\n margin-top: 0;\n padding: 2px 0 var(--space-8);\n}\n[data-vibe-menu] .vm-members-head + .vm-input {\n height: 40px;\n margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-person {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-8) var(--space-12);\n padding: var(--space-6) 0;\n}\n[data-vibe-menu] .vm-person + .vm-person {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-person .vm-label {\n flex: 1;\n min-width: 0;\n}\n[data-vibe-menu] .vm-request {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-8) var(--space-12);\n margin-bottom: 2px;\n padding: var(--space-10) var(--space-12);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-card);\n background: var(--share-tint-strong);\n}\n[data-vibe-menu] .vm-request-top {\n flex: 1 0 auto;\n}\n[data-vibe-menu] .vm-request-actions {\n display: flex;\n gap: var(--space-6);\n margin-left: auto;\n}\n[data-vibe-menu] .vm-who-block > .vm-row {\n width: calc(100% + 2 * var(--space-16));\n margin: 2px calc(-1 * var(--space-16)) 0;\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request-top {\n flex-basis: 100%;\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request .vm-grants {\n column-gap: var(--space-10);\n}\n/* stacking, as the prototype: card < bar < outline < glass and pill */\n[data-vibe-menu] .vm-frame .vm-card {\n z-index: 1;\n}\n[data-vibe-menu] .vm-frame .vm-strip {\n z-index: 2;\n}\n[data-vibe-menu] .vm-frame .vm-outline {\n z-index: 3;\n}\n[data-vibe-menu] .vm-frame .vm-glass {\n z-index: 4;\n}\n[data-vibe-menu] .vm-refresh {\n display: grid;\n place-items: center;\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: 50%;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-refresh:hover {\n background: var(--accent);\n color: var(--on-accent);\n}\n\n/* ---------- port additions: not in bundle.css ---------- */\n/* Sign-in providers (the inline sign-up drill): each brand's own mark on a\n white disc, so the logo reads the way its owner draws it on any card theme. */\n[data-vibe-menu] .vm-providers {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-14);\n margin-bottom: var(--space-4);\n}\n[data-vibe-menu] .vm-provider {\n position: relative;\n display: grid;\n place-items: center;\n width: 48px;\n height: 48px;\n padding: 0;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: 50%;\n background: var(--provider-disc);\n color: var(--provider-ink);\n cursor: pointer;\n flex: none;\n}\n[data-vibe-menu] .vm-provider svg {\n width: 22px;\n height: 22px;\n}\n[data-vibe-menu] .vm-provider[aria-disabled=\"true\"] {\n opacity: var(--opacity-row-disabled);\n cursor: default;\n}\n[data-vibe-menu] .vm-provider.is-pending {\n opacity: 1;\n animation: vm-provider-pulse 1.2s ease-in-out infinite;\n}\n[data-vibe-menu] .vm-provider-tag {\n position: absolute;\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n padding: 1px 6px;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n background: var(--accent);\n color: var(--on-accent);\n font-size: 8px;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-provider-status {\n display: flex;\n align-items: center;\n gap: var(--space-16);\n margin: var(--space-4) 0 var(--space-14) var(--space-4);\n}\n[data-vibe-menu] .vm-provider-status > div {\n min-width: 0;\n}\n/* The way back out of a provider that is opening: BackRow's dot and label,\n inline in the drill body rather than across the card's top edge. */\n[data-vibe-menu] .vm-back.is-inline {\n width: auto;\n height: var(--size-icon-circle);\n margin: 0;\n padding: 0;\n border: 0;\n background: none;\n color: var(--ink);\n cursor: pointer;\n}\n[data-vibe-menu] .vm-provider-status .vm-sub {\n margin: 0;\n}\n@keyframes vm-provider-pulse {\n 50% {\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-provider.is-pending {\n animation: none;\n }\n}\n/* Rows and the action pill can be links (Home's rows, the credits action). */\n[data-vibe-menu] :where(a.vm-row, a.vm-ask) {\n color: inherit;\n text-decoration: none;\n}\n[data-vibe-menu] a.vm-row:hover .vm-dot:not(.vm-app) {\n background: var(--accent);\n color: var(--on-accent);\n}\n/* A member's name drills into that member (spec \u00A78). */\n[data-vibe-menu] .vm-person button.vm-label {\n text-align: left;\n}\n[data-vibe-menu] .vm-chip[aria-disabled=\"true\"],\n[data-vibe-menu] .vm-cap:disabled,\n[data-vibe-menu] .vm-composer .vm-attach:disabled {\n opacity: var(--opacity-row-disabled);\n cursor: default;\n}\n/* Staged attachments above the composer: name chips, no emoji. */\n[data-vibe-menu] .vm-attachments {\n margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-attachments .vm-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-6);\n max-width: 220px;\n}\n[data-vibe-menu] .vm-attachments .vm-chip > span:last-child {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-attachments .vm-chip[data-status=\"error\"] {\n border-color: var(--section-account);\n}\n/* The one left-out sentence after a pick past the cap (#7622): the queue\n note's voice, tucked under the chips it talks about. */\n[data-vibe-menu] .vm-attach-note {\n margin: -2px 0 10px 4px;\n font-size: 12px;\n line-height: 1.4;\n color: var(--muted);\n}\n/* A suggestion's fast-path marks (RULINGS O4, production #2917 decorateChip).\n Siblings of .vm-suggest, since a button can't nest a button. The owner's\n toggle (FastPathToggle) is outline when not blessed, filled when blessed\n (aria-pressed); the badges are the marks every viewer sees. */\n[data-vibe-menu] .vm-suggest-item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n max-width: 100%;\n min-width: 0;\n}\n[data-vibe-menu] .vm-suggest-item > * {\n flex: none;\n}\n[data-vibe-menu] .vm-suggest-item > .vm-suggest {\n flex: 0 1 auto;\n}\n[data-vibe-menu] .vm-suggest-shield {\n width: var(--size-chip);\n height: var(--size-chip);\n display: inline-grid;\n place-items: center;\n border-radius: var(--radius-full);\n background: none;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-suggest-shield:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] .vm-glyph {\n fill: currentColor;\n}\n/* The non-interactive marks every viewer sees (production ChipShieldBadge,\n ChipJumpBadge): a filled shield (\"stays in this app\", server-authoritative)\n or an arrow (\"opens another app\"). Never both on one chip. */\n[data-vibe-menu] .vm-suggest-badge {\n width: var(--size-chip);\n height: var(--size-chip);\n display: inline-grid;\n place-items: center;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-badge.is-shield .vm-glyph {\n fill: currentColor;\n}\n[data-vibe-menu] .vm-suggest-badge.is-jump {\n color: var(--muted);\n}\n\n/* ---------- phones (cards-hero.css): the menu's width, not the viewport ---------- */\n@container vibe-menu (max-width: 480px) {\n [data-vibe-menu] .vm-ask {\n font-size: 18px;\n }\n /* the field keeps 16px (iOS zooms smaller fields); attach slims instead */\n [data-vibe-menu] .vm-composer textarea {\n margin-right: var(--space-6);\n font-size: 16px;\n }\n [data-vibe-menu] .vm-composer .vm-attach {\n margin-left: 4px;\n width: 28px;\n }\n [data-vibe-menu] .vm-cap {\n padding: 0 var(--space-18) 0 var(--space-14);\n }\n [data-vibe-menu] .vm-access button {\n font-size: 21px;\n }\n /* the access line keeps its sentence to two lines beside the chip */\n [data-vibe-menu] .vm-access-line {\n padding-left: 12px;\n gap: 8px;\n font-size: 15.5px;\n }\n [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n padding: 0 10px;\n }\n /* Data and Code drop under the handle on one line (two on the narrowest) */\n [data-vibe-menu] .vm-person .vm-grants {\n flex-basis: 100%;\n column-gap: var(--space-10);\n }\n [data-vibe-menu] .vm-request .vm-grants {\n column-gap: var(--space-10);\n }\n [data-vibe-menu] .vm-request-top {\n flex-basis: 100%;\n }\n [data-vibe-menu] .vm-input {\n font-size: 16px;\n }\n}\n@container vibe-menu (max-width: 359px) {\n [data-vibe-menu] .vm-access button {\n font-size: 19px;\n }\n /* the line drops its icon here: the enclosure already marks it */\n [data-vibe-menu] .vm-access-line > .vm-glyph {\n display: none;\n }\n [data-vibe-menu] .vm-access-line {\n margin: 8px 0 10px;\n font-size: 14.5px;\n }\n [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n padding: 0 8px;\n }\n /* the cap and attach slim so the field keeps room (REMIX THIS stays one line) */\n [data-vibe-menu] .vm-cap {\n padding: 0 13px 0 10px;\n letter-spacing: 0.05em;\n }\n [data-vibe-menu] .vm-composer .vm-attach {\n margin-left: 3px;\n width: 24px;\n }\n /* 16px, not the prototype's 14px: no text field under 16px on phones (spec \u00A74.5) */\n [data-vibe-menu] .vm-composer textarea {\n margin: 0 4px 0 0;\n font-size: 16px;\n }\n [data-vibe-menu] .vm-chip.vm-copy {\n padding: 0 10px;\n letter-spacing: 0.06em;\n }\n}\n";
4
+ export declare const VIBE_MENU_CSS = "\n/* ---------- tokens (tokens.json), light, then both dark arms ----------\n Detached layers (portalled out of the menu root) carry\n data-vibe-menu-detached, so every token block lists them too. */\n[data-vibe-menu],\n[data-vibe-menu-detached] {\n color-scheme: light;\n --section-home: oklch(76.02% 0.1832 146.61);\n --section-account: oklch(57.46% 0.2126 29.55);\n --section-code: oklch(89.78% 0.1857 98.22);\n --section-share: oklch(64.39% 0.1304 231.41);\n --vibes-black: #000000;\n --vibes-cream: #fffff0;\n --menu-ink: #1a1a1a;\n --card-bg: var(--vibes-cream);\n --ink: #111111;\n --muted: #555555;\n --line: #111111;\n --line-card: #111111;\n --line-hairline: #1111112e;\n --placeholder: var(--muted);\n --suggest-border: #11111173;\n --share-tint: #009ace1f;\n --share-tint-strong: #009ace40;\n --on-home: var(--menu-ink);\n --on-account: var(--vibes-cream);\n --on-code: var(--menu-ink);\n --on-share: var(--menu-ink);\n --badge: var(--section-account);\n --on-badge: var(--vibes-cream);\n --cancel-cap: #f3d6d2;\n --on-cancel-cap: #9c2318;\n --obsidian-fill: rgba(6, 9, 10, 0.94);\n --obsidian-edge: rgba(255, 255, 255, 0.17);\n --obsidian-highlight: rgba(255, 255, 255, 0.32);\n --obsidian-rim: rgba(255, 255, 255, 0.1);\n --font-display: \"Alte Haas Grotesk\", Inter, sans-serif;\n --font-tab: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --space-9: 9px;\n --space-2: 2px;\n --space-4: 4px;\n --space-6: 6px;\n --space-8: 8px;\n --space-10: 10px;\n --space-12: 12px;\n --space-14: 14px;\n --space-16: 16px;\n --space-18: 18px;\n --space-24: 24px;\n --radius-card: 16px;\n --radius-full: 999px;\n --radius-bar-end: 25px;\n --radius-access-line: 24px;\n --radius-input: 22px;\n --radius-done: 21px;\n --radius-copy: 18px;\n --radius-chip: 14px;\n --radius-moment: 12px;\n --radius-switch: 10px;\n --radius-meter: 7px;\n --obsidian-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.02);\n --swatch-selected: 0 0 0 2px #fffff0, 0 0 0 4px #111111;\n --stroke-rule: 2px;\n --stroke-hairline: 1px;\n --stroke-mini: 1.5px;\n --stroke-focus: 3px;\n --stroke-glyph: 2.4px;\n --size-icon-circle: 28px;\n --size-icon-circle-phone: 22px;\n --size-glyph: 14px;\n --size-glyph-cta: 20px;\n --size-bar: 50px;\n --size-tab: 176px;\n --size-home-extra: 14px;\n --size-bar-end: 63px;\n --size-pill-w: 120px;\n --size-pill-h: 44px;\n --size-ring: 3px;\n --size-edge: 24px;\n --size-edge-phone: 16px;\n --size-pill-flat-inset: 19px;\n --size-band: 8px;\n --size-row: 46px;\n --size-row-compact: 42px;\n --size-chip: 28px;\n --size-copy: 36px;\n --size-input: 44px;\n --size-composer: 48px;\n --size-access-line: 48px;\n --size-segment: 32px;\n --size-segment-mini: 24px;\n --size-switch-w: 36px;\n --size-meter: 14px;\n --size-card-max: 480px;\n --size-card-max-phone: 560px;\n --size-log-max: 160px;\n --size-log-peek: 120px;\n --size-code-mode-max-w: 1200px;\n --opacity-tab-inactive: 0.73;\n --opacity-row-disabled: 0.35;\n --provider-disc: #ffffff;\n --provider-ink: #111111;\n}\n@media (prefers-color-scheme: dark) {\n [data-vibe-menu],\n [data-vibe-menu-detached] {\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line-card: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --cancel-cap: #4a2420;\n --on-cancel-cap: #f1b5ad;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n }\n}\n.dark [data-vibe-menu],\n.dark [data-vibe-menu-detached] {\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line-card: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --cancel-cap: #4a2420;\n --on-cancel-cap: #f1b5ad;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n}\n\n/* ---------- the root: the phone container ---------- */\n[data-vibe-menu] {\n container-name: vibe-menu;\n container-type: inline-size;\n color: var(--ink);\n font-family: var(--font-display);\n}\n\n/* Scrollbars (smoke F15): thin, in the menu's hairline, both themes, never the\n native dark bar inside the cream card. The colour is set on the root AND\n every descendant, for every scroller the menu hosts (drills, the Embed box,\n injected panels): the app's global sheet sets scrollbar-color on *, which\n beats a colour only inherited from the root. The width rule has zero\n specificity so a part that hides its bar (the Code mode tab strip) still\n wins. The webkit arm is for engines without the standard properties; Chrome\n ignores it once they are set. */\n[data-vibe-menu],\n[data-vibe-menu] *,\n[data-vibe-menu-detached],\n[data-vibe-menu-detached] * {\n scrollbar-color: var(--line-hairline) transparent;\n}\n:where([data-vibe-menu]),\n:where([data-vibe-menu]) :where(*) {\n scrollbar-width: thin;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n background: transparent;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar-thumb {\n border-radius: var(--radius-full);\n background: var(--line-hairline);\n}\n\n/* A section is set by data-section on any ancestor (or the root), using the\n code keys: home | settings (Account) | vibe (Code) | share. It sets --accent\n (the section colour) and --on-accent (its label colour). */\n[data-vibe-menu][data-section=\"home\"],\n[data-vibe-menu] [data-section=\"home\"] {\n --accent: var(--section-home);\n --on-accent: var(--on-home);\n}\n[data-vibe-menu][data-section=\"settings\"],\n[data-vibe-menu] [data-section=\"settings\"] {\n --accent: var(--section-account);\n --on-accent: var(--on-account);\n}\n[data-vibe-menu][data-section=\"vibe\"],\n[data-vibe-menu] [data-section=\"vibe\"] {\n --accent: var(--section-code);\n --on-accent: var(--on-code);\n}\n[data-vibe-menu][data-section=\"share\"],\n[data-vibe-menu] [data-section=\"share\"] {\n --accent: var(--section-share);\n --on-accent: var(--on-share);\n}\n\n[data-vibe-menu],\n[data-vibe-menu] * {\n box-sizing: border-box;\n}\n/* the card's surface and side padding, so rows can bleed edge to edge */\n[data-vibe-menu] .vm-card-body {\n position: relative;\n padding: var(--space-14) var(--space-16) var(--space-16);\n background: var(--card-bg);\n color: var(--ink);\n font: 400 14px/20px var(--font-display);\n}\n[data-vibe-menu] .vm-card-body.is-framed {\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-card) var(--radius-card) 0 0;\n overflow: hidden;\n}\n\n/* ---------- shared ---------- */\n/* Zero specificity: every vm-* rule wins over it, and so does any utility\n class on content a host injects into the card (slots). */\n:where([data-vibe-menu]) :where(button) {\n font: inherit;\n color: inherit;\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n touch-action: manipulation;\n}\n[data-vibe-menu] .vm-glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--stroke-glyph);\n stroke-linecap: round;\n stroke-linejoin: round;\n flex: none;\n}\n[data-vibe-menu] .vm-label,\n[data-vibe-menu] .vm-seg button,\n[data-vibe-menu] .vm-chip {\n font: 700 14px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n[data-vibe-menu] .vm-label.is-plain {\n font: 700 16px/1.1 var(--font-display);\n letter-spacing: 0;\n text-transform: none;\n}\n[data-vibe-menu] .vm-kicker,\n[data-vibe-menu] .vm-subhead {\n margin: 0 0 var(--space-8);\n font: 700 10.5px/1.3 var(--font-tab);\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-subhead {\n margin: var(--space-16) 0 0;\n padding-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-sub {\n margin: var(--space-8) 0 var(--space-14);\n font-size: 13px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-app-name {\n white-space: nowrap;\n}\n/* ---------- SectionStrip: the bar ---------- */\n[data-vibe-menu] .vm-menu {\n position: relative;\n}\n[data-vibe-menu] .vm-strip {\n position: relative;\n width: calc(var(--size-tab) * 4 + var(--size-home-extra) + var(--size-bar-end) + 2px);\n height: var(--size-bar);\n}\n[data-vibe-menu] .vm-strip-slide {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: flex-end;\n border: var(--stroke-rule) solid var(--line);\n border-right: 0;\n border-radius: var(--bar-tl, var(--radius-bar-end)) 0 0 var(--radius-bar-end);\n overflow: hidden;\n background: var(--card-bg);\n /* #7329: the bar under the switch belongs to no tab's box. */\n padding-right: var(--size-bar-end);\n}\n[data-vibe-menu] .vm-tab {\n position: relative;\n width: var(--size-tab);\n flex: none;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border: 0;\n padding: 0 0 0 var(--space-9);\n cursor: pointer;\n background: var(--accent);\n}\n[data-vibe-menu] .vm-tab-circle {\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border-radius: 50%;\n background: var(--menu-ink);\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n}\n[data-vibe-menu] .vm-tab svg {\n width: calc(var(--size-icon-circle) / 2);\n height: calc(var(--size-icon-circle) / 2);\n fill: none;\n stroke: var(--vibes-cream);\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex: none;\n}\n[data-vibe-menu] .vm-tab-label {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 0 0 1.9px;\n font-family: var(--font-tab);\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 1.9px;\n text-transform: uppercase;\n white-space: nowrap;\n pointer-events: none;\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] {\n width: calc(var(--size-tab) + var(--size-home-extra));\n padding-left: calc(var(--space-9) + var(--size-home-extra) / 2);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] .vm-tab-label {\n left: calc(var(--size-home-extra) / 2);\n}\n/* #7329: Share's box ends where the switch begins; its colour runs on under\n the pill as a child painted beyond the box. */\n[data-vibe-menu] .vm-tab-run {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 100%;\n width: var(--size-bar-end);\n background: inherit;\n}\n[data-vibe-menu] .vm-tab:focus-visible {\n outline: var(--stroke-focus) solid var(--line);\n outline-offset: -3px;\n}\n/* Port change (smoke F5): the DS inset line ring vanished on the black pill\n and drew square corners. The pill's ring is cream, sits in the obsidian\n glass's 3px rim (offset 0), and follows the stadium (the pill's radius). */\n[data-vibe-menu] .vm-pill:focus-visible {\n outline: var(--stroke-focus) solid var(--vibes-cream);\n outline-offset: 0;\n}\n[data-vibe-menu] .vm-menu.has-card .vm-tab:not(.is-active) {\n opacity: var(--opacity-tab-inactive);\n}\n[data-vibe-menu] .vm-badge {\n position: absolute;\n top: -4px;\n right: 6px;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: var(--radius-full);\n background: var(--badge);\n color: var(--on-badge);\n font: 700 11px/18px var(--font-display);\n text-align: center;\n}\n/* the bar sits against the pill: it runs half the glass under it */\n[data-vibe-menu] .vm-bar-anchor {\n position: relative;\n height: var(--size-bar);\n}\n[data-vibe-menu] .vm-bar-anchor .vm-strip {\n position: absolute;\n left: 0;\n bottom: 0;\n}\n[data-vibe-menu] .vm-bar-anchor .vm-glass {\n position: absolute;\n right: 0;\n bottom: 0;\n}\n/* phones: the bar spans the width; tabs sized to their content, icon above label */\n[data-vibe-menu] .vm-strip.is-phone {\n width: 100%;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab {\n width: auto;\n flex: 1 1 auto;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-width: 0;\n padding: 4px 2px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-circle {\n width: var(--size-icon-circle-phone);\n height: var(--size-icon-circle-phone);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab svg {\n width: 12px;\n height: 12px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"home\"] {\n padding: 4px 2px 4px calc(2px + var(--size-home-extra) * 0.7);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"share\"] {\n flex-grow: 1;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-label {\n position: static;\n display: block;\n font-size: 9.6px;\n letter-spacing: 1px;\n padding: 0 0 0 1px;\n}\n\n/* ---------- VibesSwitch: the pill in its obsidian glass ---------- */\n[data-vibe-menu] .vm-glass {\n position: relative;\n width: calc(var(--size-pill-w) + 2 * var(--size-ring));\n height: calc(var(--size-pill-h) + 2 * var(--size-ring));\n border-radius: var(--radius-full);\n flex: none;\n background:\n linear-gradient(to right, transparent, var(--obsidian-highlight), transparent) top / 100% 1px no-repeat,\n linear-gradient(to bottom, var(--obsidian-highlight), transparent, var(--obsidian-edge)) left / 1px 100% no-repeat,\n var(--obsidian-fill);\n box-shadow: var(--obsidian-shadow);\n}\n[data-vibe-menu] .vm-pill {\n position: absolute;\n left: var(--size-ring);\n top: var(--size-ring);\n width: var(--size-pill-w);\n height: var(--size-pill-h);\n padding: 0;\n border: 0;\n border-radius: var(--radius-full);\n background: none;\n cursor: pointer;\n}\n/* Touching, holding or dragging on the switch never selects text, raises the\n iOS callout and magnifier, or drags an image (owner 2026-10-16). The letters\n are paths drawn twice, the second copy clipped to the knob: both sit under\n .vm-pill, so the descendant rule covers them. */\n[data-vibe-menu] .vm-glass,\n[data-vibe-menu] .vm-pill,\n[data-vibe-menu] .vm-pill * {\n -webkit-user-select: none;\n user-select: none;\n -webkit-touch-callout: none;\n}\n/* A held press slides the knob 3/4 of the way and waits (owner 2026-10-16).\n An overshooting spring would carry it past 3/4, so the held leg eases out\n with no overshoot; the release finishes on the host's own curve. */\n[data-vibe-menu] .vm-pill[data-progress=\"0.75\"] {\n --vibes-switch-slide: 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n}\n/* Reduced motion: the switch jumps between poses. Its paths carry inline\n transitions (the knob's d and 3px nudge, the letters' fills and on-knob clip), so\n only an !important rule here stops every leg, not just the d slide. */\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-pill {\n --vibes-switch-slide: 0s;\n }\n [data-vibe-menu] .vm-pill svg path {\n transition: none !important;\n }\n}\n[data-vibe-menu] .vm-switch-art {\n width: 100%;\n height: 100%;\n display: block;\n}\n[data-vibe-menu] .vm-pill .vm-badge {\n top: -6px;\n right: 4px;\n}\n/* #7079: the guest maker's save-time ask: a dot, not a count. */\n[data-vibe-menu] .vm-badge.is-dot {\n min-width: 10px;\n width: 10px;\n height: 10px;\n padding: 0;\n}\n[data-vibe-menu] .vm-chiclet {\n display: inline-block;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n background: var(--section-code);\n /* Port change: bundle.css writes #111111 (ink); text on a section colour is\n menu-ink (Global Constraints), which --on-code resolves to in both themes. */\n color: var(--on-code);\n font: 700 11px/18px var(--font-display);\n letter-spacing: 0.06em;\n}\n/* #4291. The chiclet's shape, so the two read as one row \u2014 but in the badge\n colour (the identity lane) so elevation never looks like a publish state. */\n[data-vibe-menu] .vm-admin-badge {\n display: inline-block;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n background: var(--badge);\n color: var(--on-badge);\n font: 700 11px/18px var(--font-display);\n letter-spacing: 0.06em;\n}\n\n/* ---------- MenuCard: the card, its band and the folder-tab join, drawn once ---------- */\n[data-vibe-menu] .vm-frame {\n position: relative;\n}\n[data-vibe-menu] .vm-frame .vm-card {\n position: absolute;\n left: 0;\n top: 0;\n background: var(--card-bg);\n color: var(--ink);\n overflow: hidden;\n border-radius: var(--radius-card) var(--radius-card) 0 0;\n}\n[data-vibe-menu] .vm-frame .vm-card .vm-card-body {\n padding-bottom: calc(var(--space-16) + var(--size-band));\n}\n[data-vibe-menu] .vm-outline {\n position: absolute;\n left: 0;\n top: 0;\n overflow: visible;\n pointer-events: none;\n}\n[data-vibe-menu] .vm-outline .vm-band,\n[data-vibe-menu] .vm-outline .vm-cover {\n fill: var(--accent);\n}\n[data-vibe-menu] .vm-outline .vm-edge {\n fill: none;\n stroke: var(--line);\n stroke-width: 2;\n stroke-linejoin: miter;\n}\n\n/* ---------- ActionPill: the card's one main action ---------- */\n[data-vibe-menu] .vm-ask {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-12);\n width: 100%;\n padding: var(--space-14) var(--space-18);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n background: var(--accent);\n color: var(--on-accent);\n font: 700 21px/1 var(--font-display);\n letter-spacing: -0.02em;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-ask.is-solo {\n margin-bottom: var(--space-14);\n}\n[data-vibe-menu] .vm-ask .vm-glyph {\n width: var(--size-glyph-cta);\n height: var(--size-glyph-cta);\n transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-ask:hover .vm-glyph {\n transform: translateX(4px);\n}\n[data-vibe-menu] .vm-ask.is-phone {\n font-size: 18px;\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) > span {\n flex: 1;\n}\n\n/* ---------- Chip ---------- */\n[data-vibe-menu] .vm-chip {\n height: var(--size-chip);\n padding: 0 var(--space-12);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-chip);\n background: var(--accent);\n color: var(--on-accent);\n font-size: 11px;\n flex: none;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-chip.is-ghost {\n background: transparent;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-chip.is-name {\n font: 700 14px/1 var(--font-display);\n letter-spacing: 0;\n text-transform: none;\n}\n[data-vibe-menu] .vm-chip.vm-copy {\n height: var(--size-copy);\n padding: 0 var(--space-14);\n border-radius: var(--radius-copy);\n flex-shrink: 0;\n align-self: center;\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-6);\n}\n/* Port change (smoke F9): codegen writes long chips, so a chip wraps inside\n the card (DS \"text that can outgrow its track wraps\") instead of running\n past its edge; a one-line chip keeps the 28px chip height. */\n[data-vibe-menu] .vm-suggest {\n min-height: var(--size-chip);\n max-width: 100%;\n min-width: 0;\n padding: var(--space-2) var(--space-12);\n text-align: left;\n overflow-wrap: anywhere;\n border: var(--stroke-mini) solid var(--suggest-border);\n border-radius: var(--radius-chip);\n background: none;\n color: var(--ink);\n font: 400 13px/20px var(--font-display);\n cursor: pointer;\n}\n[data-vibe-menu] .vm-suggest:hover,\n[data-vibe-menu] .vm-suggest.is-hover,\n[data-vibe-menu] .vm-suggest[aria-busy=\"true\"] {\n border-color: var(--line-card);\n background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n/* A pressed chip holds the row while its answer is on the way (a lookup, a\n fork): it stays lit, and the row takes no second press. */\n[data-vibe-menu] .vm-suggest:disabled {\n cursor: default;\n}\n[data-vibe-menu] .vm-suggest:disabled:not([aria-busy=\"true\"]) {\n opacity: 0.5;\n}\n/* The pressed one is disabled too (the row takes no second press), so it\n must outrank the app's global button:disabled dim (theme/global-styles.ts). */\n[data-vibe-menu] .vm-suggest[aria-busy=\"true\"] {\n opacity: 1;\n}\n/* The same hold on the inline links at the end of the chat: the pressed link\n keeps its lit underline, the others read as disabled (dimmed above). */\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest[aria-busy=\"true\"] {\n text-decoration-color: currentColor;\n}\n/* The gold option (#6768): the one capability the agent offered, a chip in the\n same row and the same order as the others. It wears the lit state the others\n take on hover, a full-ink outline and a filled star before the label, so it\n reads as the offer without a second colour on the card. */\n[data-vibe-menu] .vm-suggest.is-gold {\n display: inline-flex;\n align-items: center;\n gap: var(--space-6);\n border-color: var(--line-card);\n background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n[data-vibe-menu] .vm-suggest.is-gold .vm-glyph {\n flex: none;\n fill: currentColor;\n}\n[data-vibe-menu] .vm-picks {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6);\n}\n\n/* ---------- Composer: the logo pill's shape, 48px tall (owner pick B, 2026-10-26:\n near the switch's 44px curve with a full 44px cap) ---------- */\n[data-vibe-menu] .vm-composer {\n display: flex;\n align-items: stretch;\n min-height: var(--size-composer);\n margin-bottom: var(--space-16);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n overflow: hidden;\n background: var(--card-bg);\n}\n[data-vibe-menu] .vm-composer:focus-within,\n[data-vibe-menu] .vm-composer.is-focus {\n box-shadow: 0 0 0 3px var(--accent);\n}\n[data-vibe-menu] .vm-composer textarea {\n flex: 1;\n min-width: 0;\n align-self: center;\n margin: 0 var(--space-12) 0 2px;\n padding: 0;\n resize: none;\n border: 0;\n outline: 0;\n background: transparent;\n color: var(--ink);\n font: 700 16px/1.2 var(--font-display);\n letter-spacing: -0.02em;\n field-sizing: content;\n max-height: 2.4em;\n}\n[data-vibe-menu] .vm-composer textarea::placeholder {\n color: var(--placeholder);\n}\n[data-vibe-menu] .vm-composer .vm-attach {\n order: -1;\n width: var(--size-copy);\n height: var(--size-copy);\n margin-left: var(--space-10);\n align-self: center;\n border-radius: 50%;\n display: grid;\n place-items: center;\n flex: none;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-composer .vm-attach:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-composer .vm-glyph {\n width: 16px;\n height: 16px;\n}\n[data-vibe-menu] .vm-cap {\n flex: none;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--space-24) 0 20px;\n border-left: var(--stroke-rule) solid var(--line-card);\n background: var(--section-code);\n color: var(--on-code);\n font: 700 13px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-cap:hover {\n background: color-mix(in oklch, var(--section-code), var(--menu-ink) 10%);\n}\n[data-vibe-menu] .vm-composer.is-building .vm-cap[data-send],\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-stop] {\n display: none;\n}\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-send] {\n display: flex;\n}\n/* Rewrite mode (the settings tab's sharing rewrite): no attach button, so the\n field takes the attach's inset; a dim red X cap sits left of the action cap. */\n[data-vibe-menu] .vm-composer.is-rewrite {\n position: relative;\n}\n[data-vibe-menu] .vm-composer.is-rewrite textarea {\n margin-left: var(--space-24);\n}\n[data-vibe-menu] .vm-cap[data-cancel] {\n padding: 0 var(--space-16);\n background: var(--cancel-cap);\n color: var(--on-cancel-cap);\n}\n[data-vibe-menu] .vm-cap[data-cancel]:hover {\n background: color-mix(in oklch, var(--cancel-cap), var(--on-cancel-cap) 12%);\n}\n[data-vibe-menu] .vm-rewrite-shimmer {\n position: absolute;\n left: var(--space-24);\n top: 50%;\n width: 28%;\n height: var(--space-12);\n margin-top: calc(var(--space-12) / -2);\n border-radius: var(--radius-full);\n background: var(--placeholder);\n opacity: 0.3;\n pointer-events: none;\n animation: vm-rewrite-shimmer 1.4s ease-in-out infinite;\n}\n@keyframes vm-rewrite-shimmer {\n 50% {\n opacity: 0.12;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-rewrite-shimmer {\n animation: none;\n }\n}\n[data-vibe-menu] .vm-queue-note {\n display: none;\n margin: -10px 0 12px 18px;\n font-size: 12px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-composer:has(textarea:not(:placeholder-shown)) + .vm-queue-note {\n display: block;\n}\n/* The change box's hint (#7803 #7878): one quiet line under the box while the\n person types, in the queue note's muted voice, whose button is the second door. */\n[data-vibe-menu] .vm-door-line {\n margin: -10px 0 12px 18px;\n font-size: 12px;\n line-height: 18px;\n color: var(--muted);\n}\n/* A refused empty Send's idea (#7916): one idea, one row, ellipsized. */\n[data-vibe-menu] .vm-door-line[data-refused-send-idea] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n[data-vibe-menu] .vm-door-line .vm-door {\n all: unset;\n cursor: pointer;\n color: var(--ink);\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-color: var(--muted);\n}\n/* The idea's button is one unbreakable inline box, so on a phone the whole\n button overflowed the line and became its \"\u2026\" (#8646). Bounded to the room\n after \"Try:\", it ellipsizes its own tail and the idea stays readable. */\n[data-vibe-menu] .vm-door-line[data-refused-send-idea] .vm-door {\n display: inline-block;\n max-width: calc(100% - 3em);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: bottom;\n}\n[data-vibe-menu] .vm-door-line .vm-door:focus-visible {\n outline: 2px solid var(--ink);\n outline-offset: 2px;\n border-radius: 2px;\n}\n[data-vibe-menu] .vm-composer.is-phone textarea {\n margin-right: var(--space-6);\n font-size: 16px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-attach {\n margin-left: 4px;\n width: 28px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-cap {\n padding: 0 var(--space-18) 0 var(--space-14);\n}\n\n/* ---------- Row: the bar's tab grammar inside the card ---------- */\n[data-vibe-menu] .vm-group {\n border-top: var(--stroke-rule) solid var(--line-card);\n margin: 0 calc(-1 * var(--space-16));\n}\n[data-vibe-menu] .vm-group.is-flush {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row {\n display: flex;\n align-items: center;\n gap: var(--space-12);\n width: 100%;\n height: var(--size-row);\n padding: 0 var(--space-16);\n}\n[data-vibe-menu] .vm-row.is-compact {\n height: var(--size-row-compact);\n}\n[data-vibe-menu] .vm-row + .vm-row {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row .vm-label {\n flex: 1;\n}\n[data-vibe-menu] .vm-dot {\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border-radius: 50%;\n background: var(--ink);\n color: var(--card-bg);\n display: grid;\n place-items: center;\n flex: none;\n}\n[data-vibe-menu] button.vm-row:hover .vm-dot:not(.vm-app),\n[data-vibe-menu] .vm-row.is-hover .vm-dot:not(.vm-app) {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-row.is-quiet .vm-dot {\n background: transparent;\n color: var(--ink);\n box-shadow: inset 0 0 0 2px var(--line-card);\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] {\n opacity: 0.35;\n cursor: default;\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] .vm-dot {\n background: var(--ink) !important;\n color: var(--card-bg) !important;\n}\n[data-vibe-menu] .vm-app,\n[data-vibe-menu] .vm-initial {\n font: 700 12px/1 var(--font-tab);\n box-shadow: inset 0 0 0 2px var(--line-card);\n}\n[data-vibe-menu] .vm-app {\n background: var(--app);\n color: var(--menu-ink);\n}\n[data-vibe-menu] .vm-initial {\n background: transparent;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-chev {\n display: grid;\n color: var(--muted);\n transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-chev.is-open {\n transform: rotate(90deg);\n}\n[data-vibe-menu] .vm-count {\n font: 700 12px/1 var(--font-tab);\n letter-spacing: 0.08em;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-count.is-handle {\n max-width: 45%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n letter-spacing: 0.02em;\n}\n[data-vibe-menu] .vm-switch {\n position: relative;\n width: var(--size-switch-w);\n height: 20px;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-switch);\n flex: none;\n}\n[data-vibe-menu] .vm-switch::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--ink);\n}\n[data-vibe-menu] .vm-switch.is-on {\n background: var(--accent);\n}\n[data-vibe-menu] .vm-switch.is-on::after {\n left: 18px;\n}\n\n/* ---------- BackRow and DoneButton: a drill-in's frame ---------- */\n[data-vibe-menu] .vm-back {\n display: flex;\n align-items: center;\n gap: var(--space-12);\n width: calc(100% + 2 * var(--space-16));\n height: var(--size-row-compact);\n margin: 0 calc(-1 * var(--space-16));\n padding: 0 var(--space-16);\n border-top: var(--stroke-rule) solid var(--line-card);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n}\n/* A drill that replaces the whole card body (Share, Account) sits on the card's\n top edge, which the outline already draws: no rule, and it takes the body's\n top padding so no empty band shows above it (cards-hero.css .card-title + .h-back). */\n[data-vibe-menu] .vm-back.is-top {\n margin-top: calc(-1 * var(--space-14));\n border-top: 0;\n}\n[data-vibe-menu] .vm-back .vm-label {\n flex: none;\n}\n[data-vibe-menu] .vm-back-name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font: 400 16px/1.1 var(--font-display);\n color: var(--muted);\n}\n[data-vibe-menu] .vm-back:hover .vm-dot,\n[data-vibe-menu] .vm-back.is-hover .vm-dot {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-drill {\n padding-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-sec + .vm-drill-sec {\n margin-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-line {\n margin: 0 0 var(--space-14);\n font: 700 18px/1.25 var(--font-display);\n letter-spacing: -0.01em;\n}\n[data-vibe-menu] .vm-done {\n display: block;\n width: 100%;\n height: var(--size-row-compact);\n margin-top: var(--space-16);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-done);\n background: var(--accent);\n color: var(--on-accent);\n text-align: center;\n font: 700 14px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-textbtn {\n display: block;\n width: 100%;\n height: 40px;\n margin-top: var(--space-4);\n text-align: center;\n font: 700 12px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-textbtn:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-faq {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-12);\n width: 100%;\n padding: var(--space-12) 0;\n font: 400 16px/1.3 var(--font-display);\n}\n[data-vibe-menu] .vm-faq + .vm-faq {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n\n/* ---------- MomentLine: the current moment ---------- */\n[data-vibe-menu] .vm-moments {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment {\n margin: 0;\n font: 400 16px/1.3 var(--font-display);\n color: var(--ink);\n}\n[data-vibe-menu] .vm-moment.is-pinned {\n padding: var(--space-10) var(--space-12) var(--space-12) var(--space-14);\n border: var(--stroke-rule) solid var(--line-card);\n border-left: var(--size-band) solid var(--accent);\n border-radius: var(--radius-moment);\n}\n/* A primary pinned item's main action (#7782): the full-width pill, then its quiet second ways. */\n[data-vibe-menu] .vm-moment.is-pinned > .vm-ask + .vm-moment-actions {\n margin-top: var(--space-10);\n}\n[data-vibe-menu] .vm-moment-actions:empty {\n display: none;\n}\n[data-vibe-menu] .vm-moment-text {\n margin: 0 0 var(--space-10);\n text-wrap: pretty;\n}\n/* A pinned heads-up (#6816): the summary line's muted voice, its action a text link. */\n[data-vibe-menu] .vm-moment.is-quiet {\n padding: 0 var(--space-2);\n font-size: 14px;\n color: var(--muted);\n text-wrap: pretty;\n}\n[data-vibe-menu] button.vm-moment-link {\n margin: 0;\n padding: 0;\n border: 0;\n background: none;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-moment-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6);\n}\n[data-vibe-menu] .vm-moment-hint {\n font-size: 12px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-progress,\n[data-vibe-menu] .vm-moment.is-summary {\n display: flex;\n align-items: center;\n gap: var(--space-10);\n padding: 0 var(--space-2);\n}\n[data-vibe-menu] .vm-moment.is-summary {\n color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-expander {\n width: 100%;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment.is-expander:hover {\n color: var(--ink);\n}\n/* The live line's link (the first build's real address, #6451 S9c): pointer\n events back on, since the layer takes no hits of its own. */\n[data-vibe-menu] .vm-moment-link {\n display: inline-block;\n margin: 0 var(--space-2);\n font: 400 14px/1.3 var(--font-display);\n color: var(--ink);\n text-decoration: underline;\n text-underline-offset: 3px;\n overflow-wrap: anywhere;\n pointer-events: auto;\n}\n[data-vibe-menu] .vm-live .vm-chev {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-log-clip {\n overflow: hidden;\n}\n/* Port addition (RULINGS R1): the log clip is always rendered (RECONCILE \u00A75c),\n so the base stylesheet owns its shut and open states. The shell's per-frame\n tween (T11) writes an inline height, which overrides these during motion.\n C's VIBE_MENU_SHELL_CSS does not repeat them. */\n[data-vibe-menu] .vm-log-clip[data-open=\"false\"] {\n height: 0;\n overflow: hidden;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"] {\n height: auto;\n /* Known adjustment (plan header): room for .vm-log's own 160px cap plus its\n 8px margin-top and two hairline borders, so the clip never scrolls on top\n of the log. */\n max-height: calc(var(--size-log-max, 160px) + var(--space-8) + 2 * var(--stroke-hairline));\n overflow: auto;\n /* Smoke F15: the shell's height tween makes the clip overflow for a moment;\n .vm-log scrolls itself, so the clip never shows a bar. */\n scrollbar-width: none;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"]::-webkit-scrollbar {\n display: none;\n}\n/* The peek (owner 2026-10-16): a send opens the fold about two lines high, the\n person's own words its last visible line, before the composer has cleared.\n The triangle stays folded; the peek is an invite (a tap, a wheel or a swipe in\n it opens the full log, MomentLine). Its column is bottom-aligned so the\n overflow falls off the top, and its inner scrollers cap at the same height\n so their bottom pin shows the newest line. Never part of the open\n [data-history] flex chain below. */\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] {\n height: auto;\n max-height: var(--size-log-peek);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n cursor: pointer;\n -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ink) 14px);\n mask-image: linear-gradient(to bottom, transparent, var(--ink) 14px);\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] > * {\n flex: none;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-log,\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-agent-history {\n max-height: var(--size-log-peek);\n overflow-y: hidden;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-suggestions {\n display: none;\n}\n/* The fold over the full chat (slots.agentLog): the history caps and scrolls\n itself (AgentLogHistory's compact box), so the clip drops the flat log's cap. */\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"][data-history] {\n max-height: none;\n overflow: hidden;\n}\n[data-vibe-menu] .vm-log-history {\n margin-top: var(--space-8);\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n}\n/* One scroller: the tab-row card with the full chat open. The history's own\n cap (AgentLogHistory's compact box) knows nothing of what else the card\n holds, and the first build's request headline can take a third of it: the\n card then overflowed and scrolled too, the composer slid under the row, and\n the chat's end was out of reach. Here the card is a column whose fold gives\n up exactly what the card lacks, so the history scrolls and the card never\n does. Everything else in the card keeps its own height. */\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history]) {\n display: flex;\n flex-direction: column;\n}\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history])::before {\n flex: none;\n}\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history]) .vm-card-body,\n[data-vibe-menu] .vm-ctab:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-moments:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-live:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history],\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history] .vm-log-history {\n display: flex;\n flex-direction: column;\n flex: 0 1 auto;\n min-height: 0;\n}\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history] .vm-log-history > * {\n min-height: 0;\n}\n[data-vibe-menu] .vm-ctab:has(.vm-log-clip[data-open=\"true\"][data-history]) > :not(.vm-moments),\n[data-vibe-menu] .vm-ctab .vm-live:has(.vm-log-clip[data-open=\"true\"][data-history]) > :not(.vm-log-clip) {\n flex-shrink: 0;\n}\n[data-vibe-menu] .vm-agent-history-tail {\n padding: var(--space-10) 4px var(--space-14) var(--space-24);\n}\n/* Suggestions at the end of the chat: wrapped inline links, not chips. */\n[data-vibe-menu] .vm-suggestions.is-inline {\n gap: var(--space-6) var(--space-14);\n margin-bottom: 0;\n}\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest {\n min-height: 0;\n padding: 0;\n border: none;\n border-radius: 0;\n background: none;\n text-decoration: underline;\n text-decoration-color: var(--suggest-border);\n text-decoration-thickness: 1px;\n text-underline-offset: 3px;\n}\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest:hover,\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest.is-hover,\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest.is-gold {\n background: none;\n text-decoration-color: currentColor;\n}\n[data-vibe-menu] .vm-log {\n max-height: var(--size-log-max);\n overflow-y: auto;\n overscroll-behavior: contain;\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n margin-top: var(--space-8);\n padding: var(--space-10) 4px var(--space-10) var(--space-24);\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n font-size: 13.5px;\n line-height: 1.35;\n}\n[data-vibe-menu] .vm-log-line {\n margin: 0;\n}\n[data-vibe-menu] .vm-log-line:first-child {\n margin-top: auto;\n}\n[data-vibe-menu] .vm-log-line b {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--muted);\n margin-right: 4px;\n}\n\n/* ---------- AccessToggle: Restricted | Public and its line ---------- */\n[data-vibe-menu] .vm-access {\n display: flex;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n[data-vibe-menu] .vm-access button {\n flex: 1;\n height: var(--size-bar);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-10);\n text-align: center;\n font: 700 24px/1 var(--font-display);\n letter-spacing: -0.02em;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-access button + button {\n border-left: var(--stroke-rule) solid var(--line-card);\n}\n[data-vibe-menu] .vm-access button.is-active {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-access button:not(.is-active):hover {\n background: color-mix(in srgb, var(--accent) 20%, transparent);\n}\n/* Settings still loading (preflight ruling P14): dimmed and inert. */\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] {\n opacity: var(--opacity-row-disabled);\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button {\n cursor: default;\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button:not(.is-active):hover {\n background: transparent;\n}\n[data-vibe-menu] .vm-access-line {\n display: flex;\n align-items: center;\n gap: var(--space-10);\n min-height: var(--size-access-line);\n margin: var(--space-10) 0 var(--space-12);\n padding: var(--space-6) var(--space-6) var(--space-6) var(--space-14);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-access-line);\n background: var(--share-tint);\n font-size: 16.5px;\n line-height: 1.25;\n}\n[data-vibe-menu] .vm-access-line > span {\n flex: 1;\n min-width: 0;\n}\n[data-vibe-menu] .vm-access-line .vm-glyph {\n width: 16px;\n height: 16px;\n}\n[data-vibe-menu] .vm-publish {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n padding: 5px 5px 5px var(--space-10);\n border: var(--stroke-rule) solid var(--line-card);\n border-left: var(--size-band) solid var(--accent);\n border-radius: var(--radius-moment);\n}\n[data-vibe-menu] .vm-publish b {\n font: 700 11px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\n[data-vibe-menu] .vm-publish span {\n flex: 1;\n min-width: 0;\n font-size: 13px;\n line-height: 1.25;\n color: var(--muted);\n}\n\n/* ---------- GrantControls ---------- */\n[data-vibe-menu] .vm-seg {\n display: flex;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n[data-vibe-menu] .vm-seg button {\n flex: 1;\n height: var(--size-segment);\n text-align: center;\n font-size: 11px;\n}\n[data-vibe-menu] .vm-seg button + button {\n border-left: var(--stroke-rule) solid var(--line-card);\n}\n[data-vibe-menu] .vm-seg button.is-active {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-seg.is-mini {\n margin: 0;\n border-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-seg.is-mini button {\n flex: none;\n height: var(--size-segment-mini);\n padding: 0 var(--space-8);\n font-size: 10px;\n}\n[data-vibe-menu] .vm-seg.is-mini button + button {\n border-left-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-grants {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6) var(--space-12);\n}\n[data-vibe-menu] .vm-grant-ctl {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n[data-vibe-menu] .vm-grant-name {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-grant-fixed {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--ink);\n}\n\n/* ---------- MemberRow ---------- */\n[data-vibe-menu] .vm-input {\n width: 100%;\n height: var(--size-input);\n margin-bottom: var(--space-14);\n padding: 0 var(--space-18);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-input);\n background: transparent;\n color: var(--ink);\n font: inherit;\n}\n[data-vibe-menu] .vm-members-head {\n margin-top: 0;\n padding: 2px 0 var(--space-8);\n}\n[data-vibe-menu] .vm-members-head + .vm-input {\n height: 40px;\n margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-person {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-8) var(--space-12);\n padding: var(--space-6) 0;\n}\n[data-vibe-menu] .vm-person + .vm-person {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-person .vm-label {\n flex: 1;\n min-width: 0;\n}\n[data-vibe-menu] .vm-request {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-8) var(--space-12);\n margin-bottom: 2px;\n padding: var(--space-10) var(--space-12);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-card);\n background: var(--share-tint-strong);\n}\n[data-vibe-menu] .vm-request-top {\n flex: 1 0 auto;\n}\n[data-vibe-menu] .vm-request-actions {\n display: flex;\n gap: var(--space-6);\n margin-left: auto;\n}\n[data-vibe-menu] .vm-who-block > .vm-row {\n width: calc(100% + 2 * var(--space-16));\n margin: 2px calc(-1 * var(--space-16)) 0;\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request-top {\n flex-basis: 100%;\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request .vm-grants {\n column-gap: var(--space-10);\n}\n/* stacking, as the prototype: card < bar < outline < glass and pill */\n[data-vibe-menu] .vm-frame .vm-card {\n z-index: 1;\n}\n[data-vibe-menu] .vm-frame .vm-strip {\n z-index: 2;\n}\n[data-vibe-menu] .vm-frame .vm-outline {\n z-index: 3;\n}\n[data-vibe-menu] .vm-frame .vm-glass {\n z-index: 4;\n}\n[data-vibe-menu] .vm-refresh {\n display: grid;\n place-items: center;\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: 50%;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-refresh:hover {\n background: var(--accent);\n color: var(--on-accent);\n}\n\n/* ---------- port additions: not in bundle.css ---------- */\n/* Sign-in providers (the inline sign-up drill): each brand's own mark on a\n white disc, so the logo reads the way its owner draws it on any card theme. */\n[data-vibe-menu] .vm-providers {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-14);\n margin-bottom: var(--space-4);\n}\n[data-vibe-menu] .vm-provider {\n position: relative;\n display: grid;\n place-items: center;\n width: 48px;\n height: 48px;\n padding: 0;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: 50%;\n background: var(--provider-disc);\n color: var(--provider-ink);\n cursor: pointer;\n flex: none;\n}\n[data-vibe-menu] .vm-provider svg {\n width: 22px;\n height: 22px;\n}\n[data-vibe-menu] .vm-provider[aria-disabled=\"true\"] {\n opacity: var(--opacity-row-disabled);\n cursor: default;\n}\n[data-vibe-menu] .vm-provider.is-pending {\n opacity: 1;\n animation: vm-provider-pulse 1.2s ease-in-out infinite;\n}\n[data-vibe-menu] .vm-provider-tag {\n position: absolute;\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n padding: 1px 6px;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n background: var(--accent);\n color: var(--on-accent);\n font-size: 8px;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-provider-status {\n display: flex;\n align-items: center;\n gap: var(--space-16);\n margin: var(--space-4) 0 var(--space-14) var(--space-4);\n}\n[data-vibe-menu] .vm-provider-status > div {\n min-width: 0;\n}\n/* The way back out of a provider that is opening: BackRow's dot and label,\n inline in the drill body rather than across the card's top edge. */\n[data-vibe-menu] .vm-back.is-inline {\n width: auto;\n height: var(--size-icon-circle);\n margin: 0;\n padding: 0;\n border: 0;\n background: none;\n color: var(--ink);\n cursor: pointer;\n}\n[data-vibe-menu] .vm-provider-status .vm-sub {\n margin: 0;\n}\n@keyframes vm-provider-pulse {\n 50% {\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-provider.is-pending {\n animation: none;\n }\n}\n/* Rows and the action pill can be links (Home's rows, the credits action). */\n[data-vibe-menu] :where(a.vm-row, a.vm-ask) {\n color: inherit;\n text-decoration: none;\n}\n[data-vibe-menu] a.vm-row:hover .vm-dot:not(.vm-app) {\n background: var(--accent);\n color: var(--on-accent);\n}\n/* A member's name drills into that member (spec \u00A78). */\n[data-vibe-menu] .vm-person button.vm-label {\n text-align: left;\n}\n[data-vibe-menu] .vm-chip[aria-disabled=\"true\"],\n[data-vibe-menu] .vm-cap:disabled,\n[data-vibe-menu] .vm-composer .vm-attach:disabled {\n opacity: var(--opacity-row-disabled);\n cursor: default;\n}\n/* Staged attachments above the composer: name chips, no emoji. */\n[data-vibe-menu] .vm-attachments {\n margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-attachments .vm-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-6);\n max-width: 220px;\n}\n[data-vibe-menu] .vm-attachments .vm-chip > span:last-child {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-attachments .vm-chip[data-status=\"error\"] {\n border-color: var(--section-account);\n}\n/* The one left-out sentence after a pick past the cap (#7622): the queue\n note's voice, tucked under the chips it talks about. */\n[data-vibe-menu] .vm-attach-note {\n margin: -2px 0 10px 4px;\n font-size: 12px;\n line-height: 1.4;\n color: var(--muted);\n}\n/* A suggestion's fast-path marks (RULINGS O4, production #2917 decorateChip).\n Siblings of .vm-suggest, since a button can't nest a button. The owner's\n toggle (FastPathToggle) is outline when not blessed, filled when blessed\n (aria-pressed); the badges are the marks every viewer sees. */\n[data-vibe-menu] .vm-suggest-item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n max-width: 100%;\n min-width: 0;\n}\n[data-vibe-menu] .vm-suggest-item > * {\n flex: none;\n}\n[data-vibe-menu] .vm-suggest-item > .vm-suggest {\n flex: 0 1 auto;\n}\n[data-vibe-menu] .vm-suggest-shield {\n width: var(--size-chip);\n height: var(--size-chip);\n display: inline-grid;\n place-items: center;\n border-radius: var(--radius-full);\n background: none;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-suggest-shield:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] .vm-glyph {\n fill: currentColor;\n}\n/* The non-interactive marks every viewer sees (production ChipShieldBadge,\n ChipJumpBadge): a filled shield (\"stays in this app\", server-authoritative)\n or an arrow (\"opens another app\"). Never both on one chip. */\n[data-vibe-menu] .vm-suggest-badge {\n width: var(--size-chip);\n height: var(--size-chip);\n display: inline-grid;\n place-items: center;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-badge.is-shield .vm-glyph {\n fill: currentColor;\n}\n[data-vibe-menu] .vm-suggest-badge.is-jump {\n color: var(--muted);\n}\n\n/* ---------- phones (cards-hero.css): the menu's width, not the viewport ---------- */\n@container vibe-menu (max-width: 480px) {\n [data-vibe-menu] .vm-ask {\n font-size: 18px;\n }\n /* the field keeps 16px (iOS zooms smaller fields); attach slims instead */\n [data-vibe-menu] .vm-composer textarea {\n margin-right: var(--space-6);\n font-size: 16px;\n }\n [data-vibe-menu] .vm-composer .vm-attach {\n margin-left: 4px;\n width: 28px;\n }\n [data-vibe-menu] .vm-cap {\n padding: 0 var(--space-18) 0 var(--space-14);\n }\n [data-vibe-menu] .vm-access button {\n font-size: 21px;\n }\n /* the access line keeps its sentence to two lines beside the chip */\n [data-vibe-menu] .vm-access-line {\n padding-left: 12px;\n gap: 8px;\n font-size: 15.5px;\n }\n [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n padding: 0 10px;\n }\n /* Data and Code drop under the handle on one line (two on the narrowest) */\n [data-vibe-menu] .vm-person .vm-grants {\n flex-basis: 100%;\n column-gap: var(--space-10);\n }\n [data-vibe-menu] .vm-request .vm-grants {\n column-gap: var(--space-10);\n }\n [data-vibe-menu] .vm-request-top {\n flex-basis: 100%;\n }\n [data-vibe-menu] .vm-input {\n font-size: 16px;\n }\n}\n@container vibe-menu (max-width: 359px) {\n [data-vibe-menu] .vm-access button {\n font-size: 19px;\n }\n /* the line drops its icon here: the enclosure already marks it */\n [data-vibe-menu] .vm-access-line > .vm-glyph {\n display: none;\n }\n [data-vibe-menu] .vm-access-line {\n margin: 8px 0 10px;\n font-size: 14.5px;\n }\n [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n padding: 0 8px;\n }\n /* the cap and attach slim so the field keeps room (REMIX THIS stays one line) */\n [data-vibe-menu] .vm-cap {\n padding: 0 13px 0 10px;\n letter-spacing: 0.05em;\n }\n [data-vibe-menu] .vm-composer .vm-attach {\n margin-left: 3px;\n width: 24px;\n }\n /* 16px, not the prototype's 14px: no text field under 16px on phones (spec \u00A74.5) */\n [data-vibe-menu] .vm-composer textarea {\n margin: 0 4px 0 0;\n font-size: 16px;\n }\n [data-vibe-menu] .vm-chip.vm-copy {\n padding: 0 10px;\n letter-spacing: 0.06em;\n }\n}\n";
5
5
  export declare function VibeMenuStyles(): React.ReactElement;
package/components/vibe-menu/vibe-menu.styles.js CHANGED
@@ -834,6 +834,17 @@ export const VIBE_MENU_CSS = `
834
834
  text-underline-offset: 2px;
835
835
  text-decoration-color: var(--muted);
836
836
  }
837
+ /* The idea's button is one unbreakable inline box, so on a phone the whole
838
+ button overflowed the line and became its "…" (#8646). Bounded to the room
839
+ after "Try:", it ellipsizes its own tail and the idea stays readable. */
840
+ [data-vibe-menu] .vm-door-line[data-refused-send-idea] .vm-door {
841
+ display: inline-block;
842
+ max-width: calc(100% - 3em);
843
+ overflow: hidden;
844
+ text-overflow: ellipsis;
845
+ white-space: nowrap;
846
+ vertical-align: bottom;
847
+ }
837
848
  [data-vibe-menu] .vm-door-line .vm-door:focus-visible {
838
849
  outline: 2px solid var(--ink);
839
850
  outline-offset: 2px;
package/components/vibe-menu/vibe-menu.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vibe-menu.styles.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/vibe-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAiC5C,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2Ff,WAAW;;;;;2BAKL,CAAC;AAE5B,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;2DAUwB,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;6BAKA,oBAAoB;;;;+BAIlB,mBAAmB;;;;mCAIf,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwnDrD,CAAC;AAGF,MAAM,UAAU,cAAc;IAC5B,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,uBAAuB,EAAE,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;AACtF,CAAC"}
1
+ {"version":3,"file":"vibe-menu.styles.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/vibe-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAiC5C,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2Ff,WAAW;;;;;2BAKL,CAAC;AAE5B,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;2DAUwB,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;6BAKA,oBAAoB;;;;+BAIlB,mBAAmB;;;;mCAIf,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmoDrD,CAAC;AAGF,MAAM,UAAU,cAAc;IAC5B,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,uBAAuB,EAAE,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;AACtF,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vibes.diy/base",
3
- "version": "14.3.274",
3
+ "version": "14.3.276",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./index.js",
@@ -10,12 +10,12 @@
10
10
  "dependencies": {
11
11
  "@adviser/cement": "~0.5.34",
12
12
  "@emotion/css": "~11.13.5",
13
- "@vibes.diy/api-types": "14.3.274",
14
- "@vibes.diy/use-vibes-types": "14.3.274",
15
- "@vibes.diy/vibe-runtime": "14.3.274",
16
- "@vibes.diy/vibe-types": "14.3.274",
17
- "arktype": "~2.2.8",
18
- "officeparser": "~8.1.1",
13
+ "@vibes.diy/api-types": "14.3.276",
14
+ "@vibes.diy/use-vibes-types": "14.3.276",
15
+ "@vibes.diy/vibe-runtime": "14.3.276",
16
+ "@vibes.diy/vibe-types": "14.3.276",
17
+ "arktype": "~2.2.9",
18
+ "officeparser": "~8.5.0",
19
19
  "qrcode-generator": "~2.0.4",
20
20
  "react": "~19.2.9"
21
21
  },