/* TikTok 客服系統 - 極簡樣式 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif; background: #f5f5f5; color: #333; }
a { color: #1a73e8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Login */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 2px 20px rgba(0,0,0,0.1); width: 380px; max-width: 90vw; }
.login-box h1 { text-align: center; margin-bottom: 24px; font-size: 20px; color: #111; }
.login-box input { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
.login-box button { width: 100%; padding: 12px; background: #1a73e8; color: #fff; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; }
.login-box button:hover { background: #1557b0; }

/* Nav badge */
.nav-badge { display:inline-block; background:#e53935; color:#fff; font-size:10px; padding:1px 6px; border-radius:8px; margin-left:4px; vertical-align:top; font-weight:600; line-height:14px; }

/* Alert */
.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.alert.error { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6cb; }

/* Nav */
nav { background: #1a1a2e; color: #fff; padding: 0 20px; }
.nav-inner { display: flex; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto; height: 48px; }
.nav-inner .brand { font-weight: 600; font-size: 15px; }
.nav-inner .user { margin-left: auto; font-size: 13px; color: #aaa; }
.nav-inner a { color: #ccc; font-size: 13px; }
.nav-inner a:hover { color: #fff; }

/* Main */
main { max-width: 1200px; margin: 24px auto; padding: 0 20px; }
h2 { font-size: 22px; margin-bottom: 16px; }
h3 { font-size: 16px; margin: 20px 0 10px; color: #555; }

/* Stats */
.stats { display: flex; gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; padding: 16px 24px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); flex: 1; text-align: center; }
.stat-card strong { display: block; font-size: 28px; color: #1a73e8; }

/* Table */
.table-wrap { overflow-x: auto; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; }
th { background: #fafafa; font-weight: 600; color: #555; white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f8f9ff; }
.mono { font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; }

/* Forms */
.form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-row input, .form-row select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
.form-row button { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form select { padding: 4px 6px; font-size: 12px; border: 1px solid #ddd; border-radius: 3px; }
.inline-form button,
.form-row button,
.chat-form button { padding: 6px 14px; background: #1a73e8; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
.inline-form button:hover { background: #1557b0; }
select { font-size: 12px; }
button[type="submit"] { font-size: 12px; }

/* Chat */
.chat-box, .chat-log { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 16px; max-height: 60vh; overflow-y: auto; }
.msg { margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; max-width: 80%; }
.msg-customer { background: #e8f0fe; margin-right: auto; }
.msg-agent { background: #e6ffe6; margin-left: auto; }
.msg-hdr { font-size: 11px; color: #888; margin-bottom: 4px; }
.msg-body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.chat-form { display: flex; gap: 8px; margin-top: 12px; }
.chat-form textarea { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; resize: none; }
.chat-form button { padding: 10px 24px; font-size: 14px; border-radius: 6px; }

/* Meta */
.meta { font-size: 13px; color: #888; margin-bottom: 16px; }
.empty { text-align: center; color: #aaa; padding: 40px; font-size: 14px; }

/* Request page */
.request-grid { display:flex; flex-direction:column; gap:12px; }
.request-card { display:flex; align-items:center; gap:16px; background:#fff; padding:16px 20px; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.request-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#1a73e8; }
.request-avatar img { width:100%; height:100%; object-fit:cover; }
.request-avatar-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:600; }
.request-info { flex:1; min-width:0; }
.request-name { font-size:15px; font-weight:500; color:#333; }
.request-user { font-size:12px; color:#888; }
.request-preview { font-size:13px; color:#555; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.request-time { font-size:11px; color:#aaa; margin-top:2px; }
.request-actions { display:flex; gap:8px; flex-shrink:0; }

/* ===================================================================
   Agent Workbench - Left-right split layout
   =================================================================== */
.agent-layout-page, .agent-layout-page body { margin:0; padding:0; height:100vh; overflow:hidden; }
.agent-workbench { display:flex; height:calc(100vh - 48px); max-width:none; margin:0; padding:0; }

/* Left sidebar */
.aw-sidebar { width:280px; min-width:280px; background:#fff; border-right:1px solid #e0e0e0; display:flex; flex-direction:column; }
.aw-sidebar-header { padding:16px 20px; border-bottom:1px solid #eee; display:flex; align-items:center; gap:8px; }
.aw-sidebar-header h2 { font-size:16px; margin:0; }
.aw-count { background:#1a73e8; color:#fff; font-size:11px; padding:2px 8px; border-radius:10px; }
.aw-customer-list { flex:1; overflow-y:auto; }
.aw-customer { display:flex; padding:14px 20px; cursor:pointer; border-bottom:1px solid #f5f5f5; transition:background 0.15s; }
.aw-customer:hover { background:#f0f4ff; }
.aw-customer.active { background:#e8f0fe; }
.aw-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; overflow:hidden; background:#1a73e8; }
.aw-avatar img { width:100%; height:100%; object-fit:cover; }
.aw-avatar-letter { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:600; }
.aw-cust-info { margin-left:12px; flex:1; min-width:0; }
.aw-cust-name { font-size:14px; font-weight:500; color:#333; }
.aw-cust-meta { font-size:12px; color:#999; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Right chat panel */
.aw-chat { flex:1; display:flex; flex-direction:column; background:#f8f9fb; min-width:0; }
.aw-placeholder { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#bbb; }
.aw-placeholder-icon { font-size:48px; margin-bottom:12px; opacity:0.5; }
.aw-chat-active { flex:1; display:flex; flex-direction:column; height:100%; }
.aw-chat-header { padding:14px 20px; border-bottom:1px solid #e0e0e0; background:#fff; display:flex; align-items:center; gap:12px; }
.aw-chat-header span { font-size:16px; font-weight:600; }
.aw-chat-user { margin-left:auto; font-size:12px; color:#999; font-weight:400; }
.aw-back-btn { display:none; background:none; border:none; font-size:18px; cursor:pointer; padding:0 4px; color:#333; }

/* Messages area */
.aw-messages { flex:1; overflow-y:auto; padding:16px 24px; }
.aw-msg { margin-bottom:12px; padding:8px 14px; border-radius:8px; max-width:70%; word-break:break-word; }
.aw-msg-customer { background:#fff; margin-right:auto; box-shadow:0 1px 2px rgba(0,0,0,0.06); }
.aw-msg-agent { background:#95ec69; margin-left:auto; }
.aw-msg-hdr { font-size:11px; color:#888; margin-bottom:4px; }
.aw-msg-body { font-size:14px; line-height:1.5; white-space:pre-wrap; }

/* Input form */
.aw-form { display:flex; gap:8px; padding:12px 20px; background:#fff; border-top:1px solid #e0e0e0; }
.aw-form textarea { flex:1; padding:10px; border:1px solid #ddd; border-radius:6px; font-size:14px; resize:none; outline:none; }
.aw-form textarea:focus { border-color:#1a73e8; }
.aw-form button { padding:10px 24px; background:#1a73e8; color:#fff; border:none; border-radius:6px; font-size:14px; cursor:pointer; }
.aw-form button:hover { background:#1557b0; }

/* Mobile responsive */
@media (max-width:768px) {
  .aw-sidebar { width:100%; min-width:100%; }
  .aw-sidebar.mobile-show { display:flex; }
  .aw-chat { width:100%; }
  .aw-back-btn { display:block; }
  .aw-msg { max-width:85%; }
}

/* ===================================================================
   Config page
   =================================================================== */
.config-grid { display:flex; flex-direction:column; gap:20px; }
.config-card { background:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.06); padding:24px; }
.config-card h3 { font-size:15px; margin:0 0 16px; color:#333; border-bottom:1px solid #eee; padding-bottom:8px; }
.config-field { margin-bottom:14px; }
.config-field label { display:block; font-size:13px; color:#555; margin-bottom:4px; font-weight:500; }
.config-field input { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:4px; font-size:14px; }
.config-field input:focus { border-color:#1a73e8; outline:none; }
.config-cmd { background:#1a1a2e; color:#e6e6e6; padding:14px 16px; border-radius:6px; font-family:'SF Mono','Consolas',monospace; font-size:12px; white-space:pre-wrap; word-break:break-all; margin:0 0 12px; user-select:all; }
.status-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.status-dot.running { background:#2e7d32; box-shadow:0 0 6px rgba(46,125,50,0.4); }
.status-dot.online { background:#2e7d32; box-shadow:0 0 6px rgba(46,125,50,0.4); }
.status-dot.offline { background:#c62828; }
.status-dot.warning { background:#f9a825; box-shadow:0 0 6px rgba(249,168,37,0.4); }
.status-dot.unknown { background:#90a4ae; }
.status-dot.connecting { background:#f9a825; animation:pulse 1s infinite; }
@keyframes pulse { 0%{opacity:0.4} 50%{opacity:1} 100%{opacity:0.4} }
.config-actions { display:flex; gap:8px; margin-top:8px; }
.btn { display:inline-block; padding:8px 18px; border:1px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; font-size:13px; color:#333; }
.btn:hover { background:#f5f5f5; }
.btn-primary { background:#1a73e8; border-color:#1a73e8; color:#fff; }
.btn-primary:hover { background:#1557b0; }
.btn-danger { background:#d32f2f; border-color:#d32f2f; color:#fff; }
.btn-danger:hover { background:#b71c1c; }
details.config-details summary { cursor:pointer; font-size:13px; color:#1a73e8; font-weight:500; padding:4px 0; }
details.config-details summary:hover { color:#1557b0; }