.model-vrm-widget { position:relative; width:320px; height:480px; background:transparent; touch-action:none; }
.model-vrm-widget canvas { position:absolute; display:block; left:0; top:0; background:transparent; }
.model-vrm-widget[data-model-pass-through],
.model-vrm-widget[data-model-pass-through] > canvas,
.model-vrm-widget[data-model-pass-through] > img { pointer-events:none; touch-action:auto; }
.model-vrm-widget > img { display:block; width:100%; height:100%; object-fit:contain; }
.model-vrm-widget > img[hidden], .model-vrm-widget > canvas[hidden] { display:none; }

.model-widget__bubble {
  --model-bubble-shift-x: 0px;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 2;
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 14px;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 14px;
  color: #20242b;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
  pointer-events: none;
  transform: translateX(calc(-50% + var(--model-bubble-shift-x)));
}

.model-widget__bubble[data-model-placement="below"] {
  top: calc(100% + 12px);
  bottom: auto;
}

.model-widget__bubble::after {
  position: absolute;
  left: calc(50% - var(--model-bubble-shift-x));
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgb(255 255 255 / 65%);
  border-bottom: 1px solid rgb(255 255 255 / 65%);
  background: rgb(255 255 255 / 94%);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.model-widget__bubble[data-model-placement="below"]::after {
  top: -7px;
  bottom: auto;
  transform: translateX(-50%) rotate(225deg);
}

.model-widget__bubble[hidden] {
  display: none;
}

.model-widget__bubble-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  animation: model-bubble-reveal 180ms ease-out;
}

@keyframes model-bubble-reveal { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .model-widget__bubble-text { animation: none; }
}