/* ===== Het kantoor ===== */
.office { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.floor { display: grid; gap: 10px; padding: 14px; border-radius: 22px; border: 1px solid var(--line-strong);
  grid-template-columns: repeat(3, 1fr); grid-template-rows: 190px 54px 190px;
  grid-template-areas: "a b c" "h h h" "d e f";
  background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(255, 255, 255, 0.03) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.03) 39px 40px), var(--glass);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.25), 0 24px 60px rgba(0, 0, 0, 0.35); }
.room { --rc: #6fe3a1; position: relative; overflow: hidden; text-align: left; cursor: pointer; border-radius: 14px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); border-bottom-width: 4px;
  background: radial-gradient(90% 80% at 50% 105%, color-mix(in srgb, var(--rc) 20%, transparent), transparent 70%), rgba(6, 10, 10, 0.5);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.room:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rc) 70%, transparent); }
.room.on { border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc), 0 0 34px color-mix(in srgb, var(--rc) 28%, transparent); }
.r-name { max-width: calc(100% - 34px); display: flex; flex-direction: column; font-weight: 600; font-size: 15px; } .r-name small { font-weight: 400; color: var(--muted); font-size: 12px; }
.r-lamp { position: absolute; top: -26px; right: 22px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 42%, transparent), transparent 68%); pointer-events: none; }
.r-badge { position: absolute; top: 10px; right: 12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--amber); color: #1a1205; font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.r-desk { position: absolute; left: 14%; right: 14%; bottom: 34px; height: 46px; border-radius: 10px 10px 6px 6px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)); border: 1px solid var(--line-strong); }
.r-mon { position: absolute; left: 50%; top: -14px; width: 46px; height: 24px; transform: translateX(-50%); border-radius: 4px; background: color-mix(in srgb, var(--rc) 55%, #0a0f10); box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 55%, transparent); }
.r-pad { position: absolute; left: 18%; bottom: 8px; width: 28px; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.r-agent { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--rc); background: rgba(5, 8, 8, 0.85); border: 2px solid var(--rc); box-shadow: 0 0 20px color-mix(in srgb, var(--rc) 40%, transparent); animation: breathe 3.6s ease-in-out infinite; }
.room.busy .r-agent { animation: nudge 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateX(-50%) translateY(-3px); } } @keyframes nudge { 40%, 60% { transform: translateX(-50%) translateY(-6px); } }
.r-st { position: absolute; left: 14px; bottom: 10px; font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.r-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.room.busy .r-st { color: var(--amber); }
.room.locked { cursor: default; display: grid; place-items: center; gap: 4px; color: var(--muted); border: 1px dashed var(--line-strong); background: rgba(0, 0, 0, 0.3); }
.room.locked:hover { transform: none; }
.meeting { border-radius: 14px; border: 1px dashed var(--line-strong); padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, 0.02) 10px 20px); }
.meeting b { color: var(--text); font-weight: 500; }
.hall { position: relative; border-radius: 10px; display: flex; align-items: center; padding: 0 14px; color: var(--muted); font-size: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 18px, transparent 18px 36px); border: 1px solid var(--line); }
.hall .you { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 14px; border-radius: 999px; background: var(--text); color: #0b0f10; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }

.chat { position: sticky; top: 8px; display: flex; flex-direction: column; min-height: 470px; max-height: calc(100vh - var(--top) - 40px); border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; }
.chat > header { --rc: #6fe3a1; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat > header > div { flex: 1; min-width: 0; } .chat h3 { margin: 0; color: var(--text); font-size: 16px; } .chat header small { color: var(--muted); }
.c-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--rc); border: 2px solid var(--rc); box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 40%, transparent); }
.does { padding: 10px 16px 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.msgs { flex: 1; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.msg { max-width: 88%; padding: 8px 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; line-height: 1.45; }
.msg p { margin: 0; white-space: pre-wrap; } .msg small { color: var(--muted); font-size: 10.5px; }
.msg.jij { align-self: flex-end; background: var(--teal-dim); border: 1px solid var(--line-strong); border-bottom-right-radius: 4px; }
.msg.agent { align-self: flex-start; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.typing p { display: flex; gap: 4px; padding: 3px 2px; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dots 1s infinite; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 40% { transform: translateY(-4px); opacity: 1; } 0%, 80%, 100% { opacity: .4; } }
.asks { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 8px; }
.say { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.chat-empty { margin: auto; text-align: center; padding: 30px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; align-items: center; } .chat-empty h3 { color: var(--text); margin: 0; }
@media (max-width: 1100px) { .office { grid-template-columns: 1fr; } .chat { position: static; } .floor { grid-template-rows: 170px 48px 170px; } }
@media (prefers-reduced-motion: reduce) { .r-agent { animation: none !important; } }