FastAPI_Client/style.css

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;
}