1  .llm-chat {
  2    display: flex;
  3    flex-direction: column;
  4    height: 100%;
  5    background: #2a2a2a;
  6    border-radius: 8px;
  7    overflow: hidden;
  8  }
  9  
 10  .chat-header {
 11    padding: 1rem;
 12    background: #1a1a1a;
 13    border-bottom: 1px solid #444;
 14  }
 15  
 16  .provider-controls {
 17    display: flex;
 18    align-items: center;
 19    gap: 1rem;
 20    margin-bottom: 0.5rem;
 21  }
 22  
 23  .provider-controls label {
 24    color: #888;
 25    font-size: 0.9rem;
 26  }
 27  
 28  .provider-select {
 29    padding: 0.5rem 1rem;
 30    background: #3a3a3a;
 31    color: #e0e0e0;
 32    border: 1px solid #555;
 33    border-radius: 4px;
 34    cursor: pointer;
 35    font-size: 0.9rem;
 36  }
 37  
 38  .provider-select:hover {
 39    border-color: #00ffff;
 40  }
 41  
 42  .btn-secondary {
 43    padding: 0.5rem 1rem;
 44    background: #3a3a3a;
 45    color: #e0e0e0;
 46    border: 1px solid #555;
 47    border-radius: 4px;
 48    cursor: pointer;
 49    font-size: 0.9rem;
 50    transition: all 0.2s;
 51  }
 52  
 53  .btn-secondary:hover {
 54    background: #4a4a4a;
 55    border-color: #00ffff;
 56  }
 57  
 58  .status-bar {
 59    display: flex;
 60    align-items: center;
 61    gap: 0.5rem;
 62    font-size: 0.85rem;
 63  }
 64  
 65  .status-indicator {
 66    font-size: 0.7rem;
 67  }
 68  
 69  .status-indicator.online {
 70    color: #4caf50;
 71  }
 72  
 73  .status-indicator.offline {
 74    color: #f44336;
 75  }
 76  
 77  .status-text {
 78    color: #888;
 79  }
 80  
 81  .status-error {
 82    color: #f44336;
 83    font-style: italic;
 84  }
 85  
 86  .messages-container {
 87    flex: 1;
 88    overflow-y: auto;
 89    padding: 1rem;
 90    display: flex;
 91    flex-direction: column;
 92    gap: 1rem;
 93  }
 94  
 95  .empty-state {
 96    flex: 1;
 97    display: flex;
 98    align-items: center;
 99    justify-content: center;
100    color: #666;
101    font-style: italic;
102  }
103  
104  .message {
105    padding: 1rem;
106    border-radius: 8px;
107    max-width: 80%;
108  }
109  
110  .message-user {
111    align-self: flex-end;
112    background: rgba(0, 255, 255, 0.1);
113    border: 1px solid rgba(0, 255, 255, 0.3);
114  }
115  
116  .message-assistant {
117    align-self: flex-start;
118    background: rgba(255, 107, 53, 0.1);
119    border: 1px solid rgba(255, 107, 53, 0.3);
120  }
121  
122  .message-system {
123    align-self: center;
124    background: rgba(128, 128, 128, 0.1);
125    border: 1px solid rgba(128, 128, 128, 0.3);
126    max-width: 90%;
127    font-style: italic;
128  }
129  
130  .message-error {
131    align-self: center;
132    background: rgba(244, 67, 54, 0.1);
133    border: 1px solid rgba(244, 67, 54, 0.3);
134    max-width: 90%;
135  }
136  
137  .message.streaming {
138    opacity: 0.9;
139  }
140  
141  .message-role {
142    font-size: 0.75rem;
143    font-weight: bold;
144    text-transform: uppercase;
145    margin-bottom: 0.5rem;
146    opacity: 0.7;
147  }
148  
149  .message-content {
150    line-height: 1.6;
151    white-space: pre-wrap;
152    word-wrap: break-word;
153  }
154  
155  .cursor {
156    animation: blink 1s infinite;
157    margin-left: 2px;
158  }
159  
160  @keyframes blink {
161    0%, 50% { opacity: 1; }
162    51%, 100% { opacity: 0; }
163  }
164  
165  .input-container {
166    display: flex;
167    gap: 0.5rem;
168    padding: 1rem;
169    background: #1a1a1a;
170    border-top: 1px solid #444;
171  }
172  
173  .message-input {
174    flex: 1;
175    padding: 0.75rem 1rem;
176    background: #2a2a2a;
177    border: 1px solid #555;
178    border-radius: 4px;
179    color: #e0e0e0;
180    font-size: 1rem;
181    font-family: inherit;
182  }
183  
184  .message-input:focus {
185    outline: none;
186    border-color: #00ffff;
187  }
188  
189  .message-input:disabled {
190    opacity: 0.5;
191    cursor: not-allowed;
192  }
193  
194  .btn-send {
195    padding: 0.75rem 2rem;
196    background: #00ffff;
197    color: #1a1a1a;
198    border: none;
199    border-radius: 4px;
200    cursor: pointer;
201    font-size: 1rem;
202    font-weight: bold;
203    transition: all 0.2s;
204  }
205  
206  .btn-send:hover:not(:disabled) {
207    background: #00e6e6;
208    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
209  }
210  
211  .btn-send:disabled {
212    background: #555;
213    color: #888;
214    cursor: not-allowed;
215  }
216  
217  .stats {
218    padding: 0.5rem 1rem;
219    background: #1a1a1a;
220    border-top: 1px solid #444;
221    display: flex;
222    justify-content: space-between;
223    font-size: 0.75rem;
224    color: #666;
225  }
226  
227  .messages-container::-webkit-scrollbar {
228    width: 8px;
229  }
230  
231  .messages-container::-webkit-scrollbar-track {
232    background: #1a1a1a;
233  }
234  
235  .messages-container::-webkit-scrollbar-thumb {
236    background: #555;
237    border-radius: 4px;
238  }
239  
240  .messages-container::-webkit-scrollbar-thumb:hover {
241    background: #666;
242  }