.office-title { margin-bottom: 18px; }
.office-title h2 { font-size: 28px; margin: 5px 0 7px; }
.office-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.office-mode-label { font-size: 13px; color: var(--muted); }
.office-toolbar button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-text); border-color: var(--accent-line); }
.office-frame { border: 1px solid var(--line-strong); border-radius: var(--r-l); background: var(--bg); position: relative; overflow: hidden; }
.office-view { width: 100%; height: clamp(390px, 54vw, 650px); position: relative; }
.office-view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.office-preview { position: absolute; top: 20px; left: 22px; font-size: 10px; letter-spacing: 1.7px; font-weight: 600; padding: 8px 11px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-m); pointer-events: none; }
.office-legend { position: absolute; bottom: 16px; left: 22px; color: var(--muted); background: var(--surface); font-size: 11px; border-radius: var(--r-m); padding: 5px 9px; pointer-events: none; }
.office-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.office-room-label { position: absolute; left: 0; top: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); font-size: 10px; letter-spacing: .25px; font-weight: 600; padding: 5px 8px; }
.office-room-label.main { color: var(--accent-text); border-color: var(--accent-line); }
.office-summary { margin-top: 16px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.office-loading { padding: 90px 32px; color: var(--muted); text-align: center; }
.office-list { margin-top: 22px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.office-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.office-table caption { text-align: left; padding: 16px; font-weight: 650; color: var(--ink); }
.office-table th { font-size: 11px; color: var(--muted); background: var(--surface-2); }
.office-table :is(th, td) { padding: 12px 16px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.office-list-primary { margin-top: 8px; }
.office-plan { height: 100%; width: 100%; }
.office-plan text { fill: var(--ink-2); font-size: 16px; font-family: inherit; }
.office-plan-floor { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 2; }
.office-plan-room { fill: var(--surface-3); stroke: var(--line); stroke-width: 2; }
.office-plan-desk { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.office-plan-chair { fill: var(--accent); }
.office-plan-manager { fill: var(--accent-tint); stroke: var(--accent-line); stroke-width: 2; }
@media (max-width: 640px) { .office-view { height: 400px; } .office-preview { left: 10px; top: 10px; } .office-legend { left: 10px; bottom: 10px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .office-root * { scroll-behavior: auto; } }
.office-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.office-layout.office-with-panel { grid-template-columns: minmax(0, 1fr) 310px; }
.office-detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; min-width: 0; max-height: 650px; overflow: auto; }
.office-detail-heading { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.office-detail h3 { margin: 0 0 12px; font-size: 19px; overflow-wrap: anywhere; }
.office-detail h4 { font-size: 13px; margin: 22px 0 8px; }
.office-detail p, .office-recent { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.office-detail-live { border: 1px solid var(--accent-line); background: var(--accent-tint); color: var(--accent-text); border-radius: var(--r-m); padding: 10px; }
.office-recent { padding-left: 17px; color: var(--ink-2); }
.office-recent li { margin: 7px 0; }
.office-person-label { position: absolute; top: 0; left: 0; pointer-events: auto; border: 0; padding: 0; display: flex; align-items: center; flex-direction: column; gap: 3px; background: none; color: var(--ink); cursor: pointer; max-width: 115px; }
.office-person-name { display: block; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); max-width: 100%; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.office-person-bubble { display: grid; place-items: center; height: 24px; min-width: 24px; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-tint); color: var(--accent-text); font-size: 17px; line-height: 1; font-weight: 700; }
.office-person-label[data-status="waiting_approval"] .office-person-bubble { color: var(--warn); border-color: var(--warn-line); background: var(--warn-tint); }
.office-person-label[data-status="failed"] .office-person-bubble { color: var(--err); border-color: var(--err-line); background: var(--err-tint); }
.office-person-label[data-status="succeeded"] .office-person-bubble { color: var(--ok); background: var(--ok-tint); }
.office-person-label[data-status="unknown"] .office-person-bubble, .office-person-label[data-status="idle"] .office-person-bubble { color: var(--muted); border-color: var(--line); background: var(--surface-2); }
.office-person-label:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-m); }
.office-plan-person { cursor: pointer; }
.office-plan-person circle { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 2; }
.office-plan-person[data-status="waiting_approval"] circle { fill: var(--warn-tint); stroke: var(--warn); }
.office-plan-person[data-status="failed"] circle { fill: var(--err-tint); stroke: var(--err); }
.office-plan-person[data-status="succeeded"] circle { fill: var(--ok-tint); stroke: var(--ok); }
.office-plan-person .office-plan-symbol { font-size: 19px; font-weight: 700; }
.office-plan-person .office-plan-name { font-size: 11px; }
.office-plan-person:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (max-width: 1080px) { .office-layout.office-with-panel { grid-template-columns: minmax(0, 1fr); } .office-detail { max-height: none; } }
.office-person-speech { position: relative; padding: 3px 9px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--accent-line); color: var(--accent-text); font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-soft); }
.office-person-speech::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: inherit; border-right: 1px solid var(--accent-line); border-bottom: 1px solid var(--accent-line); transform: translateX(-50%) rotate(45deg); }
.office-person-speech[hidden] { display: none; }
.office-person-label[data-activity="asking_manager"] .office-person-bubble { color: var(--info); border-color: var(--info-line); background: var(--info-tint); }
.office-plan-link { stroke: var(--info); stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.office-plan-link-label { fill: var(--info); font-size: 11px; font-weight: 700; }
.office-plan-person[data-activity="asking_manager"] circle { fill: var(--info-tint); stroke: var(--info); }
.office-feed { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: 12px 16px; margin: 0 0 14px; }
.office-feed h3 { margin: 0 0 8px; font-size: .95rem; }
.office-feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .88rem; }
.office-feed-list li { display: flex; gap: 10px; align-items: baseline; overflow-wrap: anywhere; }
.office-feed-list time { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.office-feed-list li[data-kind="question"] span { color: var(--info); }
.office-feed-list li[data-kind="answered"] span, .office-feed-list li[data-kind="completed"] span { color: var(--ok); }
/* The person's own office model (GLB) and its placement on this computer. */
.office-model { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px; margin-bottom: 14px; }
.office-model h3 { margin: 0 0 6px; font-size: 16px; }
.office-model-name { font-size: 13px; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; margin: 10px 0 12px; }
.office-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 14px; }
.office-model-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 0 0 12px; cursor: pointer; }
.office-model-status:empty { display: none; }
.office-model-status { white-space: pre-line; }
.office-model-errors { margin: 6px 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.office-model-errors li + li { margin-top: 3px; }
/* Capacity: people who found no free point stay in the list; the frame says so. */
.office-capacity { position: absolute; top: 20px; right: 22px; max-width: min(60%, 360px); margin: 0; padding: 8px 11px; font-size: 12px; font-weight: 600; color: var(--warn); background: var(--warn-tint); border: 1px solid var(--warn-line); border-radius: var(--r-m); }
.office-capacity[hidden] { display: none; }
/* Actions from the 3D office: the same rights as the other Studio screens. */
.office-detail-actions { margin: 12px 0 4px; }
.office-detail-work:empty, .office-detail-pending:empty { display: none; }
.office-detail-work, .office-pending { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.office-pending { border: 1px solid var(--warn-line); background: var(--warn-tint); border-radius: var(--r-m); padding: 10px 12px; }
.office-pending h4 { margin-top: 4px; }
.office-chat { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.office-chat li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-m); background: var(--surface-2); font-size: 13px; overflow-wrap: anywhere; }
.office-chat li.mine { background: var(--accent-tint); }
.office-chat strong { font-size: 11px; color: var(--muted); }
.office-proposal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 8px; border: 1px solid var(--accent-line); border-radius: var(--r-m); background: var(--surface); }
.office-proposal b { flex-basis: 100%; font-size: 12px; }
/* The plan of an imported model: its own points, paths and labels. */
.office-plan-path { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 5 6; }
.office-plan-wait { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.office-plan .office-plan-area { fill: var(--accent-text); font-size: 15px; font-weight: 600; }
.office-plan .office-plan-full { fill: var(--warn); font-size: 15px; font-weight: 600; }