/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background-color: #f0f2f5; 
    color: #333;
    /* 使用 fixed 布局填满屏幕，防止移动端 100vh 溢出问题 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Header */
header { 
    background-color: #ffffff; 
    padding: 10px 20px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 10; 
    height: 60px; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
header h1 { font-size: 1.2rem; font-weight: 600; color: #1a73e8; }
.auth-buttons button { margin-left: 10px; padding: 6px 12px; border: 1px solid #1a73e8; background: transparent; color: #1a73e8; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; }
.auth-buttons button:hover { background: #e8f0fe; }
.auth-buttons button.primary { background: #1a73e8; color: white; }
.auth-buttons button.primary:hover { background: #1557b0; }

/* Chat Container */
#chat-container { 
    position: absolute;
    top: 60px; /* Header height */
    bottom: 70px; /* Footer height */
    left: 0;
    width: 100%;
    overflow-y: auto; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    scroll-behavior: smooth; 
    -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
}
.message { max-width: 80%; padding: 10px 15px; border-radius: 12px; position: relative; font-size: 0.95rem; line-height: 1.4; word-wrap: break-word; align-self: flex-start; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.message .meta { font-size: 0.75rem; color: #888; margin-bottom: 4px; display: block; }
.message.self { align-self: flex-end; background: #dcf8c6; }
.message.self .meta { text-align: right; }

/* Footer / Input Area */
footer { 
    background: #ffffff; 
    padding: 10px 20px; 
    border-top: 1px solid #ddd; 
    display: flex; 
    gap: 10px; 
    height: 70px; 
    align-items: center; 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}
#message-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; outline: none; font-size: 1rem; }
#message-input:focus { border-color: #1a73e8; }
#send-btn { padding: 0 20px; height: 40px; background: #1a73e8; color: white; border: none; border-radius: 20px; cursor: pointer; font-weight: 600; transition: background 0.2s; display: flex; align-items: center; justify-content: center; }
#send-btn:hover { background: #1557b0; }
#send-btn:disabled { background: #ccc; cursor: not-allowed; }
.login-tip { flex: 1; text-align: center; color: #666; font-size: 0.9rem; }
.login-tip a { color: #1a73e8; text-decoration: none; cursor: pointer; }

/* Modal */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-content { background: white; padding: 25px; border-radius: 10px; width: 90%; max-width: 350px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h3 { margin: 0; }
.close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #888; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: #666; font-size: 0.9rem; }
.form-group input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
.switch-mode { margin-top: 10px; text-align: center; font-size: 0.85rem; color: #666; }
.switch-mode a { color: #1a73e8; cursor: pointer; text-decoration: none; }

/* Mobile Optimization */
@media (max-width: 600px) {
    header { padding: 10px 15px; }
    #chat-container { padding: 15px; }
    footer { padding: 10px 15px; }
    .message { max-width: 90%; }
}