.tutorai-container { max-width:800px;margin:0 auto;background:#fff;border-radius:12px;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);overflow:hidden; }
.tutorai-header { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:#fff;padding:20px;text-align:center; }
.tutorai-header h2 { margin:0;font-size:24px;font-weight:600; }
.tutorai-status { font-size:14px;opacity:.9;margin-top:5px; }
.status-indicator { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px; }
.status-ready { background:#28a745; } .status-streaming { background:#ffc107;animation:pulse 1s infinite; }
.status-error { background:#dc3545; }
@keyframes pulse {0%{opacity:1;}50%{opacity:.5;}100%{opacity:1;}}

.chat-container { height:500px;display:flex;flex-direction:column; }
.chat-messages { flex:1;padding:20px;overflow-y:auto;background:#f8f9fa; }
.message { margin-bottom:15px;padding:12px 16px;border-radius:18px;max-width:80%;word-wrap:break-word; }
.message.user { background:#007bff;color:#fff;margin-left:auto;text-align:right; }
.message.assistant { background:#fff;border:1px solid #e9ecef;margin-right:auto; }
.message.assistant.streaming { border-left:4px solid #28a745; }
.message.error { background:#f8d7da;border:1px solid #f5c6cb;color:#721c24; }
.streaming-cursor { animation:blink 1s infinite;font-weight:bold;color:#28a745; }
@keyframes blink {0%,50%{opacity:1;}51%,100%{opacity:0;}}

.chat-input-container { padding:20px;background:#fff;border-top:1px solid #e9ecef; }
.input-group { display:flex;gap:10px; }
.chat-input { flex:1;padding:12px 16px;border:2px solid #e9ecef;border-radius:25px;font-size:16px; }
.send-button { padding:12px 24px;background:#007bff;color:#fff;border:none;border-radius:25px;
    font-size:16px;cursor:pointer; }
.send-button:disabled { background:#6c757d;cursor:not-allowed; }

.feedback-container { display:flex;align-items:center;gap:8px;margin-top:8px;
    padding-top:8px;border-top:1px solid #e9ecef; }
.feedback-button { background:none;border:1px solid #dee2e6;border-radius:20px;
    padding:6px 12px;cursor:pointer;font-size:14px; }
.feedback-button.active.positive { background:#d4edda;border-color:#28a745;color:#155724; }
.feedback-button.active.negative { background:#f8d7da;border-color:#dc3545;color:#721c24; }
.feedback-text { font-size:12px;color:#6c757d;margin-left:8px; }
.feedback-modal { display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;
    background:rgba(0,0,0,0.5);align-items:center;justify-content:center; }
.feedback-modal.show { display:flex; }
.feedback-modal-content { background:#fff;padding:20px;border-radius:12px;max-width:500px;width:90%; }