/* ===== 响应式适配 ===== */
@media (max-width: 480px) {
    .login-card {
        padding: 24px 16px;
    }

    .login-header .logo {
        font-size: 32px;
    }

    .login-header h1 {
        font-size: 18px;
    }

    .top-bar {
        padding: 8px 12px;
    }

    .brand {
        font-size: 14px;
    }

    .brand .logo {
        font-size: 18px;
    }

    .user-actions span {
        font-size: 12px;
    }

    .user-actions button {
        font-size: 11px;
        padding: 3px 10px;
    }

    .chat-area {
        padding: 0 8px;
    }

    .input-area {
        gap: 8px;
    }

    .input-area textarea {
        font-size: 13px;
        padding: 6px 10px;
    }

    .input-area button {
        padding: 0 14px;
        font-size: 13px;
    }

    .message {
        padding: 8px 12px;
        max-width: 92%;
    }

    .message .msg-content {
        font-size: 13px;
    }

    .history-panel {
        right: 5px;
        left: 5px;
        width: auto;
        top: 55px;
    }

    .register-modal .modal-card {
        padding: 24px 16px;
    }

    .register-modal .modal-header h2 {
        font-size: 18px;
    }

    .agent-selector {
        min-width: 100px;
    }

    .agent-selector select {
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .login-card {
        padding: 20px 12px;
    }

    .login-header .logo {
        font-size: 28px;
    }

    .login-header h1 {
        font-size: 16px;
    }

    .top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .user-actions {
        justify-content: flex-end;
    }

    .chat-header {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .agent-selector {
        min-width: unset;
    }

    .chat-header-actions {
        justify-content: flex-end;
    }

    .message {
        max-width: 96%;
    }
}