.character {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 64px;
  margin-left: -19px;
  margin-top: -60px;
  border: 0;
  background: none;
  padding: 0;
  overflow: visible;
  color: #32402d;
  will-change: transform;
}
.character:focus-visible {
  outline-offset: 8px;
  border-radius: 20px;
}
.char-shadow {
  position: absolute;
  left: 3px;
  bottom: -3px;
  width: 33px;
  height: 11px;
  background: #334e3940;
  border-radius: 50%;
  filter: blur(1px);
}
.char-person {
  position: absolute;
  inset: 0;
  transform-origin: 50% 90%;
  animation: breathe 3s ease-in-out infinite;
}
.char-head {
  position: absolute;
  left: 10px;
  top: 1px;
  width: 21px;
  height: 23px;
  background: var(--skin);
  border-radius: 7px 7px 8px 8px;
  box-shadow: inset -4px -2px 0 #80523718;
  z-index: 3;
}
.char-head:before {
  content: "";
  position: absolute;
  left: -1px;
  top: -3px;
  width: 23px;
  height: 11px;
  border-radius: 9px 8px 4px 0;
  background: var(--hair);
  box-shadow: -1px 5px 0 -1px var(--hair);
}
.char-head:after {
  content: "· ·";
  white-space: pre;
  position: absolute;
  left: 5px;
  top: 6px;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 13px;
  font-weight: 800;
  color: #403c2f;
}
.char-body {
  position: absolute;
  left: 7px;
  top: 25px;
  width: 27px;
  height: 24px;
  background: var(--agent-color);
  border-radius: 8px 8px 4px 4px;
  box-shadow: inset -5px 0 #17302a22;
  z-index: 2;
}
.char-body:after {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  width: 6px;
  height: 9px;
  background: #e1e3d7;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.char-arm {
  position: absolute;
  top: 26px;
  width: 8px;
  height: 24px;
  border-radius: 5px;
  background: var(--agent-color);
  border-bottom: 7px solid var(--skin);
  transform-origin: 50% 10%;
  z-index: 3;
}
.arm-left {
  left: 2px;
  transform: rotate(6deg);
}
.arm-right {
  right: 0;
  transform: rotate(-6deg);
}
.char-leg {
  position: absolute;
  top: 45px;
  width: 10px;
  height: 17px;
  background: #3c4a41;
  border-radius: 1px 1px 3px 3px;
  border-bottom: 5px solid #e4e4cf;
  z-index: 1;
  transform-origin: top;
}
.leg-one {
  left: 9px;
}
.leg-two {
  left: 22px;
}
.character.walking .char-person {
  animation: walk-bob 0.32s ease-in-out infinite;
}
.character.walking .leg-one,
.character.walking .arm-right {
  animation: walk-limb 0.32s ease-in-out infinite alternate;
}
.character.walking .leg-two,
.character.walking .arm-left {
  animation: walk-limb 0.32s ease-in-out infinite alternate-reverse;
}
.character.working .arm-left,
.character.working .arm-right {
  animation: typing 0.5s ease-in-out infinite alternate;
}
.character.working .arm-right {
  animation-delay: 0.2s;
}
.character.facing-left .char-person {
  scale: -1 1;
}
.character[data-mode="coffee"] .arm-right {
  transform: rotate(-75deg);
}
.character[data-mode="coffee"] .arm-right:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -2px;
  width: 9px;
  height: 9px;
  background: #eee7cc;
  border-top: 2px solid #89745d;
}
.char-name {
  position: absolute;
  left: 50%;
  top: 74px;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.7px;
  background: #eef1dcde;
  border: 1px solid #f4f6e5;
  padding: 4px 7px;
  border-radius: 4px;
  white-space: nowrap;
  color: #4d6544;
  box-shadow: 0 2px 5px #455e2f12;
}
.character.selected .char-name {
  background: #263d2e;
  color: #e1f1c8;
  border-color: #758f5e;
}
.selection-ring {
  position: absolute;
  width: 50px;
  height: 17px;
  left: -5px;
  bottom: -6px;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: 0.2s;
}
.character.selected .selection-ring {
  border-color: var(--agent-color);
  background: #e5f2cf30;
}
.campus-viewport { height: min(80vh, 900px) !important; min-height: 540px; }
.campus-viewport #officeScene, .campus-viewport .scene-atmosphere { display: none; }
.campus-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; }
.campus-canvas:active { cursor:grabbing; }
.campus-toolbar { position:absolute; top:12px; left:12px; right:12px; z-index:200; display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:#14291fee; border:1px solid #56705e; border-radius:8px; padding:10px; color:#c9e3d1; font:11px system-ui; }
.campus-toolbar select,.campus-toolbar button { padding:7px; border:1px solid #5b7762; border-radius:4px; background:#294536; color:#e1edda; max-width:240px; }
.campus-toolbar small { color:#9cb5a4; }
.campus-detail { position:absolute; bottom:58px; left:12px; right:12px; z-index:200; padding:12px; background:#14291fee; color:#e1edd9; border:1px solid #719076; border-radius:6px; font:12px system-ui; }
.campus-toolbar input { width:140px; padding:7px; background:#294536; border:1px solid #5b7762; border-radius:4px; color:#e1edda; }
.campus-sprites {position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3;}
.campus-sprite {position:absolute;left:0;top:0;transform-origin:0 0;}
.campus-sprite .character {pointer-events:auto;cursor:pointer;}
.campus-sprite .compact-label .char-name,.campus-sprite .compact-label .agent-pnl-tag {visibility:hidden;}
.campus-sprite .char-body {background:linear-gradient(90deg,#edf0e9 0 22%,var(--agent-color) 22% 78%,#fff 78%);}
.campus-sprite .char-arm {background:#eef0e7;}
.campus-minimap {position:absolute;right:15px;bottom:85px;z-index:201;display:grid;grid-template-columns:repeat(2,28px);gap:4px;padding:8px;background:#20392bdd;border:1px solid #8da886;border-radius:7px;}
.campus-minimap button {background:#718e70;color:#edf4df;border:0;border-radius:3px;padding:6px;cursor:pointer;font-size:9px;}
.campus-toolbar {z-index:202;}

#customerCampus{position:relative;overflow:hidden;border-radius:12px;border:1px solid #516443;margin:20px 0}
.campus-toolbar label{max-width:200px}.campus-toolbar select{width:auto}.campus-detail .campus-agent-fields{display:none}
.campus-agent-heading{display:flex;justify-content:space-between;align-items:center}.campus-agent-heading small{display:block}.campus-agent-foot{margin-top:10px;font-size:10px}
.campus-sprite .agent-pnl-tag{display:none}
.community-chat{border:1px solid var(--line);padding:24px;border-radius:12px;background:var(--panel)}
.community-chat label{display:block;color:var(--muted);font-size:12px}.chat-controls{display:grid;grid-template-columns:1fr 1fr;gap:15px}
#conversation{height:230px;overflow:auto;margin:18px 0;border:1px solid var(--line);padding:15px;background:var(--bg);border-radius:8px}
#conversation article{border-bottom:1px solid var(--line);padding:12px 0}#conversation small{color:var(--accent);font-size:11px}#conversation p{margin:6px 0;overflow-wrap:anywhere}

@keyframes breathe{50%{transform:translateY(-1px)}}@keyframes walk-bob{50%{transform:translateY(-3px)}}@keyframes walk-limb{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}@keyframes typing{to{transform:rotate(-12deg)}}
@media(prefers-reduced-motion:reduce){.char-person,.char-leg,.char-arm{animation:none!important}}


/* ---------- Room chat docked inside the office map ---------- */
.oc-chat{position:absolute;left:12px;bottom:12px;z-index:24;width:min(360px,calc(100% - 24px));font-family:'DM Sans',system-ui,sans-serif}
.oc-viewport:has(.oc-chat) .oc-status{bottom:76px}
.oc-viewport:has(.oc-chat[data-open="true"]) .oc-status{display:none}
.oc-chat-pill{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:16px;border:1px solid #2a3a4f;background:#0b1119ee;backdrop-filter:blur(8px);color:#eef3f9;text-align:left;box-shadow:0 10px 26px #0008;cursor:pointer}
.oc-chat-pill:hover{border-color:#3ee6a2;filter:none}
.oc-chat[data-open="true"] .oc-chat-pill{display:none}
.oc-chat-icon{font-size:20px;flex:none}
.oc-chat-pill-text{display:grid;min-width:0;flex:1}
.oc-chat-pill-text strong{font-size:13px}
.oc-chat-pill-text small{font-size:12px;color:#8e9bb0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-chat-unread{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#e2574c;color:#fff;font:700 11px/22px system-ui,sans-serif;text-align:center;flex:none}
.oc-chat-panel{display:flex;flex-direction:column;height:min(480px,calc(var(--oc-h,600px) - 110px));max-height:calc(100vh - 160px);min-height:280px;border-radius:18px;border:1px solid #2a3a4f;background:#0b1119f5;backdrop-filter:blur(10px);box-shadow:0 16px 40px #000a;overflow:hidden;animation:oc-chat-in .18s ease-out}
@keyframes oc-chat-in{from{transform:translateY(10px);opacity:0}}
.oc-chat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 6px}
.oc-chat-top strong{font-size:15px;color:#f1f5fa}
.oc-chat-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#43d6a0;margin-right:8px;box-shadow:0 0 0 3px #43d6a033}
.oc-chat-close{width:32px;height:32px;padding:0;border-radius:10px;font-size:16px;line-height:1}
.oc-chat-room{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;margin:0 14px!important;font-size:11px;color:#8e9bb0}
.oc-chat-room select{flex:1;padding:6px 8px;font-size:12px;border-radius:8px}
.oc-chat-note{margin:6px 14px 0;font-size:11px;line-height:1.4;color:#7f978a}
.oc-chat .leader-call{margin:8px 12px 0;padding:10px;gap:8px}
.oc-chat .leader-call p{display:none}.oc-chat .leader-call form{min-width:0}
.oc-chat .leader-call button{padding:8px 10px;font-size:12px;width:auto}
.oc-chat-log{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:3px;padding:12px 12px 8px;margin-top:8px;border-top:1px solid #1c2735}
.oc-chat-empty{margin:auto;text-align:center;color:#8e9bb0;font-size:13px}
.oc-msg{display:flex;align-items:flex-end;gap:7px;max-width:100%}
.oc-msg.first{margin-top:8px}
.oc-msg.mine{justify-content:flex-end}
.oc-msg-avatar{width:26px;height:26px;border-radius:9px;flex:none;display:grid;place-items:center;font:800 12px system-ui,sans-serif;color:#15210f}
.oc-msg-bubble{max-width:78%;padding:7px 10px 4px;border-radius:14px;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.oc-msg.theirs .oc-msg-bubble{background:#1f2f28;border:1px solid #2e4239;color:#eef3f9}
.oc-msg.theirs.first .oc-msg-bubble{border-bottom-left-radius:4px}
.oc-msg.mine .oc-msg-bubble{background:#3ee6a2;color:#03150d}
.oc-msg.mine.first .oc-msg-bubble{border-bottom-right-radius:4px}
.oc-msg-bubble strong{display:block;font-size:11px;color:#43d6a0;margin-bottom:1px}
.oc-msg-bubble p{margin:0;color:inherit;line-height:1.45}
.oc-msg-to{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:6px;background:#00000026;margin-bottom:3px}
.oc-msg-bubble time{display:block;text-align:right;font-size:10px;opacity:.55;margin-top:2px}
.oc-chat-form{display:grid!important;padding:8px 10px 10px;border-top:1px solid #1c2735;display:grid;gap:6px}
.oc-chat-form select{padding:5px 8px;font-size:11.5px;border-radius:8px;width:auto;justify-self:start;max-width:100%}
.oc-chat-input{display:flex;align-items:flex-end;gap:6px;background:#080d14;border:1px solid #2a3a4f;border-radius:14px;padding:5px 5px 5px 12px}
.oc-chat-input:focus-within{border-color:#3ee6a2}
.oc-chat-input textarea{flex:1;min-width:0;width:auto;height:auto;border:0;background:none;color:#f1f5fa;font:13.5px/1.4 'DM Sans',sans-serif;resize:none;padding:6px 0;max-height:96px;outline:none}
.oc-chat-input button{width:36px;height:36px;padding:0;border-radius:10px;border:0;background:#3ee6a2;color:#03150d;font-size:15px;flex:none}
.oc-chat-input button:disabled{opacity:.35;cursor:default}
@media(max-width:700px){.oc-chat{width:calc(100% - 24px)}.oc-chat-panel{height:min(440px,calc(var(--oc-h,600px) - 110px))}}
@media(prefers-reduced-motion:reduce){.oc-chat-panel{animation:none}}

/* ---------- Voice bar (mobile-first) ---------- */
.oc-chat-voice{margin:8px 14px 0;padding:10px 12px;border-radius:12px;border:1px solid #4d6a45;background:#10261d;color:#d7f0c8;font:700 13px 'DM Sans',system-ui,sans-serif;width:auto;min-height:44px}
.oc-chat-voice:hover{border-color:#3ee6a2;filter:none}
.oc-voice{position:absolute;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:25;padding:10px 12px 12px;border-radius:18px;border:1px solid #2a3a4f;background:#0b1119f5;backdrop-filter:blur(10px);box-shadow:0 14px 36px #000a;color:#eef3f9;font-family:'DM Sans',system-ui,sans-serif;max-width:720px;margin:0 auto}
.oc-viewport:has(.oc-voice:not([hidden])) .oc-chat{bottom:calc(12px + var(--oc-voice-h,196px))}
/* the chat must fit between the toolbar and the voice bar, so its close button stays reachable */
.oc-viewport:has(.oc-voice:not([hidden])) .oc-chat-panel{min-height:0;max-height:calc(var(--oc-h,600px) - var(--oc-voice-h,196px) - 24px)}
.oc-viewport:has(.oc-voice:not([hidden])) .oc-status{display:none}
.oc-voice-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.oc-voice-top>div{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.oc-voice-top strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.oc-voice-top small{font-size:11.5px;color:#8e9bb0}
.oc-voice-live{width:9px;height:9px;border-radius:50%;background:#dfcc92;align-self:center;flex:none}
.oc-voice-live.live{background:#e2574c;box-shadow:0 0 0 0 #e2574c88;animation:oc-live 1.6s infinite}
@keyframes oc-live{70%{box-shadow:0 0 0 7px #e2574c00}100%{box-shadow:0 0 0 0 #e2574c00}}
.oc-voice-queue{padding:4px 8px;border-radius:999px;background:#3a2f12;border:1px solid #7a6431;color:#f2d38b;font-size:12px;font-weight:700}
.oc-voice-muteall{padding:6px 10px;font-size:12px;border-radius:9px;min-height:36px;width:auto}
.oc-voice-people{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.oc-voice-person{flex:none;scroll-snap-align:start;display:grid;justify-items:center;gap:3px;width:68px;padding:6px 2px;border-radius:12px;border:1px solid transparent;background:none;color:#eef3f9;font:12px system-ui,sans-serif;min-height:auto}
.oc-voice-person:not(:disabled){cursor:pointer}.oc-voice-person:not(:disabled):hover{border-color:#2a3a4f;filter:none}
.oc-voice-person:disabled{opacity:1;cursor:default}
.oc-voice-person small{font-size:9.5px;color:#f2d38b}
.oc-voice-name{max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
.oc-voice-avatar{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#1f2d3d;border:2px solid #2a3a4f;transition:box-shadow .15s}
.oc-voice-avatar b{font:800 17px system-ui,sans-serif;color:#eef3f9}
.oc-voice-avatar.speaking{border-color:#57b36a;box-shadow:0 0 0 4px #57b36a55}
.oc-voice-hand{position:absolute;top:-8px;right:-8px;font-style:normal;font-size:17px;animation:oc-wave 1s ease-in-out infinite;transform-origin:70% 90%}
@keyframes oc-wave{50%{transform:rotate(18deg)}}
.oc-voice-mute{position:absolute;bottom:-4px;right:-4px;font-style:normal;font-size:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#0b1119;border:1px solid #2a3a4f}
.oc-voice-controls{display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:8px}
.oc-voice-controls button{display:grid;justify-items:center;gap:2px;min-height:56px;padding:6px;border-radius:14px;font:600 11.5px system-ui,sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.oc-voice-controls button span{font-size:20px;line-height:1.1}
.oc-voice-mic{background:#2a1a16;border:1px solid #6b3b31;color:#f0c2b6}
.oc-voice-mic.on{background:#3ee6a2;border-color:#3ee6a2;color:#03150d}
.oc-voice-mic.locked{background:#221a10;border-color:#7a6431;color:#f2d38b}
.oc-voice-handbtn.on{background:#3a2f12;border-color:#c9a45c;color:#f2d38b}
.oc-voice-leave{background:#b0413e;border-color:#b0413e;color:#fff}
.oc-voice-sheet{position:absolute;left:10px;right:10px;bottom:calc(100% + 8px);display:grid;gap:6px;padding:12px;border-radius:16px;background:#111a25;border:1px solid #2a3a4f;box-shadow:0 12px 30px #000c}
.oc-voice-sheet strong{font-size:13px;margin-bottom:2px}
.oc-voice-sheet button{min-height:46px;text-align:left;border-radius:12px;font-size:14px}
.oc-voice-sheet .ghost{background:none;text-align:center}
/* Layout follows the MAP's width, not the page's: on narrow maps the chat sits above the voice bar. */
#customerCampus.oc-viewport{container-type:inline-size;container-name:office}
.oc-viewport:has(.oc-voice:not([hidden])) .oc-minimap{display:none}
@container office (min-width: 900px){.oc-voice{left:auto;right:12px;width:420px}.oc-viewport:has(.oc-voice:not([hidden])) .oc-chat{bottom:12px}.oc-viewport:has(.oc-voice:not([hidden])) .oc-chat-panel{min-height:280px;max-height:calc(100vh - 160px)}}
@media(prefers-reduced-motion:reduce){.oc-voice-live.live,.oc-voice-hand{animation:none}}
/* touch devices: near-opaque overlays over a live canvas, blur costs frames for nothing */
@media (pointer:coarse){.oc-chat-pill,.oc-chat-panel,.oc-voice{-webkit-backdrop-filter:none;backdrop-filter:none}.oc-chat-pill{background:#0b1119f5}}