/* 响应式设计 */

/* 平板设备 */
@media (max-width: 768px) {
    .app {
        height: 100vh;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .app-header {
        padding: 1.2rem 1rem;
    }

    .app-header h1 {
        font-size: 1.4rem;
    }

    .device-info {
        font-size: 0.8rem;
        flex-direction: row;
        gap: 1rem;
    }

    .connection-status {
        font-size: 0.75rem;
    }

    .message {
        max-width: 85%;
    }

    .message-content {
        padding: 0.8rem 1rem;
    }

    .message-list {
        padding: 1rem 0.75rem;
        gap: 1rem;
    }

    .input-container {
        padding: 8px 12px;
        min-height: 56px;
    }

    .upload-area {
        padding: 1.5rem 1rem;
    }

    .input-wrapper {
        gap: 8px;
    }

    .file-button {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .input-field-container {
        min-height: 40px;
    }

    .input-field-container textarea {
        font-size: 16px;
        padding: 10px 12px;
    }
}

/* 手机设备 */
@media (max-width: 480px) {
    .app-header {
        padding: 1rem 0.75rem;
    }

    .app-header h1 {
        font-size: 1.3rem;
        margin-bottom: 0.3rem;
    }

    .device-info {
        font-size: 0.75rem;
        flex-direction: column;
        gap: 0.4rem;
    }

    .connection-status {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }

    .message-list {
        padding: 1rem 0.75rem;
        gap: 0.8rem;
    }

    .message {
        max-width: 92%;
    }

    .message-content {
        padding: 0.7rem 0.9rem;
        font-size: 0.9rem;
        border-radius: 16px;
    }

    .message-meta {
        font-size: 0.65rem;
        margin-bottom: 0.3rem;
    }

    .message-time {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }

    .input-container {
        padding: 8px 12px;
        min-height: 56px;
    }

    .input-wrapper {
        gap: 8px;
    }

    .file-button {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .input-field-container {
        min-height: 40px;
    }

    .input-field-container textarea {
        font-size: 16px;
        padding: 10px 12px;
    }

    .send-button {
        width: 32px;
        height: 32px;
    }

    .send-icon {
        width: 16px;
        height: 16px;
    }
    
    .file-upload {
        margin-bottom: 0.75rem;
    }
    
    .upload-area {
        padding: 0.75rem;
    }
    
    .upload-prompt {
        gap: 0.25rem;
    }
    
    .upload-icon {
        font-size: 1.2rem;
    }
    
    .file-info {
        gap: 0.5rem;
    }
    
    .file-icon {
        font-size: 1.2rem;
    }
    
    .download-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .app-footer {
        padding: 0.5rem;
    }
    
    .refresh-button {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* 超小屏幕 */
@media (max-width: 320px) {
    .app-header h1 {
        font-size: 1.1rem;
    }
    
    .message-content {
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
    }
    
    .file-name {
        font-size: 0.85rem;
    }
    
    .file-size {
        font-size: 0.75rem;
    }
    
    .input-field-container textarea {
        font-size: 15px;
        padding: 8px 10px;
    }

    .file-button {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .send-button {
        width: 28px;
        height: 28px;
    }

    .send-icon {
        width: 14px;
        height: 14px;
    }
}

/* 横屏适配 */
@media (max-height: 500px) and (orientation: landscape) {
    .app-header {
        padding: 0.5rem;
    }
    
    .app-header h1 {
        font-size: 1.1rem;
        margin-bottom: 0.2rem;
    }
    
    .device-info {
        font-size: 0.7rem;
    }
    
    .message-list {
        padding: 0.5rem;
    }
    
    .input-container {
        padding: 0.5rem;
    }
    
    .app-footer {
        padding: 0.4rem;
    }
}

/* 高分辨率屏幕 */
@media (min-width: 1200px) {
    .app {
        max-width: 900px;
    }
    
    .message {
        max-width: 60%;
    }
    
    .app-header h1 {
        font-size: 1.6rem;
    }
    
    .message-content {
        font-size: 1rem;
    }
}

/* 打印样式 */
@media print {
    .app-header,
    .input-container,
    .app-footer {
        display: none;
    }
    
    .app {
        height: auto;
        box-shadow: none;
    }
    
    .message-list {
        padding: 0;
    }
    
    .message-content {
        border: 1px solid #ddd;
        background-color: white !important;
        color: black !important;
    }
}