/**
 * RoccOS Greta Character Styles
 * Sprite sheet driven dog, retro needs bars, rectangular menu buttons
 */

/* ── Greta Base ── */
.greta {
  position: absolute;
  bottom: calc(var(--dock-height) + var(--dock-padding) * 2 + var(--sp-4));
  left: var(--sp-10);
  z-index: var(--z-greta);
  cursor: pointer;
  transition: transform 2s var(--ease-in-out);
}

.greta-sprite {
  width: 64px;
  height: 56px;
  position: relative;
  background: url('../img/greta_sprite_sheet.png') no-repeat;
  background-size: auto 56px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* ── Greta Speech — solid, bordered ── */
.greta-speech {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-1) var(--sp-3);
  background: var(--os-surface);
  border: 2px solid var(--os-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--os-text);
  white-space: nowrap;
  animation: speechBubbleIn 0.2s var(--ease-spring) both;
  box-shadow: var(--shadow-sm);
}

/* ── Interaction Menu — rectangular, retro ── */
.greta-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-greta) + 10);
  display: flex;
  gap: var(--sp-2);
  animation: scaleIn 0.2s var(--ease-spring) both;
}

.greta-menu[hidden] {
  display: none;
}

.greta-menu-btn {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-md);
  border: 2px solid var(--os-border);
  background: var(--os-surface);
  color: var(--os-text);
  font-size: var(--text-xs);
  font-family: var(--font-system);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast), transform var(--duration-fast);
  box-shadow: var(--shadow-sm);
}

.greta-menu-btn:hover {
  background: var(--os-accent);
  color: var(--os-accent-text);
  border-color: var(--os-accent);
  transform: translateY(-2px);
}

/* ── Fetch Ball ── */
.greta-ball {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--os-coral);
  border: 2px solid rgba(0,0,0,0.2);
  z-index: var(--z-greta);
  pointer-events: none;
}

/* ── Needs Indicators — retro bars with borders ── */
.greta-needs {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity var(--duration-fast);
}

.greta:hover .greta-needs {
  opacity: 1;
}

.greta-need-bar {
  width: 18px;
  height: 5px;
  border-radius: var(--radius-sm);
  background: var(--os-surface);
  border: 1px solid var(--os-border);
  overflow: hidden;
}

.greta-need-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.5s var(--ease-out);
  /* TODO(Agent A): Convert to transform: scaleX() — JS sets .style.width in greta.js:127-129 */
}

.greta-need-fill[data-type="hunger"]   { background: var(--os-coral); }
.greta-need-fill[data-type="happiness"]{ background: var(--os-warning); }
.greta-need-fill[data-type="energy"]   { background: var(--os-sage); }

/* ── Fleeing State ── */
.greta.greta-fleeing {
  transition: transform 0.4s var(--ease-out);
  pointer-events: none;
}