| |
| body { |
| margin: 0; |
| font-family: Arial, sans-serif; |
| background-color: #121212; |
| color: #e0e0e0; |
| } |
|
|
| header { |
| background-color: #2a2a2a; |
| padding: 10px 20px; |
| text-align: center; |
| border-bottom: 1px solid #333; |
| color: #fff; |
| } |
|
|
| main { |
| padding: 10px; |
| } |
|
|
| |
| #loading { |
| display: none; |
| text-align: center; |
| margin-top: 50px; |
| } |
|
|
| .spinner { |
| border: 4px solid #444; |
| border-top: 4px solid #1a73e8; |
| border-radius: 50%; |
| width: 30px; |
| height: 30px; |
| animation: spin 1s linear infinite; |
| } |
|
|
| @keyframes spin { |
| 0% { |
| transform: rotate(0deg); |
| } |
| 100% { |
| transform: rotate(360deg); |
| } |
| } |
|
|
| |
| .chat { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| background-color: #1e1e1e; |
| padding: 15px; |
| border-radius: 8px; |
| margin-bottom: 10px; |
| cursor: pointer; |
| transition: background-color 0.2s ease; |
| } |
|
|
| .chat:hover { |
| background-color: #2c2c2c; |
| } |
|
|
| .chat-info h2 { |
| margin: 0; |
| font-size: 1rem; |
| font-weight: bold; |
| color: #fff; |
| } |
|
|
| .chat-info p { |
| margin: 5px 0 0; |
| font-size: 0.9rem; |
| color: #aaa; |
| } |
