/* === 移动端增强样式 === */

/* 曲面屏幕检测和适配 */
@supports (padding: max(0px, env(safe-area-inset-left))) {
    /* 只有当安全区域大于0时才应用曲面屏优化 */
    @media (max-width: 768px) {
        .input-container {
            padding-left: max(0.75rem, env(safe-area-inset-left) + 0.5rem);
            padding-right: max(0.75rem, env(safe-area-inset-right) + 0.5rem);
        }
        
        /* 检测到明显的曲面屏时才缩小输入框 */
        .input-field {
            margin-left: env(safe-area-inset-left, 0);
            margin-right: env(safe-area-inset-right, 0);
            width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
        }
        
        .input-actions {
            right: calc(1rem + env(safe-area-inset-right, 0px));
        }
    }
}

/* 检测特定曲面屏设备 - OPPO等 */
@media (max-width: 768px) and (min-aspect-ratio: 18/9) {
    .curved-screen-detected .input-container {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    
    .curved-screen-detected .input-field {
        margin-left: 0.3rem;
        margin-right: 0.3rem;
        width: calc(100% - 0.6rem);
    }
    
    .curved-screen-detected .input-actions {
        right: 1.3rem;
    }
}

/* 快捷卡片容器 */
.quick-card-container {
    position: relative;
}

/* 展开图标样式 */
.quick-expand-icon {
    display: none;
    margin-left: auto;
    color: var(--primary-green);
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .quick-expand-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .quick-card {
        position: relative;
        width: 100%;
        justify-content: space-between;
    }
    
    .quick-card.expanded .quick-expand-icon {
        transform: rotate(180deg);
    }
}

/* 现代化子菜单样式 */
.quick-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    margin-top: 0.75rem;
    padding: 0.75rem;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    z-index: 100;
    animation: submenuSlideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* 智能定位：当子菜单可能被页脚遮盖时，向上展开 */
@media (max-width: 768px) {
    .quick-card-container:last-child .quick-submenu,
    .quick-card-container.potential-overlap .quick-submenu {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: 0.75rem;
        animation: submenuSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
}

/* 向上展开的动画 */
@keyframes submenuSlideUp {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
        filter: blur(5px);
    }
    50% {
        opacity: 0.8;
        transform: translateY(5px) scale(0.98);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* 在小屏幕高度设备上的额外优化 */
@media (max-width: 768px) and (max-height: 650px) {
    .quick-submenu {
        /* 在小屏幕上减少边距和内边距 */
        margin-top: 0.5rem;
        padding: 0.5rem;
        max-height: 180px;
        overflow-y: auto;
    }
    
    .quick-card-container:last-child .quick-submenu,
    .quick-card-container.potential-overlap .quick-submenu {
        margin-bottom: 0.5rem;
        max-height: 180px;
        overflow-y: auto;
    }
}

/* 极小屏幕高度的特殊处理 */
@media (max-width: 768px) and (max-height: 580px) {
    .quick-card-container:last-child .quick-submenu,
    .quick-card-container.potential-overlap .quick-submenu {
        position: fixed;
        top: auto;
        bottom: 80px; /* 确保在页脚上方 */
        left: 1rem;
        right: 1rem;
        max-height: 150px;
        overflow-y: auto;
        z-index: 1001; /* 确保在页脚之上 */
    }
}

.quick-submenu.show {
    display: block;
}

/* 子菜单网格布局 - 移动端每行显示2个菜单 */
@media (max-width: 768px) {
    .quick-submenu {
        display: none;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding: 1rem;
    }
    
    .quick-submenu.show {
        display: grid;
    }
}

/* 子菜单入场动画 */
@keyframes submenuSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-15px) scale(0.95);
        filter: blur(5px);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-5px) scale(0.98);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* 子菜单项样式 */
.quick-submenu a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    color: var(--neutral-gray-700);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    min-height: 48px;
}

/* 移动端子菜单项调整 */
@media (max-width: 768px) {
    .quick-submenu a {
        margin-bottom: 0;
        font-size: 0.8rem;
        padding: 0.65rem 0.75rem;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.25rem;
        text-align: left;
    }
}

/* 子菜单项悬停效果 */
.quick-submenu a:hover {
    background: linear-gradient(135deg, rgba(87, 180, 1, 0.15) 0%, rgba(110, 217, 5, 0.1) 100%);
    color: var(--primary-green);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(87, 180, 1, 0.2);
    border-color: rgba(87, 180, 1, 0.3);
}

/* 移动端悬停效果调整 */
@media (max-width: 768px) {
    .quick-submenu a:hover {
        transform: scale(1.03);
    }
}

/* 子菜单项图标效果 */
.quick-submenu a::before {
    content: '•';
    color: var(--primary-green);
    font-weight: bold;
    margin-right: 0.5rem;
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* 移动端图标调整 */
@media (max-width: 768px) {
    .quick-submenu a::before {
        margin-right: 0.3rem;
        margin-bottom: 0;
        font-size: 0.7rem;
        order: -1;
    }
}

.quick-submenu a:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

/* 子菜单项右箭头 */
.quick-submenu a::after {
    content: '→';
    margin-left: auto;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: var(--primary-green);
    font-weight: bold;
}

/* 移动端隐藏右箭头 */
@media (max-width: 768px) {
    .quick-submenu a::after {
        display: none;
    }
}

.quick-submenu a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* 子菜单逐项动画 */
.quick-submenu.show a {
    animation: submenuItemSlideIn 0.4s ease-out forwards;
    opacity: 0;
    transform: translateX(-20px);
}

/* 移动端网格动画调整 */
@media (max-width: 768px) {
    .quick-submenu.show a {
        transform: translateY(20px);
    }
}

.quick-submenu.show a:nth-child(1) { animation-delay: 0.1s; }
.quick-submenu.show a:nth-child(2) { animation-delay: 0.15s; }
.quick-submenu.show a:nth-child(3) { animation-delay: 0.2s; }
.quick-submenu.show a:nth-child(4) { animation-delay: 0.25s; }
.quick-submenu.show a:nth-child(5) { animation-delay: 0.3s; }

@keyframes submenuItemSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 移动端网格动画关键帧 */
@media (max-width: 768px) {
    @keyframes submenuItemSlideIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* 深色主题适配 */
[data-theme="dark"] .quick-submenu {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .quick-submenu a {
    color: var(--neutral-gray-300);
    background: rgba(30, 41, 59, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .quick-submenu a:hover {
    background: linear-gradient(135deg, rgba(87, 180, 1, 0.25) 0%, rgba(110, 217, 5, 0.2) 100%);
    color: var(--primary-green-light);
    border-color: rgba(87, 180, 1, 0.4);
    box-shadow: 0 4px 12px rgba(87, 180, 1, 0.3);
}

[data-theme="dark"] .quick-submenu a::before {
    color: var(--primary-green-light);
}

[data-theme="dark"] .quick-submenu a::after {
    color: var(--primary-green-light);
}

/* 桌面端隐藏展开图标，直接跳转 */
@media (min-width: 769px) {
    .quick-expand-icon {
        display: none !important;
    }
    
    .quick-submenu {
        display: none !important;
    }
    
    /* 确保PC端快捷卡片宽度一致 */
    .quick-card-container {
        flex: 1;
    }
    
    .quick-card {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}