/* ===================== ROLE BADGE ===================== */
.role-badge{
  display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:16px;
  font-size:10px;font-weight:700;cursor:pointer;transition:.2s;border:1px solid var(--bdr)
}
.role-badge:hover{background:var(--bg3)}

/* ===================== ROLE TAG on desk cards ===================== */
.type-tag{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  font-size:7px;padding:1px 5px;border-radius:3px;white-space:nowrap;font-weight:700
}
.type-human{background:#e17055;color:#fff}
.type-ai{background:#00d2d3;color:#000}
.type-hybrid{background:#7c3aed;color:#fff}

/* ===================== MY ROLE GLOW ===================== */
.desk.my-role{
  border-color:var(--gold)!important;
  box-shadow:0 0 20px rgba(255,215,0,.35),0 0 40px rgba(255,215,0,.15)!important;
}
.desk.my-role::after{
  content:'◄ MY ROLE';font-family:'Press Start 2P';font-size:6px;
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  color:var(--gold);white-space:nowrap
}

/* ===================== NOTIFICATION ===================== */
.notif{
  position:fixed;top:58px;right:12px;background:var(--bg2);border:1px solid var(--bdr);
  border-left:3px solid var(--cyan);border-radius:8px;padding:9px 14px;font-size:11px;
  z-index:800;animation:nin .3s ease;max-width:280px;pointer-events:none
}
@keyframes nin{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes nout{from{opacity:1}to{opacity:0;transform:translateX(110%)}}

/* ===================== OVERLAY ===================== */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299}
.overlay.vis{display:block}

/* ===================== AI MODAL ===================== */
.mbg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:900;
  align-items:center;justify-content:center}
.mbg.vis{display:flex}
.modal{background:var(--bg2);border:1px solid var(--bdr);border-radius:14px;
  padding:22px;width:min(420px,90vw)}
.mtitle{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.minp{width:100%;background:var(--bg3);border:1px solid var(--bdr);border-radius:8px;
  padding:10px 12px;color:var(--txt0);font-size:13px;outline:none;
  font-family:'Noto Sans Lao','Inter',sans-serif;resize:vertical;min-height:80px;margin-bottom:14px}
.minp:focus{border-color:var(--purple)}
.macts{display:flex;gap:8px;justify-content:flex-end}
.mok{padding:8px 18px;border-radius:7px;border:none;font-size:12px;cursor:pointer;
  font-weight:600;background:var(--purple);color:#fff}
.mcancel{padding:8px 18px;border-radius:7px;font-size:12px;cursor:pointer;
  font-weight:600;background:var(--bg3);color:var(--txt1);border:1px solid var(--bdr)}

/* ===================== CHANGE PIN MODAL ===================== */
#changePinModal .modal{width:min(360px,92vw)}
.cp-label{font-size:11px;color:var(--txt2);display:block;margin-bottom:5px;
  font-family:'Noto Sans Lao',sans-serif}
.cp-inp{
  width:100%;background:var(--bg3);border:1.5px solid var(--bdr);border-radius:10px;
  padding:10px;color:var(--txt0);font-size:24px;letter-spacing:12px;text-align:center;
  outline:none;font-family:monospace;transition:.2s;margin-bottom:12px;
  -webkit-text-security:disc;appearance:none
}
.cp-inp:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.cp-inp.err{border-color:var(--orange)}
.cp-inp.ok{border-color:var(--green)}
.cp-err{min-height:20px;font-size:11px;color:var(--orange);text-align:center;
  margin-bottom:10px;font-family:'Noto Sans Lao',sans-serif}
.cp-ok{min-height:20px;font-size:11px;color:var(--green);text-align:center;
  margin-bottom:10px;font-family:'Noto Sans Lao',sans-serif}
.cp-tip{font-size:10px;color:var(--txt2);text-align:center;
  font-family:'Noto Sans Lao',sans-serif;margin-bottom:14px;line-height:1.6}