.ai-office-page {
    --ai-office-bg: #eef3f8;
    --ai-office-panel: #ffffff;
    --ai-office-panel-soft: #f5f8fb;
    --ai-office-text: #172033;
    --ai-office-muted: #64748b;
    --ai-office-line: #d9e2ec;
    --ai-office-green: #26a269;
    --ai-office-blue: #3b82f6;
    --ai-office-orange: #f59e0b;
    --ai-office-purple: #8b5cf6;
    min-height: calc(100vh - 32px);
    margin: 16px;
    overflow: hidden;
    color: var(--ai-office-text);
    background: var(--ai-office-bg);
    border: 1px solid var(--ai-office-line);
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(23, 32, 51, .08);
}

.ai-office-topbar,
.ai-office-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 58px;
    padding: 0 18px;
    background: var(--ai-office-panel);
}

.ai-office-topbar { border-bottom: 1px solid var(--ai-office-line); }
.ai-office-footer { min-height: 42px; border-top: 1px solid var(--ai-office-line); color: var(--ai-office-muted); font-size: .75rem; }
.ai-office-footer strong { color: var(--ai-office-text); }
.ai-office-top-spacer { flex: 1; }

.ai-office-brand { display: flex; align-items: center; gap: 10px; min-width: 175px; }
.ai-office-brand strong { display: block; font-size: 1rem; letter-spacing: -.02em; }
.ai-office-brand span:not(.ai-office-brand-mark) { display: block; color: var(--ai-office-muted); font-size: .68rem; }
.ai-office-brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: white; background: linear-gradient(135deg, var(--ai-office-green), var(--ai-office-blue)); box-shadow: 0 6px 14px rgba(38, 162, 105, .24); }

.ai-office-topnav { display: flex; gap: 4px; }
.ai-office-topnav button,
.ai-office-map-controls button,
.ai-office-rail button,
.ai-office-character,
.ai-office-agent-card button { border: 0; font: inherit; cursor: pointer; }
.ai-office-topnav button { padding: 8px 11px; color: var(--ai-office-muted); background: transparent; border-radius: 8px; font-size: .8rem; }
.ai-office-topnav button:hover,
.ai-office-topnav button.is-active { color: var(--ai-office-text); background: var(--ai-office-panel-soft); }
.ai-office-presence { display: flex; align-items: center; gap: 8px; color: var(--ai-office-muted); font-size: .72rem; white-space: nowrap; }
.ai-office-presence span,
.ai-office-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-office-green); box-shadow: 0 0 0 4px rgba(38, 162, 105, .14); }
.ai-office-user-avatar { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ai-office-panel); border-radius: 50%; color: #57361e; background: #f8c69b; box-shadow: 0 0 0 1px var(--ai-office-line); font-size: .72rem; font-weight: 700; }

.ai-office-layout { display: grid; grid-template-columns: 64px minmax(0, 1fr) 300px; min-height: 610px; }
.ai-office-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 17px 0; background: var(--ai-office-panel); border-right: 1px solid var(--ai-office-line); }
.ai-office-rail button { display: grid; place-items: center; width: 36px; height: 36px; color: var(--ai-office-muted); background: transparent; border-radius: 10px; }
.ai-office-rail button:hover,
.ai-office-rail button.is-active { color: var(--ai-office-text); background: var(--ai-office-panel-soft); }
.ai-office-rail-bottom { margin-top: auto; }

.ai-office-map-area { position: relative; overflow: hidden; padding: 22px 24px 12px; background: radial-gradient(circle at 48% 46%, rgba(59, 130, 246, .09), transparent 42%), var(--ai-office-bg); }
.ai-office-map-heading { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; }
.ai-office-map-heading h1 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.ai-office-map-heading p { margin: 3px 0 0; color: var(--ai-office-muted); font-size: .75rem; }
.ai-office-map-controls { display: flex; align-items: center; gap: 4px; color: var(--ai-office-muted); font-size: .75rem; }
.ai-office-map-controls button { display: grid; place-items: center; width: 29px; height: 29px; color: var(--ai-office-text); background: rgba(255,255,255,.78); border: 1px solid var(--ai-office-line); border-radius: 8px; }
.ai-office-map-controls span { min-width: 42px; text-align: center; }

.ai-office-map { position: relative; height: 520px; max-width: 800px; margin: 0 auto; }
.ai-office-floor { position: absolute; inset: 70px 26px 35px; transform: perspective(900px) rotateX(58deg) rotateZ(-1deg); transform-origin: center; border: 2px solid rgba(147, 164, 184, .55); border-radius: 18px; background: linear-gradient(90deg, rgba(255,255,255,.52) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.52) 1px, transparent 1px), rgba(255,255,255,.45); background-size: 36px 36px; box-shadow: 0 30px 40px rgba(23, 32, 51, .14); }
.ai-office-zone { position: absolute; z-index: 2; padding: 10px; border: 1px solid rgba(147, 164, 184, .68); border-radius: 13px; background: rgba(255,255,255,.88); box-shadow: 0 12px 18px rgba(23, 32, 51, .1); }
.ai-office-zone strong { display: block; font-size: .72rem; }
.ai-office-zone span { color: var(--ai-office-muted); font-size: .62rem; }
.ai-office-zone-reception { left: 4%; top: 46%; width: 22%; height: 22%; }
.ai-office-zone-team { left: 28%; top: 13%; width: 31%; height: 28%; border-color: rgba(59, 130, 246, .5); }
.ai-office-zone-agent { right: 4%; top: 18%; width: 25%; height: 24%; border-color: rgba(38, 162, 105, .6); background: rgba(237, 251, 244, .92); }
.ai-office-zone-meeting { left: 34%; bottom: 7%; width: 29%; height: 21%; }
.ai-office-zone-idea { right: 6%; bottom: 7%; width: 22%; height: 21%; border-color: rgba(139, 92, 246, .48); }

.ai-office-character { position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; transform: translate(-50%, -50%); background: transparent; }
.ai-office-character-avatar { display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid var(--ai-office-panel); border-radius: 50%; color: #57361e; background: #f8c69b; box-shadow: 0 0 0 1px rgba(147, 164, 184, .7), 0 5px 12px rgba(23, 32, 51, .16); font-size: .7rem; font-weight: 700; }
.ai-office-character-name { padding: 2px 6px; color: var(--ai-office-text); background: rgba(255,255,255,.92); border-radius: 5px; box-shadow: 0 2px 6px rgba(23, 32, 51, .14); font-size: .62rem; white-space: nowrap; }
.ai-office-character:hover .ai-office-character-avatar,
.ai-office-character.is-selected .ai-office-character-avatar { box-shadow: 0 0 0 3px rgba(38, 162, 105, .28), 0 0 0 5px var(--ai-office-panel), 0 6px 13px rgba(23, 32, 51, .18); }
.ai-office-character-agent .ai-office-character-avatar { color: white; background: linear-gradient(145deg, var(--ai-office-green), var(--ai-office-blue)); }
.ai-office-character-current { left: 42%; top: 32%; }
.ai-office-character-lan { left: 52%; top: 37%; }
.ai-office-character-minh { left: 21%; top: 59%; }
.ai-office-character-test { left: 75%; top: 32%; }
.ai-office-character-ha { left: 48%; top: 80%; }
.ai-office-character-position-5 { left: 14%; top: 35%; }
.ai-office-character-position-6 { left: 31%; top: 73%; }
.ai-office-character-position-7 { left: 62%; top: 62%; }
.ai-office-character-position-8 { left: 84%; top: 62%; }
.ai-office-character-position-9 { left: 68%; top: 83%; }
.ai-office-character-position-10 { left: 16%; top: 78%; }

.ai-office-agent-bubble { position: absolute; z-index: 8; right: 10%; top: 7%; width: 194px; padding: 10px 12px; border: 1px solid rgba(38, 162, 105, .4); border-radius: 12px 12px 12px 3px; background: var(--ai-office-panel); box-shadow: 0 10px 22px rgba(23, 32, 51, .14); font-size: .7rem; }
.ai-office-agent-bubble::after { position: absolute; left: 12px; bottom: -7px; width: 12px; height: 12px; background: var(--ai-office-panel); border-right: 1px solid rgba(38, 162, 105, .4); border-bottom: 1px solid rgba(38, 162, 105, .4); transform: rotate(45deg); content: ""; }
.ai-office-agent-bubble strong { display: block; margin-bottom: 3px; color: var(--ai-office-green); font-size: .68rem; }
.ai-office-agent-bubble span { color: var(--ai-office-text); }
.ai-office-minimap { position: absolute; z-index: 10; left: 28px; bottom: 16px; width: 135px; height: 80px; padding: 7px; border: 1px solid var(--ai-office-line); border-radius: 10px; background: rgba(255,255,255,.92); }
.ai-office-minimap div { position: relative; width: 100%; height: 100%; border: 1px solid var(--ai-office-line); border-radius: 5px; background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(147, 164, 184, .32) 18px), repeating-linear-gradient(0deg, transparent 0 13px, rgba(147, 164, 184, .32) 14px); }
.ai-office-minimap div::after { position: absolute; left: 38%; top: 30%; width: 24%; height: 29%; border: 2px solid var(--ai-office-green); border-radius: 4px; content: ""; }
.ai-office-map-footer { display: flex; justify-content: space-between; gap: 12px; color: var(--ai-office-muted); font-size: .68rem; }
.ai-office-map-footer span { display: flex; align-items: center; gap: 4px; }

.ai-office-inspector { display: flex; flex-direction: column; gap: 15px; padding: 18px; background: var(--ai-office-panel); border-left: 1px solid var(--ai-office-line); }
.ai-office-inspector-heading { display: flex; align-items: center; justify-content: space-between; }
.ai-office-inspector-heading strong { display: block; font-size: .82rem; }
.ai-office-inspector-heading span { display: block; margin-top: 3px; color: var(--ai-office-muted); font-size: .68rem; }
.ai-office-inspector-menu { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--ai-office-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.ai-office-inspector-menu:hover { color: var(--ai-office-text); background: var(--ai-office-panel-soft); }
.ai-office-profile { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--ai-office-line); border-radius: 11px; background: var(--ai-office-panel-soft); }
.ai-office-profile-avatar { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ai-office-panel); border-radius: 50%; color: #57361e; background: #f8c69b; box-shadow: 0 0 0 1px var(--ai-office-line); font-size: .72rem; font-weight: 700; }
.ai-office-profile-avatar.ai-office-character-agent { color: white; background: linear-gradient(145deg, var(--ai-office-green), var(--ai-office-blue)); }
.ai-office-profile strong { display: block; font-size: .76rem; }
.ai-office-profile div span { display: block; margin-top: 2px; color: var(--ai-office-muted); font-size: .66rem; }
.ai-office-online-dot { margin-left: auto; }
.ai-office-online-dot.is-offline { background: var(--ai-office-muted); box-shadow: none; }
.ai-office-inspector-section { padding-top: 13px; border-top: 1px solid var(--ai-office-line); }
.ai-office-section-title { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--ai-office-muted); font-size: .65rem; letter-spacing: .05em; text-transform: uppercase; }
.ai-office-status-label { color: var(--ai-office-green); }
.ai-office-status-text { margin: 0; color: var(--ai-office-muted); font-size: .74rem; line-height: 1.45; }
.ai-office-feed { display: grid; gap: 10px; }
.ai-office-feed > div { display: grid; grid-template-columns: 8px 1fr; gap: 9px; font-size: .72rem; }
.ai-office-feed i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--ai-office-blue); }
.ai-office-feed > div:nth-child(2) i { background: var(--ai-office-orange); }
.ai-office-feed > div:nth-child(3) i { background: var(--ai-office-purple); }
.ai-office-feed small { display: block; margin-top: 2px; color: var(--ai-office-muted); font-size: .64rem; }
.ai-office-agent-card { margin-top: auto; padding: 12px; border: 1px solid rgba(38, 162, 105, .4); border-radius: 12px; background: rgba(237, 251, 244, .9); }
.ai-office-agent-card-title { display: flex; align-items: center; gap: 6px; color: #147548; font-size: .74rem; }
.ai-office-agent-card p { margin: 5px 0 10px; color: #557266; font-size: .68rem; }
.ai-office-agent-card button { width: 100%; padding: 8px 10px; color: #062315; background: var(--ai-office-green); border-radius: 8px; font-size: .7rem; font-weight: 700; }

@media (max-width: 1100px) { .ai-office-layout { grid-template-columns: 58px minmax(0, 1fr); } .ai-office-inspector { display: none; } }
@media (max-width: 700px) { .ai-office-page { margin: 0; border-radius: 0; } .ai-office-topnav, .ai-office-presence { display: none; } .ai-office-map-area { padding: 16px 10px 10px; } .ai-office-map { height: 500px; } .ai-office-floor { inset: 70px 0 34px; } .ai-office-zone { padding: 7px; } .ai-office-zone span { display: none; } .ai-office-agent-bubble { right: 1%; width: 166px; font-size: .66rem; } .ai-office-map-footer { flex-direction: column; gap: 4px; } .ai-office-footer { display: none; } }