/* ============================================================
   图片压缩工具 — yicool.com.cn /tools/tuyasuo
   复刻腾讯帮小忙图片压缩的视觉语言：
   主蓝 #136ce9 · 页面背景 #f6f7fa · 白色圆角内容卡 · 虚线大上传区
   三端断点：>=992px 桌面 / 768-991px 平板 / <768px 手机
   ============================================================ */

/* 占满整个电脑端屏幕：覆盖全站 .app / .main-content 的宽度限制 */
body.page-tuyasuo-full .app { max-width: 100%; }
body.page-tuyasuo-full .main-content { max-width: 100%; border-right: 0; }
.ty-page {
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

/* ---------- 标题区 ---------- */
.ty-hero { margin-bottom: 20px; }
.ty-title {
    font-size: 26px; font-weight: 700; color: #1b1f24;
    display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
}
.ty-title::before {
    content: ''; width: 8px; height: 22px; border-radius: 4px;
    background: linear-gradient(180deg, #136ce9, #4d9fff); flex: none;
}
.ty-sub { font-size: 14px; color: #8a93a2; margin: 0; line-height: 1.7; max-width: 720px; }

/* ---------- 工具容器（腾讯 .tool-container 风格） ---------- */
.ty-tool {
    background: #f6f7fa;
    border-radius: 10px;
    padding: 20px;
}

/* ---------- 上传区（腾讯虚线大框） ---------- */
.ty-upload {
    position: relative;
    padding-top: 40%; /* 宽高比 2.5:1 */
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: opacity .2s ease;
}
/* 文件输入框在 <label> 内：视觉隐藏（sr-only，非 display:none）。
   点击上传区任意位置由浏览器原生激活该 input，打开系统选择器，
   兼容 iOS Safari / 微信 / 安卓 WebView，不依赖 JS click() */
.ty-upload input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}
.ty-upload.is-dragging .ty-upload-inner {
    border-color: #136ce9; background: #f0f6ff;
}
.ty-upload-inner {
    position: absolute; inset: 0; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px dashed #e2e2e2; border-radius: 24px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    text-align: center; padding: 20px; gap: 8px;
    cursor: pointer; user-select: none;
    transition: border-color .2s ease, background .2s ease;
}
.ty-upload-icon { width: 64px; height: 64px; color: #136ce9; margin-bottom: 4px; }
.ty-upload-icon svg { width: 100%; height: 100%; }
.ty-upload-text { font-size: 16px; color: #242424; font-weight: 500; margin: 0; }
.ty-upload-sub { font-size: 14px; color: #979797; margin: 0; }
.ty-upload-btn { margin-top: 10px; }
.ty-upload-tip { font-size: 12px; color: #aaa; margin: 6px 0 0; }

/* ---------- 通用按钮 ---------- */
.ty-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; cursor: pointer; font-size: 14px; font-weight: 500;
    border-radius: 8px; padding: 8px 30px; line-height: 1.6;
    transition: all .15s ease; white-space: nowrap;
    /* 去除移动端（iOS Safari / 安卓 WebView）button 的 UA 默认外观，
       避免系统渐变、额外内边距、默认字号导致按钮尺寸/高度异常 */
    -webkit-appearance: none; appearance: none;
}
.ty-btn:disabled { opacity: .5; cursor: not-allowed; }
.ty-btn-primary { background: #136ce9; color: #fafafa; }
.ty-btn-primary:hover:not(:disabled) { background: #0f5cc7; }
.ty-btn-ghost {
    background: #fff; color: #136ce9; border: 1px solid #cfe0fb;
}
.ty-btn-ghost:hover:not(:disabled) { background: #f0f6ff; border-color: #136ce9; }

/* ---------- 压缩设置条 ---------- */
.ty-settings {
    display: flex; flex-wrap: wrap; gap: 14px 28px;
    background: #fff; border-radius: 10px; padding: 14px 18px;
    margin-top: 12px;
}
.ty-setting { display: flex; align-items: center; gap: 10px; }
.ty-setting-label { font-size: 13px; color: #5b6472; flex: none; }
.ty-seg {
    display: inline-flex; background: #f3f5f9; border-radius: 8px; padding: 3px; gap: 2px;
}
.ty-seg button {
    border: none; background: transparent; color: #5b6472; cursor: pointer;
    font-size: 13px; padding: 5px 14px; border-radius: 6px; transition: all .15s ease;
    white-space: nowrap;
}
.ty-seg button:hover { color: #136ce9; }
.ty-seg button:disabled { opacity: .45; cursor: not-allowed; color: #b9c0cc; }
.ty-seg button:disabled:hover { color: #b9c0cc; }
.ty-seg button.active { background: #fff; color: #136ce9; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* ---------- 操作栏 ---------- */
.ty-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border-radius: 10px; padding: 12px 18px; margin-top: 12px;
    flex-wrap: wrap;
}
.ty-toolbar-info { font-size: 13px; color: #5b6472; }
.ty-toolbar-info b { color: #136ce9; font-weight: 700; }
.ty-toolbar-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 文件列表（腾讯虚线列表容器） ---------- */
.ty-list {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    background: #fff; border: 2px dashed #e2e2e2; border-radius: 10px;
    padding: 12px; margin-top: 12px; min-height: 60px;
}
.ty-list-empty {
    grid-column: 1 / -1; text-align: center; color: #aaa; font-size: 13px;
    padding: 24px 0;
}

.ty-file {
    border: 1px solid #eee; border-radius: 5px; padding: 10px;
    display: flex; flex-direction: column; gap: 8px; background: #fff;
    position: relative;
}
.ty-file-thumb {
    width: 100%; height: 140px; border-radius: 4px; overflow: hidden;
    background: #f6f7fa; display: flex; align-items: center; justify-content: center;
}
.ty-file-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ty-file-meta { min-width: 0; }
.ty-file-name {
    font-size: 13px; font-weight: 600; color: #242424;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ty-file-sizes { font-size: 12px; color: #aaa; margin-top: 2px; line-height: 1.5; }
.ty-file-sizes .ty-delta { color: red; font-weight: 600; }
.ty-file-sizes .ty-arrow { color: #ccc; margin: 0 3px; }
.ty-file-status {
    display: inline-block; font-size: 11px; color: #55adf0;
    background: #eef6fe; border-radius: 3px; padding: 1px 6px; margin-top: 3px;
}
.ty-file-status.ty-st-error { color: #e5484d; background: #fdeeee; }
.ty-file-status.ty-st-optimal { color: #9aa0a8; background: #f3f5f9; }
.ty-file-actions { display: flex; gap: 6px; margin-top: auto; }
.ty-file-actions .ty-btn { flex: 1; padding: 6px 10px; font-size: 13px; border-radius: 6px; }
.ty-file-del {
    border: none; background: transparent; color: #c2c8d2; cursor: pointer;
    font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.ty-file-del:hover { color: #e5484d; background: #fdeeee; }
.ty-file .ty-file-loading { position: absolute; inset: 0; border-radius: 5px;
    background: rgba(255,255,255,.88); display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #136ce9; gap: 6px; }
.ty-file .ty-file-loading .ty-spin {
    width: 14px; height: 14px; border: 2px solid #d6e5fd; border-top-color: #136ce9;
    border-radius: 50%; animation: ty-spin .8s linear infinite;
}
@keyframes ty-spin { to { transform: rotate(360deg); } }

/* ---------- 使用说明 ---------- */
.ty-guide {
    background: #f6f7fa; border-radius: 10px; padding: 24px 28px; margin-top: 20px;
}
.ty-guide h3 { font-size: 15px; color: #1b1f24; margin: 0 0 10px; }
.ty-guide ol { margin: 0 0 10px; padding-left: 20px; }
.ty-guide li { font-size: 13px; color: #5b6472; line-height: 2; }
.ty-guide p { font-size: 13px; color: #5b6472; line-height: 1.8; margin: 0; }

/* ---------- 消息提示 ---------- */
.ty-toast {
    position: fixed; top: 76px; left: 50%; transform: translateX(-50%);
    background: rgba(20, 24, 31, .92); color: #fff; font-size: 13px;
    padding: 10px 20px; border-radius: 8px; z-index: 9999;
    opacity: 0; pointer-events: none; transition: opacity .25s ease; max-width: 86vw;
    text-align: center;
}
.ty-toast.show { opacity: 1; }

/* ==================== 平板：768-991px ==================== */
@media (max-width: 991px) {
    .ty-tool { padding: 14px; }
    .ty-list { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== 手机：<768px ==================== */
@media (max-width: 767px) {
    .ty-page { padding: 14px 10px 40px; }
    .ty-title { font-size: 21px; }
    .ty-sub { font-size: 13px; }
    .ty-tool { padding: 10px; border-radius: 8px; }

    /* 上传区 */
    .ty-upload { padding-top: 0; height: 230px; }
    .ty-upload-inner { border-radius: 16px; padding: 14px; gap: 6px; }
    .ty-upload-icon { width: 48px; height: 48px; }
    .ty-upload-text { font-size: 15px; }
    .ty-upload-sub { font-size: 12px; line-height: 1.6; max-width: 270px; }
    .ty-upload-btn { padding: 9px 26px; margin-top: 6px; min-height: 40px; }
    .ty-upload-tip { font-size: 11px; line-height: 1.5; max-width: 280px; }

    /* 压缩设置：纵向排列；seg 按钮 flex-basis:auto 自适应宽度，
       避免「保持原格式」等长文案被均分挤压溢出（配合 flex-wrap 换行兜底） */
    .ty-settings { flex-direction: column; gap: 12px; padding: 12px 14px; }
    .ty-setting { flex-direction: column; align-items: stretch; gap: 7px; }
    .ty-setting-label { font-size: 13px; }
    .ty-seg { width: 100%; flex-wrap: wrap; }
    .ty-seg button { flex: 1 1 auto; padding: 7px 8px; text-align: center; min-height: 34px; }

    /* 操作栏：3 按钮均分一行，不再出现半宽悬空 */
    .ty-toolbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
    .ty-toolbar-info { text-align: center; font-size: 12px; line-height: 1.7; }
    .ty-toolbar-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; }
    /* 三按钮固定高度 + line-height:1，杜绝行高叠加导致的高度漂移，
       宽度铺满各自列，文字不换行（溢出省略），三按钮严格等高 */
    .ty-toolbar-btns .ty-btn {
        width: 100%; height: 42px; padding: 0 6px;
        font-size: 14px; line-height: 1;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* 文件列表：单列横排卡片，删除 × 固定右上角（不占行动区） */
    .ty-list { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
    .ty-file { position: relative; flex-direction: row; padding: 10px 36px 10px 10px; gap: 10px; }
    .ty-file-thumb { width: 68px; height: 68px; flex: none; }
    .ty-file-meta { flex: 1; min-width: 0; }
    .ty-file-name { font-size: 13px; }
    .ty-file-sizes { font-size: 12px; }
    .ty-file-status { font-size: 12px; }
    .ty-file .ty-file-del { position: absolute; top: 4px; right: 4px; padding: 6px 10px; font-size: 15px; }
    .ty-file-actions { flex-direction: row; margin-top: 4px; }
    .ty-file-actions .ty-btn { flex: 1; padding: 7px 6px; font-size: 13px; min-height: 36px; }

    .ty-guide { padding: 16px; }
    .ty-guide li { font-size: 12px; line-height: 1.9; }
}