body { background-color: #121212; color: #e0e0e0; height: 100vh; overflow: hidden; }
.sidebar { background-color: #1e1e1e; border-right: 1px solid #333; height: 100%; }
.chat-area { height: 100%; display: flex; flex-direction: column; background-color: #0f0f0f; }
.messages-box { flex: 1; overflow-y: auto; padding: 20px; }
.input-area { background-color: #1e1e1e; padding: 20px; border-top: 1px solid #333; }

.message { margin-bottom: 15px; max-width: 80%; }
.message.user { margin-left: auto; background-color: #0d6efd; color: white; padding: 10px 15px; border-radius: 15px 15px 0 15px; }
.message.ai { margin-right: auto; background-color: #2c2c2c; color: #ddd; padding: 10px 15px; border-radius: 15px 15px 15px 0; border: 1px solid #444; }
.message.system { margin: 10px auto; background-color: #332d00; color: #ffc107; font-size: 0.85rem; padding: 5px 10px; border-radius: 5px; text-align: center; max-width: 60%; }

.tool-usage { font-family: monospace; font-size: 0.8em; color: #00ff9d; display: block; margin-bottom: 5px; }

/* 
   Kullanıcının isteğine istinaden:
   Aşağıdaki CSS kuralları, Markdown parser tarafından oluşturulan HTML elemanlarının
   (kod blokları, tablolar, listeler vb.) sohbet penceresinde düzgün görünmesini sağlar.
*/

/* Kod blokları için stil (Koyu arka plan, yeşil yazı) */
pre { background: #000; padding: 10px; border-radius: 5px; border: 1px solid #333; color: #0f0; overflow-x: auto; }
code { font-family: 'Courier New', Courier, monospace; color: #e83e8c; }
pre code { color: inherit; /* pre içindeki code rengini miras al */ }

/* Paragrafların altındaki ekstra boşluğu düzenle */
.message p:last-child { margin-bottom: 0; }

/* Tablolar için basit stil */
.message table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 0.9em; }
.message th, .message td { border: 1px solid #555; padding: 5px; text-align: left; }
.message th { background-color: #333; }

/* Listeler için girinti ayarı */
.message ul, .message ol { padding-left: 20px; margin-bottom: 10px; }