/* 🏢 Офис — страница 1 на canvas (js/office2.js, #1041, только за ?preview=office).
   Поверх пиксельной комнаты — тихий DOM-слой: плоская плашка имени с подчёркиванием цветом сессии,
   квадратный чип модели ≥14px, кремовое облачко с пиксельным хвостиком. Без градиентов и «пилюль». */
.o2-wrap { position: relative; margin: 4px auto 0; max-width: 100%; }
.o2-canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 0 1.5px rgba(242,196,109,.26); }
.o2-ov { position: absolute; inset: 0; pointer-events: none; }
.o2-wrap .of-bar { position: absolute; top: 8px; right: 8px; z-index: 5; pointer-events: auto; }

.o2-tag { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; --o2-head: 70px; }
.o2-bw { position: absolute; left: 0; bottom: var(--o2-head); transform: translateX(-50%); width: max-content; max-width: 100px; transition: opacity .25s; }
.o2-bub { padding: 2px 7px; border-radius: 3px; background: #fbf1de; color: #2a1a12; font-size: 14px; line-height: 1.2; font-weight: 600; text-align: center; white-space: normal; overflow-wrap: anywhere;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; box-shadow: 0 2px 0 rgba(0,0,0,.28); }
.o2-tail { position: absolute; left: 50%; bottom: -4px; width: 8px; height: 4px; margin-left: -4px; background: #fbf1de; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.o2-bub:empty, .o2-bub:empty + .o2-tail { display: none; }
.o2-tag.is-walking .o2-bw { opacity: 0; }
/* #1064 п.1 / #1066 п.2: «❗» над облачком по центру — не поверх текста и не шире сцены у правой колонки */
.o2-bang { display: none; position: absolute; left: 50%; margin-left: -9px; top: -22px; font-size: 18px; line-height: 1; animation: o2Bang .8s ease-in-out infinite alternate; }
.o2-tag.st-wait:not(.is-walking) .o2-bang { display: block; }

.o2-name { position: absolute; left: 0; top: 4px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 1px 6px 2px; border-radius: 3px;
  background: rgba(20,10,12,.86); color: #fbf1de; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; border-bottom: 2px solid var(--o2-c, #e0a43a); pointer-events: auto; cursor: pointer; }
.o2-nm { display: inline-flex; align-items: center; gap: 4px; }
.o2-dot { width: 8px; height: 8px; border-radius: 50%; background: #8a8179; box-shadow: 0 0 0 1.5px rgba(20,10,12,.9); flex: none; }
.o2-tag.st-work .o2-dot, .o2-tag.st-deliver .o2-dot { background: #4cc08a; box-shadow: 0 0 6px #4cc08a, 0 0 0 1.5px rgba(20,10,12,.9); }
.o2-tag.st-wait .o2-dot { background: #f2c46d; box-shadow: 0 0 8px #f2c46d, 0 0 0 1.5px rgba(20,10,12,.9); animation: o2Blink 1s ease-in-out infinite; }
.o2-tag.st-wait .o2-name { border-color: #f2c46d; }
.o2-model { padding: 0 4px; border-radius: 2px; font-size: 14px; font-weight: 700; font-style: normal; letter-spacing: .01em; color: #2a1a12; background: #f2c46d; line-height: 1.2; }
.o2-model[hidden] { display: none; }
.o2-tag.is-sel .o2-name { background: var(--o2-c, #e0a43a); color: #140a0c; }
.o2-tag.st-away { opacity: .6; }
.o2-tag.st-away .o2-bub, .o2-tag.st-away .o2-tail { background: #cbb89c; }
.o2-tag.st-nobub .o2-bw { display: none; }
.o2-tag.st-student .o2-dot { background: #4aa3e0; box-shadow: 0 0 0 1.5px rgba(20,10,12,.9); }
.o2-tag.st-red .o2-dot { background: #ff9d8f; box-shadow: 0 0 8px #ff9d8f, 0 0 0 1.5px rgba(20,10,12,.9); animation: o2Blink 1s ease-in-out infinite; }
.o2-tag.st-red .o2-name { border-color: #ff9d8f; }
.o2-tag.st-red .o2-bang { display: block; }

/* ── Страница 3: Сервис сверху + Переговорная снизу ── */
.o2-p3 { padding: 4px 0 8px; }
.o2-p3 .of-cab-h { margin: 6px 0 2px; }
.o2-p3 .o2-wrap { margin-top: 6px; }
.o2-counts { margin: 8px 0 10px; }
.o2-caption { position: absolute; left: 6%; right: 6%; top: 44%; 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); pointer-events: none; }
.o2-p3 .of-meet-board { margin-top: 12px; }

/* ── Страница 2: кабинет Директора — сцена, подсказка, данные Армана, переписка, поле ввода ── */
.o2-cab { padding: 4px 0 0; }
.o2-hint { margin: 8px 4px 0; text-align: center; font-size: 14px; color: #cbb89c; }
.o2-dir { margin: 12px 0 0; padding: 4px 12px 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(242,196,109,.25); }
.o2-dir-head { display: flex; align-items: center; gap: 8px; }
.o2-dir-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; }
.o2-task { margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(242,196,109,.25); }
.o2-task-t { margin: 0 0 6px; font-size: 16px; line-height: 1.4; color: #fbf1de; overflow-wrap: anywhere; }
.o2-sec { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1.2; background: #8a8179; color: #1c1612; }
.o2-sec.is-urgent { background: #ff9d8f; color: #3a100a; }
.o2-sec.is-important { background: #f2c46d; color: #2a1a12; }
.o2-sec.is-review { background: #8cc8f0; color: #10202c; }
.o2-sec.is-inbox { background: #fbf1de; color: #2a1a12; }
.o2-acts { margin-top: 8px; }
.o2-acts .of-btn { flex: 1 1 45%; }
.of-btn.is-hot { border-color: rgba(255,157,143,.6); color: #ffb3a8; }
.o2-confirm { margin-top: 8px; padding: 10px; border-radius: 12px; background: rgba(255,157,143,.1); border: 1.5px solid rgba(255,157,143,.5); }
.o2-confirm p { margin: 0 0 8px; font-size: 16px; color: #fbf1de; }
.o2-mark { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: #f2c46d; }
.o2-chat { margin-top: 12px; }
.o2-msg { margin: 8px 0; padding: 10px 12px; border-radius: 14px; max-width: 88%; font-size: 16px; line-height: 1.4; }
.o2-msg p { margin: 0; overflow-wrap: anywhere; }
.o2-msg.is-me { margin-left: auto; background: rgba(242,196,109,.16); border: 1.5px solid rgba(242,196,109,.4); color: #fbf1de; border-bottom-right-radius: 4px; }
.o2-msg.is-dir { margin-right: auto; background: #fbf1de; color: #2a1a12; border-bottom-left-radius: 4px; }
.o2-msg .o2-link { display: block; margin-top: 4px; font-size: 14px; color: inherit; overflow-wrap: anywhere; }
.o2-ts { display: block; margin-top: 2px; text-align: right; }
/* #1065: один компактный ряд ≤60px — поле растёт при вводе до 120px */
.o2-compose { position: sticky; bottom: 0; z-index: 2; margin: 12px -12px 0; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); background: #1b0c10; border-top: 1.5px solid rgba(242,196,109,.26); }
.o2-compose-row { display: flex; align-items: flex-end; gap: 6px; }
.o2-ta { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 44px; min-height: 44px; max-height: 120px; padding: 11px 12px; border-radius: 12px; border: 1.5px solid rgba(242,196,109,.5); background: #140a0c; color: #fbf1de; font-size: 16px; line-height: 1.25; font-family: inherit; resize: none; overflow-y: auto; }
.o2-ib { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1.5px solid rgba(242,196,109,.5); background: rgba(40,19,21,.9); font-size: 20px; line-height: 1; color: #f2c46d; }
.o2-send { background: linear-gradient(#f6d58b, #e0a43a); color: #2a1a12; border: 0; }
.o2-send:disabled { opacity: .55; }
.o2-att { display: block; margin: 6px 2px 0; font-size: 14px; color: #cbb89c; overflow-wrap: anywhere; }
.o2-att[hidden] { display: none; }
.o2-rec { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 16px; color: #fbf1de; }
.o2-rec .of-btn { flex: 1 1 auto; min-height: 44px; }
.o2-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff9d8f; animation: o2Blink 1s ease-in-out infinite; flex: none; }
.o2-tag.st-paused .o2-name { opacity: .8; }

.o2-sign { position: absolute; left: 0; top: 0; display: inline-block; font-size: 14px; font-weight: 600; color: #e3d3ba; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.85); }

@keyframes o2Blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes o2Bang { from { transform: scale(1); } to { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .o2-dot, .o2-bang { animation: none !important; } .o2-bub, .o2-tail { transition: none; } }