diff --git a/static/css/eveai-chat-style.css b/static/css/eveai-chat-style.css index 956d68d..d9f83fe 100644 --- a/static/css/eveai-chat-style.css +++ b/static/css/eveai-chat-style.css @@ -7,12 +7,16 @@ --algorithm-color-alg1: #f00; /* Algorithm 1 color */ --algorithm-color-alg2: #0f0; /* Algorithm 2 color */ --algorithm-color-alg3: #00f; /* Algorithm 3 color */ + --status-line-color: #6c757d; /* Color for the status line text */ + --status-line-bg: #e9ecef; /* Background color for the status line */ + --status-line-height: 30px; /* Fixed height for the status line */ } .chat-container { display: flex; flex-direction: column; - height: 100vh; + height: 99vh; + /*max-height: 100vh;*/ max-width: 600px; margin: auto; border: 1px solid #ccc; @@ -75,3 +79,38 @@ cursor: pointer; color: #007bff; } + +/* New CSS for the status-line */ +.status-line { + height: var(--status-line-height); /* Fixed height for the status line */ + padding: 5px 10px; + background-color: var(--status-line-bg); /* Background color */ + color: var(--status-line-color); /* Text color */ + font-size: 0.9rem; /* Slightly smaller font size */ + text-align: center; /* Centered text */ + border-top: 1px solid #ccc; /* Subtle top border */ + display: flex; + align-items: center; + justify-content: center; +} + +/* Media queries for responsiveness */ +@media (max-width: 768px) { + .chat-container { + max-width: 90%; /* Reduce max width on smaller screens */ + } +} + +@media (max-width: 480px) { + .chat-container { + max-width: 95%; /* Further reduce max width on very small screens */ + } + + .question-area input { + font-size: 0.9rem; /* Adjust input font size for smaller screens */ + } + + .status-line { + font-size: 0.8rem; /* Adjust status line font size for smaller screens */ + } +}