/* REQ138 第 1 项：客户端右下角「联系客户 / Contact us」入口与联系弹窗样式。
   设计令牌沿用 styles.css（--orange #0048a8 / --orange-2 #003c8c / --navy #123c73 /
   --paper #f5f9ff / --line #d5e3f5 / --ink #12283f / --muted #58739e）：方角、1px 描边、
   蓝色主色实心按钮。弹窗比站点既有 .modal 大一号（720–840px，超过视口时内部滚动）。
   布局规则全部按弹窗自身宽度算，1600 与 390 两档视口都不横向溢出。 */

:root.kw-contact-open{overflow:hidden}

/* --------------------------------------------------------------- 右下角入口 */
.kw-contact-entry{
  position:fixed;right:28px;bottom:88px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);
  border:1px solid var(--orange);background:var(--orange);color:#fff;border-radius:2px;
  padding:12px 18px;font:inherit;font-size:14px;font-weight:750;line-height:1;
  box-shadow:0 10px 26px rgba(14,29,47,.24);cursor:pointer;transition:background .2s,transform .2s
}
.kw-contact-entry:hover{background:var(--orange-2);border-color:var(--orange-2);transform:translateY(-2px)}
.kw-contact-entry:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.kw-contact-entry-icon{font-size:15px;line-height:1}
.kw-contact-entry-text{white-space:nowrap}

/* 入口固定在右下；「回到顶部」按钮（.back-to-top，right:26px / bottom:26px）与之同处右下角。
   这里把它按入口宽度左移，两者并排同行，任何滚动位置都不会互相压住（不靠 z-index 遮盖，
   也不改回到顶部自身的显隐逻辑）。 */
:root.kw-contact-entry-on .back-to-top{right:176px}
@media(max-width:580px){:root.kw-contact-entry-on .back-to-top{right:152px}}

/* 入口与「回到顶部」同处右下：弹窗打开时隐藏回到顶部，避免两个控件叠在一起。 */
:root.kw-contact-open .back-to-top{opacity:0!important;visibility:hidden!important}

/* ------------------------------------------------------------------- 遮罩 */
.kw-contact-backdrop{
  position:fixed;inset:0;z-index:120;background:rgba(3,15,28,.66);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s
}
.kw-contact-backdrop[hidden]{display:none}
.kw-contact-backdrop.open{opacity:1;visibility:visible}

/* ------------------------------------------------------------------- 弹窗 */
/* REQ142（用户 2026-10-11）：弹窗内部不再出现滚动条——把内容整体做矮（页头去掉两行说明、
   文本域收到 5 行、行距收紧），让全部字段一屏可见。极端矮视口下由遮罩层承担滚动，
   弹窗自身的表单区永远不滚。 */
.kw-contact-dialog{
  position:relative;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);
  width:min(820px,100%);
  border:1px solid var(--line);box-shadow:0 28px 80px rgba(3,15,28,.34);
  transform:translateY(14px);transition:transform .22s
}
.kw-contact-backdrop.open .kw-contact-dialog{transform:translateY(0)}

.kw-contact-close{
  position:absolute;right:14px;top:10px;z-index:2;border:1px solid transparent;background:transparent;
  color:var(--muted);font-size:30px;line-height:1;padding:2px 8px;border-radius:2px
}
.kw-contact-close:hover{color:var(--navy);border-color:var(--line);background:#fff}
.kw-contact-close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.kw-contact-head{
  flex:none;border-bottom:1px solid var(--line);background:#fff;padding:20px 32px 16px
}
.kw-contact-kicker{
  margin:0;color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase
}
.kw-contact-title{margin:6px 0 0;font-size:27px;letter-spacing:-.04em;color:var(--navy)}

/* ------------------------------------------------------------------- 表单 */
.kw-contact-form{
  flex:0 0 auto;display:grid;gap:14px;padding:20px 32px 24px
}
.kw-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
/* REQ142：字段标签放到输入框**左侧**——第一列固定标签宽，控件/计数/错误一律落第二列。 */
.kw-contact-field{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:6px 14px;min-width:0}
.kw-contact-field-block{align-items:start}
.kw-contact-field-block>.kw-contact-label{padding-top:12px}
.kw-contact-label{font-size:14px;font-weight:750;color:var(--navy);grid-column:1;display:block;margin:0}
.kw-contact-field>label{grid-column:1;display:flex;align-items:baseline;gap:6px}
/* 必填星号：红色（错误红 #c9412f），「必填」两个字已按 REQ142 从界面移除。 */
.kw-contact-field>label i{font-style:normal;color:#c9412f;font-weight:800}
/* 视觉隐藏但仍读给读屏：承担「必填 / required」语义，屏幕上看不到这两个字。 */
.kw-contact-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}
.kw-contact-field>input,
.kw-contact-field>textarea,
.kw-contact-field>.kw-contact-counter,
.kw-contact-field>.kw-contact-field-error,
.kw-contact-field>.kw-contact-file-picker,
.kw-contact-field>.kw-contact-file-hint,
.kw-contact-field>.kw-contact-file-empty,
.kw-contact-field>.kw-contact-file-list{grid-column:2}
.kw-contact-field input[type="text"],
.kw-contact-field input[type="tel"],
.kw-contact-field input[type="email"],
.kw-contact-field textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:0;background:#fbfdff;
  padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);transition:border-color .2s,background .2s
}
.kw-contact-field input:focus,.kw-contact-field textarea:focus{outline:0;border-color:var(--orange);background:#fff}
.kw-contact-field input[aria-invalid="true"],.kw-contact-field textarea[aria-invalid="true"]{
  border-color:#c9412f;background:#fff7f5
}
/* 邮件内容：5 行高、可纵向拉伸、随弹窗宽度自适应（收矮是为了弹窗不放内部滚动条）。 */
.kw-contact-field textarea{min-height:120px;line-height:1.7;resize:vertical}
.kw-contact-counter{
  margin:0;font-size:12.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums
}
.kw-contact-counter.is-near{color:#b4621a;font-weight:700}
.kw-contact-counter.is-limit{color:#c9412f;font-weight:700}
.kw-contact-field-error{margin:0;font-size:12.5px;line-height:1.6;color:#c9412f}
.kw-contact-field-error:empty{display:none}

/* ------------------------------------------------------------------- 附件 */
.kw-contact-files{gap:6px 14px}
.kw-contact-file-picker{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.kw-contact-file-input{
  position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important
}
.kw-contact-file-button{
  border:1px solid var(--line);background:#fff;color:var(--navy);padding:10px 18px;font-size:13.5px;
  font-weight:750;cursor:pointer;transition:.2s
}
.kw-contact-file-button:hover{border-color:var(--orange);color:var(--orange)}
.kw-contact-file-input:focus-visible+.kw-contact-file-button{outline:2px solid var(--orange);outline-offset:2px}
.kw-contact-file-count{font-size:12.5px;color:var(--muted)}
.kw-contact-file-hint{margin:0;font-size:12.5px;line-height:1.65;color:var(--muted)}
.kw-contact-file-empty{margin:0;font-size:12.5px;color:var(--muted);font-style:italic}
.kw-contact-file-empty[hidden]{display:none}
.kw-contact-file-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.kw-contact-file-list:empty{display:none}
.kw-contact-file-row{
  display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:13px;align-items:center;
  border:1px solid var(--line);background:#fbfdff;padding:9px 11px
}
.kw-contact-file-thumb{
  width:84px;height:60px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;
  justify-content:center;overflow:hidden
}
.kw-contact-file-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kw-contact-file-thumb.is-doc img{width:32px;height:32px;object-fit:contain}
.kw-contact-file-meta{min-width:0;display:grid;gap:3px}
.kw-contact-file-meta b{font-size:13.5px;color:var(--navy);font-weight:700;overflow-wrap:anywhere}
.kw-contact-file-meta span{font-size:12px;color:var(--muted)}
.kw-contact-file-remove{
  border:1px solid var(--line);background:#fff;color:#c9412f;font:inherit;font-size:12.5px;font-weight:700;
  padding:8px 14px;cursor:pointer;transition:.2s
}
.kw-contact-file-remove:hover{background:#c9412f;border-color:#c9412f;color:#fff}

/* --------------------------------------------------------- 状态、结果、提交 */
.kw-contact-status{
  margin:0;padding:11px 14px;border:1px solid var(--line);background:var(--paper);font-size:13.5px;color:#2c4a6c
}
.kw-contact-status[hidden]{display:none}
.kw-contact-result{border:1px solid var(--line);padding:18px 20px;font-size:14px;line-height:1.7}
.kw-contact-result[hidden]{display:none}
.kw-contact-result.is-success{border-left:3px solid #1f7a49;background:#f3fbf6;color:#17462c}
.kw-contact-result.is-failure{border-left:3px solid #c9412f;background:#fff7f5;color:#5d2118}
.kw-contact-result h3{margin:0 0 7px;font-size:17px}
.kw-contact-result p{margin:0 0 9px}
.kw-contact-result p:last-child{margin-bottom:0}
.kw-contact-result-ref{font-size:15.5px;font-weight:800;letter-spacing:.02em}
.kw-contact-result a{font-weight:700;text-decoration:underline}
.kw-contact-result-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.kw-contact-reset{
  border:1px solid var(--line);background:#fff;color:var(--navy);font:inherit;font-size:12.5px;
  font-weight:700;padding:9px 15px;cursor:pointer
}
.kw-contact-reset:hover{border-color:var(--orange);color:var(--orange)}

.kw-contact-submit-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:16px
}
.kw-contact-submit{
  border:1px solid var(--orange);background:var(--orange);color:#fff;font:inherit;font-size:15.5px;
  font-weight:750;letter-spacing:.01em;padding:13px 30px;border-radius:2px;cursor:pointer;transition:.2s
}
.kw-contact-submit:hover:not(:disabled){background:var(--orange-2);border-color:var(--orange-2)}
.kw-contact-submit:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.kw-contact-submit:disabled{opacity:.62;cursor:not-allowed}
.kw-contact-footnote{font-size:12.5px;color:var(--muted);max-width:44ch;line-height:1.6}

/* --------------------------------------------------------------- 响应式 */
@media(max-width:900px){
  .kw-contact-head{padding:18px 22px 14px}
  .kw-contact-title{font-size:25px}
  .kw-contact-form{padding:16px 22px 20px}
  .kw-contact-grid{grid-template-columns:1fr}
  .kw-contact-field textarea{min-height:110px}
}
@media(max-width:580px){
  .kw-contact-entry{right:14px;bottom:74px;padding:11px 15px;font-size:13px}
  .kw-contact-backdrop{padding:0;align-items:flex-end}
  .kw-contact-dialog{
    width:100%;border-left:0;border-right:0;border-bottom:0
  }
  .kw-contact-head{padding:16px 16px 12px}
  .kw-contact-title{font-size:23px}
  .kw-contact-form{padding:14px 16px 18px;gap:13px}
  .kw-contact-field{grid-template-columns:76px minmax(0,1fr);gap:6px 12px}
  .kw-contact-field-block>.kw-contact-label{padding-top:11px}
  .kw-contact-field textarea{min-height:100px}
  .kw-contact-file-row{grid-template-columns:60px minmax(0,1fr);grid-template-areas:"thumb meta" "remove remove";gap:9px}
  .kw-contact-file-thumb{grid-area:thumb;width:60px;height:44px}
  .kw-contact-file-meta{grid-area:meta}
  .kw-contact-file-remove{grid-area:remove;justify-self:start}
  .kw-contact-submit{width:100%;padding:15px 20px}
}