.companion-reaction {
  position: fixed;
  inset: auto max(12px, env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom)) auto;
  z-index: 1200;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: end;
  width: min(296px, calc(100vw - 24px));
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
  pointer-events: none;
  animation: companion-arrive 220ms ease-out both;
}
.companion-reaction[popover]:not(:popover-open) { display: none; }
.companion-reaction::backdrop { background: transparent; pointer-events: none; }
.companion-reaction-copy {
  position: relative;
  z-index: 1;
  align-self: start;
  margin-top: 10px;
  margin-right: -8px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-s) var(--radius-xl);
  background: #fffffff5;
  box-shadow: 0 3px 14px #203a5910;
}
.companion-reaction-copy p { margin: 0; font-size: var(--text-14); line-height: 1.45; font-weight: 500; color: #344256; }
.companion-reaction-image { display: block; width: 96px; height: auto; object-fit: contain; }
.companion-reaction-image[hidden] { display: none; }
.companion-reaction-close {
  position: absolute;
  top: -22px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #52667f;
  font: inherit;
  font-size: var(--text-20);
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.companion-reaction-close:focus-visible { outline: 3px solid #4875bf; outline-offset: 3px; }
.companion-reaction[data-kind="workout"] { bottom: calc(150px + env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr) 112px; }
.companion-reaction[data-kind="workout"] .companion-reaction-image { width: 112px; }
@keyframes companion-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-height: 560px) {
  .companion-reaction, .companion-reaction[data-kind="workout"] { grid-template-columns: minmax(0, 1fr) 80px; width: min(272px, calc(100vw - 24px)); }
  .companion-reaction .companion-reaction-image, .companion-reaction[data-kind="workout"] .companion-reaction-image { width: 80px; }
  .companion-reaction-copy { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .companion-reaction { animation: none; }
}

/* Eva shares the date row; notifications never reserve a full-height hero. */
.home-companion {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.home-companion-image {
  display: block;
  order: 1;
  flex-shrink: 0;
  object-fit: contain;
}
.home-companion-copy {
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}
@media (max-width: 360px) { .home-companion { gap: 4px; } }

/* Static illustrations share space with the module heading, never its inputs. */
.module-companion-heading { align-items: center; display: block; }
.module-companion-copy { flex: 1; min-width: 0; width: 100%; }
.module-companion-portrait { display: block; flex: none; object-fit: contain; pointer-events: none; user-select: none; }
.food-companion-heading { margin-bottom: 24px; }
.food-companion-heading .page-heading { margin: 0; gap: 12px; flex-wrap: nowrap; }
.water-page-heading .module-companion-copy > .text-button { min-height: 44px; margin-top: 4px; padding: 4px 0; font-size: var(--text-14); }
.body-activity-chooser > .module-companion-heading { margin: -6px 0 16px; }
.body-activity-chooser .module-companion-copy { color: var(--muted); font-size: var(--text-14); line-height: 1.5; }
@media (max-width: 360px), (max-height: 600px) {
  .module-companion-heading { gap: 12px; }
  .module-companion-portrait { width: 76px; height: 76px; }
}

.eva-trainer-intro { display: flex; align-items: center; gap: 20px; min-width: 0; }
.eva-trainer-copy { flex: 1; min-width: 0; }
.eva-trainer-copy > strong { display: block; font-size: var(--text-16); font-weight: 600; line-height: 1.4; }
.eva-trainer-role { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-12); line-height: 1.4; }
.eva-trainer-copy > p { margin: 10px 0 0; color: var(--muted); font-size: var(--text-14); line-height: 1.5; }
.eva-trainer-portrait { display: block; order: 1; flex: none; width: 120px; height: 120px; object-fit: contain; pointer-events: none; user-select: none; }
.eva-trainer-intro.is-compact { gap: 12px; margin-bottom: 12px; }
.eva-trainer-intro.is-compact .eva-trainer-portrait { order: 0; width: 64px; height: 64px; }
@media (max-width: 360px), (max-height: 600px) {
  .eva-trainer-intro { gap: 14px; }
  .eva-trainer-portrait { width: 100px; height: 100px; }
  .eva-trainer-intro.is-compact .eva-trainer-portrait { width: 48px; height: 48px; }
}