/* A frameless typing ghost uses spare sidebar space without reserving a card. */
.typing-companion-dock {
  display: flex;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
  z-index: 1;
  isolation: isolate;
}
.typing-companion-dock[hidden] { display: none !important; }
.typing-companion-actor {
  flex: none;
  width: 132px;
  height: 132px;
  background-image: url("/violet-typing.png");
  background-size: 400% auto;
  background-position: 0 50%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
  filter: drop-shadow(0 2px 2px #112c391a);
}
.typing-companion-dock.companion-active .typing-companion-actor {
  opacity: var(--companion-opacity, .45);
  transform: translateY(0);
  animation: mechanical-typing 700ms steps(1, end) infinite;
}
.typing-companion-dock.companion-instant .typing-companion-actor {
  transition: none;
}
.typing-companion-dock.companion-reduced .typing-companion-actor {
  animation: none;
  transform: none;
  transition: none;
}
.companion-preview-stage { display: none; pointer-events: none; }
.companion-preview-stage.companion-preview-active { display: block; margin-top: 14px; }
.typing-companion-demo {
  position: relative;
  inset: auto;
  height: 148px;
  background: var(--reader-paper, var(--skin-paper, #fff));
  justify-content: center;
  border: 1px solid var(--skin-border, #e8e4dc);
  border-radius: 8px;
  padding: 0 18px;
}
.typing-companion-demo .typing-companion-actor { width: 148px; height: 148px; }
@keyframes mechanical-typing {
  0%, 24.999% { background-position: 0 50%; }
  25%, 49.999% { background-position: 33.333333% 50%; }
  50%, 74.999% { background-position: 66.666667% 50%; }
  75%, 100% { background-position: 100% 50%; }
}
@media (max-height: 750px) {

  .typing-companion-actor { width: 112px; height: 112px; }
  .typing-companion-demo { height: 112px; }
  .typing-companion-demo .typing-companion-actor { width: 112px; height: 112px; }
}
@media (max-width: 500px) {
  .typing-companion-dock { padding-left: 8px; padding-right: 8px; }
  .typing-companion-actor { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-companion-dock.companion-active .typing-companion-actor { animation: none; transform: none; transition: none; }
}

/* No idle image, backdrop, border or layout footprint. */
.projects-pane { position: relative; }
.typing-companion-host {
  display: none; position: absolute; left: 12px; right: 12px; bottom: 80px;
  height: 132px; pointer-events: none; overflow: hidden; z-index: 1;
}
.typing-companion-host.companion-host { display: block; }
body[data-decoration="off"] .typing-companion-host { display: none; }
@media (max-height: 750px) {
  .typing-companion-host { height: 112px; }
}
@media (max-height: 670px) {
  .typing-companion-host { display: none; }
}