* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }
body { background-color: #f0f4f9; display: flex; justify-content: center; align-items: center; height: 100vh; }
.chat-container { width: 100%; max-width: 850px; height: 90vh; background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); display: flex; flex-direction: column; overflow: hidden; }
.chat-header { padding: 16px 24px; background: #fff; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
.header-brand { display: flex; align-items: center; gap: 12px; }
.school-logo { height: 42px; width: auto; object-fit: contain; }
.header-brand h1 { font-size: 1.1rem; color: #1f2937; font-weight: 700; }
.status { font-size: 0.75rem; color: #10b981; }
.unanswered-btn { background-color: #0284c7; color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.chat-window { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 12px; max-width: 80%; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.ai { align-self: flex-start; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #475569; }
.msg.ai .avatar { background: #0284c7; color: #fff; }
.bubble { padding: 12px 16px; border-radius: 16px; font-size: 0.95rem; line-height: 1.5; }
.msg.user .bubble { background: #f1f5f9; color: #0f172a; border-bottom-right-radius: 4px; }
.msg.ai .bubble { background: #fff; color: #1e293b; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
.input-container { padding: 16px 24px; background: #fff; border-top: 1px solid #e5e7eb; }
#chatForm { display: flex; gap: 8px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 24px; padding: 4px 6px 4px 16px; }
#userInput { flex: 1; border: none; background: transparent; outline: none; font-size: 0.95rem; }
#sendBtn { background: #0284c7; color: white; border: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; }