/* ============================================================
   ONRYO Assistant
   A draggable desktop helper with a speech bubble. Used both by
   the installed assistant and by the spyware one the infestation
   drops on you - same body, different personality.
   ============================================================ */

.assistant {
  position: fixed;
  right: 26px;
  bottom: 70px;
  z-index: 9700;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  cursor: grab;
  user-select: none;
}
.assistant.dragging { cursor: grabbing; }
.assistant.hidden { display: none; }

.assistant .bubble {
  order: -1;
  max-width: 250px;
  background: #ffffe1;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
  position: relative;
  animation: as-pop .18s ease-out;
}
@keyframes as-pop {
  from { transform: scale(.85) translateY(6px); opacity: 0; }
}
.assistant .bubble::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 12px;
  border: 5px solid transparent;
  border-left-color: #000;
}

/* Dragged close to the left edge there is no room for the bubble
   beside him, so it moves to his other side and the tail turns
   around to keep pointing at him. */
.assistant.flip .bubble { order: 1; }
.assistant.flip .bubble::after {
  right: auto;
  left: -9px;
  border-left-color: transparent;
  border-right-color: #000;
}

/* a small label above the line, so facts and hints read differently */
.assistant .bubble .kind {
  display: block;
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #808080;
  margin-bottom: 3px;
}
.assistant .bubble .kind.fact { color: #a00000; }
.assistant .bubble .kind.hint { color: #000080; }

.assistant .bubble .acts {
  margin-top: 9px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.assistant .bubble .acts button {
  min-width: 56px;
  font-size: 11px;
  padding: 2px 8px 3px;
}

.assistant .guy {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  animation: as-bob 2.4s ease-in-out infinite;
}
@keyframes as-bob { 50% { transform: translateY(-7px) rotate(-4deg); } }

/* the spyware build is a bit more agitated */
.assistant.evil .guy { animation: as-bob 1.1s ease-in-out infinite; }
.assistant.evil .bubble { background: #fff0f0; }

/* when it has nothing to say it just floats there */
.assistant.quiet .bubble { display: none; }

@media (prefers-reduced-motion: reduce) {
  .assistant .guy, .assistant .bubble { animation: none; }
}

@media (max-width: 620px) {
  .assistant { right: 8px; bottom: 78px; }
  .assistant .bubble { max-width: 175px; font-size: 11px; }
  .assistant .guy { width: 54px; height: 54px; flex: 0 0 54px; }
}