/* Pip follows gently; every essential action remains in the document. */
.pip-companion {
  --pip-size: 78px;
  position: fixed;
  z-index: 45;
  left: 0;
  top: 0;
  width: var(--pip-size);
  height: var(--pip-size);
  color: #141413;
  font-family: var(--sans, "Public Sans", sans-serif);
  isolation: isolate;
}
.pip-avatar {
  display: block;
  position: relative;
  width: var(--pip-size);
  height: var(--pip-size);
  padding: 0;
  color: #141413;
  background: transparent;
  border: 0;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pip-avatar canvas, .pip-avatar .pip-ink {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pip-avatar canvas { opacity: 0; }
.pip-rendered .pip-avatar canvas { opacity: 1; }
.pip-rendered .pip-ink { visibility: hidden; }
.pip-name {
  position: absolute;
  right: 6px;
  bottom: -9px;
  padding: 1px 5px;
  font: 12px/1.5 var(--serif, "Instrument Serif", serif);
  background: #F5F2EB;
}
.pip-avatar:hover .pip-name, .pip-avatar:focus-visible .pip-name { color: #C84B31; }
.pip-avatar:focus-visible, .pip-companion button:focus-visible, .pip-companion a:focus-visible {
  outline: 2px solid #C84B31;
  outline-offset: 5px;
}
.pip-bubble {
  position: absolute;
  left: var(--pip-bubble-x, 0px);
  top: var(--pip-bubble-y, 0px);
  width: 260px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  padding: 32px 22px 11px;
  border: 1px solid #141413;
  border-radius: 43% 47% 45% 44% / 18% 23% 24% 21%;
  background: #F5F2EB;
  box-shadow: none;
  text-align: left;
  font-size: 12px;
  line-height: 1.55;
  box-sizing: border-box;
  animation: pip-note-arrives 180ms ease-out both;
  z-index: 2;
}
.pip-bubble-top {
  position: absolute;
  top: 4px;
  right: 17px;
  height: 28px;
  z-index: 1;
}
.pip-companion button { font-family: inherit; }
.pip-bubble-top button {
  padding: 0;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: #141413;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.pip-bubble p { position: relative; margin: 0 0 7px; font: inherit; }
.pip-type-measure { display: block; visibility: hidden; }
.pip-typed { position: absolute; inset: 0; }
.pip-typing .pip-typed::after {
  content: "";
  display: inline-block;
  height: .95em;
  width: 1px;
  margin-left: 2px;
  vertical-align: -.08em;
  background: #C84B31;
}
.pip-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pip-thought-dot {
  position: absolute;
  border: 1px solid #141413;
  border-radius: 50%;
  background: #F5F2EB;
  pointer-events: none;
  z-index: 1;
}
.pip-bubble>a {
  display: inline-block;
  padding-block: 3px;
  color: #C84B31;
  font-size: 11px;
  line-height: 1.65;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pip-settings {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 8px;
  border-top: 0;
  margin-top: 3px;
  padding-top: 2px;
}
.pip-settings button {
  padding: 5px 0;
  min-height: 28px;
  color: #141413;
  font-size: 10px;
  line-height: 1.4;
  text-align: left;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pip-settings button:hover, .pip-settings button[aria-pressed="true"] { color: #C84B31; }
.pip-settings button:disabled { color: #141413; opacity: .6; cursor: default; text-decoration: none; }
@keyframes pip-note-arrives {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .pip-companion { --pip-size: 58px; }
  .pip-name { bottom: -5px; font-size: 11px; }
  .pip-bubble {
    width: 260px;
    max-width: calc(100vw - 24px);
    padding: 34px 22px 11px;
    max-height: calc(100dvh - 100px);
  }
  .pip-settings { gap: 0 8px; }
  .pip-settings button { min-height: 34px; }
  .pip-bubble-top { top: 3px; right: 17px; }
  .pip-bubble-top button { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .pip-bubble { animation: none; }
}
.pip-still .pip-bubble { animation: none; }
@media print { .pip-companion { display: none !important; } }
