/* =================================================================
 *  45 Chat (6868chat.co) 官网首页 1:1 视觉复刻 - 主样式表
 *  ----------------------------------------------------------------
 *  本文件用于 6868chat-clone.html。
 *  组织顺序（自上而下）：
 *    1. 设计令牌（CSS 变量）
 *    2. 基础重置
 *    3. 全屏背景
 *    4. 顶部导航
 *    5. Hero（左右双列）
 *    6. 下载按钮
 *    7. 客服悬浮 / 弹层
 *    8. 页脚
 *    9. 图片占位（img-fallback）
 *   10. 响应式（按断点就近放）
 *  ----------------------------------------------------------------
 *  说明：
 *    - 复刻深度：视觉 + 模拟交互（splash 已跳过，本文件不含 splash 样式）。
 *    - 主色：#178AFF（与原站完全一致）。
 * =================================================================
 */

/* ============================================================
 * 1. 设计令牌
 * ============================================================ */
:root{
  --c-bg:           #ffffff;
  --c-fg:           #414141;            /* hero 标题字色 */
  --c-fg-soft:      #a0a0a0;            /* 描述字色 */
  --c-fg-strong:    #1f1f1f;
  --c-primary:      #178AFF;            /* 主题蓝（按钮、icon） */
  --c-primary-hi:   #0f6fd1;
  --c-line:         rgba(0,0,0,.08);

  --ff-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
             "Source Han Sans SC", "Noto Sans CJK SC",
             "WenQuanYi Micro Hei", sans-serif;

  --topbar-h: 62px;
  --container-x: 64px;
  --ease:   cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
 * 2. 基础重置
 * ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--ff-body);
  color:var(--c-fg);
  background:var(--c-bg);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;                  /* 单屏布局：禁止滚动 */
  position:relative;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
button{font-family:inherit;cursor:pointer;border:none;background:none;padding:0;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
strong,b{font-weight:700}

/* ============================================================
 * 3. 全屏背景（fixed 图层，位于内容之下）
 *    - 优先 webp，失败降级 png（写在 .bg-full 上）
 *    - bg-size: cover，居中
 * ============================================================ */
.bg-full{
  position:fixed;inset:0;
  z-index:0;
  pointer-events:none;
  background-color:#f3f8ff;             /* 兜底色，避免图片加载慢时空白 */
  background-image:url("/static/images/bg.webp");
  background-image:
    -webkit-image-set(url("/static/images/bg.webp") 1x type("image/webp")),
    image-set(url("/static/images/bg.webp") 1x type("image/webp"));
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* JS 探测到 webp 加载失败时，加 .bg-fail 类切到 png */
.bg-full.bg-fail{
  background-image:url("/static/images/bg.png");
}

/* ============================================================
 * 4. 顶部导航
 * ============================================================ */
.topbar{
  position:relative;
  z-index:2;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--container-x);
}
.topbar-brand{
  display:flex;align-items:center;gap:10px;
  color:var(--c-primary);
  font-weight:500;
}
.topbar-logo{width:38px;height:38px;border-radius:50%;object-fit:cover}
.topbar-name{
  font-size:18px;
  color:var(--c-primary);
  letter-spacing:.5px;
}
.topbar-lang{
  display:flex;align-items:center;gap:6px;
  font-size:13px;
  color:var(--c-fg-soft);
  padding:6px 12px;
  border-radius:999px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.topbar-lang:hover{background:rgba(23,138,255,.08);color:var(--c-primary)}
.topbar-lang-icon{width:13px;height:13px;display:inline-block}

/* 顶部导航 - 响应式 */
@media (max-width:640px){
  .topbar{padding:0 16px}
  .topbar-name{font-size:16px}
}

/* ============================================================
 * 5. Hero（左右双列）
 *    - main 高度 = 视口 - 顶部 - 页脚
 *    - 左列：rebrand + title + desc + ctas
 *    - 右列：笔记本展示
 * ============================================================ */
.main{
  position:relative;
  z-index:1;
  height:calc(100vh - var(--topbar-h) - 70px);
  min-height:480px;
  display:flex;
  align-items:center;
  padding:0 var(--container-x);
  gap:24px;
}
.hero-text{
  flex:1;min-width:0;max-width:560px;
  display:flex;flex-direction:column;
  padding-left:24px;
}
.hero-rebrand{
  margin-bottom:8px;
}
.hero-rebrand img{
  width:282px;height:100px;object-fit:contain;display:block;
}
.hero-title{
  font-size:27.2px;
  font-weight:500;
  color:var(--c-fg);
  line-height:32px;
  margin:0 0 14px;
  letter-spacing:.5px;
}
.hero-desc{
  font-size:17.6px;
  color:var(--c-fg-soft);
  line-height:26.4px;
  margin:0 0 32px;
  max-width:448px;
}
.hero-ctas{
  display:flex;gap:16px;flex-wrap:wrap;
}
.hero-visual{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:center;
}
.hero-computer{
  width:auto;height:75vh;max-height:520px;
  object-fit:contain;
}

/* Hero - 响应式 */
@media (max-width:1100px){
  .main{padding:0 32px;gap:16px}
  .hero-rebrand img{width:240px;height:auto}
  .hero-title{font-size:24px;line-height:30px}
  .hero-desc{font-size:16px;line-height:24px}
  .hero-computer{height:60vh}
}
@media (max-width:860px){
  .main{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    height:auto;
    min-height:calc(100vh - var(--topbar-h) - 70px);
    padding:16px 16px 24px;
  }
  .hero-text{max-width:100%;padding-left:0;align-items:center}
  .hero-rebrand{display:flex;justify-content:center}
  .hero-rebrand img{width:200px;height:auto}
  .hero-ctas{justify-content:center}
}
@media (max-width:480px){
  .hero-title{font-size:20px;line-height:26px}
  .hero-desc{font-size:14px;line-height:22px;margin-bottom:24px}
  .hero-rebrand img{width:170px;height:auto}
}

/* ============================================================
 * 6. 下载按钮
 *    - 160 x 48，圆角 32px
 *    - bg #178AFF，文字白色
 *    - hover 加深 + 轻微上抬
 * ============================================================ */
.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;
  min-width:160px;
  padding:0 16px;
  background:var(--c-primary);
  color:#fff;
  border-radius:32px;
  font-size:16px;
  font-weight:500;
  letter-spacing:.5px;
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
  user-select:none;
  white-space:nowrap;
}
.btn-pill:hover{
  background:var(--c-primary-hi);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(23,138,255,.32);
  color:#fff;
}
.btn-pill:active{transform:translateY(0);box-shadow:none}
.btn-pill .btn-icon{
  width:28px;height:28px;
  margin-right:8px;
  display:inline-block;
}
@media (max-width:480px){
  .btn-pill{min-width:140px;height:44px;font-size:15px}
}

/* ============================================================
 * 7. 客服悬浮 / 弹层
 *    - 悬浮按钮 fixed 右下 48x48，z-50
 *    - 点击后弹层 + 遮罩
 *    - 弹层与遮罩默认 hidden
 * ============================================================ */
.cs-fab{
  position:fixed;
  right:24px;
  bottom:40px;
  width:48px;height:48px;
  z-index:50;
  border-radius:50%;
  transition:transform .2s var(--ease);
  cursor:pointer;
}
.cs-fab:hover{transform:scale(1.06)}
.cs-fab img{width:48px;height:48px}

.cs-mask{
  position:fixed;inset:0;
  z-index:49;
  background:rgba(0,0,0,.5);
}
.cs-panel{
  position:fixed;
  right:24px;
  bottom:100px;
  width:320px;
  max-width:calc(100vw - 48px);
  z-index:51;
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  overflow:hidden;
  animation:csIn .25s var(--ease);
}
@keyframes csIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:none}
}
.cs-panel[hidden],
.cs-mask[hidden]{display:none}
.cs-close{
  position:absolute;
  top:-6px;right:-6px;
  width:32px;height:32px;
  z-index:2;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:#666;
  transition:transform .2s var(--ease),color .2s var(--ease);
}
.cs-close:hover{transform:scale(1.08);color:#178AFF}
.cs-close svg{display:block}
.cs-panel-body{
  padding:24px 22px 20px;
  display:flex;flex-direction:column;gap:12px;
}
.cs-panel-title{
  font-size:18px;
  font-weight:600;
  color:var(--c-fg-strong);
}
.cs-panel-desc{
  font-size:13px;
  color:var(--c-fg-soft);
  line-height:1.6;
}
.cs-panel-btn{
  align-self:flex-start;
  margin-top:6px;
  height:38px;padding:0 20px;
  background:var(--c-primary);
  color:#fff;
  border-radius:20px;
  font-size:14px;
  font-weight:500;
  transition:background .2s var(--ease);
}
.cs-panel-btn:hover{background:var(--c-primary-hi)}

/* 客服 - 响应式 */
@media (max-width:480px){
  .cs-fab{right:16px;bottom:16px;width:40px;height:40px}
  .cs-fab img{width:40px;height:40px}
  .cs-panel{right:12px;left:12px;width:auto;bottom:72px}
}

/* ============================================================
 * 8. 页脚
 * ============================================================ */
.footer{
  position:absolute;left:0;right:0;bottom:0;
  z-index:2;
  padding:18px var(--container-x);
  font-size:13px;
  color:var(--c-fg-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.footer-name{color:var(--c-primary);font-weight:500;margin-right:4px}
.footer-sep{margin:0 8px;color:rgba(0,0,0,.18)}
.footer-link{color:var(--c-fg-soft)}
.footer-link:hover{color:var(--c-primary)}
.footer-copy{color:rgba(0,0,0,.35);font-size:12px}

@media (max-width:640px){
  .footer{padding:14px 16px;font-size:12px}
  .footer-sep{margin:0 4px}
}

/* ============================================================
 * 9. 图片占位（img-fallback）
 *    - 当 onerror 触发时，加 .img-fallback 改为灰色占位
 * ============================================================ */
.img-fallback{
  background:linear-gradient(135deg,#e6eefb,#cfdcf2) !important;
  color:#7a8a9c !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:500;
  border-radius:6px;
}
.img-fallback[alt]:not([alt=""])::after{
  content:attr(alt);
  padding:0 4px;
  text-align:center;
  line-height:1.1;
}

/* ============================================================
 * 10. 全局可访问性
 * ============================================================ */
:focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:2px;
  border-radius:4px;
}

/* ============================================================
 * 11. 页脚触发器（重置 button 默认样式，保留 .footer-link 外观）
 * ============================================================ */
.footer-trigger{
  background:transparent;
  border:0;
  padding:0;
  font:inherit;
  cursor:pointer;
  color:var(--c-fg-soft);
  transition:color .2s var(--ease);
}
.footer-trigger:hover,
.footer-trigger:focus-visible{color:var(--c-primary)}

/* ============================================================
 * 12. 模态弹层（复刻 ant-modal）
 *    - 关于我们：800px 宽，居中
 *    - 隐私政策：750px 宽，居中，内容超出可滚动
 * 遮罩 fixed inset:0 白雾 50%，弹层 fixed 居中
 * ============================================================ */
/* 显式重置 [hidden]，避免被 .modal/.modal-mask 的 display:flex 覆盖 */
.modal[hidden],
.modal-mask[hidden]{display:none !important}

.modal-mask{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.45);
  animation:modal-mask-in .25s var(--ease);
}
@keyframes modal-mask-in{
  from{opacity:0}
  to{opacity:1}
}

.modal{
  position:fixed;
  z-index:1001;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:32px;
  box-shadow:
    0 6px 16px rgba(0,0,0,.08),
    0 9px 28px rgba(0,0,0,.12),
    0 12px 40px rgba(0,0,0,.16);
  padding:24px;
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 32px);
  display:flex;
  flex-direction:column;
  animation:modal-in .3s var(--ease);
}
@keyframes modal-in{
  from{opacity:0;transform:translate(-50%,-46%) scale(.96)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* 关于我们：800 宽 + 短内容 */
.modal-about{
  width:800px;
}
/* 隐私政策：750 宽 + 长内容（max-height 限制） */
.modal-privacy{
  width:750px;
  max-height:calc(100vh - 64px);
}

.modal-content{
  display:flex;
  flex-direction:column;
  min-height:0;
}

.modal-title{
  font-size:40px;
  font-weight:700;
  color:rgba(0,0,0,.88);
  line-height:1.57;       /* 62.86/40 ≈ 1.5714 */
  margin:0 0 16px;
  padding-right:44px;     /* 给关闭按钮留位 */
}

/* 弹层正文 */
.modal-body{
  font-size:16px;
  font-weight:400;
  color:rgb(120,120,120);
  line-height:1.7;        /* 27.2/16 = 1.7 */
}
.modal-body p{margin:0}
.modal-body p + p{margin-top:14px}

/* 隐私政策正文：可滚动 */
.modal-body-scroll{
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:8px;      /* 滚动条与文字间距 */
  margin-right:-8px;      /* 视觉对齐到内容线 */
  /* 美化滚动条 */
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.18) transparent;
}
.modal-body-scroll::-webkit-scrollbar{width:6px}
.modal-body-scroll::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.18);
  border-radius:3px;
}
.modal-body-scroll::-webkit-scrollbar-track{background:transparent}

/* 隐私政策小标题 */
.modal-h3{
  font-size:16px;
  font-weight:700;
  color:rgba(0,0,0,.88);
  line-height:1.7;
  margin:16px 0 0;
}
.modal-h3:first-child{margin-top:0}

/* 隐私政策末尾"用户协议"链接行 */
.modal-extra{margin-top:18px !important}
.modal-link{
  color:#1890FF;          /* antd 蓝，与原站一致 */
  text-decoration:none;
  transition:color .2s var(--ease);
}
.modal-link:hover{color:#0f6fd1;text-decoration:underline}

/* 关闭按钮：44x44 圆形，右上角 -22 偏移（与 antd 一致） */
.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:transparent;
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(0,0,0,.45);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.modal-close:hover,
.modal-close:focus-visible{
  background:rgba(0,0,0,.05);
  color:rgba(0,0,0,.75);
}
.modal-close svg{display:block}

/* js 关闭时淡出（用 .is-leaving 标记，与 [hidden] 配合避免抢焦点） */
.modal.is-leaving,
.modal-mask.is-leaving{animation:modal-out .2s var(--ease) forwards}
@keyframes modal-out{
  to{opacity:0;transform:translate(-50%,-46%) scale(.96)}
}

/* 响应式：小屏弹层适配 */
@media (max-width:860px){
  .modal{width:calc(100vw - 32px) !important;max-width:calc(100vw - 32px);border-radius:24px;padding:20px}
  .modal-title{font-size:28px;line-height:1.4;padding-right:36px}
  .modal-body,.modal-h3{font-size:15px}
  .modal-close{width:36px;height:36px;top:12px;right:12px}
  .modal-close svg{width:18px;height:18px}
}
@media (max-width:480px){
  .modal{border-radius:20px;padding:16px}
  .modal-title{font-size:24px}
  .modal-body,.modal-h3{font-size:14px;line-height:1.65}
  .modal-close{width:32px;height:32px}
  .modal-close svg{width:16px;height:16px}
}