| /* Cute styles for chat page */ | |
| .chat-container { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-radius: 20px; | |
| padding: 20px; | |
| max-width: 800px; | |
| margin: 20px auto; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| .chat-history { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| padding: 10px; | |
| } | |
| .message { | |
| margin: 10px 0; | |
| padding: 15px; | |
| border-radius: 20px; | |
| max-width: 70%; | |
| animation: slideIn 0.5s ease; | |
| } | |
| .message.krishna { | |
| background: #1E90FF; | |
| color: #FFF; | |
| margin-left: auto; | |
| border-top-right-radius: 5px; | |
| } | |
| .message.manavi { | |
| background: #FF69B4; | |
| color: #FFF; | |
| margin-right: auto; | |
| border-top-left-radius: 5px; | |
| } | |
| .chat-input { | |
| display: flex; | |
| margin-top: 20px; | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| padding: 10px; | |
| border: 2px solid #32CD32; | |
| border-radius: 25px 0 0 25px; | |
| font-family: 'Comic Neue', cursive; | |
| outline: none; | |
| transition: border-color 0.3s ease; | |
| } | |
| .chat-input input:focus { | |
| border-color: #FF8C00; | |
| box-shadow: 0 0 5px rgba(255, 140, 0, 0.5); | |
| } | |
| .chat-input button { | |
| padding: 10px 20px; | |
| background: #32CD32; | |
| color: #FFF; | |
| border: none; | |
| border-radius: 0 25px 25px 0; | |
| cursor: pointer; | |
| transition: background 0.3s ease; | |
| } | |
| .chat-input button:hover { | |
| background: #FF69B4; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateX(20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } |