/* ===========================================================
   投诉 / 意见反馈浮层
   -----------------------------------------------------------
   和 mobile-nav.css 分开放：那个管布局，这个管一个独立组件。
   桌面端：右下角一个圆形按钮。
   手机端：藏在底部导航「联系」按住/点开？不 —— 底部导航已经
   占满五个位置，这里单独放一个悬浮按钮，位置在导航正上方
   右侧，和心愿单按钮错开（心愿单在右侧 16px，这个往上让）。
   =========================================================== */

/* ---------- 悬浮按钮 ---------- */
/* z-index 必须高过 .nav/.main/footer —— style.css 里这几个是
   position:relative;z-index:1，会盖住同层级的 fixed 元素。
   .announce / .wish-fab 用的是 80~82，这里取 95 排它们上面。

   放右下、压在心愿单按钮上方一点：那一带通常是页面空白区，
   比放中间安全。 */
.fb-fab{
  position:fixed;right:24px;bottom:84px;z-index:95;
  display:flex;align-items:center;gap:8px;
  padding:11px 18px;border:1px solid var(--line);
  background:rgba(18,22,30,.94);color:var(--muted);
  border-radius:99px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;backdrop-filter:blur(12px);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
  transition:transform .2s,border-color .2s,color .2s;
}
.fb-fab:hover{border-color:var(--line-2);color:var(--text);transform:translateY(-2px)}
.fb-fab .fb-dot{
  width:7px;height:7px;border-radius:50%;background:#22d3ee;
  box-shadow:0 0 0 3px rgba(34,211,238,.18);
}
/* 手机端没有文字标签，用这个图标代替圆点 */
.fb-fab .fb-icon{display:none;line-height:1}

/* ---------- 弹层 ---------- */
.fb-mask{
  position:fixed;inset:0;z-index:210;background:rgba(4,7,12,.8);
  display:flex;align-items:center;justify-content:center;padding:24px;
  backdrop-filter:blur(4px);
}
.fb-box{
  width:min(520px,100%);max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  display:flex;flex-direction:column;overflow:hidden;
  background:#0f141c;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 40px 90px -30px #000;
}
.fb-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.fb-head h3{font-size:16px;font-weight:700}
.fb-head p{font-size:12px;color:var(--muted);margin-top:3px}
.fb-x{background:none;border:0;color:var(--muted);font-size:22px;
  cursor:pointer;line-height:1;padding:0 4px}
.fb-x:hover{color:var(--text)}

.fb-body{padding:18px 20px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:15px}
.fb-row label{
  display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px;
}
.fb-row label em{color:#ff6b6b;font-style:normal;margin-left:2px}

/* 投诉类型：一排小胶囊，单选 */
.fb-types{display:flex;flex-wrap:wrap;gap:8px}
.fb-type{
  padding:7px 14px;border-radius:99px;font-size:12.5px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--muted);font-family:inherit;transition:.18s;
}
.fb-type:hover{border-color:var(--line-2);color:var(--text)}
.fb-type.on{
  border-color:rgba(124,92,255,.6);background:rgba(124,92,255,.18);
  color:var(--text);font-weight:600;
}

.fb-body textarea,
.fb-body input{
  width:100%;background:#0b1017;border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;color:var(--text);
  font-size:14px;font-family:inherit;outline:none;line-height:1.7;
}
.fb-body textarea{height:112px;resize:vertical;min-height:80px}
.fb-body textarea:focus,
.fb-body input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,92,255,.15)}
.fb-count{text-align:right;font-size:11.5px;color:#5f6b7d;margin-top:5px}
.fb-count.over{color:#ff6b6b}

/* 满意度：五星 */
.fb-stars{display:flex;gap:6px}
.fb-star{
  background:none;border:0;font-size:24px;line-height:1;cursor:pointer;
  color:#3b4a63;padding:2px 4px;transition:color .15s,transform .15s;
}
.fb-star:hover{transform:scale(1.12)}
.fb-star.on{color:#f5c542}

.fb-foot{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;border-top:1px solid var(--line);
}
.fb-hint{flex:1;font-size:11.5px;color:#5f6b7d;line-height:1.6}
.fb-err{font-size:12.5px;color:#ff8080}

.fb-ok{padding:34px 24px;text-align:center}
.fb-ok .fb-ok-i{font-size:40px;line-height:1;margin-bottom:14px}
.fb-ok h3{font-size:16px;font-weight:700;margin-bottom:8px}
.fb-ok p{font-size:13px;color:var(--muted);line-height:1.8}

@media (max-width:900px){
  /* 手机：贴着底部导航正上方，右侧贴边。
     为什么不抬到 136px：那样会悬在列表/标签中间，压住可点的内容，
     而且滚到任何位置都可能正好挡住东西。贴着导航走，它只占
     页面最底部一条，和导航形成一组，视觉上也更像一个按钮区。

     位置：导航高约 70px，按钮 44px，留 8px 缝 → bottom 78px。 */
  .fb-fab{
    right:12px;
    bottom:calc(78px + env(safe-area-inset-bottom,0px));
    /* 窄屏只留图标，所以这里必须给足宽高做成正圆，
       否则文字标签一藏，按钮就缩成一个看不见的小点 */
    width:44px;height:44px;
    padding:0;
    justify-content:center;
    gap:0;
    border-radius:50%;
    font-size:18px;
    /* 贴边后不需要大投影，改成细描边更轻 */
    border:1px solid var(--line-2);
    background:rgba(18,22,30,.96);
    box-shadow:0 6px 18px -8px rgba(0,0,0,.9);
  }
  .fb-fab span.fb-label{display:none}
  .fb-fab .fb-dot{display:none}           /* 圆点换成图标本身 */
  .fb-fab .fb-icon{display:block}

  /* 弹层从底部升起，像个抽屉 */
  .fb-mask{align-items:flex-end;padding:0}
  .fb-box{
    width:100%;max-height:88vh;max-height:88dvh;
    border-radius:18px 18px 0 0;
    border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  /* 弹层打开时把按钮藏掉，不然它会浮在抽屉上面 */
  .fb-mask:not([hidden]) ~ .fb-fab,
  body.fb-open .fb-fab{display:none}
}