*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#141715;color:#eee8dc}
button,input{font:inherit}button{cursor:pointer}
#app{display:none}
#office-root{position:fixed;inset:0;z-index:100}

.pixel-office{width:100vw;height:100vh;background:#171a18}

.office-topbar{
 height:60px;display:flex;align-items:center;justify-content:space-between;
 padding:0 18px;background:rgba(30,34,31,.94);border-bottom:1px solid #343a35;
 position:relative;z-index:30
}
.topbar-left,.topbar-controls,.office-live-status{display:flex;align-items:center;gap:11px}
.icon-button,.small-button{border:1px solid #424941;background:#292e2b;color:#eee8dc;border-radius:7px}
.icon-button{width:35px;height:34px}.small-button{min-width:28px;height:27px}
.topbar-title strong,.topbar-title span{display:block}
.topbar-title strong{font-size:12px;letter-spacing:.13em}
.topbar-title span{font-size:8px;color:#7f8980;margin-top:3px}
.office-live-status{font-size:9px;color:#a8afa8;text-transform:uppercase}
.live-dot{width:6px;height:6px;border-radius:50%;background:#8cbb78;box-shadow:0 0 9px #8cbb78}

.office-body{height:calc(100vh - 60px);display:flex}
.scene-wrap{position:relative;flex:1;overflow:hidden;background:#222723}

.ambient-light{
 position:absolute;inset:0;z-index:1;pointer-events:none;
 background:
 radial-gradient(ellipse at 32% 42%,rgba(255,204,127,.13),transparent 28%),
 radial-gradient(ellipse at 72% 65%,rgba(255,190,102,.10),transparent 30%),
 radial-gradient(ellipse at 55% 15%,rgba(255,225,157,.07),transparent 25%),
 linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.3))
}

.office-world{
 position:absolute;width:min(1100px,90vw);height:min(770px,83vh);
 left:50%;top:50%;transform-origin:center center;z-index:3;
 transition:transform .45s cubic-bezier(.2,.8,.2,1)
}

.floor{
 position:absolute;inset:0;border:13px solid #40382f;border-radius:13px;
 overflow:hidden;background:#81745d;
 box-shadow:0 35px 70px rgba(0,0,0,.5),inset 0 0 0 5px #a28e6d
}

.room{
 position:absolute;border:3px solid #584c3d;
 background-color:#756a57;
 background-image:
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
 background-size:22px 22px;
 box-shadow:inset 0 0 40px rgba(0,0,0,.13)
}
.lobby{background-color:#81755f}.ev-room{background-color:#6d6251}
.main-office{background-color:#77705c}.cafeteria{background-color:#806e55}
.meeting{background-color:#6f6756}.lounge{background-color:#796b57}

.room-label{
 position:absolute;left:12px;top:9px;color:rgba(255,241,207,.43);
 font-size:8px;font-weight:bold;letter-spacing:.15em
}

.furniture{
 position:absolute;z-index:4;display:grid;place-items:center;
 border:3px solid #4b4034;background:#55483a;color:#d8c6a4;
 box-shadow:4px 5px 0 #3b332b,inset 0 2px rgba(255,255,255,.07);
 font-size:7px;letter-spacing:.08em
}
.furniture small{display:block;font-size:6px;margin-top:2px;color:#9da99e}

.reception{left:6%;top:7%;width:20%;height:7%}
.lobby-sofa{left:61%;top:7%;width:18%;height:7%;background:#5c5147}
.lobby-table{left:82%;top:7%;width:8%;height:7%}
.manager-desk{left:7%;top:42%;width:21%;height:9%}
.bookshelf{left:7%;top:25%;width:21%;height:7%}
.desk{width:12%;height:8%;background:#594c3e}
.desk-1{left:39%;top:25%}.desk-2{left:61%;top:25%}
.desk-3{left:39%;top:51%}.desk-4{left:61%;top:51%}
.shelf{width:14%;height:6%;background:#62513e}
.shelf-1{left:84%;top:24%}.shelf-2{left:84%;top:49%}
.coffee-counter{left:7%;top:68%;width:25%;height:7%}
.coffee-table{left:10%;top:79%;width:14%;height:6%}
.dining-table{left:18%;top:89%;width:12%;height:5%}
.fridge{left:6%;top:87%;width:9%;height:8%}
.meeting-table{left:42%;top:87%;width:19%;height:7%}
.whiteboard{left:36%;top:83%;width:6%;height:12%;background:#b4ad9c;color:#534c40}
.meeting-chair{width:4%;height:4%;border-radius:50%}
.c1{left:45%;top:83%}.c2{left:54%;top:94%}
.tv{left:77%;top:83%;width:13%;height:8%;background:#252927;color:#82b9aa;box-shadow:4px 5px #3b332b,0 0 22px rgba(117,187,164,.22)}
.lounge-sofa{left:70%;top:91%;width:25%;height:5%;background:#5b5045}
.arcade{left:91%;top:84%;width:5%;height:9%}
.plant{background:transparent;border:0;box-shadow:none;color:#688660;font-size:25px}
.plant-1{left:27%;top:25%}.plant-2{left:26%;top:48%}
.plant-3{left:74%;top:26%}.plant-4{left:74%;top:51%}
.lamp{width:6px;height:6px;border-radius:50%;background:#f4c775;box-shadow:0 0 15px #f4b95f}

.warm-light{position:absolute;z-index:2;width:150px;height:150px;border-radius:50%;pointer-events:none}
.light-a{left:5%;top:8%;background:radial-gradient(circle,rgba(255,207,132,.22),transparent 68%)}
.light-b{left:43%;top:23%;background:radial-gradient(circle,rgba(255,211,143,.18),transparent 68%)}
.light-c{right:6%;bottom:8%;background:radial-gradient(circle,rgba(255,196,115,.2),transparent 68%)}

.character{
 position:absolute;width:70px;height:84px;transform:translate(-50%,-50%);
 border:0;background:transparent;color:#fff;z-index:10
}
.character-shadow{
 position:absolute;left:50%;top:62px;width:43px;height:11px;translate:-50% 0;
 border-radius:50%;background:rgba(24,21,17,.42)
}
.humanoid{position:absolute;left:50%;top:7px;width:42px;height:58px;translate:-50% 0}
.humanoid i{position:absolute;display:block}
.humanoid .head{
 left:11px;top:9px;width:21px;height:20px;border-radius:45%;
 background:var(--skin);border:2px solid #3b3028;z-index:3
}
.humanoid .hair{
 left:9px;top:5px;width:25px;height:12px;border-radius:55% 55% 30% 30%;
 background:var(--hair);z-index:4
}
.humanoid .body{
 left:8px;top:28px;width:26px;height:25px;border-radius:7px 7px 4px 4px;
 background:var(--shirt);border:2px solid #3b3028
}
.humanoid .arm{
 top:30px;width:7px;height:21px;border-radius:5px;background:var(--skin);z-index:-1;
 transform-origin:top center
}
.humanoid .arm.left{left:3px;transform:rotate(10deg)}
.humanoid .arm.right{right:3px;transform:rotate(-10deg)}
.humanoid .leg{
 top:49px;width:8px;height:15px;border-radius:3px;background:#3f4143;
 transform-origin:top center
}
.humanoid .leg.left{left:10px}.humanoid .leg.right{right:10px}

.character.working .humanoid{animation:work-bob 1.6s ease-in-out infinite}
.character.working .arm.left{animation:type-left .45s infinite alternate}
.character.working .arm.right{animation:type-right .45s infinite alternate}
.character.idle .humanoid{animation:idle-bob 3s ease-in-out infinite}
.character.selected .humanoid{filter:drop-shadow(0 0 7px rgba(242,203,116,.65))}
.character.selected:after{content:"▼";position:absolute;left:50%;top:-10px;translate:-50%;color:#efc96e;animation:arrow .7s infinite alternate}
.character-name{
 position:absolute;top:67px;left:50%;translate:-50%;
 font-size:8px;text-shadow:1px 2px 3px #161512
}

.activity-bubble{
 position:absolute;left:50%;top:-31px;translate:-50%;min-width:125px;
 padding:7px 9px;border:2px solid #51473a;border-radius:7px;
 background:#f1e5ca;color:#42372c;font-size:7px;line-height:1.35;
 box-shadow:3px 4px rgba(48,39,30,.3);z-index:20
}
.activity-bubble:after{
 content:"";position:absolute;bottom:-6px;left:50%;width:8px;height:8px;
 background:#f1e5ca;border-right:2px solid #51473a;border-bottom:2px solid #51473a;
 transform:translateX(-50%) rotate(45deg)
}

.scene-popup{
 position:absolute;right:2%;top:21%;z-index:15;display:flex;gap:9px;align-items:center;
 padding:9px 12px;border:2px solid #594c3e;border-radius:8px;
 background:#f0e4c9;color:#41362b;box-shadow:4px 5px rgba(48,40,31,.25);
 animation:popup 3s ease-in-out infinite
}
.scene-popup strong,.scene-popup small{display:block}
.scene-popup strong{font-size:8px}.scene-popup small{font-size:7px;opacity:.65;margin-top:2px}
.scene-popup>span{font-size:19px;color:#c39851}

.scene-controls{position:absolute;bottom:15px;left:15px;z-index:25}
.scene-controls button{
 border:1px solid #555d56;border-radius:6px;padding:7px 10px;
 background:#252b27;color:#ddd6c8;font-size:8px
}

/* white floating sidebar */
.sidebar-backdrop{position:absolute;inset:0;z-index:40;background:rgba(15,18,16,.16)}
.office-sidebar-panel{
 position:absolute;z-index:50;left:18px;top:18px;bottom:18px;width:345px;
 padding:24px;background:#f7f5ef;color:#333;
 border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);
 overflow:auto
}
.sidebar-close{
 position:absolute;right:15px;top:13px;border:0;background:transparent;
 color:#777;font-size:25px
}
.sidebar-agent-head{display:flex;gap:13px;align-items:center;margin:5px 0 22px}
.sidebar-agent-head small,.ev-sidebar-head small,.white-card>small,.activity-title small{
 color:#999;font-size:7px;letter-spacing:.12em
}
.sidebar-agent-head h2,.ev-sidebar-head h2{margin:3px 0;font-size:20px;color:#292825}
.sidebar-agent-head p,.ev-sidebar-head p{margin:0;color:#888;font-size:8px}
.big-avatar{
 width:55px;height:55px;border-radius:50%;background:#e9e4d9;display:grid;place-items:center
}
.big-avatar>span{width:29px;height:38px;position:relative;display:block}
.big-avatar i{position:absolute;left:5px;top:3px;width:20px;height:29px;border-radius:45%;background:var(--skin);border:2px solid #49382e}
.big-avatar i:before{content:"";position:absolute;left:-2px;top:-4px;width:20px;height:10px;border-radius:50%;background:var(--hair)}

.ev-sidebar-head{padding:10px 0 24px}
.ev-circle{
 width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
 background:#dfbd83;color:#51412e;font-size:10px;font-weight:bold;margin-bottom:15px
}
.ev-sidebar-head h2{font-size:22px}
.ev-sidebar-head p{font-size:9px;line-height:1.6}

.white-card{
 padding:14px;margin-bottom:12px;border:1px solid #e5e1d7;border-radius:10px;background:#fff;
 box-shadow:0 3px 12px rgba(50,45,35,.05)
}
.white-card>strong{display:block;margin:9px 0 13px;font-size:10px;line-height:1.5;color:#3d3a34}
.progress{height:6px;background:#eeeae1;border-radius:20px;overflow:hidden}
.progress div{height:100%;background:#7da587;border-radius:20px}
.progress-info{display:flex;justify-content:space-between;margin-top:6px;color:#aaa;font-size:7px}
.progress-info b{color:#617866}

.chat-message{margin-top:12px;padding:10px;border-radius:7px;background:#f4f1e9}
.chat-message b{font-size:8px}.chat-message p{font-size:8px;line-height:1.5;color:#777;margin:5px 0 0}
.chat-input{display:flex;gap:6px;margin-top:10px}
.chat-input input{flex:1;min-width:0;border:1px solid #dedad1;border-radius:6px;padding:8px;background:#faf9f5;outline:0;font-size:8px}
.chat-input button{width:30px;border:0;border-radius:6px;background:#c59d61;color:#fff}

.activity-list{margin-top:22px}
.activity-title{display:flex;justify-content:space-between;margin-bottom:10px}
.activity-title button{border:0;background:none;color:#aaa;font-size:7px}
.activity-item{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid #ebe8e0}
.activity-item b,.activity-item small{display:block}
.activity-item b{font-size:8px;color:#555}
.activity-item small{font-size:7px;color:#aaa;margin-top:3px}
.green-dot,.yellow-dot,.gray-dot{width:7px;height:7px;border-radius:50%;margin-top:3px;flex:0 0 7px}
.green-dot{background:#80aa89}.yellow-dot{background:#c7a263}.gray-dot{background:#aaa}

@keyframes work-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes idle-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes type-left{from{transform:rotate(5deg)}to{transform:rotate(25deg)}}
@keyframes type-right{from{transform:rotate(-5deg)}to{transform:rotate(-25deg)}}
@keyframes arrow{from{transform:translateY(0)}to{transform:translateY(4px)}}
@keyframes popup{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

@media(max-width:850px){
 .office-live-status{display:none}
 .office-sidebar-panel{width:calc(100% - 36px);max-width:345px}
}

/* =========================================================
   MISTERAHIT OFFICE — INTERIOR POLISH ONLY
   Visual layer only. Do not alter application behavior.
   ========================================================= */

.office-scene,
.office-map,
.office-floor {
  image-rendering: auto;
}

/* richer room depth */
.room,
.room-panel,
.office-room {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.035),
    inset 0 -22px 35px rgba(25,12,5,.16),
    0 10px 25px rgba(0,0,0,.16);
}

/* floor variation */
.room::before,
.room-panel::before,
.office-room::before {
  background-image:
    linear-gradient(rgba(255,220,170,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,220,170,.018) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* carpets */
.rug,
.carpet,
.floor-rug {
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,220,170,.10),
    0 7px 14px rgba(0,0,0,.20) !important;
}

/* desks become furniture, not boxes */
.desk,
.work-desk,
.agent-desk {
  border-radius: 8px 8px 5px 5px !important;
  box-shadow:
    0 6px 9px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.10) !important;
}

/* chairs */
.chair,
.office-chair,
.seat {
  border-radius: 45% 45% 25% 25% !important;
  box-shadow: 0 5px 8px rgba(0,0,0,.22) !important;
}

/* monitors */
.monitor,
.computer,
.screen {
  border-radius: 4px 4px 2px 2px !important;
  box-shadow:
    0 4px 9px rgba(0,0,0,.35),
    inset 0 0 12px rgba(255,190,100,.08) !important;
}

/* keyboard + mouse visual detail when elements exist */
.keyboard,
.mouse,
.keyboards,
.computer-keyboard,
.computer-mouse {
  border-radius: 3px !important;
  box-shadow: 0 3px 5px rgba(0,0,0,.25);
}

/* shelves */
.shelf,
.bookcase,
.bookshelf,
.cabinet {
  box-shadow:
    5px 8px 12px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,220,170,.07) !important;
}

/* plants */
.plant,
.office-plant,
.flower {
  filter: drop-shadow(3px 5px 5px rgba(0,0,0,.28));
}

/* warm desk lights */
.desk-lamp,
.lamp,
.table-lamp {
  filter: drop-shadow(0 0 10px rgba(255,185,85,.48));
}

/* local warm lighting */
.warm-light,
.light-pool,
.ambient-light {
  pointer-events: none;
  mix-blend-mode: screen;
}

/* windows */
.window,
.office-window {
  border-radius: 6px !important;
  box-shadow:
    inset 0 0 15px rgba(255,205,130,.12),
    0 5px 12px rgba(0,0,0,.25);
}

/* doors */
.door,
.office-door {
  border-radius: 5px 5px 2px 2px !important;
  box-shadow: 4px 5px 9px rgba(0,0,0,.25);
}

/* tables */
.table,
.meeting-table,
.cafe-table {
  border-radius: 12px !important;
  box-shadow:
    0 7px 13px rgba(0,0,0,.24),
    inset 0 1px rgba(255,255,255,.08) !important;
}

/* sofas */
.sofa,
.couch,
.lounge-sofa {
  border-radius: 13px !important;
  box-shadow: 0 8px 13px rgba(0,0,0,.28) !important;
}

/* tiny environment objects feel less flat */
.furniture,
.prop,
.decor,
.office-prop {
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,.18));
}

/* character depth */
.character,
.agent-character,
.office-character {
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.28));
  transform-origin: center bottom;
}

/* subtle idle life */
.character.idle,
.agent-character.idle,
.office-character.idle {
  animation:
    office-idle-bob 2.8s ease-in-out infinite;
}

@keyframes office-idle-bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* working characters feel alive */
.character.working,
.agent-character.working,
.office-character.working {
  animation:
    office-working-bob 1.7s ease-in-out infinite;
}

@keyframes office-working-bob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1px) rotate(.4deg); }
}

/* warm vignette for dimensionality */
.office-scene::after,
.office-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      transparent 48%,
      rgba(10,6,3,.13) 100%
    );
  z-index: 20;
}

/* keep UI above scene */
.sidebar,
.office-sidebar,
.overlay,
.modal,
.toast,
.notification {
  z-index: 100;
}


/* =========================================================
   OFFICE CONTROL CENTER SIDEBAR
   Serious office UI — visual/sidebar layer only.
   ========================================================= */

.office-sidebar-panel {
  width: min(430px, 92vw) !important;
  background: #f7f7f4 !important;
  color: #242521 !important;
  border-left: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: -18px 0 45px rgba(0,0,0,.16) !important;
  overflow-y: auto;
}

.office-sidebar-panel::before {
  content: "";
  display: block;
  height: 4px;
  background: #242521;
  opacity: .92;
}

.sidebar-close {
  color: #444 !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.ev-sidebar-head {
  padding: 24px 22px 18px;
}

.ev-sidebar-head h2 {
  margin: 5px 0 3px;
  font-size: 28px;
  letter-spacing: -.7px;
}

.ev-sidebar-head p {
  color: #777970;
  line-height: 1.45;
  margin: 0;
}

.control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 0 18px 12px;
}

.control-card {
  text-align: left;
  padding: 13px 14px;
  border: 1px solid #e5e5df;
  border-radius: 10px;
  background: #fff;
  color: #242521;
  cursor: pointer;
}

.control-card:hover,
.control-card.active {
  border-color: #c9c9c0;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
}

.control-card strong,
.control-card span {
  display: block;
}

.control-card strong {
  font-size: 13px;
  margin-bottom: 5px;
}

.control-card span {
  color: #8a8b83;
  font-size: 11px;
}

.office-summary-card {
  margin-top: 4px;
}

.card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.card-heading small,
.card-heading strong {
  display: block;
}

.card-heading strong {
  margin-top: 4px;
}

.status-pill {
  padding: 4px 7px;
  border-radius: 5px;
  background: #edf5ed;
  color: #47704b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .7px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 1px solid #eeeeea;
  font-size: 12px;
}

.summary-row span {
  color: #777970;
}

.office-nav-list {
  padding: 7px 18px 22px;
}

.office-nav-list button,
.sidebar-home-link {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #e8e8e2;
  background: transparent;
  padding: 13px 5px;
  color: #33342f;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.office-nav-list button span {
  color: #999a92;
  font-size: 17px;
}

.sidebar-home-link {
  margin: 0 18px 20px;
  width: calc(100% - 36px);
  border: 1px solid #e3e3dc;
  border-radius: 8px;
  padding: 11px 13px;
  background: #fff;
}

.agent-status-card {
  margin-top: 10px;
}

.control-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eeeeea;
  font-size: 11px;
}

.control-row:last-child {
  border-bottom: 0;
}

.control-row span {
  color: #8a8b83;
}

.control-row b {
  color: #3e403a;
}


/* =========================================================
   SERIOUS OFFICE POPUPS
   ========================================================= */

.office-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.office-modal-layer[hidden] {
  display: none;
}

.office-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18,16,12,.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.office-modal {
  position: relative;
  width: min(760px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 70px));
  overflow: auto;
  background: #fafaf7;
  color: #252620;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow:
    0 28px 80px rgba(0,0,0,.30),
    0 4px 15px rgba(0,0,0,.10);
}

.office-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 26px 18px;
  background: rgba(250,250,247,.96);
  border-bottom: 1px solid #e7e7e1;
}

.office-modal-header small {
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #85867d;
  font-weight: 700;
}

.office-modal-header h2 {
  margin: 5px 0 0;
  font-size: 25px;
  letter-spacing: -.5px;
}

.modal-close {
  width: 34px;
  height: 34px;
  border: 1px solid #deded7;
  border-radius: 8px;
  background: #fff;
  color: #55564f;
  font-size: 22px;
  cursor: pointer;
}

.office-modal-content {
  padding: 24px 26px 30px;
}

.modal-stat-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.modal-stat-grid > div {
  padding: 18px;
  border: 1px solid #e5e5df;
  border-radius: 10px;
  background: #fff;
}

.modal-stat-grid strong,
.modal-stat-grid span {
  display: block;
}

.modal-stat-grid strong {
  font-size: 28px;
}

.modal-stat-grid span {
  margin-top: 4px;
  color: #7f8078;
  font-size: 11px;
}

.modal-list {
  border-top: 1px solid #e6e6e0;
}

.modal-list article {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid #e8e8e2;
}

.modal-list article strong {
  font-size: 13px;
}

.modal-list article p {
  margin: 4px 0 0;
  color: #7c7d75;
  font-size: 11px;
}

.modal-list article > b {
  font-size: 12px;
  color: #66675f;
}

.modal-avatar-dot,
.activity-status {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #aaa;
}

.activity-status.working {
  background: #5b8d61;
  box-shadow: 0 0 0 4px rgba(91,141,97,.10);
}

.activity-status.idle {
  background: #c5a65a;
}

.modal-empty {
  padding: 38px 25px;
  border: 1px dashed #d9d9d2;
  border-radius: 10px;
  text-align: center;
}

.modal-empty strong {
  font-size: 14px;
}

.modal-empty p {
  max-width: 520px;
  margin: 8px auto 0;
  color: #7d7e76;
  line-height: 1.6;
  font-size: 12px;
}

.modal-search {
  display: flex;
  gap: 8px;
}

.modal-search input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #dcdcd5;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}

.modal-search button {
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: #292a25;
  color: #fff;
  cursor: pointer;
}

.modal-settings {
  display: grid;
  gap: 1px;
  border: 1px solid #e5e5df;
  border-radius: 10px;
  overflow: hidden;
}

.modal-settings label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #fff;
  border-bottom: 1px solid #e8e8e2;
  font-size: 12px;
}

.modal-settings label:last-child {
  border-bottom: 0;
}

/* Bigger real chat area */
.chat-card {
  padding-bottom: 16px !important;
}

.chat-card .chat-message {
  min-height: 82px;
  padding: 14px !important;
}

.chat-card .chat-input {
  min-height: 48px;
}

.chat-card .chat-input input {
  min-height: 44px !important;
  font-size: 13px !important;
  padding: 0 13px !important;
}

.chat-card .chat-input button {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Make the office remain visible behind the serious layer */
body.office-modal-open {
  overflow: hidden;
}


/* =========================================================
   SIDEBAR SPACING + TYPOGRAPHY POLISH
   ========================================================= */

html,
body,
button,
input,
textarea,
select {
  font-family: Helvetica, Arial, sans-serif !important;
}

.office-sidebar-panel {
  width: min(470px, 94vw) !important;
  padding-bottom: 28px !important;
}

.ev-sidebar-head,
.sidebar-agent-head {
  padding: 30px 28px 24px !important;
}

.ev-sidebar-head h2,
.sidebar-agent-head h2 {
  font-size: 29px !important;
  line-height: 1.15;
  margin-top: 7px !important;
}

.ev-sidebar-head p,
.sidebar-agent-head p {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.control-grid {
  gap: 12px !important;
  padding: 4px 24px 18px !important;
}

.control-card {
  min-height: 78px;
  padding: 16px 17px !important;
  border-radius: 11px !important;
}

.control-card strong {
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

.control-card span {
  font-size: 11px !important;
}

.white-card {
  margin-left: 24px !important;
  margin-right: 24px !important;
  margin-bottom: 16px !important;
  padding: 20px !important;
  border-radius: 11px !important;
}

.office-summary-card {
  margin-top: 8px !important;
}

.summary-row {
  padding: 12px 0 !important;
}

.chat-card .chat-message {
  min-height: 105px !important;
  padding: 17px !important;
  line-height: 1.55;
}

.chat-card .chat-input {
  margin-top: 13px !important;
}

.chat-card .chat-input input {
  min-height: 48px !important;
  border-radius: 8px !important;
}

.chat-card .chat-input button {
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 8px !important;
}

.office-nav-list {
  padding: 12px 24px 30px !important;
}

.office-nav-list button {
  min-height: 49px;
  padding: 15px 7px !important;
  font-size: 13px !important;
}

.sidebar-home-link {
  margin: 4px 24px 24px !important;
  width: calc(100% - 48px) !important;
  min-height: 46px;
  padding: 13px 15px !important;
}

.activity-list {
  margin: 0 24px 24px !important;
}

.activity-item {
  padding: 13px 0 !important;
}

.office-modal {
  font-family: Helvetica, Arial, sans-serif !important;
}


/* E.V. CHAT — bigger conversation area, keep existing design */
.ev-chat,
.chat-panel,
.chat-box,
.chat-history,
.chat-messages {
  min-height: 320px !important;
}

.ev-chat {
  padding: 20px !important;
}

.chat-history,
.chat-messages {
  max-height: 480px !important;
  overflow-y: auto !important;
}

.chat-message,
.message,
.chat-bubble {
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
  line-height: 1.55 !important;
  font-size: 15px !important;
}

.chat-input,
.ev-chat textarea,
.chat-panel textarea {
  min-height: 110px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}


/* E.V. REPLY BOX — enlarge response area only */
.ev-chat .ev-response,
.ev-chat .assistant-message,
.ev-chat .ev-message,
.ev-chat .response-box,
.ev-chat .chat-response {
  min-height: 260px !important;
  padding: 22px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Jangan ubah area input user */
.ev-chat textarea,
.ev-chat .chat-input {
  min-height: revert !important;
}


/* E.V. REPLY — readable at 100% zoom */
.ev-chat .ev-response,
.ev-chat .assistant-message,
.ev-chat .ev-message,
.ev-chat .response-box,
.ev-chat .chat-response {
  font-size: 18px !important;
  line-height: 1.65 !important;
}


/* E.V. CHAT REPLY — actual response element */
.chat-card .chat-message {
  font-size: 18px !important;
  line-height: 1.65 !important;
}

.chat-card .chat-message b {
  font-size: 19px !important;
}


/* E.V. reply text — ONLY the actual response text */
.chat-card .chat-message b {
  font-size: inherit !important;
}

.chat-card .chat-message {
  font-size: 20px !important;
  line-height: 1.7 !important;
}


/* E.V. reply text — ONLY the actual response text */
.chat-card .chat-message b {
  font-size: inherit !important;
}

.chat-card .chat-message {
  font-size: 20px !important;
  line-height: 1.7 !important;
}


/* E.V. ACTUAL REPLY TEXT */
.chat-card .chat-message p {
  font-size: 20px !important;
  line-height: 1.7 !important;
  margin: 12px 0 0 !important;
}


.chat-card .chat-message p {
  font-size: 14px !important;
  line-height: 1.6 !important;
}


/* =========================================================
   SIDEBAR IMMERSIVE POLISH
   Visual-only: tidak mengubah struktur/fungsi sidebar
   ========================================================= */

.sidebar {
  background:
    linear-gradient(180deg, #ffffff 0%, #fafafa 55%, #f5f5f5 100%) !important;
  border-left: 1px solid rgba(0,0,0,.08) !important;
  box-shadow:
    -18px 0 45px rgba(0,0,0,.12),
    -4px 0 14px rgba(0,0,0,.06) !important;
  padding: 30px 26px 34px !important;
  gap: 22px !important;
  overflow-y: auto;
  transform-origin: right center;
  animation: sidebarEnter .28s cubic-bezier(.2,.8,.2,1);
}

@keyframes sidebarEnter {
  from {
    opacity: 0;
    transform: translateX(24px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Header / identity area */
.sidebar-header,
.sidebar-head {
  position: relative;
  padding: 4px 2px 20px !important;
  margin-bottom: 4px !important;
}

.sidebar-header::after,
.sidebar-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.12),
    rgba(0,0,0,.04),
    transparent
  );
}

/* Semua white-card jadi layer tersendiri */
.sidebar .white-card {
  position: relative;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 18px !important;
  box-shadow:
    0 2px 5px rgba(0,0,0,.035),
    0 8px 22px rgba(0,0,0,.055) !important;
  padding: 20px !important;
  margin: 0 !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.sidebar .white-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.11) !important;
  box-shadow:
    0 4px 8px rgba(0,0,0,.045),
    0 14px 28px rgba(0,0,0,.08) !important;
}

/* Control grid */
.control-grid {
  gap: 12px !important;
  margin-top: 4px !important;
}

.control-grid button {
  position: relative;
  min-height: 76px !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg,#fff,#f6f6f6) !important;
  box-shadow:
    0 2px 5px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.9);
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.control-grid button:hover {
  transform: translateY(-3px);
  background: #fff !important;
  box-shadow:
    0 7px 15px rgba(0,0,0,.09),
    inset 0 1px 0 rgba(255,255,255,1);
}

.control-grid button:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
}

/* Nav list */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 7px !important;
  margin-top: 4px !important;
}

.sidebar-nav button,
.sidebar-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 48px;
  padding: 11px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: #303030;
  text-align: left;
  cursor: pointer;
  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.sidebar-nav button::before,
.sidebar-nav a::before {
  content: "";
  width: 3px;
  height: 0;
  border-radius: 4px;
  background: #222;
  position: absolute;
  left: 4px;
  transition: height .18s ease;
}

.sidebar-nav button:hover,
.sidebar-nav a:hover {
  background: #f4f4f4 !important;
  border-color: rgba(0,0,0,.055) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,.045);
}

.sidebar-nav button:hover::before,
.sidebar-nav a:hover::before {
  height: 20px;
}

.sidebar-nav button:active,
.sidebar-nav a:active {
  transform: translateX(3px) scale(.985);
}

/* Chat card dibuat lebih "room-like" */
.chat-card {
  padding: 22px !important;
  background:
    linear-gradient(145deg,#ffffff,#f8f8f8) !important;
}

.chat-card .chat-message {
  margin-top: 16px !important;
  padding: 17px 18px !important;
  border-radius: 15px !important;
  background: #f5f5f5 !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.025);
}

.chat-card .chat-input {
  margin-top: 15px !important;
  gap: 9px !important;
}

.chat-card .chat-input input {
  min-height: 46px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  background: #fff !important;
  padding: 0 14px !important;
  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.chat-card .chat-input input:focus {
  outline: none;
  border-color: rgba(0,0,0,.2) !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.045);
}

.chat-card .chat-input button {
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.chat-card .chat-input button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 13px rgba(0,0,0,.12);
}

.chat-card .chat-input button:active {
  transform: scale(.94);
}

/* Scrollbar lebih subtle */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.22);
}

/* Reduced motion tetap aman */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar *,
  .sidebar *::before,
  .sidebar *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   REAL SIDEBAR POLISH
   Target: .office-sidebar-panel
   ========================================================= */

.office-sidebar-panel {
  width: min(470px, calc(100% - 28px)) !important;
  max-width: 470px !important;
  height: calc(100% - 28px) !important;
  top: 14px !important;
  right: 14px !important;
  bottom: auto !important;

  padding: 28px 26px 32px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(248,248,247,.98)
    ) !important;

  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 24px !important;

  box-shadow:
    -12px 0 28px rgba(0,0,0,.08),
    0 18px 45px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,1) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  animation: officeSidebarIn .32s cubic-bezier(.18,.82,.24,1);
}

@keyframes officeSidebarIn {
  from {
    opacity: 0;
    transform: translateX(34px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ambient depth inside sidebar */
.office-sidebar-panel::before {
  content: "";
  position: absolute;
  pointer-events: none;
  top: -80px;
  right: -80px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,0) 70%
  );
  opacity: .8;
}

/* close button */
.office-sidebar-panel .sidebar-close {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  background: rgba(0,0,0,.035) !important;
  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease !important;
}

.office-sidebar-panel .sidebar-close:hover {
  transform: rotate(6deg) scale(1.06);
  background: #fff !important;
  box-shadow: 0 7px 16px rgba(0,0,0,.10);
}

.office-sidebar-panel .sidebar-close:active {
  transform: scale(.92);
}

/* header spacing */
.office-sidebar-panel .ev-sidebar-head,
.office-sidebar-panel .sidebar-agent-head {
  position: relative;
  padding: 8px 4px 24px !important;
  margin-bottom: 20px !important;
}

.office-sidebar-panel .ev-sidebar-head::after,
.office-sidebar-panel .sidebar-agent-head::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.14),
    rgba(0,0,0,.04),
    transparent
  );
}

/* every actual sidebar card */
.office-sidebar-panel .white-card {
  position: relative;
  margin: 0 0 18px !important;
  padding: 21px !important;

  border-radius: 18px !important;
  border: 1px solid rgba(0,0,0,.065) !important;

  background:
    linear-gradient(145deg,#ffffff,#f8f8f8) !important;

  box-shadow:
    0 2px 4px rgba(0,0,0,.025),
    0 9px 22px rgba(0,0,0,.055),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease,
    border-color .22s ease !important;
}

.office-sidebar-panel .white-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,0,0,.11) !important;
  box-shadow:
    0 5px 9px rgba(0,0,0,.035),
    0 16px 30px rgba(0,0,0,.085),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* actual control buttons */
.office-sidebar-panel .control-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
  margin: 0 0 20px !important;
}

.office-sidebar-panel .control-grid button {
  min-height: 82px !important;
  padding: 14px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.065) !important;

  background:
    linear-gradient(145deg,#ffffff,#f5f5f5) !important;

  box-shadow:
    0 3px 7px rgba(0,0,0,.035),
    inset 0 1px 0 rgba(255,255,255,1) !important;

  cursor: pointer;

  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease,
    background .18s ease !important;
}

.office-sidebar-panel .control-grid button:hover {
  transform: translateY(-4px);
  background: #fff !important;
  box-shadow:
    0 7px 12px rgba(0,0,0,.07),
    0 15px 24px rgba(0,0,0,.055),
    inset 0 1px 0 #fff !important;
}

.office-sidebar-panel .control-grid button:active {
  transform: translateY(-1px) scale(.975);
}

/* status card */
.office-sidebar-panel .office-summary-card {
  background:
    linear-gradient(135deg,#fff,#f6f6f5) !important;
}

/* chat gets its own depth */
.office-sidebar-panel .chat-card {
  padding: 22px !important;
  margin-top: 4px !important;
}

.office-sidebar-panel .chat-card .chat-message {
  margin-top: 14px !important;
  padding: 17px 18px !important;
  border-radius: 15px !important;
  background: #f4f4f4 !important;
  border: 1px solid rgba(0,0,0,.045) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.025);
}

/* navigation / action buttons */
.office-sidebar-panel button[data-popup] {
  position: relative;
  width: 100%;
  min-height: 48px;

  margin: 0 0 7px !important;
  padding: 12px 15px !important;

  border: 1px solid transparent !important;
  border-radius: 13px !important;

  background: transparent !important;
  text-align: left;

  cursor: pointer;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

.office-sidebar-panel button[data-popup]::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 5px;
  background: #222;
  transform: translateY(-50%);
  transition: height .18s ease;
}

.office-sidebar-panel button[data-popup]:hover {
  transform: translateX(5px);
  background: #f3f3f3 !important;
  border-color: rgba(0,0,0,.055) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.045);
}

.office-sidebar-panel button[data-popup]:hover::before {
  height: 22px;
}

.office-sidebar-panel button[data-popup]:active {
  transform: translateX(3px) scale(.985);
}

/* home link */
.office-sidebar-panel .sidebar-home-link {
  margin: 0 0 18px !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease !important;
}

.office-sidebar-panel .sidebar-home-link:hover {
  transform: translateX(-2px);
  box-shadow: 0 5px 13px rgba(0,0,0,.08);
}

/* input depth */
.office-sidebar-panel .chat-input input {
  border-radius: 13px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: #fff !important;
  transition:
    border-color .18s ease,
    box-shadow .18s ease !important;
}

.office-sidebar-panel .chat-input input:focus {
  outline: none;
  border-color: rgba(0,0,0,.20) !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.045) !important;
}

/* scrollbar */
.office-sidebar-panel::-webkit-scrollbar {
  width: 5px;
}

.office-sidebar-panel::-webkit-scrollbar-track {
  background: transparent;
}

.office-sidebar-panel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 10px;
}

.office-sidebar-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.22);
}



/* KENNEY INTERIOR ACTIVE */

.office-asset {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

.asset-furniture {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.manager-desk .desk-tech,
.desk .desk-tech {
  position:absolute;
  left:25%;
  top:5%;
  width:50%;
  height:55%;
}

.manager-desk .desk-tech img,
.desk .desk-tech img {
  position:absolute;
  object-fit:contain;
}

.manager-desk .desk-tech img:nth-child(1),
.desk .desk-tech img:nth-child(1) {
  inset:0;
}

.manager-desk .desk-tech img:nth-child(2),
.desk .desk-tech img:nth-child(2) {
  width:48%;
  height:24%;
  left:26%;
  top:70%;
}

.manager-desk .desk-tech img:nth-child(3),
.desk .desk-tech img:nth-child(3) {
  width:20%;
  height:20%;
  right:0;
  bottom:0;
}

.manager-desk small,
.desk small {
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  z-index:5;
  font-size:7px;
  letter-spacing:.1em;
  color:#403b33;
  background:rgba(255,255,255,.85);
  border-radius:6px;
  padding:3px 6px;
  white-space:nowrap;
}

.plant .office-asset {
  object-fit:contain;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.16));
}

.bookshelf .office-asset,
.shelf .office-asset {
  object-fit:contain;
}

.bookshelf .office-asset:nth-child(2),
.shelf .office-asset:nth-child(2) {
  position:absolute;
  width:45%;
  height:45%;
  left:27%;
  top:18%;
}

.office-rug {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.office-rug .office-asset {
  object-fit:fill;
}

.rug-main {
  width:25% !important;
  height:10% !important;
}

.rug-lounge {
  width:19% !important;
  height:11% !important;
}

.coffee-counter .office-asset {
  object-fit:contain;
}

.coffee-machine {
  position:absolute;
  width:30%;
  height:55%;
  left:48%;
  top:-22%;
}

.coffee-machine img {
  object-fit:contain;
}

.meeting-chair .office-asset,
.meeting-table .office-asset,
.dining-table .office-asset,
.coffee-table .office-asset {
  object-fit:contain;
}

.whiteboard {
  background:#eee9da !important;
  border:4px solid #817965 !important;
  border-radius:5px !important;
  box-shadow:0 7px 0 rgba(0,0,0,.14) !important;
  padding:6px !important;
  color:#38342d !important;
}

.whiteboard-surface {
  height:100%;
  background:#faf6e7;
  border:1px solid rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:5px;
  font-size:6px;
}

.whiteboard-surface strong {
  font-size:8px;
}

.whiteboard-surface span {
  color:#77705f;
}

.tv {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.tv-screen {
  position:absolute;
  left:25%;
  top:5%;
  width:50%;
  height:50%;
}

.tv-screen img {
  object-fit:contain;
}

.floor-lamp {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.18));
}

.floor-lamp img {
  object-fit:contain;
}

.office-sidebar-panel {
  z-index:100 !important;
}

/* ===== TOPDOWN OFFICE SPRITES ===== */

.office-world .td-furniture-layer {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:8;
  pointer-events:none;
}

.office-world .td-sprite {
  position:absolute;
  display:block;
  margin:0;
  padding:0;
  object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));
  pointer-events:none;
}

.office-world .character {
  z-index:20;
}






/* TOPDOWN ASSETS — FINAL RENDER */
.floor .topdown-prop {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  image-rendering: pixelated !important;
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  overflow: visible !important;
}

.floor .topdown-prop img {
  display: none !important;
}

.floor .topdown-prop.prop-desk {
  background-image: url("/assets/topdown/furniture/Office-Furniture-Pixel-Art/Office-Furniture-Pixel-Art/Desk.png") !important;
}

.floor .topdown-prop.prop-chair {
  background-image: url("/assets/topdown/furniture/Office-Furniture-Pixel-Art/Office-Furniture-Pixel-Art/Chair.png") !important;
}

.floor .topdown-prop.prop-bookshelf {
  background-image: url("/assets/topdown/furniture/Office-Furniture-Pixel-Art/Office-Furniture-Pixel-Art/Bookshelf.png") !important;
}

.floor .topdown-prop.prop-plant {
  background-image: url("/assets/topdown/furniture/Office-Furniture-Pixel-Art/Office-Furniture-Pixel-Art/Big-Plant.png") !important;
}

.floor .topdown-prop.prop-coffee {
  background-image: url("/assets/topdown/furniture/Office-Furniture-Pixel-Art/Office-Furniture-Pixel-Art/Coffee-Machine.png") !important;
}

.floor .topdown-prop.prop-table {
  background-image: url("/assets/topdown/furniture/Office-Furniture-Pixel-Art/Office-Furniture-Pixel-Art/Small-Table.png") !important;
}

.floor .topdown-prop.prop-sofa {
  background-image: url("/assets/topdown/furniture/Office-Furniture-Pixel-Art/Office-Furniture-Pixel-Art/Big-Sofa.png") !important;
}

.floor .topdown-prop.prop-water {
  background-image: url("/assets/topdown/furniture/Office-Furniture-Pixel-Art/Office-Furniture-Pixel-Art/Water-Dispenser.png") !important;
}

.floor .topdown-prop.prop-board {
  background-image: url("/assets/topdown/furniture/Office-Furniture-Pixel-Art/Office-Furniture-Pixel-Art/Board.png") !important;
}

.floor .topdown-prop.prop-vending {
  background-image: url("/assets/topdown/furniture/Office-Furniture-Pixel-Art/Office-Furniture-Pixel-Art/Vending-Machine.png") !important;
}

/* =========================================================
   TYPOGRAPHY — NEUE MONTREAL
   ========================================================= */

:root {
  --font-main: "Neue Montreal", Helvetica, Arial, sans-serif;
  --font-display: "Neue Montreal", Helvetica, Arial, sans-serif;
}

/* Global */
html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-main) !important;
  font-weight: 700;
}

/* Main interface text */
body,
p,
span,
div,
button,
input,
textarea,
label {
  font-family: var(--font-main) !important;
  font-weight: 700;
}

/* Titles / display typography */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.page-title,
.section-title,
.modal-title,
.room-label {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}

/* Office / HUD labels */
.room-label,
.agent-name,
.workspace-name,
.status-label,
.small-button {
  font-weight: 700 !important;
}

/* Large display text */
h1,
.page-title {
  font-weight: 900 !important;
  letter-spacing: -0.03em;
}

h2,
h3,
.section-title,
.modal-title {
  font-weight: 900 !important;
  letter-spacing: -0.02em;
}

/* =========================================================
   PP NEUE MONTREAL — LOCAL FONTS
   ========================================================= */

@font-face {
  font-family: "Neue Montreal";
  src: url("/fonts/neue-montreal/PPNeueMontreal-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("/fonts/neue-montreal/PPNeueMontreal-Extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Official project typography */
html,
body,
button,
input,
textarea,
select {
  font-family: "Neue Montreal", Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.page-title,
.section-title,
.modal-title,
.room-label {
  font-family: "Neue Montreal", Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
}