:root {
    --primary-gradient: linear-gradient(45deg, #3A86FF, #005AE0);
    --primary-hover-gradient: linear-gradient(45deg, #4A90FF, #006AFF);
    --bg-color: #f4f6f9;
    --card-bg-color: #ffffff;
    --text-color: #34495e;
    --text-light-color: #7f8c8d;
    --border-color: #e9edf2;
    --called-color: #EF476F;
    --logout-color: #e74c3c;
    --logout-hover-color: #c0392b;
    --primary-color: #3A86FF; /* 单色，用于一些不需要渐变的地方 */
    --follow-up-color: #FFB830; /* 待跟进标签颜色 */
}

/* --- Global & Body --- */
body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: var(--bg-color);
    margin: 0;
    color: var(--text-color);
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    overflow-y: auto;
    user-select: none;
    /* 性能优化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

.container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 80px 20px 20px;
    text-align: center;
    box-sizing: border-box;
    /* 使用 contain 优化重绘性能 */
    contain: layout style;
}


.activity-ticker p.highlight-entry {
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
}

/* --- 【CSS 优化点】 Main Header --- */
.main-header {
    position: fixed;
    top: 30px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px; /* 调整内边距以适应不同屏幕 */
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    z-index: 99;
    box-sizing: border-box;
    gap: 10px; /* 调整元素间距 */
}
.user-info {
    font-weight: 500;
    background-color: #e9edf2;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.9em;
    color: var(--text-light-color);
    white-space: nowrap; /* 确保用户名不换行 */
    overflow: hidden; /* 防止文本溢出 */
    text-overflow: ellipsis; /* 溢出时显示省略号 */
    
    /* 核心改动：允许用户名区域收缩，而不是按钮组 */
    flex-shrink: 1;
    min-width: 80px; /* 保证收缩时至少保留一定宽度 */
}
#current-user {
    font-weight: 700;
    color: var(--primary-color);
}
.header-buttons {
    display: flex;
    align-items: center;
    gap: 10px; /* 调整图标间距 */
    flex-shrink: 0; /* 核心改动：禁止按钮组收缩，保证图标完整显示 */
}
.header-buttons button {
    background: none;
    border: none;
    font-size: 1.4em; /* 统一并调整图标大小 */
    cursor: pointer;
    padding: 4px; /* 调整图标内边距 */
    color: var(--text-color);
    transition: color 0.2s;
    margin-left: 0;
    line-height: 1; /* 帮助对齐 */
}
.header-buttons button:hover {
    color: var(--primary-color);
}
/* 移除了针对 #intended-customers-btn 的特定大小规则，以保持所有图标的视觉一致性 */


/* --- Main Card & Content --- */
.card {
    background-color: var(--card-bg-color);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 25px 30px;
    margin-bottom: 25px;
    text-align: left;
}

.company-header {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.company-title {
    font-size: 1.6em; 
    font-weight: 700;
    margin: 0;
    line-height: 1.2; 
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}
.credit-code {
    font-size: 0.85em;
    color: var(--text-light-color);
    margin-top: 8px;
    font-family: monospace;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}
.info-block {
    background-color: var(--bg-color);
    padding: 12px 15px;
    border-radius: 12px;
    text-align: left;
}
.info-label {
    display: block;
    font-size: 0.8em;
    color: var(--text-light-color);
    margin-bottom: 6px;
}
.info-value {
    font-size: 0.95em;
    font-weight: 500;
    line-height: 1.4;
}
.risk-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 700;
    color: white;
    vertical-align: middle;
}
.risk-badge.risk-low { background-color: #2ECC71; }
.risk-badge.risk-medium { background-color: #F39C12; }
.risk-badge.risk-high { background-color: #E74C3C; }


.phone-list-container {
    margin-top: 20px;
}
.phone-list { 
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0;
    margin: -12px -6px;
}

.phone-number {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 170px;
    padding: 8px 15px;
    margin: 12px 6px;
    background-image: var(--primary-gradient);
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    font-size: 1em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    /* 性能优化 */
    will-change: transform;
    backface-visibility: hidden;
}

.phone-number:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(58, 134, 255, 0.4);
}

/* 减少重绘的优化 */
.phone-number:active {
    transform: translateY(0);
}

/* --- Buttons --- */
#remark-form button, .modal-content form button {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background-image: var(--primary-gradient);
    color: white;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
#remark-form button:hover, .modal-content form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(58, 134, 255, 0.3);
    background-image: var(--primary-hover-gradient);
}
.secondary-btn {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    border: 1px solid var(--border-color);
    background-color: #f8f9fa;
    border-radius: 8px;
    color: var(--text-color);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s;
}
.secondary-btn:hover {
    background-color: #f1f3f5;
    border-color: #ced4da;
}
.primary-btn-small {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    background-image: var(--primary-gradient);
    color: white;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    transition: background-image 0.2s, transform 0.2s;
}
.primary-btn-small:hover {
    background-image: var(--primary-hover-gradient);
    transform: translateY(-2px);
}

/* --- Remarks --- */
.remarks-section { padding-top: 25px; border-top: 1px solid var(--border-color); }
.remarks-section h3 { margin: 0 0 15px; font-size: 1.2em; }
#remarks-list { list-style:none; padding:0; margin:0 0 20px; max-height:200px; overflow-y:auto; padding-right:5px; }
#remarks-list li {
    background-color: #f8f9fa;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 0.9em;
    line-height: 1.5;
    border-left: 3px solid var(--border-color);
}
li.no-remarks {
    border-left: 3px solid #f0ad4e;
    color: var(--text-light-color);
}
.remark-author {
    font-weight: 700;
    color: var(--primary-color);
}
#remarks-list li .meta { font-size: 0.8em; color: var(--text-light-color); display: block; margin-top: 5px; }
#remark-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95em;
    min-height: 80px;
    resize: vertical;
    transition: border-color 0.2s;
    margin-bottom: 10px;
}
#remark-form textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.2); }

/* --- Modal (Generic) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
.modal-content {
    background: white;
    padding: 25px;
    border-radius: 15px;
    width: 100%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.modal-content h2 { margin:0 0 20px; color: var(--text-color); }
.modal-description {
    font-size: 0.9em;
    color: var(--text-light-color);
    margin-top: -15px;
    margin-bottom: 15px;
    text-align: center;
}
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8em;
    color: #aaa;
    cursor: pointer;
}

/* --- Specific Modals --- */
.password-change-section input, #search-phone-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 1em;
}
.password-change-section input:focus, #search-phone-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.2);
}
p.search-description {
    font-size: 0.9em;
    color: var(--text-light-color);
    margin-top: -10px;
    margin-bottom: 15px;
}
.error-message, .no-results-message {
    color: var(--text-light-color);
    font-size: 0.9em;
    text-align: center;
    min-height: 1.5em;
    padding: 20px;
}
.logout-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background-color: var(--logout-color);
    color: white;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.2s;
    margin-top: 10px;
}
.logout-btn:hover { background-color: var(--logout-hover-color); }

#leaderboard-content { overflow-y: auto; }
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.leaderboard-table th, .leaderboard-table td {
    padding: 12px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}
.leaderboard-table th { background-color: #f8f9fa; font-weight: 500; }
.leaderboard-table tr:last-child td { border-bottom: none; }
.leaderboard-table tr td:nth-child(1) { font-size: 1.2em; }

/* --- Loader & Toast --- */
.loader { 
    border: 5px solid #f3f3f3; 
    border-top: 5px solid var(--primary-color); 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    animation: spin 1s linear infinite; 
    margin: 50px auto;
    /* 性能优化 */
    will-change: transform;
}

.loader-small { 
    border: 3px solid #f3f3f3; 
    border-top: 3px solid var(--primary-color); 
    border-radius: 50%; 
    width: 30px; 
    height: 30px; 
    animation: spin 1s linear infinite; 
    margin: 20px auto;
    will-change: transform;
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

.toast { 
    position: fixed; 
    bottom: -100px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: rgba(0,0,0,0.8); 
    color: white; 
    padding: 12px 22px; 
    border-radius: 30px; 
    font-size: 0.9em; 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    z-index: 9999; 
    text-align: center;
    /* 性能优化 */
    will-change: transform, opacity;
    contain: layout style;
}

.toast.show { 
    opacity: 1; 
    visibility: visible; 
    bottom: 40px; 
}

/* --- Search & Intended Customers Result Lists --- */
.results-list { flex-grow: 1; overflow-y: auto; min-height: 0; }
#search-results-container { margin-top: 20px; }
.search-results-title { font-size: 1em; font-weight: 500; margin: 0 0 10px 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.search-result-item, .customer-item {
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--text-color); 
    text-decoration: none; 
}
.search-result-item:hover, .customer-item:hover { background-color: #f8f9fa; border-color: var(--primary-color); }
.search-result-item strong { flex-grow: 1; margin-right: 10px; overflow: hidden; text-overflow: ellipsis;}
.search-result-item small { font-size: 0.9em; color: var(--text-light-color); flex-shrink: 0; }
.customer-item.long-press-active {
    background-color: #fee2e2 !important;
    border-color: #ef4444 !important;
    transition: background-color 0.1s, border-color 0.1s;
}


/* --- Phone Number Tags --- */
.phone-location-tag, .called-badge, .caiwu-tag, .phone-status-tag { position: absolute; font-size: 9px; font-weight: bold; padding: 2px 7px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.3); }
.phone-location-tag { top: -6px; left: 10px; background-color: #000; color: white; }
.called-badge { top: -6px; right: 10px; background-color: var(--called-color); color: white; }
.caiwu-tag { bottom: -6px; left: 10px; background-color: #8A2BE2; color: white; }
.phone-status-tag { bottom: -6px; right: 10px; background-color: var(--follow-up-color); color: white; display: none; }
.phone-status-tag[data-phone-tag*="已加微"] { background-color: #22c55e;}
.phone-status-tag.visible { display: inline-block; }


/* --- Context Menu --- */
.status-context-menu { position: absolute; z-index: 2000; background-color: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); padding: 5px 0; min-width: 120px; border: 1px solid #eee; }
.status-menu-item { padding: 8px 15px; cursor: pointer; font-size: 0.9em; transition: background-color 0.2s; color: var(--text-color); }
.status-menu-item:hover { background-color: var(--bg-color); color: var(--primary-color); }

/* --- Login Page --- */
.login-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--bg-color); }
.login-container { width: 100%; max-width: 400px; padding: 20px; box-sizing: border-box; }
.login-card { background-color: var(--card-bg-color); padding: 40px 30px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); text-align: center; }
.login-card h1 { font-size: 2em; margin-bottom: 10px; }
.login-card .login-subtitle { font-size: 1em; color: var(--text-light-color); margin-bottom: 35px; }
.input-group { position: relative; margin-bottom: 25px; }
.input-group input { width: 100%; padding: 14px 10px; font-size: 1em; border: 1px solid var(--border-color); border-radius: 10px; background-color: transparent; box-sizing: border-box; transition: border-color 0.3s; }
.input-group input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.2); }
.input-group label { position: absolute; top: 15px; left: 12px; color: var(--text-light-color); pointer-events: none; transition: all 0.3s ease; background-color: var(--card-bg-color); padding: 0 5px; }
.input-group input:focus + label, .input-group input:valid + label { top: -10px; left: 8px; font-size: 0.85em; color: var(--primary-color); }
#login-btn { width: 100%; padding: 16px; border: none; border-radius: 12px; background-image: var(--primary-gradient); color: white; font-size: 1.1em; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
#login-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(58, 134, 255, 0.3); background-image: var(--primary-hover-gradient); }
#login-btn:disabled { background-image: none; background-color: #ccc; cursor: not-allowed; transform: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }

/* --- Chat --- */
#chat-btn { position: relative; font-size: 1.4em; }
.notification-badge { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background-color: var(--called-color); border-radius: 50%; border: 1px solid white; }
.modal-content.chat-content { max-width: 420px;  height: 80vh; max-height: 600px; padding: 20px; box-sizing: border-box; }
.chat-messages { flex-grow: 1; overflow-y: auto; margin-bottom: 15px; padding: 10px; background-color: var(--bg-color); border-radius: 10px; display: flex; flex-direction: column; gap: 12px; }
.chat-message { max-width: 80%; padding: 8px 12px; border-radius: 15px; line-height: 1.4; word-wrap: break-word; }
.chat-message .meta { display: block; font-size: 0.75em; color: var(--text-light-color); margin-bottom: 4px; opacity: 0.8; }
.chat-message.sent { background-image: var(--primary-gradient); color: white; align-self: flex-end; border-bottom-right-radius: 3px; }
.chat-message.sent .meta { color: rgba(255, 255, 255, 0.7); }
.chat-message.received { background-color: #e9e9eb; color: var(--text-color); align-self: flex-start; border-bottom-left-radius: 3px; }
.emoji-panel { padding: 5px 0; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.emoji-item { cursor: pointer; font-size: 1.5em; transition: transform 0.2s; }
.emoji-item:hover { transform: scale(1.2); }
.chat-form { display: flex; gap: 10px; }
#chat-input { flex-grow: 1; padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 1em; }
#chat-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.2); }
.chat-form button { padding: 12px 18px; border: none; border-radius: 8px; background-image: var(--primary-gradient); color: white; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.chat-form button:hover { background-image: var(--primary-hover-gradient); }

/* --- Footer --- */
.app-footer { text-align: center; padding: 15px 20px; font-size: 0.8em; color: var(--text-light-color); width: 100%; box-sizing: border-box; }

/* --- Nav & Filter --- */
.next-action-container { display: flex; align-items: center; gap: 10px; margin-top: 25px; }
.nav-btn { flex: 1; padding: 16px 10px; border: none; border-radius: 12px; background-image: var(--primary-gradient); color: white; font-size: 1.1em; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); white-space: nowrap; }
.nav-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(58, 134, 255, 0.3); background-image: var(--primary-hover-gradient); }
.nav-btn:disabled { background-image: none; background-color: #ccc; cursor: not-allowed; opacity: 0.7; }
.custom-checkbox-label { display: flex; align-items: center; cursor: pointer; padding: 0 5px; }
.custom-checkbox-label input[type="checkbox"] { position: absolute; opacity: 0; }
.custom-checkbox-label .checkmark { position: relative; height: 20px; width: 20px; background-color: #ffffff; border: 1px solid #c5c5c5; border-radius: 5px; transition: background-color 0.2s, border-color 0.2s; }
.custom-checkbox-label:hover .checkmark { border-color: var(--primary-color); }
.custom-checkbox-label input[type="checkbox"]:checked ~ .checkmark { background-color: var(--primary-color); border-color: var(--primary-color); }
.custom-checkbox-label .checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox-label input[type="checkbox"]:checked ~ .checkmark:after { display: block; }
.custom-checkbox-label .checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* --- Announcement Modal --- */
#announcement-content { overflow-y: auto; text-align: left; }
.announcement-title { font-size: 1.5em; text-align: center; color: var(--primary-color); margin-bottom: 25px; }
#announcement-content h3 { font-size: 1.1em; margin-top: 20px; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--border-color); }
#announcement-content ul { list-style: none; padding-left: 0; }
#announcement-content li { margin-bottom: 15px; }
#announcement-content li strong { display: block; font-size: 1em; margin-bottom: 5px; color: var(--text-color); }
#announcement-content li p { font-size: 0.9em; line-height: 1.6; color: var(--text-light-color); margin: 0; }