/* ==========================================================================
   极致精奢·微晶悬浮流体客服系统 (精准修复：离线状态/长文本截断/移动端靠右)
   ========================================================================== */

/* --- 1. 豪华全局变量与抗闪烁 --- */
#wpcss-widget-root {
  position: fixed;
  bottom: 24px;
  z-index: 999999;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  
  --wpcss-bg-crystal: rgba(255, 255, 255, 0.82);
  --wpcss-bg-blur: blur(35px) saturate(210%);
  --wpcss-border-light: rgba(255, 255, 255, 0.7);
  --wpcss-stroke-fine: rgba(15, 23, 42, 0.04);
  --wpcss-text-main: #0f172a;
  --wpcss-text-muted: #64748b;
  --wpcss-radius-card: 28px;
  --wpcss-radius-bubble: 18px;
  --wpcss-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --wpcss-shadow-luxury: 0 10px 40px rgba(0, 0, 0, 0.02),
                         0 24px 60px rgba(15, 23, 42, 0.08),
                         0 1px 0px rgba(255, 255, 255, 0.6) inset;
}

/* 智能夜间/暗黑模式自动适配 */
@media (prefers-color-scheme: dark) {
  #wpcss-widget-root {
    --wpcss-bg-crystal: rgba(15, 23, 42, 0.75);
    --wpcss-border-light: rgba(255, 255, 255, 0.1);
    --wpcss-stroke-fine: rgba(255, 255, 255, 0.05);
    --wpcss-text-main: #f8fafc;
    --wpcss-text-muted: #94a3b8;
    --wpcss-shadow-luxury: 0 10px 40px rgba(0, 0, 0, 0.2), 0 24px 60px rgba(0, 0, 0, 0.4);
  }
}

#wpcss-widget-root.wpcss-position-right { right: 24px !important; left: auto !important; }
#wpcss-widget-root.wpcss-position-left { left: 24px !important; right: auto !important; }

.wpcss-app, .wpcss-panel, .wpcss-panel * { box-sizing: border-box !important; }

/* 基础重置 */
.wpcss-launcher, .wpcss-submit, .wpcss-secondary, .wpcss-icon-button, .wpcss-upload-clear, .wpcss-preset-question, .wpcss-preset-use {
  border: 0; cursor: pointer; font: inherit; outline: none; background: none; -webkit-tap-highlight-color: transparent;
}

/* --- 2. 悬浮启动器 --- */
.wpcss-launcher {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 120px; min-height: 48px; border-radius: 99px;
  background: linear-gradient(135deg, var(--wpcss-primary, #2563eb), #1d4ed8); color: #fff;
  padding: 0 22px; font-weight: 600; font-size: 13.5px;
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
  transition: all 0.4s var(--wpcss-ease-smooth);
}
.wpcss-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37, 99, 235, 0.3); }


/* --- 3. 主面板与状态栏（精准修复在线/离线状态颜色） --- */
.wpcss-panel {
  display: flex; flex-direction: column; position: relative;
  width: min(380px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 48px)); 
  height: min(640px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid var(--wpcss-border-light);
  border-radius: var(--wpcss-radius-card);
  background: var(--wpcss-bg-crystal);
  box-shadow: var(--wpcss-shadow-luxury);
  backdrop-filter: var(--wpcss-bg-blur);
  -webkit-backdrop-filter: var(--wpcss-bg-blur);
}

.wpcss-panel-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  height: 44px !important; padding: 0 20px !important; background: transparent !important; flex: 0 0 44px !important; z-index: 10;
}

.wpcss-panel-header > div:first-child {
  display: inline-flex !important; flex-direction: row !important; align-items: center !important;
  flex-wrap: nowrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; height: 100% !important;
}
.wpcss-header-copy { flex: 1 1 auto !important; min-width: 0 !important; }
.wpcss-header-subtitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpcss-panel-header > .wpcss-icon-button { flex: 0 0 auto; }

.wpcss-title-line { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; }
.wpcss-panel-header strong { color: var(--wpcss-text-main) !important; font-size: 14px !important; font-weight: 700 !important; }

/* 🎯 状态标签核心重构：彻底分离在线与离线 */
.wpcss-agent-pill {
  display: inline-flex !important; align-items: center !important; gap: 5px !important; border-radius: 99px !important;
  font-size: 10px !important; font-weight: 600 !important; padding: 2px 8px !important; font-style: normal !important;
}

/* 🟢 在线状态：高亮绿 */
.wpcss-panel-header .wpcss-agent-pill {
  background: rgba(16, 185, 129, 0.08) !important; color: #059669 !important; border: 1px solid rgba(16, 185, 129, 0.15) !important;
}
.wpcss-panel-header .wpcss-agent-pill::before {
  content: "" !important; display: inline-block !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; 
  background: #10b981 !important; box-shadow: 0 0 6px rgba(16, 185, 129, 0.6) !important;
}

/* ⚪ 离线/留言状态：优雅灰（精准覆盖，防止被染绿） */
.wpcss-agent-offline .wpcss-agent-pill,
.wpcss-panel-header .wpcss-agent-offline .wpcss-agent-pill {
  background: rgba(148, 163, 184, 0.12) !important; color: #64748b !important; border: 1px solid rgba(148, 163, 184, 0.2) !important;
}
.wpcss-agent-offline .wpcss-agent-pill::before,
.wpcss-panel-header .wpcss-agent-offline .wpcss-agent-pill::before {
  background: #94a3b8 !important; box-shadow: none !important;
}

.wpcss-panel-header > div:first-child > span {
  display: inline-block !important; color: var(--wpcss-text-muted) !important; font-size: 11px !important;
  padding-left: 8px !important; border-left: 1px solid rgba(15, 23, 42, 0.08) !important; 
}

.wpcss-icon-button {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(15, 23, 42, 0.04); color: #475569;
}


/* --- 4. 空间控制与历史会话胶囊（强力注入硬截断，防顶出屏幕） --- */
.wpcss-panel-body {
  display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; overflow: hidden !important; background: rgba(248, 250, 252, 0.15);
}

.wpcss-panel-body > * { order: 99 !important; }
.wpcss-start, .wpcss-thread-view { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; order: 1 !important; }
.wpcss-start { overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wpcss-start::-webkit-scrollbar { width: 0; height: 0; }
.wpcss-thread-view { overflow: hidden !important; padding: 2px 16px 0 !important; width: 100% !important; }

/* 微光流体切换器外壳 */
.wpcss-history-switcher {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important;
  background: rgba(255, 255, 255, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 12px !important; padding: 5px 10px 5px 12px !important; margin-bottom: 10px !important; 
  flex: 0 0 auto !important; width: 100% !important; position: relative !important; overflow: hidden !important;
}

.wpcss-history-switcher span { 
  font-size: 11px !important; color: var(--wpcss-text-muted) !important; font-weight: 600 !important; 
  width: 50px !important; min-width: 50px !important; max-width: 50px !important;
}

/* 🎯 下拉胶囊终极截断修复：硬性锁死宽度，强制单行 ellipsis 展现 */
.wpcss-history-switcher select {
  flex: 1 1 auto !important;
  width: calc(100% - 58px) !important;
  max-width: calc(100% - 58px) !important; /* 核心锁死：绝不允许超过剩余可用像素 */
  min-height: 26px !important; max-height: 26px !important; border: 0 !important;
  background: rgba(255, 255, 255, 0.7) !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 500;
  color: var(--wpcss-text-main) !important; padding: 0 24px 0 10px !important; 
  outline: none !important; cursor: pointer !important;
  appearance: none !important; -webkit-appearance: none !important;
  
  /* ⚡ 强制强制再强制：单行截断三点水 */
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  display: block !important;
}

.wpcss-history-switcher::after {
  content: "▼"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%) scale(0.65);
  color: #94a3b8; pointer-events: none; font-size: 10px; z-index: 5;
}
.wpcss-history-switcher:hover select { background: #fff !important; }

.wpcss-status-summary, .wpcss-service-summary { display: none !important; }


/* --- 5. 对话流与气泡 --- */
.wpcss-messages {
  flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 10px;
  overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding-right: 2px; padding-bottom: 12px;
}
.wpcss-messages::-webkit-scrollbar { width: 4px; }
.wpcss-messages::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.06); border-radius: 99px; }

.wpcss-message { display: flex; flex-direction: column; gap: 4px; animation: wpcssFadeUp 0.35s var(--wpcss-ease-smooth) both; }
@keyframes wpcssFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.wpcss-message-user, .wpcss-message-guest { align-items: flex-end; }
.wpcss-message-agent { align-items: flex-start; }
.wpcss-message-meta { color: #cbd5e1; font-size: 10px; padding: 0 6px; }

.wpcss-message-bubble { max-width: 82%; padding: 11px 15px; font-size: 14px; line-height: 1.52; word-break: break-word; }

.wpcss-message-user .wpcss-message-bubble, .wpcss-message-guest .wpcss-message-bubble {
  background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; 
  border-radius: var(--wpcss-radius-bubble) var(--wpcss-radius-bubble) 4px var(--wpcss-radius-bubble);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}
.wpcss-message-agent .wpcss-message-bubble {
  background: #fff; color: #1e293b; 
  border-radius: var(--wpcss-radius-bubble) var(--wpcss-radius-bubble) var(--wpcss-radius-bubble) 4px;
  border: 1px solid rgba(15, 23, 42, 0.01); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
}

/* 智能连缀 */
.wpcss-message + .wpcss-message-user .wpcss-message-bubble,
.wpcss-message + .wpcss-message-guest .wpcss-message-bubble { border-top-right-radius: 4px !important; }
.wpcss-message + .wpcss-message-agent .wpcss-message-bubble { border-top-left-radius: 4px !important; }


/* --- 6. 图片上传 --- */
.wpcss-message-images { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.wpcss-message-images a { display: block; overflow: hidden; border-radius: 12px; background: rgba(15,23,42,0.03); }
.wpcss-message-images img { display: block; width: 100px; height: 100px; object-fit: cover; }
.wpcss-upload-box { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.wpcss-upload-box input[type="file"] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; }
.wpcss-upload-row { display: flex; align-items: center; gap: 8px; }
.wpcss-upload-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; 
  border: 1px solid rgba(15, 23, 42, 0.05); border-radius: 8px; background: #fff; color: var(--wpcss-text-main); font-size: 11.5px; font-weight: 600; padding: 0 10px;
}
.wpcss-upload-preview { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.wpcss-upload-thumb { width: 42px; height: 42px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.04); overflow: hidden; background: #fff; display: inline-flex; }
.wpcss-upload-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wpcss-upload-hint { white-space: nowrap; }


/* --- 7. 输入控制台 --- */
.wpcss-reply-form {
  flex: 0 0 auto !important; margin: 0 -16px !important; border-top: 1px solid var(--wpcss-stroke-fine) !important;
  background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 12px 16px calc(8px + env(safe-area-inset-bottom, 0px)) !important; display: flex !important; flex-direction: column !important; gap: 10px !important;
}
.wpcss-reply-form textarea {
  width: 100%; min-height: 40px; max-height: 95px; border: 1px solid transparent !important;
  background: rgba(15, 23, 42, 0.035); border-radius: 16px; padding: 10px 14px; font-size: 14px; color: var(--wpcss-text-main); line-height: 1.48; resize: none; outline: none;
}
.wpcss-reply-form textarea:focus { background: #fff; border-color: rgba(37, 99, 235, 0.18) !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.02); }
.wpcss-reply-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wpcss-submit {
  min-height: 34px; min-width: 82px; border-radius: 10px; background: linear-gradient(135deg, var(--wpcss-primary, #2563eb), #1d4ed8); color: #fff;
  font-weight: 600; font-size: 13px; padding: 0 16px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}
.wpcss-secondary { min-height: 34px; border: 1px solid rgba(15, 23, 42, 0.05); border-radius: 10px; background: #fff; color: #475569; font-weight: 600; font-size: 13px; padding: 0 14px; }


/* --- 8. 表单与快捷问题 --- */
.wpcss-form { display: grid; gap: 12px; }
.wpcss-field { display: grid; gap: 4px; color: var(--wpcss-text-muted); font-size: 12px; font-weight: 600; }
.wpcss-field input, .wpcss-field textarea { width: 100%; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; background: #fff; color: var(--wpcss-text-main); padding: 10px 14px; font-size: 13.5px; }
.wpcss-welcome { margin: 0 0 12px; font-size: 13px; background: #fff; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--wpcss-stroke-fine); line-height: 1.45; color: var(--wpcss-text-muted); }
.wpcss-presets { display: grid; gap: 6px; margin-bottom: 10px; }
.wpcss-preset-question { position: relative; width: 100%; min-height: 38px; border: 1px solid transparent; border-radius: 11px; background: #fff; color: var(--wpcss-text-main); font-size: 13px; font-weight: 600; padding: 8px 32px 8px 12px; text-align: left; }
.wpcss-preset-question:hover { background: rgba(255, 255, 255, 0.95); color: var(--wpcss-primary, #2563eb); transform: translateX(3px); }


/* --- 9. 系统通知与图片抽屉 --- */
.wpcss-message-system { align-items: center; }
.wpcss-message-system .wpcss-message-bubble { max-width: 92%; background: rgba(236, 253, 245, 0.85); color: #047857; border: 1px solid rgba(16, 185, 129, 0.04); font-size: 12.5px; border-radius: 12px !important; }

.wpcss-image-drawer {
  position: absolute; inset: 0; z-index: 100; display: flex; align-items: stretch; justify-content: stretch;
  background: rgba(15, 23, 42, 0.78); outline: none;
}
.wpcss-image-drawer-panel {
  position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; padding: 16px; background: transparent;
}
.wpcss-image-drawer-panel > img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.wpcss-image-drawer-head {
  position: absolute; top: 12px; right: 12px; left: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none;
}
.wpcss-image-drawer-head strong { min-width: 0; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
.wpcss-image-drawer-head .wpcss-icon-button {
  flex: 0 0 38px; width: 38px; height: 38px; margin-left: auto; pointer-events: auto;
  border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 50%; background: rgba(15, 23, 42, 0.94); color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38); font-size: 22px; font-weight: 700; line-height: 1;
}
.wpcss-image-drawer-head .wpcss-icon-button:hover { background: #020617; transform: scale(1.05); }
.wpcss-image-drawer-head .wpcss-icon-button:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.72); outline-offset: 2px; }


/* --- 10. 移动端全方位稳固适配（🎯 精准修复：强力锁死靠右对齐） --- */
@media (max-width: 520px) {
  /* 强行锁死靠右，粉碎靠左偏的视觉隐患 */
  #wpcss-widget-root { 
    right: 12px !important; 
    left: auto !important; 
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; 
  }
  
  .wpcss-panel { 
    width: calc(100vw - 24px) !important; 
    max-width: 360px !important; /* 给小屏幕设一个合理的宽度上限 */
    height: calc(100vh - 28px) !important; 
    height: calc(100dvh - 28px) !important; 
    border-radius: 24px !important; 
    margin-left: auto !important; /* 辅助靠右 */
    margin-right: 0 !important;
  }
  
  .wpcss-panel-header { height: 42px !important; flex: 0 0 42px !important; padding: 0 16px !important; }
  .wpcss-thread-view { padding: 2px 14px 0 !important; width: 100% !important; }
  
  .wpcss-history-switcher { padding: 5px 8px 5px 10px !important; margin-bottom: 8px !important; border-radius: 10px !important; width: 100% !important; }
  .wpcss-history-switcher span { width: 48px !important; min-width: 48px !important; max-width: 48px !important; }
  
  /* 移动端下拉框二次锁死截断空间 */
  .wpcss-history-switcher select { 
    width: calc(100% - 56px) !important; 
    max-width: calc(100% - 56px) !important; 
    font-size: 11.5px !important; 
  }
  .wpcss-history-switcher::after { right: 14px; }
  .wpcss-reply-form { margin: 0 -14px !important; padding: 10px 14px calc(6px + env(safe-area-inset-bottom, 0px)) !important; }
}