/* ============================================================
   style-gold-layout-chat.css — 聊天4页专属布局覆盖层 v1.0
   加载顺序：style-gold.css → style-gold-layout.css(员工A) → 本文件 → style-gold-chat.css
   适用范围：chat.html / chats.html / messages.html / group.html
   原则：
     1. 只改结构与排版（信息层级、留白、滚动区域、响应式），不改任何颜色；
        所有用到的新颜色均为黑金主题已有字面值（#d4af37 / rgba(212,175,55,…)）。
     2. 保留全部 id / onclick / onchange / data-* 钩子（审核员与备份 diff 依据）。
     3. 桌面容器：聊天/群聊 1080px 居中；列表 720px 居中；移动端全宽 + 16px 边距。
     4. 滚动区域独立：消息区 / 侧边栏各自滚动，顶栏与输入区固定。
   ============================================================ */

/* ===== 0. 通用排版组件 ===== */

/* 区块标题组件：金色小竖条 + 标题 + 金色细线（全局布局规范 v2.0） */
.block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text, #f3f4f6);
  letter-spacing: .3px;
  min-width: 0;
}
.block-title::before {
  content: '';
  width: 4px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #f5d78e, #d4af37);
  box-shadow: 0 0 8px rgba(212, 175, 55, .4);
}
.block-title::after {
  content: '';
  flex: 1;
  min-width: 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, .45), rgba(212, 175, 55, 0));
}

/* 页面主标题字号规范（仅排版，不含颜色） */
.page-main-title { font-size: 26px; font-weight: 700; letter-spacing: .5px; }

/* ============================================================
   1. chat.html — 单聊三栏布局
   桌面：左栏 264px 角色信息卡 | 中栏消息流(≤760px 居中) | 右栏 300px 状态面板(可收起)
   移动：左栏全屏抽屉，右栏隐藏（状态走底部抽屉/左栏开关），中栏全宽
   ============================================================ */

/* ---------- 1.0 桌面框架 ---------- */
@media (min-width: 769px) {
  /* 聊天页整页固定视口高度，滚动只在内部区域发生 */
  body { height: 100dvh; overflow: hidden; }

  #chat-page {
    flex-direction: row;               /* 覆盖 .chat-page 的 column */
    max-width: 1080px;                 /* 桌面容器：1080px 居中 */
    width: 100%;
    border-left: 1px solid rgba(212, 175, 55, .1);
    border-right: 1px solid rgba(212, 175, 55, .1);
  }

  /* 左栏：角色信息卡（264px，独立滚动） */
  #chat-left-col {
    width: 264px;
    flex-shrink: 0;
    overflow-y: auto;
    position: relative;
    z-index: 2;
    background: rgba(10, 10, 12, .55);
    border-right: 1px solid rgba(212, 175, 55, .14);
  }
  .chat-left-overlay { display: none; }          /* 移动端遮罩，桌面隐藏 */
  .clc-head .clc-close { display: none; }        /* 抽屉关闭按钮，桌面隐藏 */

  /* 中栏：消息流（弹性伸缩，内部 header / 消息区 / 输入区三明治） */
  #chat-middle-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    background: rgba(10, 10, 12, .45);
  }
  /* 消息流内容列 ≤760px 居中（消息行/气泡/分隔线都在 #msg-list 内） */
  #msg-list, #streaming-msg {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 消息区必须可收缩才能独立滚动 */
  #messages-area { min-height: 0; }

  /* 右栏：状态/记忆面板（300px，可收起，收起时中栏自动加宽） */
  #chat-right-col {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* GM 修复：状态字段多时可纵向滚动，不再裁剪 */
    overflow-y: auto;
    position: relative;
    z-index: 2;
    background: rgba(10, 10, 12, .55);
    border-left: 1px solid rgba(212, 175, 55, .14);
    transition: width .25s cubic-bezier(.4, 0, .2, 1);
  }
  #chat-right-col.collapsed {
    width: 0;
    border-left: none;
  }

  /* 顶栏按钮分工：👤(左栏抽屉)仅移动端；📊(右栏开关)仅桌面 */
  #btn-left-open { display: none; }
  #btn-right-toggle { display: flex; }

  /* 记忆面板桌面：贴合右栏宽度，作为右栏覆盖层 */
  #chat-page .memory-panel { width: 300px; right: 0; }

  /* 状态抽屉桌面：改为右侧滑出面板（不改颜色，仅改方位） */
  #status-drawer-overlay {
    top: 0; right: 0; bottom: 0; left: auto; /* 旧浏览器兜底（不支持 inset） */
    inset: 0 0 0 auto;
    width: 340px;
    align-items: stretch;
    animation: none;
  }
  #status-drawer-panel {
    width: 100%;
    max-height: none;
    border-radius: 0;
    animation: none;
  }
}

/* 中等屏（769–1023）：右栏默认收起保证消息区宽度，📊 按钮可随时展开（GM 修复：原隐藏按钮导致右栏永久不可达） */
@media (min-width: 769px) and (max-width: 1023px) {
  #chat-right-col { width: 0; border-left: none; }
  #chat-right-col.collapsed { width: 300px; border-left: 1px solid rgba(212, 175, 55, .14); }
  #btn-right-toggle { display: flex; }
}

/* ---------- 1.1 左栏内容排版 ---------- */
.clc-inner {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.clc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.clc-head .block-title { flex: 1; }
.clc-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .2);
  background: rgba(212, 175, 55, .06);
  color: #c9a96a;
  font-size: 13px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.clc-avatar-wrap { text-align: center; padding: 8px 0 2px; }
.clc-avatar-wrap .char-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(212, 175, 55, .35);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, .12), 0 6px 24px rgba(212, 175, 55, .18);
}
.clc-name {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #f3f4f6);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 创建者链接：居中展示 */
#creator-link {
  display: block;
  text-align: center;
  margin-left: 0 !important;
  margin-top: 2px;
  font-size: 12px !important;
  line-height: 1.6;
}
.clc-actions { display: flex; gap: 8px; }
.clc-actions .header-action-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, .2);
  background: rgba(212, 175, 55, .06);
  color: #c9a96a;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.clc-actions .header-action-btn:hover {
  background: rgba(212, 175, 55, .12);
  color: #f5d78e;
  border-color: rgba(212, 175, 55, .35);
}
.clc-home {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, .18);
  background: transparent;
  color: #c9a96a;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
}
.clc-home:hover { background: rgba(212, 175, 55, .1); color: #f5d78e; }

/* ---------- 1.2 中栏内容排版 ---------- */
/* 顶栏（复用 .chat-header-bar 的黑金样式，布局微调） */
.cmc-header {
  flex-shrink: 0;
  min-height: 56px;
  padding: 8px 12px;
  gap: 8px;
}
.cmc-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 4px;
}
.cmc-title .char-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 输入区：工具条一行（麦克风 / 聊天风格 / 输入框 / 发送 / 停止），输入框弹性伸缩 */
.cmc-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;   /* 聊天风格下拉的定位上下文 */
}
.cmc-toolbar .mic-btn {
  width: 40px; height: 40px;
  flex-shrink: 0;
}
.cmc-toolbar .input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 4px 4px 4px 14px;
}
.cmc-toolbar .input-wrap textarea { min-width: 0; }

/* 输入区辅助行：token / 字符计数 / 状态提示 */
.cmc-toolbar-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 0;
  font-size: 12px;
  line-height: 1.5;
}
#token-display { max-width: 180px; }
#status-display { margin-left: auto; }

/* ---------- 1.3 右栏内容排版 ---------- */
.crc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(212, 175, 55, .1);
  flex-shrink: 0;
}
.crc-head .crc-title { flex: 1; }
#crc-collapse {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, .2);
  background: rgba(212, 175, 55, .06);
  color: #c9a96a;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
#crc-collapse:hover { background: rgba(212, 175, 55, .12); color: #f5d78e; }

/* 状态摘要：竖排卡片化（点击展开完整抽屉） */
#chat-status-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border-top: none;
  padding: 14px;
  cursor: pointer;
}
#chat-status-bar:hover { background: rgba(212, 175, 55, .05); }
#chat-status-bar #status-summary-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
}
#chat-status-bar .status-expand-arrow { align-self: flex-end; margin-top: 8px; font-size: 13px; }
.crc-hint {
  padding: 2px 16px 16px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text2, #c9a96a);
  opacity: .75;
}

/* ---------- 1.4 移动端：左栏全屏抽屉、右栏隐藏、顶栏精简 ---------- */
@media (max-width: 768px) {
  /* 左栏 → 左侧全屏抽屉（沿用 .open 类钩子，由 openChatDrawer/closeChatDrawer 控制） */
  #chat-left-col {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(280px, 85vw);
    transform: translateX(-105%);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
    z-index: 80;
    background: rgba(10, 10, 12, .98);
    box-shadow: 0 0 44px rgba(0, 0, 0, .45), 0 0 60px rgba(212, 175, 55, .06);
    border-right: 1px solid rgba(212, 175, 55, .2);
    border-radius: 0 20px 20px 0;
    display: block;
    overflow-y: auto;
  }
  #chat-left-col.open { transform: none; }
  .chat-left-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0; /* 旧浏览器兜底（不支持 inset） */
    inset: 0;
    z-index: 79;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
  }
  #chat-left-col.open + .chat-left-overlay { opacity: 1; pointer-events: auto; }
  .clc-head .clc-close { display: flex; }
  #btn-left-open { display: flex; }

  /* 右栏移动端隐藏：状态摘要并入左栏开关，完整状态走底部抽屉 */
  #chat-right-col { display: none; }
  #btn-right-toggle { display: none; }

  /* 中栏全宽 */
  #chat-middle-col { width: 100%; }
  .cmc-header { min-height: 50px; padding: 6px 8px; }
  .cmc-toolbar { gap: 6px; }
  .cmc-toolbar .mic-btn { width: 36px; height: 36px; }
}

/* 窄屏（≤390px）防溢出：按钮收敛、气泡贴边 */
@media (max-width: 390px) {
  .cmc-toolbar .mic-btn { width: 32px; height: 32px; font-size: 14px; }
  .clc-inner { padding: 16px 12px; }
}

/* ============================================================
   2. chats.html — 会话列表页
   居中 720px 列表；页头标题+操作；条目卡片化；批量管理底部浮现操作条
   ============================================================ */
.chats-nav-inner { max-width: 720px; margin: 0 auto; padding: 0 16px; height: 56px; }
.chats-nav #page-title { font-size: 17px; font-weight: 700; }
.chats-tabs { max-width: 720px; margin: 0 auto; display: flex; border-bottom: 1px solid rgba(212, 175, 55, .14); }
.chats-wrap { max-width: 720px; margin: 0 auto; padding: 16px 16px 90px; }

/* 列表容器：纵向卡片流 */
#history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 会话条目卡片化（JS 渲染的是内联样式行，这里用 !important 覆盖布局部分；
   时间右上 + 操作按钮右下通过 grid 区域重排，不依赖 JS） */
#history-list > div {
  display: grid !important;
  grid-template-columns: auto 48px minmax(0, 1fr) auto;
  grid-template-areas:
    "check avatar info btn"
    "check avatar info btn";
  column-gap: 12px;
  padding: 16px 18px !important;
  background: var(--surface, #14110d);
  border: 1px solid rgba(212, 175, 55, .18);
  border-bottom: 1px solid rgba(212, 175, 55, .18) !important;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
#history-list > div:hover {
  border-color: rgba(212, 175, 55, .45);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3), 0 0 16px rgba(212, 175, 55, .08);
}
#history-list > div > .g-check { grid-area: check; align-self: center; margin-right: 0 !important; }
#history-list > div > img {
  grid-area: avatar;
  width: 48px !important;
  height: 48px !important;
  align-self: center;
}
/* 信息区：名字(左) + 时间(右上) / 最后消息(第二行) */
#history-list > div > div:not(.g-check) {
  grid-area: info;
  min-width: 0;
  margin-left: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name time"
    "desc desc";
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
}
#history-list > div > div:not(.g-check) > div { grid-area: name; min-width: 0; }
#history-list > div > div:not(.g-check) > .g-desc {
  grid-area: desc;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 13px;
}
#history-list > div > div:not(.g-check) > span {
  grid-area: time;
  justify-self: end;
  margin: 0 !important;
  font-size: 12px;
}
/* 操作按钮：右下角 */
#history-list > div > button {
  grid-area: btn;
  align-self: end;
  margin: 8px 0 0 0 !important;
}

/* 批量管理：底部浮现操作条（JS 控制 display，这里只定位置与外观） */
#mb {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%);
  margin: 0 !important;
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: min(560px, calc(100vw - 32px)) !important;
  padding: 10px 16px !important;
  z-index: 400;
  border-radius: 16px;
  background: rgba(14, 12, 10, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(212, 175, 55, .25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 24px rgba(212, 175, 55, .05);
}

/* 移动端列表间距微调 */
@media (max-width: 768px) {
  .chats-wrap { padding: 12px 12px 90px; }
  #history-list > div { padding: 14px 14px !important; column-gap: 10px; }
}

/* ============================================================
   3. messages.html — 私信页
   桌面双栏：左 320px 会话列表独立滚动 / 右私信线程（顶栏+消息区+输入区）
   移动单栏：conversations-view / chat-view 钩子切换
   ============================================================ */
.pm-shell { height: calc(100dvh - 56px); position: relative; }

@media (min-width: 769px) {
  .pm-shell {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    border-left: 1px solid rgba(212, 175, 55, .1);
    border-right: 1px solid rgba(212, 175, 55, .1);
  }
  /* 左列：会话列表（320px 独立滚动） */
  #conversations-view {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid rgba(212, 175, 55, .14);
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 10px !important;
  }
  /* 桌面双栏常显（JS 的 hidden 切换只在移动端生效） */
  #conversations-view.hidden { display: block !important; }
  #chat-view.hidden { display: flex !important; }

  /* 右列：私信线程 */
  #chat-view {
    flex: 1;
    min-width: 0;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative;
  }
  #chat-view .chat-header-bar { padding: 8px 14px; min-height: 56px; }
  .pm-back { display: none; }   /* 桌面返回按钮隐藏（列表常显） */

  /* 线程空状态：未选择会话时的占位提示（:has 检测名字为空） */
  .pm-thread-placeholder { display: none; }
  #chat-view:has(#chat-with-name:empty) .pm-thread-placeholder { display: flex; }

  /* 会话条目卡片化（JS 渲染内联样式，布局用 !important 覆盖） */
  #conv-list { gap: 10px !important; }
  #conv-list > div {
    padding: 14px 16px !important;
    border-radius: 14px;
    background: var(--surface, #14110d);
    border: 1px solid rgba(212, 175, 55, .16);
    transition: border-color .2s, transform .2s;
  }
  #conv-list > div:hover { border-color: rgba(212, 175, 55, .42); transform: translateY(-1px); }
  #conv-list > div > img { width: 48px !important; height: 48px !important; }
}

/* 线程空状态占位（绝对定位覆盖消息区） */
.pm-thread-placeholder {
  position: absolute;
  top: 60px; right: 0; bottom: 80px; left: 0; /* 旧浏览器兜底（不支持 inset） */
  inset: 60px 0 80px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text2, #c9a96a);
  font-size: 14px;
  pointer-events: none;
  text-align: center;
  padding: 0 24px;
}
.pm-thread-placeholder .ph-icon { font-size: 44px; opacity: .8; }

/* 移动端：单栏 + 返回切换 */
@media (max-width: 768px) {
  .pm-shell { display: block; }
  #conversations-view {
    max-width: none !important;
    margin: 0 !important;
    padding: 8px !important;
  }
  #chat-view {
    max-width: none !important;
    margin: 0 !important;
    height: calc(100vh - 56px); /* 旧浏览器兜底 */
    height: calc(100dvh - 56px);
  }
  #conv-list { gap: 8px !important; }
  #conv-list > div {
    padding: 12px 14px !important;
    border-radius: 14px;
    background: var(--surface, #14110d);
    border: 1px solid rgba(212, 175, 55, .16);
  }
  .pm-thread-placeholder { display: none; }
}

/* 礼物快捷金额：窄屏横排滚动不换行（桌面保持 4 列网格） */
.tip-quick-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .tip-quick-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tip-quick-row::-webkit-scrollbar { display: none; }
  .tip-quick { flex: 0 0 60px; }
}

/* ============================================================
   4. group.html — 多AI群聊
   统一三栏骨架与 chat.html 一致：
   左 264px（房间名+成员管理+调侃开关）/ 中消息流 / 右 300px 成员开关面板(可收起)
   移动：左栏抽屉（沿用现有 .open 钩子），右栏全屏抽屉（随左栏同步开合）
   ============================================================ */

/* ---------- 4.0 桌面三栏 ---------- */
@media (min-width: 769px) {
  #grp-app {
    max-width: 1080px;
    margin: 0 auto;
    border-left: 1px solid rgba(212, 175, 55, .1);
    border-right: 1px solid rgba(212, 175, 55, .1);
  }
  /* 左栏 264px：房间信息 + 成员管理 + 调侃开关 + 删除 */
  #grp-sidebar { width: 264px; }
  #grp-sidebar .sb-foot { margin-top: auto; }   /* 删除按钮沉底 */
  /* 中栏消息流：内容列 ≤760px 居中 */
  #grp-msg-list > div { max-width: 760px; margin-left: auto; margin-right: auto; }
  /* 右栏 300px：房间成员开关面板（可收起，收起时中栏自动加宽） */
  #grp-members-panel {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(10, 10, 12, .6);
    border-left: 1px solid rgba(212, 175, 55, .2);
    overflow: hidden;
    transition: width .25s cubic-bezier(.4, 0, .2, 1);
  }
  #grp-members-panel.collapsed { width: 0; border-left: none; }
  #grp-toggle-panel { display: flex; }   /* 顶栏 👥 开关（桌面常显） */
  #gmp-collapse { display: flex; }       /* 面板内收起按钮 */
  #gmp-close { display: none; }          /* 面板内 ✕ 关闭按钮（移动端用） */
}

/* ---------- 4.1 移动端 ---------- */
@media (max-width: 768px) {
  #grp-app { max-width: 100%; border-left: none; border-right: none; }
  #grp-toggle-panel { display: none; }
  #gmp-collapse { display: none; }
  #gmp-close { display: flex; }
  /* 右栏 → 全屏抽屉：随左栏 .open 同步开合（选择器需位于 #grp-sidebar 之后） */
  #grp-members-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0; /* 旧浏览器兜底（不支持 inset） */
    inset: 0;
    z-index: 90;
    width: 100%;
    max-width: 100%;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
    background: rgba(10, 10, 12, .98);
    border-left: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  #grp-sidebar.open ~ #grp-members-panel { transform: none; }
}

/* ---------- 4.2 成员面板头部与列表排版 ---------- */
.gmp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(212, 175, 55, .14);
  flex-shrink: 0;
}
.gmp-title { font-size: 15px; font-weight: 700; color: var(--text, #f3f4f6); }
.gmp-actions { display: flex; gap: 6px; }
.gmp-actions button {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .2);
  background: rgba(212, 175, 55, .06);
  color: #c9a96a;
  font-size: 13px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.gmp-actions button:hover { background: rgba(212, 175, 55, .12); color: #f5d78e; }

/* ---------- 4.3 创建视图：居中卡片化 ---------- */
#grp-create-view { padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 32px); }
.cv-hero { padding: 20px 12px 8px; }
.cv-hero h1 { font-size: 26px; font-weight: 700; letter-spacing: .5px; }
.cv-hero p { font-size: 13px; line-height: 1.7; }
.cv-wrap { max-width: 720px; gap: 24px; }
.cv-card { padding: 20px; }
.cv-card h2 { font-size: 17px; font-weight: 600; margin: 0 0 16px; display: flex; align-items: center; gap: 6px; }
#cv-char-grid, #add-char-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}

/* ===== GM 修复 2026-08-13：空状态节点不被会话条目卡片化规则压扁 ===== */
#history-list > div.history-empty-state {
  display: block !important;
  grid-template: none !important;
  padding: 60px 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #c9a96a !important;
  cursor: default !important;
  text-align: center !important;
}

/* ===== GM 修复 2026-08-14：关闭按钮 hover 补齐 + 移动端页头去冗余按钮 ===== */
.grp-add-close:hover, .gmp-close:hover {
  background: rgba(212,175,55,.14) !important;
  color: #f5d78e !important;
  border-color: rgba(212,175,55,.4) !important;
}
@media (max-width: 768px) {
  #grp-toggle-panel { display: none !important; } /* 右栏开关在移动端无意义（成员面板由 👥 呼出） */
}