/* ==========================================================================
   悬浮 AI 答疑入口  ——  public/html/css/consult.css
   --------------------------------------------------------------------------
   配合 app/index/view/public/consult.html 使用。

   v1.2：**去掉展开面板**，只剩一枚常驻胶囊，点一下直接走免登入口。
         少一层面板 = 少一种「点了没反应」的可能，维护面也小一半。

   v1.3：位置从「底部居中」改为「底部最左侧」（用户拍板）。
         .frsign 在右下角，靠左后天然错开，旧的右侧让位内边距已删。

   v2.0：新增**跳转中间层**（.ptc-veil*）。点胶囊不再直接离开本站，改由
         public/html/js/consult.js 在本页盖一层遮罩弹窗等待免登结果 ——
         成功才跳，失败在弹层里报错并可重试。原整页过渡页（sso/jump.html）
         保留为「脚本未加载」时的降级路径。
         视觉全部对齐站点既有的报名弹窗（.modal-overlay / .modal-container）：
         同一套遮罩色 rgba(0,0,0,.5)、同一档圆角 1.25rem、同一组金色阴影
         与主色 #AD7E46，不引入第二套设计语言。

   v2.1：中间层从「一张卡切状态」改成「两张卡接力」。失败时第 1 层（跳转中）
         退场、第 2 层（失败报告）入场 —— 两张卡是两个独立的 DOM 节点，
         所以「还在等」和「有结果了」在观感上是两个不同的弹窗。
         ★ 但遮罩只有一张，且全程不消失：若两层各带一张遮罩，交接那一帧
         会既没有遮罩也没有卡片，页面重新可点，正好破坏「等待期间禁止操作」。
         退场时长 .14s 写死在这里，与 consult.js 的 OUT_MS 常量对齐（改要一起改）。

   · 类名前缀 ptc-（PTMA Consult）。已核对站点 public.css / style.css，
     无同名或前缀冲撞的类。
   · 配色沿用站点现有规范：主色 #AD7E46（与 .back-to-top 的 #b88d52 同族）。
   · 胶囊层级取 1500：高于站点 header(1000)，低于移动端菜单(3000)。
   · 中间层层级取 2147483647（32 位上限）：它必须压住一切，包括 z-index
     写成 9.9e15 的 .frsign（超出上限会被浏览器钳到极大值，只能靠
     「同层级时后出现者在上」取胜 —— consult.js 会先把它挪到 body 末尾）。
   ========================================================================== */

.ptc-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: flex;
    justify-content: flex-start;   /* 靠左：紧贴视口最左侧，仅留 1rem 呼吸边距 */
    padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    /* 关键：整层不吃鼠标事件，只让里面的胶囊可点，
       否则这条铺满屏幕底部的容器会挡住页面自身的点击。 */
    pointer-events: none;
}

/* ！！！这两行看着啰嗦，但请勿删 ！！！
   模板里给 #ptcDock 写了内联 `style="display:none"`，这里用 !important 把它揭开。
   作用等同于「样式表加载成功自检」：CSS 没加载成功（漏传、被 CDN 拦、被防火墙吞）
   时内联的 display:none 生效 → 整块不显示，页面上不会挂一条没样式的裸内容。
   作者样式表里的 !important 声明优先级高于内联样式，这是规范行为，不是 hack 巧合。
   如果哪天把 !important 去掉，组件会「永远不显示」——已加断言钉住（render_consult.php）。 */
.ptc-dock {
    display: flex !important;
}

.ptc-dock > * {
    pointer-events: auto;
    box-sizing: border-box;
}

/* 站点右下角已有「固定登录」浮层 .frsign（120×138，right:2rem bottom:2rem）。
   胶囊靠左之后两者一个在左一个在右，天然互不相扰，
   旧版为避开它预留的右侧内边距（桌面 11rem / 窄屏 9.5rem）已随之移除。 */

/* -------------------------------------------------------------------------
   胶囊（唯一形态）
   ------------------------------------------------------------------------- */

.ptc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    height: 52px;
    padding: 0 18px;
    border-radius: 999px;
    background: #AD7E46;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    line-height: 1;
    text-decoration: none;          /* 它是个 <a>，去掉下划线 */
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(173, 126, 70, .34);
    -webkit-tap-highlight-color: transparent;
    animation: ptc-rise .22s ease-out;
    transition: transform .18s, box-shadow .18s, background .18s;
}

/* <a> 的默认样式在部分浏览器里会覆盖 color，显式钉一遍 */
.ptc-pill:link,
.ptc-pill:visited {
    color: #fff;
}

.ptc-pill:hover {
    background: #96703c;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(173, 126, 70, .42);
}

.ptc-pill:active {
    transform: translateY(0);
}

.ptc-pill:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@keyframes ptc-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.ptc-ic {
    flex: 0 0 20px;
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.ptc-ic svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ptc-pill-t {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ptc-arrow {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    opacity: .85;
}

/* -------------------------------------------------------------------------
   窄屏
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .ptc-pill { height: 48px; padding: 0 14px; font-size: 14px; }
}

/* 尊重系统的「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    .ptc-pill { animation: none; }
    .ptc-pill:hover { transform: none; }
}

/* ==========================================================================
   跳转中间层（遮罩 + 两层弹窗）
   --------------------------------------------------------------------------
   结构在 app/index/view/public/consult.html 末尾，行为在 public/html/js/consult.js。

   · .ptc-veil 的 display **不在这里控制** —— 模板里写死内联 display:none，
     脚本才把它改成 flex。这样「脚本没加载」时遮罩永不出现，胶囊退回普通链接；
     反过来若在这里写 display，一旦脚本挂掉就会留下一个关不掉的遮罩。
   · 遮罩里放两张卡：.ptc-veil-wait（跳转中）与 .ptc-veil-err（失败报告）。
     **同一时刻只有一张在台上**，靠 .is-on / .is-off 两个类切换：
       无类      → display:none（不在台上，也不参与无障碍树）
       .is-on    → 入场动画
       .is-off   → 退场动画，播完停在终态（opacity:0），等脚本在 OUT_MS 后摘掉
   · 遮罩色 / 圆角 / 阴影 / 主色全部照抄站点既有报名弹窗（.modal-overlay、
     .modal-container、.submit-btn），不引入第二套设计语言。
   ========================================================================== */

.ptc-veil {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483647;                     /* 32 位上限：必须压住一切，含 .frsign */
    background: rgba(0, 0, 0, .5);           /* = 站点 .modal-overlay */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overscroll-behavior: contain;            /* 移动端：滚动手势不外溢到背后的页面 */
    -webkit-tap-highlight-color: transparent;
}

.ptc-veil-box {
    width: 100%;
    max-width: 380px;
    padding: 36px 28px 32px;
    background: #fff;
    border-radius: 1.25rem;                                          /* = .modal-container */
    box-shadow: 0 0.1875rem 1rem 0.0625rem rgba(173, 126, 70, .16);  /* = .modal-container */
    box-sizing: border-box;
    text-align: center;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    outline: none;                           /* 它是 tabindex=-1 的聚焦容器，不该有焦点框 */
    animation: ptc-veil-in .2s ease-out;
}

@keyframes ptc-veil-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* --- 两张卡的上下台（接力） --- */

/* 不在台上：完全不渲染，也就不进无障碍树、点不到、Tab 到不了 */
.ptc-veil-card { display: none; }

.ptc-veil-card.is-on {
    display: block;
    animation: ptc-veil-in .18s ease-out;
}

/* 退场。★ 时长必须与 consult.js 的 OUT_MS 一致（改要一起改），
   否则新卡会在旧卡还没退干净时叠上来。
   forwards：停在终态，不然动画一结束旧卡会「闪回来」。 */
.ptc-veil-card.is-off {
    display: block;
    animation: ptc-veil-out .14s ease-in forwards;
}

@keyframes ptc-veil-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-6px) scale(.98); }
}

/* 失败报告卡比等待卡略宽：错误说明 + 建议是整段的，宽一点少折行 */
.ptc-veil-err { max-width: 420px; }

/* --- 等待态：转圈 + 进度条 --- */

.ptc-veil-spin {
    width: 34px;
    height: 34px;
    margin: 0 auto 20px;
    border: 3px solid rgba(173, 126, 70, .18);
    border-top-color: #AD7E46;
    border-radius: 50%;
    animation: ptc-veil-sp .8s linear infinite;
}

@keyframes ptc-veil-sp {
    to { transform: rotate(360deg); }
}

.ptc-veil-track {
    height: 3px;
    margin-top: 22px;
    background: #F2EAE1;
    border-radius: 2px;
    overflow: hidden;
}

.ptc-veil-track > i {
    display: block;
    height: 100%;
    width: 38%;
    background: #AD7E46;
    border-radius: 2px;
    animation: ptc-veil-mv 1.4s ease-in-out infinite;
}

@keyframes ptc-veil-mv {
    0%   { margin-left: -38%; }
    100% { margin-left: 100%; }
}

/* --- 失败报告卡：图标 + 按钮 --- */

.ptc-veil-ico {
    display: flex;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(173, 126, 70, .10);
    color: #AD7E46;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
}

.ptc-veil-acts {
    display: flex;
    margin-top: 24px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- 文案 --- */

.ptc-veil-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 500;                        /* 站点 .title 用的也是 500 */
    color: #1E2B3B;                          /* = 站点标题色 */
    line-height: 1.5;
}

.ptc-veil-sub {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.7;
}

/* 失败报告卡里的「建议」：做成引用块，跟正文拉开一个层次，
   让这张卡读起来像一份结果说明，而不是又一句提示。 */
.ptc-veil-err .ptc-veil-hint {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: #FBF7F2;
    border-left: 3px solid #AD7E46;
    border-radius: .25rem;
    text-align: left;
    font-size: 13px;
    color: #8C8177;
    line-height: 1.7;
}

/* --- 按钮：实心主色 + 描边次按钮，圆角对齐站点输入框/按钮的 4px --- */

.ptc-veil-btn {
    min-width: 116px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #AD7E46;
    border-radius: 0.25rem;
    background: #fff;
    color: #AD7E46;
    font-size: 15px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}

.ptc-veil-btn:hover {
    background: rgba(173, 126, 70, .08);
}

.ptc-veil-btn:focus-visible {
    outline: 2px solid #AD7E46;
    outline-offset: 2px;
}

.ptc-veil-btn-p {
    background: #AD7E46;
    border-color: #AD7E46;
    color: #fff;
}

.ptc-veil-btn-p:hover {
    background: #96703c;
    border-color: #96703c;
}

/* --- 窄屏 --- */

@media (max-width: 480px) {
    .ptc-veil-box { max-width: 100%; padding: 30px 20px 26px; }
    .ptc-veil-title { font-size: 17px; }
    .ptc-veil-btn { min-width: 100px; }
}

/* 「减少动态效果」偏好：入场动画和进度条去掉。
   转圈**保留** —— 它是「还在工作」的唯一指示，停掉会被误读成卡死。
   ★ 两张卡的上下台也一并停掉：选择器比上面的 .ptc-veil-box 更特异
   （两个类 > 一个类），必须在这里显式覆盖，否则会留下一个「只在
   减少动效模式下才播」的退场动画。consult.js 那边同时会走瞬时换卡的分支。 */
@media (prefers-reduced-motion: reduce) {
    .ptc-veil-box { animation: none; }
    .ptc-veil-card.is-on,
    .ptc-veil-card.is-off { animation: none; }
    .ptc-veil-track { display: none; }
}