/* ============================================
   WeChat Chat - Main Stylesheet
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
    --accent: #07c160;
    --accent-hover: #06ad56;
    --accent-light: #e8f7ef;

    --bg-app: #f5f5f5;
    --bg-sidebar: #2e2e2e;
    --bg-panel: #ffffff;
    --bg-panel-header: #f7f7f7;
    --bg-input: #ffffff;
    --bg-hover: #f0f0f0;
    --bg-active: #e0e0e0;
    --bg-bubble-sent: #95ec69;
    --bg-bubble-received: #ffffff;

    --text-primary: #1a1a1a;
    --text-secondary: #888;
    --text-tertiary: #b0b0b0;
    --text-on-sidebar: #999;
    --text-on-sidebar-active: #fff;
    --text-bubble-sent: #1a1a1a;
    --text-bubble-received: #1a1a1a;

    --border: #e8e8e8;
    --border-light: #f0f0f0;
    --shadow: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.15);

    --sidebar-width: 60px;
    --list-width: 300px;
    --radius: 8px;
    --radius-sm: 4px;
    --radius-bubble: 12px;

    --danger: #fa5151;
    --warning: #ff9d00;
    --info: #10aeff;

    /* Admin panel aliases (admin.php uses these variable names) */
    --panel-bg: var(--bg-panel);
    --border-color: var(--border);
    --input-bg: var(--bg-input);
    --header-bg: var(--bg-panel-header);
}

[data-theme="dark"] {
    --accent: #07c160;
    --accent-hover: #06ad56;
    --accent-light: #1a3a28;

    --bg-app: #1a1a1a;
    --bg-sidebar: #0d0d0d;
    --bg-panel: #252525;
    --bg-panel-header: #1e1e1e;
    --bg-input: #2a2a2a;
    --bg-hover: #2e2e2e;
    --bg-active: #353535;
    --bg-bubble-sent: #2d5a3d;
    --bg-bubble-received: #2a2a2a;

    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --text-tertiary: #666;
    --text-on-sidebar: #888;
    --text-on-sidebar-active: #fff;
    --text-bubble-sent: #e0e0e0;
    --text-bubble-received: #e0e0e0;

    --border: #333;
    --border-light: #2a2a2a;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.4);
}

/* ============================================
   Cozy Skin (温馨皮肤) — warm peach & cream
   Applied when <html data-skin="cozy">
   ============================================ */
[data-skin="cozy"] {
    --accent: #ff8f5e;
    --accent-hover: #f07c47;
    --accent-light: #fff1e7;

    --bg-app: #faf3ec;
    --bg-sidebar: #57433a;
    --bg-panel: #fffdf9;
    --bg-panel-header: #fdf6ee;
    --bg-input: #fffdf9;
    --bg-hover: #faf0e5;
    --bg-active: #f6e6d4;
    --bg-bubble-sent: #ffd9bd;
    --bg-bubble-received: #ffffff;

    --text-primary: #43342a;
    --text-secondary: #a08c78;
    --text-tertiary: #c6b7a6;
    --text-on-sidebar: #cbb8a9;
    --text-on-sidebar-active: #fff;
    --text-bubble-sent: #57391f;
    --text-bubble-received: #43342a;

    --border: #f0e3d3;
    --border-light: #f7eee2;
    --shadow: 0 1px 3px rgba(180,120,70,0.10);
    --shadow-lg: 0 6px 24px rgba(180,120,70,0.18);

    --radius: 12px;
    --radius-sm: 8px;
    --radius-bubble: 16px;

    --danger: #e9685a;
    --warning: #f0a03c;
    --info: #4fa8d8;
}

/* Cozy login page: warm gradient */
[data-skin="cozy"] .login-page {
    background: linear-gradient(135deg, #ffb58a 0%, #f0895a 55%, #e0763e 100%);
}
[data-skin="cozy"][data-theme="dark"] {
    --accent: #ff9a6b;
    --accent-hover: #f0875a;
    --accent-light: #3d2a1d;

    --bg-app: #211a15;
    --bg-sidebar: #16100c;
    --bg-panel: #2a221b;
    --bg-panel-header: #241c15;
    --bg-input: #2f261e;
    --bg-hover: #342a21;
    --bg-active: #3d3126;
    --bg-bubble-sent: #5d402a;
    --bg-bubble-received: #2f261e;

    --text-primary: #f0e5d9;
    --text-secondary: #a69783;
    --text-tertiary: #6d5f50;
    --text-on-sidebar: #9d8b7a;
    --text-on-sidebar-active: #fff;
    --text-bubble-sent: #f5e8d8;
    --text-bubble-received: #f0e5d9;

    --border: #3d3128;
    --border-light: #2e251e;
    --shadow: 0 1px 3px rgba(0,0,0,0.35);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.45);
}

/* ============================================
   Ocean Skin (蓝色系皮肤) — sky blue & deep indigo
   Applied when <html data-skin="ocean">
   ============================================ */
[data-skin="ocean"] {
    --accent: #1a73e8;
    --accent-hover: #1557b0;
    --accent-light: #e3f2fd;

    --bg-app: #f0f5fa;
    --bg-sidebar: #1a237e;
    --bg-panel: #ffffff;
    --bg-panel-header: #f5f9fc;
    --bg-input: #ffffff;
    --bg-hover: #e8f0f8;
    --bg-active: #d0e3f5;
    --bg-bubble-sent: #bbdefb;
    --bg-bubble-received: #ffffff;

    --text-primary: #1a237e;
    --text-secondary: #5c6f8a;
    --text-tertiary: #9aaabc;
    --text-on-sidebar: #aab4d0;
    --text-on-sidebar-active: #fff;
    --text-bubble-sent: #0d2440;
    --text-bubble-received: #1a237e;

    --border: #d4ddea;
    --border-light: #e8eff5;
    --shadow: 0 1px 3px rgba(26,35,126,0.08);
    --shadow-lg: 0 4px 20px rgba(26,35,126,0.15);

    --danger: #e53935;
    --warning: #fb8c00;
    --info: #1a73e8;
}

[data-skin="ocean"] .login-page {
    background: linear-gradient(135deg, #42a5f5 0%, #1a73e8 55%, #0d47a1 100%);
}

/* Ocean dark mode (蓝色 · 深海) */
[data-skin="ocean"][data-theme="dark"] {
    --accent: #42a5f5;
    --accent-hover: #1a73e8;
    --accent-light: #0d2a4a;

    --bg-app: #0d1b2a;
    --bg-sidebar: #050f19;
    --bg-panel: #162636;
    --bg-panel-header: #112030;
    --bg-input: #1a2c3e;
    --bg-hover: #1e3245;
    --bg-active: #243a52;
    --bg-bubble-sent: #1565c0;
    --bg-bubble-received: #1a2c3e;

    --text-primary: #cfddee;
    --text-secondary: #6a8298;
    --text-tertiary: #4a6075;
    --text-on-sidebar: #5a7090;
    --text-on-sidebar-active: #fff;
    --text-bubble-sent: #e3f2fd;
    --text-bubble-received: #cfddee;

    --border: #243a52;
    --border-light: #1a2c3e;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.4);
}

/* ============================================
   ICQ Skin (老牌即时通讯软件 ICQ 风格)
   经典草绿 + 米白背景 + 圆角卡片
   ============================================ */
[data-skin="icq"] {
    --accent: #6bba2e;
    --accent-hover: #5aa022;
    --accent-light: #e8f5d9;

    --bg-app: #e6eedd;
    --bg-sidebar: #4f7a33;
    --bg-panel: #ffffff;
    --bg-panel-header: #f1f8e8;
    --bg-input: #ffffff;
    --bg-hover: #e3f1d4;
    --bg-active: #cce8b5;
    --bg-bubble-sent: #d6e9c6;
    --bg-bubble-received: #ffffff;

    --text-primary: #2f4a1c;
    --text-secondary: #6e8b55;
    --text-tertiary: #9ab383;
    --text-on-sidebar: #d4e8c2;
    --text-on-sidebar-active: #fff;
    --text-bubble-sent: #2f4a1c;
    --text-bubble-received: #2f4a1c;

    --border: #c5ddb0;
    --border-light: #e3f1d4;
    --shadow: 0 1px 3px rgba(80,130,40,0.12);
    --shadow-lg: 0 6px 24px rgba(80,130,40,0.22);

    --radius: 10px;
    --radius-sm: 6px;
    --radius-bubble: 14px;

    --danger: #d9534f;
    --warning: #f0a03c;
    --info: #4a9ed8;
}

/* ICQ login: classic green title bar + cream card */
[data-skin="icq"] .login-page {
    background: linear-gradient(135deg, #d6e9c6 0%, #b8d99e 50%, #9bc97d 100%);
}
[data-skin="icq"] .login-card {
    border-top: 4px solid #6bba2e;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(80,130,40,0.25);
}
[data-skin="icq"] .login-logo h1 {
    color: #4a7a25;
}
[data-skin="icq"] .btn-primary {
    background: linear-gradient(180deg, #7ec53a 0%, #6bba2e 100%);
    border: 1px solid #5aa022;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
[data-skin="icq"] .btn-primary:hover {
    background: linear-gradient(180deg, #6bba2e 0%, #5aa022 100%);
}
[data-skin="icq"] .theme-toggle {
    background: rgba(75,120,35,0.18);
}
[data-skin="icq"] .theme-toggle:hover {
    background: rgba(75,120,35,0.28);
}

/* ICQ chat: green gradient header, soft panel borders */
[data-skin="icq"] .chat-header,
[data-skin="icq"] .panel-list-header,
[data-skin="icq"] .discover-header {
    background: linear-gradient(180deg, #f6fbed 0%, #e8f5d9 100%);
}
[data-skin="icq"] .chat-input-area {
    background: #ffffff;
    border-top: 2px solid #c5ddb0;
}
[data-skin="icq"] .contact-item.active {
    background: var(--accent-light);
    border-left: 3px solid var(--accent);
}
[data-skin="icq"] .nav-btn.active {
    background: rgba(255,255,255,0.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
[data-skin="icq"] .send-btn {
    background: linear-gradient(180deg, #7ec53a 0%, #6bba2e 100%);
    border: 1px solid #5aa022;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
[data-skin="icq"] .send-btn:hover {
    background: linear-gradient(180deg, #6bba2e 0%, #5aa022 100%);
}
[data-skin="icq"] .message-row:not(.self) .message-bubble {
    border: 1px solid var(--border);
}

/* ICQ chat layout: readable self/others bubbles while keeping classic left sidebar */
[data-skin="icq"] .message-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
[data-skin="icq"] .message-row {
    width: 100%;
    max-width: 100%;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 16px;
    gap: 10px;
    border-bottom: none;
    box-sizing: border-box;
}
[data-skin="icq"] .message-row.self {
    align-self: flex-end;
    flex-direction: row-reverse;
    justify-content: flex-start;
}
[data-skin="icq"] .message-row.self .msg-content {
    align-items: flex-end;
}
[data-skin="icq"] .msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px; /* ICQ square-ish avatar */
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    flex-shrink: 0;
}
[data-skin="icq"] .message-row .msg-content {
    flex: 0 1 auto;
    max-width: 75%;
    min-width: 140px;
    width: auto;
}
[data-skin="icq"] .msg-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
[data-skin="icq"] .msg-sender,
[data-skin="icq"] .msg-time {
    white-space: nowrap;
}
[data-skin="icq"] .msg-sender {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-secondary);
}
[data-skin="icq"] .message-row.self .msg-sender {
    color: var(--accent);
}
[data-skin="icq"] .msg-time {
    font-size: 11px;
    color: var(--text-tertiary);
}
[data-skin="icq"] .message-bubble {
    border-radius: 8px !important;
    padding: 8px 12px;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    width: fit-content;
    max-width: 100%;
    min-width: auto;
}
[data-skin="icq"] .message-bubble > span {
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
}
[data-skin="icq"] .message-row:not(.self) .message-bubble {
    background: #fff !important;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-top-left-radius: 3px !important;
}
[data-skin="icq"] .message-row.self .message-bubble {
    background: #dff0c5 !important;
    color: #1a3a00;
    border: 1px solid #b8d99a;
    border-top-right-radius: 3px !important;
}
[data-skin="icq"] .message-bubble img.msg-image {
    border: 1px solid var(--border);
}
[data-skin="icq"] .msg-send-time {
    display: none;
}

/* ICQ contacts list: rounded cards + square avatar */
[data-skin="icq"] .contact-item {
    border-radius: 10px;
    margin: 2px 8px;
}
[data-skin="icq"] .contact-item .avatar {
    border-radius: 8px;
}
[data-skin="icq"] .contact-item.active {
    background: var(--accent-light);
    border-left: 3px solid var(--accent);
}

/* ICQ input area: bordered rounded composer card */
[data-skin="icq"] .chat-input-area {
    padding: 12px 16px 16px;
}
[data-skin="icq"] #message-input {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    margin-bottom: 8px;
}
[data-skin="icq"] #message-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
}
[data-skin="icq"] .input-row {
    align-items: flex-end;
}

/* ICQ dark mode (深橄榄绿) */
[data-skin="icq"][data-theme="dark"] {
    --accent: #8fd650;
    --accent-hover: #7ec53a;
    --accent-light: #2a4518;

    --bg-app: #1f2e16;
    --bg-sidebar: #16220f;
    --bg-panel: #283a1c;
    --bg-panel-header: #223318;
    --bg-input: #304422;
    --bg-hover: #334d24;
    --bg-active: #3d5a2b;
    --bg-bubble-sent: #3d5a2b;
    --bg-bubble-received: #283a1c;

    --text-primary: #e5f2d8;
    --text-secondary: #8faa75;
    --text-tertiary: #5e7a4a;
    --text-on-sidebar: #9bbf7f;
    --text-on-sidebar-active: #fff;
    --text-bubble-sent: #e5f2d8;
    --text-bubble-received: #e5f2d8;

    --border: #3d5a2b;
    --border-light: #2f451e;
    --shadow: 0 1px 3px rgba(0,0,0,0.35);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.45);
}
[data-skin="icq"][data-theme="dark"] .login-page {
    background: linear-gradient(135deg, #2a4518 0%, #1f2e16 100%);
}
[data-skin="icq"][data-theme="dark"] .login-card {
    border-top-color: #8fd650;
}
[data-skin="icq"][data-theme="dark"] .message-row:not(.self) .message-bubble {
    background: var(--bg-bubble-received) !important;
    color: var(--text-bubble-received);
    border-color: var(--border);
}
[data-skin="icq"][data-theme="dark"] .chat-header,
[data-skin="icq"][data-theme="dark"] .panel-list-header,
[data-skin="icq"][data-theme="dark"] .discover-header {
    background: linear-gradient(180deg, #2f451e 0%, #263818 100%);
}

/* ============================================
   QQ Skin (经典 OICQ / QQ 风格)
   蓝紫好友列表 + 浅灰窗口 + 3D 按钮 + 方角头像
   ============================================ */
[data-skin="qq"] {
    --accent: #1e6fdb;
    --accent-hover: #1557b0;
    --accent-light: #e0ecff;

    --bg-app: #e8e8e8;
    --bg-sidebar: #6699cc;
    --bg-panel: #ffffff;
    --bg-panel-header: #f0f4f8;
    --bg-input: #ffffff;
    --bg-hover: #e3efff;
    --bg-active: #c8e0ff;
    --bg-bubble-sent: #d9ecff;
    --bg-bubble-received: #ffffff;

    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-on-sidebar: #ffffff;
    --text-on-sidebar-active: #ffffcc;
    --text-bubble-sent: #1a1a1a;
    --text-bubble-received: #1a1a1a;

    --border: #c0c0c0;
    --border-light: #e0e0e0;
    --shadow: 1px 1px 0 rgba(0,0,0,0.15);
    --shadow-lg: 2px 2px 0 rgba(0,0,0,0.2);
}

/* QQ login page: classic window look */
[data-skin="qq"] .login-page {
    background: #0080c0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.12) 0%, transparent 25%),
        radial-gradient(circle at 90% 80%, rgba(0,0,0,0.08) 0%, transparent 25%);
}
[data-skin="qq"] .login-card {
    background: #f5f5f5;
    border: 2px solid #005a9e;
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.25);
    border-top: 28px solid #005a9e;
    padding-top: 28px;
    position: relative;
}
[data-skin="qq"] .login-card::before {
    content: 'QQ 用户登录';
    position: absolute;
    top: -24px;
    left: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
}
[data-skin="qq"] .login-logo svg rect {
    fill: none;
}
[data-skin="qq"] .login-logo svg path:first-of-type {
    fill: #1e6fdb;
}
[data-skin="qq"] .login-logo h1 {
    color: #1e6fdb;
    font-weight: 900;
    text-shadow: 1px 1px 0 #fff;
}
[data-skin="qq"] .form-group label {
    color: #333;
    font-size: 13px;
    font-weight: 600;
}
[data-skin="qq"] .form-group input {
    border: 1px solid #7a9ebd;
    border-radius: 0;
    background: #fff;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.08);
}
[data-skin="qq"] .btn-primary,
[data-skin="qq"] .send-btn {
    border: 2px outset #d0d0d0;
    border-radius: 3px;
    background: linear-gradient(180deg, #f0f0f0 0%, #d4d4d4 100%);
    color: #1a1a1a;
    font-weight: 700;
    box-shadow: none;
    text-shadow: 1px 1px 0 #fff;
}
[data-skin="qq"] .btn-primary:hover,
[data-skin="qq"] .send-btn:hover {
    background: linear-gradient(180deg, #e8f1ff 0%, #b8d4ff 100%);
    border-color: #7a9ebd;
}
[data-skin="qq"] .btn-primary:active,
[data-skin="qq"] .send-btn:active {
    border-style: inset;
}
[data-skin="qq"] .remember-me {
    color: #444;
    font-size: 12px;
}
[data-skin="qq"] .form-switch,
[data-skin="qq"] .form-hint,
[data-skin="qq"] .login-subtitle {
    color: #666;
}
[data-skin="qq"] .form-switch a {
    color: #1e6fdb;
}

/* QQ sidebar: blue-purple with classic icons */
[data-skin="qq"] .sidebar {
    background: linear-gradient(180deg, #6699cc 0%, #5a8fc4 100%);
    border-right: 1px solid #4a7fb0;
}
[data-skin="qq"] .nav-btn {
    color: #fff;
    border-radius: 0;
    margin: 2px 0;
}
[data-skin="qq"] .nav-btn:hover {
    background: rgba(255,255,255,0.12);
}
[data-skin="qq"] .nav-btn.active {
    background: rgba(0,0,0,0.12);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.15);
}
[data-skin="qq"] .sidebar-avatar {
    border: 2px solid #fff;
    border-radius: 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
[data-skin="qq"] .sidebar-avatar img {
    border-radius: 0;
}

/* QQ panel headers */
[data-skin="qq"] .panel-list-header,
[data-skin="qq"] .chat-header,
[data-skin="qq"] .discover-header {
    background: linear-gradient(180deg, #f0f4f8 0%, #d9e6f2 100%);
    border-bottom: 1px solid #a0b8cc;
}
[data-skin="qq"] .panel-list-header h2,
[data-skin="qq"] .chat-title {
    color: #1a1a1a;
    font-weight: 700;
}

/* QQ contact list: classic grouped friend list */
[data-skin="qq"] .panel-list,
[data-skin="qq"] .panel-contacts {
    background: #f5f5f5;
}
[data-skin="qq"] .search-box input {
    border: 1px solid #a0b8cc;
    border-radius: 0;
    background: #fff;
}
[data-skin="qq"] .contact-item {
    border-radius: 0;
    margin: 0;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
}
[data-skin="qq"] .contact-item:hover {
    background: var(--bg-hover);
}
[data-skin="qq"] .contact-item.active {
    background: var(--bg-active);
    border-left: 3px solid var(--accent);
}
[data-skin="qq"] .contact-item .avatar {
    border-radius: 0;
    border: 1px solid #d0d0d0;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}
[data-skin="qq"] .contact-name {
    color: #1a1a1a;
    font-weight: 600;
}
[data-skin="qq"] .contact-meta {
    color: #888;
}
[data-skin="qq"] .contact-preview {
    color: #999;
}
[data-skin="qq"] .contacts-new-friends {
    background: #fff;
    border-bottom: 1px solid var(--border-light);
    color: #1a1a1a;
    font-weight: 600;
}

/* QQ chat: classic window with 3D look + readable self/others bubbles */
[data-skin="qq"] .message-list {
    background: #f0f0f0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
[data-skin="qq"] .message-row {
    width: 100%;
    max-width: 100%;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 16px;
    gap: 10px;
    border-bottom: none;
    box-sizing: border-box;
}
[data-skin="qq"] .message-row.self {
    align-self: flex-end;
    flex-direction: row-reverse;
    justify-content: flex-start;
}
[data-skin="qq"] .message-row.self .msg-content {
    align-items: flex-end;
}
[data-skin="qq"] .msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 0;
    border: 1px solid #d0d0d0;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.12);
    flex-shrink: 0;
}
[data-skin="qq"] .message-row .msg-content {
    flex: 0 1 auto;
    max-width: 75%;
    min-width: 140px;
    width: auto;
}
[data-skin="qq"] .msg-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
[data-skin="qq"] .msg-sender,
[data-skin="qq"] .msg-time {
    white-space: nowrap;
}
[data-skin="qq"] .msg-sender {
    font-weight: 700;
    font-size: 13px;
    color: var(--accent);
}
[data-skin="qq"] .message-row.self .msg-sender {
    color: #1a1a1a;
}
[data-skin="qq"] .msg-time {
    font-size: 11px;
    color: var(--text-tertiary);
}
[data-skin="qq"] .message-bubble {
    border-radius: 4px !important;
    padding: 8px 12px;
    line-height: 1.5;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
    width: fit-content;
    max-width: 100%;
    min-width: auto;
}
[data-skin="qq"] .message-bubble > span {
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
}
[data-skin="qq"] .message-row:not(.self) .message-bubble {
    background: #fff !important;
    color: var(--text-primary);
    border: 1px solid #d0d0d0;
    border-top-left-radius: 2px !important;
}
[data-skin="qq"] .message-row.self .message-bubble {
    background: #cce4ff !important;
    color: #1a1a1a;
    border: 1px solid #a3c9f1;
    border-top-right-radius: 2px !important;
}
[data-skin="qq"] .message-bubble img.msg-image {
    border: 1px solid var(--border);
    border-radius: 0;
}
[data-skin="qq"] .message-status {
    color: #888;
    font-size: 11px;
    margin-top: 2px;
}
[data-skin="qq"] .msg-send-time {
    display: none;
}

/* QQ input area: classic bordered composer */
[data-skin="qq"] .chat-input-area {
    background: #f5f5f5;
    border-top: 1px solid #b0b0b0;
    padding: 10px 16px 14px;
}
[data-skin="qq"] .chat-toolbar .tool-btn {
    border: 2px outset #d0d0d0;
    border-radius: 2px;
    background: linear-gradient(180deg, #fff 0%, #e0e0e0 100%);
    color: #333;
}
[data-skin="qq"] .chat-toolbar .tool-btn:hover {
    background: linear-gradient(180deg, #e8f1ff 0%, #b8d4ff 100%);
}
[data-skin="qq"] #message-input {
    border: 1px solid #a0b8cc;
    border-radius: 0;
    padding: 10px 12px;
    background: #fff;
    margin-bottom: 8px;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.06);
}
[data-skin="qq"] #message-input:focus {
    border-color: var(--accent);
    box-shadow: inset 1px 1px 2px rgba(30,111,219,0.12);
}
[data-skin="qq"] .input-row {
    align-items: flex-end;
}
[data-skin="qq"] .input-row .send-btn {
    min-width: 80px;
}

/* QQ modal / add-friend dialogs */
[data-skin="qq"] .modal-overlay {
    background: rgba(0,0,0,0.25);
}
[data-skin="qq"] .modal {
    background: #f5f5f5;
    border: 2px solid #005a9e;
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.25);
    border-top: 26px solid #005a9e;
}
[data-skin="qq"] .modal-header {
    background: transparent;
    color: #005a9e;
    margin-top: -22px;
    padding-bottom: 6px;
    border-bottom: 1px solid #d0d0d0;
}
[data-skin="qq"] .modal-header h3 {
    color: #fff;
    position: absolute;
    top: -24px;
    left: 12px;
    font-size: 13px;
    font-weight: bold;
}
[data-skin="qq"] .modal-close {
    color: #fff;
    position: absolute;
    top: -26px;
    right: 6px;
    font-size: 18px;
    line-height: 26px;
}
[data-skin="qq"] .search-result-item {
    border: 1px solid #d0d0d0;
    background: #fff;
    border-radius: 0;
}
[data-skin="qq"] .search-result-item:hover {
    background: #e8f1ff;
}
[data-skin="qq"] .btn-secondary {
    border: 2px outset #d0d0d0;
    background: linear-gradient(180deg, #fff 0%, #e0e0e0 100%);
    color: #1a1a1a;
    border-radius: 2px;
}
[data-skin="qq"] .btn-secondary:hover {
    background: linear-gradient(180deg, #e8f1ff 0%, #b8d4ff 100%);
}
[data-skin="qq"] .friend-request-item {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 0;
}

/* QQ empty state */
[data-skin="qq"] .empty-state {
    color: #888;
}
[data-skin="qq"] .chat-empty {
    color: #888;
}

/* QQ dark mode (midnight blue) */
[data-skin="qq"][data-theme="dark"] {
    --accent: #4a9eff;
    --accent-hover: #2e86e8;
    --accent-light: #1a3350;

    --bg-app: #1a1f2b;
    --bg-sidebar: #1e3a5f;
    --bg-panel: #232936;
    --bg-panel-header: #1c2433;
    --bg-input: #2a3142;
    --bg-hover: #253147;
    --bg-active: #2d3d55;
    --bg-bubble-sent: #2a4d70;
    --bg-bubble-received: #2a3142;

    --text-primary: #e8eef6;
    --text-secondary: #8fa3bf;
    --text-tertiary: #5a6f8a;
    --text-on-sidebar: #bdd6f0;
    --text-on-sidebar-active: #fff;
    --text-bubble-sent: #e8eef6;
    --text-bubble-received: #e8eef6;

    --border: #3a4a61;
    --border-light: #2a3444;
    --shadow: 1px 1px 0 rgba(0,0,0,0.35);
    --shadow-lg: 2px 2px 0 rgba(0,0,0,0.4);
}
[data-skin="qq"][data-theme="dark"] .login-page {
    background: #0f1a2e;
}
[data-skin="qq"][data-theme="dark"] .login-card,
[data-skin="qq"][data-theme="dark"] .modal {
    background: #232936;
    border-color: #1e3a5f;
}
[data-skin="qq"][data-theme="dark"] .panel-list,
[data-skin="qq"][data-theme="dark"] .panel-contacts,
[data-skin="qq"][data-theme="dark"] .message-list,
[data-skin="qq"][data-theme="dark"] .chat-input-area {
    background: #1a1f2b;
}
[data-skin="qq"][data-theme="dark"] .contact-item,
[data-skin="qq"][data-theme="dark"] .contacts-new-friends,
[data-skin="qq"][data-theme="dark"] .search-result-item,
[data-skin="qq"][data-theme="dark"] .friend-request-item {
    background: #232936;
    border-color: #3a4a61;
}
[data-skin="qq"][data-theme="dark"] .message-row:not(.self) .message-bubble {
    background: var(--bg-bubble-received) !important;
    color: var(--text-bubble-received);
    border-color: var(--border);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* ---------- Login Page ---------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #07c160 0%, #0a8d4a 100%);
    min-height: 100vh;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    position: relative;
}

.login-card {
    background: var(--bg-panel);
    border-radius: 16px;
    padding: 40px 32px;
    box-shadow: var(--shadow-lg);
}

.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo h1 {
    font-size: 24px;
    margin-top: 12px;
    color: var(--text-primary);
}

.login-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 4px;
}

.auth-form { display: none; }
.auth-form.active { display: block; }

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group input:disabled {
    background: var(--bg-hover);
    cursor: not-allowed;
}

/* Remember-me checkbox on login page */
.remember-me {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    margin-bottom: 12px;
}
.remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.btn-primary {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-text {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
}

.form-switch {
    text-align: center;
    margin-top: 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.form-switch a {
    color: var(--accent);
    text-decoration: none;
}

.form-hint {
    text-align: center;
    margin-top: 12px;
    color: var(--text-tertiary);
    font-size: 12px;
}

.auth-message {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    min-height: 18px;
}

.auth-message.error { color: var(--danger); }
.auth-message.success { color: var(--accent); }

.login-footer {
    text-align: center;
    margin-top: 20px;
}

.theme-toggle {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.2s;
}

.theme-toggle:hover { background: rgba(255,255,255,0.3); }

/* Theme toggle icons */
[data-theme="light"] .icon-moon { display: inline; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: inline; }

/* ---------- App Layout ---------- */
.app {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    flex-shrink: 0;
}

.sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 20px;
}

.sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-on-sidebar);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-on-sidebar-active);
}

.nav-btn.active {
    color: var(--text-on-sidebar-active);
    background: rgba(255,255,255,0.08);
}

.nav-btn .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
}

/* ---------- List Panel ---------- */
.panel-list {
    width: var(--list-width);
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.panel-list-header {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--bg-panel-header);
    border-bottom: 1px solid var(--border);
}

.panel-list-header h2 {
    font-size: 16px;
    font-weight: 500;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.search-box {
    padding: 8px 12px;
    background: var(--bg-panel-header);
}

.search-box input {
    width: 100%;
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 13px;
}

.search-box input:focus {
    outline: none;
    background: var(--bg-input);
    box-shadow: 0 0 0 1px var(--accent);
}

.contact-list {
    flex: 1;
    overflow-y: auto;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.contact-item:hover {
    background: var(--bg-hover);
}

.contact-item.active {
    background: var(--bg-active);
}

.contact-item .avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 12px;
    flex-shrink: 0;
    position: relative;
}

.contact-item .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-item .avatar .online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-panel);
}

.contact-item .info {
    flex: 1;
    min-width: 0;
}

.contact-item .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-item .name {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-item .time {
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-left: 8px;
}

.contact-item .preview {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.contact-item .unread-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-tertiary);
}

.empty-state p {
    margin-bottom: 12px;
    font-size: 14px;
}

/* ---------- Chat Panel ---------- */
.panel-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
    min-width: 0;
}

.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.chat-empty p {
    margin-top: 16px;
    font-size: 14px;
}

.chat-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--bg-panel-header);
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

.back-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px;
}

.chat-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.chat-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.chat-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.chat-status.online {
    color: var(--accent);
}

/* ---------- Message List ---------- */
.message-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message-date-divider {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 12px;
    padding: 8px 0;
}

.message-row {
    display: flex;
    gap: 8px;
    max-width: 70%;
}

.message-row.self {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-row .msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
}

.message-row .msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-row .msg-content {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.message-row.self .msg-content {
    align-items: flex-end;
}

.message-bubble {
    padding: 10px 14px;
    border-radius: var(--radius-bubble);
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
    position: relative;
    cursor: default;
    -webkit-touch-callout: none;
}

.message-row:not(.self) .message-bubble {
    background: var(--bg-bubble-received);
    color: var(--text-bubble-received);
    border-top-left-radius: 4px;
}

.message-row.self .message-bubble {
    background: var(--bg-bubble-sent);
    color: var(--text-bubble-sent);
    border-top-right-radius: 4px;
}

.message-bubble.recalled {
    background: transparent !important;
    color: var(--text-tertiary);
    font-size: 12px;
    font-style: italic;
    padding: 4px 0;
}

.message-bubble img.msg-image {
    max-width: 240px;
    max-height: 240px;
    border-radius: 8px;
    cursor: pointer;
    display: block;
}

.message-bubble .msg-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    cursor: pointer;
}

.message-bubble .msg-file .file-icon {
    width: 40px;
    height: 40px;
    background: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    flex-shrink: 0;
}

.message-bubble .msg-file .file-info {
    display: flex;
    flex-direction: column;
}

.message-bubble .msg-file .file-name {
    font-size: 13px;
    color: var(--text-primary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-bubble .msg-file .file-size {
    font-size: 11px;
    color: var(--text-secondary);
}

.message-bubble .msg-voice {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    cursor: pointer;
}

.message-bubble .msg-voice .voice-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.message-bubble .msg-voice .voice-duration {
    font-size: 13px;
}

.message-bubble .msg-video {
    position: relative;
    cursor: pointer;
}

.message-bubble .msg-video video {
    max-width: 280px;
    max-height: 200px;
    border-radius: 8px;
}

.message-status {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-status.read {
    color: var(--accent);
}

/* ---------- Streak / Level Badges ---------- */
.contact-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: 6px;
}
.contact-streak,
.header-streak {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    white-space: nowrap;
}
.contact-streak {
    background: rgba(255,255,255,0.9);
}
.header-streak {
    margin-left: 6px;
}
.streak-gray { color: #9e9e9e; background: #f0f0f0; }
.streak-yellow { color: #f59e0b; background: #fff7ed; }
.streak-blue { color: #2563eb; background: #eff6ff; }
.streak-pink { color: #ec4899; background: #fdf2f8; }
.streak-red { color: #dc2626; background: #fef2f2; }
.streak-purple { color: #7c3aed; background: #f5f3ff; }
.streak-orange { color: #ea580c; background: #fff7ed; }

.user-level-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
}
.sidebar-level {
    margin-top: 6px;
    font-size: 13px;
    text-align: center;
    color: var(--text-on-sidebar);
    opacity: 0.95;
}
.profile-level {
    padding: 8px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    font-size: 18px;
    text-align: center;
    letter-spacing: 2px;
}

/* Sender name + time row: hidden by default (used only by ICQ/QQ skin) */
.msg-meta { display: none; }

/* Send time shown for every message in default themes */
.msg-send-time {
    display: block;
    align-self: flex-end;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}
.message-row.self .msg-send-time {
    order: 3;
    margin-left: 6px;
    margin-right: 0;
}
.message-row:not(.self) .msg-send-time {
    order: 1;
    margin-right: 6px;
    margin-left: 0;
}

.message-status.sending {
    color: var(--text-tertiary);
    opacity: 0.7;
}

.message-status.failed {
    color: #fa5151;
}

.message-status .status-icon {
    width: 14px;
    height: 14px;
}

/* ---------- Typing Indicator ---------- */
.typing-indicator {
    padding: 4px 20px;
    font-size: 12px;
    color: var(--text-secondary);
}

.typing-indicator span {
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ---------- Chat Input Area ---------- */
.chat-input-area {
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    padding: 8px 16px 12px;
}

.chat-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.tool-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tool-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

#message-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: none;
    min-height: 72px;
    max-height: 160px;
    padding: 8px 0;
    line-height: 1.5;
}

#message-input:focus { outline: none; }

.send-btn {
    padding: 8px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.send-btn:hover { background: var(--accent-hover); }
.send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.record-btn {
    background: var(--danger) !important;
}

/* ---------- Emoji Panel ---------- */
.emoji-panel {
    padding: 12px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.emoji-panel .emoji-item {
    font-size: 22px;
    cursor: pointer;
    text-align: center;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s;
}

.emoji-panel .emoji-item:hover {
    background: var(--bg-hover);
}

.fx-panel {
    padding: 12px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}
.fx-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 6px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--panel-bg); cursor: pointer; font-size: 13px; color: var(--text-primary);
    transition: transform .12s, background .15s;
}
.fx-item span { font-size: 28px; line-height: 1; }
.fx-item:hover { background: var(--bg-hover); transform: translateY(-2px); }
.fx-item:active { transform: scale(.96); }

.effect-hint { opacity: .9; }

/* ---------- Pet Cmd 气泡卡片（@宠物 指令消息） ---------- */
.pet-cmd-card {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 100%);
    border-radius: 10px;
    border: 1px solid #f4b860;
    box-shadow: 0 1px 3px rgba(244, 184, 96, 0.2);
    min-width: 120px;
}
.pet-cmd-emoji {
    font-size: 24px; line-height: 1;
    animation: pet-cmd-bounce 1s ease-in-out infinite;
}
.pet-cmd-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pet-cmd-name { font-size: 12px; color: #8d5524; font-weight: 600; }
.pet-cmd-label { font-size: 13px; color: #5d4037; font-weight: 500; }
@keyframes pet-cmd-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
[data-skin="icq"] .pet-cmd-card,
[data-skin="qq"] .pet-cmd-card { background: linear-gradient(135deg, #fff3c4 0%, #ffd54f 100%); border-color: #d4a017; }
[data-skin="icq"][data-theme="dark"] .pet-cmd-card,
[data-skin="qq"][data-theme="dark"] .pet-cmd-card { background: linear-gradient(135deg, #5d4037 0%, #8d5524 100%); border-color: #d4a017; }
[data-skin="icq"][data-theme="dark"] .pet-cmd-name,
[data-skin="icq"][data-theme="dark"] .pet-cmd-label,
[data-skin="qq"][data-theme="dark"] .pet-cmd-name,
[data-skin="qq"][data-theme="dark"] .pet-cmd-label { color: #fff3c4; }

/* ---------- Broken Streak — 火花断开，落魄状态 ---------- */
.chat-active.streak-broken {
    position: relative;
    filter: grayscale(0.72) contrast(0.92);
    --streak-dust: #b8b8b8;
    --streak-grass: #6aa84f;
    --streak-web: rgba(180, 180, 180, 0.45);
}

/* Spider webs in top-left and top-right corners */
.chat-active.streak-broken::before,
.chat-active.streak-broken::after {
    content: '';
    position: absolute;
    top: 0;
    width: 130px;
    height: 130px;
    pointer-events: none;
    z-index: 5;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.chat-active.streak-broken::before {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%23aaaaaa' stroke-width='1.2' opacity='0.72'%3E%3Cpath d='M0 0 L130 130 M25 0 L130 105 M50 0 L130 80 M75 0 L130 55 M100 0 L130 30'/%3E%3Cpath d='M0 0 L130 130 M0 25 L105 130 M0 50 L80 130 M0 75 L55 130 M0 100 L30 130'/%3E%3Cellipse cx='0' cy='0' rx='22' ry='22'/%3E%3Cellipse cx='0' cy='0' rx='44' ry='44'/%3E%3Cellipse cx='0' cy='0' rx='66' ry='66'/%3E%3Cellipse cx='0' cy='0' rx='88' ry='88'/%3E%3Cellipse cx='0' cy='0' rx='110' ry='110'/%3E%3C/g%3E%3C/svg%3E");
}
.chat-active.streak-broken::after {
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%23aaaaaa' stroke-width='1.2' opacity='0.72'%3E%3Cpath d='M130 0 L0 130 M105 0 L0 105 M80 0 L0 80 M55 0 L0 55 M30 0 L0 30'/%3E%3Cpath d='M130 0 L0 130 M130 25 L25 130 M130 50 L50 130 M130 75 L75 130 M130 100 L100 130'/%3E%3Cellipse cx='130' cy='0' rx='22' ry='22'/%3E%3Cellipse cx='130' cy='0' rx='44' ry='44'/%3E%3Cellipse cx='130' cy='0' rx='66' ry='66'/%3E%3Cellipse cx='130' cy='0' rx='88' ry='88'/%3E%3Cellipse cx='130' cy='0' rx='110' ry='110'/%3E%3C/g%3E%3C/svg%3E");
}

/* Desaturated header and message area */
.streak-broken .chat-header {
    background: linear-gradient(180deg, #d0d0d0 0%, #c4c4c4 100%);
    border-bottom-color: #b0b0b0;
}
.streak-broken .chat-title,
.streak-broken .chat-status,
.streak-broken .back-btn,
.streak-broken .chat-header .icon-btn {
    color: #555;
}
.streak-broken .message-list {
    position: relative;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 100%),
        repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px),
        #c8c8c8;
}
.streak-broken .message-row:not(.self) .message-bubble {
    background: #dcdcdc;
    color: #444;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.streak-broken .message-row.self .message-bubble {
    background: #b8b8b8;
    color: #333;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.streak-broken .msg-send-time,
.streak-broken .message-status {
    color: #777;
}

/* Input area — withered/darker and grass growing from the top edge */
.streak-broken .chat-input-area {
    position: relative;
    background: linear-gradient(180deg, #b8b8b8 0%, #a8a8a8 100%);
    border-top-color: #999;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}
.streak-broken .chat-toolbar .tool-btn {
    color: #666;
}
.streak-broken .chat-toolbar .tool-btn:hover {
    background: rgba(0,0,0,0.08);
    color: #444;
}
.streak-broken #message-input {
    color: #333;
}
.streak-broken #message-input::placeholder {
    color: #666;
    font-style: italic;
}
.streak-broken .send-btn {
    background: #7a7a7a;
}
.streak-broken .send-btn:hover {
    background: #666;
}

/* Floating dust particles */
.chat-active.streak-broken .message-list::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 2px, transparent 3px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 1.5px, transparent 2.5px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.22) 2px, transparent 3px),
        radial-gradient(circle at 85% 20%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 1.5px, transparent 2.5px),
        radial-gradient(circle at 10% 70%, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 2px, transparent 3px);
    animation: streak-dust-float 6s ease-in-out infinite alternate;
    opacity: 0.6;
}
@keyframes streak-dust-float {
    0% { transform: translateY(0); opacity: 0.45; }
    100% { transform: translateY(-8px); opacity: 0.7; }
}

/* Broken streak badge shown in the header */
.streak-broken-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    font-size: 11px;
    color: #666;
    background: rgba(255,255,255,0.55);
    padding: 1px 6px;
    border-radius: 10px;
    vertical-align: middle;
}

/* ---------- Dynamic broken-streak decorations ---------- */
.chat-active.streak-broken {
    overflow: hidden;
}

/* Extra spider webs (JS adds more based on broken days) */
.streak-decor-web {
    position: absolute;
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 4;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: streak-web-fade-in 0.5s ease forwards, streak-web-sway 4s ease-in-out infinite alternate;
}
.streak-decor-web:nth-child(odd) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23aaaaaa' stroke-width='1.2' opacity='0.72'%3E%3Cpath d='M0 0 L120 120 M20 0 L120 100 M40 0 L120 80 M60 0 L120 60 M80 0 L120 40'/%3E%3Cpath d='M0 0 L120 120 M0 20 L100 120 M0 40 L80 120 M0 60 L60 120 M0 80 L40 120'/%3E%3Cellipse cx='0' cy='0' rx='20' ry='20'/%3E%3Cellipse cx='0' cy='0' rx='40' ry='40'/%3E%3Cellipse cx='0' cy='0' rx='60' ry='60'/%3E%3Cellipse cx='0' cy='0' rx='80' ry='80'/%3E%3Cellipse cx='0' cy='0' rx='100' ry='100'/%3E%3C/g%3E%3C/svg%3E");
}
.streak-decor-web:nth-child(even) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23aaaaaa' stroke-width='1.2' opacity='0.72'%3E%3Cpath d='M120 0 L0 120 M100 0 L0 100 M80 0 L0 80 M60 0 L0 60 M40 0 L0 40'/%3E%3Cpath d='M120 0 L0 120 M120 20 L20 120 M120 40 L40 120 M120 60 L60 120 M120 80 L80 120'/%3E%3Cellipse cx='120' cy='0' rx='20' ry='20'/%3E%3Cellipse cx='120' cy='0' rx='40' ry='40'/%3E%3Cellipse cx='120' cy='0' rx='60' ry='60'/%3E%3Cellipse cx='120' cy='0' rx='80' ry='80'/%3E%3Cellipse cx='120' cy='0' rx='100' ry='100'/%3E%3C/g%3E%3C/svg%3E");
}
@keyframes streak-web-fade-in {
    to { opacity: 0.55; }
}
@keyframes streak-web-sway {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.05) rotate(2deg); }
}

/* Spiders crawling on the webs */
.streak-decor-spider {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 5;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    opacity: 0;
    animation: streak-spider-appear 0.6s ease forwards, streak-spider-crawl 5s linear infinite;
    filter: grayscale(0.3);
}
@keyframes streak-spider-appear {
    to { opacity: 0.9; }
}
@keyframes streak-spider-crawl {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, 8px) rotate(15deg); }
    50% { transform: translate(8px, 22px) rotate(-10deg); }
    75% { transform: translate(28px, 18px) rotate(20deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Grass growing from the top of the input area */
.streak-decor-grass {
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
    opacity: 0.95;
}
.streak-decor-grass-blade {
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
    animation: streak-grass-grow 0.6s ease-out forwards, streak-grass-sway 2.5s ease-in-out infinite alternate;
    opacity: 0.9;
}
@keyframes streak-grass-grow {
    0% { transform: scaleY(0) translateY(8px); opacity: 0; }
    100% { transform: scaleY(1) translateY(0); opacity: 0.9; }
}
@keyframes streak-grass-sway {
    0% { transform: rotate(-3deg) scaleY(1); }
    100% { transform: rotate(4deg) scaleY(1.05); }
}

/* ---------- Modals ---------- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background: var(--bg-panel);
    border-radius: var(--radius);
    width: 90%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 500;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.hint-text {
    color: var(--text-tertiary);
    text-align: center;
    padding: 20px;
    font-size: 13px;
}

/* WeChat push settings modal */
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    justify-content: flex-end;
}
.btn-ghost {
    background: var(--bg-hover, #f0f0f0);
    color: var(--text-primary);
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    cursor: pointer;
}
.btn-ghost:hover {
    background: var(--bg-active, #e6e6e6);
}
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-primary);
}
.switch-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent, #07c160);
    cursor: pointer;
}
#modal-wechat-push .hint-text {
    text-align: left;
    padding: 4px 0;
}
#wechat-push-tip {
    text-align: left;
    min-height: 18px;
    margin-top: 8px;
    color: var(--accent, #07c160);
}

/* Search results */
.search-results {
    margin-top: 12px;
}

.user-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.user-item:hover {
    background: var(--bg-hover);
}

.user-item .avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 12px;
}

.user-item .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-item .info {
    flex: 1;
}

.user-item .name {
    font-size: 14px;
    color: var(--text-primary);
}

.user-item .username {
    font-size: 12px;
    color: var(--text-secondary);
}

.user-item .action-btn {
    padding: 6px 14px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
}

.user-item .action-btn:hover {
    background: var(--accent);
    color: #fff;
}

.user-item .action-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.user-item .action-btn.added {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-secondary);
}

/* Profile modal */
.profile-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-avatar-wrap {
    text-align: center;
}

.profile-avatar-wrap img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 8px;
}

/* Image viewer */
.image-viewer {
    cursor: pointer;
}

.image-viewer img {
    max-width: 90%;
    max-height: 90%;
    border-radius: var(--radius);
}

/* ---------- Context Menu ---------- */
.context-menu {
    position: fixed;
    background: var(--bg-panel);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    z-index: 2000;
    min-width: 120px;
}

.context-menu button {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: 13px;
}

.context-menu button:hover {
    background: var(--bg-hover);
}

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    z-index: 3000;
    pointer-events: none;
    animation: toast-fade 0.3s;
}

@keyframes toast-fade {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---------- Friend Request Item ---------- */
.request-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.request-item:last-child { border-bottom: none; }

.request-item .avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 12px;
}

.request-item .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.request-item .info {
    flex: 1;
}

.request-item .name {
    font-size: 14px;
}

.request-item .actions {
    display: flex;
    gap: 8px;
}

.request-item .actions button {
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-primary);
}

.request-item .actions .btn-accept {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ---------- Voice Recording Animation ---------- */
.recording-animation {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--danger);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* ---------- Mobile tab views (hidden on desktop) ---------- */
.mobile-views,
.mobile-tab-bar { display: none; }

/* ---------- Responsive (Mobile / Tablet) ---------- */
/* Breakpoint lifted to 1024px so iPad landscape and narrow desktop windows
   also use the mobile layout (single-pane + full-screen chat overlay). */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 0px;
        --list-width: 100%;
    }

    /* iOS Safari: 100vh jumps with URL bar. Use 100dvh when supported. */
    html, body { height: 100dvh; }
    .app {
        height: 100dvh;
        padding-bottom: 60px; /* leave room for bottom tab bar */
    }

    .sidebar { display: none; }

    /* Desktop list/contacts/discover panels are not used on mobile;
       the mobile tab views have their own equivalents. */
    #panel-list,
    #panel-contacts,
    #panel-discover { display: none !important; }

    /* Hide bottom tab bar while in a conversation so it doesn't cover the input */
    body.chat-open .mobile-tab-bar { display: none !important; }
    body.chat-open .app { padding-bottom: 0; }

    /* Mobile tab views: one visible pane at a time */
    .mobile-views {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .mobile-view {
        display: none;
        flex-direction: column;
        flex: 1;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: var(--bg-panel);
    }
    .mobile-view.active { display: flex; }

    /* Chat list fills the chats tab */
    .mobile-view .panel-list {
        width: 100%;
        height: 100%;
        border-right: none;
    }

    /* Bottom tab bar */
    .mobile-tab-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 60px;
        background: var(--bg-panel);
        border-top: 1px solid var(--border);
        z-index: 20;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: none;
        background: transparent;
        color: var(--text-tertiary);
        font-size: 11px;
        cursor: pointer;
        position: relative;
        transition: color 0.15s;
    }
    .mobile-tab.active,
    .mobile-tab:active { color: var(--accent); }
    .mobile-tab .badge {
        position: absolute;
        top: 4px;
        left: 50%;
        margin-left: 8px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--danger);
        color: #fff;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        border-radius: 8px;
    }

    /* Mobile page header / body */
    .mobile-page-header {
        height: 52px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding: 0 16px;
        background: var(--bg-panel-header);
        border-bottom: 1px solid var(--border);
    }
    .mobile-page-header h2 {
        font-size: 17px;
        font-weight: 600;
        color: var(--text-primary);
    }
    .mobile-page-body {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
    }

    /* Card rows inside contacts / discover / me */
    .mobile-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        margin-bottom: 8px;
        background: var(--bg-panel-header);
        border-radius: 12px;
        cursor: pointer;
        box-shadow: var(--shadow);
    }
    .mobile-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .mobile-card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 0;
    }
    .mobile-card-title {
        font-size: 15px;
        color: var(--text-primary);
        font-weight: 500;
    }
    .mobile-card-sub {
        display: block;
        font-size: 12px;
        color: var(--text-tertiary);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Contacts list in mobile tab */
    .mobile-contacts-list {
        margin-top: 8px;
    }
    .mobile-contacts-list .contact-item {
        padding: 10px 12px;
        border-radius: 10px;
        margin-bottom: 4px;
    }

    /* Me tab profile */
    .mobile-profile-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px;
        margin-bottom: 12px;
        background: var(--bg-panel-header);
        border-radius: 12px;
        box-shadow: var(--shadow);
    }
    .mobile-profile-avatar {
        width: 64px;
        height: 64px;
        border-radius: 10px;
        object-fit: cover;
        background: var(--bg-hover);
    }
    .mobile-profile-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .mobile-profile-name {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
    }
    .mobile-profile-meta {
        font-size: 13px;
        color: var(--text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-logout-btn {
        width: 100%;
        margin-top: 24px;
        padding: 14px;
        font-size: 15px;
        border-radius: 12px;
    }

    /* Chat is a full-screen overlay. Use visibility:hidden so the element
       doesn't paint as a gray strip off-screen on iOS Safari when its
       transform renders imperfectly. */
    .panel-chat {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 10;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }
    .panel-chat.active {
        visibility: visible;
        transform: translateX(0);
        transition: transform 0.25s ease, visibility 0s linear 0s;
    }

    .back-btn { display: flex !important; }

    /* List panel: more breathing room + larger touch targets */
    .panel-list-header { height: 52px; padding: 0 14px; }
    .contact-item { padding: 12px 14px; }
    .contact-item .avatar { width: 44px; height: 44px; }
    .contact-item .info-row .name { font-size: 16px; }
    .contact-item .preview { font-size: 14px; }

    /* Toolbar + send button: easier to tap */
    .chat-toolbar { padding: 6px 8px; }
    .tool-btn { width: 40px; height: 40px; }

    /* Prevent iOS from auto-zooming the page when focusing inputs
       (iOS only auto-zooms inputs with font-size < 16px). */
    #message-input,
    .input-row textarea,
    .form-group input,
    .form-group textarea { font-size: 16px; }

    .message-row { max-width: 85%; }

    .modal { width: 92%; max-height: 88vh; }

    .emoji-panel { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 480px) {
    .panel-list-header h2 { font-size: 17px; }
    .contact-item { padding: 10px 12px; }
    .contact-item .info-row .name { font-size: 15px; }

    .message-row { max-width: 92%; }
    .message-bubble img.msg-image { max-width: 200px; max-height: 200px; }

    .emoji-panel { grid-template-columns: repeat(7, 1fr); }

    .modal { width: 96%; }
    .modal-body { padding: 14px; }

    /* Admin (when opened on phone) */
    .admin-tabs { gap: 6px; }
    .tab-btn { padding: 8px 12px; font-size: 13px; }
}

/* ============================================
   Admin - Theme Picker (界面设置)
   ============================================ */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 4px;
}
.theme-option {
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    background: var(--panel-bg);
    box-shadow: var(--shadow);
    transition: border-color .15s, box-shadow .15s;
}
.theme-option:hover { border-color: var(--accent); }
.theme-option.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}
.theme-preview {
    height: 120px;
    border-radius: 10px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.theme-preview .pv-sidebar {
    position: absolute; left: 0; top: 0; bottom: 0; width: 26%;
}
.theme-preview .pv-body {
    position: absolute; right: 0; top: 0; bottom: 0; width: 74%;
}
.theme-preview .pv-bubble {
    position: absolute; width: 52%; height: 13px; border-radius: 7px;
}
.theme-name { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.theme-desc { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.theme-badge {
    display: inline-block; margin-left: 8px; padding: 1px 8px;
    border-radius: 10px; font-size: 11px; font-weight: 500;
    background: var(--accent-light); color: var(--accent);
}

/* ---------- Header actions (contacts / search / logout) ---------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}
.header-actions .icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}
.header-actions .icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.icon-btn-logout:hover {
    color: var(--danger) !important;
    background: var(--accent-light) !important;
}
/* Contacts modal friend rows reuse .request-item; make them tappable */
#modal-contacts .request-item {
    cursor: pointer;
    border-radius: 10px;
}
#modal-contacts .request-item:hover {
    background: var(--bg-hover);
}

/* ============================================
   Discover Page (PC + Mobile) — News Feed
   ============================================ */
.discover-panel {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    overflow: hidden;
}

.discover-header {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--bg-panel-header);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.discover-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.discover-header .refresh-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    transition: all .15s;
}
.discover-header .refresh-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.discover-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Category filter chips */
.news-categories {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    overflow-x: auto;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-light);
}
.news-cat-chip {
    padding: 5px 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.news-cat-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.news-cat-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* News feed list */
.news-feed {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.news-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background .15s;
}
.news-item:hover {
    background: var(--bg-hover);
    margin: 0 -12px;
    padding: 14px 12px;
    border-radius: var(--radius);
}
.news-item-image {
    width: 100px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-hover);
}
.news-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.news-item-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-item-summary {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: auto;
}
.news-item-cat {
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 11px;
    font-weight: 500;
}

/* Expandable news detail (shown inside the news item) */
.news-item-detail {
    display: none;
    margin-top: 10px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}
.news-item.expanded .news-item-detail {
    display: block;
}
.news-item-detail p {
    margin: 0 0 10px;
}
.news-item-detail a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.news-item-detail a:hover {
    text-decoration: underline;
}

/* Interest selector (empty state prompt) */
.news-interest-setup {
    text-align: center;
    padding: 40px 20px;
}
.news-interest-setup p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-size: 14px;
}
.news-interest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 400px;
    margin: 0 auto;
}
.news-interest-chip {
    padding: 8px 18px;
    border-radius: 20px;
    border: 2px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
}
.news-interest-chip:hover {
    border-color: var(--accent);
}
.news-interest-chip.selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.news-interest-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* Mobile discover page */
@media (max-width: 1024px) {
    .discover-panel {
        height: 100%;
    }
    .news-categories {
        padding: 10px 14px;
    }
    .news-feed {
        padding: 12px 14px;
    }
    .news-item-image {
        width: 80px;
        height: 56px;
    }
    .news-item-title {
        font-size: 14px;
    }
}

/* Desktop contacts / discover panels shown in the list-column area */
.panel-contacts,
.panel-discover {
    width: var(--list-width);
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: none;
    flex-direction: column;
    flex-shrink: 0;
}
.panel-contacts.active,
.panel-discover.active {
    display: flex;
}

/* Discover mode: hide the right chat panel and let discover fill the rest */
.app.discover-mode .panel-chat { display: none; }
.app.discover-mode .panel-discover.active {
    width: auto;
    flex: 1;
    border-right: none;
}

/* New-friends entry inside PC contacts panel */
.contacts-new-friends {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin: 8px 12px;
    background: var(--bg-panel-header);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.15s;
}
.contacts-new-friends:hover {
    background: var(--bg-hover);
}
.contacts-new-friends .badge {
    position: static;
    transform: none;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    font-size: 11px;
}

/* ============================================================
   Chat header peer avatar (click to view profile)
   ============================================================ */
.chat-peer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.chat-peer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* Clickable peer avatars in the message stream */
.msg-avatar { cursor: default; }
.msg-avatar[data-peer-avatar] { cursor: pointer; }
.msg-avatar img,
.contact-item .avatar img,
#chat-peer-avatar img {
    transition: transform 0.6s ease;
}

/* ============================================================
   Double-click "shake" (dizzy) effect: tilt 30° then hold,
   removed after 30s so the avatar returns upright smoothly.
   ============================================================ */
.dizzy {
    animation: dizzy-shake 1s ease-in-out;
    animation-fill-mode: forwards;
    transform-origin: center center;
}
@keyframes dizzy-shake {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(30deg); }
    40%  { transform: rotate(-22deg); }
    60%  { transform: rotate(28deg); }
    80%  { transform: rotate(-15deg); }
    100% { transform: rotate(30deg); }
}

/* ============================================================
   User info modal (avatar / name click popup)
   ============================================================ */
.userinfo-avatar {
    width: 96px;
    height: 96px;
    margin: 6px auto 14px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.userinfo-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.userinfo-name {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.userinfo-username {
    text-align: center;
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.userinfo-row {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
}
.userinfo-sign {
    margin: 12px 4px 0;
    padding: 10px 12px;
    background: var(--bg-hover);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    word-break: break-word;
}

/* ===================================================================
 *  小游戏（右侧入口 / 抽屉 / 弹窗）
 * =================================================================== */
.games-fab {
    position: fixed;
    right: 22px;
    bottom: 108px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, background .2s;
}
.games-fab:hover { background: var(--accent-hover); transform: scale(1.06); }

.games-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1100;
}
.games-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 320px;
    max-width: 86vw;
    background: var(--bg-panel);
    z-index: 1101;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
}
.games-drawer.open { transform: translateX(0); }
.games-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.games-drawer-header h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.games-grid {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
    flex: 1;
}
.game-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    background: var(--bg-panel-header);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: all .15s;
}
.game-card:hover {
    border-color: var(--accent);
    background: var(--accent-light);
    transform: translateY(-1px);
}
.game-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.game-card-body { display: flex; flex-direction: column; gap: 2px; }
.game-card-name { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.game-card-desc { font-size: 12px; color: var(--text-secondary); }
.games-drawer-tip {
    padding: 14px 18px;
    font-size: 12px;
    color: var(--text-tertiary);
    border-top: 1px solid var(--border);
}

#modal-game { z-index: 1200; }
.game-modal {
    background: var(--bg-panel);
    border-radius: var(--radius);
    width: 94%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.game-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.game-modal-header h3 { font-size: 16px; font-weight: 500; color: var(--text-primary); }
.game-modal-actions { display: flex; align-items: center; gap: 10px; }
.game-toolbar {
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.game-stage {
    padding: 16px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.game-canvas {
    display: block;
    border-radius: 12px;
    background: var(--bg-panel-header);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.game-info {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
    min-width: 120px;
}
.game-info b { color: var(--text-primary); }
.game-dpad-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.game-dpad-hint {
    font-size: 12px;
    color: var(--text-tertiary);
}
.game-dpad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.game-dpad .dpad-mid { display: flex; gap: 6px; }
.game-dpad button {
    width: 54px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-panel-header);
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: background .1s, transform .05s;
}
.game-dpad button:active { background: var(--accent-light); transform: scale(0.96); }

.game-tip {
    width: 100%;
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 4px 0 0;
}

.cat-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
}
.cat-grid {
    display: grid;
    gap: 3px;
    padding: 6px;
    background: var(--border);
    border-radius: 12px;
}
.cat-cell {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--bg-panel-header);
    user-select: none;
    transition: background .1s;
}
.cat-cell.empty { cursor: pointer; }
.cat-cell.empty:hover { background: var(--accent-light); }
.cat-cell.wall { background: var(--accent); }
.cat-cell.cat { background: #ffd84d; }

.game-mini-btn { padding: 6px 12px; font-size: 13px; }

/* 华容道 */
.klotski-board {
    position: relative;
    width: min(380px, 92%);
    aspect-ratio: 4 / 5;
    margin: 0 auto;
    background: var(--bg-panel-header);
    border: 2px solid var(--border);
    border-radius: 10px;
    touch-action: none;
}
.klotski-piece {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    border-radius: 8px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18);
    cursor: grab;
    user-select: none;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.1);
    transition: left .08s ease, top .08s ease;
}
.klotski-piece:active { cursor: grabbing; }
.klotski-piece.cao { background: #e23b3b; font-size: 18px; }
.klotski-piece.gen { background: #3b7de2; }
.klotski-piece.guan { background: #2faf5a; }
.klotski-piece.sol { background: #8a8f99; font-size: 12px; }

@media (max-width: 768px) {
    .games-fab { right: 14px; bottom: 148px; width: 48px; height: 48px; }
    .game-modal { width: 96%; max-height: 92vh; }
    .game-toolbar { padding: 10px 12px; gap: 10px; }
    .cat-cell { width: 32px; height: 32px; font-size: 18px; }
    .cat-grid { gap: 2px; padding: 5px; }
    .game-dpad button { width: 60px; height: 50px; font-size: 20px; }
}
.userinfo-sign.userinfo-empty {
    color: var(--text-tertiary);
    font-style: italic;
}
.userinfo-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.userinfo-actions button {
    flex: 1;
}

/* ============================================
   Letter / Codex Skin (信笺手稿皮肤)
   Applied when <html data-skin="letter">
   ============================================ */
[data-skin="letter"] {
    --accent: #8b5e3c;
    --accent-hover: #754b2f;
    --accent-light: #f0e6d8;

    --bg-app: #f4f1e8;
    --bg-sidebar: #e8e1d3;
    --bg-panel: #faf8f2;
    --bg-panel-header: #f3efe5;
    --bg-input: #ffffff;
    --bg-hover: #efe9db;
    --bg-active: #e5dcc8;
    --bg-bubble-sent: #fff8e7;
    --bg-bubble-received: #ffffff;

    --text-primary: #3d342b;
    --text-secondary: #7c6f5f;
    --text-tertiary: #a89b8a;
    --text-on-sidebar: #5e5244;
    --text-on-sidebar-active: #3d342b;
    --text-bubble-sent: #3d342b;
    --text-bubble-received: #3d342b;

    --border: #d8d2c2;
    --border-light: #e9e3d6;
    --shadow: 1px 1px 0 rgba(90, 70, 50, 0.12);
    --shadow-lg: 2px 2px 0 rgba(90, 70, 50, 0.18);

    --radius: 4px;
    --radius-sm: 2px;
    --radius-bubble: 2px;

    --danger: #b85c5c;
    --warning: #c8923a;
    --info: #5a8bb8;
}

[data-skin="letter"] .login-page {
    background: #f4f1e8;
    background-image:
        linear-gradient(to right, rgba(200, 190, 170, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(200, 190, 170, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
}
[data-skin="letter"] .login-card {
    background: #fffdf8;
    border: 1px solid #c9c0ad;
    border-radius: 2px;
    box-shadow: 3px 3px 0 rgba(100, 80, 60, 0.15);
}
[data-skin="letter"] .login-logo svg rect { fill: #8b5e3c; }
[data-skin="letter"] .login-logo h1 { color: #5e4b35; font-weight: 700; letter-spacing: 1px; }
[data-skin="letter"] .form-group input {
    border: 1px solid #c9c0ad;
    border-radius: 2px;
    background: #fff;
    box-shadow: inset 1px 1px 2px rgba(90, 70, 50, 0.06);
}
[data-skin="letter"] .btn-primary,
[data-skin="letter"] .send-btn {
    border: 1px solid #8b5e3c;
    border-radius: 2px;
    background: #8b5e3c;
    color: #fff;
    box-shadow: 1px 1px 0 rgba(90, 70, 50, 0.2);
}
[data-skin="letter"] .btn-primary:hover,
[data-skin="letter"] .send-btn:hover { background: #754b2f; }

[data-skin="letter"] .sidebar {
    background: #e8e1d3;
    border-right: 1px solid #d4cdbc;
}
[data-skin="letter"] .nav-btn { color: #5e5244; border-radius: 0; }
[data-skin="letter"] .nav-btn:hover { background: rgba(139, 94, 60, 0.08); }
[data-skin="letter"] .nav-btn.active { background: rgba(139, 94, 60, 0.18); color: #3d342b; }
[data-skin="letter"] .sidebar-avatar { border: 1px solid #c9c0ad; border-radius: 2px; }

[data-skin="letter"] .panel-list,
[data-skin="letter"] .panel-contacts {
    background: #faf8f2;
    border-right: 1px solid #e0d8c8;
}
[data-skin="letter"] .panel-list-header,
[data-skin="letter"] .chat-header,
[data-skin="letter"] .discover-header {
    background: #f3efe5;
    border-bottom: 1px solid #d8d2c2;
}
[data-skin="letter"] .chat-title { color: #3d342b; font-weight: 700; }

[data-skin="letter"] .search-box input {
    border: 1px solid #c9c0ad;
    border-radius: 2px;
    background: #fff;
}
[data-skin="letter"] .contact-item {
    border-bottom: 1px dashed #e0d8c8;
    border-radius: 0;
    background: transparent;
}
[data-skin="letter"] .contact-item:hover { background: #f3efe5; }
[data-skin="letter"] .contact-item.active { background: #ebe4d4; border-left: 3px solid #8b5e3c; }
[data-skin="letter"] .contact-item .avatar { border-radius: 2px; border: 1px solid #d8d2c2; }

[data-skin="letter"] .message-list {
    background: #f4f1e8;
    background-image:
        linear-gradient(to right, rgba(200, 190, 170, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(200, 190, 170, 0.12) 1px, transparent 1px);
    background-size: 24px 24px;
}
[data-skin="letter"] .message-row {
    position: relative;
    padding-left: 56px;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}
[data-skin="letter"] .message-row::before {
    content: 'NO.' attr(data-msg-no);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: 10px;
    color: #a89b8a;
    letter-spacing: 1px;
    font-family: "Courier New", monospace;
}
[data-skin="letter"] .message-row.self { flex-direction: row-reverse; justify-content: flex-start; }
[data-skin="letter"] .message-row.self .msg-content { align-items: flex-end; }
[data-skin="letter"] .msg-avatar {
    border-radius: 2px;
    border: 1px solid #c9c0ad;
    box-shadow: 1px 1px 0 rgba(90, 70, 50, 0.1);
}
[data-skin="letter"] .msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
[data-skin="letter"] .msg-sender {
    font-weight: 700;
    color: #5e4b35;
    font-size: 13px;
}
[data-skin="letter"] .msg-time {
    font-size: 11px;
    color: #a89b8a;
}
[data-skin="letter"] .message-bubble {
    border-radius: 2px !important;
    border: 1px solid #c9c0ad;
    box-shadow: 2px 2px 0 rgba(120, 100, 70, 0.12);
    padding: 10px 14px;
    line-height: 1.6;
    width: fit-content;
    max-width: 100%;
    min-width: auto;
}
[data-skin="letter"] .message-bubble > span {
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
}
[data-skin="letter"] .message-row:not(.self) .message-bubble {
    background: #fff !important;
    color: #3d342b;
}
[data-skin="letter"] .message-row.self .message-bubble {
    background: #fff8e7 !important;
    color: #3d342b;
    border-color: #d4c4a8;
}
[data-skin="letter"] .message-bubble .msg-mention {
    display: inline-block;
    border: 1px solid #8b5e3c;
    color: #8b5e3c;
    background: rgba(139, 94, 60, 0.08);
    padding: 0 5px;
    border-radius: 2px;
    font-weight: 600;
    margin: 0 1px;
}
[data-skin="letter"] .msg-send-time { display: none; }
[data-skin="letter"] .message-status { color: #a89b8a; font-size: 11px; }

[data-skin="letter"] .chat-input-area {
    background: #f3efe5;
    border-top: 1px solid #d8d2c2;
}
[data-skin="letter"] #message-input {
    border: 1px solid #c9c0ad;
    border-radius: 2px;
    background: #fff;
    box-shadow: inset 1px 1px 2px rgba(90, 70, 50, 0.06);
}
[data-skin="letter"] .chat-toolbar .tool-btn {
    border: 1px solid #c9c0ad;
    border-radius: 2px;
    background: #fff;
    color: #5e5244;
}
[data-skin="letter"] .chat-toolbar .tool-btn:hover { background: #f0e6d8; }

[data-skin="letter"] .modal-overlay { background: rgba(60, 50, 40, 0.3); }
[data-skin="letter"] .modal {
    background: #fffdf8;
    border: 1px solid #c9c0ad;
    border-radius: 2px;
    box-shadow: 4px 4px 0 rgba(100, 80, 60, 0.15);
}
[data-skin="letter"] .modal-header { background: #f3efe5; border-bottom: 1px solid #d8d2c2; }
[data-skin="letter"] .modal-header h3 { color: #3d342b; }

[data-skin="letter"] .message-date-divider {
    background: rgba(243, 239, 229, 0.9);
    color: #7c6f5f;
    border: 1px solid #d8d2c2;
    border-radius: 2px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    padding: 3px 10px;
}

[data-skin="letter"] .sender-tag {
    display: inline-block;
    border: 1px solid #8b5e3c;
    color: #8b5e3c;
    font-size: 10px;
    padding: 0 5px;
    border-radius: 2px;
    margin-left: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

[data-skin="letter"][data-theme="dark"] {
    --accent: #c7a67c;
    --accent-hover: #b08f66;
    --accent-light: #4a4238;

    --bg-app: #2e2922;
    --bg-sidebar: #3a332b;
    --bg-panel: #383128;
    --bg-panel-header: #312b24;
    --bg-input: #423a31;
    --bg-hover: #423a31;
    --bg-active: #4a4238;
    --bg-bubble-sent: #4a4238;
    --bg-bubble-received: #383128;

    --text-primary: #e8e1d5;
    --text-secondary: #a89b8a;
    --text-tertiary: #7c6f5f;
    --text-on-sidebar: #c9bba6;
    --text-on-sidebar-active: #e8e1d5;
    --text-bubble-sent: #e8e1d5;
    --text-bubble-received: #e8e1d5;

    --border: #5a5044;
    --border-light: #4a4238;
    --shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
    --shadow-lg: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
[data-skin="letter"][data-theme="dark"] .login-page,
[data-skin="letter"][data-theme="dark"] .message-list {
    background: #2e2922;
}
[data-skin="letter"][data-theme="dark"] .message-row:not(.self) .message-bubble {
    background: #383128 !important;
    border-color: #5a5044;
    color: var(--text-bubble-received);
}
[data-skin="letter"][data-theme="dark"] .message-row.self .message-bubble {
    background: #4a4238 !important;
    border-color: #6b5e4f;
    color: var(--text-bubble-sent);
}

/* ============ Robot Pet Modal ============ */
.modal-robot { max-width: 420px; }
.robot-empty { text-align: center; padding: 18px 6px; }
.robot-card {
    display: flex; flex-direction: column; align-items: center;
    background: var(--input-bg); border-radius: 12px; padding: 18px 14px; margin-bottom: 14px;
}
.robot-avatar {
    width: 72px; height: 72px; border-radius: 50%; font-size: 38px; line-height: 72px; text-align: center;
    background: #6a5acd22; margin-bottom: 10px; object-fit: cover; display: block;
}
.robot-icon-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
    padding: 10px; border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--panel-bg); margin-bottom: 4px;
}
.robot-icon {
    display: flex; align-items: center; justify-content: center;
    height: 34px; font-size: 22px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent; background: var(--input-bg);
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
    user-select: none;
}
.robot-icon:hover { transform: scale(1.12); border-color: var(--accent); }
.robot-icon.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.robot-meta { display: flex; gap: 8px; align-items: center; width: 100%; justify-content: center; }
.robot-name-input {
    flex: 1; max-width: 220px; padding: 8px 12px; border: 1px solid var(--border-color);
    border-radius: 8px; background: var(--panel-bg); color: var(--text-primary); font-size: 15px; text-align: center;
}
.robot-level { font-size: 13px; color: var(--text-secondary); margin: 10px 0 6px; }
.robot-progress { width: 100%; height: 8px; border-radius: 6px; background: var(--border-color); overflow: hidden; }
.robot-progress-bar { height: 100%; background: linear-gradient(90deg, #8b5cf6, #6a5acd); transition: width .4s; }
.robot-section { margin-top: 14px; text-align: left; }
.robot-section .form-label { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 13px; }
.robot-section textarea, .robot-section select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--panel-bg); color: var(--text-primary); font-size: 14px; resize: vertical;
    box-sizing: border-box; margin-bottom: 8px; font-family: inherit;
}
.robot-train-msg { font-size: 13px; color: #07c160; min-height: 18px; margin-top: 6px; }
.robot-tip {
    margin-top: 16px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
    background: var(--input-bg); color: var(--text-secondary); line-height: 1.5;
}
.robot-banner {
    background: #fff7e6; color: #ad6800; border: 1px solid #ffe1a8; border-radius: 8px;
    padding: 8px 12px; font-size: 13px; margin-bottom: 12px; text-align: center;
}
[data-skin="letter"] .robot-card { background: #fffdf6; border: 1px dashed #c4bca8; }
[data-skin="letter"] .robot-avatar { background: #efe9da; }
[data-skin="letter"] .robot-tip { background: #fffdf6; border: 1px dashed #c4bca8; color: #8c8676; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; cursor: pointer; }
.btn-ghost {
    background: var(--panel-bg); color: var(--text-primary); border: 1px solid var(--border-color);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary {
    background: var(--accent); color: #fff; border: none;
}
.btn-primary:hover { opacity: .92; }

/* ============ Quote / reply (引用回复) ============ */
.msg-quote {
    display: flex; flex-direction: column; gap: 2px;
    padding: 5px 9px; margin: 0 0 5px 0;
    background: var(--panel-bg); border-left: 3px solid var(--accent);
    border-radius: 4px; font-size: 12px; line-height: 1.45;
    max-width: 320px; overflow: hidden;
}
.msg-quote-name { color: var(--accent); font-weight: 600; }
.msg-quote-text { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-row.self .msg-quote { border-left-color: #07c160; }

.quote-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; margin-bottom: 6px;
    background: var(--panel-bg); border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent); border-radius: 6px; font-size: 13px;
}
.quote-bar-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.quote-bar-label { color: var(--accent); font-weight: 600; }
.quote-bar-close {
    background: transparent; border: none; color: var(--text-secondary);
    cursor: pointer; padding: 2px; display: flex; align-items: center;
}
.quote-bar-close:hover { color: var(--text-primary); }

/* ============ Mobile message action sheet (点击消息弹出) ============ */
.msg-actions-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    z-index: 1100; display: none;
}
.msg-actions {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1101; background: var(--panel-bg);
    border-radius: 16px 16px 0 0; padding: 6px 12px calc(12px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 6px;
    transform: translateY(100%); transition: transform .22s ease;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
}
.msg-actions.open { transform: translateY(0); }
.msg-actions-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 6px 4px; color: var(--text-secondary); font-size: 13px;
}
.msg-action-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 14px; font-size: 16px; color: var(--text-primary);
    background: var(--bg-hover, transparent); border: none; border-radius: 12px; cursor: pointer;
}
.msg-action-btn span { font-size: 20px; }
.msg-action-btn:active { background: var(--border-color); }
.msg-action-cancel {
    width: 100%; padding: 14px; margin-top: 4px; font-size: 16px;
    color: var(--text-primary); background: var(--bg-hover, transparent);
    border: none; border-radius: 12px; cursor: pointer;
}
.msg-action-cancel:active { background: var(--border-color); }

/* ============ 3D Pet (侧边栏 + 面板) ============ */
.sidebar-pet {
    position: relative;
    width: 52px; height: 52px; margin: 6px auto;
    border-radius: 14px; background: var(--panel-bg);
    border: 1px solid var(--border-color);
    cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s;
}
.sidebar-pet:hover { transform: scale(1.06); }
.pet-canvas {
    width: 100%; height: 100%; font-size: 28px;
    display: flex; align-items: center; justify-content: center;
}
.pet-canvas canvas { display: block; }
.pet-level-badge {
    position: absolute; right: 2px; bottom: 2px;
    font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 6px;
    background: rgba(0,0,0,0.55); color: #fff;
}

.pet-modal { width: 360px; max-width: 92vw; }
.pet-body { text-align: center; padding: 8px 20px 22px; }
.pet-stage {
    width: 180px; height: 180px; margin: 0 auto 12px;
    font-size: 72px; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, var(--bg-hover) 0%, transparent 70%);
}
.pet-stage canvas { display: block; }
.pet-info { text-align: left; margin: 0 auto 16px; max-width: 260px; }
.pet-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; justify-content: center; }
.pet-name { font-size: 20px; font-weight: 700; }
.pet-stage-tag { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--accent); color: #fff; }
.pet-stat { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 6px; color: var(--text-secondary); }
.pet-stat span { width: 44px; }
.pet-stat b { color: var(--text-primary); }
.pet-mood-bar { flex: 1; height: 10px; border-radius: 6px; background: var(--bg-hover); overflow: hidden; }
.pet-mood-fill { height: 100%; background: #4caf50; border-radius: 6px; transition: width .3s; }
.pet-exp-fill { height: 100%; background: #42a5f5; border-radius: 6px; transition: width .3s; }
.pet-actions { display: flex; gap: 8px; justify-content: center; margin-top: 4px; flex-wrap: wrap; }
.pet-actions button { padding: 10px 16px; }
.pet-actions button:disabled { opacity: .55; cursor: not-allowed; }
.pet-tip { margin-top: 12px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.pet-tip b { color: var(--text-primary); }

/* ============ Pet Card Picker (QQ宠物风格选择器) ============ */
.pet-card-modal {
    width: 92vw; max-width: 360px; max-height: 88vh;
    padding: 0;
    background: linear-gradient(180deg, #fff7e0 0%, #ffe9b3 100%);
    border-radius: 20px;
    overflow: hidden auto;
    position: relative;
    box-sizing: border-box;
}
.pet-card-modal * { box-sizing: border-box; }
.pet-card-close {
    position: absolute; top: 8px; left: 8px;
    z-index: 5;
    background: rgba(255,255,255,.7);
}
.pet-card {
    position: relative;
    margin: 12px 16px 0;
    padding: 14px 16px 14px;
    background: rgba(255,255,255,.78);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(180, 130, 50, 0.18);
    z-index: 2;
}
.pet-card-title {
    margin: 0 0 8px;
    font-size: 14px; font-weight: 700; color: #8d5524;
    text-align: center; letter-spacing: 1px;
}
.pet-card-rows { display: flex; flex-direction: column; gap: 4px; }
.pet-card-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #5d4037;
}
.pet-card-icon { font-size: 14px; width: 18px; text-align: center; }
.pet-card-key { width: 36px; color: #a17350; }
.pet-card-val { flex: 1; color: #3e2723; font-weight: 600; }
/* 资料卡四个角的橙色小三角 */
.pet-card-corner-tl,
.pet-card-corner-tr,
.pet-card-corner-bl,
.pet-card-corner-br {
    position: absolute; width: 0; height: 0;
    border: 8px solid transparent;
}
.pet-card-corner-tl { top: -2px; left: -2px; border-top-color: #ff7043; border-left-color: #ff7043; }
.pet-card-corner-tr { top: -2px; right: -2px; border-top-color: #ff7043; border-right-color: #ff7043; }
.pet-card-corner-bl { bottom: -2px; left: -2px; border-bottom-color: #ff7043; border-left-color: #ff7043; }
.pet-card-corner-br { bottom: -2px; right: -2px; border-bottom-color: #ff7043; border-right-color: #ff7043; }

.pet-card-stage {
    position: relative;
    height: 280px;
    margin: 0 0 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.pet-card-stage canvas { display: block; position: relative; z-index: 2; }
.pet-card-stage-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 80%, #ffd180 0%, transparent 70%);
    z-index: 1;
}

.pet-card-controls {
    padding: 6px 16px 18px;
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    flex-shrink: 0;
}
.pet-card-pager {
    display: flex; align-items: center; gap: 14px;
    color: #8d5524; font-size: 14px; font-weight: 600;
}
.pet-card-pager-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid #d7a86e; background: #fff8e1;
    color: #8d5524; cursor: pointer; font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s;
}
.pet-card-pager-btn:active { transform: scale(.92); }
.pet-card-pager-text b { color: #c62828; font-weight: 700; }
.pet-card-actions {
    display: flex; gap: 12px; justify-content: center;
}
.pet-card-action {
    min-width: 110px;
    padding: 10px 18px;
    border-radius: 22px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.pet-card-feed-actions {
    display: flex; gap: 6px; justify-content: center;
    margin-top: 4px; flex-wrap: wrap; padding: 0 12px 12px;
}
.pet-card-mini {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.6);
}
.pet-card-mini:disabled { opacity: .55; cursor: not-allowed; }

/* Toolbar "@机器人" button uses the pet's own emoji as its icon */
.pet-at-btn {
    font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}

.peer-pet { font-size: 14px; }
.peer-pet-row { display: flex; align-items: center; gap: 10px; }
.peer-pet-icon { font-size: 30px; }
.peer-pet-info { color: var(--text-primary); }

/* 注：旧的 pet-track（宠物在聊天框内行走）CSS 已移除，改为下方 .pet-float 固定悬浮组件 */

/* ============ Floating Pet Widget (悬浮宠物 / 始终显示在聊天框右下角) ============ */
.pet-float {
    position: fixed;
    right: 22px;
    bottom: 168px;            /* 高于 chat-input + tools */
    width: 92px; height: 92px;
    z-index: 850;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.pet-float-canvas {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, #fffaf0 0%, #ffe9b3 50%, #ffd07a 85%, #ffb74d 100%);
    box-shadow: 0 6px 18px rgba(180, 130, 50, 0.35), inset 0 -2px 4px rgba(255,255,255,.5);
    overflow: hidden;
    transition: transform .25s ease;
    border: 2px solid rgba(255,255,255,.7);
}
.pet-float-fallback {
    /* WebGL 渲染前显示 emoji，canvas 出现后由 JS 移除 */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.pet-float-fallback.hidden { display: none; }
.pet-float-canvas canvas {
    position: relative;
    z-index: 2;
    display: block;
}
.pet-float:hover .pet-float-canvas {
    transform: translateY(-3px) scale(1.04);
}
.pet-float-bubble {
    position: absolute;
    top: -10px;
    right: -4px;
    min-width: 30px; min-height: 30px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    font-size: 16px;
    line-height: 1;
    animation: petFloatUp 2.2s ease-out forwards;
    z-index: 4;
}
.pet-float-name {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.95);
    color: #5d4037;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3;
}
.pet-float-hide {
    position: absolute;
    top: 0; right: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    z-index: 5;
}
.pet-float-hide:hover { color: var(--text-primary); }

.pet-float-show {
    position: fixed;
    right: 22px;
    bottom: 168px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 22px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    z-index: 850;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.pet-float-show:hover { transform: scale(1.05); }

@keyframes petFloatUp {
    0%   { transform: translateY(0)    scale(0.7); opacity: 0; }
    20%  { transform: translateY(-8px)  scale(1.1); opacity: 1; }
    80%  { transform: translateY(-32px) scale(1);   opacity: 1; }
    100% { transform: translateY(-48px) scale(0.85); opacity: 0; }
}
.pet-float.idle-bounce .pet-float-canvas {
    animation: petIdleBounce 3.4s ease-in-out infinite;
}
@keyframes petIdleBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Pet3DV2 悬浮容器：默认隐藏，JS 开启后显示并隐藏旧 .pet-float */
.pet-float-v2 {
    position: fixed;
    right: 22px;
    bottom: 168px;
    width: 92px; height: 92px;
    z-index: 850;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    display: none; /* 默认隐藏，chat.js 按需启用 */
}
.pet-float-v2.active { display: block; }
.pet-float-v2:active { cursor: grabbing; }
.pet-float-v2 .pet-float-canvas {
    background: transparent;
    box-shadow: none;
    border: none;
    overflow: visible; /* 允许 3D 立绘略微超出圆形范围 */
}
.pet-float-v2 .pet-float-canvas canvas {
    cursor: grab;
}
@media (max-width: 768px) {
    .pet-float-v2 {
        right: 14px;
        bottom: 188px;
        /* 宽度保持 92px 以匹配 Pet3DV2 size，避免移动端定位偏移 */
    }
}

@media (max-width: 768px) {
    .pet-float {
        right: 14px;
        bottom: 188px;
        width: 78px; height: 78px;
    }
    .pet-float-show {
        right: 14px;
        bottom: 188px;
        width: 44px; height: 44px;
    }
    .pet-card-modal { width: min(360px, 96vw); max-height: 92vh; }
    .pet-card-stage { height: 240px; }
}

@media (max-width: 768px) {
    .sidebar-pet { width: 46px; height: 46px; }
    .pet-stage { width: 150px; height: 150px; font-size: 60px; }
}

/* 超窄屏（≤400px）：压缩资料卡高度，保证整卡一屏可见 */
@media (max-width: 400px) {
    .pet-card-modal {
        width: 94vw;
        max-height: 92vh;
        border-radius: 16px;
    }
    .pet-card { padding: 12px 12px 8px; }
    .pet-card-title { font-size: 13px; margin-bottom: 6px; }
    .pet-card-row { padding: 4px 8px; font-size: 12px; }
    .pet-card-stage { height: 180px; margin: 6px 10px; }
    .pet-card-controls { padding: 6px 10px 8px; gap: 6px; }
    .pet-card-actions { gap: 6px; }
    .pet-card-action { padding: 7px 10px; font-size: 13px; }
    .pet-card-feed-actions { gap: 5px; padding: 0 8px 8px; }
    .pet-card-mini { padding: 5px 9px; font-size: 11px; }
}