/* Maket kertas: karton krem, tinta, satu aksen merah bata. Panel meniru lembar gambar kerja: garis tinta 1px, sudut hampir siku, tanpa bayangan. */
:root{--paper:#eee9df;--sheet:#fffcf5;--ink:#2a2622;--ink-2:#5c554b;--line:#b4ae9f;--hover:#e3dccd;--accent:#385747;--sans:Archivo,system-ui,-apple-system,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--sans)}
button,select,input,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.6}
button:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:active{transform:translateY(1px)}[hidden]{display:none!important}
#c{position:fixed;inset:0;display:block;touch-action:none;cursor:grab}#c:active{cursor:grabbing}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.name-label{position:absolute;left:0;top:0;pointer-events:auto;border:1px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:2px;padding:5px 8px;font-size:11px;font-weight:600;white-space:nowrap;min-height:30px}
.name-label.selected{background:var(--accent);border-color:var(--accent);color:#fff}
.name-label::before{content:'';position:absolute;inset:-7px -2px;min-height:44px}
.name-label::after{content:'';position:absolute;top:100%;left:50%;width:1px;height:var(--stem,6px);background:var(--line);pointer-events:none}

#header{position:fixed;left:28px;right:28px;top:22px;display:flex;gap:20px;align-items:flex-end;pointer-events:none}#header>*{pointer-events:auto}
#brand{margin-right:auto}#brand strong{display:block;font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1}#brand .brand-meta{display:block;margin-top:6px;font:500 12px var(--mono);color:var(--ink-2)}.brand-mark,.brand-tagline,#teamFaces{display:none}
.team-picker label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:5px}
select,.team-picker select{background:var(--sheet);color:var(--ink);border:1px solid var(--line);border-radius:2px;padding:8px;min-height:44px;font-size:13px}.team-picker select{width:235px;max-width:100%}
.btn{border:1px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:2px;padding:10px 13px;min-height:44px;font-size:13px;font-weight:500;white-space:nowrap}
.btn:hover{background:var(--hover)}.btn[aria-pressed=true]#bPause{background:var(--ink);color:var(--sheet)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:#2c4438}
#taskCount{margin-left:8px;font-family:var(--mono);font-weight:700}

/* Navigasi lantai digambar sebagai potongan gedung: lantai bertumpuk, pelat tebal di bawah tiap lantai. */
#floors{position:fixed;left:28px;top:112px;width:200px}
.nav-title{margin:0 0 8px;font:500 12px var(--mono);color:var(--ink-2)}
.section-stack{border:1px solid var(--line);border-top-width:3px;background:var(--sheet)}
#floors .section-stack button{display:flex;width:100%;align-items:center;text-align:left;gap:12px;background:transparent;border:0;border-bottom:3px solid var(--line);padding:12px;min-height:62px;font-size:14px;font-weight:600}
#floors .section-stack button:last-child{border-bottom:0}
#floors .section-stack button:hover{background:var(--hover)}
#floors .section-stack button[aria-pressed=true]{background:var(--ink);color:var(--sheet)}
#floors small{display:block;color:var(--ink-2);font-size:12px;font-weight:400;margin-top:3px}
#floors button[aria-pressed=true] small{color:#d9d2c3}
.floor-number{font:500 12px var(--mono);min-width:44px}
#floors button[aria-pressed=true] .floor-number{color:var(--sheet);box-shadow:inset 0 -3px 0 var(--accent)}
#floors .building-button{display:block;width:100%;margin-top:10px;min-height:44px;background:var(--sheet);border:1px solid var(--line);border-radius:2px;font-size:13px;font-weight:500}
#floors .building-button:hover{background:var(--hover)}#floors .building-button[aria-pressed=true]{background:var(--ink);color:var(--sheet)}

/* Caption lantai sebagai title block lembar gambar. */
#floorCaption{position:fixed;left:28px;bottom:112px;width:300px;background:var(--sheet);border:1px solid var(--line);pointer-events:none}
.tb-head{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:7px 12px;font:500 12px var(--mono);color:var(--ink-2)}
#floorTitle{font-size:24px;line-height:1.15;letter-spacing:-.4px;margin:14px 12px 8px;font-weight:700}
#floorDescription{font-size:13px;line-height:1.55;margin:0 12px 14px;color:var(--ink-2)}
.tb-foot{margin:0;border-top:1px solid var(--line);padding:7px 12px;font-size:12px;color:var(--ink-2)}

.panel{background:var(--sheet);border:1px solid var(--line);border-radius:4px}
#info{position:fixed;right:24px;bottom:112px;width:290px;padding:18px;font-size:13px;max-height:calc(100dvh - 250px);overflow:auto}
#info h2{font-size:19px;margin:0 34px 4px 0;letter-spacing:-.3px}#info .role{color:var(--ink-2);margin:0 0 14px;line-height:1.5}
#info dl{margin:0 0 14px;border-top:1px solid var(--line)}#info dt{font:500 12px var(--mono);color:var(--ink-2);margin-top:12px}#info dd{margin:3px 0 0;overflow-wrap:anywhere;line-height:1.45}
#info .btn{width:100%;margin-top:8px}
#info #iClose{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:transparent;font-size:22px}
/* Log kantor: daftar kejadian simulasi; kotak kecil berwarna = kelompok meja orang yang disebut. */
#log{position:fixed;right:24px;top:146px;width:290px;max-height:calc(100dvh - 270px);display:flex;flex-direction:column;overflow:hidden}
body:has(#info:not([hidden])) #log{max-height:22vh}
.log-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.log-head h2{margin:0;font-size:15px}.log-head span{font:500 12px var(--mono);color:var(--ink-2)}
#logEmpty{margin:0;padding:12px 14px;font-size:13px;color:var(--ink-2);line-height:1.5}
#logList{list-style:none;margin:0;padding:0 14px;overflow:auto}
#logList li{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #d9d2c3;font-size:13px;line-height:1.45}
#logList li:last-child{border-bottom:0}#logList time{font:500 12px/1.6 var(--mono);color:var(--ink-2)}
.log-text::before{content:'';display:inline-block;width:8px;height:8px;background:var(--dot);margin-right:7px;vertical-align:1px}
#bLog[aria-expanded=true]{background:var(--ink);color:var(--sheet)}
#info .check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;cursor:pointer}
#info .check input{width:20px;height:20px;margin:0;accent-color:var(--accent)}
#sceneStatus{position:fixed;right:28px;top:100px;color:var(--ink);font-size:12px;text-align:right;max-width:260px;background:var(--sheet);border:1px solid var(--line);padding:7px 10px;border-radius:2px}
#controls{position:fixed;bottom:36px;left:50%;transform:translateX(-50%);display:flex;gap:16px;padding:8px;max-width:calc(100% - 32px)}
.simulation-controls,.camera-controls{display:flex;gap:6px}
#cameraHint{position:fixed;bottom:8px;left:0;right:0;margin:0;text-align:center;font-size:12px;color:var(--ink-2);pointer-events:none}

@media(max-width:1250px){#floorCaption{width:240px}#floorTitle{font-size:21px}#cameraHint{display:none}#controls{bottom:16px}#floorCaption,#info{bottom:92px}}
@media(max-width:1100px){#header{left:18px;right:18px}#floors{left:18px;width:170px}#floorCaption{left:18px}#sceneStatus{right:18px;max-width:200px}}
@media(max-width:1000px){
  #header{left:12px;right:12px;top:12px;gap:10px;flex-wrap:wrap;align-items:center}
  #brand strong{font-size:22px}#brand .brand-meta{font-size:11px;margin-top:4px}
  .team-picker{order:3;width:100%;display:flex;align-items:center;gap:12px}
  .team-picker label{margin:0;white-space:nowrap}.team-picker select{width:100%;flex:1;min-width:0}
  #floors{top:128px;left:12px;right:12px;width:auto;display:flex;gap:6px}
  .nav-title{display:none}
  .section-stack{flex:4;display:flex;flex-direction:row-reverse;border-top-width:1px;border-bottom-width:3px}
  #floors .section-stack button{flex:1;min-width:0;min-height:48px;padding:5px 3px;gap:2px;justify-content:center;flex-direction:column;text-align:center;font-size:11px;border-bottom:0;border-left:1px solid var(--line)}
  #floors .section-stack button:first-child{border-left:0}
  .floor-number{font-size:11px;min-width:0}#floors small{display:none}
  #floors .building-button{flex:1;margin:0;min-height:52px;font-size:11px;white-space:normal;line-height:1.3;padding:4px}
  #floorCaption{left:12px;right:12px;width:auto;bottom:130px}.tb-head{padding:5px 10px;font-size:11px}
  #floorTitle{font-size:18px;margin:8px 10px 4px}#floorDescription{font-size:12px;margin:0 10px 8px;line-height:1.45}.tb-foot{font-size:11px;padding:5px 10px}
  #sceneStatus{top:188px;right:12px;font-size:11px;max-width:calc(100% - 24px);padding:5px 8px}
  #controls{bottom:12px;max-width:calc(100% - 24px);width:430px;flex-direction:column;gap:6px;padding:6px}
  .simulation-controls,.camera-controls{justify-content:center}
  .simulation-controls .btn{padding:6px 4px;font-size:11px;flex:1;min-width:0;white-space:normal;line-height:1.25}.camera-controls .btn{flex:1;padding:8px}
  #info{left:12px;right:12px;width:auto;bottom:130px;max-height:calc(100dvh - 345px);padding:14px}
  #log{left:12px;right:12px;width:auto;top:236px;bottom:150px;max-height:none;z-index:2}
  body:has(#info:not([hidden])) #log{display:none}
  body:has(#log:not([hidden])) #floorCaption{display:none}
  body:has(#info:not([hidden])) #floorCaption{display:none}.name-label{font-size:10px;padding:5px 6px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.music-volume{display:flex;align-items:center;gap:6px;min-height:44px;font-size:11px;color:var(--ink-2)}
.music-volume input{width:64px;min-width:0;accent-color:var(--accent)}
#bMusic[aria-pressed=true]{background:var(--ink);color:var(--sheet)}
@media(min-width:1001px) and (max-width:1450px){#controls{flex-direction:column;align-items:center;gap:6px}#floorCaption,#info{bottom:150px}}
@media(max-width:1000px){.camera-controls{flex-wrap:wrap}.camera-controls .btn{padding:8px 5px;font-size:11px}.music-volume{gap:4px}.music-volume input{width:50px}}
/* Kamera karakter: bilah kecil di atas tengah, tombol mode memakai status tekan seperti Jeda. */
#followBar{position:fixed;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;z-index:3}
#followName{font:500 12px var(--mono);color:var(--ink-2);margin-right:4px;white-space:nowrap}
#followBar .btn[aria-pressed=true]{background:var(--ink);color:var(--sheet)}
#info .view-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}#info .view-buttons .btn{width:auto;margin:0;white-space:normal;line-height:1.25;padding:8px}
@media(max-width:1000px){#followBar{top:auto;bottom:150px;max-width:calc(100% - 24px)}#followBar .btn{padding:8px;font-size:12px}}
body.following #floorCaption,body.following #cameraHint{display:none}

/* Member instructions and current work share the existing detail sheet. */
.member-commands,.active-task{border-top:1px solid var(--line);padding:12px 0}
.member-commands>label,.active-task h3{display:block;font-size:13px;font-weight:600;margin:0 0 8px}
.member-commands>select{width:100%;min-width:0}
.member-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
#info .member-actions .btn{margin:0;white-space:normal}
#iPeople{margin:10px 0;padding:8px;border:1px solid var(--line);max-height:190px;overflow:auto}
#iPeople legend{font-size:12px}.active-task p{margin:6px 0;overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.5}
#iTaskBrief{color:var(--ink-2);max-height:110px;overflow:auto}
.name-label.has-task{border-bottom:3px solid var(--accent)}
@media(min-width:1001px){#info{top:150px;max-height:none}body:has(#info:not([hidden])) #log{display:none}}

/* Warm studio: softer control surfaces, with sage used for selection. */
.panel,.btn,select,.team-picker select,.name-label{border-radius:8px}
#floors .section-stack{border-radius:10px;overflow:hidden;border-top-width:1px}
#floors .section-stack button{border-bottom-width:1px}
#floors .section-stack button[aria-pressed=true],#floors .building-button[aria-pressed=true]{background:var(--accent)}
#floorCaption{border-radius:10px;overflow:hidden}

/* Log chips: the first person named gets their initials in their desk-group colour. */
.log-chip{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 5px;margin-right:8px;border-radius:6px;background:var(--dot);color:#fff;font:700 10px var(--mono);vertical-align:1px}
#logList li.has-chip .log-text::before{display:none}

/* Studio UI for every view (whole building and single floors): white cards with soft shadows, one coral accent. */
.floor-thumb,.floor-count{display:none}
body.ui{--paper:#f4f1ea;--sheet:#fff;--ink:#1e2230;--ink-2:#6b6f7b;--line:#e8e3da;--hover:#f7f3ed;--accent:#e8634a;--navy:#1f2433}
.ui .panel,.ui #floorCaption,.ui #floors,.ui #header>#brand,.ui .header-card{background:#fff;border:1px solid rgba(30,34,48,.06);border-radius:16px;box-shadow:0 10px 28px rgba(60,48,30,.12)}
.ui #header{top:16px;left:24px;right:24px;align-items:center;gap:10px}
.ui #brand{display:flex;align-items:center;gap:14px;padding:12px 20px 12px 12px;margin-right:auto}
.ui .brand-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--accent);color:#fff}
.ui #brand strong{font-size:24px}
.ui .brand-meta{font:500 13px var(--sans)!important;margin-top:4px!important}
.ui .brand-tagline{display:block;border-left:1px solid var(--line);padding-left:16px;margin-left:8px;font-size:13px;line-height:1.4;color:var(--ink-2)}
/* Picker, faces, Log and Tasks share one card, all centred on one line. */
.header-card{display:contents}
.ui .header-card{display:flex;align-items:center;gap:14px;padding:8px 8px 8px 16px}
.ui .team-picker{display:flex;align-items:center;gap:10px}
.ui .team-picker label{margin:0;font-size:12px;color:var(--ink-2);white-space:nowrap}
.ui .team-picker select{width:170px;min-height:40px;padding:6px 8px;border-radius:10px}
.ui #teamFaces{display:flex;align-items:center;padding-left:14px;border-left:1px solid var(--line);height:40px}
.face{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:var(--dot);color:#fff;font:700 10px var(--mono);display:grid;place-items:center;margin-left:-8px;padding:0}
.face:first-child{margin-left:0}.face.more{background:#f0ece5;color:var(--ink-2);font-size:11px}
.face:hover{transform:translateY(-2px)}
.ui #bLog,.ui #bTasks{min-height:40px;border-radius:10px;padding:0 14px}
.ui #bLog{background:#fff;border:1px solid var(--line)}
.ui #bLog[aria-expanded=true]{background:#f3efe8;color:var(--ink);border-color:#f3efe8}
.ui #bTasks{border:0}
.ui .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.ui .btn.primary:hover{background:#d4553d}
.ui #bTasks::before{content:'';display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;background:currentColor;-webkit-mask:var(--i-list) center/contain no-repeat;mask:var(--i-list) center/contain no-repeat}
.ui .name-label.selected{background:var(--accent);border-color:var(--accent);color:#fff}

.ui #floors{padding:14px;width:268px;top:122px;left:24px}
.ui .nav-title{font:600 13px var(--sans);color:var(--ink-2);margin:2px 4px 10px}
.ui .section-stack{background:transparent;border:0;border-radius:0!important;overflow:visible!important}
.ui #floors .section-stack button{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"thumb num" "thumb name";column-gap:12px;row-gap:1px;align-items:center;border:0;border-left:3px solid transparent;border-radius:10px;margin-bottom:4px;padding:7px 8px;min-height:68px;font-size:15px}
.ui #floors .section-stack button:hover{background:var(--hover)}
.ui #floors .section-stack button[aria-pressed=true]{background:#fdeee9;color:var(--ink);border-left-color:var(--accent)}
.ui .floor-thumb{display:block;grid-area:thumb;object-fit:cover;border-radius:8px;width:72px;height:52px}
.ui .floor-number{display:block;grid-area:num;align-self:end;font:500 11px var(--mono);color:var(--ink-2);min-width:0}
.ui #floors button[aria-pressed=true] .floor-number{color:var(--ink-2);box-shadow:none}
.ui #floors .section-stack button>span:not([class]){grid-area:name;align-self:start;font-weight:700}
.ui #floors small,.ui #floors button[aria-pressed=true] small{color:var(--ink-2)}
/* The live head count sits on the thumbnail corner so the floor name keeps one line. */
.ui .floor-count{display:block;grid-area:thumb;align-self:start;justify-self:end;margin:3px;font:700 10px var(--mono);color:var(--ink);background:rgba(255,255,255,.92);border-radius:8px;padding:1px 6px;min-width:0}
.ui #floors .building-button{display:flex;align-items:center;gap:10px;border:0;border-radius:10px;min-height:48px;padding:0 14px;background:var(--navy);color:#fff;font-weight:600;margin-top:8px}
.ui #floors .building-button[aria-pressed=true],.ui #floors .building-button:hover{background:#2c3346;color:#fff}
.ui #floors .building-button::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:var(--i-building) center/contain no-repeat;mask:var(--i-building) center/contain no-repeat}
.ui #floors .building-button::after{content:'';width:14px;height:14px;margin-left:auto;background:currentColor;-webkit-mask:var(--i-chevron) center/contain no-repeat;mask:var(--i-chevron) center/contain no-repeat}

.ui #floorCaption{left:24px;width:268px;overflow:hidden}
.ui .tb-head{border-bottom:1px solid var(--line);font:500 12px var(--sans);padding:12px 18px 8px}
.ui #floorTitle{font-size:26px;margin:12px 18px 8px}
.ui #floorDescription{margin:0 18px 14px}
.ui .tb-foot{border-top:1px solid var(--line);padding:10px 18px}

.ui #log{top:148px;right:24px;width:310px}
.ui .log-head{padding:14px 18px;border-bottom:0}
.ui .log-head h2{font-size:17px}
.ui .log-head span{font:500 12px var(--sans);display:flex;align-items:center;gap:6px}
.ui .log-head span::before{content:'';width:8px;height:8px;border-radius:50%;background:#3fae6a}
.ui #logList{padding:0 18px 8px}
.ui #logList li{border-bottom-color:#f0ece5;align-items:center}
.ui #logEmpty{padding:0 18px 14px}

.ui #controls{gap:8px;border-radius:16px;padding:10px}
.ui #controls .btn{border-color:var(--line);border-radius:10px;display:inline-flex;align-items:center;gap:7px}
.ui .simulation-controls .btn::before{content:'';width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.ui #bPause{--icon:var(--i-pause)}.ui #bRoutine{--icon:var(--i-calendar)}.ui #bLunch{--icon:var(--i-lunch)}
.ui #bRoof{--icon:var(--i-sun);color:var(--ink)}.ui #bPray{--icon:var(--i-moon)}.ui #bWork{--icon:var(--i-briefcase)}
.ui #bRoof::before{background:#f0a531}
.ui .btn[aria-pressed=true]#bPause,.ui #bMusic[aria-pressed=true]{background:var(--navy);color:#fff}
.ui #bRoutine[aria-pressed=true]{background:#fff}
.ui #sceneStatus{top:104px;right:24px;border:0;border-radius:10px;box-shadow:0 6px 18px rgba(60,48,30,.1)}
.ui #taskDialog .task-primary{background:var(--accent);color:#fff}
.ui #cameraHint{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:95%;padding:3px 10px;border-radius:8px;background:rgba(255,255,255,.85);color:var(--ink-2)}
body{--i-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
 --i-building:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 21V4h11v17M15 9h5v12M2 21h20M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E");
 --i-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
 --i-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E");
 --i-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
 --i-lunch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3v7a2 2 0 0 0 4 0V3M8 10v11M17 21V3c-2 1-3 4-3 8h3'/%3E%3C/svg%3E");
 --i-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
 --i-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/%3E%3C/svg%3E");
 --i-briefcase:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3 12h18'/%3E%3C/svg%3E")}
@media(max-width:1250px){.ui .brand-tagline{display:none}}
@media(max-width:1000px){
 .ui #header{padding:0;top:8px;left:8px;right:8px;gap:6px}
 .ui #brand{flex:1;min-width:0;padding:6px 10px 6px 6px;gap:10px}.ui .brand-mark{width:34px;height:34px;border-radius:9px}.ui .brand-mark svg{width:20px;height:20px}
 .ui #brand strong{font-size:19px}.ui .brand-meta{font-size:11px!important;margin-top:2px!important}
 .ui .header-card{display:contents}
 .ui .team-picker{background:#fff;border-radius:12px;padding:6px 8px;box-shadow:0 10px 28px rgba(60,48,30,.12)}.ui .team-picker select{width:100%}
 .ui #teamFaces{display:none}
 .ui #bLog,.ui #bTasks{align-self:center;border-radius:12px;min-height:44px;padding:0 12px}
 .ui #floors{top:120px;left:8px;right:8px;width:auto;padding:5px;gap:4px}
 .ui #floors .section-stack button{display:flex;min-height:50px;padding:3px;gap:2px;margin:0;border:0;border-radius:6px;font-size:11px}
 .ui .floor-thumb{display:none}.ui .floor-count{font-size:10px;margin:0;padding:0 4px}.ui .floor-count::after{content:' people'}
 .ui #floors .building-button{padding:4px;justify-content:center;min-height:52px}.ui #floors .building-button::before,.ui #floors .building-button::after{display:none}
 .ui #floorCaption{left:8px;right:8px;width:auto}
 .ui #sceneStatus{top:190px}.ui #log{top:230px;left:8px;right:8px;width:auto}
 .ui .simulation-controls .btn::before{display:none}
 .ui #info{max-height:calc(100dvh - 390px)}
}
/* Short desktop screens: the taller building nav would run into the caption, so shrink the nav, drop the caption's floor list (the nav already shows it), and hide the caption when even that does not fit. */
@media(min-width:1001px) and (max-height:960px){
 .ui #floors .section-stack button{min-height:58px;padding:5px 8px}
 .ui .floor-thumb{width:60px;height:44px}
 .ui #floorTitle{font-size:22px}
}
@media(min-width:1001px) and (max-height:820px){.ui #floorDescription{display:none}}
@media(min-width:1001px) and (max-height:740px){.ui #floorCaption{display:none}}
/* Members connected to an AI agent: a badge in the detail sheet and a small dot on their name label. */
.ai-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:10px;background:#e8f3ec;color:#2f6b47;font:600 11px var(--sans);vertical-align:1px}
.name-label.ai{padding-right:19px;background-image:radial-gradient(circle at calc(100% - 9px) 50%,#3fae6a 3.5px,transparent 4.5px)}
/* Speech bubbles for task events, above the name label. */
.name-label .say{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--navy,#1f2433);color:#fff;padding:4px 9px;border-radius:9px;font:600 11px var(--sans);white-space:nowrap;pointer-events:none;animation:say-in .2s ease-out}
.name-label .say::after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--navy,#1f2433)}
.name-label .say.drafting{background:#2f6b47}.name-label .say.drafting::after{border-top-color:#2f6b47}
@keyframes say-in{from{opacity:0;transform:translate(-50%,4px)}}
@media(prefers-reduced-motion:reduce){.name-label .say{animation:none}}
/* Task summary above the office log. */
.log-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 10px}
.log-stats div{background:#f7f3ed;border-radius:10px;padding:8px 10px}
.log-stats strong{display:block;font:700 18px var(--sans)}.log-stats span{font-size:11px;color:var(--ink-2)}
.ui .log-stats{padding:0 18px 12px}
/* Needs decision: agents waiting for an answer, shown above the log. */
.decisions{display:block;width:calc(100% - 28px);margin:0 14px 10px;padding:9px 12px;border:0;border-radius:10px;background:#fff1d6;color:#7a4d0e;font:600 13px var(--sans);text-align:left;min-height:40px}
.decisions::before{content:'?';display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:#e0a23a;color:#fff;font-size:12px}
.decisions:hover{background:#ffe7bb}
.ui .decisions{width:calc(100% - 36px);margin:0 18px 12px}

/* === Fitur UI v2 (desain Roshi — kopi susu & kayu jati) === */
.kb-dialog,.cd-dialog{background:#F8F1E3;color:#3A2E24;border:3px solid #8B5E34;border-radius:22px;max-height:88vh;overflow:auto}
.kb-dialog{width:min(1180px,95vw)}
.cd-dialog{width:min(560px,94vw)}
.kb-filters{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.kb-filters .kb-chip{border:2px solid #8B5E34;background:#fff;color:#3A2E24;border-radius:999px;padding:3px 12px;cursor:pointer;font-weight:700;font-size:13px}
.kb-chip.on{background:#2E8B8B;color:#fff;border-color:#2E8B8B}
.kb-chip.stuck.on{background:#c0392b;border-color:#c0392b}
.kb-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kb-col{background:#F0E6D2;border-radius:16px;padding:10px;min-height:120px}
.kb-col h3{margin:2px 0 10px;font-size:15px;display:flex;justify-content:space-between}
.kb-count{background:#8B5E34;color:#fff;border-radius:999px;padding:0 9px;font-size:12px}
.kb-cols .kb-card{background:#fff;color:#3A2E24;border:2px solid #d8c9a8;border-radius:14px;padding:9px 11px;margin-bottom:9px;cursor:pointer;text-align:left;width:100%}
.kb-card:hover{border-color:#2E8B8B}
.kb-card h4{margin:0 0 5px;font-size:14px}
.kb-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:#6E5F4E}
.kb-ava{display:inline-flex;width:22px;height:22px;border-radius:50%;background:#2E8B8B;color:#fff;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.kb-ava.hermes{background:#BE7823}
.kb-prio{border-radius:999px;padding:0 8px;font-size:11px;font-weight:700;color:#fff}
.kb-badge{display:inline-block;border-radius:999px;padding:0 8px;font-size:11px;font-weight:800;color:#fff;background:#6A5ACD}
.kb-badge.stuck{background:#c0392b;animation:kbpulse 1.1s infinite}
@keyframes kbpulse{0%,100%{opacity:1}50%{opacity:.45}}
.kb-detail{background:#fff;border:2px solid #8B5E34;border-radius:16px;padding:12px 14px;margin-top:12px}
.kb-detail h3{margin:0 0 6px}
.kb-log{background:#F0E6D2;border-radius:10px;padding:8px 11px;font-size:12.5px;margin:8px 0}
.kb-flow{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.kb-flow button{border-radius:999px;border:2px solid #3B2A5E;background:#3B2A5E;color:#fff;padding:5px 14px;font-weight:700;cursor:pointer}
.kb-flow button.ghost{background:#fff;color:#3B2A5E}
.kb-empty{color:#6E5F4E;font-size:13px;text-align:center;padding:12px 4px}
.cd-head{display:flex;gap:13px;align-items:center;margin-bottom:6px}
.cd-ava{width:56px;height:56px;border-radius:50%;background:#2E8B8B;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;border:3px solid #8B5E34}
.cd-ava.hermes{background:#BE7823}
.cd-pill{margin-left:auto;border-radius:999px;padding:3px 12px;color:#fff;font-weight:800;font-size:12.5px;white-space:nowrap}
.cd-task{background:#fff;border:2px solid #d8c9a8;border-radius:14px;padding:10px 12px;margin:9px 0}
.cd-task h4{margin:0 0 4px;font-size:14.5px}
.cd-bar{height:8px;background:#F0E6D2;border-radius:99px;overflow:hidden;margin:7px 0 3px}
.cd-bar i{display:block;height:100%;background:#2E8B8B;border-radius:99px}
.cd-log{background:#F0E6D2;border-radius:10px;padding:7px 11px;font-size:12.5px;margin-top:7px}
.cd-actions{display:flex;gap:9px;margin-top:14px}
.cd-actions .cd-chat{flex:1;background:#fff;border:2.5px solid #2E8B8B;color:#2E8B8B;border-radius:14px;padding:10px;font-weight:800;cursor:pointer;font-size:15px}
.cd-actions .cd-give{flex:1;background:#3B2A5E;border:2.5px solid #3B2A5E;color:#fff;border-radius:14px;padding:10px;font-weight:800;cursor:pointer;font-size:15px}
.cd-form{background:#fff;border:2px dashed #8B5E34;border-radius:14px;padding:12px;margin-top:12px}
.cd-form input,.cd-form textarea{width:100%;box-sizing:border-box;margin:4px 0 8px;padding:8px;border:2px solid #d8c9a8;border-radius:10px;font:inherit}
.cd-form button{background:#3B2A5E;color:#fff;border:none;border-radius:999px;padding:7px 18px;font-weight:800;cursor:pointer}

/* === Fase 2: Panel Chat + Inbox Kru === */
.ch-dialog,.ib-dialog{background:#F8F1E3;color:#3A2E24;border:3px solid #8B5E34;border-radius:22px;max-height:88vh;overflow:auto}
.ch-dialog{width:min(880px,95vw)}
.ib-dialog{width:min(680px,94vw)}
.ch-wrap{display:grid;grid-template-columns:200px 1fr;gap:12px;margin-top:8px}
.ch-contacts{display:flex;flex-direction:column;gap:6px}
.ch-contacts .ch-contact{display:flex;gap:9px;align-items:center;background:#fff;color:#3A2E24;border:2px solid #d8c9a8;border-radius:13px;padding:8px 10px;cursor:pointer;text-align:left;font:inherit}
.ch-contact.on{border-color:#2E8B8B;background:#eef7f7}
.ch-dot{width:10px;height:10px;border-radius:50%;flex:none}
.ch-main{display:flex;flex-direction:column;min-height:380px}
.ch-head{font-weight:800;font-size:16px;padding:2px 2px 8px}
.ch-msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;background:#F0E6D2;border-radius:14px;padding:12px;min-height:260px;max-height:46vh}
.ch-bubble{max-width:78%;padding:8px 12px;border-radius:16px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.ch-me{align-self:flex-end;background:#cfecec;border:2px solid #2E8B8B;border-bottom-right-radius:5px}
.ch-them{align-self:flex-start;background:#fff;border:2px solid #d8c9a8;border-bottom-left-radius:5px}
.ch-time{display:block;font-size:11px;color:#6E5F4E;margin-top:3px}
.ch-state{font-size:12.5px;color:#6E5F4E;padding:7px 2px 2px;min-height:18px}
.ch-form{display:flex;gap:8px;margin-top:6px}
.ch-form input{flex:1;padding:10px 12px;border:2px solid #d8c9a8;border-radius:12px;font:inherit;background:#fff}
.ch-form button{background:#2E8B8B;color:#fff;border:none;border-radius:12px;padding:10px 20px;font-weight:800;cursor:pointer}
.ib-sec{margin:14px 0}
.ib-sec h3{margin:0 0 8px;font-size:15.5px}
.ib-row{background:#fff;border:2px solid #d8c9a8;border-radius:13px;padding:9px 12px;margin-bottom:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ib-row .ib-t{font-weight:700}
.ib-row .ib-m{font-size:12.5px;color:#6E5F4E}
.ib-row .sp{flex:1}
.ib-btn{border-radius:999px;padding:5px 14px;font-weight:800;cursor:pointer;border:2px solid #4CAF50;background:#4CAF50;color:#fff}
.ib-btn.no{background:#fff;color:#c0392b;border-color:#c0392b}
.ib-btn.help{background:#3B2A5E;border-color:#3B2A5E}

/* === TV Command Centre === */
.studio-dialog.tv-dialog{background:#131a26;color:#e8ecf4;border:3px solid #2E8B8B;border-radius:22px;width:min(680px,94vw);max-height:88vh;overflow:auto}
.tv-dialog h3{margin:16px 0 8px}
.tv-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.tv-count{background:#1d2637;border-radius:14px;padding:12px;text-align:center}
.tv-count b{display:block;font-size:30px}
.tv-count span{font-size:12.5px;color:#aeb8c8}
.tv-row{display:flex;gap:10px;align-items:center;background:#1d2637;border-radius:11px;padding:8px 12px;margin-bottom:7px}
.tv-row .tv-nm{width:86px;font-weight:700;flex:none}
.tv-row .tv-bar{flex:1}
.tv-row .cd-bar{background:#26314a;margin:0}
.tv-dialog .kb-empty{color:#aeb8c8}
.tv-dialog .ib-m{color:#aeb8c8;font-size:12.5px}

.studio-dialog.tv-dialog .tv-row span{color:#e8ecf4}
.studio-dialog.tv-dialog .tv-count b{color:#fff}
.studio-dialog.tv-dialog h3{color:#e8ecf4}

.studio-dialog.tv-dialog .task-header{background:transparent;border-color:#26314a}
.studio-dialog.tv-dialog .task-header h1{color:#e8ecf4}
.studio-dialog.tv-dialog .task-header p{color:#aeb8c8}

/* ============================================================
   REFACTOR v2 — Desktop layout (Hana, 2026-10-11)
   Scope: min-width:1001px saja. Mobile (<1001px) tidak diubah.
   - Kolom kiri (#sideLeft): nav lantai + caption lantai jadi satu
     kolom flex -> tidak ada lagi overlap caption vs tombol gedung.
   - #sceneStatus: dari kotak floating jadi pill di header.
   - #bWorld: dari link floating (inline style) jadi tombol header.
   - Panel kanan (#log, #info): max-height dikembalikan supaya tidak
     lari keluar viewport.
   ============================================================ */
@media(min-width:1001px){
  /* --- Kolom kiri --- */
  #sideLeft{position:fixed;left:24px;top:112px;bottom:170px;width:268px;display:flex;flex-direction:column;gap:16px;z-index:2}
  .ui #floors{position:static;left:auto;top:auto;width:auto;flex:none;margin:0}
  .ui #floorCaption{position:static;left:auto;bottom:auto;right:auto;width:auto;flex:0 1 auto;min-height:0;overflow:auto;margin:0;pointer-events:auto}
  /* Aturan hide caption di layar sangat pendek (<740px) tetap jalan:
     flex item dengan display:none otomatis keluar dari kolom. */

  /* --- Kolom kanan: roster di atas, log di bawah (stack, tidak tumpuk).
     Roster max 46dvh + scroll internal; log mengisi sisa sampai atas kontrol. --- */
  .ui .crew-panel{top:146px;right:24px;max-height:46dvh}
  .ui #log{top:calc(146px + 46dvh + 12px);bottom:170px;right:24px;width:304px;max-height:none}
  .ui #info{top:150px;right:24px;max-height:calc(100dvh - 330px)}

  /* --- Status scene jadi pill di header --- */
  .ui #sceneStatus{position:static;top:auto;right:auto;max-width:240px;flex:0 1 auto;min-width:0;
    text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    border-radius:999px;padding:10px 16px;font-size:12px;color:var(--ink-2);
    box-shadow:0 10px 28px rgba(60,48,30,.12)}

  /* --- Tombol World di header --- */
  .ui #bWorld{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:10px;
    background:var(--navy);border:1px solid var(--navy);color:#fff;font-size:13px;font-weight:600;
    text-decoration:none;white-space:nowrap}
  .ui #bWorld:hover{background:#2c3346;color:#fff}
}
/* Layar desktop pendek: kolom kiri ikut menyusut, caption scroll di dalam */
@media(min-width:1001px) and (max-height:900px){
  #sideLeft{top:104px;bottom:160px;gap:12px}
}

/* --- Perbaikan header: pill status bikin brand ke-squish -> tagline jangan wrap,
   dan sembunyikan tagline lebih awal (<=1500px) supaya header muat --- */
@media(min-width:1001px){
  .ui .brand-tagline{white-space:nowrap}
  .ui .header-card{gap:10px;padding:6px 6px 6px 12px}
  .ui #sceneStatus{max-width:200px}
  /* Card header BOLEH wrap ke baris kedua: isi card kaku ~1140px, jadi di jendela
     <~1600px tombol terakhir (Health) dulu kepotong keluar layar. Sekarang tombol
     yang tidak muat turun ke baris kedua di dalam card — selalu terlihat penuh. */
  .ui .header-card{flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:8px;justify-content:flex-end}
  .ui .team-picker{flex:none}
  .ui .team-picker select{width:150px}
  .ui #teamFaces{flex:none}
  .header-card .btn{flex:none}
}
@media(min-width:1001px) and (max-width:1500px){
  .ui .brand-tagline{display:none}
}
@media(min-width:1001px) and (max-width:1150px){
  /* Jendela sempit (mis. zoom 125%): wajah kru + pill status disembunyikan dan
     margin header dirampingkan demi ruang tombol; picker "Anggota kru" tetap ada.
     Tanpa ini card wrap 3 baris dan header menimpa panel kru (top 146px). */
  .ui #teamFaces{display:none}
  .ui #sceneStatus{display:none}
  .ui #header{left:12px;right:12px}
}

/* --- Panel info agen MENGGANTIKAN panel roster, bukan menumpuk di atasnya.
   Sebelumnya keduanya tampil bareng (selisih 14px) -> kelihatan "nimpa". --- */
@media(min-width:1001px){
  body:has(#info:not([hidden])) .crew-panel{display:none}
  .ui #info{top:146px;width:304px} /* samakan slot dengan .crew-panel */
}

/* === Minimize card (v2) — tombol di header tiap card, berlaku desktop & mobile === */
.minbtn{flex:none;width:30px;height:30px;margin-left:6px;border:1px solid var(--line);
  background:var(--sheet);color:var(--ink-2);border-radius:8px;font-size:16px;font-weight:700;
  line-height:1;cursor:pointer;display:inline-grid;place-items:center;padding:0}
.minbtn:hover{background:var(--hover);color:var(--ink)}
.minbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* saat minimize: hanya header yang tersisa */
.crew-panel.minimized > :not(.crew-head),
#log.minimized > :not(.log-head),
#floorCaption.minimized > :not(.tb-head){display:none}
/* Log di-pin top+bottom (stack kolom kanan); saat minimize lepas pin bawah
   supaya card-nya benar-benar collapse setinggi header. */
#log.minimized{bottom:auto}

/* === Command bar agen (v2) === */
.cmdbar{position:fixed;inset:0;z-index:200;background:rgba(30,34,48,.35);display:flex;justify-content:center;align-items:flex-start;padding:12vh 12px 12px}
.cmdbar[hidden]{display:none}
.cmdbar-box{width:min(560px,94vw);background:var(--sheet);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(30,34,48,.3);overflow:hidden}
.cmdbar-inputrow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.cmdbar-kbd{font:700 11px var(--mono);background:#f3efe8;border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--ink-2);white-space:nowrap}
#cmdbarInput{flex:1;border:0;outline:0;font-size:15px;background:transparent;color:var(--ink);min-height:36px;min-width:0}
.cmdbar-list{max-height:320px;overflow:auto;padding:6px}
.cmd-item{padding:9px 12px;border-radius:10px;cursor:pointer}
.cmd-item.sel,.cmd-item:hover{background:var(--hover)}
.cmd-item b{font-size:14px}
.cmd-hint{font-size:12px;color:var(--ink-2);margin-top:2px}
.cmd-empty{padding:14px;font-size:13px;color:var(--ink-2)}
.cmdbar-msg{padding:10px 14px;font-size:13px;border-top:1px solid var(--line);min-height:20px;color:var(--ink-2);line-height:1.4}
.cmdbar-msg.err{color:#c0392b}

/* === Preset workspace chips (di command palette) === */
.cmd-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line)}
.cmd-presets span{font-size:12px;color:var(--ink-2);font-weight:600}
.cmd-preset{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.cmd-preset:hover{background:var(--hover)}
.cmd-preset.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* === Mode presentasi: sembunyikan seluruh UI === */
body.work-present #header,body.work-present #sideLeft,body.work-present .crew-panel,
body.work-present #log,body.work-present #info,body.work-present #controls,
body.work-present #cameraHint,body.work-present #followBar,body.work-present #sceneStatus,
body.work-present #tourBar,body.work-present #labels{display:none!important}
#presentExit{position:fixed;bottom:18px;right:18px;z-index:300;display:flex;align-items:center;gap:8px;
  background:rgba(31,36,51,.92);color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:999px;
  padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3)}
#presentExit:hover{background:#2c3346}
#presentExit[hidden]{display:none}
#presentExit span{font-weight:400;opacity:.75;font-size:12px}

/* === Dispatcher Otomatis (v2) === */
.dp-dialog{width:min(720px,95vw)}
.dp-controls{display:flex;align-items:center;gap:12px;margin:12px 0}
.dp-info{font-size:13px;color:var(--ink-2)}
.dp-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;margin:4px 0 8px}
.dp-row{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #d8c9a8;border-radius:12px;padding:9px 12px;cursor:pointer;text-align:left;width:100%}
.dp-row:hover{border-color:#2E8B8B}
.dp-row input{width:18px;height:18px;flex:none;accent-color:#2E8B8B}
.dp-row.dp-noagent{opacity:.6;cursor:default}
.dp-task{flex:1;min-width:0}
.dp-task b{display:block;font-size:14px}
.dp-task small{display:block;font-size:12px;color:#6E5F4E;margin-top:2px}
.dp-st{font-size:12px;white-space:nowrap}
.dp-ok{color:#2f6b47;font-weight:700}
.dp-err{color:#c0392b;font-weight:700}
.dp-msg{font-size:13px;color:#6E5F4E;min-height:20px;margin:6px 0;line-height:1.4}
.dp-msg.err{color:#c0392b}
.dp-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* header buttons ramping (muat tombol Dispatch di 1440px) */
.header-card .btn{padding:8px 5px;font-size:12.5px;min-height:0}

/* === Project Workspace (v2) === */
.pw-dialog{width:min(760px,95vw)}
.pw-tabs{display:flex;align-items:center;gap:8px;margin:12px 0}
.pw-tab{border:2px solid #d8c9a8;background:#fff;border-radius:10px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;color:#6E5F4E}
.pw-tab.on{background:#2E8B8B;border-color:#2E8B8B;color:#fff}
.pw-tab .pw-n{background:#c0392b;color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;margin-left:4px}
.pw-tabs .dp-info{margin-left:auto}
.pw-pane{display:flex;flex-direction:column;gap:10px;max-height:48vh;overflow:auto;padding:2px}
.pw-card{background:#fff;border:2px solid #d8c9a8;border-radius:12px;overflow:hidden}
.pw-chead{display:flex;align-items:center;gap:10px;background:#f7f1e3;padding:10px 14px;border-bottom:1px solid #e8dcc0}
.pw-picon{font-size:22px}
.pw-chead b{display:block;font-size:14px}
.pw-chead small{color:#6E5F4E;font-size:12px}
.pw-cbody{padding:8px 14px 10px}
.pw-trow{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;border-bottom:1px dashed #eee4cc}
.pw-trow:last-child{border-bottom:none}
.pw-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#bbb}
.pw-dot.st-doing{background:#2E8B8B}.pw-dot.st-review{background:#e6a817}.pw-dot.st-blocked{background:#c0392b}.pw-dot.st-todo,.pw-dot.st-queued{background:#9aa5b1}.pw-dot.st-done{background:#2f6b47}
.pw-tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-who{font-size:11px;color:#6E5F4E;background:#f1e9d4;border-radius:8px;padding:2px 8px;white-space:nowrap}
.pw-more{color:#6E5F4E}
.pw-rrow{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #d8c9a8;border-left-width:6px;border-radius:10px;padding:9px 12px}
.pw-rrow.sev3{border-left-color:#c0392b}.pw-rrow.sev2{border-left-color:#e6a817}
.pw-rrow>div{flex:1;min-width:0}.pw-rrow b{display:block;font-size:13.5px}.pw-rrow small{color:#6E5F4E;font-size:12px}
.pw-badge{font-size:11px;font-weight:700;background:#f1e9d4;border-radius:8px;padding:3px 9px;white-space:nowrap;color:#6E5F4E}
.pw-tlsec{margin-bottom:4px}.pw-tlsec>b{display:block;font-size:13px;margin:8px 0 4px;color:#4a3f31}

/* === Mobile refactor (v2) === */
/* Desktop: strip tidak mengubah apa-apa */
.hbtn-strip{display:contents}

@media(max-width:1000px){
  /* Header jadi kolom kompak: brand, picker, strip tombol */
  .ui #header{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px}
  .ui #brand{flex:none;min-width:0}
  .ui #brand strong{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ui #sceneStatus{display:none}
  /* header-card bukan contents lagi */
  .ui .header-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0;align-items:stretch}
  .ui .team-picker{order:0;width:100%;flex:none;align-self:stretch;margin:0}
  .ui #teamFaces{display:none}
  /* strip tombol: scroll horizontal */
  .ui .hbtn-strip{display:flex;flex:none;gap:6px;overflow-x:auto;overflow-y:hidden;
    max-width:100%;min-width:0;
    padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ui .hbtn-strip::-webkit-scrollbar{display:none}
  .ui .hbtn-strip .btn{flex:0 0 auto;white-space:nowrap;min-height:40px}

  /* Nav lantai di bawah header yang kompak */
  .ui #floors{top:183px}

  /* Panel kru jadi bottom sheet di mobile */
  .ui .crew-panel{left:8px;right:8px;width:auto;top:auto;bottom:138px;max-height:46dvh;z-index:40;
    border-radius:14px;box-shadow:0 -8px 30px rgba(60,48,30,.18)}
  .ui .crew-panel.minimized{max-height:none}
  .ui .crew-panel.minimized .crew-bos,
  .ui .crew-panel.minimized .crew-sec{display:none}

  /* Dialog v2 muat di layar kecil */
  .dp-dialog,.pw-dialog{width:calc(100vw - 16px);max-height:92dvh}
  .dp-list,.pw-pane{max-height:52vh}
}

/* === Health Monitor (v2) === */
.hl-dialog{width:min(780px,95vw)}
.hl-sec{font-size:14px;margin:14px 0 8px;color:#4a3f31}
.hl-vps{background:#fff;border:2px solid #d8c9a8;border-radius:12px;padding:12px 14px}
.hl-warn{background:#fdf0ec;border:2px solid #e8634a;color:#a03a28;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;margin-bottom:10px}
.hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.hl-grid b{font-size:12px;color:#6E5F4E;display:block;margin-bottom:4px}
.hl-grid small{font-size:11px;color:#6E5F4E}
.hl-big{font-size:18px;font-weight:700}
.hl-bar{height:10px;background:#eee4cc;border-radius:6px;overflow:hidden;margin:4px 0}
.hl-fill{height:100%;border-radius:6px}
.hl-fill.ok{background:#2E8B8B}.hl-fill.warn{background:#e6a817}.hl-fill.bad{background:#c0392b}
.hl-agents{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:44vh;overflow:auto;padding:2px}
.hl-card{background:#fff;border:2px solid #d8c9a8;border-radius:12px;padding:10px 12px}
.hl-chead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hl-chead>div{flex:1;min-width:0}.hl-chead b{display:block;font-size:14px}.hl-chead small{color:#6E5F4E;font-size:11px}
.hl-dot{font-size:18px}
.hl-seen{font-size:10px;color:#6E5F4E;background:#f1e9d4;border-radius:8px;padding:2px 7px;white-space:nowrap}
.hl-task{font-size:12.5px;margin-bottom:6px}
.hl-act{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;padding:3px 0;border-top:1px dashed #eee4cc;color:#4a3f31}
.hl-act small{color:#6E5F4E;white-space:nowrap}
@media(max-width:1000px){
  .hl-grid{grid-template-columns:1fr}
  .hl-agents{grid-template-columns:1fr;max-height:52vh}
  .hl-dialog{width:calc(100vw - 16px)}
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH UI/UX — Hana, 2026-10-13 (untuk halaman TES)
   File ini = office.css asli (atas) + blok patch ini (bawah).
   Semua aturan di sini OVERRIDE; file asli di atas tidak diubah.
   QC Nuna: cek bar tombol simulasi, header, dialog kanban/chat/TV
   di desktop 1440px + HP 375px.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Bar tombol simulasi: boleh bungkus (wrap), tidak meluber.
   Sebelumnya 12 tombol simulasi + 6 tombol kamera dalam satu
   baris tanpa wrap — di layar <~1500px meluber keluar viewport. */
#controls{flex-wrap:wrap;justify-content:center}
.simulation-controls,.camera-controls{flex-wrap:wrap;justify-content:center}

/* 2. Tombol baru Nuna (Jam Kantor, Briefing, Terima Klien, Fokus,
   Istirahat Ngopi) sudah pakai emoji — sembunyikan kotak ::before
   kosong. Ikon mask tidak didefinisikan untuk tombol ini; kalau
   dibiarkan, ::before tampil sebagai kotak solid 16px. */
.ui #bClock::before,.ui #bBrief::before,.ui #bClient::before,
.ui #bFocus::before,.ui #bCoffee::before{display:none}

/* 3. Hierarki tombol: Jam Kantor = aksi utama simulasi (aksen),
   sisanya netral. Tombol kamera tetap netral. */
.ui #bClock{background:var(--accent);border-color:var(--accent);color:#fff}
.ui #bClock:hover{background:#d4553d}

/* 4. Tombol "🌍 BeBeRest WORLD": dipindah ke header (lihat
   index_test.html.patch.md) — bukan lagi floating. Gaya tombolnya: */
.world-link{background:#ff8c42;border-color:#43302b;color:#fff;text-decoration:none}
.world-link:hover{background:#f07a2e;color:#fff}

@media(max-width:1250px){
  /* 5. Di layar menengah, bar kontrol bawah (bottom:16px) dan
     tombol World lama bisa bertabrakan — World sudah di header,
     aturan ini hanya jaga-jaga bila floating masih ada. */
  a[href="world.html"]:not(.world-link){bottom:110px}
}

@media(max-width:1000px){
  /* 6. Bar simulasi HP: 12 tombol jadi 3 baris × 4 (bukan 1 baris
     12 tombol mungil yang teksnya tidak terbaca). */
  .simulation-controls .btn{flex:1 1 22%;min-width:0}
  .camera-controls{flex-wrap:wrap}
  /* 7. Sufiks jumlah kru di nav lantai: 'people' → 'orang'. */
  .ui #floors .floor-count::after{content:' orang'}
  /* 8. Dialog di HP: kanban 2 kolom, chat tumpuk vertikal,
     TV Command Centre 2 kolom. */
  .kb-cols{grid-template-columns:1fr 1fr}
  .ch-wrap{grid-template-columns:1fr}
  .ch-contacts{flex-direction:row;overflow-x:auto}
  .tv-counts{grid-template-columns:1fr 1fr}
}