/* Auto-extracted from admin.py */

/* ── From _DASHBOARD_HTML ── */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#0f172a;color:#e2e8f0;height:100vh;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
/* ── Ripple effect ── */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.2);transform:scale(0);animation:rippleAnim .6s ease-out;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}
.btn,.nav a,.bottom-nav a{position:relative;overflow:hidden}
.btn:active{transform:scale(.96)}
.layout{display:flex;height:100vh}
/* ── Sidebar ── */
.sidebar{width:240px;min-width:240px;background:#1e293b;border-right:1px solid #334155;display:flex;flex-direction:column}
.sidebar .brand{padding:20px 20px 16px;border-bottom:1px solid #334155}
.sidebar .brand h1{font-size:15px;font-weight:700;color:#22d3ee;display:flex;align-items:center;gap:8px}
.sidebar .brand .sub{font-size:11px;color:#475569;margin-top:4px}
.sidebar .nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:12px}
.sidebar .nav a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:500;color:#94a3b8;text-decoration:none;transition:all .15s}
.sidebar .nav a:hover{background:#334155;color:#e2e8f0}
.sidebar .nav a.active{background:#22d3ee15;color:#22d3ee;font-weight:600}
.sidebar .nav a .icon{font-size:18px;width:24px;text-align:center}
.sidebar .nav a .badge{margin-left:auto;font-size:10px;padding:1px 8px;border-radius:99px;background:#334155;color:#94a3b8}
.sidebar .status-bar{padding:12px 20px;border-top:1px solid #334155;font-size:11px;display:flex;align-items:center;gap:8px}
.sidebar .ws-dot{width:8px;height:8px;border-radius:50%;background:#22d3ee}
.sidebar .ws-dot.offline{background:#fb7185}

/* ── Mobile responsive ── */
.hamburger{display:none;background:none;border:none;color:#e2e8f0;font-size:22px;cursor:pointer;padding:4px 8px;border-radius:6px}
.hamburger:hover{background:#334155}
.sidebar-overlay{display:none}
.bottom-nav{display:none}
@media(max-width:768px){
  .hamburger{display:flex;align-items:center;justify-content:center;margin-right:8px}
  .sidebar{position:fixed;top:0;left:-280px;width:280px;min-width:280px;height:100vh;z-index:200;transition:left .25s ease;box-shadow:4px 0 20px rgba(0,0,0,.4)}
  .sidebar.mobile-open{left:0}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199}
  .sidebar-overlay.show{display:block}
  .topbar{padding:12px 16px}
  .topbar h2{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .actions button,.topbar .actions select{font-size:11px;padding:5px 10px}
  .content{padding:12px}
  .wx-layout{flex-direction:column}
  .wx-sidebar{width:100%!important;min-width:auto!important;max-height:40vh;border-right:none!important}
  .wx-detail{display:none!important}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:56px;background:#1e293b;border-top:1px solid #334155;z-index:150;justify-content:space-around;align-items:center;padding:0 4px;padding-bottom:env(safe-area-inset-bottom,0)}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border-radius:8px;color:#64748b;text-decoration:none;font-size:10px;transition:all .15s;min-width:0;flex:1}
  .bottom-nav a.active{color:#22d3ee}
  .bottom-nav a .icon{font-size:18px}
  .layout{height:calc(100vh - 56px)}
  .main{padding-bottom:56px}
  .card-grid.c4{grid-template-columns:repeat(2,1fr)}
  .card-grid.c3{grid-template-columns:repeat(2,1fr)}
  .card-grid.c2{grid-template-columns:1fr}
  .filter-bar{flex-wrap:wrap}
  .filter-bar select,.filter-bar input{width:100%!important;font-size:13px}
  .modal{width:92vw!important;max-width:92vw!important}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{font-size:12px}
  .table-wrap table th,.table-wrap table td{white-space:nowrap;padding:6px 8px}
  .btn{padding:6px 12px!important;font-size:12px!important}
  .btn-sm{font-size:10px!important;padding:4px 8px!important}
  .data-table{font-size:12px}
  .data-table th,.data-table td{padding:6px 8px}
}
@media(min-width:769px)and(max-width:1024px){
  .sidebar{width:200px;min-width:200px}
  .sidebar .nav a{font-size:12px;padding:8px 12px}
  .content{padding:16px}
  .card-grid.c4{grid-template-columns:repeat(3,1fr)}
  .modal{max-width:80vw!important}
}

/* ── Mobile card table (Phase 2) ── */
@media(max-width:768px){
  .table-wrap table.data-table{display:block;border-collapse:separate;border-spacing:0 8px}
  .table-wrap table.data-table thead{display:none!important}
  .table-wrap table.data-table tbody,.table-wrap table.data-table tr{display:block;width:100%}
  .table-wrap table.data-table tr{background:#1e293b;border-radius:10px;border:1px solid #334155;padding:12px 14px;margin-bottom:8px;position:relative}
  .table-wrap table.data-table tr:hover td{background:transparent!important}
  .table-wrap table.data-table td{display:flex;justify-content:space-between;align-items:center;padding:6px 0!important;border-bottom:1px solid #1e293b;font-size:12px;white-space:normal!important;word-break:break-all}
  .table-wrap table.data-table td:last-child{border-bottom:none}
  .table-wrap table.data-table td:before{content:attr(data-label);font-size:10px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-right:8px;flex-shrink:0;min-width:60px;text-align:left}
  .table-wrap table.data-table td[data-hide-label="true"]:before{display:none}
  .table-wrap table.data-table td[data-align="right"]{justify-content:flex-end}
  .table-wrap table.data-table td button,.table-wrap table.data-table td .btn{font-size:11px!important;padding:4px 10px!important;min-height:28px}
  .table-wrap table.data-table tr td:first-child{padding-top:0!important}
  .table-wrap table.data-table tr td:last-child{padding-bottom:0!important}
  .table-wrap table.data-table .card-id{position:absolute;top:6px;right:10px;font-size:9px;color:#475569;border:none!important;padding:0!important}
  .table-wrap table.data-table .card-id:before{display:none}
}

/* ── Settings page responsive grids ── */
@media(max-width:768px){
  .settings-grid-3{grid-template-columns:1fr!important}
  .settings-grid-2{grid-template-columns:1fr!important}
}

/* ── Mobile fullscreen modal (Phase 3) ── */
@media(max-width:768px){
  .modal-overlay,.wc-modal-overlay{align-items:flex-end!important;background:#00000090!important}
  .modal,.wc-modal{width:100vw!important;max-width:100vw!important;max-height:92dvh!important;border-radius:16px 16px 0 0!important;padding:20px!important;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;animation:modalSlideUp .3s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .modal h3,.wc-modal h3{font-size:15px!important}
  .modal .form-grid,.wc-modal .form-grid{gap:12px!important}
  .modal .form-group label,.wc-modal .form-group label{font-size:11px!important}
  .modal .form-group input,.modal .form-group select,.modal .form-group textarea,
  .wc-modal .form-group input,.wc-modal .form-group select,.wc-modal .form-group textarea{font-size:14px!important;padding:12px 14px!important;min-height:44px}
  .modal .btn,.wc-modal .btn{padding:10px 16px!important;font-size:13px!important;min-height:40px}
  .modal .btn-primary,.modal .btn-danger{width:100%!important}
  .modal .btn-outline{flex:1!important}
  .modal .btn-group{display:flex!important;gap:8px!important;margin-top:16px!important;position:sticky!important;bottom:0!important;background:#1e293b!important;padding:12px 0 0!important}
}
@keyframes modalSlideUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
@keyframes modalSlideDown{
  from{transform:translateY(0)}
  to{transform:translateY(100%)}
}
/* ── Main ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:#1e293b;border-bottom:1px solid #334155}
.topbar h2{font-size:16px;font-weight:600}
.topbar .actions{display:flex;gap:8px;position:relative}
.topbar .actions button,.topbar .actions select{padding:6px 14px;border-radius:6px;border:1px solid #334155;background:transparent;color:#e2e8f0;font-size:12px;cursor:pointer}
.topbar .actions select{background:#0f172a}
.content{flex:1;overflow-y:auto;padding:24px}
/* ── Cards ── */
.card{background:#1e293b;border-radius:12px;border:1px solid #334155;padding:20px}
.card-grid{display:grid;gap:16px;margin-bottom:24px}
.card-grid.c4{grid-template-columns:repeat(4,1fr)}
.card-grid.c3{grid-template-columns:repeat(3,1fr)}
.card-grid.c2{grid-template-columns:repeat(2,1fr)}
.stat-card{background:#1e293b;border-radius:12px;border:1px solid #334155;padding:20px}
.stat-card .label{font-size:12px;color:#64748b;font-weight:500}
.stat-card .value{font-size:28px;font-weight:700;margin-top:4px}
.stat-card .sub{font-size:11px;color:#475569;margin-top:4px}
.stat-card.cyan .value{color:#22d3ee}
.stat-card.emerald .value{color:#34d399}
.stat-card.violet .value{color:#a78bfa}
.stat-card.amber .value{color:#fbbf24}
.stat-card.rose .value{color:#fb7185}
/* ── Tables ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 12px;color:#64748b;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #334155}
td{padding:10px 12px;border-bottom:1px solid #1e293b}
tr:hover td{background:#33415530}
.state-tag{display:inline-block;padding:2px 10px;border-radius:99px;font-size:11px;font-weight:500}
.state-tag.init{background:#64748b20;color:#94a3b8}
.state-tag.greeting{background:#22d3ee20;color:#22d3ee}
.state-tag.collecting{background:#fbbf2420;color:#fbbf24}
.state-tag.recommending{background:#34d39920;color:#34d399}
.state-tag.ready_to_close{background:#a78bfa20;color:#a78bfa}
.state-tag.quoted{background:#fb923c20;color:#fb923c}
.state-tag.contract_sent{background:#fb718520;color:#fb7185}
.state-tag.closed{background:#34d39940;color:#34d399}
.state-tag.lost{background:#dc262640;color:#fb7185}
.state-tag.abandoned{background:#47556940;color:#94a3b8}
.score-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
.score-tag.a{background:#34d39930;color:#34d399}
.score-tag.b{background:#22d3ee30;color:#22d3ee}
.score-tag.c{background:#fbbf2430;color:#fbbf24}
.score-tag.d{background:#dc262630;color:#fb7185}
/* ═══════════════════════════════════════════════════════
   微信电脑版 2026 · 对话窗口 (站点暗色主题)
   三栏布局 / 头像列表 / 气泡消息 / 结构化工具栏
   ═══════════════════════════════════════════════════════ */

/* ── 全局 · 三栏结构 ── */
.wx-layout{display:flex;height:calc(100vh - 100px);margin:-24px;overflow:hidden;background:#0a0f18}

/* ═══ 左侧 · 会话列表 280px ═══ */
.wx-sidebar{width:280px;min-width:280px;display:flex;flex-direction:column;background:#0f172a;border-right:1px solid #1e293b}
.wx-sidebar-hd{padding:12px;flex-shrink:0;background:#0f172a;border-bottom:1px solid #1e293b}
.wx-search-box{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#1e293b;border-radius:4px;border:1px solid #334155}
.wx-search-box .wx-search-icon{color:#64748b;flex-shrink:0}
.wx-search-box input{flex:1;border:none;background:transparent;outline:none;font-size:12px;color:#e2e8f0}
.wx-search-box input::placeholder{color:#64748b}
.wx-sidebar-list{flex:1;overflow-y:auto}
.wx-sidebar-list::-webkit-scrollbar{width:4px}
.wx-sidebar-list::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}

.wx-conv-item{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(148,163,184,.04)}
.wx-conv-item:hover{background:rgba(51,65,85,.4)}
.wx-conv-item.active{background:rgba(34,211,238,.08);border-left:3px solid #22d3ee}
.wx-conv-avatar{width:38px;height:38px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600;flex-shrink:0}
.wx-conv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wx-conv-top{display:flex;justify-content:space-between;align-items:center}
.wx-conv-name{font-size:13px;font-weight:500;color:#e2e8f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-conv-time{font-size:10px;color:#64748b;flex-shrink:0;margin-left:6px}
.wx-conv-bot{display:flex;align-items:center;gap:6px}
.wx-conv-msg{font-size:11px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.wx-conv-meta{font-size:10px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ 中间 · 聊天主区域 ═══ */
.wx-main{flex:1;display:flex;flex-direction:column;min-width:0;background:#0f172a}

/* 聊天头部 */
.wx-chat-hd{display:flex;align-items:center;gap:10px;padding:10px 20px;background:#1e293b;border-bottom:1px solid #334155;flex-shrink:0;min-height:50px;box-sizing:border-box}
.wx-chat-name{font-size:14px;font-weight:600;color:#e2e8f0;white-space:nowrap}
.wx-chat-state{font-size:10px;padding:2px 8px;border-radius:3px;font-weight:500;flex-shrink:0}
.wx-chat-hd-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.wx-chat-meta{font-size:11px;color:#94a3b8;white-space:nowrap}

/* 消息区域 */
.wx-chat-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px;background:#0a0f18}
.wx-chat-body::-webkit-scrollbar{width:5px}
.wx-chat-body::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}

/* 空状态 */
.wx-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:#475569}
.wx-empty-icon{font-size:40px;margin-bottom:10px;opacity:.5}
.wx-empty-text{font-size:13px;color:#64748b}

/* ── 消息气泡 ── */
.wx-chat-body .msg{max-width:60%;padding:9px 13px;border-radius:4px;font-size:13px;line-height:1.6;position:relative;word-break:break-word;animation:msgIn .25s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.wx-chat-body .msg.customer{align-self:flex-start;background:#1e293b;border:1px solid #334155;color:#e2e8f0}
.wx-chat-body .msg.customer::after{content:'';position:absolute;left:-7px;top:10px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:7px solid #1e293b}
.wx-chat-body .msg.ai{align-self:flex-end;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.2);color:#e2e8f0}
.wx-chat-body .msg.ai::after{content:'';position:absolute;right:-7px;top:10px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid rgba(34,211,238,.12)}
.wx-chat-body .msg.human{align-self:flex-end;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.2);color:#e2e8f0}
.wx-chat-body .msg.human::after{content:'';position:absolute;right:-7px;top:10px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid rgba(168,85,247,.12)}
.wx-chat-body .msg.agent{align-self:flex-end;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.2);color:#e2e8f0}
.wx-chat-body .msg.agent::after{content:'';position:absolute;right:-7px;top:10px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid rgba(245,158,11,.12)}
.wx-chat-body .msg .hdr{font-size:10px;font-weight:600;margin-bottom:2px;color:#64748b}
.wx-chat-body .msg.ai .hdr{color:#22d3ee}
.wx-chat-body .msg.human .hdr{color:#a78bfa}
.wx-chat-body .msg .time{font-size:10px;color:#475569;margin-top:4px;text-align:right}
.wx-chat-body .msg .delivery-failed{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:#fb7185;margin-top:3px;cursor:help}
.wx-chat-body .msg .delivery-failed .delivery-err{display:none;position:absolute;background:#1e293b;border:1px solid #fb7185;color:#fb7185;font-size:10px;padding:4px 8px;border-radius:4px;max-width:200px;white-space:normal;word-break:break-all;z-index:10;bottom:100%;left:0;margin-bottom:4px}
.wx-chat-body .msg .delivery-failed:hover .delivery-err{display:block}
.wx-chat-body .msg .msg-media{margin:4px 0;overflow:hidden;border-radius:3px}
.wx-chat-body .msg .msg-media img,.wx-chat-body .msg .msg-media video{max-width:240px;max-height:200px;border-radius:3px;display:block}
.wx-chat-body .msg .msg-media video{background:#000;min-height:100px}

/* ── 消息头像 ── */
.wx-chat-body .msg-row{display:flex;align-items:flex-start;gap:8px}
.wx-chat-body .msg-row.msg-left{justify-content:flex-start}
.wx-chat-body .msg-row.msg-right{justify-content:flex-end}
.wx-chat-body .msg-avatar{width:30px;height:30px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;align-self:flex-start;margin-top:2px}
.wx-chat-body .msg-avatar-customer{background:#334155;color:#94a3b8}
.wx-chat-body .msg-avatar-ai{background:rgba(34,211,238,.15);color:#22d3ee;order:1}
.wx-chat-body .msg-avatar-human{background:rgba(168,85,247,.15);color:#a78bfa;order:1}
.wx-chat-body .msg-avatar-agent{background:rgba(245,158,11,.15);color:#f59e0b;order:1}
.wx-chat-body .msg-row .msg{max-width:55%}

/* ── 会话列表标签 ── */
.wx-conv-tag{font-size:12px;padding:1px 6px;border-radius:3px;flex-shrink:0;font-weight:500;line-height:1.4}

/* ═══ 底部 · 输入区域 ═══ */
.wx-chat-ft{flex-shrink:0;background:#0f172a;border-top:1px solid #1e293b;padding:10px 16px 12px;position:relative}
.wx-input-box{display:flex;flex-direction:column;gap:6px;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:8px 12px 6px;transition:border-color .2s,box-shadow .2s}
.wx-input-box:focus-within{outline:none}
.wx-input-box textarea{width:100%;padding:4px 0;border:none;background:transparent;color:#e2e8f0;font-size:13px;resize:none;font-family:inherit;outline:none;min-height:70px;max-height:120px;line-height:1.5;box-sizing:border-box}
.wx-input-box textarea::placeholder{color:#64748b;font-size:12px}
.wx-input-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wx-input-tools{display:flex;align-items:center;gap:4px}
.wx-tool-btn{display:inline-flex;align-items:center;gap:3px;height:28px;border:none;background:transparent;color:#94a3b8;cursor:pointer;border-radius:6px;transition:all .15s;padding:0 8px;font-family:inherit;white-space:nowrap}
.wx-tool-btn:hover{background:#334155;color:#e2e8f0}
.wx-input-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.wx-channel-sel{padding:4px 8px;border-radius:5px;border:1px solid #334155;background:#0f172a;color:#cbd5e1;font-size:11px;cursor:pointer;outline:none;transition:border-color .15s;font-family:inherit}
.wx-channel-sel:focus{border-color:#22d3ee}
.wx-human-btn{padding:5px 10px;border-radius:5px;border:1px solid #334155;background:#0f172a;color:#94a3b8;font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap;font-weight:500;font-family:inherit}
.wx-human-btn:hover{background:#334155;color:#e2e8f0}
.wx-human-btn.active-mode{background:#22d3ee;color:#0f172a;border-color:#22d3ee;font-weight:600}
.wx-human-btn:disabled{opacity:.5;cursor:not-allowed}
.wx-mode-indicator{font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;white-space:nowrap;transition:all .2s}
.wx-mode-indicator.ai{background:rgba(34,211,238,.12);color:#22d3ee;border:1px solid rgba(34,211,238,.2)}
.wx-mode-indicator.human{background:rgba(168,85,247,.12);color:#a78bfa;border:1px solid rgba(168,85,247,.2)}
.wx-send-btn{padding:6px 16px;border-radius:5px;border:none;background:#22d3ee;color:#0f172a;font-size:12px;cursor:pointer;transition:all .15s;white-space:nowrap;font-weight:600;font-family:inherit}
.wx-send-btn:hover{background:#38dff8;transform:translateY(-1px);box-shadow:0 2px 10px rgba(34,211,238,.25)}

/* 表情面板 */
.emoji-picker{display:none;position:absolute;bottom:100%;left:18px;width:320px;background:#1e293b;border:1px solid #334155;border-radius:10px;padding:10px;max-height:240px;overflow-y:auto;flex-wrap:wrap;gap:4px;box-shadow:0 -4px 24px rgba(0,0,0,.5);z-index:50;margin-bottom:8px}
.emoji-picker.open{display:flex}
.emoji-picker span{cursor:pointer;font-size:23px;padding:6px;border-radius:6px;transition:background .15s,transform .15s;line-height:1;user-select:none}
.emoji-picker span:hover{background:#334155;transform:scale(1.2)}
.emoji-picker::-webkit-scrollbar{width:4px}
.emoji-picker::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}

/* 文件预览 · 输入框上方 */
#filePreview{display:none;padding:8px 14px;margin-bottom:8px;font-size:12px;color:#94a3b8;align-items:center;gap:8px;background:#1e293b;border-radius:8px;border:1px solid #334155;justify-content:space-between}
#filePreview.show{display:flex}
#filePreview>div{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow:hidden}
#filePreview .fp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#e2e8f0;flex:1;min-width:0}
#filePreview .fp-size{font-size:11px;color:#64748b;flex-shrink:0}
#filePreview button{background:rgba(251,113,133,.15);border:1px solid rgba(251,113,133,.25);color:#fb7185;cursor:pointer;font-size:11px;padding:3px 10px;border-radius:4px;font-weight:500;flex-shrink:0;transition:all .15s}
#filePreview button:hover{background:rgba(251,113,133,.25);color:#f87171}
.fp-spin{display:none}
.fp-spin.show{display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 上传进度 */
.upload-progress{font-size:11px;color:#94a3b8;padding:4px 0;display:flex;align-items:center;gap:4px}
.upload-spin{animation:spin .8s linear infinite;display:inline-block}

/* ═══ 右侧 · 客户详情 260px ═══ */
.wx-detail{width:260px;min-width:260px;border-left:1px solid #1e293b;display:flex;flex-direction:column;overflow-y:auto;background:#0f172a;font-size:12px}
.wx-detail::-webkit-scrollbar{width:4px}
.wx-detail::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}
.wx-detail-sec{padding:12px 14px;border-bottom:1px solid #1e293b;flex-shrink:0}
.wx-detail-sec-title{font-size:12px;font-weight:600;color:#e2e8f0;margin-bottom:8px;display:flex;align-items:center;gap:4px}
.wx-detail-sec-desc{font-size:11px;color:#94a3b8;line-height:1.5;margin-top:4px}
.wx-detail-btn{font-size:10px;padding:4px 10px;border-radius:4px;border:1px solid #334155;background:#1e293b;color:#94a3b8;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit}
.wx-detail-btn:hover{background:#334155;color:#e2e8f0;border-color:#475569}
.wx-detail-btn.active{background:rgba(34,211,238,.12);color:#22d3ee;border-color:rgba(34,211,238,.25)}
.wx-tab-bar{display:flex;border-bottom:1px solid #1e293b;margin-bottom:4px}
.wx-tab{flex:1;padding:7px 4px;font-size:11px;font-weight:500;border:none;background:transparent;color:#64748b;cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;font-family:inherit}
.wx-tab.active{color:#22d3ee;border-bottom-color:#22d3ee}
.wx-tab:hover{color:#94a3b8}
.wx-tab-content{padding:6px 0}
.wx-tab-content input,.wx-tab-content select{border-radius:4px;border:1px solid #334155;background:#1e293b;color:#e2e8f0;font-size:11px;outline:none;transition:border-color .15s;box-sizing:border-box;padding:5px 8px}
.wx-tab-content input:focus,.wx-tab-content select:focus{border-color:#22d3ee}
#scoreBadge{font-size:18px;font-weight:700;padding:2px 8px;border-radius:3px;display:inline-block}
#scoreDimensions{gap:4px !important;margin-top:8px !important}
/* ── Knowledge Form ── */
.form-grid{display:grid;gap:16px}
/* ── Modal base ── */
.modal-overlay{position:fixed;inset:0;background:#00000070;display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(2px)}
.modal{background:#1e293b;border-radius:14px;border:1px solid #33415560;width:600px;max-width:92vw;max-height:88vh;overflow-y:auto;padding:28px 24px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal h3{font-size:16px;font-weight:600;margin:0;color:#e2e8f0}

/* ── Form layout ── */
.form-body{display:flex;flex-direction:column;gap:18px}
.form-body-inner{display:flex;flex-direction:column;gap:16px}
.form-group{display:flex;flex-direction:column;gap:5px;margin:0}
.form-group label{font-size:12px;font-weight:500;color:#94a3b8}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-section{display:flex;flex-direction:column;gap:12px;border-top:1px solid #1e3a5f;padding-top:16px}
.form-section-title{font-size:11px;font-weight:600;color:#94a3b8;display:flex;align-items:center;gap:6px;letter-spacing:.5px;text-transform:uppercase}
.form-actions{display:flex;gap:10px;margin-top:4px}
.form-actions .btn{flex:1;padding:11px 16px;font-size:13px;font-weight:600;border-radius:8px}

/* ── Unified inputs ── */
.form-input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:13px;outline:none;font-family:inherit;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.form-input:focus{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.1)}
.form-input::placeholder{color:#475569}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%2394a3b8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
textarea.form-input{resize:vertical;min-height:56px}
.form-input[readonly]{background:#111c2b;color:#22d3ee;font-family:monospace;font-size:11px;cursor:default}
.form-input[disabled]{opacity:.45;cursor:not-allowed}

/* ── Labels & hints ── */
.form-label{display:block;font-size:12px;font-weight:500;color:#94a3b8;margin-bottom:5px}
.form-label .required{color:#fb7185;margin-left:1px;font-weight:700}
.form-hint{font-size:10px;color:#64748b;margin-top:4px;line-height:1.5}
.form-hint.warn{color:#fbbf24}

/* ── Role card (locked role display) ── */
.role-card{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#1a2740,#152030);border-radius:10px;border:1px solid #2a4a6a}
.role-card .role-icon{font-size:20px;flex-shrink:0}
.role-card .role-name{color:#60a5fa;font-weight:600;font-size:13px}
.role-card .role-desc{color:#64748b;font-size:11px;margin-left:auto}

/* ── Status msg ── */
.form-status{font-size:12px;min-height:20px;text-align:center;line-height:20px}

/* ── Modal header ── */
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.modal-header .btn-close{background:none;border:none;color:#64748b;cursor:pointer;font-size:20px;padding:4px 8px;border-radius:6px;line-height:1;transition:color .15s}
.modal-header .btn-close:hover{color:#e2e8f0}
/* ── Funnel ── */
.funnel{display:flex;flex-direction:column;gap:6px}
.funnel .bar-wrap{display:flex;align-items:center;gap:12px}
.funnel .bar-wrap .label{width:120px;font-size:12px;color:#94a3b8;text-align:right}
.funnel .bar-wrap .bar{height:24px;border-radius:6px;transition:width .5s;min-width:4px}
.funnel .bar-wrap .count{font-size:12px;color:#64748b;min-width:30px}
.source-tag{display:inline-block;padding:1px 8px;border-radius:99px;font-size:10px;font-weight:500}
.source-tag.whatsapp{background:#25D36620;color:#25D366}
.source-tag.web_chat{background:#22d3ee20;color:#22d3ee}
.source-tag.landing_page{background:#a78bfa20;color:#a78bfa}
.source-tag.test{background:#fbbf2420;color:#fbbf24}
.modal-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:13px;outline:none;transition:border-color .2s;font-family:inherit;box-sizing:border-box}.modal-input:focus{border-color:#22d3ee}select.modal-input{cursor:pointer}textarea.modal-input{resize:vertical}


/* ── From _DASHBOARD_HTML ── */
.kanban-card {
        background:#0f172a;border-radius:8px;border:1px solid #334155;padding:10px 12px;cursor:grab;transition:opacity .15s,box-shadow .15s,transform .1s;
      }
      .kanban-card:hover { border-color:#475569; }
      .kanban-card.dragging { opacity:0.4; box-shadow:0 0 0 2px #22d3ee; }
      .kanban-drop-zone { transition:background .15s,border-color .15s; border:2px dashed transparent; border-radius:8px; min-height:60px; }
      .kanban-drop-zone.drop-zone-active { background:#22d3ee10; border-color:#22d3ee; }


/* ── From _DASHBOARD_HTML ── */
${modalStyle}


/* ── From _LANDING_HTML ── */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh;display:flex;flex-direction:column}
.hero{text-align:center;padding:80px 24px 40px;max-width:600px;margin:0 auto}
.hero .logo{font-size:48px;margin-bottom:16px}
.hero h1{font-size:32px;font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg,#22d3ee,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{color:#94a3b8;font-size:16px;line-height:1.6;margin-top:12px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:600px;margin:24px auto 0;padding:0 24px}
.feature{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:16px;text-align:center}
.feature .icon{font-size:24px;margin-bottom:6px}
.feature .label{font-size:12px;color:#94a3b8;font-weight:500}
.page-form-section{max-width:480px;margin:32px auto 60px;padding:0 24px;width:100%}
.form-card{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:32px}
.form-card h2{font-size:20px;font-weight:700;margin-bottom:4px}
.form-card .sub{color:#64748b;font-size:14px;margin-bottom:24px}
.form-group textarea{min-height:100px;resize:vertical}

/* ── Modal form refinements ── */
.modal .form-section{border-top-color:#2a3a55;padding-top:18px}
.modal .form-section-title{font-size:11px;letter-spacing:.6px}
.modal .role-card{padding:14px 18px;border-radius:12px}
.modal .form-actions{position:sticky;bottom:0;background:#1e293b;padding-top:12px;margin-top:8px;border-top:1px solid #1e3a5f;z-index:1}
.modal .form-actions .btn-outline{background:#1e293b;border-color:#475569;color:#94a3b8}
.modal .form-actions .btn-outline:hover{background:#334155;color:#e2e8f0}
.btn-submit{width:100%;padding:14px;border-radius:10px;border:none;background:linear-gradient(135deg,#22d3ee,#0891b2);color:#0f172a;font-size:16px;font-weight:700;cursor:pointer;transition:opacity .2s;margin-top:8px}
.btn-submit:hover{opacity:.9}
.btn-submit:disabled{opacity:.5;cursor:not-allowed}
.status{text-align:center;margin-top:16px;font-size:14px;min-height:24px}
.status.success{color:#34d399}
.status.error{color:#fb7185}
.status.loading{color:#22d3ee}
.footer{text-align:center;padding:24px;color:#475569;font-size:12px;margin-top:auto}
@media(max-width:640px){.hero{padding:48px 20px 24px}.hero h1{font-size:26px}.features{grid-template-columns:1fr}}


/* ── modalStyle ── */
.wc-modal-overlay{position:fixed;inset:0;background:#00000060;display:flex;align-items:center;justify-content:center;z-index:100}
    .wc-modal{background:#1e293b;border-radius:12px;border:1px solid #334155;width:520px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:24px}
    .wc-modal h3{font-size:16px;font-weight:600;margin-bottom:16px}

/* ── Skeleton Loading (Linear/Notion style) ── */
@keyframes sk-shimmer {
  0% { background-position: -200% 0 }
  100% { background-position: 200% 0 }
}
.sk-container {
  padding: 4px 0;
  overflow: hidden;
}
.sk-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px;
  border-bottom: 1px solid #0f172a;
}
.sk-row:last-child { border-bottom: none; }
.sk {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  display: inline-block;
  line-height: 1;
  animation: sk-shimmer 1.5s ease-in-out infinite;
  min-height: 14px;
}
.sk-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sk-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  overflow: hidden;
}
.sk-card .sk-row { padding: 8px 0; border-bottom: none; }
.sk-pill {
  display: inline-block;
  height: 14px;
  border-radius: 99px;
}
.sk-avatar-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.sk-avatar-line .sk-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-full {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
}
.sk-card-grid {
  display: grid;
  gap: 16px;
}
.sk-card-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.sk-card-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.sk-card-grid.c1 { grid-template-columns: 1fr; }
@media(max-width:768px) {
  .sk-card-grid.c3 { grid-template-columns: 1fr; }
  .sk-card-grid.c2 { grid-template-columns: 1fr; }
}

/* ── Enhanced skeleton variants ── */
.sk-page-loading {
  padding: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.sk-header-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.sk-header-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sk-header-block .sk {
  height: 20px;
}

.sk-header-btn .sk {
  width: 90px;
  height: 34px;
  border-radius: 8px;
}

.sk-subtitle .sk {
  height: 12px;
  width: 220px;
}

.sk-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.sk-stat-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sk-stat-card .sk:nth-child(1) { width: 40%; height: 11px; }
.sk-stat-card .sk:nth-child(2) { width: 60%; height: 22px; }

.sk-card-block {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sk-card-block .sk-row { padding: 8px 0; }

@media(max-width:768px) {
  .sk-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .sk-page-loading { padding: 16px; }
}

/* ── Page error state ── */
.sk-error {
  text-align: center;
  padding: 60px 20px;
  background: #1e293b;
  border: 1px solid #fb718530;
  border-radius: 12px;
  margin: 24px auto;
  max-width: 480px;
}

.sk-error-icon {
  font-size: 42px;
  margin-bottom: 12px;
}

.sk-error-title {
  color: #e2e8f0;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.sk-error-msg {
  color: #94a3b8;
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.sk-error .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Unified Confirm Dialog ── */
.confirm-dialog {
  z-index: 10000 !important;
}
.confirm-modal {
  max-width: 440px;
  text-align: left;
  animation: confirmFadeIn .2s ease;
}
.confirm-modal h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}
.confirm-modal .confirm-text {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 20px;
}
.confirm-modal .confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.confirm-modal .confirm-actions .btn {
  font-size: 13px;
  min-width: 80px;
}
.confirm-modal .confirm-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

/* ── Toast notification ── */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: toastSlideIn .3s ease, toastFadeOut .3s ease forwards;
  animation-duration: .3s, .3s;
  animation-delay: 0s, 2.5s;
  pointer-events: auto;
  max-width: 360px;
}
.toast.success { border-color: #34d39930; }
.toast.success .toast-icon { color: #34d399; }
.toast.error { border-color: #fb718530; }
.toast.error .toast-icon { color: #fb7185; }
.toast.warning { border-color: #fbbf2430; }
.toast.warning .toast-icon { color: #fbbf24; }
.toast.info { border-color: #22d3ee30; }
.toast.info .toast-icon { color: #22d3ee; }
.toast .toast-icon { font-size: 18px; flex-shrink: 0; }
.toast .toast-close {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 14px;
  padding: 0 0 0 8px;
  flex-shrink: 0;
}
@keyframes confirmFadeIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ── Notification bell ── */
.notification-bell-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .15s;
  margin-right: 4px;
}
.notification-bell-wrapper:hover { background: #334155; }
.notification-bell { font-size: 18px; line-height: 1; }

/* ── Batch operations bar ── */
.batch-bar{display:none;align-items:center;gap:10px;padding:10px 14px;background:#1e293b;border:1px solid #22d3ee40;border-radius:10px;margin-bottom:12px;flex-wrap:wrap}
.batch-bar.show{display:flex}
.batch-bar .count{font-size:13px;font-weight:600;color:#22d3ee;white-space:nowrap}
.batch-bar .sep{width:1px;height:20px;background:#334155}
.batch-bar .btn{font-size:12px;padding:6px 14px}
.lead-checkbox{width:16px;height:16px;cursor:pointer;accent-color:#22d3ee}
th .lead-checkbox{margin:0}
.lead-checkbox-wrap{display:flex;align-items:center;justify-content:center;min-width:28px}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px #1e293b;
  pointer-events: none;
}

/* ── Notification dropdown panel ── */
.notification-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 380px;
  max-height: 480px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 300;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: panelSlideIn .2s ease;
}
.notification-panel.open { display: flex; }
.notification-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #334155;
  flex-shrink: 0;
}
.notification-panel-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
}
.notification-panel-header .actions {
  display: flex;
  gap: 8px;
}
.notification-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid #0f172a;
}
.notification-item:hover { background: #33415530; }
.notification-item.unread { background: #22d3ee08; }
.notification-item.unread:hover { background: #22d3ee15; }
.notification-item .notif-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.notification-item .notif-body { flex: 1; min-width: 0; }
.notification-item .notif-title { font-size: 13px; font-weight: 500; color: #e2e8f0; }
.notification-item .notif-msg { font-size: 11px; color: #64748b; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notification-item .notif-time { font-size: 10px; color: #475569; margin-top: 4px; }
.notification-item .notif-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22d3ee;
  flex-shrink: 0; margin-top: 6px;
}
.notification-item.read .notif-dot { background: transparent; }
.notification-panel-empty {
  text-align: center;
  padding: 40px 20px;
  color: #475569;
  font-size: 13px;
}
.notification-panel-footer {
  padding: 10px 16px;
  border-top: 1px solid #334155;
  text-align: center;
  flex-shrink: 0;
}

@keyframes panelSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Notification page ── */
.notif-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.notif-page-header h3 { font-size: 16px; font-weight: 600; }
.notif-list { display: flex; flex-direction: column; gap: 1px; }
.notif-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: #1e293b;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.notif-card:hover { background: #334155; }
.notif-card.unread { border-left: 3px solid #22d3ee; }
.notif-card .notif-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.notif-card .notif-body { flex: 1; min-width: 0; }
.notif-card .notif-title { font-size: 14px; font-weight: 500; color: #e2e8f0; }
.notif-card .notif-msg { font-size: 12px; color:#94a3b8; margin-top: 4px; }
.notif-card .notif-time { font-size: 11px; color:#475569; margin-top: 6px; }
.notif-card .notif-delete {
  font-size: 12px; color: #475569; cursor: pointer; padding: 4px 8px;
  border-radius: 4px; transition: all .15s; align-self: flex-start;
}
.notif-card .notif-delete:hover { color: #fb7185; background: #dc262615; }

@media(max-width:768px){
  .notification-panel { width: calc(100vw - 32px); right: -8px; max-height: 60vh; }
  .notification-bell-wrapper { padding: 6px 8px; }
}

/* ── Team collaboration mobile ── */
@media(max-width:768px){
  .team-two-col{grid-template-columns:1fr!important}
  .team-filter-bar{flex-direction:column!important;align-items:stretch!important}
  .team-filter-bar select{width:100%!important}
  .team-stat-row{grid-template-columns:repeat(2,1fr)!important}
}
@media(min-width:769px){
  .team-two-col{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px}
}

/* ── Conversations · 微信桌面布局 (兼容旧类名) ── */
.chat-area{flex:1;display:flex;flex-direction:row;overflow:hidden}

/* ═══ 旧类名兼容 ═══ */
.chat-msgs .msg{max-width:80%;padding:10px 14px;border-radius:4px;font-size:13px;line-height:1.5;word-break:break-word}
.chat-msgs .msg.customer{background:#1e293b;align-self:flex-start;border:1px solid #334155;color:#e2e8f0}
.chat-msgs .msg.ai{background:rgba(34,211,238,.12);align-self:flex-end;border:1px solid rgba(34,211,238,.2);color:#e2e8f0}
.chat-msgs .msg.human{background:rgba(168,85,247,.12);align-self:flex-end;border:1px solid rgba(168,85,247,.2);color:#e2e8f0}
.chat-msgs .msg.agent{background:rgba(245,158,11,.12);align-self:flex-end;border:1px solid rgba(245,158,11,.2);color:#e2e8f0}
.chat-msgs .msg .hdr{font-size:10px;color:#64748b;margin-bottom:4px;font-weight:600}
.chat-msgs .msg .time{font-size:10px;color:#475569;margin-top:4px;text-align:right}
.chat-msgs .msg .msg-media{margin:4px 0}
.chat-msgs .msg .msg-media img,.chat-msgs .msg .msg-media video{max-width:280px;max-height:200px;border-radius:3px;display:block}
.chat-msgs .msg .msg-media video{background:#000;min-height:100px}

@media(max-width:768px){
  .wx-layout{flex-direction:column!important}
  .wx-sidebar{width:100%!important;min-width:auto!important;max-height:40vh}
  .wx-detail{display:none!important}
}

/* ── Score Color Tags ─────────────────────────────────────────── */
.score-tag.a { background: #065f4620; color: #34d399; border: 1px solid #34d39960; }
.score-tag.b { background: #1e3a5f20; color: #60a5fa; border: 1px solid #60a5fa60; }
.score-tag.c { background: #78350f20; color: #fbbf24; border: 1px solid #fbbf2460; }
.score-tag.d { background: #7f1d1d20; color: #fb7185; border: 1px solid #fb718560; }
.score-tag {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
}

/* ── Dormant / Overdue Indicators ─────────────────────────────── */
.dormant-badge { background: #78350f20; color: #fbbf24; border: 1px solid #fbbf2460; }
.overdue-badge { background: #7f1d1d20; color: #fb7185; border: 1px solid #fb718560; }
.badge-sm {
  display: inline-block; margin-left: 4px; font-size: 10px;
  padding: 1px 6px; border-radius: 99px; white-space: nowrap;
}

/* ── Source Tags ──────────────────────────────────────────────── */
.source-tag { padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.source-tag.whatsapp { background: #065f4620; color: #34d399; }
.source-tag.web_chat, .source-tag.webchat { background: #1e3a5f20; color: #60a5fa; }
.source-tag.landing_page { background: #4a1d6f20; color: #a78bfa; }
.source-tag.facebook { background: #1e3a5f20; color: #60a5fa; }
.source-tag.maps { background: #78350f20; color: #fbbf24; }
.source-tag.wecom { background: #065f4620; color: #34d399; }
.source-tag.linkedin { background: #1e3a5f20; color: #60a5fa; }
.source-tag.form { background: #4a1d6f20; color: #a78bfa; }

/* ── Conversation State Tags ──────────────────────────────────── */
.state-tag {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.state-tag.init, .state-tag.greeting { background: #1e293b; color: #94a3b8; }
.state-tag.collecting, .state-tag.recommending { background: #1e3a5f20; color: #60a5fa; }
.state-tag.negotiating, .state-tag.ready_to_close { background: #78350f20; color: #fbbf24; }
.state-tag.quoted, .state-tag.contract_sent { background: #4a1d6f20; color: #a78bfa; }
.state-tag.closed { background: #065f4620; color: #34d399; }
.state-tag.lost, .state-tag.abandoned { background: #7f1d1d20; color: #fb7185; }
.state-tag.escalated { background: #7f1d1d20; color: #fb7185; }

/* ═══════════════════════════════════════════════════════════════════
   2026 Design System — Unified Buttons / Inputs / Dropdowns
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.25);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.35);
  --shadow-glow-cyan: 0 0 0 3px rgba(34,211,238,.12);
  --shadow-glow-rose: 0 0 0 3px rgba(251,113,133,.12);
  --transition-fast: 0.15s var(--ease-out);
  --transition-smooth: 0.25s var(--ease-in-out);
}

/* ── Unified Button System ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible {
  box-shadow: var(--shadow-glow-cyan);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0) scale(0.97);
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Primary */
.btn-primary {
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
  color: #0f172a;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(34,211,238,.15);
}
.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(34,211,238,.3);
}
.btn-primary:active {
  box-shadow: 0 1px 4px rgba(34,211,238,.2);
}

/* Outline / Secondary */
.btn-outline {
  background: rgba(30,41,59,.6);
  backdrop-filter: blur(8px);
  border-color: rgba(51,65,85,.8);
  color: #94a3b8;
}
.btn-outline:hover {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
  box-shadow: var(--shadow-sm);
}
.btn-outline:active {
  background: #1e293b;
}

/* Danger */
.btn-danger {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  color: #fff;
  box-shadow: 0 2px 8px rgba(251,113,133,.15);
}
.btn-danger:hover {
  box-shadow: 0 6px 20px rgba(251,113,133,.3);
}

/* Ghost / minimal */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: #64748b;
}
.btn-ghost:hover {
  background: rgba(51,65,85,.5);
  color: #e2e8f0;
}

/* Small variant */
.btn-sm {
  padding: 5px 12px;
  font-size: 11px;
  border-radius: var(--radius-sm);
  gap: 4px;
}

/* Large variant */
.btn-lg {
  padding: 12px 24px;
  font-size: 15px;
  border-radius: var(--radius-lg);
}

/* Icon-only button */
.btn-icon {
  padding: 8px;
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--radius-md);
}
.btn-icon.btn-sm {
  padding: 5px;
  min-width: 28px;
  min-height: 28px;
}

/* ── Ripple enhancement ── */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transform: scale(0);
  animation: rippleAnim .5s var(--ease-out);
  pointer-events: none;
}

/* ── Unified Input System ── */
.form-input,
.modal-input {
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(51,65,85,.8);
  background: rgba(15,23,42,.7);
  backdrop-filter: blur(4px);
  color: #e2e8f0;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  outline: none;
  box-sizing: border-box;
  transition: all var(--transition-smooth);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.form-input::placeholder,
.modal-input::placeholder {
  color: #475569;
  opacity: 1;
}
.form-input:hover,
.modal-input:hover {
  border-color: #475569;
}
.form-input:focus,
.modal-input:focus {
  border-color: #22d3ee;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), var(--shadow-glow-cyan);
  background: rgba(15,23,42,.9);
}
.form-input:focus::placeholder,
.modal-input:focus::placeholder {
  color: #64748b;
}

/* Read-only state */
.form-input[readonly],
.modal-input[readonly] {
  background: rgba(17,28,43,.6);
  color: #22d3ee;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  cursor: default;
  border-style: dashed;
  border-color: rgba(51,65,85,.5);
}

/* Disabled state */
.form-input:disabled,
.modal-input:disabled,
.form-input[disabled],
.modal-input[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(15,23,42,.4);
}

/* Error state */
.form-input.error,
.modal-input.error {
  border-color: #fb7185;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), var(--shadow-glow-rose);
}

/* ── Unified Select / Dropdown ── */
select.form-input,
select.modal-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.5L7 9l3.5-3.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}
select.form-input option,
select.modal-input option {
  background: #1e293b;
  color: #e2e8f0;
  padding: 10px;
}

/* ── Unified Textarea ── */
textarea.form-input,
textarea.modal-input {
  resize: vertical;
  min-height: 60px;
  line-height: 1.6;
}

/* ── Topbar actions buttons ── */
.topbar .actions button,
.topbar .actions select {
  padding: 7px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(51,65,85,.8);
  background: rgba(30,41,59,.6);
  backdrop-filter: blur(8px);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-smooth);
  font-family: 'Inter', sans-serif;
}
.topbar .actions button:hover {
  background: #334155;
  border-color: #475569;
  box-shadow: var(--shadow-sm);
}
.topbar .actions select {
  background: rgba(15,23,42,.7);
  padding-right: 32px;
}

/* ── Card Elevation ── */
.card,
.stat-card {
  background: rgba(30,41,59,.8);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(51,65,85,.6);
  padding: 20px;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}
.card:hover,
.stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(51,65,85,.9);
}

/* ── Modal Refinements ── */
.modal {
  background: rgba(30,41,59,.95);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(51,65,85,.5);
  box-shadow: 0 25px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.modal-overlay {
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}

/* ── Tab / Nav Pills (used in various places) ── */
.nav-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}
.nav-pill:hover {
  color: #e2e8f0;
  background: rgba(51,65,85,.5);
}
.nav-pill.active {
  color: #22d3ee;
  background: rgba(34,211,238,.1);
  border-color: rgba(34,211,238,.2);
}

/* ── Table Row Interactions ── */
.table-wrap table tbody tr {
  transition: background var(--transition-fast);
}
.table-wrap table tbody tr:hover td {
  background: rgba(51,65,85,.3);
}

/* ── Checkbox / Radio modern touch targets ── */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #22d3ee;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Selection color ── */
::selection {
  background: rgba(34,211,238,.25);
  color: #e2e8f0;
}

/* ── Focus ring for all interactive elements ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(34,211,238,.5);
  outline-offset: 2px;
}
/* Suppress focus ring for mouse users — added via JS class */
body.using-mouse a:focus-visible,
body.using-mouse button:focus-visible,
body.using-mouse input:focus-visible,
body.using-mouse select:focus-visible,
body.using-mouse textarea:focus-visible {
  outline: none;
}

/* ── Form section dividers ── */
.form-section {
  border-top-color: rgba(51,65,85,.5);
}

/* ── Confirm / Toast refinements ── */
.confirm-modal {
  background: rgba(30,41,59,.95);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(51,65,85,.5);
  box-shadow: 0 25px 80px rgba(0,0,0,.55);
}
.toast {
  background: rgba(30,41,59,.95);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(51,65,85,.6);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}

/* ── Sidebar nav item micro-interaction ── */
.sidebar .nav a {
  transition: all var(--transition-smooth);
  border-radius: var(--radius-md);
}
.sidebar .nav a:hover {
  transform: translateX(2px);
}

/* ── Responsive: touch-friendly on mobile ── */
@media (max-width: 768px) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 32px; }
  .form-input, .modal-input { font-size: 14px; padding: 12px 16px; min-height: 44px; }
  select.form-input, select.modal-input { padding-right: 40px; }
}

/* ── Filter Bar (客户列表 / leads page) ── */
.filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(30,41,59,.7);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(51,65,85,.5);
  margin-bottom: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.filter-bar select {
  padding: 8px 34px 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(51,65,85,.7);
  background: rgba(15,23,42,.7);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: all var(--transition-smooth);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
  white-space: nowrap;
}
.filter-bar select:hover {
  border-color: #475569;
  background: rgba(15,23,42,.85);
}
.filter-bar select:focus {
  border-color: #22d3ee;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15), var(--shadow-glow-cyan);
}
.filter-bar input[type="text"],
.filter-bar input[type="search"],
.filter-bar .filter-search {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(51,65,85,.7);
  background: rgba(15,23,42,.7);
  backdrop-filter: blur(4px);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  outline: none;
  min-width: 180px;
  transition: all var(--transition-smooth);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
}
.filter-bar input[type="text"]::placeholder,
.filter-bar input[type="search"]::placeholder,
.filter-bar .filter-search::placeholder {
  color: #475569;
}
.filter-bar input[type="text"]:hover,
.filter-bar input[type="search"]:hover,
.filter-bar .filter-search:hover {
  border-color: #475569;
}
.filter-bar input[type="text"]:focus,
.filter-bar input[type="search"]:focus,
.filter-bar .filter-search:focus {
  border-color: #22d3ee;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15), var(--shadow-glow-cyan);
  background: rgba(15,23,42,.9);
}
.filter-bar .btn {
  flex-shrink: 0;
}

/* Batch action bar */
.batch-bar {
  background: rgba(30,41,59,.7);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(34,211,238,.2);
  padding: 10px 16px;
}
.batch-bar .btn {
  border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════════════════
   AI Chat Module — 独立 AI 对话界面
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.ai-chat-layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
  min-height: 500px;
  max-height: 800px;
  background: #0f172a;
  border-radius: 16px;
  border: 1px solid #1e293b;
  overflow: hidden;
}

/* ── Messages area ── */
.ai-chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}
.ai-chat-msgs::-webkit-scrollbar { width: 5px; }
.ai-chat-msgs::-webkit-scrollbar-track { background: transparent; }
.ai-chat-msgs::-webkit-scrollbar-thumb { background: #334155; border-radius: 99px; }

/* ── Empty state ── */
.ai-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  flex: 1;
}
.ai-chat-empty .icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: .6;
}
.ai-chat-empty h3 {
  font-size: 20px;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0 0 12px;
}
.ai-chat-empty p {
  font-size: 14px;
  color: #64748b;
  max-width: 420px;
  line-height: 1.7;
  margin: 0;
}

/* ── Message bubbles ── */
.ai-chat-msgs .msg {
  max-width: 80%;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  animation: aiMsgIn .25s ease-out;
}
@keyframes aiMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-chat-msgs .msg .hdr {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: .8;
}
.ai-chat-msgs .msg .time {
  font-size: 10px;
  color: #475569;
  margin-top: 6px;
  text-align: right;
}

/* User message */
.ai-chat-msgs .msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #22d3ee20, #a78bfa15);
  border: 1px solid #22d3ee30;
  border-bottom-right-radius: 4px;
}
.ai-chat-msgs .msg.user .hdr {
  color: #22d3ee;
}

/* Assistant message */
.ai-chat-msgs .msg.assistant {
  align-self: flex-start;
  background: #1e293b;
  border: 1px solid #334155;
  border-bottom-left-radius: 4px;
}
.ai-chat-msgs .msg.assistant .hdr {
  color: #a78bfa;
}

/* ── Thinking indicator ── */
.ai-thinking {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  align-self: flex-start;
  max-width: 80%;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  animation: aiMsgIn .25s ease-out;
}
.ai-thinking .dots {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ai-thinking .dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #64748b;
  animation: dotPulse 1.4s infinite ease-in-out both;
}
.ai-thinking .dots span:nth-child(1) { animation-delay: 0s; }
.ai-thinking .dots span:nth-child(2) { animation-delay: .2s; }
.ai-thinking .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0); opacity: .3; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── Input bar ── */
.ai-chat-bar {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  background: #1e293b;
  border-top: 1px solid #334155;
  align-items: flex-end;
}
.ai-chat-bar textarea {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 14px;
  resize: none;
  font-family: inherit;
  outline: none;
  min-height: 44px;
  max-height: 120px;
  line-height: 1.5;
  transition: border-color .2s;
}
.ai-chat-bar textarea:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px #22d3ee15;
}
.ai-chat-bar textarea::placeholder {
  color: #475569;
}

/* Send button */
.btn-ai-send {
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
  color: #0f172a;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
.btn-ai-send:hover { opacity: .9; transform: translateY(-1px); }
.btn-ai-send:active { transform: translateY(0); }
.btn-ai-send:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Clear button */
.btn-ai-clear {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
.btn-ai-clear:hover {
  border-color: #fb7185;
  color: #fb7185;
  background: #fb718510;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .ai-chat-layout {
    height: calc(100vh - 200px);
    border-radius: 0;
    border: none;
  }
  .ai-chat-msgs { padding: 16px 12px; }
  .ai-chat-msgs .msg { max-width: 90%; }
  .ai-chat-bar { padding: 10px 12px; gap: 6px; }
  .btn-ai-clear { font-size: 18px; padding: 10px 12px; }
}