/* ==========================================================================
   右下角询价浮层（.ab_message）· 视觉重做
   --------------------------------------------------------------------------
   结构在 template/dafeult/foot.html 里，JS 在 skin/js/guestbook.js 里。
   guestbook.css 的那一套是原主题的：36px 纯色条 + 顶到天的小方块图标 +
   5 个只有 placeholder 的输入框 + 一个 f08519 的方块按钮，和现在整站
   （blog / case / download / faq / contact）的白卡 + 描边输入框 + 胶囊按钮
   完全不是一套。

   这里只覆盖样式，JS 与表单字段名（name / WhatsApp / email / web / content）
   一律不动 —— PbootCMS 的 MessageController 按后台「表单字段」定义取 POST，
   改名会导致留言不入库。

   视觉对齐 contact.css：
     卡面      白底 + 1px #eceef1 + 16px 圆角 + 大范围低透明度投影
     主色      #f08519 → #e0700c 渐变（与 .ct-submit 同一组值）
     输入框    42px 高 / 9px 圆角 / 1px #e3e6ea / 聚焦橙色 3px 光晕
     正文      13.5px，弱化文字 #6b7178

   位置：贴住视口底边，只圆上面两个角，展开时像抽屉一样向上长。
   右边距 18px，与样式表里 #ab-mkf（右侧 WhatsApp / E-Mail / Wchat 竖栏）
   的 right:18px 对齐，两条浮层共用同一条右基准线。

   原来这里写的是 right:104px —— 那是为了躲开第三方在线客服（Salesmartly）
   注入的橙色圆形按钮。该按钮的挂件脚本已从 template/dafeult/head.html 删除，
   躲让随之取消，浮层回到右侧 18px。

   与 #ab-mkf 的叠压关系：竖栏 right 18px / 宽 74px（占 18–92px）、
   垂直居中；抽屉展开后整块是白底不透明卡片，会把竖栏完整盖住
   （z-index 2147483600 vs 9999），不会出现被切掉半个图标的情况。
   收起时只剩 50px 高的橙色条贴在底边，与竖栏不重叠。

   ⚠ 如果以后还想让两者同时可见，把下面的 right 改回 96px
   （竖栏左边缘 92px 再留 4px 缝），或改 #ab-mkf 的定位。
   ========================================================================== */

.ab_message{
  right:18px;
  bottom:0;
  width:344px;
  max-width:calc(100vw - 36px);
  z-index:2147483600;
  font-family:inherit;
  line-height:normal;
  color:#3c4248;
  -webkit-font-smoothing:antialiased;
}

/* --------------------------------------------------------------------------
   1. 折叠条：图标 + 标题/副标题 + 箭头
   -------------------------------------------------------------------------- */
.ab_message .message-header{
  display:flex;align-items:center;gap:11px;
  height:50px;padding:0 12px 0 11px;
  overflow:visible;line-height:1.2;
  color:#fff;cursor:pointer;
  background:linear-gradient(90deg,#f08519 0%,#e0700c 100%);
  border-radius:16px 16px 0 0;
  box-shadow:0 -8px 22px -20px rgba(240,133,25,.85),0 -1px 0 rgba(255,255,255,.14) inset;
  transition:box-shadow .25s ease,filter .25s ease;
}
.ab_message .message-header:hover{
  filter:brightness(1.04);
  box-shadow:0 -12px 26px -20px rgba(240,133,25,.9),0 -1px 0 rgba(255,255,255,.14) inset;
}
.ab_message .message-header:focus-visible{
  outline:2px solid #fff;outline-offset:-4px;
}

/* 图标底托：半透明白，比原来那块 rgba(0,0,0,.12) 的深色方块干净 */
.ab_message .message-header .label{
  float:none;flex:none;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;
  background:rgba(255,255,255,.18);
  border-radius:10px;
}
.ab_message .message-header .label svg{
  display:block;width:17px;height:17px;
  fill:none;stroke:#fff;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

.ab_message .message-header .ab-htxt{
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  min-width:0;flex:1;
}
.ab_message .message-header b{
  margin:0;
  font-size:14px;font-weight:700;line-height:1.25;
  letter-spacing:.01em;white-space:nowrap;
}
.ab_message .message-header .ab-hsub{
  font-style:normal;
  font-size:10.5px;font-weight:500;line-height:1.3;
  color:rgba(255,255,255,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 箭头：用 SVG 自己转，不再依赖 font-awesome 的 fa-angle-up/down 换字 */
.ab_message .message-header .arrow-toggle{
  float:none;flex:none;
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;opacity:1;
}
.ab_message .message-header .arrow-toggle svg{
  display:block;width:14px;height:14px;
  fill:none;stroke:#fff;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .28s ease;
}
.ab_message.ab_message-toggle .message-header .arrow-toggle svg{
  transform:rotate(180deg);
}

/* --------------------------------------------------------------------------
   2. 展开面板
   -------------------------------------------------------------------------- */
.ab_message .message-form{
  padding:16px 16px 18px;
  background:#fff;
  border:1px solid #eceef1;border-top:0;border-bottom:0;
  border-radius:0;
  box-shadow:0 -18px 44px -26px rgba(19,20,21,.45);
  max-height:calc(100vh - 70px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.ab_message .message-form::-webkit-scrollbar{width:6px}
.ab_message .message-form::-webkit-scrollbar-thumb{background:#dfe2e6;border-radius:6px}

.ab_message .ab-lead{
  margin:0 0 14px;
  font-size:12.5px;line-height:1.62;color:#6b7178;
}

.ab_message .ab_input form{margin:0}
.ab_message .ab-f{
  display:block;
  margin:0 0 10px;
}
.ab_message .ab-f:last-of-type{margin-bottom:0}
.ab_message .ab-lb{
  display:block;margin-bottom:5px;
  font-size:11.5px;font-weight:700;line-height:1.4;color:#3c4248;
}
.ab_message .ab-lb i{font-style:normal;color:#f08519;margin-left:1px}

.ab_message .ab_input input,
.ab_message .ab_input textarea{
  display:block;width:100%;box-sizing:border-box;
  height:42px;padding:0 12px;
  border:1px solid #e3e6ea;border-radius:9px;background:#fff;
  font-family:inherit;font-size:13.5px;line-height:1.5;color:#131415;
  box-shadow:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.ab_message .ab_input textarea{
  height:92px;min-height:74px;padding:10px 12px;line-height:1.62;
  resize:vertical;
}
.ab_message .ab_input input::placeholder,
.ab_message .ab_input textarea::placeholder{color:#a8aeb5}
.ab_message .ab_input input:focus,
.ab_message .ab_input textarea:focus{
  outline:0;border-color:#f08519;
  box-shadow:0 0 0 3px rgba(240,133,25,.14);
}

/* 提交按钮：与 .ct-submit 同一套渐变胶囊，通栏 */
.ab_message .ab_input .ab_input-submit{
  display:block;width:100%;box-sizing:border-box;
  height:46px;margin-top:14px;padding:0 18px;
  border:0;border-radius:999px;
  background:linear-gradient(90deg,#f08519 0%,#e0700c 100%);
  color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;
  letter-spacing:.01em;cursor:pointer;
  box-shadow:0 12px 24px -16px rgba(240,133,25,.95);
  transition:box-shadow .22s ease,transform .22s ease,filter .22s ease;
}
.ab_message .ab_input .ab_input-submit:hover{
  filter:brightness(1.03);
  box-shadow:0 16px 28px -14px rgba(240,133,25,.9);
  transform:translateY(-1px);
}
.ab_message .ab_input .ab_input-submit:active{transform:translateY(0)}

.ab_message .ab-legal{
  margin:10px 0 0;
  font-size:10.5px;line-height:1.55;color:#8b9097;
  text-align:center;
}

/* 站内「询价弹窗」(.inquiry-pop-bd) 打开时要盖住本浮层，否则 1024 左右
   两者会撞在一起、而本浮层 z-index 更高，会压在弹窗的提交按钮上。
   弹窗自带全屏遮罩，把它提到最顶层即可，本浮层自然被压暗隐藏。 */
.inquiry-pop-bd{z-index:2147483647}

/* --------------------------------------------------------------------------
   3. 断点
   --------------------------------------------------------------------------
   ≤768 由 style.css 的移动端媒体查询把 .ab_message 整个隐藏（改成底部
   .bottom-btn 三按钮），这里不解除，也不要在本文件里给 .ab_message 写
   display —— 否则后加载的规则会把那条隐藏覆盖掉。
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .ab_message{width:320px;right:18px}
  .ab_message .message-form{padding:14px 14px 16px}
}

/* 窗口很矮时（横屏手机 / 小笔记本）把面板压扁，别让提交按钮跑到屏幕外 */
@media (max-height:700px){
  .ab_message .ab_input textarea{height:64px;min-height:56px}
  .ab_message .ab-lead{display:none}
  .ab_message .ab-f{margin-bottom:8px}
  .ab_message .ab_input input{height:38px}
}