/* BioHealth AI v3 – Complete Stylesheet */ /* ── CSS Variables & Light theme defaults ── */ :root { --font-body: 'DM Sans', sans-serif; --font-head: 'Syne', sans-serif; --blue: #0ea5e9; --blue-d: #0284c7; --green: #22c55e; --red: #ef4444; --purple: #a855f7; --orange: #f97316; --teal: #14b8a6; --yellow: #eab308; --cyan: #06b6d4; --pink: #ec4899; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --navbar-h: 64px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --tr: 0.22s var(--ease); /* [CHANGE 4] :root = light theme defaults so no dark values bleed through */ --bg: #f0f4f8; --bg-2: #e2e8f0; --surface: #ffffff; --surface-2: #f8fafc; --border: rgba(0,0,0,0.10); --text: #0f172a; --text-2: #475569; --text-3: #94a3b8; --input-bg: #ffffff; --input-border: rgba(0,0,0,0.18); --sh-sm: 0 1px 3px rgba(0,0,0,0.08); --sh-md: 0 4px 16px rgba(0,0,0,0.10); --sh-lg: 0 12px 40px rgba(0,0,0,0.14); --sh-xl: 0 24px 64px rgba(0,0,0,0.18); } /* [CHANGE 4] LIGHT THEME — full contrast fix. Every surface, text, border and input colour is explicitly declared so no dark-mode value bleeds through when the theme is toggled. */ [data-theme="light"] { /* Backgrounds */ --bg: #f0f4f8; --bg-2: #e2e8f0; --surface: #ffffff; --surface-2: #f8fafc; /* Borders */ --border: rgba(0, 0, 0, 0.10); --input-border: rgba(0, 0, 0, 0.18); /* Text — must always be dark on light backgrounds */ --text: #0f172a; --text-2: #475569; --text-3: #94a3b8; /* Inputs */ --input-bg: #ffffff; /* Shadows */ --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --sh-md: 0 4px 16px rgba(0, 0, 0, 0.10); --sh-lg: 0 12px 40px rgba(0, 0, 0, 0.14); --sh-xl: 0 24px 64px rgba(0, 0, 0, 0.18); } /* [CHANGE 4] DARK THEME — explicit selector only, NOT :root. Removing :root from this block stops dark values from bleeding through when data-theme="light" is set on . */ [data-theme="dark"] { --bg: #080c14; --bg-2: #0e1420; --surface: rgba(255,255,255,0.055); --surface-2: rgba(255,255,255,0.03); --border: rgba(255,255,255,0.09); --text: #f1f5f9; --text-2: #94a3b8; --text-3: #475569; --input-bg: rgba(255,255,255,0.07); --input-border: rgba(255,255,255,0.12); --sh-sm: 0 1px 3px rgba(0,0,0,0.4); --sh-md: 0 4px 16px rgba(0,0,0,0.5); --sh-lg: 0 12px 40px rgba(0,0,0,0.6); --sh-xl: 0 24px 64px rgba(0,0,0,0.7); } /* [CHANGE 4] Light mode component overrides ───────────────────────────────── Each component that uses inline rgba() or hardcoded colours must be explicitly scoped so it renders correctly in both themes. */ /* Auth popup */ [data-theme="light"] .auth-popup { background: #ffffff; } [data-theme="light"] .auth-popup-brand { border-bottom-color: rgba(0,0,0,0.10); } [data-theme="light"] .auth-popup-title { color: #0f172a; } [data-theme="light"] .google-btn { color: #0f172a; background: #f8fafc; border-color: rgba(0,0,0,0.15); } [data-theme="light"] .google-btn:hover { background: #f0f4f8; } [data-theme="light"] .input-wrap input { color: #0f172a; background: #ffffff; border-color: rgba(0,0,0,0.18); } [data-theme="light"] .auth-switch { color: #475569; } /* Navbar */ [data-theme="light"] .navbar { background: rgba(240,244,248,0.96); } [data-theme="light"] .logo-text { color: #0f172a; } [data-theme="light"] .nav-btn { color: #475569; } [data-theme="light"] .nav-btn:hover { background: #ffffff; color: #0f172a; } [data-theme="light"] .icon-btn { color: #475569; background: #ffffff; border-color: rgba(0,0,0,0.10); } [data-theme="light"] .user-menu { background: #ffffff; border-color: rgba(0,0,0,0.10); } [data-theme="light"] .user-name { color: #0f172a; } [data-theme="light"] .user-dropdown { background: #ffffff; border-color: rgba(0,0,0,0.10); } [data-theme="light"] .dropdown-header strong { color: #0f172a; } [data-theme="light"] .dropdown-header span { color: #475569; } [data-theme="light"] .user-dropdown button { color: #475569; } [data-theme="light"] .user-dropdown button:hover { background: #f8fafc; } /* Mobile nav */ [data-theme="light"] .mobile-nav { background: #f0f4f8; border-right-color: rgba(0,0,0,0.10); } [data-theme="light"] .mobile-nav-item { color: #475569; } [data-theme="light"] .mobile-nav-item:hover { background: #ffffff; color: #0f172a; } /* Tool cards */ [data-theme="light"] .tool-card { background: #ffffff; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .tool-card:hover { border-color: rgba(14,165,233,0.35); } [data-theme="light"] .tool-card-featured { background: linear-gradient(135deg,rgba(14,165,233,0.06),rgba(20,184,166,0.04)); } [data-theme="light"] .tool-card-body h3 { color: #0f172a; } [data-theme="light"] .tool-card-body p { color: #475569; } /* Health tips */ [data-theme="light"] .tip-card { background: #ffffff; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .tip-card span { color: #475569; } /* Section headers */ [data-theme="light"] .section-header h2 { color: #0f172a; } [data-theme="light"] .section-header p { color: #475569; } /* Modal */ [data-theme="light"] .modal { background: #f0f4f8; border-color: rgba(0,0,0,0.10); } [data-theme="light"] .modal-header { border-bottom-color: rgba(0,0,0,0.10); } [data-theme="light"] .modal-title { color: #0f172a; } [data-theme="light"] .modal-close { color: #475569; background: #ffffff; border-color: rgba(0,0,0,0.10); } [data-theme="light"] .modal-close:hover{ color: var(--red); background: rgba(239,68,68,0.08); } [data-theme="light"] .modal-body { color: #0f172a; } /* Form elements */ [data-theme="light"] .form-label { color: #475569; } [data-theme="light"] .form-input, [data-theme="light"] .form-select { color: #0f172a; background: #ffffff; border-color: rgba(0,0,0,0.15); } [data-theme="light"] .form-input::placeholder { color: #94a3b8; } /* Result boxes */ [data-theme="light"] .result-box { background: #f8fafc; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .result-metric { background: #ffffff; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .result-metric-label { color: #475569; } /* Disease / info lists */ [data-theme="light"] .disease-card { background: #ffffff; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .disease-card.rank-1 { background: rgba(14,165,233,0.05); border-color: rgba(14,165,233,0.3); } [data-theme="light"] .disease-name { color: #0f172a; } [data-theme="light"] .confidence-bar { background: #e2e8f0; } [data-theme="light"] .mini-title { color: #94a3b8; } [data-theme="light"] .info-list li { color: #475569; border-bottom-color: rgba(0,0,0,0.06); } /* Symptom chips */ [data-theme="light"] .symptom-chip { color: #475569; background: #ffffff; border-color: rgba(0,0,0,0.10); } [data-theme="light"] .symptom-chip:hover { border-color: rgba(14,165,233,0.4); } [data-theme="light"] .symptom-chip.selected { background: rgba(14,165,233,0.10); color: var(--blue); } /* Upload area */ [data-theme="light"] .upload-area { background: #f8fafc; border-color: rgba(0,0,0,0.15); } [data-theme="light"] .upload-area p { color: #475569; } [data-theme="light"] .upload-area small{ color: #94a3b8; } [data-theme="light"] .upload-area:hover, [data-theme="light"] .upload-area.drag-over { background: rgba(14,165,233,0.04); border-color: var(--blue); } [data-theme="light"] .preview-name { color: #0f172a; } /* AI pipeline */ [data-theme="light"] .ai-pipeline-steps { background: #ffffff; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .pipeline-dot { border-color: rgba(0,0,0,0.15); color: #94a3b8; } [data-theme="light"] .pipeline-label { color: #94a3b8; } [data-theme="light"] .pipeline-arrow { color: #94a3b8; } /* AI result sections */ [data-theme="light"] .ai-section-content { color: #475569; } [data-theme="light"] .ai-section-content p { color: #475569; } /* Doctor chat */ [data-theme="light"] .chat-messages { background: #f8fafc; } [data-theme="light"] .chat-bubble.ai { background: #ffffff; border-color: rgba(0,0,0,0.10); color: #0f172a; } [data-theme="light"] .chat-input-row { border-top-color: rgba(0,0,0,0.10); background: #f0f4f8; } [data-theme="light"] .chat-input { color: #0f172a; background: #ffffff; border-color: rgba(0,0,0,0.15); } [data-theme="light"] .chat-input::placeholder { color: #94a3b8; } /* AI status bar */ [data-theme="light"] .ai-status-bar { background: #ffffff; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .ai-layers > i { color: #94a3b8; } [data-theme="light"] .ai-layer-item.inactive { background: #f0f4f8; color: #94a3b8; } /* Hero */ [data-theme="light"] .hero-title { color: #0f172a; } [data-theme="light"] .hero-desc { color: #475569; } [data-theme="light"] .hero-stats { border-top-color: rgba(0,0,0,0.10); } [data-theme="light"] .stat small { color: #94a3b8; } /* Footer */ [data-theme="light"] .footer { border-top-color: rgba(0,0,0,0.10); } [data-theme="light"] .footer-brand { color: #0f172a; } [data-theme="light"] .footer-disclaimer, [data-theme="light"] .footer-copy { color: #94a3b8; } /* Buttons */ [data-theme="light"] .btn-outline { background: #ffffff; border-color: rgba(0,0,0,0.12); color: #475569; } [data-theme="light"] .btn-outline:hover { border-color: var(--blue); color: var(--blue); } [data-theme="light"] .shuffle-btn { background: #ffffff; border-color: rgba(0,0,0,0.10); color: #475569; } [data-theme="light"] .tool-open-btn { background: rgba(14,165,233,0.08); } /* Toasts */ [data-theme="light"] .toast { background: #ffffff; border-color: rgba(0,0,0,0.10); } /* Disclaimer box */ [data-theme="light"] .disclaimer { background: rgba(234,179,8,0.06); } /* OCR progress bar track */ [data-theme="light"] .ocr-progress-bar { background: #e2e8f0; } /* ─────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; overflow-x: hidden; transition: background var(--tr), color var(--tr); } /* ── Global scroll lock: applied when any modal/popup is open ── */ body.scroll-locked { overflow: hidden !important; position: fixed !important; width: 100% !important; /* Preserve scroll position via top (set by JS) */ /* Prevent layout shift from scrollbar disappearing */ padding-right: var(--scrollbar-width, 0px) !important; /* Block touch scrolling on iOS Safari */ touch-action: none; -webkit-overflow-scrolling: auto; } /* Allow touch scrolling INSIDE modal/overlay content */ .modal-overlay, .auth-overlay, .di-overlay, .download-overlay, .dash-overlay, #mobileNav, .settings-overlay { touch-action: pan-y; } .modal, .auth-popup, .di-modal, .download-popup, .dash-modal, .di-body, #modalBody { touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } a { color: var(--blue); text-decoration: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; } input, select, textarea { font-family: inherit; } img { max-width: 100%; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* AUTH OVERLAY */ .auth-overlay { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 16px; } .auth-popup { position: relative; width: 100%; max-width: 420px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--sh-xl); max-height: 90vh; overflow-y: auto; animation: popIn 0.25s var(--ease); } @keyframes popIn { from { opacity:0; transform: scale(0.94) translateY(12px); } to { opacity:1; transform: scale(1) translateY(0); } } .auth-popup-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 99px; display: flex; align-items: center; justify-content: center; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); font-size: 0.88rem; transition: all var(--tr); } .auth-popup-close:hover { color: var(--red); background: rgba(239,68,68,0.1); } .auth-popup-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .auth-logo { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--blue), var(--teal)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; box-shadow: 0 4px 14px rgba(14,165,233,0.4); } .auth-popup-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--text); } .auth-popup-sub { font-size: 0.8rem; color: var(--text-2); } .auth-error { display: flex; align-items: flex-start; gap: 8px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #f87171; padding: 10px 14px; border-radius: var(--r-sm); font-size: 0.83rem; margin-bottom: 14px; line-height: 1.5; } .auth-field { margin-bottom: 12px; } .auth-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-2); margin-bottom: 5px; } .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap > i:first-child { position: absolute; left: 12px; color: var(--text-3); font-size: 0.8rem; pointer-events: none; } .input-wrap input { width: 100%; padding: 11px 14px 11px 36px; border: 1.5px solid var(--input-border); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text); font-size: 0.92rem; outline: none; transition: border var(--tr), box-shadow var(--tr); } /* [CHANGE 4] Theme-specific input overrides — consolidated here, not scattered */ [data-theme="light"] .input-wrap input { color: #0f172a; background: #ffffff; border-color: rgba(0,0,0,0.18); } [data-theme="dark"] .input-wrap input { color: #f1f5f9; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); } .input-wrap input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14,165,233,0.15); } .input-wrap input::placeholder { color: var(--text-3); } .pw-toggle { position: absolute; right: 10px; color: var(--text-3); font-size: 0.8rem; padding: 4px; transition: color var(--tr); } .pw-toggle:hover { color: var(--blue); } .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border: 1.5px solid var(--input-border); border-radius: var(--r-md); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all var(--tr); margin-bottom: 4px; } /* [CHANGE 4] Google button theme colours */ [data-theme="light"] .google-btn { color: #0f172a; background: #f8fafc; border-color: rgba(0,0,0,0.15); } [data-theme="dark"] .google-btn { color: #f1f5f9; background: rgba(255,255,255,0.06); } .google-btn:hover { box-shadow: var(--sh-sm); transform: translateY(-1px); } .auth-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--text-3); font-size: 0.75rem; } .auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background: var(--border); } .auth-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; margin-top: 4px; background: linear-gradient(135deg, var(--blue), var(--blue-d)); color: #fff; border-radius: var(--r-md); font-size: 0.92rem; font-weight: 600; transition: all var(--tr); box-shadow: 0 4px 14px rgba(14,165,233,0.4); } .auth-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14,165,233,0.5); } .auth-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .guest-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; margin-top: 8px; border: 1.5px dashed var(--border); border-radius: var(--r-md); font-size: 0.86rem; font-weight: 500; color: var(--text-2); background: transparent; transition: all var(--tr); cursor: pointer; } .guest-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(14,165,233,0.05); } .guest-tag { font-size: 0.7rem; padding: 2px 8px; border-radius: 99px; background: rgba(14,165,233,0.12); color: var(--blue); font-weight: 600; } .auth-switch { text-align: center; font-size: 0.83rem; color: var(--text-2); margin-top: 14px; } .auth-switch a { color: var(--blue); font-weight: 600; } .auth-disclaimer { font-size: 0.74rem; color: var(--text-3); text-align: center; margin-top: 14px; line-height: 1.5; } .verify-notice { text-align: center; padding: 8px 0; } .verify-icon { font-size: 3rem; color: var(--blue); margin-bottom: 12px; } .verify-notice h3 { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 8px; color: var(--text); } .verify-notice p { color: var(--text-2); font-size: 0.86rem; margin-bottom: 16px; line-height: 1.6; } .btn-text { background: none; border: none; color: var(--text-3); font-size: 0.8rem; cursor: pointer; margin-top: 8px; display: block; width: 100%; text-align: center; } .btn-text:hover { color: var(--blue); } /* NAVBAR */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--navbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--border); transition: background var(--tr), box-shadow var(--tr); } /* [CHANGE 4] Navbar backgrounds */ [data-theme="dark"] .navbar { background: rgba(8,12,20,0.9); backdrop-filter: blur(20px); } [data-theme="light"] .navbar { background: rgba(240,244,248,0.96); backdrop-filter: blur(20px); } .nav-left, .nav-right { display: flex; align-items: center; gap: 8px; } .logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; } .logo-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--blue), var(--teal)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; box-shadow: 0 4px 12px rgba(14,165,233,0.35); } .logo-icon.small { width: 26px; height: 26px; font-size: 0.75rem; border-radius: 8px; } .logo-text { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--text); } .logo-accent { color: var(--blue); } .nav-center { display: flex; align-items: center; gap: 2px; } .nav-btn { padding: 7px 12px; border-radius: 99px; font-size: 0.8rem; font-weight: 500; color: var(--text-2); display: flex; align-items: center; gap: 5px; transition: all var(--tr); } .nav-btn:hover { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); } .nav-btn i { font-size: 0.73rem; } .icon-btn { width: 34px; height: 34px; border-radius: 99px; display: flex; align-items: center; justify-content: center; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); font-size: 0.82rem; transition: all var(--tr); } .icon-btn:hover { color: var(--text); } .nav-signin-btn { padding: 7px 16px; border-radius: 99px; background: linear-gradient(135deg, var(--blue), var(--blue-d)); color: #fff; font-size: 0.82rem; font-weight: 600; transition: all var(--tr); box-shadow: 0 3px 10px rgba(14,165,233,0.35); } .nav-signin-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(14,165,233,0.5); } .ai-status-dot { width: 8px; height: 8px; border-radius: 50%; transition: background var(--tr); } .ai-status-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); } .ai-status-dot.partial { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); } .ai-status-dot.offline { background: var(--red); box-shadow: 0 0 6px var(--red); } .ai-status-dot.checking { background: var(--yellow); animation: statusPulse 1s ease-in-out infinite; } @keyframes statusPulse { 0%,100%{opacity:1} 50%{opacity:0.35} } .user-menu { position: relative; display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); transition: all var(--tr); } .user-menu:hover { box-shadow: var(--sh-sm); } .user-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .user-name { font-size: 0.8rem; font-weight: 500; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--tr); backdrop-filter: blur(20px); } .user-menu:hover .user-dropdown { opacity: 1; visibility: visible; transform: none; } .dropdown-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .dropdown-header img { width: 32px; height: 32px; border-radius: 50%; } .dropdown-header strong { display: block; font-size: 0.86rem; color: var(--text); } .dropdown-header span { font-size: 0.73rem; color: var(--text-2); } .user-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; font-size: 0.84rem; color: var(--text-2); transition: all var(--tr); } .user-dropdown button:hover { background: var(--surface-2); color: var(--red); } .guest-banner { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 0.75rem; color: var(--yellow); background: rgba(234,179,8,0.08); border-bottom: 1px solid var(--border); } .hamburger { display: none; color: var(--text); font-size: 1rem; padding: 4px 8px; } .mobile-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 256px; z-index: 200; background: var(--bg); border-right: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 2px; transform: translateX(-100%); transition: transform var(--tr); box-shadow: var(--sh-xl); } .mobile-nav.open { transform: none; } .mobile-nav-close { align-self: flex-end; width: 30px; height: 30px; border-radius: 99px; display: flex; align-items: center; justify-content: center; color: var(--text-2); margin-bottom: 8px; } .mobile-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 0.86rem; color: var(--text-2); font-weight: 500; transition: all var(--tr); } .mobile-nav-item:hover { background: var(--surface); color: var(--text); } .mobile-nav-overlay { display: none; position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); } .mobile-nav-overlay.visible { display: block; } .auth-required-badge { font-size: 0.65rem; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: rgba(14,165,233,0.12); color: var(--blue); border: 1px solid rgba(14,165,233,0.2); vertical-align: middle; margin-left: 6px; } /* HERO */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: calc(var(--navbar-h) + 40px) 24px 60px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .hero-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.17; animation: floatOrb 12s ease-in-out infinite; } .hero-orb-1 { width:600px; height:600px; background: var(--blue); top:-20%; right:-15%; } .hero-orb-2 { width:500px; height:500px; background: var(--purple); bottom:-20%; left:-10%; animation-delay:-5s; } @keyframes floatOrb { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-18px) scale(1.04)} } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px,transparent 1px), linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size: 55px 55px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 70%); } .hero-content { position: relative; text-align: center; max-width: 700px; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.3); border-radius: 99px; color: var(--blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 22px; } .hero-title { font-family: var(--font-head); font-size: clamp(2rem,5vw,3.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 16px; color: var(--text); } .hero-accent { background: linear-gradient(135deg,var(--blue),var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-desc { color: var(--text-2); font-size: clamp(0.9rem,2vw,1.05rem); max-width: 560px; margin: 0 auto 28px; line-height: 1.7; } .hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 42px; } .hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-md); font-size: 0.9rem; font-weight: 600; background: linear-gradient(135deg,var(--blue),var(--blue-d)); color: #fff; box-shadow: 0 6px 20px rgba(14,165,233,0.4); transition: all var(--tr); } .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(14,165,233,0.5); } .hero-cta-outline { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--sh-sm); } .hero-cta-outline:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } .hero-stats { display: flex; justify-content: center; gap: 44px; padding-top: 28px; border-top: 1px solid var(--border); } .stat { text-align: center; } .stat span { display: block; font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--blue); } .stat small { font-size: 0.75rem; color: var(--text-3); } /* AI Status Bar */ .ai-status-bar { max-width: 600px; margin: -20px auto 48px; padding: 10px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); } .ai-layers { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .ai-layer-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; transition: all var(--tr); } .ai-layer-item.active { background: rgba(34,197,94,0.12); color: var(--green); } .ai-layer-item.inactive { background: var(--surface-2); color: var(--text-3); } .ai-layer-item i { font-size: 0.6rem; } .ai-layers > i { color: var(--text-3); font-size: 0.7rem; } /* TOOLS */ .tools-section { padding: 0 24px 72px; max-width: 1200px; margin: 0 auto; } .tips-section { padding: 0 24px 72px; max-width: 1200px; margin: 0 auto; } .section-header { text-align: center; margin-bottom: 40px; } .section-header.row { display: flex; align-items: center; justify-content: space-between; text-align: left; flex-wrap: wrap; gap: 10px; } .section-header h2 { font-family: var(--font-head); font-size: clamp(1.6rem,3vw,2.3rem); font-weight: 700; color: var(--text); } .section-header p { color: var(--text-2); font-size: 0.93rem; margin-top: 6px; } .tools-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 14px; } .tool-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: all var(--tr); overflow: hidden; } .tool-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: rgba(14,165,233,0.3); } .tool-card-featured { grid-column: span 2; flex-direction: row; align-items: center; background: linear-gradient(135deg,rgba(14,165,233,0.08),rgba(20,184,166,0.06)); border-color: rgba(14,165,233,0.2); } .tool-card-featured .tool-card-body { flex: 1; } .tool-card-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px circle at 50% 0%,rgba(14,165,233,0.06),transparent); } .tool-icon-wrap { flex-shrink: 0; } .tool-icon { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; } .bg-blue { background: linear-gradient(135deg,var(--blue),var(--blue-d)); box-shadow: 0 4px 14px rgba(14,165,233,0.4); } .bg-red { background: linear-gradient(135deg,var(--red),#b91c1c); box-shadow: 0 4px 14px rgba(239,68,68,0.4); } .bg-green { background: linear-gradient(135deg,var(--green),#15803d); box-shadow: 0 4px 14px rgba(34,197,94,0.4); } .bg-purple { background: linear-gradient(135deg,var(--purple),#7c3aed); box-shadow: 0 4px 14px rgba(168,85,247,0.4); } .bg-orange { background: linear-gradient(135deg,var(--orange),#c2410c); box-shadow: 0 4px 14px rgba(249,115,22,0.4); } .bg-teal { background: linear-gradient(135deg,var(--teal),#0f766e); box-shadow: 0 4px 14px rgba(20,184,166,0.4); } .bg-yellow { background: linear-gradient(135deg,var(--yellow),#a16207); box-shadow: 0 4px 14px rgba(234,179,8,0.4); } .bg-cyan { background: linear-gradient(135deg,var(--cyan),#0e7490); box-shadow: 0 4px 14px rgba(6,182,212,0.4); } .bg-pink { background: linear-gradient(135deg,var(--pink),#be185d); box-shadow: 0 4px 14px rgba(236,72,153,0.4); } .tool-card-body h3 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; margin-bottom: 4px; color: var(--text); } .tool-card-body p { color: var(--text-2); font-size: 0.83rem; line-height: 1.6; } .tool-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .tool-tags span { padding: 2px 9px; border-radius: 99px; font-size: 0.7rem; font-weight: 500; background: rgba(14,165,233,0.1); color: var(--blue); border: 1px solid rgba(14,165,233,0.2); } .tool-open-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 600; color: var(--blue); border: 1px solid rgba(14,165,233,0.3); background: rgba(14,165,233,0.08); transition: all var(--tr); align-self: flex-start; } .tool-open-btn:hover { background: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(14,165,233,0.4); } /* TIPS */ .shuffle-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--border); font-size: 0.8rem; font-weight: 500; color: var(--text-2); background: var(--surface); transition: all var(--tr); white-space: nowrap; } .shuffle-btn:hover { color: var(--blue); border-color: rgba(14,165,233,0.3); } .tips-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 10px; } .tip-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); transition: all var(--tr); } .tip-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); } .tip-card i { font-size: 1rem; color: var(--blue); flex-shrink: 0; width: 18px; text-align: center; } .tip-card span { font-size: 0.81rem; font-weight: 500; color: var(--text-2); line-height: 1.4; } /* FOOTER */ .footer { border-top: 1px solid var(--border); padding: 28px 24px; } .footer-inner { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); } .footer-disclaimer { font-size: 0.78rem; color: var(--text-3); line-height: 1.6; } .footer-copy { font-size: 0.73rem; color: var(--text-3); } .footer-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; } .footer-link-btn { background: none; border: none; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--blue); padding: 4px 8px; border-radius: var(--r-sm); transition: color 0.18s, background 0.18s; text-decoration: none; } .footer-link-btn:hover { color: var(--text); background: var(--surface); } /* MODAL */ .modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: all var(--tr); } .modal-overlay.open { opacity: 1; visibility: visible; } .modal { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); width: 100%; max-width: 660px; max-height: 86vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-xl); transform: scale(0.95) translateY(12px); transition: transform var(--tr); } .modal-overlay.open .modal { transform: scale(1) translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-title-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .modal-title-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: #fff; background: linear-gradient(135deg,var(--blue),var(--teal)); } .modal-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--text); } .ai-source-badge { font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: rgba(34,197,94,0.1); color: var(--green); border: 1px solid rgba(34,197,94,0.3); } .modal-close { width: 30px; height: 30px; border-radius: 99px; display: flex; align-items: center; justify-content: center; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); font-size: 0.85rem; transition: all var(--tr); flex-shrink: 0; } .modal-close:hover { color: var(--red); background: rgba(239,68,68,0.1); } .modal-body { padding: 22px 24px 26px; overflow-y: auto; flex: 1; overflow-x: hidden; line-height: 1.6; } /* FORM ELEMENTS */ .form-label { display: block; font-size: 0.76rem; font-weight: 700; color: var(--text-2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.4px; } .form-input, .form-select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--input-border); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text); font-size: 0.9rem; outline: none; transition: border var(--tr), box-shadow var(--tr); -webkit-appearance: none; } /* [CHANGE 4] Form inputs — explicit colour in both themes */ [data-theme="light"] .form-input, [data-theme="light"] .form-select { color: #0f172a; background: #ffffff; border-color: rgba(0,0,0,0.15); } [data-theme="dark"] .form-input, [data-theme="dark"] .form-select { color: #f1f5f9; background: rgba(255,255,255,0.07); } .form-input:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14,165,233,0.14); } .form-input::placeholder { color: var(--text-3); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-group { margin-bottom: 14px; } /* BUTTONS */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: var(--r-md); font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: all var(--tr); border: none; } .btn-primary { background: linear-gradient(135deg,var(--blue),var(--blue-d)); color: #fff; box-shadow: 0 4px 14px rgba(14,165,233,0.35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14,165,233,0.5); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; } .btn-outline { border: 1px solid var(--border); color: var(--text-2); background: var(--surface); } .btn-outline:hover { border-color: var(--blue); color: var(--blue); } .btn-sm { padding: 6px 14px; font-size: 0.78rem; } /* RESULT BOXES */ .result-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; margin-top: 12px; animation: fadeUp 0.3s ease; } .err-box { border-color: rgba(239,68,68,0.3); color: var(--red); } @keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } .result-metric { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); margin-bottom: 8px; } .result-metric-label { font-size: 0.8rem; color: var(--text-2); } /* SEVERITY BADGES */ .severity-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 0.76rem; font-weight: 600; } .severity-mild { background: rgba(34,197,94,0.12); color: var(--green); border: 1px solid rgba(34,197,94,0.3); } .severity-moderate { background: rgba(234,179,8,0.12); color: var(--yellow); border: 1px solid rgba(234,179,8,0.3); } .severity-severe { background: rgba(249,115,22,0.12);color: var(--orange); border: 1px solid rgba(249,115,22,0.3); } .severity-critical { background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.3); } /* SYMPTOM CHIPS */ .symptom-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; margin-top: 8px; } .symptom-chip { padding: 5px 12px; border-radius: 99px; font-size: 0.78rem; font-weight: 500; border: 1px solid var(--border); color: var(--text-2); background: var(--surface); cursor: pointer; transition: all var(--tr); white-space: nowrap; user-select: none; } .symptom-chip:hover { border-color: rgba(14,165,233,0.4); } .symptom-chip.selected { background: rgba(14,165,233,0.14); color: var(--blue); border-color: rgba(14,165,233,0.5); } /* DISEASE CARDS */ .disease-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; } .disease-card.rank-1 { border-color: rgba(14,165,233,0.35); background: rgba(14,165,233,0.04); } .disease-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .disease-name { font-weight: 700; font-size: 0.93rem; display: flex; align-items: center; color: var(--text); } .confidence-bar { height: 5px; border-radius: 99px; background: var(--border); overflow: hidden; margin: 6px 0 8px; } .confidence-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,var(--blue),var(--teal)); transition: width 0.8s ease; } .mini-section { margin-top: 8px; } .mini-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; } .info-list { list-style: none; } .info-list li { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; font-size: 0.82rem; color: var(--text-2); border-bottom: 1px solid var(--border); } .info-list li:last-child { border-bottom: none; } .info-list li i { color: var(--blue); flex-shrink: 0; margin-top: 2px; font-size: 0.7rem; } /* BMI */ .bmi-badge { display: inline-block; padding: 4px 14px; border-radius: 99px; font-size: 0.86rem; font-weight: 700; margin-top: 4px; } .bmi-Normal { background: rgba(34,197,94,0.15); color: var(--green); } .bmi-Underweight { background: rgba(6,182,212,0.15); color: var(--cyan); } .bmi-Overweight { background: rgba(234,179,8,0.15); color: var(--yellow); } .bmi-Obese { background: rgba(239,68,68,0.15); color: var(--red); } /* UPLOAD */ .upload-area { border: 2px dashed var(--border); border-radius: var(--r-lg); padding: 36px 20px; text-align: center; cursor: pointer; transition: all var(--tr); background: var(--surface-2); } .upload-area:hover, .upload-area.drag-over { border-color: var(--blue); background: rgba(14,165,233,0.04); } .upload-area i { font-size: 2rem; color: var(--text-3); margin-bottom: 10px; display: block; } .upload-area p { color: var(--text-2); font-size: 0.87rem; } .upload-area small { color: var(--text-3); font-size: 0.76rem; } .ocr-lang-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .preview-wrap { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .preview-img { width: 70px; height: 70px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); } .preview-name { font-weight: 600; font-size: 0.86rem; color: var(--text); } .preview-size { font-size: 0.73rem; color: var(--text-3); } /* AI PIPELINE */ .ai-pipeline-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 12px; } .pipeline-step { display: flex; flex-direction: column; align-items: center; gap: 3px; } .pipeline-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--text-3); transition: all var(--tr); } .pipeline-label { font-size: 0.65rem; color: var(--text-3); white-space: nowrap; } .pipeline-step.active .pipeline-dot { border-color: var(--blue); color: var(--blue); background: rgba(14,165,233,0.1); animation: pulse 1s infinite; } .pipeline-step.done .pipeline-dot { border-color: var(--green); color: var(--green); background: rgba(34,197,94,0.1); } .pipeline-step.active .pipeline-label { color: var(--blue); font-weight: 600; } .pipeline-step.done .pipeline-label { color: var(--green); } .pipeline-arrow { color: var(--text-3); font-size: 0.7rem; margin: 0 2px; } @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(14,165,233,0.4)} 50%{box-shadow:0 0 0 6px rgba(14,165,233,0)} } /* OCR PROGRESS */ .ocr-progress-bar { width: 100%; max-width: 260px; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; margin: 0 auto 8px; } .ocr-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,var(--blue),var(--teal)); transition: width 0.3s ease; } /* AI RESULT */ .ai-result { line-height: 1.7; } .ai-section { margin-bottom: 18px; } .ai-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--blue); margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid rgba(14,165,233,0.2); display: flex; align-items: center; gap: 6px; } .ai-section-content { font-size: 0.86rem; color: var(--text-2); } .ai-section-content li { padding: 3px 0; padding-left: 14px; position: relative; } .ai-section-content li::before { content: '–'; position: absolute; left: 0; color: var(--blue); } .ai-section-content p { margin-bottom: 4px; } /* CHAT */ .chat-container { display: flex; flex-direction: column; height: 460px; } .chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; } .chat-bubble { max-width: 80%; padding: 11px 14px; border-radius: 16px; font-size: 0.87rem; line-height: 1.6; animation: fadeUp 0.2s ease; } .chat-bubble.user { align-self: flex-end; background: linear-gradient(135deg,var(--blue),var(--blue-d)); color: #fff; border-bottom-right-radius: 4px; } .chat-bubble.ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--text); } .bubble-sender { font-size: 0.72rem; font-weight: 700; color: var(--green); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; } .chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; } .chat-input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--input-border); border-radius: var(--r-md); background: var(--input-bg); color: var(--text); font-size: 0.88rem; outline: none; resize: none; transition: border var(--tr); } /* [CHANGE 4] Chat input — explicit in both themes */ [data-theme="light"] .chat-input { color: #0f172a; background: #ffffff; border-color: rgba(0,0,0,0.15); } [data-theme="dark"] .chat-input { color: #f1f5f9; background: rgba(255,255,255,0.07); } .chat-input:focus { border-color: var(--blue); } .chat-input::placeholder { color: var(--text-3); } .chat-send { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; flex-shrink: 0; transition: all var(--tr); } .chat-send:hover { background: var(--blue-d); } .typing-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); display: inline-block; margin: 0 1px; animation: blink 1.2s infinite; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes blink { 0%,80%,100%{opacity:0.2} 40%{opacity:1} } /* SPINNER */ .spinner-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; gap: 10px; } .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to{transform:rotate(360deg)} } .spinner-text { font-size: 0.84rem; color: var(--text-2); } /* DISCLAIMER */ .disclaimer { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; background: rgba(234,179,8,0.07); border: 1px solid rgba(234,179,8,0.22); border-radius: var(--r-sm); font-size: 0.78rem; color: var(--yellow); margin-top: 10px; line-height: 1.5; } /* TOASTS */ .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 500; display: flex; flex-direction: column; gap: 6px; } .toast { padding: 10px 16px; border-radius: var(--r-md); font-size: 0.84rem; font-weight: 500; background: var(--bg); border: 1px solid var(--border); box-shadow: var(--sh-lg); animation: slideIn 0.3s ease; max-width: 300px; display: flex; align-items: center; gap: 8px; transition: opacity 0.3s, transform 0.3s; } .toast.success { border-color: rgba(34,197,94,0.35); color: var(--green); } .toast.error { border-color: rgba(239,68,68,0.35); color: var(--red); } .toast.info { border-color: rgba(14,165,233,0.35); color: var(--blue); } @keyframes slideIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} } /* RESPONSIVE */ @media (max-width: 768px) { .nav-center { display: none; } .hamburger { display: flex; } .user-name { display: none; } .tools-grid { grid-template-columns: 1fr; } .tool-card-featured { grid-column: span 1; flex-direction: column; } .form-row { grid-template-columns: 1fr; } .hero-stats { gap: 22px; } .modal { border-radius: var(--r-xl) var(--r-xl) 0 0; } .modal-overlay { align-items: flex-end; padding: 0; } .modal { max-height: 92vh; } .chat-container { height: 400px; } .ai-status-bar { margin: -10px 16px 32px; } } @media (max-width: 480px) { .hero-actions { flex-direction: column; align-items: stretch; } .hero-cta { justify-content: center; } .auth-popup { padding: 22px 18px; } .tips-grid { grid-template-columns: 1fr 1fr; } .hero-stats { gap: 16px; } .stat span { font-size: 1.3rem; } } /* ══════════════════════════════════════════════════════ PART 2: OCR Language Dropdown — dark mode fix Ensures dropdown options are always visible in dark mode ══════════════════════════════════════════════════════ */ #ocrLang { /* Force readable styling regardless of browser OS theme */ color-scheme: dark light; } [data-theme="dark"] #ocrLang, [data-theme="dark"] #ocrLang option { background-color: #1e293b; /* dark slate */ color: #f1f5f9; /* light text */ border-color: rgba(255,255,255,0.15); } [data-theme="light"] #ocrLang, [data-theme="light"] #ocrLang option { background-color: #ffffff; color: #0f172a; border-color: rgba(0,0,0,0.15); } /* ══════════════════════════════════════════════════════ PART 3: Apple Sign-In button styling Matches google-btn but with Apple brand colours ══════════════════════════════════════════════════════ */ .apple-btn { margin-top: 6px; /* small gap below Google button */ } [data-theme="dark"] .apple-btn { color: #f1f5f9; background: rgba(255,255,255,0.06); } [data-theme="dark"] .apple-btn:hover { background: rgba(255,255,255,0.10); } [data-theme="light"] .apple-btn { color: #0f172a; background: #f8fafc; } [data-theme="light"] .apple-btn:hover { background: #f0f4f8; } /* ══════════════════════════════════════════════════════ PART 5: Settings Modal styles ══════════════════════════════════════════════════════ */ .settings-section { margin-bottom: 4px; padding-bottom: 4px; } .settings-section-title { font-family: var(--font-head); font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 7px; } .settings-section-title i { color: var(--blue); font-size: 0.82rem; } .settings-divider { height: 1px; background: var(--border); margin: 16px 0; } /* ══════════════════════════════════════════════════════ PART 6: About Modal styles ══════════════════════════════════════════════════════ */ .about-section { margin-bottom: 4px; } .about-section-title { font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .about-section-title i { color: var(--blue); } .about-formula-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; } .about-formula-name { font-weight: 700; font-size: 0.88rem; color: var(--text); margin-bottom: 6px; } .about-formula-eq { font-family: 'Courier New', monospace; font-size: 0.82rem; color: var(--blue); background: rgba(14,165,233,0.08); border: 1px solid rgba(14,165,233,0.2); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; display: block; } .about-formula-desc { font-size: 0.8rem; color: var(--text-2); line-height: 1.6; } .about-formula-desc strong { color: var(--text); } .about-dev-card { display: flex; align-items: flex-start; gap: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; transition: all var(--tr); } .about-dev-card:hover { border-color: rgba(14,165,233,0.3); } .about-dev-avatar { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; background: linear-gradient(135deg, var(--blue), var(--teal)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; font-family: var(--font-head); box-shadow: 0 4px 12px rgba(14,165,233,0.35); } .about-dev-info { flex: 1; } .about-dev-name { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--text); margin-bottom: 2px; } .about-dev-role { font-size: 0.78rem; font-weight: 600; color: var(--blue); margin-bottom: 6px; } .about-dev-desc { font-size: 0.8rem; color: var(--text-2); line-height: 1.5; } /* ── NEW: Two-column developer profile cards ── */ .dev-section { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; } .dev-card { flex: 1 1 200px; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 16px; transition: all var(--tr); gap: 10px; } .dev-card:hover { border-color: rgba(14,165,233,0.35); transform: translateY(-2px); box-shadow: var(--sh-md); } .dev-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(14,165,233,0.4); box-shadow: 0 4px 16px rgba(14,165,233,0.2); background: var(--surface); } /* Fallback avatar when no image — initials circle */ .dev-img-placeholder { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: #fff; flex-shrink: 0; border: 3px solid rgba(255,255,255,0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.25); } .dev-card h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; } .dev-card .dev-role { font-size: 0.76rem; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: 0.5px; } .dev-card p { font-size: 0.8rem; color: var(--text-2); line-height: 1.5; margin: 0; } /* Desktop: force side-by-side for dev-section--desktop-row */ .dev-section--desktop-row { flex-wrap: nowrap; gap: 20px; } .dev-section--desktop-row .dev-card { flex: 1 1 0; min-width: 0; } /* Tablet/mobile: stack vertically */ @media (max-width: 640px) { .dev-section { flex-direction: column; } .dev-card { flex: 1 1 100%; } .dev-section--desktop-row { flex-wrap: wrap; } .dev-section--desktop-row .dev-card { flex: 1 1 100%; } } /* Mobile: stack vertically (legacy rule) */ @media (max-width: 520px) { .dev-section { flex-direction: column; } .dev-card { flex: 1 1 100%; } } /* ── Hero pipeline chips — 3 items, centred, no arrows ── */ .ai-status-bar .ai-layers { justify-content: center; gap: 12px; } /* ══════════════════════════════════════════════════════ CHANGE 3: Report analysis spinner — large, centred, no AI names ══════════════════════════════════════════════════════ */ .report-spinner { width: 52px; height: 52px; border: 4px solid var(--border); border-top-color: var(--blue); border-right-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; } .spinner-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 14px; } /* ══════════════════════════════════════════════════════ CHANGE 5: Full Responsiveness Fixes No design changes — layout/overflow/sizing only ══════════════════════════════════════════════════════ */ /* ── Base: prevent horizontal scroll globally ── */ html, body { overflow-x: hidden; } /* ── Hero: fix text overflow on small screens ── */ .hero-title { word-break: break-word; } .hero-desc { padding: 0 8px; } .hero-badge { white-space: normal; text-align: center; } /* ── Hero stats: don't overflow on tiny screens ── */ .hero-stats { flex-wrap: wrap; justify-content: center; } .stat { min-width: 70px; text-align: center; } /* ── Navbar: prevent items overflowing on mid-size screens ── */ .navbar { flex-wrap: nowrap; min-height: var(--navbar-h); } .nav-right { flex-shrink: 0; gap: 6px; } /* ── Tools grid: safe minimum column width ── */ .tools-grid { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); } /* ── Tool card featured: full width on narrow ── */ @media (max-width: 640px) { .tool-card-featured { grid-column: span 1; flex-direction: column; align-items: flex-start; } } /* ── Auth popup: full width on very small screens ── */ .auth-popup { width: 100%; box-sizing: border-box; } /* ── Modal: prevent overflow ── */ .modal-body { overflow-x: hidden; word-break: break-word; } /* ── Form rows: stack on small screens ── */ @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; gap: 10px; } .ocr-lang-row { flex-direction: column; align-items: flex-start; } } /* ── Chat container: shorter on small screens ── */ @media (max-width: 480px) { .chat-container { height: 360px; } .chat-bubble { max-width: 92%; font-size: 0.83rem; } } /* ── Health calc hub grid: 1 col on very narrow ── */ @media (max-width: 360px) { #modalBody > div > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } } /* ── AI status bar: no overflow on small ── */ .ai-status-bar { overflow: hidden; } .ai-layers { flex-wrap: wrap; } /* ── Symptom chips: no overflow ── */ .symptom-grid { max-height: 160px; } /* ── Tips grid: single column on tiny screens ── */ @media (max-width: 360px) { .tips-grid { grid-template-columns: 1fr; } } /* ── Footer: prevent text overflow ── */ .footer-copy, .footer-disclaimer { word-break: break-word; padding: 0 8px; } /* ── User dropdown: prevent going off-screen on small ── */ @media (max-width: 400px) { .user-dropdown { right: -10px; min-width: 190px; } } /* ── Toast: full width on mobile ── */ @media (max-width: 480px) { .toast-container { right: 10px; left: 10px; } .toast { max-width: 100%; } } /* ── Mobile nav items: no overflow ── */ .mobile-nav-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── About/Settings modal: scrollable on small ── */ #aboutPopup, #settingsPopup { width: 100%; } /* ── Disease card: prevent overflow ── */ .disease-card { overflow: hidden; word-break: break-word; } .info-list li { word-break: break-word; } /* ── Buttons inside modals ── */ .btn { white-space: nowrap; } @media (max-width: 400px) { .hero-actions { gap: 8px; } .hero-cta { padding: 10px 16px; font-size: 0.85rem; } } /* ── Tablet: 641–1023px ── */ @media (min-width: 641px) and (max-width: 1023px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } .tool-card-featured { grid-column: span 2; } .hero-title { font-size: clamp(1.8rem, 4vw, 2.8rem); } .tips-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Large screens: cap content width ── */ @media (min-width: 1400px) { .tools-section, .tips-section { max-width: 1400px; } .tools-grid { grid-template-columns: repeat(4, 1fr); } .tool-card-featured { grid-column: span 2; } } /* ══════════════════════════════════════════════════════════ CHAT ENHANCED — voice input, sidebar, new chat, TTS All new classes; zero existing class names modified. ══════════════════════════════════════════════════════════ */ /* ── Wrapper: sidebar + main side-by-side ── */ .chat-enhanced-wrap { display: flex; height: 520px; overflow: hidden; position: relative; } /* ── LEFT SIDEBAR ── */ .chat-sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface-2); transition: transform 0.25s var(--ease), width 0.25s var(--ease), min-width 0.25s var(--ease); overflow: hidden; } /* Desktop collapsed state — sidebar shrinks to zero width, stays in flow */ .chat-sidebar.collapsed { width: 0; min-width: 0; border-right: none; } .chat-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .chat-sidebar-title { font-size: 0.78rem; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.4px; } .chat-sidebar-clear { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 0.72rem; transition: all var(--tr); background: transparent; border: none; cursor: pointer; } .chat-sidebar-clear:hover { color: var(--red); background: rgba(239,68,68,0.1); } .recent-chats-list { flex: 1; overflow-y: auto; padding: 6px; } .no-chats-msg { font-size: 0.78rem; color: var(--text-3); text-align: center; padding: 20px 8px; line-height: 1.5; } .recent-chat-item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); text-align: left; cursor: pointer; border: 1px solid transparent; background: transparent; transition: all var(--tr); margin-bottom: 2px; } .recent-chat-item:hover { background: var(--surface); border-color: var(--border); } .recent-chat-item.active { background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.3); } .rci-title { font-size: 0.8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .rci-time { font-size: 0.7rem; color: var(--text-3); } /* Row wrapper for chat item + delete button */ .recent-chat-row { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; border-radius: var(--r-sm); border: 1px solid transparent; transition: border-color var(--tr); } .recent-chat-row:hover { border-color: var(--border); } .recent-chat-row.active { background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.3); } .recent-chat-row .recent-chat-item { flex: 1; margin-bottom: 0; border: none; background: transparent; border-radius: var(--r-sm) 0 0 var(--r-sm); } .recent-chat-row .recent-chat-item:hover { background: var(--surface); border-color: transparent; } .recent-chat-row.active .recent-chat-item { background: transparent; } .rci-delete-btn { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.18); color: #ef4444; font-size: 0.7rem; cursor: pointer; opacity: 0; transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease; margin-right: 4px; } .recent-chat-row:hover .rci-delete-btn { opacity: 1; } .rci-delete-btn:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); transform: scale(1.1); } /* Always visible on mobile — touch devices can't hover */ @media (max-width: 768px) { .rci-delete-btn { opacity: 1; width: 32px; height: 32px; } } /* Theme-aware: light mode */ [data-theme="light"] .rci-delete-btn { color: #dc2626; background: rgba(220,38,38,0.07); border-color: rgba(220,38,38,0.2); } [data-theme="light"] .rci-delete-btn:hover { background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.4); } /* Overlay for mobile sidebar ONLY — never shown on desktop */ .chat-sidebar-overlay { display: none; position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); } /* Only allow overlay to appear on mobile where sidebar is an absolute drawer */ @media (max-width: 768px) { .chat-sidebar-overlay.visible { display: block; } } /* ── MAIN CHAT ── */ .chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* ── TOP BAR ── */ .chat-topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); gap: 8px; } .chat-topbar-title { font-size: 0.82rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; } .chat-topbar-title i { color: var(--green); } .chat-topbar-btn { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-sm); font-size: 0.76rem; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: all var(--tr); white-space: nowrap; } .chat-topbar-btn:hover { color: var(--text); box-shadow: var(--sh-sm); } .new-chat-btn:hover { color: var(--blue); border-color: rgba(14,165,233,0.4); } /* Override chat-container height inside enhanced wrap */ .chat-main .chat-container { flex: 1; height: auto; display: flex; flex-direction: column; min-height: 0; } .chat-main .chat-messages { flex: 1; overflow-y: auto; min-height: 0; } /* ── MIC BUTTON ── */ .chat-mic-btn { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1.5px solid var(--border); color: var(--text-2); font-size: 0.85rem; cursor: pointer; flex-shrink: 0; transition: all var(--tr); } .chat-mic-btn:hover { color: var(--blue); border-color: rgba(14,165,233,0.4); } /* Active/recording state */ .chat-mic-btn.mic-active { background: rgba(239,68,68,0.12); border-color: var(--red); color: var(--red); animation: micPulse 1.2s ease-in-out infinite; } @keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.35); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } } /* ── LISTENING INDICATOR ── */ .voice-listening-indicator { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; background: rgba(239,68,68,0.07); border-top: 1px solid rgba(239,68,68,0.15); flex-shrink: 0; } .voice-listening-text { font-size: 0.78rem; font-weight: 600; color: var(--red); } .voice-pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: voicePulseAnim 1s ease-in-out infinite; } .voice-pulse-2 { animation-delay: 0.15s; } .voice-pulse-3 { animation-delay: 0.30s; } @keyframes voicePulseAnim { 0%,100% { transform: scale(0.7); opacity: 0.4; } 50% { transform: scale(1.3); opacity: 1; } } /* ── TTS SPEAKER BUTTON on AI bubbles ── */ .tts-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text-3); font-size: 0.62rem; cursor: pointer; margin-left: 6px; margin-top: 4px; transition: all var(--tr); vertical-align: middle; flex-shrink: 0; } .tts-btn:hover { color: var(--blue); border-color: rgba(14,165,233,0.4); } .tts-btn.tts-playing { color: var(--green); border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.08); } /* ── LIGHT MODE overrides for new elements ── */ [data-theme="light"] .chat-sidebar { background: #f8fafc; border-right-color: rgba(0,0,0,0.08); } [data-theme="light"] .chat-sidebar-header { border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .chat-topbar { background: #f8fafc; border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .chat-topbar-btn { background: #ffffff; border-color: rgba(0,0,0,0.10); color: #475569; } [data-theme="light"] .chat-topbar-title { color: #0f172a; } [data-theme="light"] .chat-mic-btn { background: #ffffff; border-color: rgba(0,0,0,0.12); color: #475569; } [data-theme="light"] .recent-chat-item:hover { background: #ffffff; } [data-theme="light"] .rci-title { color: #0f172a; } /* ── RESPONSIVE ── */ /* Tablet: narrow sidebar */ @media (max-width: 900px) { .chat-sidebar { width: 180px; } } /* Mobile: sidebar = compact slide-in overlay drawer, chat ALWAYS visible */ @media (max-width: 768px) { .chat-enhanced-wrap { height: 540px; position: relative; overflow: hidden; flex-direction: row; /* Keep row — sidebar overlays, not stacks */ } /* Sidebar: absolute overlay, max 68% so chat area always shows */ .chat-sidebar { position: absolute; left: 0; top: 46px; bottom: 0; width: min(68%, 240px); max-width: 240px; max-height: calc(100% - 46px); z-index: 50; transform: translateX(-100%); box-shadow: 6px 0 32px rgba(0,0,0,0.55); background: var(--bg); border-right: 1px solid var(--border); transition: transform 0.28s cubic-bezier(0.16,1,0.3,1); overflow-y: auto; overflow-x: hidden; } .chat-sidebar.open { transform: translateX(0); } .chat-sidebar.collapsed { /* On mobile collapsed = off screen */ transform: translateX(-100%); width: min(68%, 240px); min-width: unset; border-right: none; } /* Chat main: always full width regardless of sidebar state */ .chat-main { flex: 1; width: 100%; min-width: 0; position: relative; z-index: 10; } /* Dim overlay behind drawer, partial opacity so chat remains visible */ .chat-sidebar-overlay { position: absolute; top: 46px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); z-index: 40; display: none; cursor: pointer; } .chat-sidebar-overlay.visible { display: block; } /* Compact topbar on mobile */ .chat-topbar-btn span { display: none; } .chat-topbar-btn { padding: 5px 7px; min-width: 30px; } .chat-topbar { gap: 4px; padding: 6px 8px; } } /* Small phones */ @media (max-width: 480px) { .chat-enhanced-wrap { height: 500px; } .chat-sidebar { width: min(75%, 220px); } .chat-topbar-title { font-size: 0.75rem; } .chat-input-row { gap: 6px; } .chat-input-row input { font-size: 0.9rem; } } /* Very small phones */ @media (max-width: 360px) { .chat-enhanced-wrap { height: 460px; } .chat-sidebar { width: min(80%, 200px); } } /* ═══════════════════════════════════════════════════════════ FIX 3+4: Markdown rendering styles for AI chat bubbles and report analysis output ═══════════════════════════════════════════════════════════ */ .bubble-content, .markdown-body { line-height: 1.65; color: var(--text-1); } .bubble-content h1,.bubble-content h2,.bubble-content h3, .markdown-body h1,.markdown-body h2,.markdown-body h3 { font-family: var(--font-head); font-weight: 700; color: var(--blue); margin: 0.9em 0 0.3em; line-height: 1.3; } .bubble-content h2,.markdown-body h2 { font-size: 0.97rem; } .bubble-content h3,.markdown-body h3 { font-size: 0.9rem; } .bubble-content p,.markdown-body p { margin: 0.4em 0; } .bubble-content ul,.bubble-content ol, .markdown-body ul,.markdown-body ol { margin: 0.4em 0 0.4em 1.3em; padding: 0; } .bubble-content li,.markdown-body li { margin: 0.25em 0; line-height: 1.55; } .bubble-content strong,.markdown-body strong { font-weight: 700; color: var(--text-1); } .bubble-content em,.markdown-body em { font-style: italic; color: var(--text-2); } .bubble-content code,.markdown-body code { font-family: monospace; font-size: 0.85em; background: var(--surface-2, rgba(255,255,255,0.07)); border-radius: 4px; padding: 1px 5px; } .bubble-content blockquote,.markdown-body blockquote { border-left: 3px solid var(--blue); margin: 0.5em 0; padding: 4px 12px; color: var(--text-2); font-style: italic; } /* First element should have no top margin */ .bubble-content > *:first-child, .markdown-body > *:first-child { margin-top: 0; } /* ═══════════════════════════════════════════════════════════ FEATURE 1: Copy Conversation Button ═══════════════════════════════════════════════════════════ */ .copy-chat-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); } .copy-chat-btn:hover { background: var(--surface-2); color: var(--blue); border-color: var(--blue); } /* ═══════════════════════════════════════════════════════════ FEATURE 2: Chat Message Timestamps + Copy Icons ═══════════════════════════════════════════════════════════ */ .bubble-ts { font-size: 0.68rem; font-weight: 400; color: var(--text-3); margin-left: auto; padding-left: 8px; opacity: 0.8; white-space: nowrap; flex-shrink: 0; animation: fadeIn 0.3s ease; } /* Timestamp inside user bubble — white tint */ .bubble-ts--user { color: rgba(255,255,255,0.75); padding-left: 0; margin-left: 0; opacity: 1; } [data-theme="light"] .bubble-ts--user { color: rgba(255,255,255,0.85); } .bubble-sender { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; color: var(--green); margin-bottom: 4px; } /* User bubble: text then footer row (timestamp + copy) at bottom */ .bubble-user-footer { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 5px; } .bubble-user-meta { display: flex; justify-content: flex-end; margin-bottom: 2px; } .bubble-user-text { word-break: break-word; } [data-theme="light"] .bubble-ts { color: #94a3b8; } [data-theme="dark"] .bubble-ts { color: #475569; } /* ── Per-message Copy Button ── */ .msg-copy-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-3); font-size: 0.68rem; cursor: pointer; opacity: 1; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease; white-space: nowrap; margin-top: 6px; line-height: 1; } .chat-bubble:hover .msg-copy-btn, .chat-bubble:focus-within .msg-copy-btn { opacity: 1; } @media (max-width: 768px) { .msg-copy-btn { opacity: 1; } } .msg-copy-btn:hover { background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.3); color: var(--blue); transform: scale(1.05); } .msg-copy-btn.copied { opacity: 1; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); color: #22c55e; } /* Fade out animation before swapping back to copy icon */ .msg-copy-btn.icon-fade-out { opacity: 0; transform: scale(0.85); transition: opacity 0.18s ease, transform 0.18s ease; } /* Tick icon inherit the green colour from .copied */ .msg-copy-btn .tick-icon { animation: tickPop 0.2s ease; } @keyframes tickPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } /* User bubble copy button — white tint */ .msg-copy-btn--user { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.75); margin-top: 0; } .msg-copy-btn--user:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); color: #fff; } .msg-copy-btn--user.copied { background: rgba(34,197,94,0.2); border-color: rgba(34,197,94,0.45); color: #86efac; } @keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 0.8; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════ FEATURE 4: HEALTH DASHBOARD MODAL ═══════════════════════════════════════════════════════════ */ .dash-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px); } .dash-modal { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; width: min(960px, 100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.45); } .dash-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .dash-modal-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--text); } .dash-modal-title i { color: var(--blue); } .dash-close-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; transition: background 0.2s, color 0.2s; } .dash-close-btn:hover { background: var(--red); color: #fff; border-color: var(--red); } .dash-modal-body { overflow-y: auto; padding: 20px 22px; flex: 1; } .dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .dash-card-wide { grid-column: 1 / -1; } .dash-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; } .dash-icon { font-size: 1.2rem; margin-top: 2px; } .bmi-icon { color: var(--blue); } .disease-icon{ color: var(--red); } .report-icon { color: var(--teal); } .dash-card-title { font-family: var(--font-head); font-size: 0.92rem; font-weight: 700; color: var(--text); } .dash-card-sub { font-size: 0.75rem; color: var(--text-3); margin-top: 1px; } .dash-clear-btn { margin-left: auto; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.75rem; transition: all 0.2s; flex-shrink: 0; } .dash-clear-btn:hover { background: rgba(239,68,68,0.12); color: var(--red); border-color: var(--red); } .dash-entries { display: flex; flex-direction: column; gap: 8px; } .dash-entry { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .dash-entry-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dash-entry-value { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--blue); } .dash-entry-label { font-size: 0.87rem; font-weight: 700; color: var(--text); } .dash-confidence { font-size: 0.78rem; font-weight: 700; color: var(--blue); background: rgba(14,165,233,0.12); padding: 2px 7px; border-radius: 20px; } .dash-entry-detail { font-size: 0.78rem; color: var(--text-2); } .dash-entry-date { font-size: 0.7rem; color: var(--text-3); display: flex; align-items: center; gap: 4px; } .dash-empty { font-size: 0.82rem; color: var(--text-3); padding: 16px 10px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; } .dash-entry-report { gap: 6px; } .dash-report-badge { font-size: 0.7rem; font-weight: 700; background: rgba(20,184,166,0.15); color: var(--teal); padding: 2px 8px; border-radius: 20px; } .dash-report-text { font-size: 0.78rem; color: var(--text-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 640px) { .dash-grid { grid-template-columns: 1fr; } .dash-card-wide { grid-column: 1; } .dash-modal { max-height: 94vh; } } /* ═══════════════════════════════════════════════════════════ FIX 5: DARK / LIGHT MODE TEXT VISIBILITY AUDIT Ensure all text is readable in both themes ═══════════════════════════════════════════════════════════ */ /* ── Form inputs ── */ [data-theme="light"] .form-input, [data-theme="light"] .form-select, [data-theme="light"] .form-textarea { color: #0f172a !important; background: #ffffff !important; border-color: rgba(0,0,0,0.18) !important; } [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { color: #f1f5f9 !important; background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.12) !important; } [data-theme="light"] .form-label { color: #374151 !important; } [data-theme="dark"] .form-label { color: #94a3b8 !important; } [data-theme="light"] .form-input::placeholder, [data-theme="light"] .form-select::placeholder { color: #94a3b8 !important; } [data-theme="dark"] .form-input::placeholder { color: #475569 !important; } /* ── Result boxes and content ── */ [data-theme="light"] .result-box { color: #0f172a; background: #f8fafc; border-color: rgba(0,0,0,0.08); } [data-theme="dark"] .result-box { color: #f1f5f9; } [data-theme="light"] .ai-result { color: #0f172a; } [data-theme="dark"] .ai-result { color: #f1f5f9; } /* ── Disease cards ── */ [data-theme="light"] .disease-card { background: #ffffff; border-color: rgba(0,0,0,0.08); color: #0f172a; } [data-theme="dark"] .disease-card { color: #f1f5f9; } [data-theme="light"] .disease-name { color: #0f172a; } [data-theme="light"] .disease-header{ border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .mini-title { color: #374151; } [data-theme="light"] .info-list li { color: #374151; } [data-theme="dark"] .info-list li { color: #cbd5e1; } /* ── Severity badges ── */ [data-theme="light"] .severity-mild { background: rgba(34,197,94,0.15); color: #15803d; border-color: rgba(34,197,94,0.4); } [data-theme="light"] .severity-moderate { background: rgba(234,179,8,0.15); color: #a16207; border-color: rgba(234,179,8,0.4); } [data-theme="light"] .severity-severe { background: rgba(249,115,22,0.15); color: #c2410c; border-color: rgba(249,115,22,0.4); } [data-theme="light"] .severity-critical { background: rgba(239,68,68,0.15); color: #b91c1c; border-color: rgba(239,68,68,0.4); } /* ── Upload area ── */ [data-theme="light"] .upload-area { background: #ffffff; border-color: rgba(0,0,0,0.15); color: #475569; } [data-theme="light"] .upload-area p { color: #0f172a; } [data-theme="light"] .upload-area small { color: #64748b; } [data-theme="dark"] .upload-area { color: var(--text-2); } /* ── Symptom grid ── */ [data-theme="light"] .sym-chip { background: #f0f4f8; color: #374151; border-color: rgba(0,0,0,0.10); } [data-theme="light"] .sym-chip.active { background: var(--blue); color: #ffffff; border-color: var(--blue); } [data-theme="dark"] .sym-chip { background: rgba(255,255,255,0.06); color: #cbd5e1; } [data-theme="dark"] .sym-chip.active{ background: var(--blue); color: #ffffff; } /* ── BMI badges ── */ [data-theme="light"] .bmi-badge { color: #0f172a; } /* ── AI source badge ── */ [data-theme="light"] .ai-source-badge { background: #f0f4f8; color: #0f172a; border-color: rgba(0,0,0,0.1); } [data-theme="dark"] .ai-source-badge { color: var(--text-2); } /* ── Chat bubbles enhanced ── */ [data-theme="light"] .chat-bubble.user { color: #ffffff; } [data-theme="light"] .chat-bubble.ai { color: #0f172a; background: #ffffff; } [data-theme="dark"] .chat-bubble.ai { color: #f1f5f9; } [data-theme="light"] .chat-messages { background: #f0f4f8; } [data-theme="dark"] .chat-messages { background: rgba(0,0,0,0.15); } /* ── Markdown content in both themes ── */ [data-theme="light"] .bubble-content h2, [data-theme="light"] .bubble-content h3, [data-theme="light"] .markdown-body h2, [data-theme="light"] .markdown-body h3 { color: var(--blue-d); } [data-theme="light"] .bubble-content strong, [data-theme="light"] .markdown-body strong { color: #0f172a; } [data-theme="light"] .bubble-content li, [data-theme="light"] .markdown-body li { color: #374151; } [data-theme="dark"] .bubble-content li, [data-theme="dark"] .markdown-body li { color: #cbd5e1; } /* ── Disclaimer / info boxes ── */ [data-theme="light"] .disclaimer { color: #475569; background: rgba(14,165,233,0.06); } [data-theme="dark"] .disclaimer { color: var(--text-2); } /* ── Preview section ── */ [data-theme="light"] .preview-name { color: #0f172a; } [data-theme="light"] .preview-size { color: #64748b; } /* ── Tips cards ── */ [data-theme="dark"] .tip-card { color: var(--text-2); } /* ── Settings modal ── */ [data-theme="light"] .settings-section-title { color: #0f172a; } [data-theme="light"] .settings-divider { border-color: rgba(0,0,0,0.08); } /* ── Dashboard in both themes ── */ [data-theme="light"] .dash-modal { background: #f0f4f8; border-color: rgba(0,0,0,0.1); } [data-theme="light"] .dash-card { background: #ffffff; border-color: rgba(0,0,0,0.08); color: #0f172a; } [data-theme="light"] .dash-entry { background: #f8fafc; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .dash-card-title{ color: #0f172a; } [data-theme="light"] .dash-entry-label, [data-theme="light"] .dash-entry-value { color: #0f172a; } [data-theme="light"] .dash-report-text { color: #475569; } [data-theme="light"] .dash-modal-header{ background: #ffffff; border-color: rgba(0,0,0,0.1); } [data-theme="light"] .dash-modal-title { color: #0f172a; } /* ── Toasts ── */ [data-theme="light"] .toast { color: #0f172a; } /* ── Spinner text ── */ [data-theme="light"] .spinner-text { color: #475569; } [data-theme="dark"] .spinner-text { color: var(--text-2); } /* ── Recent chats sidebar ── */ [data-theme="light"] .chat-sidebar { background: #ffffff; border-right-color: rgba(0,0,0,0.1); } [data-theme="light"] .chat-sidebar-title { color: #0f172a; } [data-theme="light"] .recent-chat-row { color: #374151; border-color: rgba(0,0,0,0.06); } [data-theme="light"] .recent-chat-row:hover { background: #f0f4f8; } [data-theme="light"] .no-chats-msg { color: #94a3b8; } [data-theme="light"] .chat-topbar { background: #ffffff; border-bottom-color: rgba(0,0,0,0.1); } [data-theme="light"] .chat-topbar-btn { color: #475569; } [data-theme="light"] .chat-topbar-title { color: #0f172a; } /* ── Error boxes ── */ [data-theme="light"] .error-box { color: #7f1d1d; background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); } [data-theme="dark"] .error-box { color: #fca5a5; } /* ═══════════════════════════════════════════════════════════ CHANGE 2: Hero logo — mirrors the navbar logo exactly ═══════════════════════════════════════════════════════════ */ .hero-logo-wrap { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; justify-content: center; } .hero-logo-icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--blue), var(--blue-d)); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4); } .hero-logo-text { font-family: var(--font-head); font-size: 1.55rem; font-weight: 800; color: var(--text); } .hero-logo-accent { color: var(--blue); } [data-theme="light"] .hero-logo-text { color: #0f172a; } /* ═══════════════════════════════════════════════════════════ CHANGE 3: Fix options inherit the select colour in most browsers, but Chrome/Edge on Windows needs an explicit option colour */ [data-theme="dark"] .form-select option { background-color: #1e293b; color: #f1f5f9; } [data-theme="light"] .form-select option { background-color: #ffffff; color: #0f172a; } /* Also target the selects that have inline styles (calorie/water/blood) */ [data-theme="dark"] select option { background-color: #1e293b !important; color: #f1f5f9 !important; } [data-theme="light"] select option { background-color: #ffffff !important; color: #0f172a !important; } /* ═══════════════════════════════════════════════════════════ Fix 1: Download App navbar button ═══════════════════════════════════════════════════════════ */ .nav-download-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 99px; border: 1.5px solid rgba(14,165,233,0.55); background: rgba(14,165,233,0.10); color: var(--blue); font-size: 0.78rem; font-weight: 700; font-family: var(--font-head); cursor: pointer; white-space: nowrap; transition: background 0.18s, box-shadow 0.18s, transform 0.15s, border-color 0.18s; letter-spacing: 0.2px; } .nav-download-btn i { font-size: 0.72rem; } .nav-download-btn:hover { background: rgba(14,165,233,0.22); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14,165,233,0.14); transform: translateY(-1px); } @media (max-width: 540px) { .nav-download-btn span { display: none; } .nav-download-btn { padding: 7px 9px; } } [data-theme="light"] .nav-download-btn { border-color: rgba(14,165,233,0.45); } /* ═══════════════════════════════════════════════════════════ Fix 2: Install App notice banner ═══════════════════════════════════════════════════════════ */ .install-notice { margin: 0 auto 32px; max-width: 860px; padding: 0 20px; } .install-notice-inner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(6,182,212,0.06) 100%); border: 1px solid rgba(14,165,233,0.28); flex-wrap: wrap; } .install-notice-icon { width: 42px; height: 42px; flex-shrink: 0; background: linear-gradient(135deg, var(--blue), var(--teal)); border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; } .install-notice-text { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; } .install-notice-text strong { font-family: var(--font-head); font-size: 0.92rem; font-weight: 700; color: var(--text); } .install-notice-text span { font-size: 0.78rem; color: var(--text-2); line-height: 1.45; } .install-notice-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 99px; background: linear-gradient(135deg, var(--blue), var(--blue-d)); color: #fff; font-size: 0.8rem; font-weight: 700; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity 0.18s, transform 0.15s; } .install-notice-btn:hover { opacity: 0.88; transform: translateY(-1px); } .install-notice-close { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.75rem; flex-shrink: 0; transition: background 0.18s, color 0.18s; } .install-notice-close:hover { background: rgba(239,68,68,0.12); color: var(--red); } [data-theme="light"] .install-notice-text strong { color: #0f172a; } [data-theme="light"] .install-notice-text span { color: #475569; } [data-theme="light"] .install-notice-inner { background: rgba(14,165,233,0.05); border-color: rgba(14,165,233,0.22); } /* ═══════════════════════════════════════════════════════════ Fix 3: Smoother modal transition (longer + nicer easing) ═══════════════════════════════════════════════════════════ */ .modal-overlay { transition: opacity 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0.28s cubic-bezier(0.4,0,0.2,1) !important; } .modal { transition: transform 0.30s cubic-bezier(0.34,1.30,0.64,1), opacity 0.28s cubic-bezier(0.4,0,0.2,1) !important; opacity: 0; } .modal-overlay.open .modal { transform: scale(1) translateY(0) !important; opacity: 1 !important; } /* ═══════════════════════════════════════════════════════════ Download App Modal ═══════════════════════════════════════════════════════════ */ .download-overlay { position: fixed; inset: 0; z-index: 9100; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; } .download-modal { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 36px 32px 28px; width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; box-shadow: 0 30px 70px rgba(0,0,0,0.5); animation: dlModalIn 0.30s cubic-bezier(0.34,1.30,0.64,1); } @keyframes dlModalIn { from { transform: scale(0.88) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .download-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; transition: background 0.18s, color 0.18s; } .download-close:hover { background: rgba(239,68,68,0.12); color: var(--red); } .download-icon-wrap { margin-bottom: 4px; } .download-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--text); margin: 0; } .download-sub { font-size: 0.85rem; color: var(--text-2); line-height: 1.5; max-width: 300px; margin: 4px 0 10px; } .download-badges { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; } .download-badge { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.18s, background 0.18s, transform 0.15s; min-width: 148px; } .download-badge:hover { border-color: var(--blue); background: var(--surface-2); transform: translateY(-2px); } .download-badge i { font-size: 1.6rem; color: var(--text-2); } .download-badge div { display: flex; flex-direction: column; align-items: flex-start; } .download-badge span { font-size: 0.67rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; } .download-badge strong { font-size: 0.9rem; font-family: var(--font-head); font-weight: 700; color: var(--text); } .download-note { font-size: 0.75rem; color: var(--text-3); display: flex; align-items: center; gap: 5px; margin-top: 6px; } [data-theme="light"] .download-modal { background: #ffffff; } [data-theme="light"] .download-title { color: #0f172a; } [data-theme="light"] .download-sub { color: #475569; } [data-theme="light"] .download-badge { background: #f8fafc; } [data-theme="light"] .download-badge strong { color: #0f172a; } /* ════════════════════════════════════════════════════════ TASK 6 — COMPREHENSIVE RESPONSIVENESS ADDITIONS Covers: 320px / 375px / 390px / 414px / 768px / 820px / 1024px / 1280px / 1366px / 1440px / 1920px Only adds missing rules — does not override working rules. ════════════════════════════════════════════════════════ */ /* Prevent horizontal scroll site-wide */ html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } /* ── 320px ── smallest phones */ @media (max-width: 340px) { .navbar { padding: 0 10px; } .logo-text { display: none; } .hero-title { font-size: 1.5rem; } .hero-desc { font-size: 0.8rem; } .hero-cta { font-size: 0.8rem; padding: 9px 12px; } .tool-card { padding: 14px; } .tool-card-body h3 { font-size: 0.88rem; } .modal { border-radius: 16px 16px 0 0; } .auth-popup { padding: 18px 12px; } .section-title { font-size: 1.3rem; } .hero-badge { font-size: 0.65rem; padding: 3px 8px; } .stat { min-width: 70px; } .stat span { font-size: 1.15rem; } } /* ── 375px – 414px ── standard phones */ @media (max-width: 430px) { .hero-title { font-size: clamp(1.6rem, 7vw, 2rem); } .hero-desc { font-size: 0.85rem; max-width: 100%; } .hero-stats { gap: 18px; justify-content: center; flex-wrap: wrap; } .hero-actions { flex-direction: column; align-items: stretch; gap: 8px; } .hero-cta { justify-content: center; } .tools-grid { grid-template-columns: 1fr; gap: 10px; } .tool-card-featured { grid-column: span 1; flex-direction: column; } .tips-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .nav-download-btn { display: none; } .section-title { font-size: 1.4rem; } .auth-popup { max-width: 100%; } .footer-inner { padding: 0 12px; } } /* ── 768px – 820px ── small tablets */ @media (min-width: 600px) and (max-width: 820px) { .tools-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .tool-card-featured { grid-column: span 2; } .tips-grid { grid-template-columns: repeat(3, 1fr); } .nav-center { gap: 0; } .nav-btn { padding: 6px 8px; font-size: 0.74rem; } .nav-download-btn span { display: none; } .nav-download-btn { padding: 7px 10px; } } /* ── 1024px – 1280px ── laptops */ @media (min-width: 1024px) and (max-width: 1280px) { .tools-section, .tips-section { padding-left: 32px; padding-right: 32px; } .tools-grid { gap: 16px; } } /* ── 1440px – large desktop */ @media (min-width: 1440px) { .navbar { max-width: 100%; padding: 0 48px; } .hero-content { max-width: 860px; } .tools-section, .tips-section { padding-left: 64px; padding-right: 64px; } .tools-grid { gap: 20px; } .section-title { font-size: 2.2rem; } } /* ── 1920px – ultra wide */ @media (min-width: 1920px) { .navbar { padding: 0 120px; } .tools-section, .tips-section { padding-left: 160px; padding-right: 160px; } .tools-grid { max-width: 1500px; margin: 0 auto; gap: 24px; } .hero-title { font-size: 4rem; } } /* ── Modal and auth fixes ── */ /* modal-overlay padding consolidated at primary rule */ /* modal max-width consolidated at line 472 */ .auth-popup { max-width: min(420px, calc(100vw - 24px)); } /* ── Navbar overflow guard ── */ .nav-center { flex-wrap: nowrap; overflow: hidden; } @media (max-width: 860px) { .nav-center .nav-btn > span:not(.nav-btn-icon) { } .nav-btn { padding: 6px 7px; font-size: 0.73rem; } } @media (max-width: 780px) { .nav-center { display: none; } } /* ── Chat tool responsive ── */ @media (max-width: 600px) { .chat-enhanced-wrap { flex-direction: column; height: auto; } #chatSidebar { width: 100%; max-height: 38vh; border-right: none; border-bottom: 1px solid var(--border); } .chat-main { flex: unset; min-height: 280px; } } /* ── Tip cards on very small screens ── */ @media (max-width: 340px) { .tips-grid { grid-template-columns: 1fr; } } /* ── Dashboard modal responsive ── */ .dash-overlay { overflow-y: auto; } .dash-modal { max-height: 92vh; overflow-y: auto; } @media (max-width: 640px) { .dash-overlay { padding: 0; align-items: flex-end; } .dash-modal { border-radius: 20px 20px 0 0; width: 100%; } .dash-grid { grid-template-columns: 1fr; } } /* ── Prevent input zoom on iOS (font-size ≥ 16px) ── */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { font-size: max(16px, 0.9rem) !important; } } /* ════════════════════════════════════════════════════════════ COMPREHENSIVE RESPONSIVE POLISH — All Breakpoints FIX 5: Full site responsiveness FIX 4: Tool container spacing improvements No existing rules removed — only additions/enhancements ════════════════════════════════════════════════════════════ */ /* ── Global resets ── */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: hidden; scroll-behavior: smooth; } body { overflow-x: hidden; -webkit-text-size-adjust: 100%; } img, video, canvas, svg { max-width: 100%; display: block; } /* ════════════════════════════════════════════ TOOL MODAL IMPROVEMENTS — FIX 4 ════════════════════════════════════════════ */ /* Give modal body content more breathing room */ .modal-body > * + * { margin-top: 14px; } .modal-body h3 { font-size: 1rem; margin-bottom: 10px; } .modal-body p { line-height: 1.6; } /* Input + label stacks inside modals */ .modal-body label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); margin-bottom: 5px; display: block; } .modal-body input[type="text"], .modal-body input[type="number"], .modal-body input[type="email"], .modal-body select, .modal-body textarea { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.9rem; outline: none; transition: border-color 0.18s, box-shadow 0.18s; } .modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14,165,233,0.12); } /* Result cards inside modals */ .modal-body .result-card, .modal-body [class*="result"] { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); margin-top: 14px; } /* Full-width button inside modals */ .modal-body .btn { width: 100%; justify-content: center; padding: 11px 20px; font-size: 0.9rem; border-radius: 12px; margin-top: 14px; } /* ── Calculator grid: auto-fill, no overflow ── */ .modal-body [style*="auto-fill"] { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)) !important; } /* ════════════════════════════════════════════ NAVBAR — ALL BREAKPOINTS ════════════════════════════════════════════ */ /* 1440px+ — large desktop */ @media (min-width: 1440px) { .navbar { padding: 0 60px; } .hero-content { max-width: 900px; margin: 0 auto; text-align: center; } .hero-actions { justify-content: center; } .hero-stats { justify-content: center; } .tools-section, .tips-section { padding: 80px 80px; } .tools-grid { gap: 22px; } .section-title { font-size: 2.4rem; } } /* 1280px – 1440px */ @media (min-width: 1280px) and (max-width: 1440px) { .tools-section, .tips-section { padding: 64px 48px; } } /* 1024px – 1280px */ @media (min-width: 1024px) and (max-width: 1280px) { .tools-section, .tips-section { padding: 56px 36px; } .nav-center { gap: 2px; } .nav-btn { padding: 6px 10px; font-size: 0.78rem; } } /* 960px – 1024px */ @media (min-width: 961px) and (max-width: 1023px) { .nav-btn { padding: 6px 8px; font-size: 0.74rem; } .nav-download-btn span { display: none; } .nav-download-btn { padding: 7px 10px; min-width: unset; } .tools-section { padding: 48px 28px; } .tools-grid { gap: 14px; } } /* ════════════════════════════════════════════ TABLET — 768px – 960px ════════════════════════════════════════════ */ @media (min-width: 768px) and (max-width: 960px) { .navbar { padding: 0 16px; } .nav-center { gap: 0; } .nav-btn { padding: 6px 7px; font-size: 0.72rem; } .nav-btn i { font-size: 0.7rem; } .nav-download-btn span { display: none; } .nav-download-btn { padding: 6px 9px; min-width: unset; } .tools-section { padding: 44px 24px; } .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .tool-card-featured { grid-column: span 2; } .tips-grid { grid-template-columns: repeat(3, 1fr); } .hero-title { font-size: clamp(1.8rem, 4vw, 2.6rem); } .hero-stats { flex-wrap: wrap; gap: 20px; } .modal { max-width: min(480px, calc(100vw - 40px)); } } /* ════════════════════════════════════════════ MOBILE — < 768px ════════════════════════════════════════════ */ @media (max-width: 767px) { /* Navbar */ .navbar { padding: 0 14px; gap: 8px; } .nav-center { display: none !important; } /* hidden — hamburger shows mobile menu */ .logo-text { font-size: 0.9rem; } .nav-download-btn span { display: none; } /* Hero */ .hero { padding: 80px 16px 40px; } .hero-title { font-size: clamp(1.6rem, 7vw, 2.2rem); } .hero-desc { font-size: 0.88rem; max-width: 100%; } .hero-badge { font-size: 0.7rem; padding: 4px 10px; } .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; } .hero-cta { justify-content: center; padding: 13px 20px; } .hero-stats { flex-wrap: wrap; gap: 18px; justify-content: center; } .stat { min-width: 80px; text-align: center; } /* Tools grid */ .tools-section { padding: 36px 14px; } .tools-grid { grid-template-columns: 1fr; gap: 12px; } .tool-card-featured { grid-column: span 1; flex-direction: column; } .tool-card-featured .tool-tags { flex-wrap: wrap; gap: 4px; } /* Tips */ .tips-section { padding: 36px 14px; } .tips-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .section-title { font-size: 1.6rem; } .section-sub { font-size: 0.85rem; } /* Modal */ .modal-overlay { align-items: flex-end; padding: 0; } .modal { border-radius: 20px 20px 0 0; max-height: 90vh; max-width: 100vw; width: 100%; } .modal-header { padding: 14px 18px; } .modal-body { padding: 16px 18px 20px; } .modal-title { font-size: 0.95rem; } /* Auth popup */ .auth-overlay { align-items: center; padding: 16px; } .auth-popup { border-radius: 20px; max-height: 90vh; overflow-y: auto; max-width: min(400px, calc(100vw - 32px)); width: 100%; } /* Footer */ .footer { padding: 20px 16px; } .footer-inner { gap: 8px; } /* Prevent iOS input zoom */ input, select, textarea { font-size: max(16px, 0.9rem) !important; } } /* ════════════════════════════════════════════ SMALL MOBILE — < 480px ════════════════════════════════════════════ */ @media (max-width: 480px) { .hero-title { font-size: clamp(1.45rem, 8vw, 1.9rem); } .tools-grid { gap: 10px; } .tool-card { padding: 16px; } .tips-grid { grid-template-columns: 1fr; gap: 10px; } .section-title { font-size: 1.4rem; } .modal-body { padding: 14px 16px 18px; } .auth-popup { padding: 20px 16px; } .stat span { font-size: 1.2rem; } .stat small { font-size: 0.7rem; } } /* ════════════════════════════════════════════ 320px – smallest phones ════════════════════════════════════════════ */ @media (max-width: 360px) { .navbar { padding: 0 10px; } .logo-text { font-size: 0.82rem; } .hero-title { font-size: 1.35rem; } .hero-cta { font-size: 0.82rem; padding: 11px 16px; } .hero-stats { gap: 12px; } .stat span { font-size: 1.1rem; } .tips-grid { grid-template-columns: 1fr; } .modal-header { padding: 12px 14px; } .modal-body { padding: 12px 14px; } .auth-popup { padding: 18px 12px; } } /* ════════════════════════════════════════════ CHAT TOOL — All screens — FIX 3 ════════════════════════════════════════════ */ /* Base chat layout improvements */ .chat-enhanced-wrap { border-radius: 0 0 var(--r-xl) var(--r-xl); overflow: hidden; } .chat-sidebar { overflow-y: auto; scrollbar-width: thin; } .chat-messages { scroll-behavior: smooth; } /* Tablet chat */ @media (min-width: 481px) and (max-width: 768px) { .chat-enhanced-wrap { height: 500px; } } /* ════════════════════════════════════════════ DASHBOARD — FIX 1+2+5 ════════════════════════════════════════════ */ /* Large desktop dashboard */ @media (min-width: 1280px) { .db-content { max-width: 1300px; padding: 32px 40px 60px; } } /* Tablet dashboard */ @media (min-width: 769px) and (max-width: 1024px) { .db-sidebar { width: 200px; } .db-main { margin-left: 200px; } .db-content { padding: 20px 20px 40px; } .db-quick-stats { grid-template-columns: repeat(2, 1fr); } } /* ════════════════════════════════════════════ GENERAL OVERFLOW SAFETY NET ════════════════════════════════════════════ */ .tools-section, .tips-section, .hero, .footer, .navbar-wrap, .modal-body, .modal, .auth-popup { max-width: 100%; overflow-x: hidden; } /* All interactive elements: minimum tap target 44px */ @media (max-width: 768px) { button, a, [role="button"] { min-height: 36px; } .nav-btn, .btn, .auth-btn, .hero-cta { min-height: 44px; } } /* ═══════════════════════════════════════════════════════════════ COMPREHENSIVE RESPONSIVENESS — FIX 5 Covers: 320px / 375px / 390px / 414px / 480px / 600px / 768px / 820px / 1024px / 1280px / 1440px / 1920px ═══════════════════════════════════════════════════════════════ */ /* Global overflow prevention */ html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } /* ── Prevent iOS input zoom (font-size must be ≥ 16px) ── */ @media (max-width: 768px) { input, select, textarea { font-size: max(16px, 1rem) !important; } } /* ── Modal & auth popup size caps ── */ /* modal max-width consolidated at line 472 */ .auth-popup { max-width: min(420px, calc(100vw - 24px)); } .modal-overlay, .auth-overlay { box-sizing: border-box; } /* ── 320px – 360px: ultra-small phones ── */ @media (max-width: 360px) { .navbar { padding: 0 10px; } .logo-text { display: none; } .nav-download-btn { display: none; } .hero-title { font-size: 1.5rem !important; line-height: 1.25; } .hero-desc { font-size: 0.8rem; } .hero-badge { font-size: 0.62rem; padding: 3px 8px; } .hero-cta { font-size: 0.8rem; padding: 9px 14px; } .hero-stats { flex-wrap: wrap; justify-content: center; gap: 14px; } .stat { min-width: 60px; text-align: center; } .stat span { font-size: 1.1rem; } .tools-grid { gap: 8px; } .tool-card { padding: 14px 12px; } .tool-card-body h3 { font-size: 0.82rem; } .tool-card-body p { font-size: 0.75rem; } .section-title { font-size: 1.2rem; } .tips-grid { grid-template-columns: 1fr; } .modal { border-radius: 18px 18px 0 0; } .auth-overlay { padding: 10px; } .auth-popup { border-radius: 18px; } } /* ── 361px – 430px: standard & large phones ── */ @media (min-width: 361px) and (max-width: 430px) { .hero-title { font-size: clamp(1.6rem, 7.5vw, 2rem) !important; } .hero-desc { font-size: 0.85rem; max-width: 100%; } .hero-actions { flex-direction: column; align-items: stretch; gap: 8px; } .hero-cta { justify-content: center; } .hero-stats { flex-wrap: wrap; justify-content: center; gap: 16px; } .tools-grid { grid-template-columns: 1fr; gap: 10px; } .tool-card-featured { grid-column: span 1; flex-direction: column; align-items: flex-start; } .tips-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .section-title { font-size: 1.4rem; } .nav-download-btn { display: none; } } /* ── 431px – 599px: phablets ── */ @media (min-width: 431px) and (max-width: 599px) { .tools-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .tool-card-featured { grid-column: span 2; } .tips-grid { grid-template-columns: repeat(2, 1fr); } .hero-actions { gap: 10px; } } /* ── 600px – 767px: large phablets ── */ @media (min-width: 600px) and (max-width: 767px) { .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .tool-card-featured { grid-column: span 2; } .tips-grid { grid-template-columns: repeat(3, 1fr); } .nav-center { gap: 0; } .nav-btn { padding: 6px 8px; font-size: 0.74rem; } } /* ── 768px – 1023px: tablets & iPads ── */ @media (min-width: 768px) and (max-width: 1023px) { .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .tool-card-featured { grid-column: span 2; } .tips-grid { grid-template-columns: repeat(3, 1fr); } .hero-title { font-size: clamp(2rem, 4vw, 2.8rem); } .nav-center { gap: 0; } .nav-btn { padding: 6px 9px; font-size: 0.76rem; } .nav-download-btn span { display: none; } .nav-download-btn { padding: 7px 10px; } .modal-overlay { align-items: center !important; } .auth-overlay { align-items: center !important; } } /* ── 1024px – 1279px: small laptops ── */ @media (min-width: 1024px) and (max-width: 1279px) { .tools-section, .tips-section { padding-left: 28px; padding-right: 28px; } .tools-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .tips-grid { grid-template-columns: repeat(4, 1fr); } } /* ── 1280px – 1439px: standard laptops ── */ @media (min-width: 1280px) and (max-width: 1439px) { .tools-section, .tips-section { padding-left: 36px; padding-right: 36px; } } /* ── 1440px+: large desktops ── */ @media (min-width: 1440px) { .navbar { padding: 0 48px; } .hero-content { max-width: 860px; } .tools-section, .tips-section { padding-left: 72px; padding-right: 72px; } .tools-grid { gap: 22px; } .section-title { font-size: 2.2rem; } } /* ── 1920px+: ultra-wide monitors ── */ @media (min-width: 1920px) { .navbar { padding: 0 120px; } .tools-section, .tips-section { padding-left: 180px; padding-right: 180px; } .tools-grid { max-width: 1600px; margin-left: auto; margin-right: auto; gap: 24px; } .hero-title { font-size: 4.5rem; } .section-title { font-size: 2.6rem; } } /* ── Navbar collapse on medium ── */ @media (max-width: 900px) { .nav-center { gap: 0; } .nav-btn { padding: 5px 7px; font-size: 0.73rem; } } @media (max-width: 800px) { .nav-center { display: none; } } /* ── Auth popup always centered on mobile ── */ @media (max-width: 768px) { .auth-overlay { padding: 16px !important; align-items: center !important; justify-content: center !important; } .auth-popup { border-radius: 20px !important; max-height: 94vh !important; overflow-y: auto !important; margin: auto !important; } } /* ── Tool modals: centered popup on mobile (matches screenshot proportions) ── */ @media (max-width: 768px) { .modal-overlay { padding: 12px !important; align-items: center !important; justify-content: center !important; } .modal { border-radius: 20px !important; max-height: 92vh !important; max-width: calc(100vw - 24px) !important; } } /* ── Dashboard modal on mobile ── */ @media (max-width: 640px) { .dash-overlay { padding: 0; align-items: flex-end; } .dash-modal { border-radius: 22px 22px 0 0; width: 100%; max-height: 94vh; } .dash-grid { grid-template-columns: 1fr; } } /* ── Form layout ── */ @media (max-width: 480px) { .form-row { flex-direction: column; gap: 10px; } .form-group { width: 100%; } .modal-body { padding: 18px 16px 24px; } .modal-header { padding: 14px 16px; } } /* ── Hero section ── */ @media (max-width: 768px) { .hero { padding-left: 16px !important; padding-right: 16px !important; } } /* ── Tip cards ── */ @media (max-width: 480px) { .tip-card { padding: 14px; } .tip-icon { width: 36px; height: 36px; font-size: 0.85rem; } } /* ── Footer ── */ @media (max-width: 480px) { .footer { padding: 20px 16px; } .footer-inner { gap: 8px; } } /* ── Tool cards min-height for breathing room ── */ .tool-card { min-height: 100px; } /* ── Disease predictor symptom tags ── */ @media (max-width: 480px) { .symptom-tags-wrap { gap: 6px; } .symptom-tag { font-size: 0.75rem; padding: 4px 8px; } } /* ── Result boxes inside tool modals ── */ .result-box { word-break: break-word; overflow-wrap: break-word; } .info-list li { word-break: break-word; } /* ═══════════════════════════════════════════════════════════════ FINAL AUTHORITATIVE RESPONSIVE SYSTEM — v4.2 Single source of truth. Overrides any conflicts above. Screenshots reference: tool modals ~660px, centered, clean. ═══════════════════════════════════════════════════════════════ */ /* ── Global baseline ── */ html, body { max-width: 100%; overflow-x: hidden; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /* ── MODAL: authoritative sizing ── */ .modal-overlay { padding: 20px !important; align-items: center !important; justify-content: center !important; } .modal { max-width: 660px !important; max-height: 86vh !important; width: calc(100% - 40px) !important; border-radius: 18px !important; } .auth-popup { max-width: 420px !important; width: calc(100% - 40px) !important; } /* ── DESKTOP 1280px+ ── */ @media (min-width: 1280px) { .modal { max-width: 680px !important; } } /* ── TABLET 768px–1279px ── */ @media (min-width: 768px) and (max-width: 1279px) { .modal { max-width: 600px !important; } .tools-grid { grid-template-columns: repeat(2, 1fr) !important; } .tool-card-featured { grid-column: span 2 !important; } .tips-grid { grid-template-columns: repeat(3, 1fr) !important; } .nav-center { gap: 0 !important; } .nav-btn { padding: 6px 8px !important; font-size: 0.75rem !important; } .nav-download-btn span { display: none !important; } .nav-download-btn { padding: 7px 10px !important; } } /* ── MOBILE 480px–767px ── */ @media (max-width: 767px) { /* Modal: centered, compact */ .modal-overlay { padding: 14px !important; align-items: center !important; justify-content: center !important; } .modal { max-width: calc(100vw - 28px) !important; max-height: 90vh !important; width: 100% !important; border-radius: 18px !important; } .modal-header { padding: 14px 16px !important; } .modal-body { padding: 16px !important; } /* Auth popup: also centered */ .auth-overlay { padding: 14px !important; align-items: center !important; justify-content: center !important; } .auth-popup { max-width: calc(100vw - 28px) !important; max-height: 92vh !important; overflow-y: auto !important; border-radius: 18px !important; } /* Tools grid: single column */ .tools-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .tool-card-featured { grid-column: span 1 !important; flex-direction: column !important; } .tips-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .section-title { font-size: 1.5rem !important; } .hero-title { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } .hero-desc { font-size: 0.875rem !important; } .hero-actions { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .hero-cta { justify-content: center !important; } .hero-stats { flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; } .nav-download-btn { display: none !important; } .navbar { padding: 0 14px !important; } .tools-section, .tips-section { padding-left: 14px !important; padding-right: 14px !important; } .hero { padding-left: 14px !important; padding-right: 14px !important; } /* Dashboard on mobile */ .dash-overlay { padding: 0 !important; align-items: flex-end !important; } .dash-modal { border-radius: 22px 22px 0 0 !important; max-height: 94vh !important; width: 100% !important; } /* Chat on mobile */ .chat-enhanced-wrap { height: 520px !important; position: relative !important; flex-direction: row !important; } .chat-sidebar { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: min(70%, 240px) !important; z-index: 50 !important; transform: translateX(-100%) !important; background: var(--bg) !important; border-right: 1px solid var(--border) !important; transition: transform 0.28s ease !important; } .chat-sidebar.open { transform: translateX(0) !important; } .chat-main { flex: 1 !important; width: 100% !important; min-width: 0 !important; } /* Inputs: prevent iOS zoom */ input, select, textarea { font-size: 16px !important; } /* Touch targets */ button, a[role="button"], [role="button"] { min-height: 40px; } .btn, .auth-btn, .hero-cta { min-height: 44px !important; } } /* ── SMALL PHONES 320px–479px ── */ @media (max-width: 479px) { .navbar { padding: 0 10px !important; } .logo-text { font-size: 0.9rem !important; } .hero-title { font-size: clamp(1.45rem, 8vw, 1.9rem) !important; } .hero-badge { font-size: 0.65rem !important; padding: 3px 8px !important; } .hero-cta { font-size: 0.85rem !important; padding: 10px 16px !important; } .tool-card { padding: 14px !important; } .tool-card-body h3 { font-size: 0.9rem !important; } .tool-card-body p { font-size: 0.78rem !important; } .tips-grid { grid-template-columns: 1fr !important; } .tip-card { padding: 14px !important; } .modal-body { padding: 14px !important; } .modal-header { padding: 12px 14px !important; } .modal-title { font-size: 1rem !important; } .section-title { font-size: 1.3rem !important; } .stat span { font-size: 1.1rem !important; } .stat { min-width: 60px !important; } } /* ── ULTRA SMALL 320px ── */ @media (max-width: 340px) { .logo-text { display: none !important; } .hero-title { font-size: 1.4rem !important; } .nav-center { display: none !important; } } /* ── NAV COLLAPSE ── */ @media (max-width: 800px) { .nav-center { display: none !important; } } @media (min-width: 801px) and (max-width: 960px) { .nav-center { gap: 0 !important; } .nav-btn { padding: 5px 7px !important; font-size: 0.73rem !important; } } /* ── LARGE SCREENS 1440px+ ── */ @media (min-width: 1440px) { .modal { max-width: 700px !important; } .navbar { padding: 0 48px !important; } .tools-section, .tips-section { padding-left: 64px !important; padding-right: 64px !important; } .hero-content { max-width: 860px !important; } } @media (min-width: 1920px) { .navbar { padding: 0 120px !important; } .tools-section, .tips-section { padding-left: 160px !important; padding-right: 160px !important; } .tools-grid { max-width: 1600px !important; margin: 0 auto !important; } .hero-title { font-size: 4rem !important; } .modal { max-width: 720px !important; } } /* ── RESULT BOXES ── */ .result-box, [class*="result"], .info-list li { word-break: break-word !important; overflow-wrap: break-word !important; } /* ── HEALTHCALC GRID on small modal/mobile ── */ @media (max-width: 480px) { .modal-body [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════ MOBILE BOTTOM-SHEET FIX — FINAL AUTHORITATIVE Applies to ALL tool modals on mobile. This block comes last — overrides every conflicting rule. auth-overlay is intentionally excluded (stays centered). ═══════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* ── Overlay: snap to bottom, zero padding so no gap ── */ .modal-overlay { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; padding-bottom: 0 !important; } /* ── Modal: full width, hugs screen bottom, no margin ── */ .modal { width: 100% !important; max-width: 100% !important; max-height: 88vh !important; margin: 0 !important; margin-bottom: 0 !important; border-radius: 22px 22px 0 0 !important; border-bottom: none !important; /* Reset any transform that adds vertical gap */ transform: translateY(100%) !important; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* ── Open state: slide up flush to bottom ── */ .modal-overlay.open .modal { transform: translateY(0) !important; } /* ── Modal body: safe scroll, no extra bottom space ── */ .modal-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; } /* ── Auth popup stays centered — not bottom sheet ── */ .auth-overlay { align-items: center !important; padding: 14px !important; } .auth-overlay .auth-popup { border-radius: 20px !important; width: calc(100% - 28px) !important; max-width: 420px !important; margin: auto !important; } } /* Extra safety for very small phones */ @media (max-width: 479px) { .modal-overlay { align-items: flex-end !important; padding: 0 !important; } .modal { max-height: 92vh !important; border-radius: 20px 20px 0 0 !important; } } /* ── Disease Predictor: Smart Search Dropdown ── */ .sym-dropdown { position: fixed; /* JS sets top/left/width dynamically */ background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.28); z-index: 10000; max-height: 220px; overflow-y: auto; overflow-x: hidden; padding: 4px; } .sym-dd-item { padding: 9px 12px; border-radius: 8px; font-size: 0.84rem; cursor: pointer; color: var(--text); transition: background 0.12s, color 0.12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sym-dd-item:hover, .sym-dd-item.sym-dd-active { background: rgba(14,165,233,0.12); color: var(--blue); } .sym-dd-section { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 6px 12px 3px; } .sym-dd-suggest { color: var(--text-2); } .sym-dd-custom { color: var(--blue); font-style: italic; } [data-theme="light"] .sym-dropdown { background: #ffffff; border-color: rgba(0,0,0,0.10); box-shadow: 0 8px 28px rgba(0,0,0,0.13); } [data-theme="light"] .sym-dd-item { color: #0f172a; } /* ── Disease Predictor: Selected Symptom Chips ── */ .sym-selected-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 12px; border-radius: 99px; font-size: 0.79rem; font-weight: 500; background: rgba(14,165,233,0.13); color: var(--blue); border: 1px solid rgba(14,165,233,0.4); white-space: nowrap; max-width: 100%; } .sym-selected-chip button { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 99px; background: rgba(14,165,233,0.18); border: none; color: var(--blue); cursor: pointer; padding: 0; font-size: 0.65rem; flex-shrink: 0; transition: background 0.12s, color 0.12s; } .sym-selected-chip button:hover { background: rgba(239,68,68,0.18); color: var(--red); } [data-theme="light"] .sym-selected-chip { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.3); } /* ── About modal: 75% desktop, full-width mobile ── */ @media (max-width: 640px) { #aboutPopup { max-width: calc(100vw - 28px) !important; padding: 20px 16px !important; } } /* ── Disease Predictor: hide native number spinners (we use custom ± buttons) ── */ #symDur::-webkit-inner-spin-button, #symDur::-webkit-outer-spin-button, #symTemp::-webkit-inner-spin-button, #symTemp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } #symDur, #symTemp { -moz-appearance: textfield; } /* ── About modal width fix — overrides all 420px caps ── */ #aboutPopup { max-width: min(1100px, 92vw) !important; width: 92vw !important; } /* ══════════════════════════════════════════════════════════════ AI BADGE SYSTEM — standardised provider badges Green = Groq AI | Yellow = Gemini AI Grey = Offline/OCR/Local ══════════════════════════════════════════════════════════════ */ .ai-source-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; cursor: default; user-select: none; vertical-align: middle; white-space: nowrap; } /* Green — Groq */ .ai-badge-groq { background: rgba(34,197,94,0.12); color: #16a34a; border-color: rgba(34,197,94,0.35); } [data-theme="dark"] .ai-badge-groq { background: rgba(34,197,94,0.15); color: #4ade80; border-color: rgba(34,197,94,0.40); } /* Yellow — Gemini */ .ai-badge-gemini { background: rgba(234,179,8,0.12); color: #b45309; border-color: rgba(234,179,8,0.35); } [data-theme="dark"] .ai-badge-gemini { background: rgba(234,179,8,0.15); color: #fbbf24; border-color: rgba(234,179,8,0.40); } /* Grey — Offline / OCR / Local */ .ai-badge-offline, .ai-badge-ocr, .ai-badge-local { background: rgba(100,116,139,0.12); color: #64748b; border-color: rgba(100,116,139,0.30); } [data-theme="dark"] .ai-badge-offline, [data-theme="dark"] .ai-badge-ocr, [data-theme="dark"] .ai-badge-local { background: rgba(148,163,184,0.10); color: #94a3b8; border-color: rgba(148,163,184,0.25); } /* ── Summary Trend Charts ── */ .db-summary-chart-wrap { margin: 8px 0 4px; padding: 10px 10px 6px; background: var(--surface-2, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(255,255,255,0.06)); border-radius: 10px; overflow: hidden; } [data-theme="light"] .db-summary-chart-wrap { background: #f8fafc; border-color: rgba(0,0,0,0.06); } .db-summary-chart-label { font-size: 0.6rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .db-summary-chart-foot { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 0.58rem; color: var(--text-3); margin-top: 4px; opacity: 0.65; } .db-summary-nochart { font-size: 0.7rem; color: var(--text-3); padding: 6px 0; font-style: italic; } /* ════════════════════════════════════════════════════════════ DISEASE INFO — FURTHER INFORMATION MODAL ════════════════════════════════════════════════════════════ */ /* ── "Further Information" button on each disease card ── */ .di-further-btn-wrap { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); } .di-further-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid var(--blue); background: rgba(14,165,233,0.07); color: var(--blue); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.18s, transform 0.15s, box-shadow 0.18s; } .di-further-btn:hover { background: rgba(14,165,233,0.15); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(14,165,233,0.25); } .di-further-btn:active { transform: translateY(0); } [data-theme="light"] .di-further-btn { background: rgba(14,165,233,0.08); border-color: #0284c7; color: #0284c7; } /* ── Overlay Backdrop ── */ .di-overlay { position: fixed; inset: 0; z-index: 9100; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; box-sizing: border-box; } .di-overlay.di-open { opacity: 1; visibility: visible; } .di-overlay.di-open .di-modal { transform: translateY(0) scale(1); opacity: 1; } /* ── Modal Panel ── */ .di-modal { background: #151e2d; border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; width: 100%; max-width: 680px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; transform: translateY(24px) scale(0.97); opacity: 0; transition: transform 0.3s cubic-bezier(.22,.68,0,1.2), opacity 0.28s ease; box-shadow: 0 24px 64px rgba(0,0,0,0.7); } [data-theme="light"] .di-modal { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 24px 64px rgba(0,0,0,0.18); } /* ── Header ── */ .di-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 12px; } .di-header-inner { display: flex; align-items: center; gap: 12px; min-width: 0; } .di-title-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #0ea5e9, #0284c7); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .di-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0; white-space: normal; overflow-wrap: break-word; word-break: break-word; line-height: 1.3; } @media (max-width: 600px) { .di-title { font-size: 0.95rem; } .di-header { padding: 12px 14px 10px; } .di-header-inner { align-items: flex-start; } .di-title-icon { width: 34px; height: 34px; flex-shrink: 0; } } .di-subtitle { font-size: 0.75rem; color: var(--text-3); margin: 2px 0 0; } .di-close-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2, rgba(255,255,255,0.05)); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .di-close-btn:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.3); } /* ── Symptoms context ── */ .di-context { padding: 10px 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); background: rgba(14,165,233,0.04); flex-shrink: 0; } .di-context-label { font-size: 0.72rem; color: var(--text-3); font-weight: 600; white-space: nowrap; } .di-context-pills { display: flex; flex-wrap: wrap; gap: 5px; } .di-pill { font-size: 0.7rem; padding: 2px 8px; border-radius: 99px; background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.2); color: var(--blue); font-weight: 500; } .di-pill-more { background: rgba(100,100,100,0.1); border-color: var(--border); color: var(--text-3); } /* ── Body / Scroll Area ── */ .di-body { flex: 1; overflow-y: auto; padding: 18px 22px; scroll-behavior: smooth; } .di-prompt-label { font-size: 0.8rem; font-weight: 600; color: var(--text-3); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.04em; } /* ── Question Buttons Grid ── */ .di-questions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .di-q-btn { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--text); font-size: 0.85rem; font-weight: 500; cursor: pointer; text-align: left; transition: all 0.18s ease; width: 100%; } .di-q-btn:hover { border-color: var(--blue); background: rgba(14,165,233,0.12); transform: translateX(3px); } .di-q-btn--active { border-color: var(--blue); background: rgba(14,165,233,0.15); color: var(--blue); } .di-q-btn--answered { border-color: rgba(34,197,94,0.4); } [data-theme="light"] .di-q-btn { background: #f8fafc; border-color: #e2e8f0; } [data-theme="light"] .di-q-btn:hover { background: #eff6ff; border-color: #0284c7; } .di-q-icon { font-size: 1.1rem; flex-shrink: 0; width: 22px; text-align: center; } .di-q-text { flex: 1; } .di-q-arrow { flex-shrink: 0; color: var(--text-3); transition: transform 0.18s; } .di-q-btn:hover .di-q-arrow, .di-q-btn--active .di-q-arrow { transform: translateX(3px); color: var(--blue); } /* ── Answer Blocks ── */ .di-answers { display: flex; flex-direction: column; gap: 16px; } .di-answer-block { border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; animation: diSlideIn 0.28s ease; background: rgba(255,255,255,0.04); } [data-theme="light"] .di-answer-block { border-color: #e2e8f0; background: #f8fafc; } @keyframes diSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .di-answer-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(14,165,233,0.06); border-bottom: 1px solid var(--border); font-size: 0.82rem; font-weight: 600; color: var(--text-2); flex-wrap: wrap; } .di-answer-icon { font-size: 1rem; } .di-answer-q { flex: 1; } .di-answer-body { padding: 14px 16px; font-size: 0.85rem; line-height: 1.65; color: var(--text); } [data-theme="light"] .di-answer-body { color: #1e293b; } /* ── Loading ── */ .di-loading { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 0.83rem; } .di-spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; } .di-spinner--sm { width: 13px; height: 13px; border-width: 2px; display: inline-block; } /* ── AI Response Text ── */ .di-response-text p { margin: 0 0 8px; } .di-response-text p:last-child { margin-bottom: 0; } .di-list { margin: 6px 0 10px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; } .di-list li { line-height: 1.6; } .di-response-text strong { color: var(--text); font-weight: 700; } .di-fadein { animation: diFadeIn 0.4s ease; } @keyframes diFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Error ── */ .di-error { color: var(--red, #ef4444); font-size: 0.83rem; background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.2); border-radius: 8px; padding: 8px 12px; margin: 0; } /* ── Differential Diagnosis Checklist ── */ .di-diff-intro { font-size: 0.83rem; color: var(--text-2); margin: 0 0 12px; line-height: 1.6; } .di-diff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 16px; } .di-diff-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); cursor: pointer; transition: all 0.16s ease; font-size: 0.82rem; color: var(--text-2); } [data-theme="light"] .di-diff-item { border-color: #e2e8f0; background: #f8fafc; } .di-diff-item input[type="checkbox"] { display: none; } .di-diff-item:hover { border-color: var(--blue); background: rgba(14,165,233,0.06); color: var(--text); } .di-diff-item--checked { border-color: #22c55e; background: rgba(34,197,94,0.08); color: var(--text); } .di-diff-checkmark { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; background: transparent; transition: all 0.15s; } .di-diff-item--checked .di-diff-checkmark { background: #22c55e; border-color: #22c55e; color: #fff; } .di-diff-label { line-height: 1.4; } .di-diff-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .di-diff-count { font-size: 0.78rem; color: var(--text-3); font-weight: 600; } .di-repredict-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 0.83rem; font-weight: 700; border: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.18s, opacity 0.15s; box-shadow: 0 4px 14px rgba(99,102,241,0.35); } .di-repredict-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99,102,241,0.45); } .di-repredict-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } .di-repredict-btn--shake { animation: diShake 0.4s ease; } @keyframes diShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ── Re-Predict Results ── */ .di-repredict-result .di-answer-header { background: rgba(99,102,241,0.08); } .di-severity-badge { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid currentColor; letter-spacing: 0.03em; margin-left: auto; } .di-severity-mild { color: #22c55e; } .di-severity-moderate { color: #f59e0b; } .di-severity-severe { color: #ef4444; } .di-severity-critical { color: #dc2626; } .di-summary-box { font-size: 0.82rem; color: var(--text-2); padding: 8px 12px; background: var(--surface); border-left: 3px solid #6366f1; border-radius: 6px; margin: 0 0 12px; } .di-repredict-cards { display: flex; flex-direction: column; gap: 10px; } .di-mini-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,0.04); } [data-theme="light"] .di-mini-card { border-color: #e2e8f0; background: #f8fafc; } .di-mini-card--top { border-color: #6366f1; background: rgba(99,102,241,0.05); } .di-mini-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .di-mini-rank { font-size: 1rem; } .di-mini-name { flex: 1; font-weight: 700; font-size: 0.88rem; color: var(--text); } .di-mini-conf { font-weight: 700; color: var(--blue); font-size: 0.88rem; } .di-mini-bar { height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; margin-bottom: 6px; } .di-mini-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), #6366f1); transition: width 0.6s ease; } .di-mini-desc { font-size: 0.78rem; color: var(--text-2); margin: 0; line-height: 1.5; } .di-update-main-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; margin-top: 12px; border-radius: 9px; border: 1.5px solid #6366f1; background: rgba(99,102,241,0.08); color: #6366f1; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.15s; } .di-update-main-btn:hover { background: rgba(99,102,241,0.15); transform: translateY(-1px); } /* ── Mobile ── */ @media (max-width: 600px) { .di-modal { max-height: 93vh; border-radius: 16px 16px 0 0; max-width: 100%; } .di-overlay { align-items: flex-end; padding: 0; } .di-diff-grid { grid-template-columns: 1fr 1fr; } .di-header { padding: 14px 16px 12px; } .di-body { padding: 14px 16px; } .di-diff-footer { flex-direction: column; align-items: stretch; } .di-repredict-btn { justify-content: center; } } @media (max-width: 380px) { .di-diff-grid { grid-template-columns: 1fr; } }