/* ═══════════════════════════════════════════════════════════ GLOBAL TOAST NOTIFICATIONS - Furobox Design System Typography and surface follow the app's own sheets — the "PDF usage" sheet in pdf_editor_screen.dart is the reference: a white card, 14px body text in #0D0D0D, and #1B91F8 for the accent. A toast is the same kind of object as those sheets, so it should not be a different visual language. It was previously a dark glass pill. Over a white page that reads as a grey slab, and it made an incidental message the darkest thing on screen. ═══════════════════════════════════════════════════════════ */ /* Base toast */ .furobox-toast { position: fixed !important; left: 50% !important; top: 24px; bottom: auto !important; transform: translateX(-50%) !important; z-index: 10000 !important; border-radius: 14px; padding: 13px 16px; background: #ffffff !important; /* No border, and a light wide shadow rather than a dark tight one — enough to lift the card off the page without reading as a grey band under it. Kept in step with the Flutter toast in furo_toast.dart. */ box-shadow: 0 3px 18px rgba(16, 24, 40, 0.07) !important; color: #0D0D0D !important; display: flex; gap: 12px; align-items: center; /* Declared, not inherited. This was the actual bug behind the message rendering in a monospace face: nothing here set a family, so the toast took whatever it landed inside. A toast is appended to the end of from JS and can be mounted on any page, so it cannot rely on inheriting the right font. */ font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; max-width: 420px; min-width: 200px; animation: toastSlideDown 0.28s ease-out; transition: top 0.28s ease, left 0.28s ease, transform 0.28s ease, opacity 0.3s ease; } /* ═══════════════════════════════════════════════════════════ ALL TYPES — one surface. Severity is carried by the accent on the action, not by recolouring the whole card: a login prompt and a failed upload are both just messages, and neither needs the page to change colour. ═══════════════════════════════════════════════════════════ */ .furobox-toast-guest, .furobox-toast-info, .furobox-toast-success, .furobox-toast-warning, .furobox-toast-error { background: #ffffff !important; color: #0D0D0D !important; } /* ═══════════════════════════════════════════════════════════ TOAST CONTENT ELEMENTS ═══════════════════════════════════════════════════════════ */ .toast-message { flex: 1; line-height: 1.45; color: #0D0D0D; font-size: 14px; } .toast-action { color: #1B91F8; text-decoration: none; background: none; border: none; /* Padding, not margin: this is the tap target. At 14px the glyphs alone are a small thing to hit with a thumb. */ padding: 11px 10px; margin: -11px 0; /* keeps the row its original height */ cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; transition: opacity 0.2s ease; white-space: nowrap; flex-shrink: 0; } .toast-action:hover { opacity: 0.75; } .toast-close { background: transparent; border: 0; font-size: 18px; line-height: 1; cursor: pointer; /* A 40x40 target around an 18px glyph — the ~24px it used to be is well under what a thumb reliably hits. Negative margin keeps the toast the same height it was. */ width: 40px; height: 40px; padding: 0; margin: -11px -8px -11px 0; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; color: #607187; opacity: 1; flex-shrink: 0; font-family: inherit; } .toast-close:hover { color: #0D0D0D; } /* ═══════════════════════════════════════════════════════════ DARK MODE — the app's own surface tokens, not an inverted light card. ═══════════════════════════════════════════════════════════ */ body.dark .furobox-toast, body.dark .furobox-toast-guest, body.dark .furobox-toast-info, body.dark .furobox-toast-success, body.dark .furobox-toast-warning, body.dark .furobox-toast-error { background: #1a1a1a !important; color: #f9fafb !important; /* Stays stronger than the light theme's: a shadow is the only thing separating a #1a1a1a card from a near-black page. */ box-shadow: 0 3px 18px rgba(0, 0, 0, 0.38) !important; } body.dark .toast-message { color: #f9fafb; } body.dark .toast-action { color: #60a5fa; } body.dark .toast-close { color: #9ca3af; } body.dark .toast-close:hover { color: #f9fafb; } /* ═══════════════════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════════════════ */ @keyframes toastSlideDown { from { opacity: 0; transform: translateX(-50%) translateY(-16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ═══════════════════════════════════════════════════════════ SIDEBAR ADJUSTMENTS - Desktop only ═══════════════════════════════════════════════════════════ */ @media (min-width: 769px) { body:not(.sidebar-open) .furobox-toast { left: calc(50% + 30px) !important; } } @media (min-width: 769px) { body.sidebar-open .furobox-toast { left: calc(50% + 125px) !important; } } /* ═══════════════════════════════════════════════════════════ MOBILE - Always centered ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .furobox-toast { left: 50% !important; transform: translateX(-50%) !important; } body.sidebar-open .furobox-toast, body:not(.sidebar-open) .furobox-toast { left: 50% !important; transform: translateX(-50%) !important; } } @media (max-width: 576px) { .furobox-toast { top: 16px; bottom: auto !important; padding: 12px 14px; max-width: calc(100% - 24px); } /* Size deliberately NOT reduced here. It used to drop to 12px on exactly the screens where the message is hardest to read, and a phone has the room — the toast spans nearly the full width. 14px matches the sheets the rest of the app shows. */ } /* ═══════════════════════════════════════════════════════════ SAFE AREA INSETS (notched devices) ═══════════════════════════════════════════════════════════ */ @supports (padding: max(0px)) { .furobox-toast:first-of-type { top: max(24px, env(safe-area-inset-top)); } @media (max-width: 576px) { .furobox-toast:first-of-type { top: max(16px, env(safe-area-inset-top)); } } } /* ═══════════════════════════════════════════════════════════ STACKING — dynamic positioning via JS ═══════════════════════════════════════════════════════════ */ /* Stacked toasts previously got a heavier shadow plus an upward one, so the second and third in a stack were noticeably darker than the first. They are the same object; one shadow, the same as the base. */ .furobox-toast ~ .furobox-toast { box-shadow: 0 3px 18px rgba(16, 24, 40, 0.07); } body.dark .furobox-toast ~ .furobox-toast { box-shadow: 0 3px 18px rgba(0, 0, 0, 0.38); } @supports (padding: max(0px)) { .furobox-toast { top: max(24px, env(safe-area-inset-top)); } @media (max-width: 576px) { .furobox-toast { top: max(16px, env(safe-area-inset-top)); } } } /* ═══════════════════════════════════════════════════════════ ACCESSIBILITY ═══════════════════════════════════════════════════════════ */ .furobox-toast:focus-within { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } @media (prefers-contrast: high) { .furobox-toast { border: 1px solid rgba(255, 255, 255, 0.4); } } @media (prefers-reduced-motion: reduce) { .furobox-toast { animation: none; transition: left 0s, transform 0s, opacity 0.3s ease; } } /* ═══════════════════════════════════════════════════════════ OVERRIDE OLD TOAST STYLES (backward compatibility) ═══════════════════════════════════════════════════════════ */ .guest-toast, #modelSwitchToast, #guestToast, #genericToast { top: 24px !important; bottom: auto !important; } @media (min-width: 769px) { body:not(.sidebar-open) .guest-toast, body:not(.sidebar-open) #modelSwitchToast, body:not(.sidebar-open) #guestToast, body:not(.sidebar-open) #genericToast { left: calc(50% + 30px) !important; } body.sidebar-open .guest-toast, body.sidebar-open #modelSwitchToast, body.sidebar-open #guestToast, body.sidebar-open #genericToast { left: calc(50% + 125px) !important; } } @media (max-width: 768px) { .guest-toast, #modelSwitchToast, #guestToast, #genericToast { left: 50% !important; transform: translateX(-50%) !important; top: 16px !important; bottom: auto !important; } } /* ======================================== OFFLINE STATE STYLING ======================================== */ body.app-offline::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.03); pointer-events: none; z-index: 9998; } body.app-offline button:not(.toast-close):not(.toast-action):not(.btn-close), body.app-offline .icon-btn, body.app-offline .icon-btn1 { opacity: 0.5 !important; cursor: not-allowed !important; } body.app-offline button[type="submit"]::after, body.app-offline .icon-btn1::after { content: '[WARN]'; position: absolute; top: -4px; right: -4px; font-size: 12px; }