/* ====== 基础 ====== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
    height: 100%; width: 100%; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f2f2f7;
    touch-action: manipulation;
}
button { font-family: inherit; }

/* ====== 顶栏 ====== */
#topBar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: 50px; padding: env(safe-area-inset-top, 0) 12px 0;
    background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid #e5e5ea;
    display: flex; align-items: center; justify-content: space-between;
}
.tb-left { display: flex; align-items: center; gap: 10px; }
.tb-title { font-weight: 700; font-size: 16px; color: #222; }
.online-badge {
    font-size: 12px; color: #666; background: #f0f2ff;
    padding: 3px 8px; border-radius: 10px; display: flex; align-items: center; gap: 4px;
}
.online-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.tb-right { display: flex; align-items: center; gap: 6px; }
.tb-right button {
    border: none; background: transparent; font-size: 18px;
    padding: 6px 8px; cursor: pointer; position: relative; border-radius: 8px;
}
.tb-right button:active { background: #e5e5ea; }
.myname {
    font-size: 14px !important; font-weight: 600; color: #fff !important;
    background: #667eea !important; padding: 6px 12px !important; max-width: 110px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge {
    position: absolute; top: 0; right: 0;
    background: #ff3b30; color: #fff; font-size: 10px;
    min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; padding: 0 4px;
}

/* ====== 主容器 ====== */
.container {
    display: flex; flex-direction: column;
    height: 100%; height: -webkit-fill-available;
    max-width: 800px; margin: 0 auto;
    padding-top: 50px;
    background: #fff;
}
.chat-area { flex: 1; overflow-y: auto; padding: 12px 12px 20px; -webkit-overflow-scrolling: touch; }

/* ====== 消息气泡 ====== */
.message { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.message.mine { flex-direction: row-reverse; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    color: #fff; font-size: 16px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.message-bubble { max-width: 72%; }
.message.mine .message-bubble { display: flex; flex-direction: column; align-items: flex-end; }
.message-info { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; padding: 0 4px; }
.message.mine .message-info { flex-direction: row-reverse; }
.message-sender { font-size: 12px; color: #8e8e93; }
.message-time { font-size: 10px; color: #c7c7cc; }
.message-text {
    padding: 9px 12px; border-radius: 16px; font-size: 15px; line-height: 1.45;
    word-break: break-word;
}
.message.other .message-text { background: #e9e9eb; color: #111; border-top-left-radius: 4px; }
.message.mine .message-text { background: #007aff; color: #fff; border-top-right-radius: 4px; }
.message-text a { text-decoration: underline; }
.chat-img { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; cursor: pointer; }

/* ====== 输入区 ====== */
.input-area {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 8px 10px env(safe-area-inset-bottom, 8px);
    background: #fff; border-top: 1px solid #e5e5ea;
}
.icon-btn { border: none; background: #f0f0f5; width: 38px; height: 38px; border-radius: 50%; font-size: 18px; cursor: pointer; flex-shrink: 0; }
#messageInput {
    flex: 1; border: none; outline: none; resize: none;
    background: #f0f0f5; border-radius: 18px; padding: 10px 14px;
    font-size: 15px; max-height: 100px; font-family: inherit;
}
#sendButton {
    border: none; background: #007aff; color: #fff;
    padding: 10px 18px; border-radius: 18px; font-size: 15px; font-weight: 600;
    cursor: pointer; flex-shrink: 0;
}
#sendButton:disabled { opacity: .5; }

/* ====== 状态组件 ====== */
.connection-status {
    position: fixed; top: calc(55px + env(safe-area-inset-top)); right: 15px;
    width: 10px; height: 10px; border-radius: 50%; background: #34c759;
    z-index: 9999; display: none; box-shadow: 0 0 8px #34c759;
}
.connection-status.offline { background: #ff3b30; box-shadow: 0 0 8px #ff3b30; }
.new-message-alert {
    position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.75); color: #fff; padding: 8px 16px;
    border-radius: 20px; font-size: 13px; cursor: pointer; z-index: 900; display: none;
}
.toast {
    position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.8); color: #fff; padding: 10px 18px;
    border-radius: 10px; font-size: 14px; z-index: 9999; display: none;
}
.loading { display: flex; flex-direction: column; align-items: center; padding-top: 80px; color: #999; gap: 12px; }
.loading-spinner {
    width: 32px; height: 32px; border: 3px solid #e5e5ea;
    border-top-color: #667eea; border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { text-align: center; color: #999; padding-top: 80px; font-size: 15px; }
.empty-state button { margin-top: 12px; padding: 8px 18px; border: none; border-radius: 8px; background: #667eea; color: #fff; }

/* ====== 图片灯箱 ====== */
.modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 5000;
    display: none; align-items: center; justify-content: center; cursor: zoom-out;
}
.modal img { max-width: 95%; max-height: 95%; }

/* ====== 私聊抽屉 ====== */
#pmDrawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px;
    background: #f2f2f7; z-index: 2000;
    transform: translateX(100%); transition: transform .25s ease;
    display: flex; flex-direction: column;
}
#pmDrawer.open { transform: translateX(0); }
#pmListPane, #pmChatPane { flex: 1; display: flex; flex-direction: column; height: 100%; }
.pm-header {
    height: 50px; display: flex; align-items: center; gap: 10px;
    padding: 0 12px; background: #fff; border-bottom: 1px solid #e5e5ea;
    padding-top: env(safe-area-inset-top);
}
.pm-back, .pm-refresh { border: none; background: transparent; font-size: 20px; cursor: pointer; padding: 6px; }
.pm-title { font-weight: 700; font-size: 16px; flex: 1; }
.pm-spacer { width: 34px; }
.pm-list { flex: 1; overflow-y: auto; }
.pm-empty { text-align: center; color: #999; padding: 60px 20px; font-size: 14px; line-height: 2; }
.pm-item {
    display: flex; gap: 10px; padding: 12px 14px; background: #fff;
    border-bottom: 1px solid #f0f0f0; cursor: pointer; align-items: center;
}
.pm-item:active { background: #f0f0f5; }
.pm-item-main { flex: 1; min-width: 0; }
.pm-item-name { font-weight: 600; font-size: 15px; color: #222; }
.pm-item-last { font-size: 13px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mini-badge {
    background: #ff3b30; color: #fff; font-size: 10px;
    border-radius: 8px; padding: 1px 6px; margin-left: 6px;
}
.pm-chat-area { flex: 1; overflow-y: auto; padding: 14px; }
.pm-msg { display: flex; flex-direction: column; margin-bottom: 12px; align-items: flex-start; }
.pm-msg.mine { align-items: flex-end; }
.pm-bubble {
    max-width: 75%; padding: 9px 12px; border-radius: 16px; font-size: 15px; line-height: 1.45;
    word-break: break-word; background: #e9e9eb; color: #111;
}
.pm-msg.mine .pm-bubble { background: #007aff; color: #fff; }
.pm-time { font-size: 10px; color: #c7c7cc; margin-top: 3px; padding: 0 4px; }
.pm-input-row {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 8px 10px env(safe-area-inset-bottom, 8px);
    background: #fff; border-top: 1px solid #e5e5ea;
}
#pmInput {
    flex: 1; border: none; outline: none; resize: none;
    background: #f0f0f5; border-radius: 18px; padding: 10px 14px;
    font-size: 15px; max-height: 100px; font-family: inherit;
}
#btnPmSend {
    border: none; background: #007aff; color: #fff;
    padding: 10px 16px; border-radius: 18px; font-weight: 600; cursor: pointer;
}

/* ====== Action sheet / 模态 ====== */
.sheet-mask, .modal-mask {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 3000;
    display: none; align-items: flex-end; justify-content: center;
}
.sheet { width: 100%; max-width: 500px; padding: 8px; padding-bottom: env(safe-area-inset-bottom); }
.sheet button {
    display: block; width: 100%; border: none; background: #fff;
    padding: 15px; font-size: 16px; border-radius: 12px; margin-bottom: 8px; cursor: pointer;
}
.sheet button.cancel { color: #ff3b30; font-weight: 600; }
.modal-mask { align-items: center; }
.modal-box {
    background: #fff; border-radius: 16px; padding: 22px; width: 88%; max-width: 360px;
}
.modal-box h3 { margin-bottom: 14px; font-size: 17px; color: #222; }
.modal-box input {
    width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 10px;
    font-size: 15px; outline: none; margin-bottom: 14px;
}
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; }
.modal-btns button {
    border: none; padding: 9px 18px; border-radius: 10px;
    background: #e9e9eb; font-size: 15px; cursor: pointer;
}
.modal-btns button.primary { background: #007aff; color: #fff; }
.search-box { max-height: 70vh; display: flex; flex-direction: column; }
.search-results { flex: 1; overflow-y: auto; margin-bottom: 10px; }
.search-item { padding: 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.search-item:active { background: #f5f5f5; }