* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Microsoft JhengHei', Arial, sans-serif; height: 100vh; display: flex; overflow: hidden; background: #1e2430; align-items:center; justify-content:center; padding:20px; }

/* ── 登入頁 ── */
#auth-page { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#3a7bd5,#1a4fa0); }
.auth-box { background:#fff; border-radius:12px; padding:40px 36px; width:360px; box-shadow:0 8px 32px rgba(0,0,0,.2); text-align:center; }
.auth-hero { margin-bottom:20px; }
.auth-logo { font-size:44px; margin-bottom:6px; line-height:1; }
.siggua-logo-svg { width:56px; height:56px; display:block; margin:0 auto; }
.auth-box h1 { font-size:20px; color:#333; margin-bottom:4px; }
.auth-slogan { font-size:12px; color:#999; margin-bottom:18px; }
.auth-switch-link { text-align:center; font-size:13px; color:#999; margin-top:12px; margin-bottom:0; }
.auth-switch-link a { color:#3a7bd5; text-decoration:none; }
.auth-switch-link a:hover { text-decoration:underline; }
.auth-input-wrap { position:relative; margin-bottom:10px; }
.auth-input-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:15px; pointer-events:none; }
.auth-box input { width:100%; padding:11px 13px 11px 36px; border:1px solid #ddd; border-radius:6px; font-size:14px; outline:none; transition:.2s; }
.auth-box input:focus { border-color:#3a7bd5; }
.btn-primary { width:100%; padding:11px; background:#3a7bd5; color:#fff; border:none; border-radius:6px; font-size:15px; cursor:pointer; margin-top:4px; transition:.2s; }
.btn-primary:hover { background:#2d63b8; }
.error-msg { color:#e53935; font-size:12px; margin-top:8px; min-height:16px; }
.success-msg { color:#43a047; font-size:12px; margin-top:4px; min-height:16px; }

/* ── 登入頁 手機版 ── */
@media (max-width:768px) {
  #auth-page { background:linear-gradient(170deg,#0d1b35 0%,#1a3060 55%,#0d1b35 100%); align-items:stretch; justify-content:flex-end; padding:0; }
  .auth-box { width:100%; max-width:100%; border-radius:0; padding:0; box-shadow:none; background:transparent; display:flex; flex-direction:column; height:100%; }
  .auth-hero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 0 24px; }
  .auth-logo { font-size:80px; margin-bottom:12px; filter:drop-shadow(0 0 24px rgba(100,180,255,.5)); display:flex; justify-content:center; }
  .siggua-logo-svg { width:100px; height:100px; filter:drop-shadow(0 6px 20px rgba(80,160,40,.55)); }
  .auth-box h1 { font-size:30px; color:#fff; letter-spacing:3px; margin-bottom:8px; }
  .auth-slogan { font-size:13px; color:rgba(255,255,255,.45); margin-bottom:0; }
  .auth-form-area { background:#182038; border-radius:28px 28px 0 0; padding:28px 24px 48px; box-shadow:0 -8px 40px rgba(0,0,0,.45); }
  .auth-switch-link { color:rgba(255,255,255,.4); }
  .auth-switch-link a { color:rgba(120,170,255,.85); }
  .auth-input-icon { left:14px; font-size:16px; }
  .auth-box input { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); border-radius:10px; color:#fff; font-size:16px; padding:14px 14px 14px 40px; }
  .auth-box input::placeholder { color:rgba(255,255,255,.3); }
  .auth-box input:focus { border-color:#3a7bd5; background:rgba(255,255,255,.11); }
  .btn-primary { padding:15px; font-size:16px; border-radius:12px; margin-top:6px; background:linear-gradient(90deg,#3a7bd5,#2d63b8); box-shadow:0 4px 16px rgba(58,123,213,.4); }
  .error-msg { color:#ff8080; text-align:center; }
}

/* ── Modal ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; display:flex; align-items:center; justify-content:center; }
.modal-box { background:#fff; border-radius:12px; width:360px; box-shadow:0 8px 40px rgba(0,0,0,.25); max-height:90vh; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; }
.modal-header { padding:14px 18px; background:#f7f7f7; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:600; color:#333; flex-shrink:0; }
.modal-header button { background:none; border:none; cursor:pointer; font-size:18px; color:#999; }
.modal-header button:hover { color:#333; }
.profile-avatar-wrap { display:flex; flex-direction:column; align-items:center; padding:24px 0 16px; background:#fafafa; border-bottom:1px solid #eee; flex-shrink:0; }
.profile-avatar { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:bold; color:#fff; overflow:hidden; margin-bottom:10px; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-display-name { font-size:16px; font-weight:700; color:#222; margin-bottom:8px; }
.change-avatar-btn { font-size:13px; color:#3a7bd5; cursor:pointer; padding:4px 12px; border:1px solid #3a7bd5; border-radius:12px; transition:.2s; }
.change-avatar-btn:hover { background:#3a7bd5; color:#fff; }
.modal-section { padding:12px 18px 4px; font-size:12px; color:#999; font-weight:600; text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:6px; }
.section-hint { font-size:11px; color:#ccc; font-weight:400; text-transform:none; letter-spacing:0; }
.prof-readonly-wrap { display:flex; align-items:center; gap:6px; margin:0 18px 8px; }
.prof-readonly-wrap .prof-readonly-field { margin:0; flex:1; }
.prof-readonly-field { padding:10px 12px; background:#f5f5f5; border:1px solid #eee; border-radius:6px; font-size:14px; color:#555; font-family:monospace; user-select:all; }
.prof-copy-btn { flex-shrink:0; padding:6px 12px; background:#3a7bd5; color:#fff; border:none; border-radius:6px; font-size:12px; cursor:pointer; transition:.2s; white-space:nowrap; }
.prof-copy-btn:hover { background:#2d62b5; }
.modal-box input { display:block; width:calc(100% - 36px); margin:0 18px 8px; padding:10px 12px; border:1px solid #ddd; border-radius:6px; font-size:14px; outline:none; transition:.2s; }
.modal-box input:focus { border-color:#3a7bd5; }
.modal-box select { display:block; width:calc(100% - 36px); margin:0 18px 8px; padding:10px 12px; border:1px solid #ddd; border-radius:6px; font-size:14px; outline:none; background:#fff; color:#333; cursor:pointer; transition:.2s; }
.modal-box select:focus { border-color:#3a7bd5; }
.modal-box .btn-primary { margin:12px 18px 18px; width:calc(100% - 36px); }
.modal-box .error-msg,.modal-box .success-msg { padding:0 18px; }

/* ── 邀請項目（群組面板內） ── */
.invite-item {
  background:#fff8e1; border-left:3px solid #f9a825;
  padding:10px 12px; border-bottom:1px solid #ffe082;
}
.invite-item-top { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.invite-item-icon { font-size:22px; }
.invite-item-title { font-size:13px; color:#222; font-weight:500; line-height:1.4; flex:1; }
.invite-item-btns { display:flex; gap:6px; }
.btn-decline { padding:5px 12px; border:1px solid #ccc; border-radius:6px; background:#fff; color:#888; cursor:pointer; font-size:12px; transition:.2s; }
.btn-decline:hover { background:#f5f5f5; }
.btn-accept { padding:5px 12px; border:none; border-radius:6px; background:#3a7bd5; color:#fff; cursor:pointer; font-size:12px; font-weight:600; transition:.2s; }
.btn-accept:hover { background:#2d63b8; }

/* 主題切換過渡 */
.nav-bar,.side-panel,.chat-area,.chat-header,.chat-input-bar,.cib-input-wrap,.msg-bubble { transition:background .3s,border-color .3s,color .3s; }

/* ── 性能優化：面板切換淡入 ── */
@keyframes panelFadeIn { from { opacity:0; } to { opacity:1; } }
.side-panel.panel-enter { animation: panelFadeIn .1s ease both; }

/* 新訊息淡入（僅 socket 收到的新訊息） */
@keyframes msgSlideIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.msg-new { animation: msgSlideIn .15s ease both; }

/* 訊息載入骨架 */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.msg-skeleton { display:flex; gap:10px; padding:12px 16px; }
.msg-skeleton-ava { width:38px; height:38px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(90deg,#e8e8e8 25%,#f2f2f2 50%,#e8e8e8 75%);
  background-size:400px 100%; animation:shimmer 1.2s ease infinite; }
.msg-skeleton-body { flex:1; display:flex; flex-direction:column; gap:8px; padding-top:5px; }
.msg-skeleton-line { height:11px; border-radius:5px;
  background:linear-gradient(90deg,#e8e8e8 25%,#f2f2f2 50%,#e8e8e8 75%);
  background-size:400px 100%; animation:shimmer 1.2s ease infinite; }
.msg-skeleton-line.short { width:50%; }
.msg-skeleton-line.medium { width:72%; }

/* ── CSS 主題變數 ── */
:root {
  --nav-bg:#2b2b2b; --nav-hover:#444; --nav-active:#3a7bd5; --nav-badge-border:#2b2b2b;
  --panel-bg:#f7f7f7; --panel-border:#e0e0e0; --panel-header-border:#e8e8e8;
  --chat-area-bg:#f5f5f5; --chat-header-bg:#fff; --chat-header-border:#e5e5e5;
  --msg-own-bg:#95ec69; --msg-own-text:#222; --msg-other-bg:#fff; --msg-other-text:#333;
  --input-bar-bg:#fff; --input-bar-border:#e8e8e8; --input-field-bg:#f0f0f0; --input-text:#333;
  --accent:#3a7bd5;
}
body.theme-blue { --nav-bg:#1a3a5c; --nav-hover:#2a5080; --nav-active:#2563d4; --nav-badge-border:#1a3a5c; --panel-bg:#e8f0fb; --panel-border:#c8daf5; --panel-header-border:#c8daf5; --chat-area-bg:#dce8f8; --chat-header-bg:#ecf2fd; --chat-header-border:#c8daf5; --msg-own-bg:#5b9bf0; --msg-own-text:#fff; --msg-other-bg:#fff; --input-bar-bg:#ecf2fd; --input-bar-border:#c8daf5; --input-field-bg:#dce8f8; --accent:#2563d4; }
body.theme-rose { --nav-bg:#5c2340; --nav-hover:#7a2d54; --nav-active:#e91e8c; --nav-badge-border:#5c2340; --panel-bg:#fdf0f4; --panel-border:#f5c6d8; --panel-header-border:#f5c6d8; --chat-area-bg:#fce4ec; --chat-header-bg:#fdf6f9; --chat-header-border:#f5c6d8; --msg-own-bg:#f48fb1; --msg-own-text:#fff; --msg-other-bg:#fff; --input-bar-bg:#fdf6f9; --input-bar-border:#f5c6d8; --input-field-bg:#fce4ec; --accent:#e91e8c; }
body.theme-matcha { --nav-bg:#2d4a2f; --nav-hover:#3d6040; --nav-active:#388e3c; --nav-badge-border:#2d4a2f; --panel-bg:#f0f7f0; --panel-border:#c8e6c9; --panel-header-border:#c8e6c9; --chat-area-bg:#e8f5e9; --chat-header-bg:#f4faf4; --chat-header-border:#c8e6c9; --msg-own-bg:#81c784; --msg-own-text:#1a3c1c; --msg-other-bg:#fff; --input-bar-bg:#f4faf4; --input-bar-border:#c8e6c9; --input-field-bg:#e8f5e9; --accent:#388e3c; }
body.theme-warm { --nav-bg:#5c3a1e; --nav-hover:#7a4a25; --nav-active:#f57c00; --nav-badge-border:#5c3a1e; --panel-bg:#fdf4e7; --panel-border:#f5ddb8; --panel-header-border:#f5ddb8; --chat-area-bg:#fff8e1; --chat-header-bg:#fffbf2; --chat-header-border:#f5ddb8; --msg-own-bg:#ffcc80; --msg-own-text:#3e2000; --msg-other-bg:#fff; --input-bar-bg:#fffbf2; --input-bar-border:#f5ddb8; --input-field-bg:#fff8e1; --accent:#f57c00; }
body.theme-lavender { --nav-bg:#3d2d5c; --nav-hover:#503a78; --nav-active:#7b1fa2; --nav-badge-border:#3d2d5c; --panel-bg:#f3f0f8; --panel-border:#ddd0f0; --panel-header-border:#ddd0f0; --chat-area-bg:#ede7f6; --chat-header-bg:#f7f4fc; --chat-header-border:#ddd0f0; --msg-own-bg:#ce93d8; --msg-own-text:#fff; --msg-other-bg:#fff; --input-bar-bg:#f7f4fc; --input-bar-border:#ddd0f0; --input-field-bg:#ede7f6; --accent:#7b1fa2; }
body.theme-night { --nav-bg:#111; --nav-hover:#2a2a2a; --nav-active:#4a7cd5; --nav-badge-border:#111; --panel-bg:#1e1e1e; --panel-border:#333; --panel-header-border:#333; --chat-area-bg:#161616; --chat-header-bg:#222; --chat-header-border:#333; --msg-own-bg:#1a5c35; --msg-own-text:#d4f5dc; --msg-other-bg:#2c2c2c; --msg-other-text:#ddd; --input-bar-bg:#222; --input-bar-border:#333; --input-field-bg:#333; --input-text:#ddd; --accent:#4a7cd5; }

/* 夜間主題文字覆蓋 */
body.theme-night .panel-header,body.theme-night .conv-name,body.theme-night .contact-name,body.theme-night .group-item-name { color:#ddd; }
body.theme-night .conv-preview,body.theme-night .chat-subtitle,body.theme-night .msg-name,body.theme-night .msg-time { color:#666; }
body.theme-night #chat-title { color:#eee; }
body.theme-night .cib-textarea { color:#ddd; }
body.theme-night .cib-icon-btn { color:#aaa; }
body.theme-night .sys-msg { color:rgba(255,255,255,.35); background:rgba(255,255,255,.07); }
body.theme-night .panel-empty { color:#555; }
body.theme-night .side-panel { color:#ccc; }

/* ── 主介面 ── */
#chat-page { width:100%; max-width:1440px; height:calc(100vh - 40px); display:flex; flex-shrink:0; border-radius:14px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.1); }

.nav-bar { width:56px; background:var(--nav-bg); display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:2px; flex-shrink:0; }
.nav-avatar { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:bold; color:#fff; cursor:pointer; margin-bottom:16px; overflow:hidden; transition:opacity .2s; }
.nav-avatar:hover { opacity:.85; }
.nav-avatar img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.nav-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; color:#888; transition:.2s; position:relative; }
.nav-icon:hover { background:var(--nav-hover); color:#fff; }
.nav-icon.active { background:var(--nav-active); color:#fff; }
.nav-badge { position:absolute; top:6px; right:6px; background:#e53935; color:#fff; border-radius:10px; font-size:10px; padding:1px 4px; min-width:14px; text-align:center; border:2px solid var(--nav-badge-border); }
.nav-bottom-start { margin-top:auto; }
.nav-settings-wrap { position:relative; }

/* 提示音選單 */
.sound-menu { position:absolute; left:52px; bottom:0; background:#fff; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.18); z-index:600; min-width:150px; padding:6px 0; }
.sound-menu-item { padding:9px 16px; font-size:13px; cursor:pointer; transition:.12s; white-space:nowrap; }
.sound-menu-item:hover { background:#f5f5f5; }
.sound-menu-item.active { background:#e8f0fe; color:#3a7bd5; font-weight:600; }

/* 主題選擇器 */
.theme-picker-box { background:#fff; border-radius:16px; padding:22px 20px; width:420px; box-shadow:0 8px 40px rgba(0,0,0,.28); }
.theme-picker-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.theme-picker-hd span { font-size:16px; font-weight:600; color:#222; }
.theme-picker-hd button { border:none; background:none; font-size:20px; cursor:pointer; color:#999; line-height:1; padding:0; }
.theme-picker-hd button:hover { color:#333; }
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.theme-swatch { cursor:pointer; border-radius:12px; overflow:hidden; border:3px solid transparent; transition:.15s; box-shadow:0 2px 10px rgba(0,0,0,.1); }
.theme-swatch:hover { transform:scale(1.04); box-shadow:0 4px 16px rgba(0,0,0,.18); }
.theme-swatch.active { border-color:#3a7bd5; box-shadow:0 0 0 2px rgba(58,123,213,.35); }
.theme-preview { height:70px; display:flex; }
.theme-preview-nav { width:18px; flex-shrink:0; }
.theme-preview-panel { width:38px; flex-shrink:0; }
.theme-preview-chat { flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:4px; gap:3px; }
.theme-preview-bubble { height:10px; border-radius:3px; }
.theme-preview-bubble.own { width:50%; align-self:flex-end; }
.theme-preview-bubble.other { width:60%; align-self:flex-start; }
.theme-label { text-align:center; font-size:12px; padding:6px 2px; background:#f8f8f8; color:#444; font-weight:600; }

/* ── 側邊面板 ── */
.side-panel { width:240px; min-width:240px; background:var(--panel-bg); border-right:1px solid var(--panel-border); display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; }
.panel-header { padding:16px 10px 10px; font-size:16px; font-weight:600; color:#333; border-bottom:1px solid var(--panel-header-border); flex-shrink:0; overflow:hidden; }
.panel-empty { padding:20px 14px; font-size:13px; color:#bbb; text-align:center; }
.create-group-btn { font-size:12px; color:#3a7bd5; background:none; border:1px solid #3a7bd5; border-radius:10px; padding:3px 8px; cursor:pointer; transition:.2s; white-space:nowrap; flex-shrink:0; }
.create-group-btn:hover { background:#3a7bd5; color:#fff; }

/* 對話項目 */
.conv-item { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; transition:.15s; border-bottom:1px solid #efefef; }
.conv-item:hover { background:#ececec; }
.conv-item.active { background:#e0e8f8; }
.conv-avatar { width:44px; height:44px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:bold; color:#fff; overflow:hidden; position:relative; }
.conv-avatar img { width:100%; height:100%; object-fit:cover; }
.conv-online { position:absolute; bottom:-2px; right:-2px; width:10px; height:10px; border-radius:50%; background:#4caf50; border:2px solid #f7f7f7; }
.conv-info { flex:1; min-width:0; }
.conv-name { font-size:14px; color:#222; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-preview { font-size:12px; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.conv-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.conv-time { font-size:11px; color:#bbb; }
.conv-badge { background:#e53935; color:#fff; border-radius:10px; font-size:11px; padding:1px 6px; min-width:18px; text-align:center; }
.conv-group-tag { display:inline-block; background:#7b52ab; color:#fff; font-size:10px; border-radius:4px; padding:0 4px; vertical-align:middle; margin-right:2px; line-height:16px; }

/* 群組項目 */
.group-item { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; transition:.15s; border-bottom:1px solid #efefef; }
.group-item:hover { background:#ececec; }
.group-item.active { background:#e0e8f8; }
.group-icon { width:44px; height:44px; border-radius:8px; background:#7b52ab; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.group-info { flex:1; min-width:0; }
.group-name { font-size:14px; color:#222; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.group-meta { font-size:12px; color:#999; margin-top:2px; }

/* 聯絡人 */
.contact-item { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; transition:.15s; border-bottom:1px solid #efefef; }
.contact-item:hover { background:#ececec; }
.contact-avatar { width:44px; height:44px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:bold; color:#fff; overflow:hidden; }
.contact-avatar img { width:100%; height:100%; object-fit:cover; }
.contact-name { font-size:14px; color:#222; font-weight:500; }
.contact-sig { font-size:12px; color:#aaa; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.contact-status { font-size:12px; color:#4caf50; margin-top:1px; }
.contact-offline { font-size:12px; color:#bbb; margin-top:1px; }

/* 邀請彈窗搜尋框 */
.invite-search-input {
  width:100%; box-sizing:border-box; padding:8px 14px;
  border:1.5px solid var(--panel-border,#ddd); border-radius:20px;
  font-size:13px; background:var(--chat-area-bg,#f5f7ff); color:inherit; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.invite-search-input:focus {
  border-color:var(--accent,#3a7bd5);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#3a7bd5) 18%, transparent);
}
body.theme-night .invite-search-input { background:#1e1e1e; border-color:#444; }

/* 邀請用戶列表 */
.invite-user-item { display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer; transition:.15s; }
.invite-user-item:hover { background:var(--hover-bg,#f5f5f5); }
.invite-user-item .ava { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:bold; color:#fff; overflow:hidden; flex-shrink:0; }
.invite-user-item .name { font-size:13px; color:var(--text-primary,#222); flex:1; min-width:0; }
.invite-user-item .name-main { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.invite-user-item .status { font-size:11px; color:#4caf50; }
.invite-user-item .member-tag { font-size:11px; color:#bbb; padding:3px 8px; border:1px solid var(--panel-border,#ddd); border-radius:20px; flex-shrink:0; white-space:nowrap; }
.invite-user-item .invite-send-btn { padding:5px 14px; background:var(--accent,#3a7bd5); color:#fff; border:none; border-radius:20px; cursor:pointer; font-size:12px; flex-shrink:0; transition:background .15s; }
.invite-user-item .invite-send-btn:hover { filter:brightness(1.1); }
body.theme-night .invite-user-item .name { color:#ddd; }

/* ── 聊天區 ── */
.chat-area { flex:1; display:flex; flex-direction:column; background:var(--chat-area-bg); min-width:0; }
.empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#ccc; font-size:15px; }
#chat-main { display:flex; flex-direction:column; height:100%; position:relative; }
.chat-header { padding:12px 16px; background:var(--chat-header-bg); border-bottom:1px solid var(--chat-header-border); display:flex; align-items:center; gap:10px; flex-shrink:0; }
.chat-header-avatar { width:38px; height:38px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:bold; color:#fff; overflow:hidden; }
.chat-header-avatar img { width:100%; height:100%; object-fit:cover; }
#chat-title { font-size:16px; font-weight:600; color:#222; }
.chat-subtitle { font-size:12px; color:#999; margin-top:1px; }
.invite-member-btn { padding:6px 14px; background:#3a7bd5; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; margin-left:auto; transition:.2s; }
.invite-member-btn:hover { background:#2d63b8; }

/* 訊息 */
.messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.msg { display:flex; gap:10px; }
.msg.mine { flex-direction:row-reverse; }
.msg-avatar { width:38px; height:38px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:bold; color:#fff; overflow:hidden; }
.msg-avatar img { width:100%; height:100%; object-fit:cover; }
.msg-body { display:flex; flex-direction:column; gap:3px; max-width:60%; align-items:flex-start; }
.msg.mine .msg-body { align-items:flex-end; }
.msg-name { font-size:12px; color:#aaa; }
.msg-bubble { background:var(--msg-other-bg); padding:9px 13px; border-radius:4px; font-size:14px; line-height:1.6; color:var(--msg-other-text); word-break:break-word; box-shadow:0 1px 2px rgba(0,0,0,.08); white-space:pre-wrap; }
.msg.mine .msg-bubble { background:var(--msg-own-bg); color:var(--msg-own-text); }
.msg-bubble img { max-width:220px; max-height:220px; border-radius:4px; display:block; cursor:zoom-in; }
.msg-bubble .file-link { display:flex; align-items:center; gap:6px; color:#3a7bd5; text-decoration:none; font-size:13px; }
.sys-msg { display:flex; align-items:center; gap:8px; padding:10px 16px; color:#bbb; }
.sys-msg::before,.sys-msg::after { content:''; flex:1; height:1px; background:linear-gradient(to right,transparent,#ddd,transparent); }
body.theme-night .sys-msg::before,body.theme-night .sys-msg::after { background:linear-gradient(to right,transparent,#444,transparent); }
.sys-msg span { white-space:nowrap; background:rgba(0,0,0,.045); border-radius:20px; padding:3px 12px; font-size:11.5px; letter-spacing:.2px; }
body.theme-night .sys-msg span { background:rgba(255,255,255,.07); }
.msg-status { font-size:11px; margin-top:2px; text-align:right; }
.check-sent { display:inline-flex; align-items:center; gap:1px; opacity:.45; }
.check-read { display:inline-flex; align-items:center; gap:1px; }
.check-read .sg-tick:last-child { animation: sg-pop .25s ease forwards; }
.sg-tick { width:8px; height:18px; display:inline-block; vertical-align:middle; transform:rotate(-20deg); }
@keyframes sg-pop { from { opacity:0; transform:rotate(-20deg) scale(.6); } to { opacity:1; transform:rotate(-20deg) scale(1); } }

/* 工具列、輸入 */
.toolbar { background:#fff; border-top:1px solid #e5e5e5; padding:6px 12px; display:flex; gap:4px; flex-shrink:0; position:relative; }
.tool-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:4px; color:#666; transition:.15s; }
.tool-icon:hover { background:#f0f0f0; color:#333; }
.upload-preview { padding:6px 14px; background:#e8f4ff; border-top:1px solid #cce5ff; display:flex; align-items:center; gap:8px; font-size:13px; color:#3a7bd5; flex-shrink:0; }
.upload-preview button { background:none; border:none; cursor:pointer; color:#999; font-size:15px; }
.upload-spinner { display:inline-block; width:13px; height:13px; border:2px solid rgba(58,123,213,.25); border-top-color:#3a7bd5; border-radius:50%; animation:upload-spin .7s linear infinite; vertical-align:middle; margin-right:2px; flex-shrink:0; }
@keyframes upload-spin { to { transform:rotate(360deg); } }
.input-wrap { background:#fff; padding:10px 14px 4px; flex-shrink:0; }
/* #msg-input styles are in .cib-textarea */
.action-bar { background:#fff; padding:8px 14px 12px; display:flex; justify-content:flex-end; flex-shrink:0; }
.btn-send { padding:7px 22px; border:none; border-radius:4px; background:#3a7bd5; color:#fff; cursor:pointer; font-size:13px; transition:.2s; }
.btn-send:hover { background:#2d63b8; }

/* 燈箱 */
#lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:200; align-items:center; justify-content:center; flex-direction:column; gap:14px; }
#lightbox.show { display:flex; }
#lightbox img { max-width:90vw; max-height:82vh; border-radius:8px; object-fit:contain; cursor:default; }
.lightbox-close { position:absolute; top:18px; right:22px; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:20px; width:38px; height:38px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; }
.lightbox-close:hover { background:rgba(255,255,255,.30); }
.lightbox-save { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; padding:8px 22px; border-radius:20px; font-size:14px; cursor:pointer; transition:.15s; backdrop-filter:blur(4px); }
.lightbox-save:hover { background:rgba(255,255,255,.28); }

/* 右鍵選單 */
.msg-ctx-menu { position:fixed; background:#fff; border-radius:10px; box-shadow:0 4px 24px rgba(0,0,0,.18); z-index:500; min-width:140px; padding:4px 0; }
.ctx-item { padding:10px 16px; font-size:14px; cursor:pointer; color:#333; transition:.12s; user-select:none; }
.ctx-item:hover { background:#f5f5f5; }
.ctx-item.ctx-danger { color:#e53935; }
.ctx-sep { height:1px; background:#eee; margin:4px 0; }
/* 翻譯結果 */
.msg-translation { font-size:14px; color:#444; margin-top:6px; padding:8px 12px; background:linear-gradient(135deg,#f0f4ff,#f7f0ff); border-left:3px solid #7c8bda; border-radius:0 8px 8px 0; line-height:1.7; letter-spacing:.3px; }
/* 編輯提示條 */
.edit-bar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#f0f4ff; border-top:2px solid #3a7bd5; flex-shrink:0; }
.edit-bar-icon { font-size:16px; flex-shrink:0; }
.edit-bar-info { flex:1; min-width:0; }
.edit-bar-label { font-size:12px; color:#3a7bd5; font-weight:600; }
.edit-bar-preview { font-size:13px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.edit-bar-cancel { background:none; border:none; cursor:pointer; font-size:18px; color:#999; flex-shrink:0; }
.edit-bar-cancel:hover { color:#333; }
/* 已收回、已編輯 */
.recalled-text { color:#bbb; font-style:italic; font-size:13px; }
.edited-tag { font-size:11px; color:rgba(0,0,0,0.35); font-style:italic; margin-left:4px; }
.msg.mine .edited-tag { color:rgba(0,0,0,0.4); }

/* 表情選擇器 */
.emoji-picker { position:absolute; bottom:100%; left:0; right:0; background:#fff; border:1px solid #e0e0e0; border-radius:10px 10px 0 0; box-shadow:0 -4px 20px rgba(0,0,0,.12); flex-direction:column; z-index:50; max-height:280px; }
.emoji-cats { display:flex; gap:2px; padding:6px 8px; border-bottom:1px solid #eee; overflow-x:auto; flex-shrink:0; }
.emoji-cats::-webkit-scrollbar { height:0; }
.emoji-cat-btn { background:none; border:none; cursor:pointer; padding:4px 8px; border-radius:6px; font-size:18px; transition:.15s; flex-shrink:0; }
.emoji-cat-btn:hover { background:#f0f0f0; }
.emoji-cat-btn.active { background:#e8f0fe; }
.emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,36px); gap:2px; padding:8px; overflow-y:auto; flex:1; }
.emoji-item { background:none; border:none; cursor:pointer; font-size:22px; width:36px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center; transition:.1s; line-height:1; }
.emoji-item:hover { background:#f0f0f0; transform:scale(1.2); }


/* 錄音狀態麥克風按鈕 */
#mic-btn.recording { color:#e53935; }
#mic-btn.recording svg { animation: pulse-mic 1s ease-in-out infinite; }
@keyframes pulse-mic { 0%,100%{opacity:1} 50%{opacity:.4} }

/* 錄音條 */
.recording-bar { display:flex; align-items:center; gap:8px; padding:6px 14px; background:#fff3f3; border-top:1px solid #ffcdd2; flex-shrink:0; }
.rec-dot { width:10px; height:10px; border-radius:50%; background:#e53935; animation:pulse-dot 1s ease-in-out infinite; flex-shrink:0; }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.6);opacity:.5} }
#rec-timer { font-size:13px; font-weight:600; color:#e53935; min-width:36px; }
.rec-label { font-size:13px; color:#888; flex:1; }
.rec-cancel { padding:4px 10px; background:none; border:1px solid #ccc; border-radius:6px; cursor:pointer; font-size:12px; color:#666; }
.rec-cancel:hover { background:#f5f5f5; }

/* 語音訊息氣泡 */
.msg-voice audio { width:200px; height:36px; outline:none; }
.voice-transcript { margin-top:6px; font-size:13px; color:var(--msg-other-text); opacity:.85; border-top:1px solid rgba(255,255,255,.12); padding-top:5px; white-space:pre-wrap; }
.msg.mine .voice-transcript { color:var(--msg-own-text); border-top-color:rgba(0,0,0,.12); }
.voice-transcript.error { color:#e87070; }


/* ID 搜尋 */
.id-search-wrap { display:flex; gap:6px; padding:8px 10px; border-bottom:1px solid #e8e8e8; flex-shrink:0; overflow:hidden; }
.id-search-wrap input { flex:1; min-width:0; padding:7px 8px; border:1px solid #ddd; border-radius:6px; font-size:13px; outline:none; transition:.2s; }
.id-search-wrap input:focus { border-color:#3a7bd5; }
.id-search-wrap button { padding:7px 10px; background:#3a7bd5; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; white-space:nowrap; transition:.2s; flex-shrink:0; }
.id-search-wrap button:hover { background:#2d63b8; }
.search-result-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#fff; border-radius:12px; margin:8px 12px; box-shadow:0 2px 8px rgba(58,123,213,.10); border:1px solid #e8f0fe; }
.search-result-info { flex:1; min-width:48px; overflow:hidden; }
.search-result-item .contact-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.search-result-id { font-size:11px; color:#999; margin-top:2px; }
.search-result-sig { font-size:12px; color:#aaa; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-self-tag { font-size:12px; color:#bbb; white-space:nowrap; }
.search-msg { padding:8px 14px; font-size:13px; color:#999; }
.search-action-btn { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border:none; border-radius:16px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .18s; flex-shrink:0; }
.search-action-btn.add { background:linear-gradient(135deg,#3a7bd5,#5a9bf5); color:#fff; box-shadow:0 2px 8px rgba(58,123,213,.35); }
.search-action-btn.add:hover { background:linear-gradient(135deg,#2d62b5,#4a8be5); box-shadow:0 4px 14px rgba(58,123,213,.45); transform:translateY(-1px); }
.search-action-btn.sent { background:#f0f0f0; color:#aaa; cursor:default; }
.search-action-btn.msg { background:linear-gradient(135deg,#43a047,#66bb6a); color:#fff; box-shadow:0 2px 8px rgba(67,160,71,.30); }
.search-action-btn.msg:hover { background:linear-gradient(135deg,#388e3c,#57ae5b); box-shadow:0 4px 14px rgba(67,160,71,.40); transform:translateY(-1px); }

/* ── 好友操作下拉選單 ── */
.friend-action-menu { position:fixed; background:#fff; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.18); z-index:600; min-width:140px; padding:4px 0; }
.friend-action-menu div { padding:9px 16px; font-size:13px; cursor:pointer; color:#333; transition:.12s; }
.friend-action-menu div:hover { background:#f5f5f5; }
.friend-action-menu div:last-child { color:#e53935; }
.friend-menu-btn { background:none; border:none; cursor:pointer; color:#999; font-size:18px; padding:2px 6px; border-radius:4px; transition:.15s; line-height:1; }
.friend-menu-btn:hover { background:#eee; color:#333; }

/* ── 好友系統 ── */
.friend-req-section-title { padding:8px 12px 4px; font-size:11px; color:#999; font-weight:600; text-transform:uppercase; letter-spacing:.5px; background:#fffbe6; border-bottom:1px solid #ffe082; }
.friend-req-item { display:flex; align-items:center; gap:8px; padding:8px 10px; background:#fffbe6; border-bottom:1px solid #ffe082; }
.fr-accept-btn { padding:4px 10px; background:#3a7bd5; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; white-space:nowrap; }
.fr-accept-btn:hover { background:#2d63b8; }
.fr-decline-btn { padding:4px 10px; background:#fff; color:#888; border:1px solid #ccc; border-radius:6px; cursor:pointer; font-size:12px; white-space:nowrap; }
.fr-decline-btn:hover { background:#f5f5f5; }
.fr-add-btn { padding:5px 10px; background:#3a7bd5; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:12px; white-space:nowrap; flex-shrink:0; }
.fr-add-btn:hover { background:#2d63b8; }
.fr-add-btn.sent { background:#aaa; cursor:default; }
.fr-msg-btn { padding:5px 10px; background:#4caf50; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:12px; white-space:nowrap; flex-shrink:0; }
.fr-msg-btn:hover { background:#388e3c; }
.friend-tag { font-size:10px; background:#e3f2fd; color:#1565c0; border-radius:8px; padding:1px 6px; margin-left:6px; font-weight:400; }
/* 非好友遮罩 */
.not-friend-bar { display:none; align-items:center; justify-content:space-between; padding:12px 16px; background:#fff8e1; border-top:2px solid #ffb300; flex-shrink:0; font-size:13px; color:#6d4c00; gap:10px; }
.not-friend-bar button { padding:6px 16px; background:#ffb300; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap; }
.not-friend-bar button:hover { background:#f9a825; }
.not-friend-bar button:disabled { background:#aaa; cursor:default; }
#chat-main.not-friend .toolbar,
#chat-main.not-friend .input-wrap,
#chat-main.not-friend .action-bar,
#chat-main.not-friend .chat-input-bar,
#chat-main.not-friend .recording-bar,
#chat-main.not-friend .upload-preview,
#chat-main.not-friend .edit-bar { display:none !important; }
#chat-main.not-friend #not-friend-bar { display:flex !important; }
/* 公告面板 */
.ann-panel { position:fixed; bottom:70px; left:56px; width:300px; max-height:420px; background:#fff; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,.18); z-index:200; flex-direction:column; border:1px solid #e0e0e0; overflow:hidden; }
.ann-panel-hd { padding:12px 14px; background:#f7f7f7; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:600; color:#333; flex-shrink:0; }
.ann-panel-hd button { background:none; border:none; cursor:pointer; font-size:16px; color:#999; }
.ann-panel-list { overflow-y:auto; flex:1; }
.ann-item { padding:10px 14px; border-bottom:1px solid #f0f0f0; cursor:pointer; transition:.15s; }
.ann-item:hover { background:#f5f9ff; }
.ann-item-title { font-size:13px; font-weight:600; color:#222; }
.ann-item-preview { font-size:12px; color:#888; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ann-item-meta { font-size:11px; color:#bbb; margin-top:4px; }
/* 公告彈出通知 */
.ann-toast { position:fixed; bottom:20px; right:20px; width:300px; background:#fff; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,.2); padding:14px 16px; cursor:pointer; z-index:1000; border-left:4px solid #3a7bd5; transform:translateX(340px); transition:transform .4s cubic-bezier(.4,0,.2,1); }
.ann-toast.show { transform:translateX(0); }
.ann-toast-title { font-size:14px; font-weight:700; color:#222; margin-bottom:4px; }
.ann-toast-body { font-size:13px; color:#666; line-height:1.5; }

::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#f0f0f0; }
::-webkit-scrollbar-thumb { background:#bbb; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#999; }

/* ── 聊天頭部設定按鈕 ── */
.chat-settings-btn {
  background:none; border:none; cursor:pointer; font-size:18px; color:#666;
  padding:4px 10px; border-radius:6px; transition:.15s; letter-spacing:3px; line-height:1;
  flex-shrink:0; margin-left:4px; font-weight:700;
}
.chat-settings-btn:hover { background:#f0f0f0; color:#222; }

/* ── Contact Profile Page ── */
#contact-profile-overlay {
  position:fixed; left:56px; top:0; right:0; bottom:0;
  background:rgba(0,0,0,.4); z-index:450; display:flex; align-items:center; justify-content:center;
}
.cp-modal-inner {
  background:#f2f2f2; border-radius:14px; width:360px; max-height:86vh;
  overflow-y:auto; display:flex; flex-direction:column;
  box-shadow:0 8px 36px rgba(0,0,0,.28);
}
.cp-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 6px; background:#f7f7f7; border-bottom:1px solid #e8e8e8;
  position:sticky; top:0; z-index:1; flex-shrink:0;
}
.cp-nav-btn {
  background:none; border:none; font-size:22px; cursor:pointer; color:#555;
  padding:4px 10px; border-radius:6px; line-height:1; transition:.15s;
}
.cp-nav-btn:hover { background:#e8e8e8; color:#222; }
.cp-hero {
  display:flex; align-items:flex-start; gap:18px; padding:24px 20px 26px;
  background:#fff; border-bottom:8px solid #f2f2f2; flex-shrink:0;
}
.cp-hero-avatar {
  width:70px; height:70px; border-radius:12px; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:bold; color:#fff;
}
.cp-hero-avatar img { width:100%; height:100%; object-fit:cover; }
.cp-hero-right { flex:1; min-width:0; }
.cp-hero-name {
  font-size:20px; font-weight:600; color:#222;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:5px;
}
.cp-friend-badge { font-size:15px; }
.cp-super-star { font-size:14px; }
.cp-hero-name-sub { font-size:12px; color:#bbb; margin-bottom:4px; }
.cp-hero-id-loc { font-size:13px; color:#888; line-height:1.7; }
.cp-sections { background:#fff; flex-shrink:0; }
.cp-section { border-bottom:1px solid #f0f0f0; }
.cp-section-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; cursor:pointer; font-size:15px; color:#333; transition:.12s;
}
.cp-section-row:hover { background:#fafafa; }
.cp-arrow { color:#c8c8c8; font-size:20px; font-weight:300; }
.cp-section-sub { padding:0 20px 14px; font-size:13px; color:#999; line-height:1.6; }
.cp-action-btns {
  background:#fff; margin-top:10px; flex-shrink:0;
  border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;
}
.cp-action-btn {
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 20px; background:none; border:none; border-bottom:1px solid #f0f0f0;
  cursor:pointer; font-size:15px; color:#3a7bd5; font-weight:500; transition:.15s;
}
.cp-action-btn:hover { background:#f0f6ff; }
.cp-action-btn:last-child { border-bottom:none; }

/* ── Contact Settings Page ── */
#contact-settings-overlay {
  position:fixed; left:56px; top:0; right:0; bottom:0;
  background:rgba(0,0,0,.4); z-index:460; display:flex; align-items:center; justify-content:center;
}
.cs-modal-inner {
  background:#f2f2f2; border-radius:14px; width:360px; max-height:86vh;
  overflow-y:auto; display:flex; flex-direction:column;
  box-shadow:0 8px 36px rgba(0,0,0,.28);
}
.cs-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 6px; background:#f7f7f7; border-bottom:1px solid #e8e8e8;
  position:sticky; top:0; z-index:1; flex-shrink:0;
}
.cs-title { font-size:16px; font-weight:600; color:#333; }
.cs-list { background:#fff; }
.cs-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid #f0f0f0;
  font-size:15px; color:#333; transition:.12s;
}
.cs-item:last-child { border-bottom:none; }
.cs-item-arrow { cursor:pointer; }
.cs-item-arrow:hover { background:#fafafa; }
.cs-item-danger {
  color:#e53935; justify-content:center; cursor:pointer;
  font-weight:500;
}
.cs-item-danger:hover { background:#fff5f5; }
/* Toggle switch */
.cs-toggle { position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; cursor:pointer; }
.cs-toggle input { opacity:0; width:0; height:0; }
.cs-toggle-slider {
  position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
  background:#ccc; border-radius:26px; transition:.28s;
}
.cs-toggle-slider:before {
  position:absolute; content:''; height:20px; width:20px;
  left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.28s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.cs-toggle input:checked + .cs-toggle-slider { background:#07c160; }
.cs-toggle input:checked + .cs-toggle-slider:before { transform:translateX(20px); }

/* ── 新版聊天輸入列 ── */
.chat-input-bar {
  display:flex; align-items:flex-end; gap:4px;
  padding:8px 10px 10px; background:var(--input-bar-bg); border-top:1px solid var(--input-bar-border);
  flex-shrink:0; position:relative;
}
.cib-more-wrap { position:relative; flex-shrink:0; }
.cib-icon-btn {
  width:38px; height:38px; border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#555;
  border-radius:50%; transition:.15s; flex-shrink:0;
}
.cib-icon-btn:hover { background:#f0f0f0; color:#222; }
.cib-input-wrap {
  flex:1; min-width:0; position:relative;
  background:var(--input-field-bg); border-radius:20px;
  display:flex; align-items:flex-end; padding:7px 40px 7px 14px;
}
.cib-textarea {
  flex:1; border:none; outline:none; background:transparent;
  font-size:14px; font-family:inherit; color:var(--input-text);
  line-height:1.45; max-height:100px; overflow-y:auto;
  min-height:20px; word-break:break-word; cursor:text; white-space:pre-wrap;
}
.cib-textarea:empty:before {
  content:attr(data-placeholder); color:#aaa; pointer-events:none;
}
.cib-textarea .mention-tag { color:#e53935; font-weight:500; }
.cib-emoji-btn {
  position:absolute; right:8px; bottom:7px;
  width:28px; height:28px; border:none; background:none; cursor:pointer;
  color:#888; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.15s;
}
.cib-emoji-btn:hover { color:#555; }
.cib-emoji-btn.active { color:#3a7bd5; }
/* emoji picker 在新版列中浮在上方 */
.cib-input-wrap #emoji-picker {
  position:absolute; bottom:calc(100% + 8px); left:-60px; right:-60px;
  border-radius:10px;
}
.cib-mic-btn { color:#555; }
.cib-send-btn { color:#3a7bd5; }
.cib-send-btn:hover { background:#e8f0ff !important; }
/* "+" 更多選單 */
.input-more-menu {
  position:absolute; bottom:48px; left:0;
  background:#fff; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.15);
  min-width:160px; padding:4px 0; z-index:200;
}
.imm-item {
  padding:12px 16px; font-size:14px; color:#333; cursor:pointer; transition:.12s;
}
.imm-item:hover { background:#f5f5f5; }
/* 錄音時麥克風動畫 */
#mic-btn.recording { color:#e53935; }
#mic-btn.recording svg { animation:pulse-mic 1s ease-in-out infinite; }

/* ── 名片訊息 ── */
.contact-card-msg {
  background:#fff; border:1px solid #e0e0e0; border-radius:12px;
  overflow:hidden; width:180px; cursor:pointer;
  transition:.15s; box-shadow:0 1px 6px rgba(0,0,0,.08); display:inline-block;
}
.contact-card-msg:hover { box-shadow:0 4px 14px rgba(0,0,0,.14); transform:translateY(-1px); }
.ccm-inner { padding:20px 14px 14px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ccm-avatar-lg {
  width:68px; height:68px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:bold; color:#fff;
  background-size:cover; background-position:center;
}
.ccm-name-lg { font-size:15px; font-weight:600; color:#222; text-align:center; word-break:break-word; }
.ccm-btn {
  border-top:1px solid #f0f0f0; padding:10px 14px;
  font-size:13px; color:#3a7bd5; text-align:center; font-weight:500;
  transition:.12s;
}
.contact-card-msg:hover .ccm-btn { background:#f5f9ff; }

/* 分享好友列表項 */
.share-friend-item {
  display:flex; align-items:center; gap:12px; padding:10px 18px;
  cursor:pointer; transition:.12s; border-bottom:1px solid #f5f5f5;
}
.share-friend-item:hover { background:#f9f9f9; }
.share-sent-tag { font-size:12px; color:#4caf50; white-space:nowrap; flex-shrink:0; }

/* Simple toast */
.simple-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:rgba(0,0,0,.75); color:#fff; padding:10px 22px; border-radius:20px;
  font-size:13px; z-index:2000; transition:transform .3s ease; white-space:nowrap; pointer-events:none;
}
.simple-toast.show { transform:translateX(-50%) translateY(0); }

/* 入群通知卡片 */
.group-join-notif {
  position:fixed; top:20px; right:20px; z-index:3000;
  background:#fff; border-radius:14px; padding:14px 16px;
  box-shadow:0 8px 32px rgba(0,0,0,.18); min-width:240px; max-width:300px;
  display:flex; align-items:center; gap:12px;
  transform:translateX(120%); transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  border-left:4px solid #3a7bd5; cursor:pointer;
}
.group-join-notif.show { transform:translateX(0); }
.group-join-notif-icon {
  width:44px; height:44px; border-radius:10px; background:#3a7bd5;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; overflow:hidden;
}
.group-join-notif-icon img { width:100%; height:100%; object-fit:cover; }
.group-join-notif-body { flex:1; min-width:0; }
.group-join-notif-title { font-size:12px; color:#888; margin-bottom:2px; }
.group-join-notif-name { font-size:15px; font-weight:600; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.group-join-notif-sub { font-size:11.5px; color:#3a7bd5; margin-top:3px; }
body.theme-night .group-join-notif { background:#2a2a2a; border-left-color:#5a9cf8; }
body.theme-night .group-join-notif-name { color:#eee; }
body.theme-night .group-join-notif-sub { color:#5a9cf8; }

/* ── 回覆引用欄 ── */
#reply-bar {
  display:none; align-items:center; gap:8px;
  padding:6px 14px; background:#f0f4ff; border-top:2px solid #3a7bd5;
  font-size:13px;
}
#reply-bar.active { display:flex; }
.reply-bar-line { flex:1; min-width:0; }
.reply-bar-name { font-weight:600; color:#3a7bd5; margin-bottom:2px; }
.reply-bar-preview { color:#666; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.reply-bar-cancel {
  flex-shrink:0; background:none; border:none; font-size:18px;
  color:#999; cursor:pointer; padding:0 4px; line-height:1;
}
.reply-bar-cancel:hover { color:#e53935; }

/* ── 引用塊（消息內） ── */
.reply-quote {
  border-radius:10px; margin-bottom:6px; cursor:pointer;
  background:rgba(0,0,0,.05); overflow:hidden;
  border:1px solid rgba(0,0,0,.08); max-width:260px;
}
.reply-quote:hover { background:rgba(58,123,213,.1); }
.reply-quote-header {
  display:flex; align-items:center; gap:8px; padding:8px 10px 6px;
}
.reply-quote-avatar {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:bold; color:#fff;
  background-size:cover; background-position:center;
}
.reply-quote-name { font-size:13px; font-weight:600; color:#333; }
.reply-quote-body {
  padding:6px 10px 8px; font-size:14px; color:#444;
  border-top:1px solid rgba(0,0,0,.08);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}

/* ── 轉發標記 ── */
.forwarded-tag {
  font-size:11px; color:#888; font-style:italic;
  margin-bottom:3px; display:block;
}

/* ── @提及彈窗 ── */
#mention-popup {
  position:fixed; bottom:70px; left:80px; right:20px;
  background:#fff; border-radius:12px; box-shadow:0 4px 24px rgba(0,0,0,.18);
  max-height:240px; overflow-y:auto;
  z-index:1000; display:none;
}
.mention-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; cursor:pointer; transition:.12s;
}
.mention-item:hover, .mention-item.active { background:#f0f4ff; }
.mention-item .mi-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:bold; color:#fff;
  background-size:cover; background-position:center;
}
.mention-item .mi-info { display:flex; flex-direction:column; }
.mention-item .mi-name { font-size:14px; font-weight:600; color:#222; }
.mention-item .mi-id { font-size:12px; color:#888; margin-top:1px; }

/* @提及高亮 */
.mention-tag { color:#3a7bd5; font-weight:600; }
/* 訊息內超連結 */
.msg-link { color:#0d47a1; text-decoration:underline; word-break:break-all; }
.msg.mine .msg-link { color:#0d47a1; }

/* ── 群搜索欄 ── */
#group-search-bar {
  display:flex; align-items:center; gap:6px;
  padding:7px 12px; background:var(--panel-bg,#fff); border-bottom:1px solid var(--panel-border,#eee);
  flex-shrink:0;
}
.gs-pill {
  flex:1; display:flex; align-items:center; gap:8px;
  border:1.5px solid var(--accent,#3a7bd5); border-radius:999px;
  padding:5px 14px; background:var(--chat-area-bg,#f5f7ff);
  transition:box-shadow .15s;
}
.gs-pill:focus-within { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#3a7bd5) 18%, transparent); }
#group-search-input {
  flex:1; border:none; background:none; font-size:13px;
  outline:none; color:inherit; min-width:0;
}
#group-search-input::placeholder { color:#aaa; }
#group-search-count { font-size:11px; color:#aaa; white-space:nowrap; flex-shrink:0; }
.gs-nav-btn {
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--panel-border,#ddd); background:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-secondary,#666); font-size:13px;
  transition:background .12s, color .12s;
}
.gs-nav-btn:hover { background:var(--accent,#3a7bd5); color:#fff; border-color:var(--accent,#3a7bd5); }
body.theme-night .gs-pill { background:#1e1e1e; }
body.theme-night .gs-nav-btn { border-color:#444; color:#aaa; }

/* ── 置頂訊息條 ── */
.pinned-msg-bar {
  background:linear-gradient(90deg,#f3eeff 0%,#faf8ff 100%);
  border-bottom:1px solid #ddd6f7;
  flex-shrink:0; position:relative; overflow:hidden;
}
.pinned-bar-row {
  display:flex; align-items:center; gap:10px;
  padding:0 14px 0 0; min-height:46px; cursor:pointer;
  transition:background .15s;
}
.pinned-bar-row:hover { background:rgba(123,82,171,.06); }
.pinned-msg-accent {
  width:4px; align-self:stretch; flex-shrink:0;
  background:linear-gradient(180deg,#7b52ab,#a67cdb);
  border-radius:0 2px 2px 0;
}
.pinned-msg-icon {
  font-size:18px; flex-shrink:0; line-height:1;
  filter:drop-shadow(0 1px 2px rgba(123,82,171,.3));
}
.pinned-msg-content { flex:1; min-width:0; padding:8px 0; user-select:none; }
.pinned-msg-label {
  font-size:11px; font-weight:700; line-height:1.3; letter-spacing:.4px;
  background:linear-gradient(90deg,#7b52ab,#a67cdb);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.pinned-msg-text {
  font-size:13px; color:#555; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; line-height:1.5; margin-top:1px;
}
.pinned-bar-expand-btn {
  background:none; border:none; color:#a67cdb; font-size:14px;
  cursor:pointer; padding:4px 6px; border-radius:5px; flex-shrink:0; line-height:1;
  transition:color .15s,background .15s;
}
.pinned-bar-expand-btn:hover { background:#ece4ff; }
.pinned-msg-close {
  background:none; border:none; color:#bbb; font-size:14px;
  cursor:pointer; padding:3px 5px; border-radius:5px; flex-shrink:0; line-height:1;
  transition:color .15s,background .15s;
}
.pinned-msg-close:hover { color:#e53935; background:#fce4ec; }
/* 展開列表 */
.pinned-bar-list {
  border-top:1px solid #e8e0f8; max-height:160px; overflow-y:auto;
  padding:4px 0;
}
.pinned-item {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; transition:background .12s;
}
.pinned-item:hover { background:rgba(123,82,171,.05); }
.pin-scope-tag {
  font-size:10px; font-weight:700; padding:1px 5px; border-radius:3px;
  flex-shrink:0; letter-spacing:.3px;
}
.pin-scope-group { background:#ede8ff; color:#7b52ab; }
.pin-scope-local  { background:#e8f5e9; color:#388e3c; }
.pinned-item-text {
  flex:1; min-width:0; font-size:13px; color:#444;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
.pinned-item-text:hover { color:#7b52ab; }
.pinned-item-jump-btn, .pinned-item-unpin-btn {
  background:none; border:none; cursor:pointer; padding:3px 5px;
  border-radius:4px; font-size:13px; flex-shrink:0; line-height:1;
  transition:background .12s;
}
.pinned-item-jump-btn { color:#7b52ab; }
.pinned-item-jump-btn:hover { background:#ede8ff; }
.pinned-item-unpin-btn { color:#bbb; }
.pinned-item-unpin-btn:hover { color:#e53935; background:#fce4ec; }

/* ── 群公告條 ── */
.group-ann-bar {
  display:flex; align-items:flex-start; gap:8px;
  padding:9px 14px; background:#e3f7f0;
  border-bottom:1px solid #a5d6c8; flex-shrink:0;
}
.group-ann-label { font-size:11px; font-weight:700; color:#0a7c55; letter-spacing:.5px; margin-bottom:2px; }
.group-ann-text {
  flex:1; min-width:0; font-size:13px; color:#1a5c45; line-height:1.55;
  cursor:pointer; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  white-space:pre-wrap;
}
.group-ann-bar.expanded .group-ann-text { -webkit-line-clamp:unset; }
.group-ann-close {
  background:none; border:none; color:#7abead; font-size:15px;
  cursor:pointer; padding:1px 5px; border-radius:4px; flex-shrink:0; transition:.12s;
}
.group-ann-close:hover { color:#0a7c55; background:#c0e8df; }

/* 搜索高亮 */
.msg-highlight { background:color-mix(in srgb,var(--accent,#3a7bd5) 8%,transparent); border-radius:8px; }
.msg-highlight-current { background:color-mix(in srgb,var(--accent,#3a7bd5) 18%,transparent) !important; border-radius:8px; outline:2px solid color-mix(in srgb,var(--accent,#3a7bd5) 50%,transparent); }

/* 消息高亮 */
@keyframes msg-flash {
  0%   { background:transparent; box-shadow:none; }
  10%  { background:rgba(123,82,171,.18); box-shadow:0 0 0 3px rgba(123,82,171,.35); }
  40%  { background:rgba(123,82,171,.13); box-shadow:0 0 0 3px rgba(123,82,171,.25); }
  100% { background:transparent; box-shadow:none; }
}
.msg-flash { animation:msg-flash 2s ease; border-radius:10px; }

/* 回到最新訊息浮動按鈕 */
.back-to-latest-btn {
  position:absolute; bottom:72px; left:50%; transform:translateX(-50%);
  background:rgba(50,50,60,.82); color:#fff; border:none; border-radius:20px;
  padding:7px 18px; font-size:13px; font-weight:500; cursor:pointer;
  backdrop-filter:blur(6px); box-shadow:0 2px 12px rgba(0,0,0,.25);
  z-index:30; white-space:nowrap; transition:opacity .2s,transform .2s;
}
.back-to-latest-btn:hover { background:rgba(30,30,40,.9); transform:translateX(-50%) translateY(-2px); }

/* 回到底部圓形按鈕 */
.scroll-to-bottom-btn {
  position:absolute; bottom:80px; right:16px;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:none; cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
  color:#555; z-index:30;
  transition:opacity .2s, transform .2s, box-shadow .2s;
  opacity:0; pointer-events:none;
}
.scroll-to-bottom-btn.visible {
  opacity:1; pointer-events:auto;
}
.scroll-to-bottom-btn:hover {
  box-shadow:0 4px 18px rgba(0,0,0,.22);
  transform:translateY(-2px); color:#7b52ab;
}
.scroll-bottom-badge {
  position:absolute; top:-4px; right:-4px;
  background:#e53935; color:#fff; font-size:10px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px; padding:0 3px;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* ── 置頂樣式 ── */
.conv-item.pinned, .group-item.pinned { background:#fffbf0; border-left:3px solid #f5a623; }
.conv-item.pinned:hover, .group-item.pinned:hover { background:#fff3d6; }
.pin-icon { font-size:11px; vertical-align:middle; margin-right:2px; }

/* ── 列表更多按鈕 ── */
.list-more-btn {
  flex-shrink:0; background:none; border:none; cursor:pointer;
  font-size:16px; color:#bbb; padding:2px 6px; border-radius:6px;
  opacity:0; transition:opacity .15s, color .15s;
  line-height:1; align-self:center;
}
.conv-item:hover .list-more-btn,
.group-item:hover .list-more-btn { opacity:1; }
.list-more-btn:hover { color:#555; background:#e8e8e8; }
.conv-item.pinned .list-more-btn,
.group-item.pinned .list-more-btn { opacity:1; color:#f5a623; }

/* ── 群組資訊頁 ── */
#group-info-overlay {
  position:fixed; left:56px; top:0; right:0; bottom:0;
  background:rgba(0,0,0,.4); z-index:490;
  display:flex; align-items:center; justify-content:center;
}
.gi-modal-inner {
  background:linear-gradient(160deg,#ede9fb 0%,#e8f0fe 60%,#f4f4f8 100%);
  border-radius:14px; width:420px; max-height:88vh;
  overflow-y:auto; display:flex; flex-direction:column;
  box-shadow:0 8px 36px rgba(0,0,0,.28);
}
.gi-modal-inner .gs-topbar {
  background:#fff; border-radius:14px 14px 0 0;
}
.gi-modal-inner .cp-hero {
  flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:20px 20px 28px;
  background:transparent; border-bottom:none;
}
.gi-modal-inner .cp-hero-avatar {
  width:86px; height:86px; border-radius:50%;
  box-shadow:0 4px 18px rgba(90,60,180,.22);
}
.gi-modal-inner .cp-hero-right { width:100%; }
.gi-modal-inner .cp-hero-name { justify-content:center; font-size:20px; }
.gi-modal-inner .cp-hero-id-loc { text-align:center; color:#888; }
.gi-modal-inner .cp-sections {
  background:transparent; margin:0 12px; display:flex; flex-direction:column; gap:10px;
}
.gi-modal-inner .cp-section {
  background:#fff; border-radius:14px; border-bottom:none;
  box-shadow:0 2px 10px rgba(90,60,180,.07); overflow:hidden;
}
.gi-modal-inner .cp-section-row {
  border-radius:14px 14px 0 0; font-weight:600; color:#555; font-size:14px;
}
.gi-modal-inner #gi-announcement,
.gi-modal-inner #gi-description {
  padding:0 16px 14px; color:#444; font-size:13.5px; line-height:1.7;
}

/* ── 群組設定全頁覆蓋 ── */
#group-settings-overlay {
  display:none; position:fixed; left:56px; top:0; right:0; bottom:0;
  background:rgba(0,0,0,.4); z-index:500; align-items:center; justify-content:center;
}
.gs-modal-inner {
  background:#f2f2f2; border-radius:14px; width:420px; max-height:88vh;
  overflow-y:auto; display:flex; flex-direction:column;
  box-shadow:0 8px 36px rgba(0,0,0,.28);
}
.gs-topbar {
  display:flex; align-items:center; gap:12px;
  padding:0 16px; height:56px; background:#fff;
  border-bottom:1px solid #eee; flex-shrink:0;
}
.gs-back-btn {
  background:none; border:none; font-size:22px; color:#555;
  cursor:pointer; padding:4px; line-height:1;
}
.gs-back-btn:hover { color:#3a7bd5; }
.gs-title { font-size:17px; font-weight:600; color:#222; flex:1; }
.gs-save-btn {
  background:#3a7bd5; color:#fff; border:none; border-radius:20px;
  padding:6px 18px; font-size:14px; font-weight:500; cursor:pointer;
  transition:.15s;
}
.gs-save-btn:hover { background:#2563c0; }
.gs-body { flex:1; overflow-y:auto; padding:12px 0; }
.gs-avatar-section { display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 0 8px; }
.gs-avatar-display { width:80px; height:80px; border-radius:50%; background:#7b52ab; display:flex; align-items:center; justify-content:center; font-size:34px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.gs-avatar-display img { width:100%; height:100%; object-fit:cover; }
.gs-avatar-btn { padding:6px 18px; background:#3a7bd5; color:#fff; border-radius:16px; font-size:13px; cursor:pointer; transition:.15s; }
.gs-avatar-btn:hover { background:#2d62b5; }
.gs-section { background:#fff; margin:8px 12px; border-radius:12px; overflow:hidden; }
.gs-section-title {
  font-size:12px; color:#888; font-weight:600; letter-spacing:.05em;
  padding:10px 16px 4px; text-transform:uppercase;
}
.gs-field {
  padding:10px 16px; border-bottom:1px solid #f0f0f0;
}
.gs-field:last-child { border-bottom:none; }
.gs-field label { font-size:13px; color:#888; display:block; margin-bottom:4px; }
.gs-field input, .gs-field textarea {
  width:100%; border:1px solid #e0e0e0; border-radius:8px;
  padding:8px 10px; font-size:14px; outline:none; transition:.2s;
  font-family:inherit; resize:none; box-sizing:border-box;
}
.gs-field input:focus, .gs-field textarea:focus { border-color:#3a7bd5; }
.gs-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #f0f0f0;
}
.gs-toggle-row:last-child { border-bottom:none; }
.gs-toggle-label { font-size:14px; color:#333; }
.gs-toggle-sub { font-size:12px; color:#999; margin-top:2px; }
/* toggle switch */
.gs-toggle {
  position:relative; width:44px; height:24px; flex-shrink:0;
}
.gs-toggle input { opacity:0; width:0; height:0; }
.gs-toggle-slider {
  position:absolute; inset:0; background:#ccc; border-radius:24px;
  cursor:pointer; transition:.2s;
}
.gs-toggle input:checked + .gs-toggle-slider { background:#3a7bd5; }
.gs-toggle-slider:before {
  content:''; position:absolute; width:18px; height:18px;
  left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;
}
.gs-toggle input:checked + .gs-toggle-slider:before { transform:translateX(20px); }

/* 成員列表 */
#gs-member-list { padding:0; }
.gs-member-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-bottom:1px solid #f5f5f5; cursor:default;
}
.gs-member-item:last-child { border-bottom:none; }
.gs-member-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:bold; color:#fff; overflow:hidden;
  background-size:cover; background-position:center;
}
.gs-member-avatar img { width:100%; height:100%; object-fit:cover; }
.gs-member-info { flex:1; min-width:0; }
.gs-member-name { font-size:14px; color:#222; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.gs-role-tag {
  font-size:11px; padding:1px 7px; border-radius:10px; font-weight:600;
  margin-left:6px; vertical-align:middle;
}
.gs-role-tag.owner { background:#fff3e0; color:#e65100; }
.gs-role-tag.admin { background:#e8f0ff; color:#3a7bd5; }
.gs-member-actions { display:flex; gap:6px; }
.gs-member-btn {
  font-size:12px; padding:3px 10px; border:none; border-radius:10px;
  cursor:pointer; font-weight:500; transition:.12s;
}
.gs-member-btn.admin-btn { background:#e8f0ff; color:#3a7bd5; }
.gs-member-btn.admin-btn:hover { background:#3a7bd5; color:#fff; }
.gs-member-btn.mute-btn { background:#fff3e0; color:#e65100; }
.gs-member-btn.mute-btn:hover { background:#e65100; color:#fff; }
.gs-member-btn.kick-btn { background:#fdecea; color:#e53935; }
.gs-member-btn.kick-btn:hover { background:#e53935; color:#fff; }
.gs-danger-section { padding:12px; }
.gs-danger-btn {
  width:100%; padding:12px; border:none; border-radius:10px;
  font-size:15px; font-weight:500; cursor:pointer; transition:.15s; margin-bottom:8px;
}
.gs-danger-btn.leave { background:#fff3e0; color:#e65100; }
.gs-danger-btn.leave:hover { background:#e65100; color:#fff; }
.gs-danger-btn.disband { background:#fdecea; color:#e53935; }
.gs-danger-btn.disband:hover { background:#e53935; color:#fff; }

/* 群組資訊頁離開按鈕 */
.gi-leave-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 0; border-radius:14px;
  border:none; cursor:pointer;
  background:linear-gradient(135deg,#fff0f0 0%,#fde8e8 100%);
  color:#d32f2f; font-size:15px; font-weight:600;
  box-shadow:0 2px 8px rgba(211,47,47,.12);
  transition:all .18s;
}
.gi-leave-btn:hover {
  background:linear-gradient(135deg,#e53935 0%,#c62828 100%);
  color:#fff; box-shadow:0 4px 14px rgba(211,47,47,.35);
  transform:translateY(-1px);
}
.gi-leave-btn:active { transform:translateY(0); box-shadow:none; }

/* 聊天搜尋結果彈窗 */
#search-results-modal .modal-box {
  background:var(--panel-bg,#fff); border:1px solid var(--panel-border,#e8e8e8);
  box-shadow:0 12px 48px rgba(0,0,0,.22);
}
#search-results-modal .modal-header {
  background:var(--accent,#3a7bd5); color:#fff; border-bottom:none; border-radius:12px 12px 0 0;
}
#search-results-modal .modal-header button { color:rgba(255,255,255,.75); }
#search-results-modal .modal-header button:hover { color:#fff; }
#search-results-list:empty::after { content:'無搜尋結果'; display:block; padding:32px 0; text-align:center; color:#bbb; font-size:13px; }
.srm-item {
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 16px; border-bottom:1px solid var(--panel-border,#f0f0f0);
  cursor:pointer; transition:background .12s;
}
.srm-item:hover { background:var(--chat-area-bg,#f5f7ff); }
.srm-item:last-child { border-bottom:none; }
.srm-avatar {
  width:36px; height:36px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:#fff;
}
.srm-content { flex:1; min-width:0; }
.srm-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.srm-sender { font-size:13px; font-weight:600; color:#333; }
.srm-time { font-size:11px; color:#aaa; flex-shrink:0; margin-left:8px; }
.srm-body { font-size:13px; color:#555; line-height:1.55; word-break:break-all; }
.srm-body mark { background:rgba(255,210,0,.35); color:inherit; padding:0 2px; border-radius:2px; font-style:normal; font-weight:600; }
body.theme-night #search-results-modal .modal-box { background:#1e1e1e; border-color:#333; }
body.theme-night .srm-item { border-bottom-color:#2e2e2e; }
body.theme-night .srm-item:hover { background:#252525; }
body.theme-night .srm-sender { color:#ddd; }
body.theme-night .srm-time { color:#555; }
body.theme-night .srm-body { color:#888; }
body.theme-night .srm-body mark { background:rgba(255,200,0,.18); color:#ffd86e; }

/* 訊息列表右鍵選單刪除 */
.ctx-danger { color:#e53935 !important; }
.ctx-danger:hover { background:#fdecea !important; }

/* ── 轉發彈窗 ── */
#forward-modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:1000;
  align-items:center; justify-content:center;
}
#forward-modal.active { display:flex; }
.forward-box {
  background:#fff; border-radius:14px; width:340px; max-width:92vw;
  max-height:70vh; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.forward-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid #eee;
}
.forward-title { font-size:16px; font-weight:600; color:#222; }
.forward-close-btn { background:none; border:none; font-size:22px; color:#aaa; cursor:pointer; }
.forward-close-btn:hover { color:#e53935; }
.forward-search {
  padding:10px 14px; border-bottom:1px solid #eee;
}
.forward-search input {
  width:100%; border:1px solid #e0e0e0; border-radius:20px;
  padding:7px 14px; font-size:13px; outline:none; box-sizing:border-box;
}
.forward-search input:focus { border-color:#3a7bd5; }
#forward-list { overflow-y:auto; flex:1; }
.forward-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; cursor:pointer; transition:.12s;
  border-bottom:1px solid #f5f5f5;
}
.forward-item:hover { background:#f5f9ff; }
.forward-item .fi-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:bold; color:#fff;
  background-size:cover; background-position:center;
}
.forward-item .fi-name { font-size:14px; color:#222; font-weight:500; }
.forward-item .fi-type { font-size:12px; color:#999; }

/* ── 標題欄群組按鈕 ── */
#group-settings-btn, #group-search-toggle-btn {
  background:none; border:none; font-size:20px; color:#555;
  cursor:pointer; padding:4px 6px; border-radius:6px; transition:.15s;
}
#group-settings-btn:hover, #group-search-toggle-btn:hover { background:#f0f0f0; color:#3a7bd5; }

/* ── 手機返回按鈕（桌機隱藏）── */
.mobile-back-btn {
  display:none; background:none; border:none;
  font-size:28px; color:#555; cursor:pointer;
  padding:0 6px 0 0; line-height:1; flex-shrink:0;
}
.mobile-back-btn:hover { color:#3a7bd5; }

/* ── RWD 手機版（≤768px）── */
@media (max-width: 768px) {
  /* 移除外框 padding，背景用導航顏色填充 */
  body { padding:0; background:var(--nav-bg); align-items:stretch; justify-content:stretch; }

  /* 聊天頁填滿整個畫面（不含底部導航）*/
  #chat-page {
    position:fixed; top:0; left:0; right:0; bottom:56px;
    border-radius:0; box-shadow:none; overflow:hidden;
    max-width:none; width:auto; height:auto;
  }

  /* 導航列移至底部 */
  .nav-bar {
    position:fixed; bottom:0; left:0; right:0;
    width:100%; height:56px; flex-direction:row;
    align-items:center; padding:0; gap:0; z-index:200;
    justify-content:space-evenly;
  }
  .nav-avatar { display:none; }
  /* 每個圖標等寬填滿 */
  .nav-icon { flex:1; min-width:0; width:auto; height:50px; border-radius:0; }
  .nav-settings-wrap { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; }
  .nav-settings-wrap .nav-icon { flex:none; width:50px; }
  .nav-badge { top:4px; right:4px; }

  /* 手機底部排序：聯絡人 | 訊息 | 群組 | 公告 | 設定 */
  #nav-contacts { order:1; }
  #nav-chat { order:2; }
  #nav-groups { order:3; }
  #nav-ann { order:4; margin-top:0; }
  .nav-settings-wrap { order:5; margin-top:0; }
  #nav-logout { display:none; }

  /* 設定彈窗位置（從底部往上）*/
  #settings-menu { left:auto; right:4px; bottom:62px; }

  /* 側邊面板全寬 */
  .side-panel { width:100%; min-width:unset; }

  /* 聊天區：fixed 全屏、底部留 56px nav，開啟時滑入 */
  .chat-area {
    position:fixed; top:0; left:0; right:0; bottom:56px;
    z-index:150;
    transform:translateX(100%);
    transition:transform .22s ease;
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  body.mobile-in-chat .chat-area { transform:translateX(0); }

  /* chat-main 絕對定位填滿 chat-area（transform 建立 containing block）*/
  #chat-main { position:absolute; inset:0; height:auto; display:flex; flex-direction:column; overflow:hidden; }
  #messages { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .chat-header { flex-shrink:0; }
  .chat-input-bar { flex-shrink:0; }

  /* 手機返回按鈕顯示 */
  .mobile-back-btn { display:flex; }

  /* Overlay 佔滿全屏（不受左側 nav 偏移）*/
  #contact-profile-overlay,
  #contact-settings-overlay { left:0 !important; }
  .gi-modal-inner { width:calc(100vw - 32px); }

  /* 彈窗寬度適應 */
  .modal-box { width:calc(100vw - 24px); }
  .cp-modal-inner { width:calc(100vw - 24px); }
  .theme-picker-box { width:calc(100vw - 32px); }
}