/* 移动端手势和滑动样式 */
.journal-item, .trade-card {
    position: relative;
    transition: transform 0.3s ease;
}

.journal-item.swiped-left,
.trade-card.swiped-left {
    transform: translateX(-80px);
}

.journal-item .swipe-actions,
.trade-card .swipe-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.journal-item.swiped-left .swipe-actions,
.trade-card.swiped-left .swipe-actions {
    opacity: 1;
    pointer-events: auto;
}

/* 语音输入按钮悬停效果 */
.voice-input-btn:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.voice-input-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* iOS 安全区域适配 */
@supports (padding: max(0px)) {
    body {
        padding-top: max(env(safe-area-inset-top), 0px);
        padding-bottom: max(env(safe-area-inset-bottom), 0px);
        padding-left: max(env(safe-area-inset-left), 0px);
        padding-right: max(env(safe-area-inset-right), 0px);
    }
}

/* 触摸反馈 */
.touch-feedback {
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
    -webkit-touch-callout: none;
    user-select: none;
}

button, a, .clickable {
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
}

/* 防止 iOS 缩放 */
input, textarea, select {
    touch-action: manipulation;
}

/* 拍照按钮样式 */
.camera-wrapper {
    position: relative;
    display: inline-block;
}

.camera-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    margin-top: 10px;
}

/* 加载动画 */
@keyframes pulse-loading {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading-pulse {
    animation: pulse-loading 1.5s ease-in-out infinite;
}

/* 移动端扩大点击区域 */
@media (max-width: 768px) {
    a, button, .clickable {
        position: relative;
    }
    
    a::before, button::before, .clickable::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
    }
}
