/* ═══ WHATSAPP ═══ */
/* ═══ WA HUB — Redesigned 3-column layout ═══ */
.wa-hub{
  display:grid;
  grid-template-columns:260px 1fr 300px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#0B1320;
  height:calc(100vh - 180px);
  min-height:520px;
  max-height:900px;
}
/* ── Column 1: Channel sidebar ── */
.wa-channels{
  display:flex;flex-direction:column;
  background:#0F1923;
  border-right:1px solid rgba(255,255,255,.07);
  overflow:hidden;
}
.wa-channels-header{
  padding:16px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.wa-channels-title{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:rgba(255,255,255,.35);margin-bottom:10px;
}
.wa-channel-search{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;color:#fff;font-size:12px;padding:7px 10px;outline:none;
}
.wa-channel-search::placeholder{color:rgba(255,255,255,.25);}
.wa-channel-section{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.2);padding:10px 14px 4px;flex-shrink:0;
}
.wa-channels-list{flex:1;overflow-y:auto;padding:4px 6px 8px;}
.wa-channel-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;cursor:pointer;
  margin-bottom:2px;border:1px solid transparent;
  transition:background .12s,border-color .12s;
  position:relative;
}
.wa-channel-item:hover{background:rgba(255,255,255,.05);}
.wa-channel-item.active{
  background:rgba(37,211,102,.1);
  border-color:rgba(37,211,102,.18);
}
.wa-ch-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;
  flex-shrink:0;position:relative;
}
.wa-ch-online-dot{
  position:absolute;bottom:0;right:0;
  width:9px;height:9px;border-radius:50%;
  background:#25D366;border:2px solid #0F1923;
}
.wa-ch-info{flex:1;min-width:0;}
.wa-ch-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wa-ch-preview{font-size:11px;color:rgba(255,255,255,.35);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.wa-ch-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;}
.wa-ch-time{font-size:10px;color:rgba(255,255,255,.25);}
.wa-ch-badge{
  min-width:18px;height:18px;border-radius:9px;
  background:#25D366;color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
/* ── Column 2: Message thread ── */
.wa-thread{
  display:flex;flex-direction:column;
  background:#0A1628;
  overflow:hidden;
}
.wa-thread-header{
  padding:12px 16px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.wa-thread-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;flex-shrink:0;
}
.wa-thread-name{font-size:14px;font-weight:700;color:#fff;}
.wa-thread-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:1px;}
.wa-thread-actions{margin-left:auto;display:flex;gap:6px;}
.wa-thread-action-btn{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;color:rgba(255,255,255,.6);font-size:12px;
  padding:5px 10px;cursor:pointer;transition:all .12s;white-space:nowrap;
}
.wa-thread-action-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.wa-messages-area{
  flex:1;overflow-y:auto;padding:16px 14px;
  display:flex;flex-direction:column;gap:6px;min-height:0;
}
.wa-msg{max-width:75%;display:flex;flex-direction:column;}
.wa-msg.out{align-self:flex-end}
.wa-msg.in{align-self:flex-start}
.wa-bubble{padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.5;}
.wa-msg.out .wa-bubble{background:#005C4B;color:rgba(255,255,255,.92);border-radius:14px 2px 14px 14px;}
.wa-msg.in .wa-bubble{background:#1E2B38;color:rgba(255,255,255,.92);border-radius:2px 14px 14px 14px;}
.wa-bubble.milestone{background:rgba(212,168,67,.18);border:1px solid rgba(212,168,67,.35);}
.wa-bubble.alert-msg{background:rgba(214,59,59,.18);border:1px solid rgba(214,59,59,.35);}
.wa-bubble.success-msg{background:rgba(16,160,106,.18);border:1px solid rgba(16,160,106,.35);}
.wa-sender{font-size:11px;color:#25D366;font-weight:600;margin-bottom:3px;}
.wa-time{font-size:10px;color:rgba(255,255,255,.28);text-align:right;margin-top:3px;}
.wa-divider{text-align:center;font-size:10px;color:rgba(255,255,255,.2);
  margin:10px 0;display:flex;align-items:center;gap:8px;}
.wa-divider::before,.wa-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08);}
/* ── Column 2: Compose bar ── */
.wa-compose-bar{
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.wa-compose-row{display:flex;gap:8px;align-items:flex-end;}
.wa-compose-input{
  flex:1;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;color:#fff;font-size:13px;
  padding:10px 14px;outline:none;resize:none;
  min-height:42px;max-height:120px;line-height:1.5;
  transition:border-color .15s;
}
.wa-compose-input:focus{border-color:rgba(37,211,102,.4);}
.wa-compose-input::placeholder{color:rgba(255,255,255,.25);}
.wa-send-btn{
  background:#25D366;border:none;border-radius:12px;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:background .15s;
}
.wa-send-btn:hover{background:#20be5a;}
.wa-compose-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:6px;
}
.wa-char-count{font-size:10px;color:rgba(255,255,255,.25);}
.wa-compose-target{
  font-size:10px;color:rgba(255,255,255,.35);
  display:flex;align-items:center;gap:4px;
}
/* ── Column 3: Tools panel ── */
.wa-tools{
  display:flex;flex-direction:column;
  background:#0F1923;
  border-left:1px solid rgba(255,255,255,.07);
  overflow-y:auto;
}
.wa-tools-section{
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.wa-tools-label{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:10px;
}
.wa-tpl-grid{display:flex;flex-direction:column;gap:5px;}
.wa-tpl-btn{
  padding:9px 12px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);border-radius:9px;
  color:rgba(255,255,255,.7);font-size:12px;cursor:pointer;
  text-align:left;font-family:'Outfit',sans-serif;
  transition:all .12s;display:flex;align-items:center;gap:8px;
}
.wa-tpl-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(37,211,102,.3);color:#fff;}
.wa-tpl-icon{font-size:15px;flex-shrink:0;width:20px;text-align:center;}
.wa-autonotif{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:12px;font-size:12px;
  color:rgba(255,255,255,.5);line-height:1.6;
}
.wa-autonotif strong{color:rgba(255,255,255,.75);}
.wa-member-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.wa-member-row:last-child{border-bottom:none;}
.wa-member-avatar{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.wa-member-name{font-size:12px;color:rgba(255,255,255,.7);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wa-member-role{font-size:10px;color:rgba(255,255,255,.3);}
/* ── legacy aliases kept for team portal ── */
.wa-wrap{display:grid;grid-template-columns:1fr 220px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--ink3);height:clamp(480px,calc(100vh - 160px),800px);max-height:calc(100vh - 160px)}
.wa-left{display:flex;flex-direction:column;background:#0A1628;height:100%;overflow:hidden}
.wa-right{background:var(--ink2);border-left:1px solid rgba(255,255,255,.08);overflow-y:auto}
.wa-quick-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.wa-quick-btn{font-size:10px;padding:4px 9px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.55);cursor:pointer;transition:all .12s}
.wa-quick-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.wa-groups-panel{padding:12px}
.wa-groups-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.wa-gp-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;margin-bottom:4px;border:1px solid transparent;transition:all .12s}
.wa-gp-item:hover{background:rgba(255,255,255,.06)}
.wa-gp-item.active{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.2)}
.wa-gp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.wa-gp-name{font-size:12px;color:rgba(255,255,255,.7);flex:1}
.wa-gp-cnt{font-size:10px;background:var(--wa);color:#fff;border-radius:10px;padding:1px 5px}
.wa-input-wrap{padding:10px;background:var(--ink2);border-top:1px solid rgba(255,255,255,.08);flex-shrink:0;overflow-y:auto;max-height:200px}