/* 扣子应用容器样式 */

/* 基础动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(calc(100% + 1rem));
    }
    to {
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 应用容器样式 - 响应式基础设置 */
#appContainer {
    min-height: 95vh;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* 扣子SDK应用容器样式 - 适配1200*900画布 */
#app {
    min-height: 900px;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    border: none;
    box-sizing: border-box;
}

/* 确保SDK内容能够完整显示 - 适配1200*900画布 */
#app > * {
    height: 100%;
    min-height: 900px;
    width: 100%;
    min-width: 1200px;
    max-width: 100%;
    position: relative;
    overflow-x: auto;
    box-sizing: border-box;
}

/* 自定义 iframe 样式 - 针对扣子Web SDK的内容容器 */
.my-client {
    width: 100%; /* 宽度占满容器 */
    height: 900px; /* 适配900px高度画布 */
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: block;
    overflow-x: auto;
}

/* 适配扣子Web SDK可能创建的iframe容器 - 适配1200*900画布 */
#app iframe {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    min-height: 900px;
    border: none;
    display: block;
    box-sizing: border-box;
}

/* 针对大屏幕的优化 - 确保1200px宽度内容能够完整显示 */
@media (min-width: 1200px) {
    #app {
        width: 100%;
        margin: 0 auto;
        height: 900px;
    }
    
    #app > * {
        width: 100%;
    }
    
    #appContainer {
        height: 900px;
    }
}

/* 针对中大屏幕的优化 */
@media (min-width: 992px) and (max-width: 1199px) {
    #app {
        width: 100%;
        min-height: 800px;
        height: 85vh;
    }
    
    #app > * {
        width: 100%;
        min-width: 1200px;
    }
    
    #appContainer {
        height: 85vh;
    }
}

/* 针对中等屏幕的优化 */
@media (min-width: 768px) and (max-width: 991px) {
    #app {
        width: 100%;
        min-height: 700px;
        height: 80vh;
    }
    
    #app > * {
        width: 100%;
        min-width: 1200px;
    }
    
    #appContainer {
        height: 80vh;
    }
}

/* 针对小屏幕的优化 */
@media (min-width: 641px) and (max-width: 767px) {
    #app {
        width: 100%;
        min-height: 650px;
        height: 75vh;
    }
    
    #app > * {
        width: 100%;
        min-width: 1200px;
    }
    
    #appContainer {
        height: 75vh;
    }
}

/* 针对移动端的优化 */
@media (max-width: 640px) {
    #appContainer {
        min-height: 95vh !important;
        height: auto !important;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #app {
        min-height: 600px !important;
        height: 90vh !important;
        max-height: none;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #app > * {
        width: 100%;
        min-width: 1200px;
    }
    
    #loadingState,
    #errorState {
        min-height: 85vh !important;
    }
    
    /* 移动端优化滚动体验 */
    #app {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}

/* 内容区域样式 */
#contentArea {
    animation: fadeIn 0.3s ease-out;
}

/* 消息提示样式 */
#messageToast.success {
    background-color: rgba(0, 180, 42, 0.1);
    border: 1px solid #00B42A;
    color: #00B42A;
}

#messageToast.error {
    background-color: rgba(245, 63, 63, 0.1);
    border: 1px solid #F53F3F;
    color: #F53F3F;
}

#messageToast.warning {
    background-color: rgba(255, 125, 0, 0.1);
    border: 1px solid #FF7D00;
    color: #FF7D00;
}

#messageToast.info {
    background-color: rgba(22, 93, 255, 0.1);
    border: 1px solid #165DFF;
    color: #165DFF;
}

#messageToast.show {
    transform: translateX(0);
}

/* 对话框样式 */
#dialogContent.show {
    transform: scale(1);
    opacity: 1;
}

/* 按钮悬停效果 */
button {
    transition: all 0.2s ease-in-out;
}

button:active {
    transform: scale(0.98);
}

/* 滚动条样式优化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #ced4da;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

/* 应用容器滚动条样式 - 适配横向滚动 */
#app::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#app::-webkit-scrollbar-track {
    background: transparent;
}

#app::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 4px;
}

#app::-webkit-scrollbar-thumb:hover {
    background: #bdbdbd;
}

/* 加载动画优化 */
#loadingState .animate-spin {
    border-left-color: transparent;
}

/* 表单元素样式统一 */
input, textarea, select {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #165DFF !important;
    box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1) !important;
}

/* 模态框动画 */
.modal-enter {
    animation: fadeIn 0.3s ease-out;
}

/* 下拉菜单动画 */
.dropdown-enter {
    animation: fadeIn 0.2s ease-out;
}

/* 标签页切换动画 */
.tab-content {
    transition: opacity 0.3s ease-in-out;
}

/* 防止内容溢出 */
#contentArea img, #contentArea video, #contentArea iframe {
    max-width: 100%;
    height: auto;
}

/* 确保内容区域可滚动 */
#contentArea {
    overflow-y: auto;
}

/* 调整容器内部间距，避免内容被截断 */
#appContainer > #app {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
}

/* 确保app容器能够完整容纳扣子应用内容 */
#app {
    box-sizing: border-box;
}

/* 移除任何可能限制内容显示的样式 */
#appContainer {
    overflow: visible;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* 加载状态适配新容器尺寸 */
#loadingState {
    min-height: 80vh;
}

/* 可访问性优化 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}