| .chat { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100svh; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 24px; | |
| box-sizing: border-box; | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 24px; | |
| h1 { | |
| font-size: 32px; | |
| margin: 0 0 8px; | |
| } | |
| p { | |
| color: var(--text); | |
| margin: 0; | |
| } | |
| } | |
| .messages { | |
| flex: 1 1 auto; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| padding-bottom: 16px; | |
| } | |
| .message { | |
| display: flex; | |
| &.user { | |
| justify-content: flex-end; | |
| } | |
| &.agent { | |
| justify-content: flex-start; | |
| } | |
| } | |
| .bubble { | |
| max-width: 70%; | |
| padding: 12px 16px; | |
| border-radius: 16px; | |
| background: #f5f5f5; | |
| color: #111; | |
| text-align: left; | |
| word-break: break-word; | |
| .role { | |
| display: block; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 4px; | |
| color: #777; | |
| } | |
| .content { | |
| margin: 0; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| } | |
| } | |
| .user .bubble { | |
| background: #222; | |
| color: #fff; | |
| .role { | |
| color: #aaa; | |
| } | |
| } | |
| .inputArea { | |
| display: flex; | |
| gap: 12px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--border); | |
| input { | |
| flex: 1 1 auto; | |
| padding: 12px 16px; | |
| font-size: 16px; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: var(--bg); | |
| color: var(--text-h); | |
| outline: none; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| &:focus { | |
| border-color: #999; | |
| box-shadow: 0 0 0 3px #e5e5e5; | |
| } | |
| &:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| } | |
| button { | |
| flex: 0 0 auto; | |
| padding: 12px 24px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| border: none; | |
| border-radius: 12px; | |
| background: #111; | |
| color: #fff; | |
| cursor: pointer; | |
| transition: opacity 0.2s, transform 0.1s; | |
| &:hover:not(:disabled) { | |
| opacity: 0.85; | |
| } | |
| &:active:not(:disabled) { | |
| transform: scale(0.98); | |
| } | |
| &:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| } | |
| } | |
| .loading { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--text); | |
| font-size: 14px; | |
| } | |
| .spinner { | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid #ddd; | |
| border-top-color: #111; | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .error { | |
| padding: 12px 16px; | |
| border-radius: 12px; | |
| background: #f5f5f5; | |
| color: #111; | |
| font-size: 14px; | |
| text-align: left; | |
| } | |
| .cursor { | |
| display: inline-block; | |
| width: 2px; | |
| height: 1em; | |
| background: currentColor; | |
| margin-left: 2px; | |
| vertical-align: text-bottom; | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| 50% { | |
| opacity: 0; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .chat { | |
| padding: 16px; | |
| } | |
| .bubble { | |
| max-width: 85%; | |
| } | |
| } | |