[hidden]{display:none!important}.th-container{max-width:1100px;margin:24px auto;padding:clamp(16px,3vw,32px);color:#171717;background:#fff;overflow-wrap:anywhere}.th-container label,.th-chat label,.th-product-options label{display:block;margin:12px 0;font-size:15px}.th-container input:not([type=checkbox]),.th-container textarea,.th-container select,.th-chat textarea,.th-product-options select{display:block;width:100%;min-height:44px;padding:10px;border:1px solid #aaa;border-radius:2px;background:white;color:#171717;font:inherit;font-size:16px}.th-container textarea,.th-chat textarea{min-height:90px;resize:vertical}.th-container button,.th-chat button,.th-product-options button{min-height:44px;padding:10px 18px;border:1px solid #111;border-radius:2px;background:#111;color:white;cursor:pointer;font:inherit;line-height:1.4}.th-container button:disabled,.th-chat button:disabled{opacity:.55;cursor:wait}.th-container a{color:inherit;text-decoration:underline}.th-container .th-consent{display:flex;align-items:flex-start;gap:10px}.th-consent input{flex:none;margin-top:5px}.th-cart-row{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid #ddd}.th-cart-row img{width:90px;height:90px;object-fit:contain}.th-cart-row>div{flex:1;min-width:0}.th-cart-row input{max-width:110px}.th-history-row{padding:16px;border:1px solid #ddd;margin:16px 0}.th-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);max-width:calc(100vw - 40px);width:max-content;padding:14px 24px;background:#111;color:#fff;z-index:100000;box-shadow:0 4px 25px #0003}.th-categories{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.th-categories a{border:1px solid #e0e0dc;border-radius:24px;padding:9px 20px;color:#222;text-decoration:none;font:inherit;font-size:13px;font-weight:500;background:#fafaf8;transition:all .18s ease}.th-categories a:hover,.th-categories a[aria-current=page]{color:white;background:#171717;border-color:#171717}.th-product-options{margin-top:20px}.th-product-options p{font-size:14px;line-height:1.7}.th-chat{position:fixed;right:20px;bottom:20px;z-index:9999;font-family:Arial,sans-serif}.th-chat-toggle{border-radius:999px!important;box-shadow:0 3px 20px #0002}.th-chat section{position:absolute;bottom:60px;right:0;width:360px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 100px);overflow:auto;border:1px solid #ccc;box-shadow:0 8px 40px #0003;background:#fff;color:#111;padding:16px;box-sizing:border-box}.th-chat-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.th-chat-heading button{border:0;padding:0 12px;background:white;color:#111}.th-chat p{font-size:14px;line-height:1.5}.th-messages{max-height:400px;min-height:130px;overflow-y:auto;overscroll-behavior:contain;padding:10px 0}.th-chat .th-messages{max-height:220px}.th-message{padding:12px;margin:10px 4px;border:1px solid #ddd;background:#f6f6f6;overflow-wrap:anywhere}.th-message.th-out{background:#111;color:#fff}.th-message p{white-space:pre-wrap;margin:8px 0}.th-message small{font-size:11px;display:block;opacity:.8}.th-inbox-grid{display:grid;grid-template-columns:minmax(180px,30%) minmax(0,1fr);gap:24px;margin-top:20px}.th-thread{display:block!important;width:100%;text-align:left;margin:8px 0;background:white!important;color:#111!important}.th-thread[aria-pressed=true]{background:#111!important;color:white!important}.th-inbox-grid aside{max-height:650px;overflow:auto}.th-social-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:15px}.th-social-links a{font-size:13px}.th-container :focus-visible,.th-chat :focus-visible,.th-add:focus-visible{outline:3px solid #567fbd;outline-offset:3px}@media(max-width:640px){.th-container{padding:16px 0}.th-inbox-grid{grid-template-columns:1fr}.th-inbox-grid aside{max-height:220px}.th-cart-row{gap:10px}.th-cart-row img{width:64px;height:64px}.th-chat{right:12px;bottom:12px}.th-categories{display:flex;flex-wrap:wrap;gap:8px}.th-categories a{padding:8px 16px;font-size:12px}.th-messages{max-height:45dvh}}
.th-container>h2:first-child{margin-top:0}.th-container .th-cart-row input{max-width:110px}.th-container .th-cart-row p{margin:8px 0}.th-container .th-cart-row button{margin-top:10px}.th-container .th-chat-heading{margin:0}
/* Modern WeChat Desktop Workstation UI */
.th-admin-chat-wrap { margin-top: 10px; }
.th-wechat-ui { max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.th-wechat-ui .th-inbox-grid { display: flex; height: 75vh; min-height: 600px; max-height: 850px; margin: 0; background: #fff; }
.th-wechat-ui aside { width: 300px; flex-shrink: 0; background: #f7f7f7; border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; }
.th-wechat-ui .th-aside-header { padding: 14px 16px; background: #f0f2f5; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.th-wechat-ui .th-aside-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.th-wechat-ui .th-aside-title { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #1e293b; font-weight: 600; }
.th-wechat-ui .th-btn-refresh { background: #fff !important; border: 1px solid #cbd5e1 !important; color: #475569 !important; border-radius: 4px !important; padding: 3px 10px !important; font-size: 12px !important; cursor: pointer !important; min-height: 26px !important; }
.th-wechat-ui .th-btn-refresh:hover { background: #f8fafc !important; }
.th-wechat-ui .th-channel-pills { display: flex; gap: 4px; background: #e2e8f0; padding: 3px; border-radius: 6px; }
.th-wechat-ui .th-channel-tab { flex: 1; border: none !important; background: transparent !important; font-size: 12px !important; font-weight: 500 !important; padding: 5px 4px !important; border-radius: 4px !important; color: #64748b !important; cursor: pointer !important; min-height: 28px !important; text-align: center !important; line-height: 1.2 !important; transition: all 0.15s; }
.th-wechat-ui .th-channel-tab.active { background: #fff !important; color: #0f172a !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; font-weight: 600 !important; }
.th-wechat-ui #th-threads { flex: 1; overflow-y: auto; padding: 0; }
.th-wechat-ui .th-no-threads { padding: 24px 16px; text-align: center; color: #94a3b8; font-size: 13px; margin: 0; }
.th-wechat-ui .th-thread { display: flex !important; width: 100% !important; padding: 12px 14px !important; gap: 12px !important; border: none !important; border-bottom: 1px solid #f1f5f9 !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; text-align: left !important; cursor: pointer !important; transition: background 0.15s !important; box-sizing: border-box !important; }
.th-wechat-ui .th-thread:hover { background: #ededed !important; }
.th-wechat-ui .th-thread[aria-pressed=true] { background: #c6c6c6 !important; color: #000 !important; }
.th-wechat-ui .th-thread-avatar { width: 42px; height: 42px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #fff; }
.th-wechat-ui .th-thread-avatar.is-wa { background: #25d366; }
.th-wechat-ui .th-thread-avatar.is-web { background: #2563eb; }
.th-wechat-ui .th-thread-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.th-wechat-ui .th-thread-top { display: flex; justify-content: space-between; align-items: center; }
.th-wechat-ui .th-thread-name { font-size: 14px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-wechat-ui .th-thread-time { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.th-wechat-ui .th-thread-bottom { display: flex; justify-content: space-between; align-items: center; }
.th-wechat-ui .th-channel-badge { font-size: 11px; padding: 2px 7px; border-radius: 4px; font-weight: 500; }
.th-wechat-ui .th-channel-badge.is-wa { background: #dcfce7; color: #166534; }
.th-wechat-ui .th-channel-badge.is-web { background: #dbeafe; color: #1e40af; }
.th-wechat-ui .th-unread-badge { background: #ef4444; color: #fff; font-size: 10px; font-weight: bold; border-radius: 10px; padding: 1px 6px; min-width: 16px; text-align: center; }
.th-wechat-ui #th-conversation { flex: 1; display: flex; flex-direction: column; background: #f3f3f3; min-width: 0; }
.th-wechat-ui .th-chat-header { padding: 14px 24px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.th-wechat-ui .th-header-info { display: flex; align-items: center; gap: 10px; }
.th-wechat-ui .th-chat-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #0f172a; }
.th-wechat-ui .th-export-actions { display: flex; gap: 8px; }
.th-wechat-ui .th-btn-export { min-height: 30px !important; padding: 4px 12px !important; font-size: 12px !important; background: #fff !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; border-radius: 4px !important; cursor: pointer !important; }
.th-wechat-ui .th-btn-export:hover { background: #f8fafc !important; color: #0f172a !important; }
.th-wechat-ui .th-messages { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; background: #f3f3f3; }
.th-wechat-ui .th-empty-chat { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #94a3b8; gap: 8px; }
.th-wechat-ui .th-empty-icon { font-size: 42px; }
.th-wechat-ui .th-message-wrapper { display: flex; width: 100%; gap: 12px; margin: 0; align-items: flex-start; }
.th-wechat-ui .th-message-wrapper.th-out { flex-direction: row-reverse; }
.th-wechat-ui .th-avatar { width: 38px; height: 38px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px; }
.th-wechat-ui .th-avatar.is-guest { background: #cbd5e1; color: #334155; }
.th-wechat-ui .th-avatar.is-me { background: #07c160; color: #fff; }
.th-wechat-ui .th-msg-content { max-width: 68%; display: flex; flex-direction: column; }
.th-wechat-ui .th-out .th-msg-content { align-items: flex-end; }
.th-wechat-ui .th-msg-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; }
.th-wechat-ui .th-msg-meta small { opacity: 0.6; font-size: 11px; margin: 0 !important; }
.th-wechat-ui .th-message-bubble { padding: 10px 14px; border-radius: 6px; background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,0.06); position: relative; border: 1px solid #e2e8f0; overflow-wrap: anywhere; }
.th-wechat-ui .th-out .th-message-bubble { background: #95ec69; border-color: #82db56; color: #000; }
.th-wechat-ui .th-message-bubble p { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
.th-wechat-ui .th-status-text { display: block; text-align: right; font-size: 11px; opacity: 0.6; margin-top: 5px; }
.th-wechat-ui .th-translate-btn { background: none !important; border: none !important; padding: 0 !important; color: #2563eb !important; font-size: 12px !important; cursor: pointer !important; min-height: 0 !important; }
.th-wechat-ui .th-translate-btn:hover { text-decoration: underline; }
.th-wechat-ui .th-translation { margin-top: 8px; padding: 8px 12px; background: #f8fafc; border-left: 3px solid #3b82f6; border-radius: 4px; font-size: 13px; color: #1e293b; line-height: 1.5; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.th-wechat-ui .th-message-form { flex-shrink: 0; background: #fff; border-top: 1px solid #e2e8f0; padding: 16px 24px; }
.th-wechat-ui .th-chat-input-area { display: flex; flex-direction: column; }
.th-wechat-ui .th-chat-input-area textarea { border: none !important; resize: none !important; min-height: 75px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 14px !important; line-height: 1.5 !important; outline: none !important; }
.th-wechat-ui .th-chat-actions { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8px; }
.th-wechat-ui .th-btn-send { background: #07c160 !important; color: #fff !important; border: none !important; padding: 7px 22px !important; border-radius: 4px !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s; min-height: 32px !important; }
.th-wechat-ui .th-btn-send:hover { background: #06ad56 !important; }
.th-wechat-ui .th-inbox-status { font-size: 12px; color: #94a3b8; margin: 8px 0 0; text-align: right; }
@media(max-width:768px) { .th-wechat-ui .th-inbox-grid { flex-direction: column; height: 85vh; } .th-wechat-ui aside { width: 100%; height: 35%; border-right: none; border-bottom: 1px solid #e2e8f0; } .th-wechat-ui #th-conversation { height: 65%; } }
.th-chat input{box-sizing:border-box;display:block;width:100%;min-height:44px;padding:10px;border:1px solid #aaa;border-radius:2px;background:#fff;color:#171717;font:inherit;font-size:16px}.th-chat #th-contact-help{font-size:12px;color:#555}.th-merchant-contact{overflow-wrap:anywhere}.th-merchant-contact a{color:inherit;text-decoration:underline}.th-contact-dialog{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;margin:auto;padding:28px;border:1px solid #ddd;border-radius:12px;background:#fff;color:#171717;box-shadow:0 20px 70px #0004;font:15px/1.6 Arial,sans-serif;overflow-wrap:anywhere}.th-contact-dialog::backdrop{background:#0008}.th-contact-dialog:not([open]){display:none}.th-contact-dialog h2{font-size:24px;margin:0 0 12px}.th-contact-dialog button{min-height:44px;padding:10px 16px;border:1px solid #171717;background:#171717;color:#fff;border-radius:3px;cursor:pointer;font:inherit}.th-contact-dialog a{color:inherit;text-decoration:underline}.th-contact-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0}.th-contact-row a{flex:1;min-width:140px}.th-contact-dialog .th-dialog-close{display:block;margin:16px 0 0 auto;background:#fff;color:#171717}.th-copy-status{font-size:13px}.th-contact-dialog :focus-visible{outline:3px solid #567fbd;outline-offset:3px}.th-contact-snapshot{font-size:13px;border-top:1px solid #ddd;padding-top:10px}
.th-rich-controls{min-width:0;border:1px solid #bbb;padding:14px;margin:16px 0}.th-rich-controls button{margin:6px 6px 6px 0}.th-template-preview{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;background:#f4f4f4;color:#111;font:inherit;max-height:260px;overflow:auto}.th-message-result{white-space:pre-wrap}.th-message a{display:block;margin:8px 0;color:inherit;text-decoration:underline}.th-social-login{margin:20px 0}.th-rich-controls input[type=file]{font-size:14px;max-width:100%;overflow:hidden}

/* ==========================================================================
   Dual Workstation (Left: Web, Right: WhatsApp) - Full Width Desktop UI
   ========================================================================== */
.th-dual-workstation-container {
  max-width: 1760px !important;
  width: 98% !important;
  margin: 16px auto !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: 0 10px 35px rgba(0,0,0,0.08) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #f8fafc !important;
}

/* Top Workstation Control Bar */
.th-top-workstation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f172a;
  color: #fff;
  padding: 12px 20px;
  border-bottom: 1px solid #1e293b;
  flex-wrap: wrap;
  gap: 12px;
}
.th-top-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.th-top-bar-title {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f8fafc;
  letter-spacing: 0.3px;
}
.th-top-bar-status {
  font-size: 12px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3);
  padding: 3px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.th-status-dot {
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #10b981;
}
.th-top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.th-top-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #f1f5f9;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s;
  user-select: none;
}
.th-top-toggle-label:hover {
  background: rgba(255, 255, 255, 0.16);
}
.th-top-toggle-label input[type="checkbox"] {
  width: 16px !important;
  min-height: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer;
}
.th-btn-top {
  background: #2563eb !important;
  color: #fff !important;
  border: none !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 500 !important;
  transition: opacity 0.2s;
}
.th-btn-top:hover {
  opacity: 0.9;
}
.th-btn-top.is-secondary {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #e2e8f0 !important;
}
.th-btn-top.is-secondary:hover {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

/* Dual Side-by-Side Workstation Grid */
.th-dual-workstation {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  padding: 16px !important;
  background: #e2e8f0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 1200px) {
  .th-dual-workstation {
    grid-template-columns: 1fr !important;
  }
}

/* Channel Panels */
.th-channel-panel {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 15px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  height: 76vh;
  min-height: 600px;
  max-height: 850px;
  overflow: hidden;
}
.th-panel-web .th-panel-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #fff;
}
.th-panel-wa .th-panel-header {
  background: linear-gradient(135deg, #064e3b 0%, #059669 100%);
  color: #fff;
}
.th-panel-header {
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.th-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.th-channel-icon {
  font-size: 22px;
}
.th-panel-title strong {
  font-size: 15px;
  display: block;
  line-height: 1.2;
}
.th-channel-sub {
  font-size: 11px;
  opacity: 0.85;
  display: block;
  margin-top: 2px;
}
.th-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.th-badge-count {
  background: rgba(255,255,255,0.22);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35);
}
.th-badge-count.is-wa {
  background: rgba(255,255,255,0.25);
}

/* Panel Subgrid: Aside & Conversation */
.th-panel-grid {
  display: flex !important;
  flex: 1 !important;
  min-height: 0 !important;
  background: #fff !important;
}
.th-threads-aside {
  width: 220px !important;
  flex-shrink: 0 !important;
  background: #f8fafc !important;
  border-right: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.th-threads-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}
.th-threads-list .th-thread {
  display: flex !important;
  width: 100% !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  box-sizing: border-box !important;
}
.th-threads-list .th-thread:hover {
  background: #e2e8f0 !important;
}
.th-threads-list .th-thread[aria-pressed="true"] {
  background: #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}
.th-panel-web .th-thread-avatar.is-web {
  background: #2563eb;
  color: #fff;
}
.th-panel-wa .th-thread-avatar.is-wa {
  background: #25d366;
  color: #fff;
}

/* Conversation Area */
.th-conversation {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f1f5f9 !important;
  min-width: 0 !important;
}
.th-chat-header {
  padding: 10px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  gap: 8px !important;
}
.th-header-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.th-header-info h3 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.th-wa-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.th-btn-open-wa {
  background: #25d366 !important;
  color: #fff !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 1px 3px rgba(37, 211, 102, 0.4) !important;
  transition: transform 0.15s, background 0.15s !important;
  line-height: 1.4 !important;
}
.th-btn-open-wa:hover {
  background: #1ebc57 !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.th-btn-mini {
  padding: 4px 10px !important;
  font-size: 11px !important;
}
.th-export-actions {
  display: flex;
  gap: 6px;
}
.th-btn-export {
  min-height: 28px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  background: #fff !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}
.th-btn-export:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* Chat Messages */
.th-messages {
  flex: 1 !important;
  padding: 16px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #f8fafc !important;
}
.th-message-wrapper {
  display: flex !important;
  width: 100% !important;
  gap: 10px !important;
  margin: 0 !important;
  align-items: flex-start !important;
}
.th-message-wrapper.th-out {
  flex-direction: row-reverse !important;
}
.th-panel-web .th-avatar.is-me {
  background: #2563eb !important;
  color: #fff !important;
}
.th-panel-wa .th-avatar.is-me {
  background: #059669 !important;
  color: #fff !important;
}
.th-msg-content {
  max-width: 82% !important;
  display: flex !important;
  flex-direction: column !important;
}
.th-out .th-msg-content {
  align-items: flex-end !important;
}
.th-message-bubble {
  padding: 9px 13px !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}
.th-panel-web .th-out .th-message-bubble {
  background: #dbeafe !important;
  border-color: #bfdbfe !important;
  color: #1e3a8a !important;
}
.th-panel-wa .th-out .th-message-bubble {
  background: #dcfce7 !important;
  border-color: #bbf7d0 !important;
  color: #064e3b !important;
}

/* Translation & AI Suggestion Boxes */
.th-translate-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #2563eb !important;
  font-size: 11px !important;
  cursor: pointer !important;
  min-height: 0 !important;
  margin-left: 6px !important;
}
.th-translate-btn:hover {
  text-decoration: underline !important;
}
.th-translation {
  margin-top: 8px !important;
  padding: 8px 12px !important;
  background: #fff !important;
  border-left: 3px solid #3b82f6 !important;
  border-radius: 4px !important;
  font-size: 12.5px !important;
  color: #1e293b !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  border: 1px solid #e2e8f0 !important;
  border-left-width: 3px !important;
}
.th-trans-header {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}
.th-ai-suggestion {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #cbd5e1;
  font-size: 12px;
  color: #065f46;
  background: #f0fdf4;
  padding: 6px 8px;
  border-radius: 4px;
}
.th-btn-adopt {
  background: #059669 !important;
  color: #fff !important;
  border: none !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  min-height: 22px !important;
  margin-left: 6px !important;
}

/* Forms & Textareas */
.th-panel-web .th-message-form {
  border-top: 1px solid #e2e8f0;
}
.th-panel-wa .th-message-form {
  border-top: 1px solid #e2e8f0;
}
.th-chat-input-area textarea {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  resize: none !important;
  min-height: 60px !important;
  padding: 8px 10px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  outline: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.th-panel-web .th-chat-input-area textarea:focus {
  border-color: #2563eb !important;
  background: #fff !important;
}
.th-panel-wa .th-chat-input-area textarea:focus {
  border-color: #059669 !important;
  background: #fff !important;
}
.th-panel-web .th-btn-send {
  background: #2563eb !important;
}
.th-panel-web .th-btn-send:hover {
  background: #1d4ed8 !important;
}
.th-panel-wa .th-btn-send {
  background: #059669 !important;
}
.th-panel-wa .th-btn-send:hover {
  background: #047857 !important;
}

/* Modal Dialog */
.th-modal-dialog {
  border: none !important;
  padding: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
  width: min(540px, calc(100vw - 32px)) !important;
  max-width: 540px !important;
  background: #fff !important;
}
.th-modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.th-modal-content {
  display: flex;
  flex-direction: column;
}
.th-modal-header {
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.th-modal-close {
  background: transparent !important;
  border: none !important;
  font-size: 20px !important;
  color: #64748b !important;
  cursor: pointer !important;
  padding: 0 6px !important;
  min-height: 28px !important;
}
.th-modal-body {
  padding: 20px;
}



/* ==========================================================================
   Mac WeChat Desktop Console UI (True Fullscreen 100vw x 100vh)
   ========================================================================== */

/* ==========================================================================
   Mac WeChat Desktop Console UI (True Fullscreen 100vw x 100vh)
   ========================================================================== */
#th-staff.th-mac-wechat-app {
  display: flex !important;
  flex-direction: row !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #282828 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  box-sizing: border-box !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 99999 !important;
}

/* In WP Admin: embed cleanly without covering WP topbar/menu */
.th-admin-chat-wrap #th-staff.th-mac-wechat-app {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: calc(100vh - 140px) !important;
  min-height: 650px !important;
  max-width: 100% !important;
  max-height: calc(100vh - 140px) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
  z-index: 1 !important;
}

/* 1. Left Dock Navigation (Mac Style #282828) */
.th-mac-dock {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 100% !important;
  background: #282828 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 14px 0 16px !important;
  box-sizing: border-box !important;
  user-select: none !important;
  z-index: 20 !important;
  border-right: 1px solid #1c1c1c !important;
}

.th-mac-traffic-lights {
  display: flex !important;
  gap: 7px !important;
  margin-bottom: 22px !important;
  padding: 2px 0 !important;
}

.th-traffic-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  cursor: pointer !important;
}
.th-traffic-dot.is-red { background: #ff5f56 !important; border: 1px solid #e0443e !important; }
.th-traffic-dot.is-yellow { background: #ffbd2e !important; border: 1px solid #dea123 !important; }
.th-traffic-dot.is-green { background: #27c93f !important; border: 1px solid #1aab29 !important; }

.th-mac-user-avatar {
  position: relative !important;
  margin-bottom: 26px !important;
  cursor: pointer !important;
}

.th-dock-avatar-circle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  background: #3b82f6 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.th-dock-status-dot {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #07c160 !important;
  border: 2px solid #282828 !important;
}

.th-mac-dock-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
}

.th-dock-item {
  position: relative !important;
  width: 52px !important;
  height: 50px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8e8e8e !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.th-dock-item:hover {
  color: #f1f1f1 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.th-dock-item.is-active {
  color: #07c160 !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.th-dock-icon {
  font-size: 20px !important;
  line-height: 1.1 !important;
  display: block !important;
}

.th-dock-label {
  font-size: 10px !important;
  margin-top: 3px !important;
  font-weight: 500 !important;
  display: block !important;
}

.th-dock-badge {
  position: absolute !important;
  top: 2px !important;
  right: 4px !important;
  background: #fa5151 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: bold !important;
  border-radius: 10px !important;
  padding: 0 5px !important;
  min-width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  text-align: center !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4) !important;
}

.th-dock-toggle {
  position: relative !important;
  width: 52px !important;
  height: 50px !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8e8e8e !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  user-select: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.th-dock-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.th-dock-toggle:has(input:checked) {
  color: #07c160 !important;
  background: rgba(7, 193, 96, 0.15) !important;
}
.th-dock-toggle:hover {
  color: #f1f1f1 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.th-mac-dock-bottom {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

/* 2. Main Stage (Dual Panels: 50% Web + 50% WA) */
.th-mac-main-stage {
  flex: 1 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  background: #fff !important;
}

.th-mac-channel-pane {
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
}

.th-mac-channel-divider {
  width: 3px !important;
  height: 100% !important;
  background: #c8c8c8 !important;
  box-shadow: inset 1px 0 0 #b0b0b0, 1px 0 0 #e0e0e0 !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}

/* 3. Session List Column (#e9e9e9) */
.th-mac-threads-col {
  width: 270px !important;
  min-width: 240px !important;
  max-width: 300px !important;
  height: 100% !important;
  background: #e9e9e9 !important;
  border-right: 1px solid #d9d9d9 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.th-threads-header {
  height: 52px !important;
  background: #e5e5e5 !important;
  border-bottom: 1px solid #dcdcdc !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}
.th-threads-header.is-wa {
  background: #e2f0e6 !important;
  border-bottom: 1px solid #c9e3d0 !important;
}

.th-threads-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1f1f1f !important;
}

.th-col-icon {
  font-size: 16px !important;
}

.th-thread-count-pill {
  background: #d8d8d8 !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
}
.th-thread-count-pill.is-wa {
  background: #c2e5cd !important;
  color: #065f46 !important;
}

.th-mac-icon-btn {
  background: transparent !important;
  border: none !important;
  font-size: 15px !important;
  cursor: pointer !important;
  color: #555 !important;
  border-radius: 4px !important;
  padding: 4px 6px !important;
  min-height: 0 !important;
  line-height: 1 !important;
  transition: all 0.15s !important;
}
.th-mac-icon-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #000 !important;
}

.th-threads-scroll {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
}
.th-threads-scroll::-webkit-scrollbar {
  width: 4px !important;
}
.th-threads-scroll::-webkit-scrollbar-thumb {
  background: #c5c5c5 !important;
  border-radius: 2px !important;
}

.th-no-threads {
  padding: 36px 16px !important;
  text-align: center !important;
  color: #888 !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* Mac WeChat Thread Item */
.th-mac-thread-item {
  display: flex !important;
  width: 100% !important;
  padding: 12px 14px !important;
  gap: 11px !important;
  border: none !important;
  border-bottom: 1px solid #e1e1e1 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
  box-sizing: border-box !important;
  position: relative !important;
  align-items: center !important;
  min-height: 64px !important;
  color: #000 !important;
}

.th-mac-thread-item:hover {
  background: #dfdfdf !important;
}

.th-mac-thread-item[aria-pressed="true"] {
  background: #c6c6c6 !important;
}

.th-thread-avatar-box {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
}

.th-mac-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #fff !important;
}
.th-mac-avatar.is-web { background: #3b82f6 !important; }
.th-mac-avatar.is-wa { background: #25d366 !important; }
.th-mac-avatar.is-me { background: #07c160 !important; }
.th-mac-avatar.is-guest { background: #cbd5e1 !important; color: #334155 !important; }

/* 微信经典红色发信息数量角标 */
.th-wechat-unread-badge {
  position: absolute !important;
  top: -5px !important;
  right: -6px !important;
  background: #fa5151 !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: bold !important;
  border-radius: 10px !important;
  padding: 0 5px !important;
  min-width: 17px !important;
  height: 17px !important;
  line-height: 17px !important;
  text-align: center !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
  border: 1.5px solid #fff !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

.th-thread-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.th-meta-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
}

.th-thread-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.th-thread-time {
  font-size: 11px !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  margin-left: 4px !important;
}

.th-meta-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.th-last-message-preview {
  font-size: 12px !important;
  color: #64748b !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
}

.th-mac-more-btn {
  width: 100% !important;
  padding: 8px !important;
  font-size: 12px !important;
  background: #dfdfdf !important;
  border: none !important;
  color: #555 !important;
  cursor: pointer !important;
  text-align: center !important;
}

/* 4. Chat Canvas Column (#f5f5f5) */
.th-mac-chat-col {
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f5f5f5 !important;
  position: relative !important;
}

.th-mac-chat-header {
  height: 52px !important;
  background: #f5f5f5 !important;
  border-bottom: 1px solid #e7e7e7 !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

.th-chat-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.th-chat-title-group h3 {
  margin: 0 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #111 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.th-mac-badge {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}
.th-mac-badge.is-web { background: #dbeafe !important; color: #1e40af !important; }
.th-mac-badge.is-wa { background: #dcfce7 !important; color: #166534 !important; }

.th-mac-header-tools {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.th-mac-tool-btn {
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  padding: 3px 9px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  min-height: 26px !important;
  line-height: 1.2 !important;
}
.th-mac-tool-btn:hover {
  background: #f3f4f6 !important;
  color: #111 !important;
  border-color: #9ca3af !important;
}

.th-mac-wa-btn {
  background: #25d366 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: background 0.15s !important;
  white-space: nowrap !important;
}
.th-mac-wa-btn:hover {
  background: #20bd5a !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Messages Flow */
.th-mac-messages-flow {
  flex: 1 !important;
  padding: 18px 20px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: #f5f5f5 !important;
  scrollbar-width: thin !important;
}
.th-mac-messages-flow::-webkit-scrollbar {
  width: 5px !important;
}
.th-mac-messages-flow::-webkit-scrollbar-thumb {
  background: #d0d0d0 !important;
  border-radius: 3px !important;
}

.th-mac-empty-tip {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  color: #94a3b8 !important;
  gap: 8px !important;
  font-size: 13.5px !important;
}
.th-empty-mac-icon {
  font-size: 38px !important;
}

.th-message-wrapper {
  display: flex !important;
  width: 100% !important;
  gap: 11px !important;
  margin: 0 !important;
  align-items: flex-start !important;
}
.th-message-wrapper.th-out {
  flex-direction: row-reverse !important;
}

.th-msg-content {
  max-width: 74% !important;
  display: flex !important;
  flex-direction: column !important;
}
.th-out .th-msg-content {
  align-items: flex-end !important;
}

.th-msg-meta {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin-bottom: 4px !important;
}
.th-msg-meta small {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  opacity: 1 !important;
}

/* 微信气泡：对方白底，我方微信绿 #95ec69 */
.th-message-bubble {
  padding: 9px 13px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #111 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  border: 1px solid #e2e8f0 !important;
  position: relative !important;
  overflow-wrap: anywhere !important;
}
.th-out .th-message-bubble {
  background: #95ec69 !important;
  border-color: #82db56 !important;
  color: #000 !important;
}
.th-message-bubble p {
  margin: 0 !important;
  white-space: pre-wrap !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  font-family: inherit !important;
}
.th-status-text {
  display: block !important;
  text-align: right !important;
  font-size: 10.5px !important;
  opacity: 0.65 !important;
  margin-top: 4px !important;
}

.th-contact-snapshot {
  margin-top: 6px !important;
  font-size: 11.5px !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  border-left: 2px solid #3b82f6 !important;
}

/* 5. Mac Input Panel (#ffffff) */
.th-mac-input-panel {
  height: 150px !important;
  background: #ffffff !important;
  border-top: 1px solid #e7e7e7 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 16px 12px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.th-mac-input-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 24px !important;
  margin-bottom: 4px !important;
}
.th-input-tool-hint {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

.th-mac-input-panel textarea {
  flex: 1 !important;
  border: none !important;
  resize: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  outline: none !important;
  color: #111 !important;
  font-family: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.th-mac-input-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 6px !important;
}

.th-mac-send-btn {
  background: #07c160 !important;
  color: #fff !important;
  border: none !important;
  padding: 6px 18px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  min-height: 28px !important;
  line-height: 1.2 !important;
}
.th-mac-send-btn:hover {
  background: #06ad56 !important;
}

.th-mac-wa-mini-btn {
  background: #25d366 !important;
  color: #fff !important;
  border: none !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: background 0.15s !important;
}
.th-mac-wa-mini-btn:hover {
  background: #20bd5a !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* 6. Modal Dialog (Mac Style) */
.th-mac-modal-dialog {
  border: none !important;
  padding: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: 520px !important;
  background: #fff !important;
}
.th-mac-modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(2px) !important;
}


/* ==========================================================================
   Inquiry Product Card (带货商品咨询卡片样式)
   ========================================================================== */
.th-message-bubble.is-inquiry-card-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 100% !important;
}

.th-inquiry-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  margin: 2px 0 !important;
  max-width: 440px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif !important;
}

.th-inquiry-card-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #edf2f7 !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.th-inquiry-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.th-inquiry-card-icon {
  font-size: 15px !important;
}

.th-inquiry-card-badge {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  letter-spacing: 0.3px !important;
}

.th-inquiry-card-count {
  font-size: 11px !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

.th-inquiry-card-list {
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  background: #fff !important;
}

.th-inquiry-card-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 9px !important;
  background: #fcfcfc !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 6px !important;
  transition: all 0.15s !important;
}
.th-inquiry-card-item:hover {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.th-inquiry-item-thumb {
  width: 42px !important;
  height: 42px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
  background: #fff !important;
}

.th-inquiry-item-no-thumb {
  width: 42px !important;
  height: 42px !important;
  border-radius: 4px !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

.th-inquiry-item-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.th-inquiry-item-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-decoration: none !important;
}
a.th-inquiry-item-name:hover {
  color: #2563eb !important;
  text-decoration: underline !important;
}

.th-inquiry-item-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.th-inquiry-item-sku {
  font-size: 11px !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}

.th-inquiry-item-qty {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: #e2e8f0 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.th-qty-times {
  font-size: 11px !important;
  color: #64748b !important;
  margin-right: 1px !important;
}
.th-qty-num {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #047857 !important;
}

.th-inquiry-card-footer {
  background: #fafafa !important;
  border-top: 1px solid #f1f5f9 !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* 前台访客小窗内的微调适应 */
#th-chat-panel .th-inquiry-card {
  max-width: 100% !important;
  margin: 6px 0 !important;
}
#th-chat-panel .th-message.th-in {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}