/* ================================================================ VET AI SYMPTOMS CHECKER — COMPLETE REBUILD Apple x Notion minimal aesthetic SCOPING: every rule is namespaced under #vet-ai-checker-form (or #ai-loader, the one element script.js appends to ) so nothing here can ever touch elements outside this widget — safe alongside Astra or any other theme/plugin classes. Tailwind CDN import is kept on purpose: script.js injects Tailwind utility classes (grid-cols-*, mt-4, text-red-500, etc.) straight into the dynamically-rendered steps. Removing the import would break that layout. Every rule below uses !important specifically to guarantee it wins over both Tailwind utilities and the theme. ================================================================ */ @import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css'); #vet-ai-checker-form, #vet-ai-checker-form *, #vet-ai-checker-form *::before, #vet-ai-checker-form *::after { box-sizing: border-box !important; } #vet-ai-checker-form { --vac-bg: #FFFFFF; --vac-bg-secondary: #F9F9F8; --vac-bg-tertiary: #F2F1EF; --vac-border: rgba(0, 0, 0, 0.08); --vac-border-mid: rgba(0, 0, 0, 0.14); --vac-text: #1A1A1A; --vac-text-secondary: #6B6B6B; --vac-text-tertiary: #A0A0A0; --vac-accent: #0E9F6E; --vac-accent-hover: #0C8659; --vac-accent-subtle: rgba(14, 159, 110, 0.08); --vac-error: #FF453A; --vac-warning: #FF9F0A; --vac-success: #30D158; --vac-radius-sm: 6px; --vac-radius-md: 10px; --vac-radius-lg: 14px; --vac-radius-xl: 18px; --vac-shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --vac-shadow-md: 0 4px 20px rgba(0,0,0,0.08); --vac-ease: cubic-bezier(0.4, 0, 0.2, 1); --vac-touch: 44px; display: block !important; width: 100% !important; max-width: 760px !important; margin: 0 auto !important; padding: 32px 20px calc(6.5rem + env(safe-area-inset-bottom, 0px)) 20px !important; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--vac-text) !important; -webkit-font-smoothing: antialiased !important; position: relative !important; float: none !important; } #vet-ai-checker-form h1, #vet-ai-checker-form h2, #vet-ai-checker-form h3, #vet-ai-checker-form h4, #vet-ai-checker-form p { margin: 0 !important; } /* ================================================================ MODE SELECTION (Basic / Advanced) ================================================================ */ #vet-ai-checker-form .mode-selection { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin-bottom: 24px !important; flex-wrap: wrap !important; } #vet-ai-checker-form .mode-selection .btn { flex: none !important; width: auto !important; min-width: 96px !important; min-height: var(--vac-touch) !important; padding: 10px 22px !important; border-radius: 999px !important; cursor: pointer !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: -0.1px !important; transition: all 0.2s var(--vac-ease) !important; border: 1px solid var(--vac-border) !important; box-shadow: none !important; } #vet-ai-checker-form .mode-selection .btn.active { background-color: var(--vac-text) !important; color: #FFFFFF !important; border-color: var(--vac-text) !important; } #vet-ai-checker-form .mode-selection .btn:not(.active) { background-color: var(--vac-bg) !important; color: var(--vac-text-secondary) !important; } #vet-ai-checker-form .mode-selection .btn:not(.active):hover { background-color: var(--vac-bg-secondary) !important; color: var(--vac-text) !important; transform: none !important; } /* ================================================================ DISCLAIMER ================================================================ */ #vet-ai-checker-form .disclaimer { font-size: 12.5px !important; color: var(--vac-text-secondary) !important; text-align: center !important; margin-bottom: 24px !important; font-style: normal !important; background: var(--vac-bg-secondary) !important; border: 1px solid var(--vac-border) !important; padding: 12px 16px !important; border-radius: var(--vac-radius-md) !important; line-height: 1.55 !important; } /* ================================================================ PROGRESS BAR ================================================================ */ #vet-ai-checker-form .progress-container { background-color: var(--vac-bg-tertiary) !important; height: 6px !important; border-radius: 999px !important; margin-bottom: 28px !important; overflow: hidden !important; width: 100% !important; } #vet-ai-checker-form .progress-bar { height: 100% !important; background-color: var(--vac-accent) !important; display: block !important; transition: width 0.3s var(--vac-ease) !important; color: transparent !important; font-size: 0 !important; border-radius: 999px !important; } /* ================================================================ STEP CONTAINER ================================================================ */ #vet-ai-checker-form #vet-ai-steps, #vet-ai-checker-form #vet-ai-steps .card, #vet-ai-checker-form #vet-ai-steps .step-card { max-width: 100% !important; width: 100% !important; margin: 0 !important; box-shadow: none !important; } #vet-ai-checker-form #vet-ai-steps h3 { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.3px !important; margin-bottom: 16px !important; color: var(--vac-text) !important; } #vet-ai-checker-form .card { background-color: var(--vac-bg) !important; padding: 24px !important; border-radius: var(--vac-radius-lg) !important; border: 1px solid var(--vac-border) !important; box-shadow: var(--vac-shadow-sm) !important; margin-bottom: 20px !important; width: 100% !important; } #vet-ai-checker-form .card h4 { font-size: 15px !important; font-weight: 600 !important; color: var(--vac-text) !important; margin-bottom: 12px !important; letter-spacing: -0.1px !important; } /* ================================================================ SPECIES SELECTION ================================================================ */ #vet-ai-checker-form .species-cards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important; gap: 10px !important; width: 100% !important; } #vet-ai-checker-form .species-card { background-color: var(--vac-bg) !important; padding: 16px 8px !important; min-height: var(--vac-touch) !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; border-radius: var(--vac-radius-md) !important; border: 1px solid var(--vac-border) !important; box-shadow: none !important; cursor: pointer !important; font-weight: 500 !important; font-size: 14px !important; color: var(--vac-text-secondary) !important; transition: all 0.15s var(--vac-ease) !important; user-select: none !important; } #vet-ai-checker-form .species-card:hover { transform: translateY(-1px) !important; border-color: var(--vac-border-mid) !important; background-color: var(--vac-bg-secondary) !important; color: var(--vac-text) !important; } #vet-ai-checker-form .species-card.selected { background-color: var(--vac-accent) !important; border-color: var(--vac-accent) !important; color: #FFFFFF !important; box-shadow: 0 0 0 3px var(--vac-accent-subtle) !important; } /* ================================================================ FORM FIELDS (shared across Pet Details, Symptoms, Tests, Follow-Up) ================================================================ */ #vet-ai-checker-form input[type="text"], #vet-ai-checker-form input[type="file"], #vet-ai-checker-form select, #vet-ai-checker-form textarea { width: 100% !important; min-height: var(--vac-touch) !important; padding: 11px 14px !important; border: 1px solid var(--vac-border-mid) !important; background: var(--vac-bg-secondary) !important; border-radius: var(--vac-radius-md) !important; font-size: 15px !important; color: var(--vac-text) !important; transition: all 0.2s var(--vac-ease) !important; font-family: inherit !important; line-height: 1.3 !important; appearance: none !important; -webkit-appearance: none !important; } #vet-ai-checker-form select { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; padding-right: 38px !important; cursor: pointer !important; } #vet-ai-checker-form textarea { height: auto !important; min-height: 100px !important; resize: vertical !important; padding-top: 11px !important; } #vet-ai-checker-form input[type="text"]:focus, #vet-ai-checker-form select:focus, #vet-ai-checker-form textarea:focus { outline: none !important; background-color: var(--vac-bg) !important; border-color: var(--vac-accent) !important; box-shadow: 0 0 0 3px var(--vac-accent-subtle) !important; } #vet-ai-checker-form input[type="file"] { padding: 9px 12px !important; cursor: pointer !important; font-size: 13.5px !important; color: var(--vac-text-secondary) !important; } #vet-ai-checker-form label { font-weight: 600 !important; color: var(--vac-text-secondary) !important; font-size: 12.5px !important; margin-bottom: 6px !important; display: block !important; letter-spacing: 0.1px !important; } /* ================================================================ PET DETAILS GRID ================================================================ */ #vet-ai-checker-form .pet-details-card { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; background-color: var(--vac-bg) !important; padding: 24px !important; border: 1px solid var(--vac-border) !important; border-radius: var(--vac-radius-lg) !important; box-shadow: var(--vac-shadow-sm) !important; width: 100% !important; } #vet-ai-checker-form .pet-details-card .grid-item { display: flex !important; flex-direction: column !important; min-width: 0 !important; } #vet-ai-checker-form .pet-details-card .full-width { grid-column: 1 / -1 !important; } #vet-ai-checker-form .pet-details-card .breed-container { grid-column: auto !important; } #vet-ai-checker-form #custom-breed { width: 100% !important; margin-top: 8px !important; } #vet-ai-checker-form #custom-breed label { font-size: 12px !important; color: var(--vac-text-tertiary) !important; margin-bottom: 4px !important; } /* ================================================================ SYMPTOMS / TESTS / FOLLOW-UP ================================================================ */ #vet-ai-checker-form .symptoms-search { margin-bottom: 16px !important; } #vet-ai-checker-form .symptoms-search input { margin-bottom: 8px !important; } /* jQuery UI's autocomplete widget appends its suggestion list directly to (outside #vet-ai-checker-form), so it must be styled here as its own top-level block rather than as a descendant of the form. These are jQuery-UI-specific classes (not generic theme classes), so conflict risk with Astra is low. */ .ui-autocomplete { max-height: 220px !important; overflow-y: auto !important; background-color: #FFFFFF !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 10px !important; box-shadow: 0 8px 28px rgba(0,0,0,0.14) !important; z-index: 100000 !important; padding: 4px !important; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important; list-style: none !important; margin: 4px 0 0 0 !important; box-sizing: border-box !important; width: auto !important; min-width: 200px !important; max-width: min(90vw, 420px) !important; } .ui-autocomplete .ui-menu-item { padding: 0 !important; list-style: none !important; } .ui-autocomplete .ui-menu-item-wrapper, .ui-autocomplete .ui-menu-item > div, .ui-autocomplete .ui-menu-item > a { display: block !important; padding: 9px 12px !important; cursor: pointer !important; border-radius: 6px !important; font-size: 14px !important; color: #1A1A1A !important; background: transparent !important; border: none !important; text-decoration: none !important; } .ui-autocomplete .ui-menu-item-wrapper.ui-state-active, .ui-autocomplete .ui-menu-item > div.ui-state-active, .ui-autocomplete .ui-state-focus { background-color: #F9F9F8 !important; color: #1A1A1A !important; border: none !important; margin: 0 !important; } #vet-ai-checker-form .selected-symptom, #vet-ai-checker-form .custom-symptom { background-color: var(--vac-accent-subtle) !important; color: var(--vac-text) !important; padding: 8px 14px !important; border-radius: 999px !important; margin: 0 6px 6px 0 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 500 !important; border: 1px solid rgba(14, 159, 110, 0.2) !important; } #vet-ai-checker-form .remove-sym, #vet-ai-checker-form .remove-symptom, #vet-ai-checker-form .remove-test { background: none !important; border: none !important; color: var(--vac-error) !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; padding: 4px 8px !important; min-height: 28px !important; border-radius: var(--vac-radius-sm) !important; transition: background 0.15s var(--vac-ease) !important; } #vet-ai-checker-form .remove-sym:hover, #vet-ai-checker-form .remove-symptom:hover, #vet-ai-checker-form .remove-test:hover { background: rgba(255, 69, 58, 0.08) !important; } #vet-ai-checker-form .test-checkbox { display: flex !important; align-items: center !important; gap: 8px !important; padding: 10px !important; min-height: var(--vac-touch) !important; border-radius: var(--vac-radius-md) !important; transition: background 0.15s var(--vac-ease) !important; } #vet-ai-checker-form .test-checkbox:hover { background: var(--vac-bg-secondary) !important; } #vet-ai-checker-form .test-checkbox input[type="checkbox"] { width: 18px !important; height: 18px !important; min-height: 0 !important; accent-color: var(--vac-accent) !important; flex-shrink: 0 !important; } #vet-ai-checker-form .custom-test { background-color: var(--vac-bg-secondary) !important; border: 1px solid var(--vac-border) !important; border-radius: var(--vac-radius-md) !important; padding: 10px 12px !important; } #vet-ai-checker-form .follow-up-item { margin-bottom: 18px !important; } #vet-ai-checker-form .follow-up-item label { font-weight: 600 !important; color: var(--vac-text) !important; font-size: 14px !important; } /* ================================================================ DIAGNOSIS RESULTS ================================================================ */ #vet-ai-checker-form .diagnosis-card { background-color: var(--vac-bg) !important; padding: 20px !important; border-radius: var(--vac-radius-lg) !important; border: 1px solid var(--vac-border) !important; box-shadow: var(--vac-shadow-sm) !important; margin-bottom: 16px !important; width: 100% !important; } #vet-ai-checker-form .diagnosis-card.high { border-left: 3px solid var(--vac-error) !important; } #vet-ai-checker-form .diagnosis-card.medium { border-left: 3px solid var(--vac-warning) !important; } #vet-ai-checker-form .diagnosis-card.low { border-left: 3px solid var(--vac-success) !important; } #vet-ai-checker-form .probability.High { color: var(--vac-error) !important; font-weight: 600 !important; } #vet-ai-checker-form .probability.Medium { color: #B26B00 !important; font-weight: 600 !important; } #vet-ai-checker-form .probability.Low { color: #1A7A35 !important; font-weight: 600 !important; } #vet-ai-checker-form .diagnosis-section { border-left: 3px solid var(--vac-border) !important; border-radius: var(--vac-radius-md) !important; } #vet-ai-checker-form .high-prob { border-left-color: var(--vac-error) !important; background-color: rgba(255, 69, 58, 0.05) !important; border-radius: var(--vac-radius-md) !important; } #vet-ai-checker-form .medium-prob { border-left-color: var(--vac-warning) !important; background-color: rgba(255, 159, 10, 0.06) !important; border-radius: var(--vac-radius-md) !important; } #vet-ai-checker-form .low-prob { border-left-color: var(--vac-success) !important; background-color: rgba(48, 209, 88, 0.06) !important; border-radius: var(--vac-radius-md) !important; } #vet-ai-checker-form .recommendations { border: 1px solid var(--vac-border) !important; background: var(--vac-bg-secondary) !important; border-radius: var(--vac-radius-md) !important; padding: 14px !important; } #vet-ai-checker-form .treatment-link { background-color: var(--vac-accent-subtle) !important; border: 1px solid rgba(14, 159, 110, 0.2) !important; border-radius: var(--vac-radius-md) !important; color: var(--vac-text) !important; font-size: 13.5px !important; } #vet-ai-checker-form .treatment-link a { color: var(--vac-accent) !important; font-weight: 600 !important; } /* ================================================================ BOTTOM NAVIGATION BAR ================================================================ */ #vet-ai-checker-form .button-group { display: flex !important; gap: 10px !important; justify-content: center !important; align-items: center !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background-color: rgba(255,255,255,0.9) !important; backdrop-filter: blur(20px) saturate(200%) !important; -webkit-backdrop-filter: blur(20px) saturate(200%) !important; padding-top: 12px !important; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; padding-left: max(20px, calc((100% - 760px) / 2 + 20px)) !important; padding-right: max(20px, calc((100% - 760px) / 2 + 20px)) !important; box-shadow: none !important; border-top: 1px solid var(--vac-border) !important; z-index: 1000 !important; margin: 0 !important; } #vet-ai-checker-form .btn { flex: 1 1 0 !important; min-height: var(--vac-touch) !important; padding: 0 20px !important; background-color: var(--vac-text) !important; color: #FFFFFF !important; border: none !important; border-radius: 999px !important; cursor: pointer !important; font-weight: 600 !important; font-size: 14.5px !important; transition: all 0.2s var(--vac-ease) !important; position: relative !important; text-align: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #vet-ai-checker-form .button-group .btn { max-width: none !important; } #vet-ai-checker-form .button-group .btn:hover { background-color: #333333 !important; transform: translateY(-1px) !important; } #vet-ai-checker-form .button-group .btn:active { transform: translateY(0) scale(0.98) !important; } #vet-ai-checker-form #vet-ai-next { background-color: var(--vac-accent) !important; } #vet-ai-checker-form #vet-ai-next:hover { background-color: var(--vac-accent-hover) !important; } #vet-ai-checker-form #vet-ai-prev { background-color: var(--vac-bg-tertiary) !important; color: var(--vac-text) !important; } #vet-ai-checker-form #vet-ai-prev:hover { background-color: var(--vac-border-mid) !important; } #vet-ai-checker-form .btn.loading { color: transparent !important; pointer-events: none !important; } #vet-ai-checker-form .btn.loading::after { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 16px !important; height: 16px !important; margin: -8px 0 0 -8px !important; border: 2px solid rgba(255,255,255,0.5) !important; border-top-color: #FFFFFF !important; border-radius: 50% !important; animation: vacSpin 0.6s linear infinite !important; } @keyframes vacSpin { to { transform: rotate(360deg) !important; } } #vet-ai-checker-form .resources { margin-top: 24px !important; text-align: center !important; font-size: 12.5px !important; color: var(--vac-text-tertiary) !important; line-height: 1.6 !important; } #vet-ai-checker-form .resources a { color: var(--vac-accent) !important; text-decoration: none !important; font-weight: 500 !important; } #vet-ai-checker-form .resources a:hover { text-decoration: underline !important; } /* ================================================================ ERRORS ================================================================ */ #vet-ai-checker-form .error-message { background-color: rgba(255, 69, 58, 0.06) !important; border: 1px solid rgba(255, 69, 58, 0.25) !important; border-left: 3px solid var(--vac-error) !important; color: #B91C1C !important; padding: 12px 16px !important; border-radius: var(--vac-radius-md) !important; margin-bottom: 16px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 13px !important; gap: 10px !important; } #vet-ai-checker-form .error-message button { background: none !important; border: none !important; color: var(--vac-error) !important; cursor: pointer !important; font-weight: 600 !important; font-size: 13px !important; min-height: 32px !important; padding: 4px 10px !important; flex-shrink: 0 !important; } /* ================================================================ AI LOADER — appended to directly by script.js, scoped under its own #ai-loader ID rather than #vet-ai-checker-form. ================================================================ */ #ai-loader { background: #FFFFFF !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 18px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important; max-width: calc(100vw - 32px) !important; max-height: calc(100vh - 32px) !important; } #ai-loader .bg-circle { stroke-dasharray: 283; stroke-dashoffset: 0; } #ai-loader .circular-progress { transform: rotate(-90deg); } #ai-loader .progress-circle { transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1); stroke: #0E9F6E !important; } #ai-loader #progress-percent { color: #1A1A1A !important; } #ai-loader #animal-fact { color: #6B6B6B !important; font-size: 13.5px !important; } /* ================================================================ FEEDBACK BUTTONS ================================================================ */ #vet-ai-checker-form .feedback-buttons { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; } #vet-ai-checker-form .feedback-buttons button { cursor: pointer !important; border: 1px solid var(--vac-border) !important; background: var(--vac-bg) !important; color: var(--vac-text-secondary) !important; transition: all 0.2s var(--vac-ease) !important; border-radius: 999px !important; padding: 8px 16px !important; min-height: 36px !important; font-size: 12.5px !important; font-weight: 500 !important; } #vet-ai-checker-form .feedback-buttons button:hover:not(:disabled) { background: var(--vac-bg-secondary) !important; color: var(--vac-text) !important; opacity: 1 !important; } #vet-ai-checker-form .feedback-buttons button:disabled { cursor: not-allowed !important; opacity: 0.5 !important; } #vet-ai-checker-form .description { margin-bottom: 16px !important; color: var(--vac-text-secondary) !important; font-size: 13px !important; } /* ================================================================ RESPONSIVE — TABLET ================================================================ */ @media (max-width: 768px) { #vet-ai-checker-form { padding: 24px 16px calc(6.5rem + env(safe-area-inset-bottom, 0px)) 16px !important; } #vet-ai-checker-form .pet-details-card { grid-template-columns: 1fr 1fr !important; padding: 20px !important; gap: 16px !important; } } /* ================================================================ RESPONSIVE — MOBILE ================================================================ */ @media (max-width: 560px) { #vet-ai-checker-form { padding: 20px 14px calc(6.5rem + env(safe-area-inset-bottom, 0px)) 14px !important; } #vet-ai-checker-form #vet-ai-steps h3 { font-size: 18px !important; } #vet-ai-checker-form .species-cards { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)) !important; gap: 8px !important; } #vet-ai-checker-form .species-card { padding: 12px 6px !important; font-size: 13px !important; } #vet-ai-checker-form .pet-details-card { grid-template-columns: 1fr !important; padding: 16px !important; gap: 14px !important; } #vet-ai-checker-form .card { padding: 16px !important; } #vet-ai-checker-form .mode-selection .btn { min-width: 84px !important; padding: 9px 16px !important; font-size: 13px !important; } #vet-ai-checker-form .button-group { padding-top: 10px !important; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; } #vet-ai-checker-form .btn { font-size: 13.5px !important; padding: 0 14px !important; } } /* ================================================================ RESPONSIVE — VERY SMALL (≤360px) ================================================================ */ @media (max-width: 360px) { #vet-ai-checker-form .species-cards { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important; } #vet-ai-checker-form .mode-selection .btn { min-width: 76px !important; padding: 8px 12px !important; } }