/* ============================================================ feedback.css – bug / idea / error capture modal + ambient entries ============================================================ Styles the modal built in templates/_shared/_feedback_modal.html plus the two ambient entry points (account-menu item + footer link). Token-driven (with literal fallbacks, matching the rest of the app) so it tracks light + dark automatically wherever is stamped and the shared design tokens are loaded – including the standalone error page. The modal deliberately mirrors the shared review dialog (static/agent/ dialog.css) visually but uses its own `fb-*` classes so it never collides with dialog.js / ws-confirm.js. */ /* [hidden] must win over the display values set below. A class selector out- specifies the UA `[hidden]{display:none}` rule, so restate it per element. */ .fb-modal[hidden], .fb-panel[hidden], .fb-types[hidden], .fb-error-note[hidden], .fb-thanks[hidden], .fb-form-error[hidden] { display: none !important; } /* ── Overlay + card ────────────────────────────────────────────────────────── */ .fb-modal { position: fixed; inset: 0; z-index: 9998; /* just under the review dialog's 9999 so a stacked confirm wins */ display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .fb-backdrop { position: absolute; inset: 0; background: rgba(17, 14, 8, 0.5); /* ink-800 @ ~50% */ cursor: pointer; } .fb-card { position: relative; z-index: 1; width: 100%; max-width: 30rem; max-height: calc(100vh - 3rem); overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--parch-200, #e8e1cf); border-radius: var(--r-12, 12px); box-shadow: 0 24px 48px -16px rgba(17, 14, 8, 0.28); padding: 1.5rem 1.5rem 1.25rem; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .fb-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .fb-title { font-family: var(--serif, "Montserrat", system-ui, sans-serif); font-size: 1.0625rem; font-weight: 600; color: var(--ink-900, #1e1a12); line-height: 1.3; margin: 0; } .fb-close { flex-shrink: 0; background: transparent; border: 0; font-size: 1.35rem; line-height: 1; color: var(--ink-400, #7a7163); cursor: pointer; padding: 0.125rem 0.375rem; border-radius: 6px; } .fb-close:hover, .fb-close:focus-visible { color: var(--ink-900, #1e1a12); background: var(--parch-100, #f3efe4); outline: none; } .fb-desc { font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 0.8125rem; color: var(--ink-500, #524b3e); line-height: 1.5; margin: 0 0 1rem; } /* ── Report-type toggle ─────────────────────────────────────────────────────── */ .fb-types { display: flex; gap: 0.5rem; margin: 0 0 1rem; } .fb-type { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border: 1px solid var(--parch-200, #e8e1cf); border-radius: var(--r-8, 8px); font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 0.8125rem; color: var(--ink-700, #342e23); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .fb-type:hover { border-color: var(--ink-300, #a59c8a); } /* Selected emphasis where :has() is supported (broadly available); the native radio stays visible so the choice is clear without it. */ .fb-type:has(input:checked) { border-color: var(--primary, #6c6cff); background: color-mix(in srgb, var(--primary, #6c6cff) 8%, var(--surface, #fff)); color: var(--ink-900, #1e1a12); } /* ── Error note (shown in "error" mode instead of the toggle) ───────────────── */ .fb-error-note { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 1rem; padding: 0.55rem 0.7rem; border-radius: var(--r-8, 8px); background: var(--rust-50, #f7e9df); border: 1px solid color-mix(in srgb, var(--rust, #a85a2c) 28%, transparent); font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 0.78rem; color: var(--ink-700, #342e23); line-height: 1.45; } .fb-error-note__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--rust, #a85a2c); color: #fff; font-weight: 700; font-size: 0.72rem; margin-top: 0.05rem; } /* ── Textarea ───────────────────────────────────────────────────────────────── */ .fb-label { display: block; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-400, #8c8475); margin-bottom: 0.4rem; } .fb-textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 5.5rem; padding: 0.6rem 0.7rem; border: 1px solid var(--parch-200, #e8e1cf); border-radius: var(--r-8, 8px); background: var(--parch-50, #faf8f3); color: var(--ink-900, #1e1a12); font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 0.875rem; line-height: 1.5; } .fb-textarea::placeholder { color: var(--ink-300, #a59c8a); } .fb-textarea:focus-visible { outline: none; border-color: var(--primary, #6c6cff); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(108, 108, 255, 0.25)); } .fb-form-error { margin: 0.65rem 0 0; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 0.78rem; color: var(--rust, #a85a2c); line-height: 1.4; } /* ── Footer + buttons ───────────────────────────────────────────────────────── */ .fb-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; } .fb-footer--center { justify-content: center; } .fb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.5rem 1rem; border-radius: var(--r-8, 8px); border: 1px solid transparent; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease; } .fb-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(108, 108, 255, 0.25)); } .fb-btn[disabled] { opacity: 0.6; cursor: default; } .fb-btn--cancel { background: var(--surface, #fff); border-color: var(--parch-border, #e8e1cf); color: var(--ink-700, #342e23); } .fb-btn--cancel:hover { background: var(--parch-100, #f3efe4); border-color: var(--ink-300, #a59c8a); color: var(--ink-900, #1e1a12); } .fb-btn--go { background: var(--primary, #6c6cff); border-color: var(--primary, #6c6cff); color: var(--on-primary, #fff); } .fb-btn--go:hover:not([disabled]) { background: var(--primary-900, #2e2eab); border-color: var(--primary-900, #2e2eab); } /* ── Thank-you panel ────────────────────────────────────────────────────────── */ .fb-thanks { text-align: center; padding: 0.75rem 0.5rem 0.25rem; } .fb-thanks-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0 auto 0.75rem; border-radius: 50%; background: var(--dlg-applied-bg, #e7f0e8); color: var(--dlg-applied, #1e5220); font-size: 1.25rem; } .fb-thanks-title { font-family: var(--serif, "Montserrat", system-ui, sans-serif); font-size: 1rem; font-weight: 600; color: var(--ink-900, #1e1a12); margin: 0 0 0.35rem; } .fb-thanks-text { font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 0.85rem; color: var(--ink-500, #524b3e); line-height: 1.5; margin: 0; } /* ── App footer ────────────────────────────────────────────────────────────── A real footer bar pinned to the bottom of the viewport (see #main-content flex in workspace.css): copyright on the left, the usual webapp links on the right. The feedback entry is one of those links — a subtle text button, NOT a floating button. */ .ws-footer { flex-shrink: 0; border-top: 1px solid var(--parch-border, #e8e1cf); margin-top: 32px; padding: 18px 24px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 0.8125rem; color: var(--ink-400, #8c8475); } .ws-footer__inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px 22px; flex-wrap: wrap; } .ws-footer__copy { color: var(--ink-400, #8c8475); } .ws-footer__links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .ws-footer__link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-500, #524b3e); text-decoration: none; cursor: pointer; } .ws-footer__link:hover { color: var(--ink-900, #1e1a12); text-decoration: underline; text-underline-offset: 2px; } .ws-footer__link:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(108, 108, 255, 0.25)); border-radius: 3px; } @media (max-width: 560px) { .ws-footer__inner { flex-direction: column; align-items: flex-start; } } /* "Report this" affordance on error toasts – an inline text button that sits after the message without disturbing the toast layout. */ .toast-report { background: none; border: 0; padding: 0; margin-left: 0.5rem; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; } .toast-report:hover { opacity: 0.8; } .toast-report:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (max-width: 480px) { .fb-card { padding: 1.25rem 1rem 1rem; max-height: calc(100vh - 1.5rem); } .fb-footer { flex-direction: column-reverse; align-items: stretch; } .fb-btn { width: 100%; } }