/* 🏢 Офис (#945/#951/#1002 прототип v4): комната «Тёплая сцена», человечки ходят по офису */
body.office-open .bottom-nav { display: none !important; }
.of-ov { position: fixed; top: 0; left: 0; right: 0; bottom: auto; z-index: 1500; display: flex; flex-direction: column; color: #fbf1de;
  background: radial-gradient(90% 40% at 50% 0, rgba(70,20,28,.9), transparent 70%), linear-gradient(#1b0c10, #110708 70%);
  padding-top: var(--safe-t, 0px); box-sizing: border-box; }
.of-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 16px 8px; flex: none; }
.of-tt { flex: 1; min-width: 0; }
.of-title { margin: 0; white-space: nowrap; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.of-upd { display: block; font-size: 14px; color: #cbb89c; }
.of-wait-n { flex: 1 1 100%; order: 3; padding: 5px 12px; border-radius: 12px; font-size: 14px; font-weight: 800; color: #2a1a12; background: #f2c46d; width: max-content; }
.of-wait-n.is-blink { animation: ofWaitBlink 1.1s ease-in-out infinite; }
.of-mute { min-width: 44px; min-height: 44px; border-radius: 22px; border: 1.5px solid rgba(242,196,109,.5); background: rgba(40,19,21,.9); color: #f2c46d; font-size: 18px; }
.of-mute.is-on { opacity: 1; }
.of-mute:not(.is-on) { opacity: .6; }
.of-close { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px solid rgba(242,196,109,.5); background: rgba(40,19,21,.9); color: #f2c46d; font-size: 16px; font-weight: 700; }
.of-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.of-msg { padding: 24px 8px; text-align: center; font-size: 17px; line-height: 1.4; color: #e3d3ba; }
@keyframes ofWaitBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* #1027: 3 страницы — Общий зал / Кабинеты / Переговорная — листание влево-вправо */
.of-pager { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.of-pg { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
.of-dots { flex: none; display: flex; justify-content: center; gap: 10px; padding: 6px 0 2px; }
.of-dot-b { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; }
.of-dot-b::before { content: ""; display: block; width: 8px; height: 8px; margin: 9px auto; border-radius: 50%; background: rgba(242,196,109,.35); }
.of-dot-b.on::before { background: #f2c46d; box-shadow: 0 0 6px #f2c46d; }
.of-pg-hint { flex: none; margin: 0; padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 14px; color: #cbb89c; }

.of-room { position: relative; width: 100%; max-width: 480px; height: 1550px; margin: 4px auto 0; border-radius: 22px; overflow: hidden;
  border: 1.5px solid rgba(242,196,109,.26);
  background:
    radial-gradient(60% 18% at 50% 32%, rgba(255,190,100,.14), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 56px),
    linear-gradient(#3a1d1c 0, #3a1d1c 30%, #5a3622 30%, #4a2c1c 100%); }
.of-wall { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(#4b2527, #3a1d1c); border-bottom: 6px solid #2a1412; }
/* #1024 п.2: зал богаче — часы, стеллаж, кулер, принтер (декор на стене, вне зоны людей) */
.of-clock { position: absolute; left: 27%; top: 1.5%; width: 34px; height: 34px; border-radius: 50%; background: #f3ead4; border: 3px solid #8b5a2b; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.of-clock::before { content: ""; position: absolute; left: 15px; top: 6px; width: 2px; height: 10px; background: #2a1a12; }
.of-clock::after { content: ""; position: absolute; left: 15px; top: 16px; width: 8px; height: 2px; background: #2a1a12; }
.of-shelf2 { position: absolute; right: 44%; top: 1.5%; width: 56px; height: 32px; border-radius: 3px; background: #6b4226; box-shadow: 0 0 0 2px #4a2c1c; }
.of-shelf2::before { content: ""; position: absolute; inset: 4px; background: repeating-linear-gradient(90deg, #e0a43a 0 7px, #4aa3e0 7px 14px, #e06a8a 14px 21px, #4cc08a 21px 28px); border-radius: 2px; }
.of-cooler { position: absolute; left: 2.5%; top: 2%; width: 20px; height: 40px; border-radius: 4px 4px 2px 2px; background: #cfe3ee; border: 2px solid #8fb2c2; }
.of-cooler::before { content: ""; position: absolute; left: 3px; top: 4px; width: 14px; height: 12px; border-radius: 50% 50% 0 0; background: #7fc2e6; opacity: .8; }
.of-printer { position: absolute; right: 20%; top: .6%; width: 30px; height: 20px; border-radius: 3px; background: #3a3a44; box-shadow: 0 0 0 2px #22222a; }
.of-printer::before { content: ""; position: absolute; left: 4px; right: 4px; top: -3px; height: 4px; background: #e8e2d4; border-radius: 2px 2px 0 0; }

/* кабинет Директора / переговорка — стеклянные комнаты за окнами-закатом */
.of-glass { position: absolute; top: 3%; width: 30%; height: 22%; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,160,100,.4), rgba(70,35,35,.5) 60%, rgba(40,20,20,.6));
  border: 2px solid rgba(255,230,195,.4); box-shadow: inset 0 0 18px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.35); }
.of-glass .of-win { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px); }
.of-dir-office { left: 4%; }
.of-meet-room { right: 4%; }
.of-mini-desk { position: absolute; left: 12%; bottom: 10%; width: 36%; height: 26%; border-radius: 4px; background: linear-gradient(#b27a42, #8b5a2b); box-shadow: 0 3px 0 #5f3b1c; }
.of-mini-mon { position: absolute; left: 18%; bottom: 32%; width: 20%; height: 18%; border-radius: 2px; background: #1a1a22; border: 2px solid #7fd0ff; box-shadow: 0 0 8px #7fd0ff; }
.of-table { position: absolute; left: 50%; top: 52%; width: 58%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(#b27a42, #8b5a2b); box-shadow: 0 3px 0 #5f3b1c; }
.of-chair { position: absolute; width: 16%; height: 16%; border-radius: 40%; background: #7a3a3a; }
.of-chair.c1 { left: 10%; top: 60%; }
.of-chair.c2 { left: 68%; top: 18%; }
.of-chair.c3 { left: 68%; top: 68%; }
.of-glass-l { position: absolute; top: 25.5%; width: 30%; margin: 0; text-align: center; font-size: 14px; color: #cbb89c; }
.of-dir-office-l { left: 4%; }
.of-meet-l { right: 4%; }

/* ❌ CHECK #1044 п.1: «подпись «кофе» без машины» — поднимаем машину выше первого места в очереди
   (COFFEE[0]=[50,33]), крупнее и ярче, чтобы не терялась за человечком у кофе. */
.of-coffee { position: absolute; left: 50%; top: 18%; margin-left: -24px; width: 48px; height: 58px; border-radius: 9px 9px 4px 4px; background: #2b2b33; border: 3px solid #6a6a76; box-shadow: 0 4px 10px rgba(0,0,0,.45), 0 0 16px rgba(232,144,58,.18); z-index: 2; }
.of-coffee::before { content: ""; position: absolute; left: 13px; top: 15px; width: 16px; height: 11px; border-radius: 3px; background: #e8903a; box-shadow: 0 0 10px #e8903a; }
.of-coffee::after { content: ""; position: absolute; left: 18px; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: #1a1a22; box-shadow: 0 0 0 2px #6a6a76; }
.of-coffee-l { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); margin: 0; text-align: center; font-size: 14px; color: #cbb89c; }

.of-couch { position: absolute; left: 30%; right: 30%; bottom: 9%; height: 10%; border-radius: 16px 16px 6px 6px;
  background: linear-gradient(#8a4a52, #6a323a); box-shadow: 0 5px 0 #4a1e24, inset 0 -6px 0 rgba(0,0,0,.15); }
.of-couch::before, .of-couch::after { content: ""; position: absolute; top: -10px; width: 15%; height: 18px; border-radius: 8px 8px 0 0; background: #8a4a52; }
.of-couch::before { left: 6%; }
.of-couch::after { right: 6%; }
.of-couch-l { position: absolute; bottom: 5.5%; left: 0; right: 0; margin: 0; text-align: center; font-size: 14px; color: #cbb89c; }

.of-plant { position: absolute; bottom: 4%; width: 26px; height: 42px; }
.of-plant.p1 { left: 3%; }
.of-plant.p2 { right: 3%; }
.of-plant .pot { position: absolute; bottom: 0; left: 4px; width: 18px; height: 14px; border-radius: 2px 2px 7px 7px; background: #6b4226; }
.of-plant .leaf { position: absolute; bottom: 10px; left: 1px; width: 24px; height: 28px; border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 30% 30%, #5a9a62, #3a7a42 70%); }
/* ❌ CHECK #1044 п.1: ковёр был практически невидим (.06 прозрачности) — поднимаем контраст. */
.of-rug { position: absolute; left: 4%; right: 4%; bottom: 3%; height: 18%; border-radius: 40px; background: rgba(224,164,58,.16); border: 2px dashed rgba(242,196,109,.4); box-shadow: inset 0 0 30px rgba(224,164,58,.1); }

/* кресло + столик у дивана (office_service.md п.2) */
.of-armchair { position: absolute; left: 10%; bottom: 7%; width: 34px; height: 34px; border-radius: 10px 10px 4px 4px; background: linear-gradient(#7a3a3a, #5a2424); box-shadow: 0 4px 0 #3a1414; }
.of-armchair::before { content: ""; position: absolute; left: -6px; top: 4px; width: 8px; height: 20px; border-radius: 4px; background: #7a3a3a; }
.of-sidetable { position: absolute; left: 17.5%; bottom: 7.5%; width: 20px; height: 10px; border-radius: 3px; background: #6b4226; box-shadow: 0 6px 0 -2px #4a2c1c; }

/* стеллаж с книгами и доска — левый/правый край зала, вне мест людей.
   #1056 п.1: ниже подписей комнат (25.5–28.5%) и между облачками очереди у кофе (до 37.7%) и первого ряда столов (с 45.5%). */
.of-bookshelf { position: absolute; left: 1.5%; top: 38%; width: 9%; max-width: 32px; height: 6.5%; border-radius: 3px; background: #6b4226; box-shadow: 0 0 0 2px #4a2c1c, 0 6px 10px rgba(0,0,0,.35); }
.of-bookshelf::before { content: ""; position: absolute; inset: 4px; background: repeating-linear-gradient(0deg, #e0a43a 0 7px, #4aa3e0 7px 14px, #e06a8a 14px 21px, #4cc08a 21px 28px, #e8883a 28px 35px); border-radius: 2px; }
.of-board { position: absolute; right: 1.5%; top: 38%; width: 9%; max-width: 32px; height: 6.5%; border-radius: 3px; background: #f3ead4; box-shadow: 0 0 0 2px #cbb89c, 0 6px 10px rgba(0,0,0,.35); }
.of-board i { position: absolute; left: 12%; right: 12%; height: 10%; border-radius: 2px; background: #e05a4a; }
.of-board i:first-child { top: 28%; }
.of-board i:last-child { top: 54%; width: 60%; background: #4aa3e0; }

/* рамки на стене — над кабинетами, вне места Директора */
.of-frame { position: absolute; top: 1%; width: 9%; max-width: 30px; height: 24px; border-radius: 2px; background: #f3ead4; box-shadow: 0 0 0 2px #8b5a2b, 0 3px 6px rgba(0,0,0,.3); }
.of-frame::before { content: ""; position: absolute; inset: 3px; background: linear-gradient(140deg, #4aa3e0, #e06a8a 70%); border-radius: 1px; }
/* #1056 п.4: правый угол занят кнопкой ⏸ (утверждено п.7 #997) — рамка и принтер уходят из-под неё */
.of-frame.f1 { left: 11%; }
.of-frame.f2 { right: 31%; }

/* торшеры по краям зала — вне мест людей и столов */
.of-lamp-fl { position: absolute; width: 4px; height: 56px; background: #8b5a2b; border-radius: 2px; }
.of-lamp-fl::before { content: ""; position: absolute; left: -9px; top: -20px; width: 22px; height: 22px; border-radius: 50% 50% 10% 10%; background: #f2c46d; box-shadow: 0 0 14px rgba(242,196,109,.5); }
.of-lamp-fl.l1 { left: 2%; top: 56%; }
.of-lamp-fl.l2 { right: 2%; top: 56%; }
.of-lamp-fl.l3 { left: 2%; top: 74%; }
.of-lamp-fl.l4 { right: 2%; top: 74%; }

.of-desk { position: absolute; width: 66px; height: 26px; margin-left: -33px; margin-top: -26px; z-index: 2; pointer-events: none; transition: opacity .3s; }
.of-desk i { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(#b27a42, #8b5a2b); box-shadow: 0 5px 0 #5f3b1c, 0 7px 8px rgba(0,0,0,.35); }
.of-desk b { position: absolute; left: 20px; top: -9px; width: 26px; height: 14px; border-radius: 3px 3px 0 0; background: #1a1a22; border: 2px solid #555; }
.of-desk.is-on b { background: #7fd0ff; box-shadow: 0 0 10px #7fd0ff; }
.of-desk.is-empty { opacity: 0; }   /* ✏️ Армана п.3: пустых столов нет — виден, только пока занят */

.of-foot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(242,196,109,.5);
  opacity: .55; z-index: 1; transition: opacity 1.1s ease-out; pointer-events: none; }

.of-ch { position: absolute; width: 44px; height: 64px; margin-left: -22px; margin-top: -64px; z-index: 1; cursor: pointer; transition: left 1.8s ease-in-out, top 1.8s ease-in-out; -webkit-tap-highlight-color: transparent; }
.of-ch.no-anim { transition: none; }
.of-ch.walking { z-index: 4; }
.of-ch.is-sit { z-index: 1; }
.of-ch:not(.walking):not(.is-sit) { z-index: 3; }
.of-fig { position: absolute; inset: 0; }
.of-fig i { position: absolute; display: block; }
.of-fh { left: 11px; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #f1c9a0; box-shadow: inset 0 -5px 0 rgba(0,0,0,.06); }
.of-fh::before { content: ""; position: absolute; left: -1px; top: -2px; width: 24px; height: 10px; border-radius: 12px 12px 4px 4px; background: var(--of-hair, #3b2417); }
.of-fh::after { content: ""; position: absolute; left: 5px; top: 10px; width: 3px; height: 3px; border-radius: 50%; background: #2a1a12; box-shadow: 9px 0 0 #2a1a12; }
.of-fb { left: 8px; top: 21px; width: 28px; height: 25px; border-radius: 9px 9px 5px 5px; background: var(--of-c, #4aa3e0); }
.of-arm { top: 24px; width: 7px; height: 20px; border-radius: 4px; background: var(--of-c, #4aa3e0); filter: brightness(.88); transform-origin: 50% 3px; }
.of-arm.l { left: 3px; } .of-arm.r { left: 34px; }
.of-leg { top: 45px; width: 9px; height: 19px; border-radius: 3px 3px 5px 5px; background: #2d2a3a; transform-origin: 50% 2px; }
.of-leg.l { left: 12px; } .of-leg.r { left: 23px; }
.of-fig .of-cup { display: none; left: 34px; top: 34px; font-size: 14px; font-style: normal; line-height: 1; }
.of-fig .of-doc { display: none; left: 32px; top: 30px; font-size: 14px; font-style: normal; line-height: 1; }
.of-fig .of-bang { display: none; position: absolute; right: -6px; top: -4px; font-size: 20px; line-height: 1; animation: ofBang .8s ease-in-out infinite alternate; }
.of-name { position: absolute; left: 50%; top: 68px; transform: translateX(-50%); padding: 1px 8px; border-radius: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; color: #fbf1de; background: rgba(20,10,12,.78); border: 1.5px solid var(--of-c, #4aa3e0); }
/* ❌ CHECK #1044 п.4: чип модели 10px (<14px) и плашка «Директор Sonnet» уходила за левый край —
   чип переносим под имя отдельной строкой (≥14px), ширина плашки больше не растёт от длины модели. */
.of-name { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 8px; }
.of-name .of-model { margin-left: 0; padding: 0 6px; border-radius: 7px; font-size: 14px; font-weight: 800; font-style: normal; letter-spacing: .02em; color: #2a1a12; background: #f2c46d; line-height: 1.3; }
/* ✏️ Армана п.2: кружок-состояние под человечком — зелёный/серый/золотой (мигает) */
.of-dot { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%;
  background: #8a8179; box-shadow: 0 0 4px rgba(0,0,0,.6), 0 0 0 2px rgba(20,10,12,.7); z-index: 2; }
.of-ch.st-work .of-dot, .of-ch.st-meet .of-dot, .of-ch.st-read .of-dot, .of-ch.st-dirvisit .of-dot { background: #4cc08a; box-shadow: 0 0 6px #4cc08a, 0 0 0 2px rgba(20,10,12,.7); }
.of-ch.st-wait .of-dot { background: #f2c46d; box-shadow: 0 0 8px #f2c46d, 0 0 0 2px rgba(20,10,12,.7); animation: ofDotBlink 1s ease-in-out infinite; }
@keyframes ofDotBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.of-bub { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); width: max-content; max-width: 118px; padding: 2px 8px; border: solid #fbf1de; border-width: 4px 0; border-radius: 12px; background: #fbf1de; color: #2a1a12; font-size: 14px; line-height: 1.2; font-weight: 600; text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,.4); pointer-events: none; white-space: normal; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.of-ch.walking .of-bub { opacity: .0; }
.of-bub { transition: opacity .3s; }

/* состояния */
.of-ch.is-sit .of-leg { visibility: hidden; }
.of-ch.st-work.is-sit .of-arm, .of-ch.st-meet.is-sit .of-arm { animation: ofType .28s ease-in-out infinite alternate; }
.of-ch.st-work.is-sit .of-arm.r, .of-ch.st-meet.is-sit .of-arm.r { animation-delay: .14s; }
.of-ch.walking .of-leg.l { animation: ofStep .38s ease-in-out infinite alternate; }
.of-ch.walking .of-leg.r { animation: ofStep .38s ease-in-out infinite alternate-reverse; }
.of-ch.walking .of-arm.l { animation: ofStep .38s ease-in-out infinite alternate-reverse; }
.of-ch.walking .of-arm.r { animation: ofStep .38s ease-in-out infinite alternate; }
.of-ch.st-idle:not(.walking) .of-cup { display: block; animation: ofSip 2.4s ease-in-out infinite; }
.of-ch.st-wait:not(.walking) .of-bang { display: block; }
.of-ch.st-wait:not(.walking) .of-arm.r { animation: ofWave .5s ease-in-out infinite alternate; }
.of-ch.st-read:not(.walking) .of-doc, .of-ch.st-meet:not(.walking) .of-doc, .of-ch.st-dirvisit:not(.walking) .of-doc { display: block; }
.of-ch.st-read:not(.walking) .of-fh, .of-ch.st-dirvisit:not(.walking) .of-fh { animation: ofNod 1.6s ease-in-out infinite; }
.of-ch.is-sel .of-name { background: var(--of-c, #4aa3e0); color: #140a0c; }
.of-ch.is-paused { opacity: .62; filter: grayscale(.55); }
.of-ch.st-away { opacity: .5; filter: grayscale(1); }   /* #1013: окна сессии нет — серый, без анимаций */
.of-ch.st-away .of-bub { background: #cbb89c; border-color: #cbb89c; }
@keyframes ofType { from { transform: rotate(14deg) translateY(0); } to { transform: rotate(-6deg) translateY(-2px); } }
@keyframes ofStep { from { transform: rotate(26deg); } to { transform: rotate(-26deg); } }
@keyframes ofWave { from { transform: rotate(150deg); } to { transform: rotate(205deg); } }
@keyframes ofSip { 0%, 60% { transform: translateY(0); } 75%, 90% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
@keyframes ofNod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes ofBang { from { transform: scale(1); } to { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .of-ch { transition-duration: .01s; } .of-fig *, .of-bang { animation: none !important; } }

/* карточка */
/* #1011 п.3 (утверждено docs/approved/office.md): шторка СПРАВА, не снизу */
.of-sheet { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 82%; max-width: 420px; max-height: none; overflow-y: auto; z-index: 6; padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 0 0 18px; background: #241114; border-left: 2px solid rgba(242,196,109,.5); box-shadow: -10px 0 30px rgba(0,0,0,.6); }
.of-sh-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-bottom: 6px; }
.of-sh-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--of-c, #4aa3e0); flex: none; }
.of-sh-name { margin: 0; font-size: 22px; font-weight: 800; }
.of-sh-model { padding: 2px 9px; border-radius: 9px; font-size: 13px; font-weight: 800; color: #2a1a12; background: #f2c46d; }
.of-sh-state { flex: 1 1 auto; font-size: 15px; color: #cbb89c; }
.of-sh-x { min-width: 44px; min-height: 44px; border-radius: 22px; border: 0; background: transparent; color: #f2c46d; font-size: 22px; }
.of-sh-h { margin: 14px 0 4px; font-size: 14px; font-weight: 800; letter-spacing: .08em; color: #f2c46d; text-transform: uppercase; }
.of-sh-t { margin: 0; font-size: 17px; line-height: 1.4; color: #fbf1de; }
.of-sh-ul { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.45; color: #e3d3ba; }
.of-open { width: 100%; min-height: 48px; margin-top: 14px; border-radius: 14px; border: 1.5px solid rgba(242,196,109,.5); background: transparent; color: #f2c46d; font-size: 17px; font-weight: 700; }
.of-wait { margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(242,196,109,.08); border: 1.5px solid rgba(242,196,109,.4); }
.of-wait p { margin: 0 0 8px; font-size: 16px; line-height: 1.4; color: #fbf1de; }
.of-wait img { display: block; max-width: 100%; max-height: 180px; margin: 0 0 8px; border-radius: 10px; }
.of-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.of-btns .of-btn.ok { flex: 1 1 100%; }
.of-btn { flex: 1 1 40%; min-height: 48px; white-space: nowrap; border-radius: 14px; border: 1.5px solid rgba(242,196,109,.5); background: rgba(40,19,21,.9); color: #fbf1de; font-size: 16px; font-weight: 700; }
.of-btn.ok { background: linear-gradient(#f6d58b, #e0a43a); color: #2a1a12; border: 0; }
.of-btn:disabled { opacity: .55; }
.of-edit { width: 100%; box-sizing: border-box; min-height: 84px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(242,196,109,.5); background: #140a0c; color: #fbf1de; font-size: 16px; font-family: inherit; resize: vertical; }

/* #974/#1010: «⏸ Пауза» — маленькая кнопка-кружок в углу комнаты, не закрывает мебель (❌ CHECK #1011) */
.of-bar { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; align-items: center; gap: 6px; }
.of-pico { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid rgba(242,196,109,.55); background: rgba(30,14,16,.92); color: #f2c46d; font-size: 18px; line-height: 1; }
.of-pico.is-on { background: linear-gradient(#f6d58b, #e0a43a); color: #2a1a12; border: 0; }
.of-pico2 { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px solid rgba(242,196,109,.55); background: rgba(30,14,16,.92); color: #f2c46d; font-size: 15px; line-height: 1; }
.of-pico:disabled, .of-pico2:disabled, .of-pause:disabled { opacity: .55; }
.of-pbadge { padding: 3px 8px; border-radius: 10px; background: rgba(20,10,12,.85); font-size: 14px; font-weight: 800; color: #cbb89c; white-space: nowrap; }
.of-pause { width: 100%; min-height: 48px; margin-top: 14px; border-radius: 14px; border: 1.5px solid rgba(242,196,109,.55); background: rgba(40,19,21,.9); color: #f2c46d; font-size: 17px; font-weight: 800; }
.of-pause.is-on { background: linear-gradient(#f6d58b, #e0a43a); color: #2a1a12; border: 0; }
.of-pause + .of-open { margin-top: 8px; }

/* #985: карточка Директора */
.of-dmsg { margin-top: 10px; color: #cbb89c; }
.of-idea { margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(242,196,109,.25); }
.of-idea-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.of-idea-n { font-size: 14px; color: #cbb89c; }
.of-idea-t { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.35; color: #fbf1de; overflow-wrap: anywhere; }
.of-idea-u { margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: #e3d3ba; overflow-wrap: anywhere; }
.of-idea-u b { color: #f2c46d; }
.of-fixb { width: 100%; flex: none; }
.of-fixgo { width: 100%; flex: none; margin-top: 8px; }
.of-pill { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1.2; }
.of-st-wait { background: #e0a43a; color: #2a1a12; }
.of-st-new { background: #fbf1de; color: #2a1a12; }
.of-st-study { background: #8cc8f0; color: #10202c; }
.of-st-build { background: #e8883a; color: #2a1608; }
.of-st-done { background: #4cc08a; color: #0e2a1c; }
.of-st-later { background: #8a8179; color: #1c1612; }
.of-tm { color: #cbb89c; font-size: 14px; white-space: nowrap; }
.of-sh-ul li { overflow-wrap: anywhere; }

/* #1027 страница 2 «Кабинеты»: Директор (большой) + 🛠 Сервисный центр ─────────── */
.of-cab { padding-top: 8px; }
.of-cabd, .of-svc { margin-bottom: 18px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(242,196,109,.25); }
.of-dir-big { position: relative; width: 80%; height: 140px; margin: 0 auto 10px; max-width: 260px; top: auto; }
.of-dir-big .of-mini-desk { left: 30%; width: 40%; height: 30%; }
.of-dir-big .of-mini-mon { left: 38%; width: 22%; height: 20%; }
.of-dir-big .of-shelf { position: absolute; left: 6%; top: 8%; width: 20%; height: 40%; border-radius: 3px; background: #6b4226; box-shadow: 0 0 0 2px #4a2c1c; }
.of-dir-big .of-shelf::before { content: ""; position: absolute; inset: 3px; background: repeating-linear-gradient(0deg, #e0a43a 0 6px, #4aa3e0 6px 12px, #4cc08a 12px 18px); border-radius: 2px; }
.of-dir-big .of-lamp { position: absolute; right: 8%; top: 6%; width: 16px; height: 16px; border-radius: 50% 50% 2px 2px; background: #f2c46d; box-shadow: 0 0 10px #f2c46d; }
.of-dir-big .of-lamp::before { content: ""; position: absolute; left: 7px; top: -14px; width: 2px; height: 14px; background: #8b5a2b; }
.of-dir-big .of-gchair { position: absolute; bottom: 4%; width: 14%; height: 20%; border-radius: 40% 40% 20% 20%; background: #7a3a3a; box-shadow: 0 0 0 2px #4a2020; }
.of-dir-big .of-gchair.c1 { left: 58%; }
.of-dir-big .of-gchair.c2 { left: 76%; }
.of-dir-big .of-tray { position: absolute; left: 32%; bottom: 10%; width: 36%; height: 8%; border-radius: 3px; background: #e8e2d4; box-shadow: 0 2px 0 #b8a98a; }
.of-cab-h { margin: 0 0 6px; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-size: 20px; font-weight: 700; color: #fbf1de; text-align: center; }
.of-cab-sub { margin: 0 0 4px; font-size: 15px; color: #e3d3ba; text-align: center; }
.of-cab-tag { margin: 0; font-size: 14px; color: #cbb89c; text-align: center; }
/* стойка Сервисного центра (п.5) */
.of-desk2 { position: relative; width: 70%; max-width: 220px; height: 40px; margin: 0 auto 10px; }
.of-desk2 i { position: absolute; left: 0; right: 0; top: 6px; bottom: 0; border-radius: 6px; background: linear-gradient(#b27a42, #8b5a2b); box-shadow: 0 4px 0 #5f3b1c; }
.of-desk2 b { position: absolute; left: 50%; top: 0; width: 26px; height: 16px; margin-left: -13px; border-radius: 3px 3px 0 0; background: #1a1a22; border: 2px solid #7fd0ff; box-shadow: 0 0 8px #7fd0ff; }
.of-svc-counts { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #f2c46d; text-align: center; }
.of-svc-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 10px; min-height: 44px; }
.of-stu { position: relative; width: 48px; height: 60px; padding: 0; border: 0; background: transparent; }
/* человечек-ученик — мини-фигура тем же языком, что и в комнате, а не иконка-смайл (п.5) */
.of-stu-ic { display: block; position: relative; width: 36px; height: 40px; margin: 0 auto; }
.of-stu-ic .h { position: absolute; left: 10px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #f1c9a0; }
.of-stu-ic .b { position: absolute; left: 6px; top: 15px; width: 24px; height: 22px; border-radius: 9px 9px 5px 5px; background: #4aa3e0; border: 2px solid rgba(242,196,109,.4); }
.of-stu.is-red .of-stu-ic .b { border-color: #ff9d8f; box-shadow: 0 0 8px rgba(255,157,143,.6); }
.of-stu-lang { display: block; margin-top: 2px; font-size: 14px; font-weight: 800; color: #cbb89c; text-align: center; }
.of-stu-bang { position: absolute; top: -4px; right: 0px; width: 20px; height: 20px; border-radius: 50%; background: #ff9d8f; color: #3a100a; font-size: 14px; font-weight: 900; line-height: 20px; }
.of-stu-more { font-size: 15px; font-weight: 700; color: #cbb89c; }
.of-svc-msg { margin: 8px 0 0; font-size: 15px; color: #cbb89c; text-align: center; }
.of-ticket-shot { display: block; max-width: 100%; max-height: 180px; margin: 6px 0; border-radius: 10px; }

/* #1027 страница 3 «Переговорная» — планёрка */
.of-meet-pg { padding-top: 8px; }
.of-meet-board { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: #141014; border: 2px solid rgba(242,196,109,.3); }
.of-meet-board-h { margin: 0 0 6px; font-size: 14px; font-weight: 800; letter-spacing: .06em; color: #f2c46d; text-transform: uppercase; }
.of-meet-row { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 3px 0; font-size: 15px; color: #fbf1de; }
.of-meet-row b { font-weight: 800; color: #cbb89c; }
.of-meet-row b.ok { color: #4cc08a; }
.of-meet-row b.wait { color: #f2c46d; }
.of-meet-table { position: relative; width: 100%; max-width: 480px; height: 820px; margin: 0 auto; border-radius: 22px; overflow: hidden;
  border: 1.5px solid rgba(242,196,109,.26);
  background: radial-gradient(60% 30% at 50% 10%, rgba(255,190,100,.12), transparent 70%), linear-gradient(#3a1d1c, #4a2c1c); }
/* ❌ CHECK #1044 п.2: стол, экран на стене и стулья — рисуем ВСЕГДА (не только когда meeting.on=true);
   человечки — только #ofMeetChars, которую чистим/заполняем по состоянию планёрки. */
.of-mt-screen { position: absolute; left: 50%; top: 4%; width: 44%; height: 10%; transform: translateX(-50%); border-radius: 8px; background: #1a1a22; border: 3px solid #5a5a66; box-shadow: 0 0 16px rgba(127,208,255,.22), 0 4px 10px rgba(0,0,0,.4); z-index: 1; }
.of-mt-screen::before { content: ""; position: absolute; inset: 12%; border-radius: 3px; background: linear-gradient(160deg, rgba(127,208,255,.2), transparent 70%); }
/* #1056 п.5: стол в пропорциях комнаты, не на всю высоту */
.of-mt-oval { position: absolute; left: 50%; top: 57%; width: 48%; height: 16%; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(#b27a42, #8b5a2b); box-shadow: 0 5px 0 #5f3b1c, 0 10px 16px rgba(0,0,0,.4); z-index: 1; }
.of-mt-chair { position: absolute; width: 7%; height: 5%; margin: -2.5% 0 0 -3.5%; border-radius: 40%; background: #7a3a3a; box-shadow: 0 0 0 2px #4a2020; z-index: 1; }
.of-mt-chair.c1 { left: 28%; top: 40%; }
.of-mt-chair.c2 { left: 72%; top: 40%; }
.of-mt-chair.c3 { left: 28%; top: 58%; }
.of-mt-chair.c4 { left: 72%; top: 58%; }
.of-mt-chair.c5 { left: 28%; top: 76%; }
.of-mt-chair.c6 { left: 72%; top: 76%; }
.of-mt-chair.head { left: 50%; top: 20%; background: #8b5a2b; }
#ofMeetChars { position: absolute; inset: 0; z-index: 2; }
.of-meet-msg { position: absolute; left: 6%; right: 6%; top: 18%; z-index: 3; margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(20,10,12,.88); border: 1.5px solid rgba(242,196,109,.45); text-align: center; font-size: 15px; line-height: 1.4; color: #e3d3ba; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.of-meet-row-empty { color: #8a8179; font-style: italic; }

/* #1003: панель 7 разделов поверх комнаты (docs/contracts/office_inbox.md) */
.of-nav { position: relative; z-index: 6; flex: none; display: flex; background: #1b0c10; border-top: 1.5px solid rgba(242,196,109,.26); padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px)); }
/* ❌ CHECK #1037: подписи под иконками убраны (11px не ≥14px и резались на 360px) —
   полное имя раздела теперь в заголовке листа (sectionHeaderHtml) и в aria-label кнопки. */
.of-navb { position: relative; flex: 1 1 0; min-width: 0; min-height: 52px; padding: 6px 2px; border: 0; background: transparent; color: #cbb89c; display: flex; align-items: center; justify-content: center; }
.of-navb.is-on { color: #f2c46d; }
.of-navb-ic { font-size: 26px; line-height: 1; }
.of-navb-badge { position: absolute; top: 2px; right: 14%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #8a8179; color: #1c1612; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.of-navb-badge.is-red { background: #ff9d8f; color: #3a100a; }

.of-section { position: absolute; inset: 0; z-index: 5; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #1b0c10; padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
.of-sec-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 0 8px; margin-bottom: 4px; background: #1b0c10; }
.of-sec-head h3 { flex: 1; min-width: 0; margin: 0; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-size: 20px; font-weight: 700; color: #fbf1de; }
.of-sec-body { padding-bottom: 8px; }
.of-inbox-card { margin-bottom: 12px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(242,196,109,.25); }
.of-inbox-card.is-warn { border-color: rgba(242,196,109,.5); }
.of-inbox-card.is-high { border-color: #ff9d8f; }
.of-inbox-card h4 { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #fbf1de; overflow-wrap: anywhere; }
.of-inbox-card p { margin: 0 0 8px; font-size: 16px; line-height: 1.4; color: #e3d3ba; overflow-wrap: anywhere; }
.of-inbox-card img { display: block; max-width: 100%; max-height: 180px; margin: 0 0 8px; border-radius: 10px; }