/* chat-module.css — 神皇聊天样式 v3 (Modern 深色渐变版) */
:root {
  --nav-bg: #1a1a2e;
  --accent: #e94560;
  --accent2: #c23150;
  --bg: #12121f;
  --card: #1a1a2e;
  --card2: #22223a;
  --other-bubble: #26263a;
  --other-text: #e8e8f0;
  --my-bubble: linear-gradient(135deg, #e94560, #c23150);
  --my-text: #ffffff;
  --border: rgba(255,255,255,0.08);
  --muted: #8888a0;
  --muted-bg: #2a2a44;
  --sender: #ff8fa3;
  --link: #ff8fa3;
}

/* ── List View ── */
#chat-list-view { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
#chat-list-header { background:var(--nav-bg); color:#fff; padding:14px 16px; font-size:18px; font-weight:700; flex-shrink:0; display:flex; align-items:center; gap:10px; }
#chat-list-header .brand-icon { width:30px; height:30px; background:linear-gradient(135deg,var(--accent),var(--accent2)); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:0 2px 8px rgba(233,69,96,.4); }
#chat-list-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--bg); }

.conv-item { display:flex; align-items:center; padding:14px 16px; gap:12px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .15s; }
.conv-item:active { background:var(--card2); }
.conv-item.active { background:rgba(233,69,96,.12); border-left:3px solid var(--accent); }
.conv-avatar { width:48px; height:48px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:#fff; position:relative; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.conv-avatar.group { border-radius:12px; }
.conv-avatar,.msg-avatar,.header-avatar { overflow:hidden; }
.conv-info { flex:1; min-width:0; }
.conv-name { font-size:16px; font-weight:600; color:#f0f0f5; margin-bottom:3px; }
.conv-preview { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.conv-meta { text-align:right; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.conv-time { font-size:11px; color:#5a5a72; }
.conv-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; border-radius:10px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:0 6px; box-shadow:0 2px 6px rgba(233,69,96,.4); }

.list-empty { text-align:center; padding:60px 20px; color:#5a5a72; font-size:15px; }

/* ── Chat View ── */
#chat-chat-view { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
#chat-chat-header { background:var(--nav-bg); color:#fff; padding:10px 12px; font-size:17px; font-weight:700; flex-shrink:0; display:flex; align-items:center; gap:10px; min-height:52px; }
#chat-chat-header .header-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); }
#chat-chat-header .header-avatar.group { border-radius:10px; }
#chat-chat-header .header-info { flex:1; min-width:0; }
#chat-chat-header .header-name { font-size:16px; font-weight:600; }
#chat-chat-header .header-sub { font-size:11px; opacity:.65; margin-top:2px; }
#chat-header-name { flex:1; }
.chat-back-btn { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:0 4px; line-height:1; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; }
.chat-back-btn:active { background:rgba(255,255,255,.1); }

#chat-msg-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 12px; background:var(--bg); }

.time-divider { text-align:center; padding:14px 0 8px; font-size:12px; color:#5a5a72; }

.msg-row { display:flex; margin-bottom:3px; align-items:flex-start; gap:8px; }
.msg-row.mine { flex-direction:row-reverse; }
.msg-row .msg-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.msg-row.continuous .msg-avatar { visibility:hidden; }
.msg-row .msg-body { max-width:72%; min-width:0; display:flex; flex-direction:column; }
.msg-row .msg-sender { font-size:11px; color:var(--sender); margin-bottom:2px; padding:0 4px; }
.msg-row.mine .msg-sender, .msg-row.continuous .msg-sender { display:none; }
.msg-row .msg-bubble { padding:9px 12px; font-size:15px; line-height:1.5; word-break:break-word; border-radius:16px; display:inline-block; max-width:100%; }
.msg-row:not(.mine) .msg-bubble { background:var(--other-bubble); color:var(--other-text); border-bottom-left-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.msg-row.mine .msg-bubble { background:var(--my-bubble); color:var(--my-text); border-bottom-right-radius:4px; box-shadow:0 2px 8px rgba(233,69,96,.3); }
.msg-row.sending .msg-bubble { opacity:.55; }
.msg-row.failed .msg-bubble { box-shadow:inset 0 0 0 2px #ef4444; }
.msg-row .msg-retry { font-size:12px; color:#ef4444; cursor:pointer; margin-top:2px; text-align:right; }
.msg-row .msg-time { font-size:10px; color:#5a5a72; margin-top:2px; padding:0 6px; }
.msg-row.mine .msg-time { text-align:right; }
.msg-row .msg-bubble a { color:var(--link); text-decoration:underline; }
.msg-row .msg-bubble .msg-image { padding:4px; background:transparent; }

.msg-spinner { display:none; width:14px; height:14px; border:2px solid #3a3a55; border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; align-self:center; flex-shrink:0; }
.msg-row.sending .msg-spinner { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }

@keyframes msgIn { from { opacity:0; transform:translateY(6px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.msg-row.msg-in { animation:msgIn .22s ease-out; }

.chat-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#5a5a72; gap:12px; }
.chat-empty p { font-size:15px; }

/* ── New Message Button ── */
#chat-new-msg-btn { position:absolute; bottom:76px; left:50%; transform:translateX(-50%); z-index:5; background:var(--accent); color:#fff; border:none; padding:8px 18px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 2px 12px rgba(233,69,96,.4); display:none; }
#chat-new-msg-btn.show { display:block; }

/* ── Input Bar ── */
#chat-input-bar { display:flex; align-items:flex-end; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); background:var(--card); border-top:1px solid var(--border); gap:8px; flex-shrink:0; }
#chat-msg-input { flex:1; border:1px solid var(--border); border-radius:20px; padding:9px 16px; font-size:15px; outline:none; resize:none; max-height:120px; background:rgba(255,255,255,.06); color:#f0f0f5; font-family:inherit; line-height:1.4; transition:border-color .2s, background .2s; }
#chat-msg-input::placeholder { color:#5a5a72; }
#chat-msg-input:focus { border-color:var(--accent); background:rgba(255,255,255,.09); }
.chat-send-btn { width:38px; height:38px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; font-size:16px; transition:all .2s; }
.chat-send-btn.inactive { background:var(--muted-bg); color:#5a5a72; }
.chat-send-btn.active { background:var(--my-bubble); color:#fff; box-shadow:0 2px 8px rgba(233,69,96,.4); }
.chat-send-btn.active:active { transform:scale(.92); }

/* ── Toast ── */
.toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:100; background:rgba(0,0,0,.85); color:#fff; padding:10px 22px; border-radius:8px; font-size:14px; pointer-events:none; opacity:0; transition:opacity .25s; }
.toast.show { opacity:1; }