*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',sans-serif;background:#0a0a18;color:#fff;overflow:hidden;height:100vh;width:100vw}
#topbar{position:fixed;top:0;left:0;right:0;background:linear-gradient(90deg,#0d0d22,#12122e);border-bottom:1px solid #1e1e40;display:flex;flex-direction:column;padding:0;z-index:200}
.topbar-row1{display:flex;align-items:center;padding:6px 20px;gap:12px}
.topbar-row2{display:flex;align-items:center;padding:2px 20px 6px;gap:6px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.topbar-row2::-webkit-scrollbar{display:none}
.logo-wrap{display:flex;align-items:center;gap:10px;margin-right:16px}
.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#6c63ff,#48d1cc);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.logo-text{display:flex;flex-direction:column}
.logo-main{font-size:15px;font-weight:800;background:linear-gradient(135deg,#a89fff,#48d1cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}
.logo-sub{font-size:9px;color:#555;letter-spacing:1px}
.site-pill{background:#1a1a36;border:1px solid #2a2a4a;border-radius:20px;padding:4px 12px;font-size:11px;color:#aaa;display:flex;align-items:center;gap:5px;cursor:pointer}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot.green{background:#4ade80;box-shadow:0 0 5px #4ade80}
.dot.yellow{background:#facc15;box-shadow:0 0 5px #facc15}
.topbar-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0}
.time-chip{font-size:12px;color:#666;background:#141430;padding:4px 12px;border-radius:20px;border:1px solid #1e1e40}
.notif-btn{width:32px;height:32px;background:#141430;border:1px solid #1e1e40;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;position:relative}
.nbadge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;background:#f87171;border-radius:50%;font-size:8px;display:flex;align-items:center;justify-content:center;border:2px solid #0a0a18;font-weight:700}
#main{display:flex;height:100vh;padding-top:72px}
#office{flex:1;position:relative;background:linear-gradient(180deg,#0e0e26 0%,#080818 100%);overflow:hidden}
#office::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(108,99,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(108,99,255,.05) 1px,transparent 1px);background-size:52px 52px}
.zone{position:absolute;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:10px 12px 12px}
.zone-label{font-size:9px;color:rgba(255,255,255,.25);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.desk-wrap{position:absolute;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .2s;z-index:10;user-select:none}
.desk-wrap:hover{transform:scale(1.1)}
.av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;position:relative;border:2px solid rgba(255,255,255,.12);margin-bottom:3px}
.sdot{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;border:2px solid #0a0a18}
.sdot.idle{background:#4ade80}
.sdot.busy{background:#f97316;animation:pls 1.2s infinite}
.sdot.meeting{background:#a78bfa;animation:pls 1.2s infinite}
.sdot.thinking{background:#facc15;animation:pls .9s infinite}
@keyframes pls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
.drole{font-size:10px;color:#ccc;font-weight:700}
.dname{font-size:8px;color:#666}
.typing{display:flex;gap:3px;margin-top:3px;height:9px;align-items:flex-end}
.typing span{width:3px;background:#6c63ff;border-radius:2px;animation:typ .9s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,100%{height:3px;opacity:.4}50%{height:9px;opacity:1}}
.typing.h{visibility:hidden}
.dsurf{width:60px;height:20px;background:linear-gradient(180deg,#252545,#1a1a38);border-radius:5px 5px 2px 2px;border-top:2px solid #353565;display:flex;align-items:center;justify-content:center;margin-top:2px}
.mon{width:22px;height:14px;background:#060612;border-radius:2px;border:1px solid #353565;overflow:hidden}
.msc{width:100%;height:100%;display:flex;flex-direction:column;gap:2px;padding:2px}
.ml{height:1px;background:#6c63ff33;border-radius:1px}
.ml.a{background:#6c63ff88;animation:ma 1.5s infinite}
@keyframes ma{0%,100%{opacity:.4}50%{opacity:1}}
#mroom{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);width:55%;max-width:550px;height:16%;min-height:120px;padding:12px 20px;background:rgba(108,99,255,.07);border:1.5px solid rgba(108,99,255,.22);border-radius:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;transition:all .4s}
#mroom.active{border-color:rgba(108,99,255,.6);background:rgba(108,99,255,.12);box-shadow:0 0 30px rgba(108,99,255,.15)}
#mp{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;max-width:90%;margin:0 auto}
.ma{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;border:2px solid rgba(108,99,255,.4);animation:flt 2.2s ease-in-out infinite}
.ma:nth-child(2){animation-delay:.3s}
.ma:nth-child(3){animation-delay:.6s}
.ma:nth-child(4){animation-delay:.9s}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#mtopic{font-size:11px;color:rgba(255,255,255,0.6);text-align:center;max-width:90%;margin:0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;background:rgba(108,99,255,0.15);border-radius:8px}
.bubble{position:absolute;background:rgba(18,18,42,.97);border:1px solid rgba(108,99,255,.3);border-radius:12px 12px 12px 2px;padding:8px 14px;font-size:11px;color:#d0d0f0;min-width:120px;max-width:280px;width:max-content;line-height:1.5;z-index:80;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;box-shadow:0 4px 20px rgba(0,0,0,.5);white-space:normal;word-break:break-word}
.bubble.show{opacity:1;transform:translateY(0)}
#panel{width:310px;background:#0c0c24;border-left:1px solid #1a1a36;display:flex;flex-direction:column;overflow:hidden}
.ph{padding:14px 16px 10px;border-bottom:1px solid #1a1a36;font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}
.pbadge{background:#6c63ff;color:#fff;border-radius:10px;font-size:10px;padding:2px 7px;min-width:20px;text-align:center}
#ecard{padding:14px 16px;border-bottom:1px solid #1a1a36;display:none}
#ecard.show{display:block}
.ech{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ecav{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:2px solid rgba(255,255,255,.12);flex-shrink:0}
.ecn{font-size:14px;font-weight:700}
.ecr{font-size:10px;color:#555;margin-top:1px}
.ecsr{display:flex;align-items:center;gap:6px;font-size:11px;margin-bottom:8px}
.ecsk{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.stag{background:rgba(108,99,255,.15);color:#9d8fff;border-radius:7px;font-size:9px;padding:2px 8px;border:1px solid rgba(108,99,255,.2)}
.eclog{font-size:10px;color:#555;line-height:1.8}
.eclog b{color:#777}
.cmdbtn{width:100%;margin-top:10px;background:rgba(108,99,255,.15);border:1px solid rgba(108,99,255,.3);border-radius:8px;color:#a78bfa;font-size:11px;font-weight:600;padding:8px;cursor:pointer;transition:background .2s}
.cmdbtn:hover{background:rgba(108,99,255,.3)}
#tasklist{flex:1;overflow-y:auto;padding:10px 14px}
#tasklist::-webkit-scrollbar{width:3px}
#tasklist::-webkit-scrollbar-thumb{background:#1e1e40;border-radius:2px}
.ti{background:#121230;border:1px solid #1a1a36;border-radius:9px;padding:9px 11px;margin-bottom:7px;position:relative;overflow:hidden}
.ti::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
.ti.pending::before{background:#facc15}
.ti.running::before{background:#6c63ff;animation:blnk 2s infinite}
.ti.done::before{background:#4ade80}
@keyframes blnk{0%,100%{opacity:1}50%{opacity:.35}}
.titop{display:flex;justify-content:space-between;align-items:flex-start}
.titt{font-size:11px;font-weight:600;color:#d0d0f0;flex:1;margin-right:5px}
.tbadge{font-size:9px;padding:2px 6px;border-radius:7px;font-weight:700;white-space:nowrap;flex-shrink:0}
.tbadge.pending{background:rgba(250,204,21,.12);color:#facc15}
.tbadge.running{background:rgba(108,99,255,.18);color:#a78bfa;animation:pls 1.5s infinite}
.tbadge.done{background:rgba(74,222,128,.12);color:#4ade80}
.tiag{font-size:9px;color:#444;margin-top:3px}
.tipb{margin-top:7px;height:3px;background:#1a1a36;border-radius:2px;overflow:hidden}
.tipb-b{height:100%;border-radius:2px;background:linear-gradient(90deg,#6c63ff,#48d1cc);transition:width .8s ease}
#ca{padding:12px 14px;border-top:1px solid #1a1a36}
#cbtn{width:100%;background:linear-gradient(135deg,#6c63ff,#48d1cc);border:none;border-radius:9px;color:#fff;font-size:13px;font-weight:700;padding:11px;cursor:pointer;transition:opacity .2s,transform .1s}
#cbtn:hover{opacity:.9;transform:scale(1.02)}
.cnote{font-size:9px;color:#3a3a6a;text-align:center;margin-top:5px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(90px);background:rgba(12,12,36,.98);border:1px solid rgba(108,99,255,.4);border-radius:11px;padding:10px 18px;font-size:12px;color:#d0d0f0;z-index:500;transition:transform .4s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:10px;max-width:400px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#toast.show{transform:translateX(-50%) translateY(0)}
#cmdmodal{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:400;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
#cmdmodal.show{display:flex}
.cmdbox{background:#0e0e28;border:1px solid rgba(108,99,255,.4);border-radius:16px;padding:24px;width:420px;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.cmdh{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cmdav{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;border:2px solid rgba(255,255,255,.12);flex-shrink:0}
.cmdin{font-size:14px;font-weight:700}
.cmdis{font-size:10px;color:#555;margin-top:2px}
.cmdlbl{font-size:11px;color:#555;margin-bottom:7px}
.cmdquick{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.qbtn{background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.2);border-radius:6px;color:#9d8fff;font-size:10px;padding:3px 9px;cursor:pointer;transition:background .2s}
.qbtn:hover{background:rgba(108,99,255,.3)}
.cmdinput{width:100%;background:#080818;border:1px solid rgba(108,99,255,.3);border-radius:9px;color:#e0e0ff;font-size:13px;padding:12px 14px;resize:none;height:90px;font-family:inherit;outline:none;transition:border-color .2s;display:block}
.cmdinput:focus{border-color:rgba(108,99,255,.7)}
.cmdacts{display:flex;gap:8px;margin-top:12px}
.cmdsend{flex:1;background:linear-gradient(135deg,#6c63ff,#48d1cc);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:700;padding:10px;cursor:pointer}
.cmdcancel{background:#1a1a36;border:1px solid #2a2a4a;border-radius:8px;color:#888;font-size:13px;padding:10px 16px;cursor:pointer}

/* ===== Claude AI Chat Interface ===== */
.ec-chat-wrap {
  background: rgba(0,0,0,0.3);
  border-radius: 12px;
  margin: 10px 0 8px;
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.1);
}
#ec-chat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}
.chat-welcome {
  text-align: center;
  color: #aaa;
  font-size: 12px;
  padding: 10px;
  font-style: italic;
}
.ec-input-row {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
#ecinput {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
#ecinput:focus {
  border-color: #6c63ff;
  background: rgba(108,99,255,0.1);
}
#ecinput::placeholder { color: #666; }
#ec-send-btn {
  background: linear-gradient(135deg, #6c63ff, #a29bfe);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.1s, box-shadow 0.2s;
  white-space: nowrap;
}
#ec-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(108,99,255,0.4);
}
#ec-send-btn:active { transform: translateY(0); }

.ecqq-wrap { margin: 4px 0 8px; }
.ecqq-label { font-size: 11px; color: #888; margin-bottom: 6px; }
#ecqq { display: flex; flex-wrap: wrap; gap: 6px; }
.qq-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  color: #ccc;
  font-size: 11px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.qq-btn:hover {
  background: rgba(108,99,255,0.25);
  border-color: #6c63ff;
  color: #fff;
}
.eclog-wrap { margin-top: 8px; }
.eclog-label { font-size: 11px; color: #888; margin-bottom: 6px; }

/* Scrollbar styling */
.ec-chat-wrap::-webkit-scrollbar { width: 4px; }
.ec-chat-wrap::-webkit-scrollbar-track { background: transparent; }
.ec-chat-wrap::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

/* Make ecard wider for chat */
#ecard {
  width: 420px !important;
  max-width: 92vw !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}
/* ===== Overrides to match CodePen screenshot ===== */
#mroom{width:60%;min-width:340px;height:14%;min-height:100px;bottom:1%;left:5%;transform:none;padding:10px 20px}
.ma{width:50px;height:50px;border:none;overflow:visible;background:transparent}
.av{overflow:visible;background:transparent !important;border:none !important}
.bubble{top:-50px;left:55px}
#ecard{width:auto !important;max-width:100% !important}

/* ═══════════════════════════════════════
   老闆任務輸入
   ═══════════════════════════════════════ */
#boss-input { padding: 12px 14px; border-bottom: 1px solid #1a1a36; }
.boss-label { font-size: 12px; color: #a78bfa; font-weight: 600; margin-bottom: 8px; }
#boss-task {
  width: 100%; background: #080818; border: 1px solid rgba(108,99,255,.3); border-radius: 10px;
  color: #e0e0ff; font-size: 13px; padding: 12px; resize: none; height: 100px;
  font-family: inherit; outline: none; transition: border-color .2s; display: block;
}
#boss-task:focus { border-color: rgba(108,99,255,.7); }
#boss-task::placeholder { color: #444; font-size: 12px; }
#boss-send {
  width: 100%; margin-top: 10px; background: linear-gradient(135deg, #6c63ff, #48d1cc);
  border: none; border-radius: 9px; color: #fff; font-size: 13px; font-weight: 700;
  padding: 12px; cursor: pointer; transition: opacity .2s, transform .1s;
}
#boss-send:hover { opacity: .9; transform: scale(1.02); }
#boss-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════
   會議進度面板
   ═══════════════════════════════════════ */
#meeting-progress { padding: 14px; }
.mp-header {
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700;
  color: #a78bfa; margin-bottom: 14px;
}
.mp-spinner {
  width: 16px; height: 16px; border: 2px solid rgba(108,99,255,.3);
  border-top-color: #6c63ff; border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mp-phase {
  font-size: 11px; padding: 8px 12px; margin-bottom: 6px; border-radius: 8px;
  border-left: 3px solid #333; background: rgba(255,255,255,.02);
}
.mp-phase.done { border-left-color: #4ade80; color: #4ade80; }
.mp-phase.running { border-left-color: #a78bfa; color: #d0d0f0; animation: pulse-bg 2s infinite; }
@keyframes pulse-bg { 0%,100% { background: rgba(108,99,255,.05); } 50% { background: rgba(108,99,255,.12); } }
.mp-elapsed { font-size: 11px; color: #555; margin-top: 10px; text-align: center; }

/* ═══════════════════════════════════════
   會議結果面板
   ═══════════════════════════════════════ */
#meeting-result { padding: 0; display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.mr-header {
  padding: 14px 16px 10px; font-size: 13px; font-weight: 700; color: #fff;
  border-bottom: 1px solid #1a1a36;
}
#mr-tabs {
  display: flex; border-bottom: 1px solid #1a1a36; padding: 0 8px;
}
.mr-tab {
  flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  color: #666; font-size: 10px; padding: 8px 4px; cursor: pointer;
  transition: all .2s; white-space: nowrap;
}
.mr-tab:hover { color: #aaa; }
.mr-tab.active { color: #a78bfa; border-bottom-color: #6c63ff; }
#mr-content {
  flex: 1; overflow-y: auto; padding: 14px; font-size: 12px; color: #ccc; line-height: 1.8;
}
#mr-content::-webkit-scrollbar { width: 3px; }
#mr-content::-webkit-scrollbar-thumb { background: #1e1e40; border-radius: 2px; }
#mr-content p { margin-bottom: 8px; }
#mr-content strong { color: #a78bfa; }
.mr-section { font-size: 12px; }
.mr-agent-report {
  background: rgba(255,255,255,.03); border: 1px solid #1a1a36; border-radius: 10px;
  padding: 12px; margin-bottom: 10px;
}
.mr-agent-title { font-size: 12px; font-weight: 700; color: #a78bfa; margin-bottom: 8px; }
#mr-actions {
  display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid #1a1a36;
}
.mr-approve {
  flex: 1; background: linear-gradient(135deg, #4ade80, #22c55e); border: none;
  border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700; padding: 11px;
  cursor: pointer; transition: opacity .2s;
}
.mr-approve:hover { opacity: .85; }
.mr-reject {
  background: #1a1a36; border: 1px solid #2a2a4a; border-radius: 8px; color: #888;
  font-size: 13px; padding: 11px 18px; cursor: pointer; transition: background .2s;
}
.mr-reject:hover { background: rgba(248,113,113,.15); color: #f87171; }

/* ═══════════════════════════════════════
   會議歷史
   ═══════════════════════════════════════ */
#meeting-history { padding: 0; flex: 1; overflow-y: auto; }
.mh-header {
  padding: 14px 16px 10px; font-size: 13px; font-weight: 700; color: #fff;
  border-bottom: 1px solid #1a1a36; position: sticky; top: 0; background: #0c0c24;
}
.mh-item {
  padding: 10px 16px; border-bottom: 1px solid #121230; cursor: pointer;
  transition: background .2s;
}
.mh-item:hover { background: rgba(108,99,255,.08); }
.mh-task { font-size: 12px; color: #ccc; margin-bottom: 3px; }
.mh-meta { font-size: 10px; color: #444; }

/* ═══════════════════════════════════════
   員工卡片關閉按鈕
   ═══════════════════════════════════════ */
.ec-close {
  margin-left: auto; background: none; border: 1px solid #333; border-radius: 6px;
  color: #666; font-size: 14px; width: 28px; height: 28px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.ec-close:hover { background: rgba(248,113,113,.15); color: #f87171; border-color: #f87171; }

/* ═══════════════════════════════════════
   通用
   ═══════════════════════════════════════ */
.hidden { display: none !important; }

/* ═══ Meeting Discussion Bubbles ═══ */
.meeting-bubble{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px 12px;margin:8px 0;transition:all .2s}
.meeting-bubble:hover{border-color:rgba(108,99,255,0.3);background:rgba(108,99,255,0.05)}
.meeting-bubble-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.meeting-bubble-avatar{width:28px;height:28px;flex-shrink:0}
.meeting-bubble-name{font-size:12px;font-weight:600;color:#a78bfa;flex:1}
.meeting-bubble-toggle{font-size:10px;padding:2px 10px;border-radius:10px;border:1px solid rgba(108,99,255,0.3);background:rgba(108,99,255,0.1);color:#a78bfa;cursor:pointer;transition:all .15s;white-space:nowrap}
.meeting-bubble-toggle:hover{background:rgba(108,99,255,0.25);border-color:#a78bfa}
.meeting-bubble-preview{font-size:12px;color:#b0b0d0;line-height:1.5;padding-left:36px}
.meeting-bubble-preview p,.meeting-bubble-full p{margin:0 0 6px}
.meeting-bubble-full{font-size:12px;color:#d0d0f0;line-height:1.6;padding-left:36px;max-height:400px;overflow-y:auto}
.meeting-bubble-full strong{color:#fff}
.meeting-bubble-full::-webkit-scrollbar{width:4px}
.meeting-bubble-full::-webkit-scrollbar-thumb{background:#333;border-radius:4px}

.meeting-thinking{display:flex;align-items:center;gap:8px;padding:6px 0;margin:4px 0;opacity:0.6}
.meeting-thinking-text{font-size:11px;color:#888;font-style:italic}
.thinking-dots span{animation:thinkDot 1.2s infinite;opacity:0}
.thinking-dots span:nth-child(2){animation-delay:0.2s}
.thinking-dots span:nth-child(3){animation-delay:0.4s}
@keyframes thinkDot{0%,100%{opacity:0}50%{opacity:1}}

#mp-phases{max-height:calc(100vh - 240px);overflow-y:auto;padding-right:4px}
#mp-phases::-webkit-scrollbar{width:4px}
#mp-phases::-webkit-scrollbar-thumb{background:#333;border-radius:4px}

/* ═══ Dashboard Button ═══ */
.dashboard-btn{font-size:10px;color:#4ade80;background:rgba(74,222,128,0.08);border:1px solid rgba(74,222,128,0.25);padding:3px 10px;border-radius:16px;cursor:pointer;transition:all .2s;white-space:nowrap;font-weight:600}
.dashboard-btn:hover{background:rgba(74,222,128,0.18);border-color:#4ade80;transform:scale(1.02)}

/* ═══ Dashboard Overlay ═══ */
.dashboard-overlay{position:fixed;inset:0;z-index:9999;background:rgba(5,5,20,0.95);backdrop-filter:blur(12px);overflow-y:auto;animation:dbFadeIn .25s ease}
.dashboard-overlay.hidden{display:none}
@keyframes dbFadeIn{from{opacity:0}to{opacity:1}}
.dashboard-container{max-width:1200px;margin:0 auto;padding:20px 24px 40px}
.dashboard-topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.06)}
.dashboard-title{font-size:22px;font-weight:700;color:#fff}
.dashboard-subtitle{font-size:12px;color:#666;flex:1}
.dashboard-actions{display:flex;gap:6px}
.db-tab{font-size:11px;padding:5px 14px;border-radius:16px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:#888;cursor:pointer;transition:all .15s;white-space:nowrap}
.db-tab.active{background:rgba(108,99,255,0.2);border-color:#6c63ff;color:#a78bfa}
.db-tab:hover{border-color:#555;color:#ccc}
.dashboard-close{position:absolute;top:18px;right:24px;font-size:20px;color:#666;background:none;border:none;cursor:pointer;width:36px;height:36px;border-radius:50%;transition:all .15s}
.dashboard-close:hover{color:#fff;background:rgba(255,255,255,0.1)}

/* ═══ Dashboard Body ═══ */
.dashboard-body{min-height:60vh}
.db-loading{text-align:center;color:#555;padding:60px 0;font-size:14px}

/* ── Metric Cards ── */
.db-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:900px){.db-metrics{grid-template-columns:repeat(2,1fr)}}
.db-metric{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:16px 18px;transition:all .2s;cursor:default}
.db-metric:hover{border-color:rgba(108,99,255,0.3);background:rgba(108,99,255,0.05)}
.db-metric-label{font-size:11px;color:#666;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px}
.db-metric-value{font-size:26px;font-weight:700;color:#fff;margin-bottom:4px}
.db-metric-change{font-size:12px;font-weight:600}
.db-metric-change.up{color:#4ade80}
.db-metric-change.down{color:#f87171}
.db-metric-change.neutral{color:#888}
.db-metric-source{font-size:9px;color:#444;margin-top:6px}

/* ── Website Cards ── */
.db-websites{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:24px}
@media(max-width:700px){.db-websites{grid-template-columns:1fr}}
.db-website{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:18px;transition:all .2s}
.db-website:hover{border-color:rgba(108,99,255,0.3)}
.db-website-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.db-website-dot{width:10px;height:10px;border-radius:50%}
.db-website-dot.green{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,0.4)}
.db-website-dot.yellow{background:#facc15;box-shadow:0 0 8px rgba(250,204,21,0.4)}
.db-website-dot.red{background:#f87171;box-shadow:0 0 8px rgba(248,113,113,0.4)}
.db-website-name{font-size:15px;font-weight:600;color:#fff}
.db-website-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.db-website-stat-label{font-size:10px;color:#555}
.db-website-stat-value{font-size:15px;font-weight:600;color:#d0d0f0;margin-top:2px}

/* ── Data Sources ── */
.db-source{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px 18px;margin-bottom:10px;transition:all .2s}
.db-source:hover{border-color:rgba(108,99,255,0.3)}
.db-source-name{font-size:13px;font-weight:600;color:#e0e0ff;flex:1}
.db-source-status{font-size:11px;padding:3px 12px;border-radius:12px;font-weight:600}
.db-source-status.connected{background:rgba(74,222,128,0.15);color:#4ade80;border:1px solid rgba(74,222,128,0.3)}
.db-source-status.disconnected{background:rgba(136,136,136,0.1);color:#666;border:1px solid rgba(136,136,136,0.2)}
.db-source-btn{font-size:11px;padding:5px 14px;border-radius:8px;border:1px solid rgba(108,99,255,0.3);background:rgba(108,99,255,0.1);color:#a78bfa;cursor:pointer;transition:all .15s}
.db-source-btn:hover{background:rgba(108,99,255,0.25)}
.db-source-note{font-size:10px;color:#555;margin-top:6px}

/* ── AI Collection Log ── */
.db-ai-log{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px;margin-bottom:10px}
.db-ai-log-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.db-ai-log-agent{font-size:12px;font-weight:600;color:#a78bfa}
.db-ai-log-time{font-size:10px;color:#555;margin-left:auto}
.db-ai-log-q{font-size:12px;color:#facc15;margin-bottom:4px}
.db-ai-log-a{font-size:12px;color:#d0d0f0;line-height:1.5}
.db-ai-log-by{font-size:10px;color:#666;margin-top:4px}
.db-ai-explain{background:rgba(250,204,21,0.06);border:1px solid rgba(250,204,21,0.15);border-radius:12px;padding:14px 18px;margin-bottom:18px;font-size:12px;color:#d0c090;line-height:1.6}

/* ── Chart / Trend ── */
.db-chart{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:18px;margin-bottom:24px}
.db-chart-title{font-size:13px;font-weight:600;color:#a78bfa;margin-bottom:14px}
.db-chart-bars{display:flex;align-items:flex-end;gap:8px;height:120px}
.db-chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.db-chart-bar{width:100%;border-radius:6px 6px 0 0;background:linear-gradient(to top,#6c63ff,#a78bfa);transition:height .5s ease;min-height:4px}
.db-chart-label{font-size:10px;color:#666}
.db-chart-value{font-size:10px;color:#a78bfa;font-weight:600}

.db-section-title{font-size:14px;font-weight:600;color:#d0d0f0;margin:24px 0 12px;display:flex;align-items:center;gap:8px}

/* ═══ Execution Progress Styles ═══ */
.exec-task{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-left:3px solid #333;border-radius:10px;padding:12px;margin-bottom:10px;transition:all .3s}
.exec-task.running{border-left-color:#a78bfa;animation:pulse-bg 2s infinite}
.exec-task.done{border-left-color:#4ade80}
.exec-task.error{border-left-color:#f87171}
.exec-task-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.exec-task-title{font-size:12px;font-weight:600;color:#fff;flex:1}
.exec-task-id{font-size:10px;color:#888}
.exec-task-meta{font-size:11px;color:#888;margin-bottom:4px}
.exec-task-desc{font-size:11px;color:#666;margin-bottom:6px}
.exec-task-result{background:rgba(0,0,0,0.3);border-radius:8px;padding:10px;margin-top:6px;font-size:12px;color:#d0d0f0;line-height:1.6;max-height:200px;overflow-y:auto}
.exec-task-result::-webkit-scrollbar{width:3px}
.exec-task-result::-webkit-scrollbar-thumb{background:#333;border-radius:2px}
.exec-progress-bar{height:4px;background:#1a1a36;border-radius:2px;overflow:hidden;margin-bottom:16px}
.exec-progress-fill{height:100%;background:linear-gradient(90deg,#6c63ff,#4ade80);transition:width .5s}

/* ═══ Kanban Board ═══ */
.kanban-board{display:flex;gap:16px;min-height:60vh}
@media(max-width:800px){.kanban-board{flex-direction:column}}
.kanban-column{flex:1;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:14px;display:flex;flex-direction:column;min-width:0}
.kanban-column-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:14px;font-weight:700;color:#fff;border-bottom:2px solid #333}
.kanban-count{font-size:11px;padding:2px 10px;border-radius:10px;font-weight:600}
.kanban-column-body{flex:1;padding:10px;overflow-y:auto;max-height:calc(100vh - 250px)}
.kanban-column-body::-webkit-scrollbar{width:4px}
.kanban-column-body::-webkit-scrollbar-thumb{background:#333;border-radius:4px}
.kanban-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:12px;margin-bottom:8px;cursor:pointer;transition:all .2s}
.kanban-card:hover{border-color:rgba(108,99,255,0.4);background:rgba(108,99,255,0.06);transform:translateY(-1px)}
.kanban-move-btn{font-size:9px;padding:2px 8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.15);border-radius:4px;color:#888;cursor:pointer;transition:all .15s}
.kanban-move-btn:hover{background:rgba(108,99,255,0.15);color:#fff;border-color:rgba(108,99,255,0.4)}

/* ═══ Aware Badge Animation ═══ */
#aware-badge{background:#a78bfa;animation:aware-pulse 3s infinite}
@keyframes aware-pulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 6px rgba(167,139,250,0.6)}}

/* ═══ Employee Monitor ═══ */
.monitor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px}
@media(max-width:1000px){.monitor-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.monitor-grid{grid-template-columns:1fr}}
.monitor-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;transition:all .2s;cursor:pointer;position:relative;overflow:hidden}
.monitor-card:hover{border-color:rgba(108,99,255,0.4);background:rgba(108,99,255,0.05);transform:translateY(-2px)}
.monitor-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.monitor-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid rgba(255,255,255,0.12);flex-shrink:0}
.monitor-name{font-size:14px;font-weight:700;color:#fff}
.monitor-role{font-size:10px;color:#888;margin-top:1px}
.monitor-status{display:flex;align-items:center;gap:6px;font-size:11px;margin-bottom:8px;padding:4px 10px;border-radius:20px;background:rgba(0,0,0,0.2);width:fit-content}
.monitor-status .sdot-inline{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.monitor-status .sdot-inline.busy{background:#f97316;box-shadow:0 0 6px #f97316}
.monitor-status .sdot-inline.idle{background:#4ade80;box-shadow:0 0 6px #4ade80}
.monitor-status .sdot-inline.meeting{background:#a78bfa;box-shadow:0 0 6px #a78bfa}
.monitor-status .sdot-inline.offline{background:#555;box-shadow:0 0 6px #555}
.monitor-task{font-size:12px;color:#d0d0f0;margin-bottom:10px;line-height:1.5}
.monitor-progress{height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-bottom:4px}
.monitor-progress-fill{height:100%;border-radius:3px;transition:width .5s;background:linear-gradient(90deg,#6c63ff,#48d1cc)}
.monitor-progress-label{font-size:10px;color:#888;text-align:right;margin-bottom:10px}
.monitor-log{margin-bottom:10px}
.monitor-log-title{font-size:11px;color:#a78bfa;font-weight:600;margin-bottom:6px}
.monitor-log-item{display:flex;align-items:flex-start;gap:8px;font-size:10px;color:#888;line-height:1.6;padding:2px 0}
.monitor-log-item .log-time{color:#6c63ff;font-weight:600;flex-shrink:0;min-width:36px}
.monitor-log-item .log-icon{flex-shrink:0}
.monitor-log-item .log-action{color:#aaa}
.monitor-stats{display:flex;gap:8px;flex-wrap:wrap}
.monitor-stat{font-size:10px;color:#888;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:3px 8px;display:flex;align-items:center;gap:4px}
.monitor-stat .stat-val{color:#fff;font-weight:700}
.monitor-stats-title{font-size:11px;color:#48d1cc;font-weight:600;margin-bottom:6px}
.monitor-card-expanded{max-height:0;overflow:hidden;transition:max-height .3s}
.monitor-card.expanded .monitor-card-expanded{max-height:500px}
.monitor-expand-hint{text-align:center;font-size:9px;color:#555;margin-top:8px}
.monitor-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.2);border-top-color:#f0c040;border-radius:50%;animation:mspin .6s linear infinite;margin-right:6px;vertical-align:middle}
@keyframes mspin{to{transform:rotate(360deg)}}

/* OpenClaw Status Badge */
.openclaw-badge{font-size:11px;padding:4px 12px;border-radius:16px;cursor:pointer;transition:all .3s;white-space:nowrap;font-weight:600}
.openclaw-badge.checking{background:rgba(250,204,21,0.1);border:1px solid rgba(250,204,21,0.3);color:#facc15}
.openclaw-badge.connected{background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.3);color:#4ade80}
.openclaw-badge.error{background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);color:#f87171}

/* Salary celebration */
.celebrating{animation:salary-bounce 0.5s ease 3}
@keyframes salary-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.salary-floaty{position:absolute;top:0;left:50%;font-size:16px;z-index:100;pointer-events:none;animation:salary-float 2.5s ease forwards}
@keyframes salary-float{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-60px) scale(0.5)}}

/* Meeting room avatar fix */
.ma{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:visible;position:relative}

/* ═══ AI Sales Pipeline ═══ */
.pipeline-table{width:100%;border-collapse:collapse;font-size:12px}
.pipeline-table th{text-align:left;padding:10px 12px;color:#888;font-weight:600;font-size:11px;border-bottom:1px solid rgba(255,255,255,0.08);text-transform:uppercase;letter-spacing:1px}
.pipeline-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);color:#d0d0f0;vertical-align:top}
.pipeline-table tr:hover td{background:rgba(108,99,255,0.04)}
.pipeline-table a{color:#74b9ff;text-decoration:none}
.pipeline-table a:hover{text-decoration:underline}
.pipeline-status{display:inline-block;padding:2px 10px;border-radius:12px;font-size:10px;font-weight:600;letter-spacing:0.5px}
.pipeline-status.new{background:rgba(136,136,136,0.15);color:#999;border:1px solid rgba(136,136,136,0.3)}
.pipeline-status.contacted{background:rgba(96,165,250,0.15);color:#60a5fa;border:1px solid rgba(96,165,250,0.3)}
.pipeline-status.interested{background:rgba(250,204,21,0.15);color:#facc15;border:1px solid rgba(250,204,21,0.3)}
.pipeline-status.converted{background:rgba(74,222,128,0.15);color:#4ade80;border:1px solid rgba(74,222,128,0.3)}
.pipeline-status.rejected{background:rgba(248,113,113,0.15);color:#f87171;border:1px solid rgba(248,113,113,0.3)}
.pipeline-btn{padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:#ccc;font-size:11px;cursor:pointer;transition:all .2s;white-space:nowrap}
.pipeline-btn:hover{background:rgba(108,99,255,0.15);border-color:rgba(108,99,255,0.4);color:#fff}
.pipeline-btn:disabled{opacity:0.4;cursor:not-allowed}
.pipeline-btn.primary{background:rgba(108,99,255,0.15);border-color:rgba(108,99,255,0.4);color:#a89fff}
.pipeline-btn.primary:hover{background:rgba(108,99,255,0.25)}
.pipeline-btn.danger{border-color:rgba(248,113,113,0.3);color:#f87171}
.pipeline-btn.danger:hover{background:rgba(248,113,113,0.15)}
.pipeline-actions{display:flex;gap:4px;flex-wrap:wrap}
.pipeline-section-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.pipeline-section-title .pipeline-btn{font-size:12px;padding:6px 14px}
.pipeline-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .2s}
.pipeline-card:hover{border-color:rgba(108,99,255,0.3)}
.pipeline-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pipeline-card-title{font-size:14px;font-weight:700;color:#fff}
.pipeline-card-body{font-size:12px;color:#aaa;line-height:1.8;white-space:pre-wrap}
.pipeline-email-preview{background:rgba(0,0,0,0.3);border-radius:10px;padding:14px;margin-top:10px}
.pipeline-email-subject{font-size:13px;font-weight:700;color:#60a5fa;margin-bottom:8px}
.pipeline-email-body{font-size:12px;color:#bbb;line-height:1.8;white-space:pre-wrap}
.pipeline-funnel{display:flex;flex-direction:column;gap:12px;max-width:500px;margin:0 auto 24px}
.pipeline-funnel-row{display:flex;align-items:center;gap:12px}
.pipeline-funnel-label{width:80px;font-size:12px;color:#aaa;text-align:right;flex-shrink:0}
.pipeline-funnel-bar{height:32px;border-radius:6px;display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:700;color:#fff;transition:width .5s;min-width:40px}
.pipeline-funnel-bar.f-new{background:linear-gradient(90deg,#6b7280,#9ca3af)}
.pipeline-funnel-bar.f-contacted{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.pipeline-funnel-bar.f-interested{background:linear-gradient(90deg,#eab308,#facc15)}
.pipeline-funnel-bar.f-converted{background:linear-gradient(90deg,#22c55e,#4ade80)}
.pipeline-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:24px}
.pipeline-stat-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:16px;text-align:center}
.pipeline-stat-value{font-size:28px;font-weight:800;background:linear-gradient(135deg,#a89fff,#48d1cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pipeline-stat-label{font-size:11px;color:#888;margin-top:4px}
.pipeline-optimize-box{background:rgba(108,99,255,0.06);border:1px solid rgba(108,99,255,0.2);border-radius:12px;padding:20px;margin-top:16px;font-size:13px;color:#d0d0f0;line-height:1.8;white-space:pre-wrap}
.pipeline-industry-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pipeline-industry-tag{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:4px 14px;font-size:11px;color:#aaa}
.pipeline-status-select{background:#1a1a36;border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:#ccc;font-size:11px;padding:3px 6px;cursor:pointer}