Spaces:
Running
Running
| /* MedGemma Local — modern, medical-themed UI */ | |
| :root { | |
| --bg: #0b1020; | |
| --surface: #111733; | |
| --surface-2: #161e3f; | |
| --border: #243057; | |
| --text: #e7ecff; | |
| --muted: #8a98c2; | |
| --primary: #6aa8ff; | |
| --primary-2: #8b5cf6; | |
| --accent: #22d3ee; | |
| --ok: #34d399; | |
| --warn: #fbbf24; | |
| --error: #f87171; | |
| --user-bubble: linear-gradient(135deg, #2563eb 0%, #6d28d9 100%); | |
| --ai-bubble: #1a2148; | |
| --radius: 14px; | |
| --radius-sm: 10px; | |
| --shadow: 0 10px 30px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.18); | |
| --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; | |
| } | |
| @media (prefers-color-scheme: light) { | |
| :root { | |
| --bg: #f3f6ff; | |
| --surface: #ffffff; | |
| --surface-2: #f7faff; | |
| --border: #dde4f3; | |
| --text: #0e1735; | |
| --muted: #5a6886; | |
| --primary: #2563eb; | |
| --primary-2: #7c3aed; | |
| --ai-bubble: #eef2ff; | |
| --shadow: 0 8px 24px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04); | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { height: 100%; } | |
| body { | |
| margin: 0; | |
| font-family: var(--font); | |
| color: var(--text); | |
| background: | |
| radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,0.18), transparent 60%), | |
| radial-gradient(900px 500px at -10% 110%, rgba(34,211,238,0.14), transparent 60%), | |
| var(--bg); | |
| font-size: 15px; | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| overflow: hidden; /* page never scrolls; scrolling happens inside .chat / .side-panel */ | |
| } | |
| a { color: var(--primary); text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| .app { | |
| max-width: 1180px; | |
| margin: 0 auto; | |
| padding: 16px 20px 0; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; /* fixed viewport height */ | |
| height: 100dvh; /* honor mobile viewport changes */ | |
| min-height: 0; | |
| } | |
| /* TOPBAR */ | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 14px 18px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| margin-bottom: 14px; | |
| } | |
| .brand { display: flex; align-items: center; gap: 12px; } | |
| .logo { | |
| width: 38px; height: 38px; | |
| display: grid; place-items: center; | |
| border-radius: 10px; | |
| color: white; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); | |
| box-shadow: 0 4px 10px rgba(139,92,246,0.35); | |
| } | |
| .title h1 { | |
| margin: 0; | |
| font-size: 17px; | |
| letter-spacing: -0.01em; | |
| } | |
| .title .subtitle { | |
| margin: 1px 0 0; | |
| font-size: 12.5px; | |
| color: var(--muted); | |
| } | |
| .status { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| padding: 6px 12px; | |
| font-size: 12.5px; | |
| border-radius: 999px; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| color: var(--muted); | |
| white-space: nowrap; | |
| } | |
| .status-dot { | |
| width: 8px; height: 8px; border-radius: 50%; | |
| background: var(--muted); | |
| box-shadow: 0 0 0 0 rgba(106,168,255,0.7); | |
| } | |
| .status.loading .status-dot { background: var(--warn); animation: pulse 1.2s infinite; } | |
| .status.ready .status-dot { background: var(--ok); } | |
| .status.error .status-dot { background: var(--error); } | |
| .status.generating .status-dot { background: var(--accent); animation: pulse 1.2s infinite; } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 currentColor; } | |
| 100% { box-shadow: 0 0 0 8px transparent; } | |
| } | |
| /* LAYOUT */ | |
| .layout { | |
| display: grid; | |
| grid-template-columns: minmax(0,1fr) 320px; | |
| gap: 14px; | |
| flex: 1 1 auto; | |
| min-height: 0; /* allow children to shrink so .chat can scroll internally */ | |
| overflow: hidden; | |
| } | |
| @media (max-width: 900px) { | |
| .layout { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 700px) { | |
| .app { | |
| padding: 8px 8px 0; | |
| } | |
| .topbar { | |
| padding: 10px 12px; | |
| flex-wrap: wrap; | |
| align-items: flex-start; | |
| } | |
| .title h1 { | |
| font-size: 16px; | |
| } | |
| .title .subtitle { | |
| font-size: 11.5px; | |
| line-height: 1.35; | |
| } | |
| .status { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .layout { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| .panel { | |
| border-radius: 12px; | |
| } | |
| .chat-panel { | |
| flex: 1 1 auto; | |
| min-height: 52dvh; | |
| } | |
| .side-panel { | |
| flex: 0 0 auto; | |
| max-height: 40dvh; | |
| } | |
| .chat { | |
| padding: 12px; | |
| gap: 10px; | |
| } | |
| .msg .bubble { | |
| max-width: 88%; | |
| padding: 9px 12px; | |
| font-size: 14px; | |
| } | |
| .composer { | |
| grid-template-columns: auto 1fr auto; | |
| padding: 10px; | |
| gap: 6px; | |
| } | |
| .composer textarea { | |
| font-size: 16px; | |
| min-height: 48px; | |
| max-height: 34vh; | |
| } | |
| .attach-btn, | |
| .send-btn { | |
| height: 44px; | |
| min-width: 44px; | |
| border-radius: 12px; | |
| } | |
| .model-card, | |
| .params, | |
| .muted { | |
| padding-left: 12px; | |
| padding-right: 12px; | |
| } | |
| .model-switcher select { | |
| font-size: 15px; | |
| } | |
| .kv code { | |
| max-width: 180px; | |
| } | |
| } | |
| .panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| display: flex; flex-direction: column; | |
| overflow: hidden; | |
| min-height: 0; | |
| } | |
| .side-panel { overflow-y: auto; } | |
| .panel-head { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border); | |
| background: linear-gradient(0deg, transparent, rgba(255,255,255,0.02)), var(--surface); | |
| } | |
| .panel-head h2 { | |
| margin: 0; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); | |
| } | |
| /* CHAT */ | |
| .chat-panel { min-height: 0; } | |
| .chat { | |
| flex: 1 1 0; | |
| min-height: 0; | |
| padding: 16px; | |
| overflow-y: auto; | |
| display: flex; flex-direction: column; gap: 12px; | |
| scroll-behavior: smooth; | |
| } | |
| .msg { display: flex; gap: 10px; align-items: flex-start; } | |
| .msg.user { flex-direction: row-reverse; } | |
| .msg .avatar { | |
| width: 30px; height: 30px; border-radius: 9px; | |
| display: grid; place-items: center; | |
| font-size: 11px; font-weight: 700; color: white; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-2)); | |
| flex-shrink: 0; | |
| } | |
| .msg.user .avatar { background: linear-gradient(135deg, #ef4444, #f59e0b); } | |
| .msg .bubble { | |
| max-width: min(78%, 720px); | |
| padding: 10px 14px; | |
| border-radius: 14px; | |
| background: var(--ai-bubble); | |
| border: 1px solid var(--border); | |
| word-wrap: break-word; | |
| overflow-wrap: anywhere; | |
| white-space: pre-wrap; | |
| } | |
| .msg.user .bubble { | |
| background: var(--user-bubble); | |
| border-color: transparent; | |
| color: white; | |
| } | |
| .msg .bubble p { margin: 0 0 8px; } | |
| .msg .bubble p:last-child { margin-bottom: 0; } | |
| .msg .bubble pre { | |
| background: rgba(0,0,0,0.25); | |
| padding: 10px; border-radius: 8px; overflow-x: auto; margin: 8px 0; font-family: var(--mono); font-size: 12.5px; | |
| } | |
| .msg .bubble code { font-family: var(--mono); font-size: 12.5px; } | |
| .msg .bubble .attachment-preview { | |
| display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; | |
| } | |
| .msg .bubble .attachment-preview img { | |
| max-width: 160px; max-height: 160px; | |
| border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); | |
| } | |
| .msg .bubble .attachment-preview .file-chip { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| padding: 4px 8px; border-radius: 8px; | |
| background: rgba(255,255,255,0.10); font-size: 12px; | |
| } | |
| .cursor::after { content: "▍"; opacity: 0.6; animation: blink 1s steps(2,start) infinite; } | |
| @keyframes blink { to { visibility: hidden; } } | |
| /* ATTACHMENTS PRE-SEND */ | |
| .attachments { | |
| display: flex; flex-wrap: wrap; gap: 8px; | |
| padding: 10px 16px; | |
| border-top: 1px solid var(--border); | |
| background: var(--surface-2); | |
| } | |
| .chip { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| font-size: 12.5px; | |
| max-width: 260px; | |
| } | |
| .chip img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; } | |
| .chip .chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } | |
| .chip .chip-remove { | |
| border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; | |
| } | |
| .chip .chip-remove:hover { color: var(--error); } | |
| /* COMPOSER */ | |
| .composer { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| align-items: end; | |
| gap: 8px; | |
| padding: 10px 12px 12px; | |
| border-top: 1px solid var(--border); | |
| background: var(--surface); | |
| } | |
| .composer textarea { | |
| resize: none; | |
| background: var(--surface-2); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 10px 12px; | |
| font-family: inherit; | |
| font-size: 14.5px; | |
| line-height: 1.4; | |
| max-height: 180px; | |
| overflow-y: auto; | |
| outline: none; | |
| } | |
| .composer textarea:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(106,168,255,0.18); | |
| } | |
| .attach-btn, .send-btn { | |
| height: 40px; min-width: 40px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border); | |
| background: var(--surface-2); | |
| color: var(--text); | |
| cursor: pointer; | |
| display: inline-flex; align-items: center; justify-content: center; | |
| gap: 6px; padding: 0 12px; | |
| transition: transform .08s ease, background .12s ease, border-color .12s ease; | |
| } | |
| .attach-btn:hover, .send-btn:hover { border-color: var(--primary); } | |
| .attach-btn { padding: 0 10px; } | |
| .send-btn { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-2)); | |
| color: white; border-color: transparent; | |
| font-weight: 600; | |
| } | |
| .send-btn[disabled] { | |
| opacity: .5; cursor: not-allowed; | |
| background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); | |
| } | |
| .send-btn:not([disabled]):active { transform: translateY(1px); } | |
| /* SIDE PANEL */ | |
| .side-panel .panel-head:not(:first-child) { border-top: 1px solid var(--border); } | |
| .model-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } | |
| .model-switcher { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| font-size: 12.5px; | |
| color: var(--muted); | |
| } | |
| .model-switcher span { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .model-switcher select { | |
| width: 100%; | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| background: var(--surface-2); | |
| color: var(--text); | |
| padding: 9px 10px; | |
| font: inherit; | |
| cursor: pointer; | |
| } | |
| .kv { | |
| display: flex; justify-content: space-between; align-items: center; | |
| font-size: 12.5px; color: var(--muted); | |
| gap: 10px; | |
| } | |
| .kv code { | |
| color: var(--text); | |
| font-family: var(--mono); | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| padding: 2px 6px; | |
| border-radius: 6px; | |
| font-size: 11.5px; | |
| max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | |
| } | |
| .primary-btn { | |
| margin-top: 4px; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-2)); | |
| color: white; | |
| border: none; | |
| padding: 10px 12px; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .primary-btn[disabled] { | |
| cursor: not-allowed; opacity: .6; | |
| } | |
| .ghost-btn { | |
| background: transparent; | |
| color: var(--muted); | |
| border: 1px solid var(--border); | |
| padding: 4px 10px; | |
| border-radius: 8px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| } | |
| .ghost-btn:hover { color: var(--text); border-color: var(--primary); } | |
| .loader { padding: 8px 0 0; } | |
| .loader-label { | |
| display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); | |
| margin-bottom: 6px; | |
| } | |
| .bar { | |
| height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; | |
| border: 1px solid var(--border); | |
| } | |
| .bar-fill { | |
| height: 100%; width: 0%; | |
| background: linear-gradient(90deg, var(--accent), var(--primary)); | |
| transition: width .2s ease; | |
| } | |
| .loader-note { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; } | |
| /* PARAMETER DIALS */ | |
| .params { padding: 8px 16px 14px; display: flex; flex-direction: column; gap: 12px; } | |
| .param label { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| gap: 8px; | |
| font-size: 12.5px; | |
| color: var(--text); | |
| margin-bottom: 4px; | |
| } | |
| .param label .hint { | |
| color: var(--muted); | |
| font-size: 11px; | |
| font-weight: 400; | |
| text-align: right; | |
| flex: 1; | |
| } | |
| .param-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .param-row output { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| min-width: 44px; | |
| text-align: right; | |
| color: var(--text); | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 2px 6px; | |
| } | |
| .param input[type="range"] { | |
| flex: 1; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: transparent; | |
| height: 22px; | |
| margin: 0; | |
| cursor: pointer; | |
| } | |
| .param input[type="range"]::-webkit-slider-runnable-track { | |
| height: 4px; | |
| border-radius: 2px; | |
| background: linear-gradient(90deg, var(--primary), var(--primary-2)); | |
| border: 1px solid var(--border); | |
| } | |
| .param input[type="range"]::-moz-range-track { | |
| height: 4px; | |
| border-radius: 2px; | |
| background: linear-gradient(90deg, var(--primary), var(--primary-2)); | |
| border: 1px solid var(--border); | |
| } | |
| .param input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--surface); | |
| border: 2px solid var(--primary); | |
| margin-top: -7px; | |
| box-shadow: 0 1px 4px rgba(0,0,0,.3); | |
| cursor: grab; | |
| } | |
| .param input[type="range"]::-moz-range-thumb { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--surface); | |
| border: 2px solid var(--primary); | |
| box-shadow: 0 1px 4px rgba(0,0,0,.3); | |
| cursor: grab; | |
| } | |
| .param input[type="range"]:focus { outline: none; } | |
| .param input[type="range"]:focus::-webkit-slider-thumb { | |
| box-shadow: 0 0 0 4px rgba(106,168,255,0.25); | |
| } | |
| .tips { margin: 0; padding: 12px 16px 0 30px; } | |
| .tips li { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; } | |
| .muted { color: var(--muted); font-size: 12.5px; padding: 12px 16px 16px; } | |
| .footer { | |
| text-align: center; | |
| color: var(--muted); | |
| font-size: 12px; | |
| padding: 10px 0; | |
| flex: 0 0 auto; | |
| } | |
| /* SCROLLBARS */ | |
| .chat::-webkit-scrollbar, textarea::-webkit-scrollbar { width: 10px; } | |
| .chat::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb { | |
| background: var(--border); border-radius: 10px; | |
| } | |
| .chat::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover { background: var(--muted); } | |