/* ============================================================================
 * QikSwap 「表情」面板样式 —— 配 chat-emoji.js（全端唯一一套表情）。
 *
 * 在 index.html 里**最后**加载：撰写框的通用按钮样式散在 support.css /
 * review-system.css / theme-system.css / typography-scale.css /
 * mobile-readability.css 里（其中 theme-system 按主题给 button 上底色、
 * mobile-readability 给 button 的 font-size 加了 !important），
 * 所以这里的选法器（specificity）刻意写得比它们高，字形字号用 !important 兜底。
 *
 * 撰写框格子顺序固定为：输入 | 表情 | ＋ | 发送，两个面板都占满整行落在最下方。
 * （与 App 端的撰写行一字不差 —— App.js:8052-8084。原先「图片 | 表情 | ＋ | 输入 | 发送」
 *   里那一格「图片」是上一代的遗留入口，图标在 ui-icons.js 里根本不存在（icon("image")
 *   返回空串），于是只剩一个兜底的字面量 `+`，紧挨着新的 `＋` 看着像重影。本轮把那个
 *   <label> 连同它的可见按钮一起删掉，只留里面那个隐藏的
 *   <input type="file" data-media-input=…>（「＋」货架与发送路径都靠它）。
 *  「＋」货架：两个动作 上传照片 / 拍照，同 App.js:8136-8176。）
 * ========================================================================== */

/* ---- 撰写框四格：输入 | 表情 | ＋ | 发送 ----
   （support.css:111 与 review-system.css:280 原本是「图片 | 输入 | 发送」三格；
      图片格删掉之后必须在这里把 4 格钉住，否则会退回那套 3 格布局。）
   `#supportMessageForm.chat-composer` 那一条是必需的：support.css:269 窄屏档的
   `.chat-composer` 也是 4 格之外的同名规则，光靠本文件后加载、同分同赢太脆；
   带上 #id 把 specific 提到 1-1-0 钉死，两个撰写框在每一档都是同一套 4 格。 */
.chat-composer,
#supportMessageForm.chat-composer,
#presaleMessageForm,
.presale-modal #presaleMessageForm {
  grid-template-columns: minmax(0, 1fr) 42px 42px auto;
}

/* ---- 输入框钉在第 1 轨（宽的那一格），三个按钮钉在第 2/3/4 轨 ----
   （轨道顺序 = 视觉顺序「输入 | 表情 | ＋ | 发送」，与 App 一致。）
   grid 的自动排布是**按顺序往轨道里填**的，不会"看谁该占宽的那一格"：撰写框里排在
   输入框之前的两个块（data-chat-reply-preview、.media-preview-list）平时都是
   display:none，于是输入框成了**第一个**可排的 grid item，自动排布会把它放进第 1 轨；
   而 <textarea> 默认 cols=20、固有宽度就是 42px，且百分比宽度是相对它所在的 grid area
   解析的 —— 一旦落在 42px 那一轨，`width:100%` 也只有 42px（实测：1360px 下输入框
   42px、发送按钮被 96px 的 min-width 撑开、整行错位）。所以这里把四格的轨道全部显式
   钉死，不依赖自动排布。一律用 `>` 直接子选择器，免得命中面板里的同名后代。 */
.chat-composer > textarea[name="message"],
#supportMessageForm > textarea[name="message"],
#presaleMessageForm > textarea[name="message"],
.presale-modal #presaleMessageForm > textarea[name="message"] {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.chat-composer > .chat-emoji-toggle,
#supportMessageForm > .chat-emoji-toggle,
#presaleMessageForm > .chat-emoji-toggle,
.presale-modal #presaleMessageForm > .chat-emoji-toggle {
  grid-column: 2;
}
.chat-composer > .chat-attach-toggle,
#supportMessageForm > .chat-attach-toggle,
#presaleMessageForm > .chat-attach-toggle,
.presale-modal #presaleMessageForm > .chat-attach-toggle {
  grid-column: 3;
}
.chat-composer > button[type="submit"],
#supportMessageForm > button[type="submit"],
#presaleMessageForm > button[type="submit"],
.presale-modal #presaleMessageForm > button[type="submit"] {
  grid-column: 4;
}

/* ---- 图片格删掉之后，这两件事必须在 CSS 里补上 ----
   1. 那个隐藏的图片 input 现在是 <form> 的**直接子元素**了（以前它藏在 .chat-media-picker
      / .presale-media-picker 这个 <label> 里，跟着 label 一起被 display:grid 收编）。
      grid 容器的直接子元素就是 grid item —— 不钉死它就会白占第一格，把输入框挤到 42px
      宽（实测过：1360px 下输入框只剩 42px，发送按钮还被 96px 的 min-width 撑开）。
      这里用 !important 压过 support.css:114 / review-system.css:282 的
      `.chat-composer button` 那一串，保证它永远不参与布局。
   2. `.chat-reply-preview` 与 `.media-preview-list` 在 support.css:124/329 被写成
      `display:flex`，specificity 高过 `[hidden]` 的 UA 规则 —— 于是这两个「默认收起」的
      块**在线上一直是显示的**：它们各占一整行（grid-column: 1 / -1），所以图片格还在时
      输入框看着还在自己那一格，其实前面已经白占了两行。这里把 composer 内这两个块的
      hidden 状态钉死；JS 把 hidden 摘掉（support-core.js:38 / review-system.js:858-860、
      media-utils.js:133 都是 `el.hidden=…`）之后 display 回到各自的可见值，显示行为不变。 */
.chat-composer > input[data-media-input],
#supportMessageForm > input[data-media-input],
#presaleMessageForm > input[data-media-input],
.presale-modal #presaleMessageForm > input[data-media-input],
.chat-composer > input[data-media-input][hidden],
#supportMessageForm > input[data-media-input][hidden],
#presaleMessageForm > input[data-media-input][hidden],
.presale-modal #presaleMessageForm > input[data-media-input][hidden] {
  display: none !important;
}

.chat-composer > [data-chat-reply-preview][hidden],
#supportMessageForm > [data-chat-reply-preview][hidden],
#presaleMessageForm > [data-chat-reply-preview][hidden],
.presale-modal #presaleMessageForm > [data-chat-reply-preview][hidden],
.chat-composer > .media-preview-list[hidden],
#supportMessageForm > .media-preview-list[hidden],
#presaleMessageForm > .media-preview-list[hidden],
.presale-modal #presaleMessageForm > .media-preview-list[hidden] {
  display: none !important;
}

/* ---- 「表情」「＋」那两格：与图片选择格同款盒子 ----
   `button.` 那几条是必需的：review-system.css:367 的
   `.presale-modal #presaleMessageForm button { min-width:0; min-height:48px }`（1-1-1）
   比单写类名高，会把「＋」压成 48px 高。带上元素名后 specific 追平 1-1-1，
   本文件在 index.html 里最后加载 → 同分同赢。 */
.chat-emoji-toggle,
.chat-attach-toggle,
button.chat-emoji-toggle,
button.chat-attach-toggle,
.chat-composer .chat-emoji-toggle,
.chat-composer .chat-attach-toggle,
.chat-composer button.chat-emoji-toggle,
.chat-composer button.chat-attach-toggle,
#presaleMessageForm .chat-emoji-toggle,
#presaleMessageForm .chat-attach-toggle,
#presaleMessageForm button.chat-emoji-toggle,
#presaleMessageForm button.chat-attach-toggle,
html[data-site-theme] .chat-composer .chat-emoji-toggle,
html[data-site-theme] .chat-composer .chat-attach-toggle,
html[data-site-theme] #presaleMessageForm .chat-emoji-toggle,
html[data-site-theme] #presaleMessageForm .chat-attach-toggle {
  display: grid;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  place-items: center;
  align-self: stretch;
  border: 1px solid var(--theme-accent, #d1a741);
  border-radius: 4px;
  color: var(--theme-accent, #a87d1d);
  background: var(--theme-accent-soft, #fff8e6);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.chat-emoji-toggle:hover,
.chat-attach-toggle:hover,
.chat-composer .chat-emoji-toggle:hover,
.chat-composer .chat-attach-toggle:hover,
#presaleMessageForm .chat-emoji-toggle:hover,
#presaleMessageForm .chat-attach-toggle:hover,
html[data-site-theme] .chat-composer .chat-emoji-toggle:hover,
html[data-site-theme] .chat-composer .chat-attach-toggle:hover,
html[data-site-theme] #presaleMessageForm .chat-emoji-toggle:hover,
html[data-site-theme] #presaleMessageForm .chat-attach-toggle:hover {
  background: var(--theme-accent-soft, #fff3d6);
}

/* 展开时那一格亮起来（面板开着的时候看得出来） */
.chat-emoji-toggle[aria-expanded="true"],
.chat-attach-toggle[aria-expanded="true"],
html[data-site-theme] .chat-composer .chat-emoji-toggle[aria-expanded="true"],
html[data-site-theme] .chat-composer .chat-attach-toggle[aria-expanded="true"],
html[data-site-theme] #presaleMessageForm .chat-emoji-toggle[aria-expanded="true"],
html[data-site-theme] #presaleMessageForm .chat-attach-toggle[aria-expanded="true"] {
  border-color: var(--blue, #2357e8);
  color: var(--blue, #2357e8);
  background: #eef4ff;
}

/* ---- 面板：占满撰写框整行，7 列（与 App 端一致），可滚动且不会把撰写框顶出屏幕 ---- */
.chat-emoji-panel,
.chat-attach-panel,
html[data-site-theme] .chat-composer .chat-emoji-panel,
html[data-site-theme] .chat-composer .chat-attach-panel,
html[data-site-theme] #presaleMessageForm .chat-emoji-panel,
html[data-site-theme] #presaleMessageForm .chat-attach-panel {
  display: block;
  grid-column: 1 / -1;
  max-height: 208px;
  padding: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #d8e1e9;
  border-radius: 5px;
  background: #fff;
}

/* 面板默认 hidden，而上面把 display 写成了 block —— [hidden] 必须永远赢：主题那两条
   选择器的 specific 比单写 .chat-emoji-panel[hidden] 高，不在这列全就会在
   data-site-theme 下把"收起的"面板又显示出来（实测过一次）。 */
.chat-emoji-panel[hidden],
.chat-attach-panel[hidden],
html[data-site-theme] .chat-composer .chat-emoji-panel[hidden],
html[data-site-theme] .chat-composer .chat-attach-panel[hidden],
html[data-site-theme] #presaleMessageForm .chat-emoji-panel[hidden],
html[data-site-theme] #presaleMessageForm .chat-attach-panel[hidden] {
  display: none !important;
}

/* ---- 「＋」货架：两个动作并排，尺寸照 App 端那两格（92×92、圆角 10、图标在上文案在下）---- */
.chat-attach-actions,
html[data-site-theme] .chat-composer .chat-attach-actions,
html[data-site-theme] #presaleMessageForm .chat-attach-actions {
  display: flex;
  gap: 12px;
  padding: 10px 4px;
  align-items: center;
}

.chat-attach-action,
button.chat-attach-action,
.chat-composer .chat-attach-action,
.chat-composer button.chat-attach-action,
#presaleMessageForm .chat-attach-action,
#presaleMessageForm button.chat-attach-action,
.presale-modal #presaleMessageForm button.chat-attach-action,
html[data-site-theme] .chat-composer .chat-attach-action,
html[data-site-theme] #presaleMessageForm .chat-attach-action {
  display: grid;
  width: 92px;
  min-width: 92px;
  min-height: 92px;
  padding: 0;
  gap: 3px;
  place-items: center;
  align-content: center;
  border: 1px solid #e6dcc4;
  border-radius: 10px;
  color: var(--theme-accent, #a87d1d);
  background: #fffdf8;
  cursor: pointer;
}

.chat-attach-action:hover,
.chat-composer .chat-attach-action:hover,
#presaleMessageForm .chat-attach-action:hover,
html[data-site-theme] .chat-composer .chat-attach-action:hover,
html[data-site-theme] #presaleMessageForm .chat-attach-action:hover {
  border-color: var(--theme-accent, #d1a741);
  background: var(--theme-accent-soft, #fff8e6);
}

/* 图标 26px、文案 11px —— 与 App 的 Icon size={26} / CHAT_TOOL_LABEL 一致。
   mobile-readability.css 给 .chat-composer button 的 font-size 加了 !important，
   文案在 <span> 上、图标在 <svg> 上，各自把字号/尺寸钉死。 */
.chat-attach-action-icon,
.chat-composer .chat-attach-action-icon,
#presaleMessageForm .chat-attach-action-icon {
  width: 26px;
  height: 26px;
  color: var(--theme-accent, #a87d1d);
}

.chat-attach-action-label,
.chat-composer .chat-attach-action-label,
#presaleMessageForm .chat-attach-action-label,
html[data-site-theme] .chat-composer .chat-attach-action-label,
html[data-site-theme] #presaleMessageForm .chat-attach-action-label {
  color: #6b7280;
  font-size: 11px !important;
  font-weight: 400;
  line-height: 1.2;
}

/* 两个隐藏的文件输入：hidden 属性之外再钉一层，免得主题的 input 规则把它显出来。 */
.chat-attach-input,
.chat-composer .chat-attach-input,
#presaleMessageForm .chat-attach-input,
html[data-site-theme] .chat-composer .chat-attach-input,
html[data-site-theme] #presaleMessageForm .chat-attach-input {
  display: none !important;
  width: 1px;
  height: 1px;
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}

.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

/* ---- 每一枚表情：透明底、不要继承通用 button 的蓝底/96px 最小宽度 ---- */
.chat-emoji-cell,
.chat-composer .chat-emoji-cell,
#presaleMessageForm .chat-emoji-cell,
html[data-site-theme] .chat-composer .chat-emoji-cell,
html[data-site-theme] #presaleMessageForm .chat-emoji-cell {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  /* mobile-readability.css 给 .chat-composer button 的 font-size 加了 !important，
     会让整格表情缩成 15px；字形大小必须在这里压回来。 */
  /* 2026-09-14 字号 +2px：字形 21→23、格子 34→36。与 App 端 26→30（同一档
     提高）以及气泡正文 +2px 保持同一节奏；仍是 7 列整数网格，无边框无底色。 */
  font-size: 23px !important;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.chat-emoji-cell:hover,
.chat-composer .chat-emoji-cell:hover,
#presaleMessageForm .chat-emoji-cell:hover,
html[data-site-theme] .chat-composer .chat-emoji-cell:hover,
html[data-site-theme] #presaleMessageForm .chat-emoji-cell:hover {
  background: #eef4ff;
}

/* ---- 窄屏：格子与图片选择格一起变成 44px（与 support.css / review-system.css 的窄屏档一致）----
   注意：上面那几条基样式（含 html[data-site-theme] 前缀的）specific 比单写一个类名高，
   所以媒体查询里必须把同一串选择器抄全，否则 42px 会一直赢、格子停在 42px（实测过）。 */
@media (max-width: 700px) {
  .chat-composer,
  #supportMessageForm.chat-composer,
  #presaleMessageForm,
  .presale-modal #presaleMessageForm { grid-template-columns: minmax(0, 1fr) 44px 44px 70px; }
  .chat-emoji-toggle,
  .chat-attach-toggle,
  button.chat-emoji-toggle,
  button.chat-attach-toggle,
  .chat-composer .chat-emoji-toggle,
  .chat-composer .chat-attach-toggle,
  .chat-composer button.chat-emoji-toggle,
  .chat-composer button.chat-attach-toggle,
  #presaleMessageForm .chat-emoji-toggle,
  #presaleMessageForm .chat-attach-toggle,
  #presaleMessageForm button.chat-emoji-toggle,
  #presaleMessageForm button.chat-attach-toggle,
  html[data-site-theme] .chat-composer .chat-emoji-toggle,
  html[data-site-theme] .chat-composer .chat-attach-toggle,
  html[data-site-theme] #presaleMessageForm .chat-emoji-toggle,
  html[data-site-theme] #presaleMessageForm .chat-attach-toggle {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 620px) {
  .chat-composer,
  #supportMessageForm.chat-composer,
  .presale-modal #presaleMessageForm,
  #presaleMessageForm { grid-template-columns: minmax(0, 1fr) 44px 44px 70px; }
  .chat-emoji-toggle,
  .chat-attach-toggle,
  button.chat-emoji-toggle,
  button.chat-attach-toggle,
  .chat-composer .chat-emoji-toggle,
  .chat-composer .chat-attach-toggle,
  .chat-composer button.chat-emoji-toggle,
  .chat-composer button.chat-attach-toggle,
  #presaleMessageForm .chat-emoji-toggle,
  #presaleMessageForm .chat-attach-toggle,
  #presaleMessageForm button.chat-emoji-toggle,
  #presaleMessageForm button.chat-attach-toggle,
  html[data-site-theme] .chat-composer .chat-emoji-toggle,
  html[data-site-theme] .chat-composer .chat-attach-toggle,
  html[data-site-theme] #presaleMessageForm .chat-emoji-toggle,
  html[data-site-theme] #presaleMessageForm .chat-attach-toggle {
    width: 44px;
    min-width: 44px;
    min-height: 46px;
  }
  .chat-emoji-panel { max-height: 176px; }
  .chat-emoji-cell { min-height: 38px; font-size: 24px !important; }
  /* 390px 上三格 44px + 发送 70px + 4×8px gap 之后，货架还剩 ~340px：
     两个 88px 的动作格 + 10px gap 稳稳放得下，不用换行。 */
  .chat-attach-actions { gap: 10px; padding: 8px 2px; }
  .chat-attach-action,
  button.chat-attach-action,
  .chat-composer button.chat-attach-action,
  #presaleMessageForm button.chat-attach-action,
  .presale-modal #presaleMessageForm button.chat-attach-action {
    width: 88px;
    min-width: 88px;
    min-height: 88px;
  }
}