@font-face {
  font-family: "ZhiwuSongti";
  src: url("./fonts/zhiwu-songti-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.chat-area {
  position: relative;
  flex: 1;
  min-height: min(480px, calc(100vh - 300px));
  min-height: min(480px, calc(100svh - 300px));
  display: flex;
  flex-direction: column;
}

.jingfang-scene {
  position: absolute;
  inset: 66px 0 6px;
  display: grid;
  place-items: center;
}

.jingfang-compass {
  position: relative;
  width: min(100%, 440px, calc(100vh - 380px));
  width: min(100%, 440px, calc(100svh - 380px));
  aspect-ratio: 1;
  isolation: isolate;
}

.jingfang-compass .luopan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 1;
}

.jingfang-compass .luopan::before,
.jingfang-compass .luopan::after { content: none; }

.luopan-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.luopan-canvas:active { cursor: grabbing; }

.jingfang-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(70, 88, 76, .25);
  border-radius: 50%;
  background: var(--bg);
  color: #526f5e;
  font-size: 21px;
  font-weight: 400;
  pointer-events: none;
}

.jingfang-fallback {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(70, 88, 76, .25);
  background: repeating-radial-gradient(circle, transparent 0 20px, rgba(70, 88, 76, .2) 21px, transparent 22px);
}

.three-ready .jingfang-fallback { display: none; }
.chat-area #chat { position: relative; z-index: 1; pointer-events: none; }
.chat-area .hint { max-width: 100%; text-align: center; line-height: 1.6; }
body.has-messages .jingfang-scene { display: none; }
body.has-messages #chat { pointer-events: auto; }
body.has-messages .chat-area { min-height: 0; }

body > .topbar { max-width: none; }
.jingfang-title { display: flex; align-items: center; padding: 16px 4px 12px; }
body .mask { z-index: 2200; }
body .contact-card p { white-space: nowrap; }

@media (max-width: 820px) {
  body { --font: "ZhiwuSongti", serif; }
  body #q,
  body #send { font-family: "ZhiwuSongti", serif !important; }
  body #q { font-size: 16px; }
  .jingfang-compass { width: min(100%, 320px, calc(100vh - 380px)); width: min(100%, 320px, calc(100svh - 380px)); }
  .jingfang-center { width: 58px; height: 58px; font-size: 18px; }
}