| .app { |
| display: flex; |
| height: 100vh; |
| width: 100vw; |
| overflow: hidden; |
| } |
|
|
| |
|
|
| .sidebar { |
| width: 280px; |
| flex-shrink: 0; |
| background: var(--bg-elevated); |
| border-right: 1px solid var(--border); |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .sidebar-header { |
| padding: 20px 16px 12px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| margin-bottom: 16px; |
| } |
|
|
| .brand-mark { |
| width: 32px; |
| height: 32px; |
| border-radius: 9px; |
| background: linear-gradient(135deg, var(--accent), var(--accent-strong)); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 700; |
| font-size: 16px; |
| color: white; |
| } |
|
|
| .brand-name { |
| font-weight: 600; |
| font-size: 17px; |
| letter-spacing: 0.02em; |
| } |
|
|
| .new-chat-btn { |
| width: 100%; |
| padding: 10px 14px; |
| border-radius: var(--radius); |
| border: 1px solid var(--border); |
| background: var(--bg-elevated-2); |
| color: var(--text); |
| font-size: 14px; |
| font-weight: 500; |
| transition: background 0.15s, border-color 0.15s; |
| } |
|
|
| .new-chat-btn:hover { |
| background: var(--accent-soft); |
| border-color: var(--accent); |
| } |
|
|
| .conversation-list { |
| flex: 1; |
| overflow-y: auto; |
| padding: 8px; |
| } |
|
|
| .empty-history { |
| padding: 20px 12px; |
| color: var(--text-dim); |
| font-size: 13px; |
| text-align: center; |
| } |
|
|
| .conversation-item { |
| padding: 10px 12px; |
| border-radius: 10px; |
| cursor: pointer; |
| margin-bottom: 2px; |
| transition: background 0.15s; |
| } |
|
|
| .conversation-item:hover { |
| background: var(--bg-elevated-2); |
| } |
|
|
| .conversation-item.active { |
| background: var(--accent-soft); |
| } |
|
|
| .conversation-title { |
| font-size: 13.5px; |
| font-weight: 500; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| margin-bottom: 4px; |
| } |
|
|
| .conversation-meta { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-size: 11.5px; |
| color: var(--text-dim); |
| } |
|
|
| .delete-btn { |
| background: none; |
| border: none; |
| color: var(--text-dim); |
| font-size: 16px; |
| line-height: 1; |
| padding: 2px 6px; |
| border-radius: 6px; |
| opacity: 0; |
| transition: opacity 0.15s, color 0.15s, background 0.15s; |
| } |
|
|
| .conversation-item:hover .delete-btn { |
| opacity: 1; |
| } |
|
|
| .delete-btn:hover { |
| color: var(--danger); |
| background: rgba(239, 90, 111, 0.12); |
| } |
|
|
| .sidebar-footer { |
| padding: 12px 16px; |
| border-top: 1px solid var(--border); |
| font-size: 11.5px; |
| color: var(--text-dim); |
| } |
|
|
| |
|
|
| .chat-panel { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| min-width: 0; |
| } |
|
|
| .chat-header { |
| padding: 18px 28px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .chat-header h1 { |
| font-size: 16px; |
| font-weight: 600; |
| margin: 0 0 4px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .chat-subtitle { |
| margin: 0; |
| font-size: 12.5px; |
| color: var(--text-dim); |
| } |
|
|
| .messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 24px 28px; |
| display: flex; |
| flex-direction: column; |
| gap: 18px; |
| } |
|
|
| .welcome { |
| margin: auto; |
| text-align: center; |
| max-width: 420px; |
| color: var(--text-dim); |
| } |
|
|
| .welcome-icon { |
| width: 56px; |
| height: 56px; |
| margin: 0 auto 16px; |
| border-radius: 16px; |
| background: linear-gradient(135deg, var(--accent), var(--accent-strong)); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 700; |
| font-size: 26px; |
| color: white; |
| } |
|
|
| .welcome h2 { |
| color: var(--text); |
| font-size: 19px; |
| margin: 0 0 8px; |
| } |
|
|
| .welcome p { |
| font-size: 13.5px; |
| line-height: 1.6; |
| margin: 0; |
| } |
|
|
| .message-row { |
| display: flex; |
| flex-direction: column; |
| max-width: 72%; |
| } |
|
|
| .message-row--user { |
| align-self: flex-end; |
| align-items: flex-end; |
| } |
|
|
| .bubble { |
| padding: 12px 16px; |
| border-radius: var(--radius); |
| font-size: 14px; |
| line-height: 1.55; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
|
|
| .bubble--user { |
| background: linear-gradient(135deg, var(--accent), var(--accent-strong)); |
| color: white; |
| border-bottom-right-radius: 4px; |
| } |
|
|
| .bubble--assistant { |
| background: var(--bg-elevated); |
| border: 1px solid var(--border); |
| border-bottom-left-radius: 4px; |
| } |
|
|
| .bubble--typing { |
| display: flex; |
| gap: 4px; |
| align-items: center; |
| padding: 14px 18px; |
| } |
|
|
| .dot { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--text-dim); |
| animation: bounce 1.2s infinite ease-in-out; |
| } |
|
|
| .dot:nth-child(2) { |
| animation-delay: 0.15s; |
| } |
|
|
| .dot:nth-child(3) { |
| animation-delay: 0.3s; |
| } |
|
|
| @keyframes bounce { |
| 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } |
| 40% { transform: translateY(-4px); opacity: 1; } |
| } |
|
|
| .retrieval-chip { |
| margin-top: 6px; |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 10px; |
| border-radius: 10px; |
| background: rgba(63, 201, 163, 0.08); |
| border: 1px solid rgba(63, 201, 163, 0.25); |
| font-size: 11.5px; |
| max-width: 100%; |
| } |
|
|
| .retrieval-chip--none { |
| background: rgba(139, 144, 160, 0.08); |
| border-color: var(--border); |
| } |
|
|
| .retrieval-chip__icon { |
| color: var(--success); |
| } |
|
|
| .retrieval-chip--none .retrieval-chip__icon { |
| color: var(--text-dim); |
| } |
|
|
| .retrieval-chip__label { |
| color: var(--success); |
| font-weight: 600; |
| text-transform: capitalize; |
| } |
|
|
| .retrieval-chip--none .retrieval-chip__label { |
| color: var(--text-dim); |
| } |
|
|
| .retrieval-chip__snippet { |
| color: var(--text-dim); |
| font-style: italic; |
| flex-basis: 100%; |
| } |
|
|
| |
|
|
| .composer { |
| border-top: 1px solid var(--border); |
| padding: 14px 28px 20px; |
| } |
|
|
| .domain-buttons { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-bottom: 12px; |
| } |
|
|
| .domain-pill { |
| padding: 7px 14px; |
| border-radius: 999px; |
| border: 1px solid var(--border); |
| background: var(--bg-elevated); |
| color: var(--text); |
| font-size: 12.5px; |
| font-weight: 500; |
| transition: border-color 0.15s, background 0.15s, transform 0.1s; |
| } |
|
|
| .domain-pill:hover { |
| border-color: var(--accent); |
| background: var(--accent-soft); |
| transform: translateY(-1px); |
| } |
|
|
| .domain-pill--los { border-left: 3px solid #6d8bff; } |
| .domain-pill--guidewire { border-left: 3px solid #3fc9a3; } |
| .domain-pill--duckcreek { border-left: 3px solid #f2b84b; } |
| .domain-pill--general { border-left: 3px solid #ef5a6f; } |
|
|
| .composer-form { |
| display: flex; |
| gap: 10px; |
| align-items: flex-end; |
| background: var(--bg-elevated); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 10px 10px 10px 16px; |
| } |
|
|
| .composer-form textarea { |
| flex: 1; |
| background: none; |
| border: none; |
| outline: none; |
| color: var(--text); |
| font-size: 14px; |
| resize: none; |
| max-height: 160px; |
| padding: 6px 0; |
| } |
|
|
| .composer-form textarea::placeholder { |
| color: var(--text-dim); |
| } |
|
|
| .composer-form button { |
| padding: 9px 18px; |
| border-radius: 10px; |
| border: none; |
| background: linear-gradient(135deg, var(--accent), var(--accent-strong)); |
| color: white; |
| font-size: 13.5px; |
| font-weight: 600; |
| transition: opacity 0.15s; |
| } |
|
|
| .composer-form button:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
|
|
| .toast-error { |
| position: fixed; |
| bottom: 24px; |
| right: 24px; |
| background: var(--danger); |
| color: white; |
| padding: 12px 18px; |
| border-radius: 10px; |
| font-size: 13px; |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); |
| } |
|
|
