/* Memory/Stack display */
.memory-empty {
  color: #666;
  font-style: italic;
  padding: 1rem;
}

.memory-legend {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: #252525;
  border-radius: 4px;
  margin-top: auto;
  font-size: 11px;
}

.memory-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.memory-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.memory-legend-color.legend-int { background: #64b5f6; }
.memory-legend-color.legend-float { background: #4fc3f7; }
.memory-legend-color.legend-str { background: #81c784; }
.memory-legend-color.legend-bool { background: #ba68c8; }
.memory-legend-color.legend-func { background: #ffb74d; }
.memory-legend-color.legend-arr { background: #ce93d8; }

.memory-legend-label {
  color: #999;
}

.memory-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.memory-var {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #252525;
  border-radius: 4px;
}

.var-name {
  font-weight: 600;
  color: #fff;
  min-width: 80px;
}

.var-type {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 500;
}

.var-type-int {
  background: #1e3a5f;
  color: #64b5f6;
}

.var-type-float {
  background: #1e4a5f;
  color: #4fc3f7;
}

.var-type-str {
  background: #1e3f1e;
  color: #81c784;
}

.var-type-bool {
  background: #3f1e3f;
  color: #ba68c8;
}

.var-type-func {
  background: #3f2e1e;
  color: #ffb74d;
}

.var-type-arr {
  background: #2e1e3f;
  color: #ce93d8;
}

.var-value {
  flex: 1;
  text-align: right;
}

.var-value-int {
  color: #64b5f6;
}

.var-value-float {
  color: #4fc3f7;
}

.var-value-str {
  color: #81c784;
}

.var-value-bool {
  color: #ba68c8;
}

.var-value-func {
  color: #ffb74d;
}

.var-value-arr {
  color: #ce93d8;
}

.var-changed {
  animation: var-highlight 0.5s ease-out;
}

@keyframes var-highlight {
  0% {
    background: #4a7aff;
  }
  100% {
    background: #252525;
  }
}

/* Call Stack Display */
.call-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}

.call-stack-label {
  color: #888;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.stack-frame {
  background: #252525;
  border: 1px solid #444;
  border-radius: 4px;
  overflow: hidden;
}

.stack-frame-active {
  border-color: #4a7aff;
  box-shadow: 0 0 8px rgba(74, 122, 255, 0.3);
}

.stack-frame-global {
  border-style: dashed;
  border-color: #666;
}

.stack-frame-global.stack-frame-active {
  border-color: #4a7aff;
  border-style: solid;
}

.frame-header {
  background: #333;
  padding: 0.4rem 0.6rem;
  font-weight: 600;
  color: #fff;
  font-size: 0.85rem;
  border-bottom: 1px solid #444;
}

.stack-frame-active .frame-header {
  background: #2a3a5a;
  border-bottom-color: #4a7aff;
}

.stack-frame-global .frame-header {
  color: #888;
  font-style: italic;
}

.frame-line {
  color: #888;
  font-weight: 400;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.frame-variables {
  padding: 0.4rem;
}

.frame-variables .memory-var {
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.25rem;
  background: #1e1e1e;
}

.frame-variables .memory-var:last-child {
  margin-bottom: 0;
}

.memory-empty-frame {
  color: #666;
  font-style: italic;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}