/* ============ Continue-with-result chip row ============ */ /* The chip row drops to its own full-width line below the result icon/text/download. */ .result-panel { flex-wrap: wrap; } .continue-row { flex-basis: 100%; width: 100%; margin-top: 16px; padding-top: 4px; } .continue-divider { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--text-mute); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .continue-divider span { flex-shrink: 0; } .continue-divider::before, .continue-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .continue-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* .continue-chip inherits .btn .btn-ghost .btn-sm — themed for light + dark already. */ /* "More tools" dropdown. PF.bindMenu portals this to while open and PF.placeMenu pins it with position:fixed — flipping above/below, clamping into the viewport, and capping the height (scrolls internally) so no item is ever cropped off-screen. The absolute/bottom/left rules below are only a graceful fallback if JS placement never runs; inline styles win once the menu opens. */ .continue-more { position: relative; display: inline-flex; } .continue-more-btn { display: inline-flex; align-items: center; gap: 4px; } .continue-more-menu { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 170px; max-width: calc(100vw - 16px); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); padding: 4px; z-index: 50; overscroll-behavior: contain; /* a height-capped menu scrolls without chaining to the page */ /* menuIn replays on each open via the hidden toggle (display none⇄block). PF.placeMenu overrides transform-origin per flip direction. Defined in main.css. */ transform-origin: bottom left; animation: menuIn .15s cubic-bezier(.2, .7, .3, 1); } .continue-more-menu[hidden] { display: none; } .continue-more-menu button { width: 100%; background: transparent; border: none; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text); cursor: pointer; } .continue-more-menu button:hover { background: var(--bg-soft); } .continue-more-menu button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } /* Chip + menu glyphs sit inline before the label. */ .continue-chip { display: inline-flex; align-items: center; gap: 6px; } .continue-chip svg { width: 15px; height: 15px; flex-shrink: 0; } .continue-more-menu button { display: flex; align-items: center; gap: 8px; } .continue-more-menu button svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-soft); } /* ============ Rich result panels (thumbnail + type hierarchy) ============ */ /* PDF outputs: the round green check becomes a real first-page thumbnail with a success badge. */ .result-icon.result-thumb { position: relative; width: auto; height: auto; min-width: 44px; background: none; border-radius: 0; overflow: visible; } .result-thumb-img { display: block; line-height: 0; background: #fff; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); } .result-thumb-img canvas { display: block; } /* Placeholder glyph (shown until the render lands) fills a paper-sized box. */ .result-thumb-img svg { width: 44px; height: 56px; padding: 14px 12px; box-sizing: border-box; color: var(--text-mute); } .result-badge { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-elev); } .result-badge svg { width: 11px; height: 11px; } /* The success badge springs in just after the thumbnail settles (resultPop + resultRise are defined in app.css, which loads first). backwards fill keeps it hidden during the lead-in so it doesn't flash at full size first. */ .result-badge { animation: resultPop .5s cubic-bezier(.34, 1.56, .64, 1) .2s backwards; } /* Receipts / reports: a muted integrity seal — deliberately NOT the success green, so it reads as a companion artifact rather than a second "done" result. */ .result-icon.result-seal { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); } .result-icon.result-seal svg { width: 22px; height: 22px; } /* Secondary panel: slim, calm, visually subordinate to the artifact above it. */ .result-panel.is-secondary { padding: 14px 16px; margin-top: -4px; background: var(--bg-elev); border-color: var(--border); } .result-panel.is-secondary .result-icon { width: 36px; height: 36px; } .result-panel.is-secondary .result-text strong { font-size: 14px; }