*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;color:#333}a{color:#007bff;text-decoration:none}١ a:hover{text-decoration:underline}ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{margin:0 0 1rem}button,textarea{font-family:inherit}.chat-container{display:flex;flex-direction:column;height:100vh;width:100vw;padding:0;margin:0;border:1px solid #e0e0e0;border-radius:8px;background:#fff;box-shadow:0 2px 10px #0000001a;position:relative}.chat-container.drag-over{border:2px dashed #007bff;background:#007bff0d}.chat-container.drag-over:after{content:"Drop image here to upload";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#007bffe6;color:#fff;padding:1rem 2rem;border-radius:8px;font-size:1.1rem;font-weight:700;pointer-events:none;z-index:1000}.chat-header{padding:1rem;border-bottom:1px solid #e0e0e0;background:#f8f9fa;border-radius:8px 8px 0 0}.chat-header h2{margin:0 0 .5rem;color:#2c5530;font-size:1.5rem}.header-info{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}.session-info{font-size:.8rem;color:#666;font-family:Courier New,monospace}.backend-status{font-size:.8rem;padding:.25rem .5rem;border-radius:12px;font-weight:700}.backend-status.connected{color:#155724;background:#d4edda;border:1px solid #c3e6cb}.backend-status.disconnected{color:#721c24;background:#f8d7da;border:1px solid #f5c6cb}.backend-status.checking{color:#856404;background:#fff3cd;border:1px solid #ffeaa7}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.welcome-message{text-align:center;color:#666;background:#f8f9fa;padding:2rem;border-radius:8px;border:2px dashed #ddd}.welcome-message p{margin:.5rem 0}.backend-warning{margin-top:1rem;padding:1rem;background:#fff3cd;border:1px solid #ffeaa7;border-radius:6px;color:#856404}.backend-warning p{margin:.25rem 0}.message{display:flex;flex-direction:column;max-width:80%;padding:.75rem;border-radius:12px;word-wrap:break-word}.message.user{align-self:flex-end;background:#007bff;color:#fff}.message.ai{align-self:flex-start;background:#e9ecef;color:#333;border:1px solid #ddd}.message.error{align-self:flex-start;background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.8rem;opacity:.8}.message-sender{font-weight:700;padding:0 .5rem}.message-time{font-size:.7rem;padding:0 .5rem}.message-content{line-height:1.4;padding:0 .5rem}.message.loading{opacity:.7}.typing-indicator{display:flex;gap:4px;align-items:center}.typing-indicator span{width:8px;height:8px;border-radius:50%;background:#666;animation:typing 1.4s infinite ease-in-out}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes typing{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}.chat-input{padding:1rem;border-top:1px solid #e0e0e0;background:#f8f9fa;border-radius:0 0 8px 8px}.input-container{display:flex;gap:.5rem;align-items:flex-end}.input-container textarea{flex:1;min-height:40px;max-height:120px;padding:.75rem;border:1px solid #ddd;border-radius:20px;resize:none;font-family:inherit;font-size:.9rem;outline:none;transition:border-color .2s}.input-container textarea:focus{border-color:#007bff}.input-container textarea:disabled{background:#f5f5f5;cursor:not-allowed}.send-button{padding:.75rem 1.5rem;background:#007bff;color:#fff;border:none;border-radius:20px;cursor:pointer;font-weight:700;transition:background-color .2s;white-space:nowrap}.send-button:hover:not(:disabled){background:#0056b3}.send-button:disabled{background:#ccc;cursor:not-allowed}@media(max-width:768px){.chat-container{border-radius:0}.message{max-width:90%}.chat-header h2{font-size:1.2rem}}.image-preview-container{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem;background:#f8f9fa;border-top:1px solid #e0e0e0;max-height:120px;overflow-y:auto}.image-preview{position:relative;display:inline-block}.preview-image{width:80px;height:80px;object-fit:cover;border-radius:4px;border:1px solid #ddd;background:#fff}.remove-image-button{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#ff4757;color:#fff;border:none;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0003}.remove-image-button:hover{background:#ff3838}.upload-button{padding:.5rem;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem;margin-right:.5rem;min-width:40px;display:flex;align-items:center;justify-content:center}.upload-button:hover:not(:disabled){background:#0056b3}.upload-button:disabled{background:#ccc;cursor:not-allowed}.message-images{margin-bottom:.5rem}.message-image{max-width:200px;max-height:200px;object-fit:contain;border-radius:4px;border:1px solid #ddd;margin-right:.5rem;margin-bottom:.5rem;cursor:pointer;transition:transform .2s ease}.message-image:hover{transform:scale(1.05)}@media(max-width:768px){.preview-image{width:60px;height:60px}.message-image{max-width:150px;max-height:150px}.upload-button{min-width:35px;padding:.4rem}}