diff --git a/src/app/globals.css b/src/app/globals.css index fb181241..79a68363 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -769,6 +769,63 @@ summary::-webkit-details-marker { --footer-scrim-height: max(7rem, calc(var(--safe-area-bottom) + 5.5rem)); } +.differentials-mobile-compare-fab { + pointer-events: none; + position: fixed; + inset-inline: max(1rem, var(--safe-area-left)) max(1rem, var(--safe-area-right)); + bottom: max(5.35rem, calc(var(--safe-area-bottom) + 5.05rem)); + z-index: 50; + display: flex; + justify-content: center; +} + +.differentials-mobile-compare-fab__button { + pointer-events: auto; + display: inline-flex; + min-height: 3.25rem; + max-width: min(100%, 36rem); + align-items: center; + gap: 0.625rem; + border-radius: 9999px; + border: 1px solid color-mix(in srgb, var(--clinical-accent), white 14%); + background: + radial-gradient( + circle at 82% 0%, + color-mix(in srgb, var(--clinical-accent-contrast) 20%, transparent), + transparent 34% + ), + linear-gradient(135deg, color-mix(in srgb, var(--clinical-accent), white 7%), var(--clinical-accent)); + padding: 0.375rem 0.625rem 0.375rem 1.25rem; + color: var(--clinical-accent-contrast); + font-size: 0.95rem; + font-weight: 900; + letter-spacing: -0.01em; + box-shadow: + 0 18px 42px rgb(0 0 0 / 24%), + 0 0 0 1px color-mix(in srgb, var(--clinical-accent-contrast) 10%, transparent) inset; + touch-action: manipulation; + transition: + transform 160ms ease, + background-color 160ms ease, + box-shadow 160ms ease; +} + +.differentials-mobile-compare-fab__button:active { + transform: translateY(1px) scale(0.99); +} + +.differentials-mobile-compare-fab__button:focus-visible { + outline: 2px solid var(--focus); + outline-offset: 3px; +} + +.differentials-mobile-compare-fab__button--empty { + border-color: var(--border-strong); + background: color-mix(in srgb, var(--surface) 92%, transparent); + color: var(--text-muted); + font-weight: 800; +} + /* Bottom-docked composer: hint row + upward dropdown grow above the pill. */ .answer-footer-search-edge { overflow: visible; diff --git a/src/components/clinical-dashboard/differentials-home.tsx b/src/components/clinical-dashboard/differentials-home.tsx index dcc9caa0..f5ba178f 100644 --- a/src/components/clinical-dashboard/differentials-home.tsx +++ b/src/components/clinical-dashboard/differentials-home.tsx @@ -159,12 +159,12 @@ function DifferentialsMobileCompareBar({ const hasSelection = selectedCount > 0; return createPortal( -
Sources not checked for this query yet.
@@ -1043,7 +1047,7 @@ function SearchResultsView({
type="button"
onClick={rerunSearch}
disabled={loading}
- className="inline-flex min-h-tap shrink-0 items-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--surface)] px-2.5 text-xs font-extrabold text-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-wait disabled:opacity-60"
+ className="inline-flex min-h-tap w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--surface)] px-2.5 text-xs font-extrabold text-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-wait disabled:opacity-60 min-[390px]:w-auto"
>