/* ============================================================
 * styles.css —— 苹果 iOS 风格
 * 想换主色，改下面的 --blue 就行。
 * ============================================================ */

:root{
  --blue:#3B82F6;
  --blue-2:#8B5CF6;          /* 渐变用的紫 */
  --red:#FF3B30;
  --amber:#FF9500;
  --green:#34C759;
  --pink:#FF7A9C;

  --bg:#F4F5FA;              /* 比纯灰暖一点 */
  --card:#FFFFFF;
  --label:#141419;
  --label-2:rgba(60,60,67,.62);
  --label-3:rgba(60,60,67,.32);
  --separator:rgba(60,60,67,.12);
  --fill:rgba(120,120,128,.10);
  --radius:16px;
  --shadow:0 1px 2px rgba(20,20,40,.04), 0 6px 18px rgba(20,20,40,.05);
  --tabbar-h:calc(52px + env(safe-area-inset-bottom));
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E0E12;
    --card:#1B1B21;
    --label:#FFFFFF;
    --label-2:rgba(235,235,245,.62);
    --label-3:rgba(235,235,245,.32);
    --separator:rgba(120,120,128,.22);
    --fill:rgba(120,120,128,.20);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ⚠️ 这一行非常重要，别删。
   HTML 的 hidden 属性只靠浏览器默认样式 [hidden]{display:none} 生效，
   任何写在这里的 display（比如 .loading-mask 的 display:flex）都会把它盖掉，
   导致「明明设了 hidden 却还显示着」。加 !important 一劳永逸。 */
[hidden]{display:none !important}

html,body{margin:0;padding:0}

body{
  /* 顶部一层很淡的蓝紫渐变，整页不再是一片灰白 */
  background:
    radial-gradient(1100px 320px at 8% -8%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(900px 300px at 100% -4%, rgba(139,92,246,.12), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--label);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text",
              "PingFang SC","HarmonyOS Sans SC","Noto Sans CJK SC",
              "Microsoft YaHei",sans-serif;
  font-size:17px;                 /* iOS 正文基准，也防 iOS 自动放大 */
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--tabbar-h) + 16px);
}

/* ---------- 页面与导航 ---------- */
.page{padding:0 16px;max-width:640px;margin:0 auto}

.nav{padding:8px 0 4px}
.nav h1{
  font-size:32px;font-weight:800;letter-spacing:-.6px;margin:14px 0 3px;
  background:linear-gradient(96deg,var(--blue),var(--blue-2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav-sub{margin:0 0 8px;color:var(--label-2);font-size:14.5px}

/* ---------- 分组与卡片 ---------- */
.group{margin:22px 0}
.group-label{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:13px;font-weight:500;color:var(--label-2);
  padding:0 4px 7px 15px;
}
/* 小圆点点缀。必须用绝对定位——伪元素若参与 flex，
   会和裸文本一起被 space-between 推开，布局就乱了。 */
.group-label::before{
  content:"";position:absolute;left:2px;top:5px;
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
}
.group-hint{font-size:13px;color:var(--label-3);font-weight:400}

.card{
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

/* ---------- 统一的展开/收起按钮 ----------
   事件类型、基本信息、旅客信息三处用的是同一个样式、同一个位置（分组标题右侧）。 */
.fold-btn{
  flex:none;border:none;cursor:pointer;font:inherit;
  font-size:13px;line-height:1.6;
  color:var(--blue);background:rgba(59,130,246,.10);
  border-radius:11px;padding:3px 11px;
}
.fold-btn::after{content:" ▾";font-size:10px}
.fold-btn.open::after{content:" ▴"}

/* ---------- 事件类型 ---------- */
.type-current{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 16px;color:var(--label);
}
.type-ico{font-size:22px;line-height:1;flex:none}
.type-name{flex:1;font-size:17px;font-weight:600}

/* ---------- 航班号：CZ 固定，只填数字 ---------- */
.fixed-prefix{
  flex:none;font-size:17px;font-weight:700;color:var(--blue);
  background:rgba(59,130,246,.10);border-radius:8px;padding:3px 9px;
  letter-spacing:.5px;
}
.flight-num{text-align:left;letter-spacing:2px;font-weight:600}

/* ---------- 事发时间：冒号固定 ---------- */
.time-box{
  flex:1;display:flex;align-items:center;justify-content:flex-end;gap:2px;
}
.time-in{
  width:46px;border:none;outline:none;background:var(--fill);
  border-radius:8px;padding:6px 0;text-align:center;
  font:inherit;font-size:17px;font-weight:600;color:var(--label);
}
.time-in::placeholder{color:var(--label-3);font-weight:400}
.time-colon{font-size:17px;font-weight:700;color:var(--label-2);padding:0 3px}

/* ---------- 密钥输入：CSS 打码，不用 password 类型 ---------- */
.row-input.masked{
  -webkit-text-security:disc;text-security:disc;
  letter-spacing:1px;
}
.row-input.masked.show{-webkit-text-security:none;text-security:none;letter-spacing:0}

/* ---------- 右上角全屏按钮 ---------- */
.fs-btn{
  position:fixed;z-index:65;
  top:calc(env(safe-area-inset-top) + 10px);right:12px;
  width:34px;height:34px;border:none;border-radius:11px;
  background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:var(--shadow);
  color:var(--blue);font-size:15px;line-height:1;cursor:pointer;
}
.fs-btn:active{transform:scale(.92)}

.privacy-note{
  background:rgba(52,199,89,.09);border-radius:12px;
  padding:10px 12px;margin-top:8px;line-height:1.55;
}
.privacy-note b{color:var(--green)}

/* 展开后的密集网格：一屏放得下，不用滚 */
.type-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
  padding:4px 12px 14px;border-top:.5px solid var(--separator);
}
.type-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1.5px solid transparent;border-radius:13px;
  background:var(--fill);color:var(--label);
  font:inherit;font-size:11.5px;line-height:1.25;text-align:center;
  padding:9px 4px;min-height:60px;cursor:pointer;transition:.15s;
}
.type-item .ti-ico{font-size:19px;line-height:1}
.type-item.on{
  background:rgba(59,130,246,.12);border-color:var(--blue);color:var(--blue);font-weight:600;
}
.type-item:active{transform:scale(.95)}

/* ---------- 航段：两个入口 + 中间一个小飞机 ---------- */
.route-row{gap:6px}
.route-in{
  flex:1;min-width:0;text-align:center;
  background:var(--fill);border-radius:9px;padding:7px 6px;
}
.route-arrow{flex:none;color:var(--blue);font-size:14px}
.route-hint{
  padding:6px 16px 10px;font-size:12.5px;color:var(--label-2);
  border-bottom:.5px solid var(--separator);
}
.route-hint.ok{color:var(--green)}
.route-hint.warn{color:var(--amber)}

/* ---------- 列表行（iOS inset grouped） ---------- */
.list .row{
  display:flex;align-items:center;gap:12px;
  min-height:44px;padding:8px 16px;
  border-bottom:.5px solid var(--separator);
}
.list .row:last-child{border-bottom:none}
/* 不能写死 88px —— 「发送前自动脱敏」这种长标签会被挤成两行。
   改成按内容撑开、不换行。 */
.row-label{flex:0 0 auto;min-width:76px;white-space:nowrap;font-size:17px;color:var(--label)}
.row-input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font:inherit;font-size:17px;color:var(--label);text-align:right;
  padding:6px 0;
}
.row-input::placeholder{color:var(--label-3)}
select.row-input{text-align:right;text-align-last:right;appearance:none}
/* 必须写成 .list .row.row-col —— 只写 .row-col 的话优先级低于 .list .row，
   会被它的 align-items:center 压掉，整行文字就变成居中了。 */
.list .row.row-col{flex-direction:column;align-items:stretch;gap:2px;padding-top:10px;padding-bottom:10px}
.list .row.row-col .row-label{flex:none;margin-bottom:2px;font-size:13px;color:var(--label-2);text-align:left}
.row-input.full{text-align:left;padding:4px 0}

/* iOS 风格开关 */
.switch{
  appearance:none;width:51px;height:31px;border-radius:16px;
  background:var(--fill);position:relative;transition:background .2s;flex:none;
}
.switch:checked{background:var(--green)}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;
  border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);
  transition:transform .2s;
}
.switch:checked::after{transform:translateX(20px)}

/* ---------- 芯片（事件类型 / 润色 / 版本） ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px}
.chip{
  border:none;border-radius:16px;padding:7px 14px;
  background:var(--fill);color:var(--label);
  font:inherit;font-size:15px;cursor:pointer;transition:.15s;
}
.chip.on{background:var(--blue);color:#fff}
.chips-refine{padding:10px 0 0}
.chips-refine .chip{background:var(--card)}

/* ---------- 分段控件：带平滑滑动的选中块 ---------- */
.segmented{
  position:relative;display:flex;padding:3px;
  background:var(--fill);border-radius:14px;
}
/* 这块白底会滑动，不是每个按钮各自变色 */
.seg-thumb{
  position:absolute;top:3px;bottom:3px;left:3px;
  width:calc((100% - 6px) / 3);
  border-radius:11px;background:var(--card);
  box-shadow:0 2px 8px rgba(20,20,40,.10);
  transform:translateX(0);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
}
.segmented button{
  position:relative;z-index:1;
  flex:1 1 0;min-width:0;border:none;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:9px 3px;font:inherit;cursor:pointer;
  color:var(--label-2);transition:color .25s;
}
.segmented button.on{color:var(--blue)}
.seg-name{font-size:15.5px;font-weight:600;line-height:1.2}
/* 固定高度 + 垂直居中：不管小字换不换行，三张卡都一样高、都对齐 */
.seg-hint{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:2.6em;margin-top:3px;white-space:pre-line;
  font-size:10.5px;font-weight:400;line-height:1.25;color:var(--label-3);
}
.segmented button.on .seg-hint{color:var(--blue);opacity:.75}

/* ---------- 时间滚轮 ---------- */
.mini-btn{
  flex:none;border:none;border-radius:11px;
  background:rgba(59,130,246,.10);color:var(--blue);
  font:inherit;font-size:12.5px;padding:4px 10px;margin-left:8px;cursor:pointer;
}
.wheel{
  position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
  height:132px;overflow:hidden;
  border-bottom:.5px solid var(--separator);
  background:linear-gradient(180deg,rgba(120,120,128,.06),transparent 45%,rgba(120,120,128,.06));
}
.wheel-col{
  height:132px;width:72px;overflow-y:auto;
  scroll-snap-type:y mandatory;text-align:center;
  scrollbar-width:none;-ms-overflow-style:none;
}
.wheel-col::-webkit-scrollbar{display:none}
.wheel-col .wi{
  height:44px;line-height:44px;scroll-snap-align:center;
  font-size:21px;color:var(--label-3);transition:color .15s,transform .15s;
}
.wheel-col .wi.on{color:var(--blue);font-weight:700;transform:scale(1.12)}
.wheel-col .wpad{height:44px}
.wheel-colon{font-size:20px;color:var(--label-3);font-weight:600}
.wheel-sel{
  position:absolute;left:10px;right:10px;top:44px;height:44px;
  border-radius:10px;background:rgba(59,130,246,.08);
  pointer-events:none;
}

/* ---------- 文本域 ---------- */
.narrative,.result-text{
  width:100%;border:none;outline:none;resize:vertical;
  background:transparent;color:var(--label);
  font:inherit;font-size:17px;line-height:1.55;
  padding:14px 16px 4px;
}
.narrative::placeholder{color:var(--label-3);line-height:1.6}
.char-count{
  padding:2px 16px 10px;font-size:12px;color:var(--label-3);text-align:right;
}

/* ---------- 提示卡 ---------- */
.tip{padding:14px 16px}
.tip-title{font-size:15px;font-weight:600;margin-bottom:6px}
.tip-body{font-size:15px;color:var(--label-2);line-height:1.6}
.tip-body .dot{display:block}
.tip-body .dot::before{content:"· "}
.tip-foot{margin-top:8px;font-size:13px;color:var(--label-3)}
.tip-amber{border-left:3px solid var(--amber)}
.tip-amber .tip-title{color:var(--amber)}
.tip-red{border-left:3px solid var(--red)}
.tip-red .tip-title{color:var(--red)}
.num-bad{background:rgba(255,59,48,.16);border-radius:4px;padding:0 4px;margin-right:6px;display:inline-block}

/* ---------- 按钮 ---------- */
.btn{
  display:block;width:100%;border:none;border-radius:var(--radius);
  padding:14px;margin-bottom:10px;
  font:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:.15s;
}
.btn:active{transform:scale(.985);opacity:.85}
.btn-primary{background:var(--blue);color:#fff}
.btn-secondary{background:var(--card);color:var(--blue);font-weight:400}
.btn-danger{background:var(--card);color:var(--red);font-weight:400}
.btn[disabled]{opacity:.45;pointer-events:none}
.row-actions{display:flex;gap:10px;margin-top:10px}
.row-actions .btn{margin-bottom:0}
.row-actions + .card{margin-top:12px}
.btn-danger{margin-top:14px}

.link-btn{
  border:none;background:none;color:var(--blue);
  font:inherit;font-size:15px;cursor:pointer;padding:4px;
}
.link-btn.block{display:block;width:100%;text-align:center;padding:10px}

.foot-note{font-size:13px;color:var(--label-2);padding:8px 4px;line-height:1.5}
.foot-note.center{text-align:center;color:var(--label-3)}

/* ---------- 历史 ---------- */
.hist-item{
  display:block;width:100%;text-align:left;border:none;background:none;
  font:inherit;color:var(--label);
  padding:12px 16px;border-bottom:.5px solid var(--separator);cursor:pointer;
}
.hist-item:last-child{border-bottom:none}
.hist-title{font-size:16px;margin-bottom:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hist-meta{font-size:13px;color:var(--label-3)}
.empty{padding:28px 16px;text-align:center;color:var(--label-3);font-size:15px}

/* ---------- 顶部横条（离线提示 / 后台生成进度） ---------- */
.banner{
  position:sticky;top:0;z-index:50;
  padding:calc(env(safe-area-inset-top) + 9px) 14px 9px;
  background:var(--amber);color:#fff;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.banner.err{background:var(--red)}
.banner.ok{background:var(--green)}
.banner.busy{background:var(--blue)}
.banner-btn{
  flex:none;border:1px solid rgba(255,255,255,.55);border-radius:14px;
  background:rgba(255,255,255,.16);color:#fff;
  font:inherit;font-size:13px;padding:3px 12px;cursor:pointer;
}
.banner-btn:active{background:rgba(255,255,255,.32)}
/* 生成中，按钮上转的小圈 */
.btn-spin::after{
  content:"";display:inline-block;width:13px;height:13px;margin-left:8px;
  vertical-align:-2px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:spin .8s linear infinite;
}

/* ---------- 生成中遮罩 ---------- */
.loading-mask{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.34);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.loading-card{
  background:var(--card);border-radius:16px;padding:26px 22px;
  text-align:center;max-width:300px;width:100%;
}
.spinner{
  width:30px;height:30px;margin:0 auto 14px;border-radius:50%;
  border:2.5px solid var(--fill);border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:17px;font-weight:600;margin-bottom:4px}
.loading-sub{font-size:13px;color:var(--label-2);line-height:1.5;margin-bottom:6px}
.loading-elapsed{font-size:12px;color:var(--label-3);margin-bottom:8px;min-height:16px}

/* ---------- 底部弹层 ---------- */
.sheet-mask{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.34);
  display:flex;align-items:flex-end;
}
.sheet{
  background:var(--card);width:100%;max-height:76vh;
  border-radius:14px 14px 0 0;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:.5px solid var(--separator);
  font-size:16px;font-weight:600;
}
.sheet-body{
  margin:0;padding:16px;overflow:auto;flex:1;
  font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--label-2);
}

/* ---------- 诊断 ---------- */
.diag{
  margin:0;padding:14px 16px;font-size:12px;line-height:1.5;
  white-space:pre-wrap;word-break:break-all;color:var(--label-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  max-height:220px;overflow:auto;
}

/* ---------- 生成进度悬浮卡 ---------- */
.progress-card{
  position:fixed;left:12px;right:12px;
  bottom:calc(var(--tabbar-h) + 12px);z-index:70;
  display:flex;align-items:center;gap:11px;
  padding:12px 13px;border-radius:18px;
  background:linear-gradient(120deg,var(--blue),var(--blue-2));
  color:#fff;box-shadow:0 10px 30px rgba(59,130,246,.38);
  animation:pg-in .3s cubic-bezier(.32,.72,0,1);
}
@keyframes pg-in{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.pg-spin{
  flex:none;width:22px;height:22px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .8s linear infinite;
}
.pg-body{flex:1;min-width:0}
.pg-title{font-size:15px;font-weight:700;line-height:1.25}
.pg-sub{font-size:11.5px;opacity:.85;line-height:1.3;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-time{
  flex:none;font-size:26px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-1px;
}
.pg-time span{font-size:11px;font-weight:600;margin-left:1px;opacity:.8}
.pg-cancel{
  flex:none;border:1px solid rgba(255,255,255,.6);border-radius:13px;
  background:rgba(255,255,255,.18);color:#fff;
  font:inherit;font-size:13px;padding:5px 11px;cursor:pointer;
}
.pg-cancel:active{background:rgba(255,255,255,.34)}

/* ---------- 吐司 ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 20px);
  transform:translateX(-50%);z-index:120;
  background:rgba(0,0,0,.82);color:#fff;
  padding:11px 20px;border-radius:20px;font-size:15px;
  max-width:80vw;text-align:center;
}

/* ---------- 底部标签栏 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;height:var(--tabbar-h);
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--separator);
}
.tab{
  flex:1;border:none;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font:inherit;font-size:10px;color:var(--label-3);
}
.tab .tab-ico{font-size:19px;line-height:1}
.tab.active{color:var(--blue)}