@import "tokens.css";

/* ============================================================
   全局基础样式（body, card, content…）
   ============================================================ */

body {
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 100vh;
    justify-content: center;

    font-family: -apple-system, BlinkMacSystemFont, Roboto, system-ui,
    sans-serif, "Helvetica Neue", "Microsoft YaHei", "Noto Sans",
    "Noto Sans CJK SC", "PingFang SC", "Segoe UI";

    line-height: 1.5;

    background-color: var(--color-background);
    color: var(--color-text);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@supports (height: 1dvh) {
    body {
        height: 100dvh;
    }
}

.card {
    display: flex;
    flex-direction: column;
    position: relative;

    width: 100%;
    max-width: 500px;
    height: 100%;
    margin: 0 auto;

    border-radius: 20px;
    background: var(--color-background-card);

    box-sizing: border-box;
    box-shadow: var(--color-card-shadow);
    backdrop-filter: var(--blur-card);
}

.content-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;

    background: var(--color-background-content);
    backdrop-filter: var(--blur-content);
    box-shadow: var(--color-content-inner-shadow);

    -webkit-overflow-scrolling: touch;
}

.card-bottom-container {
    flex-shrink: 0;
    background-color: var(--color-background-card);
    z-index: 10;
}

/* ============================================================
   组件样式
   ============================================================ */

.badge {
    display: inline-block;
    background: var(--color-badge-background);
    color: var(--color-badge-text);

    padding: 6px 14px;
    border-radius: 30px;

    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px;
}

.safety-banner {
    width: 100%;

    padding: 14px 20px;
    box-sizing: border-box;

    background: var(--color-warning-banner-background);
    color: var(--color-warning-banner-text);
    border-bottom: 3px solid var(--color-warning-banner-border);

    font-size: 22px;
    font-weight: 700;
    text-align: center;

    z-index: 9998;
    box-shadow: var(--color-warning-banner-shadow);

    gap: 5px;

    animation: bannerPulse 2.4s ease-in-out infinite;
}

.safety-banner .icon {
    display: inline-block;
    font-size: 26px;

    animation:
        iconBounce 1.2s ease-in-out infinite,
        iconGlow 2.4s ease-in-out infinite;
}

.safety-banner .text {
    transform: translateY(5px);
}

.section-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--color-text-strong);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.section-content,
.translation-item,
.summary-text,
.next-step-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;

    max-width: 100%;
    box-sizing: border-box;
}

.summary {
    font-size: 28px;
    font-weight: 600;

    padding: 12px 6px;
    margin-bottom: 20px;

    border-bottom: 2px solid var(--color-divider);
    color: var(--color-text);
}

.translation-item {
    background: var(--color-translation-background);
    border-radius: 16px;

    padding: 8px 12px;
    margin-bottom: 3px;

    font-size: 20px;
    color: var(--color-text);
}

.next-step,
.warning {
    padding: 15px 12px;
    border-radius: 15px;
    margin-top: 20px;

    font-size: 20px;
    box-shadow: var(--shadow-medium);
}

.next-step {
    background: var(--color-success-background);
    border-left: 6px solid var(--color-success-border);
    color: var(--color-success-text);
    font-weight: 500;
}

.warning {
    background: var(--color-warning-background);
    border-left: 6px solid var(--color-warning-border);
    color: var(--color-warning-text);
    font-weight: bold;
}

.footer {
    flex-shrink: 0;

    padding-top: 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));

    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);

    background-color: var(--color-background-card);
    backdrop-filter: var(--blur-card);
}

/* ============================================================
   按钮（拟物 + 渐变 + 阴影）
   ============================================================ */

button {
    width: 100%;
    padding: 12px;

    border: none;
    border-radius: 30px;

    font-size: 24px;
    font-weight: 600;
    cursor: pointer;

    color: var(--color-button-text);
    background: linear-gradient(
            180deg,
            var(--color-button-background-top),
            var(--color-button-background-bottom)
    );

    box-shadow: var(--color-button-shadow);
    transition: all 0.2s ease;

    touch-action: manipulation;
    transform: translateZ(0);
}

button:hover {
    background-color: var(--color-button-background-hover);
    transform: scale(0.98);
}

button:active {
    transform: scale(0.97);
    box-shadow: var(--color-button-shadow-active);
}

.action-button {
    background: linear-gradient(
            180deg,
            var(--color-button-background-top),
            var(--color-button-background-bottom)
    );
}

.button-group {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding: 0 12%;
    gap: 12px;
}

/* ============================================================
   语音朗读高亮
   ============================================================ */

.speaking {
    background-color: #fff3c9;
    transition: background-color 0.2s;
}

/* ============================================================
   图片预览 Overlay
   ============================================================ */

.overlay {
    display: none;
    flex-direction: column;

    overflow-y: auto;
    position: fixed;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 9999;
    background-color: var(--color-background-overlay);
    backdrop-filter: var(--blur-overlay);

    will-change: opacity, backdrop-filter;
}

.overlay-scroll-body {
    flex: 1;
    overflow-y: auto;
    text-align: center;

    padding: 20px;
    -webkit-overflow-scrolling: touch;

    user-select: none;
    -webkit-user-select: none;
}

.overlay-bottom-container {
    align-items: center;
    padding-bottom: 20px;
}

#image-output img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;

    box-shadow: var(--shadow-extra-large);

    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    -webkit-touch-callout: default;
}

.instruction-banner {
    background-color: #28a745;
    color: white;

    padding: 20px;
    width: 100%;

    border-radius: 12px;
    text-align: center;

    font-size: 1.2rem;
    font-weight: bold;

    box-shadow: var(--shadow-medium);
    border: 2px solid #fff;

    pointer-events: none;
}

.close-overlay-button {
    font-size: 1.2rem;
    background-color: #28a745;
}

.close-overlay-button:hover {
    background-color: #26c14b;
}

/* ============================================================
   错误页
   ============================================================ */

.error-card {
    text-align: center;
}

.error-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.retry-button {
    background: linear-gradient(
            180deg,
            var(--color-button-background-top),
            var(--color-button-background-bottom)
    );
}

/* ============================================================
   动画（pulse, fade, scale, blur）
   ============================================================ */

/* 呼吸动画（颜色来自变量） */
.pulse {
    animation: pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 var(--color-pulse-shadow);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 8px 20px var(--color-pulse-shadow-strong);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 var(--color-pulse-shadow);
    }
}

/* 淡入 */
.fade-in {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 缩放进入 */
.scale-in {
    animation: scaleIn 0.25s cubic-bezier(0.4, 0, 0.4, 1);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 模糊淡入 */
.blur-in {
    animation: blurIn 0.35s ease-out;
}

@keyframes blurIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: var(--blur-overlay);
    }
}

/* 图标跳动 */
@keyframes iconBounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-5px); }
    60%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}

/* 图标发光 */
@keyframes iconGlow {
    0%   { text-shadow: 0 0 0 var(--color-warning-icon-glow); }
    50%  { text-shadow: 0 0 12px var(--color-warning-icon-glow); }
    100% { text-shadow: 0 0 0 var(--color-warning-icon-glow); }
}

/* 横幅轻微脉冲 */
@keyframes bannerPulse {
    0%   { box-shadow: var(--color-warning-banner-shadow); }
    50%  { box-shadow: 0 6px 18px var(--color-warning-icon-glow); }
    100% { box-shadow: var(--color-warning-banner-shadow); }
}

/* ============================================================
   打印优化
   ============================================================ */

@media print {
    .no-print {
        display: none !important;
    }

    .card {
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    body {
        background: white;
        padding: 10px;
    }

    .summary,
    .translation-item,
    .next-step,
    .warning {
        break-inside: avoid;
    }
}

/* ============================================================
   手机适配
   ============================================================ */

@media (max-width: 500px) {
    .action-button {
        font-size: 20px;
    }
}

/* ============================================================
   iOS Safari 优化
   ============================================================ */

* {
    -webkit-tap-highlight-color: transparent;
}

.content-container,
.overlay-scroll-body {
    -webkit-overflow-scrolling: touch;
}

/* 避免 transform 导致模糊 */
button,
.card {
    transform: translateZ(0);
}

/* 避免输入框被放大（如果未来加入输入框） */
input,
textarea {
    font-size: 16px;
}