body { font-family: Arial; background: #f4f4f4; margin: 40px; } h1 { text-align: center; } #authSection { background: white; padding: 20px; width: 400px; margin: auto; border-radius: 8px; } #mainApp { margin-top: 30px; } input { width: 100%; padding: 10px; margin-top: 10px; font-size: 18px; /* 🔥 increase input text size */ } button { padding: 10px; margin-top: 10px; cursor: pointer; } #chatWindow { height: 400px; background: white; overflow-y: auto; padding: 10px; border-radius: 8px; } .userMessage { text-align:left; color:blue; margin:5px; font-family:Calibri; font-size:28px; } .botMessage { text-align: left; color:black; margin:5px; font-family:Arial; font-size:20px; } #chatControls { margin-top: 10px; display: flex; gap: 10px; } #chatControls { margin-top: 10px; display: flex; gap: 10px; } /* ===== Reference checkbox alignment fix ===== */ .ref-section { display: flex; align-items: center; gap: 20px; margin-top: 25px; /* 🔥 move downward */ flex-wrap: nowrap; /* 🔥 force single row */ } .ref-section label { display: flex; align-items: center; gap: 8px; white-space: nowrap; /* ===== Prevent label text from wrapping ===== */ } /* ===== Fine-tune checkbox vertical position ===== */ .ref-section input[type="checkbox"] { margin: 0; transform: translateY(-1px); /* 🔥 move checkbox UP */ } .model-row { display: flex; gap: 10px; align-items: center; /* 🔥 fix alignment */ margin-top: -15px; } .model-row select { width: 250px; /* 🔥 fixed reasonable width */ height: 36px; /* 🔥 controls actual height */ font-size: 16px; } .model-row button { height: 36px; padding: 0 15px; white-space: nowrap; display: flex; /* 🔥 important */ align-items: center; /* 🔥 vertical centering */ } /* ===== Fine-tune dropdown vertical position ===== */ #modelSelect { transform: translateY(2px); /* 🔥 move DOWN */ } /* ===== Slightly bigger checkbox ===== */ .ref-section input[type="checkbox"] { transform: scale(1.5); /* 🔥 increase size */ margin: 0; }