:host {
    --tab-bar-background: white;
    --tab-bar-border-color: #f5f5f5;
    --tab-bar-height: 56px;
    --icon-color: #999;
    --icon-color-selected: #b64d24;
    --label-color: #666;
    --label-color-selected: #b64d24;
}

ion-tab-bar {
    --border: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    height: var(--tab-bar-height);
    padding: 0;
    position: relative;

    &::before {
        display: none;
    }

    ion-tab-button {
        --color: var(--icon-color);
        --color-selected: var(--icon-color-selected);
        position: relative;
        overflow: visible;
        background: transparent;

        ion-icon {
            font-size: 22px;
            margin-bottom: 4px;
            transition: all 0.2s ease;
        }

        ion-label {
            font-size: 12px;
            font-weight: 500;
            margin: 0;
            color: var(--label-color);
            transition: all 0.2s ease;
        }

        // 中间的主要tab按钮样式
        &.main-tab {
            .tab-circle {
                width: 44px;
                height: 44px;
                background: var(--icon-color-selected);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: -20px auto 2px;
                box-shadow: 0 4px 12px rgba(182, 77, 36, 0.2);
                transition: transform 0.2s ease;

                ion-icon {
                    color: white;
                    font-size: 24px;
                    margin: 0;
                }
            }

            ion-label {
                margin-top: 2px;
            }

            &.tab-selected {
                .tab-circle {
                    transform: translateY(-2px);
                }
            }
        }

        &.tab-selected {
            ion-icon {
                transform: translateY(-2px);
                color: var(--icon-color-selected);
            }

            ion-label {
                color: var(--label-color-selected);
                font-weight: 600;
            }

            &::after {
                content: '';
                position: absolute;
                bottom: 6px;
                left: 50%;
                transform: translateX(-50%);
                width: 20px;
                height: 3px;
                border-radius: 1.5px;
                background: var(--icon-color-selected);
            }
        }

        &::before {
            display: none;
        }

        // 添加涟漪效果
        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background: rgba(182, 77, 36, 0.1);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.3s ease;
            opacity: 0;
        }

        &:active::after {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
    }
}

// 适配 iPhone 底部安全区域
:host-context(.ios) ion-tab-bar {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
}