/* ========== 奶白色主题 · 现代简约 ========== */
.dashboard { background:#faf6f0; color:#2c2520; padding:28px; border-radius:16px; min-height:100vh; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; box-sizing:border-box; }
* { box-sizing:border-box; }
body { margin:0; background:#faf6f0; }

/* ========== Header ========== */
.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.dashboard-title { font-size:1.6rem; font-weight:700; color:#2c2520; margin:0; letter-spacing:-0.02em; }
.dashboard-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.range-select { background:#fff; color:#2c2520; border:1px solid #e9e3db; border-radius:8px; padding:8px 14px; font-size:0.85rem; cursor:pointer; outline:none; transition:all .2s ease; font-family:inherit; }
.range-select:hover { border-color:#c4b8a8; }
.range-select:focus { border-color:#5b7fd1; box-shadow:0 0 0 3px rgba(91,127,209,.12); }

/* Custom Date Inputs */
.custom-date-group { display:flex; gap:8px; align-items:center; animation:fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-4px);} to { opacity:1; transform:translateY(0);} }
.date-input { background:#fff; color:#2c2520; border:1px solid #e9e3db; border-radius:8px; padding:8px 12px; font-size:0.85rem; font-family:inherit; outline:none; transition:all .2s ease; cursor:pointer; }
.date-input:hover { border-color:#c4b8a8; }
.date-input:focus { border-color:#5b7fd1; box-shadow:0 0 0 3px rgba(91,127,209,.12); }
.date-separator { font-size:0.85rem; color:#8a7d72; font-weight:500; }
.custom-apply-btn { background:#3da8a0; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:0.85rem; font-weight:500; cursor:pointer; transition:all .2s ease; white-space:nowrap; font-family:inherit; }
.custom-apply-btn:hover { background:#359a93; transform:translateY(-1px); box-shadow:0 2px 8px rgba(61,168,160,.25); }
.custom-apply-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.refresh-btn { background:#5b7fd1; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:0.85rem; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .2s ease; white-space:nowrap; font-family:inherit; }
.refresh-btn:hover { background:#4a6dc7; transform:translateY(-1px); box-shadow:0 2px 8px rgba(91,127,209,.25); }
.refresh-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.refresh-icon { flex-shrink:0; }

/* ========== Loading ========== */
.loading-container { display:flex; justify-content:center; align-items:center; gap:12px; padding:80px; }
.spinner { width:24px; height:24px; border:2.5px solid #e9e3db; border-top-color:#5b7fd1; border-radius:50%; animation:spin .7s linear infinite; }
.loading-text { color:#8a7d72; font-size:.9rem; }
@keyframes spin { to { transform:rotate(360deg);} }

/* ========== Error ========== */
.error-banner { display:flex; align-items:center; gap:8px; padding:14px 18px; background:#fdf0ee; border:1px solid #e8c4be; border-radius:10px; color:#c4453a; margin-bottom:20px; font-size:.88rem; }

/* ========== Summary Cards ========== */
.summary-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px; }
@media (max-width:1024px) { .summary-cards { grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px) { .summary-cards { grid-template-columns:1fr;} }
.summary-card { background:#fff; border:1px solid #ece6dd; border-radius:14px; position:relative; overflow:hidden; transition:all .2s ease; box-shadow:0 1px 3px rgba(44,37,32,.04); }
.summary-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(44,37,32,.08); border-color:#ddd5c8; }
.card-accent { position:absolute; top:0; left:0; right:0; height:3px; }
.accent-blue { background:#5b7fd1; }
.accent-gold { background:#c8a04a; }
.accent-teal { background:#3da8a0; }
.accent-gray { background:#b0a89e; }
.card-body { padding:22px 24px 20px; }
.card-label { font-size:.75rem; color:#8a7d72; margin-bottom:10px; font-weight:500; letter-spacing:.03em; }
.card-value { font-size:2.1rem; font-weight:700; line-height:1.1; margin-bottom:8px; letter-spacing:-.03em; }
.card-subtitle { font-size:.78rem; color:#a09689; font-weight:400; }
.text-blue { color:#5b7fd1; }
.text-gold { color:#c8a04a; }
.text-teal { color:#3da8a0; }
.text-gray { color:#8a7d72; }

/* ========== Section Header ========== */
.section-header { margin-bottom:16px; }
.section-title { font-size:1.1rem; color:#2c2520; margin:0; font-weight:600; letter-spacing:-.01em; }

/* ========== App Cards ========== */
.app-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.app-card { background:#fff; border:1px solid #ece6dd; border-radius:14px; padding:20px; cursor:pointer; transition:all .2s ease; box-shadow:0 1px 3px rgba(44,37,32,.04); display:flex; flex-direction:column; gap:16px; }
.app-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(44,37,32,.08); border-color:#ddd5c8; }
.app-card-top { display:flex; flex-direction:column; gap:2px; }
.app-card-name { font-size:1.05rem; font-weight:600; color:#2c2520; }
.app-card-id { font-size:.72rem; color:#b0a89e; font-family:'SF Mono',Consolas,'Courier New',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-card-metrics { display:flex; gap:20px; }
.metric { display:flex; flex-direction:column; gap:2px; }
.metric-value { font-size:1.15rem; font-weight:700; color:#2c2520; letter-spacing:-.02em; }
.metric-label { font-size:.7rem; color:#a09689; font-weight:400; }
.app-card-badges { display:flex; gap:8px; flex-wrap:wrap; }
.badge { font-size:.72rem; padding:3px 10px; border-radius:20px; font-weight:500; }
.badge-like { background:#e8f5e9; color:#4a8a55; }
.badge-dislike { background:#fdf0ee; color:#c4453a; }
.badge-neutral { background:#f5f2ee; color:#8a7d72; }
.app-card-hint { display:flex; align-items:center; gap:4px; font-size:.78rem; color:#5b7fd1; font-weight:500; margin-top:auto; padding-top:4px; border-top:1px solid #f5f0ea; }
.app-card-hint svg { transition:transform .2s ease; }
.app-card:hover .app-card-hint svg { transform:translateX(3px); }

/* ========== No Data ========== */
.no-data { text-align:center; padding:48px; color:#a09689; font-size:.95rem; background:#fff; border:1px solid #ece6dd; border-radius:14px; flex:1; display:flex; align-items:center; justify-content:center; }

/* ========== Modal ========== */
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(44,37,32,.35); backdrop-filter:blur(2px); display:flex; justify-content:center; align-items:center; z-index:9999; padding:20px; }
.modal-container { background:#faf6f0; border-radius:16px; width:100%; max-width:1000px; height:calc(100vh - 100px); display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(44,37,32,.15); border:1px solid #ece6dd; overflow:hidden; }

/* Modal Header */
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid #ece6dd; background:#fff; }
.modal-header-info { display:flex; flex-direction:column; gap:2px; }
.modal-title { font-size:1.2rem; font-weight:700; color:#2c2520; margin:0; letter-spacing:-.02em; }
.modal-subtitle { font-size:.72rem; color:#b0a89e; font-family:'SF Mono',Consolas,'Courier New',monospace; }
.modal-close { background:none; border:none; color:#a09689; cursor:pointer; padding:6px; border-radius:8px; transition:all .15s ease; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:#f5f0ea; color:#2c2520; }

/* Modal Badges */
.modal-badges { display:flex; gap:12px; padding:16px 24px; background:#fff; border-bottom:1px solid #ece6dd; flex-wrap:wrap; }
.modal-badge { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 16px; background:#faf6f0; border-radius:10px; min-width:70px; }
.modal-badge-value { font-size:1rem; font-weight:700; color:#2c2520; }
.modal-badge-label { font-size:.68rem; color:#a09689; }

/* Modal Body */
.modal-body { padding:0; overflow:hidden; flex:1; display:flex; flex-direction:column; }

/* Log Item */
.log-item { display:flex; flex-direction:column; }

.log-list { display:flex; flex-direction:column; flex:1; overflow-y:auto; min-height:0; padding:20px 24px; max-height: 90%; justify-content: space-around;}
/* .log-list::before,.log-list::after { content:''; flex:1; min-height:0; } */

/* Compact Log Card */
.log-card { background:#fff; border:1px solid #ece6dd; border-radius:10px; padding:25px 20px; cursor:pointer; transition:all .15s ease; box-shadow:0 1px 2px rgba(44,37,32,.03); display:flex; flex-direction:column; gap:10px; min-height:80px; justify-content:center; }
.log-card:hover { border-color:#ddd5c8; box-shadow:0 2px 6px rgba(44,37,32,.06); }
.log-card-top { display:flex; align-items:center; gap:10px; }
.log-expand-icon { margin-left:auto; color:#b0a89e; display:flex; align-items:center; transition:transform .2s ease; }
.log-item.expanded .log-expand-icon { transform:rotate(180deg); }
.log-card-bottom { display:flex; align-items:center; gap:12px; }
.log-query-preview { font-size:.82rem; color:#5d534b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.log-token-count { font-size:.72rem; color:#a09689; white-space:nowrap; }

/* Expanded Details */
.log-card-details { background:#fff; border:1px solid #ece6dd; border-top:none; border-radius:0 0 10px 10px; padding:16px; display:flex; flex-direction:column; gap:14px; box-shadow:0 1px 2px rgba(44,37,32,.03); transform-origin:top center; animation:expandIn .25s ease-out; }
@keyframes expandIn { from { opacity:0; transform:translateY(-8px) scaleY(.96);} to { opacity:1; transform:translateY(0) scaleY(1);} }

/* Shared styles */
.call-time { font-size:.82rem; font-weight:600; color:#2c2520; }
.call-duration { font-size:.72rem; color:#a09689; background:#f5f2ee; padding:2px 8px; border-radius:6px; }
.call-feedback-badge { font-size:.72rem; padding:2px 10px; border-radius:20px; font-weight:500; }
.fb-like { background:#e8f5e9; color:#4a8a55; }
.fb-dislike { background:#fdf0ee; color:#c4453a; }
.fb-none { background:#f5f2ee; color:#8a7d72; }

/* Call Content */
.call-content { display:flex; flex-direction:column; gap:12px; }
.content-block { display:flex; flex-direction:column; gap:6px; }
.content-label { font-size:.72rem; font-weight:600; color:#a09689; text-transform:uppercase; letter-spacing:.04em; }
.content-text { font-size:.85rem; color:#3d3530; line-height:1.6; padding:12px 14px; border-radius:8px; }
.user-query-block .content-text { background:#f0ede8; border-left:3px solid #5b7fd1; }
.ai-response-block .content-text { background:#f5f2ee; border-left:3px solid #3da8a0; }
.user-comment-block .content-text { background:#fef9f0; border-left:3px solid #c8a04a; }
.ai-response-content { display:flex; flex-direction:column; gap:10px; max-height:320px; overflow-y:auto; }
.ai-response-content .pre-wrap { white-space:pre-wrap; word-break:break-word; }
.ai-image { max-width:100%; border-radius:8px; border:1px solid #ece6dd; display:block; }

/* Markdown Headers */
.md-header { font-weight:700; color:#2c2520; letter-spacing:-.01em; margin-top:4px; }
.md-h1 { font-size:1.1rem; margin-bottom:2px; }
.md-h2 { font-size:1rem; margin-bottom:2px; }
.md-h3 { font-size:.92rem; margin-bottom:2px; }
.md-h4,.md-h5,.md-h6 { font-size:.88rem; margin-bottom:2px; }

/* Markdown Table */
.md-table { width:100%; border-collapse:collapse; font-size:.8rem; border:1px solid #e9e3db; border-radius:6px; overflow:hidden; }
.md-table th { background:#f0ede8; color:#2c2520; font-weight:600; text-align:left; padding:8px 12px; border-bottom:1px solid #e0d8cc; white-space:nowrap; }
.md-table td { padding:7px 12px; color:#5d534b; border-bottom:1px solid #f0ebe3; word-break:break-word; }
.md-table tbody tr:nth-child(even) { background:#faf8f4; }
.md-table tbody tr:last-child td { border-bottom:none; }

/* Markdown List */
.md-list { padding-left:4px; line-height:1.7; }

/* Call Detail Stats */
.call-detail-stats { display:flex; gap:16px; padding-top:12px; border-top:1px solid #f5f0ea; }
.stat-item { font-size:.75rem; color:#8a7d72; }
.call-detail-meta { padding-top:4px; }
.meta-item { font-size:.7rem; color:#b0a89e; font-family:'SF Mono',Consolas,'Courier New',monospace; }

/* ========== Pagination ========== */
.pagination-bar { display:flex; justify-content:center; align-items:center; gap:8px; padding:12px 24px 4px; border-top:1px solid #f0ebe3; flex-shrink:0; flex-wrap:wrap; }
.page-btn { background:#fff; border:1px solid #e9e3db; border-radius:8px; padding:6px 14px; font-size:.82rem; color:#5b7fd1; cursor:pointer; transition:all .15s ease; font-family:inherit; font-weight:500; }
.page-btn:hover:not(:disabled) { border-color:#5b7fd1; background:#f5f7fb; }
.page-btn:disabled { opacity:.4; cursor:not-allowed; }
.page-numbers { display:flex; align-items:center; gap:4px; }
.page-num-btn { background:#fff; border:1px solid #e9e3db; border-radius:6px; min-width:30px; height:30px; padding:0 6px; font-size:.8rem; color:#5d534b; cursor:pointer; transition:all .15s ease; font-family:inherit; display:flex; align-items:center; justify-content:center; }
.page-num-btn:hover { border-color:#5b7fd1; color:#5b7fd1; background:#f5f7fb; }
.page-num-active { background:#5b7fd1; border-color:#5b7fd1; color:#fff; font-weight:600; }
.page-num-active:hover { background:#4a6dc7; border-color:#4a6dc7; color:#fff; }
.page-ellipsis { font-size:.8rem; color:#b0a89e; padding:0 4px; user-select:none; }
.page-separator { width:1px; height:22px; background:#e9e3db; margin:0 4px; }
.page-input-group { display:flex; align-items:center; gap:6px; font-size:.8rem; color:#8a7d72; }
.page-input { width:48px; height:30px; border:1px solid #e9e3db; border-radius:6px; text-align:center; font-size:.8rem; color:#2c2520; font-family:inherit; outline:none; transition:border-color .15s ease; -moz-appearance:textfield; }
.page-input::-webkit-inner-spin-button,.page-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.page-input:focus { border-color:#5b7fd1; box-shadow:0 0 0 2px rgba(91,127,209,.12); }
.page-total { font-size:.8rem; color:#8a7d72; white-space:nowrap; }