#zq-zee-companion,
#zq-zee-companion * {
  box-sizing: border-box;
}

#zq-zee-companion {
  --zee-ink: #161411;
  --zee-paper: #f4efe6;
  --zee-paper-light: #fffaf0;
  --zee-burgundy: #7c2331;
  --zee-green: #315b43;
  --zee-gold: #d6a842;
  position: relative;
  z-index: 2147483000;
  color: var(--zee-ink);
  font-family: "Courier New", Courier, monospace;
  line-height: 1.25;
}

#zq-zee-companion button,
#zq-zee-companion textarea {
  font: inherit;
}

.zq-zee-walker {
  position: fixed;
  left: 22px;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 221px;
  z-index: 2147483001;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: left 2.15s linear, top 2.15s ease-in-out;
}

.zq-zee-walker.zq-zee-dragging {
  transition: none;
}

.zq-zee-sprite-button {
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  position: relative;
  display: block;
  overflow: visible;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 11px 11px rgba(17, 17, 15, .2));
  cursor: grab;
  touch-action: none;
}

.zq-zee-sprite-button:focus-visible {
  outline: 3px dashed var(--zee-burgundy);
  outline-offset: 4px;
}

.zq-zee-sprite-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
}

.zq-zee-walker.zq-zee-faces-left img {
  transform: scaleX(-1);
}

.zq-zee-walker.zq-zee-faces-right img {
  transform: scaleX(1);
}

.zq-zee-walker.zq-zee-roaming .zq-zee-sprite-button {
  animation: zqZeeStep .34s steps(2, end) infinite;
}

.zq-zee-walker.zq-zee-reacting .zq-zee-sprite-button {
  animation: zqZeePounce .62s steps(4, end) both;
}

.zq-zee-walker.zq-zee-dragging .zq-zee-sprite-button {
  cursor: grabbing;
  filter: drop-shadow(0 17px 14px rgba(17, 17, 15, .28));
}

.zq-zee-reaction {
  min-width: 7rem;
  padding: .45rem .6rem;
  position: absolute;
  left: 50%;
  bottom: calc(100% - 1rem);
  z-index: 2;
  border: 1px solid rgba(22, 20, 17, .28);
  border-radius: 999px;
  background: var(--zee-paper-light);
  box-shadow: 0 6px 18px rgba(17, 17, 15, .16);
  color: var(--zee-burgundy);
  font: 700 .72rem/1.15 "Courier New", monospace;
  text-align: center;
  transform: translateX(-50%) scale(.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.zq-zee-walker.zq-zee-reacting .zq-zee-reaction {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.zq-zee-note-dock {
  --zee-note-scale: 1;
  width: fit-content;
  min-width: min(18.25em, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  position: fixed;
  right: 24px;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 2147483002;
  color: var(--zee-ink);
  font-size: calc(12px * var(--zee-note-scale)) !important;
  text-align: center;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

.zq-zee-note-dock.zq-zee-note-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 18px 16px rgba(17, 17, 15, .23));
}

.zq-zee-note-dock:focus-visible {
  outline: 2px dashed var(--zee-burgundy);
  outline-offset: 7px;
}

.zq-zee-sticky-note {
  width: 100%;
  min-width: 0;
  max-width: calc(100vw - 24px);
  padding: 1.05em 1.1em .9em;
  position: relative;
  border: 1px solid rgba(17, 17, 15, .18);
  background: var(--zee-paper-light);
  box-shadow: 0 17px 42px rgba(20, 18, 14, .23);
  transform: rotate(-1.2deg);
  transition: transform 180ms ease, font-size 180ms ease, width 180ms ease;
  user-select: none;
}

.zq-zee-note-tab {
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #7b531d;
  border-radius: 50%;
  background: var(--zee-gold);
  box-shadow: inset 0 0 0 3px #f3ce70, 0 8px 24px rgba(20, 18, 14, .24);
  color: #2c1b0d;
  cursor: pointer;
  font: 900 1.35rem/1 Arial, sans-serif;
}

.zq-zee-note-tab span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.zq-zee-note-tab:hover,
.zq-zee-note-tab:focus-visible {
  outline: 3px dashed var(--zee-burgundy);
  outline-offset: 4px;
  transform: translateY(-2px);
}

.zq-zee-note-dock.zq-zee-note-minimized {
  width: 3rem;
  min-width: 0;
  max-width: 3rem;
  cursor: default;
}

.zq-zee-note-minimized .zq-zee-sticky-note,
.zq-zee-note-minimized .zq-zee-care-panel {
  display: none !important;
}

.zq-zee-note-minimized .zq-zee-note-tab {
  display: flex;
}

.zq-zee-note-dragging .zq-zee-sticky-note {
  transform: rotate(.4deg) translateY(-3px);
}

.zq-zee-tape {
  width: 5.125em;
  height: 1.5625em;
  position: absolute;
  top: -.875em;
  left: 50%;
  display: block;
  background: rgba(190, 166, 125, .82);
  transform: translateX(-50%) rotate(2deg);
  opacity: .9;
}

.zq-zee-note-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375em;
  text-align: center;
}

.zq-zee-name-tag {
  margin-bottom: .3em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2857em;
  color: var(--zee-ink);
  font: 800 .4375em/1 "Courier New", monospace !important;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.zq-zee-name-tag b {
  width: 2em;
  height: 2em;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 2px solid #7b531d;
  border-radius: 50%;
  background: var(--zee-gold);
  box-shadow: inset 0 0 0 2px #f3ce70;
  color: #2c1b0d;
  font: 900 2em/1 Arial, sans-serif !important;
}

.zq-zee-name-tag > span {
  font: inherit !important;
  letter-spacing: inherit !important;
}

.zq-zee-save-status,
.zq-zee-kicker {
  display: block;
  text-align: center;
  text-transform: uppercase;
}

.zq-zee-save-status {
  color: var(--zee-green);
  font: 700 .375em/1.25 "Courier New", monospace !important;
  letter-spacing: .06em;
}

.zq-zee-kicker {
  margin-top: .4em;
  color: var(--zee-burgundy);
  font: 800 .5em/1.25 "Courier New", monospace !important;
  letter-spacing: .11em;
}

.zq-zee-title {
  display: block;
  color: var(--zee-ink);
  margin: 0 !important;
  font: italic 800 1.55em/1.05 Georgia, serif !important;
  text-align: center;
}

.zq-zee-note-actions {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: .1em;
}

.zq-zee-note-actions button {
  width: max-content;
  max-width: 100%;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .5714em .3em !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #514b43 !important;
  cursor: pointer;
  font: 800 .4375em/1.15 "Courier New", monospace !important;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

.zq-zee-note-actions button:hover,
.zq-zee-note-actions button:focus-visible {
  color: var(--zee-burgundy) !important;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.zq-zee-note-actions .zq-zee-care-launch {
  color: var(--zee-burgundy) !important;
}

.zq-zee-note-size {
  width: 100%;
  margin-top: .6em;
  padding-top: .75em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  border-top: 1px dashed rgba(17, 17, 15, .18);
  color: #6d675e;
  font: 700 .375em/1 "Courier New", monospace !important;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.zq-zee-note-size button {
  width: 1.85em;
  height: 1.75em;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 17, 15, .35);
  background: var(--zee-paper);
  color: var(--zee-ink);
  cursor: pointer;
  font: 800 2em/1 Arial, sans-serif !important;
  text-align: center;
}

.zq-zee-note-size > span {
  font: inherit !important;
  letter-spacing: inherit !important;
}

.zq-zee-note-size button:hover,
.zq-zee-note-size button:focus-visible {
  border-color: var(--zee-burgundy);
  background: var(--zee-burgundy);
  color: var(--zee-paper-light);
}

.zq-zee-note-size button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.zq-zee-care-panel {
  width: min(23rem, calc(100vw - 24px));
  max-height: min(82vh, 46rem);
  padding: 1rem;
  position: absolute;
  right: calc(100% + 12px);
  bottom: 0;
  overflow: auto;
  border: 1px solid rgba(17, 17, 15, .22);
  border-radius: 3px;
  background: var(--zee-paper-light);
  box-shadow: 0 18px 50px rgba(20, 18, 14, .26);
  cursor: default;
  font-size: 16px;
  text-align: left;
  touch-action: auto;
}

.zq-zee-care-panel[hidden] {
  display: none !important;
}

.zq-zee-care-header,
.zq-zee-health-summary,
.zq-zee-care-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.zq-zee-care-header span,
.zq-zee-last-visit > span,
.zq-zee-health-note > span {
  display: block;
  color: var(--zee-burgundy);
  font: 800 .65rem/1.2 "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zq-zee-care-header h2 {
  margin: .2rem 0 0;
  color: var(--zee-ink);
  font: italic 800 1.5rem/1.05 Georgia, serif;
}

.zq-zee-care-header > button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(17, 17, 15, .25);
  border-radius: 50%;
  background: transparent;
  color: var(--zee-ink);
  cursor: pointer;
  font: 700 1.3rem/1 Arial, sans-serif;
}

.zq-zee-health-summary {
  margin: .9rem 0;
  justify-content: flex-start;
}

.zq-zee-health-summary p,
.zq-zee-last-visit p,
.zq-zee-care-notice {
  margin: .2rem 0 0;
  color: #665f56;
  font: 600 .72rem/1.35 "Courier New", monospace;
}

.zq-zee-health-stamp {
  width: 4.25rem;
  height: 4.25rem;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  border: 4px solid var(--zee-green);
  border-radius: 50%;
  color: var(--zee-green);
  text-align: center;
}

.zq-zee-health-stamp strong {
  font: 800 1.3rem/1 Arial, sans-serif;
}

.zq-zee-health-stamp span {
  font: 800 .55rem/1.2 "Courier New", monospace;
  text-transform: uppercase;
}

.zq-zee-last-visit {
  margin-bottom: .85rem;
  padding: .65rem;
  border: 1px dashed rgba(17, 17, 15, .25);
  background: #f7f1e6;
}

.zq-zee-last-visit strong {
  display: block;
  margin-top: .25rem;
  font: 800 .75rem/1.25 "Courier New", monospace;
}

.zq-zee-meters {
  display: grid;
  gap: .4rem;
}

.zq-zee-meter {
  display: grid;
  grid-template-columns: 5.6rem 1fr 2rem;
  align-items: center;
  gap: .45rem;
  font: 700 .68rem/1 "Courier New", monospace;
  text-transform: capitalize;
}

.zq-zee-meter i {
  height: .45rem;
  display: block;
  overflow: hidden;
  border-radius: 99px;
  background: #ded5c7;
}

.zq-zee-meter i b {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--zee-green);
  transition: width 300ms ease;
}

.zq-zee-meter > strong {
  text-align: right;
}

.zq-zee-care-buttons {
  margin-top: .85rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}

.zq-zee-care-buttons button {
  min-height: 3.25rem;
  padding: .45rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(17, 17, 15, .22);
  border-radius: 2px;
  background: var(--zee-paper);
  color: var(--zee-ink);
  cursor: pointer;
  text-align: left;
}

.zq-zee-care-buttons button:hover,
.zq-zee-care-buttons button:focus-visible {
  border-color: var(--zee-burgundy);
  background: #fff7e9;
}

.zq-zee-care-buttons button:disabled {
  cursor: wait;
  opacity: .55;
}

.zq-zee-care-buttons button > b {
  font-size: 1.25rem;
}

.zq-zee-care-buttons button span,
.zq-zee-care-buttons button strong,
.zq-zee-care-buttons button small {
  display: block;
}

.zq-zee-care-buttons button strong {
  font: 800 .72rem/1.2 "Courier New", monospace;
}

.zq-zee-care-buttons button small {
  margin-top: .12rem;
  color: #746c61;
  font: 600 .58rem/1.2 "Courier New", monospace;
}

.zq-zee-health-note {
  margin-top: .8rem;
  display: block;
}

.zq-zee-health-note textarea {
  width: 100%;
  margin-top: .3rem;
  padding: .55rem;
  display: block;
  resize: vertical;
  border: 1px solid rgba(17, 17, 15, .26);
  border-radius: 2px;
  background: #fffdf7;
  color: var(--zee-ink);
  font: 600 .72rem/1.35 "Courier New", monospace;
}

.zq-zee-care-notice {
  min-height: 1.8em;
  margin: .65rem 0;
}

.zq-zee-care-footer button {
  padding: .5rem .6rem;
  border: 1px solid var(--zee-burgundy);
  border-radius: 2px;
  background: var(--zee-paper-light);
  color: var(--zee-burgundy);
  cursor: pointer;
  font: 800 .65rem/1.15 "Courier New", monospace;
  text-transform: uppercase;
}

.zq-zee-care-footer button:last-child {
  background: var(--zee-burgundy);
  color: var(--zee-paper-light);
}

@keyframes zqZeeStep {
  0%, 100% { transform: translateY(0) rotate(-.7deg); }
  50% { transform: translateY(-5px) rotate(.7deg); }
}

@keyframes zqZeePounce {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-14px) scale(1.03); }
  70% { transform: translateY(-4px) scale(.99); }
}

@media (max-width: 760px) {
  .zq-zee-walker {
    width: 140px;
    left: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .zq-zee-note-dock {
    min-width: min(17em, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .zq-zee-sticky-note {
    max-width: calc(100vw - 20px);
    padding: .95em 1em .8em;
  }

  .zq-zee-note-dock.zq-zee-note-minimized {
    min-width: 0;
  }

  .zq-zee-care-panel {
    width: auto;
    max-height: calc(100dvh - 20px);
    padding: .8rem;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    font-size: 14px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .zq-zee-care-header h2 {
    font-size: 1.3rem;
  }

  .zq-zee-health-summary {
    margin: .65rem 0;
  }

  .zq-zee-health-stamp {
    width: 3.7rem;
    height: 3.7rem;
  }

  .zq-zee-care-buttons {
    margin-top: .65rem;
    gap: .35rem;
  }

  .zq-zee-care-buttons button {
    min-height: 2.8rem;
    padding: .35rem;
  }
}

@media (max-width: 430px) {
  .zq-zee-care-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zq-zee-care-buttons button small {
    display: none;
  }

  .zq-zee-care-footer {
    align-items: stretch;
  }

  .zq-zee-care-footer button {
    flex: 1 1 0;
    padding: .55rem .35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zq-zee-walker,
  .zq-zee-walker.zq-zee-roaming .zq-zee-sprite-button,
  .zq-zee-walker.zq-zee-reacting .zq-zee-sprite-button,
  .zq-zee-meter i b {
    animation: none;
    transition: none;
  }
}