:root {

  --primary: #1a73e8;

  --primary-dark: #1557b0;

  --primary-light: #e8f0fe;

  --success: #1e8e3e;

  --warning: #f9ab00;

  --danger: #ea4335;

  --bg: #f0f2f5;

  --card: #fff;

  --text: #202124;

  --text-secondary: #5f6368;

  --border: #dadce0;

  --shadow: 0 1px 3px rgba(0,0,0,0.1);

  --radius: 10px;

}

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

body { font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

a { color: var(--primary); text-decoration: none; }

a:hover { text-decoration: underline; }



/* Header */

.app-header { background: linear-gradient(135deg, #1a73e8, #0d47a1); color: white; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }

.app-header h1 { font-size: 20px; font-weight: 600; }

.app-header .badge { background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 14px; font-size: 12px; }

.app-header .status { font-size: 13px; opacity: 0.9; }



/* Tabs */

.tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--border); padding: 0 16px; overflow-x: auto; }

.tab { padding: 14px 22px; cursor: pointer; font-size: 14px; color: var(--text-secondary); border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; }

.tab:hover { color: var(--primary); background: var(--primary-light); }

.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }



/* Container */

.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

.panel { display: none; }

.panel.active { display: block; }



/* Chat Layout */

.chat-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 800px) { .chat-layout { grid-template-columns: 1fr; } }

.input-box { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }

.input-box h3 { font-size: 14px; margin-bottom: 8px; color: var(--text-secondary); }

.input-box textarea { width: 100%; min-height: 120px; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 14px; resize: vertical; font-family: inherit; transition: border-color 0.2s; }

.input-box textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }



/* Quick chips */

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }

.chip { padding: 5px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; cursor: pointer; transition: all 0.15s; user-select: none; }

.chip:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }



/* Buttons */

.btn { padding: 8px 22px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; }

.btn-primary { background: var(--primary); color: white; }

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

.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm { padding: 5px 14px; font-size: 12px; }

.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }

.btn-outline:hover { background: var(--bg); }

.btn-success { background: var(--success); color: white; }

.btn-danger { background: var(--danger); color: white; }

.btn-warning { background: var(--warning); color: white; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }



/* Result cards */

.results { display: flex; flex-direction: column; gap: 12px; }

.card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); border-left: 4px solid var(--primary); }

.card.analysis { border-left-color: var(--warning); }

.card.response { border-left-color: var(--success); }

.card.next { border-left-color: var(--primary); }

.card.reference { border-left-color: var(--text-secondary); }

.card h4 { font-size: 13px; margin-bottom: 8px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }

.card .body { font-size: 14px; line-height: 1.7; }

.card .body ul { padding-left: 18px; margin: 4px 0; }

.card .body li { margin-bottom: 4px; }

.card .tag { display: inline-block; background: var(--primary-light); color: var(--primary); padding: 2px 10px; border-radius: 12px; font-size: 11px; margin-right: 4px; margin-bottom: 3px; }

.card .meta { font-size: 11px; color: var(--text-secondary); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }



/* Loading */

.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; margin-right: 8px; vertical-align: middle; }

@keyframes spin { to { transform: rotate(360deg); } }

.loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text-secondary); font-size: 14px; }



/* Empty state */

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

.empty-state .icon { font-size: 56px; margin-bottom: 12px; opacity: 0.3; }



/* Prep form */

.prep-form { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }

.prep-form label { display: block; font-size: 13px; margin-bottom: 4px; color: var(--text-secondary); font-weight: 500; }

.prep-form input, .prep-form select, .prep-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; margin-bottom: 12px; font-family: inherit; }

.prep-form input:focus, .prep-form select:focus, .prep-form textarea:focus { outline: none; border-color: var(--primary); }



/* Review */

.review-box textarea { width: 100%; min-height: 200px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; }



/* Search */

.search-bar { display: flex; gap: 8px; margin-bottom: 16px; }

.search-bar input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }

.search-bar input:focus { outline: none; border-color: var(--primary); }

.search-item { padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }

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

.search-item h4 { font-size: 14px; }

.search-item p { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.search-item .file { font-size: 11px; color: var(--primary); margin-top: 2px; }



/* Feedback buttons */

.feedback { display: flex; gap: 8px; margin-top: 8px; }

.feedback-btn { padding: 3px 12px; border: 1px solid var(--border); border-radius: 14px; font-size: 11px; cursor: pointer; background: var(--card); transition: all 0.15s; }

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

.feedback-btn.active-helpful { background: var(--success); color: white; border-color: var(--success); }

.feedback-btn.active-useless { background: var(--danger); color: white; border-color: var(--danger); }



/* Modal */

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; }

.modal-overlay.show { display: flex; align-items: center; justify-content: center; }

.modal { background: var(--card); border-radius: 12px; padding: 24px; max-width: 800px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }

.modal h2 { font-size: 18px; margin-bottom: 16px; }

.modal .close { float: right; cursor: pointer; font-size: 24px; color: var(--text-secondary); }



/* History Button */

.history-btn { position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: white; border: none; font-size: 22px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.25); z-index: 100; transition: transform 0.2s; }

.history-btn:hover { transform: scale(1.05); }



/* Thinking toggle */

.thinking-box { background: #f8f9fa; border-radius: 6px; padding: 12px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); max-height: 200px; overflow-y: auto; display: none; }

.thinking-box.show { display: block; }

.toggle-thinking { font-size: 11px; color: var(--primary); cursor: pointer; }



/* Footer */

.footer { text-align: center; padding: 20px; color: var(--text-secondary); font-size: 12px; border-top: 1px solid var(--border); margin-top: 40px; }



/* ==========================================

   Chat Interface - 销售助手主界面

   从 index.html 提取

   ========================================== */



body.chat-body { background:#f5f6fa; color:#1a1a2e; height:100vh; overflow:hidden; }

.app { display:flex; height:100vh; }

.sidebar { width:220px; background:#1a1a2e; color:#fff; display:flex; flex-direction:column; flex-shrink:0; }

.sidebar .hd { padding:18px 16px 12px; border-bottom:1px solid rgba(255,255,255,.06); }

.sidebar .hd h1 { font-size:15px; font-weight:600; }

.sidebar .hd .v { font-size:10px; opacity:.4; margin-top:1px; }

.sidebar .section { padding:10px 0; }

.sidebar .section-title { padding:6px 16px; font-size:10px; text-transform:uppercase; opacity:.35; letter-spacing:1px; }

.sidebar .item { padding:9px 16px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:8px; opacity:.7; transition:all .12s; border-left:2px solid transparent; }

.sidebar .item:hover { opacity:1; background:rgba(255,255,255,.04); }

.sidebar .item.active { opacity:1; border-left-color:#4361ee; background:rgba(67,97,238,.12); }

.sidebar .ft { margin-top:auto; padding:12px 16px; border-top:1px solid rgba(255,255,255,.06); font-size:12px; opacity:.5; display:flex; justify-content:space-between; }

.sidebar .ft span { cursor:pointer; }

.sidebar .ft span:hover { opacity:1; }



.main { flex:1; display:flex; flex-direction:column; min-width:0; }

.topbar { background:#fff; padding:0 20px; height:52px; display:flex; align-items:center; gap:12px; border-bottom:1px solid #e8eaed; flex-shrink:0; }

.topbar .bread { font-size:12px; color:#666; display:flex; align-items:center; gap:6px; }

.topbar .bread span { color:#1a73e8; font-weight:500; }

.topbar .cust-info { display:flex; gap:8px; margin-left:auto; }

.topbar .cust-info input { padding:5px 10px; border:1px solid #e0e0e0; border-radius:6px; font-size:12px; width:120px; outline:none; background:#f8f9fa; }

.topbar .cust-info input:focus { border-color:#4361ee; background:#fff; }

.topbar .badge { font-size:11px; padding:3px 10px; border-radius:10px; background:#e8f0fe; color:#1a73e8; }



.chat { flex:1; overflow-y:auto; padding:16px 24px; scroll-behavior:smooth; }

.welcome { text-align:center; padding:50px 20px 30px; }

.welcome .icon { font-size:56px; margin-bottom:10px; }

.welcome h2 { font-size:18px; font-weight:600; margin-bottom:6px; }

.welcome p { font-size:13px; color:#666; line-height:1.7; max-width:420px; margin:0 auto; }

.welcome .chips { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:16px; }

.welcome .chip { padding:6px 16px; background:#f0f2f5; border:1px solid #e0e0e0; border-radius:20px; font-size:12px; cursor:pointer; }

.welcome .chip:hover { background:#e8f0fe; border-color:#4361ee; color:#4361ee; }



.msg { display:flex; margin-bottom:14px; animation:fadeIn .3s ease; }

.msg.user { justify-content:flex-end; }

@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.msg .b { max-width:75%; padding:12px 16px; border-radius:14px; font-size:14px; line-height:1.7; word-break:break-word; }

.msg.user .b { background:#4361ee; color:#fff; border-bottom-right-radius:4px; }

.msg.ai .b { background:#fff; border:1px solid #e8eaed; border-bottom-left-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.04); }

.msg .lbl { font-size:10px; color:#999; margin-bottom:4px; padding:0 4px; }

.msg.user .lbl { text-align:right; }

.msg.ai .sug { font-size:15px; line-height:1.7; margin-bottom:8px; }

.msg.ai .intent { font-size:11px; color:#666; background:#f5f6fa; padding:6px 10px; border-radius:6px; margin-bottom:8px; }

.msg.ai .intent strong { color:#4361ee; }

.msg.ai .quick-qs { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }

.msg.ai .quick-qs .q { padding:4px 12px; background:#fef7e0; border:1px solid #f9eec1; border-radius:14px; font-size:11px; cursor:pointer; color:#b8860b; }

.msg.ai .quick-qs .q:hover { background:#f9eec1; }

.msg.ai .dont-say { font-size:11px; color:#d93025; margin-top:6px; padding:4px 8px; background:#fce8e6; border-radius:6px; display:inline-block; }



/* ====== 快速反馈按钮 (F5) ====== */
.msg.ai .feedback-row { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.msg.ai .fb-btn { font-size:18px; cursor:pointer; opacity:0.5; transition:all 0.15s; border:none; background:none; padding:2px 4px; border-radius:4px; }
.msg.ai .fb-btn:hover { opacity:1; background:#f0f2f5; }
.msg.ai .fb-btn.active { opacity:1; }
.msg.ai .fb-btn.like.active { color:#1e8e3e; }
.msg.ai .fb-btn.dislike.active { color:#d93025; }

/* ====== 纠正面板 (F5) ====== */
.msg.ai .adj-area { margin-top:6px; }
.msg.ai .adj-btn { font-size:12px; color:#4361ee; cursor:pointer; opacity:0.7; border:1px solid rgba(67,97,238,0.2); padding:2px 10px; border-radius:12px; transition:all 0.15s; display:inline-block; }
.msg.ai .adj-btn:hover { opacity:1; background:#e8f0fe; }
.msg.ai .adj-btn.correcting { background:#4361ee; color:#fff; opacity:1; }

.msg.ai .adj-inp { display:none; margin-top:8px; }
.msg.ai .adj-inp.show { display:flex; flex-direction:column; gap:6px; background:#f8f9fa; padding:10px; border-radius:8px; border:1px solid #e0e0e0; }
.msg.ai .adj-inp textarea { width:100%; padding:8px 10px; border:1px solid #e0e0e0; border-radius:6px; font-size:12px; outline:none; resize:vertical; min-height:50px; font-family:inherit; box-sizing:border-box; }
.msg.ai .adj-inp textarea:focus { border-color:#4361ee; }
.msg.ai .adj-inp .adj-actions { display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.msg.ai .adj-inp .adj-hint { font-size:11px; color:#999; }
.msg.ai .adj-inp button { padding:6px 14px; border:none; border-radius:6px; font-size:12px; cursor:pointer; }
.msg.ai .adj-inp button.adj-submit { background:#4361ee; color:#fff; }
.msg.ai .adj-inp button.adj-submit:hover { background:#1557b0; }
.msg.ai .adj-inp button.adj-cancel { background:#e0e0e0; color:#333; }
.msg.ai .adj-inp button.adj-cancel:hover { background:#ccc; }

.msg.ai .adj-result { display:none; margin-top:8px; padding:10px 12px; background:#e8f5e9; border-radius:8px; border-left:3px solid #1e8e3e; font-size:13px; }
.msg.ai .adj-result.show { display:block; }
.msg.ai .adj-result .l { font-size:10px; color:#1e8e3e; margin-bottom:4px; font-weight:600; }

.msg.ai .learn-badge { font-size:11px; color:#1e8e3e; cursor:pointer; margin-top:6px; display:inline-block; padding:2px 8px; background:#e8f5e9; border-radius:10px; }



.typing-indicator { display:flex; gap:4px; padding:4px 0; }

.typing-indicator span { width:7px; height:7px; background:#999; border-radius:50%; animation:typing 1.4s infinite; }

.typing-indicator span:nth-child(2) { animation-delay:.2s; }

.typing-indicator span:nth-child(3) { animation-delay:.4s; }

@keyframes typing { 0%,60%,100%{opacity:.3} 30%{opacity:1} }



.input-bar { background:#fff; border-top:1px solid #e8eaed; padding:12px 20px; display:flex; gap:10px; align-items:flex-end; flex-shrink:0; }

.input-bar textarea { flex:1; border:none; padding:8px 0; font-size:14px; resize:none; outline:none; font-family:inherit; max-height:100px; line-height:1.5; background:transparent; }

.input-bar textarea::placeholder { color:#bbb; }

.input-bar button { width:38px; height:38px; border:none; border-radius:50%; background:#4361ee; color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.input-bar button:hover { background:#3651d4; }

.input-bar button:disabled { opacity:.4; cursor:not-allowed; }



.notif-bar { display:none; padding:8px 20px; font-size:12px; text-align:center; flex-shrink:0; }

.notif-bar.info { display:block; background:#fff3cd; color:#856404; }

.notif-bar.success { display:block; background:#d4edda; color:#155724; }

.notif-bar.error { display:block; background:#fce8e6; color:#d93025; }



.learn-panel { display:none; position:fixed; bottom:80px; right:20px; width:320px; max-height:60vh; background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.15); z-index:100; overflow:hidden; }

.learn-panel.show { display:block; }

.learn-panel .hd { padding:12px 16px; background:#4361ee; color:#fff; font-size:13px; font-weight:500; display:flex; justify-content:space-between; }

.learn-panel .hd span { cursor:pointer; opacity:.7; }

.learn-panel .body { padding:12px 16px; overflow-y:auto; max-height:calc(60vh - 44px); }

.learn-panel .item { padding:6px 0; font-size:12px; border-bottom:1px solid #f0f0f0; color:#555; }

.learn-panel .item:last-child { border:none; }



.sub-view { display:none; flex:1; padding:24px; overflow-y:auto; background:#f5f6fa; }

.sub-view .card { background:#fff; border-radius:12px; padding:24px; box-shadow:0 1px 4px rgba(0,0,0,.06); max-width:600px; margin:0 auto; }

.sub-view .card h3 { font-size:15px; margin-bottom:16px; }

.sub-view .card input, .sub-view .card textarea { width:100%; padding:9px 12px; border:1px solid #e0e0e0; border-radius:8px; font-size:13px; margin-bottom:10px; outline:none; font-family:inherit; }

.sub-view .card input:focus, .sub-view .card textarea:focus { border-color:#4361ee; }

.sub-view .card button { padding:8px 20px; border:none; border-radius:6px; cursor:pointer; font-size:13px; }

.sub-view .card .primary { background:#4361ee; color:#fff; }

.sub-view .card .primary:hover { background:#3651d4; }

.sub-view .card .back { background:transparent; color:#666; cursor:pointer; font-size:12px; border:none; padding:4px 0; margin-top:8px; }



::-webkit-scrollbar { width:6px; }

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

::-webkit-scrollbar-thumb { background:#ddd; border-radius:3px; }



@media(max-width:700px) {

  .sidebar { width:48px; }

  .sidebar .hd h1, .sidebar .section-title, .sidebar .item span:last-child, .sidebar .ft { display:none; }

  .sidebar .item { padding:10px; justify-content:center; }

}



/* ==========================================

   Admin Layout - 管理后台

   从 admin.html 提取，使用 CSS 变量

   ========================================== */



.admin-layout { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }

@media (max-width:700px) { .admin-layout { grid-template-columns:1fr; } }



.admin-layout > .sidebar { background:#1a1a2e; color:white; padding:20px 0; }

.admin-layout > .sidebar h2 { padding:0 20px 20px; font-size:16px; border-bottom:1px solid rgba(255,255,255,0.1); }

.admin-layout > .sidebar .nav-item { padding:12px 20px; cursor:pointer; font-size:14px; color:rgba(255,255,255,0.7); transition:all 0.2s; border-left:3px solid transparent; }

.admin-layout > .sidebar .nav-item:hover { background:rgba(255,255,255,0.05); color:white; }

.admin-layout > .sidebar .nav-item.active { background:rgba(255,255,255,0.1); color:white; border-left-color:#1a73e8; }



.admin-layout > .main { padding:24px; overflow-y:auto; }

.admin-layout .page { display:none; }

.admin-layout .page.active { display:block; }



/* Notification toast for admin */

.admin-toast { position:fixed; top:20px; right:20px; padding:12px 20px; border-radius:8px; font-size:13px; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.15); display:none; max-width:400px; }

.admin-toast.success { display:block; background:#d4edda; color:#155724; border-left:4px solid #1e8e3e; }

.admin-toast.error { display:block; background:#fce8e6; color:#d93025; border-left:4px solid #ea4335; }

.admin-toast.info { display:block; background:#fff3cd; color:#856404; border-left:4px solid #f9ab00; }



/* Admin-specific spacing (moved from admin.html inline) */

.admin-section { margin-bottom:24px; }

.evo-section { margin-bottom:20px; }





/* === Login page styles === */

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

body { font-family:-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif; background:linear-gradient(135deg,#1a73e8,#0d47a1); min-height:100vh; display:flex; align-items:center; justify-content:center; }

.login-card { background:#fff; border-radius:16px; padding:40px; width:380px; max-width:90vw; box-shadow:0 20px 60px rgba(0,0,0,0.3); }

.login-card h1 { font-size:22px; margin-bottom:4px; color:#202124; }

.login-card .sub { font-size:13px; color:#5f6368; margin-bottom:24px; }

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

.form-group label { display:block; font-size:13px; color:#5f6368; margin-bottom:4px; font-weight:500; }

.form-group input { width:100%; padding:12px 14px; border:1px solid #dadce0; border-radius:8px; font-size:15px; transition:border-color 0.2s; }

.form-group input:focus { outline:none; border-color:#1a73e8; box-shadow:0 0 0 3px #e8f0fe; }

.btn-login { width:100%; padding:12px; background:#1a73e8; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:500; cursor:pointer; transition:background 0.2s; margin-top:8px; }

.btn-login:hover { background:#1557b0; }

.btn-login:disabled { opacity:0.6; cursor:not-allowed; }

.error-msg { color:#d93025; font-size:13px; margin-top:8px; display:none; }

.loading-msg { color:#5f6368; font-size:13px; margin-top:8px; display:none; text-align:center; }

.loading-msg .spinner { display:inline-block; width:14px;height:14px; border:2px solid #dadce0; border-top-color:#1a73e8; border-radius:50%; animation:spin 0.6s linear infinite; margin-right:6px; vertical-align:middle; }

@keyframes spin { to { transform:rotate(360deg); } }

.brand { text-align:center; margin-bottom:20px; }

.brand .logo { font-size:48px; }

.brand .name { font-size:14px; color:#5f6368; margin-top:4px; }

</style>