/* General Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Body Styling */ body { font-family: Arial, sans-serif; background-color: #1a1a1a; color: #e6e6e6; line-height: 1.5; display: flex; flex-direction: column; height: 100vh; } /* Header Navigation */ header { background-color: #0f0f0f; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; } header .logo { color: #fff; font-size: 1.5em; font-weight: bold; } header nav a { color: #aaa; text-decoration: none; margin-left: 15px; font-size: 1em; transition: color 0.3s; } header nav a:hover { color: #fff; } /* Main Layout */ main { display: flex; flex: 1; overflow: hidden; } /* Sidebar */ .sidebar { width: 250px; background-color: #121212; padding: 20px; overflow-y: auto; border-right: 1px solid #333; } .sidebar h2 { color: #f05a28; font-size: 1.2em; margin-bottom: 20px; } .sidebar ul { list-style: none; } .sidebar ul li { margin-bottom: 15px; } .sidebar ul li a { color: #ccc; text-decoration: none; font-size: 1em; transition: color 0.3s; } .sidebar ul li a:hover { color: #fff; } /* Chat Area */ .chat-area { flex: 1; display: flex; flex-direction: column; background-color: #1a1a1a; } .chat-header { padding: 10px 20px; background-color: #0f0f0f; border-bottom: 1px solid #333; } .chat-header h2 { font-size: 1.2em; color: #fff; } .chat-messages { flex: 1; padding: 20px; overflow-y: auto; background: #1a1a1a; } .chat-messages .message { margin-bottom: 15px; } .chat-messages .message .author { font-weight: bold; color: #f05a28; } .chat-messages .message .content { margin-left: 10px; color: #e6e6e6; } /* Input Area */ .chat-input { padding: 15px; background-color: #121212; display: flex; align-items: center; border-top: 1px solid #333; } .chat-input textarea { flex: 1; background-color: #1a1a1a; color: #fff; border: none; padding: 10px; border-radius: 5px; resize: none; } .chat-input button { background-color: #f05a28; color: white; border: none; padding: 10px 15px; margin-left: 10px; border-radius: 5px; cursor: pointer; font-size: 1em; transition: background-color 0.3s; } .chat-input button:hover { background-color: #e04924; } /* Responsive Adjustments */ @media (max-width: 768px) { .sidebar { display: none; } .chat-area { flex: 1; } }