/* ===================== OFFICE AREA ===================== */
.office{flex:1;overflow:hidden;position:relative;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(124,58,237,.06) 0%,transparent 60%),
    radial-gradient(ellipse at 70% 80%,rgba(0,210,211,.04) 0%,transparent 60%),
    var(--bg0)}
.office-scroll{width:100%;height:100%;overflow:auto;padding:16px}
.office-grid{display:flex;flex-direction:column;gap:14px;min-width:660px}

/* ===================== DEPT ZONE ===================== */
.dzone{border:1.5px solid;border-radius:12px;padding:14px 14px 10px;position:relative;
  background:rgba(0,0,0,.22)}
.dzone[data-d=exec]{border-color:rgba(124,58,237,.45)}
.dzone[data-d=tech]{border-color:rgba(9,132,227,.45)}
.dzone[data-d=design]{border-color:rgba(232,67,147,.45)}
.dzone[data-d=biz]{border-color:rgba(0,184,148,.45)}
.dzone[data-d=supp]{border-color:rgba(225,112,85,.45)}
.dzone-lbl{
  position:absolute;top:-10px;left:14px;padding:2px 10px;border-radius:4px;
  font-family:'Press Start 2P';font-size:7px;white-space:nowrap
}
.dzone[data-d=exec] .dzone-lbl{background:var(--exec)}
.dzone[data-d=tech] .dzone-lbl{background:var(--tech)}
.dzone[data-d=design] .dzone-lbl{background:var(--design)}
.dzone[data-d=biz] .dzone-lbl{background:var(--biz)}
.dzone[data-d=supp] .dzone-lbl{background:var(--supp)}
.desks{display:flex;gap:10px;flex-wrap:wrap}

/* ===================== DESK CARD ===================== */
.desk{
  width:118px;background:var(--bg2);border:1px solid var(--bdr);border-radius:10px;
  padding:10px 8px;cursor:pointer;transition:all .2s;position:relative;user-select:none;
  display:flex;flex-direction:column;align-items:center
}
.desk:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.5);border-color:var(--bdr2)}
.desk.sel{border-color:var(--purple);box-shadow:0 0 16px rgba(124,58,237,.4)}
.desk:active{transform:translateY(-1px)}
.ai-badge{
  position:absolute;top:7px;right:7px;background:var(--cyan);color:#000;
  font-family:'Press Start 2P';font-size:6px;padding:1px 4px;border-radius:3px;font-weight:700
}
.cw{position:relative;display:flex;justify-content:center;margin-bottom:4px}
.csVG{image-rendering:pixelated;image-rendering:crisp-edges;
  animation:bob 2.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.desk:hover .csVG{animation:wrk .35s steps(2) infinite}
@keyframes wrk{0%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}100%{transform:translateY(0) rotate(-3deg)}}
.cdot{position:absolute;bottom:1px;right:10px;width:9px;height:9px;border-radius:50%;border:2px solid var(--bg2)}
.don{background:var(--green);box-shadow:0 0 5px var(--green)}
.dbusy{background:#f59e0b;box-shadow:0 0 4px #f59e0b}
.daway{background:var(--txt3)}
.cname{font-size:10px;font-weight:700;text-align:center;color:var(--txt0);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.clao{font-family:'Noto Sans Lao';font-size:8px;color:var(--txt1);text-align:center;
  line-height:1.4;margin-top:1px;width:100%;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cact{font-size:8px;color:var(--cyan);text-align:center;margin-top:4px;
  min-height:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  width:100%;transition:opacity .3s}
.dtbl{width:100%;height:7px;background:linear-gradient(180deg,#3d2b1f,#2a1e14);
  border-radius:3px;margin-top:6px;position:relative}
.dtbl::before{content:'💻';position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:10px}

/* ===================== 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
}

/* ===================== DEPT ENTER BTN ===================== */
.dzone-enter{
  position:absolute;top:-10px;right:10px;
  background:var(--bg3);border:1px solid var(--bdr2);
  color:var(--cyan);font-size:9px;font-family:'Press Start 2P';
  padding:2px 10px;border-radius:4px;cursor:pointer;transition:.2s;
}
.dzone-enter:hover{background:var(--purple);border-color:var(--purple);color:#fff}