/* A small, personal invitation to the existing AI conversation. */
.desktop-companion {
  appearance: none; position: absolute; z-index: 12; left: 50%; top: 28%;
  transform: translateX(-50%); width: 190px; margin: 0; padding: 0;
  border: 0; border-radius: 14px; background: none; color: #f7f3e9;
  display: flex; flex-direction: column; align-items: center;
  font: inherit; text-align: center; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.companion-bubble {
  position: relative; display: block; box-sizing: border-box; width: max-content;
  padding: 9px 12px; border: 2px solid #252c31; border-radius: 12px;
  background: #fffdf6; color: #2d3438; box-shadow: 3px 4px 0 #000;
  text-align: left; transition: transform .2s ease, background .2s;
}
.companion-bubble::after {
  content: ''; position: absolute; left: calc(50% - 7px); bottom: -8px; width: 12px; height: 12px;
  border-right: 2px solid #252c31; border-bottom: 2px solid #252c31;
  background: #fffdf6; transform: rotate(45deg);
}
.companion-click, .companion-tap { font-size: 12px; font-weight: 500; white-space: nowrap; }
.companion-click>span, .companion-tap>span { margin-left: 3px; color: #6381a0; }
.companion-tap { display: none; }
.companion-character {
  display: block; flex: none; width: 166px; height: 166px; margin: 9px 0 0;
  object-fit: contain; image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 2px 2px #000);
  transform-origin: 50% 92%; transition: transform .3s cubic-bezier(.2,.8,.3,1.15);
}
.desktop-companion:focus-visible { outline: 2px solid #c1d8ec; outline-offset: 9px; }
.desktop-companion:focus-visible .companion-bubble { transform: translateY(-3px); }
@media (hover: hover) and (pointer: fine) {
  .desktop-companion:hover .companion-character { transform: translateY(-4px) rotate(-3deg); }
  .desktop-companion:hover .companion-bubble { transform: translateY(-3px); }
}
.desktop-companion:active .companion-character { transform: translateY(1px) scale(.97); }
#desktop:has(.window--chat:not(.closing)) .desktop-companion { visibility: hidden; }
@media (max-width: 719px) {
  .desktop-companion { width: 176px; }
  .companion-character { width: 140px; height: 140px; }
  .companion-bubble { padding: 8px 10px; }
}
@media (hover: none), (pointer: coarse), (max-width: 719px) {
  .companion-click { display: none; }
  .companion-tap { display: inline; }
}
@media (max-width: 719px) and (max-height: 700px), (max-height: 500px) {
  .desktop-companion { display: grid; grid-template-columns: 76px max-content; align-items: center; width: max-content; }
  .companion-character { grid-column: 1; grid-row: 1; width: 114px; height: 114px; margin: 0 0 0 -20px; }
  .companion-bubble { grid-column: 2; grid-row: 1; }
  .companion-bubble::after { left: -7px; bottom: calc(50% - 7px); transform: rotate(135deg); }
}
@media (min-width: 640px) and (max-height: 500px) {
  .desktop-companion { grid-template-columns: 64px max-content; }
  .companion-character { width: 80px; height: 80px; margin-left: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .companion-character, .companion-bubble { transition: none; }
  .desktop-companion .companion-character, .desktop-companion .companion-bubble { transform: none !important; }
}