/* ============================================
   YouJue's Office — 「午夜樓層圖」場景
   設計來源：design_handoff_midnight_floor（高保真，按值重現）
   命名空間規範沿用 YJ-02 §14：.desk-* / .voice-* / .login-* / .floor-*
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --office-bg-1: #0c1120;
    --office-bg-2: #141c33;
    --office-bg-3: #1c2640;
    --office-card: rgba(255, 255, 255, 0.06);
    --office-card-border: rgba(255, 255, 255, 0.10);
    --office-text: #eef1f8;
    --office-text-dim: #9aa3b8;
    --office-warm: #f5b971;
    --office-green: #34d399;
    --office-red: #f87171;
}

html, body { height: 100%; }

body {
    font-family: "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", -apple-system, sans-serif;
    background: linear-gradient(180deg, var(--office-bg-1) 0%, var(--office-bg-2) 60%, var(--office-bg-3) 100%);
    color: var(--office-text);
    min-height: 100vh;
}

/* ============ 進入碼登入閘 ============ */

.login-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: linear-gradient(180deg, var(--office-bg-1), var(--office-bg-2));
    display: flex; align-items: center; justify-content: center; padding: 24px;
}

.login-card {
    width: 100%; max-width: 370px; text-align: center;
    background: var(--office-card);
    border: 1px solid var(--office-card-border);
    border-radius: 22px; padding: 42px 32px;
    backdrop-filter: blur(8px);
}

.login-logo {
    font-size: 29px; font-weight: 900; letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffd9a0, var(--office-warm));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.login-sub { color: var(--office-text-dim); font-size: 13px; margin: 8px 0 28px; }

.login-card input {
    width: 100%; padding: 13px 16px; font-size: 15px;
    border-radius: 12px; border: 1px solid var(--office-card-border);
    background: rgba(0, 0, 0, 0.25); color: var(--office-text);
    outline: none; text-align: center; letter-spacing: 2px;
}
.login-card input:focus { border-color: var(--office-warm); }

.login-btn {
    width: 100%; margin-top: 14px; padding: 13px 0; font-size: 15px; font-weight: 700;
    border: none; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, #f7c98b, #e8985a); color: #3a2410;
    transition: filter 0.15s ease;
}
.login-btn:hover { filter: brightness(1.08); }
.login-btn:disabled { opacity: 0.6; cursor: wait; }

.login-error { color: var(--office-red); font-size: 13px; margin-top: 12px; }

/* ============ 主場景 ============ */

.office-page {
    max-width: 1120px; margin: 0 auto; padding: 30px 24px 44px;
    position: relative;
    /* 變數在此重新解析：日間主題的文字色變數掛在 .office-page（見日夜主題段），
       body 的 color 在 body 節點就解析完不會跟著變，這行讓繼承鏈拿到正確主題色 */
    color: var(--office-text);
}

.office-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px; flex-wrap: wrap;
    position: relative; z-index: 3;
}

/* 公司 LOGO + 標題鎖定為一組（logo 在標題左側、垂直置中） */
.office-brand { display: flex; align-items: center; gap: 14px; }
/* uJu logo 是為白底設計：放在白色圓角小牌上，日間淺底＝清爽 logo chip、
   夜間深底＝白牌讓深藍字標有足夠對比（深藍剪影直接放夜空會糊掉）。 */
.office-logo {
    flex: none; width: 52px; height: 52px;
    border-radius: 13px; background: #fff;
    padding: 7px; box-sizing: border-box;
    object-fit: contain;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.office-title {
    font-size: 34px; font-weight: 900; letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffe2b8, var(--office-warm));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.office-subtitle { color: var(--office-text-dim); font-size: 14px; margin-top: 4px; }

.office-header-right { text-align: right; }

.office-clock {
    font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--office-text);
}

.office-online {
    color: var(--office-text-dim); font-size: 13px; margin-top: 2px;
    display: flex; align-items: center; gap: 6px; justify-content: flex-end;
}

.online-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--office-green);
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
}

/* ============ 落地窗夜景（含吊燈） ============ */

.office-window {
    position: relative; height: 130px; border-radius: 16px; overflow: hidden;
    background: linear-gradient(180deg, #070c18 0%, #101830 100%);
    border: 1px solid var(--office-card-border);
    margin-top: 22px;
}

.window-moon {
    position: absolute; top: 16px; right: 60px;
    width: 32px; height: 32px; border-radius: 50%;
    background: #fdf3d8; box-shadow: 0 0 26px rgba(253, 243, 216, 0.5);
}

.window-skyline {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; gap: 9px; padding: 0 18px;
}

.window-skyline i {
    flex: 1; display: block;
    border-radius: 3px 3px 0 0;
    background:
        repeating-linear-gradient(0deg,
            rgba(245, 185, 113, 0.32) 0 3px,
            transparent 3px 11px),
        #1f2c50;
}
.window-skyline i:nth-child(1) { height: 52%; }
.window-skyline i:nth-child(2) { height: 80%; }
.window-skyline i:nth-child(3) { height: 42%; }
.window-skyline i:nth-child(4) { height: 68%; }
.window-skyline i:nth-child(5) { height: 90%; }
.window-skyline i:nth-child(6) { height: 50%; }
.window-skyline i:nth-child(7) { height: 72%; }
.window-skyline i:nth-child(8) { height: 38%; }
.window-skyline i:nth-child(9) { height: 62%; }

.window-frame {
    position: absolute; inset: 0; display: flex; pointer-events: none;
}
.window-frame i {
    flex: 1; border-right: 3px solid rgba(8, 12, 22, 0.85);
}
.window-frame i:last-child { border-right: none; }

/* 吊燈（掛在窗框內，像辦公室天花板垂下） */
.office-lamps {
    position: absolute; inset: 0;
    display: flex; justify-content: space-around;
    pointer-events: none;
}
.office-lamps i {
    display: block; width: 16px; position: relative;
}
.office-lamps i::before {
    content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: 2px; height: 20px; background: rgba(255, 255, 255, 0.22);
}
.office-lamps i::after {
    content: ""; position: absolute; left: 50%; top: 20px; transform: translateX(-50%);
    width: 18px; height: 12px;
    background: #c9a96a; border-radius: 3px 3px 9px 9px;
    box-shadow: 0 10px 22px 4px rgba(245, 185, 113, 0.45);
}

/* ============ 服務暫停提示 ============ */

.voice-disabled-banner {
    background: rgba(245, 185, 113, 0.12);
    border: 1px solid rgba(245, 185, 113, 0.35);
    color: #f3cfa0; font-size: 13px;
    border-radius: 12px; padding: 10px 16px; margin-top: 18px;
    position: relative; z-index: 3;
}

/* ============ 木地板樓層 ============ */

.office-floor {
    margin-top: 24px; border-radius: 24px; position: relative;
    padding: 36px 32px 30px;
    background:
        repeating-linear-gradient(90deg, transparent 0 88px, rgba(0, 0, 0, 0.10) 88px 91px),
        linear-gradient(180deg, #5b452f 0%, #4a3826 100%);
    box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.45);
}

.floor-carpet {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 72%; height: 64%; border-radius: 28px;
    background: rgba(20, 28, 51, 0.55);
    border: 2px dashed rgba(245, 185, 113, 0.18);
    pointer-events: none;
}

.floor-plant {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #3f9d6b, #1d5c3a 70%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.plant-a { left: 16px; top: 14px; width: 40px; height: 40px; }
.plant-b { right: 16px; bottom: 14px; width: 46px; height: 46px; }

.floor-entrance {
    margin: 22px auto 0; width: max-content;
    font-size: 11px; letter-spacing: 4px; color: rgba(255, 255, 255, 0.45);
    border-top: 2px solid rgba(245, 185, 113, 0.35);
    padding: 6px 26px 0;
    position: relative;
}

/* ============ 桌位格（auto-fit 自動 3→2→1 欄） ============ */

.desk-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px; position: relative;
}

/* ============ 俯視桌位卡 ============ */

.desk-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 14px 18px; border-radius: 18px; cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.desk-card:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-4px);
}
.desk-card.desk-disabled { cursor: not-allowed; }
.desk-card.desk-disabled:hover { background: none; transform: none; }

/* 俯視桌面 + CSS 桌面小物（筆電 / 咖啡 / 文件） */
.desk-top {
    width: 160px; height: 60px; border-radius: 12px;
    background: linear-gradient(180deg, #8a6748, #6e5037);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
    position: relative;
}
.desk-laptop {
    position: absolute; left: 14px; top: 12px;
    width: 46px; height: 34px; border-radius: 5px;
    background: #11182c; border: 2px solid #2a3450;
    box-shadow: 0 0 12px rgba(120, 160, 255, 0.35);
}
.desk-laptop-screen {
    position: absolute; left: 23px; top: 20px;
    width: 28px; height: 17px; border-radius: 2px;
    background: linear-gradient(135deg, #3a5a9e, #6fa0e8);
}
.desk-coffee {
    position: absolute; right: 18px; top: 17px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #e8e2d4; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.desk-doc {
    position: absolute; right: 40px; top: 14px;
    width: 27px; height: 19px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.75);
}

/* 座位：椅背 + 頭像（主題色邊框）+ 在線點 */
.desk-seat { position: relative; margin-top: -16px; width: 74px; height: 74px; }

.desk-chairback {
    position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    width: 58px; height: 31px; border-radius: 0 0 29px 29px;
    background: #232c45;
    border: 2px solid rgba(255, 255, 255, 0.10); border-top: none;
}

.desk-avatar {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: #fff;
    border: 3px solid rgba(255, 255, 255, 0.25);  /* 主題色由 JS 以 borderColor 覆寫 */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* 頭像照片蓋在字母占位上；載入失敗 onerror 移除即露出字母 */
.desk-avatar-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}

.desk-online-dot {
    position: absolute; right: -1px; top: 2px;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--office-green);
    border: 2px solid #0c1120;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.9);
}

/* 名牌 pill：名字白 + 職稱主題色 */
.desk-nameplate {
    margin-top: 11px; display: flex; align-items: center; gap: 7px;
    background: rgba(12, 17, 32, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px; padding: 6px 15px;
}
.desk-nameplate .desk-name { font-size: 14.5px; font-weight: 700; color: var(--office-text); }
.desk-nameplate .desk-title { font-size: 12px; font-weight: 600; }  /* color 由 JS 帶主題色 */

.desk-tagline {
    font-size: 12px; color: var(--office-text-dim); margin-top: 8px;
    text-align: center; line-height: 1.6; min-height: 38px; max-width: 210px;
}

/* 分機通話 pill */
.desk-call-pill {
    margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: #06281a;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none; border-radius: 999px; padding: 8px 16px;
    cursor: pointer; transition: filter 0.15s ease;
    font-family: inherit;
}
.desk-call-pill:hover { filter: brightness(1.1); }
.desk-call-pill:disabled {
    background: rgba(255, 255, 255, 0.12); color: var(--office-text-dim);
    cursor: not-allowed; filter: none;
}

.office-footer {
    margin-top: 30px; text-align: center;
    color: rgba(154, 163, 184, 0.55); font-size: 12px;
    position: relative; z-index: 3;
}

/* 頁尾「重新輸入進入碼」：低調文字鈕，color 繼承 footer（日夜主題自動適配） */
.office-relogin {
    margin-left: 14px;
    background: none; border: none; padding: 0;
    font: inherit; color: inherit; cursor: pointer;
    text-decoration: underline dotted;
    opacity: 0.9;
}
.office-relogin:hover { opacity: 1; text-decoration: underline; }

/* ============ 通話 modal（DOM id 全保留，只改皮） ============ */

.voice-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(8, 11, 22, 0.78);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    backdrop-filter: blur(4px);
    overflow-y: auto;  /* 通話中頭像放大後超出視窗高時可捲動到按鈕 */
}

.voice-modal-card {
    width: 100%; max-width: 390px; text-align: center;
    background: linear-gradient(180deg, #1d2540, #161d33);
    border: 1px solid var(--office-card-border);
    border-radius: 22px; padding: 34px 26px 26px;
    margin: auto;  /* 配合 overlay overflow 捲動時維持置中 */
    transition: max-width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voice-avatar-wrap {
    position: relative; width: 100px; height: 100px; margin: 0 auto;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voice-avatar {
    width: 100%; height: 100%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 700; color: #fff;
    border: 3px solid var(--agent-color, rgba(255, 255, 255, 0.25));
    position: relative; z-index: 2;
}

/* 通話 modal 的照片 / 影片，蓋在字母圓上（z-index 3 > .voice-avatar 的 2） */
.voice-avatar-media {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
    border: 3px solid var(--agent-color, rgba(255, 255, 255, 0.25));
    box-sizing: border-box;
    z-index: 3;
}

/* ── 通話中頭像影片放大 4 倍（源自 Jennie-SaaS FAB scale(5) 的視覺概念，
   styles.css:2015 fab-video-playing；2026-06-12 使用者回饋 5 倍太大改 4 倍）──
   工程調整：用「實際尺寸」放大而非 transform——transform 不推擠版面，
   大圓會蓋住掛斷鈕；實際放大則按鈕被推到下方、保持可點。
   觸發：鉤在 office-voice.js 既有的 .speaking 狀態（session_started→cleanup），
   用 :has() 純 CSS 達成，office-voice.js 零改動。
   尺寸：min(400px, 62vh, 86vw)——桌機正好 4 倍，小螢幕以視窗封頂。 */
.voice-modal-card:has(.voice-avatar-ring.speaking) {
    max-width: 480px;
}
.voice-modal-card:has(.voice-avatar-ring.speaking) .voice-avatar-wrap {
    width: min(400px, 62vh, 86vw);
    height: min(400px, 62vh, 86vw);
}
.voice-modal-card:has(.voice-avatar-ring.speaking) .voice-avatar-media {
    box-shadow: 0 0 60px rgba(245, 185, 113, 0.35), 0 0 120px rgba(245, 185, 113, 0.18);
}

.voice-avatar-ring {
    position: absolute; inset: -9px; border-radius: 50%;
    border: 2px solid rgba(74, 222, 128, 0.0);
    z-index: 1;
}
.voice-avatar-ring.speaking {
    border-color: rgba(74, 222, 128, 0.6);
    animation: officePulse 1.6s ease-out infinite;
}

@keyframes officePulse {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

.voice-header h3 { margin-top: 15px; font-size: 21px; font-weight: 700; }

.voice-subtitle {
    color: var(--agent-color, var(--office-text-dim));
    font-size: 13px; font-weight: 600; margin-top: 4px;
}

.voice-status { margin-top: 14px; font-size: 14px; color: var(--office-text-dim); min-height: 20px; }

.voice-timer {
    margin-top: 8px; font-size: 32px; font-weight: 600;
    font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
.voice-timer.office-voice-urgent {
    color: var(--office-red);
    animation: officeUrgent 1s ease infinite;
}
@keyframes officeUrgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.voice-error { margin-top: 10px; color: var(--office-red); font-size: 13px; line-height: 1.5; }

.voice-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px;
}

.voice-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 12px 20px; font-size: 14px; font-weight: 600;
    border: none; border-radius: 12px; cursor: pointer;
    transition: filter 0.15s ease;
    font-family: inherit;
}
.voice-btn-primary,
.voice-btn-danger { padding: 12px 22px; font-size: 14.5px; font-weight: 700; }
.voice-btn-primary { background: linear-gradient(135deg, #4ade80, #22c55e); color: #06281a; }
.voice-btn-primary:disabled { background: rgba(255,255,255,0.12); color: var(--office-text-dim); cursor: not-allowed; }
.voice-btn-danger { background: linear-gradient(135deg, #f87171, #ef4444); color: #fff; }
.voice-btn-toggle, .voice-btn-secondary {
    background: rgba(255, 255, 255, 0.10); color: var(--office-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.voice-btn-primary:hover, .voice-btn-danger:hover { filter: brightness(1.08); }
.voice-btn-toggle:hover, .voice-btn-secondary:hover { filter: brightness(1.15); }

.voice-hint {
    margin-top: 17px; color: rgba(154, 163, 184, 0.8); font-size: 12px; line-height: 1.6;
}

/* ============ 會議室共用元件（會議鈕 / 計時 / 逐字稿行）============ */

.meeting-call-btn {
    margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: #3a2410;
    background: linear-gradient(135deg, #f7c98b, #e8985a);
    border: none; border-radius: 999px; padding: 8px 16px;
    cursor: pointer; transition: filter 0.15s ease;
    font-family: inherit;
}
.meeting-call-btn:hover { filter: brightness(1.08); }

.meeting-timer {
    font-size: 22px; font-weight: 600;
    font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
/* 最後 30 秒紅閃（JS 切 office-voice-urgent；原規則綁死 .voice-timer 不匹配 — 審查修正） */
.meeting-timer.office-voice-urgent {
    color: var(--office-red);
    animation: officeUrgent 1s ease infinite;
}

/* 逐字稿通用行樣式（3F 白板沿用） */
.meeting-transcript-hint { color: rgba(154, 163, 184, 0.6); font-size: 12px; text-align: center; margin-top: 10px; }
.meeting-transcript-line { margin-bottom: 8px; }
.meeting-transcript-line.partial { opacity: 0.65; }
.meeting-transcript-who { font-weight: 700; margin-right: 6px; }
.meeting-transcript-text { color: var(--office-text); word-break: break-word; }

/* ============ 3F 大型會議室（FLOOR3-PLAN：場景切換）============ */

/* 樓層滑換（電梯體感：出場下滑、進場自上方滑入） */
.floor-swap-out { animation: floorOut 0.36s ease forwards; }
.floor-swap-in  { animation: floorIn 0.46s ease both; }
@keyframes floorOut { to { opacity: 0; transform: translateY(36px); } }
@keyframes floorIn  { from { opacity: 0; transform: translateY(-36px); } to { opacity: 1; transform: none; } }

.floor3-scene { margin-top: 24px; }
.floor3-room {
    position: relative; border-radius: 24px; height: 540px; overflow: hidden;
    background:
        repeating-linear-gradient(90deg, transparent 0 88px, rgba(0, 0, 0, 0.10) 88px 91px),
        linear-gradient(180deg, #54402c 0%, #463420 100%);
    box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* U 型會議桌（閉口朝上） */
.floor3-table-top, .floor3-table-left, .floor3-table-right {
    position: absolute; border-radius: 12px;
    background: linear-gradient(180deg, #8a6748, #6e5037);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.floor3-table-top   { left: 25%; right: 25%; top: 126px; height: 56px; }
.floor3-table-left  { left: 25%; width: 56px; top: 126px; height: 260px; }
.floor3-table-right { right: 25%; width: 56px; top: 126px; height: 260px; }

/* 老闆主位（U 頂端，金色；說話時光環脈動） */
.floor3-boss { position: absolute; left: 50%; transform: translateX(-50%); top: 36px; text-align: center; }
.floor3-boss-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #d9b27c; margin-bottom: 4px; }
.floor3-boss-avatar {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: linear-gradient(135deg, #f7c98b, #e8985a);
    border: 3px solid var(--office-warm);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease;
}
.floor3-boss.pulse .floor3-boss-avatar {
    box-shadow: 0 0 0 5px rgba(245, 185, 113, 0.35), 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* 員工座位（左臂 0-2、右臂 3-5，外側面向桌子） */
.floor3-seat {
    position: absolute; width: 84px; text-align: center;
    background: none; border: none; padding: 0;
    cursor: pointer; font-family: inherit;
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.floor3-seat:disabled { cursor: default; }
.floor3-seat:disabled:not(.speaking) { opacity: 0.7; filter: saturate(0.6); }
.floor3-seat-avatar {
    position: relative; width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: #fff;
    border: 3px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.25s ease;
}
.floor3-seat-avatar img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}
.floor3-seat.empty .floor3-seat-avatar { visibility: hidden; }
.floor3-seat-name { margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--office-text); }
.floor3-seat-label { font-size: 10px; color: var(--office-text-dim); min-height: 13px; }
.floor3-seat.speaking .floor3-seat-avatar {
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.55), 0 0 18px rgba(74, 222, 128, 0.45);
}
.floor3-seat.speaking .floor3-seat-label { color: #4ade80; font-weight: 700; }

/* M2 舉手徽章（✋ 想補充）：座位右上角彈跳（定位基準 = .floor3-seat 的 absolute） */
.floor3-seat-hand {
    position: absolute; top: -8px; right: 4px; font-size: 15px;
    display: none; pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.floor3-seat.raised .floor3-seat-hand { display: block; animation: handBounce 0.9s ease-in-out infinite; }
.floor3-seat.empty .floor3-seat-hand { display: none; }   /* 入座前不顯示徽章（保險） */
.floor3-seat.raised .floor3-seat-avatar {
    box-shadow: 0 0 0 3px rgba(245, 185, 113, 0.55), 0 0 14px rgba(245, 185, 113, 0.4);
}
.floor3-seat.raised .floor3-seat-label { color: var(--office-warm); font-weight: 700; }
@keyframes handBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.floor3-seat-0 { left: calc(25% - 96px); top: 150px; }
.floor3-seat-1 { left: calc(25% - 96px); top: 240px; }
.floor3-seat-2 { left: calc(25% - 96px); top: 330px; }
.floor3-seat-3 { right: calc(25% - 96px); top: 150px; }
.floor3-seat-4 { right: calc(25% - 96px); top: 240px; }
.floor3-seat-5 { right: calc(25% - 96px); top: 330px; }

/* 聚光燈錐（跟著發言座位移動） */
.floor3-spotlight {
    position: absolute; width: 96px; height: 116px; pointer-events: none;
    background: linear-gradient(180deg, rgba(245, 185, 113, 0.30), rgba(245, 185, 113, 0));
    clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
    transition: left 0.4s ease, top 0.4s ease;
}

/* U 中央投影幕（發言者影片放大區）。
   常駐深色面板：文字硬編碼夜色、不吃日間變數（日間變數是深字，會深字深底 — 審查 P1）；
   寬度受桌臂內緣約束（641~751px 視窗 50%-112px < 240 會壓到臂 — 審查 P2）；
   陰影標明「懸浮於 U 開口上方」的層次。 */
.floor3-screen {
    position: absolute; left: 50%; transform: translateX(-50%);
    top: 205px; width: min(240px, calc(50% - 124px)); padding: 10px 14px 12px;
    border-radius: 14px; background: #11182c; border: 1.5px solid #2a3450;
    text-align: center;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.floor3-screen-status { font-size: 11px; color: #9aa3b8; text-align: right; min-height: 14px; }
.floor3-screen-status.live { color: #4ade80; }
.floor3-screen-avatarwrap { position: relative; width: 96px; height: 96px; margin: 2px auto 0; }
.floor3-screen-avatar {
    width: 100%; height: 100%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700; color: #fff;
    border: 3px solid var(--agent-color, rgba(255, 255, 255, 0.25));
    background: rgba(255, 255, 255, 0.08);
}
.floor3-screen-media {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
    border: 3px solid var(--agent-color, rgba(255, 255, 255, 0.25));
    box-sizing: border-box;
}
.floor3-screen.speaking .floor3-screen-avatarwrap { box-shadow: 0 0 26px rgba(74, 222, 128, 0.35); border-radius: 50%; }
.floor3-screen-name { margin-top: 8px; font-size: 14px; font-weight: 700; color: #eef1f8; }
.floor3-screen-title { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--agent-color, #9aa3b8); }
.floor3-screen-caption { margin-top: 4px; font-size: 11px; color: #9aa3b8; min-height: 15px; }

/* M2 摘要模式：散會後投影幕變成「會議摘要」面板（加寬、藏頭像/字幕、內文可捲動） */
.floor3-screen.summary { width: min(320px, calc(50% - 124px)); }
.floor3-screen.summary .floor3-screen-avatarwrap,
.floor3-screen.summary .floor3-screen-caption { display: none; }
.floor3-screen-summary {
    margin-top: 8px; text-align: left;
    font-size: 11.5px; line-height: 1.7; color: #cfd6e4;
    max-height: 150px; overflow-y: auto;
    white-space: pre-wrap; word-break: break-word;
}

/* 牆面白板（逐字稿） */
.floor3-board {
    position: absolute; right: 14px; top: 12px; width: 210px;
    border-radius: 10px; background: #e8e2d4; border: 1px solid #c9bfa8;
    overflow: hidden;
}
.floor3-board-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 10px; font-size: 11px; font-weight: 700; color: #5f4a2e;
    border-bottom: 1px solid #d8cdb4;
}
.floor3-board-toggle {
    background: none; border: none; cursor: pointer;
    color: #5f4a2e; font-size: 13px; padding: 0 4px; font-family: inherit;
}
.floor3-board-body {
    max-height: 92px; overflow-y: auto; padding: 7px 10px;
    font-size: 11.5px; line-height: 1.6; text-align: left;
}
.floor3-board-body .meeting-transcript-text { color: #2c2c2a; }
.floor3-board-body .meeting-transcript-hint { color: #8a7c5e; margin-top: 2px; }
.floor3-board.collapsed .floor3-board-body { display: none; }

.floor3-entrance {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
    font-size: 11px; letter-spacing: 4px; color: rgba(255, 255, 255, 0.45);
    border-top: 2px solid rgba(245, 185, 113, 0.35);
    padding: 6px 26px 0; width: max-content;
}

/* 控制列（3F 場景下方） */
.floor3-controls {
    display: flex; justify-content: center; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-top: 14px; min-height: 46px;
}
.floor3-status { font-size: 12.5px; color: var(--office-text-dim); }

/* 2F 階段錯誤提示（mic / 額度 — 場景還沒切換時的出口） */
.floor3-toast {
    position: fixed; left: 50%; transform: translateX(-50%); top: 18px; z-index: 400;
    background: rgba(12, 17, 32, 0.95); color: var(--office-text);
    border: 1px solid rgba(248, 113, 113, 0.5); border-radius: 12px;
    padding: 10px 18px; font-size: 13px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* 2F 留守狀態（會議期間：空椅 + 琥珀「開會中」呼吸點 + 卡片不可點）。
   ⚠️ 只藏「座位上」的頭像（.desk-seat 之內）— 走路分身的頭像也是 .desk-avatar
   但活在 .office-walker 裡，選擇器太寬會讓上下樓的分身整批隱形（審查 P1）。 */
.meeting-custody .desk-seat .desk-avatar { visibility: hidden; }
.meeting-custody .desk-card { pointer-events: none; }
.meeting-custody .desk-card:hover { background: none; transform: none; }
.meeting-custody .desk-online-dot {
    background: var(--office-warm);
    box-shadow: 0 0 8px rgba(245, 185, 113, 0.85);
    animation: custodyPulse 1.8s ease-in-out infinite;
}
/* 頁首在線點同步琥珀（與「N 位員工開會中」文案一致） */
.meeting-custody .online-dot {
    background: var(--office-warm);
    box-shadow: 0 0 8px rgba(245, 185, 113, 0.8);
}
@keyframes custodyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.meeting-custody .desk-call-pill {
    background: rgba(255, 255, 255, 0.12); color: var(--office-text-dim); filter: none;
}
/* 留守點日間覆寫（琥珀光暈會融進日間木地板 — 比照頁首綠點的日間手法） */
body.office-day .meeting-custody .desk-online-dot { background: #c07a26; box-shadow: none; }
body.office-day .meeting-custody .online-dot { background: #c07a26; box-shadow: none; }

/* 3F 日間覆寫（晨光會議室） */
body.office-day .floor3-room {
    background:
        repeating-linear-gradient(90deg, transparent 0 88px, rgba(0, 0, 0, 0.08) 88px 91px),
        linear-gradient(180deg, #9b7a52 0%, #87683f 100%);
    box-shadow: inset 0 2px 18px rgba(70, 52, 28, 0.35);
}
body.office-day .floor3-table-top,
body.office-day .floor3-table-left,
body.office-day .floor3-table-right { background: linear-gradient(180deg, #a07a55, #84613f); }
body.office-day .floor3-seat-name { color: #f6efe2; }
body.office-day .floor3-seat-label { color: rgba(246, 239, 226, 0.75); }
body.office-day .floor3-seat-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
}
body.office-day .floor3-boss-label { color: #5f4a2e; }
body.office-day .floor3-entrance { color: rgba(246, 239, 226, 0.90); border-top-color: rgba(246, 239, 226, 0.50); }
body.office-day .floor3-spotlight {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0));
}
/* 日間舉手樣式：琥珀字/環在日間琥珀棕地板上對比不足（比照 boss-label/留守點的日間手法） */
body.office-day .floor3-seat.raised .floor3-seat-label { color: #8a5413; }
body.office-day .floor3-seat.raised .floor3-seat-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 4px rgba(192, 122, 38, 0.6);
}
/* 日間控制列：夜色玻璃鈕落在日間淺底上會隱形，補深描邊版（不動 modal 內原規則） */
body.office-day .floor3-controls .voice-btn-toggle,
body.office-day .floor3-controls .voice-btn-secondary {
    background: rgba(35, 43, 61, 0.08);
    border-color: rgba(35, 43, 61, 0.30);
}
body.office-day .floor3-controls .voice-error { color: #c43d3d; }

@media (max-width: 640px) {
    .floor3-room { height: 600px; }
    .floor3-table-top   { left: 64px; right: 64px; top: 110px; height: 44px; }
    .floor3-table-left  { left: 64px; width: 44px; top: 110px; height: 300px; }
    .floor3-table-right { right: 64px; width: 44px; top: 110px; height: 300px; }
    .floor3-seat { width: 60px; }
    .floor3-seat-avatar { width: 44px; height: 44px; font-size: 13px; }
    .floor3-seat-0 { left: 2px; top: 132px; }
    .floor3-seat-1 { left: 2px; top: 240px; }
    .floor3-seat-2 { left: 2px; top: 348px; }
    .floor3-seat-3 { right: 2px; top: 132px; }
    .floor3-seat-4 { right: 2px; top: 240px; }
    .floor3-seat-5 { right: 2px; top: 348px; }
    .floor3-screen { width: 186px; top: 188px; }   /* 懸浮於 U 開口上方（陰影標層次） */
    .floor3-screen.summary { width: min(280px, calc(100% - 24px)); }
    .floor3-screen.summary .floor3-screen-summary { max-height: 120px; }  /* 讓第三排座位露出 */
    .floor3-screen-avatarwrap { width: 80px; height: 80px; }
    .floor3-boss-avatar { width: 46px; height: 46px; font-size: 18px; }
    .floor3-boss { top: 28px; }
    .floor3-board { width: 160px; right: 8px; top: 8px; }
    .floor3-board-body { max-height: 76px; }
    /* 控制列固定底部（PLAN §六）：600px 高的房間下方按鈕會超出視口 */
    .floor3-controls {
        position: sticky; bottom: 0; z-index: 5;
        margin-top: 10px; padding: 8px 10px;
        background: rgba(12, 17, 32, 0.88);
        border-radius: 14px;
    }
    body.office-day .floor3-controls { background: rgba(233, 239, 248, 0.92); }
}

/* ============ 員工隨機走動（串門子）============ */
/* office-wander.js：隨機挑員工走到同事桌旁討論再走回，原座位同步變空椅。
   分身複製座位上的 .desk-avatar（同照片 / 主題色邊框），絕對定位在 .office-floor 上。 */

.office-walker {
    position: absolute; z-index: 6; pointer-events: none;
    transition-property: transform;  /* duration 由 JS 依距離換算步行時間 */
    transition-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    will-change: transform;
}

/* 分身內的頭像：蓋掉座位版的絕對定位，填滿分身容器 */
.office-walker .desk-avatar {
    position: static; transform: none;
    width: 100%; height: 100%;
}

/* 腳下陰影（貼地感） */
.office-walker::after {
    content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
    width: 70%; height: 10px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.35); filter: blur(3px);
}

/* 走路中：小彈跳 + 左右輕擺（動畫的 transform 會暫時蓋過上面的 none） */
.office-walker.walking .desk-avatar {
    animation: walkerBob 0.46s ease-in-out infinite;
}
@keyframes walkerBob {
    0%, 100% { transform: translateY(0) rotate(-2.5deg); }
    50%      { transform: translateY(-5px) rotate(2.5deg); }
}

/* 討論中：緩慢點頭式搖晃 */
.office-walker.chatting .desk-avatar {
    animation: walkerChat 1.5s ease-in-out infinite;
}
@keyframes walkerChat {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: translateY(-2px) rotate(3deg); }
    65%      { transform: translateY(1px) rotate(-2deg); }
}

/* 「…」討論泡泡：抵達同事桌旁才彈出 */
.office-walker-bubble {
    position: absolute; left: 50%; bottom: calc(100% + 9px);
    transform: translateX(-50%) scale(0.5);
    display: flex; gap: 4px; align-items: center;
    background: rgba(12, 17, 32, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px; padding: 6px 10px;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.office-walker-bubble::after {  /* 泡泡小尾巴 */
    content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: rgba(12, 17, 32, 0.92);
}
.office-walker.chatting .office-walker-bubble {
    opacity: 1; transform: translateX(-50%) scale(1);
}
.office-walker-bubble i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--office-warm);
    animation: walkerDots 1.2s ease-in-out infinite;
}
.office-walker-bubble i:nth-child(2) { animation-delay: 0.18s; }
.office-walker-bubble i:nth-child(3) { animation-delay: 0.36s; }
@keyframes walkerDots {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1; transform: translateY(-3px); }
}

/* ============ 日夜主題 ============ */
/* office.js 依台北時間（06:00–18:00 白天）切 body.office-day；無 class = 夜晚原樣。
   變數覆寫只掛在 .office-page：登入閘與通話 modal 維持夜色玻璃面板（自帶深底，
   套日間深色文字會反而看不清）。漸層背景無法 transition（一天只切兩次，可接受）；
   太陽/吊燈/雲以 background、box-shadow、opacity 過渡柔化。 */

/* -- 雲：夜晚隱形，白天浮在天空緩慢漂移（畫在大樓後面）-- */
.window-clouds { position: absolute; inset: 0; pointer-events: none; }
.window-clouds i {
    position: absolute; display: block;
    background: #fff;   /* 不透明白：偽元素 inherit 後重疊處才不會疊出密度接縫，半透明感交給 opacity */
    border-radius: 999px;
    opacity: 0; transition: opacity 0.35s ease;   /* 入夜方向快收——夜空上殘留白雲比瞬切更突兀 */
}
.window-clouds i::before {
    content: ""; position: absolute; left: 16%; top: -60%;
    width: 52%; height: 130%; border-radius: 50%;
    background: inherit;
}
.window-clouds i::after {
    content: ""; position: absolute; right: 14%; top: -35%;
    width: 40%; height: 105%; border-radius: 50%;
    background: inherit;
}
.window-clouds i:nth-child(1) { left: 12%; top: 34px; width: 84px; height: 15px; animation: cloudDrift 64s ease-in-out infinite alternate; }
.window-clouds i:nth-child(2) { left: 45%; top: 18px; width: 64px; height: 12px; animation: cloudDrift 82s ease-in-out infinite alternate-reverse; }
.window-clouds i:nth-child(3) { left: 73%; top: 48px; width: 70px; height: 14px; animation: cloudDrift 71s ease-in-out infinite alternate; }
@keyframes cloudDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(24px); }
}
body.office-day .window-clouds i { opacity: 0.9; transition-duration: 1.2s; }  /* 進白天慢慢飄出 */
body:not(.office-day) .window-clouds i { animation-play-state: paused; }       /* 夜晚隱形就不空轉漂移 */

/* -- 整頁光線：清晨的淺色調 -- */
body.office-day {
    background: linear-gradient(180deg, #e9eff8 0%, #dde6f3 55%, #d0ddee 100%);
}
body.office-day .office-page {
    --office-text: #232b3d;
    --office-text-dim: #5d6678;
    --office-card-border: rgba(35, 43, 61, 0.16);
}
body.office-day .office-title {
    background: linear-gradient(135deg, #c07a26, #96590f);
    -webkit-background-clip: text; background-clip: text;
}
body.office-day .office-footer { color: rgba(93, 102, 120, 0.8); }
/* 頁首在線綠點：原 #34d399+光暈是夜色設計，淺底上近乎隱形 → 日間改深綠實色 */
body.office-day .online-dot { background: #0c8a60; box-shadow: none; }
body.office-day .voice-disabled-banner {
    background: rgba(192, 122, 38, 0.10);
    border-color: rgba(150, 89, 15, 0.35);
    color: #8a5413;
}

/* -- 窗外：白天天空 + 太陽 + 日光大樓 -- */
body.office-day .office-window {
    background: linear-gradient(180deg, #7db5e8 0%, #c8e2f8 100%);
}
.window-moon { transition: background 0.4s ease, box-shadow 0.4s ease; }  /* 入夜方向快收太陽光暈 */
body.office-day .window-moon {   /* 月亮換太陽 */
    background: #ffd968;
    box-shadow: 0 0 28px rgba(255, 205, 80, 0.9), 0 0 70px rgba(255, 215, 120, 0.45);
    transition-duration: 1.2s;   /* 日出方向緩升 */
}
body.office-day .window-skyline i {
    /* 日光下的大樓：淺色立面，窗格從「點燈」變「玻璃反光的暗格」 */
    background:
        repeating-linear-gradient(0deg,
            rgba(52, 74, 110, 0.30) 0 3px,
            transparent 3px 11px),
        #a9bed5;
}
body.office-day .window-frame i { border-right-color: rgba(40, 52, 74, 0.70); }
.office-lamps i::after { transition: box-shadow 1.2s ease; }
body.office-day .office-lamps i::after { box-shadow: none; }       /* 白天吊燈不開 */
body.office-day .office-lamps i::before { background: rgba(40, 52, 74, 0.40); }

/* -- 室內：晨光木地板 -- */
body.office-day .office-floor {
    background:
        repeating-linear-gradient(90deg, transparent 0 88px, rgba(0, 0, 0, 0.08) 88px 91px),
        linear-gradient(180deg, #9b7a52 0%, #87683f 100%);
    box-shadow: inset 0 2px 18px rgba(70, 52, 28, 0.35);  /* 與地毯邊框同一深棕色票 */
}
body.office-day .floor-carpet {
    background: rgba(116, 139, 178, 0.30);
    border-color: rgba(70, 52, 28, 0.35);
}
/* 入口字直接落在木地板上：與 .desk-tagline 同走暖白路線（深棕字對中間調木色對比不夠） */
body.office-day .floor-entrance {
    color: rgba(246, 239, 226, 0.90);
    border-top-color: rgba(246, 239, 226, 0.50);
}
/* 日間 hover 用「加深」而非加亮（亮上加亮會壓掉暖白標語的對比）；
   排除 .desk-disabled——日間選擇器特異性較高，不排除會打穿停用狀態的 background:none */
body.office-day .desk-card:not(.desk-disabled):hover { background: rgba(70, 52, 28, 0.16); }
body.office-day .desk-top { background: linear-gradient(180deg, #a07a55, #84613f); }
/* 頭像主題色環外加一圈淺描邊：Jesen #ba7517 / Elon #8a8987 與日間木地板亮度幾乎相同，
   沒有這圈會整顆融進地板（走動分身複製 .desk-avatar，自動同享） */
body.office-day .desk-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 4px 14px rgba(0, 0, 0, 0.35);
}
/* 名牌是深色 pill，名字必須維持夜色的亮字（不吃日間深色文字變數） */
body.office-day .desk-nameplate .desk-name { color: #eef1f8; }
/* 標語直接落在木地板上，日間改暖白字才讀得清 */
body.office-day .desk-tagline { color: #f6efe2; }
/* 語音停用時的分機 pill：夜色的「白透底+灰字」落在日間木地板上會雙雙失效 → 改深透底+暖白字 */
body.office-day .desk-call-pill:disabled {
    background: rgba(0, 0, 0, 0.22);
    color: #f6efe2;
}

/* ============ 下雨場景（疊加層） ============ */
/* office.js 每次開頁 25% 機率切 body.office-rain，與日夜正交 → 早上下雨 / 晚上下雨兩種新場景。
   只動窗外天色：陰雲滿天 + 日月被雲遮淡 + 斜雨絲落下；室內（地板/桌位/文字）不變，避免動到
   日間已調校過的對比。雨絲由 office.js 注入 .window-rain（隨機分布）。
   本段放在日夜主題之後 → 同特異性時靠源碼順序勝出。 */

.window-rain {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    opacity: 0; transition: opacity 0.6s ease;   /* 非雨天淡出，不留殘影 */
}
body.office-rain .window-rain { opacity: 1; }
.window-rain i {
    position: absolute; top: -24px; width: 1px;
    transform: rotate(12deg);   /* 斜雨；reduced-motion 下保留這個靜態傾斜 */
    background: linear-gradient(to bottom, transparent, rgba(200, 220, 250, 0.55));
    animation-name: rainFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* left / height / opacity / duration / delay 由 office.js 逐滴隨機注入 */
}
@keyframes rainFall {
    from { transform: translateY(-24px) rotate(12deg); }
    to   { transform: translateY(150px) rotate(12deg); }   /* 窗高 130px + 上下緩衝 */
}

/* 雨天的雲：滿天且要飄（夜晚原本 opacity 0 + 暫停，雨天要顯示 + 運轉） */
body.office-rain .window-clouds i {
    opacity: 0.85; animation-play-state: running; transition-duration: 0.8s;
}

/* -- 早上下雨：陰天灰藍、太陽躲雲後 -- */
body.office-rain.office-day .office-window {
    background: linear-gradient(180deg, #8b97a6 0%, #aeb9c6 100%);
}
body.office-rain.office-day .window-clouds i { background: #c4ccd6; }   /* 灰白雲 */
body.office-rain.office-day .window-moon {     /* 太陽躲進雲後、光暈收掉 */
    background: #c8d0da;
    box-shadow: 0 0 14px rgba(200, 210, 224, 0.35);
}
body.office-rain.office-day .window-skyline i {   /* 陰雨下大樓更暗、反光更弱 */
    background:
        repeating-linear-gradient(0deg,
            rgba(52, 74, 110, 0.22) 0 3px,
            transparent 3px 11px),
        #8fa1b6;
}
/* 淺色陰天上，亮藍白雨絲對比不足 → 改帶藍的深灰雨絲 */
body.office-rain.office-day .window-rain i {
    background: linear-gradient(to bottom, transparent, rgba(74, 92, 120, 0.5));
}

/* -- 晚上下雨：比晴夜更陰沉、月色被雲遮淡 -- */
body.office-rain:not(.office-day) .office-window {
    background: linear-gradient(180deg, #060a14 0%, #0e1626 100%);
}
body.office-rain:not(.office-day) .window-clouds i { background: #3d4557; }   /* 冷調深灰雲 */
body.office-rain:not(.office-day) .window-moon {     /* 月亮被雲遮淡 */
    box-shadow: 0 0 12px rgba(253, 243, 216, 0.28);
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .window-rain i { animation: none; }   /* 不落下；靜態斜雨絲 + 陰雲仍透出「陰雨」感 */
}

/* ============ 酷斯拉彩蛋（疊加層） ============ */
/* office.js 每次開頁 30% 機率切 body.office-kaiju，與日夜、下雨皆正交。
   剪影擺在 .window-skyline 之前 → 大樓蓋住下半身、頭與背鰭從樓頂探出 =「在高樓之間」。
   剪影 = 使用者參考圖去背（assets/kaiju.png 的 alpha）當 CSS mask；填色用 background-color。

   走動分兩層避免 transform 打架：
   - 外層 .window-kaiju：水平橫移（動畫只動 left，% 隨窗寬自適應；窗 overflow:hidden 把兩側
     走出去的部分裁掉 → 邊緣進出自然）。方向/速度/起點由 office.js 設 CSS 變數隨機。
   - 內層 .kaiju-body：上下起伏 + 微擺 + scaleX 朝向行進方向（走路律動），並承載 mask/填色。 */
.window-kaiju {
    position: absolute; bottom: 0; left: 52%;   /* left 由 kaijuWalk 動畫覆寫；reduced-motion 停在這 */
    width: 132px; height: 130px;                /* 素材近 1:1；contain 維持比例不變形 */
    opacity: 0; pointer-events: none;
    transition: opacity 0.6s ease;
}
body.office-kaiju .window-kaiju {
    opacity: 1;
    animation: kaijuWalk var(--kaiju-dur, 28s) linear infinite;
    animation-direction: var(--kaiju-dir, normal);
    animation-delay: var(--kaiju-delay, 0s);
}
.kaiju-body {
    width: 100%; height: 100%;
    background-color: #2a3654;   /* 夜色剪影：比夜空略亮，不致整隻融進深空 */
    -webkit-mask: url(/assets/kaiju.png) no-repeat center bottom / contain;
            mask: url(/assets/kaiju.png) no-repeat center bottom / contain;
    filter: drop-shadow(0 0 5px rgba(120, 140, 180, 0.30));
    transform: scaleX(var(--kaiju-face, 1));   /* 朝向行進方向（剪影本來朝左）；走動時由 kaijuStep 接管 */
}
body.office-kaiju .kaiju-body {
    animation: kaijuStep 1.5s ease-in-out infinite;   /* 上下起伏 + 微擺，像沉重的腳步 */
}
@keyframes kaijuWalk {
    from { left: -28%; }   /* 兩端留足夠 margin，整隻走出畫面才迴圈 → 邊緣無瞬移 */
    to   { left: 128%; }
}
@keyframes kaijuStep {
    0%, 100% { transform: scaleX(var(--kaiju-face, 1)) translateY(2px)  rotate(0deg); }
    25%      { transform: scaleX(var(--kaiju-face, 1)) translateY(-2px) rotate(-1.4deg); }
    50%      { transform: scaleX(var(--kaiju-face, 1)) translateY(2px)  rotate(0deg); }
    75%      { transform: scaleX(var(--kaiju-face, 1)) translateY(-2px) rotate(1.4deg); }
}
/* 白天天空亮：剪影改更深、收掉夜用外光暈，輪廓才清楚 */
body.office-day .kaiju-body { background-color: #28313f; filter: none; }
/* 下雨陰天偏灰：剪影再深一階，從陰沉天色裡浮出來 */
body.office-rain .kaiju-body { background-color: #222b3a; }

@media (prefers-reduced-motion: reduce) {
    body.office-kaiju .window-kaiju { animation: none; }   /* 停在 left:52%，不橫移 */
    body.office-kaiju .kaiju-body { animation: none; }     /* 不起伏；靜態 scaleX 朝向仍在 */
}

/* ============ 左側垂直頁籤軌（side rail；owner-only 功能入口） ============ */
/* 董事長辦公室 / 算力值 /（未來更多）統一放這條軌：fixed 垂直置中、flex column 等距堆疊。
   隱藏的頁籤（display:none）被 flex 自動略過，顯示中的會往中間靠攏 —— 加新頁籤只要再放一顆
   .side-tab、不需算偏移、永不重疊、左緣與寬度自動對齊。office.js 依 meeting/status 顯示個別頁籤。 */
.side-rail {
    position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 60;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    pointer-events: none;   /* 軌本身不擋點擊；只有實體頁籤可點 */
}
.side-tab {
    pointer-events: auto;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    width: 46px; padding: 15px 0 16px; border: none; cursor: pointer;
    border-radius: 0 15px 15px 0;
    background: linear-gradient(160deg, #3a506b, #21314a);
    color: #f3e7cf; font-family: inherit; font-weight: 700;
    box-shadow: 3px 4px 16px rgba(0, 0, 0, 0.34);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
/* hover 往右探出一點（border-box 下用 transform 比 padding 穩，不會壓縮內容） */
.side-tab:hover { transform: translateX(5px); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.42); filter: brightness(1.08); }
.side-tab:active { transform: translateX(2px); filter: brightness(0.96); }
.side-tab:focus-visible { outline: 2px solid #f5b971; outline-offset: 2px; }
.side-tab-icon { font-size: 20px; line-height: 1; }
.side-tab-text { writing-mode: vertical-rl; text-orientation: upright; font-size: 14px; letter-spacing: 2px; }

/* ============ 董事長辦公室（owner-only 單獨會面） ============ */

/* 場景容器（比照 3F：margin-top + 圓角 + relative） */
.chairman-scene { margin-top: 24px; }
.chairman-room {
    border-radius: 24px; position: relative; overflow: hidden;
    padding: 20px 22px 24px;
    background: linear-gradient(180deg, #2c2218 0%, #221b13 100%);
    box-shadow: inset 0 2px 22px rgba(0, 0, 0, 0.5);
}
.chairman-room-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.chairman-back {
    border: 1px solid rgba(246, 239, 226, 0.3); background: rgba(0, 0, 0, 0.2);
    color: #f6efe2; border-radius: 12px; padding: 8px 14px; cursor: pointer;
    font-size: 14px; white-space: nowrap; font-family: inherit;
}
.chairman-back:hover { background: rgba(0, 0, 0, 0.36); }
.chairman-title { font-size: 22px; font-weight: 800; color: #f6efe2; }
.chairman-sub { font-size: 13px; color: rgba(246, 239, 226, 0.7); margin-top: 2px; }

.chairman-body { display: flex; gap: 20px; align-items: stretch; }

/* 左：員工名單 */
.chairman-roster { flex: none; width: 212px; display: flex; flex-direction: column; gap: 10px; }
.chairman-roster-head { font-size: 12px; letter-spacing: 3px; color: rgba(246, 239, 226, 0.55); padding: 2px 4px 4px; }
.chairman-roster-list { display: flex; flex-direction: column; gap: 8px; }
.chairman-emp {
    display: flex; align-items: center; gap: 11px; text-align: left;
    padding: 9px 11px; border-radius: 14px; cursor: pointer; font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04); color: #f3ece0;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.chairman-emp:hover { background: rgba(255, 255, 255, 0.09); transform: translateX(3px); }
.chairman-emp.active {
    border-color: var(--emp-color, #f5b971);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px var(--emp-color, #f5b971);
}
.chairman-emp-avatar {
    flex: none; width: 42px; height: 42px; border-radius: 50%; position: relative;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    font-size: 14px; font-weight: 700; color: #fff;
    border: 2px solid var(--emp-color, rgba(255, 255, 255, 0.3));
}
.chairman-emp-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chairman-emp-meta { display: flex; flex-direction: column; min-width: 0; }
.chairman-emp-name { font-size: 14px; font-weight: 700; }
.chairman-emp-title { font-size: 11px; color: rgba(246, 239, 226, 0.62); }
.chairman-end-btn {
    margin-top: 6px; padding: 11px; border-radius: 12px; cursor: pointer; font-family: inherit;
    border: none; background: linear-gradient(135deg, #c4485a, #9c2f3f); color: #fff;
    font-weight: 700; font-size: 14px;
}
.chairman-end-btn:hover { filter: brightness(1.07); }

/* 右：沙發會客區（董事長視角） */
.chairman-stage {
    flex: 1; position: relative; min-height: 440px;
    border-radius: 18px; overflow: hidden;
    background: radial-gradient(120% 80% at 50% 0%, #3a2c1d 0%, #241a11 72%);
    display: flex; align-items: center; justify-content: center;
}
.chairman-wall { position: absolute; inset: 0; pointer-events: none; }
.chairman-lamp-glow {
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    width: 280px; height: 210px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 200, 130, 0.28), transparent 70%);
}
.chairman-wall-logo {
    position: absolute; top: 18px; left: 20px; width: 44px; height: 44px;
    object-fit: contain; opacity: 0.55;
    background: rgba(255, 255, 255, 0.92); border-radius: 10px; padding: 5px; box-sizing: border-box;
}
.chairman-plant {
    position: absolute; right: 20px; bottom: 78px; width: 44px; height: 66px;
    background: radial-gradient(circle at 50% 32%, #3f9d6b, #1d5c3a 70%);
    border-radius: 50% 50% 42% 42%;
    box-shadow: 0 9px 0 -5px #6b4a2e;   /* 花盆暗示 */
}
/* 客座沙發（員工坐這；通話卡 dock 疊在前面） */
.chairman-guest-sofa {
    position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);
    width: min(340px, 78%); height: 150px; border-radius: 26px 26px 18px 18px;
    background: linear-gradient(180deg, #6e503a, #573c2a);
    box-shadow: inset 0 8px 0 rgba(255, 255, 255, 0.06), 0 14px 30px rgba(0, 0, 0, 0.4);
}
.chairman-guest-sofa::before, .chairman-guest-sofa::after {
    content: ""; position: absolute; bottom: 6px; width: 26px; height: 66px;
    background: #4d3422; border-radius: 14px;
}
.chairman-guest-sofa::before { left: -11px; }
.chairman-guest-sofa::after { right: -11px; }

/* 前景（董事長這側）：咖啡桌 + 你的沙發一角 */
.chairman-foreground { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.chairman-table {
    position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);
    width: 220px; height: 28px; border-radius: 50%;
    background: linear-gradient(180deg, #7a5a3c, #5d4329);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}
.chairman-sofa-self {
    position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
    width: 86%; height: 60px; border-radius: 40px 40px 0 0;
    background: linear-gradient(180deg, #5a3f2b, #3f2c1d);
}
/* 空台提示 */
.chairman-stage-empty { position: relative; z-index: 2; text-align: center; color: rgba(246, 239, 226, 0.78); font-size: 15px; }
.chairman-stage-seat-hint { font-size: 30px; margin-bottom: 6px; }
/* 通話卡座位（dock）：通話 modal 會被搬進這裡 */
.chairman-dock { position: relative; z-index: 3; width: 100%; display: flex; justify-content: center; }

/* dock 內的通話 modal：去掉全螢幕黑底，縮成沙發上的座位卡。
   注意：modal 被搬進 #officePage 內 → 日間會吃到深色文字變數，於是在卡上重新定義
   夜色變數（同 3F 投影幕硬編碼夜色手法），日／夜都維持淺字深底可讀。 */
.chairman-dock .voice-overlay {
    position: static; inset: auto; background: none; padding: 0; backdrop-filter: none;
    z-index: auto; overflow: visible;
}
.chairman-dock .voice-modal-card {
    max-width: 300px; color: #eef1f8;
    --office-text: #eef1f8; --office-text-dim: #aab2c6;
    background: linear-gradient(180deg, rgba(40, 32, 22, 0.94), rgba(28, 22, 15, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.chairman-dock .voice-modal-card:has(.voice-avatar-ring.speaking) { max-width: 320px; }
.chairman-dock .voice-modal-card:has(.voice-avatar-ring.speaking) .voice-avatar-wrap {
    width: min(210px, 34vh); height: min(210px, 34vh);   /* 說話放大在 dock 內縮一點，免得撐破沙發區 */
}

/* 面談儀式感：通話卡頂端加會面小標（卡 padding-top 34px，剛好容下、不壓頭像） */
body.chairman-open .voice-modal-card { position: relative; }
body.chairman-open .voice-modal-card::before {
    content: "🛋️ 董事長單獨面談";
    position: absolute; top: 12px; left: 0; right: 0; text-align: center;
    font-size: 11px; letter-spacing: 2px; color: #f5b971;
}
/* 按鈕改面談用語（保留既有 icon；font-size:0 收掉原文字節點，::after 補新字） */
body.chairman-open #officeVoiceStartBtn,
body.chairman-open #officeVoiceHangupBtn { font-size: 0; }
body.chairman-open #officeVoiceStartBtn::after { content: "開始面談"; font-size: 14.5px; font-weight: 700; }
body.chairman-open #officeVoiceHangupBtn::after { content: "結束談話"; font-size: 14.5px; font-weight: 700; }
/* 「關閉」與場景左側的「結束面談」重複 → 面談語境隱藏 */
body.chairman-open #officeVoiceCloseBtn { display: none; }
/* 精簡：辦公室面談只留頭像 + 面談按鈕（+ 計時/錯誤），收起姓名/職稱·分機/狀態句/提示等細節 */
body.chairman-open .voice-header,
body.chairman-open #officeVoiceStatus,
body.chairman-open #officeVoiceHint { display: none; }

/* 日間：暖米色會客室（沙發/通話卡維持深色，像主管坐在淺色 lounge） */
body.office-day .chairman-room {
    background: linear-gradient(180deg, #e7ddcb 0%, #dcd0ba 100%);
    box-shadow: inset 0 2px 22px rgba(90, 70, 40, 0.22);
}
body.office-day .chairman-title { color: #3a2c1a; }
body.office-day .chairman-sub { color: rgba(70, 55, 35, 0.78); }
body.office-day .chairman-back { color: #3a2c1a; border-color: rgba(60, 45, 25, 0.3); background: rgba(255, 255, 255, 0.45); }
body.office-day .chairman-roster-head { color: rgba(70, 55, 35, 0.6); }
body.office-day .chairman-emp { background: rgba(255, 255, 255, 0.5); color: #3a2c1a; border-color: rgba(60, 45, 25, 0.14); }
body.office-day .chairman-emp:hover { background: rgba(255, 255, 255, 0.78); }
body.office-day .chairman-emp-title { color: rgba(70, 55, 35, 0.7); }
body.office-day .chairman-stage { background: radial-gradient(120% 80% at 50% 0%, #cdb592 0%, #b89c76 76%); }
body.office-day .chairman-stage-empty { color: #5a4222; }

/* ============ 響應式（欄數交給 auto-fit，其餘 ≤640px 收緊） ============ */

@media (max-width: 640px) {
    .office-page { padding: 20px 14px 30px; }
    .office-title { font-size: 26px; }
    .office-brand { gap: 10px; }
    .office-logo { width: 42px; height: 42px; border-radius: 11px; padding: 6px; }
    .office-clock { font-size: 20px; }
    .office-window { height: 110px; }
    .window-kaiju { width: 106px; height: 104px; }   /* 手機窗較矮，酷斯拉等比縮小免得頭被切掉 */
    .office-floor { padding: 24px 16px 20px; }
    .desk-tagline { min-height: 0; }
    .voice-modal-card { max-width: 100%; }
    /* 側邊頁籤軌：手機改錨定左下、整條往上堆疊（仍等距不重疊）；頁籤縮小 */
    .side-rail { top: auto; bottom: 14px; transform: none; gap: 8px; }
    .side-tab { width: 40px; padding: 11px 0 12px; }
    .side-tab-text { font-size: 12px; letter-spacing: 1px; }
    /* 董事長辦公室：名單改橫排於沙發區上方 */
    .chairman-body { flex-direction: column; }
    .chairman-roster { width: 100%; }
    .chairman-roster-list { flex-direction: row; flex-wrap: wrap; }
    .chairman-emp { flex: 1 1 44%; }
    .chairman-stage { min-height: 380px; }
    .chairman-dock .voice-modal-card { max-width: 92%; }
}