Spaces:
Running
Running
| /* ============================================ | |
| Bio-RAG — Dark Theme Medical UI | |
| ============================================ */ | |
| /* --- CSS Variables --- */ | |
| :root { | |
| --bg-primary: #0a0a0f; | |
| --bg-secondary: #12121a; | |
| --bg-sidebar: #0e0e16; | |
| --bg-header: rgba(10, 10, 15, 0.8); | |
| --bg-input: #16161f; | |
| --bg-user-msg: #1a2a42; | |
| --bg-hover: rgba(255, 255, 255, 0.04); | |
| --bg-card: rgba(255, 255, 255, 0.03); | |
| --bg-card-hover: rgba(255, 255, 255, 0.07); | |
| --bg-safe: rgba(46, 204, 113, 0.06); | |
| --bg-flagged: rgba(231, 76, 60, 0.06); | |
| --text-primary: #e8e8ed; | |
| --text-secondary: #8b8b9e; | |
| --text-muted: #55556a; | |
| --text-user: #ffffff; | |
| --accent: #4a9eff; | |
| --accent-hover: #6bb3ff; | |
| --safe: #2ecc71; | |
| --flagged: #e74c3c; | |
| --warning: #f39c12; | |
| --border: rgba(255, 255, 255, 0.06); | |
| --border-light: rgba(255, 255, 255, 0.1); | |
| --border-input: rgba(255, 255, 255, 0.12); | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); | |
| --sidebar-width: 260px; | |
| --header-height: 56px; | |
| --chat-max-width: 800px; | |
| --input-max-width: 800px; | |
| --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --font-mono: 'IBM Plex Mono', 'Consolas', monospace; | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 18px; | |
| --radius-pill: 24px; | |
| --radius-round: 50%; | |
| --transition-fast: 150ms ease; | |
| --transition-normal: 250ms ease; | |
| --transition-slow: 400ms ease; | |
| } | |
| /* --- Reset & Base --- */ | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 15px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| font-family: var(--font-body); | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.65; | |
| display: flex; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| button { | |
| font-family: inherit; | |
| cursor: pointer; | |
| border: none; | |
| background: none; | |
| color: inherit; | |
| font-size: inherit; | |
| } | |
| textarea { | |
| font-family: inherit; | |
| font-size: inherit; | |
| color: inherit; | |
| } | |
| /* --- Scrollbar --- */ | |
| ::-webkit-scrollbar { | |
| width: 5px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.18); | |
| } | |
| /* ============================================ | |
| SIDEBAR | |
| ============================================ */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| height: 100vh; | |
| background: var(--bg-sidebar); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| flex-shrink: 0; | |
| transition: transform var(--transition-normal), width var(--transition-normal); | |
| z-index: 100; | |
| } | |
| .sidebar.collapsed { | |
| transform: translateX(-100%); | |
| width: 0; | |
| border: none; | |
| } | |
| .sidebar.collapsed .sidebar-header { | |
| display: none; | |
| } | |
| .sidebar-header { | |
| padding: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .sidebar-toggle { | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| transition: background var(--transition-fast), color var(--transition-fast); | |
| } | |
| .sidebar-toggle:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .new-chat-btn { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| padding: 8px 14px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-light); | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| transition: all var(--transition-fast); | |
| } | |
| .new-chat-btn:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| border-color: var(--border-light); | |
| } | |
| .sidebar-history { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 12px 8px; | |
| } | |
| .history-section-title { | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 1.2px; | |
| padding: 8px 12px 4px; | |
| margin-top: 8px; | |
| } | |
| .history-item { | |
| display: block; | |
| width: 100%; | |
| text-align: left; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| transition: background var(--transition-fast), color var(--transition-fast); | |
| } | |
| .history-item:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .history-item.active { | |
| background: var(--bg-card-hover); | |
| color: var(--text-primary); | |
| } | |
| .sidebar-footer { | |
| padding: 12px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .sidebar-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| padding: 8px 12px; | |
| } | |
| .badge-dot { | |
| width: 6px; | |
| height: 6px; | |
| background: var(--safe); | |
| border-radius: var(--radius-round); | |
| animation: pulse-dot 2s infinite; | |
| } | |
| @keyframes pulse-dot { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| /* ============================================ | |
| MAIN AREA | |
| ============================================ */ | |
| .main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| min-width: 0; | |
| position: relative; | |
| } | |
| /* --- HEADER --- */ | |
| .header { | |
| height: var(--header-height); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 16px; | |
| background: var(--bg-header); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| flex-shrink: 0; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .header-menu-btn { | |
| display: none; | |
| width: 36px; | |
| height: 36px; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| transition: all var(--transition-fast); | |
| } | |
| .header-menu-btn:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .sidebar.collapsed ~ .main .header-menu-btn { | |
| display: flex; | |
| } | |
| .header-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .brand-icon { | |
| font-size: 1.4rem; | |
| } | |
| .brand-name { | |
| font-weight: 700; | |
| font-size: 1.05rem; | |
| color: var(--text-primary); | |
| letter-spacing: -0.3px; | |
| } | |
| .brand-tag { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| background: var(--bg-card); | |
| padding: 2px 8px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .header-btn { | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| transition: all var(--transition-fast); | |
| } | |
| .header-btn:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| /* ============================================ | |
| CHAT AREA | |
| ============================================ */ | |
| .chat-area { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 0 16px; | |
| scroll-behavior: smooth; | |
| } | |
| /* --- WELCOME SCREEN --- */ | |
| .welcome { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: calc(100vh - var(--header-height) - 120px); | |
| text-align: center; | |
| padding: 40px 20px; | |
| animation: fadeIn 0.6s ease; | |
| } | |
| .welcome-icon { | |
| font-size: 3.5rem; | |
| margin-bottom: 12px; | |
| filter: drop-shadow(0 0 20px rgba(74, 158, 255, 0.2)); | |
| } | |
| .welcome-title { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| letter-spacing: -0.5px; | |
| margin-bottom: 6px; | |
| } | |
| .welcome-subtitle { | |
| font-size: 0.95rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| } | |
| .welcome-desc { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| max-width: 500px; | |
| line-height: 1.7; | |
| margin-bottom: 36px; | |
| } | |
| .suggestions { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| max-width: 560px; | |
| width: 100%; | |
| } | |
| .suggestion-card { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| padding: 14px 16px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| text-align: left; | |
| color: var(--text-secondary); | |
| font-size: 0.82rem; | |
| line-height: 1.5; | |
| transition: all var(--transition-normal); | |
| } | |
| .suggestion-card:hover { | |
| background: var(--bg-card-hover); | |
| border-color: var(--border-light); | |
| color: var(--text-primary); | |
| transform: translateY(-1px); | |
| } | |
| .suggestion-icon { | |
| font-size: 1.1rem; | |
| flex-shrink: 0; | |
| margin-top: 1px; | |
| } | |
| .suggestion-text { | |
| flex: 1; | |
| } | |
| /* --- MESSAGES --- */ | |
| .messages { | |
| max-width: var(--chat-max-width); | |
| margin: 0 auto; | |
| padding: 24px 0 140px; | |
| width: 100%; | |
| } | |
| .messages:empty { | |
| display: none; | |
| } | |
| /* --- USER MESSAGE --- */ | |
| .msg-user { | |
| display: flex; | |
| justify-content: flex-end; | |
| margin-bottom: 24px; | |
| animation: msgIn 0.25s ease-out; | |
| } | |
| .msg-user-bubble { | |
| max-width: 75%; | |
| background: var(--bg-user-msg); | |
| color: var(--text-user); | |
| padding: 12px 18px; | |
| border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg); | |
| font-size: 0.92rem; | |
| line-height: 1.6; | |
| word-wrap: break-word; | |
| } | |
| /* --- BOT MESSAGE --- */ | |
| .msg-bot { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| margin-bottom: 28px; | |
| animation: msgIn 0.25s ease-out; | |
| } | |
| .msg-bot-avatar { | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| } | |
| .msg-bot-content { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .msg-bot-text { | |
| color: var(--text-primary); | |
| font-size: 0.92rem; | |
| line-height: 1.75; | |
| word-wrap: break-word; | |
| } | |
| .msg-bot-text p { | |
| margin-bottom: 10px; | |
| } | |
| .msg-bot-text p:last-child { | |
| margin-bottom: 0; | |
| } | |
| /* --- TYPING CURSOR --- */ | |
| .cursor { | |
| display: inline-block; | |
| width: 2px; | |
| height: 1em; | |
| background: var(--accent); | |
| margin-left: 2px; | |
| vertical-align: text-bottom; | |
| animation: blink 0.8s step-end infinite; | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| /* ============================================ | |
| THINKING STATE | |
| ============================================ */ | |
| .thinking { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| margin-bottom: 28px; | |
| animation: msgIn 0.25s ease-out; | |
| } | |
| .thinking-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .thinking-dots { | |
| display: flex; | |
| gap: 4px; | |
| padding: 4px 0; | |
| } | |
| .thinking-dot { | |
| width: 7px; | |
| height: 7px; | |
| background: var(--text-muted); | |
| border-radius: var(--radius-round); | |
| animation: pulseDot 1.2s ease-in-out infinite; | |
| } | |
| .thinking-dot:nth-child(2) { animation-delay: 0.15s; } | |
| .thinking-dot:nth-child(3) { animation-delay: 0.3s; } | |
| @keyframes pulseDot { | |
| 0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; } | |
| 40% { transform: scale(1); opacity: 1; } | |
| } | |
| .thinking-step { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| animation: fadeIn 0.4s ease; | |
| } | |
| .thinking-step.done { | |
| color: var(--safe); | |
| } | |
| .thinking-step.active { | |
| color: var(--text-secondary); | |
| } | |
| /* ============================================ | |
| VERIFICATION PANEL | |
| ============================================ */ | |
| .verification-panel { | |
| margin-top: 16px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| background: var(--bg-card); | |
| } | |
| .verification-panel.safe { | |
| border-left: 3px solid var(--safe); | |
| } | |
| .verification-panel.flagged { | |
| border-left: 3px solid var(--flagged); | |
| background: var(--bg-flagged); | |
| } | |
| .verification-summary { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 16px; | |
| cursor: pointer; | |
| transition: background var(--transition-fast); | |
| } | |
| .verification-summary:hover { | |
| background: var(--bg-hover); | |
| } | |
| .verification-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .verification-status { | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .verification-status.safe { color: var(--safe); } | |
| .verification-status.flagged { color: var(--flagged); } | |
| .verification-meta { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .verification-toggle { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| white-space: nowrap; | |
| } | |
| .verification-details { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.4s ease; | |
| } | |
| .verification-details.open { | |
| max-height: 2000px; | |
| } | |
| .verification-details-inner { | |
| padding: 0 16px 16px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .claims-title { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin: 14px 0 10px; | |
| } | |
| /* --- CLAIM ITEM --- */ | |
| .claim-item { | |
| padding: 10px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .claim-item:last-child { | |
| border-bottom: none; | |
| } | |
| .claim-risk-bar-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 6px; | |
| } | |
| .claim-risk-bar { | |
| flex: 1; | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.06); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .claim-risk-bar-fill { | |
| height: 100%; | |
| border-radius: 2px; | |
| transition: width 0.6s ease-out; | |
| min-width: 1px; | |
| } | |
| .claim-risk-bar-fill.low { background: var(--safe); } | |
| .claim-risk-bar-fill.medium { background: var(--warning); } | |
| .claim-risk-bar-fill.high { background: var(--flagged); } | |
| .claim-risk-value { | |
| font-size: 0.72rem; | |
| font-family: var(--font-mono); | |
| color: var(--text-muted); | |
| min-width: 42px; | |
| text-align: right; | |
| } | |
| .claim-text { | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| line-height: 1.55; | |
| } | |
| /* --- EVIDENCE SECTION --- */ | |
| .evidence-title { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin: 18px 0 10px; | |
| } | |
| .evidence-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| padding: 10px 12px; | |
| background: rgba(255, 255, 255, 0.02); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 6px; | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| line-height: 1.5; | |
| } | |
| .evidence-icon { | |
| flex-shrink: 0; | |
| margin-top: 1px; | |
| } | |
| .evidence-text { | |
| flex: 1; | |
| overflow: hidden; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| } | |
| /* ============================================ | |
| INPUT BAR | |
| ============================================ */ | |
| .input-wrapper { | |
| position: sticky; | |
| bottom: 0; | |
| z-index: 30; | |
| flex-shrink: 0; | |
| } | |
| .input-fade { | |
| height: 50px; | |
| background: linear-gradient(to bottom, transparent, var(--bg-primary)); | |
| pointer-events: none; | |
| } | |
| .input-bar { | |
| background: var(--bg-primary); | |
| padding: 0 16px 16px; | |
| } | |
| .input-container { | |
| max-width: var(--input-max-width); | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 8px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-input); | |
| border-radius: var(--radius-pill); | |
| padding: 6px 6px 6px 20px; | |
| transition: border-color var(--transition-fast), box-shadow var(--transition-fast); | |
| } | |
| .input-container:focus-within { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1); | |
| } | |
| .input-field { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| color: var(--text-primary); | |
| font-size: 0.92rem; | |
| line-height: 1.5; | |
| resize: none; | |
| padding: 8px 0; | |
| max-height: 120px; | |
| overflow-y: auto; | |
| } | |
| .input-field::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .send-btn { | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-round); | |
| background: var(--text-muted); | |
| color: var(--bg-primary); | |
| transition: all var(--transition-fast); | |
| flex-shrink: 0; | |
| opacity: 0.4; | |
| } | |
| .send-btn:not(:disabled) { | |
| background: var(--accent); | |
| opacity: 1; | |
| cursor: pointer; | |
| } | |
| .send-btn:not(:disabled):hover { | |
| background: var(--accent-hover); | |
| transform: scale(1.05); | |
| } | |
| .send-btn:disabled { | |
| cursor: not-allowed; | |
| } | |
| .input-disclaimer { | |
| max-width: var(--input-max-width); | |
| margin: 8px auto 0; | |
| text-align: center; | |
| font-size: 0.68rem; | |
| color: var(--text-muted); | |
| } | |
| /* ============================================ | |
| ERROR MESSAGE | |
| ============================================ */ | |
| .msg-error { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| margin-bottom: 28px; | |
| animation: msgIn 0.25s ease-out; | |
| } | |
| .msg-error-content { | |
| padding: 12px 16px; | |
| background: var(--bg-flagged); | |
| border: 1px solid rgba(231, 76, 60, 0.2); | |
| border-radius: var(--radius-md); | |
| color: var(--flagged); | |
| font-size: 0.88rem; | |
| line-height: 1.5; | |
| } | |
| /* ============================================ | |
| REJECTION MESSAGE | |
| ============================================ */ | |
| .msg-rejection { | |
| padding: 12px 16px; | |
| background: rgba(243, 156, 18, 0.06); | |
| border: 1px solid rgba(243, 156, 18, 0.15); | |
| border-radius: var(--radius-md); | |
| color: var(--warning); | |
| font-size: 0.88rem; | |
| line-height: 1.5; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| } | |
| /* ============================================ | |
| ANIMATIONS | |
| ============================================ */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes msgIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ============================================ | |
| RESPONSIVE | |
| ============================================ */ | |
| @media (max-width: 1024px) { | |
| .sidebar { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| .header-menu-btn { | |
| display: flex ; | |
| } | |
| .main { | |
| width: 100%; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .suggestions { | |
| grid-template-columns: 1fr; | |
| } | |
| .msg-user-bubble { | |
| max-width: 88%; | |
| } | |
| .welcome-title { | |
| font-size: 1.6rem; | |
| } | |
| .brand-tag { | |
| display: none; | |
| } | |
| } | |
| /* ============================================ | |
| INLINE RISK HIGHLIGHTING (Grammarly-style) | |
| ============================================ */ | |
| .risk-sentence { | |
| position: relative; | |
| cursor: help; | |
| transition: background var(--transition-fast); | |
| } | |
| .risk-sentence.risk-caution { | |
| text-decoration: underline; | |
| text-decoration-color: #f39c12; | |
| text-decoration-style: wavy; | |
| text-underline-offset: 4px; | |
| text-decoration-thickness: 1px; | |
| border-left: 2px solid #f39c12; | |
| padding-left: 6px; | |
| margin-left: 2px; | |
| } | |
| .risk-sentence.risk-danger { | |
| text-decoration: underline; | |
| text-decoration-color: #e74c3c; | |
| text-decoration-style: wavy; | |
| text-underline-offset: 4px; | |
| text-decoration-thickness: 1.5px; | |
| border-left: 2px solid #e74c3c; | |
| padding-left: 6px; | |
| margin-left: 2px; | |
| } | |
| .risk-sentence.risk-caution:hover { | |
| background: rgba(243, 156, 18, 0.08); | |
| border-radius: 3px; | |
| } | |
| .risk-sentence.risk-danger:hover { | |
| background: rgba(231, 76, 60, 0.08); | |
| border-radius: 3px; | |
| } | |
| /* Tooltip */ | |
| .risk-tooltip { | |
| display: none; | |
| position: absolute; | |
| bottom: calc(100% + 8px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: #1a1a2e; | |
| border: 1px solid rgba(255,255,255,0.12); | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| font-size: 0.75rem; | |
| color: #e0e0e0; | |
| white-space: nowrap; | |
| z-index: 200; | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.5); | |
| pointer-events: none; | |
| } | |
| .risk-tooltip::after { | |
| content: ''; | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border: 5px solid transparent; | |
| border-top-color: #1a1a2e; | |
| } | |
| .risk-tooltip .tooltip-risk { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-weight: 600; | |
| } | |
| .risk-tooltip .tooltip-risk.caution { color: #f39c12; } | |
| .risk-tooltip .tooltip-risk.danger { color: #e74c3c; } | |
| .risk-sentence:hover .risk-tooltip { | |
| display: block; | |
| animation: fadeIn 0.15s ease; | |
| } | |
| /* Highlight animation on load */ | |
| @keyframes highlightCaution { | |
| from { text-decoration-color: transparent; } | |
| to { text-decoration-color: #f39c12; } | |
| } | |
| @keyframes highlightDanger { | |
| from { text-decoration-color: transparent; } | |
| to { text-decoration-color: #e74c3c; } | |
| } | |
| .risk-sentence.risk-caution.animate-in { | |
| animation: highlightCaution 0.6s ease forwards; | |
| } | |
| .risk-sentence.risk-danger.animate-in { | |
| animation: highlightDanger 0.6s ease forwards; | |
| } | |
| /* ============================================ | |
| DELETE CHAT FUNCTIONALITY | |
| ============================================ */ | |
| .history-item-wrapper { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .history-item-wrapper .history-item { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .delete-chat-btn { | |
| opacity: 0; | |
| width: 28px; | |
| height: 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-muted); | |
| transition: all var(--transition-fast); | |
| flex-shrink: 0; | |
| } | |
| .history-item-wrapper:hover .delete-chat-btn { | |
| opacity: 1; | |
| } | |
| .delete-chat-btn:hover { | |
| background: rgba(231, 76, 60, 0.15); | |
| color: var(--flagged); | |
| } | |
| .header-delete-btn { | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| transition: all var(--transition-fast); | |
| } | |
| .header-delete-btn:hover { | |
| background: rgba(231, 76, 60, 0.15); | |
| color: var(--flagged); | |
| } | |
| /* Delete confirmation modal */ | |
| .delete-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| animation: fadeIn 0.2s ease; | |
| } | |
| .delete-modal.show { | |
| display: flex; | |
| } | |
| .delete-modal-content { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-md); | |
| padding: 24px; | |
| max-width: 400px; | |
| width: 90%; | |
| box-shadow: var(--shadow-lg); | |
| animation: msgIn 0.3s ease; | |
| } | |
| .delete-modal-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 12px; | |
| } | |
| .delete-modal-text { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin-bottom: 20px; | |
| } | |
| .delete-modal-actions { | |
| display: flex; | |
| gap: 8px; | |
| justify-content: flex-end; | |
| } | |
| .delete-modal-btn { | |
| padding: 8px 16px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| transition: all var(--transition-fast); | |
| } | |
| .delete-modal-btn.cancel { | |
| background: var(--bg-card); | |
| color: var(--text-secondary); | |
| border: 1px solid var(--border); | |
| } | |
| .delete-modal-btn.cancel:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .delete-modal-btn.confirm { | |
| background: var(--flagged); | |
| color: #ffffff; | |
| } | |
| .delete-modal-btn.confirm:hover { | |
| background: #c0392b; | |
| } | |
| /* ============================================ | |
| PIPELINE PROGRESS — Compact Inline | |
| ============================================ */ | |
| .pipeline-progress { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 8px 14px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-pill); | |
| margin-bottom: 12px; | |
| animation: msgIn 0.3s ease-out; | |
| flex-wrap: wrap; | |
| } | |
| .pipeline-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| white-space: nowrap; | |
| } | |
| .pipeline-header-dot { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| animation: pulseDot 1.2s ease-in-out infinite; | |
| } | |
| .pipeline-header-dot.done { | |
| background: var(--safe); | |
| animation: none; | |
| } | |
| .pipeline-phases { | |
| display: flex; | |
| align-items: center; | |
| gap: 3px; | |
| } | |
| .pipeline-phase { | |
| display: contents; | |
| } | |
| .pipeline-phase-title { | |
| display: none; | |
| } | |
| .pipeline-steps { | |
| display: flex; | |
| align-items: center; | |
| gap: 3px; | |
| } | |
| .pipeline-step { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .pipeline-step-icon { | |
| width: 14px; | |
| height: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| font-size: 0.5rem; | |
| flex-shrink: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .pipeline-step-text { | |
| display: none; | |
| } | |
| .pipeline-step.pending .pipeline-step-icon { | |
| border: 1.5px solid var(--text-muted); | |
| opacity: 0.3; | |
| } | |
| .pipeline-step.active .pipeline-step-icon { | |
| border: 1.5px solid var(--accent); | |
| background: rgba(74, 158, 255, 0.15); | |
| animation: pulseDot 0.8s ease-in-out infinite; | |
| } | |
| .pipeline-step.done .pipeline-step-icon { | |
| border: none; | |
| background: var(--safe); | |
| color: #0a0a0f; | |
| font-weight: 700; | |
| animation: stepDone 0.3s ease; | |
| } | |
| @keyframes stepDone { | |
| 0% { transform: scale(0.5); } | |
| 50% { transform: scale(1.3); } | |
| 100% { transform: scale(1); } | |
| } | |
| /* Tooltip on hover for each step */ | |
| .pipeline-step .step-tooltip { | |
| display: none; | |
| position: absolute; | |
| bottom: calc(100% + 6px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-light); | |
| border-radius: 6px; | |
| padding: 4px 8px; | |
| font-size: 0.65rem; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| z-index: 100; | |
| pointer-events: none; | |
| } | |
| .pipeline-step:hover .step-tooltip { | |
| display: block; | |
| } | |
| /* Phase separator */ | |
| .pipeline-phase-sep { | |
| width: 1px; | |
| height: 12px; | |
| background: var(--border-light); | |
| margin: 0 4px; | |
| } | |
| .pipeline-complete { | |
| display: none; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 0.7rem; | |
| font-weight: 500; | |
| margin-left: 4px; | |
| } | |
| .pipeline-complete.show { | |
| display: flex; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .pipeline-complete.safe { color: var(--safe); } | |
| .pipeline-complete.flagged { color: var(--flagged); } | |
| .pipeline-complete-icon { | |
| font-size: 0.8rem; | |
| } | |
| .pipeline-current-label { | |
| font-size: 0.7rem; | |
| color: var(--text-secondary); | |
| margin-left: 4px; | |
| white-space: nowrap; | |
| animation: fadeIn 0.2s ease; | |
| } | |