:root {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif;

  color: #f4f7ff;
  background: #080b11;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -20%, #233049 0%, transparent 48%),
    linear-gradient(180deg, #0c1018, #07090e 70%);
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;

  padding:
    max(22px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}

h1,
p {
  margin: 0;
}

h1 {
  font-size: clamp(34px, 4vw, 58px);
  line-height: .95;
  letter-spacing: -.045em;
}

.eyebrow,
.label {
  font-size: 11px;
  letter-spacing: .2em;
  color: #8c97aa;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.topbar-right {
  display: flex;
  gap: 18px;
  align-items: center;
}

.connection {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: #aab3c4;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.online .dot {
  background: #58e38c;
  box-shadow:
    0 0 10px #58e38c,
    0 0 22px rgba(88,227,140,.55);
}

.offline .dot {
  background: #ff6464;
}

.version {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #808b9e;
  font-size: 10px;
  letter-spacing: .12em;
}

.world-shell {
  min-height: 0;
  padding: 1px;
  border-radius: 32px;

  background:
    linear-gradient(
      135deg,
      rgba(112,151,255,.3),
      rgba(255,255,255,.03),
      rgba(105,86,255,.2)
    );
}

.world {
  position: relative;
  width: 100%;
  min-height: 620px;
  height: 100%;

  overflow: hidden;
  border-radius: 31px;

  background:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px),
    radial-gradient(circle at center, #141b28, #0b0f17 68%);

  background-size:
    28px 28px,
    28px 28px,
    auto;
}

.room {
  position: absolute;
  width: 38%;
  height: 33%;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 22px 55px rgba(0,0,0,.18);
}

.room.active {
  border-color: rgba(110,151,255,.48);

  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 0 40px rgba(90,130,255,.08);
}

.lounge {
  left: 4%;
  top: 6%;
}

.command-center {
  left: 58%;
  top: 6%;
}

.server-room {
  left: 4%;
  top: 61%;
}

.project-lab {
  left: 58%;
  top: 61%;
}

.room-header {
  position: absolute;
  z-index: 2;

  top: 18px;
  left: 20px;

  display: flex;
  align-items: center;
  gap: 11px;
}

.room-header strong {
  display: block;
  font-size: 16px;
}

.room-header small {
  display: block;
  margin-top: 2px;

  color: #778296;
  font-size: 10px;
}

.room-icon {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;

  border-radius: 12px;

  background: rgba(255,255,255,.06);
}

.corridor {
  position: absolute;
  z-index: 0;

  border: 1px solid rgba(255,255,255,.045);

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.025) 10px,
      transparent 10px,
      transparent 20px
    );
}

.corridor-horizontal {
  left: 12%;
  right: 12%;
  top: 47%;
  height: 7%;
}

.corridor-vertical {
  top: 17%;
  bottom: 17%;
  left: 47%;
  width: 6%;
}

.hub {
  position: absolute;
  z-index: 1;

  left: 46%;
  top: 45%;

  width: 8%;
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  border: 1px solid rgba(114,147,255,.25);
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(78,114,210,.28),
      rgba(15,20,31,.9)
    );

  box-shadow:
    0 0 30px rgba(74,110,220,.12);
}

.hub span {
  font-size: 9px;
  letter-spacing: .17em;
  color: #7386b6;
}

.furniture,
.console,
.rack,
.lab-table,
.hologram {
  position: absolute;
  opacity: .7;
}

.sofa {
  left: 14%;
  bottom: 14%;
  width: 43%;
  height: 18%;

  border-radius: 18px;

  background: #202b3d;
}

.table {
  right: 16%;
  bottom: 20%;
  width: 18%;
  aspect-ratio: 1;

  border-radius: 50%;

  background: #273349;
}

.console {
  bottom: 16%;
  height: 18%;

  border: 1px solid rgba(88,154,255,.22);
  border-radius: 9px;

  background:
    linear-gradient(
      180deg,
      rgba(70,120,220,.35),
      rgba(23,29,44,.8)
    );
}

.console-one {
  left: 12%;
  width: 35%;
}

.console-two {
  right: 12%;
  width: 35%;
}

.rack {
  bottom: 11%;

  width: 19%;
  height: 47%;

  border-radius: 7px;

  background:
    repeating-linear-gradient(
      180deg,
      #202a3a 0,
      #202a3a 12px,
      #121822 12px,
      #121822 17px
    );
}

.rack-one {
  left: 13%;
}

.rack-two {
  left: 40%;
}

.rack-three {
  left: 67%;
}

.lab-table {
  left: 20%;
  bottom: 14%;

  width: 56%;
  height: 17%;

  border-radius: 10px;

  background: #20293a;
}

.hologram {
  left: 44%;
  bottom: 32%;

  width: 14%;
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(104,119,255,.55),
      rgba(104,119,255,.04) 65%
    );

  filter: blur(.2px);

  box-shadow:
    0 0 26px rgba(104,119,255,.3);
}

.agent {
  position: absolute;
  z-index: 20;

  transform: translate(-50%, -50%);

  transition:
    opacity .25s ease;

  pointer-events: none;
}

.agent.hidden {
  opacity: 0;
}

.agent-body {
  position: relative;
  z-index: 2;

  width: 48px;
  height: 55px;

  display: grid;
  place-items: center;

  border-radius: 19px 19px 17px 17px;

  background:
    linear-gradient(
      145deg,
      #f6f8ff,
      #cbd2e2
    );

  box-shadow:
    0 15px 28px rgba(0,0,0,.35);
}

.agent-face {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: #131926;
  color: #fff;

  font-weight: 800;
}

.agent-shadow {
  position: absolute;

  left: 50%;
  bottom: -7px;

  width: 36px;
  height: 10px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: rgba(0,0,0,.32);

  filter: blur(4px);
}

.agent-card {
  position: absolute;

  left: 58px;
  top: 4px;

  min-width: 92px;

  display: grid;
  gap: 1px;

  padding: 8px 11px;

  border: 1px solid rgba(255,255,255,.06);
  border-radius: 13px;

  background: rgba(9,12,18,.82);

  backdrop-filter: blur(14px);

  box-shadow:
    0 10px 25px rgba(0,0,0,.22);
}

.agent-card strong {
  font-size: 13px;
}

.agent-card span {
  font-size: 9px;
  letter-spacing: .13em;
  color: #8993a5;
}

.agent.walking .agent-body {
  animation:
    walking .38s ease-in-out infinite alternate;
}

.agent.working .agent-face {
  animation:
    working 1.1s ease-in-out infinite;
}

.agent.talking .agent-body {
  box-shadow:
    0 0 0 3px rgba(86,143,255,.13),
    0 15px 28px rgba(0,0,0,.35);
}

.agent.error .agent-face {
  background: #6d2028;
}

.statusbar {
  display: grid;

  grid-template-columns:
    auto
    auto
    minmax(220px,1fr)
    auto
    auto;

  gap: 24px;

  padding: 16px 20px;

  border: 1px solid rgba(255,255,255,.07);
  border-radius: 21px;

  background: rgba(14,18,26,.76);

  backdrop-filter: blur(18px);
}

.statusbar > div {
  display: grid;
  gap: 4px;
}

.statusbar strong {
  font-size: 13px;
}

@keyframes walking {
  from {
    transform:
      translateY(-3px)
      rotate(-2deg);
  }

  to {
    transform:
      translateY(2px)
      rotate(2deg);
  }
}

@keyframes working {
  50% {
    background: #344e8d;
  }
}

@media (max-width: 900px) {
  .world {
    min-height: 720px;
  }

  .statusbar {
    grid-template-columns:
      1fr 1fr 1fr;
  }

  .task {
    grid-column: span 2;
  }
}